/* ============================================================
   Paragon Content Engine — Components
   Status colors appear on DATA only (pills, dots, graded values),
   never on chrome or prose. Extend here; no repeated inline styles.
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cocoa);
  background: var(--cocoa);
  color: var(--bone);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.btn:hover { background: var(--cocoa-soft); border-color: var(--cocoa-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary {
  background: transparent;
  color: var(--cocoa);
  border-color: var(--rule-soft);
}
.btn.secondary:hover { border-color: var(--cocoa); background: transparent; }
.btn.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--dusty-ink);
}
.btn.quiet:hover { text-decoration: underline; background: transparent; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
}
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--cocoa);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--dusty-ink);
  outline-offset: 1px;
  border-color: var(--dusty-blue);
}
.field .hint { font-size: var(--fs-small); color: var(--text-mute); }

/* ---- Pills (status tokens: data only) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(114, 139, 167, 0.14);
  color: var(--dusty-ink-deep);
}
.pill.optimal { background: var(--st-optimal-fill); color: var(--st-optimal-pill); }
.pill.borderline { background: var(--st-borderline-fill); color: var(--st-borderline-pill); }
.pill.flagged { background: var(--st-flagged-fill); color: var(--st-flagged-pill); }

/* ---- Table ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule-soft);
}
.table td { padding: var(--sp-3); border-bottom: 1px solid var(--card-deep); vertical-align: top; }
/* Row headers read as data cells, not column headers. */
.table th[scope="row"] {
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cocoa);
  font-weight: 500;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--card-deep);
  vertical-align: top;
}
.table tbody tr:hover td, .table tbody tr:hover th[scope="row"] { background: var(--card-deep); }

/* ---- Login ---- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--cocoa);
  padding: var(--sp-5);
}
.login-card {
  width: min(420px, 100%);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raise);
  padding: var(--sp-6);
}
.login-card .wordmark img { width: 200px; margin-bottom: var(--sp-5); }
.login-note { font-size: var(--fs-small); color: var(--text-mute); }

/* ---- Shared text/layout patterns (promoted from inline styles) ---- */
.plain-list { margin: 0; padding-left: 1.2rem; }
.m-0 { margin: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.card-list .card { margin-bottom: var(--sp-3); }
.legend-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
  padding: 0;
}
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--sp-4); }

/* ---- Screen-reader-only text (standard clip pattern) ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Empty state ---- */
.empty {
  border: 1px dashed var(--rule-soft);
  border-radius: var(--radius);
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-mute);
  font-size: var(--fs-small);
}

/* ---- Sidebar sign-out ---- */
.sidebar .chip-signout { color: var(--dusty-blue-soft); padding: 0.2rem 0; margin-top: var(--sp-2); }
.sidebar .chip-signout:hover { color: var(--bone); text-decoration: underline; background: transparent; }

/* ---- Slate ---- */
.slate-card h3 { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.slate-card h3 a { color: var(--cocoa); text-decoration: none; }
.slate-card h3 a:hover { color: var(--dusty-ink-deep); text-decoration: underline; }
.slate-meta { gap: var(--sp-2); margin: var(--sp-2) 0; }

/* ---- Discovery ---- */
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--dusty-ink-deep);
}
.coverage-strip .funnel { flex-basis: 100%; color: var(--text-mute); }
.discovery-card h3 { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.discovery-meta { gap: var(--sp-2); margin: var(--sp-2) 0; }
.src-line {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  overflow-wrap: anywhere;
  margin-top: var(--sp-2);
}
.src-line a { color: var(--dusty-ink-deep); text-decoration: underline; }

/* ---- Draft chain (review surface) ---- */
.draft-channel {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  margin: var(--sp-4) 0 var(--sp-2);
}
.draft-card { margin-bottom: var(--sp-3); }
.draft-pills { gap: var(--sp-2); }
.draft-content {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cocoa);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: var(--sp-3) 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--rule-soft);
}
.draft-content.outline { font-family: var(--font-mono); font-size: var(--fs-small); }
.draft-findings { margin-top: var(--sp-3); }
.draft-findings .plain-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.draft-findings li { line-height: var(--lh-tight); }

