/* option-d.css — the merge. A's density, C's shape, B's dark craft.
 *
 * This is not a fourth taste. It is the resolution of the other three:
 *
 *   from A · Console   the density. Row padding, type scale and button height
 *                      are A's verbatim. This is a console for reading tables
 *                      all day; rows-per-screen is a daily cost, and air is a
 *                      one-time impression.
 *   from C · Studio    the SHAPE only — 12px radius and the soft long shadow
 *                      instead of a hard 1px rule. Radius costs zero density.
 *                      NOT C's orange links (in a table where every row links,
 *                      everything shouts) and NOT its second typeface.
 *   from B · Midnight  the two things that were genuine craft rather than an
 *                      inversion: the lit top edge on a card, and the halo
 *                      under a status dot. Both live under [data-theme] below,
 *                      because B is a MODE, not an option — see the toggle.
 */
:root {
  --page-pad-y: var(--s-8); --page-pad-x: var(--s-8); --page-max: 1240px;
  --title-size: var(--t-24); --title-weight: 600;
  --stat-size: var(--t-30);  --stat-weight: 600;
  --panel-title-size: var(--t-14);
  --card-pad: var(--s-4) var(--s-5) var(--s-5); --card-pad-x: var(--s-5);
  --panel-gap: var(--s-4); --row-pad: 11px; --cell-size: var(--t-13);
  --btn-h: 34px; --btn-pad: 14px;

  /* Orange marks the ONE next action, and nothing else. Links stay muted so
     the primary button is the only warm thing on the page. */
  --btn-primary-bg: var(--brand-ink);
  --link-ink: var(--ink-muted);

  /* C's shape. The long low shadow replaces the panel rule — it separates a
     card from the page without drawing a line across it. */
  --radius: 12px;
  --elev: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -14px rgba(16,24,40,.20);
  --panel-rule: 0;
}
.panel-head { padding-bottom: var(--s-3); }
thead th { border-top: 1px solid var(--border); }

/* ── dark ──────────────────────────────────────────────────────────────────
   Everything below is B. Colour itself comes from tokens.css's own
   [data-theme="dark"] block, which was validated against its own surface and
   is never an inversion of light. These are the two additions that block
   cannot make, because they are craft rather than palette. */
[data-theme="dark"] {
  /* brand-ink IS the dark surface — a dark-ink button would disappear into
     the page, so the primary goes orange here. The rule is unchanged: one
     warm thing, and it is the next action. */
  --btn-primary-bg: var(--brand-orange);
  --elev: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.55);
}

/* A one-pixel lit top edge. Cheap, and it is most of what separates a dark
   card that looks lit from one that looks like a grey rectangle. */
[data-theme="dark"] .card { position: relative; }
[data-theme="dark"] .card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}

/* A 7px dot disappears on a dark surface without a halo to lift it. */
[data-theme="dark"] .feed-dot.ok  { box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 22%, transparent); }
[data-theme="dark"] .feed-dot.err { box-shadow: 0 0 0 3px color-mix(in oklab, var(--critical) 22%, transparent); }

/* ── the toggle ────────────────────────────────────────────────────────────
   Sits in the header beside the account button. The track is the control; the
   knob slides. Both icons stay visible so the control reads as a state, not a
   button whose label is the thing it will do — the ambiguity that makes a
   lone moon icon a coin flip. */
.theme-toggle {
  --tt-h: 26px; --tt-w: 48px;
  position: relative; flex: none; width: var(--tt-w); height: var(--tt-h);
  margin-inline-end: var(--s-2);
  border: 1px solid color-mix(in oklab, var(--header-ink) 22%, transparent);
  border-radius: 999px; background: color-mix(in oklab, var(--header-ink) 8%, transparent);
  cursor: pointer; padding: 0; display: inline-flex; align-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.theme-toggle:hover { background: color-mix(in oklab, var(--header-ink) 14%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.theme-toggle .tt-knob {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--header-ink);
  transition: translate .18s ease;
}
[data-theme="dark"] .theme-toggle .tt-knob { translate: 22px 0; }

.theme-toggle .tt-ico {
  position: absolute; top: 0; height: 100%; width: 22px;
  display: grid; place-items: center; pointer-events: none;
  color: var(--header-ink); opacity: .55; transition: opacity .18s ease;
}
.theme-toggle .tt-sun  { inset-inline-start: 2px; }
.theme-toggle .tt-moon { inset-inline-end: 2px; }
/* The icon UNDER the knob is the active one, so it dims — the knob is what
   reads at that end. The other brightens to show where you are going. */
.theme-toggle .tt-sun  { opacity: .35; }
.theme-toggle .tt-moon { opacity: .75; }
[data-theme="dark"] .theme-toggle .tt-sun  { opacity: .75; }
[data-theme="dark"] .theme-toggle .tt-moon { opacity: .35; }
.theme-toggle svg { width: 13px; height: 13px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle .tt-knob, .theme-toggle .tt-ico { transition: none; }
}