:root{
  --bg:#fbfaf8; --panel:#ffffff; --ink:#1f2328; --ink-soft:#5b636d; --ink-faint:#8a929c;
  --line:#e9e6e0; --line-strong:#ddd8cf; --sunk:#f7f5f0;
  --accent:#3b5bdb; --agent:#0d9488; --comment:#f0a500; --pr:#7048e8;
  /* Brand: magenta mark, ink type, paper ground. Kept separate from --accent,
     which is the UI's interaction colour. */
  --brand:#e0007a; --brand-bright:#ff2e96;
  --add:#e6f4ea; --add-ink:#1a7f37; --del:#fce8e6; --del-ink:#b42318;
  --radius:12px; --shadow:0 1px 2px rgba(20,20,20,.05),0 8px 28px rgba(20,20,20,.06);
  /* Surfaces and tints that used to be written as literals. Light values are
     unchanged — this pass only gave them names so a dark palette has
     something to override. */
  --paper:#fcfbf9; --sunk-2:#f2f0eb; --hover:#eceae4; --hover-2:#e2dfd8;
  --scroll:#e0dcd3; --head-bg:#faf9f6;
  --inverse:#211f1c; --inverse-ink:#fff; --inverse-hover:#332f2a;
  --bubble-bg:var(--inverse); --bubble-ink:var(--inverse-ink); --bubble-hover:var(--inverse-hover); --bubble-line:transparent;
  /* The primary button. Light mode is the accent with a white label, exactly
     as it always was — these tokens exist because dark mode can't be. */
  --cta:var(--accent); --cta-ink:#fff; --cta-hover:var(--accent-strong);
  --prose-ink:#2b3138;
  --accent-soft:#eef1ff; --accent-line:#ccd6ff; --accent-strong:#3450c9; --sel:#dfe4ff;
  --comment-bg:#fff4d6; --comment-strong:#ffe08a;
  --brand-soft:#fdeff6;
  --del-bg:#fdf3f2; --del-line:#f3d3cf;
  --add-line:#c6ecd3; --add-bg2:#eafaf1;
  --warn-bg:#fff7e6; --warn-line:#fbe3b0; --warn-ink:#8a6100;
  --agent-line:#cdeee9; --agent-bg:#f2fbfa;
  --pr-ink:#5f3dc4; --pr-faint:#8a92c8; --pr-line:#ddd3fb; --pr-bg:#f0ecff;
  --muted-dot:#b8b2a7;
  /* Referenced from the CodeMirror themes in editor-src/editor.js — those are
     plain CSS strings, so both panes ride the same palette. */
  --cursor-2:#e8590c; --syn-heading:#8250df; --syn-code:#0a7ea4; --syn-list:#b7791f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* ---------------- dark ("Panic") ----------------
   Navy ground; amber carries the structural signals — headings, list marks,
   rules, the caret — and cyan is reserved for links so the two never blur.
   Body copy is warm off-white, not #fff: pure white on navy vibrates.
   Applied by data-theme on <html>; see setTheme() in app.js. Tints that are
   near-white in light mode become near-black here, not merely darker, or the
   page turns into a light theme with the lights off. */
html[data-theme=dark]{
  --bg:#0e1620; --panel:#141d27; --ink:#e9edf0; --ink-soft:#aab5be; --ink-faint:#6f7d89;
  --line:#22303d; --line-strong:#2e3f4e; --sunk:#18232f;
  --accent:#5cc8e6; --agent:#3ec9b0; --comment:#f5b544; --pr:#8f6ce8;
  --brand:#f5b544; --brand-bright:#ffc85f;
  --add:#16301f; --add-ink:#5fd48a; --del:#3a1d1d; --del-ink:#f08a80;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 28px rgba(0,0,0,.55);

  --paper:#111a24; --sunk-2:#1c2836; --hover:#1e2b39; --hover-2:#26364a;
  --scroll:#2e3f4e; --head-bg:#18232f;
  --inverse:#e9edf0; --inverse-ink:#0e1620; --inverse-hover:#cbd3da;
  --bubble-bg:var(--panel); --bubble-ink:var(--ink); --bubble-hover:var(--sunk); --bubble-line:var(--accent-line);
  /* Dark's --accent is lightened so it can carry as *text* on a dark ground,
     which is exactly what makes it a poor ground itself: #fff on #5cc8e6 is
     1.9:1. So the button gets its own deeper blue — the one value in the dark
     palette that isn't derived from another, and the price of keeping the
     familiar light-label-on-colour shape. Hover lifts rather than darkens,
     but only as far as the label can follow: #e9edf0 holds 6.0:1 on --cta and
     5.1:1 on --cta-hover. */
  --cta:#17607a; --cta-ink:var(--ink); --cta-hover:#1a6b85;
  --prose-ink:#c3ccd4;
  --accent-soft:#16303c; --accent-line:#2b5566; --accent-strong:#7ad6ef; --sel:#22414f;
  --comment-bg:rgba(245,181,68,.13); --comment-strong:rgba(245,181,68,.30);
  --brand-soft:#33270f;
  --del-bg:#2a1717; --del-line:#5a2b2b;
  --add-line:#1f4a30; --add-bg2:#16301f;
  --warn-bg:#2e2411; --warn-line:#5c4718; --warn-ink:#f0c063;
  --agent-line:#1d4740; --agent-bg:#12241f;
  --pr-ink:#c0a6ff; --pr-faint:#7d75a8; --pr-line:#3b3163; --pr-bg:#221c3a;
  --muted-dot:#4a5966;
  --cursor-2:#ff9d5c; --syn-heading:#c9a2ff; --syn-code:#5cc8e6; --syn-list:#f5b544;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent)}
::selection{background:var(--sel)}
.scroll{overflow-y:auto;overflow-x:hidden}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:9px;border:2px solid transparent;background-clip:content-box}
.hide{display:none !important}

/* ---------------- shell ---------------- */
#shell{display:grid;grid-template-columns:var(--navw,300px) 1fr 340px;height:100vh;height:100dvh}
#shell.no-comments{grid-template-columns:var(--navw,300px) 1fr 0}
#shell.no-nav{grid-template-columns:0 1fr 340px}
#shell.no-nav.no-comments{grid-template-columns:0 1fr 0}

/* ---------------- left rail ---------------- */
#nav{background:var(--sunk);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:relative}
/* Drag the rail's right edge to resize it (persisted per browser). */
#navresize{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:5}
#navresize:hover,#navresize.dragging{background:linear-gradient(to right,transparent,rgba(224,0,122,.22))}
#nav .pad{padding:14px 12px 0}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.02em;padding:2px 4px 12px;font-size:15px}
/* The mark carries the brand colour; currentColor lets it flip to paper on a
   dark ground without a second asset. Gap to the wordmark is a third of the
   mark's width, per the kit. */
.brand .mark{width:22px;height:22px;flex:none;color:var(--brand);display:block}
.brand .word{font-family:'Space Grotesk',var(--sans);font-weight:700;font-size:17px;letter-spacing:-.04em;color:var(--ink)}
.brand .v{font-size:10px;font-weight:700;color:var(--ink-faint);border:1px solid var(--line-strong);border-radius:5px;padding:0 4px;letter-spacing:.04em}
.search{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 9px;color:var(--ink-faint);font-size:13px}
.search input{border:0;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%}
.navlbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:16px 8px 6px;display:flex;align-items:center}
.navlbl button{margin-left:auto;background:none;border:0;color:var(--ink-faint);font-size:15px;line-height:1;padding:0 3px;border-radius:5px}
.navlbl button:hover{background:var(--hover);color:var(--ink)}

/* Collapsible section headers (Docs, Skills, and any custom section). The
   whole header toggles; the ＋/⊞ inside it stop propagation. */
/* Side margins zeroed (not .navlbl's 8px): headers share the indent ladder
   with the rows, so both must measure from the same left edge. */
.navsec{cursor:pointer;border-radius:6px;padding:2px 4px;margin-left:0;margin-right:0;gap:5px}
.navsec:hover{background:var(--hover);color:var(--ink-soft)}
.navsec .seclabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navsec .seccount{font-size:10px;font-weight:700;color:var(--ink-faint);background:var(--line);border-radius:999px;padding:0 6px;margin-left:6px}
.navsec .secadd{margin-left:auto}
.navsec .secadd + .secadd{margin-left:2px}
/* Drag a doc onto a header to file it under that section. */
.navsec.dropping{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
/* Quiet until wanted — it sits under the doc list, so it must not compete
   with the docs themselves. */
.newsection{display:block;width:calc(100% - 8px);margin:2px 4px 0;padding:5px 8px;text-align:left;background:none;border:0;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-faint);letter-spacing:.01em}
.newsection:hover{background:var(--hover);color:var(--ink)}
/* Import tile: the resting-state half of the .md drop story — the mid-drag
   half is the #dropzone overlay. Doubles as a click-to-browse picker. */
.mddrop{display:block;width:calc(100% - 16px);margin:8px 8px 2px;padding:8px;text-align:center;
  background:none;border:1.5px dashed var(--line-strong);border-radius:8px;
  font-size:12px;font-weight:600;color:var(--ink-faint);cursor:pointer}
.mddrop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mddrop i{display:block;font-style:normal;font-weight:400;font-size:10.5px;margin-top:1px}
.navitem.dragging{opacity:.45}
.navitem[draggable="true"]{cursor:pointer}
.navbody{flex:1;padding:0 10px 14px}
#doclist{min-height:20px}
.navitem{display:flex;align-items:center;gap:8px;row-gap:3px;flex-wrap:wrap;padding:9px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;position:relative}
.navitem:hover{background:var(--hover);color:var(--ink)}
.navitem.active{background:var(--panel);box-shadow:0 1px 2px rgba(20,20,20,.06);color:var(--ink);font-weight:700}
.navitem.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--brand);border-radius:0 2px 2px 0}
.navitem .ic{width:18px;height:18px;flex:none;display:grid;place-items:center}
.navitem .ic svg{display:block}
.navitem .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem .cbadge{flex:none;font-size:10.5px;font-weight:700;background:var(--comment-bg);color:var(--warn-ink);border:1px solid var(--warn-line);padding:1px 6px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%)}

/* The indent ladder (docs/presence-spec.html): every row sits on one scale —
   level 0 = section header, 1 = doc or repo, 2 = skill — and every row keeps
   the same 17px chevron slot, so labels at one level share a left edge whether
   or not the row can collapse. */
#nav .navitem,#nav .navsec{padding-left:calc(4px + var(--lvl,0) * 10px)}
.disc{width:17px;height:17px;flex:none;display:grid;place-items:center;border-radius:5px;
  color:var(--ink-faint);transition:transform .14s ease;margin-left:-2px}
.disc svg{display:block}
/* Leaf rows keep the slot, drop the glyph — display:none would collapse the ladder. */
.disc.leaf{visibility:hidden}
.collapsed > .disc{transform:rotate(-90deg)}
.navitem:hover > .disc{color:var(--ink)}
.navsec:hover > .disc{color:var(--ink);background:var(--hover-2)}
.grp{position:relative}
/* Hairline down the parent's chevron centre, for groups below level 1. */
.grp[data-guide]::before{content:'';position:absolute;top:1px;bottom:3px;width:1px;
  left:calc(4px + (var(--lvl,1) - 1) * 10px + 8px);background:var(--line-strong);opacity:.75}
.navempty{font-size:12.5px;color:var(--ink-faint);padding:6px 8px;line-height:1.5}
#navfoot{border-top:1px solid var(--line);padding:10px 14px;font-size:12px;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
#navfoot .me{display:flex;align-items:center;gap:7px;cursor:pointer;border-radius:7px;padding:3px 5px;margin:-3px -5px}
#navfoot .me:hover{background:var(--hover);color:var(--ink)}
/* Settings menu off the name chip — the footer sits at the viewport bottom,
   so it opens upward. #navfoot outweighs the generic .menu placement, which
   is defined later in the file. */
#navfoot .memenu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;min-width:230px}

