/* -----------------------------------------------------------------------
   Trove — base stylesheet
   Minimal, functional design for cohort alpha.
   ----------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Self-hosted IBM Plex (SIL Open Font License, static/fonts/OFL.txt). Served by the
   app itself so no reader's browser asks Google for a font while reading call content. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* Theme tokens live on `:root` and nowhere else. Declaring them on a wrapper
   element means anything rendered outside that wrapper — starting with `body`
   itself — keeps the other theme's colours, and every component you check looks
   correct while the page behind them does not.

   Three states, and the default is Auto:
     - no `data-theme`  -> follow the operating system (`prefers-color-scheme`)
     - `data-theme="light"` / `"dark"` -> the reader has chosen, and their
       choice wins in BOTH directions, which is why the dark palette is declared
       twice: once under the media query (guarded so an explicit Light beats a
       dark OS) and once under the attribute (so an explicit Dark beats a light
       OS). Neither block alone covers both.

   The full light palette is declared here on bare `:root` — no colour has its
   only definition inside a media or attribute block, or it vanishes in the
   state that block does not match. */
:root {
  --color-bg: #F5F2EA;
  --color-surface: #FBF9F4;
  --color-surface-alt: #ECE7DB;
  --color-surface-muted: #EAE4D6;
  --color-border: #D6D3CD;
  --color-border-strong: #9C9A96;
  --color-text: #161719;
  --color-text-2: #3A3936;
  --color-muted: #615F5A;
  --color-muted-soft: #8F8C85;
  --color-attrib: #6E6C66;
  --color-accent: #8E2633;
  --color-accent-hover: #6E1C27;
  --color-on-accent: #F5F2EA;
  --color-accent-bg: #EDE2DB;
  --color-accent-bg-soft: #F1EAE3;
  --color-accent-text: #8E2633;
  --color-route: #C39A42;
  --color-btn-bg: #8E2633;
  --color-btn-text: #F5F2EA;
  --color-btn-hover: #6E1C27;
  --color-btn-ring: rgba(142,38,51,.25);
  --color-danger: #B3261E;
  --color-danger-bg: #FBEDEE;
  --color-danger-border: #B3261E;
  --color-danger-text: #6E1C1C;
  --color-success: #6B5214;
  --color-useful: #8E2633;
  --color-flag: #8E2633;
  --color-success-bg: #F3DC9B;
  --color-success-bg-soft: #F3DC9B;
  --color-success-border: #A07C2E;
  --color-success-text: #161719;
  --color-info: #161719;
  --color-info-bg: #F3DC9B;
  --color-info-border: #A07C2E;
  --color-warn: #C39A42;
  --color-warn-bg: #FBF9F4;
  --color-warn-border: #C39A42;
  --focus-ring: rgba(142,38,51,.25);
  --color-focus: #8E2633;
  --shadow: none;
  /* Height of the meetings list's column header, so the month headings can
     stick directly beneath it instead of a number guessed in two places. */
  --meetings-head-h: 40px;
  /* Redesign C (2026-10-14): one face, reading text at 15px, square-ish corners. */
  --font-face: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --read: 15px;
  --radius: 3px;
  --head-h: 58px;
}

/* The dark palette, declared twice on purpose (see the comment above). Any token
   added above must be added to both blocks below, with the same value. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #161719;
    --color-surface: #1D1E21;
    --color-surface-alt: #222327;
    --color-surface-muted: #26272B;
    --color-border: #333434;
    --color-border-strong: #6B6A68;
    --color-text: #EEEAE1;
    --color-text-2: #CFCBC2;
    --color-muted: #A5A29B;
    --color-muted-soft: #8F8C85;
    --color-attrib: #8F8C85;
    --color-accent: #E08A93;
    --color-accent-hover: #ECA8AF;
    --color-on-accent: #161719;
    --color-accent-bg: #2A2325;
    --color-accent-bg-soft: #1F1C1E;
    --color-accent-text: #E08A93;
    --color-route: #C39A42;
    --color-btn-bg: #C39A42;
    --color-btn-text: #161719;
    --color-btn-hover: #D9B46A;
    --color-btn-ring: transparent;
    --color-danger: #F2A0A6;
    --color-danger-bg: #3A1F22;
    --color-danger-border: #F2A0A6;
    --color-danger-text: #F6D3D5;
    --color-success: #6B5214;
    --color-useful: #E08A93;
    --color-flag: #E08A93;
    --color-success-bg: #F3DC9B;
    --color-success-bg-soft: #F3DC9B;
    --color-success-border: #C39A42;
    --color-success-text: #161719;
    --color-info: #161719;
    --color-info-bg: #F3DC9B;
    --color-info-border: #C39A42;
    --color-warn: #C39A42;
    --color-warn-bg: #1D1E21;
    --color-warn-border: #C39A42;
    --focus-ring: rgba(212,174,94,.30);
    --color-focus: #D4AE5E;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --color-bg: #161719;
  --color-surface: #1D1E21;
  --color-surface-alt: #222327;
  --color-surface-muted: #26272B;
  --color-border: #333434;
  --color-border-strong: #6B6A68;
  --color-text: #EEEAE1;
  --color-text-2: #CFCBC2;
  --color-muted: #A5A29B;
  --color-muted-soft: #8F8C85;
  --color-attrib: #8F8C85;
  --color-accent: #E08A93;
  --color-accent-hover: #ECA8AF;
  --color-on-accent: #161719;
  --color-accent-bg: #2A2325;
  --color-accent-bg-soft: #1F1C1E;
  --color-accent-text: #E08A93;
  --color-route: #C39A42;
  --color-btn-bg: #C39A42;
  --color-btn-text: #161719;
  --color-btn-hover: #D9B46A;
  --color-btn-ring: transparent;
  --color-danger: #F2A0A6;
  --color-danger-bg: #3A1F22;
  --color-danger-border: #F2A0A6;
  --color-danger-text: #F6D3D5;
  --color-success: #6B5214;
  --color-useful: #E08A93;
  --color-flag: #E08A93;
  --color-success-bg: #F3DC9B;
  --color-success-bg-soft: #F3DC9B;
  --color-success-border: #C39A42;
  --color-success-text: #161719;
  --color-info: #161719;
  --color-info-bg: #F3DC9B;
  --color-info-border: #C39A42;
  --color-warn: #C39A42;
  --color-warn-bg: #1D1E21;
  --color-warn-border: #C39A42;
  --focus-ring: rgba(212,174,94,.30);
  --color-focus: #D4AE5E;
  --shadow: none;
}

/* The theme control: three explicit states, never a two-way cycle that leaves
   no way back to Auto. */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: transparent;
}

.theme-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 0 !important;
}

.theme-toggle button:hover { color: var(--color-text); }

.theme-toggle button[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Unauthenticated pages have no header, so the control sits on its own row
   rather than floating over the card. */
.theme-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px 0;
  display: flex;
  justify-content: flex-end;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-face);
  font-size: var(--read);
  line-height: 1.5;
}
button, input, select, textarea { font-family: var(--font-face); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------- */

/* The app bar stays pinned while you scroll (redesign C). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-strong);
  padding: 0 24px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  min-height: var(--head-h);
  gap: 28px;
}

.logo {
  font-weight: 500;
  font-size: 19px;
  color: var(--color-text);
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo i { font-style: normal; font-weight: 400; color: var(--color-muted); }

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  flex: 1;
}
.header-nav a { color: var(--color-text-2); padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .12s, color .12s; }
/* Hover previews the current-page underline in grey; the current page keeps its red one. */
.header-nav a:hover { text-decoration: none; color: var(--color-text); border-bottom-color: var(--color-border-strong); }
.header-nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.header-nav .header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; }

/* The logo is the way home (no Dashboard link since 2026-10-15), so it shows the
   nav's grey hover underline to read as a link. */
/* The underline sits under the name, not the compass, and turns red on the
   dashboard like a current nav link (Bryan, 2026-10-15). */
.logo__text { padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .12s; }
.logo:hover .logo__text, .logo:focus-visible .logo__text { border-bottom-color: var(--color-border-strong); }
.logo[aria-current="page"] .logo__text { border-bottom-color: var(--color-accent); }

/* Section icons — the treasure-map set (Bryan, 2026-10-15; app/templates/_icons.html).
   One colour, thin line, always beside the word. In the top bar on laptop
   widths only: on a phone the five words alone just fit. */
.sec-ico { display: inline-block; flex: none; overflow: visible; }
.sec-ico * { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sec-ico .dot { fill: currentColor; stroke: none; }
.sec-ico .dash { stroke-dasharray: 2.2 2.6; }
.header-nav > a { display: inline-flex; align-items: center; gap: 7px; }
.nav-ico { width: 17px; height: 17px; }
.with-ico { display: flex; align-items: center; gap: 12px; }
.title-ico { width: 30px; height: 30px; color: var(--color-text-2); }
/* The one red mark, like the logo's needle — on page titles only, never in
   the top bar (Bryan, 2026-10-15). */
.title-ico .acc { stroke: var(--color-accent); }
.title-ico .acc.dot { fill: var(--color-accent); stroke: none; }

/* Account control (signed off 2026-10-15, option 1): initials in a circle; click
   opens a menu with the email, Settings, Appearance and Log out. On Settings it
   wears the red underline a current nav link wears. */
.acct { position: relative; margin-left: auto; }
.acct-btn { display: inline-flex; align-items: center; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 4px 0; cursor: pointer; color: inherit; transition: border-color .12s; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-bottom-color: var(--color-border-strong); }
.acct-btn.is-current { border-bottom-color: var(--color-accent); }
.acct-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--color-surface-alt); border: 1px solid var(--color-border-strong);
  color: var(--color-text); font: 500 13px/1 var(--font-face); letter-spacing: .02em; }
.acct-btn:hover .avatar, .acct-btn[aria-expanded="true"] .avatar { border-color: var(--color-text-2); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; z-index: 50;
  background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 6px; font-size: 14px; }
.acct-menu[hidden] { display: none; }
.acct-who { padding: 10px 10px 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 6px; }
.acct-who .k { display: block; color: var(--color-text-2); font-size: 13px; margin-bottom: 2px; }
.acct-who .email { color: var(--color-text); overflow-wrap: anywhere; }
.header-nav .acct-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; border-bottom: 0; color: var(--color-text); }
.header-nav .acct-item:hover, .header-nav .acct-item:focus-visible { border-bottom-color: transparent; background: var(--color-surface-alt); text-decoration: none; }
.header-nav .acct-item[aria-current="page"] { color: var(--color-accent); border-bottom-color: transparent; }
.acct-item svg { width: 16px; height: 16px; flex: none; color: var(--color-text-2); }
.acct-label { padding: 10px 10px 6px; color: var(--color-text-2); font-size: 13px; }
.acct-appear { padding: 0 10px 10px; }
.acct-appear .theme-toggle { display: flex; width: 100%; }
.acct-appear .theme-toggle button { flex: 1; }
.acct-sep { height: 1px; background: var(--color-border); margin: 6px 0; }
.acct-new { margin-left: auto; font-size: 12px; }
.header-nav .acct-item[hidden] { display: none; }
.acct-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; }
.acct-confirm[hidden] { display: none; }
.acct-confirm span { flex: 1 1 100%; color: var(--color-text); }
.header-nav .acct-confirm a.btn { border-bottom: 0; color: var(--color-btn-text); padding: 5px 10px; font-size: 14px; }
.name-form .input { flex: 1 1 240px; max-width: 340px; }

.user-email {
  color: var(--color-muted);
}
.header-nav .divider { color: var(--color-muted); }

/* Narrow screens (2026-10-07): the header measured 589px at a 500px window, so
   the theme toggle sat off-screen on every page. Below 760px the row wraps —
   logo on one line, links and the toggle on the next — and the signed-in email
   is dropped (it is on the Settings page). */
@media (max-width: 760px) {
  .site-header { padding: 0 16px; }
  .header-inner { height: auto; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0; }
  .header-nav { flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
  .header-nav .header-right { margin-left: 0; }
  .nav-ico { display: none; }          /* phones: words only in the top bar */
  .title-ico { width: 24px; height: 24px; }
  .logo__text { display: none; }
  .main-content { padding: 4px 16px 48px; }
  .page-header h1, .dashboard-header h1 { font-size: 27px; }
}

/* -----------------------------------------------------------------------
   Flash messages
   ----------------------------------------------------------------------- */

/* No top margin of its own — sits directly in .main-content's own top
   padding, and once a success/info flash below finishes collapsing there is
   nothing left here to reserve space either (2026-08-12). */
.flash-messages {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.flash {
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 8px;
  font-size: 15px;
  border: 1px solid transparent;
  border-left-width: 4px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
/* A confirmation carries a tick and an error a warning sign, so neither relies on colour alone. */
.flash--success::before, .flash--info::before { content: "\2713"; font-weight: 600; color: var(--color-success); }
.flash--success, .flash--info { font-weight: 500; }
.flash--error::before { content: "\26A0"; }

.flash--error   { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.flash--success { background: var(--color-success-bg-soft); color: var(--color-success-text); border-color: var(--color-success-border); }
.flash--info    { background: var(--color-info-bg); color: var(--color-info);    border-color: var(--color-info-border); }

/* Errors stay put — something the user needs to actually read shouldn't
   vanish on a timer. Routine confirmations ("Summary generated.") self-
   dismiss: same reasoning as .date-flash (2026-08-12) — opacity alone would
   leave a full-size invisible box reserving space forever, so max-height,
   margin and border collapse together with the fade, in the last quarter. */
@keyframes flash-fade-collapse {
  0%   { opacity: 0; max-height: 60px; margin-bottom: 8px; padding-top: 10px; padding-bottom: 10px; border-width: 1px; }
  8%   { opacity: 1; }
  75%  { opacity: 1; max-height: 60px; margin-bottom: 8px; padding-top: 10px; padding-bottom: 10px; border-width: 1px; }
  100% { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}

.flash--success,
.flash--info {
  animation: flash-fade-collapse 5s ease-in-out forwards;
}

/* -----------------------------------------------------------------------
   Main content
   ----------------------------------------------------------------------- */

.main-content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

/* -----------------------------------------------------------------------
   Version footer — the always-available half of the version surface
   -----------------------------------------------------------------------
   Small, muted, on every signed-in page. No new colour tokens: --color-muted
   on --color-bg is a pair `tests/test_theme.py` already asserts in both
   palettes, so this inherits a contrast guarantee rather than needing a new
   one (and a new token would mean editing three palette blocks). */
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 24px 40px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-muted);
}

.site-footer p { margin: 0; }
.site-footer__dot { margin: 0 4px; }

.site-footer a {
  color: var(--color-muted);
  text-decoration: underline;
}

.site-footer a:hover { color: var(--color-text); }

/* -----------------------------------------------------------------------
   /whats-new — the release list and the build line
   ----------------------------------------------------------------------- */
.release { margin-bottom: 16px; }

.release__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.release__date {
  font-size: 13px;
  color: var(--color-muted);
}

/* Reuses the accent chip already used for badges elsewhere, so the running
   version reads as a state rather than as a fifth colour on the page. */
.release__badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
}

/* Below 1.0 the number already says "unfinished"; this says it in words for
   anyone who does not read version numbers that way. */
.release__status {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.release__headline {
  font-size: 15px;
  margin: 0 0 10px;
}

.release__notes {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
}

.release__notes li { margin-bottom: 4px; }

/* A theme heading inside a release. Bold, full text colour and a step above
   the notes (16px vs 15px), below the version heading (18px). Was small grey
   capitals until Bryan, 2026-10-07: "they should definitely be in bold so that
   they stand out more." */
.release__section {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 18px 0 6px;
}

.release__after {
  font-size: 13px;
  color: var(--color-muted);
  margin: 14px 0 0;
}

.build-line {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 20px;
}

/* The one-time dashboard release note. A whole-block link, so the cue on the
   right is a hint about where it goes rather than a second target to hit. */
.release-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--color-accent-bg);
  border-radius: 8px;
  background: var(--color-accent-bg-soft);
  color: var(--color-text);
  text-decoration: none;
}

.release-note:hover { border-color: var(--color-accent); }

.release-note__text { font-size: 15px; }

.release-note__cue {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-text);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Auth forms
   ----------------------------------------------------------------------- */

.auth-container {
  max-width: 440px;
  margin: 40px auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}

.auth-container--wide {
  max-width: 640px;
}

.auth-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 6px;
}

.auth-subtitle {
  color: var(--color-text-2);
  margin: 0 0 20px;
  font-size: var(--read);
}

.auth-body {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--color-muted);
}

.auth-links {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
}

.auth-links .divider {
  margin: 0 6px;
}

.auth-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

