/* Sojourn's stylesheet, built from web/src/styles. Uses only the --sj-* tokens. */
/* ---- base.css */
/* Base: type, links, controls and small parts every page uses. Colour, type,
   space, geometry and motion come only from the --sj-* tokens
   (themes/base/tokens.css). docs/spec/15-attention-and-together.md, 15.9,
   says how they are used: the student's colour (--sj-accent) for where you
   are and what to do next, the class's (--sj-class) for what classmates did. */

html { font-size: var(--sj-size); -webkit-text-size-adjust: 100%; }

/* Type sizes (docs/spec/00-principles.md, 0.3). Hierarchy comes from position, a
   modest range of sizes, weight, colour and folding, never from shrinking what a
   student reads: on a phone the reading text is at least 16px and labels at least 13px.
   Set on html, so a theme's :root may override any of them. */
html {
  --sj-read: max(16px, 1.1rem);            /* the reading text */
  --sj-read-2: max(15px, 1rem);            /* secondary reading: callouts, notes, details' questions */
  --sj-label: max(13px, var(--sj-small));  /* labels, controls, meta, picture labels */
  --sj-code: max(14px, .92rem);            /* commands and code blocks */
  --sj-statement: max(19px, 1.27rem);      /* a step's statement: its heading */
  --sj-statement-sub: max(17px, 1.13rem);  /* a sub-step's statement */
}
@media (max-width: 599px) {
  html { --sj-read-2: 16px; --sj-code: 15px; --sj-label: max(13.5px, var(--sj-small)); }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--sj-paper); color: var(--sj-text);
  font-family: var(--sj-font-ui); font-weight: 400; line-height: var(--sj-line);
  font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--sj-font-ui); font-weight: var(--sj-weight-strong); color: var(--sj-ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--sj-h1); line-height: 1.15; margin: 0 0 var(--sj-s4); letter-spacing: -.02em; }
h2 { font-size: var(--sj-h2); line-height: 1.25; margin: var(--sj-s7) 0 var(--sj-s4); }
h3 { font-size: var(--sj-h3); line-height: 1.35; margin: var(--sj-s6) 0 var(--sj-s2); }
p { text-wrap: pretty; }
strong, b, th { font-weight: var(--sj-weight-strong); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--sj-track); transition: color var(--sj-dur), text-decoration-color var(--sj-dur); }
a:hover { text-decoration-color: currentColor; color: var(--sj-accent); }

/* Abbreviations in small capitals, Economist-style (docs/spec/18-first-notes.md, 18.7):
   the words are unchanged, only their look. */
.sj-caps { font-variant-caps: all-small-caps; letter-spacing: var(--sj-caps-tracking); }

/* A link in a trail's text looks like a link (18.8, Simon's note f10): the accent and a
   clear underline. Another site's link has an icon (it opens in a new tab); a bare
   address is set in the code face and may break anywhere. */
:where([data-sj-block], .sj-glossary-text, .sj-gloss-html, .sj-pop-body) a:not([class]), a.sj-ext {
  color: var(--sj-accent); text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--sj-accent) 50%, transparent);
}
:where([data-sj-block], .sj-glossary-text, .sj-gloss-html, .sj-pop-body) a:not([class]):hover, a.sj-ext:hover { color: var(--sj-accent-deep); text-decoration-color: currentColor; }
.sj-ext-icon { width: .8em; height: .8em; margin-inline-start: .15em; vertical-align: -.05em; }
.sj-url { font-family: var(--sj-font-mono); font-size: .9em; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--sj-accent); outline-offset: 2px; border-radius: var(--sj-radius); }
::selection { background: var(--sj-hl); }
img, svg, video, iframe { max-width: 100%; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--sj-rule); margin: var(--sj-s7) 0; }
code, kbd, pre { font-family: var(--sj-font-mono); font-size: .9em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 var(--sj-s1); border: 1px solid var(--sj-track);
  border-bottom-width: 2px; border-radius: var(--sj-radius); background: var(--sj-surface); font-size: .85em; line-height: 1.5; text-align: center;
}
blockquote { margin: 0; }
details > summary { cursor: pointer; }
dialog { color: var(--sj-text); }

.sj-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sj-skip { position: absolute; left: -10000px; top: 0; }
.sj-skip:focus {
  left: var(--sj-s4); top: var(--sj-s2); z-index: 100; padding: var(--sj-s2) var(--sj-s4);
  background: var(--sj-surface); border: 2px solid var(--sj-accent); border-radius: var(--sj-ui-radius); box-shadow: var(--sj-shadow);
}

/* Words */
.sj-label { margin: 0 0 var(--sj-s2); font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-muted { color: var(--sj-muted); }
.sj-lede { font-family: var(--sj-font-reading); font-size: 1.18rem; line-height: 1.55; max-width: var(--sj-measure); color: var(--sj-text); }
.sj-kicker { margin: 0 0 var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-kicker a { text-decoration: none; }
.sj-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sj-file { font-family: var(--sj-font-mono); font-size: .85em; overflow-wrap: anywhere; }
.sj-plain { list-style: none; margin: 0; padding: 0; }
.sj-plain li + li { margin-top: var(--sj-s1); }
.sj-tone-unclear { color: var(--sj-unclear); }

/* Icons: drawn as masks in the current colour, so they follow the text's tone */
.sj-icon {
  display: inline-block; flex: none; width: 1.05em; height: 1.05em; vertical-align: -.15em;
  background: currentColor; -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat;
}
.sj-icon--walk { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z' fill='black'/%3E%3C/svg%3E"); }
.sj-icon--focus { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
.sj-icon--play { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z' fill='black'/%3E%3C/svg%3E"); }
.sj-icon--ask { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8.5 8.5 0 0 1-12.3 7.6L3.5 20.5l1.4-4.4A8.5 8.5 0 1 1 20.5 11.5z'/%3E%3C/svg%3E"); }
.sj-icon--target { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3C/svg%3E"); }
.sj-icon--clock { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

/* Buttons and controls */
.sj-btn, .sj-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sj-s2); min-height: 38px;
  padding: var(--sj-s1) var(--sj-s4); border: 1px solid var(--sj-track); border-radius: var(--sj-ui-radius);
  background: var(--sj-surface); color: var(--sj-ink); font: inherit; font-size: var(--sj-label); line-height: 1.3;
  text-decoration: none; cursor: pointer; transition: background var(--sj-dur), border-color var(--sj-dur), color var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-btn:hover, .sj-chip:hover { border-color: var(--sj-ink); color: var(--sj-ink); }
.sj-btn:active { transform: translateY(1px); }
.sj-btn:disabled, .sj-chip:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sj-btn--primary { background: var(--sj-accent); border-color: var(--sj-accent); color: var(--sj-accent-ink); font-weight: var(--sj-weight-ui); }
.sj-btn--primary:hover { background: var(--sj-accent-deep); border-color: var(--sj-accent-deep); color: var(--sj-accent-ink); }
.sj-btn--small { min-height: 32px; padding: 2px var(--sj-s3); }
.sj-btn--large { min-height: 46px; padding: var(--sj-s2) var(--sj-s5); font-size: var(--sj-read-2); border-radius: var(--sj-ui-radius); }
.sj-btn--danger { background: var(--sj-fail); border-color: var(--sj-fail); color: var(--sj-surface); }
.sj-btn--danger-outline { border-color: var(--sj-fail); color: var(--sj-fail); }
.sj-chip[aria-pressed="true"] { background: var(--sj-ink); border-color: var(--sj-ink); color: var(--sj-surface); }
.sj-icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-surface);
  color: var(--sj-ink); font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: border-color var(--sj-dur), background var(--sj-dur);
}
.sj-icon-btn:hover { border-color: var(--sj-ink); }
.sj-icon-btn:disabled { opacity: .35; cursor: default; }
.sj-link-btn { padding: 0; border: 0; background: none; color: var(--sj-muted); font: inherit; font-size: var(--sj-label); text-decoration: underline; text-decoration-color: var(--sj-track); text-underline-offset: .2em; cursor: pointer; }
.sj-link-btn:hover { color: var(--sj-accent); text-decoration-color: currentColor; }

textarea, input[type="text"], input:not([type]), input[type="search"], select {
  width: 100%; padding: var(--sj-s2) var(--sj-s3); border: 1px solid var(--sj-track); border-radius: var(--sj-radius);
  background: var(--sj-surface); color: var(--sj-text); font: inherit; line-height: 1.45; transition: border-color var(--sj-dur), box-shadow var(--sj-dur);
}
select { width: auto; min-height: 38px; }
textarea { resize: vertical; font-family: var(--sj-font-reading); }
textarea:focus, input:focus, select:focus { border-color: var(--sj-accent); outline: none; box-shadow: 0 0 0 3px var(--sj-accent-wash); }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--sj-accent); outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sj-accent); width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-radio { display: inline-flex; align-items: center; gap: var(--sj-s2); margin-right: var(--sj-s4); cursor: pointer; }
.sj-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin-top: var(--sj-s3); }
.sj-form-status { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-form-actions .sj-form-status { margin: 0; }
.sj-form-status--ok { color: var(--sj-ok); }
.sj-privacy { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-muted); max-width: var(--sj-measure); }

/* A switch: a track and a knob, with its words */
.sj-switch-track { position: relative; width: 32px; height: 18px; border-radius: var(--sj-pill); background: var(--sj-control); transition: background var(--sj-dur); flex: none; }
.sj-switch-knob { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--sj-surface); box-shadow: 0 1px 2px var(--sj-scrim); transition: left var(--sj-dur) var(--sj-ease); }
[aria-checked="true"] > .sj-switch-track { background: var(--sj-accent); }
[aria-checked="true"] > .sj-switch-track > .sj-switch-knob { left: 16px; }

/* Tags and states, always in words as well as colour */
.sj-tag {
  display: inline-block; padding: 0 var(--sj-s2); border: 1px solid currentColor; border-radius: var(--sj-pill);
  font-size: var(--sj-label); line-height: 1.6; white-space: nowrap; text-decoration: none; color: var(--sj-muted);
}
.sj-tag + .sj-tag { margin-left: var(--sj-s1); }
.sj-tag--unclear { color: var(--sj-unclear); background: var(--sj-warn-wash); border-color: transparent; }
.sj-tag--question { color: var(--sj-question); background: var(--sj-accent-wash); border-color: transparent; }
.sj-tag--comment { color: var(--sj-muted); }
.sj-tag--response { color: var(--sj-ok); background: var(--sj-ok-wash); border-color: transparent; }
.sj-tag--ok { color: var(--sj-ok); background: var(--sj-ok-wash); border-color: transparent; }
.sj-tag--warn { color: var(--sj-warn); background: var(--sj-warn-wash); border-color: transparent; }
.sj-tag--fail { color: var(--sj-fail); background: var(--sj-fail-wash); border-color: transparent; }
.sj-tag--off { color: var(--sj-faint); }
.sj-status { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-status--open { color: var(--sj-warn); }
.sj-status--answered { color: var(--sj-ok); }
.sj-status--published { color: var(--sj-ok); }
.sj-status--draft { color: var(--sj-warn); }

/* People: an abstract avatar and a pseudonym */
.sj-avatar { display: inline-block; flex: none; vertical-align: middle; border-radius: 30%; background: var(--sj-wash); border: 1px solid var(--sj-rule); }
.sj-avatar--none { background: var(--sj-wash); }
.sj-person { display: inline-flex; align-items: center; gap: var(--sj-s2); white-space: nowrap; }
.sj-person-name { font-size: var(--sj-label); }
/* The class's mark: a dot in the class's colour, wherever classmates are counted */
.sj-class-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--sj-class); vertical-align: .1em; }

/* Bars: every bar also has its number beside it or in its label */
.sj-bar { display: inline-block; position: relative; width: 100%; min-width: 48px; height: 8px; overflow: hidden; background: var(--sj-wash); border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); vertical-align: middle; }
.sj-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--sj-accent); border-radius: var(--sj-pill); }
.sj-bar--unclear .sj-bar-fill { background: var(--sj-unclear); }
/* A ring for a fraction (tree.ts) */
.sj-ring { display: block; flex: none; }
.sj-ring-track { fill: none; stroke: var(--sj-rule); stroke-width: 3; }
.sj-ring-fill { fill: none; stroke: var(--sj-accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray var(--sj-dur-cam) var(--sj-ease); }

/* Tables */
.sj-table-wrap { overflow-x: auto; max-width: 100%; }
.sj-table { width: 100%; border-collapse: collapse; font-size: var(--sj-label); }
.sj-table caption { text-align: left; padding-bottom: var(--sj-s2); color: var(--sj-muted); }
.sj-table th, .sj-table td { padding: var(--sj-s2) var(--sj-s3); border-bottom: 1px solid var(--sj-rule); text-align: left; vertical-align: top; }
.sj-table thead th { color: var(--sj-muted); border-bottom-color: var(--sj-track); font-weight: 400; }
.sj-table tbody th { font-weight: 400; }
.sj-table tbody tr:hover > * { background: var(--sj-wash); }
.sj-table--compact th, .sj-table--compact td { padding: var(--sj-s1) var(--sj-s2); }
.sj-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sj-s2) var(--sj-s5); margin: 0; font-size: var(--sj-label); }
.sj-dl dt { color: var(--sj-muted); }
.sj-dl dd { margin: 0; }

/* Notices */
.sj-error { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-fail); border-radius: var(--sj-radius); background: var(--sj-fail-wash); color: var(--sj-fail); max-width: var(--sj-measure); }
.sj-demo-note {
  margin: 0 0 var(--sj-s5); padding: var(--sj-s2) var(--sj-s3); max-width: var(--sj-measure);
  border-left: 3px solid var(--sj-warn); border-radius: 0 var(--sj-radius) var(--sj-radius) 0; background: var(--sj-warn-wash); font-size: var(--sj-label); color: var(--sj-text);
}

/* The tooltip for terms */
.sj-tip {
  position: absolute; z-index: 60; padding: var(--sj-s2) var(--sj-s3); background: var(--sj-ink); color: var(--sj-surface);
  font-size: var(--sj-label); line-height: 1.45; border-radius: var(--sj-radius); box-shadow: var(--sj-shadow); pointer-events: none;
}

/* Dialogs */
.sj-dialog {
  max-width: min(34rem, calc(100vw - 32px)); padding: var(--sj-s5) var(--sj-s6); border: 1px solid var(--sj-rule);
  border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow-float);
}
.sj-dialog::backdrop, .sj-tree-panel::backdrop, .sj-focus::backdrop { background: var(--sj-scrim); }
.sj-dialog h2 { margin-top: 0; }
dialog[open] { animation: sj-rise var(--sj-dur) var(--sj-ease); }
@keyframes sj-rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }

/* The list of keys (keys.ts) */
.sj-keys-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--sj-s2) var(--sj-s4); margin: 0 0 var(--sj-s4); align-items: center; }
.sj-keys-list dt { margin: 0; }
.sj-keys-list dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The server's banner on a demo site */
.sj-demo-banner p, .sj-archive-banner p { margin: 0; }
.sj-demo-banner { margin: 0; padding: 6px var(--sj-s4); background: var(--sj-wash); border-bottom: 1px solid var(--sj-rule); font-size: var(--sj-label); text-align: center; color: var(--sj-muted); }
pre { max-width: 100%; overflow-x: auto; }
p code, li code, dd code { overflow-wrap: anywhere; }

/* Windows' high-contrast mode: what is drawn with backgrounds gets an edge */
@media (forced-colors: active) {
  .sj-btn--primary, .sj-chip.is-current, .sj-react.is-on { border: 2px solid ButtonText; }
  .sj-switch-track { border: 1px solid ButtonText; }
  [aria-checked="true"] > .sj-switch-track > .sj-switch-knob { background: Highlight; }
  .sj-ring-fill { stroke: Highlight; }
  .sj-class-dot { background: CanvasText; }
}

/* ---- icons.css */
/* Icons and emblems as masks in the current colour (docs/spec/16-trail.md, 16.7).
   Generated from simple strokes on a 24-unit grid; decoration only, never the only way something is said. */
.sj-icon--goal { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3C/svg%3E"); }
.sj-icon--why { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.5v.4'/%3E%3Ccircle cx='12' cy='16.8' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.sj-icon--get { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v10H4z'/%3E%3Cpath d='M3 6.5h18V10H3z'/%3E%3Cpath d='M12 6.5V20'/%3E%3Cpath d='M12 6.5c-1.5-3-5.5-3.5-5.5-1 0 1.2 2 1 5.5 1zM12 6.5c1.5-3 5.5-3.5 5.5-1 0 1.2-2 1-5.5 1z'/%3E%3C/svg%3E"); }
.sj-icon--later { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E"); }
.sj-icon--signpost { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M5 5h11l3 2.7-3 2.7H5z'/%3E%3Cpath d='M19 13H8l-3 2.7L8 18.4h11z'/%3E%3C/svg%3E"); }
.sj-icon--boots { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5c1.8 0 2.8 1.8 2.8 4.6S9.3 12.7 7.5 12.7 4.7 10.9 4.7 8.1s1-4.6 2.8-4.6z'/%3E%3Cpath d='M6 15.5h3'/%3E%3Cpath d='M16.5 8.5c1.8 0 2.8 1.8 2.8 4.6s-1 4.6-2.8 4.6-2.8-1.8-2.8-4.6 1-4.6 2.8-4.6z'/%3E%3Cpath d='M15 20.5h3'/%3E%3C/svg%3E"); }
.sj-icon--marker { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.sj-icon--popout { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.sj-icon--feedback { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8.5 9.5h7M8.5 12.5h4'/%3E%3C/svg%3E"); }
.sj-emblem-shape--folder { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4.2l2 2.2H19a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.sj-emblem-shape--compass { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.8 8.2l-2.3 5.3-5.3 2.3 2.3-5.3z'/%3E%3C/svg%3E"); }
.sj-emblem-shape--map { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5L3.5 6.5v13l5.5-2 6 2 5.5-2v-13l-5.5 2z'/%3E%3Cpath d='M9 4.5v13M15 6.5v13'/%3E%3C/svg%3E"); }
.sj-emblem-shape--signpost { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M5 5h11l3 2.7-3 2.7H5z'/%3E%3Cpath d='M19 13H8l-3 2.7L8 18.4h11z'/%3E%3C/svg%3E"); }
.sj-emblem-shape--flag { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4'/%3E%3Cpath d='M5.5 4.5h11.5l-2.3 4 2.3 4H5.5'/%3E%3C/svg%3E"); }
.sj-emblem-shape--boots { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.5c1.8 0 2.8 1.8 2.8 4.6S9.3 12.7 7.5 12.7 4.7 10.9 4.7 8.1s1-4.6 2.8-4.6z'/%3E%3Cpath d='M6 15.5h3'/%3E%3Cpath d='M16.5 8.5c1.8 0 2.8 1.8 2.8 4.6s-1 4.6-2.8 4.6-2.8-1.8-2.8-4.6 1-4.6 2.8-4.6z'/%3E%3Cpath d='M15 20.5h3'/%3E%3C/svg%3E"); }
.sj-emblem-shape--flask { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6.2L4.8 18.5A1.7 1.7 0 0 0 6.3 21h11.4a1.7 1.7 0 0 0 1.5-2.5L14 9.2V3'/%3E%3Cpath d='M7.3 14.5h9.4'/%3E%3C/svg%3E"); }
.sj-emblem-shape--scales { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v17M7.5 20.5h9M4.5 7h15'/%3E%3Cpath d='M4.5 7 2 13.2a2.6 2.6 0 0 0 5 0zM19.5 7 17 13.2a2.6 2.6 0 0 0 5 0z'/%3E%3C/svg%3E"); }
.sj-emblem-shape--chart { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M6 20.5v-7M11 20.5V5M16 20.5v-10M20.5 20.5v-4'/%3E%3C/svg%3E"); }
.sj-emblem-shape--gear { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v2.6M12 18.9v2.6M4.6 4.6l1.9 1.9M17.5 17.5l1.9 1.9M2.5 12h2.6M18.9 12h2.6M4.6 19.4l1.9-1.9M17.5 6.5l1.9-1.9'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E"); }
.sj-emblem-shape--book { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5h6a3 3 0 0 1 2.5 1.4A3 3 0 0 1 14.5 5h6v13.5h-6a2.5 2.5 0 0 0-2.5 2 2.5 2.5 0 0 0-2.5-2h-6z'/%3E%3Cpath d='M12 6.4v14'/%3E%3C/svg%3E"); }
.sj-emblem-shape--spark { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M19 3.5v3M17.5 5h3'/%3E%3C/svg%3E"); }
.sj-emblem-shape--pen { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5l4.2-1 11-11a2.1 2.1 0 0 0-3-3l-11 11z'/%3E%3Cpath d='M14.5 7l2.8 2.8'/%3E%3C/svg%3E"); }
.sj-emblem-shape--tent { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 2.5 20h19z'/%3E%3Cpath d='M12 4.5 9.5 1.5M12 4.5l2.5-3'/%3E%3Cpath d='M9 20l3-6 3 6'/%3E%3C/svg%3E"); }

/* ---- layout.css */
/* The page: the masthead; on a tour page, the tree bar (guided.css), then
   the reading column with the margin of conversations on its right from
   1100 px; one column below that (docs/spec/10-guided-page.md). */

.sj-masthead {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s3) var(--sj-s6);
  width: min(100% - 32px, var(--sj-page)); margin-inline: auto; padding: var(--sj-s3) 0;
}
.sj-page--tour .sj-masthead, .sj-page--admin-tour .sj-masthead { width: min(100% - 32px, var(--sj-layout-w)); }
.sj-brand { display: inline-flex; align-items: center; gap: var(--sj-s3); text-decoration: none; color: var(--sj-ink); font-weight: var(--sj-weight-ui); letter-spacing: -.01em; }
.sj-brand img, .sj-brand svg { height: 28px; width: auto; display: block; }
.sj-nav { display: flex; flex-wrap: wrap; gap: 2px; font-size: var(--sj-label); }
.sj-nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sj-nav a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sj-s3); border-radius: var(--sj-pill);
  text-decoration: none; color: var(--sj-muted); white-space: nowrap; transition: background var(--sj-dur), color var(--sj-dur);
}
.sj-nav a:hover { color: var(--sj-ink); background: var(--sj-wash); }
.sj-nav a[aria-current] { color: var(--sj-ink); background: var(--sj-surface); box-shadow: inset 0 0 0 1px var(--sj-rule); }
.sj-walker { margin-left: auto; }
.sj-walker-chip {
  display: inline-flex; align-items: center; gap: var(--sj-s2); min-height: 38px; padding: 3px var(--sj-s3) 3px 3px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface);
  font-size: var(--sj-label); text-decoration: none; color: var(--sj-ink); transition: border-color var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-walker-chip .sj-avatar { border-radius: 50%; }
a.sj-walker-chip:hover { border-color: var(--sj-track); box-shadow: var(--sj-shadow); color: var(--sj-ink); }
.sj-walker-chip--admin, .sj-walker-chip--static { padding: var(--sj-s1) var(--sj-s3); color: var(--sj-muted); }

/* Pages without the tour layout */
.sj-page > main, .sj-page [data-sj-app]:not([data-sj-app="admin-tour"]) {
  display: block; width: min(100% - 32px, var(--sj-page)); margin-inline: auto; padding: var(--sj-s6) 0 var(--sj-s9);
}
.sj-page > main > [data-sj-app] { width: auto; padding: 0; }

/* The tour layout: the reading column, and the margin from 1100 px */
:root { --sj-layout-w: 1400px; --sj-margin-w: 18rem; }
.sj-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  width: min(100% - 32px, var(--sj-layout-w)); margin-inline: auto; padding: var(--sj-s6) 0 var(--sj-s9);
}
.sj-layout > .sj-tour { width: auto; margin: 0; padding: 0; min-width: 0; }
.sj-margin { display: none; position: relative; min-width: 0; }
@media (min-width: 1100px) {
  .sj-layout { grid-template-columns: minmax(0, 1fr) var(--sj-margin-w); gap: 0 var(--sj-s7); }
  .sj-margin { display: block; }
}
[data-sj-app="admin-tour"] > .sj-admin-head { width: min(100% - 32px, var(--sj-layout-w)); margin: 0 auto; padding-top: var(--sj-s5); }
/* The old map and rail are gone; if a page still has them, they stay out of the way. */
.sj-map, .sj-rail { display: none; }

@media (max-width: 860px) {
  .sj-masthead { gap: var(--sj-s2) var(--sj-s3); flex-wrap: nowrap; padding: var(--sj-s2) 0; }
  .sj-walker-name { display: none; }
  .sj-walker-chip { padding: 3px; }
  .sj-brand img + span { display: none; }
  .sj-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sj-nav a { padding: 0 var(--sj-s2); }
  .sj-layout { padding-top: var(--sj-s4); }
}

/* ---- tour.css */
/* The tour: the trailhead, the stops, and the directives as the server
   renders them (docs/spec/02-interfaces.md, 2.2). */

/* ---- The stop map (gone from the guided page; kept for old templates) */
.sj-map { font-size: var(--sj-label); }
.sj-map ol { list-style: none; margin: 0; padding: 0; }
.sj-map-progress { margin: 0 0 var(--sj-s3); color: var(--sj-muted); }
.sj-map li a { display: grid; grid-template-columns: 14px 1fr; gap: var(--sj-s2); align-items: start; padding: var(--sj-s1) 0; text-decoration: none; color: var(--sj-muted); }
.sj-map-dot { width: 12px; height: 12px; margin-top: .3em; border: 1.5px solid var(--sj-control); border-radius: 50%; background: var(--sj-surface); }
.sj-map li.is-complete .sj-map-dot { background: var(--sj-accent); border-color: var(--sj-accent); }
.sj-map li.is-current a { color: var(--sj-ink); }

/* ---- The trailhead (14.1; 15.7; 16.2): the tour's emblem and title, the first
   move, the trail of stages, and what you'll get and why as pop-outs */
.sj-trailhead {
  --sj-trail: var(--sj-way-1);
  container-type: inline-size; position: relative; margin-bottom: var(--sj-s7); padding: var(--sj-s5) var(--sj-s6) var(--sj-s5);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sj-trail) 10%, transparent), transparent 60%),
    var(--sj-surface);
}
.sj-trailhead > .sj-emblem { margin-bottom: var(--sj-s3); }
.sj-trailhead > .sj-kicker {
  display: inline-flex; align-items: center; min-height: 26px; margin: 0 0 var(--sj-s2) var(--sj-s3); padding: 0 var(--sj-s3); border-radius: var(--sj-pill);
  background: color-mix(in srgb, var(--sj-trail) 10%, var(--sj-surface)); color: var(--sj-trail); font-weight: var(--sj-weight-ui); vertical-align: 22px;
}
.sj-trailhead > h1 { max-width: 24ch; margin-bottom: var(--sj-s4); font-size: clamp(2rem, 4.2vw, 3rem); }
.sj-trailhead-body { font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.55; }
.sj-trailhead-body:empty { display: none; }
@media (max-width: 599px) { .sj-trailhead { padding: var(--sj-s4); margin-inline: -8px; } }

/* What you'll get and why: quiet buttons with icons; the trail of stages below */
.sj-orient { display: grid; gap: var(--sj-s3); margin: var(--sj-s4) 0 var(--sj-s4); }
.sj-orient-pops { display: flex; flex-wrap: wrap; gap: 4px var(--sj-s2); margin-left: -6px; }
.sj-orient-pops .sj-pop-btn { font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-orient-do { position: relative; max-width: 46rem; }
.sj-orient-do > h2.sj-label { margin: 0 0 var(--sj-s2); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); }
.sj-orient-count { position: absolute; top: 0; right: 0; font-size: var(--sj-label); color: var(--sj-muted); font-variant-numeric: tabular-nums; }
/* The trail: stages as stops on a path, each a link, with the student's progress */
.sj-orient-do ol { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: sj-od; display: grid; gap: 0; }
.sj-orient-do li {
  counter-increment: sj-od; position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--sj-s3);
  align-items: baseline; padding: 6px 8px 6px 0; border-radius: var(--sj-radius); transition: background var(--sj-dur);
}
.sj-orient-do li + li::before { content: ""; position: absolute; left: 13px; top: -10px; height: 22px; border-left: 2px dotted var(--sj-track); }
.sj-orient-do li:hover { background: var(--sj-wash); }
.sj-orient-do li > a { grid-column: 2; grid-row: 1; color: var(--sj-ink); text-decoration: none; font-size: var(--sj-read-2); line-height: 1.35; }
.sj-orient-do li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sj-orient-do li > a:hover { color: var(--sj-accent); }
.sj-orient-goal { display: none; }
.sj-orient-do .sj-estimate { grid-column: 3; grid-row: 1; font-size: var(--sj-label); color: var(--sj-muted); white-space: nowrap; }
.sj-orient-steps { grid-column: 2; grid-row: 2; font-size: var(--sj-label); color: var(--sj-accent); }
.sj-orient-steps[hidden] { display: none; }
.sj-orient-mark {
  grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 1; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 3px;
  border: 2px solid var(--sj-control); border-radius: 50%; background: var(--sj-surface); font-size: 11px; line-height: 1; color: var(--sj-surface);
}
.sj-orient-mark:empty::before { content: counter(sj-od); color: var(--sj-muted); font-weight: var(--sj-weight-ui); }
.sj-orient-do li.is-started .sj-orient-mark { border-color: var(--sj-accent); background: linear-gradient(to right, var(--sj-accent) 0 50%, var(--sj-surface) 50%); }
.sj-orient-do li.is-started .sj-orient-mark::before { content: none; }
.sj-orient-do li.is-done .sj-orient-mark { border-color: var(--sj-ok); background: var(--sj-ok); }
.sj-orient-do li.is-current { background: var(--sj-accent-wash); }
.sj-orient-do li.is-current .sj-orient-mark { border-color: var(--sj-accent); box-shadow: 0 0 0 3px var(--sj-surface); }
/* Inside the why pop-out: the reason, then the journey of the project's tours as a path */
.sj-journey { position: relative; margin: var(--sj-s2) 0 var(--sj-s3); padding: 0; list-style: none; display: grid; gap: var(--sj-s2); }
.sj-journey li { position: relative; padding-left: 26px; font-family: var(--sj-font-ui); font-size: var(--sj-read-2); line-height: 1.35; color: var(--sj-muted); }
.sj-journey li::before {
  content: ""; position: absolute; left: 4px; top: .3em; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--sj-control); background: var(--sj-surface); z-index: 1;
}
.sj-journey li + li::after { content: ""; position: absolute; left: 9px; bottom: calc(100% - .45em); height: calc(var(--sj-s2) + .9em); border-left: 2px dotted var(--sj-track); }
.sj-journey li a { color: var(--sj-text); }
.sj-journey li[aria-current="step"] { color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-journey li[aria-current="step"]::before { left: 2px; width: 14px; height: 14px; top: .2em; border-color: var(--sj-accent); background: var(--sj-accent); box-shadow: 0 0 0 3px var(--sj-accent-wash); }
.sj-orient-fits { margin: var(--sj-s3) 0 0; font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); }
.sj-orient-checkpoint, .sj-orient-next { font-size: var(--sj-read-2) !important; }
.sj-orient-checkpoint .sj-label { display: block; margin: 0 0 2px; font-family: var(--sj-font-ui); }
.sj-orient-next { color: var(--sj-muted); }

/* The first move (15.7): Start, or Continue where you left off */
.sj-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s3) var(--sj-s4); margin: 0 0 var(--sj-s4); }
.sj-start-go { box-shadow: var(--sj-shadow-raised); }
.sj-start-go > span:first-child { display: inline-flex; flex-wrap: wrap; gap: 0 .45em; }
.sj-start-verb { font-weight: var(--sj-weight-ui); }
.sj-start-where { font-weight: 400; opacity: .92; }
.sj-start-meta, .sj-start-class, .sj-start-done { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-start-done { font-size: var(--sj-read-2); color: var(--sj-ok); font-weight: var(--sj-weight-ui); }
.sj-start-class { color: var(--sj-class); }
@media (max-width: 599px) { .sj-start > .sj-btn { flex: 1 1 100%; } }

/* A stage's goal under its title (14.2) */
.sj-stop-goal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sj-s2); margin: 0 0 var(--sj-s2);
  font-family: var(--sj-font-reading); font-size: var(--sj-read); color: var(--sj-text);
}
.sj-stop-goal .sj-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-accent); font-weight: var(--sj-weight-ui); }
.sj-stop-goal .sj-label::before {
  content: ""; width: 14px; height: 14px; background: currentColor; align-self: center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sj-trailhead-body > :last-child { margin-bottom: 0; }
.sj-facts { display: flex; flex-wrap: wrap; gap: var(--sj-s3) var(--sj-s6); margin: var(--sj-s5) 0 0; font-size: var(--sj-label); }
.sj-facts div { min-width: 8rem; }
.sj-facts dt { color: var(--sj-muted); }
.sj-facts dd { margin: 0; color: var(--sj-ink); }
.sj-secures { margin-top: var(--sj-s5); padding: var(--sj-s3) var(--sj-s4); border-radius: var(--sj-radius-lg); background: var(--sj-wash); font-size: var(--sj-label); max-width: var(--sj-measure); }
.sj-secures ul { margin: 0; padding-left: 1.1rem; }
.sj-continue { margin: var(--sj-s4) 0 0; }

/* ---- Stops: a stage is a chapter, with its number, statement and goal */
.sj-stop { position: relative; padding: var(--sj-s2) 0 var(--sj-s7); margin-bottom: var(--sj-s7); border-bottom: 1px solid var(--sj-rule); scroll-margin-top: var(--sj-s7); }
.sj-stop-head { margin-bottom: var(--sj-s4); max-width: var(--sj-measure); }
.sj-stop-head h2 { margin: 0 0 var(--sj-s2); font-size: calc(var(--sj-h2) * 1.08); }
.sj-stop-n {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin: 0 0 var(--sj-s2); padding: 0 10px; border-radius: var(--sj-pill);
  background: var(--sj-wash); font-size: var(--sj-label); color: var(--sj-muted); font-variant-numeric: tabular-nums;
}
.sj-stop.is-current .sj-stop-n { background: var(--sj-accent-wash); color: var(--sj-accent); font-weight: var(--sj-weight-ui); }
.sj-stop.is-stage-done .sj-stop-n { background: var(--sj-ok-wash); color: var(--sj-ok); }
.sj-stop.is-complete .sj-stop-n::after { content: none; }
.sj-stop.is-stage-done .sj-stop-n::after { content: "· done ✓"; }
.sj-stop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin: var(--sj-s2) 0 0 -6px; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-stop-meta > .sj-estimate { display: inline-flex; align-items: center; gap: 6px; }
.sj-stop-meta > .sj-estimate::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sj-stop[data-sj-kind="check"] { padding: var(--sj-s5); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-stop[data-sj-kind="optional"] .sj-stop-n::before { content: "Optional · "; }
.sj-stop.is-playing { box-shadow: -10px 0 0 -7px var(--sj-accent); }
.sj-video-cue {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px var(--sj-s3) 2px 10px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink); font: inherit; cursor: pointer;
  transition: border-color var(--sj-dur);
}
.sj-video-cue::before { content: "▶"; font-size: .7em; color: var(--sj-accent); }
.sj-video-cue:hover { border-color: var(--sj-ink); }
.sj-video-cue.is-unrecorded { color: var(--sj-muted); border-style: dashed; }
.sj-video-cue.is-unrecorded::before { color: var(--sj-muted); }

/* ---- The reading text */
.sj-stop-body, .sj-trailhead-body { max-width: var(--sj-measure); }
.sj-stop-body > p, .sj-stop-body > ul, .sj-stop-body > ol, .sj-stop-body > blockquote,
.sj-stop-body li, .sj-callout, .sj-expect, .sj-rubric-body, .sj-prompt-q, .sj-col {
  font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.6;
}
.sj-stop-body > * { margin-top: 0; margin-bottom: var(--sj-s4); }
.sj-stop-body > h3, .sj-stop-body > h4 { margin-top: var(--sj-s5); margin-bottom: var(--sj-s2); }
.sj-stop-body ul, .sj-stop-body ol { padding-left: 1.4rem; }
.sj-stop-body li + li { margin-top: var(--sj-s1); }
.sj-stop-body li::marker { color: var(--sj-muted); }
.sj-stop-body > blockquote { padding-left: var(--sj-s4); border-left: 3px solid var(--sj-rule); color: var(--sj-muted); }
.sj-stop-body > table { border-collapse: collapse; font-size: var(--sj-label); }
.sj-stop-body > table th, .sj-stop-body > table td { padding: var(--sj-s1) var(--sj-s3); border-bottom: 1px solid var(--sj-rule); text-align: left; vertical-align: top; }
.sj-stop-body > pre, .sj-say pre { margin: 0; padding: var(--sj-s3) var(--sj-s4); overflow-x: auto; background: var(--sj-wash); border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); font-size: var(--sj-code); line-height: 1.5; }
.sj-stop-body p code, .sj-stop-body li code { padding: .05em .3em; background: var(--sj-wash); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--sj-rule); }
[data-sj-block] { position: relative; }

/* Inline marks */
.sj-ui {
  padding: .05em .45em; border: 1px solid var(--sj-track); border-bottom-width: 2px; border-radius: 6px; background: var(--sj-surface);
  font-family: var(--sj-font-ui); font-size: .86em; white-space: nowrap;
}
.sj-term { font-style: normal; text-decoration: underline dotted var(--sj-muted); text-underline-offset: .2em; cursor: help; }
code.sj-file { padding: 0 .2em; background: var(--sj-wash); }

/* ---- Directives */
.sj-checklist { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-checklist-title { margin: 0 0 var(--sj-s2); font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); }
.sj-checklist ul { list-style: none; margin: 0; padding: 0; }
.sj-check-item + .sj-check-item { margin-top: var(--sj-s2); }
.sj-check-item label { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sj-s2); align-items: start; cursor: pointer; }
.sj-check-item input { margin-top: .3em; }
.sj-check-item.is-checked > label > span { color: var(--sj-muted); text-decoration: line-through; text-decoration-color: var(--sj-track); }
.sj-stop.is-complete .sj-checklist { border-color: color-mix(in srgb, var(--sj-ok) 40%, var(--sj-rule)); }

.sj-say { position: relative; }
.sj-say .sj-label { margin-bottom: var(--sj-s1); }
.sj-say--claude pre { background: var(--sj-accent-wash); border-color: transparent; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); white-space: pre-wrap; }
.sj-say--terminal pre { background: var(--sj-ink); border-color: var(--sj-ink); color: var(--sj-surface); }
.sj-copy {
  position: absolute; right: var(--sj-s2); top: calc(var(--sj-small) * 1.6 + var(--sj-s2) + 2px);
  padding: 2px var(--sj-s3); border: 1px solid var(--sj-track); border-radius: var(--sj-pill); background: var(--sj-surface);
  color: var(--sj-ink); font: inherit; font-family: var(--sj-font-ui); font-size: var(--sj-label); cursor: pointer;
}
.sj-copy:hover { border-color: var(--sj-ink); }
.sj-copy.is-done { color: var(--sj-ok); border-color: var(--sj-ok); }
.sj-say pre { padding-right: 5rem; }

.sj-expect { padding: var(--sj-s3) var(--sj-s4); background: var(--sj-ok-wash); border-radius: var(--sj-radius-lg); box-shadow: inset 3px 0 0 var(--sj-ok); }
.sj-expect > :last-child, .sj-callout > :last-child, .sj-after > :last-child, .sj-stuck > :last-child, .sj-aside > :last-child, .sj-rubric-body > :last-child { margin-bottom: 0; }
.sj-expect .sj-figure { margin-top: var(--sj-s3); }
.sj-callout { padding: var(--sj-s3) var(--sj-s4); border-radius: var(--sj-radius-lg); background: var(--sj-wash); box-shadow: inset 3px 0 0 var(--sj-track); }
.sj-callout--tip { background: var(--sj-accent-wash); box-shadow: inset 3px 0 0 var(--sj-accent); }
.sj-callout--caution { background: var(--sj-warn-wash); box-shadow: inset 3px 0 0 var(--sj-warn); }
.sj-callout--privacy { background: var(--sj-wash); box-shadow: inset 3px 0 0 var(--sj-ink); }
.sj-aside { padding-left: var(--sj-s3); border-left: 2px solid var(--sj-rule); font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; color: var(--sj-muted); }
@media (min-width: 1560px) {
  .sj-aside { float: right; clear: right; width: 11rem; margin-right: -13rem; margin-bottom: var(--sj-s3); }
}
.sj-rubric { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-rubric-text { margin: 0 0 var(--sj-s3); padding-left: var(--sj-s3); border-left: 2px solid var(--sj-accent); font-size: var(--sj-read-2); font-style: normal; }
.sj-figure img { display: block; height: auto; border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); }
.sj-figure figcaption { margin-top: var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-credit { display: block; font-size: var(--sj-label); color: var(--sj-faint); }
.sj-standin {
  display: grid; place-items: center; gap: var(--sj-s2); min-height: 180px; padding: var(--sj-s5); border-radius: var(--sj-radius-lg);
  border: 1px dashed var(--sj-track); background: repeating-linear-gradient(45deg, var(--sj-wash), var(--sj-wash) 8px, var(--sj-surface) 8px, var(--sj-surface) 16px);
  color: var(--sj-muted); font-size: var(--sj-label); text-align: center;
}
.sj-standin span { color: var(--sj-ink); }
.sj-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sj-s4); }
.sj-col { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-col > :last-child { margin-bottom: 0; }
.sj-unknown { padding: var(--sj-s3); border: 1px dashed var(--sj-warn); border-radius: var(--sj-radius); }
.sj-unknown::before { content: "Unknown directive: " attr(data-directive); display: block; font-size: var(--sj-label); color: var(--sj-warn); }
.sj-video-inline .sj-player { margin-top: var(--sj-s2); }
.sj-video-missing { margin: 0; padding: var(--sj-s3); border: 1px dashed var(--sj-track); border-radius: var(--sj-radius); color: var(--sj-muted); font-size: var(--sj-label); }

/* ---- Prompts */
.sj-prompt { padding: var(--sj-s4) var(--sj-s5); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-prompt-q { margin-bottom: var(--sj-s3); }
.sj-prompt-q > :last-child { margin-bottom: 0; }
.sj-options { display: grid; gap: var(--sj-s2); }
.sj-option {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sj-s2); align-items: start; padding: var(--sj-s2) var(--sj-s3);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); cursor: pointer; font-family: var(--sj-font-reading); transition: border-color var(--sj-dur), background var(--sj-dur);
}
.sj-option:hover { border-color: var(--sj-track); }
.sj-option:has(input:checked) { border-color: var(--sj-accent); background: var(--sj-accent-wash); }
.sj-option input { margin-top: .3em; }
.sj-scale-row { display: flex; flex-wrap: wrap; gap: var(--sj-s2); }
.sj-scale-point { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 2.6rem; padding: var(--sj-s1) var(--sj-s2); border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); cursor: pointer; font-size: var(--sj-label); }
.sj-scale-point:has(input:checked) { border-color: var(--sj-accent); background: var(--sj-accent-wash); }
.sj-scale-ends { display: flex; justify-content: space-between; max-width: 28rem; margin-top: var(--sj-s1); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-prompt-class { margin-top: var(--sj-s4); }
.sj-prompt-class:empty { display: none; }
.sj-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s3); }
.sj-answer { padding: var(--sj-s2) var(--sj-s3); border-radius: var(--sj-ui-radius); background: var(--sj-wash); font-family: var(--sj-font-reading); }
.sj-answer p { margin: 0; }
.sj-answer-by { margin-bottom: var(--sj-s1) !important; font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); display: flex; gap: var(--sj-s2); align-items: center; }
.sj-tally { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s1); font-size: var(--sj-label); }
.sj-tally li { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr 2.5rem; gap: var(--sj-s3); align-items: center; }
.sj-tally .sj-bar-fill { background: var(--sj-class); }
.sj-tally-n { text-align: right; font-variant-numeric: tabular-nums; }

/* The tour's end: the next tour */
.sj-tour-end { margin: 0; padding: var(--sj-s5) var(--sj-s5); border-radius: var(--sj-radius-lg); background: var(--sj-surface); border: 1px solid var(--sj-rule); max-width: var(--sj-measure); }
.sj-tour-end .sj-label { margin: 0 0 4px; }
.sj-tour-end p { margin: 0 0 var(--sj-s2); }
.sj-tour-end a { font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); color: var(--sj-accent); text-decoration: none; }
.sj-tour-end a::after { content: " →"; }
.sj-tour-end a:hover { text-decoration: underline; }
.sj-tour-end p:last-child { margin-bottom: 0; font-family: var(--sj-font-reading); color: var(--sj-muted); }

/* ---- signals.css */
/* Signals: reactions (in each stage's end card), the flag forms, the walker's
   own flags, the class's questions, the selection menu and highlights. */

.sj-signal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); }
.sj-reactions, .sj-flag-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-react {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px var(--sj-s3) 2px 10px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface);
  color: var(--sj-muted); font: inherit; font-size: var(--sj-label); cursor: pointer;
  transition: border-color var(--sj-dur), background var(--sj-dur), transform var(--sj-dur) var(--sj-ease);
}
.sj-react:hover { border-color: var(--sj-track); color: var(--sj-ink); }
.sj-react:active { transform: scale(.96); }
.sj-react.is-on, .sj-react[aria-pressed="true"] { border-color: var(--sj-accent); background: var(--sj-accent-wash); color: var(--sj-ink); }
.sj-react.is-on .sj-emoji { animation: sj-pop .3s var(--sj-ease); }
.sj-emoji { font-size: 1.1rem; line-height: 1; }
.sj-count { min-width: 1ch; font-variant-numeric: tabular-nums; color: var(--sj-class); font-weight: var(--sj-weight-ui); }
.sj-count:empty { display: none; }
/* On a phone the emoji speaks for the label; the label stays for screen readers */
@media (max-width: 520px) {
  .sj-react-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sj-react { padding: 2px var(--sj-s3); }
}
/* Read-only, for a course admin looking at the student page */
.sj-signal-bar--readonly .sj-react { cursor: default; border-style: dashed; }
.sj-signal-bar--readonly .sj-react:hover { border-color: var(--sj-rule); color: var(--sj-muted); }
.sj-readonly-note { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-ask-stage .sj-icon { color: var(--sj-accent); }

.sj-flag-btn {
  min-height: 34px; padding: 2px var(--sj-s3); border: 1px solid var(--sj-rule); border-radius: var(--sj-pill);
  background: var(--sj-surface); color: var(--sj-ink); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-flag-btn:hover { border-color: var(--sj-ink); }
.sj-flag-btn--unclear { color: var(--sj-unclear); }
.sj-flag-btn--unclear:hover { border-color: var(--sj-unclear); }
.sj-flag-btn[aria-expanded="true"] { background: var(--sj-ink); color: var(--sj-surface); border-color: var(--sj-ink); }

.sj-class-line { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-muted); }

.sj-flag-slot:not(:empty) { margin-top: var(--sj-s3); }
.sj-flag-form { padding: var(--sj-s4); border: 1px solid var(--sj-track); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow); }
.sj-flag-form--unclear { border-color: var(--sj-unclear); }
.sj-flag-about { margin: 0 0 var(--sj-s2); padding-left: var(--sj-s3); border-left: 2px solid var(--sj-rule); font-family: var(--sj-font-reading); color: var(--sj-muted); }
.sj-visibility { margin-top: var(--sj-s3); }
.sj-privacy--public { color: var(--sj-ink); }

.sj-mine-flags:not(:empty), .sj-stop-questions:not(:empty) { margin-top: var(--sj-s4); }
.sj-flag-list, .sj-question-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s3); }
.sj-flag, .sj-question { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-flag--unclear { box-shadow: inset 3px 0 0 var(--sj-unclear); }
.sj-flag--question, .sj-question { box-shadow: inset 3px 0 0 var(--sj-question); }
.sj-flag-meta, .sj-question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s1) var(--sj-s2); margin: 0 0 var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-flag-quote { margin: 0 0 var(--sj-s2); padding: 2px 0 2px var(--sj-s3); border-left: 2px solid var(--sj-rule); border-radius: 0 4px 4px 0; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-muted); }
.sj-flag-text, .sj-question-text { margin: 0 0 var(--sj-s2); font-family: var(--sj-font-reading); }
.sj-questions > summary { font-size: var(--sj-label); color: var(--sj-muted); margin-bottom: var(--sj-s2); }
.sj-metoo {
  min-height: 30px; padding: 2px var(--sj-s3); border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface);
  color: var(--sj-muted); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-metoo:hover { border-color: var(--sj-ink); color: var(--sj-ink); }
.sj-metoo[aria-pressed="true"] { border-color: var(--sj-class); color: var(--sj-ink); background: var(--sj-class-wash); }
.sj-metoo-n { margin: 0; font-size: var(--sj-label); color: var(--sj-class); }
.sj-replies { list-style: none; margin: var(--sj-s2) 0; padding: 0 0 0 var(--sj-s4); border-left: 2px solid var(--sj-ok); display: grid; gap: var(--sj-s2); }
.sj-reply p { margin: 0; }
.sj-reply-by { font-size: var(--sj-label); color: var(--sj-muted); display: flex; gap: var(--sj-s2); }
.sj-reply-text { font-family: var(--sj-font-reading); }

/* The selection menu */
.sj-select-menu {
  position: fixed; z-index: 50; display: flex; gap: 2px; padding: 4px;
  background: var(--sj-ink); border-radius: var(--sj-pill); box-shadow: var(--sj-shadow-float);
  animation: sj-rise var(--sj-dur) var(--sj-ease);
}
.sj-select-menu[hidden] { display: none; }
.sj-select-menu button {
  min-height: 32px; padding: var(--sj-s1) var(--sj-s3); border: 0; border-radius: var(--sj-pill); background: transparent;
  color: var(--sj-surface); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-select-menu button:hover, .sj-select-menu button:focus-visible { background: var(--sj-surface); color: var(--sj-ink); outline: none; }

/* Highlights: the walker's own, and the class's where the course shows them */
mark.sj-hl { background: var(--sj-hl); color: inherit; padding: 0 1px; cursor: pointer; border-radius: 3px; }
mark.sj-hl:focus-visible { outline-offset: 1px; }
mark.sj-hl.is-shared { box-shadow: inset 0 -2px 0 rgba(var(--sj-heat), .6); }

/* The class's shared highlights (14.4): faint, deeper where more students highlighted */
.sj-hl-class { background: rgba(var(--sj-heat), calc(var(--sj-a, .3) * .2)); border-radius: 3px; cursor: pointer; box-shadow: inset 0 -1.5px 0 rgba(var(--sj-heat), calc(var(--sj-a, .3) * .7)); }
.sj-hl-class:hover { background: rgba(var(--sj-heat), calc(var(--sj-a, .3) * .32)); }
.sj-hl-class:focus-visible { outline: 2px solid var(--sj-accent); outline-offset: 1px; }
.sj-hide-class-hl .sj-hl-class { background: none; box-shadow: none; cursor: inherit; }
.sj-hl-pop {
  position: fixed; z-index: 55; display: grid; gap: var(--sj-s2); width: min(20rem, calc(100vw - 16px)); padding: var(--sj-s3) var(--sj-s4);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow-float);
  font-size: var(--sj-label);
}
.sj-hl-pop p { margin: 0; }
.sj-hl-pop-n { font-size: var(--sj-read-2); color: var(--sj-class); font-weight: var(--sj-weight-ui); }
.sj-hl-pop-who, .sj-hl-pop-mine { color: var(--sj-muted); }
.sj-hl-pop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s3); }

/* The menu's other highlight choices, and the note */
.sj-select-menu .sj-select-alt { opacity: .85; }
.sj-select-menu .sj-select-alt + .sj-select-alt, .sj-select-menu .sj-select-alt + button:not(.sj-select-alt) { margin-left: 0; }
.sj-select-menu button:first-child + .sj-select-alt { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sj-surface) 25%, transparent); }
.sj-select-label { align-self: center; padding: 0 var(--sj-s2); color: var(--sj-surface); opacity: .8; font-size: var(--sj-label); }
.sj-select-menu.is-form { padding: var(--sj-s2); border-radius: var(--sj-radius-lg); }
.sj-select-note { display: grid; gap: 6px; width: min(22rem, calc(100vw - 32px)); }
.sj-select-note .sj-select-label { padding: 0; }
.sj-select-note textarea { font-size: var(--sj-read-2); }
.sj-select-note-actions { display: flex; gap: 4px; }
.sj-select-note-actions button[type="submit"] { background: var(--sj-surface); color: var(--sj-ink); }

@media (forced-colors: active) {
  mark.sj-hl, .sj-hl-class { forced-color-adjust: none; background: Mark; color: MarkText; }
  .sj-select-menu { border: 1px solid CanvasText; }
}

/* ---- rail.css */
/* The rail: the video player, this stop, and the class on the tour. */

.sj-rail { font-size: var(--sj-label); }
.sj-rail > section { padding-bottom: var(--sj-s4); border-bottom: 1px solid var(--sj-rule); }
.sj-rail > section:last-child { border-bottom: 0; }
.sj-rail > section:empty { display: none; }
.sj-rail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s2); }
.sj-rail-head .sj-label { margin: 0; }
.sj-rail-title { margin: var(--sj-s1) 0 var(--sj-s2); color: var(--sj-ink); }
.sj-rail-title a { text-decoration: none; }
.sj-rail-here .sj-muted { margin: 0 0 var(--sj-s2); }
.sj-rail-video { background: var(--sj-surface); }
.sj-rail-video:not([hidden]) { padding: var(--sj-s3); border: 1px solid var(--sj-ink); }
.sj-player { position: relative; aspect-ratio: 16 / 9; background: var(--sj-ink); }
.sj-player-frame, .sj-player-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sj-video-segment { margin: var(--sj-s2) 0 0; color: var(--sj-muted); }
.sj-rail-class .sj-muted { margin: 0; }

.sj-mini-funnel { list-style: none; margin: var(--sj-s2) 0 0; padding: 0; display: grid; gap: 3px; }
.sj-mini-funnel li { display: grid; grid-template-columns: 1fr 2rem; gap: var(--sj-s2); align-items: center; }
.sj-mini-bar { display: block; height: 6px; background: linear-gradient(to right, var(--sj-track) var(--sj-w, 0%), var(--sj-wash) var(--sj-w, 0%)); }
.sj-mini-funnel li.is-current .sj-mini-bar { background: linear-gradient(to right, var(--sj-accent) var(--sj-w, 0%), var(--sj-wash) var(--sj-w, 0%)); }
.sj-mini-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--sj-muted); }
.sj-rail { grid-template-columns: minmax(0, 1fr); }
.sj-rail > * { min-width: 0; }

/* ---- widgets.css */
/* The built-in widgets. */

.sj-widget { margin-bottom: var(--sj-s4); }
.sj-widget-missing { padding: var(--sj-s3); border: 1px dashed var(--sj-warn); color: var(--sj-warn); font-size: var(--sj-label); }
.sj-w { font-size: var(--sj-label); }

/* rubric-coverage */
.sj-w-table caption { color: var(--sj-ink); }
.sj-w-crit { display: block; }
.sj-w-level { margin-top: var(--sj-s1); color: var(--sj-muted); }
.sj-w-level > summary { font-size: var(--sj-label); }
.sj-w-level p { margin: var(--sj-s1) 0 0; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-w-stops { margin: 0; padding-left: 1rem; }
.sj-w-stops a { display: inline-block; padding: 4px 0; }  /* 24px targets (WCAG 2.5.8) */
.sj-w-table tr.is-off th, .sj-w-table tr.is-off td { color: var(--sj-faint); }

/* progress */
.sj-w-strip { display: flex; gap: 3px; margin: var(--sj-s2) 0 var(--sj-s4); }
.sj-w-cell { flex: 1; height: 10px; background: var(--sj-wash); border: 1px solid var(--sj-rule); }
.sj-w-cell.is-on { background: var(--sj-ink); border-color: var(--sj-ink); }
.sj-w-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s1); }
.sj-w-bars li { display: grid; grid-template-columns: minmax(8rem, 2fr) 3fr 2rem; gap: var(--sj-s3); align-items: center; }
.sj-w-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }

/* order */
.sj-w-order { list-style: none; counter-reset: order; margin: 0; padding: 0; display: grid; gap: var(--sj-s2); }
.sj-w-order-item {
  counter-increment: order; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: var(--sj-s2); align-items: center;
  padding: var(--sj-s2) var(--sj-s3); border: 1px solid var(--sj-rule); background: var(--sj-surface); cursor: grab;
  font-family: var(--sj-font-reading); font-size: 1rem;
}
.sj-w-order-item::before { content: counter(order); color: var(--sj-muted); font-family: var(--sj-font-ui); font-size: var(--sj-label); }
.sj-w-order-item.is-right { border-color: var(--sj-ok); background: var(--sj-ok-wash); }
.sj-w-order-item.is-wrong { border-color: var(--sj-warn); }
.sj-w-order-moves { display: inline-flex; gap: var(--sj-s1); }

/* reveal */
.sj-w-reveal-img { display: block; width: 100%; height: auto; border: 1px solid var(--sj-rule); }
.sj-w-reveal-cap { margin: var(--sj-s2) 0 0; color: var(--sj-muted); }

/* timeline */
.sj-w-track { position: relative; height: 34px; margin-top: var(--sj-s2); background: var(--sj-wash); border: 1px solid var(--sj-rule); }
.sj-w-seg {
  position: absolute; top: 3px; bottom: 3px; min-width: 18px; padding: 0; border: 1px solid var(--sj-paper);
  background: var(--sj-accent); color: var(--sj-accent-ink); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-w-seg:nth-child(even) { background: var(--sj-ink); }
.sj-w-seg:hover, .sj-w-seg:focus-visible { outline: 2px solid var(--sj-ink); outline-offset: 1px; z-index: 1; }
.sj-w-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--sj-fail); pointer-events: none; }
.sj-w-ticks { display: flex; justify-content: space-between; margin: 2px 0 0; color: var(--sj-muted); font-size: var(--sj-label); }
.sj-w, .sj-w table { font-family: var(--sj-font-ui); }

/* ---- guided.css */
/* The guided page (docs/spec/10-guided-page.md, as revised by
   docs/spec/15-attention-and-together.md): the tree bar, steps and their
   checkmarks, each stage's end card and the class's line, visuals and the
   camera, focus, the floating player, and conversations in the margin.
   Only --sj-* tokens for colour, type, space, geometry and motion. */

/* ---- The tree bar (10.2; 15.2): where you are and what is next, in two rows */
.sj-tree {
  position: sticky; top: 0; z-index: 35;
  background: color-mix(in srgb, var(--sj-surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--sj-rule); border-bottom: 1px solid var(--sj-rule);
}
.sj-tree:not(.is-enhanced) { padding: var(--sj-s3) max(16px, calc((100% - var(--sj-layout-w)) / 2)); position: static; font-size: var(--sj-label); background: var(--sj-surface); }
.sj-tree:not(.is-enhanced) ol { margin: 0; padding-left: 1.2rem; }
.sj-tree.is-enhanced > ol { display: none; }
.sj-tree-bar { display: grid; gap: 4px; width: min(100% - 32px, var(--sj-layout-w)); margin-inline: auto; padding: 6px 0 8px; }
.sj-tree-row { display: flex; align-items: center; gap: var(--sj-s2) var(--sj-s3); min-width: 0; }

/* Where you are: the stage's number and name; it opens the whole tree */
.sj-tree-where {
  flex: 0 1 auto; display: inline-flex; align-items: baseline; gap: var(--sj-s2); min-width: 0; max-width: 34%; min-height: 32px;
  padding: 4px var(--sj-s2) 4px 0; border: 0; border-radius: var(--sj-ui-radius); background: none; color: var(--sj-ink);
  font: inherit; font-size: var(--sj-label); text-align: left; cursor: pointer;
}
.sj-tree-where-n { flex: none; color: var(--sj-muted); white-space: nowrap; }
.sj-tree-where-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sj-weight-ui); }
.sj-tree-where-caret, .sj-menu-caret {
  flex: none; align-self: center; width: 7px; height: 7px; margin: -3px 2px 0 2px;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); color: var(--sj-muted);
}
.sj-tree-where:hover .sj-tree-where-t { color: var(--sj-accent); }

/* The stages as segments: yours filled in your colour, the class's band under each */
.sj-tree-stages { flex: 1 1 auto; display: flex; gap: 4px; min-width: 120px; margin: 0; padding: 0; list-style: none; }
.sj-tree-stages li { flex: 1 1 0; min-width: 6px; }
.sj-seg { position: relative; display: block; height: 26px; border-radius: var(--sj-pill); }
.sj-seg-you {
  position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: var(--sj-pill);
  background: var(--sj-rule); transition: background var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-seg.is-started .sj-seg-you {
  background: linear-gradient(to right, var(--sj-accent) calc(var(--sj-seg-fill, 0) * 100%), var(--sj-accent-wash) 0);
  box-shadow: inset 0 0 0 1px var(--sj-accent);
}
.sj-seg.is-done .sj-seg-you { background: var(--sj-accent); }
.sj-seg.is-current .sj-seg-you { top: 7px; height: 10px; box-shadow: 0 0 0 2px var(--sj-surface), 0 0 0 4px var(--sj-accent); }
.sj-seg-class {
  position: absolute; left: 0; top: 20px; height: 3px; width: calc(var(--sj-seg-class, 0) * 100%);
  border-radius: var(--sj-pill); background: var(--sj-class); opacity: .7;
}
.sj-seg:hover .sj-seg-you { box-shadow: 0 0 0 2px var(--sj-surface), 0 0 0 3px var(--sj-track); }
.sj-seg.is-current:hover .sj-seg-you { box-shadow: 0 0 0 2px var(--sj-surface), 0 0 0 4px var(--sj-accent); }
.sj-seg:focus-visible { outline-offset: 0; }
.sj-seg:hover::after, .sj-seg:focus-visible::after {
  content: attr(data-title); position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); z-index: 2;
  padding: 3px 10px; border-radius: var(--sj-radius); background: var(--sj-ink); color: var(--sj-surface);
  font-size: var(--sj-label); white-space: nowrap; pointer-events: none; box-shadow: var(--sj-shadow);
}
.sj-tree-stages li:first-child .sj-seg::after { left: 0; transform: none; }
.sj-tree-stages li:last-child .sj-seg::after { left: auto; right: 0; transform: none; }

/* Your progress: a ring, the count and the time left */
.sj-tree-progress { flex: none; display: inline-flex; align-items: center; gap: var(--sj-s2); margin: 0; font-size: var(--sj-label); color: var(--sj-muted); font-variant-numeric: tabular-nums; }
.sj-tree-count { color: var(--sj-ink); }
.sj-tree-ring { display: inline-flex; }

/* The stage's steps as chips, with Back and Next */
.sj-tree-steps {
  flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; margin: 0; padding: 3px 2px; list-style: none;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  -webkit-mask: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 16px), transparent 100%);
  mask: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 16px), transparent 100%);
}
.sj-tree-steps::-webkit-scrollbar { display: none; }
.sj-chip {
  gap: 6px; max-width: 17rem; min-height: 32px; padding: 2px 12px 2px 4px; border-color: var(--sj-rule); border-radius: var(--sj-pill);
  color: var(--sj-muted); white-space: nowrap; justify-content: flex-start;
}
.sj-chip:hover { border-color: var(--sj-track); color: var(--sj-ink); background: var(--sj-surface); }
.sj-chip.is-current { border-color: var(--sj-accent); background: var(--sj-accent-wash); color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-chip.is-done:not(.is-current) .sj-chip-title { color: var(--sj-muted); }
.sj-chip.is-optional .sj-chip-title { font-style: italic; }
.sj-chip-title { overflow: hidden; text-overflow: ellipsis; }
.sj-chip-mark {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid var(--sj-control); border-radius: 50%; font-size: 11px; font-weight: var(--sj-weight-ui); line-height: 1; color: var(--sj-muted);
  font-variant-numeric: tabular-nums;
}
.sj-chip.is-current .sj-chip-mark { border-color: var(--sj-accent); background: var(--sj-accent); box-shadow: inset 0 0 0 4px var(--sj-surface); }
.is-done > .sj-chip-mark, .sj-chip.is-done .sj-chip-mark, .sj-tree-panel-row.is-done .sj-chip-mark { background: var(--sj-ok); border-color: var(--sj-ok); color: var(--sj-surface); box-shadow: none; font-size: 12px; }
.sj-tree-move {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--sj-rule); border-radius: 50%; background: var(--sj-surface); color: var(--sj-ink);
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color var(--sj-dur);
}
.sj-tree-move:hover { border-color: var(--sj-ink); }
.sj-tree-move:disabled { opacity: .35; cursor: default; }
.sj-tree-actions { flex: none; display: flex; align-items: center; gap: var(--sj-s2); margin-left: var(--sj-s2); }
.sj-tree-actions .sj-btn { white-space: nowrap; }

/* A menu: a button and a panel (tree.ts: menu) */
.sj-menu { position: relative; }
.sj-menu-btn[aria-expanded="true"] { border-color: var(--sj-ink); background: var(--sj-wash); }
.sj-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; display: grid; gap: 2px; min-width: 17rem; padding: 6px;
  background: var(--sj-surface); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-float);
  animation: sj-rise var(--sj-dur) var(--sj-ease);
}
.sj-menu-panel[hidden] { display: none; }
.sj-menu-panel .sj-details-switch, .sj-menu-item {
  display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--sj-s3);
  padding: 6px 10px; border: 0; border-radius: var(--sj-ui-radius); background: none; color: var(--sj-ink);
  font: inherit; font-size: var(--sj-read-2); text-align: left; cursor: pointer; flex-direction: row-reverse;
}
.sj-menu-item { flex-direction: row; }
.sj-menu-panel .sj-details-switch:hover, .sj-menu-item:hover { background: var(--sj-wash); }
.sj-menu-panel .sj-long { display: inline !important; }
.sj-menu-panel .sj-short { display: none !important; }
.sj-menu-pair { display: grid; gap: 2px; padding-top: 2px; margin-top: 2px; border-top: 1px solid var(--sj-rule); }
.sj-menu-pair .sj-menu-item { color: var(--sj-muted); font-size: var(--sj-label); min-height: 34px; }
.sj-menu-panel > .sj-menu-item:last-child { margin-top: 2px; border-top: 1px solid var(--sj-rule); border-radius: 0 0 var(--sj-ui-radius) var(--sj-ui-radius); }

/* The whole tree: a panel; a sheet from the bottom on a phone */
.sj-tree-panel {
  width: min(42rem, calc(100vw - 32px)); max-height: min(84vh, 52rem); padding: 0; border: 1px solid var(--sj-rule);
  border-radius: var(--sj-radius-lg); background: var(--sj-surface); color: var(--sj-text); box-shadow: var(--sj-shadow-float);
}
.sj-tree-panel[open] { display: flex; flex-direction: column; }
.sj-tree-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sj-s3); padding: var(--sj-s4) var(--sj-s5) var(--sj-s3); border-bottom: 1px solid var(--sj-rule); }
.sj-tree-panel-head h2 { margin: 0; font-size: var(--sj-h3); }
.sj-tree-panel-sub { margin: 2px 0 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-tree-panel-list { margin: 0; padding: var(--sj-s2) var(--sj-s4) var(--sj-s5); overflow-y: auto; list-style: none; }
.sj-tree-panel-list > li { padding: var(--sj-s2) var(--sj-s2); border-radius: var(--sj-radius); }
.sj-tree-panel-list > li.is-here { background: var(--sj-accent-wash); }
.sj-tree-panel-list ol { margin: 4px 0 0; padding: 0 0 0 30px; list-style: none; }
.sj-tree-panel-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--sj-s2); align-items: center; padding: 3px 0; font-size: var(--sj-read-2); }
.sj-tree-panel-row a { text-decoration: none; color: var(--sj-ink); }
.sj-tree-panel-row a:hover { color: var(--sj-accent); text-decoration: underline; }
.sj-tree-panel-row.is-current a { font-weight: var(--sj-weight-ui); color: var(--sj-accent); }
.sj-tree-panel-row.is-done:not(.sj-tree-panel-row--l0) a { color: var(--sj-muted); }
.sj-tree-panel-row--l0 { font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); }
.sj-tree-panel-row--l2 { padding-left: 24px; font-size: var(--sj-label); }
.sj-tree-panel-goal { margin: 0 0 2px 30px; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-tree-panel-goal .sj-label { margin: 0; font-family: var(--sj-font-ui); }
.sj-tree-panel-meta { color: var(--sj-muted); font-size: var(--sj-label); white-space: nowrap; font-weight: 400; }
.sj-tree-panel-class { color: var(--sj-class); }
.sj-tree-panel-class::before { content: " · "; color: var(--sj-muted); }

/* Long and short labels: the short ones on a phone */
.sj-short { display: none; }
@media (max-width: 960px) {
  .sj-tree-where { max-width: 30%; }
  .sj-tree-left { display: none; }
}
@media (max-width: 760px) {
  .sj-long { display: none; }
  .sj-short { display: inline; }
  .sj-tree-bar { gap: 2px; padding: 4px 0 6px; }
  .sj-tree-where { display: none; }
  .sj-tree-actions { margin-left: 0; gap: 4px; }
  .sj-tree-walk { padding: 2px 10px; }
  .sj-chip { max-width: 12rem; }
  .sj-tree-panel { width: 100vw; max-width: 100vw; max-height: 86vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--sj-radius-lg) var(--sj-radius-lg) 0 0; }
}
@media (max-width: 420px) {
  .sj-tree-progress .sj-tree-progress-text { display: none; }
  .sj-tree-walk .sj-short { display: none; }
}

/* ---- Stages (15.4, 15.5): the stage's header, the class's line, its end card */
.sj-stop { scroll-margin-top: calc(var(--sj-tree-h, 0px) + 12px); }
.sj-stop-body { max-width: none; }
.sj-stop-body > :not(.sj-guided):not(.sj-step):not(.sj-steps) { max-width: var(--sj-measure); }
.sj-stop-class {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sj-s3); margin: var(--sj-s2) 0 0;
  font-size: var(--sj-label); color: var(--sj-muted);
}
.sj-stop-class[hidden] { display: none; }
.sj-class-bar { position: relative; flex: none; width: 88px; height: 6px; border-radius: var(--sj-pill); background: var(--sj-rule); overflow: hidden; }
.sj-class-bar-reached, .sj-class-bar-finished { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--sj-pill); }
.sj-class-bar-reached { width: calc(var(--sj-reached, 0) * 100%); background: var(--sj-class-wash); box-shadow: inset 0 0 0 1px var(--sj-class); opacity: .7; }
.sj-class-bar-finished { width: calc(var(--sj-finished, 0) * 100%); background: var(--sj-class); }
.sj-class-words { color: var(--sj-text); }
.sj-class-unclear { color: var(--sj-unclear); }

