:root, html[data-theme="day"] {
  --paper: #FBF7F2;
  --paper-mist: #F6F2EC;
  --clean: #FFFFFF;
  --ink: #1A1A1A;
  --warm-grey: #6B635B;
  --stone: #B8B0A8;
  --stone-light: #D4CFC8;
  --stone-faint: #E8E4DE;
  --teal: #1e555c;
  --teal-wash: #e2f0ee;
  --terracotta: #C0663C;
  --terracotta-wash: #F5EBE3;
  --down: #9B2E2E;
  --down-wash: #F6E4E0;
  --display: "Newsreader", Georgia, serif;
  --body: "Work Sans", system-ui, sans-serif;
}

html[data-theme="night"] {
  --paper: #161310;
  --paper-mist: #1C1814;
  --clean: #1F1A16;
  --ink: #F6F0E8;
  --warm-grey: #A89F94;
  --stone: #6B635B;
  --stone-light: #3A342E;
  --stone-faint: #2A251F;
  --teal: #8FBEB8;
  --teal-wash: #243836;
  --terracotta: #D4784A;
  --terracotta-wash: #3A2418;
  --down: #E07A6A;
  --down-wash: #3A221C;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; color: inherit; }
button {
  cursor: pointer;
  border-radius: 0;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--teal); }

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.note {
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#chrome {
  min-width: 0;
}

.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - 32px);
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 28px 20px 40px;
  border-right: 1px solid var(--stone-light);
  background: var(--paper);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--terracotta);
}

html[data-theme="night"] .brand { color: #FBF7F2; }

.brand svg { display: block; width: 44px; height: 18px; }

.brand-sub {
  margin: 10px 0 0;
  color: var(--warm-grey);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.run-date {
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}
.run-date strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--terracotta);
}

.nav-kicker {
  margin: 28px 0 8px;
  color: var(--warm-grey);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rail nav {
  display: grid;
  gap: 2px;
}

.rail nav a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 8px 10px 6px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
}

.rail nav a[aria-current="page"] {
  border-left-color: var(--terracotta);
  background: var(--terracotta-wash);
}

.nav-n {
  font-family: var(--display);
  font-style: italic;
  color: var(--terracotta);
  font-size: 16px;
  line-height: 1.2;
}

.nav-copy { display: grid; gap: 2px; }
.nav-label { line-height: 1.2; }
.nav-hint {
  color: var(--warm-grey);
  font-size: 11px;
  line-height: 1.3;
}

.toggles {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}

.toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--stone-light);
}

.toggle button {
  display: grid;
  place-items: center;
  padding: 8px 6px;
  color: var(--warm-grey);
}

.toggle button[aria-pressed="true"] {
  background: var(--terracotta-wash);
  color: var(--ink);
}

.toggle-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.toggle-flag svg {
  width: 22px;
  height: 15px;
  display: block;
  border: 1px solid var(--stone-faint);
}

.rail-foot {
  margin-top: 28px;
  color: var(--warm-grey);
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme="night"] .stamp[data-n="2"] {
  background: var(--terracotta);
  color: var(--paper);
}

.stage {
  padding: 40px 56px 88px;
  max-width: 880px;
}

.stage-wide {
  max-width: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--terracotta);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
}

h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.12;
}

.lede {
  max-width: 46ch;
  margin: 0 0 28px;
  color: var(--ink);
}

.muted { color: var(--warm-grey); }

.depths {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--stone-light);
}

.depths button {
  padding: 10px 16px 12px;
  color: var(--warm-grey);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.depths button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--terracotta);
}

.floor-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: end;
  margin: 8px 0 28px;
}

.floor-num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(88px, 16vw, 140px);
  line-height: 0.8;
  color: var(--terracotta);
}

.floor-meta { padding-bottom: 8px; }
.floor-meta p { margin: 0 0 6px; max-width: 36ch; }

.panel {
  margin: 0 0 22px;
  padding: 22px 24px 20px;
  background: var(--clean);
  border: 1px solid var(--stone-light);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--stone-faint);
  margin: 28px 0;
}

.face-row,
.crit-row {
  display: grid;
  grid-template-columns: 52px 1fr auto 18px;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border-bottom: 1px solid var(--stone-faint);
  align-items: baseline;
  cursor: pointer;
  pointer-events: auto;
}

.face-row:hover .face-name,
.crit-row:hover .crit-title { color: var(--teal); }

.chev {
  color: var(--terracotta);
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}

.face-row[aria-expanded="true"] .chev,
.crit-row[aria-expanded="true"] .chev { transform: rotate(90deg); }

.face-id, .crit-id {
  font-family: var(--display);
  font-style: italic;
  color: var(--terracotta);
  font-size: 18px;
}

.face-name { font-size: 16px; }
.face-ask, .crit-name { color: var(--warm-grey); font-size: 13px; margin: 2px 0 0; }

.lvl {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  min-width: 1.4ch;
  text-align: right;
}

.lvl.is-floor { color: var(--terracotta); }

.stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 8px 0 0;
}

.stamp {
  width: 18px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--paper-mist);
  color: var(--ink);
  font-family: var(--display);
  font-style: italic;
  font-size: 11px;
}

.stamp[data-n="2"] { background: var(--ink); color: var(--paper); }
.stamp[data-n="7"] { background: var(--teal); color: var(--paper); }
.stamp[data-n="6"] { background: var(--terracotta-wash); }

