/* ==========================================================================
   Pocket Studio Academy — application styles
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, canvas { display: block; max-width: 100%; }

/* Inline icons carry no width/height attributes, and an SVG with no intrinsic
   size falls back to 300x150 — which is how a breadcrumb chevron ends up the
   size of a house. Give those a text-relative default; anything that sets its
   own size (the progress ring, the brand mark) has a width attribute and is
   excluded. Component rules later in this file still win on equal specificity. */
svg { max-width: 100%; }
svg:not([width]) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.15em;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-dim); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--accent); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md); font-weight: 600;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

.gradient-text {
  background: linear-gradient(100deg, var(--text) 10%, var(--accent-soft) 55%, var(--cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- App shell ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: var(--tracking-tight); font-size: var(--text-md);
  white-space: nowrap;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--accent), var(--cyan) 70%, var(--green));
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(124, 108, 240, 0.35);
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-sub { color: var(--text-3); font-weight: 500; font-size: var(--text-sm); }

.topbar-spacer { flex: 1; }

.topbar-actions { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  /* flex: none for the same reason .search-trigger has it — these sit in the topbar
     flex row, and `width` is not a flex basis. Without it, a narrow phone shrinks the
     menu button to a 2px sliver: the drawer becomes unopenable on the exact devices
     this course is meant to be read on. */
  width: 36px; height: 36px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* Signed-in account, top right. The avatar is an initial rather than the Google profile
   photo on purpose: the photo lives on googleusercontent.com, and fetching it would put a
   third-party request on every page view of a course that otherwise makes none. The email
   itself is shown beside it wherever there is room. */
.account-wrap { position: relative; flex: none; }
.account-wrap[hidden] { display: none; }
.account-chip {
  display: flex; align-items: center; gap: var(--s-2); flex: none;
  height: 36px; padding: 0 var(--s-2) 0 2px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  max-width: 220px; overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.account-signin {
  height: 36px; padding: 0 var(--s-4); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-2); white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.account-signin:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
.account-signin[hidden] { display: none; }
/* Google renders into this; it is a positioning anchor only and must never take space. */
#account-gis { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
  width: 268px; padding: var(--s-4);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.account-menu[hidden] { display: none; }
.account-menu .id { display: flex; align-items: center; gap: var(--s-3); }
.account-menu .id .account-avatar { width: 40px; height: 40px; font-size: 16px; }
.account-menu .nm { font-weight: 600; line-height: 1.25; }
/* Addresses are long and have no spaces, so they need an explicit break opportunity or
   they push the menu wider than the viewport on a phone. */
.account-menu .em {
  font-size: var(--text-xs); color: var(--text-3); overflow-wrap: anywhere;
}
.account-menu .sep { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-4) 0; }
.account-menu .item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 40px; padding: 0 var(--s-3);
  border-radius: var(--r-md); color: var(--text-2); font-size: var(--text-sm);
  text-align: left; transition: background var(--t-fast), color var(--t-fast);
}
.account-menu .item:hover { background: var(--surface-2); color: var(--text); }
.account-menu .note { font-size: var(--text-xs); color: var(--text-3); line-height: 1.5; }
.account-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.account-chip[hidden] { display: none; }
/* The photo sits on top of the gradient+initial, so a blocked image degrades to the letter
   rather than to an empty circle. */
.account-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.account-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--cyan) 75%);
}
.account-who {
  font-size: var(--text-xs); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn svg { width: 18px; height: 18px; }

.search-trigger {
  display: flex; align-items: center; gap: var(--s-3);
  height: 36px; padding: 0 var(--s-3) 0 var(--s-3);
  min-width: 210px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-3);
  font-size: var(--text-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-2); }
.search-trigger svg { width: 15px; height: 15px; flex: none; }
.search-trigger .kbd { margin-left: auto; }

.kbd {
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  padding: 4px 6px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-3);
}

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  max-width: var(--shell-max);
  margin: 0 auto;
  align-items: start;
}
.shell.no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: var(--s-6) var(--s-3) var(--s-16) var(--s-5);
  border-right: 1px solid var(--border-subtle);
}

.sidebar-progress {
  padding: var(--s-4); margin-bottom: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  display: flex; align-items: center; gap: var(--s-4);
}
.sidebar-progress .meta { min-width: 0; }
.sidebar-progress .n {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; line-height: 1.1;
}
.sidebar-progress .l { font-size: var(--text-xs); color: var(--text-3); }

.nav-part { margin-bottom: var(--s-2); }
.nav-part-head {
  width: 100%; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  text-align: left; color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-part-head:hover { background: var(--surface-2); color: var(--text); }
.nav-part-head .chev {
  width: 14px; height: 14px; flex: none; color: var(--text-3);
  transition: transform var(--t-base) var(--ease-out);
}
.nav-part[data-open='true'] .chev { transform: rotate(90deg); }
.nav-part-num {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-3);
}
.nav-part[data-accent] .nav-part-num { color: var(--part-accent); }
.nav-part-title {
  font-size: var(--text-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-part-count { margin-left: auto; font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }

.nav-lessons {
  display: none;
  margin: var(--s-1) 0 var(--s-3) 0;
  padding-left: calc(var(--s-3) + 10px);
  border-left: 1px solid var(--border-subtle);
  margin-left: calc(var(--s-3) + 9px);
}
.nav-part[data-open='true'] .nav-lessons { display: block; }

.nav-lesson {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  font-size: var(--text-sm); color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-lesson:hover { background: var(--surface-2); color: var(--text); }
.nav-lesson.active {
  background: var(--accent-dim); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-lesson .tick {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
}
.nav-lesson.done .tick { background: var(--green); border-color: var(--green); }
.nav-lesson.done .tick svg { width: 9px; height: 9px; color: #04120a; }
.nav-lesson .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-lesson .lock { width: 12px; height: 12px; margin-left: auto; color: var(--text-3); flex: none; }

/* ---- Main --------------------------------------------------------------- */
.main { min-width: 0; padding: var(--s-8) var(--s-8) var(--s-24); }
.page { animation: fade-up var(--t-slow) var(--ease-out) both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-5);
  border-radius: var(--r-md); font-size: var(--text-base); font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast),
    border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--cyan)));
  color: #fff;
  box-shadow: 0 2px 14px rgba(124, 108, 240, 0.32);
}
.btn-primary:hover { box-shadow: 0 4px 22px rgba(124, 108, 240, 0.44); }

.btn-ghost { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }

.btn-quiet { color: var(--text-2); }
.btn-quiet:hover { color: var(--text); background: var(--surface-2); }

.btn-sm { height: 34px; padding: 0 var(--s-4); font-size: var(--text-sm); }
.btn-lg { height: 50px; padding: 0 var(--s-6); font-size: var(--text-md); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge svg { width: 11px; height: 11px; }
.badge-free { background: var(--green-dim); color: var(--green); }
.badge-paid { background: var(--amber-dim); color: var(--amber); }
.badge-accent { background: var(--accent-dim); color: var(--accent-soft); }
.badge-neutral { background: var(--surface-3); color: var(--text-3); }

/* ---- Progress ring ------------------------------------------------------ */
.ring { position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); overflow: visible; }
.ring .track { stroke: var(--surface-3); }
.ring .bar {
  stroke: var(--part-accent, var(--accent));
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.ring .lbl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  color: var(--text-2);
}

/* ---- Home: hero --------------------------------------------------------- */
.hero { position: relative; padding: var(--s-16) 0 var(--s-12); overflow: hidden; }
.hero-glow {
  position: absolute; top: -280px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 560px; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(124, 108, 240, 0.24), transparent 72%);
  filter: blur(18px);
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw, var(--text-5xl));
  letter-spacing: var(--tracking-tighter);
  max-width: 17ch; margin-bottom: var(--s-5);
}
.hero-lede {
  font-size: var(--text-lg); color: var(--text-2);
  max-width: 56ch; line-height: var(--leading-relaxed); margin-bottom: var(--s-8);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-10); }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-3); max-width: 760px;
}
.stat {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
}
.stat .v {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; line-height: 1; letter-spacing: var(--tracking-tight);
}
.stat .k { font-size: var(--text-xs); color: var(--text-3); margin-top: 5px; }

/* ---- Continue card ------------------------------------------------------ */
.continue {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-12);
  border-radius: var(--r-xl);
  border: 1px solid var(--accent-line);
  background:
    linear-gradient(120deg, var(--accent-dim), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-md);
}
.continue .body { flex: 1; min-width: 220px; }
.continue .eyebrow { margin-bottom: var(--s-2); }
.continue h3 { font-size: var(--text-xl); margin-bottom: var(--s-1); }
.continue p { color: var(--text-2); font-size: var(--text-sm); }

/* ---- Section heads ------------------------------------------------------ */
.section { margin-bottom: var(--s-16); }
.section-head { margin-bottom: var(--s-6); }
.section-head h2 {
  font-size: var(--text-2xl); margin-top: var(--s-2); margin-bottom: var(--s-2);
}
.section-head p { color: var(--text-2); max-width: 62ch; }

/* ---- Part cards --------------------------------------------------------- */
.part-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.part-card {
  position: relative; display: block; overflow: hidden;
  padding: var(--s-6); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--surface);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base),
    box-shadow var(--t-base);
}
.part-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--part-accent), transparent 70%);
  opacity: 0.85;
}
.part-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--part-accent) 40%, var(--border));
  box-shadow: var(--shadow-lg);
}
.part-card-top { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.part-icon {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--part-accent) 14%, transparent);
  color: var(--part-accent);
}
.part-icon svg { width: 20px; height: 20px; }
.part-card h3 { font-size: var(--text-lg); margin-bottom: 3px; }
.part-card .tagline { font-size: var(--text-sm); color: var(--part-accent); font-weight: 500; }
.part-card .blurb {
  color: var(--text-2); font-size: var(--text-sm);
  line-height: var(--leading-normal); margin-bottom: var(--s-5);
}
.part-card-foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-3);
}
.part-card-foot .sep { color: var(--border-strong); }
.part-card-foot .ring { margin-left: auto; }

/* A part whose lessons are not written yet reads as clearly unfinished
   rather than quietly showing "0 lessons". */
.part-card.pending { opacity: 0.72; }
.part-card.pending::before { opacity: 0.3; }

/* ---- Lesson list (part page) -------------------------------------------- */
.lesson-list { display: flex; flex-direction: column; gap: var(--s-2); }
.lesson-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out),
    background var(--t-fast);
}
.lesson-row:hover {
  border-color: var(--border-strong); transform: translateX(3px);
  background: var(--surface-2);
}
.lesson-row .idx {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text-3); width: 34px; flex: none;
}
.lesson-row .body { flex: 1; min-width: 0; }
.lesson-row h4 { font-size: var(--text-base); font-weight: 600; margin-bottom: 2px; }
.lesson-row p {
  font-size: var(--text-sm); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lesson-row .meta { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.lesson-row .mins { font-size: var(--text-xs); color: var(--text-3); font-family: var(--font-mono); }
.lesson-row .state {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
}
.lesson-row.done .state { background: var(--green); border-color: var(--green); }
.lesson-row.done .state svg { width: 12px; height: 12px; color: #04120a; }

/* ---- Lesson page -------------------------------------------------------- */
.lesson-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--s-10); }
.lesson-main { min-width: 0; max-width: var(--prose-max); }

.lesson-head { margin-bottom: var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--border-subtle); }
.lesson-crumbs {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.lesson-crumbs svg { width: 12px; height: 12px; opacity: 0.6; }
/* The crumb text is small by design, but the LINK still has to be reliably tappable — it
   measured 20px tall, under the 24px minimum. Pad the box, not the type. Same fix as the
   footer nav. (Only caught once lessons became real URLs and the layout audit could reach
   them; as hash routes they were never measured.) */
.lesson-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.lesson-crumbs a:hover { color: var(--text-2); }
.lesson-head h1 {
  font-size: clamp(1.75rem, 4.5vw, var(--text-3xl));
  letter-spacing: var(--tracking-tighter); margin-bottom: var(--s-4);
}
.lesson-meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-3); }
.lesson-summary {
  font-size: var(--text-lg); color: var(--text-2);
  line-height: var(--leading-relaxed); margin-top: var(--s-5);
}

/* ---- Prose -------------------------------------------------------------- */
.prose { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-2); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 {
  font-size: var(--text-xl); color: var(--text);
  margin-top: var(--s-12); margin-bottom: var(--s-4);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.prose h3 {
  font-size: var(--text-lg); color: var(--text);
  margin-top: var(--s-8); margin-bottom: var(--s-3);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { font-style: italic; }
.prose a:not(.gloss) {
  color: var(--accent-soft); text-decoration: underline;
  text-decoration-color: var(--accent-line); text-underline-offset: 3px;
}
.prose a:not(.gloss):hover { text-decoration-color: var(--accent); }
.prose ul, .prose ol { padding-left: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.prose li::marker { color: var(--text-3); }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose blockquote {
  border-left: 3px solid var(--accent-line); padding-left: var(--s-5);
  color: var(--text-2); font-style: italic;
}
.prose code:not(pre code) {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--border-subtle);
  color: var(--text);
  /* NOT `white-space: nowrap`. Lessons legitimately inline whole statements — 6.8 has
     `Text("Tells me which habit I skipped today.")`, which is 362px wide — and an
     unbreakable span longer than the viewport scrolls the ENTIRE page sideways on a phone.
     break-word only breaks when the span cannot fit, so short snippets still read as one
     unit. (Fenced blocks keep their own horizontal scroller; this rule excludes them.) */
  overflow-wrap: break-word;
}
.prose hr { border: none; border-top: 1px solid var(--border); margin: var(--s-10) 0; }

.prose table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.prose th, .prose td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.prose th { background: var(--surface-2); color: var(--text); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: none; }

/* ---- Glossary chip ------------------------------------------------------ */
.gloss {
  color: var(--text); font-weight: 500; cursor: help;
  border-bottom: 1px dashed color-mix(in srgb, var(--cyan) 60%, transparent);
  transition: background var(--t-fast), border-color var(--t-fast);
  border-radius: 3px; padding: 0 1px;
}
.gloss:hover, .gloss[aria-expanded='true'] {
  background: var(--cyan-dim);
  border-bottom-color: var(--cyan);
}
.gloss-missing { border-bottom-color: var(--red); }

.gloss-pop {
  position: absolute; z-index: 120; width: min(340px, calc(100vw - 32px));
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-2);
  animation: pop-in 160ms var(--ease-out) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.gloss-pop h5 {
  font-family: var(--font-display); font-size: var(--text-base);
  color: var(--text); margin-bottom: var(--s-2);
}
.gloss-pop .ex {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3);
  /* Same reason as .gloss-entry .ex — the popover is narrower still. */
  overflow-wrap: anywhere;
}
.gloss-pop .more { display: inline-block; margin-top: var(--s-3); font-size: var(--text-xs); color: var(--accent-soft); }

/* ---- Directive blocks --------------------------------------------------- */
.block {
  position: relative; margin: var(--s-8) 0;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: var(--surface); padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--block-accent, var(--accent));
}
.block-head {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  color: var(--text);
}
.block-head .ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--block-accent) 15%, transparent);
  color: var(--block-accent);
}
.block-head .ico svg { width: 15px; height: 15px; }
.block-head .tag {
  margin-left: auto; font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 500; color: var(--text-3);
}
.block > .body { font-size: var(--text-base); }
.block > .body > * + * { margin-top: var(--s-3); }
.block ul, .block ol { padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }

.block-analogy { --block-accent: var(--cyan); background: linear-gradient(100deg, var(--cyan-dim), transparent 55%), var(--surface); }
.block-tryit { --block-accent: var(--green); background: linear-gradient(100deg, var(--green-dim), transparent 55%), var(--surface); }
.block-error { --block-accent: var(--red); }
.block-tip { --block-accent: var(--accent); }
.block-warning { --block-accent: var(--amber); background: linear-gradient(100deg, var(--amber-dim), transparent 55%), var(--surface); }
.block-recap { --block-accent: var(--gold); }
.block-note { --block-accent: var(--text-3); }

/* Try-it steps get phone-tap styling.
   The counter is reset on the BLOCK, not on each <ol>. A code fence in the
   middle of a Try It list splits it into two <ol> elements, and resetting per
   list made the steps after the code restart at 1. Resetting once per block
   lets the numbering run continuously across the interruption. */
.block-tryit .body { counter-reset: step; }
.tryit-steps { list-style: none; padding-left: 0 !important; }
.tryit-steps > li {
  position: relative; padding-left: calc(var(--s-8) + 4px); counter-increment: step;
  min-height: 26px;
}
.tryit-steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--green-dim); color: var(--green);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
}

/* ---- Error Doctor ------------------------------------------------------- */
.err-item { border-top: 1px solid var(--border-subtle); padding-top: var(--s-4); margin-top: var(--s-4); }
.err-item:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.err-msg {
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--code-bg); border: 1px solid var(--red-dim);
  border-left: 3px solid var(--red);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  color: #f4a3a7; overflow-x: auto; white-space: pre-wrap;
  word-break: break-word; margin-bottom: var(--s-3);
}
:root[data-theme='light'] .err-msg { color: #a5262d; }
.err-row { display: flex; gap: var(--s-3); font-size: var(--text-sm); margin-top: var(--s-2); }
.err-row .k {
  flex: none; width: 62px; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-3); padding-top: 3px;
}
.err-row .v { color: var(--text-2); min-width: 0; }
.err-row.fix .k { color: var(--green); }

/* ---- Code blocks -------------------------------------------------------- */
.code {
  margin: var(--s-6) 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--code-border); background: var(--code-bg);
}
.code-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  background: var(--surface-2); border-bottom: 1px solid var(--code-border);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3);
}
.code-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: none; }
.code-head .file { color: var(--text-2); }
.code-head .lang {
  margin-left: auto; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: 10px;
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: var(--text-xs); color: var(--text-3);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.copy-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn.ok { color: var(--green); }

.code pre {
  margin: 0; padding: var(--s-4) 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-sm);
  line-height: 1.7; tab-size: 2;
}
.code-line { display: block; padding: 0 var(--s-5) 0 0; position: relative; }
.code-line .ln {
  display: inline-block; width: 3ch; margin-right: var(--s-4);
  padding-left: var(--s-4);
  color: var(--code-gutter); text-align: right;
  user-select: none; -webkit-user-select: none; font-size: var(--text-xs);
}
.code-line.hl { background: var(--code-hl); box-shadow: inset 2px 0 0 var(--code-hl-line); }
.code-line.dim { opacity: 0.34; }
.code-line { transition: opacity var(--t-base), background var(--t-base); }

/* The 60-char guide: a hairline showing Pocket Studio's editor width. */
.code[data-guide='true'] pre { position: relative; }
.code[data-guide='true'] .code-guide {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--s-4) + 3ch + var(--s-4) + 60ch);
  width: 1px; background: var(--border-strong); opacity: 0.5; pointer-events: none;
}

/* Syntax */
.t-kw { color: var(--syn-keyword); font-weight: 500; }
.t-str { color: var(--syn-string); }
.t-num { color: var(--syn-number); }
.t-com { color: var(--syn-comment); font-style: italic; }
.t-fn { color: var(--syn-fn); }
.t-type { color: var(--syn-type); }
.t-ann { color: var(--syn-annot); }
.t-punct { color: var(--syn-punct); }
.t-txt { color: var(--code-text); }

/* ---- Walkthrough -------------------------------------------------------- */
.walk { margin: var(--s-8) 0; }
.walk-title {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4);
  font-family: var(--font-display); font-weight: 700; color: var(--text);
}
.walk-title .ico {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent-soft);
}
.walk-title .ico svg { width: 15px; height: 15px; }
.walk .code { margin-top: 0; margin-bottom: var(--s-4); }

.walk-panel {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.walk-step-body { padding: var(--s-5) var(--s-6); min-height: 92px; }
.walk-step-body h5 {
  font-family: var(--font-display); font-size: var(--text-base);
  color: var(--text); margin-bottom: var(--s-2);
}
.walk-step-body p { color: var(--text-2); font-size: var(--text-base); }
.walk-step-body .lines {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--accent-soft); margin-bottom: var(--s-2); display: block;
}
.walk-nav {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.walk-dots { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.walk-dot {
  width: 26px; height: 6px; border-radius: var(--r-full);
  background: var(--border-strong);
  transition: background var(--t-base), transform var(--t-base) var(--ease-out);
}
.walk-dot.on { background: var(--accent); transform: scaleY(1.4); }
.walk-dot.past { background: var(--accent-line); }
.walk-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }

/* ---- Quiz --------------------------------------------------------------- */
.quiz { margin: var(--s-8) 0; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.quiz-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(100deg, var(--accent-dim), transparent 60%);
}
.quiz-head .ico {
  width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent-soft);
}
.quiz-head .ico svg { width: 16px; height: 16px; }
.quiz-head h4 { font-size: var(--text-base); }
.quiz-head .n { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }

.quiz-q { padding: var(--s-6); border-top: 1px solid var(--border-subtle); }
.quiz-q:first-of-type { border-top: none; }
.quiz-kind {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--s-3);
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-3);
}
.quiz-prompt { font-size: var(--text-md); color: var(--text); font-weight: 500; margin-bottom: var(--s-4); }
.quiz-prompt code {
  font-family: var(--font-mono); font-size: 0.86em; padding: 2px 6px;
  border-radius: 5px; background: var(--surface-3); border: 1px solid var(--border-subtle);
}
.quiz-q .code { margin: var(--s-4) 0; }

.opts { display: flex; flex-direction: column; gap: var(--s-2); }
.opt {
  display: flex; align-items: flex-start; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-soft);
  text-align: left; font-size: var(--text-base); color: var(--text-2);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.opt:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.opt:active:not(:disabled) { transform: scale(0.995); }
.opt .mark {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  margin-top: 1px;
}
.opt .mark svg { width: 13px; height: 13px; }
.opt code { font-family: var(--font-mono); font-size: 0.9em; }
.opt.correct {
  border-color: var(--green); background: var(--green-dim); color: var(--text);
}
.opt.correct .mark { background: var(--green); border-color: var(--green); color: #04120a; }
.opt.wrong { border-color: var(--red); background: var(--red-dim); color: var(--text); }
.opt.wrong .mark { background: var(--red); border-color: var(--red); color: #fff; }
.opt:disabled { cursor: default; }
.opt.muted { opacity: 0.5; }

.fill-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.fill-input {
  font-family: var(--font-mono); font-size: var(--text-base);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--code-bg);
  color: var(--text); min-width: 200px; flex: 1;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.fill-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.fill-input.correct { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.fill-input.wrong { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-dim); }

.feedback {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md); font-size: var(--text-base);
  border: 1px solid var(--border); background: var(--bg-soft);
  animation: fade-up var(--t-base) var(--ease-out) both;
}
.feedback .h {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; margin-bottom: var(--s-2); font-family: var(--font-display);
}
.feedback .h svg { width: 16px; height: 16px; }
.feedback.ok { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: var(--green-dim); }
.feedback.ok .h { color: var(--green); }
.feedback.no { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--red-dim); }
.feedback.no .h { color: var(--red); }
.feedback p { color: var(--text-2); }
.feedback code {
  font-family: var(--font-mono); font-size: 0.88em; padding: 1px 5px;
  border-radius: 4px; background: var(--surface-3);
}

/* ---- Phone preview ------------------------------------------------------ */
.phone-wrap { margin: var(--s-8) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.phone-caption { font-size: var(--text-sm); color: var(--text-3); text-align: center; max-width: 48ch; }

.phone {
  width: 280px; height: 580px; flex: none; position: relative;
  border-radius: 38px; padding: 10px;
  background: linear-gradient(160deg, #2a2e3a, #14161c);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone::after {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 20px; border-radius: var(--r-full);
  background: #0a0b0f; z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 29px; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  background: #101318;
  font-family: var(--font-body);
}
.phone-status {
  height: 34px; flex: none; display: flex; align-items: flex-end;
  justify-content: space-between; padding: 0 18px 3px;
  font-size: 10px; color: rgba(255, 255, 255, 0.75); font-weight: 600;
}
.phone-body { flex: 1; overflow: hidden; position: relative; }
.phone-nav {
  height: 18px; flex: none; display: grid; place-items: center;
}
.phone-nav::before {
  content: ''; width: 100px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

/* ---- Checkpoint download ------------------------------------------------ */
.dl {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-8) 0; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--accent-dim), transparent 60%), var(--surface);
}
.dl .ico {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent-soft);
}
.dl .ico svg { width: 20px; height: 20px; }
.dl .body { flex: 1; min-width: 180px; }
.dl h4 { font-size: var(--text-base); margin-bottom: 2px; }
.dl p { font-size: var(--text-sm); color: var(--text-3); }

/* ---- Lesson footer ------------------------------------------------------ */
.lesson-foot {
  margin-top: var(--s-16); padding-top: var(--s-8);
  border-top: 1px solid var(--border-subtle);
}
.complete-bar {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6); border-radius: var(--r-xl);
  border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--s-6);
}
.complete-bar .body { flex: 1; min-width: 200px; }
.complete-bar h4 { font-size: var(--text-base); margin-bottom: 2px; }
.complete-bar p { font-size: var(--text-sm); color: var(--text-3); }
.complete-bar.done { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: linear-gradient(100deg, var(--green-dim), transparent 60%), var(--surface); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pager-link {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.pager-link:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pager-link .k { font-size: var(--text-xs); color: var(--text-3); margin-bottom: 3px; display: block; }
.pager-link .t { font-weight: 600; font-size: var(--text-base); color: var(--text); }
.pager-link.next { text-align: right; }
.pager-link.empty { visibility: hidden; }

/* ---- Right rail --------------------------------------------------------- */
.rail {
  position: sticky; top: calc(var(--topbar-h) + var(--s-8));
  align-self: start; font-size: var(--text-sm);
  max-height: calc(100vh - var(--topbar-h) - var(--s-16)); overflow-y: auto;
}
.rail h5 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-3); margin-bottom: var(--s-3); font-family: var(--font-body); font-weight: 600;
}
.rail a {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--text-3); border-left: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.rail a:hover { color: var(--text); background: var(--surface-2); }
.rail a.active { color: var(--accent-soft); border-left-color: var(--accent); }
.rail a.h3 { padding-left: var(--s-5); font-size: var(--text-xs); }

/* ---- Search overlay ----------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5, 6, 9, 0.66);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(8vh, var(--s-8)) var(--s-4) var(--s-8);
  animation: fade-in var(--t-base) var(--ease-out) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.overlay[hidden] { display: none; }

.search-panel {
  width: min(640px, 100%); max-height: 74vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: fade-up var(--t-base) var(--ease-out) both;
}
.search-field { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.search-field svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.search-field input {
  flex: 1; background: none; border: none; outline: none;
  font-size: var(--text-lg); color: var(--text);
}
.search-field input::placeholder { color: var(--text-3); }
.search-results { overflow-y: auto; padding: var(--s-2); }
.search-empty { padding: var(--s-10) var(--s-5); text-align: center; color: var(--text-3); font-size: var(--text-sm); }
.sr-item {
  display: block; width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.sr-item:hover, .sr-item.sel { background: var(--surface-2); }
.sr-item .top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 3px; }
.sr-item .id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-soft); }
.sr-item .t { font-weight: 600; color: var(--text); font-size: var(--text-base); }
.sr-item .snip {
  font-size: var(--text-sm); color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-item mark { background: var(--accent-dim); color: var(--accent-soft); border-radius: 3px; padding: 0 2px; }
.search-foot {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-3);
  background: var(--surface-2);
}

/* ---- Glossary page ------------------------------------------------------ */
.gloss-controls { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-6); }
.gloss-search {
  flex: 1; min-width: 220px; height: 42px; padding: 0 var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.gloss-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.gloss-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s-8); }
.gloss-letter {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-3); border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.gloss-letter:hover:not(:disabled) { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.gloss-letter:disabled { opacity: 0.25; }
.gloss-group { margin-bottom: var(--s-10); }
.gloss-group h3 {
  font-size: var(--text-xl); color: var(--accent-soft); margin-bottom: var(--s-4);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--topbar-h) + var(--s-4));
}
.gloss-entry { padding: var(--s-4) 0; border-bottom: 1px solid var(--border-subtle); }
.gloss-entry:last-child { border-bottom: none; }
.gloss-entry h4 { font-size: var(--text-md); margin-bottom: var(--s-2); }
.gloss-entry p { color: var(--text-2); font-size: var(--text-base); }
.gloss-entry .ex {
  margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--text-3); padding-left: var(--s-4); border-left: 2px solid var(--border);
  /* A glossary example is one unbroken token — context.getSystemService(NotificationManager
     ::class.java) has no space to wrap at — so normal wrapping cannot break it and it
     scrolled the whole glossary sideways on a phone. */
  overflow-wrap: anywhere;
}

/* ---- Achievements / profile --------------------------------------------- */
.ach-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ach {
  display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.ach.locked { opacity: 0.44; }
.ach.got { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); background: linear-gradient(120deg, var(--gold-dim), transparent 60%), var(--surface); }
.ach .ico {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-3);
}
.ach.got .ico { background: var(--gold-dim); color: var(--gold); }
.ach .ico svg { width: 20px; height: 20px; }
.ach h4 { font-size: var(--text-base); margin-bottom: 2px; }
.ach p { font-size: var(--text-xs); color: var(--text-3); }

.xp-bar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: var(--s-3) 0; }
.xp-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  transition: width 900ms var(--ease-out);
}

/* ---- Toast -------------------------------------------------------------- */
.toasts {
  position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: var(--s-2);
  align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm);
  animation: toast-in var(--t-slow) var(--ease-spring) both;
}
.toast .ico { width: 20px; height: 20px; flex: none; color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
.toast.out { animation: toast-out var(--t-base) var(--ease-in-out) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---- Footer ------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--border-subtle);
  padding: var(--s-8) var(--s-8) var(--s-10);
  margin-top: var(--s-16);
  color: var(--text-3); font-size: var(--text-sm);
}
.site-foot .inner { max-width: var(--shell-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: space-between; }
.site-foot .legal { max-width: 56ch; line-height: var(--leading-normal); }
.site-foot a { color: var(--text-2); }
.site-foot a:hover { color: var(--text); }
.site-foot nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
/* The link text is only 21px tall, which is under the 24px minimum for a reliable
   tap target. Pad the block axis rather than growing the font. */
.site-foot nav a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- Mobile drawer ------------------------------------------------------ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 79; background: rgba(5, 6, 9, 0.6);
  animation: fade-in var(--t-base) var(--ease-out) both;
}
.drawer-backdrop[hidden] { display: none; }
.menu-btn { display: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .lesson-wrap { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
}

@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: grid; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(320px, 86vw); height: 100vh;
    background: var(--bg-soft); border-right: 1px solid var(--border);
    transform: translateX(-102%);
    transition: transform var(--t-slow) var(--ease-out);
    padding-top: var(--s-5);
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .main { padding: var(--s-6) var(--s-5) var(--s-20); }
  /* flex: none — without it the button is squeezed by the flex row and the
     icon ends up in a narrow sliver instead of a square tap target. */
  .search-trigger {
    min-width: 36px; width: 36px; flex: none;
    padding: 0; justify-content: center;
  }
  .search-trigger span, .search-trigger .kbd { display: none; }
}

@media (max-width: 700px) {
  :root { --text-4xl: 2.25rem; --text-5xl: 2.5rem; }
  .hero { padding: var(--s-10) 0 var(--s-8); }
  .part-grid { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.empty { display: none; }
  .site-foot .inner { flex-direction: column; gap: var(--s-4); }
}

@media (max-width: 460px) {
  .main { padding: var(--s-5) var(--s-4) var(--s-16); }
  .block { padding: var(--s-4) var(--s-4); }
  .quiz-q { padding: var(--s-4); }
  .quiz-head { padding: var(--s-3) var(--s-4); }
  .code pre { font-size: 12px; }
  .code-line .ln { width: 2ch; margin-right: var(--s-2); padding-left: var(--s-2); }
  .phone { width: 240px; height: 500px; }
  .continue { padding: var(--s-4); }
  .lesson-row { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .lesson-row .idx { width: 28px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .brand-sub { display: none; }
  /* The topbar is a fixed-size flex row: menu + brand + search + three actions cannot
     fit 320px, and the overflow scrolled the whole page sideways. Tighten the chrome
     and drop the two controls that the drawer also carries. */
  .topbar { padding: 0 var(--s-3); gap: var(--s-3); }
  .topbar-extra { display: none; }
  .account-who { display: none; }
  .account-chip { padding: 0; border-color: transparent; background: none; }
  /* Last resort so no future brand string can reintroduce the overflow. */
  .brand { min-width: 0; overflow: hidden; }
  .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .err-row { flex-direction: column; gap: 2px; }
  .err-row .k { width: auto; }
  .site-foot { padding: var(--s-6) var(--s-4) var(--s-8); }
}

/* ---- Cheat sheet -------------------------------------------------------- */
.cs-head {
  display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap;
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--part-accent, var(--accent));
}
.cs-head > div { flex: 1; min-width: 220px; }
.cs-head h1 { font-size: var(--text-3xl); margin: var(--s-2) 0; }
.cs-head p { color: var(--text-2); font-size: var(--text-sm); }

.cs-body { columns: 2; column-gap: var(--s-8); }
@media (max-width: 900px) { .cs-body { columns: 1; } }

.cs-lesson {
  break-inside: avoid; margin-bottom: var(--s-6);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--border-subtle);
}
.cs-lesson h3 {
  font-size: var(--text-base); margin-bottom: var(--s-3);
  display: flex; align-items: baseline; gap: var(--s-2);
}
.cs-id {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--part-accent, var(--accent)); flex: none;
}
.cs-lesson ul { padding-left: var(--s-5); display: flex; flex-direction: column; gap: 5px; }
.cs-lesson li { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-snug); }
.cs-lesson .code { margin: var(--s-3) 0 0; break-inside: avoid; }
.cs-lesson .code pre { font-size: 11px; line-height: 1.55; padding: var(--s-3) 0; }

.cs-gloss { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 2px solid var(--border); }
.cs-gloss h2 { font-size: var(--text-xl); margin-bottom: var(--s-4); }
.cs-term {
  font-size: var(--text-sm); color: var(--text-2);
  padding: 5px 0; border-bottom: 1px solid var(--border-subtle);
  break-inside: avoid;
}
.cs-term strong { color: var(--text); }
.cs-foot { margin-top: var(--s-8); font-size: var(--text-xs); color: var(--text-3); }

/* ---- Print (cheat sheets) ----------------------------------------------- */
@media print {
  .topbar, .sidebar, .rail, .site-foot, .lesson-foot, .quiz, .walk-nav,
  .toasts, .no-print, .copy-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .shell { display: block; }
  .main { padding: 0; }
  .code, .block, .cs-lesson, .cs-term { break-inside: avoid; }

  /* Force the light palette so a printed sheet is not a wall of black ink. */
  :root {
    --bg: #fff; --bg-soft: #fff; --surface: #fff; --surface-2: #fff;
    --surface-3: #f2f2f4; --border: #d5d8de; --border-subtle: #e6e8ec;
    --border-strong: #b9bec7; --text: #000; --text-2: #26282e; --text-3: #55585f;
    --code-bg: #f7f8fa; --code-border: #d5d8de; --code-text: #14161d;
    --syn-keyword: #5b2f9c; --syn-string: #14602f; --syn-number: #8a4a08;
    --syn-comment: #5f6672; --syn-fn: #08557f; --syn-type: #7a5406;
    --syn-annot: #9c2a4f; --syn-punct: #4a505b;
  }
  .cs-body { columns: 2; }
  @page { margin: 14mm; }
}