/* src/components/jr/lesson/lesson.css — SJ2 Lesson: intro, teach, work, done.
   Measured off art-source/design-sj2-2026-09-12/screens/SJ2 Lesson.dc.html. The lesson's
   swatch arrives as --c-* on .jr-ls, including --c-page, which is the whole screen's ground
   (a lesson takes its subject's colour family, not a plate).

   THE ONE DELIBERATE COLOUR CHANGE: a missed answer is drawn AT REST. Her frame paints it
   #fdecea / #e0a08f / #c9583c with an #a8492a mark and a ✕. CLAUDE.md: wrong answers cost
   nothing, no red. The ✓ on the right answer is hers and stays. See
   src/components/jr/palette.js for the ruling and the retired hexes. */

.jr-ls {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-page);
}

/* ---------------------------------------------------------------- the bar */
.jr-ls-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  box-sizing: border-box;
  background: var(--sj-card);
  border-bottom: 1px solid var(--sj-line);
}

.jr-ls-back {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-ink);
}

.jr-ls-where { flex: none; display: flex; align-items: center; gap: 11px; }
.jr-ls-swatch { flex: none; width: 14px; height: 14px; border-radius: 5px; background: var(--c-main); display: block; }
.jr-ls-subject {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 22px;
  color: var(--sj-ink);
  letter-spacing: -.01em;
}
.jr-ls-unitpill {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--sj-r-pill);
  padding: 7px 14px;
}

.jr-ls-pips { margin-left: auto; flex: none; display: flex; align-items: center; gap: 7px; }
.jr-ls-pip {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  background: #dbc9a8;
  border: 1px solid #d3c8b2;
  transition: width 180ms ease;
}
.jr-ls-pip-now { width: 30px; background: var(--c-main); border-color: var(--c-ink); }
.jr-ls-pip-done { background: var(--sj-green); border-color: var(--sj-green-ink); }

.jr-ls-progress {
  flex: none;
  font-family: var(--sj-font);
  font-weight: 500;
  font-size: 17px;
  color: var(--sj-ink);
  min-width: 96px;
  text-align: right;
}

/* ---------------------------------------------------------------- shared pieces */
.jr-ls-chip {
  align-self: flex-start;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--sj-r-pill);
  padding: 7px 15px;
}

.jr-ls-spacer { flex: 1 1 auto; min-height: 6px; }

.jr-ls-face {
  display: block;
  border-radius: 50%;
  background-color: var(--sj-sand);
  background-size: cover;
  background-position: center;
}
.jr-ls-face-xl { width: 212px; height: 212px; box-shadow: 0 14px 30px rgba(35, 50, 44, .2); }
.jr-ls-face-lg { width: 196px; height: 196px; box-shadow: 0 14px 30px rgba(35, 50, 44, .2); }
.jr-ls-face-md { width: 168px; height: 168px; box-shadow: 0 12px 26px rgba(35, 50, 44, .18); }
.jr-ls-face-sm { width: 132px; height: 132px; box-shadow: 0 10px 22px rgba(35, 50, 44, .16); }

