/* Learn a set (js/learnset.js, design/LEARN-SET.md): the sheet, Look and Study. Tokens from DESIGN-SYSTEM, with fallbacks. */

/* ---------- the one Study/Learn primary button (js/learnset.js lsBtn): Next, Check, Start, Set it there ---------- */
.ls-primary{display:flex;align-items:center;justify-content:center;width:100%;height:52px;flex:none;border:0;
  border-radius:var(--r-2,14px);background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311);
  font:600 17px/1 var(--sans);letter-spacing:0;transition:opacity var(--dur-0,.12s) ease-out}
.ls-primary:active{opacity:.7}
.ls-primary:disabled{opacity:.35}

/* ---------- the sheet ---------- */
.ls-sheet .pr-qhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ls-from{display:flex;gap:8px;margin-top:12px}.ls-from:empty{display:none}
.ls-prev{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px!important;margin-top:14px;border-radius:0!important;overflow:visible!important}
.ls-prev i{aspect-ratio:1;border-radius:6px;animation:lsIn .28s var(--ease,ease) both;animation-delay:calc(var(--k) * 12ms);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ls-prev i:first-child{outline:2px solid var(--ink,#ECE8DF);outline-offset:2px}
@keyframes lsIn{from{transform:scale(.6);opacity:0}}
.ls-names{font:italic 400 17px/1.35 var(--serif);color:var(--soft);margin:10px 0 4px;min-height:44px;text-wrap:pretty}
.ls-say{min-height:72px;margin:10px 0 6px}.ls-say .ls-names{min-height:0;margin:0}
.ls-why{font:400 15px/1.35 var(--sans);color:var(--soft);margin:6px 0 0;text-wrap:pretty}.ls-why:empty{display:none}
.ls-slide{display:grid;grid-template-columns:92px 1fr 72px;align-items:center;gap:12px;min-height:52px}
.ls-slide[hidden]{display:none}
.ls-sl-t{font:400 18px/1.1 var(--serif);color:var(--ink)}
.ls-sl-v{font:400 18px/1 var(--serif);color:var(--ink);text-align:right;white-space:nowrap}
.ls-slide input{width:100%;height:44px;margin:0;accent-color:var(--paper,#EFEBE3);touch-action:pan-y}
.ls-closehint{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:-6px 0 6px 104px}
.ls-go{display:flex;gap:10px;margin-top:16px}
.ls-go .pr-primary{flex:1;width:auto}
.ls-look{flex:none;display:flex;align-items:center;gap:8px;height:58px;padding:0 22px;border-radius:999px;background:var(--surface-2,#1F1D18);border:1px solid rgba(236,232,223,.22);color:var(--ink);font:400 21px/1 var(--serif)}
.ls-look svg{width:20px;height:20px}
.ls-look:active{transform:scale(.97)}
.ls-typing{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;font:400 16px/1.3 var(--sans);color:var(--soft)}
.ls-typing input{width:20px;height:20px;accent-color:var(--paper,#EFEBE3)}
.ls-just{margin-top:10px}
.ls-just .pr-note{display:block;margin-bottom:8px}
@media (max-width:360px){.ls-slide{grid-template-columns:80px 1fr 64px}.ls-closehint{margin-left:0}.ls-look{padding:0 16px}}

/* ---------- Look ---------- */
.screen.ls-lookscr{display:flex;flex-direction:column;min-height:100dvh}
.ls-look-t{margin:4px 0 14px}
.ls-views{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pr-g,20px)) 14px;padding:0 var(--pr-g,20px)}
.ls-vb{flex:none;height:40px;padding:0 15px;border-radius:999px;background:var(--surface-2,#1F1D18);border:1px solid rgba(236,232,223,.14);color:var(--soft);font:400 17px/1 var(--serif)}
.ls-vb.on{background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311);border-color:transparent}
.ls-body{flex:1;animation:lsFade .25s var(--ease,ease)}
@keyframes lsFade{from{opacity:0;transform:translateY(6px)}}
.ls-foot{position:sticky;bottom:0;padding:16px 0 calc(var(--bottom,0px) + 8px);background:linear-gradient(to bottom,transparent,var(--ground,#141311) 20px)}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ls-tile{aspect-ratio:1;border-radius:var(--r-2,14px);background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:12px;text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ls-tile b{font:400 19px/1.08 var(--serif);overflow-wrap:anywhere}
.ls-tile .pr-code,.ls-band .pr-code,.ls-card .pr-code{opacity:.75}
.ls-tile:active,.ls-band:active{transform:scale(.97)}
.ls-seg2{display:flex;gap:8px;margin-bottom:12px}
.ls-strip{display:flex;flex-direction:column;border-radius:var(--r-2,14px);overflow:hidden}
.ls-band{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 16px;background:var(--c);text-align:left}
.ls-band b{font:400 20px/1.1 var(--serif)}
.ls-pairs{display:flex;flex-direction:column;gap:18px;margin-top:14px}
.ls-pair-sw{display:flex;height:96px;border-radius:var(--r-2,14px);overflow:hidden}
.ls-pair-sw button{flex:1;background:var(--c)}
.ls-pair-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:10px}
.ls-pair-t b{font:400 21px/1.1 var(--serif);color:var(--ink)}
.ls-pair p{font:400 16px/1.4 var(--sans);color:var(--soft);margin:4px 0 2px;text-wrap:pretty}
.ls-pair-d{font-size:14px}
.ls-map{display:block;width:100%;max-height:62vh;margin-top:10px}
.ls-map g{cursor:pointer}
.ls-map text{text-anchor:middle;dominant-baseline:middle;font-family:var(--serif)}
.ls-map polygon{stroke:var(--ground,#141311);stroke-width:.03}
.ls-bigmap{display:flex;align-items:center;gap:8px;justify-content:center}
.ls-bigmap svg{width:18px;height:18px}
.ls-art{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.ls-pt{display:flex;gap:12px;text-align:left;align-items:center}
.ls-pt img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-1,6px);flex:none;background:var(--surface-2,#1F1D18)}
.ls-pt-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ls-pt-t b{font:400 18px/1.15 var(--serif);color:var(--ink)}
.ls-pt-c{display:flex;align-items:center;gap:3px;margin-top:4px}
.ls-pt-c i{width:18px;height:18px;border-radius:4px;background:var(--c)}
.ls-pt-c em{font:italic 400 17px/1 var(--serif);color:var(--soft);margin-left:6px}
.ls-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pr-g,20px));padding:0 var(--pr-g,20px);scrollbar-width:none}
.ls-card{flex:none;width:calc(100% - 28px);min-height:min(62vh,520px);scroll-snap-align:center;border-radius:var(--r-3,22px);background:var(--c);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.ls-card b{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em}
.ls-card>.pr-code:first-child{margin-bottom:auto}
.ls-card p{display:flex;gap:10px;align-items:center;font:400 15px/1.35 var(--sans);margin:8px 0 0;opacity:.9}

/* ---------- Study ---------- */
.ls-study .pr-top{gap:10px}
.ls-prog{flex:1;display:flex;gap:3px;min-width:0}
.ls-prog i{flex:1;height:8px;border-radius:3px;background:rgba(0,0,0,.22);position:relative;overflow:hidden}
.ls-prog i::after{content:"";position:absolute;inset:0;background:var(--c);transform-origin:left;transform:scaleX(var(--lv,0));transition:transform .45s var(--spring,cubic-bezier(.3,1.4,.5,1))}
.ls-prog i.done{box-shadow:0 0 0 1.5px #fff}
.ls-combo{flex:none;opacity:0;transition:opacity .2s;display:flex;align-items:baseline;gap:4px;min-width:64px;justify-content:flex-end;color:var(--soft);font:italic 400 17px/1 var(--serif)}
.ls-combo b{font:400 20px/1 var(--mono);font-style:normal;color:var(--ink);transition:transform .2s}
.ls-combo.tick b{animation:lsTick .32s var(--spring,ease)}
.ls-combo.hot b{color:#FFD58A}
.ls-combo.fire b{color:#FF9E7A;text-shadow:0 0 12px rgba(255,140,90,.55)}
@keyframes lsTick{40%{transform:scale(1.45)}}
.ls-status{display:flex;align-items:center;gap:10px;justify-content:center;min-height:24px;margin:0;font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.ls-status .pr-code{font-size:13px;font-style:normal;color:var(--ink)}
.ls-pop{opacity:0;font:400 15px/1 var(--serif);font-style:normal;padding:5px 10px;border-radius:999px;background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311)}
.ls-pop.go{animation:lsPop 1.6s var(--ease,ease) both}
.ls-pop.streak{background:#FFD58A}
@keyframes lsPop{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.08)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.ls-grad{position:fixed;left:0;right:0;top:calc(var(--top,0px) + 92px);display:flex;justify-content:center;pointer-events:none;z-index:5}
.ls-gchip{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311);box-shadow:0 8px 24px rgba(0,0,0,.25);font:400 17px/1 var(--serif);opacity:0}
.ls-gchip i{width:26px;height:26px;border-radius:50%;background:var(--c)}
.ls-gchip span{font-style:italic;color:var(--paper-soft,#5E5A51)}
.ls-grad.go .ls-gchip{animation:lsGrad 1.9s var(--ease,ease) both}
@keyframes lsGrad{0%{opacity:0;transform:translateY(-14px) scale(.9)}14%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
.ls-boss{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;align-items:center}
.ls-boss .pr-t1{font-size:56px}
.ls-boss .pr-primary{margin-top:18px;max-width:320px}
/* Matching: names left, colors right */
.pr-board2{grid-template-columns:1fr 1fr!important;gap:8px 12px}
.pr-board2 .pr-tile.nm{align-items:center;font-size:19px;min-height:52px}
.pr-board2 .pr-tile{min-height:52px}
.pr-board2 .pr-tile.gone{opacity:.0}
/* results */
.ls-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ls-stats div{padding:12px;border-radius:var(--r-2,14px);background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:6px}
.ls-stats b .pr-code{font-size:22px;color:var(--ink)}
.ls-stats span{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.ls-chips{display:flex;flex-wrap:wrap;gap:6px}
.ls-chip{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border-radius:999px;background:rgba(0,0,0,.18);color:var(--ink);font:400 16px/1 var(--serif)}
.ls-chip i{width:28px;height:28px;border-radius:50%;background:var(--c)}
.ls-ring{width:12px;height:12px;flex:none;margin-left:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--soft,#A39E93)}
.ls-ring.on{background:var(--ink,#ECE8DF);box-shadow:none}
.ls-tmrw{font:400 16px/1.4 var(--sans);color:var(--ink);margin:16px 0 0;text-wrap:pretty}
.ls-res .lx-bet{margin-top:20px}
.ls-sbs{margin-top:6px}
@media (prefers-reduced-motion:reduce){.ls-prev i,.ls-body,.ls-pop.go,.ls-grad.go .ls-gchip,.ls-combo.tick b{animation-duration:.01s}}
.pr-shot .ls-pop.go,.pr-shot .ls-grad.go .ls-gchip{animation:none;opacity:1}
.pr-shot .ls-prev i,.pr-shot .ls-body{animation:none}
.ls-combo.on{opacity:1}
/* craft pass 2026-10-08 */
/* Matching: rows sized to the content (56-76 px), the board centered, never stretched to fill the stage */
.pr-board.pr-board2{flex:0 0 auto;grid-template-rows:repeat(var(--rows,4),minmax(56px,76px));margin:auto 0}
/* a mastered color's segment pops */
.ls-prog i.pop{animation:lsSeg .6s var(--spring,ease)}
@keyframes lsSeg{30%{transform:scaleY(1.9)}}
/* the final round: the whole set fanned out above the title */
.ls-fan{display:flex;justify-content:center;margin-bottom:10px}
.ls-fan i{width:44px;height:44px;border-radius:50%;background:var(--c);margin-left:-10px;box-shadow:0 0 0 3px var(--booth,#5c5c5c);animation:lsIn .4s var(--spring,ease) both;animation-delay:calc(var(--k) * 60ms)}
.ls-fan i:first-child{margin-left:0}
.pr-shot .ls-fan i{animation:none}
/* ---------- Study flow (design/STUDY-FLOW.md): Meet cards, pair cards, the pace chips ---------- */
.ls-pace{margin-top:12px}
.ls-pace .pr-rail{gap:6px}
.ls-pace .pr-chip{padding:0 13px;font-size:17px}
.ls-pace-say{font:italic 400 17px/1.35 var(--serif);color:var(--soft);margin:8px 0 0;min-height:21px;text-wrap:pretty}
/* a Meet card: the color fills the stage, its name sits on it; the difference line and Next below */
.ls-meet{gap:0}
.ls-meet-sw{flex:1;min-height:200px;border-radius:var(--r-3,22px);background:var(--c);display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px 20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);animation:lsMeetIn .42s var(--spring,cubic-bezier(.3,1.3,.5,1)) both;margin-top:8px}
@keyframes lsMeetIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.ls-meet-tag{align-self:flex-start;font:italic 400 17px/1 var(--serif);padding:6px 11px;border-radius:999px;background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311)}
.ls-meet.again .ls-meet-tag{background:var(--paper,#EFEBE3);color:var(--paper-ink,#141311)}
.ls-meet-name{display:flex;flex-direction:column;gap:8px;animation:lsMeetName .5s .1s var(--ease,ease) both}
@keyframes lsMeetName{from{opacity:0;transform:translateY(8px)}}
.ls-meet-n{display:block;text-align:left;font:400 56px/.95 var(--serif);letter-spacing:-.035em;color:inherit;overflow-wrap:anywhere;text-wrap:balance}
.ls-meet-name .pr-code{opacity:.72}
.ls-meet-line{display:flex;gap:12px;align-items:center;min-height:52px;margin:14px 2px 0;font:400 17px/1.4 var(--sans);color:var(--ink);text-wrap:pretty;animation:lsMeetName .5s .22s var(--ease,ease) both}
.ls-meet-line:empty{min-height:0;margin:0}
.ls-meet-line .pr-pair{flex:none}
.ls-meet .pr-foot{padding-top:14px}
/* the Meet/pair run as a paged story (js/learnset.js runStory): thin segments above the card are the one quiet
   progress indicator for this phase — the session's own .ls-prog/.ls-status (header) hide while it's showing
   (David, 2026-10-09: "one quiet progress indicator, not two stacked bars"). Tap right 2/3 for next, left 1/3
   for back, swipe either way; the zone tap is hit-tested on the stage itself, not a drawn overlay, so the
   card's own controls (the name button, Next) still work exactly where they're drawn. */
.ls-study.ls-ov-on .ls-prog,.ls-study.ls-ov-on .ls-status{display:none}
.ls-story-bars{display:flex;gap:4px;margin:2px 2px 10px}
.ls-story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.ls-story-bars i.done{background:rgba(255,255,255,.65)}
.ls-story-bars i.on{background:#fff}
.ls-skip{position:absolute;top:0;right:0;padding:6px 2px;z-index:2}
/* a pair card, and a Meet card's own comparison (David, 2026-10-09: "this comparison is too small... visually
   this comparison is easier to learn" — a real split, not a tiny 2-chip + sentence): one big swatch split in
   two halves, a name on each; a tag (New, Look again, …) sits at the top of the half it belongs to. */
.ls-mp-t{font:italic 400 17px/1.3 var(--serif);color:var(--soft);text-align:center;margin:4px 0 0}
.ls-mp{flex:1;min-height:200px;display:flex;border-radius:var(--r-3,22px);overflow:hidden;margin-top:10px;animation:lsMeetIn .42s var(--spring,cubic-bezier(.3,1.3,.5,1)) both}
.ls-mp-half{flex:1;background:var(--c);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;min-width:0;color:#fff}
.ls-mp-half[data-ink="dark"]{color:#141311}
.ls-mp-half .ls-meet-tag{align-self:flex-start;margin-bottom:auto}
.ls-mp-half .ls-meet-n{font-size:30px}
.ls-mp-half .pr-code{opacity:.72}
.ls-mp-half:first-child{animation:lsHalfL .5s var(--ease,ease) both}.ls-mp-half:last-child{animation:lsHalfR .5s var(--ease,ease) both}
@keyframes lsHalfL{from{transform:translateX(12%)}}@keyframes lsHalfR{from{transform:translateX(-12%)}}
.ls-mpair .ls-meet-line{justify-content:center;text-align:center}
/* three far options for an early rung: one column, so nothing looks missing */
.pr-opts.pr-opts-3{grid-template-columns:1fr}
/* a color set aside for tomorrow: its segment dims */
.ls-prog i.aside{opacity:.4}
@media (max-width:360px){.ls-meet-n{font-size:46px}.ls-mp-half .ls-meet-n{font-size:25px}.ls-meet-line{font-size:16px}}
/* landscape lane (2026-10-09): the Study card already flexes to whatever height the screen's own flex column
   gives it (flex:1), but on a ~390-440px-tall rotated phone that's little enough that the name and Next both
   need a smaller floor than the 200px portrait one, so Next never has to be scrolled to. */
@media (orientation:landscape){
  .ls-meet-sw,.ls-mp{min-height:140px}
  .ls-meet-n{font-size:40px}
  .ls-mp-half .ls-meet-n{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.ls-meet-sw,.ls-meet-name,.ls-meet-line,.ls-mp,.ls-mp-half{animation:none!important}}
.pr-shot .ls-meet-sw,.pr-shot .ls-meet-name,.pr-shot .ls-meet-line,.pr-shot .ls-mp,.pr-shot .ls-mp-half{animation:none}

/* lsQuickEnd's short ending (a session opted into o.quick: not wired to any entry point today, kept for later) */
.ls-qend{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px 28px}
.ls-qfan{display:flex;gap:10px;margin-bottom:8px}
.ls-qfan i{width:44px;height:44px;border-radius:50%;background:var(--c);animation:lsQfan .5s var(--ease,ease) both;animation-delay:calc(var(--k)*70ms)}
@keyframes lsQfan{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ls-qfan i{animation-duration:.01s}}

/* ---------- pinned sets: a pair/set/palette's colors with look-alikes beside each ---------- */
.ls-groups{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:14px;max-height:232px;overflow:auto}
.ls-groups[hidden]{display:none}
.ls-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ls-groups.rows .ls-grp{flex-basis:100%}
.ls-groups .ls-chip{min-height:44px;border:0;cursor:pointer}
.ls-groups .ls-chip.pin{box-shadow:inset 0 0 0 1.5px var(--ink,#ECE8DF);cursor:default}
.ls-chip .ls-x{margin-left:2px;color:var(--soft,#A39E93);font:400 20px/1 var(--sans)}
.ls-chip.ls-add{padding:0 16px;color:var(--soft,#A39E93);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}

/* ---------- the overview's Quick look (js/learnset.js lsQuickCardHTML) ---------- */
.ls-quick .ls-meet-name{align-items:flex-start}

/* ---------- Sort and Gradient (js/studyformats.js): the two set/single-item formats added 2026-10-09 ---------- */
.pr-s-sort{gap:14px}
.pr-sort-list{position:relative;flex:1;min-height:220px;display:flex;flex-direction:column}
.pr-sort-row{position:absolute;left:0;right:0;border-radius:var(--r-2,14px);background:var(--c);display:flex;align-items:center;padding:0 16px;touch-action:none;will-change:transform;transition:transform .18s var(--ease,ease)}
.pr-sort-row.lift{transition:none;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.pr-sort-row.good{outline:2px solid var(--good,#4E9A5E)}
.pr-sort-row.bad{outline:2px solid var(--bad,#C0392F)}
.pr-sort-row.true{outline:1.5px dashed rgba(255,255,255,.5)}
.pr-sort-n{font:400 17px/1.2 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pr-sort-row[data-ink="dark"] .pr-sort-n{color:#141311;text-shadow:none}
.pr-s-gradient{gap:14px;flex:1;justify-content:center}
.sf-grad-bar{position:relative;height:56px;border-radius:999px;touch-action:none;margin-top:6px}
.sf-grad-mark{position:absolute;top:-6px;width:4px;height:68px;border-radius:2px;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.35);transform:translateX(-50%);pointer-events:none}
.sf-grad-mark.true{width:5px;background:#FFD58A;box-shadow:0 0 0 1.5px #141311}
.sf-grad-ends{display:flex;justify-content:space-between;font:400 14px/1.2 var(--sans);color:var(--soft,#A39E93)}