/* site/how-to-sort/station.css: the sorting station tutorial (station.js).
   Everything is scoped under .ss, so the station can sit inside another page (the
   sorter, the homepage) without leaking styles. The host page must also link
   /assets/lexend.css, /assets/material-symbols.css and /header/button-chrome.css.
   On a unit page, link button-chrome.css BEFORE /units/unit.css: both register
   @property --v, the later one wins, and the unit header needs unit.css's
   (inherits: true). House rules: one stroke weight, no radius, no blur, yellow
   only as a fill with an ink outline, Lexend; mono only for numeric readouts. */

.ss {
  --ss-ink: #201A12; --ss-panel: #FFF8E6; --ss-tan: #faf0d8; --ss-gap: #e0cfad;
  --ss-yellow: #FED700; --ss-muted: #6E5836; --ss-sw: 3px;
  --ss-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  position: relative; container-type: inline-size;
  color: var(--ss-ink); font-family: 'Lexend', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
.ss *, .ss *::before, .ss *::after { box-sizing: border-box; }
.ss-in { display: grid; grid-template-columns: minmax(0, 780px) minmax(300px, 340px); justify-content: center; gap: 24px; align-items: start; }
@container (max-width: 760px) { .ss-in { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ── the scene: a 600 x 520 drawing, scaled to fit its box ── */
.ss-stage { position: relative; width: 100%; aspect-ratio: 600 / 520; border: var(--ss-sw) solid var(--ss-ink);
  background: var(--ss-tan); overflow: hidden; }
.ss-world { position: absolute; left: 0; top: 0; width: 600px; height: 520px; transform-origin: 0 0; }
.ss-world > svg { position: absolute; inset: 0; width: 600px; height: 520px; overflow: visible; }
.ss-pieces { position: absolute; inset: 0; }
.ss-pc { position: absolute; left: 0; top: 0; display: block; max-width: none; will-change: transform;
  user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ss svg text { font-family: inherit; }
.ss svg .mono { font-family: var(--ss-mono); }
.ss .sv { transform-box: fill-box; transform-origin: center; }

/* ── the side column: the sorter, then the callout hanging off its button ── */
.ss-side { display: grid; gap: 0; }

/* the sorter: a preview of /sort. Only its action row is live, so nothing else in
   it looks pressable: no chips, no boxed rows, no yellow buttons. */
.ss-sorter { background: var(--ss-tan); border: var(--ss-sw) solid var(--ss-ink); }
.ss-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: var(--ss-sw) solid var(--ss-ink); background: var(--ss-panel); font-size: 13px; font-weight: 700; }
.ss-bar .num { font-family: var(--ss-mono); font-weight: 400; color: var(--ss-muted); font-size: 12px; white-space: nowrap; }
.ss-body { padding: 12px 12px 4px; display: grid; gap: 8px; }
.ss-eye { margin: 0; font-size: 12px; font-weight: 700; color: var(--ss-muted); }
.ss-h { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.ss-h mark { background: var(--ss-yellow); color: var(--ss-ink); padding: 0 4px; outline: 2px solid var(--ss-ink); outline-offset: -2px; }
.ss-sub { margin: 0; font-size: 14px; line-height: 1.45; }
.ss-read { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0;
  border-bottom: 2px solid var(--ss-ink); }
.ss-read span { font-size: 13px; color: var(--ss-muted); font-weight: 700; }
.ss-read b { font-family: var(--ss-mono); font-size: 22px; font-weight: 700; }
.ss-read b.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--ss-ink); margin-left: 2px; vertical-align: -.15em; }
.ss-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ss-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 14px; font-weight: 700; }
.ss-row + .ss-row { border-top: 1px solid var(--ss-gap); }
.ss-row img { width: 40px; height: 30px; object-fit: contain; display: block; }
.ss-row small { display: block; font-weight: 400; font-size: 11px; color: var(--ss-muted); }
.ss-row .st { display: flex; align-items: center; gap: 4px; font-family: var(--ss-mono); font-size: 12px; font-weight: 400; white-space: nowrap; }
/* the type being pulled now: a small yellow square marker, not a filled (clickable-looking) row */
.ss-row .st i { display: inline-block; width: 12px; height: 12px; background: var(--ss-yellow); border: 2px solid var(--ss-ink); }
.ss-row .st .ms { font-size: 18px; }

/* the live part: back + the action, at the sorter's foot, like the real sorter's Done */
.ss-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px; }
.ss-act .btn { --u: 2.2rem; }
.ss-act .btn.lg { --u: 2.3rem; }
.ss-act .ss-go { display: block; width: 100%; }
.ss-act .ss-go > .face { width: 100%; }
.ss-act .ss-back { width: 3.3rem; height: auto; align-self: stretch; }
.ss-act .ss-alt { grid-column: 1 / -1; display: block; width: 100%; }
.ss-act .ss-alt > .face { width: 100%; }
.ss-act [hidden] { display: none !important; }
.ss-act .ss-back[hidden] + .ss-go { grid-column: 1 / -1; }
.ss .btn:focus-visible { outline: var(--ss-sw) solid var(--ss-ink); outline-offset: 4px; }
/* one rise and settle when a step is ready: the real hover rise, held briefly */
.ss .btn.ss-nudge { --v: var(--v-hover); }
.ss .ms {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 28px;
  line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; -webkit-font-smoothing: antialiased;
}
.ss .lab .ms { font-size: 1.35em; margin: -.2em 0; }

/* the callout: the step's words, hanging off the action button by a notch */
.ss-call { position: relative; margin-top: 16px; background: var(--ss-panel); border: var(--ss-sw) solid var(--ss-ink);
  padding: 12px 14px 14px; }
.ss-call::before, .ss-call::after { content: ""; position: absolute; left: var(--notch-x, 50%); width: 26px; height: 14px;
  transform: translateX(-50%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ss-call::before { top: -16px; background: var(--ss-ink); }
.ss-call::after { top: -11px; width: 18px; height: 11px; background: var(--ss-panel); }
.ss-prog { display: flex; gap: 10px; margin-bottom: 8px; }
.ss-prog span { display: flex; gap: 3px; }
.ss-prog i { width: 10px; height: 10px; border: 2px solid var(--ss-ink); background: var(--ss-panel); display: block; }
.ss-prog i.done { background: var(--ss-ink); }
.ss-prog i.on { background: var(--ss-yellow); }
.ss-callH { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.ss-callP { margin: 0; font-size: 15px; line-height: 1.5; }

/* the idle hint: everything in the station dims except the button and its callout */
.ss-mask { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .6s ease; overflow: visible; }
.ss-mask path { fill: rgba(32, 26, 18, .7); fill-rule: evenodd; pointer-events: none; }
.ss-mask.on { opacity: 1; }
.ss-mask.on path { pointer-events: auto; }
.ss-mask[hidden] { display: none; }

@container (max-width: 760px) {
  .ss-h { font-size: 21px; }
  .ss-sub { display: none; }                 /* the callout says it, closer to the thumb */
  .ss-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .ss-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; padding: 2px 6px 2px 0; font-size: 13px; }
  .ss-row + .ss-row { border-top: 0; border-left: 1px solid var(--ss-gap); padding-left: 6px; }
  .ss-row small { display: none; }
  .ss-row img { height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .ss-mask { transition: none; } }
.ss .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }