/* ═══════════════════════════════════════════════════════════════════════════
   SECOND BRAIN — Spunto's design
   ═══════════════════════════════════════════════════════════════════════════

   The same system spunto.link is built on (shadcn, neutral base, Geist), so
   the two read as one product. Plain CSS rather than Tailwind: this app has no
   build step and should not grow one for a stylesheet.

   1. TOKENS ARE SPUNTO'S. Every colour below is a copy of src/app/globals.css
      in spunto.link, light and dark. Change them there and here together.
   2. NO COLOUR CARRIES MEANING ON ITS OWN. Domain is still told by border STYLE
      — solid client, double company, dotted personal — with a shade on top, so
      it survives greyscale and colour blindness.
   3. CARDS, NOT RULES. Rounded, 1px, quiet. Hierarchy comes from weight and
      the muted foreground, not from size jumps or uppercase labels.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --success: oklch(0.527 0.154 150);
  --warning: oklch(0.555 0.163 48);
  /* Soft fills for status badges: a tint of the tone, and a line to go with it. */
  --success-soft: oklch(0.975 0.03 150);
  --success-soft-line: oklch(0.92 0.05 150);
  --warning-soft: oklch(0.978 0.03 70);
  --warning-soft-line: oklch(0.93 0.05 70);
  --info: oklch(0.488 0.2 264);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --radius: 0.625rem;

  /* Domain shades, read by app.js for the sparklines too. */
  --client: var(--foreground);
  --company: var(--chart-3);
  --personal: var(--chart-2);

  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --pad: 16px;
  --gap: 16px;
  --max: 1600px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* The theme menu sets data-theme="light" or "dark"; with neither, the system
   decides. Dark is written twice because a media query cannot be combined with
   an attribute selector any other way. */
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --popover: oklch(0.205 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --destructive: oklch(0.704 0.191 22.216);
  --success: oklch(0.75 0.17 150);
  --warning: oklch(0.8 0.15 75);
  --success-soft: oklch(0.27 0.04 150);
  --success-soft-line: oklch(0.38 0.07 150);
  --warning-soft: oklch(0.28 0.04 75);
  --warning-soft-line: oklch(0.4 0.07 75);
  --info: oklch(0.75 0.14 255);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-3: oklch(0.708 0 0);
    --chart-2: oklch(0.556 0 0);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --popover: oklch(0.205 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --success: oklch(0.75 0.17 150);
  --warning: oklch(0.8 0.15 75);
  --success-soft: oklch(0.27 0.04 150);
  --success-soft-line: oklch(0.38 0.07 150);
  --warning-soft: oklch(0.28 0.04 75);
  --warning-soft-line: oklch(0.4 0.07 75);
  --info: oklch(0.75 0.14 255);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-3: oklch(0.708 0 0);
  --chart-2: oklch(0.556 0 0);
}

* { box-sizing: border-box; border-color: var(--border); }

/* The `hidden` attribute only sets display:none at user-agent specificity, so
   ANY class-level `display` silently beats it. This bug shipped twice here, so
   it is settled globally rather than remembered. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* A column at least the window's height, so the footer sits at the bottom
     of the window when a view is short. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* The page column, as in Spunto: full-bleed header, content capped at 1600px. */
body > section,
body > .view,
body > footer {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* The card. Everything the board draws is one of these. */
.blk,
.panel,
.bal,
.col,
.day,
.sig,
.jrow,
.zed,
.rst,
.kw-section,
.cfg-head,
#keywords-head,
.week-head,
#week-loose {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  min-width: 0;
}

.label {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* app.js writes every heading in lower case; Spunto sets them in sentence
   case. Done here so the copy in the code stays as it is. */
.zone-title::first-letter,
.zone-note::first-letter,
.cfg-h::first-letter,
.kw-head-title::first-letter,
.rst-label::first-letter,
.zed-block-label::first-letter,
.panel > h3::first-letter,
.col > h2::first-letter,
.jday::first-letter,
.empty::first-letter,
.row-why::first-letter,
.kw-section-title::first-letter,
.quiet-head::first-letter,
.drawer h2::first-letter,
.drawer h4::first-letter,
.btn::first-letter,
.jaction::first-letter,
.kw-btn::first-letter,
.flash::first-letter,
footer::first-letter { text-transform: uppercase; }

/* Headings: Spunto's — weight, not size or capitals. */
.display,
.zone-title,
.cfg-h,
.kw-head-title,
.week-title,
.week-head .display,
.drawer h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.brand-mark { width: 20px; height: 20px; flex: 0 0 auto; color: var(--foreground); }

#tabs { display: flex; align-items: center; gap: 4px; }

.tab {
  font: inherit;
  font-size: 14px;
  text-transform: capitalize;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.tab:hover { color: var(--foreground); }
.tab.is-on { background: var(--muted); color: var(--foreground); font-weight: 500; }

.head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#search {
  width: 240px;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}
#search::placeholder { color: var(--muted-foreground); }
#search:focus { outline: 0; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }

.health {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--border);
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.health[hidden] { display: none; }
.health.up   { background: var(--muted-foreground); }
.health.down { background: var(--destructive); }

/* ── capture ─────────────────────────────────────────────────────────────── */

/* The box you type in, the phrases it recognises, and what it said back: one
   card, the most important control on every page. */
#capture-panel {
  margin-top: 24px;
  margin-bottom: 24px;
}
#capture-panel > * { max-width: 100%; }

.capture-wrap {
  position: relative;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.capture-wrap:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

/* Every one of these must match across the three layers. One pixel of
   difference in padding, border, font or line-height and the highlight slides
   out of register with the text — and the caret slides out from under the
   letter it belongs to. `test/styles.test.js` enforces that they stay together. */
#capture,
.capture-underlay,
.capture-measure {
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius-lg);
  font: 400 15px/1.55 var(--sans);
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.capture-underlay {
  position: absolute;
  inset: 0;
  background: transparent;
  color: var(--foreground);
  overflow: hidden;
  /* The textarea above owns every interaction; this layer is purely visual. */
  pointer-events: none;
}

#capture {
  position: relative;
  display: block;
  background: transparent;
  /* The text itself is invisible — the underlay draws it. Only the caret and
     the selection stay visible, which is what makes the illusion hold. */
  color: transparent;
  caret-color: var(--foreground);
  resize: vertical;
}
#capture::placeholder { color: var(--muted-foreground); }
#capture::selection { background: color-mix(in oklch, var(--primary) 25%, transparent); }
#capture:focus { outline: 0; }
#capture:disabled { opacity: 0.5; }

/* ── capture highlighting ────────────────────────────────────────────────── */

/* Strips the browser's yellow default off <mark> so each .hl-* class can say
 * what it wants. `:where()` is load-bearing: written as `.capture-underlay mark`
 * this reset outranks every single-class `.hl-*` rule below and no
 * background-based highlight ever renders. `:where()` adds zero specificity. */
.capture-underlay :where(mark) {
  background: none;
  color: inherit;
}

/* THE RULE FOR EVERY .hl-* BELOW: nothing here may change how wide the text is.
 * The textarea lays the text out and owns the caret; this layer only paints it.
 * BANNED: padding, margin, border, letter-spacing, word-spacing, font-weight,
 * font-size, font-family, font-variant-numeric, font-style, text-transform.
 * ALLOWED: color, background, text-decoration, box-shadow, outline,
 * border-radius. `test/styles.test.js` enforces it. */
.hl-mention          { background: var(--muted); border-radius: 4px; box-shadow: 0 0 0 2px var(--muted); }
.hl-mention-client   { text-decoration: underline 2px solid var(--client); text-underline-offset: 4px; }
.hl-mention-company  { text-decoration: underline 2px double var(--company); text-underline-offset: 4px; }
.hl-mention-personal { text-decoration: underline 2px dotted var(--personal); text-underline-offset: 4px; }
.hl-mention-none     { text-decoration: underline 1px solid var(--muted-foreground); text-underline-offset: 4px; }

/* A mark that RESOLVED: the strongest statement in the box, so it is the one
   thing set as a filled badge. */
.hl-marked,
.hl-marked-client, .hl-marked-company, .hl-marked-personal, .hl-marked-none {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--primary);
}

/* A mark the vault has never heard of. Weaker, and not alarming: nothing is
   lost, it lands in config for you to accept. */
.hl-marked-new {
  color: var(--muted-foreground);
  text-decoration: underline 2px dotted var(--muted-foreground);
  text-underline-offset: 4px;
}

/* Trigger phrases get underlines rather than fills, so a name and a phrase can
   sit side by side without the box turning into a pattern chart. */
.hl-owe    { text-decoration: underline 2px solid var(--foreground); text-underline-offset: 4px; }
.hl-owed   { text-decoration: underline 3px double var(--foreground); text-underline-offset: 4px; }
.hl-date   { text-decoration: underline 2px dashed var(--muted-foreground); text-underline-offset: 4px; }
.hl-ask    { text-decoration: underline 2px wavy var(--muted-foreground); text-underline-offset: 4px; }
.hl-rhythm { text-decoration: overline 2px dotted var(--muted-foreground); }
.hl-time   { text-decoration: underline 1px solid var(--muted-foreground); text-underline-offset: 4px; }
.hl-number { background: var(--muted); border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }

/* ── suggestion chips ───────────────────────────────────────────────────── */

.hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.hint {
  font: inherit;
  font-size: 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.hint:hover { background: var(--muted); color: var(--foreground); }
.hint > i { font-style: normal; opacity: 0.6; }

.flash {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.flash.err { color: var(--destructive); }

.editing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-size: 13px;
}
.editing-banner button {
  margin-left: auto;
  font: inherit;
  font-size: 13px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px 10px;
  color: inherit;
  cursor: pointer;
}
.editing-banner button:hover { background: var(--accent); }

/* ── name completion ────────────────────────────────────────────────────── */

.capture-measure {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.ac-menu {
  position: absolute;
  z-index: 50;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: 240px;
  max-width: 400px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.18);
}

.ac-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.ac-item.is-on { background: var(--accent); }

.ac-name { font-size: 14px; font-weight: 500; }
.ac-name.d-client   { border-bottom: 2px solid var(--client); }
.ac-name.d-company  { border-bottom: 2px double var(--company); }
.ac-name.d-personal { border-bottom: 2px dotted var(--personal); }

.ac-alias-of {
  font-size: 12px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-kind {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* ── hover cards ────────────────────────────────────────────────────────── */

.hover-card {
  position: absolute;
  z-index: 40;
  width: max-content;
  max-width: min(320px, 100%);
  padding: 10px 12px;
  background: var(--popover);
  color: var(--popover-foreground, var(--foreground));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.18);
  pointer-events: none;
  animation: hover-in 0.12s ease-out;
}
.hover-card[hidden] { display: none; }

@keyframes hover-in {
  from { opacity: 0; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hover-card { animation: none; }
}

.hc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.hc-badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--secondary, var(--muted));
  color: var(--secondary-foreground, var(--foreground));
  font-size: 11px;
  font-weight: 500;
}
.hc-badge.d-client   { box-shadow: inset 0 -2px 0 var(--client); }
.hc-badge.d-company  { box-shadow: inset 0 -2px 0 var(--company); }
.hc-badge.d-personal { box-shadow: inset 0 -2px 0 var(--personal); }
.hc-meta {
  font-size: 11px;
  color: var(--muted-foreground);
}
.hc-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.hc-body {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* ── zones ──────────────────────────────────────────────────────────────── */

#zones { display: block; }

.zone { display: block; margin-bottom: 32px; }

.zone-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.zone-n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-foreground);
  user-select: none;
}

.zone-title { font-size: 18px; font-weight: 500; }

.zone-note {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted-foreground);
  text-align: right;
  margin-left: auto;
}

/* Bento: 1px rows, and app.js (packZone) gives every card a row span equal to
   its own height, so short cards pack under each other instead of leaving a
   hole beside the tallest one. The vertical gap is each card's bottom margin,
   since a row-gap would be added once per 1px row. */
.zone-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}
/* Only once app.js has measured every card: an unpacked zone stays an ordinary
   grid rather than stacking its cards on top of each other. */
.zone-body.is-packed {
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
  row-gap: 0;
}
.zone-body.is-packed > * { margin-bottom: 12px; }
.blk-wide { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .zone-body { grid-template-columns: 1fr; }
  .zone-note { text-align: left; margin-left: 0; }
}

/* ── attention balance ──────────────────────────────────────────────────── */

.strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  /* Not a card itself — it is three of them. */
  border: 0;
  background: none;
}
.bal { padding: 16px var(--pad); }

.bal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bal-head > span:first-child { font-size: 13px; color: var(--muted-foreground); text-transform: capitalize; }

/* The number the whole page is built around. */
.bal-share {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bal-bar {
  position: relative;
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--muted);
}
.bal-fill { display: block; height: 100%; border-radius: 999px; background: var(--client); }
.d-company .bal-fill { background: var(--company); }
.d-personal .bal-fill { background: var(--personal); }

/* The 30-day baseline, as a tick you can line the fill up against. */
.bal-base {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: var(--foreground);
}

.bal-note { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); }

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

/* ── project (thread) columns ───────────────────────────────────────────── */

.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  background: none;
  align-items: start;
}

.col { padding: 0; overflow: hidden; }

.col > h2 {
  margin: 0;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Three cards, then scroll, so the domains stay side by side however lopsided
   the counts are. */
.col-body {
  max-height: 372px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.col-more {
  font-size: 12px;
  color: var(--muted-foreground);
  padding: 8px var(--pad);
  border-top: 1px solid var(--border);
}

.card {
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.card:hover { background: var(--muted); }
.card:last-child { border-bottom: 0; }

/* The one vocabulary, repeated: solid client, double company, dotted personal. */
.card-client   { border-left-style: solid; border-left-color: var(--client); }
.card-company  { border-left-style: double; border-left-color: var(--company); }
.card-personal { border-left-style: dotted; border-left-color: var(--personal); }

.card-top { display: flex; align-items: baseline; gap: 10px; }
.card-title { font-size: 14px; font-weight: 500; flex: 1 1 auto; min-width: 0; }

/* Badges: Spunto's pill. */
.stance,
.chip,
.kw-badge,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Driving is the only stance that fills: it means "you are moving this". */
.stance-driving { background: var(--primary); color: var(--primary-foreground); }
.stance-dormant, .stance-closing { background: transparent; border-color: var(--border); color: var(--muted-foreground); }

.next { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.next-none { font-style: italic; }
.next-stale { text-decoration: underline 1px dashed currentColor; text-underline-offset: 3px; }

.evidence { margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }

/* Freshness, drawn rather than numbered, against this project's OWN cadence. */
.fresh-bar {
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.fresh-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--foreground); }
.fresh-bar.mid > i { background: var(--chart-3); }
.fresh-bar.low > i { background: var(--chart-2); }

.quiet { border-top: 1px solid var(--border); }
.quiet > summary {
  cursor: pointer;
  padding: 8px var(--pad);
  font-size: 12px;
  color: var(--muted-foreground);
}
.quiet > summary:hover { color: var(--foreground); }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .col-body { max-height: none; }
}

/* ── panels ─────────────────────────────────────────────────────────────── */

.panel { padding: 0; overflow: hidden; }

.panel > h3 {
  margin: 0;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}

/* A block, not a flex row: the title line is the flex part, everything
   explaining it belongs underneath. */
.row {
  display: block;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }

.row-main { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.row-title { font-size: 14px; flex: 1 1 auto; min-width: 0; }
.row-meta { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; flex: 0 0 auto; }
/* A row that is a link (search results): the text stays the page's own colour. */
a.row-main { color: inherit; text-decoration: none; }
a.row-main:hover .row-title, a.row-main:focus-visible .row-title { text-decoration: underline; text-underline-offset: 3px; }
.row-why { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.45; }
.row-said {
  font-size: 13px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
  margin-top: 4px;
}
/* What a record cannot answer yet — shown, not hidden. */
.row-gap {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-foreground);
  border-bottom: 1px dashed var(--muted-foreground);
}

.pill { background: transparent; border-color: var(--border); }
.pill-alert { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); border-color: transparent; }

.empty { padding: 16px var(--pad); font-size: 13px; color: var(--muted-foreground); }

.cite {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-foreground);
  text-decoration: underline 1px dotted currentColor;
  text-underline-offset: 2px;
}
.cite:hover { color: var(--foreground); }

/* ── streaks ────────────────────────────────────────────────────────────── */

.streak {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--border);
}
.streak:last-child { border-bottom: 0; }

/* The one place the system counts accumulation rather than decay. */
.streak-n {
  font-size: 24px;
  font-weight: 600;
  min-width: 1.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.streak-cold .streak-n { color: var(--muted-foreground); opacity: 0.5; }
.streak-body { flex: 1 1 auto; min-width: 0; }
.streak-title { font-size: 14px; }
.streak-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.streak-done { box-shadow: inset 3px 0 0 var(--foreground); }

/* ── week ───────────────────────────────────────────────────────────────── */

.week-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: var(--pad);
  margin-bottom: 12px;
}
.week-head .display, .week-title { font-size: 20px; }
.week-sub, .sub { font-size: 13px; color: var(--muted-foreground); max-width: 60ch; line-height: 1.5; }

.week-nav { display: flex; gap: 6px; margin-left: auto; }

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  align-items: start;
}
.day { min-height: 150px; overflow: hidden; }
.day.is-weekend { background: var(--muted); }
.day.is-today { border-color: var(--foreground); }
.day.is-today .day-head { background: var(--primary); }
.day.is-today .day-name, .day.is-today .day-date, .day.is-today .day-load { color: var(--primary-foreground); }

.day-head { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.day-name { font-size: 13px; font-weight: 500; text-transform: capitalize; }
.day-date { margin-left: 6px; font-size: 12px; color: var(--muted-foreground); }
.day-load { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }

.slot {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-size: 13px;
}
.slot:last-child { border-bottom: 0; }
.slot-client   { border-left-style: solid; border-left-color: var(--client); }
.slot-company  { border-left-style: double; border-left-color: var(--company); }
.slot-personal { border-left-style: dotted; border-left-color: var(--personal); }
.slot-dated { background: var(--muted); }
.slot-at { font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.slot-title { display: block; }
.slot-note { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
/* A genuine overlap: two things want the same minutes. */
.clash { box-shadow: inset 0 0 0 1px var(--destructive); }

#week-loose:empty { display: none; }

@media (max-width: 900px) {
  .week-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── signals ────────────────────────────────────────────────────────────── */

#signal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
  padding-bottom: var(--gap);
}

.sig { padding: 16px var(--pad); border-left-width: 3px; }
.sig-client   { border-left-style: solid; border-left-color: var(--client); }
.sig-company  { border-left-style: double; border-left-color: var(--company); }
.sig-personal { border-left-style: dotted; border-left-color: var(--personal); }

.sig-top { display: flex; align-items: baseline; gap: 12px; }
.sig-title { font-size: 14px; font-weight: 500; flex: 1 1 auto; }
.sig-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sig-delta { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.sig-foot { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.sig-empty { color: var(--muted-foreground); font-size: 13px; }
.sig svg { display: block; margin-top: 10px; overflow: visible; }
.sig svg path, .sig svg polyline { stroke: currentColor; fill: none; }
.sig svg circle { fill: currentColor; }

/* ── journal ────────────────────────────────────────────────────────────── */

#journal-list { padding-bottom: var(--gap); }

.jday {
  margin: 28px 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
}
#journal-list > .jday:first-child { margin-top: 0; }

.jrow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px var(--pad);
  margin-bottom: 8px;
}
.jtime { font-family: var(--mono); font-size: 12px; color: var(--muted-foreground); padding-top: 2px; }
.jbody { min-width: 0; }
/* Verbatim, always: the one thing in the system that cannot be regenerated. */
.jtext { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.jmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.chip { cursor: pointer; }
.chip:hover { background: var(--accent); }
.chip-thread { background: var(--primary); color: var(--primary-foreground); }
.chip-thread:hover { background: color-mix(in oklch, var(--primary) 85%, transparent); }
.chip-person { background: var(--secondary); }
.chip-quiet { background: transparent; border: 1px dashed var(--border); color: var(--muted-foreground); }
.chip-flag { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); }
/* Something the extractor found and then refused to file: a decision, shown so
   a capture cannot look cleanly read when part of it was discarded. */
.chip-dropped { background: transparent; border: 1px dotted var(--muted-foreground); color: var(--muted-foreground); }

.jactions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.jrow:hover .jactions, .jrow:focus-within .jactions { opacity: 1; }

.verbatim {
  font-size: 14px;
  line-height: 1.55;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}

/* ── drawer ─────────────────────────────────────────────────────────────── */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 94vw);
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px -16px oklch(0 0 0 / 0.25);
  overflow-y: auto;
  z-index: 60;
  padding: 24px;
}
.drawer h2 { font-size: 20px; margin: 0 40px 16px 0; }
.drawer h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 24px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.drawer .row { padding-left: 0; padding-right: 0; }
.drawer-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  font: 18px/1 var(--sans);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  cursor: pointer;
}
.drawer-close:hover { background: var(--muted); color: var(--foreground); }

/* ── config ─────────────────────────────────────────────────────────────── */

/* Spunto's tabs list: a muted track with the active tab raised. */
.subtabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: var(--muted);
  max-width: 100%;
  overflow-x: auto;
}
.subtab {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: 5px 14px;
  color: var(--muted-foreground);
  cursor: pointer;
}
.subtab:hover { color: var(--foreground); }
.subtab.is-on { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }

.cfgpanel { display: block; }

.cfg-head, #keywords-head { padding: 20px var(--pad); margin-bottom: 12px; }
.cfg-h, .kw-head-title { font-size: 20px; }
.cfg-lede, .kw-head-sub {
  margin: 8px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.cfg-note {
  padding: 12px var(--pad);
  font-size: 12px;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
}

/* Buttons: Spunto's outline button, and its default for the one that commits. */
.btn,
.jaction,
.kw-btn,
.week-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--foreground);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none; /* also on links drawn as buttons */
  transition: background 0.15s, color 0.15s;
}
.btn:hover, .jaction:hover, .kw-btn:hover, .week-nav button:hover { background: var(--muted); }
.btn:active, .jaction:active, .kw-btn:active, .week-nav button:active { transform: translateY(1px); }
.jaction { height: 26px; padding: 0 8px; font-size: 12px; }
.btn-quiet { border-color: transparent; color: var(--muted-foreground); }
.btn-icon { width: 32px; padding: 0; }
/* A Matita icon (public/icons.svg). Its pencil strokes overshoot the 24 grid a
   little, so they are not clipped. */
.icon { display: block; flex: none; overflow: visible; }
.drawer-close { display: inline-flex; align-items: center; justify-content: center; }
.btn-danger {
  background: color-mix(in oklch, var(--destructive) 10%, transparent);
  border-color: transparent;
  color: var(--destructive);
}
.btn-danger:hover, .jaction-del:hover { background: color-mix(in oklch, var(--destructive) 20%, transparent); color: var(--destructive); }
.cfg-head .btn { margin-top: 14px; }

select,
.zed-acts select,
.zed-add,
.kw-actions select {
  height: 32px;
  font: inherit;
  font-size: 13px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--foreground);
  padding: 0 8px;
  max-width: 200px;
}

/* A zone in the layout editor. */
.zed { margin-bottom: 12px; overflow: hidden; }
.zed-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}
.zed-title,
.zed-note {
  font: inherit;
  height: 32px;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--foreground);
  padding: 0 10px;
}
.zed-title { font-weight: 500; width: 16ch; }
.zed-note { font-size: 13px; color: var(--muted-foreground); flex: 1 1 240px; min-width: 0; }
.zed-title:focus, .zed-note:focus { outline: 0; border-color: var(--ring); }
.zed-acts { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.zed-add { margin: 12px var(--pad) 16px; max-width: 320px; }

.zed-blocks { display: block; }
.zed-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--border);
}
.zed-block:last-child { border-bottom: 0; }
.zed-block-label { font-size: 14px; }
.zed-block-about { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; max-width: 66ch; line-height: 1.45; }
.zed-block .zed-acts { flex: 0 0 auto; }

/* Reset scopes. The destructive one carries the destructive colour. */
.rst {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px var(--pad);
  margin-bottom: 12px;
}
.rst-danger { border-color: color-mix(in oklch, var(--destructive) 40%, transparent); }
.rst-label { font-size: 14px; font-weight: 500; }
/* A new token, shown once: selectable in one go, and wraps rather than scrolls. */
.token-value {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--muted);
  border-radius: var(--radius-lg);
  overflow-wrap: anywhere;
  user-select: all;
}
.rst-danger .rst-label { color: var(--destructive); }
.rst-about { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; max-width: 68ch; line-height: 1.5; }
.rst > div { flex: 1 1 auto; min-width: 0; }
.rst > .btn { flex: 0 0 auto; }

/* ── names (inside config) ──────────────────────────────────────────────── */

/* How the two markers work, stated once. A marker nobody knows about is a
   feature nobody uses. */
.kw-how { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 720px; overflow: hidden; }
.kw-how-row { display: flex; gap: 16px; align-items: baseline; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.kw-how-keys { flex: 0 0 130px; display: flex; gap: 6px; align-items: baseline; }
.kw-how-keys code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--muted);
  border-radius: 4px;
  padding: 1px 6px;
}
.kw-how-or { font-size: 12px; color: var(--muted-foreground); }
.kw-how-why { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; }
.kw-how-note { padding: 10px 14px; font-size: 12px; color: var(--muted-foreground); line-height: 1.5; background: var(--muted); }

.kw-section { padding: 14px var(--pad); margin: 20px 0 8px; }
.kw-section-title { font-size: 14px; font-weight: 500; }
.kw-section-sub { font-size: 13px; color: var(--muted-foreground); margin-top: 4px; max-width: 66ch; line-height: 1.5; }

.kw {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--border);
}
.kw-body { flex: 1 1 auto; min-width: 0; }
.kw-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kw-term { font-size: 14px; font-weight: 500; }
.kw-term-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--muted-foreground);
  padding: 0;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}
.kw-term-btn:hover { border-bottom-style: solid; }
.kw-term-btn.d-client   { border-bottom: 2px solid var(--client); }
.kw-term-btn.d-company  { border-bottom: 2px double var(--company); }
.kw-term-btn.d-personal { border-bottom: 2px dotted var(--personal); }

.kw-why { font-size: 12px; color: var(--muted-foreground); white-space: nowrap; }
.kw-seen {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Why a name was suggested. A term you marked yourself outranks one the miner
   noticed. */
.kw-badge { background: transparent; border-color: var(--border); color: var(--muted-foreground); }
.kw-badge-marked { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.kw-badge-named { color: var(--foreground); }
/* A left border on a pill reads as a stray bracket, so the domain is a dot. */
.kw-badge-client::before,
.kw-badge-company::before,
.kw-badge-personal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--client);
}
.kw-badge-company::before  { background: var(--company); }
.kw-badge-personal::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--personal); }
.kw-badge-loose    { border-style: dashed; color: var(--foreground); }

/* An accepted name filed nowhere: "I accepted it and moved on" is exactly how
   it happens. */
.kw-loose { box-shadow: inset 3px 0 0 var(--muted-foreground); }

.kw-aliases { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 6px; }
.kw-aliases-label { font-size: 12px; color: var(--muted-foreground); }
.kw-alias {
  font: inherit;
  font-size: 12px;
  background: var(--secondary);
  border: 0;
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--foreground);
  cursor: pointer;
}
.kw-alias:hover { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); }

.kw-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.kw-btn-accept { background: var(--primary); border-color: transparent; color: var(--primary-foreground); }
.kw-btn-accept:hover { background: color-mix(in oklch, var(--primary) 85%, transparent); }

.quiet-head {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  padding: 20px 0 8px;
}
#keywords-dismissed .hints { padding: 0 0 20px; }

/* The name lists sit in one card each, under their section heading. */
#keywords-known, #keywords-list, #keywords-dismissed { padding-bottom: var(--gap); }
#keywords-known .kw, #keywords-list .kw {
  background: var(--card);
  border: 1px solid var(--border);
  border-top-width: 0;
}
#keywords-known .kw:first-of-type, #keywords-list .kw:first-of-type {
  border-top-width: 1px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
#keywords-known .kw:last-of-type, #keywords-list .kw:last-of-type {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
#keywords-known .kw:only-of-type, #keywords-list .kw:only-of-type { border-radius: var(--radius-xl); }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer {
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: 40px;
  font-size: 12px;
  color: var(--muted-foreground);
}

:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ring) 70%, transparent);
  outline-offset: 2px;
}

@media print {
  header, #capture-panel, .jactions, .kw-actions, .drawer { display: none; }
  body { font-size: 10pt; }
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

/* Brand, nav, search and cog add up to more than the window below ~1000px. A
   page that scrolls sideways is broken, so the nav takes its own row. */
/* The bar never grows and never wraps: it shrinks. The nav is the part that
   gives (it scrolls sideways inside itself), search folds into a magnifier,
   Quick add into a +. Below 620px the phone layout takes over. */
.search-wrap { position: relative; display: flex; align-items: center; }
@media (max-width: 1180px) {
  header { gap: 12px; }
  #tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 6px 9px; }
  .head-right { flex: none; gap: 6px; }
  .search-wrap { width: 32px; height: 32px; }
  #search {
    position: absolute; right: 0; top: 0; width: 32px; padding: 0; cursor: pointer;
    color: transparent; caret-color: transparent; border-color: transparent;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 16px no-repeat;
    -webkit-appearance: none; appearance: none;
  }
  #search::-webkit-search-cancel-button { display: none; }
  #search::placeholder { color: transparent; }
  #search:hover { background-color: var(--muted); }
  #search:focus {
    z-index: 5; width: min(300px, calc(100vw - 2 * var(--pad))); padding: 0 10px 0 32px; cursor: text;
    color: var(--foreground); caret-color: auto; border-color: var(--ring);
    background-color: var(--background); background-position: 10px center;
  }
  #search:focus::placeholder { color: var(--muted-foreground); }
  #quick-add { width: 32px; padding: 0; justify-content: center; }
  .qa-label { display: none; }
}
@media (max-width: 1040px) {
  header { height: 56px; flex-wrap: nowrap; padding-block: 0; }
}
@media (max-width: 900px) {
  .brand-name { display: none; }
  .tab { padding: 6px 7px; font-size: 13px; }
}

@media (max-width: 620px) {
  :root { --pad: 12px; }
  /* Search goes first: it is a jump-to, and the nav still reaches everything. */
  .search-wrap { display: none; }
  #capture,.capture-underlay, .capture-measure { font-size: 16px; padding: 12px 14px; }
  .jrow { grid-template-columns: 44px minmax(0, 1fr); }
  .jactions { grid-column: 2; opacity: 1; margin-top: 6px; }
  .zed-head, .kw, .rst, .zed-block { flex-wrap: wrap; }
  .kw-actions, .zed-acts { margin-left: 0; }
}

/* Nothing may push the page sideways. Every grid child that holds text needs
   min-width: 0 or its content sets the column's floor. */
