:root {
  --bg: #1e1f22; --card: #2b2d31; --card2: #313338; --line: #3f4147; --text: #e6e7ea; --muted: #a3a6ad;
  --done: #2e9e5b; --open: #d4a017; --wait: #8a8f98; --accent: #5865f2; --today: #ed4245; --link: #8ea1ff;
  --edge: #7d828c; --frame: rgba(88, 101, 242, 0.06); --frameline: #4a4f7a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: hidden; display: flex; flex-direction: column;
  font: 14px/1.45 "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
code { background: #1e1f22; border-radius: 4px; padding: 0 4px; font-size: 12px; color: #c9cdd4; }
a { color: var(--link); text-decoration: none; cursor: pointer; }
.sub { color: var(--muted); font-size: 12.5px; }

/* header */
header { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 16px; background: var(--card);
  border-bottom: 1px solid var(--line); z-index: 5; }
h1 { margin: 0; font-size: 18px; margin-right: 6px; }
#pagesel { background: #2b2d31; color: inherit; border: 1px solid #4e5058; border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 13px; max-width: 220px; }
#pagesel:focus-visible { outline: 2px solid #5865f2; outline-offset: 1px; }
.filters { display: flex; gap: 6px; }
button { background: var(--line); color: var(--text); border: 0; border-radius: 6px; padding: 4px 10px; font: inherit;
  font-size: 13px; cursor: pointer; }
button.on { background: var(--accent); }
nav { display: flex; gap: 14px; font-size: 13px; margin-left: auto; margin-right: 230px; }

/* canvas */
main { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: default;
  background-image: radial-gradient(#2c2e33 1px, transparent 1px); background-size: 22px 22px; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#arrows { position: absolute; left: -5000px; top: -5000px; width: 20000px; height: 20000px; overflow: visible; pointer-events: none; }
#arrows .ar { fill: none; stroke-width: 1.6; }
#arrows .hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
#arrows text { fill: #c3c6cc; font-size: 12px; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
#arrows .dim { opacity: 0.2; }

/* blocks */
.blk { position: absolute; transition: opacity 0.15s; }
.blk.dim { opacity: 0.3; }
.blk.gone { opacity: 0.45; border-style: dashed !important; }
.blk.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.shp { pointer-events: none; }
.shp svg { position: absolute; left: 0; top: 0; overflow: visible; }
.shp .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4px 8px; white-space: pre-wrap; overflow: hidden; pointer-events: none; }
.txt { white-space: pre-wrap; overflow: hidden; line-height: 1.35; cursor: default; border-radius: 4px; padding: 0 2px; }
.thr { display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 5px; cursor: pointer; font-size: 13px;
  background: var(--card2); border: 1px solid transparent; }
.thr .warn { position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; background: #fab005;
  color: #1e1f22; font: 700 11px/15px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--bg); cursor: help; }
.thr:hover { border-color: var(--line); }
.thr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr em { font-style: normal; color: var(--muted); font-size: 11.5px; }
.thr.d span { color: var(--muted); }
.pg { display: flex; align-items: center; gap: 6px; padding: 0 4px; border-radius: 6px; cursor: pointer; font-size: 14.5px;
  border: 1px solid transparent; overflow: hidden; }
.pg:hover { border-color: var(--line); }
.pg b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg b::before { content: "▸ "; color: var(--muted); }
.pg .cnt { display: flex; gap: 3px; }
.pg .go { font-size: 13px; padding: 0 3px; }
/* link blocks, and the ↗ corner of a linked shape or text */
.lnk { display: flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: 5px; cursor: pointer; font-size: 13px;
  background: var(--card2); border: 1px solid var(--frameline); color: var(--link); overflow: hidden; }
.lnk:hover { border-color: var(--accent); }
.lnk span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnk .go { font-size: 13px; }
.shp > .go, .txt > .go { position: absolute; top: 2px; right: 4px; font-size: 13px; pointer-events: auto; line-height: 1;
  background: var(--card2); border-radius: 4px; padding: 1px 3px; }
.txt.linked { padding-right: 18px; }

/* todo blocks: the to-do list of the linked threads */
/* above the arrows layer: a link line or its click band must never cover a check box */
.todo { overflow: hidden auto; z-index: 1; background: var(--card2); border: 1px solid #4a6b55; border-left: 3px solid var(--done); border-radius: 6px;
  padding: 4px 6px 6px; font-size: 12.5px; cursor: default; }
.todo .tdh { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 12.5px; padding-bottom: 3px; cursor: move; }
.todo .tdh span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo .tdh em { margin-left: auto; flex: none; font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.todo .tds { color: var(--muted); font-size: 11.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo .tdi { display: flex; gap: 6px; align-items: flex-start; padding: 2px 2px; border-radius: 4px; cursor: pointer; line-height: 1.35; }
.todo .tdi:hover { background: rgba(255, 255, 255, 0.06); }
.todo .tdi input { margin: 2px 0 0; accent-color: var(--done); flex: none; cursor: pointer; }
.todo .tdi span { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.todo .tdi.done span { color: var(--muted); text-decoration: line-through; }
.todo .tdi button { background: none; color: var(--muted); padding: 0 3px; font-size: 11px; visibility: hidden; }
.todo .tdi:hover button { visibility: visible; }
.todo .tdi button:hover { color: var(--today); }
.todo .tdadd { width: 100%; margin-top: 3px; background: transparent; color: var(--text); border: 1px dashed var(--line);
  border-radius: 4px; padding: 2px 5px; font: inherit; font-size: 12px; user-select: text; -webkit-user-select: text; }
.todo .tdadd:focus { outline: none; border: 1px solid var(--done); background: var(--bg); }
.todo .tde { color: var(--muted); font-size: 11.5px; }
.todo.orphan { border-style: dashed; border-left-style: dashed; }
/* light fills get dark writing */
.blk.lt, .blk.lt .tdadd { color: #1e1f22; }
.blk.lt em, .blk.lt .tds, .blk.lt .tde, .blk.lt .tdh em, .blk.lt .tdi.done span, .blk.lt .tdi button { color: #5c5f66; }
.blk.lt.lnk { color: #2b3aa8; }
.blk.lt .tdadd:focus { background: rgba(255, 255, 255, 0.6); }

/* logic links, connection points and link targets */
#arrows .lg .ar { stroke-width: 2.2; }
#arrows .on .ar { stroke-width: 3.4; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75)); }
#arrows .on .hd, #arrows .on circle { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75)); }
#ports { position: absolute; left: 0; top: 0; }
.port { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid #4cc9f0;
  cursor: crosshair; z-index: 2; }
.port:hover { background: #4cc9f0; transform: scale(1.25); }
.blk.lok { outline: 2px solid #40c057; outline-offset: 2px; border-radius: 6px; }
.blk.lno { opacity: 0.35; }
.blk.lhit { outline: 3px solid #40c057; outline-offset: 3px; box-shadow: 0 0 12px rgba(64, 192, 87, 0.6); }
main.drawing .blk.todo, main.drawing .blk.thr { cursor: crosshair; }
#pop .seg button { flex: 1; }
#pop .seg button.on { background: var(--accent); }
#pop .seg button:disabled { opacity: 0.4; cursor: default; }

/* snapping guides */
#guides path { stroke: #ff4d6d; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
#guides path.gap { stroke: #ff8fa3; stroke-dasharray: 3 2; }
#guides .gsz { fill: #ff4d6d; font-size: 11px; text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }

/* colour palette under the property bar */
#props .pw { position: relative; }
#props .pbtn { display: flex; gap: 5px; align-items: center; padding: 2px 8px; font-size: 12.5px; }
#props .pbtn i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #6b6f78; }
#props .pbtn i.none { background: repeating-linear-gradient(45deg, transparent 0 3px, #6b6f78 3px 4px); }
#props .pal { position: absolute; top: calc(100% + 8px); left: 0; background: var(--card2); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 4px; }
#props .pal .pr { display: flex; gap: 4px; }
#props .pal .pr button { width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.18); }
#props .pal .pr button:hover { transform: scale(1.15); }
#props .pal .pr button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
#props .pal .pe { align-items: center; margin-top: 3px; gap: 8px; }
#props .pal .pe button { width: auto; padding: 2px 8px; font-size: 12px; background: var(--line); color: var(--text); }
#props .pal .pe label { display: flex; gap: 5px; align-items: center; font-size: 12px; }
#props .pal input[type="color"] { width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }

/* selection boxes and handles */
#selui { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.sb { position: absolute; border: 1.5px solid var(--accent); border-radius: 4px; }
.sb.g { border-style: dashed; }
.sb.scope { border: 1px dashed var(--muted); border-radius: 8px; }
.rh, .eh { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--accent); pointer-events: auto; }
.rh { cursor: nwse-resize; border-radius: 2px; }
.rh[data-rh="ne"], .rh[data-rh="sw"] { cursor: nesw-resize; }
.rh[data-rh="n"], .rh[data-rh="s"] { cursor: ns-resize; }
.rh[data-rh="e"], .rh[data-rh="w"] { cursor: ew-resize; }
.eh { width: 12px; height: 12px; border-radius: 50%; cursor: crosshair; }
#editor { position: absolute; z-index: 3; background: var(--card2); color: var(--text); border: 1.5px solid var(--accent);
  border-radius: 4px; padding: 2px 4px; font: inherit; line-height: 1.35; resize: none; outline: none;
  user-select: text; -webkit-user-select: text; }
#editor[hidden] { display: none; }
main.drawing { cursor: crosshair; }

/* tool bar, property bar, drawer */
#tools { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 5px; z-index: 6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
#tools button { width: 34px; height: 34px; padding: 0; font-size: 17px; background: none; }
#tools button:hover:not(:disabled) { background: var(--line); }
#tools button.on { background: var(--accent); }
#tools button:disabled { opacity: 0.35; cursor: default; }
#props { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; z-index: 6; font-size: 12.5px;
  color: var(--muted); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); white-space: nowrap; }
#props[hidden] { display: none; }
#props select { background: var(--line); color: var(--text); border: 0; border-radius: 5px; padding: 2px 4px; font: inherit; }
#props .sw { display: flex; gap: 3px; align-items: center; }
#props .sw button { width: 18px; height: 18px; padding: 0; border-radius: 4px; border: 1px solid #55585f; font-size: 11px;
  line-height: 1; color: var(--muted); }
#props .sw button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
#drawer { position: absolute; right: 12px; bottom: 34px; width: 250px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; z-index: 6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 12.5px; }
#drawer .dh { padding: 6px 10px; cursor: pointer; color: var(--muted); }
#drawer .dh b { color: var(--text); }
#drawer .dl { max-height: 40vh; overflow-y: auto; padding: 0 5px 6px; }
#drawer .di { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 5px; cursor: grab; }
#drawer .di:hover { background: var(--line); }
#drawer .di span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer .di em { font-style: normal; color: var(--muted); font-size: 11px; }
#drawer .pgi { font-style: normal; color: var(--muted); width: 8px; }
#drawer .dsub { color: var(--muted); padding: 4px 5px 2px; cursor: pointer; }
#drawer .empty { color: var(--muted); padding: 4px 5px; }
#ghost { position: fixed; z-index: 50; pointer-events: none; background: var(--accent); color: #fff; border-radius: 5px;
  padding: 2px 8px; font-size: 12.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ghost[hidden] { display: none; }

.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.bar .d { background: var(--done); } .bar .o { background: var(--open); } .bar .w { background: var(--wait); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.d { background: var(--done); } .dot.o { background: var(--open); } .dot.w { background: var(--wait); }
.chip { display: inline-block; min-width: 20px; text-align: center; border-radius: 6px; padding: 0 5px; font-size: 11.5px;
  font-weight: 600; color: #111; }
.chip.d { background: var(--done); } .chip.o { background: var(--open); } .chip.w { background: var(--wait); }

/* schedule panel (corner) */
#sched { position: fixed; top: 8px; right: 12px; width: 210px; background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; z-index: 6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
#sched:hover { border-color: var(--accent); }
#sched .sl { color: var(--muted); font-size: 11.5px; }
#sched .sl b { color: var(--text); }
#sched .sv { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
#sched .sv em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
#sched .bar { margin: 5px 0 3px; }

/* task popover */
#pop { position: fixed; z-index: 30; width: min(380px, calc(100vw - 16px)); max-height: 70vh; overflow: auto;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
#pop .ph { display: flex; gap: 8px; align-items: flex-start; }
#pop .ph b { flex: 1; font-size: 15px; }
#pop .x { background: none; color: var(--muted); padding: 0 4px; }
#pop .pcards { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
#pop .pcards button { font-size: 12px; padding: 2px 8px; }
#pop .brief { white-space: pre-wrap; font-size: 13px; color: #cfd2d8; margin-bottom: 10px; }
#pop .btn { display: inline-block; background: var(--accent); color: #fff; border-radius: 6px; padding: 5px 12px; font-size: 13px; }
#pop .plist { margin: 8px 0; }
#pop .plist .ce { font-size: 13px; padding: 3px 5px; }
#pop .ce.on { background: var(--accent); }
#pop .pgi { font-style: normal; color: var(--muted); width: 10px; }
#pop .lrow { display: flex; gap: 6px; margin-top: 6px; }
#pop .lrow input, #pop .ti input { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 13px; }
#pop .err { color: var(--today); margin-top: 4px; }
#pop .empty { color: var(--muted); font-size: 13px; }
#pop .ti { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 5px; cursor: grab; font-size: 13px; }
#pop .ti:hover { background: var(--line); }
#pop .ti span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pop .ti em { font-style: normal; color: var(--muted); font-size: 11px; }
#pop .ti button { background: none; color: var(--muted); padding: 0 4px; }
#pop .ti button:hover { color: var(--text); }

/* calendar */
#cal { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center;
  justify-content: center; padding: 16px; }
#cal[hidden], #pop[hidden] { display: none; }
.calbox { background: var(--card); border-radius: 12px; width: min(1100px, 100%); max-height: 100%; overflow: auto; padding: 14px 16px; }
.calhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.calhead h2 { margin: 0; font-size: 18px; min-width: 120px; text-align: center; }
.calhead #calclose { margin-left: auto; }
.dow, #days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dow span { text-align: center; color: var(--muted); font-size: 12px; }
.day { min-height: 92px; max-height: 150px; background: var(--card2); border-radius: 6px; padding: 4px 5px; overflow-y: auto; }
.day.out { opacity: 0.45; }
.day.today { outline: 2px solid var(--today); }
.day .dn { font-size: 12px; color: var(--muted); }
.ce { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding: 1px 3px; border-radius: 4px; cursor: pointer; }
.ce:hover { background: var(--line); }
.ce.dim { opacity: 0.3; }
.ce.ms { color: #aab0ff; font-weight: 600; cursor: default; }
.undated { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin-top: 4px; }

.msg { position: fixed; bottom: 10px; left: 14px; color: var(--muted); font-size: 12px; z-index: 6; }
body:has(.msg:not(:empty)) .hint { visibility: hidden; }

@media (max-width: 700px) {
  header { padding: 8px 10px; gap: 8px; }
  nav { margin-right: 0; width: 100%; }
  #sched { top: auto; bottom: 10px; right: 10px; width: 180px; }
  .day { min-height: 64px; }
  .ce { font-size: 10.5px; }
}

/* selection, marquee, option menu */
main, #sched, .hint, #drawer { user-select: none; -webkit-user-select: none; }
main.panning, main.panning * { cursor: grabbing !important; }
#marquee { position: absolute; border: 1px solid var(--accent); background: rgba(88, 101, 242, 0.12); pointer-events: none; z-index: 4; }
#marquee[hidden], #menu[hidden] { display: none; }
#menu { position: fixed; z-index: 40; min-width: 190px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; }
#menu button { background: none; text-align: left; padding: 6px 10px; border-radius: 5px; display: flex; gap: 18px; }
#menu button span { flex: 1; }
#menu kbd { font: inherit; font-size: 11.5px; color: var(--muted); }
#menu button:hover:not(:disabled) { background: var(--accent); }
#menu button:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
#menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font-size: 11.5px; z-index: 5; opacity: 0.8; pointer-events: none; }
@media (max-width: 1100px) { .hint { display: none; } }
@media (max-width: 700px) { #drawer { bottom: 200px; width: 200px; } #props { top: auto; bottom: 10px; } }
/* sign-in on the web (the dashboard opened outside Discord) */
.msg:has(.login) { left: 50%; top: 45%; bottom: auto; transform: translate(-50%, -50%); }
.msg .login { font-size: 15px; padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; }
/* goal blocks: purpose, inputs, outputs and done criteria of one job under a topic thread */
.goal { overflow: hidden auto; z-index: 1; background: var(--card2); border: 1px solid #5b4f8a; border-left: 3px solid #9775fa; border-radius: 6px;
  padding: 4px 7px 6px; font-size: 12.5px; cursor: default; }
.goal .tdh { display: flex; gap: 6px; align-items: center; font-weight: 600; padding-bottom: 3px; cursor: move; color: #c7b8ff; }
.goal .tdh span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.goal .gr { display: flex; gap: 6px; line-height: 1.35; margin-top: 2px; }
.goal .gr b { flex: none; width: 52px; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.goal .gr span { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.goal .tde { color: var(--muted); font-size: 11.5px; }
.goal .gf { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.goal .gs { flex: 1; min-width: 0; color: var(--muted); font-size: 11.5px; }
.goal .gs.o { color: var(--open); } .goal .gs.d { color: var(--done); }
.goal .gbtn { background: #6741d9; color: #fff; border: 0; border-radius: 5px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.goal .gf .gbtn:only-child { margin-left: auto; }
.goal .gbtn:disabled { opacity: 0.45; cursor: default; }
.blk.lt.goal .tdh span, .blk.lt.goal .gr span { color: #1e1f22; }
main.drawing .blk.goal { cursor: crosshair; }
.thr .kd { flex: none; font-style: normal; font-size: 10.5px; color: #c7b8ff; border: 1px solid #5b4f8a; border-radius: 4px; padding: 0 4px; }
.thr.topic { border-left: 3px solid #9775fa; }
.thr.wait { border-style: dashed; opacity: 0.8; }
#pop .gfl { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
#pop .gfl textarea { display: block; width: 100%; margin-top: 2px; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 13px; resize: vertical; }
#pop .gfl textarea[readonly] { opacity: 0.75; }
#pop #asktext { display: block; width: min(420px, 80vw); margin-top: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 5px; padding: 6px 8px; font: inherit; font-size: 13px; resize: vertical; }
#pop button.pri { background: #6741d9; }
#pop .kinds { margin: 4px 0 8px; }
/* files on the board (image, pdf) and message bookmarks */
.blk.img, .blk.pdf { background: var(--card2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; cursor: default; }
.blk.img img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.blk.pdf { display: flex; flex-direction: column; }
.blk.pdf img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: contain; object-position: top; background: #fff; pointer-events: none; }
.blk.pdf .ph { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.blk.pdf .cap { flex: none; display: flex; gap: 6px; align-items: center; padding: 3px 6px; font-size: 11.5px; border-top: 1px solid var(--line); }
.blk.pdf .cap b { color: #ff8787; font-size: 10.5px; }
.blk.pdf .cap span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk.pdf .cap em { color: var(--muted); font-style: normal; }
.blk.bmk { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid #5865f2; border-radius: 6px; padding: 4px 8px;
  font-size: 12.5px; overflow: hidden; cursor: pointer; }
.blk.bmk .bh { display: flex; gap: 6px; align-items: baseline; }
.blk.bmk .bh span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a5b4fc; }
.blk.bmk .bh b { font-weight: 600; font-size: 11.5px; }
.blk.bmk .bh em { color: var(--muted); font-style: normal; font-size: 11px; }
.blk.bmk p { margin: 3px 0 0; line-height: 1.35; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; overflow: hidden; }
.blk.bmk p.wait { color: var(--muted); font-style: italic; }
#viewer { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; }
#viewer[hidden] { display: none; }
#viewer .vh { flex: none; display: flex; gap: 12px; align-items: center; padding: 8px 14px; background: var(--card); }
#viewer .vh b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer .vh a { color: #a5b4fc; cursor: pointer; }
#viewer .vx { background: none; border: none; color: var(--text); font-size: 18px; cursor: pointer; }
#viewer .vb { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
#viewer .vb img { max-width: 100%; max-height: 100%; object-fit: contain; }
#viewer .vb canvas { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
#viewer .vwait { color: var(--muted); }

/* svg blocks: a drawing whose <g data-part> groups are parts; a part with a card or a logic link is lit */
.blk.svgb { background: var(--card2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.blk.svgb .sv { width: 100%; height: 100%; }
.blk.svgb .sv > svg { display: block; width: 100%; height: 100%; }
.blk.svgb .sv p.wait { margin: 0; padding: 8px; color: var(--muted); font-size: 12px; }
.blk.svgb [data-part] { cursor: pointer; transition: opacity 0.1s; }
.blk.svgb [data-part]:hover { filter: drop-shadow(0 0 2px var(--accent)); }
.blk.svgb [data-part].has { filter: drop-shadow(0 0 1.5px #4cc9f0); }
.blk.svgb [data-part].lok { filter: drop-shadow(0 0 2px #40c057); }
.blk.svgb [data-part].lno { opacity: 0.3; }
.blk.svgb [data-part].lhit { filter: drop-shadow(0 0 4px #40c057) drop-shadow(0 0 2px #40c057); }
.blk.poly { overflow: visible; }
.pvh { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); pointer-events: auto; cursor: move; }
#guides path.pdraft { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: none; }
#guides circle.pdv { fill: #fff; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#guides circle.pdv.first { fill: var(--accent); }

/* data blocks: a square node, the value in a bubble above it, the name under it; the border tells input from output */
.blk.dat { overflow: visible; cursor: default; }
.blk.dat .nd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px;
  background: var(--card2); border: 1.5px solid var(--line); line-height: 1; user-select: none; }
.blk.dat.in .nd { border-color: #4cc9f0; }
.blk.dat.out .nd { border-color: #e8a33d; }
.blk.dat .bub { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-width: 280px;
  padding: 3px 9px; border-radius: 8px; background: rgba(49, 51, 56, 0.72); border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(3px); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.blk.dat .bub::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: rgba(49, 51, 56, 0.72); }
.blk.dat .nm { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); max-width: 180px; font-size: 11px;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* sheet blocks: a preview of the top left of the current sheet, tabs when the workbook has several */
.blk.sht { background: var(--card2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.blk.sht.in { border-color: #4cc9f0; }
.blk.sht.out { border-color: #e8a33d; }
.blk.sht .cap { flex: none; display: flex; gap: 6px; align-items: center; padding: 3px 6px; font-size: 11.5px; border-bottom: 1px solid var(--line); }
.blk.sht .cap b { color: #69db7c; font-size: 10.5px; }
.blk.sht .cap span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk.sht .cap em { color: var(--muted); font-style: normal; }
.blk.sht .grid { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.blk.sht .wait { color: var(--muted); font-size: 12px; margin: 8px; }
.stabs { flex: none; display: flex; gap: 2px; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; }
.stabs button { flex: none; font-size: 11px; padding: 1px 8px; background: transparent; color: var(--muted); border-radius: 4px; }
.stabs button.on { background: var(--accent); color: #fff; }
.sgrid { flex: 1; min-height: 0; overflow: hidden; pointer-events: none; }
.sgrid table, #viewer .sscroll table { border-collapse: collapse; }
.sgrid th, .sgrid td { border: 1px solid var(--line); padding: 0 4px; height: 18px; font-size: 11px; max-width: 90px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sgrid th, #viewer .sscroll th { background: var(--card); color: var(--muted); font-weight: 400; }
.sgrid td { background: var(--bg); }
#viewer .vb.sheet { align-items: stretch; gap: 0; padding: 0; }
#viewer .sbar { flex: none; display: flex; gap: 10px; align-items: center; padding: 6px 14px; background: var(--card2); border-bottom: 1px solid var(--line); }
#viewer .sbar .stabs { padding: 0; }
#viewer .sbar .stabs button { font-size: 12.5px; padding: 2px 10px; }
#viewer .sbar select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 12.5px; }
#viewer .sscroll { flex: 1; overflow: auto; background: var(--bg); }
#viewer .sscroll th, #viewer .sscroll td { border: 1px solid var(--line); height: 24px; padding: 0 8px; font-size: 12.5px; white-space: nowrap;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
#viewer .sscroll thead th { position: sticky; top: 0; z-index: 2; }
#viewer .sscroll tbody th { position: sticky; left: 0; z-index: 1; text-align: right; }

/* the data block pop and the calendar's picked days */
#pop select, #pop .dv textarea { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px;
  font: inherit; font-size: 13px; }
#pop .dv { align-items: center; }
#pop .dv textarea { flex: 1; resize: vertical; }
#pop .dv input[type="date"], #pop .dv input[type="time"] { color-scheme: dark; }
#pop .dv input.unit { flex: none; width: 72px; }
#days { user-select: none; }
.day.pick { background: rgba(88, 101, 242, 0.28); outline: 1px solid var(--accent); }

/* accessibility: screen-reader text, keyboard focus, text size, high contrast, reduced motion */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid #ffd43b; outline-offset: 2px; }
#view:focus { outline: none; }
#view:focus-visible { outline: 2px solid #ffd43b; outline-offset: -3px; }
#view:focus-visible .sb:not(.scope) { box-shadow: 0 0 0 2px #ffd43b; }
#menu button:focus-visible { outline: none; background: var(--accent); }
#pop:focus, #cal:focus, #viewer:focus { outline: none; }
#pop table.keys { border-collapse: collapse; margin-top: 6px; font-size: 13px; }
#pop table.keys th { text-align: left; padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; font-weight: 400; }
#pop table.keys td { padding: 3px 0; color: #cfd2d8; }
#pop table.keys kbd { font: inherit; font-size: 12px; background: var(--line); border-radius: 4px; padding: 1px 6px; }

html[data-fs="1"] :is(#bar, #tools, #props, #drawer, #sched, #pop, #menu, .hint, .msg, .calbox, #viewer .vh, #viewer .sbar) { zoom: 1.2; }
html[data-fs="2"] :is(#bar, #tools, #props, #drawer, #sched, #pop, #menu, .hint, .msg, .calbox, #viewer .vh, #viewer .sbar) { zoom: 1.45; }
/* larger text: the header wraps before the schedule card (both scale alike), the hint wraps inside the window */
html:is([data-fs="1"],[data-fs="2"]) #bar { padding-right: 236px; }
html:is([data-fs="1"],[data-fs="2"]) .hint { white-space: normal; text-align: center; width: max-content; }
html[data-fs="1"] .hint { max-width: calc((100vw - 140px) / 1.2); }
html[data-fs="2"] .hint { max-width: calc((100vw - 140px) / 1.45); }

html[data-contrast="high"] { --bg: #000; --card: #111214; --card2: #1a1b1e; --line: #8a8f98; --text: #fff; --muted: #d6d8dc;
  --wait: #c4c8cf; --edge: #c4c8cf; --link: #b9c4ff; --accent: #4c5ce6; }
html[data-contrast="high"] main { background-image: radial-gradient(#3a3c42 1px, transparent 1px); }
html[data-contrast="high"] .blk.dim { opacity: 0.6; }
html[data-contrast="high"] .hint { opacity: 1; }
html[data-contrast="high"] button { border: 1px solid #8a8f98; }
html[data-contrast="high"] #tools button, html[data-contrast="high"] #menu button, html[data-contrast="high"] #pop .x { border-color: transparent; }
html[data-contrast="high"] #tools button:disabled, html[data-contrast="high"] #menu button:disabled { opacity: 0.6; }
html[data-contrast="high"] #arrows .ar { stroke-width: 2.4; }
html[data-contrast="high"] #arrows .lg .ar { stroke-width: 3; }
html[data-contrast="high"] #arrows text { fill: #fff; }
html[data-contrast="high"] #pop .brief, html[data-contrast="high"] #pop table.keys td { color: #fff; }
html[data-contrast="high"] .sb { border-width: 2.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}