/* ---------- Design tokens ----------
   Look: deep slate, white, and cool grey, with one sky-blue accent, sharp corners,
   Archivo type (condensed for headlines, expanded for labels), and
   black-and-white photography. --base is the dark brand color (header, hero, footer, tab bar);
   --volt is the accent (the name is kept
   from the first version so older rules still work). */
:root {
    --charcoal: #0f1a24;
    --charcoal-deep: #0b131b;
    --volt: #4cc3ff;
    --volt-hover: #7fd4ff;
    --volt-deep: #0a4f73;
    --volt-rgb: 76 195 255;
    --on-volt: #0b1620;
    --base: #0f1a24;
    --base-rgb: 15 26 36;
    --base-2: #1a2a38;
    --paper: #f3f6f8;
    --surface: #ffffff;
    --ink: #0f1a24;
    --muted: #55636f;
    --line: #dbe3ea;
    --accent: #0b6a9a;
    --good: #1f7a45;
    --warn: #995700;
    --bad: #b42318;
    --display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --sans: "Archivo", Arial, Helvetica, sans-serif;
    --header-h: 64px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #0b131b;
        --surface: #121e29;
        --ink: #eef3f7;
        --muted: #9fb0bf;
        --line: #223241;
        --accent: #7fd4ff;
        --good: #5cc98a;
        --warn: #e5ad4f;
        --bad: #f08a80;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --paper: #0b131b;
    --surface: #121e29;
    --ink: #eef3f7;
    --muted: #9fb0bf;
    --line: #223241;
    --accent: #7fd4ff;
    --good: #5cc98a;
    --warn: #e5ad4f;
    --bad: #f08a80;
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { line-height: 1.1; }

h2 {
    font-family: var(--display);
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 850;
    font-stretch: 110%;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    word-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 0.75rem;
}

h3 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

a { color: var(--accent); }

:focus-visible {
    outline: 3px solid var(--volt);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    background: var(--volt);
    color: var(--on-volt);
    padding: 8px 14px;
    font-weight: 700;
    z-index: 100;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[hidden] { display: none !important; }

.container { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.container.wide { max-width: 1200px; }
.container.narrow { max-width: 720px; }

.block { padding: 88px 0; }
.block + .block { border-top: 1px solid var(--line); }

.section-lede {
    color: var(--muted);
    margin: 0 0 2.25rem;
    max-width: 62ch;
    font-size: 1.05rem;
}

.eyebrow,
.kicker {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 115%;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.eyebrow { color: #ffffff; opacity: 0.85; }
.kicker { color: var(--accent); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    margin-bottom: 28px;
}
.section-head h2 { margin: 0; }

.noscript-nav { padding: 12px 24px; background: #000; }
.noscript-nav a { color: #fff; margin-right: 12px; }

/* ---------- Header and nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgb(var(--base-rgb) / 0.92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.header-inner {
    max-width: 1200px;
    min-height: var(--header-h);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 900;
    font-stretch: 112%;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-right: auto;
}

/* Logo: a loaded barbell resting on the baseline */
.brand-mark { flex: 0 0 auto; width: 28px; height: 28px; color: #ffffff; }
.brand-mark .bm-line { fill: var(--volt); }

.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item { position: relative; }
.has-menu { display: flex; align-items: center; }

#site-nav .nav-link {
    display: block;
    color: #d6d6d6;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.76rem;
    font-stretch: 100%;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 8px 6px;
}

#site-nav .has-menu .nav-link { padding-right: 2px; }
#site-nav .nav-link:hover { color: #ffffff; }

#site-nav .nav-link.active {
    color: #ffffff;
    box-shadow: inset 0 -2px 0 var(--volt);
}

.submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 32px;
    padding: 0;
    color: #bdbdbd;
    background: none;
    border: 0;
    cursor: pointer;
}
.submenu-toggle:hover { color: #ffffff; }
.submenu-toggle::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}
.has-menu.open .submenu-toggle::before { transform: translateY(2px) rotate(225deg); }

.submenu {
    list-style: none;
    margin: 0;
    padding: 8px;
}

#site-nav .submenu a {
    display: block;
    padding: 9px 12px;
    text-decoration: none;
    font-size: 0.92rem;
}
#site-nav .submenu strong { font-weight: 700; }
#site-nav .submenu a.is-current strong::before { content: "\2192\00a0"; color: var(--volt); }

.sub-desc {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
}

.submenu .divider { height: 1px; margin: 6px 4px; }

@media (min-width: 1241px) {
    .submenu {
        position: absolute;
        top: calc(100% + 14px);
        left: -8px;
        z-index: 60;
        min-width: 290px;
        background-color: var(--surface);
        border: 1px solid var(--line);
        border-top: 2px solid var(--ink);
        box-shadow: 0 18px 40px rgb(var(--base-rgb) / 0.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    }
    .submenu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -18px;
        height: 18px;
    }
    .has-menu.open .submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }
    #site-nav .submenu a { color: var(--ink); }
    #site-nav .submenu a:hover,
    #site-nav .submenu a:focus-visible { background-color: var(--paper); }
    .sub-desc { color: var(--muted); }
    .submenu .divider { background-color: var(--line); }
}

@media (min-width: 1241px) and (hover: hover) {
    .has-menu:not(.hover-off):hover .submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
    }
}

.theme-toggle,
.menu-toggle,
.jump-toggle {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    font-stretch: 100%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.theme-toggle:hover,
.menu-toggle:hover,
.jump-toggle:hover { border-color: #ffffff; }
.theme-toggle { min-width: 40px; font-size: 0.95rem; letter-spacing: 0; padding: 4px 9px; }

kbd {
    font-family: var(--sans);
    font-size: 0.85em;
    font-weight: 700;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: 2px;
    opacity: 0.8;
}

.menu-toggle { display: none; }

/* Smaller screens: a stacked menu, dropdowns expand in place */
@media (max-width: 1240px) {
    .header-inner { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
    .menu-toggle { display: inline-block; }
    .jump-toggle kbd { display: none; }
    #site-nav { order: 3; width: 100%; display: none; max-height: 75vh; overflow-y: auto; }
    #site-nav.open { display: block; }
    .nav-list { flex-direction: column; align-items: stretch; padding: 4px 0 8px; }
    .has-menu { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid rgba(255, 255, 255, 0.08); }
    #site-nav .nav-link { font-size: 0.95rem; padding: 12px 4px; }
    .submenu-toggle { width: 48px; height: 46px; }
    .submenu {
        display: none;
        grid-column: 1 / -1;
        margin: 0 0 8px 6px;
        padding: 2px 0 2px 10px;
        border-left: 2px solid var(--volt);
    }
    .has-menu.open .submenu { display: block; }
    #site-nav .submenu a { color: #ffffff; }
    #site-nav .submenu a:hover,
    #site-nav .submenu a:focus-visible { background-color: rgba(255, 255, 255, 0.08); }
    .sub-desc { color: #a8a8a8; }
    .submenu .divider { background-color: rgba(255, 255, 255, 0.2); }
}

@media (max-width: 460px) {
    .jump-toggle { display: none; }
    .brand { font-size: 1rem; }
}

/* ---------- Photos ----------
   Every photo is shown in black and white so the site looks like one brand,
   whatever the original colors were. If a photo fails to load, the dark
   background behind it still keeps the text readable. */
.hero-photo,
.banner-photo,
.pro-band > img,
.tile img,
.get-plan-photo img {
    filter: grayscale(1) contrast(1.08);
}

/* ---------- Hero (home page) ---------- */
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(860px, calc(100svh - var(--header-h)));
    background-color: var(--base);
    color: #ffffff;
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(var(--base-rgb) / 0.82) 0%, rgb(var(--base-rgb) / 0.55) 45%, rgb(var(--base-rgb) / 0.15) 100%),
        linear-gradient(0deg, rgb(var(--base-rgb) / 0.75) 0%, rgb(var(--base-rgb) / 0) 45%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 24px 56px;
}

.hero h1 {
    font-family: var(--display);
    font-size: clamp(3.4rem, 10.5vw, 9rem);
    font-weight: 900;
    font-stretch: 72%;
    line-height: 0.86;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    max-width: 9ch;
    margin: 0 0 1.4rem;
}
.hero h1 .hl { color: var(--volt); }

.hero-lede {
    font-size: 1.15rem;
    color: #e2e2e2;
    max-width: 46ch;
    margin: 0 0 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.6rem; }
.hero-actions:empty { display: none; }
.hero-copy .hero-actions { margin: 0 0 1.6rem; }
/* The coach button steps aside while the cover's own ask box is on screen */
@media (max-width: 760px) { body.hero-ask-visible:not(.coach-open) .coach-fab { visibility: hidden; } }

/* Cover: one-tap goals and a box to ask the coach */
.hero-label {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
}
.hero-goals ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 760px;
}
.hero-goals a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgb(var(--base-rgb) / 0.45);
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.hero-goals a strong {
    font-size: 0.86rem;
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hero-goals a strong::after { content: " \2192"; color: var(--volt); }
.hero-goals a span { font-size: 0.82rem; color: #cfcfcf; }
.hero-goals a:hover, .hero-goals a:focus-visible { background-color: #ffffff; border-color: #ffffff; color: var(--on-volt); }
.hero-goals a:hover span, .hero-goals a:focus-visible span { color: #444444; }
.hero-goals a:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }

.hero-ask { margin-top: 1.6rem; max-width: 760px; }
.hero-ask .hero-label { display: block; }
.hero-ask-row { display: flex; gap: 8px; }
.hero-ask input {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    background-color: rgb(var(--base-rgb) / 0.55);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
}
.hero-ask input::placeholder { color: #a8a8a8; }
.hero-ask input:focus { outline: 3px solid var(--volt); outline-offset: 0; border-color: #ffffff; }
.hero-ask .btn { min-height: 52px; flex: none; }

/* Wide screens: headline on the left, the choices on the right, all above the fold */
@media (min-width: 1000px) {
    .hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: 64px; padding-bottom: 48px; }
    .hero-copy h1 { font-size: clamp(4rem, 7.4vw, 7.4rem); }
    .hero-copy .hero-lede { margin-bottom: 0; }
    .hero-copy .hero-actions { margin: 1.6rem 0 0; }
    .hero-goals ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .hero-inner { padding-top: 40px; padding-bottom: 32px; }
    .hero-lede { font-size: 1rem; margin-bottom: 1.4rem; }
    .hero-goals ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-goals a { min-height: 60px; padding: 10px 12px; }
    .hero-goals a strong { font-size: 0.78rem; letter-spacing: 0.06em; }
    .hero-goals a span { font-size: 0.76rem; }
}

.hero-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
    margin: 2.5rem 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #bdbdbd;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hero-stats strong {
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 900;
    font-stretch: 75%;
    color: #ffffff;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Moving band of exercise names along the bottom of the hero */
.ticker {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #ffffff;
    color: var(--on-volt);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 70s linear infinite;
}
.ticker-track span {
    flex: none;
    padding: 13px 0;
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 115%;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker-track span::after { content: "\2726"; margin: 0 24px; color: var(--volt); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Calm strip under the hero: four promises, no motion */
.promise-strip {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background-color: #ffffff;
    color: #111111;
}
.promise-strip li {
    padding: 20px 24px;
    font-size: 0.92rem;
    color: #444444;
    border-left: 1px solid #e5e2db;
}
.promise-strip li:first-child { border-left: 0; }
.promise-strip strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-volt);
}
.promise-strip strong span { font: inherit; }
.promise-strip strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background-color: var(--volt); vertical-align: 1px; }
@media (max-width: 860px) {
    .promise-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promise-strip li:nth-child(3) { border-left: 0; }
    .promise-strip li:nth-child(n + 3) { border-top: 1px solid #e5e2db; }
}
@media (max-width: 420px) { .promise-strip li { padding: 16px; } }

/* How it works: photo beside the steps */
.how-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.how-photo { position: relative; min-height: 460px; background-color: var(--base-2); }
.how-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.how-grid .how-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 8px; }
.how-grid .how-steps li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; }
.how-grid .how-num { grid-row: span 2; font-size: 4rem; margin: 0; }
.how-grid .how-steps h3 { margin-top: 6px; }
@media (max-width: 900px) {
    .how-grid { grid-template-columns: 1fr; gap: 28px; }
    .how-photo { min-height: 280px; }
}

/* Lookbook: three photos with short captions */
.lookbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; background-color: var(--base); }
.lookbook figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--base-2); }
.lookbook img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.lookbook figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--base-rgb) / 0.8) 0%, rgb(var(--base-rgb) / 0) 50%); }
.lookbook figcaption {
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    bottom: 22px;
    color: #ffffff;
    font-size: 1rem;
}
.lookbook figcaption span {
    display: block;
    font-family: var(--display);
    font-size: 2.4rem;
    font-weight: 900;
    font-stretch: 72%;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
}
@media (max-width: 760px) {
    .lookbook { grid-template-columns: 1fr; }
    .lookbook figure { aspect-ratio: 16 / 10; }
}

/* ---------- Page banner (top of every inner page) ---------- */
.page-banner {
    position: relative;
    overflow: hidden;
    background-color: var(--base);
    color: #ffffff;
}
.page-banner.has-photo { min-height: 340px; display: flex; align-items: flex-end; }
.banner-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.page-banner.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(var(--base-rgb) / 0.85) 0%, rgb(var(--base-rgb) / 0.45) 60%, rgb(var(--base-rgb) / 0.35) 100%);
}
.page-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 44px;
}
.page-banner h1 {
    font-family: var(--display);
    font-size: clamp(3rem, 8vw, 6.2rem);
    font-weight: 900;
    font-stretch: 72%;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.page-banner-lede { margin: 0; max-width: 56ch; color: #dedede; font-size: 1.08rem; }
@media (max-width: 600px) {
    .page-banner.has-photo { min-height: 220px; }
    .page-banner-inner { padding: 40px 16px 28px; }
    .page-banner-lede { font-size: 0.98rem; }
}

/* ---------- Buttons ----------
   Sharp corners, uppercase, letter-spaced. Primary is black on light
   backgrounds and white on dark ones; the accent shows on hover. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 800;
    font-stretch: 112%;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 15px 26px;
    border: 2px solid transparent;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background-color: var(--volt); color: var(--on-volt); }

.btn-light { background-color: #ffffff; color: var(--on-volt); }
.btn-light:hover { background-color: var(--volt); color: var(--on-volt); }

.btn-outline-light,
.btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); }
.btn-outline-light:hover,
.btn-ghost:hover { border-color: #ffffff; background-color: rgba(255, 255, 255, 0.1); }

.btn-small {
    padding: 9px 14px;
    font-size: 0.72rem;
    background-color: var(--surface);
    color: var(--ink);
    border: 1px solid var(--ink);
}
.btn-small:hover { background-color: var(--ink); color: var(--surface); }

.text-link {
    display: inline-block;
    font-weight: 800;
    font-stretch: 110%;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid var(--volt);
    padding-bottom: 2px;
}
.text-link:hover { color: var(--accent); }
.text-link::after { content: "\00a0\2192"; }

.text-button {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--volt);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---------- Home: "Nervous about starting?" ---------- */
.fear-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--ink);
}
.fear-grid li {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 26px 0;
}
.fear-grid li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.fear-grid h3 {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 850;
    font-stretch: 85%;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 10px;
}
.fear-grid p { margin: 0 0 18px; color: var(--muted); }
.fear-grid .text-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) {
    .fear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fear-grid li:nth-child(3) { padding-left: 0; border-left: 0; }
    .fear-grid li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .fear-grid { grid-template-columns: 1fr; }
    .fear-grid li, .fear-grid li + li { padding-left: 0; border-left: 0; }
    .fear-grid li + li { border-top: 1px solid var(--line); }
}

/* Home: the four worries as tap-to-open questions */
.fear-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 760px; }
.fear-list li { border-bottom: 1px solid var(--line); }
.fear-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none;
    font-family: var(--display); font-size: 1.2rem; font-weight: 850; font-stretch: 85%; text-transform: uppercase; line-height: 1.1; }
.fear-list summary::-webkit-details-marker { display: none; }
.fear-list summary::after { content: "+"; flex: 0 0 auto; font-size: 1.4rem; font-weight: 700; color: var(--muted); }
.fear-list details[open] summary::after { content: "\2212"; }
.fear-list summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.fear-list p { margin: 0 0 10px; color: var(--muted); }
.fear-list .text-link { display: inline-block; margin-bottom: 16px; }

/* Home for people who already have a plan: just the cover, and Your starting point folded */
body.returning .fears, body.returning .get-plan:not(:target) { display: none; }
/* Up next card on the cover: today's day of your plan, first thing you see */
body.has-home-next .hero-lede, body.has-home-next .hero-setup-link { display: none; }
.hero h1.hero-welcome { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 14ch; margin-bottom: 1rem; overflow-wrap: anywhere; }
.hero-actions:has(.home-next) { display: block; }
.home-next {
    max-width: 560px; padding: 18px 20px 14px;
    background-color: rgb(var(--base-rgb) / 0.88); color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16); border-top: 3px solid var(--volt);
}
.home-next-k { margin: 0 0 4px; font-size: 0.7rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt); }
.home-next-title { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 900; font-stretch: 80%; line-height: 1.05; text-transform: uppercase; color: #ffffff; overflow-wrap: anywhere; }
.home-next-sub { margin: 6px 0 0; font-size: 0.86rem; color: #cfd6dc; }
.home-next-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.home-next-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }
.home-next-list li span { color: #cfd6dc; font-size: 0.84rem; }
.home-next-list li.is-done strong { text-decoration: line-through; text-decoration-color: var(--volt); color: #a9b2ba; }
.home-next-list .home-next-more { color: #cfd6dc; font-size: 0.82rem; justify-content: flex-start; }
.home-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.home-next-actions .btn-primary { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.home-next-actions .btn-primary:hover, .home-next-actions .btn-primary:focus-visible { background-color: #ffffff; border-color: #ffffff; color: var(--on-volt); }
.home-next-switch { display: inline-block; min-height: 44px; line-height: 44px; margin-top: 2px; color: #ffffff; font-size: 0.82rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 3px; }
@media (max-width: 760px) {
    .home-next { padding: 14px 14px 8px; }
    .home-next-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.setup-fold { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.setup-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; }
.setup-fold > summary::-webkit-details-marker { display: none; }
.setup-fold > summary::after { content: "Edit"; margin-left: auto; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.setup-fold[open] > summary::after { content: "Close"; }
.setup-fold > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.setup-fold-k { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.setup-fold-v { font-weight: 700; }
.setup-fold[open] > [data-setup] { padding: 16px 0 24px; }

/* ---------- Home: Get your plan ---------- */
.get-plan { background-color: var(--surface); }
.get-plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: stretch;
}
.get-plan-photo { position: relative; min-height: 420px; background-color: var(--base-2); }
.get-plan-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .get-plan-grid { grid-template-columns: 1fr; gap: 28px; }
    .get-plan-photo { display: none; }
}

.quickstart { align-self: center; }
.qs-kicker {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 115%;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}
.quickstart h2 { margin: 0 0 22px; }
.quickstart fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.quickstart legend {
    padding: 0;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.qs-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qs-goals legend { grid-column: 1 / -1; }
.qs-goals label, .qs-day-list label { position: relative; display: block; }
.qs-goals input, .qs-day-list input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qs-goals span {
    display: block;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.qs-goals strong { display: block; font-size: 1rem; }
.qs-goals small { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
.qs-goals span:hover { border-color: var(--ink); }
.qs-goals input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background-color: var(--surface); }
.qs-goals input:checked + span strong::after { content: " \2713"; color: var(--accent); }
.qs-goals input:focus-visible + span,
.qs-day-list input:focus-visible + span { outline: 3px solid var(--volt); outline-offset: 2px; }

.qs-day-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-day-list span {
    display: block;
    min-width: 74px;
    text-align: center;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--line);
    background-color: var(--paper);
    cursor: pointer;
}
.qs-day-list input:checked + span { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }

.qs-go { width: 100%; padding: 17px 20px; font-size: 0.88rem; }
.qs-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--muted); text-align: center; }

/* ---------- Home: program tiles ---------- */
.program-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--base-2);
    color: #ffffff;
    text-decoration: none;
}
.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(var(--base-rgb) / 0.85) 0%, rgb(var(--base-rgb) / 0) 55%);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); filter: grayscale(0.2) contrast(1.05); }
.tile-tag {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    padding: 5px 9px;
    background-color: #ffffff;
    color: var(--on-volt);
    font-size: 0.68rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tile-body { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; }
.tile-body strong {
    display: block;
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 900;
    font-stretch: 75%;
    text-transform: uppercase;
    line-height: 1;
}
.tile-body small { display: block; margin-top: 6px; color: #d4d4d4; font-size: 0.85rem; }
.tile-body small::after { content: "\00a0\2192"; color: var(--volt); font-weight: 800; }
@media (max-width: 960px) { .program-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .program-tiles { gap: 10px; } .tile-body strong { font-size: 1.35rem; } }

/* ---------- Home: how it works ---------- */
.how-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.how-num {
    display: block;
    font-family: var(--display);
    font-size: 5rem;
    font-weight: 900;
    font-stretch: 72%;
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    margin-bottom: 10px;
}
.how-steps h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em; }
.how-steps p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Home: pro band ---------- */
.pro-band {
    position: relative;
    overflow: hidden;
    background-color: var(--base);
    color: #ffffff;
}
.pro-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro-band::after { content: ""; position: absolute; inset: 0; background: rgb(var(--base-rgb) / 0.68); }
.pro-band-inner { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 110px; }
.pro-band h2 { max-width: 18ch; color: #ffffff; }
.pro-band p:not(.kicker) { max-width: 52ch; color: #dddddd; margin: 0 0 26px; font-size: 1.08rem; }
.pro-band .kicker { color: var(--volt); }

/* ---------- Home: tools teaser ---------- */
.teaser-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--line);
    border: 1px solid var(--line);
}
.teaser-cards a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 24px;
    background-color: var(--surface);
    color: var(--ink);
    text-decoration: none;
}
.teaser-cards a:hover { background-color: var(--paper); }
.teaser-cards strong { font-size: 1.1rem; }
.teaser-cards strong::after { content: " \2192"; color: var(--accent); }
.teaser-cards span { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 860px) { .teaser-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .teaser-cards { grid-template-columns: 1fr; } .teaser-cards a { padding: 14px 16px; } }
/* Home on phones: tighter spacing between the few sections left */
@media (max-width: 600px) { body[data-page="home"] .block { padding: 48px 0; } }
body.returning .setup-block { padding: 24px 0; }

/* ---------- Home: final call to action ---------- */
.final-cta { background-color: var(--volt); color: var(--on-volt); }
.final-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 64px;
    padding-bottom: 64px;
}
.final-cta h2 { margin: 0; max-width: 16ch; color: var(--on-volt); }
.final-cta .btn-light { background-color: var(--base); color: #ffffff; }
.final-cta .btn-light:hover { background-color: #ffffff; color: var(--on-volt); }

.tools-note { margin: 0 0 1.5rem; color: var(--muted); }

/* ---------- Start here paths ---------- */
.paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.path {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--ink);
    border-radius: 6px;
    padding: 24px;
}

.path-tag {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.path h3 {
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 4px 0 10px;
}

.path > p { margin: 0 0 1rem; color: var(--muted); }

.steps {
    margin: 0 0 1.25rem;
    padding-left: 1.3rem;
    font-weight: 500;
}
.steps li { padding: 3px 0; }
.steps li::marker { font-weight: 800; color: var(--accent); }

.path-links {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

@media (max-width: 900px) {
    .paths { grid-template-columns: 1fr; }
}

/* ---------- Shared controls ---------- */
select, input, textarea {
    font: inherit;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 10px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 32px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
}

/* Segmented buttons made from radio inputs */
.segmented {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.segmented legend {
    float: left;
    width: 100%;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}
.segmented label { position: relative; }
.segmented input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.segmented span {
    display: block;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.92rem;
    border: 1px solid var(--line);
    background-color: var(--surface);
    margin-left: -1px;
    cursor: pointer;
}
.segmented label:first-of-type span { border-radius: 4px 0 0 4px; margin-left: 0; }
.segmented label:last-of-type span { border-radius: 0 4px 4px 0; }
.segmented input:checked + span {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    position: relative;
}
.segmented input:focus-visible + span { outline: 3px solid var(--volt); outline-offset: 2px; position: relative; }
.segmented.compact span { padding: 6px 12px; font-size: 0.86rem; }


.share { display: flex; flex-direction: column; gap: 4px; margin-left: auto; }
.share-status { margin: 0; min-height: 1.2em; font-size: 0.8rem; font-weight: 600; color: var(--good); max-width: 32ch; word-break: break-all; }

@media (max-width: 760px) {
    .share { margin-left: 0; }
}

/* ---------- Program builder ---------- */
.program-head {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px 40px;
    margin-bottom: 24px;
}

.program-head h3 {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.program-head p { margin: 0; color: var(--muted); }
.program-head .plan-source { margin-top: 10px; font-size: 0.88rem; }
.program-head .plan-source a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.program-meta { margin: 0; display: grid; gap: 10px; }
.program-meta div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.program-meta dt { font-size: 0.85rem; font-weight: 700; color: var(--muted); padding-top: 2px; }
.program-meta dd { margin: 0; font-weight: 500; }

@media (max-width: 760px) {
    .program-head { grid-template-columns: 1fr; }
    .program-meta div { grid-template-columns: 1fr; gap: 0; }
}

.week-progress { margin-bottom: 20px; }
.progress-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 8px;
}
.progress-track {
    height: 10px;
    background-color: var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    width: 0;
    background-color: var(--volt);
    border-radius: 999px;
    transition: width 0.35s ease;
}
:root[data-theme="light"] .progress-fill,
:root:not([data-theme]) .progress-fill { box-shadow: inset 0 0 0 1px rgb(var(--base-rgb) / 0.12); }

.day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.day-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px;
}
.day-card.complete { border-color: var(--good); box-shadow: inset 0 3px 0 var(--good); }
.day-card.is-next { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--volt); }
.day-status { margin-left: 6px; color: var(--accent); }
.day-card.complete .day-status { color: var(--good); }

.day-card header { margin-bottom: 10px; }
.day-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.day-card h4 {
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.ex-list li > input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--ink);
    cursor: pointer;
}
.ex-main { display: flex; flex-direction: column; min-width: 0; }
.ex-name { font-weight: 700; line-height: 1.3; cursor: pointer; }
.ex-dose { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
.ex-rest, .ex-swap { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.ex-list li > input:checked + .ex-main .ex-name { text-decoration: line-through; color: var(--muted); }

.ex-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.badge {
    padding: 2px 7px;
    font-size: 0.66rem;
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--muted);
}
.badge-new { border-color: var(--volt); color: var(--accent); }
.badge-you { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }

.ex-target {
    margin-top: 6px;
    padding: 7px 9px;
    background-color: var(--paper);
    border-left: 3px solid var(--line);
    font-size: 0.82rem;
    line-height: 1.4;
}
.ex-target.is-up { border-left-color: var(--good); }
.ex-target.just-saved { animation: saved 1.6s ease-out; }
@keyframes saved { 0%, 40% { background-color: color-mix(in srgb, var(--good) 18%, var(--paper)); } }
.ex-last { display: block; font-weight: 700; color: var(--ink); }

.ex-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    min-height: 32px;
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-expanded="true"] { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }

.log-form {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    background-color: var(--paper);
}
.log-date { margin-bottom: 8px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.log-date input { margin-left: 6px; padding: 4px 6px; font-size: 0.85rem; }
.log-set {
    display: grid;
    grid-template-columns: 44px 1fr 1fr;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.log-set-num { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.log-set label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.log-set input { width: 100%; min-width: 0; padding: 7px 8px; font-variant-numeric: tabular-nums; }
.log-unit { font-size: 0.72rem; color: var(--muted); }
.log-help { margin: 4px 0 10px; font-size: 0.75rem; color: var(--muted); }
.log-buttons { display: flex; align-items: center; gap: 14px; }
.btn-compact { padding: 10px 16px; font-size: 0.72rem; }
.log-status { margin: 6px 0 0; font-size: 0.8rem; color: var(--bad); min-height: 0; }

.rest-btn {
    align-self: flex-start;
    font: inherit;
    font-size: 0.82rem;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 2px 0;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.rest-btn:hover { color: var(--ink); }
.rest-btn span[aria-hidden] { font-size: 0.65rem; color: var(--accent); }

/* Rest timer bar */
.rest-timer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background-color: var(--base);
    color: #ffffff;
    border-top: 3px solid var(--volt);
    box-shadow: 0 -10px 30px rgb(var(--base-rgb) / 0.3);
}
.rest-timer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 20px;
}
.rest-timer-text { display: flex; flex-direction: column; }
.rest-timer-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #bdbdbd; }
.rest-timer-time {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 900;
    font-stretch: 75%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rest-timer-bar { height: 6px; background-color: #333333; }
.rest-timer-bar div { height: 100%; width: 100%; background-color: var(--volt); transition: width 0.25s linear; }
.rest-timer-buttons { display: flex; gap: 8px; }
.rest-timer .chip { color: #ffffff; border-color: #555555; }
.rest-timer .chip:hover { border-color: #ffffff; }
.rest-timer.is-done { background-color: var(--volt); color: var(--on-volt); }
.rest-timer.is-done .rest-timer-label { color: var(--on-volt); }
.rest-timer.is-done .chip { color: var(--on-volt); border-color: var(--on-volt); }
@media (max-width: 600px) {
    .rest-timer-inner { grid-template-columns: 1fr auto; padding-left: 16px; padding-right: 16px; }
    .rest-timer-bar { grid-column: 1 / -1; grid-row: 2; }
}
/* Small timer: one slim row with the time, Done resting, and More */
.rest-timer.is-mini .rest-timer-inner { grid-template-columns: 1fr auto; gap: 6px 12px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.rest-timer.is-mini .rest-timer-text { flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; }
.rest-timer.is-mini .rest-timer-label { order: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rest-timer.is-mini .rest-timer-time { font-size: 1.7rem; }
.rest-timer.is-mini .rest-timer-bar { grid-column: 1 / -1; grid-row: 2; height: 3px; }
.rest-timer.is-mini #rest-plus, .rest-timer.is-mini .rest-timer-at, .rest-timer.is-mini .rest-timer-alerts,
.rest-timer.is-mini .rest-push-wrap, .rest-timer.is-mini .rest-ios-wrap { display: none !important; }
.rest-timer-size { min-width: 64px; justify-content: center; }

.cardio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; }
.cardio-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.cardio-grid select, .cardio-grid input { width: 100%; min-width: 0; padding: 7px 8px; font-size: 0.88rem; font-weight: 400; color: var(--ink); }
.cardio-grid label:first-child, .cardio-grid label:last-child { grid-column: 1 / -1; }

/* Week bar */
.week-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 14px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background-color: var(--ink);
    color: var(--paper);
}
.week-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.week-info strong {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 900;
    font-stretch: 85%;
    text-transform: uppercase;
}
.week-info span { font-size: 0.85rem; opacity: 0.75; }
.week-step {
    width: 40px;
    height: 40px;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--paper);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
    cursor: pointer;
}
.week-step:hover:not(:disabled) { border-color: var(--paper); }
.week-step:disabled { opacity: 0.3; cursor: not-allowed; }
.week-bar #week-prev { grid-column: 1; grid-row: 1; }
.week-bar .week-info { grid-column: 2; grid-row: 1; }
.week-bar #week-next { grid-column: 3; grid-row: 1; }
.week-bar #week-today { grid-column: 2; grid-row: 2; justify-self: start; color: var(--paper); }
.week-variety { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; opacity: 0.8; }
.week-phase { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.9rem; }
.week-challenge { display: block; margin-top: 4px; color: inherit; font-weight: 700; }
.week-challenge::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background-color: var(--volt); vertical-align: 1px; }
.wave-dots { display: inline-flex; gap: 4px; margin-right: 10px; vertical-align: 1px; }
.wave-dots span { width: 18px; height: 6px; background-color: color-mix(in srgb, var(--paper) 25%, transparent); }
.wave-dots span.done { background-color: color-mix(in srgb, var(--paper) 60%, transparent); }
.wave-dots span.on { background-color: var(--volt); }

/* Light week (deload) toggle in the week bar */
.week-light { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.week-light[hidden] { display: none; }
.week-light-btn {
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
    cursor: pointer;
}
.week-light-btn:hover { border-color: var(--paper); }
.week-light-btn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.week-light.is-on .week-light-btn { color: var(--on-volt); background-color: var(--volt); border-color: var(--volt); }
.week-light-note { flex: 1 1 260px; margin: 0; font-size: 0.85rem; opacity: 0.85; }
.week-light.is-on .week-light-note { opacity: 1; }

.jump-today { margin: -8px 0 24px; }
@media (max-width: 600px) { .jump-today { width: 100%; } }

.plan-details summary {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}
.plan-details[open] summary { margin-bottom: 12px; }

.why-rotate {
    margin-bottom: 22px;
    border: 1px solid var(--line);
    background-color: var(--surface);
}
.why-rotate summary {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.why-rotate > div { padding: 0 16px 6px; color: var(--muted); font-size: 0.93rem; }
.why-rotate p { margin: 0 0 12px; max-width: 75ch; }

/* Personal settings */
.profile-panel {
    margin-bottom: 18px;
    border: 2px solid var(--ink);
    background-color: var(--surface);
}
.profile-panel summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 14px 16px;
    cursor: pointer;
}
.profile-title {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 900;
    font-stretch: 85%;
    text-transform: uppercase;
}
.profile-title::after { content: " +"; color: var(--accent); }
.profile-panel[open] .profile-title::after { content: " \2212"; }
.profile-sub { font-size: 0.88rem; color: var(--muted); }
.profile-form { padding: 4px 16px 10px; max-width: 640px; }
.field-hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.profile-note { margin: 0 0 8px; font-weight: 600; }

/* My progress */
.my-progress { background-color: var(--surface); }
.progress-panel { border: 1px solid var(--line); background-color: var(--paper); padding: 20px; }
.progress-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.progress-controls label { font-weight: 700; font-size: 0.85rem; }
.progress-controls select { min-width: 240px; max-width: 100%; }
.progress-chart-wrap { background-color: var(--surface); border: 1px solid var(--line); }
#progress-chart { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--line); }
.chart-label { fill: var(--muted); font-size: 12px; font-family: var(--sans); }
.chart-empty { fill: var(--muted); font-size: 15px; font-family: var(--sans); }
.chart-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.chart-proj { fill: none; stroke: var(--volt); stroke-width: 2.5; stroke-dasharray: 7 6; }
.chart-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.progress-summary p { margin: 12px 0 0; color: var(--muted); font-size: 0.92rem; max-width: 80ch; }
.progress-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 16px;
    background-color: var(--line);
    border: 1px solid var(--line);
}
.progress-stats div { background-color: var(--surface); padding: 12px 14px; }
.progress-stats span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.progress-stats strong { font-family: var(--display); font-size: 1.6rem; font-weight: 900; font-stretch: 80%; }
@media (max-width: 600px) { .progress-stats { grid-template-columns: 1fr; } }
.progress-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.reset-panel { margin-top: 32px; padding: 20px; border: 1px solid var(--line); border-top: 4px solid var(--ink); max-width: 640px; }
.reset-panel h3 { margin: 0 0 6px; }
.reset-panel fieldset { border: 0; margin: 12px 0 16px; padding: 0; }
.reset-panel legend { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.reset-list { display: grid; gap: 4px; }
.reset-item { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.reset-item input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--volt); }
.reset-item small { display: block; color: var(--muted); font-size: 0.8rem; }
.reset-item.is-empty { opacity: 0.55; cursor: default; }
.reset-confirm { margin-top: 12px; padding: 14px; background-color: var(--paper); border-left: 4px solid var(--volt); }
.reset-confirm p:focus { outline: none; }
#reset-status .text-button { margin-left: 8px; min-height: 44px; }

/* How-to dialog */
.howto {
    width: min(640px, calc(100% - 24px));
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 0;
    color: var(--ink);
    background-color: var(--surface);
    border: 0;
    border-top: 4px solid var(--volt);
    box-shadow: 0 30px 80px rgb(var(--base-rgb) / 0.45);
}
.howto::backdrop { background-color: rgb(var(--base-rgb) / 0.65); }
.howto-inner { max-height: calc(100vh - 52px); overflow-y: auto; padding: 22px 24px 18px; }
.howto-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.howto-head h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin: 0 0 4px; }
.howto-head .kicker { margin-bottom: 6px; }
.howto-eq { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
.howto-close {
    flex: none;
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    cursor: pointer;
}
.howto-close:hover { border-color: var(--ink); }
.howto-demo { width: 100%; margin: 4px 0 18px; }
.howto-warm { width: 100%; margin: -8px 0 18px; }
.howto-body h3 { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 18px 0 6px; }
.howto-body p { margin: 0; }
.howto-steps { margin: 0; padding-left: 1.3rem; }
.howto-steps li { padding: 3px 0; }
.howto-steps li::marker { font-weight: 800; color: var(--accent); }
.howto-tip { margin-top: 16px; padding: 12px 14px; background-color: var(--paper); border-left: 4px solid var(--volt); }
.howto-mistakes { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.howto-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; background-color: var(--line); border: 1px solid var(--line); }
.howto-levels div { background-color: var(--surface); padding: 10px 12px; }
.howto-levels dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.howto-levels dd { margin: 2px 0 0; font-weight: 600; }
.howto-alts { display: flex; flex-wrap: wrap; gap: 6px; }
.howto .fine-print { margin-top: 18px; }
@media (max-width: 460px) { .howto-levels { grid-template-columns: 1fr; } .howto-inner { padding: 18px 16px 14px; } }

/* ---------- Tools ---------- */
.tools-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
}
.tools-head .section-lede { margin-bottom: 1.5rem; }
.tools-head .segmented { margin-bottom: 1.5rem; }

.panel {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 22px;
    margin-bottom: 24px;
}

.tool-title { margin-bottom: 16px; }
.tool-title h3 {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}
.tool-title p { margin: 2px 0 0; color: var(--muted); }

.split-tool {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) {
    .split-tool { grid-template-columns: 1fr; }
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.tool-grid .panel { margin-bottom: 0; }
@media (max-width: 860px) {
    .tool-grid { grid-template-columns: 1fr; }
}

.tool-form .segmented { margin-bottom: 16px; }

.pair { display: flex; align-items: center; gap: 6px; }
.pair input { width: 100%; min-width: 0; }
.pair span { color: var(--muted); font-weight: 600; font-size: 0.9rem; }

.tool-results {
    background-color: var(--paper);
    border-radius: 6px;
    padding: 18px;
}

.result-empty { margin: 0; color: var(--muted); }

.result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}
.result { display: flex; flex-direction: column; }
.result.big { grid-column: 1 / -1; }
.result-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.result-value {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.result.big .result-value { font-size: 3rem; color: var(--accent); }
.result-unit { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.result-note { margin: 0; font-size: 0.9rem; color: var(--muted); }
.result-note + .result-note { margin-top: 8px; }
.result-note.warn { color: var(--warn); font-weight: 600; }

.pct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    margin-top: 12px;
}
.pct-table th, .pct-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.pct-table th { font-size: 0.8rem; color: var(--muted); }
.pct-table td:nth-child(2) { font-weight: 700; }

/* Weight trend */
.weight-form .btn { margin-top: 2px; }
.weight-list { list-style: none; margin: 12px 0 0; padding: 0; }
.weight-list li {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
}
.weight-list span { color: var(--muted); }
#weight-chart { display: block; width: 100%; height: auto; margin-bottom: 12px; background-color: var(--surface); }
.weight-dot { fill: var(--muted); opacity: 0.7; }

/* Barbell drawing for the plate loader */
.barbell {
    display: flex;
    align-items: center;
    height: 120px;
    margin: 6px 0 14px;
    overflow-x: auto;
}
.bar-shaft { width: 70px; height: 10px; background-color: #9aa0a8; border-radius: 2px 0 0 2px; flex: none; }
.bar-collar { width: 10px; height: 26px; background-color: #7d838c; border-radius: 2px; flex: none; }
.plate {
    flex: none;
    width: 16px;
    margin-left: 2px;
    border-radius: 3px;
    background-color: var(--c, #2b2f36);
    box-shadow: inset -3px 0 0 rgb(var(--base-rgb) / 0.18);
}
.bar-sleeve-end { flex: none; width: 34px; height: 14px; background-color: #9aa0a8; border-radius: 0 3px 3px 0; margin-left: 2px; }

.plate-list { margin: 0 0 8px; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.fine-print { margin: 24px 0 0; font-size: 0.88rem; color: var(--muted); max-width: 80ch; }

/* Day options a plan doesn't offer */
.segmented label.is-off span { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.segmented label.is-off input { cursor: not-allowed; }

/* ---------- Train like a pro ---------- */
.kicker {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.principles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--line);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.principles li {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    padding: 24px 22px 22px;
}
.principle-num {
    font-family: var(--display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    font-stretch: 72%;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    margin-bottom: 8px;
}
.principles h3 {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.principles p { margin: 0 0 14px; color: var(--muted); }
.principles .text-link { margin-top: auto; }

/* "How to start" guide inside each principle */
.principle-guide {
    margin: 0 0 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.principle-guide summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.principle-guide summary::-webkit-details-marker { display: none; }
.principle-guide summary::after {
    content: "+";
    font-family: var(--display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent);
}
.principle-guide[open] summary::after { content: "\2212"; }
.principle-guide summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.principle-guide ol {
    margin: 2px 0 12px;
    padding-left: 1.25em;
    font-size: 0.93rem;
}
.principles .principle-guide li {
    display: list-item;
    padding: 0;
    background: none;
    margin-bottom: 8px;
    color: var(--muted);
}
.principles .principle-guide li::marker { font-weight: 800; color: var(--ink); }
.principles .principle-note {
    margin: 0 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--volt);
    font-size: 0.88rem;
}

@media (max-width: 900px) {
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .principles { grid-template-columns: 1fr; }
}

.reality-check {
    margin: 20px 0 0;
    padding: 14px 18px;
    border-left: 4px solid var(--warn);
    background-color: var(--surface);
    border-radius: 0 6px 6px 0;
    color: var(--muted);
    font-size: 0.95rem;
}
.reality-check strong { color: var(--ink); }

/* ---------- Your level (Programs, Exercises, how-to) ---------- */
.level-wrap { margin-bottom: 18px; }
.level-bar legend { font-weight: 800; }
.level-info { margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); max-width: 60ch; }
.level-unlock { flex-basis: 100%; margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); }
.level-unlock .text-button { margin-left: 6px; }
.segmented label[hidden] { display: none !important; }
#days-picker label.is-off { display: none; }
.plan-simple { margin-top: 10px !important; font-size: 0.95rem; }
.howto-level { margin: 12px 0 0; }
.level-bar.is-compact legend { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.level-bar.is-compact label span { padding: 6px 10px; font-size: 0.8rem; }
.howto-cues li, .howto-program li { margin-bottom: 6px; }
.howto-more { margin-top: 16px; font-size: 0.88rem; color: var(--muted); }

/* ---------- Programs: main goals, "More plans", level tags ---------- */
.goal-picker .goal-more { display: none; flex-basis: 100%; flex-wrap: wrap; gap: inherit; margin-top: 4px; }
.goal-picker.show-more .goal-more { display: flex; }
.goal-more-head { flex-basis: 100%; margin: 6px 0 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.goal-picker small { margin-left: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.goal-more-toggle {
    font: inherit; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 10px 14px; border: 1px dashed var(--line); background: transparent; color: var(--ink); cursor: pointer;
}
.goal-more-toggle:hover { border-color: var(--ink); }
.level-tag {
    display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px;
    font-family: var(--sans); font-size: 0.68rem; font-weight: 800; font-stretch: 100%; letter-spacing: 0.1em; text-transform: uppercase;
    border: 1px solid var(--ink); color: var(--ink);
}
.level-tag.level-advanced, .level-tag.level-expert { background-color: var(--ink); color: var(--paper); }
.level-tag.level-expert { box-shadow: inset 0 -3px 0 var(--volt); }
.level-tag:empty { display: none; }

/* ---------- Muscle map (Exercises page) ---------- */
.muscle-map {
    --mm-skin: #ece8df;
    --mm-line: #b9b1a2;
    --mm-muscle: #d8d1c3;
    --mm-hot: #d7263d;
    --mm-warm: #efb1b8;
    --mm-hair: #2a2724;
    border-bottom: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .muscle-map { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; }
}
:root[data-theme="dark"] .muscle-map { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; }
.mm-head { max-width: 640px; margin-bottom: 24px; }
.muscle-map-below { border-bottom: 0; border-top: 1px solid var(--line); }
.mm-teaser { margin: 0 0 18px; }
.mm-parts-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.mm-parts-wrap > summary { cursor: pointer; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0; }
.mm-parts-wrap[open] > summary { margin-bottom: 8px; }
.me-unlock { margin: 24px 0 0; padding: 14px 16px; border: 1px dashed var(--line); color: var(--muted); }
.mm-head h2 {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 800;
    font-stretch: 75%;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 4px 0 10px;
}
.mm-head p { margin: 0; color: var(--muted); }
.mm-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
.mm-viewer { border: 1px solid var(--line); background-color: var(--surface); padding: 16px; }
.mm-controls { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.mm-view, .mm-turn {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 12px;
    border: 1px solid var(--line);
    background-color: transparent;
    color: var(--ink);
    cursor: pointer;
}
.mm-turn { font-size: 1.05rem; padding: 5px 12px; line-height: 1; }
.mm-view[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); border-color: var(--ink); }
.mm-view:hover, .mm-turn:hover { border-color: var(--ink); }
.mm-stage {
    position: relative;
    height: min(520px, 110vw);
    margin-top: 12px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.mm-stage.is-dragging { cursor: grabbing; }
.mm-stage { perspective: 1400px; }
.mm-turntable {
    position: absolute;
    inset: 0 0 18px;
    transform-style: preserve-3d;
    will-change: transform;
}
.mm-face {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.mm-face-back { transform: rotateY(180deg); }
.mm-turntable.is-rest { transform: none; transform-style: flat; }
.mm-turntable.is-rest .mm-face { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.mm-turntable.is-rest .mm-face:not(.is-active) { visibility: hidden; }
.mm-face.is-active { pointer-events: auto; }
.mm-sex { display: flex; justify-content: center; gap: 0; margin-top: 10px; }
.mm-sex-btn {
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid var(--line);
    background-color: transparent;
    color: var(--muted);
    cursor: pointer;
}
.mm-sex-btn + .mm-sex-btn { border-left: 0; }
.mm-sex-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--volt); }
.mm-svg { height: 100%; width: auto; max-width: 100%; overflow: visible; }
.mm-body, .mm-body path { fill: var(--mm-skin); stroke: var(--mm-line); stroke-width: 2.5; stroke-linejoin: round; }
.mm-hair { fill: var(--mm-hair); }
.mm-muscle path {
    fill: var(--mm-muscle);
    stroke: var(--mm-line);
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill 0.15s ease;
    cursor: pointer;
}
.mm-svg path.is-group { fill: var(--mm-warm); stroke: #b4485a; }
.mm-muscle:hover path,
.mm-svg path.is-on { fill: var(--mm-hot); stroke: #7a1020; stroke-width: 3; }
.mm-muscle:focus { outline: none; }
.mm-muscle:focus-visible path { fill: var(--mm-hot); stroke: var(--ink); stroke-width: 6; }
.mm-floor {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 46%;
    height: 22px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--base-rgb) / 0.18), transparent);
}
.mm-hint { text-align: center; margin: 8px 0 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mm-credit { text-align: center; margin: 4px 0 0; font-size: 0.7rem; color: var(--muted); }
.mm-credit a { color: inherit; }
.mm-panel { border-top: 2px solid var(--ink); padding-top: 16px; min-height: 220px; }
.mm-panel:focus { outline: none; }
.mm-panel:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }
.mm-eyebrow { margin: 0 0 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mm-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 800;
    font-stretch: 80%;
    text-transform: uppercase;
    line-height: 1;
}
.mm-dot { width: 14px; height: 14px; flex: none; background-color: var(--mm-hot); }
.mm-panel h4 { margin: 18px 0 8px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.mm-panel p { margin: 0 0 8px; }
.mm-aka { color: var(--muted); font-size: 0.9rem; }
.mm-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mm-part { border: 1px solid var(--line); padding: 12px 14px; background-color: var(--surface); }
.mm-part.is-on { border-color: var(--mm-hot); box-shadow: inset 4px 0 0 var(--mm-hot); }
.mm-part p { margin: 4px 0 6px; font-size: 0.92rem; }
.mm-part-name {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
    font: inherit; font-weight: 800; font-size: 1rem; text-align: left;
    padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
}
.mm-part-name small { font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.mm-part-name:hover, .mm-part-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mm-part-mark { width: 10px; height: 10px; border: 2px solid var(--mm-hot); align-self: center; }
.mm-part.is-on .mm-part-mark { background-color: var(--mm-hot); }
.mm-best { font-size: 0.72rem !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 8px !important; }
.mm-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mm-picks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.mm-picks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mm-pick-group { width: 92px; flex: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mm-picks .chip[aria-pressed="true"] { background-color: var(--mm-hot); border-color: var(--mm-hot); color: #ffffff; }
@media (max-width: 420px) {
    .mm-controls { gap: 4px; }
    .mm-view { padding: 9px 9px; letter-spacing: 0.06em; }
    .mm-turn { padding: 5px 9px; }
    .mm-viewer { padding: 12px 8px; }
}
@media (max-width: 860px) {
    .mm-grid { grid-template-columns: 1fr; gap: 24px; }
    .mm-viewer { max-width: 460px; width: 100%; margin: 0 auto; }
    .mm-pick-group { width: 100%; }
}

/* ---------- Supplements guide ---------- */
.supp-first { max-width: 760px; }
.supp-first h2, .supp-h2 {
    font-family: var(--display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 14px;
}
.supp-h2 { margin-top: 56px; }
.supp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--line);
    border: 1px solid var(--line);
}
.supp-card { background-color: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.supp-card h3 { margin: 0; font-size: 1.3rem; }
.supp-card p { margin: 0; }
.supp-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--ink);
}
.supp-how { font-size: 0.95rem; }
.supp-src, .supp-note { color: var(--muted); font-size: 0.88rem; }
.skip-list { margin: 0; padding-left: 1.2rem; max-width: 800px; }
.skip-list li { margin-bottom: 10px; }
.safe-grid, .store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.safe-grid h3, .store h3 { margin: 0 0 8px; font-size: 1.15rem; }
.safe-grid p { margin: 0; }
.store { border: 1px solid var(--line); background-color: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 900px) {
    .supp-grid, .safe-grid, .store-grid { grid-template-columns: 1fr; }
}

.pro-links { margin-top: 56px; }
.pro-links h3 {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}
.pro-links-lede { margin: 4px 0 20px; color: var(--muted); }

.pro-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.pro-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 20px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.pro-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.pro-mono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
}
.pro-card h4 { margin: 0; font-size: 1.15rem; }
.pro-title { margin: 2px 0 8px; font-size: 0.88rem; font-weight: 700; color: var(--accent); }
.pro-card p { margin: 0 0 10px; font-size: 0.93rem; color: var(--muted); }
.pro-card .pro-title { color: var(--accent); }
.pro-link { font-weight: 700; font-size: 0.92rem; text-underline-offset: 3px; }

@media (max-width: 400px) {
    .pro-cards { grid-template-columns: 1fr; }
}

.pro-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 40px;
    padding: 28px;
    border-radius: 8px;
    background-color: var(--base);
    color: #ffffff;
}
.pro-cta h3 {
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.pro-cta p { margin: 0; color: #cfd3d8; max-width: 60ch; }

/* ---------- Start page: first day, warm-up, glossary ---------- */
.first-day { background-color: var(--surface); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 4px 32px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}
.timeline li:first-child { border-top: 2px solid var(--ink); }
.timeline-when {
    grid-row: 1 / span 4;
    font-size: 0.75rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    padding-top: 4px;
}
.timeline h3 {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 900;
    font-stretch: 80%;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.timeline p { margin: 0; color: var(--muted); max-width: 70ch; }
.timeline p + p { margin-top: 8px; }
@media (max-width: 700px) {
    .timeline li { grid-template-columns: 1fr; }
    .timeline-when { grid-row: auto; }
}

.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 18px; margin: 6px 0 8px; }
.checklist label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.checklist input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }
.checklist input:checked + * , .checklist label:has(input:checked) { color: var(--muted); text-decoration: line-through; }

.warmup { margin: 0; padding-left: 1.4rem; }
.warmup li { padding: 8px 0; }
.warmup li::marker { font-weight: 900; color: var(--accent); }
.inline-howto {
    font: inherit;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: var(--volt);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.glossary {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    border-top: 2px solid var(--ink);
}
.glossary div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.glossary dt {
    font-weight: 800;
    font-stretch: 110%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}
.glossary dd { margin: 2px 0 0; color: var(--muted); }
@media (max-width: 700px) { .glossary { grid-template-columns: 1fr; } }

.warmup-note { margin: 0 0 18px; font-size: 0.92rem; color: var(--muted); }
.warmup-note a { color: var(--ink); font-weight: 700; text-decoration-color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Exercise library ---------- */
.library-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin-bottom: 14px; }
.library-search { flex: 1 1 260px; }
.library-search label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.library-search input { width: 100%; padding: 12px 14px; font-size: 1rem; }
.library-count { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; }
.library-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background-color: var(--line);
    border: 1px solid var(--line);
}
.library-card { display: flex; flex-direction: column; padding: 20px; background-color: var(--surface); }
.library-tag {
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.library-card h3 { font-size: 1.1rem; margin: 0 0 4px; }
.library-muscles { margin: 0; font-weight: 600; font-size: 0.88rem; }
.library-eq { margin: 2px 0 10px; color: var(--muted); font-size: 0.85rem; }
.library-tip { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; }
.library-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- My progress page ---------- */
.me-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.me-link:hover, .me-link.active { border-color: var(--volt); }
.me-dot { width: 9px; height: 9px; border-radius: 50%; background-color: var(--volt); }
.build-link { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.build-link:hover, .build-link:focus-visible { background-color: #ffffff; border-color: #ffffff; color: var(--on-volt); }
.build-plus { font-size: 1rem; line-height: 1; font-weight: 900; }
@media (max-width: 1180px) { .build-link { display: none; } }
@media (max-width: 460px) { .me-link { font-size: 0; gap: 0; padding: 9px 11px; } .me-dot { width: 12px; height: 12px; } }

.account-card { margin-bottom: 28px; }
.account-box { border: 1px solid var(--line); background-color: var(--surface); padding: 20px 22px; }
.account-box p { margin: 0 0 10px; }
.account-box .me-h2 { margin-top: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0; }
.account-form { max-width: 420px; margin-top: 8px; }
.train-for { margin-bottom: 8px; }
.train-for-advice { margin: 0 0 32px; color: var(--muted); max-width: 70ch; }
.me-h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.me-h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 28px 0 10px; }
.me-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background-color: var(--line); border: 1px solid var(--line); }
.me-stats > div { background-color: var(--surface); padding: 18px; }
.me-stats span { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.me-stats strong { font-family: var(--display); font-size: 2.4rem; font-weight: 900; font-stretch: 75%; line-height: 1.1; }
.me-stats small { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.me-stats a { font-family: var(--sans); font-size: 1rem; color: var(--ink); }
.mini-bar { height: 6px; margin-top: 8px; background-color: var(--line); }
.mini-bar div { height: 100%; background-color: var(--volt); }
@media (max-width: 760px) { .me-stats { grid-template-columns: 1fr 1fr; } }
.me-h2-gap { margin-top: 44px; }
.milestone-count { margin: -4px 0 14px; color: var(--muted); font-weight: 600; }
.milestone-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.milestone-grid li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 12px; border: 1px dashed var(--line); background-color: var(--surface); color: var(--muted); }
.milestone-grid li strong { color: var(--ink); font-size: 0.92rem; }
.milestone-grid li small { grid-column: 2; font-size: 0.78rem; }
.milestone-mark { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--line); font-weight: 900; }
.milestone-grid li.is-done { border: 1px solid var(--ink); }
.milestone-grid li.is-done .milestone-mark { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }

/* Celebration pop-up */
.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: min(380px, calc(100% - 40px));
    padding: 16px 44px 16px 18px;
    background-color: var(--base);
    color: #ffffff;
    border-left: 5px solid var(--volt);
    box-shadow: 0 18px 40px rgb(var(--base-rgb) / 0.35);
}
.toast strong { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 900; font-stretch: 80%; text-transform: uppercase; color: var(--volt); }
.toast span { display: block; margin-top: 2px; font-size: 0.92rem; }
.toast-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; font-size: 1.3rem; color: #ffffff; background: none; border: 0; cursor: pointer; }
.toast.pop { animation: toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
.rest-timer:not([hidden]) ~ .toast { bottom: 110px; }

.table-scroll { position: relative; overflow-x: auto; }
.lift-table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; background-color: var(--surface); border: 1px solid var(--line); }
.lift-table th, .lift-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: top; }
.lift-table thead th { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.lift-table tbody th { font-weight: 700; }
.lift-table small { display: block; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.lift-table td { white-space: nowrap; }
.lift-table .is-next { font-weight: 700; color: var(--accent); }
.lift-table tr.is-selected { box-shadow: inset 4px 0 0 var(--volt); }
.lift-table .empty-row td { text-align: left; color: var(--muted); }
.me-chart-panel { margin-top: 18px; }
.me-chart-panel h3, #cardio .panel h3 { margin: 0 0 12px; }
#lift-chart, #cardio-chart { display: block; width: 100%; height: auto; }
.chart-goal { stroke: var(--good); stroke-dasharray: 4 4; }
.bar-done { fill: var(--ink); }
.bar-proj { fill: none; stroke: var(--volt); stroke-width: 2; stroke-dasharray: 4 3; }
.quick-cardio { border: 0; padding: 0; background: none; margin: 0 0 12px; }

/* ---------- FAQ ---------- */
.faq details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 16px; color: var(--muted); max-width: 62ch; }

/* ---------- Contact form ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field.invalid input, .field.invalid textarea { border-color: var(--bad); }
.field.valid input, .field.valid textarea { border-color: var(--good); }

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}
.field-row.three { grid-template-columns: 0.7fr 1.3fr 1fr; }
@media (max-width: 600px) {
    .field-row, .field-row.three { grid-template-columns: 1fr; }
}

.field-foot { display: flex; justify-content: space-between; gap: 12px; }

.error { color: var(--bad); font-size: 0.85rem; margin: 4px 0 0; min-height: 1.2em; }
.counter { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.counter.near { color: var(--warn); font-weight: 700; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.draft-note { margin: 0; font-size: 0.82rem; color: var(--muted); }

.form-notice { margin: 0 0 24px; padding: 14px 16px; border-left: 4px solid var(--volt); background-color: var(--surface); }
.form-status { margin: 14px 0 0; font-weight: 600; color: var(--good); }
.form-status.is-error { color: var(--bad); }

#send-btn { display: inline-flex; align-items: center; gap: 10px; }
#send-btn[disabled] { opacity: 0.75; cursor: progress; }
.spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
#send-btn[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.sent {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--good);
    border-radius: 6px;
}
.sent:focus { outline: none; }
.sent h3 { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; margin: 0 0 0.35rem; }
.sent p { margin: 0 0 1rem; color: var(--muted); }

.sent-check { flex: none; width: 52px; height: 52px; }
.sent-check circle,
.sent-check path {
    fill: none;
    stroke: var(--good);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.sent:not([hidden]) .sent-check circle { animation: draw 0.6s ease-out forwards; }
.sent:not([hidden]) .sent-check path { animation: draw 0.4s ease-out 0.5s forwards; }

/* ---------- Where to next? ---------- */
.next-steps { background-color: var(--ink); color: var(--paper); padding: 56px 0 60px; }
.next-steps h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 20px; color: var(--paper); }
.next-steps ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.next-steps a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
    color: var(--paper);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.next-steps a:hover { border-color: var(--volt); background-color: color-mix(in srgb, var(--paper) 6%, transparent); }
.next-steps strong { font-size: 1.05rem; }
.next-steps strong::after { content: "\00a0\2192"; color: var(--volt); }
.next-steps span { font-size: 0.88rem; opacity: 0.75; }

/* ---------- Footer ---------- */
.site-footer { background-color: var(--base); color: #cfcfcf; }
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 48px;
}
.footer-brand p { margin: 10px 0 0; color: #9a9a9a; max-width: 30ch; }
.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px 40px;
    align-content: start;
}
.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    font-stretch: 112%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.footer-nav a:hover { color: var(--volt); }
.footer-fine {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px 36px;
    border-top: 1px solid #222222;
    font-size: 0.82rem;
    color: #8f8f8f;
}
.footer-fine p { margin: 0 0 6px; }
.footer-fine a { color: #cfcfcf; }
@media (max-width: 600px) { .footer-nav { grid-template-columns: repeat(2, auto); } }

/* ---------- Arrival highlight ---------- */
[tabindex="-1"]:focus { outline: none; }

.flash { animation: flash 1.8s ease-out; }
@keyframes flash {
    0%, 35% { box-shadow: 0 0 0 3px var(--volt); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* ---------- Jump-to dialog ---------- */
.jump {
    width: min(560px, calc(100% - 32px));
    margin: 12vh auto auto;
    padding: 0;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--volt);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 24px 60px rgb(var(--base-rgb) / 0.35);
}
.jump::backdrop { background-color: rgba(8, 10, 14, 0.6); }
.jump[open] { animation: jump-in 0.16s ease-out; }
@keyframes jump-in { from { opacity: 0; transform: translateY(-8px); } }

.jump input {
    width: 100%;
    font-size: 1.1rem;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.jump input:focus-visible { outline: none; }

#jump-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 50vh;
    overflow-y: auto;
}
#jump-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
#jump-list li[aria-selected="true"] {
    background-color: var(--paper);
    box-shadow: inset 3px 0 0 var(--volt);
}
.jump-group { font-size: 0.82rem; font-weight: 400; color: var(--muted); }
#jump-list .jump-empty { cursor: default; color: var(--muted); font-weight: 400; }
.jump-hint {
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--muted);
}

.progress-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Printing ----------
   "Print this week" on the Programs page gives a clean black-and-white
   sheet: the plan header and the day cards, nothing else. */
@media print {
    :root, :root[data-theme="dark"] { --paper: #ffffff; --surface: #ffffff; --ink: #000000; --muted: #333333; --line: #bbbbbb; --accent: #000000; }
    body { font-size: 11pt; background: #ffffff; }
    .site-header, .site-footer, .next-steps, .page-banner, .controls, .profile-panel, .why-rotate,
    .warmup-note, .week-progress, .ex-actions, .log-form, .ex-target, .my-progress, .rest-timer,
    .skip-link, .ticker, #jump, #howto { display: none !important; }
    body { font-size: 9.5pt; line-height: 1.35; }
    .block { padding: 0; }
    .container.wide { max-width: none; padding: 0; }
    .program-head { display: block; margin-bottom: 6pt; }
    .program-head h3 { font-size: 16pt; margin: 0; }
    .program-head p, .program-meta, .week-variety, .day-status, .ex-badges, .ex-swap { display: none !important; }
    .week-bar { display: block; background: #ffffff; color: #000000; border: 0; padding: 0; margin: 0 0 8pt; }
    .week-light-btn { display: none !important; }
    .week-info strong { font-size: 11pt; }
    .week-step, #week-today { display: none !important; }
    .day-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; }
    .day-card { break-inside: avoid; border: 1px solid #000000; padding: 8pt; box-shadow: none !important; }
    .day-card h4 { font-size: 12pt; }
    .ex-list li { padding: 4pt 0; grid-template-columns: 12pt 1fr; gap: 6pt; }
    .ex-list li > input[type="checkbox"] { width: 10pt; height: 10pt; }
    .ex-main::after { content: "Sets:  ______   ______   ______   ______"; margin-top: 3pt; color: #555555; font-size: 8.5pt; letter-spacing: 0.02em; }
    .rest-btn { color: #000000; text-decoration: none; }
    .rest-btn span[aria-hidden] { display: none; }
    .badge { border-color: #000000; color: #000000; background: none; }
    a { color: #000000; }
}

/* ---------- Calm page changes ---------- */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
main, .page-banner, .hero { animation: page-in 0.45s ease-out both; }
.is-leaving main, .is-leaving .page-banner, .is-leaving .hero, .is-leaving .next-steps, .is-leaving .site-footer {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    height: 3px;
    width: 0;
    background-color: var(--volt);
    pointer-events: none;
}
.is-leaving .page-progress { width: 85%; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* "You are here" trail */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 0.82rem; color: #cfcfcf; }
.breadcrumbs a { color: #ffffff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.breadcrumbs a:hover { border-bottom-color: var(--volt); }
.breadcrumbs [aria-current] { color: #ffffff; font-weight: 700; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-steps .steps-line { animation: none; stroke-dashoffset: 0; }
    .ticker-track { animation: none; }
    main, .page-banner, .hero { animation: none; }
    .is-leaving main, .is-leaving .page-banner, .is-leaving .hero { opacity: 1; transform: none; }
    .pro-card, .pro-card:hover { transition: none; transform: none; }
    .progress-fill { transition: none; }
    .submenu, .submenu-toggle::before { transition: none !important; }
    .flash, .jump[open], .spinner, .ex-target.just-saved, .toast.pop { animation: none; }
    .sent-check circle, .sent-check path { animation: none !important; stroke-dashoffset: 0; }
}
/* ---------- Sharp corners everywhere (brand style) ----------
   Older components were built with rounded corners; this keeps them in line. */
.controls, .day-card, .panel, .path, .principles, .pro-card, .reality-check, .sent,
.tool-results, .pro-cta, .segmented span, .segmented label:first-of-type span,
.segmented label:last-of-type span, select, input, textarea, .jump, #jump-list li {
    border-radius: 0;
}
.howto-levels:has(> div:only-child) { grid-template-columns: 1fr; }

/* ---------- Phones: app-style tab bar, comfy tap targets, notch-safe ---------- */
:root { --tabbar-h: 0px; }
.tabbar { display: none; }
@media (max-width: 760px) {
    :root { --tabbar-h: calc(60px + env(safe-area-inset-bottom)); }
    html { -webkit-text-size-adjust: 100%; }
    body.has-tabbar { padding-bottom: var(--tabbar-h); }
    a, button, label, summary, select, input { touch-action: manipulation; -webkit-tap-highlight-color: rgb(var(--volt-rgb) / 0.2); }
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
        display: grid; grid-template-columns: repeat(5, 1fr);
        height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
        background-color: var(--base); border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .tabbar a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 44px; color: #a6a6a6; text-decoration: none;
        font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .tabbar svg { width: 22px; height: 22px; fill: currentColor; }
    .tabbar a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 2px 0 var(--volt); }
    .tabbar a:focus-visible { outline: 2px solid var(--volt); outline-offset: -4px; }
    /* things that sit at the bottom of the screen move up above the tab bar */
    .rest-timer { bottom: var(--tabbar-h); }
    .toast { bottom: calc(var(--tabbar-h) + 12px); right: 12px; width: calc(100% - 24px); }
    /* fingers need room: about 44px for anything you tap */
    .chip, .btn-small, .btn-compact, .rest-btn, .text-button, .mm-view, .mm-turn, .mm-sex-btn, .goal-more-toggle,
    .menu-toggle, .theme-toggle, .me-link, .brand, .howto-close, .week-step, .mm-part-name {
        min-height: 44px; display: inline-flex; align-items: center;
    }
    .theme-toggle, .howto-close, .week-step, .mm-turn { min-width: 44px; justify-content: center; }
    .has-tabbar .me-link { display: none; } /* the tab bar's Progress and Build tabs replace these */
    .segmented label span { min-height: 44px; display: inline-flex; align-items: center; }
    .text-link { display: inline-block; padding: 10px 0; }
    .library-card .btn { min-height: 44px; }
    /* 16px text in form fields stops iPhones from zooming in when you tap them */
    input, select, textarea { font-size: 16px !important; min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { min-height: 0; }
}
/* Installed app: clear the notch and status bar */
.is-app .site-header { padding-top: env(safe-area-inset-top); }
.install-tip {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px); z-index: 80;
    padding: 14px 16px; background-color: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-left: 4px solid var(--volt); box-shadow: 0 12px 30px rgb(var(--base-rgb) / 0.25);
}
.install-tip p { margin: 0 0 8px; font-size: 0.92rem; }
.install-actions { display: flex; gap: 12px; align-items: center; }
.share-glyph { display: inline-block; padding: 0 4px; border: 1px solid currentColor; font-size: 0.8rem; }
@media print { .tabbar, .install-tip { display: none !important; } }

/* ---------- Coach (chat helper) ---------- */
.coach-fab {
    position: fixed; right: 20px; bottom: calc(var(--tabbar-h) + 20px); z-index: 75;
    display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 18px 8px 10px;
    border: 2px solid var(--volt); border-radius: 999px; background-color: var(--base); color: #ffffff; cursor: pointer;
    font: inherit; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 10px 28px rgb(var(--base-rgb) / 0.3);
}
.coach-fab svg { width: 32px; height: 32px; color: #ffffff; }
.coach-fab:hover { background-color: var(--base-2); }
.coach-fab:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.coach-open .coach-fab { display: none; }
.coach {
    position: fixed; right: 20px; bottom: calc(var(--tabbar-h) + 20px); z-index: 95;
    display: flex; flex-direction: column; width: min(400px, calc(100vw - 40px)); height: min(620px, calc(100vh - var(--tabbar-h) - 100px));
    background-color: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--volt);
    box-shadow: 0 24px 60px rgb(var(--base-rgb) / 0.35);
}
.coach[hidden] { display: none; }
.coach-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background-color: var(--base); color: #ffffff; }
.coach-head h2 { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 900; font-stretch: 80%; text-transform: uppercase; line-height: 1; }
.coach-head p { margin: 2px 0 0; font-size: 0.8rem; color: #bdbdbd; }
.coach-avatar svg { width: 36px; height: 36px; color: #ffffff; display: block; }
.coach-clear { margin-left: auto; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: #bdbdbd; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.coach-clear:hover, .coach-clear:focus-visible { color: #ffffff; text-decoration: underline; }
.coach-close { min-width: 44px; min-height: 44px; border: 1px solid #333; background: transparent; color: #ffffff; font-size: 1.5rem; cursor: pointer; }
.coach-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.coach-msg { max-width: 92%; padding: 10px 12px; font-size: 0.94rem; line-height: 1.45; }
.coach-msg p { margin: 0 0 6px; }
.coach-msg p:last-child { margin-bottom: 0; }
.coach-msg.is-coach { align-self: flex-start; background-color: var(--paper); border-left: 3px solid var(--volt); }
.coach-msg.is-you { align-self: flex-end; background-color: var(--ink); color: var(--paper); }
.coach-fine { font-size: 0.8rem; color: var(--muted); }
.coach-step { font-size: 0.85rem; color: var(--muted); vertical-align: middle; }
.coach-ai ul, .coach-ai ol { margin: 4px 0 8px; padding-left: 1.2rem; }
.coach-ai li { margin-bottom: 4px; }
.coach-ai .coach-h { margin-top: 10px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.coach-ai .coach-h:first-child { margin-top: 0; }
.coach-ai a { color: var(--ink); text-decoration-color: var(--volt); text-underline-offset: 2px; }
.coach-heard { font-size: 0.8rem; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.coach-heard span { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.coach-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.coach-dots i { width: 7px; height: 7px; border-radius: 50%; background-color: var(--muted); animation: coach-dot 1s infinite ease-in-out; }
.coach-dots i:nth-child(2) { animation-delay: 0.15s; }
.coach-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes coach-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .coach-dots i { animation: none; opacity: 0.7; } }
.coach-workout { margin: 6px 0 8px; padding-left: 1.3rem; }
.coach-workout li { margin-bottom: 6px; }
.coach-workout span { display: block; font-size: 0.85rem; color: var(--muted); }
.coach-ex { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 800; text-align: left; text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 3px; cursor: pointer; }
.coach-steps { margin: 4px 0 6px; padding-left: 1.2rem; }
.coach-actions { margin: 8px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.coach-chips { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none; }
.coach-chips .chip { flex: none; white-space: nowrap; }
.coach-form { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.coach-form input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; border: 1px solid var(--line); background-color: var(--paper); color: var(--ink); }
.coach-form input:focus-visible { outline: 2px solid var(--volt); outline-offset: 0; }
@media (max-width: 760px) {
    .coach-fab { right: 12px; bottom: calc(var(--tabbar-h) + 12px); padding: 8px; min-width: 52px; justify-content: center; }
    .coach-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .coach { left: 0; right: 0; top: 0; bottom: var(--tabbar-h); width: auto; height: auto; border: 0; border-top: 0; }
    .coach-head { padding-top: calc(12px + env(safe-area-inset-top)); }
    .install-tip { right: 76px; }
}
@media print { .coach-fab, .coach { display: none !important; } }
body:has(#rest-timer:not([hidden])) .coach-fab { display: none; }


/* ---------- Your starting point (home page and My progress) ---------- */
.setup-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.setup-intro h2 { margin-top: 0; }
.setup-form { padding: 24px; border: 1px solid var(--line); border-top: 4px solid var(--volt); background-color: var(--surface); }
.setup-level { margin-bottom: 8px; }
.setup-level legend { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.setup-level span { min-height: 44px; display: flex !important; align-items: center; }
.setup-level-info { margin: 0 0 18px; font-size: 0.88rem; color: var(--muted); }
.setup-form .field-row { grid-template-columns: 1fr 1fr 1fr; }
.setup-form input, .setup-form select { font-size: 16px; }
.setup-preview { margin: 4px 0 12px; }
.setup-preview p { margin: 0 0 8px; }
.setup-preview-title { font-weight: 700; }
.setup-preview-title span { font-weight: 400; color: var(--muted); }
.setup-weights { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.setup-weights li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background-color: var(--paper); border-left: 3px solid var(--volt); }
.setup-weights span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.setup-weights strong { font-family: var(--display); font-size: 1.35rem; font-weight: 900; font-stretch: 80%; }
@media (max-width: 900px) {
    .setup-card { grid-template-columns: 1fr; gap: 16px; }
    .setup-weights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .setup-form { padding: 16px; }
    .setup-form .field-row { grid-template-columns: 1fr 1fr; }
    .setup-form .field-row .field:last-child { grid-column: 1 / -1; }
    .setup-level label { flex: 1 1 auto; }
    .setup-level span { justify-content: center; padding: 8px 6px; font-size: 0.82rem; }
}

/* The level picker on the dark home cover */
.hero-level { margin: 1.4rem 0 0; }
.hero-level .level-bar legend { color: #ffffff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-level .segmented span { min-height: 44px; display: flex; align-items: center; background-color: rgb(var(--base-rgb) / 0.5); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; }
.hero-level .segmented input:checked + span { background-color: #ffffff; border-color: #ffffff; color: var(--on-volt); }
.hero-setup-link { display: inline-block; margin-top: 10px; min-height: 44px; line-height: 44px; color: #ffffff; font-size: 0.86rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 3px; }
.hero-setup-link::after { content: " \2193"; color: var(--volt); }
@media (max-width: 760px) {
    .hero-level .segmented label { flex: 1 1 auto; }
    .hero-level .segmented span { justify-content: center; padding: 6px 6px; font-size: 0.78rem; }
    .hero-setup-link { margin-top: 2px; }
}


/* ---------- Equipment icons (next to every exercise) ----------
   Drawn as masks so they take the text color and work in light and dark mode. */
.equip { display: inline-flex; align-items: center; gap: 6px; vertical-align: -3px; margin-right: 8px; color: var(--ink); }
.equip::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.equip.has-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 0; }
.equip.has-label::before { background-color: var(--ink); }
.equip-barbell { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22square%22%3E%3Cpath d=%22M1 12h22%22/%3E%3Crect x=%224%22 y=%226%22 width=%223%22 height=%2212%22 fill=%22%23000%22/%3E%3Crect x=%2217%22 y=%226%22 width=%223%22 height=%2212%22 fill=%22%23000%22/%3E%3Cpath d=%22M8.5 9v6M15.5 9v6%22/%3E%3C/svg%3E"); }
.equip-db { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22%3E%3Cpath d=%22M8 12h8%22/%3E%3Crect x=%223%22 y=%228%22 width=%225%22 height=%228%22 rx=%221%22 fill=%22%23000%22/%3E%3Crect x=%2216%22 y=%228%22 width=%225%22 height=%228%22 rx=%221%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.equip-body { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%224.5%22 r=%222.2%22 fill=%22%23000%22/%3E%3Cpath d=%22M12 8v7M6 10.5l6-1.5 6 1.5M12 15l-4 6M12 15l4 6%22/%3E%3C/svg%3E"); }
.equip-machine { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22%3E%3Cpath d=%22M4 22V2h16v20%22/%3E%3Cpath d=%22M9 6h6M9 9h6M9 12h6%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M12 12v6%22/%3E%3Cpath d=%22M8 18h8%22/%3E%3C/svg%3E"); }
.equip-cable { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%223%22/%3E%3Cpath d=%22M12 8v9%22/%3E%3Cpath d=%22M8 17h8l-1 4H9z%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.equip-cardio { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M12 20s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 9c0 6-8 11-8 11z%22/%3E%3Cpath d=%22M3 12h4l2-3 3 6 2-3h7%22/%3E%3C/svg%3E"); }
.coach-workout li .equip { margin-right: 6px; }
.library-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* At home: nothing or dumbbells */
.home-kit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--volt); background-color: var(--surface); }
.home-kit p { margin: 0; font-weight: 700; }
.home-kit .segmented label > span { min-height: 44px; display: flex; align-items: center; }
.home-kit .segmented input:checked + span .equip { color: var(--paper); }
.home-kit-note { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); font-weight: 400 !important; }

/* Icons inside segmented buttons: just the icon, no button styling of their own */
.segmented span.equip { display: inline-flex; padding: 0; border: 0; background: none; margin: 0 6px 0 0; min-height: 0; vertical-align: -3px; color: inherit; }
.segmented input:checked + span .equip { color: var(--paper); }
.library-equip label > span { display: inline-flex; align-items: center; }

/* ---------- Exercise library pictures ----------
   A dark panel at the top of each card with the body zoomed in on the muscles worked:
   the main ones in the orange accent, helpers in a lighter orange. Same in light and dark mode. */
.lib-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.library-card { padding: 0; overflow: hidden; }
.library-card > :not(.library-pic) { margin-left: 20px; margin-right: 20px; }
.library-card > .btn { margin-bottom: 20px; }
.library-pic {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0 0 14px;
    background: radial-gradient(120% 90% at 50% 40%, #232323 0%, #0c0c0c 70%);
    overflow: hidden;
}
.library-pic svg { display: block; width: 100%; height: 100%; transition: transform 0.4s ease; }
.library-card:hover .library-pic svg { transform: scale(1.04); }
.lib-outline path { fill: #1d1d1d; stroke: #4a4a4a; stroke-width: 3; }
.lib-rest path { fill: #2e2e2e; stroke: #141414; stroke-width: 2; }
.lib-main { fill: var(--volt); stroke: #0c0c0c; stroke-width: 2; }
.lib-extra { fill: #ff9a6b; fill-opacity: 0.55; stroke: #0c0c0c; stroke-width: 2; }
.library-pic-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 8px;
    background-color: var(--base);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-left: 3px solid var(--volt);
}
.library-pic-icon { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; color: #5a5a5a; }
.library-pic-icon::before { width: 64px; height: 64px; }
.library-pic.is-cardio::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    background-color: var(--volt);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.library-pic.is-cardio { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M12 20s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 9c0 6-8 11-8 11z%22/%3E%3Cpath d=%22M3 12h4l2-3 3 6 2-3h7%22/%3E%3C/svg%3E"); }
.library-card .library-tags { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .library-pic svg { transition: none; } .library-card:hover .library-pic svg { transform: none; } }
@media (max-width: 600px) { .library-pic { aspect-ratio: 16 / 9; } }

/* ---------- Build your own workout (Plans page) ---------- */
.builder-block { padding-bottom: 0; }
.builder { border: 1px solid var(--line); border-top: 4px solid var(--volt); background-color: var(--surface); }
.builder-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding: 24px; }
.builder-intro h2 { margin: 0 0 6px; }
.builder-intro .section-lede { margin: 0; max-width: 62ch; }
.builder-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-top: 1px solid var(--line); }
.builder-body[hidden] { display: none; }
.builder-pick, .builder-plan { padding: 24px; min-width: 0; }
.builder-pick { border-right: 1px solid var(--line); }
.builder-pick h3, .builder-plan h3 { margin: 0 0 14px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.builder-pick input, .builder-pick select, .builder-plan input, .builder-plan select { font-size: 16px; }
.builder-muscles { margin-bottom: 12px; }
.builder-count { margin: 0 0 8px; font-size: 0.85rem; color: var(--muted); }
.builder-results { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; border: 1px solid var(--line); }
.builder-results li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.builder-results li:last-child { border-bottom: 0; }
.builder-results .equip { margin-right: 0; }
.br-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-name small { color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-results .btn { flex: none; min-height: 40px; }
.builder-empty { color: var(--muted); }
.builder-list { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: bi; }
.builder-item { counter-increment: bi; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); position: relative; }
.builder-item::before { content: counter(bi); position: absolute; left: 0; top: 14px; width: 24px; height: 24px; display: grid; place-items: center; background-color: var(--ink); color: var(--paper); font-size: 0.78rem; font-weight: 800; }
.bi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.bi-head strong { font-size: 1.02rem; }
.bi-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; }
.bi-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bi-controls select { min-height: 44px; min-width: 96px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink); }
.bi-weight { margin: 0 0 8px; padding: 8px 10px; background-color: var(--paper); border-left: 3px solid var(--volt); font-size: 0.9rem; }
.bi-weight-label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bi-move { display: flex; gap: 6px; }
.builder-note { font-size: 0.88rem; padding: 10px 12px; border: 1px dashed var(--line); }
.builder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-goals .hero-build-link { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin-top: 8px; min-height: 56px; padding: 12px 16px; background-color: var(--volt); color: var(--on-volt); text-decoration: none; font-size: 0.86rem; font-weight: 800; font-stretch: 110%; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-goals .hero-build-link::after { content: "\2192"; font-size: 1.1rem; }
.hero-goals .hero-build-link:hover, .hero-goals .hero-build-link:focus-visible { background-color: #ffffff; color: var(--on-volt); outline: 3px solid var(--volt); outline-offset: 2px; }
@media (max-width: 900px) {
    .builder-body { grid-template-columns: 1fr; }
    .builder-pick { border-right: 0; border-bottom: 1px solid var(--line); }
    .builder-results { max-height: 360px; }
}
@media (max-width: 600px) {
    .builder-intro, .builder-pick, .builder-plan { padding: 16px; }
    .builder-intro .btn { width: 100%; }
    .builder-results .btn { min-height: 44px; }
    .bi-move .chip { min-height: 44px; min-width: 44px; }
}
@media (max-width: 600px) {
    .bi-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .bi-controls select { min-width: 0; width: 100%; }
}
.builder-goal { grid-column: 1 / -1; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.builder-goals span { min-height: 44px; display: flex; align-items: center; }
.builder-goals legend { font-weight: 800; color: var(--ink); }
.builder-goal-why { margin: 10px 0 0; font-size: 0.9rem; color: var(--muted); max-width: 70ch; }
.builder-tally { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.builder-tally:empty { display: none; }
.builder-tally li { padding: 6px 10px; font-size: 0.8rem; border: 1px solid var(--line); background-color: var(--paper); }
.builder-tally li.is-full { border-color: var(--ink); }
.builder-tally li.is-over { border: 2px solid var(--volt); }
.tally-warn { font-weight: 700; }
.builder-results li.is-full small { color: var(--ink); font-weight: 600; }
.builder-results .btn.is-anyway { border-style: dashed; }
.bi-warn { margin: 0 0 8px; padding: 8px 10px; font-size: 0.86rem; border: 2px solid var(--volt); background-color: var(--surface); }
.builder-science { margin-top: 16px; font-size: 0.88rem; }
.builder-science summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 600px) { .builder-goal { padding: 16px; } .builder-goals label { flex: 1 1 45%; } .builder-goals span { justify-content: center; text-align: center; font-size: 0.85rem; } }

@media (max-width: 600px) { .builder-goals label > span { width: 100%; } }
.hero-goals .hero-build-link { border: 0; }

/* ---------- Your plan bar (bottom of every page but Plans) ---------- */
.planbar {
    position: fixed; left: 20px; bottom: 20px; z-index: 70;
    width: min(420px, calc(100vw - 40px));
    background-color: var(--base); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.12); border-top: 3px solid var(--volt);
    box-shadow: 0 12px 32px rgb(var(--base-rgb) / 0.35);
}
.planbar-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 0; }
.planbar-toggle {
    flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    padding: 4px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.planbar-kicker::after { content: " \25B4  Show exercises"; color: #bdbdbd; letter-spacing: 0.06em; }
.planbar.is-open .planbar-kicker::after { content: " \25BE  Hide"; }
.planbar-toggle:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
.planbar-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt); }
.planbar-toggle strong { font-size: 0.95rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.planbar-sub { font-size: 0.76rem; color: #bdbdbd; }
.planbar-go { flex: none; background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.planbar-go:hover, .planbar-go:focus-visible { background-color: #ffffff; border-color: #ffffff; color: var(--on-volt); }
body.planbar-open .coach-fab { display: none; }
.planbar-body { border-top: 1px solid rgba(255, 255, 255, 0.12); max-height: 50vh; overflow-y: auto; }
.planbar-list { list-style: none; margin: 0; padding: 4px 12px; counter-reset: pb; }
.planbar-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #222222; }
.planbar-list li > span:not(.equip) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.planbar-list small { color: #bdbdbd; }
.planbar-list li.is-done strong { text-decoration: line-through; text-decoration-color: var(--volt); color: #9a9a9a; }
.planbar-list .equip { color: #ffffff; margin-right: 0; }
.planbar-list .chip { color: #ffffff; border-color: #444444; background: transparent; }
.planbar-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; }
.planbar-actions .btn { color: #ffffff; border-color: #ffffff; background: transparent; }
.planbar-actions .btn:hover { background-color: #ffffff; color: var(--on-volt); }
body.has-planbar .coach-fab { bottom: calc(var(--tabbar-h) + 20px); }
.plan-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.plan-edit span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 760px) {
    .planbar { left: 0; right: 0; bottom: var(--tabbar-h); width: auto; border-left: 0; border-right: 0; box-shadow: 0 -6px 20px rgb(var(--base-rgb) / 0.25); }
    body.has-planbar { padding-bottom: calc(var(--tabbar-h) + 72px); }
    body.has-planbar .coach-fab { bottom: calc(var(--tabbar-h) + 84px); }
    .planbar-body { max-height: 45vh; }
}
@media (min-width: 761px) { body.has-planbar .site-footer { padding-bottom: 96px; } }
@media print { .planbar { display: none !important; } }

.library-aka { margin: -6px 0 10px; font-size: 0.8rem; color: var(--muted); font-style: italic; }

.rest-timer-at { flex-basis: 100%; margin: 6px 0 0; font-size: 0.8rem; color: #bdbdbd; }
.rest-timer-at:empty { display: none; }
.rest-timer-alerts { flex-basis: 100%; margin-top: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--volt); background: transparent; color: #ffffff; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.rest-timer-alerts:hover, .rest-timer-alerts:focus-visible { background-color: var(--volt); color: var(--on-volt); }
body:has(#rest-timer:not([hidden])) .planbar { display: none; }

/* ---------- Finish workout ---------- */
.day-finish { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.day-finish .btn { width: 100%; min-height: 48px; }
.day-card.complete .day-finish .btn { background-color: transparent; color: var(--ink); border-color: var(--ink); }
.finish-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 40px); margin: auto; padding: 0; border: 0; border-top: 4px solid var(--volt); background-color: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgb(var(--base-rgb) / 0.45); }
.finish-dialog::backdrop { background-color: rgb(var(--base-rgb) / 0.7); }
.finish-inner { position: relative; max-height: calc(100vh - 44px); overflow-y: auto; padding: 28px 24px 20px; }
.finish-kicker { margin: 0 0 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--volt); }
.finish-inner h2 { margin: 0 0 14px; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 0.95; }
.finish-inner h3 { margin: 18px 0 8px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.finish-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.finish-stats li { padding: 10px 12px; background-color: var(--paper); border-left: 3px solid var(--volt); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.finish-stats strong { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 900; font-stretch: 80%; color: var(--ink); letter-spacing: 0; }
.finish-pr { margin: 12px 0 0; padding: 10px 12px; border: 2px solid var(--volt); }
.finish-next { list-style: none; margin: 0; padding: 0; }
.finish-next li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.finish-next li > span:not(.equip) { display: flex; flex-direction: column; }
.finish-next small { color: var(--muted); }
.finish-next em { grid-column: 2; font-style: normal; font-weight: 700; font-size: 0.9rem; }
.finish-next em.is-up::before { content: "\2191 "; color: var(--volt); }
.finish-tip, .finish-saved { font-size: 0.85rem; color: var(--muted); }
.finish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.finish-actions .btn { min-height: 48px; }
.finish-burst { position: absolute; top: 18px; right: 22px; width: 64px; height: 64px; }
.finish-burst span { position: absolute; left: 50%; top: 50%; width: 6px; height: 22px; margin: -11px 0 0 -3px; background-color: var(--volt); transform-origin: 50% 32px; animation: finish-pop 0.7s ease-out both; }
.finish-burst span:nth-child(1) { transform: rotate(0deg) translateY(-18px); }
.finish-burst span:nth-child(2) { transform: rotate(60deg) translateY(-18px); animation-delay: 0.05s; }
.finish-burst span:nth-child(3) { transform: rotate(120deg) translateY(-18px); animation-delay: 0.1s; }
.finish-burst span:nth-child(4) { transform: rotate(180deg) translateY(-18px); animation-delay: 0.15s; }
.finish-burst span:nth-child(5) { transform: rotate(240deg) translateY(-18px); animation-delay: 0.2s; }
.finish-burst span:nth-child(6) { transform: rotate(300deg) translateY(-18px); animation-delay: 0.25s; }
@keyframes finish-pop { from { opacity: 0; height: 0; } to { opacity: 1; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .finish-burst span { animation: none; } }

.session-list { list-style: none; margin: 0; padding: 0; }
.session-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.session-list li > span:nth-child(2) { display: flex; flex-direction: column; }
.session-list small { color: var(--muted); }
.session-date { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.session-nums { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) { .session-list li { grid-template-columns: 56px 1fr; } .session-nums { grid-column: 2; } }
.finish-inner h2, .finish-kicker { padding-right: 76px; }

/* Works even where the browser has no built-in pop-up support: pin it to the middle of the screen */
.finish-dialog[open] { position: fixed; inset: 0; z-index: 200; }
.day-finish .btn.is-saved { background-color: var(--surface); color: var(--ink); border-color: var(--volt); }

.finish-nextup { display: flex; flex-direction: column; gap: 8px; }
.finish-nextup .btn { min-height: 48px; justify-content: center; text-align: center; }
.day-edit { display: flex; gap: 6px; margin-top: 6px; }
.day-card.is-flash { outline: 3px solid var(--volt); outline-offset: 2px; }

/* ---------- Your dashboard (My progress) ---------- */
.me-dash-block { padding-bottom: 0; }
.dash-hello h2 { margin: 0 0 8px; max-width: 26ch; }
.dash-meta { margin: 0 0 18px; color: var(--muted); }
.dash-meta a { color: var(--ink); }
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.dash-card { padding: 18px; background-color: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); display: flex; flex-direction: column; gap: 6px; }
.dash-next { border-top-color: var(--volt); }
.dash-card h3 { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dash-big { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 900; font-stretch: 80%; text-transform: uppercase; line-height: 1; }
.dash-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.dash-card .btn { align-self: flex-start; margin-top: auto; }
.dash-targets, .dash-best { list-style: none; margin: 6px 0; padding: 0; }
.dash-targets li, .dash-best li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.dash-targets li span:not(.equip), .dash-best li span { flex: 1; min-width: 0; }
.dash-targets .equip { margin-right: 0; }
.dash-best em { font-style: normal; font-size: 0.8rem; font-weight: 800; color: var(--good, #1a7f37); }
.dash-fine { margin: 0; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.day-finish.is-done { display: flex; flex-direction: column; gap: 6px; }
.day-finish-note { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.day-finish .text-button { min-height: 44px; align-self: center; }

/* Add to my workout (library, muscle map, how-tos) */
.library-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 20px; padding-top: 4px; }
.library-actions .btn { margin: 0; }
.mm-ex li { display: flex; }
.mm-ex .mm-add { min-width: 44px; font-size: 1.1rem; justify-content: center; margin-left: -1px; font-weight: 900; border-left-color: var(--line); }
.mm-ex .mm-add:hover, .mm-ex .mm-add:focus-visible { background-color: var(--volt); color: #000; }
.mm-add-hint { margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.howto-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.add-days { margin: 16px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.add-days legend { margin-bottom: 8px; padding: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.add-day { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 2px solid var(--line); cursor: pointer; }
.add-day:has(input:checked) { border-color: var(--volt); }
.add-day input { width: 20px; height: 20px; accent-color: var(--volt); flex: none; }
.add-day small { display: block; color: var(--muted); }
.add-note:empty { display: none; }
.toast-link { display: block; margin-top: 6px; font-weight: 800; }
@media (max-width: 760px) {
    .mm-ex .mm-add, .mm-ex .chip { min-height: 44px; }
    .library-actions .btn { min-height: 44px; }
}

/* My progress: four short tabs instead of one long page */
.me-tabs-wrap { position: sticky; top: var(--header-h); z-index: 30; background-color: var(--paper); border-bottom: 1px solid var(--line); }
.me-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 0; padding-bottom: 0; }
.me-tab { min-height: 52px; padding: 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 0.74rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.me-tab:hover { color: var(--ink); }
.me-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--volt); }
.me-tab:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
[data-me-tab][hidden] { display: none !important; }
.me-dash-block { padding-top: 28px; }
#lifts, #cardio, #setup { padding-top: 32px; }
#lifts .me-chart-panel { margin: 0 0 16px; }
#my-data .account-card { margin-bottom: 28px; }

/* Milestones as small badges */
.milestone-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.milestone-grid li { grid-template-columns: 28px 1fr; padding: 10px; column-gap: 8px; }
.milestone-mark { width: 28px; height: 28px; font-size: 0.85rem; }
.milestone-grid li strong { font-size: 0.85rem; line-height: 1.2; }
.milestone-grid li small { font-size: 0.72rem; }

@media (max-width: 640px) {
    .me-tab { font-size: 0.68rem; letter-spacing: 0.08em; }
    .milestone-grid { grid-template-columns: 1fr 1fr; }
    /* Lifts as cards: no sideways scrolling */
    #lifts .table-scroll { overflow: visible; }
    #lift-table { min-width: 0; border: 0; background: none; }
    #lift-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #lift-table tbody { display: grid; gap: 10px; }
    #lift-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; background-color: var(--surface); border: 1px solid var(--line); }
    #lift-table tr.is-selected { border-left: 4px solid var(--volt); }
    #lift-table th, #lift-table td { padding: 0; border: 0; white-space: normal; }
    #lift-table tbody th { grid-column: 1; align-self: center; font-size: 1rem; }
    #lift-table td.lift-chart-cell { grid-column: 2; grid-row: 1; justify-self: end; }
    #lift-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    #lift-table td[data-label="Last time"] { grid-column: 1 / -1; }
    #lift-table small { white-space: normal; }
    #lift-table .empty-row td { grid-column: 1 / -1; }
    #lift-table .chip { min-height: 44px; }
}

/* Intro when the phone app opens (splash.js). html.app-splash is a plain black cover that shows
   before anything draws; the animated .intro plays on top and removes the cover when it ends.
   If the script never runs, the cover fades out on its own. */
html.app-splash::before { content: ""; position: fixed; inset: 0; z-index: 1000; background-color: var(--base); pointer-events: none; animation: splash-out 0.35s ease 3.2s forwards; }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
.intro { position: fixed; inset: 0; z-index: 1001; overflow: hidden; display: grid; place-items: center; background-color: var(--base); color: #ffffff; cursor: pointer; transition: opacity 0.45s ease; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro-photo { position: absolute; inset: -4%; background: var(--base) url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&q=60&w=900") center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(0.55); animation: intro-zoom 3s ease-out both; }
.intro-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgb(var(--base-rgb) / 0.35) 0%, rgb(var(--base-rgb) / 0.85) 75%); }
.intro-center { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }
.intro-mark { display: flex; align-items: flex-end; gap: 6px; height: 66px; margin-bottom: 18px; }
.intro-mark span { width: 18px; background-color: #ffffff; transform-origin: bottom; transform: scaleY(0); }
/* Each bar rises, then pumps as the orange line sweeps under it (left to right) */
.intro-mark span:nth-child(1) { height: 24px; animation: intro-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.15s forwards, intro-pump 0.36s ease-in-out 1.2s; }
.intro-mark span:nth-child(2) { height: 42px; animation: intro-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.3s forwards, intro-pump 0.36s ease-in-out 1.38s; }
.intro-mark span:nth-child(3) { height: 66px; background-color: var(--volt); animation: intro-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.45s forwards, intro-pump 0.36s ease-in-out 1.56s; }
/* A barbell above the logo: it drops in, then gets pressed up as the line sweeps */
.intro-barbell { display: block; width: 140px; height: 34px; margin-bottom: 14px; opacity: 0; animation: intro-bar-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) 0.05s forwards, intro-press 0.75s ease-in-out 1.15s; }
@keyframes intro-pump { 0% { transform: scaleY(1); } 45% { transform: scaleY(1.35); } 100% { transform: scaleY(1); } }
@keyframes intro-bar-in { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes intro-press { 0% { transform: none; } 35% { transform: translateY(6px); } 70% { transform: translateY(-12px); } 100% { transform: none; } }
.intro-word { display: flex; font-family: var(--display, "Archivo"), "Arial Narrow", sans-serif; font-size: clamp(2.6rem, 13vw, 4.5rem); font-weight: 900; font-stretch: 75%; line-height: 0.95; letter-spacing: 0.02em; }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: intro-letter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; animation-delay: calc(0.65s + var(--i) * 0.05s); }
.intro-line { width: 0; height: 4px; margin-top: 14px; background-color: var(--volt); animation: intro-line 0.6s cubic-bezier(0.3, 0.7, 0.3, 1) 1.15s forwards; }
.intro-tag { margin: 14px 0 0; font-size: 0.8rem; font-weight: 800; font-stretch: 120%; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; animation: intro-fade 0.5s ease 1.6s forwards; }
.intro-tag b { color: var(--volt); }
.intro-skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); opacity: 0; animation: intro-fade 0.4s ease 0.9s forwards; }
@keyframes intro-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes intro-rise { to { transform: scaleY(1); } }
@keyframes intro-letter { to { opacity: 1; transform: none; } }
@keyframes intro-line { to { width: min(260px, 70vw); } }
@keyframes intro-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .intro-photo, .intro-mark span, .intro-barbell, .intro-word span, .intro-line, .intro-tag, .intro-skip { animation: none !important; opacity: 1; transform: none; }
    .intro-line { width: min(260px, 70vw); }
}

/* Room for the rest timer so it never covers the set boxes */
body.rest-on main { padding-bottom: var(--rest-h, 0px); }
html:has(body.rest-on) { scroll-padding-bottom: calc(var(--rest-h, 0px) + 12px); }
/* A hidden label on a switch must stay hidden (it was 390px wide and made home plans scroll sideways) */
.segmented legend.visually-hidden { float: none; width: 1px; height: 1px; margin: -1px; padding: 0; }
/* Charts shrink on phones, so their small labels need to be bigger to stay readable */
@media (max-width: 640px) {
    #lift-chart .chart-label, #progress-chart .chart-label { font-size: 22px; }
    svg .chart-label { font-size: 17px; }
}

/* Mid-workout: bigger tick boxes, the weight next to the sets, and a ✓ per set */
@media screen {
    .ex-list li { grid-template-columns: 28px 1fr; }
    .ex-list li > input[type="checkbox"] { width: 28px; height: 28px; margin-top: 0; }
}
.ex-dose-weight { color: var(--ink); }
.log-set { grid-template-columns: 44px 1fr 1fr 44px; }
.log-set-done { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--line); background-color: var(--surface); color: var(--muted); font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.log-set-done:hover { border-color: var(--ink); color: var(--ink); }
.log-set-done:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.log-set.is-done .log-set-done { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.log-set.is-done .log-set-num { color: var(--ink); }
/* The plan bar steps aside while the rest timer is up */
body.rest-on .planbar { display: none; }
/* Units live in a small header row, so the number boxes get the room */
.log-set .log-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.log-set-head { margin-bottom: 2px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.log-set-head span:last-child { text-align: center; }
.log-set { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; }
.log-set input { min-height: 44px; font-size: 16px; }
.builder-level { grid-column: 1 / -1; padding: 20px 24px 4px; }
.builder-level .level-info { margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); }
.builder-level + .builder-goal { padding-top: 12px; }
@media (max-width: 760px) { .builder-level { padding: 16px 16px 4px; } }

/* Progress tabs: as many columns as there are tabs */
.me-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
#log { padding-top: 32px; }

/* Log tab: every set, newest first */
.log-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; }
.log-tools .field { flex: 1 1 260px; max-width: 420px; margin: 0; }
.log-tools select { width: 100%; min-height: 48px; font-size: 16px; }
.log-totals { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.log-totals li { padding: 10px 12px; background-color: var(--surface); border-left: 3px solid var(--volt); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.log-totals strong { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 900; font-stretch: 80%; letter-spacing: 0; color: var(--ink); }
.log-totals:empty { display: none; }
.log-day { margin-bottom: 14px; background-color: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.log-day h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0; padding: 14px 16px 10px; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.log-day h3 small { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.log-day-list { list-style: none; margin: 0; padding: 0; }
.log-day-list > li { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.log-day-list > li:last-child { border-bottom: 0; }
.log-day-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.log-day-name { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.log-day-name:hover { text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 4px; }
.log-day-name:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.log-day-remove { min-height: 44px; font-size: 0.8rem; color: var(--muted); }
.log-sets { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.log-sets li { padding: 6px 10px; background-color: var(--paper); border: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; }
.log-set-n { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#log-more { margin-top: 6px; }
@media (max-width: 640px) { .me-tab { font-size: 0.62rem; letter-spacing: 0.06em; padding: 0 2px; } }
html:has(.me-tabs-wrap) { scroll-padding-top: calc(var(--header-h) + 64px); }

/* Log tab: weeks that open to days, days that open to sets */
.log-week { margin-bottom: 12px; background-color: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.log-week > summary, .log-day > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; min-height: 56px; padding: 12px 44px 12px 16px; position: relative; cursor: pointer; list-style: none; }
.log-week > summary::-webkit-details-marker, .log-day > summary::-webkit-details-marker { display: none; }
.log-week > summary::after, .log-day > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 900; color: var(--volt); }
.log-week[open] > summary::after, .log-day[open] > summary::after { content: "\2212"; }
.log-week > summary:focus-visible, .log-day > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
.log-week-title { display: flex; flex-direction: column; font-family: var(--display); font-size: 1.25rem; font-weight: 900; font-stretch: 85%; text-transform: uppercase; line-height: 1.1; }
.log-week-title small { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; font-stretch: 100%; text-transform: none; color: var(--muted); }
.log-week-stats { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.log-day { margin: 0; border: 0; border-top: 1px solid var(--line); background: none; }
.log-day > summary { min-height: 52px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.log-day > summary small { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.log-day[open] > summary { background-color: var(--paper); }
.log-day .log-day-list > li { padding-left: 24px; }
.planbar-cancel { min-height: 44px; color: var(--muted); }
.day-finish .text-button[data-cancel-workout], .day-finish .text-button[data-resume-plan] { min-height: 44px; }

/* Your starting point: Tailor it to you */
.setup-more { margin: 18px 0 6px; border: 1px solid var(--line); background-color: var(--paper); }
.setup-more > summary { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 12px 44px 12px 16px; cursor: pointer; list-style: none; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.setup-more > summary::-webkit-details-marker { display: none; }
.setup-more > summary span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.setup-more > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 900; color: var(--volt); }
.setup-more[open] > summary::after { content: "\2212"; }
.setup-more > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
.setup-more-body { display: grid; gap: 16px; padding: 4px 16px 18px; }
.setup-choice legend, .setup-lifts legend, .setup-avoid legend { margin-bottom: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.setup-lifts legend .field-hint, .setup-avoid legend .field-hint { font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.setup-choice span { min-height: 44px; display: flex !important; align-items: center; }
.setup-lifts, .setup-avoid { margin: 0; padding: 0; border: 0; }
.setup-lift { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 0.8fr); gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.setup-lift-name { font-weight: 700; font-size: 0.92rem; }
.setup-lift input { width: 100%; min-height: 44px; font-size: 16px; padding: 6px 8px; }
.setup-avoid .check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.setup-avoid .check input { width: 22px; height: 22px; accent-color: var(--volt); flex: none; }
.setup-rec { margin: 14px 0; padding: 14px 16px; border-left: 4px solid var(--volt); background-color: var(--surface); }
.setup-rec-list { margin: 6px 0 12px; padding-left: 18px; font-size: 0.9rem; }
.setup-rec-list li { margin-bottom: 4px; }
.setup-tailored:empty { display: none; }

/* Keep the bottom tab bar (and the header) pinned on iPhones.
   In the installed app the whole page could bounce when you scrolled past the top or bottom,
   dragging the "fixed" bars with it. Stop the bounce there, and give the bars their own layer. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
}
/* Pull to refresh (installed app): a small tab that drops down from the top as you pull */
.ptr { position: fixed; z-index: 140; top: calc(env(safe-area-inset-top, 0px) - 52px); left: 50%; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
    background: #fff; color: #111; border-bottom: 2px solid var(--volt); box-shadow: 0 6px 18px rgb(var(--base-rgb) / 0.25); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    transform: translate(-50%, 0); opacity: 0; pointer-events: none; }
.ptr.is-pulling, .ptr.is-refreshing { opacity: 1; transform: translate(-50%, calc(var(--pull, 70px) + 8px)); }
.ptr-icon { width: 14px; height: 14px; border: 2px solid var(--volt); border-top-color: transparent; border-radius: 50%; transform: rotate(var(--spin, 0deg)); }
.ptr.is-ready .ptr-icon { border-color: var(--volt); }
.ptr.is-refreshing .ptr-icon { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
    .tabbar { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
.site-header { position: -webkit-sticky; position: sticky; }

/* Looking at a plan that isn't yours */
.adopt-note { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid var(--volt); background-color: var(--surface); font-size: 0.92rem; }
.adopt-note .btn { margin: 8px 8px 0 0; }
.adopt-note .text-link { display: inline-block; margin-top: 8px; }
/* Up next: a workout made for you */
.dash-warn { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--volt); background-color: var(--paper); font-size: 0.88rem; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
/* Builder: clear a prefilled list in one tap */
.builder-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.builder-quick .btn { min-height: 44px; }

/* Build tab shows only the builder; Plans tab shows the plans (with a link to build) */
body.view-build main > section:not(#build) { display: none; }
body.view-build .next-steps, body.view-build .planbar { display: none; }
body.view-plans #build { display: none; }
.build-cta { margin: 0 0 16px; }
/* Your active plan */
.active-plan-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 4px 10px; background-color: var(--volt); color: var(--on-volt); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.active-plan-tag span { width: 8px; height: 8px; background-color: var(--base); border-radius: 50%; }
.goal-picker label.is-active-plan span::after { content: "\2022  yours"; margin-left: 6px; color: var(--volt); font-size: 0.72em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.goal-picker label.is-active-plan input:checked + span::after { color: var(--volt); }

/* Builder: what this workout hits (body map + heads) */
.builder-cover {
    --mm-skin: #ece8df; --mm-line: #b9b1a2; --mm-muscle: #d8d1c3; --mm-hot: #d7263d; --mm-warm: #efb1b8; --mm-hair: #2a2724;
    margin: 4px 0 16px; padding: 14px 14px 10px; border: 1px solid var(--line); background-color: var(--surface);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .builder-cover { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; }
}
:root[data-theme="dark"] .builder-cover { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; }
.builder-cover h4 { margin: 0 0 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.bc-bodies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: center; }
.bc-bodies:empty { display: none; }
.bc-body { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.bc-body > span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bc-body .mm-svg { height: 230px; width: auto; }
.bc-body .mm-muscle path { cursor: default; }
.bc-body .mm-muscle path.hit-1 { fill: var(--volt); stroke: #9a3a12; }
.bc-body .mm-muscle path.hit-2 { fill: var(--mm-hot); stroke: #7a1020; }
.bc-body .mm-muscle path.hit-a { fill: var(--mm-warm); }
.bc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 12px; font-size: 0.75rem; color: var(--muted); }
.bc-k { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.bc-k1 { background-color: var(--volt); }
.bc-k2 { background-color: var(--mm-hot); }
.bc-ka { background-color: var(--mm-warm); }
.bc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bc-list li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bc-list li > strong { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.bc-heads { display: flex; flex-wrap: wrap; gap: 6px; }
.bc-head { padding: 4px 8px; border: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.bc-head i { font-style: normal; font-size: 0.72rem; }
.bc-head.is-1 { border-color: var(--volt); color: var(--ink); box-shadow: inset 3px 0 0 var(--volt); }
.bc-head.is-2 { border-color: var(--mm-hot); color: var(--ink); box-shadow: inset 3px 0 0 var(--mm-hot); }
.bc-head.is-a { color: var(--ink); border-style: dashed; }
.bc-warn { margin-top: 10px; font-size: 0.86rem; }
.bc-warn ul { margin: 0; padding-left: 18px; }
.bc-warn li { margin-bottom: 6px; }
.bc-warn p { margin: 0; color: var(--muted); }
.bc-warn .text-button { min-height: 0; font-weight: 800; }
@media (max-width: 760px) { .bc-warn .text-button { min-height: 44px; } }

/* Active tab: just the workout you're on */
#active { padding-top: 32px; }
.aw-bar { height: 8px; margin: 0 0 16px; background-color: var(--line); }
.aw-bar div { height: 100%; background-color: var(--volt); }
.aw-list { list-style: none; margin: 0 0 16px; padding: 0; border: 1px solid var(--line); background-color: var(--surface); }
.aw-item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.aw-item:last-child { border-bottom: 0; }
.aw-check { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line); font-weight: 900; }
.aw-item.is-done .aw-check { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.aw-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-main strong { display: inline-flex; align-items: center; gap: 8px; }
.aw-main small { color: var(--muted); }
.aw-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.aw-sets span { padding: 3px 8px; border: 1px solid var(--line); background-color: var(--paper); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .me-tab { font-size: 0.56rem; letter-spacing: 0.04em; } }

/* Muscle check, simpler: two clearly different colors, short summary first */
.builder-cover { --bc-once: var(--volt); --bc-twice: var(--base); --bc-twice-line: var(--volt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .builder-cover { --bc-twice: #ffffff; } }
:root[data-theme="dark"] .builder-cover { --bc-twice: #ffffff; }
.bc-body .mm-muscle path.hit-1 { fill: var(--bc-once); stroke: #b23c0f; }
.bc-body .mm-muscle path.hit-2 { fill: var(--bc-twice); stroke: var(--bc-twice-line); stroke-width: 5; }
.bc-k1 { background-color: var(--bc-once); }
.bc-k2 { background-color: var(--bc-twice); outline: 2px solid var(--bc-twice-line); outline-offset: -2px; }
.bc-sum { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.bc-sum li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-left: 4px solid var(--bc-once); background-color: var(--paper); font-size: 0.9rem; }
.bc-sum li.is-2 { border-left-color: var(--bc-twice); box-shadow: inset 4px 0 0 var(--bc-twice-line); }
.bc-sum strong { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bc-x2 { padding: 0 5px; background-color: var(--bc-twice); color: var(--paper); font-size: 0.75rem; }
.bc-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.bc-more > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.bc-more .bc-list { margin-top: 6px; }
.bc-head.is-1 { border-color: var(--bc-once); box-shadow: inset 3px 0 0 var(--bc-once); }
.bc-head.is-2 { border-color: var(--bc-twice); box-shadow: inset 3px 0 0 var(--bc-twice); }

/* Muscle check v3: folds open, sits under your list, striped "worked twice" */
details.builder-cover { padding: 0; }
details.builder-cover > summary { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 52px; padding: 12px 44px 12px 14px; cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
details.builder-cover > summary::-webkit-details-marker { display: none; }
details.builder-cover > summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--volt); }
details.builder-cover[open] > summary::after { content: "\2212"; }
details.builder-cover > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
.bc-peek { font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
details.builder-cover > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.builder-cover > .bc-warn { margin-bottom: 14px; }
.bc-k2 { background: repeating-linear-gradient(45deg, var(--volt-deep) 0 4px, var(--volt) 4px 8px); outline: 0; }
.bc-x2 { background-color: var(--volt-deep); color: #ffffff; }
.bc-sum li.is-2 { border-left-color: var(--volt-deep); box-shadow: none; background-image: linear-gradient(90deg, rgb(var(--volt-rgb) / 0.12), transparent 60%); }
.bc-head.is-2 { border-color: var(--volt-deep); box-shadow: inset 3px 0 0 var(--volt-deep); }
.bc-warn-title { margin: 0 0 6px !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink) !important; }
.day-edit .chip[data-move-day] { min-width: 44px; justify-content: center; font-size: 1rem; }

/* Your plan: change the number of sets right on the day card */
.ex-sets-adjust { display: inline-flex; gap: 6px; margin: 6px 0 2px; }
.ex-sets-adjust .chip { min-width: 64px; justify-content: center; }
.ex-sets-adjust .chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* iPhone: start the Clock timer (Lock Screen + Dynamic Island) */
.rest-ios-wrap { grid-column: 1 / -1; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.rest-ios-wrap[hidden], .rest-push-wrap[hidden] { display: none; }
.rest-timer-ios { min-height: 44px; background-color: var(--volt); color: var(--on-volt); border-color: var(--volt); font-weight: 800; }
.rest-timer-ios::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background-color: var(--base); }
.rest-ios-note { flex-basis: 100%; margin: 2px 0 0; font-size: 0.75rem; line-height: 1.35; color: #bdbdbd; }
.ios-auto-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.ios-steps { margin: 12px 0; padding-left: 22px; }
.ios-steps li { margin-bottom: 8px; }

/* ---------- Finished day folds away once it's saved to Progress ---------- */
.day-filed { padding: 14px 16px 4px; }
.day-filed-note { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.day-filed-check { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; background-color: var(--volt); color: var(--on-volt); font-weight: 900; }
.day-filed-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 8px 0 0 40px; }
.day-filed-links .text-link, .day-filed-links .text-button { min-height: 44px; display: inline-flex; align-items: center; }
.day-card.is-filed .day-finish { border-top: 0; }

/* ---------- Tester fixes (October 2026) ---------- */
/* Progress tabs: two rows of three on phones, so the labels are readable (not 9px) */
@media (max-width: 640px) {
    .me-tabs { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
    .me-tab { min-height: 44px; font-size: 0.74rem; letter-spacing: 0.06em; padding: 0 4px; }
    html:has(.me-tabs-wrap) { scroll-padding-top: calc(var(--header-h) + 104px); }
}
.active-plan-tag, .active-plan-tag * { color: var(--on-volt); opacity: 1; }
.active-plan-tag { font-size: 0.75rem; }
.day-finish-next { margin: 0 0 4px; color: var(--muted); }
.dash-rest { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--volt); color: var(--ink); }
.day-card { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
/* Room at the end of every page so the Fitness Coach button never sits on the last buttons */
@media (max-width: 640px) { #main { padding-bottom: 72px; } }
.setup-lift-level { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--volt); }
.setup-lift-level .btn { margin-top: 8px; }
.setup-body { margin: 16px 0 0; padding: 0; border: 0; }
.setup-body legend { padding: 0; margin-bottom: 8px; font-weight: 800; }
.setup-body .pair { display: flex; align-items: center; gap: 6px; }
.setup-body .pair input { min-width: 0; flex: 1; }
.setup-energy { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--volt); font-size: 0.95rem; }
.setup-body .field-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 12px; }
.setup-body .pair input { flex: 1 1 56px; min-width: 56px; }
@media (max-width: 640px) { .setup-body .field-row { grid-template-columns: 1fr 1.5fr; } }

.rest-push-wrap { grid-column: 1 / -1; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.rest-timer-push { min-height: 44px; background-color: var(--volt); color: var(--on-volt); border-color: var(--volt); font-weight: 800; }

/* ---------- Share a workout ---------- */
.share-list { list-style: none; margin: 8px 0 12px; padding: 0; border-top: 1px solid var(--line); }
.share-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.share-list li span:not(.equip) { flex: 1; font-weight: 700; }
.share-list li strong { color: var(--volt-ink, var(--ink)); font-weight: 800; white-space: nowrap; }
.share-day { margin: 14px 0 0; font-size: 0.95rem; }
.share-options { display: grid; gap: 8px; margin-top: 14px; }
.share-options .btn { width: 100%; min-height: 48px; }
.share-note { margin: -2px 0 6px; font-size: 0.85rem; color: var(--muted); }
.share-name { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.share-name input { width: 20px; height: 20px; accent-color: var(--volt); }
.share-what { margin: 12px 0; }
.share-status { margin: 10px 0 0; }
.share-url { width: 100%; margin-top: 6px; font-size: 16px; }
.build-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.share-app { margin: 12px 0; padding: 12px; border: 2px solid var(--volt); }
.share-app p { margin: 0 0 8px; }
.share-app .btn { width: 100%; min-height: 48px; }
.share-steps { margin: 0 0 10px; padding-left: 22px; }
.share-steps li { margin-bottom: 4px; }

.share-inbox { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--volt); background-color: var(--card, transparent); }
.share-inbox h3 { margin: 0 0 6px; }
.share-inbox p { margin: 0 0 10px; }
.share-inbox .btn-primary { min-height: 48px; }
.share-inbox-more { margin-top: 10px; }
.share-inbox-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.share-inbox-more .btn { margin-top: 8px; }
.share-inbox .share-status:empty { display: none; }

/* Finished days sit below the day you're on (this week only) */
.done-label { display: none; }
.day-grid.sort-done .day-card.complete { order: 2; }
.day-grid.sort-done .done-label { display: block; order: 1; grid-column: 1 / -1; margin: 8px 0 -4px; font-size: 0.75rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.day-grid.sort-done .day-card.complete .day-edit button:not([data-share-day]),
.day-grid.sort-done .day-card.complete .day-finish [data-continue],
.day-grid.sort-done .day-card.complete .day-finish [data-edit-day],
.day-grid.sort-done .day-card.complete .day-finish-next { display: none; }
@media print { .day-grid .day-card { order: 0 !important; } .done-label { display: none !important; } }

/* "Your active plan": a live dot that pulses, like a recording light */
.active-plan-tag span { position: relative; flex: 0 0 auto; animation: live-dot 1.4s ease-in-out infinite; }
.active-plan-tag span::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--on-volt); opacity: 0; animation: live-ring 1.4s ease-out infinite; }
@keyframes live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes live-ring { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }
/* With Reduce Motion on, the dot still blinks (fading on and off isn't movement); only the growing ring stops */
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .active-plan-tag span { animation: live-blink 1.4s ease-in-out infinite; } .active-plan-tag span::after { animation: none; } }
.active-plan-tag span { width: 10px; height: 10px; }
/* The same live dot on the Your plan bar */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background-color: var(--volt); vertical-align: middle; animation: live-dot 1.4s ease-in-out infinite; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--volt); opacity: 0; animation: live-ring 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: live-blink 1.4s ease-in-out infinite; } .live-dot::after { animation: none; } }
/* Black on orange wherever the tag sits (plan headers set paragraphs to grey) */
.active-plan-tag.active-plan-tag, .active-plan-tag.active-plan-tag * { color: var(--on-volt); }

/* Which muscle each exercise trains */
.ex-muscle { display: inline-block; margin: 2px 0 2px 8px; padding: 2px 7px; border: 1px solid var(--line); font-size: 0.68rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); vertical-align: middle; white-space: nowrap; }
/* Plan balance advice on a day of Your plan */
.day-balance { margin: 10px 0 4px; padding: 12px; border-left: 3px solid var(--volt); background-color: rgb(var(--volt-rgb) / 0.08); }
.day-balance p { margin: 0 0 8px; }
.day-balance .btn { min-height: 44px; margin-bottom: 8px; }
/* Exercise order: 1, 2, 3... go top to bottom */
.ex-step { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 8px; padding: 0 4px; background-color: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 900; vertical-align: 1px; }
.ex-main .ex-muscle { justify-self: start; align-self: start; width: max-content; max-width: 100%; margin: 4px 0 6px; }
.ex-title { display: flex; align-items: center; gap: 0; }
.ex-title .ex-step { flex: 0 0 auto; }

/* Buttons with no color class get the site's outline style (not the phone's default blue) */
:where(button.btn) { background-color: transparent; color: var(--ink); border-color: var(--ink); }

/* What this workout hits */
.day-hits { margin: 6px 0 4px; min-height: 44px; border-color: var(--ink); color: var(--ink); background-color: transparent; }
.day-hits-icon { width: 12px; height: 12px; border-radius: 50%; background-color: var(--volt); box-shadow: 0 0 0 3px rgb(var(--volt-rgb) / 0.25); }
.hits-dialog { --mm-skin: #ece8df; --mm-line: #b9b1a2; --mm-muscle: #d8d1c3; --mm-hot: #d7263d; --mm-warm: #efb1b8; --mm-hair: #2a2724; --bc-once: var(--volt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hits-dialog { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; } }
:root[data-theme="dark"] .hits-dialog { --mm-skin: #262626; --mm-line: #5c5c5c; --mm-muscle: #474747; --mm-hot: #e5394f; --mm-warm: #6e3940; --mm-hair: #0d0d0d; }
.hits-dialog .bc-body .mm-muscle path.hit-1 { fill: var(--bc-once); stroke: #b23c0f; }
.hits-bodies { margin: 10px 0; min-height: 240px; }
.hits-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.85rem; color: var(--muted); }
.hits-sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); }
.hits-sw-1 { background-color: var(--volt); }
.hits-sw-2 { background: repeating-linear-gradient(45deg, var(--volt) 0 6px, #1a1a1a 6px 10px); }
.hits-list { list-style: none; margin: 10px 0; padding: 0; border-top: 1px solid var(--line); }
.hits-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hits-list li > span { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--muted); }
.hits-also { font-size: 0.9rem; color: var(--muted); }
/* Workouts from friends: one line until you open it */
.share-inbox { padding: 0; }
.share-inbox > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 48px; padding: 10px 14px; cursor: pointer; list-style: none; }
.share-inbox > summary::-webkit-details-marker { display: none; }
.share-inbox > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.share-inbox[open] > summary::after { content: "\2212"; }
.share-inbox-title { font-weight: 800; }
.share-inbox-hint { font-size: 0.85rem; color: var(--muted); }
.share-inbox-body { padding: 0 14px 14px; }
.share-inbox > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }

/* ---------- Calmer workout screen (October 2026) ---------- */
/* Each exercise: name, sets x reps . weight, then Log sets. Everything else is under "More". */
.ex-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.ex-main .ex-line .ex-muscle { margin: 0; }
.ex-up { display: inline-block; margin-top: 4px; font-size: 0.82rem; font-weight: 800; color: var(--good, #1f7a3f); }
.ex-actions-main { align-items: center; margin-top: 10px; }
.ex-actions-main .rest-btn { min-height: 44px; }
.chip.chip-go { background-color: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.chip-go[aria-expanded="true"] { background-color: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.ex-more { margin-top: 4px; }
.ex-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-more > summary::after { content: "+"; font-size: 1rem; }
.ex-more[open] > summary::after { content: "\2212"; }
.ex-more > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.ex-more[open] { padding-bottom: 6px; }
/* Day options: one "..." button instead of a row of four */
.day-card > header { position: relative; }
.day-menu { margin-top: 0; }
.day-menu > summary { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; font-size: 1.4rem; font-weight: 900; line-height: 1; border: 1px solid transparent; }
.day-menu > summary::-webkit-details-marker { display: none; }
.day-menu[open] > summary { border-color: var(--line); }
.day-menu > summary:focus-visible { outline: 3px solid var(--volt); }
.day-menu .day-edit { flex-wrap: wrap; margin-top: 8px; }
/* "What this workout hits" as a quiet link-style button */
.day-hits.btn { padding: 8px 0; border-color: transparent; text-decoration: underline; text-decoration-color: var(--volt); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.ex-more > *:not(summary) { display: block; margin-top: 8px; }
.ex-more > .ex-sets-adjust, .ex-more > .ex-actions, .ex-more > .ex-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* "More": a plain button at the end of the Log sets row; its panel opens below */
.ex-more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ex-more-btn::after { content: "+"; font-size: 1rem; }
.ex-more-btn[aria-expanded="true"]::after { content: "\2212"; }
.ex-more-btn:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.ex-more[hidden] { display: none; }
.ex-more { margin-top: 2px; padding-bottom: 6px; }
/* The "add to Home Screen" tip waits while a rest timer is showing */
body.rest-on .install-tip { display: none; }

/* ---------- Warm-ups & stretches ---------- */
.day-tools { display: flex; flex-wrap: wrap; gap: 0 18px; }
.day-warm-icon { width: 12px; height: 12px; border-radius: 50%; background-color: transparent; border: 3px solid var(--volt); }
.warmups { padding-top: 16px; padding-bottom: 0; }
.wu-section { border: 1px solid var(--line); border-left: 4px solid var(--volt); }
.wu-section > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 52px; padding: 10px 14px; cursor: pointer; list-style: none; }
.wu-section > summary::-webkit-details-marker { display: none; }
.wu-section > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; font-weight: 700; }
.wu-section[open] > summary::after { content: "\2212"; }
.wu-section > summary:focus-visible { outline: 3px solid var(--volt); outline-offset: -3px; }
.wu-section-title { font-weight: 900; font-stretch: 85%; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em; }
.wu-section-hint { font-size: 0.85rem; color: var(--muted); }
.wu-section-body { padding: 0 14px 16px; }
#wu-today:empty { display: none; }
#wu-today { margin: 4px 0 8px; }
.wu-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 6px; font-size: 0.85rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; }
.wu-h span { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; }
.wu-group { margin: 14px 0 4px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wu-text, .wu-intro { margin: 0 0 8px; }
.wu-fine { font-size: 0.85rem; color: var(--muted); }
.wu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wu-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.wu-check { display: flex; flex: 1 1 220px; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.wu-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--volt); }
.wu-name { font-weight: 700; }
.wu-check input:checked ~ .wu-name { text-decoration: line-through; color: var(--muted); }
.wu-dose { margin-left: auto; font-size: 0.85rem; color: var(--muted); text-align: right; }
.wu-how { flex: 1 1 100%; }
.wu-how > summary { display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.wu-how ol { margin: 0 0 8px; padding-left: 20px; }
.wu-timer { min-height: 44px; }
.wu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; padding-bottom: 6px; }
.wu-watch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.wu-watch:hover { background: var(--ink); color: var(--paper); }
.wu-watch:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.wu-ramp { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0; }
.wu-ramp li { padding: 8px 12px; border: 1px solid var(--line); }

/* ---------- Tools: PR warm-up ---------- */
.pr-lifts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.pr-lifts legend { margin-bottom: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pr-lifts label { position: relative; cursor: pointer; }
.pr-lifts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pr-lifts span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: var(--surface); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pr-lifts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pr-lifts input:focus-visible + span { outline: 3px solid var(--volt); outline-offset: 2px; }
.pr-first { margin: 16px 0 8px; }
.pr-first .text-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pr-sets { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.pr-set { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pr-check { display: flex; align-items: center; gap: 10px; min-height: 44px; flex: 1 1 200px; cursor: pointer; }
.pr-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--volt); }
.pr-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; background: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 900; }
.pr-w { font-size: 1.15rem; font-weight: 850; font-stretch: 90%; }
.pr-r { font-weight: 700; }
.pr-r small { margin-left: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pr-check input:checked ~ .pr-w, .pr-check input:checked ~ .pr-r { text-decoration: line-through; color: var(--muted); }
.pr-plates { flex: 1 1 160px; font-size: 0.88rem; color: var(--muted); }
.pr-set .rest-btn { min-height: 44px; }
.pr-go { border-bottom: 2px solid var(--ink); background: rgb(var(--volt-rgb) / 0.12); padding-left: 8px; padding-right: 8px; }
.pr-go .pr-num { background: var(--volt); color: var(--on-volt); }
.pr-rest-note { font-size: 0.85rem; font-weight: 700; }
.pr-rules { margin: 16px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.92rem; }
.pr-rules li + li { margin-top: 6px; }
.pr-rules strong { color: var(--ink); }
.pr-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pr-status { font-weight: 700; }

/* Typing on a phone: the tab bar, rest timer and plan bar get out of the way of the keypad */
@media (max-width: 760px) {
    body.typing .tabbar, body.typing .rest-timer, body.typing .planbar, body.typing .coach-fab { display: none !important; }
}

/* Your plan: removing an exercise, and what the day still hits */
.chip.chip-remove { color: var(--bad); border-color: currentColor; }
.hits-removed { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--volt); background: rgb(var(--volt-rgb) / 0.1); }

/* Your plan: a quiet line when a day is already in the best order */
.day-order-ok { display: flex; gap: 8px; margin: 8px 0 4px; font-size: 0.85rem; color: var(--muted); }
.day-order-ok span { color: var(--accent); font-weight: 900; }

/* Editing a day: your workout and its muscle check first, the exercise list folded below */
.builder-pick[hidden] { display: none; }
.builder-body.plan-first { grid-template-columns: minmax(0, 1fr); }
.builder-body.plan-first .builder-pick { order: 1; border-right: 0; border-bottom: 0; border-top: 1px solid var(--line); }
.builder-body.plan-first .builder-plan { max-width: 860px; }

/* Swap: a short list to pick from (same muscle and equipment, with your last weight) */
.swap-pick { margin-top: 8px; padding: 10px; background-color: var(--paper); border-left: 3px solid var(--volt); }
.swap-pick-head { margin: 0 0 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.swap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.swap-opt {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px;
    font: inherit; font-size: 0.9rem; text-align: left; color: var(--ink); cursor: pointer;
    background-color: var(--surface); border: 1px solid var(--line); border-radius: 0;
}
.swap-opt:hover { border-color: var(--volt); }
.swap-opt:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.swap-opt-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.swap-opt-last { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.swap-opt-last.is-new { font-weight: 600; font-style: italic; }
.swap-pick > .text-button { margin-top: 6px; min-height: 44px; }
.ex-more > .swap-pick[hidden] { display: none; }
.ex-list .swap-list > li { display: block; padding: 0; border: 0; grid-template-columns: none; }