.zone, .zone-body, .cols, .col, .strip, .week-grid, .jrow { max-width: 100%; }
.zone-body > *, .row, .card, .kw, .zed-block, .rst { min-width: 0; }
.view > section, .view > nav, .view > div { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIGN-IN, PROJECTS, ITEMS
   Spunto's own records and its sign-in page. Same tokens as above; the classes
   are .sp-* so nothing here can reach the board.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: color-mix(in oklch, var(--primary) 88%, transparent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.whoami { font-size: 12px; color: var(--muted-foreground); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  font-size: 12px; font-weight: 500; border-radius: 999px; border: 1px solid var(--border);
  white-space: nowrap; flex: 0 0 auto;
}
.badge-quiet { color: var(--muted-foreground); }
.badge-success { color: var(--success); border-color: color-mix(in oklch, var(--success) 40%, transparent); }
.badge-warning { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 40%, transparent); }

/* Alerts: a message that stays on the page. One tint per meaning. */
.alert {
  --tone: var(--info);
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--foreground); border: 1px solid color-mix(in oklch, var(--tone) 35%, transparent);
  background: color-mix(in srgb, var(--tone) 9%, var(--card)); border-radius: var(--radius-lg);
}
.alert::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--tone); }
.alert-title { font-weight: 600; }
.alert-success { --tone: var(--success); }
.alert-warning { --tone: var(--warning); }
.alert-error { --tone: var(--destructive); }

