/* ==========================================================================
   Hotbox Academy — Course app (app/index.html)
   Shell: slim header, left sidebar, reading column. Depends on tokens, base, components.
   ========================================================================== */

html, body { height: 100%; }
body { overflow: hidden; }

/* ---- Shell ---- */
.shell { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 276px 1fr; grid-template-areas: "head head" "side main"; height: 100%; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-areas: "head" "main"; }
  .side { position: fixed; inset: calc(60px + env(safe-area-inset-top, 0px)) auto 0 0; width: min(320px, 86vw); z-index: 30; transform: translateX(-105%); transition: transform var(--dur-med) var(--ease-out); box-shadow: var(--shadow-float); }
  .side.is-open { transform: none; }
}

/* ---- Header ---- */
.head { grid-area: head; display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) var(--gutter) 0.5rem; border-bottom: 1px solid var(--line); background: var(--bg-0); }
.head__menu { display: none; }
@media (max-width: 900px) { .head__menu { display: inline-flex; } }
.head__progress { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); font-weight: 500; color: var(--fg-faint); }
.head__progress .bar { width: 140px; }
.head__progress .ring { width: 34px; height: 34px; }
.head__progress .ring__label { font-size: 0.6rem; }
@media (max-width: 640px) { .head__progress .bar, .head__progress .hide-phone { display: none; } }

/* ---- Sidebar ---- */
.side { grid-area: side; overflow-y: auto; padding: var(--s-4); border-right: 1px solid var(--line); background: var(--bg-0); display: grid; gap: var(--s-5); align-content: start; }
.side__group { display: grid; gap: 2px; }
.side__group > .label { padding: 0 var(--s-2) var(--s-2); }
.side a { display: grid; grid-template-columns: 1.9rem 1fr auto; gap: var(--s-2); align-items: center; padding: 0.5rem var(--s-2); color: var(--fg-dim); text-decoration: none; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); }
.side a:hover { background: var(--bg-1); color: var(--fg); }
.side a.is-active { background: var(--bg-2); color: var(--fg); box-shadow: 0 1px 0 var(--line-top) inset; }
.side__n { font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--t-sm); color: var(--fg-faint); }
.side a.is-active .side__n { color: var(--accent); }
.side__pct { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.side a.is-done .side__pct { color: var(--ok); }
.side a.is-locked { color: var(--fg-faint); }
.side__foot { padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.5; }

/* ---- Main ---- */
.main { grid-area: main; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
.main__inner { max-width: 880px; margin-inline: auto; padding: var(--s-6) var(--gutter) calc(var(--s-9) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s-5); }
.main__inner > * { min-width: 0; }
.view-head { display: grid; gap: var(--s-3); }
.view-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); max-width: 18ch; }
.view-head p { color: var(--fg-dim); max-width: var(--measure); font-size: var(--t-lg); line-height: 1.5; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-xs); font-weight: 500; color: var(--fg-faint); }
.crumbs a { color: var(--fg-dim); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }

/* Reading progress for the current lesson: a 2px line at the top of the main column. */
.read-bar { position: sticky; top: 0; z-index: 5; height: 2px; margin: 0 calc(-1 * var(--gutter)); background: transparent; }
.read-bar__fill { height: 100%; width: 0; background: var(--accent); transition: width 120ms linear; }

/* ---- Home ---- */
.next { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; padding: var(--s-6); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); overflow: hidden; }
@media (max-width: 600px) { .next { grid-template-columns: 1fr; padding: var(--s-5); } }
.next .ring { width: 88px; height: 88px; }
.next .ring__label { font-size: var(--t-sm); }
.next__body { display: grid; gap: var(--s-3); min-width: 0; }
.next__body h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.next__title { font-size: var(--t-lg); font-weight: 500; color: var(--fg-dim); }
.dash { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { display: grid; gap: var(--s-2); }
.stat__value { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat small { font-size: var(--t-xs); }
.missions { display: grid; gap: var(--s-2); }
.mission { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.mission:hover { border-color: var(--line-strong); background: var(--bg-2); }
.mission.is-done { opacity: 0.6; }
.mission__check { width: 20px; height: 20px; border: 1.5px solid var(--line-strong); border-radius: 6px; display: grid; place-items: center; font-size: 12px; color: var(--ok); transition: background var(--dur-fast), border-color var(--dur-fast); }
.mission.is-done .mission__check { border-color: var(--ok); background: rgba(61, 220, 132, 0.12); }
.mission__pts { font-size: var(--t-2xs); font-weight: 600; color: var(--fg-faint); }
.roadmap { display: grid; gap: 0; }
.roadmap__week { display: grid; grid-template-columns: 7ch 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-dim); }
.roadmap__week > span:first-child { font-stretch: var(--display-stretch); font-weight: 800; text-transform: uppercase; font-size: var(--t-sm); color: var(--fg-faint); padding-top: 0.15em; }
.checklist { display: grid; gap: var(--s-2); }
.checklist a, .checklist button { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-1); color: var(--fg); text-decoration: none; font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.checklist a:hover, .checklist button:hover { border-color: var(--line-strong); background: var(--bg-2); }
.checklist .is-done { color: var(--fg-faint); }
.checklist .mission__check { flex: none; }

/* ---- Phase cards (course overview) ---- */
.phases { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .phases { grid-template-columns: 1fr; } }
.phase { display: grid; gap: var(--s-3); grid-template-rows: auto 1fr auto; }
.phase__meta { display: flex; justify-content: space-between; gap: var(--s-3); }
.phase__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; }
.phase__sub { color: var(--fg-dim); font-size: var(--t-sm); line-height: 1.5; margin-top: var(--s-1); }
.phase__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; font-size: var(--t-2xs); font-weight: 600; color: var(--fg-faint); }
.phase.is-done .phase__foot { color: var(--ok); }
.phase.is-locked { opacity: 0.72; }
.phase.is-locked .phase__foot { color: var(--fg-faint); }

/* ---- Lesson lists ---- */
.lesson-list { display: grid; gap: var(--s-2); }
.lesson-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); color: var(--fg); text-decoration: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.lesson-row:hover { border-color: var(--line-strong); background: var(--bg-2); text-decoration: none; }
.lesson-row__id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); }
.lesson-row__title { font-weight: 500; }
.lesson-row__meta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 4px; }
.lesson-row__state { font-size: var(--t-xs); font-weight: 600; color: var(--fg-faint); white-space: nowrap; }
.lesson-row.is-done .lesson-row__state { color: var(--ok); }
.lesson-row.is-done .lesson-row__id { color: var(--ok); }
.lesson-list h3 { margin-top: var(--s-4); font-size: var(--t-md); color: var(--fg-dim); }

/* ---- Lesson view ---- */
.lesson__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lesson__body { max-width: var(--measure); font-size: 1.08rem; line-height: 1.72; }
.lesson__body h2, .lesson__body h3 { margin-top: var(--s-5); font-size: var(--t-lg); text-transform: none; font-stretch: normal; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.lesson__body p + p { margin-top: var(--s-4); }
.lesson__body ul, .lesson__body ol { margin-top: var(--s-3); }
.lesson__body li + li { margin-top: var(--s-2); }
.lesson__body table { font-size: var(--t-sm); }
.lesson__body .table-wrap { margin-top: var(--s-3); }
.lesson__body blockquote { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-left: 2px solid var(--accent); color: var(--fg-dim); font-size: var(--t-md); }
.video-slot { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); background: var(--bg-1); border: 1px dashed var(--line-strong); }
.video-slot__frame { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border: 0; border-radius: var(--r-sm); background: var(--bg-0); }
.lesson__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.lesson__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (max-width: 600px) { .lesson__nav { grid-template-columns: 1fr; } }
.lesson__nav a { display: grid; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); color: var(--fg); text-decoration: none; min-width: 0; transition: border-color var(--dur-fast), background var(--dur-fast); }
.lesson__nav a:hover { border-color: var(--line-strong); background: var(--bg-2); }
.lesson__nav a.is-next { text-align: right; }
.lesson__nav .label { font-size: var(--t-2xs); }
.lesson__nav strong { font-weight: 500; overflow-wrap: anywhere; }

/* ---- Quiz ---- */
.quiz { display: grid; gap: var(--s-5); }
.quiz__q { display: grid; gap: var(--s-3); }
.quiz__prompt { font-weight: 500; }
.quiz__options { display: grid; gap: var(--s-2); }
.quiz__opt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg); font: inherit; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.quiz__opt:hover { border-color: var(--line-strong); }
.quiz__opt.is-correct { border-color: var(--ok); background: rgba(61, 220, 132, 0.1); }
.quiz__opt.is-wrong { border-color: var(--bad); background: rgba(255, 90, 101, 0.1); }
.quiz__opt[disabled] { cursor: default; }
.quiz__key { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-faint); padding-top: 0.2em; }
.quiz__result { font-size: var(--t-xs); font-weight: 600; color: var(--fg-dim); }
.reflect { display: grid; gap: var(--s-2); }
.reflect details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.reflect summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 500; list-style: none; }
.reflect summary::-webkit-details-marker { display: none; }
.reflect .reflect__body { padding: 0 var(--s-4) var(--s-3); color: var(--fg-dim); font-size: var(--t-sm); }

/* ---- Tools ---- */
.tool-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.tool-card { display: grid; gap: var(--s-2); color: var(--fg); text-decoration: none; }
.tool-card:hover { border-color: var(--line-strong); background: var(--bg-2); text-decoration: none; }
.tool-layout { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .tool-layout { grid-template-columns: 1fr; } }
.tool-form { display: grid; gap: var(--s-3); }
.tool-form .field--inline .input { width: 9ch; text-align: right; }
.waterfall { display: grid; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.waterfall__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--fg-dim); }
.waterfall__row > span:last-child { font-family: var(--font-mono); color: var(--fg); }
.waterfall__row:last-child { border-bottom: 0; }
.waterfall__row--total { color: var(--fg); font-weight: 500; }
.waterfall__row--hero { color: var(--fg); font-weight: 600; font-size: var(--t-md); }
.waterfall__row--hero > span:last-child { color: var(--accent); }
.rating { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-5); }
.rating__num { font-size: 4.5rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.flashcard { display: grid; gap: var(--s-4); min-height: 220px; }
.flashcard__answer { line-height: 1.65; }
.report { font-family: var(--font-mono); font-size: var(--t-xs); white-space: pre-wrap; line-height: 1.6; color: var(--fg-dim); }

/* ---- Vault ---- */
.vault-group details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); margin-bottom: var(--s-2); }
.vault-group summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--s-3); }
.vault-group summary::-webkit-details-marker { display: none; }
.vault-group summary .pill { font-weight: 400; }
.vault-group .lesson-list { padding: 0 var(--s-3) var(--s-3); }