/* ==========================================================================
   App layout: left navigation rail                             2026-08-12
   Only active under html[data-layout="rail"], so the default long-scroll
   page is completely unaffected when the layout is off.
   ========================================================================== */

html[data-layout="rail"] {
  --rail-w: 248px;
}

/* Hide a node without using [hidden], which the course renderer owns. */
html[data-layout="rail"] .rail-off { display: none !important; }

/* ------------------------------- the rail -------------------------------- */
html[data-layout="rail"] .rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 60;
  background: var(--tp-card);
  border-right: 1px solid var(--tp-line);
  padding: 18px 12px 20px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
html[data-layout="rail"] .rail-brand { padding: 2px 10px 0; line-height: 1.05; }
html[data-layout="rail"] .rail-brand-t,
html[data-layout="rail"] .rail-brand-s {
  display: block; font-family: var(--font-display); font-size: 21px; color: var(--fg-primary);
}
html[data-layout="rail"] .rail-brand-s { color: var(--tp-sky-blue-600); }

html[data-layout="rail"] .rail-prog { padding: 0 10px; }
html[data-layout="rail"] .rail-prog-bar {
  height: 6px; border-radius: var(--radius-pill); background: var(--tp-inset); overflow: hidden;
}
html[data-layout="rail"] .rail-prog-bar i {
  display: block; height: 100%; width: 0;
  background: var(--tp-mint-green); transition: width var(--dur-slow) var(--ease-out);
}
html[data-layout="rail"] .rail-prog span {
  display: block; margin-top: 6px; font-size: var(--fs-12); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

html[data-layout="rail"] .rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html[data-layout="rail"] .rail-link {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 9px 11px; border-radius: 11px;
  text-decoration: none; color: var(--fg-secondary);
  font-size: var(--fs-14); font-weight: 500; line-height: 1.25;
}
html[data-layout="rail"] .rail-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .75; }
html[data-layout="rail"] .rail-link:hover { background: var(--tp-inset); color: var(--fg-primary); }
html[data-layout="rail"] .rail-link.on {
  background: var(--tp-sky-blue-100); color: var(--tp-sky-blue-700); font-weight: 700;
}
html[data-layout="rail"] .rail-link.on svg { opacity: 1; }

/* --------------------------- the content area ---------------------------- */
html[data-layout="rail"] body { padding-left: var(--rail-w); }
html[data-layout="rail"] .nav { left: var(--rail-w); }

/* One destination at a time means the page no longer needs section padding
   tuned for a continuous scroll. */
html[data-layout="rail"] .sec { padding: 30px 0 46px; }
html[data-layout="rail"] .sec.alt { background: none; }
html[data-layout="rail"] .hero { padding-top: 26px; }

html[data-layout="rail"] .rail-burger { display: none; }
html[data-layout="rail"] .rail-scrim { display: none; }

/* ------------------------------- phone ----------------------------------- */
/* The rail becomes a drawer. A bottom tab bar was rejected deliberately: this
   is one task with no peer destinations, so tabs would have to be invented to
   fill the bar. A drawer keeps the full section list without inventing any. */
@media (max-width: 900px) {
  html[data-layout="rail"] body { padding-left: 0; }
  html[data-layout="rail"] .nav { left: 0; }

  html[data-layout="rail"] .rail {
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
    width: min(84vw, 300px);
  }
  html[data-layout="rail"] body.rail-open .rail { transform: translateX(0); }

  html[data-layout="rail"] .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(29, 42, 58, 0.38);
    opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
  }
  html[data-layout="rail"] body.rail-open .rail-scrim { opacity: 1; pointer-events: auto; }

  html[data-layout="rail"] .rail-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: 4px; flex-shrink: 0;
    background: none; border: 0; border-radius: 11px;
    color: var(--fg-primary); cursor: pointer;
  }
  html[data-layout="rail"] .rail-burger svg { width: 21px; height: 21px; }
  html[data-layout="rail"] .rail-burger:hover { background: var(--tp-inset); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout="rail"] .rail,
  html[data-layout="rail"] .rail-scrim,
  html[data-layout="rail"] .rail-prog-bar i { transition: none; }
}

/* ==========================================================================
   Round 2: nested rail, list-detail modules, week plan, stepped check
   ========================================================================== */

