/* =========================================================
   atlas.css — the atlas page inside the cabinet (spec 006).
   Loaded only by cabinet-atlas.html, after pages.css, so it
   reuses the cabinet's look (NFR-1): the ambient layer, the
   pg-* buttons, type and the one red accent. Only what the
   lesson and the modules need is added here.
   ========================================================= */

/* The names the atlas repo's diagrams draw with, mapped onto the site's
   palette. Defined here, on the page that loads the diagrams, so no other
   page changes. */
:root {
  --edge: #3A3034;
  --accent-lit: #FF382E;
  --line: rgba(245, 245, 242, 0.10);
  --line-strong: rgba(245, 245, 242, 0.20);
  --fg-ash: #9A918C;
  --fg-bone: #EDE4DA;
  --sacred-lit: #E5BA35;
  --sacred-glow: rgba(201, 162, 39, 0.35);
  --font-mono: 'SF Mono', ui-monospace, Menlo, monospace;
}

.atl-wrap { max-width: 920px; }
.atl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Keyboard focus is always visible (NFR-3). */
.atl-wrap :is(button, a, textarea, [tabindex]):focus-visible,
.atl-focus :is(button, a):focus-visible {
  outline: 2px solid var(--tv-gold);
  outline-offset: 3px;
}

/* ── weeks and days ───────────────────────────────────────── */
.atl-nav { margin-top: 26px; }
.atl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.atl-tab {
  min-height: 44px; padding: 10px 6px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); background: rgba(246, 244, 240, 0.03);
  border: 0; box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.12);
  cursor: pointer;
}
.atl-tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tv-accent), inset 0 0 0 1px rgba(246, 244, 240, 0.22); }

.atl-days { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.atl-day {
  width: 100%; min-height: 48px; padding: 10px 14px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  text-align: left; cursor: pointer;
  font-family: var(--font-body); color: var(--fg);
  background: rgba(11, 11, 13, 0.55); border: 0;
  box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.08);
}
.atl-day:hover:not([disabled]) { box-shadow: inset 0 0 0 1px rgba(230, 0, 18, 0.55); }
.atl-day[aria-current="true"] { box-shadow: inset 3px 0 0 var(--tv-accent), inset 0 0 0 1px rgba(246, 244, 240, 0.2); }
.atl-day.is-closed { cursor: not-allowed; color: var(--fg-muted); background: transparent; }
.atl-day-n { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--tv-accent); }
.atl-day.is-closed .atl-day-n { color: var(--fg-muted); }
.atl-day.is-done .atl-day-n { color: var(--tv-gold); }
.atl-day-t { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.atl-day-meta { font-size: 11px; letter-spacing: 0.08em; color: var(--fg-muted); white-space: nowrap; }
.atl-day.is-done .atl-day-meta { color: var(--tv-gold); }

/* ── the lesson ───────────────────────────────────────────── */
.atl-pane { margin-top: 40px; outline: none; }
.atl-title { font-size: clamp(28px, 4.8vw, 46px); }
.atl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.atl-actions .pg-btn { min-height: 44px; padding: 11px 18px; }
.atl-sec { margin-top: 38px; }
.atl-h2 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tv-gold);
}
.atl-sense {
  margin: 0; padding: 18px 20px;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.4;
  color: var(--fg); border-left: 2px solid var(--tv-accent); background: rgba(230, 0, 18, 0.05);
}
.atl-cards { display: grid; gap: 12px; }
@media (min-width: 760px) { .atl-cards { grid-template-columns: 1fr 1fr; } }
.atl-card { padding: 18px 20px; background: rgba(11, 11, 13, 0.6); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.08); }
.atl-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--fg); }
.atl-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); }

.atl-video-frame { position: relative; padding-top: 56.25%; background: #000; }
.atl-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.atl-schemas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.atl-schema { margin: 0; padding: 18px 14px 12px; background: rgba(11, 11, 13, 0.6); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.08); display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.atl-schema svg { width: 100%; max-width: 440px; height: auto; display: block; }
.atl-schema figcaption { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); text-align: center; }
/* the diagrams' label colours */
.m-f { fill: var(--fg-muted); } .t-f { fill: var(--fg); } .d-f { fill: var(--fg-ash); }
.r-f { fill: var(--accent-lit); } .g-f { fill: var(--tv-gold); }
.interactive-zone { cursor: pointer; }
.interactive-zone:focus-visible { outline: 2px solid var(--tv-gold); }
.sounds-table-wrap { width: 100%; overflow-x: auto; }
.sounds { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sounds th { text-align: left; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; padding: 0 12px 10px 0; }
.sounds td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); color: var(--fg-muted); }
.sounds td:first-child { font-family: var(--font-display); font-size: 18px; color: var(--accent-lit); white-space: nowrap; }
.sounds .sound-play-btn { min-height: 36px; padding: 4px 10px; font-size: 11px; color: var(--fg-muted); background: transparent; border: 1px solid var(--line-strong); cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.atl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.atl-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; background: rgba(11, 11, 13, 0.6); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.08); }
.atl-step.is-done { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.45); }
.atl-tick { width: 44px; height: 44px; border: 1px solid rgba(246, 244, 240, 0.28); background: transparent; color: var(--tv-gold); font-size: 20px; cursor: pointer; }
.atl-tick[aria-pressed="true"] { border-color: var(--tv-gold); background: rgba(201, 162, 39, 0.16); }
.atl-step-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.atl-step-top strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.atl-dur { font-size: 12px; color: var(--tv-gold); white-space: nowrap; }
.atl-step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); }
.atl-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.atl-clock { font-family: var(--font-display); font-size: 22px; min-width: 64px; color: var(--fg); }
.atl-mini {
  min-height: 44px; padding: 8px 12px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); background: transparent; border: 0;
  box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.18); cursor: pointer;
}
.atl-mini:hover { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.4); }
.atl-keep { margin-top: 12px; font-size: 12.5px; color: var(--fg-muted); }

.atl-pacer { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 16px; padding: 26px 0 6px; }
.pacer-circle {
  width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--tv-accent);
  background: radial-gradient(circle, rgba(230, 0, 18, 0.35) 0%, rgba(230, 0, 18, 0.02) 70%);
  transition: transform 1.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.pacer-circle.inhale { transform: scale(1.3); border-color: var(--tv-gold); background: radial-gradient(circle, var(--sacred-glow) 0%, rgba(201, 162, 39, 0.02) 70%); }
.pacer-circle.hold { transform: scale(1.3); border-color: var(--fg-bone); }
.pacer-circle.exhale { transform: scale(0.78); }
@media (prefers-reduced-motion: reduce) { .pacer-circle { transition: none; } }
.atl-pacer-read { text-align: center; }
.atl-pacer-pick { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); }
.atl-pacer-pick select { min-height: 44px; width: auto; }
.pacer-counter { font-family: var(--font-display); font-size: 40px; font-weight: 300; line-height: 1; }
.pacer-phase-label { margin-top: 4px; font-size: 11px; letter-spacing: 0.18em; color: var(--fg-muted); }

.atl-sound { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.atl-sound-word { font-family: var(--font-display); font-size: 28px; color: var(--accent-lit); margin-right: 6px; }
.atl-sound .pg-btn { min-height: 44px; padding: 11px 18px; }
.atl-recorder { margin-top: 16px; padding: 18px; background: rgba(11, 11, 13, 0.6); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.1); }
.atl-takes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.atl-takes li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.atl-takes audio { max-width: 100%; height: 36px; }
.atl-take-label { font-size: 12.5px; color: var(--fg-muted); min-width: 140px; }

.atl-task { margin: 0; padding: 16px 18px; font-size: 15px; line-height: 1.6; color: var(--fg); box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35); }
.atl-note { width: 100%; min-height: 120px; resize: vertical; }

.atl-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 46px; }
.atl-pager .pg-btn { min-height: 48px; padding: 12px 16px; }
.atl-pager .pg-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ── the sales page /atlas (spec 007) ─────────────────────── */
/* .pg-wrap underlines its links; a button-looking link must not be */
.atl-wrap a.pg-btn { text-decoration: none; color: var(--fg); }
.atl-wrap a.pg-btn--ghost { color: var(--fg-muted); }
.atl-hero-title { font-size: clamp(30px, 5.4vw, 56px); margin-top: 18px; }
.atl-hero-sub { font-size: 17px; line-height: 1.6; color: var(--fg-muted); max-width: 58ch; }
.atl-formula { margin-top: 18px; font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 3vw, 26px); letter-spacing: 0.04em; color: var(--tv-gold); }
.atl-weeks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .atl-weeks-list { grid-template-columns: 1fr 1fr; } }
.atl-weeks-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px; background: rgba(11, 11, 13, 0.6); box-shadow: inset 0 0 0 1px rgba(246, 244, 240, 0.08); }
.atl-wk-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--tv-accent); }
.atl-weeks-list h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.atl-weeks-list p { margin: 0; font-size: 14.5px; color: var(--fg-muted); }
.atl-wk-focus { margin-top: 8px !important; font-size: 12px !important; letter-spacing: 0.06em; color: var(--tv-gold) !important; }
.atl-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.atl-list li { font-size: 15.5px; line-height: 1.55; color: var(--fg); }
.atl-price-main { font-size: 17px; }
.atl-price-num { font-family: var(--font-display); font-size: clamp(44px, 8vw, 64px); font-weight: 600; color: var(--fg); margin-right: 6px; }
.atl-form { display: grid; gap: 8px; max-width: 460px; }
.atl-form label { margin-top: 8px; font-size: 13px; color: var(--fg-muted); }

/* ── focus mode ───────────────────────────────────────────── */
.atl-focus {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  display: grid; place-items: center; padding: 24px 16px;
  background: rgba(6, 6, 7, 0.96);
}
.atl-focus-in { max-width: 640px; width: 100%; }
.atl-focus-in p { font-size: 16px; line-height: 1.6; color: var(--fg-muted); }
.atl-focus-clock { margin: 22px 0 6px; font-family: var(--font-display); font-weight: 300; font-size: clamp(64px, 18vw, 120px); line-height: 1; color: var(--fg); }

@media (max-width: 560px) {
  .atl-day { grid-template-columns: 30px minmax(0, 1fr); }
  .atl-day-meta { grid-column: 2; }
  .atl-tab { font-size: 10px; letter-spacing: 0.08em; }
  .atl-pager .pg-btn { font-size: 10.5px; letter-spacing: 0.08em; }
}