/* ============================================================
   THE LEARNING STREAM
   A lesson is one continuous vertical column. Blocks reveal as the
   learner progresses; completed blocks stay on screen so the learner
   can look back without navigating anywhere.
   ============================================================ */

/* The lesson column. There is deliberately no vertical rail and no timeline
   dots: the sticky header's progress bar is the learner's single, honest
   progress indicator, and the column reads as an editorial page rather than
   a checklist. Nothing reserves a left gutter, so the content is genuinely
   centred at every width. */
.stream {
  position: relative;
  width: min(100% - 2.5rem, var(--read-wide));
  margin-inline: auto;
  padding: clamp(var(--s6), 5vw, var(--s8)) 0 60vh;   /* tail space so the last block can centre */
}

@media (min-width: 1200px) {
  /* A wide monitor gets a little more air around the column rather than a
     longer line of text: the reading measure inside stays the same. */
  .stream { width: min(100% - 6rem, var(--read-wide)); }
}

/* ---- A block ------------------------------------------------------- */
.blk {
  position: relative;
  margin: 0 0 clamp(var(--s6), 4.5vw, var(--s8));
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.blk[hidden] { display: none !important; }

/* Locked blocks are present in the DOM (so scroll height is stable) but
   visually and semantically sealed until unlocked. No layout shift. */
.blk.is-locked { opacity: 0; pointer-events: none; height: 0; overflow: hidden; margin: 0; }

.blk.is-revealed { animation: blk-in var(--d-slow) var(--e-out) both; }
@keyframes blk-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Section heading inside the stream ---- */
.blk-section {
  padding-top: var(--s5);
}
.blk-section h2 { margin-bottom: var(--s2); }
.blk-section .sec-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: var(--s3);
}
.blk-section .sec-kicker::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--accent);
}

/* ---- Prose block: long explanations get an OPAQUE, wide, calm surface.
   Paragraphs never get squeezed into tiny cards.                       */
.prose {
  width: min(100%, var(--read));
  margin-inline: auto;
  font-size: var(--t-md);
  color: var(--ink-800);
}
.prose h3 { margin-bottom: var(--s2); }
.prose .es { white-space: normal; }

/* ---- Hook: the scene that opens a micro-topic ---- */
.hook { display: grid; gap: var(--s4); }
@media (min-width: 720px) {
  .hook.hook-split { grid-template-columns: 1.05fr .95fr; align-items: center; }
}
.hook h3 { margin-bottom: var(--s2); }
.hook .hook-q {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-lg);
  color: var(--ink-900);
}
/* The Spanish line the learner is asked to guess at, with its audio button,
   sits in its own tinted slab so it reads as the object of the question. */
.hook .hook-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 9%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.hook .hook-line .es { flex: 1 1 12rem; line-height: 1.35; }
@media (max-width: 560px) {
  /* On a phone the Spanish runs to several lines, and a button floating
     against the middle of it reads as an accident. Put it underneath. */
  .hook .hook-line { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .hook .hook-line .es { flex: none; }
}

/* ---- Rule card: the one-sentence explanation ---- */
.rulecard {
  position: relative;
  padding: clamp(var(--s4), 3vw, var(--s5));
  border-radius: var(--r-lg);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 14%, white) 0%,
      color-mix(in srgb, var(--accent-2) 12%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: var(--sh-1);
}
.rulecard .rule-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  margin-bottom: var(--s2);
}
.rulecard .rule-body { font-size: var(--t-lg); font-weight: 700; color: var(--ink-900); line-height: 1.44; }
.rulecard .rule-body .es { color: var(--accent-ink); }

/* ---- Memory trick ---- */
.trick {
  border-left: 5px solid var(--accent);
  background: rgba(255,255,255,.72);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh-1);
}
.trick .trick-tag {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  display: block; margin-bottom: 4px;
}
.trick .trick-limit {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px dashed var(--glass-edge);
  font-size: var(--t-sm); color: var(--ink-600);
}
.trick .trick-limit strong { color: var(--ink-800); }

/* ---- Right / wrong contrast pair ---- */
.contrast { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .contrast { grid-template-columns: 1fr 1fr; } }
.contrast .cx {
  padding: var(--s4); border-radius: var(--r-md); border: 1px solid;
}
.contrast .cx-good { background: var(--ok-soft); border-color: var(--ok-line); }
.contrast .cx-bad  { background: var(--bad-soft); border-color: var(--bad-line); }
.contrast .cx-mark {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.contrast .cx-good .cx-mark { color: #0a6a48; }
.contrast .cx-bad  .cx-mark { color: #8f1730; }
.contrast .cx-sentence { font-family: var(--font-display); font-weight: 800; font-size: var(--t-lg); color: var(--ink-900); }
.contrast .cx-bad .cx-sentence { text-decoration: line-through; text-decoration-color: rgba(214,43,76,.5); text-decoration-thickness: 2px; }
.contrast .cx-why { font-size: var(--t-sm); color: var(--ink-700); margin-top: 6px; }

/* ---- Dialogue ---- */
.dialogue { display: grid; gap: var(--s3); }
.dline { display: flex; gap: var(--s3); align-items: flex-start; }
.dline.is-right { flex-direction: row-reverse; }
.dline .d-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-sm); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: var(--sh-1);
}
.dline.is-right .d-av { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.dline .d-bub {
  max-width: 78%; padding: var(--s3) var(--s4);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 6px;
  background: rgba(255,255,255,.86); border: 1px solid var(--glass-edge);
  box-shadow: var(--sh-1);
}
.dline.is-right .d-bub {
  border-radius: var(--r-md) var(--r-md) 6px var(--r-md);
  background: color-mix(in srgb, var(--accent) 12%, white);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.dline .d-name { font-size: var(--t-xs); font-weight: 800; color: var(--ink-600); margin-bottom: 2px; }
.dline .d-es { font-family: var(--font-display); font-weight: 800; color: var(--ink-900); }
.dline .d-en { font-size: var(--t-sm); color: var(--ink-600); margin-top: 3px; }
.dline .d-en[hidden] { display: none; }

/* Chat-style (texting) variant used in technology / social units */
.dialogue.as-chat .d-bub { border-radius: 20px; }
.dialogue.as-chat .d-av { display: none; }
.dialogue.as-chat .dline { padding-inline: 4px; }

/* ---- Vocabulary grid: picture first, English on demand ---- */
.vocabgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.vocab {
  display: grid; gap: var(--s2); padding: var(--s3);
  border-radius: var(--r-md); background: rgba(255,255,255,.78);
  border: 1px solid var(--glass-edge); box-shadow: var(--sh-1);
  text-align: center;
}
.vocab .v-es { font-family: var(--font-display); font-weight: 800; font-size: var(--t-md); color: var(--accent-ink); }
.vocab .v-en { font-size: var(--t-sm); color: var(--ink-600); }
.vocab .v-en[hidden] { display: none; }
.vocab .v-actions { display: flex; gap: 6px; justify-content: center; }
.vocab .v-reveal {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--t-xs); color: var(--accent-deep); font-weight: 800;
  text-decoration: underline; text-underline-offset: 2px; padding: 4px 6px;
}

/* ---- Reference table (offered AFTER the pattern is discovered) ---- */
.conj {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(255,255,255,.8); border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--glass-edge); font-size: var(--t-sm);
}
.conj th, .conj td { padding: 10px var(--s3); text-align: left; }
.conj thead th {
  background: color-mix(in srgb, var(--accent) 14%, white);
  font-family: var(--font-display); font-weight: 800; color: var(--accent-ink);
  font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase;
}
.conj tbody tr + tr td { border-top: 1px solid var(--glass-edge); }
.conj td.c-form { font-family: var(--font-display); font-weight: 800; color: var(--ink-900); }
.conj td.c-form em { font-style: normal; color: var(--accent-deep); }
.conj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
details.ref > summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 800;
  color: var(--accent-deep); font-size: var(--t-sm); padding: var(--s2) 0;
  list-style: none;
}
details.ref > summary::-webkit-details-marker { display: none; }
details.ref > summary::before { content: "▸ "; display: inline-block; transition: transform var(--d-fast); }
details.ref[open] > summary::before { content: "▾ "; }

/* ---- Timeline (preterite vs imperfect) ---- */
.timeline { position: relative; padding: var(--s5) var(--s4) var(--s4); }
.tl-track {
  position: relative; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, white), var(--accent));
  margin: var(--s6) 0 var(--s5);
}
.tl-band {
  position: absolute; height: 26px; top: -11px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-2) 32%, white);
  border: 1px dashed color-mix(in srgb, var(--accent-2) 70%, transparent);
  display: grid; place-items: center;
  font-size: var(--t-xs); font-weight: 800; color: var(--accent-ink);
}
.tl-snap {
  position: absolute; top: -20px; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--white); border: 2px solid var(--accent);
  box-shadow: var(--sh-2);
}
.tl-legend { display: grid; gap: var(--s2); font-size: var(--t-sm); }
.tl-legend div { display: flex; gap: var(--s2); align-items: flex-start; }
.tl-key { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: 4px; }

/* ---- Culture note ---- */
.culture {
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,.8), color-mix(in srgb, var(--accent-2) 12%, white));
  border: 1px solid var(--glass-edge); box-shadow: var(--sh-1);
}
.culture .cu-tag {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.culture .cu-where { font-size: var(--t-xs); color: var(--ink-600); margin-top: var(--s2); font-style: italic; }

/* ---- Checkpoint wrapper ---- */
.checkpoint {
  border-radius: var(--r-xl);
  padding: clamp(var(--s4), 3vw, var(--s6));
  background: linear-gradient(160deg, rgba(255,255,255,.86), color-mix(in srgb, var(--accent) 10%, white));
  border: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: var(--sh-2);
}
.checkpoint .cp-head {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4);
}
.checkpoint .cp-badge {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: var(--sh-1);
}

/* ---- Continue affordance between micro-topics ---- */
.continue-slab { display: grid; place-items: center; gap: var(--s3); padding: var(--s5) 0; text-align: center; }
.continue-slab .cs-msg { font-family: var(--font-display); font-weight: 800; font-size: var(--t-lg); color: var(--ink-900); }

/* Long teaching examples wrap; reference tables scroll within the lesson. */
.stream-item, .ref, .conj-scroll { min-width: 0; max-width: 100%; }
.stream .chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.conj-scroll { width: 100%; }
.ref { overflow: hidden; }