/* =====================================================================
   ODDS IQ — redesigned with the IBM Carbon Design System (White / g10 theme)
   https://carbondesignsystem.com
   - Typography: IBM Plex Sans / IBM Plex Mono
   - Color: Carbon White (g10) theme tokens
   - Interactive accent: Blue 60 (#0f62fe)
   - Square corners, layered grays, 8px spacing grid, data tables & tiles
   ===================================================================== */

/* ---------------------------------------------------------------------
   CONTENTS
     1.  Tokens                  :root custom properties (color · spacing · type)
     2.  Base / reset            tabular figures, box-sizing, links, focus
     3.  UI shell header
     4.  Layout
     5.  Carbon batch filter     scan/filter buttons · count + latency row
     6.  Carbon slider (stake)   label/control · track & thumb
     7.  Skeleton loading state
     8.  Results head
     9.  Arb cards (Carbon tiles)
     10. Carbon data table
     11. Leg tiles               bookmaker · pick · odds · stake
     12. Copy / links
     13. Diagnostics
     14. Responsive
   --------------------------------------------------------------------- */

:root {
  /* ---- Carbon White theme: background & layer tokens ---- */
  --bg: #ffffff;            /* $background */
  --layer-01: #f4f4f4;      /* $layer-01 (tiles) */
  --layer-02: #ffffff;      /* $layer-02 (raised / menus / cards) */
  --layer-03: #f4f4f4;      /* $layer-03 */
  --layer-accent: #e0e0e0;  /* $layer-accent-01 (tags, pills) */
  --layer-accent-hover: #d1d1d1; /* $layer-accent-hover-01 */
  --layer-selected: #e0e0e0; /* $layer-selected-01 (selected list item) */
  --layer-selected-inverse: #161616;   /* $layer-selected-inverse — slider track & thumb */
  --tag-background-gray: #e0e0e0;       /* $tag-background-gray (Gray 20) */
  --tag-color-gray: #161616;            /* $tag-color-gray (Gray 100) */
  --tag-background-green: #a7f0ba;      /* $tag-background-green (Green 20) */
  --tag-color-green: #0e6027;           /* $tag-color-green (Green 70) */
  --tag-background-red: #ffd7d9;        /* $tag-background-red (Red 20) */
  --tag-color-red: #a2191f;             /* $tag-color-red (Red 70) */
  --tag-background-magenta: #ffd6e8;    /* $tag-background-magenta (Magenta 20) */
  --tag-color-magenta: #9f1853;         /* $tag-color-magenta (Magenta 70) */
  --tag-background-purple: #e8daff;     /* $tag-background-purple (Purple 20) */
  --tag-color-purple: #6929c4;          /* $tag-color-purple (Purple 70) */
  --tag-background-blue: #d0e2ff;       /* $tag-background-blue (Blue 20) */
  --tag-color-blue: #0043ce;            /* $tag-color-blue (Blue 70) */
  --tag-background-cyan: #bae6ff;       /* $tag-background-cyan (Cyan 20) */
  --tag-color-cyan: #00539a;            /* $tag-color-cyan (Cyan 70) */
  --tag-background-teal: #9ef0f0;       /* $tag-background-teal (Teal 20) */
  --tag-color-teal: #005d5d;            /* $tag-color-teal (Teal 70) */
  --background-inverse: #393939;       /* $background-inverse (count tag) */
  --background-inverse-hover: #474747; /* $background-inverse-hover */
  --skeleton-element: #e0e0e0;         /* resting block — Gray 20 */
  --skeleton-background: #f4f4f4;      /* shimmer band — Gray 10, so the sweep clearly reads */
  --field-01: #f4f4f4;      /* $field-01 */
  --field-hover: #e8e8e8;   /* $field-hover-01 */
  --layer-hover: #e8e8e8;   /* $layer-hover-01 */
  --layer-active: #c6c6c6;  /* $layer-active-01 */

  /* ---- Borders ---- */
  --border-subtle: #e0e0e0;     /* $border-subtle-01 */
  --border-strong: #8d8d8d;     /* $border-strong-01 */
  --border-disabled: #c6c6c6;   /* $border-disabled (Gray 30) */
  --border-interactive: #0f62fe;/* $border-interactive / Blue 60 */
  --border-inverse: #161616;    /* $border-inverse */
  --icon-primary: #161616;      /* $icon-primary (checkbox/chip icons) */

  /* ---- Text ---- */
  --text-primary: #161616;      /* $text-primary */
  --text-secondary: #525252;    /* $text-secondary */
  --text-placeholder: #a8a8a8;  /* $text-placeholder */
  --text-helper: #6f6f6f;       /* $text-helper */
  --text-on-color: #ffffff;     /* $text-on-color */
  --text-inverse: #ffffff;      /* $text-inverse (count tag text) */
  --icon-inverse: #ffffff;      /* $icon-inverse (checkbox check) */
  --icon-on-color: #ffffff;     /* $icon-on-color (icon on a colored button) */
  --icon-on-color-disabled: #8d8d8d; /* $icon-on-color-disabled */

  /* ---- Interactive / status ---- */
  --interactive: #0f62fe;       /* $interactive / Blue 60 */
  --button-primary: #0f62fe;
  --button-primary-hover: #0353e9;
  --button-primary-active: #002d9c;
  --button-disabled: #c6c6c6;   /* $button-disabled */
  --text-on-color-disabled: #8d8d8d; /* $text-on-color-disabled */
  --background-hover: rgba(141, 141, 141, 0.12); /* $background-hover (ghost button) */
  --background-active: rgba(141, 141, 141, 0.5); /* $background-active (ghost button) */
  --text-disabled: rgba(22, 22, 22, 0.25);       /* $text-disabled */
  --link: #0f62fe;              /* $link-primary / Blue 60 */
  --link-hover: #0043ce;        /* Blue 70 */
  --support-error: #da1e28;     /* $support-error / Red 60 */
  --text-error: #da1e28;        /* $text-error / Red 60 */
  --support-success: #24a148;   /* $support-success / Green 50 */
  --support-warning: #f1c21b;   /* $support-warning / Yellow 30 */
  --support-caution-minor: #f1c21b;  /* $support-caution-minor / Yellow 30 */
  --support-caution-major: #ff832b;  /* $support-caution-major / Orange 40 */
  --support-info: #0043ce;      /* $support-info / Blue 70 */
  --focus: #0f62fe;             /* $focus (Blue 60 in White theme) */
  --focus-inset: #ffffff;       /* $focus-inset (inner focus gap) */
  /* ---- Token-purge additions: Gray 30 border, secondary/tertiary button
     states, z-index layers, popover elevation ---- */
  --border-subtle-02: #c6c6c6;          /* $border-subtle-02 (Gray 30) */
  --button-secondary: #393939;          /* $button-secondary (Gray 80) */
  --button-secondary-hover: #4c4c4c;    /* $button-secondary-hover */
  --button-secondary-active: #6f6f6f;   /* $button-secondary-active */
  --button-tertiary-active: #002d9c;    /* $button-tertiary-active (Blue 80) */
  --z-sticky: 100;                      /* fixed bottom bar */
  --z-overlay: 200;                     /* batch-filter open surface */
  --z-trigger: 201;                     /* its trigger above the surface */
  --z-toggletip: 30;                    /* toggletips */
  --z-header: 9999;                     /* UI shell header */
  --shadow-popover: 0 2px 6px rgba(0, 0, 0, 0.2);   /* Carbon popover/overlay shadow */

  /* ---- Type ---- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Spacing (Carbon 8px grid) ---- */
  --spacing-01: 0.125rem;   --spacing-02: 0.25rem;   --spacing-03: 0.5rem;
  --spacing-04: 0.75rem;  --spacing-05: 1rem;  --spacing-06: 1.5rem;
  --spacing-07: 2rem;  --spacing-08: 2.5rem;  --spacing-09: 3rem;

  /* ---- Type set (Carbon; size / line-height / letter-spacing) ---- */
  --type-body-01-fs: 0.875rem;  --type-body-01-lh: 1.42857;  --type-body-01-ls: 0.16px;
  --type-body-02-fs: 1rem;  --type-body-02-lh: 1.5;  --type-body-02-ls: 0;
  --type-body-compact-01-fs: 0.875rem;  --type-body-compact-01-lh: 1.28572;  --type-body-compact-01-ls: 0.16px;
  --type-body-compact-02-fs: 1rem;  --type-body-compact-02-lh: 1.375;  --type-body-compact-02-ls: 0;
  --type-heading-compact-01-fs: 0.875rem;  --type-heading-compact-01-lh: 1.28572;  --type-heading-compact-01-ls: 0.16px;
  --type-heading-compact-02-fs: 1rem;  --type-heading-compact-02-lh: 1.25;  --type-heading-compact-02-ls: 0;
  --type-heading-02-fs: 1rem;  --type-heading-02-lh: 1.375;  --type-heading-02-ls: 0;
  --type-heading-03-fs: 1.25rem;  --type-heading-03-lh: 1.4;  --type-heading-03-ls: 0;
  --type-heading-06-fs: 2.625rem;  --type-heading-06-lh: 1.199;  --type-heading-06-ls: 0;
  --type-label-01-fs: 0.75rem;  --type-label-01-lh: 1.33334;  --type-label-01-ls: 0.32px;
  --type-label-02-fs: 0.875rem;  --type-label-02-lh: 1.28572;  --type-label-02-ls: 0.16px;
  --type-helper-text-01-fs: 0.75rem;  --type-helper-text-01-lh: 1.33334;  --type-helper-text-01-ls: 0.32px;
  --type-helper-text-02-fs: 0.875rem;  --type-helper-text-02-lh: 1.28572;  --type-helper-text-02-ls: 0.16px;

  /* Back-compat aliases for tokens referenced inline from app.js / older rules */
  --muted: var(--text-secondary);
  --accent: var(--interactive);
  --accent-bright: var(--link);
  --text: var(--text-primary);
  --border: var(--border-subtle);
  --danger: var(--support-error);
  --warning: var(--support-warning);

  /* Carbon productive motion easing */
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);          /* motion(standard, productive) */
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);              /* motion(entrance, productive) */
  --ease-exit: cubic-bezier(0.2, 0, 1, 1);                     /* motion(exit, productive) */
  --ease-out: cubic-bezier(0, 0, 0.25, 1);                     /* @carbon/motion $ease-out — Loading spin-down */
}

/* =====================  BASE / RESET  ===================== */
/* Numeric data renders in IBM Plex Sans with tabular figures — Carbon reserves
   Plex Mono for code, and aligns numbers with tabular ('tnum') Plex Sans. */
.odds,
.stake,
.stake-amount,
.profit-tag,
.staleness,
.arb-countdown {
  font-family: var(--font-sans);
  font-feature-settings: 'tnum' 1;
}

* { box-sizing: border-box; }

/* Carbon is a square-cornered system. */
*, *::before, *::after { border-radius: 0; }

/* The hidden attribute must win over component display rules
   (e.g. inline-flex fields, the count tag, the staleness pill). */
[hidden] { display: none !important; }

/* Root stays at the 16px browser default so 1rem = 16px — the basis every rem
   token is sized against. Body text is 14px (body-01) applied to <body> only;
   setting font-size on <html> would change the rem basis and shrink everything. */
html { scrollbar-gutter: stable; font-size: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-01-fs);
  line-height: var(--type-body-01-lh);           /* body-01 */
  letter-spacing: var(--type-body-01-ls);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Carbon focus ring: a 2px inset $focus (Blue 60) outline. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -0.125rem;
}

/* =====================  UI SHELL HEADER  ===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: 48px;
  background: var(--bg);
  border-bottom: 0.0625rem solid var(--border-subtle);
}
.topbar-inner {
  height: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--spacing-05);
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35ch;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0;
}
.brand-prefix { font-weight: 300; color: var(--text-secondary); }
.brand-name { font-weight: 600; color: var(--text-primary); }
/* =====================  LAYOUT  ===================== */
main {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding: var(--spacing-07) var(--spacing-05) var(--spacing-09);    /* $spacing-09 bottom */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03);                         /* $spacing-03 between the hero (filter toolbar) and the Arbs section */
}

/* Page title — Carbon expressive heading-05 (32px / 40px / 400). */
.page-title {
  margin: 0 0 var(--spacing-09);                 /* $spacing-09 to the description below */
  font-family: var(--font-sans);
  font-size: 2rem;                  /* expressive heading-05 */
  font-weight: 400;
  line-height: 1.25;                /* 40px */
  letter-spacing: 0;
  white-space: nowrap;              /* keep the hero title on one line */
  color: var(--interactive);        /* Blue 60 */
}
/* Hero description under the title — Carbon heading-03 (20px / 28px / 400). */
.page-description {
  margin: 0;
  max-width: 40rem;
  font-family: var(--font-sans);
  font-size: var(--type-body-02-fs);                  /* body-02 */
  font-weight: 400;
  line-height: var(--type-body-02-lh);                 /* 24px */
  letter-spacing: var(--type-body-02-ls);
  color: var(--text-primary);
}

/* Carbon tile. */
.panel {
  position: relative;
  background: var(--layer-01);
  border: 1px solid var(--border-subtle);
  padding: var(--spacing-06);
}

.panel h2 {
  margin: 0 0 var(--spacing-05);
  font-family: var(--font-sans);
  font-size: var(--type-heading-03-fs);            /* heading-03 */
  line-height: var(--type-heading-03-lh);
  font-weight: 400;
  letter-spacing: var(--type-heading-03-ls);
  color: var(--text-primary);
}

/* ---- Filters: Carbon FluidForm (contained card) ----
   https://carbondesignsystem.com/components/form/
   The fluid form is a $border-subtle card: a header section (title +
   description on a $layer fill, divided from the body by a border) above the
   flush fluid fields (each on a $field fill). Labels sit INSIDE the fields. */
/* ====================  CARBON BATCH FILTER  ====================
   https://carbondesignsystem.com/patterns/filtering/  ("Multiple filters with
   batch updates"). A Filter button (funnel icon) below the hero copy opens a
   popover of checkbox groups + the stake slider, applied together with a flush
   "Reset filters" / "Apply filters" button set. */
.batch-filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-05);                         /* $spacing-05 — buttons bar → count row below */
  margin-top: var(--spacing-06);                 /* $spacing-06 below the hero description */
}
/* Buttons row: count tag + Filters + Scan, right-aligned; anchors the popover. */
.batch-filter-bar {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-05);                        /* $spacing-05 between the count tag and the buttons */
}
/* Toolbar row: Scan, the filter icon button, then the stake input filling the rest. */
.batch-filter-actions {
  flex: 1;                          /* span the toolbar so the input can fill */
  display: flex;
  align-items: center;
  gap: 0;                           /* filter icon sits flush between scan and the input */
}
/* Groups the icon-only filter button with its popover; stays unpositioned so the
   popover anchors to .batch-filter-bar (right:0) and can't overflow off-screen. */
.filter-anchor {
  flex-shrink: 0;
  display: flex;
}
/* Last-scan (Latency) stacked on top of the item count, far left; pushes the
   Filter + Scan cluster to the right. */
.count-block {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);                          /* active ↔ latency */
  margin-top: 0;                    /* the 16px gap above lives on .batch-filter */
  margin-bottom: var(--spacing-02);                /* $spacing-02 — gap to the results below */
}
.count-block.is-loading { gap: var(--spacing-02); }   /* active ↔ latency skeleton shapes */
/* While loading (batches 1–2) the latency + active values are skeletons; the
   real values swap in at batch 3. */
/* Hidden by default — the .count-block scope beats the base .skeleton display. */
.count-block .skel-latency,
.count-block .skel-active { display: none; }
.skel-latency { inline-size: 6rem; block-size: 1rem; margin-left: auto; }   /* right-aligned, mirroring .staleness */
.skel-active  { inline-size: 3.5rem; block-size: 1rem; }
.count-block.is-loading .skel-latency,
.count-block.is-loading .skel-active { display: block; }
.count-block.is-loading .staleness,
.count-block.is-loading .count-text { display: none; }
/* Carbon tertiary button: bordered, $interactive text, transparent fill that
   fills on hover/open. Funnel icon + "Filters" label. */
/* Carbon ghost icon button: transparent at rest, $icon-primary glyph, square. */
.filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;                      /* Carbon lg icon button — square, matches the field height */
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon-primary);       /* $icon-primary */
  cursor: pointer;
  transition: background 110ms var(--ease-productive);
}
.filter-btn:hover  { background: var(--background-hover); }    /* $background-hover (ghost) */
.filter-btn:active { background: var(--background-active); }   /* $background-active (ghost) */
/* Disabled (e.g. while a scan runs). */
.filter-btn:disabled,
.filter-btn:disabled:hover { background: transparent; color: var(--text-disabled); cursor: not-allowed; }
.filter-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
/* Open (popover showing) — persistent ghost active fill. */
.filter-btn[aria-expanded="true"] {
  background: var(--background-active);
}
/* Scan arbitrage — Carbon lg primary button to the right of the Filter button. */
.scan-btn {
  position: relative;
  z-index: var(--z-trigger);                     /* below the popover (202) so the popover's 1px overlap sits over it */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 32px;                        /* label → scan icon — fixed 32px */
  min-height: 3rem;                 /* Carbon lg button */
  padding: 0 15px;                  /* 16px each side incl. the 1px border (icon sits 16px from the right) */
  border: 1px solid transparent;
  background: var(--button-primary);
  color: var(--text-on-color);
  font-family: var(--font-sans);
  font-size: var(--type-body-compact-01-fs);                  /* $body-compact-01 */
  letter-spacing: var(--type-body-compact-01-ls);
  line-height: var(--type-body-compact-01-lh);
  cursor: pointer;
  transition: background 110ms var(--ease-productive);
}
.scan-btn:hover:not(:disabled) { background: var(--button-primary-hover); }
.scan-btn:active:not(:disabled) { background: var(--button-primary-active); }
.scan-btn:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: inset 0 0 0 0.0625rem var(--focus), inset 0 0 0 0.125rem var(--focus-inset);
}
.scan-btn:disabled { background: var(--button-disabled); color: var(--text-on-color-disabled); cursor: not-allowed; }
.scan-btn-label { line-height: 1; white-space: nowrap; }
.scan-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Carbon inline-loading state — while a scan runs the button drops its fill +
   border and becomes a spinner + "Scanning…" label (interactive blue spinner,
   $text-secondary text). */
.scan-loading {
  /* Always laid out + animating (out of flow over the label); revealed via
     opacity so there's no display:none -> show hand-off to stall the spinner. */
  display: inline-flex;
  position: absolute;
  inset-block: 0;
  left: 15px;                        /* align with the label's start (the button's left padding) */
  align-items: center;
  gap: var(--spacing-03);                          /* $spacing-03 — spinner → text */
  color: var(--text-secondary);     /* Carbon .cds--inline-loading: text colour set on the container */
  opacity: 0;
  pointer-events: none;
}
.scan-loading-text {
  /* Carbon .cds--inline-loading__text — type-style('label-02'). Colour inherits
     from the container (text-secondary), matching the component's cascade. */
  font-size: var(--type-label-02-fs);                   /* $label-02 */
  font-weight: 400;
  line-height: var(--type-label-02-lh);
  letter-spacing: var(--type-label-02-ls);
}
/* Carbon small Loading spinner (16px): grey $layer-accent background track
   with the blue $interactive arc on top; 690ms linear rotation.
   The rotation lives on this HTML wrapper (not the <svg>) and is promoted to
   its own layer so it keeps spinning on the compositor while scan()'s
   synchronous work blocks the main thread. */
.scan-spinner {
  width: 16px;
  height: 16px;
  line-height: 1rem;                 /* Carbon .cds--loading--small (carbon#13121) */
  flex-shrink: 0;
  animation: scan-rotate 690ms linear infinite;
  will-change: transform;
}
.scan-spinner-svg { display: block; width: 100%; height: 100%; }
.scan-spinner circle {
  fill: none;
  stroke-width: 16;                  /* Carbon --small circle stroke-width */
  stroke-dasharray: 276.4608 276.4608;   /* $circumference (r44 * 2π) */
  stroke-linecap: butt;
}
.scan-spinner-bg { stroke: var(--layer-accent); stroke-dashoffset: -22; }       /* grey track */
.scan-spinner-stroke { stroke: var(--interactive); stroke-dashoffset: 143.76; }  /* loading-progress($circumference, 48) */
@keyframes scan-rotate { 100% { transform: rotate(360deg); } }
/* is-loading is present through the whole spinner → spin-down → finished
   sequence, so its flat (no-fill) look must also win over :hover/:active —
   the button is clickable again during the cosmetic finish, but pressing it
   must not flash the blue fill back behind the spinner/checkmark. */
.scan-btn.is-loading,
.scan-btn.is-loading:hover,
.scan-btn.is-loading:active {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);      /* "Scanning…" label */
}
.scan-btn.is-loading .scan-btn-label,
.scan-btn.is-loading .scan-btn-icon { visibility: hidden; }   /* keep the button's width — no layout shift */
.scan-btn.is-loading .scan-loading { opacity: 1; }
/* Carbon Loading "--loading--stop": a graceful spin-down on completion — two
   700ms ease-out half-turns (forward, then back) on the wrapper while the arc
   fills to 81% then retracts to empty. After 1400ms, setScanLock() swaps the
   spinner back out for the button label. */
.scan-btn.is-stopping .scan-loading { opacity: 1; }   /* stay visible through the spin-down */
.scan-btn.is-stopping .scan-spinner {
  animation:
    scan-rotate-end-p1 700ms var(--ease-out) forwards,
    scan-rotate-end-p2 700ms var(--ease-out) 700ms forwards;
}
.scan-btn.is-stopping .scan-spinner circle {
  animation: scan-stroke-end 700ms var(--ease-out) 700ms forwards;
}
@keyframes scan-rotate-end-p1 { 100% { transform: rotate(360deg); } }
@keyframes scan-rotate-end-p2 { 100% { transform: rotate(-360deg); } }
@keyframes scan-stroke-end {
  0%   { stroke-dashoffset: 52.5276; }    /* loading-progress($circumference, 81) */
  100% { stroke-dashoffset: 276.4608; }   /* loading-progress($circumference, 0) — arc empty */
}
/* Carbon InlineLoading "finished" state — the CheckmarkFilled glyph
   (.cds--inline-loading__checkmark-container: fill $support-success) takes the
   spinner's slot and the text reads "Scanned" until JS restores the button. */
.scan-checkmark {
  display: none;                     /* shown only in the finished state */
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--support-success);      /* $support-success */
}
.scan-btn.is-finished .scan-loading { opacity: 1; }
.scan-btn.is-finished .scan-spinner { display: none; }
.scan-btn.is-finished .scan-checkmark { display: block; }
.filter-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Popover surface — $layer-02 (white), $border-subtle, square corners, Carbon
   menu shadow, positioned below the button. */
.filter-popover {
  position: absolute;
  top: 100%;                        /* sits directly below the toolbar */
  right: 0;                         /* aligns under the right-positioned Filter button, opens leftward */
  z-index: var(--z-overlay);                     /* below the open icon (201) and scan button; the icon's bottom shadow is clipped instead */
  overflow-y: auto;                 /* scroll if taller than the available height (set on open); actions stay pinned */
  width: max-content;
  max-width: min(35rem, calc(100vw - 2rem));
  background: var(--layer-01);      /* grey, matching the arb tile background */
  filter: drop-shadow(var(--shadow-popover));   /* Carbon popover/overlay elevation */
}
.filter-popover[hidden] { display: none; }
/* Two columns — Sport (left) | Market (right) — split by a vertical divider
   that spans the taller column (flex stretches both groups to equal height). */
.filter-popover-body {
  display: flex;
  align-items: stretch;
  padding: var(--spacing-05) var(--spacing-05) var(--spacing-09);          /* 48px below the options, to the Reset/Apply buttons */
}
.filter-group {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 0;
  min-width: 8.75rem;
}
.filter-group:first-child { padding-inline-end: var(--spacing-06); }   /* $spacing-06 to the divider */
.filter-group + .filter-group {
  padding-inline-start: var(--spacing-06);
  border-inline-start: 0.0625rem solid var(--border-subtle-02);   /* $border-subtle-02 (Gray 30) — on a $layer-01 surface */
}
.filter-group-legend {
  padding: 0;
  margin: 0 0 var(--spacing-03);                  /* $spacing-03 under the group label */
  font-size: var(--type-label-01-fs);                  /* $label-01 */
  line-height: var(--type-label-01-lh);
  letter-spacing: var(--type-label-01-ls);
  color: var(--text-secondary);
}

/* Carbon Checkbox: a 16px box (1px $icon-primary border, 2px radius) + $label
   text; checked fills $icon-primary with a $icon-inverse checkmark. The native
   input is visually hidden; .cds-checkbox-box is the rendered control. */
.cds-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);                         /* $spacing-03 box → label */
  min-height: 1.5rem;
  cursor: pointer;
  user-select: none;
}
/* Checkbox list — one column by default; the Sportsbook group (many books)
   flows into two columns to keep the popover compact. */
.filter-options { display: flex; flex-direction: column; gap: 6px; }
#booksGroup .filter-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--spacing-06);                    /* row / column gaps */
}
.cds-checkbox-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}
.cds-checkbox-box {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.cds-checkbox-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--icon-primary);
  border-radius: 0.125rem;
}
.cds-checkbox-input:checked + .cds-checkbox-box::before {
  background: var(--icon-primary);
  border-color: var(--icon-primary);
}
.cds-checkbox-input:checked + .cds-checkbox-box::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  inline-size: 0.5625rem;
  block-size: 0.3125rem;
  inset-block-start: 0.25rem;
  inset-inline-start: 0.21875rem;
  border-block-end: 0.0625rem solid var(--icon-inverse);
  border-inline-start: 0.0625rem solid var(--icon-inverse);
  transform: rotate(-45deg);
}
.cds-checkbox-input:focus-visible + .cds-checkbox-box::before {
  outline: 2px solid var(--focus);
  outline-offset: 0.0625rem;
}
.cds-checkbox-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.28572;
  letter-spacing: 0.01rem;
  color: var(--text-primary);
}

/* Flush Carbon button set: dark "Reset filters" (left) + blue "Apply filters"
   (right), no gap, spanning the popover width. */
.filter-actions { display: flex; position: sticky; bottom: 0; }   /* stay visible when the popover scrolls */
.filter-action {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;          /* label top-aligned */
  justify-content: flex-start;
  min-height: 4rem;                 /* tall action buttons */
  padding: 14px var(--spacing-05);
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-compact-01-fs);                  /* $body-compact-01 */
  letter-spacing: var(--type-body-compact-01-ls);
  line-height: var(--type-body-compact-01-lh);
  text-align: left;
  cursor: pointer;
  transition: background 110ms var(--ease-productive);
}
.filter-action:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 0.0625rem var(--focus), inset 0 0 0 0.125rem var(--focus-inset);
}
.filter-reset {
  background: var(--button-secondary);              /* Gray 80 — Carbon secondary button */
  color: var(--text-on-color);
}
.filter-reset:hover { background: var(--button-secondary-hover); }
.filter-reset:active { background: var(--button-secondary-active); }
.filter-apply {
  background: var(--button-primary);
  color: var(--text-on-color);
}
.filter-apply:hover { background: var(--button-primary-hover); }
.filter-apply:active { background: var(--button-primary-active); }

@media (max-width: 480px) {
  .filter-popover { width: calc(100vw - 32px); }
  /* Keep the two columns (Sport | Market) even on narrow screens, just with a
     tighter divider gutter. */
  .filter-group:first-child { padding-inline-end: var(--spacing-05); }
  .filter-group + .filter-group { padding-inline-start: var(--spacing-05); }
}

/* =====================  CARBON NUMBER INPUT (stake)  ===================== */
/* Mirrors @carbon/styles scss/components/number-input/_number-input.scss (lg):
   - Field        $field fill, 1px $border-strong bottom border, 48px tall
   - Input        $text-primary, body-compact-01-ish, padding-inline 16px / 112px
                  to clear the absolutely-positioned controls
   - Controls     two 48px square buttons (decrement then increment), absolutely
                  pinned to the trailing edge, with a 16px $border-subtle rule
                  divider centred between them (hidden on hover/focus)
   - Button       Subtract / Add (@carbon/icons 16), $icon-primary; on hover
                  $field-hover + a 1px $border-strong inset top edge */
.number-input {
  position: relative;
  display: flex;
  flex: 1;                          /* fill the toolbar space right of the filter icon */
  min-inline-size: 0;
  block-size: 3rem;                 /* lg — 48px */
  background: var(--field-01);
  border-block-end: 0.0625rem solid var(--border-strong);
}
.number-input input[type="number"] {
  box-sizing: border-box;
  flex: 1 1 100%;
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  block-size: 3rem;
  padding-inline: var(--spacing-05) 7rem;               /* lg: $spacing-05 / 112px */
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-01-fs);                     /* body-01 */
  line-height: var(--type-body-01-lh);
  letter-spacing: var(--type-body-01-ls);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.number-input input[type="number"]:focus { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
/* Hide the native spinner — the Carbon controls replace it. */
.number-input input[type="number"]::-webkit-inner-spin-button,
.number-input input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Stepper controls: absolute, trailing edge, two square buttons side by side. */
.number-input-controls {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  inline-size: 6rem;                /* lg: 2 × 48px */
}
.number-input-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  inline-size: 3rem;                /* lg — 48px */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon-primary);
  cursor: pointer;
  /* Keep normal taps/clicks but disable the browser's double-tap-to-zoom so a
     quick double press on +/- doesn't zoom the page. */
  touch-action: manipulation;
  user-select: none;
  transition: background-color 70ms var(--ease-productive);
}
.number-input-btn svg { fill: currentColor; width: 16px; height: 16px; }
.number-input-btn:hover { background: var(--field-hover); box-shadow: 0 -0.0625rem 0 var(--border-strong) inset; }
.number-input-btn:focus { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
/* 16px rule divider centred between the two buttons (Carbon __rule-divider). */
.number-input-rule-divider {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  inline-size: 0.0625rem;
  block-size: 1rem;
  background: var(--border-subtle);
  pointer-events: none;
}
.number-input-controls:hover .number-input-rule-divider,
.number-input-controls:focus-within .number-input-rule-divider { background: transparent; }
/* Disabled (while scanning). */
.number-input input:disabled {
  color: var(--text-disabled);
  -webkit-text-fill-color: var(--text-disabled);
  cursor: not-allowed;
}
.number-input-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  background: transparent;
  box-shadow: none;
}

/* (The old .btn / .actions "Scan arbitrage" button styles were removed — the
   scan is now triggered by the batch filter's "Apply filters" button, styled
   under CARBON BATCH FILTER above.) */

/* =====================  SKELETON LOADING STATE  =====================
   https://carbondesignsystem.com/patterns/loading-pattern/
   Skeleton states are simplified placeholder versions of the arb cards shown
   during the initial load. Each placeholder element is a Carbon skeleton:
   a darker resting block (--skeleton-element) with a near-white band
   (--skeleton-background) that pulses across it for a clearly visible
   sweep. The shimmer is a
   pseudo-element scaled in via scaleX so it animates GPU-side; reduced-motion
   users get a static block. */
.skeleton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: var(--skeleton-element);
  cursor: progress;
  pointer-events: none;
  vertical-align: middle;
}
.skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--skeleton-background);
  animation: skeleton 3000ms ease-in-out infinite;
}
/* Carbon's exact skeleton pulse: the band sweeps in from the left to full
   width, collapses out toward the right, flips transform-origin, and repeats. */
@keyframes skeleton {
  0%   { opacity: 0.3; transform: scaleX(0); transform-origin: left; }
  20%  { opacity: 1;   transform: scaleX(1); transform-origin: left; }
  28%  { opacity: 1;   transform: scaleX(1); transform-origin: right; }
  51%  { opacity: 0.3; transform: scaleX(0); transform-origin: right; }
  58%  { opacity: 0.3; transform: scaleX(0); transform-origin: right; }
  82%  { opacity: 1;   transform: scaleX(1); transform-origin: right; }
  83%  { opacity: 1;   transform: scaleX(1); transform-origin: left; }
  96%  { opacity: 0.3; transform: scaleX(0); transform-origin: left; }
  100% { opacity: 0.3; transform: scaleX(0); transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::before { animation: none; opacity: 1; transform: none; }
}

/* The skeleton card reuses the real .arb-card tile + .arb-head layout, so the
   placeholder elements just need their own dimensions. Sizes approximate the
   real content they stand in for. */
/* Sharp rectangles, all the same height (16px) — widths vary by content.
   meta-foot = sport tag + time, identity = descriptor + teams, profit = % + $,
   and one bar per leg sentence. */
.skeleton-tag      { inline-size: 7rem;  block-size: 1rem; }   /* combined sport + time pill */
/* The % placeholder is taller (heading-06) and tinted blue (Blue 10 base,
   Blue 30 shimmer) to match the real profit percentage; its $ line stays the
   default grey 16px bar. */
.skeleton-profit     { inline-size: 7.5rem; block-size: 2rem; background: var(--tag-background-blue); } /* Blue 20 % line */
.skeleton-profit::before { background: var(--interactive); }                                   /* Blue 60 shimmer */
.skeleton-subtitle { inline-size: 7.5rem; block-size: 1.25rem;  max-inline-size: 50%; }  /* merged descriptor + teams */
/* Leg-tile placeholder — a single bar standing in for the tile content. */
.skeleton-leg { inline-size: 6.875rem; block-size: 1rem; max-inline-size: 100%; justify-self: start; }
/* Skeleton leg tiles don't need cross-tile row alignment, so opt out of the
   real tile's subgrid and just stack the placeholder bars. */
.arb-skeleton .arb-legs { grid-template-rows: none; align-items: start; }
.arb-skeleton .arb-leg {
  grid-row: auto;
  grid-template-rows: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-03);
  /* The tile is Gray 10, so use darker placeholder tokens (Gray 30 block /
     Gray 20 shimmer) — the default Gray 10 shimmer would vanish on the tile. */
  --skeleton-element: #c6c6c6;
  --skeleton-background: #e0e0e0;
}

/* Inline scan-failure message (replaces the old error progress bar). */
.scan-error {
  margin: 0;
  color: var(--text-error);
  font-size: var(--type-body-01-fs);                  /* $body-01 */
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
}

/* =====================  RESULTS HEAD  ===================== */
/* The arbs panel is a plain transparent section — no tile background or
   border. Each arb card is its own Carbon tile instead. */
.panel.hero {
  background: transparent;
  border: none;
  padding: 0;
}
#resultsPanel { margin-top: 0; }
.panel.hero h2 {
  margin: 0;
  font-size: var(--type-heading-03-fs);                  /* heading-03 — matches the Filters title */
  font-weight: 400;
  line-height: var(--type-heading-03-lh);                 /* 28px */
  letter-spacing: var(--type-heading-03-ls);
  color: var(--text-primary);
}
/* The title + toolbar sit on the page background (no grey fill). Only the title
   is padded; the toolbar bleeds to the left/right edges. */
.results-head {
  display: flex;
  flex-direction: column;          /* title row, then the control row beneath */
  gap: var(--spacing-06);                       /* $spacing-06 between last-scan/title block and toolbar */
  margin-bottom: 0;                /* first card is flush */
  background: transparent;
}
.results-title { padding: var(--spacing-05) var(--spacing-05) 0 0; }   /* $spacing-05 top + right; flush to the page edge on the left */
/* Carbon data-table title block: heading + count tag, with the freshness
   status as a description line beneath. */
.results-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-02);                         /* $spacing-02 — title → last-scan badge below it */
  min-width: 0;
}
/* Item count — body-compact-01, $text-primary. Tabular figures so it stays
   steady when the count changes. */
.count-text {
  color: var(--text-primary);       /* $text-primary */
  font-family: var(--font-sans);
  font-size: var(--type-body-compact-02-fs);                  /* body-compact-02 */
  line-height: var(--type-body-compact-02-lh);               /* 22px */
  letter-spacing: var(--type-body-compact-02-ls);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Data-freshness status indicator: neutral label + a Carbon filled status icon
   that carries the state — success when fresh, warning once aging (capped at
   warning, never error). */
.staleness {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);                         /* $spacing-03 */
  margin-left: auto;                /* push latency to the right of the row */
  font-size: var(--type-body-compact-02-fs);                  /* body-compact-02 */
  line-height: var(--type-body-compact-02-lh);             /* 22px */
  letter-spacing: var(--type-body-compact-02-ls);
  color: var(--text-helper);        /* $text-helper (swapped with found) */
  font-variant-numeric: tabular-nums;
}
.staleness-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--support-success);    /* succeeded (fresh) */
}
/* Carbon status indicators: succeeded → caution minor (≥1m) → caution major (≥5m). */
.staleness[data-status="caution-minor"] .staleness-icon { color: var(--support-caution-minor); }
.staleness[data-status="caution-major"] .staleness-icon { color: var(--support-caution-major); }

/* =====================  ARB CARDS (Carbon tiles)  ===================== */
/* Carbon base tile (tile/style spec): $layer background, $spacing-05 (16px)
   padding on every side, 4rem min-height, 8rem min-width, a 2px transparent
   outline that only shows on focus, and body-compact-01 type. The page is
   white ($background), so the tile's $layer resolves to $layer-01. */
.arb-card {
  position: relative;
  background: var(--layer-01);        /* Carbon Tile — $layer-01 (Gray 10), no border */
  outline: 2px solid transparent;     /* $focus shows only on focus */
  outline-offset: -0.125rem;
  padding: var(--spacing-05);                      /* $spacing-05 all sides */
  min-block-size: 4rem;              /* 64px */
  min-inline-size: 8rem;             /* 128px */
  font-size: var(--type-body-compact-01-fs);                   /* body-compact-01 */
  line-height: var(--type-body-compact-01-lh);
  letter-spacing: var(--type-body-compact-01-ls);
  margin: var(--spacing-05) 0 0;                  /* $spacing-05 gap above each tile (first tile resets below) */
}
/* Fade-up only on the first (batch-1) render and on a re-sort — not on the
   progressive batch-3/4 re-renders, which would re-animate in place (a jump). */
.arb-card.arb-animate {
  animation: arbFadeUp 0.24s var(--ease-productive) backwards;
}
/* 24px ($spacing-06) gap between the results toolbar and the first arb tile. */
#results { margin-block-start: 0; }
#results > .arb-card:first-child { margin-top: 0; }   /* first tile flush to the toolbar gap */


/* Empty state — no arbs found. Carbon body-01, $text-secondary. */
/* Carbon empty-state pattern: pictogram, positive title, body, primary action. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  margin: 0 0 var(--spacing-05);                 /* flush with the toolbar above; 16px to the scan details below */
  padding: var(--spacing-09) var(--spacing-05);               /* $spacing-09 top/bottom, $spacing-05 sides */
  background: var(--layer-01);      /* grey, continuous with the toolbar above */
}
.empty-state-img {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--text-secondary);     /* monochrome pictogram */
}
.empty-state-title {
  margin: var(--spacing-04) 0 0;                 /* $spacing-04 — below the pictogram */
  font-size: var(--type-heading-03-fs);                  /* heading-03 — matches the arb-tile profit % */
  font-weight: 400;
  line-height: var(--type-heading-03-lh);                 /* 28px */
  letter-spacing: var(--type-heading-03-ls);
  color: var(--text-primary);       /* $text-primary */
}
.empty-state-body {
  margin: var(--spacing-02) 0 0;                  /* $spacing-02 — below the title */
  max-inline-size: 30rem;
  font-size: var(--type-body-01-fs);                  /* body-01 */
  font-weight: 400;
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-secondary);     /* $text-secondary */
}
/* Carbon primary button (lg) — the empty-state's action. */
.empty-state-action {
  margin-block-start: var(--spacing-06);            /* $spacing-06 below the body */
  display: inline-flex;
  align-items: center;
  block-size: 3rem;                 /* lg — 48px */
  padding-inline: var(--spacing-05);                /* $spacing-05 */
  border: 0;
  background: var(--button-primary);
  color: var(--text-on-color);
  font-family: var(--font-sans);
  font-size: var(--type-body-compact-01-fs);
  letter-spacing: var(--type-body-compact-01-ls);
  cursor: pointer;
  transition: background-color 70ms var(--ease-productive);   /* $duration-fast-01 */
}
.empty-state-action:hover { background: var(--button-primary-hover); }
.empty-state-action:active { background: var(--button-primary-active); }
.empty-state-action:focus-visible { outline: 2px solid var(--focus); outline-offset: -0.125rem; }

@keyframes arbFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arb-card.arb-animate { animation: none; }
}


/* Top section: a top row (profit + countdown), the game as the title, the
   market as the subtitle, then the sport Tag at the bottom. */
.arb-head {
  display: flex;
  justify-content: space-between;   /* text column left, profit top-right */
  align-items: flex-start;
  gap: var(--spacing-05);                        /* $spacing-05 — text ↔ profit */
  margin-bottom: var(--spacing-07);             /* $spacing-07 (32px) — section break to the legs */
}
/* Left column: the profit on top, then the identity (descriptor + title). */
.arb-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-04);                        /* $spacing-04 (12px) — profit → descriptor (group gap) */
  min-width: 0;
}
/* Top row: profit %, then the absolute $, spread across the left 2/3 of the tile. */
.arb-meta {
  display: flex;
  flex-shrink: 0;                   /* profit pinned to the top-right */
}
/* Sport tag + countdown row, at the bottom of the tile (sport left of time). */
.arb-meta-foot {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);                         /* $spacing-03 — sport tag → time */
  margin-top: var(--spacing-09);                 /* $spacing-09 (48px) — section break from the legs above */
}
/* Sport category — Carbon md (24px) Tag, label-01. Each sport gets its own
   Carbon Tag colour (set per data-sport below); gray is the fallback. */
.arb-sport-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-02);                         /* $spacing-02 — leading icon → text */
  height: 24px;                     /* md (medium) tag */
  padding: 0 var(--spacing-03) 0 var(--spacing-02);             /* $spacing-03 trailing; $spacing-02 leading (Carbon md tag w/ icon) */
  border-radius: 0.75rem;              /* tag pill radius (height / 2) */
  background: var(--st-bg, var(--tag-background-gray));
  color: var(--st-fg, var(--tag-color-gray));
  font-family: var(--font-sans);
  font-size: var(--type-label-01-fs);                  /* label-01 */
  font-weight: 400;
  line-height: var(--type-label-01-lh);             /* 16px */
  letter-spacing: var(--type-label-01-ls);
  white-space: nowrap;
}
/* Leading sport icon — 14px, inherits the tag's text colour. */
.arb-sport-icon {
  width: 16px;                      /* lg tag custom-icon size */
  height: 16px;
  flex-shrink: 0;
  display: block;
}
/* Carbon Tag colours by sport, set as vars on the row so the sport tag AND the
   time tag beside it share the same colour. Grouped by family (Carbon has 5
   non-gray tag colours once green/red are reserved for the profit/loss pill):
   basketball → purple, soccer → magenta, Australian codes → teal,
   gridiron/hockey → blue, baseball → cyan. */
.arb-meta-foot[data-sport="NBA"],
.arb-meta-foot[data-sport="NRL"]  { --st-bg: var(--tag-background-purple);  --st-fg: var(--tag-color-purple); }
.arb-meta-foot[data-sport="EPL"],
.arb-meta-foot[data-sport="MLS"]  { --st-bg: var(--tag-background-magenta); --st-fg: var(--tag-color-magenta); }
.arb-meta-foot[data-sport="WNBA"] { --st-bg: var(--tag-background-teal);    --st-fg: var(--tag-color-teal); }
.arb-meta-foot[data-sport="AFL"]  { --st-bg: var(--tag-background-magenta); --st-fg: var(--tag-color-magenta); }   /* magenta, not red — avoid clashing with the loss/error state */
.arb-meta-foot[data-sport="NFL"],
.arb-meta-foot[data-sport="NHL"]  { --st-bg: var(--tag-background-blue);    --st-fg: var(--tag-color-blue); }
.arb-meta-foot[data-sport="MLB"]  { --st-bg: var(--tag-background-cyan);    --st-fg: var(--tag-color-cyan); }
/* Countdown — Carbon md Tag matching the sport tag's colour beside it. */
/* The sport name and the countdown share one pill. */
/* Identity block: the game (title) + the market (subtitle). */
.arb-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                           /* descriptor → team title flush */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Teams / the game — the secondary line: Carbon body-compact-01
   (14px/400/18px), $text-secondary. */
.arb-teams {
  font-family: var(--font-sans);
  font-size: var(--type-body-01-fs);                  /* body-01 */
  font-weight: 400;
  line-height: var(--type-body-01-lh);                /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-secondary);
}
/* Keep each side intact so a long title breaks after the "@" only. */
.arb-team,
.arb-vs { white-space: nowrap; }
/* "@" divider between the teams — margins trimmed to ~6px so the glyph's own
   side-bearing brings the *optical* gap up to the 8px hairline divider's. */
.arb-vs { margin: 0 6px; }
/* Market descriptor — the prominent title line: Carbon heading-compact-02
   (16px/600/20px), $text-primary. */
.arb-market {
  font-family: var(--font-sans);
  font-size: var(--type-body-01-fs);                  /* body-01 */
  font-weight: 400;
  line-height: var(--type-body-01-lh);                /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-secondary);
}
/* Player-prop descriptor: thin vertical rule between the player name and the
   stat line ("Name | Points 25.5"). */
.prop-divider {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 var(--spacing-03);                    /* $spacing-03 (8px) each side */
  background: var(--border-subtle-02);              /* Gray 30 */
  vertical-align: -0.12em;          /* sit centred on the text */
}
/* Profit percentage — the key metric, Carbon heading-03 (20px / 400), neutral
   $text-primary with tabular figures (only the caret keeps the green status colour). */
.profit-tag {
  display: flex;
  flex-direction: column;           /* $ on top, % below */
  gap: var(--spacing-02);           /* $spacing-02 (4px) — dollar → percent */
  align-items: flex-start;          /* left-aligned, below the teams */
  color: var(--text-primary);       /* neutral text */
  font-family: var(--font-sans);
  font-size: var(--type-heading-06-fs);                  /* heading-06 (Light) */
  font-weight: 300;
  line-height: var(--type-heading-06-lh);               /* ~50px */
  letter-spacing: var(--type-heading-06-ls);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Absolute $ profit — supporting metric beneath the %, with the differential
   arrow after it. Carbon body-compact-02 in $text-secondary. */
.profit-dollar {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-02);                         /* $spacing-02 — amount → "Profit" */
  margin-top: 0;                    /* no leading trim — full line-box gap to the % above */
  font-family: var(--font-mono);    /* IBM Plex Mono */
  font-size: var(--type-heading-compact-02-fs);                  /* heading-compact-02 — matches the descriptor */
  font-weight: 600;
  line-height: var(--type-heading-compact-02-lh);               /* 20px */
  letter-spacing: var(--type-heading-compact-02-ls);
  color: var(--text-primary);       /* primary supporting metric */
  font-variant-numeric: tabular-nums;
}
/* "Profit" unit label — same heading token as the $ number it follows
   (inherits heading-compact-02 / 600 / $text-primary), but set in Plex Sans. */