/* The end card: closes the stage, says what's next, asks how it went */
.sj-stop-foot { max-width: var(--sj-measure); margin-top: var(--sj-s5); }
.sj-stage-end {
  display: grid; gap: var(--sj-s4); padding: var(--sj-s4) var(--sj-s5); border: 1px solid var(--sj-rule);
  border-radius: var(--sj-radius-lg); background: var(--sj-surface); transition: border-color var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-stage-end.is-done { border-color: color-mix(in srgb, var(--sj-ok) 45%, var(--sj-rule)); box-shadow: var(--sj-shadow-raised); }
.sj-stage-end.is-readonly { padding: var(--sj-s3) var(--sj-s4); }
.sj-stage-end-status { display: flex; align-items: flex-start; gap: var(--sj-s3); }
.sj-stage-end-status[hidden], .sj-stage-end-next[hidden] { display: none; }
.sj-stage-end-mark {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sj-ok); color: var(--sj-surface); font-size: 1rem; font-weight: var(--sj-weight-ui);
}
.sj-stage-end-mark.is-open { background: none; border: 2px solid var(--sj-control); color: var(--sj-muted); font-size: var(--sj-label); font-variant-numeric: tabular-nums; }
.sj-stage-end-text > p { margin: 0; }
.sj-stage-end-title { font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); color: var(--sj-ink); line-height: 1.35; }
.sj-stage-end:not(.is-done) .sj-stage-end-title { font-size: var(--sj-read-2); font-weight: 400; color: var(--sj-text); }
.sj-stage-end-goal { margin-top: 2px !important; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-stage-end-goal .sj-label { margin: 0; font-family: var(--sj-font-ui); }
.sj-stage-end-class { margin-top: 4px !important; font-size: var(--sj-label); color: var(--sj-class); }
.sj-stage-end-next { display: flex; flex-wrap: wrap; gap: var(--sj-s2); }
.sj-stage-next { min-height: 46px; padding: var(--sj-s2) var(--sj-s5); font-size: var(--sj-read-2); gap: 6px; }
.sj-stage-next-t { font-weight: 400; }
.sj-stage-next-t::before { content: "· "; }
.sj-stage-end-last { margin: 0; color: var(--sj-ok); }
.sj-stage-end-react { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); padding-top: var(--sj-s3); border-top: 1px solid var(--sj-rule); }
.sj-stage-end.is-readonly .sj-stage-end-react { padding-top: 0; border-top: 0; }
.sj-stage-end-q { flex-basis: 100%; margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-stage-end-react .sj-ask-stage { margin-left: auto; }
@media (max-width: 599px) {
  .sj-stage-end { padding: var(--sj-s3) var(--sj-s4); }
  .sj-stage-end-react .sj-ask-stage { margin-left: 0; }
  .sj-stage-next { width: 100%; justify-content: center; }
}

/* ---- Steps (10.1; 15.3): the step in hand is raised as a card */
.sj-step {
  position: relative; max-width: var(--sj-measure); margin: 0 0 var(--sj-s2); padding: var(--sj-s4) var(--sj-s5) var(--sj-s3) 56px;
  border: 1px solid transparent; border-radius: var(--sj-radius-lg);
  scroll-margin-top: calc(var(--sj-tree-h, 0px) + 12px);
  transition: background var(--sj-dur), border-color var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-step.is-current, .sj-step.is-within {
  background: var(--sj-surface); border-color: var(--sj-rule); box-shadow: var(--sj-shadow-raised), inset 3px 0 0 var(--sj-accent);
}
.sj-step[data-sj-level="2"] { margin: var(--sj-s2) 0 0 -16px; padding: var(--sj-s3) var(--sj-s3) var(--sj-s2) 44px; border-radius: var(--sj-radius); }
.sj-step[data-sj-level="2"].is-current { background: var(--sj-accent-wash); border-color: transparent; box-shadow: inset 3px 0 0 var(--sj-accent); }
.sj-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sj-s3); margin-bottom: var(--sj-s2); }
.sj-step-head h3, .sj-step-head h4 { margin: 0; }
/* The statement: one clear line, a modest step above the reading text (0.3). */
.sj-step-head h3 { font-size: var(--sj-statement); line-height: 1.3; color: var(--sj-ink); }
.sj-step-head h4 { font-size: var(--sj-statement-sub); line-height: 1.35; color: var(--sj-ink); }
.sj-step.is-done:not(.is-current):not(.is-within) > .sj-step-head :is(h3, h4) { color: var(--sj-muted); }
.sj-step-head .sj-estimate, .sj-optional {
  display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--sj-pill); background: var(--sj-wash);
  font-size: var(--sj-label); line-height: 1.7; color: var(--sj-muted); white-space: nowrap;
}
.sj-optional { background: none; box-shadow: inset 0 0 0 1px var(--sj-rule); font-style: italic; }
.sj-step-mark {
  position: absolute; left: 18px; top: calc(var(--sj-s4) + 3px); width: 24px; height: 24px;
  border: 2px solid var(--sj-control); border-radius: 50%; background: var(--sj-surface);
  transition: background var(--sj-dur), border-color var(--sj-dur), box-shadow var(--sj-dur), transform var(--sj-dur) var(--sj-ease);
}
.sj-step[data-sj-level="2"] > .sj-step-head .sj-step-mark { left: 14px; top: calc(var(--sj-s3) + 3px); width: 20px; height: 20px; }
.sj-step-mark.is-live { cursor: pointer; }
.sj-step-mark.is-live:hover { border-color: var(--sj-ok); box-shadow: 0 0 0 4px var(--sj-ok-wash); }
.sj-step.is-current > .sj-step-head .sj-step-mark, .sj-step.is-within > .sj-step-head .sj-step-mark { border-color: var(--sj-accent); box-shadow: 0 0 0 4px var(--sj-accent-wash); }
.sj-step.is-done > .sj-step-head .sj-step-mark { background: var(--sj-ok); border-color: var(--sj-ok); box-shadow: none; animation: sj-pop .3s var(--sj-ease); }
.sj-step.is-done > .sj-step-head .sj-step-mark::after {
  content: ""; position: absolute; left: 34%; top: 16%; width: 26%; height: 48%;
  border: solid var(--sj-surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
@keyframes sj-pop { 50% { transform: scale(1.18); } }
.sj-step.is-playing > .sj-step-head h3::after, .sj-step.is-playing > .sj-step-head h4::after { content: " ▶"; color: var(--sj-accent); font-size: .8em; }
.sj-step-body > * { margin-top: 0; margin-bottom: var(--sj-s3); }
.sj-step-body > p, .sj-step-body > ul, .sj-step-body > ol { font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.6; }

/* The step's foot: Done, Focus, Watch. Quiet on every step but the one in hand, so the
   page shows one thing to do; the same size on all, so nothing moves as you read. */
.sj-step-foot, .sj-stage-check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); margin-top: var(--sj-s2); }
.sj-step-foot:empty { display: none; }
.sj-step-n { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-done {
  display: inline-flex; align-items: center; gap: var(--sj-s2); min-height: 36px; padding: 3px var(--sj-s4) 3px 8px;
  border: 1px solid var(--sj-track); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-muted);
  font: inherit; font-size: var(--sj-label); cursor: pointer; transition: background var(--sj-dur), border-color var(--sj-dur), color var(--sj-dur);
}
.sj-done:hover { border-color: var(--sj-ok); color: var(--sj-ink); }
.sj-done-box { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid var(--sj-control); border-radius: 50%; }
.sj-step.is-current > .sj-step-foot .sj-done:not([aria-pressed="true"]),
.sj-step.is-within > .sj-step-foot .sj-done:not([aria-pressed="true"]),
.sj-stage-check .sj-done:not([aria-pressed="true"]) {
  background: var(--sj-accent); border-color: var(--sj-accent); color: var(--sj-accent-ink); font-weight: var(--sj-weight-ui);
}
.sj-step.is-current > .sj-step-foot .sj-done:not([aria-pressed="true"]) .sj-done-box,
.sj-step.is-within > .sj-step-foot .sj-done:not([aria-pressed="true"]) .sj-done-box,
.sj-stage-check .sj-done:not([aria-pressed="true"]) .sj-done-box { border-color: var(--sj-accent-ink); }
.sj-step.is-current > .sj-step-foot .sj-done:not([aria-pressed="true"]):hover,
.sj-stage-check .sj-done:not([aria-pressed="true"]):hover { background: var(--sj-accent-deep); border-color: var(--sj-accent-deep); }
.sj-done[aria-pressed="true"] { border-color: transparent; color: var(--sj-ok); background: var(--sj-ok-wash); font-weight: var(--sj-weight-ui); }
.sj-done[aria-pressed="true"] .sj-done-box { background: var(--sj-ok); border-color: var(--sj-ok); }
.sj-done[aria-pressed="true"] .sj-done-box::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--sj-surface); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sj-done:disabled { opacity: .6; cursor: default; }
.sj-step-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px var(--sj-s3);
  border: 1px solid transparent; border-radius: var(--sj-pill); background: none; color: var(--sj-muted);
  font: inherit; font-size: var(--sj-label); cursor: pointer; transition: background var(--sj-dur), color var(--sj-dur), border-color var(--sj-dur);
}
.sj-step-btn:hover { background: var(--sj-wash); color: var(--sj-ink); }
.sj-step.is-current > .sj-step-foot .sj-step-btn { border-color: var(--sj-rule); color: var(--sj-ink); }
.sj-stage-check { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); max-width: var(--sj-measure); }
.sj-stage-check-note { flex-basis: 100%; margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-stop.is-stage-done > .sj-stage-check { border-color: color-mix(in srgb, var(--sj-ok) 45%, var(--sj-rule)); }
@media (max-width: 599px) {
  .sj-step { padding: var(--sj-s3) var(--sj-s3) var(--sj-s3) 46px; margin-left: -8px; margin-right: -8px; }
  .sj-step-mark { left: 12px; top: calc(var(--sj-s3) + 3px); width: 22px; height: 22px; }
  .sj-step[data-sj-level="2"] { margin-left: -14px; padding-left: 40px; }
  .sj-step[data-sj-level="2"] > .sj-step-head .sj-step-mark { left: 12px; }
}

/* A passage lit by its callout in the margin (15.6) */
[data-sj-block].is-linked, .sj-stop-head.is-linked, .sj-step-head.is-linked {
  background: var(--sj-accent-wash); box-shadow: 0 0 0 6px var(--sj-accent-wash); border-radius: 4px;
  transition: background var(--sj-dur), box-shadow var(--sj-dur);
}

/* ---- Visuals and the camera (10.3) */
.sj-visual { margin: 0 0 var(--sj-s4); }
.sj-visual-frame {
  position: relative; overflow: hidden; width: 100%; max-height: var(--sj-frame-max, 78vh);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-wash);
}
.sj-cam-pan {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--sj-ar, auto);
  transform-origin: 0 0; transition: transform var(--sj-dur-cam) var(--sj-ease); will-change: transform;
}
.sj-cam-pan > img, .sj-cam-pan > svg, .sj-cam-svg { display: block; width: 100%; height: auto; border: 0; }
.sj-cam-pan .sj-visual-video, .sj-cam-pan video, .sj-cam-pan iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--sj-ink); }
.sj-cam-hole {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border-radius: 6px;
  box-shadow: 0 0 0 200vmax var(--sj-scrim);
  transition: left var(--sj-dur-cam) var(--sj-ease), top var(--sj-dur-cam) var(--sj-ease), width var(--sj-dur-cam) var(--sj-ease), height var(--sj-dur-cam) var(--sj-ease), opacity .3s;
}
.sj-cam-hole.is-on { opacity: 1; }
.sj-cam-hole.is-soft { box-shadow: none; }
.sj-cam-ring {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; border-radius: 6px;
  border: 3px solid var(--sj-accent); box-shadow: 0 0 0 2px var(--sj-surface), 0 6px 20px -4px var(--sj-scrim);
  transition: left var(--sj-dur-cam) var(--sj-ease), top var(--sj-dur-cam) var(--sj-ease), width var(--sj-dur-cam) var(--sj-ease), height var(--sj-dur-cam) var(--sj-ease), opacity .3s;
}
.sj-cam-ring.is-on { opacity: 1; animation: sj-ring-in .6s var(--sj-ease); }
@keyframes sj-ring-in { from { box-shadow: 0 0 0 2px var(--sj-surface), 0 0 0 10px var(--sj-accent-wash); } }
.sj-cam-label {
  position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; max-width: 70%; padding: 2px 10px; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--sj-pill);
  background: var(--sj-accent); color: var(--sj-accent-ink); font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); line-height: 1.5;
  box-shadow: var(--sj-shadow);
  transition: left var(--sj-dur-cam) var(--sj-ease), top var(--sj-dur-cam) var(--sj-ease), opacity .3s;
}
.sj-cam-label.is-on { opacity: 1; }
.sj-cam.is-still .sj-cam-pan, .sj-cam.is-still .sj-cam-hole, .sj-cam.is-still .sj-cam-ring, .sj-cam.is-still .sj-cam-label { transition: none; }
.sj-visual-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); margin-top: var(--sj-s2); font-size: var(--sj-label); }
.sj-visual-controls .sj-icon-btn { border-radius: 50%; }
.sj-visual-status { color: var(--sj-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sj-chip--small { min-height: 30px; padding: 2px 12px; }
.sj-visual figcaption { margin-top: var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }

/* The pinned visual: above the steps on a narrow column, beside them on a wide one */
.sj-guided { container-type: inline-size; margin: 0 0 var(--sj-s5); }
.sj-guided-grid { display: block; }
.sj-guided-pin {
  position: sticky; top: calc(var(--sj-tree-h, 0px) + 4px); z-index: 6; display: grid;
  margin: 0 -4px var(--sj-s3); padding: 6px 4px 8px; background: var(--sj-paper); border-bottom: 1px solid var(--sj-rule);
}
.sj-guided-pin > .sj-visual { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.sj-guided-pin > .sj-visual.is-active { opacity: 1; visibility: visible; }
.sj-guided-pin .sj-visual-frame { --sj-frame-max: 30vh; }
.sj-guided-pin figcaption { display: none; }
.sj-guided-pin .sj-visual-controls { margin-top: 4px; }
.sj-guided-pin .sj-visual { position: relative; }
/* A picture waiting its turn in the pin takes no more room than its frame */
.sj-guided-pin > .sj-visual:not(.is-active) :is(.sj-cam-key, .sj-visual-controls, figcaption) { display: none; }
@container (min-width: 820px) {
  .sj-guided-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sj-s6); align-items: start; }
  .sj-guided-pin {
    grid-column: 2; grid-row: 1; top: calc(var(--sj-tree-h, 0px) + 16px);
    margin: 0; padding: 0; border-bottom: 0; background: none;
  }
  .sj-guided-pin .sj-visual-frame { --sj-frame-max: calc(100vh - var(--sj-tree-h, 0px) - 170px); box-shadow: var(--sj-shadow); }
  .sj-guided-pin figcaption { display: block; }
  .sj-guided-steps { grid-column: 1; grid-row: 1; }
  .sj-guided-steps > .sj-step { max-width: none; }
}
@container (max-width: 819px) {
  /* Pinned above the text, the key keeps short: the step's labels, the rest on request */
  .sj-guided-pin .sj-cam-key:not(.is-open) > li:not(.is-current):not(.sj-cam-key-more) { display: none; }
  .sj-guided-pin .sj-visual .sj-cam-key > li.sj-cam-key-more { display: inline-flex; }
  .sj-guided-pin .sj-visual-controls { gap: 4px; margin-top: 4px; }
  .sj-guided-pin .sj-visual-controls .sj-icon-btn { width: 30px; height: 30px; }
  .sj-guided-pin .sj-visual-controls .sj-chip--small { min-height: 30px; padding: 1px 10px; font-size: var(--sj-label); }
  .sj-guided-pin .sj-visual-status { display: none; }
}
@media (max-width: 760px) {
  .sj-guided-pin .sj-visual-frame { --sj-frame-max: 28vh; }
  .sj-guided-pin .sj-visual-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-cam-pan, .sj-cam-hole, .sj-cam-ring, .sj-cam-label, .sj-guided-pin > .sj-visual, svg [data-part] { transition: none !important; }
}

/* ---- Labels on pictures (12.1): numbers and their key, tags, pullouts.
   The key keeps to the step in hand (15.3): its labels, and a button for the rest. */
.sj-cam-wrap { position: relative; display: grid; grid-template-columns: 0 minmax(0, 1fr) 0; column-gap: 0; }
.sj-cam-wrap > .sj-visual-frame { grid-column: 2; }
.sj-cam-wrap.has-pull-left { grid-template-columns: var(--sj-pull-w, 9.5rem) minmax(0, 1fr) 0; }
.sj-cam-wrap.has-pull-right { grid-template-columns: 0 minmax(0, 1fr) var(--sj-pull-w, 9.5rem); }
.sj-cam-wrap.has-pull-left.has-pull-right { grid-template-columns: var(--sj-pull-w, 9.5rem) minmax(0, 1fr) var(--sj-pull-w, 9.5rem); }
.sj-cam-num {
  position: absolute; left: 0; top: 0; z-index: 3; display: none; place-items: center; width: 26px; height: 26px;
  border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink); border: 2px solid var(--sj-ink);
  font-family: var(--sj-font-ui); font-size: max(14px, var(--sj-label)); font-weight: var(--sj-weight-ui); line-height: 1;
  box-shadow: var(--sj-shadow);
  transition: left var(--sj-dur-cam) var(--sj-ease), top var(--sj-dur-cam) var(--sj-ease), background .3s, color .3s, opacity .3s;
}
.sj-cam-num.is-on { display: grid; }
.sj-cam-num:not(.is-current) { width: 22px; height: 22px; border-width: 1.5px; font-size: var(--sj-label); opacity: .82; }
.sj-cam-num.is-current { z-index: 4; background: var(--sj-accent); border-color: var(--sj-surface); color: var(--sj-accent-ink); }
.sj-visual .sj-cam-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; max-width: none; }
.sj-visual .sj-cam-key li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.35; color: var(--sj-muted); }
.sj-visual .sj-cam-key li.is-current { color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-cam-key.has-current:not(.is-open) > li:not(.is-current):not(.sj-cam-key-more) { display: none; }
/* "All n labels" only where some are folded away */
.sj-visual .sj-cam-key > li.sj-cam-key-more { display: none; }
.sj-visual .sj-cam-key.has-current > li.sj-cam-key-more { display: inline-flex; }
/* In an open step on a phone, the whole picture's key waits behind its button too */
@media (max-width: 599px) {
  .sj-exhibit .sj-cam-key:not(.is-open) > li:not(.is-current):not(.sj-cam-key-more) { display: none; }
  .sj-exhibit .sj-visual .sj-cam-key > li.sj-cam-key-more { display: inline-flex; }
}
.sj-cam-key-n {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--sj-pill);
  border: 1.5px solid var(--sj-ink); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-ink); background: var(--sj-surface);
}
.sj-cam-key li.is-current .sj-cam-key-n { background: var(--sj-accent); border-color: var(--sj-accent); color: var(--sj-accent-ink); }
.sj-cam-pull {
  position: absolute; z-index: 2; display: none; padding: 3px 0; font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.3; color: var(--sj-muted);
  transition: top var(--sj-dur-cam) var(--sj-ease);
}
.sj-cam-pull.is-on { display: block; }
.sj-cam-pull.is-left { text-align: right; }
.sj-cam-pull.is-current { color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-cam-leaders { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.sj-cam-leaders path { display: none; fill: none; stroke: var(--sj-track); stroke-width: 1.5; transition: d var(--sj-dur-cam) var(--sj-ease); }
.sj-cam-leaders path.is-on { display: block; }
.sj-cam-leaders path.is-current { stroke: var(--sj-accent); stroke-width: 2; }
.sj-cam.is-still ~ .sj-cam-pull, .sj-cam.is-still .sj-cam-num { transition: none; }
@media (prefers-reduced-motion: reduce) { .sj-cam-num, .sj-cam-pull, .sj-cam-leaders path { transition: none !important; } }

/* The picture opens full size on a click; two fingers pinch it in place */
.sj-cam { cursor: zoom-in; touch-action: pan-x pan-y; }
.sj-cam.is-user-zoom .sj-cam-hole, .sj-cam.is-user-zoom .sj-cam-ring, .sj-cam.is-user-zoom .sj-cam-label, .sj-cam.is-user-zoom .sj-cam-num { opacity: 0 !important; }
.sj-anim-paused, .sj-anim-paused * { animation-play-state: paused !important; }
.sj-visual-anim { display: inline-flex; gap: 4px; }
.sj-visual-anim[hidden] { display: none; }

/* ---- Focus (10.4; 17.1): a panel over the page, not the whole screen; or a small
   window of its own (Pop out) that stays in front of other tabs and programs */
.sj-focus {
  width: min(1080px, calc(100vw - 64px)); max-width: none; height: min(760px, calc(100dvh - 64px)); max-height: none; padding: 0;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); color: var(--sj-text); background: var(--sj-surface); box-shadow: var(--sj-shadow-float);
}
.sj-focus[open] { display: block; }
.sj-focus-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.sj-focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s3); padding: var(--sj-s3) var(--sj-s5); border-bottom: 1px solid var(--sj-rule); }
.sj-focus-head-text { min-width: 0; display: grid; gap: 2px; }
.sj-focus-head-actions { flex: none; display: flex; gap: var(--sj-s2); }
.sj-focus-pop .sj-icon { color: var(--sj-accent); }
.sj-focus-goal { margin: 0; font-size: var(--sj-read-2); color: var(--sj-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-focus-goal[hidden] { display: none; }
.sj-focus-goal .sj-label { margin: 0; }
.sj-focus-where { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-focus-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sj-s5); padding: var(--sj-s4) var(--sj-s5); min-height: 0; overflow: hidden; background: var(--sj-paper); }
.sj-focus-panel:not(.has-visual) .sj-focus-main { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.sj-focus-panel:not(.has-visual) .sj-focus-visual { display: none; }
.sj-focus-visual { min-height: 0; display: flex; align-items: center; }
.sj-focus-visual .sj-visual { width: 100%; margin: 0; }
.sj-focus-visual .sj-visual-frame { --sj-frame-max: calc(100dvh - 300px); box-shadow: var(--sj-shadow); }
.sj-focus-text { min-height: 0; overflow-y: auto; padding: var(--sj-s4) var(--sj-s5); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow); }
.sj-focus-text h2 { margin: 0 0 var(--sj-s2); font-size: var(--sj-h2); }
.sj-focus-text h2:focus { outline: none; }
.sj-focus-meta { margin: 0 0 var(--sj-s4); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-focus-done-mark { color: var(--sj-ok); }
.sj-focus-body .sj-step-body > *, .sj-focus-body .sj-stop-body > * { max-width: none; }
.sj-focus-body .sj-step { max-width: none; }
.sj-focus-end { padding: var(--sj-s3) var(--sj-s4); border-radius: var(--sj-radius); background: var(--sj-ok-wash); color: var(--sj-ok); }
.sj-focus-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); padding: var(--sj-s3) var(--sj-s5); border-top: 1px solid var(--sj-rule); }
.sj-focus-foot .sj-btn { white-space: nowrap; }
.sj-focus-done { min-width: 9rem; }
.sj-focus-keys { margin: 0 0 0 auto; font-size: var(--sj-label); color: var(--sj-muted); }
html.sj-focus-open { overflow: hidden; }
/* Where a step's text was while it is in Focus or a window of its own */
.sj-focus-away {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin: var(--sj-s2) 0; padding: var(--sj-s3) var(--sj-s4);
  border: 1px dashed var(--sj-track); border-radius: var(--sj-ui-radius); background: var(--sj-wash); font-size: var(--sj-read-2); color: var(--sj-muted);
}
.sj-focus-away p { margin: 0; }
@media (max-width: 760px) {
  .sj-focus { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sj-focus-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--sj-s3); padding: var(--sj-s3); overflow-y: auto; }
  .sj-focus-visual .sj-visual-frame { --sj-frame-max: 34vh; }
  .sj-focus-text { overflow: visible; padding: var(--sj-s3) var(--sj-s4); }
  .sj-focus-head, .sj-focus-foot { padding: var(--sj-s2) var(--sj-s4); }
  .sj-focus-foot .sj-btn { flex: 1; justify-content: center; }
  .sj-focus-keys { display: none; }
}
/* The window of its own: one column, the picture short, the text scrolling */
.sj-pip-body { margin: 0; background: var(--sj-paper); }
.sj-pip-body .sj-focus-panel { height: 100vh; background: var(--sj-surface); }
.sj-pip-body .sj-focus-head { padding: var(--sj-s2) var(--sj-s3); }
.sj-pip-body .sj-focus-pop, .sj-pip-body .sj-focus-keys, .sj-pip-body .sj-focus-goal { display: none; }
.sj-pip-body .sj-focus-main { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: var(--sj-s3); padding: var(--sj-s3); overflow-y: auto; }
.sj-pip-body .sj-focus-visual .sj-visual-frame { --sj-frame-max: 32vh; }
.sj-pip-body .sj-focus-visual .sj-cam-key, .sj-pip-body .sj-focus-visual .sj-visual-controls { display: none; }
.sj-pip-body .sj-focus-text { overflow: visible; padding: var(--sj-s3) var(--sj-s4); }
.sj-pip-body .sj-focus-text h2 { font-size: var(--sj-statement); }
.sj-pip-body .sj-focus-foot { padding: var(--sj-s2) var(--sj-s3); }
.sj-pip-body .sj-focus-foot .sj-btn { flex: 1; justify-content: center; padding-inline: var(--sj-s2); }

/* ---- The floating player (10.6) */
.sj-float {
  position: fixed; right: var(--sj-s4); bottom: var(--sj-s4); z-index: 50; width: min(26rem, calc(100vw - 32px)); overflow: hidden;
  background: var(--sj-surface); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); box-shadow: var(--sj-shadow-float);
}
.sj-float.is-small { width: 15rem; }
.sj-float.is-small .sj-video-segment { display: none; }
.sj-float.is-dragging { opacity: .92; user-select: none; }
.sj-float-head { display: flex; align-items: center; gap: var(--sj-s1); padding: 4px 4px 4px var(--sj-s3); border-bottom: 1px solid var(--sj-rule); cursor: move; touch-action: none; }
.sj-float-title { flex: 1; min-width: 0; margin: 0; font-size: var(--sj-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-float .sj-player { position: relative; aspect-ratio: 16 / 9; background: var(--sj-ink); }
.sj-float .sj-player > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sj-float .sj-video-missing { margin: var(--sj-s3); }
.sj-float .sj-video-segment { margin: 0; padding: 4px var(--sj-s3); font-size: var(--sj-label); color: var(--sj-muted); }
@media (max-width: 700px) {
  .sj-float { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; border-width: 1px 0 0; border-radius: var(--sj-radius-lg) var(--sj-radius-lg) 0 0; }
  .sj-float.is-small { width: auto; }
  .sj-float.is-small .sj-player { display: none; }
  .sj-float-head { cursor: default; }
  body.sj-float-open .sj-layout { padding-bottom: 70vw; }
}

/* ---- Conversations in the margin (10.5) */
.sj-margin > .sj-convos { position: absolute; left: 0; right: 0; transition: top .2s ease; }
@media (prefers-reduced-motion: reduce) { .sj-margin > .sj-convos { transition: none; } }
.sj-convos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: var(--sj-label); }
.sj-convos > * { min-width: 0; }
.sj-convos-title { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-convo {
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-surface);
  box-shadow: inset 3px 0 0 var(--sj-track); transition: border-color var(--sj-dur), box-shadow var(--sj-dur);
}
.sj-convo--question { box-shadow: inset 3px 0 0 var(--sj-class); }
.sj-convo.is-mine.sj-convo--question { box-shadow: inset 3px 0 0 var(--sj-question); }
.sj-convo--unclear { box-shadow: inset 3px 0 0 var(--sj-unclear); }
.sj-convo--response { box-shadow: inset 3px 0 0 var(--sj-ok); }
.sj-convo--note { box-shadow: inset 3px 0 0 var(--sj-class); }
.sj-convo--note .sj-flag-quote { background: var(--sj-class-wash); }
.sj-convos.is-linked .sj-convo { border-color: var(--sj-accent); }
.sj-class-hl-switch[aria-checked="true"] .sj-switch-track { background: var(--sj-class); }
.sj-convo.is-mine { background: var(--sj-surface); }
.sj-convo.is-resolved { opacity: .75; }
.sj-convo > summary { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 10px 5px 12px; list-style: none; cursor: pointer; }
.sj-convo > summary::-webkit-details-marker { display: none; }
.sj-convo > summary::after { content: "+"; margin-left: auto; color: var(--sj-muted); }
.sj-convo[open] > summary::after { content: "–"; }
.sj-convo[open] > summary { border-bottom: 1px solid var(--sj-rule); }
.sj-convo > summary .sj-avatar { border-radius: 50%; }
.sj-convo-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-convo-n, .sj-convo-private { flex: none; color: var(--sj-muted); white-space: nowrap; }
.sj-convo-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sj-track); }
.sj-convo-dot--question { background: var(--sj-question); }
.sj-convo-dot--unclear { background: var(--sj-unclear); }
.sj-convo-dot--comment { background: var(--sj-muted); }
.sj-convo-body { padding: 8px 12px 10px; }
.sj-convo-body > * { margin: 0 0 6px; }
.sj-convo-text { font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; }
.sj-convo-meta { color: var(--sj-muted); font-size: var(--sj-label); }
.sj-convo-body .sj-replies { margin: 6px 0; }
.sj-convo-body .sj-reply-form textarea { font-size: var(--sj-read-2); }
/* Narrow screens: markers at the ends of blocks, and the conversations under them */
.sj-conv-marker {
  display: inline-flex; align-items: center; gap: 2px; min-height: 26px; margin-left: 6px; padding: 0 9px; vertical-align: 2px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-muted);
  font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.6; cursor: pointer;
}
.sj-conv-marker[aria-expanded="true"] { border-color: var(--sj-accent); color: var(--sj-ink); background: var(--sj-accent-wash); }
.sj-convos--inline { margin: 0 0 var(--sj-s4); padding-left: var(--sj-s3); border-left: 2px solid var(--sj-accent-wash); max-width: var(--sj-measure); }
.sj-composer { padding: var(--sj-s3); border: 1px solid var(--sj-track); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow); }
.sj-composer .sj-label { margin-bottom: 4px; }
.sj-composer textarea { font-size: var(--sj-read-2); }
.sj-composer .sj-privacy { font-size: var(--sj-label); }
.sj-flag-form--unclear.sj-composer { border-color: var(--sj-unclear); }
.sj-margin .sj-reactions { flex-wrap: wrap; }
/* Keep what is hidden for screen readers inside the scrolling list of steps, so it can't widen the page */
.sj-tree-steps, .sj-chip, .sj-tree-panel-row { position: relative; }

/* ---- The zoom view */
.sj-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--sj-dark); color: var(--sj-surface); }
.sj-zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.sj-zoom::backdrop { background: var(--sj-dark); }
.sj-zoom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--sj-surface); color: var(--sj-ink); }
.sj-zoom-bar > * { min-width: 0; }
.sj-zoom-close { margin-left: auto; }
.sj-zoom-title { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: var(--sj-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-zoom-steps, .sj-zoom-scale { display: inline-flex; align-items: center; gap: 6px; }
.sj-zoom-status { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sj-label); }
.sj-zoom-pct { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--sj-label); }
.sj-zoom-view { position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none; background: var(--sj-dark); }
.sj-zoom-view.is-grabbing { cursor: grabbing; }
.sj-zoom-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--sj-surface); box-shadow: var(--sj-shadow-float); }
.sj-zoom-layer > img, .sj-zoom-layer > svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.sj-zoom-layer.is-moving { transition: transform .45s var(--sj-ease); }
.sj-zoom-marks { position: absolute; inset: 0; pointer-events: none; }
.sj-zoom-marks.is-moving > * { transition: left .45s var(--sj-ease), top .45s var(--sj-ease), width .45s, height .45s; }
.sj-zoom-ring { position: absolute; border: 3px solid var(--sj-accent); border-radius: 6px; box-shadow: 0 0 0 2px var(--sj-surface), 0 0 0 200vmax var(--sj-scrim); }
.sj-zoom-label { position: absolute; padding: 2px 10px; border-radius: var(--sj-pill); background: var(--sj-accent); color: var(--sj-accent-ink); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); white-space: nowrap; }
.sj-zoom-label.is-below { bottom: auto; top: calc(100% + 4px); }
.sj-zoom-num { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink); border: 2px solid var(--sj-ink); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); }
.sj-zoom-num.is-current { background: var(--sj-accent); color: var(--sj-accent-ink); border-color: var(--sj-surface); }
.sj-zoom-hint { margin: 0; padding: 6px 16px; font-size: var(--sj-label); color: var(--sj-dark-text); background: var(--sj-dark); }
html.sj-zoom-open { overflow: hidden; }
@media (max-width: 700px) {
  .sj-zoom-bar { padding: 8px 10px; gap: 6px 10px; }
  .sj-zoom-title { flex-basis: 100%; }
  .sj-zoom-status { max-width: 9rem; }
  .sj-zoom-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sj-zoom-layer.is-moving, .sj-zoom-marks.is-moving > * { transition: none; } }

/* The transcript of the part a stage shows, under the player (7.5) */
.sj-transcript { margin: 0; padding: 4px var(--sj-s3) 8px; border-top: 1px solid var(--sj-rule); font-size: var(--sj-label); }
.sj-transcript > summary { color: var(--sj-muted); }
.sj-transcript-list { max-height: 9rem; overflow-y: auto; margin: 4px 0 0; padding: 0; list-style: none; }
.sj-transcript-cue { display: block; width: 100%; padding: 3px 4px; border: 0; border-radius: var(--sj-radius); background: none; color: var(--sj-text); font: inherit; font-size: var(--sj-read-2); text-align: left; cursor: pointer; }
.sj-transcript-cue:hover { background: var(--sj-wash); }
.sj-transcript-list li.is-now .sj-transcript-cue { background: var(--sj-accent-wash); color: var(--sj-ink); }
.sj-transcript-t { color: var(--sj-muted); font-size: var(--sj-label); font-variant-numeric: tabular-nums; }

/* Windows' high-contrast mode */
@media (forced-colors: active) {
  .sj-seg-you { border: 1px solid CanvasText; background: Canvas !important; }
  .sj-seg.is-started .sj-seg-you, .sj-seg.is-done .sj-seg-you { background: Highlight !important; }
  .sj-seg.is-current .sj-seg-you { outline: 2px solid Highlight; outline-offset: 2px; }
  .sj-seg-class, .sj-class-bar-finished { background: CanvasText; }
  .sj-step.is-current, .sj-step.is-within { border: 2px solid Highlight; }
  .sj-step.is-done > .sj-step-head .sj-step-mark, .sj-done[aria-pressed="true"] .sj-done-box { background: Highlight; }
  .sj-cam-ring { border-color: Highlight; }
}

/* ---- plain.css */
/* Plain first (docs/spec/11-plain-first.md): details on demand, the switch
   that opens them all, and the glossary's popover, ported from Ceres. */

/* ---- Details on demand: a light row under the block it expands, labelled with the
   question it answers (0.3, the third layer), and how many of the class opened it (15.5). */
