/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --paper:#FBFBFA;      /* canvas ground */
  --paper-dot:#D2D5DC;  /* grid dots */
  --surface:#FFFFFF;    /* floating panels */
  --surface-2:#F4F5F7;  /* inset wells */
  --surface-3:#EAECF0;  /* hover */
  --ink:#16181D;
  --ink-2:#5B6270;
  --ink-3:#8B92A0;
  --line:#E1E4EA;
  --line-2:#CDD2DB;
  /* The brand (deploy/brand/README.md). --brand* are the identity's own colours,
     named so the chrome can say what it means; --accent and its three companions
     are what the 70-odd call sites below already read, so they carry the violet
     and nothing else had to change. Every value is a literal because cssv()
     (30-core) hands these straight to SVG attributes. --brand-alt is the
     gradient's far end and never small text on white. */
  --brand:#6B46FF;
  --brand-strong:#4C2ED9;
  --brand-alt:#00B3FF;
  --accent:#6B46FF;
  --accent-ink:#FFFFFF;
  --accent-hover:#4C2ED9;
  --accent-soft:#EFEBFF;
  --accent-line:#C3B2FF;
  --danger:#D0342C;
  --shadow-sm:0 1px 2px rgba(16,20,32,.06), 0 2px 6px rgba(16,20,32,.05);
  --shadow-md:0 2px 4px rgba(16,20,32,.05), 0 8px 24px rgba(16,20,32,.10);
  --shadow-lg:0 4px 8px rgba(16,20,32,.06), 0 20px 48px rgba(16,20,32,.16);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14161A; --paper-dot:#31353E; --surface:#1C1F25; --surface-2:#23272E;
    --surface-3:#2C313A; --ink:#E9EBEF; --ink-2:#98A0AE; --ink-3:#6E7583;
    --line:#2C313A; --line-2:#3A404B; --brand:#A78BFF; --brand-strong:#8B6BFF;
    --brand-alt:#4FC8FF; --accent:#A78BFF; --accent-ink:#0E1220;
    --accent-hover:#8B6BFF; --accent-soft:#272046; --accent-line:#5B47B8; --danger:#F4796F;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#14161A; --paper-dot:#31353E; --surface:#1C1F25; --surface-2:#23272E;
  --surface-3:#2C313A; --ink:#E9EBEF; --ink-2:#98A0AE; --ink-3:#6E7583;
  --line:#2C313A; --line-2:#3A404B; --brand:#A78BFF; --brand-strong:#8B6BFF;
  --brand-alt:#4FC8FF; --accent:#A78BFF; --accent-ink:#0E1220;
  --accent-hover:#8B6BFF; --accent-soft:#272046; --accent-line:#5B47B8; --danger:#F4796F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 4px 8px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior:none;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* marching ants — the dash cycle and speed ride in as inline custom properties,
   so one keyframe serves every pattern, stroke width and shape perimeter. */
@keyframes wd-ants{to{stroke-dashoffset:var(--wd-c,-20px)}}
.wd-ants{animation-name:wd-ants; animation-timing-function:linear; animation-iteration-count:infinite}
@media (prefers-reduced-motion: reduce){.wd-ants{animation:none !important}}

/* ── app frame ──────────────────────────────────────────────────────── */
#app{position:fixed; inset:0; overflow:hidden; --mm-w:0px; --rail-r:104px}   /* --rail-r: the rail's right edge, which the panels beside it start from */
#app.rail1{--rail-r:64px}
/* An <svg> is a replaced element: width:auto falls back to its intrinsic
   300x150 rather than resolving from left/right, so the size is explicit. */
#stage{
  position:absolute; top:0; left:0; height:100%;
  width:calc(100% - var(--mm-w)); display:block; touch-action:none;
  /* A shape's words are part of the shape: a drag across the board never selects
     them as page text. Editing happens in #editor, a textarea outside the stage. */
  user-select:none; -webkit-user-select:none;
}
#stage.t-hand{cursor:grab} #stage.t-hand.panning{cursor:grabbing}
#stage.t-draw,#stage.t-rect,#stage.t-round,#stage.t-ellipse,#stage.t-diamond,
#stage.t-sticky,#stage.t-text,#stage.t-link,#stage.t-lasso{cursor:crosshair}
/* the laser's pointer is its red dot (52f) */
#stage.t-laser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23F2463A' fill-opacity='.25'/%3E%3Ccircle cx='10' cy='10' r='4.5' fill='%23F2463A'/%3E%3C/svg%3E") 10 10, crosshair}
#laserLayer{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:19; overflow:visible}
#stage.over-node{cursor:move} #stage.over-nub{cursor:crosshair} #stage.over-label{cursor:move}
#stage.linking{cursor:crosshair}

/* ── floating chrome ────────────────────────────────────────────────── */
.hud{position:absolute; z-index:20; display:flex; align-items:center; gap:6px}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-md);
}
.tl{top:14px; left:14px} .tr{top:14px; right:calc(var(--mm-w) + 14px)}
.bl{bottom:14px; left:14px} .bc{bottom:14px; left:50%; transform:translateX(-50%)}

/* wordmark */
.brand{display:flex; align-items:center; gap:9px; padding-block:7px; padding-inline:10px 12px}
.brand .mark{width:22px;height:22px;flex:none}
.brand .wm{
  font-weight:700; font-size:14.5px; letter-spacing:-.03em; line-height:1;
  color:var(--ink);
}
.brand .wm em{font-style:normal;color:var(--accent)}
.divider{width:1px; height:20px; background:var(--line); flex:none}
#docTitle{
  border:0; background:transparent; padding:5px 8px; min-width:60px; max-width:230px;
  border-radius:var(--r-sm); font-size:13px; font-weight:500; letter-spacing:-.01em;
}
#docTitle:hover{background:var(--surface-2)}
#docTitle:focus{background:var(--surface-2); outline:2px solid var(--accent); outline-offset:-2px}
.savechip{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); padding-right:11px; white-space:nowrap; min-width:52px;
}
.savechip[data-state="saving"]{color:var(--accent)}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 11px; border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--ink); font-size:12.5px; font-weight:500;
  cursor:pointer; white-space:nowrap; transition:background .12s, color .12s;
}
.btn:hover{background:var(--surface-2)}
.btn:active{background:var(--surface-3)}
.btn.icon{width:32px; padding:0}
.btn[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.38; cursor:default; background:transparent}
.btn svg{width:16px;height:16px;flex:none}
.grp{display:flex; align-items:center; padding:4px; gap:2px}

/* ── tool rail ──────────────────────────────────────────────────────── */
/* Two columns, as in Adobe's apps; the chevron on top folds it to one (60-ui
   railCols), and a phone always has one. Every group holds an even number of
   tools, so the pairs never leave a hole. */
#rail{
  position:absolute; z-index:20; left:14px; top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(2, 38px); gap:2px; padding:5px;
  max-height:calc(100% - 136px); overflow-y:auto; scrollbar-width:none;   /* one column is ~790px: it stays between the bars */
}
#rail::-webkit-scrollbar{display:none}
#app.rail1 #rail{grid-template-columns:38px}
.rail-cols{grid-column:1 / -1; height:16px; margin:-2px 0 1px; border:0; border-radius:5px; padding:0 4px;
  background:transparent; color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:flex-end}
.rail-cols:hover{background:var(--surface-2); color:var(--ink)}
.rail-cols svg{width:14px; height:14px}
#app.rail1 .rail-cols{justify-content:center}
#app.rail1 .rail-cols svg{transform:scaleX(-1)}
.tool{
  position:relative; width:38px; height:38px; display:flex; align-items:center;
  justify-content:center; border:0; border-radius:8px; background:transparent;
  color:var(--ink-2); cursor:pointer; transition:background .12s, color .12s;
}
.tool:hover{background:var(--surface-2); color:var(--ink)}
.tool[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.tool svg{width:19px;height:19px}
.tool .kbd{
  position:absolute; right:3px; bottom:2px; font-family:var(--mono); font-size:8.5px;
  line-height:1; opacity:.5; pointer-events:none;
}
.rail-sep{grid-column:1 / -1; height:1px; background:var(--line); margin:4px 6px}

/* tooltip */
.tip{
  position:absolute; z-index:60; pointer-events:none; opacity:0;
  background:var(--ink); color:var(--paper); padding:5px 8px; border-radius:6px;
  font-size:11.5px; font-weight:500; white-space:nowrap; box-shadow:var(--shadow-md);
  transition:opacity .1s; display:flex; align-items:center; gap:7px;
}
.tip.show{opacity:1}
.tip b{font-family:var(--mono); font-weight:500; opacity:.6; font-size:10.5px}
:root[data-theme="dark"] .tip{background:var(--surface-3); color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tip{background:var(--surface-3); color:var(--ink)}}

/* ── inspector ──────────────────────────────────────────────────────── */
#inspector{
  position:absolute; z-index:22; right:calc(var(--mm-w) + 14px); top:60px; width:236px;
  max-height:calc(100% - 130px); overflow-y:auto; overflow-x:hidden;
  padding:4px 0 8px; display:none;
}
#inspector.on{display:block}
.insp-note{margin:0; font-size:12px; line-height:1.45; color:var(--ink-3)}
#inspector::-webkit-scrollbar{width:8px}
#inspector::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px; border:2px solid var(--surface)}
.insp-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:9px 12px 7px;
}
.insp-head h2{margin:0; font-size:12.5px; font-weight:600; letter-spacing:-.01em}
.insp-head span{font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.03em}
.sec{padding:9px 12px; border-top:1px solid var(--line)}
.sec > label,.sec-t{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
.swatches{display:grid; grid-template-columns:repeat(8,1fr); gap:5px}
.sw{
  aspect-ratio:1; border-radius:5px; border:1px solid var(--line-2); cursor:pointer;
  padding:0; position:relative; transition:transform .1s;
}
.sw:hover{transform:scale(1.14)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent)}
.row{display:flex; gap:4px; align-items:center}
/* wrap: the notation's segments are words, not icons — "Task · Sub-process ·
   Call · Transaction · Event sub" is 247px of label in a 202px panel, and a
   clipped option is an option nobody can pick. Nothing that fits ever wraps. */
.seg{display:flex; flex-wrap:wrap; background:var(--surface-2); border-radius:var(--r-sm); padding:2px; gap:2px; flex:1}
.seg button{
  flex:1; height:26px; border:0; background:transparent; border-radius:4px; cursor:pointer;
  color:var(--ink-2); display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:500; transition:background .1s;
}
.seg button svg{width:15px;height:15px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.stepper{
  display:flex; align-items:center; background:var(--surface-2); border-radius:var(--r-sm);
  height:30px; padding:0 2px;
}
.stepper button{width:24px;height:26px;border:0;background:transparent;cursor:pointer;color:var(--ink-2);border-radius:4px;font-size:15px;line-height:1}
.stepper button:hover{background:var(--surface-3); color:var(--ink)}
.stepper output{
  flex:1; text-align:center; font-family:var(--mono); font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.mini{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.mini button{
  height:28px; border:1px solid var(--line); background:var(--surface); border-radius:5px;
  cursor:pointer; color:var(--ink-2); display:flex; align-items:center; justify-content:center;
}
.mini button:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.mini button svg{width:15px;height:15px}
/* the notation grids: thirteen triggers, eight task types, seven gateways */
.mini.i5{grid-template-columns:repeat(5,1fr)}
.mini button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.mini button:disabled,.seg button:disabled{opacity:.34; cursor:default; background:transparent}
/* None and Terminate have no icon of their own — the disc and the empty ring
   are the manifest's — so those cells read as their name instead of blank. */
.mini button:empty::after{content:attr(title); font-size:9.5px; letter-spacing:-.02em; overflow:hidden}
.mini button:empty:disabled::after{content:"—"}
.kv{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:11.5px; color:var(--ink-2)}
.kv b{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.kv span{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); text-align:right}
.dangerbtn{
  width:100%; height:30px; border:1px solid var(--line); background:transparent;
  border-radius:var(--r-sm); color:var(--danger); cursor:pointer; font-size:12px; font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.dangerbtn:hover{background:color-mix(in srgb, var(--danger) 9%, transparent); border-color:color-mix(in srgb, var(--danger) 35%, transparent)}
.dangerbtn svg{width:14px;height:14px}
.togglebtn{
  width:100%; height:30px; border:1px solid var(--line); background:transparent;
  border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer; font-size:12px;
  font-weight:500; display:flex; align-items:center; justify-content:center; gap:6px;
}
.togglebtn:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
.togglebtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.togglebtn:disabled{opacity:.38; cursor:default}
.togglebtn svg{width:14px;height:14px}

/* live session */
#bLive .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
#bLive[data-state="on"]{background:var(--accent-soft);color:var(--accent)}
#bLive[data-state="on"] .dot{background:#22B364;box-shadow:0 0 0 3px color-mix(in srgb,#22B364 25%,transparent)}
#bLive[data-state="connecting"] .dot{background:var(--accent);animation:wd-pulse 1s ease-in-out infinite}
/* the line dropped and the socket is finding its way back: still the session's colours, the dot amber and pulsing */
#bLive[data-state="reconnecting"]{background:var(--accent-soft);color:var(--accent)}
#bLive[data-state="reconnecting"] .dot{background:#B7822A;animation:wd-pulse 1s ease-in-out infinite}
@keyframes wd-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){#bLive[data-state="connecting"] .dot,#bLive[data-state="reconnecting"] .dot{animation:none}}
.faces{display:flex;align-items:center;margin-left:2px}
.face{
  width:20px;height:20px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--mono);font-size:9px;font-weight:600;text-transform:uppercase;
}
.face:first-child{margin-left:0}

/* ── zoom cluster ───────────────────────────────────────────────────── */
#zoomval{
  font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
  min-width:46px; text-align:center; cursor:pointer; border:0; background:transparent;
  height:32px; border-radius:var(--r-sm);
}
#zoomval:hover{background:var(--surface-2)}

/* screen-reader only */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
#stage:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}

/* board switcher — the app's one menu: the boards, then New and Duplicate,
   then the headings 74-menu.js renders under them. Its rows wear the context
   menu's rules below with every other menu in the app; what is here is what
   only a board row has. It scrolls, because the list grows with the boards. */
#bInfo{width:24px; margin-left:-4px; color:var(--ink-3)}
#bInfo:hover,#bInfo[aria-expanded="true"]{color:var(--ink)}
#boards{
  position:absolute; z-index:66; left:14px; top:56px; min-width:248px; max-width:320px;
  padding:5px; display:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 76px); overflow-y:auto;   /* the window, not 72% of it: eleven headings under the boards since Board and Edit split (74-menu) */
}
#boards.on{display:block}

/* account chip (top-right) and its menu */
#acctPanel .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
#acctPanel[data-signed="in"] .dot{background:#22B364;box-shadow:0 0 0 3px color-mix(in srgb,#22B364 25%,transparent)}
#acctMenu{position:fixed; z-index:40; display:none; min-width:236px; max-width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px; font-size:13px;
  max-height:calc(100vh - 72px); overflow-y:auto; overscroll-behavior:contain}
#acctMenu .acct-chev{margin-left:auto; color:var(--ink-3); font-size:16px; line-height:1; flex:none}
#acctMenu .acct-back .acct-chev{margin-left:0}
#acctMenu .acct-view-h{font-weight:600; color:var(--ink-2); padding-top:2px; border-bottom:1px solid var(--line); margin-bottom:4px}
#acctMenu .acct-fly{position:fixed; z-index:41; min-width:236px; max-width:300px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px;
  max-height:calc(100vh - 16px); overflow-y:auto; overscroll-behavior:contain}
#acctMenu .acct-fly[hidden]{display:none}
#acctMenu img.av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
/* the Settings page (71y) */
.set-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;object-fit:cover;flex:none}
img.hm-av{object-fit:cover}
.set-pane .hm-set h2{margin-bottom:8px}
.set-err{font-size:12px;color:var(--danger,#c0392b);margin:6px 2px 0}
.set-err[hidden]{display:none}
.set-lead{margin:0 0 14px;max-width:640px}
.set-toggle{display:flex;align-items:flex-start;gap:10px;padding:8px 0;cursor:pointer}
.set-toggle input{margin-top:3px}
.set-toggle span{display:flex;flex-direction:column;gap:2px}
.set-toggle b{font-weight:500;color:var(--ink)}
.set-toggle small{color:var(--ink-3);font-size:12px}
.set-check{display:flex;align-items:center;gap:8px}
.set-checks{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.set-checks label{display:flex;align-items:center;gap:8px;padding:4px 0}
.set-pane .hm-row input:not([type=checkbox]):not([type=radio]):not([type=file]),.set-pane .hm-row select,
.set-pane .hm-col input[type=password]{max-width:380px}
.set-theme{max-width:420px}
.set-theme button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.set-pane .mcpc-new{max-width:560px}
.set-nav .hm-nav-i svg{flex:none}
#acctMenu div.acct-item{display:flex; align-items:center; gap:9px; padding:8px 9px}
#acctMenu button.acct-sub-open[aria-expanded="true"]{background:var(--surface-2)}
#acctMenu.on{display:block}
#acctMenu .acct-note{padding:5px 9px 7px; font-size:11px; color:var(--ink-3)}
#acctMenu .acct-head{padding:4px 8px 9px; border-bottom:1px solid var(--line); margin-bottom:5px}
#acctMenu .acct-id{display:flex; align-items:center; gap:9px}
#acctMenu .acct-name{font-weight:600; font-size:13px; color:var(--ink)}
#acctMenu .acct-sub{font-size:11px; color:var(--ink-3); margin-top:1px}
#acctMenu .acct-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
#acctMenu .acct-tag{font-size:10px; font-family:var(--mono); padding:2px 7px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
#acctMenu .acct-tag.ok{color:#159a55; background:color-mix(in srgb,#22B364 13%,transparent);
  border-color:color-mix(in srgb,#22B364 42%,transparent)}
#acctMenu button.acct-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 9px; border:none; background:none; color:var(--ink); border-radius:8px; cursor:pointer; font:inherit}
#acctMenu button.acct-item:hover{background:var(--surface-2)}
#acctMenu .who{display:flex; flex-direction:column; min-width:0}
#acctMenu .who small{color:var(--ink-3); font-size:11px; font-weight:400}
#acctMenu .acct-access{display:flex; align-items:baseline; gap:8px; padding:8px 9px; margin:2px 0 4px;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--line)}
#acctMenu .acct-access .lvl{font-family:var(--mono); font-weight:600; font-size:12px; text-transform:capitalize;
  padding:1px 7px; border-radius:5px; background:var(--surface); border:1px solid var(--line); color:var(--ink)}
#acctMenu .acct-access[data-lvl="edit"] .lvl{color:#159a55; border-color:color-mix(in srgb,#22B364 45%,transparent)}
#acctMenu .acct-access[data-lvl="none"] .lvl{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
#acctMenu .acct-access-why{font-size:11px; color:var(--ink-3)}
#acctMenu .acct-sep{height:1px; background:var(--line); margin:5px 4px}
#acctMenu .av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:#fff;font-family:var(--mono)}

/* the view-only / comment-only pill, top left */
.permpill{font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; margin:0 6px 0 4px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap}
.permpill[data-mode="comment"]{color:#b7791f; border-color:color-mix(in srgb,#E0A106 45%,transparent);
  background:color-mix(in srgb,#E0A106 12%,transparent)}

/* the share dialog (uses the app's .scrim/.modal) */
.share-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.share-head h2{margin:0; font-size:16px; font-weight:700}
.share-row{display:flex; align-items:center; gap:11px; padding:9px 2px; border-top:1px solid var(--line)}
.share-row:first-of-type{border-top:none}
.share-row .av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:#fff;font-family:var(--mono)}
.share-who{flex:1; min-width:0}
.share-name{font-size:13px; font-weight:500; color:var(--ink)}
.share-name .you{font-size:10px; font-weight:600; color:var(--ink-3); background:var(--surface-2);
  padding:1px 6px; border-radius:10px; margin-left:5px}
.share-why{display:flex; align-items:center; gap:7px; margin-top:2px}
.share-why small{font-size:11px; color:var(--ink-3)}
.lvlchip{font-family:var(--mono); font-size:10.5px; font-weight:600; text-transform:capitalize;
  padding:1px 7px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.lvlchip[data-lvl="edit"]{color:#159a55; border-color:color-mix(in srgb,#22B364 45%,transparent); background:color-mix(in srgb,#22B364 12%,transparent)}
.lvlchip[data-lvl="comment"]{color:#b7791f; border-color:color-mix(in srgb,#E0A106 45%,transparent); background:color-mix(in srgb,#E0A106 12%,transparent)}
.lvlchip[data-lvl="none"]{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.share-owner{font-size:11.5px; font-weight:600; color:var(--ink-2); padding:5px 10px}
select.share-lvl{font:inherit; font-size:12.5px; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
select.share-lvl:disabled{opacity:.55; cursor:default}
.share-note{font-size:11px; color:var(--ink-3); margin-top:10px; line-height:1.5}
.share-section{display:flex; align-items:center; gap:10px; padding:8px 10px; margin:0 0 8px;
  border-radius:8px; background:var(--surface-2); border:1px solid var(--line)}
.hm-col{display:flex; flex-direction:column; gap:8px; max-width:560px}
.hm-col input[type=url]{height:34px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:0 10px; font:inherit; background:var(--surface); color:var(--ink); min-width:0}
.hm-checks{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px}
.hm-checks legend{padding:0; margin-bottom:4px}
.hm-checks label{display:flex; align-items:center; gap:6px; font-size:13px}
.hm-bad{color:var(--danger)}
.share-anyone{flex-wrap:wrap; row-gap:6px}
.share-anyone .share-section-k{flex:1 0 100%}
.share-anyone-on{font-size:12px; color:var(--ink)}
.share-anyone-note{font-size:11px; color:var(--ink-3); flex:1 0 100%}
.share-anyone-acts{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.share-anyone-form{display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%}
.share-anyone-form select,.share-anyone-form input{height:30px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); padding:0 8px; font:inherit; font-size:12px; min-width:0}
.share-anyone-form input{flex:1 1 140px}
/* a board opened by an "anyone with the link" link (71v) */
.linkbar{position:fixed; z-index:60; left:0; right:0; top:62px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; justify-content:center; max-width:calc(100% - 32px); padding:7px 8px 7px 14px; background:var(--surface);
  border:1px solid var(--accent-line); border-radius:var(--r-md); box-shadow:var(--shadow-md); font-size:12.5px; color:var(--ink)}
.linkbar b{font-weight:600}
.linkbar .btn{height:28px}
.linkpw{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(16,20,32,.32)}
.linkpw form{width:min(360px,100%); background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:18px; display:flex; flex-direction:column; gap:10px}
.linkpw h2{margin:0; font-size:15px}
.linkpw p{margin:0; font-size:12.5px; color:var(--ink-2)}
.linkpw input{height:34px; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:0 10px; font:inherit;
  background:var(--surface); color:var(--ink)}
.linkpw .linkpw-err{color:var(--danger)}
.linkpw .linkpw-acts{display:flex; gap:8px; justify-content:flex-end}
.share-section-k{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3)}
select.share-sec-pick{flex:1; font:inherit; font-size:12.5px; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
select.share-sec-pick:disabled{opacity:.55; cursor:default}

/* the members page (71j) — the share dialog's rows, plus role/seat selects, the
   tags, a remove button, and the invite row */
.mem-row .share-name{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.mem-tag{font-size:10px; font-family:var(--mono); font-weight:400; padding:1px 7px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.share-why small.mem-why{color:#b7791f}
.mem-ctl{display:flex; align-items:center; gap:6px; flex:none}
.mem-ctl select.share-lvl{max-width:132px}
button.mem-remove{font:inherit; font-size:11.5px; padding:5px 9px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink-3)}
button.mem-remove:hover:not(:disabled){color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 9%,transparent)}
button.mem-remove:disabled{opacity:.45; cursor:default}
/* the one-click seat repair wears the Remove button's shape, not its red */
button.mem-fix:hover:not(:disabled){color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mem-h{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  margin:16px 0 2px; padding-top:10px; border-top:1px solid var(--line)}
.mem-invite{display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap}
.mem-invite input{flex:1; min-width:160px; font:inherit; font-size:12.5px; padding:6px 9px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.mem-note{margin:0 0 8px}
/* the owner's two (db/012), under a member's name as quiet text buttons, and the
   blocks they unfold beneath the row — the hand-over's confirmation, the admin-role
   checkboxes — indented to the name's column (the row's 2px, the avatar, the gap) */
.mem-acts{gap:4px 10px; margin-top:3px; flex-wrap:wrap}
button.mem-act{font:inherit; font-size:11px; padding:0; border:0; background:none; cursor:pointer; white-space:nowrap;
  color:var(--ink-3); text-decoration:underline; text-underline-offset:2px}
button.mem-act:hover{color:var(--accent)}
.mem-sub{margin:-3px 0 9px 41px; padding:8px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line)}
.mem-confirm-text{font-size:12.5px; line-height:1.45; color:var(--ink)}
.mem-confirm-acts{display:flex; gap:6px; margin-top:8px}
.mem-confirm-acts .btn{height:28px; padding:0 10px; font-size:12px; border-color:var(--line)}
.mem-confirm-acts .btn.primary{border-color:transparent}
.mem-adm-row{display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:12.5px; cursor:pointer}
.mem-adm-row input{margin:0; accent-color:var(--accent)}
.mem-adm-row small{color:var(--ink-3); font-size:11px; margin-left:7px}

/* the section sidebar (phase 3) — a left drawer of sections and their boards */
#sectionBar{position:fixed; left:0; top:58px; bottom:14px; width:264px; z-index:35;
  background:var(--surface); border:1px solid var(--line); border-left:none;
  border-radius:0 14px 14px 0; box-shadow:var(--shadow-lg); padding:10px 8px;
  overflow-y:auto; display:none}
#sectionBar.on{display:block}
.secbar-head{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-weight:600; padding:2px 8px 6px}
.secbar-sec{display:flex; align-items:center; gap:8px; padding:9px 8px 5px; margin-top:6px}
.secbar-name{font-size:12.5px; font-weight:600; color:var(--ink); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.secbar-kind{font-size:9px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-3); flex:none}
.secbar-kind[data-kind="everyone"]{color:#159a55; border-color:color-mix(in srgb,#22B364 42%,transparent)}
.secbar-kind[data-kind="team"]{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.secbar-kind[data-kind="shared"]{color:#b7791f; border-color:color-mix(in srgb,#E0A106 42%,transparent)}
.secbar-empty{font-size:11px; color:var(--ink-3); padding:2px 10px 4px}
button.secbar-board{display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none;
  background:none; color:var(--ink); font:inherit; font-size:12.5px; padding:7px 9px; border-radius:8px; cursor:pointer}
button.secbar-board:hover{background:var(--surface-2)}
button.secbar-board.here{background:var(--accent-soft); color:var(--accent-2); font-weight:500}
.secbar-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.secbar-board .lvlchip{flex:none}
#boards button.here{color:var(--accent); font-weight:500}
#boards button span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#boards button.here svg{color:var(--accent)}
/* The delete affordance. A heading's chevron is an <i> too, so this is the
   board rows' alone — down to keeping the row's own type rather than the
   mono a shortcut hint is set in. */
#boards i[data-drop]{
  font-family:inherit; font-size:11px; color:var(--ink-3); padding:2px 5px;
  border-radius:4px; opacity:0; flex:none;
}
#boards button:hover i[data-drop]{opacity:1}
#boards em.bshared{font-style:normal; font-size:10px; font-weight:600; color:var(--ink-3); flex:none;
  padding:1px 6px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line)}
#boards i[data-drop]:hover{background:var(--surface-3); color:var(--danger)}
/* Search, at the top of the panel (63a-search.js). The box wears the
   library's search field. With a query the board rows and the headings —
   the panel's own children — give way to the results under the box, and
   the panel widens so a snippet with its context fits in two lines. */
.bs{margin:1px 1px 4px}
.bs-box{position:relative; display:block}
.bs-box > svg{
  position:absolute; left:9px; top:50%; width:15px; height:15px; margin-top:-7.5px;
  color:var(--ink-3); pointer-events:none;
}
#boardSearch{
  width:100%; height:30px; padding:0 10px 0 30px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); outline:0; font-size:12.5px; color:var(--ink);
}
#boardSearch:focus{border-color:var(--accent-line); background:var(--surface)}
#boardSearch::-webkit-search-cancel-button{-webkit-appearance:none}
#boards.searching{width:min(360px, calc(100vw - 28px)); max-width:none}
#boards.searching > button,#boards.searching > hr{display:none}
#boardHits{margin-top:4px}
#boardHits mark{background:var(--accent-soft); color:var(--accent); border-radius:3px; padding:0 1px}
#boards #boardHits button[aria-selected="true"]{background:var(--accent-soft)}
.bs-head{
  padding:7px 9px 3px; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* A snippet runs to two lines; the id pair outranks the rule that pins
   every other row's height. */
#boards #boardHits .bs-hit{height:auto; min-height:29px; padding:5px 9px; align-items:flex-start}
#boards #boardHits .bs-hit svg{margin-top:1px}
#boards #boardHits .bs-hit span{
  white-space:normal; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bs-empty{padding:14px 10px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* ── inline text editor ─────────────────────────────────────────────── */
#editor{
  position:absolute; z-index:15; display:none; margin:0; border:0; padding:0; resize:none;
  background:transparent; overflow:hidden; text-align:center; outline:0;
  font-family:var(--sans); line-height:1.35; box-shadow:0 0 0 2px var(--accent);
  border-radius:3px; caret-color:var(--accent);
}
#editor.on{display:block}

/* ── toast ──────────────────────────────────────────────────────────── */
#toast{
  position:absolute; z-index:70; bottom:20px; left:50%; transform:translate(-50%,14px);
  background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:8px;
  font-size:12.5px; font-weight:500; box-shadow:var(--shadow-lg); opacity:0;
  pointer-events:none; transition:opacity .18s, transform .18s; max-width:min(420px,80vw);
}
#toast.on{opacity:1; transform:translate(-50%,0)}
/* "Turn into…" (80h): a quiet bar above the bottom toolbar; never takes the focus */
#turnNudge{position:absolute; z-index:40; bottom:76px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:min(640px, calc(100% - 32px)); padding:7px 8px 7px 12px; border:1px solid var(--accent-line); border-radius:var(--r-md); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); font-size:13px}
#turnNudge[hidden]{display:none}
#turnNudge .tn-ico svg{width:16px; height:16px; color:var(--accent); display:block}
#turnNudge .tn-say{flex:1 1 200px; min-width:0}
#turnNudge button{font:inherit; font-size:12.5px; border-radius:var(--r-sm); cursor:pointer; padding:5px 10px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2)}
#turnNudge .tn-go{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
#turnNudge .tn-never{border-color:transparent; background:none; text-decoration:underline; padding:5px 4px}
#turnNudge .tn-x{border-color:transparent; background:none; width:28px; padding:5px 0}
#turnNudge button:hover{filter:brightness(.97)}
#turnNudge button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
#app.homeon #turnNudge{display:none}
:root[data-theme="dark"] #toast{background:var(--surface-3); color:var(--ink); border:1px solid var(--line-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #toast{background:var(--surface-3); color:var(--ink); border:1px solid var(--line-2)}
}

/* ── context menu ───────────────────────────────────────────────────── */
/* .menuSub is a class, not an id: the board menu opens one panel per level
   (Board › Export › PNG is three), and they all wear the same rules. The
   board switcher is the board menu now, so its rows wear them too — its own
   block above is placement and the board rows' own affordances. */
#ctx,#ctxSub,.menuSub{
  position:absolute; z-index:65; min-width:200px; padding:5px; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
}
#ctx,#ctxSub,.menuSub{max-height:calc(100vh - 16px); overflow-y:auto; overscroll-behavior:contain}   /* never taller than the window, whatever the zoom: it scrolls */
#ctx.on,#ctxSub.on,.menuSub.on{display:block}
#ctx button,#boards button,#ctxSub button,.menuSub button{
  display:flex; width:100%; align-items:center; gap:9px; height:29px; padding:0 9px;
  border:0; background:transparent; border-radius:5px; cursor:pointer; font-size:12.5px;
  text-align:left; color:var(--ink);
}
#ctx button:hover,#boards button:hover,#ctxSub button:hover,.menuSub button:hover{background:var(--surface-2)}
#ctx button:disabled,#boards button:disabled,#ctxSub button:disabled,.menuSub button:disabled{opacity:.4}
#ctx button:disabled:hover,#boards button:disabled:hover,#ctxSub button:disabled:hover,.menuSub button:disabled:hover{background:transparent}
#ctx button i,#boards button i,#ctxSub button i,.menuSub button i{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); font-style:normal}
#ctx button svg,#boards button svg,#ctxSub button svg,.menuSub button svg{width:15px;height:15px;color:var(--ink-2);flex:none}
#ctx hr,#boards hr,#ctxSub hr,.menuSub hr{border:0; border-top:1px solid var(--line); margin:5px 3px}
/* An info row is a line to read, not a button that failed: full ink, no hand. */
#boards button[data-info],.menuSub button[data-info]{opacity:1; cursor:default; color:var(--ink-2)}

/* ── Mermaid pane ────────────────────────────────────────────────────── */
#mmPane{
  position:absolute; right:0; top:0; bottom:0; width:var(--mm-w); z-index:24;
  display:none; flex-direction:column; background:var(--surface);
  border-left:1px solid var(--line);
}
#app.mm-on #mmPane{display:flex}
#mmGrip{position:absolute; left:-3px; top:0; bottom:0; width:7px; cursor:col-resize; z-index:2}
#mmGrip:hover{background:var(--accent-soft)}
#mmHead{
  display:flex; align-items:center; gap:4px; padding:8px 8px 8px 14px;
  border-bottom:1px solid var(--line);
}
#mmHead .mmTitle{
  flex:1; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
#mmText{
  flex:1; width:100%; border:0; outline:0; resize:none; padding:12px 14px;
  background:transparent; color:var(--ink); font-family:var(--mono);
  font-size:12px; line-height:1.65; white-space:pre; overflow:auto; tab-size:2;
}
#mmText[readonly]{color:var(--ink-2)}
#mmPane.err #mmText{box-shadow:inset 3px 0 0 var(--danger)}
.mmBar{
  display:flex; align-items:center; gap:8px; padding:8px 10px 8px 14px;
  font-size:11.5px; line-height:1.35; border-bottom:1px solid var(--line);
}
.mmBar span{flex:1}
.mmBar .btn{height:26px; padding:0 9px; font-size:11.5px; border:1px solid var(--line)}
.mmBar.err{background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger)}
.mmBar.warn{background:var(--accent-soft); color:var(--accent)}
#mmFoot{
  border-top:1px solid var(--line); padding:7px 14px; font-size:11px;
  color:var(--ink-3); font-family:var(--mono); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:820px){ #app{--mm-w:0px !important} #app.mm-on #mmPane{display:none} }

/* ── colours typed in (60-ui.js) ──────────────────────────────────── */
.custrow{display:flex; flex-wrap:wrap; gap:6px; row-gap:6px; align-items:center; margin-top:6px}
.cpick{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-3); cursor:pointer}
.cpick input{width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px; background:none; cursor:pointer}
.mbClear{margin-left:auto; width:22px; height:22px; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink-2); cursor:pointer}

/* ── mind-map styles in the side panel (79b-mind-ui.js) ─────────────── */
.mindGrid4,.mindGrid5,.mindGrid6{display:grid; gap:3px}
.mindGrid4{grid-template-columns:repeat(4,1fr)} .mindGrid5{grid-template-columns:repeat(5,1fr)} .mindGrid6{grid-template-columns:repeat(6,1fr)}
.mindIconBtn{height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink-2); display:grid; place-items:center; cursor:pointer}
.mindIconBtn:hover{color:var(--ink); background:var(--surface-2)}
.mindIconBtn[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
.mindWheel{display:block; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 4px rgba(255,255,255,.55)}
.mindStyleBtn{height:30px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink-2); display:grid; place-items:center; cursor:pointer}
.mindStyleBtn svg{width:100%; max-width:40px; height:24px}
.mindStyleBtn:hover{color:var(--ink); background:var(--surface-2)}
.mindStyleBtn[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
#mindBar .mbOwners{display:flex; flex-wrap:wrap; gap:4px; flex-basis:100%}
.mkPanel{display:flex; flex-direction:column; gap:5px}
.mkRow{display:flex; flex-wrap:wrap; align-items:center; gap:2px}
.mkRow > span{flex:0 0 58px; font-size:11px; color:var(--ink-3)}
.mkCell{width:26px; height:26px; display:grid; place-items:center; border:1px solid transparent; border-radius:6px; background:none; cursor:pointer; padding:0}
.mkCell:hover{background:var(--surface-2)}
.mkCell[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft)}
#mindBar .mbText[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}

/* ── mind-map topic toolbar (79c-mind-bar.js) ───────────────────────── */
#mindBar{position:absolute; z-index:23; display:flex; flex-direction:column; gap:6px; pointer-events:none}
#mindBar[hidden]{display:none}
#mindBar .mbRow,#mindBar .mbPop{pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm)}
#mindBar .mbRow{display:flex; align-items:center; gap:2px; padding:3px; align-self:center}
#mindBar .mbRow button{width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-2); cursor:pointer}
#mindBar .mbRow button:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
#mindBar .mbRow button[aria-pressed="true"]{color:var(--accent); background:var(--accent-soft)}
#mindBar .mbRow button:disabled{opacity:.35; cursor:default}
#mindBar .mbSep{width:1px; height:18px; background:var(--line); margin:0 3px}
#mindBar .mbPop{padding:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; max-width:340px; align-self:center; font-size:12px; color:var(--ink-2)}
#mindBar .mbPop textarea,#mindBar .mbPop input[type="url"],#mindBar .mbPop input[type="text"]{width:300px; font:inherit; font-size:12.5px; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); resize:vertical}
#mindBar .mbPop input[type="date"]{font:inherit; font-size:12px; padding:4px 6px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink)}
#mindBar .mbPop label{display:flex; align-items:center; gap:5px}
#mindBar .mbSeg{display:flex; flex-wrap:wrap; gap:3px}
#mindBar .mbSeg button,#mindBar .mbText{display:flex; align-items:center; gap:4px; min-width:30px; height:28px; padding:0 7px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink-2); font:inherit; font-size:11.5px; cursor:pointer}
#mindBar .mbSeg button[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
#mindBar .mbSeg button:disabled{opacity:.5; cursor:default}
#mindBar .mbNote{flex-basis:100%; margin:0; color:var(--ink-3); font-size:11.5px}

/* ── mind-map outline pane (79b-mind-ui.js) ─────────────────────────── */
#mindPane{
  position:absolute; right:0; top:0; bottom:0; width:var(--mm-w); z-index:25;
  display:none; flex-direction:column; background:var(--surface);
  border-left:1px solid var(--line); box-shadow:var(--shadow-sm);
}
#mindPane.on{display:flex}
#mindPane .mindHead{display:flex; align-items:center; gap:4px; padding:8px 8px 8px 14px; border-bottom:1px solid var(--line)}
#mindPane .mmTitle{flex:1; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
#mindPane textarea{
  flex:1; width:100%; border:0; outline:0; resize:none; padding:12px 14px;
  background:transparent; color:var(--ink); font-family:var(--mono);
  font-size:12.5px; line-height:1.7; white-space:pre; overflow:auto; tab-size:2;
}
#mindPane textarea[readonly]{color:var(--ink-2)}
#mindPane .mindFoot{border-top:1px solid var(--line); padding:7px 14px; font-size:11px; color:var(--ink-3); font-family:var(--mono)}
@media (max-width:820px){ #mindPane{width:auto; left:0; top:auto; height:45%; border-left:0; border-top:1px solid var(--line)} }

/* ── modal ──────────────────────────────────────────────────────────── */
.scrim{
  position:absolute; inset:0; z-index:80; display:none;
  background:color-mix(in srgb, var(--ink) 28%, transparent);
  align-items:center; justify-content:center; padding:24px;
}
.scrim.on{display:flex}
.modal{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:min(620px,100%);
  max-height:100%; overflow:auto; padding:22px 24px 24px;
}
.modal h2{margin:0 0 3px; font-size:17px; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
.modal p.sub{margin:0 0 18px; color:var(--ink-2); font-size:12.5px; max-width:62ch}
.modal .close{position:absolute; top:14px; right:14px}
.keys{columns:2; column-gap:28px}
.keys h3{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:16px 0 7px; break-after:avoid;
}
.keys h3:first-child{margin-top:0}
.keys dl{margin:0 0 2px; display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:center}
.keys dt{font-size:12.5px; color:var(--ink-2)}
.keys dd{margin:0; display:flex; gap:3px; justify-content:flex-end}
kbd{
  font-family:var(--mono); font-size:10.5px; line-height:1; padding:4px 5px;
  background:var(--surface-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; color:var(--ink-2); white-space:nowrap;
}
.exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.exp{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-md); background:transparent;
  cursor:pointer; text-align:left; transition:border-color .12s, background .12s;
}
.exp:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.exp svg{width:20px;height:20px;color:var(--accent)}
.exp b{font-size:12.5px; font-weight:600}
.exp small{color:var(--ink-2); font-size:11.5px; line-height:1.35}
.field{
  width:100%; font-family:var(--mono); font-size:11px; padding:10px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2); resize:vertical; min-height:110px;
  color:var(--ink); white-space:pre; overflow:auto;
}
/* .field is the textarea's look (Mermaid, code, JSON). On a one-line <input>
   it must stay one line: the inspector's Network, Link, UML state and
   interaction fields would otherwise each stand 110px tall in monospace. A
   container's own rule (.hist-meta .field, .seq-loop .field) still wins. */
input.field{min-height:0; height:28px; padding:0 8px; resize:none; white-space:normal; overflow:hidden;
  font-family:inherit; font-size:12.5px; text-overflow:ellipsis}
/* The picker (69d): a search box over a rail of categories beside the
   results. The modal has a fixed height and only the results scroll, so the
   box and the rail stay put while the list under them changes length. The
   grid fills its width with as many columns as fit. Narrower than 700px the
   rail turns into one row of chips that scrolls sideways; on a phone the
   picker takes the whole screen, 16px in from each edge. */
#tmplModal .modal{width:min(940px,100%); height:min(720px,100%); display:flex; flex-direction:column}
.tmpl-find{position:relative; display:flex; align-items:center; gap:12px; margin:0 0 14px; flex:none}
.tmpl-find svg{position:absolute; left:11px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--ink-3); pointer-events:none}
.tmpl-q{flex:1; min-width:0; font:inherit; font-size:13.5px; padding:9px 12px 9px 34px; border:1px solid var(--line-2);
  border-radius:var(--r-md); background:var(--surface); color:var(--ink)}
.tmpl-q:focus{border-color:var(--accent)}
.tmpl-n{margin:0; flex:none; font-size:12px; color:var(--ink-3); white-space:nowrap}
.tmpl-body{flex:1; min-height:0; display:flex; gap:18px}
.tmpl-cats{flex:none; width:176px; display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.tmpl-cat{display:flex; align-items:center; gap:8px; padding:7px 10px; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--ink-2); font:inherit; font-size:12.5px; text-align:left; cursor:pointer}
.tmpl-cat span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tmpl-cat i{font-style:normal; font-size:11px; color:var(--ink-3)}
.tmpl-cat:hover{background:var(--surface-2); color:var(--ink)}
.tmpl-cat[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
.tmpl-cat[aria-pressed="true"] i{color:var(--accent)}
.tmpl-pane{flex:1; min-width:0; overflow-y:auto; padding:2px}
.tmpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px}
.tmpl-h{
  grid-column:1/-1; margin:15px 0 -1px; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.tmpl-h:first-child{margin-top:0}
.tmpl[hidden],.tmpl-h[hidden]{display:none}
.tmpl-none{padding:30px 10px; text-align:center; color:var(--ink-2); font-size:13px}
.tmpl-none p{margin:0 0 12px}
.tmpl-none .row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
@media (max-width:700px){
  .tmpl-body{flex-direction:column; gap:10px}
  .tmpl-cats{width:auto; flex-direction:row; gap:6px; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; scrollbar-width:none}
  .tmpl-cats::-webkit-scrollbar{display:none}
  .tmpl-cat{flex:none; padding:6px 11px; border:1px solid var(--line-2); border-radius:16px; background:var(--surface)}
  .tmpl-cat[aria-pressed="true"]{border-color:var(--accent-line)}
  .tmpl-cat span{overflow:visible}
}
@media (max-width:600px){
  #tmplModal{padding:0}
  #tmplModal .modal{width:100%; height:100%; border-radius:0; border:0; padding:16px}
  #tmplModal .modal p.sub{display:none}
  .tmpl-find{flex-wrap:wrap; gap:6px; margin-bottom:10px}
  .tmpl-find svg{top:19px}
  .tmpl-n{flex-basis:100%}
  .tmpl-grid{grid-template-columns:1fr}
}
.tmpl{
  display:flex; gap:11px; align-items:flex-start; padding:12px; border:1px solid var(--line);
  border-radius:var(--r-md); background:transparent; cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s;
}
.tmpl:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.tmpl svg{width:28px;height:28px;color:var(--accent);flex:none;margin-top:1px}
.tmpl b{display:block; font-size:12.5px; font-weight:600; margin-bottom:2px}
.tmpl small{color:var(--ink-2); font-size:11.5px; line-height:1.35; display:block}
/* A tile's picture (69d): a frame over the title, holding the icon until the
   drawing of the board arrives, then the drawing in its place. The frame is
   one height whichever it holds, so nothing moves under the pointer or the
   arrow keys when a picture lands. On a phone the tiles are one column and
   the picture a small one beside the words. */
#tmplModal .tmpl{flex-direction:column; align-items:stretch; gap:9px; padding:8px 8px 10px}
#tmplModal .tmpl > span:last-child{padding:0 4px}
.tmpl-pic{position:relative; flex:none; display:grid; place-items:center; height:104px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper)}
.tmpl-pic.on > svg{display:none}
.tmpl-th{position:absolute; inset:6px; display:grid; place-items:center}
.tmpl .tmpl-th > svg{width:100%; height:100%; margin:0; color:inherit}
@media (max-width:600px){
  #tmplModal .tmpl{flex-direction:row; align-items:center; gap:12px; padding:8px}
  #tmplModal .tmpl > span:last-child{padding:0; min-width:0}
  .tmpl-pic{width:96px; height:64px}
  .tmpl-th{inset:4px}
}

@media (max-width:860px){
  #inspector{width:210px}
  .keys{columns:1}
  .exp-grid{grid-template-columns:1fr}
  .hud.tr .lbl{display:none}
  .hud.tr .btn{width:32px; padding:0}
  /* with the words gone, each button keeps a picture — Share, Live and the account had none */
  .hud.tr .ico-narrow{display:block; width:17px; height:17px}
  .hud.tr #bLive, .hud.tr #bAcct{position:relative}
  .hud.tr #bLive .dot, .hud.tr #bAcct .dot{position:absolute; top:5px; right:5px; width:7px; height:7px; margin:0}   /* the state stays, as a badge */
}
.ico-narrow{display:none}
/* a short window: the rail stays between the top bar and the bottom one, and scrolls if it must */
@media (max-height:720px){
  #rail{top:66px; transform:none}
}
@media (max-width:600px){
  #rail{left:8px; padding:4px} .tool{width:34px;height:34px}
  #app #rail, #app.rail1 #rail{grid-template-columns:34px}
  /* one column, always: it runs between the bars and scrolls, the way a short window's does */
  #rail{top:52px; transform:none; max-height:calc(100% - 112px)}
  #rail .rail-cols{display:none}
  .tl{top:8px;left:8px} .tr{top:8px;right:8px} .bl{bottom:8px;left:8px}
  .brand .wm,.savechip{display:none}
  #docTitle{max-width:110px}
  /* a phone: the panel is a sheet along the bottom, folded to its title until asked (60-ui) */
  #inspector, #app.focusmode.fpanel #inspector{left:8px; right:8px; width:auto; top:auto; bottom:58px; max-height:46%; z-index:24}
  #app.mbdock #inspector{bottom:104px}
  #inspector .insp-head{cursor:pointer; position:relative; padding-right:34px}
  #inspector .insp-head::after{content:''; position:absolute; right:14px; top:50%; width:7px; height:7px; border:solid var(--ink-3); border-width:0 1.6px 1.6px 0; transform:translateY(-70%) rotate(45deg)}
  #inspector.min .insp-head::after{transform:translateY(-30%) rotate(-135deg)}
  #inspector.min{overflow:hidden; padding-bottom:0}
  #inspector.min > :not(.insp-head){display:none}
  /* the topic's row docks above the bottom bar and scrolls sideways; what it opens sits above it */
  #mindBar.dock{left:8px; right:8px; top:auto; bottom:58px; flex-direction:column-reverse; z-index:25}
  #mindBar.dock .mbRow{align-self:stretch; overflow-x:auto; scrollbar-width:none; justify-content:flex-start}
  #mindBar.dock .mbRow::-webkit-scrollbar{display:none}
  #mindBar.dock .mbRow button{flex:none; width:36px; height:36px}
  #mindBar.dock .mbPop{align-self:stretch; max-width:none; max-height:40vh; overflow-y:auto}
  #mindBar.dock .mbPop textarea,#mindBar.dock .mbPop input[type="url"],#mindBar.dock .mbPop input[type="text"]{width:100%}
  /* focus mode has no bottom bar: everything drops to the edge */
  #app.focusmode #mindBar.dock{bottom:12px}
  #app.focusmode.fpanel #inspector{bottom:12px}
  #app.focusmode.fpanel.mbdock #inspector{bottom:58px}
  #focusDock,#focusHelp{max-height:calc(100% - 140px); overflow-y:auto}
}
/* a narrow phone: the board's name gives way to the buttons on the right; the
   mark stays, since it is the menu */
