/* Bridging CSS — the vocabulary the rebuilt pages use, in the old app's design.
 *
 * `styles.css` is John's, ported verbatim from the old tree (31KB, unchanged).
 * It knows .card, .stat-grid, .stat, .pill, .num, .muted, table. The rebuilt
 * pages were written during Phase 1 against a placeholder stylesheet and speak
 * a slightly different vocabulary — .row, .grow, .name, .sub, .headline,
 * .narrative, .topline.
 *
 * ⚠️ THIS FILE IS THE SEAM, AND IT IS TEMPORARY BY INTENT. The right end state
 * is that pages use one vocabulary. Until then a bridge is honest and a second
 * full stylesheet is not — two stylesheets both claiming to own .card is how a
 * design drifts apart. Nothing here redefines anything styles.css already
 * styles; it only adds the names styles.css has never heard of — with ONE
 * exception, at the bottom: .card-meta's colour, overridden because the
 * ported value fails the contrast floor styles.css itself enforces elsewhere.
 *
 * 🔴 FIXED 2026-09-08 — THIS FILE WAS PAINTING OUTSIDE THE THEME. It referenced
 * `var(--line, #e0dbcd)` and `var(--muted, #6b7770)`. Neither variable has ever
 * been defined anywhere, so both fallbacks fired on every page load: the border
 * of every `.row` and the colour of every `.sub` were hardcoded hex, not theme
 * tokens. `.sub` is used 228 times.
 *
 * The consequence was invisible in light mode (one or two shades off, and
 * #6b7770 sat under the 4.5:1 floor that styles.css enforces on --text-muted)
 * and plainly wrong everywhere else: `[data-theme="dark"]` re-points --border
 * to #24382f and --text-muted to #a3b0a8, and `@media print` re-points them
 * again — but --line and --muted are in neither block, so in dark mode every
 * row rule stayed parchment on near-black, and printed at #e0dbcd on white.
 * A theme that silently does not reach its most-used component is the same
 * shape as the unversioned stylesheet: it looks like taste, it is a bug.
 *
 * Every var() fallback is gone with them — 23 of them, all naming variables
 * that do exist. A fallback on a defined variable is dead code that becomes a
 * wrong colour the day someone renames the token, which is exactly what
 * happened here. `tests/test_stylesheets.py` now fails on either.
 */

.topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.topline h1 { margin-bottom: 0; }

.row {
  display: flex;
  gap: .85rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 600; }

/* 🔴 `.sub` OUTSIDE A .row OR .card HAD NO RULE AT ALL. It is used 228 times
   across the templates and was styled only when it happened to sit inside one
   of those two, which is why template authors kept hand-setting its margin.
   The bare selector is the fix; the contextual ones only adjust spacing. */
.sub,
.row .sub,
.card .sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.headline {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.narrative {
  font-size: .9rem;
  border-top: 1px dashed var(--border);
  margin-top: .6rem;
  padding-top: .6rem;
}
.narrative p { margin: .4rem 0; }

.facts { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.fact {
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .12rem .4rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fact b { color: var(--text-muted); font-weight: 600; }

/* The rebuilt pages mark a whole card as needing attention. styles.css has
   .pill.warn / .pill.bad for the label; this is the card that carries one. */
.card.warn { border-left: 4px solid var(--gold); }
.card.good { border-left: 4px solid var(--good); }
.card.bad  { border-left: 4px solid var(--bad); }

button.link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

/* The sign-out form sits inline in the topline rather than as a block. */
.topline form { margin: 0; }

/* Forms. styles.css styles the old app's import widgets by id and class and
   has no rule for a bare label, input, select or submit — the login and
   balance forms rendered as browser defaults, inline, ~20px tall. */
form label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: .7rem 0 0;
}
form label b.bad {
  display: block;
  font-size: .8rem;
  color: var(--bad);
  margin: .15rem 0;
}
form input:not([type="hidden"]):not([type="checkbox"]),
form select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin-top: .3rem;
  padding: .5rem .7rem;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
form input:focus,
form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--ring);
}
form label.confirm {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-weight: 400;
  color: var(--text);
}
form label.confirm input[type="checkbox"] { margin-top: .2rem; flex: none; }
form label.confirm b.bad { display: inline; margin: 0; }
form button[type="submit"]:not(.link) {
  display: inline-block;
  margin-top: 1rem;
  min-height: 44px;
  padding: .5rem 1.2rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #fffcf5;
  background: linear-gradient(180deg, var(--accent), var(--accent-ink));
  border: 1px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
}
form button[type="submit"]:not(.link):hover { filter: brightness(1.08); }
form button[type="submit"]:not(.link):focus-visible { box-shadow: var(--ring); }
.card form { max-width: 28rem; }

