:root{
  --paper:#F2F4F6; --surface:#fff; --sunk:#E9EDF1;
  --ink:#171E26; --muted:#5A6673; --faint:#8794A1;
  --rule:#D2D9E0; --hair:#E1E6EB;
  --blue:#2C5FB2; --red:#C2352C; --green:#2C7A5B;
  --dot:#D8DEE4;
  --ref-bg:#E4ECF9;
  --card-shadow:0 1px 1px rgba(23,30,38,.05), 0 6px 16px -12px rgba(23,30,38,.4);
  /* the undo toast is a fixed dark pill in either theme -- not redefined below */
  --toast-bg:#1B222B; --toast-fg:#F2F4F6; --toast-accent:#8FB4EF;
  --sans:-apple-system,"Segoe UI","Microsoft JhengHei","Noto Sans TC",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12161B; --surface:#1C222A; --sunk:#10151A;
    --ink:#E2E8EE; --muted:#93A0AD; --faint:#6F7C89;
    --rule:#29313A; --hair:#232B33;
    --blue:#7BA5E8; --red:#E8817A; --green:#63BE96;
    --dot:#242C35;
    --ref-bg:#1E2B42;
    --card-shadow:0 1px 1px rgba(0,0,0,.4), 0 6px 16px -12px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  overflow:hidden;overscroll-behavior:none;
  display:flex;flex-direction:column;
}

/* ------------------------------------------------------------------ bar */
#bar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  white-space:nowrap;overflow:hidden;

  padding:8px 14px;border-bottom:1px solid var(--rule);
  background:var(--surface);position:relative;z-index:5;
  user-select:none;
}
#bar > *{flex:0 0 auto}
#title{
  font-size:16px;font-weight:600;margin:0;letter-spacing:.02em;
  min-width:11ch;text-align:center;
}
#title.is-today{color:var(--blue)}
.spacer{flex:1 1 auto !important}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);
      font-variant-numeric:tabular-nums}
#status{flex:0 1 auto;font-size:12.5px;color:var(--faint);margin-left:6px;min-height:1em;
        overflow:hidden;text-overflow:ellipsis;max-width:22ch}
#status.warn{color:var(--red);font-weight:500}

button{font-family:inherit;color:var(--muted);background:transparent;
       border:1px solid transparent;border-radius:4px;cursor:pointer}
button:hover{background:var(--sunk);color:var(--ink)}
button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.icon{font-size:20px;line-height:1;width:28px;height:28px;padding:0}
.txt{font-size:12.5px;padding:4px 9px}
.primary{background:var(--blue);color:#fff;border:0;border-radius:4px;
         font-size:15px;font-weight:600;padding:12px 22px}
.primary:hover{background:var(--blue);filter:brightness(1.08);color:#fff}

/* -------------------------------------------------------------- canvas */
#viewport{
  flex:1;position:relative;overflow:hidden;touch-action:none;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
  cursor:default;
}
#world{position:absolute;inset:0 auto auto 0;transform-origin:0 0;width:0;height:0}

#empty{
  position:absolute;inset:0;margin:0;display:grid;place-content:center;
  color:var(--faint);font-size:14px;pointer-events:none;
}
#empty[hidden]{display:none}

/* --------------------------------------------------------------- cards */
.card{
  position:absolute;
  width:max-content;min-width:88px;max-width:340px;
  background:var(--surface);border:1px solid var(--hair);border-radius:5px;
  box-shadow:var(--card-shadow);
  padding:8px 12px 8px 11px;
  display:flex;gap:9px;align-items:stretch;
  cursor:default;
}
.card.editing{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), var(--card-shadow)}
.card.dragging{opacity:.9;box-shadow:0 8px 28px -10px rgba(23,30,38,.5);cursor:grabbing}
.card.unplaced{border-style:dashed}

.bar{flex:0 0 3px;border-radius:2px;background:transparent}
.card[data-color="red"]   .bar{background:var(--red)}
.card[data-color="blue"]  .bar{background:var(--blue)}
.card[data-color="green"] .bar{background:var(--green)}

.lines{min-width:0;flex:1}
.line{
  padding-left:calc(var(--d,0) * 15px);
  white-space:pre-wrap;overflow-wrap:anywhere;
  border-radius:3px;
  /* otherwise a double-click meant to open the card menu also flashes a
     native word-selection highlight, since that happens on mousedown --
     earlier than any preventDefault() we could reach on click/dblclick */
  user-select:none;-webkit-user-select:none;
  cursor:text;
}
.line.root{font-weight:500}
.line:not(.root){font-size:14px;color:var(--muted);position:relative}
.line:not(.root)::before{
  content:"·";position:absolute;left:calc(var(--d,0) * 15px - 9px);color:var(--faint);
}
.line.empty::after{content:"…";color:var(--faint)}
.line.editing{outline:none;background:var(--sunk);user-select:text;-webkit-user-select:text}
.line.editing.empty::after{content:none}