/* ------------------------------ nested rail ------------------------------ */
html[data-layout="rail"] .rail-row { display: flex; align-items: center; }
html[data-layout="rail"] .rail-row .rail-link { flex: 1; min-width: 0; }
html[data-layout="rail"] .rail-row .rail-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-layout="rail"] .rail-exp {
  width: 34px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 9px; cursor: pointer; color: var(--fg-muted);
}
html[data-layout="rail"] .rail-exp:hover { background: var(--tp-inset); color: var(--fg-primary); }
html[data-layout="rail"] .rail-exp svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); }
html[data-layout="rail"] .rail-item.exp .rail-exp svg { transform: rotate(90deg); }

html[data-layout="rail"] .rail-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 8px; display: none; }
html[data-layout="rail"] .rail-item.exp .rail-sub { display: block; }
/* No border-left. A rule on one edge only reads as an unfinished container;
   the active state is already carried by the background, weight and colour,
   so the half-border was decoration that looked like a mistake. */
html[data-layout="rail"] .rail-slink {
  display: flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 7px 10px 7px 14px; border-radius: 9px;
  margin-left: 9px;
  text-decoration: none; color: var(--fg-secondary);
  font-size: var(--fs-12); line-height: 1.3;
}
html[data-layout="rail"] .rail-slink:hover { background: var(--tp-inset); color: var(--fg-primary); }
html[data-layout="rail"] .rail-slink.on {
  color: var(--tp-sky-blue-700); font-weight: 700;
  background: var(--tp-sky-blue-50);
}
html[data-layout="rail"] .rail-no {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--tp-inset); color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
html[data-layout="rail"] .rail-slink.on .rail-no { background: var(--tp-sky-blue-200); color: var(--tp-sky-blue-700); }

/* --------------------------- appearance picker --------------------------- */
/* Sits at the foot of the rail, after the destinations, because it is a
   preference rather than a place to go. */
html[data-layout="rail"] .rail-appear {
  margin-top: auto; padding: 14px 11px 2px; border-top: 1px solid var(--tp-line);
}
html[data-layout="rail"] .rail-appear-t {
  margin: 0 0 8px; font-size: var(--fs-12); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted);
}
html[data-layout="rail"] .rail-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
/* A real 44x44 control rather than a 30px one with a pseudo-element hit area:
   that trick was measured and did NOT work (elementFromPoint 5px outside the
   swatch did not resolve to the button). Five 44px swatches do not fit one
   rail row, so the row wraps to two, which is fine for a preference control. */
html[data-layout="rail"] .rail-sw {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 10px; position: relative;
}
html[data-layout="rail"] .rail-sw::after { inset: 9px 9px 0 9px; border-radius: 4px 4px 0 0; }
html[data-layout="rail"] .rail-sw:hover { transform: translateY(-1px); }
html[data-layout="rail"] .rail-sw.on {
  outline: 2px solid var(--tp-sky-blue-600); outline-offset: 2px;
}

/* --------------------------- injected view chrome ------------------------ */
html[data-layout="rail"] .rail-eyebrow {
  margin: 0 0 10px; font-size: var(--fs-12); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted);
}
html[data-layout="rail"] .rail-note {
  margin: 12px 0 0; font-size: var(--fs-14); line-height: 1.55; color: var(--fg-secondary);
}
html[data-layout="rail"] .rail-top { padding-top: 4px; }
html[data-layout="rail"] .rail-bot { margin-top: 26px; }

html[data-layout="rail"] .mod-nav,
html[data-layout="rail"] .step-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--tp-line);
}
html[data-layout="rail"] .mod-nav .btn svg,
html[data-layout="rail"] .step-nav .btn svg { width: 14px; height: 14px; }
html[data-layout="rail"] .mod-nav .btn svg.flip,
html[data-layout="rail"] .step-nav .btn svg.flip { transform: rotate(180deg); }
html[data-layout="rail"] .step-done { font-size: var(--fs-12); color: var(--fg-muted); }

/* ----------------------------- week selector ----------------------------- */
html[data-layout="rail"] .seg {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill);
  background: var(--tp-inset); overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html[data-layout="rail"] .seg::-webkit-scrollbar { display: none; }
html[data-layout="rail"] .seg-b {
  flex: 1 0 auto; min-height: 44px; padding: 10px 15px; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 500; color: var(--fg-secondary);
}
html[data-layout="rail"] .seg-b:hover { color: var(--fg-primary); }
html[data-layout="rail"] .seg-b.on {
  background: var(--tp-card); color: var(--fg-primary); font-weight: 700; box-shadow: var(--shadow-xs);
}
/* When a later week is shown the daily set is still required but is not the
   news, so its group header reads as supporting rather than primary. */
html[data-layout="rail"] .exgrp-head.secondary-group { opacity: .78; }

/* ------------------------------- step dots ------------------------------- */
html[data-layout="rail"] .step-dots { display: flex; gap: 6px; margin: 0 0 12px; }
html[data-layout="rail"] .step-dots i {
  width: 26px; height: 5px; border-radius: var(--radius-pill); background: var(--tp-inset);
}
html[data-layout="rail"] .step-dots i.done { background: var(--tp-mint-green); }
html[data-layout="rail"] .step-dots i.on { background: var(--tp-sky-blue-600); }
html[data-layout="rail"] .step-h {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 400; font-size: 28px;
}
html[data-layout="rail"] body[data-view="check"] .pc-grid { grid-template-columns: 1fr; }

/* ------------------- compact module index (list view) -------------------- */
/* The index is for choosing, not reading: drop the per-row description and
   the Video chip that appears on all ten rows and therefore differentiates
   nothing. Both come back in the single-module view. */
html[data-layout="rail"] body[data-view="modules"] .lesson .lh-body p,
html[data-layout="rail"] body[data-view="modules"] .lesson .vchip { display: none; }
html[data-layout="rail"] body[data-view="modules"] .lesson-head { padding: 12px 18px; }
html[data-layout="rail"] body[data-view="modules"] .lessons { gap: 6px; }
html[data-layout="rail"] body[data-view="modules"] .lesson { box-shadow: none; }
html[data-layout="rail"] body[data-view="modules"] .lesson:hover { border-color: var(--tp-sky-blue-300); }
html[data-layout="rail"] body[data-view="modules"] .lesson .chev { transform: rotate(-90deg); }

/* --------------------------- single module view -------------------------- */
/* The header is a title here, not a control: the rail and the Previous/Next
   pair own navigation, so the chevron and the state ring would be noise. */
html[data-layout="rail"] .lesson.solo { border: 0; box-shadow: none; background: none; }
html[data-layout="rail"] .lesson.solo .lesson-head { padding: 0 0 4px; cursor: default; grid-template-columns: 1fr auto; }
html[data-layout="rail"] .lesson.solo .chev,
html[data-layout="rail"] .lesson.solo .state,
html[data-layout="rail"] .lesson.solo .num { display: none; }
html[data-layout="rail"] .lesson.solo .lh-body h4 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.12; margin-bottom: 6px;
}
html[data-layout="rail"] .lesson.solo .lesson-toggle { cursor: default; }
html[data-layout="rail"] .lesson.solo .lh-body p { font-size: var(--fs-16); color: var(--fg-secondary); }
html[data-layout="rail"] .lesson.solo .lesson-body { padding: 0; }
html[data-layout="rail"] .lesson.solo .lesson-body-inner { border-top: 0; padding-top: 18px; }

/* ============================ mobile refinement ==========================
   The rail layout is judged on a phone first. */
@media (max-width: 900px) {
  html[data-layout="rail"] .sec { padding: 18px 0 34px; }
  html[data-layout="rail"] .rail-bot { margin-top: 22px; }

  /* Stack the pair so each control is a full-width thumb target. */
  html[data-layout="rail"] .mod-nav,
  html[data-layout="rail"] .step-nav { flex-direction: column-reverse; align-items: stretch; }
  html[data-layout="rail"] .mod-nav .btn,
  html[data-layout="rail"] .step-nav .btn { width: 100%; justify-content: center; }
  html[data-layout="rail"] .mod-nav .tlink { text-align: center; padding: 6px 0; }
  html[data-layout="rail"] .mod-nav span:empty,
  html[data-layout="rail"] .step-nav span:empty { display: none; }
  html[data-layout="rail"] .step-done { text-align: center; }

  html[data-layout="rail"] .step-h { font-size: 23px; margin-bottom: 14px; }
  html[data-layout="rail"] .seg-b { font-size: var(--fs-12); padding: 11px 13px; min-height: 44px; }
  /* Five tabs do not fit a phone on one line, and the scrollbar is hidden, so
     the last one ("Make it fun") was simply invisible with nothing to hint it
     was there. Wrap instead of scroll: every tab stays reachable. The pill
     radius becomes a rounded rect once it is two rows tall. */
  html[data-layout="rail"] .seg {
    flex-wrap: wrap; overflow-x: visible; border-radius: var(--radius-card);
    /* Row gap and column gap have to differ once this wraps. A single 4px gap
       is right BETWEEN chips in a row (they read as one segmented control),
       but measured only 4px between two 44px rows, which looked cramped.
       Padding rises to 6px so the outer breathing room is not now tighter
       than the gap between the rows. */
    gap: 14px 4px;
    padding: 8px;
  }
  /* Two equal columns, with the first chip spanning both. Flex wrapping let
     each row stretch its own chips to fill the width, so nothing lined up
     between rows and the widths were all different, which is what read as
     unfinished rather than the gap alone (KP 2026-08-31).
     The split is also semantic, not just visual: the daily set runs through
     all six weeks, while the other four are stage-specific, so Daily earning
     its own full-width row matches how the plan actually works.
     Relies on Daily Exercises being the FIRST chip, which is how
     layout-rail.js builds the control. If that order ever changes, this needs
     a class instead of :first-child. */
  html[data-layout="rail"] .seg {
    display: grid; grid-template-columns: 1fr 1fr;
  }
  html[data-layout="rail"] .seg-b { flex: none; }
  html[data-layout="rail"] .seg-b:first-child { grid-column: 1 / -1; }

  html[data-layout="rail"] .seg-b { flex: 1 1 auto; }
  html[data-layout="rail"] .rail-slink { min-height: 44px; font-size: var(--fs-14); }
  html[data-layout="rail"] .rail-exp { width: 44px; }

  /* Respect the iPhone home indicator inside the scrolling drawer. */
  html[data-layout="rail"] .rail { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Rail accents in dark: sky-blue-600/700 are deep blues meant for light
   grounds, so as text on the dark ramp they measured 1.62:1 and 3.07:1. */
html[data-canvas="dark"] .rail-brand-s { color: var(--tp-sky-blue-300); }
html[data-canvas="dark"] .rail-link.on,
html[data-canvas="dark"] .rail-slink.on { color: var(--tp-sky-blue-300); }
html[data-canvas="dark"] .rail-slink.on .rail-no {
  background: var(--tp-sky-blue-600); color: #ffffff;
}

/* The exercise library becomes a flex column in rail mode so the selected
   week can be ordered above the daily set without moving any DOM. */
html[data-layout="rail"] body[data-view="plan"] .exlib { display: flex; flex-direction: column; }
html[data-layout="rail"] body[data-view="plan"] .exlib-head { order: 0; }

/* --------------------- progress check: flatten the nesting ---------------
   In the rail the progress check gets its own screen with its own heading, so
   the long-scroll page furniture stacks up: a stone .cur-sub card wrapping a
   blue .progress-check panel wrapping a stone .pc-card, three painted boxes
   around one list of questions, costing 88px of width at 1280. Only the
   innermost one groups anything. Long scroll still needs the frames to
   separate the section from the page, so this is rail-only. */
html[data-layout="rail"] .cur-sub,
html[data-layout="rail"] .progress-check {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
}
html[data-layout="rail"] .cur-sub .sub-body { padding: 0; }
/* The step heading already names the group ("Breathing" above a card labelled
   BREATHING), so the label is pure repetition once only one card is on screen. */
html[data-layout="rail"] .pc-card > .pc-sec { display: none; }

/* ------------------------- Start: centre the column ----------------------
   The hero wrap is a one-track grid, and .hero-col caps itself at 680px, so
   on a wide screen it sat at the start of a 1124px track with ~470px of dead
   space beside it. Centre the column itself; the text inside stays ranged
   left, since centred body copy is harder to read. */
html[data-layout="rail"] .hero .wrap > .hero-col { justify-self: center; }

/* Contact carried #contactSec { padding-top: 0 } from the long scroll, where
   it follows another section. As its own destination that put the card hard
   against the top bar with no gap, unlike every other view, which gets the
   30px from .sec above. */
html[data-layout="rail"] #contactSec { padding-top: 30px; }