/*
 * rm-theme.css: the shared look of the site restyle (stage 0, 13-10-2026).
 *
 * The look is Proform's own, as Race Guides, Bet Finder and Fast Results already wear it:
 * Manrope, the Proform teal #06414F / #537c86 / #04323d, maroon actions #7a0704, green
 * #2db674, gold #fcc319 for the top figure, white cards with a soft double shadow, zebra
 * tables, chips that fill when chosen. Dark = the deepest teal page, teal surfaces, white
 * text, gold only for top figures, the lighter red #ff8a80 wherever maroon would sit on teal.
 * Source: the approved mockups (tasks/restyle/mock: rg-style.css, rg-dark.css, BRIEF*.md,
 * CHARTS.md) and the plan, tasks/restyle/plan.md.
 *
 * ── OPT-IN, OR NOTHING ───────────────────────────────────────────────────────
 * EVERY rule in this file sits under html[data-restyle]. A page that has not opted in is
 * untouched even if it loads this file, and a page rolls back by deleting one attribute.
 *
 * ── THREE RULES (scripts/test-rm-theme.mjs enforces them) ────────────────────
 * 1. Colours live in the TWO token blocks below and nowhere else: every component rule reads
 *    var(--rm-...). Light and dark declare exactly the same token names, so a token can
 *    never be missing in one theme. Dark values are plain literals (no color-mix, no var),
 *    so Chart.js can read them through RmTheme.chartColors().
 * 2. Every class is rmx- prefixed. rm- is taken (.rm-table, .rm-gold, .rm-num, .rm-link
 *    on the racecard), and no class or modifier is ever named after a Tailwind utility:
 *    `.dx-tok.fixed` meant "a fixed column" and Tailwind's `.fixed{position:fixed}` threw
 *    every token out of flow (CLAUDE.md, the INVERSE trap). State is .rmx-on or an ARIA
 *    attribute (aria-pressed, aria-selected, aria-checked), never a bare word.
 * 3. Nothing here styles a bare element beyond html/body: components are opted into by
 *    class, so a restyled page's Tailwind markup keeps its own look until it is converted.
 *
 * Theme state: data-theme="dark" on <html>, set before first paint by the head snippet
 * (src/rm-theme-head.js) and flipped by window.RmTheme (src/rm-theme.js).
 */

/* =====================================================================
 * TOKENS: LIGHT
 * ===================================================================== */
html[data-restyle] {
    color-scheme: light;

    /* the Proform palette */
    --rm-primary: #06414F;
    --rm-primary-75: #537c86;
    --rm-primary-dark: #04323d;
    --rm-secondary: #7a0704;
    --rm-tertiary: #2db674;
    --rm-gold: #fcc319;
    --rm-on-gold: #06414F;
    --rm-silver: #808080;
    --rm-bronze: #CD7F32;
    --rm-white: #ffffff;

    /* surfaces */
    --rm-page: #fafaf9;
    --rm-surface: #ffffff;
    --rm-zebra: #f5f5f4;
    --rm-hover: #d5dee0;
    --rm-note-bg: #fafaf9;
    --rm-field: #ffffff;
    /* the recessed panel an opened row drops into (the form lines), and its edge */
    --rm-recess: #fafaf9;
    --rm-recess-edge: #06414F;

    /* text */
    --rm-text: #06414F;
    --rm-text-dim: #52525b;
    --rm-text-faint: #a1a1aa;
    --rm-placeholder: #a1a1aa;
    --rm-action: #7a0704;
    --rm-pos: #16a34a;
    --rm-neg: #ef4444;

    /* lines */
    --rm-line: #e4e4e7;
    --rm-th-rule: #e4e4e7;
    --rm-rule: #d4d4d8;
    --rm-rule-strong: #a1a1aa;

    /* depth */
    --rm-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.05);
    --rm-pop-shadow: 0 16px 44px -10px rgba(6, 65, 79, 0.35);
    --rm-band-edge: 0 0 0 1px transparent;

    /* the teal band (header, date strip, race picker) */
    --rm-band: #06414F;
    --rm-on-band: #ffffff;
    --rm-on-band-line: rgba(255, 255, 255, 0.6);
    --rm-on-band-hover: rgba(255, 255, 255, 0.2);
    --rm-on-band-dim: rgba(255, 255, 255, 0.72);
    --rm-on-band-rule: rgba(255, 255, 255, 0.15);
    --rm-scrim: rgba(4, 50, 61, 0.55);

    /* tier badges in the menus (Basic, Enterprise, Proform Premium, Free, Admin, Coming soon) */
    --rm-bdg-basic-bg: #d5dee0;
    --rm-bdg-basic-text: #06414F;
    --rm-bdg-ent-bg: #fcc319;
    --rm-bdg-ent-text: #06414F;
    --rm-bdg-prem-bg: #06414F;
    --rm-bdg-prem-text: #fcc319;
    --rm-bdg-prem-line: #06414F;
    --rm-bdg-free-bg: #dcfce7;
    --rm-bdg-free-text: #166534;
    --rm-bdg-adm-bg: #fee2e2;
    --rm-bdg-adm-text: #991b1b;
    --rm-bdg-soon-bg: #f5f5f4;
    --rm-bdg-soon-text: #52525b;
    --rm-bdg-soon-line: #e4e4e7;

    /* controls */
    --rm-sel-bg: #06414F;
    --rm-sel-text: #ffffff;
    --rm-ctl-line: #d4d4d8;
    --rm-ctl-hover: #f5f5f4;
    --rm-btn-bg: #ffffff;
    --rm-btn-primary-bg: #7a0704;
    --rm-btn-primary-hover: #5e0503;
    --rm-btn-primary-text: #ffffff;
    --rm-focus: #2db674;
    --rm-check: #06414F;
    --rm-switch-off: #d4d4d8;
    --rm-switch-on: #2db674;
    --rm-switch-knob: #ffffff;
    --rm-tab-line: #06414F;
    --rm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2306414F' stroke-width='1.5'/%3E%3C/svg%3E");

    /* the top figure in a column, and the Race Guides cell tints */
    --rm-top-bg: #fcc319;
    --rm-top-text: #06414F;
    --rm-tint-strong: #22c55e;
    --rm-tint-good: #bbf7d0;
    --rm-tint-weak: #ffedd5;
    --rm-tint-poor: #fecaca;
    --rm-tint-text: #06414F;

    /* pills: neutral, gold, ok, warn, teal; medals as the racecard's fast-result pills */
    --rm-pill-line: #d4d4d8;
    --rm-pill-teal-bg: #06414F;
    --rm-pill-teal-line: #06414F;
    --rm-pill-warn-bg: #7a0704;
    --rm-medal-1-bg: #fbbf24;
    --rm-medal-1-text: #78350f;
    --rm-medal-2-bg: #d1d5db;
    --rm-medal-2-text: #374151;
    --rm-medal-3-bg: #fdba74;
    --rm-medal-3-text: #9a3412;
    --rm-medal-4-bg: #e7e5e4;
    --rm-medal-4-text: #57534e;

    /* banners */
    --rm-info-bg: #d5dee0;
    --rm-info-line: #b9c9cd;
    --rm-warn-bg: #fde8e8;
    --rm-warn-line: #f5c2c2;
    --rm-warn-text: #7a0704;

    /* charts (CHARTS.md order: teal, gold, green, maroon, light teal, bronze, the rest) */
    --rm-chart-1: #06414F;
    --rm-chart-2: #fcc319;
    --rm-chart-3: #2db674;
    --rm-chart-4: #7a0704;
    --rm-chart-5: #537c86;
    --rm-chart-6: #CD7F32;
    --rm-chart-7: #a1a1aa;
    /* stage 4: more series for a whole field (the sectionals' one line per horse) */
    --rm-chart-8: #0e7490;
    --rm-chart-9: #a16207;
    --rm-chart-10: #6d28d9;
    --rm-chart-11: #be185d;
    --rm-chart-12: #4d7c0f;
    --rm-chart-13: #1d4ed8;
    --rm-chart-14: #78716c;
    --rm-chart-15: #9a3412;
    --rm-chart-area: rgba(6, 65, 79, 0.1);
    --rm-chart-grid: #e4e4e7;
    --rm-chart-baseline: #a1a1aa;
    --rm-chart-axis: #537c86;
    --rm-chart-text: #06414F;
    --rm-chart-up: #2db674;
    --rm-chart-down: #7a0704;
    --rm-chart-win: #00af50;
    --rm-chart-place: #c0c0c0;
    --rm-chart-unplaced: #963634;
    --rm-chart-tooltip-bg: #ffffff;
    --rm-chart-tooltip-text: #06414F;
    --rm-chart-tooltip-line: #e4e4e7;
}

/* =====================================================================
 * TOKENS: DARK (the same names; plain literals only). Screen only, so a page
 * printed while dark still prints light (plan: print views stay light).
 * ===================================================================== */
