* { box-sizing: border-box; }

/* ============================================================================
   Fonts

   Self-hosted rather than fetched from Google. A webfont request carries the
   reader's IP and the page they are on to a third party on every load, which
   is a subprocessor to name in the privacy policy and a consent argument to
   have, in exchange for two files we can serve ourselves in 132K.

   Both families are variable, so one file spans the whole weight range and
   the 550/650 weights the design uses are real instances rather than
   synthesised ones. Latin and Latin-Extended only; the browser fetches the
   -ext file solely if the page actually uses those codepoints.
   ========================================================================= */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Design tokens
   ========================================================================= */

:root {
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #FAF9F6;
  --bg-soft: #F4F2ED;
  --card: #FFFFFF;
  --border: #E6E2DA;
  --border-soft: #F0EDE6;
  --text: #191817;
  --text-soft: #736E66;
  --accent: #4F46D6;
  --on-accent: #FFFFFF;
  --accent-tint: rgba(79, 70, 214, 0.08);
  --accent-wash: #F5F4FE;
  --hl: #FCEDBE;
  --hl-strong: #E8B93A;
  --hl-resolved: rgba(62, 142, 90, 0.14);
  --veil: rgba(250, 249, 246, 0.92);
  --shadow-1: 0 1px 2px rgba(25, 24, 23, 0.04);
  --shadow-2: 0 18px 44px rgba(25, 24, 23, 0.19);
  --success-bg: #F0F5F1;
  --success-border: #DBE8DE;

  --surface-sunken: #F2F0EA;
  --surface-footer: #F0EDE6;
  --surface-hover: #E9E5DC;
  --surface-hover-card: #F7F5F0;
  --surface-card-foot: #FCFBF9;
  --border-strong: #E0DBD1;
  --border-hover: #C9C2B5;
  --border-dashed: #D5CFC3;

  --text-body: #33302B;
  --text-mid: #4A453D;
  --text-quiet: #5E5A52;
  --text-faint: #716D64;

  --ink: #191817;
  --ink-raised: #33302B;
  --ink-line: #46423B;
  --ink-text: #FAF9F6;
  --ink-text-soft: #CFC9BE;
  --ink-accent: #FBE59B;

  --attn-bg: #FFF8E3;
  --attn-border: #F7E9C4;
  --attn-text: #7A5D0E;
  --attn-text-quiet: #82703C;
  --attn-chip: #F2C64B;
  --attn-chip-text: #3D2F06;

  --ok: #377D4F;
  --ok-bg: #F0F5F1;
  --ok-border: #DBE8DE;
  --warn-dot: #E8B93A;
  --danger: #A34A45;
  --danger-bg: #FDF0F0;
  --idle-dot: #C9C2B5;
  --sync-dot: #3E8E5A;

  --resolved-summary: #EFEDE6;

  /* ---- diff (the editor's Changes view) ---- */
  --diff-add-bg: #F0F8F2;
  --diff-add-text: #2F6B45;
  --diff-add-gutter: #5D8F72;
  --diff-del-bg: #FDF1F1;
  --diff-del-text: #8C3F3A;
  --diff-del-gutter: #A56B67;

  --av-1: #4F46D6;
  --av-2: #3E7A9E;
  --av-3: #8B5A9E;
  --av-4: #A8763C;
  --av-5: #3E8E5A;
  --av-6: #A34A45;

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 11px;
  --r-xl: 13px;
  --r-2xl: 16px;
  --r-pill: 20px;

  --rail-w: 272px;
  --pane-w: 380px;
  --measure: 640px;
  --tap: 44px;
}

:root[data-theme="dark"] {
  --bg: #1A1917;
  --bg-soft: #201E1B;
  --card: #2A2723;
  --border: #322E29;
  --border-soft: #2B2823;
  --text: #EFEBE3;
  --text-soft: #948D81;
  --accent: #9A93F5;
  --on-accent: #262626;
  --accent-tint: rgba(154, 147, 245, 0.14);
  --accent-wash: rgba(154, 147, 245, 0.12);
  --hl: rgba(242, 198, 75, 0.20);
  --hl-strong: #C79A2E;
  --hl-resolved: rgba(91, 169, 122, 0.18);
  --veil: rgba(26, 25, 23, 0.92);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55);
  --success-bg: rgba(91, 169, 122, 0.14);
  --success-border: rgba(91, 169, 122, 0.32);

  --surface-sunken: #221F1D;
  --surface-footer: #262320;
  --surface-hover: #2A2723;
  --surface-hover-card: #322E29;
  --surface-card-foot: #262320;
  --border-strong: #3B362F;
  --border-hover: #4A453D;
  --border-dashed: #3B362F;

  --text-body: #CFC9BE;
  --text-mid: #D8D2C6;
  --text-quiet: #B3ABA0;
  --text-faint: #938D82;

  --ink: #FBE59B;
  --ink-raised: #322E29;
  --ink-line: #46423B;
  --ink-text: #3D2F06;
  --ink-text-soft: #6A665F;
  --ink-accent: #3D2F06;

  --attn-bg: rgba(242, 198, 75, 0.12);
  --attn-border: rgba(242, 198, 75, 0.22);
  --attn-text: #E7C765;
  --attn-text-quiet: #9B958A;
  --attn-chip: #F2C64B;
  --attn-chip-text: #3D2F06;

  --ok: #5BA97A;
  --ok-bg: #262320;
  --ok-border: #3B362F;
  --warn-dot: #C79A2E;
  --danger: #D98C86;
  --danger-bg: rgba(163, 74, 69, 0.16);
  --idle-dot: #4A453D;
  --sync-dot: #5BA97A;

  --resolved-summary: #262320;

  --diff-add-bg: rgba(91, 169, 122, 0.13);
  --diff-add-text: #8FCBA5;
  --diff-add-gutter: #6E9C80;
  --diff-del-bg: rgba(163, 74, 69, 0.15);
  --diff-del-text: #E09B95;
  --diff-del-gutter: #B08480;

  --av-1: #9A93F5;
  --av-2: #4E93BC;
  --av-3: #B078C6;
  --av-4: #C29455;
  --av-5: #5BA97A;
  --av-6: #D98C86;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1917;
    --bg-soft: #201E1B;
    --card: #2A2723;
    --border: #322E29;
    --border-soft: #2B2823;
    --text: #EFEBE3;
    --text-soft: #948D81;
    --accent: #9A93F5;
    --on-accent: #262626;
    --accent-tint: rgba(154, 147, 245, 0.14);
    --accent-wash: rgba(154, 147, 245, 0.12);
    --hl: rgba(242, 198, 75, 0.20);
    --hl-strong: #C79A2E;
    --hl-resolved: rgba(91, 169, 122, 0.18);
    --veil: rgba(26, 25, 23, 0.92);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 18px 44px rgba(0, 0, 0, 0.55);
    --success-bg: rgba(91, 169, 122, 0.14);
    --success-border: rgba(91, 169, 122, 0.32);

    --surface-sunken: #221F1D;
    --surface-footer: #262320;
    --surface-hover: #2A2723;
    --surface-hover-card: #322E29;
    --surface-card-foot: #262320;
    --border-strong: #3B362F;
    --border-hover: #4A453D;
    --border-dashed: #3B362F;

    --text-body: #CFC9BE;
    --text-mid: #D8D2C6;
    --text-quiet: #B3ABA0;
    --text-faint: #938D82;

    --ink: #FBE59B;
    --ink-raised: #322E29;
    --ink-line: #46423B;
    --ink-text: #3D2F06;
    --ink-text-soft: #6A665F;
    --ink-accent: #3D2F06;

    --attn-bg: rgba(242, 198, 75, 0.12);
    --attn-border: rgba(242, 198, 75, 0.22);
    --attn-text: #E7C765;
    --attn-text-quiet: #9B958A;
    --attn-chip: #F2C64B;
    --attn-chip-text: #3D2F06;

    --ok: #5BA97A;
    --ok-bg: #262320;
    --ok-border: #3B362F;
    --warn-dot: #C79A2E;
    --danger: #D98C86;
    --danger-bg: rgba(163, 74, 69, 0.16);
    --idle-dot: #4A453D;
    --sync-dot: #5BA97A;

    --resolved-summary: #262320;

    --diff-add-bg: rgba(91, 169, 122, 0.13);
    --diff-add-text: #8FCBA5;
    --diff-add-gutter: #6E9C80;
    --diff-del-bg: rgba(163, 74, 69, 0.15);
    --diff-del-text: #E09B95;
    --diff-del-gutter: #B08480;

    --av-1: #9A93F5;
    --av-2: #4E93BC;
    --av-3: #B078C6;
    --av-4: #C29455;
    --av-5: #5BA97A;
    --av-6: #D98C86;
  }
}

/* ============================================================================
   Base
   ========================================================================= */

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { color: inherit; font-family: inherit; }

.ic {
  width: 15px;
  height: 15px;
  flex: none;
}

.hidden { display: none !important; }

/* Available to screen readers, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--card);
  color: var(--text);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2), 0 0 0 2px var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* One visible focus treatment for everything, keyboard-only so pointer users
   never see a ring they did not ask for. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.chip:focus-visible,
.fy-row:focus-visible,
.file:focus-visible,
.sr-row:focus-visible,
.outline-row:focus-visible { outline-offset: -2px; }
/* On the ink toolbar the accent ring disappears — use the amber instead. */
#sel-bar :focus-visible { outline-color: var(--ink-accent); }
mark.mdc-hl:focus-visible { outline-offset: 1px; }

kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
}

/* Shared quiet button used across the chrome */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  color: var(--text-soft);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

button.primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-md);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: 0.6; cursor: default; }
button.primary kbd { color: var(--on-accent); opacity: 0.75; font-size: 10px; }

#app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--pane-w);
  grid-template-rows: minmax(0, 100%);
  height: 100vh;
}