/* The date under a headline figure. `.card-meta` is nowrap for card headers;
   this one may wrap on a phone. */
.as-of { font-size: .8rem; font-variant-numeric: tabular-nums; }

footer .build {
  margin-top: .4rem;
  font-size: .7rem;
  font-family: var(--font-mono);
  color: var(--text-subtle);
}

/* The one <pre> in the app (/connections refresh commands). A bare <pre>
   inside a 281px card made the BODY scroll sideways on a phone. */
pre.cmd {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font: 12px/1.5 var(--font-mono);
  margin: .4rem 0;
}
/* .card-meta ships at 11.5px on --text-subtle: 3.76:1 on --surface, under
   the 4.5:1 floor. These are the dates that make a figure trustworthy. */
.card-meta { color: var(--text-muted); font-size: 12px; }
footer .build { color: var(--text-muted); }
/* Card titles outside a .row (the three loudest cards used it bare). */
.name { font-weight: 600; }
/* The disclosure that opens the only write form: same 44px as the form. */
details.record > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
footer { padding: 0 20px; }

/* ---------- The Wheel of Life (2026-09-09) --------------------------------
   Every colour is a theme token, so the wheel follows dark mode and print.
   Hardcoding here is what broke .row and .sub for months; see the header. */
.wheel-wrap { margin: 0 auto .4rem; max-width: 640px; }
.wheel { display: block; width: 100%; height: auto; }

.wheel-ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}
.wheel-axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}
/* 🔴 THE DASH IS THE WHOLE POINT. An unrated spoke must not be mistakable for
   a spoke rated low, and shape carries that better than colour — it survives
   greyscale printing and colour-blindness, which a red/grey pair does not. */
.wheel-axis--unmeasured {
  stroke: var(--text-subtle);
  stroke-dasharray: 3 5;
  opacity: .7;
}
.wheel-shape {
  fill: var(--accent-soft);
  fill-opacity: .75;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* A shape spanning only part of the wheel is drawn open, never filled solid —
   a confident polygon over four of twelve spokes reads as a whole answer. */
.wheel-shape--partial {
  fill: var(--accent-soft);
  fill-opacity: .35;
  stroke-dasharray: 6 4;
}
.wheel-dot { fill: var(--accent); }
.wheel-dot--stale { fill: var(--warn); }

.wheel-label {
  font-family: var(--font-sans);
  font-size: 15px;
  fill: var(--text-muted);
}
.wheel-score {
  font-weight: 700;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.wheel-figure {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Steps folded under the step they share an account with (2026-09-09).
   Indented and rule-marked so they read as part of one job, not as new ones —
   they are still full steps with their own why, effort and due date. */
.also {
  margin-top: .5rem;
  padding-left: .8rem;
  border-left: 2px solid var(--border-strong);
}
.also .name { font-weight: 600; }

/* The SMART strip on a goal card (2026-09-09). Five letters, lit when the
   record actually carries that property — never a tick, because a tick reads
   as an achievement and these are simply present or absent. */
.smart { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.smart-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: help;
}
.smart-letter.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.smart .sub { margin-left: .3rem; }

/* The last four one-offs from the 2026-09-10 sweep. Each was genuinely unique
   rather than one of the two values repeated a hundred times, so each gets a
   name rather than being rounded into a shared one. */
table.flush { margin-bottom: 0; }
.good.strong { color: var(--good); font-weight: 600; }
.muted.spaced { margin-left: var(--space-4); }