/* ════════════════════════════════════════════════════════════════════
   BIZVITAL · polish.css
   Global interaction-polish layer — loaded site-wide AFTER financial.css
   (see templates/_design_head.html). Purely additive: micro-interactions,
   keyboard focus rings, wrapper-scoped sticky table heads, scrollbars,
   reveal-on-scroll hooks for enhance.js, and small "rescue" baselines for
   classes whose styling lived only in retired stylesheets (style.css /
   bizvital.css / design-system-v2 — none of which are linked anymore).

   RULES OF THIS FILE
   • Every colour comes from financial.css design tokens. The single
     non-token literal is rgba(200,162,75,.18) — the brass focus glow —
     mirroring financial.css's own input focus ring (gold #C8A24B has no
     --gold-rgb token).
   • Never changes display / position / width / height of existing layout
     elements. The only positional rule is the documented sticky thead,
     scoped strictly INSIDE existing scroll wrappers (top: 0 relative to
     the wrapper scrollport, not the viewport topbar).
   • Transitions are scoped to explicit interactive selectors — never *.
     Classes that already declare their own transition in financial.css
     or page CSS are skipped, or given a superset so nothing un-animates.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1 · SCOPED MICRO-TRANSITIONS
   ───────────────────────────────────────────────────────────────────── */
a {
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.pill, .chip, .tag, .dirty-pill, .count-pill {
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

/* Cards that had no transition of their own (cl-card/rule-card/kw-card/
   prof-card/ab-card — all verified page-local card classes). */
.prof-card, .ab-card, .cl-card, .rule-card, .kw-card {
  transition: border-color var(--t-fast) var(--ease),
              box-shadow 200ms var(--ease);
}

/* financial.css transitions .btn-ghost-icon's colour/border only, but the
   global button:hover lift still applies to it — superset the transition
   list so the lift animates instead of jumping. */
.btn-ghost-icon {
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow 200ms var(--ease);
}

/* ─────────────────────────────────────────────────────────────────────
   2 · BUTTONS — hover lift / press / disabled
   (financial.css already gives .btn/button base + hover lift + active +
   disabled opacity. Only gaps are filled here.)
   ───────────────────────────────────────────────────────────────────── */

/* .ab-btn (about.html) has no hover/active/transition of its own. It is
   an inline-flex anchor, so transform renders correctly. */
.ab-btn {
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow 200ms var(--ease);
}
.ab-btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ab-btn:active { transform: translateY(0);    box-shadow: var(--shadow-sm); }
.ab-btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }

/* Press feedback: hover leaves shadow-md in place on plain buttons —
   shrink it on press so the click reads physically. */
button:active, .btn:active { box-shadow: var(--shadow-sm); }

/* Disabled buttons should never lift (financial.css's button:hover lift
   still matches disabled buttons). */
button:disabled, button:disabled:hover,
.btn:disabled, .btn[disabled], .btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────
   3 · FOCUS-VISIBLE — keyboard ring (brass)
   Inputs keep their existing :focus ring from financial.css (its
   input:focus { outline: none } out-specifies this rule for outline).
   ───────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost-icon:focus-visible,
.bv-topbar__icon-btn:focus-visible,
.cl-btn:focus-visible,
.tq-btn:focus-visible,
.ds-btn:focus-visible,
.ab-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(200,162,75,.18); /* matches financial.css input ring */
}

/* Inputs: brass caret to match the focus ring. */
input, select, textarea { caret-color: var(--gold-deep); }

/* ─────────────────────────────────────────────────────────────────────
   4 · CARDS — rest shadows + rescue baselines
   (No border-radius overrides: every live card class already defines its
   own radius. No hover-lift on non-clickable containers.)
   ───────────────────────────────────────────────────────────────────── */

/* Cards that define background/border but no shadow at rest. */
.prof-card, .ab-card { box-shadow: var(--shadow-sm); }

/* Rescue baseline: .rule-card (rules.html) and .kw-card (keywords.html)
   are cloned from <template> by rules.js / keywords.js; their styling
   lived only in the retired style.css. Tokenised re-creation: */
.rule-card, .kw-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.kw-card { padding: 18px 22px; }
.rule-card:hover, .kw-card:hover {
  border-color: var(--ink-5);
  box-shadow: var(--shadow-md);
}

/* ─────────────────────────────────────────────────────────────────────
   5 · TOPBAR — scrolled state
   enhance.js toggles .is-scrolled on .topbar past 8px of scroll; the
   admin topbar partial styles it locally — this is the same value as a
   site-wide baseline so user pages match.
   ───────────────────────────────────────────────────────────────────── */
.topbar.is-scrolled { box-shadow: var(--shadow-sm); }

/* ─────────────────────────────────────────────────────────────────────
   6 · TABLES — wrapper-scoped sticky heads + numeric alignment
   Sticky is applied ONLY inside elements that are themselves scroll
   containers (.rt-table-wrap / .cl-table-wrap), so top: 0 is the wrapper
   scrollport — the viewport topbar never overlaps these. Vertically a
   no-op while the wrappers scroll x-only; correct the day they gain a
   max-height. (Bare tables can't have sticky heads here: financial.css
   sets table { overflow: hidden }, which defeats viewport sticky.)
   ───────────────────────────────────────────────────────────────────── */
.rt-table-wrap table thead th,
.cl-table-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Tabular figures on numeric cells (financial.css sets this on `table`;
   restated on the cell classes so page-local table CSS can't lose it). */
.num, td.num, th.num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ─────────────────────────────────────────────────────────────────────
   7 · SCROLLBARS — muted paper/ink chrome
   (::selection already set by financial.css — not repeated here.)
   ───────────────────────────────────────────────────────────────────── */
html { scrollbar-color: var(--line) transparent; } /* inherits (Firefox) */
html,
.rt-table-wrap,
.cl-table-wrap,
.cl-modal-body,
.chat-body,
.review-edit,
textarea { scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--line);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-5); }
::-webkit-scrollbar-corner { background: transparent; }

/* ─────────────────────────────────────────────────────────────────────
   8 · PILLS / BADGES — rescue baselines
   .dirty-pill (rules/keywords/template_editor toolbars) and .count-pill
   (result.html section heads) were styled only in the retired style.css;
   admin_tally/admin_users carry their own local copies — these baselines
   use identical declarations, so those pages render unchanged.
   ───────────────────────────────────────────────────────────────────── */
.dirty-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink-5);
}

.count-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-4);
  vertical-align: middle;
}

/* Status variants of .tag — same declarations as the local copies in
   admin_tally.html / admin_users.html, promoted to a global baseline. */
.tag.healthy { background: var(--healthy-bg); color: var(--healthy-deep); border-color: transparent; }
.tag.alert   { background: var(--alert-bg);   color: var(--alert-deep);   border-color: transparent; }

/* ─────────────────────────────────────────────────────────────────────
   9 · SCROLL REVEAL — hooks for enhance.js
   enhance.js stamps data-ds-reveal on .cc-section/.ds-card/.cc-status/
   .cc-kpi/.rep-pillar-card/.rep-status-card/.rep-metric and adds
   .ds-in-view when each enters the viewport. The matching CSS lived only
   in retired stylesheets — this activates it. JS-stamped only (no
   template hard-codes the attribute), so content is never hidden
   without JavaScript.
   ───────────────────────────────────────────────────────────────────── */
[data-ds-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
[data-ds-reveal].ds-in-view {
  opacity: 1;
  transform: none;
}

/* .ds-stagger (me.html KPI row): cascade the children's reveal. */
.ds-stagger > [data-ds-reveal]:nth-child(2) { transition-delay: 60ms; }
.ds-stagger > [data-ds-reveal]:nth-child(3) { transition-delay: 120ms; }
.ds-stagger > [data-ds-reveal]:nth-child(4) { transition-delay: 180ms; }
.ds-stagger > [data-ds-reveal]:nth-child(n+5) { transition-delay: 240ms; }

/* ─────────────────────────────────────────────────────────────────────
   10 · REDUCED MOTION
   financial.css already zeroes all animation/transition durations under
   prefers-reduced-motion; this failsafe additionally guarantees revealed
   content is never hidden and nothing translates.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-ds-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ds-stagger > [data-ds-reveal]:nth-child(2),
  .ds-stagger > [data-ds-reveal]:nth-child(3),
  .ds-stagger > [data-ds-reveal]:nth-child(4),
  .ds-stagger > [data-ds-reveal]:nth-child(n+5) { transition-delay: 0ms; }
  .ab-btn:hover, .ab-btn:active,
  .btn-ghost-icon:hover { transform: none; }
}