.progress-line {
  margin: 8px 0 0;
  color: var(--warm-grey);
  font-size: 13px;
}

.criteria { padding: 0 0 12px 52px; }
.crit-row { grid-template-columns: 64px 1fr auto; cursor: pointer; }
.crit-row:hover .crit-title { color: var(--teal); }

.detail {
  padding: 8px 0 20px 52px;
  max-width: 58ch;
}

.detail h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.probes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.probes li {
  position: relative;
  padding: 4px 0 4px 14px;
  color: var(--warm-grey);
  font-size: 13px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.probes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--terracotta);
}

.was {
  color: var(--stone);
  text-decoration: line-through;
  font-size: 16px;
  margin-right: 8px;
}

.fix ol { margin: 0; padding: 0 0 0 1.1em; }
.fix li { margin: 0 0 10px; }
.fix a { color: var(--teal); }

.todo { margin-top: 8px; }
.todo-cap { margin: 0 0 28px; }

.todo-conc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: end;
  margin: 0 0 28px;
  padding: 22px 24px 20px;
  background: var(--clean);
  border: 1px solid var(--stone-light);
  border-left: 3px solid var(--terracotta);
  text-decoration: none;
}
.todo-conc-id {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(48px, 8vw, 72px);
  line-height: 0.85;
  color: var(--terracotta);
}
.todo-conc-name {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  margin-bottom: 6px;
}
.todo-conc p { margin: 0; max-width: 42ch; color: var(--warm-grey); font-size: 15px; }
.todo-conc:hover .todo-conc-name { color: var(--teal); }

.prio-band-block { margin: 0 0 22px; }
.prio-band {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-grey);
}
.prio-band-block[data-band="high"] .prio-band { color: var(--terracotta); }
.prio-band-block[data-band="medium"] .prio-band { color: var(--teal); }

.prio {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--stone-faint);
  text-decoration: none;
}
.prio:hover .face-name { color: var(--teal); }

@media (max-width: 860px) {
  .todo-conc { grid-template-columns: 1fr; gap: 8px; }
}

.scale {
  display: grid;
  gap: 0;
}

.scale-row {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--stone-faint);
  font-size: 14px;
}

.scale-n {
  font-family: var(--display);
  font-style: italic;
  color: var(--terracotta);
}

.mx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mx-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--warm-grey);
}

.mx-key::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--stone-faint);
}

.mx-key.mx-up { color: var(--teal); }
.mx-key.mx-up::before { background: var(--teal); }
.mx-key.mx-down { color: var(--down); }
.mx-key.mx-down::before { background: var(--down); }

.mx-wrap {
  overflow: auto;
  margin: 0 0 48px;
  background: var(--clean);
  border: 1px solid var(--stone-light);
  max-height: calc(100vh - 180px);
}

.mx {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.mx th,
.mx td {
  padding: 0;
  border-bottom: 1px solid var(--stone-faint);
  border-right: 1px solid var(--stone-faint);
  text-align: center;
  vertical-align: middle;
  background: var(--clean);
}

.mx thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: var(--clean);
  white-space: nowrap;
}

.mx thead th:first-child,
.mx tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 400;
  padding: 8px 16px 8px 18px;
  white-space: nowrap;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx thead th:first-child { z-index: 3; }

.mx tbody th a {
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx tbody th a:hover .mx-name,
.mx tbody th a:hover .crit-id { color: var(--teal); }

.mx-name {
  color: var(--warm-grey);
  font-size: 13px;
}

.mx-face th {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  text-align: left;
  padding: 16px 18px 8px;
  background: var(--paper-mist);
  position: sticky;
  left: 0;
}

.mx-floor th { font-family: var(--display); font-style: italic; }

.mx-cell {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 4.8rem;
  min-height: 2.8em;
  text-decoration: none;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

.mx-cell.mx-up {
  color: var(--teal);
  background: var(--teal-wash);
}

.mx-cell.mx-down {
  color: var(--down);
  background: var(--down-wash);
}

.mx-cell.is-floor {
  box-shadow: inset 0 -2px 0 var(--terracotta);
}

.mx-cell:hover { color: var(--ink); }

.mx thead th a { text-decoration: none; }
.mx thead th a:hover { color: var(--teal); }

#runs-heading {
  margin: 8px 0 12px;
  font-size: clamp(22px, 3vw, 30px);
}

.run-list { display: grid; gap: 0; }
.run-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--stone-faint);
  text-decoration: none;
  cursor: pointer;
}

.run-link:hover h2 { color: var(--teal); }
.run-link h2 { margin: 0; font-size: 28px; }
.run-kind { color: var(--terracotta); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.howto {
  margin-top: 40px;
  color: var(--warm-grey);
  font-size: 14px;
}

.howto code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  background: var(--terracotta-wash);
  padding: 1px 4px;
}

.hidden { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--stone-light);
    padding: 18px 20px;
  }
  .rail nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 14px;
  }
  .rail nav a { border-left: 0; padding: 6px 0; }
  .rail nav a[aria-current="page"] { background: none; border-bottom: 2px solid var(--terracotta); }
  .stage { padding: 28px 20px 64px; }
  .mx-name { display: none; }
  .mx tbody th,
  .mx thead th:first-child { max-width: 8ch; padding-left: 12px; padding-right: 10px; }
  .mx-wrap { max-height: none; }
  .floor-hero { grid-template-columns: 1fr; gap: 8px; }
  .criteria, .detail { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}