client/app.css

/* Inter, served from this origin. It used to come from fonts.googleapis.com,
   which meant two extra TLS handshakes and a render-blocking stylesheet on a
   third party before the page could paint anything — including the skeleton.
   Latin + latin-ext only; anything else falls back down the stack in --ui. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libre Baskerville, for the "Reading" document style. Four files, 132KB,
   each well inside the ~100KB the Hub allows a non-LFS binary — and each a
   variable font carrying wght 400-700, so bold and bold italic are interpolated
   from the real design rather than synthesised by slanting or smearing a roman.
   (Google serves one file per style for both weights; the pair of weights in
   the descriptor below is what tells the browser to use the axis.)

   Chosen by eye from a tuner over fourteen serifs, not by distance from the
   magazine's own Ubique Text — that face was cut for the Council on Foreign
   Relations and cannot be licensed, so the comparison had a floor. What the
   measurements did settle is the sizing below.

   Nothing references them until data-doc-style="reading" is stamped, and an
   unused @font-face is never fetched — Docs-style readers pay nothing. */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/libre-baskerville-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --bg: #f9fbfd;   /* Docs' canvas behind the page */
  --surface: #ffffff;
  --border: #e7e7ea;
  --border-strong: #d9d9de;
  --text: #1a1a1e;
  --text-2: #55555e;
  --text-3: #9d9da6;
  --accent: #1d5c45;
  --accent-dark: #144533;
  --accent-soft: #e9f1ec;
  --hl: rgba(29, 92, 69, 0.1);
  --hl-active: rgba(29, 92, 69, 0.22);
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 20, 30, 0.08), 0 1px 3px rgba(20, 20, 30, 0.06);
  /* --line and --paper were used in 14 places without ever being defined, so
     those borders silently never rendered */
  --line: var(--border);
  --paper: var(--surface);
  --page: #ffffff;          /* the document sheet */
  --page-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --input-bg: #ffffff;
  --tint: rgba(0, 0, 0, 0.05);        /* neutral hover/fill over a surface */
  --tint-strong: rgba(0, 0, 0, 0.12);
  --hl-weak: rgba(29, 92, 69, 0.06);  /* accent washes: nav hover, strips, bars */
  --hl-edge: rgba(29, 92, 69, 0.55);  /* the rule beside quoted/commented text */
  --scrim: rgba(18, 18, 24, 0.4);
  --danger: #b03030;
  --chip-bg: #f0f0f3;
  --menu-solid: var(--text);          /* the dark selection bubble */
  --tooltip-bg: #223029;
  --on-primary: #ffffff;              /* text on a filled primary button */
  --primary-hover: #000000;
  --ins-active: #cfe5d9;              /* suggestion insertions, focused */
  --ins-block-active: #d9ebe1;
  --del-bg: rgba(0, 0, 0, 0.045);     /* suggestion deletions */
  --del-bg-active: rgba(0, 0, 0, 0.1);
  --sugg-bar: #99b6ab;                /* the range bar in the page margin */
  --doc-text: #000000;                /* the document's own ink */
  --doc-text-2: #434343;
  --doc-text-3: #666666;
  --doc-rule: #d0d0d0;                /* dividers, blockquote bar */
  --table-rule: #000000;              /* Docs draws table cells in black */
  --code-bg: #f1f3f4;
  --code-block-bg: #f8f9fa;
  --code-block-border: #e0e3e7;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* the document itself is Google Docs' default: Arial 11pt. Liberation Sans and
     Arimo are the metric-compatible stand-ins on Linux. */
  --doc: Arial, "Liberation Sans", Arimo, Helvetica, sans-serif;
  --doc-size: 14.6667px;   /* 11pt at 96dpi */
  --doc-line: 1.15;        /* Docs' default line spacing for Normal text */
  --page-w: 8.5in;         /* US Letter, like a default Docs page */
  --page-pad: 1in;         /* Docs' default margins */
  --canvas: #f9fbfd;       /* the grey-blue surround behind the page */
  --doc-link: #1155cc;     /* Docs' link blue */
  --mono: "Courier New", Courier, ui-monospace, monospace;
}
/* min-height, NOT height: with height:100% the body box is exactly one viewport
   tall, which is also the sticky containing block — the header would then scroll
   away for good after the first screenful. */
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
/* NB: never put overflow-x on html/body — it turns the body into its own
   scrollport and breaks the sticky header again. Runaway width is clipped on
   the layout containers instead. */
body { font: 14px/1.55 var(--ui); color: var(--text); background: var(--bg); }
button { font: inherit; color: inherit; }
svg.icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }
.hidden { display: none !important; }
.muted { color: var(--text-3); font-size: 13px; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }

.btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: 7px; padding: 6px 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.btn.accent:hover { background: var(--accent-dark); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--tint); color: var(--text); }

.iconbtn {
  border: none; background: transparent; color: var(--text-2); border-radius: 6px;
  padding: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--tint); color: var(--text); }

input, textarea {
  font: inherit; border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 10px;
  width: 100%; background: var(--surface); color: var(--text);
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }

/* --- sign-in overlay --- */
.overlay { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; }
.overlay .card {
  background: var(--surface); border-radius: 14px; padding: 40px 44px; max-width: 400px;
  box-shadow: var(--shadow-md); text-align: center;
}
.overlay .card h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; }
.overlay .card p { color: var(--text-2); margin: 0 0 22px; }
#dev-login { margin-top: 14px; display: flex; gap: 8px; }

/* --- header --- */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
#topbar .wordmark { font-weight: 650; letter-spacing: -0.02em; text-decoration: none; color: var(--text); font-size: 15px; }
#back-link { color: var(--text-2); text-decoration: none; display: flex; align-items: center; padding: 6px; border-radius: 6px; }
#back-link:hover { background: var(--tint); color: var(--text); }
#doc-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#conn { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
#conn.on { background: var(--accent); }
#whoami { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#whoami img { width: 24px; height: 24px; border-radius: 50%; }
#whoami a { color: var(--text-3); text-decoration: none; }
#whoami a:hover { color: var(--text); }
#presence { display: flex; }
#presence .avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); margin-left: -6px;
}
#presence .avatar:first-child { margin-left: 0; }

/* toolbar inside header */
#header-tools { display: flex; align-items: center; gap: 0; margin: 0 4px; overflow-x: auto; scrollbar-width: none; }
#header-tools::-webkit-scrollbar { display: none; }
#header-tools button {
  border: none; background: transparent; border-radius: 6px; padding: 5px 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); min-width: 26px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0;
}
#header-tools button:hover { background: var(--tint); color: var(--text); }
#header-tools button.on { background: var(--accent-soft); color: var(--accent); }
#header-tools .sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; flex-shrink: 0; }

/* link popover */
#link-pop {
  position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px; width: 320px; display: flex; gap: 6px;
}

