/* src/components/jr/story/story.css — SJ2 Story flow: title, reader, check, reward, done.
   Every value is measured off
   art-source/design-sj2-2026-09-12/screens/SJ2 Story flow.dc.html.

   THREE OF HER KEYFRAMES ARE NOT HERE, and each is a rule (plan ruling 3; CLAUDE.md's
   hidden-tab rule), all three named in tools/audit/rules_audit.mjs:
     - sj2-fade (a plain opacity fade on the spread and the two dialogs) is DROPPED. There is
       no movement in it to keep, so the card simply appears.
     - sj2-pulse (the microphone dot) keeps its scale and loses its opacity.
     - sj2-rise / sj2-pop are jr.css's, which already lost her fade.
   The two page-turn keyframes below are pure rotateY, so they come across whole. */

.jr-st-abs { position: absolute; inset: 0; }
.jr-st-abs a { text-decoration: none; color: inherit; }
.jr-st-abs button { font-family: var(--sj-font); }

/* ---------------------------------------------------------------- the room */
.jr-st-plate { position: absolute; inset: 0; }

/* Her rule: the reading room belongs to the BOOK. A book with its own backdrop uses it,
   blurred behind the title card and sharp once the book is open. */
.jr-st-backdrop {
  position: absolute;
  inset: -24px;
  display: block;
  background-color: var(--sj-sand);
  background-size: cover;
  background-position: center;
  filter: blur(0px) saturate(.82);
}
.jr-st-backdrop-blur { filter: blur(7px) saturate(.82); }

.jr-st-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(19, 37, 31, .14) 0%, rgba(19, 37, 31, .46) 62%, rgba(19, 37, 31, .62) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, .16) 0%, rgba(19, 37, 31, .1) 100%);
}

/* ---------------------------------------------------------------- 1 · title */
.jr-st-pill {
  position: absolute;
  top: 26px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 0 24px 0 18px;
  border-radius: var(--sj-r-pill);
  background: var(--sj-card);
  border: 1px solid #dbc9a8;
  box-shadow: 0 6px 0 rgba(35, 50, 44, .1);
  font-weight: 700;
  font-size: 20px;
  color: var(--sj-ink);
  cursor: pointer;
}
.jr-st-pill-left { left: 30px; }
.jr-st-pill-right { right: 30px; gap: 10px; padding: 0 22px; font-size: 19px; white-space: nowrap; cursor: default; }
.jr-st-pill-day { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--sj-sun-ink); }

.jr-st-title-stage {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding: 104px 40px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr-st-title-card {
  width: 100%;
  max-width: 1040px;
  max-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 396px) minmax(0, 1fr);
  border-radius: 30px;
  overflow: hidden;
  background: var(--sj-card);
  border: 2px solid #7fb57f;
  box-shadow: 0 12px 0 #cfe3c4, 0 34px 68px rgba(19, 37, 31, .38);
}

.jr-st-cover { position: relative; min-width: 0; display: block; background: var(--sj-teal-tint); }
.jr-st-cover-img {
  position: absolute; inset: 0; display: block;
  background-color: var(--sj-teal-tint); background-size: cover; background-position: center;
}
/* The spine shadow: the cover is attached to the card, not pasted on it. */
.jr-st-cover-spine {
  position: absolute; top: 0; right: 0; bottom: 0; width: 26px; display: block;
  background: linear-gradient(90deg, rgba(19, 37, 31, 0) 0%, rgba(19, 37, 31, .16) 100%);
}

.jr-st-title-body {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  padding: 40px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
}
.jr-st-title-blob {
  position: absolute; right: -160px; bottom: -190px; width: 340px; height: 340px;
  border-radius: 50%; background: var(--sj-sun-tint); opacity: .5; pointer-events: none;
}
.jr-st-title-text { position: relative; }
.jr-st-title-h {
  margin: 0 0 10px; font-weight: 700; font-size: 52px; line-height: 1;
  letter-spacing: -.03em; color: var(--sj-ink); text-wrap: pretty;
}
.jr-st-title-blurb {
  margin: 0; font-size: 22px; line-height: 1.36; font-weight: 500;
  color: var(--sj-ink-soft); max-width: 34ch; text-wrap: pretty;
}

.jr-st-lexi {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 14px 18px 14px 14px; border-radius: 20px; background: #eef7df; border: 1px solid #c3dda9;
}
.jr-st-lexi-face {
  flex: none; width: 60px; height: 60px; border-radius: var(--sj-r-pill); overflow: hidden;
  background: #f7fcef; border: 2px solid #7fb57f; box-shadow: 0 3px 0 #cfe3c4; display: block;
  background-size: cover; background-position: center;
}
.jr-st-lexi-line {
  margin: 0; font-weight: 600; font-size: 19px; line-height: 1.28;
  color: var(--sj-green-ink); text-wrap: pretty;
}

/* Her 84px primary. A real <button> again since 2026-09-13: the shell's go() no longer
   re-mounts a route it is already on (DECISIONS #108), so the label router cannot throw the
   flow away. See startControl() in story.js. */
.jr-st-start {
  position: relative; width: 100%; box-sizing: border-box; appearance: none; cursor: pointer;
  user-select: none;
  min-height: 84px; padding: 0 26px; border-radius: 20px;
  background: var(--sj-orange); border: 1px solid var(--sj-orange-deep); color: #ffffff;
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 14px 26px rgba(200, 74, 34, .24);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1), box-shadow 120ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-start:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }
.jr-st-start-label { font-weight: 700; font-size: 27px; color: #ffffff; }

/* ---------------------------------------------------------------- the 72px bar */
.jr-st-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: 5;
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: var(--sj-card); border-bottom: 1px solid var(--sj-line); box-sizing: border-box;
}
.jr-st-round {
  flex: none; appearance: none; cursor: pointer; width: 48px; height: 48px; 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-st-badge {
  flex: none; width: 48px; height: 48px; border-radius: 11px;
  background: var(--sj-green-tint); border: 1px solid #c3dda9;
  display: flex; align-items: center; justify-content: center; color: var(--sj-green-ink);
}
.jr-st-bar-title { flex: none; white-space: nowrap; font-weight: 600; font-size: 21px; color: var(--sj-ink); }
.jr-st-mode {
  flex: none; font-weight: 600; font-size: 14px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--sj-green-ink); background: var(--sj-green-tint); border: 1px solid #c3dda9;
  border-radius: var(--sj-r-pill); padding: 7px 15px;
}
.jr-st-bar-track {
  flex: 0 1 210px; min-width: 80px; height: 10px; border-radius: var(--sj-r-pill);
  background: var(--sj-line); overflow: hidden;
}
.jr-st-bar-track-warm { background: #dbc9a8; }
.jr-st-bar-fill { display: block; height: 100%; border-radius: var(--sj-r-pill); background: var(--sj-green); }
.jr-st-bar-scene { flex: none; font-weight: 500; font-size: 18px; color: var(--sj-ink); }
.jr-st-bar-gap { flex: 1 1 auto; }

.jr-st-grownup {
  flex: none; appearance: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 18px; border-radius: var(--sj-r-pill);
  background: var(--sj-teal-tint); border: 1px solid #c7e3f3;
  font-weight: 600; font-size: 17px; color: var(--sj-sky-ink); white-space: nowrap;
}
.jr-st-stars {
  flex: none; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px;
  border-radius: var(--sj-r-pill); background: var(--sj-stage); border: 1px solid var(--sj-line);
  font-weight: 600; font-size: 17px; color: var(--sj-ink);
}
.jr-st-stars-sun {
  background: var(--sj-sun-tint); border-color: #f6d98a; font-weight: 700; font-size: 19px; padding: 0 20px;
}
.jr-st-stars-sun svg { color: var(--sj-sun); fill: var(--sj-sun); }

/* ---------------------------------------------------------------- her two safeguards */
.jr-st-paused {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  border-radius: var(--sj-r-pill); background: var(--sj-sun-tint); border: 2px solid #f6d98a;
  box-shadow: 0 12px 28px rgba(35, 50, 44, .2);
}
.jr-st-paused-text { font-weight: 600; font-size: 20px; color: var(--sj-ink); white-space: nowrap; }
.jr-st-paused-btn {
  appearance: none; border: none; cursor: pointer; min-height: 48px; padding: 0 22px;
  border-radius: var(--sj-r-pill); background: var(--sj-ink); color: var(--sj-card);
  font-weight: 700; font-size: 18px; flex: none;
}
.jr-st-redirect {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 19;
  width: min(980px, calc(100% - 68px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 18px; padding: 12px 14px 12px 22px;
  border-radius: 22px; background: var(--sj-teal-tint); border: 2px solid var(--sj-teal-line);
  box-shadow: 0 12px 28px rgba(35, 50, 44, .2);
}
.jr-st-redirect-tag {
  flex: none; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sj-teal-ink); background: var(--sj-card); border: 1px solid var(--sj-teal-line);
  border-radius: var(--sj-r-pill); padding: 8px 14px;
}
.jr-st-redirect-text {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 20px; line-height: 1.25;
  color: var(--sj-ink); text-wrap: pretty;
}

/* ---------------------------------------------------------------- 2 · the reader */
.jr-st-room {
  position: absolute; left: 0; right: 0; top: 72px; bottom: 0; display: block;
  background:
    radial-gradient(circle at 6% 4%, rgba(255, 193, 132, .34), transparent 34%),
    radial-gradient(circle at 96% 10%, rgba(91, 191, 211, .26), transparent 30%),
    radial-gradient(circle at 4% 96%, rgba(251, 215, 194, .5), transparent 26%),
    var(--sj-stage);
}
.jr-st-grass {
  position: absolute; left: 40px; bottom: 26px; width: 120px; height: 76px; display: block;
  background-image: radial-gradient(circle, #c9dfb0 3px, transparent 3.5px);
  background-size: 22px 22px; opacity: .9;
}

.jr-st-reader-body {
  position: absolute; left: 0; right: 0; top: 72px; bottom: 0; box-sizing: border-box;
  padding: 20px 34px 14px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.jr-st-spread-holder {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1360px; perspective: 2000px;
}
.jr-st-spread {
  position: relative; height: 100%; display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  border-radius: 26px; overflow: hidden; background: var(--sj-card); border: 2px solid #7fb57f;
  box-shadow: 0 10px 0 #cfe3c4, 0 24px 44px rgba(26, 54, 48, .16);
}

.jr-st-art { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--sj-teal-tint); }
.jr-st-art-img {
  position: absolute; inset: 0; display: block;
  background-color: var(--sj-teal-tint); background-size: cover; background-position: center;
}
.jr-st-art-top {
  position: absolute; left: 22px; right: 22px; top: 22px; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.jr-st-scenechip,
.jr-st-hear {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px;
  border-radius: var(--sj-r-cta); background: rgba(255, 253, 248, .94);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 4px 12px rgba(35, 50, 44, .12);
  font-weight: 600; font-size: 16px; color: var(--sj-ink); white-space: nowrap;
}
.jr-st-hear { appearance: none; cursor: pointer; }

.jr-st-panel {
  position: relative; min-width: 0; min-height: 0; box-sizing: border-box;
  padding: 30px 34px 26px; display: flex; flex-direction: column; gap: 16px;
  background: var(--sj-card); overflow: hidden;
}
.jr-st-panel-blob {
  position: absolute; right: -150px; bottom: -180px; width: 330px; height: 330px;
  border-radius: 50%; background: var(--sj-sun-tint); opacity: .55; pointer-events: none;
}
.jr-st-panel-head {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.jr-st-turn {
  display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase; color: #e0602a;
  background: #fff0df; border: 1px solid #ffd0b8; border-radius: 12px; padding: 9px 16px; white-space: nowrap;
}
.jr-st-sentence-count { font-size: 17px; font-weight: 500; color: var(--sj-ink); }

/* One sentence a row. Tapping a row lights it and Lexi reads just that one. */
.jr-st-rows {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.jr-st-row {
  appearance: none; cursor: pointer; width: 100%; box-sizing: border-box; text-align: left;
  padding: 10px 14px 10px 20px; border-radius: var(--sj-r-cta);
  background: transparent; border: 1.5px solid transparent; box-shadow: none;
  font-family: var(--sj-font-story); font-size: 30px; line-height: 1.3; color: var(--sj-ink);
  text-wrap: pretty; transition: background 150ms ease, border-color 150ms ease;
}
.jr-st-row-tight { font-size: 28px; }
.jr-st-row:hover { background: var(--sj-stage); }
.jr-st-row-on { background: #fff5d8; border-color: #f5ca7d; box-shadow: inset 5px 0 0 var(--sj-sun); }

.jr-st-vocab {
  position: relative; flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 11px 14px; border-radius: var(--sj-r-cta); background: #eef7df; border: 1px solid #c3dda9;
}
.jr-st-vocab-label {
  margin-right: 4px; font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sj-green-ink); white-space: nowrap;
}
.jr-st-word {
  appearance: none; cursor: pointer; min-height: 38px; padding: 0 12px; border-radius: 10px;
  background: #ffffff; border: 1.5px solid #a9cf96;
  font-family: var(--sj-font-story); font-size: 18px; color: var(--sj-green-ink); white-space: nowrap;
}
.jr-st-word-on { background: var(--sj-green-ink); color: #ffffff; border-color: var(--sj-green-ink); }

.jr-st-meaning {
  position: relative; margin: -6px 0 0; padding: 0 4px;
  font-family: var(--sj-font-story); font-size: 20px; line-height: 1.35; color: var(--sj-ink);
}
.jr-st-meaning strong { font-weight: 700; }

.jr-st-lexibar {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 62px; padding: 8px 10px; border-radius: var(--sj-r-cta);
  background: var(--sj-teal-tint); border: 1px solid #c7e3f3;
}
.jr-st-lexibar-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jr-st-lexibar-face {
  flex: none; width: 44px; height: 44px; border-radius: var(--sj-r-pill); overflow: hidden;
  background: var(--sj-card); border: 2px solid var(--sj-teal); display: block;
  background-size: cover; background-position: center;
}
.jr-st-lexibar-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-st-lexibar-name { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--sj-sky-ink); text-wrap: pretty; }
.jr-st-lexibar-hint { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--sj-sky-ink); text-wrap: pretty; }

.jr-st-readbtn {
  flex: none; appearance: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 16px; border-radius: 12px;
  background: var(--sj-teal-tint); border: 1.5px solid var(--sj-teal-line);
  font-weight: 600; font-size: 16px; color: var(--sj-teal-ink); white-space: nowrap;
}
.jr-st-readbtn-on { background: var(--sj-teal-ink); border-color: var(--sj-teal-ink); color: var(--sj-card); cursor: default; }
.jr-st-wave { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 17px; }
.jr-st-wave-bar {
  width: 4px; height: 100%; border-radius: 2px; background: currentColor; display: block;
  transform-origin: bottom center; animation: sj2-wave .9s ease-in-out infinite;
}
.jr-st-wave-b { animation-delay: .15s; }
.jr-st-wave-c { animation-delay: .3s; }

@keyframes sj2-wave {
  0%, 100% { transform: scaleY(.32); }
  50% { transform: scaleY(1); }
}

/* The turning page, hinged on the gutter. The next spread is already mounted underneath, so
   the leaf only has to be the paper that is leaving. The gutter is where the two pages meet:
   the picture page is 1.32fr against the text page's 1fr, so 56.9% across. */
.jr-st-leaf {
  position: absolute; top: 0; bottom: 0; display: block; z-index: 6; pointer-events: none;
  background-size: cover; background-position: center; backface-visibility: hidden;
}
.jr-st-leaf-next {
  left: 56.9%; width: 43.1%; border-radius: 0 24px 24px 0; transform-origin: left center;
  background-image: linear-gradient(90deg, #e7dcc6 0%, #fff8e8 14%, #fffdf6 40%, #fffdf6 100%);
  box-shadow: -18px 0 34px rgba(19, 37, 31, .26);
  animation: sj2-leaf-next 620ms cubic-bezier(.42, .04, .34, 1) both;
}
.jr-st-leaf-prev {
  left: 0; width: 56.9%; border-radius: 24px 0 0 24px; transform-origin: right center;
  background-image: linear-gradient(270deg, #e7dcc6 0%, #fffcf4 30%, #fffdf6 100%);
  box-shadow: 18px 0 34px rgba(19, 37, 31, .26);
  animation: sj2-leaf-prev 620ms cubic-bezier(.42, .04, .34, 1) both;
}

@keyframes sj2-leaf-next {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes sj2-leaf-prev {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* ---------------------------------------------------------------- the dock */
.jr-st-dock {
  flex: none; width: min(100%, 1500px); margin: 0 auto; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; padding: 10px;
  border: 1px solid rgba(51, 111, 114, .2); border-radius: 17px;
  background: rgba(255, 253, 249, .92); backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(35, 50, 44, .12);
}
.jr-st-dock-left { display: flex; align-items: center; gap: 9px; }
.jr-st-dock-mid { display: flex; align-items: center; justify-content: center; gap: 9px; }
.jr-st-dock-right { display: flex; align-items: center; justify-content: flex-end; }

.jr-st-quiet {
  flex: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 13px;
  background: var(--sj-card); border: 1px solid #dbc9a8; box-shadow: 0 3px 0 #e7ded2;
  font-weight: 700; font-size: 18px; color: var(--sj-ink); white-space: nowrap;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.jr-st-quiet:hover { border-color: #c9b9a8; background: #ffffff; transform: translateY(-1px); }
.jr-st-quiet:active { transform: translateY(3px); box-shadow: none; }

.jr-st-next {
  flex: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; width: max-content; min-height: 48px; padding: 0 18px;
  border-radius: 13px; background: var(--sj-orange); border: 1px solid var(--sj-orange-deep);
  box-shadow: 0 5px 0 var(--sj-orange-deep); font-weight: 700; font-size: 19px; color: #ffffff;
  white-space: nowrap; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.jr-st-next:hover { background: #ef7149; transform: translateY(-1px); box-shadow: 0 7px 0 var(--sj-orange-deep); }
.jr-st-next:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sj-orange-deep); }

/* The microphone. A LEVEL METER: the dot is driven straight off src/shell/jr_mic.js, which
   records nothing, keeps nothing and sends nothing (DECISIONS #66). */
.jr-st-mic {
  flex: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 18px;
  white-space: nowrap; background: #fff0df; border: 1px solid #f4b28f; color: var(--sj-orange-deep);
}
.jr-st-mic-on { background: var(--sj-green-tint); border-color: var(--sj-green); color: var(--sj-green-ink); }
.jr-st-mic-off { background: #fff0ea; border-color: #f4b28f; color: var(--sj-orange-deep); }
.jr-st-mic-meter { flex: none; display: flex; align-items: center; width: 9px; height: 9px; }
.jr-st-mic-bar {
  width: 9px; height: 100%; border-radius: 50%; background: currentColor; display: block;
  transition: height 70ms linear;
}
.jr-st-mic-bar-live { animation: sj2-pulse 1.2s ease-in-out infinite; }

/* Her sj2-pulse faded as well as scaled. The scale is hers; the fade is dropped (ruling 3). */
@keyframes sj2-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.72); }
}

.jr-st-dock-notes { display: flex; align-items: center; gap: 7px; padding: 0 6px; }
/* HER 9px SCENE DOT, WITH A HAND-SIZED HIT AREA BEHIND IT (DECISIONS #126).
   Not one pixel of the dot moves: the target is an invisible box on a pseudo-element, which is
   hit-tested as part of the button. It is 44px TALL, her own chrome minimum, and as wide as the
   dot plus half the 7px gap on each side. It is not 44 wide, and that is deliberate rather than
   a shortfall: five dots sit 7px apart, so a 44px-wide box on each would swallow two neighbours
   whole and whichever one painted last would take every tap in the row. A target that steals
   its neighbour's taps is worse than a small one. The Back and Next buttons beside these do the
   same job at 48px, and jr-st-dot stays named in the auditor as the one for Faith's eye. */
.jr-st-dot {
  position: relative;
  flex: none; appearance: none; cursor: pointer; padding: 0; border: 0; width: 9px; height: 9px;
  border-radius: 50%; background: #dfd6c8; display: block; transition: width 200ms ease;
}
.jr-st-dot::before {
  content: '';
  position: absolute;
  left: -3.5px;
  right: -3.5px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  /* No paint of any kind. This exists only to be tapped. */
}
.jr-st-dot-here { width: 23px; border-radius: var(--sj-r-pill); background: var(--sj-orange); }

.jr-st-note-sun,
.jr-st-note-green {
  font-weight: 600; font-size: 16px; border-radius: var(--sj-r-pill); padding: 9px 16px; text-wrap: pretty;
}
.jr-st-note-sun { color: var(--sj-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-st-note-green { color: var(--sj-green-ink); background: var(--sj-green-tint); border: 1px solid #c3dda9; }

/* ---------------------------------------------------------------- "What would help?" */
.jr-st-help-rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; justify-content: center; padding: 0 34px 16px; pointer-events: none;
}
.jr-st-help {
  pointer-events: auto; width: 100%; max-width: 1360px; box-sizing: border-box;
  padding: 22px 24px 20px; border-radius: var(--sj-r-panel);
  background: var(--sj-card); border: 2px solid var(--sj-line);
  box-shadow: 0 24px 56px rgba(35, 50, 44, .3);
}
.jr-st-help-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.jr-st-help-h { margin: 0 0 4px; font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--sj-ink); }
.jr-st-help-sub { margin: 0; font-size: 18px; font-weight: 500; color: var(--sj-ink); }
.jr-st-help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jr-st-help-card {
  appearance: none; cursor: pointer; text-align: left; min-height: 92px; padding: 16px 18px;
  border-radius: var(--sj-r-card); display: flex; flex-direction: column; gap: 4px;
}
.jr-st-help-title { font-weight: 600; font-size: 19px; color: var(--sj-ink); }
.jr-st-help-line { font-size: 16px; font-weight: 500; }
.jr-st-help-teal { background: var(--sj-teal-tint); border: 1.5px solid #c7e3f3; }
.jr-st-help-teal .jr-st-help-line { color: var(--sj-sky-ink); }
.jr-st-help-green { background: var(--sj-green-tint); border: 1.5px solid #c3dda9; }
.jr-st-help-green .jr-st-help-line { color: var(--sj-green-ink); }
.jr-st-help-sun { background: var(--sj-sun-tint); border: 1.5px solid #f6d98a; }
.jr-st-help-sun .jr-st-help-line { color: var(--sj-orange-deep); }
.jr-st-help-plain { background: var(--sj-card); border: 1.5px solid var(--sj-line); }
.jr-st-help-plain .jr-st-help-line { color: var(--sj-ink); }

/* ---------------------------------------------------------------- the two dialogs */
.jr-st-modal {
  position: absolute; inset: 0; z-index: 30; background: rgba(35, 50, 44, .5);
  display: flex; align-items: center; justify-content: center;
}
.jr-st-modal-card {
  width: 568px; box-sizing: border-box; background: var(--sj-card); border: 2px solid var(--sj-line);
  border-radius: 28px; box-shadow: 0 24px 56px rgba(35, 50, 44, .34); padding: 30px 34px 26px;
  display: flex; flex-direction: column; align-items: center;
}
.jr-st-modal-swap { width: 620px; }
.jr-st-modal-badge {
  width: 64px; height: 64px; border-radius: 20px; background: var(--sj-green-tint);
  border: 1px solid #c3dda9; display: flex; align-items: center; justify-content: center;
  color: var(--sj-green-ink);
}
.jr-st-modal-ring {
  width: 64px; height: 64px; border-radius: var(--sj-r-pill); border: 2px dashed var(--sj-green);
  background: #eaf7ef; display: block;
}
.jr-st-modal-h { margin: 16px 0 6px; font-weight: 700; font-size: 34px; line-height: 1.08; color: var(--sj-ink); text-align: center; }
.jr-st-modal-p { margin: 0 0 22px; font-size: 20px; font-weight: 500; color: var(--sj-ink); text-align: center; text-wrap: pretty; }
.jr-st-modal-row { display: flex; gap: 14px; align-self: stretch; }
.jr-st-modal-go {
  flex: 1.2 1 0; min-width: 0; appearance: none; border: none; cursor: pointer;
  min-height: 62px; padding: 0 20px; border-radius: var(--sj-r-card);
  background: var(--sj-orange); color: var(--sj-card); font-weight: 700; font-size: 21px;
  box-shadow: 0 5px 0 var(--sj-orange-deep);
}
.jr-st-modal-go:active { transform: translateY(5px); box-shadow: none; }
.jr-st-modal-alt,
.jr-st-modal-altlink {
  flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; align-items: center;
  justify-content: center; appearance: none; cursor: pointer; min-height: 62px; padding: 0 20px;
  border-radius: var(--sj-r-card); background: var(--sj-card); border: 1.5px solid var(--sj-line);
  box-shadow: 0 4px 0 var(--sj-line); font-family: var(--sj-font); font-weight: 500; font-size: 21px;
  color: var(--sj-ink); text-decoration: none;
}
.jr-st-why { display: flex; gap: 12px; align-self: stretch; margin-bottom: 18px; }
.jr-st-why-btn {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer; min-height: 56px;
  border-radius: 16px; background: var(--sj-card); border: 2px solid var(--sj-line);
  font-weight: 600; font-size: 19px; color: var(--sj-ink);
}
.jr-st-why-on { background: var(--sj-teal-ink); border-color: var(--sj-teal-ink); color: var(--sj-card); }

/* ---------------------------------------------------------------- 3 · the check */
.jr-st-check-body {
  position: absolute; left: 0; right: 0; top: 72px; bottom: 0; box-sizing: border-box;
  padding: 20px 30px 16px; display: flex; gap: 20px;
}

/* The book, still open. Same card as the reader, so looking back feels like turning back. */
.jr-st-look { flex: 1 1 0; min-width: 0; position: relative; perspective: 2000px; }
.jr-st-look-card {
  position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 20px 16px; border-radius: 26px; overflow: hidden;
  background: var(--sj-card); border: 2px solid #7fb57f;
  box-shadow: 0 10px 0 #cfe3c4, 0 24px 44px rgba(26, 54, 48, .16);
}
.jr-st-look-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.jr-st-look-tag {
  display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sj-green-ink);
  background: #eef7df; border: 1px solid #c3dda9; border-radius: 12px; padding: 10px 16px; white-space: nowrap;
}
.jr-st-look-label { font-weight: 500; font-size: 18px; color: var(--sj-ink); white-space: nowrap; }
.jr-st-look-art {
  position: relative; flex: 1 1 auto; min-height: 0; display: block; border-radius: var(--sj-r-card);
  overflow: hidden; background: var(--sj-teal-tint);
}
.jr-st-look-img { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.jr-st-look-lines { flex: none; display: flex; flex-direction: column; gap: 6px; }
.jr-st-look-line {
  margin: 0; font-family: var(--sj-font-story); font-size: 25px; line-height: 1.34;
  color: var(--sj-ink); text-wrap: pretty;
}
.jr-st-look-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 12px; border-top: 1px solid var(--sj-line);
}
.jr-st-look-dots { display: flex; align-items: center; gap: 8px; }
.jr-st-look-dots .jr-st-dot { cursor: default; }

.jr-st-look-leaf {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 26px;
  display: block; z-index: 6; pointer-events: none; backface-visibility: hidden;
}
.jr-st-look-leaf.jr-st-leaf-next {
  left: 0; width: 100%; border-radius: 26px;
  background-image: linear-gradient(90deg, #f3ead9 0%, #fffcf4 34%, #fffdf6 100%);
  box-shadow: -14px 0 30px rgba(35, 50, 44, .22);
}
.jr-st-look-leaf.jr-st-leaf-prev {
  left: 0; width: 100%; border-radius: 26px;
  background-image: linear-gradient(270deg, #f3ead9 0%, #fffcf4 34%, #fffdf6 100%);
  box-shadow: 14px 0 30px rgba(35, 50, 44, .22);
}

/* The question. Nothing floats: question at the top, answers take the middle, the one orange
   button you press sits at the bottom. */
.jr-st-qpane {
  flex: 1 1 0; min-width: 0; position: relative; box-sizing: border-box;
  background: var(--sj-card); border: 2px solid var(--sj-line); border-radius: 26px;
  box-shadow: 0 10px 0 #f1e7d5, 0 24px 44px rgba(35, 50, 44, .12);
  padding: 22px 26px 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.jr-st-qhead { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.jr-st-qtag {
  font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: #e0602a; background: #fff0df; border: 1px solid #ffd0b8; border-radius: 12px;
  padding: 10px 16px; white-space: nowrap;
}
.jr-st-qhead-right { display: flex; align-items: center; gap: 10px; }
.jr-st-qcount { font-weight: 500; font-size: 17px; color: var(--sj-ink-soft); white-space: nowrap; }
.jr-st-hearq {
  appearance: none; cursor: pointer; width: 48px; height: 48px; border-radius: 12px;
  background: var(--sj-card); border: 1px solid #dbc9a8; box-shadow: 0 3px 0 #e7ded2;
  display: flex; align-items: center; justify-content: center; color: var(--sj-ink);
}
.jr-st-hearq:active { transform: translateY(3px); box-shadow: none; }
.jr-st-qtext {
  position: relative; flex: none; margin: 0; font-weight: 700; font-size: 40px; line-height: 1.06;
  letter-spacing: -.03em; color: var(--sj-ink); text-wrap: pretty;
}

.jr-st-answers {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.jr-st-stack { display: flex; flex-direction: column; gap: 11px; }
.jr-st-hint { margin: 0 0 2px; font-size: 19px; font-weight: 600; color: var(--sj-green-ink); }

/* Template 1 · find the proof: the answer is a tap INSIDE the text. */
.jr-st-proof {
  appearance: none; cursor: pointer; width: 100%; box-sizing: border-box; min-height: 66px;
  padding: 12px 18px; border-radius: 16px; background: var(--sj-stage); border: 2px solid var(--sj-line);
  text-align: left; font-family: var(--sj-font-story); font-size: 28px; line-height: 1.26;
  color: var(--sj-ink); text-wrap: pretty; transition: transform 140ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-proof:hover { transform: translateY(-2px); }
.jr-st-proof.jr-st-opt-again { border-style: dashed; }

/* Template 2 · put it in order. */
.jr-st-order {
  appearance: none; cursor: pointer; width: 100%; box-sizing: border-box; min-height: 78px;
  padding: 10px 16px; border-radius: 16px; background: var(--sj-card); border: 2px solid var(--sj-line);
  display: flex; align-items: center; gap: 16px; text-align: left;
  transition: transform 140ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-order:hover { transform: translateY(-2px); }
.jr-st-order-on { background: var(--sj-teal-tint); border-color: var(--sj-teal); }
.jr-st-order-num {
  flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--sj-stage);
  border: 2px solid var(--sj-line); display: flex; align-items: center; justify-content: center;
  font-family: var(--sj-font); font-weight: 700; font-size: 24px; color: var(--sj-ink);
}
.jr-st-order-on .jr-st-order-num { background: var(--sj-teal); border-color: var(--sj-teal); color: var(--sj-card); }
.jr-st-order-text {
  flex: 1 1 auto; min-width: 0; font-family: var(--sj-font-story); font-size: 27px;
  line-height: 1.24; color: var(--sj-ink);
}
.jr-st-order-reset {
  align-self: flex-start; appearance: none; cursor: pointer; background: none; border: none;
  font-weight: 600; font-size: 17px; color: var(--sj-orange-deep); text-decoration: underline; padding: 4px;
}

/* Template 3 · true or not true. */
.jr-st-tf { display: flex; gap: 14px; }
.jr-st-tf-card {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer; min-height: 180px; padding: 18px;
  border-radius: 20px; background: var(--sj-card); border: 3px solid var(--sj-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  transition: transform 140ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-tf-card:hover { transform: translateY(-3px); }
.jr-st-tf-sel { background: var(--sj-teal-tint); border-color: var(--sj-teal); }
.jr-st-tf-yes { background: var(--sj-green-tint); border-color: var(--sj-green); }
.jr-st-tf-again { background: var(--sj-sand); border-color: #dbc9a8; }
.jr-st-tf-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #ffffff;
}
.jr-st-tf-icon-yes { background: var(--sj-green); }
.jr-st-tf-icon-no { background: var(--sj-orange-deep); }
.jr-st-tf-text { font-weight: 700; font-size: 30px; color: var(--sj-ink); }

/* Template 4 · four options, one right. */
.jr-st-opt {
  appearance: none; cursor: pointer; width: 100%; box-sizing: border-box; min-height: 74px;
  padding: 10px 14px 10px 12px; border-radius: 16px; background: var(--sj-stage);
  border: 2px solid var(--sj-line); display: flex; align-items: center; gap: 15px; text-align: left;
  transition: transform 140ms cubic-bezier(.2, .75, .25, 1), border-color 140ms, background-color 140ms;
}
.jr-st-opt:hover { transform: translateY(-2px); }
.jr-st-opt-letter {
  flex: none; width: 50px; height: 50px; border-radius: 13px; background: var(--sj-card);
  border: 2px solid var(--sj-line); display: flex; align-items: center; justify-content: center;
  font-family: var(--sj-font); font-weight: 700; font-size: 23px; color: var(--sj-ink);
}
.jr-st-opt-text {
  flex: 1 1 auto; min-width: 0; font-family: var(--sj-font-story); font-size: 28px;
  line-height: 1.24; color: var(--sj-ink); text-wrap: pretty;
}

/* The three states a row can be in AFTER the commit, and the one before it. There is no red
   anywhere: the not-yet state is her warm sand. */
.jr-st-opt-sel { background: var(--sj-teal-tint); border-color: var(--sj-teal); }
.jr-st-opt-sel .jr-st-opt-letter { background: var(--sj-teal); border-color: var(--sj-teal); color: var(--sj-card); }
.jr-st-opt-yes { background: #eaf7ef; border-color: var(--sj-green); }
.jr-st-opt-yes .jr-st-opt-letter { background: var(--sj-green); border-color: var(--sj-green); color: var(--sj-card); }
.jr-st-opt-again { background: var(--sj-sand); border-color: #dbc9a8; }
.jr-st-opt-again .jr-st-opt-letter { background: #dbc9a8; border-color: #dbc9a8; color: var(--sj-card); }

.jr-st-qfoot { position: relative; flex: none; display: flex; flex-direction: column; gap: 12px; }
.jr-st-verdict {
  display: flex; align-items: center; gap: 13px; border-radius: 16px; padding: 14px 18px;
  border: 2px solid transparent;
}
.jr-st-verdict-yes { background: #eaf7ef; border-color: var(--sj-green-line); }
.jr-st-verdict-again { background: #fff8e6; border-color: var(--sj-sun-line); }
.jr-st-verdict-mark {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 19px; color: #ffffff;
}
.jr-st-verdict-yes .jr-st-verdict-mark { background: var(--sj-green); }
.jr-st-verdict-again .jr-st-verdict-mark { background: var(--sj-sun-ink); }
.jr-st-verdict-text {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 19px; line-height: 1.3;
  color: var(--sj-ink); text-wrap: pretty;
}

.jr-st-cta {
  appearance: none; min-height: 68px; padding: 0 26px; border-radius: 20px;
  font-weight: 700; font-size: 23px; cursor: pointer;
  background: var(--sj-orange); color: #ffffff; border: 1px solid var(--sj-orange-deep);
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 10px 20px rgba(200, 74, 34, .2);
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1), box-shadow 120ms;
}
.jr-st-cta:active { transform: translateY(5px); box-shadow: none; }
.jr-st-cta-off {
  cursor: not-allowed; background: #f7f1e3; color: #7b6b55;
  border: 1px solid #e7ded2; box-shadow: none;
}

/* ---------------------------------------------------------------- 4 · the log row */
.jr-st-final {
  position: absolute; inset: 0; display: block; background-color: var(--sj-teal-tint);
  background-size: cover; background-position: center;
}
.jr-st-card-stage {
  position: relative; z-index: 3; box-sizing: border-box; height: 100%;
  padding: 92px 40px 28px; display: flex; align-items: center; justify-content: center;
}
.jr-st-card-stage-done { padding: 70px 40px 34px; }
.jr-st-card {
  width: 100%; max-width: 940px; box-sizing: border-box; background: var(--sj-card);
  border: 2px solid var(--sj-line); border-radius: 30px;
  box-shadow: 0 12px 0 #efe2cc, 0 30px 60px rgba(26, 54, 48, .3);
  padding: 24px 38px 26px; display: flex; flex-direction: column; align-items: center;
}
.jr-st-card-done { max-width: 860px; padding: 30px 40px; }

.jr-st-tickbox {
  width: 68px; height: 68px; border-radius: 19px; background: var(--sj-green);
  box-shadow: 0 5px 0 #2f7a3a; display: flex; align-items: center; justify-content: center; color: #ffffff;
}
.jr-st-tickbox-big { width: 74px; height: 74px; border-radius: 20px; }
.jr-st-eyebrow {
  margin: 12px 0 5px; font-weight: 700; font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sj-green-ink);
}
.jr-st-cheer {
  margin: 0 0 6px; text-align: center; font-weight: 700; font-size: 48px; line-height: 1.02;
  letter-spacing: -.03em; color: var(--sj-ink);
}
.jr-st-lede {
  margin: 0 0 16px; text-align: center; font-size: 20px; font-weight: 500; line-height: 1.34;
  color: var(--sj-ink-soft); max-width: 54ch; text-wrap: pretty;
}

.jr-st-stats {
  align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.jr-st-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 12px 10px; border-radius: 16px;
}
.jr-st-stat strong { font-weight: 700; font-size: 27px; color: var(--sj-ink); }
.jr-st-stat span { font-size: 16px; font-weight: 600; }
.jr-st-stat-green { background: #eef7df; border: 1px solid #c3dda9; }
.jr-st-stat-green span { color: var(--sj-green-ink); }
.jr-st-stat-sky { background: var(--sj-teal-tint); border: 1px solid #c7e3f3; }
.jr-st-stat-sky span { color: var(--sj-sky-ink); }
.jr-st-stat-sun { background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-st-stat-sun span { color: #8a5c07; }

/* Open and read are two columns and are never collapsed into one (her handoff §11). */
.jr-st-log {
  align-self: stretch; border: 1.5px solid var(--sj-line); border-radius: var(--sj-r-card);
  overflow: hidden; background: #fffcf4;
}
.jr-st-log-head,
.jr-st-log-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 100px 100px; align-items: center;
}
.jr-st-log-head {
  padding: 8px 18px; background: #f7f1e3; border-bottom: 1.5px solid var(--sj-line);
  font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sj-ink-soft);
}
.jr-st-log-r { text-align: right; }
.jr-st-log-row { padding: 0 18px; min-height: 42px; background: #fffcf4; border-bottom: 1px solid #f2e9d8; }
.jr-st-log-tonight { background: var(--sj-green-tint); }
.jr-st-log-night { font-weight: 700; font-size: 18px; color: var(--sj-ink); }
.jr-st-log-book {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--sj-font-story); font-size: 20px; color: var(--sj-ink);
}
.jr-st-log-open { text-align: right; font-weight: 500; font-size: 18px; color: var(--sj-ink-soft); }
.jr-st-log-read { text-align: right; font-weight: 700; font-size: 18px; color: var(--sj-ink); }

.jr-st-lognote {
  align-self: stretch; margin: 9px 0 0; font-size: 16px; font-weight: 500; line-height: 1.34;
  color: var(--sj-ink-soft); text-wrap: pretty;
}
.jr-st-flags {
  align-self: stretch; margin-top: 9px; display: flex; align-items: center; font-weight: 600;
  font-size: 17px; color: var(--sj-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a;
  border-radius: var(--sj-r-cta); padding: 10px 16px; text-wrap: pretty;
}

.jr-st-nextwrap { align-self: stretch; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.jr-st-nextbook {
  appearance: none; cursor: pointer; width: 100%; text-align: left; display: flex;
  align-items: center; gap: 14px; min-height: 84px; padding: 10px 20px 10px 10px;
  border-radius: var(--sj-r-card); background: var(--sj-orange); border: 1px solid var(--sj-orange-deep);
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 12px 24px rgba(200, 74, 34, .2);
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1), box-shadow 120ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-nextbook:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }
.jr-st-nextbook svg { flex: none; color: #ffffff; }
.jr-st-next-thumb {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 13px;
  overflow: hidden; background: var(--sj-sand); display: block;
}
.jr-st-next-img { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.jr-st-next-text { flex: 1 1 auto; min-width: 0; }
.jr-st-next-kicker {
  display: block; font-weight: 700; font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: #ffe3d2;
}
.jr-st-next-title { display: block; font-weight: 700; font-size: 25px; line-height: 1.1; color: #ffffff; text-wrap: pretty; }
.jr-st-next-meta { display: block; font-size: 16px; font-weight: 600; color: #ffe3d2; }

.jr-st-nextrow { display: flex; gap: 12px; align-self: stretch; }
.jr-st-quiet-wide {
  flex: 1 1 auto; appearance: none; cursor: pointer; min-height: 56px; padding: 0 22px;
  border-radius: var(--sj-r-cta); background: var(--sj-card); border: 1px solid #dbc9a8;
  box-shadow: 0 3px 0 #e7ded2; font-weight: 700; font-size: 19px; color: var(--sj-ink);
}
.jr-st-quiet-wide:active { transform: translateY(3px); box-shadow: none; }
.jr-st-quiet-link {
  flex: 0 0 240px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: var(--sj-r-cta); background: var(--sj-card);
  border: 1px solid #dbc9a8; box-shadow: 0 3px 0 #e7ded2; font-weight: 700; font-size: 19px; color: var(--sj-ink);
}

.jr-st-bigcta {
  appearance: none; cursor: pointer; min-height: 70px; padding: 0 30px; border-radius: var(--sj-r-card);
  background: var(--sj-orange); border: 1px solid var(--sj-orange-deep); color: #ffffff;
  font-weight: 700; font-size: 25px;
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 12px 24px rgba(200, 74, 34, .2);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform 120ms cubic-bezier(.2, .75, .25, 1), box-shadow 120ms cubic-bezier(.2, .75, .25, 1);
}
.jr-st-bigcta:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sj-orange-deep); }
.jr-st-bigcta-wide {
  align-self: stretch; min-height: 74px; font-size: 27px; gap: 14px; margin-bottom: 12px;
  box-shadow: 0 5px 0 var(--sj-orange-deep), 0 14px 28px rgba(200, 74, 34, .22);
}
.jr-st-underlink {
  align-self: center; min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 700; font-size: 19px; color: var(--sj-orange-deep); text-decoration: underline;
}

/* ---------------------------------------------------------------- 5 · all done */
/* Rover is staged: feet on the ground, cropped by the frame, standing beside the card rather
   than in a column of his own. */
.jr-st-rover {
  position: absolute; right: -6px; bottom: 0; z-index: 2; width: 320px; height: 470px;
  display: block; background-size: contain; background-repeat: no-repeat; background-position: bottom right;
}
.jr-st-done-h {
  margin: 0 0 8px; text-align: center; font-weight: 700; font-size: 56px; line-height: 1.01;
  letter-spacing: -.03em; color: var(--sj-ink); text-wrap: pretty;
}
.jr-st-done-p {
  margin: 0 0 20px; text-align: center; font-size: 21px; font-weight: 500; line-height: 1.36;
  color: var(--sj-ink-soft); max-width: 46ch; text-wrap: pretty;
}
.jr-st-tonight {
  align-self: stretch; display: flex; align-items: center; gap: 16px; padding: 12px;
  border-radius: 20px; background: #fffcf4; border: 1.5px solid var(--sj-line); margin-bottom: 16px;
}
.jr-st-done-thumb {
  position: relative; flex: none; width: 84px; height: 84px; border-radius: var(--sj-r-cta);
  overflow: hidden; background: var(--sj-teal-tint); display: block;
}
.jr-st-done-img { position: absolute; inset: 0; display: block; background-size: cover; background-position: center; }
.jr-st-tonight-text { flex: 1 1 auto; min-width: 0; }
.jr-st-tonight-kicker {
  display: block; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sj-green-ink); margin-bottom: 3px;
}
.jr-st-tonight-title { display: block; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--sj-ink); text-wrap: pretty; }
.jr-st-tonight-chips { flex: none; display: flex; gap: 9px; }
.jr-st-chip-sky,
.jr-st-chip-sun {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px;
  border-radius: var(--sj-r-pill); padding: 9px 16px; white-space: nowrap;
}
.jr-st-chip-sky { color: var(--sj-sky-ink); background: var(--sj-teal-tint); border: 1px solid #c7e3f3; }
.jr-st-chip-sun { color: var(--sj-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-st-chip-sun svg { color: var(--sj-sun); fill: var(--sj-sun); }