/* Sales Wheel training pages (draft prototype). Builds on ../styles.css post styles. */
.lesson-video { margin: 0 0 2rem; }
.lesson-video-frame {
  position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; box-shadow: 0 1px 0 var(--rule);
}
.lesson-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-soft); }
.lesson-video figcaption { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.lesson-meta { font-size: 0.92rem; color: var(--muted); margin: -1.25rem 0 2rem; }
.lesson-lines { list-style: none; display: grid; gap: 0.75rem; margin: 0 0 1.25rem; }
.lesson-lines li {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent-bright);
  border-radius: 4px; padding: 0.8rem 1rem; font-style: italic;
}
.lesson-try {
  margin: 1.75rem 0 0.5rem; padding: 1.25rem 1.3rem; background: var(--card);
  border: 1px solid var(--rule); border-radius: 6px;
}
.lesson-try h2 { margin-top: 0 !important; }
.lesson-try p:last-child { margin-bottom: 0; }
.lesson-coach .coach-modes { margin: 0.25rem 0 1rem; padding-left: 1.2rem; font-weight: 400; font-size: 1rem; }
.lesson-coach .coach-modes li { margin-bottom: 0.35rem; }
.lesson-coach .coach-note { font-weight: 400; font-size: 0.92rem; color: var(--muted); margin: 0.75rem 0 0; }
.next-module {
  margin-top: 2rem; padding: 1.25rem 1.3rem; border: 1px dashed var(--rule); border-radius: 6px; background: transparent;
}
.next-module .next-kicker {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem;
}
.next-module h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
.next-module p { margin: 0; color: var(--muted); }
@media (min-width: 960px) {
  .post > .lesson-video { grid-column: full; max-width: 64rem; }
  .lesson-coach { display: block !important; }
  .lesson-coach .cta-button { margin-top: 0.25rem; }
}
@media (max-width: 520px) {
  .lesson-try, .next-module { padding: 1.1rem; }
}

/* Content tiers: Executive summary (video) and More detailed (audio) */
.lesson-tier-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.6rem; }
.lesson-tier-title span { font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--muted); }
.lesson-audio { margin: -0.75rem 0 2rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.lesson-audio-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.6rem; }
.lesson-audio-title span { font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--muted); }
.lesson-audio audio { display: block; width: 100%; }
.lesson-audio-note { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }

/* Set your altitude exercise */
.altitude {
  margin: 2rem 0 1.5rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--card);
  border: 1px solid var(--rule); border-top: 5px solid var(--accent-bright); border-radius: 6px;
}
.altitude h2 { margin-top: 0 !important; }
.altitude-intro { font-size: 0.98rem; }
.altitude-steps { margin: 0 0 1rem 1.3rem; display: grid; gap: 0.7rem; }
.altitude-steps li { padding-left: 0.2rem; line-height: 1.5; }
.altitude-steps li::marker { font-family: var(--font-head); font-weight: 700; color: var(--accent-bright); }
.altitude-check { font-size: 0.95rem; margin-bottom: 0.7rem !important; }
.altitude-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.altitude-btn {
  display: inline-block; text-decoration: none;
  font: 600 0.92rem var(--font-body); color: var(--accent); background: transparent;
  border: 1.5px solid var(--accent); border-radius: 4px; padding: 0.5rem 0.9rem; cursor: pointer;
}
.altitude-btn:hover { background: var(--accent-tint); color: var(--accent); }
.altitude-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.altitude-status { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 520px) { .altitude, .lesson-audio { padding: 1.1rem; } }
@media (min-width: 960px) { .post > .lesson-audio { max-width: 47rem; } }

/* Slot for John's existing Helicopter visual (drop-in; no generated artwork) */
.visual-slot { margin: 0 0 1.5rem; }
.visual-slot img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rule); background: var(--card); }
.visual-slot-placeholder {
  display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: 1rem; text-align: center;
  border: 2px dashed var(--rule); border-radius: 6px; color: var(--muted); font-size: 0.95rem; background: transparent;
}

