/* ============================================================================
   golden-docs editor — FNA Fraud Portal house style.
   Tokens mirror viewer.css / the mt-fe-mirror design system (Open Sans, slim
   navy bar, blue accent, orange submit CTA, square 2px corners). The UI is a
   drill-in stack: Library (landing) → Document (stepped in) → Reviews, one
   screen at a time, so each surface stays uncrowded in the inline iframe.
   ============================================================================ */
:root {
  --navy-bar: #181d2f;
  --navy-2: #2a376f;
  --ink: #000f1d;
  --body: #2b3640;
  --muted: #748392;
  --faint: #a5b0bd;
  --slate: #3a4858;
  --line: #d3dae5;
  --line-2: #edf1f9;
  --line-strong: #cdd5dd;
  --bg: #fafcfe;
  --paper: #ffffff;
  --strip: #f5f8fc;
  --accent: #0085ff;
  --accent-d: #006acc;
  --accent-soft: #e6f2ff;
  --accent-line: #b3d9ff;
  --agent: #6657d9;
  --agent-d: #5143bd;
  --agent-soft: #f0edff;
  --agent-line: #c9c2f5;
  --submit: #ed4021;
  --submit-d: #c4360e;
  --green: #00ba34;  --green-soft: #e5f8eb;  --green-line: #9fe3b5;
  --amber: #f5911c;  --amber-soft: #fef4e8;  --amber-line: #f9d3a3;
  --red: #ed4021;    --red-soft: #fdece9;    --red-line: #f7c6b8;
  --r: 2px; --r-lg: 4px; --r-sm: 1px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0,15,29,.06);
  --shadow-md: 0 6px 18px rgba(0,15,29,.12);
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon {
  display: block; width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  min-height: 100vh; /* keeps the MCP-App aspect-ratio sizing path working */
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }

/* ---- buttons ---- */
button { font-family: inherit; font-size: 13px; cursor: pointer; }
.btn, #frontmatter-form button, #reviews-detail-actions button,
.composer-actions button, .comment-actions button, .agent-handoff-actions button {
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--body);
  border-radius: var(--r); padding: 6px 12px; font-weight: 600;
}
.icon-btn {
  border: 1px solid transparent; background: transparent; color: inherit;
  border-radius: var(--r); padding: 4px 9px; font-size: 15px; line-height: 1;
}
.icon-btn:hover { background: rgba(0,0,0,.06); }
.sidebar-toggle-icon {
  display: block; width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ghost-btn {
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--body);
  border-radius: var(--r); padding: 6px 12px; font-weight: 600; font-size: 12.5px;
}
.ghost-btn:hover { background: var(--strip); border-color: var(--accent-line); }
/* Leading glyph on text buttons (+ New, ⟳ Reload) — larger than the label so
   the icon doesn't read as an undersized afterthought next to it. */
.btn-glyph { font-size: 16px; line-height: 0; vertical-align: -2px; margin-right: 2px; font-weight: 400; }
.submit-btn {
  border: 1px solid var(--submit); background: var(--submit); color: #fff;
  border-radius: var(--r); padding: 6px 14px; font-weight: 600; font-size: 12.5px;
}
.submit-btn:hover { background: var(--submit-d); border-color: var(--submit-d); }
.submit-btn:disabled { opacity: .45; cursor: default; }
.primary-btn {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: var(--r); padding: 6px 14px; font-weight: 600;
}
.primary-btn:hover { background: var(--accent-d); }
.agent-primary-btn {
  border: 1px solid var(--agent); background: var(--agent); color: #fff;
  border-radius: var(--r); padding: 6px 12px; font-weight: 600;
}
.agent-primary-btn:hover { background: var(--agent-d); border-color: var(--agent-d); }
.agent-primary-btn:disabled { opacity: .45; cursor: default; }
.danger-btn {
  border: 1px solid var(--red); background: var(--paper); color: var(--red);
  border-radius: var(--r); padding: 6px 14px; font-weight: 600;
}
.danger-btn:hover { background: var(--red-soft); }

