/* Training section and the public tools pages (race calculator, plan setup).
   Loads after tokens.css, style.css, race-search.css.

   Same world as the homepage: a photographic hero with a dark overlay and a
   Fraunces title with a yellow accent line, then open, left-aligned sections
   with big display headings. Panels (one border, 16px radius, no shadow) are
   kept for the things you interact with: forms, the finder result, the buy
   box, distance cards. Distance colours come from tokens.css (--rs-5k etc.). */

/* ---- Calm palette (29 Sep design pass: the old one was "harsh") ----
   Warm, tinted neutrals; the brand yellow only on buttons and small accents.
   Workout kinds differ in hue AND lightness AND a shape marker (ring, dot,
   diamond, square), so they read without colour too. */
:root {
    --tp-ink: #2b2925;               /* warm near-black: race cards, headings on cream */
    --tp-ink-soft: #57524a;
    --tp-line: #e8e1d2;              /* warm hairline */
    --tp-cream: #fbf7ec;             /* feature panels (buy box, training bands) */
    --tp-cream-line: #efe5c9;
    /* Session colours: distinct at a glance (John, 18 Oct 2026: "very dull/muted") */
    --tp-easy-bg: #d3f0d0;  --tp-easy-fg: #14532d;   --tp-easy-mark: #16a34a;
    --tp-long-bg: #d4e6ff;  --tp-long-fg: #0b3a75;   --tp-long-mark: #2563eb;
    --tp-quality-bg: #ffe08a; --tp-quality-fg: #5c3d00; --tp-quality-mark: #e29b00;
    --tp-effort-bg: #e3d9ff; --tp-effort-fg: #2e1f80; --tp-effort-mark: #6d4aff;
    --tp-race-bg: #161616;  --tp-race-fg: #ffffff;   --tp-race-mark: #ffd60a;
    --tp-week: #f1ede3;              /* week bars */
    --tp-week-now: #ffe9a8;          /* this week */
    --tp-selected-bg: #fcefc0; --tp-selected-line: #d4ae2c;
}

/* ---- Distance colour hooks (muted within Training) ---- */
.tp-d-5k { --dist: #6a9a5f; }
.tp-d-10k { --dist: #8a6aa6; }
.tp-d-half { --dist: #4c97a3; }
.tp-d-marathon { --dist: #c0645a; }

/* ---- Browser surfaces ---- */
.tp-body ::selection { background: var(--rs-accent); color: var(--rs-accent-text); }
.tp-body :focus-visible { outline: 2px solid var(--rs-text); outline-offset: 3px; border-radius: 6px; }
.tp-body .num, .tp-table td, .tp-stat-v, .tp-row-v { font-variant-numeric: tabular-nums; }

/* ---- Hero ---- */
.tp-hero {
    position: relative;
    margin-top: 70px;               /* fixed site header */
    overflow: hidden;
    background: #161616;
    isolation: isolate;
}
.tp-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;
}
.tp-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.82) 100%);
}
.tp-hero-inner { max-width: 880px; margin: 0 auto; padding: 64px 24px 44px; }
.tp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
    color: #fff; margin: 0 0 14px; text-wrap: balance; max-width: 18ch;
}
.tp-hero-accent { color: var(--rs-accent); }
.tp-hero-lead { font-size: 1.08rem; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0; max-width: 56ch; }
.tp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-size: 0.85rem; }
.tp-crumbs a, .tp-crumbs span { color: rgba(255,255,255,0.78); text-decoration: none; }
.tp-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tp-crumbs [aria-current] { color: #fff; }
.tp-crumb-sep { opacity: 0.5; }
.tp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 0; }
.tp-chips li {
    padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
}

/* ---- Page body ---- */
.tp-body { max-width: 880px; margin: 0 auto; padding: 8px 20px 72px; color: var(--rs-text); }
.tp-admin-strip {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 20px 0 0; padding: 6px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; color: var(--rs-text-secondary);
    background: var(--rs-bg-elevated); border: 1px solid var(--rs-border);
}
.tp-admin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-accent); flex: none; }

.tp-section { margin-top: 56px; }
.tp-section.is-first { margin-top: 32px; }
/* A heading that starts a section with no <section> wrapper (flat for Journey ads). */
.tp-h2.tp-flat-h { margin-top: 56px; }
.tp-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
    margin: 0 0 10px; color: var(--rs-text); text-wrap: balance;
}
.tp-h3 { font-size: 1.05rem; font-weight: 700; margin: 28px 0 10px; color: var(--rs-text); }
.tp-lead { font-size: 1.05rem; line-height: 1.6; color: var(--rs-text-secondary); margin: 0 0 20px; max-width: 62ch; }
.tp-body p { line-height: 1.65; }
/* Reading text at 18px (Journey readability: 18-22px, line height 1.6-1.8). */
/* Public ad pages only (.tp-journey): the signed-in app stays compact. */
.tp-journey .tp-body p:not([class]), .tp-journey .tp-body ol:not([class]) li, .tp-journey .tp-body ul:not([class]) li,
.tp-journey .tp-lead, .tp-journey .pr-faq-a { font-size: 1.125rem; line-height: 1.65; }
.tp-muted { color: var(--rs-text-muted); }
.tp-small { font-size: 0.85rem; }
.tp-body a:not([class]) {
    color: var(--rs-text); text-decoration: underline;
    text-decoration-color: var(--rs-accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.tp-body a:not([class]):hover { text-decoration-color: var(--rs-text); }
.tp-arrow-link { font-weight: 700; color: var(--rs-text); text-decoration: none; }
.tp-arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.tp-panel { background: var(--rs-bg-card); border: 1px solid var(--rs-border); border-radius: 16px; padding: 24px; }
.tp-note { padding: 14px 16px; border-radius: 12px; margin: 16px 0 0; background: var(--rs-accent-light); color: var(--rs-text); font-size: 0.95rem; }
.tp-error { padding: 12px 16px; border-radius: 12px; margin: 16px 0 0; background: var(--rs-error-bg); color: #7f1d1d; font-size: 0.95rem; }
.tp-status { padding: 12px 16px; border-radius: 12px; margin: 20px 0 0; background: var(--rs-success-bg); color: #065f46; font-weight: 600; }

/* ---- Forms and buttons ---- */
.tp-form { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start; }
.tp-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 170px; min-width: 0; }
.tp-field label, .tp-label { font-weight: 600; font-size: 0.88rem; color: var(--rs-text); }
.tp-field select, .tp-field input {
    font: inherit; font-size: 1rem;       /* 16px: no iOS zoom on focus */
    min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--rs-border-dark); border-radius: 10px;
    background: var(--rs-bg-input); color: var(--rs-text); min-width: 0;
}
.tp-field select:focus, .tp-field input:focus { outline: none; border-color: var(--rs-text); box-shadow: 0 0 0 3px var(--rs-accent-glow); }
.tp-field input::placeholder { color: #767676; }
.tp-hint { font-size: 0.8rem; color: var(--rs-text-muted); }
.tp-fixed { min-height: 48px; display: flex; align-items: center; font-weight: 600; }

.tp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; margin-top: 27px;       /* aligns with inputs under labels */
    font: inherit; font-weight: 700; font-size: 1rem;
    border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
    background: var(--rs-accent); color: var(--rs-accent-text);
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.tp-btn:hover { background: var(--rs-accent-hover); }
.tp-btn:active { transform: translateY(1px); }
.tp-btn:disabled { background: rgba(251, 212, 14, 0.45); color: rgba(22,22,22,0.6); cursor: not-allowed; }
.tp-btn--inline { margin-top: 0; }
.tp-btn--ghost {
    min-height: 40px; padding: 0 14px; margin-top: 0; font-size: 0.9rem;
    background: transparent; color: var(--rs-text); border: 1px solid var(--rs-border-dark);
}
.tp-btn--ghost:hover { background: var(--rs-bg-elevated); border-color: var(--rs-text); }
.tp-btn--quiet { min-height: 36px; padding: 0 10px; margin-top: 0; font-size: 0.85rem; font-weight: 600; background: transparent; color: var(--rs-text-muted); }
.tp-btn--quiet:hover { background: var(--rs-error-bg); color: #7f1d1d; }

/* ---- Tables (short, numeric) ---- */
.tp-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.tp-table th, .tp-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--rs-border); }
.tp-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rs-text-muted); font-weight: 600; }
.tp-table tr.is-input td { font-weight: 700; }
.tp-table tr:last-child td { border-bottom: 0; }
.tp-table a { font-weight: 600; color: var(--rs-text); }

/* ---- Definition rows: label left, value right (phone-safe tables) ---- */
.tp-rows { list-style: none; margin: 0; padding: 0; }
.tp-rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rs-border); }
.tp-rows li:last-child { border-bottom: 0; }
.tp-row-k { font-weight: 600; min-width: 0; }
.tp-row-k small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--rs-text-muted); margin-top: 2px; }
.tp-row-v { font-weight: 700; font-size: 1.1rem; white-space: nowrap; text-align: right; }
.tp-row-v small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--rs-text-muted); }

/* ---- Big figures ---- */
.tp-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.tp-stat { padding: 4px 20px; border-left: 1px solid var(--rs-border); }
.tp-stat:first-child { border-left: 0; padding-left: 0; }
.tp-stat-v { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.tp-stat-v.is-empty { color: var(--rs-border-dark); }
.tp-stat-l { display: block; font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.tp-stat-s { display: block; font-size: 0.8rem; color: var(--rs-text-muted); margin-top: 2px; }

/* ---- Distance cards (hub) ---- */
.tp-dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tp-dist-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px 20px 20px; border-radius: 16px; text-decoration: none;
    background: var(--rs-bg-card); border: 1px solid var(--rs-border); color: var(--rs-text);
    transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tp-dist-card:hover { border-color: var(--dist); transform: translateY(-2px); }
.tp-dist-card::before { content: ''; width: 36px; height: 6px; border-radius: 3px; background: var(--dist); margin-bottom: 10px; }
.tp-dist-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.tp-dist-meta { font-size: 0.9rem; color: var(--rs-text-secondary); }
.tp-dist-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-weight: 700; }

/* ---- How it works ---- */
.tp-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: step; }
.tp-steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.tp-steps li::before {
    content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--rs-text); color: var(--rs-accent); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
.tp-steps strong { display: block; font-size: 1.05rem; margin: 10px 0 2px; }
.tp-steps p { margin: 0; color: var(--rs-text-secondary); }

/* ---- Finder ---- */
.tp-result { margin-top: 20px; padding: 22px; border-radius: 14px; background: var(--rs-bg-elevated); }
.tp-result-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 10px 0 6px; }
.tp-result-link { color: var(--rs-text); text-decoration: none; }
.tp-result-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tp-result-when { font-size: 1.02rem; margin: 0 0 14px; }
.tp-result-when:only-child { margin: 0; }
.tp-result-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rs-border); font-size: 0.95rem; }
.tp-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; color: var(--rs-text);
    background: color-mix(in srgb, var(--dist, var(--rs-accent)) 16%, white);
}
.tp-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dist, var(--rs-accent)); }
.tp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--rs-text-muted); background: var(--rs-bg-elevated); border: 1px solid var(--rs-border); vertical-align: middle; }

/* ---- Plan list (distance page) ---- */
.tp-length-head { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 8px; }
.tp-length-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.tp-plan-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rs-border); }
.tp-plan-link {
    display: grid; grid-template-columns: 1fr auto 14px; gap: 12px; align-items: center;
    padding: 14px 6px; border-bottom: 1px solid var(--rs-border); color: var(--rs-text); text-decoration: none;
}
.tp-plan-link:hover { background: var(--rs-bg-elevated); }
.tp-plan-main { font-weight: 700; font-size: 1.05rem; }
.tp-plan-main small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--rs-text-muted); margin-top: 2px; }
.tp-plan-main .tp-badge { margin-left: 4px; }
.tp-plan-side { text-align: right; font-size: 0.85rem; color: var(--rs-text-secondary); }
.tp-chev { width: 8px; height: 8px; border-right: 2px solid var(--rs-text-muted); border-top: 2px solid var(--rs-text-muted); transform: rotate(45deg); }

/* ---- Plan page: weekly volume ---- */
.tp-chart { margin-top: 12px; }
.tp-bars { display: flex; align-items: flex-end; gap: 5px; height: 160px; }
.tp-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.tp-bar span { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: var(--dist, var(--rs-accent)); }
.tp-bar.is-tt span { background: var(--tp-effort-mark); opacity: 0.55; }
.tp-bar.is-race span { background: var(--tp-ink); }
.tp-weeknums { display: flex; gap: 5px; margin-top: 6px; }
.tp-weeknums span { flex: 1 1 0; text-align: center; font-size: 0.7rem; color: var(--rs-text-muted); min-width: 0; }
.tp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--rs-text-secondary); }
.tp-legend li { display: flex; align-items: center; gap: 6px; }
.tp-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--dist, var(--rs-accent)); }
.tp-legend i.tt { background: var(--tp-effort-mark); opacity: 0.55; }
.tp-legend i.race { background: var(--tp-ink); }
.tp-phases { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.tp-phases li { font-size: 0.9rem; }
.tp-phases b { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rs-text-muted); font-weight: 700; }

.tp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 16px; }
.tp-facts div { border-top: 2px solid var(--rs-text); padding-top: 10px; }

/* ---- Plan page: sample week ---- */
.tp-week { list-style: none; margin: 8px 0 0; padding: 0; }
.tp-day { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rs-border); }
.tp-day:last-child { border-bottom: 0; }
.tp-day-name {
    display: grid; place-items: center; height: 36px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--rs-text); color: #fff;
}
.tp-day.is-rest .tp-day-name { background: var(--rs-bg-elevated); color: var(--rs-text-muted); }
.tp-day-title { font-weight: 700; margin: 6px 0 4px; }
.tp-day.is-rest .tp-day-title { color: var(--rs-text-muted); font-weight: 600; }
.tp-day-steps { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--rs-text-secondary); }
.tp-day-steps li { padding: 2px 0; }

/* ---- Buy panel ---- */
.tp-buy { background: var(--tp-cream); color: var(--tp-ink); border: 1px solid var(--tp-cream-line); border-radius: 20px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr); gap: 24px 40px; align-items: end; }
.tp-buy .tp-h2 { color: var(--tp-ink); }
.tp-includes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.tp-includes li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--tp-ink-soft); line-height: 1.5; }
.tp-buy a:not([class]), .tp-includes a { color: var(--tp-ink); text-decoration: underline; text-decoration-color: var(--rs-accent); text-underline-offset: 3px; }
.tp-check { color: #b08a10; margin-top: 2px; }
.tp-buy-cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 220px; }
.tp-price { font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--tp-ink); }
.tp-price small { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; color: var(--tp-ink-soft); margin-top: 8px; }
.tp-buy .tp-btn { margin-top: 0; }
.tp-buy .tp-btn:disabled { background: #efe6c6; color: var(--tp-ink-soft); }
.tp-alt-channel { font-size: 0.85rem; color: var(--tp-ink-soft); margin: 0; }
.tp-alt-channel a { color: var(--tp-ink); }

/* ---- Pills (other plans) ---- */
.tp-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.tp-pill {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--rs-border-dark); color: var(--rs-text); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.tp-pill:hover { border-color: var(--rs-text); background: var(--rs-bg-elevated); }

/* ---- Books ---- */
.tp-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 8px; }
.tp-book { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; border-top: 2px solid var(--rs-text); padding-top: 16px; }
.tp-book-cover img { display: block; width: 96px; height: auto; border-radius: 2px 4px 4px 2px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
.tp-book h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.tp-book-by { font-size: 0.85rem; color: var(--rs-text-muted); margin: 2px 0 8px; }
.tp-book p { margin: 0 0 10px; color: var(--rs-text-secondary); font-size: 0.95rem; }
.tp-disclosure { font-size: 0.8rem; color: var(--rs-text-muted); margin-top: 20px; }

/* ---- Disclosures (numbers page update forms, history) ---- */
.tp-details { border: 1px solid var(--rs-border); border-radius: 16px; background: var(--rs-bg-card); }
.tp-details + .tp-details { margin-top: 12px; }
.tp-details summary {
    list-style: none; cursor: pointer; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-weight: 700; font-size: 1.05rem; border-radius: 16px;
}
.tp-details summary::-webkit-details-marker { display: none; }
.tp-details summary::after {
    content: ''; width: 9px; height: 9px; flex: none; margin-right: 6px;
    border-right: 2px solid var(--rs-text); border-bottom: 2px solid var(--rs-text);
    transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease;
}
.tp-details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.tp-details summary small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--rs-text-muted); margin-top: 2px; }
.tp-details-body { padding: 0 20px 22px; }
.tp-details-body > p:first-child { margin-top: 0; }

/* ---- Setup steps ---- */
.tp-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tp-step-num {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
    background: var(--rs-text); color: var(--rs-accent); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.tp-step-head .tp-h2 { margin: 0; }
.tp-path { font-weight: 600; background: var(--rs-bg-elevated); border: 1px solid var(--rs-border); padding: 2px 8px; border-radius: 6px; font-size: 0.92rem; }
.tp-body ol:not([class]), .tp-body ul:not([class]) { padding-left: 22px; }
.tp-body ol:not([class]) li, .tp-body ul:not([class]) li { margin-bottom: 8px; line-height: 1.6; }
.tp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tp-toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.35); }
.tp-toc a:hover { background: var(--rs-accent); border-color: var(--rs-accent); color: #111; }

/* ---- Calculator ---- */
.tp-target { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 6px 0 22px; }
.tp-inline-save { margin-top: 14px; }
.tp-threshold { margin-top: 20px; }
.tp-calc-train { margin-top: 12px; background: #fbf7ec; border-color: #efe5c9; }
.tp-calc-train .tp-btn { margin-top: 10px; }
.tp-threshold-line { margin: 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.015em; }
.tp-threshold-line strong { font-weight: 800; }
.tp-threshold-sub { margin: 4px 0 0; }

.tp-body .ad-container.ad-tail { margin-top: 56px; }

@media (max-width: 768px) {
    .tp-hero { margin-top: 97px; }                /* header + mobile nav bar */
    .tp-hero-inner { padding: 36px 20px 30px; }
    .tp-hero-lead { font-size: 1rem; }
    .tp-body { padding: 4px 16px 56px; }
    .tp-section, .tp-h2.tp-flat-h { margin-top: 44px; }
    .tp-panel { padding: 20px 18px; }
    .tp-form > .tp-btn { width: 100%; margin-top: 4px; }
    .tp-dist-grid { gap: 10px; }
    .tp-dist-card { padding: 18px 16px 16px; }
    .tp-dist-name { font-size: 1.3rem; }
    .tp-stats { grid-template-columns: 1fr; gap: 18px; }
    .tp-stat { border-left: 0; padding: 0; }
    .tp-facts { grid-template-columns: repeat(2, 1fr); }
    .tp-bars { height: 120px; gap: 3px; }
    .tp-weeknums { gap: 3px; }
    .tp-buy { grid-template-columns: 1fr; padding: 26px 20px; }
    .tp-buy-cta { min-width: 0; }
    .tp-books { grid-template-columns: 1fr; }
    .tp-book { grid-template-columns: 80px 1fr; gap: 14px; }
    .tp-book-cover img { width: 80px; }
}

/* ---- My plans ---- */
.tp-owned + .tp-owned { margin-top: 14px; }
.tp-owned-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.tp-owned-actions .tp-btn { margin-top: 0; width: auto; }

/* ---- Plan calendar (Final Surge-style: week bar, Mon-Sun cells, weekly total) ---- */
.tp-body--wide { max-width: 1240px; }
.tp-now { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; }
.tp-now-main { margin: 0; font-size: 1.1rem; max-width: 60ch; }
.tp-now-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-now-actions .tp-btn:disabled { opacity: 0.55; cursor: not-allowed; background: transparent; color: var(--rs-text); }
.tp-cal-legend i { width: 9px; height: 9px; }

.tp-cal { margin-top: 12px; border: 1px solid var(--rs-border); border-radius: 14px; overflow: hidden; background: var(--rs-bg-card); }
.tp-cal-head, .tp-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 76px; }
.tp-cal-head span { padding: 10px 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-text-muted); text-align: center; border-bottom: 1px solid var(--rs-border); }
.tp-cal-bar {
    display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px;
    font-size: 0.78rem; font-weight: 700; color: var(--rs-text);
    background: var(--tp-week); color: var(--tp-ink);
}
.tp-cal-bar-dates { font-weight: 500; color: var(--rs-text-secondary); }
.tp-cal-week { scroll-margin-top: 120px; }
.tp-cal-week.is-current .tp-cal-bar { background: var(--tp-week-now); }
.tp-cal-week.is-current .tp-cal-bar-dates { color: var(--tp-ink-soft); }
.tp-cal-day { min-height: 96px; padding: 6px; border-right: 1px solid var(--rs-border-light); border-bottom: 1px solid var(--rs-border); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tp-cal-day.is-today { background: #fffaea; box-shadow: inset 0 0 0 1px var(--tp-cream-line); }
.tp-cal-date { font-size: 0.8rem; color: var(--rs-text-secondary); padding-right: 24px; }   /* clear of the "+" */
.tp-cal-date b { font-weight: 700; color: var(--rs-text); margin-right: 2px; }   /* "Mon 28": the header scrolls away on the endless calendar */
.tp-cal-total { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px; border-bottom: 1px solid var(--rs-border); background: var(--rs-bg-elevated); }
.tp-cal-total-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-cal-total-l { font-size: 0.72rem; color: var(--rs-text-muted); }

.tp-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
    padding: 7px 8px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; color: var(--rs-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tp-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(43,41,37,0.10); }
/* A chevron says "open me": every card opens the full workout (John, 18 Oct 2026). */
.tp-card[data-open] { position: relative; padding-right: 20px; }
.tp-card[data-open]::after { content: ''; position: absolute; top: 50%; right: 8px; width: 6px; height: 6px; margin-top: -4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0.5; }
.tp-card[data-open]:hover::after { opacity: 0.9; }
/* Words wrap whole (a parkrun read "Murdoc/h Universi/ty", 24 Oct 2026); only a word longer
   than the cell breaks, with a hyphen where the browser can. */
.tp-card-name { font-size: 0.8rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.tp-card-min { font-size: 0.75rem; color: inherit; opacity: 0.75; font-variant-numeric: tabular-nums; }
.tp-card.k-easy { background: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.tp-card.k-quality { background: var(--tp-quality-bg); color: var(--tp-quality-fg); }
.tp-card.k-effort { background: var(--tp-effort-bg); color: var(--tp-effort-fg); }
.tp-card.k-race { background: var(--tp-race-bg); color: var(--tp-race-fg); }
/* Shape markers: easy ring, quality dot, time trial diamond, race square. */
.tp-card.k-easy .tp-card-name::before, .tp-card.k-quality .tp-card-name::before,
.tp-card.k-effort .tp-card-name::before, .tp-card.k-race .tp-card-name::before,
.tp-cal-legend i, .tp-today-item::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; vertical-align: middle; flex: none;
}
.tp-card.k-easy .tp-card-name::before, .tp-cal-legend i.k-easy, .tp-today-item.k-easy::before { border: 1.5px solid var(--tp-easy-mark); border-radius: 50%; background: transparent; }
.tp-card.k-quality .tp-card-name::before, .tp-cal-legend i.k-quality, .tp-today-item.k-quality::before { background: var(--tp-quality-mark); border-radius: 50%; }
.tp-card.k-effort .tp-card-name::before, .tp-cal-legend i.k-effort, .tp-today-item.k-effort::before { background: var(--tp-effort-mark); transform: rotate(45deg); border-radius: 1px; }
.tp-card.k-race .tp-card-name::before, .tp-cal-legend i.k-race, .tp-today-item.k-race::before { background: var(--tp-race-mark); border-radius: 1px; }
.tp-card.k-note { background: transparent; border: 1px dashed var(--rs-border-dark); }
.tp-card.k-note .tp-card-name { font-weight: 600; color: var(--rs-text-secondary); }
.tp-cal-intro { border-bottom: 1px solid var(--rs-border); padding: 6px 10px; font-size: 0.85rem; }
.tp-cal-intro summary { cursor: pointer; color: var(--rs-text-secondary); font-weight: 600; }
.tp-prose { white-space: pre-line; line-height: 1.6; color: var(--rs-text-secondary); font-size: 0.92rem; margin-top: 10px; }

.tp-dialog { margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border: 0; border-radius: 16px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.tp-dialog::backdrop { background: rgba(0,0,0,0.45); }
.tp-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tp-dialog-head h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin: 2px 0 0; letter-spacing: -0.01em; }
.tp-dialog-date { margin: 0; font-size: 0.85rem; color: var(--rs-text-muted); }
.tp-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rs-border); background: var(--rs-bg-elevated); cursor: pointer; color: var(--rs-text); flex: none; }

@media (max-width: 768px) {
    /* Phones: each week becomes a day-by-day list; empty days show as rest days
       (John, 29 Sep) and stay drop targets. */
    .tp-cal { border: 0; border-radius: 0; background: transparent; }
    .tp-cal-head { display: none; }
    .tp-cal-week { border: 1px solid var(--rs-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; background: var(--rs-bg-card); }
    .tp-cal-row { display: block; }
    .tp-cal-day { min-height: 0; flex-direction: row; align-items: flex-start; gap: 10px; border-right: 0; padding: 8px 10px; }
    .tp-cal-day.is-empty::after { content: '–'; /* was 'Rest': wrong before training starts and with no training at all */ padding-top: 6px; font-size: 0.85rem; color: var(--tp-ink-soft); opacity: 0.75; }
    .tp-cal-day.is-empty.is-drop::after { content: ''; }
    .tp-cal-date { flex: 0 0 66px; padding-top: 6px; white-space: nowrap; }
    .tp-cal-date b { display: inline; color: var(--rs-text); }
    .tp-cal-day > .tp-card { flex: 1 1 auto; }
    .tp-cal-day { flex-wrap: wrap; }
    .tp-cal-day > .tp-card { flex: 1 1 calc(100% - 76px); }
    .tp-cal-day > .tp-card ~ .tp-card { margin-left: 76px; }
    .tp-cal-week { scroll-margin-top: 150px; }
    .tp-cal-total { flex-direction: row; justify-content: flex-start; gap: 8px; border-bottom: 0; }
}

/* ---- Printable plan ---- */
body.tp-print { background: #fff; }
.tp-print { max-width: 820px; margin: 0 auto; padding: 24px 20px 48px; background: #fff; color: #161616; font-family: var(--font-body); }
.tp-print-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.tp-print-bar a { color: #161616; }
.tp-print-brand { font-weight: 800; letter-spacing: 0.02em; margin: 0; }
.tp-print-head { padding: 0; }
.tp-print-head h1 { font-family: var(--font-display); font-size: 2rem; margin: 6px 0; letter-spacing: -0.02em; }
.tp-print-muted { color: #6b6b6b; }
.tp-print-week { break-inside: avoid; margin-top: 22px; }
.tp-print-week h2 { font-size: 1.05rem; border-bottom: 2px solid #161616; padding-bottom: 4px; margin: 0 0 4px; }
.tp-print-week h2 span { font-weight: 500; color: #3d3d3d; font-size: 0.9rem; }
.tp-print-week table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tp-print-week th { text-align: left; width: 70px; padding: 6px 8px 6px 0; vertical-align: top; font-weight: 700; }
.tp-print-week td { padding: 6px 0; border-bottom: 1px solid #e5e5e5; }
.tp-print-item { margin: 0 0 4px; }
.tp-print-foot { margin-top: 32px; font-size: 0.8rem; color: #6b6b6b; }
@media print {
    .tp-print-bar { display: none; }
    .tp-print { padding: 0; max-width: none; }
    @page { margin: 14mm; }
}

/* Hub: your training, first thing on the page */
.tp-yours-plan { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--rs-text); margin-bottom: 12px; transition: border-color 0.2s ease; }
.tp-yours-plan:hover { border-color: var(--dist, var(--rs-text)); }
.tp-yours-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.tp-yours-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-yours-links .tp-btn { margin-top: 0; width: auto; }
.tp-yours-plan .tp-tag { align-self: flex-start; }
.tp-after-list { margin-top: 20px; }

/* Typical goal-time range (always with its caveat) */
.tp-goal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--rs-bg-elevated); }
.tp-goal-label { color: var(--rs-text-secondary); font-size: 0.92rem; }
.tp-goal strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-goal small { flex-basis: 100%; color: var(--rs-text-muted); font-size: 0.8rem; }
.tp-levels { margin-bottom: 8px; }

/* Ongoing: race rows with inline edit, progression choices */
.tp-race-row { flex-wrap: wrap; }
.tp-race-actions { display: flex; align-items: flex-start; gap: 6px; }
.tp-inline-edit summary { list-style: none; }
.tp-inline-edit summary::-webkit-details-marker { display: none; }
.tp-inline-edit[open] { flex-basis: 100%; order: 2; }
.tp-inline-edit[open] form { margin-top: 10px; padding: 16px; border: 1px solid var(--rs-border); border-radius: 12px; background: var(--rs-bg-card); }
.tp-race-row:has(.tp-inline-edit[open]) .tp-race-actions { flex-wrap: wrap; flex-basis: 100%; }
.tp-form--stack { display: flex; flex-direction: column; gap: 16px; }
.tp-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.tp-choice legend { margin-bottom: 6px; }
.tp-choice label { display: grid; grid-template-columns: 20px auto 1fr; gap: 4px 10px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--rs-border); border-radius: 12px; cursor: pointer; }
.tp-choice label:has(input:checked) { border-color: var(--rs-text); background: var(--rs-bg-elevated); }
.tp-choice input { accent-color: var(--rs-text); }
.tp-choice span { grid-column: 2 / -1; color: var(--rs-text-secondary); font-size: 0.9rem; }
@media (max-width: 768px) { .tp-choice span { grid-column: 1 / -1; } }

/* Buy box and subscription options (on the dark buy panel) */
.tp-buy-race { margin: 0; color: var(--tp-ink-soft); }
.tp-buy .tp-field label { color: var(--tp-ink); }
.tp-buy .tp-field input { background: #fff; }
.tp-buy .tp-error { margin: 0; }
.tp-buy--stack { grid-template-columns: 1fr; align-items: start; }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tp-sub-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tp-sub-option { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--tp-cream-line); border-radius: 14px; background: #fff; }
.tp-sub-option.is-best { border-color: var(--rs-accent); }
.tp-sub-option .tp-badge { position: absolute; top: 16px; right: 16px; background: var(--tp-selected-bg); color: var(--tp-ink); }
.tp-sub-option .tp-btn { width: 100%; }
.tp-sub-note { margin: 0; font-size: 0.85rem; color: var(--tp-ink-soft); }
.tp-buy--stack .tp-includes { margin: 0 0 8px; }
.tp-row-k .tp-race-note { color: var(--rs-text); font-weight: 600; }
.tp-race-note::before { content: "Note: "; }
.tp-panel + .tp-details { margin-top: 12px; }

/* Numbers forms inside workout dialogs */
.tp-nform { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rs-border); }
.tp-nform-lead { margin: 0; color: var(--rs-text-secondary); font-size: 0.92rem; line-height: 1.5; }
.tp-nform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.tp-nform-row .tp-btn { grid-column: 1 / -1; }
.tp-nform-result { padding: 14px 16px; border-radius: 12px; background: var(--rs-bg-elevated); }
.tp-nform-result.is-error { color: var(--rs-error, #b42318); }
.tp-nform-headline { margin: 0; font-weight: 600; }
.tp-nform-headline b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin-left: 4px; }
.tp-nform-change { margin: 4px 0 0; font-size: 0.88rem; color: var(--rs-text-secondary); }
.tp-nform-zones { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }
.tp-nform-zones li { display: flex; justify-content: space-between; gap: 12px; }
.tp-nform-zones b { font-variant-numeric: tabular-nums; }
.tp-nsetup { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rs-border); }
.tp-nnow { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.tp-nnow li { display: flex; justify-content: space-between; gap: 12px; }
.tp-nnow b.is-empty { color: var(--rs-text-muted); font-weight: 500; }
.tp-ndetails { border-top: 1px solid var(--rs-border); padding: 10px 0; }
.tp-ndetails summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.tp-ndetails .tp-nform { border-top: 0; margin-top: 4px; padding-top: 0; }
.tp-predict { margin: 10px 0 0; font-size: 0.92rem; }
.tp-predict--race { padding: 12px 14px; border-radius: 12px; background: var(--rs-bg-elevated); }
.tp-nform-headline small { font-size: 0.85rem; color: var(--rs-text-secondary); }
.tp-prose--after { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rs-border); }
.tp-dialog .tp-nform:first-of-type, .tp-dialog > .tp-nsetup { border-top: 0; padding-top: 0; }
.tp-prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Race picker: search the calendar, or enter a race by hand */
.tp-picker { display: grid; gap: 8px; grid-column: 1 / -1; }
.tp-picker .tp-field { position: relative; }
.tp-picker input[type=search] { width: 100%; }
.tp-picker-list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--rs-border); border-radius: 12px; background: var(--rs-bg-card, #fff); max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.tp-picker-list button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--rs-text); font: inherit; cursor: pointer; }
.tp-picker-list button:hover, .tp-picker-list button:focus-visible { background: var(--rs-bg-elevated); }
.tp-picker-list small, .tp-picker-chosen small { display: block; font-size: 0.82rem; color: var(--rs-text-muted); }
.tp-picker-chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rs-text); border-radius: 12px; }
.tp-picker-manual { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--rs-text-secondary); font: inherit; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-manual { grid-column: 1 / -1; }
.tp-manual[hidden] { display: none; }
.tp-picker [hidden], .tp-manual[hidden] { display: none !important; }

/* Moving workouts: drag on desktop, "Move to" in the dialog everywhere */
.tp-card[draggable="true"] { cursor: grab; }
.tp-card.is-dragging { opacity: 0.4; }
.tp-cal.is-dragging [data-drop-date] { outline: 1px dashed var(--rs-border-dark, #bbb); outline-offset: -3px; }
.tp-cal [data-drop-date].is-drop { background: var(--rs-accent-soft, #fff7cc); outline: 2px solid var(--rs-accent, #fbd40e); }
.tp-card.is-moved { box-shadow: inset 0 0 0 1.5px var(--rs-text); }
.tp-card-moved { display: block; font-size: 0.7rem; font-weight: 600; opacity: 0.75; }
.tp-cal-warn { margin-left: auto; margin-right: 10px; padding: 1px 8px; border-radius: 999px; background: #fde7e4; color: #9a2a1b; font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.tp-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rs-border); }
.tp-move label { font-weight: 700; font-size: 0.9rem; }
.tp-move select { flex: 1 1 160px; }

/* ---- Training side menu (app layout, like Final Surge's sidebar) ----
   Phones and tablets: one row of icon tabs under the site header, above the hero.
   Desktop (1024px+): a fixed sidebar; the page (hero included) moves right.
   Dark like the site header, so header and menu are one L framing the light page
   (24 Oct 2026: a white menu under the black header read as two products). */
.tp-side { --tp-side-bg: #161616; margin-top: 70px; background: var(--tp-side-bg); border-bottom: 1px solid rgba(255,255,255,0.08); }
.tp-side ~ .tp-hero { margin-top: 0; }
.tp-side-title { display: none; }
.tp-side ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; }
.tp-side ul::-webkit-scrollbar { display: none; }
.tp-side a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: rgba(255,255,255,0.74); font-size: 0.88rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-side a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tp-side a.is-active { background: #fff; color: #161616; }
.tp-side a:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.tp-side svg { flex: none; }
@media (min-width: 1024px) {
    .tp-side {
        position: fixed; top: 70px; left: 0; bottom: 0; z-index: 20; width: 232px; margin: 0;
        border-bottom: 0; border-right: 0; overflow-y: auto; scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .tp-side-title { display: block; margin: 28px 24px 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
    .tp-side ul { flex-direction: column; gap: 2px; padding: 0 12px 24px; overflow: visible; }
    .tp-side a { border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; }
    .tp-side a.is-active { background: rgba(255,255,255,0.1); color: #fff; }
    .tp-side a.is-active svg { color: var(--rs-accent); }
    .tp-side a:focus-visible { outline-offset: -2px; }
    main:has(> .tp-side) { margin-left: 232px; }
    .tp-side ~ .tp-hero { margin-top: 70px; }
}
/* Phones and tablets: all six on one row, icon over a short label, the current one lit
   like the sidebar's (24 Oct 2026: the scrolling strip showed three and hid the rest). */
@media (max-width: 1023px) {
    .tp-side ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 6px; overflow: visible; }
    .tp-side a { flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 2px; border-radius: 10px; font-size: 0.72rem; line-height: 1.1; text-align: center; white-space: normal; }
    .tp-side a.is-active { background: rgba(255,255,255,0.12); color: #fff; }
    .tp-side a.is-active svg { color: var(--rs-accent); }
    .tp-side a:focus-visible { outline-offset: -2px; }
    .tp-side-long { display: none; }
}
@media (min-width: 1024px) { .tp-side-short { display: none; } }
/* Phones: the site header is two fixed rows (logo, then the site's link row), 97px,
   and the app's own strip sits under them. The link row was hidden inside the app
   from 18 Oct, which left no way back to race search on a phone (John, 20 Oct 2026). */
@media (max-width: 768px) {
    .tp-side { margin-top: 97px; }
    /* Pinned under the site's two rows. The app menu never hides: when the site's link
       row slides away on scroll down, the menu moves up 47px to sit under the logo bar,
       and back down when the row returns (John, 25 Oct 2026: always visible, like an app,
       and less of the page moves on scroll up). The class follows .mobile-nav-bar.nav-hidden
       (site-nav.js), set in _side_nav.html. */
    .tp-side { position: sticky; top: 97px; z-index: 98; transition: transform 0.25s ease; }
    .tp-side.tp-side--hidden { transform: translateY(-47px); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .tp-side { transition: none; } }
@media (min-width: 769px) and (max-width: 1023px) {
    body:has(main > .tp-side) .tp-side { margin-top: var(--app-header-h, 64px); }
}

/* Training days (plan selector) */
.tp-week { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.tp-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tp-week-day { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--rs-border); border-radius: 12px; background: var(--rs-bg-card, #fff); }
.tp-week-day > span { font-weight: 700; font-size: 0.85rem; text-align: center; }
.tp-week-day select { width: 100%; font-size: 0.82rem; padding: 6px 4px; }
.tp-week-day[data-kind="sub"] { border-color: var(--rs-accent); background: #fff8d6; }
.tp-week-day[data-kind="long"] { border-color: #6fbf8e; background: #e8f6ee; }
.tp-week-day[data-kind="easy"] { background: #f1faf4; }
.tp-week-day[data-kind="rest"] { opacity: 0.7; }
.tp-week-count { margin: 0; font-size: 0.88rem; color: var(--rs-text-secondary); }
.tp-week-count.is-ok { color: #1f7a45; font-weight: 600; }
@media (max-width: 767px) {
    .tp-week-grid { grid-template-columns: 1fr; }
    .tp-week-day { grid-template-columns: 56px 1fr; align-items: center; }
    .tp-week-day > span { text-align: left; }
}
.tp-week-runs { max-width: 320px; }
.tp-runs-pick { display: grid; gap: 6px; margin-top: 20px; }
.tp-pill.is-active { background: var(--tp-selected-bg); border-color: var(--tp-selected-line); color: var(--tp-ink); }

/* App pages (calendar) and plan management */
.tp-app-body { padding-top: 24px; }
.tp-app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin: 8px 0 20px; }
.tp-app-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.tp-app-head .tp-muted { margin: 2px 0 0; }
.tp-app-nav { display: flex; gap: 8px; }
main.tp-app > .tp-side ~ .tp-app-body, main.tp-app > .tp-app-body:first-child { margin-top: 70px; }
@media (max-width: 1023px) { main.tp-app > .tp-side ~ .tp-app-body { margin-top: 0; } }
.tp-owned.is-off { opacity: 0.75; }
.tp-owned-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.tp-remove summary { list-style: none; cursor: pointer; }
.tp-remove summary::-webkit-details-marker { display: none; }
.tp-remove[open] { flex-basis: 100%; }
.tp-remove form { margin-top: 10px; padding: 14px 16px; border: 1px solid #f1c3bb; border-radius: 12px; background: #fdf3f1; }
.tp-remove p { margin: 0 0 10px; font-size: 0.92rem; }
.tp-btn--danger { background: #b42318; color: #fff; border-color: #b42318; }
.tp-btn--danger:hover { background: #912018; }
/* Days picker inside the dark buy box */
.tp-buy-days { margin-bottom: 4px; }
.tp-buy:has(.tp-buy-days) { grid-template-columns: 1fr; }
.tp-start-days { grid-column: 1 / -1; flex-basis: 100%; }
.tp-cal-more { margin: 14px 0; text-align: center; font-size: 0.85rem; color: var(--rs-text-muted); }
.tp-app-head { align-items: center; }
.tp-cal-week { scroll-margin-top: 90px; }

/* Drag and drop: drop line, delete zone, undo toast */
.tp-drop-line { height: 3px; margin: 2px 0; border-radius: 2px; background: #d92d20; box-shadow: 0 0 0 1px rgba(217,45,32,0.15); }
.tp-trash {
    position: fixed; top: 70px; right: 0; bottom: 0; z-index: 60; width: 120px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: rgba(217,45,32,0.08); border-left: 2px dashed #d92d20; color: #b42318;
    font-size: 0.8rem; font-weight: 700; text-align: center; padding: 12px;
    transform: translateX(100%); transition: transform 0.15s ease, background 0.15s ease;
}
body.tp-is-dragging .tp-trash { transform: none; }
.tp-trash.is-hot { background: #d92d20; color: #fff; border-left-color: #b42318; }
.tp-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 12px; background: var(--tp-ink); color: #fbf3d6; font-size: 0.92rem;
    transform: translate(-50%, 150%); transition: transform 0.2s ease; pointer-events: none;
}
.tp-toast.is-on { transform: translate(-50%, 0); pointer-events: auto; }
.tp-toast button { border: 0; background: none; color: var(--rs-accent); font: inherit; font-weight: 800; cursor: pointer; }
.tp-btn--delete { color: #b42318; margin-left: auto; }
/* Calendar title bar stays at the top with the month you're looking at */
.tp-app-head { position: sticky; top: 70px; z-index: 30; transition: top 0.3s ease; margin: 8px -12px 12px; padding: 10px 12px; background: var(--rs-bg, #fdfcf8); border-bottom: 1px solid var(--rs-border); }
@media (max-width: 767px) { .tp-app-head { top: 97px; } }
.tp-app-month { margin-left: 10px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--rs-text-secondary); }
.tp-cal-week { scroll-margin-top: 150px; }

/* Races from the runner's race calendar, as markers on the training calendar */
.tp-card.k-saved { background: #fff; border: 1.5px dashed var(--rs-text); color: var(--rs-text); }
.tp-card-flag { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-text-muted); margin-bottom: 2px; }
.tp-saved { margin-top: 12px; }
.tp-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Today (the signed-in home; training_plans/today.py) */
.tp-today-top { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-top: 20px; }
.tp-today-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.tp-today-grid .tp-panel, .tp-today-top .tp-panel { display: flex; flex-direction: column; gap: 12px; }
.tp-today-grid .tp-arrow-link { margin-top: auto; font-size: 0.92rem; }
.tp-today-h { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-text-muted); }
.tp-today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-today-item {
    width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 14px 16px; border: 0; border-radius: 12px; font: inherit; text-align: left; cursor: pointer;
    background: var(--tp-easy-bg); color: var(--tp-easy-fg);
}
.tp-today-item b { font-size: 1.05rem; flex: 1; }
.tp-today-item::before { align-self: center; }
.tp-today-item span { font-variant-numeric: tabular-nums; font-weight: 600; }
.tp-today-item.k-easy { background: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.tp-today-item.k-quality { background: var(--tp-quality-bg); color: var(--tp-quality-fg); }
.tp-today-item.k-effort { background: var(--tp-effort-bg); color: var(--tp-effort-fg); }
.tp-today-item.k-race { background: var(--tp-race-bg); color: var(--tp-race-fg); }
.tp-today-item.k-note { background: var(--rs-accent-light); }
.tp-today-item:focus-visible { outline: 3px solid var(--rs-text); outline-offset: 2px; }
.tp-today-rest { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.tp-today-count { margin: 0; font-size: 1rem; color: var(--rs-text-secondary); }
.tp-today-count b { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--rs-text); }
.tp-today-race { margin: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 1.1rem; }
.tp-today-race a, .tp-today-rows a { color: var(--rs-text); }
.tp-today-race small, .tp-today-rows small { display: block; font-weight: 400; font-size: 0.86rem; color: var(--rs-text-muted); }
.tp-today-rows small a { color: inherit; }
.tp-today-next .tp-btn { align-self: flex-start; margin-top: 0; }
.tp-today-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tp-today-rows li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; font-weight: 600; }
.tp-today-date { font-size: 0.82rem; font-weight: 700; color: var(--rs-text-secondary); padding-top: 2px; font-variant-numeric: tabular-nums; }
.tp-today-dot { width: 10px; height: 10px; margin: 6px 0 0 4px; border-radius: 50%; background: var(--dist, var(--rs-accent)); }
.tp-today-rows li:has(.tp-today-dot) { grid-template-columns: 20px 1fr; }
.tp-today-pbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin: 0; }
.tp-today-pbs div { padding: 8px 10px; border-radius: 10px; background: var(--rs-bg, #f6f6f4); }
.tp-today-pbs dt { font-size: 0.75rem; color: var(--rs-text-muted); font-weight: 700; }
.tp-today-pbs dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-today-week .tp-h2 { margin-bottom: 8px; }
@media (max-width: 1023px) {
    .tp-today-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .tp-today-top, .tp-today-grid { grid-template-columns: 1fr; }
    .tp-today-grid { margin-top: 32px; }
}
/* My plans: using a bought plan for another race */
.tp-apply form { border-color: var(--rs-border); background: var(--rs-bg-card); }
.tp-apply .tp-btn--inline { margin-top: 12px; }
/* My numbers: zones in any system (training_plans/zones.py) */
.tp-zone-pick { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 8px 0 16px; }
.tp-zone-pick .tp-field { min-width: 260px; flex: 1; }
.tp-zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tp-zone-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.tp-zone-code { display: inline-block; min-width: 2.4em; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .tp-zone-grid { grid-template-columns: 1fr; } }
/* My numbers: four numbers now (resting HR added 28 Sep) sit in one row */
@media (min-width: 768px) { .tp-stats:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
/* Distance landing pages: upcoming races with plan start dates, FAQ */
.tp-upcoming { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rs-border); }
.tp-upcoming a { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--rs-border); color: var(--rs-text); text-decoration: none; }
.tp-upcoming a:hover { background: var(--rs-bg-card); }
.tp-upcoming-date { font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-upcoming-name { font-weight: 700; }
.tp-upcoming-name small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--rs-text-muted); }
.tp-upcoming-start { font-size: 0.88rem; color: var(--rs-text-secondary); text-align: right; }
@media (max-width: 767px) {
    .tp-upcoming a { grid-template-columns: 56px 1fr; }
    .tp-upcoming-start { grid-column: 2; text-align: left; }
}
.tp-faq { margin: 0; }
.tp-faq dt { font-weight: 700; margin-top: 18px; }
.tp-faq dd { margin: 4px 0 0; color: var(--rs-text-secondary); }
/* Calendar "+": add a race or a plan on a day (calendar.html #tp-add-day) */
.tp-cal-day { position: relative; }
.tp-cal-add {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--rs-text-muted); font: 700 1rem/22px var(--font-body, inherit); cursor: pointer; opacity: 0.35;
}
.tp-cal-day:hover .tp-cal-add, .tp-cal-add:focus-visible { opacity: 1; background: var(--rs-accent-light); color: var(--rs-text); }
.tp-cal-add:focus-visible { outline: 2px solid var(--rs-text); outline-offset: 1px; }
@media (max-width: 768px) {
    .tp-cal-add { top: 8px; right: 6px; width: 28px; height: 28px; line-height: 28px; opacity: 0.6; }
    .tp-cal[data-moves] .tp-cal-day { padding-right: 38px; }       /* room for the "+" */
}
.tp-add-dialog .tp-h3 { margin: 16px 0 8px; }
/* "Days you can run" (_run_days.html): tick days, pick a long-run day */
.tp-rundays { border: 0; margin: 0; padding: 0; min-width: 0; }
.tp-rundays-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 12px; }
.tp-runday { position: relative; }
.tp-runday input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tp-runday span {
    display: block; padding: 10px 0; border: 1px solid var(--rs-border); border-radius: 10px; text-align: center;
    font-weight: 700; font-size: 0.9rem; background: var(--rs-bg-card); color: var(--rs-text-muted);
}
.tp-runday input:checked + span { background: var(--tp-selected-bg); border-color: var(--tp-selected-line); color: var(--tp-ink); }
.tp-runday input:checked + span::before { content: '✓ '; font-weight: 700; color: #9a7a0a; }
.tp-runday input:focus-visible + span { outline: 3px solid var(--rs-accent); outline-offset: 2px; }
.tp-rundays-long { max-width: 240px; }
@media (max-width: 420px) { .tp-runday span { font-size: 0.8rem; padding: 9px 0; } }
.tp-days-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; font-weight: 600; font-size: 0.92rem; }
.tp-days-filter select { width: auto; min-width: 120px; }
/* Live preview of the runner's week under "Days you can run" */
.tp-rundays-week { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tp-rundays-week li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 10px; font-size: 0.78rem; background: var(--rs-bg-card); border: 1px solid var(--rs-border); }
.tp-rundays-week li span { color: var(--rs-text-muted); }
.tp-rundays-week li b { font-size: 0.82rem; }
.tp-rundays-week li.is-easy { background: var(--tp-easy-bg); border-color: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.tp-rundays-week li.is-sub { background: var(--tp-quality-bg); border-color: var(--tp-quality-bg); color: var(--tp-quality-fg); }
.tp-rundays-week li.is-long { background: var(--tp-week-now); border-color: var(--tp-selected-line); color: var(--tp-ink); }
.tp-rundays-week li.is-long span { color: var(--tp-ink-soft); }
.tp-rundays-week li.is-rest { opacity: 0.6; }
/* My plans: put a bought plan on a race day */
.tp-apply-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 12px 0 4px; }
.tp-apply-form .tp-field { flex: 1 1 170px; margin: 0; }
.tp-apply-form .tp-btn { margin-top: 0; width: auto; }
.tp-apply-form .tp-hint { flex-basis: 100%; }
.tp-apply-form label small { font-weight: 400; color: var(--rs-text-muted); }
.tp-apply-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 12px; }
.tp-apply-saved form { margin: 0; }
.tp-apply-saved .tp-pill { cursor: pointer; font: inherit; font-size: 0.85rem; background: #fff; border: 1px solid var(--tp-line); color: var(--tp-ink); }
.tp-apply-saved .tp-pill:hover { border-color: var(--tp-selected-line); background: var(--tp-selected-bg); }
.tp-owned.is-new { border: 2px solid var(--rs-accent); box-shadow: 0 0 0 4px var(--rs-accent-light); }
.tp-apply-form .tp-btn--quiet { align-self: end; }
.tp-add-dist { border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-add-dist-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-add-dist-opts .tp-runday { flex: 1 1 auto; }
.tp-add-dist-opts .tp-runday span { padding: 10px 14px; white-space: nowrap; }
.tp-add-dist legend { margin-bottom: 6px; }
.tp-add-dialog .tp-saved-actions form { margin: 0; }
/* My plans list (Final Surge-like) */
.tp-plans-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rs-border); }
.tp-plans-row a.tp-plans-link { display: grid; grid-template-columns: 14px 1fr minmax(160px, auto) 16px; gap: 4px 14px; align-items: center; padding: 16px 8px; border-bottom: 1px solid var(--rs-border); color: var(--rs-text); text-decoration: none; }
.tp-plans-row a.tp-plans-link:hover { background: var(--rs-bg-card); }
.tp-plans-row a.tp-plans-link:focus-visible { outline: 2px solid var(--rs-text); outline-offset: -2px; }
.tp-plans-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dist, var(--rs-text-muted)); }
.tp-plans-name { font-weight: 700; font-size: 1.02rem; }
.tp-plans-name small, .tp-plans-state small { display: block; font-weight: 400; font-size: 0.84rem; color: var(--rs-text-muted); }
.tp-plans-state { text-align: right; }
.tp-plans-state b { font-weight: 600; }
.tp-plans-state b.is-off { color: var(--rs-text-muted); font-weight: 500; }
.tp-plans-row.is-locked a { opacity: 0.7; }
@media (max-width: 640px) {
    .tp-plans-row a.tp-plans-link { grid-template-columns: 14px 1fr 16px; }
    .tp-plans-state { grid-column: 2; text-align: left; }
    .tp-plans-row .tp-chev { grid-row: 1; grid-column: 3; }
}
.tp-plan-status .tp-h3 { margin: 0 0 4px; }
.tp-plan-race { margin: 0 0 4px; font-size: 1.15rem; }

/* Press-and-hold drag on phones (_calendar.html) */
.tp-cal[data-moves] .tp-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tp-card-ghost {
    position: fixed; z-index: 70; margin: 0; pointer-events: none; opacity: 0.95;
    transform: scale(1.03) rotate(-1deg); box-shadow: 0 10px 24px rgba(43,41,37,0.22);
}
body.tp-is-touch-dragging { overscroll-behavior: none; }
.tp-cal-day.is-drop { background: #fffaea; }
.tp-plans-link, .tp-plans-link * { text-decoration: none; }
/* Plan page: every race the plan is on */
.tp-plan-races { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.tp-plan-races li { padding: 14px 16px; border: 1px solid var(--tp-line); border-radius: 12px; background: #fff; }
.tp-plan-races .tp-muted { margin: 2px 0 10px; }
.tp-plan-add { margin-top: 28px; }
.tp-plan-add .tp-h3 { margin: 0 0 4px; }
.tp-plan-extras { margin-top: 16px; }
/* Phones: while dragging, the bin is a bar along the bottom of the screen */
body.tp-is-touch-dragging .tp-trash {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 84px; flex-direction: row;
    transform: none; border-left: 0; border-top: 2px dashed #d92d20; padding-bottom: env(safe-area-inset-bottom);
}
/* The "+" dialog: one form */
.tp-add-form { display: grid; gap: 16px; }
.tp-add-form .tp-dialog-head { margin-bottom: 0; }
.tp-add-train { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.tp-add-train legend { margin-bottom: 8px; }
.tp-add-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--tp-line); border-radius: 12px; cursor: pointer; background: #fff; }
.tp-add-choice input { margin-top: 3px; accent-color: #b08a10; }
.tp-add-choice span { font-weight: 600; }
.tp-add-choice small { display: block; font-weight: 400; color: var(--tp-ink-soft); font-size: 0.85rem; }
.tp-add-choice:has(input:checked) { border-color: var(--tp-selected-line); background: var(--tp-selected-bg); }
.tp-add-choice[hidden] { display: none; }
.tp-add-form .tp-btn { width: 100%; margin-top: 0; }
.tp-add-foot { margin: 0; text-align: center; }
.tp-add-train[hidden], .tp-add-form [data-find-row][hidden] { display: none; }
/* The side menu on the static signed-in pages (static/app-shell.js, desktop only) */
@media (min-width: 1024px) { body.has-tp-side { padding-left: 232px; } }
@media (max-width: 1023px) { body.has-tp-side .tp-side { display: none; } }
/* Athlete hub outside app mode: on phones the strip sits under the hub's own photo
   header. In app mode (.hub-app) that header is hidden, so the strip keeps the normal
   offset below the site header and link row (20 Oct 2026: it slid under them). */
@media (max-width: 1023px) { .athlete-body:not(.hub-app) main > .tp-side { margin-top: 0; } }
/* Today: first-run checklist */
.tp-setup { margin-top: 20px; }
.tp-setup-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.tp-setup-steps li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--tp-line); }
.tp-setup-steps li:first-child { border-top: 0; }
.tp-setup-steps b { display: block; }
.tp-setup-steps small { display: block; color: var(--tp-ink-soft); font-size: 0.88rem; }
.tp-setup-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; background: var(--tp-week); color: var(--tp-ink); }
.tp-setup-steps li.is-done .tp-setup-mark { background: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.tp-setup-steps li.is-done b { color: var(--tp-ink-soft); text-decoration: line-through; text-decoration-color: var(--tp-line); }
.tp-setup-steps li.is-soon { opacity: 0.6; }
.tp-setup-steps .tp-btn { margin-top: 0; width: auto; }
@media (max-width: 640px) { .tp-setup-steps li { grid-template-columns: 30px 1fr; } .tp-setup-steps .tp-btn { grid-column: 2; justify-self: start; } }

/* ---- /tools/norwegian-singles: week builder ---- */
.nsm-stats { margin: 8px 0 24px; }
.nsm-week .tp-day[data-type^="session"] .tp-day-name { background: var(--tp-quality-bg); color: var(--tp-quality-fg); }
.nsm-week .tp-day[data-type="easy"] .tp-day-name,
.nsm-week .tp-day[data-type="long_run"] .tp-day-name { background: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.nsm-min { font-weight: 600; color: var(--rs-text-muted); margin-left: 6px; white-space: nowrap; }
.nsm-path { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.nsm-path li { display: grid; grid-template-columns: 110px 80px 1fr; gap: 4px 12px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--rs-border); border-radius: 12px; }
.nsm-path li:last-child { border-color: var(--tp-quality-mark); background: var(--tp-cream); }
.nsm-path strong { white-space: nowrap; }
.nsm-path-wk { font-size: 0.85rem; color: var(--rs-text-secondary); }
.nsm-path .tp-muted { font-size: 0.88rem; }
.nsm-ladders { margin-top: 16px; }
@media (max-width: 640px) {
    .nsm-path li { grid-template-columns: 1fr auto; }
    .nsm-path .tp-muted { grid-column: 1 / -1; }
}
.nsm-gateway-note { margin: 0 0 20px; }

/* ---- Free NSM training (training_plans/nsm.py) ---- */
.nsm-season { margin-top: 12px; }
.nsm-cells { list-style: none; margin: 0; padding: 18px 0 0; display: flex; gap: 3px; }
.nsm-cell { position: relative; flex: 1 1 0; min-width: 0; height: 32px; border-radius: 4px; background: var(--tp-easy-mark); }
.nsm-month { position: absolute; bottom: 100%; left: 0; margin-bottom: 3px; font-size: 0.7rem; font-weight: 700; color: var(--rs-text-muted); white-space: nowrap; }
@media (max-width: 640px) { .nsm-cells { gap: 2px; } .nsm-cell { height: 26px; border-radius: 3px; } .nsm-month { font-size: 0.62rem; } }
.nsm-cell.k-ease { background: var(--tp-easy-bg); box-shadow: inset 0 0 0 1px var(--tp-easy-mark); }
.nsm-cell.k-train { background: var(--tp-quality-mark); }
.nsm-cell.k-test { background: var(--tp-effort-mark); }
.nsm-cell.k-taper { background: var(--tp-quality-bg); box-shadow: inset 0 0 0 1px var(--tp-quality-mark); }
.nsm-cell.k-race { background: var(--tp-race-bg); box-shadow: inset 0 -3px 0 var(--tp-race-mark); }   /* as on the Calendar */
.nsm-cell.k-recover { background: var(--tp-easy-mark); }
.nsm-cell.is-projected { opacity: 0.45; }
.nsm-cell.is-past { opacity: 0.4; }
.nsm-cell.is-current { outline: 2px solid var(--rs-text); outline-offset: 2px; }
.nsm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: 0.78rem; color: var(--rs-text-muted); }
.nsm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--tp-quality-mark); }
.nsm-legend i.k-ease { background: var(--tp-easy-bg); box-shadow: inset 0 0 0 1px var(--tp-easy-mark); }
.nsm-legend i.k-test { background: var(--tp-effort-mark); }
.nsm-legend i.k-taper { background: var(--tp-quality-bg); box-shadow: inset 0 0 0 1px var(--tp-quality-mark); }
.nsm-legend i.k-race { background: var(--tp-race-bg); box-shadow: inset 0 -2px 0 var(--tp-race-mark); }
.nsm-legend i.k-recover { background: var(--tp-easy-mark); }
.nsm-legend i.is-projected { opacity: 0.45; }
.nsm-milestones { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; }
.nsm-milestones b { display: inline-block; min-width: 56px; font-variant-numeric: tabular-nums; }
.nsm-milestones li.k-race b { color: var(--tp-ink); }
.nsm-proj-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rs-text-muted); border: 1px solid var(--rs-border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.tp-cal-week.is-projected .tp-cal-bar { background: transparent; border: 1px dashed var(--tp-line); }
.tp-card.is-projected { opacity: 0.6; border-style: dashed; }
.tp-card.is-done { box-shadow: inset 3px 0 0 #1f7a45; }
.tp-card.is-done.is-done.is-done .tp-card-name::before { content: '\2713'; display: inline-grid; place-items: center; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #1f7a45; color: #fff; font-size: 9px; font-weight: 900; line-height: 1; transform: none; }
.tp-card.is-missed { opacity: 0.55; text-decoration: line-through; }
.nsm-preview { margin-top: 20px; }
.nsm-start-form { margin-top: 20px; align-items: flex-end; }
.nsm-start-form .tp-choice { flex: 1 1 100%; }
.nsm-stop { margin-top: 18px; }
.tp-app-body > .tp-panel + .tp-panel { margin-top: 20px; }
.nsm-mark { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rs-border); display: grid; gap: 12px; }
.nsm-mark-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nsm-mark-state { margin: 0; font-weight: 700; }
.nsm-mark-state.is-done { color: #1f7a45; }
.nsm-mark-state.is-missed { color: var(--rs-text-muted); }
.nsm-tt-form { align-items: flex-end; }
.nsm-cta .tp-form { margin-top: 8px; }
.nsm-today-run + .nsm-today-run { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rs-border); }
.nsm-today-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; margin: 4px 0 8px; line-height: 1.2; }
.nsm-week-label { font-weight: 700; margin: 4px 0 2px; }
.nsm-progress { height: 10px; border-radius: 999px; background: var(--rs-bg-elevated); overflow: hidden; margin: 14px 0 8px; }
.nsm-progress span { display: block; height: 100%; background: #1f7a45; border-radius: inherit; }
.nsm-flag { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rs-border); }
.nsm-flag p { margin: 0 0 8px; }
.nsm-flag-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.nsm-days { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--rs-border); border-radius: 16px; overflow: hidden; background: var(--rs-bg-card); }
.nsm-days li + li { border-top: 1px solid var(--rs-border); }
.nsm-days li.is-today { background: #fffaea; }
.nsm-day-link { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; color: inherit; text-decoration: none; }
.nsm-day-link:hover { background: var(--rs-bg-elevated); }
.nsm-day-dow { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.nsm-day-dow small { font-weight: 600; color: var(--rs-text-muted); }
.nsm-day-what { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.nsm-day-item.k-quality { font-weight: 700; }
.nsm-day-item.is-done b { color: #1f7a45; }
.nsm-day-item.is-missed { color: var(--rs-text-muted); text-decoration: line-through; }
.nsm-day-min { font-variant-numeric: tabular-nums; color: var(--rs-text-secondary); font-size: 0.9rem; white-space: nowrap; }
.nsm-days li.is-rest .nsm-day-what { color: var(--rs-text-muted); }
.nsm-mark-form .tp-btn, .nsm-tt-form .tp-btn, .nsm-flag .tp-btn { margin-top: 0; }
.nsm-inline { display: inline; }
.nsm-inline .tp-btn { margin: 0; padding: 0; min-height: 0; font-size: inherit; text-decoration: underline; }
.tp-today-rows form { margin-left: auto; }
.tp-today-rows form .tp-btn { margin-top: 0; }

/* Today: first-run checklist (18 Oct 2026; same steps as the hub's getting-started card) */
.tp-start { margin-top: 18px; }
.tp-checklist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.tp-checklist li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: #f8f8f6; }
.tp-checklist li.is-done { opacity: 0.6; }
.tp-check-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d1d5db; background: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #065f46; }
.tp-checklist li.is-done .tp-check-mark { border-color: #10b981; background: #d1fae5; }
.tp-check-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-check-body small { color: var(--rs-text-secondary); }
.tp-check-done { font-size: 0.8rem; font-weight: 600; color: #065f46; }
@media (max-width: 520px) { .tp-checklist li { flex-wrap: wrap; } .tp-checklist .tp-btn { margin-left: 38px; } }

/* Sync to my calendar (calendar_feed.py, 18 Oct 2026) */
.tp-sync { position: relative; }
.tp-sync > summary { list-style: none; cursor: pointer; }
.tp-sync > summary::-webkit-details-marker { display: none; }
.tp-sync-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--rs-border); box-shadow: 0 14px 40px rgba(0,0,0,.14); display: grid; gap: 12px; text-align: left; }
.tp-sync-lead { margin: 0; font-size: 0.92rem; }
.tp-sync-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-sync-url { display: grid; gap: 6px; font-size: 0.8rem; color: var(--rs-text-secondary); }
.tp-sync-url span { display: flex; gap: 6px; }
.tp-sync-url input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--rs-border); border-radius: 8px; font-size: 0.8rem; }
@media (max-width: 600px) { .tp-sync-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; } }
.tp-sync-btns .tp-btn { margin: 0; align-self: center; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; font-size: 0.92rem; line-height: 1.1; white-space: nowrap; }

/* Critique fixes (18 Oct 2026) */
.tp-card-flag { font-size: 0.75rem; }
.tp-app-body .tp-lead, .tp-app-body p.tp-muted, .tp-app-body p.tp-small, .tp-app-body .tp-note, .tp-app-body .nsm-cta p { max-width: 75ch; }

/* Find races: phones only (desktop has the site header) */
@media (min-width: 1024px) { .tp-side .tp-side-phone { display: none; } }
/* Phones: the Calendar's sticky head stays one compact row so it doesn't eat the screen */
@media (max-width: 767px) {
    .tp-app-head { gap: 8px; }
    .tp-app-head .tp-app-title { font-size: 1.7rem; }
    .tp-app-nav .tp-btn, .tp-sync > summary.tp-btn { padding: 6px 10px; font-size: 0.82rem; min-height: 0; }
}

/* Long runs get their own colour; months are marked where they start (18 Oct 2026) */
.tp-card.k-easy.k-long { background: var(--tp-long-bg); color: var(--tp-long-fg); }
.tp-card.k-easy.k-long .tp-card-name::before { border-color: var(--tp-long-mark); background: var(--tp-long-mark); }
.tp-cal-legend i.k-long { background: var(--tp-long-mark); border-radius: 50%; }
.tp-card.is-projected { opacity: 0.78; }
.tp-cal-month { margin: 22px 0 8px; padding: 8px 2px 6px; border-bottom: 3px solid var(--rs-text); font-family: var(--font-display, inherit); font-size: 1.35rem; font-weight: 800; color: var(--rs-text); }
.tp-cal-month:first-child { margin-top: 0; }
.tp-card-dist { display: block; font-size: 0.75rem; font-weight: 700; opacity: 0.9; }

/* ---- Plan setup and My training (18 Oct 2026: one plan at a time) ---------- */
.tp-field-error { display: block; font-size: 0.82rem; font-weight: 600; color: #b42318; }
.nsm-setup { display: grid; gap: 16px; }
.nsm-step + .nsm-step, .nsm-setup + .nsm-step { margin-top: 16px; }
.nsm-step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.nsm-step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--rs-text); color: var(--rs-bg-card, #fff); font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; }
.nsm-goals { border: 0; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.nsm-goal { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 14px; border: 1px solid var(--rs-border); border-radius: 12px; cursor: pointer; background: var(--rs-bg-card); }
.nsm-goal:has(input:checked) { border-color: var(--rs-text); box-shadow: inset 0 0 0 1px var(--rs-text); background: var(--tp-cream); }
.nsm-goal input { margin-top: 3px; accent-color: var(--rs-text); }
.nsm-goal-main { display: grid; gap: 3px; }
.nsm-goal-main small { color: var(--rs-text-secondary); font-size: 0.85rem; line-height: 1.4; }
.nsm-goal.is-off { cursor: not-allowed; background: var(--rs-bg-elevated); }
.nsm-goal.is-off b { color: var(--rs-text-muted); }
.nsm-goal-why { color: var(--rs-text-muted) !important; font-style: italic; }
.nsm-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.nsm-days { border: 0; margin: 0; padding: 0; }
.nsm-seg { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rs-border-dark); border-radius: 10px; overflow: hidden; background: var(--rs-bg-input); }
.nsm-seg label { position: relative; cursor: pointer; }
.nsm-seg label + label { border-left: 1px solid var(--rs-border-dark); }
.nsm-seg input { position: absolute; opacity: 0; inset: 0; }
.nsm-seg span { display: grid; place-items: center; min-height: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nsm-seg input:checked + span { background: var(--rs-text); color: var(--rs-bg-card, #fff); }
.nsm-seg input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--rs-accent); }
.nsm-race, .nsm-peak { border: 0; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.nsm-race-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nsm-race-row select, .nsm-race-row input[type="date"] { min-height: 48px; padding: 10px 12px; border: 1px solid var(--rs-border-dark); border-radius: 10px; background: var(--rs-bg-input); color: var(--rs-text); font: inherit; }
.nsm-race-dist { flex: 0 1 180px; }
.tp-dur { display: inline-flex; gap: 6px; }
.tp-dur label, label.tp-dur { display: inline-flex; align-items: center; min-height: 48px; padding: 0 10px 0 0; border: 1px solid var(--rs-border-dark); border-radius: 10px; background: var(--rs-bg-input); }
.tp-dur label:focus-within, label.tp-dur:focus-within { border-color: var(--rs-text); box-shadow: 0 0 0 3px var(--rs-accent-glow); }
.tp-dur input { width: 3.2ch; box-sizing: content-box; padding: 10px 4px 10px 12px; border: 0; background: transparent; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--rs-text); }
.tp-dur input[name="bpm"] { width: 3.4ch; }
.tp-dur input:focus { outline: none; }
.tp-dur span { font-size: 0.85rem; color: var(--rs-text-muted); }
.nsm-js .nsm-js-hide { display: none; }
.nsm-step > .tp-btn { margin-top: 20px; }
.nsm-plan-meta { margin: -6px 0 6px; font-weight: 600; }
.nsm-blocks th small, .nsm-blocks td small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--rs-text-muted); text-transform: none; letter-spacing: 0; }
.nsm-blocks tbody th { font-weight: 800; font-size: 1rem; }
.nsm-blocks select { min-height: 42px; padding: 6px 10px; border: 1px solid var(--rs-border-dark); border-radius: 8px; background: var(--rs-bg-input); color: var(--rs-text); font: inherit; font-weight: 600; }
.nsm-blocks tr.is-bad td, .nsm-blocks tr.is-bad th { background: var(--rs-error-bg); }
.nsm-blocks tr.is-past { color: var(--rs-text-muted); }
.nsm-blocks tr.is-now th, .nsm-blocks tr.is-now td { background: var(--tp-week-now); }
.nsm-blocks .nsm-now { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: var(--rs-text); color: var(--rs-bg-card, #fff) !important; font-weight: 700 !important; }
.nsm-blocks tr.nsm-fixed th { font-size: 0.92rem; }
.nsm-blocks tr.nsm-fixed th::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: 0; }
.nsm-blocks tr.k-pre_taper th::before { background: var(--tp-quality-bg); box-shadow: inset 0 0 0 1px var(--tp-quality-mark); }
.nsm-blocks tr.k-race_week th::before, .nsm-blocks tr.k-race5k th::before { background: var(--tp-ink); }
.nsm-blocks tr.k-recovery th::before { background: var(--tp-easy-mark); }
.nsm-sub-h { margin: 24px 0 8px; font-size: 1rem; font-weight: 800; }
.nsm-after { margin-top: 24px; padding: 16px 18px; border-radius: 12px; background: var(--tp-cream); border: 1px solid var(--tp-cream-line); }
.nsm-after .nsm-sub-h { margin-top: 0; }
.nsm-after ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--tp-ink-soft); }
.nsm-after b { color: var(--tp-ink); }
.nsm-start-form { margin-top: 24px; flex-direction: column; align-items: stretch; max-width: 520px; }
.nsm-glance { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.nsm-glance-title { margin: 8px 0 4px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.nsm-glance-title span { display: block; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--rs-text-muted); }
.nsm-change { align-self: start; padding: 16px; border-radius: 12px; background: var(--tp-cream); border: 1px solid var(--tp-cream-line); color: var(--tp-ink-soft); font-size: 0.92rem; }
.nsm-change h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: var(--tp-ink); }
.nsm-change p { margin: 0 0 12px; }
.nsm-change .tp-btn--ghost { width: 100%; margin-top: 0; }
.nsm-change form { margin-top: 6px; text-align: center; }
.nsm-ending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.nsm-ending p { margin: 0; }
.nsm-ending .tp-btn { margin-top: 0; }
.nsm-how { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.nsm-how dt { font-weight: 800; margin-bottom: 4px; }
.nsm-how dd { margin: 0; color: var(--rs-text-secondary); font-size: 0.92rem; line-height: 1.5; }
.nsm-numbers { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.nsm-num h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.nsm-paces { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 4px; }
.nsm-paces li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rs-border); font-size: 0.92rem; }
.nsm-paces b { font-variant-numeric: tabular-nums; }
.nsm-easy-hr { margin: 6px 0 4px; font-size: 1.05rem; }
.nsm-easy-hr b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.nsm-num-form { display: grid; gap: 8px; margin-top: 12px; }
.nsm-num-form .tp-label { margin: 0; }
.nsm-num-form .tp-btn { justify-self: start; margin-top: 4px; }
.tp-today-rows li.is-after { color: var(--rs-text-muted); }
@media (max-width: 767px) {
    .nsm-fields, .nsm-numbers, .nsm-glance { grid-template-columns: 1fr; }
    .nsm-goals { grid-template-columns: 1fr; }
    .nsm-blocks thead { display: none; }
    .nsm-blocks tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--rs-border); }
    .nsm-blocks th, .nsm-blocks td { padding: 0; border: 0; }
    .nsm-blocks tr.nsm-fixed td[colspan] { grid-column: 1 / -1; }
    .nsm-blocks select { width: 100%; }
    .nsm-step-h { font-size: 1.15rem; }
}
.tp-cal-legend .tp-cal-tip { margin-left: auto; font-style: italic; }
@media (max-width: 767px) { .tp-cal-legend .tp-cal-tip { margin-left: 0; flex-basis: 100%; } }
.nsm-days-move { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tp-cream); border: 1px solid var(--tp-cream-line); font-size: 0.85rem; line-height: 1.45; color: var(--tp-ink-soft); }
.nsm-days-move svg { flex: none; margin-top: 2px; color: var(--tp-ink); }
.nsm-days-move b { color: var(--tp-ink); }
/* My training: this week, linking into the calendar (18 Oct 2026). */
.nsm-thisweek { margin-bottom: 16px; border-color: var(--tp-cream-line); background: var(--tp-cream); }
.nsm-thisweek-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.nsm-thisweek-lead { margin: 6px 0 0; max-width: 56ch; color: var(--tp-ink-soft); }
.nsm-thisweek-btn { margin-top: 0; white-space: nowrap; }
.nsm-days7 { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nsm-days7 a { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px; padding: 8px; border-radius: 10px; background: var(--rs-bg-card); border: 1px solid var(--tp-cream-line); color: var(--rs-text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.nsm-days7 a:hover { border-color: var(--rs-text); transform: translateY(-1px); }
.nsm-days7 a:focus-visible { outline: 3px solid var(--rs-accent); outline-offset: 2px; }
.nsm-days7 li.is-today a { border-color: var(--rs-text); box-shadow: inset 0 0 0 1px var(--rs-text); }
.nsm-days7 li.is-past a { opacity: 0.6; }
.nsm-days7-date { font-size: 0.8rem; color: var(--rs-text-muted); }
.nsm-days7-date b { color: var(--rs-text); }
.nsm-days7-item { display: block; padding: 5px 7px; border-radius: 7px; font-size: 0.78rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.nsm-days7-item.k-easy { background: var(--tp-easy-bg); color: var(--tp-easy-fg); }
.nsm-days7-item.k-long { background: var(--tp-long-bg); color: var(--tp-long-fg); }
.nsm-days7-item.k-quality { background: var(--tp-quality-bg); color: var(--tp-quality-fg); }
.nsm-days7-item.k-effort { background: var(--tp-effort-bg); color: var(--tp-effort-fg); }
.nsm-days7-item.k-race, .nsm-days7-item.k-saved { background: var(--tp-race-bg); color: var(--tp-race-fg); }
.nsm-days7-item.is-done::before { content: '\2713  '; }
.nsm-days7-rest { font-size: 0.78rem; color: var(--rs-text-muted); }
@media (max-width: 767px) {
    .nsm-thisweek-btn { width: 100%; justify-content: center; }
    .nsm-days7 { grid-template-columns: 1fr; gap: 4px; }
    .nsm-days7 a { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; }
    .nsm-days7-date { flex: 0 0 52px; }
}
/* Completed time beside planned (18 Oct 2026). */
.tp-cal-done-v { margin-top: 6px; color: var(--rs-text-muted); }
.tp-cal-done-v.is-on { color: #1f7a45; }
.tp-cal-total-hint { margin-top: 4px; font-size: 0.66rem; line-height: 1.25; text-align: center; color: var(--rs-text-muted); }
.nsm-mark-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nsm-mark-q { flex-basis: 100%; margin: 0; font-weight: 700; }
.nsm-mark-state.is-done { padding: 8px 12px; border-radius: 10px; background: var(--tp-easy-bg); color: var(--tp-easy-fg) !important; }
@media (max-width: 768px) {
    .tp-cal-total.has-done { flex-wrap: wrap; align-items: baseline; }
    .tp-cal-done-v { margin-top: 0; margin-left: 10px; }
    .tp-cal-total-hint { margin: 0 0 0 auto; text-align: right; }
}
/* Race time entry (race_input, race-time.js; 18 Oct 2026). */
.rt { border: 0; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 520px; min-width: 0; }
.rt-dists { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-dists label { position: relative; cursor: pointer; }
.rt-dists input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.rt-dists span { display: inline-grid; place-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--rs-border-dark); border-radius: 999px; background: var(--rs-bg-input); font-weight: 700; font-size: 0.9rem; }
.rt-dists input:checked + span { background: var(--rs-text); border-color: var(--rs-text); color: var(--rs-bg-card, #fff); }
.rt-dists input:focus-visible + span { box-shadow: 0 0 0 3px var(--rs-accent-glow); }
.rt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-km, .rt-time { display: inline-flex; align-items: center; min-height: 52px; border: 1px solid var(--rs-border-dark); border-radius: 10px; background: var(--rs-bg-input); }
.rt-km[hidden] { display: none; }
.rt-km:focus-within, .rt-time:focus-within { border-color: var(--rs-text); box-shadow: 0 0 0 3px var(--rs-accent-glow); }
.rt-km input, .rt-time input { border: 0; background: transparent; font: inherit; color: var(--rs-text); outline: none; }
.rt-km input { width: 4.5ch; padding: 12px 6px 12px 14px; font-weight: 700; text-align: right; }
.rt-km span { padding-right: 14px; color: var(--rs-text-muted); font-size: 0.88rem; }
.rt-time input { width: 9ch; padding: 12px 14px; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.rt-time input::placeholder { color: #b5b0a6; font-weight: 700; }
.rt-read { margin: 0; font-size: 0.85rem; color: var(--rs-text-muted); }
.rt-read.is-ok { color: #1f7a45; font-weight: 700; }
.rt-read.is-bad { color: #b42318; font-weight: 600; }
.nsm-num-form .rt { margin-top: 4px; }
.nsm-race-on { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; }
.nsm-race-on input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--rs-border-dark); border-radius: 10px; background: var(--rs-bg-input); font: inherit; color: var(--rs-text); }
/* Device-aware calendar sync (training/_sync.html, 18 Oct 2026). */
.tp-sync-opts { display: grid; gap: 10px; }
.tp-sync-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tp-sync-opt[hidden] { display: none; }
.tp-sync-opt .tp-btn { margin-top: 0; }
.tp-sync-opt small { flex-basis: 100%; font-size: 0.78rem; color: var(--rs-text-muted); }
.tp-sync-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--rs-bg-elevated); font-size: 0.85rem; line-height: 1.45; }

/* Signed-in app pages share one column (20 Oct 2026 review): left-aligned under
   the side menu like the hub pages (hub-app.css), 1040px, with the calendar and
   plan pages at 1240px and the Settings form at 760px. They were centred at
   three different widths, so the content jumped about between menu items. */
@media (min-width: 1024px) {
    main:has(> .tp-side) .tp-body { margin-left: 0; padding-left: 32px; padding-right: 32px; }
    main:has(> .tp-side) .tp-body:not(.tp-body--wide):not(.st-body) { max-width: 1040px; }
}

/* Public tool pages (calculator, NSM tool, parkrun) beside Journey's sidebar
   from 1100px (20 Oct 2026, templates/partials/journey_rail.html). */
@media (min-width: 1100px) {
    .tp-journey {
        max-width: 1260px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 40px;
        padding-right: 20px;
    }
    .tp-journey > .tp-body { max-width: none; margin: 0; }
    .tp-journey > .journey-rail { margin-top: 32px; }
}

/* Sidebar-only ads on signed-in app pages (partials/app_ad_rail.html, 20 Oct 2026):
   a static 320px right column from 1100px for Journey's sticky sidebar ad; hidden
   below (Journey shows sidebars from 1100px). Every other child of <main> stays in
   the first column, which is as wide as the page's content (1040px; the training
   calendar's seven days take 1240px), so the ad sits beside it, not out at the
   window's right edge on wide screens (24 Oct 2026). fit-content() didn't work:
   Chrome sized the track from the content's uncapped width. */
.app-ad-rail { display: none; }
@media (min-width: 1100px) {
    main:has(> .app-ad-rail) { --app-content-w: 1040px; display: grid; grid-template-columns: minmax(0, var(--app-content-w)) 320px; justify-content: start; column-gap: 32px; row-gap: 0; padding-right: 24px; }
    main:has(> .app-ad-rail):has(.tp-cal) { --app-content-w: 1240px; }
    main:has(> .app-ad-rail) > :not(.app-ad-rail) { grid-column: 1; min-width: 0; }
    main:has(> .app-ad-rail) > .app-ad-rail { display: block; grid-column: 2; grid-row: 1 / span 40; align-self: stretch; margin-top: 70px; min-height: 600px; }
}

/* ---- /free-training: the free account's shop window (docs/training-funnel-plan.md C1, 21 Oct 2026) ---- */
.ft-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.ft-hero-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ft-cta { margin-top: 0; }
.ft-body .ft-cta { margin-top: 8px; }
.ft-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ft-shot { margin: 0; }
.ft-shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--rs-border); box-shadow: 0 10px 30px rgba(0,0,0,.08); background: #fff; }
.ft-shot figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--rs-text-muted); }
.ft-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ft-features li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--rs-border); border-radius: 14px; background: var(--rs-bg-card); }
.ft-features strong { font-size: 1.02rem; }
.ft-features span { color: var(--rs-text-secondary); font-size: 0.95rem; line-height: 1.5; }
.ft-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.ft-steps li { display: flex; gap: 14px; align-items: flex-start; }
.ft-steps strong { display: block; font-size: 1.02rem; }
.ft-steps span:not(.tp-step-num) { color: var(--rs-text-secondary); font-size: 0.95rem; }
.ft-final { padding: 28px 24px; border-radius: 18px; background: #fbf7ec; border: 1px solid #efe5c9; }
.ft-final .tp-h2 { margin-top: 0; }
@media (max-width: 640px) { .ft-shots { grid-template-columns: 1fr; } }

/* "Not doing this race" in calendar dialogs (_not_doing.html, 24 Oct 2026) */
.tp-notdoing { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rs-border); }
.tp-notdoing-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-notdoing-confirm p { flex-basis: 100%; margin: 0 0 4px; font-weight: 600; }
.tp-notdoing-error { color: #b42318; font-weight: 600; }

/* Rescoring fixes (24 Oct 2026): dark focus rings on the light page (the site's yellow
   is 1.4:1 on white), form fields included; a bigger calendar "+". */
body:has(main > .tp-side) main :focus-visible:not(.tp-side *) { outline: 2px solid #161616; outline-offset: 2px; }
body:has(main > .tp-side) main :is(input, select, textarea):focus-visible { outline: 2px solid #161616; outline-offset: 1px; }
@media (min-width: 769px) { .tp-cal-add { width: 28px; height: 28px; line-height: 28px; top: 2px; right: 2px; } }
.tp-cal-total-hint { font-size: 0.75rem; }
/* Calendar "+": Race / parkrun tabs (calendar.html, 24 Oct 2026) */
.tp-add-kind { display: inline-flex; gap: 4px; margin: 4px 0 14px; padding: 4px; border-radius: 12px; background: var(--rs-bg-elevated, #f3f2ee); }
.tp-add-kind[hidden] { display: none; }
.tp-add-kind button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-weight: 600; font-size: 0.92rem; line-height: 1; color: var(--rs-text-secondary); cursor: pointer; }
.tp-add-kind button[aria-selected="true"] { background: #fff; color: var(--rs-text); box-shadow: 0 1px 3px rgba(22,22,22,0.12); }
.tp-add-pr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tp-add-pr-error { margin: 10px 0 0; color: #b42318; font-weight: 600; }
.tp-add-dialog .tp-picker { margin-bottom: 12px; }
/* Race picker filter bar (calendar "+", _race_picker.html pk_filters) */
.tp-picker-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-picker-filters select { flex: 1 1 110px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--rs-border); border-radius: 10px; background: #fff; font: 600 0.88rem/1.2 inherit; color: var(--rs-text); }
/* [hidden] wins over these display rules (the confirm showed at once, and the parkrun
   search box stayed after choosing, 24 Oct 2026) */
.tp-notdoing-confirm[hidden], .tp-picker[hidden], .tp-field[hidden], .tp-picker-chosen[hidden], .tp-add-pr-error[hidden] { display: none !important; }
/* parkrun picker in the calendar "+": state, list or map, filter (24 Oct 2026) */
.tp-pr-bar { display: flex; gap: 8px; margin-bottom: 8px; }
.tp-pr-bar select { flex: 1; min-height: 40px; padding: 6px 10px; border: 1px solid var(--rs-border); border-radius: 10px; background: #fff; font: 600 0.9rem/1.2 inherit; }
.tp-pr-view { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--rs-bg-elevated, #f3f2ee); }
.tp-pr-view button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-weight: 600; font-size: 0.88rem; line-height: 1; color: var(--rs-text-secondary); cursor: pointer; }
.tp-pr-view button[aria-pressed="true"] { background: #fff; color: var(--rs-text); box-shadow: 0 1px 3px rgba(22,22,22,0.12); }
.tp-pr-list { max-height: 240px; margin-top: 8px; }
.tp-pr-list[hidden], .tp-pr-map[hidden] { display: none !important; }
.tp-pr-none { padding: 10px 12px; color: var(--rs-text-muted); }
.tp-pr-map { height: 260px; margin-top: 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--rs-border); }
/* A saved race that's been run shows its time on the calendar (24 Oct 2026) */
.tp-card-result { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tp-saved-result { margin: 8px 0; font-size: 1rem; }
.tp-saved-result strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
/* Training setup: the "Show my plan" button is always there, and lights up once the
   race time reads as valid (nsm_start.html, 24 Oct 2026) */
.nsm-show { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; }
.nsm-show-btn.is-ready { box-shadow: 0 0 0 4px rgba(251, 212, 14, 0.45); }
.nsm-show-hint { color: var(--rs-text); font-weight: 600; }
.nsm-show-hint[hidden] { display: none; }
/* Saved race cards carry a small race picture (John, 24 Oct 2026) */
.tp-card .tp-card-img { display: block; margin: -2px -2px 6px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 6px; background: var(--rs-bg-elevated, #f3f2ee); }
.tp-card .tp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-card .tp-card-img img.fit-contain { object-fit: contain; padding: 2px; }
/* Phones (Playwright iPhone check, 24 Oct 2026): only the Calendar's title bar stays
   pinned (it carries the month); on My training and Settings it took 93px of a 664px
   screen the whole way down. On phones the Calendar's bar is compact. */
main:not(:has(.tp-cal)) .tp-app-head { position: static; border-bottom: 0; }
@media (max-width: 767px) {
    main:has(.tp-cal) .tp-app-head { padding: 6px 12px; margin-bottom: 8px; gap: 6px 12px; }
    main:has(.tp-cal) .tp-app-title { font-size: 1.45rem; }
    main:has(.tp-cal) .tp-app-month { font-size: 0.9rem; }
    main:has(.tp-cal) .tp-app-head .tp-btn { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }
}
@media (max-width: 767px) {
    .tp-hide-phone { display: none; }
    main:has(.tp-cal) .tp-app-head { flex-wrap: nowrap; align-items: center; }
    main:has(.tp-cal) .tp-app-title { font-size: 1.3rem; white-space: nowrap; }
    main:has(.tp-cal) .tp-app-month { margin-left: 6px; font-size: 0.82rem; }
    main:has(.tp-cal) .tp-app-nav { flex: none; gap: 6px; }
    main:has(.tp-cal) .tp-app-head .tp-btn { min-height: 32px; padding: 0 10px; font-size: 0.78rem; }
}