/* Margin — warm, papery, quiet. */
:root {
  --paper: #faf9f7;
  --surface: #ffffff;
  --ink: #1c1b1a;
  --ink-soft: #6f6a64;
  --ink-faint: #a8a29b;
  --line: #e8e4de;
  --line-strong: #d9d3cb;
  --accent: #c2410c;
  --accent-soft: #fff1e8;
  --green: #2b8a3e;
  --green-soft: #e6f4ea;
  --red: #c92a2a;
  --red-soft: #fdecec;
  --yellow-soft: #fef3c0;
  --yellow: #f5c518;
  --wash: #f1ede8;        /* hover wash on quiet controls */
  --wash-2: #efebe5;      /* segmented-control grooves */
  --code-bg: #f4f1ec;
  --btn-hover: #f5f2ee;
  --card: var(--surface);
  --card-hi: #fffdf9;
  --surface-2: #efece7;
  --baseline: #ccc;
  --ink-2: #888;
  --ink-3: #999;
  --blue: #1971c2;
  --purple: #5f3dc4;
  --radius: 10px;
  color-scheme: light dark;
  --shadow: 0 1px 2px rgba(28, 27, 26, .05), 0 4px 16px rgba(28, 27, 26, .06);
  --shadow-lg: 0 4px 12px rgba(28, 27, 26, .08), 0 16px 48px rgba(28, 27, 26, .14);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* Dark app shell — the same palette the landing's dark theme uses, applied to
   every app surface (topbar, editor, panels, dialogs, banners) via the shared
   tokens above. Component CSS reads the same variables, so fences follow. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161512;
    --surface: #201e1b;
    --ink: #ece8e2;
    --ink-soft: #a49d94;
    --ink-faint: #6e6961;
    --line: #33302b;
    --line-strong: #45413a;
    --accent: #e8590c;
    --accent-soft: #3a2417;
    --green: #4cb765;
    --green-soft: #1c3524;
    --red: #ff8787;
    --red-soft: #3d1f1f;
    --yellow-soft: #3d3416;
    --yellow: #d4a915;
    --wash: #2a2723;
    --wash-2: #262420;
    --code-bg: #262420;
    --btn-hover: #2a2723;
    --card-hi: #262320;
    --surface-2: #2b2823;
    --baseline: #45413a;
    --ink-2: #a49d94;
    --ink-3: #8a847b;
    --blue: #5c9fe0;
    --purple: #a58fe0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 650; letter-spacing: -.015em; }

/* ---------- shared controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
@media (prefers-color-scheme: dark) { .btn-primary:hover { background: #fff; } }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; padding: 10px; }
.icon-btn {
  padding: 3px 6px; border-radius: 6px; color: var(--ink-faint);
  font-size: 13px; line-height: 1;
}
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-danger:hover { color: var(--red); background: var(--red-soft); }
.text-input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); outline: none;
}
.text-input:focus { border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgba(28,27,26,.06); }
kbd {
  font-family: var(--sans); font-size: 11px; padding: 2px 5px;
  background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; margin: 0 1px;
}

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--ink); color: var(--paper); font-size: 13.5px; padding: 9px 16px;
  border-radius: 99px; box-shadow: var(--shadow-lg);
  animation: toast-in .18s ease-out;
}
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast-undo {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--paper);
  background: none; border: none; cursor: pointer;
  margin-left: 10px; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.toast-undo:hover { opacity: .8; }
.toast-warn { background: #7c4a02; }
.toast-warn .toast-undo { color: #ffe9c7; }

.overlay {
  position: fixed; inset: 0; background: rgba(28, 27, 26, .35);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: fade-in .12s ease-out; backdrop-filter: blur(2px);
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  width: min(520px, calc(100vw - 32px)); max-height: 85vh; overflow: auto;
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 24px;
}
.modal-sm { width: min(380px, calc(100vw - 32px)); }
.modal h2 { font-size: 19px; }
.modal h3 { font-size: 14px; margin: 18px 0 4px; }
.modal-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 18px; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%; display: inline-block;
  border: 2.5px solid var(--line); border-top-color: var(--ink-soft);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; justify-content: center; padding: 80px 0; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  flex: none;
}
.card-spacer { flex: 1; }

/* ---------- doc page layout ---------- */
.page-doc #app { display: flex; flex-direction: column; height: 100dvh; }
#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); z-index: 10; flex: none;
}
.logo { display: flex; align-items: center; color: var(--ink); padding: 4px; border-radius: 8px; }
.logo:hover { background: var(--wash); }
.logo-mark { display: inline-flex; align-items: center; }
.doc-title {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  border: 1px solid transparent; background: none; border-radius: 8px;
  padding: 6px 10px; width: min(34vw, 360px); outline: none;
  /* a title too long for the field ends with an ellipsis, not a hard clip */
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.doc-title:hover:not(:disabled) { border-color: var(--line); }
.doc-title:focus { border-color: var(--ink-soft); background: var(--surface); text-overflow: clip; }
.doc-title:disabled { color: var(--ink); }
.conn { font-size: 12px; color: var(--ink-faint); }
.conn-off { color: var(--accent); }
.presence { display: flex; align-items: center; margin-right: 4px; }
.avatar-presence { width: 26px; height: 26px; font-size: 11px; border: 2px solid var(--paper); margin-left: -6px; }
.presence-more { font-size: 12px; color: var(--ink-soft); margin-left: 4px; }

.mode-group {
  display: flex; background: var(--wash-2); border-radius: 9px; padding: 3px; gap: 2px;
}
.mode-btn {
  padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,27,26,.12); }
body[data-mode="suggest"] .mode-btn.active { color: var(--green); }

/* Doc / Markdown — compact surface toggle beside the mode pills (⌘E).
   Flips only prose PAINT (see body.docmode-md rules): metrics never change,
   so component widgets cannot move or resize across the toggle. */
.seg-mini { display: flex; background: var(--wash-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-mini button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); transition: color .12s, background .12s;
}
.seg-mini button:hover { color: var(--ink); }
.seg-mini button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,27,26,.12); }

.tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
}
.tool-btn:hover { background: var(--wash); color: var(--ink); }
.tool-btn.active { background: var(--wash-2); color: var(--ink); }
/* the Chief entry: quiet until you have one, then a name with a heartbeat */
a.chief-nav { text-decoration: none; font-weight: 600; }
a.chief-nav:hover { text-decoration: none; }
.chief-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.chief-dot.live { animation: chiefpulse 2.8s ease-out infinite; }
.chief-dot.idle { background: var(--ink-faint); animation: none; }
.chief-dot.stale { background: var(--line-strong); animation: none; }
@keyframes chiefpulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 38%, transparent); }
  60%, 100% { box-shadow: 0 0 0 5px transparent; }
}
/* pre-appointment: a banner above the doc list + a one-time popup — the old
   footer line was invisible to new signups */
