/* UTLC theme — one set of colours for the whole site (06 Oct 2026).
 *
 * The look is the one the athlete dashboard and the training companion already have (navy gradient greeting card,
 * black companion screen, lime / cyan / amber / coral accents, one colour per sport; see progression.css). This file
 * turns it into variables that FLIP with the existing dark-mode switch (<html data-bs-theme="dark">, set by the toggle
 * in _Layout), so a page picks the look up without carrying colours of its own.
 *
 *   1. tokens        --u-*   what the colours ARE, light and dark
 *   2. Bootstrap     --bs-*  Bootstrap 5.3's own variables pointed at the tokens: every .card / .btn / .form-control /
 *                            .modal / .dropdown on all 195 card pages follows, without editing the page
 *   3. chrome        navbar, footer
 *   4. components    .u-*    for the pages that are built by hand (My Week first): hero, ring, day strip, day card,
 *                            stat tiles, banners
 *
 * Rules that keep it honest:
 *   - the neon accents (lime #d8ff54...) cannot be read on white, so the light set carries a deeper shade of the SAME
 *     hue; a page never picks a hex of its own, it picks --u-lime, --u-run, --u-race...
 *   - every kind of day / sport also has an -rgb token, so a tint is rgba(var(--c-rgb), .12) and works in both themes
 *     (and on phones older than color-mix()).
 *   - the BAR colour of a workout step says how hard (--u-z1..z5), the CARD tint says which sport. Never both in one.
 */

/* ── 1. tokens ───────────────────────────────────────────────────────────────────────────────── */

:root {
    --u-page: #eef2f9;
    --u-card: #ffffff;
    --u-card-2: #f4f7fc;
    --u-edge: rgba(15, 23, 42, .09);
    --u-edge-strong: rgba(15, 23, 42, .16);
    --u-ink: #0f172a;
    --u-dim: #5b6b83;
    --u-faint: #94a3b8;

    /* the navy of the dashboard's greeting card; the hero is navy in BOTH themes */
    --u-hero-a: #1a1a2e;
    --u-hero-b: #16213e;
    --u-hero-c: #0f3460;
    --u-hero-dim: #aab6d0;

    --u-lime: #4d7c0f;
    --u-cyan: #0369a1;
    --u-amber: #b45309;
    --u-coral: #c2410c;
    --u-note: #4f46e5;      --u-note-rgb: 79, 70, 229;

    --u-run: #16a34a;       --u-run-rgb: 22, 163, 74;
    --u-swim: #0891b2;      --u-swim-rgb: 8, 145, 178;
    --u-bike: #d97706;      --u-bike-rgb: 217, 119, 6;
    --u-strength: #9333ea;  --u-strength-rgb: 147, 51, 234;
    --u-other: #7c3aed;     --u-other-rgb: 124, 58, 237;
    --u-on-solid: #fff;     /* #278: text on a sport colour (a solid badge, a tab, a header) */

    --u-rest: #64748b;      --u-rest-rgb: 100, 116, 139;
    --u-free: #db2777;      --u-free-rgb: 219, 39, 119;
    --u-race: #e11d48;      --u-race-rgb: 225, 29, 72;
    --u-wait: #d97706;      --u-wait-rgb: 217, 119, 6;
    --u-done: #16a34a;      --u-done-rgb: 22, 163, 74;
    --u-part: #ea580c;      --u-part-rgb: 234, 88, 12;
    --u-today: #2563eb;     --u-today-rgb: 37, 99, 235;
    --u-bad: #dc2626;       --u-bad-rgb: 220, 38, 38;
    --u-up: #94a3b8;        --u-up-rgb: 148, 163, 184;
    --u-f1: #dc2626; --u-f2: #ea580c; --u-f3: #64748b; --u-f4: #65a30d; --u-f5: #16a34a;   /* #279: a feel scale's steps, 1 worst … 5 best */

    /* how hard: a cool-to-hot ramp for workout step bars */
    --u-z1: #0284c7;
    --u-z2: #16a34a;
    --u-z3: #ca8a04;
    --u-z4: #ea580c;
    --u-z5: #dc2626;
    --u-zg: #94a3b8;        /* grey: the grey zone, a rest, a step whose effort is not known */

    --u-btn-from: #2563eb;
    --u-btn-to: #4f46e5;
    --u-btn-ink: #ffffff;

    --u-shadow: 0 6px 22px rgba(15, 23, 42, .06);
    --u-shadow-lg: 0 18px 44px rgba(15, 23, 42, .16);
    --u-radius: 18px;
}

[data-bs-theme="dark"] {
    --u-page: #060a14;
    --u-card: #0b1020;
    --u-card-2: #0a0f1c;
    --u-edge: rgba(148, 163, 184, .16);
    --u-edge-strong: rgba(148, 163, 184, .28);
    --u-ink: #e8eef9;
    --u-dim: #8b9ab3;
    --u-faint: #55657f;

    /* the companion's own colours (progression.css) */
    --u-lime: #d8ff54;
    --u-cyan: #38bdf8;
    --u-amber: #fbbf24;
    --u-coral: #ff7a59;
    --u-note: #a5b4fc;      --u-note-rgb: 165, 180, 252;

    --u-run: #4ade80;       --u-run-rgb: 74, 222, 128;
    --u-swim: #22d3ee;      --u-swim-rgb: 34, 211, 238;
    --u-bike: #fbbf24;      --u-bike-rgb: 251, 191, 36;
    --u-strength: #c084fc;  --u-strength-rgb: 192, 132, 252;
    --u-other: #a78bfa;     --u-other-rgb: 167, 139, 250;
    --u-on-solid: #04111d;

    --u-rest: #cbd5e1;      --u-rest-rgb: 203, 213, 225;
    --u-free: #f472b6;      --u-free-rgb: 244, 114, 182;
    --u-race: #fb7185;      --u-race-rgb: 251, 113, 133;
    --u-wait: #fbbf24;      --u-wait-rgb: 251, 191, 36;
    --u-done: #4ade80;      --u-done-rgb: 74, 222, 128;
    --u-part: #fb923c;      --u-part-rgb: 251, 146, 60;
    --u-today: #60a5fa;     --u-today-rgb: 96, 165, 250;
    --u-bad: #f87171;       --u-bad-rgb: 248, 113, 113;
    --u-up: #55657f;        --u-up-rgb: 85, 101, 127;
    --u-f1: #f87171; --u-f2: #fb923c; --u-f3: #94a3b8; --u-f4: #a3e635; --u-f5: #4ade80;

    --u-z1: #38bdf8;
    --u-z2: #4ade80;
    --u-z3: #fbbf24;
    --u-z4: #fb923c;
    --u-z5: #fb7185;
    --u-zg: #8493ad;

    --u-btn-from: #38bdf8;
    --u-btn-to: #a78bfa;
    --u-btn-ink: #04111d;

    --u-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --u-shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
}

/* ── 2. Bootstrap 5.3 variables ──────────────────────────────────────────────────────────────── */

:root,
[data-bs-theme="light"] {
    --bs-body-bg: #eef2f9;
    --bs-body-bg-rgb: 238, 242, 249;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-secondary-bg: #e6ebf5;
    --bs-secondary-bg-rgb: 230, 235, 245;
    --bs-tertiary-bg: #f4f7fc;
    --bs-tertiary-bg-rgb: 244, 247, 252;
    --bs-border-color: rgba(15, 23, 42, .14);
    --bs-border-color-translucent: rgba(15, 23, 42, .09);

    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-focus-ring-color: rgba(37, 99, 235, .25);

    --bs-border-radius: .6rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .9rem;
    --bs-border-radius-xl: 1.2rem;
    --bs-border-radius-xxl: 1.6rem;

    --bs-box-shadow-sm: 0 2px 10px rgba(15, 23, 42, .07);
    --bs-box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
    --bs-box-shadow-lg: 0 18px 44px rgba(15, 23, 42, .16);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #060a14;
    --bs-body-bg-rgb: 6, 10, 20;
    --bs-body-color: #e8eef9;
    --bs-body-color-rgb: 232, 238, 249;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(232, 238, 249, .72);
    --bs-secondary-color-rgb: 232, 238, 249;
    --bs-secondary-bg: #0e1527;
    --bs-secondary-bg-rgb: 14, 21, 39;
    --bs-tertiary-bg: #0a1020;
    --bs-tertiary-bg-rgb: 10, 16, 32;
    --bs-border-color: rgba(148, 163, 184, .22);
    --bs-border-color-translucent: rgba(148, 163, 184, .16);

    --bs-link-color: #7dd3fc;
    --bs-link-color-rgb: 125, 211, 252;
    --bs-link-hover-color: #bae6fd;
    --bs-link-hover-color-rgb: 186, 230, 253;
    --bs-focus-ring-color: rgba(56, 189, 248, .3);

    --bs-box-shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
    --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    --bs-box-shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
}

.card {
    --bs-card-bg: var(--u-card);
    --bs-card-border-color: var(--u-edge);
    --bs-card-cap-bg: var(--u-card-2);
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    box-shadow: var(--u-shadow);
}
.card .card { box-shadow: none; }     /* a card inside a card sits flat */

.btn {
    --bs-btn-border-radius: .7rem;
    --bs-btn-font-weight: 600;
}
.btn-sm { --bs-btn-border-radius: .55rem; }
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
    background-image: linear-gradient(135deg, #2563eb, #4f46e5);
}
.btn-primary:hover,
.btn-primary:focus-visible { background-image: linear-gradient(135deg, #1d4ed8, #4338ca); }
.btn-primary:disabled,
.btn-primary.disabled { background-image: none; }

.form-control,
.form-select {
    --bs-border-color: var(--u-edge-strong);
    background-color: var(--u-card);
}
.form-control:focus,
.form-select:focus { border-color: #60a5fa; }

.dropdown-menu {
    --bs-dropdown-border-radius: .9rem;
    --bs-dropdown-inner-border-radius: calc(.9rem - 1px);
    --bs-dropdown-border-color: var(--u-edge);
    --bs-dropdown-box-shadow: var(--u-shadow-lg);
    --bs-dropdown-link-active-bg: #2563eb;
}
.dropdown-menu-dark {
    --bs-dropdown-bg: #0f1730;
    --bs-dropdown-border-color: rgba(56, 189, 248, .2);
    --bs-dropdown-link-hover-bg: rgba(56, 189, 248, .12);
}

.modal {
    --bs-modal-border-radius: 20px;
    --bs-modal-inner-border-radius: 19px;
    --bs-modal-border-width: 0px;
    --bs-modal-box-shadow: 0 24px 70px rgba(2, 6, 23, .4);
    --bs-modal-bg: var(--u-card);
}

.alert { --bs-alert-border-radius: .85rem; }
.progress { --bs-progress-border-radius: 999px; }

.table {
    --bs-table-hover-bg: rgba(37, 99, 235, .06);
    --bs-table-striped-bg: rgba(15, 23, 42, .03);
}
[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(96, 165, 250, .09);
    --bs-table-striped-bg: rgba(148, 163, 184, .06);
}

/* Thai has tall tone marks above and below the line; Bootstrap's 1.5 clips them in tight rows. */
html[lang="th"] body { line-height: 1.65; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6 { line-height: 1.4; }
html[lang="th"] .btn { line-height: 1.5; }

/* ── 3. chrome ───────────────────────────────────────────────────────────────────────────────── */

.navbar.navbar-dark.bg-dark {
    background-image: linear-gradient(135deg, var(--u-hero-a) 0%, var(--u-hero-b) 60%, var(--u-hero-c) 100%);
    border-bottom: 1px solid rgba(56, 189, 248, .22) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}
.navbar .navbar-brand .bi-activity { color: #d8ff54 !important; }

footer.border-top { border-color: var(--u-edge) !important; }

/* the EN | TH switch in the navbar */
.u-lang {
    display: inline-flex; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.u-lang a { padding: 3px 10px; color: #c7d2e6; text-decoration: none; }
.u-lang a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.u-lang a.is-on { color: #fff; background: linear-gradient(90deg, #2563eb, #4f46e5); }

/* ── 4. components ───────────────────────────────────────────────────────────────────────────── */

.u-tnum { font-variant-numeric: tabular-nums; }

.u-section-title {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--u-dim);
}

/* a plain card of the new look, for hand-built pages */
.u-card {
    background: var(--u-card);
    border: 1px solid var(--u-edge);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow);
    color: var(--u-ink);
}

/* hero: the dashboard's greeting card, a little larger; navy in both themes */
.u-hero {
    position: relative; overflow: hidden;
    padding: 18px 18px 16px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(56, 189, 248, .28), transparent 55%),
        linear-gradient(135deg, var(--u-hero-a) 0%, var(--u-hero-b) 60%, var(--u-hero-c) 100%);
    box-shadow: 0 10px 30px rgba(15, 52, 96, .35);
}
.u-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-hero__main { min-width: 0; }
.u-hero__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--u-hero-dim); }
.u-hero__title { margin: 2px 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.u-hero__sub { color: var(--u-hero-dim); font-size: .85rem; }
/* Thai is not spaced out or put in capitals (letter-spacing pulls the vowels and tone marks of a word apart) */
:lang(th) :is(.u-hero__eyebrow, .u-section-title, .u-race-tile small, .u-ring__label small) { letter-spacing: normal; text-transform: none; }
.u-hero__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.u-hero__nav .u-btn-ghost { flex: 1 1 120px; }

.u-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}
.u-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* 26 Oct 2026 (#430): the way back — the same chip at the top left of every page under the menus (Views/Shared/_BackChip) */
.u-backbar { margin: -4px 0 12px; }
.u-back {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    min-height: 38px; padding: 7px 14px 7px 11px; border-radius: 999px;
    font-size: .88rem; font-weight: 600; line-height: 1.2; text-decoration: none;
    color: var(--u-ink); background: var(--u-card); border: 1px solid var(--u-edge);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.u-back:hover, .u-back:focus-visible { color: var(--u-ink); border-color: var(--u-edge-strong); background: var(--u-card-2); }
.u-back:focus-visible { outline: 2px solid var(--u-edge-strong); outline-offset: 2px; }
.u-back .bi { font-size: 1rem; flex: none; }
.u-back__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.u-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.u-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
}
.u-chip--lime  { color: #d8ff54; }
.u-chip--cyan  { color: #7dd3fc; }
.u-chip--amber { color: #fcd34d; }
.u-chip--coral { color: #ff9b80; }
.u-chip--pink  { color: #f9a8d4; }

/* ring: progress of the week, drawn by an inline svg (r=35, circumference 220) */
.u-ring { position: relative; flex: none; width: 84px; height: 84px; }
.u-ring svg { display: block; transform: rotate(-90deg); }
.u-ring__track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 7; }
.u-ring__bar { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 220; }
.u-ring__label {
    position: absolute; inset: 0;
    display: grid; place-content: center; text-align: center;
    font-size: 1.2rem; font-weight: 800; line-height: 1.05; color: #fff;
    font-variant-numeric: tabular-nums;
}
.u-ring__label small { display: block; margin-top: 2px; font-size: .53rem; font-weight: 600; letter-spacing: .04em; color: var(--u-hero-dim); }

/* the seven days of the week as a strip of dots */
.u-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.u-dot {
    --c: var(--u-up); --c-rgb: var(--u-up-rgb);
    padding: 8px 0 7px;
    text-align: center;
    border-radius: 14px;
    background: var(--u-card);
    border: 1px solid var(--u-edge);
}
.u-dot__ic {
    display: grid; place-items: center;
    width: 32px; height: 32px; margin: 0 auto 4px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--c);
    background: rgba(var(--c-rgb), .16);
    border: 1px solid rgba(var(--c-rgb), .38);
}
.u-dot__lbl { font-size: .66rem; color: var(--u-dim); }
.u-dot__sport { display: block; width: 6px; height: 6px; margin: 4px auto 0; border-radius: 50%; background: var(--u-up); }
.u-dot__sport[data-sport="run"]  { background: var(--u-run); }
.u-dot__sport[data-sport="bike"] { background: var(--u-bike); }
.u-dot__sport[data-sport="swim"] { background: var(--u-swim); }
.u-dot__sport[data-sport="other"] { background: var(--u-other); }
.u-dot.is-wait { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); }
.u-dot.is-rest { --c: var(--u-rest); --c-rgb: var(--u-rest-rgb); }
.u-dot.is-free { --c: var(--u-free); --c-rgb: var(--u-free-rgb); }
.u-dot.is-done { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.u-dot.is-part { --c: var(--u-part); --c-rgb: var(--u-part-rgb); }
.u-dot.is-miss { --c: var(--u-bad); --c-rgb: var(--u-bad-rgb); }
.u-dot.is-today { --c: var(--u-today); --c-rgb: var(--u-today-rgb); border-color: rgba(var(--u-today-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--u-today-rgb), .35); }
.u-dot.is-done .u-dot__ic,
.u-dot.is-part .u-dot__ic,
.u-dot.is-miss .u-dot__ic,
.u-dot.is-today .u-dot__ic { color: #fff; background: var(--c); border-color: transparent; }
[data-bs-theme="dark"] .u-dot.is-done .u-dot__ic,
[data-bs-theme="dark"] .u-dot.is-part .u-dot__ic,
[data-bs-theme="dark"] .u-dot.is-miss .u-dot__ic,
[data-bs-theme="dark"] .u-dot.is-today .u-dot__ic { color: #04111d; }

.u-progress { height: 6px; border-radius: 999px; background: var(--u-edge-strong); overflow: hidden; }
.u-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--u-cyan), var(--u-run)); }

/* banners: a coloured message strip; --c / --c-rgb come from the modifier */
.u-banner {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--u-ink);
    background: rgba(var(--c-rgb), .10);
    border: 1px solid rgba(var(--c-rgb), .32);
}
.u-banner__ic { flex: none; font-size: 1.1rem; line-height: 1.35; color: var(--c); }
.u-banner__title { font-size: .82rem; font-weight: 700; color: var(--c); }
.u-banner--info { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.u-banner--warn { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
.u-banner--bad  { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.u-banner--ok   { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
.u-banner--rest { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-banner--stack { flex-direction: column; align-items: stretch; gap: 8px; }
/* 26 Oct 2026 (#397): a button in a banner keeps its own colours ("Log it" was the banner's orange on the button's green) */
.u-banner a:not(.btn) { color: var(--c); font-weight: 600; text-decoration: none; }

/* race countdown: the colour says how near it is */
.u-countdown {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .18);
}
.u-countdown[data-level="now"]  { background: linear-gradient(135deg, #e11d48, #be123c); }
.u-countdown[data-level="soon"] { background: linear-gradient(135deg, #ea580c, #c2410c); }
.u-countdown[data-level="week"] { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1c1203; }
.u-countdown[data-level="far"]  { background: linear-gradient(135deg, #2563eb, #4f46e5); }

/* stat tiles */
.u-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.u-stat {
    --c: var(--u-ink); --c-rgb: 100, 116, 139;
    flex: 1 1 92px; max-width: 220px;
    padding: 10px 12px;
    text-align: center;
    border-radius: 14px;
    background: var(--u-card);
    border: 1px solid var(--u-edge);
}
.u-stat b { display: block; font-size: 1.15rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.u-stat b small { font-size: .7rem; font-weight: 500; color: var(--u-dim); }
.u-stat span { display: block; font-size: .72rem; color: var(--u-dim); }
.u-stat--sport,
.u-stat--done { background: rgba(var(--c-rgb), .11); border-color: rgba(var(--c-rgb), .34); }
.u-stat--sport b,
.u-stat--done b { color: var(--c); }
.u-stat--done { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.u-stat[data-sport="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-stat[data-sport="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
.u-stat[data-sport="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
.u-stat[data-sport="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
/* a tile of a state (completed, missed, skipped...): the number takes the colour, the tile its tint */
.u-stat[data-tone] { background: rgba(var(--c-rgb), .11); border-color: rgba(var(--c-rgb), .34); }
.u-stat[data-tone] b { color: var(--c); }
.u-stat[data-tone="done"]  { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
.u-stat[data-tone="bad"]   { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.u-stat[data-tone="part"]  { --c: var(--u-part);  --c-rgb: var(--u-part-rgb); }
.u-stat[data-tone="wait"]  { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
.u-stat[data-tone="up"]    { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-stat[data-tone="today"] { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
/* a tile that is also a filter (Team Progress Board and Field Estimates, 11 Oct 2026; /js/board-filter.js): a <button> that looks like the tile, and the one in use is ringed in its own colour */
button.u-stat { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
button.u-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--c-rgb), .2); }
button.u-stat:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
button.u-stat[aria-pressed="true"] { background: rgba(var(--c-rgb), .2); border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
@media (prefers-reduced-motion: reduce) {
    button.u-stat { transition: none; }
    button.u-stat:hover { transform: none; }
}

/* badges: sport and state, readable in both themes */
.u-badge {
    --c: var(--u-dim); --c-rgb: 100, 116, 139;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
    color: var(--c);
    background: rgba(var(--c-rgb), .14);
    border: 1px solid rgba(var(--c-rgb), .4);
}
.u-badge[data-tone="run"]    { --c: var(--u-run);    --c-rgb: var(--u-run-rgb); }
.u-badge[data-tone="bike"]   { --c: var(--u-bike);   --c-rgb: var(--u-bike-rgb); }
.u-badge[data-tone="swim"]   { --c: var(--u-swim);   --c-rgb: var(--u-swim-rgb); }
.u-badge[data-tone="other"]  { --c: var(--u-other);  --c-rgb: var(--u-other-rgb); }
.u-badge[data-tone="race"]   { --c: var(--u-race);   --c-rgb: var(--u-race-rgb); }
.u-badge[data-tone="free"]   { --c: var(--u-free);   --c-rgb: var(--u-free-rgb); }
.u-badge[data-tone="wait"]   { --c: var(--u-wait);   --c-rgb: var(--u-wait-rgb); }
.u-badge[data-tone="done"]   { --c: var(--u-done);   --c-rgb: var(--u-done-rgb); }
.u-badge[data-tone="bad"]    { --c: var(--u-bad);    --c-rgb: var(--u-bad-rgb); }
.u-badge[data-tone="rest"]   { --c: var(--u-rest);   --c-rgb: var(--u-rest-rgb); }
.u-badge[data-tone="today"]  { --c: var(--u-today);  --c-rgb: var(--u-today-rgb); }
.u-badge[data-tone="part"]   { --c: var(--u-part);   --c-rgb: var(--u-part-rgb); }
.u-badge[data-tone="up"]     { --c: var(--u-up);     --c-rgb: var(--u-up-rgb); }
.u-badge[data-tone="note"]   { --c: var(--u-note);   --c-rgb: var(--u-note-rgb); }
.u-badge--solid { color: #fff; background: var(--c); border-color: transparent; }
[data-bs-theme="dark"] .u-badge--solid { color: #04111d; }

/* a day of the training week: the tint says which sport / what kind of day */
.u-day {
    --c: var(--u-up); --c-rgb: var(--u-up-rgb);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(var(--c-rgb), .3);
    background:
        radial-gradient(90% 60% at 0% 0%, rgba(var(--c-rgb), .13), transparent 62%),
        var(--u-card);
    box-shadow: var(--u-shadow);
}
.u-day[data-kind="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-day[data-kind="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
.u-day[data-kind="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
.u-day[data-kind="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
.u-day[data-kind="rest"]  { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-day[data-kind="free"]  { --c: var(--u-free);  --c-rgb: var(--u-free-rgb); }
.u-day[data-kind="race"]  { --c: var(--u-race);  --c-rgb: var(--u-race-rgb); }
.u-day[data-kind="wait"]  { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); border-style: dashed; opacity: .94; }
.u-day.is-today { box-shadow: 0 0 0 1.5px var(--c), 0 10px 34px rgba(var(--c-rgb), .26); }
/* 16 Oct 2026, the owner: a race day stands out across the whole week — a race-red frame, a tinted header and a ribbon (also when the race is Session 2) */
.u-day[data-kind="race"] {
    border: 2px solid var(--u-race);
    box-shadow: 0 0 0 3px rgba(var(--u-race-rgb), .18), 0 10px 30px rgba(var(--u-race-rgb), .28);
    border-style: solid; opacity: 1;
}
.u-day[data-kind="race"] > .card-header { background: linear-gradient(90deg, rgba(var(--u-race-rgb), .24), rgba(var(--u-race-rgb), .05)); }
.u-race-ribbon {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--u-race); color: #fff;
    font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(var(--u-race-rgb), .45);
    animation: u-race-pulse 2.2s ease-in-out infinite;
}
:lang(th) .u-race-ribbon { letter-spacing: normal; text-transform: none; }
@keyframes u-race-pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(var(--u-race-rgb), .45); } 50% { box-shadow: 0 2px 18px rgba(var(--u-race-rgb), .8); } }
@media (prefers-reduced-motion: reduce) { .u-race-ribbon { animation: none; } }
.u-day > .card-header { background: transparent; border-bottom: 1px solid rgba(var(--c-rgb), .2); }
.u-day > .card-footer { background: transparent; border-top: 1px solid rgba(var(--c-rgb), .2); }
.u-day .u-day__date { color: var(--u-ink); }
.u-day.is-today .u-day__date { color: var(--c); }
.u-day__name { font-weight: 700; }
.u-day__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 3px; font-size: .72rem; color: var(--u-dim); line-height: 1.4; }
.u-day__sub .u-day__title { font-weight: 600; color: var(--u-ink); }
/* 22 Oct 2026 (#277, the owner: "icon ควรจะไปอยู่หน้าชื่อคอร์ส"): the sport's icon before the session's name, in the sport's colour */
.u-day__ic { margin-right: 5px; color: var(--u-dim); }
.u-day__ic.si-run { color: var(--u-run); } .u-day__ic.si-bike { color: var(--u-bike); } .u-day__ic.si-swim { color: var(--u-swim); } .u-day__ic.si-other { color: var(--u-other); }
.u-day__plan { color: var(--u-cyan); font-weight: 600; }
.u-day__actual { color: var(--u-done); font-weight: 600; }
.u-day__hint { color: var(--u-amber); font-weight: 600; }
/* 22 Oct 2026 (#282): My Week's session card like the Schedule — the course a title on its own line (first), the plan's facts after it as chips */
.u-day__sub .u-day__title { flex-basis: 100%; order: -1; font-weight: 800; font-size: .92rem; line-height: 1.35; }
.u-day__sub .u-day__plan, .u-day__sub .u-day__actual { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: .74rem;
                                                       background: var(--u-card); border: 1px solid var(--u-edge); white-space: nowrap; }

/* a quiet box inside a day (race tap target, other activity, coach feedback) */
.u-note-box {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
    padding: 10px 12px;
    border-radius: 14px;
    font-size: .8rem;
    color: var(--u-ink);
    background: rgba(var(--c-rgb), .09);
    border: 1px solid rgba(var(--c-rgb), .3);
}
.u-note-box.race-card-hover { transition: background .15s; }
.u-note-box.race-card-hover:hover { background: rgba(var(--c-rgb), .18); }
.u-note-box[data-tone="race"]  { --c: var(--u-race);  --c-rgb: var(--u-race-rgb); }
.u-note-box[data-tone="bad"]   { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.u-note-box[data-tone="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
.u-note-box[data-tone="info"]  { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.u-note-box[data-tone="done"]  { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
.u-note-box[data-tone="wait"]  { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
.u-note-box[data-tone="rest"]  { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-note-box[data-tone="free"]  { --c: var(--u-free);  --c-rgb: var(--u-free-rgb); }
.u-note-box[data-tone="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-note-box[data-tone="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
.u-note-box[data-tone="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }

/* the strip that opens Session 2, 3 ... inside a day card: a tint and a rule on top, in the colour of what it is
   (planned = blue, brick = orange, a session the athlete logged herself = green) */
.u-subhead {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
    border-top: 2px solid var(--c);
    background: linear-gradient(180deg, rgba(var(--c-rgb), .13), rgba(var(--c-rgb), .05));
}
.u-subhead[data-tone="part"] { --c: var(--u-part); --c-rgb: var(--u-part-rgb); }
.u-subhead[data-tone="done"] { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
/* 16 Oct 2026: the Athletes list on a phone — the search takes the row, each athlete is a tall row that is easy to tap */
.ath-search { max-width: 320px; }
@media (max-width: 767.98px) {
    .ath-search { max-width: none; width: 100%; }
    .ath-table > tbody > tr > td { padding-top: .85rem; padding-bottom: .85rem; }
    .ath-table > thead > tr > th { white-space: nowrap; }
}
/* 16 Oct 2026 (audit A9): a tinted pill (Review's fuel and weigh-in pills) and a tinted table row (the "intervals cut from the 1-second data" table):
   the colour comes from a tone, so both follow the night switch without a typed colour */
.u-pill {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .55rem; border-radius: 999px;
    color: var(--u-ink);
    background: rgba(var(--c-rgb), .12);
    border: 1px solid rgba(var(--c-rgb), .38);
}
.u-tint-row { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.u-tint-row > td { background: rgba(var(--c-rgb), .08); }
:is(.u-pill, .u-tint-row)[data-tone="done"]  { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="part"]  { --c: var(--u-part);  --c-rgb: var(--u-part-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="wait"]  { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="bad"]   { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="rest"]  { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="race"]  { --c: var(--u-race);  --c-rgb: var(--u-race-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
:is(.u-pill, .u-tint-row)[data-tone="note"]  { --c: var(--u-note);  --c-rgb: var(--u-note-rgb); }
.u-subhead[data-tone="race"] { --c: var(--u-race); --c-rgb: var(--u-race-rgb); border-top-width: 3px; }

/* the morning check-in */
.u-checkin { padding: 14px 16px; }
.u-checkin[data-state="todo"] {
    border-color: rgba(var(--u-wait-rgb), .5);
    background: linear-gradient(180deg, rgba(var(--u-wait-rgb), .09), transparent 70%), var(--u-card);
}
.u-checkin[data-state="done"] { border-color: rgba(var(--u-done-rgb), .45); }
.u-checkin .btn-group .btn {
    border-color: var(--u-edge-strong);
    color: var(--u-ink);
    background: var(--u-card-2);
}
.u-checkin .btn-check:checked + .btn {
    background: rgba(var(--u-today-rgb), .16);
    border-color: var(--u-today);
    box-shadow: 0 0 0 1px var(--u-today) inset;
}

/* ── 5. detail pages (Session Detail, Log): sport hero, workout steps ─────────────────────────── */

/* the hero takes the colour of the sport: only the glow changes, the navy stays */
.u-hero[data-sport] {
    --c: var(--u-up); --c-rgb: var(--u-up-rgb);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--c-rgb), .42), transparent 58%),
        linear-gradient(135deg, var(--u-hero-a) 0%, var(--u-hero-b) 60%, var(--u-hero-c) 100%);
}
.u-hero[data-sport="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-hero[data-sport="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
.u-hero[data-sport="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
.u-hero[data-sport="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }

/* the round badge on the right of a hero: the sport's icon, or a check once the session is done */
.u-hero__state {
    flex: none;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    font-size: 1.55rem; line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
}
.u-hero[data-sport] .u-hero__state { background: rgba(var(--c-rgb), .26); border-color: rgba(var(--c-rgb), .55); }
.u-hero .u-hero__state[data-state="done"] { color: #052e16; background: linear-gradient(135deg, #d8ff54, #4ade80); border-color: transparent; }
.u-hero__nav--start .u-btn-ghost,
.u-hero__nav--tight .u-btn-ghost { flex: 0 0 auto; }
.u-hero__nav--tight { gap: 6px; }
.u-btn-ghost.is-on { color: #fff; background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .45); }
.u-btn-ghost.is-disabled { opacity: .4; pointer-events: none; }
.u-hero__em { color: #7dd3fc; font-weight: 600; }

/* Bootstrap's dark outline button is dark on dark in night mode: give it the page ink */
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--u-ink);
    --bs-btn-border-color: var(--u-edge-strong);
    --bs-btn-hover-color: #04111d;
    --bs-btn-hover-bg: var(--u-ink);
    --bs-btn-hover-border-color: var(--u-ink);
    --bs-btn-active-color: #04111d;
    --bs-btn-active-bg: var(--u-ink);
    --bs-btn-active-border-color: var(--u-ink);
}

/* Night mode: Bootstrap's other outline buttons keep the hue of the light theme, which is dim on a dark card (blue about 3.9:1, grey 3.5:1).
   They take the bright shade of the same hue. This comes BEFORE the page head (section 8), whose ghost buttons must win on a navy row. */
[data-bs-theme="dark"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-info) {
    --bs-btn-color: rgb(var(--oc-rgb)); --bs-btn-border-color: rgba(var(--oc-rgb), .55);
    --bs-btn-hover-color: #04111d; --bs-btn-hover-bg: rgb(var(--oc-rgb)); --bs-btn-hover-border-color: rgb(var(--oc-rgb));
    --bs-btn-active-color: #04111d; --bs-btn-active-bg: rgb(var(--oc-rgb)); --bs-btn-active-border-color: rgb(var(--oc-rgb));
    --bs-btn-disabled-color: rgba(var(--oc-rgb), .5); --bs-btn-disabled-border-color: rgba(var(--oc-rgb), .3);
}
[data-bs-theme="dark"] .btn-outline-primary   { --oc-rgb: 125, 211, 252; }
[data-bs-theme="dark"] .btn-outline-secondary { --oc-rgb: 182, 194, 214; }
[data-bs-theme="dark"] .btn-outline-success   { --oc-rgb: 134, 239, 172; }
[data-bs-theme="dark"] .btn-outline-warning   { --oc-rgb: 252, 211, 77; }
[data-bs-theme="dark"] .btn-outline-danger    { --oc-rgb: 253, 164, 175; }
[data-bs-theme="dark"] .btn-outline-info      { --oc-rgb: 125, 211, 252; }

/* a workout step: the bar on the left says what KIND of step it is; the zone chip keeps the UTLC zone colour */
.u-steps { display: flex; flex-direction: column; gap: 8px; }
.u-step {
    --c: var(--u-rest); --c-rgb: var(--u-rest-rgb);
    position: relative;
    padding: 10px 14px 10px 18px;
    border-radius: 14px;
    background: var(--u-card);
    border: 1px solid var(--u-edge);
    box-shadow: var(--u-shadow);
    color: var(--u-ink);
}
.u-step::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--c);
}
.u-step[data-step="Warmup"]     { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
.u-step[data-step="Cooldown"]   { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
.u-step[data-step="Interval"]   { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.u-step[data-step="Recovery"]   { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
.u-step[data-step="Continuous"] { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.u-step[data-step="Drill"]      { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
.u-step[data-step="Jog"]        { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-step[data-step="Rest"]       { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-step--sm { padding: 7px 10px 7px 15px; border-radius: 12px; box-shadow: none; }
.u-step--sm::before { top: 7px; bottom: 7px; }
.u-step--child { margin-left: 14px; }
.u-step__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.u-step__type {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 74px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    color: var(--c);
    background: rgba(var(--c-rgb), .14);
    border: 1px solid rgba(var(--c-rgb), .4);
}
.u-step__dur { font-weight: 700; font-variant-numeric: tabular-nums; }
.u-step__target { font-weight: 700; color: var(--u-cyan); }
.u-step__note { margin-top: 4px; font-size: .78rem; line-height: 1.4; color: var(--u-dim); }
.u-zone {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
    color: #fff;
    background: var(--zc, var(--u-rest));
}

/* repeat block: the steps of one set, framed */
.u-repeat {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
    overflow: hidden;
    border-radius: 16px;
    border: 1.5px solid rgba(var(--c-rgb), .55);
    background: rgba(var(--c-rgb), .05);
}
.u-repeat__head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 8px 14px;
    font-weight: 700; color: var(--c);
    background: rgba(var(--c-rgb), .12);
    border-bottom: 1px solid rgba(var(--c-rgb), .3);
}
.u-repeat__head .u-step__type { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.u-repeat__head .u-step__note { margin: 0; font-weight: 500; }
.u-repeat__body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.u-repeat__body .u-step { box-shadow: none; }
/* 22 Oct 2026 (#280 / #282): a plan's steps on the Schedule and My Week (Views/Shared/_PlanSteps) — Session Detail's steps, a little tighter */
.u-steps--plan { gap: 5px; }
.u-steps--plan .u-step--sm { padding: 6px 8px 6px 13px; border-radius: 10px; box-shadow: none; }
.u-steps--plan .u-step--sm::before { top: 6px; bottom: 6px; }
.u-steps--plan .u-step__row { gap: 4px 8px; font-size: .84rem; }
.u-steps--plan .u-step__type { min-width: 66px; padding: 1px 8px; font-size: .72rem; }
.u-steps--plan .u-step__dur { font-weight: 800; }
.u-steps--plan .u-zone { padding: 1px 8px; font-size: .7rem; }
.u-steps--plan .u-step__target { white-space: nowrap; }
.u-steps--plan .u-step__range { font-size: .75rem; color: var(--u-dim); white-space: nowrap; }
.u-steps--plan .u-step__note { font-size: .76rem; margin-top: 2px; }
.u-steps--plan .u-repeat__head { padding: 5px 10px; font-size: .82rem; }
.u-steps--plan .u-repeat__body { padding: 6px; gap: 5px; }
.u-steps--plan .heat-adj { font-size: .75rem; }
/* #280: a Schedule day's facts as chips, the course as the title */
.sch-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap;
            color: var(--u-ink); background: var(--u-card); border: 1px solid var(--u-edge); }
.sch-title { font-weight: 800; font-size: .92rem; line-height: 1.35; color: var(--u-ink); }
/* #280: Team Week's athlete card — readiness and the check-in as chips, a plan ring, one bar for the week, the week as sport tiles, the day's line */
.tw-chip { --c: var(--u-dim); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--c);
           background: rgba(100, 116, 139, .1); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); }
.tw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, currentColor); flex: none; vertical-align: 0; }   /* the colour of its chip or button (--c) */
.tw-wl { display: inline-flex; flex-wrap: wrap; gap: 4px; cursor: pointer; }
.tw-wl .feel-chip, .feel-chip.wellness-badge { font-size: .7rem; padding: 1px 8px 1px 4px; cursor: pointer; }
.tw-plan { --p: 0%; --c: var(--u-rest); flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tw-plan__ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) var(--p), var(--u-edge-strong) 0); }
.tw-plan__ring b { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--u-card); font-size: .82rem; color: var(--u-ink); white-space: nowrap; }
.tw-plan__ring b small { font-size: .6rem; color: var(--u-dim); font-weight: 600; }
.tw-plan__ring .bi { color: var(--c); font-size: 1.1rem; }
.tw-plan > span { font-size: .62rem; color: var(--u-dim); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.tw-prog { margin-bottom: .55rem; }
.tw-prog__top { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; margin-bottom: 4px; }
.tw-prog__top b { font-size: .92rem; }
.tw-bar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--u-edge); }
.tw-bar i { display: block; }
.tw-bar i[data-k="done"] { background: var(--u-done); }
.tw-bar i[data-k="missed"] { background: var(--u-bad); }
.tw-bar i[data-k="up"] { background: repeating-linear-gradient(45deg, rgba(var(--u-today-rgb), .45) 0 4px, rgba(var(--u-today-rgb), .2) 4px 8px); }
.tw-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px; font-size: .76rem; color: var(--u-dim); }
.tw-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tw-legend .k-done { color: var(--u-done); font-weight: 700; }
.tw-legend .k-bad  { color: var(--u-bad);  font-weight: 700; }
.tw-legend .k-up   { color: var(--u-today); font-weight: 700; }
.tw-legend .k-wait { color: var(--u-wait); font-weight: 700; }
.tw-sports { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tw-sport__n { font-variant-numeric: tabular-nums; }   /* #285: "Bike 2/4" = trained / planned */

/* #287: the window of a ring on the Home's "Today's team" — the week as Team Week's tiles, today's sessions (Views/Home/_AthleteDayPop) */
.ad-pop__dialog { max-width: 520px; }
.ad-pop { display: grid; gap: 16px; }
.ad-pop__h { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: .85rem; color: var(--u-ink); margin-bottom: 8px; }
.ad-pop__h small { color: var(--u-dim); font-weight: 600; }
.ad-pop__h b { margin-left: auto; font-size: .78rem; color: var(--u-dim); font-variant-numeric: tabular-nums; }
.ad-pop .tw-week { margin-bottom: 0; }
.ad-pop .tw-day small { font-weight: 600; opacity: .75; }
.ad-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--u-edge); border-radius: 12px; background: var(--u-card); }
.ad-row + .ad-row { margin-top: 6px; }
.ad-row__ic { --c: var(--u-other); --c-rgb: var(--u-other-rgb); flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
              font-size: 18px; color: var(--c); background: rgba(var(--c-rgb), .14); }
.ad-row__ic[data-tone="run"]  { --c: var(--u-run);  --c-rgb: var(--u-run-rgb); }
.ad-row__ic[data-tone="bike"] { --c: var(--u-bike); --c-rgb: var(--u-bike-rgb); }
.ad-row__ic[data-tone="swim"] { --c: var(--u-swim); --c-rgb: var(--u-swim-rgb); }
.ad-row__ic[data-tone="free"] { --c: var(--u-free); --c-rgb: var(--u-free-rgb); }
.ad-row__ic[data-tone="race"] { --c: var(--u-race); --c-rgb: var(--u-race-rgb); }
.ad-row[data-st="done"] .ad-row__ic { color: var(--u-on-solid); background: var(--c); }
.ad-row__main { flex: 1 1 auto; min-width: 0; }
.ad-row__nm { font-weight: 700; font-size: .88rem; line-height: 1.3; color: var(--u-ink); overflow-wrap: anywhere; }
.ad-row__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ad-row__chips .u-zone { padding: 1px 8px; font-size: .7rem; }
.ad-row__st { flex: none; display: grid; gap: 4px; justify-items: end; text-align: right; font-size: .75rem; font-weight: 700; color: var(--u-dim); }
.ad-row[data-st="done"] .ad-row__st { color: var(--u-done); }
.ad-row[data-st="returned"] .ad-row__st { color: var(--u-bad); }
.ad-row[data-st="race"] .ad-row__st { color: var(--u-race); }
.ad-brick { margin: 4px 0 4px 46px; font-size: .72rem; font-weight: 700; color: var(--u-part); }
.ad-empty { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-weight: 600; color: var(--u-dim); }
.ad-pop__links { display: flex; flex-wrap: wrap; gap: 6px; }

/* #289: Review's Plan card — the course in its head with the planned time and pace, the planned zones as a thin bar and zone pills */
.rv-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.rv-head__k { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--u-dim); }
.rv-head__t { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: .92rem; color: var(--u-ink); overflow-wrap: anywhere; }
.rv-zones { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--u-edge); display: grid; gap: 6px; }
.rv-zones__k { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--u-dim); }
.rv-zones__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--u-edge); }
.rv-zones__bar i { display: block; }
.rv-zones__list { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rv-zones__z { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: var(--u-dim); font-variant-numeric: tabular-nums; }
.rv-zones__z .u-zone { padding: 1px 8px; font-size: .7rem; }

/* #295: what the wearable says about today (Garmin / WHOOP), one line per source, in the check-in and the wellness window */
.ck-wear { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px;
           font-size: .78rem; color: var(--u-dim); background: var(--u-card-2); border: 1px solid var(--u-edge); }
.ck-wear b { color: var(--u-ink); }
.ck-wear > span { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.ck-wear[data-source="whoop"] > .bi-watch { color: #16a34a; }
.ck-wear[data-source="garmin"] > .bi-watch { color: #007cc3; }
.ck-wear .ck-wear__warn { color: var(--u-amber); font-weight: 700; }   /* #307: the skin temperature half a degree up */
.ck-wear-note { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; font-size: .75rem; color: var(--u-dim); }   /* #301 */

/* #297: how old the zones behind a session's targets are (Session Detail, under the plan's one line) */
.u-zone-age { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--u-dim); }
.u-zone-age[data-tone="old"] { color: var(--u-amber); font-weight: 600; }

/* #296 (the owner's "ล้าง inline style"): the inline styles Review and My Week repeated most, as classes. The 11 px floor above already made every
   inline 9 px and 10 px an 11 px, so the three sizes are one class; !important keeps the inline style's own precedence over .small and friends. */
.u-fs11 { font-size: 11px !important; }
.u-fs12 { font-size: 12px !important; }
.u-fs13 { font-size: 13px !important; }
.u-fs7r { font-size: .7rem !important; }
.u-fs8r { font-size: .8rem !important; }
.u-w500 { font-weight: 500; }
.u-eyebrow { font-size: 11px !important; letter-spacing: .04em; text-transform: uppercase; }
.u-via-strava { font-size: 11px !important; color: #fc4c02; margin-top: 2px; }
.u-num { font-size: 1.2rem !important; line-height: 1.1; }
.u-shrink0 { flex-shrink: 0; }

/* #290 (UI audit 5): a card header tinted by a tone, in place of a typed pastel (Race Checklist's parts); both themes */
.card > .card-header.u-tinthead { --c: var(--u-today); --c-rgb: var(--u-today-rgb); background: rgba(var(--c-rgb), .12); border-bottom-color: rgba(var(--c-rgb), .26); }
.u-tinthead[data-tone="done"] { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.u-tinthead[data-tone="part"] { --c: var(--u-part); --c-rgb: var(--u-part-rgb); }
.u-tinthead[data-tone="wait"] { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); }
.u-tinthead[data-tone="note"] { --c: var(--u-note); --c-rgb: var(--u-note-rgb); }

/* #290 (UI audit 6): Bootstrap's alerts (236 of them in 127 views) in the banner's look — a tint and an edge of a tone, the page's ink — so they
   follow the night switch; the markup is untouched (a view's text keeps its pieces for the Thai translator) */
.alert { --c: var(--u-today); --c-rgb: var(--u-today-rgb);
         --bs-alert-color: var(--u-ink); --bs-alert-bg: rgba(var(--c-rgb), .10); --bs-alert-border-color: rgba(var(--c-rgb), .32); --bs-alert-link-color: var(--c); }
.alert-success { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.alert-warning { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); }
.alert-danger  { --c: var(--u-bad);  --c-rgb: var(--u-bad-rgb); }
.alert-info, .alert-primary { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.alert-secondary, .alert-light, .alert-dark { --c: var(--u-rest); --c-rgb: var(--u-rest-rgb); }
.alert > .bi:first-child, .alert > :first-child > .bi:first-child { color: var(--c); }
.alert .alert-heading { color: var(--c); }

/* #290: no text under 11 px — the 9 and 10 px written into the older views (218 places) are lifted; SVG text keeps its size */
:not(text, tspan):is([style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"], [style*="font-size: 10px"]) { font-size: 11px !important; }

.tw-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: .55rem; }
.tw-day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .66rem; font-weight: 700; color: var(--u-dim); cursor: default; }
.tw-tile { --c: var(--u-rest); position: relative; width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; color: var(--c);
           border: 1.5px dashed var(--c); background: transparent; }
.tw-tile .si { width: 18px; height: 18px; }
.tw-tile .bi { font-size: 15px; line-height: 1; }
.tw-tile[data-s="done"]   { border: 0; background: var(--c); color: var(--u-on-solid); }
.tw-tile[data-s="part"]   { border: 1.5px solid var(--c); background: rgba(100, 116, 139, .1); background: color-mix(in srgb, var(--c) 18%, transparent); }
.tw-tile[data-s="missed"] { border: 1.5px solid var(--u-bad); background: rgba(var(--u-bad-rgb), .1); }
.tw-tile[data-s="missed"]::after { content: "\F62A"; font-family: bootstrap-icons; position: absolute; right: -5px; top: -6px; width: 15px; height: 15px; border-radius: 50%;
           background: var(--u-bad); color: #fff; font-size: 9px; line-height: 15px; text-align: center; }
.tw-tile[data-s="rest"]   { border: 0; background: rgba(var(--u-rest-rgb), .14); }
.tw-tile[data-s="race"]   { border: 1.5px solid var(--u-race); background: rgba(var(--u-race-rgb), .14); }
.tw-tile[data-s="none"]   { border-color: var(--u-edge-strong); }
/* #283: a day nobody planned yet (an hourglass, dotted, the colour of "Waiting"); a Free Style day that has a sport: a pink dot */
.tw-tile[data-s="wait"]   { border: 1.5px dotted var(--u-wait); color: var(--u-wait); background: rgba(var(--u-wait-rgb), .06); }
.tw-tile__f { position: absolute; left: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--u-free); box-shadow: 0 0 0 2px var(--u-card); }
.tw-tile__more { position: absolute; right: -4px; bottom: -5px; font-style: normal; font-size: .58rem; font-weight: 800; padding: 0 3px; border-radius: 6px;
                 background: var(--u-card); color: var(--u-ink); border: 1px solid var(--u-edge); }
.tw-tile .tw-dna-mark { position: absolute; left: -5px; top: -7px; }
.tw-day.is-today { color: var(--u-today); }
.tw-day.is-today .tw-tile { box-shadow: 0 0 0 2px var(--u-card), 0 0 0 4px var(--u-today); }
.tw-today { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; padding-top: 8px; margin-bottom: .4rem; border-top: 1px dashed var(--u-edge-strong); font-size: .8rem; color: var(--u-ink); }
.tw-today__k { font-weight: 800; color: var(--u-today); }
.tw-today__s { display: inline-flex; align-items: center; gap: 5px; }
/* the readiness filter: a dot of the band's colour, the name, the count; the chosen band filled */
.tf-btn { --c: var(--u-dim); display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
          color: var(--u-ink); background: var(--u-card); border: 1px solid var(--u-edge-strong); cursor: pointer; }
.tf-btn b { color: var(--c); }
.tf-btn.is-on { background: rgba(100, 116, 139, .14); background: color-mix(in srgb, var(--c) 16%, var(--u-card)); border-color: var(--c); }
/* the readiness bands are fixed colours made for a light page: by night their words are lightened */
[data-bs-theme="dark"] .tw-chip { color: color-mix(in srgb, var(--c) 55%, #fff); }
[data-bs-theme="dark"] .tf-btn b { color: color-mix(in srgb, var(--c) 55%, #fff); }

/* a "repeat x N" marker between the flat steps of a plan card (Log) */
.u-repeat-flag {
    --c: var(--u-wait); --c-rgb: var(--u-wait-rgb);
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--c-rgb), .7);
    background: rgba(var(--c-rgb), .1);
}

/* ── 6. effort profile: the bars of a planned session (My Week, Session Detail, Log) ───────────── */

/* one bar per step: as wide as it lasts (--w, a share), as high as it is hard (--h), the colour of that effort (--k).
   The bars sit on a thin baseline; a plan whose steps carry no zone is drawn striped ("shape only") so it does not claim an effort. */
.u-prof {
    display: flex; align-items: flex-end; gap: 2px;
    height: 44px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--u-edge);
}
.u-prof--sm { height: 34px; }
.u-prof--lg { height: 68px; gap: 3px; }
.u-prof > i {
    display: block;
    flex: var(--w, 1) 1 0px;
    min-width: 3px;
    height: var(--h, 50%);
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34)), var(--k, var(--u-zg));
}
[data-bs-theme="dark"] .u-prof > i {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28)), var(--k, var(--u-zg));
}
.u-prof.is-shape > i {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .32) 0 3px, transparent 3px 6px), var(--k, var(--u-zg));
    opacity: .78;
}
[data-bs-theme="dark"] .u-prof.is-shape > i {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .3) 0 3px, transparent 3px 6px), var(--k, var(--u-zg));
}
.u-prof__note { margin-top: 4px; font-size: .72rem; color: var(--u-dim); }

/* ── 7. panels: the cards of the dashboard, Team Week and the template pages ───────────────────── */

/* The colour a thing is about (data-tone) washes the card the way My Week's day cards are washed: a glow from the top-left
   corner and a fainter one from the bottom-right, over the card colour. --c / --c-rgb come from the tone. */
.u-panel, .u-row, .u-bubble, .u-race-tile {
    --c: var(--u-today); --c-rgb: var(--u-today-rgb);
}
.u-panel[data-tone="run"],   .u-row[data-tone="run"],   .u-bubble[data-tone="run"]   { --c: var(--u-run);   --c-rgb: var(--u-run-rgb); }
.u-panel[data-tone="bike"],  .u-row[data-tone="bike"],  .u-bubble[data-tone="bike"]  { --c: var(--u-bike);  --c-rgb: var(--u-bike-rgb); }
.u-panel[data-tone="swim"],  .u-row[data-tone="swim"],  .u-bubble[data-tone="swim"]  { --c: var(--u-swim);  --c-rgb: var(--u-swim-rgb); }
.u-panel[data-tone="other"], .u-row[data-tone="other"], .u-bubble[data-tone="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
.u-panel[data-tone="rest"],  .u-row[data-tone="rest"],  .u-bubble[data-tone="rest"]  { --c: var(--u-rest);  --c-rgb: var(--u-rest-rgb); }
.u-panel[data-tone="free"],  .u-row[data-tone="free"],  .u-bubble[data-tone="free"]  { --c: var(--u-free);  --c-rgb: var(--u-free-rgb); }
.u-panel[data-tone="race"],  .u-row[data-tone="race"],  .u-bubble[data-tone="race"]  { --c: var(--u-race);  --c-rgb: var(--u-race-rgb); }
.u-panel[data-tone="wait"],  .u-row[data-tone="wait"],  .u-bubble[data-tone="wait"]  { --c: var(--u-wait);  --c-rgb: var(--u-wait-rgb); }
.u-panel[data-tone="done"],  .u-row[data-tone="done"],  .u-bubble[data-tone="done"]  { --c: var(--u-done);  --c-rgb: var(--u-done-rgb); }
.u-panel[data-tone="part"],  .u-row[data-tone="part"],  .u-bubble[data-tone="part"]  { --c: var(--u-part);  --c-rgb: var(--u-part-rgb); }
.u-panel[data-tone="bad"],   .u-row[data-tone="bad"],   .u-bubble[data-tone="bad"]   { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.u-panel[data-tone="up"],    .u-row[data-tone="up"],    .u-bubble[data-tone="up"]    { --c: var(--u-up);    --c-rgb: var(--u-up-rgb); }
.u-panel[data-tone="note"],  .u-row[data-tone="note"],  .u-bubble[data-tone="note"]  { --c: var(--u-note);  --c-rgb: var(--u-note-rgb); }
.u-panel[data-tone="today"], .u-row[data-tone="today"], .u-bubble[data-tone="today"] { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }

.u-panel {
    position: relative; overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(var(--c-rgb), .26);
    background:
        radial-gradient(95% 70% at 0% 0%, rgba(var(--c-rgb), .15), transparent 62%),
        radial-gradient(70% 55% at 100% 100%, rgba(var(--c-rgb), .07), transparent 62%),
        var(--u-card);
    box-shadow: var(--u-shadow);
    color: var(--u-ink);
}
.u-panel > .card-header { background: transparent; border-bottom: 1px solid rgba(var(--c-rgb), .2); }
.u-panel > .card-footer { background: transparent; border-top: 1px solid rgba(var(--c-rgb), .2); }
.u-panel .progress { background: rgba(var(--c-rgb), .14); }

/* the icon of a panel's title: a small gradient tile in the tone's colour */
.u-panel__ic {
    flex: none;
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 9px;
    font-size: .95rem; line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--c), rgba(var(--c-rgb), .6));
    box-shadow: 0 4px 10px rgba(var(--c-rgb), .3);
}
[data-bs-theme="dark"] .u-panel__ic { color: #04111d; }

/* a row or tile inside a panel: a wash from the left and a bar in the tone's colour */
.u-row {
    position: relative;
    padding-left: 1.1rem !important;
    border-radius: 14px;
    border: 1px solid rgba(var(--c-rgb), .28);
    background: linear-gradient(100deg, rgba(var(--c-rgb), .14), rgba(var(--c-rgb), .03) 72%), var(--u-card);
    color: var(--u-ink);
}
.u-row::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--c);
}
.u-row--center { padding-left: .75rem !important; text-align: center; }
.u-row--center::before { display: none; }
.u-big { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; }

/* the big round icon of an empty state */
.u-bubble {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    font-size: 1.9rem; line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--c), rgba(var(--c-rgb), .58));
    box-shadow: 0 10px 24px rgba(var(--c-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
[data-bs-theme="dark"] .u-bubble { color: #04111d; }
.u-bubble--sm { width: 42px; height: 42px; font-size: 1.2rem; box-shadow: 0 6px 14px rgba(var(--c-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* the days to the next race: A rose, B orange, C amber */
.u-race-tile {
    --c: var(--u-race); --c-rgb: var(--u-race-rgb);
    flex: none; min-width: 76px;
    padding: 10px 8px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(145deg, var(--c), rgba(var(--c-rgb), .66));
    box-shadow: 0 10px 22px rgba(var(--c-rgb), .3);
}
.u-race-tile b { display: block; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.u-race-tile small { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.u-race-tile[data-type="B"] { --c: var(--u-part); --c-rgb: var(--u-part-rgb); }
.u-race-tile[data-type="C"] { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); color: #1c1203; }
[data-bs-theme="dark"] .u-race-tile { color: #04111d; }

/* a day of the This week strip on the dashboard */
.u-wk-day {
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(var(--u-up-rgb), .07);
}
.u-wk-day.is-today {
    border-color: rgba(var(--u-today-rgb), .6);
    background: linear-gradient(180deg, rgba(var(--u-today-rgb), .22), rgba(var(--u-today-rgb), .05));
    box-shadow: 0 6px 16px rgba(var(--u-today-rgb), .2);
}
.u-legend { font-size: .68rem; color: var(--u-dim); }

/* the filter bar over a list of cards */
.u-toolbar {
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--u-card);
    border: 1px solid var(--u-edge);
    box-shadow: var(--u-shadow);
}

/* the Mon-Sun "no plan yet" chips of Team Week (a chip is only there while somebody is missing that day) */
.u-daychip {
    --c: var(--u-note); --c-rgb: var(--u-note-rgb);
    display: inline-flex; align-items: center;
    padding: .2rem .55rem;
    border: 2px solid var(--c);
    border-radius: 10px;
    font-size: .8rem; font-weight: 600;
    color: var(--c);
    background: rgba(var(--c-rgb), .08);
}
.u-daychip:hover { background: rgba(var(--c-rgb), .16); color: var(--c); border-color: var(--c); }
.u-daychip .badge { background: var(--c); color: #fff; font-size: .68rem; }
[data-bs-theme="dark"] .u-daychip .badge { color: #04111d; }
.u-daychip.is-on, .u-daychip.is-on:hover { background: var(--c); color: #fff; }
[data-bs-theme="dark"] .u-daychip.is-on, [data-bs-theme="dark"] .u-daychip.is-on:hover { color: #04111d; }
.u-daychip.is-on .badge { background: rgba(255, 255, 255, .3); color: inherit; }

/* a round avatar with an initial, in the colour of the card it sits on */
.u-avatar { color: #fff; background: linear-gradient(135deg, var(--c), rgba(var(--c-rgb), .6)); box-shadow: 0 4px 10px rgba(var(--c-rgb), .28); }
[data-bs-theme="dark"] .u-avatar { color: #04111d; }

/* a smaller hero for the pages of a library (templates): the same navy, less height */
.u-hero--slim { padding: 14px 18px; border-radius: 18px; }
.u-hero--slim .u-hero__title { font-size: 1.3rem; }
.u-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.u-hero__actions form { display: contents; }
button.u-btn-ghost { cursor: pointer; font-family: inherit; }
.u-btn-solid {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    border: 0; border-radius: 12px;
    font-size: .85rem; font-weight: 700; text-decoration: none;
    color: #052e16;
    background: linear-gradient(135deg, #d8ff54, #4ade80);
    box-shadow: 0 8px 18px rgba(74, 222, 128, .28);
}
.u-btn-solid:hover { color: #052e16; filter: brightness(1.05); }

/* a step of a course in a card's "Show steps" list: the card colour, not a fixed light grey */
.u-mini {
    padding: 4px 8px;
    border-radius: 10px;
    background: var(--u-card-2);
    border: 1px solid var(--u-edge);
}
.u-mini--repeat { background: rgba(var(--u-wait-rgb), .12); border-color: rgba(var(--u-wait-rgb), .4); }

/* ── 8. the pages that are not built by hand: a page head, washed cards, night-mode leftovers ──── */

/* A page head. ONE class (u-pagehead) on the flex row that holds a page's heading and its buttons turns that row into the slim navy
   hero (u-hero--slim). The page keeps its own markup, so every id and class its script looks for is still there; the Bootstrap
   pieces inside the row (muted text, coloured icons, outline buttons) are re-coloured for navy here, once. */
.u-pagehead {
    flex-wrap: wrap; gap: 10px 14px;
    margin-bottom: 1rem;
    padding: 14px 18px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(56, 189, 248, .28), transparent 55%),
        linear-gradient(135deg, var(--u-hero-a) 0%, var(--u-hero-b) 60%, var(--u-hero-c) 100%);
    box-shadow: 0 10px 30px rgba(15, 52, 96, .35);
}
/* 16 Oct 2026 (audit A7): the groups inside the head wrap too — a row of buttons that could not wrap pushed the Athletes and Assigned Training Weeks
   pages wider than a phone */
.u-pagehead > .d-flex { flex-wrap: wrap; }
.u-pagehead :is(h1, h2, h3, h4, h5) { margin: 0; color: #fff !important; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.u-pagehead :is(.text-muted, .text-secondary, small) { color: var(--u-hero-dim) !important; }
.u-pagehead .text-white-50 { color: var(--u-hero-dim) !important; }
.u-pagehead .text-dark:not([class*="bg-"], .btn, .badge) { color: #fff !important; }
.u-pagehead :is(.text-primary, .text-info) { color: #7dd3fc !important; }
.u-pagehead .text-success { color: #86efac !important; }
.u-pagehead .text-warning { color: #fcd34d !important; }
.u-pagehead .text-danger { color: #fda4af !important; }
.u-pagehead a:not(.btn, .badge, .dropdown-item, .nav-link, .page-link) { color: #7dd3fc; text-decoration: none; }
.u-pagehead a:not(.btn, .badge, .dropdown-item, .nav-link, .page-link):hover { color: #fff; text-decoration: underline; }

/* buttons on navy: a neutral one is a ghost, a primary one is the lime of the hero's solid button, a coloured outline keeps its hue */
.u-pagehead :is(.btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-secondary, .btn-dark) {
    --bs-btn-color: #e2e8f0; --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-border-color: rgba(255, 255, 255, .22);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .2); --bs-btn-hover-border-color: rgba(255, 255, 255, .45);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .26); --bs-btn-active-border-color: rgba(255, 255, 255, .5);
    --bs-btn-disabled-color: rgba(226, 232, 240, .5); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(255, 255, 255, .14);
}
.u-pagehead :is(.btn-primary, .btn-success) {
    --bs-btn-color: #052e16; --bs-btn-bg: #d8ff54; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #052e16; --bs-btn-hover-bg: #c4f542; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #052e16; --bs-btn-active-bg: #b5e838; --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #052e16; --bs-btn-disabled-bg: #d8ff54; --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(135deg, #d8ff54, #4ade80);
    box-shadow: 0 8px 18px rgba(74, 222, 128, .28);
}
.u-pagehead :is(.btn-primary, .btn-success):hover,
.u-pagehead :is(.btn-primary, .btn-success):focus-visible { background-image: linear-gradient(135deg, #e6ff7a, #6ee7a0); }
.u-pagehead :is(.btn-outline-success, .btn-outline-warning, .btn-outline-info, .btn-outline-danger) {
    --bs-btn-color: var(--pc); --bs-btn-bg: transparent; --bs-btn-border-color: var(--pc);
    --bs-btn-hover-color: #04111d; --bs-btn-hover-bg: var(--pc); --bs-btn-hover-border-color: var(--pc);
    --bs-btn-active-color: #04111d; --bs-btn-active-bg: var(--pc); --bs-btn-active-border-color: var(--pc);
    --bs-btn-disabled-color: var(--pc); --bs-btn-disabled-border-color: var(--pc);
}
.u-pagehead .btn-outline-success { --pc: #86efac; }
.u-pagehead .btn-outline-warning { --pc: #fcd34d; }
.u-pagehead .btn-outline-info { --pc: #7dd3fc; }
.u-pagehead .btn-outline-danger { --pc: #fda4af; }

/* a page head is not printed as a navy band */
@media print {
    .u-pagehead { padding: 0; color: #000; background: none; box-shadow: none; }
    .u-pagehead :is(h1, h2, h3, h4, h5, .text-muted, small) { color: #000 !important; }
}

/* The plain cards of the pages that are not built by hand get the wash the panels have, in the one blue of the site. A card that is
   already tinted (bg-*, a coloured border), a panel or day card, and a card inside a card are left as they are. */
.card:where(:not(.u-panel, .u-day, .u-card, [class*="bg-"], [class*="text-bg-"],
                 .border-primary, .border-secondary, .border-success, .border-danger, .border-warning, .border-info, .border-dark)) {
    background:
        radial-gradient(95% 70% at 0% 0%, rgba(var(--u-today-rgb), .08), transparent 62%),
        radial-gradient(70% 55% at 100% 100%, rgba(var(--u-today-rgb), .035), transparent 62%),
        var(--u-card);
}
.card .card:not(.u-panel, .u-day, .u-card) { background: var(--u-card); }
/* a list group in a card shows the card too */
.card .list-group { --bs-list-group-bg: transparent; }
/* a table in a card shows the card, not the page colour Bootstrap fills its cells with */
.card .table:not(.table-dark, .table-light, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info) { --bs-table-bg: transparent; }

/* Night mode: the light utility classes of the old pages used to stay light (a white box with the page's light text on it, or dark text
   on a dark card). They take the card colour and the page ink instead. */
[data-bs-theme="dark"] :is(.bg-light, .bg-white) { background-color: var(--u-card-2) !important; }
[data-bs-theme="dark"] :is(.bg-light, .bg-white).text-dark,
[data-bs-theme="dark"] .text-dark:not([class*="bg-"], .btn, .alert, .badge) { color: var(--flip-textdark, var(--u-ink)) !important; }
/* a coach's day note keeps the pale colour its type carries (from the model), so its text stays dark on it; the Schedule's step editor
   builds pale cards in script */
[data-bs-theme="dark"] .note-badge-clickable { color: #1f2937; }
[data-bs-theme="dark"] .note-badge-clickable .text-muted { color: #475569 !important; }
[data-bs-theme="dark"] .step-edit-card { background: var(--u-card-2) !important; border-color: var(--u-edge-strong) !important; }
[data-bs-theme="dark"] :is(.table-light, .table-secondary) {
    --bs-table-color: var(--u-ink); --bs-table-bg: var(--u-card-2); --bs-table-border-color: var(--u-edge);
    --bs-table-striped-bg: rgba(148, 163, 184, .08); --bs-table-striped-color: var(--u-ink);
    --bs-table-active-bg: rgba(148, 163, 184, .14); --bs-table-active-color: var(--u-ink);
    --bs-table-hover-bg: rgba(148, 163, 184, .1); --bs-table-hover-color: var(--u-ink);
}

/* ── 9. surfaces: what the old inline boxes became ───────────────────────────────────────────── */

/* "background:#f8f9fa;border:1px solid #dee2e6" typed into a style attribute became these two classes (with a codemod, 06 Oct 2026): the
   card-2 colour of the theme, so the box follows the light / night switch. */
.u-surface { background: var(--u-card-2); border: 1px solid var(--u-edge-strong); }
.u-bg-soft { background: var(--u-card-2); }

/* Night mode: a pale box that is still written into a page (a colour typed into a style attribute) keeps its pale colour, so its text
   has to be dark: the page's own light ink would be light on pale. The list is every pale background (luminance .75 and up) the views and
   scripts type into a style attribute (57 forms, 06 Oct 2026); UtlcThemeTests.EveryPaleInlineBackgroundIsInTheNightModeList fails when a new one is missing. */
[data-bs-theme="dark"] :is(
    [style*="background:#d1e7dd" i],
    [style*="background:#ccfbf1" i],
    [style*="background:#d1fae5" i],
    [style*="background:#dbeafe" i],
    [style*="background:#dcfce7" i],
    [style*="background:#dee2e6" i],
    [style*="background:#e0e7ff" i],
    [style*="background:#e0f2fe" i],
    [style*="background:#e5e7eb" i],
    [style*="background:#e6f6ff" i],
    [style*="background:#e8f4fd" i],
    [style*="background:#e8f5e9" i],
    [style*="background:#e9ecef" i],
    [style*="background:#ede9fe" i],
    [style*="background:#eff6ff" i],
    [style*="background:#f0f0f0" i],
    [style*="background:#f0f4ff" i],
    [style*="background:#f0f7ff" i],
    [style*="background:#f0f9ff" i],
    [style*="background:#f0faff" i],
    [style*="background:#f0fdf4" i],
    [style*="background:#f0fff4" i],
    [style*="background:#f1f3f5" i],
    [style*="background:#f1f5f9" i],
    [style*="background:#f2f7ff" i],
    [style*="background:#f3e8ff" i],
    [style*="background:#f3f0ff" i],
    [style*="background:#f8f9fa" i],
    [style*="background:#f8f9fb" i],
    [style*="background:#f8f9ff" i],
    [style*="background:#fafafa" i],
    [style*="background:#fce7f3" i],
    [style*="background:#fde68a" i],
    [style*="background:#fee2e2" i],
    [style*="background:#fef2f2" i],
    [style*="background:#fef3c7" i],
    [style*="background:#fef9c3" i],
    [style*="background:#fff" i],
    [style*="background:#fff0f0" i],
    [style*="background:#fff3cd" i],
    [style*="background:#fff3e0" i],
    [style*="background:#fff3ee" i],
    [style*="background:#fff3f0" i],
    [style*="background:#fff5f0" i],
    [style*="background:#fff5f5" i],
    [style*="background:#fff7ed" i],
    [style*="background:#fff8e1" i],
    [style*="background:#fff8e6" i],
    [style*="background:#fff8f0" i],
    [style*="background:#fff8f3" i],
    [style*="background:#fff8f8" i],
    [style*="background:#fff9f7" i],
    [style*="background:#fffaf0" i],
    [style*="background:#fffbea" i],
    [style*="background:#fffbeb" i],
    [style*="background:#fffbf0" i],
    [style*="background:#fffde7" i],
    [style*="background:#fffdf5" i]
) {
    color: #1f2937;
    --bs-body-color: #1f2937; --bs-emphasis-color: #111827; --bs-secondary-color: #6b7280;      /* .text-muted, .text-body inside it */
    --bs-link-color: #0b5ed7; --bs-link-color-rgb: 11, 94, 215; --bs-link-hover-color: #084298; --bs-link-hover-color-rgb: 8, 66, 152;
    --flip-textdark: #1f2937;                                                                      /* .text-dark inside it stays dark */
}

@media (prefers-reduced-motion: reduce) {
    .u-hero *, .u-day, .u-dot { transition: none !important; animation: none !important; }
}

/* 15 Oct 2026: the easy-day check (Views/Shared/_EasyDayBadge.cshtml) and its mark on My Week */
.easy-badge { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--u-edge); background: var(--u-card); }
.easy-badge[data-tone="good"] { border-color: rgba(var(--u-done-rgb), .45); background: rgba(var(--u-done-rgb), .07); }
.easy-badge[data-tone="mid"] { border-color: rgba(var(--u-part-rgb, 245, 158, 11), .5); background: rgba(var(--u-part-rgb, 245, 158, 11), .08); }
.easy-badge[data-tone="bad"] { border-color: rgba(var(--u-bad-rgb), .45); background: rgba(var(--u-bad-rgb), .06); }
.easy-badge__head { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.easy-badge__head small { margin-left: auto; color: var(--u-dim); font-size: .74rem; }
.easy-badge[data-tone="good"] .easy-badge__head i { color: var(--u-done); }
.easy-badge[data-tone="mid"] .easy-badge__head i { color: var(--u-part); }
.easy-badge[data-tone="bad"] .easy-badge__head i { color: var(--u-bad); }
.easy-badge__main { margin: 6px 0 6px; font-size: .9rem; }
.easy-badge__bar { height: 8px; border-radius: 99px; overflow: hidden; background: rgba(var(--u-bad-rgb), .25); margin-bottom: 6px; }
.easy-badge__bar span { display: block; height: 100%; background: var(--u-done); }
.easy-badge__heart, .easy-badge__tip { margin: 4px 0 0; font-size: .84rem; color: var(--u-dim); display: flex; gap: 6px; align-items: flex-start; }
.easy-badge__heart i { color: #e11d48; margin-top: 2px; } .easy-badge__tip i { color: var(--u-part); margin-top: 2px; }
.easy-dot { display: inline-flex; align-items: center; font-size: 1.05rem; flex-shrink: 0; }
.easy-dot[data-tone="good"] { color: var(--u-done); } .easy-dot[data-tone="mid"] { color: var(--u-part); } .easy-dot[data-tone="bad"] { color: var(--u-bad); }

/* 15 Oct 2026: the weather and PM2.5 of the activity (Views/Shared/_ActivityConditions.cshtml), Session Detail and Review */
.wx-note { margin: 0 0 16px; font-size: .84rem; color: var(--u-dim); display: flex; gap: 6px; align-items: center; }
.wx-card { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--u-edge); background: var(--u-card); }
.wx-card__head { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.wx-card__head b i { margin-right: 6px; color: #0ea5e9; }
.wx-card__head small { margin-left: auto; color: var(--u-dim); font-size: .74rem; font-variant-numeric: tabular-nums; }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 8px; }
.wx-item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 127, .07); }
.wx-item i { grid-row: span 2; font-size: 1.25rem; color: var(--u-dim); }
.wx-item b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wx-item small { color: var(--u-dim); font-size: .74rem; line-height: 1.25; }
.wx-item[data-band="1"] i { color: #eab308; } .wx-item[data-band="2"] i { color: #f97316; }
.wx-item[data-band="3"] i, .wx-item[data-band="4"] i { color: #dc2626; }
.wx-item[data-pm="0"] i { color: #0ea5e9; } .wx-item[data-pm="1"] i { color: #22c55e; } .wx-item[data-pm="2"] i { color: #eab308; }
.wx-item[data-pm="3"] i { color: #f97316; } .wx-item[data-pm="4"] i { color: #dc2626; }
.wx-src { margin: 0; font-size: .72rem; color: var(--u-dim); }

/* 16 Oct 2026: one verdict per submitted session (Views/Shared/_SessionVerdict.cshtml) on the Pending Reviews card and the top of Review */
.sv { --sv-c: var(--u-dim); --sv-rgb: 100, 116, 139; }
.sv[data-level="green"], .sv-pill[data-level="green"] { --sv-c: var(--u-done); --sv-rgb: var(--u-done-rgb); }
.sv[data-level="yellow"], .sv-pill[data-level="yellow"] { --sv-c: var(--u-part); --sv-rgb: var(--u-part-rgb); }
.sv[data-level="red"], .sv-pill[data-level="red"] { --sv-c: var(--u-bad); --sv-rgb: var(--u-bad-rgb); }
.sv--card { margin: 0 0 8px; }
.sv--full { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--sv-rgb), .45); background: rgba(var(--sv-rgb), .06); }
.sv__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv__level { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--sv-c); font-size: .8rem; }
.sv--full .sv__level { font-size: 1.05rem; }
.sv__basis { color: var(--u-dim); font-size: .74rem; }
.sv__reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sv__chip { font-size: .72rem; line-height: 1.3; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--u-edge); color: var(--u-dim); background: var(--u-card); }
.sv__chip[data-tone="good"] { color: var(--u-done); border-color: rgba(var(--u-done-rgb), .45); background: rgba(var(--u-done-rgb), .07); }
.sv__chip[data-tone="warn"] { color: var(--u-part); border-color: rgba(var(--u-part-rgb), .5); background: rgba(var(--u-part-rgb), .08); }
.sv__chip[data-tone="bad"] { color: var(--u-bad); border-color: rgba(var(--u-bad-rgb), .5); background: rgba(var(--u-bad-rgb), .07); font-weight: 600; }
.sv--full .sv__chip { font-size: .8rem; padding: 3px 10px; }
.sv__strip { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.sv__strip span { width: 12px; height: 12px; border-radius: 3px; background: #94a3b8; }
.sv [data-effort="hit"] { background: var(--u-done); fill: var(--u-done); }
.sv [data-effort="harder"] { background: var(--u-bad); fill: var(--u-bad); }
.sv [data-effort="easier"] { background: #2563eb; fill: #2563eb; }
.sv [data-effort="notdone"] { background: transparent; box-shadow: inset 0 0 0 2px var(--u-bad); stroke: var(--u-bad); }
.sv [data-effort="nodata"] { background: #94a3b8; fill: #94a3b8; }
.sv__chart { margin: 10px 0 0; }
.sv__chart figcaption { font-size: .78rem; font-weight: 600; margin-bottom: 4px; }
.sv__chart figcaption small { font-weight: 400; color: var(--u-dim); margin-left: 6px; }
.sv__chart-scroll { overflow-x: auto; }
.sv__chart svg { display: block; max-width: none; }
.sv__band { fill: rgba(var(--u-done-rgb), .14); }
.sv__axis { stroke: rgba(var(--u-done-rgb), .6); stroke-dasharray: 3 3; }
.sv__stem { stroke: var(--u-edge); stroke-width: 2; }
.sv__dot { stroke: var(--u-card); stroke-width: 2; }
.sv__x line { stroke-width: 2.5; stroke-linecap: round; }
.sv__lbl, .sv__num { font-size: 10px; fill: var(--u-dim); font-variant-numeric: tabular-nums; }
.sv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; font-weight: 700; font-size: .85rem; text-decoration: none;
    color: var(--sv-c); border: 2px solid rgba(var(--sv-rgb), .55); background: rgba(var(--sv-rgb), .07); }
.sv-lanes .sv-lane { border: 1px solid var(--u-edge); background: var(--u-card); color: var(--u-dim); display: inline-flex; align-items: center; gap: 5px; }
.sv-lanes .sv-lane .badge { background: rgba(100, 116, 139, .15); color: inherit; font-weight: 600; }
.sv-lanes .sv-lane[data-lane="red"] i { color: var(--u-bad); } .sv-lanes .sv-lane[data-lane="yellow"] i { color: var(--u-part); }
.sv-lanes .sv-lane[data-lane="green"] i { color: var(--u-done); }
.sv-lanes .sv-lane.active { border-color: var(--u-dim); color: inherit; font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
.sv-risk { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: #fff; background: var(--u-part); }
.sv-risk[data-tier="Stop"] { background: var(--u-bad); }

/* 16 Oct 2026: the hub pages of what left the menus (Views/Shared/_MenuHub.cshtml: /Insights, /AdminTools) */
.mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.mh-group__title { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.mh-group__title i { color: var(--u-dim); }
.mh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mh-links a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; color: inherit; text-decoration: none; }
.mh-links a:hover, .mh-links a:focus-visible { background: rgba(100, 116, 139, .1); }
.mh-links a i { color: var(--u-dim); width: 18px; text-align: center; }
.mh-links small { display: block; margin: -2px 0 4px 36px; color: var(--u-dim); font-size: .74rem; }

/* 15 Oct 2026: the on-target percent of a session (Views/Shared/_VerdictPercent.cshtml) on the Pending Reviews card and in the Review header */
.sv-pct { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 2px 8px; border-radius: 99px; font-weight: 700;
    font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--u-dim); border: 1px solid var(--u-edge); cursor: help; }
.sv-pct[data-level="green"] { color: var(--u-done); border-color: rgba(var(--u-done-rgb), .5); background: rgba(var(--u-done-rgb), .08); }
.sv-pct[data-level="yellow"] { color: var(--u-part); border-color: rgba(var(--u-part-rgb), .5); background: rgba(var(--u-part-rgb), .08); }
.sv-pct[data-level="red"] { color: var(--u-bad); border-color: rgba(var(--u-bad-rgb), .5); background: rgba(var(--u-bad-rgb), .08); }
.u-pagehead .sv-pct { font-size: 1rem; padding: 6px 12px; border-radius: 12px; }

/* 15 Oct 2026: the Plan check on Schedule (Services/WeekPlanValidator.cs): one line per issue, its colour by severity, a link to its day */
.plan-check__list { list-style: none; display: grid; gap: 4px; }
.plan-check__list li { display: flex; align-items: flex-start; gap: 6px; }
.plan-check__list li i { margin-top: 2px; }
.plan-check__list li[data-sev="error"] { color: var(--u-bad); font-weight: 600; }
.plan-check__list li[data-sev="warn"] i { color: var(--u-part); }
.plan-check__list li[data-sev="info"] { color: var(--u-dim); }
.plan-check__go { margin-left: auto; white-space: nowrap; font-size: .76rem; text-decoration: none; }
/* 3 Nov 2026 (#539): the remarks fold under one line; Seen is a quiet link */
.plan-check__fold > summary { cursor: pointer; color: var(--u-dim); list-style: none; }
.plan-check__fold > summary::-webkit-details-marker { display: none; }
.plan-check__fold > summary::before { content: "▸ "; }
.plan-check__fold[open] > summary::before { content: "▾ "; }
.plan-check__mute { font-size: .76rem; color: var(--u-dim); text-decoration: none; white-space: nowrap; }
[id^="schDay"] { scroll-margin-top: 80px; }
[id^="schDay"]:target > * { outline: 3px solid rgba(var(--u-part-rgb), .55); outline-offset: 2px; border-radius: 14px; }

/* 15 Oct 2026: the one-tap session RPE (Views/WorkoutResults/Rpe.cshtml, the strip in Session Detail's hero) and the suggested note on Review */
.rpe-ask { margin: 12px 0 4px; }
.rpe-ask__q { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rpe-ask__q small { font-weight: 400; opacity: .8; font-size: .76rem; }
.rpe-ask__scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.rpe-ask__btn { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: inherit; border-radius: 10px; padding: 8px 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 42px; }
.rpe-ask__btn b { font-size: 1.05rem; line-height: 1; }
.rpe-ask__btn small { font-size: .62rem; line-height: 1.1; opacity: .85; display: none; }
.rpe-ask__btn:hover, .rpe-ask__btn:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.rpe-ask__btn[data-rpe="1"], .rpe-ask__btn[data-rpe="2"], .rpe-ask__btn[data-rpe="3"] { border-color: rgba(var(--u-done-rgb), .7); }
.rpe-ask__btn[data-rpe="7"], .rpe-ask__btn[data-rpe="8"] { border-color: rgba(var(--u-part-rgb), .8); }
.rpe-ask__btn[data-rpe="9"], .rpe-ask__btn[data-rpe="10"] { border-color: rgba(var(--u-bad-rgb), .8); }
.rpe-ask--page .rpe-ask__btn { background: var(--u-card); color: inherit; border: 1px solid var(--u-edge); min-height: 64px; }
.rpe-ask--page .rpe-ask__btn small { display: block; }
.rpe-ask--page .rpe-ask__btn.is-on { background: rgba(var(--u-done-rgb), .15); border-color: var(--u-done); }
.rpe-ask--page .rpe-ask__scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rpe-page { max-width: 640px; }
/* 17 Oct 2026: the same ten buttons on a light card: under a done session on My Week, the Dashboard card (Views/Shared/_RpeAsk) and the result
   forms' picker (_RpePicker). 1-3 / 7-8 / 9-10 keep their coloured edge from above; 4-6 take the card's edge. */
.rpe-ask-wrap { padding: 8px 12px 10px; border-top: 1px dashed var(--u-edge); }
.rpe-ask--card { margin: 0; }
.rpe-ask--card .rpe-ask__btn, .rpe-pick .rpe-ask__btn { background: var(--u-card); min-height: 40px; padding: 6px 0; }
.rpe-ask--card .rpe-ask__btn[data-rpe="4"], .rpe-ask--card .rpe-ask__btn[data-rpe="5"], .rpe-ask--card .rpe-ask__btn[data-rpe="6"],
.rpe-pick .rpe-ask__btn[data-rpe="4"], .rpe-pick .rpe-ask__btn[data-rpe="5"], .rpe-pick .rpe-ask__btn[data-rpe="6"] { border-color: var(--u-edge); }
.rpe-ask--card .rpe-ask__btn:hover, .rpe-ask--card .rpe-ask__btn:focus-visible,
.rpe-pick .rpe-ask__btn:hover, .rpe-pick .rpe-ask__btn:focus-visible { background: rgba(var(--u-done-rgb), .1); outline: 2px solid rgba(var(--u-done-rgb), .5); outline-offset: 1px; }
.rpe-pick .rpe-ask__btn.is-on { background: rgba(var(--u-done-rgb), .2); border-color: var(--u-done); font-weight: 700; }
.rpe-pick .rpe-ask__btn:disabled { cursor: default; }
.rpe-ask__done { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--u-done); }
/* 26 Oct 2026 (#398): an answered row, and a box with nothing left to ask, fade out before they go (/js/rpe-ask.js) */
[data-rpe-row], [data-rpe-box] { transition: opacity .25s ease; }
[data-rpe-row].is-leaving, [data-rpe-box].is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { [data-rpe-row], [data-rpe-box] { transition: none; } }
.rpe-ask__fail { margin-top: 4px; font-size: .76rem; color: var(--u-bad); }
/* 17 Oct 2026: a race's goal beside the paces of now (Views/Shared/_RaceGoalFacts on the Readiness and Debrief boards, _RaceGoalCard on the race overview) */
.race-goal { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .78rem; line-height: 1.3; }
.race-goal__pill { font-size: .72rem; padding: .1rem .5rem; font-weight: 600; }
.race-goal-cell { min-width: 9.5rem; }
.race-goal-card__list { margin: 0 0 4px; padding-left: 1.1rem; font-size: .82rem; display: grid; gap: 2px; }
/* 18 Oct 2026 (T4): the intensity-distribution card on the athlete page (Views/Athletes/_AthleteTid): one bar of the seven zones, dots in the legend */
.tid-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--u-edge); }
.tid-bar__seg { display: block; min-width: 2px; }
.tid-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
/* 18 Oct 2026 (the UI round): a block that folds on a phone (details[data-fold-on-phone], /js/fold-on-phone.js); the summary reads as a quiet heading */
/* 25 Oct 2026 (#355): the result form's plan card folds on a phone; its summary keeps the card header's look */
details.lg-plan > summary { cursor: pointer; list-style: none; }
details.lg-plan > summary::-webkit-details-marker { display: none; }
details.lg-plan > summary::after { content: "▾"; float: right; color: var(--u-dim); }
details.lg-plan:not([open]) > summary::after { content: "▸"; }
.rv-fold > .rv-fold__sum { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--u-dim); padding: 6px 0 8px; list-style: none; }
.rv-fold > .rv-fold__sum::-webkit-details-marker { display: none; }
.rv-fold > .rv-fold__sum::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
.rv-fold[open] > .rv-fold__sum::before { transform: rotate(90deg); }
.rv-fold__sum--card { padding: 10px 14px; border-radius: 14px; background: var(--u-card); border: 1px solid var(--u-edge); margin-bottom: 12px; }
details.dash-more[open] > .rv-fold__sum--card { margin-bottom: 12px; }
/* 18 Oct 2026 (#192): Session Detail's plan in one line (Views/AthleteWorkouts/SessionDetail, .sd-brief) above the folded steps; the Strava line and the fuel fold reuse .rv-fold */
.sd-brief { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; }
.sd-brief__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: var(--u-card); border: 1px solid var(--u-edge); }
.sd-brief__item b { font-weight: 700; }
.sd-brief__part + .sd-brief__part::before { content: "/"; color: var(--u-dim); margin: 0 4px; }
.sd-brief .u-zone { font-style: normal; font-size: .7rem; padding: 0 6px; }
.sd-strava > .rv-fold__sum img { height: 13px; }
.sv-suggest { background: rgba(var(--u-done-rgb), .06); border: 1px solid rgba(var(--u-done-rgb), .35); }
.sv-suggest__text { font-weight: 600; }

/* 15 Oct 2026: the heat-adjusted run pace (My Week, Session Detail): the chip above the steps, the pace next to each target */
.heat-chip { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; line-height: 1.35; padding: 6px 10px; border-radius: 10px; margin-bottom: 8px;
    background: rgba(var(--u-part-rgb), .1); border: 1px solid rgba(var(--u-part-rgb), .45); }
.heat-chip > i { color: var(--u-part); font-size: 1rem; margin-top: 1px; }
.heat-chip--danger { background: rgba(var(--u-bad-rgb), .1); border-color: rgba(var(--u-bad-rgb), .55); }
.heat-chip--danger > i { color: var(--u-bad); }
.heat-chip small { display: block; opacity: .75; font-size: .72rem; }
.heat-chip__head { font-weight: 700; font-size: .78rem; margin-bottom: 3px; }
.heat-chip__head small { display: inline; font-weight: 400; opacity: .75; margin-left: 4px; }
.heat-chip__slot { display: flex; gap: 6px; align-items: baseline; padding: 1px 6px; border-radius: 6px; }
.heat-chip__slot.is-on { background: rgba(var(--u-part-rgb), .14); }
.heat-chip__slot b { min-width: 3.2em; }
.heat-chip__usual { font-size: .72rem; opacity: .75; }
.heat-chip__tip { margin-top: 3px; font-weight: 600; }
.heat-chip .js-heat-toggle { font-size: .72rem; }
.heat-adj { font-size: .78rem; font-weight: 600; color: var(--u-part); white-space: nowrap; }
.heat-adj i { font-size: .8rem; margin-right: 2px; }
.plan-check__act { font-size: .74rem; vertical-align: baseline; }

/* 18 Oct 2026 (#195): the one-tap race result from Strava (Views/Shared/_RaceResultAsk) on the Dashboard, My Week and My Races */
.rra { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--u-card); border: 1px solid var(--u-edge); font-size: .9rem; }
.rra__race { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rra__race i { color: #c2410c; }
.rra__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.rra__warn { font-weight: 400; color: var(--u-dim); font-size: .8rem; margin-left: 4px; }
.rra__q { color: var(--u-dim); font-size: .82rem; }
.rra__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rra__btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--u-edge); background: transparent; color: inherit; border-radius: 999px; padding: 5px 12px; font-size: .84rem; line-height: 1.2; text-decoration: none; min-height: 34px; cursor: pointer; }
.rra__btn--yes { background: #15803d; border-color: transparent; color: #fff; font-weight: 600; }
.rra__btn:hover, .rra__btn:focus-visible { filter: brightness(1.08); outline: none; }
.rra__done { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--u-card); border: 1px solid var(--u-edge); font-size: .9rem; }
.rra__done i { color: #15803d; }
.rra__done--no i { color: var(--u-dim); }
.rra__fail { color: #b91c1c; font-size: .8rem; }

/* 18 Oct 2026 (#196, #198) and 19 Oct 2026 (#206, the owner: "my week ของนักกีฬาตอนนี้สวยและใช้งานได้ดี ปรับให้ดูจากเวปคล้ายๆ กัน" → the sketch
   docs/design/my-week-desktop → "ทำเลย"): the athlete's own My Week (Views/AthleteWorkouts/MyWeek .mw-stack.mw-own) reads the same on every screen —
   the week's dots, the alerts, the days (today open and first, tomorrow second, every other day a one-line row that opens its card), then the
   check-in, the coach's note and the stats folded, the streak and Prev / Next last (.mw-g-nav; the hero drops its own). From 992 px two columns:
   the days on the left, the rest (.mw-side) on the right, staying in view while the days scroll. A coach and the shared link see the page as it was. */
.mw-dayfold > summary.mw-dayrow { list-style: none; display: none; }
.mw-dayfold > summary.mw-dayrow::-webkit-details-marker { display: none; }
.mw-side { display: contents; }
.mw-g-nav { display: none; }
.mw-stack.mw-own { display: flex; flex-direction: column; }
.mw-stack.mw-own .mw-g-dots { order: 1; }
.mw-stack.mw-own .mw-g-alerts { order: 2; }
.mw-stack.mw-own > .mw-g-days { order: 3; }
.mw-stack.mw-own .mw-g-checkin { order: 4; }
.mw-stack.mw-own .mw-g-coach { order: 5; }
.mw-stack.mw-own .mw-g-stats { order: 6; }
.mw-stack.mw-own .mw-g-nav { display: grid; gap: 10px; order: 7; padding: 12px 2px 4px; }
.mw-stack.mw-own > .mw-g-days > .mw-first { order: -4; }
.mw-stack.mw-own > .mw-g-days > .mw-second { order: -2; }
/* 20 Oct 2026 (#239, docs/design/my-week-past-bottom, the owner: "เอา yesterday ไปล่างสุด และก็เรียงวันที่ผ่านๆ มากันไป"): the coming days keep their weekday
   order (0); the days that have passed sit after them (inline order 11, 12 … = nearest first) under a small divider (order 10); when yesterday still has
   something pending a one-line nudge sits under today (order −3) and leads down to it */
.mw-stack.mw-own > .mw-g-days > .mw-past-head { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--u-dim); margin-top: 14px; }
.mw-stack.mw-own > .mw-g-days > .mw-past-head::before, .mw-stack.mw-own > .mw-g-days > .mw-past-head::after { content: ""; flex: 1; border-top: 1px dashed var(--u-edge-strong); }
.mw-stack.mw-own > .mw-g-days > .mw-past .mw-dayrow__d { color: var(--u-dim); opacity: .75; }
.mw-stack.mw-own > .mw-g-days > .mw-ynudge a { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; font-size: .84rem; text-decoration: none;
                                                color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; }
.mw-ynudge__go { margin-left: auto; font-weight: 700; white-space: nowrap; }
[data-bs-theme="dark"] .mw-stack.mw-own > .mw-g-days > .mw-ynudge a { color: #fdba74; background: rgba(234, 88, 12, .14); border-color: rgba(234, 88, 12, .4); }
.mw-stack.mw-own > .mw-g-days > .mw-past-head, .mw-stack.mw-own > .mw-g-days > .mw-ynudge { display: none; }   /* a coach's view has no mw-own: never shown there */
.mw-stack.mw-own > .mw-g-days > .mw-past-head { display: flex; }
.mw-stack.mw-own > .mw-g-days > .mw-ynudge { display: block; }
.mw-stack.mw-own > .mw-g-days > [class*="col-"] { width: 100%; }   /* one column of days on every screen */
.mw-stack.mw-own .mw-dayfold > summary.mw-dayrow { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--u-card); border: 1px solid var(--u-edge); font-size: .9rem; cursor: pointer; }
.mw-stack.mw-own .mw-dayfold > summary.mw-dayrow:hover { border-color: var(--u-edge-strong); }
.mw-dayrow__d { min-width: 66px; font-weight: 700; font-size: .78rem; color: var(--u-dim); line-height: 1.15; }
.mw-dayrow__d small { display: block; font-weight: 400; }
.mw-dayrow__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mw-dayrow__t b { font-weight: 600; }
.mw-dayrow__s { margin-left: auto; font-size: .8rem; white-space: nowrap; }
/* 19 Oct 2026 (#210): a day with two sessions shows two lines; the athlete's own extras one small grey line */
.mw-dayrow__lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mw-dayrow__l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mw-dayrow__l + .mw-dayrow__l:not(.mw-dayrow__x) { padding-top: 4px; border-top: 1px dashed var(--u-edge); }
.mw-dayrow__x { flex-wrap: wrap; gap: 2px 8px; font-size: .76rem; color: var(--u-dim); }
.mw-dayrow__xi + .mw-dayrow__xi::before { content: "· "; }
/* 19 Oct 2026 (#213): the sport of each session on the row, in the sport's colour */
.mw-sport { --c: var(--u-other); --c-rgb: var(--u-other-rgb); display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 0 7px; border-radius: 999px;
            font-size: .68rem; font-weight: 700; line-height: 1.5; color: var(--c); background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .35); }
.mw-sport[data-sport="run"]  { --c: var(--u-run);  --c-rgb: var(--u-run-rgb); }
.mw-sport[data-sport="bike"] { --c: var(--u-bike); --c-rgb: var(--u-bike-rgb); }
.mw-sport[data-sport="swim"] { --c: var(--u-swim); --c-rgb: var(--u-swim-rgb); }
/* 19 Oct 2026 (#227, docs/design/my-week-rest-wait): today's dot keeps the today ring on a rest / waiting / free day; a rest / waiting day's card
   tells the next planned session (Views/AthleteWorkouts/_NextSession) and a rest day shows the coach's note; the rows carry the day's icon */
.u-dot.is-today-ring { border-color: rgba(var(--u-today-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--u-today-rgb), .35); }
.u-dot.is-today-ring .u-dot__lbl { color: var(--u-today); font-weight: 700; }
.mw-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: .5rem; padding: 7px 10px; font-size: .84rem;
           border-radius: 10px; background: rgba(var(--u-today-rgb), .05); border: 1px solid var(--u-edge); }
.mw-next__k { width: 100%; font-size: .74rem; font-weight: 700; color: var(--u-dim); }
.mw-rest-ic { font-size: 22px; line-height: 1; color: var(--u-rest); }
.mw-rest-note { background: rgba(var(--u-rest-rgb), .08); border-left: 3px solid var(--u-rest); padding: 4px 8px; border-radius: 0 6px 6px 0; }
.mw-dayrow__t .mw-ic-wait { color: var(--u-wait); }
.mw-dayrow__t .mw-ic-rest { color: var(--u-rest); }
.mw-dayfold[open] > summary.mw-dayrow { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
.mw-dayfold[open] > .u-day { border-top-left-radius: 0; border-top-right-radius: 0; }
.mw-stack.mw-own .mw-first .u-day .card-footer .btn-sm { padding: .5rem .75rem; font-size: .95rem; }
.mw-stack.mw-own .mw-first .u-day .u-day__title { font-size: 1.05rem; }
.u-hero.mw-own-hero > .u-chips, .u-hero.mw-own-hero #mwPrevBtn, .u-hero.mw-own-hero #mwNextBtn { display: none; }
.u-hero.mw-own-hero > .u-hero__nav:not(:has(> a:not(#mwPrevBtn):not(#mwNextBtn))) { display: none; }   /* a coach-athlete keeps the coach buttons */
.u-hero.mw-own-hero { padding-bottom: 14px; }
.mw-nav__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-nav__chips .u-chip { background: var(--u-card); border: 1px solid var(--u-edge); color: inherit; }
.mw-nav__btns { display: flex; gap: 8px; }
.mw-nav__btns .u-btn-ghost { flex: 1; justify-content: center; background: var(--u-card); border: 1px solid var(--u-edge); color: inherit; }
@media (min-width: 992px) {
  .mw-stack.mw-own { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 22px; align-items: start; }
  .mw-stack.mw-own > .mw-g-days { grid-column: 1; grid-row: 1; }
  .mw-stack.mw-own > .mw-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; position: sticky; top: 12px;
                                max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  .mw-stack.mw-own > .mw-side > .mw-g-nav { padding: 4px 0 4px; }
  .mw-stack.mw-own > .mw-side > .mb-4 { margin-bottom: 1rem !important; }
  .mw-side .mw-g-checkin .row > [class*="col-"] { width: 100%; }   /* the narrow column: one check-in field per line */
}

/* 19 Oct 2026: the done DNA against the plan on the coach's queue (Views/Shared/_DnaLine on WorkoutResults/PendingReviews) and in TeamWeek's day cells */
.dna-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; font-size: .74rem; }
.dna-line__lbl { font-weight: 700; color: var(--u-dim); display: inline-flex; align-items: center; gap: 4px; }
.dna-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; background: var(--u-card); border: 1px solid var(--u-edge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dna-chip .u-zone { padding: 0 6px; font-size: .64rem; }
.dna-chip:not(:has(.u-zone)) { padding-left: 8px; }
.dna-chip--up { border-color: rgba(234, 88, 12, .55); background: rgba(234, 88, 12, .08); }
.dna-chip--down { border-color: rgba(37, 99, 235, .5); background: rgba(37, 99, 235, .07); }
.dna-line__word { margin-left: auto; font-weight: 700; white-space: nowrap; }
.dna-line__word--on { color: var(--u-done); }
.dna-line__word--harder { color: #c2410c; }
.dna-line__word--easier { color: #1d4ed8; }
.dna-line__word--none { color: var(--u-dim); font-weight: 500; }
.sv-lane--dna { border-color: rgba(234, 88, 12, .55) !important; }
.tw-dna-mark { font-size: 10px; font-weight: 800; line-height: 1; }
.tw-dna-mark--on { color: var(--u-done); }
.tw-dna-mark--harder { color: #ea580c; }
.tw-dna-mark--easier { color: #2563eb; }
.tw-dna-week { font-size: 12px; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; background: rgba(234, 88, 12, .08); border: 1px solid rgba(234, 88, 12, .35); }

/* ── the coach's Home as "today" (19 Oct 2026, #203): the morning line in the hero, four numbers that are work, one row per athlete ── */
.ct-hero .u-hero__row { flex-wrap: wrap; }
.ct-hero .u-hero__main { flex: 1 1 240px; }
/* 19 Oct 2026 (#207, the owner: "ทำให้เด่นๆ โฟกัสง่ายขึ้น" → docs/design/coach-home-focus): the morning line in two tiers — what to act on as loud
   pills, the number first (health in one red group), what to look at when there is time as a small line */
.ct-act-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 12px; }
.ct-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; padding: 5px; border-radius: 16px; background: rgba(239, 68, 68, .16); border: 1px solid rgba(248, 113, 113, .45); }
.ct-group__lbl { align-self: center; padding: 0 4px 0 6px; font-size: .68rem; font-weight: 800; color: #fecaca; }
.ct-pill { --pill: #475569; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 0; border-radius: 12px;
           background: var(--pill); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; line-height: 1.15; cursor: pointer; text-align: left; }
.ct-pill b { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ct-pill[data-group="health"] { --pill: #dc2626; }
.ct-pill[data-group="race"]   { --pill: #db2777; }
.ct-pill[data-group="harder"] { --pill: #c2410c; }
.ct-pill[data-group="warn"]   { --pill: #d97706; }
.ct-pill[data-group="heat"]   { --pill: #ea580c; }
.ct-pill[data-group="info"]   { --pill: #4f46e5; }
.ct-pill:hover { filter: brightness(1.08); }
.ct-pill[aria-pressed="true"] { background: #fff; color: #111827; box-shadow: 0 0 0 3px #d8ff54; }
.ct-quiet { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 10px; font-size: .78rem; color: var(--u-hero-dim); }
.ct-quiet__lead { font-weight: 700; }
/* 19 Oct 2026 (#228): the hero's season line — links, not filters */
.ct-season { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 8px; font-size: .78rem; color: var(--u-hero-dim); }
.ct-season__lead { font-weight: 700; }
.ct-season__link { color: #e2e8f0; text-decoration: none; }
.ct-season__link a { color: #e2e8f0; text-decoration: underline dotted; margin-left: 6px; }
.ct-season__link b { color: #d8ff54; font-weight: 700; }
.ct-season__link:hover, .ct-season__link a:hover { color: #fff; }
.ct-quiet button { padding: 0; border: 0; background: none; color: #e2e8f0; font: inherit; cursor: pointer;
                   text-decoration: underline; text-decoration-color: rgba(226, 232, 240, .35); text-underline-offset: 3px; }
.ct-quiet button b { color: #fff; font-variant-numeric: tabular-nums; }
.ct-quiet button[aria-pressed="true"] { color: #d8ff54; text-decoration-color: #d8ff54; }
.ct-pill:focus-visible, .ct-quiet button:focus-visible, .ct-more:focus-visible { outline: 2px solid #d8ff54; outline-offset: 2px; }
@media (max-width: 575.98px) {
    /* on a phone the loud pills are one row that scrolls sideways inside the hero */
    .ct-act-line, .ct-group { flex-wrap: nowrap; }
    .ct-act-line { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .ct-act-line > *, .ct-group > * { flex: none; }
}
/* 19 Oct 2026 (#231, docs/design/coach-home-simple): the Home as three questions — the numbers in the hero, a panel per question, a line per
   athlete (sentence · what to do · buttons · details folded) */
.ct-nums { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin-top: 12px; }
.ct-num { display: inline-flex; align-items: baseline; gap: 7px; color: #e2e8f0; text-decoration: none; font-size: .92rem; }
.ct-num b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.ct-num[data-k="health"] b { color: #fca5a5; } .ct-num[data-k="wait"] b { color: #c7d2fe; } .ct-num[data-k="race"] b { color: #f9a8d4; }
.ct-num:hover { color: #fff; }
.ct-q__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 14px; }
.ct-q__n { font-size: 1.3rem; font-weight: 800; line-height: 1; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.ct-q__t { font-size: .98rem; font-weight: 800; }
.ct-q__s { font-size: .74rem; color: var(--u-dim); }
.ct-q__tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ct-q[data-k="health"] .ct-q__n { color: #dc2626; } .ct-q[data-k="health"] > .card-header { background: rgba(220, 38, 38, .06); }
.ct-q[data-k="wait"]   .ct-q__n { color: #4f46e5; } .ct-q[data-k="wait"]   > .card-header { background: rgba(79, 70, 229, .06); }
.ct-q[data-k="race"]   .ct-q__n { color: #db2777; } .ct-q[data-k="race"]   > .card-header { background: rgba(219, 39, 119, .06); }
.ct-line { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--u-edge); }
.ct-line:last-child { border-bottom: 0; }
.ct-line__t { font-size: .92rem; line-height: 1.4; }
.ct-line__do { font-weight: 700; color: var(--u-ink); white-space: nowrap; }
.ct-line__more > summary { list-style: none; cursor: pointer; font-size: .76rem; color: var(--u-dim); text-decoration: underline dotted; margin-top: 2px; display: inline-block; }
.ct-line__more > summary::-webkit-details-marker { display: none; }
.ct-line__detail { margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: var(--u-card-2); border: 1px solid var(--u-edge); font-size: .8rem; color: var(--u-ink); display: grid; gap: 3px; }
.ct-line__also { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--u-dim); }
.ct-line .ct-go { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ct-more-fold > summary { list-style: none; cursor: pointer; padding: 9px 14px; font-size: .86rem; font-weight: 600; color: var(--u-ink); background: var(--u-card-2); border-top: 1px solid var(--u-edge); }
.ct-more-fold > summary::-webkit-details-marker { display: none; }
.ct-more-fold > summary::before { content: "▸ "; color: var(--u-faint); }
.ct-more-fold[open] > summary::before { content: "▾ "; }
@media (max-width: 575.98px) {
    .ct-line { grid-template-columns: 36px minmax(0, 1fr); }
    .ct-line .ct-go { grid-column: 2; justify-content: flex-start; }
    .ct-line__do { white-space: normal; }
}
.ct-showing { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--u-ink); color: var(--u-card); font-size: .76rem; font-weight: 600; }
.ct-showing[hidden] { display: none; }
.ct-showing__x { border: 0; background: rgba(255, 255, 255, .16); color: inherit; width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: .7rem; cursor: pointer; }
.ct-chip[data-tone="quiet"] { opacity: .85; }
.ct-later > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--u-edge);
                      background: var(--u-card-2); font-size: .86rem; font-weight: 600; color: var(--u-ink); cursor: pointer; list-style: none; }
.ct-later > summary::-webkit-details-marker { display: none; }
.ct-later > summary::before { content: "▸"; color: var(--u-faint); }
.ct-later[open] > summary::before { content: "▾"; }
.ct-later > summary small { font-weight: 400; color: var(--u-dim); }
.ct-later[hidden] { display: none; }
.ct-acts { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 1rem; }
.ct-act { text-decoration: none; color: inherit; margin: 0; }
.ct-act .u-big { line-height: 1.1; }
.ct-act__go { font-size: .72rem; color: var(--u-today); margin-top: 4px; }
@media (max-width: 767.98px) {
    .ct-acts { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ct-acts > :first-child { grid-column: 1 / -1; }
}
.ct-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--u-edge); }
.ct-row[hidden] { display: none; }
/* 22 Oct 2026 (#276, the owner: "ตัว S ในกรอบรูปของ Samkan เบี้ยว"): flex: none — a long badge beside it squeezed the circle into an oval */
.ct-av { --c: var(--u-rest); width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
         font-weight: 800; font-size: .78rem; color: #fff; background: var(--c); text-decoration: none; overflow: hidden; white-space: nowrap; }
.ct-av[data-tone="run"]   { --c: var(--u-run); }
.ct-av[data-tone="bike"]  { --c: var(--u-bike); }
.ct-av[data-tone="swim"]  { --c: var(--u-swim); }
.ct-av[data-tone="other"] { --c: var(--u-other); }
.ct-av[data-tone="race"]  { --c: var(--u-race); }
.ct-av[data-tone="free"]  { --c: var(--u-free); }
.ct-av[data-tone="today"] { --c: var(--u-today); }
.ct-av[data-tone="part"]  { --c: var(--u-part); }
.ct-name { font-weight: 700; font-size: .92rem; color: var(--u-ink); text-decoration: none; }
.ct-name:hover { text-decoration: underline; color: var(--u-ink); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ct-chip { --c: var(--u-rest); --c-rgb: var(--u-rest-rgb);
           display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
           font-size: .76rem; font-weight: 600; line-height: 1.5; text-decoration: none;
           color: var(--c); background: rgba(var(--c-rgb), .1); border: 1px solid rgba(var(--c-rgb), .28); }
a.ct-chip:hover { color: var(--c); background: rgba(var(--c-rgb), .18); }
.ct-chip[data-tone="bad"]  { --c: var(--u-bad);   --c-rgb: var(--u-bad-rgb); }
.ct-chip[data-tone="warn"] { --c: var(--u-part);  --c-rgb: var(--u-part-rgb); }
.ct-chip[data-tone="info"] { --c: var(--u-today); --c-rgb: var(--u-today-rgb); }
.ct-chip[data-tone="race"] { --c: var(--u-race);  --c-rgb: var(--u-race-rgb); }
.ct-go { display: flex; flex-direction: column; gap: 4px; }
.ct-go .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ct-row { grid-template-columns: 34px minmax(0, 1fr); padding: 10px 12px; }
    .ct-go { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
}
.ct-more { display: block; width: 100%; padding: 9px; border: 0; border-top: 1px solid var(--u-edge); background: transparent;
           color: var(--u-today); font-weight: 600; font-size: .85rem; }
.ct-more[hidden] { display: none; }
.ct-fold > summary { cursor: pointer; list-style: none; }
.ct-fold > summary::-webkit-details-marker { display: none; }
.ct-fold > summary::after { content: "▸"; color: var(--u-faint); margin-left: auto; }
.ct-fold[open] > summary::after { content: "▾"; }
.ct-fold__sum { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--u-radius);
                background: var(--u-card); border: 1px solid var(--u-edge); font-weight: 600; font-size: .9rem; color: var(--u-ink); }

/* 25 Oct 2026 (#361): the coach's top bar on a laptop — one line from 1200 px: a short label (.u-ns) for a long one (.u-nl), the icon alone for the name,
   Logout and "Turn on notifications" (their words in the title); the whole words from 1700 px and in the folded phone menu */
.u-ns { display: none; }
@media (min-width: 1200px) {
  .u-nav-coach .nav-link, .u-nav-compact .nav-link { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1699.98px) {   /* the admin's whole words need about 1,640 px */
  .u-nav-coach > .nav-item > .nav-link { padding-left: .42rem !important; padding-right: .42rem !important; }
  .u-nav-coach .u-nl, .u-nav-compact .u-nl { display: none; }
  .u-nav-coach .u-ns { display: inline; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {   /* the narrowest: those three by their icon alone */
  .u-nav-coach .u-ns { display: none; }
}

/* 19 Oct 2026 (#206): the athlete's menu (Views/Shared/_Layout .u-nav-athlete): five tabs on one line each, and "More" in groups, two columns wide */
.u-nav-athlete .nav-link { white-space: nowrap; }
.u-more-menu .u-more-group { break-inside: avoid; padding-bottom: 4px; }
.u-more-menu .dropdown-header { font-size: .72rem; font-weight: 700; }
@media (min-width: 1200px) {
  .u-more-menu { column-count: 2; column-gap: 6px; min-width: 470px; }
}

/* 19 Oct 2026 (#209): Race Planning (Views/RaceEvents/EditDynamic + _RaceRowFields): the new race on top, the coming races as one-line rows that
   open their fields, the past folded; Race A / B / C as three buttons; the save bar stays at the bottom of the screen */
.rp-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 2px 8px; font-size: .92rem; font-weight: 800; color: var(--u-ink); }
.rp-sec small { font-size: .78rem; font-weight: 500; color: var(--u-dim); }
.rp-card { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--u-edge); border-radius: 14px; background: var(--u-card); }
.rp-card--new { border: 2px solid rgba(var(--u-today-rgb), .55); background: rgba(var(--u-today-rgb), .03); }
.rp-race { margin-bottom: 8px; }
.rp-race > .rp-card { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.rp-sum { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 14px; list-style: none; cursor: pointer;
          border: 1px solid var(--u-edge); border-radius: 14px; background: var(--u-card); }
.rp-sum::-webkit-details-marker { display: none; }
.rp-sum:hover { border-color: var(--u-edge-strong); }
.rp-race[open] > .rp-sum { border-color: rgba(var(--u-today-rgb), .45); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rp-sum__date { text-align: center; line-height: 1.05; }
.rp-sum__date b { display: block; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-sum__date small { font-size: .7rem; color: var(--u-dim); }
.rp-sum__name { display: flex; align-items: center; gap: 6px; font-size: .95rem; font-weight: 700; color: var(--u-ink); }
.rp-sum__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: .78rem; color: var(--u-dim); }
.rp-sum__edit { font-size: .8rem; color: var(--u-today); white-space: nowrap; }
.rp-sum__edit::after { content: " ▾"; }
.rp-race[open] .rp-sum__edit::after { content: " ▴"; }
.rp-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 6px; font-size: .72rem; font-weight: 800; color: #fff; background: #64748b; }
.rp-tag[data-t="A"] { background: #dc2626; }
.rp-tag[data-t="B"] { background: #d97706; }
.rp-st { --c: var(--u-rest); --c-rgb: var(--u-rest-rgb); display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
         color: var(--c); background: rgba(var(--c-rgb), .1); border: 1px solid rgba(var(--c-rgb), .35); }
.rp-st[data-st="Registered"] { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.rp-st[data-st="Planned"]    { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); }
.rp-days { font-weight: 700; color: var(--u-race); }
.rp-past > summary.rp-sec--fold { margin: 14px 0 8px; padding: 10px 14px; list-style: none; cursor: pointer; border: 1px dashed var(--u-edge-strong); border-radius: 14px; background: var(--u-card-2); }
.rp-past > summary::-webkit-details-marker { display: none; }
.rp-past > summary > span::before { content: "▸ "; color: var(--u-faint); }
.rp-past[open] > summary > span::before { content: "▾ "; }
.rp-abc { display: flex; width: max-content; overflow: hidden; border: 1px solid var(--u-edge-strong); border-radius: 8px; }
.rp-abc__b { padding: 4px 14px; border: 0; border-right: 1px solid var(--u-edge); background: var(--u-card); color: var(--u-ink); font-size: .8rem; font-weight: 800; }
.rp-abc__b:last-child { border-right: 0; }
.rp-abc__b.is-on[data-letter="A"] { background: #dc2626; color: #fff; }
.rp-abc__b.is-on[data-letter="B"] { background: #d97706; color: #fff; }
.rp-abc__b.is-on[data-letter="C"] { background: #64748b; color: #fff; }
.rp-abc__b:focus-visible { outline: 2px solid var(--u-today); outline-offset: -2px; }
.rp-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin-top: 8px; padding: 10px 0; border-top: 1px solid var(--u-edge); background: var(--u-page); }
@media (max-width: 575.98px) {
    .rp-sum { grid-template-columns: 52px minmax(0, 1fr); }
    .rp-sum__edit { grid-column: 2; }
}

/* 19 Oct 2026 (#215): the race checklist in parts (Views/RacePreparation/Checklist + /js/race-checklist.js): a part's header opens and closes it and
   carries its mark; the save bar stays at the bottom of the screen */
.ck-progress { margin: 0 2px 10px; font-size: .85rem; font-weight: 700; color: var(--u-dim); }
.ck-progress[hidden] { display: none; }
.ck-head { position: relative; padding-right: 7.5rem !important; cursor: pointer; user-select: none; }
.ck-head:focus-visible { outline: 2px solid var(--u-today); outline-offset: -2px; }
.ck-mark { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
           padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--c);
           background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .35); white-space: nowrap; }
.ck-mark[data-filled="true"] { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.ck-mark::after { content: " ▾"; }
.ck-part--closed .ck-mark::after { content: " ▸"; }
.ck-part--closed { height: auto !important; flex-grow: 0 !important; }   /* a closed part does not keep the height of its neighbour column */
@media (min-width: 768px) {   /* a phone has the page's own fixed save button */
  .ck-savebar { position: sticky; bottom: 0; z-index: 5; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--u-edge); background: var(--u-page); }
}

/* 19 Oct 2026 (#216): the coach's feedback line where the athlete looks (Views/Shared/_CoachFeedbackLine on My Week and the Dashboard) and the
   "new feedback" mark of My Week's one-line day row; /js/feedback-read.js removes the marks once read */
.u-fb { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: .84rem;
        background: rgba(var(--u-today-rgb), .07); border: 1px solid rgba(var(--u-today-rgb), .22); }
.u-fb__ic { color: var(--u-today); font-size: 1rem; line-height: 1.3; flex-shrink: 0; }
.u-fb__body { min-width: 0; flex: 1 1 auto; }
.u-fb__head { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--u-today); }
.u-fb__new { padding: 0 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; color: #fff; background: var(--u-today); }
.u-fb__t { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--u-ink); }
.u-fb-dot { margin-left: 4px; font-size: .8rem; }

/* 19 Oct 2026 (#218): the coach's recurring own courses (Views/CourseLibraryCleanup/Recurring) */
.rc-sec { margin: 6px 2px 8px; font-size: .95rem; font-weight: 800; color: var(--u-ink); }
.rc-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px;
          border: 1px solid var(--u-edge); border-radius: 14px; background: var(--u-card); }
.rc-main { min-width: 0; flex: 1 1 360px; }
.rc-name { font-weight: 700; font-size: .92rem; color: var(--u-ink); }
.rc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: .78rem; color: var(--u-dim); }
.rc-fit { padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--u-race); background: rgba(var(--u-race-rgb), .08);
          border: 1px solid rgba(var(--u-race-rgb), .25); }
.rc-own { margin-top: 2px; font-size: .74rem; color: var(--u-faint); }
.rc-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* 19 Oct 2026 (#217): the race-week card under My Week's countdown banner (Views/AthleteWorkouts/_RaceWeekCard, Helpers/RaceWeekCard) */
.u-countdown.u-countdown--card { margin-bottom: 0 !important; border-radius: 18px 18px 0 0; }
.rw-card { margin-bottom: 1rem; padding: 2px 14px 6px; border: 1px solid var(--u-edge); border-top: 0; border-radius: 0 0 18px 18px; background: var(--u-card); }
.rw-line { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0;
           border-bottom: 1px solid var(--u-edge); color: inherit; text-decoration: none; }
.rw-line:last-child { border-bottom: 0; }
.rw-line:hover .rw-t { text-decoration: underline; }
.rw-ic { font-size: 1rem; color: var(--u-dim); }
.rw-main { display: flex; flex-direction: column; min-width: 0; }
.rw-t { font-size: .86rem; font-weight: 700; color: var(--u-ink); }
.rw-s { font-size: .76rem; color: var(--u-dim); }
.rw-bar { display: block; height: 6px; margin: 4px 0 2px; border-radius: 99px; background: rgba(var(--u-done-rgb), .15); overflow: hidden; }
.rw-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--u-done); }
.rw-pill { --c: var(--u-today); --c-rgb: var(--u-today-rgb); padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700;
           white-space: nowrap; color: var(--c); background: rgba(var(--c-rgb), .1); border: 1px solid rgba(var(--c-rgb), .3); }
.rw-pill[data-tone="ok"]   { --c: var(--u-done); --c-rgb: var(--u-done-rgb); }
.rw-pill[data-tone="wait"] { --c: var(--u-wait); --c-rgb: var(--u-wait-rgb); }

/* 20 Oct 2026 (#238, docs/design/athlete-settings): the athlete's Settings page — rows, segments, switches, radios, the saved toast; the coach's
   read-only card on Athletes/Details (.st-coach) */
.st-wrap { max-width: 720px; }
.st-sec { border-radius: 14px; overflow: hidden; }
.st-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; font-size: .95rem; font-weight: 800; border-bottom: 1px solid var(--u-edge); }
.st-h i { color: var(--u-today); }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--u-edge); }
.st-row:last-child { border-bottom: 0; }
.st-row.st-stack { grid-template-columns: 1fr; }
.st-k { font-size: .9rem; font-weight: 700; }
.st-k em { font-style: normal; font-weight: 500; color: var(--u-dim); font-size: .78rem; margin-left: 4px; }
.st-d { font-size: .78rem; color: var(--u-dim); margin-top: 2px; line-height: 1.4; }
.st-sw { width: 42px; height: 24px; border-radius: 999px; border: 0; background: var(--u-edge-strong); position: relative; flex: none; padding: 0; cursor: pointer; transition: background .15s; }
.st-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.st-sw.is-on { background: var(--u-done); }
.st-sw.is-on::after { left: 21px; }
.st-sw:focus-visible, .st-seg__b:focus-visible { outline: 2px solid var(--u-today); outline-offset: 2px; }
.st-seg { display: inline-flex; border: 1px solid var(--u-edge-strong); border-radius: 9px; overflow: hidden; font-size: .78rem; font-weight: 700; }
.st-seg__b { padding: 5px 10px; color: var(--u-dim); background: var(--u-card); border: 0; border-right: 1px solid var(--u-edge); white-space: nowrap; cursor: pointer; text-decoration: none; }
.st-seg__b:last-child { border-right: 0; }
.st-seg__b.is-on { background: var(--u-today); color: #fff; }
.st-seg.st-mt { margin-top: 6px; }
.st-lock { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.st-chip { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--u-edge); background: rgba(var(--u-today-rgb), .06); color: var(--u-today); }
.st-chip.st-grey { background: transparent; color: var(--u-dim); }
.st-radio { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .85rem; padding: 8px 10px; border: 1px solid var(--u-edge); border-radius: 10px; margin-top: 6px; cursor: pointer; }
.st-radio.is-on { border-color: var(--u-today); background: rgba(var(--u-today-rgb), .06); }
.st-radio input { margin-top: 3px; }
.st-radio small { display: block; color: var(--u-dim); font-size: .74rem; }
.st-foot { font-size: .74rem; color: var(--u-dim); padding: 7px 14px 9px; background: rgba(var(--u-today-rgb), .03); border-top: 1px solid var(--u-edge); }
.st-push.is-on { color: var(--u-done); font-weight: 700; }
.st-toast { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #14532d; color: #fff;
            font-size: .82rem; font-weight: 700; padding: 7px 16px; border-radius: 999px; transition: opacity .15s, transform .15s; z-index: 1080; }
.st-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.st-toast.is-bad { background: #991b1b; }
.st-coach { display: grid; gap: 2px; font-size: .85rem; }
.st-coach > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--u-edge); }
.st-coach > div:last-child { border-bottom: 0; }
.st-coach b { font-weight: 700; }

/* 20 Oct 2026 (#242, the athlete guide v4 — Views/Help/GuideIndex, GuideChapter, Guide/_Block, Guide/_Figure): the reading page (.gd-*), the live
   illustrations drawn with the app's own classes (scoped under .gd-fig so nothing here leaks into the pages), and the small ? that leads from a page
   to its chapter (.u-help) */
.gd-wrap { max-width: 860px; margin: 0 auto; }
.gd-crumb { font-size: .78rem; color: var(--u-dim); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.gd-crumb a { color: var(--u-dim); text-decoration: none; }
.gd-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--u-hero-dim); margin-top: 6px; }
.gd-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gd-p { font-size: .94rem; line-height: 1.65; margin: 10px 0; }
.gd-h { font-size: 1.08rem; font-weight: 800; margin: 24px 0 8px; display: flex; align-items: center; gap: 8px; }
.gd-h__n { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--u-today); color: #fff; font-size: .78rem; font-weight: 800; }
.gd-k { font-weight: 700; padding: 0 6px; border-radius: 6px; background: rgba(var(--u-today-rgb), .1); color: var(--u-today); white-space: nowrap; }
.gd-steps { counter-reset: gd; display: grid; gap: 7px; margin: 8px 0 12px; padding: 0; list-style: none; }
.gd-steps li { counter-increment: gd; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: .92rem; line-height: 1.55; }
.gd-steps li::before { content: counter(gd); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--u-today-rgb), .12); color: var(--u-today); font-size: .74rem; font-weight: 800; margin-top: 2px; }
.gd-rules { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 8px 12px; font-size: .9rem; margin: 10px 0; line-height: 1.5; }
.gd-rules dt { font-weight: 700; color: var(--u-dim); font-size: .82rem; }
.gd-rules dd { margin: 0; }
.gd-box { border-left: 4px solid; border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 14px 0; font-size: .9rem; line-height: 1.55; }
.gd-box.tip { border-color: var(--u-done); background: rgba(var(--u-done-rgb), .07); }
.gd-box.warn { border-color: #ea580c; background: rgba(234, 88, 12, .08); }
.gd-box b.h { display: block; margin-bottom: 4px; }
.gd-faq { display: grid; gap: 6px; }
.gd-faq details { border: 1px solid var(--u-edge); border-radius: 12px; padding: 8px 12px; font-size: .9rem; background: var(--u-card); }
.gd-faq summary { font-weight: 700; cursor: pointer; }
.gd-faq details p { margin: 6px 0 0; font-size: .88rem; }
.gd-fig { margin: 12px 0 14px; border: 1px solid var(--u-edge); border-radius: 14px; overflow: hidden; background: var(--u-card); }
.gd-fig__bar { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: .72rem; color: var(--u-dim); background: rgba(var(--u-today-rgb), .04); border-bottom: 1px solid var(--u-edge); }
.gd-fig__bar i { color: var(--u-today); }
.gd-fig__body { padding: 12px; overflow-x: auto; }
.gd-fig__cap { font-size: .8rem; color: var(--u-dim); padding: 7px 12px 9px; border-top: 1px dashed var(--u-edge); line-height: 1.5; margin: 0; }
.gd-pin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ea580c; color: #fff; font-size: .68rem; font-weight: 800; vertical-align: middle; flex: none; }
.gd-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; margin: 12px 0 6px; }
.gd-flow > div { position: relative; border: 1px solid var(--u-edge); border-radius: 12px; padding: 8px; font-size: .78rem; text-align: center; background: var(--u-card); }
.gd-flow > div b { display: block; font-size: .84rem; margin-bottom: 2px; }
.gd-flow > div small { color: var(--u-dim); display: block; line-height: 1.35; }
.gd-flow > div:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%; transform: translateY(-55%); color: var(--u-dim); font-size: 16px; font-weight: 800; background: var(--bs-body-bg); padding: 0 1px; }
.gd-check { counter-reset: gc; display: grid; gap: 8px; margin: 10px 0 4px; padding: 0; list-style: none; }
.gd-check li { counter-increment: gc; }
.gd-check a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--u-edge); border-radius: 12px; background: var(--u-card); text-decoration: none; color: var(--bs-body-color); font-size: .92rem; }
.gd-check a::before { content: counter(gc); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--u-today); color: #fff; font-weight: 800; font-size: .84rem; }
.gd-check__go { font-size: .76rem; color: var(--u-today); font-weight: 700; white-space: nowrap; }
.gd-chapters-h { font-size: 1rem; font-weight: 800; margin: 26px 0 8px; }
.gd-chapters { display: grid; gap: 8px; }
.gd-chapter { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--u-edge); border-radius: 12px; background: var(--u-card); text-decoration: none; color: var(--bs-body-color); }
.gd-chapter__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--u-today-rgb), .1); color: var(--u-today); font-size: 1.05rem; }
.gd-chapter__t b { display: block; font-size: .95rem; }
.gd-chapter__t small { color: var(--u-dim); font-size: .78rem; line-height: 1.35; }
.gd-chapter__m { font-size: .76rem; color: var(--u-dim); white-space: nowrap; }
.gd-old { font-size: .8rem; color: var(--u-dim); margin-top: 16px; }
.gd-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; }
.gd-nav a { flex: 1; text-decoration: none; border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; font-size: .88rem; color: var(--bs-body-color); background: var(--u-card); }
.gd-nav a small { display: block; color: var(--u-dim); font-size: .72rem; }
.gd-nav a.next { text-align: right; }
.gd-nav > span { flex: 1; }
.u-help { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: .7rem; font-weight: 800; text-decoration: none; margin-left: 8px; vertical-align: middle; letter-spacing: 0; text-transform: none; opacity: .85; }
.u-help:hover { opacity: 1; color: #fff; background: rgba(255,255,255,.15); }
/* the illustrations */
.gd-fig .gd-shot { font-size: .88rem; }
.gd-fig .fake-sum { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; padding: 7px 10px; border: 1px solid var(--u-edge); border-radius: 10px; background: var(--u-card); flex-wrap: wrap; }
.gd-fig .fake-sum .chg { color: var(--u-today); font-weight: 500; font-size: .8rem; margin-left: 4px; }
.gd-fig .fake-pick { border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; }
.gd-fig .fake-pick .t { font-weight: 700; font-size: .9rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.gd-fig .fake-act { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--u-edge); border-radius: 10px; font-size: .84rem; margin-bottom: 6px; }
.gd-fig .fake-act.on { border-color: #fc4c02; background: rgba(252, 76, 2, .06); }
.gd-fig .fake-act .r { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #94a3b8; }
.gd-fig .fake-act.on .r { border-color: #fc4c02; background: radial-gradient(#fc4c02 45%, transparent 50%); }
.gd-fig .fake-act small { color: var(--u-dim); display: block; }
.gd-fig .btn-orange { background: #fc4c02; border-color: #fc4c02; color: #fff; }
.gd-fig .mc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-fig .mc > div { border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.gd-fig .mc > div.log { border-color: #198754; }
.gd-fig .mc .t { font-weight: 700; font-size: .9rem; }
.gd-fig .mc .d { font-size: .78rem; color: var(--u-dim); line-height: 1.45; }
.gd-fig .rpe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0; }
.gd-fig .rpe span { display: grid; place-items: center; height: 34px; border-radius: 8px; border: 1px solid var(--u-edge); font-weight: 800; font-size: .9rem; }
.gd-fig .rpe span.on { background: var(--u-today); color: #fff; border-color: var(--u-today); }
.gd-fig .rpe-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; font-size: .62rem; color: var(--u-dim); text-align: center; }
.gd-fig .st-row-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--u-edge); border-radius: 12px; font-size: .86rem; flex-wrap: wrap; }
.gd-fig .st-row-demo small { color: var(--u-dim); display: block; font-size: .76rem; }
.gd-fig .rows { display: grid; gap: 6px; }
.gd-fig .mw-stack.mw-own .mw-dayfold > summary.mw-dayrow { list-style: none; }
.gd-fig .gd-menu { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #1f2937; color: #e5e7eb; font-size: .86rem; margin-bottom: 6px; }
.gd-fig .gd-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #212529; color: #e5e7eb; font-size: .8rem; }
.gd-fig .gd-tabs > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px; }
.gd-fig .gd-tabs > span.is-on { background: rgba(255,255,255,.12); font-weight: 700; }
.gd-fig .gd-ios { max-width: 300px; }
.gd-fig .gd-ios__url { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: #f1f3f5; color: #1f2937; font-size: .84rem; }
.gd-fig .gd-ios__sheet { margin-top: 8px; border-radius: 12px; background: #fff; border: 1px solid #e5e7eb; color: #1f2937; overflow: hidden; }
.gd-fig .gd-ios__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f3f5; font-size: .86rem; }
.gd-fig .gd-ios__home { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .78rem; }
.gd-fig .gd-ios__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #10254a, #38bdf8); color: #fff; font-weight: 800; }
.gd-fig .gd-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #10254a, #1b3a6b); color: #fff; margin-bottom: 8px; font-size: .9rem; }
.gd-fig .gd-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #d8ff54; font-weight: 800; font-size: .8rem; }
.gd-fig .gd-today { border: 1px solid var(--u-edge); border-left: 4px solid var(--u-today); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--u-card); }
.gd-fig .gd-today .d { font-size: .72rem; font-weight: 800; color: var(--u-today); display: flex; align-items: center; gap: 6px; }
.gd-fig .gd-today .d small { font-weight: 400; color: var(--u-dim); }
.gd-fig .gd-today .t { font-size: .95rem; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gd-fig .gd-today .m { font-size: .78rem; color: var(--u-dim); margin-top: 3px; }
.gd-fig .gd-today .btns { margin-top: 8px; }
.gd-fig .gd-ck { margin-top: 8px; border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; }
.gd-fig .gd-ck__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .84rem; border-bottom: 1px dashed var(--u-edge); }
.gd-fig .gd-ck__e .fi { margin-left: 4px; width: 1.35em; height: 1.35em; color: var(--u-faint); }   /* #281: the check-in's drawings, the fourth chosen */
.gd-fig .gd-ck__e .fi:nth-child(4) { color: var(--u-f4); }
.gd-fig .gd-ck__f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.gd-fig .gd-ck__f span { display: block; border: 1px solid var(--u-edge); border-radius: 8px; padding: 4px 8px; font-weight: 700; }
.gd-fig .gd-ck__f small { display: block; font-weight: 400; color: var(--u-dim); font-size: .7rem; }
.gd-fig .gd-fb { border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; background: var(--u-card); }
.gd-fig .gd-fb__h { font-weight: 800; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.gd-fig .gd-fb__v { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(var(--u-done-rgb), .12); color: var(--u-done); }
.gd-fig .gd-fb__t { margin-top: 6px; font-size: .9rem; line-height: 1.5; }
@media (max-width: 560px) {
  .gd-flow { grid-template-columns: 1fr 1fr; }
  .gd-flow > div:not(:last-child)::after { display: none; }
  .gd-flow > div:nth-child(2) { grid-column: 1 / -1; }
  .gd-fig .mc { grid-template-columns: 1fr; }
  .gd-fig .rpe-scale { display: none; }
  .gd-rules { grid-template-columns: 1fr; gap: 2px 0; }
  .gd-rules dd { margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .gd-check a { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; }   /* the chapter label under the text, so the text keeps its width */
  .gd-check__go { grid-column: 2; }
}
/* 20 Oct 2026 (#242, phase 2): the figures of chapters 8-11 — a race row, the level bar, the Circle feed */
.gd-fig .gd-race { border: 1px solid var(--u-edge); border-radius: 12px; padding: 9px 12px; margin-bottom: 8px; background: var(--u-card); }
.gd-fig .gd-race--past { opacity: .75; }
.gd-fig .gd-race__h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; }
.gd-fig .gd-race__d { color: var(--u-dim); font-size: .78rem; margin-left: auto; }
.gd-fig .gd-race__m { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gd-fig .gd-race__b { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gd-fig .gd-lvl { display: flex; align-items: center; gap: 10px; border: 1px solid var(--u-edge); border-radius: 12px; padding: 10px 12px; background: var(--u-card); }
.gd-fig .gd-lvl__m { font-size: 2rem; line-height: 1; }
.gd-fig .gd-lvl__bar { height: 8px; border-radius: 99px; background: var(--u-edge); overflow: hidden; margin-top: 4px; }
.gd-fig .gd-lvl__bar i { display: block; height: 100%; background: var(--u-done); border-radius: 99px; }
.gd-fig .gd-feed { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .86rem; }
.gd-fig .gd-feed__a { width: 34px; height: 34px; border-radius: 50%; background: var(--u-today); color: #fff; display: grid; place-items: center; font-weight: 800; }
.gd-fig .mascot { display: inline-flex; gap: 6px; }
.gd-fig .mascot span { font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--u-edge); }
.gd-fig .mascot span.on { border-color: #f59e0b; background: rgba(245, 158, 11, .12); }

/* 20 Oct 2026 (#243, docs/design/coach-home-visual): the coach's Home answers its three questions the way the athlete's pages look — the numbers as
   tiles with faces, the week ring, the board of today (.ct-board / .ct-who), cards instead of sentences (.ct-cards / .ct-line as a card) with the
   signals as badges and each athlete's seven dots (.ct-week) */
.ct-ring { margin-left: auto; }
.ct-nums { gap: 10px; }
.ct-num { --c: #fca5a5; --c-rgb: 252, 165, 165; position: relative; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; border-radius: 14px;
          background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); flex: 1 1 160px; }
.ct-num::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--c); }
.ct-num b { font-size: 1.9rem; }
.ct-num > span:first-of-type { font-weight: 700; }
.ct-num[data-k="health"] { --c: #ef4444; --c-rgb: 239, 68, 68; } .ct-num[data-k="wait"] { --c: #f59e0b; --c-rgb: 245, 158, 11; } .ct-num[data-k="race"] { --c: #ec4899; --c-rgb: 236, 72, 153; }
.ct-num:hover { background: rgba(255, 255, 255, .14); }
.ct-faces { display: inline-flex; margin-left: auto; }
.ct-faces i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #1b3a6b; background: var(--c); color: #fff; display: inline-grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; margin-left: -7px; }
.ct-faces i:first-child { margin-left: 0; }
.ct-board__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 14px; }
.ct-board__t { font-weight: 800; }
.ct-board__s { font-size: .76rem; color: var(--u-dim); }
.ct-board__all { margin-left: auto; font-size: .8rem; text-decoration: none; }
/* 21 Oct 2026 (#274, the owner's "แบบ B" of docs/design/today-board: "สวยขึ้น มีเฉดสี ดูโมเดิร์นขึ้น" + "อยู่ตรงกลางเมื่อจอใหญ่ เหมือน Needs care"): story-style
   circles — a ring in the sport's colours (full and ticked when trained, dashed when planned, grey for rest and no plan), the name, a pill with the
   minutes, the time or the day's word; a wrapping row centred like the cards */
.ct-board__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; padding: 14px 16px 16px; }
.ct-who { --c: var(--u-dim); --c-rgb: 148, 163, 184; --c2: color-mix(in srgb, var(--c) 45%, #fff); display: block; width: 76px; text-align: center;
          font-size: .74rem; line-height: 1.15; color: var(--bs-body-color); text-decoration: none; min-width: 0; }
.ct-who:hover { color: var(--bs-body-color); }
.ct-who__ring { position: relative; display: block; width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; padding: 3px;
                background: conic-gradient(from 210deg, var(--c2), var(--c), var(--c2)); transition: transform .15s ease; }
.ct-who:hover .ct-who__ring { transform: translateY(-2px); }
.ct-who__ic { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--u-card); font-size: 1.35rem; line-height: 1;
              color: var(--c); background: linear-gradient(rgba(var(--c-rgb), .10), rgba(var(--c-rgb), .10)), var(--u-card); }
[data-bs-theme="dark"] .ct-who__ic { background: linear-gradient(rgba(var(--c-rgb), .18), rgba(var(--c-rgb), .18)), var(--u-card); }
/* 22 Oct 2026 (#275, docs/design/sport-icons option 3, then "ขยายไปหน้าอื่น ๆ"): the sport icons — one duotone set (wwwroot/img/sport/*.svg) drawn through a
   mask in the text's colour: <i class="si si-run"> (Helpers/SportIcons). The lines are full, the closed shapes at .28 in the file, so one colour makes both
   tones; it sizes with the text like an icon font. Bump ?v= when a file changes (cached by URL). */
.si { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; font-style: normal; line-height: 1; }
.si::before, .bi.si::before { content: ""; display: block; width: 100%; height: 100%; background-color: currentColor; vertical-align: 0;
                              -webkit-mask: var(--si-img) center / contain no-repeat; mask: var(--si-img) center / contain no-repeat; }
.si-run { --si-img: url("/img/sport/run.svg?v=1"); } .si-bike { --si-img: url("/img/sport/bike.svg?v=1"); } .si-swim { --si-img: url("/img/sport/swim.svg?v=1"); }
.si-other { --si-img: url("/img/sport/other.svg?v=1"); } .si-rest { --si-img: url("/img/sport/rest.svg?v=1"); } .si-race { --si-img: url("/img/sport/race.svg?v=1"); }
.si-none { --si-img: url("/img/sport/none.svg?v=1"); }
.si-free { --si-img: url("/img/sport/free.svg?v=1"); }   /* #283: Free Style, a sparkle (in place of 🔓 and 🎯) */
.ct-who__ic .si { width: 26px; height: 26px; vertical-align: 0; }
/* 22 Oct 2026 (#279, the owner's "B" + "L1" on docs/design/mood-faces): a result's feel scales as drawn icons — Legs a figure whose legs tell it, Energy a
   battery, Mood a face (wwwroot/img/feel/{scale}-{1..5}.svg, Helpers/FeelIcons) through a mask in the text's colour; a step's colour by data-v, 1 red … 5 green */
.fi { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.28em; flex: none; font-style: normal; }
.fi::before { content: ""; display: block; width: 100%; height: 100%; background-color: currentColor;
              -webkit-mask: var(--fi-img) center / contain no-repeat; mask: var(--fi-img) center / contain no-repeat; }
.fi-legs-1 { --fi-img: url("/img/feel/legs-1.svg?v=1"); }
.fi-legs-2 { --fi-img: url("/img/feel/legs-2.svg?v=1"); }
.fi-legs-3 { --fi-img: url("/img/feel/legs-3.svg?v=1"); }
.fi-legs-4 { --fi-img: url("/img/feel/legs-4.svg?v=1"); }
.fi-legs-5 { --fi-img: url("/img/feel/legs-5.svg?v=1"); }
.fi-energy-1 { --fi-img: url("/img/feel/energy-1.svg?v=1"); }
.fi-energy-2 { --fi-img: url("/img/feel/energy-2.svg?v=1"); }
.fi-energy-3 { --fi-img: url("/img/feel/energy-3.svg?v=1"); }
.fi-energy-4 { --fi-img: url("/img/feel/energy-4.svg?v=1"); }
.fi-energy-5 { --fi-img: url("/img/feel/energy-5.svg?v=1"); }
.fi-mood-1 { --fi-img: url("/img/feel/mood-1.svg?v=1"); }
.fi-mood-2 { --fi-img: url("/img/feel/mood-2.svg?v=1"); }
.fi-mood-3 { --fi-img: url("/img/feel/mood-3.svg?v=1"); }
.fi-mood-4 { --fi-img: url("/img/feel/mood-4.svg?v=1"); }
.fi-mood-5 { --fi-img: url("/img/feel/mood-5.svg?v=1"); }
.fi-sleep-1 { --fi-img: url("/img/feel/sleep-1.svg?v=1"); }
.fi-sleep-2 { --fi-img: url("/img/feel/sleep-2.svg?v=1"); }
.fi-sleep-3 { --fi-img: url("/img/feel/sleep-3.svg?v=1"); }
.fi-sleep-4 { --fi-img: url("/img/feel/sleep-4.svg?v=1"); }
.fi-sleep-5 { --fi-img: url("/img/feel/sleep-5.svg?v=1"); }   /* #281: the morning check-in's Sleep */
:is(.feel-tile, .feel-chip, .feel-word)[data-v="1"] { --fc: var(--u-f1); }
:is(.feel-tile, .feel-chip, .feel-word)[data-v="2"] { --fc: var(--u-f2); }
:is(.feel-tile, .feel-chip, .feel-word)[data-v="3"] { --fc: var(--u-f3); }
:is(.feel-tile, .feel-chip, .feel-word)[data-v="4"] { --fc: var(--u-f4); }
:is(.feel-tile, .feel-chip, .feel-word)[data-v="5"] { --fc: var(--u-f5); }
.feel-row { margin-bottom: 10px; }
.feel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.feel-head__k { font-size: .8rem; font-weight: 700; color: var(--u-ink); }
.feel-word { font-size: .78rem; font-weight: 700; color: var(--fc, var(--u-dim)); }
.feel-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.feel-tile { height: 46px; padding: 0; border-radius: 12px; border: 1px solid var(--u-edge-strong); background: transparent; color: var(--u-faint);
             display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.feel-tile .fi { width: 28px; height: 28px; vertical-align: 0; }
.feel-tile:hover, .feel-tile:focus-visible { border-color: var(--fc); color: var(--fc); outline: none; }
.feel-tile.is-on { color: var(--fc); border-color: var(--fc); background: rgba(100, 116, 139, .12); background: color-mix(in srgb, var(--fc) 14%, transparent); box-shadow: inset 0 0 0 1px var(--fc); }
.feel-tile:disabled { cursor: default; }
.feel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .5rem; }
.feel-chip { --fc: var(--u-dim); display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 5px; border-radius: 999px; font-size: .76rem; font-weight: 700;
             color: var(--fc); background: rgba(100, 116, 139, .1); border: 1px solid var(--u-edge-strong);
             background: color-mix(in srgb, var(--fc) 13%, transparent); border-color: color-mix(in srgb, var(--fc) 40%, transparent); }
.feel-chip .fi { width: 1.35em; height: 1.35em; vertical-align: 0; }
.feel-chip__k { font-style: normal; font-weight: 600; color: var(--u-dim); }
.feel-chips--compact .feel-chip { font-size: .7rem; padding: 1px 7px 1px 4px; }
.feel-chip--icon { padding: 2px 5px; }
/* #281: the morning check-in — the tiles are radio labels (.btn-check), the chosen one by :checked; three boxes of numbers; a plain chip */
label.feel-tile { margin: 0; }
.btn-check:checked + .feel-tile { color: var(--fc); border-color: var(--fc); background: rgba(100, 116, 139, .12); background: color-mix(in srgb, var(--fc) 14%, transparent); box-shadow: inset 0 0 0 1px var(--fc); }
.btn-check:focus-visible + .feel-tile { outline: 2px solid var(--fc); outline-offset: 2px; }
.ck-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ck-num { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 8px; border: 1px solid var(--u-edge-strong); border-radius: 12px; cursor: text; min-width: 0; }
.ck-num > span { display: flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; color: var(--u-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-num__in { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 1.05rem; font-weight: 800; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.ck-num__in::placeholder { color: var(--u-faint); font-weight: 600; opacity: 1; }   /* an example, not an answer */
.ck-num:focus-within { border-color: var(--u-today); box-shadow: 0 0 0 2px rgba(var(--u-today-rgb), .2); }
.ck-note, .ck-save { border-radius: 12px; }
.ck-save { padding: 9px; font-weight: 800; }
.feel-chip.ck-plain { --fc: var(--u-dim); }
@media (prefers-reduced-motion: reduce) { .feel-tile { transition: none; } }
.ct-who__nm { display: block; margin-top: 5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-who__st { display: inline-block; max-width: 100%; margin-top: 2px; padding: 0 7px; border-radius: 99px; background: rgba(var(--c-rgb), .12); color: var(--c);
              font-size: .66rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-who[data-s="run"]  { --c: var(--u-run);  --c-rgb: var(--u-run-rgb); } .ct-who[data-s="bike"] { --c: var(--u-bike); --c-rgb: var(--u-bike-rgb); }
.ct-who[data-s="swim"] { --c: var(--u-swim); --c-rgb: var(--u-swim-rgb); } .ct-who[data-s="other"] { --c: var(--u-other); --c-rgb: var(--u-other-rgb); }
.ct-who[data-s="rest"] { --c: var(--u-rest); --c-rgb: var(--u-rest-rgb); } .ct-who[data-s="none"] { opacity: .55; }
.ct-who[data-st="race"] { --c: var(--u-race); --c-rgb: var(--u-race-rgb); }
.ct-who[data-st="done"] .ct-who__ic { background: linear-gradient(145deg, var(--c2), var(--c)); color: #fff; }
.ct-who[data-st="done"] .ct-who__ring::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
                                               background: linear-gradient(145deg, var(--c2), var(--c)); color: #fff; border: 2px solid var(--u-card);
                                               display: grid; place-items: center; font-size: .7rem; font-weight: 900; }
.ct-who[data-st="planned"] .ct-who__ring { background: repeating-conic-gradient(rgba(var(--c-rgb), .6) 0 12deg, transparent 12deg 22deg); }
.ct-who[data-st="rest"] .ct-who__ring, .ct-who[data-st="none"] .ct-who__ring { background: rgba(var(--c-rgb), .25); }
.ct-who--more .ct-who__ring { background: linear-gradient(145deg, #c7d2fe, #818cf8); }
.ct-who--more .ct-who__ic { font-size: .95rem; font-weight: 800; color: #4f46e5; }
[data-bs-theme="dark"] .ct-who--more .ct-who__ic { color: #a5b4fc; }
@media (prefers-reduced-motion: reduce) { .ct-who__ring { transition: none; } .ct-who:hover .ct-who__ring { transform: none; } }
/* 21 Oct 2026 (#250, the owner: "การ์ดด้านในถ้าดูในคอมหรือไม่เต็มช่องการ์ดใหญ่ ให้อยู่ตรงกลางได้ไหม"): a wrapping row of cards 300-360 px wide, each line
   centred — a group with fewer cards than the row holds sits in the middle, and so does a last row that is not full; a phone keeps one card a row (below) */
.ct-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; padding: 12px 14px; }
.ct-cards > .ct-line { flex: 0 1 340px; min-width: 300px; }
/* #276: minmax(0, 1fr) — with 1fr the one column grew to the longest badge and the card's text ran past its right edge */
.ct-cards .ct-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: stretch; padding: 10px 12px; border: 1px solid var(--u-edge); border-left: 4px solid var(--c, var(--u-edge)); border-radius: 12px; background: var(--u-card); }
.ct-cards .ct-line[data-group="health"] { --c: #dc2626; } .ct-cards .ct-line[data-group="wait"] { --c: #d97706; } .ct-cards .ct-line[data-group="race"] { --c: #db2777; }
.ct-line__head { display: flex; align-items: center; gap: 10px; }
.ct-line__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ct-line__badges .u-badge { font-size: .72rem; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }   /* #276: a long badge wraps inside the card */
.ct-cards .ct-line__do { white-space: normal; color: var(--u-done); font-size: .86rem; }
.ct-week { display: flex; align-items: center; gap: 4px; }
.ct-week__d { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; background: var(--u-edge); color: var(--u-dim); }
.ct-week__d[data-k="done"] { background: var(--u-done); color: #fff; }
.ct-week__d[data-k="missed"] { background: var(--u-bad); color: #fff; }
.ct-week__d[data-k="planned"] { background: transparent; border: 1px dashed var(--u-edge-strong); }
.ct-week__d[data-k="rest"] { background: rgba(var(--u-rest-rgb), .15); color: var(--u-rest); }
.ct-week__d[data-k="race"] { background: rgba(var(--u-race-rgb), .15); color: var(--u-race); border: 1px solid var(--u-race); }
.ct-week__d[data-today="1"] { outline: 2px solid var(--u-today); outline-offset: 1px; }
/* 21 Oct 2026 (#273): "hot tomorrow, above their usual" — one folded line under Needs care instead of a card each */
.ct-hot { margin: 0; border-bottom: 1px solid var(--u-edge); }
.ct-hot > summary { list-style: none; cursor: pointer; padding: 8px 16px; font-size: .84rem; font-weight: 700; color: var(--u-part); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ct-hot > summary::-webkit-details-marker { display: none; }
.ct-hot > summary::after { content: "▾"; margin-left: auto; color: var(--u-dim); }
.ct-hot[open] > summary::after { content: "▴"; }
.ct-hot__names { font-weight: 500; color: var(--u-dim); }
.ct-hot__list { display: grid; gap: 2px; padding: 0 16px 10px; }
.ct-hot__row { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; color: var(--u-ink); text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.ct-hot__row:hover { background: rgba(var(--u-part-rgb), .08); }
.ct-hot__row span { color: var(--u-dim); }
/* 21 Oct 2026 (#270, C10): "talked to them — is it an injury?" under a pain line (Views/Shared/_InjuryAsk): yes opens a small sheet, no is one tap */
.ct-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--u-edge); font-size: .82rem; }
.ct-ask__yes > summary { list-style: none; }
.ct-ask__yes > summary::-webkit-details-marker { display: none; }
.ct-ask__yes[open] { flex-basis: 100%; order: 3; }
.ct-ask__yes[open] > summary { display: none; }
.ct-ask__sheet { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; border: 1px solid var(--u-edge); border-radius: 12px; background: rgba(var(--u-today-rgb), .04); }
.ct-ask__sheet label { display: grid; gap: 2px; font-size: .74rem; color: var(--u-dim); }
.ct-ask__sheet select, .ct-ask__sheet input[type=date] { min-width: 130px; }
.ct-ask__seg { display: inline-flex; border: 1px solid var(--u-edge-strong); border-radius: 9px; overflow: hidden; }
.ct-ask__seg input { position: absolute; opacity: 0; pointer-events: none; }
.ct-ask__seg label { display: block; padding: 4px 10px; font-size: .8rem; color: var(--u-ink); cursor: pointer; border-right: 1px solid var(--u-edge-strong); white-space: nowrap; }
.ct-ask__seg label:last-of-type { border-right: 0; }
.ct-ask__seg input:checked + label { background: rgba(var(--u-bad-rgb), .14); color: var(--u-bad); font-weight: 700; }
.ct-ask__seg input:focus-visible + label { outline: 2px solid var(--u-today); outline-offset: -2px; }
/* 21 Oct 2026 (#271, C11): the weekly check on My Week (Views/AthleteWorkouts/_WeeklyHealthCheck) — radio chips, no script */
.whc__more > summary { list-style: none; cursor: pointer; text-align: center; font-size: .8rem; color: var(--u-dim); }
.whc__more > summary::-webkit-details-marker { display: none; }
.whc__q { border: 1px solid var(--u-edge); border-radius: 12px; padding: 8px 10px; margin: 0 0 7px; }
.whc__q legend { float: none; width: auto; font-size: .84rem; font-weight: 700; margin: 0 0 6px; padding: 0; }
.whc__q legend i { font-style: normal; font-weight: 400; color: var(--u-dim); }
.whc__opts { display: flex; flex-wrap: wrap; gap: 5px; }
.whc__opts input { position: absolute; opacity: 0; pointer-events: none; }
.whc__opts label { border: 1px solid var(--u-edge-strong); border-radius: 999px; padding: 3px 10px; font-size: .8rem; cursor: pointer; }
.whc__opts input:checked + label { background: var(--u-today); border-color: var(--u-today); color: #fff; font-weight: 700; }
.whc__opts input:focus-visible + label { outline: 2px solid var(--u-today); outline-offset: 2px; }
/* the Injury Risk page: a square a week (none answered · no problem · a problem · substantial) */
.whc-strip { display: flex; align-items: center; gap: 4px; }
.whc-strip > span { margin-right: 4px; }
.whc-sq { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--u-edge-strong); }
.whc-sq[data-k="ok"] { background: var(--u-edge-strong); border-color: transparent; }
.whc-sq[data-k="warn"] { background: var(--u-part); border-color: transparent; }
.whc-sq[data-k="bad"] { background: var(--u-bad); border-color: transparent; }
.ct-week small { margin-left: auto; font-size: .7rem; color: var(--u-dim); white-space: nowrap; }
.ct-cards .ct-go { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 575.98px) { .ct-cards { padding: 10px; } .ct-cards > .ct-line { flex: 1 1 100%; min-width: 0; } .ct-num { flex-basis: 100%; } .ct-board__grid { gap: 12px 6px; padding: 12px 8px 14px; } .ct-who { width: 72px; } }
.ct-cards .ct-go { flex-direction: row; justify-content: flex-start; }
@media (max-width: 575.98px) {
  .ct-cards .ct-line { grid-template-columns: minmax(0, 1fr); }      /* the card keeps its one column on a phone (the sentence rows above put the buttons in column 2) */
  .ct-cards .ct-line .ct-go { grid-column: auto; justify-content: flex-start; flex-direction: row; }
}

/* 20 Oct 2026 (#244): My Training — the "New on UTLC" card (once per device, /js/whats-new.js), the RPE box under today and the "RPE?" pill on a
   row still without its RPE; the coach Home's badges as links */
.mw-new[hidden] { display: none !important; }
.mw-new { border: 1px solid rgba(var(--u-today-rgb), .35); background: rgba(var(--u-today-rgb), .06); border-radius: 14px; padding: 10px 12px 12px; margin-bottom: 12px; }
.mw-new__h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: .92rem; margin-bottom: 8px; }
.mw-new__x { border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--u-dim); padding: 0 4px; cursor: pointer; }
.mw-new__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mw-new__i { display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--u-edge); background: var(--u-card);
             color: var(--bs-body-color); text-decoration: none; font-size: .86rem; cursor: pointer; }
.mw-new__i:hover { border-color: var(--u-today); color: var(--bs-body-color); }
.mw-new__i b { display: block; font-weight: 700; }
.mw-new__i small { display: block; color: var(--u-dim); font-size: .74rem; line-height: 1.35; }
.mw-new__ic { font-size: 1.2rem; line-height: 1; }
.mw-new__i.is-done { border-color: rgba(var(--u-done-rgb), .5); background: rgba(var(--u-done-rgb), .08); cursor: default; }
.mw-new__i.is-done small { color: var(--u-done); font-weight: 700; }
@media (max-width: 575.98px) { .mw-new__items { grid-template-columns: 1fr; } }
.mw-stack.mw-own > .mw-g-days > .mw-rpestrip { display: block; }
.mw-stack:not(.mw-own) > .mw-g-days > .mw-rpestrip { display: none; }
.mw-rpestrip { border: 1px solid rgba(var(--u-part-rgb), .45); background: rgba(var(--u-part-rgb), .06); border-radius: 12px; padding: 9px 12px 10px; }
.mw-rpestrip__h { font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mw-rpestrip__h small { font-weight: 400; color: var(--u-dim); font-size: .74rem; }
.mw-rpestrip__i { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--u-edge); }
.mw-rpestrip__t { font-size: .82rem; margin-bottom: 4px; }
.mw-rpe-need { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: .68rem; font-weight: 800; color: var(--u-part); border: 1px solid rgba(var(--u-part-rgb), .55); background: rgba(var(--u-part-rgb), .1); }
.ct-line__badges a.u-badge { text-decoration: none; }
.ct-line__badges a.u-badge:hover { filter: brightness(.95); text-decoration: underline; }
a.ct-chip { text-decoration: none; }
a.ct-chip:hover { text-decoration: underline; }

/* 20 Oct 2026 (#246): the start time the coach set on a session — My Week's rows and cards, Session Detail, the coach's Schedule */
.u-start { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.55;
           font-variant-numeric: tabular-nums; color: var(--u-today); background: rgba(var(--u-today-rgb), .1); border: 1px solid rgba(var(--u-today-rgb), .35); white-space: nowrap; }
.u-start .bi { font-size: .72rem; }
/* 20 Oct 2026 (#248): the usual training time on the Settings page */
.st-times { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.st-times label { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; }
.st-times input { width: auto; font-variant-numeric: tabular-nums; }
/* 21 Oct 2026 (#252): the form on race morning on Race Planning (coach only): green in the race window (TSB +5 to +25), amber outside, grey when the plan
   does not reach the race yet */
.rp-form { font-weight: 700; color: var(--u-dim); }
.rp-form[data-ok="1"] { color: var(--u-done, #16a34a); }
.rp-form[data-ok="0"] { color: #b45309; }
/* 21 Oct 2026 (#253): the Schedule's "Form on race day" panel under the race cards (Views/WorkoutWeeks/_RaceFormPanel.cshtml): the TSB on race morning
   if the plan is followed, a chart of each day's TSB with the race window (+5 to +25) and the planned TSS as bars; green / amber for an A race only */
.rf { background: var(--u-card); border: 1px solid var(--u-edge); border-radius: 14px; box-shadow: var(--u-shadow); margin-top: 10px; overflow: hidden; }
.rf-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--u-edge); font-size: 13px; }
.rf-title { font-weight: 800; color: var(--u-ink); }
.rf-race { color: var(--u-dim); }
.rf-chg { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--u-dim); background: rgba(var(--u-up-rgb), .16); border-radius: 999px; padding: 2px 9px; }
.rf-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px 6px; }
.rf-big { text-align: center; border-radius: 12px; padding: 10px 6px; background: rgba(var(--u-up-rgb), .12); }
.rf-big b { display: block; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--u-ink); }
.rf-big span { display: block; font-size: 11.5px; color: var(--u-dim); margin-top: 4px; line-height: 1.3; }
.rf-big small { display: block; font-size: 10.5px; color: var(--u-faint); margin-top: 4px; }
.rf[data-ok="1"] .rf-big { background: rgba(var(--u-done-rgb), .12); }
.rf[data-ok="1"] .rf-big b { color: var(--u-done); }
.rf[data-ok="0"] .rf-big { background: rgba(var(--u-wait-rgb), .13); }
.rf[data-ok="0"] .rf-big b { color: var(--u-amber); }
.rf-chart svg { display: block; width: 100%; height: auto; }
.rf-chart .rf-svg--narrow { display: none; }
.rf-band { fill: rgba(var(--u-done-rgb), .13); }
.rf-zero { stroke: var(--u-faint); stroke-dasharray: 3 3; }
.rf-line { fill: none; stroke: var(--u-ink); stroke-width: 2; }
.rf-dot { fill: var(--u-ink); stroke: var(--u-card); stroke-width: 1.5; }
.rf-dot.is-race { fill: var(--u-dim); }
.rf[data-ok="1"] .rf-dot.is-race { fill: var(--u-done); }
.rf[data-ok="0"] .rf-dot.is-race { fill: var(--u-amber); }
.rf-bar { fill: rgba(var(--u-today-rgb), .25); }
.rf-bar.is-costliest { fill: rgba(var(--u-wait-rgb), .6); }
.rf-ax text { font-size: 9px; fill: var(--u-done); text-anchor: end; }
.rf-ax--zero text { fill: var(--u-faint); }
.rf-day text { font-size: 11px; fill: var(--u-ink); text-anchor: middle; }
.rf-day.is-race text { fill: var(--u-race); font-weight: 700; }
.rf-sub text { font-size: 9.5px; fill: var(--u-faint); text-anchor: middle; }
.rf-val text { font-size: 10.5px; font-weight: 700; fill: var(--u-dim); text-anchor: middle; }
.rf-val.is-race text { fill: var(--u-ink); }
.rf[data-ok="1"] .rf-val.is-race text { fill: var(--u-done); }
.rf[data-ok="0"] .rf-val.is-race text { fill: var(--u-amber); }
.rf-advice { margin: 4px 14px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: rgba(var(--u-wait-rgb), .1); color: var(--u-amber); }
.rf-advice a, .rf-advice b { color: inherit; font-weight: 700; }
.rf-info { margin: 4px 14px 0; padding: 7px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; background: rgba(var(--u-free-rgb), .08); color: var(--u-free); }
.rf-foot { padding: 8px 14px 11px; font-size: 11.5px; color: var(--u-dim); line-height: 1.45; }
.rf-msg { padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--u-dim); }
.rf-msg b { color: var(--u-ink); }
@media (max-width: 575.98px) {
    .rf-body { grid-template-columns: 1fr; }
    .rf-chart .rf-svg--wide { display: none; }
    .rf-chart .rf-svg--narrow { display: block; }
    .rf-big { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; text-align: left; padding: 8px 12px; }
    .rf-big b { font-size: 1.9rem; grid-row: span 2; }
    .rf-big span, .rf-big small { margin-top: 0; }
}
/* 21 Oct 2026 (#254): the PMC page read from the top (Views/Analytics/Pmc.cshtml, /js/pmc.js): a sentence on where the athlete is and where the
   plan goes, cards with their 7-day trend, two panels on one time axis (fitness & fatigue; form over its named zones) */
.pmc-say { background: var(--u-card); border-radius: 14px; box-shadow: var(--u-shadow); padding: 12px 16px; margin-bottom: 12px; }
.pmc-say__now { font-size: 1.05rem; line-height: 1.45; color: var(--u-ink); }
.pmc-say__plan { font-size: .88rem; color: var(--u-dim); margin-top: 6px; line-height: 1.45; }
.pmc-zc { display: inline-block; font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 2px 10px; margin-right: 8px; vertical-align: 2px; }
.pmc-zc[data-z="vfresh"] { background: rgba(13, 148, 136, .14); color: #0f766e; }
.pmc-zc[data-z="race"] { background: rgba(22, 163, 74, .15); color: #15803d; }
.pmc-zc[data-z="train"] { background: rgba(234, 179, 8, .18); color: #a16207; }
.pmc-zc[data-z="high"] { background: rgba(249, 115, 22, .16); color: #c2410c; }
.pmc-zc[data-z="risk"] { background: rgba(239, 68, 68, .15); color: #b91c1c; }
.pmc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pmc-card { background: var(--u-card); border-radius: 12px; box-shadow: var(--u-shadow); padding: 10px 12px; border-left: 4px solid var(--u-faint); min-width: 0; }
.pmc-card[data-k="ctl"] { border-left-color: #2563eb; }
.pmc-card[data-k="ctl"] .pmc-card__v { color: #2563eb; }
.pmc-card[data-k="atl"] { border-left-color: #dc2626; }
.pmc-card[data-k="atl"] .pmc-card__v { color: #dc2626; }
.pmc-card[data-k="tss"] { border-left-color: var(--u-dim); }
.pmc-card__k { font-size: .76rem; color: var(--u-dim); font-weight: 700; }
.pmc-card__eq { font-weight: 500; color: var(--u-faint); }
.pmc-card__v { font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--u-ink); }
.pmc-card__t { font-size: .74rem; color: var(--u-dim); }
.pmc-card__t b { color: var(--u-ink); }
.pmc-box { background: var(--u-card); border-radius: 14px; box-shadow: var(--u-shadow); padding: 10px 12px 6px; }
.pmc-pn-h { font-size: .8rem; font-weight: 800; color: var(--u-ink); margin: 2px 0 0 4px; }
.pmc-pn-h small { font-weight: 500; color: var(--u-dim); font-size: .74rem; margin-left: 6px; }
.pmc-pa { position: relative; height: 230px; }
.pmc-pb { position: relative; height: 200px; }
.pmc-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; color: var(--u-dim); padding: 6px 4px 2px; border-top: 1px solid var(--u-edge); margin-top: 4px; }
.pmc-key i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.pmc-k-solid { width: 20px; border-top: 2.5px solid var(--u-ink); }
.pmc-k-dash { width: 20px; border-top: 2.5px dashed var(--u-ink); }
.pmc-k-shade { width: 14px; height: 10px; background: rgba(148, 163, 184, .25); border-radius: 2px; }
.pmc-race { color: var(--u-dim); border: 1px solid var(--u-edge-strong); font-size: .78rem; background: transparent; }
.pmc-race--next { background: rgba(245, 158, 11, .15); color: var(--u-amber); border-color: rgba(245, 158, 11, .5); }
.pmc-race__dot { background: rgb(245, 158, 11); display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
@media (max-width: 575.98px) {
    .pmc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pmc-card__v { font-size: 1.35rem; }
    .pmc-say__now { font-size: .95rem; }
    .pmc-pa { height: 180px; }
    .pmc-pb { height: 170px; }
    .pmc-pn-h small { display: block; margin-left: 0; }
}
/* 21 Oct 2026 (#256): the race-day form is a guide — "± about 10" under the Schedule panel's number */
.rf-big small.rf-pm { color: var(--u-dim); }
@media (max-width: 575.98px) {
    .rf-big small.rf-pm { grid-column: 2; }
}
/* 21 Oct 2026 (#257, the owner: "กราฟนี้ใหญ่ไป และย่อขนาดทั้งเว็บก็ไม่ลด"): the Schedule panel's chart keeps its natural size — at most about 1.2 × its
   drawing's own width (520) — instead of filling the whole panel (on a wide screen its labels came out ~30 px, and zooming the page out made it
   bigger, not smaller); the number and the chart stay side by side and the row stops growing */
.rf-chart svg { max-width: 640px; }
@media (min-width: 576px) {
    .rf-body { grid-template-columns: 150px minmax(0, 640px); }
}
/* 21 Oct 2026 (#262): under the Schedule's "Est. Duration" — the Other sessions with no set time that are not in the minutes */
.u-stat .u-stat__note { color: var(--u-amber); font-weight: 600; }
/* 24 Oct 2026 (#312, the owner: "อยากทำให้เป็น popup modal"): Send to the Garmin watch — the pill under a session's plan (its colour is its state:
   not sent = the Connect gradient, on the watch = green, changed after sending = amber, not connected = dashed) and its pop-up
   (Views/AthleteWorkouts/_GarminWatch, /js/garmin-send.js); the watch panel is dark in both themes, like a watch */
.gw-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 13px; font-size: .8rem; font-weight: 800;
           line-height: 1.4; border: 1px solid transparent; cursor: pointer; }
.gw-pill--ready, .gw-go { color: #052e16; background: linear-gradient(135deg, #d8ff54, #4ade80); }
.gw-pill--sent { color: #146c43; background: #e8f6ee; border-color: #9ed5b5; }
.gw-pill--changed { color: #8a5a00; background: #fff7e6; border-color: #f0c36b; }
.gw-pill--off { color: var(--u-dim); background: transparent; border: 1px dashed var(--u-edge); }
.gw-m .modal-content { border: 0; border-radius: 20px; overflow: hidden; }
.gw-m__b { display: grid; gap: 12px; }
.gw-m__f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--u-edge); }
.gw-go, .gw-ghost { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 17px; font-weight: 800; border: 0; text-decoration: none; }
.gw-go:hover, .gw-go:focus { color: #052e16; filter: brightness(1.05); }
.gw-go:disabled { opacity: .75; }
.gw-ghost { font-weight: 600; color: var(--bs-body-color); background: transparent; border: 1px solid var(--u-edge); }
.gw-head { display: flex; align-items: center; gap: 12px; }
.gw-head b { display: block; font-size: 1.05rem; } .gw-head small { color: var(--u-dim); }
.gw-head__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.3rem;
               color: var(--u-today); background: rgba(var(--u-today-rgb), .12); }
.gw-wf { background: #10151f; color: #e8edf6; border-radius: 16px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.gw-wf__h { font-size: .68rem; font-weight: 800; color: #8b95a8; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.gw-wf__row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: .8rem; padding: 4px 0;
              border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gw-wf__row:last-child { border-bottom: 0; }
.gw-wf__row i { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; }
.gw-wf__row[data-k="WARMUP"] i { background: #22c55e; }
.gw-wf__row[data-k="INTERVAL"] i { background: #ef4444; }
.gw-wf__row[data-k="RECOVERY"] i, .gw-wf__row[data-k="REST"] i { background: #3b82f6; }
.gw-wf__row[data-k="ACTIVE"] i { background: #eab308; }
.gw-wf__row b { font-weight: 700; letter-spacing: .03em; }
.gw-wf__row em { font-style: normal; color: #c6f36b; min-width: 74px; text-align: right; }
.gw-wf__row--in { padding-left: 14px; }
.gw-wf__rep { color: #f0c36b; font-weight: 800; font-size: .76rem; padding-top: 4px; }
.gw-hint { font-size: .78rem; color: var(--u-dim); }
.gw-b { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid; }
.gw-b > .bi { font-size: 1.2rem; line-height: 1.2; } .gw-b b, .gw-b small { display: block; } .gw-b small { font-size: .78rem; opacity: .9; }
.gw-b--ok { background: #e8f6ee; color: #146c43; border-color: #9ed5b5; }
.gw-b--warn { background: #fff7e6; color: #8a5a00; border-color: #f0c36b; }
.gw-b--bad { background: #fdecec; color: #a61b1b; border-color: #f3b0b0; }
.gw-empty { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 16px 12px; border: 1.5px dashed var(--u-edge); border-radius: 14px; }
.gw-empty .bi { font-size: 1.6rem; } .gw-empty small { color: var(--u-dim); }
[data-bs-theme="dark"] .gw-pill--sent, [data-bs-theme="dark"] .gw-b--ok { color: #75d7a1; background: rgba(25, 135, 84, .16); border-color: rgba(117, 215, 161, .45); }
[data-bs-theme="dark"] .gw-pill--changed, [data-bs-theme="dark"] .gw-b--warn { color: #f5c86a; background: rgba(230, 168, 23, .14); border-color: rgba(245, 200, 106, .45); }
[data-bs-theme="dark"] .gw-b--bad { color: #f19a9a; background: rgba(220, 53, 69, .15); border-color: rgba(241, 154, 154, .45); }
/* 24 Oct 2026 (#319): the Garmin / WHOOP announcement (Views/Shared/_WearablesAnnouncement) — athletes, once per browser; its buttons are the
   Send-to-Garmin pop-up's (.gw-go / .gw-ghost) */
.ann-w .modal-content { border: 0; border-radius: 20px; overflow: hidden; }
.ann-w__top { padding: 18px 18px 14px; color: #1d2433; background: linear-gradient(135deg, #eaffc2, #d3f7e1); }
.ann-w__badges { display: flex; gap: 8px; margin-bottom: 10px; }
.ann-w__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #1d2433; font-weight: 800; font-size: .78rem; }
.ann-w__t { font-size: 1.2rem; font-weight: 800; line-height: 1.3; margin: 0; text-wrap: balance; }
.ann-w__s { color: #3a4150; font-size: .88rem; margin-top: 4px; }
.ann-w__b { display: grid; gap: 10px; padding: 14px 18px; }
.ann-w__i { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.ann-w__i > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; background: rgba(var(--u-today-rgb), .08); }
.ann-w__i .bi-strava { color: #fc4c02; }
.ann-w__i b { display: block; font-size: .9rem; }
.ann-w__i small { display: block; color: var(--u-dim); font-size: .8rem; line-height: 1.45; }
.ann-w__more { font-size: .8rem; color: var(--u-dim); padding-left: 40px; }
.ann-w__f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--u-edge); }
[data-bs-theme="dark"] .ann-w__top { color: #eef6e6; background: linear-gradient(135deg, #2a3a12, #123524); }
[data-bs-theme="dark"] .ann-w__s { color: #c9d6c2; }
[data-bs-theme="dark"] .ann-w__badge { color: #eef6e6; background: rgba(255, 255, 255, .12); }
/* 27 Oct 2026 (#453): UTLC in LINE (Views/Shared/_LineAnnouncement) — the frame of the Garmin / WHOOP pop-up (.ann-w) with LINE's colours on top,
   the athlete's LINE menu drawn small, and the Garmin / WHOOP part (or its one ✅ line) under it */
.ann-l__top { background: linear-gradient(135deg, #d9fbe3, #c8f2ff); }
.ann-w__badge.ann-l__badge { color: #fff; background: #06c755; }
.ann-l__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 2px 0 0 40px; padding: 2px; border-radius: 12px; background: #16213e; }
.ann-l__menu div { padding: 8px 4px; border-radius: 8px; background: #22305a; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
.ann-l__wear { border-top: 1px solid var(--u-edge); }
.ann-l__wtop { padding: 14px 18px 12px; color: #1d2433; background: linear-gradient(135deg, #eaffc2, #d3f7e1); }
.ann-l__wtop .ann-w__s { font-size: .84rem; margin-top: 3px; }
.ann-l__wt { font-size: 1.02rem; font-weight: 800; line-height: 1.3; margin: 0; text-wrap: balance; }
.ann-l__strava { color: #fc4c02; }
.ann-l__go { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-left: 40px; padding: 7px 15px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--u-ink); font-weight: 800; font-size: .86rem; text-decoration: none; }
.ann-l__go:hover, .ann-l__go:focus { color: var(--u-ink); background: rgba(var(--u-today-rgb), .08); }
.ann-l__tip { padding-left: 40px; color: var(--u-dim); font-size: .74rem; line-height: 1.4; }
.ann-l__done { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--u-edge); background: rgba(25, 135, 84, .07); }
.ann-l__done > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; background: rgba(25, 135, 84, .1); }
.ann-l__done b { display: block; font-size: .9rem; }
.ann-l__done small { display: block; color: var(--u-dim); font-size: .8rem; line-height: 1.45; }
.ann-l__off { margin-right: auto; padding: 0; border: 0; background: none; color: var(--u-dim); font-size: .8rem; text-decoration: underline; }
.ann-l__add { display: inline-flex; align-items: center; gap: 7px; padding: 8px 17px; border-radius: 999px; color: #fff; background: #06c755; font-weight: 800; text-decoration: none; }
.ann-l__add:hover, .ann-l__add:focus { color: #fff; filter: brightness(1.05); }
[data-bs-theme="dark"] .ann-l__top { color: #e6f6ff; background: linear-gradient(135deg, #0f3a24, #0e2f3d); }
[data-bs-theme="dark"] .ann-w__badge.ann-l__badge { color: #fff; background: #06c755; }
[data-bs-theme="dark"] .ann-l__wtop { color: #eef6e6; background: linear-gradient(135deg, #2a3a12, #123524); }
[data-bs-theme="dark"] .ann-l__menu { background: #0b1226; }
/* 24 Oct 2026 (#321): sleep for the coach — Team Week's tappable chips, the "last night" pop-up (Views/Sleep/_Night in Views/Shared/_SleepModal)
   and the athlete page's 14 nights (Views/Athletes/_SleepCard) */
button.tw-chip { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.sc-m .modal-content { border: 0; border-radius: 18px; overflow: hidden; }
.sc-loading { padding: 28px; text-align: center; color: var(--u-dim); }
.sc-pop__h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--u-edge); }
.sc-pop__h > div { flex: 1; } .sc-pop__h b { display: block; } .sc-pop__h small { color: var(--u-dim); font-size: .78rem; }
.sc-src { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: #fff; background: #6b7385; }
.sc-src--whoop { background: #111; } .sc-src--garmin { background: #007cc3; }
.sc-pop__b { padding: 12px 16px; display: grid; gap: 12px; }
.sc-pop__f { padding: 10px 16px; border-top: 1px solid var(--u-edge); text-align: right; }
.sc-time { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--u-dim); }
.sc-time b { color: var(--bs-body-color); }
.sc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sc-stat { background: rgba(var(--u-today-rgb), .06); border-radius: 12px; padding: 7px 8px; display: grid; gap: 1px; align-content: start; }
.sc-stat small { font-size: .68rem; color: var(--u-dim); font-weight: 700; }
.sc-stat b { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.sc-stat em { font-style: normal; font-size: .68rem; color: var(--u-dim); }
.sc-stat--good b { color: var(--u-done); } .sc-stat--warn b { color: var(--u-amber); } .sc-stat--bad b { color: var(--u-bad); }
.sc-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; } .sc-bar i { display: block; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--u-dim); }
.sc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sc-legend b { color: var(--bs-body-color); } .sc-legend em { font-style: normal; }
.sc-legend .sc-line { height: 3px; width: 14px; border-radius: 2px; vertical-align: 2px; }
.sc-more { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--u-dim); }
.sc-flag { border-radius: 12px; padding: 8px 10px; font-size: .8rem; color: #8a5a00; background: #fff7e6; border: 1.5px solid #f0c36b; }
.sc-flag .bi { margin-right: 6px; }
.sc-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 8px; color: var(--u-dim); }
.sc-empty .bi { font-size: 1.6rem; } .sc-empty b { color: var(--bs-body-color); }
.sc-sub { font-size: .7rem; font-weight: 800; color: var(--u-dim); letter-spacing: .04em; margin-bottom: -6px; }
.sc-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.sc-strip__n { display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; padding: 4px 0; border-radius: 10px; cursor: pointer; color: inherit; }
.sc-strip__n.is-on { background: rgba(var(--u-today-rgb), .1); }
.sc-strip__bar { display: flex; flex-direction: column-reverse; width: 18px; border-radius: 4px; overflow: hidden; background: rgba(var(--u-today-rgb), .08); }
.sc-strip__bar i { display: block; } .sc-strip__n small { font-size: .7rem; font-weight: 700; } .sc-strip__n em { font-style: normal; font-size: .66rem; color: var(--u-dim); }
.sc-link { font-weight: 700; font-size: .84rem; text-decoration: none; }
.sc-card .ap-head .sc-src { margin-left: auto; }
.sc-card__body { display: grid; gap: 12px; }
.sc-chartbox { max-width: 760px; }
.sc-chart { width: 100%; height: auto; display: block; }
.sc-chart .sc-ax { font-size: 10px; fill: var(--u-dim); }
.sc-chart .sc-grid { stroke: var(--u-edge); }
.sc-chart .sc-dot { fill: var(--u-card, #fff); }
.sc-chart .sc-night { cursor: pointer; }
.sc-chart .sc-night:hover rect[fill="transparent"] { fill: rgba(var(--u-today-rgb), .06); }
.sc-note { font-size: .76rem; color: var(--u-dim); }
[data-bs-theme="dark"] .sc-flag { color: #f5c86a; background: rgba(230, 168, 23, .14); border-color: rgba(245, 200, 106, .45); }
@media (max-width: 560px) { .sc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 24 Oct 2026 (#323): the Review's "the morning of that day" (Views/WorkoutResults/_MorningStrip) */
.rm-strip { border: 1.5px solid var(--u-edge); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 8px; background: rgba(var(--u-today-rgb), .03); }
.rm-strip--warn { border-color: #f0c36b; background: rgba(230, 168, 23, .06); }
.rm-strip--good { border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .04); }
.rm-strip__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: .86rem; }
.rm-strip__h > span { color: var(--u-dim); font-size: .76rem; }
.rm-strip__more { margin-left: auto; border: 0; background: transparent; padding: 0; font-size: .78rem; font-weight: 700; color: var(--u-today); cursor: pointer; }
.rm-strip__c { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rm-chip { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 12px; border: 1px solid var(--u-edge); background: var(--u-card); color: inherit; font: inherit; text-align: left; }
button.rm-chip:not(:disabled) { cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
button.rm-chip:disabled { opacity: 1; }
.rm-chip > .bi { font-size: 1rem; color: var(--u-dim); margin-top: 2px; }
.rm-chip small { display: block; font-size: .68rem; font-weight: 700; color: var(--u-dim); }
.rm-chip b { display: block; font-size: .96rem; line-height: 1.25; }
.rm-chip em { display: block; font-style: normal; font-size: .7rem; color: var(--u-dim); }
.rm-chip--warn { border-color: #f0c36b; } .rm-chip--warn b, .rm-chip--warn > .bi { color: var(--u-amber); }
.rm-chip--bad { border-color: rgba(220, 38, 38, .45); } .rm-chip--bad b, .rm-chip--bad > .bi { color: var(--u-bad); }
.rm-chip--good b, .rm-chip--good > .bi { color: var(--u-done); }
.rm-link { font-size: .82rem; border-radius: 10px; padding: 7px 10px; color: #5a4300; background: #fff3cf; }
.rm-link .bi { margin-right: 6px; color: var(--u-amber); }
[data-bs-theme="dark"] .rm-link { color: #f5d98a; background: rgba(230, 168, 23, .14); }

/* 25 Oct 2026 (#339): a flex child that may shrink below its content (Inbox, Messages, Team Week used the class before it existed: on a phone
   the Inbox ran 670 px wide) */
.min-width-0 { min-width: 0; }

/* 25 Oct 2026 (#368): My Progress in short on Home and at the end of My Training (Views/Shared/_ProgressStrip) */
.u-pstrip { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--u-card); border: 1px solid var(--u-edge); margin-bottom: 1rem; }
.u-pstrip__head { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: var(--u-ink); }
.u-pstrip__faces { display: inline-flex; flex: none; }
.u-pstrip__faces img { width: 26px; height: 26px; border-radius: 50%; background: var(--u-card-2); border: 2px solid var(--u-card); object-fit: cover; }
.u-pstrip__faces img + img { margin-left: -8px; }
.u-pstrip__t { font-weight: 800; font-size: .92rem; white-space: nowrap; }
.u-pstrip__go { margin-left: auto; font-size: .78rem; color: var(--u-dim); text-align: right; display: inline-flex; align-items: center; gap: 2px; }
.u-pstrip__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.u-pstrip__tile { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--u-ink); min-width: 0;
                  background: var(--u-card-2); border: 1px solid var(--u-edge); }
.u-pstrip__tile:hover, .u-pstrip__tile:focus-visible { border-color: var(--u-edge-strong); color: var(--u-ink); }
.u-pstrip__tile > .bi { font-size: .95rem; color: var(--u-dim); }
.u-pstrip__k { font-size: .72rem; color: var(--u-dim); line-height: 1.2; }
.u-pstrip__v { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.u-pstrip__tile[data-tone="rise"] > .bi, .u-pstrip__tile[data-tone="rise"] .u-pstrip__v { color: var(--u-done); }
.u-pstrip__best { display: flex; align-items: center; gap: 8px; font-size: .84rem; text-decoration: none; color: var(--u-ink); padding: 6px 10px; border-radius: 10px;
                  background: color-mix(in srgb, var(--u-amber) 12%, var(--u-card)); }
.u-pstrip__best > .bi { color: var(--u-amber); }

/* 25 Oct 2026 (#373): last week in short at the top of My Training on Monday and Tuesday (Views/AthleteWorkouts/_LastWeekCard) */
.u-lastwk { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--u-card); border: 1px solid var(--u-edge); margin-bottom: 1rem; }
.u-lastwk__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.u-lastwk__t { font-weight: 800; font-size: .92rem; }
.u-lastwk__r { font-size: .78rem; color: var(--u-dim); }
.u-lastwk__go { font-size: .8rem; font-weight: 700; text-decoration: none; }
.u-lastwk__share { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--u-dim); text-decoration: none; }   /* #408 */
.u-lastwk__share:hover, .u-lastwk__share:focus-visible { color: var(--u-ink); background: var(--u-card-2); }
.u-lastwk__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.u-lastwk__n { padding: 6px 10px; border-radius: 12px; background: var(--u-card-2); border: 1px solid var(--u-edge); min-width: 0; }
.u-lastwk__n b { display: block; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.u-lastwk__n small { display: block; font-size: .72rem; color: var(--u-dim); }
.u-lastwk__line { display: flex; align-items: center; gap: 8px; font-size: .84rem; min-width: 0; text-decoration: none; color: var(--u-ink); }
.u-lastwk__line > .bi { flex: none; color: var(--u-dim); }
/* 26 Oct 2026 (#402): My Training offers the latest session to share, with a small picture of its card; a folded day's row has a share icon */
.u-share-nudge { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--u-card); border: 1px solid var(--u-edge); }
.u-share-nudge__pic { flex: none; display: block; width: 54px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #1f2937, #0b0c10); }
.u-share-nudge__pic canvas { display: block; width: 100%; height: 100%; }
.u-share-nudge__txt { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.u-share-nudge__txt b { font-size: .9rem; }
.u-share-nudge__txt small { color: var(--u-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-share-nudge__go { flex: none; }
.u-share-nudge__x { flex: none; font-size: .7rem; }
.mw-dayrow__share { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 50%; color: var(--u-dim); text-decoration: none; }
.mw-dayrow__share:hover, .mw-dayrow__share:focus-visible { color: var(--u-ink); background: var(--u-card-2); }
/* 26 Oct 2026 (#400): tabs over sibling pages (the athlete's body pages, Views/Shared/_BodyTabs) */
.u-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.u-subnav::-webkit-scrollbar { display: none; }
.u-subnav__a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600;
    text-decoration: none; color: var(--u-ink); background: var(--u-card); border: 1px solid var(--u-edge); }
.u-subnav__a.is-on { background: var(--u-ink); color: var(--u-card); border-color: var(--u-ink); }
.u-subnav__a:focus-visible { outline: 2px solid var(--u-today); outline-offset: 2px; }
/* 26 Oct 2026 (#399): last Sunday's sessions on a Monday */
.u-lastwk__day { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--u-card-2); border: 1px solid var(--u-edge); }
.u-lastwk__dayh { font-size: .78rem; font-weight: 700; }
.u-lastwk__dayh small { font-weight: 400; color: var(--u-dim); margin-left: 4px; }
.u-lastwk__dayt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-lastwk__st { flex: none; font-size: .78rem; font-weight: 600; color: var(--u-dim); }
.u-lastwk__st[data-tone="wait"] { color: var(--u-wait); }
.u-lastwk__coach { display: block; padding: 8px 10px; border-radius: 10px; font-size: .86rem; text-decoration: none; color: var(--u-ink);
                   background: color-mix(in srgb, var(--u-today) 8%, var(--u-card)); border-left: 3px solid var(--u-today); }
.u-lastwk__coach small { display: block; color: var(--u-dim); font-size: .74rem; margin-bottom: 2px; }
.mw-g-nav .u-pstrip { margin-bottom: 0; }

/* ── The Root (26 Oct 2026, #418): its line on My Training (Views/Home/_RootStrip) and the friend requests on top of its page ───────────── */
.rt-strip { --c: var(--u-today); --c-rgb: var(--u-today-rgb); --cr-on: #fff;
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-radius: 16px;
            background: var(--u-card); border: 1px solid var(--u-edge); }
[data-bs-theme="dark"] .rt-strip { --cr-on: #04111d; }
.rt-strip__brand { flex: none; display: inline-flex; }
.rt-strip__brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.rt-strip__h { font-weight: 800; font-size: .9rem; white-space: nowrap; color: var(--u-ink); }
.rt-strip__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.rt-mate { --c: var(--u-other); --c-rgb: var(--u-other-rgb);
           display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; min-width: 0;
           background: rgba(var(--c-rgb), .09); border: 1px solid rgba(var(--c-rgb), .28); }
.rt-mate[data-tone="run"]  { --c: var(--u-run);  --c-rgb: var(--u-run-rgb); }
.rt-mate[data-tone="bike"] { --c: var(--u-bike); --c-rgb: var(--u-bike-rgb); }
.rt-mate[data-tone="swim"] { --c: var(--u-swim); --c-rgb: var(--u-swim-rgb); }
.rt-mate__t { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; text-decoration: none; color: var(--u-ink); font-size: .84rem; line-height: 1.15; }
.rt-mate__t b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.rt-mate__t small { color: var(--u-dim); font-size: .76rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.rt-mate__t small .si { color: var(--c); }
.rt-fire { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; background: transparent; font-size: .95rem; line-height: 1;
           display: inline-grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s, filter .15s; }
.rt-fire[data-fired="false"] { filter: grayscale(1); opacity: .7; }
.rt-fire[data-fired="false"]:hover, .rt-fire:focus-visible { filter: none; opacity: 1; }
.rt-fire[data-fired="true"] { background: rgba(var(--u-part-rgb), .16); border-color: rgba(var(--u-part-rgb), .45); transform: scale(1.06); }   /* the colour of The Root's own 🔥 (circle.css .cr-rx[data-kind="fire"]) */
.rt-fire:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.rt-strip__more { font-size: .8rem; font-weight: 700; color: var(--u-dim); text-decoration: none; white-space: nowrap; }
.rt-ask { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
          font-size: .82rem; font-weight: 800; text-decoration: none; color: var(--u-today);
          background: rgba(var(--u-today-rgb), .1); border: 1px solid rgba(var(--u-today-rgb), .35); }
.rt-ask:hover { background: rgba(var(--u-today-rgb), .18); color: var(--u-today); }
.rt-strip .cr-av { flex: none; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; line-height: 1; object-fit: cover; }
.rt-strip .cr-av.u-avatar { box-shadow: 0 0 0 2px var(--u-card), 0 0 0 3.5px rgba(var(--c-rgb), .55); }
@media (prefers-reduced-motion: reduce) { .rt-fire { transition: none; } .rt-fire[data-fired="true"] { transform: none; } }

.rt-requests { padding: 14px 16px; display: grid; gap: 10px; }
.rt-requests__h { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--u-ink); }
.rt-requests__h .bi { color: var(--c); }
.rt-request { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; min-width: 0;
              background: var(--u-card); border: 1px solid var(--u-edge); }
.rt-request__who { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.rt-request__who b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-request__who small { color: var(--u-dim); font-size: .76rem; }
.rt-request form { margin: 0; flex: none; }
.rt-request .btn { white-space: nowrap; }
.rt-requests__more { display: grid; gap: 10px; }
.rt-requests__more > summary { cursor: pointer; list-style: none; width: max-content; padding: 2px 6px; border-radius: 8px; font-size: .86rem; font-weight: 800; color: var(--c); }
.rt-requests__more > summary::-webkit-details-marker { display: none; }
.rt-requests__more[open] > summary { color: var(--u-dim); }
.rt-requests__more > summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* a phone: the friends on one row that slides sideways, under the title and the requests */
@media (max-width: 767.98px) {
    .rt-strip__list { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px 0; }
    .rt-strip__list::-webkit-scrollbar { display: none; }
    .rt-mate, .rt-strip__more { flex: none; scroll-snap-align: start; }
}

/* ── My Training, a past day with nothing on it (26 Oct 2026, #423): "Didn't train?" and the reasons as one-tap chips ───────────── */
.mw-why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.mw-why__q { font-size: .78rem; font-weight: 700; color: var(--u-dim); margin-right: 2px; }
.mw-why__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: inherit; font-size: .78rem; line-height: 1.2;
                color: var(--u-ink); background: var(--u-card); border: 1px solid var(--u-edge); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.mw-why__chip .bi { font-size: .85em; color: var(--u-dim); }
.mw-why__chip:hover, .mw-why__chip:focus-visible { border-color: var(--u-today); color: var(--u-today); outline: none; }
.mw-why__chip:hover .bi, .mw-why__chip:focus-visible .bi { color: var(--u-today); }
.mw-why__chip.is-hint { border-color: var(--u-today); background: rgba(var(--u-today-rgb), .1); color: var(--u-today); }
.mw-why__chip.is-hint .bi { color: var(--u-today); }
.mw-why__chip:active { transform: scale(.97); }