/* -----------------------------------------------------------------------
   Form fields
   ----------------------------------------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field--inline {
  flex-direction: row;
  align-items: center;
}

label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.field-hint {
  font-weight: 400;
  color: var(--color-muted);
}

input[type="email"],
input[type="password"],
input[type="text"] {
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: var(--read);
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, box-shadow .12s;
  text-decoration: none;
}

/* Oxblood in light, gold in dark (redesign C): a pink button on coal read as an error. */
.btn--primary {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-color: var(--color-btn-bg);
}
.btn--primary:hover { text-decoration: none; background: var(--color-btn-hover); border-color: var(--color-btn-hover); box-shadow: 0 0 0 3px var(--color-btn-ring); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { text-decoration: none; background: var(--color-surface-alt); border-color: var(--color-text-2); }

.btn--full { width: 100%; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------
   Recovery codes
   ----------------------------------------------------------------------- */

.recovery-codes-box {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 15px;
  background: var(--color-bg);
  border-style: dashed;
  border-color: var(--color-border-strong);
}

.recovery-code {
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.recovery-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.recovery-confirm-row {
  margin: 12px 0 16px;
}

/* -----------------------------------------------------------------------
   Dashboard
   ----------------------------------------------------------------------- */

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 6px 0 6px;
  letter-spacing: -.01em;
}

.dashboard-subtitle {
  color: var(--color-muted);
  margin: 0;
}

.empty-state-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.empty-state-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.empty-state-banner p {
  margin: 0 0 20px;
  color: var(--color-muted);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.dashboard-grid {
  display: grid;
  /* Three V1 surfaces — auto-fit so they sit in one row on a laptop and stack
     on a phone without a second breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* -----------------------------------------------------------------------
   Getting started — shown until every setup step is done
   ----------------------------------------------------------------------- */

.setup-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
}

.setup-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
}

.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setup-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  /* Steps that aren't reachable yet are legible but clearly not the next move. */
  opacity: 0.55;
}

.setup-step.is-done,
.setup-step.is-next {
  opacity: 1;
}

.setup-step strong {
  font-size: 14px;
}

.setup-step p {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 4px 0 10px;
}

.setup-step p:last-child {
  margin-bottom: 0;
}

.setup-step .btn + .btn {
  margin-left: 8px;
}

.setup-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-muted);
}

.setup-step.is-done .setup-mark {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.setup-step.is-next .setup-mark {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.setup-footnote {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.dash-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.dash-section--disabled {
  opacity: 0.6;
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Size and weight come from the shared `.card-title` rule above; only the
   layout differs, because this header sits in a flex row beside a link. */
.dash-section-header h2 {
  margin: 0;
}

.dash-recent {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-recent li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.dash-recent li:last-child {
  border-bottom: none;
}

.dash-recent a {
  font-size: 14px;
  /* Titles are user content and can be long — truncate rather than reflow the row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-recent-date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-placeholder {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

/* The button sat directly under the description with nothing between them
   (2026-08-27, Bryan). Scoped to the pair rather than added to the paragraph's
   own margin, so a `.dash-placeholder` with no button after it is unaffected. */
.dash-placeholder + .btn {
  margin-top: 14px;
}

/* -----------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------- */

.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 100px;
}

.badge--soon {
  background: var(--color-surface-alt);
  color: var(--color-muted);
}

.badge--ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* -----------------------------------------------------------------------
   Page layout (shared across meetings, settings)
   ----------------------------------------------------------------------- */

.page-header {
  padding: 22px 0 6px;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 6px 0 6px;
  letter-spacing: -.01em;
}

.page-header--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.page-subtitle {
  color: var(--color-text-2);
  margin: 4px 0 0;
  font-size: var(--read);
  max-width: 62ch;
}

.back-link {
  display: inline-block;
  font-size: 15px;
  color: var(--color-accent);
  margin-bottom: 6px;
  text-decoration: none;
}
.back-link:hover { color: var(--color-accent); }

.progress-bar-track {
  width: 100%;
  max-width: 520px;
  height: 6px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-route);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

/* --- Section headings ---------------------------------------------------
   One rule for every "Findings" / "Sparks" / "Airtime" header on the site.

   These were 15px/600 — byte-identical to `.finding__heading`, the content
   directly beneath them — so a section header and the first claim inside it
   were the same size and weight, and neither stood out (Bryan, 2026-08-25).

   The type scale now steps properly, and each level is used for exactly one
   job:

       24px/700   page title (h1)
       18px/600   section heading inside a card (.card-title)
       15px/600   a finding's claim (.finding__heading)
       13-12px    controls, meta, captions

   Change the scale here, not per page: `.card-title` and
   `.dash-section-header h2` share this rule precisely so the dashboard and the
   inner pages cannot drift apart, which is how they got here. */
.card-title,
.dash-section-header h2 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 16px;
}
/* Redesign C: a section heading is a band you can see — tinted strip, gold left edge.
   Inside a card it bleeds to the card's left edge so the strip reads as the card's top. */
.card > .card-title:first-child,
.card > h2.card-title {
  background: var(--color-surface-muted);
  border-left: 4px solid var(--color-route);
  margin: -20px -24px 18px;
  padding: 10px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-body {
  font-size: var(--read);
  color: var(--color-text-2);
  margin: 0 0 16px;
  line-height: 1.6;
}

.text-muted {
  color: var(--color-muted);
  font-size: 14px;
}
/* The error box (redesign C): pink, a warning sign and words — and it never fades. */
.err {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-left-width: 4px;
  color: var(--color-danger-text);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 12px;
  margin: 0 0 18px;
}
.err::before { content: "\26A0"; }
.err b { font-weight: 600; display: block; }
.err a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------------------------------------------------
   Upload form
   ----------------------------------------------------------------------- */

.upload-form {
  max-width: 680px;
}

textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: var(--read);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="file"] {
  font-size: 13px;
  color: var(--color-muted);
}

.field-divider {
  text-align: center;
  color: var(--color-muted);
  font-size: 13px;
  margin: 12px 0;
  position: relative;
}
.field-divider::before, .field-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 44%;
  height: 1px;
  background: var(--color-border);
}
.field-divider::before { left: 0; }
.field-divider::after  { right: 0; }

.fields-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

.upload-actions {
  margin-top: 4px;
}

.upload-note {
  font-size: 13px;
  color: var(--color-muted);
  margin: 8px 0 0;
}

.btn--wide { padding-left: 32px; padding-right: 32px; }

/* Loading state for any slow POST-and-reload form (2026-08-13) — generic on
   purpose: static/js/main.js triggers it off data-loading-note, not a
   per-page script, so a plain "the button went faint and some small text
   changed" was the actual complaint (bundling Findings into the same
   request made summary generation take noticeably longer, and the existing
   upload-page indicator wasn't drawing the eye). A spinner inside the
   button itself is what fixes that — it's the one thing on the page moving
   continuously, not a one-time text swap easy to miss if you look away. */
/* Standalone, NOT `.btn .spinner`. It was descendant-scoped to the button for
   a session, and the summarize banner's own `<span class="spinner">` therefore
   rendered nothing at all — the markup asserted a spinner and no rule drew one,
   so a batch that was genuinely working looked frozen between updates that come
   ~45s apart (Bryan, 2026-08-28: "needs a more dynamic indication that active
   summarization is happening"). `currentColor` is what lets one rule serve both
   places: white on a primary button, body text in a banner. */
.spinner {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -2px;
  opacity: 0.85;
  animation: btn-spin 0.7s linear infinite;
  /* Honest under a reduced-motion setting: still visibly a spinner, just not
     turning. Hiding it would remove the only signal that work is in flight. */
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Bumped up from .upload-note's plain muted text — this is telling someone
   their click registered and roughly how long to wait, not a footnote. */
.loading-note {
  font-size: 13px;
  color: var(--color-text);
  margin: 8px 0 0;
  font-weight: 500;
}

/* -----------------------------------------------------------------------
   Meetings list
   ----------------------------------------------------------------------- */

.meetings-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 16px;
}
.meetings-tools .meetings-filter { margin-bottom: 0; }
/* Made more visible 2026-10-07 (Bryan: "almost too subtle"): an icon, a
   stronger border, larger text, and an accent ring on focus. */
.meetings-search-wrap {
  position: relative;
  flex: 0 1 420px;
  min-width: 0;
  display: flex;
}
.meetings-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
}
.meetings-search {
  flex: 1 1 300px;
  max-width: 420px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-surface);
}
.meetings-search:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}
.meetings-search-wrap:focus-within .meetings-search-icon { color: var(--color-accent); }
/* Search hides rows and months with `hidden`; both classes set `display`, which
   ties [hidden] and wins — the trap recorded in CLAUDE.md, fourth time. */
.meeting-row[hidden], .meetings-month[hidden], .meetings-search-empty[hidden] { display: none; }
.meetings-search-empty { padding: 16px; margin: 0; font-size: 14px; color: var(--color-muted); }

.meetings-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.meetings-filter label {
  font-size: 13px;
  color: var(--color-muted);
}

.meetings-filter select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Redesign C (2026-10-14): calls hang off a gold line (`.route`), one dot per
   call, filled red when it has findings. Rows are striped and the whole row is
   the link. `clip`, NOT `hidden`: `overflow: hidden` makes this a scroll
   container, which silently stops `position: sticky` working for every month
   heading inside it. */
.meetings-list {
  overflow: clip;
}

/* ONE grid template for every row (the column header it once shared was
   dropped in C). **The summary gets the wide column, and this was backwards
   until it was measured:** a title averages 28 characters on the real corpus
   and a one-line summary 124, so the title is capped and the summary flexes.
   `align-items: start`: a wrapped two-line summary beside a one-line title has
   no shared baseline worth aligning to. */
.meetings-head,
.meeting-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 250px) minmax(0, 1fr) 110px 16px;
  align-items: start;
  gap: 4px 20px;
  padding: 14px;
}

/* A month heading is a LANDMARK, not a row: larger than a call's title, on the
   page colour, and it pins below the top bar while you scroll that month, so
   you always know where you are (C replaced the 2026-08-27 tinted band). */
.meetings-month {
  position: sticky;
  top: var(--head-h);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 0 -34px;
  padding: 18px 0 8px 34px;
  background: var(--color-bg);
}
.meetings-month h3 { font-size: 18px; font-weight: 500; line-height: 1.3; margin: 0; }

.meeting-row {
  position: relative;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: background .12s;
}
.meeting-row:hover { text-decoration: none; background: var(--color-accent-bg); }
/* The title is the row's link, stretched over the whole row by ::after, so a
   click anywhere opens the call. The project tag sits above that layer
   (z-index 1) and is its own link. The title stays dark: it heads its row. */
.meeting-row .row-link { color: var(--color-text); text-decoration: none; }
/* C's row hover underlines the title. Put it on the call title alone: on the
   whole title cell it ran under the project name too, and the row read as two
   links lit at once. The project name underlines only when it is hovered. */
.meeting-row.row:hover .title { text-decoration: none; }
.meeting-row:hover .row-link { text-decoration: underline; text-underline-offset: 3px; }
.meeting-row:has(a.proj-tag:hover) .row-link { text-decoration: none; }
.meeting-row .row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.meeting-row .row-link:focus-visible { outline: none; }
.meeting-row .row-link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.meeting-row .row-project .proj-tag { position: relative; z-index: 1; }

.meeting-row__title {
  font-size: var(--read);
  font-weight: 500;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.meeting-row__date {
  font-size: 14px;
  color: var(--color-muted);
  white-space: nowrap;
  padding-top: 2px;
}

/* Two lines, then ellipsis. Summaries run 57-192 characters, average 124, so
   nearly all show in full; a row grows only where its text needs line two. */
.meeting-row__oneline {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-2);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A row whose summary is still being written. Dimmer than a real one-liner so
   the eye reads it as absence rather than as content. */
.meeting-row__waiting {
  color: var(--color-muted-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.summarize-banner {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
  text-align: left;
}
.summarize-banner .spinner { margin-top: 4px; color: var(--color-accent); }
/* The text block holds the progress bar, so it has to take the row rather than
   shrink to the width of its longest line -- otherwise the bar stops wherever
   the sentence above it happens to end. */
.summarize-banner > div { flex: 1; }
.summarize-note {
  display: block;
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 2px;
}
/* Out-specify the rule above, or `hidden` on the failed-calls line does nothing. */
.summarize-note[hidden] { display: none; }

/* Below the header's own width the summary column costs more than it earns:
   drop it and let title and date share the row, same as the import screen. */
@media (max-width: 720px) {
  .meetings-head,
  .meeting-row {
    grid-template-columns: minmax(0, 1fr) 64px;
  }
  .meeting-row__oneline,
  .meetings-head > span:last-child { display: none; }
}

/* -----------------------------------------------------------------------
   Meeting detail
   ----------------------------------------------------------------------- */

.meeting-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}

/* The section just jumped to (from the rail's "On this page" links) flashes
   and fades, so the eye finds it even when it cannot scroll to the top. */
@keyframes section-jumped {
  0%, 17% { background-color: var(--color-accent-bg); box-shadow: 0 0 0 3px var(--color-accent); }
  100%    { background-color: transparent; box-shadow: 0 0 0 3px transparent; }
}
.section.is-jumped { animation: section-jumped 2.4s ease-out; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) {
  .section.is-jumped { animation: none; box-shadow: 0 0 0 3px var(--color-accent); }
}

.source-badge {
  font-size: 11px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  padding: 2px 7px;
  border-radius: 100px;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 680px) {
  .summary-grid { grid-template-columns: 1fr; }
}

.summary-oneline {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.summary-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
}

.summary-list--actions li::marker { content: "→ "; }

.quotes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* A quote (redesign C): a gold rule on its left, regular weight, never italic —
   long runs of italic are the readability failure Bryan named in round one. */
.quote {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--color-route);
  background: transparent;
  font-size: var(--read);
  line-height: 1.5;
  color: var(--color-text-2);
  max-width: 64ch;
}

.btn--danger-ghost {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn--danger-ghost:hover { background: var(--color-danger-bg); }

/* -----------------------------------------------------------------------
   Settings
   ----------------------------------------------------------------------- */

.settings-grid {
  max-width: 680px;
}

.api-key-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.api-key-masked {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 13px;
  color: var(--color-muted);
}

.settings-actions {
  display: flex;
  gap: 8px;
}

.btn--sm { padding: 5px 12px; font-size: 13px; }

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.usage-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-weight: 500;
}

.usage-table td {
  padding: 8px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.usage-table tfoot td {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  padding-top: 10px;
}

/* -----------------------------------------------------------------------
   Triage
   ----------------------------------------------------------------------- */

.triage-section {
  margin-bottom: 12px;
  padding: 0;
}

.triage-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.triage-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-width: 220px;
}

.triage-count {
  color: var(--color-muted);
  font-weight: 400;
}

.triage-rule {
  font-size: 12px;
  color: var(--color-muted);
  flex: 1;
}

.triage-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: var(--radius);
}
.triage-toggle:hover { background: var(--color-accent-bg); }

.triage-select-all {
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 12px;
  color: var(--color-muted);
  padding: 2px 8px;
  border-radius: var(--radius);
}
.triage-select-all:hover { background: var(--color-surface-alt); color: var(--color-text); }

.triage-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-muted);
  padding: 2px 6px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.15s;
}
.triage-row:hover .triage-dismiss { opacity: 1; }
.triage-row--dismissed { opacity: 0.4; text-decoration: line-through; pointer-events: none; }
.triage-row--dismissed .triage-dismiss { display: none; }

.triage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.triage-dot--green  { background: var(--color-success); }
.triage-dot--yellow { background: var(--color-warn); }
.triage-dot--gray   { background: var(--color-muted-soft); }

.triage-section__body {
  border-top: 1px solid var(--color-border);
}

.triage-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-surface-alt);
  font-size: 14px;
}
.triage-row:last-child { border-bottom: none; }

.triage-row .checkbox-label {
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  /* A flex item's default min-width is auto, so a long participant list in the
     sibling meta column pushes this one until the title wraps a word per line
     and the page scrolls sideways. Found 2026-08-26 on a call with fourteen
     attendees. min-width:0 is what lets a flex item actually shrink. */
  min-width: 0;
}


.triage-row__title {
  font-weight: 500;
}

.triage-row__meta {
  font-size: 12px;
  color: var(--color-muted);
  /* Was flex-shrink: 0, which is what let a long participant list push the row
     wider than the page and squash the title to one word per line. It takes
     what is left and truncates instead. */
  flex-shrink: 1;
  min-width: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 2px;
}

