/* CSS for the cheatsheet page */
:root{
--go:         #1763E0;   /* signal blue — the "go / pro tip" mark              */
  --go-deep:    #0F47A8;
  --go-glow:    rgba(23,99,224,0.10);
  --warn:       #B65A0C;   /* caution amber — the "fuck-up" signal               */
  --warn-deep:  #8A4308;
  --warn-glow:  rgba(182,90,12,0.10);

}

/* subtle ruled-paper texture, the service-manual feel */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:80; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(20,22,28,0.015) 0,
    rgba(20,22,28,0.015) 1px,
    transparent 1px, transparent 32px);
}

/* waveform */
.wave{ margin-top:30px; height:74px; width:100%; display:block; }

/* readout strip */
.readout{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin-top:26px; background:var(--hair); border:1px solid var(--hair); }
@media(min-width:680px){ .readout{ grid-template-columns:repeat(4,1fr); } }
.readout__cell{ background:var(--ink-2); padding:14px 16px; }
.readout__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:var(--tr-stamp); text-transform:uppercase; color:var(--chalk-faint); }
.readout__v{ font-family:var(--display); font-weight:800; font-size:clamp(20px,3.4vw,30px);
  margin-top:6px; letter-spacing:-.02em; }
.readout__v.is-go{ color:var(--go); }
.readout__v.is-warn{ color:var(--warn); }

/* ── layout : sticky Manual Index rail + content ──────────────────────────────────── */
.shell{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,56px);
  padding-block:clamp(34px,6vw,72px); }
@media(min-width:1000px){ .shell{ grid-template-columns:248px 1fr; align-items:start; } }

/* Manual Index channel-strip */
.manual-index{ position:relative; }
@media(min-width:1000px){ .manual-index{ position:sticky; top:78px; max-height:calc(100dvh - 96px);
  overflow:auto; padding-right:6px; } }
.manual-index__title{ display:flex; align-items:center; gap:.7ch; margin:0 0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:var(--tr-stamp);
  text-transform:uppercase; color:var(--chalk-faint); }
.manual-index__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.manual-index__list a{ display:flex; gap:11px; align-items:baseline; padding:8px 10px;
  border:0; border-left:2px solid var(--hair); color:var(--chalk-dim);
  font-family:var(--mono); font-size:12px; line-height:1.4; transition:all .14s ease; }
.manual-index__list a:hover{ color:var(--chalk); border-left-color:var(--red);
  background:var(--red-glow); }
.manual-index__list a.is-active{ color:var(--chalk); border-left-color:var(--red); background:var(--red-glow); }
.manual-index__n{ font-family:var(--mono); font-size:11px; color:var(--red); flex:none; min-width:2ch; }

/* mobile manual index disclosure */
.manual-index--mobile{ margin-top:8px; }
.manual-index--mobile summary{ cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; padding:14px 16px; border:1px solid var(--hair-strong);
  font-family:var(--mono); font-size:11px; letter-spacing:var(--tr-stamp); text-transform:uppercase;
  color:var(--chalk-dim); }
.manual-index--mobile summary::-webkit-details-marker{ display:none; }
.manual-index--mobile[open] summary{ border-bottom:0; color:var(--red); }
@media(min-width:1000px){ .manual-index--mobile{ display:none; } }
.manual-index--desktop{ display:none; }
@media(min-width:1000px){ .manual-index--desktop{ display:block; } }

/* ── Camelot wheel signature (§11) ───────────────────────────────────────── */
.harm{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,44px); align-items:center;
  margin:1.6em 0; }
@media(min-width:840px){ .harm{ grid-template-columns:minmax(0,360px) 1fr; } }
.wheel-stage{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.wheel{ position:relative; width:min(360px, 86vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 44%, rgba(20,22,28,0.035), transparent 66%); }
/* faint concentric guide rings — make the two key-rings (B outer / A inner) read as rings */
.wheel::before,.wheel::after{ content:""; position:absolute; inset:0; margin:auto;
  border-radius:50%; pointer-events:none; z-index:0; }
.wheel::before{ width:84%; height:84%; border:1px solid var(--hair-strong); }
.wheel::after{ width:50%; height:50%; border:1px dashed var(--hair-strong); }
.wheel__hub{ position:absolute; inset:0; margin:auto; width:25%; height:25%; border-radius:50%;
  border:1px solid var(--hair-strong); background:var(--ink-2); z-index:1;
  box-shadow:0 8px 24px -12px rgba(20,22,28,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wheel__hub .stamp{ color:var(--chalk-faint); font-size:8px; }
.wheel__hub b{ font-family:var(--display); font-weight:900; font-size:22px; color:var(--red);
  line-height:1; }
.key{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.key > button{ position:absolute; pointer-events:auto; transform:translate(-50%,-50%); width:12%; height:12%;
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--hair-strong); background:var(--ink-2); color:var(--chalk-dim);
  font-family:var(--mono); line-height:1; box-shadow:0 3px 10px -6px rgba(20,22,28,.3);
  transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; cursor:pointer; }
.key > button:hover{ transform:translate(-50%,-50%) scale(1.08); }
.key > button .cam{ font-size:12px; font-weight:700; color:var(--chalk); }
.key > button .mus{ font-size:8px; color:var(--chalk-faint); margin-top:2px; }
.key > button:hover{ border-color:var(--chalk-dim); color:var(--chalk); }
.key.is-active > button{ background:var(--red); border-color:var(--red); box-shadow:0 0 22px var(--red-glow); }
.key.is-active > button .cam,.key.is-active > button .mus{ color:var(--ink); }
.key.is-match > button{ border-color:var(--go); background:var(--go-glow);
  box-shadow:0 0 16px var(--go-glow); }
.key.is-match > button .cam{ color:var(--go); }
.wheel__legend{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.lg{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--chalk-dim); }
.lg::before{ content:""; width:11px; height:11px; border-radius:50%; }
.lg--active::before{ background:var(--red); }
.lg--match::before{ background:var(--go-glow); border:1px solid var(--go); }
.harm__note p:first-child{ margin-top:0; }
.harm__live{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--chalk-dim);
  border-top:1px dashed var(--hair-strong); padding-top:12px; margin-top:6px; }
.harm__live b{ color:var(--go); }
#liveCode{ color:var(--red); }