.sp-input {
  height: 32px; min-width: 0; padding: 0 10px; font: inherit; font-size: 13px;
  color: var(--foreground); background: transparent;
  border: 1px solid var(--input); border-radius: var(--radius-lg);
}
textarea.sp-input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.sp-input:focus, .auth-form input:focus {
  outline: 0; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.sp-toolbar { display: flex; align-items: center; gap: 16px; padding-block: 16px 12px; }
.sp-toolbar .zone-title { margin: 0; flex: 1 1 auto; }
.sp-toggle { font-size: 13px; color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); padding-bottom: 32px; }
.sp-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.sp-card:hover, .sp-card:focus-visible { background: var(--muted); outline: 0; }
.sp-card-title { margin: 0; font-size: 15px; font-weight: 500; }
.sp-card-desc { margin: 4px 0 0; font-size: 13px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.sp-card-actions { display: flex; gap: 4px; margin-top: 8px; }
.sp-card-actions .btn { height: 26px; font-size: 12px; padding: 0 8px; }

.sp-quick { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; margin-bottom: 8px; }
/* Search, the filters, and the page's actions, on one row. */
.sp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sp-filters #f-q { flex: 0 1 280px; min-width: 120px; }
.sp-filters .sp-input:not(#f-q) { flex: 0 0 auto; }

/* Multi-select filters: a dashed pill per filter, a menu of checkboxes under it. */
.sp-facets { display: contents; }
.sp-facet { position: relative; flex: none; }
.sp-facet-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0; font: inherit; font-size: 14px;
  color: var(--foreground); background: transparent; cursor: pointer;
  border: 1px dashed var(--input); border-radius: var(--radius-lg);
}
.sp-facet-btn:hover, .sp-facet-btn[aria-expanded="true"] { background: var(--muted); }
.sp-facet-name { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-weight: 500; }
.sp-facet-values { display: inline-flex; gap: 4px; align-self: stretch; align-items: center; padding: 0 10px; border-left: 1px dashed var(--input); }
.sp-facet-chip { padding: 1px 8px; font-size: 12px; font-weight: 400; border-radius: var(--radius-md); background: var(--muted); }
.sp-facet-btn:hover .sp-facet-chip, .sp-facet-btn[aria-expanded="true"] .sp-facet-chip { background: var(--background); }
.sp-facet-reset { display: inline-flex; align-items: center; gap: 6px; }
.sp-pop {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 220px; padding: 4px;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.sp-pop-search {
  width: 100%; height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--foreground);
  background: transparent; border: 0; border-bottom: 1px solid var(--border); outline: none;
}
.sp-pop-list { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.sp-pop-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; font-size: 14px; border-radius: var(--radius-md); cursor: pointer; }
.sp-pop-row:hover { background: var(--muted); }
.sp-pop-row input { accent-color: var(--primary); }
.sp-pop-empty { padding: 10px 8px; font-size: 13px; color: var(--muted-foreground); }
.sp-pop-clear {
  width: 100%; padding: 8px; font: inherit; font-size: 14px; color: var(--foreground); cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.sp-pop-clear:hover { background: var(--muted); }
.sp-filters .sp-toggle { margin-left: 4px; white-space: nowrap; }
.sp-filters-gap { flex: 1 1 auto; }
.sp-filters .btn { flex: none; }

/* The project picker: "Projects" then every item, the Inbox and each project as
   small chips, busiest first. No scrolling: projects with no items give way
   when the row is full (fitProjects in spunto.js), and a long name is cut
   short. */
.sp-projbar {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 0; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.sp-projbar-label { flex: none; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.sp-projects {
  display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1 1 auto;
}
/* After "+N": every project, on one row that scrolls sideways. */
.sp-projects.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.sp-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.sp-proj {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  font: inherit; font-size: 13px; color: var(--foreground); cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.sp-proj:hover { background: var(--muted); }
.sp-proj.is-archived { color: var(--muted-foreground); border-style: dashed; }
.sp-proj-count { font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sp-proj.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.sp-proj.is-on .sp-proj-count { color: inherit; opacity: 0.7; }

.sp-project-actions { display: inline-flex; gap: 4px; flex: none; }
.sp-proj-more { color: var(--muted-foreground); }

/* The items (a quarter) beside the picked one's preview (the rest). Both
   scroll on their own, and together fill the window below the header. */
.sp-split {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); gap: var(--gap);
  flex: 1 1 0; min-height: 0; margin-bottom: 0;
}

/* The Projects page does not scroll: the window is the header, this view and
   the footer, and the list and the preview take what is left and scroll
   inside themselves. */
@media (min-width: 721px) {
  body:has(#view-projects:not([hidden])) { height: 100dvh; overflow: hidden; }
  #view-projects:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  body:has(#view-projects:not([hidden])) footer { padding-top: 12px; padding-bottom: 12px; flex: none; }
  .sp-split .sp-list { min-height: 0; }
  .sp-split > * { min-height: 0; }
}
.sp-split .sp-list { margin-bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
.sp-preview {
  min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.sp-preview .sp-page { padding-bottom: 32px; }
.sp-preview > .empty { padding-top: 24px; }

.sp-list {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  margin-bottom: 32px; overflow: hidden;
}
.sp-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; cursor: pointer; }
/* T0, T1 …: the item's number, a small badge before its title. */
.sp-num, .sp-num-badge {
  flex: none; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: var(--radius-lg);
  font: 500 12px/1.4 var(--mono); background: var(--muted); color: var(--foreground);
}
.sp-item-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; }
.sp-tag { padding: 0 8px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); }
.sp-state { color: var(--muted-foreground); }
.sp-state-line { display: inline-flex; align-items: center; gap: 6px; }
.sp-type { color: var(--muted-foreground); }
/* Priority: green low, orange medium, red high, gray not set. */
.sp-pri { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); opacity: 0.5; }
.sp-pri.is-low { background: #22c55e; opacity: 1; }
.sp-pri.is-medium { background: #f59e0b; opacity: 1; }
.sp-pri.is-high { background: #ef4444; opacity: 1; }
.sp-state.is-in_progress { color: var(--foreground); font-weight: 500; }
.sp-item.is-selected .sp-num { background: var(--background); }
.sp-item:last-child { border-bottom: 0; }
.sp-item:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.sp-item.is-selected { background: var(--muted); box-shadow: inset 2px 0 0 var(--primary); }
.sp-item-main { flex: 1 1 auto; min-width: 0; }
.sp-item .row-title {
  font-weight: 500; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.sp-item.is-done .row-title { text-decoration: line-through; color: var(--muted-foreground); }
.sp-check { margin-top: 4px; accent-color: var(--primary); }
.sp-wrap { white-space: normal; }

.sp-form { display: flex; flex-direction: column; gap: 12px; }
.sp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-field label { font-size: 13px; font-weight: 500; }
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-bar { display: flex; gap: 8px; }

/* Sign-in page: one centred card, as in Spunto. */
.auth-page { min-height: 100vh; display: grid; place-items: center; }
.auth { width: min(100%, 24rem); padding: 24px var(--pad); }
.auth-title { margin: 0; font-size: 24px; font-weight: 600; text-align: center; }
.auth-sub { margin: 4px 0 20px; text-align: center; color: var(--muted-foreground); font-size: 14px; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; }
.auth-card .subtabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form label { font-size: 13px; font-weight: 500; }
.auth-form input {
  height: 36px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--foreground);
  background: transparent; border: 1px solid var(--input); border-radius: var(--radius-lg);
}
.auth-form .btn { height: 36px; margin-top: 8px; }
.auth-msg { margin: 0; font-size: 13px; }
.auth-msg.err { color: var(--destructive); }
.auth-switch { background: none; border: 0; font: inherit; font-size: 13px; color: var(--muted-foreground); cursor: pointer; padding: 4px; }
.auth-switch:hover { color: var(--foreground); }
.auth-hint { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: center; }


/* One item's page (/items/<id>). Phone first: one column, tap-sized
   controls; wider screens only get a measure and a two-column fact list. */
.sp-page { max-width: 72ch; margin: 0 auto; padding-bottom: 96px; min-width: 0; }
.sp-page-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 12px; }
.sp-back {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 0;
  font-size: 13px; color: var(--muted-foreground); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-back:hover { color: var(--foreground); }
.sp-page-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.sp-page-actions .btn, .sp-page-status .btn, .sp-page-status .sp-input { min-height: 44px; }
.sp-page-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sp-page-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-page-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sp-page-title.is-done { text-decoration: line-through; color: var(--muted-foreground); }
.sp-page-status { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 16px; }
.sp-page-status .sp-input { font-size: 16px; }

.sp-facts {
  display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0 0 20px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  font-size: 14px;
}
.sp-facts dt { font-size: 12px; color: var(--muted-foreground); margin-top: 8px; }
.sp-facts dt:first-child { margin-top: 0; }
.sp-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sp-facts a { color: inherit; text-underline-offset: 3px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-facts .sp-chip { min-height: 32px; }
.sp-break { overflow-wrap: anywhere; }

.sp-md { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
.sp-md > :first-child { margin-top: 0; }
.sp-md h2, .sp-md h3, .sp-md h4, .sp-md h5, .sp-md h6 { margin: 1.4em 0 0.4em; line-height: 1.3; font-weight: 600; }
.sp-md h2 { font-size: 18px; }
.sp-md h3 { font-size: 16px; }
.sp-md h4, .sp-md h5, .sp-md h6 { font-size: 15px; }
.sp-md p, .sp-md ul, .sp-md ol, .sp-md blockquote, .sp-md pre { margin: 0 0 0.9em; }
.sp-md ul, .sp-md ol { padding-left: 1.4em; }
.sp-md li + li { margin-top: 0.25em; }
.sp-md .sp-md-task { list-style: none; margin-left: -1.4em; }
.sp-md .sp-md-task input { accent-color: var(--primary); margin: 0 4px 0 0; vertical-align: -1px; }
.sp-md .sp-md-task.is-done { color: var(--muted-foreground); }
.sp-md blockquote { padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.sp-md code {
  font-family: var(--mono); font-size: 0.88em;
  padding: 1px 5px; background: var(--muted); border-radius: 4px;
}
.sp-md pre {
  padding: 12px 14px; background: var(--muted); border-radius: var(--radius-lg);
  overflow-x: auto; max-width: 100%;
}
.sp-md pre code { padding: 0; background: none; font-size: 13px; white-space: pre; }
.sp-md hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.sp-md a { color: inherit; text-underline-offset: 3px; }
.sp-page-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0; }
.sp-page-stamp { margin-top: 24px; }

@media (min-width: 721px) {
  .sp-page-title { font-size: 26px; }
  .sp-facts { grid-template-columns: max-content 1fr; align-items: baseline; }
  .sp-facts dt, .sp-facts dt:first-child { margin-top: 0; padding-block: 4px; }
  .sp-facts dd { padding-block: 4px; }
  .sp-page-status { grid-template-columns: minmax(0, 220px) auto; justify-content: start; }
  .sp-page-actions .btn, .sp-page-status .btn, .sp-page-status .sp-input { min-height: 0; }
  .sp-page-status .sp-input { font-size: 13px; }
}

@media (max-width: 720px) {
  .sp-filters { flex-wrap: wrap; }
  .sp-filters #f-q { flex: 1 1 100%; }
  .sp-filters-gap { display: none; }
  .sp-projbar-label { display: none; }
  /* No room beside the list: a row opens the item's page instead. */
  .sp-split { display: block; height: auto; min-height: 0; }
  .sp-split .sp-list { margin-bottom: 32px; overflow: hidden; }
  .sp-preview { display: none; }
  .sp-proj { flex: none; min-height: 40px; }
  .sp-quick { grid-template-columns: 1fr 1fr; }
  .sp-quick #qa-title { grid-column: 1 / -1; }
  .sp-two { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIALOG, AVATAR MENU, FOOTER, ADMIN, WHAT'S NEW
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
footer a { color: inherit; text-underline-offset: 4px; }
footer a:hover { color: var(--foreground); text-decoration: underline; }

/* Avatar + its menu: Spunto's account menu. */
.menu-wrap { position: relative; }
.avatar {
  width: 32px; height: 32px; border-radius: 999px; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--primary-foreground); background: var(--primary);
  border: 0; cursor: pointer;
}
.avatar:hover { opacity: 0.88; }
.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
  color: var(--muted-foreground); background: transparent; cursor: pointer;
}
.bell:hover { color: var(--foreground); background: var(--muted); }
.bell[hidden] { display: none; }
.theme-toggle .icon[hidden] { display: none; }
.bell-count {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  color: #fff; background: var(--destructive);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  width: 240px; padding: 4px;
  background: var(--popover); color: var(--foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.25);
}
.menu-head { padding: 8px; }
.menu-email { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 6px 8px;
  font: inherit; font-size: 13px; color: inherit; background: none;
  border: 0; border-radius: var(--radius-md); cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--muted); outline: 0; }
.menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }
.menu-label { padding: 4px 8px 2px; font-size: 12px; color: var(--muted-foreground); }

/* The phone's app shell (see the max-width: 620px block further down). Off
   everywhere else. */
.menu-btn, .menu-views, .menu-phone, .menu-grip, .menu-avatar, .view-title, .tab-icon { display: none; }

/* Dialog: Spunto's, centred, with the page dimmed behind it. */
.dlg {
  width: min(28rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem);
  padding: 24px; margin: auto; overflow-y: auto;
  color: var(--foreground); background: var(--background);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px oklch(0 0 0 / 0.35);
}
.dlg.dlg-wide { width: min(36rem, calc(100vw - 2rem)); }
.dlg::backdrop { background: oklch(0 0 0 / 0.5); }
.dlg-head { display: flex; align-items: center; margin-bottom: 16px; }
.dlg-title { margin: 0; font-size: 18px; font-weight: 600; flex: 1 1 auto; }
.dlg .drawer-close { top: 16px; right: 16px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.sp-pills, .sp-pillbar { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pillbar { align-items: center; margin-bottom: 12px; }
.sp-pill {
  padding: 3px 10px; font: inherit; font-size: 12px; color: var(--muted-foreground);
  background: none; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
}
.sp-pill:hover { color: var(--foreground); }
.sp-pill.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.sp-dim { opacity: 0.7; }
.sp-search { margin-left: auto; width: min(16rem, 100%); }
.sp-optional { color: var(--muted-foreground); font-weight: 400; }
.sp-error { margin: 0; font-size: 12px; color: var(--destructive); }
.sp-mono { font-family: var(--mono); font-size: 12px; }
.sp-two:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.sp-narrow { max-width: 42rem; margin-inline: auto; padding-block: 16px 32px; }
.sp-subtabs { margin-bottom: 16px; }

.sp-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 24px 12px; font: inherit; font-size: 13px; color: var(--muted-foreground);
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-lg); cursor: pointer;
}
.sp-dropzone:hover, .sp-dropzone.is-over { color: var(--foreground); background: var(--muted); }
.sp-dropzone-main { color: var(--foreground); font-weight: 500; }
.sp-filerow { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sp-filename { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { padding: 2px 8px; font: inherit; font-size: 12px; color: inherit; background: none; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chip:hover { background: var(--muted); }

.sp-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; }
.sp-dl dt { color: var(--muted-foreground); }
.sp-dl dd { margin: 0; overflow-wrap: anywhere; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 14px; font-size: 13px; background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.25); }
.toast.err { color: var(--destructive); }

/* What's new */
.cl-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cl-card { cursor: default; gap: 12px; padding: 20px; }
.cl-card:hover { background: var(--card); }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-version { font: 600 18px var(--mono); }
.cl-items { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted-foreground); }

/* Admin */
.sp-toolbar-tight { padding-block: 24px 8px; }
.sp-gap { margin-top: 24px; }
.sp-strong { font-weight: 500; overflow-wrap: anywhere; }
.sp-table { max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.sp-table table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.sp-table th { position: sticky; top: 0; padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-foreground); background: var(--muted); }
.sp-table td { padding: 8px 12px; vertical-align: top; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.sp-table-empty { padding: 32px 12px; text-align: center; color: var(--muted-foreground); }
.sp-actions { display: flex; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.sp-act { height: 24px; padding: 0 8px; font-size: 12px; }
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.sp-stat { cursor: default; }
.sp-stat:hover { background: var(--card); }
.sp-stat-n { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-stat-n.is-alert { color: var(--destructive); }
.sp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.badge-danger { color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 40%, transparent); }
#admin-security .sp-card { cursor: default; margin-bottom: 8px; }
#admin-security .sp-card:hover { background: var(--card); }

@media (max-width: 720px) {
  .sp-stats { grid-template-columns: 1fr 1fr; }
  .sp-two:has(> :nth-child(3)) { grid-template-columns: 1fr; }
  #quick-add { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 44px; height: 44px; border-radius: 999px; box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.4); }
  /* backdrop-filter makes the header the containing block of every
     position: fixed element inside it, so the button above was pinned to the
     header's corner, over the tabs, instead of the screen's. Solid instead. */
  header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--background); }
}

/* Phones: an app, not a page. A title bar that says where you are with ☰ for
   everything else, a tab bar of icons at the bottom in thumb reach, a round
   + for Quick add, and the account menu as a sheet from the bottom. */
@media (max-width: 620px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
  header, #tabs, .menu-views { -webkit-user-select: none; user-select: none; }
  button { touch-action: manipulation; }
  footer { display: none; } /* its version and What's new are in the menu */

  /* The title bar. */
  header {
    flex-wrap: nowrap; gap: 12px; height: auto; min-height: 52px;
    padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px;
  }
  .brand-name { display: none; }
  .view-title { display: inline; font-size: 17px; font-weight: 600; }
  #avatar { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    color: var(--foreground); background: none; border: 0; border-radius: 999px; cursor: pointer;
  }
  .menu-btn:active { background: var(--muted); }

  /* The tab bar. Five fit a thumb; Signals is one tap away in the menu. */
  #tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    order: 0; width: auto; overflow: visible;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    padding: 2px 4px env(safe-area-inset-bottom);
    background: var(--background); border-top: 1px solid var(--border);
  }
  .tab[data-view="signals"] { display: none; }
  .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 0 2px; font-size: 11px; border-radius: 0;
  }
  .tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tab.is-on { background: none; color: var(--foreground); }
  /* Matita icons draw each stroke at its own width, so the open tab is told
     apart by colour alone. */
  .tab-icon, .menu-view .tab-icon { display: block; width: 22px; height: 22px; overflow: visible; }
  .tab:active .tab-icon, .menu-view:active, #quick-add:active { transform: scale(0.94); }

  /* Quick add: a round + above the tab bar. */
  #quick-add {
    width: 56px; height: 56px; padding: 0; justify-content: center;
    right: 16px; bottom: calc(76px + env(safe-area-inset-bottom));
  }
  #quick-add svg { width: 24px; height: 24px; }
  .qa-label { display: none; }

  /* The menu: a sheet from the bottom over a dimmed page. */
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80;
    width: auto; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.45);
    animation: sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .menu-grip { display: block; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 999px; background: var(--border); }
  .menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 4px 12px; }
  .menu-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; font-size: 14px; cursor: default;
  }
  .menu-avatar:empty { display: none; }
  .menu-who { min-width: 0; }
  .menu-email { font-size: 15px; }
  .menu-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 0 4px; }
  .menu-view {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px;
    font: inherit; font-size: 13px; text-transform: capitalize; color: var(--foreground);
    background: none; border: 1px solid var(--border); border-radius: 14px; cursor: pointer;
  }
  .menu-view.is-on { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
  .menu-phone { display: block; }
  .menu-sep { margin: 8px 0; }
  .menu-item { min-height: 44px; padding: 10px 8px; font-size: 15px; }
  .menu-label { padding: 8px 8px 4px; font-size: 13px; }
  .menu-foot { padding: 8px; text-align: center; }

  /* Below 16px, iOS zooms the page into any field you tap. */
  .sp-input { font-size: 16px; height: 40px; }
  textarea.sp-input { height: auto; }

  /* Dialogs are sheets from the bottom, full width, buttons always in view. */
  .dlg, .dlg.dlg-wide, .dlg.dlg-ask {
    width: 100vw; max-width: 100vw; max-height: 92svh; margin: auto 0 0;
    padding: 20px 16px 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-width: 1px 0 0;
  }
  .dlg-foot {
    position: sticky; bottom: 0; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--background); border-top: 1px solid var(--border);
  }
  .dlg-foot .btn { min-height: 44px; flex: 1 1 0; }
  .dlg select.sp-input { width: 100%; max-width: none; } /* past the global select cap */
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }

/* A checkbox and its sentence on one line (edit.js). */
.sp-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* A signal's own action. */
.sig-add { margin-top: 8px; align-self: flex-start; }

/* An empty state as a card of its own (shadcn's Empty): dashed, centred, an
   icon tile, a title, one line of why and the one action. On the signals
   grid it is the way to start another series. */
.empty-card {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 180px; padding: 24px;
  text-align: center; text-wrap: balance;
  border: 1px dashed var(--border); border-radius: var(--radius-xl);
  background: transparent;
}
.empty-media {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 4px;
  border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground);
}
.empty-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.empty-desc { margin: 0 0 8px; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--muted-foreground); }

/* In-page confirm and prompt (dialogs.js): narrower than a form, the message
   keeps its line breaks. */
.dlg.dlg-ask { width: min(26rem, calc(100vw - 2rem)); }
.ask-msg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-foreground); white-space: pre-line; overflow-wrap: anywhere; }

/* ── Ideas (ideas.js) ─────────────────────────────────────────────────────── */
/* The list on the left, a ruled line, and the work on a sheet of drafting paper: a grid of dots over a
   little grain. The sheet runs to the edge of the window; the list lines up with the header. */
/* The page itself never scrolls: the window is the header, this view and the
   footer; the list and the idea scroll inside themselves. Wide: side by side.
   Narrow: the list is a capped strip above the idea. */