details.sj-more, details.sj-stuck, details.sj-after { margin-top: calc(-1 * var(--sj-s2)); margin-bottom: var(--sj-s1); padding: 0; border: 0; background: none; font-family: var(--sj-font-ui); }
:is(details.sj-more, details.sj-stuck, details.sj-after) + :is(details.sj-more, details.sj-stuck, details.sj-after) { margin-top: 0; }
:is(details.sj-more, details.sj-stuck, details.sj-after) > summary {
  position: relative; display: block; width: fit-content; max-width: 100%; min-height: 34px; margin: 0 0 0 -6px; padding: 5px 12px 5px 38px;
  border-radius: 17px; list-style: none; cursor: pointer;
  font-family: var(--sj-font-ui); font-size: var(--sj-read-2); line-height: 1.35; color: var(--sj-text);
  transition: background var(--sj-dur), color var(--sj-dur);
}
:is(details.sj-more, details.sj-stuck, details.sj-after) > summary::-webkit-details-marker { display: none; }
:is(details.sj-more, details.sj-stuck, details.sj-after) > summary::before {
  content: "+"; position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sj-accent-wash); color: var(--sj-accent); font-weight: var(--sj-weight-ui); font-size: 15px; line-height: 1;
  transition: transform var(--sj-dur) var(--sj-ease), background var(--sj-dur);
}
details.sj-stuck > summary::before { content: "?"; background: var(--sj-warn-wash); color: var(--sj-warn); }
details.sj-after > summary::before { content: "→"; background: var(--sj-ok-wash); color: var(--sj-ok); }
:is(details.sj-more, details.sj-stuck, details.sj-after) > summary:hover { background: var(--sj-wash); color: var(--sj-ink); }
:is(details.sj-more, details.sj-stuck, details.sj-after) > summary:hover::before { background: var(--sj-accent); color: var(--sj-accent-ink); }
details.sj-stuck > summary:hover::before { background: var(--sj-warn); color: var(--sj-surface); }
details.sj-after > summary:hover::before { background: var(--sj-ok); color: var(--sj-surface); }
:is(details.sj-more, details.sj-stuck, details.sj-after)[open] > summary { color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
details.sj-more[open] > summary::before { content: "–"; }
.sj-more-class {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 0 8px; border-radius: var(--sj-pill); vertical-align: 1px;
  background: var(--sj-class-wash); color: var(--sj-class); font-size: var(--sj-label); font-weight: 400; line-height: 1.7; white-space: nowrap;
}
.sj-more-class::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sj-details-body {
  margin: var(--sj-s1) 0 var(--sj-s3) 10px; padding: var(--sj-s3) var(--sj-s4); border-radius: var(--sj-ui-radius);
  background: var(--sj-surface); border: 1px solid var(--sj-rule); box-shadow: inset 3px 0 0 var(--sj-accent-wash);
  animation: sj-unfold var(--sj-dur) var(--sj-ease);
}
@keyframes sj-unfold { from { opacity: 0; transform: translateY(-4px); } }
.sj-step.is-current .sj-details-body, .sj-step.is-within .sj-details-body { background: var(--sj-paper); }
.sj-details-body > * { margin: 0 0 var(--sj-s2); }
.sj-details-body > :last-child { margin-bottom: 0; }
.sj-details-body > p, .sj-details-body li { font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.55; color: var(--sj-text); }

/* A switch in a bar or menu */
.sj-details-switch {
  display: inline-flex; align-items: center; gap: var(--sj-s2); min-height: 32px; padding: 2px var(--sj-s3) 2px var(--sj-s2);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink);
  font: inherit; font-size: var(--sj-label); cursor: pointer; white-space: nowrap;
}
.sj-details-switch:hover { border-color: var(--sj-ink); }

/* ---- Glossary terms */
dfn.sj-term {
  font-style: inherit; color: inherit; cursor: help; border-radius: 2px;
  text-decoration: underline dotted 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--sj-accent) 70%, transparent);
}
dfn.sj-term:hover, dfn.sj-term[aria-expanded="true"] { text-decoration-color: var(--sj-accent); background: var(--sj-accent-wash); }
dfn.sj-term:focus-visible { outline-offset: 1px; }

/* ---- The popover: one level a box, beside its term or its parent */
.sj-gloss-tip {
  position: fixed; z-index: 120; width: min(360px, calc(100vw - 16px)); overflow: auto; outline: none;
  padding: 12px 14px 10px; background: var(--sj-surface); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg);
  box-shadow: var(--sj-shadow-float); pointer-events: none; color: var(--sj-text); text-align: left;
  font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.45;
}
.sj-gloss-tip.is-pinned { pointer-events: auto; border-color: var(--sj-track); }
.sj-gloss-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sj-s2); }
.sj-gloss-head strong { font-size: var(--sj-read-2); font-weight: var(--sj-weight-strong); color: var(--sj-ink); }
.sj-gloss-x { border: 0; background: none; color: var(--sj-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.sj-gloss-x:hover { color: var(--sj-ink); }
.sj-gloss-back { margin-right: auto; border: 0; background: none; color: var(--sj-accent); font: inherit; cursor: pointer; padding: 0; }
.sj-gloss-diagram { margin: 8px 0 6px; padding: 6px; background: var(--sj-wash); border-radius: var(--sj-radius); }
.sj-gloss-diagram img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.sj-gloss-def { margin: 6px 0 4px; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.45; color: var(--sj-text); }
.sj-gloss-html > p { margin: 0 0 4px; }
.sj-gloss-html > :last-child { margin-bottom: 0; }
.sj-gloss-label { margin: 0 0 2px; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-gloss-example { margin: 8px 0 2px; color: var(--sj-muted); }
.sj-gloss-confusion { margin: 8px 0 2px; padding-left: 8px; border-left: 2px solid var(--sj-unclear); color: var(--sj-text); }
.sj-gloss-see { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--sj-rule); }
.sj-gloss-see > span { color: var(--sj-muted); font-size: var(--sj-label); }
.sj-gloss-pin { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-gloss-bar { flex: 1; min-width: 30px; height: 3px; border-radius: var(--sj-pill); background: var(--sj-rule); overflow: hidden; }
.sj-gloss-bar i { display: block; height: 100%; background: var(--sj-accent); transform-origin: left; transform: scaleX(0); animation: sj-gloss-fill 900ms linear forwards; }
.sj-gloss-tip.is-pinned .sj-gloss-bar i { animation: none; transform: scaleX(1); background: var(--sj-ok); }
@keyframes sj-gloss-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sj-gloss-bar i { animation-duration: 1ms; } }

/* On a phone: a sheet from the bottom for each level, each over the last, with Back */
.sj-gloss-tip.is-sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 72vh !important;
  padding: 16px 18px calc(14px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--sj-radius-lg) var(--sj-radius-lg) 0 0;
  box-shadow: var(--sj-shadow-float); pointer-events: auto; font-size: var(--sj-read-2);
}
.sj-gloss-tip.is-sheet .sj-gloss-pin { display: none; }
.sj-gloss-tip.is-sheet .sj-gloss-head strong { font-size: var(--sj-statement-sub); }
.sj-gloss-tip.is-sheet .sj-gloss-def { font-size: var(--sj-read); }

/* Each opened detail ends with a way to ask what it didn't answer (14.5) */
.sj-details-body > .sj-still { margin: var(--sj-s3) 0 0; padding-top: var(--sj-s2); border-top: 1px dashed var(--sj-rule); font-family: var(--sj-font-ui); }
.sj-still .sj-link-btn { font-size: var(--sj-label); }

@media (forced-colors: active) {
  :is(details.sj-more, details.sj-stuck, details.sj-after) > summary::before { border: 1px solid ButtonText; }
  .sj-more-class { border: 1px solid CanvasText; }
}

/* ---- trail.css */
/* The trail (docs/spec/16-trail.md): one step at a time with its exhibit,
   trail markers and branching paths, pop-outs from icons, the corner with
   the class and the trail's notes, the to-do list, and each tour's emblem.
   Only --sj-* tokens. */

/* ---- Walking one step at a time (16.1) */
html.sj-walk .sj-guided-pin { display: none; }
html.sj-walk .sj-guided-grid { display: block !important; }
html.sj-walk .sj-guided { margin-bottom: 0; }
html.sj-walk .sj-step[data-sj-level="1"] { max-width: calc(var(--sj-measure) + 6rem); margin-bottom: 6px; }
/* A folded step: its statement, a row to open it */
html.sj-walk .sj-step.is-folded { padding-top: 10px; padding-bottom: 10px; border-color: transparent; background: none; box-shadow: none; }
html.sj-walk .sj-step.is-folded:hover { background: var(--sj-surface); border-color: var(--sj-rule); }
html.sj-walk .sj-step.is-folded > .sj-step-head { margin-bottom: 0; }
html.sj-walk .sj-step.is-folded > .sj-step-head h3 { font-size: var(--sj-statement-sub); font-weight: 400; color: var(--sj-text); }
html.sj-walk .sj-step.is-folded.is-done > .sj-step-head h3 { color: var(--sj-muted); }
html.sj-walk .sj-step.is-folded > .sj-step-head .sj-step-mark { top: 12px; width: 22px; height: 22px; }
html.sj-walk .sj-step.is-folded > .sj-step-foot,
html.sj-walk .sj-step.is-folded .sj-corner,
html.sj-walk .sj-step.is-folded > .sj-step-head .sj-pop-btn { display: none; }
/* The open step: the one card on the page */
html.sj-walk .sj-step.is-open {
  padding: var(--sj-s5) var(--sj-s6) var(--sj-s4) 60px; margin: var(--sj-s3) 0 var(--sj-s4);
  background: var(--sj-surface); border-color: var(--sj-rule); box-shadow: var(--sj-shadow-raised), inset 4px 0 0 var(--sj-accent);
}
html.sj-walk .sj-step.is-open > .sj-step-head .sj-step-mark { left: 22px; top: calc(var(--sj-s5) + 4px); }
html.sj-walk .sj-step.is-open > .sj-step-head h3 { font-size: calc(var(--sj-statement) * 1.08); }
html.sj-walk .sj-step.is-open > .sj-step-body > * { max-width: var(--sj-measure); }
/* The statement is the button that opens its step */
.sj-step-toggle {
  display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 4px;
}
html:not(.sj-walk) .sj-step-toggle { cursor: inherit; }
html.sj-walk .sj-step.is-folded .sj-step-toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--sj-radius-lg); }
html.sj-walk .sj-step.is-folded .sj-step-toggle:focus-visible { outline: none; }
html.sj-walk .sj-step.is-folded:has(.sj-step-toggle:focus-visible) { outline: 2px solid var(--sj-accent); outline-offset: 2px; }
@media (max-width: 599px) {
  html.sj-walk .sj-step.is-open { padding: var(--sj-s4) var(--sj-s4) var(--sj-s3) 48px; margin-left: -8px; margin-right: -8px; }
  html.sj-walk .sj-step.is-open > .sj-step-head .sj-step-mark { left: 14px; top: calc(var(--sj-s4) + 3px); }
}

/* The exhibit: the stage's picture, in the open step under its statement, as a panel
   of its own that ends with its caption, so the text plainly starts after it (17.2) */
.sj-exhibit {
  margin: var(--sj-s3) 0 var(--sj-s5); max-width: none; padding: var(--sj-s3) var(--sj-s3) var(--sj-s2);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-paper);
}
.sj-exhibit > .sj-visual { margin: 0; opacity: 1 !important; visibility: visible !important; }
.sj-exhibit .sj-visual-frame { --sj-frame-max: min(60vh, 620px); background: var(--sj-surface); box-shadow: var(--sj-shadow); }
.sj-exhibit figcaption {
  display: block !important; margin: var(--sj-s2) 0 0; padding-top: var(--sj-s2); border-top: 1px solid var(--sj-rule);
  font-size: var(--sj-label); line-height: 1.45; color: var(--sj-muted);
}
@media (max-width: 599px) { .sj-exhibit { margin-left: -36px; padding: var(--sj-s2); } .sj-exhibit .sj-visual-frame { --sj-frame-max: 44vh; } }

/* The open step's foot: its buttons and the trail markers in a band along the card's
   bottom, apart from the text and its details above (17.2) */
html.sj-walk .sj-step.is-open { padding-bottom: 0; }
html.sj-walk .sj-step.is-open > .sj-step-foot {
  margin: var(--sj-s5) calc(-1 * var(--sj-s6)) 0 -56px; padding: var(--sj-s3) var(--sj-s6) var(--sj-s3) 56px;
  border-top: 1px solid var(--sj-rule); background: var(--sj-paper);
}
html.sj-walk .sj-step.is-open > .sj-trail-markers {
  margin: 0 calc(-1 * var(--sj-s6)) 0 -56px; padding: var(--sj-s3) var(--sj-s6) var(--sj-s4) 56px;
  border-top: 1px dashed var(--sj-rule); background: var(--sj-paper); border-radius: 0 0 var(--sj-radius-lg) var(--sj-radius-lg);
}
html.sj-walk .sj-step.is-open > .sj-step-foot:has(+ .sj-trail-markers[hidden]),
html.sj-walk .sj-step.is-open > .sj-step-foot:last-child { border-radius: 0 0 var(--sj-radius-lg) var(--sj-radius-lg); padding-bottom: var(--sj-s4); }
html.sj-walk .sj-step.is-open > .sj-trail-markers .sj-marker { background: var(--sj-surface); }
@media (max-width: 599px) {
  html.sj-walk .sj-step.is-open > .sj-step-foot { margin: var(--sj-s4) calc(-1 * var(--sj-s4)) 0 -44px; padding: var(--sj-s3) var(--sj-s4) var(--sj-s3) 44px; }
  html.sj-walk .sj-step.is-open > .sj-trail-markers { margin: 0 calc(-1 * var(--sj-s4)) 0 -44px; padding: var(--sj-s3) var(--sj-s4) var(--sj-s4) 44px; }
}
/* A figure in the text ends with its caption, set apart from the text that follows */
.sj-figure { margin-bottom: var(--sj-s5); }
.sj-figure figcaption { padding-top: var(--sj-s2); border-top: 1px solid var(--sj-rule); }

/* Trail markers at the open step's foot (16.1) */
.sj-trail-markers { display: flex; flex-wrap: wrap; gap: var(--sj-s2); }
.sj-trail-markers[hidden], html:not(.sj-walk) .sj-trail-markers { display: none; }
.sj-marker {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 6px 14px 6px 8px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-paper); color: var(--sj-ink);
  text-decoration: none; transition: border-color var(--sj-dur), background var(--sj-dur), transform var(--sj-dur) var(--sj-ease);
}
.sj-marker:hover { border-color: var(--sj-accent); background: var(--sj-surface); color: var(--sj-ink); transform: translateX(2px); }
.sj-marker-post {
  flex: none; position: relative; width: 26px; height: 26px; border-radius: 8px; background: var(--sj-accent-wash); color: var(--sj-accent);
}
.sj-marker-post::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat;
  --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.sj-marker--side { border-style: dashed; }
.sj-marker--side .sj-marker-post { background: var(--sj-wash); color: var(--sj-muted); }
.sj-marker--side .sj-marker-post::after { --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19V11a4 4 0 0 1 4-4h9M15 3l4 4-4 4'/%3E%3C/svg%3E"); }
.sj-marker--stage .sj-marker-post { background: var(--sj-accent); color: var(--sj-accent-ink); }
.sj-marker-text { display: grid; min-width: 0; line-height: 1.25; }
.sj-marker-label { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-marker-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sj-weight-ui); }
.sj-marker-note, .sj-marker-time { flex: none; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-marker-note { font-style: italic; }

/* ---- Branching paths (16.3) */
.sj-paths { margin: var(--sj-s3) 0 var(--sj-s4); padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-paper); }
.sj-paths-q { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sj-s2); font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); }
.sj-paths-q::before {
  content: ""; width: 18px; height: 18px; background: var(--sj-accent);
  -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat;
  --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7M12 14 6 8M12 14l6-6M6 8V4M6 4 3.5 6.5M6 4l2.5 2.5M18 8V4M18 4l-2.5 2.5M18 4l2.5 2.5'/%3E%3C/svg%3E");
}
.sj-paths-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sj-s3); }
.sj-path-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 14px 4px 10px;
  border: 1px solid var(--sj-track); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink);
  font: inherit; font-size: var(--sj-read-2); cursor: pointer; transition: border-color var(--sj-dur), background var(--sj-dur);
}
.sj-path-choice:hover { border-color: var(--sj-accent); }
.sj-path-choice-post { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sj-control); }
.sj-path-choice[aria-pressed="true"] { border-color: var(--sj-accent); background: var(--sj-accent-wash); font-weight: var(--sj-weight-ui); }
.sj-path-choice[aria-pressed="true"] .sj-path-choice-post { border-color: var(--sj-accent); background: var(--sj-accent); box-shadow: inset 0 0 0 2px var(--sj-surface); }
.sj-paths-note { margin: -4px 0 var(--sj-s3); font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-paths-note[hidden] { display: none; }
.sj-path > :last-child { margin-bottom: 0; }
.sj-path > p:not(.sj-path-label), .sj-path li { font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.6; }
.sj-path-label { margin: var(--sj-s3) 0 var(--sj-s1); font-family: var(--sj-font-ui); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-paths.is-enhanced .sj-path-label { display: none; }
.sj-paths.is-enhanced .sj-path { animation: sj-unfold var(--sj-dur) var(--sj-ease); }

/* ---- Pop-outs from icons (16.2): quiet buttons, a small panel beside them */
.sj-pop-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px 2px 6px; vertical-align: middle;
  border: 1px solid transparent; border-radius: var(--sj-pill); background: none; color: var(--sj-muted);
  font: inherit; font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: 400; line-height: 1.3; cursor: pointer;
  transition: background var(--sj-dur), color var(--sj-dur), border-color var(--sj-dur);
}
.sj-pop-btn:hover, .sj-pop-btn.is-open { background: var(--sj-wash); color: var(--sj-ink); }
.sj-pop-btn .sj-icon { width: 18px; height: 18px; color: var(--sj-accent); }
.sj-pop-btn--why { padding: 2px; min-height: 28px; }
.sj-pop-btn--why .sj-pop-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sj-pop {
  width: min(22rem, calc(100vw - 16px)); max-height: min(70vh, 32rem); margin: auto; padding: var(--sj-s3) var(--sj-s4) var(--sj-s4); overflow: auto;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); color: var(--sj-text); box-shadow: var(--sj-shadow-float);
  font-family: var(--sj-font-ui); font-size: var(--sj-read-2); line-height: 1.5;
}
.sj-pop:popover-open { animation: sj-rise var(--sj-dur) var(--sj-ease); }
.sj-pop::backdrop { background: transparent; }
.sj-pop-title { margin: 0 0 var(--sj-s2); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); letter-spacing: .01em; }
.sj-pop-body > :last-child { margin-bottom: 0; }
.sj-pop-body p, .sj-pop-body li { font-family: var(--sj-font-reading); }
.sj-pop-body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.sj-pop--goal .sj-pop-body { font-family: var(--sj-font-reading); font-size: var(--sj-read); color: var(--sj-ink); }

/* ---- The corner: the class and the trail's notes (16.5) */
.sj-corner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sj-step-head > .sj-corner { margin-left: auto; }
.sj-corner-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 1px 10px 1px 8px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-class);
  font: inherit; font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.3; white-space: nowrap;
}
.sj-corner-chip[hidden] { display: none; }
.sj-corner-chip .sj-icon { width: 16px; height: 16px; }
button.sj-corner-chip { cursor: pointer; transition: border-color var(--sj-dur), background var(--sj-dur); }
button.sj-corner-chip:hover { border-color: var(--sj-class); background: var(--sj-class-wash); }
.sj-signpost.is-empty { color: var(--sj-muted); }
/* The Notes chip's wrapper (its button and popover) is a box, not a line of text, so the chip
   sits level with the others rather than on a baseline (Simon's note f16). */
.sj-signpost-wrap { display: inline-flex; align-items: center; }
.sj-stop-head { position: relative; }
.sj-stop-head > .sj-corner { margin-top: var(--sj-s2); }
@media (min-width: 760px) {
  .sj-stop-head > .sj-corner { position: absolute; top: 0; right: 0; margin: 0; }
  .sj-stop-head > h2 { padding-right: 0; }
}
.sj-stop-class .sj-class-bar { width: 44px; height: 5px; }
.sj-stop-class .sj-class-words { color: var(--sj-class); }

