/* ═══════════════════════════════════════════════════════════════════════════
   TACTIX — polish pack stylesheet                            [polish-20260831]

   Loaded LAST, deliberately. Everything here is either (a) a class this pack
   introduced, or (b) a token override that has to beat tactix-extracted.css
   and the inline critical CSS on source order.

   ⚠ WHY A NEW FILE AND NOT AN EDIT TO tactix-extracted.css
   ────────────────────────────────────────────────────────
   That file is 115KB on ONE line, tactix-subpages.css is 94KB on seventeen,
   and no build step, source directory or source map for either exists
   anywhere in the tree. Hand-editing a built stylesheet is how a change gets
   silently reverted by whatever regenerates it. A separate sheet is
   reviewable, revertible by deleting one <link>, and cannot be clobbered.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── E-1 · contrast — CORRECTION, AND WHY THERE IS NO TOKEN OVERRIDE HERE ──
   The audit that produced this pack reported --muted as #6A7592 (4.23:1 on
   --carbon at best, 3.36:1 on --surface) across 146 call sites, and this file
   originally carried an override for it.

   That finding was WRONG, and the override has been removed. The audit read
   the token where it is DECLARED — the inline critical CSS at the top of
   index.html and theme.css — and missed that it is redeclared twice more,
   later, and the last declaration wins:

     public/index.html  1615    :root{--muted:#6A7592}   (inline critical CSS)
     public/index.html  74022   :root{--muted:#9AA6C2}   (<style id="tac-a11y">,
                                 header comment: "WCAG AA contrast")
     public/index.html  614245  :root{--muted:#8896B3}   ← effective

   #8896B3 measures 6.53 / 5.78 / 5.19 on carbon / panel / surface: it passes
   AA everywhere. The standalone pages (form, live-scores, standings, pricing,
   fixtures) declare #828FA8 — 5.96 / 5.27 / 4.74, which also passes.

   So somebody fixed this before us. Overriding it here would have DARKENED
   the effective colour and undone their work. Nothing to do.               */

/* This part of the finding does survive, measured against the EFFECTIVE
   token rather than the declared one: .sc-sub multiplies --muted by 70%
   opacity, compositing #8896B3 over --carbon to #626D83 = 3.73:1, at 12px.
   Opacity on top of a token that is already at its floor is a subtraction,
   not a design decision. */
.sc-sub { opacity: 1; }

/* ── E-10 · form-field boundaries (WCAG 1.4.11, 3:1 for UI components) ────
   --rim is #252D42 → 1.13:1 against --surface. Inputs, cards and gridlines
   are effectively borderless for a low-vision reader.

   Scoped to INPUTS only, on purpose. Lifting --rim globally would repaint
   every card border in the estate — a large visual change nobody has seen.
   The usability complaint is "where does the field start", and that is what
   this answers. #667394 measures 3.27:1 against --surface.                 */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-input {
  border-color: #667394;
}

/* ── E-7 · tables that were clipped, not scrollable ───────────────────────
   body{overflow-x:hidden} means an unwrapped wide table has its right-hand
   columns CLIPPED — the data is unreachable on a phone rather than merely
   awkward. Wrapping restores the scroll. */
.tx-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tx-tablewrap > table { min-width: 100%; }

/* ── C · one visual language for the three states ─────────────────────────
   The estate has 5 spinners, 0 skeletons and at least three surfaces where
   "loading", "empty" and "we could not load this" render identically in
   12–13px muted grey. These three classes are what the patched renderers
   reach for so that a reader can tell the difference at a glance, without
   reading the sentence. */
.tx-state-error {
  border: 1px solid rgba(255, 59, 92, .35);
  border-radius: 12px;
  background: rgba(255, 59, 92, .06);
}
.tx-state-loading { opacity: .85; }

.tx-retry {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal, #00D4A8);
  background: transparent;
  border: 1px solid var(--teal, #00D4A8);
  border-radius: 9px;
  cursor: pointer;
}
.tx-retry:hover { background: rgba(0, 212, 168, .1); }

/* A real skeleton. The estate had exactly one (the Today panel) and no shared
   class, which is why every other surface flashes empty instead. */
.tx-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: tx-skel-shimmer 1.4s ease infinite;
}
@keyframes tx-skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
/* The global reduce-motion reset in tactix-extracted.css sets
   animation-duration:0.01ms, which still RUNS the animation. For a shimmer
   that means a flicker. Stop it properly. */
@media (prefers-reduced-motion: reduce) {
  .tx-skel { animation: none !important; background: rgba(255,255,255,.06); }
}

/* ── R2 · "Live matches only" ─────────────────────────────────────────────
   Styled to match the "In-play fixtures only" control on the Pro AI
   Predictions page, so the same idea looks the same in both places. */