/* ---- status band (square FNA category chip) ---- */
.band {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-sm); border: 1px solid transparent;
  text-transform: capitalize; white-space: nowrap;
}
.band::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .75; }
.band-canonical { background: var(--green-soft); color: #0f7048; border-color: var(--green-line); }
.band-draft { background: var(--amber-soft); color: #9a5a06; border-color: var(--amber-line); }
.band-reviewed { background: var(--accent-soft); color: var(--accent-d); border-color: var(--accent-line); }
.band-deprecated { background: var(--red-soft); color: #b5343a; border-color: var(--red-line); }

/* ============================ TOP BAR ============================ */
#topbar {
  flex: 0 0 48px; display: flex; align-items: center; gap: 12px;
  background: var(--navy-bar); color: #fff; padding: 0 16px;
  position: sticky; top: 0; z-index: 50;
}
#topbar > * { min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .logo { height: 24px; width: auto; display: block; }
.brand .fna { color: #fafcfe; font-weight: 700; font-size: 14px; }
.brand .sub { color: #fafcfe; font-weight: 500; font-size: 14px; }
.brand .app-version {
  margin-left: -2px; padding-left: 7px; border-left: 1px solid rgba(255,255,255,.2);
  color: #aeb7cc; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.brand .app-version:empty { display: none; }
#topbar-title {
  color: #eef1f8; font-weight: 600; font-size: 13.5px;
  max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-status { font-size: 11px; }
.topbar-status:empty { display: none; }
.topbar-spacer { flex: 1; }
#doc-actions, #library-actions {
  display: flex; flex: 0 0 auto; align-items: center; gap: 8px;
}
#doc-actions, #library-actions, #portal-body, #portal-content, #screen-document, #layout, #main {
  min-width: 0;
}
#mobile-actions { display: none; position: relative; }
#mobile-actions summary { list-style: none; cursor: pointer; }
#mobile-actions summary::-webkit-details-marker { display: none; }
.mobile-actions-menu {
  position: absolute; z-index: 80; top: calc(100% + 6px); right: 0;
  width: min(260px, calc(100vw - 16px));
  padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-md);
}
.mobile-actions-menu button {
  width: 100%; border: 0; background: transparent; color: var(--ink);
  text-align: left; padding: 9px 10px; border-radius: var(--r); font: inherit; cursor: pointer;
}
.mobile-actions-menu button:hover, .mobile-actions-menu button:focus-visible {
  background: var(--accent-soft);
}
.mobile-menu-label {
  display: block; margin: 2px 4px 6px; color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase;
}
.mobile-mode-actions { padding: 4px; }
.mobile-mode-switcher {
  display: flex;
  overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r);
}
.mobile-actions-menu .mobile-mode-switcher button {
  flex: 1 1 0; min-width: 0; padding: 7px 6px;
  text-align: center; border-radius: 0; white-space: nowrap;
  font-size: 12px; font-weight: 600;
}
.mobile-actions-menu .mobile-mode-switcher button + button {
  border-left: 1px solid var(--line-strong);
}
.mobile-actions-menu .mobile-mode-switcher button.active {
  background: var(--accent-soft); color: var(--accent-d);
}
.mobile-notes-actions {
  margin-top: 6px; padding: 7px 4px 4px; border-top: 1px solid var(--line-2);
}
.mobile-notes-actions button { display: flex; align-items: center; justify-content: space-between; }
.mobile-notes-actions #mobile-btn-agent-annotations { color: var(--agent-d); }
.mobile-notes-actions .badge { flex: 0 0 auto; }
.mobile-actions-menu .mobile-primary-action {
  margin-top: 4px; background: var(--submit); color: #fff; font-weight: 700;
  text-align: center;
}
.mobile-actions-menu .mobile-primary-action:hover,
.mobile-actions-menu .mobile-primary-action:focus-visible {
  background: var(--submit-d);
}
.mobile-actions-menu .mobile-primary-action:disabled {
  background: var(--line); color: var(--muted); cursor: default;
}
.mobile-menu-divider { height: 1px; margin: 6px 4px; background: var(--line-2); }
body[data-screen="library"] .mobile-document-action,
body[data-screen="document"] .mobile-library-action,
body[data-screen="reviews"] #mobile-actions,
body[data-screen="docs"] #mobile-actions { display: none; }
/* On the navy bar, ghost buttons get a light outline so they read on dark. */
#topbar .ghost-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #eef1f8; }
#topbar .ghost-btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
#topbar .icon-btn { color: #eef1f8; }
#topbar .icon-btn:hover { background: rgba(255,255,255,.12); }

/* Contextual visibility. Default (no data-screen yet, before JS runs) is the
   Library look, so the first paint matches the landing with no flash. */
#btn-back, #topbar-title, #topbar-status, #doc-actions { display: none; }
#library-actions { display: flex; }
body[data-screen="document"] #doc-actions { display: flex; }
body[data-screen="document"] #btn-back { display: inline-flex; }
body[data-screen="document"] #topbar-title { display: block; }
body[data-screen="document"] #topbar-status:not(:empty) { display: inline; }
body[data-screen="document"] #library-actions,
body[data-screen="reviews"] #library-actions,
body[data-screen="docs"] #library-actions { display: none; }

.badge {
  display: inline-block; min-width: 16px; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 0 5px; margin-left: 2px;
}

/* Document mode and notes are separate state: Read/Edit changes how the source
   is rendered, while Notes opens a rail over the stable read-only snapshot. */
#document-mode-control {
  display: inline-flex; flex: 0 0 auto; align-items: stretch; gap: 8px;
}
.segmented {
  display: inline-flex; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r); overflow: hidden;
}
.segmented button { background: transparent; border: 0; color: #cdd3ec; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.segmented button.active { background: var(--accent); color: #fff; }
#mode-switcher button + button { border-left: 1px solid rgba(255,255,255,.18); }

#notes-menu { position: relative; flex: 0 0 auto; }
#notes-menu > summary {
  height: 100%; display: flex; align-items: center; gap: 5px; list-style: none;
  padding: 5px 9px; border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r); color: #cdd3ec;
  font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
}
#notes-menu > summary::-webkit-details-marker { display: none; }
#notes-menu > summary:hover, #notes-menu[open] > summary { background: var(--navy-2); color: #fff; }
#notes-menu.context-comments > summary { background: var(--accent); color: #fff; }
#notes-menu.context-agent > summary { background: var(--agent); color: #fff; }
#notes-menu.context-comments #notes-badge,
#notes-menu.context-agent #notes-badge { background: #fff; color: var(--ink); }
.notes-menu-caret {
  width: 6px; height: 6px; margin: -3px 1px 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.notes-menu-popover {
  position: absolute; z-index: 90; top: calc(100% + 6px); right: 0;
  width: 250px; padding: 6px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-md);
}
.notes-menu-label {
  display: block; padding: 4px 8px 6px; color: var(--muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase;
}
.notes-menu-popover button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; border-radius: var(--r); padding: 9px 8px; background: transparent;
  color: var(--ink); text-align: left;
}
.notes-menu-popover button:hover, .notes-menu-popover button:focus-visible { background: var(--accent-soft); }
.notes-menu-popover button > span:first-child { display: grid; gap: 2px; }
.notes-menu-popover button strong { font-size: 12.5px; }
.notes-menu-popover button small { color: var(--muted); font-size: 10.5px; font-weight: 400; }
.agent-action-label, .agent-icon-button {
  display: inline-flex; align-items: center; gap: 6px;
}
.agent-action-label .ui-icon, .agent-icon-button .ui-icon { width: 14px; height: 14px; }
.notes-menu-popover button.is-active { background: var(--accent-soft); color: var(--accent-d); }
.notes-menu-popover #btn-agent-annotations:hover,
.notes-menu-popover #btn-agent-annotations:focus-visible,
.notes-menu-popover #btn-agent-annotations.is-active { background: var(--agent-soft); color: var(--agent-d); }
.agent-badge { background: var(--agent); }

/* sidebar filter box on the navy bar */
/* Lives in the left sidebar, above the document tree, on a light background. */
.nav-search {
  display: block; width: calc(100% - 24px); margin: 0 12px 8px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font-size: 12.5px; font-family: inherit;
}
.nav-search::placeholder { color: var(--muted); }
.nav-search:focus { outline: 0; border-color: var(--accent); }
body[data-screen="reviews"] .nav-search,
body[data-screen="docs"] .nav-search { display: none; }

/* ============================ PORTAL SHELL ============================ */
/* Persistent left sidebar (folder-grouped doc tree) + content pane. Sits
   between the top bar and the drill-in screens, which now live inside
   #portal-content. */
#portal-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }
#portal-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

#portal-sidebar {
  flex: 0 0 280px; min-width: 0; overflow-y: auto;
  background: var(--paper); border-right: 1px solid var(--line);
}
body[data-screen="reviews"] #portal-sidebar,
body[data-screen="docs"] #portal-sidebar { display: none; }

/* Library navigation is persistent on wide screens. A document opens with the
   list hidden for a focused reading canvas; its topbar panel control can bring
   the list back. Narrow screens use the same control for a slide-in drawer. */
#sidebar-toggle, #sidebar-close { display: none; }
#sidebar-overlay { display: none; }
@media (min-width: 761px) {
  body[data-screen="document"] #sidebar-toggle { display: inline-flex; }
  body[data-screen="document"]:not(.sidebar-navigation-open) #portal-sidebar { display: none; }
}
.sidebar-header { padding: 14px 16px 8px; }
.sidebar-header h2 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-family: var(--font-mono);
}
.nav-tree { padding: 4px 8px 24px; }
.nav-empty { color: var(--muted); font-size: 12.5px; padding: 8px 10px; }

.nav-section { margin-bottom: 2px; }
.nav-section > summary {
  list-style: none; display: flex; align-items: center; gap: 10px; min-height: 34px;
  padding: 7px 10px; border-radius: var(--r); cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary::before {
  content: ""; display: block; flex: 0 0 auto; width: 8px; height: 8px;
  margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  color: var(--muted); transform: rotate(-45deg); transition: transform .12s ease;
}
.nav-section[open] > summary::before { transform: rotate(45deg); }
.nav-section > summary:hover { background: var(--strip); }

.nav-list { list-style: none; margin: 2px 0 8px; padding: 0 0 0 18px; display: grid; gap: 1px; }
.nav-list a {
  display: block; padding: 5px 10px; border-radius: var(--r); color: var(--body);
  font-size: 12.5px; line-height: 1.35; text-decoration: none;
}
.nav-list a:hover { background: var(--strip); color: var(--ink); }
.nav-list a.is-current { background: var(--accent-soft); color: var(--accent-d); font-weight: 600; }

/* document header band (status / id / version / visibility) above the body */
.doc-header {
  max-width: 820px; margin: 0 auto; padding: 26px clamp(18px,4vw,40px) 0;
}
.doc-header .band { margin-bottom: 10px; }
.doc-header-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px;
}
.access-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.access-tags-label { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.access-chip {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--strip);
  color: var(--body); font-size: 11px; font-weight: 600;
}

/* ============================ LIBRARY ============================ */
#screen-library { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px clamp(16px, 4vw, 40px) 64px; }
.library-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.library-summary { margin: 0; color: var(--muted); font-size: 13px; flex: 1; min-width: 200px; }
.seat-chip {
  font-size: 11.5px; color: var(--muted); background: var(--strip);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px;
}
.seat-chip:empty { display: none; }

.doc-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: 12px; }
.doc-card {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.doc-card:hover { border-color: var(--accent-line); border-left-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.doc-card.active { border-left-color: var(--accent); background: var(--accent-soft); }
.card-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.card-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.card-path { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.card-tag { font-size: 11px; color: var(--muted); background: var(--strip); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px; }
.card-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--body); }
.card-stats .stat { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.card-stats .stat.stale { color: #9a5a06; }
.card-stats .stat.readonly { color: var(--faint); font-weight: 500; }

/* ============================ DOCUMENT ============================ */
#screen-document { flex: 1 1 auto; min-height: 0; }
#layout { display: flex; flex-direction: row; height: 100%; min-height: 0; position: relative; }
#main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* outline — OpenAI/Claude-style section navigator. Minimal tick marks pinned to
   the right edge that expand into a labeled, clickable section list on hover or
   keyboard focus. Fixed to the viewport so it stays put as the page scrolls;
   sits inside #screen-document so it only shows on the Document screen. */
#outline {
  /* Vertically centred on the viewport (not pinned to the top), so the section
     navigator floats beside the middle of the screen as the page scrolls. */
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 10px 14px; max-height: 80vh; overflow-y: auto;
  border-radius: var(--r-lg); background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
#outline.empty { display: none; }
#outline::-webkit-scrollbar { width: 0; height: 0; }
.outline-link {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  width: 100%; border: 0; background: none; cursor: pointer; padding: 4px 0; color: var(--muted);
}
.outline-tick { flex: none; height: 2px; border-radius: 2px; background: var(--line-strong); transition: background .15s ease; }
.outline-link.lvl-h1 .outline-tick { width: 22px; }
.outline-link.lvl-h2 .outline-tick { width: 16px; }
.outline-link.lvl-h3 .outline-tick { width: 11px; }
.outline-link.lvl-h4 .outline-tick { width: 8px; }
.outline-label {
  font-size: 12.5px; line-height: 1.3; white-space: nowrap; text-align: right;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .18s ease, opacity .18s ease;
}
#outline:hover, #outline:focus-within { background: var(--paper); box-shadow: var(--shadow-md); }
#outline:hover .outline-label, #outline:focus-within .outline-label { max-width: 260px; opacity: 1; }
#outline:hover .outline-tick, #outline:focus-within .outline-tick { background: var(--accent-line); }
.outline-link:hover .outline-label, .outline-link:focus-visible .outline-label { color: var(--accent); }
.outline-link:hover .outline-tick, .outline-link:focus-visible .outline-tick { background: var(--accent); }
/* Hide the section navigator when either annotation rail occupies the right edge. */
body.comments-open #outline, body.agent-annotations-open #outline { display: none; }

#panel-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); flex: 0 0 auto; }
#panel-tabs button {
  appearance: none; background: none; border: 0; padding: 11px 14px; font-size: 12px; font-weight: 600;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
#panel-tabs button:hover { color: var(--ink); }
#panel-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Rendered ⇄ Markdown toggle sits at the right of the tab bar. Reuses the
   .segmented layout but recolours for the light tab bar (base .segmented is
   tuned for the dark topbar). Because it lives inside #panel-tabs, the tab
   `button` rules (background:none, the active underline, tall padding) bleed
   in — the overrides below reset them. The id[hidden] rule is needed because
   .segmented sets display:inline-flex, which would otherwise beat [hidden]. */
#doc-view-toggle { margin-left: auto; align-self: center; border-color: var(--line-strong); }
#doc-view-toggle[hidden] { display: none; }
#doc-view-toggle button {
  color: var(--muted); background: transparent; padding: 4px 10px; cursor: pointer;
  border-bottom: 0; margin-bottom: 0;
}
#doc-view-toggle button:hover { color: var(--ink); }
#doc-view-toggle button.active { background: var(--accent); color: #fff; }

.external-change-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px; border-bottom: 1px solid var(--amber-line);
  background: var(--amber-soft); color: var(--body); font-size: 12.5px;
}
.external-change-banner[hidden] { display: none; }
.external-change-banner strong { color: var(--ink); margin-right: 4px; }
.external-change-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.external-change-actions button {
  border: 1px solid var(--amber-line); border-radius: var(--r);
  background: var(--paper); color: var(--body); padding: 6px 10px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.external-change-actions .primary-btn {
  border-color: var(--accent); background: var(--accent); color: #fff;
}

#toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--strip); flex: 0 0 auto; }
body.mode-viewer #toolbar, body.panel-frontmatter #toolbar, body.panel-diff #toolbar, #toolbar.hidden { display: none; }
.toolbar-group { display: flex; gap: 3px; padding-right: 8px; border-right: 1px solid var(--line); }
.toolbar-group:last-child { border-right: 0; }
#toolbar button { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 28px; padding: 0 6px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--body); border-radius: var(--r); font-size: 12px; cursor: pointer; }
#toolbar button.tb-text { font-weight: 600; font-size: 11.5px; }
#toolbar button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
#toolbar button:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-d); }
#toolbar button:active { transform: translateY(0.5px); }

.panel { flex: 1 1 auto; min-height: 0; overflow: auto; }
#panel-document { position: relative; }
.doc-scroll { padding: 0; }
.view { display: none; }
.view.active { display: block; }
#empty-state { padding: 40px 24px; color: var(--muted); }

/* rendered prose (mirrors viewer.css scale) */
#rendered { padding: 26px clamp(18px, 4vw, 40px) 60px; max-width: 820px; margin: 0 auto; color: var(--body); font-size: 15px; line-height: 1.7; outline: none; }
body.mode-editor #rendered[contenteditable="true"] { background: var(--paper); min-height: 60vh; }
.html-preview-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--strip);
  color: var(--muted);
  font-size: 12px;
}
.html-preview-frame {
  display: block;
  width: 100%;
  min-height: 62vh;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.review-html-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin: 10px 0 24px;
}
.review-html-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.review-html-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-2);
  background: var(--strip);
}
.review-html-card-head strong { color: var(--ink); font-size: 12px; }
.review-html-hash {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-html-card iframe {
  display: block;
  width: 100%;
  min-height: 460px;
  border: 0;
  background: #fff;
}
#rendered h1, #rendered h2, #rendered h3, #rendered h4 { color: var(--ink); font-weight: 700; line-height: 1.28; }
#rendered h1 { font-size: 24px; margin: 0 0 14px; }
#rendered h2 { font-size: 17px; margin: 34px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); }
#rendered h2 + * { margin-top: 12px; }
#rendered h3 { font-size: 14.5px; margin: 22px 0 8px; }
#rendered p { margin: 14px 0; }
#rendered ul, #rendered ol { margin: 14px 0; padding-left: 24px; }
#rendered li { margin: 6px 0; }
#rendered strong { color: var(--ink); }
#rendered hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
#rendered blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--line-strong); color: var(--muted); }
#rendered code { font-family: var(--font-mono); font-size: .85em; background: var(--strip); color: var(--accent-d); padding: .12em .42em; border-radius: var(--r); border: 1px solid var(--line-2); }
#rendered pre { background: var(--ink); color: #e7edf3; border-radius: var(--r-lg); padding: 14px 16px; overflow-x: auto; margin: 16px 0; }
#rendered pre code { background: none; border: 0; color: inherit; padding: 0; }
#rendered table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 16px 0; display: block; overflow-x: auto; }
#rendered th { text-align: left; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#rendered td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
#rendered del { color: var(--muted); }
#rendered img { max-width: 100%; height: auto; border-radius: var(--r); margin: 8px 0; }
#rendered li.task { list-style: none; margin-left: -20px; }
#rendered li.task input[type="checkbox"] { margin-right: 8px; vertical-align: -1px; }

/* ============================ PRODUCT GUIDE ============================ */
/* The Guide uses an editorial field-manual layout: a workflow map for quick
   orientation, a generated chapter rail, then the complete reference. */
#screen-docs {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: #f4f7fb;
}
body[data-screen="docs"] { height: 100vh; overflow: hidden; }
.docs-header {
  flex: 0 0 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 9px clamp(18px, 3vw, 36px); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96); box-shadow: 0 1px 0 rgba(0,15,29,.02);
}
.docs-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.docs-header-title > span:last-child { display: grid; line-height: 1.15; }
.docs-header-title small {
  color: var(--muted); font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.docs-header-title strong { color: var(--ink); font-size: 14px; }
.docs-header-icon {
  display: grid; width: 34px; height: 34px; place-items: center;
  background: var(--accent-soft); color: var(--accent-d); border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.docs-header-icon .ui-icon { width: 17px; height: 17px; }
.docs-exit-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper);
  color: var(--body); font: inherit; font-size: 12px; font-weight: 600;
}
.docs-exit-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-d); }
.docs-exit-btn .ui-icon { width: 15px; height: 15px; }
.docs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.docs-canvas { width: min(1240px, 100%); margin: 0 auto; padding: 34px clamp(18px, 3vw, 38px) 72px; }

/* Signature element: a compact governance route instead of a decorative hero
   illustration. It teaches the core product loop before the long reference. */
.docs-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  min-height: 440px; border: 1px solid #263252; border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 12% 18%, rgba(0,133,255,.17), transparent 27%),
    linear-gradient(120deg, #11182c 0%, #171f39 62%, #141b31 100%);
  box-shadow: 0 18px 46px rgba(16,23,43,.16);
  color: #fff;
}
.docs-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.docs-hero-copy { align-self: center; padding: 54px clamp(34px, 5vw, 66px); }
.docs-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 26px;
  color: #8bc8ff; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.docs-eyebrow .ui-icon { width: 16px; height: 16px; }
.docs-hero h1 {
  max-width: 680px; margin: 0; color: #fff; font-size: clamp(35px, 4.2vw, 54px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
}
.docs-hero h1 span { color: #9daeff; }
.docs-hero-lede {
  max-width: 620px; margin: 24px 0 0; color: #c8d1e3;
  font-size: 15px; line-height: 1.75;
}
.docs-principles { display: flex; flex-wrap: wrap; gap: 11px 24px; margin-top: 30px; }
.docs-principles span {
  display: inline-flex; align-items: center; gap: 8px; color: #e4eafa;
  font-size: 11.5px; font-weight: 600;
}
.docs-principles .ui-icon { width: 15px; height: 15px; color: #69bdff; }
.docs-route {
  align-self: stretch; margin: 22px 22px 22px 0; padding: 25px 28px;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg);
  background: rgba(5,10,27,.48); backdrop-filter: blur(8px);
}
.docs-route-head {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.12); color: #8f9bb5;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.docs-route ol { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.docs-route li {
  position: relative; display: grid; grid-template-columns: 28px 40px minmax(0, 1fr);
  align-items: center; gap: 12px; min-height: 72px; margin: 0;
}
.docs-route li:not(:last-child)::after {
  content: ""; position: absolute; top: 56px; bottom: -16px; left: 47px;
  width: 1px; background: linear-gradient(#52617e, rgba(82,97,126,.18));
}
.docs-route-index { align-self: start; padding-top: 22px; color: #65718a; font-family: var(--font-mono); font-size: 9px; }
.docs-route-icon {
  position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid #4a5876; border-radius: 50%; background: #18233e; color: #86c8ff;
}
.docs-route-icon .ui-icon { width: 17px; height: 17px; }
.docs-route li > span:last-child { display: grid; gap: 3px; min-width: 0; }
.docs-route strong { color: #f7f9fd; font-size: 13px; }
.docs-route small { color: #929eb6; font-size: 11px; line-height: 1.4; }
.docs-route-agent .docs-route-icon { border-color: #8375ed; background: #332a69; color: #c8c1ff; }
.docs-route-agent strong { color: #d8d3ff; }

.docs-layout {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(34px, 5vw, 68px);
  align-items: start; margin-top: 42px;
}
.docs-index { position: sticky; top: 28px; min-width: 0; padding-top: 4px; }
.docs-index-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--muted);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.docs-index-label .ui-icon { width: 14px; height: 14px; }
#docs-toc { display: grid; border-left: 1px solid var(--line); }
#docs-toc button {
  position: relative; width: 100%; margin-left: -1px; padding: 9px 10px 9px 14px;
  border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted);
  text-align: left; font-size: 12px; line-height: 1.35;
}
#docs-toc button:hover { color: var(--ink); background: rgba(255,255,255,.7); }
#docs-toc button.active { border-left-color: var(--accent); color: var(--accent-d); font-weight: 700; }
#docs-toc button span { display: inline-block; width: 24px; color: var(--faint); font-family: var(--font-mono); font-size: 9px; }
.docs-index-note {
  display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--agent-d);
}
.docs-index-note .ui-icon { width: 16px; height: 16px; margin-top: 2px; }
.docs-index-note p { display: grid; gap: 5px; margin: 0; }
.docs-index-note strong { color: var(--ink); font-size: 11.5px; line-height: 1.4; }
.docs-index-note span { color: var(--muted); font-size: 10.5px; line-height: 1.5; }

.docs-article { min-width: 0; max-width: 860px; color: var(--body); font-size: 14px; line-height: 1.75; }
.docs-chapter {
  padding: 2px 0 52px; scroll-margin-top: 24px;
  animation: docs-reveal .32s ease both;
}
.docs-chapter + .docs-chapter { padding-top: 50px; border-top: 1px solid var(--line); }
.docs-chapter:nth-child(2) { animation-delay: .04s; }
.docs-chapter:nth-child(3) { animation-delay: .08s; }
.docs-chapter:nth-child(4) { animation-delay: .12s; }
.docs-chapter-heading {
  display: flex; align-items: center; gap: 13px; margin: 0 0 20px; color: var(--ink);
  font-size: clamp(23px, 2.5vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
}
.docs-heading-icon {
  display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--r-lg);
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-d);
}
.docs-heading-icon .ui-icon { width: 18px; height: 18px; }
.docs-article h3 { margin: 34px 0 10px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.docs-article h4 { margin: 24px 0 8px; color: var(--ink); font-size: 13.5px; }
.docs-article p { margin: 13px 0; }
.docs-article ul, .docs-article ol { margin: 16px 0; padding-left: 24px; }
.docs-article li { margin: 8px 0; padding-left: 3px; }
.docs-article li::marker { color: var(--accent); font-weight: 700; }
.docs-article strong { color: var(--ink); }
.docs-article hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.docs-article blockquote {
  margin: 22px 0; padding: 13px 18px; border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--slate);
}
.docs-article blockquote p { margin: 0; }
.docs-article code {
  padding: .14em .42em; border: 1px solid #dce5f2; border-radius: var(--r);
  background: #f2f6fb; color: #27598c; font-family: var(--font-mono); font-size: .84em;
}
.docs-article table {
  width: 100%; margin: 22px 0; border-collapse: collapse; border-top: 2px solid var(--ink);
  background: var(--paper); font-size: 12.5px;
}
.docs-article th {
  padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted);
  text-align: left; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.docs-article td { padding: 12px; border-bottom: 1px solid var(--line-2); color: var(--body); vertical-align: top; }
.docs-article tbody tr:hover { background: #f8faff; }

/* Tool catalogues read as a reference index; the revision-request handoff is the
   only coloured callout because it represents a distinct private workflow. */
.docs-chapter[data-chapter="the-tools"] > ul { margin: 12px 0 28px; padding: 0; list-style: none; }
.docs-chapter[data-chapter="the-tools"] > ul > li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.docs-chapter[data-chapter="the-tools"] > ul > li > strong:first-child,
.docs-agent-callout > ul > li > strong:first-child { font-family: var(--font-mono); font-size: .92em; }
.docs-agent-callout {
  margin: 36px -20px; padding: 24px 26px 28px; border: 1px solid var(--agent-line);
  border-left: 3px solid var(--agent); border-radius: var(--r-lg);
  background: linear-gradient(135deg, #f7f5ff, var(--agent-soft));
}
.docs-agent-callout h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--agent-d); font-size: 17px; }
.docs-agent-callout h3 .ui-icon { width: 19px; height: 19px; }
.docs-agent-callout > ul { margin: 14px 0 24px; padding: 0; list-style: none; }
.docs-agent-callout > ul > li { margin: 0; padding: 8px 0; border-bottom: 1px solid rgba(102,87,217,.13); }
.docs-agent-callout > ol { counter-reset: guide-step; margin: 22px 0; padding: 0; list-style: none; }
.docs-agent-callout > ol > li {
  position: relative; counter-increment: guide-step; min-height: 42px; margin: 0; padding: 3px 0 16px 42px;
}
.docs-agent-callout > ol > li::before {
  content: counter(guide-step, decimal-leading-zero); position: absolute; top: 0; left: 0;
  display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--agent-line);
  border-radius: 50%; background: var(--paper); color: var(--agent-d); font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
}
.docs-agent-callout > ol > li:not(:last-child)::after {
  content: ""; position: absolute; top: 28px; bottom: 0; left: 14px; width: 1px; background: var(--agent-line);
}
.docs-chapter[data-chapter="a-typical-workflow"] > ol { counter-reset: workflow; margin-top: 22px; padding: 0; list-style: none; }
.docs-chapter[data-chapter="a-typical-workflow"] > ol > li {
  counter-increment: workflow; position: relative; margin: 0; padding: 0 0 18px 48px;
}
.docs-chapter[data-chapter="a-typical-workflow"] > ol > li::before {
  content: counter(workflow, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  color: var(--accent-d); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
}
@keyframes docs-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
mark.comment-hl { background: var(--amber-soft); border-bottom: 2px solid var(--amber); cursor: pointer; border-radius: 2px; }
mark.comment-hl.flash { background: var(--amber); }
mark.agent-hl {
  background: var(--agent-soft); border-bottom: 2px solid var(--agent);
  cursor: pointer; border-radius: 2px;
}
mark.agent-hl.flash { background: var(--agent-line); }

/* Pending (unmerged) additions highlighted in the writer's merged view. */
mark.pending-add { background: var(--green-soft); border-bottom: 2px solid var(--green-line); border-radius: 2px; }

/* The "N pending changes · [Canonical|Pending]" strip above the rendered body.
   Aligned to the same centered reading column as #rendered (max-width 820,
   matching side padding) and kept slim so it reads as a control, not a banner. */
#pending-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 820px; margin: 16px auto 0; padding: 5px clamp(18px, 4vw, 40px); background: var(--accent-soft); border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); font-size: 12px; }
.pending-label { color: var(--slate); }
.pending-conflict-note { color: var(--red); font-weight: 600; }
.pending-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pending-review { border: 0; background: transparent; color: var(--accent-d); font-weight: 600; font-size: 12px; padding: 2px 4px; cursor: pointer; }
.pending-review:hover { text-decoration: underline; }
.pending-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; flex: 0 0 auto; }
.pending-toggle button { background: var(--paper); border: 0; color: var(--body); padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pending-toggle button.active { background: var(--accent); color: #fff; }

/* raw + forms */
#raw { width: 100%; height: 100%; border: 0; padding: 22px clamp(18px,4vw,40px); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--ink); resize: none; background: var(--paper); }
body.mode-viewer #raw { background: var(--strip); }
.panel-intro { max-width: 820px; margin: 16px auto 0; padding: 10px 14px; background: var(--strip); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--muted); font-size: 12.5px; }
.panel-intro summary { cursor: pointer; font-weight: 600; color: var(--body); }
.panel-intro p { margin: 10px 0; }
.signpost-list { margin: 8px 0 0; padding-left: 18px; }
.signpost-list li { margin: 5px 0; }

#frontmatter-form { max-width: 720px; margin: 0 auto; padding: 22px clamp(18px,4vw,40px) 60px; display: flex; flex-direction: column; gap: 16px; }
#frontmatter-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 400; color: var(--faint); text-transform: none; }
#frontmatter-form input, #frontmatter-form select, #new-form input, #new-form select, #new-form textarea,
#propose-form input, #propose-form textarea, #reject-form textarea, .comments-filter select {
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper);
  font-size: 14px; color: var(--ink); font-family: inherit; padding: 8px 10px;
}
#frontmatter-form input:read-only { background: var(--strip); color: var(--muted); }
.field-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.field-hint code { font-family: var(--font-mono); font-size: .9em; background: var(--strip); padding: 0 3px; border-radius: 2px; }
.extras-section { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.extras-header { font-size: 13px; color: var(--ink); margin: 0 0 6px; }
.extras-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.extras-row { display: flex; gap: 8px; align-items: center; }
.extras-key { flex: 0 0 30%; } .extras-value { flex: 1; }
.extras-remove { border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r); width: 30px; }
.extras-add { align-self: flex-start; border: 1px dashed var(--line-strong); background: none; color: var(--accent); border-radius: var(--r); padding: 7px 12px; font-weight: 600; }
.extras-add:hover { background: var(--accent-soft); }

/* diff */
.diff-empty { padding: 30px 24px; color: var(--muted); }
#diff-content, #reviews-detail { max-width: 900px; margin: 0 auto; padding: 22px clamp(18px,4vw,40px) 60px; }
.diff-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 22px 0 8px; }
.diff-body { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.diff-line { display: flex; }
.diff-gutter { flex: 0 0 26px; text-align: center; color: var(--faint); background: var(--strip); user-select: none; }
.diff-text { flex: 1; padding: 1px 8px; white-space: pre-wrap; word-break: break-word; }
.diff-add { background: var(--green-soft); } .diff-add .diff-gutter { color: #0f7048; }
.diff-del { background: var(--red-soft); } .diff-del .diff-gutter { color: #b5343a; }
.fm-diff-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; flex-wrap: wrap; }
.fm-diff-key { font-weight: 600; color: var(--ink); }
.fm-diff-from { color: #b5343a; text-decoration: line-through; }
.fm-diff-arrow { color: var(--faint); }
.fm-diff-to { color: #0f7048; }

/* ============================ ANNOTATION RAILS ============================ */
#comments-sidebar, #agent-sidebar { flex: 0 0 320px; min-width: 0; height: calc(100vh - 48px); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--paper); position: sticky; top: 48px; align-self: flex-start; max-height: calc(100vh - 48px); }
.comments-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.comments-header h2 { margin: 0; font-size: 14px; color: var(--ink); }
.comments-filter { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.comments-hint { font-size: 11.5px; color: var(--muted); }
#comment-composer { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.composer-quote { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 8px; }
#composer-body { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 8px; font-family: inherit; font-size: 13px; }
.composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#comments-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.comments-empty { color: var(--muted); padding: 16px; font-size: 13px; }
.comment-thread { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; background: var(--paper); }
.comment-thread.resolved { opacity: .65; }
.comment-thread.flash { box-shadow: 0 0 0 2px var(--accent); }
.comment-quote { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 7px; }
.comment-quote.clickable { cursor: pointer; }
.comment-quote.clickable:hover { color: var(--accent); }
.comment-body { margin: 6px 0; }
.comment-body.reply { margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.comment-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 11px; color: var(--muted);
}
.author-chip {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
  padding: 2px 6px; border: 1px solid var(--accent-line); border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent-d); font-weight: 700;
}
.author-raw { color: var(--faint); font-family: var(--font-mono); overflow-wrap: anywhere; }
.author-you {
  padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 700;
}
.comment-text { font-size: 13px; color: var(--body); white-space: pre-wrap; }
.comment-actions { margin-top: 8px; }
.comment-actions button { font-size: 12px; padding: 3px 10px; }
.comment-reply { margin-top: 8px; }
.comment-reply input { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 6px 8px; font-size: 12px; }
.flag { font-size: 11px; font-weight: 600; color: var(--muted); }
.flag.outdated { color: #9a5a06; }

/* Private revision requests deliberately use a separate visual language from
   shared comments: violet trace = request flowing toward a proposal. */
.agent-header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 49px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--agent-line);
  background: var(--agent-soft);
}
.agent-header > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent-header h2 { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--ink); }
.agent-header h2 .ui-icon { width: 16px; height: 16px; color: var(--agent-d); }
.private-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border: 1px solid var(--agent-line); border-radius: var(--r-pill);
  color: var(--agent-d); background: var(--paper); font-size: 10.5px; font-weight: 700;
}
.private-chip .ui-icon { width: 10px; height: 10px; stroke-width: 2.1; }
.agent-intro {
  display: grid; gap: 10px; padding: 13px 14px 12px; color: var(--body);
  border-bottom: 1px solid var(--line); background: #fbfaff; font-size: 12px; line-height: 1.4;
}
.agent-intro-title { color: var(--ink); font-size: 12.5px; }
.agent-workflow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.agent-workflow li {
  position: relative; z-index: 0; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.agent-workflow li:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1; top: 11px;
  left: 23px; right: -8px; border-top: 1px solid var(--agent-line);
}
.agent-step-number {
  display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px;
  border: 1px solid var(--agent-line); border-radius: 50%;
  background: var(--paper); color: var(--agent-d); font-size: 10px; font-weight: 800;
}
.agent-workflow li > span:last-child { display: grid; min-width: 0; line-height: 1.15; }
.agent-workflow strong { color: var(--ink); font-size: 10.5px; }
.agent-workflow small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.agent-privacy-note {
  display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 10px;
}
.agent-privacy-note .ui-icon { width: 12px; height: 12px; margin-top: 1px; color: var(--agent-d); }
#agent-composer {
  padding: 12px 14px; border-bottom: 1px solid var(--agent-line);
  background: var(--agent-soft);
}
#agent-composer label {
  display: block; margin: 8px 0 4px; color: var(--muted); font-size: 11px;
}
#agent-composer select, #agent-composer-instruction {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; padding: 7px 8px;
}
#agent-composer-instruction { margin-top: 8px; resize: vertical; line-height: 1.45; }
#agent-composer:not([hidden]) + #agent-annotations-list .agent-empty { display: none; }
#agent-annotations-list {
  list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.agent-empty {
  display: flex; flex-direction: column; align-items: center; margin: auto 0;
  padding: 24px 14px 30px; color: var(--muted); text-align: center; line-height: 1.45;
}
.agent-empty-preview {
  position: relative; width: min(188px, 82%); padding: 15px 14px 18px; margin: 0 0 24px;
  border: 1px solid var(--agent-line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 5px 5px 0 var(--agent-soft);
}
.agent-preview-line { display: block; height: 6px; margin-top: 7px; background: var(--line-2); }
.agent-preview-line:first-child { margin-top: 0; }
.agent-preview-line.long { width: 88%; }
.agent-preview-line.selected {
  width: 72%; background: var(--agent-line); box-shadow: inset 0 -2px 0 rgba(102,87,217,.22);
}
.agent-preview-line.short { width: 54%; }
.agent-preview-action {
  position: absolute; right: -8px; bottom: -12px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px; border: 1px solid var(--agent-d); border-radius: var(--r);
  background: var(--agent); color: #fff; box-shadow: var(--shadow); font-size: 9px; font-weight: 700;
}
.agent-preview-action .ui-icon { width: 11px; height: 11px; }
.agent-empty-title { color: var(--ink); font-size: 14px; }
.agent-empty-copy { max-width: 230px; margin-top: 4px; font-size: 12px; }
.agent-empty-start {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 11px;
  border: 1px solid var(--agent); border-radius: var(--r); background: var(--agent);
  color: #fff; font: inherit; font-size: 11.5px; font-weight: 700;
}
.agent-empty-start:hover { border-color: var(--agent-d); background: var(--agent-d); }
.agent-empty-start .ui-icon { width: 14px; height: 14px; }
.agent-empty-hint { max-width: 220px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.agent-note {
  position: relative; border: 1px solid var(--line); border-left: 3px solid var(--agent);
  border-radius: var(--r-lg); padding: 10px 10px 10px 12px; background: var(--paper);
}
.agent-note::before {
  content: ""; position: absolute; left: -3px; top: 14px; width: 3px; height: 14px;
  background: var(--agent); box-shadow: 0 17px 0 var(--agent-line);
}
.agent-note.flash { box-shadow: 0 0 0 2px var(--agent-line); }
.agent-note.proposed { border-left-color: var(--green); }
.agent-note.blocked { border-left-color: var(--red); }
.agent-note-quote {
  color: var(--muted); font-size: 11.5px; font-style: italic;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.agent-note-quote.clickable { cursor: pointer; }
.agent-note-quote.clickable:hover { color: var(--agent-d); }
.agent-note-instruction { margin: 7px 0; color: var(--body); white-space: pre-wrap; line-height: 1.45; }
.agent-note-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 10.5px; }
.agent-status {
  padding: 2px 6px; border-radius: var(--r-sm); background: var(--agent-soft);
  color: var(--agent-d); font-weight: 700; text-transform: capitalize;
}
.agent-status.proposed { color: #0f7048; background: var(--green-soft); }
.agent-status.blocked { color: #b5343a; background: var(--red-soft); }
.agent-note-actions { display: flex; gap: 6px; margin-top: 8px; }
.agent-note-actions button {
  border: 0; background: transparent; color: var(--agent-d); padding: 2px 0;
  font: inherit; font-size: 11.5px; font-weight: 600;
}
.agent-note-actions button + button { margin-left: 8px; color: var(--muted); }
.agent-blocked-reason { margin-top: 7px; padding: 6px 8px; background: var(--red-soft); color: #b5343a; font-size: 11.5px; }
#agent-ready-card {
  padding: 11px 14px; border-top: 1px solid var(--agent-line);
  background: var(--agent-soft);
}
.agent-ready-title { color: var(--agent-d); font-weight: 700; }
#agent-ready-summary { margin: 4px 0 9px; color: var(--muted); font-size: 11.5px; }
.agent-handoff-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.agent-handoff-actions button { font-size: 11.5px; padding: 5px 9px; }
#agent-annotations-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper);
}
#agent-draft-summary { color: var(--muted); font-size: 11.5px; }

#selection-actions {
  position: fixed; z-index: 70; display: flex; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-md);
}
#selection-actions button {
  border: 0; background: var(--paper); color: var(--body); padding: 7px 11px;
  font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
#selection-actions button:hover { background: var(--accent-soft); color: var(--accent-d); }
#selection-agent { color: var(--agent-d); }
#selection-agent:hover { background: var(--agent-soft); color: var(--agent-d); }

/* ============================ REVIEWS ============================ */
#reviews-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }
#reviews-list-pane { flex: 0 0 320px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper); }
.reviews-header { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); }
.reviews-header h2 { margin: 0; font-size: 16px; color: var(--ink); }
.reviews-filter { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
#reviews-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
#reviews-list li { margin: 0; }
.review-item {
  width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r-lg); padding: 10px 12px; background: var(--paper);
}
.review-item:hover, .review-item:focus-visible { border-left-color: var(--accent); background: var(--accent-soft); }
.review-item.active { border-left-color: var(--accent); background: var(--accent-soft); }
#reviews-list li.reviews-empty { color: var(--muted); padding: 10px 12px; }
.review-doc { font-weight: 700; color: var(--ink); font-size: 13px; }
.review-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.review-flags { margin-top: 6px; }
.status-open { color: var(--accent-d); } .status-approved { color: #0f7048; } .status-rejected { color: #b5343a; }
.review-type-create { color: #0f7048; background: var(--green-soft); border: 1px solid var(--green-line); padding: 2px 6px; border-radius: var(--r-sm); }
#reviews-detail-pane { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.reviews-detail-empty { padding: 40px 24px; color: var(--muted); }
#reviews-detail-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 14px 0; }
#creation-frontmatter-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 14px; margin: 14px 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--strip);
}
#creation-frontmatter-form[hidden] { display: none; }
#creation-frontmatter-form h3, #creation-frontmatter-form p { grid-column: 1 / -1; margin: 0; }
#creation-frontmatter-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; color: var(--faint); }
#creation-frontmatter-form input, #creation-frontmatter-form select, #creation-frontmatter-form textarea {
  width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font: inherit; padding: 8px 10px;
}
#creation-frontmatter-form textarea { resize: vertical; }
.review-detail-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.review-detail-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.review-detail-desc { font-size: 13px; color: var(--body); margin-top: 8px; }
.review-conflict { margin-top: 10px; padding: 8px 12px; background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--r); color: #9a5a06; font-size: 12.5px; }
.review-mergeable { margin-top: 10px; padding: 8px 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); color: var(--accent-d); font-size: 12.5px; }

/* ============================ DIALOGS + TOAST ============================ */
dialog { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--body); padding: 0; max-width: 460px; width: calc(100vw - 32px); box-shadow: var(--shadow-md); }
dialog::backdrop { background: rgba(0,15,29,.32); }
dialog form { padding: 20px 22px; }
dialog h2 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.dialog-intro { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }
dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 400; color: var(--faint); margin-bottom: 14px; }
dialog menu { display: flex; justify-content: flex-end; gap: 10px; margin: 6px 0 0; padding: 0; }
.new-source-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 14px; padding: 0; border: 0;
}
.new-source-options legend {
  margin-bottom: 5px; color: var(--faint); font-size: 12px; font-weight: 400;
}
dialog .new-source-option {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px;
  min-width: 0; margin: 0; padding: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--paper); color: var(--body); cursor: pointer;
}
dialog .new-source-option:has(input:checked) {
  border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-soft);
}
.new-source-option input { margin: 2px 0 0; }
.new-source-option span { display: grid; gap: 2px; min-width: 0; }
.new-source-option strong { color: var(--ink); font-size: 12.5px; }
.new-source-option small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.new-source-option code { font-family: var(--font-mono); }
#new-upload-fields {
  margin: 0 0 14px; padding: 12px;
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  background: var(--strip);
}
dialog .html-upload-field { margin-bottom: 7px; }
.html-upload-field input[type="file"] {
  width: 100%; padding: 7px; border: 1px dashed var(--line-strong);
  border-radius: var(--r); background: var(--paper); color: var(--body);
}
.upload-status {
  display: block; min-height: 18px; color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px; overflow-wrap: anywhere;
}
.upload-status.ready { color: #0f7048; }
.upload-status.error { color: var(--red); }
@media (max-width: 520px) {
  .new-source-options { grid-template-columns: 1fr; }
}
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--r); font-size: 13px; box-shadow: var(--shadow-md); z-index: 100; }
#toast.error { background: var(--red); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1040px) {
  .docs-hero { grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr); }
  .docs-hero-copy { padding-inline: 38px; }
  .docs-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 820px) {
  .docs-canvas { padding-top: 20px; }
  .docs-hero { grid-template-columns: minmax(0, 1fr); }
  .docs-hero-copy { padding: 42px 36px 34px; }
  .docs-route { margin: 0 24px 24px; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 30px; }
  .docs-index {
    position: sticky; z-index: 5; top: 0; margin-inline: -18px; padding: 10px 18px 12px;
    border-bottom: 1px solid var(--line); background: rgba(244,247,251,.97);
    box-shadow: 0 5px 12px rgba(16,23,43,.035); overflow: hidden;
  }
  .docs-index-label { margin-bottom: 8px; }
  #docs-toc { display: flex; gap: 4px; overflow-x: auto; border: 0; scrollbar-width: none; }
  #docs-toc::-webkit-scrollbar { display: none; }
  #docs-toc button {
    width: auto; flex: 0 0 auto; margin: 0; padding: 7px 10px; border: 1px solid var(--line);
    white-space: nowrap; background: rgba(255,255,255,.7);
  }
  #docs-toc button.active { border-color: var(--accent-line); background: var(--accent-soft); }
  #docs-toc button span { width: 20px; }
  .docs-index-note { display: none; }
  .docs-article { max-width: none; }
  .docs-chapter { scroll-margin-top: 82px; }
}
@media (max-width: 520px) {
  .docs-header { flex-basis: 54px; padding-inline: 13px; }
  .docs-header-icon { width: 30px; height: 30px; }
  .docs-exit-btn { padding-inline: 9px; }
  .docs-canvas { padding: 12px 12px 52px; }
  .docs-hero-copy { padding: 31px 23px 27px; }
  .docs-eyebrow { align-items: flex-start; margin-bottom: 20px; line-height: 1.45; }
  .docs-hero h1 { font-size: 33px; }
  .docs-hero-lede { margin-top: 18px; font-size: 14px; }
  .docs-principles { display: grid; gap: 9px; margin-top: 23px; }
  .docs-route { margin: 0 12px 12px; padding: 20px 18px; }
  .docs-route ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px; }
  .docs-route li {
    grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: start; align-items: center; gap: 8px; min-height: 98px;
  }
  .docs-route li:not(:last-child)::after { display: none; }
  .docs-route-index { grid-column: 1 / -1; padding: 0; }
  .docs-route-icon { width: 34px; height: 34px; }
  .docs-route small { font-size: 10px; }
  .docs-layout { gap: 22px; }
  .docs-index { margin-inline: -12px; padding-inline: 12px; }
  .docs-chapter { padding-bottom: 40px; }
  .docs-chapter + .docs-chapter { padding-top: 39px; }
  .docs-chapter-heading { align-items: flex-start; font-size: 24px; }
  .docs-heading-icon { width: 34px; height: 34px; }
  .docs-agent-callout { margin-inline: 0; padding: 21px 18px 24px; }
  .docs-article table { display: block; overflow-x: auto; }
}
/* The full document title and status are repeated in the document header.
   Yield that duplicate topbar copy before any controls become compressed. */