@media (max-width:420px){
  .tl .divider{display:none}
  #docTitle{max-width:76px}
  /* no room for the section tree's button beside the menu; Home lists the sections */
  #bSections{display:none}
  /* the workshop's timer and reactions need the room; the main menu keeps both toggles */
  #bGrid, #bMinimap{display:none}
}

/* ── presentation ─────────────────────────────────────────────────── */
/* Only the canvas survives; everything else is the author's furniture. */
/* ── Home (71t-home.js): every board, and the workspace they live in ─── */
#home{position:absolute; inset:0; z-index:58; display:flex; background:var(--paper); color:var(--ink); font-family:var(--sans)}
#home[hidden]{display:none}
#app.homeon .hud, #app.homeon #rail, #app.homeon #inspector, #app.homeon #mindBar, #app.homeon #mmPane, #app.homeon #sectionBar{visibility:hidden}
#home .hm-nav{width:236px; flex:none; display:flex; flex-direction:column; gap:6px; padding:14px 10px; background:var(--surface); border-right:1px solid var(--line); overflow-y:auto}
#home .hm-brand{display:flex; align-items:center; gap:8px; padding:4px 8px 10px; font-weight:600; font-size:15px}
#home .hm-brand .mark{width:22px; height:22px}
#home .hm-brand em{font-style:normal; color:var(--accent)}
#home .hm-ws{position:relative}
#home .hm-wsbtn{display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; text-align:left}
#home .hm-wsbtn svg{width:14px; height:14px; margin-left:auto; color:var(--ink-3)}
#home .hm-wsav{width:24px; height:24px; flex:none; border-radius:6px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:12px}
#home .hm-wsname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
#home .hm-wsmenu{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:3; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
#home .hm-wsrow{display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer}
#home .hm-wsrow:hover{background:var(--surface-2)}
#home .hm-wsrow.cur{cursor:default; color:var(--accent)}
#home .hm-wsrow svg{width:15px; height:15px; flex:none}
#home .hm-wsrow small{display:block; color:var(--ink-3); font-size:11px}
#home .hm-wsmenu hr,#home .hm-menu hr{border:0; border-top:1px solid var(--line); margin:4px 2px}
#home .hm-newws{display:flex; gap:6px; padding:4px}
#home .hm-newws input{flex:1; min-width:0}
#home .hm-navlist{display:flex; flex-direction:column; gap:1px; margin-top:6px}
#home .hm-nav-i{display:flex; align-items:center; gap:9px; padding:7px 9px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink-2); font:inherit; font-size:13px; text-align:left; cursor:pointer}
#home .hm-nav-i svg{width:16px; height:16px; flex:none}
#home .hm-nav-i span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-nav-i:hover{background:var(--surface-2); color:var(--ink)}
#home .hm-nav-i.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
#home .hm-count{font-style:normal; font-size:11px; padding:1px 6px; border-radius:9px; background:var(--surface-3); color:var(--ink-2)}
#home .hm-nav-h{margin:10px 9px 3px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
#home .hm-nav-sep{height:1px; background:var(--line); margin:8px 4px}
#home .hm-main{flex:1; min-width:0; overflow-y:auto; padding:18px 26px 40px}
#home .hm-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
#home .hm-head h1{font-size:20px; margin:0 6px 0 0}
#home .hm-sub{color:var(--ink-3); font-size:13px}
#home .hm-sp{flex:1}
#home .hm-q{width:220px; max-width:100%}
#home input, #home select{font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink)}
#home .hm-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap}
#home .hm-btn svg{width:15px; height:15px}
#home .hm-btn:hover{background:var(--surface-2)}
#home .hm-btn.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
#home .hm-btn.danger{border-color:var(--danger); color:var(--danger)}
#home .hm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px}
#home .hm-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm)}
#home .hm-card.here{border-color:var(--accent-line)}
#home .hm-thumb{height:136px; padding:10px; border:0; border-bottom:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--paper); cursor:pointer; display:grid; place-items:center; overflow:hidden}
#home .hm-thumb svg{width:100%; height:100%}
#home .hm-thumb:hover{background:var(--surface-2)}
#home .hm-ph{width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:22px; font-weight:600}
#home .hm-empty{color:var(--ink-3); font-size:12px}
#home .hm-meta{padding:9px 70px 11px 12px; min-width:0}
#home .hm-title{display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-meta small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-rename{display:flex; gap:5px}
#home .hm-rename input{flex:1; min-width:0; padding:4px 7px}
#home .hm-star,#home .hm-more{position:absolute; bottom:10px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:var(--r-sm); background:none; color:var(--ink-3); cursor:pointer; font-size:16px}
#home .hm-star{right:40px} #home .hm-more{right:8px}
#home .hm-star svg{width:16px; height:16px}
#home .hm-star.on{color:#E2A400}
#home .hm-star:hover,#home .hm-more:hover{background:var(--surface-2); color:var(--ink)}
#home .hm-menu{position:absolute; right:8px; top:calc(100% - 6px); z-index:4; min-width:210px; max-height:340px; overflow-y:auto; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
#home .hm-menu button{display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer}
#home .hm-menu button svg{width:15px; height:15px; flex:none}
#home .hm-menu button:hover:not(:disabled){background:var(--surface-2)}
#home .hm-menu button:disabled{opacity:.4; cursor:default}
#home .hm-menu button.danger{color:var(--danger)}
#home .hm-mh{padding:5px 8px 2px; font-size:11px; color:var(--ink-3)}
#home .hm-note,#home .hm-empty-l{color:var(--ink-2); font-size:13px; margin:0 0 14px}
#home .hm-empty-l{margin-top:40px; text-align:center}
#home .hm-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
#home .hm-tabs button{padding:8px 12px; border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-2); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap}
#home .hm-tabs button.on{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
#home .hm-pane{max-width:720px}
#home .hm-set{margin-bottom:26px}
#home .hm-set h2{font-size:14px; margin:0 0 6px}
#home .hm-set p{margin:4px 0 10px; font-size:13px}
#home .hm-muted{color:var(--ink-3)}
#home .hm-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#home .hm-row input{flex:1; min-width:160px}
#home .hm-danger{padding:14px; border:1px solid var(--line); border-radius:var(--r-md)}
#home .hm-list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-md)}
#home .hm-list li{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line)}
#home .hm-list li:last-child{border-bottom:0}
#home .hm-li-main{flex:1; min-width:0}
#home .hm-li-main b{display:block; font-size:13px; font-weight:600}
#home .hm-li-main small{color:var(--ink-3); font-size:11.5px}
#home .hm-av{width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:12px}
#home .hm-tag{font-size:11.5px; padding:2px 8px; border-radius:9px; background:var(--surface-2); color:var(--ink-2)}
#home button:focus-visible,#home input:focus-visible,#home select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* Home's entry (71t homeStartHTML): Doc, Board, More; then the jobs (71t2) */
#home .hm-start{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px}
#home .hm-fmt{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; min-width:180px; padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:start; cursor:pointer}
#home .hm-fmt svg{grid-row:span 2; width:22px; height:22px; color:var(--accent)}
#home .hm-fmt b{font-size:14px}
#home .hm-fmt small{font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#home .hm-fmt:hover,#home .hm-fmt[aria-expanded="true"]{border-color:var(--accent-line); background:var(--surface-2)}
#home .hm-start-more{position:relative; display:inline-flex}
#home .hm-start-more .hm-fmt{width:100%}
#home .hm-start-menu{left:0; right:auto; top:calc(100% + 4px); min-width:290px}
[dir="rtl"] #home .hm-start-menu{left:auto; right:0}
#home .hm-start-menu button{text-align:start; align-items:flex-start}
#home .hm-start-menu button span{display:flex; flex-direction:column}
#home .hm-start-menu small{font-size:11px; color:var(--ink-3)}
#home .hm-jobs{margin:0 0 24px}
#home .hm-jobs h2{font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 8px}
#home .hm-job-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; list-style:none; margin:0; padding:0}
#home .hm-job{position:relative; display:flex; min-width:0}
#home .hm-job-b{display:flex; align-items:flex-start; gap:10px; width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:start; cursor:pointer}
#home .hm-job-b svg{width:20px; height:20px; flex:none; color:var(--accent)}
#home .hm-job-b span{min-width:0}
#home .hm-job-b b{display:block; font-size:13px}
#home .hm-job-b small{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
#home .hm-job-b:hover{border-color:var(--accent-line); box-shadow:var(--shadow-sm)}
#home .hm-job.alt .hm-job-b{padding-bottom:32px}
#home .hm-job-alt{position:absolute; bottom:8px; inset-inline-start:42px; padding:2px 9px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:11.5px; cursor:pointer}
#home .hm-job-alt:hover{color:var(--accent); border-color:var(--accent-line)}
/* the logo is the app's menu (63-boards): a button that reads as the brand until hovered */
button.brand{border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; border-radius:var(--r-sm); margin-block:3px; margin-inline:3px 0; padding-block:4px; padding-inline:7px 9px}
button.brand:hover,button.brand[aria-expanded="true"]{background:var(--surface-2)}
button.brand:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
/* a narrow phone: the wordmark is already hidden, so the button closes around the
   mark. It lives here rather than beside the rest of the 420px rules, because this
   base rule comes after them and would otherwise win on source order. */
@media (max-width:420px){ button.brand{padding-inline:5px; margin-inline-end:0} }
/* a narrow window: the lists run across the top, the cards two to a row */
@media (max-width:700px){
  #home{flex-direction:column}
  #home .hm-nav{width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:8px; border-right:0; border-bottom:1px solid var(--line); overflow:visible}
  #home .hm-brand{display:none}
  #home .hm-ws{flex:1 1 100%}
  #home .hm-navlist{flex:1 1 100%; flex-direction:row; overflow-x:auto; margin:0; scrollbar-width:none}
  #home .hm-navlist::-webkit-scrollbar{display:none}
  #home .hm-nav-h,#home .hm-nav-sep{display:none}
  #home .hm-nav-i{flex:none}
  #home .hm-main{padding:12px 16px 30px}
  #home .hm-head h1{flex:1 1 100%}
  #home .hm-q{flex:1; width:auto}
  #home .hm-head .hm-btn span{display:none}
  #home .hm-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  #home .hm-thumb{height:100px}
  #home .hm-start{gap:8px}
  #home .hm-start > *{flex:1 1 0; min-width:0}
  #home .hm-fmt{min-width:0; padding:9px 10px; column-gap:8px}
  #home .hm-fmt small{display:none}
  #home .hm-fmt svg{grid-row:auto}
  #home .hm-start-menu{min-width:min(290px, calc(100vw - 32px))}
  #home .hm-start-menu{left:auto; right:0}   /* More is the last of the three: its menu opens inward */
  [dir="rtl"] #home .hm-start-menu{right:auto; left:0}
  #home .hm-job-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
  #home .hm-job-b{padding:9px 10px; gap:8px}
}
/* Home: the template gallery, folders, and Save as template */
#home .hm-tpls{margin-top:34px; padding-top:18px; border-top:1px solid var(--line)}
#home .hm-tpls-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
#home .hm-tpls-h h2{font-size:16px; margin:0; flex:1}
#home .hm-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
#home .hm-chips button{padding:5px 11px; border:1px solid var(--line-2); border-radius:14px; background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px; cursor:pointer}
#home .hm-chips button.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); font-weight:600}
#home .hm-tq{width:240px; max-width:100%; font:inherit; font-size:13px; padding:6px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink)}
#home .hm-tnone{padding:22px 0; color:var(--ink-2); font-size:13px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
#home .hm-tnone p{margin:0; flex:1 1 100%}
#home .hm-tall{margin-top:12px}
#home .hm-tpl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px}
#home .hm-tpl{position:relative}
#home .hm-tpl-b{display:flex; flex-direction:column; width:100%; padding:0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; overflow:hidden}
#home .hm-tpl-b:hover{border-color:var(--accent-line); box-shadow:var(--shadow-sm)}
#home .hm-tpl-pic{height:96px; padding:8px; display:grid; place-items:center; background:var(--paper); border-bottom:1px solid var(--line)}
#home .hm-tpl-pic svg{width:100%; height:100%}
#home .hm-tpl-b b{padding:8px 10px 0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-tpl-b small{padding:2px 10px 9px; font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-tpl-x{position:absolute; top:6px; right:6px; min-width:24px; height:24px; padding:0 6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink-3); font:inherit; font-size:11px; cursor:pointer}
#home .hm-tpl-x.danger{color:var(--danger); border-color:var(--danger)}
#home .hm-crumbs{font-size:12.5px; color:var(--ink-3); margin-bottom:4px}
#home .hm-crumbs button{border:0; background:none; padding:0; color:var(--accent); font:inherit; cursor:pointer}
#home .hm-folders{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; margin-bottom:18px}
#home .hm-folder{position:relative; display:flex; align-items:center; gap:10px; padding:10px 40px 10px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); min-width:0}
#home .hm-folder-b{width:36px; height:36px; flex:none; display:grid; place-items:center; border:0; border-radius:8px; background:var(--accent-soft); color:var(--accent); cursor:pointer}
#home .hm-folder-b svg{width:20px; height:20px}
#home .hm-folder-m{min-width:0}
#home .hm-folder-m b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#home .hm-folder-m small{color:var(--ink-3); font-size:11.5px}
#home .hm-folder .hm-more{top:50%; bottom:auto; transform:translateY(-50%)}
#home .hm-folder-add{justify-content:center; padding:10px; color:var(--ink-2); font:inherit; font-size:13px; cursor:pointer; border-style:dashed}
#home .hm-folder-add svg{width:16px; height:16px}
#home .hm-newfolder{padding:8px}
#home .hm-newfolder input{flex:1; min-width:0}
#home .hm-nav-f{font-size:12.5px}
.tpl-save{display:flex; flex-direction:column; gap:10px; min-width:min(380px, 92vw)}
.tpl-save label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-2)}
.tpl-save input{font:inherit; font-size:13px; padding:7px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink)}
.tpl-save-row{display:flex; justify-content:flex-end; gap:8px}
.tpl-save .btn.pri{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
@media (max-width:700px){
  #home .hm-tpl-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  #home .hm-tpls-h .hm-btn span{display:none}
  #home .hm-tpls-h h2{flex:1 1 100%}
  #home .hm-tq{flex:1; width:auto; min-width:0}
  /* the categories: one row that scrolls sideways */
  #home .hm-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  #home .hm-chips::-webkit-scrollbar{display:none}
  #home .hm-chips button{flex:none; white-space:nowrap}
}
/* ── Gantt (79e-gantt.js): a map's tasks on a timeline, along the bottom ── */
#ganttPane{position:absolute; left:0; right:var(--mm-w, 0px); bottom:0; height:42%; min-height:200px; z-index:30; display:flex; flex-direction:column; background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow-md); font-size:12.5px}
#ganttPane[hidden]{display:none}
#app.ganttOn .hud.bl{bottom:calc(42% + 10px)}
#ganttPane .gt-head{display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--line); flex:none}
#ganttPane .gt-head b{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40%}
#ganttPane .gt-hint{color:var(--ink-3); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ganttPane .gt-sp{flex:1}
#ganttPane .gt-seg{display:flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden}
#ganttPane .gt-seg button{border:0; background:none; padding:4px 10px; font:inherit; font-size:12px; color:var(--ink-2); cursor:pointer}
#ganttPane .gt-seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent); font-weight:600}
#ganttPane .gt-btn{border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r-sm); padding:4px 10px; font:inherit; font-size:12px; color:var(--ink); cursor:pointer}
#ganttPane .gt-body{flex:1; display:flex; min-height:0}
#ganttPane .gt-names{flex:none; border-right:1px solid var(--line); overflow:hidden; position:relative; background:var(--surface)}
#ganttPane .gt-cal-pad{height:44px; border-bottom:1px solid var(--line)}
#ganttPane .gt-names-in{position:relative}
#ganttPane .gt-name{position:absolute; left:0; right:0; height:30px; display:flex; align-items:center; gap:4px; padding-right:6px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
#ganttPane .gt-name span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ganttPane .gt-name:hover{background:var(--surface-2)}
#ganttPane .gt-name button{border:0; background:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0 4px}
#ganttPane .gt-grid{flex:1; overflow:auto; position:relative}
#ganttPane .gt-cal{position:sticky; top:0; z-index:3; height:44px; background:var(--surface); border-bottom:1px solid var(--line)}
#ganttPane .gt-mons,#ganttPane .gt-ticks{position:relative; height:22px}
#ganttPane .gt-mon{position:absolute; top:4px; padding-left:4px; font-weight:600; color:var(--ink-2); white-space:nowrap; border-left:1px solid var(--line)}
#ganttPane .gt-tick{position:absolute; top:3px; text-align:center; color:var(--ink-3); font-size:11px}
#ganttPane .gt-tick.we{color:var(--ink-3); opacity:.6}
#ganttPane .gt-tick.now{color:var(--accent); font-weight:700}
#ganttPane .gt-canvas{position:relative}
#ganttPane .gt-row{position:absolute; left:0; height:30px; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor:copy}
#ganttPane .gt-row.odd{background:color-mix(in srgb, var(--surface-2) 45%, transparent)}
#ganttPane .gt-we{position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--surface-3) 45%, transparent); pointer-events:none}
#ganttPane .gt-today{position:absolute; top:0; width:2px; margin-left:-1px; background:var(--accent); opacity:.7; pointer-events:none; z-index:2}
#ganttPane .gt-bar{position:absolute; height:16px; border-radius:5px; background:color-mix(in srgb, var(--c) 45%, var(--surface)); border:1px solid var(--c); cursor:grab; overflow:hidden; z-index:1}
#ganttPane .gt-bar.late{border-color:var(--danger); box-shadow:0 0 0 1px var(--danger)}
#ganttPane .gt-bar.done{opacity:.6}
#ganttPane .gt-p{position:absolute; left:0; top:0; bottom:0; background:var(--c); opacity:.75; pointer-events:none}
#ganttPane .gt-h{position:absolute; top:0; bottom:0; width:7px; cursor:ew-resize}
#ganttPane .gt-h.l{left:0} #ganttPane .gt-h.r{right:0}
#ganttPane .gt-ms{position:absolute; width:14px; height:14px; transform:rotate(45deg); border-radius:2px; cursor:grab; z-index:1}
#ganttPane .gt-roll{position:absolute; height:4px; background:var(--ink-2); border-radius:2px; opacity:.55; pointer-events:none}
@media (max-width:600px){ #ganttPane{height:55%} #app.ganttOn .hud.bl{bottom:calc(55% + 10px)} #ganttPane .gt-names{width:140px !important} #ganttPane .gt-hint{display:none} }
/* Credits & licences (71u-credits.js) */
.credits{max-width:720px; max-height:82vh; overflow-y:auto}
.credits section{margin-top:16px}
.credits h3{font-size:13.5px; margin:0 0 4px}
.credits ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.credits li{display:grid; grid-template-columns:170px 1fr; gap:2px 12px; font-size:12.5px}
.credits li b{font-weight:600}
.credits li a{grid-column:2; color:var(--accent); font-size:11.5px; word-break:break-all}
@media (max-width:600px){ .credits li{grid-template-columns:1fr} .credits li a{grid-column:1} }
/* ── focus mode (79d-focus.js): just the board and a corner cluster ───── */
#app.focusmode .hud, #app.focusmode #rail, #app.focusmode #mmPane, #app.focusmode #mindPane { display: none; }
#app.focusmode:not(.fpanel) #inspector { display: none; }
#app.focusmode { --mm-w: 0px; }
#app.focusmode.fpanel #inspector { top: 64px; }
#focusBar{position:absolute; top:14px; right:14px; z-index:30; display:flex; gap:2px; padding:3px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm)}
#focusBar[hidden], #focusDock[hidden], #focusHelp[hidden]{display:none}
#focusBar button{width:32px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-2); cursor:pointer}
#focusBar button:hover{background:var(--surface-2); color:var(--ink)}
#focusBar button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
#focusDock,#focusHelp{position:absolute; top:60px; right:14px; z-index:30; width:300px; max-height:calc(100% - 80px); overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:12px 14px; font-size:12.5px}
#focusDock h3,#focusHelp h3{margin:0 0 10px; font-size:13px}
#focusDock .fnote{margin:0 0 8px; color:var(--ink-3); font-size:12px}
#focusHelp .fk{display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--line)}
#focusHelp .fk:last-child{border-bottom:0}
#focusHelp kbd{font:inherit; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
#app.presenting #rail,
#app.presenting #inspector,
#app.presenting .hud { display: none; }
#app.presenting { --mm-w: 0px; }
#presBar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 60;
  padding: 7px 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 13px;
}
#presBar[hidden] { display: none; }
#presWhere { font-variant-numeric: tabular-nums; color: var(--muted); }
#presTitle { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#presBar button[disabled] { opacity: .35; pointer-events: none; }

/* ── comments ─────────────────────────────────────────────────────── */
#cmtBox {
  position: fixed; z-index: 55; width: 272px; padding: 10px;
  border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 8px;
}
#cmtBox[hidden] { display: none; }
.cmtWho { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.cmtWho span { color: var(--ink); opacity: .55; }
#cmtText {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px;
  padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
}
#cmtReply {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
}
.cmtThread { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto;
  border-left: 2px solid var(--line); padding-left: 8px; }
