/* ==========================================================================
   BattleStats broadcast design system
   Matchday broadcast graphics: stadium navy, floodlight white, scoreboard gold.
   Documented in docs/DESIGN_SYSTEM.md. Tokens use the --bc- prefix because
   Bootstrap owns --bs-*; component classes use the bs- prefix.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Surfaces, darkest to lightest */
    --bc-navy-deep: #050F20;   /* score bug, table heads, inset wells */
    --bc-navy: #081830;        /* page background */
    --bc-panel-2: #0C2040;     /* rows, inputs, nested panels */
    --bc-panel: #0F2547;       /* cards and panels */
    --bc-rail: #1A3A68;        /* hover / selected */
    --bc-line: #27497C;        /* borders and dividers */

    /* Ink */
    --bc-white: #F4F7FB;       /* floodlight white: primary text */
    --bc-muted: #A9B8CF;       /* secondary text, labels (7:1 on panel) */
    --bc-faint: #8094B2;       /* low-emphasis text: n/a, few-sample values, placeholders (5.2:1 on panel-2) */

    /* Accents */
    --bc-gold: #FFC21A;        /* scoreboard gold: focus, current, elite (8+) */
    --bc-gold-ink: #2B2100;    /* text on gold */
    --bc-red: #C8102E;         /* small brand accent only */

    /* Rating tiers (match ratings out of 10) */
    --bc-elite: var(--bc-gold);     /* 8.0+ */
    --bc-good: #43D392;             /* 7.0 to 7.9 */
    --bc-typical: #8EA2C0;          /* 5.5 to 6.9 */
    --bc-poor: #FF6B6B;             /* below 5.5 */
    --bc-good-ink: #062417;
    --bc-poor-ink: #2A0606;

    /* Status */
    --bc-success: var(--bc-good);
    --bc-warning: #FFB547;
    --bc-danger: var(--bc-poor);

    /* Type */
    --bc-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
    --bc-body: "Barlow", "Segoe UI", system-ui, sans-serif;

    /* Shape */
    --bc-skew: -12deg;
    --bc-cut: 14px;            /* diagonal cut on plates and the brand tab */
    --bc-radius: 2px;          /* broadcast graphics are square; this only softens inputs */

    /* Spacing (4 px base) */
    --bc-1: .25rem; --bc-2: .5rem; --bc-3: .75rem; --bc-4: 1rem; --bc-5: 1.5rem; --bc-6: 2rem;

    --bc-header-h: 56px;
}

/* ---------- 2. Base ---------- */
.bs-app, .bs-app *, .bs-app *::before, .bs-app *::after { box-sizing: border-box; }
body.bs-app {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bc-navy) radial-gradient(120% 50% at 50% -10%, #17365F 0%, var(--bc-navy) 60%) no-repeat;
    color: var(--bc-white);
    font: 400 1rem/1.45 var(--bc-body);
    -webkit-font-smoothing: antialiased;
}
.bs-app a { color: var(--bc-white); text-decoration-color: var(--bc-gold); text-underline-offset: 3px; }
.bs-app a:hover { color: var(--bc-gold); }
.bs-app :focus-visible { outline: 3px solid var(--bc-gold); outline-offset: 2px; }
/* Scrollbars inside panels and tables match the navy theme */
.bs-app, .bs-app * { scrollbar-color: var(--bc-line) transparent; }
.bs-app h1, .bs-app h2, .bs-app h3, .bs-app h4 { font-family: var(--bc-cond); font-weight: 700; line-height: 1.1; color: var(--bc-white); }
.bs-app h1 { font-size: 2rem; }
.bs-app h2 { font-size: 1.6rem; }
.bs-app h3 { font-size: 1.25rem; }
.bs-num { font-family: var(--bc-cond); font-variant-numeric: tabular-nums; }
.bs-muted { color: var(--bc-muted); }
.bs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bs-sr:focus { position: fixed; z-index: 2000; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; padding: .6rem 1rem; background: var(--bc-gold); color: var(--bc-gold-ink); font: 700 1rem var(--bc-cond); }

/* Form controls: dark wells with a gold focus ring */
.bs-app input:not([type=checkbox]):not([type=radio]):not([type=range]),
.bs-app select,
.bs-app textarea {
    background-color: var(--bc-panel-2);
    color: var(--bc-white);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius);
    font-family: var(--bc-body);
}
.bs-app select {
    appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--bc-gold) 50%), linear-gradient(135deg, var(--bc-gold) 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.bs-app select option { background: var(--bc-panel-2); color: var(--bc-white); }
.bs-app input::placeholder, .bs-app textarea::placeholder { color: var(--bc-faint); }
.bs-app input:focus, .bs-app select:focus, .bs-app textarea:focus { outline: none; border-color: var(--bc-gold); box-shadow: 0 0 0 2px rgba(255, 194, 26, .35); }
.bs-app input[type=checkbox], .bs-app input[type=radio] { accent-color: var(--bc-gold); }

/* ---------- 3. Score-bug header and navigation ---------- */
.bs-bug {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: stretch;
    height: var(--bc-header-h);
    background: var(--bc-navy-deep);
    border-bottom: 3px solid var(--bc-gold);
}
.bs-brand {
    display: flex; align-items: center;
    padding: 0 1.25rem 0 1rem;
    text-decoration: none;
    flex: none;
}
/* The logo sits straight on the navy header: 40 px tall on desktop, 30 px on phones */
.bs-brand picture { display: block; }
.bs-brand img { height: 40px; width: auto; display: block; }
@media (max-width: 560px) { .bs-brand { padding: 0 .5rem 0 .75rem; } .bs-brand img { height: 30px; } }
.bs-app .bs-brand:hover { color: inherit; }

.bs-nav { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.bs-nav-links { display: flex; align-items: stretch; gap: .15rem; list-style: none; margin: 0; padding: 0 0 0 .75rem; }
.bs-dropdown { position: relative; display: flex; align-items: stretch; }
.bs-dropdown-toggle {
    display: flex; align-items: center; gap: .45rem;
    background: none; border: 0; color: var(--bc-muted);
    font: 600 1.08rem/1 var(--bc-cond);
    padding: 0 .85rem; cursor: pointer; min-height: 44px;
}
.bs-dropdown-toggle svg { width: 10px; height: 6px; transition: transform .15s; }
.bs-dropdown-toggle:hover, .bs-dropdown-toggle.open { color: var(--bc-white); }
.bs-dropdown-toggle.open svg { transform: rotate(180deg); }
.bs-dropdown-toggle.current { color: var(--bc-white); box-shadow: inset 0 -3px 0 var(--bc-gold); }

.bs-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 3px); left: 0;
    min-width: 220px; z-index: 9999;
    background: var(--bc-panel); border: 1px solid var(--bc-line); border-top: 3px solid var(--bc-gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    overflow: visible; padding: .25rem 0;
}
.bs-dropdown-menu.open { display: block; }
.bs-dropdown-menu a, .bs-submenu-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    color: var(--bc-white); text-decoration: none; background: none; border: 0; text-align: left;
    font: 600 1.05rem/1.2 var(--bc-cond); padding: .7rem 1.1rem; min-height: 44px; cursor: pointer;
}
.bs-dropdown-menu a:hover, .bs-dropdown-menu a:focus-visible,
.bs-submenu-toggle:hover, .bs-submenu-toggle:focus-visible, .bs-submenu.open > .bs-submenu-toggle {
    background: var(--bc-rail); color: var(--bc-white); outline: none; box-shadow: inset 4px 0 0 var(--bc-gold);
}
/* Keyboard focus gets the same gold ring as every other control */
.bs-dropdown-menu a:focus-visible, .bs-submenu-toggle:focus-visible { outline: 3px solid var(--bc-gold); outline-offset: -3px; }
.bs-dropdown-menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--bc-gold); color: var(--bc-gold); }
.bs-dropdown-menu .menu-section { padding: .5rem 1.1rem .2rem; font: 500 .82rem var(--bc-body); color: var(--bc-muted); }
.bs-dropdown-menu .menu-divider { border-top: 1px solid var(--bc-line); margin: .25rem 0; }
.bs-dropdown-menu .menu-later { display: block; padding: .55rem 1.1rem; font: 500 .9rem var(--bc-body); color: var(--bc-faint); }

/* Submenus (kept for future groups; the nav script handles any .bs-submenu) */
.bs-submenu { position: relative; }
.bs-submenu-caret { font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.bs-submenu-menu { display: none; position: absolute; top: -4px; left: 100%; min-width: 220px; background: var(--bc-panel); border: 1px solid var(--bc-line); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.bs-submenu.open > .bs-submenu-menu { display: block; }
.bs-submenu.flip-left > .bs-submenu-menu { left: auto; right: 100%; }
.bs-submenu.inline > .bs-submenu-menu { position: static; min-width: 0; border: 0; box-shadow: none; background: var(--bc-panel-2); }
.bs-submenu.inline > .bs-submenu-menu a { padding-left: 2rem; }
.bs-submenu.inline > .bs-submenu-toggle .bs-submenu-caret { transform: rotate(90deg); }

.bs-nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; white-space: nowrap; }
.bs-nav-right .welcome { color: var(--bc-muted); font: 500 .95rem var(--bc-cond); }
.bs-nav-right .welcome b { color: var(--bc-white); font-weight: 600; }
.bs-logout {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem;
    font: 600 .98rem/1 var(--bc-cond); color: var(--bc-white); text-decoration: none;
    border: 1px solid var(--bc-line); transform: skewX(var(--bc-skew));
}
.bs-logout > span { transform: skewX(calc(var(--bc-skew) * -1)); }
.bs-app .bs-logout:hover { background: var(--bc-rail); color: var(--bc-white); border-color: var(--bc-gold); }

.bs-menu-toggle {
    display: none; margin-left: auto; align-items: center; gap: .5rem;
    background: none; border: 0; color: var(--bc-white); font: 600 1.05rem var(--bc-cond);
    padding: 0 1rem; min-width: 44px; min-height: 44px; cursor: pointer;
}
.bs-menu-toggle .bars, .bs-menu-toggle .bars::before, .bs-menu-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: ""; transition: transform .15s; }
.bs-menu-toggle .bars::before { position: absolute; top: -6px; }
.bs-menu-toggle .bars::after { position: absolute; top: 6px; }
.bs-menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.bs-menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.bs-menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Phone and small tablet: the nav collapses into a panel under the bug */
@media (max-width: 860px) {
    .bs-menu-toggle { display: flex; }
    .bs-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px;
        flex-direction: column; background: var(--bc-panel); border-bottom: 3px solid var(--bc-gold);
        max-height: calc(100vh - var(--bc-header-h)); overflow-y: auto; box-shadow: 0 16px 32px rgba(0, 0, 0, .5);
    }
    .bs-nav.open { display: flex; }
    .bs-nav-links { flex-direction: column; padding: .25rem 0; }
    .bs-dropdown { flex-direction: column; }
    .bs-dropdown-toggle { padding: .6rem 1rem .2rem; min-height: 0; color: var(--bc-muted); font-size: .95rem; cursor: default; pointer-events: none; }
    .bs-dropdown-toggle svg { display: none; }
    .bs-dropdown-toggle.current { box-shadow: none; }
    .bs-dropdown-menu, .bs-dropdown-menu.open { display: block; position: static; border: 0; box-shadow: none; background: none; min-width: 0; padding: 0; }
    .bs-dropdown-menu a { padding-left: 1.5rem; }
    .bs-nav-right { margin: 0; padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--bc-line); justify-content: space-between; }
}

/* ---------- 4. Page frame ---------- */
.bs-content { flex: 1; width: 100%; padding: var(--bc-5) var(--bc-5) var(--bc-6); }
.bs-footer { padding: .9rem 1.5rem; font-size: .85rem; color: var(--bc-muted); background: var(--bc-navy-deep); border-top: 1px solid var(--bc-line); }
.bs-app .bs-footer a { color: var(--bc-muted); }
.bs-page-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 var(--bc-4); }
.bs-page-title h1 { margin: 0; }
.bs-page-title p { margin: 0; color: var(--bc-muted); font: 500 1.05rem var(--bc-cond); }
@media (max-width: 560px) { .bs-content { padding: var(--bc-4) var(--bc-3) var(--bc-5); } }

/* ---------- 5. Filter chips ---------- */
.bs-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bs-chip {
    display: inline-flex; align-items: center; gap: .55rem; flex: none;
    background: var(--bc-panel); border: 1px solid var(--bc-line); color: var(--bc-white);
    font: 600 1rem/1 var(--bc-cond); padding: .55rem .95rem; min-height: 36px; white-space: nowrap;
    transform: skewX(var(--bc-skew)); cursor: pointer; text-decoration: none;
}
.bs-chip > * { transform: skewX(calc(var(--bc-skew) * -1)); display: inline-block; }
.bs-chip small { color: var(--bc-muted); font-weight: 500; font-size: .9em; }
.bs-chip:hover { border-color: var(--bc-gold); }
.bs-chip[aria-pressed="true"], .bs-chip.active { background: var(--bc-gold); color: var(--bc-gold-ink); border-color: var(--bc-gold); }
.bs-chip[aria-pressed="true"] small, .bs-chip.active small { color: var(--bc-gold-ink); }
@media (max-width: 560px) { .bs-chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 .3rem .25rem; } }

/* Labelled filter field (select or multi-select) */
.bs-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bs-field > label, .bs-label { font: 600 .9rem var(--bc-cond); color: var(--bc-muted); }
.bs-field select, .bs-field input { min-height: 38px; padding: .4rem .7rem; font-size: .95rem; }

/* ---------- 6. Buttons ---------- */
.bs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: 700 1.05rem/1 var(--bc-cond); padding: 0 1.2rem; min-height: 40px;
    border: 1px solid var(--bc-line); background: var(--bc-panel); color: var(--bc-white);
    cursor: pointer; text-decoration: none; transform: skewX(var(--bc-skew));
}
.bs-btn > * { transform: skewX(calc(var(--bc-skew) * -1)); }
.bs-btn:hover { border-color: var(--bc-gold); }
.bs-btn-primary { background: var(--bc-gold); border-color: var(--bc-gold); color: var(--bc-gold-ink); }
.bs-btn-primary:hover { background: #FFD45C; }
.bs-btn-danger { background: transparent; border-color: var(--bc-poor); color: var(--bc-poor); }
.bs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 7. KPI ticker ---------- */
.bs-ticker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--bc-panel); border-left: 6px solid var(--bc-gold); }
.bs-ticker > div { padding: .8rem 1.1rem; border-right: 1px solid var(--bc-line); border-bottom: 1px solid var(--bc-line); min-width: 0; }
.bs-ticker strong { display: block; font: 700 2rem/1 var(--bc-cond); font-variant-numeric: tabular-nums; color: var(--bc-white); }
.bs-ticker span { color: var(--bc-muted); font-size: .85rem; }
@media (max-width: 560px) {
    .bs-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bs-ticker strong { font-size: 1.6rem; }
    .bs-ticker > div { padding: .6rem .75rem; }
}

/* ---------- 8. Rating plate and tiers ---------- */
.bs-plate {
    display: inline-grid; place-items: center; min-width: 4.2rem; height: 2.4rem; padding: 0 .6rem 0 calc(var(--bc-cut) * .8);
    font: 800 1.45rem/1 var(--bc-cond); font-variant-numeric: tabular-nums;
    clip-path: polygon(var(--bc-cut) 0, 100% 0, 100% 100%, 0 100%);
    background: var(--bc-typical); color: var(--bc-navy);
}
.bs-plate.sm { min-width: 3.2rem; height: 1.8rem; font-size: 1.1rem; }
.t-elite { background: var(--bc-elite); color: var(--bc-gold-ink); }
.t-good { background: var(--bc-good); color: var(--bc-good-ink); }
.t-typ { background: var(--bc-typical); color: var(--bc-navy); }
.t-poor { background: var(--bc-poor); color: var(--bc-poor-ink); }
.t-none { background: var(--bc-panel-2); color: var(--bc-faint); }
.tx-elite { color: var(--bc-elite); } .tx-good { color: var(--bc-good); } .tx-typ { color: var(--bc-typical); } .tx-poor { color: var(--bc-poor); }

/* ---------- 9. Leaderboard row ---------- */
.bs-rows { list-style: none; margin: 0; padding: 0; }
.bs-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 0;
    min-height: 52px; margin-bottom: 4px; background: linear-gradient(90deg, var(--bc-panel), var(--bc-panel-2));
    cursor: pointer;
}
.bs-row:hover, .bs-row:focus-visible { background: var(--bc-rail); }
.bs-row[aria-selected="true"], .bs-row.selected { background: var(--bc-rail); box-shadow: inset 4px 0 0 var(--bc-gold); }
.bs-row .rank { font: 700 1.3rem var(--bc-cond); text-align: center; color: var(--bc-muted); }
.bs-row .who { min-width: 0; display: flex; align-items: center; gap: .7rem; }
.bs-row .who b { font: 600 1.2rem/1.1 var(--bc-cond); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-row .who em { font-style: normal; color: var(--bc-muted); font-size: .82rem; }
.bs-row .bs-plate { height: 100%; min-height: 52px; }
.bs-code { font: 700 .85rem/1 var(--bc-cond); background: var(--bc-white); color: var(--bc-navy); padding: .3rem .4rem; min-width: 40px; text-align: center; flex: none; }

/* ---------- 10. Form bars (recent match ratings) ---------- */
.bs-form { display: flex; align-items: flex-end; gap: 2px; height: 28px; min-width: 90px; padding-right: .75rem; }
.bs-form i { flex: 1; min-width: 3px; background: var(--bc-typical); }
.bs-form i.t-elite { background: var(--bc-elite); } .bs-form i.t-good { background: var(--bc-good); } .bs-form i.t-poor { background: var(--bc-poor); }
.bs-form i.low { opacity: .5; }
@media (max-width: 560px) { .bs-row .bs-form { display: none; } }

/* ---------- 11. Panels and the report card ---------- */
.bs-panel { background: var(--bc-panel); border-top: 4px solid var(--bc-gold); padding: 1.1rem 1.2rem 1.3rem; }
.bs-panel.plain { border-top-color: var(--bc-line); }
.bs-panel > h2, .bs-panel > h3 { margin: 0 0 .75rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .75rem; }
.bs-panel > h2 small, .bs-panel > h3 small { font: 500 1rem var(--bc-cond); color: var(--bc-muted); }

.bs-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.bs-card-head b { font: 700 1.55rem/1.05 var(--bc-cond); display: block; }
.bs-card-head span { color: var(--bc-muted); font-size: .9rem; }
.bs-card-score { font: 800 4rem/.9 var(--bc-cond); color: var(--bc-gold); text-align: right; font-variant-numeric: tabular-nums; }
.bs-card-score small { display: block; font: 600 .85rem var(--bc-cond); color: var(--bc-muted); }

/* Diverging component bars: label | negative | positive | value */
.bs-bars { margin: 0; padding: 0; list-style: none; }
.bs-bars li { display: grid; grid-template-columns: 96px 1fr 1fr 52px; align-items: center; min-height: 28px; font: 600 1rem var(--bc-cond); }
.bs-bars .lab { color: var(--bc-muted); }
.bs-bars .neg, .bs-bars .pos { height: 14px; position: relative; }
.bs-bars .neg { border-right: 2px solid var(--bc-line); }
.bs-bars .neg i { position: absolute; right: 0; top: 0; bottom: 0; background: var(--bc-poor); }
.bs-bars .pos i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bc-good); }
.bs-bars .val { text-align: right; font-variant-numeric: tabular-nums; }
.bs-bars li.na .lab, .bs-bars li.na .val { color: var(--bc-faint); }
.bs-bars-sum { display: flex; justify-content: space-between; border-top: 1px solid var(--bc-line); margin-top: .5rem; padding-top: .6rem; font: 600 1.05rem var(--bc-cond); color: var(--bc-muted); }
.bs-bars-sum b { color: var(--bc-white); }

/* Stat grid: label over value */
.bs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--bc-line); margin: 1rem 0 0; }
.bs-stats > div { background: var(--bc-panel-2); padding: .55rem .7rem; }
.bs-stats dt { color: var(--bc-muted); font-size: .8rem; font-weight: 500; }
.bs-stats dd { margin: 0; font: 600 1.15rem var(--bc-cond); }

/* ---------- 12. Data tables ---------- */
.bs-table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--bc-line); background: var(--bc-panel-2); }
.bs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; color: var(--bc-white); }
.bs-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bc-navy-deep); color: var(--bc-muted);
    font: 600 .95rem/1.15 var(--bc-cond); text-align: left; white-space: nowrap;
    padding: .6rem .7rem; border-bottom: 2px solid var(--bc-gold);
}
.bs-table thead th[onclick], .bs-table thead th.sortable { cursor: pointer; }
.bs-table thead th[onclick]:hover, .bs-table thead th.sortable:hover { color: var(--bc-white); }
.bs-table thead th.sorted, .bs-table thead th[aria-sort="ascending"], .bs-table thead th[aria-sort="descending"] { color: var(--bc-gold); }
.bs-table tbody td { padding: .5rem .7rem; border-bottom: 1px solid rgba(39, 73, 124, .55); white-space: nowrap; }
.bs-table tbody tr:nth-child(even) td { background: rgba(15, 37, 71, .45); }
.bs-table tbody tr:hover td, .bs-table tbody tr.hl td { background: var(--bc-rail); }
.bs-table td.num, .bs-table th.num { text-align: right; font-family: var(--bc-cond); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.bs-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--bc-panel); }
.bs-table thead .sticky-col { z-index: 3; background: var(--bc-navy-deep); }