/* document switcher (top left) */
#docs-btn {
  display: flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer;
  padding: 3px 6px; border-radius: 7px; color: var(--text); font: inherit; max-width: 320px;
}
#docs-btn:hover { background: var(--hover); }
#docs-caret .icon { width: 14px; height: 14px; opacity: 0.55; }
#docs-pop {
  position: fixed; z-index: 60; left: 14px; top: 58px; width: 330px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 14px 16px;
}
#docs-pop h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
#docs-list { max-height: 52vh; overflow-y: auto; margin: 0 -6px; }
.doc-row { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 0 6px; }
.doc-row:hover { background: var(--hover); }
.doc-row.current { background: var(--accent-soft); }
.doc-row-main { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
.doc-row .title { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row .meta { font-size: 11.5px; color: var(--text-3); }
.doc-row .iconbtn { opacity: 0; flex-shrink: 0; }
.doc-row:hover .iconbtn, .doc-row .iconbtn:focus-visible { opacity: 1; }
.docs-actions { display: flex; gap: 6px; margin-top: 12px; }
.empty-doc { padding: 60px 10px; color: var(--text-2); text-align: center; font-size: 14px; }

/* agents panel */
#agents-pop, #share-pop {
  position: fixed; z-index: 60; right: 14px; top: 58px; width: 340px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 14px 16px;
}
#share-pop { right: 90px; }
#agents-pop h3, #share-pop h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
#agents-pop .hint, #share-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
#share-form { display: flex; gap: 6px; margin-top: 10px; }
.share-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.share-row .iconbtn { margin-left: auto; }
.key-box {
  margin-top: 10px; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
}
.key-box code { font-family: var(--mono); font-size: 11.5px; word-break: break-all; display: block; margin: 6px 0; }
.key-box .row { margin-top: 6px; }
#agents-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
.agent-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.agent-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.agent-row .dot.on { background: var(--accent); }
.agent-row .handle { font-weight: 600; }
.agent-row .copy { margin-left: auto; }
#agent-form { display: flex; gap: 6px; margin-top: 10px; }

/* --- layout: editor + margin --- */
#layout { max-width: 1560px; margin: 0 auto; padding: 24px 20px 40vh; display: flex; gap: 20px; align-items: flex-start; }
#editor-col { flex: 1; min-width: 0; position: relative; }
/* the sheet: letter width, 1in margins, Docs' soft drop shadow, square corners */
#editor {
  background: var(--page); border: none; border-radius: 0;
  /* the sheet keeps Docs' geometry at every zoom level — 8.5in wide, 1in
     margins, 6.5in of text; zoom stays a text-size control, since magnifying
     the sheet itself would need a horizontal scroller beside the comments */
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  padding: var(--page-pad); min-height: 11in;
  box-shadow: var(--page-shadow);
}
#margin-col { width: 300px; flex-shrink: 0; position: relative; }
#margin-tools { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; user-select: none; }
#margin-tools input[type="checkbox"] { width: auto; accent-color: var(--accent); margin: 0; }
#margin-items { position: relative; }

/* mobile-only chrome: hidden on desktop, revealed in the phone media query */
.phone-only { display: none !important; }
#margin-head { display: none; }

/* long comment/rationale bodies are clamped to a readable height with a
   "Show more" toggle (js adds .clamped once it measures an overflow) */
.msg .text.clamped, .rationale.clamped { max-height: 9.5em; overflow: hidden; position: relative; }
.msg .text.clamped::after, .rationale.clamped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface) 85%);
  pointer-events: none;
}
.more-btn {
  border: none; background: transparent; padding: 2px 0; margin-top: 2px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--accent);
}
.more-btn:hover { text-decoration: underline; }

/* --- editor content --- */
/* Google Docs' defaults: Arial 11pt, line spacing 1.15, no space between
   paragraphs, and headings at regular weight (Docs does not bold them) — sizes
   and the padding-before/after pattern follow Docs' own exported stylesheet. */
.tiptap { outline: none; font-family: var(--doc); font-size: calc(var(--doc-size) * var(--doc-zoom, 1)); line-height: var(--doc-line); color: var(--doc-text); }
.tiptap > * + * { margin-top: 0; }
.tiptap p { margin: 0; }
.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
  font-family: var(--doc); font-weight: 400; line-height: var(--doc-line); letter-spacing: normal; color: var(--doc-text);
}
.tiptap h1 { font-size: 1.818em; margin: 1.212em 0 0.364em; }   /* 20pt, 20pt before / 6pt after */
.tiptap h2 { font-size: 1.455em; margin: 1.091em 0 0.364em; }   /* 16pt, 18pt / 6pt */
.tiptap h3 { font-size: 1.273em; margin: 0.970em 0 0.242em; color: var(--doc-text-2); }  /* 14pt, 16pt / 4pt */
.tiptap h4 { font-size: 1.091em; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
.tiptap h5 { font-size: 1em; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
.tiptap h6 { font-size: 1em; font-style: italic; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
/* the page's opening heading reads as Docs' Title style (26pt) */
.tiptap > h1:first-child { font-size: 2.364em; margin-top: 0; margin-bottom: 0.182em; }
/* Docs has no code block; keep ours but in its monospace (Courier New) */
.tiptap pre {
  background: var(--code-block-bg); border: 1px solid var(--code-block-border); border-radius: 2px; padding: 10px 12px; font-size: 0.95em;
  overflow-x: auto; font-family: var(--mono); line-height: 1.35;
}
.tiptap code { font-family: var(--mono); font-size: 0.95em; background: var(--code-bg); border-radius: 2px; padding: 0 0.2em; }
.tiptap pre code { background: none; padding: 0; }
.tiptap blockquote { border-left: 3px solid var(--doc-rule); margin: 0; padding-left: 18pt; color: inherit; font-style: normal; }
.tiptap a { color: var(--doc-link); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 1px; }
/* Docs indents list text to 0.5in (36pt) with the marker sitting inside it */
.tiptap ul, .tiptap ol { padding-left: 36pt; margin: 0; }
.tiptap li { margin: 0; }
.tiptap li > p { margin: 0; }
.tiptap hr { border: none; border-top: 1px solid var(--doc-rule); margin: 0.75em 0; }
.tiptap img { max-width: 100%; border-radius: 8px; display: block; margin: 0.4em 0; }
.tiptap img.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.tiptap .comment-hl { background: var(--hl); border-bottom: 1.5px solid var(--hl-edge); cursor: pointer; }
.tiptap .comment-hl.active { background: var(--hl-active); }
.tiptap .suggestion-hl { background: transparent; position: relative; }
.tiptap .suggestion-hl::before { content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 2.5px; background: var(--sugg-bar); }
.tiptap p.is-editor-empty:first-child::before { color: var(--text-3); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }

/* collaboration carets */
.collaboration-carets__caret { border-left: 1px solid; border-right: 1px solid; margin: 0 -1px; pointer-events: none; word-break: normal; position: relative; }
.collaboration-carets__label {
  border-radius: 3px 3px 3px 0; color: #fff; font-size: 10px; font-weight: 600; font-family: var(--ui);
  left: -1px; line-height: normal; padding: 0.1rem 0.35rem; position: absolute; top: -1.35em; user-select: none; white-space: nowrap;
}

/* --- selection menu --- */
#selection-menu { position: absolute; z-index: 30; display: flex; background: var(--menu-solid); border-radius: 8px; box-shadow: var(--shadow-md); overflow: hidden; }
#selection-menu button {
  background: transparent; border: none; color: #fff; padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
}
#selection-menu button + button { border-left: 1px solid rgba(255,255,255,.15); }
#selection-menu button:hover { background: rgba(255,255,255,.12); }

/* --- margin cards --- */
.card {
  position: absolute; left: 0; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: top .18s ease, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--border-strong); }
.card.expanded { box-shadow: var(--shadow-md); border-color: var(--accent); cursor: default; z-index: 5; }
.card .head { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); }
.card .head .icon { color: var(--text-3); }
.card.expanded .head .icon { color: var(--accent); }
.card .head .who { font-weight: 600; color: var(--text); font-size: 13px; flex-shrink: 0; }
.card .head .who.agent::after { content: "agent"; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.card .head .preview { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
/* the head preview is a teaser for the collapsed card — once open, the body
   shows the same rationale/message in full, so repeating it is just noise */
.card.expanded .head .preview { display: none; }
.card .head .when { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.card .body { margin-top: 10px; }
.card blockquote {
  margin: 0 0 10px; padding: 3px 10px; border-left: 2px solid var(--hl-edge); background: var(--hl);
  font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.card blockquote.orphaned { border-left-color: var(--border-strong); background: var(--tint); text-decoration: line-through; }
.msg { margin: 10px 0; font-size: 13.5px; }
.msg .author { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.msg .author .when { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.msg .author .agent-tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; }
.msg .text { white-space: pre-wrap; word-wrap: break-word; color: var(--text-2); margin-top: 2px; }
.msg .text .mention { color: var(--accent); font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; border-radius: 999px;
  padding: 2px 9px; margin: 4px 4px 0 0; background: var(--chip-bg); color: var(--text-2);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.chip.claimed::before { background: var(--text); }
.chip.done { background: var(--accent-soft); color: var(--accent); }
.chip.done::before { background: var(--accent); }
.chip.failed { background: var(--chip-bg); color: var(--text); text-decoration: line-through; }
.reply-row { display: flex; gap: 6px; margin-top: 10px; }
.reply-row textarea {
  font-size: 13px; resize: none; overflow-y: auto; min-height: 32px;
  line-height: 1.45; /* one line at rest, grows to ~4 with Shift+Enter */
}
.card .actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; align-items: center; }

/* card header actions (accept / reject — visible even collapsed) */
.card .head .iconbtn { padding: 3px; flex-shrink: 0; }
.card .head .accept-btn { color: var(--accent); }
.card .head .accept-btn:hover { background: var(--accent-soft); }
.card .head .reject-btn:hover { color: var(--text); }

/* inline track-changes in the document */
.tiptap .sugg-del { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text-3); background: var(--del-bg); border-radius: 2px; cursor: pointer; }
.tiptap .sugg-ins {
  color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent);
  border-radius: 2px; padding: 0 1px; cursor: pointer; white-space: pre-wrap;
}
.tiptap .sugg-del-block { text-decoration: line-through; color: var(--text-3); opacity: 0.75; cursor: pointer; }
.tiptap .sugg-del-block.sugg-del-empty { height: 4px; overflow: hidden; margin-top: 0; }
.tiptap .sugg-ins-block {
  border-left: 2.5px solid var(--accent); background: var(--accent-soft);
  padding: 8px 14px; margin: 0.5em 0; cursor: pointer;
}
.tiptap .sugg-ins-block > * + * { margin-top: 0.4em; }
.tiptap .sugg-ins-block img { max-height: 200px; }

/* the active (clicked) suggestion stands out from its neighbors */
.tiptap .sugg-ins.active { background: var(--ins-active); box-shadow: 0 2px 0 var(--accent); font-weight: 600; }
.tiptap .sugg-del.active { background: var(--del-bg-active); color: var(--text-2); }
.tiptap .sugg-ins-block.active { background: var(--ins-block-active); border-left-width: 4px; box-shadow: var(--shadow-sm); }
.tiptap .sugg-del-block.active { opacity: 0.55; background: var(--del-bg); }
.tiptap .suggestion-hl { cursor: pointer; }
.tiptap .suggestion-hl.active::before { width: 3.5px; background: var(--accent); }
.tiptap .suggestion-hl.active { background: var(--hl-weak); }

/* zoom control */
#zoom-label { font-size: 11.5px; color: var(--text-3); min-width: 34px; text-align: center; user-select: none; }
.rationale { font-size: 13px; color: var(--text-2); margin-top: 8px; font-style: italic; }
.status-note { font-size: 11.5px; color: var(--text-3); }

/* composers (comment + suggest) — positioned next to the anchored text, like cards */
.composer-box { position: absolute; left: 0; width: 100%; z-index: 6; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; transition: top .18s ease; }
.composer-box textarea, .composer-box input { font-size: 13px; }
.composer-box .row { justify-content: flex-end; }
.composer-box blockquote { margin: 0; padding: 3px 10px; border-left: 2px solid var(--hl-edge); background: var(--hl); font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mention autocomplete */
.mention-menu { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-md); margin-top: 4px; overflow: hidden; position: relative; z-index: 8; }
.mention-menu div { padding: 6px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.mention-menu div:hover, .mention-menu div.selected { background: var(--accent-soft); }
.mention-menu div.selected { box-shadow: inset 2px 0 0 var(--accent); }
.mention-menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.mention-menu .dot.on { background: var(--accent); }

/* editing / suggesting switch — the header's mode control, like Docs' pencil */
/* the theme toggle is icon-only in the header; the label is for the ⋯ sheet */
#theme-btn .lbl, #docstyle-btn .lbl { display: none; }

#mode-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--tint); flex-shrink: 0; }
#mode-switch button {
  border: none; background: none; cursor: pointer; border-radius: 999px;
  padding: 4px 9px; font: inherit; font-size: 12.5px; color: var(--text-3); white-space: nowrap;
}
#mode-switch button:hover { color: var(--text); }
#mode-switch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 550; }
/* suggesting mode: the document is read-only, so the text cursor would lie */
body.suggesting .tiptap { caret-color: transparent; cursor: default; }

/* --- math (KaTeX) ----------------------------------------------------------
   Formulas are atoms: one click opens the LaTeX source in an input, because the
   source is what round-trips to markdown and what agents propose. */
.math-inline { display: inline; border-radius: 3px; }
.math-block {
  display: block; margin: 0.75em 0; text-align: center;
  padding: 4px 0; overflow-x: auto; overflow-y: hidden;
}
/* only the formula itself is clickable — a display block is as wide as the
   text column, and clicking empty space beside it must still move the caret */
/* manipulation: suppresses double-tap-to-zoom, so a double TAP reliably opens
   the source editor on a phone instead of zooming the page */
.math-view { cursor: pointer; border-radius: 3px; padding: 0 2px; touch-action: manipulation; }
.math-block .math-view { display: inline-block; }
.math-view:hover { background: var(--hl-weak); }
.math-inline.selected .math-view, .math-block.selected .math-view { background: var(--hl); outline: 1px solid var(--hl-edge); }
/* before KaTeX lands (and if it never does) the source stays readable */
.math-view.math-raw { font-family: var(--mono); font-size: 0.92em; color: var(--text-2); }
.math-view.math-empty { font-family: var(--ui); font-size: 0.85em; color: var(--text-3); }
/* the source editor: shown in place of the rendering, never both */
.math-src { display: none; }
.math-inline.editing .math-view, .math-block.editing .math-view { display: none; }
.math-inline.editing .math-src, .math-block.editing .math-src {
  display: inline-block; font-family: var(--mono); font-size: 0.92em;
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px;
  background: var(--input-bg); color: var(--text); outline: none; min-width: 60px;
}
.math-block.editing .math-src { display: block; margin: 0 auto; width: min(100%, 46em); text-align: center; }
.math-tool-label { font-family: var(--doc); font-size: 15px; line-height: 1; }
/* KaTeX renders its own colours; only the surroundings are ours */
.katex { font-size: 1.06em; }
.katex-display { margin: 0; }

/* --- loading skeletons -----------------------------------------------------
   Shown from the first paint (they are in the HTML, not built by JS) so a slow
   load looks like it is working rather than finished-and-empty. */
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sk-line, .sk-card {
  background: var(--tint);
  border-radius: 6px;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
/* An opaque stand-in sheet with the real sheet's geometry, laid over the live
   editor rather than replacing it — the editor stays mounted and measurable, so
   card positions and zoom are already right when the skeleton lifts. */
#doc-skeleton {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  padding: var(--page-pad); min-height: 11in;
  background: var(--page); box-shadow: var(--page-shadow);
}
#doc-skeleton.hidden { display: none !important; }
#doc-skeleton .sk-line { height: 0.85em; margin-bottom: 0.9em; }
#doc-skeleton .sk-title { height: 1.9em; width: 55%; margin-bottom: 1.6em; }
#doc-skeleton .sk-gap { margin-top: 2em; }
.sk-line.w40 { width: 40%; } .sk-line.w70 { width: 70%; } .sk-line.w75 { width: 75%; }
.sk-line.w80 { width: 80%; } .sk-line.w82 { width: 82%; } .sk-line.w88 { width: 88%; } .sk-line.w90 { width: 90%; }
#docs-list.loading { display: flex; flex-direction: column; gap: 10px; }
#docs-list.loading .sk-card { height: 62px; border-radius: 12px; }
/* animation off for anyone who asked for less motion — the block still shows */
@media (prefers-reduced-motion: reduce) { .sk-line, .sk-card { animation: none; } }

/* --- dark theme -----------------------------------------------------------
   A head script stamps data-theme on <html> (stored choice, else the OS
   setting) before first paint, so there is no light flash and no duplicated
   media-query block. Everything below is a variable override — no layout,
   no per-component dark rules. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121213;
  --canvas: #121213;
  --surface: #1f1f22;
  --page: #1b1b1c;
  --border: #35353a;
  --border-strong: #4b4b52;
  --text: #e4e4e7;
  --text-2: #b3b3bb;
  --text-3: #85858e;
  --accent: #74c2a0;
  --accent-dark: #94d7b8;
  --accent-soft: rgba(116, 194, 160, 0.16);
  --hl: rgba(116, 194, 160, 0.17);
  --hl-active: rgba(116, 194, 160, 0.32);
  --hl-weak: rgba(116, 194, 160, 0.09);
  --hl-edge: rgba(116, 194, 160, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --page-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.55);
  --input-bg: #26262a;
  --tint: rgba(255, 255, 255, 0.07);
  --tint-strong: rgba(255, 255, 255, 0.16);
  --scrim: rgba(0, 0, 0, 0.62);
  --danger: #f28b82;
  --chip-bg: #30303a;
  --menu-solid: #2f3136;
  --tooltip-bg: #34363c;
  --on-primary: #17171a;
  --primary-hover: #ffffff;
  --ins-active: rgba(116, 194, 160, 0.32);
  --ins-block-active: rgba(116, 194, 160, 0.22);
  --del-bg: rgba(255, 255, 255, 0.08);
  --del-bg-active: rgba(255, 255, 255, 0.15);
  --sugg-bar: #5f9a83;
  /* the document's own ink, on Docs' dark page */
  --doc-text: #e8e8e6;
  --doc-text-2: #c3c3c1;
  --doc-text-3: #a7a7a5;
  --doc-rule: #55555a;
  --table-rule: #6a6a70;
  --doc-link: #8ab4f8;
  --code-bg: #2b2b30;
  --code-block-bg: #26262b;
  --code-block-border: #3a3a40;
}

/* --- document style: Docs vs Reading ---------------------------------------
   A second axis, independent of light/dark: what the *document* is set in.
   The default ("docs") is Google Docs' Arial 11pt/1.15, set in :root above.
   "reading" is the long-form magazine setting measured off a Foreign Affairs
   article: a serif at 22px/1.45, space between paragraphs instead of Docs'
   none, and small-caps section heads.

   The sheet is untouched — and it happens to need no touching: Docs' 8.5in page
   with 1in margins leaves a 624px column, within a few pixels of the 630px the
   article is set to, so the measure is already right at this size.

   The page geometry is the one thing Reading leaves alone. No literal colour
   appears below either — every rule inherits --doc-text and friends, so Reading
   works in dark mode without a second block. A head script stamps
   data-doc-style before first paint, like the theme. */
:root[data-doc-style="reading"] {
  --doc: "Libre Baskerville", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Chosen at the page rather than derived, after sliding the numbers around
     against real text. Measured over 37 paragraphs in this 624px column it sets
     10.69 words a line on 28.8px of leading, which puts it between Docs (13.54
     words on 16.9px) and the magazine (9.88 on 31.9px) and nearer the magazine.
     Switching styles therefore does reflow the document — Baskerville is a wide
     face, and no size of it both matches Docs' line and stays this open. */
  --doc-size: 16px;
  --doc-line: 1.8;         /* = 28.8px */
  --para-gap: 1.1em;       /* = 17.6px: paragraphs are separated by space… */
  --doc-link: var(--doc-text);  /* the article underlines links in the text ink */
}

/* …not by indentation, so the "no space between paragraphs" Docs rule lifts */
[data-doc-style="reading"] .tiptap p { margin: 0 0 var(--para-gap); }
[data-doc-style="reading"] .tiptap p:last-child { margin-bottom: 0; }
[data-doc-style="reading"] .tiptap li > p { margin: 0; }

/* Section heads are small caps at text weight — the magazine's own hierarchy,
   which leans on letterspacing and space above rather than on size and bold.
   font-variant is synthesised from the roman here; Libre Baskerville ships no
   true small-cap glyphs (the article's own face does). */
[data-doc-style="reading"] .tiptap h2,
[data-doc-style="reading"] .tiptap h3 {
  /* 25.6px small caps, with the article's 0.075em tracking and its 2em of air
     above — the proportions that make a section head read as one */
  font-size: 1.6em; font-variant: all-small-caps; letter-spacing: 0.075em;
  line-height: 1.45; margin: 2em 0 0.333em; color: var(--doc-text);
}
/* holds the article's 64-to-30 relationship between headline and section head */
[data-doc-style="reading"] .tiptap h1 { font-size: 3.4133em; line-height: 1.1; margin: 1.25em 0 0.208em; }
[data-doc-style="reading"] .tiptap h4 { font-size: 1em; font-weight: 700; line-height: 1.3; margin: 2em 0 0.455em; color: var(--doc-text); }
[data-doc-style="reading"] .tiptap h5 { font-size: 1em; font-style: italic; line-height: 1.3; margin: 2em 0 0.455em; color: var(--doc-text); }
[data-doc-style="reading"] .tiptap h6 {
  font-size: 0.818em; font-variant: all-small-caps; letter-spacing: 0.075em;
  font-style: normal; line-height: 1.3; margin: 2.44em 0 0.556em; color: var(--doc-text-2);
}
/* nothing above the first block, whatever it is */
[data-doc-style="reading"] .tiptap > :first-child { margin-top: 0; }
/* the opening heading is the article title: the display cut, set large */
[data-doc-style="reading"] .tiptap > h1:first-child { font-size: 2.909em; line-height: 1.1; margin-bottom: 0.234em; }

/* an underline in the text's own ink, rather than Docs' blue */
[data-doc-style="reading"] .tiptap a { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.15em; }
[data-doc-style="reading"] .tiptap hr { border-top-color: var(--doc-text); margin: 1.818em 0; }
[data-doc-style="reading"] .tiptap blockquote { padding-left: 1.2em; font-style: italic; }
/* lists sit close to the text, not at Docs' half-inch tab stop */
[data-doc-style="reading"] .tiptap ul,
[data-doc-style="reading"] .tiptap ol { padding-left: 1.4em; margin: 0 0 var(--para-gap); }
[data-doc-style="reading"] .tiptap li { padding: 0.227em 0; }

/* --- home --- */
.home { max-width: 680px; margin: 0 auto; padding: 48px 24px 120px; }
.home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.home h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 44px 0 6px; }
.doc-card {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 8px; text-decoration: none; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.doc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.doc-card .title { font-weight: 550; }
.doc-card .meta { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.doc-card .iconbtn { opacity: 0; transition: opacity .12s; }
.doc-card:hover .iconbtn { opacity: 1; }
.home #agent-form { display: flex; gap: 8px; max-width: 440px; margin-top: 12px; }
.home .agent-row { border-bottom: 1px solid var(--border); padding: 9px 2px; }
.home .agent-row:last-of-type { border-bottom: none; }



/* --- pages sidebar --- */
#layout { position: relative; }
#sidebar {
  width: 220px; flex: 0 0 220px; padding: 18px 10px 18px 16px; box-sizing: border-box;
  border-right: 1px solid var(--line); background: var(--bg-2, rgba(0,0,0,0.015));
  overflow-y: auto; font-size: 13.5px;
}
#sidebar.hidden { display: none; }
#sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidebar-title { font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
#page-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
#page-tree > ul { padding-left: 0; }
#page-tree li { margin: 1px 0; }
#page-tree a {
  display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-tree a:hover { background: var(--hl-weak); }
#page-tree a.current { background: var(--hl); font-weight: 600; }
#page-tree a.ghost-page { color: var(--text-3); font-style: italic; }
#page-tree .unfiled-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 2px; }
#structure-link {
  display: block; margin-top: 14px; padding: 4px 8px; color: var(--text-3); font-size: 12px;
  text-decoration: none; border-radius: 6px;
}
#structure-link:hover { background: var(--hl-weak); color: var(--text-2); }
#structure-link.current { background: var(--hl); color: var(--text); }
#sidebar-toggle {
  position: absolute; left: 0; top: 10px; z-index: 5; width: 22px; height: 26px;
  border: 1px solid var(--line); border-left: none; border-radius: 0 6px 6px 0;
  background: var(--paper, #fff); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0;
}
#sidebar-toggle:hover { color: var(--text); }
#page-add { font-size: 15px; line-height: 1; }


/* --- image layout bubble --- */
#image-bubble {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
#image-bubble.hidden { display: none; }
#image-bubble .iconbtn { font-size: 12px; min-width: 26px; }
#image-bubble .iconbtn.on { background: var(--hl); color: var(--accent); font-weight: 700; }
#image-bubble .sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.tiptap img[data-align='center'] { display: block; margin-left: auto; margin-right: auto; }
.tiptap img[data-align='right'] { display: block; margin-left: auto; }
.tiptap img[data-align='left'] { display: block; margin-right: auto; }

/* --- suggestion strip inside comment cards --- */
.sugg-strip {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 0 -1px;
  border-top: 1px dashed var(--line); font-size: 12.5px; cursor: pointer;
  background: var(--hl-weak);
}
.sugg-strip.active { background: var(--hl); }
.sugg-strip .preview { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.sugg-strip .who { font-weight: 600; }
.sugg-strip svg { flex: 0 0 auto; }

/* --- revision chain nav --- */
.chain-nav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.chain-nav .iconbtn { min-width: 18px; padding: 0 3px; font-size: 13px; }
.chain-nav .iconbtn:disabled { opacity: 0.3; cursor: default; }
.chain-pos { font-size: 11px; color: var(--text-3); min-width: 26px; text-align: center; }

/* thread head resolve button */
.card.thread .head .resolve-btn { color: var(--accent); }


/* --- page-link autocomplete + links --- */
#pagelink-menu { position: fixed; z-index: 70; }
.tiptap a { cursor: pointer; }
#structure-link { display: flex; align-items: center; gap: 6px; }
#structure-link .icon { width: 14px; height: 14px; }




/* stale-bundle banner */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px 16px;
  background: #b45309; color: #fff; font-size: 13.5px; text-align: center;
}
#update-banner a { color: #fff; font-weight: 700; }


/* --- diff rendering refinements --- */
/* multi-line insertions: the outer span is a pure container so its inline
   underline can't paint artifacts around block-level children */
.tiptap .sugg-ins.sugg-ins-multi { display: contents; }
.sugg-ins-seg,
.tiptap .sugg-ins-li,
.tiptap .sugg-ins-codeline {
  color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent);
  border-radius: 2px; padding: 0 1px; cursor: pointer;
}
/* a real list-item, so the marker aligns exactly with native bullets */
.tiptap .sugg-ins-li { display: list-item; list-style: disc outside; margin-top: 2px; width: fit-content; }
.tiptap .sugg-ins-li::marker { color: var(--accent); }
.tiptap .sugg-ins-li.ordered { list-style: none; }
.tiptap .sugg-ins-li.ordered::before { content: '+  '; color: var(--accent); font-weight: 700; }
.tiptap .sugg-ins-codeline { display: block; width: fit-content; white-space: pre; min-height: 1.2em; }
.tiptap .sugg-ins-multi.active .sugg-ins-li,
.tiptap .sugg-ins-multi.active .sugg-ins-seg,
.tiptap .sugg-ins-multi.active .sugg-ins-codeline { background: var(--ins-active); font-weight: 600; }