.cmtReplyText { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmtX { border: 0; background: none; color: inherit; cursor: pointer; font-size: 11px; opacity: .6; padding: 0 2px; }
.cmtX:hover { opacity: 1; }
.cmtRow { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.cmtRow .btn { font-size: 12px; padding: 4px 9px; }
#app.presenting #cmtBox { display: none; }

#ctxSub,.menuSub{ position:fixed; z-index:70; min-width:190px; }

/* ── catch up ────────────────────────────────────────────────────────── */
.catch-list{
  list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-radius:var(--r-md); max-height:min(48vh,420px); overflow-y:auto;
}
.catch-h{
  display:flex; align-items:center; gap:8px; padding:8px 12px 4px; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.catch-h + .catch-h{border-top:1px solid var(--line)}
.catch-h i{font-style:normal; margin-left:auto; font-variant-numeric:tabular-nums}
.catch-row{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 14px; font-size:12.5px}
.catch-row svg{width:14px; height:14px; flex:none; color:var(--ink-3)}   /* ico() draws unsized; unconstrained it fills the row */
.catch-row span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.catch-row small{color:var(--ink-3); font-size:11px; flex:none}
.catch-row + .catch-h{border-top:1px solid var(--line); margin-top:4px}
.catch-empty{padding:18px 12px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* ── accessibility switches ──────────────────────────────────────────────
   Toggled as classes on #app, on body (submenus and late-built modals hang
   off body) and on the root: the canvas reads its tokens from :root through
   cssv(), where a body-level override is invisible. So the token rules
   below come in two forms, the compound one for the root itself and the
   descendant one for everything under it. */
/* Interface size (61-prefs uiSizeGet): Small, Normal or Large zooms the
   interface by --uiz, never the board. Two ways, by how a piece is placed:
   - placed by CSS (bars, rail, panels, dialogs, Home): the piece zooms itself,
     so its offsets scale with it and neighbours keep their spacing;
   - placed by a script at the pointer or an anchor (menus, popups, the bars
     that follow a shape): the box stays where the script put it and its
     contents zoom, since a zoomed box lands at its position x the zoom.
   Not zoomed: the canvas and what sits on it (#stage, #editor, #embedLayer,
   #docView). The minimap and the two drag-resized panes have rules of their
   own below. A tooltip's words are bare text, so it scales its font instead. */
:root{--uiz:1}
:root.ui-small{--uiz:.9}
:root.ui-large{--uiz:1.15}
.hud,#rail,#library,#inspector,#presBar,#sectionBar,#toast,#brushPanel,#wkBar,#wkResults,#seqStart,
.scrim>*,#home>*{zoom:var(--uiz)}
:is(#ctx,#ctxSub,#boards,#acctMenu,.menuSub,#cmtBox,#wkPop,#wkFloat,#mindBar,#seqBar,#flowBar,
#notifPanel,#infoPanel,#nextPick,#libPalette,#signNudge,#bizCheck)>:not(.acct-fly),
#acctMenu .acct-fly>*{zoom:var(--uiz)}
.tip{font-size:calc(11.5px * var(--uiz))}
/* The minimap sits beside the text pane (right: --mm-w + 14px), an offset a
   zoom would scale too, so its box grows instead; it draws in its own 200 x 140
   units and maps the pointer from the measured box (53 minimapPoint). The two
   text panes are as wide as --mm-w, which the board's own layout reads and a
   drag on the grip sets, so their contents zoom and the grip stays put. */
:root:is(.ui-small,.ui-large) #minimap{width:calc(200px * var(--uiz)); height:calc(140px * var(--uiz))}
@media (max-width:600px){ :root:is(.ui-small,.ui-large) #minimap{width:calc(150px * var(--uiz)); height:calc(105px * var(--uiz))} }
:is(#mmPane,#mindPane)>:not(#mmGrip){zoom:var(--uiz)}
/* …and a piece that zooms itself but stands beside the pane divides the
   pane's width by the zoom, or the zoom pushes it a pane's 15% further in */
@media (min-width:821px){
  :root:is(.ui-small,.ui-large) :is(.tr,#inspector,#wkResults){right:calc(var(--mm-w, 0px) / var(--uiz) + 14px)}
}
/* A phone's top row is fitted to the pixel at Normal (the board's name gives
   way at 420px) and its buttons are already touch-sized: Large would push the
   name under the buttons on the right, so the top row stays as it is there. */
@media (max-width:600px){ :root.ui-large .hud.tl, :root.ui-large .hud.tr{zoom:1} }
/* …and a popup with a set width grows with its contents, or they overflow it */
:root:is(.ui-small,.ui-large) :is(#boards){min-width:calc(248px * var(--uiz)); max-width:calc(320px * var(--uiz))}
:root:is(.ui-small,.ui-large) :is(#acctMenu,#acctMenu .acct-fly){min-width:calc(236px * var(--uiz)); max-width:calc(300px * var(--uiz))}
:root:is(.ui-small,.ui-large) #boards.searching{width:min(calc(360px * var(--uiz)), calc(100vw - 28px)); max-width:none}
:root:is(.ui-small,.ui-large) #ctx{min-width:calc(200px * var(--uiz))}
:root:is(.ui-small,.ui-large) :is(#ctxSub,.menuSub){min-width:calc(190px * var(--uiz))}
:root:is(.ui-small,.ui-large) #cmtBox{width:calc(272px * var(--uiz))}
:root:is(.ui-small,.ui-large) #libPalette{width:min(calc(460px * var(--uiz)), calc(100% - 32px))}
:root:is(.ui-small,.ui-large) #libPalette.anchored{width:min(calc(380px * var(--uiz)), calc(100% - 16px))}
:root:is(.ui-small,.ui-large) #infoPanel{padding:calc(12px * var(--uiz)) calc(14px * var(--uiz)) calc(10px * var(--uiz))}   /* its history row bleeds into the padding */
/* …and a height (or width) capped by the window is divided by the zoom
   inside a zoomed piece, or the zoom stretches it past the window's edges */
:root:is(.ui-small,.ui-large) .pk-modal{max-height:min(640px, calc((100vh - 40px) / var(--uiz)))}
:root:is(.ui-small,.ui-large) .credits{max-height:calc(82vh / var(--uiz))}
:root:is(.ui-small,.ui-large) :is(.catch-list,.hist-list){max-height:min(calc(48vh / var(--uiz)), 420px)}
:root:is(.ui-small,.ui-large) .where-list{max-height:min(calc(30vh / var(--uiz)), 260px)}
:root:is(.ui-small,.ui-large) .lib-pal-list{max-height:min(calc(50vh / var(--uiz)), 340px)}
:root:is(.ui-small,.ui-large) .hist-prev-pic{max-height:calc(62vh / var(--uiz))}
:root:is(.ui-small,.ui-large) .hist-prev-pic > svg{max-height:calc(62vh / var(--uiz) - 18px)}
:root:is(.ui-small,.ui-large) .infra-modal{max-height:min(calc(88vh / var(--uiz)), 100%)}
:root:is(.ui-small,.ui-large) #toast{max-width:min(420px, calc(80vw / var(--uiz)))}
@media (max-width:700px){:root:is(.ui-small,.ui-large) .pk-left{max-height:calc(40vh / var(--uiz))}}
@media (max-width:600px){:root:is(.ui-small,.ui-large) :is(#mindBar.dock .mbPop,#flowBar.dock .fbPop){max-height:calc(40vh / var(--uiz))}}
:root:is(.ui-small,.ui-large) .wkPop{min-width:calc(220px * var(--uiz)); max-width:min(calc(320px * var(--uiz)), calc(100vw - 16px))}
.a11y-contrast{
  --line:#8E96A5; --line-2:#5B6270; --ink-2:#2B3038; --ink-3:#454C5A; --paper-dot:#9AA1AE;
  --accent-line:#4C2ED9;
}
:root[data-theme="dark"].a11y-contrast,
:root[data-theme="dark"] .a11y-contrast{--line:#6E7583; --line-2:#98A0AE; --ink-2:#D5D9E0; --ink-3:#B4BAC6; --paper-dot:#6E7583; --accent-line:#A78BFF}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]).a11y-contrast,
  :root:not([data-theme="light"]) .a11y-contrast{--line:#6E7583; --line-2:#98A0AE; --ink-2:#D5D9E0; --ink-3:#B4BAC6; --paper-dot:#6E7583; --accent-line:#A78BFF}
}
.a11y-contrast .panel,.a11y-contrast #boards,.a11y-contrast .menuSub,.a11y-contrast #ctx,.a11y-contrast #ctxSub,
.a11y-contrast .modal{border-color:var(--line-2)}
.a11y-contrast :focus-visible{outline-width:3px; outline-offset:3px}
.a11y-contrast #boards button:disabled,.a11y-contrast .menuSub button:disabled{opacity:.55}
.a11y-still *,.a11y-still *::before,.a11y-still *::after{transition-duration:0s !important; animation-duration:0s !important}
.a11y-still .wd-ants{animation:none !important}

/* ── view only ────────────────────────────────────────────────────────── */
#bLive[data-state="view"] .dot{background:var(--ink-3, #8b93a1)}
#bLive[data-state="lost"] .dot{background:#C4573F}
#app.viewonly #inspector{display:none}
#app.viewonly #rail .tool[disabled],
#app.viewonly #rail button[disabled]{opacity:.3; pointer-events:none}

/* ── version history ─────────────────────────────────────────────────── */
.hist-save{gap:8px; margin-bottom:14px}
.hist-save .field,.hist-meta .field{
  flex:1; min-height:0; height:34px; padding:0 10px; font-family:var(--sans);
  font-size:13px; white-space:normal;
}
.hist-list{
  list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-radius:var(--r-md); max-height:min(48vh,420px); overflow-y:auto;
}
.hist-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--line)}
.hist-row:first-child{border-top:0}
.hist-row:hover{background:var(--surface-2)}
.hist-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.hist-meta b{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hist-meta b.auto{font-weight:500; color:var(--ink-2)}
.hist-meta span{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.03em}
.hist-meta .field{height:30px; font-size:12.5px}
.hist-acts{display:flex; gap:4px; flex:none}
.hist-acts .btn{height:28px; padding:0 9px; font-size:12px; border-color:var(--line)}
.hist-empty{padding:18px 12px; text-align:center; color:var(--ink-3); font-size:12.5px}
#app.viewonly #mmGenerate{display:none}

/* ── where the boards are saved ───────────────────────────────────────────
   One truth line, then a note per thing that is true. A warning is marked
   by its left edge and a warmer ground rather than by an icon shouting at
   the top of the panel: it is read once, deliberately, by someone who came
   here to find out — not dismissed reflexively. */
.where-at{
  display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);
}
.where-at svg{width:16px; height:16px; flex:none; color:var(--ink-3)}   /* ico() draws unsized */
.where-at b{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.where-note{
  display:flex; flex-direction:column; gap:3px; padding:9px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-md);
}
.where-note b{font-size:12.5px; font-weight:600}
.where-note span{font-size:12px; color:var(--ink-2); line-height:1.5; max-width:62ch}
.where-note.warn{border-left-color:var(--accent); background:var(--accent-soft)}
.where-acts{gap:8px; flex-wrap:wrap; margin:14px 0 0}
.where-h{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:18px 0 7px;
}
.where-list{
  list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-radius:var(--r-md); max-height:min(30vh,260px); overflow-y:auto;
}
.where-row{display:flex; align-items:center; gap:10px; padding:7px 8px 7px 12px; border-top:1px solid var(--line)}
.where-row:first-child{border-top:0}
.where-row span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px}
.where-row small{color:var(--ink-3); font-size:11px; flex:none}
.where-row .btn{height:28px; padding:0 9px; font-size:12px; border-color:var(--line); flex:none}

/* ── shape library ─────────────────────────────────────────────────────
   Overlays the canvas beside the rail, the way the inspector overlays it
   on the right; the rows inside are a virtual window over the catalogue. */
#library{
  position:absolute; z-index:22; left:calc(var(--rail-r) + 6px); top:60px; bottom:60px; width:264px;
  display:none; flex-direction:column; overflow:hidden;
}
#library.on{display:flex}
.lib-top{display:flex; align-items:center; gap:6px; padding:7px 7px 7px 12px; border-bottom:1px solid var(--line)}
.lib-top h2{margin:0; flex:1; font-size:12.5px; font-weight:600; letter-spacing:-.01em}
.lib-top .btn.icon{width:26px; height:26px}
.lib-search{position:relative; margin:8px 8px 4px}
.lib-search > svg{
  position:absolute; left:9px; top:50%; width:15px; height:15px; margin-top:-7.5px;
  color:var(--ink-3); pointer-events:none;
}
.lib-q{
  width:100%; height:32px; padding:0 10px 0 30px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); outline:0; font-size:12.5px; color:var(--ink);
}
.lib-q:focus{border-color:var(--accent-line); background:var(--surface)}
.lib-q::-webkit-search-cancel-button{-webkit-appearance:none}
.lib-list{flex:1; position:relative; overflow-y:auto; overflow-x:hidden; padding-bottom:6px}
.lib-list::-webkit-scrollbar{width:8px}
.lib-list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:4px; border:2px solid var(--surface)}
.lib-spacer{position:relative; width:100%}
.lib-rows{position:absolute; left:0; right:0; top:0; will-change:transform}
.lib-row,.lib-head{
  height:34px;                                        /* = LIB_ROW_H (78): the window is arithmetic */ display:flex; align-items:center; gap:8px; padding:0 6px 0 10px;
  user-select:none; -webkit-user-select:none; white-space:nowrap;
}
.lib-head{
  cursor:pointer; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}
.lib-head:hover{color:var(--ink-2)}
.lib-head > svg{width:12px; height:12px; flex:none; transition:transform .12s}
.lib-head[aria-expanded="true"] > svg{transform:rotate(90deg)}
.lib-head b{flex:1; font-weight:500}
.lib-head i{font-style:normal; opacity:.8; font-variant-numeric:tabular-nums}
.lib-row{cursor:grab; border-radius:6px; margin:0 4px; padding-left:6px; touch-action:pan-y}
.lib-row:hover{background:var(--surface-2)}
.lib-row:active{cursor:grabbing}
.lib-pic{width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--ink-2)}
.lib-pic svg{width:20px; height:20px}
.lib-name{flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis}
/* Only the quick-insert palette carries this: it searches across packs
   with no headers, so the pack is what separates two like-named shapes.
   The library panel groups under headers and needs no such label. */
.lib-pack{font-size:11px; color:var(--ink-3)}
.lib-star{
  width:24px; height:24px; flex:none; padding:0; border:0; background:transparent; border-radius:5px;
  color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0;
}
.lib-star svg{width:14px; height:14px}
.lib-row:hover .lib-star,.lib-star[aria-pressed="true"]{opacity:1}
.lib-star:hover{background:var(--surface-3); color:var(--ink)}
.lib-star[aria-pressed="true"]{color:var(--accent)}
.lib-star[aria-pressed="true"] svg path{fill:currentColor}
.lib-empty{padding:18px 12px; text-align:center; color:var(--ink-3); font-size:12.5px; white-space:normal}
/* a pack's pin to the board (78): quiet until wanted, or until pinned */
.lib-pin{margin-left:auto; width:22px; height:22px; flex:none; display:grid; place-items:center; padding:0; border:0;
  border-radius:5px; background:transparent; color:var(--ink-3); cursor:pointer; opacity:0}
.lib-head:hover .lib-pin,.lib-pin[aria-pressed="true"],.lib-pin:focus-visible{opacity:1}
.lib-pin[aria-pressed="true"]{color:var(--accent)}
.lib-pin:hover{background:var(--surface-3); color:var(--ink)}
.lib-head.lib-all{border-top:1px solid var(--line); margin-top:4px}
/* browsing: shapes as tiles, six to a row (78 libGridRows) */
.lib-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; height:34px; padding:0 6px; box-sizing:border-box}
.lib-tile{display:grid; place-items:center; border-radius:7px; cursor:grab; color:var(--ink-2)}
.lib-tile svg{width:22px; height:22px}
.lib-tile:hover{background:var(--surface-2); color:var(--ink)}
.lib-more{display:block; width:100%; height:34px; border:0; background:transparent; color:var(--ink-3); font:inherit; font-size:12px; cursor:pointer}
.lib-more:hover{color:var(--accent)}
.lib-manage{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:34px; border:0; border-top:1px solid var(--line);
  background:transparent; color:var(--accent); font:inherit; font-size:12.5px; cursor:pointer}
.lib-manage svg{width:15px; height:15px}
.lib-head.lib-off b{color:var(--ink-3)}
/* the Shape packs dialog (78a) */
.pk-modal{width:min(820px,100%); max-height:min(640px,calc(100vh - 40px)); display:flex; flex-direction:column}
.pk-body{display:grid; grid-template-columns:230px minmax(0,1fr); gap:0; min-height:0; flex:1; border-top:1px solid var(--line); margin-top:10px}
.pk-left{overflow-y:auto; padding:10px 10px 10px 0; border-right:1px solid var(--line)}
.pk-q{width:100%; box-sizing:border-box; margin:0 0 8px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; background:var(--paper); color:inherit}
.pk-h{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:10px 4px 4px}
.pk-row{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:7px; cursor:pointer}
.pk-row:hover{background:var(--surface-2)}
.pk-row.on{background:var(--accent-soft); color:var(--accent)}
.pk-row span{flex:1; min-width:0}
.pk-row small{color:var(--ink-3); font-size:11px}
.pk-right{overflow-y:auto; padding:12px 4px 12px 18px}
.pk-top{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.pk-top h3{margin:0; font-size:16px}
.pk-top small{color:var(--ink-3)}
.pk-top .btn{margin-left:auto}
.pk-about{color:var(--ink-2); font-size:12.5px; line-height:1.5; margin:0 0 12px}
.pk-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; margin-top:10px}
.pk-tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px 8px; border:1px solid var(--line); border-radius:9px; color:var(--ink-2)}
.pk-tile svg{width:28px; height:28px}
.pk-tile span{font-size:11px; text-align:center; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.pk-x{position:absolute; top:3px; right:3px; border:0; background:transparent; color:var(--ink-3); cursor:pointer; font-size:11px}
.pk-more{color:var(--ink-3); font-size:12px; margin:10px 0 0}
@media (max-width:700px){ .pk-body{grid-template-columns:1fr} .pk-left{border-right:0; max-height:40vh} }
.lib-addpack{margin-left:auto; height:22px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface);
  color:var(--accent); font:inherit; font-size:11px; cursor:pointer}
#libGhost{
  position:fixed; z-index:90; pointer-events:none; display:flex; align-items:center; gap:7px;
  padding:5px 10px 5px 6px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:var(--shadow-md); font-size:12px; color:var(--ink); opacity:.92;
}
#libGhost.drop{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
#libGhost svg{width:20px; height:20px; flex:none}
#libPalette{
  position:fixed; z-index:75; left:50%; top:18%; transform:translateX(-50%);
  width:min(460px, calc(100% - 32px)); display:none; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
}
#libPalette.on{display:flex}
/* aimed at a spot — a double-click, a handle's Other… — it opens there, narrower */
#libPalette.anchored{transform:none; width:min(380px, calc(100% - 16px))}
#libPalette.anchored .lib-pal-q{height:40px; font-size:13.5px}
/* the next-shape strip at a handle (51-next.js) */
#nextPick{position:absolute; z-index:60; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg)}
#nextPick[hidden]{display:none}
#nextPick .np-row{display:flex; gap:3px}
#nextPick button{width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid transparent;
  border-radius:9px; background:transparent; color:var(--ink-2); cursor:pointer}
#nextPick button svg{width:24px; height:24px}
#nextPick button:hover,#nextPick button[aria-current="true"]{background:var(--surface-2); border-color:var(--line)}
#nextPick button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
#nextPick .np-other{color:var(--ink-3); border-left:1px solid var(--line); border-radius:0 9px 9px 0; margin-left:2px}
#nextPick .np-name{font-size:11px; color:var(--ink-3); max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px 1px}
#app.presenting #nextPick{display:none}
.lib-pal-q{
  height:46px; border:0; border-bottom:1px solid var(--line); padding:0 16px; background:transparent;
  outline:0; font-size:14.5px; color:var(--ink);
}
.lib-pal-list{padding:5px; max-height:min(50vh,340px); overflow-y:auto}
.lib-pal-list .lib-row{height:34px; margin:0; cursor:pointer}
.lib-pal-list .lib-row[aria-selected="true"]{background:var(--accent-soft); color:var(--accent)}
.lib-pal-list .lib-row[aria-selected="true"] .lib-pic,
.lib-pal-list .lib-row[aria-selected="true"] .lib-pack{color:var(--accent)}
.lib-pal-foot{display:flex; gap:14px; padding:7px 12px 8px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-3)}
.lib-pal-foot kbd{padding:2px 4px; font-size:9.5px; margin-right:3px}
#app.presenting #library,#app.presenting #libPalette{display:none}
@media (max-width:600px){ #library{left:50px; top:52px; bottom:52px; width:220px} }

/* ── Wave 1: lock, group, eraser, highlighter, minimap (52, 52b, 53) ── */
#stage.t-highlight{cursor:crosshair}
#stage.t-eraser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='9' fill='white' fill-opacity='.5' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E") 11 11, cell}
#stage.over-node.over-locked{cursor:default}

/* the inspector's Object row */
.w1-row{display:flex; gap:5px}
.w1-row .togglebtn{flex:1}
.w1-note{display:flex; gap:6px; align-items:flex-start; margin:0 0 6px; font-size:11.5px; line-height:1.4; color:var(--ink-3)}
.w1-note svg{flex:none; width:14px; height:14px; margin-top:1px}
.w1-badge{pointer-events:none}

/* the minimap */
#minimap{position:absolute; right:calc(var(--mm-w) + 14px); bottom:14px; z-index:19;
  width:200px; height:140px; padding:0; overflow:hidden; cursor:pointer; touch-action:none}
#minimap canvas{display:block; width:100%; height:100%}
#minimap[hidden]{display:none}
#app.presenting #minimap, #app.focusmode #minimap, #app.homeon #minimap, #app.ganttOn #minimap{display:none}
/* the panel shares the right edge with it, so a tall panel stops above it */
@media (min-width:601px){ #app:has(#minimap:not([hidden])) #inspector{max-height:calc(100% - 224px)} }
@media (max-width:600px){ #minimap{width:150px; height:105px; bottom:62px; right:8px}
  /* a docked row (the mind map's, BPMN's, an ERD's) takes the strip above the bottom bar */
  #app.mbdock #minimap{bottom:108px}
  /* …and so does the panel's sheet: above it folded, out of the way open */
  #app:has(#inspector.on.min) #minimap{bottom:108px}
  #app.mbdock:has(#inspector.on.min) #minimap{bottom:154px}
  #app:has(#inspector.on:not(.min)) #minimap{display:none} }

/* ── workshop kit (72a): timer, voting, follow, reactions, private mode ── */
#wkBar{
  position:absolute; z-index:40; top:14px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none;
  max-width:calc(100% - 32px);
}
#wkBar.wkEmpty{display:none}
/* below the top bars wherever the two of them leave no room between */
@media (max-width:1180px){ #wkBar{top:62px} }
.wkPill{
  pointer-events:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:4px 6px 4px 12px; min-height:36px; border-radius:999px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-md);
  font-size:12.5px; max-width:100%;
}
.wkPill[hidden]{display:none}
.wkPill .btn{height:28px; padding:0 9px; border-radius:999px}
.wkPill .btn.icon{width:28px; padding:0; font-size:11px}
.wkPill svg{width:16px; height:16px; color:var(--ink-2); flex:none}
.wkClock{font-family:var(--mono); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; min-width:4.2ch; text-align:center}
#wkTimer[data-state="paused"] .wkClock{color:var(--ink-3)}
#wkTimer[data-state="done"]{border-color:var(--danger)}
#wkTimer[data-state="done"] .wkClock,.wkUp{color:var(--danger); font-weight:600}
#wkTimer.zero{animation:wk-pulse .5s ease-in-out 6}
@keyframes wk-pulse{50%{transform:scale(1.06); box-shadow:0 0 0 6px rgba(208,52,44,.18)}}
.wkDot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.wkHint{color:var(--ink-3)}
.wkFollow{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.wkFollow .btn{background:rgba(255,255,255,.18); color:inherit}
.wkFollow .btn:hover{background:rgba(255,255,255,.3)}

#wkResults{
  position:absolute; z-index:42; top:62px; right:calc(var(--mm-w, 0px) + 14px); width:300px; max-height:calc(100% - 140px);
  display:flex; flex-direction:column; gap:8px; padding:10px; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  font-size:12.5px; color:var(--ink);
}
#wkResults[hidden]{display:none}
.wkHead{display:flex; align-items:center; gap:8px}
.wkHead b{font-size:13px}
.wkHead span{color:var(--ink-3)}
.wkHead .btn{margin-left:auto}
.wkRank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.wkRank button{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 7px; border:0; border-radius:var(--r-sm);
  background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit;
}
.wkRank button:hover{background:var(--surface-2)}
.wkPos{width:20px; height:20px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; flex:none}
.wkRank li:first-child .wkPos{background:var(--accent); color:var(--accent-ink)}
.wkLbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wkLbl i{display:block; font-style:normal; color:var(--ink-3); font-size:11px; overflow:hidden; text-overflow:ellipsis}
.wkRank b{font-family:var(--mono); font-size:13px}
.wkEmpty{color:var(--ink-3); margin:4px 0}
.wkRow{display:flex; align-items:center; gap:6px; flex-wrap:wrap}

.wkPop{
  position:fixed; z-index:70; min-width:220px; max-width:min(320px, calc(100vw - 16px)); padding:6px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); font-size:12.5px;
}
.wkPop[hidden]{display:none}
.wkPop.wkForm{padding:10px; display:flex; flex-direction:column; gap:9px}
.wkPop [role="menu"] button{
  display:flex; width:100%; align-items:center; gap:9px; height:29px; padding:0 9px;
  border:0; background:transparent; border-radius:5px; cursor:pointer; font-size:12.5px; text-align:left; color:var(--ink);
}
.wkPop [role="menu"] button:hover{background:var(--surface-2)}
.wkPop [role="menu"] button:disabled{opacity:.4; cursor:default; background:transparent}
.wkPop [role="menu"] svg{width:15px; height:15px; color:var(--ink-2); flex:none}
.wkPop hr{border:0; border-top:1px solid var(--line); margin:5px 3px}
.wkPop.wkMenu .wkHead{padding:4px 9px 2px}
.wkPresets{display:grid; grid-template-columns:repeat(4, 1fr); gap:4px}
.wkPresets .btn{border:1px solid var(--line); padding:0 4px}
.wkField{display:flex; flex-direction:column; gap:4px; color:var(--ink-2)}
.wkField input,.wkField select,.wkRow input{
  height:30px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font:inherit;
}
.wkRow input{width:64px}
.wkRow label{display:flex; align-items:center; gap:6px; color:var(--ink-2)}
.wkRadio,.wkCheck{display:flex; align-items:center; gap:7px; color:var(--ink); cursor:pointer}
.wkRadio.off{opacity:.45; cursor:default}
.wkEmoji{display:flex; gap:2px}
.wkEmoji .btn{width:38px; height:38px; padding:0; font-size:20px}

