/* ==========================================================================
   Twin Home Buyer — AI Call Coach dashboard
   Vanilla CSS, no framework, no CDN. Everything renders offline on the PBX.
   ========================================================================== */

:root {
  /* One theme, dark, for everyone.
   *
   * It used to be light by default with a dark override on the viewer's OS
   * setting, which meant the same dashboard looked like two different products
   * depending on whose desk it was on — and a screenshot from one person did
   * not match what the next person saw. The reports still print on white; that
   * lives in print.css, where paper is the only thing that reads it.
   *
   * `color-scheme` is what makes the browser's own furniture follow: the range
   * dropdown, scrollbars, focus rings and date pickers. Without it those stay
   * bright white against everything else. */
  color-scheme: dark;

  --bg: #10151c;
  --surface: #161d26;
  --surface-2: #1b232e;
  --border: #27313d;
  --border-strong: #38434f;
  --text: #e7ecf2;
  --text-muted: #9aa8ba;
  --text-faint: #6f7d8f;

  --brand: #63a4f0;
  --brand-ink: #a8ccf7;
  --brand-soft: #17293e;

  --good: #52c08a;
  --good-soft: #16302a;
  --warn: #e0aa4a;
  --warn-soft: #2f2818;
  --bad: #ef7676;
  --bad-soft: #331d1d;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Any explicit display beats the browser's own [hidden] { display: none }, so
   an element given `display: flex` stays on screen with the attribute set.
   The bulk bar rendered at "0 calls selected" that way; the tab panels, the
   rep picker and the sign-in fields are all toggled the same way and were one
   stylesheet rule from the same bug. Said once, for everything. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .mark, .signin-brand .mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--brand);
  color: var(--bg);
  font-size: 13px;
  font-weight: 800;
}
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--text-faint); letter-spacing: .02em; }

nav.tabs { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; }
nav.tabs a {
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 550;
  font-size: 14px;
  white-space: nowrap;
}
nav.tabs a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
nav.tabs a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ page */

main { max-width: 1360px; margin: 0 auto; padding: 24px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.page-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- controls */

select, input[type="text"], input[type="search"], input[type="number"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
select:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--surface-2); }
button:disabled { opacity: .55; cursor: progress; }
/* Dark text on the bright brand fill. White on it reads at roughly 2:1, which
   is the one contrast failure a dark-only theme invites — the light theme's
   brand was a deep navy and white was correct there. */
button.primary { background: var(--brand); border-color: var(--brand); color: var(--bg); font-weight: 650; }
button.primary:hover:not(:disabled) { background: var(--brand-ink); border-color: var(--brand-ink); }

/* A destructive action in a table row. Quiet until hovered, because it sits
   on every row and a row of red buttons reads as an error state. */
button.link-danger {
  background: none;
  border: 1px solid transparent;
  color: var(--text-faint);
  padding: 2px 8px;
  font-size: 12px;
}
button.link-danger:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
button.link-danger:disabled { opacity: .6; }

button.primary:hover:not(:disabled) { background: var(--brand-ink); }
button.sm { height: 28px; padding: 0 10px; font-size: 13px; }

/* ------------------------------------------------------------------ cards */