/* ============================================================================
   Left rail
   ========================================================================= */

#files-pane {
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 14px 12px;
  flex: none;
}
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--ink);
  color: var(--ink-accent);
}
.mark .ic { width: 15px; height: 15px; }
.ws-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ws-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-sub {
  font-size: 11px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-head .icon-btn { margin-left: auto; width: 26px; height: 26px; }

#search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 0 14px;
  padding: 8px 10px;
  flex: none;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color 0.12s ease;
}
#search-trigger:hover { border-color: var(--border-hover); }
#search-trigger .st-icon { display: inline-flex; color: var(--text-soft); }
#search-trigger .st-icon .ic { width: 14px; height: 14px; }
.st-label { font-size: 13px; color: var(--text-soft); }
.st-kbd { margin-left: auto; }

#for-you { padding: 14px 6px 0; flex: none; }
.rail-label {
  padding: 4px 8px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fy-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--text-mid);
  transition: background 0.12s ease;
}
.fy-row:hover { background: var(--surface-hover); }
.fy-row.attn { background: var(--attn-bg); }
.fy-row.attn:hover { filter: brightness(0.98); }
.fy-row.active { box-shadow: inset 0 0 0 1px var(--border-hover); }
.fy-row .fy-icon { display: inline-flex; color: var(--text-soft); }
.fy-row .fy-icon .ic { width: 14px; height: 14px; }
.fy-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--attn-chip);
  color: var(--attn-chip-text);
  font-size: 10.5px;
  font-weight: 800;
}
.fy-label { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-row.attn .fy-label { color: var(--attn-text); }
.fy-count { font-size: 11.5px; color: var(--text-soft); }
.fy-row.attn .fy-count { font-size: 11.5px; font-weight: 650; color: var(--attn-text); }
.fy-row:not(.attn) .fy-count:empty { display: none; }

.rail-div { height: 1px; background: var(--border); margin: 12px 14px; flex: none; }

/* ---------- file tree ---------- */

#file-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 12px;
}

.repo-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 4px 8px 6px;
  color: var(--text);
}
.repo-head:first-child { margin-top: 0; }
.repo-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 2px;
  margin: -2px;
  border-radius: var(--r-xs);
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.repo-head .chev { display: inline-flex; color: var(--text-faint); transition: transform 0.15s ease; }
.repo-head .chev .ic { width: 12px; height: 12px; }
.repo-head.open .chev { transform: rotate(90deg); }
.repo-name { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-branch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  max-width: 40%;
  margin-left: 6px;
  padding: 1px 6px 1px 5px;
  border-radius: var(--r-xs, 5px);
  background: var(--surface-hover-card, rgba(25, 24, 23, 0.05));
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-branch .ic { width: 11px; height: 11px; flex: none; color: var(--text-faint); }
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sync-dot);
  flex: none;
}
.sync-dot.idle { background: var(--idle-dot); }
.repo-head .spacer { flex: 1; }
.repo-remove, .repo-people {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--text-faint);
  border-radius: var(--r-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.repo-remove .ic, .repo-people .ic { width: 12px; height: 12px; }
.repo-head:hover .repo-remove, .repo-head:hover .repo-people { opacity: 1; }
/* Managing people is not a destructive act, so it does not turn red. */
.repo-people:hover { color: var(--text); background: var(--bg-soft); }
.repo-remove:hover { color: var(--danger); background: var(--danger-bg); }
.repo-head .repo-pill {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--attn-chip-text);
  background: var(--attn-chip);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

.dir {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px 3px 8px;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.dir-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 2px;
  margin: -2px;
  border-radius: var(--r-xs);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dir-toggle:hover { color: var(--text-soft); }
.dir .chev { display: inline-flex; color: var(--text-faint); transition: transform 0.15s ease; }
.dir .chev .ic { width: 11px; height: 11px; }
.dir.open .chev { transform: rotate(90deg); }
.dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px 6px 22px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--text-mid);
  transition: background 0.12s ease;
}
.file:hover { background: var(--surface-hover); }
.fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-card {
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(25, 24, 23, 0.05), 0 0 0 1px var(--border);
  margin: 2px 0;
  overflow: hidden;
}
.file-card .file { color: var(--text); font-weight: 650; }
.file-card .file:hover { background: var(--surface-hover-card); }

.draft-pill {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  padding: 0 4px;
  opacity: 0.85;
}
.draft-pill.review {
  color: var(--text-quiet);
  border-color: var(--border-hover);
}

.count-pill {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text-quiet);
  background: var(--surface-hover);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  flex: none;
}
.count-pill.attn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  font-weight: 700;
  color: var(--attn-chip-text);
  background: var(--attn-chip);
}

/* document outline, nested under the active file */
.outline { border-top: 1px dashed var(--border-soft); padding: 5px 9px 7px 22px; }
.outline-head {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: 0;
  background: none;
  padding: 3px 0 3px 0;
  margin-left: -13px; /* pull the chevron into the row indent */
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  cursor: pointer;
}
.outline-head:hover { color: var(--text-soft); }
.outline-head .chev { display: inline-flex; transition: transform 0.15s ease; }
.outline-head .chev .ic { width: 11px; height: 11px; }
.outline.open .outline-head .chev { transform: rotate(90deg); }
.outline-n { font-weight: 600; color: var(--text-faint); opacity: 0.8; }
.outline-sec { display: flex; align-items: center; }
.outline-sec .outline-row { flex: 1; min-width: 0; }
.outline-fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 0;
  background: none;
  color: var(--text-faint);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.outline-fold .ic { width: 11px; height: 11px; transition: transform 0.15s ease; }
.outline-fold[aria-expanded='true'] .ic { transform: rotate(90deg); }
.outline-fold:hover { color: var(--text); background: var(--surface-hover); }
.outline-row {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-soft);
  padding: 3px 0 3px 9px;
  border-left: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.outline-row.sub { padding-left: 18px; }
.outline-row:hover { color: var(--text); }
.outline-row.active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }

#add-repo-btn, #new-doc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 8px);
  margin: 12px 4px 4px;
  padding: 9px;
  border: 1px dashed var(--border-dashed);
  background: transparent;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#add-repo-btn .ic, #new-doc-btn .ic { width: 13px; height: 13px; }
#add-repo-btn:hover, #new-doc-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
/* Starting a document is the action here; connecting a repository is upkeep. */
#new-doc-btn {
  border-style: solid;
  border-color: var(--accent-tint);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}
#add-repo-btn { margin-top: 6px; }

#user-footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-footer);
}
#uf-pop {
  left: 14px;
  right: 14px;
  bottom: 50px;
  display: block;
}
.uf-note {
  display: block;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.uf-id { min-width: 0; display: flex; flex-direction: column; }
.uf-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uf-role {
  font-size: 10.5px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#user-footer .icon-btn { margin-left: auto; width: 26px; height: 26px; }

/* ============================================================================
   Document
   ========================================================================= */

#doc-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

#doc-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--veil);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  z-index: 3;
  flex: none;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-soft);
  overflow: hidden;
  white-space: nowrap;
}
.breadcrumb .crumb { overflow: hidden; text-overflow: ellipsis; }
.breadcrumb .sep { color: var(--border-hover); flex: none; }
.breadcrumb .crumb.last { color: var(--text); font-weight: 600; flex: none; }
#doc-head #edit-btn { margin-left: auto; }
#doc-head #edit-btn .ic { width: 13.5px; height: 13.5px; }

#doc-meta {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 26px 24px 0;
  width: 100%;
  font-size: 12px;
  color: var(--text-soft);
}
#doc-meta .dot { color: var(--border-hover); margin: 0 6px; }
#doc-meta .open-count { color: var(--attn-text); font-weight: 600; }

.markdown-body {
  max-width: var(--measure);
  margin: 0 auto;
  width: 100%;
  padding: 44px 24px 120px;
  font-family: var(--font-doc);
  font-size: 19.5px;
  line-height: 1.72;
  color: var(--text-body);
  text-wrap: pretty;
  animation: fade-up 0.22s ease;
}
#doc-meta:not(.hidden) + .markdown-body { padding-top: 14px; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.markdown-body h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 16px;
}
.markdown-body h2 {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 40px 0 12px;
}
.markdown-body h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 10px;
}
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-size: 17px;
  font-weight: 650;
  color: var(--text);
  margin: 26px 0 8px;
}
.markdown-body p { margin: 0 0 26px; }
.markdown-body ul, .markdown-body ol { margin: 0 0 26px; padding-left: 1.3em; }
.markdown-body li { margin-bottom: 8px; }
.markdown-body strong { font-weight: 650; color: var(--text); }
.markdown-body hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.markdown-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: border-color 0.12s ease;
}
.markdown-body a:hover { border-bottom-color: var(--accent); }

/* A link that points outside the portal, and one that points nowhere it can
   reach. Saying so beforehand beats a dead click. */
.markdown-body a.link-out::after {
  content: '↗';
  margin-left: 2px;
  font-size: 0.82em;
  vertical-align: baseline;
  opacity: 0.55;
}
.markdown-body a.link-dead {
  color: var(--text-soft);
  border-bottom-style: dotted;
  border-bottom-color: var(--border-hover);
  cursor: help;
}
.markdown-body a.link-dead:hover { border-bottom-color: var(--text-soft); }
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 0.1em 0.35em;
}
.markdown-body pre {
  position: relative;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 15px 17px;
  overflow-x: auto;
  margin: 0 0 26px;
}
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 7px);
  background: var(--card);
  color: var(--text-soft);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.code-copy .ic { width: 13px; height: 13px; }