.triage-row__notes {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.triage-confirm-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.triage-confirm__summary {
  font-weight: 600;
  font-size: 14px;
  min-width: 180px;
}

.triage-confirm__note {
  font-size: 13px;
  color: var(--color-muted);
  flex: 1;
}

.triage-confirm__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Patterns (Phase 4)
   ----------------------------------------------------------------------- */

.window-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.window-pill {
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.window-pill:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.window-pill--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.window-pill--active:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.patterns-empty {
  text-align: center;
  padding: 48px 32px;
}

.patterns-empty__icon {
  font-size: 32px;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.patterns-empty__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.patterns-empty__sub {
  color: var(--color-muted);
  margin-bottom: 20px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.patterns-stale-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 20px;
}

.patterns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.pattern-card {
  padding: 20px;
}

.pattern-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.pattern-card__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.trend-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.trend-badge--rising  { background: var(--color-success-bg); color: var(--color-success-text); }
.trend-badge--stable  { background: var(--color-surface-alt); color: var(--color-muted); }
.trend-badge--cooling { background: var(--color-danger-bg); color: var(--color-danger); }

.pattern-pct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pattern-pct-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.pattern-pct-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pattern-pct-label {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.talk-share {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.talk-share-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.talk-share-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--color-text);
}

.talk-share-count {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.talk-share-bar-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.talk-share-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.talk-share-note {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

/* "Which voice is you?" — sits inside the Airtime card, above the bars. */
.voices {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voices__ask { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); }
.voices__why { margin: -6px 0 0; font-size: 13px; color: var(--color-muted); }
.voices__voice { display: flex; flex-direction: column; gap: 8px; }
.voices__meta { font-size: 13px; font-weight: 600; color: var(--color-text); }
.voices__line { margin: 0; }
.voices__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.voices__name-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.voices__name-form input[type="text"] { flex: 1 1 180px; max-width: 280px; }
.voices__else > summary { list-style: none; cursor: pointer; padding-top: 4px; }
.voices__else > summary::-webkit-details-marker { display: none; }
.voices__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.voices__note { margin: 0; font-size: 12px; color: var(--color-muted); }
.voices--many > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--color-muted); }
.voices--many > summary::-webkit-details-marker { display: none; }
.voices--many > summary .voices__ask { font-size: 14px; }
.voices--many:not([open]) { gap: 0; }
.voices__many-form { display: flex; flex-direction: column; gap: 16px; }
.voices__me { font-size: 13px; color: var(--color-text); display: inline-flex; align-items: center; gap: 6px; }
.voices__done {margin-top: 16px; font-size: 13px; color: var(--color-muted); display: flex; flex-direction: column; gap: 4px; }

.pattern-quote {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

/* Speaker attribution under a notable quote. Matches .pattern-quote cite so the
   two surfaces read the same; kept separate because .quote is italic and the
   attribution must not be. */
.quote-speaker {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 6px;
}

.pattern-quote cite {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 6px;
}

.divergent-section {
  margin-top: 8px;
  margin-bottom: 32px;
}

.divergent-section__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.divergent-section__sub {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.divergent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.divergent-item {
  padding: 14px 16px;
}

.divergent-item__text {
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.5;
}

.divergent-item__meta {
  font-size: 12px;
  color: var(--color-muted);
}

.patterns-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  margin-bottom: 32px;
}

/* ── Missing / editable meeting date ──────────────────────────────
   A meeting with no date is excluded from every time-window view
   (Patterns, Week in Review) but works normally everywhere else.
   Styled as a warning rather than an error for that reason. */

.no-date-badge {
  font-size: 11px;
  background: var(--color-warn-bg);
  color: var(--color-warn-border);
  border: 1px solid var(--color-warn-border);
  padding: 1px 7px;
  border-radius: 100px;
  font-weight: 500;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  /* `font: inherit` above pulls in the parent's weight too — bold when this
     sits inside <h1>, which is how the title's "Rename" link ended up bold
     (found live, 2026-08-13). A utility action link should read the same
     regardless of what heading it happens to sit next to. */
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover { color: var(--color-accent-hover); }

/* True in-place editing (2026-08-13) — the input replaces the display text
   exactly where it was, not in a separate boxed panel elsewhere on the page.
   Matches the pattern already used in Bryan's Contacts app (ContactDetail.tsx,
   the follow-up description editor: click text → text becomes an input in
   the same spot, Save/Cancel right there) and the standard "in-place editor"
   UX pattern (ui-patterns.com/patterns/InplaceEditor, PatternFly's inline-edit
   guidelines) — an earlier version of this (the same day) used a separate
   box below the field instead, which is a weaker variant of the same idea.
   One class covers every field; #title-editor and #date-editor differ only
   in the --title modifier below. */
.inline-editor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Ties the browser's own `[hidden] { display: none }` rule on specificity
   (0,1,0 each) — author CSS loads after the UA stylesheet and wins the tie,
   so `hidden` silently does nothing without this. Hit .date-editor in the
   old boxed design (2026-08-12); same fix, same reason. */
.inline-editor[hidden] {
  display: none;
}

.inline-editor input,
.inline-editor textarea {
  padding: 3px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Sits inside <h1>, so the input needs to roughly match the surrounding
   text size — a small boxed input next to 24px bold text would look like a
   mistake, not an edit control. */
/* A meeting title can run long (up to 512 chars — see set_title), so this
   variant stretches to fill the row instead of a fixed width that clips it
   (found live, 2026-08-13: a real title cut off after ~35 characters, then
   again after 760px — 760 was still an arbitrary cap tighter than the page
   itself allows). No max-width of its own now: .main-content already caps
   the whole page at 1100px, so this can't run away on a wide monitor either.
   Block flex, not the base class's inline-flex, so it actually claims the
   row's width inside <h1>; min-width: 0 on the input is required for a flex
   child to shrink/grow correctly instead of refusing to go below its
   content size. */
.inline-editor--title {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.inline-editor--title textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow: hidden;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

/* Same shape as .project-flash — small fading text, no box, since neither
   editor next to it has a box anymore either. */
@keyframes inline-flash-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Inline confirmations (title, date, project): C's bright gold box with a tick,
   visible 3 seconds, then a short fade that also gives the space back
   (Bryan: 8 seconds was too long; C decided 3s inline). Never for errors. */
@keyframes inline-confirm {
  0%   { opacity: 0; max-height: 60px; }
  6%   { opacity: 1; }
  82%  { opacity: 1; max-height: 60px; margin-top: 6px; padding-top: 4px; padding-bottom: 4px; border-width: 1px; }
  100% { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
.inline-flash, .project-flash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-success-text);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-left-width: 4px;
  border-radius: 0 var(--radius) var(--radius) 0;
  animation: inline-confirm 3.6s ease-in-out forwards;
}
.inline-flash::before, .project-flash::before { content: "\2713"; color: var(--color-success); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .inline-flash, .project-flash { animation-timing-function: steps(1, end); } }

.meta-note {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* Same shape as .date-editor, neutral tokens instead of warn — adding a
   project is a routine choice, not something to fix. */
/* Inline in the meeting-meta row now (2026-08-12), not a separate boxed
   panel — no background/border/padding of its own, just lays its own
   controls out horizontally as one item in that row's flex layout. */
.project-editor[hidden] { display: none; }   /* behind "Change" since 2026-10-15 */
.project-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Forces everything from here on (Project, its confirmation flash, "Remove
   meeting") onto a fresh row every time, instead of wrapping wherever
   .meeting-meta happens to run out of width — which put Project on line 1
   for a short title and line 2 for a long one, no two meetings alike (found
   live, 2026-08-12). flex-basis: 100% on this empty breaker, not on
   .project-editor itself — putting it directly on .project-editor was tried
   first and swallowed the whole row for itself alone, pushing "Remove
   meeting" onto a stray third line instead of sharing row 2 with it. */
.meta-break {
  flex-basis: 100%;
  height: 0;
}

.project-editor select,
.project-editor input[type="text"] {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Confirmation for a project change, rendered inline instead of the
   page-wide flash banner (2026-08-12) — fades in, holds, fades out, pure
   CSS. Reuses the "link on page" contrast pair (--color-accent on
   --color-bg) rather than adding a new one. */
@keyframes project-flash-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}



/* Always visible (unlike the conditional date-editor box), pushed to the
   far right of the same always-shown meta row via margin-left: auto —
   was a standalone button pinned next to the page title, disconnected
   from everything else on the page (found live, 2026-08-12). */
.remove-meeting-form {
  margin-left: auto;
}

.project-badge {
  font-size: 11px;
  background: var(--color-accent-bg);
  color: var(--color-accent-text);
  padding: 2px 7px;
  border-radius: 100px;
  text-decoration: none;
}

/* Only the detail-page badge is a link — a list-page badge would nest an
   <a> inside the row's own <a>, which is invalid HTML. */
a.project-badge:hover {
  background: var(--color-accent-bg-soft);
}

.undated-notice {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.regen-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
}
.regen-prompt form { margin: 0; }

/* -----------------------------------------------------------------------
   Sparks feed
   ----------------------------------------------------------------------- */

.sparks-counts {
  font-size: 13px;
  color: var(--color-muted);
  margin: -8px 0 16px;
}

.sparks-shown {
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 16px;
}

.spark-group { margin-bottom: 16px; }

.spark-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.spark-group__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.spark-group__title:hover { color: var(--color-accent); }

.spark-group__date {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

/* The kind is carried by a left border rather than a badge: two values do not
   warrant a legend, and a quote should be the loudest thing in its own row. */
.spark--memorable { border-left-color: var(--color-accent); }
.spark--consequential { border-left-color: var(--color-info); }

.spark-more { margin-top: 4px; }

.spark-more > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-accent);
  padding: 4px 0;
}
.spark-more > summary:hover { text-decoration: underline; }
.spark-more > .quotes-list { margin-top: 12px; }

.spark-more__floor {
  font-size: 12px;
  color: var(--color-muted);
  margin: 12px 0 0;
}

.spark-held {
  font-size: 12px;
  color: var(--color-muted);
  margin: 4px 0 0;
}

/* -----------------------------------------------------------------------
   Findings
   ----------------------------------------------------------------------- */

.finding-group { margin-bottom: 16px; }

.finding {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.finding:last-child { border-bottom: none; padding-bottom: 0; }

/* Layer 1 — the interpretation. Weighted as the headline because it is what
   the reader is being asked to judge. */
.finding__heading {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 6px;
}

/* Layer 2 — what was said, in reporting register. Deliberately quieter than
   the heading but not hidden: it is what makes the heading checkable without
   opening anything, so burying it in a disclosure would defeat its purpose. */
.finding__reported {
  font-size: 13.5px;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}

.finding__evidence > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-accent);
  padding: 2px 0;
}
.finding__evidence > summary:hover { text-decoration: underline; }
.finding__evidence > .quotes-list { margin-top: 10px; }

.finding__note {
  font-size: 12px;
  color: var(--color-muted);
  margin: 0 0 8px;
}

.finding-stale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}
.finding-stale-banner form { margin: 0; }

.finding__scope {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px 7px;
  margin-bottom: 8px;
}

/* One quote plus its own Flag control — replaces the single flag that used
   to sit once per finding (2026-08-11). Red and iconed, not the standard
   accent-coloured .btn-link: too subtle at first, twice, once at the
   smaller size and again in plain accent colour — found by Bryan looking
   at it live both times. --color-danger is the same token error flashes
   and the danger-ghost button already use, so this reads as "this is a
   report/warning action" rather than inventing a new colour meaning.

   summary.quote-flag, not .quote-flag: this element also carries .btn-link,
   which sets its own color later in this file. Two equal-specificity class
   selectors resolve by source order, not by which one "sounds" more
   specific to the change being made — the red lost to .btn-link's accent
   purple the first time round. The extra element qualifier here outranks
   it regardless of where either rule sits, so this can't silently regress
   if the file gets reordered later. */
.quote-item .dismiss { margin-top: 6px; }
summary.quote-flag {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-danger);
}

/* A stale finding keeps its claim and loses its evidence. Muted rather than
   hidden — removing it would be deleting the user's own history. */
.finding--stale .finding__heading { color: var(--color-muted); }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-accent);
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.candidate:last-child { border-bottom: none; }
.candidate form { margin: 0; }

/* -----------------------------------------------------------------------
   Ask
   ----------------------------------------------------------------------- */

.ask-form { margin-bottom: 16px; }

.ask-form__scope {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ask-form__scope { flex-wrap: wrap; }
.ask-call-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 320px; min-width: 0; }
.ask-call-pick[hidden] { display: none; }   /* a class with display ties [hidden] — see CLAUDE.md */
.ask-call-pick input[type="search"] { flex: 0 1 300px; min-width: 0; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-size: 14px; }
.ask-call-pick select { flex: 1 1 200px; min-width: 0; max-width: 100%; }
/* The project list sits where the find-a-call box sits for One call — same width (Bryan, 2026-10-07). */
.ask-form__scope select[name="project_id"] { flex: 0 1 320px; min-width: min(280px, 100%); }
.ask-asked { margin: 0 0 8px; }
/* "Ask more about this call →" — beside each call an answer names (2026-10-07). */
.ask-more { margin-left: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.candidate .ask-more { margin-left: auto; }
.ask-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.ask-next__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ask-next__form .loading-note { flex-basis: 100%; margin: 0; }
.ask-next__note { font-size: 12px; }
.ask-next__followup { font-size: 13px; font-weight: 600; }
/* Once pressed, only the spinner and "Checking the whole conversation…" remain:
   the cost note and the other links mattered before the click, not during it
   (Bryan, 2026-10-07: "that seems duplicative"). main.js adds .is-working. */
.is-working .ask-next__note,
.is-working .ask-form__note,
.ask-next.is-working .ask-next__followup { display: none; }
.ask-coverage[hidden] { display: none; }

.ask-form__scope label {
  font-size: 13px;
  color: var(--color-muted);
}

.ask-form__scope select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-surface);
}

.ask-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
}
.ask-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.ask-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ask-form__note { font-size: 12px; }

.ask-answer__text {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.ask-answer__question {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.ask-citations { margin-top: 14px; }

/* A flagged claim is louder than the answer it sits under, on purpose: the
   whole point is that it must not be read past. */
.ask-flag {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-warn-border);
  background: var(--color-warn-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  line-height: 1.55;
}

.ask-cost {
  font-size: 12px;
  margin-top: 4px;
}

/* Ask about this call — the same form, inside a call-page card. The coverage
   line was referenced by the Ask page before it had a rule of its own. */
.ask-form--inline { margin-bottom: 0; }
.ask-coverage { font-size: 13px; margin: 8px 0 0; }
#ask .ask-answer { margin-top: 16px; }
.ask-call-error {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--color-danger);
}

/* -----------------------------------------------------------------------
   Dismiss-with-a-reason (PRD §5.3)
   ----------------------------------------------------------------------- */

.dismiss summary {
  cursor: pointer;
  list-style: none;
}
.dismiss summary::-webkit-details-marker { display: none; }

.dismiss__panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius);
}

.dismiss__q {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.dismiss__reason {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  padding: 5px 0;
  cursor: pointer;
}

.dismiss__reason span { color: var(--color-muted); }
.dismiss__reason strong { color: var(--color-text); font-weight: 600; }

.dismiss__note {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--color-muted);
}

.dismiss__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* -----------------------------------------------------------------------
   Shared feedback, listed in Settings so it stays revocable
   ----------------------------------------------------------------------- */

.feedback-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.feedback-row:last-child { border-bottom: none; }

.feedback-row__text {
  font-size: 13px;
  color: var(--color-muted);
  margin: 4px 0 0;
}

.feedback-row__meta {
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Cross-call Findings ─────────────────────────────────────────────────
   Evidence on a project finding is grouped by call rather than listed flat.
   The grouping is load-bearing, not decorative: a claim about several calls
   whose visible evidence all came from one of them is verbatim and misleading
   at once, and the call heading is what lets a reader see for themselves
   whether two calls were the same kind of conversation — the comparability
   check this app deliberately does not ask a model to make. */
.evidence-call {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--color-border);
}
.evidence-call:first-child { margin-top: 8px; }

.evidence-call__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 14px;
  column-gap: 14px;
}
/* A call's title heading a block is dark text at weight 500, as on Meetings,
   the dashboard and Sparks; red is for links inside a line (2026-10-15 —
   this was red at 600, the only call title in the app styled that way).
   Same size as the Sparks page's call titles: 17px (Bryan, 2026-10-15). */
.evidence-call__head a { font: 500 17px/1.35 var(--font-face); color: var(--color-text); }
.evidence-call__head a:hover { color: var(--color-accent); }

.evidence-call__date {
  font-size: 14px;
  color: var(--color-text-2);
}

/* What the citations turned out to show, computed from their speakers rather
   than taken from the model. "Repeated" is deliberately plain: it is a true
   and legitimate result, just the least informative one, and it is ranked
   last rather than hidden. */
.finding__kind {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .02em;
  border-radius: var(--radius);
  padding: 2px 7px;
  margin-bottom: 8px;
  background: var(--color-surface-alt);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.finding__kind--engagement {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.finding-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.finding-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  flex: 1 1 260px;
}
.finding-empty form { margin: 0; }

/* ── Finding a project's own page ─────────────────────────────────────────
   Three entry points, none of them in the nav. A project badge means "filter
   the list to this project" — the convention every tagged app uses, and what
   it has meant here since 2026-08-12 — so the page needs its own labelled
   links rather than repointing a control that already means something else. */

/* On the meetings list, when filtered to a real project: names what you are
   looking at and carries the route onward, in the place the eye already goes.
   Replaces a small inline link beside the filter dropdown, which read as an
   afterthought attached to a form control. */
.project-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.project-banner__label {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.project-banner__name {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
}

/* In the footer of a meeting's Findings card. Sits directly under what THIS
   call showed, so the contrast between the two scopes is visible in one glance
   rather than inferred from two identically-worded controls — which is what it
   was before 2026-08-25, when this link lived in the meta row next to the jump
   nav's "Findings" pill. Muted and rule-separated so it reads as a footnote to
   the card, not a second action competing with "Draw findings". */
.finding-scope-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-muted);
}
.finding-scope-note a { white-space: nowrap; }

/* On the dashboard — the one route a person can find without already knowing
   the page exists, since both others need you to be inside a call first. */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.project-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.project-row:hover { background: var(--color-surface-alt); }
.project-row__name { font-weight: 600; }
.project-row__meta {
  font-size: 13px;
  color: var(--color-muted);
}

/* --- Keep / per-quote flag (2026-08-25) ---------------------------------
   Two controls at two levels, and they must not read as a matched pair:
   Flag hides a finding, Keep does not hide anything. Same size and weight so
   neither shouts, different colours so neither is mistaken for the other.

   `button.quote-flag` and `button.finding-keep` carry the element qualifier
   for the reason recorded above `summary.quote-flag`: both also carry
   `.btn-link`, which sets its own colour later in this file, and two
   equal-specificity class selectors resolve by source order. The qualifier
   outranks it wherever either rule ends up. */
.quote-flag-form {
  margin: 4px 0 0;
}

/* Red for the negative control, green for the positive — the convention the
   whole web already teaches, so nobody has to learn this page's version of it.

   Safe here ONLY because colour is never the sole signal: both controls keep
   their text label and their glyph, so red/green is reinforcement. Roughly 1 in
   12 men cannot separate those two hues; the label is what they read. If either
   control ever loses its text, this breaks. */
/* Both feedback controls share one on/off treatment and differ only in hue, so
   the pair reads as a single control in two directions. Off: medium weight,
   softened. On: semibold, full strength. The SAME change in both cases —
   an earlier version bolded Useful while dimming the whole card on Flag, so the
   control you had just activated got fainter. State belongs on the control, and
   it has to move the same way whichever one you press. */