/* pieces that continue the SAME suggestion (js-assigned) bridge the gap to
   the previous piece's bar — generous: overshoot only ever overlaps this
   suggestion's own bar, never an unrelated one */
.tiptap .suggestion-hl.hl-join::before,
.tiptap .sugg-ins-block.hl-join::before { top: calc(-1.8em - 4px); }
/* insertion panels: accent bar in the gutter, aligned with range bars */
.tiptap .sugg-ins-block { border-left: none; position: relative; }
.tiptap .sugg-ins-block::before {
  content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2.5px; background: var(--sugg-bar);
}
.tiptap .sugg-ins-block.active::before { width: 3.5px; background: var(--accent); }


/* --- hideable comments margin --- */
#margin-col.hidden { display: none; }
#margin-toggle {
  position: absolute; right: 0; top: 10px; z-index: 5; width: 22px; height: 26px;
  border: 1px solid var(--line); border-right: none; border-radius: 6px 0 0 6px;
  background: var(--surface); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0;
}
#margin-toggle:hover { color: var(--text); }


/* per-page delete: appears on row hover */
#page-tree a { display: flex; align-items: center; }
#page-tree a > .page-del { display: none; margin-left: auto; padding: 0 2px; flex: 0 0 auto; }
#page-tree a:hover > .page-del { display: inline-flex; }
#page-tree .page-del svg { width: 13px; height: 13px; }
#page-tree .page-del:hover { color: var(--danger); }