.chief-cta {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--accent-soft); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.chief-cta-mark {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 18px; font-weight: 750;
}
.chief-cta-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chief-cta-text b { font-size: 14.5px; }
.chief-cta-text span { font-size: 13px; color: var(--ink-soft); }
.chief-cta-btn { flex: none; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) {
  .chief-cta { flex-wrap: wrap; }
  .chief-cta-btn { flex: 1 1 100%; justify-content: center; }
}
.chief-popup { position: relative; text-align: center; }
.chief-popup-mark { width: 46px; height: 46px; font-size: 22px; margin: 4px auto 12px; }
.chief-popup h2 { margin-bottom: 8px; }
.chief-popup .modal-sub { margin-bottom: 0; }
.chief-popup-foot { justify-content: center; gap: 10px; }
.chief-popup-foot .btn { text-decoration: none; }
.btn-share { background: var(--ink); color: var(--paper); }
.btn-share:hover { background: #000; color: var(--paper); }
@media (prefers-color-scheme: dark) { .btn-share:hover { background: #fff; } }
.count-badge { font-size: 11px; font-weight: 700; color: var(--accent); }
.claim-chip {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
.claim-chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--paper)); }
.claim-chip:disabled { opacity: .6; }

/* Claim nudge: quiet dismissible strip under the topbar for valuable
   anonymous docs; the awaiting-human flavor borrows the needs-you accent. */
.claim-banner {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 8px 16px; font-size: 13px; color: var(--ink-soft);
  background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}
.claim-banner-urgent { background: color-mix(in srgb, #e8590c 9%, var(--surface)); }
.claim-banner-urgent .claim-banner-msg { color: var(--ink); font-weight: 550; }
.claim-banner-msg { flex: 1; min-width: 0; }
.claim-banner-btn { white-space: nowrap; text-decoration: none; }
.claim-banner-dismiss { color: var(--ink-faint); flex: none; }

#main { display: flex; flex: 1; min-height: 0; }
#editor-wrap { flex: 1; min-width: 0; overflow-y: auto; position: relative; container-type: inline-size; }
/* Wide-fence breakout budget: on ≥1080px viewports the editor column grows by
   up to 104px per side — sized off the PANE (container units), so an open side
   panel shrinks the budget instead of overflowing. The extra width is given
   back as .cm-content side padding, so prose keeps the 664px measure and wide
   fences (boards) expand into the padding with negative margins. Everything
   stays inside the scroller's content box — no horizontal scrolling possible. */
#editor { --wide-b: 0px; max-width: calc(760px + 2 * var(--wide-b)); margin: 0 auto; padding: 36px 48px 50vh; }
@media (min-width: 1080px) {
  #editor { --wide-b: clamp(0px, (100cqw - 760px) / 2, 104px); }
}
.cm-editor .cm-content { padding-left: var(--wide-b, 0px); padding-right: var(--wide-b, 0px); }

#panel {
  width: 0; flex: none; border-left: 1px solid transparent; overflow: hidden;
  display: flex; flex-direction: column;
  transition: width .18s ease;
}
body.panel-open #panel { width: 340px; border-left-color: var(--line); }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px; flex: none; min-width: 300px;
}
.panel-title { font-weight: 650; font-size: 14px; }
.panel-counts { font-size: 12px; color: var(--ink-faint); flex: 1; }
.panel-body { overflow-y: auto; padding: 4px 14px 40px; flex: 1; min-width: 300px; }
.panel-empty { text-align: center; color: var(--ink-faint); font-size: 13.5px; padding: 36px 16px; }
.panel-empty-art { font-size: 30px; margin-bottom: 8px; color: var(--ink-faint); }
.kbd-hint { margin-top: 6px; }
/* the ⌘⌥M chord is meaningless without a keyboard — hide it on touch */
@media (pointer: coarse) { .kbd-hint { display: none; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(28,27,26,.04);
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--line-strong); }
.card.active { border-color: var(--ink-soft); box-shadow: var(--shadow); }
.card.resolved { opacity: .7; cursor: default; }
.card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.card-author { font-size: 13px; font-weight: 600; }
.card-time { font-size: 11.5px; color: var(--ink-faint); }
.guest-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 99px;
  color: var(--ink-faint); border: 1px solid var(--line); background: var(--paper);
}
.card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.quote {
  font-size: 12px; color: var(--ink-soft);
  border-left: 3px solid var(--yellow); padding: 2px 8px; margin-bottom: 7px;
  background: color-mix(in srgb, var(--yellow) 9%, var(--paper)); border-radius: 0 6px 6px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-body { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.reply { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.reply-btn { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; padding: 0; }
.reply-btn:hover { color: var(--accent); }
.resolved-toggle { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0; display: block; }
.resolved-toggle:hover { color: var(--ink); }
.composer-input {
  width: 100%; font: inherit; font-size: 13.5px; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  outline: none; background: var(--paper); margin-top: 2px;
}
.composer-input:focus { border-color: var(--ink-soft); background: var(--surface); }
.composer { cursor: default; border-color: var(--ink-soft); box-shadow: var(--shadow); }

.sg-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 99px;
}
.sg-badge-insert { background: var(--green-soft); color: var(--green); }
.sg-badge-delete { background: var(--red-soft); color: var(--red); }
.sg-text { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; overflow-wrap: break-word; }
.sg-text-ins { color: var(--green); }
.sg-text-del { color: var(--red); text-decoration: line-through; }

.comment-bubble {
  position: fixed; z-index: 30;
  width: 34px; height: 34px; border-radius: 50% 50% 50% 6px;
  background: var(--ink); color: var(--paper); font-size: 15px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  animation: toast-in .15s ease-out;
}
.comment-bubble:hover { transform: scale(1.08); }
/* a 34px float is under the 44px touch-target minimum — enlarge on touch, and
   back it with a transparent ≥44px hit-area (::after) so the tappable target is
   a solid 48px even during the toast-in scale animation (measuring the visual
   box mid-animation read ~39×34; the hit-area doesn't animate). */
@media (pointer: coarse) {
  .comment-bubble { width: 44px; height: 44px; font-size: 19px; }
  .comment-bubble::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 48px; height: 48px; transform: translate(-50%, -50%);
  }
}

/* ---------- editor content ---------- */
.cm-editor { outline: none !important; }
.cm-editor .cm-scroller {
  font-family: var(--mono); font-size: 15px; line-height: 1.75;
}
.cm-editor .cm-content { caret-color: var(--ink); }
.cm-editor .cm-line { padding: 0; }
.cm-editor .cm-activeLine { background: color-mix(in srgb, var(--ink) 2.5%, transparent); border-radius: 4px; }
/* At rest (editor unfocused) the boot selection sits on line 1 — without this
   the doc's H1 wore a grey band before anyone clicked (audit #2). */
.cm-editor:not(.cm-focused) .cm-activeLine { background: transparent; }
/* Selection must survive block-band backgrounds: the drawSelection layer paints
   BEHIND the content, so any opaque .cm-line background hides it — block bands
   below are translucent on purpose, and the selection color is strong. */
.cm-editor .cm-selectionBackground { background: #b9d2f3 !important; }
.cm-editor.cm-focused .cm-selectionBackground { background: #a5c6f0 !important; }
@media (prefers-color-scheme: dark) {
  .cm-editor .cm-selectionBackground { background: #2c4667 !important; }
  .cm-editor.cm-focused .cm-selectionBackground { background: #35547c !important; }
}
.cm-editor .cm-cursor { border-left-width: 2px; border-left-color: var(--ink); }
.cm-editor .cm-placeholder { color: var(--ink-faint); font-style: italic; }
.cm-editor .md-codeblock { background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13.5px; }
.cm-editor .md-blockquote { border-left: 3px solid var(--line-strong); background: color-mix(in srgb, var(--line) 25%, transparent); }
.cm-editor .md-codeblock.cm-activeLine, .cm-editor .md-blockquote.cm-activeLine { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* doc ⋯ menu */
.doc-menu {
  position: fixed; z-index: 300; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column;
}
.doc-menu-item {
  appearance: none; background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 8px 10px; border-radius: 7px;
}
.doc-menu-item:hover { background: rgba(28,27,26,.05); }

/* Inline components in edit mode: the rendered component sits in the editor
   flow; its markdown chip appears on hover (always for touch via media query) */
.cmp-edit-wrap { position: relative; margin: 10px 0 14px; }
/* Caption row — the instrument-panel chrome above every component: glyph tile,
   small-caps kind, mono #id, right-aligned tabular meta, hover tools. */
.cmp-cap {
  display: flex; align-items: center; gap: 7px;
  min-height: 24px; margin: 0 0 8px;
  font-family: var(--sans);
}
.cmp-cap-glyph {
  width: 19px; height: 19px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(28,27,26,.05);
}
.cmp-cap-glyph svg { display: block; }
.cmp-cap-kind {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cmp-cap-id { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.cmp-cap-meta {
  font-size: 11.5px; color: var(--ink-faint); margin-left: auto;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-cap-meta:empty { display: none; }
.cmp-cap-new { color: var(--accent); font-weight: 650; }
.cmp-cap-tools { display: flex; align-items: center; margin-left: 8px; }
.cmp-cap-meta:empty + .cmp-cap-tools { margin-left: auto; }
/* the shared toolbar relocates from the panel corner into the caption row —
   switch it from absolute overlay to inline flex there */
.cmp-cap-tools .cmp-toolbar { position: static; display: flex; flex-direction: row-reverse; gap: 4px; }
.cmp-edit-wrap:hover .cmp-cap-tools .cmp-focus-btn,
.cmp-edit-wrap:hover .cmp-cap-tools .cmp-tool-btn,
.cmp-edit-wrap:hover .cmp-cap-tools .cmp-edit-src { opacity: 1; }
/* touch: no hover — caption tools stay visible (mirrors the in-panel rule) */
@media (hover: none) {
  .cmp-cap-tools .cmp-focus-btn, .cmp-cap-tools .cmp-tool-btn, .cmp-cap-tools .cmp-edit-src { opacity: 1; }
}
/* Wide-board breakout (≥1080px): the board escapes the text column
   symmetrically (the mockup's full-bleed figure) while its caption keeps the
   prose alignment (caption padding == breakout). The budget (--wide-b) is
   granted as .cm-content side padding by the #editor rules below — the wide
   fence expands into that padding with negative margins, so nothing ever
   leaves the scroller's content box (no horizontal scrollbars, and CM's
   cursor/selection geometry just sees a wider content box). */
.cm-editor .cmp-edit-wrap.cmp-wide {
  margin-left: calc(-1 * var(--wide-b, 0px));
  margin-right: calc(-1 * var(--wide-b, 0px));
}
.cmp-edit-wrap.cmp-wide > .cmp-cap { padding: 0 var(--wide-b, 0px); }
/* Widgets live inside CodeMirror's content, which sets pre-wrap + mono for
   markdown source — reset to document defaults or the component templates'
   literal newlines render as giant blank gaps (Matt's screenshot). */
.cm-editor .cmp-edit-wrap {
  white-space: normal;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: auto; /* wide component scrolls inside the (width-capped) wrap, not the editor */
}
/* If a component fence fails to render (e.g. a malformed widget body falls
   through to a <pre><code> block), wrap it instead of clipping off the right
   edge — an unreadable single clipped line was the symptom. */
.cm-editor .cmp-edit-wrap pre,
.cm-editor .cmp-edit-wrap code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* the rendered component fills the capped wrap so its own overflow-x handles
   width — the board's .cmp-board-cols / a wide sheet scroll internally */
.cm-editor .cmp-edit-wrap > div, .cm-editor .cmp-edit-wrap .cmp { max-width: 100%; }
/* the wrap owns vertical rhythm in the editor (caption + panel as one figure);
   the shared .cmp margins are for pub/preview where there's no wrap */
.cm-editor .cmp-edit-wrap .cmp { margin: 0; }
/* The ‹/› source chip normally lives in the component's shared .cmp-toolbar
   (next to ⛶), styled by that toolbar. Only a media line with no .cmp-live
   (class cmp-edit-nobar) keeps it pinned on the wrap. */
.cmp-edit-wrap.cmp-edit-nobar > .cmp-edit-src {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  font: 600 10.5px/1 var(--mono); color: var(--ink-faint);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 7px; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.cmp-edit-wrap.cmp-edit-nobar:hover > .cmp-edit-src { opacity: 1; }
/* In the toolbar the chip matches the ⛶ button size/shape (~26px). */
.cmp-toolbar > .cmp-edit-src {
  width: 26px; height: 26px; display: grid; place-items: center;
  font: 600 11px/1 var(--mono); color: var(--ink-soft, #666);
  background: var(--surface, #fff); border: 1px solid var(--line, #e5e5e5);
  border-radius: 7px; cursor: pointer; opacity: .45; transition: opacity .12s;
}
.cmp-live:hover .cmp-toolbar > .cmp-edit-src, .cmp-toolbar > .cmp-edit-src:hover { opacity: 1; }
.cmp-edit-src:hover { color: var(--ink); border-color: var(--ink-faint); }
/* A sheet has its OWN top-right controls (add/del column, z:7). Shift the
   shared toolbar left of that column so the toolbar buttons AND the sheet
   controls are both clickable (positioning only — doesn't fight the z-order). */
.cmp-sheet > .cmp-toolbar { right: 52px; }
.cmp-edit-render {
  font: 600 10.5px/1 var(--mono); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 7px; margin-left: 10px; cursor: pointer; vertical-align: middle;
}
.cmp-edit-render:hover { color: var(--ink); border-color: var(--ink-faint); }

/* Find results need to read at a glance: amber for every match, hot orange for
   the current one, soft amber for select-a-word twins (highlightSelectionMatches). */
.cm-editor .cm-searchMatch { background: #ffdf82; outline: 1px solid rgba(178, 134, 14, .5); border-radius: 2px; }
.cm-editor .cm-searchMatch.cm-searchMatch-selected { background: #ffAB4d; outline-color: #d97706; }
.cm-editor .cm-selectionMatch { background: rgba(255, 223, 130, .45); border-radius: 2px; }
@media (prefers-color-scheme: dark) {
  .cm-editor .cm-searchMatch { background: #6b5411; outline-color: rgba(240, 195, 90, .5); color: inherit; }
  .cm-editor .cm-searchMatch.cm-searchMatch-selected { background: #8a5a17; outline-color: #d97706; }
  .cm-editor .cm-selectionMatch { background: rgba(120, 95, 25, .5); }
}

/* Heading rhythm nudged toward v3-docview's larger scale (audit #2): the mock
   sets h1 at 30px on a 15.5px body (≈2em) with h2 clearly above body copy.
   Sizes apply in BOTH Doc and MD modes, so the Doc⇄MD geometry contract
   (identical line boxes across the flip) is untouched. */
.md-h1 { font-size: 2em; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
.md-h2 { font-size: 1.5em; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.md-h3 { font-size: 1.25em; font-weight: 650; }
.md-h4 { font-size: 1.05em; font-weight: 650; }
.md-strong { font-weight: 700; }
.md-em { font-style: italic; }
.md-strike { text-decoration: line-through; color: var(--ink-soft); }
.md-link { color: var(--accent); }
.md-url { color: var(--ink-faint); }
.md-code { background: var(--wash); border-radius: 4px; padding: 1px 0; }
.md-quote { color: var(--ink-soft); font-style: italic; }
.md-meta, .md-comment { color: var(--ink-faint); }
.md-list { color: var(--accent); }

/* ---------- Doc ⇄ Markdown surface ----------
   Doc mode (default): true styled prose — proportional sans, real heading
   sizes, and the syntax marks HIDDEN off the caret line (doc-prose.js replaces
   them with CM6 decorations; the caret's own line reveals its marks so editing
   stays sane). Marks that survive on the active line render faded.
   Markdown mode (body.docmode-md): the raw mono source, marks at full accent
   strength.
   METRICS CONTRACT (v2): font-size and line-height are pinned identical in
   both modes, so line boxes are the same height and the component widgets
   (which reset their own fonts) keep their geometry across the flip. Only the
   prose font FAMILY and the mark visibility differ. */
body:not(.docmode-md) .cm-editor .cm-scroller { font-family: var(--sans); }
/* code keeps its mono voice inside the styled doc */
body:not(.docmode-md) .cm-editor .md-codeblock,
body:not(.docmode-md) .cm-editor .md-code { font-family: var(--mono); }
body:not(.docmode-md) .cm-editor .md-meta { opacity: .38; }
/* list items read as prose in the doc (the accent voice belongs to MD source) */
body:not(.docmode-md) .cm-editor .md-list { color: inherit; }
body:not(.docmode-md) .cm-editor .md-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
/* the • stand-in for a hidden list dash (doc-prose.js BulletWidget) */
.cm-editor .md-bullet { color: var(--accent); }
body.docmode-md .cm-editor .md-meta { color: var(--accent); opacity: 1; }
body.docmode-md .cm-editor .md-code { background: var(--wash-2); }
body.docmode-md .cm-editor .md-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Doc-mode rendered table (doc-prose.js TableWidget) — mirrors the pub page's
   table treatment. Clicking a row reveals the raw pipe rows for editing. */
.cm-editor .md-table { margin: 4px 0; font-family: var(--sans); cursor: text; overflow-x: auto; }
.cm-editor .md-table table { border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.cm-editor .md-table th, .cm-editor .md-table td {
  border: 1px solid var(--line); padding: 7px 13px; text-align: left; white-space: normal;
}
.cm-editor .md-table th { font-weight: 600; background: var(--code-bg); }
.cm-editor .md-table tbody tr:hover { background: var(--wash); }
.cm-editor .md-table p { margin: 0; display: inline; }

/* Doc-mode horizontal rule (doc-prose.js HrWidget) — the pub page's '···'. */
.cm-editor .md-hr { text-align: center; padding: 10px 0; cursor: text; }
.cm-editor .md-hr::before { content: '···'; letter-spacing: .8em; color: var(--ink-faint); font-size: 22px; line-height: 1; }

/* Doc mode: with the ``` fence markers hidden their lines still hold the
   .md-codeblock band, which keeps the block a subtle rounded container. */
body:not(.docmode-md) .cm-editor .md-codeblock { border-radius: 0; }
body:not(.docmode-md) .cm-editor .md-codeblock:first-child,
body:not(.docmode-md) .cm-editor .cm-line:not(.md-codeblock) + .md-codeblock { border-radius: 8px 8px 0 0; }
body:not(.docmode-md) .cm-editor .md-codeblock:has(+ .cm-line:not(.md-codeblock)),
body:not(.docmode-md) .cm-editor .md-codeblock:last-child { border-radius: 0 0 8px 8px; }

/* ---------- block drag handles (v3-docview .grip) ----------
   One floating grip button tracks the hovered block; dragging shows a ghost
   chip + accent drop line. Keyboard: focus the grip, ↑/↓ moves the block. */
.blk-grip {
  position: fixed; z-index: 40;
  width: 22px; height: 25px;
  display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-faint);
  opacity: .5; cursor: grab;
  transition: opacity .12s, background .12s, color .12s;
  touch-action: none;
}
.blk-grip:hover, .blk-grip:focus-visible { opacity: 1; background: var(--wash-2); color: var(--ink-soft); }
.blk-grip:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.blk-grip:active, .blk-grip.gripping { cursor: grabbing; opacity: 1; background: var(--wash-2); }
/* .off keeps the grip in the tab order (keyboard-focusable) but invisible and
   click-through until a hover or focus places it on a block */
.blk-grip.off { opacity: 0; pointer-events: none; }
.blk-grip.off:focus-visible { opacity: 1; pointer-events: auto; }
@media (hover: none) { .blk-grip { display: none; } }
body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
#blk-drop-line {
  position: fixed; height: 2px; z-index: 41; pointer-events: none;
  border-radius: 2px; background: var(--accent);
}
#blk-drop-line::before {
  content: ""; position: absolute; left: -5px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
#blk-drop-line[hidden] { display: none; }
.blk-drag-veil {
  position: fixed; z-index: 39; pointer-events: none;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  border-radius: 6px;
}
.blk-drag-veil[hidden] { display: none; }
.blk-ghost {
  position: fixed; z-index: 80; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  max-width: 280px; padding: 6px 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  font-size: 12px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.blk-ghost .bg-kind {
  font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.blk-ghost .bg-text { overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-weight: 450; }
body[data-mode="view"] .blk-grip { display: none; }

/* ---------- view-mode rescue toast (v3-docview #view-toast) ---------- */
#view-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 75;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px);
  padding: 9px 9px 9px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
  animation: vtoast-in .18s cubic-bezier(.2, .9, .3, 1.15);
}
#view-toast[hidden] { display: none; }
@keyframes vtoast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
#view-toast .vt-btn {
  flex: none; padding: 5px 12px; border-radius: 7px;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: transform .06s; cursor: pointer;
}
#view-toast .vt-btn:active { transform: translateY(1px); }
.tok-keyword { color: #7c3aed; }
.tok-string { color: var(--green); }
.tok-number { color: #b45309; }
.tok-type { color: #0b7285; }
.tok-fn { color: #1971c2; }
@media (prefers-color-scheme: dark) {
  .tok-keyword { color: #b197f5; }
  .tok-number { color: #e8a75c; }
  .tok-type { color: #56b6c2; }
  .tok-fn { color: #6cb0f0; }
}

.sg-ins { background: var(--green-soft); text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.sg-del { background: var(--red-soft); text-decoration: line-through; text-decoration-color: var(--red); }
.cm-hl { background: var(--yellow-soft); border-bottom: 2px solid var(--yellow); cursor: pointer; }
.mark-active.cm-hl { background: color-mix(in srgb, var(--yellow) 45%, var(--yellow-soft)); }
.mark-active.sg-ins { background: color-mix(in srgb, var(--green) 22%, var(--green-soft)); }
.mark-active.sg-del { background: color-mix(in srgb, var(--red) 20%, var(--red-soft)); }
.flash-hl { border-radius: 2px; animation: flash-fade 1.1s ease-out; }
@keyframes flash-fade { from { background: var(--yellow); } to { background: transparent; } }
.card-shake { animation: card-shake .35s ease-in-out; }
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* y-codemirror remote cursors */
.cm-ySelectionInfo { font-family: var(--sans) !important; font-size: 10.5px !important; padding: 2px 5px !important; border-radius: 4px !important; opacity: 1 !important; }

/* ---------- preview ---------- */
#preview { display: none; }
body.preview-on #editor { display: none; }
body.preview-on #preview { display: block; }
.prose { max-width: 720px; margin: 0 auto; padding: 40px 48px 30vh; font-size: 16.5px; line-height: 1.75; overflow-wrap: anywhere; }
.prose h1 { font-size: 2em; margin: 1em 0 .4em; }
.prose h2 { font-size: 1.5em; margin: 1.4em 0 .4em; }
.prose h3 { font-size: 1.2em; margin: 1.2em 0 .3em; }
.prose p { margin: .65em 0; }
.prose pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--wash); padding: 2px 5px; border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--line); margin: 1em 0; padding: 2px 18px; color: var(--ink-soft); }
.prose img { max-width: 100%; border-radius: 8px; }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
.prose th { background: var(--code-bg); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }
.prose li.task-list-item { list-style: none; margin-left: -1.4em; }
.prose li.task-list-item .task-checkbox { margin: 0 .5em 0 0; vertical-align: middle; }

/* ---------- history drawer ---------- */
.drawer {
  width: min(980px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 64px));
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; }
.drawer-cols { display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--line); }
.drawer-list { width: 240px; flex: none; overflow-y: auto; border-right: 1px solid var(--line); padding: 8px; }
.drawer-detail { flex: 1; overflow-y: auto; padding: 14px 20px; }
.drawer-hint { color: var(--ink-faint); font-size: 13.5px; }
.rev-day {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); padding: 12px 11px 4px;
}
.rev-item {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  border-radius: 8px; margin-bottom: 2px;
}
.rev-item:hover { background: var(--wash); }
.rev-item.active { background: var(--surface); box-shadow: var(--shadow); }
.rev-time { font-size: 13.5px; font-weight: 600; }
.rev-meta { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.rev-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.diff { font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; }
.diff > div { padding: 2px 10px; border-radius: 4px; }
.diff-del { background: var(--red-soft); color: color-mix(in srgb, var(--red) 70%, var(--ink)); }
.diff-ins { background: var(--green-soft); color: color-mix(in srgb, var(--green) 70%, var(--ink)); }
.diff-ctx { color: var(--ink-faint); }
.diff mark.dw-del { background: color-mix(in srgb, var(--red) 32%, var(--red-soft)); color: inherit; border-radius: 3px; text-decoration: line-through; }
.diff mark.dw-ins { background: color-mix(in srgb, var(--green) 30%, var(--green-soft)); color: inherit; border-radius: 3px; }

/* ---------- share dialog ---------- */
.share-modal { width: min(520px, calc(100vw - 32px)); }
.share-content { margin-top: 16px; }
.share-link-panel {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 14px; box-shadow: 0 1px 0 rgba(24, 22, 20, 0.03);
}
.share-access-row, .share-copy-row { display: flex; align-items: center; gap: 12px; }
.share-copy-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.share-info { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.share-desc { font-size: 12px; color: var(--ink-faint); }
.share-actions { display: flex; gap: 6px; }
.share-role-select {
  margin-left: auto; min-width: 132px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 28px 7px 9px; cursor: pointer;
}
.share-role-select:focus-visible, .share-copy-option:focus-visible, .share-manage summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.share-universal { color: var(--ink-soft); font-size: 12px; }
.share-copy-wrap { position: relative; display: flex; margin-left: auto; }
.share-copy-main { border-radius: 8px 0 0 8px; }
.share-copy-more {
  min-width: 34px; padding-left: 9px; padding-right: 9px; border-radius: 0 8px 8px 0;
  border-left-color: rgba(255, 255, 255, 0.3);
}
.share-copy-menu {
  position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow-lg); padding: 5px;
}
.share-copy-menu[hidden] { display: none; }
.share-copy-option {
  width: 100%; border: 0; background: transparent; color: var(--ink); border-radius: 6px;
  padding: 8px 9px; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
.share-copy-option:hover { background: var(--paper); }
.share-manage { margin: 12px 2px 4px; }
.share-manage summary { width: fit-content; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.share-manage-list { margin-top: 8px; border-top: 1px solid var(--line); }
.share-manage-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.share-manage-row .btn { margin-left: auto; }
.share-owner-link { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.share-error { color: var(--red); font-size: 13px; }
.token-row { display: flex; align-items: center; gap: 8px; }
.token-field {
  font-family: var(--mono); font-size: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
  overflow-x: auto; white-space: nowrap; flex: 1;
}
.agent-name-input {
  font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; flex: 1;
}
.agent-name-input:focus { outline: none; border-color: var(--ink-soft); }
.cli-block {
  font-family: var(--mono); font-size: 12px; background: #211f1d; color: #e8e4de;
  border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 6px 0 10px;
}
/* the "needs you" inbox strip */
.needs-you { border: 1px solid color-mix(in srgb, #e8590c 35%, transparent); background: color-mix(in srgb, #e8590c 5%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; }
.needs-you-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.needs-you-head h2 { margin: 0; font-size: 15px; }
.needs-you-badge { background: #d9480f; color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.needs-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 13.5px; }
.needs-row:hover { background: color-mix(in srgb, #e8590c 9%, transparent); }
/* the add-an-email capture row at the foot of the strip */
.needs-email-row { width: 100%; text-align: left; border-top: 1px dashed color-mix(in srgb, #e8590c 30%, transparent); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 9px; }
.needs-email-msg { color: var(--accent); font-weight: 600; }
.needs-dot { flex: none; }
.needs-title { font-weight: 600; white-space: nowrap; }
.needs-msg { color: var(--ink-soft, #777); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* onboarding activation modal */
.onboard-modal { max-width: 560px; position: relative; }
.onboard-close { position: absolute; top: 12px; right: 12px; }
.onboard-step { margin: 14px 0; }
.onboard-step-label { font-size: 12px; font-weight: 600; color: var(--ink-3, #999); margin-bottom: 4px; letter-spacing: .02em; }
/* the two-line paste: calm, roomy, invitation-sized — must read SAFE */
.onboard-prompt { white-space: pre-wrap; word-break: break-word; max-height: 40vh; font-size: 13.5px; line-height: 1.7; padding: 16px 18px; }
/* footer: quiet text-button Later vs the staged primary CTA, real gap, and a
   clear top separator so the buttons never crowd or touch — verified at 390px */
.onboard-foot { justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.btn-text { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft, #777); background: none; border: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.btn-text:hover { color: var(--ink); background: var(--wash); }
/* staged CTA: stage 0 = quiet secondary (waiting), stage 1 = primary (lead
   arrived; .btn-primary added), stage 2 = accent + pulse (team is ready) */
.onboard-open { transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.onboard-open.onboard-go {
  background: var(--accent, #c2410c); border-color: var(--accent, #c2410c); color: #fff;
  animation: onboard-cta-pulse 2s ease-in-out infinite;
}
.onboard-open.onboard-go:hover { background: color-mix(in srgb, var(--accent, #c2410c) 88%, #000); }
@keyframes onboard-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c2410c) 38%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, #c2410c) 0%, transparent); }
}
@media (max-width: 420px) {
  .onboard-foot { flex-wrap: wrap; }
  .onboard-open { flex: 1 1 100%; justify-content: center; order: -1; }
}

/* ---------- gates ---------- */
.gate { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 20px; }
.gate-card {
  text-align: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 44px 40px; max-width: 420px; box-shadow: var(--shadow);
}
.gate-card h1 { font-size: 22px; margin: 14px 0 6px; }
.gate-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; }

/* ---------- dashboard ---------- */
.bar { display: flex; align-items: center; gap: 10px; padding: 14px 28px; }
.wordmark { font-weight: 750; font-size: 17px; letter-spacing: -.02em; }
.wordmark-xl { font-size: 26px; }
.logo-lg { display: inline-flex; }
.dash { max-width: 1060px; margin: 0 auto; padding: 18px 28px 80px; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.dash-head h1 { font-size: 26px; }
/* header stat line (mock .page-meta): "N docs · N agents working now" */
.dash-stat { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dash-stat .n { white-space: nowrap; }
.dash-stat i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.dash-stat-live { color: var(--blue); font-weight: 550; }
/* per-row agent presence (mock .factive): quiet pulse + count */
.row-active {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 550; color: var(--blue); white-space: nowrap;
}
.row-active i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none;
  animation: row-livepulse 2.2s ease-out infinite;
}
@keyframes row-livepulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 35%, transparent); }
  70%, 100% { box-shadow: 0 0 0 5px transparent; }
}
@media (max-width: 640px) { .doc-row .row-active { display: none; } }
/* touch preview: chevron toggle + inline excerpt block under the row */
.row-expand { display: none; }
@media (hover: none) {
  .row-expand { display: inline-flex; color: var(--ink-faint); }
  .row-expand .glyph { transition: transform .16s; display: inline-flex; }
  .row-expand.open .glyph { transform: rotate(90deg); }
}
.row-peek {
  margin: 2px 8px 8px 34px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.row-peek .row-peek-loading { font-size: 12px; color: var(--ink-faint); }
/* "+ New document" split button: main = blank, caret = start from a template */
.newdoc-wrap { position: relative; display: inline-flex; align-self: center; }
.newdoc-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.newdoc-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.25); padding: 0 9px; font-size: 11px; }
.newdoc-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 240px; max-width: 320px;
  max-height: 60vh; overflow-y: auto; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.newdoc-item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); text-align: left; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.newdoc-item:hover { background: var(--wash, #f4f4f2); }
.newdoc-tpl-icon { color: var(--accent, #c2410c); flex: none; }
.newdoc-muted { color: var(--ink-soft, #666); }
.newdoc-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3, #999); }
.newdoc-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doc-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; color: var(--ink); min-height: 130px;
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.doc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.doc-card-title { font-weight: 650; font-size: 15.5px; }
.doc-card-excerpt { font-size: 13px; color: var(--ink-soft); line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-faint); }
/* Dashboard tabs: My docs / Shared with me / Opened. Hidden entirely when
   only "My docs" has anything in it. */
.dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.dash-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 12px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.dash-tab:hover { color: var(--ink); }
.dash-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.dash-tab-count {
  font-size: 11px; font-weight: 650; color: var(--ink-soft);
  background: var(--wash); border-radius: 999px; padding: 1px 7px;
}
.role-tag {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--wash); border-radius: 999px; padding: 2px 8px; margin-right: 4px;
}
.dash-empty { text-align: center; padding: 90px 0; color: var(--ink-soft); }
.dash-empty p { margin: 0 0 16px; }

/* ---------- landing v2 (homepage redesign) ----------
   Namespaced under .page-landing: style.css is shared by every page, and the
   landing is the only surface with its own dark theme (prefers-color-scheme)
   and its own set of accent variables. Mockup: design-round v3. */
.page-landing {
  --blue: #1971c2;
  --blue-soft: #e7f0fa;
  --await: #d9480f;
  --await-soft: #ffe8d9;
  --code-bg: #f4f1ec;
  --btn-hover: #f5f2ee;
  --shadow-lg: 0 4px 12px rgba(28,27,26,.08), 0 24px 64px rgba(28,27,26,.13);
  font-size: 16px;
  overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
  .page-landing {
    --paper: #161512;
    --surface: #201e1b;
    --ink: #ece8e2;
    --ink-soft: #a49d94;
    --ink-faint: #6e6961;
    --line: #33302b;
    --accent: #e8590c;
    --accent-soft: #3a2417;
    --green: #4cb765;
    --green-soft: #1c3524;
    --red: #ff8787;
    --red-soft: #3d1f1f;
    --blue: #5c9fe0;
    --blue-soft: #1a2a3d;
    --await: #ff8342;
    --await-soft: #402514;
    --code-bg: #262420;
    --btn-hover: #2a2723;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.4);
  }
}
.page-landing code { font-family: var(--mono); }

/* buttons: landing sizes + dark-aware colors (base .btn is app-wide) */
.page-landing .btn {
  justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 9px;
  font-size: 14.5px; font-weight: 550; color: var(--ink); white-space: nowrap;
}
.page-landing .btn:hover { background: var(--btn-hover); }
.page-landing .btn[hidden] { display: none; } /* explicit display beats the UA [hidden] rule */
.page-landing .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-landing .btn-primary:hover { background: #000; }
@media (prefers-color-scheme: dark) { .page-landing .btn-primary:hover { background: #fff; } }
.page-landing .btn-lg { padding: 13px 22px; font-size: 15.5px; border-radius: 10px; }
.page-landing .btn-sm { padding: 7px 13px; font-size: 13.5px; }
.btn-lg { padding: 12px 22px; font-size: 15.5px; border-radius: 10px; }
.g-mark { width: 17px; height: 17px; flex: none; }

/* ---------- nav ---------- */
.page-landing .nav {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 12px;
}
.wordmark-row { display: flex; align-items: center; gap: 9px; }
.page-landing .wordmark { font-weight: 750; font-size: 17.5px; letter-spacing: -.02em; }
.nav-spacer { flex: 1; }
.page-landing .nav a.nav-link { color: var(--ink-soft); font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 7px; }
.page-landing .nav a.nav-link:hover { color: var(--ink); background: var(--btn-hover); }
.page-landing .nav a.nav-link code { font-size: 12.5px; background: var(--code-bg); padding: 2px 6px; border-radius: 5px; }
@media (max-width: 640px) { .page-landing .nav .nav-link { display: none; } }

/* ---------- hero ---------- */
.hero { max-width: 1120px; margin: 0 auto; padding: 44px 24px 0; text-align: center; }
.hero h1 {
  font-size: clamp(32px, 5.4vw, 54px); line-height: 1.06; letter-spacing: -.032em;
  margin: 0 auto 14px; max-width: 17ch; text-wrap: balance; font-weight: 700;
}
.hero-sub {
  font-size: clamp(15px, 2vw, 17.5px); line-height: 1.6; color: var(--ink-soft);
  max-width: 54ch; margin: 0 auto 26px; text-wrap: balance;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cta-note { font-size: 13px; color: var(--ink-faint); margin: 0 0 30px; }
.cta-note b { color: var(--ink-soft); font-weight: 600; }

/* ---------- the live demo doc ---------- */
.demo-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px 8px; }
.demo {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
  position: relative;
}
.demo-top {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-soft);
  background: var(--surface); flex-wrap: wrap;
}
.demo-doc-name { font-weight: 650; color: var(--ink); font-size: 13.5px; }
.demo-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block; animation: ld-pulse 2s ease-in-out infinite;
}
@keyframes ld-pulse { 50% { opacity: .35; } }
.dpresence { display: flex; margin-left: auto; align-items: center; }
.pav {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface);
  margin-left: -6px; flex: none; letter-spacing: .02em;
}
.dpresence-label { font-size: 12px; color: var(--ink-faint); margin-left: 9px; white-space: nowrap; }
.view-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  margin-left: 12px;
}
.view-toggle button {
  font-size: 12px; font-weight: 600; padding: 5px 11px; color: var(--ink-faint);
  background: var(--surface); transition: background .1s, color .1s;
}
.view-toggle button.on { background: var(--code-bg); color: var(--ink); }
.view-toggle button + button { border-left: 1px solid var(--line); }

.demo-body { display: grid; grid-template-columns: 1.25fr .95fr; }
.demo-main { padding: 18px 20px 20px; border-right: 1px solid var(--line); min-width: 0; }
.demo-side { padding: 18px 20px 20px; background: var(--paper); min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.doc-h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; }
.doc-byline { font-size: 12px; color: var(--ink-faint); margin: 0 0 14px; }

/* fences look native: quiet container + faint mono type-tag */
.fence { position: relative; margin: 0 0 16px; }
.fence-tag {
  position: absolute; top: -8px; right: 10px; font-family: var(--mono);
  font-size: 10px; color: var(--ink-faint);
  padding: 0 5px; letter-spacing: .02em; user-select: none;
  background: var(--surface); z-index: 1;
}
.demo-side .fence-tag { background: var(--paper); }

/* status fence */
.status {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); transition: border-color .4s, box-shadow .4s;
}
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; background: var(--blue-soft); color: var(--blue);
  transition: background .3s, color .3s;
}
.status-badge .b-await, .status.awaiting .b-build { display: none; }
.status.awaiting .b-await { display: inline; }
.status.awaiting .status-badge { background: var(--await-soft); color: var(--await); box-shadow: 0 0 0 2px color-mix(in srgb, var(--await) 30%, transparent); }
.status.awaiting { border-color: color-mix(in srgb, var(--await) 35%, var(--line)); }
.status-log { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.status-entry { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; align-items: baseline; color: var(--ink); }
.status-entry time { flex: none; font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-family: var(--mono); }
.status-entry b { font-weight: 650; }

/* board fence */
.board { display: flex; gap: 9px; }
.bcol {
  flex: 1 1 0; min-width: 0; background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 11px; padding: 8px 7px;
}
.bcol-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 1px 4px 8px;
}
.bcount {
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft);
  border-radius: 99px; padding: 0 6px; font-size: 10px; font-weight: 600; min-width: 17px; text-align: center;
  transition: all .3s;
}
.bcards { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.kcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; box-shadow: 0 1px 2px rgba(20,18,16,.045);
  overflow: hidden;
}
.kcard-t { font-size: 12px; line-height: 1.35; font-weight: 550; overflow-wrap: anywhere; }
.kcard.done .kcard-t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.kcard.done { opacity: .55; }
.kcard.doing { border-left: 2.5px solid var(--accent); }
.kcard-m { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.kcard .tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 1px 6px; }
.who {
  width: 19px; height: 19px; border-radius: 50%; background: var(--c, #888); color: #fff;
  font-size: 8.5px; font-weight: 700; display: inline-grid; place-items: center; margin-left: auto;
  box-shadow: 0 0 0 1.5px var(--surface);
}
.due { font-size: 10px; font-weight: 600; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 5px; padding: 1px 6px; }
/* card motion */
.kcard { transition: opacity .45s, transform .45s, max-height .5s .1s, margin .5s .1s, padding .5s .1s, border-width .5s .1s; max-height: 120px; }
.kcard.gone { opacity: 0; transform: translateX(10px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-width: 0; }
.kcard.hidden-c { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-width: 0; }
.kcard.arrive { opacity: 1; transform: none; max-height: 120px; }
.kcard.flash { animation: cardflash 1.6s ease-out; }
@keyframes cardflash { 0% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } 100% { box-shadow: 0 1px 2px rgba(20,18,16,.045); } }

/* chat fence */
.chat {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px 11px;
  background: var(--surface); display: flex; flex-direction: column;
}
.msgs { display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 9px; }
.msg .pav { width: 26px; height: 26px; margin: 1px 0 0; border: none; font-size: 10px; }
.msg-head { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.msg-head b { font-weight: 650; }
.msg-head time { color: var(--ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.msg .badge {
  font-size: 8.5px; font-weight: 700; border-radius: 99px; padding: 1.5px 6px;
  text-transform: uppercase; letter-spacing: .05em;
  background: color-mix(in srgb, #5f3dc4 14%, transparent); color: #7048b6;
}
@media (prefers-color-scheme: dark) { .msg .badge { color: #a58fe0; } }
.msg-text { font-size: 13px; line-height: 1.45; color: var(--ink); margin-top: 1px; overflow-wrap: anywhere; }
.msg-text .mention { color: var(--accent); font-weight: 600; }
.msg-text em { font-style: normal; background: var(--code-bg); border-radius: 4px; padding: 0 4px; font-family: var(--mono); font-size: 11.5px; }
.msg.hid { display: none; }
.msg.in { animation: msgin .35s ease-out; }
@keyframes msgin { from { opacity: 0; transform: translateY(7px); } }
.typing { display: flex; gap: 9px; align-items: center; min-height: 26px; margin-top: 10px; visibility: hidden; }
.typing.on { visibility: visible; }
.typing .pav { width: 26px; height: 26px; border: none; font-size: 10px; }
.typing-label { font-size: 11.5px; color: var(--ink-faint); }
.dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); animation: dotb 1.1s infinite; }
.dots i:nth-child(2) { animation-delay: .18s; } .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dotb { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.chat-composer {
  margin-top: 12px; border-top: 1px solid var(--line); padding-top: 9px;
  font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px;
}
.chat-composer span { flex: 1; }
.chat-composer kbd {
  font-family: var(--sans); font-size: 10px; padding: 1px 5px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; background: var(--surface);
}

/* sheet fence */
.sheet { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); }
.sheet table { border-collapse: collapse; width: 100%; font-size: 12px; }
.sheet th, .sheet td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; white-space: nowrap; }
.sheet td + td, .sheet th + th { border-left: 1px solid var(--line); }
.sheet tr:last-child td { border-bottom: none; }
.sheet th { background: var(--code-bg); font-weight: 650; color: var(--ink-soft); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.sheet td:first-child { font-weight: 600; }
.sheet .on-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; }

/* markdown source pane */
.demo-source { display: none; padding: 18px 22px; overflow-x: auto; background: var(--surface); }
.demo.src-mode .demo-source { display: block; }
.demo.src-mode .demo-body { display: none; }
.demo-source pre {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.65;
  color: var(--ink); white-space: pre;
}
.demo-source .c-fence { color: var(--accent); font-weight: 600; }
.demo-source .c-dim { color: var(--ink-faint); }
.demo-source .c-head { font-weight: 700; }

.demo-caption {
  text-align: center; font-size: 13.5px; color: var(--ink-faint);
  margin: 16px auto 0; line-height: 1.6; max-width: 62ch; padding: 0 16px;
}
.demo-caption strong { color: var(--ink-soft); font-weight: 600; }
.demo-caption button.linkish { color: var(--accent); font-weight: 600; padding: 0; font-size: inherit; }

/* ---------- proof strip + tool chips (under the demo) ---------- */
.proof-strip { max-width: 900px; margin: 34px auto 0; padding: 0 24px; text-align: center; }
.stats {
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
  gap: 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat {
  flex: 1 1 200px; min-width: 180px; padding: 18px 14px 16px;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat-n {
  font-size: 25px; font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat-l { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; max-width: 26ch; text-wrap: balance; }
@media (max-width: 680px) {
  .stat { flex-basis: 100%; padding: 13px 10px 12px; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line); }
}
.chips {
  margin: 18px auto 0; display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.chips-label { font-size: 12.5px; color: var(--ink-faint); margin-right: 2px; }
.chips code {
  font-size: 13px; background: var(--code-bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 11px; color: var(--ink); font-weight: 500;
}
.chips .chips-etc { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- sections ---------- */
.page-landing .section { max-width: 1060px; margin: 0 auto; padding: 84px 24px 0; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.page-landing .section h2 { font-size: clamp(24px, 3.4vw, 31px); letter-spacing: -.025em; text-wrap: balance; }
.page-landing .section .sub { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 60ch; margin: 0 0 32px; }
.page-landing .section .sub strong { color: var(--ink); }

/* prompt block — 2-up: prompt box + the three steps */
.prompt-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .prompt-grid { grid-template-columns: 1fr; gap: 36px; } }
.promptbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--shadow); overflow: hidden;
}
.promptbox-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-faint);
  font-family: var(--mono);
}
.copy-btn {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent);
  padding: 4px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--accent-soft); transition: background .12s;
  font-family: var(--sans);
}
.copy-btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.promptbox pre {
  margin: 0; padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.8;
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.prompt-foot { margin-top: 14px; font-size: 13px; color: var(--ink-faint); line-height: 1.6; }
.prompt-foot code { font-size: 12px; background: var(--code-bg); padding: 1px 6px; border-radius: 5px; }

/* the three steps — one calm reading order next to the prompt */
.steps {
  list-style: none; counter-reset: step; margin: 0; padding: 4px 0 0;
  display: flex; flex-direction: column; gap: 26px; max-width: 44ch;
}
.steps li { counter-increment: step; display: grid; grid-template-columns: 26px 1fr; gap: 0 14px; }
.steps li::before {
  content: counter(step);
  grid-row: 1 / 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 750;
  transform: translateY(-2px);
}
.steps b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.steps span { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 3px; }

/* ---------- make-it-yours: live editable mini board ---------- */
.custom-demo { display: grid; grid-template-columns: .96fr 1.04fr; gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .custom-demo { grid-template-columns: 1fr; } }
.custom-pane {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.custom-pane-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.custom-pane-head .head-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.custom-editor:focus-within { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
#mini-md {
  flex: 1; width: 100%; border: 0; outline: none; resize: vertical; min-height: 200px;
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.8; padding: 14px 16px;
}
.custom-chips {
  display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 12px 12px;
  border-top: 1px dashed var(--line);
  background: color-mix(in srgb, var(--code-bg) 45%, var(--surface));
}
.mod-chip {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 99px; padding: 5px 11px;
  transition: background .12s, transform .06s;
}
.mod-chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.mod-chip:active { transform: translateY(1px); }
.custom-render-body { padding: 12px; flex: 1; }
.custom-render.pulse { animation: panepulse .8s ease-out; }
@keyframes panepulse { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } 100% { box-shadow: var(--shadow); } }
.mini-empty { font-size: 12.5px; color: var(--ink-faint); padding: 14px 6px; }
.mini-empty code { background: var(--code-bg); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }
.custom-cap {
  font-size: 13px; color: var(--ink-faint); line-height: 1.6; margin: 14px 0 0;
}
.custom-cap strong { color: var(--ink-soft); font-weight: 600; }

/* "crazy stuff" idea grid */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 36px; }
.mod { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px 14px; }
.mod h3 { font-size: 14px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.01em; }
.mod p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.mod-foot { margin-top: 16px; font-size: 13px; color: var(--ink-faint); line-height: 1.6; }

/* proof grid */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.proof {
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 20px 22px;
}
.proof h3 { font-size: 15.5px; margin: 0 0 5px; }
.proof p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* writers strip */
.writers {
  display: flex; gap: 10px 26px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
}
.writers li { font-size: 14px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 7px; }
.writers li::before { content: '✓'; color: var(--green); font-weight: 700; font-size: 12px; }

/* footer cta */
.foot-cta { text-align: center; padding: 96px 24px 40px; }
.foot-cta h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.03em; margin-bottom: 10px; text-wrap: balance; }
.foot-cta h2 em { font-style: italic; color: var(--accent); }
.foot-cta > p { color: var(--ink-soft); margin: 0 0 24px; font-size: 15.5px; }
.foot-cta .cta-note { margin-bottom: 0; }
.page-landing .footer {
  max-width: 1120px; margin: 0 auto; padding: 22px 24px 34px;
  border-top: 1px solid var(--line);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
}
.page-landing .footer a { color: var(--ink-faint); }
.page-landing .footer a:hover { color: var(--ink); }

/* ---------- auth card (Google-first; landing.js wires visibility) ---------- */
.auth-card {
  width: min(360px, 100%); margin: 30px auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px; box-shadow: var(--shadow);
}
.auth-tabs { display: flex; background: var(--code-bg, #efebe5); border-radius: 9px; padding: 3px; gap: 2px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 7px; border-radius: 7px; font-size: 13.5px; font-weight: 550; color: var(--ink-soft); }
.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,27,26,.12); }
.auth-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.auth-card .text-input { margin-top: 5px; }
.auth-err { color: var(--red); font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--ink-faint); font-size: 12.5px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* Google leads the auth card: primary-weight button, password form collapsed
   behind .auth-password-toggle (landing.js reveals both when configured). */
.btn-google { gap: 9px; background: var(--surface); padding: 11px; font-size: 14.5px; font-weight: 600; border: 1.5px solid var(--ink); color: var(--ink); }
.btn-google:hover { background: var(--btn-hover, #f8f7f5); }
.auth-password-toggle {
  display: block; width: 100%; background: none; border: 0; padding: 0;
  color: var(--ink-soft); font: inherit; font-size: 13px; text-align: center;
  text-decoration: underline; cursor: pointer;
}
.auth-password-toggle[hidden] { display: none; } /* explicit display beats the UA [hidden] rule */
.auth-password-toggle:hover { color: var(--ink); }

/* ---------- landing responsive + motion ---------- */
@media (max-width: 900px) {
  .demo-body { grid-template-columns: 1fr; }
  .demo-main { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .board { flex-direction: column; }
  .dpresence-label { display: none; }
  .hero { padding-top: 28px; }
  .demo-top { gap: 8px; }
  .view-toggle { margin-left: auto; }
  .dpresence { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kcard, .msg.in { transition: none; animation: none; }
  .demo-live-dot { animation: none; }
  .custom-render.pulse { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #editor { padding: 24px 20px 40vh; }
  .doc-title { width: 30vw; }
  body.panel-open #panel {
    position: fixed; right: 0; top: 49px; bottom: 0; width: min(340px, 88vw);
    background: var(--paper); box-shadow: var(--shadow-lg); z-index: 20;
  }
  .tool-btn { padding: 7px 8px; }
}
@media (max-width: 700px) {
  /* Two tidy rows, never three: row 1 = logo + title + preview + ⋯ (essentials
     pinned right), row 2 = the tool cluster. The spacer forces exactly one break. */
  #topbar { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; padding: 8px 10px; }
  .doc-title { width: auto; flex: 1; min-width: 80px; order: 1; }
  .logo { order: 0; }
  /* Insert + History fold into the ⋯ menu on phones; the rest fits one row. */
  #insert-btn, #history-btn, .conn { display: none; }
  #preview-btn, #panel-btn, #doc-menu-btn { order: 2; }
  #topbar .card-spacer { flex-basis: 100%; height: 0; order: 3; margin: 0; }
  .presence, .mode-group, .seg-mini, .claim-chip { order: 4; }
  .seg-mini button { padding: 5px 8px; font-size: 11.5px; }
  .tool-btn { font-size: 12.5px; padding: 6px 9px; min-height: 34px; }
  .mode-btn { padding: 5px 11px; font-size: 12.5px; }
  .claim-chip { font-size: 12px; padding: 5px 9px; }
  body.panel-open #panel {
    left: 0; right: 0; width: 100vw; top: auto; height: 72dvh;
    border-radius: 14px 14px 0 0; border-top: 1px solid var(--line);
  }
  .page-landing .section { padding: 56px 20px 0; }
  .foot-cta { padding: 64px 20px 32px; }
}

/* first-visit intro */
.intro-modal { width: min(480px, calc(100vw - 32px)); }
.intro-row { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.intro-row:first-of-type { border-top: 0; }
.intro-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.intro-icon svg { width: 18px; height: 18px; }
.intro-row-title { font-weight: 600; font-size: 14px; }
.intro-row-body { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.intro-foot { justify-content: space-between; align-items: center; }
.intro-link { color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.intro-link:hover { color: var(--ink); }
.intro-fine { color: var(--ink-faint); font-size: 12px; margin: 12px 0 0; text-align: center; }

/* publish row in the share dialog */
.share-publish {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line); padding: 14px 2px 2px; margin-top: 14px;
}
.publish-icon {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: var(--paper); color: var(--ink-soft); display: grid; place-items: center;
}
.publish-icon svg { width: 19px; height: 19px; }

@media (max-width: 520px) {
  .share-modal { width: calc(100vw - 20px); padding: 18px; }
  .share-access-row, .share-copy-row { align-items: stretch; flex-direction: column; }
  .share-role-select, .share-copy-wrap { width: 100%; margin-left: 0; }
  .share-copy-main { flex: 1; }
  .share-universal { align-self: flex-start; }
  .share-copy-menu { left: 0; right: 0; }
  .share-publish { align-items: flex-start; flex-wrap: wrap; }
  .share-publish .share-actions { width: 100%; margin-left: 44px; }
}

/* an API/agent editor present in the doc — pulsing ring so live edits by
   agents are noticed while they happen, not discovered afterwards */
.avatar-agent { position: relative; }
.avatar-agent::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--accent); animation: agent-pulse 1.6s ease-out infinite;
}
@keyframes agent-pulse {
  0% { opacity: 0.9; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) { .avatar-agent::after { animation: none; opacity: 0.7; } }

/* insert-component menu */
.insert-menu { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; width: 280px; display: flex; flex-direction: column; gap: 2px; }
.slash-menu { max-height: 320px; overflow-y: auto; }
.slash-menu .insert-item.sel { background: var(--hover, rgba(127,127,127,.12)); }
.insert-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.insert-item:hover { background: var(--paper); }
.insert-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); display: grid; place-items: center; font-size: 15px; }
.insert-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.insert-desc { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

/* slash /link doc picker */
.doc-pick-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; max-height: 300px; overflow-y: auto; }
.doc-pick-item { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.doc-pick-item:hover { background: var(--hover, rgba(127,127,127,.1)); }
.doc-pick-title { flex: 1; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth-forgot { background: none; border: 0; color: var(--ink-soft, #777); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; margin-top: 10px; padding: 0; }
.verified-tag { color: var(--green); font-weight: 600; font-size: 12px; }
.notify-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* onboarding v2 */
.onboard-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft, #777); margin: 10px 0; }
.onboard-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint, #bbb); animation: onboard-pulse 1.4s infinite; }
.onboard-live.arrived { color: var(--green); font-weight: 600; }
.onboard-live.arrived .onboard-live-dot { background: var(--green); animation: none; }
@keyframes onboard-pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
.onboard-fallback { margin: 6px 0; font-size: 13px; }
.onboard-fallback summary { cursor: pointer; color: var(--ink-soft, #777); }

/* persistent team strip: carries the mission watch on the dashboard after the
   modal closes — live stage line + reopen-the-prompt affordance */
.team-strip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line, #e8e4de); background: var(--card, #fff); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.team-strip .onboard-live-dot.on { background: var(--green, #2b8a3e); animation: none; }
.team-strip-label { font-weight: 650; flex: none; }
.team-strip-live { color: var(--ink-soft, #777); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-strip .btn-text { flex: none; }
.team-strip .btn { flex: none; text-decoration: none; }
@media (max-width: 560px) { .team-strip { flex-wrap: wrap; } .team-strip-live { flex: 1 1 100%; order: 5; white-space: normal; } }

/* onboarding v3 — paste once, the lead builds the team */
.onboard-stepper { list-style: none; display: flex; gap: 0; margin: 14px 0 4px; padding: 0; }
.onboard-stepper li { flex: 1; display: flex; align-items: flex-start; gap: 8px; min-width: 0; position: relative; padding-right: 12px; }
.onboard-stepper li:not(:last-child)::after { content: ""; position: absolute; right: 4px; top: 10px; width: calc(100% - 130px); min-width: 10px; height: 2px; border-radius: 2px; background: var(--line, #e8e4de); }
.onboard-stepper li.done:not(:last-child)::after { background: #2b8a3e; }
.onboard-snum { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--line, #e8e4de); color: var(--ink-faint, #bbb); background: var(--card, #fff); }
.onboard-stepper li.cur .onboard-snum { border-color: var(--accent, #c2410c); color: var(--accent, #c2410c); }
.onboard-stepper li.done .onboard-snum { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
.onboard-stext { min-width: 0; padding-top: 1px; }
.onboard-stext b { display: block; font-size: 12px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onboard-stext span { display: block; font-size: 10.5px; color: var(--ink-faint, #999); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onboard-stepper li.cur .onboard-stext b { color: var(--accent, #c2410c); }
.onboard-fleet { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.onboard-fleet:empty { display: none; }
.onboard-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--line, #e8e4de); border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--card, #fff); }
.onboard-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #2b8a3e; }
.onboard-chip-badge { font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, #c2410c); background: rgba(194,65,12,.1); padding: 1px 6px; border-radius: 99px; }

/* ================================================================
   FOLDERS + SEARCH (dashboard v3) — flat-first list, folder rows,
   hover peek, ⌘K palette, folder page. Mockups: folders-dashboard-v3
   and folders-page-v3.
   ================================================================ */

/* ---------- topbar search box ---------- */
.searchbox {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  width: min(280px, 34vw); padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: none; cursor: pointer; font: inherit;
  color: var(--ink-faint); text-align: left;
  transition: border-color .12s, background .12s;
}
.searchbox:hover { border-color: var(--line-strong); background: var(--wash); }
.searchbox .glyph { flex: none; display: inline-flex; }
.searchbox-label { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchbox kbd {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}
@media (max-width: 640px) {
  .searchbox { width: auto; }
  .searchbox-label, .searchbox kbd { display: none; }
}

/* ---------- tabs row + creation actions ---------- */
.tabs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; margin-bottom: 14px; }
.tabs-row .dash-tabs { margin-bottom: 0; border-bottom: 0; background: var(--wash-2); border-radius: 9px; padding: 3px; gap: 2px; }
.tabs-row .dash-tab {
  padding: 5px 12px; border-radius: 7px; border-bottom: 0; margin-bottom: 0;
  font-size: 13px; font-weight: 550;
}
.tabs-row .dash-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,27,26,.12); }
.list-acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.list-act {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-soft);
  transition: color .12s, background .12s; white-space: nowrap;
}
.list-act:hover { color: var(--accent); background: var(--wash); }
.list-act .glyph { display: inline-flex; }
@media (max-width: 640px) {
  .tabs-row .dash-tab { padding: 5px 8px; font-size: 12px; gap: 4px; }
  .list-act span { display: none; }
}

/* ---------- the list — one vocabulary for docs and folders ---------- */
.doc-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.doc-row {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; cursor: pointer;
  font-size: 13px; transition: background .1s, opacity .15s;
}
.doc-list > .doc-row:last-child, .doc-list > .folder-sec:last-child .doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--wash); }
.doc-row.drag-src { opacity: .35; }
.row-glyph { flex: none; color: var(--ink-faint); display: inline-flex; }
.row-glyph .glyph { display: inline-flex; }
.folder-glyph { color: var(--ink-soft); }
.doc-row-title {
  font-weight: 500; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-row-meta {
  flex: none; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.row-who { color: var(--ink-faint); }
.av-xs {
  display: inline-grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c, #888); color: #fff;
  font-size: 7.5px; font-weight: 700; letter-spacing: .02em;
}
.row-del { opacity: 0; transition: opacity .12s; flex: none; }
.doc-row:hover .row-del, .row-del:focus-visible { opacity: .8; }
@media (hover: none) { .row-del { opacity: .6; } }

/* drag grip */
.row-grip {
  flex: none; width: 15px; display: grid; place-items: center;
  color: var(--ink-faint); visibility: hidden; cursor: grab;
  margin-left: -5px; touch-action: none;
}
.doc-row:hover > .row-grip { visibility: visible; }
.row-grip:active { cursor: grabbing; }
@media (hover: none) { .row-grip { display: none; } }
body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.drag-ghost {
  position: fixed; z-index: 80; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  max-width: 270px; padding: 6px 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  font-size: 12px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.drag-ghost-kind {
  font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.drag-ghost-title { overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-weight: 450; }

/* folder rows + inline nesting */
.folder-row { user-select: none; }
.folder-row .folder-name {
  font-weight: 620; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent; border-radius: 6px; padding: 2px 5px; margin: -2px -5px;
}
.folder-name[contenteditable="true"] {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: text; text-overflow: clip; outline: none;
}
.fold-chev {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: 5px; color: var(--ink-faint);
  transition: transform .16s ease;
}
.fold-chev.open { transform: rotate(90deg); }
.folder-count { flex: none; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.folder-open-btn {
  flex: none; font-size: 11.5px; font-weight: 550; color: var(--ink-faint);
  padding: 3px 8px; border-radius: 6px; text-decoration: none;
  opacity: 0; transition: opacity .12s, color .12s;
}
.folder-row:hover .folder-open-btn, .folder-open-btn:focus-visible { opacity: 1; }
.folder-open-btn:hover { color: var(--accent); background: var(--wash-2); }
@media (hover: none) { .folder-open-btn { opacity: 1; } }
.folder-kids { position: relative; }
.folder-kids::before {
  content: ""; position: absolute; left: 23px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line); pointer-events: none;
}
.folder-kids > .doc-row, .folder-kids > .folder-sec > .folder-row { padding-left: 38px; }
.folder-kids .folder-kids::before { left: 47px; }
.folder-kids .folder-kids > .doc-row { padding-left: 62px; }
.folder-sec.drop > .folder-row {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.folder-empty-hint { padding: 10px 14px 10px 38px; font-size: 12.5px; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.folder-sec:last-child .folder-empty-hint { border-bottom: 0; }
@media (max-width: 640px) {
  .folder-kids > .doc-row, .folder-kids > .folder-sec > .folder-row { padding-left: 30px; }
  .folder-kids::before { left: 19px; }
  .doc-row .row-who { display: none; }
}

/* status chips */
.status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 550; line-height: 1;
  padding: 3px 7px; border-radius: 6px; white-space: nowrap; flex: none;
}
.status-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.status-building { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.status-building i { animation: chip-pulse 2.2s ease-out infinite; }
.status-awaiting-human { color: #b45309; background: color-mix(in srgb, #b45309 14%, transparent); }
.status-blocked { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.status-done { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
@keyframes chip-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  60%, 100% { box-shadow: 0 0 0 5px transparent; }
}
@media (max-width: 640px) { .doc-row .status-chip { display: none; } }

/* skills */
.skill-badge {
  font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 99px; line-height: 1.3; flex: none;
  color: var(--purple); background: color-mix(in srgb, var(--purple) 13%, transparent);
}
.skill-glyph { color: var(--purple); }
.skill-desc {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ver-chip {
  flex: none; color: var(--ink-soft); background: var(--wash-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  padding: 3px 7px; border-radius: 6px; line-height: 1;
}
.skills-cap { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; min-height: 26px; }
.skills-cap-glyph {
  width: 19px; height: 19px; flex: none; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--purple); box-shadow: var(--shadow);
}
.skills-cap-glyph .glyph { display: inline-flex; }
.skills-cap-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
}
.skills-browse {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px; padding: 4px 2px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-faint); text-decoration: none;
  transition: color .12s;
}
.skills-browse:hover { color: var(--accent); text-decoration: underline; }
.skills-empty { padding: 40px 0; }
@media (max-width: 640px) { .skill-desc { display: none; } }

/* ---------- peek (hover preview) ---------- */
.peek-card {
  position: fixed; z-index: 60; pointer-events: none;
  width: 344px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 12px 15px 11px;
  animation: peek-in .16s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes peek-in { from { opacity: 0; transform: translateY(4px); } }
.peek-head {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
}
.peek-head .glyph { display: inline-flex; }
.peek-title {
  font-size: 12.5px; font-weight: 650; min-width: 0; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peek-h { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 4px; }
.peek-lines {
  font-size: 12px; line-height: 1.55; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.peek-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.peek-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 620; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 8px; background: var(--wash);
}
.peek-chip code { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--ink-faint); }
.peek-foot {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
@media (hover: none) { .peek-card { display: none !important; } }

/* ---------- ⌘K search palette ---------- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 18, 16, .35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 12px 12px;
  animation: palette-fade .12s ease;
}
@keyframes palette-fade { from { opacity: 0; } }
.palette {
  width: 620px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: palette-in .16s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
.palette-input-row {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
}
.palette-search-glyph { display: inline-flex; flex: none; }
.palette-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.palette-input::placeholder { color: var(--ink-faint); }
.palette-results { max-height: min(420px, 55vh); overflow-y: auto; padding: 6px; }
.palette-group-label {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.palette-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.palette-item.sel { background: var(--wash); }
.palette-item:hover { background: var(--wash); }
.palette-item-glyph { flex: none; color: var(--ink-faint); display: inline-flex; }
.palette-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.palette-item-title {
  font-size: 13.5px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-snippet {
  font-size: 12px; color: var(--ink-soft); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-snippet mark {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--ink); border-radius: 3px; padding: 0 1px;
}
.palette-item-meta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.palette-item-folder {
  font-size: 10.5px; color: var(--ink-soft); background: var(--wash-2);
  border-radius: 6px; padding: 2px 7px; max-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palette-item-meta .status-chip { font-size: 10px; padding: 2.5px 6px; }
.palette-empty { padding: 22px 14px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.palette-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint);
}
.palette-foot code { font-family: var(--mono); font-size: 10.5px; background: var(--wash-2); border-radius: 4px; padding: 1px 4px; }
.palette-keys { white-space: nowrap; }
.palette-foot kbd {
  font-family: var(--mono); font-size: 9.5px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px;
}
@media (max-width: 640px) {
  .palette-overlay { padding-top: 6vh; }
  .palette-item-meta .status-chip, .palette-item-folder { display: none; }
  .palette-keys { display: none; }
}

/* ---------- folder page ---------- */
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.crumb-home {
  flex: none; font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  padding: 6px 8px; border-radius: 8px; white-space: nowrap; text-decoration: none;
}
.crumb-home:hover { background: var(--wash); color: var(--ink); }
.crumb-sep { flex: none; color: var(--ink-faint); }
.crumb-here {
  display: inline-block; min-width: 0; max-width: 40vw;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; border-radius: 8px; padding: 5px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb-here[contenteditable]:hover { border-color: var(--line); cursor: text; }
.crumb-here[contenteditable]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.folder-page { max-width: 824px; }
.folder-page-head { margin-bottom: 18px; }
.folder-page-title {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em;
  margin: 0; line-height: 1.25;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.folder-page-title .glyph { color: var(--ink-soft); flex: none; display: inline-flex; }
.folder-page-meta {
  font-size: 12.5px; color: var(--ink-faint); margin: 9px 0 0;
  display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.folder-page-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.folder-docs-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; min-height: 28px;
}
.folder-docs-head h2 {
  font-size: 10.5px; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.folder-docs-head .head-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.fdoc-row { padding: 11px 16px; gap: 12px; }
.fdoc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fdoc-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fdoc-title-line .doc-row-title { font-size: 14px; font-weight: 600; }
.fdoc-row:hover .doc-row-title { color: var(--accent); }
.fdoc-meta {
  display: flex; align-items: center; gap: 3px 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.fdoc-meta .row-who { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-weight: 550; }
.fdoc-note { color: var(--ink-faint); }
.agent-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 4px; border-radius: 99px; line-height: 1.3; flex: none; margin-left: 4px;
  color: color-mix(in srgb, var(--purple) 75%, var(--ink-soft));
  border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent);
}
/* subfolder rows expand INLINE (founder ask) */
.fdoc-row.is-folder .folder-glyph { color: #b45309; }
.fdoc-row.is-folder[aria-expanded="true"] { background: var(--wash); border-bottom-color: transparent; }
.fdoc-row.is-folder .fold-chev { transform: rotate(90deg); }
.fdoc-row.is-folder[aria-expanded="true"] .fold-chev { transform: rotate(-90deg); }
.subdocs {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  background: var(--wash);
}
.subdocs.open { grid-template-rows: 1fr; border-bottom: 1px solid var(--line); }
.subdocs-inner { overflow: hidden; min-height: 0; }
.subdocs-list { padding: 0 0 6px; }
.srow {
  display: flex; align-items: center; gap: 10px;
  padding: 7.5px 16px 7.5px 58px;
  color: inherit; text-decoration: none; transition: background .1s;
}
.srow:hover { background: var(--wash-2); }
.srow-glyph {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink-soft);
}
.srow-glyph .glyph { display: inline-flex; }
.srow-title {
  min-width: 0; font-size: 13px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srow:hover .srow-title { color: var(--accent); }
.srow-when {
  margin-left: auto; flex: none;
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.srow .status-chip { font-size: 10px; padding: 2.5px 7px; }
.srow-open {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 16px 6px 58px;
  font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.srow-open:hover { text-decoration: underline; }
.srow-empty { display: block; margin: 2px 16px 8px 58px; font-size: 12.5px; color: var(--ink-faint); }
@media (max-width: 640px) {
  .srow { padding-left: 52px; }
  .srow-open, .srow-empty { margin-left: 52px; }
  .srow-when { display: none; }
}

/* README on top — no label, the content is the label */
.readme-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  margin: 0 0 28px; overflow: hidden;
}
.readme-top {
  display: flex; align-items: center; gap: 10px;
  padding: 17px 18px 0 24px;
}
.readme-panel.folded .readme-top { padding: 10px 12px 10px 16px; }
.readme-title {
  flex: 1; min-width: 0;
  font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 0; line-height: 1.35;
}
.readme-panel.folded .readme-title {
  font-size: 12.5px; font-weight: 550; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.readme-acts { display: inline-flex; align-items: center; gap: 6px; flex: none; opacity: 0; transition: opacity .15s; }
.readme-panel:hover .readme-acts, .readme-acts:focus-within, .readme-panel.folded .readme-acts { opacity: 1; }
.readme-open {
  font-size: 11.5px; font-weight: 550; color: var(--ink-soft);
  padding: 4px 9px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
  white-space: nowrap;
}
.readme-open:hover { color: var(--ink); border-color: var(--ink-faint); }
.readme-fold {
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  box-shadow: var(--shadow); font-size: 11px;
  transition: color .12s, border-color .12s, transform .18s ease;
}
.readme-fold:hover { color: var(--ink); border-color: var(--ink-faint); }
.readme-panel.folded .readme-fold { transform: rotate(-90deg); }
.readme-body { padding: 8px 24px 21px; }
.readme-panel.folded .readme-body { display: none; }
.readme-body p { font-size: 14px; line-height: 1.65; margin: 0 0 10px; color: var(--ink); }
.readme-body p:last-child { margin-bottom: 0; }
.readme-body code { font-size: .87em; background: var(--code-bg); border-radius: 4px; padding: 1px 5px; }
.readme-body ul, .readme-body ol { margin: 0 0 10px; padding-left: 20px; }
.readme-body li { font-size: 14px; line-height: 1.65; margin: 2px 0; }
.readme-body a { color: var(--accent); }
.readme-loading { color: var(--ink-faint); }
@media (max-width: 640px) {
  .readme-top { padding: 15px 12px 0 16px; }
  .readme-body { padding: 6px 16px 17px; }
  .readme-acts { opacity: 1; }
}

/* folder share dialog */
.share-wrap { position: relative; display: inline-flex; }
.share-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 65;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 14px; animation: palette-in .16s cubic-bezier(.2, .9, .3, 1.15);
}
.share-pop h4 {
  margin: 0 0 10px; font-size: 10px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.share-role-group { display: flex; background: var(--wash-2); border-radius: 9px; padding: 3px; gap: 2px; margin-bottom: 10px; }
.share-role-btn {
  flex: 1; padding: 6px 10px; border-radius: 7px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-soft); text-align: center;
  transition: color .12s, background .12s;
}
.share-role-btn:hover { color: var(--ink); }
.share-role-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28,27,26,.12); }
.share-url-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--wash); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 8px 7px 11px; margin-bottom: 12px;
}
.share-url-row code {
  flex: 1; min-width: 0; font-size: 11px; color: var(--ink-soft); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-mint { margin-bottom: 12px; }
.share-note { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 10px; }
.share-agent-note {
  border-top: 1px solid var(--line); padding-top: 10px; margin: 0;
  font-size: 11px; line-height: 1.6; color: var(--ink-faint);
}
.share-agent-note code {
  font-size: 10px; background: var(--wash-2); font-family: var(--mono);
  border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .share-wrap { position: static; }
  .share-pop { right: 12px; }
  .btn-share-folder { padding: 7px 11px; }
}

.folder-foot {
  margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-faint); font-family: var(--mono); line-height: 1.7;
  overflow-wrap: anywhere;
}

/* ================================================================
   AGENT PAGES — published HTML artifacts: the dashboard section,
   the row chips, and the owner wrapper view (#/page/:id).
   ================================================================ */

/* dashboard section */
.pages-sec { margin-top: 34px; }
.pages-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pages-sec-head h2 { font-size: 14px; font-weight: 650; margin: 0; }
.pages-sec-sub { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 640px) { .pages-sec-sub { display: none; } }

.page-row-glyph, .page-glyph { color: var(--blue); display: inline-flex; }
.page-kind-tag {
  font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 99px; line-height: 1.3; flex: none;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent);
}
.page-vis-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 550; line-height: 1;
  padding: 3px 7px; border-radius: 6px; white-space: nowrap; flex: none;
  color: var(--ink-soft); background: var(--wash-2);
}
.page-vis-chip.vis-public { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.page-vis-chip.vis-link { color: #b45309; background: color-mix(in srgb, #b45309 14%, transparent); }
@media (max-width: 640px) { .doc-row .page-vis-chip { display: none; } }

/* wrapper view */
.page-view { max-width: 1060px; }
.pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.pv-head-titles { min-width: 0; }
.pv-title {
  font-size: 26px; font-weight: 700; margin: 0 0 6px; line-height: 1.25;
  border-radius: 6px; outline-offset: 3px; overflow-wrap: anywhere;
}
.pv-title:hover { background: color-mix(in srgb, var(--wash) 60%, transparent); }
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.pv-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.pv-meta-kind { font-weight: 650; color: var(--blue); }
.pv-actions { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 4px; }
.pv-copy[hidden] { display: none; } /* explicit display beats the UA [hidden] rule */

/* preview */
.pv-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.pv-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--card-hi);
}
.pv-preview-label { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.pv-w-group { display: inline-flex; background: var(--wash-2); border-radius: 7px; padding: 2px; }
.pv-w-btn {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font-size: 11.5px; font-weight: 550; padding: 4px 10px; border-radius: 5px; font-family: inherit;
}
.pv-w-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.pv-stage { position: relative; background: var(--wash); padding: 0; height: min(64vh, 700px); display: flex; justify-content: center; }
.pv-stage[data-width="mobile"] { padding: 16px 0; }
.pv-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.pv-stage[data-width="mobile"] .pv-frame {
  width: 390px; max-width: 92%; border-radius: 12px;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
}
.pv-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--wash); color: var(--ink-soft); font-size: 13px;
  transition: opacity .25s; pointer-events: auto;
}
.pv-veil.gone { opacity: 0; pointer-events: none; }
.pv-veil-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--ink-soft);
  animation: pv-spin .8s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* full-screen preview: the wrapper stays trusted chrome; only the stage grows */
.pv-fullscreen { position: fixed; inset: 0; z-index: 60; border-radius: 0; display: flex; flex-direction: column; }
.pv-fullscreen .pv-stage { flex: 1; height: auto; }
.pv-noscroll { overflow: hidden; }

/* footer */
.pv-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-faint);
}
.pv-foot-note code { font-size: 11px; background: var(--wash-2); font-family: var(--mono); border-radius: 4px; padding: 1px 5px; }
.pv-delete { color: var(--red); font-size: 12px; border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-family: inherit; }
.pv-delete:hover { background: var(--red-soft); }

/* skeleton + error */
.pv-skel { border-radius: 8px; background: var(--wash); animation: pv-skel 1.4s ease-in-out infinite; }
@keyframes pv-skel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pv-skel-title { width: 280px; max-width: 60%; height: 30px; margin-bottom: 10px; }
.pv-skel-meta { width: 420px; max-width: 85%; height: 14px; margin-bottom: 22px; }
.pv-skel-frame { height: min(64vh, 700px); }
.pv-error { padding: 60px 0; }
.pv-error-head { font-size: 16px; font-weight: 650; margin: 0 0 6px; }
.pv-error-sub { color: var(--ink-soft); margin: 0 0 18px; }

/* share popover rows (visibility radio) */
.page-share-pop { width: 340px; }
.page-vis-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 9px 8px; border-radius: 8px;
}
.page-vis-row:hover { background: var(--wash); }
.page-vis-row.active { background: var(--accent-soft); }
.page-vis-row[disabled] { opacity: .55; cursor: default; }
.page-vis-dot {
  width: 14px; height: 14px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
}
.page-vis-dot.on { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--accent-soft); background: var(--accent); }
.page-vis-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-vis-text strong { font-size: 13px; }
.page-vis-text .share-desc { font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }

/* mobile */
@media (max-width: 640px) {
  .pv-head { flex-direction: column; gap: 12px; }
  .pv-actions { padding-top: 0; }
  .pv-title { font-size: 21px; }
  .pv-stage { height: 60vh; }
  .pv-preview-bar { flex-wrap: wrap; row-gap: 6px; }
  .pv-w-group { display: none; } /* the phone IS the mobile preview */
  .pv-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn-share-page { padding: 7px 11px; }
}