/* ---------------- main ---------------- */
#main{display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0;background:var(--bg)}
#bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
/* The doc title doubles as its rename control: click once to arm (the tooltip
   turns into "Click again to rename"), click again to edit in place. The text
   lives in a child so the ellipsis can clip it while the tooltip, which paints
   outside the box, stays visible. */
#bar .title{font-weight:700;font-size:14px;letter-spacing:-.01em;max-width:38ch;min-width:8ch;
  border-radius:7px;padding:2px 6px;margin:-2px -6px;cursor:text}
#bar .title .titletext{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bar .title:hover{background:var(--sunk)}
#bar .title:focus-visible{outline:2px solid var(--accent);outline-offset:0}
#bar .title.armed{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
#bar .titlein{font:700 14px/1.5 inherit;letter-spacing:-.01em;color:var(--ink);background:var(--panel);
  border:1px solid var(--accent);border-radius:7px;padding:1px 5px;margin:-2px -6px;
  width:38ch;max-width:38ch;min-width:8ch;flex:none}
#bar .path{font:11.5px var(--mono);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bar .sp{flex:1}
.tbtn{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;line-height:1.5}
.tbtn:hover{background:var(--sunk);color:var(--ink)}
.tbtn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.seg button{background:transparent;border:0;border-radius:7px;padding:4px 10px;font-size:12.5px;color:var(--ink-faint)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
#status{font-size:12px;color:var(--ink-faint);min-width:76px;display:flex;align-items:center;gap:6px}
#status .dt{width:6px;height:6px;border-radius:50%;background:var(--add-ink)}
#status.dirty .dt{background:var(--comment)}
#status.err .dt{background:var(--del-ink)}
.presence{display:flex;align-items:center}
.presence .avatar{margin-left:-6px}
.avatar{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:700;box-shadow:0 0 0 2px var(--panel);flex:none}

#banner{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13px;background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--warn-ink);flex:none}
#banner button{margin-left:auto}

#split{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0;position:relative}
#split.editor-only{grid-template-columns:1fr 0}
#split.preview-only{grid-template-columns:0 1fr}
.pane{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
.pane + .pane{border-left:1px solid var(--line)}
.paneh{padding:6px 16px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);background:var(--head-bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex:none}
/* CodeMirror host — the editor owns its own scrolling and padding. */
#src{flex:1;min-height:0;overflow:hidden;background:var(--paper)}
#src .cm-editor{height:100%}
/* Cap the text column to match the preview's 760px, gutters absorb the rest.
   Consistent wrap points across window sizes are what make remote pointers
   land on the same words for everyone. */
#src .cm-content{max-width:760px;margin:0 auto}
.linkish{background:none;border:0;font:inherit;color:var(--ink-faint);padding:0;text-transform:none;letter-spacing:0;font-weight:600}
.linkish:hover{color:var(--accent)}
#multihint{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:1px 8px;letter-spacing:0;text-transform:none}
#keysmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110}
#keysmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:420px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
#keysmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 12px}
table.keys{width:100%;border-collapse:collapse;font-size:13px}
table.keys td{padding:5px 0;vertical-align:middle;color:var(--ink-soft)}
table.keys td:first-child{width:150px;white-space:nowrap}
kbd{font:11px var(--mono);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--head-bg);color:var(--ink);margin-right:2px}
#keysmodal .go{width:100%;margin-top:16px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:9px;padding:9px;font-size:14px;font-weight:600}
/* ---------------- editable preview (live-preview CodeMirror) ---------------- */
#lp{flex:1;min-height:0;overflow:hidden;background:var(--panel)}
/* Mirror ghost — sits where #lp does (the pane is a flex column, so when the
   ghost is visible it takes the slot; #lp keeps flexing behind at zero
   leftover). Read-only by nature: it isn't an editor. */
#lpghost{position:relative;flex:1;min-height:0;background:var(--panel);padding:26px 30px 40vh}
#lpghost .chip{position:sticky;top:0;z-index:2;width:max-content;margin:0 auto 18px;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:999px;padding:3px 12px}
#lpghost .chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--comment);margin-right:7px;animation:ghostpulse 1.4s ease-in-out infinite}
@keyframes ghostpulse{0%,100%{opacity:1}50%{opacity:.35}}
#lpghostdoc{max-width:760px;margin:0 auto;opacity:.75}
/* The ghost borrows the rendered-markdown look from #preview via shared tags —
   it has its own minimal set so it doesn't depend on the version-view styles. */
#lpghostdoc h1{font-family:var(--serif);font-size:30px;line-height:1.18;margin:0 0 10px}
#lpghostdoc h2{font-family:var(--serif);font-size:21px;margin:30px 0 8px}
#lpghostdoc h3{font-family:var(--serif);font-size:17px;margin:22px 0 6px}
#lpghostdoc p,#lpghostdoc li{font-size:15.5px;line-height:1.72;color:var(--prose-ink)}
#lpghostdoc code{font:12.8px var(--mono);background:var(--sunk-2);padding:1.5px 5px;border-radius:5px}
#lpghostdoc pre{background:var(--sunk);border-radius:10px;padding:13px 15px;overflow-x:auto}
#lpghostdoc blockquote{margin:12px 0;padding:2px 0 2px 15px;border-left:3px solid var(--line-strong);color:var(--ink-soft)}
#lpghostdoc table{border-collapse:collapse;font-size:14px}
#lpghostdoc th,#lpghostdoc td{border:1px solid var(--line-strong);padding:6px 10px}
/* When the ghost is up, the (empty) editor gives up its slot entirely —
   they're flex siblings, so without this they'd split the pane. */
#lp.ghosted{display:none}

#lp .cm-editor{height:100%}
/* Bear polish (BEAR-POLISH-SPEC.md): headings share the body family — the
   serif stays in modals and marketing. Hierarchy from size and space, no H2
   rule; one brand accent for every list mark, link and control. */
#lp .cm-lp-h{font-family:inherit;letter-spacing:-.012em;font-weight:600;color:var(--ink)}
#lp .cm-lp-h1{font-size:30px;line-height:1.3;padding-bottom:6px}
#lp .cm-lp-h2{font-size:26px;line-height:1.4;padding-top:14px;padding-bottom:4px}
#lp .cm-lp-h3{font-size:20px;line-height:1.5;padding-top:8px}
#lp .cm-lp-h4{font-size:16px;line-height:1.6;padding-top:6px}
/* Revealed syntax markers: present but clearly "plumbing", not prose. */
#lp .cm-lp-mk{color:var(--ink-faint);opacity:.65;font-size:.82em;font-family:var(--mono);font-weight:400;font-style:normal}
#lp .cm-lp-code{font:.85em var(--mono);background:var(--hover);border-radius:5px;padding:2px 5px}
#lp .cm-lp-link{color:var(--brand)}
/* External hyperlinks: pointer + hover underline say "clickable"; a plain
   click opens a new tab (app.js press pair), caret-adjacent still reveals
   the markdown. Beats the selfcaret pane cursor by being the inner rule. */
#lp .cm-lp-extlink{cursor:pointer}
#lp .cm-lp-extlink:hover{text-decoration:underline}
#lp .cm-lp-quote{border-left:3px solid var(--line-strong);padding-left:15px !important;color:var(--ink-soft);font-style:italic}
#lp .cm-lp-codeblock{background:var(--sunk-2);font:13.5px/1.75 var(--mono);padding-left:20px !important;padding-right:20px !important}
#lp .cm-lp-codeblock-first{border-top-left-radius:10px;border-top-right-radius:10px;padding-top:6px}
#lp .cm-lp-codeblock-last{border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-bottom:6px}
#lp .cm-lp-fence{color:var(--ink-faint);opacity:.55}
#lp .cm-lp-olmark{color:var(--brand);font-weight:600}
/* Fixed-px bullet box so per-depth glyph sizes can't shift the ladder.
   text-indent is inherited and the box is an inline-block — without the
   reset, the line's -24px hanging indent re-applies INSIDE the box and
   paints the glyph deep into the margin. (Ordered markers are plain
   inline spans, which is why only bullets drifted.) */
#lp .cm-lp-bullet{color:var(--brand);display:inline-block;width:20px;text-indent:0}
#lp .cm-lp-bullet svg{display:inline-block;vertical-align:-3px}
#lp .cm-lp-check{accent-color:var(--brand);margin:0 6px 0 0;vertical-align:-1.5px;cursor:pointer}
#lp .cm-lp-hr{display:inline-block;width:100%;border-top:1px solid var(--hover);vertical-align:middle}
/* Bear-scale list ladder. lpInline hides the leading source spaces, so this
   is the whole geometry: the text column sits 36px in and steps 28px per
   depth; text-indent pulls only the first line back for the marker, so
   wrapped lines land exactly on the text column. */
#lp .cm-line.cm-lp-li-d0{padding-left:36px !important;text-indent:-24px}
#lp .cm-line.cm-lp-li-d1{padding-left:64px !important;text-indent:-24px}
#lp .cm-line.cm-lp-li-d2{padding-left:92px !important;text-indent:-24px}
#lp .cm-line.cm-lp-li-d3{padding-left:120px !important;text-indent:-24px}
/* Ordered markers are rendered text ("1. "), a touch narrower than the
   bullet box — must come after the depth rules to win the tie. */
#lp .cm-line.cm-lp-li-ol{text-indent:-18px}
/* Fold carets: the editor theme pins them to the line top, which fits its
   13.5px mono lines. Preview headings are 16–30px, so stretch the caret
   over the line box and center it, mirroring each heading's padding so it
   lines up with the text rather than the box. One static chevron, rotated
   shut off the widget's .folded class. */
#lp .cm-headcaret{top:0;bottom:0;display:flex;align-items:center;font-size:12px;padding:0 6px}
#lp .cm-headcaret svg{transition:transform .14s ease;transform:rotate(90deg)}
#lp .cm-headcaret.folded svg{transform:none}
/* List-item fold carets: smaller (the widget draws 13px), sitting just left
   of their own bullet — one rule per depth because the caret is positioned
   against the line box, not the indented text. */
#lp .cm-lp-li .cm-headcaret{right:auto}
#lp .cm-lp-li-d0 .cm-headcaret{left:-6px}
#lp .cm-lp-li-d1 .cm-headcaret{left:22px}
#lp .cm-lp-li-d2 .cm-headcaret{left:50px}
#lp .cm-lp-li-d3 .cm-headcaret{left:78px}
#lp .cm-lp-h1 .cm-headcaret{padding-bottom:6px}
#lp .cm-lp-h2 .cm-headcaret{padding-top:14px;padding-bottom:4px}
#lp .cm-lp-h3 .cm-headcaret{padding-top:8px}
#lp .cm-lp-h4 .cm-headcaret{padding-top:6px}
/* Rendered blocks (mermaid, images) — same card the old preview drew. */
#lp .cm-lp-block{cursor:pointer}
#lp .cm-lp-mermaid{margin:10px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow-x:auto;text-align:center}
#lp .cm-lp-mermaid svg{max-width:none}
#lp .cm-lp-mermaid.failed{background:var(--del-bg);border-color:var(--del-line);text-align:left}
#lp .cm-lp-mermaid.failed pre{background:none;border:0;padding:0;color:var(--del-ink);font-size:12px;white-space:pre-wrap;margin:0}
#lp .cm-lp-image{margin:8px 0}
#lp .cm-lp-image img{max-width:100%;border-radius:8px}
/* ---------------- live tables (editable grid in the preview) --------------
   The rails live in the widget's own padding rather than at a negative offset,
   so they can't clip out of the prose column on a narrow pane. */
#lp .cm-lp-table{margin:14px 0 16px;padding:16px 0 0 16px;position:relative;user-select:text}
#lp .cm-tb-scroll{overflow-x:auto;position:relative;max-width:100%}
#lp .cm-tb-scroll::-webkit-scrollbar{height:8px}
#lp .cm-tb-scroll::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid transparent;background-clip:content-box}
#lp table.cm-tb{border-collapse:separate;border-spacing:0;font-size:14.5px;line-height:1.55;
  border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:var(--panel);max-width:100%}