/* ---- Notes on the trail (16.4) */
.sj-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s2); }
.sj-note { padding: var(--sj-s2) var(--sj-s3) var(--sj-s3); border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-surface); box-shadow: inset 3px 0 0 var(--sj-class); }
.sj-note.is-pending { border-style: dashed; box-shadow: inset 3px 0 0 var(--sj-track); }
.sj-note-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sj-s2); font-size: var(--sj-label); }
.sj-note-by .sj-avatar { border-radius: 50%; }
.sj-note-name { font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-note-when { color: var(--sj-muted); }
.sj-note-where { margin: 4px 0 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-note-text { margin: 6px 0 0; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; color: var(--sj-text); }
.sj-note-helped {
  margin-top: 8px; min-height: 30px; padding: 2px 12px; border: 1px solid var(--sj-rule); border-radius: var(--sj-pill);
  background: var(--sj-surface); color: var(--sj-muted); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-note-helped:hover { border-color: var(--sj-class); color: var(--sj-ink); }
.sj-note-helped[aria-pressed="true"] { border-color: var(--sj-class); background: var(--sj-class-wash); color: var(--sj-ink); }
.sj-note-helped-n { color: var(--sj-class); font-size: var(--sj-label); }
p > .sj-note-helped-n, .sj-note > .sj-note-helped-n { display: inline-block; margin-top: 6px; }
.sj-note-form { display: grid; gap: 6px; margin-top: var(--sj-s3); }
.sj-note-form .sj-label { margin: 0; color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-note-form textarea { font-size: var(--sj-read-2); }
.sj-note-form .sj-privacy { margin: 0; }
.sj-pop--notes { width: min(24rem, calc(100vw - 16px)); }
.sj-pop--notes .sj-note-form { padding-top: var(--sj-s3); border-top: 1px solid var(--sj-rule); }
.sj-stage-end-notes { display: grid; gap: var(--sj-s2); padding-top: var(--sj-s3); border-top: 1px solid var(--sj-rule); }
.sj-stage-end-notes > .sj-stage-end-q { display: flex; align-items: center; gap: 6px; color: var(--sj-class); font-weight: var(--sj-weight-ui); }
.sj-stage-end-notes > .sj-stage-end-q .sj-icon { width: 18px; height: 18px; }
.sj-note-leave { justify-self: start; }
.sj-note-leave .sj-icon { color: var(--sj-class); }

/* ---- Later and the to-do list (16.6) */
.sj-step-later[aria-pressed="true"] { color: var(--sj-accent); border-color: var(--sj-accent-wash); background: var(--sj-accent-wash); }
.sj-step-later[hidden] { display: none; }
html.sj-walk .sj-step.is-later.is-folded > .sj-step-head h3::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -1px; background: var(--sj-accent);
  -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat;
  --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
}
.sj-tree-todo[hidden] { display: none; }
.sj-todo-btn-label { display: inline-flex; align-items: center; gap: 6px; }
.sj-todo-btn-label .sj-icon { color: var(--sj-accent); }
.sj-todo-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--sj-pill); background: var(--sj-accent); color: var(--sj-accent-ink); font-size: 12px; font-weight: var(--sj-weight-ui); }
.sj-todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sj-todo-list a { display: grid; gap: 0; padding: 6px 10px; border-radius: var(--sj-ui-radius); text-decoration: none; color: var(--sj-ink); }
.sj-todo-list a:hover { background: var(--sj-wash); color: var(--sj-ink); }
.sj-todo-where { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-todo-title { font-size: var(--sj-read-2); }
/* Up next, on the course page */
.sj-todo-box { padding: var(--sj-s4) var(--sj-s5) var(--sj-s5); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow-raised); }
.sj-todo-h { margin: 0 0 var(--sj-s3); font-size: var(--sj-h3); }
.sj-todo-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sj-todo {
  position: relative; display: flex; align-items: center; gap: var(--sj-s3); padding: 10px 12px; border-radius: var(--sj-ui-radius);
  transition: background var(--sj-dur);
}
.sj-todo:hover { background: var(--sj-wash); }
.sj-todo-text { flex: 1; min-width: 0; }
.sj-todo-tour { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-todo-step { font-size: var(--sj-statement-sub); color: var(--sj-ink); text-decoration: none; }
.sj-todo-step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sj-todo-step:hover { color: var(--sj-accent); }
.sj-todo-verb { font-weight: var(--sj-weight-ui); color: var(--sj-accent); }
.sj-todo-count { flex: none; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-todo--later > .sj-icon { width: 30px; height: 22px; color: var(--sj-accent); }
.sj-todo--later .sj-todo-verb { color: var(--sj-muted); }
.sj-todo--fresh { border-top: 1px dashed var(--sj-rule); border-radius: 0 0 var(--sj-ui-radius) var(--sj-ui-radius); }

/* ---- Each tour's emblem in its colour (16.7) */
.sj-emblem {
  --sj-trail: var(--sj-way-1);
  position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 30%;
  background: color-mix(in srgb, var(--sj-trail) 12%, var(--sj-surface)); color: var(--sj-trail);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sj-trail) 22%, transparent);
}
.sj-emblem-shape { width: 58%; height: 58%; background: currentColor; -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat; }
.sj-emblem--own img { width: 70%; height: 70%; object-fit: contain; }
.sj-emblem--lg { width: 64px; height: 64px; }
.sj-emblem--sm { width: 32px; height: 32px; border-radius: 10px; }

/* On the trailhead the pop-outs keep their words: "What you'll get", "Why it matters" */
.sj-orient-pops .sj-pop-btn { font-size: var(--sj-read-2); color: var(--sj-text); padding: 4px 12px 4px 8px; }
.sj-orient-pops .sj-pop-btn--why .sj-pop-btn-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

/* ---- Feedback (17.3): a button in the masthead, a composer beside the page */
.sj-fb-btn {
  position: fixed; right: var(--sj-s4); bottom: var(--sj-s4); z-index: 80;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 16px 4px 12px;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-ink); box-shadow: var(--sj-shadow);
  font: inherit; font-size: var(--sj-label); cursor: pointer; transition: border-color var(--sj-dur), box-shadow var(--sj-dur), transform var(--sj-dur) var(--sj-ease);
}
.sj-fb-btn:hover, .sj-fb-btn[aria-expanded="true"] { border-color: var(--sj-accent); box-shadow: var(--sj-shadow-raised); transform: translateY(-1px); }
.sj-fb-btn .sj-icon { color: var(--sj-accent); }
@media (max-width: 599px) {
  .sj-fb-btn { right: var(--sj-s3); bottom: var(--sj-s3); width: 44px; height: 44px; padding: 0; justify-content: center; }
  .sj-fb-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* With the video player open in that corner, the button steps to the other one */
body.sj-float-open .sj-fb-btn { right: auto; left: var(--sj-s4); }
@media print { .sj-fb-btn, .sj-fb { display: none !important; } }
.sj-fb {
  position: fixed; right: var(--sj-s4); bottom: var(--sj-s4); z-index: 90; width: min(25rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow-float);
  animation: sj-rise var(--sj-dur) var(--sj-ease);
}
.sj-fb[hidden] { display: none; }
.sj-fb-form { display: grid; gap: var(--sj-s2); padding: var(--sj-s4) var(--sj-s5) var(--sj-s5); }
.sj-fb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s2); }
.sj-fb-head h2 { margin: 0; font-size: var(--sj-h3); }
.sj-fb-lede { margin: 0 0 var(--sj-s2); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-fb-label { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-fb-optional { font-weight: 400; color: var(--sj-muted); }
.sj-fb-kinds, .sj-fb-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.sj-fb-chip {
  min-height: 32px; padding: 2px 12px; border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); background: var(--sj-surface); color: var(--sj-text);
  font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-fb-chip:hover { border-color: var(--sj-track); }
.sj-fb-chip[aria-checked="true"] { border-color: var(--sj-accent); background: var(--sj-accent-wash); color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-fb-chip--n { min-width: 36px; padding: 2px; }
.sj-fb-scale-row { display: flex; align-items: center; gap: var(--sj-s2); }
.sj-fb-end { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-fb-form textarea { font-family: var(--sj-font-ui); font-size: var(--sj-read-2); }
.sj-fb-pin p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-text); }
.sj-fb-pin .sj-icon, .sj-fb-pin .sj-btn .sj-icon { color: var(--sj-accent); }
.sj-fb-pin > .sj-btn { margin-top: var(--sj-s2); }
.sj-fb-shot { display: grid; gap: var(--sj-s2); margin-top: var(--sj-s2); }
.sj-fb-preview.is-off { opacity: .35; }
.sj-fb-thumb { position: relative; overflow: hidden; border: 1px solid var(--sj-rule); border-radius: var(--sj-radius); background: var(--sj-wash); }
.sj-fb-thumb img { display: block; width: 100%; height: auto; }
.sj-fb-thumb-pin { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--sj-accent); box-shadow: 0 0 0 3px var(--sj-surface), 0 0 0 6px var(--sj-accent-wash); }
.sj-fb-noshot { margin: 0; padding: var(--sj-s3); border: 1px dashed var(--sj-track); border-radius: var(--sj-radius); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-fb-attach { justify-self: start; }
.sj-fb-more { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-fb-more > summary { color: var(--sj-muted); }
.sj-fb-context { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--sj-s3); margin: var(--sj-s2) 0 0; }
.sj-fb-context dt { color: var(--sj-muted); }
.sj-fb-context dd { margin: 0; color: var(--sj-text); overflow-wrap: anywhere; }
/* Pointing at something: the page under a crosshair, a hint at the top */
.sj-fb-pinlayer { position: fixed; inset: 0; z-index: 95; cursor: crosshair; background: color-mix(in srgb, var(--sj-accent) 6%, transparent); outline: 3px solid var(--sj-accent); outline-offset: -3px; }
.sj-fb-pinlayer-hint {
  position: fixed; top: var(--sj-s4); left: 50%; transform: translateX(-50%); margin: 0; padding: var(--sj-s2) var(--sj-s4);
  border-radius: var(--sj-pill); background: var(--sj-ink); color: var(--sj-surface); font-size: var(--sj-label); box-shadow: var(--sj-shadow-float); pointer-events: none;
}
@media (max-width: 599px) { .sj-fb { right: 0; left: 0; bottom: 0; width: auto; max-height: 88dvh; border-radius: var(--sj-radius-lg) var(--sj-radius-lg) 0 0; } }

/* ==== Simon's first notes (docs/spec/18-first-notes.md) ==== */

/* ---- The trailhead (18.1, f1): across the page; the emblem beside the title, the kicker
   under it; Start on its own line with the trail's facts under it, each with an icon */
@media (min-width: 1100px) {
  .sj-trailhead { margin-right: calc(-1 * (var(--sj-margin-w) + var(--sj-s7))); }
}
.sj-trailhead-top { display: flex; align-items: center; gap: var(--sj-s4); margin-bottom: var(--sj-s5); }
.sj-trailhead-top > .sj-emblem { margin: 0; }
.sj-trailhead-titles { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.sj-trailhead-titles > h1 { max-width: 28ch; margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); }
.sj-trailhead-titles > .sj-kicker {
  display: inline-flex; align-items: center; min-height: 26px; margin: 0; padding: 0 var(--sj-s3); border-radius: var(--sj-pill);
  /* the trail's colour, deepened toward ink so that every one of the five reads on its tint (4.5:1) */
  background: color-mix(in srgb, var(--sj-trail) 10%, var(--sj-surface)); color: color-mix(in srgb, var(--sj-trail) 78%, var(--sj-ink)); font-weight: var(--sj-weight-ui);
}
.sj-start { display: grid; gap: var(--sj-s3); justify-items: start; margin: 0 0 var(--sj-s5); }
.sj-start-actions { display: flex; flex-wrap: wrap; gap: var(--sj-s3); }
.sj-start-facts { display: flex; flex-wrap: wrap; gap: 4px var(--sj-s5); margin: 0; padding: 0; list-style: none; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-start-facts li { display: inline-flex; align-items: center; gap: 6px; }
.sj-start-facts .sj-icon { width: 16px; height: 16px; color: var(--sj-accent); }
.sj-start-facts .sj-start-class, .sj-start-facts .sj-start-class .sj-icon { color: var(--sj-class); }
.sj-start-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin: calc(-1 * var(--sj-s2)) 0 var(--sj-s5);
  padding: var(--sj-s2) var(--sj-s3); border: 1px dashed var(--sj-track); border-radius: var(--sj-ui-radius); background: var(--sj-paper);
  font-size: var(--sj-read-2); width: fit-content;
}
.sj-start-offer p { margin: 0; color: var(--sj-text); }
@media (max-width: 599px) { .sj-trailhead-top { align-items: flex-start; } .sj-trailhead-top > .sj-emblem { width: 48px; height: 48px; } }

/* ---- Stages as cards on the trail (18.2–18.3, f2, f3): one card a stage, joined by a line
   down the left with the next stage's name along it */
.sj-tour { --sj-trail-gutter: 56px; }
@media (max-width: 760px) { .sj-tour { --sj-trail-gutter: 22px; } }
.sj-stop.is-card {
  position: relative; margin: 0 0 0 var(--sj-trail-gutter); padding: var(--sj-s5) var(--sj-s6) 0;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow);
}
.sj-stop.is-card:last-of-type { margin-bottom: var(--sj-s7); }
/* the trail beside the card, and the stage's marker on it */
.sj-stop.is-card::before {
  content: ""; position: absolute; left: calc(-1 * var(--sj-trail-gutter) / 2 - 1px); top: 0; bottom: 0; border-left: 2px solid var(--sj-track);
}
.sj-stop.is-card::after {
  content: ""; position: absolute; left: calc(-1 * var(--sj-trail-gutter) / 2 - 9px); top: calc(var(--sj-s5) + 2px); width: 18px; height: 18px;
  border-radius: 50%; border: 3px solid var(--sj-control); background: var(--sj-surface); box-shadow: 0 0 0 4px var(--sj-paper);
}
.sj-stop.is-card.is-current::after { border-color: var(--sj-accent); background: var(--sj-accent); box-shadow: 0 0 0 4px var(--sj-paper), 0 0 0 7px var(--sj-accent-wash); }
.sj-stop.is-card.is-stage-done::after { border-color: var(--sj-ok); background: var(--sj-ok); }
.sj-trail-link { position: relative; height: 128px; margin-left: var(--sj-trail-gutter); }
.sj-trail-link::before { content: ""; position: absolute; left: calc(-1 * var(--sj-trail-gutter) / 2 - 1px); top: 0; bottom: 0; border-left: 2px dashed var(--sj-track); }
.sj-trail-link-text {
  position: absolute; left: calc(-1 * var(--sj-trail-gutter) / 2 + 6px); top: 12px; height: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  writing-mode: vertical-rl; writing-mode: sideways-rl; font-size: var(--sj-label); color: var(--sj-muted);
}
.sj-trail-link-title { margin-top: 6px; color: var(--sj-text); }
@media (max-width: 760px) {
  .sj-trail-link { height: 56px; }
  .sj-trail-link-text { writing-mode: horizontal-tb; left: 6px; top: 50%; height: auto; max-width: calc(100% - 6px); transform: translateY(-50%); }
  .sj-trail-link-title { margin: 0 0 0 6px; }
  .sj-stop.is-card { padding: var(--sj-s4) var(--sj-s4) 0; }
}
/* The stage's head: the number, the title with Watch on its line, then its line of facts */
.sj-stop.is-card > .sj-stop-head { max-width: none; margin-bottom: var(--sj-s3); }
.sj-stop-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sj-s2) var(--sj-s4); }
.sj-stop-title > h2 { margin: 0; }
.sj-stop-title > .sj-video-cue {
  flex: none; gap: 10px; min-height: 44px; padding: 4px 18px 4px 6px; border: 0; border-radius: var(--sj-pill);
  background: var(--sj-accent-wash); color: var(--sj-accent); font-weight: var(--sj-weight-ui);
}
.sj-stop-title > .sj-video-cue::before {
  content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--sj-accent);
  -webkit-mask: none; mask: none;
  box-shadow: inset 0 0 0 0 transparent;
}
.sj-stop-title > .sj-video-cue { position: relative; }
.sj-stop-title > .sj-video-cue::after {
  content: ""; position: absolute; left: 19px; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--sj-accent-ink);
}
.sj-stop-title > .sj-video-cue:hover { background: color-mix(in srgb, var(--sj-accent) 16%, var(--sj-surface)); }
.sj-stop-title > .sj-video-cue.is-unrecorded { color: var(--sj-accent); border-style: none; }
.sj-stop.is-card .sj-stop-meta { margin: var(--sj-s2) 0 0; gap: 6px var(--sj-s3); }
.sj-stop-meta > .sj-corner { display: inline-flex; gap: 6px; }
.sj-stop-meta > .sj-pop-btn--goal { margin-left: 0; }
/* The steps: an inset list joined by a line; the step in hand raised out of it */
.sj-stop.is-card .sj-steps {
  position: relative; margin: var(--sj-s4) 0 var(--sj-s5); padding: var(--sj-s2) 0;
  border-radius: var(--sj-radius-lg); background: var(--sj-wash); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--sj-ink) 6%, transparent);
}
.sj-stop.is-card .sj-steps::before {
  content: ""; position: absolute; left: 29px; top: 34px; bottom: 34px; border-left: 2px solid var(--sj-track); pointer-events: none;
}
.sj-stop.is-card .sj-steps > .sj-step, html.sj-walk .sj-stop.is-card .sj-steps > .sj-step { max-width: none; margin: 0; }
html.sj-walk .sj-stop.is-card .sj-steps > .sj-step.is-open { margin: var(--sj-s2) 0; }
html.sj-walk .sj-stop.is-card .sj-step.is-open > .sj-step-head .sj-step-mark { left: 18px; }
html.sj-walk .sj-stop.is-card .sj-step.is-folded:hover { background: color-mix(in srgb, var(--sj-surface) 70%, transparent); border-color: transparent; }
.sj-stop.is-card .sj-step-mark { z-index: 1; }
@media (max-width: 599px) {
  .sj-stop.is-card .sj-steps { margin-inline: calc(-1 * var(--sj-s3)); }
  .sj-stop.is-card .sj-steps::before { left: 23px; }
  html.sj-walk .sj-stop.is-card .sj-step.is-open > .sj-step-head .sj-step-mark { left: 12px; }
}
/* The end card is the stage card's bottom strip */
.sj-stop.is-card > .sj-stop-foot { max-width: none; margin: var(--sj-s4) calc(-1 * var(--sj-s6)) 0; }
.sj-stop.is-card .sj-stage-end {
  border: 0; border-top: 1px solid var(--sj-rule); border-radius: 0 0 var(--sj-radius-lg) var(--sj-radius-lg);
  background: var(--sj-paper); box-shadow: none; padding: var(--sj-s4) var(--sj-s6) var(--sj-s5);
}
.sj-stop.is-card .sj-stage-end.is-done { background: var(--sj-ok-wash); border-top-color: color-mix(in srgb, var(--sj-ok) 35%, var(--sj-rule)); }
@media (max-width: 760px) {
  .sj-stop.is-card > .sj-stop-foot { margin-inline: calc(-1 * var(--sj-s4)); }
  .sj-stop.is-card .sj-stage-end { padding: var(--sj-s3) var(--sj-s4) var(--sj-s4); }
}

/* ---- More information (18.4, f8): a run of details set apart from the step's own text */
.sj-more-group {
  margin: var(--sj-s3) 0 var(--sj-s4); padding: var(--sj-s2) var(--sj-s3) var(--sj-s2);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-paper);
}
.sj-step.is-open .sj-more-group, .sj-focus-body .sj-more-group { background: var(--sj-paper); }
.sj-more-group-h { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px !important; font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-muted); }
.sj-more-group-h .sj-icon { width: 16px; height: 16px; color: var(--sj-accent); }
.sj-more-group > details { margin: 0; }
.sj-more-group > details + details { margin-top: 2px; }
.sj-more-group .sj-details-body { margin-left: 6px; background: var(--sj-surface); }

/* ---- Watching a stage with no video (19.7, f14; first 18.5): a panel like Focus, the stage's
   picture large with the camera moving step by step, beside all its steps in order */
.sj-watch {
  width: min(1180px, calc(100vw - 64px)); max-width: none; height: min(780px, calc(100dvh - 64px)); max-height: none; padding: 0;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); color: var(--sj-text); background: var(--sj-surface); box-shadow: var(--sj-shadow-float);
}
.sj-watch[open] { display: block; }
.sj-watch::backdrop { background: color-mix(in srgb, var(--sj-ink) 45%, transparent); }
html.sj-watch-open { overflow: hidden; }
.sj-watch-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.sj-watch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s3); padding: var(--sj-s3) var(--sj-s5); border-bottom: 1px solid var(--sj-rule); }
.sj-watch-head-text { min-width: 0; }
.sj-watch-where { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-watch-head h2 { margin: 2px 0 0; font-size: var(--sj-h3); }
.sj-watch-head h2:focus { outline: none; }
.sj-watch-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: var(--sj-s5); min-height: 0; padding: var(--sj-s4) var(--sj-s5); background: var(--sj-paper); }
.sj-watch-panel:not(.has-visual) .sj-watch-main { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.sj-watch-panel:not(.has-visual) .sj-watch-stage { display: none; }
.sj-watch-stage { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--sj-s3); align-items: center; }
.sj-watch-visual { min-height: 0; display: flex; align-items: center; }
.sj-watch-visual .sj-visual { width: 100%; margin: 0; }
.sj-watch-visual .sj-visual-frame { --sj-frame-max: calc(100dvh - 300px); box-shadow: var(--sj-shadow); }
.sj-watch-now { margin: 0; font-family: var(--sj-font-ui); font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-watch-list { min-height: 0; overflow-y: auto; padding: var(--sj-s3) var(--sj-s3) var(--sj-s4); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow); }
.sj-watch-list > .sj-label { margin: 0 0 var(--sj-s2) var(--sj-s2); }
/* the steps in order, joined by a line, the one showing lit with its bar filling */
.sj-watch-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sj-watch-steps::before { content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; border-left: 2px solid var(--sj-track); }
.sj-watch-step { position: relative; }
.sj-watch-step > button {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--sj-s2); align-items: center; width: 100%; padding: 6px var(--sj-s2);
  border: 0; border-radius: var(--sj-ui-radius); background: none; color: var(--sj-text); text-align: left; font: inherit; font-family: var(--sj-font-ui); font-size: var(--sj-read-2); cursor: pointer;
}
.sj-watch-step > button:hover { background: var(--sj-accent-wash); }
.sj-watch-n {
  position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--sj-control); background: var(--sj-surface); color: var(--sj-muted); font-size: var(--sj-label); font-variant-numeric: tabular-nums;
}
.sj-watch-step.is-sub .sj-watch-n { transform: scale(.8); }
.sj-watch-step.is-done .sj-watch-n { border-color: var(--sj-ok); background: var(--sj-ok); color: var(--sj-surface); }
.sj-watch-min { font-size: var(--sj-label); color: var(--sj-muted); white-space: nowrap; }
.sj-watch-step.is-now > button { background: var(--sj-accent-wash); color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-watch-step.is-now .sj-watch-n { border-color: var(--sj-accent); background: var(--sj-accent); color: var(--sj-accent-ink); }
.sj-watch-bar { display: none; position: absolute; left: 42px; right: var(--sj-s2); bottom: 2px; height: 3px; border-radius: var(--sj-pill); background: var(--sj-accent); transform-origin: left; transform: scaleX(0); }
.sj-watch-step.is-now .sj-watch-bar { display: block; animation: sj-watch-fill linear forwards; }
@keyframes sj-watch-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sj-watch-step.is-now .sj-watch-bar { animation: none; transform: scaleX(1); opacity: .5; } }
.sj-watch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); padding: var(--sj-s3) var(--sj-s5); border-top: 1px solid var(--sj-rule); }
.sj-watch-foot .sj-btn { white-space: nowrap; }
.sj-watch-keys { margin: 0 0 0 auto; font-size: var(--sj-label); color: var(--sj-muted); }
@media (max-width: 760px) {
  .sj-watch { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .sj-watch-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: var(--sj-s3); gap: var(--sj-s3); }
  .sj-watch-visual .sj-visual-frame { --sj-frame-max: 40dvh; }
  .sj-watch-keys { display: none; }
  .sj-watch-foot { padding: var(--sj-s2) var(--sj-s3); }
}

/* ---- Show me around (18.6, f7): the part lit, the rest dimmed, the words beside it */
.sj-guide { position: fixed; inset: 0; z-index: 130; }
.sj-guide[hidden] { display: none; }
.sj-guide-hole {
  position: fixed; border-radius: var(--sj-ui-radius); box-shadow: 0 0 0 200vmax var(--sj-scrim); outline: 3px solid var(--sj-accent); outline-offset: 0;
  transition: left .3s var(--sj-ease), top .3s var(--sj-ease), width .3s var(--sj-ease), height .3s var(--sj-ease); pointer-events: none;
}
.sj-guide-tip {
  position: fixed; display: grid; gap: var(--sj-s2); padding: var(--sj-s4) var(--sj-s5); border-radius: var(--sj-radius-lg);
  background: var(--sj-surface); box-shadow: var(--sj-shadow-float); transition: left .3s var(--sj-ease), top .3s var(--sj-ease);
}
.sj-guide-tip h2 { margin: 0; font-size: var(--sj-h3); }
.sj-guide-tip h2:focus { outline: none; }
.sj-guide-words { margin: 0; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; }
.sj-guide-count { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); margin-top: var(--sj-s2); }
.sj-guide-actions .sj-link-btn { margin-left: auto; }
.sj-stage-end-fold > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; list-style: none; cursor: pointer; font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-class); }
.sj-stage-end-fold > summary::-webkit-details-marker { display: none; }
.sj-stage-end-fold > summary::after { content: "+"; margin-left: 4px; color: var(--sj-muted); }
.sj-stage-end-fold[open] > summary::after { content: "–"; }
.sj-stage-end-fold > .sj-notes { margin-top: var(--sj-s2); }
.sj-stage-end-notes-h { display: inline-flex; align-items: center; gap: 6px; }
/* A step's paths are its own instructions: plain ground with an edge, unlike the details' group (18.4) */
.sj-paths { background: var(--sj-surface); border-color: var(--sj-rule); box-shadow: inset 3px 0 0 var(--sj-accent); }

/* ==== What to do next (docs/spec/19-what-to-do-next.md): the side column, the trail's labels,
   forks in the road. Simon: "a lot of information is competing for attention". */

/* ---- 19.1 The side column. In the page (a narrow screen, Focus, the long page): a block at the
   end of the text it belongs to, before Done. */
.sj-side { margin: var(--sj-s4) 0 0; max-width: var(--sj-measure); }
.sj-side-in { display: grid; gap: var(--sj-s3); }
.sj-side-in > .sj-more-group { margin: 0; }
.sj-side-goal, .sj-side-why { display: none; margin: 0; font-family: var(--sj-font-ui); font-size: var(--sj-read-2); line-height: 1.45; color: var(--sj-text); }
.sj-side-goal .sj-icon, .sj-side-why .sj-icon { width: 16px; height: 16px; margin-right: 6px; color: var(--sj-accent); }
.sj-side-goal .sj-label, .sj-side-why .sj-label { display: inline; margin: 0 4px 0 0; }
.sj-side-class .sj-corner { display: flex; }
.sj-side--stage { margin: 0 0 var(--sj-s4); }
/* A stage's aside stays beside the stage's head and introduction, not down its steps: the
   open step's is the one that follows the reader. A stage with no steps is the step. */
.sj-tour.is-sided .sj-stop:has([data-sj-step]) .sj-side--stage > .sj-side-in { position: static; }

/* Beside it: on a wide screen, in the right-hand column with the conversations,
   level with its heading (placed by margin.ts). */
.sj-tour.is-sided .sj-side {
  position: absolute; z-index: 3; top: var(--sj-side-top, 0); left: var(--sj-side-left, 100%); width: var(--sj-side-w, var(--sj-rail));
  height: var(--sj-side-h, auto); margin: 0; max-width: none; pointer-events: none;
}
.sj-tour.is-sided .sj-side-in {
  position: sticky; top: calc(var(--sj-tree-h, 0px) + 16px); pointer-events: auto;
  padding: var(--sj-s3) var(--sj-s4) var(--sj-s4);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-surface);
}
.sj-tour.is-sided .sj-side--step > .sj-side-in { box-shadow: inset 3px 0 0 var(--sj-accent); }
.sj-tour.is-sided .sj-side-goal, .sj-tour.is-sided .sj-side-why { display: block; }
.sj-tour.is-sided .sj-side-in > .sj-more-group { padding: 0; border: 0; background: none; }
.sj-tour.is-sided .sj-side .sj-more-group .sj-details-body { margin-left: 0; }
/* What is beside the step isn't repeated in it. */
.sj-tour.is-sided .sj-stop-meta > .sj-pop-btn--goal,
.sj-tour.is-sided .sj-step-head .sj-pop-btn--why { display: none; }

/* ---- 19.2 The trail's labels: each stage's name in the gutter, in view while its card is */
.sj-trail-here {
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--sj-trail-gutter) / 2 + 7px); width: 1.6em; z-index: 1;
  pointer-events: none;
}
.sj-trail-here-label {
  position: sticky; top: calc(var(--sj-tree-h, 0px) + 16px); display: block; margin-top: var(--sj-s8);
  max-height: min(26rem, calc(100% - var(--sj-s8) - var(--sj-s4))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  writing-mode: vertical-rl; writing-mode: sideways-rl;
  padding: 4px 0; font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); text-decoration: none;
  pointer-events: auto; border-radius: var(--sj-pill);
}
.sj-trail-here-n { font-weight: var(--sj-weight-ui); }
.sj-trail-here-title { margin-top: 4px; color: var(--sj-text); }
.sj-stop.is-current > .sj-trail-here .sj-trail-here-label,
.sj-stop.is-current > .sj-trail-here .sj-trail-here-title { color: var(--sj-accent); }
.sj-trail-here-label:hover { color: var(--sj-accent); background: var(--sj-accent-wash); }
.sj-trail-here-label:hover .sj-trail-here-title { color: var(--sj-accent); }
/* Under the stage's marker on the line, not over it */
.sj-stop.is-card::after { z-index: 2; }
@media (max-width: 760px) { .sj-trail-here { display: none; } }

/* ---- 19.3 A fork in the road: have you done this already? */
.sj-fork {
  margin: var(--sj-s4) 0; padding: var(--sj-s3) var(--sj-s4) var(--sj-s4); max-width: var(--sj-measure);
  border: 1px solid color-mix(in srgb, var(--sj-accent) 35%, var(--sj-rule)); border-radius: var(--sj-ui-radius);
  background: var(--sj-accent-wash);
}
.sj-fork > .sj-label { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; color: var(--sj-accent); }
/* the fork of the paths' question (16.3): two ways from here */
.sj-fork > .sj-label::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--sj-i) center / contain no-repeat; mask: var(--sj-i) center / contain no-repeat;
  --sj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7M12 14 6 8M12 14l6-6M6 8V4M6 4 3.5 6.5M6 4l2.5 2.5M18 8V4M18 4l-2.5 2.5M18 4l2.5 2.5'/%3E%3C/svg%3E");
}
.sj-fork-q { margin: 0 0 var(--sj-s1); font-family: var(--sj-font-ui); font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-fork-body { font-size: var(--sj-read-2); }
.sj-fork-body > :first-child { margin-top: 0; }
.sj-fork-body > :last-child { margin-bottom: 0; }
.sj-fork-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin-top: var(--sj-s3); }
.sj-fork-actions:empty { display: none; }
.sj-fork-note { flex-basis: 100%; margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-fork-said { margin: 0; font-family: var(--sj-font-ui); font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-fork-tick { color: var(--sj-accent); font-weight: var(--sj-weight-ui); }
/* Answered: it folds to its question and the answer */
.sj-fork.is-answered { padding-bottom: var(--sj-s3); background: var(--sj-surface); }
.sj-fork.is-answered > .sj-fork-body > :not(.sj-fork-yes):not(.sj-fork-no) { display: none; }
/* What it says after the answer (:::yes, :::no): hidden until then */
.sj-fork-yes, .sj-fork-no { display: none; }
.sj-fork.is-yes .sj-fork-yes,
.sj-fork.is-answered:not(.is-yes) .sj-fork-no { display: block; margin-top: var(--sj-s1); }
.sj-fork-yes > :first-child, .sj-fork-no > :first-child { margin-top: 0; }
.sj-fork-yes > :last-child, .sj-fork-no > :last-child { margin-bottom: 0; }
.sj-fork.is-answered .sj-fork-actions { margin-top: var(--sj-s1); }
.sj-fork.is-yes { border-color: color-mix(in srgb, var(--sj-ok) 40%, var(--sj-rule)); }
.sj-fork.is-yes .sj-fork-tick, .sj-fork.is-yes > .sj-label { color: var(--sj-ok); }
.sj-fork.is-busy { opacity: .7; }

/* ---- More compact social parts (Simon's note f12): the stage's end strip and the notes */
.sj-stop.is-card .sj-stage-end {
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--sj-s3) var(--sj-s4); align-items: center;
  padding: var(--sj-s3) var(--sj-s6) var(--sj-s4);
}
.sj-stop.is-card .sj-stage-end > :not(.sj-stage-end-status):not(.sj-stage-end-next) { grid-column: 1 / -1; }
.sj-stop.is-card .sj-stage-end-next { justify-self: end; }
.sj-stop.is-card .sj-stage-end-react { padding-top: var(--sj-s3); gap: 6px var(--sj-s2); }
.sj-stop.is-card .sj-stage-end-q { flex-basis: auto; margin-right: var(--sj-s1); }
.sj-stop.is-card .sj-stage-end-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sj-s4); padding-top: var(--sj-s2); border-top: 0; }
.sj-stop.is-card .sj-stage-end-fold[open] { flex-basis: 100%; }
@media (max-width: 760px) {
  .sj-stop.is-card .sj-stage-end { grid-template-columns: minmax(0, 1fr); padding: var(--sj-s3) var(--sj-s4) var(--sj-s4); }
  .sj-stop.is-card .sj-stage-end-next { justify-self: start; }
}
.sj-note { padding: 6px var(--sj-s3) var(--sj-s2); }
.sj-note-by { gap: 2px var(--sj-s2); }
.sj-note-where { margin: 0; }
.sj-note-where::before { content: "· "; }
.sj-note-by > .sj-note-helped { margin: 0 0 0 auto; min-height: 26px; padding: 0 10px; }
.sj-note-by > .sj-note-helped-n { margin: 0 0 0 auto; }
.sj-note-text { margin-top: 2px; line-height: 1.45; }
.sj-note .sj-replies { margin: 4px 0 0; }
.sj-note .sj-reply { padding-left: var(--sj-s2); }
.sj-note .sj-reply-by, .sj-note .sj-reply-text { display: inline; margin: 0; font-size: var(--sj-label); }
.sj-note .sj-reply-by { font-weight: var(--sj-weight-ui); }
.sj-note .sj-reply-by::after { content: ": "; }

/* ---- The trailhead's aside (Simon's note f11): what you'll get, why it matters, its details and
   facts, in the right-hand part of the trailhead on a wide screen, open rather than behind buttons */
.sj-tour.is-sided .sj-trailhead {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--sj-margin-w); column-gap: var(--sj-s7); align-items: start;
}
.sj-tour.is-sided .sj-trailhead > * { grid-column: 1; }
.sj-tour.is-sided .sj-trailhead > .sj-side--trail {
  grid-column: 2; grid-row: 1 / span 20; position: static; width: auto; height: auto; margin: 0; pointer-events: auto;
}
.sj-tour.is-sided .sj-side--trail > .sj-side-in { position: static; gap: var(--sj-s4); box-shadow: none; }
.sj-tour.is-sided .sj-side--trail .sj-pop {
  display: block; position: static; inset: auto; width: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: inherit;
}
.sj-tour.is-sided .sj-side--trail .sj-pop + .sj-pop { padding-top: var(--sj-s4); border-top: 1px solid var(--sj-rule); }
.sj-tour.is-sided .sj-side--trail .sj-pop-title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sj-s2); font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-tour.is-sided .sj-side--trail .sj-facts { margin: 0; }
.sj-tour.is-sided .sj-orient-pops > .sj-pop-btn--get,
.sj-tour.is-sided .sj-orient-pops > .sj-pop-btn--why { display: none; }
.sj-side--trail .sj-facts { margin: 0; }

/* ---- The trail's Next: on the line, at the foot of the screen (Simon) */
.sj-tour { position: relative; }
.sj-trail-next-rail {
  position: absolute; left: calc(var(--sj-trail-gutter) / 2 - 22px); bottom: 0; width: 44px; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none;
}
.sj-trail-next-rail[hidden] { display: none; }
.sj-trail-next {
  position: sticky; bottom: var(--sj-s5); pointer-events: auto;
  display: grid; justify-items: center; gap: 2px; width: 44px; padding: 8px 0 6px;
  border: 0; border-radius: var(--sj-pill); background: var(--sj-accent); color: var(--sj-accent-ink);
  box-shadow: 0 0 0 4px var(--sj-paper), var(--sj-shadow); cursor: pointer;
  font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); line-height: 1;
  transition: background var(--sj-dur), transform var(--sj-dur);
}
.sj-trail-next:hover { background: var(--sj-accent-deep); }
.sj-trail-next:active { transform: translateY(1px); }
.sj-trail-next-arrow { font-size: 1.15rem; line-height: 1; }
/* What it goes to: beside it on hover or focus */
.sj-trail-next-label {
  position: absolute; left: calc(100% + 10px); bottom: 6px; width: max-content; max-width: 22rem;
  padding: 6px 12px; border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius); background: var(--sj-surface); color: var(--sj-ink);
  box-shadow: var(--sj-shadow); font-weight: 400; line-height: 1.3; text-align: left; white-space: normal;
  opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity var(--sj-dur), transform var(--sj-dur);
}
.sj-trail-next:hover .sj-trail-next-label, .sj-trail-next:focus-visible .sj-trail-next-label { opacity: 1; transform: none; }
@media (max-width: 760px) { .sj-trail-next-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .sj-trail-next, .sj-trail-next-label { transition: none; } }
/* The labels fit their space: a stage's stops short of the Next button at the foot of the screen */
.sj-trail-here-label { max-height: min(26rem, calc(100% - var(--sj-s8) - var(--sj-s4)), calc(100vh - var(--sj-tree-h, 0px) - 150px)); }
.sj-trail-link-text { max-height: calc(100% - 24px); }
/* The labels sit close to the line, clear of the card (Simon's note f17: "the top of the next is too
   close to the card, and slightly too far from the line"): a line box as wide as the letters, a few
   pixels right of the line, about fourteen clear of the card. */
.sj-trail-here { left: calc(-1 * var(--sj-trail-gutter) / 2 + 4px); width: 1.2em; }
.sj-trail-here-label { line-height: 1; padding: 4px 0; }
.sj-trail-link-text { left: calc(-1 * var(--sj-trail-gutter) / 2 + 5px); line-height: 1; }

/* ==== The first tranche's features (docs/spec/20-first-tranche.md) */

/* ---- 20.2 Who does it: a small badge after the statement, outside the heading. A plain capsule
   tinted in its colour, no dot inside (Simon's note f19: "Fix the dot/capsule"). */
.sj-who {
  display: inline-flex; align-items: center; flex: none; min-height: 20px; padding: 0 8px;
  border-radius: var(--sj-pill); background: var(--sj-wash);
  font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); line-height: 1.3; white-space: nowrap; color: var(--sj-text);
}
.sj-who--one { color: var(--sj-accent-deep); background: var(--sj-accent-wash); }
.sj-who--each { color: var(--sj-warn); background: var(--sj-warn-wash); }
.sj-who--together { color: var(--sj-class); background: var(--sj-class-wash); }
.sj-step-head > .sj-who { margin-left: var(--sj-s2); }
/* In a folded row it stays: who does it is part of what the row says */
html.sj-walk .sj-step.is-folded > .sj-step-head > .sj-who { display: inline-flex; }
/* In the trail's list, a column of its own before the time, on the stage's row (it had fallen into
   the marker's column of a second row, f19) */
.sj-orient-do li:has(> .sj-who) { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.sj-orient-do li > .sj-who { grid-column: 3; grid-row: 1; align-self: center; margin: 0; }
.sj-orient-do li:has(> .sj-who) > .sj-estimate { grid-column: 4; }
.sj-watch-t > .sj-who { margin-left: var(--sj-s2); font-weight: 400; }
.sj-focus-meta .sj-who { vertical-align: 1px; }
.sj-who-note { flex-basis: 100%; margin: 0; font-size: var(--sj-label); color: var(--sj-muted); }

/* ---- 20.3 A picture for each computer: the switch under it; links to the others without scripts */
.sj-visual-computers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sj-s2) 0 0; }
.sj-visual-computers-q { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-visual-computers .sj-chip[aria-pressed="true"] { border-color: var(--sj-accent); background: var(--sj-accent-wash); color: var(--sj-ink); font-weight: var(--sj-weight-ui); }
.sj-visual-others { margin: var(--sj-s1) 0 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-visual.has-computers > .sj-visual-others { display: none; }

/* ---- 20.4 A sketch says so: a badge on the picture's corner, "(a sketch)" in its caption */
.sj-visual, .sj-figure { position: relative; }
.sj-sketch {
  position: absolute; top: var(--sj-s2); left: var(--sj-s2); z-index: 3;
  padding: 2px 10px; border: 1px dashed var(--sj-warn); border-radius: var(--sj-pill); background: var(--sj-surface);
  font-family: var(--sj-font-ui); font-size: var(--sj-label); font-weight: var(--sj-weight-ui); color: var(--sj-warn); cursor: help;
}
.sj-sketch[hidden], .sj-sketch-note[hidden] { display: none; }
.sj-sketch-note { color: var(--sj-warn); }

/* ---- 20.5 A long wait: how long, what to do meanwhile, a quiet count */
.sj-while {
  margin: var(--sj-s3) 0; padding: var(--sj-s3) var(--sj-s4); max-width: var(--sj-measure);
  border: 1px solid var(--sj-rule); border-left: 3px solid var(--sj-track); border-radius: var(--sj-ui-radius); background: var(--sj-paper);
}
.sj-while > .sj-label { margin: 0 0 var(--sj-s1); font-weight: var(--sj-weight-ui); color: var(--sj-ink); }
.sj-while-body > :first-child { margin-top: 0; }
.sj-while-body > :last-child { margin-bottom: 0; }
.sj-while-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); margin-top: var(--sj-s3); }
.sj-while-count { font-family: var(--sj-font-ui); font-size: var(--sj-read-2); font-variant-numeric: tabular-nums; color: var(--sj-text); }
.sj-while-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sj-accent); animation: sj-pulse 1.6s ease-in-out infinite; }
.sj-while.is-running { border-left-color: var(--sj-accent); }
.sj-while.is-over .sj-while-dot { background: var(--sj-ok); animation: none; }
@media (prefers-reduced-motion: reduce) { .sj-while-dot { animation: none; } }
@keyframes sj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* An aside with nothing to show yet isn't drawn (19.1): a corner with no chips (no one has done the
   step, notes are off) and nothing else. It appears when something arrives. */
.sj-side-class:not(:has(.sj-corner-chip:not([hidden]))) { display: none; }
.sj-side:not(:has(.sj-side-goal, .sj-side-why, .sj-more-group, .sj-side-class .sj-corner-chip:not([hidden]))) { display: none; }

/* ---- profile.css */
/* Make it yours (docs/spec/12-review-and-profiles.md, 12.3): composing a
   name and choosing a picture, with everything previewed as it changes. */

button.sj-walker-chip { background: var(--sj-surface); font: inherit; font-size: var(--sj-label); cursor: pointer; border-radius: var(--sj-ui-radius, 8px); }
button.sj-walker-chip:hover { border-color: var(--sj-ink); }

.sj-prof { display: grid; gap: var(--sj-s5); }
.sj-prof-preview {
  display: flex; align-items: center; gap: var(--sj-s5); padding: var(--sj-s4) var(--sj-s5);
  border-radius: calc(var(--sj-ui-radius, 8px) * 1.5); background: var(--sj-accent-wash); border: 1px solid var(--sj-rule);
}
.sj-prof-preview p { margin: 0; }
.sj-prof-avatar {
  flex: none; width: 120px; height: 120px; border-radius: 22%; background: var(--sj-surface);
  box-shadow: 0 0 0 4px var(--sj-paper), var(--sj-shadow); transition: transform .2s;
}
.sj-prof-name { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.15; color: var(--sj-ink); font-weight: var(--sj-weight-ui, 600); }
.sj-prof-note { margin-top: var(--sj-s2) !important; font-size: var(--sj-label); max-width: 36rem; }
.sj-prof-section { display: grid; gap: var(--sj-s3); }
.sj-prof-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s3); }
.sj-prof-section-head h3 { margin: 0; font-size: var(--sj-h3); }

/* The four shapes of a name, each previewed with the student's own animal */
.sj-prof-patterns { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sj-s2); }
.sj-prof-pattern {
  display: grid; gap: 2px; padding: var(--sj-s3); text-align: left; cursor: pointer;
  border: 1.5px solid var(--sj-rule); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-surface); color: var(--sj-ink); font: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.sj-prof-pattern:hover { border-color: var(--sj-ink); transform: translateY(-1px); }
.sj-prof-pattern.is-on { border-color: var(--sj-accent); background: var(--sj-accent-wash); box-shadow: 0 0 0 2px var(--sj-accent-wash); }
.sj-prof-pattern-name { font-size: 1.02rem; font-weight: var(--sj-weight-ui, 600); }
.sj-prof-pattern-label { font-size: var(--sj-label); color: var(--sj-muted); }

/* Each slot: a list to scroll, with its own shuffle */
.sj-prof-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sj-s3); }
.sj-prof-slot { display: grid; gap: 4px; min-width: 0; }
.sj-prof-slot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sj-s2); }
.sj-prof-slot-head .sj-label { margin: 0; }
.sj-prof-list {
  position: relative;
  display: grid; gap: 2px; max-height: 12.5rem; overflow-y: auto; padding: 4px; scroll-snap-type: y proximity;
  border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-wash); overscroll-behavior: contain;
}
.sj-prof-list:focus-visible { outline: 2px solid var(--sj-accent); outline-offset: 2px; }
.sj-prof-option {
  scroll-snap-align: center; padding: 6px 10px; border: 0; border-radius: calc(var(--sj-ui-radius, 8px) - 2px);
  background: transparent; color: var(--sj-text); font: inherit; font-size: var(--sj-read-2); text-align: left; cursor: pointer;
}
.sj-prof-option:hover { background: var(--sj-wash); }
.sj-prof-option.is-on { background: var(--sj-accent); color: var(--sj-accent-ink); font-weight: var(--sj-weight-ui, 600); }

/* The picture: five styles, previewed live; the palette; a new pattern */
.sj-prof-styles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sj-s2); }
.sj-prof-style {
  display: grid; justify-items: center; gap: 6px; padding: var(--sj-s3) var(--sj-s2); cursor: pointer;
  border: 1.5px solid var(--sj-rule); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-surface); color: var(--sj-ink); font: inherit; font-size: var(--sj-label);
  transition: border-color .15s, transform .15s;
}
.sj-prof-style img { width: 64px; height: 64px; border-radius: 20%; }
.sj-prof-style:hover { border-color: var(--sj-ink); transform: translateY(-1px); }
.sj-prof-style.is-on { border-color: var(--sj-accent); background: var(--sj-accent-wash); font-weight: var(--sj-weight-ui, 600); }
.sj-prof-swatches { display: flex; flex-wrap: wrap; gap: var(--sj-s2); }
.sj-prof-swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--sj-paper); background: var(--sj-swatch);
  box-shadow: 0 0 0 1.5px var(--sj-rule); cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.sj-prof-swatch:hover { transform: scale(1.08); }
.sj-prof-swatch.is-on { box-shadow: 0 0 0 3px var(--sj-ink); transform: scale(1.08); }
.sj-prof-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); padding-top: var(--sj-s3); border-top: 1px solid var(--sj-rule); }
.sj-prof-status { flex-basis: 100%; margin: 0; }
.sj-prof-suggest[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sj-prof-pattern, .sj-prof-style, .sj-prof-swatch, .sj-prof-avatar { transition: none; } }

/* As a dialog; a sheet on a phone */
.sj-prof-dialog { width: min(58rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--sj-ink); border-radius: calc(var(--sj-ui-radius, 8px) * 1.5); color: var(--sj-text); }
.sj-prof-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.sj-prof-dialog::backdrop { background: var(--sj-scrim); }
.sj-prof-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sj-s3) var(--sj-s5); border-bottom: 1px solid var(--sj-rule); }
.sj-prof-dialog-head h2 { margin: 0; font-size: var(--sj-h2); }
.sj-prof-dialog-body { overflow-y: auto; padding: var(--sj-s5); }
.sj-join-panel.is-wide { max-width: 58rem; }
.sj-join-step { margin: 0 0 var(--sj-s4); font-size: var(--sj-h2); }
@media (max-width: 640px) {
  .sj-prof-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sj-prof-dialog-body { padding: var(--sj-s4); }
  .sj-prof-preview { gap: var(--sj-s3); padding: var(--sj-s3); }
  .sj-prof-avatar { width: 84px; height: 84px; }
  .sj-prof-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .sj-prof-style { padding: 6px 2px; font-size: var(--sj-label); }
  .sj-prof-style img { width: 48px; height: 48px; }
  .sj-prof-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sj-prof-list { max-height: 10rem; }
}

/* ---- review.css */
/* Review marks (docs/spec/12-review-and-profiles.md, 12.2), in the
   workbench's look: each mark's colour on its buttons, chips and passages. */

html:not(.sj-reviewing) .sj-mk-only, html:not(.sj-reviewing) .sj-mk-vis { display: none !important; }
.sj-review-switch[aria-checked="true"] { border-color: var(--sj-review); color: var(--sj-review); }

.mk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mk, var(--sj-muted)); flex-shrink: 0; }
.mk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: var(--mk-tint, var(--sj-wash)); color: var(--mk, var(--sj-muted)); font-size: var(--sj-label); white-space: nowrap; font-weight: var(--sj-weight-ui, 600); }
.mk-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px;
  border: 1.5px solid var(--mk, var(--sj-muted)); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-paper); color: var(--mk, var(--sj-muted));
  font: inherit; font-size: var(--sj-label); font-weight: var(--sj-weight-ui, 600); cursor: pointer;
}
.mk-button:hover, .mk-button.on { background: var(--mk-tint); }
.mk-button.small { min-height: 26px; padding: 0 8px; font-size: var(--sj-label); }
.mk-button:disabled { opacity: .4; cursor: default; }
.mk-button kbd { padding: 0 4px; border: 1px solid currentColor; border-bottom-width: 1.5px; border-radius: 4px; font-size: var(--sj-label); line-height: 1.3; background: transparent; opacity: .8; }

/* Passages */
.sj-mk { border-radius: 2px; cursor: pointer; }
.sj-mk.is-done { opacity: .55; }

/* The toolbar on a selection */
.sj-mk-toolbar {
  position: absolute; z-index: 60; display: flex; flex-wrap: wrap; gap: 4px; max-width: min(40rem, calc(100vw - 16px)); padding: 6px;
  border: 1px solid var(--sj-rule); border-radius: calc(var(--sj-ui-radius, 8px) + 2px); background: var(--sj-paper); box-shadow: var(--sj-shadow-float);
}
.sj-mk-toolbar[hidden] { display: none; }

/* On headings and pictures */
.sj-mk-add {
  margin-left: var(--sj-s2); padding: 1px 8px; border: 1px dashed var(--sj-track); border-radius: 999px; background: transparent;
  color: var(--sj-muted); font: inherit; font-size: var(--sj-label); cursor: pointer; vertical-align: middle; opacity: .7;
}
.sj-mk-add:hover, .sj-mk-add:focus-visible { opacity: 1; border-color: var(--sj-review); color: var(--sj-review); }
.sj-stop-head h2 + .sj-mk-add { margin-left: 0; }
.sj-mk-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: var(--sj-s2); padding: 1px 8px; border: 0; border-radius: 999px;
  background: var(--mk-tint); color: var(--mk); font: inherit; font-size: var(--sj-label); font-weight: var(--sj-weight-ui, 600); cursor: pointer; vertical-align: middle;
}
.sj-mk-badge.is-done { opacity: .55; }
.sj-mk-box { position: absolute; z-index: 1; padding: 0; border: 2.5px dashed var(--mk); border-radius: 3px; background: var(--mk-tint); cursor: pointer; }
.sj-mk-box.is-done { opacity: .5; }
.sj-mk-visual .sj-visual-frame { outline: 3px dashed var(--sj-review); outline-offset: 3px; }
.sj-mk-drag { position: absolute; inset: 0; z-index: 8; cursor: crosshair; background: color-mix(in srgb, var(--sj-review) 6%, transparent); touch-action: none; outline: none; }
.sj-mk-drag-hint { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 6px; background: var(--sj-review); color: var(--sj-surface); font-size: var(--sj-label); }
.sj-mk-drag-box { position: absolute; display: none; border: 2px dashed var(--sj-review); background: color-mix(in srgb, var(--sj-review) 12%, transparent); }

/* Callouts in the margin */
.sj-mk-callout { border: 1px solid var(--sj-rule); border-left: 4px solid var(--mk); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-paper); font-size: var(--sj-label); }
.sj-mk-callout.is-done { opacity: .7; }
.sj-mk-callout > summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px; list-style: none; cursor: pointer; }
.sj-mk-callout > summary::-webkit-details-marker { display: none; }
.sj-mk-callout[open] > summary { border-bottom: 1px solid var(--sj-rule); }
.sj-mk-kind { flex: none; color: var(--mk); font-weight: var(--sj-weight-ui, 600); }
.sj-mk-snip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sj-muted); }
.sj-mk-done { margin-left: auto; font-size: var(--sj-label); color: var(--sj-ok); }
.sj-mk-body { padding: 8px 10px 10px; }
.sj-mk-body > * { margin: 0 0 6px; }
.sj-mk-quote { padding-left: 8px; border-left: 2px solid var(--mk); font-family: var(--sj-font-reading); color: var(--sj-muted); }
.sj-mk-where { color: var(--sj-muted); }
.sj-mk-note, .sj-mk-suggestion, .sj-mk-response { font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-text); }
.sj-mk-suggestion .sj-label, .sj-mk-response .sj-label { display: block; margin: 0; font-family: var(--sj-font-ui); }
.sj-mk-detached { color: var(--sj-warn); }
.sj-mk-meta { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-mk-ported summary { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-mk-ported ul { margin: 4px 0 0; padding-left: 1rem; font-size: var(--sj-label); }
.sj-mk-before { color: var(--sj-muted); }
.sj-mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sj-mk-confirm[hidden] { display: none; }
.sj-danger, .sj-danger-outline { color: var(--sj-fail) !important; }
.sj-danger-outline { border-color: var(--sj-fail) !important; }
.sj-conv-marker.has-marks { border-color: var(--sj-review); color: var(--sj-review); }

/* The dialog for a mark, and the list */
.mk-modal { width: min(42rem, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid var(--sj-rule); border-radius: 10px; background: var(--sj-paper); color: var(--sj-text); box-shadow: var(--sj-shadow-float); }
.mk-modal::backdrop { background: var(--sj-scrim); }
.mk-modal form { display: flex; flex-direction: column; gap: 10px; }
.mk-modal h3 { margin: 0; font-size: 1rem; }
.mk-quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--sj-rule); font-family: var(--sj-font-reading); font-size: var(--sj-read-2); max-height: 9em; overflow: auto; white-space: pre-wrap; }
.mk-field { display: flex; flex-direction: column; gap: 3px; font-size: var(--sj-label); color: var(--sj-muted); }
.mk-field[hidden] { display: none; }
.mk-field textarea { color: var(--sj-text); font-size: var(--sj-read-2); }
.mk-muted { margin: 0; color: var(--sj-muted); font-size: var(--sj-label); }
.mk-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sj-mk-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.sj-mk-list-dialog[open] { display: flex; flex-direction: column; gap: 10px; max-height: min(80vh, 44rem); }
.sj-mk-list-head { display: flex; align-items: center; justify-content: space-between; }
.sj-mk-list-head h3 { margin: 0; }
.sj-mk-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.sj-mk-list-body { overflow-y: auto; }
.sj-mk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sj-mk-list li.is-done { opacity: .6; }
.sj-mk-list-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid var(--sj-rule); border-left: 4px solid var(--mk); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-paper); color: var(--sj-text); font: inherit; font-size: var(--sj-label); cursor: pointer;
}
.sj-mk-list-row:hover { background: var(--mk-tint); }
.sj-mk-list-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sj-font-reading); }
.sj-mk-list-note { grid-column: 2; color: var(--sj-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-mk-list-meta { grid-column: 3; grid-row: 1; color: var(--sj-muted); font-size: var(--sj-label); }
.sj-mk-flash { position: fixed; left: 50%; bottom: 20px; z-index: 200; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: var(--sj-fail); color: var(--sj-surface); font-size: var(--sj-label); }
@media (max-width: 640px) {
  .mk-modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .sj-mk-toolbar { left: 8px !important; right: 8px; max-width: none; }
}

/* ---- revisions.css */
/* Revisions (docs/spec/13-revisions.md): a comment's passage changed since it
   was made; Revised on steps edited since a student was last here; What changed. */
.sj-revised { margin: 0 0 var(--sj-s2); padding: 6px 10px; border-radius: var(--sj-radius); background: var(--sj-warn-wash); font-size: var(--sj-label); color: var(--sj-text); }
.sj-revised p { margin: 0; }
.sj-revised-head { color: var(--sj-ink); }
.sj-revised--moved { background: var(--sj-wash); }
.sj-revised--detached { background: var(--sj-fail-wash); }
.sj-revised--answered, .sj-revised-answered { color: var(--sj-ok); }
.sj-revised--answered { background: var(--sj-ok-wash); }
.sj-revised-diff { margin-top: 4px; }
.sj-revised-diff > summary { color: var(--sj-muted); }
.sj-revised-diff p { margin: 4px 0 0; font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; }
.sj-revised-diff .sj-label { display: inline; margin: 0; font-family: var(--sj-font-ui); }
.sj-revised-diff del { background: var(--sj-fail-wash); color: var(--sj-fail); text-decoration-thickness: 1px; }
.sj-revised-diff ins { background: var(--sj-ok-wash); color: var(--sj-ok); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Revised, beside a step's or stage's title, for a student who saw an earlier release */
.sj-revised-tag {
  display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--sj-warn); border-radius: 999px;
  font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.6; color: var(--sj-warn); vertical-align: middle; white-space: nowrap;
}
.sj-step.is-revised.is-done > .sj-step-head .sj-step-mark { background: var(--sj-surface); border-color: var(--sj-ok); border-width: 2px; }
.sj-step.is-revised.is-done > .sj-step-head .sj-step-mark::after { border-color: var(--sj-ok); }

/* What changed: a button in the tree bar, a dialog of releases */
.sj-changes-btn { position: relative; }
.sj-changes-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sj-warn); }
.sj-changes { width: min(36rem, calc(100vw - 24px)); max-height: min(84vh, 46rem); padding: 0; border: 1px solid var(--sj-rule); border-radius: 10px; background: var(--sj-surface); color: var(--sj-text); }
.sj-changes::backdrop { background: var(--sj-scrim); }
.sj-changes-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--sj-s3) var(--sj-s5); border-bottom: 1px solid var(--sj-rule); background: var(--sj-surface); }
.sj-changes-head h2 { margin: 0; font-size: var(--sj-h3); }
.sj-changes-release { padding: var(--sj-s4) var(--sj-s5); border-bottom: 1px solid var(--sj-rule); }
.sj-changes-release h3 { margin: 0 0 var(--sj-s2); font-size: var(--sj-statement-sub); }
.sj-changes-release.is-seen { opacity: .7; }
.sj-changes-release.is-draft h3 { color: var(--sj-warn); }
.sj-changes-note { margin: 0 0 var(--sj-s3); font-family: var(--sj-font-reading); font-size: var(--sj-read); }
.sj-changes-group { margin: 0 0 var(--sj-s3); }
.sj-changes-group .sj-label { margin: 0 0 2px; }
.sj-changes-group ul { margin: 0; padding-left: 1.1rem; font-size: var(--sj-read-2); }
.sj-changes-first { margin: 0; padding: var(--sj-s3) var(--sj-s5); font-size: var(--sj-label); }
.sj-revised-archive { white-space: nowrap; color: var(--sj-ink); }
.sj-changes-addressed { margin: 0 0 var(--sj-s3); font-size: var(--sj-label); color: var(--sj-ok); }

/* ---- pages.css */
/* The student pages besides the tour: the course page, join, the trail,
   and the class's view of a tour. */

