/* The learning path: the Learn screen (units as a trail of lessons), the lesson panel
   next to the board, and the sheet at the end of a lesson. Colours come from
   tokens.css; logical properties throughout, so Hebrew (RTL) and English share it. */

/* ---------- Learn screen ---------- */
.learn { --lp: var(--accent, var(--cobalt)); --gem: 52px; max-width: 760px; }
.learn-head { display: grid; gap: var(--s2); }
.learn-head .display { margin: 0; }
.learn-lede { margin: 0; max-width: 46ch; font: var(--font-body); color: var(--text2, var(--ink-soft)); }
.learn-meter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.learn-meter .learn-bar { flex: 1 1 160px; }
.learn-count { font: var(--font-label); color: var(--text2, var(--ink-soft)); font-variant-numeric: tabular-nums; }
.learn-meter .chip.on * { color: var(--white); }
.learn-bar { position: relative; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--lp, var(--cobalt)) 14%, transparent); overflow: hidden; }
.learn-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 8px; border-radius: inherit; background: var(--lp, var(--cobalt)); transition: width var(--t-slow) var(--ease-out); }

/* The coach's pick: one lesson, one reason, one button. */
.learn-coach { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); }
.learn-coach-txt { display: grid; gap: 2px; min-width: 0; }
.learn-coach-txt small { font: 600 13px/1.3 var(--font-sans); letter-spacing: .02em; color: var(--lp); }
.learn-coach-txt strong { font: var(--font-title); letter-spacing: -.01em; }
.learn-coach-txt span { font: var(--font-small); color: var(--ink-soft); }
.learn-coach.fix { box-shadow: var(--glass-edge), var(--shadow-2), inset 4px 0 0 var(--amber); }
[dir="rtl"] .learn-coach.fix { box-shadow: var(--glass-edge), var(--shadow-2), inset -4px 0 0 var(--amber); }
.learn-coach.fix .learn-coach-txt small { color: var(--amber-deep); }
[dir="rtl"] :is(.learn-coach, .ld, .go-coach, .lboss) .ic-arrow, [dir="rtl"] :is(.go-coach, .lboss) .chev { transform: scaleX(-1); }

/* A lesson's round tile: the piece it teaches, or an icon. */
.lgem { position: relative; flex: none; display: grid; place-items: center; width: var(--gem, 52px); height: var(--gem, 52px); border-radius: 50%;
  background: var(--paper-hi); color: var(--lp, var(--cobalt)); box-shadow: var(--glass-edge), var(--shadow-1); }
.lgem img { width: 72%; height: 72%; object-fit: contain; }
.lcheck { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--good-c); color: var(--white); box-shadow: 0 0 0 2px var(--paper-hi); }
.lcheck .ic { width: 12px; height: 12px; stroke-width: 2.6; }

/* Units */
.units { display: grid; gap: var(--s6); }
.unit { display: grid; gap: var(--s3); }
.unit-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.unit-head .title { margin: 0; font-size: 21px; }
.unit-head p { margin: 2px 0 0; font: var(--font-small); color: var(--text2, var(--ink-soft)); }
.unit-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-chip); background: var(--ink-deep); color: var(--paper); font: 700 16px/1 var(--font-sans); }
.unit.complete .unit-n { background: var(--good-c); color: var(--white); }
.unit-goal .unit-n { background: var(--amber); color: var(--ink-deep); }
.unit-head .chip.on * { color: var(--white); }

/* The trail: a line through the tiles, on the reading side. */
.lpath { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.lpath::before { content: ""; position: absolute; inset-block: calc(var(--gem) / 2 + var(--s2)); inset-inline-start: calc(var(--s3) + var(--gem) / 2 - 1px); width: 2px;
  background: color-mix(in srgb, var(--lp) 22%, transparent); border-radius: 2px; }
.lnode, .lboss { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; min-height: 68px;
  padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-card); background: transparent; color: var(--text, var(--ink-deep)); font: inherit; text-align: start; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-settle); }
.lnode:hover, .lboss:hover { background: color-mix(in srgb, var(--lp) 7%, transparent); }
.lnode:focus-visible, .lboss:focus-visible, .lesson-choice:focus-visible, .go-coach:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.lnode-txt { display: grid; gap: 2px; min-width: 0; }
.lnode-txt strong { font: 600 17px/1.25 var(--font-sans); }
.lnode-txt small { font: var(--font-small); color: var(--text2, var(--ink-soft)); }
.lnode-n { font: var(--font-small); color: var(--muted, var(--ink-soft)); white-space: nowrap; }
.lnode.done .lgem { background: var(--cobalt-ice); }
.lnode.open .lgem { box-shadow: var(--glass-edge); }
.lnode.open .lgem img, .lnode.open .lgem .ic { opacity: .62; }
.lnode.next { background: var(--glass-surface); box-shadow: var(--glass-edge), var(--shadow-2); }
.lnode.next .lgem { background: var(--lp); color: var(--white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp) 22%, transparent), var(--shadow-1); }
.lnode.next .lgem img { filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--ink-deep) 40%, transparent)); }
.learn .lnode .chip.on { font-weight: 600; color: var(--white); }
.learn .unit-head .chip.on { color: var(--white); }
.lstars { display: inline-flex; gap: 1px; color: color-mix(in srgb, var(--ink-deep) 22%, transparent); }
.lstars i { display: grid; }
.lstars i.on { color: var(--amber); }
.lstars i.on .ic, .ld-star.on .ic { fill: currentColor; }
.lstars .ic { width: 16px; height: 16px; }

/* The goal: the two opponents the path prepares for. */
.lbosses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s3); }
.lboss { background: var(--glass-surface); box-shadow: var(--glass-edge), var(--shadow-1); }
.lboss-face { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--paper-lo); flex: none; }
.lboss-face > * { width: 100%; height: 100%; }
.lboss.won { box-shadow: var(--glass-edge), var(--shadow-1), inset 0 0 0 2px var(--amber); }
.lboss .chip.on { background: var(--amber); color: var(--ink-deep); }
.lboss .chip.on * { color: inherit; }
.lboss > .chev { color: var(--muted, var(--ink-soft)); }

/* ---------- lesson panel (next to the board) ---------- */
.lesson-head { display: grid; gap: 1px; }
.lesson-kicker { font: 600 13px/1.3 var(--font-sans); color: var(--accent, var(--cobalt)); }
.lesson-head strong { font: 700 19px/1.2 var(--font-sans); letter-spacing: -.01em; }
.lesson-segs { display: flex; gap: 5px; }
.lesson-segs i { flex: 1 1 0; height: 6px; border-radius: var(--r-pill); background: var(--line, var(--line-c)); transition: background-color var(--t-med) var(--ease-out); }
.lesson-segs i.cur { background: color-mix(in srgb, var(--accent, var(--cobalt)) 45%, var(--line, var(--line-c))); }
.lesson-segs i.done { background: var(--accent, var(--cobalt)); }
.lesson-segs i.prac.done { background: var(--amber); }
.lesson-note { padding: var(--s2) var(--s3); border-radius: var(--r-control); background: color-mix(in srgb, var(--bad-c) 10%, transparent); color: var(--bad, var(--bad-c)); }
/* Hints and "that move goes nowhere": information, not an error. */
.lesson-note.soft { background: color-mix(in srgb, var(--cobalt) 9%, transparent); color: var(--text, var(--ink-deep)); }
/* The unit and the lesson read as two titles, with a dot between them on one line. */
.lesson-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.lesson-head strong { order: -1; }
.lesson-head strong::after { content: "·"; margin-inline-start: var(--s2); font-weight: 400; color: var(--muted, var(--ink-soft)); }
.lesson-choices { display: grid; gap: var(--s2); }
.lesson-choice { min-height: 48px; padding: var(--s2) var(--s4); border-radius: var(--r-control); border: 1.5px solid var(--line2, var(--line2-c)); background: var(--surface, var(--paper-hi));
  color: var(--text, var(--ink-deep)); font: 500 16px/1.35 var(--font-sans); text-align: start; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.lesson-choice:hover:not(:disabled) { border-color: var(--accent, var(--cobalt)); }
.lesson-choice.right { border-color: var(--good-c); background: color-mix(in srgb, var(--good-c) 12%, var(--surface, var(--paper-hi))); font-weight: 600; }
.lesson-choice.wrong { border-color: var(--bad-c); background: color-mix(in srgb, var(--bad-c) 8%, var(--surface, var(--paper-hi))); }
.lesson-choice:disabled { cursor: default; }
.lesson-choice:disabled:not(.right) { opacity: .55; }

/* ---------- lesson complete ---------- */
.ld { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding-top: var(--s3); }
.ld-stars { display: flex; align-items: end; gap: var(--s2); color: color-mix(in srgb, var(--ink-deep) 16%, transparent); }
.ld-star { display: grid; }
.ld-star .ic { width: 44px; height: 44px; }
.ld-star.on { color: var(--amber); filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--amber-deep) 35%, transparent)); }
.ld-title { margin: 0; font-size: clamp(28px, 6vw, 40px); }
.ld-sub { margin: 0; font: var(--font-body-strong); color: var(--ink-soft); }
.ld-path { display: grid; gap: var(--s1); width: min(100%, 320px); font: var(--font-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ld .go-hook { color: var(--ink-deep); }
.ld-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.ld-badge { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--cobalt-ice); color: var(--ink-deep); font: 600 14px/1.2 var(--font-sans); text-align: start; }
.ld-badge > .ic { color: var(--cobalt); flex: none; }
.ld-badge small { display: block; font: 500 11.5px/1.2 var(--font-sans); color: var(--ink-soft); }
.ld-sheet .sheet-foot .dlg-actions .btn { gap: 6px; }
.ld-sheet .sheet-foot .dlg-actions .btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the coach line on the game-over sheet ---------- */
.go-coach { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 0; cursor: pointer;
  font: inherit; text-align: start; color: var(--ink-deep); }
.go-coach > .ic:first-child { color: var(--cobalt); }
.go-coach span { display: grid; gap: 2px; min-width: 0; }
.go-coach small { font: var(--font-small); color: var(--ink-soft); }
.go-coach strong { font: 600 16px/1.3 var(--font-sans); }

/* ---------- motion: only when the app's setting and the system both allow it ---------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="on"] .lnode.next .lgem { animation: lgem-ring 2.4s var(--ease-out) infinite; }
}
@keyframes lgem-ring {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp) 22%, transparent), var(--shadow-1); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--lp) 0%, transparent), var(--shadow-1); }
}
@media (prefers-reduced-motion: reduce) { .learn-bar i, .lesson-segs i { transition: none; } }
body[data-motion="off"] :is(.learn-bar i, .lesson-segs i, .lnode, .lesson-choice) { transition: none; }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .learn { --gem: 46px; }
  .learn { gap: var(--s4); padding-top: var(--s4); }
  .learn-head { gap: var(--s1); }
  .learn-head .display { font-size: 30px; }
  .learn-lede { font-size: 14px; line-height: 1.4; }
  .learn-meter { margin-top: 0; gap: var(--s2); }
  .learn-meter .learn-bar { flex-basis: 100px; }
  .learn-coach { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3); }
  .learn-coach .lgem { --gem: 40px; }
  .learn-coach-txt strong { font-size: 18px; }
  .learn-coach-txt span { font-size: 13px; line-height: 1.35; }
  .learn-coach .pill { min-height: 44px; padding-inline: 14px; font-size: 15px; }
  .learn-coach .pill .ic { display: none; }
  .units { gap: var(--s4); }
  .unit { gap: var(--s1); }
  .unit-head .title { font-size: 19px; }
  .units { gap: var(--s5); }
  .lnode, .lboss { padding-inline: var(--s2); gap: var(--s2) var(--s3); }
  .lpath::before { inset-inline-start: calc(var(--s2) + var(--gem) / 2 - 1px); }
  .lnode-txt strong { font-size: 16px; }
  .lnode-n { display: none; }
  .lesson-head strong { font-size: 17px; }
  .lesson-choice { min-height: 44px; font-size: 15px; padding-block: 6px; }
  .lesson-choices { gap: 6px; }
  /* iPhone SE: board, goal, text and the buttons all on one screen. */
  body[data-mode="lesson"] .lesson-panel { gap: 6px; min-height: 0; }
  body[data-mode="lesson"] .side .panel { min-height: 0; flex: none; }
  body[data-mode="lesson"] .moves-box { display: none; }
  body[data-mode="lesson"] .lesson-note { padding: 6px var(--s3); font-size: 14.5px; line-height: 1.4; }
  /* A wrong-move note takes the place of the text instead of pushing the buttons off screen. */
  body[data-mode="lesson"] .lesson-panel:has(.lesson-note):not(:has(.lesson-choices)) .lesson-body { display: none; }
  .ld-sheet .sheet-foot .dlg-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-sheet .sheet-foot .dlg-actions .primary { grid-column: 1 / -1; }
  .ld-sheet .sheet-foot .dlg-actions > * { min-width: 0; }
  .ld-sheet .sheet-foot .dlg-actions > :last-child:nth-child(even) { grid-column: 1 / -1; }
}