#lp table.cm-tb th,#lp table.cm-tb td{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:8px 12px;text-align:left;vertical-align:top;position:relative;min-width:74px;outline:none}
#lp table.cm-tb th:last-child,#lp table.cm-tb td:last-child{border-right:0}
#lp table.cm-tb tr:last-child th,#lp table.cm-tb tr:last-child td{border-bottom:0}
/* The top row is always a header and always looks like one, even when empty —
   a brand-new table's header IS empty, and hiding it would open every fresh
   table with no title row and no way to click into one. */
#lp table.cm-tb th{background:var(--sunk);font-weight:700;color:var(--ink)}
#lp table.cm-tb th[data-empty]::after{content:attr(data-empty);color:var(--ink-faint);font-weight:500;opacity:.55;pointer-events:none}
#lp table.cm-tb [data-align=center]{text-align:center}
#lp table.cm-tb [data-align=right]{text-align:right}
#lp table.cm-tb code{background:var(--sunk);border-radius:5px;padding:1px 5px;font:13px var(--mono)}
#lp table.cm-tb .cm-tb-editing{background:var(--brand-soft);box-shadow:inset 0 0 0 2px rgba(224,0,122,.32)}
#lp table.cm-tb th.cm-tb-editing{background:var(--brand-soft)}
/* Comment highlights land on the whole cell: a comment's pin is a character
   range and a cell is a character range, so the cell is the unit that carries
   the mark. Clicking it opens the thread, same as commented prose. */
#lp table.cm-tb td.cm-comment-mark,#lp table.cm-tb th.cm-comment-mark{
  background:var(--comment-bg);box-shadow:inset 0 -2px 0 var(--comment);cursor:pointer}
#lp table.cm-tb td.cm-comment-mark-active,#lp table.cm-tb th.cm-comment-mark-active{
  background:var(--comment-strong);box-shadow:inset 0 0 0 2px rgba(240,165,0,.45)}

#lp .cm-tb-colrail,#lp .cm-tb-rowrail,#lp .cm-tb-corner{opacity:0;transition:opacity .12s}
#lp .cm-lp-table:hover .cm-tb-colrail,#lp .cm-lp-table:hover .cm-tb-rowrail,#lp .cm-lp-table:hover .cm-tb-corner,
#lp .cm-lp-table.cm-tb-hot .cm-tb-colrail,#lp .cm-lp-table.cm-tb-hot .cm-tb-rowrail,#lp .cm-lp-table.cm-tb-hot .cm-tb-corner{opacity:1}
/* The column rail sits INSIDE the scroller so it travels with a table wider
   than the prose column; the row rail sits outside so it doesn't slide away. */
#lp .cm-tb-colrail{position:relative;height:9px;margin-bottom:6px}
#lp .cm-tb-rowrail{position:absolute;left:0;top:0;width:9px;height:100%}
#lp .cm-tb-chip{position:absolute;border:0;background:var(--line-strong);border-radius:4px;padding:0;
  font-size:0;color:transparent;cursor:grab}
#lp .cm-tb-chip.cm-tb-col{top:0;height:9px}
#lp .cm-tb-chip.cm-tb-row{left:0;width:9px}
#lp .cm-tb-chip:hover,#lp .cm-tb-chip.cm-tb-dragging{background:var(--brand)}
#lp .cm-tb-chip.cm-tb-dragging{opacity:.5;cursor:grabbing}
#lp .cm-tb-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#lp .cm-tb-corner{position:absolute;left:0;width:9px;height:9px;border:0;padding:0;border-radius:3px;background:var(--line-strong)}
#lp .cm-tb-corner:hover{background:var(--brand)}
/* Only the append marker at each rail's end is visible at rest; the gaps carry
   invisible-but-hoverable ones, so inserting is one click where you point
   without littering the table with plus signs. */
#lp .cm-tb-ins{position:absolute;border:0;background:none;color:var(--ink-faint);padding:0;opacity:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;border-radius:50%}
#lp .cm-tb-ins.cm-tb-col{top:-3.5px;width:16px;height:16px;margin-left:-8px}
#lp .cm-tb-ins.cm-tb-row{left:-3.5px;width:16px;height:16px;margin-top:-8px}
#lp .cm-lp-table:hover .cm-tb-ins.cm-tb-end,#lp .cm-lp-table.cm-tb-hot .cm-tb-ins.cm-tb-end{opacity:.5}
#lp .cm-tb-ins:hover{opacity:1;color:var(--brand);background:var(--brand-soft)}
#lp .cm-lp-table.cm-tb-dragging-any .cm-tb-ins{opacity:0 !important}
#lp .cm-tb-dropline{position:absolute;background:var(--brand);border-radius:2px;z-index:6;pointer-events:none;
  box-shadow:0 0 0 2px rgba(224,0,122,.18)}
#lp .cm-tb-dropline.cm-tb-col{width:2px}
#lp .cm-tb-dropline.cm-tb-row{height:2px}
/* Hovering a chip lights its row or column, so the mapping is legible before
   you commit to anything. */
/* Column resize: a grip on each column border, under the rail's "+" row. */
#lp .cm-tb-resize{position:absolute;width:9px;margin-left:-5px;cursor:col-resize;z-index:5;touch-action:none}
#lp .cm-tb-resize::after{content:"";position:absolute;left:3.5px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--brand);opacity:0;transition:opacity .12s}
#lp .cm-tb-resize:hover::after,#lp .cm-tb-resize.cm-tb-resizing::after{opacity:1}
#lp .cm-lp-table.cm-tb-resizing-any .cm-tb-ins{opacity:0 !important}
#lp table.cm-tb[style*="fixed"] th,#lp table.cm-tb[style*="fixed"] td{overflow-wrap:anywhere}
body.cm-tb-col-resizing,body.cm-tb-col-resizing *{cursor:col-resize !important;user-select:none !important}
#lp table.cm-tb td.cm-tb-hl,#lp table.cm-tb th.cm-tb-hl{background:rgba(224,0,122,.055)}
#lp table.cm-tb th.cm-tb-hl{background:rgba(224,0,122,.10)}
/* While a cell holds the caret the pane's own cursor is parked inside a
   replaced range; hide it so there's only one caret on screen. */
.cm-table-editing .cm-cursor{display:none}

/* overflow-anchor off: folding hides big chunks of content and the browser's
   scroll anchoring guesses wrong — toggleFold pins the clicked heading itself. */
#previewscroll{overflow-anchor:none}
#previewwrap{flex:1;padding:26px 30px 40vh}
#preview{max-width:760px;margin:0 auto}

/* ---------------- rendered markdown ---------------- */
#preview h1{font-family:var(--serif);font-size:30px;line-height:1.18;margin:0 0 10px;letter-spacing:-.01em}
#preview h2{font-family:var(--serif);font-size:21px;margin:30px 0 8px;letter-spacing:-.01em;padding-bottom:5px;border-bottom:1px solid var(--line)}
#preview h3{font-family:var(--serif);font-size:17px;margin:22px 0 6px}
#preview p,#preview li{font-size:15.5px;line-height:1.72;color:var(--prose-ink)}
#preview ul,#preview ol{padding-left:22px;margin:8px 0}
#preview li{margin:4px 0}
#preview li>p{margin:2px 0}
#preview code{font:12.8px var(--mono);background:var(--sunk-2);padding:1.5px 5px;border-radius:5px;border:1px solid var(--line)}
#preview pre{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:13px 15px;overflow-x:auto}
#preview pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.6}
#preview blockquote{margin:12px 0;padding:2px 0 2px 15px;border-left:3px solid var(--line-strong);color:var(--ink-soft)}
#preview table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px;display:block;overflow-x:auto}
#preview th,#preview td{border:1px solid var(--line-strong);padding:7px 11px;text-align:left;vertical-align:top}
#preview th{background:var(--sunk);font-weight:700}
#preview tr:nth-child(even) td{background:var(--paper)}
#preview hr{border:0;border-top:1px solid var(--line);margin:26px 0}
#preview img{max-width:100%}
.mermaid-block{margin:16px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow-x:auto;text-align:center}
/* Natural size, not clamped — the wrapper scrolls when a diagram is wider than
   the pane. Clamping to 100% shrank text to nothing in the split view. */
.mermaid-block svg{max-width:none}
.mermaid-block.failed{background:var(--del-bg);border-color:var(--del-line);text-align:left}
.mermaid-block.failed pre{background:none;border:0;padding:0;color:var(--del-ink);font-size:12px;white-space:pre-wrap}

/* comment anchors inside the preview */
.cmark{background:var(--comment-bg);border-bottom:2px solid var(--comment);border-radius:2px;cursor:pointer;padding:0 1px}
.cmark:hover{background:var(--comment-strong)}
.cmark.active{background:var(--comment-strong);box-shadow:0 0 0 2px rgba(240,165,0,.3)}
.cmark.pending{background:var(--accent-soft);border-bottom-color:var(--accent)}

/* selection → comment bubble */
/* The comment affordance floats right next to the words you just selected,
   which is why it doesn't borrow --inverse the way a toast does: inverted on
   a dark document is a white pill mid-paragraph. Its own tokens instead —
   the dark chip stays in light mode, dark mode gets a raised surface. */
#bubble{position:absolute;z-index:70;background:var(--bubble-bg);color:var(--bubble-ink);
  border:1px solid var(--bubble-line);border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;gap:6px}
#bubble:hover{background:var(--bubble-hover)}

/* ---------------- comments rail ---------------- */
#rail{background:var(--sunk);border-left:1px solid var(--line);display:flex;flex-direction:column;height:100vh;overflow:hidden}
#railh{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex:none}
#railh .h{font-weight:700;font-size:13.5px}
#railh .n{font-size:12px;color:var(--ink-faint)}
#threads{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1}
.thread{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 11px;box-shadow:var(--shadow);cursor:pointer}
.thread.active{border-color:var(--comment-strong);box-shadow:0 0 0 2px rgba(240,165,0,.18),var(--shadow)}
.thread.orphan{opacity:.75}
.thread .anchor{font-size:12px;color:var(--warn-ink);font-weight:600;border-left:2px solid var(--comment);padding-left:8px;margin-bottom:8px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thread.orphan .anchor{color:var(--ink-faint);border-left-color:var(--line-strong);text-decoration:line-through}
.crow{display:flex;gap:8px;margin:8px 0}
.crow .avatar{width:23px;height:23px}
.cbody{min-width:0;flex:1}
.cbody .who{font-size:12.5px;font-weight:600}
.cbody .who .when{font-size:11px;color:var(--ink-faint);margin-left:6px;font-weight:400}
.cbody .ctext{font-size:13px;line-height:1.5;color:var(--prose-ink);margin-top:1px;white-space:pre-wrap;word-wrap:break-word}
.cfoot{display:flex;gap:7px;margin-top:8px;align-items:center}
.cfoot input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:12.5px var(--sans);outline:none;background:var(--panel)}
.cfoot input:focus{border-color:var(--accent)}
.mini{font-size:11.5px;color:var(--ink-faint);border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:4px 8px;white-space:nowrap}
.mini:hover{color:var(--add-ink);border-color:var(--add-line);background:var(--add-bg2)}
.mini.danger:hover{color:var(--del-ink);border-color:var(--del-line);background:var(--del-bg)}
#composer{border:1px solid var(--accent-line);border-radius:11px;background:var(--panel);padding:10px 11px;box-shadow:0 0 0 2px rgba(59,91,219,.1),var(--shadow)}
#composer textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:13px var(--sans);outline:none;resize:vertical;min-height:60px}
#composer textarea:focus{border-color:var(--accent)}
#composer .go{background:var(--cta);color:var(--cta-ink);border:1px solid var(--cta);font-weight:600}
#composer .go:hover{background:var(--cta-hover);color:var(--cta-ink)}
.railempty{font-size:12.5px;color:var(--ink-faint);line-height:1.6;padding:10px 4px}
#resolvedwrap{border-top:1px solid var(--line);padding:10px 12px}
#resolvedtoggle{font-size:12px;color:var(--ink-faint);background:none;border:0;padding:2px}
#resolvedtoggle:hover{color:var(--ink)}