@media (max-width: 1100px) {
  body[data-screen="document"] #topbar-title,
  body[data-screen="document"] #topbar-status { display: none !important; }
}
@media (max-width: 900px) {
  body[data-screen="document"] .brand { display: none; }
}
/* Narrow (mobile + inline iframe): annotation rails become overlays. */
@media (max-width: 760px) {
  #topbar { gap: 8px; padding: 0 12px; }
  .brand .sub, .brand .app-version { display: none; }
  #topbar-title { max-width: 30vw; }
  /* Compact all contextual actions into one menu at the same breakpoint where
     the document tree becomes a drawer. This gives each topbar item a stable
     width instead of letting flex-shrink collapse one control underneath the
     next. */
  #mobile-actions { display: block; flex: 0 0 auto; }
  #library-actions, #doc-actions { display: none !important; }
  /* Narrow widths (phones AND the inline MCP-App iframe): the persistent
     sidebar would crowd out the content, so it becomes a slide-in drawer
     reachable via the topbar hamburger. The filter box rides inside the drawer
     with the document list. */
  #sidebar-toggle { display: inline-flex; }
  body[data-screen="reviews"] #sidebar-toggle,
  body[data-screen="docs"] #sidebar-toggle { display: none; }
  #sidebar-close { display: inline-flex; }
  .sidebar-header { display: flex; align-items: center; justify-content: space-between; }
  /* Above the sticky topbar (z 40) so the drawer covers it; its own close
     button + the overlay dismiss it. Anchored to top:0 so it is independent of
     the MCP diagnostic strip's height. */
  #portal-sidebar {
    position: fixed; z-index: 60; inset: 0 auto 0 0;
    width: min(82vw, 300px); flex-basis: auto;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--shadow-md);
  }
  body.sidebar-drawer-open #portal-sidebar { transform: translateX(0); }
  #sidebar-overlay {
    display: block; position: fixed; z-index: 55; inset: 0;
    background: rgba(0,15,29,.42); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
  }
  body.sidebar-drawer-open #sidebar-overlay { opacity: 1; visibility: visible; }
  body.sidebar-drawer-open { overflow: hidden; }
  /* Notes are viewport overlays here. Pin both the rail and its close-bearing
     top bar while the document remains at the selected passage underneath. */
  #comments-sidebar, #agent-sidebar {
    position: fixed; inset: 48px 0 auto; height: calc(100dvh - 48px); min-height: 0;
    flex-basis: auto; max-height: none; overflow: hidden; z-index: 45; border-left: 0;
  }
  body.comments-open #topbar,
  body.agent-annotations-open #topbar {
    position: fixed; inset: 0 0 auto; width: 100%; height: 48px;
  }
  .external-change-banner { align-items: flex-start; flex-direction: column; }
  #reviews-screen { flex-direction: column; }
  #reviews-list-pane { flex: 0 0 auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); }
  #creation-frontmatter-form { grid-template-columns: minmax(0, 1fr); }
  #creation-frontmatter-form h3, #creation-frontmatter-form p { grid-column: 1; }
}
@media (max-width: 560px) {
  #topbar { padding: 0 8px; gap: 6px; }
  #panel-tabs { flex-wrap: wrap; gap: 0; padding: 0 10px; }
  #panel-tabs > button[data-panel] { flex: 1 1 0; padding-inline: 8px; }
  #doc-view-toggle {
    flex: 1 0 100%; width: 100%; margin: 0 0 8px;
  }
  #doc-view-toggle button { flex: 1 1 0; }
  #reviews-detail-actions { flex-wrap: wrap; }
  #reviews-detail-actions button { min-width: 0; white-space: normal; }
}
/* Short MCP-App frames need the action in the first viewport. Keep the
   passage-selection signature, but compress explanatory spacing and let the
   three-step rail carry the secondary hint. */
@media (max-height: 560px) {
  .agent-intro { gap: 7px; padding: 9px 14px 8px; }
  .agent-intro-title { display: none; }
  .agent-privacy-note { font-size: 9.5px; line-height: 1.3; }
  .agent-empty { padding: 12px 12px 16px; }
  .agent-empty-preview {
    width: min(156px, 76%); padding: 10px 11px 13px; margin-bottom: 17px;
    box-shadow: 4px 4px 0 var(--agent-soft);
  }
  .agent-preview-line { height: 5px; margin-top: 5px; }
  .agent-preview-action { right: -6px; bottom: -9px; padding: 3px 6px; font-size: 8.5px; }
  .agent-empty-title { font-size: 13px; }
  .agent-empty-copy { margin-top: 2px; font-size: 11.5px; }
  .agent-empty-start { margin-top: 10px; padding: 7px 10px; }
  .agent-empty-hint { display: none; }
}
/* Wide browser: roomier annotation rails aligned to the text column. */
@media (min-width: 1100px) {
  #comments-sidebar, #agent-sidebar { flex-basis: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}