.tx-liveonly-field { display: flex; align-items: flex-end; }
.tx-liveonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* WCAG 2.5.8 — the estate's own nav uses 44 */
  padding: 0 4px;
  font-size: 13px;
  color: var(--white, #EEF2FF);
  cursor: pointer;
  user-select: none;
}
.tx-liveonly input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--teal, #00D4A8);
  cursor: pointer;
}
.tx-liveonly-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FF3B5C;
  box-shadow: 0 0 0 3px rgba(255, 59, 92, .18);
  flex: 0 0 auto;
}
.tx-liveonly input:focus-visible + .tx-liveonly-dot { outline: 2px solid var(--teal, #00D4A8); outline-offset: 3px; }

/* ── R5 · the two new Form Guides columns ─────────────────────────────────
   Numeric, tabular, and narrow enough that eleven columns still fit the
   680px breakpoint before the mobile card layout takes over. */
.fg-table th.fg-col-gf, .fg-table th.fg-col-ga,
.fg-table td.fg-col-gf, .fg-table td.fg-col-ga {
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 44px;
  white-space: nowrap;
}
.fg-table td.fg-col-ga { color: var(--muted2, #8896B3); }

/* ── R1 · the in-view live count on the Fixtures header ───────────────────
   Same size and colour as the "updates every 15s" it sits beside; the number
   itself is emphasised so it reads as data rather than chrome. */
#fxp-live-count { font-variant-numeric: tabular-nums; }
#fxp-live-count:not(:empty) { color: var(--teal, #00D4A8); font-weight: 700; }

/* ── E-11 · 100vh on mobile ───────────────────────────────────────────────
   Six selectors in the estate use 100vh. On iOS Safari that overshoots by the
   URL-bar height, so the sidebar's last nav item sits under the browser
   chrome. dvh is the fix; the vh line above it is the fallback for browsers
   that do not know dvh. */
@supports (height: 100dvh) {
  .auth-page { min-height: 100dvh; }
  .dash-page { min-height: 100dvh; }
  .sidebar   { height: calc(100dvh - 60px); }
}

/* ── E-8/E-6 · sortable headers ───────────────────────────────────────────
   scope="col" is added by the renderers. This only stops the sort affordance
   being a 12px-tall target. */
th.st-sortable, th[data-ld-sort], th[data-st-sort] { min-height: 32px; }

/* ── E-13 · focus visibility on the controls this pack adds ───────────────
   The global :focus-visible ring in tactix-extracted.css is !important and
   wins, so this is belt-and-braces for the two new interactive elements
   rather than a replacement for it. */
.tx-retry:focus-visible,
.aipp-prow-fixlink:focus-visible {
  outline: 2px solid var(--teal, #00D4A8);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── R8 · the fixture link ────────────────────────────────────────────────
   Inherits the row's type so the title still reads as a title; the dotted
   underline is the estate's existing .tx-cl content-link idiom, which is what
   the in-app Reader intercepts. */
a.aipp-prow-fixlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--teal-glow, rgba(0, 212, 168, .5));
}
a.aipp-prow-fixlink:hover { color: var(--teal, #00D4A8); }

/* ── D-2 · per-tier hit rates on the free Track Record page ───────────────
   Three cards, each a rate with the number it is measured on directly beneath
   it. The denominator is not a footnote here — it is the second line, in the
   same block, because a hit rate without one is the thing CLAUDE.md §1 exists
   to stop.

   The swatches are the /verdicts Gold/Silver/Bronze, matching the Value Board
   and the dashboard insights widget, so the same tier is the same colour
   wherever a reader meets it. */
.trk-tiers { margin: 18px 0 22px; }
.trk-tiers-h {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--white, #EEF2FF);
}
.trk-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.trk-tier {
  border: 1px solid var(--rim, #252D42);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface, #1E2436);
}
.trk-tier-k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.trk-tier:nth-child(1) .trk-tier-k { color: #F5C451; }   /* Gold   — /verdicts swatch */
.trk-tier:nth-child(2) .trk-tier-k { color: #C7D0DE; }   /* Silver */
.trk-tier:nth-child(3) .trk-tier-k { color: #CD8B62; }   /* Bronze */
.trk-tier-thr { font-size: 11px; color: var(--muted2, #8896B3); margin-top: 2px; }
.trk-tier-v {
  font-size: 26px;
  font-weight: 800;
  margin-top: 8px;
  color: var(--white, #EEF2FF);
  font-variant-numeric: tabular-nums;
}
.trk-tier-n { font-size: 11.5px; color: var(--muted2, #8896B3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.trk-tiers-note { font-size: 11.5px; color: var(--muted2, #8896B3); margin: 10px 0 0; }