button.quote-flag {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-flag);
  opacity: 0.72;
  padding: 0;
}

button.quote-flag:hover { opacity: 1; text-decoration: underline; }
button.quote-flag.is-on { opacity: 1; font-weight: 600; }

/* One grammar for all three controls: the label, then a tick once chosen.
   Leading glyphs are gone (2026-08-25) — "✓ Useful" carried a tick BEFORE the
   word at all times while Flag showed one AFTER only when on, so the same mark
   meant "this is the approve button" in one place and "you chose this" in
   another. A thumbs-up was considered for Useful and rejected: a colour emoji
   beside a monochrome dingbat reads as two different design languages, on a page
   already carrying too much. */
button.quote-flag.is-on::after,
button.finding-keep.is-on::after {
  content: " ✓";
}

.finding__actions {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

button.finding-keep {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-useful);
  padding: 0;
}

button.finding-keep { opacity: 0.72; }
button.finding-keep:hover { opacity: 1; text-decoration: underline; }
button.finding-keep.is-on { opacity: 1; font-weight: 600; }

/* --- The reason chips under a flagged finding ---------------------------
   The finding is NOT removed — Flag and Useful are the same kind of vote, about
   what survives the next re-run. So this is a row of chips under the card's own
   controls, not a replacement for the card. Quiet: a follow-up question, not an
   alert. */
.flag-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 12px;
}

.flag-strip__ask  { color: var(--color-muted); }

.flag-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Each chip is its own one-click form; `display: contents` keeps the wrapping
   <form> elements from becoming layout boxes between the flex row and them. */
.flag-strip__chips form { display: contents; }

.flag-chip {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
}

.flag-chip:hover { color: var(--color-text); border-color: var(--color-muted); }

.flag-chip.is-on {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* Once one reason is chosen the other three recede, so the row reads as one
   answer rather than four open questions. They stay clickable — changing your
   mind must not cost an Undo and a re-flag — they simply stop competing. */
.flag-strip:has(.flag-chip.is-on) .flag-chip:not(.is-on) { opacity: 0.4; }
.flag-strip:has(.flag-chip.is-on) .flag-chip:not(.is-on):hover { opacity: 1; }
.flag-strip:has(.flag-chip.is-on) .flag-strip__ask { visibility: hidden; }

.flag-strip__undo { margin-left: auto; }

/* A kept finding is marked on the card itself, not only on its button: the
   button says what clicking does, the border says what state the finding is in,
   and the second is what you want when scanning a page of them. */
.finding-empty__note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
  max-width: 62ch;
}

/* No card-level marker for either state — removed 2026-08-25. A flagged finding
   carried a coloured left border, a dimmed card, coloured text AND a chip panel;
   four signals for one fact, on every judged finding, which is what made a page
   of them hard to read. The control that was clicked is the signal. */

/* The default focus ring drew a hard box tight around the label, which read as
   a rendering fault rather than as focus (Bryan's screenshot, 2026-08-25).
   Softened and given room — NOT removed: `:focus-visible` only paints for
   keyboard users, and taking it away would leave them unable to see where they
   are. Deliberately not `:focus`, which would also fire on mouse clicks and put
   the ring back on every press. */
button.finding-keep:focus-visible,
button.quote-flag:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Import review ---------------------------------------------------- */
/* The row states its own fate the moment it is unticked, so nobody unticks
   something and wonders what they just did. */
.review-fate {
  font-size: 12px;
  color: var(--color-danger);
  white-space: nowrap;
}
.review-evidence { color: var(--color-muted); }
/* The evidence and the fate share the third column: an unticked row swaps one
   for the other, so the row always says the most important thing about
   itself in the same place. */
.import-row--dropping .review-evidence { display: none; }
/* Dimmed and struck through, but deliberately NOT pointer-events: none --
   unticking is reversible and the row has to stay clickable. Its sibling
   .triage-row--dismissed does disable pointers, which is right for the old
   Dismiss action and wrong here; borrowing it made a row impossible to
   re-tick. */
.import-row--dropping .import-row__title {
  opacity: 0.5;
  text-decoration: line-through;
}
.import-row--dropping .import-row__date { opacity: 0.5; }
.triage-skip {
  flex-basis: 100%;
  text-align: right;
  margin-top: 8px;
}
.import-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* It borrows `.empty-state-banner` for its border, background and radius,
     but that class is built for a large CENTRED empty state: 32px of padding
     and `text-align: center`. On a one-line notification bar that reads as a
     white gap on the left, because the text is centred inside a flex item
     wider than itself and then inset by 32px on top (Bryan, 2026-08-28).
     This rule sits after `.empty-state-banner` in the file, so it wins. */
  padding: 14px 18px;
  text-align: left;
}
/* An element that toggles the `hidden` attribute must out-specify its own
   `display` rule: author CSS loads after the UA stylesheet and both are 0,1,0,
   so `hidden` silently does nothing without this. Third time in this codebase
   -- `.date-editor`, then `.inline-editor`, now here. */
.import-banner[hidden] { display: none; }
.import-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The bar toggles the `hidden` attribute AND carries a class with its own
   display rule. Both are specificity 0,1,0 and author CSS loads after the UA
   stylesheet, so `hidden` silently does nothing without this -- the same trap
   .date-editor and .inline-editor both hit. Found again 2026-08-26: the old
   confirm bar stayed on screen underneath the progress bar, showing stale
   text about downloads that had already started. */
.triage-confirm-bar[hidden] { display: none; }

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
  margin: 8px 0;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 200ms ease;
}

/* Before the first chunk returns there is genuinely nothing to measure -- the
   first eight transcripts can take ten seconds or more. A 0%-wide bar and a
   static label are indistinguishable from a dead page, so the bar slides
   instead: indeterminate means "working, length unknown", and it is swapped
   for a real percentage the moment one is available. */
.progress-fill--indeterminate {
  width: 30%;
  transition: none;
  animation: progress-slide 1.4s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { margin-left: -30%; }
  100% { margin-left: 100%; }
}

/* Motion is the point of the animation, so with reduced motion it becomes a
   static part-filled bar rather than nothing at all -- the label still says
   what is happening. */
@media (prefers-reduced-motion: reduce) {
  .progress-fill--indeterminate {
    animation: none;
    margin-left: 0;
    width: 15%;
  }
}
/* An import runs for minutes. A thin bar at the foot of a 105-row page is
   easy to scroll away from and then indistinguishable from nothing happening,
   so while it is running it pins itself to the bottom of the viewport and
   carries the accent border that marks it as the live thing on the page. */
/* Starts `hidden` and is revealed when the import runs, so it must beat the
   attribute — same trap as `.import-banner` and `.inline-editor`. Without this
   the progress bar sits on the import screen before anything has started. */
.import-progress[hidden] { display: none; }
.import-progress {
  display: block;
  position: sticky;
  bottom: 16px;
  z-index: 3;
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow);
  background: var(--color-surface);
}
.import-progress .triage-confirm__summary {
  font-size: 16px;
  margin-bottom: 4px;
}

/* --- Import list: three aligned columns ------------------------------- */
/* One grid template shared by the header and every row, so the columns line
   up by construction rather than by matching widths in two places. Dates were
   right-aligned next to the names before, so their position moved with the
   length of the name list and the eye could not run down them. */
.import-head,
.import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 260px);
  align-items: baseline;
  gap: 16px;
  padding: 10px 20px;
}

.import-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.import-head__meeting { padding-left: 26px; }

.import-row {
  border-bottom: 1px solid var(--color-surface-alt);
  font-size: 14px;
}
.import-row:last-child { border-bottom: none; }

