/* Fixed For You: one stylesheet for the landing page and the ring ledger. */

:root {
  color-scheme: dark;
  /* ground and ink: warm charcoal, phosphor amber */
  --ground: #181510;
  --ground-2: #201c16;
  --ground-3: #2a251d;
  --rule: #3a3329;
  --rule-2: #4d4538;
  --ink: #f2e9d6;
  --ink-2: #c4b9a2;
  --ink-3: #958b77;
  --amber: #ffb238;
  --amber-hi: #ffc766;
  --amber-deep: #a8742a;
  --on-amber: #1d1407;
  --fault: #ff8577;

  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing: 4-based */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --gutter: clamp(20px, 4vw, 48px);
  --max: 1320px;
  --header: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 178, 56, .18);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
  background: var(--ground);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100vh;
}

img, svg, canvas { display: block; max-width: 100%; }

p { margin: 0; }

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--amber-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
a:hover { color: var(--amber); text-decoration-color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
[tabindex="-1"]:focus { outline: none; }

code {
  font-family: var(--mono);
  font-size: 0.82em;
  font-stretch: 87.5%;
  color: var(--ink);
  background: var(--ground-3);
  padding: 0.08em 0.36em;
  white-space: nowrap;
}

strong { font-weight: 700; color: var(--ink); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(24, 21, 16, .94);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .top { background: rgba(24, 21, 16, .82); backdrop-filter: blur(8px); }
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: var(--header);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.brand-cell {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--amber);
  color: var(--on-amber);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--amber); }
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--amber);
}

/* ---------- type ---------- */

.h2 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-lede {
  color: var(--ink-2);
  max-width: 38em;
  margin-top: var(--s4);
  text-wrap: pretty;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn-primary { background: var(--amber); color: var(--on-amber); }
.btn-primary:hover { background: var(--amber-hi); color: var(--on-amber); }
.btn-primary:focus-visible { outline-color: var(--ink); }
.btn-quiet { border-color: var(--ink-3); color: var(--ink); }
.btn-quiet:hover { border-color: var(--amber); color: var(--amber); }
.btn:active { transform: translateY(1px); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(var(--s6), 5vh, var(--s8));
}
.hero::before {
  /* the glow of the screen behind the ring */
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 70%;
  height: 100%;
  background: radial-gradient(45% 50% at 62% 46%, rgba(255, 178, 56, .075), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". ring" "title ring" "copy ring" ". ring";
  column-gap: var(--s7);
  align-items: center;
}
.hero-title { grid-area: title; }
.hero-grid > .ring { grid-area: ring; }
.hero-copy { grid-area: copy; }

.hero-title {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.15rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
  margin: 0 0 var(--s6);
}

.caret {
  display: inline-block;
  width: 0.5em;
  height: 0.78em;
  margin-left: 0.1em;
  vertical-align: -0.04em;
  background: var(--amber);
}
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: blink 1.1s steps(2, start) 4; }
}
@keyframes blink { to { visibility: hidden; } }

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 31em;
  text-wrap: pretty;
}
.lede-strong {
  margin-top: var(--s4);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 31em;
  padding-left: var(--s4);
  border-left: 2px solid var(--amber);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.hero-facts {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-facts li { display: flex; align-items: baseline; gap: 10px; }
.fact-cell {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ink-3);
  transform: translateY(-1px);
}
.fact-cell--amber { background: var(--amber); }

/* ---------- the ring ---------- */

.ring { margin: 0; min-width: 0; }

.ring-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 560;
  --cx: 50%;
  --cy: 49%;
  --lrx: 31%;
  --lry: 40%;
}

.ring-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ring-fallback {
  /* scripts off: a dotted ring stands in for the character ring */
  position: absolute;
  left: 50%;
  top: 49%;
  width: 46%;
  height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px dotted var(--rule-2);
  box-shadow: 0 0 0 18px var(--ground-2) inset;
}
.ring-stage.is-drawn .ring-fallback { display: none; }

.ring-labels { list-style: none; margin: 0; padding: 0; }