.jr-ls-say {
  align-self: stretch;
  background: var(--sj-card);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(35, 50, 44, .13);
  padding: 20px 24px;
  box-sizing: border-box;
}
.jr-ls-say-who {
  margin: 0 0 5px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.jr-ls-say-line {
  margin: 0;
  font-family: var(--sj-font-story);
  font-size: 24px;
  line-height: 1.35;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-ls-card {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: 30px;
  box-shadow: 0 20px 46px rgba(35, 50, 44, .18);
  padding: 38px 42px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------------------------------------------------------- intro */
.jr-ls-intro,
.jr-ls-done {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  bottom: 0;
  box-sizing: border-box;
  padding: 42px 56px;
  display: flex;
  gap: 36px;
  align-items: center;
}

.jr-ls-aside { flex: 0 0 342px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.jr-ls-aside-wide { flex: 0 0 372px; }

.jr-ls-title {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--sj-ink);
  text-wrap: pretty;
}
.jr-ls-big {
  margin: 0;
  font-family: var(--sj-font-story);
  font-size: 31px;
  line-height: 1.35;
  color: var(--sj-ink);
  max-width: 34ch;
  text-wrap: pretty;
}
.jr-ls-why {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sj-ink);
  max-width: 52ch;
  text-wrap: pretty;
}

.jr-ls-start {
  align-self: flex-start;
  appearance: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 0 34px;
  border-radius: 22px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 26px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
}
.jr-ls-start:active { transform: translateY(5px); box-shadow: none; }
.jr-ls-start-play {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-card);
}

/* ---------------------------------------------------------------- teach */
.jr-ls-teach {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  bottom: 0;
  box-sizing: border-box;
  padding: 34px 48px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.jr-ls-teach-head { flex: none; display: flex; align-items: baseline; gap: 14px; }
.jr-ls-teach-note { font-size: 20px; font-weight: 500; color: var(--sj-ink); text-wrap: pretty; }

.jr-ls-example {
  flex: none;
  box-sizing: border-box;
  background: var(--sj-card);
  border: 2px solid var(--c-border);
  border-radius: 26px;
  box-shadow: 0 14px 32px rgba(35, 50, 44, .14);
  padding: 30px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 132px;
}
.jr-ls-word { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jr-ls-word-text {
  font-family: var(--sj-font-story);
  font-size: 44px;
  line-height: 1.1;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--sj-stage);
  border: 2px solid var(--sj-line);
  color: var(--sj-ink);
  transition: background 200ms ease;
}
/* The word the guide is talking about, right now, lit in the subject's own colour. */
.jr-ls-word-lit { background: var(--c-tint); border-color: var(--c-main); }
.jr-ls-word-label {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
  min-height: 20px;
}
.jr-ls-example-plain {
  font-family: var(--sj-font-story);
  font-size: 34px;
  line-height: 1.3;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-ls-teach-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 26px; }
.jr-ls-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* A step the guide has not reached yet is dimmed, not hidden. This is a static opacity and a
   transition, never a keyframe: the hidden-tab rule is about animations that never start. */
.jr-ls-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: 22px;
  background: var(--sj-stage);
  border: 2px solid var(--sj-line);
  opacity: .35;
  transition: opacity 240ms ease;
}
.jr-ls-row-on { background: var(--sj-card); border-color: var(--c-border); opacity: 1; }
.jr-ls-row-n {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #d3c8b2;
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jr-ls-row-on .jr-ls-row-n { background: var(--c-main); }
.jr-ls-row-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sj-font-story);
  font-size: 26px;
  line-height: 1.35;
  color: var(--sj-ink);
  text-wrap: pretty;
}
.jr-ls-strong { font-weight: 700; }
.jr-ls-em { font-style: italic; }

.jr-ls-teach-aside {
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.jr-ls-teach-cta {
  align-self: stretch;
  appearance: none;
  border: none;
  cursor: pointer;
  min-height: 74px;
  border-radius: 20px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 23px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
}
.jr-ls-teach-cta:active { transform: translateY(5px); box-shadow: none; }

/* ---------------------------------------------------------------- work */
.jr-ls-work {
  position: absolute;
  left: 0;
  right: 0;
  top: 72px;
  bottom: 0;
  box-sizing: border-box;
  padding: 30px 48px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.jr-ls-ask { flex: none; display: flex; align-items: baseline; gap: 14px; }
.jr-ls-ask-text {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-ls-work-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 26px; }
.jr-ls-work-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.jr-ls-work-aside { flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.jr-ls-work-guide {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.jr-ls-work-guide .jr-ls-say {
  border-width: 2px;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(35, 50, 44, .12);
  padding: 18px 20px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jr-ls-work-guide .jr-ls-say-line { font-size: 22px; }
/* Right is green. There is no matching miss colour, on purpose. */
.jr-ls-say-right { border-color: #c3dda9; }
.jr-ls-say-right .jr-ls-say-who { color: var(--sj-green-ink); }

/* "Show me this one", under the primary. It appears only after a miss, while the answer is
   still held back (DECISIONS #116), so a child who wants to be taught does not have to miss a
   second time to get there. Quiet by design: the try is the thing being offered first. */
.jr-ls-showme {
  flex: none;
  appearance: none;
  cursor: pointer;
  min-height: 64px;
  margin-top: 10px;
  border-radius: 18px;
  background: transparent;
  border: 1.5px solid var(--sj-line);
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 20px;
}

.jr-ls-primary {
  flex: none;
  appearance: none;
  cursor: pointer;
  min-height: 80px;
  border-radius: 22px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 25px;
  box-shadow: 0 5px 0 var(--sj-line);
}
.jr-ls-primary-live {
  background: var(--sj-orange);
  border: none;
  color: var(--sj-card);
  box-shadow: 0 5px 0 var(--sj-orange-deep);
}
.jr-ls-primary:active { transform: translateY(5px); box-shadow: none; }

/* ---- pick (and truefalse) ---- */
.jr-ls-picks { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.jr-ls-opt {
  appearance: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 0 24px;
  border-radius: 22px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line);
  box-shadow: none;
  font-family: var(--sj-font);
}
.jr-ls-opt-on { background: var(--c-tint); border-color: var(--c-main); box-shadow: 0 4px 0 var(--c-border); }
.jr-ls-opt-right { background: var(--sj-green-tint); border-color: var(--sj-green); }
/* A missed option: exactly the resting tile. */
.jr-ls-opt-rest { background: var(--sj-card); border-color: var(--sj-line); box-shadow: none; }
.jr-ls-opt-chip {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--sj-stage);
  border: 2px solid var(--sj-line-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--sj-ink);
}
.jr-ls-opt-on .jr-ls-opt-chip { background: var(--c-main); border-color: var(--c-ink); color: var(--sj-card); }
.jr-ls-opt-right .jr-ls-opt-chip { background: var(--sj-green); border-color: var(--sj-green-ink); color: var(--sj-card); }
.jr-ls-opt-rest .jr-ls-opt-chip { background: var(--sj-stage); border-color: var(--sj-line-warm); color: var(--sj-ink); }
.jr-ls-opt-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sj-font-story);
  font-size: 30px;
  line-height: 1.2;
  color: var(--sj-ink);
  text-wrap: pretty;
}
.jr-ls-opt-mark { flex: none; display: flex; align-items: center; color: var(--sj-green-ink); }

/* ---- tap: the word inside a real sentence ---- */
.jr-ls-tappane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.jr-ls-taps { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.jr-ls-taps-wide { flex-direction: column; gap: 12px; }
.jr-ls-tap {
  appearance: none;
  cursor: pointer;
  align-self: center;
  min-height: 84px;
  padding: 0 20px;
  border-radius: 18px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line);
  font-family: var(--sj-font-story);
  font-size: 38px;
  line-height: 1.25;
  color: var(--sj-ink);
  text-align: left;
  text-wrap: pretty;
  box-shadow: none;
}
.jr-ls-taps-wide .jr-ls-tap { align-self: stretch; min-height: 78px; padding: 16px 22px; font-size: 30px; }
.jr-ls-tap-on { background: var(--c-tint); border-color: var(--c-main); box-shadow: 0 4px 0 var(--c-border); }
.jr-ls-tap-right { background: var(--sj-green-tint); border-color: var(--sj-green); }
.jr-ls-tap-rest { background: var(--sj-card); border-color: var(--sj-line); box-shadow: none; }

/* ---- sort: two taps, never a drag ---- */
.jr-ls-sort { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.jr-ls-tray {
  flex: none;
  min-height: 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--sj-card);
  border: 2px dashed var(--sj-line-warm);
  box-sizing: border-box;
}
.jr-ls-loose {
  appearance: none;
  cursor: pointer;
  min-height: 64px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--sj-stage);
  border: 3px solid var(--sj-line-warm);
  font-family: var(--sj-font-story);
  font-size: 28px;
  color: var(--sj-ink);
  box-shadow: none;
}
.jr-ls-loose-on { background: var(--c-tint); border-color: var(--c-main); box-shadow: 0 4px 0 var(--c-border); }
.jr-ls-loose-note { font-family: var(--sj-font); font-weight: 500; font-size: 19px; color: var(--sj-ink); padding: 0 6px; }

.jr-ls-bins { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; }
.jr-ls-bin {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  cursor: default;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line-warm);
  font-family: var(--sj-font);
}
/* A card is in the hand: every box says so. */
.jr-ls-bin-live { cursor: pointer; background: var(--c-tint); border-style: dashed; border-color: var(--c-main); }
.jr-ls-bin-name { font-family: var(--sj-font); font-weight: 600; font-size: 22px; color: var(--sj-ink); }
.jr-ls-bin-live .jr-ls-bin-name { color: var(--c-ink); }
.jr-ls-bin-cards { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.jr-ls-chipcard {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--sj-stage);
  border: 2px solid var(--sj-line-warm);
  font-family: var(--sj-font-story);
  font-size: 26px;
  color: var(--sj-ink);
}
.jr-ls-chipcard-right { background: var(--sj-green-tint); border-color: var(--sj-green); }
.jr-ls-chipcard-rest { background: var(--sj-stage); border-color: var(--sj-line-warm); }
.jr-ls-chipcard-mark { display: flex; align-items: center; color: var(--sj-green-ink); }

/* ---- match ---- */
.jr-ls-match { flex: 1 1 auto; min-height: 0; display: flex; gap: 20px; align-items: center; }
.jr-ls-mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.jr-ls-m {
  appearance: none;
  cursor: pointer;
  min-height: 80px;
  padding: 0 22px;
  border-radius: 20px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line);
  font-family: var(--sj-font-story);
  font-size: 30px;
  color: var(--sj-ink);
  text-align: left;
  box-shadow: none;
}
.jr-ls-m-right { font-size: 28px; }
.jr-ls-m-on { background: var(--c-tint); border-color: var(--c-main); box-shadow: 0 4px 0 var(--c-border); }
.jr-ls-m-done { background: var(--sj-green-tint); border-color: var(--sj-green); cursor: default; }
/* A pairing that does not go together moves and clears. The movement is her signal; the red
   she painted under it is not (palette.js). */
.jr-ls-m-nudge { animation: sj2-nudge 260ms ease; }
@keyframes sj2-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.jr-ls-mlinks { flex: none; width: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jr-ls-mlink { width: 10px; height: 6px; border-radius: 3px; background: var(--sj-line-warm); display: block; }
.jr-ls-mlink-done { width: 26px; background: var(--sj-green); }

/* ---- build: no wrong answer at all ---- */
.jr-ls-build { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.jr-ls-sentence {
  min-height: 120px;
  display: flex;
  align-items: center;
  padding: 22px 26px;
  border-radius: 24px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line);
  box-sizing: border-box;
}
.jr-ls-sentence-on { border-color: var(--c-main); }
.jr-ls-sentence-text {
  font-family: var(--sj-font-story);
  font-size: 38px;
  line-height: 1.25;
  color: var(--sj-ink);
  text-wrap: pretty;
}
.jr-ls-sentence-start { font-weight: 600; color: var(--c-ink); }
.jr-ls-starters { display: flex; flex-wrap: wrap; gap: 12px; }
.jr-ls-starter {
  appearance: none;
  cursor: pointer;
  min-height: 72px;
  padding: 0 24px;
  border-radius: 18px;
  background: var(--sj-card);
  border: 3px solid var(--sj-line);
  font-family: var(--sj-font-story);
  font-size: 30px;
  color: var(--sj-ink);
  box-shadow: none;
}
.jr-ls-starter-on { background: var(--c-tint); border-color: var(--c-main); box-shadow: 0 4px 0 var(--c-border); }

/* ---------------------------------------------------------------- done */
.jr-ls-donechip { display: flex; align-items: center; gap: 14px; }
.jr-ls-donechip-mark {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sj-green-tint);
  border: 2px solid #c3dda9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sj-green-ink);
}
.jr-ls-donechip-text {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sj-green-ink);
}
.jr-ls-done-idea {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--sj-ink);
  text-wrap: pretty;
}
.jr-ls-done-note {
  margin: 0;
  font-family: var(--sj-font-story);
  font-size: 27px;
  line-height: 1.35;
  color: var(--sj-ink);
  max-width: 42ch;
  text-wrap: pretty;
}
/* Sunshine, not red: a second go is worth naming, and it costs nothing. */
.jr-ls-missed { padding: 18px 22px; border-radius: 20px; background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-ls-missed-label {
  margin: 0 0 4px;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sj-sun-ink);
}
.jr-ls-missed-note { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--sj-ink); text-wrap: pretty; }

.jr-ls-done-acts { display: flex; gap: 14px; flex-wrap: wrap; }
.jr-ls-done-primary {
  display: inline-flex;
  align-items: center;
  min-height: 74px;
  padding: 0 30px;
  border-radius: 22px;
  background: var(--sj-orange);
  color: var(--sj-card);
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 23px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
  text-decoration: none;
}
.jr-ls-done-primary:active { transform: translateY(5px); box-shadow: none; }
.jr-ls-done-quiet {
  display: inline-flex;
  align-items: center;
  appearance: none;
  cursor: pointer;
  min-height: 74px;
  padding: 0 26px;
  border-radius: 22px;
  background: var(--sj-card);
  border: 1.5px solid var(--sj-line);
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 21px;
  color: var(--sj-ink);
  text-decoration: none;
}