/* ============================================================================
   Tool theme bridge.

   The three tool pages style themselves almost entirely through a small set of
   legacy custom properties (--green, --surface, --text …). Rather than rewrite
   ~1,400 lines of rules per page — including the result markup that only exists
   after a live run — this redefines those names in terms of the new design
   tokens. Every existing rule keeps working and picks up the new palette.

   --green was the brand accent in the old design (nav dot, run button, focus
   rings), so it maps to --accent. Where it instead meant "pass" (audit badges,
   status pills), the semantic block at the bottom re-points it to --good, so a
   passing result never renders in warning amber.
   ========================================================================== */

:root {
  --surface: var(--bg-raised);
  --surface-2: var(--bg-raised-2);
  --text: var(--fg);
  --subtle: var(--dim);

  /* brand accent (was green) */
  --green: var(--accent);
  --green-dim: var(--accent-dim);
  --green-border: rgba(232, 163, 61, 0.28);
  --green-glow: rgba(232, 163, 61, 0.14);

  /* warning stays distinguishable from the accent by leaning yellow */
  --amber: var(--at-yellow);
  --amber-dim: rgba(252, 180, 0, 0.1);

  --red: var(--crit);
  --red-dim: var(--crit-dim);

  --sky: var(--at-cyan);
  --sky-dim: rgba(24, 191, 255, 0.1);
  --sky-border: rgba(24, 191, 255, 0.28);
}

/* --- semantic "pass" ------------------------------------------------------
   Custom properties resolve at the point of use, so redefining --green on
   these elements re-colours every var(--green) inside them without touching
   the rules themselves. */
.delta-good,
.badge-good,
.dim-card.good,
.status-allowed {
  --green: var(--good);
  --green-dim: var(--good-dim);
  --green-border: rgba(63, 185, 80, 0.28);
  --green-glow: rgba(63, 185, 80, 0.14);
}

/* --- chrome the shared layout no longer supplies ---------------------------
   The old pages got their top offset from a page-level body rule that base.css
   now owns; the tool header needs its own breathing room under the fixed nav. */
.header {
  padding-top: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
}

/* --- loading state --------------------------------------------------------
   text-align:center only centres inline content. base.css caps paragraphs at a
   72ch measure, so the message became a narrower block sitting flush left while
   the spinner (margin:0 auto) stayed centred.
   Auto margins re-centre the box itself; the tools show this block by setting
   display:block inline, so nothing here may depend on a particular display. */
.loading > * { max-width: min(56ch, 100%); }
.loading p,
.loading .loading-msg,
.loading .loading-sub,
.loading small {
  margin-inline: auto;
  text-align: center;
}

/* --- disclosure indicators -------------------------------------------------
   A dot says "bullet"; a caret says "this opens". Scoped to [aria-expanded] so
   only genuinely interactive headers change — the citation auditor's group
   header and the mapper's static "could not be checked" notice use the same
   classes as plain bullets and keep their dots.
   The attribute + class selector outranks the page's own single-class rule, so
   this wins despite loading earlier. */
[aria-expanded] > .page-group-indicator,
[aria-expanded] > .unranked-dot {
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 6px solid var(--accent);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-right: 0;
  transition: transform var(--d-fast) var(--ease);
}
[aria-expanded="true"] > .page-group-indicator,
[aria-expanded="true"] > .unranked-dot {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  [aria-expanded] > .page-group-indicator,
  [aria-expanded] > .unranked-dot { transition: none; }
}

/* ══ shared report primitives ══════════════════════════════════════════════
   Every tool report renders the same three motion ideas: numbers that count
   up, bars that grow, and disclosure rows that open. They were written inline
   in the readiness audit first; they live here now so the citation auditor and
   anything after it share one definition instead of a third copy.
   Paired with /static/js/tool-viz.js, which arms them after each render. */

/* Counting must not reflow the row it sits in. */
.cnt {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Bars grow when their block first scrolls into view, then hold.
   The observer adds .bars-in to the nearest .bar-scope; fills start at
   scaleX(0). Growing on render instead meant the animation was already over
   by the time a reader scrolled to it. */
.bar-scope .bar-fill {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.bar-scope.bars-in .bar-fill {
  transform: scaleX(1);
}

/* ── stacked stat tile ──────────────────────────────────────────────────
   Label, headline figure, a health bar, then a footnote. Stacking lets the
   figure lead while the bar carries health, which a bare numeral cannot. */
.stat-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.stat-primary .stat-num {
  font-family: "DM Mono", monospace;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-hi);
  font-variant-numeric: tabular-nums;
}
.stat-health {
  height: 5px;
  background: var(--surface-2);
  overflow: hidden;
}
.stat-health-fill {
  display: block;
  height: 100%;
  width: var(--w);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 0.04s);
}
.bars-in .stat-health-fill {
  transform: scaleX(1);
}
/* Health is a genuine pass/fail reading, so green is earned here. */
.stat-health-fill.is-good { background: var(--good); }
.stat-health-fill.is-warn { background: var(--at-yellow); }
.stat-health-fill.is-bad  { background: var(--crit); }
.stat-health-fill.is-info { background: var(--at-blue); }

.stat-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-foot b {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── disclosure caret ───────────────────────────────────────────────────
   The same left-oriented solid amber triangle every disclosure on the site
   uses. Rotates with state rather than swapping glyphs, so the control keeps
   one accessible name and screen readers read aria-expanded, not an arrow. */
.disc-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  justify-self: start;
  border-left: 6px solid var(--accent);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform 0.15s ease;
}
[aria-expanded="true"] > .disc-caret {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .bar-scope .bar-fill,
  .stat-health-fill {
    transform: scaleX(1);
    transition: none;
  }
  .disc-caret { transition: none; }
}

/* Printed reports must show finished state, never a mid-animation frame. */
@media print {
  .bar-scope .bar-fill,
  .stat-health-fill {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}

/* ── tool-page breadcrumbs ────────────────────────────────────────────────
   Shared because all three tool pages had their own copy and the three had
   drifted apart: two hovered to a grey and one to amber, and one carried the
   rule twice. Amber matches the crumbs on /ferox and the glossary. */
.header-eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.header-eyebrow a:hover {
  color: var(--accent);
}
.header-eyebrow a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  color: var(--accent);
}
/* The separator is decoration; the trail is carried by the links themselves. */
.header-eyebrow .crumb-sep { color: var(--dim); }
/* Current page is not a link, so it gets the emphasis instead of a hover. */
.header-eyebrow [aria-current="page"] { color: var(--fg); }