.ring-label {
  --a: calc(-90deg + var(--k) * 45deg);
  position: absolute;
  left: calc(var(--cx) + var(--lrx) * cos(var(--a)));
  top: calc(var(--cy) + var(--lry) * sin(var(--a)));
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--ink-3);
  white-space: nowrap;
  transform: translate(0, -50%);
  transition: color .2s var(--ease);
}
.ring-label[data-side="left"] { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.ring-label[data-side="top"] { transform: translate(-50%, -100%); }
.ring-label[data-side="bottom"] { transform: translate(-50%, 0); }

.ring-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule-2);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ring-label.is-past { color: var(--ink-2); }
.ring-label.is-past .ring-num { background: var(--ink-2); border-color: var(--ink-2); color: var(--ground); }
.ring-label.is-current { color: var(--amber); }
.ring-label.is-current .ring-num { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }

.ring-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--amber);
  background: var(--ground);
  border: 1px solid var(--amber-deep);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.ring-stage.is-drawn .ring-tag { opacity: 1; }

.ring-readout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s3);
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--rule);
  min-height: 96px;
}

.ring-now { min-width: 0; flex: 1; }
.ring-now-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.ring-now-num { color: var(--ink-3); font-size: 0.8125rem; }
.ring-now-name { color: var(--amber); font-weight: 500; }
.ring-now-text {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34em;
}

.ring-controls { display: flex; gap: 6px; flex: none; }
.ring-controls[hidden] { display: none; }

.ctl {
  appearance: none;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-3);
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.ctl span { font-size: 1.25rem; line-height: 1; }
.ctl:hover { border-color: var(--amber); color: var(--amber); }
.ctl-play { min-width: 76px; }

/* ---------- sections ---------- */

.section {
  padding-block: clamp(var(--s8), 10vw, var(--s10));
  border-top: 1px solid var(--rule);
}

.section-head { max-width: 46rem; margin-bottom: var(--s7); }

/* how one ring runs */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s7);
}
.how-sticky { position: sticky; top: calc(var(--header) + var(--s6)); }
.how-ring { margin-top: var(--s6); }
.how-ring-caption {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  min-height: 1.5em;
}
.how-ring-caption b { color: var(--amber); font-weight: 500; }

.stations {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--s2) var(--s5);
  padding-bottom: var(--s7);
}
.station::before {
  /* the ring, unrolled: a rail joining the stations */
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  border-left: 2px dotted var(--rule-2);
}
.station:last-child::before { display: none; }
.station:last-child { padding-bottom: 0; }

.station-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--ink-3);
  background: var(--ground);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.station.is-here .station-num { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }

.station-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 8px 0 var(--s3);
}
.station-body p { color: var(--ink-2); max-width: 36em; }

.substeps { margin: 0; display: grid; gap: var(--s3); }
.substeps > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); }
.substeps dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  padding-top: 0.25em;
}
.substeps dd { margin: 0; color: var(--ink-2); }

.leaves {
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.leaves-title { color: var(--ink-3); margin-bottom: var(--s2); }
.leaves ul { list-style: none; margin: 0; padding: 0 0 0 var(--s3); border-left: 1px solid var(--amber-deep); }
.leaves li { color: var(--ink-2); padding: 3px 0; }
.leaves code { background: none; padding: 0; font-size: 1em; }

/* guardrails */

.guard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7) var(--s8);
}

.fences, .ifthen { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.fences li, .ifthen li {
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.fences li:last-child, .ifthen li:last-child { border-bottom: 1px solid var(--rule); }
.fences p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.fence-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.where {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.75rem !important;
  color: var(--ink-3) !important;
}
.where code { font-size: 1em; }

.ifthen .if { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.ifthen .then { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.ifthen .k {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--amber);
  margin-right: 6px;
}
.ifthen .then .k { color: var(--ink-3); }
.ifthen .shows {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.ifthen .shows code { font-size: 1em; }

/* numbers */

.numbers-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s7) var(--s8);
  align-items: start;
}
.numbers .section-head { margin-bottom: 0; }
.numbers-built { margin-top: var(--s4); font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.numbers-built:empty, .ledger-built:empty { display: none; }
.numbers-note { margin-top: var(--s4); color: var(--ink-2); font-size: 1rem; max-width: 34em; }
.numbers .btn { margin-top: var(--s5); }

.readout-box {
  background: var(--ground-2);
  border: 1px solid var(--rule);
  padding: var(--s5) var(--s6);
}

.readout { margin: 0; font-family: var(--mono); }
.readout-row {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  grid-template-areas: "dt lead v" "n n n";
  align-items: baseline;
  column-gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.readout-row:last-child { border-bottom: 0; }
.readout-row::after {
  /* dot leader between the name and the value */
  content: "";
  grid-area: lead;
  align-self: end;
  height: 1px;
  margin-bottom: 0.4em;
  background-image: radial-gradient(circle, var(--rule-2) 1px, transparent 1.4px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
.readout dt { grid-area: dt; font-size: 0.875rem; color: var(--ink-2); }
.readout dd { display: contents; }
.readout .v {
  grid-area: v;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.readout .n {
  grid-area: n;
  font-family: var(--text);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 4px;
}
.readout .n:empty { display: none; }
.readout .v.is-none { color: var(--ink-3); font-size: 1rem; font-weight: 400; }
.readout-box[aria-busy="true"] .v { color: var(--ink-3); }
.readout-msg { margin-top: var(--s4); font-size: 1rem; color: var(--ink-2); }
.readout-msg[hidden] { display: none; }
.readout-box.is-error .readout { display: none; }
.readout-box.is-error .readout-msg { margin-top: 0; }
.readout-msg .msg-title { font-family: var(--mono); font-weight: 500; color: var(--fault); display: block; margin-bottom: 6px; font-size: 0.9375rem; }

/* check it yourself */

.check-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s7) var(--s8);
  align-items: start;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.checks li { border-bottom: 1px solid var(--rule); }
.checks li:nth-child(odd) { border-right: 1px solid var(--rule); }

.check-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: var(--s5) var(--s5) var(--s5) 0;
  text-decoration: none;
  color: var(--ink);
}
.checks li:nth-child(even) .check-link { padding-left: var(--s5); }
.check-name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-color: var(--amber-deep);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.check-desc { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.check-url {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.check-link:hover .check-name { color: var(--amber); text-decoration-color: var(--amber); }
.check-link:hover { color: var(--ink); }

.aside p, .aside li { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.aside p { margin-top: var(--s3); }
.aside-gap { margin-top: var(--s7); }
.plain { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.plain li { padding: 10px 0 10px 18px; position: relative; }
.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.12em;
  width: 7px;
  height: 7px;
  background: var(--ink-3);
}

/* footer */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6) var(--s7);
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
}
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.875rem; color: var(--ink); }
.foot-brand .brand-cell { width: 22px; height: 22px; font-size: 13px; }
.foot-text { flex: 1; min-width: 16rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; font-family: var(--mono); font-size: 0.8125rem; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--amber); }

/* ---------- the small character ring (ledger rows, how-section) ---------- */

.mring {
  --cell: 10px;
  display: inline-grid;
  grid-template-columns: repeat(11, var(--cell));
  grid-template-rows: repeat(11, var(--cell));
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--cell) * 0.86);
  font-weight: 500;
  line-height: 1;
  user-select: none;
}
.mring--lg { --cell: 18px; }
.mring .m { display: grid; place-items: center; width: var(--cell); height: var(--cell); }
.m-track { color: var(--rule-2); font-size: calc(var(--cell) * 1.1); }
.m-track-on { color: var(--ink-2); font-size: calc(var(--cell) * 1.1); }
.m-off { color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--ink-3); }
.m-on { background: var(--ink-2); color: var(--ground); }
.m-you { background: var(--amber); color: var(--on-amber); box-shadow: 0 0 10px rgba(255, 178, 56, .55); }
.m-fault { color: var(--fault); font-weight: 600; font-size: calc(var(--cell) * 1.3); }
.m-ask { color: var(--amber); font-weight: 600; font-size: calc(var(--cell) * 1.3); }
.mring--lg .m-on, .mring--lg .m-off, .mring--lg .m-you { font-size: 11px; }
.mring--lg .m-off { box-shadow: inset 0 0 0 1px var(--rule-2); }

/* ---------- ring ledger page ---------- */

.ledger-head {
  padding-block: clamp(var(--s7), 7vw, var(--s9)) var(--s6);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6) var(--s8);
  align-items: end;
}
.ledger-title {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin: 0;
}
.ledger-lede { margin-top: var(--s4); color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.ledger-built { margin-top: var(--s4); font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); min-height: 1.4em; }