.import-row__meeting {
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.import-row__title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.import-row__date,
.import-row__who {
  font-size: 12px;
  color: var(--color-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-month {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-soft);
  border-bottom: 1px solid var(--color-surface-alt);
}

/* The month toggle sits in an uppercase, letter-spaced heading; without this
   it inherits both and reads as another heading rather than a control. */
.month-toggle {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

/* Below the header's own width the third column costs more than it earns:
   drop the names and let title and date share the row. */
@media (max-width: 720px) {
  .import-head,
  .import-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .import-head__who,
  .import-row__who { display: none; }
}

/* Same specificity trap as .triage-confirm-bar: the body carries a class with
   its own display rule, so the `hidden` attribute needs out-specifying. */
.triage-section__body[hidden] { display: none; }

/* Plain div, but keep the habit explicit: anything toggling `hidden` in this
   codebase has been bitten by a class whose display rule out-specifies it. */
#ordinary-wrap[hidden] { display: none; }

/* Same specificity habit as everywhere else in this file. */
.triage-confirm__note[hidden] { display: none; }

/* =======================================================================
   Redesign C components (2026-10-14) — ported from annotated/design/c.html,
   the signed-off mockup, with its colour names mapped onto this file's tokens.
   The app's own header, buttons, flash, spinner and error box are styled
   above and were left out of the port. Class names here are C's, which is
   why they are short: none collided with the app's longer BEM names.
   ======================================================================= */
.label { font-size: 14px; color: var(--color-muted); font-weight: 400; }
.muted { color: var(--color-muted); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--ghost:hover { text-decoration: none; background: var(--color-surface-alt); border-color: var(--color-text-2); box-shadow: none; }
.btn--small, .btn--sm { padding: 5px 10px; font-size: 14px; }
.btn--danger { background: var(--color-danger-border); border-color: var(--color-danger-border); color: var(--color-bg); }
.btn--danger:hover { background: var(--color-danger-text); border-color: var(--color-danger-text); box-shadow: none; }
.btn[hidden] { display: none; }
* { box-sizing: border-box; }
.stats, .weeks, .weeks-axis, .vrow b, .rrow .when, .row .when { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
:root { --head-h: 60px; }
.page-head { padding: 30px 0 22px; }
.page-head h1 { font: 400 32px/1.2 var(--font-face); letter-spacing: -.01em; margin: 6px 0 6px; }
.page-head p { margin: 0; color: var(--color-text-2); max-width: 62ch; }
.back { font-size: 15px; }
.section { margin-top: 36px; }
.section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--color-surface-muted); border-left: 4px solid var(--color-route);
  padding: 10px 16px; margin-bottom: 20px; border-radius: 0 3px 3px 0; }
.section-head h2 { font: 500 19px/1.3 var(--font-face); margin: 0; }
.section-head .label { margin-left: auto; }
.section-head a.label { color: var(--color-accent); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--ghost:hover { background: var(--color-surface-alt); border-color: var(--color-text-2); box-shadow: none; }
.input { font: 400 var(--read) var(--font-face); color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 10px 12px; width: 100%; }
.input::placeholder { color: var(--color-muted); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
/* The title takes the row's free space, so the in-place rename box opens full width
   instead of as narrow as the name (project page, 2026-10-20). */
.title-row > h1 { flex: 1 1 auto; min-width: 0; }
.period { display: flex; align-items: center; gap: 10px; }
.period .seg button { padding: 6px 12px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border-strong); margin-top: 12px; }
.stats .stat { display: block; padding: 14px 18px 4px 0; color: inherit; text-decoration: none; }
.stats .stat + .stat { padding-left: 18px; border-left: 1px solid var(--color-border); }
.stats .num { font: 400 34px/1 var(--font-face); }
.stats .label { display: block; margin-top: 8px; }
/* A number that opens its page (Bryan, 2026-10-15). The arrow is always there,
   faint, so it reads as a link without a mouse; on hover or keyboard focus the
   rule above the tile turns red, the label turns red, and the arrow steps right.
   Nothing changes size, so nothing around it moves. */
a.stat { position: relative; border-radius: 0; transition: background-color .15s ease; }
a.stat::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease; }
a.stat .go { display: inline-block; color: var(--color-text-2); transition: transform .15s ease, color .15s ease; }
a.stat:hover::before, a.stat:focus-visible::before { transform: scaleX(1); }
a.stat:hover .label, a.stat:focus-visible .label,
a.stat:hover .go, a.stat:focus-visible .go { color: var(--color-accent); }
a.stat:hover .go, a.stat:focus-visible .go { transform: translateX(3px); }
a.stat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.stat::before, a.stat .go { transition: none; } }
.alltime { margin: 14px 0 0; color: var(--color-text-2); font-size: 15px; }
.notice { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px; margin-top: 22px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px 48px; }
.weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; border-bottom: 1px solid var(--color-border-strong); }
.weeks .bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.weeks .bar b { font-weight: 400; font-size: 13px; color: var(--color-text-2); margin-bottom: 4px; }
.weeks .bar span { display: block; width: 100%; background: var(--color-route); min-height: 3px; }
.weeks .bar.now span { background: var(--color-accent); }
.weeks .bar.now b { color: var(--color-accent); }
.weeks { position: relative; }
.weeks .bar { cursor: default; }
.weeks .bar span, .weeks .bar b, .weeks-axis span { transition: opacity .15s, color .15s; }
.weeks.picking .bar:not(.on) span { opacity: .3; }
.weeks.picking .bar:not(.on) b { opacity: .45; }
.weeks-axis span.on { color: var(--color-text); font-weight: 500; }
.weeks .bar:focus-visible { outline-offset: 3px; }
#weeks-note.detail { color: var(--color-text); }
#weeks-note .wk { font-weight: 600; color: var(--color-accent); }
.weeks-axis { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 6px; }
.weeks-axis span { font-size: 12px; color: var(--color-muted); text-align: center; white-space: nowrap; }
.chart-note { margin: 14px 0 0; color: var(--color-text-2); max-width: 46ch; }
.recent { display: grid; }
.rrow { display: grid; grid-template-columns: 64px 1fr auto 14px; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 3px; color: var(--color-text); }
.rrow.alt { background: var(--color-surface-alt); }
.rrow:hover { text-decoration: none; background: var(--color-accent-bg); }
.rrow:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.rrow .when { color: var(--color-muted); font-size: 14px; white-space: nowrap; }
.rrow .finds { color: var(--color-accent); font-size: 14px; white-space: nowrap; }
.rrow .finds.none { color: var(--color-muted); }
.rrow .go { color: var(--color-muted); }
.new-project { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; max-width: 640px; }
.new-project[hidden] { display: none; }
.new-project .input { flex: 1 1 260px; }
.plist { display: grid; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 200px 110px 14px; gap: 12px; align-items: baseline; padding: 14px 12px; border-radius: 3px; color: var(--color-text); border-top: 1px solid var(--color-border); }
.prow.alt { background: var(--color-surface-alt); }
.prow:hover { text-decoration: none; background: var(--color-accent-bg); }
.prow:hover .pname { text-decoration: underline; text-underline-offset: 3px; }
.prow .pname { font-size: var(--read); font-weight: 500; }
.prow .pnum, .prow .pdate { font-size: 14px; color: var(--color-text-2); }
.prow .pnum.muted, .prow .pdate { color: var(--color-muted); }
.prow .go { color: var(--color-muted); }
.picker { margin-top: 8px; padding: 16px 18px 18px; background: var(--color-surface); border: 1px solid var(--color-route); border-radius: 3px; }
.picker[hidden] { display: none; }
.pick-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: 300px; overflow: auto; border: 1px solid var(--color-border); border-radius: 3px; }
.pick-list li label { display: grid; grid-template-columns: 20px 70px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 12px; cursor: pointer; }
.pick-list li:nth-child(even) label { background: var(--color-surface-alt); }
.pick-list li label:hover { background: var(--color-accent-bg); }
.pick-list .d { color: var(--color-muted); font-size: 14px; }
.pick-list .from { color: var(--color-muted); font-size: 13.5px; white-space: nowrap; }
.pick-list li[hidden] { display: none; }
.pick-actions { display: flex; gap: 10px; margin-top: 12px; }
.btn--small { padding: 5px 10px; font-size: 14px; }
.find.xfind { grid-template-columns: 1fr; }
.xfind .scope { margin: 0 0 4px; font-size: 14px; color: var(--color-accent); }
.proj-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.proj-pick .select { padding: 6px 8px; font-size: 14px; max-width: 100%; }
.proj-pick [hidden] { display: none; }
.proj-open { display: inline-block; margin-top: 6px; font-size: 14px; }
.topics-link { display: inline-block; margin-top: 8px; font-size: 15px; }
.tp-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.tp-controls .seg button { padding: 6px 12px; font-size: 14px; }
.tp-summary { margin-top: 18px; display: grid; gap: 4px; }
.tp-summary p { margin: 0; }
.tp-summary b { font-weight: 600; }
.tp-summary .up b { color: var(--color-text); }
.tp-list { display: grid; }
.tp-row { border-top: 1px solid var(--color-border); }
.tp-row:first-child { border-top: 0; }
.tp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 260px) 110px 190px 16px; gap: 6px 18px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; padding: 14px 12px; border-radius: 3px; cursor: pointer; color: var(--color-text); font: inherit; }
.tp-row:nth-child(even) .tp-head { background: var(--color-surface-alt); }
.tp-head:hover { background: var(--color-accent-bg) !important; }
.tp-name { font-size: var(--read); font-weight: 500; }
.tp-quote { grid-column: 1 / -1; font-size: 14px; color: var(--color-text-2); margin-top: -2px; }
.tp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 260px) 110px 190px 16px; gap: 6px 18px; padding: 0 12px 6px; font-size: 13px; color: var(--color-muted); }
.tp-viz { display: grid; gap: 6px; }
.tp-bar { height: 10px; background: var(--color-border); border-radius: 5px; overflow: hidden; }
.tp-bar span { display: block; height: 100%; background: var(--color-route); border-radius: 5px; }
.tp-count { font-size: 14px; color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-change { font-size: 14px; white-space: nowrap; color: var(--color-muted); }
.tp-change.up { color: var(--color-text); }
.tp-change.new { color: var(--color-text); }
.tp-caret { color: var(--color-muted); transition: transform .15s; }
.tp-row.open .tp-caret { transform: rotate(90deg); }
.tp-row.open { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; margin: 12px 0; }
.tp-row.open + .tp-row { border-top: 0; }
.tp-row.open .tp-head { background: none; border-radius: 0; }
.tp-row.open .tp-drawer { border-top: 1px solid var(--color-border); margin: 0 12px; padding: 4px 0 18px; }
.tp-drawer { padding: 4px 12px 18px 12px; }
.tp-drawer[hidden] { display: none; }
.tp-weeks { display: grid; gap: 4px; align-items: end; height: 70px; max-width: 520px; border-bottom: 1px solid var(--color-border-strong); margin-top: 8px; }
.tp-weeks div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.tp-weeks b { font-weight: 400; font-size: 12px; color: var(--color-text-2); }
.tp-weeks i { display: block; width: 100%; background: var(--color-route); min-height: 2px; }
.tp-axis { display: grid; gap: 4px; max-width: 520px; margin-top: 4px; }
.tp-axis span { font-size: 11.5px; color: var(--color-muted); text-align: center; white-space: nowrap; }
.tp-drawer h4 { font: 500 14px/1.3 var(--font-face); color: var(--color-text-2); margin: 16px 0 8px; }
.ask-next { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border-strong); }
.ask-next::before { content: "Ask another question"; display: block; font: 500 16px/1.3 var(--font-face); margin-bottom: 10px; }
.welcome { padding: 30px 0 10px; max-width: 760px; }
.welcome h1 { font: 400 32px/1.2 var(--font-face); margin: 6px 0 6px; }
.welcome .lede { margin: 0 0 20px; color: var(--color-text-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; }
.steps .sn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-route); display: grid; place-items: center; font-weight: 500; color: var(--color-text); }
.steps li.done .sn { background: var(--color-route); color: var(--color-text); }
.steps li.done { opacity: .75; }
.steps b { font-weight: 500; display: block; }
.steps p { margin: 4px 0 10px; color: var(--color-text-2); }
.steps li.done p { margin-bottom: 0; }
.empty { padding: 18px 20px; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: 3px; margin: 4px 0 8px; }
.empty b { font-weight: 500; display: block; margin-bottom: 4px; }
.empty p { margin: 0 0 8px; color: var(--color-text-2); max-width: 64ch; }
.progress-box { padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-route); border-radius: 0 3px 3px 0; margin: 0 0 18px; }
.pb-head { display: flex; align-items: center; gap: 10px; }
.pb-head b { font-weight: 500; }
.pb-bar { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; margin: 10px 0 8px; max-width: 520px; }
.pb-bar span { display: block; height: 100%; background: var(--color-route); }
.pb-bar span { transition: width .6s ease; }
.progress-box p { margin: 0; color: var(--color-text-2); font-size: 14px; }
.progress-box p b { font-weight: 600; color: var(--color-text); }
.spin { width: 16px; height: 16px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.row.pending .gist { color: var(--color-muted); }
.row.failed .gist { color: var(--color-danger-border); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.look-project[hidden], .look-call[hidden] { display: none; }
.look-call { max-width: 620px; margin: 0 0 12px; }
.call-pick { list-style: none; margin: 8px 0 0; padding: 0; max-height: 236px; overflow: auto; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-surface); }
.call-pick li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--color-border); }
.call-pick li:first-child { border-top: 0; }
.call-pick li:hover { background: var(--color-accent-bg); }
.call-pick li[aria-selected="true"] { background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-accent); }
.call-pick li[aria-selected="true"] .ct::after { content: "  ✓"; color: var(--color-accent); }
.call-pick li[hidden] { display: none; }
.call-pick .d { color: var(--color-muted); font-size: 14px; }
.look-hint { margin: 0 0 12px; font-size: 14px; color: var(--color-muted); max-width: 70ch; }
.vrow { cursor: pointer; }
.vrow[aria-pressed="true"] { background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-accent); }
.edit-link { font: 400 14px var(--font-face); color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; margin-left: 10px; vertical-align: 6px; }
.rail .edit-link { margin-left: 8px; vertical-align: 0; }
.inplace { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 6px 0; }
.inplace[hidden] { display: none; }
.inplace textarea { font: 400 26px/1.25 var(--font-face); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 6px 10px; flex: 1 1 420px; resize: none; }
.inplace input[type=date] { font: 400 15px var(--font-face); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 6px 8px; max-width: 100%; }
.rail .inplace { flex-direction: column; align-items: stretch; }
.rail .inplace .btnrow { gap: 8px; }
.nodate { color: var(--color-danger-text); }
.task { margin: 0 0 24px; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; }
.task[hidden] { display: none; }
.task h2 { font: 500 17px/1.3 var(--font-face); margin: 0 0 4px; }
.task > p { margin: 0 0 14px; color: var(--color-text-2); max-width: 64ch; }
.task .foot { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: 14px; color: var(--color-muted); }
.vt-help { margin: 12px 0 0; font-size: 14px; }
#vt-clear-row[hidden] { display: none; }
.vt-neither { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--color-text-2); }
.voice-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.voice-card { border: 1px solid var(--color-border); border-radius: 3px; padding: 14px; background: var(--color-bg); display: grid; gap: 10px; align-content: start; justify-items: start; }
.voice-card .namerow { justify-self: stretch; }
.voice-card .vmeta { font-size: 14px; color: var(--color-muted); }
.voice-card .vmeta b { font-weight: 500; color: var(--color-text); }
.voice-card q { quotes: "\201C" "\201D"; color: var(--color-text-2); line-height: 1.5; }
.voice-card .namerow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voice-card .namerow .input { flex: 1 1 160px; padding: 7px 10px; }
.radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--color-text-2); cursor: pointer; }
.radio input { accent-color: var(--color-accent); }
.fix-grid > div { display: grid; align-content: start; }
.fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: 620px; }
.fix-result { margin: 14px 0 0; font-size: 14px; color: var(--color-text-2); }
.fix-snips { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-width: 64ch; }
.fix-snips li { font-size: 14px; color: var(--color-text-2); padding-left: 12px; border-left: 2px solid var(--color-border-strong); }
.fix-snips mark { background: var(--color-success-bg); color: var(--color-success-text); padding: 0 2px; border-radius: 2px; }
.rail-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border-strong); display: grid; gap: 8px; justify-items: start; font-size: 15px; }
.rail-actions button { font: 400 15px var(--font-face); background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-accent); text-align: left; }
.rail-actions .danger { color: var(--color-danger-border); }
.confirm { margin-top: 8px; padding: 12px; border: 1px solid var(--color-danger-border); border-left-width: 4px; border-radius: 0 3px 3px 0; background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 14px; }
.confirm[hidden] { display: none; }
.confirm b { display: block; font-weight: 600; margin-bottom: 4px; }
.confirm p { margin: 0 0 10px; }
.confirm .btnrow { gap: 10px; }
.btn--danger { background: var(--color-danger-border); border-color: var(--color-danger-border); color: var(--color-bg); }
.btn--danger:hover { background: var(--color-danger-text); border-color: var(--color-danger-text); box-shadow: none; }
.find-banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 14px 0 0; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; }
.find-banner span { flex: 1 1 320px; color: var(--color-text-2); }
.find.flagged h3, .find.flagged .evidence { opacity: .62; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.reasons[hidden] { display: none; }
.reasons > span { font-size: 14px; color: var(--color-muted); }
.reason-note { margin: 8px 0 0; font-size: 14px; color: var(--color-muted); }
.qflag { font: 400 14px var(--font-face); color: var(--color-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.qflag[aria-pressed="true"] { color: var(--color-accent); text-decoration: none; }
.qflag[aria-pressed="true"]::before { content: "✓ "; }
.call-answer { margin-top: 18px; }
.call-answer .you-asked { margin-bottom: 20px; }
.call-answer .answer-text { margin: 0 0 16px; }
.call-answer .meta { margin: 12px 0 0; font-size: 14px; color: var(--color-muted); }
.warn { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 0 0 14px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; color: var(--color-text-2); }
.warn b { font-weight: 600; display: block; color: var(--color-text); }
@media (max-width: 760px) {
  .fix-grid { grid-template-columns: 1fr; }
  .inplace textarea { font-size: 22px; }
}
.rv-group { margin-top: 28px; }
.rv-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 6px; margin-bottom: 4px; }
.rv-head h2 { font: 500 14px/1.4 var(--font-face); color: var(--color-text-2); margin: 0; }
.rv-head h2 span { font-weight: 400; color: var(--color-muted); }
.rv-head a.label { margin-left: auto; font-size: 14px; color: var(--color-accent); }
.rv-row .t { font-weight: 500; color: var(--color-text); }
.rv-row.off .t { color: var(--color-muted); }
.rv-why { margin: 6px 0 6px; font-size: 14px; color: var(--color-muted); max-width: 64ch; }
.rv-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 300px) 110px; gap: 4px 16px; align-items: center; padding: 9px 12px; border-radius: 3px; }
.rv-row .rv-x { justify-self: end; }
.rv-row .tt { display: grid; gap: 3px; }
.rv-row .why { font-size: 14px; color: var(--color-muted); max-width: 62ch; line-height: 1.45; }
.rv-flag { border: 1px solid var(--color-border); background: var(--color-surface) !important; margin-bottom: 10px; padding: 14px 16px !important; }
.rv-flag .t { font-size: 17px; }
.rtag { display: inline-block; font: 500 13px/1.4 var(--font-face); color: var(--color-danger-text); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); border-radius: 3px; padding: 1px 7px; margin-right: 8px; }
.rv-row.off .rtag { text-decoration: none; }
.rv-flag.off { background: var(--color-danger-bg) !important; border-color: var(--color-danger-border); }
.rv-row .why b { font-weight: 500; color: var(--color-text); }
.rv-flag { align-items: start; padding: 12px; }
.rv-flag .d, .rv-flag .fate { padding-top: 2px; }
.rv-row.rv-flag .fate { display: inline; visibility: hidden; }
.rv-row.rv-flag.off .fate { visibility: visible; }
.rv-row.off .why { text-decoration: line-through; text-decoration-color: var(--color-border-strong); color: var(--color-muted); }
.rv-row.off { background: var(--color-danger-bg) !important; }
.rv-row:nth-of-type(even) { background: var(--color-surface-alt); }
.rv-row .d { color: var(--color-muted); font-size: 14px; }
.rv-row .ev { color: var(--color-text-2); font-size: 14px; }
.rv-row .fate { display: none; color: var(--color-danger-text); font-size: 14px; }
.rv-row.off .t { text-decoration: line-through; text-decoration-color: var(--color-border-strong); color: var(--color-muted); }
.rv-row.off .ev { display: none; }
.rv-row.off .fate { display: inline; }
.rv-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--color-border-strong); }
.rv-note { margin: 0 0 12px; color: var(--color-danger-text); background: var(--color-danger-bg); border-left: 3px solid var(--color-danger-border); padding: 8px 12px; max-width: 64ch; }
.rv-note[hidden] { display: none; }
#gone { max-width: none; }
.gone { margin-top: 8px; }
.gone .imp-row .left { display: inline; color: var(--color-muted); }
.gone .tag { font-size: 13px; color: var(--color-text-2); border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 1px 6px; margin-right: 6px; white-space: nowrap; }
.pw-form { display: grid; gap: 12px; max-width: 420px; margin-top: 4px; }
.pw-form[hidden] { display: none; }
.pw-form .input { width: 100%; box-sizing: border-box; }
.release { margin-top: 24px; padding: 22px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; max-width: 760px; }
.release.current { border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; }
.release-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.release-head h2 { font: 500 19px/1.3 var(--font-face); margin: 0; }
.release-head .label { font-size: 14px; }
.pill { font-size: 13px; color: var(--color-success-text); background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: 999px; padding: 1px 9px; }
.release .status { margin: 8px 0 0; font-size: 14px; color: var(--color-muted); }
.release .headline { margin: 10px 0 0; color: var(--color-text); }
.release h3 { font: 500 15px/1.4 var(--font-face); margin: 18px 0 6px; }
.release ul { margin: 0; padding-left: 20px; color: var(--color-text-2); max-width: 64ch; }
.release li { margin-bottom: 6px; line-height: 1.5; }
.build-line { margin: 24px 0 0; font-size: 14px; color: var(--color-muted); }
@media (max-width: 760px) {
  .rv-row { grid-template-columns: 1fr auto; }
  .rv-row .d, .rv-row .ev, .rv-row .fate { grid-column: 1; }
  .rv-row .rv-x { grid-column: 2; grid-row: 1 / span 3; }
  .release { padding: 18px; }
}
.bulk-only { display: none; }
#upload.bulk-on .bulk-only { display: revert; }
#upload.bulk-on .one-only { display: none; }
#upload.bulk-on .upform { display: none; }
.bulk[hidden] { display: none; }
.several { margin: 12px 0 0; font-size: 14px; color: var(--color-muted); }
.howmany { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin: 0 0 18px; }
.hm { display: grid; gap: 4px; align-content: start; text-align: left; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 14px 16px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.hm b { font-weight: 500; font-size: 16px; }
.hm span { font-size: 14px; color: var(--color-text-2); }
.hm:hover { border-color: var(--color-accent); }
.hm[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 4px 0 0 var(--color-accent); background: var(--color-accent-bg); }
@media (max-width: 760px) {
  .howmany { grid-template-columns: 1fr; }
}
.bulk-all { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 14px; }
.bulk-all .select { padding: 7px 10px; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 0 0 8px; border-bottom: 1px solid var(--color-border-strong); }
.bulk-bar .label b { font-weight: 500; color: var(--color-danger-text); }
.bulk-bar .links { margin-left: auto; display: flex; gap: 16px; }
.bulk-head { display: grid; grid-template-columns: minmax(0, 1fr) 168px 210px 64px; gap: 14px; padding: 10px 12px 4px; font-size: 14px; color: var(--color-muted); }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) 168px 210px 64px; gap: 6px 14px; align-items: end; padding: 12px; border-radius: 3px; }
.brow:nth-child(even) { background: var(--color-surface-alt); }
.brow .fname { font-size: 14px; color: var(--color-muted); overflow-wrap: anywhere; margin: 0 0 4px; }
.brow .input, .brow .select { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 15px; }
.brow input[type=date].missing { border-color: var(--color-danger-border); box-shadow: inset 3px 0 0 var(--color-danger-border); }
.brow .rm { font: 400 14px var(--font-face); color: var(--color-accent); background: none; border: 0; padding: 8px 0; cursor: pointer; justify-self: end; }
.brow .rowmsg { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; }
.brow .rowmsg[hidden] { display: none; }
.brow .suggest .sname { font-weight: 500; color: var(--color-text); }
.brow .need { color: var(--color-danger-text); }
.brow .need::before { content: "\26A0  "; }
.brow .suggest { color: var(--color-text-2); }
.brow .suggest button { font: 400 14px var(--font-face); color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.brow.bad { background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); border-left-width: 4px; border-radius: 0 3px 3px 0; color: var(--color-danger-text); }
.brow.bad .fname { color: var(--color-danger-text); }
.brow.bad .badmsg { grid-column: 1 / 4; margin: 0; font-size: 14px; }
.brow.bad .badmsg b { display: block; font-weight: 600; }
.brow .note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; color: var(--color-text-2); padding-left: 10px; border-left: 3px solid var(--color-route); }
.bulk-foot { position: sticky; bottom: 0; background: var(--color-bg); border-top: 1px solid var(--color-border-strong); padding: 14px 0 10px; margin-top: 8px; z-index: 3; }
.bulk-foot .form-msg { margin: 0 0 10px; }
.bulk-foot .form-msg[hidden] { display: none; }
@media (max-width: 760px) {
  .bulk-head { display: none; }
  .brow { grid-template-columns: 1fr 64px; }
  .brow .c-title { grid-column: 1 / -1; grid-row: 1; }
  .brow .c-date { grid-column: 1; }
  .brow .c-proj { grid-column: 1 / -1; }
  .brow .rm { grid-column: 2; grid-row: 2; align-self: end; }
  .brow.bad .badmsg { grid-column: 1; }
  .bulk-bar .links { margin-left: 0; }
}
#bulk-left { margin: 14px 0 0; }
#bulk-left[hidden] { display: none; }
.bgroup { margin-top: 34px; }
.bsec { margin-bottom: 8px; }
.bulk-links { display: flex; justify-content: flex-end; gap: 18px; margin: -8px 0 10px; font-size: 15px; }
.bulk-all { margin: 0 0 4px; }
.bgroup[hidden] { display: none; }
.auth { max-width: 440px; margin: 40px auto 0; }
.last-code { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; background: var(--color-surface); }
.last-code[hidden] { display: none; }
.auth--wide { max-width: 640px; }
.auth h1 { font: 400 28px/1.2 var(--font-face); margin: 4px 0 6px; }
.auth .lede { margin: 0 0 20px; color: var(--color-text-2); }
#login h1 { margin-bottom: 20px; }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; padding: 24px; }
.auth-card .field { margin: 0 0 16px; }
.auth-card .input { width: 100%; box-sizing: border-box; }
.auth-card .btn--full { width: 100%; justify-content: center; margin-top: 4px; }
.auth-links { margin: 16px 0 0; display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; color: var(--color-muted); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-accent); flex: none; }
.before { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-route); border-radius: 0 3px 3px 0; background: var(--color-surface); }
.before b { font-weight: 500; display: block; margin-bottom: 6px; }
.before ul { margin: 0; padding-left: 18px; color: var(--color-text-2); }
.before li { margin-bottom: 6px; }
.before li:last-child { margin-bottom: 0; }
.stepline { font-size: 14px; color: var(--color-muted); }
.codes { list-style: none; margin: 0 0 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; background: var(--color-bg); border: 1px dashed var(--color-border-strong); border-radius: 3px; counter-reset: code; }
.codes li { counter-increment: code; display: grid; grid-template-columns: 22px 1fr; font: 400 15px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--color-text); }
.codes li::before { content: counter(code); color: var(--color-muted); font-family: var(--font-face); font-size: 14px; }
.keep { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--color-border); }
.form-msg { color: var(--color-danger-text); background: var(--color-danger-bg); border-left: 3px solid var(--color-danger-border); padding: 6px 10px; margin: 0 0 14px; font-size: 14px; }
.form-msg[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.wait-note { margin: 10px 0 0; font-size: 14px; color: var(--color-muted); }
.wait-note[hidden] { display: none; }
@media (max-width: 760px) {
  .auth { margin-top: 24px; }
  .auth-card { padding: 18px; }
  .codes { grid-template-columns: 1fr; }
}
.subhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 8px; margin-bottom: 14px; }
.subhead h3 { font: 500 16px/1.3 var(--font-face); margin: 0; }
.subhead .label { margin-left: auto; }
.narrow-only { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.setp { margin: 0 0 14px; color: var(--color-text-2); max-width: 64ch; }
.key-ok { color: var(--color-text-2); }
.key-ok::before { content: "✓ "; color: var(--color-route); font-weight: 600; }
.fl { display: block; font-weight: 500; margin: 0 0 6px; }
.keyrow { display: flex; gap: 10px; flex-wrap: wrap; max-width: 760px; }
.keyrow .input { flex: 1 1 280px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.howto { margin-top: 14px; max-width: 64ch; }
.howto summary { cursor: pointer; color: var(--color-accent); }
.howto ol { margin: 10px 0 0; padding-left: 20px; color: var(--color-text-2); }
.howto li { margin-bottom: 6px; }
.howto b, .setp b { font-weight: 500; color: var(--color-text); }
.btnrow { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.linkbtn { color: var(--color-accent); }
.usage { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); border-top: 1px solid var(--color-border-strong); }
.usage div { padding: 14px 18px 4px 0; }
.usage div + div { padding-left: 18px; border-left: 1px solid var(--color-border); }
.usage .num { font: 400 30px/1 var(--font-face); display: block; }
.usage .label { display: block; margin-top: 8px; }
.imp-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 0 8px; border-bottom: 1px solid var(--color-border-strong); }
.imp-links { display: flex; gap: 16px; }
.imp-month { position: sticky; top: var(--head-h); background: var(--color-bg); z-index: 2; font: 500 16px/1.3 var(--font-face); padding: 16px 12px 6px; display: flex; gap: 16px; align-items: center; cursor: pointer; }
.imp-month input { width: 17px; height: 17px; accent-color: var(--color-accent); margin: 0 5px 0 0; cursor: pointer; }
.imp-month span { font-weight: 400; font-size: 14px; color: var(--color-muted); }
.imp-row { display: grid; grid-template-columns: 22px 90px minmax(0, 1fr) minmax(0, 300px); gap: 4px 16px; align-items: baseline; padding: 11px 12px; border-radius: 3px; cursor: pointer; }
.imp-row:nth-of-type(even) { background: var(--color-surface-alt); }
.imp-row:hover { background: var(--color-accent-bg); }
.imp-row input { width: 17px; height: 17px; accent-color: var(--color-accent); margin: 0; align-self: center; }
.imp-row .d { color: var(--color-muted); font-size: 14px; }
.imp-row .t { font-weight: 500; }
.imp-row .who { color: var(--color-text-2); font-size: 14px; }
.imp-row.off .t, .imp-row.off .who { color: var(--color-muted); }
.imp-row .left { grid-column: 3 / -1; font-size: 13.5px; color: var(--color-muted); }
.imp-row:not(.off) .left { display: none; }
.imp-foot { position: sticky; bottom: 0; background: var(--color-bg); border-top: 1px solid var(--color-border-strong); padding: 14px 0 10px; margin-top: 8px; z-index: 3; }
.imp-cost { margin: 0 0 10px; }
.imp-cost b { font-weight: 600; }
.upform { max-width: 680px; }
.drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 34px 20px; border: 2px dashed var(--color-border-strong); border-radius: 4px; background: var(--color-surface); cursor: pointer; }
.drop:hover { border-color: var(--color-route); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.drop b { font-weight: 500; color: var(--color-accent); }
.drop span { color: var(--color-muted); font-size: 14px; }
.fields { display: grid; gap: 18px; margin-top: 22px; }
.fields .input, .fields .select { max-width: 420px; }
.req { font-weight: 400; font-size: 13px; color: var(--color-accent); margin-left: 6px; }
.opt { font-weight: 400; font-size: 13px; color: var(--color-muted); margin-left: 6px; }
.news { margin: 0; padding-left: 20px; color: var(--color-text-2); }
.news li { margin-bottom: 8px; }
.news li::marker { color: var(--color-route); }
.news-link { display: inline-block; margin-top: 4px; font-size: 15px; }
.projects { list-style: none; margin: 0; padding: 0; }
.projects li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 12px; border-top: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; transition: background .12s; }
.projects li:first-child { border-top: 0; }
.projects li:hover { background: var(--color-accent-bg); }
.projects li:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.projects li:hover + li { border-top-color: transparent; }
.projects .name { font-size: var(--read); color: var(--color-text); }
.projects .meta { grid-column: 1 / -1; font-size: 14px; }
.toolbar { display: flex; gap: 12px; padding: 4px 0 22px; flex-wrap: wrap; align-items: center; }
.toolbar .input { max-width: 420px; }
.select { font: 400 15px var(--font-face); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 9px 10px; }
.route { position: relative; padding-left: 34px; }
.route::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--color-route); }
.month { position: sticky; top: var(--head-h); z-index: 2; background: var(--color-bg);
  margin: 0 0 0 -34px; padding: 18px 0 8px 34px; display: flex; gap: 12px; align-items: baseline; }