@media screen {
html[data-restyle][data-theme="dark"] {
    color-scheme: dark;

    --rm-primary: #06414F;
    --rm-primary-75: #8fb4bd;
    --rm-primary-dark: #04323d;
    --rm-secondary: #7a0704;
    --rm-tertiary: #2db674;
    --rm-gold: #fcc319;
    --rm-on-gold: #06414F;
    --rm-silver: #808080;
    --rm-bronze: #CD7F32;
    --rm-white: #ffffff;

    --rm-page: #04323d;
    --rm-surface: #06414F;
    --rm-zebra: #1f5461;
    --rm-hover: #4c7680;
    --rm-note-bg: rgba(0, 0, 0, 0.18);
    --rm-field: #03232b;
    --rm-recess: #03232b;
    --rm-recess-edge: rgba(255, 255, 255, 0.4);

    --rm-text: #ffffff;
    --rm-text-dim: rgba(255, 255, 255, 0.72);
    --rm-text-faint: rgba(255, 255, 255, 0.45);
    --rm-placeholder: rgba(255, 255, 255, 0.45);
    --rm-action: #ff8a80;
    --rm-pos: #6ccc9e;
    --rm-neg: #ff8a80;

    --rm-line: rgba(255, 255, 255, 0.16);
    --rm-th-rule: rgba(255, 255, 255, 0.4);
    --rm-rule: rgba(255, 255, 255, 0.4);
    --rm-rule-strong: rgba(255, 255, 255, 0.4);

    --rm-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    --rm-pop-shadow: 0 16px 44px -10px rgba(0, 0, 0, 0.6);
    --rm-band-edge: 0 0 0 1px rgba(255, 255, 255, 0.16);

    --rm-band: #06414F;
    --rm-on-band: #ffffff;
    --rm-on-band-line: rgba(255, 255, 255, 0.6);
    --rm-on-band-hover: rgba(255, 255, 255, 0.14);
    --rm-on-band-dim: rgba(255, 255, 255, 0.72);
    --rm-on-band-rule: rgba(255, 255, 255, 0.15);
    --rm-scrim: rgba(0, 0, 0, 0.6);

    --rm-bdg-basic-bg: rgba(255, 255, 255, 0.18);
    --rm-bdg-basic-text: #ffffff;
    --rm-bdg-ent-bg: #fcc319;
    --rm-bdg-ent-text: #06414F;
    --rm-bdg-prem-bg: #04323d;
    --rm-bdg-prem-text: #fcc319;
    --rm-bdg-prem-line: #fcc319;
    --rm-bdg-free-bg: rgba(45, 182, 116, 0.2);
    --rm-bdg-free-text: #6ccc9e;
    --rm-bdg-adm-bg: rgba(255, 138, 128, 0.18);
    --rm-bdg-adm-text: #ff8a80;
    --rm-bdg-soon-bg: transparent;
    --rm-bdg-soon-text: rgba(255, 255, 255, 0.72);
    --rm-bdg-soon-line: rgba(255, 255, 255, 0.4);

    --rm-sel-bg: #ffffff;
    --rm-sel-text: #06414F;
    --rm-ctl-line: rgba(255, 255, 255, 0.55);
    --rm-ctl-hover: rgba(255, 255, 255, 0.14);
    --rm-btn-bg: transparent;
    --rm-btn-primary-bg: #ff8a80;
    --rm-btn-primary-hover: #ffa59d;
    --rm-btn-primary-text: #04323d;
    --rm-focus: #fcc319;
    --rm-check: #fcc319;
    --rm-switch-off: rgba(255, 255, 255, 0.3);
    --rm-switch-on: #2db674;
    --rm-switch-knob: #ffffff;
    --rm-tab-line: #ffffff;
    --rm-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");

    --rm-top-bg: #fcc319;
    --rm-top-text: #06414F;
    --rm-tint-strong: #17935e;
    --rm-tint-good: #156e5d;
    --rm-tint-weak: #5a5b43;
    --rm-tint-poor: #63424b;
    --rm-tint-text: #ffffff;

    --rm-pill-line: rgba(255, 255, 255, 0.45);
    --rm-pill-teal-bg: #04323d;
    --rm-pill-teal-line: #ffffff;
    --rm-pill-warn-bg: #7a0704;
    --rm-medal-1-bg: #fbbf24;
    --rm-medal-1-text: #78350f;
    --rm-medal-2-bg: #d1d5db;
    --rm-medal-2-text: #374151;
    --rm-medal-3-bg: #fdba74;
    --rm-medal-3-text: #9a3412;
    --rm-medal-4-bg: #e7e5e4;
    --rm-medal-4-text: #57534e;

    --rm-info-bg: rgba(255, 255, 255, 0.1);
    --rm-info-line: rgba(255, 255, 255, 0.16);
    --rm-warn-bg: rgba(255, 138, 128, 0.14);
    --rm-warn-line: rgba(255, 138, 128, 0.4);
    --rm-warn-text: #ff8a80;

    --rm-chart-1: #ffffff;
    --rm-chart-2: #fcc319;
    --rm-chart-3: #2db674;
    --rm-chart-4: #ff8a80;
    --rm-chart-5: #8fb4bd;
    --rm-chart-6: #CD7F32;
    --rm-chart-7: rgba(255, 255, 255, 0.45);
    --rm-chart-8: #67e8f9;
    --rm-chart-9: #fdba74;
    --rm-chart-10: #c4b5fd;
    --rm-chart-11: #f9a8d4;
    --rm-chart-12: #bef264;
    --rm-chart-13: #93c5fd;
    --rm-chart-14: #d6d3d1;
    --rm-chart-15: #5eead4;
    --rm-chart-area: rgba(255, 255, 255, 0.1);
    --rm-chart-grid: rgba(255, 255, 255, 0.16);
    --rm-chart-baseline: rgba(255, 255, 255, 0.45);
    --rm-chart-axis: #8fb4bd;
    --rm-chart-text: #ffffff;
    --rm-chart-up: #2db674;
    --rm-chart-down: #ff8a80;
    --rm-chart-win: #00af50;
    --rm-chart-place: #c0c0c0;
    --rm-chart-unplaced: #c0504d;
    --rm-chart-tooltip-bg: #03232b;
    --rm-chart-tooltip-text: #ffffff;
    --rm-chart-tooltip-line: rgba(255, 255, 255, 0.16);
}
}

/* =====================================================================
 * COMPONENTS (colours only through the tokens above)
 * ===================================================================== */

/* ---- page ---- */
html[data-restyle] body {
    background: var(--rm-page);
    color: var(--rm-text);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* the hidden attribute always wins: a shared class that sets display (tiles, filter bar, card) must never show an element a page has hidden */
html[data-restyle] [hidden] { display: none !important; }
html[data-restyle] .rmx-page { max-width: 1680px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
html[data-restyle] .rmx-muted { color: var(--rm-text-dim); }
html[data-restyle] .rmx-faint { color: var(--rm-text-faint); }
html[data-restyle] .rmx-pos { color: var(--rm-pos); }
html[data-restyle] .rmx-neg { color: var(--rm-neg); }
html[data-restyle] .rmx-label { display: block; font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rm-text-dim); }
html[data-restyle] .rmx-link { color: var(--rm-action); font-weight: 600; text-decoration: none; cursor: pointer; }
html[data-restyle] .rmx-link:hover { text-decoration: underline; }
html[data-restyle] .rmx-action { color: var(--rm-action); text-transform: uppercase; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
html[data-restyle] .rmx-action:hover { text-decoration: underline; }
html[data-restyle] .rmx-action[aria-disabled="true"] { color: var(--rm-text-faint); cursor: not-allowed; text-decoration: none; }
html[data-restyle] :is(.rmx-btn, .rmx-chip, .rmx-seg button, .rmx-tabs button, .rmx-switch, .rmx-theme-btn, .rmx-action, .rmx-link, .rmx-input, .rmx-select):focus-visible {
    outline: 2px solid var(--rm-focus);
    outline-offset: 2px;
}

/* ---- the teal band (headers, date strips, race pickers): chips and the toggle invert on it ---- */
html[data-restyle] .rmx-band { background: var(--rm-band); color: var(--rm-on-band); border-radius: 8px; padding: 16px; box-shadow: inset var(--rm-band-edge); }
html[data-restyle] .rmx-band-title { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; }

/* ---- cards ---- */
html[data-restyle] .rmx-card { background: var(--rm-surface); color: var(--rm-text); border-radius: 8px; box-shadow: var(--rm-shadow); margin-top: 8px; }
html[data-restyle] .rmx-card.rmx-card-flat { box-shadow: none; border: 1px solid var(--rm-line); }
html[data-restyle] .rmx-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--rm-line); font-weight: 700; }
html[data-restyle] .rmx-card-head h2, html[data-restyle] .rmx-card-head h3 { font-size: 16px; line-height: 22px; font-weight: 700; margin: 0; flex-grow: 1; }
html[data-restyle] .rmx-card-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
html[data-restyle] .rmx-card-body { padding: 20px; }
html[data-restyle] .rmx-note { font-size: 12px; line-height: 16px; color: var(--rm-text-dim); background: var(--rm-note-bg); padding: 8px 20px; border-bottom: 1px solid var(--rm-line); }
html[data-restyle] .rmx-note b { color: var(--rm-text); }
html[data-restyle] .rmx-empty { padding: 20px; font-size: 13px; text-align: center; color: var(--rm-text-dim); }

/* ---- stat tiles ---- */
html[data-restyle] .rmx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
html[data-restyle] .rmx-tile { background: var(--rm-surface); border-radius: 8px; box-shadow: var(--rm-shadow); padding: 14px 16px; }
html[data-restyle] .rmx-tile-label { font-size: 11px; line-height: 14px; text-transform: uppercase; font-weight: 600; color: var(--rm-text-dim); white-space: nowrap; }
html[data-restyle] .rmx-tile-value { font-size: 24px; line-height: 28px; font-weight: 700; margin-top: 4px; }
html[data-restyle] .rmx-tile-sub { font-size: 11px; line-height: 14px; color: var(--rm-text-dim); margin-top: 2px; }

/* ---- tables: zebra rows, the header pinned on request, figures right-aligned ---- */
html[data-restyle] .rmx-scroll { overflow-x: auto; }
html[data-restyle] table.rmx-t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--rm-surface); color: var(--rm-text); }
html[data-restyle] table.rmx-t thead th { background: var(--rm-surface); text-align: left; padding: 10px 8px; font-size: 14px; line-height: 18px; font-weight: 700; border-top: 2px solid var(--rm-th-rule); border-bottom: 2px solid var(--rm-th-rule); white-space: nowrap; }
html[data-restyle] table.rmx-t.rmx-t-first thead th { border-top: 0; }
html[data-restyle] table.rmx-t thead th small { display: block; font-size: 9px; font-weight: 500; line-height: 12px; }
html[data-restyle] table.rmx-t thead th[aria-sort] { cursor: pointer; }
html[data-restyle] table.rmx-t thead th[aria-sort="descending"]::after { content: " \25BE"; font-size: 10px; }
html[data-restyle] table.rmx-t thead th[aria-sort="ascending"]::after { content: " \25B4"; font-size: 10px; }
html[data-restyle] table.rmx-t.rmx-pinhead thead th { position: sticky; top: 0; z-index: 3; }
html[data-restyle] table.rmx-t tbody td { padding: 6px 12px; font-size: 14px; line-height: 18px; white-space: nowrap; }
html[data-restyle] table.rmx-t tbody tr:nth-child(odd) td { background: var(--rm-surface); }
html[data-restyle] table.rmx-t tbody tr:nth-child(even) td { background: var(--rm-zebra); }
html[data-restyle] table.rmx-t tbody tr.rmx-hl td { background: var(--rm-hover); }
html[data-restyle] table.rmx-t tbody tr.rmx-clickrow { cursor: pointer; }
html[data-restyle] table.rmx-t tbody tr.rmx-clickrow:hover td { background: var(--rm-hover); }
html[data-restyle] table.rmx-t tbody tr.rmx-nr td { color: var(--rm-text-faint); text-decoration: line-through; }
html[data-restyle] table.rmx-t :is(td, th).rmx-num { text-align: right; font-variant-numeric: tabular-nums; }
html[data-restyle] table.rmx-t :is(td, th).rmx-mid { text-align: center; }
html[data-restyle] table.rmx-t td.rmx-wrap { white-space: normal; min-width: 180px; }
html[data-restyle] table.rmx-t .rmx-gs { border-left: 1px solid var(--rm-rule-strong); }
html[data-restyle] table.rmx-t.rmx-dense tbody td { padding: 3px 8px; }
html[data-restyle] table.rmx-t.rmx-dense thead th { padding: 6px 8px; }
html[data-restyle] table.rmx-t tfoot td { padding: 8px 12px; font-size: 12px; color: var(--rm-text-dim); border-top: 2px solid var(--rm-line); }
html[data-restyle] table.rmx-t .rmx-name { font-weight: 700; }
html[data-restyle] table.rmx-t .rmx-sub { display: block; font-size: 11px; line-height: 13px; font-weight: 400; color: var(--rm-text-dim); }

/* ---- the top figure in a column, and the cell tints ---- */
html[data-restyle] .rmx-top { background: var(--rm-top-bg) !important; color: var(--rm-top-text); font-weight: 700; }
html[data-restyle] .rmx-tint-strong { background: var(--rm-tint-strong) !important; color: var(--rm-tint-text); }
html[data-restyle] .rmx-tint-good { background: var(--rm-tint-good) !important; color: var(--rm-tint-text); }
html[data-restyle] .rmx-tint-weak { background: var(--rm-tint-weak) !important; color: var(--rm-tint-text); }
html[data-restyle] .rmx-tint-poor { background: var(--rm-tint-poor) !important; color: var(--rm-tint-text); }

/* ---- filter bar: a white card of labelled controls ---- */
html[data-restyle] .rmx-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; background: var(--rm-surface); border-radius: 8px; box-shadow: var(--rm-shadow); padding: 14px 20px; margin-top: 8px; }
html[data-restyle] .rmx-fgroup { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-restyle] .rmx-fgroup-end { margin-left: auto; flex-direction: row; align-items: center; gap: 12px; }

/* ---- chips: outline, filled when chosen; inverted on the teal band ---- */
html[data-restyle] .rmx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-restyle] .rmx-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rm-ctl-line); border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 13px; line-height: 16px; color: var(--rm-text); background: var(--rm-btn-bg); cursor: pointer; white-space: nowrap; text-decoration: none; }
html[data-restyle] .rmx-chip:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmx-chip:is(.rmx-on, [aria-pressed="true"], [aria-selected="true"]) { background: var(--rm-sel-bg); color: var(--rm-sel-text); border-color: var(--rm-sel-bg); font-weight: 700; }
html[data-restyle] .rmx-chip:is([disabled], [aria-disabled="true"]) { opacity: 0.4; cursor: not-allowed; }
html[data-restyle] .rmx-chip .rmx-chip-x { color: var(--rm-action); font-size: 15px; line-height: 1; }
html[data-restyle] .rmx-band .rmx-chip { color: var(--rm-on-band); border-color: var(--rm-on-band); background: transparent; }
html[data-restyle] .rmx-band .rmx-chip:hover { background: var(--rm-on-band-hover); }
html[data-restyle] .rmx-band .rmx-chip:is(.rmx-on, [aria-pressed="true"], [aria-selected="true"]) { background: var(--rm-on-band); color: var(--rm-primary); border-color: var(--rm-on-band); }

/* ---- pills (small labels) and the 1st / 2nd / 3rd medals ---- */
html[data-restyle] .rmx-pill { display: inline-block; border: 1px solid var(--rm-pill-line); border-radius: 10px; padding: 1px 8px; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; color: var(--rm-text); }
html[data-restyle] .rmx-pill.rmx-pill-gold { background: var(--rm-gold); border-color: var(--rm-gold); color: var(--rm-on-gold); }
html[data-restyle] .rmx-pill.rmx-pill-ok { background: var(--rm-tertiary); border-color: var(--rm-tertiary); color: var(--rm-white); }
html[data-restyle] .rmx-pill.rmx-pill-warn { background: var(--rm-pill-warn-bg); border-color: var(--rm-pill-warn-bg); color: var(--rm-white); }
html[data-restyle] .rmx-pill.rmx-pill-teal { background: var(--rm-pill-teal-bg); border-color: var(--rm-pill-teal-line); color: var(--rm-white); }
html[data-restyle] .rmx-medal { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; line-height: 1.25; vertical-align: middle; white-space: nowrap; background: var(--rm-medal-4-bg); color: var(--rm-medal-4-text); }
html[data-restyle] .rmx-medal.rmx-m1 { background: var(--rm-medal-1-bg); color: var(--rm-medal-1-text); }
html[data-restyle] .rmx-medal.rmx-m2 { background: var(--rm-medal-2-bg); color: var(--rm-medal-2-text); }
html[data-restyle] .rmx-medal.rmx-m3 { background: var(--rm-medal-3-bg); color: var(--rm-medal-3-text); }
html[data-restyle] .rmx-medal.rmx-medal-fast { box-shadow: inset 0 0 0 1px currentColor; opacity: 0.9; }
html[data-restyle] .rmx-medal.rmx-medal-fast::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; }

/* ---- buttons: secondary (outline), primary (maroon), gold (upgrade) ---- */
html[data-restyle] .rmx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--rm-ctl-line); border-radius: 6px; padding: 8px 20px; font: inherit; font-size: 14px; line-height: 16px; font-weight: 600; background: var(--rm-btn-bg); color: var(--rm-text); white-space: nowrap; cursor: pointer; text-decoration: none; }
html[data-restyle] .rmx-btn:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmx-btn.rmx-btn-primary { background: var(--rm-btn-primary-bg); border-color: var(--rm-btn-primary-bg); color: var(--rm-btn-primary-text); }
html[data-restyle] .rmx-btn.rmx-btn-primary:hover { background: var(--rm-btn-primary-hover); border-color: var(--rm-btn-primary-hover); }
html[data-restyle] .rmx-btn.rmx-btn-gold { background: var(--rm-gold); border-color: var(--rm-gold); color: var(--rm-on-gold); font-weight: 700; }
html[data-restyle] .rmx-btn.rmx-btn-sm { padding: 5px 12px; font-size: 12px; }
html[data-restyle] .rmx-btn:is([disabled], [aria-disabled="true"]) { opacity: 0.4; cursor: not-allowed; }

/* ---- segmented buttons (filter tabs): one chosen ---- */
html[data-restyle] .rmx-seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
html[data-restyle] .rmx-seg button { font: inherit; font-size: 13px; line-height: 16px; border: 1px solid var(--rm-ctl-line); border-radius: 6px; padding: 7px 16px; background: var(--rm-btn-bg); color: var(--rm-text); cursor: pointer; }
html[data-restyle] .rmx-seg button:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmx-seg button:is(.rmx-on, [aria-pressed="true"], [aria-selected="true"]) { background: var(--rm-sel-bg); color: var(--rm-sel-text); border-color: var(--rm-sel-bg); font-weight: 700; }

/* ---- underline tabs ---- */
html[data-restyle] .rmx-tabs { display: flex; gap: 24px; margin: 0; padding: 8px 20px 0; border-bottom: 1px solid var(--rm-line); overflow-x: auto; scrollbar-width: none; }
html[data-restyle] .rmx-tabs button { font: inherit; font-size: 13px; padding: 6px 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--rm-text-dim); white-space: nowrap; cursor: pointer; }
html[data-restyle] .rmx-tabs button:hover { color: var(--rm-text); }
html[data-restyle] .rmx-tabs button:is(.rmx-on, [aria-selected="true"]) { border-bottom-color: var(--rm-tab-line); color: var(--rm-text); font-weight: 700; }

/* ---- form controls ---- */
html[data-restyle] .rmx-input, html[data-restyle] .rmx-select { font: inherit; font-size: 13px; line-height: 18px; color: var(--rm-text); background-color: var(--rm-field); border: 1px solid var(--rm-ctl-line); border-radius: 4px; padding: 6px 8px; }
html[data-restyle] .rmx-select { padding-right: 28px; background-image: var(--rm-select-arrow); background-repeat: no-repeat; background-position: right 8px center; -webkit-appearance: none; appearance: none; }
html[data-restyle] .rmx-input::placeholder { color: var(--rm-placeholder); }
html[data-restyle] .rmx-input:focus, html[data-restyle] .rmx-select:focus { border-color: var(--rm-primary-75); }
html[data-restyle] .rmx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
html[data-restyle] .rmx-check input { accent-color: var(--rm-check); }

/* the on / off switch: <button class="rmx-switch" aria-pressed="false"><i></i>Label</button> */
html[data-restyle] .rmx-switch { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--rm-text); background: none; border: 0; padding: 0; cursor: pointer; }
html[data-restyle] .rmx-switch i { width: 30px; height: 16px; border-radius: 8px; background: var(--rm-switch-off); position: relative; display: inline-block; flex: none; transition: background 0.15s; }
html[data-restyle] .rmx-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rm-switch-knob); transition: left 0.15s; }
html[data-restyle] .rmx-switch:is(.rmx-on, [aria-pressed="true"], [aria-checked="true"]) i { background: var(--rm-switch-on); }
html[data-restyle] .rmx-switch:is(.rmx-on, [aria-pressed="true"], [aria-checked="true"]) i::after { left: 16px; }

/* ---- banners ---- */
html[data-restyle] .rmx-banner { font-size: 12px; line-height: 16px; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; color: var(--rm-text); background: var(--rm-info-bg); border: 1px solid var(--rm-info-line); }
html[data-restyle] .rmx-banner.rmx-banner-warn { color: var(--rm-warn-text); background: var(--rm-warn-bg); border-color: var(--rm-warn-line); }

/* ---- the sun / moon switch (RmTheme.mountToggle): moon in light (go dark), sun in dark ---- */
html[data-restyle] .rmx-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rm-ctl-line); border-radius: 6px; background: transparent; color: var(--rm-text); cursor: pointer; }
html[data-restyle] .rmx-theme-btn:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmx-band .rmx-theme-btn { border-color: var(--rm-on-band-line); color: var(--rm-on-band); }
html[data-restyle] .rmx-band .rmx-theme-btn:hover { background: var(--rm-on-band-hover); }
html[data-restyle] .rmx-theme-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html[data-restyle] .rmx-theme-btn .rmx-sun { display: none; }
html[data-restyle][data-theme="dark"] .rmx-theme-btn .rmx-sun { display: inline-block; }
html[data-restyle][data-theme="dark"] .rmx-theme-btn .rmx-moon { display: none; }

/* ---- phones and tablets ---- */
@media (max-width: 1023px) {
    html[data-restyle] .rmx-page { padding: 8px; }
    html[data-restyle] .rmx-card-head { padding: 10px 12px; }
    html[data-restyle] .rmx-card-body { padding: 12px; }
    html[data-restyle] .rmx-note { padding: 8px 12px; }
    html[data-restyle] .rmx-filterbar { padding: 12px; gap: 10px 12px; }
    html[data-restyle] .rmx-fgroup-end { margin-left: 0; }
    html[data-restyle] .rmx-tabs { padding: 8px 12px 0; gap: 18px; }
    html[data-restyle] table.rmx-t thead th, html[data-restyle] table.rmx-t tbody td { font-size: 11px; line-height: 15px; }
    html[data-restyle] table.rmx-t tbody td { padding: 5px 8px; }
}
@media (max-width: 639px) {
    html[data-restyle] table.rmx-t thead th, html[data-restyle] table.rmx-t tbody td { font-size: 10px; line-height: 13px; }
    html[data-restyle] .rmx-tile-value { font-size: 20px; line-height: 24px; }
}


/* =====================================================================
 * STAGE 1: THE SITE CHROME (13-10-2026)
 * The header shared-nav.js builds into <header id="rmx-header"> on an opted-in page, and
 * the restyle of what shared-nav, auth-check and the notification bell already draw: the
 * hub bar, the mega menu, the phone bar, the menu sheet, the Ctrl K palette, the bell's
 * dropdown and the toasts. Their own class names (rmnav-, notification-) are kept, so the
 * scripts behave exactly as before; every selector below beats the one it restyles, and
 * the old look stays on every page that has not opted in.
 * ===================================================================== */