/* [[Page]] / #tag — decoration only, see paintLine() in app.js. Editing a
   line always falls back to its plain source text, so this never shows up
   mid-edit; no cursor:pointer either, since nothing happens on click. */
.ref{color:var(--blue);background:var(--ref-bg);border-radius:3px;
     padding:0 2px;margin:0 -2px;}

/* ---------------------------------------------------------------- menu */
.menu{
  position:fixed;z-index:15;width:184px;
  background:var(--surface);border:1px solid var(--hair);border-radius:7px;
  box-shadow:0 4px 12px -4px rgba(23,30,38,.18), 0 14px 32px -12px rgba(23,30,38,.32);
  padding:5px;display:flex;flex-direction:column;gap:1px;
}
.menu[hidden]{display:none}
.menu button{
  all:unset;box-sizing:border-box;width:100%;padding:8px 10px;border-radius:4px;
  font-size:13.5px;color:var(--ink);cursor:pointer;
}
.menu button:hover,.menu button:focus-visible{background:var(--sunk)}
.menu button.danger{color:var(--red)}
/* ".menu button" (0,1,1) outranks the UA "[hidden]" rule (0,1,0), and its
   all:unset resets display to inline -- a hidden menu button would still show.
   Restore hiding explicitly. */
.menu button[hidden]{display:none}
.menu-sep{height:1px;background:var(--hair);margin:5px 2px}
.menu-info{padding:6px 10px 4px;font-size:11.5px;line-height:1.5;color:var(--faint);
           font-family:var(--mono);white-space:pre-line;word-break:break-all}
.menu-row{display:flex;gap:6px;padding:4px 6px}
/* ".menu .swatch", not just ".swatch": the swatches are <button> elements
   inside .menu, so the plain ".menu button" rule above (a class+type
   selector, specificity 0,1,1) would otherwise outrank a bare ".swatch"
   class selector (0,1,0) and win every shared property -- width, height,
   border-radius, background included -- leaving flattened, colorless boxes. */
.menu .swatch{
  all:unset;box-sizing:border-box;width:22px;height:22px;border-radius:999px;
  background:var(--sw,var(--sunk));cursor:pointer;
  border:2px solid transparent;
}
.menu .swatch:hover,.menu .swatch:focus-visible{border-color:var(--rule)}
.menu .swatch.active{border-color:var(--ink)}
.menu .swatch.clear{
  background:var(--sunk);color:var(--faint);font-size:11px;
  display:grid;place-content:center;
}

/* ------------------------------------------------------------- suggest */
.suggest{
  position:fixed;z-index:16;min-width:160px;max-width:260px;
  background:var(--surface);border:1px solid var(--hair);border-radius:7px;
  box-shadow:0 4px 12px -4px rgba(23,30,38,.18), 0 14px 32px -12px rgba(23,30,38,.32);
  padding:4px;max-height:220px;overflow-y:auto;
}
.suggest[hidden]{display:none}
.s-item{
  padding:7px 10px;border-radius:4px;font-size:13.5px;color:var(--ink);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-item.active{background:var(--sunk)}
.s-item .s-hint{color:var(--faint);font-size:11.5px;margin-left:6px}
.s-empty{padding:7px 10px;font-size:13px;color:var(--faint)}

/* positioned at the caret in JS right before .showPicker() is called --
   needs to stay on-screen (just invisible) or some browsers anchor the
   native popup wherever an off-screen input last was */
.date-pick{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- undo */
.undo{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:14px;
  background:var(--toast-bg);color:var(--toast-fg);
  border-radius:999px;padding:9px 10px 9px 18px;
  font-size:13.5px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4);
}
.undo[hidden]{display:none}
.undo button{
  all:unset;box-sizing:border-box;color:var(--toast-accent);font-weight:600;
  padding:6px 12px;border-radius:999px;cursor:pointer;
}
.undo button:hover,.undo button:focus-visible{background:rgba(255,255,255,.12)}

/* ---------------------------------------------------------------- gate */
#gate{
  position:fixed;inset:0;z-index:20;display:grid;place-content:center;
  background:var(--paper);padding:24px;
}
.gate-box{max-width:44ch;text-align:center}
.gate-box h2{font-size:24px;margin:0 0 10px}
.gate-box p{color:var(--muted);margin:0 0 22px}
.fine{font-size:12.5px;color:var(--faint);margin:18px 0 0 !important}
code{font-family:var(--mono);font-size:.9em;background:var(--sunk);
     padding:1px 5px;border-radius:2px}

body:not(.ready) #bar,body:not(.ready) #viewport{visibility:hidden}
body.ready #gate{display:none}
#gate[hidden]{display:none}
#graph{max-width:18ch;overflow:hidden;text-overflow:ellipsis}

/* narrow windows: drop the informational bits before anything overlaps */
@media (max-width:760px){ #graph{display:none} }
@media (max-width:620px){ #status{display:none} }
@media (max-width:520px){ #reload{display:none} }