.month h3 { font: 500 18px/1.3 var(--font-face); margin: 0; }
.row { display: grid; grid-template-columns: 96px minmax(0, 250px) 1fr 120px 16px; gap: 4px 20px;
  padding: 14px 14px; position: relative; color: var(--color-text); border-radius: 3px; }
.row.alt { background: var(--color-surface-alt); }
.row:hover { text-decoration: none; background: var(--color-accent-bg); }
.row::before { content: ""; position: absolute; left: -30px; top: 19px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--color-route); }
.row.has-finds::before { background: var(--color-accent); border-color: var(--color-accent); }
.row .when { color: var(--color-muted); font-size: 14px; padding-top: 2px; }
.row .title { font-size: var(--read); font-weight: 500; line-height: 1.4; }
.row .title small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: var(--color-muted); }
.row .gist { color: var(--color-text-2); font-size: 15px; line-height: 1.5; }
.row .side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 14px; }
.row .finds { color: var(--color-accent); }
.row .finds.none { color: var(--color-muted); }
.row .go { color: var(--color-muted); font-size: 20px; line-height: 1; padding-top: 2px; }
.row:hover .go { color: var(--color-accent); }
.row:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.proj-banner { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 14px; padding: 10px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-route); border-radius: 0 3px 3px 0; }
.proj-banner[hidden], .proj-banner [hidden] { display: none; }
.proj-banner span { color: var(--color-text); }
.no-match { margin: 4px 0 18px; color: var(--color-text-2); }
.no-match[hidden] { display: none; }
.row[hidden], .month[hidden] { display: none; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; color: var(--color-muted); font-size: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; border: 2px solid var(--color-route); }
.legend i.f { background: var(--color-accent); border-color: var(--color-accent); }
.crumb { display: flex; gap: 8px; align-items: baseline; font-size: 15px; color: var(--color-muted); }
.call-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; margin-top: 8px; }
.rail { position: sticky; top: calc(var(--head-h) + 16px); align-self: start; font-size: 15px; }
.rail dl { margin: 0; }
.rail dt { font-size: 14px; color: var(--color-muted); margin-top: 16px; }
.rail dt:first-child { margin-top: 0; }
.rail dd { margin: 3px 0 0; }
.vbar { display: flex; height: 10px; gap: 2px; margin: 8px 0 10px; }
.vrow { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 15px; }
.vrow i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; }
.vrow b { font-weight: 400; color: var(--color-text-2); }
.vrow { margin: 0 -8px; padding: 3px 8px; border-radius: 3px; cursor: default; transition: background .12s; }
.vrow:hover { background: var(--color-surface-alt); }
.vbar span { transition: opacity .15s; }
.vbar.hovering span { opacity: .25; }
.vbar.hovering span.lit { opacity: 1; }
#call .evidence li { transition: background .12s; border-radius: 0 3px 3px 0; }
#call .evidence li.voice-lit { background: var(--color-surface-alt); }
.find:hover .evidence li.voice-lit { background: var(--color-bg); }
.spark.voice-lit { background: var(--color-surface-alt); }
.vhint { font-size: 13.5px; color: var(--color-muted); margin: 4px 0 6px; }
.vwords { font-size: 13.5px; color: var(--color-muted); margin: 4px 0 6px; }
.toc { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--color-border-strong); display: grid; gap: 6px; }
.toc a { color: var(--color-text-2); padding-left: 12px; border-left: 2px solid transparent; }
.toc a.on { color: var(--color-accent); border-left-color: var(--color-accent); }
.summary { font-size: var(--read); line-height: 1.5; color: var(--color-text-2); max-width: 40em; margin: 0; }
.section[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
.strip { margin: 4px 0 8px; }
.strip-track { position: relative; height: 50px; margin: 0 14px; }
.strip-track::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 2px; background: var(--color-route); }
.strip-track .tick { position: absolute; top: 20px; width: 1px; height: 10px; background: var(--color-border-strong); }
.pin { position: absolute; top: 12px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg); font: 500 13px/26px var(--font-face); text-align: center; }
.pin { transition: opacity .25s ease, box-shadow .25s ease; }
.strip.hovering a.pin { opacity: .45; }
.strip.hovering a.pin.lit { opacity: 1; box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-route); z-index: 1; }
.strip-axis { display: flex; justify-content: space-between; margin: 0 14px; font-size: 13px; color: var(--color-muted); }
.strip-track { margin-top: 6px; }
.pin.lane1 { top: -16px; }
.pin.lane2 { top: -44px; }
.strip-note { margin: 10px 0 0; font-size: 14px; color: var(--color-muted); }
.find { display: grid; grid-template-columns: 34px 1fr; gap: 0 16px; padding: 20px; margin-top: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; scroll-margin-top: calc(var(--head-h) + 16px); transition: background .12s, border-color .12s; }
.find:hover { background: var(--color-surface-alt); }
.find:target { border-color: var(--color-accent); }
.find.lit { border-color: var(--color-route); }
.find .pin { position: static; transform: none; width: 30px; height: 30px; line-height: 30px; font-size: 14px; }
.find h3 { font: 400 var(--read)/1.5 var(--font-face); color: var(--color-text); margin: 2px 0 4px; max-width: 40em; }
.find .why { color: var(--color-muted); font-size: 14px; margin: 0 0 14px; }
.evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.evidence li { border-left: 2px solid var(--color-route); padding: 2px 0 2px 16px; max-width: 64ch; }
.evidence q { quotes: "\201C" "\201D"; font-size: var(--read); line-height: 1.5; color: var(--color-text-2); display: block; }
.evidence .by { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 14px; color: var(--color-muted); }
.evidence .by .who { color: var(--color-text-2); }
.votes { display: flex; gap: 8px; margin-top: 16px; }
.chip { font: 400 14px var(--font-face); color: var(--color-text-2); background: none; border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 5px 12px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-bg); }
.sparks { columns: 2 320px; column-gap: 36px; }
.spark { break-inside: avoid; padding: 10px 12px; margin: 0 -12px 8px; border-radius: 3px; transition: background .12s; }
.spark:hover { background: var(--color-surface-alt); }
.spark q { quotes: "\201C" "\201D"; font-size: var(--read); line-height: 1.5; display: block; }
.spark .by { margin-top: 4px; font-size: 14px; color: var(--color-muted); }
.askbox { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 760px; }
.hint { margin: 10px 0 0; color: var(--color-muted); font-size: 14px; }
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: 3px; }
.seg button { font-size: 15px; color: var(--color-text-2); background: none; border: 0; padding: 8px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-border-strong); }
.seg button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
/* The same control as links, for pages whose choices are URLs (Sparks, Findings). */
.seg a { font-size: 15px; color: var(--color-text-2); padding: 8px 14px; text-decoration: none; }
.seg a + a { border-left: 1px solid var(--color-border-strong); }
.seg a:hover { color: var(--color-text); background: var(--color-surface-alt); text-decoration: none; }
.seg a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.seg--period a { padding: 6px 12px; font-size: 14px; }

/* Look in + filters on the Sparks and Findings pages (2026-10-15). */
.look-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.look-row .seg--period { margin-left: auto; }
.look-pick { display: contents; }
/* Wide enough for a project or call name without crowding (Bryan, 2026-10-15). */
.look-pick .select { min-width: min(280px, 100%); max-width: 420px; }
.look-filters { padding-bottom: 18px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.look-q { flex: 1 1 220px; max-width: 360px; }
.look-clear { font-size: 14px; }
.look-note { color: var(--color-text-2); margin: 12px 0; }
.look-empty { padding: 28px 0; color: var(--color-text-2); max-width: 60ch; }
.look-empty b { color: var(--color-text); font-weight: 500; }

/* One call's sparks on the Sparks page: the call as a small heading, its date
   and project beside it, then its quotes in the call page's style. */
.spark-call { padding: 22px 0 6px; border-top: 1px solid var(--color-border); }
.spark-call:first-of-type { border-top: 0; }
.spark-call__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.spark-call__title { font: 500 17px/1.35 var(--font-face); color: var(--color-text); }
.spark-call__title:hover { color: var(--color-accent); }
.spark-call__meta { color: var(--color-text-2); font-size: 14px; }

/* Findings page (2026-10-15): the same cards as the call and project pages,
   read-only, with a footer link to where Useful and Flag live. */
.look-rule { border-bottom: 1px solid var(--color-border); margin: 6px 0 8px; }

/* How it works (2026-10-15): a short guide, one entry per part. */
.guide { max-width: 760px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 6px; padding: 0; list-style: none; }
.guide-entry { padding: 26px 0 8px; border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--head-h) + 16px); }
.guide-entry h2 { display: flex; align-items: center; gap: 10px; font: 500 21px/1.3 var(--font-face); margin: 0 0 6px; }
.guide-entry h2 .title-ico { width: 22px; height: 22px; }
.guide-entry .what { font-size: var(--read); line-height: 1.55; margin: 0 0 12px; }
.guide-entry h3 { font: 500 14px/1.4 var(--font-face); color: var(--color-text-2); margin: 14px 0 6px; }
.guide-entry ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.guide-entry li { margin: 0 0 4px; }
.guide-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-text-2); font-size: 14px; }
.find-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0 0 8px; font-size: 14px; }
.find-src__name { font: 500 17px/1.35 var(--font-face); color: var(--color-text); }   /* = the Sparks page call titles */
.find-src__name:hover { color: var(--color-accent); }
.find-src__meta { color: var(--color-text-2); }

/* A project, wherever it is named (Bryan, 2026-10-15; `project_tag` in
   _icons.html): the Projects icon and the name, both in red. The icon is one
   colour here, no separate red mark — the whole tag is already red. */