/* ---------------- modal ---------------- */
#modal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100}
#modal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:340px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
#modal h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
#modal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
#modal input{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font:14px var(--sans);outline:none}
#modal input:focus{border-color:var(--accent)}
#modal .go{width:100%;margin-top:12px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:9px;padding:9px;font-size:14px;font-weight:600}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--inverse);color:var(--inverse-ink);font-size:13px;padding:8px 15px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:120}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* A guest reached one open doc by link. They have no library to browse — but a
   blank rail says "broken", not "sign in". So the rail stays, showing the shape
   of a workspace behind the one thing they can act on. */
#shell.guest .navbody,
#shell.guest #navfoot .signout,
#shell.guest #mcpbtn{display:none}
#shell.guest #guestnav{display:block}
/* Hidden for signed-in users. Not .hide, which is !important and would beat
   the .guest rule above. */
#guestnav{display:none;padding:4px 12px 14px}
.guestcta{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.guestcta b{display:block;font-size:13.5px;margin-bottom:5px;color:var(--ink)}
.guestcta span{display:block;font-size:12px;line-height:1.5;color:var(--ink-soft);margin-bottom:11px}
.guestcta .go{width:100%;background:var(--cta);color:var(--cta-ink);border:0;border-radius:8px;padding:8px;font-size:13px;font-weight:600}
.guestcta .go:hover{background:var(--cta-hover)}
/* The shape of a doc list, not a fake one: no text, and it fades out so it
   reads as a preview rather than content that failed to load. */
.ghosts{margin-top:18px;-webkit-mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 45%,transparent 100%);pointer-events:none;user-select:none}
.ghostlbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  margin:14px 8px 8px;opacity:.55}
.ghost{height:9px;border-radius:5px;background:var(--hover-2);margin:9px 8px}
.ghost.w80{width:80%} .ghost.w75{width:75%} .ghost.w70{width:70%}
.ghost.w65{width:65%} .ghost.w60{width:60%} .ghost.w55{width:55%} .ghost.w50{width:50%}

/* ---------------- realtime presence ---------------- */
#main{position:relative}
#pointers{position:absolute;inset:0;pointer-events:none;z-index:60;overflow:hidden}
/* Cursor "Tail" + name "Flush" (docs/presence-spec.html). The peer colour
   arrives as --c. The shadow lives on the wrapper as a filter, not on the svg
   or the label: the label's chamfer is a clip-path, which eats box-shadow —
   the wrapper's drop-shadow shades silhouette and label together. The svg's
   -2px margins put the (2,2) apex on the element origin, so translate(x,y)
   lands the point exactly. */
.fpointer{position:absolute;top:0;left:0;will-change:transform;
  transition:transform .08s linear,opacity .3s ease;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
/* A held-still pointer decays in two steps (app.js toggles these): 30s quiet
   dims it, a few minutes removes it. Order matters — stale after dim so full
   disappearance wins. Any movement snaps it back at the base .3s. */
.fpointer.dim{opacity:.35;transition:transform .08s linear,opacity 1s ease}
.fpointer.stale{opacity:0;transition:transform .08s linear,opacity 2s ease}
.fpointer svg{display:block;margin:-2px 0 0 -2px;filter:none}
.fpointer .ptr path{fill:var(--c)}
.fpointer .lab{position:absolute;left:11px;top:12px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;line-height:1}
.fpointer .lab span{display:block;background:var(--c);padding:4px 9px 5px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}

.livepill{border:1px solid transparent;font-size:11.5px;flex:none}
.livepill.islive{background:var(--add-bg2);color:var(--add-ink);border-color:var(--add-line)}
.livepill.ispolling{background:var(--sunk-2);color:var(--ink-faint);border-color:var(--line-strong)}

.avatar.clickable{cursor:pointer}
/* The hover transform mints a stacking context on the avatar, which traps the
   tooltip inside it — and an avatar sits below the follow frame (z 65), so the
   tooltip painted underneath it. Lift the avatar itself whenever its tooltip
   is showing (hover or the forced handshake announcement). */
.avatar.clickable:hover{transform:translateY(-1px);z-index:160}
[data-tip].tipforce{z-index:160}

/* Instant tooltip — native title waits ~a second, long enough that nobody
   learns the avatars are clickable. Pure CSS, shows on hover immediately.
   .tipforce pins it open without hover — the follow-handshake announcement. */
/* Any hover effect that mints a stacking context (transform, filter) traps
   the tooltip at the element's own paint level — under later siblings like
   the pane headers. Lift every tooltip-bearer while its tooltip shows. */
[data-tip]{position:relative}
[data-tip]:hover,[data-tip].tipforce{z-index:160}
[data-tip]:hover::after,[data-tip].tipforce::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;
  transform:translateX(-50%);background:var(--inverse);color:var(--inverse-ink);font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:7px;white-space:nowrap;z-index:150;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.2)}
/* Follow rings, both derived live from presence:
   solid ring  = someone I follow;
   hollow ring = someone following me (thin circle floated off the avatar);
   mutual      = solid ring with the hollow one drawn outside it. */
.avatar.following{box-shadow:0 0 0 2px var(--panel),0 0 0 5px var(--follow-color,var(--accent))}
.avatar.follower{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--peer-color,var(--accent))}
.avatar.following.follower{box-shadow:0 0 0 2px var(--panel),0 0 0 5px var(--follow-color,var(--accent)),
  0 0 0 7px var(--panel),0 0 0 8.5px var(--peer-color,var(--accent))}
/* ---------------- workspace presence: the split stack ----------------
   Same-doc people render full size on the left; a thin divider; then everyone
   elsewhere in the workspace, smaller and dimmed. Click one to jump to their
   doc and follow. Overflow past 4 collapses into +N, expandable in place. */
.pdiv{width:1px;height:18px;background:var(--line-strong);margin:0 8px 0 10px;flex:none}
.avatar.elsewhere{width:21px;height:21px;font-size:9px;opacity:.8}
.pmore{border:1px solid var(--line-strong);background:var(--sunk);color:var(--ink-soft);
  width:23px;height:23px;border-radius:50%;font-size:9.5px;font-weight:700;cursor:pointer;flex:none;
  box-shadow:0 0 0 2px var(--panel);position:relative;margin-left:-4px}
.pmore:hover{background:var(--hover);z-index:160}

/* Per-doc stacks in the nav: who's inside each doc, on their own line under
   the name — prominent, with room for several before +N. Indent lines the
   stack up with the title text (disc 17 + gap 8 + icon 18 + gap 8). */
.navavs{display:flex;flex-basis:100%;margin-left:51px}
.navmini{width:17px;height:17px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;
  font-size:9px;font-weight:700;box-shadow:0 0 0 1.5px var(--sunk);flex:none}
.navmini+.navmini{margin-left:-4px}
.navmini-n{background:var(--hover-2);color:var(--ink-soft)}
.navitem.active .navmini{box-shadow:0 0 0 1.5px #fff}

/* While following someone, their colour frames the document content — below the
   pane headers, not the toolbar. Answers "why is my view moving?" at a glance. */
#followframe{position:absolute;left:0;right:0;bottom:0;z-index:65;pointer-events:none;
  border:3px solid var(--follow-color)}
/* Sits in the pane-header strip's blank space, resting on the border like a
   tab — so it never covers the document itself. */
#followchip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);pointer-events:auto;
  background:var(--follow-color);color:#fff;font-size:11.5px;font-weight:700;
  padding:2px 12px 3px;border-radius:9px 9px 0 0;cursor:pointer;border:0;
  box-shadow:0 -2px 8px rgba(0,0,0,.12);white-space:nowrap}
#followchip:hover{filter:brightness(1.08)}

/* Presenter: sits in the toolbar just left of the viewer avatars — the people
   it invites. Only shown when co-viewers are actually in the doc — sharing to
   an empty room means nothing. */
#sharebeam{display:inline-flex;align-items:center;gap:6px;flex:none;margin-right:4px;
  background:var(--inverse);color:var(--inverse-ink);border:0;border-radius:999px;padding:5px 12px;
  font-size:12px;font-weight:600}
#sharebeam:hover{background:var(--inverse-hover)}
#sharebeam.sharing{background:var(--accent)}
#sharebeam.sharing:hover{background:var(--accent-strong)}
#sharebeam svg{flex:none}

/* Viewer: the invite. Deliberately prominent — top centre, drops in. */
#sharenotif{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:130;
  display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:14px;padding:11px 13px;box-shadow:0 18px 50px rgba(0,0,0,.22);
  animation:sharenotif-in .25s ease}
#sharenotif .body{font-size:13.5px;color:var(--ink);white-space:nowrap}
#sharenotif .avatar{width:30px;height:30px;font-size:12px}
@keyframes sharenotif-in{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (max-width:820px){
  #sharenotif{width:min(94vw,420px);flex-wrap:wrap}
}

/* y-codemirror remote carets: labels always visible (Rajiv's pick), not
   hover-only. CodeMirror's own element, hence the !importants — and it sets
   its own border-radius, which the clip-path chamfer needs zeroed.
   text-indent must be re-zeroed like the bullets above: the label sits inside
   the line's inline flow, so a list line's hanging indent reaches it, shoves
   the name left of the box, and the clip-path swallows the overhang. */
.cm-ySelectionInfo{
  opacity:1 !important;
  transition:none !important;
  font-size:10px !important;
  font-weight:700 !important;
  font-family:var(--sans) !important;
  padding:2px 6px 3px !important;
  border-radius:0 !important;
  text-indent:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
  top:-1.6em !important;
  z-index:40;
}
.cm-ySelectionCaret{position:relative}

/* ⌘L: everyone else's presence off. Selections keep their text (the span
   wraps it), so they lose their colour rather than their display. */
body.nocursors .cm-ySelection{background:transparent !important}
body.nocursors .cm-ySelectionCaret,body.nocursors #pointers,body.nocursors #stageptrs,
body.nocursors .scaret,body.nocursors .cm-foldchips,body.nocursors .pv-foldchips{display:none !important}

/* Your own cursor, drawn the way peers see it — app.js toggles .selfcaret
   while the doc is live-shared with at least one other person. Styled caret
   and tail pointer mean "sharing"; native means "alone or offline". */
.selfcaret .cm-content{cursor:var(--me-cursor,text)}
.selfcaret .cm-cursor{border-left-color:var(--me-color,var(--accent)) !important;border-left-width:2px !important}
.selfcaret .cm-cursor-primary{position:relative}
.selfcaret .cm-cursor-primary::after{
  content:var(--me-name,"you");position:absolute;top:-1.6em;left:-2px;
  background:var(--me-color,var(--accent));color:#fff;font-size:10px;font-weight:700;
  font-family:var(--sans);padding:2px 6px 3px;line-height:normal;white-space:nowrap;
  text-indent:0;   /* same hanging-indent inheritance as .cm-ySelectionInfo */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%)}

/* ---------------- copy menu ---------------- */
.menuwrap{position:relative}
.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:80;background:var(--panel);border:1px solid var(--line-strong);border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:5px;min-width:290px}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px}
.menu button:hover{background:var(--sunk)}
.menu button b{display:block;font-size:13px;color:var(--ink)}
.menu button span{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}

/* ---------------- doc settings menu ---------------- */
.menuhead{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);padding:7px 10px 3px}
.menudiv{height:1px;background:var(--line);margin:5px 4px}
.menu button{position:relative;padding-right:34px}
.menu button .check{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:700;display:none}
.menu button.on .check{display:inline}
.menu button.danger b{color:var(--del-ink)}
.menu button.danger:hover{background:var(--del-bg)}
/* Base pill: the badges never had padding or rounding of their own, which is
   why they read as cramped rectangles next to the doc title. */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;line-height:1.4;font-weight:600}
.hiddenpill{background:var(--pr-bg);color:var(--pr);border:1px solid var(--pr-line);flex:none;font-size:11.5px}