/* John's Helicopter visual */
.lesson-visual-link { display: block; cursor: zoom-in; border-radius: 6px; }
.lesson-visual-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lesson-visual img { background: #fff; }
.lesson-visual figcaption { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }

/* ===== Full program build (hub, modules, check-ins, worksheets) ===== */
/* Editorial serif for titles and reading text (John's editorial look: serif on warm off-white). */
.training-page .post-title, .training-page .post-body h2, .training-page .next-module h2, .ws-head h1 { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.005em; }
.training-page .script p, .training-page .post-dek { font-family: "Newsreader", Georgia, serif; font-size: 1.14rem; line-height: 1.6; }
.breadcrumb { font-size: 0.88rem; color: var(--muted); margin: 1.5rem 0 -1.5rem; }
.breadcrumb a { color: var(--muted); }
.training-page .post-body h2 span { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; color: var(--muted); }

.ci-start, .ws-callout, .two-checkins {
  margin: 0 0 1.75rem; padding: 1.25rem 1.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
}
.ci-start { border-top: 5px solid var(--accent-bright); }
.ci-start h2, .ws-callout h2, .two-checkins h2 { margin-top: 0 !important; font-size: 1.3rem !important; }
.ci-btn, .training-page .cta-button {
  display: inline-block; text-decoration: none; background: var(--accent); color: #fff; font: 600 1rem var(--font-body);
  padding: 0.75rem 1.1rem; border-radius: 4px; border: 0; cursor: pointer; line-height: 1.35;
}
.ci-btn:hover { background: var(--focus); color: #fff; }
.ci-btn:disabled { background: var(--rule); color: var(--muted); cursor: not-allowed; }
.ci-due-lead { font-weight: 600; margin-bottom: 0.6rem !important; }
.privacy-line { margin: 0.75rem 0 0 !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1.5; }
.ci-fine { font-size: 0.88rem; color: var(--muted); margin-top: 0.6rem !important; }
.linklike { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }

.tier { margin: 2.25rem 0 0; }
.tier > h2 { margin-top: 0 !important; }
.audio-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.9rem 1rem; border: 2px dashed var(--rule); border-radius: 6px; margin: 0 0 1.25rem; }
.audio-soon p { margin: 0 !important; font-size: 0.92rem; color: var(--muted); }
.audio-soon-badge { font: 700 0.75rem var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--accent-tint); padding: 0.3rem 0.55rem; border-radius: 3px; }
.audio-soon-note { font-size: 0.9rem; color: var(--muted); }
.det-how { font-size: 0.95rem; color: var(--muted); }
.script-head { font: 700 0.8rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 1.8rem 0 0.6rem; }
.stop-card { margin: 1.5rem 0; padding: 1.1rem 1.2rem; background: var(--accent-tint); border-left: 6px solid var(--accent-bright); border-radius: 4px 8px 8px 4px; }
.stop-card h4 { font-family: var(--font-head); font-size: 1.1rem; margin: 0.15rem 0 0.45rem; }
.stop-card p { margin-bottom: 0.6rem !important; font-family: var(--font-body) !important; font-size: 1rem !important; }
.stop-kicker { font: 700 0.75rem var(--font-body) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 !important; }
.stop-nudge { font-style: italic; color: var(--muted); font-size: 0.93rem !important; margin: 0 !important; }
.stop-nudge span { font-style: normal; font-weight: 600; color: var(--text); }
.practice details summary { cursor: pointer; list-style: revert; }
.practice details summary h2 { display: inline; }
.practice h3 { font-family: var(--font-head); font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
.practice p.li { padding-left: 1rem; }
.cta-kicker { font: 600 0.8rem var(--font-body) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem !important; }
.lesson-coach .coach-desc { font-weight: 400; font-size: 1rem; margin: 0.75rem 0 0; }
.next-module h2 a { color: inherit; }

/* Hub */
.hub-list { list-style: none; display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.hub-item { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.9rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.hub-week { font: 700 0.8rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding-top: 0.3rem; }
.hub-item h3 { font-family: "Newsreader", Georgia, serif; font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem; }
.hub-item h3 a { color: var(--text); text-decoration-color: var(--accent-bright); }
.hub-item p { margin: 0 0 0.35rem !important; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.86rem; color: var(--muted); }
.hub-meta span:first-child { color: var(--accent); font-weight: 600; }
@media (max-width: 520px) { .hub-item { grid-template-columns: 1fr; gap: 0.2rem; } .hub-week { padding-top: 0; } }

/* Check-in */
.ci-form { margin: 0 0 1.5rem; }
.ci-step { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.1rem; margin: 0 0 1.5rem; background: var(--card); display: grid; gap: 0.8rem; }
.ci-step legend { font-weight: 700; padding: 0 0.3rem; }
.ci-field { display: grid; gap: 0.25rem; font-size: 0.95rem; }
.ci-field small { color: var(--muted); }
.ci-input, .ci-select { font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--text); max-width: 100%; }
.ci-commit { width: 100%; }
.ci-scale-q { font-weight: 600; font-size: 1.05rem; }
.ci-progress { font-size: 0.9rem; color: var(--muted); position: sticky; top: 0; background: var(--bg); padding: 0.4rem 0; z-index: 2; }
.ci-area { font-family: "Newsreader", Georgia, serif; font-size: 1.25rem; margin: 1.8rem 0 0.6rem; }
.ci-area small { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.ci-item { border: 0; border-top: 1px solid var(--rule); padding: 0.9rem 0 0.8rem; }
.ci-item legend { font-size: 1.02rem; line-height: 1.45; padding: 0; margin-bottom: 0.55rem; }
.ci-num { font-weight: 700; color: var(--accent); }
.ci-area-tag { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.ci-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.ci-choice { position: relative; }
.ci-choice input { position: absolute; opacity: 0; inset: 0; }
.ci-choice span { display: block; text-align: center; padding: 0.6rem 0.3rem; border: 1.5px solid var(--rule); border-radius: 4px; background: #fff; font-size: 0.92rem; cursor: pointer; }
.ci-choice input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ci-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) { .ci-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ci-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0 0.5rem; }
.ci-note { padding: 0.75rem 0.9rem; background: var(--accent-tint); border-radius: 4px; }
.ci-results h3 { font-family: var(--font-head); font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
.ci-bars { list-style: none; display: grid; gap: 0.7rem; margin: 0 0 1rem; }
.ci-bars li { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--card); }
.ci-bars li.is-flag { border-color: var(--accent-bright); box-shadow: inset 4px 0 0 var(--accent-bright); }
.ci-bar-label { font-size: 0.95rem; }
.ci-bar { display: block; height: 0.55rem; background: var(--bg-soft); border-radius: 99px; overflow: hidden; }
.ci-bar > span { display: block; height: 100%; background: var(--accent-bright); }
.ci-bar-sm { display: inline-block; width: 5rem; vertical-align: middle; }
.ci-bar-val { font-size: 0.86rem; color: var(--muted); }
.ci-change { font-weight: 600; color: var(--text); }
.ci-flag { margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--accent-tint); border-left: 6px solid var(--accent-bright); border-radius: 4px 8px 8px 4px; }
.ci-flag h3 { margin-top: 0 !important; }
.ci-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ci-table th, .ci-table td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--rule); }
.ci-wheel { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; }
.ci-wheel li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--card); font-size: 0.92rem; }
.ci-trend { width: 100%; max-width: 26rem; color: var(--accent); }
.ci-trend text { fill: var(--text); }
.ci-remind-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.ci-print-head { display: none; }
.ci-target { font-family: "Newsreader", Georgia, serif; font-size: 1.1rem; }

/* Worksheets (screen + print) */
.ws { padding: 2rem 0 3rem; }
.ws-head h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.6rem; }
.ws-lead { max-width: 52rem; }
.ws-name { margin: 0.8rem 0; }
.ws-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 1.25rem; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: #fff; }
.ws-table th, .ws-table td { border: 1px solid #bfb4a3; padding: 0.4rem 0.45rem; vertical-align: top; text-align: left; }
.ws-table .ws-colhead th { background: var(--bg-soft); font-size: 0.8rem; }
.ws-table .ws-section th { background: var(--accent-tint); font-size: 0.9rem; }
.ws-table .ws-section th span { font-weight: 400; font-size: 0.82rem; }
.ws-table th[scope=row] { width: 15%; }
.ws-ask { width: 27%; }
.ws-write { height: 3.2rem; }
.ws-done { width: 3.5rem; text-align: center; }
@media (max-width: 700px) { .ws-table { font-size: 0.78rem; } .ws-write { height: 2.4rem; } }

@media print {
  @page { size: letter landscape; margin: 0.45in; }
  .site-header, .site-footer, .no-print, .breadcrumb, .ws-actions, #reset-checkins { display: none !important; }
  body { background: #fff; }
  .ws { padding: 0; }
  .ws-table { font-size: 8.5pt; }
  .ws-table tr { break-inside: avoid; }
  .ci-print-head { display: block; font-weight: 700; }
  .checkin .post-header .post-dek { display: none; }
}

/* ---------- Unit pages (audio-first template, 2026-09-26) ---------- */
.training-page .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.unit-step { margin: 2.25rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.unit-step > h2 { font-size: clamp(1.35rem, 3.2vw, 1.6rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.85rem; }
.unit-step.altitude { border-top: 5px solid var(--accent-bright); padding-top: 1.4rem; }
.step-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem !important; }
.unit-checkin { margin: 0 0 1.75rem; padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--accent-bright); border-radius: 6px; }
.unit-checkin p { margin: 0 0 0.6rem; }
.unit-checkin-h { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.unit-checkin p.unit-checkin-sub { font-family: var(--font-head); font-weight: 700; margin: 1.1rem 0 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }   /* Start Here box: checkpoint 1 and 2 labels (2026-09-27) */
.start-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.audio-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 1.2rem; padding: 0.9rem 1rem; border: 2px dashed var(--accent-bright); border-radius: 8px; background: var(--accent-tint); }
.audio-soon p { margin: 0 !important; font-size: 0.95rem; color: var(--text); }
.audio-soon-badge { font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.25rem 0.75rem; }
.read-along { font-size: 1.02rem; }
.read-along p { margin: 0 0 1rem; max-width: 42rem; }
.read-along .ra-h { font-size: 1.12rem; font-weight: 700; margin: 1.75rem 0 0.6rem; }
.ra-do { margin: 0 0 1rem; padding: 0.8rem 1rem; background: var(--bg-soft); border-radius: 6px; max-width: 42rem; }
.ra-do p:last-child { margin-bottom: 0; }
.ra-do-h { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem !important; }
.ra-videos { margin: 0 0 1.2rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); max-width: 42rem; font-size: 0.95rem; }
.ra-videos-sub { font-weight: 700; margin: 0.8rem 0 0.2rem; }   /* Module 3 practice video groups (2026-09-27) */
.ra-videos ol { margin: 0.4rem 0 0 1.2rem; display: grid; gap: 0.45rem; }
.ra-videos-h { font-family: var(--font-head); font-weight: 700; margin-bottom: 0.3rem !important; }
.stop-card { margin: 0.25rem 0 1.5rem; padding: 1rem 1.1rem; max-width: 42rem; background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--accent-bright); border-radius: 4px 8px 8px 4px; }
.stop-card p { margin: 0 0 0.5rem !important; }
.stop-kicker { font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.stop-row { font-size: 1rem; }
.stop-what { font-size: 0.95rem; color: var(--text); }
.stop-done { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; margin: 0.2rem 0 0.5rem; }
.stop-done input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.stop-nudge { font-size: 0.88rem !important; font-style: italic; color: var(--muted); }
.stop-nudge span { font-style: normal; font-weight: 600; }
.stop-overview { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.stop-overview p { margin: 0 0 0.5rem; }
.stop-overview ol { margin: 0 0 0.6rem 1.25rem; display: grid; gap: 0.25rem; font-size: 0.95rem; }
.stop-progress { color: var(--muted); font-size: 0.9rem; }
.privacy-line { font-weight: 600 !important; font-size: 1rem !important; margin: 0.9rem 0 0 !important; }
.unit-cta .step-tag { margin-bottom: 0.5rem !important; }
/* Module 2 Step 3 notes box: no button above the privacy line any more, so no top gap (2026-09-26, 11:24 PM). */
.coach-notes .privacy-line:first-child { margin-top: 0 !important; }
.unit-cta > p:not(.step-tag):not(.privacy-line):not(.coach-note) { font-weight: 400; font-size: 1rem; }
.next-module h2 a { color: var(--text); }
.next-module h2 a:hover { color: var(--accent); }
.more-btn { margin-top: 0.25rem; }
@media (min-width: 960px) { .post.unit > .unit-step, .post.unit > .unit-checkin { max-width: 47rem; } }

/* Hub */
.hub-h { font-size: clamp(1.35rem, 3.2vw, 1.6rem); font-weight: 700; margin: 2.25rem 0 0.85rem; }
.hub-h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.6rem; }
.hub-list { list-style: none; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.hub-card a, .hub-card > div { display: grid; gap: 0.3rem; height: 100%; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--accent-bright); border-radius: 4px 8px 8px 4px; color: var(--text); text-decoration: none; }
.hub-card-plain > div { border-left-color: var(--rule); border-style: dashed; }
.hub-card a:hover { background: var(--accent-tint); }
.hub-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.hub-title { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; line-height: 1.3; }
.hub-blurb { font-size: 0.93rem; line-height: 1.5; }
.hub-cta { font-size: 0.85rem; color: var(--muted); }
.hub-progress { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.hub-progress:empty { display: none; }
.pace-table, .ci-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--card); }
.pace-table th, .pace-table td, .ci-table th, .ci-table td { border: 1px solid var(--rule); padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.pace-table thead th, .ci-table thead th { font-family: var(--font-head); background: var(--bg-soft); }
.pace-note { font-size: 0.93rem; color: var(--muted); margin-top: 0.7rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* Check-in */
.ci-btn { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; background: var(--accent); color: #fff; text-decoration: none; border: 0; border-radius: 6px; padding: 0.75rem 1.2rem; cursor: pointer; }
.ci-btn:hover { background: var(--focus); color: #fff; }
.ci-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ci-due-lead { font-weight: 600; }
.ci-fine { font-size: 0.88rem; color: var(--muted); margin: 0.6rem 0 0; }
.ci-note { padding: 0.75rem 1rem; background: var(--accent-tint); border-radius: 6px; margin: 0 0 1.2rem; }
.ci-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.ci-remind { margin: 0.4rem 0 0; }
.ci-remind-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 0.3rem; }
.ci-select, .ci-input { font: inherit; font-size: 0.98rem; padding: 0.4rem 0.55rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--text); }
.ci-form { display: grid; gap: 0.9rem; max-width: 47rem; }
.ci-step { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.1rem; background: var(--card); display: grid; gap: 0.75rem; }
.ci-step legend { font-family: var(--font-head); font-weight: 700; padding: 0 0.3rem; }
.ci-field { display: grid; gap: 0.25rem; font-size: 0.95rem; }
.ci-field small { color: var(--muted); }
.ci-scale-q { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; margin-top: 0.5rem; }
.ci-progress { font-size: 0.9rem; color: var(--muted); position: sticky; top: 0; background: var(--bg); padding: 0.35rem 0; z-index: 2; }
.ci-area { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.ci-area small { font-weight: 400; color: var(--muted); }
.ci-item { border: 1px solid var(--rule); border-radius: 6px; padding: 0.8rem 0.9rem; background: var(--card); }
.ci-item legend { font-size: 1rem; line-height: 1.45; padding: 0; margin-bottom: 0.55rem; float: left; width: 100%; }
.ci-num { font-weight: 700; color: var(--accent); }
.ci-area-tag { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }
.ci-choices { clear: both; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.ci-choice { position: relative; }
.ci-choice input { position: absolute; opacity: 0; inset: 0; }
.ci-choice span { display: block; text-align: center; padding: 0.55rem 0.3rem; border: 1.5px solid var(--rule); border-radius: 6px; font-size: 0.9rem; font-weight: 600; background: #fff; cursor: pointer; line-height: 1.25; }
.ci-choice input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.ci-choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 520px) { .ci-choices { grid-template-columns: repeat(2, 1fr); } }
.ci-results { max-width: 47rem; }
.ci-results h2 { font-size: 1.5rem; margin: 0 0 0.8rem; }
.ci-results h3 { font-size: 1.1rem; margin: 1.5rem 0 0.6rem; }
.ci-results p { margin: 0 0 0.8rem; }
.ci-bars { list-style: none; display: grid; gap: 0.6rem; }
.ci-bars li { display: grid; grid-template-columns: 1fr 8rem 9rem; gap: 0.6rem; align-items: center; padding: 0.55rem 0.7rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; font-size: 0.93rem; }
.ci-bars li.is-flag { border-color: var(--accent-bright); border-width: 2px; }
.ci-bar { display: inline-block; height: 0.6rem; width: 100%; background: var(--bg-soft); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.ci-bar > span { display: block; height: 100%; background: var(--accent-bright); }
.ci-bar-sm { width: 5rem; }
.ci-bar-val { font-weight: 600; font-size: 0.88rem; }
.ci-change { color: var(--accent); }
@media (max-width: 620px) { .ci-bars li { grid-template-columns: 1fr; } }
.ci-flag { margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--accent-tint); border-left: 6px solid var(--accent-bright); border-radius: 4px 8px 8px 4px; }
.ci-flag h3 { margin-top: 0 !important; }
.ci-flag ul { margin: 0 0 0 1.2rem; }
.ci-overall { font-size: 1.15rem; }
.ci-wheel { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.ci-wheel li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; font-size: 0.93rem; }
.ci-trend { width: 100%; max-width: 26rem; color: var(--accent); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
.ci-commit { width: 100%; }
.ci-target { font-size: 1.02rem; }
.ci-print-head { display: none; }

@media print {
  .site-header, .site-footer, .no-print, .audio-soon, .ci-actions, .unit-checkin, .stop-done, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .ci-print-head { display: block; font-weight: 700; font-size: 10pt; margin-bottom: 4pt; }
  .ci-results { max-width: none; font-size: 10pt; }
  .ci-results h2 { font-size: 15pt; } .ci-results h3 { font-size: 11pt; margin: 8pt 0 4pt; }
  .ci-table th, .ci-table td { padding: 2pt 5pt; }
  .ci-flag { background: #fff; border: 1px solid #000; }
  .post-header { margin: 0; }
  .checkin .post-header .post-dek { display: none; }
}

/* ---------- Module 2: Listen, then coach (2026-09-26 evening) ---------- */
.listen-step .lesson-audio { margin: 0.25rem 0 1rem; }
.transcript { margin: 0 0 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); }
.transcript > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; list-style: revert; }
.transcript > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.transcript[open] > summary { border-bottom: 1px solid var(--rule); }
.transcript-body { padding: 1rem 1rem 0.25rem; }
.ra-transcript { margin: 0.75rem 0 1rem; }   /* narration read-alongs, collapsed by default (2026-09-27) */
.stop-link { margin: 0.4rem 0 0.6rem; }
.handoff-line { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; line-height: 1.45; margin: 0 0 1.1rem; padding-left: 0.9rem; border-left: 4px solid var(--accent-bright); max-width: 42rem; }
.coach-step .unit-cta { margin: 0 0 1.75rem; }
.worksheet-h { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }

/* ---------- Module 2, stop 5: numbers calculator ---------- */
.numbers-calc { margin: -0.5rem 0 1.75rem; padding: 1.1rem 1.2rem 1.2rem; max-width: 42rem; background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--accent-bright); border-radius: 6px; font-size: 0.95rem; }
.numbers-calc h4 { font-family: var(--font-head); font-size: 1.15rem; margin: 0.2rem 0 0.4rem; }
.numbers-calc .calc-h { font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; margin: 1.4rem 0 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.numbers-calc .calc-h small, .numbers-calc .calc-sub small, .numbers-calc label small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.calc-note { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.25rem !important; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.7rem 0.9rem; margin: 0 0 0.9rem; }
.calc-grid-tight { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.numbers-calc label { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; font-weight: 600; font-size: 0.88rem; }
.numbers-calc input, .numbers-calc select { width: 100%; font: inherit; font-weight: 400; font-size: 1rem; padding: 0.45rem 0.55rem; border: 1px solid var(--rule); border-radius: 5px; background: #fff; color: var(--text); min-width: 0; }
.numbers-calc input:focus-visible, .numbers-calc select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-sub { font-weight: 600; margin: 0.9rem 0 0.4rem !important; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 0 0.6rem; }
.calc-table th, .calc-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.calc-table thead th { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.calc-out td { text-align: right; font-variant-numeric: tabular-nums; }
.calc-out thead th:not(:first-child) { text-align: right; }
.calc-out tbody th { font-weight: 600; }
.calc-total th, .calc-total td { font-weight: 700; }
.calc-stages td:first-child { width: 48%; }
.calc-ratio { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
.calc-scroll { overflow-x: auto; }
.calc-line { margin: 0 0 0.3rem !important; }
.calc-muted { color: var(--muted); }
.calc-small { font-size: 0.82rem; }
.calc-steps { margin: 0.4rem 0 0.8rem 1.25rem; display: grid; gap: 0.3rem; }
.calc-steps:empty { display: none; }
.calc-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 0.9rem; margin: 0 0 0.8rem; }
.calc-dl div { padding: 0.45rem 0.6rem; background: var(--bg-soft, #f3eee4); border-radius: 5px; }
.calc-dl dt { font-size: 0.8rem; color: var(--muted); }
.calc-dl dt::first-letter { text-transform: uppercase; }
.calc-dl dt small { font-size: 0.75rem; }
.calc-dl dd { margin: 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.calc-verdict { margin: 0 0 0.6rem !important; padding: 0.6rem 0.8rem; border-radius: 5px; background: var(--bg-soft, #f3eee4); font-weight: 600; }
.calc-verdict.is-ok { background: #e7f1e4; color: #24502a; }
.calc-verdict.is-short { background: #fbe9e1; color: #8a3212; }
.calc-actions { margin-top: 0.8rem; }
@media (max-width: 520px) {
  .numbers-calc { padding: 1rem 0.85rem; margin-left: -0.25rem; margin-right: -0.25rem; }
  .calc-table { font-size: 0.84rem; }
  .calc-table th, .calc-table td { padding: 0.3rem 0.25rem; }
  .calc-big td:first-child { width: 36%; }
}
#calc-print-root { display: none; }
@media print {
  body.printing-calc > *:not(#calc-print-root) { display: none !important; }
  body.printing-calc #calc-print-root { display: block; }
  #calc-print-root .numbers-calc { max-width: none; margin: 0; border: 0; padding: 0; font-size: 10pt; }
  #calc-print-root .calc-actions, #calc-print-root [data-calc], #calc-print-root .calc-note { display: none !important; }
  #calc-print-root input, #calc-print-root select { border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 0.05rem 0; font-size: 10pt; }
  #calc-print-root .calc-dl div, #calc-print-root .calc-verdict { background: #fff; border: 1px solid #bbb; }
  #calc-print-root table, #calc-print-root .calc-dl { break-inside: avoid; }
  #calc-print-root .calc-grid { grid-template-columns: repeat(4, 1fr); gap: 0.3rem 0.8rem; margin-bottom: 0.4rem; }
  #calc-print-root .calc-dl { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin-bottom: 0.4rem; }
  #calc-print-root .calc-dl div { padding: 0.2rem 0.4rem; }
  #calc-print-root .calc-dl dd { font-size: 10pt; }
  #calc-print-root label { font-size: 8.5pt; gap: 0.1rem; }
  #calc-print-root label small, #calc-print-root .calc-sub small, #calc-print-root .calc-h small { font-size: 7.5pt; }
  #calc-print-root .calc-table { font-size: 8.5pt; margin-bottom: 0.3rem; }
  #calc-print-root .calc-table th, #calc-print-root .calc-table td { padding: 0.12rem 0.3rem; }
  #calc-print-root .calc-h { margin: 0.6rem 0 0.3rem; padding-top: 0.4rem; }
  #calc-print-root .calc-sub { margin: 0.4rem 0 0.2rem !important; }
  #calc-print-root .calc-steps { margin: 0.2rem 0 0.4rem 1.1rem; gap: 0.1rem; font-size: 9pt; }
  #calc-print-root .calc-verdict { padding: 0.3rem 0.5rem; font-size: 9pt; }
  #calc-print-root .calc-ratio { display: inline; margin-left: 0.4rem; font-size: 7.5pt; }
}
/* Module 2: picture cue and the calculator's bottom line (2026-09-26) */
.picture-cue { margin: 0.75rem 0 1rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--accent, #c8102e); background: rgba(0,0,0,0.03); }
.numbers-calc .calc-bottom { font-weight: 700; font-size: 1.1rem; margin: 0.75rem 0 0.25rem; }
.numbers-calc .calc-bottom:empty { display: none; }
.picture-audio { margin: 0.25rem 0 1.5rem; }
.picture-audio .transcript { margin-top: 0.5rem; }
.numbers-calc .calc-cycle { font-size: 0.92rem; margin: 0 0 0.75rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--rule, #ddd3c4); }
.numbers-calc .calc-cycle:empty { display: none; }
.numbers-calc .calc-dl dt small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--muted); }
.numbers-calc .calc-toggle { border: 1px solid var(--rule, #ddd3c4); border-radius: 5px; padding: 0.4rem 0.8rem 0.55rem; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.numbers-calc .calc-toggle legend { font-weight: 600; font-size: 0.88rem; padding: 0 0.3rem; }
.numbers-calc .calc-toggle label { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 500; }
.numbers-calc .calc-toggle[hidden] { display: none; }
.numbers-calc .calc-more { margin: 0 0 0.9rem; }
.numbers-calc .calc-more summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem; }
.numbers-calc .calc-runon { font-weight: 600; }
.numbers-calc .calc-runon:empty, .numbers-calc [data-wo=compare]:empty { display: none; }
.numbers-calc .calc-week td { text-align: right; font-variant-numeric: tabular-nums; }
.numbers-calc .calc-from { font-style: normal; font-weight: 600; font-size: 0.72rem; color: var(--accent, #b5441c); border: 1px solid currentColor; border-radius: 3px; padding: 0 0.3rem; margin-left: 0.3rem; white-space: nowrap; }
.numbers-calc .calc-from[hidden] { display: none; }
.numbers-calc .calc-toggle label { flex: 0 0 auto; white-space: nowrap; }
#calc-part3 { scroll-margin-top: 5rem; }
.numbers-calc .calc-check { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.2rem 0.5rem; margin: 0.25rem 0 0.5rem; }
.numbers-calc .calc-check input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--accent); }
.numbers-calc .calc-check small { flex-basis: 100%; }
.numbers-calc .calc-mode { font-size: 0.88rem; font-weight: 600; margin: 0 0 0.5rem; }
.numbers-calc .calc-mode:empty { display: none; }
/* Standalone section players inside a More detailed session (Brainware recordings, 2026-09-27). */
.read-along .section-audio { margin: 0.5rem 0 1.5rem; }
.section-audio + .section-audio { margin-top: -0.5rem; }
.section-audio .transcript { margin-top: 0.6rem; }
@media print { .section-audio audio { display: none; } }

/* ---------- Printing a generated unit page (Start Here, Modules 3 to 7, Capstone). John, 2026-09-27 8:57 AM ET: Module 4 "gets screwed up in the preview".
   Portrait reading copy: no grid, no buttons, no collapsed-transcript bars or players, transcripts printed open, headings kept with their text. ---------- */
@media print {
  @page unitdoc { size: letter portrait; margin: 0.6in 0.7in; }
  .unit-gen { page: unitdoc; display: block !important; padding: 0 !important; font-size: 10.5pt; line-height: 1.45; }
  .unit-gen > *, .unit-gen .unit-step, .unit-gen .post-header { max-width: none !important; }
  .unit-gen .post-header { margin: 0 0 6pt; padding: 0; }
  .unit-gen .post-title { font-size: 22pt; }
  .unit-gen .post-dek { font-size: 11pt; margin: 4pt 0 0; }
  .unit-gen .unit-step { margin: 12pt 0 0; padding-top: 8pt; }
  .unit-gen .unit-step > h2 { font-size: 15pt; margin: 0 0 6pt; }
  .unit-gen h2, .unit-gen h3, .unit-gen .step-tag, .unit-gen .ra-h, .unit-gen .stop-overview > p:first-child { break-after: avoid; page-break-after: avoid; }
  .unit-gen .altitude-actions, .unit-gen .more-btn, .unit-gen .stop-link, .unit-gen .stop-progress, .unit-gen .stop-nudge, .unit-gen .cta-button,
  .unit-gen details.transcript > summary, .unit-gen .section-audio .transcript, .unit-gen audio { display: none !important; }
  .unit-gen details.transcript { border: 0 !important; background: none !important; margin: 0 !important; }
  .unit-gen details.transcript::details-content { content-visibility: visible; }
  .unit-gen .transcript-body { padding: 0 !important; }
  .unit-gen .read-along p, .unit-gen .ra-do, .unit-gen .stop-card, .unit-gen .ra-videos { max-width: none; }
  .unit-gen .read-along p { margin: 0 0 6pt; }   /* no orphans/widows override: 3 left half-empty pages in Chrome */
  .unit-gen .ra-h { font-size: 12pt; margin: 10pt 0 4pt; }
  .unit-gen .stop-overview, .unit-gen .stop-card, .unit-gen .ra-do, .unit-gen .section-audio, .unit-gen .ra-videos, .unit-gen .unit-cta, .unit-gen .next-module { break-inside: avoid; page-break-inside: avoid; background: #fff !important; box-shadow: none; }
  .unit-gen .stop-overview { padding: 6pt 9pt; margin: 0 0 8pt; border: 1px solid #999; }
  .unit-gen .stop-overview ol { margin: 3pt 0 0; }
  .unit-gen .stop-card { padding: 5pt 9pt; margin: 3pt 0 9pt; border-color: #000; }
  .unit-gen .section-audio { padding: 4pt 8pt; margin: 4pt 0 8pt; border: 1px solid #999; }
  .unit-gen .section-audio .lesson-audio-title { margin: 0; }
  .unit-gen .section-audio .lesson-audio-title::after { content: " (a recording on the lesson page)"; font-weight: 400; font-size: 9pt; }
  .unit-gen .unit-cta, .unit-gen .next-module { padding: 6pt 9pt; margin: 10pt 0 0; border: 1px solid #999; }
  .unit-gen a { color: inherit; text-decoration: none; }
  .unit-gen .next-module { display: none !important; }   /* web navigation only */
}
/* Dictation line under Open my worksheet (John, 2026-09-27 9:45 AM ET) */
.ws-dictate { margin-top: 0.75rem; padding: 0.6rem 0.8rem; background: #fff4d6; border-left: 5px solid #e0a526; border-radius: 6px; font-size: 0.95rem; line-height: 1.45; }
@media print { .ws-dictate { display: none !important; } }
/* "Not just another ChatGPT" line on coaching-session descriptions (John, 2026-09-27 2:56 PM ET) */
p.coach-line { font-weight: 600; }
.unit-cta > p.coach-line:not(.step-tag):not(.privacy-line):not(.coach-note) { font-weight: 600; }
/* Back and Next at the bottom of every page (John, 2026-09-27 3:52 PM ET) */
/* Next comes first in the HTML, so phones (one column) show Next above Back (John, 2026-09-28 ~10:56 AM ET).
   Wider screens put Back on the left and Next on the right. */
.page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; grid-auto-flow: dense; }
.page-nav .next-module { margin-top: 0; min-width: 0; }
.page-nav .page-next { grid-column: 2; grid-row: 1; text-align: right; }
.page-nav .page-back { grid-column: 1; grid-row: 1; }
@media (max-width: 640px) {
  .page-nav { grid-template-columns: 1fr; }
  .page-nav .page-next, .page-nav .page-back { grid-column: 1; grid-row: auto; }
  .page-nav .page-next { text-align: left; }
}
/* Worksheet after the Executive summary; a small jump link near the top */
.ws-jump { margin: 0.25rem 0 0; font-size: 0.95rem; }
.ws-jump a { color: var(--accent); font-weight: 600; }
@media print { .ws-jump, .page-nav { display: none !important; } }

/* Compact Listen buttons (John, 2026-09-27 6:25 PM ET): the small button replaces the long player once the script runs. */
.la-compact { background: none; border: 0; padding: 0; margin: 0.25rem 0 1rem; }
.la-compact audio, .la-compact .lesson-audio-title { display: none; }
.listen-btn { display: inline-flex; align-items: center; gap: 0.55rem; width: auto; max-width: 100%; min-height: 44px; padding: 0.55rem 1.05rem 0.55rem 0.8rem;
  font: 600 0.98rem/1.3 var(--font-body); color: #fff; background: var(--accent, #1d4f7a); border: 0; border-radius: 999px; cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
.listen-btn:hover { filter: brightness(1.08); }
.listen-btn:focus-visible { outline: 3px solid var(--ink, #111); outline-offset: 2px; }
.listen-icon { flex: none; width: 0; height: 0; border-style: solid; border-width: 0.45rem 0 0.45rem 0.72rem; border-color: transparent transparent transparent currentColor; }
.listen-btn.playing .listen-icon { width: 0.7rem; height: 0.9rem; border: 0; border-left: 0.24rem solid currentColor; border-right: 0.24rem solid currentColor; }
@media print { .listen-btn, .la-seek { display: none !important; } }
.la-seek { display: flex; align-items: center; gap: 0.5rem; max-width: 28rem; margin: 0.55rem 0 0; }
.la-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--bg-soft); overflow: hidden; cursor: pointer; touch-action: none; }
.la-bar span { display: block; height: 100%; width: 0; background: var(--accent-bright); pointer-events: none; }
.la-bar:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Start Here welcome (restructure, 2026-09-28) */
.welcome-step p { margin: 0 0 1rem; }
.welcome-cta { margin-top: 1.5rem; }

/* Big Quick Listen button and the Listen / Worksheet / Coach row (John, 2026-09-28 9:02 AM ET) */
.ql-hero { display: none; align-items: center; gap: 1.1rem; margin: 0.4rem 0 1rem; padding: 1rem 1.25rem 1rem 1rem; background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--accent-bright); border-radius: 10px; max-width: 40rem; }
.has-js .ql-hero, .ql-hero.ql-soon { display: flex; }
.ql-play { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,0.08); transition: background 0.15s, transform 0.1s; }
.ql-play:hover { background: var(--focus); }
.ql-play:active { transform: scale(0.97); }
.ql-play:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ql-icon { display: block; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; }
.ql-hero.playing .ql-icon { margin-left: 0; width: 22px; height: 26px; border: 0; border-left: 7px solid #fff; border-right: 7px solid #fff; }
.ql-body { flex: 1; min-width: 0; }
.ql-label { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 600; line-height: 1.2; margin: 0 0 0.2rem !important; color: var(--text); }
.ql-meta { font-size: 0.95rem; color: var(--muted); margin: 0 0 0.55rem !important; font-variant-numeric: tabular-nums; }
.ql-bar { height: 10px; border-radius: 5px; background: var(--bg-soft); overflow: hidden; cursor: pointer; touch-action: none; position: relative; }
.ql-bar span { display: block; height: 100%; width: 0; background: var(--accent-bright); transition: width 0.15s linear; pointer-events: none; }
.ql-bar:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ql-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; }
.ql-skips { display: inline-flex; gap: 0.35rem; }
.ql-skip { font: 600 0.82rem/1 var(--font-body, Inter, system-ui, sans-serif); padding: 0.28rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg-soft); color: var(--text); cursor: pointer; }
.ql-skip:hover { background: var(--card); border-color: var(--accent); }
.ql-skip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ql-soon { border-left-color: var(--rule); }
.ql-soon .ql-play { background: var(--bg-soft); cursor: default; box-shadow: none; }
.ql-soon .ql-icon { border-left-color: #b9ad9c; }
.ql-soon .ql-label { color: var(--muted); }
.steps3 { margin: 0 0 1.6rem; max-width: 40rem; }
.steps3 ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.steps3 li { flex: 1 1 9rem; margin: 0; }
.steps3 li a { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--text); text-decoration: none; font-size: 0.95rem; }
.steps3 .st-box { flex: none; width: 20px; height: 20px; border: 2px solid #b9ad9c; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; line-height: 1; color: #fff; }
.steps3 .st-name { font-weight: 600; }
.steps3 .st-state { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.steps3 li.next a { border-color: var(--accent-bright); background: var(--accent-tint); }
.steps3 li.next .st-box { border-color: var(--accent-bright); }
.steps3 li.done .st-box { background: #4f7a4a; border-color: #4f7a4a; }
.steps3 li.done .st-box::after { content: "\2713"; }
.steps3 li.done .st-state { color: #3f6a3a; }
.steps3 li.soon a { opacity: 0.7; }
.steps3 li.hint a { animation: st-hint 1.2s ease-in-out 3; }
@keyframes st-hint { 50% { box-shadow: 0 0 0 4px rgba(208,89,43,0.35); } }
.steps3 .st-note { display: block; font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0 0.3rem; }
.steps3 .st-tip { font-size: 0.95rem; margin: 0.6rem 0 0 !important; }
@media (max-width: 600px) {
  .ql-hero { padding: 0.9rem; gap: 0.9rem; }
  .ql-play { width: 68px; height: 68px; }
  .ql-label { font-size: 1.3rem; }
  .steps3 li { flex: 1 1 100%; }
}
@media print { .ql-hero, .steps3 { display: none !important; } }

/* Hero-only Quick Listen and screen-reader/print-only transcripts (John, 2026-09-28 ~10:56 AM ET: no second player, no transcript toggles) */
/* John, 2026-09-28 11:38 AM ET: the host shows only its transcript toggle (its <audio> has no controls, so it stays invisible). */
.training-page .ql-audio-host { margin: 0 0 1rem; max-width: 40rem; }
.training-page .ql-audio-host > audio { display: none; }
.training-page .ql-hero2 { margin-top: 0.6rem; }
.training-page .sw-full-note { color: var(--muted); margin: 0.2rem 0 0.6rem; }
.training-page .sr-transcript { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .training-page .sr-transcript { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } }
.stop-card .stop-link { margin: 0.5rem 0; }
.detailed-body { margin-top: 1rem; }

/* On-page enlarge for drawings (John, 2026-09-28 11:24 AM ET: no new-tab trap on iPhone) */
.lesson-visual-zoomable { display: block; cursor: zoom-in; border-radius: 6px; }
.lesson-visual-zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.enlarge-dialog { margin: auto; inset: 0; border: 0; padding: 0; max-width: min(96vw, 72rem); max-height: 96vh; background: #111; color: #fff; border-radius: 8px; }
.enlarge-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.enlarge-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: #1a1a1a; margin: 0; }
.enlarge-bar .altitude-btn { margin: 0; }
.enlarge-note { margin: 0; font-size: 0.9rem; color: #ddd; }
.enlarge-dialog img { display: block; width: 100%; height: auto; max-height: calc(96vh - 3.2rem); object-fit: contain; background: #fff; }

/* Helicopter synced zoom (John, 2026-09-28 11:24 AM ET) */
.heli-zoom { position: relative; overflow: hidden; border-radius: 6px; background: #e8e2d6; }
.heli-zoom-inner { transform-origin: 0 0; transition: transform 0.55s ease; will-change: transform; }
.heli-zoom.is-zoomed .heli-zoom-inner { /* transform set in JS */ }
.heli-mark { position: absolute; border: 3px solid var(--accent, #c8102e); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(247, 243, 235, 0.45); pointer-events: none; transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease; }
.heli-label { position: absolute; left: 0.6rem; bottom: 0.6rem; margin: 0; padding: 0.35rem 0.6rem; background: rgba(20, 20, 20, 0.78); color: #fff; font-size: 0.85rem; border-radius: 4px; max-width: calc(100% - 1.2rem); }
/* While the audio plays, the drawing sticks to the top of the screen inside its own block (figure is the sticky
   element; its parent .heli-follow holds the player and transcript, so it has room to stick). */
.heli-follow.is-playing > figure { position: sticky; top: 0.5rem; z-index: 3; background: var(--bg, #f7f3eb); padding-bottom: 0.25rem; }
.heli-follow.is-playing > figure .heli-zoom { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
@media (max-width: 640px) {
  .heli-follow.is-playing > figure { top: 0; }
  .heli-follow.is-playing > figure figcaption { display: none; }
  .heli-label { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .heli-zoom-inner, .heli-mark { transition: none !important; }
}
@media print {
  .heli-zoom-inner { transform: none !important; }
  .heli-mark, .heli-label { display: none !important; }
  .enlarge-dialog { display: none !important; }
}

/* Goals calculator: personal-goal breakdown and personal-hours block (John, 2026-09-28 11:24 AM ET) */
.calc-goal-break { margin: 0.35rem 0 0.75rem; padding: 0.55rem 0.75rem; background: rgba(0,0,0,0.03); border-radius: 4px; font-size: 0.92rem; }
.calc-goal-break[hidden] { display: none !important; }
.calc-hours-block { margin: 1rem 0; padding: 0.85rem 1rem; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: #fffdf8; }
.calc-hours-block .calc-h { margin-top: 0; }
.calc-verdict.is-over { color: #8a1c1c; font-weight: 700; }
.calc-verdict.is-under, .calc-verdict.is-ok { color: #1a5c2e; font-weight: 700; }
/* Quick Listen words print with the page (the audio itself never prints) */
@media print { .training-page .ql-audio-host { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .training-page .ql-audio-host audio { display: none !important; } }
@media print { .heli-listen-figure { display: none !important; } }
.heli-listen-figure { margin: 0.75rem 0; }
.heli-listen-figure figcaption { margin-top: 0.4rem; font-size: 0.88rem; color: var(--muted); }

/* Lightbox close X (John, 2026-09-28 11:24 AM ET: an obvious X; tap outside, Esc or Back also close) */
.enlarge-x { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,0.78); color: #fff; font: 700 1.9rem/1 system-ui, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.enlarge-x:hover, .enlarge-x:focus-visible { background: var(--accent, #b5441c); outline: 2px solid #fff; outline-offset: 2px; }
.enlarge-bar { padding-right: 4rem; }

/* Coach button under the big play button (John, 2026-09-28 11:55 AM ET): a clear secondary button, same destination as the coach step */
.ql-coach { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: -0.35rem 0 1rem; max-width: 40rem; }
.ql-coach .ql-coach-btn { margin: 0; background: #fff; color: var(--accent); border: 2px solid var(--accent); font-weight: 700; min-height: 44px; }
.ql-coach .ql-coach-btn:hover { background: var(--accent-tint, #fbeee7); color: var(--focus, #8a3212); }
.ql-coach-note { font-size: 0.88rem; color: var(--muted); }
@media print { .ql-coach { display: none !important; } }

/* Goals Coach right on the Helicopter page (John, 2026-09-28 11:57 AM ET: one screen). Coach screens use /coach/coach.css. */
.coach-embed { margin: 1.25rem 0 1.75rem; max-width: 42rem; scroll-margin-top: 1rem; }
.coach-embed-kicker { font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.coach-embed .coach-card { margin: 0; }
.coach-embed .coach-card h2 { margin-top: 0; }
.coach-embed .coach-list { padding-left: 0; }
/* a field the coach just filled in */
.numbers-calc .coach-filled { animation: coach-filled 2.6s ease-out; border-radius: 6px; }
.numbers-calc .coach-filled input, .numbers-calc .coach-filled select, .numbers-calc input.coach-filled { outline: 3px solid var(--accent-bright); outline-offset: 1px; }
@keyframes coach-filled { 0%, 60% { background: var(--accent-tint); box-shadow: 0 0 0 6px var(--accent-tint); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .numbers-calc .coach-filled { animation: none; background: var(--accent-tint); } }
@media print { .coach-embed { display: none !important; } }