.markdown-body pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--text); border-color: var(--border-hover); }
.code-copy.ok { opacity: 1; color: var(--ok); border-color: var(--ok); }
@media (hover: none) {
  .code-copy { opacity: 1; } /* no hover to reveal it with */
}
.markdown-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-body);
}
.markdown-body blockquote {
  margin: 0 0 26px;
  padding-left: 1em;
  border-left: 2px solid var(--border-strong);
  color: var(--text-quiet);
  font-style: italic;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 0 0 26px;
  font-family: var(--font-ui);
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 8px 14px;
  text-align: left;
}
.markdown-body th {
  background: var(--surface-sunken);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
}
.markdown-body img { max-width: 100%; }

/* ---------- draw.io sketch canvas ---------- */

#drawio-modal {
  position: fixed;
  inset: 24px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(25, 24, 23, 0.35), 0 0 0 1px var(--border);
  overflow: hidden;
}
#drawio-modal .dw-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
#drawio-modal .dw-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
#drawio-frame { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 768px) {
  #drawio-modal { inset: 0; border-radius: 0; }
}

/* ---------- diagram studio ---------- */

#diagram-form { width: min(680px, calc(100vw - 32px)); }
.dg-ai { margin-bottom: 12px; }
.dg-ai-row { display: flex; gap: 8px; }
.dg-ai-row input { flex: 1; min-width: 0; }
.dg-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  margin-bottom: 6px;
}
/* Boxes beside Arrows needs about 600px. The dialog is ~341px wide on a phone,
   so the second column simply ran off the edge: you could add boxes and never
   reach the arrows that join them, which is most of a flowchart. Stacked, both
   columns get the full width. */
@media (max-width: 768px) {
  .dg-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
.dg-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.dg-row input { flex: 1; min-width: 0; }
.dg-row select {
  flex: none;
  max-width: 110px;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 7px);
  background: var(--card);
  color: var(--text);
}
.dg-row input[data-dg-elabel] { flex: 0 1 76px; }
.dg-arrow { color: var(--text-faint); flex: none; }
.dg-x {
  display: inline-flex;
  flex: none;
  border: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px;
  border-radius: var(--r-xs);
}
.dg-x .ic { width: 11px; height: 11px; }
.dg-x:hover { color: var(--danger); background: var(--danger-bg); }
#dg-preview {
  min-height: 130px;
  max-height: 260px;
  overflow: auto;
  display: flex;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 10px;
  margin: 10px 0 4px;
}
#dg-advanced { margin: 8px 0 4px; }
#dg-advanced summary { font-size: 12px; color: var(--text-quiet); cursor: pointer; }
#dg-src {
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 7px);
  background: var(--card);
  color: var(--text);
  padding: 8px;
  resize: vertical;
}

/* Diagram cards inside the rich editor — a picture you click, never code. */
.rich-diagram {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  padding: 10px 12px;
  margin: 0 0 18px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.rich-diagram:hover { border-color: var(--accent); }
.rich-diagram .rd-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin-bottom: 6px;
}
.rich-diagram .rd-view { display: block; overflow-x: auto; }

/* ---------- mermaid diagrams ---------- */

/* The source fence stays in the DOM so comment anchors keep their offsets —
   the reader sees only the drawn figure. */
pre.mermaid-src { display: none; }
.mermaid-figure {
  margin: 0 0 26px;
  overflow-x: auto;
}

/* ---------- highlights ---------- */

mark.mdc-hl {
  background: var(--hl);
  box-shadow: inset 0 -2px 0 var(--hl-strong);
  border-radius: 2px;
  padding: 1px 0;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
mark.mdc-hl:hover { background: #FBE59B; }
mark.mdc-hl.active { box-shadow: inset 0 -3px 0 var(--hl-strong); }
mark.mdc-hl.resolved {
  background: var(--hl-resolved);
  box-shadow: inset 0 -2px 0 var(--ok);
}
mark.mdc-hl.pulse { animation: hl-pulse 1.1s ease; }
@keyframes hl-pulse {
  0% { box-shadow: inset 0 -3px 0 var(--hl-strong), 0 0 0 0 var(--hl-strong); }
  70% { box-shadow: inset 0 -3px 0 var(--hl-strong), 0 0 0 9px transparent; }
  100% { box-shadow: inset 0 -3px 0 var(--hl-strong), 0 0 0 0 transparent; }
}

/* ---------- section links ---------- */

.markdown-body h2, .markdown-body h3 { position: relative; }
.h-anchor {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.h-anchor .ic { width: 13px; height: 13px; }
.markdown-body h2:hover .h-anchor, .markdown-body h3:hover .h-anchor,
.h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { color: var(--accent); background: var(--surface-hover); }
@media (hover: none) {
  .h-anchor { display: none; } /* nothing to hover with, and no gutter to sit in */
}

/* ---------- margin notes (conversation chips in the article gutter) ---------- */

#doc-pane { position: relative; }
#margin-layer {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.margin-note {
  position: absolute;
  left: calc(100% - 6px);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(25, 24, 23, 0.07);
  font-family: var(--font-ui);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.margin-note .avatar.sm { width: 20px; height: 20px; font-size: 8.5px; }
.margin-note .mn-count {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text-soft);
  padding-right: 5px;
}
.margin-note:hover { transform: translateX(-3px); border-color: var(--border-hover); }
.margin-note.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(25, 24, 23, 0.1);
}
.margin-note.resolved { opacity: 0.55; }

/* ---------- avatars ---------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--av-2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex: none;
}
.avatar.sm { width: 24px; height: 24px; font-size: 9.5px; }

/* ============================================================================
   First run — an empty portal that asks for exactly one thing
   ========================================================================= */

#app.welcome-view { grid-template-columns: minmax(0, 1fr); }
#app.welcome-view #files-pane,
#app.welcome-view #doc-pane,
#app.welcome-view #needs-pane,
#app.welcome-view #comments-pane { display: none; }

/* Signed out: explain the thing before asking anyone to authenticate. */
#app.signin-view { grid-template-columns: minmax(0, 1fr); }
#app.signin-view #files-pane,
#app.signin-view #doc-pane,
#app.signin-view #needs-pane,
#app.signin-view #welcome-pane,
#app.signin-view #comments-pane { display: none; }

#signin-pane,
#welcome-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

/* An anchor, not a button — it is a real navigation to /auth/login, so it
   works without JavaScript and the server can set its transaction cookie. */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(79, 70, 214, 0.28);
  transition: filter 0.12s ease;
}
.cta-primary:hover { filter: brightness(1.08); }
.ms-mark {
  display: inline-grid;
  grid-template-columns: 8px 8px;
  grid-template-rows: 8px 8px;
  gap: 2px;
  flex: none;
}
.ms-mark i { display: block; }

/* Second and later providers: same shape, no fill. One primary action per
   screen, so the choice reads as a choice rather than a ranking. */
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease;
}
.cta-secondary:hover { background: var(--bg-soft, var(--card)); filter: brightness(0.98); }

#signin-options { display: flex; flex-wrap: wrap; gap: 10px; }
.si-provider { min-width: 13rem; justify-content: center; box-shadow: 0 1px 2px rgba(25, 24, 23, 0.06); }
/* A white disc under the Google mark: their guidance is that it keeps its
   colours on any surface, which a dark theme would otherwise fight. */
.g-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

.si-email { margin: 18px 0 0; max-width: 26rem; }
/* With a provider button above, this is the alternative — the rule and the
   word carry that, so the two paths do not compete for the same emphasis. */
.si-email-alt { margin-top: 22px; padding-top: 20px; position: relative; }
.si-email-alt::before {
  content: "or";
  position: absolute;
  top: -8px;
  left: 0;
  padding-right: 10px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text-soft);
}
.si-email-alt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1.9rem;
  right: 0;
  height: 1px;
  background: var(--border);
}
.si-email-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mid);
}
.si-email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.si-email-row input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.si-email-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.si-email-go { border: 0; cursor: pointer; font-family: inherit; }
.si-email-go:disabled { opacity: 0.6; cursor: default; filter: none; }
.si-sent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.si-sent svg { flex: none; color: var(--ok, var(--accent)); }
.si-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-soft); }
.si-error { color: var(--danger, #c0392b); font-weight: 500; }

.si-card {
  background: var(--card);
  border-radius: var(--r-2xl);
  padding: 22px;
  box-shadow: 0 20px 50px rgba(25, 24, 23, 0.16), 0 0 0 1px var(--border);
}
.si-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.si-card ul { margin: 0; padding: 0; list-style: none; }
.si-card li {
  position: relative;
  padding: 0 0 12px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-mid);
}
.si-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.si-private {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--attn-bg);
  font-size: 12px;
  line-height: 1.5;
  color: var(--attn-text);
}
.wp-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.wp-bar .spacer { flex: 1; }
.wp-ws { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.wp-user { font-size: 12.5px; color: var(--text-soft); }
.wp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  padding: 62px 60px;
  align-items: start;
}
.wp-left { max-width: 430px; }
.wp-left h1 {
  font-family: var(--font-doc);
  font-size: 38px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 18px;
}
.wp-lede { margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: var(--text-mid); }
.wp-steps { list-style: none; margin: 0 0 30px; padding: 0; }
.wp-steps li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mid);
}
.wp-steps b { font-weight: 650; color: var(--text); }
.wp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--attn-bg);
  color: var(--attn-text);
  font-size: 12px;
  font-weight: 700;
}
.wp-cta {
  padding: 11px 18px;
  border-radius: var(--r-lg);
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(79, 70, 214, 0.28);
}
.wp-right { min-width: 0; }

/* The connect dialog moves in here on first run instead of floating. */
#repo-form.inline {
  position: static;
  transform: none;
  width: 100%;
  animation: none;
}
#repo-form.inline #repo-cancel { display: none; }
#repo-form.inline .row { justify-content: stretch; }
#repo-form.inline .row .primary { flex: 1; justify-content: center; }
.repo-hint {
  margin: -7px 0 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.repo-hint code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-mid); }
/* The way out of a failed private clone. A link rather than a button because
   it leaves the page — but weighted like the primary action, since it is. */