#wkHud .btn svg{width:16px; height:16px}

#wkFloat{position:absolute; inset:0; z-index:58; pointer-events:none; overflow:hidden}
.wkRx{
  position:absolute; bottom:-8px; display:flex; flex-direction:column; align-items:center; gap:2px;
  animation:wk-rise 2.6s cubic-bezier(.22,.7,.36,1) forwards;
}
.wkRx .e{font-size:34px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.wkRx .n{font-size:10.5px; font-weight:500; padding:1px 7px; border-radius:999px; background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-sm); white-space:nowrap}
@keyframes wk-rise{
  0%{transform:translateY(0) scale(.6); opacity:0}
  12%{transform:translateY(-40px) scale(1); opacity:1}
  80%{opacity:1}
  100%{transform:translateY(-62vh) scale(1.05); opacity:0}
}
@keyframes wk-fade{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .wkRx{bottom:72px; animation:wk-fade 2.6s linear forwards !important; animation-duration:2.6s !important}
  #wkTimer.zero{animation:none}
}
/* the app's own Reduce motion switch (61-prefs) zeroes every animation; a reaction still has to be seen */
#app.a11y-still .wkRx{bottom:72px; animation:wk-fade 2.6s linear forwards !important; animation-duration:2.6s !important}
#app.a11y-still #wkTimer.zero{animation:none !important}

.wkCmtRx{display:flex; flex-wrap:wrap; gap:4px}
.wkRxBtn{
  display:inline-flex; align-items:center; gap:3px; height:26px; padding:0 7px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font-size:13px;
}
.wkRxBtn b{font-size:11px; font-weight:600; font-family:var(--mono)}
.wkRxBtn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
.face[data-peer]{cursor:pointer}
.face[data-peer]:hover{transform:translateY(-1px); box-shadow:0 0 0 2px var(--accent-line)}
@media (max-width:600px){
  #wkBar{top:62px}                              /* below the top bars, which fill a phone's width */
  #wkHud .lbl{display:none}
  #wkResults{left:16px; right:16px; width:auto; top:auto; bottom:64px; max-height:50%}
  .wkHint{display:none}
}

/* ── rich objects: embeds, tables, charts, code, formulas (41-43, 64f, 79f, 79u; docs/OBJECTS.md) ── */
/* The live embed layer: over the canvas, under every panel and the text editor.
   It lets the pointer through until an embed is switched on. */
#embedLayer{position:absolute; inset:0; z-index:14; pointer-events:none; overflow:hidden}
#embedLayer .emb{
  position:absolute; left:0; top:0; transform-origin:0 0; border-radius:6px; overflow:hidden;
  background:var(--surface-2); pointer-events:none;
}
#embedLayer .emb iframe{display:block; width:100%; height:100%; border:0; pointer-events:none}
#embedLayer .emb.on{pointer-events:auto; box-shadow:0 0 0 2px var(--accent)}
#embedLayer .emb.on iframe{pointer-events:auto}
#app.homeon #embedLayer{visibility:hidden}

/* the panel's sections for an object */
.obj-in{
  width:100%; height:28px; box-sizing:border-box; padding:0 8px; margin-bottom:5px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  color:var(--ink); font:inherit; font-size:12px;
}
.obj-in:focus{outline:2px solid var(--accent); outline-offset:-1px; background:var(--surface)}
.obj-note{margin:2px 0 6px; font-size:11px; color:var(--ink-3); line-height:1.35; overflow-wrap:anywhere}
.obj-btns{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:5px}
.obj-btns button{
  height:28px; border:1px solid var(--line); background:var(--surface); border-radius:5px;
  cursor:pointer; color:var(--ink-2); font-size:11.5px; font-weight:500;
}
.obj-btns button:hover:not(:disabled){background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.obj-btns button:disabled{opacity:.38; cursor:default}
.obj-sub{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:8px 0 5px}
.obj-sw{display:grid; grid-template-columns:repeat(9,1fr); gap:4px; margin-bottom:5px}
.obj-sw .sw.none{background:linear-gradient(135deg, transparent 45%, var(--danger) 47%, var(--danger) 53%, transparent 55%), var(--surface)}
.togglebtn + .togglebtn{margin-top:5px}
/* the chart's data, as a small grid of fields */
.ch-wrap{max-height:220px; overflow:auto; margin-bottom:5px; border:1px solid var(--line); border-radius:var(--r-sm)}
.ch-grid{border-collapse:collapse; width:100%; font-size:11.5px}
.ch-grid td,.ch-grid th{padding:0; border:1px solid var(--line)}
.ch-grid input{
  width:100%; min-width:46px; height:24px; box-sizing:border-box; border:0; padding:0 5px;
  background:transparent; color:var(--ink); font:inherit;
}
.ch-grid th input{font-weight:600; background:var(--surface-2)}
.ch-grid td:first-child input{font-weight:500}
.ch-grid input:focus{outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface)}
.ch-grid input:disabled{color:var(--ink-2)}
/* a formula's LaTeX source, and what is wrong with it */
.obj-in.src-tex{height:auto; min-height:58px; padding:6px 8px; resize:vertical; font-family:var(--mono); font-size:12px; line-height:1.45; white-space:pre-wrap}
.obj-note.src-err{color:var(--danger)}

/* the spreadsheet import dialog */
.csv-modal{width:min(560px,100%)}
.csv-modes{margin:0 0 10px}
.csv-modes button{height:30px; font-size:12.5px}
.csv-chk{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); margin:0 0 10px}
.csv-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:12px}
.csv-opt{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--ink-2)}
.csv-opt select{height:30px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px; padding:0 6px}
.csv-prev{max-height:180px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:14px}
.csv-prev table{border-collapse:collapse; font-size:11.5px; width:100%}
.csv-prev td{padding:4px 7px; border-bottom:1px solid var(--line); white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2)}
.csv-prev tr.h td{font-weight:600; color:var(--ink); background:var(--surface-2)}
.csv-acts{display:flex; justify-content:flex-end; gap:8px}
.csv-acts .btn{height:32px; padding:0 14px}
.emb-modal{width:min(480px,100%)}
.emb-modal .obj-in{height:34px; font-size:13px; margin:4px 0 12px}
.emb-modal .obj-note{margin-bottom:14px}

/* the stamp picker (41e-stamps.js): four across, one glyph a button */
#stampPick{
  position:absolute; z-index:66; display:none; padding:6px; gap:2px;
  grid-template-columns:repeat(4,40px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
}
#stampPick.on{display:grid}
#stampPick button{
  width:40px; height:40px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
#stampPick button:hover{background:var(--surface-2)}
#stampPick button:focus-visible{background:var(--surface-2); outline:2px solid var(--accent); outline-offset:-2px}
#app.homeon #stampPick{display:none}

/* ── More tools (79v): the panel the rail's ⋯ opens, beside the rail ── */
#morePanel{position:absolute; z-index:30; left:calc(var(--rail-r) + 8px); top:60px; width:300px;
  display:none; flex-direction:column; max-height:calc(100% - 120px); padding:10px 10px 8px}
#morePanel.on{display:flex}
#morePanel .mt-find{display:flex; align-items:center; gap:7px; height:34px; padding:0 10px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-3)}
#morePanel .mt-find:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
#morePanel .mt-find svg{width:15px; height:15px; flex:none}
#morePanel .mt-find input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:13px; color:var(--ink)}
#morePanel .mt-body{overflow-y:auto; scrollbar-width:thin; margin:0 -4px; padding:0 4px}
#morePanel .mt-h{font-size:11.5px; color:var(--ink-3); margin:8px 2px 4px}
#morePanel .mt-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:3px}
#morePanel .mt-tile{position:relative}
#morePanel .mt-go{width:100%; min-height:62px; padding:8px 2px 6px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink); font-size:11.5px; line-height:1.2; text-align:center}
#morePanel .mt-go svg{width:20px; height:20px; color:var(--ink-2)}
#morePanel .mt-go:hover, #morePanel .mt-go.first{background:var(--surface-2)}
#morePanel .mt-go[disabled]{opacity:.4; cursor:default; background:transparent}
#morePanel .mt-pin{position:absolute; top:2px; right:2px; width:20px; height:20px; padding:0; border:0; border-radius:5px;
  background:transparent; color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0}
#morePanel .mt-pin svg{width:13px; height:13px}
#morePanel .mt-tile:hover .mt-pin, #morePanel .mt-pin:focus-visible, #morePanel .mt-pin[aria-pressed="true"]{opacity:1}
@media (hover:none){ #morePanel .mt-pin{opacity:.7} }   /* no hover on a touch screen: the pins always show */
#morePanel .mt-pin:hover{background:var(--surface-3); color:var(--ink)}
#morePanel .mt-pin[aria-pressed="true"]{color:var(--accent)}
#morePanel .mt-none{font-size:12px; color:var(--ink-3); padding:14px 4px; text-align:center}
#morePanel .mt-foot{border-top:1px solid var(--line); margin-top:8px; padding-top:7px; font-size:11.5px; color:var(--ink-3)}
#app.homeon #morePanel, #app.presenting #morePanel, #app.focusmode #morePanel{display:none}
/* the pinned tools sit in the rail's grid as if they were its own buttons */
#railPins{display:contents}
@media (max-width:600px){
  #morePanel{left:8px; right:8px; top:auto; bottom:58px; width:auto; max-height:60%}
}

/* ── docs (80-docs.js, 80a-docs-edit.js) ───────────────────────────────
   A doc replaces the canvas with a page; the top bars stay above it. */
#docView{position:absolute; inset:0; z-index:12; background:var(--paper); color:var(--ink)}
#docView[hidden]{display:none}
#app.docon #stage, #app.docon #editor, #app.docon #rail, #app.docon #inspector, #app.docon #library,
#app.docon .hud.bl, #app.docon #mmPane, #app.docon #mindBar, #app.docon #mindPane, #app.docon #ganttPane,
#app.docon #focusDock, #app.docon #focusBar, #app.docon #presBar, #app.docon #cmtBox, #app.docon #bMermaid, #app.docon #minimap{display:none !important}
#app.docon .hud.tr{right:14px}
#docView .doc-scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:84px 24px 120px; container-type:inline-size}
#docView .doc-page{max-width:760px; margin:0 auto; min-height:calc(100% - 40px); font-size:16px; line-height:1.65; cursor:text}
#docView .doc-title{display:block; width:100%; border:0; outline:0; background:none; padding:0 0 0 34px; margin:0 0 18px;
  font:700 34px/1.2 var(--sans); letter-spacing:-.02em; color:var(--ink)}
#docView .doc-title::placeholder{color:var(--ink-3)}
#docView .doc-blocks{display:flex; flex-direction:column}
#docView .doc-b{position:relative; display:flex; align-items:flex-start; gap:6px; padding:2px 0 2px calc(34px + var(--ind, 0) * 26px); border-radius:6px}
#docView .doc-b.flash{animation:doc-flash 1.4s ease-out}
@keyframes doc-flash{from{background:var(--accent-soft)}to{background:transparent}}
#docView .doc-handle{position:absolute; left:calc(var(--ind, 0) * 26px + 4px); top:5px; width:22px; height:24px; padding:0; border:0; border-radius:4px;
  background:none; color:var(--ink-3); font:12px/1 var(--mono); letter-spacing:-2px; cursor:grab; opacity:0}
