/* ═══════════════════════════════════════════════════════════════════════
   lab.css — Tornado Lab
   ───────────────────────────────────────────────────────────────────────
   A research console, not a game HUD. Instrument panels sit over a live
   scene: thin rules, monospaced measurements, one amber accent for the
   things you can act on. Type and palette are inherited from the Garden
   of Keys hub so this reads as the same house — EB Garamond carries
   names, Space Mono carries numbers.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  --night:      #05070d;
  --deeper:     #02040a;
  --panel:      rgba(8, 12, 20, 0.93);
  --panel-solid:#080c14;
  --ink:        #cfd9ea;
  --body-text:  #b8c2d4;
  --muted:      #7a8598;
  --dim:        #525c6e;
  --faint:      rgba(207, 217, 234, 0.10);
  --fainter:    rgba(207, 217, 234, 0.045);
  --rule:       rgba(207, 217, 234, 0.14);

  --amber:      #f0b429;      /* actionable */
  --amber-dim:  #a67c14;
  --cool:       #4fc3f7;      /* data / measured */
  --hot:        #ff6f4a;      /* warnings, EF, failure */
  --green:      #58e08a;      /* radar, confirmations */
  --violet:     #b18cff;      /* open questions */

  /* Epistemic tags — used everywhere a claim is made. */
  --tag-established: #58e08a;
  --tag-simplified:  #f0b429;
  --tag-open:        #b18cff;
  --tag-absurd:      #ff4d6d;
  --tomato:          #c2301f;
  --tomato-lit:      #e8563f;

  --ef0: #7fb8d8; --ef1: #6ee0b8; --ef2: #ffd166;
  --ef3: #ff9f45; --ef4: #ff6f4a; --ef5: #ff4d6d;

  --rail: 314px;
  --instr: 300px;
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--deeper);
  overflow: hidden;
}

body {
  color: var(--body-text);
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--amber); }
::selection { background: var(--amber); color: #140e00; }

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

h1, h2, h3, .serif {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Stage ─────────────────────────────────────────────────────────── */

#stage { position: fixed; inset: 0; background: #0a0e16; }
#scene, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }

#boot {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--deeper);
  transition: opacity .6s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot .inner { text-align: center; max-width: 30rem; padding: 2rem; }
#boot h1 { font-size: 2.2rem; margin: 0 0 .4rem; color: var(--ink); }
#boot p { color: var(--muted); margin: .3rem 0; }
#boot .bar {
  height: 2px; background: var(--fainter); margin-top: 1.6rem; overflow: hidden;
}
#boot .bar i {
  display: block; height: 100%; width: 30%; background: var(--amber);
  animation: sweep 1.1s ease-in-out infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(430%); } }
#boot .err { color: var(--hot); }

/* ── Masthead ──────────────────────────────────────────────────────── */

#masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .7rem 1rem .7rem calc(var(--rail) + 1.4rem);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(2,4,10,.82), transparent);
}
#masthead h1 { font-size: 1.15rem; margin: 0; color: var(--ink); }
#masthead h1 em { font-style: normal; color: var(--amber); }
#masthead .eyebrow {
  margin: 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
}
#masthead a { pointer-events: auto; margin-left: auto; font-size: 11px; color: var(--muted); text-decoration: none; }
#masthead a:hover { color: var(--amber); }

/* ── Panels ────────────────────────────────────────────────────────── */

.panel {
  position: fixed; z-index: 15;
  background: var(--panel);
  border: 1px solid var(--rule);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#console {
  top: 0; bottom: 0; left: 0; width: var(--rail);
  border-width: 0 1px 0 0;
  display: flex; flex-direction: column;
}

#instruments {
  top: 0; right: 0; width: var(--instr);
  bottom: 86px;
  border-width: 0 0 0 1px;
  display: flex; flex-direction: column;
}

.tabs {
  display: flex; flex: 0 0 auto;
  border-bottom: 1px solid var(--rule);
}
.tabs button {
  flex: 1; padding: .65rem .3rem; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--body-text); }
.tabs button[aria-selected="true"] { color: var(--amber); border-bottom-color: var(--amber); }

.tabpanes { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.tabpane { padding: .85rem .9rem 2rem; }
.tabpane[hidden] { display: none; }

.tabpanes::-webkit-scrollbar { width: 8px; }
.tabpanes::-webkit-scrollbar-track { background: transparent; }
.tabpanes::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 4px; }
.tabpanes::-webkit-scrollbar-thumb:hover { background: var(--rule); }

.group { margin-bottom: 1.35rem; }
.group > h3 {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 .55rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--fainter);
  display: flex; align-items: center; gap: .4rem;
}

/* ── Controls ──────────────────────────────────────────────────────── */

.ctl { margin-bottom: .72rem; }
.ctl-head {
  display: flex; align-items: baseline; gap: .4rem;
  margin-bottom: .18rem;
}
.ctl-head label { flex: 1; font-size: 11px; color: var(--body-text); cursor: help; }
.ctl-head .val {
  font-size: 11px; color: var(--cool); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ctl-head .val.locked { color: var(--dim); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; background: transparent; cursor: pointer;
  display: block;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2px; background: var(--faint); border-radius: 2px;
}
input[type=range]::-moz-range-track { height: 2px; background: var(--faint); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; margin-top: -4.5px;
  background: var(--amber); border-radius: 50%;
  border: 0; transition: transform .12s ease, box-shadow .12s ease;
}
input[type=range]::-moz-range-thumb {
  width: 11px; height: 11px; background: var(--amber);
  border-radius: 50%; border: 0;
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(240,180,41,.25); }
input[type=range]:disabled::-webkit-slider-thumb { background: var(--dim); }

select, .btn {
  width: 100%; padding: .42rem .5rem;
  background: var(--fainter); border: 1px solid var(--rule);
  color: var(--body-text); font-size: 11px;
  transition: border-color .15s ease, color .15s ease;
}
select:hover, .btn:hover { border-color: var(--amber-dim); color: var(--ink); }
select option { background: var(--panel-solid); }

.btn.primary { border-color: var(--amber-dim); color: var(--amber); }
.btn.primary:hover { background: rgba(240,180,41,.1); }

.btn-row { display: flex; gap: .35rem; }
.btn-row .btn { width: auto; flex: 1; }

.chipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.chip {
  padding: .4rem .45rem; font-size: 10px; text-align: left;
  background: var(--fainter); border: 1px solid transparent;
  color: var(--muted); line-height: 1.3;
  transition: all .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--rule); }
.chip[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.08); }
.chip small { display: block; color: var(--dim); font-size: 9px; }
.chip[aria-pressed="true"] small { color: var(--amber-dim); }

/* Layer toggles */
.layers { display: grid; gap: .12rem; }
.layer {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem .35rem; font-size: 11px; text-align: left;
  color: var(--muted); width: 100%;
}
.layer:hover { color: var(--ink); background: var(--fainter); }
.layer .sw {
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--dim); flex: 0 0 auto; transition: background .15s;
}
.layer[aria-pressed="true"] { color: var(--ink); }
.layer[aria-pressed="true"] .sw { background: var(--swatch, var(--cool)); box-shadow: 0 0 7px var(--swatch, var(--cool)); }

/* ── Epistemic tags ────────────────────────────────────────────────── */

.tag {
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: .1rem .3rem; border: 1px solid currentColor; border-radius: 2px;
  white-space: nowrap; opacity: .85;
}
.tag.established { color: var(--tag-established); }
.tag.simplified  { color: var(--tag-simplified); }
.tag.open        { color: var(--tag-open); }
/* Fourth tag, reachable only from Tormato. The scale of honesty needed a
   rung below "open question" and this is it. */
.tag.absurd      { color: var(--tag-absurd); }

/* ── Tooltip ───────────────────────────────────────────────────────── */

#tooltip {
  position: fixed; z-index: 60; max-width: 21rem;
  padding: .6rem .7rem;
  background: var(--panel-solid); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-size: 11px; line-height: 1.5; color: var(--body-text);
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
#tooltip.on { opacity: 1; }
#tooltip h4 { margin: 0 0 .3rem; font-size: 12px; color: var(--ink); font-family: inherit; }
#tooltip .tag { margin-left: .35rem; vertical-align: 1px; }
#tooltip p { margin: .35rem 0 0; }
#tooltip .why { color: var(--muted); font-size: 10.5px; }

/* ── Instruments (right) ───────────────────────────────────────────── */