.repo-gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.repo-gh-btn:hover { filter: brightness(1.06); }
.repo-gh-btn .ic { width: 15px; height: 15px; }
.repo-gh-note {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-soft);
}
.repo-hint.bad { color: var(--danger); }
.derived-pill {
  background: var(--surface-sunken);
  color: var(--text-soft);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

/* ============================================================================
   Presence
   ========================================================================= */

.presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px 3px 4px;
  border-radius: var(--r-pill);
  background: var(--surface-footer);
  animation: fade-up 0.2s ease;
}
.presence .faces { display: inline-flex; }
.presence .avatar {
  width: 21px;
  height: 21px;
  font-size: 8.5px;
  box-shadow: 0 0 0 1.5px var(--bg);
}
.presence .avatar + .avatar { margin-left: -6px; }
.presence .p-label { font-size: 11.5px; color: var(--text-quiet); white-space: nowrap; }

/* ============================================================================
   Needs you (cross-repo attention list)
   ========================================================================= */

/* With the needs list mounted there is no document, so no comments pane. */
#app.needs-view { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
#app.needs-view #comments-pane, #app.needs-view #doc-pane { display: none; }

#needs-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}
.needs-head { padding: 30px 44px 0; flex: none; }
.needs-head #needs-back { margin-bottom: 18px; }
.needs-head h1 {
  font-family: var(--font-doc);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 8px;
}
.needs-head p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 60ch;
}
.needs-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
/* The chip row takes the whole line once it wraps, so the sort control drops
   below it rather than being stranded beside a two-row block of chips. */
.needs-filters .chips { padding: 0; flex: 1 1 auto; min-width: min(100%, 420px); }
.needs-filters #needs-sort { margin-left: auto; flex: none; }

/* The needs list is a page, not a pane: it needs its own breathing room to
   collapse before the mobile breakpoint, since it can be shown in a narrow
   side-by-side window well above 768px. */
@media (max-width: 1100px) {
  .needs-head { padding: 22px 24px 0; }
  .needs-head h1 { font-size: 25px; }
  #needs-list { padding: 16px 24px 40px; }
  .ni-actions .reply-input { min-width: 100%; }
}

#needs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 44px 40px;
}
#needs-list > * { flex: none; }
.needs-group {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 10px 2px 0;
}
.needs-group .ng-repo { font-size: 12px; font-weight: 650; color: var(--text); }
.needs-group .ng-path { font-size: 12px; color: var(--text-faint); }

.needs-item {
  display: grid;
  grid-template-columns: 3px 1fr;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgba(25, 24, 23, 0.05);
  overflow: hidden;
  background: var(--card);
}
.needs-item .spine { background: var(--hl-strong); }
.needs-item.mine .spine { background: var(--accent); }
.ni-body { padding: 14px 16px; min-width: 0; }
.ni-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.ni-head .ni-name { font-size: 13px; font-weight: 650; color: var(--text); }
.ni-age { margin-left: auto; font-size: 11.5px; color: var(--text-faint); flex: none; }
.reason-pill {
  font-size: 10.5px;
  font-weight: 650;
  border-radius: var(--r-xs);
  padding: 2px 6px;
  background: var(--attn-bg);
  color: var(--attn-text);
}
.reason-pill.mine { background: var(--accent-wash); color: var(--accent); }
.ni-quote {
  margin: 0 0 10px;
  padding-left: 9px;
  border-left: 2px solid var(--hl-strong);
  font-family: var(--font-doc);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-quiet);
}
.ni-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  white-space: pre-wrap;
  margin: 0 0 12px;
  word-wrap: break-word;
}
.ni-replies {
  margin: -4px 0 12px;
  padding-left: 12px;
  border-left: 1.5px solid var(--border-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-quiet);
}
.ni-replies b { color: var(--text-mid); font-weight: 650; }
.ni-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ni-actions .reply-input { flex: 1; min-width: 140px; }
.ni-actions .primary { padding: 6px 13px; font-size: 12.5px; }

.needs-tail {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  font-size: 13px;
  color: var(--text-mid);
}
.needs-tail .ic { width: 16px; height: 16px; color: var(--ok); }

/* ============================================================================
   Comments pane
   ========================================================================= */

#comments-pane {
  position: relative;
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Drag the pane wider — room for a diagram — or narrower to read. */
#pane-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 7px;
  z-index: 15;
  cursor: col-resize;
  background: transparent;
  transition: background 0.12s ease;
}
#pane-resize::after {
  content: '';
  position: absolute;
  inset: 0 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.12s ease;
}
#pane-resize:hover::after, #pane-resize.dragging::after, #pane-resize:focus-visible::after { opacity: 0.55; }
#pane-resize:focus-visible { outline: none; }
/* While dragging, nothing else should take the pointer or select text. */
body.resizing-pane { user-select: none; cursor: col-resize; }
body.resizing-pane iframe, body.resizing-pane #article { pointer-events: none; }
@media (max-width: 1279px) {
  #pane-resize { display: none; }
}

.pane-sticky {
  flex: none;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.pane-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 15px 16px 11px;
}
.pane-title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.count { font-size: 11.5px; color: var(--text-soft); }

.chips { display: flex; gap: 5px; padding: 0 16px 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-strong);
  background: transparent;
  border-radius: var(--r-pill);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-quiet);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.chip b { font-weight: 650; color: var(--text-faint); }
.chip b:empty { display: none; }
.chip:hover { border-color: var(--border-hover); color: var(--text); }
.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-text);
  font-size: 12px;
  font-weight: 600;
}
.chip.active b { color: var(--ink-accent); }

#threads {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 12px 16px;
}
#threads .file-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 12px 4px 2px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-quiet);
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
}
#threads .file-head .ic { width: 13px; height: 13px; color: var(--text-faint); }
#threads .file-head:hover { color: var(--accent); }

/* ---------- Ask (assistant) ---------- */

/* With the assistant on, the tabs are the pane's header. */
#comments-pane.has-chat .pane-title, #comments-pane.has-chat #comments-count { display: none; }
#pane-tabs { margin: -2px 0; }

#chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#chat-bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
#chat-picker {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  border-radius: var(--r-md);
  padding: 5px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-mid);
  cursor: pointer;
  text-align: left;
}
#chat-picker:hover { border-color: var(--border-hover); color: var(--text); }
#chat-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-chev {
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-faint);
}
#chat-new .ic { width: 15px; height: 15px; }

#chat-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 12px;
  right: 12px;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(25, 24, 23, 0.18), 0 0 0 1px var(--border);
  padding: 5px;
}
.cm-head {
  padding: 7px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cm-none { padding: 2px 8px 8px; font-size: 12px; color: var(--text-faint); }
.cm-item {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: none;
  border-radius: var(--r-sm, 7px);
  padding: 7px 26px 7px 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cm-item:hover { background: var(--surface-hover); }
.cm-item.on { background: var(--accent-wash); }
.cm-title {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-item.on .cm-title { color: var(--accent); font-weight: 600; }
.cm-meta { display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.cm-del {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  opacity: 0;
}
.cm-del .ic { width: 12px; height: 12px; }
.cm-item:hover .cm-del { opacity: 1; }
.cm-del:hover { color: var(--danger); background: var(--danger-bg); }

#chat-msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.chat-hello {
  margin: auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px;
  color: var(--text-soft);
}
.chat-hello .ch-icon { color: var(--text-faint); }
.chat-hello .ch-icon .ic { width: 26px; height: 26px; }
.chat-hello strong { font-size: 13.5px; color: var(--text); }
.chat-hello p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; max-width: 320px; }
.chat-suggest {
  border: 1px solid var(--border-strong);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chat-suggest:hover { border-color: var(--accent); color: var(--accent); }
.chat-clear {
  align-self: flex-start;
  flex: none;
}
.chat-msg.user { display: flex; justify-content: flex-end; }
.chat-msg.user .chat-bubble {
  max-width: 85%;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: 14px 14px 4px 14px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.chat-msg.assistant { display: flex; flex-direction: column; gap: 6px; }
.chat-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-quiet);
}
.chat-tool .ic { width: 12px; height: 12px; flex: none; color: var(--text-faint); }
.chat-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
}
.chat-body.plain { white-space: pre-wrap; overflow-wrap: break-word; }
/* The assistant's answers reuse the document styles, scaled to the pane. */
#chat-msgs .markdown-body {
  padding: 0;
  margin: 0;
  max-width: none;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  animation: none;
}
#chat-msgs .markdown-body h1, #chat-msgs .markdown-body h2, #chat-msgs .markdown-body h3 {
  font-size: 13.5px;
  margin: 12px 0 6px;
}
#chat-msgs .markdown-body p, #chat-msgs .markdown-body ul, #chat-msgs .markdown-body ol,
#chat-msgs .markdown-body pre, #chat-msgs .markdown-body table { margin: 0 0 10px; }
#chat-msgs .markdown-body pre { padding: 10px 12px; }
#chat-msgs .mermaid-figure { margin: 0 0 10px; }
#chat-msgs .markdown-body pre code { font-size: 11.5px; }
#chat-msgs .markdown-body code { font-size: 0.9em; }
.chat-vote { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-quiet); }
.chat-vote .spacer { flex: 1; }
.cv-noted { color: var(--text-faint); }
.cv-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 3px 9px 3px 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-quiet);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.cv-doc .ic { width: 12px; height: 12px; }
.cv-doc:hover { border-color: var(--accent); color: var(--accent); }

.nd-seed-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 16px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mid);
}
.nd-seed-note .ic { width: 14px; height: 14px; flex: none; color: var(--accent); margin-top: 1px; }
.cv-btn {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: var(--r-xs);
  opacity: 0.55;
}
.cv-btn:hover { opacity: 1; background: var(--surface-hover); }
.chat-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  vertical-align: -2px;
  background: var(--accent);
  border-radius: 2px;
  animation: chat-blink 1s steps(2) infinite;
}
@keyframes chat-blink { 50% { opacity: 0; } }