/* ---- Video pipeline (review surface) ---- */
.video-stage {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
}
.video-assets { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.video-assets li { line-height: var(--lh-tight); }
/* A pasted share URL in a label/notes is a long unbroken token — break it so
   it never forces horizontal page scroll on mobile. min-width:0 lets the label
   shrink inside its flex row; the link stays nowrap. */
.video-assets .small { overflow-wrap: anywhere; }
.video-assets .row > span { min-width: 0; overflow-wrap: anywhere; }
.video-assets a { color: var(--dusty-ink-deep); text-decoration: underline; white-space: nowrap; }
.video-controls { gap: var(--sp-2); }
.video-add { margin-top: var(--sp-4); }
.video-add-row { gap: var(--sp-3); }
.video-add-row .field { flex: 1 1 auto; }

/* ---- Pre-post checkpoint ---- */
.checkpoint-schedule { margin-top: var(--sp-3); }
.checkpoint-fields { gap: var(--sp-3); }
.checkpoint-fields .field { flex: 1 1 auto; }
.post-card { margin-bottom: var(--sp-3); }
.post-card .mono { overflow-wrap: anywhere; }
.checkpoint-held { margin-top: var(--sp-3); }
.checkpoint-held .held-row { padding: var(--sp-2) 0; border-top: 1px solid var(--rule-soft); gap: var(--sp-2); }
.checkpoint-held .held-row .mono { overflow-wrap: anywhere; }

/* ---- Discovery health ---- */
.health-trend {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--rule-soft);
}
.health-bar {
  display: inline-block;
  width: 8px;
  background: var(--dusty-blue);
  border-radius: 1px 1px 0 0;
}
.health-bar.h0 { height: 2px; background: var(--rule-soft); }
.health-bar.h1 { height: 6px; }
.health-bar.h2 { height: 10px; }
.health-bar.h3 { height: 14px; }
.health-bar.h4 { height: 18px; }
/* No recorded yield: hollow, never a zero bar (no-false-coverage). */
.health-bar.unknown {
  height: 10px;
  background: transparent;
  border: 1px dashed var(--rule-soft);
  border-radius: 1px;
}
.health-query {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  max-width: 26ch;
}
.health-flags { gap: var(--sp-1); }
.proposal-card .pill { flex-shrink: 0; }

/* ---- Performance ---- */
/* min-width:0 lets a card shrink inside its 1fr grid track so a long <select>
   option (a full idea title in the link control) can't force page overflow at
   375 — the select then caps at the card width (.perf-card select below). */
.perf-card { min-width: 0; }
.perf-card h4 { margin-bottom: var(--sp-3); overflow-wrap: anywhere; }
.perf-metrics { gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fs-stat { font-size: var(--fs-stat-sm); line-height: var(--lh-tight); color: var(--cocoa); }
.perf-highlights { gap: var(--sp-3); margin-bottom: var(--sp-4); }
.highlight-row { padding: var(--sp-2) 0; border-top: 1px solid var(--rule-soft); gap: var(--sp-2); }
.perf-annotate { gap: var(--sp-2); margin-top: var(--sp-2); }
.perf-card select { max-width: 100%; }

/* ---- Board ---- */
.board-col { margin-bottom: var(--sp-6); }
.idea-card h3 { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.idea-card h3 a { color: var(--cocoa); text-decoration: none; }
.idea-card h3 a:hover { color: var(--dusty-ink-deep); text-decoration: underline; }

/* ---- Filter bar ---- */
.filter-bar { margin-bottom: var(--sp-4); gap: var(--sp-2); }
.filter-bar select, .filter-query {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--cocoa);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
}
.filter-query { min-width: 220px; flex: 1 1 220px; max-width: 360px; }

/* ---- Idea detail ---- */
.detail-field .eyebrow { margin-bottom: 2px; }
.detail-field { margin-bottom: var(--sp-3); }
.review-panel .sendback-reason {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  min-width: 220px;
  flex: 1 1 240px;
}
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-body); color: var(--cocoa-soft); }
.idea-card select {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--cocoa);
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem;
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  background: var(--cocoa);
  color: var(--bone);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-raise);
  font-size: var(--fs-small);
  z-index: 20;
}

/* ---- Dashboard (home) ---- */
.dash-h2 { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dusty-ink); margin: 0 0 var(--sp-3);
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.dash-h2 .hint { font-family: var(--font-sans); text-transform: none; letter-spacing: 0;
  color: var(--text-mute); font-size: var(--fs-micro); font-weight: 400; }
.dash-funnel { display: flex; gap: var(--sp-1); align-items: stretch; margin-bottom: var(--sp-6);
  overflow-x: auto; padding-bottom: var(--sp-1); }
.dash-stage { flex: 1 1 0; min-width: 96px; background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 0.1rem; transition: border-color 0.12s, box-shadow 0.12s; }
.dash-stage:hover { border-color: var(--dusty-blue); box-shadow: var(--shadow-card); }
.dash-stage.vid { border-style: dashed; }
/* A13: .cap below (and .lab/.mk further down) sit at var(--fs-micro), the
   legibility floor. They were 0.55-0.56rem literals, below the floor; the
   size increase is the intended audit fix, not a token-swap side effect. */
.dash-stage .cap { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--st-borderline-pill); min-height: 0.75rem; }
.dash-stage .n { font-family: var(--font-mono); font-size: var(--fs-stat); line-height: 1.05;
  color: var(--cocoa); font-variant-numeric: tabular-nums; }
.dash-stage .lbl { font-size: var(--fs-small); color: var(--text-mute); line-height: 1.2; }
.dash-stage.dim .n { color: var(--text-mute); } /* A20: >=3:1, was rule-soft ~1.4:1 */
.dash-chev { align-self: center; color: var(--rule-soft); flex: 0 0 auto; }
.dash-grid { margin-bottom: var(--sp-5); align-items: start; }
.dash-spark { display: block; }
.dash-post { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0;
  border-top: 1px solid var(--rule-soft); }
.dash-post:first-of-type { border-top: 0; }
.dash-post .body { flex: 1; min-width: 0; }
.dash-post .t { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-post .m { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-mute); margin-top: 0.1rem; }
.dash-chan { padding: var(--sp-3) 0; border-top: 1px solid var(--rule-soft); }
.dash-chan:first-of-type { border-top: 0; }
.dash-chan-hd { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; }
.dash-chan-name { font-weight: 600; color: var(--dusty-ink-deep); text-decoration: none; }
.dash-chan-name:hover { text-decoration: underline; }
.dash-chan-name .go { font-size: var(--fs-micro); color: var(--dusty-blue); font-weight: 400; }
.dash-unr { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--st-borderline-pill); }
.dash-tprimary { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2);
  background: var(--card-deep); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.dash-tprimary .lab { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--dusty-ink); line-height: 1.15; white-space: nowrap; }
.dash-tprimary .dash-spark { flex: 1; height: 28px; min-width: 0; }
.dash-tprimary .val { font-family: var(--font-mono); font-size: var(--fs-stat-sm); color: var(--cocoa);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.dash-mcell { background: var(--card-deep); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; min-width: 0; }
.dash-mcell .mk { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-mute); }
.dash-mcell .dash-spark { width: 100%; height: 16px; margin: 0.2rem 0; }
.dash-mcell .mv { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--cocoa-soft);
  font-variant-numeric: tabular-nums; }
.dash-thin { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--st-borderline-pill);
  background: var(--st-borderline-fill); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2); line-height: 1.45; }
.dash-draft { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0;
  border-top: 1px solid var(--rule-soft); }
.dash-draft:first-of-type { border-top: 0; }
.dash-draft .t { flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--cocoa); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-draft .t:hover { text-decoration: underline; color: var(--dusty-ink-deep); }
.dash-chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.dash-chip { display: flex; align-items: center; gap: var(--sp-2); background: var(--card-deep);
  border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  text-decoration: none; color: inherit; flex: 1 1 auto; min-width: 132px; }
.dash-chip:hover { border-color: var(--dusty-blue); }
.dash-chip .cn { font-family: var(--font-mono); font-size: var(--fs-stat-sm); color: var(--dusty-ink-deep);
  font-variant-numeric: tabular-nums; }
.dash-chip small { color: var(--text-mute); font-size: var(--fs-micro); }
/* let the 1fr grid tracks shrink below a long nowrap title's min-content so a
   card never forces horizontal page scroll at 375 (the grid min-content trap). */
.dash-grid > * { min-width: 0; }