.profit-dollar-label {
  font-family: var(--font-sans);    /* IBM Plex Sans */
}
/* Carbon caret--up differential indicator, left of the $ and matching its
   text style (currentColor → $text-secondary, sized to the $ text via 1em). */
.profit-caret {
  width: 0.3em;                     /* small differential glyph next to the % */
  height: 0.3em;
  flex-shrink: 0;
  color: var(--support-success);    /* green up-caret on a gain */
}
.tier-loss .profit-caret { transform: rotate(180deg); color: var(--support-error); }   /* caret down + red for a loss */
.tier-loss .profit-dollar { color: var(--support-error); }        /* red $ + caret on a loss */
.tier-loss .profit-tag { color: var(--support-error); }   /* red for a loss */
/* The percentage is the headline figure — $support-success (green) for a gain. */
.profit-pct {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);           /* $spacing-03 — caret → % */
  font-family: var(--font-mono);    /* IBM Plex Mono */
  color: var(--support-success);
}
.tier-loss .profit-pct { color: var(--support-error); }   /* red % on a loss */

/* =====================  CARBON DATA TABLE  =====================
   Values taken directly from carbondesignsystem.com/components/data-table
   (style → Color / Typography / Structure):
     Column header  bg $layer-accent · text $text-primary · heading-compact-01 (14/600)
     Row            bg $layer · text $text-secondary · border-bottom $border-subtle · body-compact-01 (14/400)
     Row hover      bg $layer-hover · text $text-primary
     Column padding 16px ($spacing-05) left/right
     Row size       XL = 64px; header matches the row size; cells take 16px
                    ($spacing-05) block padding and content is top-aligned
                    (vertical-align: top) so a secondary line fits beneath. */
/* =====================  LEG TILES (one per leg)  =====================
   Each leg is a Gray 10 Carbon clickable tile linking to the bookie. Content
   is stacked — bookie, selection, odds, stake — with a Launch icon pinned to
   the bottom-right; two tiles side by side with a 16px gap. */
.arb-legs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);   /* shared row tracks so tile content aligns */
  column-gap: var(--spacing-05);                  /* $spacing-05 between the tiles */
  row-gap: 0;                        /* bookmaker↔selection flush; the odds Tag
                                        carries its own 8px above/below */
}
.arb-leg {
  position: relative;                /* anchors the stretched link + launch icon */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;       /* bookie/selection/odds/stake align across tiles */
  align-content: start;
  background: var(--layer-02);       /* nested $layer-02 (white) on the $layer-01 card */
  padding: var(--spacing-05);                     /* $spacing-05 */
  font-family: var(--font-sans);
}
/* Whole tile links to the bookie (Carbon clickable tile). Navigation is driven
   in JS so a stake click can never fall through to the link. */
.arb-leg[data-href] { cursor: pointer; }
.arb-leg[data-href]:hover { background: var(--layer-hover); }   /* $layer-hover */
.arb-leg[data-href]:focus-visible { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
/* Bookie — first row and the tile's link/anchor. A plain Carbon link
   (body-compact-01, $link-primary, weight 400) so it doesn't out-shout the
   odds/stake values; no underline at rest, underline + $link-hover on hover. */
.arb-leg-book {
  font-size: var(--type-body-compact-01-fs);                  /* body-compact-01 */
  font-weight: 400;
  line-height: var(--type-body-compact-01-lh);            /* 18px */
  letter-spacing: var(--type-body-compact-01-ls);
  color: var(--link);
}
.arb-leg[data-href]:hover .arb-leg-book {
  color: var(--link-hover);
  text-decoration: underline;
}
/* Carbon "Launch" icon pinned to the tile's bottom-right, marking the link. */
.arb-leg-launch {
  position: absolute;
  right: var(--spacing-04);
  top: var(--spacing-04);
  width: 20px;
  height: 20px;
  color: var(--link);
  pointer-events: none;
}
/* Selection / side — the bet itself, given the same caption+value treatment as
   Odds/Stake (a "Pick" caption above the value), in body-compact-01. */
.arb-leg-sel {
  display: flex;
  flex-direction: row;              /* caption then value on one line — inline key/value */
  align-items: baseline;            /* caption baseline aligns to the value */
  gap: 10px;                         /* caption → value gap ($spacing-04 12px − 2px) */
  margin-top: var(--spacing-03);                  /* $spacing-03 (8px) — separation from the bookmaker (row-gap is 0) */
}
.arb-leg-sel-val {
  min-width: 0;                     /* let a long pick wrap instead of overflowing */
  font-size: var(--type-body-compact-01-fs);                  /* body-compact-01 */
  font-weight: 400;
  line-height: var(--type-body-compact-01-lh);            /* 18px */
  letter-spacing: var(--type-body-compact-01-ls);
  color: var(--text-primary);
}
/* Odds + Stake are key/value data rows (Carbon caption + value), not Tags:
   a label-02 caption stacked above the value. The value carries the data, so
   the odds — the price of the bet — is the prominent figure of the tile. */
.arb-leg-odds {
  display: flex;
  flex-direction: row;              /* caption then value on one line — inline key/value */
  align-items: baseline;            /* caption baseline aligns to the value */
  gap: 10px;                         /* caption → value gap ($spacing-04 12px − 2px) */
  margin-top: var(--spacing-03);                  /* $spacing-03 above (row-gap is 0) */
  margin-bottom: var(--spacing-03);               /* $spacing-03 below (row-gap is 0) */
}
/* Field caption — Carbon label-01, $text-secondary, left of its value. */
.arb-leg-cap {
  flex-shrink: 0;                   /* caption never compresses; the value gives way */
  inline-size: 2rem;                /* fixed caption column so every value's left edge lines up */
  font-size: var(--type-label-01-fs);                  /* label-01 */
  font-weight: 400;
  line-height: var(--type-label-01-lh);            /* 16px */
  letter-spacing: var(--type-label-01-ls);
  color: var(--text-secondary);
}
/* Decimal odds — the headline value, Carbon heading-compact-01 / $text-primary. */
.arb-leg-odds-val {
  font-family: var(--font-mono);    /* IBM Plex Mono */
  font-size: var(--type-heading-compact-01-fs);                  /* heading-compact-01 */
  font-weight: 600;
  line-height: var(--type-heading-compact-01-lh);            /* 18px */
  letter-spacing: var(--type-heading-compact-01-ls);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.arb-leg-stake {
  position: relative;                /* sit above the tile link so copy works */
  z-index: 2;
  display: flex;
  flex-direction: row;               /* caption then value on one line — inline key/value */
  align-items: baseline;             /* caption baseline aligns to the value */
  gap: 10px;                          /* caption → value gap ($spacing-04 12px − 2px) */
  justify-self: start;               /* keep the copy zone to the stake content width */
  cursor: pointer;
  user-select: none;                 /* click the amount to copy, don't select the text */
}
.stake-amount {                                          /* stake — heading-compact-01, matches Odds */
  font-family: var(--font-mono);    /* IBM Plex Mono */
  font-size: var(--type-heading-compact-01-fs);                  /* heading-compact-01 */
  font-weight: 600;
  line-height: var(--type-heading-compact-01-lh);            /* 18px */
  letter-spacing: var(--type-heading-compact-01-ls);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =====================  COPY / LINKS  ===================== */
/* Inline action — Carbon 32px ghost icon button. */
.copy-btn {
  position: relative;               /* anchors the "Copied!" feedback tooltip */
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  margin-inline-end: var(--spacing-02);           /* icon ↔ amount within the sentence */
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 110ms var(--ease-productive);
}
/* The copy target is the icon + amount (.stake-cell). Hover/press lights both. */
.stake-cell:hover .copy-btn,
.stake-cell:active .copy-btn,
.stake-cell:hover .stake-amount,
.stake-cell:active .stake-amount { color: var(--link); }
.copy-btn:focus { outline: none; }
.copy-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
.copy-btn svg { display: block; }
/* Carbon CopyButton feedback — a "Copied!" tooltip above the button on copy:
   $background-inverse pill, $text-inverse text, label-01, with a down caret. */
.copy-feedback {
  position: absolute;
  bottom: calc(100% + var(--spacing-02));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toggletip);
  padding: var(--spacing-01) var(--spacing-03);                 /* $spacing-03 inline */
  background: var(--background-inverse);   /* $background-inverse */
  color: var(--text-inverse);              /* $text-inverse */
  font-family: var(--font-sans);
  font-size: var(--type-label-01-fs);                  /* label-01 */
  line-height: var(--type-label-01-lh);
  letter-spacing: var(--type-label-01-ls);
  white-space: nowrap;
  border-radius: 0.125rem;               /* Carbon tooltip radius */
  opacity: 0;
  pointer-events: none;
  transition: opacity 110ms var(--ease-productive);
}
.copy-feedback::after {             /* caret pointing down at the button */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--background-inverse);
}
.copy-btn.copied .copy-feedback { opacity: 1; }
/* The stake (copy icon + amount) flows inline within the leg sentence. */
.stake-cell {
  cursor: pointer;             /* only the icon+amount are the click target */
}
/* Carbon Link with icon (link/_link.scss): $link-primary, NO underline at rest
   (the colour signals the link), underline on hover, with a trailing 16px
   "Launch" icon marking it as an external/new-tab link. */
/* Keep the bookie link (name + launch icon) intact so a wrapping leg line
   moves the whole link to the next line rather than splitting it. */
.arb-leg-book { white-space: nowrap; }
.book a {
  color: var(--link);                       /* $link-primary */
  text-decoration: none;
  transition: color 70ms var(--ease-productive);   /* $duration-fast-01 */
}
.book a:hover { color: var(--link-hover); text-decoration: underline; }
.book a:active { color: var(--link); }
.book-launch {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: text-bottom;        /* sit on the text line, not above it */
  margin-inline-start: var(--spacing-02);           /* $spacing-02 — label → icon (was the flex gap) */
}

/* =====================  DIAGNOSTICS  ===================== */
.diag {
  margin-top: var(--spacing-05);                 /* $spacing-05 above the scan details tile */
  font-size: 0.75rem;                  /* legal-01 */
  line-height: 1.33334;             /* 16px */
  letter-spacing: 0.02rem;
  color: var(--text-secondary);
}
.diag b { color: var(--text-primary); }
.diag-err { color: var(--support-error); }
.diag-sub { font-size: 0.75rem; line-height: 1.33334; color: var(--text-secondary); }   /* legal-01 */

/* ----- Carbon Expandable Tile (tile/_tile.scss) — the Scan details panel ----- */
.diag-tile {
  position: relative;               /* anchors the bottom-right chevron */
  background: var(--layer-01);      /* $layer */
  outline: 2px solid transparent;   /* → $focus border on keyboard focus */
  outline-offset: -0.125rem;
}
.diag-tile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-05);
  inline-size: 100%;
  margin: 0;
  padding: var(--spacing-05) var(--spacing-09) var(--spacing-05) var(--spacing-05);     /* $spacing-05; reserve the bottom-right chevron's column */
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  color: var(--text-primary);       /* $text-primary */
  font-family: var(--font-sans);
  font-size: var(--type-heading-compact-01-fs);                  /* heading-compact-01 */
  font-weight: 600;
  line-height: var(--type-heading-compact-01-lh);             /* 18px */
  letter-spacing: var(--type-heading-compact-01-ls);
  transition: background 110ms var(--ease-productive);
}
.diag-tile-toggle:hover { background: var(--layer-hover); }   /* $layer-hover */
.diag-tile-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
/* Title group: Carbon status shape indicator + title. */
.diag-tile-label { display: inline-flex; align-items: center; gap: var(--spacing-03); min-width: 0; }   /* $spacing-03 */
.diag-tile-status { flex: 0 0 16px; inline-size: 1rem; block-size: 1rem; }
.diag-tile-status--success { color: var(--support-success); }   /* $support-success */
.diag-tile-status--error { color: var(--support-error); }       /* $support-error */
/* Chevron — anchored to the bottom-right corner (Carbon expandable-tile spec);
   16px $icon-primary, down collapsed, up when open, $duration-fast-02. */