/* ---------------- open / private pill ---------------- */
/* Icon-only now: a globe for open, the workspace's mark for members-only. */
.openpill{cursor:pointer;border-width:1px;border-style:solid;font-size:11.5px;flex:none;display:grid;place-items:center;width:26px;height:22px;padding:0}
.openpill svg{width:14px;height:14px;display:block}
.openpill .wsmark{width:15px;height:15px}
.openpill .wsletter{display:grid;place-items:center;border-radius:4px;background:var(--ink-faint);color:#fff;font-size:9.5px;font-weight:700}
.openpill.isprivate{background:var(--sunk-2);color:var(--ink-soft);border-color:var(--line-strong)}
.openpill.isopen{background:var(--add-bg2);color:var(--add-ink);border-color:var(--add-line)}
.openpill:hover{filter:brightness(.97)}
.iconly{padding:5px 9px;display:none}
.signout{margin-left:auto;font-size:11.5px}

/* ---------------- gate / modals ---------------- */
#gate{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:200;padding:20px}
#gate .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 32px;width:min(420px,100%);box-shadow:var(--shadow);text-align:center}
#gate .brand.big{justify-content:center;font-size:19px;margin-bottom:18px}
#gate .brand.big .mark{width:28px;height:28px}
#gate .brand.big .word{font-size:22px}
#gate h2{font-family:var(--serif);font-size:23px;margin:0 0 6px}
#gate p{font-size:13.5px;color:var(--ink-soft);margin:0 0 20px;line-height:1.55}
#gbtn{display:flex;justify-content:center;min-height:44px}
.note{margin-top:16px;font-size:12.5px;color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:9px;padding:9px 11px;line-height:1.5;text-align:left}
.err{margin-top:14px;font-size:12.5px;color:var(--del-ink);background:var(--del-bg);border:1px solid var(--del-line);border-radius:9px;padding:9px 11px;line-height:1.5;text-align:left}
#copyfallback{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:115;padding:16px}
#copyfallback .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(680px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#copyfallback h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
#copyfallback p{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
#copyfallback textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:11px 13px;font:12px/1.6 var(--mono);outline:none;resize:vertical}
/* Section picker — same shell as #newmodal, with a list of existing sections
   above a free-text field so the common case is one click. */
#secmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:112;padding:16px}
#secmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(420px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#secmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
#secmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px}
#seclist{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;max-height:240px;overflow-y:auto}
#seclist button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font-size:13.5px;color:var(--ink)}
#seclist button:hover{background:var(--sunk)}
#seclist button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
#seclist button .check{margin-left:auto;font-size:12px}
#secmodal input{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font:13.5px var(--sans);outline:none}
#secmodal input:focus{border-color:var(--accent)}
#newmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#newmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(620px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#newmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 4px}
#newmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px}
#newmodal textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:11px 13px;font:12.5px/1.65 var(--mono);outline:none;resize:vertical}
#newmodal textarea:focus,#newmodal input:focus{border-color:var(--accent)}
#newmodal input{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font:13.5px var(--sans);outline:none}
.row{display:flex;gap:9px;margin-top:10px;align-items:center}
.row.end{justify-content:flex-end}
.go.inline{width:auto;margin:0;padding:8px 18px;background:var(--cta);color:var(--cta-ink);border:0;border-radius:9px;font-size:13.5px;font-weight:600}
.go.inline:disabled{opacity:.6}
.cbody .who .guesttag{font-size:10px;font-weight:700;color:var(--ink-faint);border:1px solid var(--line-strong);border-radius:4px;padding:0 4px;margin-left:5px}

/* ---------------- mobile ---------------- */
@media (max-width:1100px) and (min-width:821px){
  #shell{grid-template-columns:0 1fr 320px}
  #shell.nav-open{grid-template-columns:var(--navw,300px) 1fr 320px}
  #split{grid-template-columns:0 1fr}
  .iconly{display:inline-flex}
}

@media (max-width:820px){
  body.narrow #shell,#shell{grid-template-columns:1fr !important}
  .iconly{display:inline-flex}
  /* Header, two rows: row 1 says which doc you're in, row 2 acts on it.
     Everything cut below is still reachable — the pills only ever opened the
     ⋯ menu, and Share is a URL you can already copy from the address bar. */
  #bar{flex-wrap:wrap;gap:7px;row-gap:8px;padding:9px 10px}
  /* Share stays: iOS Safari does not reliably reflect replaceState in the
     address bar, so "copy the URL from the bar" fails exactly on phones —
     the Share button carries the canonical link instead. Copy-export is the
     desktop/agent workflow and cedes its slot. */
  #bar .path,#bar .presence,#bar .sp,#sharebeam,
  #bar .openpill,#bar .hiddenpill,#status,.copywrap{display:none}
  .tbtn{padding:5px 8px;font-size:12px}
  /* .wide{display:none} used to live here — nothing carries a bare .wide,
     so all it hid was every card.wide modal, leaving phones a blurred
     backdrop with no card. The cards already cap at min(620px,100%). */

  /* Row 1 — the title gets the whole line now that the pills are gone, so a
     doc name is readable instead of "revenue-dashbo…". */
  #navbtn{order:1}
  #bar .title{order:2;flex:1;min-width:0;max-width:none;font-size:14px}
  #bar .titlein{order:2;flex:1;width:auto;min-width:0;max-width:none}
  .docmenuwrap{order:3}
  /* Forces the wrap, so the rows can't reflow into three on a long title. */
  #bar::after{content:"";order:4;flex-basis:100%;height:0}

  /* Row 2 — view modes on the left, comments anchored right. */
  #viewseg{order:5}
  #sharebtn{order:6}
  #signinbtn{order:7}
  #railbtn{order:8;margin-left:auto}

  /* iOS Safari zooms the entire page when you focus an input smaller than
     16px, and it does not zoom back out — which left the layout clipped and
     shifted sideways for the rest of the session. Every field here was under
     16px, the comment composer worst of all. */
  input,textarea,select{font-size:16px}
  /* contenteditable triggers the same iOS focus-zoom as inputs; the Mono
     pane was 13.5px. The preview is already 16px. */
  #src .cm-content{font-size:16px}
  /* desktop coaching, phone clutter */
  #keyshelp,#keyshelplp{display:none}

  /* The pane strip slides away as you scroll down and returns on scroll up
     (app.js toggles paneh-away). Fixed height so the exact negative margin
     tucks it cleanly under #bar; .pane's overflow:hidden clips the slide. */
  .paneh{height:30px;transition:margin-top .2s ease,opacity .2s ease}
  body.paneh-away .paneh{margin-top:-30px;opacity:0}

  /* nav + comments become overlay drawers. height:auto so top/bottom size
     them to the *visual* viewport — the desktop 100vh reaches under the
     mobile URL bar and clipped the nav footer (avatar, MCP) off-screen. */
  #nav,#rail{position:fixed;top:0;bottom:0;height:auto;z-index:90;width:min(300px,86vw);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.18)}
  #navresize{display:none}
  #nav{left:0;transform:translateX(-102%)}
  #rail{right:0;transform:translateX(102%)}
  #shell.nav-open #nav{transform:none}
  #shell:not(.no-comments) #rail{transform:none}
  #main{grid-column:1/-1}
  #split{grid-template-columns:1fr !important}
  /* One pane per mode. Three panes live in #split (editor, preview, diff) —
     hiding ":last-child" only ever hid the diff pane, which is how editor
     mode ended up stacking the preview underneath and diff mode showed all
     three. Name the panes to hide instead. */
  #split.editor-only .pane:nth-of-type(2),
  #split.preview-only .pane:nth-of-type(1),
  #split.diff-only .pane:nth-of-type(1),
  #split.diff-only .pane:nth-of-type(2){display:none}
  #previewwrap{padding:18px 16px 40vh}
  #preview h1{font-size:25px}
  #preview p,#preview li{font-size:15px}
  .menu{right:auto;left:0;min-width:min(300px,88vw);max-width:calc(100vw - 20px)}
  /* A right-edge wrap must anchor right, or the menu leaves the screen —
     the ⋯ doc menu was un-tappable on phones. */
  .docmenuwrap .menu{left:auto;right:0}
  #keysmodal .card{width:min(420px,94vw)}
}

/* ---------------- workspace switcher (top of the left rail) ------------- */
.wswrap{display:block;margin:0 0 10px}
.wschip{display:flex;align-items:center;gap:7px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 10px;text-align:left;cursor:pointer}
.wschip:hover{border-color:var(--line-strong)}
.wschip .wsname{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.wschip .wsmail{flex:1;min-width:0;font-size:11px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wschip .wscaret{font-size:9px;color:var(--ink-faint)}
.wsmenu{left:0;right:auto;top:calc(100% + 4px);min-width:240px;max-width:300px}
.gatelink{display:inline-block;text-decoration:none;padding:10px 16px;font-size:14px;font-weight:600}

/* ---------------- skills rail, versions, diff ---------------- */
.srchead{font-weight:600;color:var(--ink-soft);position:relative}
.srchead .srcx{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink-faint);font-size:14px;line-height:1;padding:2px 5px;border-radius:5px;display:none}
.srchead:hover .srcx{display:block}
.srchead .srcx:hover{background:var(--hover-2);color:var(--del-ink)}
/* Machine-local skills: Material "computer" glyph, muted so it reads as a tag. */
.lic{display:inline-flex;align-items:center;opacity:.55}
.lic svg{display:block}
.skillitem .lic{margin-left:auto}
/* Wikilinks: [[Doc name]] resolves to another doc; unresolved stays inert. */
.wl{color:var(--accent);text-decoration:none;border-bottom:1px dotted currentColor;cursor:pointer;border-radius:2px}
.wl:hover{background:var(--accent-soft)}
.wl-missing{color:var(--ink-faint);border-bottom:1px dashed currentColor;cursor:default}
/* In the editable preview links carry the brand, like every other link there. */
#lp .wl{color:var(--brand)}
#lp .wl:hover{background:var(--brand-soft)}
#lp .wl-missing{color:var(--ink-faint)}

/* ---------------- style bar (Bear-style, floats over the preview) -------- */
/* The ⌘BIU chip in the pane header that toggles it. */
.paneh .biu{display:inline-flex;align-items:baseline;gap:1px;text-transform:none;letter-spacing:0}
.paneh .biu b{font-weight:800}
.paneh .biu u{text-underline-offset:2px}
.paneh .biu.on{color:var(--brand)}
#stylebar{position:absolute;right:18px;bottom:16px;z-index:45;display:flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:4px 6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14)}
.sbbtn{background:none;border:0;border-radius:7px;min-width:28px;height:28px;padding:0 7px;
  font-size:13.5px;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;gap:2px}
.sbbtn:hover{background:var(--sunk);color:var(--ink)}
.sbbtn svg{display:block}
.sbbtn i{font-family:var(--serif)}
.sbcode{font:12px var(--mono)}
.sbwl{font:12px var(--mono);letter-spacing:-.05em}
.sbdiv{width:1px;height:16px;background:var(--line);margin:0 3px;flex:none}
.sbcaret{font-size:8px;color:var(--ink-faint)}
/* Submenus open upward — the bar sits at the pane's bottom edge. */
#stylebar .sbmenu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;min-width:160px}
.verpill{background:var(--pr-bg);border:1px solid var(--pr-line);color:var(--pr-ink);cursor:pointer;font-weight:700}
.verpill:hover{background:var(--pr-line)}
#srcmodal,#diffmodal,#fbmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#srcmodal .card,#diffmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(620px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
/* Feedback: small, personal, zero ceremony. */
#fbmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(460px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#fbmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#fbmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 12px;line-height:1.5}
#fbmodal textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;
  font:13.5px/1.5 var(--sans);outline:none;resize:vertical;margin-bottom:10px}
#fbmodal textarea:focus{border-color:var(--accent)}
.gateprivacy{display:block;margin-top:10px;font-size:11px;color:var(--ink-faint);text-decoration:none}
.gateprivacy:hover{text-decoration:underline}
#diffmodal .card{width:min(760px,100%)}
#srcmodal h2,#diffmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#srcmodal p,#diffmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
#srcmodal .row{margin-bottom:8px}
#srcmodal .row.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#srcmodal input{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font:13.5px var(--sans);outline:none}
#srcmodal input:focus{border-color:var(--accent)}
#diffbody{max-height:56vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 0;font:12px/1.55 var(--mono);margin:0 0 12px;white-space:pre-wrap}
.dl{padding:0 14px}
.dl.add{background:var(--add);color:var(--add-ink)}
.dl.del{background:var(--del);color:var(--del-ink)}
.dl.sep{color:var(--ink-faint);text-align:center;padding:4px 0;font-size:11px}
.toastbtn{background:#fff2;border:1px solid #ffffff59;color:#fff;border-radius:7px;padding:2px 10px;font-size:12px;font-weight:700;margin-left:8px;cursor:pointer}
.toastbtn:hover{background:#fff3}
#srcmodal .srchelp{font-size:12.5px;color:var(--ink-soft);background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;line-height:1.55}
#srcmodal .srchelp code{font:11px var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* ---------------- Diff view mode ---------------- */
#diffwrap{display:none}
#split.diff-only{grid-template-columns:0 0 1fr}
#split.diff-only #diffwrap{display:flex}
#diffscroll{flex:1;background:var(--paper)}
#diffdoc{max-width:760px;margin:0 auto;padding:26px 16px 40vh;font:13px/1.7 var(--mono);white-space:pre-wrap}
#diffdoc .dl{padding:0 10px;border-radius:3px}
#diffdoc .dl.add{background:var(--add);color:var(--add-ink)}
#diffdoc .dl.del{background:var(--del);color:var(--del-ink)}
.diffempty{color:var(--ink-faint);font:13.5px var(--sans);padding:8px 10px;line-height:1.6}

/* ---------------- status dot (Sublime-style), version history ------------ */
#status{min-width:auto;cursor:default;padding:4px}
#status .dt{width:8px;height:8px;border-radius:50%;background:var(--muted-dot);transition:background .2s}
#status.dirty .dt{background:var(--muted-dot)}
#status.err .dt{background:var(--del-ink);cursor:pointer}
#verbanner{display:flex;align-items:center;gap:12px;padding:8px 14px;font-size:13px;background:var(--accent-soft);border-bottom:1px solid var(--accent-line);color:var(--accent);flex:none}
#verbanner #verbannertext{cursor:pointer;font-weight:600}
#verbanner #verbannertext:hover{text-decoration:underline}
#verbanner button{margin-left:auto}
/* ---------------- share modal ---------------- */
#sharemodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#sharemodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(560px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#sharemodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#sharemodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
#sharemodal .sharelink{display:flex;gap:8px;margin-bottom:16px}
#sharemodal .sharelink input{flex:1;border:1px solid var(--line-strong);border-radius:9px;padding:8px 11px;font:12.5px var(--mono);color:var(--ink-soft);outline:none;min-width:0}
.sharehead{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.sharecopies{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.sharecopies button{text-align:left;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.sharecopies button:hover{background:var(--sunk);border-color:var(--line-strong)}
.sharecopies button b{display:block;font-size:13px;color:var(--ink)}
.sharecopies button span{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}
.sharemcp{background:var(--head-bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
#sharemodal .sharemcp{margin-bottom:4px}

#vhmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#vhmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(560px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#vhmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#vhmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
#vhlist{max-height:48vh;overflow:auto;margin-bottom:12px}
.vhrow{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:var(--paper)}
.vhrow .vhmeta{flex:1;min-width:0}
.vhrow b{display:block;font-size:13.5px;color:var(--ink)}
.vhrow span{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px}
/* Autosaves: kept, but visually behind the versions someone marked. */
.vhrow.vhauto{background:transparent;border-style:dashed;padding:5px 10px}
.vhrow.vhauto b{font-weight:500;font-size:12.5px;color:var(--ink-soft)}
.vhrow b .vhtag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line-strong);border-radius:5px;padding:0 5px;margin-left:7px;vertical-align:1px;margin-top:0}
#mcpmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#mcpmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(600px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25)}
#mcpmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#mcpmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
.mcpstep{margin-bottom:12px}
.mcpstep>b{display:block;font-size:13px;margin-bottom:3px}
.mcpstep span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.mcpstep code{font:11.5px var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.mcpstep pre{font:12px/1.6 var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;overflow-x:auto;margin:4px 0 6px;white-space:pre-wrap}
.mcphint{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:9px 12px;color:var(--accent) !important}
/* Caveats under the one-liner: present, but never louder than the command. */
.mcpstep .mcpfine{font-size:11.5px;line-height:1.55;margin-top:6px}
/* The clone path still exists; it just stops being the first thing you read. */
.mcpseg{margin:6px 0 8px;flex-wrap:wrap}
.mcpseg button{font-size:12px;padding:4px 9px}
.mcpstep button.inline{margin-right:6px}
.mcpalt{margin:12px 0 2px;font-size:12.5px}
.mcpalt summary{color:var(--ink-soft);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px}
.mcpalt summary::-webkit-details-marker{display:none}
.mcpalt summary:hover{color:var(--ink)}
.mcpalt pre{font:12px/1.6 var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;overflow-x:auto;margin:8px 0 6px;white-space:pre-wrap}
.mcpalt span{display:block;font-size:12px;color:var(--ink-soft);line-height:1.6}
.mcpalt code{font:11.5px var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:0 4px}
#mcpcard,#ghcard{position:relative;margin:14px 0 6px;background:linear-gradient(135deg,var(--accent-soft),var(--pr-bg));border:1px solid var(--accent-line);border-radius:12px;padding:12px 13px}
#mcpcard b,#ghcard b{display:block;font-size:12.5px;color:var(--accent);margin-bottom:4px;padding-right:16px}
#mcpcard span,#ghcard span{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:9px}
#mcpcard #mcpcardx,#ghcard #ghcardx{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--pr-faint);font-size:14px;line-height:1;padding:2px 4px;border-radius:5px}
#mcpcard #mcpcardx:hover,#ghcard #ghcardx:hover{background:var(--accent-line);color:var(--ink)}
/* Connect-repo wizard, step 2: the prune-the-tree folder list. */
#srcfolders{max-height:260px;overflow:auto;border:1px solid var(--line-strong);border-radius:10px;
  padding:6px;margin:10px 0 2px;display:grid;gap:2px}
.srcfolder{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;font-size:13px;cursor:pointer}
.srcfolder:hover{background:var(--sunk)}
/* #srcmodal input{width:100%} is for the text fields — undo it here at the
   same specificity, or the checkboxes stretch full-row. */
#srcmodal .srcfolder input{width:auto;flex:none;margin:0;accent-color:var(--accent)}
.srcfolder .pth{font-family:var(--mono);font-size:12.5px}
.srcfolder .cnt{margin-left:auto;color:var(--ink-faint);font-size:11.5px}
#newrepohint{font-size:12.5px;color:var(--ink-soft);margin:6px 0 0}

/* Full-screen answer to "I'm holding a file over your app" (app.js toggles
   it). The backdrop passes pointer-events through — a drop lands wherever it
   lands and the window handler owns it — but the card is a live target that
   lights up when the file crosses into it. */
#dropzone{position:fixed;inset:0;z-index:210;pointer-events:none;display:grid;place-items:center;
  background:rgba(30,28,25,.45);backdrop-filter:blur(3px)}
#dropzone .dropcard{pointer-events:auto;background:var(--panel);border-radius:16px;padding:36px 48px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3);outline:2px dashed var(--accent);
  outline-offset:-12px;display:grid;gap:6px;transition:transform .12s ease,outline-color .12s ease}
#dropzone .dropcard.over{transform:scale(1.04);outline-color:var(--ink)}
#dropzone .dropcard b{font-family:var(--serif);font-size:20px;pointer-events:none}
#dropzone .dropcard span{font-size:13px;color:var(--ink-soft);pointer-events:none}

#freeze{position:fixed;inset:0;background:rgba(30,28,25,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:200}
#freeze .card{background:var(--panel);border-radius:16px;padding:24px 26px;width:min(420px,90vw);box-shadow:0 24px 60px rgba(0,0,0,.3);text-align:center}
#freeze h2{font-family:var(--serif);font-size:20px;margin:0 0 8px}
#freeze p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 16px}
#freeze .go{background:var(--cta);color:var(--cta-ink);border:0;border-radius:9px;padding:10px 22px;font-size:14px;font-weight:600}
#statuslabel{font-size:11.5px;color:var(--del-ink);font-weight:600;margin-left:6px;white-space:nowrap}
#pastenotice{margin-top:10px;font-size:12.5px;color:var(--add-ink);background:var(--add);border:1px solid var(--add-line);border-radius:9px;padding:8px 11px;line-height:1.5}
#pastenotice .linkish{color:var(--add-ink);text-decoration:underline;margin-left:4px}

/* ---------------- header folding ---------------- */
/* Bear-style: the caret hangs in the margin just left of the heading text —
   absolutely positioned, so headings never shift to make room for it, neither
   on first render nor when toggling. */
#preview h1,#preview h2,#preview h3,#preview h4,#preview h5,#preview h6{position:relative}
.foldcaret{position:absolute;right:100%;margin-right:4px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--ink-faint);font-size:13px;cursor:pointer;padding:0 3px;line-height:1}
.foldcaret:hover{color:var(--accent)}
#preview h1:not(:hover) .foldcaret:not(:focus),#preview h2:not(:hover) .foldcaret,#preview h3:not(:hover) .foldcaret,#preview h4:not(:hover) .foldcaret,#preview h5:not(:hover) .foldcaret,#preview h6:not(:hover) .foldcaret{opacity:.25}
#preview h1:hover .foldcaret,#preview h2:hover .foldcaret,#preview h3:hover .foldcaret,#preview h4:hover .foldcaret,#preview h5:hover .foldcaret,#preview h6:hover .foldcaret{opacity:1}
#preview .hfolded{opacity:.75}
#preview .hfolded::after{content:' ⋯';color:var(--ink-faint);font-weight:400}
.pv-foldchips{margin-left:10px;display:inline-flex;gap:3px;vertical-align:middle}
.pv-foldchip{width:18px;height:18px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:inline-grid;place-items:center;box-shadow:0 0 0 2px #fff}
.cm-foldchips{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle}
.cm-foldchip{width:15px;height:15px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;display:inline-grid;place-items:center}
.cm-foldPlaceholder{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);border-radius:5px;padding:0 6px;margin:0 3px;cursor:pointer}

/* Quiet path into the product for someone not ready to sign in. */
.gatetour{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--ink-faint);text-decoration:none}
.gatetour:hover{color:var(--brand)}

/* ------------------------------------------------------------ nav folders */
/* The ⊞ list affordance on folder/source headers: same slot as the ＋, but
   only visible on hover — organising chrome, not content. */
.secview{display:grid;place-items:center;width:20px;height:20px;visibility:hidden}
.navsec:hover .secview,.navitem:hover .secview{visibility:visible}
.navitem .secview{margin-left:auto;background:none;border:0;color:var(--ink-faint);padding:0 3px;border-radius:5px}
.navitem .secview:hover{background:var(--hover-2);color:var(--ink)}
.navitem .srcx{flex:none}

/* Right-click folder menu: fixed at the cursor, not anchored to a wrap. */
#foldermenu{position:fixed;top:auto;right:auto;min-width:240px;z-index:130}
#foldermenu button.danger b{color:var(--del-ink)}

/* ------------------------------------------------------------ folder view */
#folderview{position:absolute;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column}
#folderview.hide{display:none}
#fvbar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
#fvbar .sp{flex:1}
#fvcrumb{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-faint);min-width:0;overflow:hidden}
.fvseg{background:none;border:0;padding:3px 7px;border-radius:7px;font-size:13px;color:var(--ink-soft);white-space:nowrap}
button.fvseg:hover{background:var(--sunk);color:var(--ink);cursor:pointer}
.fvseg.here{color:var(--ink);font-weight:700}
.fvsl{color:var(--ink-faint)}
#fvscroll{flex:1;min-height:0;overflow-y:auto}
#fvinner{max-width:980px;margin:0 auto;padding:26px 30px 80px}
#fvtitle{font-size:26px;letter-spacing:-.01em;margin:0 0 2px;font-weight:800}
#fvsum{font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
#fvtable{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,20,.04)}
#fvtable th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:9px 14px;background:var(--sunk);border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap}
#fvtable th:hover{color:var(--ink)}
#fvtable th .arr{font-size:8.5px;margin-left:4px;color:var(--brand)}
#fvtable td{padding:9px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
#fvtable tr:last-child td{border-bottom:0}
#fvtable tbody tr{cursor:pointer}
#fvtable tbody tr:hover td{background:var(--head-bg)}
#fvtable tbody tr.dragging{opacity:.45}
#fvtable tbody tr.unopened .tt{color:var(--ink-soft);font-weight:500}
.fvname{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);min-width:0}
.fvname .ic{width:18px;height:18px;flex:none;display:grid;place-items:center}
.fvname .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fvsub{font-size:11.5px;font-weight:500;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.fvwho{color:var(--ink-soft);font-size:12.5px;white-space:nowrap}
.fvnum{font-variant-numeric:tabular-nums;color:var(--ink-faint);white-space:nowrap}
.fvnum.has{color:var(--ink);font-weight:600}
.fvnum.threads{color:var(--warn-ink);font-weight:600}
.fvver{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;display:flex;align-items:baseline;gap:7px}
@media (max-width:820px){
  #fvinner{padding:18px 12px 80px}
  /* Six columns don't fit a phone. Skill calls is the one worth keeping, so
     MCP calls (4) and Version (5) are what go. */
  #fvtable th:nth-child(4),#fvtable td:nth-child(4),
  #fvtable th:nth-child(5),#fvtable td:nth-child(5){display:none}
}

/* Narrow panes: the table scrolls sideways inside its own container. */
#fvscroll{overflow-x:auto}

/* Feedback pass 2026-08-17: rows and whole folder regions are drop targets;
   only the caret collapses (it reads as a control now). */
.navitem.dropping{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-line);color:var(--accent)}
.grp.dropping{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--sel);border-radius:8px}
.navsec .disc,#docshead .disc{cursor:pointer}
.navsec .disc:hover,#docshead .disc:hover{background:var(--hover-2);color:var(--ink)}
/* Long repo names must never wrap the × onto the rows below. */
.srchead{flex-wrap:nowrap}
.srchead .t{min-width:0}
.srchead .srcx{flex:none;margin-left:auto}

/* Listener install card + name-only skills, under the folder-view table. */
#fvlisten{margin:0 0 14px;border:1px solid var(--agent-line);background:linear-gradient(180deg,var(--agent-bg),var(--panel));border-radius:12px;padding:14px 16px}
.fvlisten-text{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.fvlisten-text b{color:var(--ink)}
.fvlisten-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#fvnames{margin-top:22px}
.fvnames-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.fvnames-sub{font-size:12px;color:var(--ink-faint);margin:3px 0 8px}
.fvnames-row{display:flex;align-items:baseline;gap:10px;padding:5px 2px;border-bottom:1px solid var(--line);font-size:13px;max-width:420px}
.fvnames-row .nm{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fvnames-row .ct{margin-left:auto;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------------- table size picker (style bar) ---------------- */
#tablepicker{position:fixed;z-index:120;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.2);padding:12px;outline:none}
#tablepicker .tpgrid{display:grid;gap:3px}
#tablepicker .tpc{width:17px;height:15px;border:1px solid var(--line-strong);border-radius:3px;background:var(--panel)}
#tablepicker .tpc.on{background:var(--brand-soft);border-color:var(--brand)}
#tablepicker .tplabel{margin-top:9px;font-size:12px;color:var(--ink-soft);text-align:center;font-variant-numeric:tabular-nums}
#tablepicker .tplabel b{color:var(--ink)}
#tablepicker .tpsize{width:100%;margin-top:8px;border:1px solid var(--line);border-radius:7px;padding:5px 8px;
  font:12px var(--mono);text-align:center;outline:none}
#tablepicker .tpsize:focus{border-color:var(--brand)}

/* Reuses the app's .menu chrome but is positioned by the widget, so it has to
   drop the base rule's `right:0` — with both edges pinned it stretched to the
   pane. The base also blocks-out any <span> inside a menu button, which put
   the submenu arrow on its own line. */
.cm-tb-menu{position:fixed;right:auto;top:auto;min-width:214px;max-width:290px}
.cm-tb-menu button{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 10px}
.cm-tb-menu button span.cm-tb-check{display:inline;margin:0 0 0 auto;font-size:12px;color:var(--brand);font-weight:700}

/* ================= appearance, focus mode, ⌘K ================= */

kbd{font:10.5px var(--mono);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;
  padding:1px 5px;color:var(--ink-faint);background:var(--panel)}

/* Theme entry point #1 — the brand row. */
.brand .themebtn{margin-left:auto;border:0;background:none;border-radius:7px;width:24px;height:24px;
  display:grid;place-items:center;font-size:13px;color:var(--ink-faint);flex:none}
.brand .themebtn:hover{background:var(--hover);color:var(--ink)}

/* Theme entry point #3 — the settings menu. Its checkmarks only show on the
   active choice; the base .menu rule hides them by default. */
.memenu button[data-theme] b{font-weight:500}
.memenu button[data-theme].on .check{display:block}

/* The ⌘K affordance in the doc bar. Below a narrow bar it keeps the glyph and
   the key and drops the label rather than wrapping. */
#kbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--sunk);
  border-radius:8px;padding:3px 8px;font-size:12px;color:var(--ink-faint);white-space:nowrap;flex:none;margin-left:6px}
#kbtn:hover{border-color:var(--line-strong);color:var(--ink)}
#kbtn svg{display:block;opacity:.8}
@media (max-width:1180px){#kbtn span{display:none}}

/* Focus mode — Sublime's distraction-free read: the rails go, the document
   centres, and the chrome returns when the pointer reaches the top edge. */
body.focus #shell{grid-template-columns:0 1fr 0 !important}
body.focus #nav,body.focus #rail{opacity:0;pointer-events:none}

/* The doc bar leaves the FLOW, not just the paint. Fading it in place left a
   46px band of --bg above a --panel document — a strip of the wrong colour
   where the bar used to be. Absolute means the document starts at the top and
   the bar washes over it when summoned. */
body.focus #bar{position:absolute;top:0;left:0;right:0;z-index:45;
  opacity:0;pointer-events:none;transition:opacity .18s;border-bottom-color:transparent}
body.focus.peek #bar{opacity:1;pointer-events:auto;border-bottom-color:var(--line)}

/* The pane header ("👁 Preview · editable · Multi-cursor shortcuts") is pure
   chrome; in focus mode it just goes. */
body.focus .paneh{display:none}

/* The style bar stays, dim until you reach for it — and still obeys its own
   show/hide toggle. */
body.focus #stylebar{opacity:.12;transition:opacity .2s}
body.focus #stylebar:hover{opacity:1}

body.focus #lp .cm-scroller{padding-top:12vh}
body.focus #lp .cm-content{max-width:680px}

#palette{position:fixed;inset:0;background:rgba(10,12,16,.42);backdrop-filter:blur(3px);z-index:210;
  display:grid;place-items:start center;padding-top:11vh}
#palette .pbox{width:min(600px,93vw);background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.36);overflow:hidden;display:flex;flex-direction:column;max-height:74vh}
#pq{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:15px 18px;
  font:15.5px var(--sans);color:var(--ink);outline:none}
#pq::placeholder{color:var(--ink-faint)}
#pres{overflow-y:auto;padding:6px;flex:1}
#pres .pgroup{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding:9px 12px 4px}
#pres .pi{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;font-size:13.5px;
  color:var(--ink-soft);cursor:pointer}
#pres .pi.on{background:var(--sunk);color:var(--ink)}
#pres .pi .ic{width:17px;text-align:center;opacity:.75;font-size:12.5px;flex:none}
#pres .pi .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pres .pi .rt{margin-left:auto;flex:none;display:flex;align-items:center;gap:6px}
#pres .pi .tag{color:var(--ink-faint);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
#pres .pempty{padding:22px 14px;text-align:center;color:var(--ink-faint);font-size:13px}
.pfoot{border-top:1px solid var(--line);padding:7px 14px;font-size:11px;color:var(--ink-faint);
  display:flex;gap:14px;align-items:center;flex:none}
.pfoot .sp{flex:1}
@media (max-width:700px){.pfoot #pfoothint{display:none}}

/* The skill binding chip: which name a listener beacon has to report for its
   calls to land on this doc. */
.pill.skillpill{background:var(--agent-bg);border:1px solid var(--agent-line);color:var(--agent);
  font:600 11.5px var(--mono);letter-spacing:0;cursor:help;white-space:nowrap;flex:none}
.pill.skillpill.clash{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}

/* "Install this skill" — the page's primary action, so it sits on the document rather
   than in a toolbar of ten equals. Solid, not tinted: the ⌁ chip in the bar
   is the quiet statement of fact, this is the thing to press. Pinned rather
   than scrolled away, because the reason to want it usually arrives partway
   down the page. */
#addskillbtn{position:absolute;top:46px;right:22px;z-index:8;
  background:var(--cta);color:var(--cta-ink);border:0;border-radius:9px;
  padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
#addskillbtn:hover{background:var(--cta-hover)}
/* On a narrow pane the document runs under it; step aside rather than sit on
   the words. */
@media (max-width:900px){#addskillbtn{top:42px;right:12px;padding:6px 11px;font-size:12.5px}}
body.focus #addskillbtn{display:none}

#addmodal{position:fixed;inset:0;background:rgba(30,28,25,.35);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:110;padding:16px}
#addmodal .card{background:var(--panel);border-radius:16px;padding:22px 24px;width:min(600px,100%);box-shadow:0 24px 60px rgba(0,0,0,.25);max-height:calc(100vh - 32px);overflow-y:auto}
#addmodal h2{font-family:var(--serif);font-size:20px;margin:0 0 6px}
#addmodal h2 code{font:600 17px var(--mono);color:var(--agent)}
#addmodal p{font-size:13px;color:var(--ink-soft);margin:0 0 14px;line-height:1.55}
#addmodal p code,.addstep code,.addalt code{font:11.5px var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.addstep{margin-bottom:12px}
.addstep>b{display:block;font-size:13px;margin-bottom:3px}
.addstep span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.addstep pre,.addalt pre{font:12px/1.6 var(--mono);background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px;overflow-x:auto;margin:4px 0 6px;white-space:pre-wrap}
.addstep button.inline,.addalt button.inline{margin-right:6px}
.addalt{margin:12px 0 2px;font-size:12.5px}
.addalt summary{color:var(--ink-soft);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px}
.addalt summary::-webkit-details-marker{display:none}
.addalt summary:hover{color:var(--ink)}
.addalt span{display:block;font-size:12px;color:var(--ink-soft);line-height:1.6;margin:6px 0}

/* Disclosure carets in modals reuse the rail's .disc chevron — same size, same
   colour, same 140ms rotate. Closed points right (the collapsed rail state),
   open points down. */
.addalt summary .disc,.mcpalt summary .disc{transform:rotate(-90deg);margin-left:0}
.addalt[open] summary .disc,.mcpalt[open] summary .disc{transform:none}
.addalt summary:hover .disc,.mcpalt summary:hover .disc{color:var(--ink)}

/* Provenance: which repo this doc was imported from. Sits with the ⌁ chip
   because both answer "what is this doc, really" — one names the skill it
   binds to, the other names the file it came from. */
.pill.ghpill{background:var(--sunk);border:1px solid var(--line);color:var(--ink-soft);
  font:600 11.5px var(--mono);letter-spacing:0;white-space:nowrap;flex:none;
  max-width:26ch;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.pill.ghpill:hover{color:var(--ink);border-color:var(--line-strong);background:var(--hover-2)}
.fvrepo{margin-left:6px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.fvrepo:hover{color:var(--ink)}

/* "editable" becomes "locked". Amber, because that is what this product
   already uses for "someone else has a claim on this text" — it's the comment
   colour, and a lock is the same kind of fact. Underlined on hover so the
   tooltip reads as available rather than accidental. */
.lockedlbl{color:var(--comment);font-weight:600;cursor:help;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}

/* The GitHub mark inside the provenance chip. Sized to the chip's text so it
   sits on the same baseline as the repo name rather than floating above it. */
.pill.ghpill svg{width:13px;height:13px;display:block;flex:none;fill:currentColor}
.pill.ghpill{display:inline-flex;align-items:center;gap:5px}

/* The GitHub line at the foot of the install modal. A link, not a fifth
   install route — it says where the file lives, and stops short of implying
   the listener rides along with a clone. */
.addgh{display:flex;align-items:center;gap:7px;margin:14px 0 2px;padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--sunk);
  font-size:12.5px;color:var(--ink-soft);text-decoration:none}
.addgh:hover{color:var(--ink);border-color:var(--line-strong)}
.addgh svg{width:15px;height:15px;flex:none;fill:currentColor}
.addgh .repo{font:12px var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addgh .go-arrow{margin-left:auto;flex:none;opacity:.6}

/* Searching the rail: one flat list of matches, so the section furniture that
   organises the unsearched rail gets out of the way. The Skills header in
   particular would otherwise sit above an empty list and read as "no skills
   matched" when the matches are in fact right above it. */
body.searching #skillshead,
body.searching #mddrop,
body.searching #newsection{display:none}

/* Where a match lives — the repo, the person, or the folder. It wraps to its
   own line rather than squeezing the title, because the title is what you are
   scanning and the origin is what you check once you have found it. */
.navwhere{font:11px var(--mono);color:var(--ink-faint);flex-basis:100%;
  padding-left:calc(25px + var(--lvl,0) * 10px);margin-top:-2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem:hover .navwhere{color:var(--ink-soft)}

/* ================= presentation mode ================= */
/* The stage overlays everything; the shell stays mounted underneath so the
   relay and presence keep working. See docs/PRESENTATION-MODE-SPEC.md. */
#stage{position:fixed;inset:0;background:var(--bg);z-index:150;cursor:none;
  animation:stage-in .22s ease}
#stage.nolaser{cursor:default}
@keyframes stage-in{from{opacity:0}to{opacity:1}}
/* The stage is a fixed 1100×620 canvas scaled uniformly to fit the window
   (stageLayout sets --scale). Everyone gets the same line wraps and the same
   overflow, so a pointer in canvas coordinates and a scroll fraction land on
   the same words on every form factor. */
#stagebox{position:absolute;inset:0;overflow:hidden}
#stagecanvas{position:absolute;left:50%;top:50%;width:1100px;height:620px;
  transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center center}
#stagescreen{width:100%;height:100%;overflow:auto;scrollbar-width:none;position:relative}
#stagescreen.more{mask-image:linear-gradient(#000 calc(100% - 3em),transparent)}
/* A picture full screen: click an image on a screen and it takes the
   window, whole and letterboxed on the stage background; → steps picture
   to picture while pictures follow each other, and the screen is back the
   moment there is text. The canvas stays mounted underneath for carets
   and offsets; it's just not shown. */
#stagepic{position:absolute;inset:0;z-index:2;background:var(--bg);animation:stage-in .25s ease}
#stagepic img{width:100%;height:100%;object-fit:contain;display:block}
#stage.picture #stagecanvas{visibility:hidden}
#stage.nolaser .slide img{cursor:zoom-in}
#stage.nolaser #stagepic{cursor:zoom-out}

/* Stage type: the preview's shapes in em units on a viewport-scaled base.
   Headings are sans on stage (2026-10-04) — the serif read as a book at
   projector size; the weight carries the hierarchy instead.
   with --fit as the overflow shrink (1 = the section fit as authored). */
.slide{--base:26px;--fit:1;font-size:calc(var(--base)*var(--fit));
  font-family:var(--sans);color:var(--prose-ink);line-height:1.5}
.slide .blk{position:relative}
.slide h1{font-family:var(--sans);font-weight:700;font-size:2.7em;line-height:1.08;margin:0 0 .35em;letter-spacing:-.03em;color:var(--ink)}
.slide h2{font-family:var(--sans);font-weight:650;font-size:1.85em;line-height:1.15;margin:0 0 .6em;letter-spacing:-.025em;color:var(--ink);
  padding-bottom:.25em;border-bottom:2px solid var(--line-strong)}
.slide h2.cont{font-size:.72em;font-family:var(--sans);font-weight:600;color:var(--ink-faint);border:0;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:1em}
.slide h3{font-family:var(--sans);font-weight:600;font-size:1.3em;margin:1em 0 .3em;letter-spacing:-.015em;color:var(--ink)}
.slide h4,.slide h5,.slide h6{font-size:1.05em;margin:.9em 0 .3em;color:var(--ink)}
.slide p{margin:0 0 .7em}
.slide p.empty{color:var(--ink-faint);font-style:italic}
.slide ul,.slide ol{margin:0 0 .7em;padding-left:1.2em}
.slide li{margin:.3em 0;line-height:1.45}
.slide li::marker{color:var(--brand);font-weight:700}
.slide strong{color:var(--ink)}
.slide a{color:var(--accent)}
.slide code{font-family:var(--mono);font-size:.82em;background:var(--sunk-2);border:1px solid var(--line);border-radius:.3em;padding:.05em .3em;color:var(--ink)}
.slide pre{background:var(--sunk);border:1px solid var(--line);border-radius:.5em;padding:.7em .9em;overflow-x:auto;margin:0 0 .8em}
.slide pre code{background:none;border:0;padding:0;font-size:.78em;line-height:1.5}
.slide blockquote{margin:0 0 .8em;padding:.1em 0 .1em .8em;border-left:.22em solid var(--brand);color:var(--ink-soft);font-style:italic}
.slide table{border-collapse:collapse;width:100%;margin:.2em 0 .8em;font-size:.82em}
.slide th,.slide td{border:1px solid var(--line-strong);padding:.45em .7em;text-align:left;vertical-align:top}
.slide th{background:var(--sunk);color:var(--ink)}
.slide hr{border:0;border-top:1px solid var(--line-strong);margin:1.2em 0}
.slide img{max-width:100%;height:auto}
.slide .mermaid-block{font-size:16px;margin:.4em 0 .8em}
.slide input[type=checkbox]{width:.9em;height:.9em;margin-right:.4em;vertical-align:-.05em}
.slide .meta{color:var(--ink-faint);font-size:.8em;margin-top:1.4em}
/* The title screen sits in the vertical middle — via auto margins on two
   pseudo-elements, not justify-content:center, which on overflow centres the
   content past both edges and leaves the top unreachable by scrolling. Auto
   margins collapse to zero when there's no room, so a long title screen
   simply starts at the top and scrolls. */
#stagescreen.title{display:flex;flex-direction:column;min-height:50%}
#stagescreen.title::before{content:"";margin-top:auto}
#stagescreen.title::after{content:"";margin-bottom:auto}
#stagescreen.title p{font-size:1.15em;color:var(--ink-soft);max-width:26em}

/* A peer's text caret, as a name flag on the block that holds it. */
.scaret{position:absolute;left:-.9em;top:0;display:flex;align-items:center;gap:.25em;pointer-events:none;
  transform:translateX(-100%);font:600 11.5px var(--sans);color:#fff;white-space:nowrap}
.scaret i{display:block;width:3px;height:1.3em;border-radius:2px;background:var(--c);order:2}
.scaret b{background:var(--c);border-radius:5px;padding:2px 7px 3px;font-weight:600;order:1}
@media (max-width:1300px){.scaret{left:auto;right:0;transform:none;top:-1.1em}}

/* The peek bar: summoned by the pointer at the top edge, like focus mode. */
#stagebar{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  opacity:0;pointer-events:none;transition:opacity .18s;font-size:12.5px;color:var(--ink-soft);cursor:default}
#stagebar.peek{opacity:1;pointer-events:auto}
#stagebar .t{font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
#stagebar .w{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stagebar .sp{flex:1}
#stagebar .keys{white-space:nowrap}
#stagebar .keys kbd{margin-right:2px}
@media (max-width:980px){#stagebar .keys{display:none}}

/* The audience row, bottom-left: who's here, who's following, and the
   count. Fades with the HUD so it never competes with the words. */
#stageaud{position:absolute;left:18px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;
  opacity:0;transition:opacity .25s;pointer-events:none;font-size:12px;color:var(--ink-faint)}
#stageaud.on,#stageaud:hover{opacity:1;pointer-events:auto}
#stageaud .avatar{cursor:default}
#stagehud{position:absolute;right:18px;bottom:14px;z-index:4;font-size:12px;color:var(--ink-faint);
  opacity:0;transition:opacity .25s;pointer-events:none}
#stagehud.on{opacity:1}
#stagehud b{color:var(--ink-soft);font-variant-numeric:tabular-nums;font-weight:600}
#stagedots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;z-index:4;
  opacity:0;transition:opacity .25s;pointer-events:none;max-width:60vw;flex-wrap:wrap;justify-content:center}
#stagedots.on{opacity:1}
#stagedots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
#stagedots i.on{background:var(--brand);transform:scale(1.3)}
#stagedots i.h{width:10px;border-radius:3px}
#stageprogress{position:absolute;left:0;bottom:0;height:3px;background:var(--brand);z-index:4;transition:width .35s ease;width:0}

/* The watcher's chip: whom you're following, and the way out. */
#stagefollow{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:9px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;padding:5px 8px 5px 5px;
  box-shadow:var(--shadow);font-size:12.5px;color:var(--ink-soft);cursor:pointer;animation:sharenotif-in .25s ease}
#stagefollow .avatar{width:22px;height:22px;font-size:9.5px;box-shadow:none}
#stagefollow b{color:var(--ink)}
#stagefollow em{font-style:normal;font-size:11.5px;color:var(--ink-faint);background:var(--sunk);border-radius:999px;padding:3px 9px}
#stagefollow:hover em{color:var(--ink)}
body.watching #stage{box-shadow:inset 0 0 0 3px var(--follow-color,var(--accent))}

#stageptrs{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
/* Pointers on stage are dots, not Tails: the presenter's is the red laser
   everyone knows, a viewer's is a dot in their colour with their name. */
.sdot{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--c,#ff2d55);
  pointer-events:none;z-index:6;transition:transform .06s linear,opacity .2s;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c,#ff2d55) 28%,transparent),0 0 18px 5px color-mix(in srgb,var(--c,#ff2d55) 50%,transparent)}
.sdot.off{opacity:0}
.sdot .lab{position:absolute;left:14px;top:8px;font:600 11px var(--sans);color:#fff;background:var(--c,#ff2d55);padding:2px 7px;border-radius:5px;white-space:nowrap}
.sdot.laser{width:14px;height:14px;margin:-7px 0 0 -7px}
.sdot.laser .lab{display:none}
/* A click splashes: a ring that grows and fades at the dot. */
.splash{position:fixed;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid var(--c,#ff2d55);
  pointer-events:none;z-index:6;animation:splash .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes splash{from{transform:scale(.6);opacity:.95}to{transform:scale(6);opacity:0}}
/* Your own pointer on stage: the laser for the presenter, your colour for a viewer. */
#stagelaser{--laser:#ff2d55;position:fixed;width:14px;height:14px;border-radius:50%;background:var(--laser);pointer-events:none;z-index:7;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .25s;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--laser) 28%,transparent),0 0 22px 6px color-mix(in srgb,var(--laser) 55%,transparent)}
#stagelaser.on{opacity:1}
html[data-theme=dark] #stagelaser{--laser:#ff4d6d}
body.watching #stagelaser{--laser:var(--me-color,#ff2d55)}

/* Entry points in the bar. The pill is the standing invite while someone is
   on stage; it reads as the beam's counterpart (inverse ground) because it
   is the other side of the same handshake. */
#presentbtn svg{opacity:.8}
#joinpill{display:inline-flex;align-items:center;gap:7px;flex:none;margin-right:4px;
  background:var(--accent);color:#fff;border:0;border-radius:999px;padding:5px 6px 5px 11px;font-size:12px;font-weight:600}
#joinpill b{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 9px;font-weight:700}
#joinpill:hover{filter:brightness(1.08)}
html[data-theme=dark] #joinpill{background:var(--cta);color:var(--cta-ink)}
@media (max-width:1180px){#joinpill span{display:none}}