/* ---- the header ---- */
html[data-restyle] .rmx-hdr { display: block; background: var(--rm-band); color: var(--rm-on-band); }
html[data-restyle] .rmx-hdr-inner { max-width: 1680px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; }
html[data-restyle] .rmx-brand { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--rm-on-band); text-decoration: none; }
html[data-restyle] .rmx-brand-logo { display: block; height: 30px; width: auto; background: var(--rm-white); border-radius: 4px; padding: 3px 6px; box-sizing: border-box; }
html[data-restyle] .rmx-brand-vr { width: 1px; height: 32px; background: var(--rm-on-band-line); flex: none; }
html[data-restyle] .rmx-brand-name { display: block; font-size: 20px; line-height: 22px; font-weight: 700; margin: 0; }
html[data-restyle] .rmx-brand-tag { display: block; font-size: 11px; line-height: 14px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.5px; color: var(--rm-on-band-dim); margin: 0; }
html[data-restyle] .rmx-hdr-theme { display: contents; }
html[data-restyle] .rmx-hdr-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
html[data-restyle] .rmx-hdr #auth-header { display: flex; align-items: center; gap: 8px; }
html[data-restyle] .rmx-htool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rm-on-band-line); border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--rm-on-band); background: transparent; white-space: nowrap; text-decoration: none; cursor: pointer; }
html[data-restyle] .rmx-htool:hover { background: var(--rm-on-band-hover); text-decoration: none; }
html[data-restyle] .rmx-htool.rmx-icon-only { padding: 7px 8px; }
html[data-restyle] .rmx-ico { width: 16px; height: 16px; flex: none; }
html[data-restyle] .rmx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -3px 0; border-radius: 50%; background: var(--rm-gold); color: var(--rm-on-gold); font-size: 10px; font-weight: 700; letter-spacing: 0; }
html[data-restyle] .rmx-hdr .rmx-theme-btn { width: auto; height: auto; padding: 7px 8px; border-color: var(--rm-on-band-line); color: var(--rm-on-band); }
html[data-restyle] .rmx-hdr .rmx-theme-btn:hover { background: var(--rm-on-band-hover); }
html[data-restyle] :is(.rmx-htool, .rmx-brand, .rmnav-hub, .rmnav-search, .rmnav-row, .rmnav-bi, .notification-bell-btn):focus-visible { outline: 2px solid var(--rm-focus); outline-offset: 2px; }

/* the bell (notification-bell.js), as a header tool; its count in gold */
html[data-restyle] .rmx-hdr .notification-bell-btn { background: transparent; border: 1px solid var(--rm-on-band-line); border-radius: 6px; color: var(--rm-on-band); padding: 7px 8px; }
html[data-restyle] .rmx-hdr .notification-bell-btn:hover { background: var(--rm-on-band-hover); }
html[data-restyle] .rmx-hdr .notification-bell-btn svg { width: 16px; height: 16px; }
html[data-restyle] .rmx-hdr .notification-badge { background: var(--rm-gold); color: var(--rm-on-gold); }

/* ---- the hub bar (shared-nav.js): white-bordered chips, the page's hub filled white ---- */
html[data-restyle] .rmnav-bar { background: var(--rm-band); border-top: 1px solid var(--rm-on-band-rule); border-bottom: 0; }
html[data-restyle] .rmnav-bar-inner { max-width: 1680px; padding: 8px 20px; gap: 8px; }
html[data-restyle] .rmnav-hubs { gap: 12px; }
html[data-restyle] .rmnav-hub { font: 500 13px/16px 'Manrope', sans-serif; text-transform: uppercase; color: var(--rm-on-band); background: transparent; border: 1px solid var(--rm-on-band); border-radius: 8px; padding: 8px 20px; }
html[data-restyle] .rmnav-hub:hover, html[data-restyle] .rmnav-hub.menu-open { background: var(--rm-on-band-hover); }
html[data-restyle] .rmnav-hub.active { background: var(--rm-on-band); color: var(--rm-primary); font-weight: 700; }
html[data-restyle] .rmnav-search { background: transparent; border: 1px solid var(--rm-on-band-line); border-radius: 8px; color: var(--rm-on-band); padding: 8px 12px; }
html[data-restyle] .rmnav-search:hover { background: var(--rm-on-band-hover); }
html[data-restyle] .rmnav-search kbd { background: transparent; border: 1px solid var(--rm-on-band-line); color: var(--rm-on-band); }

/* ---- the mega menu ---- */
html[data-restyle] .rmnav-dd { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .rmnav-ddch { font: 700 11px/14px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rm-text-dim); margin: 4px 0 6px 8px; }
html[data-restyle] .rmnav-row { border-radius: 6px; padding: 8px 10px; }
html[data-restyle] .rmnav-row:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmnav-ri { color: var(--rm-primary-75); }
html[data-restyle] .rmnav-row.locked .rmnav-ri { color: var(--rm-text-faint); }
html[data-restyle] .rmnav-rl { font: 600 13px/16px 'Manrope', sans-serif; color: var(--rm-text); }
html[data-restyle] .rmnav-rs { font: 400 11px/14px 'Manrope', sans-serif; color: var(--rm-text-dim); }
html[data-restyle] .rmnav-bdg { font: 700 10px/16px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.2px; border: 1px solid transparent; }
html[data-restyle] .rmnav-bdg.b-basic { background: var(--rm-bdg-basic-bg); color: var(--rm-bdg-basic-text); }
html[data-restyle] .rmnav-bdg.b-ent { background: var(--rm-bdg-ent-bg); color: var(--rm-bdg-ent-text); }
html[data-restyle] .rmnav-bdg.b-prem { background: var(--rm-bdg-prem-bg); color: var(--rm-bdg-prem-text); border-color: var(--rm-bdg-prem-line); }
html[data-restyle] .rmnav-bdg.b-free { background: var(--rm-bdg-free-bg); color: var(--rm-bdg-free-text); }
html[data-restyle] .rmnav-bdg.b-adm { background: var(--rm-bdg-adm-bg); color: var(--rm-bdg-adm-text); }
html[data-restyle] .rmnav-bdg.b-soon { background: var(--rm-bdg-soon-bg); color: var(--rm-bdg-soon-text); border-color: var(--rm-bdg-soon-line); }

/* ---- the phone's menu sheet ---- */
html[data-restyle] .rmnav-ov { background: var(--rm-scrim); }
html[data-restyle] .rmnav-obox { background: var(--rm-surface); color: var(--rm-text); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .rmnav-ohd { background: var(--rm-band); color: var(--rm-on-band); }
html[data-restyle] .rmnav-ohd b { font: 700 15px/1 'Manrope', sans-serif; text-transform: uppercase; }
html[data-restyle] .rmnav-oclose { background: transparent; border: 1px solid var(--rm-on-band-line); border-radius: 6px; color: var(--rm-on-band); }
html[data-restyle] .rmnav-osec { font: 700 11px/14px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rm-text-dim); }

/* ---- the phone's bottom bar: teal, the Build button gold ---- */
html[data-restyle] .rmnav-bbar { background: var(--rm-band); border-top: 1px solid var(--rm-on-band-rule); box-shadow: var(--rm-shadow); }
html[data-restyle] .rmnav-bi { font: 400 10px/1 'Manrope', sans-serif; text-transform: uppercase; color: var(--rm-on-band-dim); }
html[data-restyle] .rmnav-bi.active { color: var(--rm-on-band); font-weight: 700; }
html[data-restyle] .rmnav-bi.fab .rmnav-fabc { background: var(--rm-gold); color: var(--rm-on-gold); box-shadow: var(--rm-shadow); }

/* ---- the Ctrl K palette ---- */
html[data-restyle] .rmnav-cmd { background: var(--rm-scrim); }
html[data-restyle] .rmnav-cmdbox { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .rmnav-cmdtop { border-bottom: 2px solid var(--rm-line); }
html[data-restyle] .rmnav-cmdtop > svg { color: var(--rm-primary-75); }
html[data-restyle] .rmnav-cmdq { color: var(--rm-text); background: transparent; }
html[data-restyle] .rmnav-cmdq::placeholder { color: var(--rm-placeholder); }
html[data-restyle] .rmnav-cmdesc { color: var(--rm-text-dim); background: var(--rm-zebra); border: 1px solid var(--rm-line); }
html[data-restyle] .rmnav-cmdsec { font: 700 11px/14px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.4px; color: var(--rm-text-dim); }
html[data-restyle] .rmnav-cmdrow { width: 100%; text-align: left; border: 0; border-radius: 6px; background: transparent; font: inherit; }
html[data-restyle] .rmnav-cmdrow:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .rmnav-cmdrow.sel { background: var(--rm-sel-bg); }
html[data-restyle] .rmnav-cmdrow > svg { color: var(--rm-primary-75); }
html[data-restyle] .rmnav-cmdrow.sel > svg { color: var(--rm-sel-text); }
html[data-restyle] .rmnav-cmdl { color: var(--rm-text); font-weight: 600; }
html[data-restyle] .rmnav-cmdrow.sel .rmnav-cmdl { color: var(--rm-sel-text); }
html[data-restyle] .rmnav-cmds { color: var(--rm-text-dim); }
html[data-restyle] .rmnav-cmdrow.sel .rmnav-cmds { color: var(--rm-sel-text); opacity: 0.8; }
html[data-restyle] .rmnav-cmdtag { color: var(--rm-text-faint); }
html[data-restyle] .rmnav-cmdrow.sel .rmnav-cmdtag { color: var(--rm-sel-text); opacity: 0.7; }
html[data-restyle] .rmnav-cmdhint { color: var(--rm-text-dim); }
html[data-restyle] .rmnav-cmdfoot { background: var(--rm-note-bg); border-top: 1px solid var(--rm-line); color: var(--rm-text-faint); }
html[data-restyle] .rmnav-cmdfoot b { color: var(--rm-text-dim); }

/* ---- the bell's dropdown (notification-bell.js) ---- */
html[data-restyle] .notification-dropdown { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .notification-dropdown-header { background: var(--rm-surface); border-bottom: 2px solid var(--rm-line); }
html[data-restyle] .notification-dropdown-title { color: var(--rm-text); }
html[data-restyle] .notification-mark-all-btn { color: var(--rm-action); text-transform: uppercase; font-family: inherit; }
html[data-restyle] .notification-mark-all-btn:hover { background: var(--rm-ctl-hover); }
html[data-restyle] :is(.notification-loading, .notification-empty) { color: var(--rm-text-dim); }
html[data-restyle] .notification-item { border-bottom: 1px solid var(--rm-line); }
html[data-restyle] .notification-item:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .notification-item.notification-item-unread { background: var(--rm-zebra); border-left: 3px solid var(--rm-tertiary); }
html[data-restyle] .notification-item.notification-item-pinned { background: var(--rm-zebra); border-left: 3px solid var(--rm-gold); }
html[data-restyle] .notification-item:is(.notification-item-unread, .notification-item-pinned):hover { background: var(--rm-hover); }
html[data-restyle] .notification-item .notification-item-icon { color: var(--rm-primary-75); }
html[data-restyle] .notification-item.notification-item-unread .notification-item-icon { color: var(--rm-tertiary); }
html[data-restyle] .notification-item.notification-item-pinned .notification-item-icon { color: var(--rm-gold); }
html[data-restyle] .notification-item:is([data-priority="1"], [data-priority="2"]) .notification-item-icon { color: var(--rm-neg); }
html[data-restyle] .notification-item-title { color: var(--rm-text); }
html[data-restyle] .notification-item-message { color: var(--rm-text-dim); }
html[data-restyle] .notification-item-time { color: var(--rm-text-faint); }
html[data-restyle] .notification-dismiss-btn { color: var(--rm-text-faint); }
html[data-restyle] .notification-dismiss-btn:hover { background: var(--rm-ctl-hover); color: var(--rm-text); }
html[data-restyle] .notification-dropdown-footer { background: var(--rm-note-bg); border-top: 1px solid var(--rm-line); }
html[data-restyle] .notification-view-all { color: var(--rm-action); text-transform: uppercase; font-size: 12px; }

/* ---- the toasts (notification-toast.js) ---- */
html[data-restyle] .notification-toast { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .notification-toast:is([data-priority="1"], [data-priority="2"]) { border-left: 4px solid var(--rm-neg); }
html[data-restyle] .notification-toast-icon { color: var(--rm-tertiary); }
html[data-restyle] .notification-toast-title { color: var(--rm-text); }
html[data-restyle] .notification-toast-message { color: var(--rm-text-dim); }
html[data-restyle] .notification-toast-close { color: var(--rm-text-faint); }
html[data-restyle] .notification-toast-close:hover { background: var(--rm-ctl-hover); color: var(--rm-text); }

/* ---- the header on tablets and phones: the labels go, then the links (they are in the menu) ---- */
@media (max-width: 1023px) {
    html[data-restyle] .rmx-brand-vr, html[data-restyle] .rmx-brand-text { display: none; }
    html[data-restyle] .rmx-htool-label { display: none; }
    html[data-restyle] .rmx-htool { padding: 7px 8px; }
    html[data-restyle] .rmx-hdr-inner { padding: 10px 12px; }
}
@media (max-width: 768px) {
    html[data-restyle] .rmx-htool.rmx-hdr-link { display: none; }
    html[data-restyle] .rmx-brand-logo { height: 26px; }
}

/* =====================================================================
 * STAGE 2: THE SHARED WIDGETS THE LIST PAGES CARRY (13-10-2026)
 * runner-pills.js (TIP / SYS / temperature / place pills), tooltips.js (the data-tip
 * bubble) and limit-modal.js (the upgrade box), restyled in place under their own class
 * names, as stage 1 did for the menus. The scripts are untouched; pages that have not
 * opted in keep the old look. Pill colours follow the approved mockups (rg-style.css):
 * TIP gold, SYS teal, a hot yard green, a cold one maroon.
 * ===================================================================== */

/* ---- runner pills ---- */
html[data-restyle] .rpill.rpill-tip, html[data-restyle] .rpill.rpill-rm7 { background: var(--rm-gold); color: var(--rm-on-gold); }
html[data-restyle] .rpill.rpill-tip-locked { background: var(--rm-bdg-soon-bg); color: var(--rm-bdg-soon-text); box-shadow: inset 0 0 0 1px var(--rm-bdg-soon-line); }
html[data-restyle] .rpill.rpill-sys { background: var(--rm-pill-teal-bg); color: var(--rm-white); box-shadow: inset 0 0 0 1px var(--rm-pill-teal-line); }
html[data-restyle] .rpill.rpill-for { background: var(--rm-bdg-free-bg); color: var(--rm-bdg-free-text); }
html[data-restyle] .rpill.rpill-unl { background: var(--rm-bdg-adm-bg); color: var(--rm-bdg-adm-text); }
html[data-restyle] .rpill.rpill-p1 { background: var(--rm-medal-1-bg); color: var(--rm-medal-1-text); }
html[data-restyle] .rpill.rpill-p2 { background: var(--rm-medal-2-bg); color: var(--rm-medal-2-text); }
html[data-restyle] .rpill.rpill-p3 { background: var(--rm-medal-3-bg); color: var(--rm-medal-3-text); }
html[data-restyle] .rpill.rpill-temp-hot { background: var(--rm-tertiary); color: var(--rm-white); }
html[data-restyle] .rpill.rpill-temp-warm { background: var(--rm-tint-good); color: var(--rm-tint-text); }
html[data-restyle] .rpill.rpill-temp-cool { background: var(--rm-tint-poor); color: var(--rm-tint-text); }
html[data-restyle] .rpill.rpill-temp-cold { background: var(--rm-secondary); color: var(--rm-white); }
html[data-restyle][data-theme="dark"] .rpill:is(.rpill-temp-hot, .rpill-temp-cold) { box-shadow: inset 0 0 0 1px var(--rm-on-band-line); }

/* ---- the data-tip bubble: the teal band, edged so it shows on a dark page ---- */
html[data-restyle] .rm-tooltip { background: var(--rm-band); color: var(--rm-on-band); border: 1px solid var(--rm-on-band-rule); border-radius: 6px; box-shadow: var(--rm-pop-shadow); font-family: 'Manrope', sans-serif; font-size: 12px; }
html[data-restyle] .rm-tooltip::after { border-top-color: var(--rm-band); }
html[data-restyle] .rm-tooltip.rm-tooltip-below::after { border-top-color: transparent; border-bottom-color: var(--rm-band); }

/* ---- the upgrade box ---- */
html[data-restyle] .limit-modal-overlay { background: var(--rm-scrim); }
html[data-restyle] .limit-modal { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); font-family: 'Manrope', sans-serif; }
html[data-restyle] .limit-modal-close { background: transparent; border: 1px solid var(--rm-ctl-line); border-radius: 6px; color: var(--rm-text-dim); }
html[data-restyle] .limit-modal-close:hover { background: var(--rm-ctl-hover); color: var(--rm-text); }
html[data-restyle] .limit-modal-icon { background: var(--rm-gold); color: var(--rm-on-gold); }
html[data-restyle] .limit-modal-title { color: var(--rm-text); }
html[data-restyle] .limit-modal-message, html[data-restyle] .limit-modal-usage-text { color: var(--rm-text-dim); }
html[data-restyle] .limit-modal-usage { background: var(--rm-zebra); border-radius: 8px; }
html[data-restyle] .limit-modal-usage-bar { background: var(--rm-line); }
html[data-restyle] .limit-modal-usage-fill { background: var(--rm-action); }
html[data-restyle] .limit-modal-usage-text strong { color: var(--rm-text); }
html[data-restyle] .limit-modal-reset { color: var(--rm-text-faint); }
html[data-restyle] .limit-modal-cta { background: var(--rm-band); color: var(--rm-on-band); border-radius: 8px; box-shadow: inset var(--rm-band-edge); }
html[data-restyle] .limit-modal-cta-text { color: var(--rm-on-band); }
html[data-restyle] .limit-modal-cta-text span { color: var(--rm-gold); }
html[data-restyle] .limit-modal-upgrade-btn { background: var(--rm-gold); color: var(--rm-on-gold); border-radius: 6px; }
html[data-restyle] .limit-modal-upgrade-btn:hover { box-shadow: var(--rm-shadow); }
html[data-restyle] .limit-modal-dismiss { color: var(--rm-text-dim); }
html[data-restyle] .limit-modal-dismiss:hover { color: var(--rm-text); }

/* the empty-silk placeholder (silks-utils.js: a Tailwind grey box, marked silk-ph) */
html[data-restyle] .silk-ph { background: var(--rm-zebra); }

/* =====================================================================
 * STAGE 3: THE FEATURE-REQUEST WIDGETS (13-10-2026)
 * feature-request-sidebar.js (the side tab + panel) and feature-request-modal.js (the
 * prompt), restyled in place like the stage 1-2 widgets: the scripts are untouched and
 * pages that have not opted in keep the old look.
 * ===================================================================== */
html[data-restyle] .fr-sidebar-tab { background: var(--rm-band); color: var(--rm-on-band); box-shadow: var(--rm-shadow), inset var(--rm-band-edge); font-family: 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
html[data-restyle] .fr-sidebar-tab:hover { background: var(--rm-primary-dark); }
html[data-restyle] .fr-sidebar-tab .fr-dismiss { color: var(--rm-gold); }
html[data-restyle] .fr-sidebar-panel { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-right: 0; border-radius: 8px 0 0 8px; box-shadow: var(--rm-pop-shadow); font-family: 'Manrope', sans-serif; }
html[data-restyle] .fr-sidebar-header { background: var(--rm-band); color: var(--rm-on-band); border-radius: 8px 0 0 0; }
html[data-restyle] .fr-sidebar-close { background: transparent; border: 1px solid var(--rm-on-band-line); color: var(--rm-on-band); }
html[data-restyle] .fr-sidebar-close:hover { background: var(--rm-on-band-hover); }
html[data-restyle] .fr-sidebar-options p { color: var(--rm-text-dim); }
html[data-restyle] .fr-sidebar-option { border: 1px solid var(--rm-line); border-radius: 8px; color: var(--rm-text); }
html[data-restyle] .fr-sidebar-option:hover { background: var(--rm-ctl-hover); border-color: var(--rm-ctl-line); }
html[data-restyle] .fr-overlay { background: var(--rm-scrim); }

html[data-restyle] .feature-request-overlay { background: var(--rm-scrim); }
html[data-restyle] .feature-request-modal { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); font-family: 'Manrope', sans-serif; }
html[data-restyle] .feature-request-close { background: transparent; border: 1px solid var(--rm-ctl-line); border-radius: 6px; color: var(--rm-text-dim); }
html[data-restyle] .feature-request-close:hover { background: var(--rm-ctl-hover); color: var(--rm-text); }
html[data-restyle] .feature-request-icon { background: var(--rm-zebra); color: var(--rm-primary-75); }
html[data-restyle] .feature-request-title { color: var(--rm-text); }
html[data-restyle] .feature-request-message { color: var(--rm-text-dim); }
html[data-restyle] .feature-request-btn-primary { background: var(--rm-gold); color: var(--rm-on-gold); border-radius: 6px; }
html[data-restyle] .feature-request-btn-primary:hover { box-shadow: var(--rm-shadow); }
html[data-restyle] .feature-request-btn-secondary { background: transparent; border: 1px solid var(--rm-ctl-line); border-radius: 6px; color: var(--rm-text); }
html[data-restyle] .feature-request-btn-secondary:hover { background: var(--rm-ctl-hover); border-color: var(--rm-ctl-line); color: var(--rm-text); }
html[data-restyle] .feature-request-optout { color: var(--rm-text-faint); }
html[data-restyle] .feature-request-optout:hover { color: var(--rm-text-dim); }
html[data-restyle] .feature-request-optout input { accent-color: var(--rm-check); }

/* =====================================================================
 * STAGE 4: THE WIDGETS THE PROFILE AND RACE RESULT PAGES CARRY (13-10-2026)
 * The form lines (inline-form-lines.css / .js, fl-), the column chooser
 * (column-picker.js, rmcp- marker classes on its inline-styled markup), the
 * lifetime record (lifetime-record.css, lr-), the fast-result strip and its
 * tags (racecard-fast-result.js rcfr-, fast-results-badges.js frb-), the admin
 * blog modal (blog-post-modal.js, blog-), the video popup and its Watch chip
 * (video-popup.js vp-, site-videos.js rm-vchip) and the sectionals tab
 * (sectionals.css / .js), restyled in place like stages 1-3. Inline styles are
 * beaten with !important; nothing here reaches a page that has not opted in,
 * and racecard-popup's own copy of the fl- rules is untouched.
 * The form lines follow the racecard mockup: a recessed panel under the row,
 * its own table raised on it, chips that fill teal, Race Guides cell tints.
 * ===================================================================== */

/* ---- form lines: the panel and the table ---- */
html[data-restyle] tr.fl-row > td { background: var(--rm-recess); border-bottom: 2px solid var(--rm-recess-edge); }
html[data-restyle] .fl-container { background: var(--rm-recess); color: var(--rm-text); font-family: 'Manrope', sans-serif; }
html[data-restyle] .fl-container::-webkit-scrollbar-thumb { background: var(--rm-rule); }
html[data-restyle] .fl-table { border-collapse: separate; border-spacing: 0; background: var(--rm-surface); color: var(--rm-text); border-radius: 8px; box-shadow: var(--rm-shadow), 0 0 0 1px var(--rm-line); }
/* Cells are written table.fl-table > tbody > tr > td on purpose: that out-ranks the
   shared table.rmx-t cell rules (padding, 14px type, zebra), so form lines opened
   inside a restyled table keep their own dense look. */
html[data-restyle] table.fl-table > thead > tr > th { background: var(--rm-surface); color: var(--rm-text); padding: 5px 6px; font-size: 11px; line-height: 14px; font-weight: 700; text-align: center; text-transform: none; border-top: 0; border-bottom: 2px solid var(--rm-th-rule); }
html[data-restyle] table.fl-table > thead > tr > th:first-child { border-radius: 8px 0 0 0; }
html[data-restyle] table.fl-table > thead > tr > th:last-child { border-radius: 0 8px 0 0; }
html[data-restyle] table.fl-table > thead > tr > th.fl-sortable:hover { background: var(--rm-ctl-hover); }
html[data-restyle] table.fl-table > tbody > tr > td { padding: 4px 6px; font-size: inherit; line-height: normal; color: var(--rm-text); background: var(--rm-surface); border-bottom: 1px solid var(--rm-line); }
html[data-restyle] table.fl-table > tbody > tr:last-child > td { border-bottom: 0; }
html[data-restyle] table.fl-table > tbody > tr:nth-child(even) > td { background: var(--rm-zebra); }
html[data-restyle] table.fl-table > tbody > tr:hover > td { background: var(--rm-hover); }
@media (max-width: 640px) {
    html[data-restyle] table.fl-table > tbody > tr > td { padding: 3px 4px; }
}
html[data-restyle] .fl-table a { color: var(--rm-text); font-weight: 600; text-decoration: none; }
html[data-restyle] .fl-table a:hover { color: var(--rm-action); text-decoration: underline; }
html[data-restyle] .fl-date { color: var(--rm-text); font-weight: 700; }
html[data-restyle] .fl-table td.fl-match, html[data-restyle] .fl-table .fl-match-inline { background: var(--rm-tint-good) !important; color: var(--rm-tint-text); }
html[data-restyle] .fl-table td.fl-gold { background: var(--rm-top-bg) !important; color: var(--rm-top-text); font-weight: 700; }
html[data-restyle] .fl-table td.fl-neg { color: var(--rm-neg) !important; }
html[data-restyle] .fl-table .fl-prb-high { background: transparent; color: var(--rm-pos); }
html[data-restyle] .fl-table .fl-prb-mid { background: transparent; color: var(--rm-text); font-weight: 600; }
html[data-restyle] .fl-table .fl-prb-low { background: transparent; color: var(--rm-neg); font-weight: 600; }
html[data-restyle] .fl-table .fl-pos-won { color: var(--rm-pos); }
html[data-restyle] .fl-table .fl-pos-placed { color: var(--rm-text); font-weight: 700; }
html[data-restyle] .fl-table .fl-pos-other { color: var(--rm-text); }
html[data-restyle] .fl-table .fl-pos-dnf { color: var(--rm-neg); }
html[data-restyle] .fl-icon { color: var(--rm-primary-75); }
html[data-restyle] .fl-icon:hover { color: var(--rm-text); }
html[data-restyle] .fl-icon.fl-replay-icon { color: var(--rm-tertiary); }
html[data-restyle] .fl-icon.fl-replay-icon:hover { color: var(--rm-pos); }
html[data-restyle] .fl-hg-n { color: var(--rm-action); }
html[data-restyle] .fl-table td.fl-my { color: var(--rm-text); }
html[data-restyle] .fl-my-pre { color: var(--rm-text-faint); }

/* sectional columns: the five Race Guides tints for the pace bar, green / red figures */
html[data-restyle] .fl-pace-bar .pb-mf { background: var(--rm-tint-strong); }
html[data-restyle] .fl-pace-bar .pb-f { background: var(--rm-tint-good); }
html[data-restyle] .fl-pace-bar .pb-p { background: var(--rm-zebra); box-shadow: inset 0 0 0 1px var(--rm-line); }
html[data-restyle] .fl-pace-bar .pb-s { background: var(--rm-tint-weak); }
html[data-restyle] .fl-pace-bar .pb-ms { background: var(--rm-tint-poor); }
html[data-restyle] .fl-table :is(.fl-fs-mf, .fl-fs-f, .fl-pos-gained) { color: var(--rm-pos); }
html[data-restyle] .fl-table :is(.fl-fs-s, .fl-fs-ms, .fl-pos-lost) { color: var(--rm-neg); }
html[data-restyle] .fl-table :is(.fl-fs-par, .fl-pos-same) { color: var(--rm-text-faint); }
html[data-restyle] .fl-pos-track { color: var(--rm-text); }
html[data-restyle] .fl-pos-track .fl-pt-arr { color: var(--rm-text-faint); }
html[data-restyle] .fl-rs-badge { color: var(--rm-white); }
html[data-restyle] .fl-rs-badge.rs-front-runner { background: var(--rm-pill-warn-bg); }
html[data-restyle] .fl-rs-badge.rs-prominent { background: var(--rm-pill-teal-bg); box-shadow: inset 0 0 0 1px var(--rm-pill-teal-line); }
html[data-restyle] .fl-rs-badge.rs-stalker { background: var(--rm-bronze); }
html[data-restyle] .fl-rs-badge.rs-mid-division { background: var(--rm-medal-4-bg); color: var(--rm-medal-4-text); }
html[data-restyle] .fl-rs-badge.rs-closer { background: var(--rm-tertiary); }
html[data-restyle] .fl-rs-badge.rs-held-up { background: var(--rm-medal-2-bg); color: var(--rm-medal-2-text); }

/* the separator lines: breaks dim and dashed, the data-change and Today lines in green */
html[data-restyle] table.fl-table > tbody > tr.fl-break-row > td { padding: 2px 6px; font-size: 10px; color: var(--rm-text-dim); background: var(--rm-recess); border-top: 1px dashed var(--rm-rule); border-bottom: 1px dashed var(--rm-rule); }
html[data-restyle] table.fl-table > tbody > tr.fl-change-row > td { padding: 2px 6px; font-size: 10px; color: var(--rm-pos); background: var(--rm-recess); border-bottom: 1px solid var(--rm-line); }
html[data-restyle] table.fl-table > tbody > tr.fl-change-today > td { border-top: 2px solid var(--rm-tertiary); }
html[data-restyle] table.fl-table > tbody > tr.fl-quick-empty > td { padding: 10px 6px; color: var(--rm-text-dim); }

/* the bar above the table: filter label, quick-filter chips, the outline buttons */
html[data-restyle] .fl-filter-label { color: var(--rm-text-dim); }
html[data-restyle] .fl-quick.fl-quick-active { background: var(--rm-surface); border-color: var(--rm-gold); }
html[data-restyle] .fl-quick-group + .fl-quick-group { border-left-color: var(--rm-line); }
html[data-restyle] .fl-quick .fl-quick-chip { border: 1px solid var(--rm-ctl-line); border-radius: 6px; padding: 3px 10px; background: var(--rm-btn-bg); color: var(--rm-text); font-family: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; }
html[data-restyle] .fl-quick .fl-quick-chip:hover { background: var(--rm-ctl-hover); border-color: var(--rm-ctl-line); }
html[data-restyle] .fl-quick .fl-quick-chip.fl-quick-on { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }
html[data-restyle] .fl-quick.fl-quick-locked .fl-quick-chip:hover { background: var(--rm-btn-bg); border-color: var(--rm-ctl-line); }
html[data-restyle] .fl-quick-lock { color: var(--rm-action); }
html[data-restyle] .fl-quick-readout { color: var(--rm-action); }
html[data-restyle] .fl-export-btn { border: 1px solid var(--rm-ctl-line); border-radius: 4px; background: var(--rm-btn-bg); color: var(--rm-text); font-family: inherit; }
html[data-restyle] .fl-export-btn:hover { background: var(--rm-ctl-hover); border-color: var(--rm-ctl-line); }
html[data-restyle] .fl-export-btn.fl-export-locked { background: var(--rm-btn-bg); color: var(--rm-text-dim); border-color: var(--rm-ctl-line); }
html[data-restyle] .fl-export-btn.fl-export-locked:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .fl-export-btn:is(.fl-breaks-on, .fl-changes-on) { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }
html[data-restyle] .fl-premium-pill { background: var(--rm-bdg-prem-bg); color: var(--rm-bdg-prem-text); box-shadow: inset 0 0 0 1px var(--rm-bdg-prem-line); }
html[data-restyle] .fl-container .fl-export-note { color: var(--rm-warn-text) !important; background: var(--rm-warn-bg) !important; border-color: var(--rm-warn-line) !important; }

/* the two header pills (Sectionals on the Race column, IRE on OffGng) */
html[data-restyle] :is(.fl-sect-toggle, .fl-gng-words) { border: 1px solid var(--rm-pill-line); border-radius: 10px; background: transparent; color: var(--rm-text); font-family: inherit; text-transform: none; }
html[data-restyle] :is(.fl-sect-toggle, .fl-gng-words):hover { background: var(--rm-ctl-hover); color: var(--rm-text); }
html[data-restyle] :is(.fl-sect-toggle, .fl-gng-words).active { background: var(--rm-sel-bg); border-color: var(--rm-sel-bg); color: var(--rm-sel-text); }

/* under the table */
html[data-restyle] .fl-footer { color: var(--rm-text-dim); }
html[data-restyle] .fl-footer span { color: var(--rm-text-dim); }
html[data-restyle] :is(.fl-footer a, .fl-show-all) { color: var(--rm-action); text-transform: uppercase; font-size: 11px; }
html[data-restyle] .fl-loading { color: var(--rm-text-dim); }

/* ---- the column chooser (column-picker.js: inline styles, so the colours carry !important) ---- */
html[data-restyle] #rmcp-overlay { background: var(--rm-scrim) !important; }
html[data-restyle] .rmcp-panel { background: var(--rm-surface) !important; color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px !important; box-shadow: var(--rm-pop-shadow) !important; font-family: 'Manrope', sans-serif; }
html[data-restyle] .rmcp-head { background: var(--rm-surface) !important; border-bottom: 2px solid var(--rm-line) !important; }
html[data-restyle] .rmcp-title { color: var(--rm-text) !important; }
html[data-restyle] .rmcp-reset { color: var(--rm-text) !important; background: var(--rm-btn-bg) !important; border: 1px solid var(--rm-ctl-line) !important; border-radius: 6px !important; font-family: inherit; }
html[data-restyle] .rmcp-reset:hover { background: var(--rm-ctl-hover) !important; }
html[data-restyle] .rmcp-done { color: var(--rm-btn-primary-text) !important; background: var(--rm-btn-primary-bg) !important; border-radius: 6px !important; font-family: inherit; }
html[data-restyle] .rmcp-done:hover { background: var(--rm-btn-primary-hover) !important; }
html[data-restyle] :is(.rmcp-sec, .rmcp-grp, .rmcp-empty, .rmcp-always) { color: var(--rm-text-dim) !important; }
html[data-restyle] .rmcp-row { background: var(--rm-zebra) !important; border-color: var(--rm-line) !important; }
html[data-restyle] .rmcp-name { color: var(--rm-text) !important; }
html[data-restyle] .rmcp-mv { background: var(--rm-surface) !important; color: var(--rm-text) !important; box-shadow: inset 0 0 0 1px var(--rm-ctl-line); }
html[data-restyle] .rmcp-rm { background: var(--rm-warn-bg) !important; color: var(--rm-warn-text) !important; }
html[data-restyle] .rmcp-chip { background: var(--rm-btn-bg) !important; color: var(--rm-text) !important; border-color: var(--rm-ctl-line) !important; font-family: inherit; }
html[data-restyle] .rmcp-chip:hover { background: var(--rm-ctl-hover) !important; }
html[data-restyle] :is(.rmcp-reset, .rmcp-done, .rmcp-mv, .rmcp-rm, .rmcp-chip):focus-visible { outline: 2px solid var(--rm-focus); outline-offset: 2px; }

/* ---- the lifetime record (lifetime-record.css) ---- */
html[data-restyle] .lr-sec { color: var(--rm-text-dim); }
html[data-restyle] table.lr-table { color: var(--rm-text); }
html[data-restyle] table.lr-table th { color: var(--rm-text-dim); border-bottom: 2px solid var(--rm-th-rule); }
html[data-restyle] table.lr-table td { border-bottom: 1px solid var(--rm-line); }
html[data-restyle] table.lr-table tr.lr-tot td { border-top: 2px solid var(--rm-th-rule); }
html[data-restyle] table.lr-table tr.lr-hi td { background: var(--rm-hover); }
html[data-restyle] table.lr-table tr.lr-hi td:first-child { color: var(--rm-text); }
html[data-restyle] table.lr-table tr.lr-sub td { color: var(--rm-text-dim); }
html[data-restyle] table.lr-table td.lr-pos { color: var(--rm-pos); }
html[data-restyle] table.lr-table td.lr-neg { color: var(--rm-neg); }
html[data-restyle] table.lr-table td.lr-best a { color: var(--rm-action); font-weight: 600; }
html[data-restyle] table.lr-table td.lr-best b { color: var(--rm-text); }
html[data-restyle] .lr-chip { background: transparent; color: var(--rm-text); border-color: var(--rm-pill-line); }
html[data-restyle] .lr-chip b { color: var(--rm-text); }
html[data-restyle] .lr-chip.lr-ft-hot { background: var(--rm-tertiary); border-color: var(--rm-tertiary); color: var(--rm-white); }
html[data-restyle] .lr-chip.lr-ft-warm { background: var(--rm-tint-good); border-color: var(--rm-tint-good); color: var(--rm-tint-text); }
html[data-restyle] .lr-chip.lr-ft-cool { background: var(--rm-tint-poor); border-color: var(--rm-tint-poor); color: var(--rm-tint-text); }
html[data-restyle] .lr-chip.lr-ft-cold { background: var(--rm-secondary); border-color: var(--rm-secondary); color: var(--rm-white); }
html[data-restyle] .lr-chip:is(.lr-ft-hot, .lr-ft-warm, .lr-ft-cool, .lr-ft-cold) b { color: inherit; }
html[data-restyle][data-theme="dark"] .lr-chip:is(.lr-ft-hot, .lr-ft-cold) { border-color: var(--rm-on-band-line); }
html[data-restyle] .lr-note { color: var(--rm-warn-text); }
html[data-restyle] .lr-form { color: var(--rm-text-dim); }
html[data-restyle] .lr-form b { color: var(--rm-text); }

/* ---- the fast-result strip (racecard-fast-result.js) and the A-Z / entries tag (fast-results-badges.js) ---- */
html[data-restyle] .rcfr { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-left: 4px solid var(--rm-tab-line); border-radius: 8px; box-shadow: var(--rm-shadow); font-family: 'Manrope', sans-serif; }
html[data-restyle] .rcfr-title { color: var(--rm-text); }
html[data-restyle] .rcfr-label.rcfr-label-prov { background: transparent; color: var(--rm-text); border: 1px dashed var(--rm-gold); }
html[data-restyle] .rcfr-label.rcfr-label-fast { background: var(--rm-pill-teal-bg); color: var(--rm-white); border: 1px solid var(--rm-pill-teal-line); }
html[data-restyle] .rcfr-all { color: var(--rm-action); text-transform: uppercase; }
html[data-restyle] .rcfr-place { background: var(--rm-zebra); }
html[data-restyle] .rcfr-p1 .rcfr-pos { background: var(--rm-medal-1-bg); color: var(--rm-medal-1-text); }
html[data-restyle] .rcfr-p2 .rcfr-pos { background: var(--rm-medal-2-bg); color: var(--rm-medal-2-text); }
html[data-restyle] .rcfr-p3 .rcfr-pos { background: var(--rm-medal-3-bg); color: var(--rm-medal-3-text); }
html[data-restyle] .rcfr-p4 .rcfr-pos { background: var(--rm-medal-4-bg); color: var(--rm-medal-4-text); }
html[data-restyle] :is(.rcfr-no, .rcfr-dh, .rcfr-amended, .rcfr-note) { color: var(--rm-text-dim); }
html[data-restyle] .rcfr-horse a { color: var(--rm-text); }
html[data-restyle] .rcfr-dq { color: var(--rm-action); }
html[data-restyle] .rcfr-sp { color: var(--rm-text); }
html[data-restyle] .frb-pos { background: var(--rm-medal-4-bg); color: var(--rm-medal-4-text); }

/* ---- the admin blog modal (blog-post-modal.js): dark-only before, now the page's theme ---- */
html[data-restyle] .blog-gen-btn { background: var(--rm-band); color: var(--rm-gold); border: 1px solid var(--rm-on-band-line); font-family: 'Manrope', sans-serif; }
html[data-restyle] .blog-gen-btn:hover { background: var(--rm-primary-dark); border-color: var(--rm-gold); }
html[data-restyle] .blog-modal-overlay { background: var(--rm-scrim); }
html[data-restyle] .blog-modal { background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-line); border-radius: 8px; box-shadow: var(--rm-pop-shadow); font-family: 'Manrope', sans-serif; }
html[data-restyle] .blog-modal-header { border-bottom: 2px solid var(--rm-line); }
html[data-restyle] .blog-modal-header h2 { color: var(--rm-text); }
html[data-restyle] .blog-modal-close { color: var(--rm-text-dim); }
html[data-restyle] .blog-modal-close:hover { color: var(--rm-text); }
html[data-restyle] .blog-field label { color: var(--rm-text-dim); }
html[data-restyle] .blog-field label span { color: var(--rm-text-faint) !important; }
html[data-restyle] .blog-field :is(input, textarea, select) { background: var(--rm-field); border: 1px solid var(--rm-ctl-line); border-radius: 4px; color: var(--rm-text); }
html[data-restyle] .blog-field :is(input, textarea, select):focus { border-color: var(--rm-primary-75); }
html[data-restyle] .blog-image-zone { border-color: var(--rm-ctl-line); }
html[data-restyle] .blog-image-zone:is(:hover, .dragover) { border-color: var(--rm-primary-75); background: var(--rm-ctl-hover); }
html[data-restyle] .blog-image-zone .zone-text { color: var(--rm-text-dim); }
html[data-restyle] .blog-image-remove { background: var(--rm-btn-primary-bg); color: var(--rm-btn-primary-text); }
html[data-restyle] :is(.blog-preview, .blog-evidence) { background: var(--rm-zebra); color: var(--rm-text); border: 1px solid var(--rm-line); }
html[data-restyle] .blog-preview p[style] { color: var(--rm-text-dim) !important; }
html[data-restyle] .blog-preview :is(h2, h3, strong) { color: var(--rm-text); }
html[data-restyle] .blog-preview a { color: var(--rm-action); }
html[data-restyle] .blog-preview a:hover { color: var(--rm-action); }
html[data-restyle] .blog-preview mark[data-rmv] { background: var(--rm-top-bg); color: var(--rm-top-text); }
html[data-restyle] .blog-preview mark[data-rmv].hard { background: var(--rm-tint-poor); color: var(--rm-tint-text); }
html[data-restyle] .blog-verify-badge { color: var(--rm-pos); }
html[data-restyle] .blog-verify-badge.review { color: var(--rm-text); }
html[data-restyle] .blog-verify-badge.hard { color: var(--rm-neg); }
html[data-restyle] .blog-evidence h4 { color: var(--rm-text-dim); }
html[data-restyle] .blog-evidence code { color: var(--rm-primary-75); }
html[data-restyle] .blog-evidence .hard { color: var(--rm-neg); }
html[data-restyle] .blog-evidence .warn { color: var(--rm-warn-text); }
html[data-restyle] .blog-evidence .muted { color: var(--rm-text-faint); }
html[data-restyle] .blog-evidence [class~="ok"] { color: var(--rm-pos); }
html[data-restyle] .blog-angle-side label { color: var(--rm-text-dim); }
html[data-restyle] .blog-seo-toggle { color: var(--rm-text-dim); font-family: inherit; }
html[data-restyle] .blog-seo-toggle:hover { color: var(--rm-action); }
html[data-restyle] .blog-modal-footer { border-top: 2px solid var(--rm-line); }
html[data-restyle] .blog-btn { font-family: inherit; }
html[data-restyle] .blog-btn.blog-btn-draft { background: var(--rm-btn-bg); color: var(--rm-text); border-color: var(--rm-ctl-line); }
html[data-restyle] .blog-btn.blog-btn-draft:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .blog-btn.blog-btn-publish { background: var(--rm-btn-primary-bg); color: var(--rm-btn-primary-text); }
html[data-restyle] .blog-btn.blog-btn-publish:hover { background: var(--rm-btn-primary-hover); }
html[data-restyle] .blog-btn.blog-btn-social { background: var(--rm-gold); color: var(--rm-on-gold); }
html[data-restyle] .blog-btn.blog-btn-social:hover { box-shadow: var(--rm-shadow); }
html[data-restyle] .blog-btn.blog-btn-cancel { background: transparent; color: var(--rm-text-dim); border-color: var(--rm-ctl-line); }
html[data-restyle] .blog-btn.blog-btn-cancel:hover { color: var(--rm-text); border-color: var(--rm-ctl-line); background: var(--rm-ctl-hover); }
html[data-restyle] .blog-spinner { border-color: var(--rm-line); border-top-color: var(--rm-primary-75); }
html[data-restyle] .blog-toast { font-family: 'Manrope', sans-serif; box-shadow: var(--rm-pop-shadow); }
html[data-restyle] .blog-toast.success { background: var(--rm-tertiary); color: var(--rm-white); }
html[data-restyle] .blog-toast.error { background: var(--rm-secondary); color: var(--rm-white); }

/* ---- the video popup (video-popup.js) and its Watch chip (site-videos.js) ---- */
html[data-restyle] .vp-frame { border-radius: 8px; }
html[data-restyle] .vp-close { background: var(--rm-band); color: var(--rm-on-band); border: 1px solid var(--rm-on-band-line); border-radius: 6px; }
html[data-restyle] .vp-close:hover { background: var(--rm-primary-dark); }
html[data-restyle] .vp-close:focus-visible { outline: 2px solid var(--rm-focus); outline-offset: 2px; }
html[data-restyle] .rm-vchip { background: var(--rm-gold); color: var(--rm-on-gold); box-shadow: var(--rm-shadow); border-radius: 10px; }
html[data-restyle] .rm-vchip svg { fill: var(--rm-on-gold); }
html[data-restyle] .rm-vchip:focus-visible { outline: 2px solid var(--rm-focus); }

/* ---- the sectionals tab (sectionals.css; sectionals.js writes the horse colours as var(--rm-chart-N)) ---- */
html[data-restyle] .sectionals-header { background: var(--rm-band); color: var(--rm-on-band); box-shadow: inset var(--rm-band-edge); font-family: 'Manrope', sans-serif; }
html[data-restyle] .sectionals-title .race-info { color: var(--rm-on-band-dim); opacity: 1; }
html[data-restyle] .sectionals-controls select { background-color: var(--rm-band); color: var(--rm-on-band); border: 1px solid var(--rm-on-band-line); border-radius: 4px; font-family: inherit; }
html[data-restyle] .sectionals-controls select option { color: var(--rm-text); background: var(--rm-surface); }
html[data-restyle] .sectionals-controls input[type="checkbox"] { accent-color: var(--rm-gold); }
html[data-restyle] .sectionals-tabs { background: var(--rm-surface); border-bottom: 1px solid var(--rm-line); gap: 20px; padding: 0 16px; }
html[data-restyle] .sectionals-tabs .tab-btn { background: transparent; color: var(--rm-text-dim); border-bottom: 2px solid transparent; padding: 10px 0 8px; font-family: inherit; }
html[data-restyle] .sectionals-tabs .tab-btn:hover { background: transparent; color: var(--rm-text); }
html[data-restyle] .sectionals-tabs .tab-btn.active { background: transparent; color: var(--rm-text); border-bottom-color: var(--rm-tab-line); font-weight: 700; }
html[data-restyle] .sectionals-tabs .tab-btn:focus-visible { outline: 2px solid var(--rm-focus); outline-offset: 2px; }
html[data-restyle] .sectionals-panel { background: var(--rm-surface); color: var(--rm-text); }
html[data-restyle] .sectionals-grid-wrapper { border: 1px solid var(--rm-line); border-radius: 8px; }
html[data-restyle] .sectionals-grid { background: var(--rm-surface); color: var(--rm-text); }
html[data-restyle] .sectionals-grid :is(th, td) { border-bottom: 1px solid var(--rm-line); }
html[data-restyle] .sectionals-grid th { background: var(--rm-surface); color: var(--rm-text); font-weight: 700; border-bottom: 2px solid var(--rm-th-rule); }
html[data-restyle] .sectionals-grid th .par-value { color: var(--rm-primary-75); }
html[data-restyle] .sectionals-grid .horse-col { background: var(--rm-surface); }
html[data-restyle] .sectionals-grid th.horse-col { background: var(--rm-surface); }
/* the name in the text colour (the Position tab paints it in the horse's series colour, unreadable when light); the dot carries the colour */
html[data-restyle] .sectionals-grid .horse-name { color: var(--rm-text) !important; font-weight: 600; }
html[data-restyle] .sectionals-grid tbody tr:nth-child(even), html[data-restyle] .sectionals-grid tbody tr:nth-child(even) .horse-col { background: var(--rm-zebra); }
html[data-restyle] .sectionals-grid tbody tr:hover, html[data-restyle] .sectionals-grid tbody tr:hover .horse-col { background: var(--rm-hover); }
html[data-restyle] .sectionals-grid th.sect-sortable:hover, html[data-restyle] .metrics-sortable:hover { background: var(--rm-ctl-hover) !important; }
html[data-restyle] :is(.sect-sort-arrow, .metrics-sort-arrow) { color: var(--rm-text-faint); }
html[data-restyle] :is(.sect-sort-arrow, .metrics-sort-arrow).active { color: var(--rm-text); }

/* the time / FSP colour coding: the five Race Guides tints (strong, good, plain, weak, poor) */
html[data-restyle] .sectionals-grid :is(.much-faster, .section-time.much-faster) { background: var(--rm-tint-strong); color: var(--rm-tint-text); }
html[data-restyle] .sectionals-grid :is(.faster, .section-time.faster) { background: var(--rm-tint-good); color: var(--rm-tint-text); }
html[data-restyle] .sectionals-grid :is(.on-par, .section-time.on-par) { background: transparent; color: var(--rm-text); }
html[data-restyle] .sectionals-grid :is(.slower, .section-time.slower) { background: var(--rm-tint-weak); color: var(--rm-tint-text); }
html[data-restyle] .sectionals-grid :is(.much-slower, .section-time.much-slower) { background: var(--rm-tint-poor); color: var(--rm-tint-text); }
html[data-restyle] .position-grid td.leader { background: var(--rm-top-bg) !important; color: var(--rm-top-text) !important; }
html[data-restyle] .sectionals-grid .highlighted-section { outline-color: var(--rm-tab-line) !important; background: var(--rm-hover) !important; color: var(--rm-text) !important; }
html[data-restyle] .stride-grid .above-avg, html[data-restyle] .style-grid .positive-gain { background: var(--rm-tint-good); color: var(--rm-tint-text); }
html[data-restyle] .stride-grid .below-avg, html[data-restyle] .style-grid .negative-gain { background: var(--rm-tint-poor); color: var(--rm-tint-text); }
html[data-restyle] .topspeed-grid .rank-1 { background: var(--rm-medal-1-bg); color: var(--rm-medal-1-text); }
html[data-restyle] .topspeed-grid .rank-2 { background: var(--rm-medal-2-bg); color: var(--rm-medal-2-text); }
html[data-restyle] .topspeed-grid .rank-3 { background: var(--rm-medal-3-bg); color: var(--rm-medal-3-text); }
html[data-restyle] .topspeed-grid .speed-bar { background: var(--rm-primary-75); border-radius: 0 2px 2px 0; }

/* charts, legend, the other tabs' furniture */
html[data-restyle] .sectionals-chart-container { background: var(--rm-surface); border: 1px solid var(--rm-line); border-radius: 8px; }
html[data-restyle] .sectionals-legend { background: var(--rm-note-bg); border: 1px solid var(--rm-line); border-radius: 8px; }
html[data-restyle] .sectionals-legend .legend-item:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .sectionals-legend .legend-name { color: var(--rm-text); }
html[data-restyle] .sectionals-legend input[type="checkbox"] { accent-color: var(--rm-check); }
html[data-restyle] .sectionals-splitter { background: var(--rm-line); }
html[data-restyle] .sectionals-splitter:hover { background: var(--rm-primary-75); }
html[data-restyle] :is(.heatmap-info, .heatmap-legend, .stride-intro, .style-intro, .style-count) { color: var(--rm-text-dim); }
html[data-restyle] .heatmap-grid .heatmap-header:hover { background: var(--rm-ctl-hover); }
html[data-restyle] .heatmap-legend .heatmap-gradient { background: linear-gradient(to right, var(--rm-tint-strong), var(--rm-tint-good), var(--rm-surface), var(--rm-tint-weak), var(--rm-tint-poor)); border: 1px solid var(--rm-line); }
html[data-restyle] .stride-averages { background: var(--rm-zebra); color: var(--rm-text); }
html[data-restyle] .style-group { background: var(--rm-zebra); border: 1px solid var(--rm-line); }
html[data-restyle] .style-header { background: var(--rm-surface); color: var(--rm-text); }
html[data-restyle] .style-horses { color: var(--rm-text-dim); }
html[data-restyle] .style-horse { background: var(--rm-surface); color: var(--rm-text); }
html[data-restyle] .style-horse sup { color: var(--rm-primary-75); }
html[data-restyle] .sectionals-loading { color: var(--rm-text-dim); }
html[data-restyle] .sectionals-loading .loading-spinner { border-color: var(--rm-line); border-top-color: var(--rm-primary-75); }
html[data-restyle] .sectionals-error { color: var(--rm-warn-text); background: var(--rm-warn-bg); border: 1px solid var(--rm-warn-line); }
html[data-restyle] .sectionals-locked { background: var(--rm-note-bg); border: 1px solid var(--rm-line); }
html[data-restyle] .sectionals-locked h3 { color: var(--rm-text); }
html[data-restyle] .sectionals-locked p { color: var(--rm-text-dim); }
html[data-restyle] .sectionals-locked .upgrade-text, html[data-restyle] .sectionals-locked a { color: var(--rm-action); }

/* =====================================================================
 * STAGE 7: TAILWIND TYPOGRAPHY (`prose`) ON THE TOKENS (13-10-2026)
 * The legal pages and the blog posts set their long text with the typography plugin, whose
 * colours are its own --tw-prose-* variables (grey on white). Pointing them at the tokens
 * keeps every `prose` page readable in dark without touching a post's HTML.
 * ===================================================================== */
html[data-restyle] .prose {
    --tw-prose-body: var(--rm-text);
    --tw-prose-headings: var(--rm-text);
    --tw-prose-lead: var(--rm-text-dim);
    --tw-prose-links: var(--rm-action);
    --tw-prose-bold: var(--rm-text);
    --tw-prose-counters: var(--rm-text-dim);
    --tw-prose-bullets: var(--rm-text-faint);
    --tw-prose-hr: var(--rm-line);
    --tw-prose-quotes: var(--rm-text);
    --tw-prose-quote-borders: var(--rm-gold);
    --tw-prose-captions: var(--rm-text-dim);
    --tw-prose-kbd: var(--rm-text);
    --tw-prose-code: var(--rm-text);
    --tw-prose-pre-code: var(--rm-text);
    --tw-prose-pre-bg: var(--rm-recess);
    --tw-prose-th-borders: var(--rm-th-rule);
    --tw-prose-td-borders: var(--rm-line);
    color: var(--tw-prose-body);
}
html[data-restyle] .prose a { color: var(--tw-prose-links); }