.legend {
  --cell: 18px;
  margin: 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.legend-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: -12px 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.legend-title::-webkit-details-marker { display: none; }
.legend-title::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
}
.legend[open] .legend-title::after { transform: translateY(2px) rotate(-135deg); }
.legend[open] .legend-title { margin-bottom: var(--s2); }
.legend:not([open]) { padding-bottom: 4px; }
.legend dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.legend dt { display: flex; }
.legend dd { margin: 0; line-height: 1.4; }
.legend .m { display: grid; place-items: center; width: 18px; height: 18px; font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}
.filters[hidden] { display: none; }
.filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--ink-3);
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink-3); }
.filter[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--ground-2); }
.filter .count { color: var(--ink-3); }
.filter[aria-pressed="true"] .count { color: var(--amber); }

.rings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.ring-row { border-bottom: 1px solid var(--rule); }
.ring-row[hidden] { display: none; }

.row-main {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  grid-template-areas: "ring body action";
  gap: var(--s2) var(--s6);
  padding-block: var(--s6);
  align-items: start;
}
.row-main .mring { grid-area: ring; margin-top: 2px; }
.row-body { grid-area: body; min-width: 0; }
.row-action { grid-area: action; align-self: center; }

.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.row-iid { color: var(--ink-2); }
/* small standalone links get a 44px hit area without changing the layout */
a.row-iid, .attempts a, .tl-text a {
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;
}
.row-title {
  margin: 8px 0 0;
  font-family: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.row-title a { text-decoration: none; color: var(--ink); }
.row-title a:hover { color: var(--amber); }
.row-where { margin-top: 8px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 44em; }
.row-where b { font-weight: 700; color: var(--ink); }
.row-where.is-fault b { color: var(--fault); }
.row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.row-facts li { display: block; }
.row-facts .lbl { color: var(--ink-3); }

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 8px 2px 4px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid currentColor;
}
.state::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  line-height: 1;
}
.state--live { color: var(--amber); }
.state--live::before { content: "@"; content: "@" / ""; background: var(--amber); color: var(--on-amber); }
.state--done { color: var(--ink); }
.state--done::before { background: var(--ink-2); }
.state--needs-info { color: var(--ink-2); }
.state--needs-info::before { content: "?"; content: "?" / ""; color: var(--amber); }
.state--human { color: var(--fault); }
.state--human::before { content: "\00d7"; content: "\00d7" / ""; }

.toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.toggle:hover { border-color: var(--amber); color: var(--amber); }
.toggle .chev {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.toggle[aria-expanded="true"] { background: var(--ground-2); }
.toggle[aria-expanded="true"] .chev { transform: translateY(2px) rotate(-135deg); }

/* ring detail */

.detail {
  margin: 0 0 var(--s6) calc(110px + var(--s6));
  background: var(--ground-2);
  border: 1px solid var(--rule);
}
.detail[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .detail.is-opening { animation: open .26s var(--ease); }
}
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.detail-main { padding: var(--s6); min-width: 0; }
.detail-side { padding: var(--s6); border-left: 1px solid var(--rule); min-width: 0; }

.detail-h {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.detail-h ~ .detail-h, .detail-block + .detail-block { margin-top: var(--s6); }

.banner {
  margin-bottom: var(--s5);
  padding: var(--s4);
  border-left: 3px solid var(--ink-3);
  background: var(--ground-3);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.banner b { display: block; font-family: var(--mono); font-size: 0.875rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.banner--human { border-left-color: var(--fault); }
.banner--human b { color: var(--fault); }
.banner--live { border-left-color: var(--amber); }
.banner--live b { color: var(--amber); }
.banner--done { border-left-color: var(--ink-2); }
.banner--ask { border-left-color: var(--amber-deep); }

.note-sm { margin-top: var(--s3); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.note-sm code { font-size: 0.95em; white-space: normal; overflow-wrap: anywhere; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl {
  position: relative;
  display: grid;
  grid-template-columns: 4.1rem 22px minmax(0, 1fr);
  gap: 0 var(--s3);
  padding-bottom: var(--s4);
}
.tl::before {
  content: "";
  position: absolute;
  left: calc(4.1rem + var(--s3) + 10px);
  top: 24px;
  bottom: 2px;
  border-left: 1px dotted var(--rule-2);
}
.tl:last-child::before { display: none; }
.tl:last-child { padding-bottom: 0; }
.tl-time { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); padding-top: 2px; text-align: right; }
.tl-time small { display: block; font-size: 0.6875rem; color: var(--ink-3); margin-top: 2px; }
.tl-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  background: var(--ground-2);
}
.tl--good .tl-mark { background: var(--ink-2); border-color: var(--ink-2); color: var(--ground); }
.tl--bad .tl-mark { color: var(--fault); border-color: var(--fault); }
.tl--ask .tl-mark { color: var(--amber); border-color: var(--amber); }
.tl--now .tl-mark { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.tl-text { font-size: 1rem; line-height: 1.45; color: var(--ink); padding-top: 1px; }
.tl-text .sub { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-3); }
.tl--bad .tl-text { color: var(--fault); }
.tl--bad .tl-text .sub { color: var(--ink-2); }
.tl-gap { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }

.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; font-size: 0.9375rem; }
.facts dt, .facts dd { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); padding-right: var(--s4); padding-top: 9px; white-space: nowrap; }
.facts dd { margin: 0; color: var(--ink); text-align: right; line-height: 1.4; font-variant-numeric: tabular-nums; }
.facts dd small { display: block; color: var(--ink-3); font-size: 0.8125rem; }

.attempts { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.attempts th, .attempts td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.attempts th { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; color: var(--ink-3); }
.attempts td { color: var(--ink); font-variant-numeric: tabular-nums; }
.attempts .bad { color: var(--fault); }
.attempts code { font-size: 0.8em; }

.tape {
  display: flex;
  height: 22px;
  margin-bottom: var(--s3);
  border: 1px solid var(--rule-2);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10px;
}
.tape span { display: block; height: 100%; min-width: 3px; }
.tape .f-reporter { background: var(--amber); }
.tape .f-25 { background: repeating-linear-gradient(90deg, var(--amber) 0 2px, var(--ground-2) 2px 6px); }
.tape .f-100 { background: var(--ink-2); }
.tape .f-off { background: transparent; box-shadow: inset 0 0 0 1px var(--fault); }
.tape .f-deleted { background: var(--ground); }
.tape-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: var(--s3); font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); }
.tape-key span { display: inline-flex; align-items: center; gap: 6px; }
.tape-key i { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--rule-2); }
.tape-key .f-reporter { background: var(--amber); border-color: var(--amber); }
.tape-key .f-25 { background: repeating-linear-gradient(90deg, var(--amber) 0 2px, var(--ground-2) 2px 4px); }
.tape-key .f-100 { background: var(--ink-2); border-color: var(--ink-2); }
.tape-key .f-off { border-color: var(--fault); }

.flaglist { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.flaglist li { display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); gap: var(--s3); padding: 4px 0; color: var(--ink-2); }
.flaglist .t { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); text-align: right; }
.flaglist .off { color: var(--fault); }

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  border: 1px solid var(--rule-2);
  text-decoration: none;
  color: var(--ink);
}
.links a:hover { border-color: var(--amber); color: var(--amber); }

.detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s6);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}
.detail-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }

.muted { color: var(--ink-3); }

/* loading, empty, error */

.status-panel {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.status-panel h2 { font-family: var(--mono); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; margin: 0; }
.status-panel p { margin-top: var(--s3); color: var(--ink-2); max-width: 40em; }
.status-panel .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.status-panel--error h2 { color: var(--fault); }
.status-panel--plain { grid-template-columns: minmax(0, 1fr) !important; }
.status-panel .tech { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }

.skeleton {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
}
.sk-line { height: 12px; background: var(--ground-3); margin-top: 10px; }
.sk-line.w1 { width: 22%; margin-top: 4px; }
.sk-line.w2 { width: 62%; height: 18px; margin-top: 14px; }
.sk-line.w3 { width: 48%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton .sk-line { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .45; } }

.loading-line { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-2); padding-top: var(--s4); }
.loading-line .caret { width: 0.55em; height: 1em; vertical-align: -0.15em; }
@media (prefers-reduced-motion: no-preference) {
  .loading-line .caret { animation: blink 1.1s steps(2, start) infinite; }
}

.page-rings main { min-height: 70vh; }
.page-rings .foot { margin-top: var(--s9); }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "title" "ring" "copy";
    row-gap: var(--s5);
  }
  .hero-title { margin-bottom: 0; }
  .hero-copy { max-width: 44rem; }
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .how-ring, .how-ring-caption { display: none; }
  .station { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 13rem); }
  .numbers-grid, .check-grid { grid-template-columns: minmax(0, 1fr); }
  .detail { margin-left: 0; }
}

@media (max-width: 900px) {
  .nav .nav-anchor { display: none; }
  .guard-grid { grid-template-columns: minmax(0, 1fr); }
  .station { grid-template-columns: 44px minmax(0, 1fr); }
  .leaves { grid-column: 2; padding-top: var(--s2); }
  .ledger-head { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  :root { --header: 56px; }
  .brand-name { font-size: 0.875rem; }
  .nav a { padding: 0 10px; }
  .hero { padding-top: var(--s6); }
  .lede, .lede-strong { font-size: 1.0625rem; }
  .hero-actions { margin-top: var(--s5); }
  .hero-actions .btn { flex: 1 1 100%; }
  .ring-stage { aspect-ratio: 1 / 0.84; }
  .ring-label { display: none; }
  .ring-readout { flex-direction: column; gap: var(--s4); min-height: 0; border-top: 0; padding-top: 0; }
  .ring-now { width: 100%; min-height: 6.6em; }
  .ring-controls { width: 100%; order: -1; }
  .ring-controls .ctl { flex: 1; }
  .hero-facts { flex-direction: column; margin-top: var(--s6); }
  .section-head { margin-bottom: var(--s6); }
  .station { gap: var(--s2) var(--s4); padding-bottom: var(--s6); }
  .station-name { font-size: 1.125rem; margin-top: 10px; }
  .substeps > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .readout-box { padding: var(--s2) var(--s4); }
  .readout-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt v" "n n"; }
  .readout-row::after { display: none; }
  .readout .v { font-size: 1.0625rem; }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .checks li:nth-child(odd) { border-right: 0; }
  .checks li:nth-child(even) .check-link { padding-left: 0; }
  .check-link { padding: var(--s4) 0; }
  .row-main {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "ring body" "action action";
    gap: var(--s4) var(--s4);
    padding-block: var(--s5);
  }
  .row-main .mring { --cell: 8px; }
  .row-action .toggle { width: 100%; justify-content: center; }
  .row-title { font-size: 1.125rem; }
  .detail-main, .detail-side { padding: var(--s4); }
  .detail-foot { padding: var(--s2) var(--s4); }
  .tl { grid-template-columns: 3.6rem 22px minmax(0, 1fr); gap: 0 10px; }
  .tl::before { left: calc(3.6rem + 10px + 10px); }
  .status-panel, .skeleton { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s4); }
  .status-panel .mring, .skeleton .mring { --cell: 8px; }
  .attempts th:nth-child(3), .attempts td:nth-child(3) { display: none; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .hero-title { font-size: 2.125rem; }
}

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

@media (forced-colors: active) {
  .brand-cell, .m-you, .m-on, .btn-primary, .ring-num { forced-color-adjust: none; }
  .state, .toggle, .ctl, .filter, .btn-quiet { border: 1px solid ButtonText; }
}