/* ============================================================
   /instructors/create-an-assignment — the wireframe walkthrough.

   A scroll-driven page: the prose column carries one step per
   screen of the real setup flow, and a sticky "stage" on the right
   holds a wireframe of the interface that swaps as each step comes
   into view (js/walkthrough.js sets .is-on on the matching frame
   and data-active / data-rail on the window).

   The wireframe is deliberately unbranded and low-fidelity — 2px
   strokes, dashed placeholders, monospace labels, hatched fill for
   the parts of the screen a step is not about. It represents the
   fields, buttons, and their order, not the visual design. The one
   place it borrows the real interface's look is the coach-mark
   tooltip (.wt-tip), which is the shape Sway's own tooltips take.

   All frames share a single grid cell so the stage never changes
   height between steps. Without JS the frames unstack and the
   stage stops sticking, so the page still reads top to bottom.
   Colours come from the site theme tokens plus the --wt-* set
   below, so the page follows the light/dark toggle.
   ============================================================ */

:root {
  /* Strokes. --wt-ink draws the elements a step is about;
     --wt-faint draws everything not yet filled in. */
  --wt-ink: #55555f;
  --wt-ink-strong: #111118;
  --wt-faint: #bab7b0;
  --wt-hatch: rgba(60, 50, 40, 0.09);
  --wt-accent: #5a5ad1;
  --wt-accent-soft: rgba(90, 90, 209, 0.09);
  --wt-paper: #fffefb;
  --wt-tip-bg: #23004d;
  --wt-tip-text: #f4f2ff;
  /* Hard offset shadow rather than a diffuse one: a drawn edge, not
     a lit surface. */
  --wt-cast: rgba(60, 50, 40, 0.16);
}
html.dark-mode {
  --wt-ink: #a8a8b4;
  --wt-ink-strong: #f1f1f5;
  --wt-faint: #4b4b5a;
  --wt-hatch: rgba(226, 226, 255, 0.06);
  --wt-accent: #8a8aff;
  --wt-accent-soft: rgba(138, 138, 255, 0.11);
  --wt-paper: #15151e;
  --wt-tip-bg: #33334f;
  --wt-tip-text: #f1f1f5;
  --wt-cast: rgba(226, 226, 255, 0.09);
}

/* ============================================================
   Page front matter — hero, facts, flow strip
   ============================================================ */
/* No measure of its own: the rest of the site lets prose fill the page
   container, and a 40rem column here read as an arbitrary margin. */
.page-content .wt-dek {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0.2rem 0 1.6rem;
}

.wt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wt-fact { text-align: center; }
.wt-fact b {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--wt-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wt-fact span { font-size: 0.76rem; line-height: 1.45; color: var(--text-soft); display: block; }

/* The flow strip: the whole shape of the task, before the reader
   starts scrolling through it. Doubles as jump navigation. */
.page-content .wt-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
}
.page-content .wt-flow li { margin: 0; }
.page-content .wt-flow a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  border: 1.5px dashed var(--wt-faint);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-decoration: none;
}
.page-content .wt-flow a:hover {
  border-color: var(--wt-accent);
  border-style: solid;
  color: var(--wt-accent);
  text-decoration: none;
}
.page-content .wt-flow a b { color: var(--wt-accent); font-weight: 700; }

.page-content .wt-caveat {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-soft);
  border-left: 2px solid var(--wt-accent);
  padding-left: 0.9rem;
  margin: 1.6rem 0 0;
  max-width: 42rem;
}

/* ============================================================
   The two-column scroll rig
   ============================================================ */
.wt {
  display: grid;
  grid-template-areas: "prose stage";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 3rem;
  align-items: start;
  margin: 1rem 0 0;
}
.wt-scroller { grid-area: prose; }
.wt-stage {
  grid-area: stage;
  position: sticky;
  top: calc(var(--banner-h) + 1.6rem);
}

.wt-step {
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 0;
  scroll-margin-top: calc(var(--banner-h) + 1rem);
}
/* First and last step need less runway: the first shares the fold
   with the stage's opening frame, the last is followed by the
   closing section rather than by more scrolling. */
.wt-step:first-child { min-height: 62vh; justify-content: flex-start; }
.wt-step:last-child { min-height: 58vh; }

.page-content .wt-kicker {
  font-family: "Roboto Mono", monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 0.4rem;
}
.page-content .wt-kicker b {
  color: var(--wt-accent);
  font-weight: 700;
  margin-right: 0.5em;
}
.page-content h2.wt-title {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0 0 0.8rem;
}
.page-content .wt-step p {
  font-size: 0.9rem;
  line-height: 1.72;
  max-width: 34rem;
}

/* Aside blocks in the prose column: the decision a step commits
   you to, and the advice if you are unsure. Dashed left rule so
   they read as marginal notes rather than callout cards. */
.wt-aside {
  border-left: 2px dashed var(--wt-faint);
  padding: 0.1rem 0 0.1rem 0.95rem;
  margin: 1.2rem 0 0;
  max-width: 34rem;
}
.page-content .wt-aside-label {
  font-family: "Roboto Mono", monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wt-accent);
  margin: 0 0 0.3rem;
}
.page-content .wt-aside p { font-size: 0.83rem; line-height: 1.66; margin: 0 0 0.5rem; }
.page-content .wt-aside p:last-child { margin-bottom: 0; }
.page-content .wt-step ul.wt-list { margin: 0.9rem 0 0; padding-left: 1.1rem; max-width: 34rem; }
.page-content .wt-step ul.wt-list li { font-size: 0.87rem; line-height: 1.66; margin: 0 0 0.5rem; }
/* Column and field names, wherever the prose names one: monospace, so the
   reader can tell a label on the screen from a word in the sentence. */
.page-content .wt-step b {
  font-family: "Roboto Mono", monospace;
  font-size: 0.94em;
  font-weight: 700;
  color: var(--text-strong);
}
/* ...except the step number in the kicker, which keeps the accent. */
.page-content .wt-kicker b {
  font-size: inherit;
  color: var(--wt-accent);
}

/* ============================================================
   The window
   ============================================================ */
.wt-window {
  border: 2px solid var(--wt-ink);
  border-radius: 6px;
  background: var(--wt-paper);
  box-shadow: 5px 5px 0 var(--wt-cast);
  overflow: hidden;
  /* Everything inside is sized in em off this, so the whole
     wireframe scales with one declaration per breakpoint. */
  font-family: "Roboto Mono", monospace;
  font-size: 0.8rem;
  color: var(--wt-ink);
}
.wt-chrome {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.8em;
  border-bottom: 2px solid var(--wt-ink);
  background: var(--wt-hatch);
}
.wt-dot {
  width: 0.62em;
  height: 0.62em;
  border: 1.5px solid var(--wt-ink);
  border-radius: 50%;
}
.wt-url {
  flex: 1;
  margin-left: 0.5em;
  border: 1.5px dashed var(--wt-faint);
  border-radius: 3px;
  padding: 0.15em 0.6em;
  font-size: 0.72em;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-body { display: flex; align-items: stretch; min-height: 19em; }

/* ---- The rail: course selector + assignment list ----
   Persistent across every frame, because it is persistent in the
   real interface. Its own state changes once, at the end. */
.wt-rail {
  position: relative;
  flex: 0 0 10.4em;
  padding: 0.85em 0.7em;
  border-right: 2px solid var(--wt-ink);
  background: var(--wt-hatch);
}
.wt-railsel {
  display: flex;
  justify-content: space-between;
  gap: 0.4em;
  border: 1.5px solid var(--wt-faint);
  border-radius: 3px;
  padding: 0.3em 0.5em;
  font-size: 0.68em;
  color: var(--text-soft);
  margin-bottom: 0.7em;
}
.wt-railbox { border: 1.5px solid var(--wt-ink); border-radius: 3px; }
.wt-railhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3em;
  padding: 0.4em 0.45em;
  border-bottom: 1.5px solid var(--wt-ink);
  font-size: 0.66em;
  font-weight: 700;
  color: var(--wt-ink-strong);
}
.wt-create {
  border: 1.5px solid var(--wt-accent);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-weight: 500;
  color: var(--wt-accent);
  white-space: nowrap;
}
.page-content .wt-railempty {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  padding: 0.55em 0.5em;
}
.wt-railcard {
  display: none;
  padding: 0.5em 0.5em 0.55em;
  background: var(--wt-accent-soft);
  border-left: 3px solid var(--wt-accent);
}
.wt-railcard b {
  display: block;
  font-size: 0.66em;
  line-height: 1.4;
  color: var(--wt-ink-strong);
}
.wt-railcard span {
  display: block;
  font-size: 0.58em;
  line-height: 1.5;
  color: var(--text-soft);
}
.wt-railcard span.wt-badge {
  display: inline-block;
  margin-top: 0.4em;
  border: 1.5px solid var(--wt-accent);
  border-radius: 2px;
  padding: 0.1em 0.4em;
  font-size: 0.56em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wt-accent);
}
/* One assignment now exists. */
.wt-window[data-rail="scheduled"] .wt-railempty { display: none; }
.wt-window[data-rail="scheduled"] .wt-railcard { display: block; }

/* The pointer, parked over + Create for the opening step. */
.wt-click {
  position: absolute;
  top: 1.9em;
  right: 0.7em;
  width: 1.5em;
  height: 1.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  color: var(--wt-ink-strong);
}
.wt-window[data-active="start"] .wt-click { opacity: 1; }
.wt-click svg { display: block; width: 100%; height: 100%; }
.wt-click::after {
  content: "";
  position: absolute;
  left: -0.35em;
  top: -0.35em;
  width: 1.6em;
  height: 1.6em;
  border: 1.5px solid var(--wt-accent);
  border-radius: 50%;
  animation: wt-pulse 2.2s ease-out infinite;
}
@keyframes wt-pulse {
  0% { transform: scale(0.5); opacity: 0.9; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Frame stack ---- */
.wt-frames {
  flex: 1;
  min-width: 0;
  display: grid;
}
.wt-frame {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1em 1.1em 1.1em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5em);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.wt-frame.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---- Frame furniture ---- */
.wt-tabs {
  display: flex;
  gap: 0.9em;
  border-bottom: 1.5px solid var(--wt-faint);
  margin-bottom: 0.9em;
  font-size: 0.66em;
}
.wt-tabs span { padding-bottom: 0.4em; color: var(--text-soft); }
.wt-tabs span.is-on {
  color: var(--wt-ink-strong);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--wt-accent);
}
.page-content .wt-q {
  font-family: "Roboto Mono", monospace;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1.45;
  color: var(--wt-ink-strong);
  margin: 0 0 0.3em;
}
.page-content .wt-sub {
  font-family: "Roboto Mono", monospace;
  font-size: 0.66em;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 1em;
}
.page-content .wt-flabel {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 0.35em;
}
.page-content .wt-flabel.wt-gap { margin-top: 1.1em; }
.wt-input, .wt-textarea {
  border: 1.5px solid var(--wt-ink);
  border-radius: 3px;
  padding: 0.45em 0.6em;
  font-size: 0.7em;
  line-height: 1.55;
  color: var(--wt-ink-strong);
  background: var(--wt-paper);
}
.wt-textarea { min-height: 3.6em; }
.wt-input + .wt-flabel, .wt-textarea + .wt-flabel { margin-top: 0.9em; }
.wt-empty {
  border-style: dashed;
  border-color: var(--wt-faint);
  color: var(--text-soft);
}
/* Caret in the field the step is about. */
.wt-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--wt-accent);
  animation: wt-blink 1.1s steps(1, end) infinite;
}
@keyframes wt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Next sits in the bottom right, where the real screens put it. */
.wt-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8em;
  margin-top: auto;
  padding-top: 1.1em;
}
.wt-next {
  border: 1.5px solid var(--wt-ink-strong);
  border-radius: 3px;
  padding: 0.3em 1.1em;
  font-size: 0.68em;
  font-weight: 700;
  color: var(--wt-ink-strong);
  box-shadow: 2px 2px 0 var(--wt-cast);
}
.wt-hint { font-size: 0.62em; line-height: 1.5; color: var(--text-soft); }

/* Coach mark — the one element borrowed from the real interface,
   where tooltips are dark bubbles with a notch. */
.wt-tip {
  position: relative;
  display: inline-block;
  max-width: 15em;
  margin: 1em 0 0;
  border-radius: 3px;
  padding: 0.4em 0.65em;
  background: var(--wt-tip-bg);
  color: var(--wt-tip-text);
  font-size: 0.62em;
  line-height: 1.5;
}
.wt-tip::before {
  content: "";
  position: absolute;
  top: -0.42em;
  left: 1.1em;
  border-left: 0.42em solid transparent;
  border-right: 0.42em solid transparent;
  border-bottom: 0.42em solid var(--wt-tip-bg);
}
/* Notch on the left edge, for a mark that points at the rail. */
.wt-tip-w { margin-top: 0.2em; }
.wt-tip-w::before {
  top: 0.55em;
  left: -0.42em;
  border: 0.42em solid transparent;
  border-right-color: var(--wt-tip-bg);
  border-left: 0;
}

/* Hatched fill: a region of the screen this step is not about. As the last
   thing in a frame it takes the leftover height, so the wireframe reads as a
   full screen rather than a short one. */
.wt-frame > .wt-hatch-box:last-child { flex: 1; }
.wt-hatch-box {
  border: 1.5px dashed var(--wt-faint);
  border-radius: 3px;
  min-height: 4.2em;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    var(--wt-hatch) 5px 10px
  );
}

/* ---- Open dropdown (step 02) ----
   The mark sits to the right of the select: the open option list overlays
   whatever is directly beneath it. */
.wt-selectrow { display: flex; align-items: flex-start; gap: 1.4em; }
.wt-selectwrap { position: relative; flex: 0 0 8.5em; }
.wt-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--wt-ink-strong);
  border-radius: 3px;
  padding: 0.35em 0.6em;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--wt-ink-strong);
}
.page-content ul.wt-options {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.25em);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.25em;
  border: 1.5px solid var(--wt-ink);
  border-radius: 3px;
  background: var(--wt-paper);
  box-shadow: 3px 3px 0 var(--wt-cast);
}
.page-content ul.wt-options li {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68em;
  line-height: 1.7;
  color: var(--wt-ink);
  padding: 0 0.45em;
  margin: 0;
  border-radius: 2px;
}
.page-content ul.wt-options li.is-on {
  background: var(--wt-accent);
  color: #fff;
  font-weight: 700;
}
html.dark-mode .page-content ul.wt-options li.is-on { color: #10101a; }

/* ---- Statement anatomy (step 04) ---- */
.wt-anat {
  border: 1.5px solid var(--wt-ink);
  border-radius: 3px;
  padding: 0.7em 0.75em;
}
.page-content .wt-anat-stmt {
  font-family: "Roboto Mono", monospace;
  font-size: 0.7em;
  line-height: 1.6;
  color: var(--wt-ink-strong);
  margin: 0;
}
.page-content .wt-anat-stmt u {
  text-decoration: none;
  box-shadow: inset 0 -0.35em 0 var(--wt-accent-soft);
}
.page-content ol.wt-anat-notes {
  list-style: none;
  margin: 0.7em 0 0;
  padding: 0.6em 0 0;
  border-top: 1.5px dashed var(--wt-faint);
}
.page-content ol.wt-anat-notes li {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 0 0.25em;
  padding-left: 1.5em;
  position: relative;
}
.page-content ol.wt-anat-notes li b {
  position: absolute;
  left: 0;
  color: var(--wt-accent);
  font-weight: 700;
}
.wt-reject { margin-top: 0.9em; }
.page-content .wt-reject-stmt {
  font-family: "Roboto Mono", monospace;
  font-size: 0.68em;
  line-height: 1.6;
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-color: var(--wt-accent);
  margin: 0 0 0.2em;
}
.page-content .wt-reject-why {
  font-family: "Roboto Mono", monospace;
  max-width: 26em;
  font-size: 0.6em;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0;
}

/* ---- Topic set (step 05) ---- */
.page-content ol.wt-topics { list-style: none; margin: 0; padding: 0; counter-reset: wt-t; }
.page-content ol.wt-topics li {
  counter-increment: wt-t;
  position: relative;
  margin: 0 0 0.55em;
  padding: 0 0 0 1.6em;
  border-left: 2px solid var(--wt-accent);
  padding-left: 0.7em;
  margin-left: 0.1em;
}
.page-content ol.wt-topics li::before {
  content: counter(wt-t);
  font-family: "Roboto Mono", monospace;
  font-size: 0.58em;
  font-weight: 700;
  color: var(--wt-accent);
  display: block;
}
.page-content ol.wt-topics li b {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.68em;
  line-height: 1.5;
  color: var(--wt-ink-strong);
}
.page-content ol.wt-topics li span {
  display: block;
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  line-height: 1.6;
  color: var(--text-soft);
}
.page-content .wt-ghost {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  line-height: 1.5;
  color: var(--text-soft);
  border: 1.5px dashed var(--wt-faint);
  border-radius: 3px;
  padding: 0.4em 0.6em;
  margin: 0.2em 0 0;
}

/* ---- Slider (step 06) ---- */
.wt-slider { padding: 1.6em 0 0.4em; }
.wt-track {
  position: relative;
  height: 2px;
  background: var(--wt-ink);
}
.wt-knob {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--wt-accent);
}
.wt-knob b {
  position: absolute;
  bottom: 1.35em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72em;
  font-weight: 700;
  color: var(--wt-ink-strong);
  white-space: nowrap;
}
.wt-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9em;
  font-size: 0.58em;
  color: var(--text-soft);
}

/* ---- Deadline timeline (step 07) ---- */
.wt-tl { position: relative; padding-left: 1.35em; }
.wt-tl::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.5em;
  bottom: 0.5em;
  width: 2px;
  background: var(--wt-ink);
}
.wt-tl-node { position: relative; padding-bottom: 0.2em; }
.wt-tl-node::before {
  content: "";
  position: absolute;
  left: -1.35em;
  top: 0.35em;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--wt-accent);
}
.wt-tl-node b {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--wt-ink-strong);
}
.wt-tl-date {
  display: inline-block;
  margin-left: 0.5em;
  border: 1.5px solid var(--wt-ink);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-size: 0.64em;
  color: var(--wt-ink-strong);
  background: var(--wt-paper);
}
.page-content .wt-tl-what {
  font-family: "Roboto Mono", monospace;
  font-size: 0.62em;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0.2em 0 0;
}
.wt-tl-gap {
  position: relative;
  margin: 0.5em 0 0.6em;
  padding: 0.25em 0 0.25em 0;
  font-size: 0.6em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-accent);
}
.wt-tl-gap::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: -0.3em;
  bottom: -0.3em;
  width: 1.5px;
  border-left: 1.5px dashed var(--wt-accent);
}

/* ---- Details panel (step 08) ---- */
.wt-titlerow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.8em;
}
.wt-titlerow b { font-size: 0.8em; font-weight: 700; color: var(--wt-ink-strong); }
.wt-pencil {
  border: 1.5px dashed var(--wt-faint);
  border-radius: 3px;
  padding: 0 0.3em;
  font-size: 0.68em;
  color: var(--text-soft);
}
.wt-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0.9em;
}
.page-content .wt-cols ol.wt-topics li b { font-size: 0.64em; }
.page-content .wt-kv {
  font-family: "Roboto Mono", monospace;
  font-size: 0.64em;
  line-height: 1.6;
  color: var(--wt-ink-strong);
  margin: 0 0 0.5em;
}
.page-content .wt-kv span { display: block; color: var(--text-soft); font-size: 0.92em; }

/* ---- Matches table (step 09) ---- */
.wt-tablewrap { overflow-x: auto; }
.page-content table.wt-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid var(--wt-ink);
  border-radius: 3px;
  background: var(--wt-paper);
  box-shadow: none;
  margin: 0;
  font-family: "Roboto Mono", monospace;
}
.page-content table.wt-table th,
.page-content table.wt-table td {
  border: 1.5px solid var(--wt-faint);
  padding: 0.35em 0.4em;
  text-align: center;
  font-size: 0.6em;
  line-height: 1.4;
}
.page-content table.wt-table th {
  background: var(--wt-hatch);
  color: var(--wt-ink-strong);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.page-content table.wt-table td { color: var(--wt-ink-strong); font-variant-numeric: tabular-nums; }
.page-content table.wt-table td.wt-zero { color: var(--text-soft); }

/* ---- Step meter under the window ---- */
.wt-meter {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.9rem 0 0;
  font-family: "Roboto Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.wt-meter b { color: var(--wt-accent); font-weight: 700; }
.wt-ticks { display: flex; gap: 3px; flex: 1; }
.wt-ticks i {
  flex: 1;
  height: 3px;
  background: var(--wt-faint);
  border-radius: 2px;
}
.wt-ticks i.is-done { background: var(--wt-accent); }

/* ============================================================
   Narrow screens: the stage moves to the top of the viewport and
   the steps scroll beneath it.
   ============================================================ */
@media (max-width: 980px) {
  .wt { display: block; }
  .wt-stage {
    top: var(--banner-h);
    z-index: 6;
    margin: 0 0 1rem;
    padding: 0.7rem 0 0.5rem;
    /* Opaque: the steps scroll underneath. The negative inline
       margins let the paint cover the page gutter too. */
    background: var(--page-bg);
    border-bottom: 1px solid var(--rule);
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .wt-window { font-size: 0.72rem; }
  .wt-body { min-height: 17em; }
  .wt-step { min-height: auto; padding: 1.6rem 0 2.2rem; }
  .wt-step:first-child, .wt-step:last-child { min-height: auto; }
  .wt-meter { margin-top: 0.6rem; }
}
@media (max-width: 620px) {
  .wt-window { font-size: 0.68rem; }
  /* The rail is orientation, not content — the first frame has
     already shown it by the time space runs out. */
  .wt-rail { display: none; }
  .wt-chrome .wt-url { font-size: 0.66em; }
}

/* Reduced motion: no crossfade, no blink, no pulse. */
@media (prefers-reduced-motion: reduce) {
  .wt-frame { transition: none; transform: none; }
  .wt-caret { animation: none; }
  .wt-click::after { animation: none; opacity: 0.5; }
  .wt-click { transition: none; }
}

/* ============================================================
   No JS: unstack the frames and let the page read top to bottom.
   ============================================================ */
html:not(.wt-js) .wt { display: block; }
html:not(.wt-js) .wt-stage { position: static; }
html:not(.wt-js) .wt-frames { display: block; }
html:not(.wt-js) .wt-frame {
  opacity: 1;
  visibility: visible;
  transform: none;
  border-top: 1.5px dashed var(--wt-faint);
}
html:not(.wt-js) .wt-frames > .wt-frame:first-child { border-top: 0; }
html:not(.wt-js) .wt-railcard { display: block; }
html:not(.wt-js) .wt-meter { display: none; }
/* The pointer belongs to the first screen only, and an overlaid dropdown
   would cover the screen stacked beneath it. */
html:not(.wt-js) .wt-click { display: none; }
html:not(.wt-js) .wt-options {
  position: static;
  max-width: 8.5em;
  margin-top: 0.25em;
  box-shadow: none;
}