/* ===========================================================================
   module.css — styling for the VO2max learning modules.

   Loaded AFTER /styles.css, which supplies every colour, shadow and spacing
   token plus .container, .section, .section-alt, .section-title, .btn and
   the navbar and footer. Nothing here redefines a site token; this file only
   adds what a learning module needs on top.
   ======================================================================== */

:root {
    /* Chart series. --v-risk reuses the terracotta already declared in
       styles.css as --collab-applied (#c2410c) so the module introduces no
       new colour to the site. */
    --v-safe: var(--primary-color);
    --v-risk: #c2410c;
    --v-neutral: var(--text-light);
    --v-safe-soft: rgb(0 113 227 / 0.12);
    --v-risk-soft: rgb(194 65 12 / 0.12);
    --v-grid: rgb(0 0 0 / 0.07);
    --v-radius-card: 12px;
    --v-radius-row: 8px;
}

/* ---------------------------------------------------------------------------
   Accessibility the main site is missing. Scoped here so index.html is
   untouched.
   ------------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    background: var(--primary-color);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--v-radius-row) 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

.vo2 a:focus-visible,
.vo2 button:focus-visible,
.vo2 input:focus-visible,
.vo2 summary:focus-visible,
.vo2 [tabindex]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 3px;
}

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

/* ---------------------------------------------------------------------------
   Reading progress bar, pinned under the fixed navbar.
   ------------------------------------------------------------------------ */
.v-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1001;
    pointer-events: none;
}
.v-progress-bar {
    height: 100%;
    width: 0;
    background: var(--primary-color);
    transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
    .v-progress-bar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Module hero.
   ------------------------------------------------------------------------ */
.v-hero {
    padding: 9rem 1.5rem 4rem;
    background: linear-gradient(135deg, var(--background) 0%, var(--background-alt) 100%);
    text-align: center;
}
.v-hero-inner { max-width: 760px; margin: 0 auto; }
.v-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.v-hero h1 { color: var(--secondary-color); margin-bottom: 1rem; }
.v-hero-standfirst {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
}
.v-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.v-chip {
    background: var(--background);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* The source paper, quoted once at the top. */
.v-source {
    max-width: 700px;
    margin: 0 auto;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--v-radius-row);
    padding: 1.25rem 1.5rem;
    text-align: left;
}
.v-source-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.v-source-title { font-weight: 600; color: var(--secondary-color); line-height: 1.4; }
.v-source-cite { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.25rem; }

/* ---------------------------------------------------------------------------
   Section headers, numbered.
   ------------------------------------------------------------------------ */
.v-section-head {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.v-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.v-section-head h2 {
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
    font-size: 2rem;
}
.v-section-head p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.65;
}

/* Body prose inside a section. */
.v-prose {
    max-width: 680px;
    margin: 0 auto 2rem;
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.75;
}
.v-prose p { margin-bottom: 1.15rem; }
.v-prose p:last-child { margin-bottom: 0; }
.v-prose strong { color: var(--secondary-color); font-weight: 600; }

/* ---------------------------------------------------------------------------
   The interactive card — the unit everything is built from.
   ------------------------------------------------------------------------ */
.v-card {
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-card);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    max-width: 860px;
    margin: 0 auto 2rem;
}
.section-alt .v-card { box-shadow: var(--shadow); }
.v-card-wide { max-width: 1000px; }