/* ---------- 13. Messages ---------- */
.bs-msg { padding: .7rem 1rem; border-left: 4px solid var(--bc-line); background: var(--bc-panel); color: var(--bc-white); }
.bs-msg.ok { border-left-color: var(--bc-success); }
.bs-msg.warn { border-left-color: var(--bc-warning); }
.bs-msg.err { border-left-color: var(--bc-danger); }

/* ---------- 14. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .bs-bars i { animation: bs-grow .5s ease-out both; }
    .bs-bars .pos i { transform-origin: left; }
    .bs-bars .neg i { transform-origin: right; }
    @keyframes bs-grow { from { transform: scaleX(0); } }
}
@media (prefers-reduced-motion: reduce) {
    .bs-app *, .bs-app *::before, .bs-app *::after { transition: none !important; animation: none !important; }
}

/* ---------- 15. Report page kit ----------
   Class names the report pages already use (filter panel, results bar, export button, lineout field,
   stat cards, coding inputs, save toast), styled once here. Pages keep only what is specific to them. */
.filter-panel { background: var(--bc-panel); border-top: 4px solid var(--bc-gold); padding: 1rem 1.25rem 1.1rem; margin-bottom: 1rem; }
.panel-title { font: 700 1.35rem/1.1 var(--bc-cond); color: var(--bc-white); margin-bottom: .75rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 140px; }
.filter-group label { font: 600 .92rem var(--bc-cond); color: var(--bc-muted); margin: 0; }
.filter-select { width: 100%; min-height: 38px; padding: .4rem 2rem .4rem .7rem; font-size: .92rem; cursor: pointer; }

.metric-panel { background: var(--bc-panel); padding: .8rem 1.25rem; border-bottom: 3px solid var(--bc-gold); }
.metric-panel-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.metric-panel-inner .panel-title { margin-bottom: 0; font-size: 1.15rem; }