#chat-form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
#chat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
}
#chat-input:focus { outline: none; border-color: var(--accent); }
#chat-send { flex: none; color: var(--accent); }

/* ---------- thread card ---------- */

.thread {
  flex: none;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(25, 24, 23, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  animation: fade-up 0.2s ease;
}
.thread:hover { box-shadow: 0 0 0 1px var(--border-hover), 0 1px 2px rgba(25, 24, 23, 0.04); }
.thread.active { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 14px rgba(79, 70, 214, 0.12); }
.thread.needs-you { box-shadow: 0 0 0 1.5px var(--accent), 0 4px 14px rgba(79, 70, 214, 0.12); }
.thread.resolved { opacity: 0.72; }

.attn-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--attn-bg);
  border-bottom: 1px solid var(--attn-border);
}
.attn-banner .at-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--attn-chip);
  color: var(--attn-chip-text);
  font-size: 10px;
  font-weight: 800;
}
.attn-banner .at-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--attn-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attn-banner .at-time { font-size: 11px; color: var(--attn-text-quiet); flex: none; }

.thread-body { padding: 11px 13px 10px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text-quiet);
  margin-bottom: 8px;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex: none; }
.status-pill .dot.waiting { background: var(--warn-dot); }
.status-pill .dot.answered { background: var(--ok); }
.status-pill .dot.decision { background: var(--accent); }
.status-pill.gone {
  background: var(--danger-bg);
  color: var(--danger);
}
.status-pill.gone .ic { width: 11px; height: 11px; }

.quote {
  margin: 0 0 10px;
  padding-left: 8px;
  border-left: 2px solid var(--hl-strong);
  font-family: var(--font-doc);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-quiet);
  overflow: hidden;
}
/* The quote doubles as the keyboard route to the highlighted passage. */
button.quote-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-doc);
  background: none;
  border: 0;
  border-left: 2px solid var(--hl-strong);
  cursor: pointer;
}
button.quote-btn:hover { color: var(--text-body); }
.thread.gone .quote {
  border-left-color: var(--border-strong);
  color: var(--text-faint);
  text-decoration: line-through;
}
.thread.resolved .quote { border-left-color: var(--ok); }

.msg { margin-bottom: 10px; }
.msg:last-child { margin-bottom: 0; }
.msg.reply {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1.5px solid var(--border-soft);
}
.msg-head { display: flex; align-items: center; gap: 7px; }
.msg .author { font-size: 12.5px; font-weight: 650; color: var(--text); }
.msg .time { font-size: 11px; color: var(--text-faint); }
.team-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-quiet);
  background: var(--surface-sunken);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}
.msg .body {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--text-body);
  white-space: pre-wrap;
  margin-top: 2px;
  word-wrap: break-word;
}
.mention { color: var(--accent); font-weight: 600; }
.msg .body a.doc-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.msg .body a.body-link { color: var(--accent); word-break: break-all; }

.thread-foot {
  display: flex;
  align-items: center;
  /* Wraps, because this row does not always fit. Reply, Agree, Disagree, a
     permalink and a menu need about 300px, and the comments pane is narrower
     than that on a small phone *and* on a desktop window around 870px wide.
     With nowrap the two icon buttons simply left the box — off the screen
     entirely at 320px, where nothing could reach them. Wrapping costs a line
     of height only when the alternative is losing the controls. */
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 2px;
  padding: 9px 13px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-card-foot);
}
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  padding: 4px 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-quiet);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.text-btn .ic { width: 13px; height: 13px; }
.text-btn:hover { background: var(--surface-sunken); color: var(--text); }
.text-btn.danger:hover { color: var(--danger); background: var(--danger-bg); }
/* Zero basis so the spacer only ever fills what is genuinely left over. Given
   a real basis it would claim the first line on its own and push both icons
   onto a second one even when they would have fitted. */
.thread-foot .spacer { flex: 1; flex-basis: 0; min-width: 0; }
/* The permalink and the menu are one group, so they wrap together rather than
   the menu peeling off onto a line by itself. The auto margin keeps them on
   the right whichever line they end up on — the spacer does that job on the
   first line, and nothing would on a wrapped one. */
.thread-foot .foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

/* ---------- decisions ---------- */

.decision-bar {
  display: flex;
  gap: 6px;
  padding: 0 13px 10px;
}
.text-btn.decide.on.accepted { color: var(--ok); background: var(--ok-bg); }
.text-btn.decide.on.rejected { color: var(--danger); background: var(--danger-bg); }
.decision-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-quiet);
  background: var(--surface-sunken);
}
.decision-note b { font-weight: 650; }
.decision-note .ic { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.decision-note.accepted { color: var(--diff-add-text); background: var(--diff-add-bg); }
.decision-note.rejected { color: var(--diff-del-text); background: var(--diff-del-bg); }
.thread-foot .icon-btn { width: 27px; height: 27px; }
.thread-foot .icon-btn:hover { background: var(--surface-sunken); }

.foot-menu { position: relative; }
.foot-menu-pop {
  position: absolute;
  right: 0;
  bottom: 32px;
  z-index: 20;
  min-width: 150px;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--border);
  padding: 4px;
  animation: pop-in 0.12s ease;
}
.foot-menu-pop button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-mid);
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.foot-menu-pop button:hover { background: var(--surface-hover-card); }
.foot-menu-pop button.danger:hover { color: var(--danger); background: var(--danger-bg); }

/* live reply row on the active / needs-you card */
.reply-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-card-foot);
}
.reply-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12.5px;
  background: var(--card);
  color: var(--text);
}
.reply-input:focus { outline: none; border-color: var(--accent); }
.reply-row .icon-btn {
  width: 30px;
  height: 30px;
  background: var(--surface-sunken);
  color: var(--text-quiet);
}
.reply-row .icon-btn:hover { background: var(--surface-hover); color: var(--text); }
/* Three buttons now share this row with the input: keep them from being
   squeezed, and let the input take whatever is left. */
.reply-row { gap: 6px; }
.reply-row .icon-btn,
.reply-row .rec-time { flex: none; }
.reply-row .icon-btn .ic { width: 15px; height: 15px; }

.resolved-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--resolved-summary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-quiet);
  cursor: pointer;
  text-align: left;
}
.resolved-summary .ic { width: 14px; height: 14px; color: var(--ok); }
.resolved-summary .rs-action { margin-left: auto; color: var(--text-faint); }

.empty {
  color: var(--text-soft);
  font-size: 13px;
  padding: 30px 18px;
  line-height: 1.6;
  text-align: center;
}
.empty .empty-icon { display: inline-flex; color: var(--text-faint); margin-bottom: 8px; }
.empty .empty-icon .ic { width: 26px; height: 26px; }
.empty strong { display: block; color: var(--text); font-size: 13.5px; font-weight: 650; margin-bottom: 3px; }

/* ============================================================================
   Floating UI
   ========================================================================= */

.floaty { position: fixed; z-index: 50; }

/* Animates `scale` and `translate` rather than `transform`, and the difference
   is not cosmetic.

   Every dialog is centred with `transform: translateX(-50%)`, and this
   animation used to set `transform` itself — `translateY(4px) scale(0.96)`,
   then `none`. Both of those *replace* the centring for as long as the
   animation runs, so a dialog opened half a width right of centre and snapped
   left when it finished. Wide enough viewport and it read as a flicker; on a
   phone the dialog spent that time hanging off the right edge.

   `scale` and `translate` are separate properties that compose with
   `transform` instead of overwriting it, so the centring survives. */
@keyframes pop-in {
  from { opacity: 0; scale: 0.96; translate: 0 4px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

/* ---------- selection action bar ---------- */

#sel-bar {
  display: flex;
  align-items: stretch;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 4px;
  box-shadow: 0 10px 28px rgba(25, 24, 23, 0.3);
  animation: pop-in 0.14s ease;
}
.sel-item, .sel-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.sel-item .si-icon { display: inline-flex; color: var(--ink-accent); }
.sel-item .si-icon .ic { width: 14px; height: 14px; }
.sel-item.soft { font-weight: 550; color: var(--ink-text-soft); }
.sel-item.soft .si-icon { color: var(--ink-text-soft); }
.sel-item + .sel-item, #sel-bar .sel-icon { border-left: 1px solid var(--ink-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sel-item + .sel-item { border-radius: 0; }
.sel-icon { width: 30px; padding: 0; justify-content: center; color: var(--ink-text-soft); }
.sel-item:hover, .sel-icon:hover { background: var(--ink-raised); }

/* ---------- composer ---------- */

#composer {
  width: 372px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 13px 14px 12px;
  animation: pop-in 0.14s ease;
}
#composer .quote { margin-bottom: 11px; max-height: 62px; }
.composer-input { display: flex; gap: 9px; align-items: flex-start; }
.ci-fields { flex: 1; min-width: 0; }
#composer input, #composer textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 5px 0;
  font-family: inherit;
  font-size: 13.5px;
  background: transparent;
  color: var(--text);
  resize: none;
}
#composer input { border-bottom-color: var(--border); margin-bottom: 4px; padding: 5px 2px; }
#composer textarea { min-height: 46px; line-height: 1.5; }
#composer input:focus, #composer textarea:focus { outline: none; }
#composer textarea::placeholder { color: var(--text-faint); }
.composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.cf-note { flex: 1; min-width: 0; font-size: 11px; color: var(--text-faint); }
.composer-foot .ghost-btn { border: 0; padding: 6px 8px; }
.composer-foot .ghost-btn:hover { background: var(--surface-hover-card); color: var(--text); }

/* ---------- attachments ---------- */