.v-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.v-card-head h3 { font-size: 1.15rem; color: var(--secondary-color); }
.v-card-hint { font-size: 0.85rem; color: var(--text-light); }
.v-card-sub {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Controls: toggles, sliders, buttons.
   ------------------------------------------------------------------------ */
.v-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.v-controls-end { justify-content: flex-end; margin-top: 1.25rem; margin-bottom: 0; }

/* Segmented control (Healthy men / Men with heart disease). */
.v-toggle {
    display: inline-flex;
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3px;
    gap: 3px;
}
.v-toggle button {
    border: none;
    background: transparent;
    padding: 0.5rem 1.15rem;
    border-radius: 17px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.v-toggle button:hover { color: var(--primary-color); }
.v-toggle button[aria-pressed="true"] {
    background: var(--background);
    color: var(--secondary-color);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Small ghost button, used for Replay / Reset. */
.v-btn {
    border: 1px solid var(--border-color);
    background: var(--background);
    color: var(--text-secondary);
    padding: 0.45rem 0.95rem;
    border-radius: var(--v-radius-row);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.v-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
/* Step buttons that act as a state selector (the cohort animation). */
.v-btn[aria-pressed="true"] {
    background: var(--background-alt);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.v-btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}
.v-btn-primary:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Slider. */
.v-slider-row { margin-bottom: 1.25rem; }
.v-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.v-slider-label strong { color: var(--secondary-color); font-size: 1rem; }

input[type="range"].v-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    outline: none;
    cursor: pointer;
    margin: 0.5rem 0 0;
}
input[type="range"].v-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: var(--shadow);
    cursor: pointer;
}
input[type="range"].v-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: var(--shadow);
    cursor: pointer;
}

/* Number input. */
.v-field {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.v-field input {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-row);
    background: var(--background);
    color: var(--text-primary);
    width: 8rem;
}

/* ---------------------------------------------------------------------------
   Readouts — the big live numbers beside an interactive.
   ------------------------------------------------------------------------ */
.v-readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.v-stat {
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-card);
    padding: 1rem;
    text-align: center;
    min-width: 0;
}
.v-stat-num {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.v-stat-num-sm { font-size: 1.15rem; line-height: 1.35; }
.v-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------------------------------------------------------------------------
   Figures — same idiom as the collaboration figure on the homepage.
   ------------------------------------------------------------------------ */
.v-figure { margin: 0; }
.v-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Chart text is sized in viewBox units, so a 760-wide chart squeezed onto a
   340px phone renders its 12px labels at about 5px. Every chart box therefore
   scrolls horizontally below a readable minimum instead of shrinking further.
   The site's older answer for its world map was to hide the figure entirely
   below 720px; scrolling keeps the chart and the legibility. */
.v-chart { overflow-x: auto; overscroll-behavior-x: contain; }
.v-chart svg { min-width: 560px; }
.v-chart--wide svg { min-width: 620px; }
.v-scroll-hint {
    display: none;
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.4rem;
}
@media (max-width: 660px) {
    .v-scroll-hint { display: block; }
}
.v-caption {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.85rem;
    line-height: 1.5;
}
.v-table { margin-top: 1rem; }
.v-table summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--primary-color);
    text-align: center;
}
.v-table-scroll { overflow-x: auto; margin-top: 1rem; }
.v-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.v-table th,
.v-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.v-table th { color: var(--secondary-color); font-weight: 600; }
.v-table td { color: var(--text-secondary); }
.v-table tr.is-key td { color: var(--secondary-color); font-weight: 600; background: var(--v-safe-soft); }

/* SVG text defaults, so charts inherit the page's typography. */
.v-chart text {
    font-family: inherit;
    fill: var(--text-secondary);
    font-size: 12px;
}
.v-chart .v-axis-line { stroke: var(--border-color); stroke-width: 1; }
.v-chart .v-grid-line { stroke: var(--v-grid); stroke-width: 1; }
.v-chart .v-label-strong { fill: var(--secondary-color); font-weight: 600; }
.v-chart .v-label-sm { font-size: 11px; }

/* Interactive SVG elements. */
.v-chart .v-hit { cursor: pointer; }
.v-chart .v-hit:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Callouts.
   ------------------------------------------------------------------------ */
.v-callout {
    border-left: 4px solid var(--primary-color);
    background: var(--background-alt);
    border-radius: var(--v-radius-row);
    padding: 1.15rem 1.35rem;
    margin: 1.5rem auto;
    max-width: 760px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.v-callout strong { color: var(--secondary-color); }
.v-callout-head {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}
.v-callout-warn { border-left-color: var(--v-risk); }
.v-callout-warn .v-callout-head { color: var(--v-risk); }

/* A quote from the paper. */
.v-quote {
    max-width: 720px;
    margin: 1.75rem auto;
    padding: 0 0 0 1.5rem;
    border-left: 3px solid var(--border-color);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--secondary-color);
    font-style: italic;
}
.v-quote cite {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-style: normal;
    color: var(--text-light);
}

/* ---------------------------------------------------------------------------
   Legends and keys.
   ------------------------------------------------------------------------ */
.v-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.v-key { display: inline-flex; align-items: center; gap: 0.45rem; }
.v-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgb(0 0 0 / 0.08);
}
.v-swatch-safe { background: var(--v-safe); }
.v-swatch-risk { background: var(--v-risk); }
.v-swatch-neutral { background: var(--v-neutral); }

/* ---------------------------------------------------------------------------
   Definition list used for "the study at a glance".
   ------------------------------------------------------------------------ */
.v-beats {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0.6rem;
}
.v-beats dt {
    color: var(--secondary-color);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 0.15rem;
}
.v-beats dd { color: var(--text-secondary); line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Cards grid (limitations, follow-up studies, takeaways).
   ------------------------------------------------------------------------ */
.v-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
}
.v-tile {
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-card);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem;
    min-width: 0;
}
.section-alt .v-tile { box-shadow: var(--shadow); }
.v-tile h3 {
    color: var(--secondary-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.v-tile p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; }
/* Section 09: a card lights up under the cursor, so it can be pointed at
   while narrating. */
#limits .v-tile {
    cursor: default;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#limits .v-tile:hover {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(0 113 227 / 0.15), var(--shadow);
    transform: translateY(-2px);
}
#limits .v-tile:hover h3 { color: var(--primary-color); }
.v-tile-cite {
    display: block;
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
   Quiz.
   ------------------------------------------------------------------------ */
.v-quiz { max-width: 760px; margin: 0 auto; }
.v-q {
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-card);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.section-alt .v-q { box-shadow: var(--shadow); }
.v-q-stem {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    line-height: 1.55;
}
.v-q-num { color: var(--primary-color); margin-right: 0.4rem; }
.v-options { display: grid; gap: 0.6rem; }
.v-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-row);
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.5;
}
.v-option:hover:not(:disabled) {
    border-color: var(--primary-color);
    transform: translateX(4px);
}
.v-option:disabled { cursor: default; }
.v-option-mark {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
}
.v-option.is-right {
    border-color: var(--v-safe);
    background: var(--v-safe-soft);
}
.v-option.is-right .v-option-mark {
    background: var(--v-safe);
    border-color: var(--v-safe);
    color: #fff;
}
.v-option.is-wrong {
    border-color: var(--v-risk);
    background: var(--v-risk-soft);
}
.v-option.is-wrong .v-option-mark {
    background: var(--v-risk);
    border-color: var(--v-risk);
    color: #fff;
}
.v-explain {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--background-alt);
    border-radius: var(--v-radius-row);
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.65;
    border-left: 3px solid var(--primary-color);
}
.v-quiz-score {
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-top: 1.5rem;
}
.v-quiz-score strong { color: var(--primary-color); font-size: 1.6rem; }

/* ---------------------------------------------------------------------------
   Scroll reveal. A deliberate addition — the rest of the site has no motion.
   One 600ms draw-in per chart, on first entry into view only.
   ------------------------------------------------------------------------ */
.v-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.v-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .v-reveal { opacity: 1; transform: none; transition: none; }
    .v-option:hover:not(:disabled) { transform: none; }
    .v-btn-primary:hover { transform: none; }
    .v-chart * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Focus mode — ?focus=<section-id> dims everything but one section, for
   recording a single concept without scrolling.
   ------------------------------------------------------------------------ */
.v-focus-mode .section:not(.is-focus),
.v-focus-mode .v-hero:not(.is-focus) {
    opacity: 0.12;
    filter: saturate(0.2);
    transition: opacity 0.3s ease;
}
.v-focus-mode .section.is-focus {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.v-focus-mode .section.is-focus > .container { width: 100%; }
.v-focus-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background: var(--secondary-color);
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.v-focus-banner a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Module hub cards.
   ------------------------------------------------------------------------ */
.v-module-card {
    display: block;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--v-radius-card);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
    transition: var(--transition);
    color: inherit;
}
.v-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: inherit;
}
.v-module-card h3 { color: var(--secondary-color); font-size: 1.2rem; margin-bottom: 0.5rem; }
.v-module-card p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.65; }
.v-module-num {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}
.v-module-card.is-soon { opacity: 0.55; pointer-events: none; }
.v-module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}
.v-tag {
    font-size: 0.75rem;
    background: var(--background-alt);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.25rem 0.7rem;
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   Fifteen nav items on the module page. The site's hamburger takes over at
   1024px and below; above that the row has to fit in about 940px, so: a
   tighter gap, slightly smaller type, and a label may never break onto two
   lines (an overflow is visible in testing; a wrap is not).
   ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
    .vo2 .nav-menu { gap: 0.75rem; }
    .vo2 .nav-menu a { white-space: nowrap; font-size: 0.8rem; }
}

/* ---------------------------------------------------------------------------
   Responsive. Matches the site's desktop-first max-width convention.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .v-hero { padding: 7rem 1.5rem 3rem; }
    .v-hero-standfirst { font-size: 1.05rem; }
    .v-section-head h2 { font-size: 1.6rem; }
    .v-section-head p { font-size: 1rem; }
    .v-card { padding: 1.25rem; }
    .v-prose { font-size: 1rem; }
    .v-stat-num { font-size: 1.5rem; }
    .v-readout { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.6rem; }
    .v-quote { font-size: 1rem; }
}

@media (max-width: 600px) {
    .v-beats { grid-template-columns: 1fr; row-gap: 0.25rem; }
    .v-beats dd { margin-bottom: 0.75rem; }
    .v-beats dd:last-child { margin-bottom: 0; }
    .v-toggle { width: 100%; }
    .v-toggle button { flex: 1; padding: 0.5rem 0.5rem; font-size: 0.85rem; }
    .v-controls { gap: 0.5rem; }
}

@media (max-width: 480px) {
    .v-hero-meta { gap: 0.4rem; }
    .v-chip { font-size: 0.78rem; padding: 0.4rem 0.8rem; }
    .v-card { padding: 1rem; }
    .v-field input { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Slide mode — one section at a time, for narrating over.
   Each section carries .v-slide; the body gets .v-slides.
   Scrolling still works inside a slide; moving between them is a transition.
   `?view=scroll` leaves the body class off and the whole page shows.
   ------------------------------------------------------------------------ */
.v-slides .v-slide { display: none; }
.v-slides .v-slide.is-active {
    display: block;
    padding-bottom: 6rem;                  /* clear the fixed control bar */
    animation: v-slide-in 380ms ease both;
}
/* The active slide (and, in scroll view, the first section) starts at the
   very top of the document, under the fixed navbar. The site's 3rem section
   padding on small screens is less than the navbar's 75px, so the section
   number was disappearing behind it. */
.v-slides .section.is-active,
.vo2 main > article > .section:first-child {
    padding-top: calc(75px + 1.25rem);
}
.v-slides .v-hero.is-active { min-height: 100vh; }
.v-slides .section.is-active { min-height: calc(100vh - 71px); }
.v-slides .footer { display: none; }
.v-slides.is-last .footer { display: block; }

@keyframes v-slide-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.v-slidebar {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.4rem 0.6rem;
    box-shadow: var(--shadow-lg);
}
.v-slidebar-count {
    min-width: 4.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.v-slidebar .v-btn:disabled { opacity: 0.4; cursor: default; }
.v-slidebar .v-btn:disabled:hover { color: var(--text-secondary); border-color: var(--border-color); }

/* Notation inside an uppercase label. */
.v-nocase { text-transform: none; }

@media (prefers-reduced-motion: reduce) {
    .v-slides .v-slide.is-active { animation: none; }
}