/* ══════════════════════════════════════════════════════════════════════
   osgadsagency.com — dark theme corrections
   Loaded AFTER app.css in index.html. Everything is scoped to
   html[data-theme="dark"], so the (vestigial) light block is untouched.

   Based on osg-design-kit's osg-adsagency-fix.css, amended after checking
   each claim against the build that is actually deployed. What changed and
   why is recorded below — read it before editing.

   VERIFIED AND KEPT
     1. The two hard-coded blue gradients are real. app.css:85 (.btn-blue)
        and app.css:164 (.seg button.on) still carry
        linear-gradient(135deg,#1a74ff,#0a52d6) — the retheme moved the
        tokens but never touched these two literals, so the primary button
        and the active segment were still the old blue while the rest of
        the board had moved to #4f9dff. This file overrides them on
        purpose; app.css is intentionally left alone so there is one place
        that owns the correction rather than two that can drift.
     2. Pinning .acct .av and .skiplink to the token is worth more than the
        original file claimed. White on #4f9dff measures 2.76:1 — below AA.
        Dark ink on #4f9dff measures 6.99:1. That is an accessibility fix,
        not a tidy-up.

   AMENDED
     3. The gloss is scoped to large display figures, NOT to every .num.
        Blanket .num with -webkit-text-fill-color:transparent erases any
        figure carrying a semantic colour, and this board has two that
        matter: the cost-per-click cell in the campaigns ledger (green on
        the cheapest, red on the dearest) and the pacing verdict. The
        original exclusion list covered form controls and chips but not
        table cells, so those signals would have gone white. The
        [style*="color"] guard below is a second line of defence.
     4. .kpi .v does not exist in this build — the KPI cards use .kpi2.
        Targeting .kpi .v would have missed every headline number on the
        Overview silently.

   DROPPED
     5. The SQUARE CORNERS block. app.css already zeroes every radius with
        a blanket !important rule (see "Rule 1 — square corners"), so that
        block was dead weight and, lacking !important, could not have won
        anyway. Corners are already square.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. COLOUR: stop the hard-coded gradients overriding the accent ──── */
/* Solid accent with dark ink, not the kit file's dark outlined variant. The
   outline read as kit-consistent but de-emphasised the primary action, and
   this is the higher-contrast option anyway:
     dark ink  #0a0e16 on #4f9dff — 6.99:1
     white     #ffffff on #4f9dff — 2.76:1  (fails AA)
     white on the old gradient    — 7.53:1  (but the wrong blue)
   Icons inside these buttons use stroke="currentColor", so they follow. */
html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .seg button.on{
  background:var(--blue);
  background-image:none;
  border:1px solid var(--blue);
  color:#0a0e16;
  font-weight:700;
  box-shadow:none;
}
html[data-theme="dark"] .btn-blue:hover,
html[data-theme="dark"] .seg button.on:hover{
  background:var(--accent2,#7fb8ff);
  border-color:var(--accent2,#7fb8ff);
  color:#0a0e16;
}
/* The global focus ring is --accent2, which would be near-invisible sitting on
   an accent-filled button. outline-offset already pushes it onto the page
   ground; make that explicit so it survives a future change to the offset. */
html[data-theme="dark"] .btn-blue:focus-visible,
html[data-theme="dark"] .seg button.on:focus-visible{
  outline:2px solid var(--accent2,#7fb8ff);
  outline-offset:2px;
}

/* Dark ink on the accent, not white: 6.99:1 rather than 2.76:1. */
html[data-theme="dark"] .acct .av,
html[data-theme="dark"] .skiplink{
  background:var(--blue);
  color:#0a0e16;
  box-shadow:none;
}


/* ── 2. GLOSS: white-metal treatment on the large display figures ────── */
/* Scoped deliberately. These are the headline numerals — KPI values, deck
   numbers, stat tiles, funnel column totals. Table figures are left alone
   so they keep their semantic colour and stay quietly legible. */
html[data-theme="dark"] .kpi2 .v,
html[data-theme="dark"] .decknum,
html[data-theme="dark"] .lx-sv,
html[data-theme="dark"] .mv{
  font-variant-numeric:tabular-nums;
  color:#ffffff;
  background-image:linear-gradient(155deg,
      #ffffff 0%, #ffffff 22%, #f4f8ff 46%, #b8c8de 72%, #ffffff 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
}

/* Guard: never clip a glyph on an element that sets its own colour (that
   colour is carrying meaning), that owns a background, or that is a form
   control — in each case the text would lose its signal or vanish. */
html[data-theme="dark"] .kpi2 .v[style*="color"],
html[data-theme="dark"] .decknum[style*="color"],
html[data-theme="dark"] .lx-sv[style*="color"],
html[data-theme="dark"] .mv[style*="color"],
html[data-theme="dark"] input.num,
html[data-theme="dark"] select.num,
html[data-theme="dark"] textarea.num,
html[data-theme="dark"] .btn .num,
html[data-theme="dark"] .btn-blue .num,
html[data-theme="dark"] .seg button .num,
html[data-theme="dark"] .cbadge .num,
html[data-theme="dark"] .tag .num,
html[data-theme="dark"] .kindchip .num,
html[data-theme="dark"] .pacechip,
html[data-theme="dark"] .delta{
  background-image:none;
  -webkit-text-fill-color:currentColor;
  filter:none;
}

/* If glyph-clipping is unavailable, fall back to flat white rather than
   invisible text. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  html[data-theme="dark"] .kpi2 .v,
  html[data-theme="dark"] .decknum,
  html[data-theme="dark"] .lx-sv,
  html[data-theme="dark"] .mv{
    background-image:none;
    -webkit-text-fill-color:#ffffff;
    filter:none;
  }
}

/* The gloss is decoration. Reduced-motion users are not affected by it,
   but forced-colours users must not lose the glyphs. */
@media (forced-colors: active){
  html[data-theme="dark"] .kpi2 .v,
  html[data-theme="dark"] .decknum,
  html[data-theme="dark"] .lx-sv,
  html[data-theme="dark"] .mv{
    background-image:none;
    -webkit-text-fill-color:currentColor;
    forced-color-adjust:auto;
    filter:none;
  }
}