#att-mic-btn.recording,
.reply-row .icon-btn.recording {
  color: var(--danger);
  animation: rec-pulse 1.2s ease infinite;
}
@keyframes rec-pulse {
  50% { opacity: 0.45; }
}
.rec-time {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--danger);
}
#composer-atts,
.reply-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
/* Indented to line up with the reply box rather than the avatar beside it. */
.reply-atts { margin: 6px 0 0 30px; }
.p-att {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: var(--surface-sunken);
  padding: 4px 6px;
  font-size: 11.5px;
  color: var(--text-soft);
}
.p-att img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.p-att .ic { width: 13px; height: 13px; color: var(--text-faint); }
.p-att.uploading { opacity: 0.5; }
.p-att-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-att-tr { color: var(--ok); font-weight: 650; font-size: 10.5px; }
.p-att-x {
  display: inline-flex;
  border: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 2px;
}
.p-att-x .ic { width: 11px; height: 11px; }
.p-att-x:hover { color: var(--danger); }

.msg-atts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0 34px;
}
.msg.reply .msg-atts { margin-left: 32px; }
.att-img { display: inline-block; max-width: 240px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.att-img img { display: block; max-width: 100%; max-height: 180px; object-fit: cover; }
.att-img:hover { border-color: var(--border-hover); }
.att-audio { display: flex; flex-direction: column; gap: 4px; }
.att-audio audio { width: 100%; max-width: 280px; height: 34px; }
.att-tr {
  font-size: 12px;
  font-style: italic;
  color: var(--text-quiet);
  line-height: 1.5;
}

/* ---------- dialogs ---------- */

/* Centred with auto margins rather than `translateX(-50%)`, so that centring
   does not live in `transform` — which the pop-in animation needs, and which
   anything else that touches transform would silently break. With both
   insets 0 and a definite width, auto margins split the leftover space. */
#pr-form, #repo-form, #new-doc-form, #link-form, #agent-form, #diagram-form, #chat-move-form,
#members-form, #account-form, #usage-form {
  width: 420px;
  left: 0;
  right: 0;
  margin-inline: auto;
  top: 22%;
  background: var(--card);
  border-radius: var(--r-2xl);
  box-shadow: 0 20px 50px rgba(25, 24, 23, 0.16), 0 0 0 1px var(--border);
  padding: 22px;
  animation: pop-in 0.16s ease;
}
#diagram-form {
  width: min(680px, calc(100vw - 32px));
  top: 7%;
  max-height: 88vh;
  overflow-y: auto;
}
#diagram-form h3 { margin: 0 0 3px; font-size: 16px; }
#diagram-form input:not([type='file']) {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 7px);
  background: var(--card);
  color: var(--text);
}
#diagram-form input:focus, #dg-src:focus, .dg-row select:focus { outline: none; border-color: var(--accent); }
#diagram-form .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#new-doc-form {
  width: 460px;
  top: 12%;
  max-height: 82vh;
  overflow-y: auto;
}
#pr-form h3, #repo-form h3, #new-doc-form h3, #link-form h3, #agent-form h3, #members-form h3,
#account-form h3, #usage-form h3 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.form-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--text-soft); }
.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-mid);
}
#pr-form input, #pr-form textarea,
#repo-form input, #repo-form textarea,
#new-doc-form input, #new-doc-form select, #link-form input, #agent-form input, #agent-form select,
#chat-move-form input, #members-form input, #account-form input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13.5px;
  margin-bottom: 13px;
  resize: vertical;
  background: var(--bg);
  color: var(--text);
}
#pr-form input:focus, #pr-form textarea:focus,
#repo-form input:focus, #repo-form textarea:focus,
#new-doc-form input:focus, #new-doc-form select:focus, #link-form input:focus, #agent-form input:focus, #agent-form select:focus,
#chat-move-form input:focus, #members-form input:focus, #account-form input:focus {
  outline: none;
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(79, 70, 214, 0.1);
}
#pr-form .row, #repo-form .row, #new-doc-form .row, #link-form .row, #agent-form .row,
#members-form .row, #account-form .row, #usage-form .row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ---------- new document ---------- */

#nd-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
#nd-templates legend { margin-bottom: 7px; padding: 0; }
.nd-tpl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.nd-tpl:hover { border-color: var(--border-hover); background: var(--surface-hover-card); }
.nd-tpl.on { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent); }
.nd-tpl-name { font-size: 13px; font-weight: 650; color: var(--text); }
.nd-tpl.on .nd-tpl-name { color: var(--accent); }
.nd-tpl-blurb { font-size: 11.5px; line-height: 1.35; color: var(--text-soft); }

#nd-new-folder { margin-top: -4px; }

.nd-preview {
  margin: 2px 0 6px;
  font-size: 12.5px;
  color: var(--text-quiet);
}
.nd-preview code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text);
  background: var(--surface-sunken);
  padding: 1px 5px;
  border-radius: 5px;
}
.nd-preview.bad, .nd-preview.bad code { color: var(--danger); }
.nd-landing {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
}
#nd-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- connect a coding agent ---------- */

/* `top` is lifted off the shared 22% deliberately: 22 + 84 is 106vh, so on a
   800px-tall laptop the foot of a full-height dialog — here the token list and
   its Revoke buttons — sat below the fold with no way to scroll to it. */
#agent-form { width: 500px; top: 8%; max-height: 84vh; overflow-y: auto; }
.agent-config {
  margin: 0 0 10px;
  padding: 11px 13px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-body);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 210px;
  overflow-y: auto;
}
.agent-token {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
}
.agent-token span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.agent-token em { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.agent-token .ghost-btn { padding: 4px 10px; font-size: 12px; }
#agent-form .derived-pill { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }

/* ---------- @mention autocomplete ---------- */

/**
 * Above the composer (50) and the mobile comment sheet (60), because it is
 * always opened *from* a field inside one of them; below the search modal
 * (80), which it never coexists with. Sharing .floaty's z-index put it behind
 * whichever layer came later in the DOM.
 */
#mention-menu {
  z-index: 70;
  min-width: 250px;
  max-width: 320px;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--border);
  padding: 4px;
  max-height: 230px;
  overflow-y: auto;
  animation: pop-in 0.12s ease;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: none;
  padding: 7px 10px;
  font-family: inherit;
  text-align: left;
  border-radius: var(--r-md);
  cursor: pointer;
}
.mention-item.sel, .mention-item:hover { background: var(--accent-wash); }
.mention-item .m-text { min-width: 0; }
.mention-item .m-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-item .m-detail {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- search (⌘K) ---------- */

#search-modal { position: fixed; inset: 0; z-index: 80; }
#search-scrim {
  position: absolute;
  inset: 0;
  background: rgba(25, 24, 23, 0.34);
  backdrop-filter: blur(1.5px);
}
#search-panel {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  margin: 78px auto 0;
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-2xl);
  box-shadow: 0 30px 70px rgba(25, 24, 23, 0.34);
  overflow: hidden;
  animation: pop-in 0.14s ease;
}
.sp-query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border-soft);
  flex: none;
}
.sp-query .sp-icon { display: inline-flex; color: var(--text-soft); }
.sp-query .sp-icon .ic { width: 17px; height: 17px; }
#search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
}
#search-input:focus { outline: none; }
#search-input::placeholder { color: var(--text-faint); }
.sp-query kbd {
  background: var(--surface-sunken);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  flex: none;
}
#search-results { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
#search-results .empty { padding: 34px 18px; }
.sr-group {
  padding: 8px 10px 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: var(--r-md);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.sr-row:hover { background: var(--surface-hover-card); }
.sr-row.sel { background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.sr-icon { display: inline-flex; color: var(--text-faint); padding-top: 1px; }
.sr-text { min-width: 0; flex: 1; }
.sr-body {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
  overflow: hidden;
}
.sr-body .hit { background: var(--hl); border-radius: 2px; padding: 0 2px; font-style: normal; }
.sr-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-meta, .sr-dim {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The author and path share this line with a "Needs you" badge, and one of the
   two has to give when the line is too narrow. It should be the path: it is
   long, it is already abbreviated elsewhere, and a truncated path still reads
   as a path. The badge does not — on a 320px screen it was being ellipsised to
   "Ne…", which is not a word. So the path shrinks and the badge does not. */
.sr-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.sr-where {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-needs {
  flex: none;
  background: var(--attn-bg);
  color: var(--attn-text);
  font-weight: 650;
  border-radius: var(--r-xs);
  padding: 1px 5px;
}
.sp-foot {
  display: flex;
  gap: 16px;
  flex: none;
  padding: 9px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-card-foot);
  font-size: 11px;
  color: var(--text-soft);
}

/* ============================================================================
   Editor
   ========================================================================= */

#edit-banner {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 11px 15px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  color: var(--text-body);
  animation: fade-up 0.2s ease;
}
#edit-banner code { font-family: var(--font-mono); font-size: 0.9em; }
#edit-banner a { color: var(--accent); font-weight: 600; }

/* Editing is a mode, not a pane: the rail and both panes step aside. */
#app.editing { grid-template-columns: minmax(0, 1fr); }
#app.editing #files-pane,
#app.editing #doc-pane,
#app.editing #needs-pane,
#app.editing #comments-pane { display: none; }

/* The editor takes over the whole app grid: toolbar, then work area + panel. */
#editor-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  background: var(--bg);
  animation: fade-up 0.2s ease;
}
#editor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 13px 24px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
#editor-bar .spacer { flex: 1; }
.ed-lead {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-mid);
}
.ed-lead .ed-pencil { display: inline-flex; color: var(--accent); }
.ed-lead .ed-pencil .ic { width: 14px; height: 14px; }
.ed-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  background: var(--surface-hover);
  border-radius: var(--r-xs);
  padding: 3px 7px;
}
.ed-promise {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--attn-text);
  background: var(--attn-bg);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

.seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-hover);
  border-radius: var(--r-md);
}
.seg-btn {
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-quiet);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn b { font-weight: 650; color: var(--accent); }
.seg-btn b:empty { display: none; }
.seg-btn.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

#editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  flex: 1;
  min-height: 0;
}
#editor-body.no-panel { grid-template-columns: minmax(0, 1fr); }
#editor-body.no-panel #editor-side { display: none; }
#editor-main { overflow-y: auto; padding: 28px 32px 60px; min-width: 0; }
#editor-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.ed-strip {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-card-foot);
}
.ed-lang { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.ed-changed { margin-left: auto; font-size: 11.5px; color: var(--text-soft); }
#editor {
  display: block;
  width: 100%;
  min-height: 58vh;
  border: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  resize: vertical;
  background: var(--card);
  color: var(--text-body);
}
#editor:focus { outline: none; }
#editor-preview { padding: 8px 24px 24px; max-width: none; }

/* ---------- rich editor ---------- */

#rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-card-foot);
  position: sticky;
  top: 0;
  z-index: 2;
}
.rt-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rt-btn:hover { background: var(--surface-hover-card); color: var(--text); border-color: var(--border); }
.rt-btn.on { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-tint); }
.rt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rt-btn b, .rt-btn i, .rt-btn s { font-size: 13px; }
.rt-sep {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--border);
}

#rich-editor {
  min-height: 54vh;
  padding: 18px 24px 28px;
  max-width: none;
  background: var(--card);
}
#rich-editor:focus { outline: none; }
#rich-editor > :first-child { margin-top: 0; }
/* An empty document should still show where the caret is. */
#rich-editor p:empty::after { content: ''; display: inline-block; }
#rich-editor:empty::before {
  content: 'Start writing…';
  color: var(--text-soft);
}
#rich-editor a { cursor: text; }
.ed-primer {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-soft);
}
.ed-primer code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  border-radius: var(--r-xs);
  padding: 1px 4px;
}

/* ---------- diff ("Changes") ---------- */

#editor-diff {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  padding: 6px 0;
  overflow-x: auto;
}
.diff-row { display: flex; white-space: pre-wrap; word-break: break-word; }
.diff-row .dl {
  flex: none;
  width: 46px;
  padding-right: 10px;
  text-align: right;
  color: var(--text-faint);
  user-select: none;
}
.diff-row .dm { flex: none; width: 16px; text-align: center; user-select: none; }
.diff-row .dt { flex: 1; min-width: 0; padding-right: 16px; }
.diff-row.add { background: var(--diff-add-bg); color: var(--diff-add-text); }
.diff-row.add .dm, .diff-row.add .dl { color: var(--diff-add-gutter); }
.diff-row.del { background: var(--diff-del-bg); color: var(--diff-del-text); }
.diff-row.del .dm, .diff-row.del .dl { color: var(--diff-del-gutter); }
.diff-gap {
  padding: 4px 0 4px 46px;
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 11.5px;
}
.diff-empty { padding: 28px 20px; text-align: center; color: var(--text-soft); font-family: var(--font-ui); font-size: 13px; }

/* ---------- send-for-review panel ---------- */

#editor-side {
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
  padding: 24px 22px 40px;
  overflow-y: auto;
}
.es-title { margin: 0 0 4px; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.es-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
#editor-side .field-label { margin-top: 14px; }
#editor-side input, #editor-side textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13.5px;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}
#editor-side input:focus, #editor-side textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 214, 0.1);
}
.es-card {
  margin-top: 20px;
  padding: 15px 16px;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--border);
}
.es-card h3 { margin: 0 0 10px; font-size: 12.5px; font-weight: 650; color: var(--text); }
.es-card ol { margin: 0; padding: 0; list-style: none; }
.es-card li {
  position: relative;
  padding: 0 0 12px 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-quiet);
}
.es-card li:last-child { padding-bottom: 0; }
.es-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--idle-dot);
}
.es-card li:first-child::before { background: var(--accent); }
.es-card li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 15px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}
.es-card li:last-child::after { display: none; }
.es-card code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-mid); }
.es-tell {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--attn-bg);
  font-size: 12px;
  line-height: 1.5;
  color: var(--attn-text);
}
.es-send { width: 100%; justify-content: center; margin-top: 20px; padding: 11px; font-size: 14px; }
#es-conflict {
  padding: 14px 15px;
  border-radius: var(--r-lg);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
}
#es-conflict strong { display: block; color: var(--danger); margin-bottom: 5px; }
#es-conflict .row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ============================================================================
   Mobile
   ========================================================================= */

#nav-btn { display: none; }

/* Closing the discussion pane gives the reader the full page; the margin
   chips keep the conversations visible. Desktop only — on phones the pane is
   already a drawer. */
@media (min-width: 1280px) {
  #app.pane-closed { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  #app.pane-closed { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 1023px) and (min-width: 769px) {
  #app.pane-closed { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 769px) {
  #app.pane-closed #comments-pane { display: none; }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  #app { grid-template-columns: 240px minmax(0, 1fr) 320px; }
}

@media (max-width: 1023px) and (min-width: 769px) {
  #app { grid-template-columns: minmax(0, 1fr) 320px; }
  #files-pane {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    z-index: 60;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-2);
  }
  #files-pane.open { transform: translateX(0); }
  #nav-btn { display: inline-flex; }
  #scrim { position: fixed; inset: 0; background: rgba(25, 24, 23, 0.34); z-index: 55; }

  /* The rail is a fixed drawer here, so it no longer occupies a grid track.
     Without this the needs list is placed in the abandoned rail column and
     renders in a 272px sliver with the rest of the window empty. */
  #app.needs-view { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  #app { display: block; height: 100dvh; }
  #doc-pane { height: 100dvh; }

  /* ---------- dialogs on a phone ----------
     Two separate faults, and together they made the members panel unusable:
     its Add button and the × beside each person were both unreachable.

     First, layering. Below this breakpoint the panes become drawers at
     z-index 60, while every dialog is a .floaty at 50 — so opening the
     members panel from the sidebar put it *behind* the sidebar. 65 clears the
     drawers and the scrim (55) while staying under #mention-menu and
     #drawio-modal (70), which are meant to sit above a dialog. */
  .floaty { z-index: 65; }

  /* Second, width. These carry fixed pixel widths — 420, 460, 500 — all wider
     than a 390-414px phone. Centred, a dialog wider than the screen loses
     *both* edges, and the right edge is where the remove and confirm controls
     live. */
  #members-form, #account-form, #usage-form, #new-doc-form, #agent-form,
  #repo-form, #link-form, #chat-move-form, #diagram-form {
    width: min(420px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }

  /* Third, vertical placement. Most of these open at `top: 22%`, and capping
     them at 84vh put the bottom 6vh of the box below the fold — permanently,
     because a .floaty is fixed, so the page cannot be scrolled to reach it and
     scrolling *inside* the dialog only moves content within a box whose own
     foot is off-screen. On the agent panel that strip is the token list: a
     phone could mint tokens but never revoke one.

     Centred the same way the horizontal rule above does it — both insets 0 and
     auto margins — rather than with translate, which the pop-in animation
     owns. `height: fit-content` is what makes it work: with `height: auto` an
     element with both insets set stretches to fill instead of shrinking to its
     content, and auto margins would have nothing left to split. */
  #pr-form, #repo-form, #link-form, #agent-form, #chat-move-form,
  #members-form, #account-form, #usage-form, #new-doc-form, #diagram-form {
    top: 0;
    bottom: 0;
    height: fit-content;
    margin-block: auto;
    max-height: 88vh;
    overflow-y: auto;
  }

  #nav-btn, #comments-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
  }
  #comments-btn {
    background: var(--ink);
    color: var(--ink-accent);
    margin-left: auto;
  }
  #comments-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--attn-chip);
    color: var(--attn-chip-text);
    font-size: 10.5px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--bg);
  }
  #doc-head { padding: 10px 14px; gap: 10px; }
  .breadcrumb {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .breadcrumb .sep { display: none; }
  .breadcrumb .crumb { font-size: 11px; }
  .breadcrumb .crumb.last { font-size: 13.5px; font-weight: 650; order: -1; max-width: 100%; }
  #doc-head #edit-btn { margin-left: 0; padding: 8px 10px; }
  #doc-head #edit-btn .btn-label { display: none; }
  #refresh-btn { display: none; }

  #doc-meta { padding: 18px 20px 0; }
  .markdown-body { padding: 22px 20px 130px; font-size: 18px; line-height: 1.7; }
  .markdown-body h1 { font-size: 30px; }
  .markdown-body h2 { font-size: 22px; margin-top: 32px; }
  .markdown-body h3 { font-size: 18.5px; }

  /* files pane → left drawer */
  #files-pane {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 60;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-2);
  }
  #files-pane.open { transform: translateX(0); }

  /* comments pane → bottom sheet */
  #comments-pane {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: 78dvh;
    z-index: 60;
    transform: translateY(105%);
    transition: transform 0.28s ease;
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px rgba(25, 24, 23, 0.22);
  }
  #comments-pane.open { transform: translateY(0); }
  #comments-pane::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-hover);
    margin: 8px auto 0;
    flex: none;
  }
  .pane-sticky { border-radius: 22px 22px 0 0; }
  .pane-title { font-size: 16px; }
  .chip { font-size: 13px; padding: 8px 13px; }
  #threads { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .msg .body { font-size: 14.5px; line-height: 1.55; }
  .text-btn { padding: 8px 10px; font-size: 12.5px; }
  .reply-input { padding: 10px 12px; font-size: 14px; }
  .reply-row .icon-btn, .thread-foot .icon-btn { width: var(--tap); height: var(--tap); }

  #scrim {
    position: fixed;
    inset: 0;
    background: rgba(25, 24, 23, 0.32);
    z-index: 55;
  }

  #file-list .file { padding: 11px 10px 11px 22px; font-size: 14px; }
  .fy-row { padding: 11px 9px; }

  /* selection bar docks above the thumb */
  #sel-bar {
    left: 20px !important;
    right: 20px;
    top: auto !important;
    bottom: 74px;
    border-radius: var(--r-2xl);
    padding: 5px;
  }
  #sel-bar .sel-item { flex: 1; height: var(--tap); justify-content: center; font-size: 14px; }
  #sel-bar .sel-icon { width: var(--tap); }

  /* composer docks as a bottom sheet above the keyboard */
  #composer.sheet {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: auto;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    animation: sheet-up 0.22s ease;
  }
  #composer.sheet textarea { font-size: 16px; }

  /* iOS Safari zooms the whole page whenever a focused field is under 16px,
     and does not zoom back out when the field is blurred. One tap on an email
     box therefore leaves the entire app enlarged and clipped, with no obvious
     way back.
     The editor, the search box and the composer were each pinned to 16px for
     exactly this reason; the other nineteen fields — every dialog, the repo
     form, the member invite, the delete-account confirmation, the Ask box —
     were not, so the guard only held wherever somebody had remembered it.
     Here it is once, for all of them.

     The selectors are deliberately over-specified: the rules being beaten set
     font-size through id selectors, and a media query adds no specificity of
     its own, so an element selector here would simply lose. */
  #account-form input, #account-form select, #members-form input, #chat-move-form input,
  #repo-form input, #new-doc-form input, #new-doc-form select,
  #link-form input, #agent-form input, #agent-form select,
  #diagram-form input:not([type='file']), #diagram-form textarea,
  .si-email-row input,
  #editor-wrap input, #editor-wrap textarea,
  #comments-pane input, #comments-pane textarea,
  #composer input, #composer textarea,
  .dg-row select, .reply-input {
    font-size: 16px;
  }
  #repo-form, #link-form, #agent-form { width: min(420px, 92vw); }
  #new-doc-form { width: min(460px, 92vw); top: 6%; max-height: 88vh; }
  #nd-templates { grid-template-columns: 1fr; }
  #rich-toolbar { padding: 6px 8px; }
  .rt-btn { min-width: 28px; padding: 0 5px; }
  #rich-editor { padding: 16px 16px 24px; }
  #mention-menu { max-width: calc(100vw - 16px); }

  /* first run */
  #welcome-pane { height: 100dvh; }
  .wp-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 20px 60px; }
  .wp-left h1 { font-size: 28px; }
  .presence { display: none; }

  /* needs list */
  #needs-pane { height: 100dvh; }
  .needs-head { padding: 18px 20px 0; }
  .needs-head h1 { font-size: 24px; }
  #needs-list { padding: 16px 20px 40px; }
  .needs-filters { flex-wrap: wrap; }
  .ni-actions .reply-input { min-width: 100%; }

  /* editor: single column, panel stacks under the text */
  #editor-wrap { height: 100dvh; }
  #editor-bar { padding: 10px 14px; gap: 8px; }
  #editor-bar .ed-lead-text, #editor-bar .ed-promise { display: none; }
  #editor-body { display: flex; flex-direction: column; overflow-y: auto; }
  /* Grow to fill the screen. Without this the column is content-sized: the
     card took its 40vh and the remaining quarter of the phone sat empty below
     it, which on the one device where screen space is scarce is the wrong way
     round. `flex: 1 0 auto` grows into the space but never shrinks below the
     content, so the side panel still pushes the page into a normal scroll. */
  #editor-main {
    overflow: visible;
    padding: 16px 14px 0;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  #editor-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #editor-card .ed-strip { flex: none; }
  #editor-side {
    border-left: 0;
    border-top: 1px solid var(--border);
    overflow: visible;
    padding: 20px 14px calc(40px + env(safe-area-inset-bottom));
  }
  /* 16px because anything smaller makes iOS zoom the page on focus. `flex: 1`
     so the writing area takes whatever the card has left; the 40vh floor stays
     as the minimum when the side panel is open and space is genuinely tight. */
  #editor { font-size: 16px; min-height: 40vh; flex: 1; }
}

@keyframes sheet-up {
  from { transform: translateY(30%); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}

/* ============================================================================
   Toasts
   ========================================================================= */

#toasts {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--r-lg);
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 70vw;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--danger); color: #fff; }
.toast .undo {
  border: 0;
  background: none;
  color: var(--ink-accent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.toast.error .undo { color: #fff; text-decoration: underline; }

/* ============================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .markdown-body, .thread, #sel-bar, #composer, #mention-menu,
  #edit-banner, #editor-wrap, #pr-form, #repo-form, #new-doc-form, #link-form, #agent-form, .foot-menu-pop {
    animation: none;
  }
  #composer.sheet { animation: none; }
  mark.mdc-hl.pulse { animation: none; background: var(--hl-strong); }
  * { transition-duration: 0.01ms !important; }
}

/* ---- repository members ---- */
.member-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 15rem; overflow-y: auto; }
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: 0; }
.member-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.member-who b { font-size: 13px; font-weight: 600; }
.member-email {
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
/* Added, but nobody has signed in with that address yet — worth showing, so an
   owner can tell "they are here" from "they have not turned up". */
.member-waiting { background: var(--attn-bg); color: var(--text-mid); }
.member-remove {
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-soft);
  padding: 4px;
  border-radius: var(--r-md);
}
.member-remove:hover { color: var(--danger); background: var(--danger-bg); }
/* On a touch screen this is a thumb, not a cursor. 4px of padding around a
   15px glyph is a ~23px target — small enough to miss, and missing it means
   tapping the row beside it. The glyph stays the same size; only the reachable
   area grows, so nothing about the layout shifts on a desktop. */
@media (hover: none) {
  .member-remove {
    padding: 10px;
    margin: -3px -6px -3px 0;
  }
}
.member-add { margin-bottom: 10px; }
.member-add .row { gap: 8px; }
.member-add input { flex: 1; }

#members-form .member-add .row { justify-content: stretch; margin-top: 0; }
#members-form .member-add input { margin-bottom: 0; }

/* Requests waiting on the owner. Given the attention colour because they are
   the only thing in this panel that is asking for a decision. */
.member-queue { background: var(--attn-bg); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 12px; }
.member-queue h4, .member-quiet h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.member-queue .member-row, .member-quiet .member-row { border-bottom: 0; }
.member-quiet { opacity: 0.75; margin-top: 4px; }
.req-yes, .req-no, .req-clear {
  flex: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.req-yes { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.req-yes:hover { filter: brightness(1.08); }
.req-no:hover, .req-clear:hover { background: var(--bg-soft); }

/* An owner with a backlog of requests can make this panel taller than the
   window; the panel scrolls rather than running off the bottom. */
#members-form { max-height: 82vh; overflow-y: auto; top: 9%; }

/* An unread mention count reads as something to do, not as a statistic. */
.fy-row.has-unread .fy-count {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  font-weight: 700;
}

/* A repository whose credential has gone. Muted, not alarming: reading still
   works, which is most of what this product is for. */
.repo-readonly {
  flex: none;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

/* ---- your data ---- */
#account-form { max-height: 84vh; overflow-y: auto; top: 8%; }

/* ---------- assistant usage ---------- */

#usage-form { max-height: 84vh; overflow-y: auto; top: 10%; }
.usage-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.usage-big {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.usage-unit { font-size: 13px; color: var(--text-soft); }
/* The bar is the whole point of having an allowance: a number on its own does
   not say whether it is a lot. Without a ceiling there is nothing to fill, so
   the note replaces it rather than showing an empty trough that reads as
   zero. */
.usage-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.usage-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.usage-bar-fill.warm { background: var(--hl-strong); }
.usage-bar-fill.hot { background: var(--danger); }
.usage-meter-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.usage-ownkey {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--text-mid);
  font-size: 12.5px;
}
.usage-stats {
  display: flex;
  gap: 16px;
  margin: 12px 0 2px;
  font-size: 12.5px;
  color: var(--text-soft);
}
.usage-stats b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.usage-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-faint);
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
}
.usage-table th:not(:first-child), .usage-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.usage-table td { padding: 6px 0; border-bottom: 1px solid var(--border-soft); color: var(--text-mid); }
.usage-table tr:last-child td { border-bottom: none; }
.usage-table td:first-child { color: var(--text); }
.usage-warn { color: var(--danger); }

.acct-block { padding: 14px 0; border-top: 1px solid var(--border); }
.acct-block h4 { margin: 0 0 4px; font-size: 13px; font-weight: 650; }
.acct-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--text-mid); }
/* Deletion is irreversible and reads that way — but only here, not as a
   red-tinged panel that makes the export above look dangerous too. */
.acct-danger h4 { color: var(--danger); }
.acct-warn {
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--attn-bg);
  color: var(--text-mid);
}
.acct-delete-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.acct-delete-btn:hover:not(:disabled) { background: var(--danger); color: #fff; }
.acct-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--border); color: var(--text-soft); }

/* ---------- your own model key ---------- */

/* A saved key has no value to display — it is never sent back — so the state
   line carries the whole message, and a dot does the work a masked string of
   dots would only pretend to do. */
.acct-key-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-mid);
}
.acct-key-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
/* Left-aligned, unlike the dialog's own footer row: these act on the block
   above them rather than closing the dialog, and sitting where Close sits
   would suggest otherwise. Qualified by the id because the rule it has to beat
   — `#account-form .row { justify-content: flex-end }` — carries one. */
#account-form .acct-key-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}
#account-form .acct-key-row .primary,
#account-form .acct-key-row .ghost-btn { font-size: 13px; padding: 8px 14px; }
.ghost-btn.danger { color: var(--danger); border-color: var(--border); }
.ghost-btn.danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); }
.acct-key-msg { margin: 8px 0 0; }
#acct-key-provider {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 7px);
  background: var(--card);
  color: var(--text);
}
/* Monospace, because what goes in here is a machine string: a transposed
   character in a proportional font is the kind of thing you look straight
   past, and this is a field nobody can re-read once it is saved. */
#acct-key-value { font-family: var(--font-mono); letter-spacing: 0.02em; }