.diag-tile-chevron-btn {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--icon-primary);       /* $icon-primary */
}
.diag-tile-chevron {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform 110ms var(--ease-productive);
}
.diag-tile.is-open .diag-tile-chevron { transform: rotate(180deg); }
/* Expandable Tile motion: height animates over $duration-moderate-01 (150ms)
   standard-productive; the fold content fades over $duration-fast-02 (110ms). */
.diag-tile-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 150ms var(--ease-productive);
}
.diag-tile.is-open .diag-tile-content { grid-template-rows: 1fr; }
.diag-tile-content-inner {
  overflow: hidden;
  padding: 0 var(--spacing-05) var(--spacing-09);             /* the toggle row pads the top; 48px clears the bottom-right chevron */
  opacity: 0;
  transition: opacity 110ms var(--ease-productive);
}
.diag-tile.is-open .diag-tile-content-inner { opacity: 1; }

/* ----- Carbon Accordion (accordion/_accordion.scss) — one item per sport ----- */
.diag-accordion { margin: var(--spacing-04) 0 0; padding: 0; list-style: none; }
.diag-acc-item { border-block-start: 0.0625rem solid var(--border-subtle-02); }       /* $border-subtle-02 (Gray 30) — on a $layer-01 tile */
.diag-acc-item:last-child { border-block-end: 0.0625rem solid var(--border-subtle-02); }
/* Heading button — $text-primary, body-01, min-block-size 40px, $spacing-05
   (density) inline-end padding; hover $layer-hover; $duration-fast-02 motion. */
.diag-acc-heading {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: 3rem;             /* lg accordion */
  margin: 0;
  padding: 0 var(--spacing-05) 0 0;              /* padding-inline-end: $spacing-05 (density) */
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);       /* $text-primary */
  font-family: var(--font-sans);
  font-size: var(--type-body-01-fs);                  /* body-01 */
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  text-align: start;
  transition: background 110ms var(--ease-productive);
}
.diag-acc-heading:hover { background: var(--layer-hover); }   /* $layer-hover */
.diag-acc-heading:focus-visible { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
.diag-acc-title {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: var(--spacing-05);       /* $spacing-05 */
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-03);                         /* $spacing-03 — tag → summary */
}
.diag-acc-sub {                                               /* summary */
  color: var(--text-primary);       /* $text-primary */
  font-size: var(--type-body-01-fs);                  /* body-01 */
  font-weight: 400;
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
}
/* Arrow — 16px $icon-primary chevron; down collapsed, up when open, $duration-fast-02. */
.diag-acc-arrow {
  flex: 0 0 16px;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--icon-primary);       /* $icon-primary */
  transition: transform 110ms var(--ease-productive);
}
.diag-acc-item.is-open .diag-acc-arrow { transform: rotate(180deg); }
/* Content — body-01; padding-block $spacing-03/$spacing-06, padding-inline
   $spacing-05/$spacing-09. Reveal animates over $duration-fast-02 (110ms) with
   the entrance-productive curve (height + opacity), per the accordion spec. */
.diag-acc-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 110ms var(--ease-entrance);
}
.diag-acc-item.is-open .diag-acc-content { grid-template-rows: 1fr; }
.diag-acc-content-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity 110ms var(--ease-entrance);
}
/* Padding lives on a nested wrapper, not the collapsing grid item: a 0fr track
   floors at the grid item's padding, so padding here would leave a dead strip
   under the title when closed. Keeping the grid item padding-free lets the row
   collapse to 0, so the heading button fills the whole closed item. */
.diag-acc-content-pad {
  padding-block: var(--spacing-03) var(--spacing-06);          /* $spacing-03 / $spacing-06 */
  padding-inline: var(--spacing-05) var(--spacing-09);        /* $spacing-05 / $spacing-09 */
  font-size: var(--type-body-01-fs);                  /* body-01 */
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-primary);       /* $text-primary */
}
.diag-acc-item.is-open .diag-acc-content-inner { opacity: 1; }
/* Carbon disables this motion under reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .diag-tile-content,
  .diag-tile-content-inner,
  .diag-acc-content,
  .diag-acc-content-inner,
  .diag-acc-arrow,
  .diag-tile-chevron { transition: none; }
}

/* ----- Carbon Structured List (structured-list/_structured-list.scss) ----- */
.diag-slist { display: block; }
.diag-slist-row { display: flex; border-block-end: 0.0625rem solid var(--border-subtle-02); }   /* $border-subtle-02 (Gray 30) — on a $layer-01 tile */
/* th cell — heading-compact-01, $text-primary, padding-th $spacing-05 $spacing-03
   $spacing-03 $spacing-03 (first cell inline-start 1rem). */