body:has(#view-ideas:not([hidden])) { height: 100dvh; overflow: hidden; }
body:has(#view-ideas:not([hidden])) footer { padding-top: 12px; padding-bottom: 12px; flex: none; }
#view-ideas:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.id-split { display: grid; gap: var(--gap); align-items: stretch; flex: 1 1 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.id-split > * { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.id-list { max-height: 38dvh; }
@media (min-width: 861px) { .id-split { grid-template-columns: clamp(200px, 16vw, 260px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .id-list { max-height: none; } }
/* Both panels are bordered cards, as in Projects. The list's rows are flat, divided by rules. */
.id-list { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.id-top { padding-top: 16px; margin-bottom: 12px; }
.sp-filters #id-q { flex: 0 1 280px; min-width: 120px; }
@media (max-width: 720px) { .sp-filters #id-q { flex: 1 1 100%; } }
.id-nomatch { padding: 16px; margin: 0; }
.id-help { gap: 6px; }
.id-help .icon { flex: 0 0 auto; }
.id-new { align-self: flex-start; }
.id-row {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: 10px 12px; font: inherit; color: var(--foreground); background: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; min-width: 0;
}
.id-row:hover { background: var(--muted); }
.id-row.is-on { background: var(--muted); border-color: var(--ring); }
.id-row-title { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.id-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.id-detail {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; align-items: stretch;
  padding: 24px 24px 40px;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
}
/* Drafting paper: a grid of dots over a little grain. Ideas detail, and the admin Components page. */
.id-detail,
body:has(#admin-components:not([hidden])) {
  background-color: var(--background);
  background-image:
    radial-gradient(circle at center, color-mix(in oklch, var(--foreground) 15%, transparent) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  background-size: 22px 22px, 200px 200px;
}
@media (max-width: 860px) { .id-detail { padding: 16px var(--pad) 32px; } }
.id-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; }
.id-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.id-title { overflow-wrap: anywhere; }
.id-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.id-desc { margin: 0; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.id-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.id-details dd { margin: 0; overflow-wrap: anywhere; }
.id-details dt { white-space: normal; }
.id-working { margin: 0; font-size: 13px; color: var(--muted-foreground); }
.id-error { padding: 10px 12px; border: 1px solid color-mix(in oklch, var(--destructive) 40%, transparent); border-radius: var(--radius-lg); }
.id-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); min-width: 0; }
.id-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Admin → AI: providers as a compact grid, their form in the dialog. */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap); margin-bottom: 24px; }
.ai-card { display: flex; flex-direction: column; gap: 4px; }
.ai-card.is-off .sp-card-title { color: var(--muted-foreground); }
.ai-card .id-card-head { flex-wrap: nowrap; justify-content: space-between; }
.ai-card .sp-line { margin-top: 4px; }
.ai-edit { align-self: flex-start; margin-top: 6px; }
.ai-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-foreground); cursor: pointer; }
.ai-switch input, .ai-features input { margin: 0; accent-color: var(--primary); }
.ai-features { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ai-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ai-tabbar .subtabs { margin-bottom: 0; }
.dlg.dlg-wide:has(.ai-form) { width: min(50rem, calc(100vw - 2rem)); }
.ai-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: none; }
.ai-form .ai-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .ai-form { grid-template-columns: 1fr; } }
.ai-foot { align-items: center; }
.ai-foot .btn-danger { margin-right: auto; }
.id-by { margin-left: auto; white-space: normal; }
.id-summary { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.id-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.id-score { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.id-score-n { font-size: 18px; font-weight: 500; }
.id-block { display: flex; flex-direction: column; gap: 4px; }
.id-block p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.id-h { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.id-points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.id-points li { line-height: 1.5; overflow-wrap: anywhere; }
.id-none { white-space: normal; }
.id-better { padding: 10px 12px; border-left: 2px solid var(--border); }
.id-use { align-self: flex-start; margin-top: 4px; }
.id-idea { gap: 12px; }
.id-idea .id-desc { font-size: 15px; }
.id-scores-brief { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.id-scores-brief .id-score { padding: 5px 8px; }
.id-scores-brief .id-score-n { font-size: 15px; }
.id-fold { display: flex; flex-direction: column; gap: 10px; }
.id-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted-foreground); }
.id-fold[open] > summary { margin-bottom: 4px; }
.id-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.id-tool { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.id-tool p { grid-column: 1 / -1; margin: 0; line-height: 1.45; }
.id-tool-name { font-weight: 500; overflow-wrap: anywhere; }
.id-provider { width: auto; max-width: 16rem; }
.id-form { display: flex; flex-direction: column; gap: 12px; max-width: 42rem; }
.id-field { display: flex; flex-direction: column; gap: 4px; }
.id-label { font-size: 13px; font-weight: 500; }
.id-hint { white-space: normal; }
.id-more { display: flex; flex-direction: column; gap: 10px; }
.id-more > summary { cursor: pointer; font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }
.id-more > .id-field { margin-bottom: 8px; }
#admin-ai .row-meta, .id-detail .row-meta { white-space: normal; }


/* ── Teams, planning and activity (item-team.js, team.js, plan.js) ──────────
   Nothing here relies on colour alone: every state is also written out, and
   the member colour is only an outline round their initials. */

/* On an item's row and panel. */
.sp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sp-flag {
  display: inline-flex; align-items: center; padding: 0 8px; min-height: 20px;
  font-size: 12px; line-height: 1.4; color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; max-width: 100%;
}
.sp-flag-who { color: var(--foreground); }
.sp-plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sp-facts .sp-input { max-width: 100%; width: 100%; height: 36px; }
.sp-facts dd[hidden], .sp-facts dt[hidden] { display: none; }
.sp-check-row { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.sp-check-row input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; }
.sp-ready p { margin: 4px 0 0; }
.sp-links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sp-link-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-link-row .sp-break { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.sp-link-row .btn { flex: none; }
.sp-link-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
.sp-link-form .sp-input { height: 36px; }

/* The timeline. */
.tl { margin-top: 32px; }
.tl-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.tl-list { margin: 0 0 16px; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.tl-event { min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.tl-who { font-weight: 500; }
.tl-head time { margin-left: auto; white-space: normal; }
.tl-comment { margin: 4px 0 0; padding: 8px 12px; background: var(--muted); border-radius: var(--radius-lg); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.tl-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tl-form textarea { width: 100%; font-size: 16px; }

/* Team page. */
.sp-narrow.tm-wrap { max-width: 56rem; }
.tm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tm-bar .zone-title, .tm-bar .pl-h { margin: 0; }
.tm-team { margin-bottom: 32px; }
.tm-team-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.tm-team-text { min-width: 0; flex: 1 1 220px; }
.tm-team-name { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.tm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
.tm-card { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); min-width: 0; }
.tm-card.is-inactive { border-style: dashed; }
.tm-card.is-inactive .tm-name, .tm-card.is-inactive .tm-avatar { color: var(--muted-foreground); }
.tm-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; font-size: 14px; font-weight: 600;
  background: var(--muted); border: 2px solid var(--border); border-radius: 50%;
}
.tm-avatar.has-color { border-color: var(--member); }
.tm-who { min-width: 0; }
.tm-name { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.tm-who .row-meta { white-space: normal; overflow-wrap: anywhere; }
.tm-role { margin: 0; font-size: 13px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 0; }
.tm-stats dt { font-size: 12px; color: var(--muted-foreground); }
.tm-stats dd { margin: 0 0 4px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-stats dt:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.tm-stats dd:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.tm-stats dt:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tm-stats dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.tm-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.tm-card-foot .btn { min-height: 36px; display: inline-flex; align-items: center; }
.tm-color-row { display: flex; align-items: center; gap: 16px; }
.tm-color { width: 48px; height: 36px; padding: 2px; }

/* Plan. */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  margin-left: 6px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--primary-foreground); background: var(--primary); border-radius: 999px;
}
.pl-projbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pl-projbar .sp-field { min-width: 0; flex: 1 1 160px; max-width: 280px; }
.pl-projbar .sp-input { height: 36px; }
.pl-body { display: flex; flex-direction: column; gap: 16px; }
.pl-group { display: flex; flex-direction: column; gap: 8px; }
.pl-h { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pl-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); min-width: 0; }
.pl-card .row-meta { white-space: normal; overflow-wrap: anywhere; margin: 0; }
.pl-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pl-card-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pl-body-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted-foreground); overflow-wrap: anywhere; white-space: pre-line; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pl-actions .btn { min-height: 40px; }
.pl-item-link { display: inline-flex; align-items: baseline; gap: 8px; color: inherit; text-underline-offset: 3px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.pl-item-link:hover { text-decoration: underline; }
.pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pl-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.pl-row:last-child { border-bottom: 0; }
.pl-row .row-meta { white-space: normal; }
.pl-items > summary, .pl-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted-foreground); min-height: 32px; display: flex; align-items: center; }
.pl-fold { margin-top: 8px; }
.pl-fold > .pl-cards { margin-top: 8px; }
.pl-quiet { margin-top: 8px; }
.pl-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
.pl-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; min-height: 44px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pl-pick-row input { accent-color: var(--primary); width: 18px; height: 18px; flex: none; margin: 0; }
.pl-pick-title { min-width: 0; overflow-wrap: anywhere; }

/* Progress: a bar, with the same thing said in words under it. */
.pg-wrap { display: flex; flex-direction: column; gap: 4px; }
.pg-wrap .row-meta { margin: 0; }
.pg { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.pg-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* Board health. */
.bh-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.bh-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.bh-head .row-meta { white-space: normal; margin: 0; }
.bh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 24px; }
.bh-sec { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-sec .row-meta { margin: 0; white-space: normal; }
.bh-title { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

@media (max-width: 620px) {
  /* The phone's tab bar holds five; Team and Plan are in the menu. */
  .tab[data-view="team"], .tab[data-view="plan"] { display: none; }
  .sp-link-form { grid-template-columns: 1fr; }
  .tm-grid { grid-template-columns: 1fr; }
  .pl-actions .btn { flex: 1 1 auto; }
  .tl-head time { margin-left: 0; flex-basis: 100%; }
}

.sp-adduser { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); max-width: 34rem; margin-bottom: 12px; }
.sp-adduser .sp-form { display: flex; flex-direction: column; gap: 10px; }
.sp-adduser p { margin: 0; }
.sp-secret { display: block; padding: 10px 12px; font-size: 16px; letter-spacing: 0.04em; background: var(--muted); border-radius: var(--radius-lg); user-select: all; overflow-wrap: anywhere; }
.id-unavailable { margin: 0; }
.id-history { display: flex; flex-direction: column; gap: 10px; }
.id-activity > summary { cursor: pointer; font-size: 14px; font-weight: 500; padding: 6px 0; }
.id-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.id-event { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.id-event > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.id-event.is-ai > span:first-child { color: var(--muted-foreground); }
.id-version > summary { cursor: pointer; padding: 6px 0; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.id-version[open] > summary { margin-bottom: 8px; }
.id-version > .id-card { margin-bottom: 10px; }
.pw-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 16px; font-size: 14px; background: var(--muted); border-bottom: 1px solid var(--border); }
.pw-nudge span { flex: 1 1 18rem; text-align: center; }
.id-guide { display: flex; flex-direction: column; gap: 16px; max-width: 80rem; }
.id-guide .btn { align-self: flex-start; }
.id-guide-lead { margin: 0; line-height: 1.55; color: var(--muted-foreground); max-width: 48rem; }
.id-guide-art {
  list-style: none; margin: 0; padding: 16px; display: flex; align-items: stretch; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.ig-step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.ig-icon { display: flex; margin-bottom: 6px; color: var(--foreground); }
.ig-title { font-size: var(--fs-subtitle); font-weight: var(--fw-subtitle); color: var(--foreground); }
.ig-desc { font-size: var(--fs-description); font-weight: var(--fw-description); line-height: 1.5; color: var(--muted-foreground); }
.ig-arrow { flex: none; display: flex; align-items: center; color: var(--muted-foreground); }
@media (max-width: 700px) {
  .id-guide-art { flex-direction: column; }
  .ig-arrow { justify-content: center; }
  .ig-arrow svg { transform: rotate(90deg); }
}
.id-skel { background: var(--muted); border-radius: var(--radius-lg); animation: id-pulse 1.4s ease-in-out infinite; }
.id-skel-row { height: 62px; }
.id-skel-title { height: 26px; width: 55%; }
.id-skel-text { height: 54px; }
.id-skel-card { height: 160px; }
@keyframes id-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .id-skel { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM: TYPE
   One scale for the whole app. A role has one size, weight and colour wherever
   it appears; the classes the pages already use are pointed at the roles here,
   at the end of the file so they win. Admin → Components measures each class
   against its role and shows any that drift.

     title        a page or dialog's name
     subtitle     a card or section's name
     body         running text
     description  what a title or field is about (muted)
     label        the name of a field or a value
     caption      small print: dates, counts, who (muted)
     overline     a small heading over a group (muted, upper case)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --fs-title: 20px;       --fw-title: 600;
  --fs-subtitle: 15px;    --fw-subtitle: 500;
  --fs-body: 14px;        --fw-body: 400;
  --fs-description: 13px; --fw-description: 400;
  --fs-label: 13px;       --fw-label: 500;
  --fs-caption: 12px;     --fw-caption: 400;
  --fs-overline: 12px;    --fw-overline: 500;
}
.t-title,
.zone-title, .sp-page-title, .dlg-title, .cfg-h, .kw-head-title {
  font-size: var(--fs-title); font-weight: var(--fw-title); line-height: 1.3; letter-spacing: -0.01em; color: var(--foreground);
}
.t-subtitle,
.sp-card-title, .empty-title, .card-title {
  font-size: var(--fs-subtitle); font-weight: var(--fw-subtitle); line-height: 1.4; letter-spacing: -0.01em; color: var(--foreground);
}
.t-body { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: 1.5; color: var(--foreground); }
.t-description,
.sp-card-desc, .empty-desc, .id-guide-lead, .id-hint, .zone-note {
  font-size: var(--fs-description); font-weight: var(--fw-description); line-height: 1.5; color: var(--muted-foreground);
}
.t-label,
.sp-field label, .id-label {
  font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4; color: var(--foreground);
}
.t-caption,
.row-meta {
  font-size: var(--fs-caption); font-weight: var(--fw-caption); line-height: 1.4; color: var(--muted-foreground);
}
.t-overline,
.id-h {
  font-size: var(--fs-overline); font-weight: var(--fw-overline); line-height: 1.4; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Admin → Components ─────────────────────────────────────────────────── */
#admin-components { padding-bottom: 48px; }
.cmp-head { padding-block: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.cmp-section { margin-top: 28px; }
.cmp-h { margin: 0; font-size: var(--fs-subtitle); font-weight: var(--fw-subtitle); letter-spacing: -0.01em; }
.cmp-about { display: block; margin: 2px 0 12px; white-space: normal; }
/* A section is a list of rows: the name on the left, the component itself on
   the right, bare on the dotted paper so a see-through one shows. */
.cmp-grid { display: flex; flex-direction: column; }
.cmp-spec {
  margin: 0; display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); gap: 8px 32px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--border); min-width: 0;
}
.cmp-cap { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-stage { grid-column: 2; grid-row: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 560px; }
.cmp-stage > * { max-width: 100%; }
.cmp-stage > .sp-table, .cmp-stage > .id-skel, .cmp-stage > .sp-card, .cmp-stage > .empty-card, .cmp-stage > .id-row,
.cmp-stage > .alert, .cmp-stage > .id-events, .cmp-stage > .id-field, .cmp-stage > input, .cmp-stage > textarea, .cmp-stage > select { width: 100%; }
.cmp-stage > .sp-table table { min-width: 0; }
.cmp-stage > .id-events { background: var(--card); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
@media (max-width: 620px) {
  .cmp-spec { grid-template-columns: minmax(0, 1fr); }
  .cmp-cap, .cmp-stage { grid-column: 1; }
  .cmp-cap { grid-row: 1; }
  .cmp-stage { grid-row: 2; }
}
.cmp-name { font: 500 12px var(--mono); color: var(--foreground); }
.cmp-class { font: 400 11px var(--mono); color: var(--muted-foreground); overflow-wrap: anywhere; }
.cmp-cap .row-meta { flex-basis: 100%; white-space: normal; }
.cmp-roles { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); }
.cmp-roles th, .cmp-roles td { padding: 8px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.cmp-roles th { font-size: 12px; font-weight: 500; color: var(--muted-foreground); background: var(--muted); border-top: 0; }
.cmp-role-name { font: 500 12px var(--mono); }
.cmp-probe { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cmp-probe code { font: 400 11px var(--mono); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); }
.cmp-probe code.is-off { color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 45%, transparent); }
/* Item row (the items list and /admin/components): two lines, never more. */
.cmp-stage > .ir-list { width: 100%; margin-bottom: 0; }
.ir { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.ir:last-child { border-bottom: 0; }
/* Priority: a 3px edge inside the right side, so it never moves the content. */
.ir { --edge: transparent; box-shadow: inset -3px 0 0 var(--edge); }
.ir.is-low { --edge: #22c55e; }
.ir.is-medium { --edge: #f59e0b; }
.ir.is-high { --edge: #ef4444; }
.ir.is-selected { box-shadow: inset 2px 0 0 var(--primary), inset -3px 0 0 var(--edge); }
/* Blocked: a light red wash, mixed into the card so it works in both themes. */
.ir.is-blocked { background-color: color-mix(in srgb, var(--destructive) 8%, var(--card)); }
.ir.is-blocked:hover, .ir.is-blocked.is-selected { background-color: color-mix(in srgb, var(--destructive) 14%, var(--card)); }
.ir.is-done .ir-title { text-decoration: line-through; color: var(--muted-foreground); }
.ir-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ir-l1, .ir-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ir-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-sub { flex: 1 1 auto; min-width: 0; display: flex; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.ir-sub > span { flex: none; }
/* The project is the one part that gives way, so status, type and blocker stay readable. */
.ir-sub > span:nth-child(2) { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; }
.ir-sub > span + span::before { content: "·"; margin: 0 6px; }
.ir-status.is-in_progress { color: var(--foreground); font-weight: 500; }
.ir-warn { color: var(--warning); }
.ir-who, .ir-l2 > .sp-flag { flex: none; min-height: 18px; }

.cmp-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM: SURFACES
   Nothing that holds content or can be pressed is see-through: on the dotted
   paper, or over another card, it reads as itself. A surface is one of
     page      --background   the window, inputs, quiet buttons, badges
     raised    --card         cards, rows, panels
     tinted    a tone mixed into --background (srgb: oklch drifts the hue)
   Disabled is a muted surface, never a half-faded one.
   ═══════════════════════════════════════════════════════════════════════════ */
.sp-input, #search, select.sp-input, textarea.sp-input { background-color: var(--background); }
.badge, .pill { background-color: var(--card); }
.btn-quiet { background-color: var(--background); }
.btn-danger { background-color: color-mix(in srgb, var(--destructive) 10%, var(--background)); }
.btn-danger:hover { background-color: color-mix(in srgb, var(--destructive) 20%, var(--background)); }
.pill-alert { background-color: color-mix(in srgb, var(--destructive) 10%, var(--card)); }
.btn:disabled, .btn-primary:disabled, .btn-danger:disabled {
  opacity: 1; background-color: var(--muted); border-color: var(--border); color: var(--muted-foreground); cursor: default;
}
.sp-input:disabled { opacity: 1; background-color: var(--muted); color: var(--muted-foreground); }

/* Ideas */
.id-row { background-color: var(--card); }
.id-row:hover, .id-row.is-on { background-color: var(--muted); }
.id-score { background-color: var(--background); }
.id-head, .id-detail > :is(p, details) {
  background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 10px 16px;
}
.id-detail > .id-error { background-color: color-mix(in srgb, var(--destructive) 8%, var(--card)); }
.id-detail > .id-error { border-color: color-mix(in srgb, var(--destructive) 40%, var(--card)); }
.id-form, .id-history, .id-guide {
  background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px;
}
.id-guide { padding: 20px; }
.id-guide-art { background-color: var(--background); }
.ig-step { background-color: var(--card); }
.sp-pill { background-color: var(--background); }
.sp-pill.is-on { background-color: var(--primary); }
.empty-card { background-color: var(--card); }
.tab { background-color: var(--background); }
.tab.is-on { background-color: var(--muted); }
/* The bar stays solid: pages scroll under it, and some have dotted paper. */
header { background: var(--background); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 620px) { #tabs .tab.is-on { background-color: var(--background); } }

/* Ideas list: the ideas scroll in their own region, and the archive is a box
   under them showing at most four rows before it scrolls. */
.id-list { overflow: hidden; background-color: var(--card); }
.id-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
/* A list-row in the list is flat, as an item is in Projects: a rule between rows, the picked one marked at its edge. */
.id-rows > .id-row {
  flex: none; padding: 12px 16px; gap: 6px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background-color: var(--card);
}
.id-rows > .id-row:hover { background-color: var(--muted); }
.id-rows > .id-row.is-on { background-color: var(--muted); box-shadow: inset 2px 0 0 var(--primary); }
.id-archive {
  flex: none; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
  background-color: var(--card); border-top: 1px solid var(--border);
}
.id-archive-h {
  margin: 0; font-size: var(--fs-overline); font-weight: var(--fw-overline); line-height: 1.4; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.id-archive-list { display: flex; flex-direction: column; gap: 4px; max-height: calc(4 * 34px + 3 * 4px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* list-row/archived: the list-row at rest, the way a disabled control is: one line of title, nothing else, lighter. */
.id-row-archived { flex: none; height: 34px; padding: 0 10px; justify-content: center; background-color: var(--background); border-color: var(--border); color: var(--muted-foreground); }
.id-row-archived .id-row-title { display: block; max-width: 100%; min-width: 0; font-size: var(--fs-description); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.id-row-archived:hover { color: var(--foreground); }
.id-row-archived.is-on { color: var(--foreground); border-color: var(--ring); }
@media (max-width: 860px) { .id-archive-list { max-height: calc(2 * 34px + 4px); } }

/* The idea in two columns: the idea and its evaluations, wide, on the left; what already exists and the
   activity, slim, on the right. Narrow: one column. */
.id-detail { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 14px; }
.id-detail > * { grid-column: 1 / -1; }
.id-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) {
  .id-detail { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); }
  .id-detail > .id-col-main { grid-column: 1; }
  .id-detail > .id-col-side { grid-column: 2; }
}

/* Tiles with nothing yet, and the earlier versions inside a card. */
.id-tile-empty .id-skel-text { height: 14px; }
.id-tile-empty .id-skel-short { width: 60%; }
.id-card > .id-error { background-color: color-mix(in srgb, var(--destructive) 8%, var(--card)); border-color: color-mix(in srgb, var(--destructive) 40%, var(--card)); }
.id-versions > .id-version { border-top: 1px solid var(--border); padding-top: 8px; }
.id-version > summary { flex-wrap: wrap; row-gap: 2px; }
.id-ver-head { font-weight: 500; }
.id-ver-gist { flex: 1 1 100%; font-size: var(--fs-description); color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Closable cards and sections: the head is the summary, a chevron turns when it opens. */
.id-tile > summary, .id-sec > summary, .id-version > summary { list-style: none; cursor: pointer; }
.id-tile > summary::-webkit-details-marker, .id-sec > summary::-webkit-details-marker, .id-version > summary::-webkit-details-marker { display: none; }
.id-tile > .id-card-head, .id-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.id-tile > .id-card-head .sp-card-title { flex: 0 1 auto; }
.id-ico, .id-chev { display: inline-flex; flex: none; color: var(--muted-foreground); }
.id-chev { transition: transform 0.12s ease; }
.id-tile[open] > summary .id-chev, .id-sec[open] > summary .id-chev, .id-version[open] > summary .id-chev { transform: rotate(90deg); }
.id-tile-body, .id-sec-body, .id-ver-body { display: flex; flex-direction: column; gap: 10px; }
.id-tile[open] > .id-tile-body { margin-top: 12px; }
.id-sec[open] > .id-sec-body { margin-top: 8px; }
.id-ver-body { margin-top: 8px; padding-left: 22px; }
.id-sec { padding-top: 12px; border-top: 1px solid var(--border); }
.id-sec:first-child { padding-top: 0; border-top: 0; }
.id-sec-head .id-h { margin: 0; }
.id-sec-head .id-by { margin-left: auto; }
.id-version { padding: 8px 0; border-top: 1px solid var(--border); }
.id-version:first-child { border-top: 0; padding-top: 0; }
.id-version > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.id-version > summary .id-ver-gist { flex: 1 1 100%; padding-left: 22px; }
.id-version[open] > summary .id-ver-gist { display: none; }

/* The status: a dot says an AI run is under way or the last one failed. */
.id-status { display: inline-flex; align-items: center; gap: 6px; }
.id-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; cursor: help; }
.id-dot.is-failed { background-color: var(--destructive); }
.id-dot.is-working { background-color: var(--warning); animation: id-pulse 1.4s ease-in-out infinite; }

/* Buttons with an icon; New idea is the one to find. */
.id-actions .btn, .id-new, .id-help { display: inline-flex; align-items: center; gap: 6px; }
.id-new { min-height: 36px; padding-inline: 16px; font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

/* A list row is two lines at most: the title on one, the status line on the other. The author is what gives way. */
.id-rows > .id-row .id-row-title { -webkit-line-clamp: 1; }
.id-rows > .id-row .id-row-meta { flex-wrap: nowrap; width: 100%; min-width: 0; }
.id-rows > .id-row .id-row-meta > * { flex: none; white-space: nowrap; }
.id-rows > .id-row .id-row-meta > .id-row-author { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The idea panel, like the list: the card clips, and the scrollbar lives inside it, under its rounded corners. */
.id-split > .id-detail-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.id-detail-card > .id-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; }

/* List row: the author gives way, the status badge stays whole. */
.id-rows > .id-row .id-row-meta > .id-status { flex: none; }

/* Status badges are light fills: green reviewed, orange partially reviewed, grey not reviewed. */
.badge-success { background-color: var(--success-soft); border-color: var(--success-soft-line); }
.badge-warning { background-color: var(--warning-soft); border-color: var(--warning-soft-line); }
.id-review.badge-quiet { background-color: var(--muted); }
.id-head-text > .id-status { align-self: flex-start; }

/* The idea's facts, a small card above the apps. */
.id-info { padding: 12px 16px; }
.id-info-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; align-items: center; }
.id-info-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.id-info-list .id-status { justify-self: start; }

/* Competitors, the second mode of the Ideas page. The bar shows the ideas controls or the competitors' own; the switch stays. */
.cp-mode { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.cp-mode-btn { border-color: transparent; background: none; box-shadow: none; }
.cp-mode-btn.is-on { background: var(--muted); color: var(--foreground); }
#id-top:not(.is-competitors) > .cp-ctl { display: none; }
#id-top.is-competitors > :not(.cp-ctl):not(.cp-mode) { display: none; }
.sp-filters #cp-q { flex: 0 1 280px; min-width: 120px; }
@media (max-width: 720px) { .sp-filters #cp-q { flex: 1 1 100%; } }
.cp-site { font-size: var(--fs-description); overflow-wrap: anywhere; }
.cp-idea-link { padding: 0; font: inherit; font-weight: 500; text-align: left; color: var(--foreground); background: none; border: 0; cursor: pointer; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.cp-idea-link:hover { text-decoration-color: currentColor; }
/* In the new-idea wizard: what the list already knows about what is being written. */
.cp-known { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.cp-known[hidden] { display: none; }
.cp-known .row-meta { margin: 0; }

/* Scope: where an idea is meant to be used, a breadcrumb from the widest place to the narrowest. */
.sc-picker { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.sc-item { display: flex; }
.sc-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font: inherit; font-size: 13px; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; overflow-wrap: anywhere; }
button.sc-crumb { cursor: pointer; }
button.sc-crumb:hover { background: var(--muted); }
.sc-crumb.is-on { background: var(--muted); border-color: var(--ring); }
.sc-sep { color: var(--muted-foreground); user-select: none; }
.sc-kind { font-size: 11px; color: var(--muted-foreground); }
.sc-x { display: inline-flex; align-items: center; padding: 2px; margin-right: -4px; color: var(--muted-foreground); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.sc-x:hover { color: var(--foreground); background: var(--border); }
.sc-add { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-add .sp-input { width: auto; flex: 1 1 170px; max-width: 18rem; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { font: inherit; font-size: 13px; padding: 4px 10px; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.sc-chip:hover { background: var(--muted); border-color: var(--ring); }
/* Read only, in the info card: plain words, not buttons. */
.sc-crumbs.is-readonly .sc-crumb { padding: 0; font-size: inherit; background: none; border: 0; border-radius: 0; }
.sc-crumbs.is-readonly .sc-crumb.is-root { color: var(--muted-foreground); }

/* Scores in the info card: the average over every evaluation, then each one. */
.id-info-list dt:has(+ dd .id-scorebox) { align-self: start; padding-top: 6px; }
.id-scorebox { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.id-avg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.id-avg-n strong { font-size: 24px; font-weight: 600; line-height: 1.1; }
.id-evscores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.id-evscore { display: grid; grid-template-columns: minmax(0, max-content) minmax(40px, 1fr) 2.4em; gap: 10px; align-items: center; cursor: default; }
.id-evbar { height: 6px; overflow: hidden; background: var(--muted); border-radius: 999px; }
.id-evbar-fill { display: block; width: var(--w); height: 100%; background: var(--primary); border-radius: inherit; }
.id-evscore-n { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }