/* Menu 10: continuous reading with a compact, independently scrollable index. */
body[data-route="walkthrough"] {
  --walk-surface: #fffdf8;
  --walk-copper: #b77947;
  --walk-example: #f8f1e8;
}

body[data-route="walkthrough"] #routeContent {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-route="walkthrough"] .walk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 8px 12px;
  border: 1px solid var(--route-line);
  border-radius: 12px;
  background: var(--route-soft);
}
body[data-route="walkthrough"] .walk-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--route-line);
  border-radius: 10px;
  color: var(--route-accent-ink);
  background: var(--walk-surface);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] .walk-nav > a:hover {
  border-color: var(--route-accent);
  background: #fff;
}
body[data-route="walkthrough"] .walk-nav > a:is(.active, [aria-current="page"], [aria-current="true"]) {
  border-color: var(--route-deep);
  color: var(--walk-surface);
  background: var(--route-deep);
  box-shadow: inset 0 -3px var(--walk-copper);
}

body[data-route="walkthrough"] :is(.walk-overview, .walk-workspace, .walk-panel) {
  min-width: 0;
  color: var(--ink);
  line-height: 1.7;
}
body[data-route="walkthrough"] :is(.walk-workspace, .walk-panel) :where(*) { min-width: 0; }
body[data-route="walkthrough"] :is(.walk-overview, .walk-reading, .walk-panel) p {
  max-width: 75ch;
  margin: 0 0 15px;
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) :is(ul, ol):not(.walk-commands):not(.walk-dependencies) {
  max-width: 75ch;
  padding-left: 22px;
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) li { margin: 7px 0; }
body[data-route="walkthrough"] :is(.walk-overview, .walk-reading, .walk-panel) :is(h2, h3, h4) {
  color: var(--route-deep);
  font-family: var(--font-editorial);
  line-height: 1.28;
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) h2 {
  margin: 0 0 13px;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) h4 {
  margin: 0 0 9px;
  font-size: 1.07rem;
}
body[data-route="walkthrough"] .walk-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 24px;
  margin: 0 0 18px;
  font-size: .9rem;
}
body[data-route="walkthrough"] .walk-overview p { flex: 1 1 420px; margin-bottom: 0; }
body[data-route="walkthrough"] .walk-overview .status-strip { margin: 0; }
body[data-route="walkthrough"] .walk-overview > details {
  flex: 0 1 265px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--route-line);
  border-radius: 10px;
  background: var(--walk-surface);
}
body[data-route="walkthrough"] .walk-overview > details > summary {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 9px;
  color: var(--route-accent-ink);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
}
body[data-route="walkthrough"] .walk-overview > details > summary:hover { background: #fff; }
body[data-route="walkthrough"] .walk-overview > details[open] > summary { border-bottom: 1px solid var(--route-line); border-radius: 9px 9px 0 0; }
body[data-route="walkthrough"] .walk-overview > details > :not(summary) { margin: 12px 14px; }
body[data-route="walkthrough"] .status-strip { align-items: center; }
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel, .walk-overview) .badge {
  line-height: 1.4;
  white-space: normal;
}

body[data-route="walkthrough"] .walk-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
body[data-route="walkthrough"] .walk-content { min-width: 0; }
body[data-route="walkthrough"] .walk-content > .walk-overview { margin-bottom: 12px; }
body[data-route="walkthrough"] .walk-index {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - var(--topbar-h) - 32px);
  min-height: 0;
  border: 1px solid var(--route-line);
  border-top: 4px solid var(--route-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--route-soft), #faf7f0 190px);
}
body[data-route="walkthrough"] .walk-index > header {
  padding: 12px 10px 10px;
  background: #fffdf7d9;
  border-bottom: 1px solid var(--route-line);
  backdrop-filter: blur(7px);
}
body[data-route="walkthrough"] .walk-index > header :is(h2, h3) {
  margin: 0;
  color: var(--route-deep);
  font: 700 1.1rem/1.3 var(--font-editorial);
}
body[data-route="walkthrough"] .walk-index > header p { margin: 6px 0 0; color: var(--ink-soft); font-size: .78rem; }
body[data-route="walkthrough"] .walk-list:not(.rg-list) {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 0;
  min-height: 0;
  max-height: 100%;
  padding: 8px 12px 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--route-line) transparent;
}
body[data-route="walkthrough"] a.walk-choice {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 43px;
  margin: 2px 0;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  font-size: .84rem;
  line-height: 1.45;
  text-decoration: none;
}
body[data-route="walkthrough"] .walk-choice strong { font-weight: 650; }
body[data-route="walkthrough"] .walk-choice:hover {
  border-color: var(--route-line);
  background: #ffffffbd;
  box-shadow: none;
}
body[data-route="walkthrough"] .walk-choice:is(.active, [aria-current="page"], [aria-current="true"], [aria-current="step"]) {
  border-color: var(--route-deep);
  color: white;
  background: var(--route-deep);
  box-shadow: inset 4px 0 var(--route-accent), 0 5px 14px #16232c20;
}
body[data-route="walkthrough"] .walk-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--route-accent-ink);
  background: var(--route-soft);
  font: 800 var(--type-caption)/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Register IDs match 03: plain monospace, not the reading pane's counters. */
body[data-route="walkthrough"] .walk-choice .walk-number {
  display: block; min-width: 2.2em; height: auto; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  font: 650 var(--type-ui)/var(--type-ui-leading) var(--font-code);
  text-align: left;
}
body[data-route="walkthrough"] .walk-choice:is(.active, [aria-current]) .walk-number { color: #fff2cb; }
body[data-route="walkthrough"] .walk-mobile-picker { display: none; }
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel):not(.rd-body):not(.walk-reading .walk-panel) {
  max-width: 100%;
  padding: clamp(20px, 2.35vw, 34px);
  border: 1px solid var(--route-line);
  border-top: 4px solid var(--route-accent);
  border-radius: 12px;
  background: var(--walk-surface);
  box-shadow: 0 5px 18px #183f4807;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] .walk-reading {
  height: auto;
  max-height: none;
  overflow: visible;
}
/* RG/RD owns the reader geometry, including its unboxed inner view. */
body[data-route="walkthrough"] #walkReadingBody > .walk-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-route="walkthrough"] :is(.walk-reading, .walk-panel, .walk-section, .walk-phase, .walk-helper, .walk-step, .walk-alternative, .walk-profile, .walk-dependencies > li) {
  scroll-margin-top: calc(var(--topbar-h) + 22px);
}
body[data-route="walkthrough"] .walk-chapter-head { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 13px; margin-bottom: 19px; }
body[data-route="walkthrough"] .walk-chapter-head > .walk-number {
  margin-top: 2px;
  padding: 0 4px;
  border: 1px solid var(--route-line);
  border-radius: 6px;
  background: var(--route-soft);
}
body[data-route="walkthrough"] .walk-chapter-head > div > p { color: var(--ink-soft); font-size: .88rem; }
body[data-route="walkthrough"] .walk-chapter-head .status-strip { margin: 10px 0 0; }
body[data-route="walkthrough"] .walk-lead { color: var(--ink-soft); font-size: 1.04rem; }
body[data-route="walkthrough"] :is(.walk-objective, .walk-checkpoint, .walk-warning, .walk-until) {
  margin: 20px 0;
  padding: 17px 19px;
  border: 1px solid #dfc8b3;
  border-left: 4px solid var(--walk-copper);
  border-radius: 10px;
  background: var(--walk-example);
}
body[data-route="walkthrough"] :is(.walk-objective, .walk-checkpoint, .walk-warning) > :last-child { margin-bottom: 0; }
body[data-route="walkthrough"] .walk-checkpoint { border-left-color: var(--route-accent); }
body[data-route="walkthrough"] .walk-checkpoint > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; }
body[data-route="walkthrough"] .walk-checkpoint p { margin-top: 9px; }
body[data-route="walkthrough"] .walk-warning { font-size: .92rem; }
body[data-route="walkthrough"] .walk-warning strong { color: var(--route-deep); }
body[data-route="walkthrough"] .walk-section { margin-top: 30px; padding-top: 25px; border-top: 1px solid #ded5c9; }
body[data-route="walkthrough"] .walk-prerequisites { margin-bottom: 25px; }
body[data-route="walkthrough"] .walk-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 24px;
}

/* Typed references use the same compact capsule and large action variants. */
body[data-route="walkthrough"] #routeContent a:is(.inter-ref, .walk-ref) {
  display: inline-block;
  min-width: 0;
  min-height: 24px;
  max-width: 100%;
  margin: 2px 0;
  padding: 1px 7px;
  border: 1px solid var(--route-line);
  border-radius: 999px;
  color: var(--route-accent-ink);
  background: var(--walk-surface);
  font-size: var(--type-inline-chip);
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] #routeContent .inter-emphasis { font-weight: 650; }
body[data-route="walkthrough"] #routeContent :is(.inter-code, .inter-command) {
  font-family: var(--font-code);
  font-size: .88em;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] #routeContent .inter-code { padding: 0; border: 0; color: inherit; background: transparent; }
body[data-route="walkthrough"] #routeContent .inter-command {
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--ink);
  background: #ece7db;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body[data-route="walkthrough"] #routeContent a:is(.inter-ref, .walk-ref) :is(code, kbd, .inter-code, .inter-command) {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: 1em;
  font-weight: inherit;
}
body[data-route="walkthrough"] .inter-ref-id { font-weight: 500; }
body[data-route="walkthrough"] :is(.walk-links, .walk-room-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 13px 0;
}
body[data-route="walkthrough"] #routeContent :is(.walk-links, .walk-room-row, .walk-jumps, .walk-sources .button-row) > :is(a, button),
body[data-route="walkthrough"] #routeContent :is(.walk-panel, .walk-reading) [data-open-doc],
body[data-route="walkthrough"] .walk-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--route-line);
  border-radius: 10px;
  color: var(--route-accent-ink);
  background: var(--walk-surface);
  font-size: var(--type-ui);
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] #routeContent a:is(.inter-ref, .walk-ref):is(:hover, :focus-visible),
body[data-route="walkthrough"] #routeContent :is(.walk-links, .walk-room-row, .walk-jumps, .walk-sources .button-row) > :is(a, button):is(:hover, :focus-visible),
body[data-route="walkthrough"] #routeContent :is(.walk-panel, .walk-reading) [data-open-doc]:is(:hover, :focus-visible),
body[data-route="walkthrough"] .walk-copy:is(:hover, :focus-visible) {
  border-color: var(--route-deep);
  color: var(--walk-surface);
  background: var(--route-deep);
  text-decoration: none;
}
body[data-route="walkthrough"] #routeContent :is(a.inter-ref, a.walk-ref, .walk-links a, .walk-jumps a, [data-open-doc]):is(:hover, :focus-visible) > :not(.evidence):not(.evidence-row) { color: inherit; }
body[data-route="walkthrough"] #routeContent :is(.walk-nav, .walk-overview, .walk-index, .walk-reading, .walk-panel) :where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--route-accent);
  outline-offset: 3px;
}

body[data-route="walkthrough"] .walk-phase { margin-top: 23px; }
body[data-route="walkthrough"] :is(.walk-phase, .walk-event, .walk-alternative, .walk-profile) > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px 16px;
  margin-bottom: 12px;
}
body[data-route="walkthrough"] :is(.walk-phase, .walk-event, .walk-alternative, .walk-profile) > header :is(h3, h4, .status-strip) { margin: 0; }
body[data-route="walkthrough"] .walk-facts { margin: 17px 0; }
body[data-route="walkthrough"] .walk-facts > div {
  display: grid;
  grid-template-columns: minmax(105px, 145px) minmax(0, 1fr);
  gap: 7px 14px;
  padding: 10px 0;
  border-bottom: 1px solid #e5ddd1;
}
body[data-route="walkthrough"] .walk-facts > div:last-child { border-bottom: 0; }
body[data-route="walkthrough"] .walk-facts dt { color: var(--ink-soft); font-size: .81rem; font-weight: 650; }
body[data-route="walkthrough"] .walk-facts dd { margin: 0; font-size: .9rem; line-height: 1.65; }
body[data-route="walkthrough"] .walk-commands {
  display: grid;
  gap: 13px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
body[data-route="walkthrough"] .walk-commands > .walk-step {
  margin: 0;
  padding: 18px 19px;
  border: 1px solid #ded5c9;
  border-left: 3px solid var(--route-line);
  border-radius: 11px;
  background: #fffefb;
}
body[data-route="walkthrough"] .walk-step > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
body[data-route="walkthrough"] .walk-step > header > .walk-number { border-radius: 5px; background: var(--route-soft); }
body[data-route="walkthrough"] .walk-who { flex: 1; line-height: 1.6; }
body[data-route="walkthrough"] .walk-who > span { margin-right: 6px; color: var(--ink-soft); font-size: .82rem; }
body[data-route="walkthrough"] .walk-command-line { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 12px 0; }
body[data-route="walkthrough"] .walk-command-line .command-box {
  flex: 1 1 170px;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d7cdbb;
  border-radius: 8px;
  color: var(--ink);
  background: #ece7db;
  font: 650 .94rem/1.55 var(--font-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body[data-route="walkthrough"] .walk-copy { flex: 0 0 auto; }
body[data-route="walkthrough"] .walk-step :is(.walk-condition, .walk-note, .walk-until) { margin: 12px 0 0; font-size: .91rem; line-height: 1.7; }
body[data-route="walkthrough"] .walk-condition { color: var(--ink-soft); }
body[data-route="walkthrough"] .walk-step-time { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; font-size: .83rem; }
body[data-route="walkthrough"] .walk-until { padding: 12px 14px; }
body[data-route="walkthrough"] .walk-events { display: grid; gap: 14px; }
body[data-route="walkthrough"] .walk-event {
  padding: 18px 19px;
  border: 1px solid var(--route-line);
  border-left: 3px solid var(--route-accent);
  border-radius: 11px;
  background: var(--walk-surface);
}
body[data-route="walkthrough"] .walk-event .walk-facts { margin-bottom: 0; }
body[data-route="walkthrough"] .walk-dialogue {
  margin: 15px 0;
  padding: 18px 20px;
  border: 1px solid #dfc8b3;
  border-left: 4px solid var(--walk-copper);
  border-radius: 11px;
  background: var(--walk-example);
}
body[data-route="walkthrough"] .walk-dialogue header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-bottom: 11px; }
body[data-route="walkthrough"] .walk-dialogue header > span { color: var(--ink-soft); font-size: .78rem; }
body[data-route="walkthrough"] .walk-dialogue header .evidence-row { margin-left: auto; }
body[data-route="walkthrough"] .walk-dialogue blockquote { max-width: 75ch; margin: 0 0 12px; font: 1.06rem/1.7 var(--font-editorial); }
body[data-route="walkthrough"] .walk-dialogue.speech > p { font: 1.06rem/1.7 var(--font-editorial); }
body[data-route="walkthrough"] .walk-dialogue small { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.65; }
body[data-route="walkthrough"] .walk-dialogue.paraphrase { border-left-style: dashed; }
body[data-route="walkthrough"] .walk-dialogue.narration { background: #fcf9f2; }

body[data-route="walkthrough"] :is(.walk-technical, .walk-limits) {
  margin-top: 19px;
  border: 1px solid var(--route-line);
  border-radius: 10px;
  background: var(--walk-surface);
}
body[data-route="walkthrough"] :is(.walk-technical, .walk-limits) > summary {
  min-height: 44px;
  padding: 11px 15px;
  border-radius: 9px;
  color: var(--route-accent-ink);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.6;
  cursor: pointer;
}
body[data-route="walkthrough"] :is(.walk-technical, .walk-limits) > summary:hover { background: #fff; }
body[data-route="walkthrough"] :is(.walk-technical, .walk-limits)[open] > summary { border-bottom: 1px solid var(--route-line); border-radius: 9px 9px 0 0; }
body[data-route="walkthrough"] :is(.walk-technical, .walk-limits) > :not(summary) { margin: 15px; }
body[data-route="walkthrough"] .walk-proof-list { display: grid; gap: 14px; }
body[data-route="walkthrough"] .walk-proof-list > article + article { padding-top: 14px; border-top: 1px solid #e0d4c6; }
body[data-route="walkthrough"] .walk-proof-list header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
body[data-route="walkthrough"] .walk-proof-list p { margin-bottom: 0; font-size: .88rem; }
body[data-route="walkthrough"] .walk-alternative {
  margin-top: 15px;
  padding: 20px;
  border: 1px solid var(--route-line);
  border-left: 3px solid var(--route-accent);
  border-radius: 11px;
  background: #fdfaf5;
}
body[data-route="walkthrough"] .walk-branch-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 17px; }
body[data-route="walkthrough"] .walk-branch-columns section > strong { color: var(--ink-soft); font-size: .84rem; }
body[data-route="walkthrough"] .walk-branch-columns h5 { margin: 0 0 9px; color: var(--ink-soft); font-size: .88rem; font-weight: 700; line-height: 1.5; }
body[data-route="walkthrough"] .walk-branch-columns :is(ul, ol) { margin: 9px 0 0; font-size: .91rem; }
body[data-route="walkthrough"] .walk-failures { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--route-line); border-left: 4px solid var(--route-accent); border-radius: 11px; background: #fbf3ef; }
body[data-route="walkthrough"] .walk-failures > :last-child { margin-bottom: 0; }
body[data-route="walkthrough"] .walk-sources { margin-top: 29px; padding-top: 22px; border-top: 1px solid var(--route-line); }
body[data-route="walkthrough"] .walk-sources .button-row { gap: 9px; margin: 12px 0 0; }
body[data-route="walkthrough"] .walk-reading .mechanic-note { border-left-color: var(--route-accent); border-radius: 11px; background: var(--walk-surface); }
body[data-route="walkthrough"] .walk-reading .mechanic-note summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
body[data-route="walkthrough"] .walk-panel > header { margin-bottom: 26px; }
body[data-route="walkthrough"] .walk-panel > header p { color: var(--ink-soft); }
body[data-route="walkthrough"] .walk-panel > h2 { margin-top: 28px; font-size: clamp(1.3rem, 2vw, 1.7rem); }
body[data-route="walkthrough"] .walk-helper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
body[data-route="walkthrough"] .walk-helper { padding: 21px; border: 1px solid var(--route-line); border-top: 3px solid var(--route-accent); border-radius: 11px; background: #fffefb; }
body[data-route="walkthrough"] .walk-helper > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 9px 13px; margin-bottom: 13px; }
body[data-route="walkthrough"] .walk-helper > header h3 { margin: 0; font-size: 1.14rem; }
body[data-route="walkthrough"] .walk-time-label { display: block; margin: 0 0 10px; color: var(--route-accent-ink); font-size: .9rem; font-weight: 700; }
body[data-route="walkthrough"] .walk-helper > :last-child { margin-bottom: 0; }
body[data-route="walkthrough"] .walk-dependencies { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body[data-route="walkthrough"] .walk-dependencies > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 17px; margin: 0; padding: 22px 0; border-top: 1px solid #e1d5c8; }
body[data-route="walkthrough"] .walk-dependencies > li:first-child { border-top: 0; padding-top: 0; }
body[data-route="walkthrough"] .walk-dependencies > li > .walk-number { align-self: start; border: 1px solid var(--route-line); background: var(--route-soft); }
body[data-route="walkthrough"] .walk-dependencies > li p:last-child { margin-bottom: 0; }
body[data-route="walkthrough"] .walk-profile-list { display: grid; gap: 18px; }
body[data-route="walkthrough"] .walk-profile { padding: 23px; border: 1px solid var(--route-line); border-left: 3px solid var(--route-accent); border-radius: 11px; background: #fffefb; }
body[data-route="walkthrough"] .walk-profile .walk-links { margin-bottom: 0; }

@media (max-width: 1000px) and (min-width: 721px) {
  body[data-route="walkthrough"] .walk-workspace { grid-template-columns: 220px minmax(0, 1fr); gap: 15px; }
  body[data-route="walkthrough"] .walk-branch-columns { grid-template-columns: minmax(0, 1fr); }
  body[data-route="walkthrough"] .walk-facts > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

@media (max-width: 720px) {
  body[data-route="walkthrough"] .walk-nav { gap: 7px; margin-bottom: 16px; padding-bottom: 13px; }
  body[data-route="walkthrough"] .walk-nav > a { flex: 1 1 calc(50% - 7px); padding: 9px 10px; font-size: .81rem; }
  body[data-route="walkthrough"] .walk-workspace { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  body[data-route="walkthrough"] .walk-index { position: static; display: block; max-height: none; padding: 13px 15px; border-top-width: 3px; }
  body[data-route="walkthrough"] .walk-index > header,
  body[data-route="walkthrough"] .walk-list:not(.rg-list) { display: none; }
  body[data-route="walkthrough"] .walk-mobile-picker { display: grid; gap: 7px; }
  body[data-route="walkthrough"] .walk-mobile-picker label { color: var(--route-deep); font-size: .84rem; font-weight: 650; }
  body[data-route="walkthrough"] .walk-mobile-picker select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 34px 9px 11px; border: 1px solid var(--route-line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 1rem; }
  body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) { padding: 22px 19px; }
  body[data-route="walkthrough"] .walk-branch-columns { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  body[data-route="walkthrough"] .walk-facts > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  body[data-route="walkthrough"] .walk-helper-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-route="walkthrough"] .walk-section { margin-top: 25px; padding-top: 23px; }
  body[data-route="walkthrough"] :not([hidden]) > .walk-overview { margin-bottom: 15px; }
}

@media (max-width: 390px) {
  body[data-route="walkthrough"] :is(.walk-reading, .walk-panel) { padding: 20px 13px; }
  body[data-route="walkthrough"] :is(.walk-objective, .walk-checkpoint, .walk-warning, .walk-event, .walk-dialogue, .walk-alternative, .walk-failures, .walk-helper, .walk-profile) { padding: 15px 13px; }
  body[data-route="walkthrough"] .walk-commands > .walk-step { padding: 15px 12px; }
  body[data-route="walkthrough"] .walk-step > header { gap: 8px; }
  body[data-route="walkthrough"] .walk-dependencies > li { grid-template-columns: 29px minmax(0, 1fr); gap: 10px; }
  body[data-route="walkthrough"] .walk-nav > a { font-size: .78rem; }
}

/* Short windows use the native picker too, avoiding a trapped index scroll. */
@media (max-height: 580px) {
  body[data-route="walkthrough"] .walk-workspace { grid-template-columns: minmax(0, 1fr); }
  body[data-route="walkthrough"] .walk-index { position: static; display: block; max-height: none; padding: 12px 15px; }
  body[data-route="walkthrough"] .walk-index > header,
  body[data-route="walkthrough"] .walk-list:not(.rg-list) { display: none; }
  body[data-route="walkthrough"] .walk-mobile-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
  body[data-route="walkthrough"] .walk-mobile-picker label { color: var(--route-deep); font-size: .84rem; font-weight: 650; }
  body[data-route="walkthrough"] .walk-mobile-picker select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 34px 9px 11px; border: 1px solid var(--route-line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 1rem; }
}

@media (max-height: 580px) and (max-width: 720px) {
  body[data-route="walkthrough"] .walk-mobile-picker { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="walkthrough"] :is(.walk-nav, .walk-index, .walk-reading, .walk-panel) * { transition: none; animation: none; scroll-behavior: auto; }
}

/* Shared Petrol controls: full-size standalone names, compact references in
   prose, equal document actions. Evidence and warning colors stay semantic. */
body[data-route="walkthrough"] #routeContent :is(.walk-room-row, .walk-links) > a:is(.chip, .walk-ref, .inter-ref) {
  padding: 8px 12px; gap: 6px; border-radius: 999px;
  font: 650 var(--type-ui)/var(--type-ui-leading) var(--font-ui);
}
body[data-route="walkthrough"] .walk-index > header { display: grid; gap: 10px; }
body[data-route="walkthrough"] .walk-filter { display: grid; gap: 6px; }
body[data-route="walkthrough"] .walk-index :is(input, select) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--route-line); border-radius: 10px;
  color: var(--route-accent-ink); background: var(--walk-surface);
}
body[data-route="walkthrough"] .walk-index select { padding-right: 32px; }
body[data-route="walkthrough"] .walk-index input {
  padding: 8px 11px; border-color: var(--line); border-radius: 8px;
  color: var(--ink); background: white;
}
body[data-route="walkthrough"] .walk-index :is(input, select):hover { border-color: var(--route-accent); }
body[data-route="walkthrough"] .walk-list:not(.rg-list) .walk-choice[hidden] { display: none; }
body[data-route="walkthrough"] .walk-empty { margin: 0; padding: 10px; color: var(--ink-soft); }
body[data-route="walkthrough"] .walk-list:not(.rg-list) { scrollbar-color: var(--route-accent) var(--route-soft); }
@media (max-width: 900px), (max-height: 650px) {
  body[data-route="walkthrough"] .walk-workspace { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  body[data-route="walkthrough"] .walk-index { position: static; display: block; max-height: none; padding: 13px 15px; }
  body[data-route="walkthrough"] .walk-index > header { display: grid; padding: 0 0 12px; }
  body[data-route="walkthrough"] .walk-index > header h2 { display: none; }
  body[data-route="walkthrough"] .walk-list:not(.rg-list) { display: none; }
  body[data-route="walkthrough"] .walk-mobile-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  body[data-route="walkthrough"] .walk-nav { gap: 6px; padding: 8px 12px; }
  body[data-route="walkthrough"] .walk-nav > a { padding: 8px 12px; }
}