/* --- slug legend on the structure page --- */
#slug-legend {
  margin-top: 14px; padding: 14px 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; font-size: 13px;
}
#slug-legend .legend-title { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
#slug-legend table { border-collapse: collapse; width: 100%; }
#slug-legend th { text-align: left; font-size: 11.5px; color: var(--text-3); font-weight: 600; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); }
#slug-legend td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); }
#slug-legend tr:last-child td { border-bottom: none; }
#slug-legend td a { color: var(--text); text-decoration: none; }
#slug-legend td a:hover { text-decoration: underline; }
#slug-legend code {
  background: var(--tint); padding: 1px 7px; border-radius: 5px; cursor: pointer;
  font-size: 12px;
}
#slug-legend code:hover { background: var(--hl); }
#slug-legend code.copied { background: var(--accent-soft); color: var(--accent); }


/* compact structure page: no phantom card height, hint above the field */
.structure-mode #editor { min-height: 0; padding: 22px 28px; }
#structure-hint {
  margin-bottom: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--text-2);
  background: var(--hl-weak); border: 1px solid var(--line); border-radius: 10px;
}


/* --- agents panel alignment --- */
#agents-list .agent-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
#agents-list .agent-row:last-child { border-bottom: none; }
#agents-list .agent-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
#agents-list .agent-id .handle { font-weight: 600; font-size: 13px; }
#agents-list .agent-id .owner { font-size: 11px; }
#agents-list .actions { display: flex; gap: 2px; flex: 0 0 auto; }
#agents-list .actions .iconbtn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
#agents-list .actions .iconbtn.on { color: var(--accent); }
#agents-list .actions .iconbtn svg { width: 15px; height: 15px; }
.key-box .key-label { font-size: 12px; color: var(--text-2); }
.key-box .row { display: flex; gap: 6px; flex-wrap: wrap; }
.key-box .row .btn { white-space: nowrap; }