/* The course page: the server's tour cards, and what the runtime adds */
.sj-course-head { max-width: 52rem; margin-bottom: var(--sj-s6); }
.sj-course-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.sj-group { margin-bottom: var(--sj-s7); }
.sj-group > h2 { display: flex; align-items: center; gap: var(--sj-s3); margin: 0 0 var(--sj-s4); font-size: var(--sj-h3); }
.sj-group > h2::after { content: ""; flex: 1; height: 1px; background: var(--sj-rule); }
.sj-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sj-s4); counter-reset: sj-card; }
.sj-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sj-s2); padding: var(--sj-s4) var(--sj-s5) var(--sj-s5);
  border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface);
  transition: border-color var(--sj-dur), box-shadow var(--sj-dur), transform var(--sj-dur) var(--sj-ease);
}
.sj-card:hover { border-color: var(--sj-track); box-shadow: var(--sj-shadow-raised); transform: translateY(-2px); }
.sj-card:focus-within { border-color: var(--sj-accent); }
.sj-card > .sj-kicker { margin: 0; }
.sj-card h2, .sj-card h3 { margin: 0; font-size: var(--sj-h3); line-height: 1.3; }
.sj-card h2 a, .sj-card h3 a { text-decoration: none; }
/* The whole card is the tour's link */
.sj-card h2 a::after, .sj-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sj-card .sj-btn, .sj-card .sj-card-revised { position: relative; z-index: 1; }
.sj-card p { margin: 0; }
.sj-card .sj-summary {
  font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; color: var(--sj-text);
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.sj-card-meta { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-card-progress { margin-top: auto; padding-top: var(--sj-s3); display: grid; gap: 6px; font-size: var(--sj-label); }
.sj-card-progress .sj-btn { justify-self: start; margin-top: var(--sj-s1); }
.sj-card.is-started { border-color: color-mix(in srgb, var(--sj-accent) 35%, var(--sj-rule)); }
.sj-card.is-finished .sj-card-progress p { color: var(--sj-ok); }
.sj-course-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sj-s4); margin: var(--sj-s5) 0 var(--sj-s7); }
.sj-continue-box, .sj-replies-box { padding: var(--sj-s4) var(--sj-s5); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); }
.sj-continue-box { border-color: var(--sj-accent); box-shadow: var(--sj-shadow-raised), inset 3px 0 0 var(--sj-accent); }
.sj-continue-box p { margin: 0 0 var(--sj-s1); }
.sj-continue-box a { font-size: var(--sj-statement-sub); font-weight: var(--sj-weight-ui); color: var(--sj-accent); text-decoration: none; }
.sj-continue-box a::after { content: " →"; }
.sj-continue-box a:hover { text-decoration: underline; }
.sj-project { margin-bottom: var(--sj-s7); }

/* Join */
.sj-join-panel { max-width: 34rem; margin-top: var(--sj-s6); padding: var(--sj-s5) var(--sj-s6); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: var(--sj-shadow-raised); }
.sj-join-form input { max-width: 20rem; font-family: var(--sj-font-mono); }
.sj-join-walker { display: flex; align-items: center; gap: var(--sj-s4); margin: var(--sj-s3) 0; }
.sj-join-walker .sj-avatar { width: 96px; height: 96px; border-radius: 28%; }
.sj-join-name { margin: 0; font-size: var(--sj-h2); color: var(--sj-ink); }
.sj-return-link { display: block; margin-top: var(--sj-s2); padding: var(--sj-s2) var(--sj-s3); border-radius: var(--sj-radius); background: var(--sj-wash); overflow-wrap: anywhere; }

/* The trail */
.sj-trail-walker { display: flex; align-items: center; gap: var(--sj-s4); margin: var(--sj-s5) 0; padding: var(--sj-s4) var(--sj-s5); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); max-width: var(--sj-measure); }
.sj-trail-walker p { margin: 0; }
.sj-trail-walker .sj-callout { margin-top: var(--sj-s2); background: var(--sj-surface); }
.sj-trail-name { font-size: var(--sj-h3); color: var(--sj-ink); }
.sj-trail-tour { max-width: var(--sj-measure); padding-bottom: var(--sj-s5); border-bottom: 1px solid var(--sj-rule); }
.sj-trail-tour h2 a { text-decoration: none; }
.sj-trail-list { margin: 0; padding-left: 1.2rem; font-family: var(--sj-font-reading); }
.sj-trail-list li + li { margin-top: var(--sj-s2); }
.sj-trail-checks { list-style: "✓  "; }
.sj-trail-answers { margin: 0; }
.sj-trail-answers dt { font-size: var(--sj-label); color: var(--sj-muted); margin-top: var(--sj-s2); }
.sj-trail-answers dd { margin: 0; font-family: var(--sj-font-reading); }
.sj-trail-forget { margin-top: var(--sj-s7); }

/* The class on a tour */
.sj-overview-section { max-width: calc(var(--sj-measure) + 12rem); }
.sj-funnel-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s2); font-size: var(--sj-label); }
.sj-funnel-rows li { display: grid; grid-template-columns: minmax(10rem, 2fr) 3fr 2.5rem 2.5rem; gap: var(--sj-s3); align-items: center; }
.sj-funnel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.sj-funnel-track { position: relative; height: 14px; overflow: hidden; background: var(--sj-wash); border: 1px solid var(--sj-rule); border-radius: var(--sj-pill); }
.sj-funnel-reached { position: absolute; inset: 0 auto 0 0; background: var(--sj-class-wash); border-radius: var(--sj-pill); }
.sj-funnel-done { position: absolute; inset: 0 auto 0 0; background: var(--sj-class); border-radius: var(--sj-pill); }
.sj-legend { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-key { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.sj-key { border-radius: 3px; }
.sj-key--reached { background: var(--sj-class-wash); box-shadow: inset 0 0 0 1px var(--sj-class); }
.sj-key--done { background: var(--sj-class); margin-left: var(--sj-s3); }
.sj-overview-stop h3, .sj-overview-prompt h3 { font-size: 1rem; }
@media (max-width: 640px) {
  .sj-funnel-rows li { grid-template-columns: 1fr 2.5rem 2.5rem; }
  .sj-funnel-rows .sj-funnel-label { grid-column: 1 / -1; }
}
.sj-join-form .sj-label { display: block; margin-bottom: var(--sj-s1); }

/* The glossary page: a readable reference, filtered by name */
main.sj-glossary { width: min(100% - 32px, 46rem); margin: var(--sj-s6) auto var(--sj-s8); }
.sj-glossary-bar {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sj-s2) var(--sj-s3);
  margin: var(--sj-s5) 0 var(--sj-s4); padding: var(--sj-s3) 0; background: var(--sj-paper); border-bottom: 1px solid var(--sj-rule);
}
.sj-glossary-bar .sj-label { margin: 0; color: var(--sj-ink); }
.sj-glossary-input { min-height: 40px; font-size: var(--sj-read-2); }
.sj-glossary-count { margin: 0; font-size: var(--sj-label); color: var(--sj-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sj-glossary-none { margin: var(--sj-s4) 0; font-size: var(--sj-read-2); color: var(--sj-muted); }
.sj-glossary-none[hidden] { display: none; }
.sj-glossary-list { margin: 0; padding: 0; list-style: none; }
.sj-glossary-entry {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sj-s5); padding: var(--sj-s5) var(--sj-s3) var(--sj-s5); margin: 0 calc(-1 * var(--sj-s3));
  border-bottom: 1px solid var(--sj-rule); border-radius: var(--sj-radius); scroll-margin-top: 80px;
}
.sj-glossary-entry[hidden] { display: none; }
.sj-glossary-entry.is-flash { animation: sj-gloss-flash 1.6s ease-out; }
@keyframes sj-gloss-flash { from { background: var(--sj-accent-wash); } to { background: transparent; } }
.sj-glossary-entry:target h2 { color: var(--sj-accent); }
.sj-glossary-entry h2 { margin: 0 0 var(--sj-s2); font-size: var(--sj-statement); line-height: 1.3; }
.sj-glossary-entry p { margin: 0 0 var(--sj-s3); }
.sj-glossary-entry > :last-child { margin-bottom: 0; }
.sj-glossary-text { font-family: var(--sj-font-reading); font-size: var(--sj-read); line-height: 1.55; color: var(--sj-text); }
.sj-glossary-example, .sj-glossary-confusion { font-family: var(--sj-font-reading); font-size: var(--sj-read-2); line-height: 1.5; padding-left: var(--sj-s3); border-left: 2px solid var(--sj-rule); }
.sj-glossary-confusion { border-left-color: var(--sj-warn); }
.sj-glossary-example .sj-label, .sj-glossary-confusion .sj-label, .sj-glossary-see .sj-label, .sj-glossary-tours .sj-label {
  display: block; margin: 0 0 2px; font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted);
}
.sj-glossary-see, .sj-glossary-tours { font-size: var(--sj-read-2); }
.sj-glossary-diagram { display: block; width: 100%; max-width: 22rem; height: auto; margin: var(--sj-s1) 0 var(--sj-s3); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius); background: var(--sj-surface); }
@media (min-width: 760px) {
  .sj-glossary-entry:has(.sj-glossary-diagram) { grid-template-columns: minmax(0, 1fr) 15rem; }
  .sj-glossary-entry:has(.sj-glossary-diagram) > * { grid-column: 1; }
  .sj-glossary-entry .sj-glossary-diagram { grid-column: 2; grid-row: 1 / span 6; margin-top: var(--sj-s1); }
}
@media (max-width: 599px) {
  .sj-glossary-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .sj-glossary-bar .sj-label { grid-column: 1 / -1; }
}

/* A tour's latest revision on its course card (13.4) */
.sj-card .sj-card-revised {
  display: inline-flex; align-items: baseline; gap: 6px; align-self: flex-start; padding: 2px 10px; border-radius: var(--sj-pill);
  background: var(--sj-warn-wash); color: var(--sj-text); font-size: var(--sj-label); line-height: 1.5;
}
.sj-card .sj-card-revised::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sj-warn); transform: translateY(-1px); }

/* The tour as it was at an earlier version (13.3): read-only, said plainly at the top */
.sj-archive-banner {
  margin: 0; padding: var(--sj-s2) max(16px, calc((100% - var(--sj-layout-w, 1280px)) / 2));
  background: var(--sj-warn-wash); border-bottom: 1px solid var(--sj-warn); color: var(--sj-ink); font-size: var(--sj-read-2);
}
.sj-archive-banner a { color: var(--sj-ink); text-decoration-color: currentColor; }

/* Each tour's emblem and colour on its card (16.7) */
.sj-card { --sj-trail: var(--sj-way-1); box-shadow: inset 0 4px 0 color-mix(in srgb, var(--sj-trail) 75%, transparent); }
.sj-card:hover { box-shadow: var(--sj-shadow-raised), inset 0 4px 0 var(--sj-trail); }
.sj-card > .sj-emblem { margin: 4px 0 2px; }
.sj-card > .sj-kicker { color: var(--sj-trail); font-weight: var(--sj-weight-ui); }
.sj-tour-end { --sj-trail: var(--sj-way-1); display: grid; gap: 2px; box-shadow: inset 0 4px 0 color-mix(in srgb, var(--sj-trail) 75%, transparent); }
.sj-tour-end > .sj-emblem { margin-bottom: var(--sj-s2); }
.sj-tour-end a { color: var(--sj-trail); }
.sj-course-top { align-items: start; }

/* The return link sits apart from the buttons above it (Simon's first feedback, 2026-11-06) */
.sj-join-panel > .sj-return, .sj-join-panel > .sj-privacy, .sj-form-actions + .sj-callout { margin-top: var(--sj-s5); }
.sj-join-panel > .sj-form-status:empty { display: none; }
.sj-return-again { font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-callout .sj-btn { font-family: var(--sj-font-ui); }

/* ---- admin.css */
/* The course admins' pages, the heatmap, and the site admins' page. */

.sj-admin-head { margin-bottom: var(--sj-s5); }
.sj-admin-head h1 { margin-bottom: var(--sj-s3); }
.sj-tabs ul { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 var(--sj-s4); padding: 0; list-style: none; border-bottom: 1px solid var(--sj-rule); }
.sj-tabs a { display: block; padding: var(--sj-s2) var(--sj-s4); margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: var(--sj-label); text-decoration: none; color: var(--sj-muted); }
.sj-tabs a:hover { color: var(--sj-ink); }
.sj-tabs a.is-active { border-bottom-color: var(--sj-ink); color: var(--sj-ink); }
.sj-admin-body { max-width: var(--sj-page); }
.sj-admin-section { margin-top: var(--sj-s7); }
.sj-admin-section > h2 { margin: 0 0 var(--sj-s4); font-size: var(--sj-h3); padding-bottom: var(--sj-s2); border-bottom: 1px solid var(--sj-rule); }

/* Stats */
.sj-stats { display: flex; flex-wrap: wrap; gap: var(--sj-s4); }
.sj-stat { display: grid; gap: 2px; min-width: 10rem; padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); text-decoration: none; color: var(--sj-ink); }
a.sj-stat:hover { border-color: var(--sj-ink); color: var(--sj-ink); }
.sj-stat-n { font-size: var(--sj-h1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sj-stat-label { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-inbox-counts { display: flex; flex-wrap: wrap; gap: var(--sj-s3) var(--sj-s5); margin: 0; padding: 0; list-style: none; }

/* Tours as small multiples */
.sj-tour-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sj-s4); }
.sj-tour-tile { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); display: grid; gap: var(--sj-s2); }
.sj-tour-tile p { margin: 0; }
.sj-tile-title a { text-decoration: none; }
.sj-tile-meta, .sj-tile-links { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-funnel { display: flex; align-items: flex-end; gap: 2px; height: 48px; padding: 2px 0; border-bottom: 1px solid var(--sj-track); }
.sj-funnel-col { flex: 1; height: var(--sj-h, 0%); min-height: 1px; background: var(--sj-accent); }

/* The last 21 days */
.sj-days { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.sj-day { flex: 1; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-day-bar { align-self: end; height: var(--sj-h, 0%); min-height: 1px; background: var(--sj-ink); }
.sj-day-n { font-variant-numeric: tabular-nums; color: var(--sj-ink); }

/* The inbox */
.sj-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sj-s3) var(--sj-s5); margin-bottom: var(--sj-s4); }
.sj-filter .sj-label { display: block; margin-bottom: 2px; }
.sj-inbox-alerts { margin-left: auto; font-size: var(--sj-label); }
.sj-inbox-alerts p { margin: 0; }
.sj-inbox-tally { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sj-s3); }
.sj-inbox-item { padding: var(--sj-s3) var(--sj-s4); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg); background: var(--sj-surface); box-shadow: inset 3px 0 0 var(--sj-track); max-width: 56rem; }
.sj-inbox-item--unclear { box-shadow: inset 3px 0 0 var(--sj-unclear); }
.sj-inbox-item--question { box-shadow: inset 3px 0 0 var(--sj-question); }
.sj-inbox-item--response { box-shadow: inset 3px 0 0 var(--sj-ok); }
.sj-inbox-item.is-resolved { opacity: .7; }
.sj-inbox-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3); font-size: var(--sj-label); color: var(--sj-muted); }
.sj-inbox-meta .sj-status { margin-left: auto; }
.sj-inbox-where { margin: var(--sj-s2) 0; font-size: var(--sj-label); }
.sj-inbox-context { margin: 0 0 var(--sj-s2); font-family: var(--sj-font-reading); font-size: var(--sj-read-2); color: var(--sj-faint); }
.sj-inbox-text { margin: 0 0 var(--sj-s2); font-family: var(--sj-font-reading); font-size: 1.05rem; }
.sj-inbox-actions { margin-top: var(--sj-s2); }
.sj-inbox-actions > summary { font-size: var(--sj-label); color: var(--sj-muted); }
.sj-reply-form { margin-top: var(--sj-s2); }
.sj-inbox-checked { margin-top: var(--sj-s4); font-size: var(--sj-label); }

/* The heatmap over a tour */
.sj-heat-toolbar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2) var(--sj-s3);
  margin: 0 0 var(--sj-s5); padding: var(--sj-s2) var(--sj-s3); background: var(--sj-surface); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius-lg);
  font-size: var(--sj-label);
}
.sj-heat-toolbar .sj-label { margin: 0; }
.sj-heat-legend { margin: 0 0 0 auto; color: var(--sj-muted); }
.sj-heatmap [data-sj-block].is-hot { background: rgba(var(--sj-heat), var(--sj-heat-a, 0)); outline: 4px solid rgba(var(--sj-heat), var(--sj-heat-a, 0)); }
.sj-heatmap.sj-heat--unclear [data-sj-block].is-hot { background: rgba(var(--sj-heat-unclear), var(--sj-heat-a, 0)); outline-color: rgba(var(--sj-heat-unclear), var(--sj-heat-a, 0)); }
.sj-heat-n {
  position: absolute; top: 0; left: calc(-1 * var(--sj-s6)); min-width: 1.6rem; padding: 0 var(--sj-s1);
  background: var(--sj-ink); color: var(--sj-paper); font-family: var(--sj-font-ui); font-size: var(--sj-label); line-height: 1.5; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sj-heat-range { background: rgba(var(--sj-heat), calc(var(--sj-a, .3) * .55)); box-shadow: 0 2px 0 rgba(var(--sj-heat), var(--sj-a, .3)); }
.sj-heat-margin { position: absolute; top: 0; right: calc(-1 * var(--sj-s2)); transform: translateX(100%); display: grid; gap: 2px; font-family: var(--sj-font-ui); text-decoration: none; }
@media (max-width: 1180px) { .sj-heat-margin { position: static; transform: none; display: flex; margin-top: var(--sj-s1); } .sj-heat-n { left: auto; right: 0; } }
.sj-item-n { margin-left: auto; padding-left: var(--sj-s3); font-family: var(--sj-font-ui); font-size: var(--sj-label); color: var(--sj-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sj-heatmap .sj-check-item { display: flex; align-items: start; }
.sj-heatmap .sj-check-item label { flex: 1; }
.sj-prompt-n { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-heat-stops { font-size: var(--sj-label); }
.sj-heat-cell { background: rgba(var(--sj-heat), var(--sj-heat-a, 0)); }

/* Students */
.sj-walkers .sj-th-tour, .sj-coverage .sj-th-tour { max-width: 9rem; font-size: var(--sj-label); line-height: 1.25; }
.sj-progress-cell { min-width: 6rem; white-space: nowrap; }
.sj-progress-cell .sj-bar { width: 3.5rem; min-width: 3.5rem; margin-right: var(--sj-s2); }
.sj-later { padding: var(--sj-s4); border: 1px dashed var(--sj-track); color: var(--sj-muted); max-width: var(--sj-measure); }
.sj-later p { margin-top: 0; }

/* Content */
.sj-content-table td { white-space: normal; }
.sj-findings { margin: 0; padding-left: 1.2rem; font-size: var(--sj-label); }
.sj-findings li + li { margin-top: var(--sj-s1); }
.sj-findings--fail li::marker { color: var(--sj-fail); }
.sj-findings--warn li::marker { color: var(--sj-warn); }
.sj-coverage td { text-align: center; }
.sj-cov-on { color: var(--sj-accent); }
.sj-coverage tr.is-gap th { color: var(--sj-warn); }
.sj-coverage tr.is-gap .sj-tag { margin-left: var(--sj-s2); }
.sj-heat-dwell { display: block; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-heat-stops th:first-child { min-width: 9rem; }
/* Flags on a block: a small line under it, so nothing covers the text or the rail */
.sj-heat-margin { position: static; transform: none; display: flex; justify-content: flex-end; gap: var(--sj-s1); margin-top: 2px; }
.sj-heat-range { background: rgba(var(--sj-heat), calc(.15 + var(--sj-a, .3) * .45)); box-shadow: 0 2px 0 rgba(var(--sj-heat), .8); }
.sj-heat-stops .sj-table { font-size: var(--sj-label); }
.sj-heat-stops .sj-table th, .sj-heat-stops .sj-table td { padding: var(--sj-s1) 6px; }

/* The heatmap's stage table, above the tour */
details.sj-heat-stops { margin: 0 0 var(--sj-s5); max-width: var(--sj-measure); font-size: var(--sj-label); }
details.sj-heat-stops > summary { color: var(--sj-muted); margin-bottom: var(--sj-s2); }
.sj-heatmap .sj-heat-toolbar { max-width: var(--sj-measure); }

/* What students opened (14.5): each detail's opens on its summary line, and the ranked list */
.sj-open-n {
  display: inline-block; margin-left: var(--sj-s2); padding: 0 8px; border-radius: 999px; background: var(--sj-accent-wash);
  color: var(--sj-accent); font-family: var(--sj-font-ui); font-size: var(--sj-label); text-decoration: none; white-space: nowrap;
}
details.sj-heat-opened { margin: 0 0 var(--sj-s5); max-width: var(--sj-measure); }
details.sj-heat-opened > summary { font-size: var(--sj-label); color: var(--sj-muted); margin-bottom: var(--sj-s2); }
details.sj-heat-opened > p { margin: 0 0 var(--sj-s3); font-size: var(--sj-label); }
.sj-opened-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; counter-reset: sj-op; }
.sj-opened-list li {
  counter-increment: sj-op; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 6rem 2.2rem; column-gap: var(--sj-s2); align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--sj-rule);
}
.sj-opened-list li::before { content: counter(sj-op) "."; grid-row: 1 / span 2; color: var(--sj-muted); font-size: var(--sj-label); font-variant-numeric: tabular-nums; }
.sj-opened-label { grid-column: 2; font-size: var(--sj-read-2); color: var(--sj-ink); }
.sj-opened-where { grid-column: 2; grid-row: 2; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-opened-bar { grid-column: 3; grid-row: 1; align-self: center; height: 8px; background: var(--sj-wash); border-radius: 4px; overflow: hidden; }
.sj-opened-bar > span { display: block; height: 100%; width: var(--sj-w); background: var(--sj-accent); }
.sj-opened-n { grid-column: 4; grid-row: 1; font-size: var(--sj-label); }
details.is-flash { outline: 3px solid var(--sj-accent); outline-offset: 4px; transition: outline-color 1.4s; }
.sj-tile-detail { margin: var(--sj-s2) 0 0; font-size: var(--sj-label); color: var(--sj-muted); }

/* Moderation: Hide from the class, Take down (asked in the page), Addressed by this revision */
.sj-moderate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); }
.sj-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sj-s2); padding: 4px 8px; border-radius: var(--sj-radius); background: var(--sj-fail-wash); }
.sj-confirm[hidden] { display: none; }
.sj-confirm-q { font-size: var(--sj-label); color: var(--sj-fail); }
.sj-export { margin: var(--sj-s4) 0; font-size: var(--sj-label); }

/* Questions on the videos (7.4): ten-second bins under each video */
details.sj-heat-video { margin: 0 0 var(--sj-s5); max-width: var(--sj-measure); }
details.sj-heat-video > summary { font-size: var(--sj-label); color: var(--sj-muted); margin-bottom: var(--sj-s2); }
details.sj-heat-video > p { margin: 0 0 var(--sj-s3); font-size: var(--sj-label); }
.sj-vt-row { margin: 0 0 var(--sj-s4); }
.sj-vt-title { margin: 0 0 4px; font-size: var(--sj-read-2); color: var(--sj-ink); }
.sj-vt { padding: 0; }
.sj-float .sj-vt { padding: 6px var(--sj-s3) 8px; border-top: 1px solid var(--sj-rule); }
.sj-vt-bins { display: flex; align-items: stretch; gap: 1px; height: 44px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--sj-track); }
.sj-vt-bins li { flex: 1 1 0; min-width: 3px; display: flex; }
.sj-vt-bin {
  flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; padding: 0; border: 0; border-radius: 2px 2px 0 0;
  background: transparent; cursor: pointer;
}
.sj-vt-bin:hover, .sj-vt-bin:focus-visible { background: var(--sj-wash); }
.sj-vt-bin > span { display: block; width: 100%; flex: none; }
.sj-vt-u { background: var(--sj-unclear); }
.sj-vt-q { background: var(--sj-question); }
.sj-vt-c { background: var(--sj-muted); }
.sj-vt-axis { display: flex; justify-content: space-between; gap: var(--sj-s3); margin: 4px 0 0; font-size: var(--sj-label); color: var(--sj-muted); font-variant-numeric: tabular-nums; }
.sj-vt-key { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sj-vt-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }

/* The band above the heatmap's tour: stages, details opened, videos, side by side, each scrolling */
.sj-heat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sj-s3); margin: 0 0 var(--sj-s5); align-items: start; }
.sj-heat-band > details { margin: 0 !important; max-width: none !important; padding: var(--sj-s2) var(--sj-s3); border: 1px solid var(--sj-rule); border-radius: var(--sj-ui-radius, 8px); background: var(--sj-surface); }
.sj-heat-band > details[open] { max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain; }
.sj-heat-band > details > summary { position: sticky; top: calc(-1 * var(--sj-s2)); z-index: 1; margin: calc(-1 * var(--sj-s2)) calc(-1 * var(--sj-s3)) var(--sj-s2) !important; padding: var(--sj-s2) var(--sj-s3); background: var(--sj-surface); color: var(--sj-ink) !important; }
.sj-heat-band > details > p.sj-muted { margin: 0 0 var(--sj-s2); }
.sj-heat-band .sj-opened-list li { grid-template-columns: 1.6rem minmax(0, 1fr) 3.5rem 2rem; padding: 4px 0; }
.sj-opened-list li[hidden] { display: none; }
.sj-opened-more { margin-top: var(--sj-s2); }

/* Feedback, the admin page (17.3): the words beside a thumbnail of the picture, with the sender's pin on it */
.sj-feedback-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sj-s3) var(--sj-s4); align-items: start; margin: var(--sj-s2) 0; }
.sj-feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sj-feedback-pin-text { margin: var(--sj-s2) 0; font-size: var(--sj-label); color: var(--sj-muted); }
.sj-feedback-shot { position: relative; display: block; width: 16rem; max-width: 40vw; border: 1px solid var(--sj-rule); border-radius: var(--sj-radius); overflow: hidden; background: var(--sj-wash); }
.sj-feedback-shot img { display: block; width: 100%; height: auto; }
.sj-feedback-pin {
  position: absolute; left: var(--sj-pin-x); top: var(--sj-pin-y); width: var(--sj-s4); height: var(--sj-s4); transform: translate(-50%, -50%);
  border: 2px solid var(--sj-surface); border-radius: 50%; background: var(--sj-fail); box-shadow: var(--sj-shadow);
}
.sj-feedback-errors { margin: var(--sj-s2) 0; font-size: var(--sj-label); }
.sj-feedback-actions .sj-btn[aria-pressed="true"] { background: var(--sj-ink); border-color: var(--sj-ink); color: var(--sj-surface); }
.sj-feedback-item.is-done, .sj-feedback-item.is-wontfix { opacity: .75; }
@media (max-width: 40rem) {
  .sj-feedback-body { grid-template-columns: minmax(0, 1fr); }
  .sj-feedback-shot { max-width: 100%; }
}

/* ---- print.css */
/* Printing a tour: the text, the checklists and the figures; no controls. */
@media print {
  .sj-masthead, .sj-map, .sj-rail, .sj-stop-foot, .sj-select-menu, .sj-copy, .sj-video-cue, .sj-heat-toolbar,
  .sj-prompt-notes, .sj-form-actions, .sj-demo-note { display: none !important; }
  .sj-layout { display: block; width: auto; padding: 0; }
  .sj-stuck, .sj-after { break-inside: avoid; }
  .sj-stuck:not([open]) > :not(summary), .sj-after:not([open]) > :not(summary) { display: block; }
  .sj-stop { break-inside: auto; border-bottom: 0; }
  a { text-decoration: none; }
}