.grid { display: grid; gap: 16px; align-items: start; }  /* start: cards size to their content instead of stretching to the tallest in the row */
/* Stretch, unlike the other grids. A KPI row is read across, and one caption
   wrapping to two lines while its neighbours take one left the boxes at four
   different heights with their bottom edges all over the place. Stretching
   them and pushing the caption down means the numbers line up and so do the
   boxes, however long the caption. */
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: stretch; }
.kpi { display: flex; flex-direction: column; }
.grid.halves { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid.thirds { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.card h2 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.card .sub { margin: 0 0 14px; color: var(--text-faint); font-size: 12.5px; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > h2, .card.flush > .sub { padding: 16px 18px 0; }
.card.flush > .sub { padding-bottom: 12px; }

.kpi .label { color: var(--text-muted); font-size: 12.5px; font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { margin-top: 6px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.kpi .value small { font-size: 15px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.kpi .foot { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--text-muted); }

/* The bulk-action bar on the Calls page. Sticks to the bottom of the window so
   it stays reachable while scrolling a long list — the whole point is marking
   several rows, which means scrolling between them. */
.bulk-bar {
  position: sticky;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }

.table-scroll { max-height: 560px; overflow: auto; }
/* For a list that sits under a chart in the same card, where the chart is the
   point and the rows are the backup. Roughly eight rows before it scrolls. */
.table-scroll.short { max-height: 300px; }

/* ----------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad  { background: var(--bad-soft);  color: var(--bad); }
.badge.neutral { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge.brand { background: var(--brand-soft); color: var(--brand-ink); }

.score { font-variant-numeric: tabular-nums; font-weight: 700; }
.score.a { color: var(--good); }
.score.b { color: var(--good); }
.score.c { color: var(--warn); }
.score.d, .score.f { color: var(--bad); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.live { background: var(--good); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------------------------ bars */

.meter { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.meter.good > span { background: var(--good); }
.meter.warn > span { background: var(--warn); }
.meter.bad > span  { background: var(--bad); }

.section-scores { display: grid; gap: 12px; }
.section-scores .row { display: grid; grid-template-columns: 130px 1fr 62px; gap: 12px; align-items: center; }
.section-scores .name { font-size: 13.5px; color: var(--text-muted); }
.section-scores .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13.5px; }

/* --------------------------------------------------------------- findings */

.finding { padding: 14px 0; border-bottom: 1px solid var(--border); }
.finding:last-child { border-bottom: 0; padding-bottom: 0; }
.finding:first-child { padding-top: 0; }
.finding .head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.finding .text { font-weight: 600; margin: 0 0 6px; }
.finding dl { margin: 0; display: grid; grid-template-columns: 108px 1fr; gap: 4px 12px; font-size: 13.5px; }
.finding dt { color: var(--text-faint); font-weight: 600; }
.finding dd { margin: 0; color: var(--text-muted); }

/* -------------------------------------------------------------- transcript */

.transcript { max-height: 620px; overflow-y: auto; padding: 4px 2px; }
.turn { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 7px 0; }
.turn .who { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
.turn.rep .who { color: var(--brand); }
.turn.seller .who { color: var(--text-muted); }
.turn .t { font-family: var(--mono); font-size: 11px; color: var(--text-faint); display: block; font-weight: 400; letter-spacing: 0; }
.turn .said { white-space: pre-wrap; }
.turn.rep .said { color: var(--text); }
.turn.seller .said { color: var(--text-muted); }

audio { width: 100%; margin-top: 4px; }

/* ------------------------------------------------------------- checklist */

.checklist { display: grid; gap: 7px; }
.check { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.check .icon { font-weight: 700; text-align: center; }
.check.hit .icon { color: var(--good); }
.check.partial .icon { color: var(--warn); }
.check.miss .icon { color: var(--bad); }
.check.miss .label { color: var(--text-muted); }
.check .pts { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12.5px; }
.check .evidence { grid-column: 2 / -1; color: var(--text-faint); font-size: 12.5px; font-style: italic; margin-top: 1px; }

/* ------------------------------------------------------------------ misc */

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack { display: grid; gap: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.chip.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.chip.good { background: var(--good-soft); border-color: transparent; color: var(--good); }

.empty { padding: 34px 18px; text-align: center; color: var(--text-faint); font-size: 14px; }
.loading { padding: 34px 18px; text-align: center; color: var(--text-faint); }

.banner {
  display: none;
  margin-bottom: 16px;
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
}
.banner.show { display: block; }
.banner.error { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.banner.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.banner.info { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
/* Two callers pass 'good' — Retry failed and Repair the Sheet, the two
   buttons whose whole job is to report back. With no rule for it the banner
   showed as unstyled text on the page background: technically visible,
   indistinguishable from nothing happening. */
.banner.good { background: var(--good-soft); border-color: var(--good); color: var(--good); }

/* ---------------------------------------------------------------- charts */

.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .tick { fill: var(--text-faint); font-size: 10px; font-family: var(--sans); }
.chart .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--brand); opacity: .10; }
.chart .bar { fill: var(--brand); }
.chart .bar.alt { fill: var(--good); }
.chart .bar.miss { fill: var(--bad); }
.chart .bar.good { fill: var(--good); }
.chart .bar.warn { fill: var(--warn); }
.chart .bar.bad { fill: var(--bad); }
/* The printed score above each column, and the running average drawn over
   them. Dashed on purpose: it is a read of the bars, not another measurement. */
.chart .value { fill: var(--text-muted); font-size: 10px; font-weight: 650; font-family: var(--sans); }
.chart .trend { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; }

/* A call-ruining error, above the score. Loud on purpose: this is the one
   thing on the page that must not be scrolled past. */
.card.critical { border-color: var(--bad); border-left-width: 4px; }
.card.critical h2 { color: var(--bad); }
.critical-row { padding: 10px 0; border-top: 1px solid var(--border); }
.critical-row:first-of-type { border-top: 0; }
.critical-label { font-weight: 700; }
.critical-row blockquote {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--bad);
  color: var(--text-muted);
  font-style: italic;
}
.badge.critical { background: var(--bad); color: var(--bg); }
/* Tabs inside a page, distinct from the top nav so nobody reads them as
   navigation away from the person they are looking at. */
.subtabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 16px 0 12px;
  border-bottom: 1px solid var(--border);
}
.subtabs button, .subtabs a {
  display: block;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: -1px;
}
.subtabs button:hover:not(:disabled), .subtabs a:hover { color: var(--text); background: none; text-decoration: none; }
.subtabs button[aria-selected="true"], .subtabs a[aria-selected="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
.subtabs .pill {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
}
.subtabs button[aria-selected="true"] .pill { background: var(--brand-soft); color: var(--brand-ink); }

/* Direction, on a scannable row. Faint on purpose: it should be readable at a
   glance down the column and invisible when you are reading anything else. */
.dir { color: var(--text-faint); font-weight: 700; margin-right: 5px; }
.dir.out { color: var(--brand); }


.chart .point { fill: var(--brand); }
.chart .legend { fill: var(--text-muted); font-size: 11px; font-family: var(--sans); }

/* ------------------------------------------------------------------ modal */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  max-width: 420px;
  width: calc(100% - 32px);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
dialog::backdrop { background: rgba(10, 16, 24, .55); }
dialog h2 { margin: 0 0 6px; font-size: 17px; }
dialog p { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; }
dialog input { width: 100%; margin-bottom: 14px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  main { padding: 16px; }
  .topbar { padding: 0 14px; gap: 12px; }
  .brand small { display: none; }
  .turn { grid-template-columns: 64px 1fr; }
  .section-scores .row { grid-template-columns: 96px 1fr 54px; }
}

@media print {
  .topbar, .controls, button { display: none !important; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* --------------------------------------------------------- bar chart rows */

.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 210px) 1fr 68px; gap: 12px; align-items: center; }
.bar-label { font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { text-align: right; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Phone Academy: lesson content ----------
   The lesson bodies are authored HTML carried over from the academy, so these
   class names come with them. Mapped onto our own tokens rather than the
   academy's palette so a lesson looks like the rest of the dashboard, dark
   mode included. */
.ac-content { font-size: 15px; }
.ac-content h3 { font-size: 15.5px; margin: 0 0 8px; }
.ac-card, .ac-okbox, .ac-rulebox {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 14px;
}
.ac-okbox { border: 2px solid var(--good); }
.ac-okbox h3 { color: var(--good); }
.ac-rulebox { border: 2px solid var(--bad); }
.ac-rulebox h3 { color: var(--bad); }
/* The word-for-word lines. Set apart because they are the only part of a call
   a rep is expected to say exactly. */
.ac-say {
  background: var(--warn-soft); border-left: 3px solid var(--brand);
  padding: 10px 13px; margin: 8px 0; border-radius: 0 8px 8px 0;
}
.ac-why { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 6px 0 0; }
.ac-why.ac-stop { color: var(--bad); }
.ac-content ul, .ac-content ol { margin: 6px 0; padding-left: 20px; }
.ac-content li { margin-bottom: 5px; }
.ac-table, .ac-swap { width: 100%; border-collapse: collapse; }
.ac-table th, .ac-swap th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: 0 10px 6px 0; border-bottom: 1px solid var(--border);
}
.ac-table td, .ac-swap td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; vertical-align: top;
}
.ac-table tr:last-child td, .ac-swap tr:last-child td { border-bottom: 0; }
.ac-table td.ac-yes { color: var(--good); font-weight: 700; white-space: nowrap; }
.ac-table td.ac-no { color: var(--bad); font-weight: 700; white-space: nowrap; }
.ac-spcta td:first-child { font-size: 19px; font-weight: 800; width: 34px; color: var(--brand-ink); }
.ac-swap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.ac-swap th, .ac-swap td { padding-left: 14px; }

/* ---------- Phone Academy: the exam ---------- */
.quiz-q {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 12px;
}
.quiz-q legend { font-weight: 600; padding: 0 6px; }
.quiz-q.correct { border-color: var(--good); background: var(--good-soft); }
.quiz-q.wrong { border-color: var(--bad); background: var(--bad-soft); }
.quiz-opt {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 6px 4px; cursor: pointer; line-height: 1.5;
}
.quiz-opt input { margin-top: 3px; flex: 0 0 auto; }
.quiz-why { color: var(--text-muted); margin: 8px 0 0; line-height: 1.6; }

/* ---------- Sign-in ---------- */
.signin-page { display: grid; place-items: center; min-height: 100vh; }
.signin { width: min(400px, 92vw); padding: 24px 0; }
.signin-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; font-weight: 700; }
.signin-brand .mark { flex: 0 0 auto; }
.signin-brand small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.signin h1 { font-size: 21px; margin: 0 0 4px; }
.signin label {
  display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin: 14px 0 5px;
}
.signin input {
  width: 100%; padding: 11px 13px; font-size: 16px;  /* 16px: anything smaller makes iOS zoom on focus */
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.signin button.primary { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; }
.signin-foot { text-align: center; margin-top: 16px; }
.linky {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand); cursor: pointer; text-decoration: underline;
}

/* ---------- Add a rep ---------- */
.rep-form {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: end;
}
.rep-form label {
  display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 5px;
}
.rep-form input, .rep-form select { width: 100%; height: 34px; }
.rep-form-go { display: flex; align-items: center; gap: 12px; }
#add-rep summary { cursor: pointer; }

/* A folded-away detail inside a card. Reads as a control rather than a
   heading, so nobody mistakes the collapsed state for missing data. */
.card details > summary { list-style: revert; }
.card details > summary:hover { color: var(--text); }
.card details[open] > summary { margin-bottom: 6px; }


/* ---------- Text tones ----------
   Used on their own, not just inside a badge: form messages, sign-in errors,
   the roster's "cannot sign in" note. Without these they rendered in body
   colour, so a refusal read like a caption. */
.good { color: var(--good); }
.warn { color: var(--warn); }
.bad  { color: var(--bad); }