.readouts { padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
.ro { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .12rem 0; }
.ro dt { font-size: 10px; color: var(--dim); letter-spacing: .06em; }
.ro dd { margin: 0; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ro dd.big { font-size: 15px; color: var(--cool); }
.ro dd em { font-style: normal; color: var(--dim); font-size: 10px; }

#radarwrap { padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
#radarwrap .rhead {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .4rem;
}
#radarwrap .rhead span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
#radarwrap .rhead button { font-size: 10px; color: var(--muted); }
#radarwrap .rhead button:hover { color: var(--amber); }
#radar { width: 100%; height: auto; display: block; background: #04070c; border: 1px solid var(--fainter); }
#radarnote { font-size: 9.5px; color: var(--dim); margin: .35rem 0 0; line-height: 1.45; }

#feed { flex: 1 1 auto; overflow-y: auto; padding: .7rem .8rem 1rem; }
#feed h3 { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 .5rem; }
.note {
  border-left: 2px solid var(--rule); padding: .3rem 0 .35rem .6rem;
  margin-bottom: .55rem; font-size: 11px; line-height: 1.5;
  animation: notein .35s ease;
}
@keyframes notein { from { opacity: 0; transform: translateX(-6px); } }
.note time { display: block; font-size: 9px; color: var(--dim); letter-spacing: .08em; }
.note.obs { border-left-color: var(--cool); }
.note.warn { border-left-color: var(--hot); color: #ffd0c4; }
.note.fact { border-left-color: var(--violet); color: var(--muted); }
.note.fact::before { content: 'Field note — '; color: var(--violet); }

/* ── Transport ─────────────────────────────────────────────────────── */

#transport {
  position: fixed; z-index: 18;
  left: var(--rail); right: 0; bottom: 0; height: 86px;
  background: var(--panel); border-top: 1px solid var(--rule);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: flex; flex-direction: column; justify-content: center;
  padding: .5rem 1rem;
  gap: .4rem;
}
.trow { display: flex; align-items: center; gap: .55rem; }
.tbtn {
  padding: .3rem .55rem; font-size: 10.5px; color: var(--muted);
  border: 1px solid transparent; letter-spacing: .04em;
}
.tbtn:hover { color: var(--ink); border-color: var(--rule); }
.tbtn[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-dim); }
.tsep { width: 1px; height: 16px; background: var(--rule); }
.tspacer { flex: 1; }

#scrub { flex: 1; }
#clock { font-size: 11px; color: var(--cool); font-variant-numeric: tabular-nums; min-width: 5.4rem; }
#phase { font-size: 10px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; min-width: 7rem; }

/* ── Inspector ─────────────────────────────────────────────────────── */

#inspector {
  position: fixed; z-index: 40; width: 23rem; max-height: 74vh; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--rule);
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
  padding: .9rem 1rem 1rem;
}
#inspector .close { position: absolute; top: .5rem; right: .6rem; color: var(--dim); font-size: 15px; }
#inspector .close:hover { color: var(--hot); }
#inspector h3 { margin: 0 0 .1rem; font-size: 15px; color: var(--ink); }
#inspector .sub { font-size: 10px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7rem; }
#inspector .dmg { color: var(--hot); font-size: 12px; margin: .4rem 0 .6rem; }
#inspector ul { margin: .5rem 0; padding-left: 1rem; }
#inspector li { margin-bottom: .35rem; font-size: 11px; line-height: 1.55; }
#inspector .useful {
  margin-top: .7rem; padding: .5rem .6rem; font-size: 10.5px; line-height: 1.5;
  border: 1px solid var(--rule); background: var(--fainter);
}
#inspector .useful.ok { border-color: rgba(88,224,138,.35); color: #bfeed3; }
#inspector .useful.no { border-color: rgba(240,180,41,.3); color: #f0dcae; }

/* Degree-of-damage ladder */
.ladder { margin: .5rem 0 .2rem; }
.rung {
  display: flex; gap: .5rem; align-items: baseline;
  font-size: 10px; padding: .12rem 0; color: var(--dim);
}
.rung .n { width: 1.1rem; text-align: right; color: var(--dim); }
.rung .w { width: 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.rung.reached { color: var(--body-text); }
.rung.here { color: var(--hot); }
.rung.here .n, .rung.here .w { color: var(--hot); }

/* ── Report drawer ─────────────────────────────────────────────────── */

#report {
  position: fixed; z-index: 50; inset: 0;
  background: rgba(2,4,10,.9); backdrop-filter: blur(6px);
  overflow-y: auto; padding: 3vh 4vw 6vh;
}
#report .sheet {
  max-width: 62rem; margin: 0 auto;
  background: var(--panel-solid); border: 1px solid var(--rule);
  padding: 2rem 2.2rem 2.4rem;
}
#report h2 { font-size: 1.9rem; margin: 0 0 .2rem; color: var(--ink); }
#report .lede { color: var(--muted); margin: 0 0 1.6rem; font-size: 12px; }
#report .close { position: absolute; top: 3vh; right: 4vw; color: var(--muted); font-size: 12px; }

.ef {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 1.2rem; margin-bottom: 1.4rem;
  border: 1px solid var(--rule); background: var(--fainter);
}
.ef .badge {
  font-family: 'EB Garamond', serif; font-size: 3.2rem; line-height: .9;
  padding: .3rem .9rem; border: 2px solid currentColor;
}
.ef .badge.ef0 { color: var(--ef0); } .ef .badge.ef1 { color: var(--ef1); }
.ef .badge.ef2 { color: var(--ef2); } .ef .badge.ef3 { color: var(--ef3); }
.ef .badge.ef4 { color: var(--ef4); } .ef .badge.ef5 { color: var(--ef5); }
.ef .badge.none { color: var(--dim); font-size: 1.5rem; }
.ef .txt { flex: 1; }
.ef .txt strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: .2rem; }
.ef .txt p { margin: .3rem 0 0; font-size: 11px; color: var(--muted); line-height: 1.55; }

.gap {
  margin: 0 0 1.4rem; padding: .8rem 1rem;
  border-left: 2px solid var(--amber); background: rgba(240,180,41,.06);
  font-size: 11.5px; line-height: 1.6;
}
.gap b { color: var(--amber); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--rule); margin-bottom: 1.5rem; }
.stat { background: var(--panel-solid); padding: .7rem .8rem; }
.stat dt { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .2rem; }
.stat dd { margin: 0; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat dd small { font-size: 10px; color: var(--dim); }

#report h3 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: var(--ink); }
#report table { width: 100%; border-collapse: collapse; font-size: 11px; }
#report th { text-align: left; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); font-weight: normal; padding: .3rem .5rem .3rem 0; border-bottom: 1px solid var(--rule); }
#report td { padding: .32rem .5rem .32rem 0; border-bottom: 1px solid var(--fainter); }
#report td.num { text-align: right; font-variant-numeric: tabular-nums; }
#report .swathmap { width: 100%; height: auto; border: 1px solid var(--rule); background: #04070c; display: block; }

.legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; font-size: 10px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: .3rem; }
.legend i { width: 10px; height: 10px; display: block; }

/* ── What-if ───────────────────────────────────────────────────────── */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); }
.compare > div { background: var(--panel-solid); padding: .8rem .9rem; }
.compare h4 { margin: 0 0 .5rem; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); font-family: 'Space Mono', monospace; }
.delta { font-size: 10.5px; }
.delta .up { color: var(--hot); }
.delta .down { color: var(--green); }
.delta .same { color: var(--dim); }

/* ── Fujita Ghost ──────────────────────────────────────────────────── */

#ghost {
  position: fixed; z-index: 70; inset: 0; display: grid; place-items: center;
  background: rgba(2,4,10,.72); pointer-events: none;
}
#ghost .paper {
  width: min(38rem, 86vw); padding: 1.6rem 1.8rem;
  background: #0b0d0a; border: 1px solid rgba(88,224,138,.3);
  box-shadow: 0 0 60px rgba(88,224,138,.12);
  font-size: 12.5px; line-height: 1.75; color: #9ce8b6;
  text-shadow: 0 0 6px rgba(88,224,138,.45);
  white-space: pre-wrap;
}
#ghost .paper::after {
  content: '▌'; animation: blink 1s steps(2) infinite; color: #9ce8b6;
}
@keyframes blink { 50% { opacity: 0; } }
#ghost.out { animation: ghostout .8s ease forwards; }
@keyframes ghostout { to { opacity: 0; } }

/* ── The salamander's card ─────────────────────────────────────────── */

#nix {
  position: fixed; z-index: 71; inset: 0; display: grid; place-items: center;
  background: rgba(2,4,10,.66); cursor: pointer;
  opacity: 0; transition: opacity .5s ease;
}
#nix.in { opacity: 1; }
#nix .paper {
  width: min(30rem, 88vw); padding: 1.5rem 1.7rem 1.2rem;
  background: #f4efe2; color: #23201a;
  border: 1px solid #c9bda1;
  box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 6px rgba(244,239,226,.06);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13.5px; line-height: 1.62;
  transform: translateY(14px) rotate(-.4deg);
  transition: transform .55s cubic-bezier(.2,.9,.25,1);
}
#nix.in .paper { transform: translateY(0) rotate(-.4deg); }
#nix h4 {
  margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .01em;
}
#nix h4 em { font-style: italic; opacity: .7; }
#nix .cite {
  margin: .1rem 0 0; font-family: 'Space Mono', monospace;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #7a6f58;
}
#nix hr {
  border: 0; border-top: 1px solid #d6cbb2; margin: .85rem 0;
}
#nix p { margin: .5rem 0; }
#nix strong { font-variant: small-caps; letter-spacing: .03em; }
#nix .found {
  font-size: 12px; color: #5c5445; font-style: italic;
}
#nix .sig {
  margin: .9rem 0 0; font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: .04em; color: #8a7f68;
}

/* ── Tormato ───────────────────────────────────────────────────────── */

body.tormato #radarwrap .rhead span,
body.tormato #transport #phase { color: var(--tomato-lit); }

body.tormato .chip[data-mode="tormato"][aria-pressed="true"] {
  border-color: var(--tomato-lit);
  color: var(--tomato-lit);
}

/* The grading certificate. Same report, different stationery — every
   figure on it is the one Standard mode would have printed. */
#report .cert {
  background: #f6f1e4; color: #24201a; padding: 1.1rem 1.2rem;
  border: 1px double #b9a97f; margin: 0 0 .9rem;
  font-family: 'EB Garamond', Georgia, serif;
}
#report .cert h3 {
  margin: 0 0 .1rem; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; text-align: center; color: #2c2718;
}
#report .cert .auth {
  margin: 0 0 .7rem; text-align: center;
  font-family: 'Space Mono', monospace; font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #8a7c58;
}
#report .cert dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .18rem .8rem; }
#report .cert dt { font-size: 12px; color: #56503f; }
#report .cert dd {
  margin: 0; text-align: right; font-family: 'Space Mono', monospace;
  font-size: 12px; color: #24201a;
}
#report .cert .grade {
  margin: .7rem 0 .1rem; text-align: center;
  font-family: 'Space Mono', monospace; font-weight: 700;
  font-size: 26px; letter-spacing: .08em; color: #8f2010;
}
#report .cert .gradenote {
  margin: 0 0 .3rem; text-align: center; font-size: 11px; color: #6b6350;
}
#report .cert .lot {
  margin: .9rem 0 0; padding: 0;
}
#report .cert .lot img {
  display: block; width: 100%; height: auto;
  border: 1px solid #c3b590;
  /* Knocked back a little so a vivid illustration does not outshout the
     measurements it sits underneath. */
  filter: saturate(.92) contrast(.97);
}
#report .cert .lot figcaption {
  margin: .45rem 0 0; font-size: 10.5px; line-height: 1.55; color: #6b6350;
}
#report .cert .lot figcaption b {
  display: block; font-family: 'Space Mono', monospace;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a7c58; margin-bottom: .15rem;
}
#report .cert .foot {
  margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid #ded2b4;
  font-size: 11px; line-height: 1.55; color: #5c5445;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  :root { --rail: 268px; --instr: 258px; }
}

@media (max-width: 900px) {
  :root { --rail: 0px; --instr: 0px; }
  #console {
    left: 0; right: 0; width: auto; top: auto; bottom: 86px;
    max-height: 46vh; border-width: 1px 0 0 0;
    transform: translateY(calc(100% - 34px)); transition: transform .3s ease;
  }
  #console.open { transform: none; }
  #console::before {
    content: 'Controls'; display: block; text-align: center;
    font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--dim); padding: .5rem 0 .3rem;
  }
  #instruments { display: none; }
  #masthead { padding-left: 1rem; }
  #transport { left: 0; }
}

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