/* --- instant tooltips for icon buttons --- */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); right: -4px;
  background: var(--tooltip-bg); color: #fff; font-size: 11.5px; line-height: 1.35;
  padding: 5px 9px; border-radius: 7px; width: max-content; max-width: 240px;
  white-space: normal; text-align: left; z-index: 95; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
[data-tip].tip-below:hover::after { bottom: auto; top: calc(100% + 7px); }


/* --- task lists --- */
.tiptap ul[data-type='taskList'] { list-style: none; padding-left: 4px; margin: 0.4em 0; }
.tiptap ul[data-type='taskList'] li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
.tiptap ul[data-type='taskList'] li > label { margin-top: 2px; flex: 0 0 auto; }
.tiptap ul[data-type='taskList'] li > div { flex: 1; }
.tiptap ul[data-type='taskList'] input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.tiptap ul[data-type='taskList'] li[data-checked='true'] > div { color: var(--text-3); text-decoration: line-through; }
/* task lists rendered in suggestion insertion panels */
.sugg-ins-block ul[data-type='taskList'] { list-style: none; padding-left: 0; }
.sugg-ins-block .task-item { display: flex; align-items: flex-start; gap: 8px; }
.sugg-ins-block .task-item.checked > span { color: var(--text-3); text-decoration: line-through; }

/* --- tables --- */
.tiptap table, .sugg-ins-block table { border-collapse: collapse; width: 100%; margin: 0.4em 0; font-size: 1em; table-layout: fixed; overflow: hidden; }
/* Docs draws a 1pt dark rule and pads cells ~5pt; no shaded header row */
.tiptap th, .tiptap td, .sugg-ins-block th, .sugg-ins-block td {
  border: 1px solid var(--table-rule); padding: 5pt 7pt; vertical-align: top; text-align: left;
}
.tiptap th, .sugg-ins-block th { background: none; font-weight: 700; }
.tiptap td p, .tiptap th p { margin: 0; }
.tiptap .selectedCell:after {
  content: ''; position: absolute; inset: 0; background: var(--hl); pointer-events: none;
}
.tiptap td, .tiptap th { position: relative; }

/* Column resizing. prosemirror-tables draws the handle itself and puts
   .resize-cursor on the editor while one is grabbed; both need styling or the
   feature is invisible. The handle sits on the cell border it moves. */