#docView .doc-b:hover > .doc-handle, #docView .doc-handle:focus-visible{opacity:1}
#docView .doc-handle:hover{background:var(--surface-3); color:var(--ink)}
#docView .doc-t{flex:1; min-width:0; min-height:1.65em; outline:0; white-space:pre-wrap; overflow-wrap:anywhere; padding:1px 2px}
#docView .doc-t:empty::before{content:attr(data-ph); color:var(--ink-3); pointer-events:none}
#docView .doc-b:not(:focus-within) .doc-t:empty::before{content:''}
#docView .doc-b.doc-p:only-child .doc-t:empty::before{content:attr(data-ph)}
#docView .doc-t[data-raw="1"]{background:color-mix(in srgb, var(--accent-soft) 35%, transparent); border-radius:4px}
#docView .doc-h1 .doc-t{font-size:28px; font-weight:700; line-height:1.3; margin-top:18px; letter-spacing:-.015em}
#docView .doc-h2 .doc-t{font-size:22px; font-weight:650; line-height:1.35; margin-top:14px}
#docView .doc-h3 .doc-t{font-size:18px; font-weight:600; line-height:1.4; margin-top:10px}
#docView .doc-h1 .doc-handle{top:24px} #docView .doc-h2 .doc-handle{top:18px} #docView .doc-h3 .doc-handle{top:12px}
#docView .doc-li .doc-t, #docView .doc-oli .doc-t{margin-left:22px}
#docView .doc-li::before, #docView .doc-oli::before{position:absolute; left:calc(34px + var(--ind, 0) * 26px); top:3px; width:20px; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums}
#docView .doc-li::before{content:'\2022'}
#docView .doc-oli::before{content:attr(data-n)}
#docView .doc-check{width:16px; height:16px; margin:5px 4px 0 0; flex:none; accent-color:var(--accent); cursor:pointer}
#docView .doc-todo.done .doc-t{color:var(--ink-3); text-decoration:line-through}
#docView .doc-quote .doc-t{border-left:3px solid var(--line-2); padding-left:14px; color:var(--ink-2); font-style:italic}
#docView .doc-code .doc-t{font:13.5px/1.6 var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; tab-size:2}
#docView .doc-hr .doc-x{flex:1; padding:10px 0}
#docView .doc-hr hr{border:0; border-top:1px solid var(--line-2); margin:0}
#docView .doc-b[tabindex="0"]:focus{outline:2px solid var(--accent-line); outline-offset:1px}
#docView .doc-t code, .hm-doc code{font:.88em var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 4px}
#docView .doc-t a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
#docView .doc-t a.doc-blink{text-decoration:none; background:var(--accent-soft); border-radius:4px; padding:0 4px}
#docView .doc-badlink{text-decoration:underline dotted; color:var(--ink-2)}
#docView .doc-x{flex:1; min-width:0}
#docView .doc-card{display:flex; align-items:stretch; gap:0; width:100%; max-width:520px; margin:4px 0; padding:0; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; color:var(--ink); overflow:hidden; font:inherit}
#docView .doc-card:hover{border-color:var(--accent-line)}
#docView .doc-card-pic{width:180px; height:108px; flex:none; display:grid; place-items:center; padding:8px; background:var(--paper); border-right:1px solid var(--line); overflow:hidden}
#docView .doc-card-pic svg{width:100%; height:100%}
#docView .doc-card-ph{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:20px}
#docView .doc-card-m{display:flex; flex-direction:column; justify-content:center; gap:3px; padding:12px 16px; min-width:0}
#docView .doc-card-m b{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#docView .doc-card-m small{color:var(--ink-3); font-size:12px}
#docView .doc-fig{flex:1; margin:6px 0; display:flex; flex-direction:column; gap:4px}
#docView .doc-fig img{max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); align-self:flex-start}
#docView .doc-image.loading img{min-height:80px; min-width:160px}
#docView .doc-fig .doc-t{font-size:13px; color:var(--ink-2); min-height:1.4em}
#docView .doc-b.dragging{opacity:.45}
#docView .doc-b.drop-b{box-shadow:inset 0 2px 0 var(--accent)}
#docView .doc-b.drop-a{box-shadow:inset 0 -2px 0 var(--accent)}
#docView .doc-add{display:block; margin:8px 0 0 34px; padding:6px 2px; border:0; background:none; color:var(--ink-3); font:inherit; font-size:14px; cursor:text; text-align:left}
#docView .doc-add:hover{color:var(--ink-2)}
#docView.ro .doc-add{display:none}
#docView .doc-back{margin:48px 0 0 34px; padding-top:14px; border-top:1px solid var(--line)}
#docView .doc-back:empty{display:none}
#docView .doc-back h4{margin:0 0 8px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
#docView .doc-backlink{display:inline-flex; align-items:center; gap:6px; margin:0 6px 6px 0; padding:5px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px; cursor:pointer}
#docView .doc-backlink:hover{border-color:var(--accent-line)}
#docView .doc-backlink svg{width:14px; height:14px; color:var(--ink-2)}
.doc-pop{position:fixed; z-index:66; width:300px; max-height:320px; overflow-y:auto; padding:5px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:13px; color:var(--ink)}
.doc-pop:focus{outline:0}
.doc-pop-q{width:100%; margin:0 0 4px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit}
.doc-pop button{display:flex; width:100%; align-items:center; gap:9px; min-height:30px; padding:0 9px; border:0; border-radius:5px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.doc-pop button span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-pop button small{color:var(--ink-3); font-family:var(--mono); font-size:10.5px}
.doc-pop button svg{width:15px; height:15px; flex:none; color:var(--ink-2)}
.doc-pop button.on, .doc-pop button:hover{background:var(--surface-2)}
.doc-pop-none{margin:6px 9px; color:var(--ink-3)}
/* the Notes round's blocks and the page (80c-docs-blocks.js): code colours and
   language, equations, diagrams, columns, sketches, icon, cover, width, a board beside */
#docView .doc-code{position:relative}
#docView .doc-lang{position:absolute; top:6px; right:38px; z-index:1; max-width:130px; height:22px; padding:0 4px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink-2); font:11.5px var(--sans); opacity:0; transition:opacity .12s}
#docView span.doc-lang{border:0; background:none; height:auto; top:8px; opacity:.75}
#docView .doc-code:hover > .doc-lang, #docView .doc-code:focus-within > .doc-lang, #docView .doc-lang:focus{opacity:1}
#docView .doc-code > .doc-t{padding-right:44px}
.tk-kw{color:#7048e8} .tk-lit, .tk-num{color:#c2410c} .tk-str{color:#2b8a3e} .tk-com{color:var(--ink-3); font-style:italic} .tk-key, .tk-var{color:#1971c2} .tk-fn{color:#0c8599}
.dark .tk-kw, [data-theme=dark] .tk-kw{color:#c9a2ff} .dark .tk-lit, .dark .tk-num, [data-theme=dark] .tk-lit, [data-theme=dark] .tk-num{color:#f2b279}
.dark .tk-str, [data-theme=dark] .tk-str{color:#a3d99b} .dark .tk-key, .dark .tk-var, [data-theme=dark] .tk-key, [data-theme=dark] .tk-var{color:#8cc2ff} .dark .tk-fn, [data-theme=dark] .tk-fn{color:#7fd4e8}
#docView .doc-math, #docView .doc-mermaid{flex-wrap:wrap}
#docView .doc-math > .doc-t, #docView .doc-mermaid > .doc-t{font:13.5px/1.6 var(--mono); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 12px; tab-size:2}
#docView .doc-math > .doc-t:not([data-raw="1"]), #docView .doc-mermaid > .doc-t:not([data-raw="1"]){display:none}
#docView .doc-pv{flex:1 1 100%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px 0; overflow-x:auto; cursor:pointer}
#docView.ro .doc-pv{cursor:default}
#docView .doc-math > .doc-pv svg{max-width:100%; height:auto; color:var(--ink)}
#docView .doc-mermaid > .doc-pv{border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--paper)}
#docView .doc-mermaid > .doc-pv svg{width:100%; height:auto; max-height:520px}
#docView .doc-pv-ph{color:var(--ink-3); font-size:14px}
#docView .doc-pv-err{align-self:flex-start; color:var(--danger, #d33); font:12px var(--mono)}
#docView .doc-pv-old{opacity:.35; width:100%}
.doc-math{display:inline-block; position:relative; line-height:1}
.doc-math img{display:inline-block}
.doc-math-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.doc-math-bad{font-family:var(--mono); font-size:.9em; color:var(--danger, #d33)}
#docView .doc-cols > .doc-x{position:relative}
#docView .doc-cols-g{display:grid; grid-template-columns:repeat(var(--ncol, 2), minmax(0, 1fr)); gap:18px; padding:4px 0}
#docView .doc-col{display:flex; flex-direction:column; min-width:0; padding:2px 0; border-radius:8px; border:1px dashed transparent}
#docView .doc-cols:hover > .doc-x > .doc-cols-g > .doc-col{border-color:var(--line)}
#docView .doc-col > .doc-b{padding-left:calc(26px + var(--ind, 0) * 22px)}
#docView .doc-col > .doc-b > .doc-handle{left:calc(var(--ind, 0) * 22px)}
#docView .doc-col > .doc-li::before, #docView .doc-col > .doc-oli::before{left:calc(26px + var(--ind, 0) * 22px)}
#docView .doc-col-add{align-self:flex-start; margin:2px 0 0 26px; padding:2px 6px; border:0; background:none; color:var(--ink-3); font:inherit; font-size:12.5px; cursor:text; opacity:0}
#docView .doc-col:hover > .doc-col-add, #docView .doc-col > .doc-col-add:only-child{opacity:1}
#docView .doc-colsbar{position:absolute; right:0; top:-22px; display:flex; gap:2px; opacity:0; transition:opacity .12s}
#docView .doc-cols:hover > .doc-x > .doc-colsbar{opacity:1}
#docView .doc-colsbar button{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:6px; font:11.5px var(--sans); padding:1px 7px; cursor:pointer}
#docView .doc-colsbar button.on{border-color:var(--accent); color:var(--accent)}
@container (max-width:560px){ #docView .doc-cols-g{grid-template-columns:1fr} }
#docView .doc-sketch > .doc-x{display:flex; flex-direction:column; gap:4px; max-width:760px}
#docView .doc-sk{width:100%; height:auto; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); touch-action:none}
#docView .doc-sk.can{cursor:crosshair}
#docView .doc-sk.erase{cursor:cell}
#docView .doc-sk-tools{display:flex; flex-wrap:wrap; align-items:center; gap:3px; opacity:.45; transition:opacity .12s}
#docView .doc-sketch:hover .doc-sk-tools, #docView .doc-sk-tools:focus-within{opacity:1}
#docView .doc-sk-tools button{min-width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink-2); font:12px var(--sans); cursor:pointer; padding:0 6px}
#docView .doc-sk-tools button.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
#docView .doc-sk-c{width:26px; padding:0 !important}
#docView .doc-sk-c::after{content:''; display:block; width:14px; height:14px; margin:auto; border-radius:50%; background:var(--c)}
#docView .doc-sk-w i{display:block; width:16px; height:var(--w); margin:auto; border-radius:4px; background:var(--ink-2)}
#docView .doc-sk-grow{height:8px; margin-top:-6px; border-radius:0 0 8px 8px; cursor:ns-resize; touch-action:none}
#docView .doc-sk-grow:hover{background:var(--accent-soft)}
#docView .doc-sk-none{margin:0; color:var(--ink-3); font-size:13px}
#docView .doc-cover{position:relative; height:200px; margin:-84px -24px 18px; background-size:cover}
#docView.wide .doc-cover{margin-left:0; margin-right:0}
#docView .doc-cover-acts{position:absolute; right:14px; bottom:10px; display:none; gap:6px}
#docView .doc-cover.can:hover .doc-cover-acts{display:flex}
#docView .doc-cover-acts button, #docView .doc-pagebar button{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:6px; font:12px var(--sans); padding:3px 9px; cursor:pointer}
#docView .doc-pagehead{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding-left:34px; min-height:26px}
#docView .doc-icon{border:0; background:none; padding:0; font-size:56px; line-height:1.1; cursor:pointer}
#docView.hascover .doc-icon{margin-top:-52px}
#docView .doc-icon:disabled{cursor:default}
#docView .doc-pagebar{display:flex; gap:6px; opacity:0; transition:opacity .12s}
#docView .doc-pagehead:hover .doc-pagebar, #docView .doc-page:has(.doc-title:hover) .doc-pagebar, #docView .doc-pagebar:focus-within{opacity:1}
#docView.wide .doc-page{max-width:none}
.doc-pgpop{width:320px}
.doc-pg-grid{display:grid; grid-template-columns:repeat(8, 1fr); gap:2px}
.doc-pop .doc-pg-grid button{justify-content:center; padding:0; min-height:34px; font-size:20px}
.doc-pg-covers{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:6px}
.doc-pop .doc-pg-covers button{height:44px; border-radius:8px; border:1px solid var(--line)}
.doc-pop .doc-pg-rm{color:var(--ink-3)}
#docView.besideon .doc-scroll{right:50%}
#docView .doc-beside{position:absolute; top:60px; right:0; bottom:0; width:50%; z-index:4; display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--surface)}
#docView .doc-beside header{display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--line)}
#docView .doc-beside header span{flex:1; font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#docView .doc-beside iframe{flex:1; width:100%; border:0; background:var(--paper)}
@media (max-width:900px){ #docView.besideon .doc-scroll{right:0; bottom:55%} #docView .doc-beside{top:45%; width:auto; left:0; border-left:0; border-top:1px solid var(--line)} }
/* comments and presence on a doc (80b-docs-social.js) */
/* the gutter and the peer chips sit inside the row while the page is narrow
   (a phone, or the comments column open), outside it when there is room */
#docView .doc-b{padding-right:30px}
#docView .doc-side{position:absolute; right:0; top:3px; display:flex; flex-direction:column; align-items:center; gap:3px}
#docView .doc-h1 .doc-side{top:22px} #docView .doc-h2 .doc-side{top:16px} #docView .doc-h3 .doc-side{top:10px}
#docView .doc-cbtn, #docView .doc-cnt{display:grid; place-items:center; width:26px; height:24px; padding:0; border:0; border-radius:6px; font:600 11px/1 var(--sans); cursor:pointer}
#docView .doc-cbtn{background:none; color:var(--ink-3); opacity:0}
#docView .doc-cbtn svg{width:16px; height:16px}
#docView .doc-b:hover > .doc-side .doc-cbtn, #docView .doc-b:focus-within > .doc-side .doc-cbtn{opacity:1}
#docView .doc-cbtn:hover{background:var(--surface-3); color:var(--ink)}
#docView .doc-cnt{min-width:22px; width:auto; height:20px; padding:0 6px; border-radius:10px 10px 10px 3px; background:var(--accent); color:var(--accent-ink, #fff)}
#docView .doc-cnt + .doc-cbtn{display:none}
#docView .doc-b:hover > .doc-side .doc-cnt + .doc-cbtn{display:grid}
#docView .doc-b.cmt-lit{background:color-mix(in srgb, var(--accent-soft) 70%, transparent)}
#docView .doc-peerbar{position:absolute; left:calc(var(--ind, 0) * 26px + 28px); top:2px; bottom:2px; width:3px; border-radius:2px; pointer-events:none}
#docView .doc-peers{position:absolute; left:calc(var(--ind, 0) * 26px + 34px); top:-9px; z-index:1; display:flex; gap:2px; pointer-events:none}
#docView .doc-peer{display:block; max-width:140px; padding:1px 6px; border-radius:9px; color:#fff; font:500 10px/1.35 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@container (min-width:860px){
  #docView .doc-b{padding-right:0}
  #docView .doc-side{right:-40px}
  #docView .doc-peers{left:auto; right:100%; top:4px; margin-right:10px; flex-direction:column; align-items:flex-end}
  #docView .doc-peer{font-size:11px; padding:2px 7px}
}
#docView .doc-cmt-tg{position:absolute; top:76px; right:18px; z-index:2; display:flex; align-items:center; gap:6px; height:32px; padding:0 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-sm); font:500 13px var(--sans); cursor:pointer}
#docView .doc-cmt-tg:hover{color:var(--ink); border-color:var(--accent-line)}
#docView .doc-cmt-tg svg{width:16px; height:16px}
#docView .doc-cmt-tg b{font-weight:600; color:var(--accent)}
#docView .doc-cmt-tg b:empty{display:none}
#docView .doc-cmts{position:absolute; top:72px; right:12px; bottom:12px; width:320px; z-index:3; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg, 14px); box-shadow:var(--shadow-md); font-size:13px; color:var(--ink)}
#docView .doc-cmts[hidden]{display:none}
#docView .doc-cmts header{display:flex; align-items:center; gap:8px; padding:10px 10px 8px 14px; border-bottom:1px solid var(--line)}
#docView .doc-cmts header b{font-size:14px}
#docView .doc-cmts-n{flex:1; color:var(--ink-3); font-size:12px}
#docView .doc-cmts-l{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:10px}
#docView .doc-cmts-empty{margin:8px 4px; color:var(--ink-3); line-height:1.5}
#docView .doc-cg{margin:0 0 14px}
#docView .doc-cg h5{margin:4px 2px 8px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
#docView .doc-cg-q{display:block; width:100%; margin:0 0 6px; padding:2px 8px; border:0; border-left:3px solid var(--line-2); background:none; color:var(--ink-2);
  font:inherit; font-size:12px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
#docView .doc-cg.on .doc-cg-q, #docView .doc-cg-q:hover{border-left-color:var(--accent); color:var(--ink)}
#docView .doc-th, #docView .doc-cmt-new{position:relative; display:flex; flex-direction:column; gap:6px; margin:0 0 8px; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); cursor:pointer}
#docView .doc-cmt-new{cursor:default; border-color:var(--accent-line)}
#docView .doc-th.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
#docView .doc-th.done{opacity:.62}
#docView .doc-th-t{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45}
#docView .doc-at{color:var(--accent); font-weight:500}
#docView .doc-th-r{padding:6px 0 0 10px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:2px}
#docView .doc-th-x{border:0; background:none; color:var(--ink-3); cursor:pointer; padding:0 2px; font-size:11px}
#docView .doc-th-x:hover{color:var(--danger, #d33)}
#docView .doc-ta{width:100%; min-height:30px; resize:vertical; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; cursor:text}
#docView .doc-ta:focus{outline:2px solid var(--accent-line); outline-offset:0; background:var(--surface)}
#docView .doc-th-acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
#docView .doc-th-acts:empty{display:none}
#docView .doc-th-acts .btn{font-size:12px; padding:3px 9px; height:auto; min-height:26px}
#docView .doc-cmts-done{display:block; margin:4px auto 0; border:0; background:none; color:var(--ink-3); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
@media (min-width:901px){ #docView.cmts .doc-scroll{right:336px} }
@media (min-width:601px) and (max-width:900px){ #docView .doc-cmts{box-shadow:var(--shadow-lg)} }
/* Home: a doc's card is a page, not a drawing */
#home .hm-thumb .hm-doc, #home .hm-tpl-pic .hm-doc, #tmplModal .tmpl-th .hm-doc{display:flex; flex-direction:column; gap:3px; align-self:stretch; justify-self:stretch; width:100%; height:100%; padding:10px 14px;
  overflow:hidden; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-sm)}
#home .hm-tpl-pic .hm-doc, #tmplModal .tmpl-th .hm-doc{padding:6px 10px; gap:1px}
.hm-doc > *{flex:none}
.hm-doc b{font-size:12.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px}
.hm-doc i{font-style:normal; font-size:10.5px; line-height:1.35; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hm-doc i.hm-doc-h1, .hm-doc i.hm-doc-h2, .hm-doc i.hm-doc-h3{font-weight:600; color:var(--ink)}
.hm-doc i.hm-doc-empty{color:var(--ink-3)}
#docView .doc-card-pic .hm-doc{display:flex; flex-direction:column; gap:2px; width:100%; height:100%; padding:6px 10px; overflow:hidden; background:var(--surface); border-radius:6px}
#home .hm-kind{display:inline-flex; vertical-align:-2px; margin-right:4px; color:var(--accent)}
#home .hm-kind svg{width:14px; height:14px}
@media (max-width:600px){
  #docView .doc-scroll{padding:70px 14px 100px}
  #docView .doc-page{font-size:15.5px}
  #docView .doc-title{font-size:26px; padding-left:24px}
  #docView .doc-b{padding-left:calc(24px + var(--ind, 0) * 18px)}
  #docView .doc-handle{left:calc(var(--ind, 0) * 18px); opacity:.5}
  #docView .doc-li::before, #docView .doc-oli::before{left:calc(24px + var(--ind, 0) * 18px)}
  #docView .doc-add, #docView .doc-back{margin-left:24px}
  #docView .doc-card-pic{width:110px; height:84px}
  .doc-pop{width:calc(100vw - 16px); max-width:300px}
  #docView .doc-peerbar{left:calc(var(--ind, 0) * 18px + 20px)}
  #docView .doc-peers{left:calc(var(--ind, 0) * 18px + 24px)}
  #docView .doc-cmt-tg{top:auto; bottom:18px; right:16px; height:40px; box-shadow:var(--shadow-md)}
  #docView .doc-cmts{top:auto; left:0; right:0; bottom:0; width:auto; max-height:62vh; border-radius:14px 14px 0 0; border-bottom:0}
  #docView.cmts .doc-scroll{padding-bottom:64vh}
}
/* ── databases (80g-docs-db.js): the block, the table, the pickers ── */
#docView .doc-db > .doc-x{min-width:0}
#docView .db{display:flex; flex-direction:column; gap:4px; min-width:0; margin:4px 0}
#docView .db-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#docView .db-name{flex:0 1 auto; min-width:120px; border:0; outline:0; background:none; padding:2px 0; font:700 19px/1.3 var(--sans); color:var(--ink)}
#docView .db-name::placeholder{color:var(--ink-3)}
#docView .db-views{display:flex; gap:2px}
#docView .db-vt{border:0; background:none; color:var(--ink-2); font:inherit; font-size:13px; padding:3px 8px; border-radius:6px; cursor:pointer}
#docView .db-vt.on{background:var(--surface-2); color:var(--ink); font-weight:600}
#docView .db-sp{flex:1}
#docView .db-more{border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; padding:2px 8px; border-radius:6px; cursor:pointer}
#docView .db-more:hover, #docView .db-vt:hover{background:var(--surface-2)}
#docView .db-body{overflow-x:auto; max-width:100%}
#docView .db-tbl{border-collapse:collapse; table-layout:fixed; font-size:14px; line-height:1.4}
#docView .db-tbl th, #docView .db-tbl td{border:1px solid var(--line); padding:0; text-align:left; vertical-align:top; overflow:hidden}
#docView .db-tbl tr > :first-child{border-left:0}
#docView .db-tbl th{position:relative; overflow:visible; font-weight:500; color:var(--ink-2); background:var(--paper)}
#docView .db-ph{display:flex; align-items:center; gap:6px; width:100%; border:0; background:none; color:inherit; font:inherit; padding:6px 8px; cursor:pointer; white-space:nowrap; overflow:hidden}
#docView .db-ph:hover{background:var(--surface-2)}
#docView .db-ph i{font-style:normal; color:var(--ink-3); width:16px; text-align:center; flex:0 0 auto}
#docView .db-ph span{overflow:hidden; text-overflow:ellipsis}
#docView .db-ph b{color:var(--accent); font-weight:600}
#docView .db-rz{position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; z-index:1}
#docView .db-rz:hover{background:var(--accent)}
#docView .db-plus button, #docView .db-rx button{border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; padding:6px 10px; cursor:pointer; border-radius:6px}
#docView .db-plus{border-right:0 !important}
#docView .db-tbl tr > :last-child{border-right:0}
#docView .db-rx{border-left:0 !important; border-right:0 !important}
#docView .db-rx button{opacity:0}
#docView .db-tbl tr:hover .db-rx button, #docView .db-rx button:focus{opacity:1}
#docView .db-rx button:hover{color:#e03131}
#docView .db-c{min-height:32px; height:33px; padding:6px 8px; cursor:default; white-space:nowrap; text-overflow:ellipsis}
#docView:not(.ro) .db-c:hover{background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
#docView .db-c.db-number{text-align:right; font-variant-numeric:tabular-nums}
#docView .db-c.db-checkbox{text-align:center}
#docView .db-c.db-title{position:relative; font-weight:500}
#docView .db-tt:empty::before{content:'Untitled'; color:var(--ink-3); font-weight:400}
#docView .db-open{position:absolute; right:6px; top:5px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; font-size:11.5px; font-weight:500; padding:1px 7px; border-radius:5px; cursor:pointer; opacity:0}
#docView .db-tbl tr:hover .db-open, #docView .db-open:focus{opacity:1}
#docView .db-c a{color:var(--accent)}
#docView .db-c:has(.db-in){padding:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
#docView .db-in{width:100%; height:32px; border:0; outline:0; padding:6px 8px; font:inherit; background:var(--paper); color:var(--ink)}
.db-chip{display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; margin:0 4px 0 0; padding:0 7px; border-radius:4px; font-size:12.5px; line-height:20px;
  color:var(--c); background:color-mix(in srgb, var(--c) 15%, transparent); white-space:nowrap}
.db-person{display:inline-block; padding:0 7px; border-radius:999px; font-size:12.5px; line-height:20px; background:var(--accent-soft); color:var(--accent); white-space:nowrap}
#docView .db-grp td{padding:10px 8px 4px; border-left:0; border-right:0; background:var(--paper)}
#docView .db-grp small{color:var(--ink-3); margin-left:4px}
#docView .db-none td{padding:10px 8px; color:var(--ink-3); border-left:0; border-right:0}
#docView .db-addrow{align-self:flex-start; border:0; background:none; color:var(--ink-3); font:inherit; font-size:13.5px; padding:4px 8px; border-radius:6px; cursor:pointer}
#docView .db-addrow:hover{background:var(--surface-2); color:var(--ink)}
#docView .db-addrow[disabled]{cursor:not-allowed; opacity:.6}
.db-pop{position:fixed; z-index:67; width:260px; max-height:330px; overflow:auto; padding:6px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); font-size:13.5px}
.db-pop .db-pop-q{width:100%; height:30px; border:1px solid var(--line); border-radius:6px; padding:0 8px; margin:0 0 4px; font:inherit; background:var(--paper); color:var(--ink)}
.db-pop .db-pop-l{display:flex; flex-direction:column}
.db-pop button{display:flex; align-items:center; gap:8px; width:100%; border:0; background:none; color:var(--ink); font:inherit; text-align:left; padding:5px 8px; border-radius:6px; cursor:pointer}
.db-pop button:hover, .db-pop button.on{background:var(--accent-soft)}
.db-pop button i{font-style:normal; color:var(--ink-3); min-width:16px; text-align:center}
.db-pop button.on i{color:var(--accent); margin-left:auto}
.db-pop button small{margin-left:auto; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.db-pop .db-pop-x{color:#e03131}
.db-pop .db-pop-h{margin:8px 8px 2px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
.db-pop .db-pop-none{margin:6px 8px; color:var(--ink-3); font-size:12.5px}
.db-pop-date label{display:flex; align-items:center; gap:8px; margin:4px 4px 6px}
.db-pop-date label[hidden]{display:none}
.db-pop-date input[type=date]{flex:1; height:30px; border:1px solid var(--line); border-radius:6px; padding:0 6px; font:inherit; background:var(--paper); color:var(--ink)}
.db-pop-date .db-pop-row{display:flex; gap:4px}
.db-pop-date .db-pop-row button{justify-content:center; border:1px solid var(--line)}
/* print a doc as a page (Board › Export › Print / PDF) */
@media print{
  body:has(#app.docon){overflow:visible !important; background:#fff}
  body:has(#app.docon) > *:not(#app){display:none !important}
  html:has(#app.docon), body:has(#app.docon){height:auto !important}
  #app.docon{position:static !important; overflow:visible !important}
  #app.docon > *:not(#docView){display:none !important}
  #app.docon #docView{position:static !important; background:#fff; color:#000}
  #app.docon #docView .doc-scroll{position:static; overflow:visible; padding:0}
  #app.docon #docView .doc-page{max-width:none; font-size:12pt}
  #app.docon #docView .doc-handle, #app.docon #docView .doc-add, #app.docon #docView .doc-back,
  #app.docon #docView .doc-side, #app.docon #docView .doc-peerbar, #app.docon #docView .doc-peers,
  #app.docon #docView .doc-cmt-tg, #app.docon #docView .doc-cmts{display:none !important}
  #app.docon #docView .doc-lang, #app.docon #docView .doc-colsbar, #app.docon #docView .doc-col-add, #app.docon #docView .doc-sk-tools,
  #app.docon #docView .doc-sk-grow, #app.docon #docView .doc-pagebar, #app.docon #docView .doc-cover-acts, #app.docon #docView .doc-beside{display:none !important}
  #app.docon #docView .doc-math > .doc-t, #app.docon #docView .doc-mermaid > .doc-t{display:none !important}
  #app.docon #docView .doc-col{border-color:transparent !important}
  #app.docon #docView .doc-cover{margin:0 0 12px; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #app.docon #docView .doc-cols-g{grid-template-columns:repeat(var(--ncol, 2), minmax(0, 1fr)) !important}
  #app.docon #docView .doc-scroll{right:0 !important}
  #app.docon #docView .doc-b.cmt-lit{background:none}
  #app.docon #docView .doc-b{padding-left:calc(var(--ind, 0) * 22px); break-inside:avoid}
  #app.docon #docView .doc-title{padding-left:0}
  #app.docon #docView .doc-t[data-raw="1"]{background:none}
  .doc-pop{display:none !important}
  #app.docon #docView .db-addrow, #app.docon #docView .db-more, #app.docon #docView .db-plus, #app.docon #docView .db-rx,
  #app.docon #docView .db-rz, #app.docon #docView .db-open, .db-pop{display:none !important}
  #app.docon #docView .db-body{overflow:visible}
  #app.docon #docView .db-chip{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ── docs: a database's views (80g1-docs-db-views.js) ─────────────────
   The view bar, the board and the calendar. Colours come from the theme's
   tokens, so dark mode follows them; an option's own colour (--c) is mixed
   into the surface, never painted flat. */
.dbv{font:13px/1.45 var(--sans); color:var(--ink)}
.dbv button{font:inherit; color:inherit}
.dbv :focus-visible{outline:2px solid var(--accent-line); outline-offset:1px}
.dbv-bar{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:2px 0 6px; border-bottom:1px solid var(--line); margin-bottom:8px}
.dbv-tabs{display:flex; gap:2px; flex:1 1 auto; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:thin}
.dbv-tab{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 9px; border:0; border-radius:6px; background:none; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.dbv-tab span{color:var(--ink-3)}
.dbv-tab:hover{background:var(--surface-3); color:var(--ink)}
.dbv-tab.on{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--ink)}
.dbv-addv{color:var(--ink-3); font-size:16px}
.dbv-tools{display:flex; flex-wrap:wrap; gap:2px}
.dbv-tool{height:28px; padding:0 9px; border:0; border-radius:6px; background:none; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.dbv-tool:hover, .dbv-tool.open{background:var(--surface-3); color:var(--ink)}
.dbv-tool.set{color:var(--accent)}
.dbv-tool b{display:inline-block; min-width:16px; padding:0 4px; border-radius:8px; background:var(--accent-soft); font-size:11px; font-weight:600}
.dbv-pop{position:absolute; z-index:30; top:calc(100% + 4px); right:0; width:min(460px, 100%); max-height:60vh; overflow:auto; padding:10px;
  display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md)}
.dbv-pop select, .dbv-pop input[type=text], .dbv-pop input[type=number], .dbv-pop input[type=date]{height:28px; min-width:0; padding:0 6px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface-2); color:var(--ink); font:inherit}
.dbv-pop select:disabled, .dbv-pop input:disabled{opacity:.6}
.dbv-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.dbv-row input[type=text]{flex:1}
.dbv-check{cursor:pointer}
.dbv-check input{accent-color:var(--accent)}
.dbv-rule{display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:2px; border-radius:6px}
.dbv-rule > select, .dbv-rule > input{flex:1 1 90px}
.dbv-sortrow.dragging{opacity:.4}
.dbv-grip{width:20px; height:28px; padding:0; border:0; background:none; color:var(--ink-3); cursor:grab; letter-spacing:-2px; font-size:11px}
.dbv-x{width:26px; height:26px; padding:0; border:0; border-radius:6px; background:none; color:var(--ink-3); cursor:pointer; font-size:16px}
.dbv-x:hover{background:var(--surface-3); color:var(--danger)}
.dbv-item{display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px; border:0; border-radius:6px; background:none; text-align:left; cursor:pointer; color:var(--ink-2)}
.dbv-item:hover:not(:disabled){background:var(--surface-3); color:var(--ink)}
.dbv-item:disabled{opacity:.5; cursor:default}
.dbv-item.danger{color:var(--danger)}
.dbv-none, .dbv-empty{margin:2px 0; color:var(--ink-3); font-size:12px}
.dbv-empty{padding:16px 0}
.dbv-opt{display:inline-block; max-width:100%; padding:0 7px; border-radius:4px; font-size:12px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:color-mix(in srgb, var(--c, var(--ink-3)) 18%, var(--surface)); color:var(--ink)}
.dbv-opt.none{background:none; color:var(--ink-3); padding:0}
.dbv-who{color:var(--ink-2)} .dbv-yes{color:var(--ink-2)}
.dbv-untitled{color:var(--ink-3); font-weight:500}
.dbv .drop-in{background:color-mix(in srgb, var(--accent-soft) 60%, transparent)}

/* the board: columns side by side, scrolling sideways when they outgrow the page */
.dbv-board{display:flex; gap:10px; align-items:flex-start; overflow-x:auto; padding:2px 2px 10px; overscroll-behavior-x:contain}
.dbb-col{flex:0 0 250px; display:flex; flex-direction:column; gap:6px; padding:6px; border-radius:10px; background:var(--surface-2); min-height:60px}
.dbb-col.folded{flex:0 0 44px; min-height:160px; align-items:center}
.dbb-col.folded .dbb-head{flex-direction:column; writing-mode:vertical-rl}
.dbb-head{display:flex; align-items:center; gap:6px; min-width:0; padding:0 2px}
.dbb-head .dbv-opt{min-width:0}
.dbb-fold{width:22px; height:22px; flex:none; padding:0; border:0; border-radius:5px; background:none; color:var(--ink-3); cursor:pointer}
.dbb-fold:hover{background:var(--surface-3); color:var(--ink)}
.dbb-n{color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.dbb-cards{display:flex; flex-direction:column; gap:6px; min-height:8px}
.dbb-card{position:relative; display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  box-shadow:var(--shadow-sm); cursor:pointer; overflow-wrap:anywhere}
.dbb-card[draggable=true]{cursor:grab}
.dbb-card:hover{border-color:var(--accent-line)}
.dbb-card.dragging{opacity:.4}
.dbb-card b{font-weight:600; font-size:13.5px}
.dbb-vals{display:flex; flex-wrap:wrap; gap:4px; font-size:12px; color:var(--ink-2)}
.dbb-card.drop-before::before, .dbb-col.drop-end .dbb-cards::after{content:''; display:block; height:3px; border-radius:2px; background:var(--accent)}
.dbb-card.drop-before::before{position:absolute; left:0; right:0; top:-5px}
.dbb-add{height:28px; border:0; border-radius:6px; background:none; color:var(--ink-3); text-align:left; padding:0 6px; cursor:pointer}
.dbb-add:hover{background:var(--surface-3); color:var(--ink)}
.dbb-new{height:32px; padding:0 8px; border:1px solid var(--accent-line); border-radius:8px; background:var(--surface); color:var(--ink); font:inherit}

/* the calendar: the month, and beside it the rows with no date */
.dbv-cal{display:flex; gap:12px; align-items:flex-start}
.dbc-main{flex:1; min-width:0}
.dbc-head{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.dbc-head b{flex:1; text-align:center; font-size:14px}
.dbc-head button{height:28px; padding:0 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface); cursor:pointer}
.dbc-head button:hover{background:var(--surface-3)}
.dbc-adding{margin:0 0 6px}
.dbc-adding label{display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--ink-2)}
.dbc-new{flex:1; min-width:140px; height:30px; padding:0 8px; border:1px solid var(--accent-line); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit}
.dbc-wds{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr))}
.dbc-wds span{padding:2px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.dbc-weeks{display:flex; flex-direction:column; border-top:1px solid var(--line); border-left:1px solid var(--line)}
.dbc-week{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); grid-template-rows:24px repeat(var(--lanes, 0), 22px) minmax(16px, 1fr); row-gap:2px; min-height:92px}
.dbc-day{grid-row:1 / -1; display:flex; justify-content:space-between; align-items:flex-start; min-width:0; padding:2px 3px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:default}
.dbc-day.out{background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.dbc-day.out .dbc-n{color:var(--ink-3); opacity:.7}
.dbc-day.today .dbc-n{background:var(--accent); color:#fff; font-weight:700}
.dbc-n{min-width:22px; height:20px; padding:0 5px; border:0; border-radius:10px; background:none; font-size:11.5px; color:var(--ink-2); cursor:pointer; text-align:center}
button.dbc-n:hover{background:var(--surface-3); color:var(--ink)}
.dbc-day.today button.dbc-n:hover{background:var(--accent)}
.dbc-more{align-self:flex-end; font-size:10.5px; color:var(--ink-3)}
.dbc-chip{z-index:1; min-width:0; margin:0 2px; padding:0 6px; height:20px; line-height:20px; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--accent-soft); color:var(--ink); border-radius:0; cursor:pointer}
.dbc-chip[draggable=true]{cursor:grab}
.dbc-chip.head{border-top-left-radius:5px; border-bottom-left-radius:5px; box-shadow:inset 3px 0 0 var(--accent)}
.dbc-chip.tail{border-top-right-radius:5px; border-bottom-right-radius:5px}
.dbc-chip:not(.head){margin-left:0} .dbc-chip:not(.tail){margin-right:0}
.dbc-chip:hover{background:color-mix(in srgb, var(--accent) 22%, var(--surface))}
.dbc-chip.dragging{opacity:.4}
.dbc-side{flex:0 0 200px; display:flex; flex-direction:column; gap:4px; padding:8px; border-radius:10px; background:var(--surface-2); max-height:560px; overflow:auto}
.dbc-side > b{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:2px}
.dbc-side > b span{color:var(--ink-3); font-weight:500}
.dbc-side .dbc-chip{margin:0; height:auto; line-height:1.4; padding:4px 8px; white-space:normal}

/* narrow screens: the editor spans the bar, the side list goes under the month, days keep their bars */
@media (max-width:600px){
  .dbv-pop{left:0; right:0; width:auto}
  .dbv-tabs{flex-basis:100%}
  .dbv-cal{flex-direction:column}
  .dbc-side{flex:none; width:100%; max-height:none}
  .dbc-week{min-height:72px; grid-template-rows:22px repeat(var(--lanes, 0), 18px) minmax(10px, 1fr)}
  .dbc-chip{height:18px; line-height:18px; font-size:10.5px; padding:0 3px}
  .dbb-col{flex-basis:220px}
}
@media print{
  .dbv-tools, .dbv-addv, .dbv-pop, .dbb-add, .dbb-fold, .dbc-head button{display:none !important}
  .dbv-board{flex-wrap:wrap; overflow:visible}
}

/* AI from the board's content (77a-ai-board.js): the panel, the top bar's
   AI button, the mind bar's AI button. Tokens only — dark mode follows. */
#bAI svg{width:17px; height:17px}
#bAI.busy svg{animation:aib-pulse 1.1s ease-in-out infinite}
@keyframes aib-pulse{50%{opacity:.35}}
:is(#aibPanel, #aixPanel){position:absolute; top:62px; right:12px; z-index:30; width:368px; max-width:calc(100vw - 24px);
  max-height:calc(100vh - 140px); display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); font-size:13px; line-height:1.45}
:is(#aibPanel, #aixPanel)[hidden]{display:none}
:is(#aibPanel, #aixPanel) .aib-head{display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; border-bottom:1px solid var(--line)}
:is(#aibPanel, #aixPanel) .aib-head b{flex:1; font-weight:600; font-size:13px}
:is(#aibPanel, #aixPanel) .aib-tag{display:inline-flex; align-items:center; gap:4px; padding:2px 7px 2px 5px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em}
:is(#aibPanel, #aixPanel) .aib-tag svg{width:13px; height:13px}
:is(#aibPanel, #aixPanel) .aib-body{padding:10px 12px; overflow:auto; flex:1 1 auto}
:is(#aibPanel, #aixPanel) .aib-body p{margin:0 0 8px}
:is(#aibPanel, #aixPanel) .aib-body h3{margin:2px 0 8px; font-size:14.5px; line-height:1.35}
:is(#aibPanel, #aixPanel) .aib-body h4{margin:10px 0 4px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
:is(#aibPanel, #aixPanel) .aib-body h4 small{font-weight:400; margin-left:4px}
:is(#aibPanel, #aixPanel) .aib-body ul{margin:0 0 4px; padding-left:18px}
:is(#aibPanel, #aixPanel) .aib-body li{margin:2px 0}
:is(#aibPanel, #aixPanel) ul.aib-notes li{color:var(--ink-2)}
:is(#aibPanel, #aixPanel) ul.aib-checks{list-style:none; padding:0}
:is(#aibPanel, #aixPanel) ul.aib-checks label{display:flex; gap:8px; align-items:flex-start; padding:4px 2px; cursor:pointer}
:is(#aibPanel, #aixPanel) ul.aib-checks input{margin-top:3px}
:is(#aibPanel, #aixPanel) ul.aib-checks small{display:block; color:var(--ink-3); font-size:11.5px}
:is(#aibPanel, #aixPanel) .aib-muted{color:var(--ink-3); font-size:12px}
:is(#aibPanel, #aixPanel) .aib-own{margin-top:10px}
:is(#aibPanel, #aixPanel) .aib-link{border:0; background:none; padding:0; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer}
:is(#aibPanel, #aixPanel) .aib-err{color:var(--danger)}
:is(#aibPanel, #aixPanel) .aib-busy{display:flex; align-items:center; gap:10px; color:var(--ink-2)}
:is(#aibPanel, #aixPanel) .aib-spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--accent);
  animation:aib-spin .8s linear infinite; flex:none}
@keyframes aib-spin{to{transform:rotate(360deg)}}
:is(#aibPanel, #aixPanel) .aib-act{display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; margin:0 0 6px; padding:8px 10px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); text-align:left; font:inherit; cursor:pointer}
:is(#aibPanel, #aixPanel) .aib-act:hover:not(:disabled){border-color:var(--accent-line); background:var(--accent-soft)}
:is(#aibPanel, #aixPanel) .aib-act:disabled{opacity:.5; cursor:default}
:is(#aibPanel, #aixPanel) .aib-act small{color:var(--ink-3); font-size:11.5px}
:is(#aibPanel, #aixPanel) .aib-foot{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; padding:8px 12px; border-top:1px solid var(--line)}
:is(#aibPanel, #aixPanel) .aib-foot .btn{height:30px; padding:0 12px; font-size:12.5px; border:1px solid var(--line)}
:is(#aibPanel, #aixPanel) .aib-foot .btn.primary{border-color:transparent}
#mindBar button.mbAI{color:var(--accent)}
#app.presenting :is(#aibPanel, #aixPanel), #app.presenting #bAI{display:none}
@media (prefers-reduced-motion:reduce){ #bAI.busy svg, :is(#aibPanel, #aixPanel) .aib-spin{animation:none} }
@media (max-width:600px){ :is(#aibPanel, #aixPanel){top:auto; bottom:60px; left:8px; right:8px; width:auto; max-height:60vh} }

/* The AI assistant (77c-ai-panel.js): the shared panel look is 01e-ai.html's
   (:is(#aibPanel, #aixPanel)); this is what only the assistant has — tabs, a
   chat thread, diff rows, forms. Tokens only — dark mode follows. */
#aixPanel{width:420px; top:62px; bottom:auto; max-height:calc(100vh - 120px)}
#aixPanel .aix-tabs{display:flex; gap:2px; padding:0 8px; border-bottom:1px solid var(--line)}
#aixPanel .aix-tabs button{border:0; background:none; padding:8px 10px; font:inherit; font-size:12.5px; color:var(--ink-3); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px}
#aixPanel .aix-tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
#aixPanel .aix-thread{display:flex; flex-direction:column; gap:10px}
#aixPanel .aix-msg{padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-2); white-space:pre-wrap; word-break:break-word}
#aixPanel .aix-msg.me{align-self:flex-end; max-width:85%; background:var(--accent-soft); color:var(--ink)}
#aixPanel .aix-msg small{display:block; color:var(--ink-3); font-size:11px; margin-top:4px; white-space:normal}
#aixPanel .aix-diff{margin:6px 0 0; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); white-space:normal}
#aixPanel .aix-diff h5{margin:2px 0 6px; font-size:11.5px; font-weight:600; color:var(--ink-2)}
#aixPanel .aix-row{display:flex; gap:8px; align-items:flex-start; padding:4px 2px; font-size:12.5px; cursor:pointer}
#aixPanel .aix-row input{margin-top:3px; flex:none}
#aixPanel .aix-row.risky b{color:var(--danger)}
#aixPanel .aix-row.off{opacity:.55; cursor:default}
#aixPanel .aix-row del{color:var(--ink-3)}
#aixPanel .aix-row ins{text-decoration:none; color:var(--ink)}
#aixPanel .aix-row small{display:block; color:var(--ink-3); font-size:11px}
#aixPanel .aix-btns{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
#aixPanel .aix-btns .btn, #aixPanel .aix-form .btn{height:28px; padding:0 10px; font-size:12px; border:1px solid var(--line)}
#aixPanel .aix-btns .btn.primary{border-color:transparent}
#aixPanel .aix-form{display:flex; flex-direction:column; gap:6px}
#aixPanel .aix-form label{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
#aixPanel .aix-form label.aix-row{font-family:inherit; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--ink)}
#aixPanel textarea, #aixPanel input[type="text"], #aixPanel input[type="password"], #aixPanel input[type="number"], #aixPanel select{
  width:100%; box-sizing:border-box; padding:6px 8px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px}
#aixPanel textarea{min-height:64px; resize:vertical; line-height:1.4}
#aixPanel .aix-compose{display:flex; gap:6px; align-items:flex-end; width:100%}
#aixPanel .aix-compose textarea{min-height:44px; flex:1}
#aixPanel .aix-src{display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--r-sm); background:var(--accent-soft); font-size:12px}
#aixPanel .aix-src span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#aixPanel pre.aix-code{margin:6px 0; max-height:180px; overflow:auto; padding:8px; border-radius:var(--r-sm); background:var(--surface-2);
  font-family:var(--mono); font-size:11px; line-height:1.5; white-space:pre}
#aixPanel .aix-find{padding:6px 0; border-bottom:1px solid var(--line)}
#aixPanel .aix-sev{display:inline-block; min-width:52px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em}
#aixPanel .aix-sev.error{color:var(--danger)} #aixPanel .aix-sev.warning{color:var(--warn, #B7822A)} #aixPanel .aix-sev.tip{color:var(--ink-3)}
#aixPanel .aix-meter{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin:4px 0}
#aixPanel .aix-meter i{display:block; height:100%; background:var(--accent)}
#aixPanel table.aix-table{width:100%; border-collapse:collapse; font-size:11.5px}
#aixPanel table.aix-table th, #aixPanel table.aix-table td{text-align:left; padding:3px 4px; border-bottom:1px solid var(--line)}
#aixPanel .aix-pic{max-width:100%; max-height:200px; display:block; margin:6px auto; background:#fff; border-radius:var(--r-sm)}
#aixPanel .aix-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#aixPanel .aix-grid .aib-act{margin:0}
#aixPanel .aix-hit{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:6px 2px; font:inherit; cursor:pointer; color:var(--ink)}
#aixPanel .aix-hit small{display:block; color:var(--ink-3)}
@media (max-width:600px){ #aixPanel{width:auto} #aixPanel .aix-grid{grid-template-columns:1fr} }

/* ── Brushes (52c): the floating brush panel beside the rail, and the Ink
   section of the inspector, which borrows its rows. ─────────────────── */
#brushPanel{position:absolute; z-index:21; left:calc(var(--rail-r) + 8px); top:50%; transform:translateY(-50%); width:216px;
  padding:8px 10px 10px; display:flex; flex-direction:column; gap:7px; max-height:calc(100% - 140px); overflow-y:auto; scrollbar-width:thin}
#brushPanel[hidden]{display:none}
#brushPanel .bp-note{font-size:11.5px; line-height:1.45; color:var(--ink-3); margin:6px 0 2px}
#app.presenting #brushPanel, #app.focusmode #brushPanel, #app.homeon #brushPanel, #app.viewonly #brushPanel{display:none}
#brushPanel .bp-head{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px}
#brushPanel .bp-head b{font-size:12.5px; font-weight:600; letter-spacing:-.01em}
#brushPanel .bp-fold{width:22px; height:22px; border:0; border-radius:5px; background:transparent; cursor:pointer; position:relative; color:var(--ink-3)}
#brushPanel .bp-fold:hover{background:var(--surface-2)}
#brushPanel .bp-fold::after{content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:translate(-50%,-30%) rotate(-135deg)}
#brushPanel.bp-folded .bp-fold::after{transform:translate(-50%,-70%) rotate(45deg)}
#brushPanel.bp-folded .bp-body{display:none}
#brushPanel .bp-dot{display:inline-block; border-radius:50%; border:1.4px solid var(--ink-2); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.bp-presets{flex:none}
.bp-presets button{height:30px}
.bp-presets button svg{width:17px; height:17px}
.bp-quick{display:flex; align-items:center; gap:4px}
.bp-quick button{flex:1; height:28px; border:1px solid var(--line); border-radius:5px; background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center}
.bp-quick button:hover{background:var(--surface-2)}
.bp-quick button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.bp-quick button i{display:block; border-radius:50%}
.bp-quick .bp-cur{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line-2)}
.bp-body{display:flex; flex-direction:column; gap:7px}
.bp-preview{height:40px; border-radius:6px; background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; justify-content:center}
.bp-preview svg{display:block}
.bp-row{display:grid; grid-template-columns:62px 1fr 34px; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); margin:0}
.bp-row input[type="range"]{width:100%; min-width:0; margin:0; accent-color:var(--accent); height:18px}
.bp-row output{font-family:var(--mono); font-size:10.5px; text-align:right; color:var(--ink-3); font-variant-numeric:tabular-nums}
.bp-sw{display:grid; grid-template-columns:repeat(8,1fr); gap:5px}
.bp-cust{display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-height:22px}
.bp-cust .cpick{margin-right:4px}
.bp-cust .bp-rec{width:18px; height:18px; aspect-ratio:auto; border-radius:50%}
.bp-toggles{display:flex; flex-direction:column; gap:5px}
.bp-modes{flex:none}
/* the inspector's Ink section: the same rows, spaced like its other sections */
.ink-sec .bp-presets, .ink-sec .bp-row, .ink-sec .bp-sw{margin-bottom:7px}
.sec > label.bp-row{display:grid; font-family:inherit; font-size:11.5px; letter-spacing:normal; text-transform:none; color:var(--ink-2)}
/* a phone: a strip along the bottom, above the bottom bar; folded it is one row */
@media (max-width:600px){
  #brushPanel{left:8px; right:8px; top:auto; bottom:58px; transform:none; width:auto; max-height:44%; padding:6px 8px 8px; gap:6px}
  #brushPanel.bp-folded{flex-direction:row; flex-wrap:nowrap; align-items:center; overflow-x:auto; overflow-y:hidden}
  #brushPanel.bp-folded .bp-head{order:3; flex:none}
  #brushPanel.bp-folded .bp-head b{display:none}
  #brushPanel.bp-folded .bp-quick{flex:none}
  #brushPanel.bp-folded .bp-quick button{width:30px}
  #brushPanel .bp-sw{grid-template-columns:repeat(8,26px); justify-content:space-between}
  #brushPanel.bp-eraser{flex-direction:row; align-items:center; flex-wrap:wrap}
  #brushPanel.bp-eraser .bp-row{flex:1; min-width:150px}
}
.custrow .nofill{flex:none; width:22px; height:22px; padding:0; margin-left:-2px; margin-right:4px; border:1px solid var(--line); border-radius:5px; cursor:pointer;
  background:var(--paper) linear-gradient(to top right, transparent calc(50% - 1px), var(--danger) calc(50% - 1px), var(--danger) calc(50% + 1px), transparent calc(50% + 1px))}
.custrow .nofill:hover{border-color:var(--line-2)}
.custrow .nofill[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.custrow .cpick.off input{opacity:.4}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.sec-reset{border:0; background:none; padding:0; color:var(--accent); font:inherit; font-size:11px; cursor:pointer}
.sec-reset:hover{text-decoration:underline}

/* ── Board info panel (71w): the title and the Saved chip open it ────────── */
#docTitle[readonly]{cursor:pointer; caret-color:transparent}
#docTitle[readonly]:focus{outline:2px solid var(--accent); outline-offset:-2px}
#docTitle[aria-expanded="true"]{background:var(--surface-2); outline:2px solid var(--accent); outline-offset:-2px}
#saveState[role="button"]{cursor:pointer; border-radius:var(--r-sm); padding:3px 8px; margin-right:4px}
#saveState[role="button"]:hover{background:var(--surface-2); color:var(--ink-2)}
#saveState[role="button"]:focus-visible{outline:2px solid var(--accent); outline-offset:0}
#infoPanel{position:absolute; z-index:67; display:none; padding:12px 14px 10px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:13px;
  max-height:calc(100vh - 80px); overflow-y:auto}
#infoPanel.on{display:block}
#app.presenting ~ #infoPanel, #app.focusmode ~ #infoPanel{display:none}
#infoPanel .bi-lb{font-size:11.5px; color:var(--ink-2); margin:10px 0 5px}
#infoPanel .bi-lb:first-child{margin-top:0}
#infoPanel .bi-name{width:100%; box-sizing:border-box; height:34px; padding:0 10px; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--accent); border-radius:var(--r-sm); outline:0}
#infoPanel .bi-name:not([readonly]):focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
#infoPanel .bi-name[readonly]{color:var(--ink-2); background:var(--surface-2); border-color:var(--line)}
#infoPanel .bi-note{font-size:11.5px; color:var(--ink-3); margin-top:4px}
#infoPanel .bi-row{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; color:var(--ink); font:inherit}
#infoPanel .bi-row:hover{background:var(--surface-2)}
#infoPanel .bi-row.still{cursor:default}
#infoPanel .bi-row.still:hover{background:transparent}
#infoPanel .bi-row > svg{width:20px; height:20px; flex:none; color:var(--ink-2)}
#infoPanel .bi-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
#infoPanel .bi-txt b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#infoPanel .bi-txt small{font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#infoPanel .bi-chev svg{width:16px; height:16px; color:var(--ink-3); display:block}
#infoPanel .bi-row[aria-expanded="true"] .bi-chev svg{transform:rotate(180deg)}
#infoPanel .bi-go{font-size:12px; color:var(--accent); font-weight:500}
#infoPanel .bi-hist{border:0; border-top:1px solid var(--line); border-radius:0; margin:12px -14px -10px; width:calc(100% + 28px); padding:11px 14px}
#infoPanel .bi-pick{border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-sm) var(--r-sm); margin-top:-3px; padding:4px; max-height:220px; overflow-y:auto}
#infoPanel .bi-pick .bi-mh{font-size:11px; color:var(--ink-3); padding:6px 8px 2px}
#infoPanel .bi-pick button{display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:0; background:transparent;
  border-radius:5px; cursor:pointer; font:inherit; color:var(--ink); text-align:left}
#infoPanel .bi-pick button:hover{background:var(--surface-2)}
#infoPanel .bi-pick button svg{width:15px; height:15px; flex:none; color:var(--ink-2)}
#infoPanel .bi-pick button span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ── Sequence diagrams (79h): the floating row on a lifeline, message or fragment,
   in the mind map's row's own look (#mindBar, 00-head) ──────────────────── */
#seqBar{position:absolute; z-index:23; display:flex; flex-direction:column; gap:6px; pointer-events:none}
#seqBar[hidden]{display:none}
#app.presenting #seqBar, #app.homeon #seqBar{display:none}
#seqBar .mbRow{pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:2px; padding:3px; align-self:center}
#seqBar .mbRow button{min-width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-2); cursor:pointer; font:inherit}
#seqBar .mbRow button:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
#seqBar .mbRow button[aria-pressed="true"]{color:var(--accent); background:var(--accent-soft)}
#seqBar .mbRow button:disabled{opacity:.35; cursor:default}
#seqBar .mbRow .mbText{font-family:var(--mono); font-size:11px; padding:0 7px}
#seqBar .mbSep{width:1px; height:18px; background:var(--line); margin:0 3px}
/* ── the empty board's starters (79h) ── */
#seqStart{position:absolute; left:50%; bottom:86px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:6px;
  padding:6px 8px 6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); font-size:12.5px; color:var(--ink-2)}
#seqStart[hidden]{display:none}
#app.presenting #seqStart, #app.homeon #seqStart, #app.focusmode #seqStart, #app.viewonly #seqStart{display:none}
#seqStart button{font:inherit; font-size:12.5px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); cursor:pointer}
#seqStart button:hover{background:var(--surface-2)}
#seqStart button.primary{border-color:var(--accent); color:var(--accent)}
#seqStart button{white-space:nowrap}
/* a phone: right of the tool rail, above the bottom bar, one line that scrolls sideways */
@media (max-width:600px){
  #seqStart{left:62px; right:8px; bottom:66px; transform:none; padding:5px; gap:5px; overflow-x:auto; scrollbar-width:none; border-radius:10px}
  #seqStart::-webkit-scrollbar{display:none}
  #seqStart > span{display:none}
  #seqStart button{flex:none; font-size:12px; padding:5px 9px}
}
/* ── the connector's Flow section: its notation's flows, and a way to all (60-ui) ── */
#inspector .mini-link{display:block; margin-top:6px; padding:0; border:0; background:none; font:inherit; font-size:11.5px;
  color:var(--accent); cursor:pointer}
#inspector .mini-link:hover{text-decoration:underline}
@media (pointer:coarse){ #inspector .mini-link{padding:8px 12px 8px 0; margin-top:0} }
/* ── Sequence diagrams (79g): message kinds, fragment operands ───────────── */
.seq-kinds,.seq-ops{display:flex; flex-wrap:wrap; gap:4px}
.seq-kinds button,.seq-ops button{font:inherit; font-size:11.5px; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); cursor:pointer}
.seq-kinds button:hover,.seq-ops button:hover{background:var(--surface-2)}
.seq-kinds button[aria-pressed="true"],.seq-ops button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.seq-ops button{font-family:var(--mono); font-size:11px}
.seq-hint{display:block; width:100%; flex:1 1 100%; margin:6px 0 0; color:var(--ink-3); line-height:1.4; white-space:normal}
.seq-loop{gap:6px; align-items:center; margin-top:6px}
.seq-loop .field{width:46px; height:28px; padding:0 6px; font:inherit; font-size:12px; min-height:0}
.seq-operands{display:flex; flex-direction:column; gap:5px; margin-top:8px}
.seq-operands .row{gap:6px; align-items:center}
.seq-operands .field{flex:1; height:28px; padding:0 8px; font:inherit; font-size:12px; min-height:0}
.seq-opn{width:14px; text-align:right}
/* ── Version history (76): a version previewed before it is restored ─────── */
.hist-list[hidden],.hist-prev[hidden],#histModal .sub[hidden]{display:none !important}
.hist-prev-head{display:flex; align-items:center; gap:12px; margin-bottom:10px; min-width:0}
.hist-prev-head .btn{display:inline-flex; align-items:center; gap:4px; flex:none}
.hist-prev-head .btn svg{width:15px; height:15px}
.hist-prev-what{flex:1; min-width:0; font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hist-prev-pic{border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); display:flex; align-items:center;
  justify-content:center; min-height:220px; max-height:62vh; overflow:auto; padding:8px}
.hist-prev-pic > svg{display:block; width:100%; height:auto; max-height:calc(62vh - 18px)}
.hist-prev-acts{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:12px}
.hist-prev-note{flex:1; font-size:11.5px; color:var(--ink-3)}

/* ── BPMN and ERD (79i): the floating row on a task, event, gateway, pool or
   lane, an entity or a relationship — in the sequence row's look (#seqBar,
   01g), with the mind map's pop-up under it and its dock on a phone ────── */
#flowBar{position:absolute; z-index:23; display:flex; flex-direction:column; gap:6px; pointer-events:none}
#flowBar[hidden]{display:none}
#app.presenting #flowBar, #app.homeon #flowBar, #app.docon #flowBar{display:none}
#flowBar .mbRow,#flowBar .fbPop{pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm)}
#flowBar .mbRow{display:flex; align-items:center; gap:2px; padding:3px; align-self:center}
#flowBar .mbRow button{min-width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--ink-2); cursor:pointer; font:inherit}
#flowBar .mbRow button:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
#flowBar .mbRow button[aria-pressed="true"]{color:var(--accent); background:var(--accent-soft)}
#flowBar .mbRow button:disabled{opacity:.35; cursor:default}
#flowBar .mbRow .mbText{font-family:var(--mono); font-size:11px; padding:0 7px}
#flowBar .mbSep{width:1px; height:18px; background:var(--line); margin:0 3px}
/* the list a button opens: a task's type, a gateway's kind, an event's trigger, an entity's keys */
#flowBar .fbPop{padding:8px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; max-width:360px; align-self:center; font-size:12px; color:var(--ink-2)}
#flowBar .fbPop button{height:26px; padding:0 8px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink-2); font:inherit; font-size:11.5px; cursor:pointer}
#flowBar .fbPop button:hover:not(:disabled){background:var(--surface-2); color:var(--ink)}
#flowBar .fbPop button[aria-pressed="true"]{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent)}
#flowBar .fbPop button:disabled{opacity:.4; cursor:default}
#flowBar .fbKeys{display:flex; flex-direction:column; gap:4px; min-width:220px; max-height:240px; overflow-y:auto}
#flowBar .fbKey{display:flex; align-items:center; gap:4px}
#flowBar .fbKey span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-family:var(--mono); font-size:11.5px}
#flowBar .fbKey span i{color:var(--ink-3); font-style:normal}
#flowBar .fbKey button{font-family:var(--mono); font-size:10.5px; height:22px; padding:0 6px}
#flowBar .fbNote{margin:0; color:var(--ink-3); font-size:11.5px}
/* a phone: docked above the bottom bar, scrolling sideways; what it opens sits above it */
@media (max-width:600px){
  #flowBar.dock{left:8px; right:8px; top:auto; bottom:58px; flex-direction:column-reverse; z-index:25}
  #flowBar.dock .mbRow{align-self:stretch; overflow-x:auto; scrollbar-width:none; justify-content:flex-start}
  #flowBar.dock .mbRow::-webkit-scrollbar{display:none}
  #flowBar.dock .mbRow button{flex:none; min-width:36px; height:36px}
  #flowBar.dock .fbPop{align-self:stretch; max-width:none; max-height:40vh; overflow-y:auto}
  #app.focusmode #flowBar.dock{bottom:12px}
  /* an open pop has the strip above the row to itself: the folded sheet and the minimap step aside */
  #app:has(#flowBar.dock .fbPop, #mindBar.dock .mbPop) #inspector.min,
  #app:has(#flowBar.dock .fbPop, #mindBar.dock .mbPop) #minimap{display:none}
}
@media (max-width:600px) and (pointer:coarse){
  #flowBar.dock .fbPop button{min-height:32px}
  #flowBar.dock .fbKey button{height:32px; padding:0 10px}
}

/* ── Import infrastructure (79k): the dialog and the Changes bar ────────── */
.infra-modal{width:min(640px,100%); max-height:min(88vh,100%); overflow-y:auto}
.infra-modal code{font-family:var(--mono); font-size:11.5px; background:var(--surface-2); padding:1px 4px; border-radius:4px}
.infra-drop{display:block; border:1.5px dashed var(--line-2); border-radius:var(--r-md); padding:18px; text-align:center;
  color:var(--ink-2); font-size:13px; cursor:pointer; margin:0 0 12px; background:var(--surface-2)}
.infra-drop:hover,.infra-drop:focus-visible{border-color:var(--accent); color:var(--ink); outline:0}
.infra-err{color:var(--danger, #c9503f); font-size:12.5px; margin:0 0 10px}
.infra-sum{font-size:12.5px; color:var(--ink-2); margin:0 0 6px; overflow-wrap:anywhere}
.infra-counts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:4px 12px; list-style:none; padding:0; margin:0 0 10px; font-size:12.5px; color:var(--ink-2)}
.infra-counts b{color:var(--ink); font-variant-numeric:tabular-nums}
.infra-why,.infra-how{font-size:12.5px; color:var(--ink-2); margin:0 0 10px}
.infra-why summary,.infra-how summary{cursor:pointer; color:var(--ink)}
.infra-why p{margin:6px 0 0; font-family:var(--mono); font-size:11px; overflow-wrap:anywhere}
.infra-scope{font-size:12.5px; display:flex; align-items:center; gap:8px; margin:0 0 10px}
.infra-refuse{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; margin:0 0 12px; font-size:12.5px}
.infra-refuse p{margin:0 0 8px}
.infra-refuse-row{display:flex; gap:8px; flex-wrap:wrap}
.infra-refuse select{flex:1; min-width:0; height:30px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px}
.infra-fill{flex:1}
.infra-mm{width:100%; box-sizing:border-box; height:180px; margin-top:10px; font-family:var(--mono); font-size:11px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px}
.infra-script-acts{display:flex; gap:8px; margin:6px 0}
.infra-script{max-height:200px; overflow:auto; font-family:var(--mono); font-size:10.5px; line-height:1.45; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; margin:0; white-space:pre}
.infra-cmd{display:flex; gap:8px; align-items:flex-start; margin:6px 0 10px}
.infra-cmd pre{flex:1; min-width:0; margin:0; font-family:var(--mono); font-size:10.5px; line-height:1.45; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; white-space:pre-wrap; overflow-wrap:anywhere}
#infraBar{position:absolute; z-index:40; top:64px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  max-width:calc(100% - 32px); box-sizing:border-box; padding:6px 8px 6px 14px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-sm); font-size:12.5px; color:var(--ink-2)}
#infraBar[hidden]{display:none}
#infraBar b{color:var(--ink); font-variant-numeric:tabular-nums}
#infraBar .btn{height:28px}
#app.presenting #infraBar{display:none}
.share-sensitive{color:var(--danger, #c9503f)}
.infra-net{font-size:12.5px; color:var(--ink-2); margin:0 0 12px; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px}
.infra-net>summary{cursor:pointer; color:var(--ink); font-size:13px}
.infra-net p{margin:8px 0}
.infra-paste{width:100%; box-sizing:border-box; height:150px; resize:vertical; font-family:var(--mono); font-size:11px; line-height:1.4;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; white-space:pre; overflow:auto}
.infra-paste:focus-visible{outline:2px solid var(--accent); outline-offset:-1px}
.infra-net-acts{display:flex; gap:8px; margin:8px 0}
.infra-net-how{margin:6px 0 0}
.infra-net-how summary{cursor:pointer; color:var(--ink)}
.infra-net-how p{margin:8px 0 2px}
.infra-note{font-size:12.5px; color:var(--ink-2); margin:0 0 8px; padding:6px 8px; background:var(--surface-2); border-radius:var(--r-sm)}

/* ── Canvas and editing (79w–79ze): the inspector's sections ────────── */
.cv-sec .cv-row{display:flex; align-items:center; gap:6px; margin-top:5px}
.cv-lab{flex:0 0 auto; min-width:64px; font-size:11.5px; color:var(--ink-2)}
.cv-note{font-size:11.5px; color:var(--ink-3)}
.cv-field .cv-lab{min-width:0}
.cv-sec .cv-row input[type=range]{flex:1; min-width:0; accent-color:var(--accent)}
.cv-sec .cv-row output{flex:0 0 38px; text-align:right; font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--ink-2)}
.cv-sec .cv-row select{flex:1; min-width:0; height:28px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12px}
.cv-sec .cv-row button{flex:0 0 auto; height:28px; min-width:28px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font:inherit; font-size:12px}
.cv-sec .cv-row button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}
.cv-sec .cv-row button svg{width:15px; height:15px}
.cv-num{width:64px; height:28px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12px; padding:0 6px}
.cv-seg{margin-top:5px; flex-wrap:wrap}
.cv-field{display:flex; flex-direction:column; gap:3px; margin-top:6px}
.cv-field input{height:28px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px; padding:0 8px; min-width:0}
.cv-hint{margin:5px 0 0; color:var(--ink-3); line-height:1.45}
.cv-credit{margin:5px 0 0; color:var(--ink-3); overflow-wrap:anywhere}
.cv-geo-row{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.cv-geo{display:flex; align-items:center; gap:3px; font-size:11px; color:var(--ink-3)}
.cv-geo input{width:100%; min-width:0; height:26px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12px; padding:0 4px; font-variant-numeric:tabular-nums}
.cv-mini-row{margin-top:5px}
.cv-recent{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px}
.cv-recent .sw{width:20px; height:20px}
.cv-styles{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.cv-style{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 6px; border:1px solid var(--line); border-radius:12px 0 0 12px; background:var(--surface-2); color:var(--ink); font:inherit; font-size:11.5px; cursor:pointer; max-width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.cv-style i{flex:0 0 12px; height:12px; border-radius:3px; border:1.5px solid}
.cv-style-x{height:24px; width:20px; margin-left:-4px; border:1px solid var(--line); border-left:0; border-radius:0 12px 12px 0; background:var(--surface-2); color:var(--ink-3); cursor:pointer}
.cv-tagpick{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px}
.cv-tagpick button{height:20px; padding:0 8px; border:1px solid transparent; border-radius:10px; font:inherit; font-size:11px; color:var(--ink); cursor:pointer}
.cv-tagpick button[aria-pressed="true"]{border-color:var(--ink-2)}
.cv-elab input[type=text]{flex:1; min-width:0; height:26px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:12px; padding:0 6px}
.cv-elab input[type=range]{flex:0 0 70px}
.sec .seg:has(> [data-chart]){flex-wrap:wrap}
/* ── the canvas chrome: rulers, page tabs, the outline, menus ─────────── */
.cv-rulers{position:absolute; inset:0; pointer-events:none; z-index:12}
.cv-rulers[hidden]{display:none}
.cv-ruler-top,.cv-ruler-left,.cv-ruler-corner{position:absolute; background:color-mix(in srgb, var(--surface) 88%, transparent); border-color:var(--line); border-style:solid; border-width:0}
.cv-ruler-top{left:0; right:var(--mm-w); top:0; height:20px; border-bottom-width:1px}
.cv-ruler-left{left:0; top:0; bottom:0; width:20px; border-right-width:1px}
.cv-ruler-corner{left:0; top:0; width:20px; height:20px; border-right-width:1px; border-bottom-width:1px; background:var(--surface)}
.cv-ruler-top svg,.cv-ruler-left svg{display:block}
.cv-pages{position:absolute; z-index:18; left:14px; bottom:62px; display:flex; gap:3px; padding:4px; max-width:calc(100% - 260px); overflow-x:auto; scrollbar-width:thin;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08))}
.cv-pages[hidden]{display:none}
.cv-pages button{flex:0 0 auto; height:26px; padding:0 10px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-2); font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis}
.cv-pages button:hover{background:var(--surface-2); color:var(--ink)}
.cv-pages button[aria-selected="true"]{background:var(--accent-soft); color:var(--ink); font-weight:600}
.cv-page-name{height:26px; width:140px; border:1px solid var(--accent); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; padding:0 8px}
.cv-panel{position:fixed; z-index:58; top:64px; right:14px; width:270px; max-height:min(74vh,640px); overflow:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:12.5px}
.cv-panel[hidden]{display:none}
.cv-panel-head{display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface)}
.cv-panel-head b{flex:1}
.cv-panel section{padding:6px 8px 8px; border-bottom:1px solid var(--line)}
.cv-panel section:last-child{border-bottom:0}
.cv-panel h3{margin:4px 4px 4px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.cv-panel .cv-note{margin:2px 4px}
.cv-prow{display:flex; width:100%; align-items:center; gap:6px; text-align:left; border:0; background:none; color:inherit; font:inherit; padding:5px 6px; border-radius:var(--r-sm); cursor:pointer}
.cv-prow:hover{background:var(--surface-2)}
.cv-prow[aria-current="true"]{background:var(--accent-soft); font-weight:600}
.cv-prow small,.cv-lname small{margin-left:auto; color:var(--ink-3); font-weight:400}
.cv-lrow{display:flex; align-items:center; gap:2px; border-radius:var(--r-sm); padding:1px 2px}
.cv-lrow.on{background:var(--accent-soft)}
.cv-lbtn{flex:0 0 24px; height:24px; border:0; border-radius:var(--r-sm); background:none; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:12px}
.cv-lbtn:hover{background:var(--surface-2)} .cv-lbtn:disabled{opacity:.35; cursor:default}
.cv-lbtn svg{width:14px; height:14px}
.cv-lname{flex:1; min-width:0; display:flex; gap:6px; align-items:center; border:0; background:none; color:inherit; font:inherit; text-align:left; padding:4px 4px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.cv-menu{position:fixed; z-index:70; min-width:170px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.cv-menu button{display:flex; width:100%; align-items:center; gap:8px; border:0; background:none; color:var(--ink); font:inherit; font-size:13px; padding:6px 9px; border-radius:var(--r-sm); cursor:pointer; text-align:left}
.cv-menu button:hover{background:var(--surface-2)} .cv-menu button:disabled{opacity:.4}
.cv-menu button i{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); font-style:normal}
.cv-menu hr{border:0; border-top:1px solid var(--line); margin:5px 3px}
.cv-zoom-in{display:block; padding:2px 2px 5px}
.cv-zoom-in input{width:100%; height:28px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; padding:0 8px; font-variant-numeric:tabular-nums}
/* find and replace, top right */
.cv-find{position:fixed; z-index:62; top:64px; right:14px; width:min(380px, calc(100vw - 28px)); padding:8px; display:flex; flex-direction:column; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.cv-find[hidden]{display:none}
.cv-find-row{display:flex; align-items:center; gap:5px}
.cv-find-row input[type=search],.cv-find-row input[type=text]{flex:1; min-width:0; height:30px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:13px; padding:0 8px}
.cv-find-row label{display:flex; align-items:center; gap:4px; color:var(--ink-2)}
.cv-find-row [data-fr="count"]{flex:0 0 auto; color:var(--ink-3); font-variant-numeric:tabular-nums}
/* the command palette */
.cv-pal-scrim{align-items:flex-start; padding-top:12vh}
.cv-pal{width:min(560px, calc(100vw - 24px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; display:flex; flex-direction:column; max-height:70vh}
.cv-pal input{height:38px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:15px; padding:0 10px}
.cv-pal-list{overflow:auto; margin-top:6px; min-height:60px}
.cv-pal-list button{display:flex; width:100%; align-items:center; gap:10px; border:0; background:none; color:var(--ink); font:inherit; font-size:13.5px; padding:7px 9px; border-radius:var(--r-sm); text-align:left; cursor:pointer}
.cv-pal-list button span{flex:1; min-width:0}
.cv-pal-list button small{display:block; color:var(--ink-3); font-size:11px}
.cv-pal-list button[aria-selected="true"],.cv-pal-list button:hover{background:var(--accent-soft)}
.cv-pal-list button:disabled{opacity:.45}
.cv-pal-list kbd{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.cv-pal-foot,.cv-pal-none{margin:6px 4px 0; color:var(--ink-3)}
/* the crop dialog */
.cv-crop-modal{width:min(720px,100%)}
.cv-crop-stage{position:relative; display:inline-block; max-width:100%; user-select:none; touch-action:none; background:var(--surface-2)}
.cv-crop-stage img{display:block; max-width:100%; max-height:58vh}
.cv-crop-box{position:absolute; box-shadow:0 0 0 9999px rgba(0,0,0,.45); outline:2px solid #fff; cursor:move}
.cv-crop-box i{position:absolute; width:12px; height:12px; background:#fff; border:1px solid var(--accent); border-radius:2px}
.cv-crop-box i[data-h="nw"]{left:-6px; top:-6px; cursor:nwse-resize} .cv-crop-box i[data-h="ne"]{right:-6px; top:-6px; cursor:nesw-resize}
.cv-crop-box i[data-h="sw"]{left:-6px; bottom:-6px; cursor:nesw-resize} .cv-crop-box i[data-h="se"]{right:-6px; bottom:-6px; cursor:nwse-resize}
.cv-crop-stage{overflow:hidden}
.cv-crop-actions{display:flex; gap:8px; margin-top:12px; align-items:center}
/* emoji and pictures from the web */
.cv-emo{width:min(560px,100%); max-height:min(80vh,640px); display:flex; flex-direction:column}
.cv-emo input{height:34px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:14px; padding:0 10px; margin:4px 0 8px}
.cv-emo-grid{overflow:auto}
.cv-emo-grid h3{margin:8px 2px 4px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cv-emo-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)); gap:2px}
.cv-emo-row button{height:36px; border:0; border-radius:var(--r-sm); background:none; font-size:22px; cursor:pointer; font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.cv-emo-row button:hover{background:var(--surface-2)}
.cv-isrch{width:min(820px,100%); max-height:min(86vh,760px); display:flex; flex-direction:column}
.cv-isrch-bar{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.cv-isrch-bar input[type=search]{flex:1; min-width:180px; height:34px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:14px; padding:0 10px}
.cv-isrch-bar select{height:34px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit}
.cv-isrch-bar label{display:flex; gap:4px; align-items:center}
.cv-isrch-msg{margin:8px 2px; color:var(--ink-2)}
.cv-isrch-grid{overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px}
.cv-isrch-grid button{border:1px solid var(--line); border-radius:var(--r-sm); padding:0; background:var(--surface-2); cursor:pointer; aspect-ratio:4/3; overflow:hidden}
.cv-isrch-grid img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:600px){
  .cv-panel{left:8px; right:8px; width:auto; top:auto; bottom:8px; max-height:50vh}
  .cv-find{left:8px; right:8px; width:auto}
  .cv-pages{left:8px; max-width:calc(100% - 16px); bottom:110px}
}

/* ── Platform and reach (Wave 3, PLT-xxx): the installable app's bars, the
   accessibility layers, right-to-left, page view. Behaviour lives in the
   62p…62x and 79zs… parts; this is only how they look. ─────────────── */

/* the update bar (62p): a polite bar above the bottom HUD */
.plt-bar{
  position:absolute; z-index:72; left:50%; bottom:64px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:10px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow-lg);
  font-size:12.5px; max-width:calc(100% - 24px);
}
.plt-bar span{flex:1}
/* offline (62p): beside the save chip while the network is gone */
.plt-offline{
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--paper); background:var(--ink-2); border-radius:999px; padding:2px 8px; margin-right:8px; white-space:nowrap;
}
/* browser support (21-plt-support): over everything, plain */
.plt-support{
  position:fixed; inset:0; z-index:200; padding:12vh 24px; background:var(--paper); color:var(--ink);
  font:15px/1.5 var(--sans, system-ui, sans-serif); text-align:center;
}
.plt-support[hidden]{display:none}
.plt-support h2{font-size:20px; margin:0 0 12px}
.plt-support p{max-width:520px; margin:0 auto 10px}
/* WCAG 1.4.3 (PLT-059): the faintest words (hints, shortcuts, counts) at 4.5:1 or
   better — #8B92A0 on white was 3.1:1, #6E7583 on the dark surfaces 3.3:1. The
   high-contrast switch's own values (00-head .a11y-contrast) still win. */
:root{--ink-3:#636A78}
:root[data-theme="dark"]{--ink-3:#8B92A0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--ink-3:#8B92A0} }

/* the board as a list (62t) */
.plt-list{width:min(680px,100%)}
.plt-list .plt-hint{color:var(--ink-2); font-size:12.5px; margin:4px 0 10px}
.plt-list input[type="search"]{width:100%; box-sizing:border-box}
#pltListBox{list-style:none; margin:8px 0; padding:4px; max-height:min(52vh,520px); overflow:auto;
  border:1px solid var(--line); border-radius:8px; outline:none}
#pltListBox:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#pltListBox li{padding:6px 10px; border-radius:6px; font-size:13px; line-height:1.4; cursor:pointer}
#pltListBox li:hover{background:var(--surface-2)}
#pltListBox li[aria-selected="true"]{background:var(--accent-soft, var(--surface-3)); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent)}

/* Windows high contrast / forced colours (PLT-055). The chrome takes the system's
   colours and gets the borders and focus rings that backgrounds and shadows gave
   it; the drawing keeps its own colours — they are the content — and so do the
   colour swatches, which would otherwise all read as one. */
@media (forced-colors: active){
  .panel,#ctx,#ctxSub,#boards,#acctMenu,.menuSub,.modal,.plt-bar,#toast,.tip,#inspector,#library{border:1px solid CanvasText}
  #toast{background:Canvas; color:CanvasText}
  .btn,.tool,button{border:1px solid ButtonText}
  .btn[aria-pressed="true"],.tool[aria-pressed="true"],[aria-selected="true"],[aria-checked="true"]{outline:2px solid Highlight; outline-offset:-2px; forced-color-adjust:none; background:Highlight; color:HighlightText}
  :focus-visible{outline:3px solid Highlight !important; outline-offset:2px}
  #stage,.swatch,[class*="swatch"],.cv-swatch,#minimap canvas{forced-color-adjust:none}
  .scrim{background:transparent}
  .savechip,.plt-offline{border:1px solid CanvasText; border-radius:999px; padding:1px 6px}
  /* The brand mark is three gradients (10-sprite). A gradient has no forced colour,
     so the stops — ordinary elements, unlike the <use> that draws them — are
     flattened to one system colour, which is the monochrome lockup's intent. */
  #wdBrandBack stop,#wdBrandFront stop,#wdBrandWave stop{stop-color:CanvasText}
  #pltListBox li[aria-selected="true"]{box-shadow:none}
}

/* Right-to-left (62v, PLT-061): <html dir="rtl"> flips text and rows by itself;
   these mirror what is placed by left/right — the corners, the rail and the
   panels beside it, the inspector, the minimap. The canvas is not mirrored: a
   diagram means what it shows, so #stage stays left-to-right. */
[dir="rtl"] #stage{direction:ltr}
[dir="rtl"] .tl{left:auto; right:14px}
[dir="rtl"] .tr{right:auto; left:14px}
[dir="rtl"] .bl{left:auto; right:14px}
[dir="rtl"] #rail{left:auto; right:14px}
[dir="rtl"] #library{left:auto; right:calc(var(--rail-r) + 6px)}
[dir="rtl"] #morePanel,[dir="rtl"] #brushPanel{left:auto; right:calc(var(--rail-r) + 8px)}
[dir="rtl"] #inspector{right:auto; left:14px}
[dir="rtl"] #boards{left:auto; right:14px}
[dir="rtl"] #minimap{right:auto; left:14px}
[dir="rtl"] .plt-bar{direction:rtl}
/* words in shapes and in the text editor take their own direction from their
   first strong letter — Arabic or Hebrew right-to-left, Latin left-to-right —
   in any interface language */
#stage text,#stage tspan,#stage foreignObject div{unicode-bidi:plaintext}
#editor{unicode-bidi:plaintext}

.plt-support button{font:inherit; padding:6px 14px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer}