/* The lesson screens: occurrence, lesson, present, reflect (js/screens/{occ,lesson,present,reflect}.js).
   Same tokens as app.css, logical properties only (RTL), one easing (--ease), durations --t1 / --t2 / --t3.
   Paper output (print.js) carries its own black-on-white rules. */

/* ---------- class colors ----------
   Six muted tones, always next to the class name (never the only sign of a class). Chalk yellow is not one of them:
   it is kept for "now", "today" and success. The tokens --k0..--k5 are in app.css. */
.ls-cdot, .occ-head { --cc: var(--faint); }
.ls-cdot[data-color="0"], .occ-head[data-color="0"] { --cc: var(--k0); }
.ls-cdot[data-color="1"], .occ-head[data-color="1"] { --cc: var(--k1); }
.ls-cdot[data-color="2"], .occ-head[data-color="2"] { --cc: var(--k2); }
.ls-cdot[data-color="3"], .occ-head[data-color="3"] { --cc: var(--k3); }
.ls-cdot[data-color="4"], .occ-head[data-color="4"] { --cc: var(--k4); }
.ls-cdot[data-color="5"], .occ-head[data-color="5"] { --cc: var(--k5); }
.ls-cdot { display: inline-block; flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 22%, transparent); }
.ls-cdot[data-color="none"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.crumbs a .ls-cdot { margin-inline-end: 6px; vertical-align: 1px; }

/* ---------- the lesson page ---------- */
.ls-refline { margin-block-start: 6px; }
.ls-next { margin-block-start: 4px; }
.ls-next a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--board); font-weight: 600; text-decoration: none; border-radius: var(--r-s); }
.ls-next a:hover { text-decoration: underline; }
.lesson-body > .goal:first-child { margin-block-start: 14px; }
.ls-sample { margin-block: 14px 0; }
.ls-lead { margin-block: 6px 0; max-inline-size: 66ch; }
.section .sec-head + .ls-lead { margin-block: -8px 18px; }
.ls-strong { margin-block-start: 4px; font-weight: 600; }
.ls-video { margin-block-start: 12px; }
.ls-hw { margin-block-start: 16px; }
.ls-wish { margin-block-start: 18px; max-inline-size: 560px; }
.ls-build { margin-block-start: 18px; }
.ls-why, .ls-fail { margin-block: 20px 0; }
.ls-fail { margin-block: 0 20px; }
.ls-secs { margin-inline-start: auto; }

/* "להדפיס למשחקים": each sheet as a small card with a preview of the paper (dashed cut lines, like the print). */
.ls-prints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ls-print {
  padding: 16px 18px 18px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-1), var(--hi); animation: rise var(--t3) var(--ease) both;
}
.ls-print:nth-child(2) { animation-delay: 40ms; }
.ls-print:nth-child(3) { animation-delay: 80ms; }
.ls-print:nth-child(n+4) { animation-delay: 120ms; }
.ls-print-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--board); }
.ls-print-k .muted { margin-inline-start: auto; font-weight: 400; color: var(--muted); }
.ls-print h3 { font-size: 19px; margin-block: 6px 12px; }
.ls-mini { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-2); border-block-start: 1px dashed var(--faint); border-inline-start: 1px dashed var(--faint); }
.ls-mini[data-kind="pairs"] { grid-template-columns: repeat(2, 1fr); }
.ls-mini span {
  display: flex; align-items: center; justify-content: center; min-block-size: 44px; max-block-size: 56px; padding: 4px 6px; text-align: center;
  border-block-end: 1px dashed var(--faint); border-inline-end: 1px dashed var(--faint); font-size: 14px; font-weight: 700; line-height: 1.3;
  overflow: hidden; overflow-wrap: anywhere;
}
.ls-mini[data-kind="board"] { border: 1.5px solid var(--ink); }
.ls-mini[data-kind="board"] span { border-block-end: 1.5px solid var(--ink); border-inline-end: 1.5px solid var(--ink); }
.ls-mini[data-kind="board"] span:nth-child(4n) { border-inline-end: 0; }
.ls-mini[data-kind="sheet"] { display: block; border: 0; background: none; }
.ls-mini[data-kind="sheet"] span { display: block; text-align: start; border: 0; border-block-end: 1px solid var(--line); padding: 6px 0; font-weight: 400; min-block-size: 0; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- the occurrence page ---------- */
.occ > * { animation: rise var(--t3) var(--ease) both; }
.occ > *:nth-child(2) { animation-delay: 40ms; }
.occ > *:nth-child(3) { animation-delay: 80ms; }
.occ > *:nth-child(n+4) { animation-delay: 120ms; }
.occ-head {
  position: relative; overflow: hidden; padding: 20px 24px 22px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1), var(--hi);
}
.occ-head::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: var(--cc); }
.occ-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted); font-size: 15px; font-weight: 600; }
.occ-cls { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; color: var(--ink); text-decoration: none; border-radius: var(--r-s); }
a.occ-cls:hover { text-decoration: underline; }
.occ-when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.occ-when .ltr { font-weight: 700; color: var(--ink); }
.occ-line .chip { margin-inline-start: auto; }
@media (max-width: 560px) { .occ-line .chip { margin-inline-start: 0; } }
.occ-head h1 { margin-block: 2px 0; }
.occ-struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.occ-note { display: flex; align-items: flex-start; gap: 8px; margin-block-start: 10px; color: var(--muted); font-size: 15px; }
.occ-note .ic { margin-block-start: 3px; }
.occ-note a { color: var(--board); font-weight: 600; }

/* What happened, or the one question after the lesson started. */
.occ-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-block-start: 16px; padding: 16px 18px;
  border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface);
}
.occ-card .grow { flex: 1; min-inline-size: min(100%, 240px); }
.occ-card > .ic { color: var(--board); }
.occ-card.off > .ic { color: var(--danger); }
.occ-card.ask { background: var(--board-soft); border-color: color-mix(in srgb, var(--board) 28%, var(--line)); }
.occ-card.ask .actions .btn { min-inline-size: 132px; }
.occ-card.sub .actions { margin-block-start: 12px; }
.occ-card a { color: var(--board); font-weight: 600; }
.occ-check { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; }
.occ-check svg { inline-size: 44px; block-size: 44px; }
.occ-check .chalk-line { stroke-width: 9; }
@media (max-width: 560px) {
  .occ-card.ask .actions { inline-size: 100%; }
  .occ-card.ask .actions .btn { flex: 1; min-inline-size: 0; }
}

/* The tools of a lesson that has not started: move, change topic, skip, cancel. */
.occ-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 16px; }
.occ-tools .btn { min-block-size: 44px; padding: 0 16px; font-size: 15px; }
.occ-tools .btn.danger { margin-inline-start: auto; }
@media (max-width: 560px) {
  .occ-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .occ-tools .btn { inline-size: 100%; }
  .occ-tools .btn.danger { margin-inline-start: 0; }
  .occ-tools .btn.danger:nth-child(odd) { grid-column: 1 / -1; }
}
.occ .lesson-body { margin-block-start: 22px; }
.occ .lesson-body > .goal:first-child { margin-block-start: 0; }
.occ-plan { margin-block-start: 20px; }

/* A free lesson without a topic: write it, then build. */
.occ-topic { margin-block-start: 20px; padding: 24px; }
.occ-topic h2 { font-size: 24px; }
.occ-topic > p { margin-block-start: 6px; max-inline-size: 62ch; }
.occ-topic .field { margin-block: 18px 6px; max-inline-size: 560px; }
.occ-topic .actions { margin-block-start: 14px; }
.occ-err { color: var(--danger); font-weight: 600; font-size: 15px; margin-block: 8px 0; }

/* The sheets of the occurrence (cancel, move, change topic, skip). */
.occ-sh { font-size: 24px; }
.occ-shsub { margin-block: 4px 18px; }
.occ-reasons { margin-block: 8px 4px; }
.occ-shnote { margin-block-start: 14px; }
.occ-shnote.bad { color: var(--danger); font-weight: 600; }
.occ-shacts { margin-block-start: 22px; }
.occ-shacts .btn.primary { min-inline-size: 160px; }
/* A long list (the topics): the buttons stay in reach at the bottom of the sheet. */
.occ-shacts.stick { position: sticky; inset-block-end: 0; z-index: 2; margin-inline: -24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-block-start: 1px solid var(--line); }
.occ-group { margin-block: 10px 0; color: var(--muted); }
.occ-fields + .occ-fields { margin-block-start: 12px; }
.occ-fields[hidden] { display: none; }
.occ-choice { margin-block-start: 0; }
.occ-choice label { align-items: center; }
.occ-choice .chip { margin-inline-start: 6px; font-size: 13px; padding: 1px 8px; }
.occ-newtp { margin-block-start: 8px; inline-size: 100%; }
.occ-why { margin-block-start: 16px; }
@media (max-width: 560px) {
  .occ-shacts { flex-direction: column; align-items: stretch; }
  .occ-shacts .btn { inline-size: 100%; }
}

/* ---------- reflect ---------- */
.rf-h { margin-block-end: 12px; }
.rf-sub { margin-block: -6px 12px; }
.rf-seg { display: flex; gap: 10px; align-items: center; }
.rf-exit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf-of { inline-size: 72px; }
.rf-hint { margin-block-start: 8px; }
.rf-err { margin-block-start: 24px; }
.rf-saved { margin-block-start: 8px; }
.rf-next { justify-content: center; }

/* ---------- present ---------- */
.pr-empty-h { color: #f4f7f5; }
/* The end of the lesson (and "no plan yet") sits in the middle of the board, not at its top. */
.present > .empty { align-self: center; }