.diag-st {
  flex: 0 0 88px;
  padding: var(--spacing-05) var(--spacing-03) var(--spacing-03) var(--spacing-05);
  font-size: var(--type-body-01-fs);                  /* body-01 — matches the value cell on its right */
  font-weight: 400;
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-primary);       /* $text-primary */
  text-transform: none;
}
/* td cell — body-01, $text-secondary, padding-td $spacing-05 $spacing-03 $spacing-06 $spacing-03. */
.diag-sd {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-05) var(--spacing-03) var(--spacing-06) var(--spacing-03);
  font-size: var(--type-body-01-fs);                  /* body-01 */
  font-weight: 400;
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  color: var(--text-secondary);     /* $text-secondary */
}
.diag-samples-head { margin-top: var(--spacing-04); }   /* $spacing-04 above the Events title */
.diag-samples-title {
  font-size: var(--type-heading-03-fs);                  /* heading-03 */
  font-weight: 400;
  line-height: var(--type-heading-03-lh);                 /* 28px */
  letter-spacing: var(--type-heading-03-ls);
  color: var(--text-primary);       /* $text-primary */
}
.diag-samples-count {
  margin-top: 0;
  font-size: var(--type-body-compact-01-fs);                  /* body-compact-01 */
  font-weight: 400;
  line-height: var(--type-body-compact-01-lh);             /* 18px */
  letter-spacing: var(--type-body-compact-01-ls);
  color: var(--text-secondary);     /* $text-secondary */
}
.diag-hint { margin-top: var(--spacing-02); font-size: 0.75rem; color: var(--support-warning); line-height: 1.33334; }
/* ----- Carbon Data Table (data-table/_data-table.scss) — events, sm/compact ----- */
.diag-table-wrap { margin-top: var(--spacing-06); overflow-x: auto; }   /* $spacing-06 below "N found" */
.diag-table { inline-size: 100%; border-collapse: collapse; border-spacing: 0; }
/* Header — white band, heading-compact-01, $text-primary; 32px tall to match the body rows. */
.diag-table thead th {
  background: var(--layer-02);       /* white */
  color: var(--text-primary);        /* $text-primary */
  height: 32px;                      /* same as the sm body rows */
  font-size: var(--type-heading-compact-01-fs);                   /* heading-compact-01 */
  font-weight: 600;
  line-height: var(--type-heading-compact-01-lh);              /* 18px */
  letter-spacing: var(--type-heading-compact-01-ls);
  text-align: start;
  padding: 0 var(--spacing-05);                   /* inline only; the 32px height centres the text */
  white-space: nowrap;
}
/* Body — body-compact-01, $text-secondary, $border-subtle row divider, $layer-hover. */
.diag-table tbody td {
  color: var(--text-secondary);      /* $text-secondary */
  font-size: var(--type-body-compact-01-fs);                   /* body-compact-01 */
  font-weight: 400;
  line-height: var(--type-body-compact-01-lh);              /* 18px */
  letter-spacing: var(--type-body-compact-01-ls);
  padding: 7px var(--spacing-05);                 /* sm */
  border-block-end: 0.0625rem solid var(--border-subtle-02);   /* $border-subtle-02 (Gray 30) — on a $layer-01 tile */
  vertical-align: middle;
  white-space: nowrap;
}
.diag-table tbody tr:hover td { background: var(--layer-hover); }   /* $layer-hover */
.diag-table tbody tr:last-child td { border-block-end: 0; }
/* ----- Expandable rows (Carbon DataTable expansion) — events → per-book detail. */
.diag-table .diag-x-th, .diag-table .diag-x-cell { inline-size: 2rem; padding: 0; }   /* outrank tbody td padding */
.diag-x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--icon-primary);       /* $icon-primary */
}
.diag-x-chevron {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform 110ms var(--ease-productive);   /* collapsed → points down */
}
.diag-x-btn[aria-expanded="true"] .diag-x-chevron { transform: rotate(180deg); }   /* expanded → points up */
/* When expanded, the divider below the chevron row stays across the data
   columns but drops under the expander — a small gap on the left at the arrow
   (Carbon expandable-row spec). */
.diag-x-row.is-expanded > .diag-x-cell { border-block-end: 0; }
/* Expanded detail row — indented under the event; the per-book list. */
.diag-table .diag-x-detail > td {
  padding: var(--spacing-05) var(--spacing-05) var(--spacing-06) var(--spacing-09);     /* $spacing-05 top, $spacing-06 bottom; 48px left indent */
  white-space: normal;
}
.diag-x-detail:hover > td { background: transparent; }   /* not a hover target */
.diag-book-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-03); }   /* $spacing-03 between tags */
/* Carbon gray Tag (md) — one neutral label per book; doubles as a toggletip trigger. */
.diag-book-tag {
  position: relative;               /* anchors the toggletip popover */
  display: inline-flex;
  align-items: center;
  block-size: 1.5rem;                 /* md tag */
  padding: 0 var(--spacing-03);                   /* $spacing-03 */
  border: 0;
  border-radius: 1rem;
  background: var(--tag-background-gray);   /* $tag-background-gray */
  color: var(--tag-color-gray);             /* $tag-color-gray */
  font-family: var(--font-sans);
  font-size: var(--type-label-01-fs);                  /* label-01 */
  line-height: var(--type-label-01-lh);             /* 16px */
  letter-spacing: var(--type-label-01-ls);
  white-space: nowrap;
  cursor: pointer;
}
.diag-book-tag:focus-visible { outline: 2px solid var(--focus); outline-offset: 0.0625rem; }
/* Carbon Toggletip popover (click-revealed): light $layer popover, body-01,
   $spacing-05 padding, 18rem max width, caret pointing down to the tag. */
.diag-toggletip {
  position: absolute;
  bottom: calc(100% + var(--spacing-03));
  left: 0;                          /* start-aligned: popover extends rightward from the trigger */
  z-index: var(--z-toggletip);
  inline-size: max-content;
  max-inline-size: 18rem;           /* 18rem */
  padding: var(--spacing-05);                    /* $spacing-05 */
  background: var(--layer-02);      /* light popover surface */
  color: var(--text-primary);       /* $text-primary */
  font-size: var(--type-body-01-fs);                  /* body-01 */
  line-height: var(--type-body-01-lh);             /* 20px */
  letter-spacing: var(--type-body-01-ls);
  text-align: start;
  border-radius: 0.125rem;
  filter: drop-shadow(var(--shadow-popover));   /* Carbon popover drop-shadow — also shadows the caret */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 110ms var(--ease-productive);
}
.diag-book-tag[aria-expanded="true"] .diag-toggletip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.diag-toggletip::after {            /* caret pointing down at the tag */
  content: "";
  position: absolute;
  top: 100%;
  left: var(--spacing-05);                       /* caret near the left, over the start-aligned trigger */
  border-inline: 0.375rem solid transparent;
  border-top: 0.375rem solid var(--layer-02);
}
/* Raw + bucket times — helper-text-01 ($text-helper), sans. */
.diag-faint {
  font-size: var(--type-helper-text-01-fs);                  /* helper-text-01 */
  line-height: var(--type-helper-text-01-lh);             /* 16px */
  letter-spacing: var(--type-helper-text-01-ls);
  color: var(--text-helper);
}
/* Find player — a Carbon Search sitting directly on the expandable tile's
   $layer-01 grey (no nested tile background). */
.diag-find { margin: 0; }
.diag-find-label {
  display: block;
  margin-bottom: var(--spacing-03);               /* $spacing-03 */
  font-size: var(--type-label-01-fs);                  /* label-01 */
  line-height: var(--type-label-01-lh);             /* 16px */
  letter-spacing: var(--type-label-01-ls);
  color: var(--text-secondary);     /* $text-secondary */
}
/* Carbon Search (search/_search.scss): $field fill, $border-strong underline,
   16px $icon-secondary magnifier, 40px (md), body-compact-01 text. */
.diag-search {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 2.5rem;                 /* md */
  background: var(--layer-02);      /* $field-02 (white) — field on a $layer-01 surface */
  border-block-end: 0.0625rem solid var(--border-strong);
}
.diag-search-magnifier {
  position: absolute;
  inset-inline-start: 0.75rem;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--text-secondary);     /* $icon-secondary */
  pointer-events: none;
}
.diag-search-input {
  flex: 1 1 auto;
  inline-size: 100%;
  block-size: 100%;
  padding: 0 var(--spacing-08);                  /* clear the magnifier (start) and clear button (end) */
  background: transparent;
  border: 0;
  color: var(--text-primary);       /* $text-primary */
  font-family: var(--font-sans);
  font-size: var(--type-body-compact-01-fs);                  /* body-compact-01 */
  letter-spacing: var(--type-body-compact-01-ls);
}
.diag-search-input::placeholder { color: var(--text-placeholder); }   /* $text-placeholder */
.diag-search-input:focus { outline: 2px solid var(--focus); outline-offset: -0.125rem; }
.diag-search-clear {
  position: absolute;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--icon-primary);       /* $icon-primary */
  transition: background 110ms var(--ease-productive);
}
.diag-search-clear svg { inline-size: 1rem; block-size: 1rem; }
.diag-search-clear:hover { color: var(--icon-primary-hover, var(--text-primary)); }
.diag-find-help {
  margin-top: var(--spacing-03);                  /* $spacing-03 */
  font-size: var(--type-helper-text-01-fs);                  /* helper-text-01 */
  line-height: var(--type-helper-text-01-lh);             /* 16px */
  letter-spacing: var(--type-helper-text-01-ls);
  color: var(--text-helper);        /* $text-helper */
}
.diag-find-results { margin-top: var(--spacing-05); }
.diag-find-group { margin-bottom: var(--spacing-04); }
.diag-find-name { color: var(--text-primary); margin-bottom: var(--spacing-02); }   /* legal-01 (inherited) */
.diag-find-group ul {
  margin: 0;
  padding-left: var(--spacing-05);
  font-size: 0.75rem;                  /* legal-01 */
  line-height: 1.33334;
  color: var(--text-secondary);
}

/* Generic Carbon text input/select used in diagnostics. Excludes the range
   slider, the slider number input, and the multiselect filter input (which
   have their own appearance). */
input:not([type="range"]):not(.stake-number-input):not(.ms-input):not(.diag-search-input), select {
  height: 40px;                     /* $spacing-08 — Carbon md field height */
  background: var(--field-01);
  color: var(--text-primary);
  border: none;
  border-bottom: 0.0625rem solid var(--border-strong);
  padding: 0 var(--spacing-05);                  /* $spacing-05 inline; height centres text */
  font-size: 0.875rem;
  font-family: var(--font-sans);
}
input:not([type="range"]):not(.stake-number-input):not(.ms-input):not(.diag-search-input):focus, select:focus {
  outline: 2px solid var(--focus);
  outline-offset: -0.125rem;
}

/* iOS Safari auto-zooms when a focused field's font-size is below 16px. On
   touch devices, raise text-entry fields to 16px to stop the zoom; selects keep
   their 14px so the sort dropdown matches the filter placeholders. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="range"]),
  textarea {
    font-size: 1rem;
  }
  .number-input input[type="number"] { font-size: 1rem; }   /* avoid iOS focus-zoom */
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 600px) {
  main { padding: var(--spacing-07) var(--spacing-05) var(--spacing-09); }
  .panel { padding: var(--spacing-05); }
  .panel.hero { padding: 0; }
  .results-head { flex-direction: column; align-items: stretch; }
}