/* H1: See It, Say It layout and the sisi-* classes (DESIGN-SISI-1 1.2, 1.3, 1.4, 2). Tokens and components come from ssi.css;
   nothing here adds a color of its own. Laptop first (P-D38): 1366 by 768, usable down to a viewport height of 600. */

[hidden] { display: none !important; }
.sisi-grow { flex: 1 1 auto; }
.sisi-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.math { font-family: "Cambria Math", "STIX Two Math", "Noto Sans Math", serif; }

body { min-height: 100vh; padding: 0 24px; display: flex; flex-direction: column; }

/* ---------- top bar (2.1) ---------- */
#topbar { height: 64px; flex: 0 0 64px; display: flex; align-items: center; gap: 14px; }
#wordmark { display: flex; gap: 8px; padding: 8px 16px 6px; border-radius: 16px; border-bottom-width: 5px; font-size: 26px; }
#wordmark-2 { color: var(--go-deep); }
#mode-pill { display: flex; align-items: center; gap: 8px; background: var(--ink); color: #FFFFFF; border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 15px; }
#binder-btn { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; background: #FFFFFF; }
#binder-count { color: var(--ink-2); }
#checks { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 800; font-size: 15px; }
#checks-pips { display: inline-flex; gap: 4px; }
.sisi-pip { width: 14px; height: 14px; border-radius: 4px; background: #D5DEE8; }
.sisi-pip.is-on { background: var(--go); }
#checks-num.display { font-size: 22px; }
#pause-btn { width: 48px; height: 48px; padding: 0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }

/* ---------- the two columns (1.2): width 1100 and up ---------- */
#play { flex: 1 1 auto; min-height: 536px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr); grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 0 0 20px; }

/* F13 (A8-11): at width 1100 and up the page is exactly the viewport tall (never shorter than 600): the two columns are fixed-height
   grid rows, #steps scrolls inside the Say it column, and the hotbar and "Check my proof" stay on screen. */
@media (min-width: 1100px) {
  body { height: 100vh; min-height: 600px; }
  #play > section { min-height: 0; max-height: 100%; }
}

/* ---------- See it (2.2) ---------- */
#see-it { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
/* F13: the head is a fixed two-line height (52 px) so a wrapping hint never moves the plate */
.see-it__head { flex: 0 0 52px; height: 52px; display: flex; align-items: center; gap: 12px; }
.see-it__head h2, .say__head h2 { margin: 0; font-size: 26px; }
#stage-hint { flex: 1 1 auto; margin: 0; font-weight: 700; font-size: 14px; line-height: 1.2; max-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ink-2); min-width: 0; }
#piece-count { font-weight: 800; font-size: 14px; color: var(--ink-2); }
#view-controls { display: flex; gap: 8px; margin-left: auto; }
#zoom-out, #zoom-in { width: 40px; height: 48px; padding: 0; }
#view-home { width: 220px; height: 48px; }
#view-home[aria-disabled="true"] { opacity: 0.55; }
#stage { flex: 1 1 auto; min-height: 0; }
#figure { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; }
#hotbar { flex: 0 0 56px; min-height: 56px; display: grid; grid-template-columns: repeat(6, minmax(96px, 1fr)) 64px; gap: 10px; }
.sisi-hot { position: relative; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 14px; }
.sisi-hot kbd { position: absolute; right: 6px; top: 4px; font: 800 11px var(--font-ui); color: var(--ink-3); }
.sisi-hot.btn--ink kbd { color: #9FB1CC; }
.sisi-hot[aria-disabled="true"] { opacity: 0.45; }

/* the voice strip (2.2): top left, 14 px inset, at most 70 percent of the plate */
/* F14: the band is reserved, not toggled. The strip keeps its layout box when idle (visibility, never display or [hidden]) so the
   figure's fit always leaves 72 px clear at the top of the plate and the figure never jumps when a line comes or goes. */
#stage { --voice-band: 72px; }
.sisi-voice { position: absolute; left: 14px; top: 14px; z-index: 2; max-width: 70%; min-height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #FFFFFF; border-radius: 16px; padding: 6px 14px 6px 6px; }
.sisi-voice[data-on="false"] { visibility: hidden; }
.sisi-voice[data-collapsed="true"] { padding-right: 6px; }
.sisi-voice[data-collapsed="true"] #voice-text { display: none; }
.sisi-voice #voice-mf { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; margin: 0; padding: 0; border-radius: 50%; background: #3FA34D; border: 3px solid #FFFFFF; color: #FFFFFF; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sisi-voice #voice-mf:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.sisi-voice #voice-text { font-weight: 700; font-size: 15px; line-height: 1.25; }

/* the callout (2.3) and the chooser (2.4) */
.sisi-callout { position: absolute; z-index: 3; width: 300px; max-height: calc(100% - 32px); overflow: auto; background: #FFFFFF; border: 3px solid var(--ink); border-bottom-width: 7px; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; right: 16px; bottom: 16px; }
.sisi-callout[data-corner="tl"] { left: 16px; right: auto; top: 16px; bottom: auto; }
.sisi-callout[data-corner="tr"] { right: 16px; left: auto; top: 16px; bottom: auto; }
.sisi-callout[data-corner="bl"] { left: 16px; right: auto; bottom: 16px; top: auto; }
.sisi-callout[data-corner="br"] { right: 16px; left: auto; bottom: 16px; top: auto; }
.sisi-callout__label { font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
#callout-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; min-height: 32px; padding: 0; }
.sisi-chooser { position: absolute; z-index: 4; width: 220px; max-height: 296px; overflow: auto; background: #FFFFFF; border: 3px solid var(--ink); border-bottom-width: 6px; border-radius: 14px; }
.sisi-chooser [role="option"] { min-height: 48px; display: flex; align-items: center; padding: 0 12px; font-weight: 800; }
.sisi-chooser [role="option"][aria-selected="true"], .sisi-chooser [role="option"]:hover { background: var(--sun-soft); }
.sisi-ghost { opacity: 0.55; pointer-events: none; }

/* ---------- Say it (2.6 to 2.9) ---------- */
#say-it { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
#goal { flex: 0 0 auto; min-height: 72px; background: var(--sun); border-radius: 18px; border-bottom: 6px solid var(--sun-deep); padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.sisi-goal__label { font-weight: 900; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
/* F13: the banner grows to two lines (the "Set a goal" line) inside the column, never over the Say it panel */
#goal > div { flex: 1 1 auto; min-width: 0; }
#goal-text { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
#say-panel { flex: 1 1 auto; min-height: 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.say__head { display: flex; align-items: center; gap: 12px; }
#step-count { font-weight: 800; font-size: 14px; color: var(--ink-2); }
#show-all { margin-left: auto; min-height: 40px; height: 40px; padding: 0 12px; }
#steps { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.say__foot { display: flex; flex-direction: column; gap: 8px; }
#check-note { margin: 0; font-size: 14px; color: var(--ink-2); }
#check-btn { height: 56px; width: 100%; font-size: 24px; border-radius: 16px; border-bottom-width: 6px; }
#everything { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; z-index: 5; background: #FFFFFF; border-radius: var(--r-lg); border-bottom: var(--bevel-lg) solid var(--bevel); padding: 14px; overflow: auto; }

/* proof rows (2.7): the new states are built from ssi.css tokens only */
.sisi-step--active { border: 3px solid var(--ink); border-bottom-width: 6px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.sisi-step--staged { background: #FFFFFF; border: 2px solid var(--bevel); border-radius: 16px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.sisi-step--miss { background: var(--sun-soft); border-left: 3px solid var(--sun-deep); border-radius: 16px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- dialogs (2.10 to 2.14) over the scrim ---------- */
.sisi-scrim { position: fixed; inset: 0; background: rgba(20, 33, 61, 0.55); }
dialog.sisi-dialog { border: 0; padding: 24px; color: var(--ink); width: min(520px, calc(100vw - 32px)); }
dialog.sisi-dialog::backdrop { background: rgba(20, 33, 61, 0.55); }
dialog.sisi-dialog h2 { margin: 0 0 8px; font-size: 28px; }
dialog.sisi-dialog p { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.sisi-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sisi-dialog__actions .btn, #share-copy, #share-close { min-height: 48px; padding: 0 18px; font-size: 16px; }
#share-link { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 10px 12px; font: 700 14px var(--font-ui); border: 3px solid var(--bevel); border-radius: var(--r-md); }
#share-note { min-height: 1em; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
dialog#binder { width: min(1220px, calc(100vw - 144px)); height: min(664px, calc(100vh - 104px)); max-width: none; padding: 20px; }
dialog#binder[open] { display: flex; flex-direction: column; gap: 12px; }
dialog#binder > header { display: flex; align-items: center; gap: 14px; }
dialog#binder > header h2 { margin: 0; }
#binder-close { margin-left: auto; width: 48px; height: 48px; padding: 0; }
.sisi-binder__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 184px minmax(0, 1fr) 300px; gap: 18px; }
#binder-grid { display: flex; flex-wrap: wrap; gap: 14px; overflow: auto; }

/* ---------- stacked layout (1.3): width 700 to 1099, and below ---------- */
@media (max-width: 1099px) {
  #play { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #stage { flex: 0 0 auto; height: clamp(320px, 58vh, 560px); }
  #say-panel { min-height: 420px; }
  #hotbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #topbar { flex-wrap: wrap; height: auto; flex: 0 0 auto; padding: 8px 0; }
}
@media (max-height: 599px) { body { height: auto; min-height: 600px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- V16: the voice toggle and first launch card, the hint button and panel, the shortest proof (structure only until the art pass) ---------- */
#voice-toggle { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; background: #FFFFFF; font-size: 14px; }
#voice-toggle[aria-pressed="true"] { background: var(--sun-soft); }
.sisi-voice { flex-wrap: wrap; }
.sisi-voice #voice-text { flex: 1 1 auto; min-width: 0; }
.sisi-voice #voice-play { flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: #FFFFFF; }
.sisi-voice[data-collapsed="true"] #voice-play { display: none; }
#voice-ask { flex: 1 0 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); }
#voice-ask p { margin: 0 0 8px; font-weight: 700; font-size: 14px; line-height: 1.25; }
.sisi-voice__ask-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sisi-voice__ask-actions .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }

.say__actions { display: flex; gap: 10px; align-items: stretch; }
#hint-btn { flex: 0 0 auto; height: 56px; padding: 0 16px; font-size: 16px; border-radius: 16px; }
.say__actions #check-btn { flex: 1 1 auto; width: auto; }
#hint-panel, #shortest { flex: 0 1 auto; min-height: 0; max-height: 220px; overflow: auto; box-sizing: border-box; padding: 10px 12px; background: #FFFFFF; border: 2px solid var(--bevel); border-radius: 16px; }
#hint-panel { border-left: 6px solid var(--sun-deep); }
.sisi-hint__bar, .sisi-shortest__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sisi-hint__bar { justify-content: flex-end; }
.sisi-hint__bar .btn, .sisi-shortest__bar .btn { min-height: 32px; height: 32px; padding: 0 10px; font-size: 13px; }
.sisi-hint { margin: 4px 0 10px; }
.sisi-hint__head, .sisi-shortest__title { margin: 0 0 4px; font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.sisi-hint__line, .sisi-shortest__compare { margin: 0 0 6px; font-weight: 700; font-size: 14px; line-height: 1.3; }
.sisi-hint__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.sisi-hint__chip { border: 0; background: none; padding: 0; cursor: pointer; }
.sisi-hint__chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.sisi-hint__step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sisi-hint__step .btn { min-height: 40px; }
.step.is-hinted { outline: 3px dashed var(--sun-deep); outline-offset: 1px; }
.sisi-hint__tag { align-self: flex-start; display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 900; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.sisi-shortest__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sisi-shortest__row { display: flex; align-items: center; gap: 10px; }

/* ---------- PR1: the start screen, the subject picker and the Practice list (structure; the art pass restyles) ---------- */
#back-practice { height: 48px; padding: 0 16px; background: #FFFFFF; }
#start { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: var(--sky); padding: 24px; }
.start__wrap { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.start__brand { margin: 0; font-size: 22px; color: #FFFFFF; }
.start__h1 { margin: 0; font-size: 40px; color: #FFFFFF; }
.start__h2 { margin: 0 0 10px; font-size: 26px; color: #FFFFFF; }
.start__lead { margin: 0; font-weight: 700; font-size: 16px; color: #FFFFFF; }
.start__n { font: 800 14px var(--font-ui); letter-spacing: 0; color: var(--ink); background: #FFFFFF; border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.start__top { display: flex; align-items: center; gap: 14px; }
.start__top .btn { height: 48px; padding: 0 16px; background: #FFFFFF; }
.start__count { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--ink); background: #FFFFFF; border-radius: 999px; padding: 8px 16px; }
.start__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.start__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 200px; padding: 24px; text-align: left; cursor: pointer; border-top: 0; border-left: 0; border-right: 0; }
.start__card.is-inert { opacity: 0.7; cursor: default; }
.start__card-title { font-size: 34px; }
.start__card-body { font-weight: 700; font-size: 17px; color: var(--ink-2); }
.start__tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 13px; border-radius: 8px; padding: 4px 10px; background: var(--chip); color: var(--ink); border: 2px solid var(--bevel); }
.start__tag--last { background: var(--sun-soft); border-color: var(--sun-deep); }
.start__tag--proved { background: #EAF8EF; border-color: var(--go-deep); color: var(--go-deep); }
.start__check { display: inline-flex; }
.start__menu { display: flex; flex-direction: column; gap: 14px; }
.start__big { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 28px; min-height: 120px; text-align: left; }
.start__big-title { font-size: 34px; }
.start__big-body { font-weight: 700; font-size: 17px; }
.start__row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 24px; min-height: 76px; text-align: left; background: #FFFFFF; }
.start__row-title { font-weight: 900; font-size: 20px; }
.start__row-body { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.start__back { align-self: flex-start; padding: 0 18px; min-height: 48px; }
.start__level { display: flex; flex-direction: column; }
.start__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.start__board { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 96px; padding: 14px 16px; text-align: left; cursor: pointer; border-top: 0; border-left: 0; border-right: 0; }
.start__board-title { font-weight: 900; font-size: 18px; line-height: 1.2; }
.start__board:focus-visible, .start__card:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.start__band { margin: 0 0 12px; background: rgba(255, 255, 255, 0.35); border-radius: var(--r-md); padding: 10px 14px; }
.start__band > summary { cursor: pointer; font-size: 22px; color: var(--ink); }
.start__band[open] > summary { margin-bottom: 12px; }
@media (max-width: 720px) { .start__cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PR2: the figureless layout for calculus (structure; the art pass restyles) ---------- */
/* body[data-subject] is set by the host from the state's plugin. The figure, its toolbar and the callout give way to the statement builder (#calc). */
#calc { display: none; }
body[data-subject="calculus"] #figure, body[data-subject="calculus"] #hotbar, body[data-subject="calculus"] #view-controls,
body[data-subject="calculus"] #piece-count, body[data-subject="calculus"] #stage-hint, body[data-subject="calculus"] #callout,
body[data-subject="calculus"] #chooser, body[data-subject="calculus"] #sr-parts { display: none !important; }
body[data-subject="calculus"] #calc { display: flex; flex-direction: column; gap: 12px; position: absolute; left: 0; right: 0; bottom: 0; top: 126px; padding: 6px 18px 18px; overflow-y: auto; }
.calc__build { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 148px; }
.calc__line { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.calc__waits { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink-2); border-left: 4px solid var(--sun); padding-left: 10px; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.calc__chip { padding: 6px 12px; min-height: 40px; font-size: 15px; text-align: left; }
.calc__chip[aria-pressed="true"] { background: var(--sun); border-bottom-color: var(--sun-deep); }
.calc__sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--panel); border-radius: var(--r-md); border-bottom: var(--bevel-sm) solid var(--bevel); padding: 12px 14px; font-weight: 800; font-size: 20px; }
.calc__slot { font: 800 18px var(--font-ui); min-height: 40px; padding: 4px 8px; border: 2px solid var(--bevel); border-radius: var(--r-sm); background: var(--chip); color: var(--ink); }
.calc__slot:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.calc__note { margin: 0; font-weight: 800; font-size: 14px; color: var(--ink); min-height: 1.2em; }
.calc__add { align-self: flex-start; padding: 0 20px; min-height: 48px; }
.calc__add[aria-disabled="true"] { opacity: 0.6; }
body[data-subject="calculus"] #calc > * { flex: 0 0 auto; }

/* ---------- F19 (P-D52): drawn parallel and perpendicular icons; hover and focus look of rows and the goal banner ---------- */
.sisi-gi { flex: none; stroke: currentColor; }
.sisi-glyph .sisi-gi { width: 1.1em; height: 1.1em; }
#steps > li:hover:not(:has(.sisi-step__empty)), #steps > li:focus-visible, #goal:hover, #goal:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
#steps > li:focus-visible, #goal:focus-visible { outline-style: dashed; }

/* ---------- F26 (P-D62): the trail you can follow, the wordmark as the way home, "You were here" on a list card (structure; the art pass restyles) ---------- */
button#wordmark { border-top: 0; border-left: 0; border-right: 0; border-bottom: 5px solid var(--bevel); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
button#wordmark:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
/* the trail is a 22 px line under a 56 px top bar (the bar was 64): the plate and the step list give up 14 px between them, not 30 */
#crumbs { flex: 0 0 22px; height: 22px; margin: 0; display: flex; align-items: center; min-width: 0; }
@media (min-width: 1100px) { #topbar { height: 56px; flex: 0 0 56px; } }
.crumbs__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.crumbs__item { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 800; font-size: 13px; line-height: 1.2; white-space: nowrap; flex: 0 0 auto; }
.crumbs__item:last-child { flex: 0 1 auto; overflow: hidden; }
.crumbs__link, .crumbs__here, .crumbs__text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; padding: 1px 10px; background: #FFFFFF; color: var(--ink); }
.crumbs__link { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.crumbs__link:hover { background: var(--sun-soft); }
.crumbs__link:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.crumbs__here { font-weight: 900; background: var(--sun-soft); border-bottom: 3px solid var(--sun-deep); }
.crumbs__sep { color: #FFFFFF; font-weight: 900; }
.crumbs--start { height: auto; flex: 0 0 auto; margin: 0; }
.crumbs--start .crumbs__item { font-size: 15px; }
.crumbs--start .crumbs__link, .crumbs--start .crumbs__here, .crumbs--start .crumbs__text { padding: 3px 12px; }
.start__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.start__board.is-here { outline: 4px solid var(--sun); outline-offset: 2px; }

/* ---------- F26 (TG3, DESIGN-SISI-3 4.2 and 4.4): the Targets section between the goal and the Say it panel; the view fills the switch and the body ---------- */
:root { --sisi-miss: #D7263D; }
#targets { flex: 0 0 auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.targets__head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.targets__head h2 { margin: 0; font-size: 20px; }
.targets__switch { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
#targets-toggle { margin-left: auto; min-height: 36px; height: 36px; padding: 0 12px; font-size: 14px; }
.targets__body { display: flex; flex-direction: column; gap: 6px; }
body[data-subject="calculus"] #targets { display: none !important; }
/* F29: a folded section is a slim bar (about 48 tall), so the Say it column keeps the room for its quick picks and the binder step */
#targets[data-open="false"] { padding-top: 6px; padding-bottom: 6px; }

/* ---------- GU1 (W8, FIX-BRIEF-GEOMETRY-1 U1 to U9, U13, U14): the right column's height, the hint, the check button, the home and the tags ---------- */
/* U1: Targets is a one-line bar until the player opens it, and Say it takes the rest of the column */
#targets[data-open="false"] { padding: 4px 12px; }
#targets[data-open="false"] .targets__head { min-height: 40px; }
#say-it { gap: 10px; }
#say-panel { padding: 10px 14px 12px; gap: 4px; }
#say-panel #steps { min-height: 96px; }
.say__head { min-height: 36px; }
.say__foot { gap: 6px; }
#check-note { min-height: 18px; line-height: 1.25; font-size: 14px; font-weight: 700; }
#check-btn, #hint-btn, #next-btn { height: 52px; }
/* a finished row and the active row keep the statement, its reason tag and its buttons on one line, so three rows and four cards fit */
#steps > li.step { padding: 6px 10px; gap: 8px; min-height: 0; }
#steps > li.step .sisi-step__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
#steps > li.step .step__s { font-size: 17px; flex-grow: 0; }
#steps > li.sisi-step--active { flex-direction: row; align-items: flex-start; padding: 8px 10px; gap: 8px; }
#steps > li.sisi-step--active .sisi-step__body { align-items: center; }
#steps > li.sisi-step--active .sisi-step__why { order: 1; font-size: 16px; font-weight: 900; }
#steps > li.sisi-step--active #step-binder { order: 2; margin-left: auto; min-height: 32px; height: 32px; padding: 0 10px; font-size: 13px; }
#steps > li.sisi-step--active .sisi-picks { order: 3; flex: 1 0 100%; }
#steps > li.sisi-step--active .sisi-picks__grid { gap: 6px; }
#steps .rcard--sm { min-height: 0; }
#steps .rcard--sm .rcard__band { font-size: 10px; padding: 3px 8px; }
#steps .rcard--sm .rcard__name { font-size: 14px; line-height: 1.15; padding: 4px 8px 6px; }
.sisi-tag__abbr { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #FFFFFF; color: var(--ink-2); border: 1px solid var(--bevel); font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: none; vertical-align: 1px; }
.rcard__band .sisi-tag__abbr { background: rgba(255, 255, 255, 0.85); }

/* U2: the hint card grows to its text (up to 240 px, then it scrolls inside) and is never squeezed to a strip */
#hint-panel { flex: 0 0 auto; max-height: 240px; }
#hint-panel:not([hidden]) { display: block; }
#hint-panel .sisi-hint__bar { margin-bottom: 4px; }

/* U3: the coach bubble sits in the band at the top of the plate (the figure's fit leaves that band free) and never grows past it */
.sisi-voice { max-width: calc(100% - 28px); max-height: 56px; overflow: hidden; }
.sisi-voice #voice-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.2; }

/* U4: "Check my proof" with nothing to check is grey, and the line above it says what to do */
#check-btn[aria-disabled="true"] { background: #DCE3EC; border-color: #B9C6D6; color: var(--ink-2); opacity: 1; cursor: not-allowed; text-shadow: none; box-shadow: none; }

/* U5: the shortest proof is a two column panel in the Say it column, in place of the step list; "Close" folds it to one bar */
#say-panel:has(#shortest[data-open="true"]:not([hidden])) #steps { display: none; }
#shortest[data-open="true"] { flex: 1 1 auto; max-height: none; min-height: 0; border-left: 6px solid var(--go); }
#shortest[data-open="false"] { flex: 0 0 auto; max-height: none; }
.sisi-shortest__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sisi-shortest__colhead { margin: 0 0 6px; font-size: 14px; font-weight: 900; }
.sisi-shortest__col .step { padding: 6px 8px; gap: 8px; }
.sisi-shortest__col .step__s { font-size: 16px; flex-grow: 0; }
.sisi-shortest__col .sisi-step__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#shortest .sisi-shortest__bar .btn { min-height: 36px; height: 36px; padding: 0 14px; font-size: 14px; }

/* U7: the heading never wraps; only the instruction line does */
.see-it__head h2 { flex: 0 0 auto; white-space: nowrap; }

/* U8: no subject card looks chosen before a choice; the focus ring is for the keyboard (host.js sets html[data-input]); the voice question is asked once */
html:not([data-input="key"]) .start__card:focus-visible, html:not([data-input="key"]) .start__board:focus-visible { outline: none; }
.start__voice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: #FFFFFF; border-radius: var(--r-md); border-bottom: var(--bevel-sm) solid var(--bevel); padding: 12px 16px; }
.start__voice p { margin: 0; font-weight: 800; font-size: 16px; color: var(--ink); flex: 1 1 320px; }
.start__voice-actions { display: flex; gap: 10px; }
.start__voice-actions .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* U9: the mode line is plain text, not a button */
#mode-pill { background: none; color: var(--ink); border-radius: 0; padding: 0 4px; font-weight: 800; font-size: 15px; pointer-events: none; cursor: default; }
#mode-pill svg { display: none; }

/* U13: the first-time tag on the definitions path card */
.start__tag--here { background: var(--sun); border-color: var(--sun-deep); }

/* ---------- CU3 (W8, FIX-BRIEF-CALCULUS-1 CU-12 to CU-17): the home screen, the calculus list, the top bar and the full list ---------- */
/* CU-12: the one line under Reason help */
.start__help-what { margin: -10px 0 0; font-weight: 700; font-size: 14px; color: #FFFFFF; }
/* CU-16 (PS2-23): the Continue card is a one-line strip above the subjects */
.start__card--strip { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 14px; min-height: 0; padding: 10px 18px; border-radius: var(--r-md); }
.start__card--strip .start__card-title { flex: 0 1 auto; min-width: 0; font-size: 20px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start__card--strip .start__card-body { flex: 0 0 auto; font-size: 15px; white-space: nowrap; }
/* CU-13 (PS2-2): one line under each band, and a cue while more groups lie below the fold */
.start__band-note { margin: -4px 0 10px; font-weight: 700; font-size: 15px; color: var(--ink); }
.start__cue { position: sticky; bottom: 12px; align-self: center; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #FFFFFF; font-weight: 800; font-size: 15px; padding: 8px 16px; border-radius: 999px; pointer-events: none; }
.start__cue[hidden] { display: none; }
/* CU-15 (PS2-13): the Binder names what it is; the checks read in words */
.sisi-top__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.sisi-top__main { font-size: 15px; }
.sisi-top__sub { font-size: 11px; font-weight: 700; color: var(--ink-2); }
#checks-text { font-size: 15px; }
/* CU-14 (PS2-3): the avatar names itself while the line is folded into it */
.sisi-voice #voice-label { display: none; font-weight: 800; font-size: 13px; }
.sisi-voice[data-collapsed="true"] { padding-right: 14px; }
.sisi-voice[data-collapsed="true"] #voice-label { display: block; }
/* CU-17 (PS2-11, PA2-23): "Show everything we can say" opens under the steps, in the column; the goal and the player's lines stay in view.
   #say-it > keeps these above the workspace's own #everything rule (an absolute box over the whole column). */
#say-it > #everything:not([hidden]) { position: relative; inset: auto; z-index: auto; flex: 2 1 280px; min-height: 160px; border-radius: 18px; border-bottom: 6px solid var(--bevel); }
#say-it:has(> #everything:not([hidden])) > #say-panel { flex: 3 1 340px; min-height: 270px; overflow: auto; }
#everything .sisi-all__head { padding-top: 8px; padding-bottom: 8px; }
#everything details > summary { font-size: 15px; }

/* ---------- CU2 (W8): the styles view/proof.js used to inject (style#gx2-style), the same rules: the Fix step and Next proof buttons, Move up and Move down ---------- */
#fix-btn { height: 56px; flex: 1 1 auto; width: auto; font-size: 24px; border-radius: 16px; border-bottom-width: 6px; }
#next-btn { height: 56px; flex: 1 1 auto; width: auto; font-size: 24px; border-radius: 16px; border-bottom-width: 6px; }
.sisi-step__move { display: flex; gap: 6px; margin-left: auto; order: 2; }
.sisi-step__mv { min-height: 0; height: 24px; padding: 0 8px; font-size: 12px; font-weight: 900; border-radius: 8px; border-bottom-width: 3px; }
.sisi-step__mv[aria-disabled="true"] { opacity: .45; cursor: default; }
.sisi-step__order { align-self: flex-start; min-height: 0; padding: 4px 14px; }

/* ---------- ZU1 (W8 close, batch 2) ---------- */
/* ZU-5 (PS3-2, PA3-5): the "You picked" box is docked in a column beside the stage, never over the figure; the stage gives up that width while the box is open */
#see-it > #callout.sisi-callout { position: absolute; top: 78px; right: 16px; bottom: auto; left: auto; z-index: 3; width: 300px; max-height: calc(100% - 160px); }
#see-it:has(> #callout:not([hidden])) #stage { margin-right: 316px; }
/* ZU-4 (PS3-16, CU-17; ZU3 after AZ1 g8-01): with the hint and the full list both open at 1366 by 768, the active row and the goal row stay on screen.
   The steps keep the height of their rows (givens, the active line, the goal row with Finish here); the hint and the list take what is left and each
   scrolls in its own box; the Targets bar folds away while the list is open (it comes back when the list closes). */
#say-it:has(> #everything:not([hidden])) > #targets { display: none; }
#say-it:has(> #everything:not([hidden])) > #say-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#say-it:has(> #everything:not([hidden])) > #everything { flex: 0 1 100px; min-height: 96px; }
#say-it:has(> #everything:not([hidden])) #say-panel #steps { flex: 1 0.001 auto; min-height: 150px; }
#say-it:has(> #everything:not([hidden])) #hint-panel { flex: 0 8 auto; min-height: 56px; max-height: 132px; overflow-y: auto; padding-top: 4px; padding-bottom: 4px; }
#say-it:has(> #everything:not([hidden])) #hint-panel .sisi-hint__bar { float: right; margin: 0 0 0 8px; }
#say-it:has(> #everything:not([hidden])) #hint-panel .sisi-hint { margin: 0 0 4px; }
#say-it:has(> #everything:not([hidden])) #hint-panel .sisi-hint__line { margin-bottom: 3px; }
#say-it:has(> #everything:not([hidden])) #hint-panel .sisi-hint__head { margin-bottom: 1px; }
#say-it:has(> #everything:not([hidden])) #hint-panel .sisi-hint__step .btn { min-height: 32px; height: 32px; font-size: 13px; }
#say-panel .say__foot { flex: 0 0 auto; }
/* ZU-3 (PS3-9, PS3-10): "Finish here" and "Say your answer" are buttons, not faded placeholders; the answer's form is one small line under the sentence */
.sisi-step__finish { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 4px 14px; background: #FFFFFF; color: var(--ink); border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: 12px; font-weight: 900; font-size: 14px; white-space: nowrap; cursor: pointer; }
.step--todo:hover .sisi-step__finish, .sisi-step__finish:hover { background: var(--sun-soft); }
.sisi-step__form { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
/* ZU-6 (PA3-8): the speaker button names itself (its aria-label is also its visible word) */
.sisi-voice #voice-play { width: auto; flex: 0 0 auto; padding: 0 12px; gap: 6px; font-weight: 800; font-size: 13px; }
.sisi-voice #voice-play::after { content: attr(aria-label); }
/* ZU-8 (PA3-24): the computation under an estimate step of the shortest proof */
.sisi-shortest__setup { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }