/* Learn it (js/learnit.js): Meet -> Recall -> Tell apart -> Done, rebuilt per DESIGN-SYSTEM.md §12.
   Everything here is scoped under .screen.learnit (the class every step's show() call carries, which also
   puts css/booth.css's grey surround on all four steps, Recall included, so the lesson never flips to black).
   One segmented bar runs the whole thing: a segment is grey (--rule-2-ish track) until its color is met,
   faint in its own color once met, solid once it's been recalled — no step word anywhere. A 20px gutter
   holds on every side; nothing here is full-bleed (DESIGN-SYSTEM §3: judged swatches keep grey all around). */

.screen.learnit{padding:calc(var(--top) + 8px) 20px calc(var(--bottom) + 12px)}

/* ---------- the shared head: ✕ + one bar for the whole lesson ---------- */
.screen.learnit .lt-head{flex:none;display:flex;align-items:center;gap:14px;height:44px;margin:0 0 4px -10px}
.screen.learnit .lt-head .icon-btn{color:var(--ink)}
.screen.learnit .segs{flex:1;display:flex;gap:3px}
.screen.learnit .segs i{flex:1;height:4px;border-radius:var(--r-1);background:rgba(0,0,0,.22);transition:background .35s ease}
.screen.learnit .segs i::after{content:none}   /* the deck's own scaleX fill trick: off here, we drive color via background */
.screen.learnit .segs i.met{background:color-mix(in srgb, var(--c) 55%, transparent)}
.screen.learnit .segs i.known,.screen.learnit .segs i.on{background:var(--c)}
/* Recall reuses deck()'s own header: every color has already been met by the time it opens, so the segs'
   default (no class yet) should read as "met", not "not yet seen" — only .lt-recall gets this default swap. */
.screen.learnit.lt-recall .segs i{background:color-mix(in srgb, var(--c) 55%, transparent)}
.screen.learnit.lt-recall .segs i.on{background:var(--c)}
.screen.learnit .deck-top #left{display:none}   /* no numeric countdown; the segmented bar is the only progress read */
.screen.learnit .deck-top{margin-bottom:4px}

/* ---------- type: serif carries it, mono only for hex/codes/counts (DESIGN-SYSTEM §4) ---------- */
.screen.learnit .lt-display{font:400 clamp(42px,13vw,76px)/.9 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.screen.learnit .lt-t1{font:400 clamp(30px,8.6vw,42px)/1.05 var(--serif);letter-spacing:-.02em;text-wrap:pretty}
.screen.learnit .lt-t1 em{font-style:italic}
.screen.learnit .lt-code{font:400 13px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.screen.learnit .lt-diff{font:400 26px/1.15 var(--serif);letter-spacing:-.01em;margin-top:16px;text-wrap:pretty;flex:none}
.screen.learnit .note{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin-top:10px}

/* ---------- the pager (Meet): one page fills the space under the head, swipe up or tap to continue ---------- */
.screen.learnit .lt-pager{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.screen.learnit .lt-pager::-webkit-scrollbar{display:none}
.screen.learnit .lt-page{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;cursor:pointer}

/* the cover: plates light to dark (no fan, no chip feet), the title, one note */
.screen.learnit .lt-cover{justify-content:flex-end;padding-bottom:12px;cursor:pointer}
.screen.learnit .lt-plates{display:flex;gap:2px;height:84px;flex:none;border-radius:var(--r-1,4px);overflow:hidden}
.screen.learnit .lt-plates i{flex:1;background:var(--c)}

/* the color card: flex:1, the name and hex set inside it (DESIGN-SYSTEM §10 "Lesson / deck card") */
.screen.learnit .lt-swatch{flex:1;min-height:160px;border-radius:var(--r-1,4px);background:var(--c);position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;overflow:hidden}
.screen.learnit .lt-swatch .lt-code{margin-top:10px}
.screen.learnit .lt-swatch[data-ink="dark"]{color:var(--paper-ink,#141311)}
.screen.learnit .lt-swatch[data-ink="light"]{color:#fff}

/* the compare strip: reuses .compare's layout (app.css) but serif, full-opacity ink — never reduced-opacity
   text on color (DESIGN-SYSTEM §3) and never mono caps for a name (§4) */
.screen.learnit .compare{margin-top:14px;flex:none}
.screen.learnit .compare div{font:400 17px/1 var(--serif);letter-spacing:-.005em;text-transform:none}
.screen.learnit .compare div[data-ink="dark"]{color:var(--paper-ink,#141311)}
.screen.learnit .compare div[data-ink="light"]{color:#fff}

.screen.learnit .lt-page-foot{display:flex;align-items:center;justify-content:space-between;height:52px;flex:none;margin-top:2px}
.screen.learnit .lt-up{display:flex;align-items:center;gap:6px;color:var(--soft)}
.screen.learnit .lt-up svg{width:18px;height:18px}
.screen.learnit .peek-btn{font:italic 400 17px/1 var(--serif);text-transform:none;letter-spacing:0;color:var(--soft);
  border-bottom:none;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;margin:0;padding:0}

/* ---------- Tell apart: pickBoard()'s own card, a serif note instead of its default mono eyebrow ---------- */
.screen.learnit .pi-q .eyebrow,
.screen.learnit .pi-hint{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--paper-soft)}
.screen.learnit footer.deck-foot.pi-foot .pi-hint{color:var(--soft)}

/* ---------- Done: calm, still on grey, one way out ---------- */
.screen.learnit .lt-done-pal{display:flex;gap:3px;height:22%;min-height:96px;flex:none;border-radius:var(--r-1,4px);overflow:hidden}
.screen.learnit .lt-done-pal i{flex:1;background:var(--c)}
.screen.learnit .lt-t1{margin-top:22px}
.screen.learnit .lt-rows{margin-top:18px;border-top:1px solid var(--rule)}
.screen.learnit .lt-row{display:flex;align-items:center;gap:12px;height:50px;border-bottom:1px solid var(--rule)}
.screen.learnit .lt-row .pair{margin-top:0}
.screen.learnit .lt-row-n{font:400 22px/1.12 var(--serif);letter-spacing:-.01em}
.screen.learnit .lt-row .note{margin-top:0;margin-left:auto}
.screen.learnit .lt-done-note{margin-top:14px}

/* the one paper-filled primary button (DESIGN-SYSTEM §10): none of the app's existing .btn variants match
   this shape yet, so Learn it carries its own until the system-wide button lands everywhere else */
.screen.learnit .lt-primary{display:flex;align-items:center;justify-content:space-between;width:100%;height:58px;flex:none;
  padding:0 22px 0 26px;border:0;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);
  font:400 27px/1 var(--serif);letter-spacing:-.015em;transition:opacity .2s}
.screen.learnit .lt-primary:active{opacity:.7}
.screen.learnit .lt-primary svg{width:20px;height:20px;flex:none;color:var(--paper-ink)}

@media (max-height:700px){
  .screen.learnit .lt-plates{height:64px}
  .screen.learnit .lt-diff{font-size:22px;margin-top:12px}
  .screen.learnit .lt-swatch{min-height:120px;padding:16px}
}

/* landscape lane (2026-10-09): a rotated phone is ~390-440px tall, shorter than the max-height:700px case
   above was tuned for, and it's wide now instead -- the swatch can give up some of its own height (it has
   width to spare) so the name, the diff line and Next all stay above the fold with nothing to scroll past. */
@media (orientation:landscape){
  .screen.learnit{padding-top:calc(var(--top) + 4px);padding-bottom:calc(var(--bottom) + 4px)}
  .screen.learnit .lt-head{margin-bottom:0}
  .screen.learnit .lt-swatch{min-height:96px;padding:14px}
  .screen.learnit .lt-display{font-size:clamp(30px,7vw,46px)}
  .screen.learnit .lt-t1{font-size:clamp(22px,5vw,30px)}
  .screen.learnit .lt-diff{font-size:22px;margin-top:10px}
  .screen.learnit .lt-plates{height:44px}
  .screen.learnit .lt-page-foot{height:40px;margin-top:0}
  .screen.learnit .note{margin-top:4px}
}