.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem .1rem .6rem; }
.results-count { font-size: .92rem; color: var(--bc-muted); }
.results-count strong { color: var(--bc-gold); font: 700 1.2rem var(--bc-cond); }
.export-btn {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 1.1rem;
    background: var(--bc-panel-2); color: var(--bc-white); border: 1px solid var(--bc-line);
    font: 700 1rem var(--bc-cond); cursor: pointer; transform: skewX(var(--bc-skew));
}
.export-btn:hover { border-color: var(--bc-gold); }
.export-btn.primary { background: var(--bc-gold); border-color: var(--bc-gold); color: var(--bc-gold-ink); }
.export-btn.primary:hover { background: #FFD45C; }
.export-btn:disabled { opacity: .55; cursor: not-allowed; }

.table-wrapper { background: var(--bc-panel-2); border: 1px solid var(--bc-line); border-top: 0; overflow: hidden; position: relative; }
.table-scroll { overflow-x: auto; }

/* Lineout tables */
.lo-tbl { width: 100%; border-collapse: collapse; font: 600 .95rem var(--bc-cond); color: var(--bc-white); }
.lo-tbl thead { position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 0 var(--bc-gold); }
.lo-tbl thead tr { background: var(--bc-navy-deep); }
.lo-tbl thead th { padding: .65rem .75rem; text-align: left; font: 600 .95rem/1.15 var(--bc-cond); color: var(--bc-muted); white-space: nowrap; cursor: pointer; user-select: none; border-right: 1px solid rgba(39, 73, 124, .6); }
.lo-tbl thead th:hover { color: var(--bc-white); }
.lo-tbl thead th.sorted-asc, .lo-tbl thead th.sorted-desc { color: var(--bc-gold); }
.lo-tbl thead th.sorted-asc::after { content: ' ▲'; color: var(--bc-gold); font-size: .65rem; }
.lo-tbl thead th.sorted-desc::after { content: ' ▼'; color: var(--bc-gold); font-size: .65rem; }
/* Columns Lindsay codes by hand */
.lo-tbl thead th.input-col { background: var(--bc-rail); color: var(--bc-gold); }
.lo-tbl tbody tr { border-bottom: 1px solid rgba(39, 73, 124, .6); }
.lo-tbl tbody tr:hover, .lo-tbl tbody tr.lo-hovered { background: var(--bc-rail); box-shadow: inset 3px 0 0 var(--bc-gold); }
.lo-tbl tbody td { padding: .55rem .75rem; vertical-align: middle; color: var(--bc-white); font: 600 .98rem var(--bc-cond); }

/* Outcome pills */
.pill { display: inline-block; padding: .1rem .55rem; font: 700 .85rem var(--bc-cond); white-space: nowrap; }
.pill-clean, .pill-steal { background: rgba(67, 211, 146, .16); color: var(--bc-good); }
.pill-scrappy, .pill-error { background: rgba(255, 181, 71, .16); color: var(--bc-warning); }
.pill-lost { background: rgba(255, 107, 107, .18); color: var(--bc-poor); }

/* Zones, from the try line outwards */
.z-exit { color: #B3BEFF; font-weight: 700; }
.z-pressure { color: #8CC4FF; font-weight: 700; }
.z-space { color: #7FD6FF; font-weight: 700; }
.z-points { color: #9DF0C2; font-weight: 700; }

/* Field and stat cards */
.lo-stat-card { background: var(--bc-panel); border-top: 3px solid var(--bc-gold); padding: .8rem 1rem; }
.lo-stat-card h4 { font: 700 1.1rem/1.1 var(--bc-cond); color: var(--bc-white); margin: 0 0 .55rem; }
.lo-stat-row { display: flex; justify-content: space-between; gap: .75rem; font: 600 .98rem var(--bc-cond); padding: 2px 0; color: var(--bc-white); }
.lo-val-good { color: var(--bc-good); font-weight: 700; }
.lo-val-bad { color: var(--bc-poor); font-weight: 700; }
.lo-bar { height: 6px; overflow: hidden; display: flex; margin-top: 6px; background: var(--bc-panel-2); }
.lo-bar-g { background: var(--bc-good); height: 100%; }
.lo-bar-r { background: var(--bc-poor); flex: 1; height: 100%; }

/* The pitch SVG is a fixed 720 x 310 drawing; on narrow screens it scrolls inside its own box instead of widening the page */
.lo-main { min-width: 0; }
.lo-main > div:has(> #lo-field-svg) { max-width: 100%; overflow-x: auto; }
.lo-legend { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; padding: .5rem 0; margin-bottom: 8px; font-size: .9rem; color: var(--bc-muted); }
.lo-leg { display: flex; align-items: center; gap: 6px; }
.lo-leg-line { width: 18px; height: 4px; }

/* Coding inputs inside the table */
.lo-input { background: var(--bc-panel); border: 1px solid var(--bc-line); border-radius: var(--bc-radius); color: var(--bc-white); font: 500 .9rem var(--bc-body); padding: 5px 8px; width: 100%; min-width: 95px; min-height: 32px; outline: none; }
.lo-input:focus { border-color: var(--bc-gold); background: var(--bc-panel-2); }
.lo-input::placeholder { color: var(--bc-faint); font-style: italic; }
.bs-app select.lo-sel { appearance: none; cursor: pointer; padding-right: 22px; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }
.save-indicator { font: 700 .85rem var(--bc-cond); color: var(--bc-good); min-width: 16px; display: inline-block; text-align: center; transition: opacity .3s; }
.save-indicator.err { color: var(--bc-poor); }

.lo-empty { text-align: center; padding: 40px 20px; color: var(--bc-muted); font-size: 1rem; }
.lo-flash { background: rgba(255, 194, 26, .3) !important; box-shadow: inset 4px 0 0 var(--bc-gold) !important; transition: background 1s ease-out; }

/* Save toast */
#save-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: var(--bc-good); color: var(--bc-good-ink); padding: 10px 18px; font: 700 1rem var(--bc-cond); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); display: none; align-items: center; gap: 8px; animation: bs-toast .2s ease; }
#save-toast.err { background: var(--bc-poor); color: var(--bc-poor-ink); }
#save-toast.saving { background: var(--bc-rail); color: var(--bc-white); }
@keyframes bs-toast { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 560px) {
    .filter-panel { padding: .9rem .9rem 1rem; }
    .filter-group { min-width: calc(50% - .4rem); }
    .metric-panel { padding: .7rem .9rem; }
    #save-toast { left: 12px; right: 12px; bottom: 12px; }
}