.tiptap .column-resize-handle {
  position: absolute; right: -1px; top: 0; bottom: -1px; width: 3px;
  background: var(--accent, #1a73e8); pointer-events: none; z-index: 5;
}
.tiptap.resize-cursor, .tiptap.resize-cursor * { cursor: col-resize; }


/* --- table controls bar --- */
#table-controls {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
#table-controls.hidden { display: none; }
#table-controls .iconbtn { font-size: 11.5px; padding: 3px 7px; white-space: nowrap; }
#table-controls .iconbtn.danger:hover { color: var(--danger); }
#table-controls .sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }


/* --- proposed new pages --- */
#page-tree a.pending-page { color: var(--text-2); border: 1px dashed var(--line); border-radius: 6px; }
#page-tree a.pending-page .pending-badge {
  display: inline-block; margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 5px;
  background: var(--hl); color: var(--accent); vertical-align: middle;
}
#proposal-view.hidden { display: none; }
#proposal-view {
  background: var(--surface); border: none; border-radius: 0;
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  min-height: 78vh; box-shadow: var(--page-shadow); overflow: hidden;
}
.proposal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--hl-weak);
}
.proposal-meta { font-size: 13px; color: var(--text-2); }
.proposal-actions { display: flex; gap: 8px; }
.proposal-content { padding: var(--page-pad); }
.proposal-content::before {
  content: 'Preview of the proposed page — accept to create it'; display: block;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 16px;
}

/* --- HTML embeds (sandboxed iframe) --- */
.html-embed-wrap { position: relative; margin: 0.6em 0; }
.tiptap .html-embed, .proposal-content .html-embed {
  /* keeps a light canvas in either theme — the embed's HTML is not ours to re-colour */
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  display: block; min-height: 24px;
  /* content-box so the JS-set height is the inner viewport exactly — with
     border-box the 1px borders shrink the viewport below the content and
     produce a 2px vertical scrollbar */
  box-sizing: content-box;
}
.html-embed-wrap.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-radius: 8px; }
.html-embed-edit {
  position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .12s;
  font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
}
.html-embed-wrap:hover .html-embed-edit { opacity: 1; }
.html-embed-edit:hover { color: var(--text); border-color: var(--text-3); }

/* embed authoring modal */
.embed-overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(18,18,24,.4); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.embed-overlay-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  width: min(760px, 92vw); padding: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.embed-overlay-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.embed-overlay-hint { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.embed-overlay-ta {
  width: 100%; height: 300px; resize: vertical; font: 13px/1.55 var(--mono, ui-monospace, monospace);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; background: var(--input-bg); color: var(--text);
}
.embed-overlay-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }


/* ============================================================
   Narrow windows (≤980px: phones, tablets, split-screen). There is no
   room for three columns, so the page tree becomes a slide-over drawer
   and the comments become a bottom sheet over the document. Stacking
   them *under* the document instead would hide every card behind a
   full page scroll.
   ============================================================ */
@media (max-width: 980px) {
  #layout { gap: 0; }
  #margin-head { display: flex; }

  /* the formatting toolbar gets its own full-width row: sharing one row with
     the title and the actions squeezed the title down to "Pl…" */
  #topbar { flex-wrap: wrap; align-content: center; height: auto; min-height: 52px; }
  #doc-title { max-width: 42vw; }
  #header-tools {
    order: 10; flex-basis: 100%; width: 100%; margin: 0;
    padding: 3px 0 1px; border-top: 1px solid var(--border);
  }

  /* --- pages drawer --- */
  #sidebar {
    position: fixed; left: 0; top: var(--hdr-h, 50px); bottom: 0; width: 270px;
    z-index: 49; padding: 16px 12px 24px;
    background: var(--surface); box-shadow: 6px 0 28px rgba(0, 0, 0, 0.18);
  }
  #sidebar-head { margin-bottom: 10px; gap: 6px; }
  /* the tabs live inside #layout, which scrolls: pin them to the viewport so
     the drawer and the sheet stay one tap away at any scroll position */
  #sidebar-toggle, #margin-toggle { position: fixed; top: calc(var(--hdr-h, 52px) + 10px); z-index: 47; }
  #margin-toggle { right: 0; }
  #scrim { position: fixed; inset: 0; z-index: 48; background: var(--scrim); }
  #scrim.hidden { display: none; }

  /* --- comments: bottom sheet --- */
  /* the open sheet hides the bottom ~3/4 of the viewport: without extra trailing
     space the end of the document could never be scrolled into the visible strip */
  body.sheet-open #layout { padding-bottom: 82vh; }
  #margin-col {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 74vh; z-index: 55; display: flex; flex-direction: column; padding: 0;
    background: var(--surface); border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.2);
    transition: transform .22s ease;
  }
  /* kept in the layout (so counts/measurements stay live) but slid away */
  #margin-col.hidden { display: flex !important; transform: translateY(105%); pointer-events: none; }
  #margin-head {
    align-items: center; gap: 8px; padding: 10px 8px 6px 16px; position: relative;
    border-bottom: 1px solid var(--border);
  }
  #margin-grab {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong);
  }
  #margin-head-title { font-weight: 650; font-size: 14px; flex: 1; }
  #margin-close { min-width: 38px; height: 38px; }
  #margin-tools { margin: 0; padding: 8px 16px 0; font-size: 13px; }
  #margin-items {
    flex: 1; min-height: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .margin-empty { padding: 4px 4px 12px; }
  .card, .composer-box { position: static !important; top: auto !important; width: 100%; margin-bottom: 10px; }
  .card { padding: 12px 14px; }
  /* the preview drops to its own full-width line instead of being squeezed to
     "Adds …" between the author and the accept/reject buttons */
  .card .head { gap: 8px; flex-wrap: wrap; row-gap: 4px; }
  .card .head .preview {
    order: 10; flex: 1 0 100%; font-size: 13px; white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card .head .when { margin-left: auto; }
  .sugg-strip { flex-wrap: wrap; row-gap: 4px; padding: 8px 10px; }
  .sugg-strip .preview { order: 10; flex: 1 0 100%; white-space: normal; }
  .card .head .iconbtn { min-width: 36px; height: 36px; padding: 6px; }
  .msg { font-size: 14.5px; }
  .msg .text.clamped, .rationale.clamped { max-height: 12em; }
  .chip { font-size: 12px; padding: 4px 10px; }
  .reply-row { gap: 8px; }
  .card .actions .btn, .composer-box .btn { padding: 9px 14px; font-size: 14px; }

}

/* ============================================================
   Phones (≤700px), on top of the ≤980 rules above: a compact single-row
   header with the crowded-out controls in a ⋯ sheet, the formatting bar as
   a toggleable second row, a full-bleed document and touch-sized targets.
   ============================================================ */
@media (max-width: 700px) {
  .phone-only { display: inline-flex !important; }

  /* --- header: one compact row --- */
  #topbar {
    height: 50px; min-height: 50px; gap: 2px; padding: 0 6px;
    /* wrap is what lets the formatting strip become a second row */
    flex-wrap: wrap; align-content: center; z-index: 50;
  }
  #back-link { padding: 8px 4px; }
  #doc-title { flex: 1; min-width: 0; max-width: none; font-size: 15px; margin-left: 2px; }
  #conn { margin-right: 2px; }
  /* moved into the ⋯ sheet by js, or simply not worth the width. Scoped to the
     document shell: the home page header has no ⋯ menu to move them into. */
  .page-doc #presence, .page-doc #whoami,
  .page-doc #share-btn, .page-doc #agents-btn, .page-doc #reset-btn { display: none; }
  #topbar .iconbtn { min-width: 40px; height: 40px; border-radius: 9px; }
  #m-fmt { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
  #m-more { font-size: 20px; line-height: 1; padding-bottom: 6px; }
  #topbar .iconbtn.on { background: var(--accent-soft); color: var(--accent); }
  /* unread/total comment count on the comments button */
  #m-comments { position: relative; }
  #m-comments .count {
    position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--accent); color: var(--on-primary);
    font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  }

  /* formatting toolbar: a second header row, revealed by the Aa button.
     It scrolls horizontally instead of squeezing the header. */
  #header-tools { display: none; }
  body.fmt-open #topbar { height: auto; padding-bottom: 5px; }
  body.fmt-open #header-tools {
    display: flex; order: 10; flex-basis: 100%; width: 100%; margin: 0;
    gap: 2px; padding-top: 2px; border-top: 1px solid var(--border);
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  #header-tools button { min-width: 40px; height: 38px; font-size: 13.5px; }
  #header-tools .sep { height: 22px; }
  #zoom-label { min-width: 40px; font-size: 12.5px; }

  /* --- popovers become near-fullwidth sheets under the header --- */
  #share-pop, #agents-pop, #more-pop {
    position: fixed; left: 8px; right: 8px; top: calc(var(--hdr-h, 50px) + 6px);
    width: auto; max-height: calc(100vh - var(--hdr-h, 50px) - 20px);
    overflow-y: auto; z-index: 60; -webkit-overflow-scrolling: touch;
  }
  #link-pop { left: 8px !important; right: 8px; width: auto; top: calc(var(--hdr-h, 50px) + 6px) !important; }
  #more-pop {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 6px;
  }
  #more-pop.hidden { display: none !important; }
  #more-pop .btn, #more-pop #whoami, #more-pop .row {
    display: flex !important; width: 100%; justify-content: flex-start;
    padding: 11px 12px; border: none; border-radius: 9px; font-size: 15px; background: transparent;
  }
  #more-pop .btn + .btn { margin-top: 1px; }
  #more-pop .btn:hover { background: var(--tint); }
  #more-pop #whoami { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; gap: 8px; }
  #more-pop .pop-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); padding: 8px 12px 4px; }

  /* --- layout: document full-bleed --- */
  #layout { padding: 0 0 32vh; gap: 0; overflow-x: clip; }
  #editor, #doc-skeleton {
    padding: 22px 16px 40px; border-radius: 0; border-left: none; border-right: none;
    min-height: 70vh; box-shadow: none;
  }
  .structure-mode #editor { padding: 16px 14px; }
  #proposal-view { border-radius: 0; border-left: none; border-right: none; }
  .proposal-content { padding: 20px 16px; }
  .proposal-bar { padding: 12px 14px; }
  /* 11pt is uncomfortably small on a handset — nudged up, still Arial/1.15 */
  .tiptap { font-size: calc(16px * var(--doc-zoom, 1)); }
  /* Reading steps down too: 22px is a desktop column measure, and a phone has
     no room for it. The article itself drops to 18px on small screens. */
  [data-doc-style="reading"] .tiptap { font-size: calc(18px * var(--doc-zoom, 1)); }
  .tiptap pre { font-size: 13px; padding: 10px; }
  /* wide content scrolls inside itself rather than widening the page */
  .tiptap table, .sugg-ins-block table { display: block; overflow-x: auto; white-space: nowrap; }
  .tiptap .suggestion-hl::before, .tiptap .sugg-ins-block::before { left: -8px; }

  /* phone-sized drawer + sheet touch targets */
  #sidebar { width: min(84vw, 300px); padding: 14px 12px 24px; font-size: 15px; }
  #sidebar-head .iconbtn { min-width: 38px; height: 38px; }
  #page-tree a { padding: 10px 10px; border-radius: 8px; }
  #page-tree a > .page-del { display: inline-flex; padding: 6px; }
  #page-tree .page-del svg { width: 16px; height: 16px; }
  #structure-link { padding: 10px; font-size: 13.5px; }
  /* the desktop edge tabs are replaced by real header buttons */
  #sidebar-toggle, #margin-toggle { display: none; }
  #margin-items { padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .card { padding: 12px 14px; }

  /* 16px+ inputs: anything smaller makes iOS Safari zoom in on focus */
  input, textarea, .composer-box textarea, .composer-box input, .reply-row textarea { font-size: 16px; }
  #suggest-text { min-height: 30vh; }

  /* --- selection menu: thumb-sized --- */
  #selection-menu { border-radius: 10px; }
  #selection-menu button { padding: 12px 18px; font-size: 15px; }

  /* --- floating bubbles --- */
  #image-bubble, #table-controls { max-width: calc(100vw - 16px); overflow-x: auto; }
  #image-bubble .iconbtn, #table-controls .iconbtn { min-width: 34px; height: 34px; }

  /* theme + mode controls ride the ⋯ sheet on a phone, where the header is full */
  #more-pop #theme-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 11px 12px; height: auto; font-size: 14px; }
  #more-pop #theme-btn .lbl, #more-pop #docstyle-btn .lbl { display: inline; }
  /* the mode switch rides the ⋯ sheet on a phone, where the header is full */
  #more-pop #mode-switch { margin: 4px 8px 6px; justify-content: center; }
  #more-pop #mode-switch button { flex: 1; padding: 9px 12px; font-size: 13.5px; }

  /* --- home --- */
  .home { padding: 24px 16px 80px; }
  .home-head { flex-wrap: wrap; gap: 10px; }
  .home h1 { font-size: 20px; }
  .home h2 { margin-top: 32px; }
  .doc-card { padding: 14px; gap: 10px; }
  .doc-card .iconbtn { opacity: 1; min-width: 38px; height: 38px; }
  .home #agent-form { flex-wrap: wrap; }
  .home #agent-form .btn { padding: 10px 16px; }
  .overlay .card { padding: 28px 22px; margin: 0 14px; }
  .key-box .row .btn { flex: 1; justify-content: center; }

  /* hover tooltips are useless on touch and stick around after a tap */
  [data-tip]:hover::after { display: none; }
}


@media (hover: none) {
  [data-tip]:hover::after { display: none; }
}