.proj-tag { display: inline; color: var(--color-accent); white-space: nowrap; }
.proj-tag .proj-ico { width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: 0.3em; }   /* sits on the text baseline beside it */
.proj-tag .acc { stroke: currentColor; }
.proj-tag .acc.dot { fill: currentColor; }
a.proj-tag:hover span { text-decoration: underline; text-underline-offset: 3px; }
.find-src--project { font-size: 16px; }
.find-src--project .proj-tag { font-weight: 500; }
.find-src--project .proj-ico { width: 1.1em; height: 1.1em; }
.dt-proj { display: flex; align-items: center; gap: 5px; }
.dt-proj .proj-ico { width: 14px; height: 14px; }
.find-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; font-size: 14px; }
.kept-tag { font-size: 13px; padding: 2px 8px; border-radius: 3px; background: var(--color-surface-alt); color: var(--color-text-2); border: 1px solid var(--color-border); }
.xfind .evidence-call .evidence { margin-top: 8px; }
.asked { font: 400 var(--read)/1.5 var(--font-face); margin: 4px 0 0; max-width: 36em; }
.answer { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
.answer-text { font-size: var(--read); line-height: 1.5; max-width: 40em; margin: 0; }
.cite { display: inline-block; min-width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); font: 500 12px/20px var(--font-face); text-align: center; vertical-align: 2px; margin: 0 2px; }
.read { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.read::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--color-route); }
.read li { position: relative; padding: 0 0 16px; }
.read li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-route); }
.read li.cited::before { background: var(--color-accent); border-color: var(--color-accent); }
.read .t { display: block; font-size: 15.5px; line-height: 1.4; }
.read .m { font-size: 14px; color: var(--color-muted); }
#ask .evidence li.ev { padding: 8px 12px 8px 16px; border-radius: 0 3px 3px 0; transition: background .12s; }
#ask .evidence li.ev:hover, #ask .evidence li.ev.lit { background: var(--color-surface-alt); }
.read li { padding: 6px 10px 10px; margin: 0 -10px 4px; border-radius: 3px; transition: background .12s; }
.read li::before { left: -12px; top: 12px; }
.read li:hover, .read li.lit { background: var(--color-surface-alt); }
.answer-text .cite.lit { background: var(--color-route); color: var(--color-text); }
.you-asked { margin-top: 28px; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: 0 3px 3px 0; max-width: 46em; }
.you-asked .asked { margin: 2px 0 4px; color: var(--color-text); }
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.examples h3, .how h3 { font: 500 15px/1.3 var(--font-face); margin: 0 0 8px; color: var(--color-text-2); }
.ex { display: block; width: 100%; text-align: left; font: 400 var(--read)/1.45 var(--font-face); color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: background .12s, border-color .12s; }
.ex:hover { background: var(--color-surface-alt); border-color: var(--color-route); }
.how { margin-top: 28px; max-width: 46em; }
.how p { margin: 0 0 8px; color: var(--color-text-2); }
.how b { font-weight: 500; color: var(--color-text); }
.more { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: 15px; }
@media (max-width: 760px) {
  .page-head h1 { font-size: 27px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .dash-grid, .answer, .call-grid { grid-template-columns: 1fr; gap: 28px; }
  .weeks, .weeks-axis { grid-template-columns: repeat(6, 1fr); }
  .weeks .bar:nth-child(-n+6), .weeks-axis span:nth-child(-n+6) { display: none; }
  .row { grid-template-columns: 1fr 16px; gap: 4px 10px; }
  .row .when, .row .title, .row .gist, .row .side { grid-column: 1; }
  .row .go { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .row .side { flex-direction: row; gap: 14px; align-items: center; }
  .rail { position: static; }
  .find { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .askbox { grid-template-columns: 1fr; }
  .examples { grid-template-columns: 1fr; gap: 12px; }
  .usage { grid-template-columns: 1fr 1fr 1fr; }
  .usage .num { font-size: 24px; }
  .imp-row { grid-template-columns: 22px 1fr; }
  .imp-row .d, .imp-row .t, .imp-row .who, .imp-row .left { grid-column: 2; }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .tp-head { grid-template-columns: 1fr auto 16px; }
  .tp-name { grid-column: 1; }
  .tp-viz { grid-column: 1 / -1; grid-row: 2; }
  .tp-cols { display: none; }
  .tp-count { grid-column: 2; grid-row: 1; }
  .tp-change { grid-column: 1 / -1; grid-row: 3; }
  .tp-caret { grid-column: 3; grid-row: 1; }
  .tp-quote { grid-row: 4; }
  .prow { grid-template-columns: 1fr 14px; gap: 2px 10px; }
  .prow .pname, .prow .pnum, .prow .pdate { grid-column: 1; }
  .prow .go { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .pick-list li label { grid-template-columns: 20px 1fr; }
  .pick-list .d, .pick-list .from { grid-column: 2; }
}
@media (max-width: 760px) {
  .meeting-row { grid-template-columns: 1fr 16px; gap: 4px 10px; }
  .meeting-row .meeting-row__date, .meeting-row .meeting-row__title, .meeting-row .meeting-row__oneline, .meeting-row .side { grid-column: 1; }
  .meeting-row .go { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}

/* --- Call page, redesign C: the live markup inside C's layout --- */
/* The section being read, lit in the rail. */
.toc a.is-current { color: var(--color-accent); border-left-color: var(--color-accent); }
/* Voice colours: oxblood, gold, grey, ink — the same four in the bar and the key. */
.vbar span.v1, .vrow i.v1 { background: var(--color-accent); }
.vbar span.v2, .vrow i.v2 { background: var(--color-route); }
.vbar span.v3, .vrow i.v3 { background: var(--color-muted-soft); }
.vbar span.v4, .vrow i.v4 { background: var(--color-text-2); }
.rail .voices__done { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; color: var(--color-text-2); }
.rail .voices__note { font-size: 13.5px; color: var(--color-muted); }
.open-names { font-size: 14px; }
/* Rename / Change: a quiet word beside what it edits, not an underlined button. */
.link-button.edit-link { font-size: 14px; font-weight: 400; text-decoration: none; margin-left: 10px; vertical-align: 6px; }
.rail .link-button.edit-link { margin-left: 8px; vertical-align: 0; }
.link-button.edit-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.call-head .inline-editor--title { margin-top: 6px; }
.rail .inline-editor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rail .inline-editor[hidden] { display: none; }
.rail .proj-pick { display: flex; }
.rail .proj-pick[hidden] { display: none; }   /* behind "Change" when the call has a project */
.rail .project-editor select, .rail .project-editor input[type="text"] { font-size: 14px; padding: 6px 8px; border-color: var(--color-border-strong); max-width: 100%; }
.rail a.project-badge.proj-open { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 400; color: var(--color-accent); }
.rail .source-badge { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.rail-actions .danger { color: var(--color-danger-border); }
.call-main > :first-child { margin-top: 0; }
.call-main .summary { margin: 0 0 4px; }
/* A naming task is a card with a gold edge, at the top of the main column. */
.card.task { padding: 18px 20px; }
.card.task > .card-title:first-child { margin: -18px -20px 14px; }
.task.section { margin-top: 0; }
.voice-pick { margin: 12px 0; }
/* Quotes inside a list or card: the list item carries the rule, not the quote. */
.evidence .quote, .spark .quote, .voice-card .quote { border-left: 0; padding: 0; max-width: none; color: var(--color-text-2); }
.quote .quote-speaker { font-size: 14px; color: var(--color-text-2); margin-top: 4px; }
.evidence .by { align-items: baseline; }
.evidence .by .quote-flag-form { margin: 0; }
.evidence .by button.quote-flag { font-size: 14px; font-weight: 400; color: var(--color-muted); opacity: 1; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.evidence .by button.quote-flag.is-on { color: var(--color-accent); text-decoration: none; }
/* A finding: a numbered panel (beats the older divider-list rules). */
.find.finding { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius); margin-top: 14px; }
.find .finding__heading { font-size: var(--read); line-height: 1.5; margin: 2px 0 4px; max-width: 40em; }
.find .finding__reported.why { color: var(--color-text-2); font-size: var(--read); margin: 0 0 14px; }
.find.finding--flagged .finding__heading, .find.finding--flagged .evidence { opacity: .62; }
.finding__actions.votes { border-top: 0; padding-top: 0; margin-top: 16px; gap: 8px; }
.votes button.chip { font: 400 14px var(--font-face); color: var(--color-text-2); opacity: 1; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 5px 12px; text-decoration: none; }
.votes button.chip:hover { background: var(--color-surface-alt); }
.votes button.chip.is-on { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-bg); font-weight: 500; }
.find-banner form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sparks-redo { margin: 0 0 14px; }
.sparks .spark { margin-bottom: 8px; }
.askbox .loading-note { grid-column: 1 / -1; }
.askbox .ask-input { resize: vertical; min-height: 44px; }
.empty form { margin-top: 10px; }
/* Sparks read in two columns (C); the older flex list rule must not win. */
.sparks.quotes-list { display: block; columns: 2 320px; column-gap: 48px; }
/* Each quote its own block with a gold edge, like the quotes under a finding
   (Bryan, 2026-10-15, option B): side by side, the two newspaper-style columns
   blended into rows read across. Kept on two columns for page length. The
   hover and voice highlights still tint the block. */
.sparks.quotes-list .spark { margin: 0 0 14px; padding: 4px 8px 4px 16px; border-left: 2px solid var(--color-route); border-radius: 0 3px 3px 0; }
/* Sparks are numbered within each call (Bryan, 2026-10-15, option A): a quiet
   grey number in the margin, outside the gold edge. 1–5 first, then "Show
   more" carries on from 6, so a call's list reads as finite and the order
   (left to right, row by row) is plain. One counter per call: the
   Sparks page resets it per call, the call page per its Sparks section. */
.spark-call, #sparks { counter-reset: spark; }
.sparks.quotes-list { padding-left: 26px; }
.sparks.quotes-list .spark { counter-increment: spark; position: relative; }
.sparks.quotes-list .spark::before { content: counter(spark); position: absolute; left: -28px; top: 5px; width: 18px; text-align: right;
  font: 400 14px/1.5 var(--font-face); color: var(--color-text-2); font-variant-numeric: tabular-nums; }
.evidence.quotes-list { display: grid; gap: 14px; }
/* A flag strip added by the page script lands as a direct child of the
   numbered panel; keep it in the text column, not the narrow number column. */
.find > .flag-strip { grid-column: 2; }

/* --- Ask page, redesign C --- */
.ask-page-form .ask-form__scope { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ask-page-form .ask-call-pick { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; max-width: 760px; }
.ask-page-form .ask-call-pick[hidden] { display: none; }
.ask-page-form .ask-call-pick input { flex: 1 1 240px; }
.ask-page-form .ask-call-pick select { flex: 2 1 300px; }
.ask-page-form .look-hint { margin: 0 0 12px; font-size: 14px; }
.ask-page-form .loading-note, .ask-page-form .ask-coverage { margin-top: 10px; }
.askbox .ask-input { font-size: var(--read); }
/* The question asked: its own block with a red edge, above the answer. */
.ask-answer__question { margin: 28px 0 20px; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius) var(--radius) 0; max-width: 46em; font-size: var(--read); color: var(--color-text); }
.ask-answer__question .text-muted { display: block; font-size: 14px; }
.ask-layout { margin-top: 8px; }
.ask-layout:has(> aside) { grid-template-columns: minmax(0, 1fr) 300px; }
.ask-layout:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
.ask-answer__text { font-size: var(--read); line-height: 1.5; max-width: 40em; margin: 0 0 18px; }
.ask-citations { display: grid; gap: 14px; margin-top: 8px; }
.ask-citations .quote-speaker a { font-weight: 400; }
.ask-citations .ask-more, .read .ask-more { font-size: 14px; }
.read .ask-more { display: block; }
.read li { list-style: none; }
.read .t { color: var(--color-text); }
.ask-read .finding__note { font-size: 14px; margin: 0 0 12px; }
/* "Read that one carefully" and the voice note: the gold-edged notice, not an error. */
.ask-flag { display: block; margin: 0 0 14px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-route); border-radius: 0 var(--radius) var(--radius) 0; color: var(--color-text-2); }
.ask-flag strong { display: block; font-weight: 600; color: var(--color-text); }
/* The live page's next-step rows, not C's "Ask another question" heading. */
.ask-next { margin-top: 18px; padding-top: 0; border-top: 0; }
.ask-next::before { content: none; display: none; }
.ask-next__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ask-result { margin-top: 0; }
.ask-cost { font-size: 14px; margin-top: 20px; }
@media (max-width: 760px) { .ask-layout:has(> aside) { grid-template-columns: 1fr; } }
.read li.candidate { display: block; border: 0; padding: 6px 10px 10px; }
.read .ask-more, .ask-citations .ask-more { margin-left: 0; font-weight: 400; }
.ask-citations .quote-speaker .ask-more { margin-left: 8px; }
.ask-citations { margin-bottom: 18px; }

/* --- Settings, redesign C --- */
.settings-c { display: block; max-width: 900px; }
.settings-c > .section:first-child, .settings-c > .task + .section { margin-top: 0; }
.settings-c .task { margin-bottom: 8px; }
.settings-c .task p { margin: 0 0 12px; color: var(--color-text-2); max-width: 64ch; }
.settings-c .api-key-current { margin: 0 0 12px; }
.settings-c .api-key-masked { font-family: var(--font-mono); font-size: 14px; }
.settings-c .settings-actions { margin: 0; }
.settings-c .settings-actions form { margin: 0; }
.settings-c .settings-danger { color: var(--color-danger-border); font-size: 15px; text-decoration: none; font-weight: 400; }
.settings-c .linkbtn { font-size: 15px; }
.settings-c .keyform { max-width: 760px; }
.settings-c .usage-table { margin-top: 18px; width: 100%; max-width: 760px; }
.settings-c .usage { margin-bottom: 4px; }
.drop.is-over { border-color: var(--color-route); }
.paste-box textarea { margin-top: 10px; max-width: 680px; }
.upload-actions { margin-top: 22px; }

/* --- Import from Granola and the import check, redesign C ---
   The same markup (it carries the import driver and 200-odd checks), in C's
   look: plain sections rather than cards, sentence-case month headings that
   pin below the top bar, striped rows, and the Import bar pinned to the bottom
   of the window so the cost and the button are always in view. */
.triage-section.card { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 28px; }
.triage-section__header { padding: 0 0 8px; border-bottom: 1px solid var(--color-border-strong); cursor: default; }
.triage-section__title { font-size: 15px; }
.triage-section__title strong { font-weight: 500; }
.triage-select-all { font: 400 14px var(--font-face); color: var(--color-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.triage-select-all:hover { background: none; color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.import-head { top: var(--head-h); background: var(--color-bg); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 10px 12px 4px; border-bottom: 0; }
.import-head__meeting { padding-left: 32px; }
.import-head, .import-row { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 300px); padding-left: 12px; padding-right: 12px; }
.import-month { position: sticky; top: calc(var(--head-h) + 30px); z-index: 1; background: var(--color-bg); font-size: 16px; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--color-text); padding: 16px 12px 6px; border-bottom: 0; justify-content: flex-start; gap: 16px; }
.import-month .month-toggle { font-size: 14px; font-weight: 400; }
.import-row { border-bottom: 0; border-radius: var(--radius); padding-top: 11px; padding-bottom: 11px; font-size: var(--read); }
.import-row:nth-of-type(even) { background: var(--color-surface-alt); }
.import-row:hover { background: var(--color-accent-bg); }
.import-row__title { font-weight: 500; }
.import-row__meeting input { width: 17px; height: 17px; accent-color: var(--color-accent); }
.import-row__date, .import-row__who { font-size: 14px; }
.import-row__who { color: var(--color-text-2); }
.review-evidence { color: var(--color-text-2); }
.review-fate { color: var(--color-danger-text); }
.triage-confirm-bar.card { position: sticky; bottom: 0; z-index: 3; background: var(--color-bg); border: 0; border-top: 1px solid var(--color-border-strong); border-radius: 0; box-shadow: none; padding: 14px 0 10px; margin: 8px 0 0; }
.triage-confirm__summary { font-weight: 500; font-size: 15px; }
.triage-confirm__note { font-size: 14px; color: var(--color-text-2); }
.import-progress.card { border-left: 3px solid var(--color-route); }
.import-row .checkbox-label.import-row__meeting { font-size: var(--read); align-items: center; }
.settings-c .api-key-current .api-key-masked { background: none; padding: 0; }

/* --- Signed-out screens, redesign C --- */
.site-header--out { position: static; }
.auth .auth-form { display: block; }
.auth .auth-card .field { display: block; }
.auth .btn--full { margin-top: 4px; }
.auth .codes-warn { margin-top: -12px; }
.auth .codes-warn b { font-weight: 600; }
.auth .code-input { font-family: var(--font-mono); }
.auth .codes .recovery-code { letter-spacing: .02em; }
.auth .recovery-actions { margin-bottom: 0; }
.auth > .hint { margin: 14px 0 0; }
.auth .wait-note:empty { display: none; }
.auth .check, .auth .check span { font-weight: 400; font-size: 15px; }

/* --- What's new, redesign C --- */
.release .release__notes { padding-left: 20px; color: var(--color-text-2); max-width: 64ch; }
.release .release__notes li { margin-bottom: 6px; line-height: 1.5; }
.release .release__notes strong { font-weight: 500; color: var(--color-text); }
.release .release__section { font-size: 15px; font-weight: 500; margin: 18px 0 6px; }
.release .release__status { font-size: 14px; color: var(--color-muted); margin: 8px 0 0; }
.release .release__headline { margin: 10px 0 0; color: var(--color-text); }
.release .release__badge.pill { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }

/* --- Projects, redesign C --- */
.prow .pname { color: var(--color-text); }
.xfind.find.finding { grid-template-columns: 1fr; }
.xfind .evidence-call { margin-top: 12px; }
.xfind .evidence-call__head { margin: 0 0 6px; font-size: 14px; color: var(--color-muted); }
.xfind .evidence-call__head a { font-weight: 500; }
.xfind .evidence-call__date { margin-left: 8px; }
.xfind .evidence .quote-item { border-left: 2px solid var(--color-route); padding: 2px 0 2px 16px; }
.xfind .finding__kind { display: inline-block; font-size: 13px; color: var(--color-text-2); border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 1px 9px; margin: 0 0 6px; }
.xfind .quote-flag-form button.quote-flag { font-size: 14px; font-weight: 400; color: var(--color-muted); opacity: 1; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.finding-group .finding-empty { margin-top: 14px; }
.finding-group .finding-empty__note { font-size: 14px; color: var(--color-muted); margin: 8px 0 0; }
.recent .rrow .title small.proj-gist { display: block; font-size: 14px; color: var(--color-text-2); margin-top: 2px; font-weight: 400; }
.picker .pick-list li label { align-items: center; }
.picker .pick-list li label input { width: 17px; height: 17px; accent-color: var(--color-accent); margin: 0; }
.picker .pick-list li label { font-weight: 400; }
.picker .pick-list li label span:nth-of-type(2) { font-weight: 500; }
/* Project page calls: title reads as the title, summary steps back (Bryan, 2026-10-14). */
.recent .rrow .title { font-weight: 500; }
.recent .rrow .title small.proj-gist { font-size: 14px; color: var(--color-muted); font-weight: 400; margin-top: 3px; line-height: 1.45; }
/* Quote and speaker are two different things (C): the quote in full-strength text with
   curly marks, the speaker smaller and grey beneath. Bryan, 2026-10-14. */
.spark .quote, .evidence .quote { color: var(--color-text); }
.quote q { quotes: "\201C" "\201D" "\2018" "\2019"; }
.quote .quote-speaker { display: block; font-size: 14px; color: var(--color-muted); font-style: normal; margin-top: 4px; }

/* Call page against C (2026-10-14 review): tight voice rows; speaker, position and
   the flag link on one line under each quote; the reported line steps back. */
dd.talk-share { display: block; }
dd.talk-share .vrow { padding-top: 3px; padding-bottom: 3px; }
.evidence .by .quote-speaker { display: inline; margin: 0; font-size: 14px; color: var(--color-text-2); }
.find .finding__reported.why { color: var(--color-muted); font-size: 14px; }
#project-submit[hidden] { display: none; }
.site-footer a { color: var(--color-accent); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-hover); text-decoration: underline; }
/* Who said a Spark: an em dash and a lighter grey (4.69:1 light, 5.35:1 dark), so a
   quote and its speaker can't be read as one run of text (Bryan, 2026-10-14). */
.spark .quote .quote-speaker { color: var(--color-attrib); font-size: 14px; margin-top: 6px; }
.spark .quote .quote-speaker::before { content: "\2014\00a0"; }
/* The sentence under Calls by week changes on hover; it keeps the room of its
   longest form (3 lines) so nothing below it moves, and runs the column's full
   width instead of breaking early. */
.dash-grid .chart-note { max-width: none; min-height: 4.5em; margin-top: 10px; }
/* Tighter dashboard rhythm, so the first row of sections and the top of Recent
   calls sit above the fold (Bryan, 2026-10-15). The note's 3-line reserve stays. */
.dashboard .page-head { padding-bottom: 8px; }
.dashboard .dash-grid { row-gap: 16px; }
.dashboard .dash-grid.section { margin-top: 20px; }
#codes-save-msg[hidden] { display: none; }
.auth .keep .form-msg { margin: 0 0 12px; }
/* Month headings inside the Add calls list: they pin to the top of the list as it scrolls. */
.pick-list li.pick-month { position: sticky; top: 0; z-index: 1; background: var(--color-surface-muted); font-size: 14px; font-weight: 500; color: var(--color-text-2); padding: 6px 12px; }
.pick-list li.pick-month[hidden] { display: none; }
.picker .pick-list li[data-pick-text]:nth-child(even) label { background: transparent; }
.picker .pick-list li[data-pick-text] + li[data-pick-text] label { border-top: 1px solid var(--color-border); }
.pick-list { max-height: 360px; }

/* Import check (redesign C): cards for flagged calls, Remove/Undo per row. */
.import-row.rv-row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 160px) 90px; align-items: center; font-size: var(--read); }
.import-row.rv-row.rv-flag { align-items: start; background: var(--color-surface); border: 1px solid var(--color-border); margin-bottom: 10px; padding: 14px 16px; }
.import-row.rv-row .tt { display: grid; gap: 3px; }
.import-row.rv-row .rv-x { justify-self: end; }
.import-row.rv-row .fate[hidden] { display: none; }
.import-row.rv-row.import-row--dropping { background: var(--color-danger-bg); }
.import-row.rv-row.import-row--dropping .t { text-decoration: line-through; text-decoration-color: var(--color-border-strong); color: var(--color-muted); }
.import-row.rv-row .rtag { display: inline-block; margin-right: 8px; }
.rv-head .triage-select-all { margin-left: auto; }
.rv-foot.triage-confirm-bar { display: block; }
.rv-foot .btnrow { margin-top: 8px; }
.rv-foot .hint { margin: 10px 0 0; }
@media (max-width: 760px) {
  .import-row.rv-row { grid-template-columns: 1fr auto; }
  .import-row.rv-row .d, .import-row.rv-row .ev, .import-row.rv-row .fate { grid-column: 1; }
  .import-row.rv-row .rv-x { grid-column: 2; grid-row: 1 / span 3; }
}
.import-row.rv-row.import-row--dropping { background: var(--color-danger-bg) !important; border-color: var(--color-danger-border); }
/* The label keeps its column whether shown or not, so every Remove button lines up. */
.import-row.rv-row .fate[hidden] { display: inline; visibility: hidden; }
.import-row.rv-row.import-row--dropping .fate { visibility: visible; color: var(--color-danger-text); }
#fix-task[hidden] { display: none; }
.rail-actions button[data-fix-open] { color: var(--color-accent); }
#fix-task { scroll-margin-top: calc(var(--head-h) + 16px); }

/* Add meetings: one call, or several at once (redesign C batch D). */
#upload-page .bulk-only { display: none; }
#upload-page.bulk-on .bulk-only { display: revert; }
#upload-page.bulk-on .one-only { display: none; }
#upload-page .bgroup[hidden], #bulk-left[hidden], .bulk-done[hidden], #bulk-progress[hidden] { display: none; }
#bulk .brow .rm { grid-column: 4; grid-row: 1; }
#bulk .bulk-done { margin: 0 0 14px; }
#bulk .bulk-foot { margin-top: 24px; }
.flash[hidden], .warn[hidden] { display: none; }

/* Who said a quote, everywhere a quote is shown: an em dash and the lighter
   attribution grey, like Sparks (Bryan, 2026-10-15: the findings quote line
   read as one run with the quote). The position and the flag link beside it
   stay muted grey. */
.quote-speaker, .evidence .by .quote-speaker, .quote .quote-speaker { color: var(--color-attrib); font-style: normal; }
.quote-speaker::before { content: "\2014\00a0"; }

/* Findings whose quotes are hidden sit below the numbered ones, under their
   own small heading, with an empty slot where the number would be: they have
   no dots on the timeline, so a number would point at nothing (2026-10-15). */
.finding-earlier { font-size: 15px; font-weight: 500; color: var(--color-text-2); margin: 28px 0 0; }
.find .pin.pin--none { visibility: hidden; }

/* "Doesn't support this finding" shows only on the quote under the pointer (or
   holding keyboard focus); a quote already marked keeps showing it (Bryan,
   2026-10-15, option B over "only after Flag"). visibility keeps its space, so
   nothing shifts. Screens with no hover show it always, as before. */
.evidence .quote-item .quote-flag-form { visibility: hidden; }
.evidence .quote-item:hover .quote-flag-form,
.evidence .quote-item:has(:focus-visible) .quote-flag-form,
.evidence .quote-item .quote-flag-form:has(.is-on) { visibility: visible; }
@media (hover: none) { .evidence .quote-item .quote-flag-form { visibility: visible; } }

/* Sparks read in ROWS, left to right (Bryan, 2026-10-15): 1 | 2, then 3 | 4.
   They had flowed down the left column and then the right, so the numbers read
   as jumbled and a short column left a gap. One column on narrow screens. */
.sparks.quotes-list { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-items: start; }
@media (max-width: 760px) { .sparks.quotes-list { grid-template-columns: minmax(0, 1fr); } }
/* Who said it and where, on one line under the quote, like a finding's quotes. */
.spark-by { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 14px; color: var(--color-muted); }
.spark .quote .spark-by .quote-speaker { display: inline; margin: 0; }

/* "Summarize again" asks in the same place as Remove, but it is not a danger:
   neutral panel with the gold edge, not pink (pink means an error or a delete). */
#redo-confirm { border-color: var(--color-border-strong); border-left-color: var(--color-route); background: var(--color-surface); color: var(--color-text); }
.confirm-list { margin: 0 0 10px; padding-left: 18px; }
.confirm-list li { margin: 0 0 6px; line-height: 1.45; }

/* Date columns widen ONLY when the list holds a date from another year, which
   then prints its year ("Dec 17, 2026"); otherwise they stay narrow (Bryan,
   2026-10-16). `has-years` comes from datefmt.needs_year on the list's dates. */
.has-years .rrow { grid-template-columns: 96px 1fr auto 14px; }
.plist.has-years .prow { grid-template-columns: minmax(0, 1fr) 90px 200px 150px 14px; }
#review-form.has-years .import-row.rv-row { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 160px) 90px; }
@media (max-width: 760px) {
  .plist.has-years .prow { grid-template-columns: 1fr 14px; }   /* keep the stacked phone layouts */
  #review-form.has-years .import-row.rv-row { grid-template-columns: 1fr auto; }
}

/* The one-voice card's "Change" swaps the name line for the choices in place. */
.voices[hidden], .voices__done[hidden] { display: none; }
.voices__clear { margin: 0; }

/* Voices, option A (2026-10-16): the several-voices card hides once named
   (the side panel's "Edit names" reveals it); a named one-voice call edits its
   name in the side panel. */
.voices-card[hidden], .solo-edit[hidden], #solo-display[hidden] { display: none; }
.solo-edit .fl { display: block; font-size: 14px; color: var(--color-text-2); margin: 0 0 4px; }
.solo-edit .input { width: 100%; box-sizing: border-box; }
.solo-edit .btnrow { display: flex; gap: 8px; margin-top: 8px; }
.solo-edit__more { margin-top: 10px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.solo-edit__more form { display: inline; margin: 0; }

/* Send feedback (2026-10-16): a box that opens where the account menu was. */
.header-nav .acct-item[data-fb-open] { background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.fb-box, .fb-sent { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 30; text-align: left; }
.fb-box { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 16px; }
.fb-box[hidden], .fb-sent[hidden], .fb-error[hidden] { display: none; }
.fb-box h3 { font-size: 16px; font-weight: 500; margin: 0 0 4px; color: var(--color-text); }
.fb-box .fb-ask { font-size: 14px; color: var(--color-text-2); margin: 0 0 10px; line-height: 1.45; }
.fb-box textarea { width: 100%; box-sizing: border-box; min-height: 110px; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-bg); color: var(--color-text); resize: vertical; }
.fb-box .fb-meta { font-size: 13px; color: var(--color-muted); margin: 8px 0 0; line-height: 1.45; }
.fb-box .fb-error { font-size: 13px; color: var(--color-danger-text); margin: 8px 0 0; }
.fb-box .fb-row { display: flex; gap: 8px; margin-top: 12px; }
.fb-sent { padding: 10px 14px; border-radius: 6px; font-weight: 500; background: var(--color-success-bg-soft); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
/* The owner page. */
.owner-notes { border-top: 1px solid var(--color-border); }
.owner-note { display: grid; grid-template-columns: 90px 200px 120px minmax(0, 1fr); gap: 12px; padding: 12px; border-bottom: 1px solid var(--color-border); align-items: baseline; font-size: 15px; }
.owner-note.alt { background: var(--color-surface-alt); }
.owner-note .m, .owner-week .m { color: var(--color-muted); font-size: 14px; }
.owner-note__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.owner-table-wrap { overflow-x: auto; }
.owner-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.owner-table th { text-align: left; font-weight: 500; font-size: 14px; color: var(--color-text-2); padding: 8px 10px; border-bottom: 1px solid var(--color-border-strong); }
.owner-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); }
.owner-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.owner-lede { margin: 0 0 14px; color: var(--color-text-2); }
.owner-note-small { font-size: 14px; color: var(--color-muted); margin: 10px 0 0; max-width: 60em; }
.owner-h3 { font-size: 15px; font-weight: 500; margin: 24px 0 8px; }
.owner-week { display: grid; grid-template-columns: 140px 110px 160px; gap: 12px; padding: 6px 0; font-size: 15px; border-bottom: 1px solid var(--color-border); }
@media (max-width: 760px) {
  .owner-note { grid-template-columns: 1fr; gap: 2px; }
  .fb-box, .fb-sent { width: min(340px, calc(100vw - 32px)); }
}

.owner-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 15px; }
.owner-jump a { color: var(--color-accent); }
#feedback, #usage, #landing, #by-week { scroll-margin-top: calc(var(--head-h) + 16px); }
.owner-h3 .muted { font-weight: 400; font-size: 14px; }

/* A button, menu or page name in help text: medium bold, so it stands out as
   something to look for; a page name is also a link (Bryan, 2026-10-16). */
b.ui, a.ui { font-weight: 500; }

/* Owner-editable page text (2026-10-16, app/page_text.py; Glossary, What's new,
   the dashboard box). A saved edit carries no classes, so each block's
   wrapper styles its children the way the original markup was styled. */
.guide-body > p { font-size: var(--read); line-height: 1.55; margin: 0 0 12px; }
.pt-body[hidden], .pt-edit[hidden], .pt-editor[hidden],
.pt-owner__copied[hidden], .err[hidden] { display: none; }
.guide-entry h2 .pt-edit { margin-left: auto; font: 400 14px/1.4 var(--font-face); }
.pt-owner { margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--color-border);
  border-radius: 6px; background: var(--color-surface); font-size: 14px; }
.pt-owner p { margin: 0 0 10px; }
.pt-owner__row { display: flex; align-items: center; gap: 12px; }
.pt-owner__copied { color: var(--color-text-2); }
.pt-versions { margin-top: 12px; }
.pt-versions summary { cursor: pointer; }
.pt-versions ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pt-versions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 6px 0; border-top: 1px solid var(--color-border); }
.pt-versions li > span:first-child { min-width: 72px; font-weight: 500; }
.pt-versions .m { color: var(--color-text-2); }
.pt-versions form { margin: 0; }
.pt-editor { margin: 0 0 12px; }
.pt-editor__actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.pt-editor__original { margin-left: auto; }
.pt-editor .err { margin-top: 10px; }
/* Quill's own theme, recolored with the app's tokens so dark mode works. */
#pt-editor .ql-toolbar.ql-snow, #pt-editor .ql-container.ql-snow { border-color: var(--color-border-strong); }
#pt-editor .ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; background: var(--color-surface-alt); }
#pt-editor .ql-container.ql-snow { border-radius: 0 0 6px 6px; background: var(--color-surface);
  font: 400 var(--read)/1.55 var(--font-face); color: var(--color-text); }
#pt-editor .ql-editor { padding: 14px 16px; min-height: 160px; }
#pt-editor .ql-editor h3 { font: 500 14px/1.4 var(--font-face); color: var(--color-text-2); margin: 14px 0 6px; }
#pt-editor .ql-editor p { margin: 0 0 10px; }
#pt-editor .ql-snow .ql-stroke { stroke: var(--color-text); }
#pt-editor .ql-snow .ql-fill { fill: var(--color-text); }
#pt-editor .ql-snow button:hover .ql-stroke, #pt-editor .ql-snow button.ql-active .ql-stroke { stroke: var(--color-accent-text); }
#pt-editor .ql-snow button:hover .ql-fill, #pt-editor .ql-snow button.ql-active .ql-fill { fill: var(--color-accent-text); }
#pt-editor .ql-snow a { color: var(--color-accent-text); }
#pt-editor .ql-snow .ql-tooltip { background: var(--color-surface); color: var(--color-text);
  border-color: var(--color-border-strong); box-shadow: none; z-index: 5; }
#pt-editor .ql-snow .ql-tooltip input[type=text] { background: var(--color-bg); color: var(--color-text);
  border-color: var(--color-border-strong); }

.guide > .pt-edit:not([hidden]) { display: block; margin: 26px 0 -20px auto; font-size: 14px; }
/* One line above the closing lines as a block, none between paragraphs (Bryan,
   2026-10-16: a line per paragraph read as separate sections). */
.guide-footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.guide-footer > p, .guide-footer > .guide-foot { margin: 0 0 10px; padding: 0; border: 0;
  color: var(--color-text-2); font-size: 14px; }
.release__body ul { padding-left: 20px; color: var(--color-text-2); max-width: 64ch; margin: 0 0 12px; }
.release__body li { margin-bottom: 6px; line-height: 1.5; }
.release__body b, .release__body strong { font-weight: 500; color: var(--color-text); }
.release__body > p { color: var(--color-text-2); max-width: 64ch; }
.news-body ul { margin: 0; padding-left: 20px; color: var(--color-text-2); }
.news-body li { margin-bottom: 8px; }
.news-body li::marker { color: var(--color-route); }
.news-body > p { color: var(--color-text-2); margin: 0 0 8px; }
/* A project's calls added or moved in since the last look (2026-10-16). */
.lookagain-note { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-route); border-radius: 6px; background: var(--color-surface); }
.lookagain-note h3 { font: 600 15px/1.4 var(--font-face); margin: 0 0 4px; color: var(--color-text); }
.lookagain-note p { margin: 0 0 10px; color: var(--color-text-2); }
.lookagain-note__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.lookagain-note__row .loading-note { flex-basis: 100%; margin: 0; }
.lookagain-note__cost { font-size: 14px; color: var(--color-text-2); }
.finding__heading .finding-new { font-size: 12px; font-weight: 500; vertical-align: 2px; }
.pill.not-looked { font-size: 12px; white-space: nowrap; }
.startover { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--color-border-strong);
  border-radius: 6px; background: var(--color-surface); }
.startover[hidden] { display: none; }
.startover p { margin: 0 0 10px; }
.startover__row { display: flex; align-items: center; gap: 16px; }
.access-notes { margin-top: 18px; }
.access-notes > p, .access-notes > .guide-foot { margin: 0 0 10px; padding: 0; border: 0;
  color: var(--color-text-2); max-width: 64ch; font-size: inherit; }
.access-notes > h3 { font: 500 15px/1.4 var(--font-face); color: var(--color-text); margin: 0 0 6px; }
.release-head .pt-edit, .section-head .pt-edit { font-size: 14px; margin-left: 10px; }

/* "Send this error to …" under an error (2026-10-20, main.js). */
.report-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.report-note { font-size: 13px; color: var(--color-muted); }

/* "Summarize all older calls again" on Meetings (2026-10-20). */
.redo-older__ask { margin-top: 10px; }
.redo-older__ask > summary { display: inline-flex; list-style: none; cursor: pointer; }
.redo-older__ask > summary::-webkit-details-marker { display: none; }
.redo-older__ask[open] > summary { display: none; }
.redo-older__confirm p { margin: 0 0 8px; }