/* ============================================================
   bench.css: "The Workbench" (concept A).
   A maker's lab: pegboard wall, instruments hung on hooks,
   phosphor readouts, keycap buttons, thermal-paper results.
   Loaded on every page after the kit, shell, verdict and d2
   sheets and before each page's own <style>, so page rules still
   win. Visual only: no rule here changes what a tool measures.
   Fonts: Archivo (body + display) and Martian Mono (readouts),
   both SIL OFL 1.1, self-hosted subsets in fonts/.
   ============================================================ */

/* font-display: optional + a <link rel=preload> on every page: the
   font is either there for first paint or not used on this visit,
   so a late font can never move the page. */
@font-face{font-family:'Archivo Bench';src:url('fonts/archivo-subset.woff2') format('woff2');font-weight:400 850;font-stretch:100% 125%;font-display:optional}
@font-face{font-family:'Martian Mono Bench';src:url('fonts/martian-mono-subset.woff2') format('woff2');font-weight:400 700;font-stretch:75% 100%;font-display:optional}

:root{
  --sans:'Archivo Bench',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'Martian Mono Bench',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --db-display:'Archivo Bench','Arial Narrow',var(--sans);
  --db-mono:'Martian Mono Bench',var(--mono);

  /* hardboard wall */
  --board:#dcc7a1;
  --hole:#c9b38d;
  --hole-rim:#b29a73;
  --hole-lip:rgba(255,248,232,.55);
  /* birch rail + walnut bench edge */
  --rail:#ecd3a4;
  --rail-grain:rgba(150,104,48,.10);
  --rail-edge:#a8794a;
  --bench:#2c241b;
  --bench-ink:#efe5d3;
  --bench-soft:#d7c8ae;

  --paper:#efe5d1;
  --panel:#fbf6ea;
  --ink:#1f1b16;
  --ink-soft:#3f392f;
  --line:#d9ccb2;
  --line-strong:#857558;
  --accent:#962f08;
  --accent-soft:#f8dcc8;
  --on-accent:#ffffff;
  --focus:#0a50c2;
  --pass:#1d6b34;
  --pass-soft:#dcefdc;
  --fail:#a8261b;
  --fail-soft:#f9e0dc;
  --warn:#7a4800;

  /* oscilloscope */
  --readout-bg:#07160d;
  --readout-ink:#a6ffbd;
  --readout-dim:#63c983;
  --scope-grid:rgba(120,255,160,.07);

  /* instrument case + keycaps */
  --case:#2b2620;
  --case-hi:#4a4238;
  --cap-top:#fffdf7;
  --cap-side:#ddd3c1;
  --cap-skirt:#8f846f;
  --thermal:#fdfcf7;
  --thermal-ink:#26231e;
  --stamp-pass:#1d6b34;
  --stamp-check:#8a4f00;
  --stamp-fault:#b0241a;
  --stamp-idle:#5d564b;
  --shadow:rgba(60,38,10,.38);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root{
    --board:#211c16;
    --hole:#120f0b;
    --hole-rim:#0b0907;
    --hole-lip:rgba(255,230,190,.07);
    --rail:#3a2b1e;
    --rail-grain:rgba(0,0,0,.18);
    --rail-edge:#17110b;
    --bench:#14100c;
    --bench-ink:#efe5d3;
    --bench-soft:#cdbfa6;

    --paper:#3a3228;
    --panel:#2c261f;
    --ink:#f3ead9;
    --ink-soft:#d2c5ad;
    --line:#4a4135;
    --line-strong:#958670;
    --accent:#ff9d5c;
    --accent-soft:#4d2d17;
    --on-accent:#1f1405;
    --focus:#8ab4ff;
    --pass:#72dc93;
    --pass-soft:#183622;
    --fail:#ff9187;
    --fail-soft:#47201b;
    --warn:#ffbe5c;

    --case:#0f0d0a;
    --case-hi:#3a332a;
    --cap-top:#4a4237;
    --cap-side:#3a332a;
    --cap-skirt:#15120e;
    --thermal:#ebe6da;
    --thermal-ink:#1f1c17;
    --shadow:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

/* ---------- the wall ---------- */
html{background:var(--board)}
body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--board);
  background-image:
    radial-gradient(circle at 12px 13px,var(--hole-lip) 0 3.6px,transparent 4.4px),
    radial-gradient(circle at 12px 12px,var(--hole) 0 2.6px,var(--hole-rim) 3.1px,transparent 3.8px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}

/* ---------- rail (header) ---------- */
.site-header,.bar48{
  background-color:var(--rail);
  background-image:repeating-linear-gradient(90deg,transparent 0 37px,var(--rail-grain) 37px 39px,transparent 39px 83px,var(--rail-grain) 83px 84px);
  border-bottom:3px solid var(--rail-edge);
  box-shadow:0 6px 10px -6px var(--shadow);
}
/* .bar48 is its own max-width box: paint the rail full-bleed without widening the page */
.bar48{box-shadow:0 0 0 100vmax var(--rail);clip-path:inset(0 -100vmax -12px);border-bottom:0;
  background-image:none;
  background:var(--rail);position:relative}
/* edge drawn inside the 48px, full-bleed, so the bar keeps its height */
.bar48::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-image:linear-gradient(var(--rail-edge) 0 0) fill 0/0/0 100vmax;pointer-events:none}
.site-header .inner{padding-top:.5rem;padding-bottom:.5rem}

/* the name, punched on red label tape */
.brand,.brandmark span{
  display:inline-block;
  font-family:var(--db-display);
  font-stretch:118%;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#fff;
  background-color:#b3261e;
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(0,0,0,.12));
  border-radius:3px;
  padding:.12rem .55rem .14rem;
  line-height:1.35;
  text-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.12);
  transform:rotate(-1.2deg);
  text-decoration:none;
}
.brand{font-size:.92rem}
.brand .brand-mark{filter:brightness(0) invert(1);margin-right:.15rem}
.brandmark span{font-size:.8rem}
.brandmark:hover span,.brand:hover{background-color:#8f1d16}

.site-header .site-nav a{color:var(--ink);font-weight:600;font-size:.92rem}
@media (max-width:640px){
  .site-header .inner{row-gap:.15rem}
  .site-header .site-nav{flex-wrap:nowrap;overflow-x:auto;gap:.4rem;width:100%;margin:0 -1rem;padding:0 1rem .2rem;width:calc(100% + 2rem);scrollbar-width:none}
  .site-header .site-nav a{flex:none;font-size:.85rem;padding:0 .6rem;background:var(--panel);border:1.5px solid var(--case);border-radius:5px;min-height:44px;box-shadow:0 2px 0 var(--case)}
}
.site-header .site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* the device picker: a rocker with a pilot lamp */
.pickbtn{
  background:var(--panel);
  border:2px solid var(--case);
  color:var(--ink);
  box-shadow:0 2px 0 var(--case);
  height:40px;min-height:40px;
  font-family:var(--sans);font-weight:700;
}
.pickbtn::before{content:"";width:9px;height:9px;border-radius:50%;background:#e2632a;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 6px #ff8a4c;flex:none}
.pickbtn[aria-expanded="true"]::before{background:#58e07f;box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 8px #58e07f}
.pickbtn:hover{border-color:var(--accent);color:var(--ink)}
.pickbtn:active{transform:translateY(2px);box-shadow:none}
.sheet{background:var(--panel);border-top:3px solid var(--case)}
.sheet .site-nav a{color:var(--ink);font-weight:600}

/* ---------- labels on the wall ---------- */
/* page eyebrow: black embossed label tape. Same outer height as the kit's eyebrow line. */
main>.eyebrow,main>section>.eyebrow:first-child{
  width:fit-content;
  background:var(--case);
  color:#f4ecdc;
  padding:.06rem .5rem;
  margin:0 0 .3rem;
  border-radius:2px;
  line-height:1.45;
  letter-spacing:.16em;
  font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
  transform:rotate(-.6deg);
}
@media (prefers-color-scheme:dark){main>.eyebrow,main>section>.eyebrow:first-child{background:#e9dfcb;color:#1f1b16}}

h1,h2,h3{font-family:var(--db-display);color:var(--ink)}
h1{font-stretch:118%;font-weight:800;letter-spacing:-.005em}
h2{font-stretch:112%;font-weight:780;letter-spacing:0}
h3{font-weight:700}
.lede{color:var(--ink-soft)}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}

/* ---------- instruments hung on the wall ---------- */
.tool-panel{
  position:relative;
  background-color:var(--panel);
  /* four case screws */
  background-image:
    radial-gradient(circle at 11px 11px,var(--case-hi) 0 3px,var(--line-strong) 3.5px,transparent 4.5px),
    radial-gradient(circle at calc(100% - 11px) 11px,var(--case-hi) 0 3px,var(--line-strong) 3.5px,transparent 4.5px),
    radial-gradient(circle at 11px calc(100% - 11px),var(--case-hi) 0 3px,var(--line-strong) 3.5px,transparent 4.5px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),var(--case-hi) 0 3px,var(--line-strong) 3.5px,transparent 4.5px);
  background-repeat:no-repeat;
  border:2px solid var(--case);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.06),0 3px 0 var(--case),0 18px 24px -14px var(--shadow);
}
@media (prefers-color-scheme:dark){.tool-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 #000,0 18px 24px -14px var(--shadow)}}
/* two pegboard hooks the panel hangs from */
.tool-panel::before{
  content:"";position:absolute;top:-11px;left:16%;right:16%;height:11px;pointer-events:none;
  background:
    radial-gradient(circle at 5px 4px,#c9ccce 0 3px,#6f7477 3.6px,transparent 4.4px) 0 0/10px 11px no-repeat,
    linear-gradient(#8c9196,#5f6468) 3px 4px/4px 8px no-repeat,
    radial-gradient(circle at 5px 4px,#c9ccce 0 3px,#6f7477 3.6px,transparent 4.4px) 100% 0/10px 11px no-repeat,
    linear-gradient(#8c9196,#5f6468) calc(100% - 3px) 4px/4px 8px no-repeat;
}
.tool-panel h2{margin-top:.4rem}
@media (max-width:700px){
  .faceplate{border-radius:0;border-left:none;border-right:none}
}

/* ---------- oscilloscope readout ---------- */
.readout{
  position:relative;
  background-color:var(--readout-bg);
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    linear-gradient(var(--scope-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--scope-grid) 1px,transparent 1px);
  background-size:auto,18px 18px,18px 18px;
  color:var(--readout-ink);
  font-stretch:75%;
  column-gap:1.1rem;
  border-radius:9px;
  box-shadow:inset 0 0 0 3px var(--case),inset 0 0 0 4px var(--case-hi),inset 0 0 22px rgba(0,0,0,.65),0 2px 0 rgba(255,255,255,.35);
  text-shadow:0 0 6px rgba(120,255,160,.45);
}
.readout .r-label{color:var(--readout-dim);text-shadow:none;letter-spacing:.07em}
.readout .r-value{color:var(--readout-ink)}
.readout .r-value.pass{color:#7dffa0}
.readout .r-value.fail{color:#ff9b8f;text-shadow:0 0 6px rgba(255,120,100,.45)}

/* ---------- controls: keycaps, toggles, lamps ---------- */
.btn{
  font-family:var(--sans);
  font-weight:700;
  color:var(--on-accent);
  background:var(--accent);
  border:2px solid var(--case);
  border-radius:8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.18),0 3px 0 var(--case);
  transition:transform 60ms ease,box-shadow 60ms ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 0 0 var(--case)}
.btn.secondary{
  color:var(--ink);
  background:var(--cap-top) linear-gradient(180deg,var(--cap-top),var(--cap-side));
  border-color:var(--case);
}
.btn.secondary:hover{border-color:var(--case);filter:brightness(1.03)}
@media (prefers-color-scheme:dark){.btn.secondary{border-color:#000}}
a.btn{display:inline-flex;align-items:center;text-decoration:none}

/* aria-pressed buttons are toggle switches with a pilot lamp */
.btn[aria-pressed]{display:inline-flex;align-items:center;gap:.45rem}
.btn[aria-pressed]::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:#6b6255;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.btn.secondary[aria-pressed="true"]{background:#2e2821 linear-gradient(180deg,#3a332a,#241f19);border-color:var(--case);color:#fbf6ea;box-shadow:inset 0 3px 4px rgba(0,0,0,.45),0 1px 0 var(--case);transform:translateY(2px)}
.btn[aria-pressed="true"]::before{background:#7dffa0;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 8px #58e07f}

select,input[type="text"],input[type="number"],input[type="search"],textarea{
  font-family:var(--mono);
  background:var(--panel);
  color:var(--ink);
  border:2px solid var(--line-strong);
  border-radius:6px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.12);
}
input[type="range"]{accent-color:var(--accent)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}

/* ---------- notes: paper slips held on with tape ---------- */
.note{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-left:4px solid var(--accent);
  border-radius:3px;
  color:var(--ink-soft);
  box-shadow:0 2px 4px -2px var(--shadow);
}
.note.error{background:var(--fail-soft);border-left-color:var(--fail);color:var(--ink)}
.note.warn{border-left-color:var(--warn)}

/* ---------- tool tags hung on the wall ---------- */
.tool-grid{gap:1.4rem 1rem;margin-top:1.75rem}
.tool-card{
  position:relative;
  background-color:var(--panel);
  border:2px solid var(--case);
  border-radius:10px;
  padding:1.1rem 1rem 1rem 4.6rem;
  box-shadow:0 2px 0 var(--case),0 14px 18px -12px var(--shadow);
  background-repeat:no-repeat;
  background-position:.85rem 1rem;
  background-size:2.9rem 2.9rem;
  background-image:url(art/manual.svg);
  transition:transform .25s ease;
}
/* the hook it hangs from */
.tool-card::before{
  content:"";position:absolute;top:-12px;left:50%;width:14px;height:16px;margin-left:-7px;pointer-events:none;
  background:
    radial-gradient(circle at 7px 5px,#d3d6d8 0 3.2px,#6f7477 3.8px,transparent 4.6px) 0 0/14px 10px no-repeat,
    linear-gradient(#8c9196,#5f6468) 5px 6px/4px 10px no-repeat;
}
.tool-card:nth-child(3n+1){transform:rotate(-.5deg)}
.tool-card:nth-child(3n+2){transform:rotate(.45deg)}
.tool-card:hover,.tool-card:focus-within{transform:rotate(0) translateY(-2px)}
.tool-card .eyebrow{color:var(--ink-soft);font-weight:600;margin-bottom:.25rem}
.tool-card a.title{color:var(--ink);font-family:var(--db-display);font-stretch:110%;font-weight:780;font-size:1.06rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em}
.tool-card a.title:hover{color:var(--accent);text-decoration-color:currentColor}
/* the whole tag is the link target */
.tool-card a.title::after{content:"";position:absolute;inset:0;border-radius:10px}
.tool-card p{color:var(--ink-soft)}
/* which instrument hangs here */
.tool-card:has(a.title[href*="keyboard-tester"]),.tool-card:has(a.title[href*="typing-test"]),.tool-card:has(a.title[href*="spacebar-counter"]),.tool-card:has(a.title[href*="key-rollover"]),.tool-card:has(a.title[href*="keyboard-chatter"]){background-image:url(art/keys.svg)}
.tool-card:has(a.title[href*="mouse-test"]),.tool-card:has(a.title[href*="click-test"]),.tool-card:has(a.title[href*="sensitivity-converter"]),.tool-card:has(a.title[href*="reaction-time-test"]){background-image:url(art/mouse.svg)}
.tool-card:has(a.title[href*="gamepad-tester"]),.tool-card:has(a.title[href*="stick-drift"]){background-image:url(art/gamepad.svg)}
.tool-card:has(a.title[href*="mic-test"]),.tool-card:has(a.title[href*="pitch-detector"]),.tool-card:has(a.title[href*="vocal-range-test"]),.tool-card:has(a.title[href*="mic-too-quiet"]),.tool-card:has(a.title[href*="what-is-dbfs"]){background-image:url(art/vu.svg)}
.tool-card:has(a.title[href*="dead-pixel"]),.tool-card:has(a.title[href*="ruler"]),.tool-card:has(a.title[href*="white-screen"]),.tool-card:has(a.title[href*="black-screen-test"]),.tool-card:has(a.title[href*="red-screen"]),.tool-card:has(a.title[href*="grey-screen"]),.tool-card:has(a.title[href*="refresh-rate-test"]),.tool-card:has(a.title[href*="touch-screen-test"]),.tool-card:has(a.title[href*="card-calibration"]){background-image:url(art/crt.svg)}
.tool-card:has(a.title[href*="webcam"]),.tool-card:has(a.title[href*="video-call-test"]){background-image:url(art/camera.svg)}
.tool-card:has(a.title[href*="sound-test"]),.tool-card:has(a.title[href*="water-eject"]){background-image:url(art/speaker.svg)}
.tool-card:has(a.title[href*="headphone-test"]),.tool-card:has(a.title[href*="perfect-pitch-test"]){background-image:url(art/headphones.svg)}
.tool-card:has(a.title[href*="tone-generator"]){background-image:url(art/tonegen.svg)}
.tool-card:has(a.title[href*="classroom-timer"]),.tool-card:has(a.title[href*="interval-timer"]),.tool-card:has(a.title[href*="classroom-or-interval"]){background-image:url(art/stopwatch.svg)}

/* ---------- related links: punched hang tags ---------- */
.related li a{
  background:var(--panel);
  color:var(--ink);
  border:2px solid var(--case);
  border-radius:4px 14px 14px 4px;
  padding:.3rem .9rem .3rem 1.6rem;
  position:relative;
  font-weight:600;
  box-shadow:0 2px 0 var(--case);
}
.related li a::before{content:"";position:absolute;left:.55rem;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--board);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 0 1.5px var(--line-strong)}
.related li a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- spec sheets: prose clipped to the wall ---------- */
main .prose,main>.faq{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:1.1rem 1.15rem .9rem;
  margin-top:2.6rem;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 18px -14px var(--shadow);
}
main>.faq{max-width:48.5rem}
/* bulldog clip */
main .prose::before,main>.faq::before{
  content:"";position:absolute;top:-14px;left:1.4rem;width:46px;height:22px;border-radius:4px 4px 2px 2px;pointer-events:none;
  background:linear-gradient(180deg,#9aa0a5,#5b6166);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 2px rgba(0,0,0,.3);
}
main .prose>h2:first-child,main>.faq>h2:first-child{margin-top:.35rem}
.tool-panel .prose,.verdict .prose{background:none;border:0;box-shadow:none;padding:0;margin-top:0}
.tool-panel .prose::before,.verdict .prose::before{display:none}
.prose code{background:var(--accent-soft);color:var(--ink)}
.faq details{background:var(--paper);border:1px solid var(--line-strong);border-radius:4px}
.faq summary{font-weight:650}
.faq summary::before{color:var(--accent);font-weight:700}
.faq details>div{color:var(--ink-soft)}
.prose table,.table-wrap table{background:var(--panel)}

/* ---------- bench edge (footer) ---------- */
.site-footer{
  background:var(--bench);
  border-top:4px solid var(--rail-edge);
  margin-top:3rem;
  box-shadow:inset 0 6px 8px -4px rgba(0,0,0,.4);
}
.site-footer .inner{color:var(--bench-soft)}
.site-footer a{color:var(--bench-ink)}
.site-footer a:hover{color:#fff}
.site-footer .promise{color:var(--bench-soft)}

/* ---------- verdict: a printed test certificate with a rubber stamp ---------- */
.verdict{
  position:relative;
  background-color:var(--thermal);
  color:var(--thermal-ink);
  border:0;
  border-radius:2px;
  font-family:var(--mono);
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 14px 20px -14px var(--shadow);
  /* torn top and bottom edges */
  -webkit-mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 16px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/14px 8px repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/14px 8px repeat-x;
  mask:linear-gradient(#000 0 0) 0 8px/100% calc(100% - 16px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/14px 8px repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/14px 8px repeat-x;
  padding-top:1.3rem;padding-bottom:1.3rem;
}
.verdict .vhead{font-family:var(--mono);color:#4a443a;border-bottom:1px dashed #8d8473;padding-bottom:.35rem;letter-spacing:.18em}
.verdict .vhead::after{content:" · test certificate" / "";letter-spacing:.12em}
.verdict .vband{
  display:inline-block;
  font-family:var(--db-display);font-stretch:125%;font-weight:850;
  font-size:1.2rem;letter-spacing:.08em;
  background:transparent;
  color:var(--stamp-idle);
  border:3px solid currentColor;
  outline:1px solid currentColor;outline-offset:2px;
  border-radius:6px;
  padding:.12rem .7rem;
  margin:.7rem 0 .55rem .3rem;
  transform:rotate(-4deg);
  opacity:.95;
}
.verdict[data-verdict="pass"] .vband{background:transparent;color:var(--stamp-pass)}
.verdict[data-verdict="check"] .vband{background:transparent;color:var(--stamp-check)}
.verdict[data-verdict="fault"] .vband{background:transparent;color:var(--stamp-fault)}
.verdict .vnum{color:var(--thermal-ink)}
.verdict .vwhy,.verdict .vthresh{color:#4a443a}
.verdict .vthresh{border-top:1px dashed #8d8473}
.verdict a{color:#9a330c}
.ladder .rung{background:var(--panel);border:1px solid var(--line-strong)}
.ladder .rk{color:var(--ink-soft)}
.ladder .rung p:last-child{color:var(--ink-soft)}

/* ---------- ad slots stay what they were: reserved, empty ---------- */
.ad-slot.active{background:var(--paper)}

/* ---------- motion is decoration only ---------- */
@media (prefers-reduced-motion:reduce){
  .tool-card,.tool-card:nth-child(n){transform:none!important;transition:none}
  .btn,.pickbtn{transition:none}
  .btn:active:not(:disabled),.pickbtn:active{transform:none}
  .btn.secondary[aria-pressed="true"]{transform:none}
}
@media print{
  body{background:#fff}
  .tool-panel::before,.tool-card::before,main .prose::before{display:none}
}

/* ---------- home: the tool wall ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 2rem;align-items:center}
.hero .eyebrow{width:fit-content;background:var(--case);color:#f4ecdc;padding:.06rem .5rem;margin:0 0 .45rem;border-radius:2px;line-height:1.45;letter-spacing:.16em;font-weight:600;box-shadow:0 1px 0 rgba(0,0,0,.4);transform:rotate(-.6deg)}
@media (prefers-color-scheme:dark){.hero .eyebrow{background:#e9dfcb;color:#1f1b16}}
.hero h1{font-size:clamp(1.9rem,7.4vw,3.3rem);font-stretch:125%;font-weight:850;line-height:1.02;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 0 rgba(255,250,235,.5)}
@media (prefers-color-scheme:dark){.hero h1{text-shadow:none}}
.hero .lede{font-size:1.02rem;margin-bottom:1.25rem}
.hero-art{display:none;width:100%;height:auto;max-width:360px;justify-self:end;overflow:visible;filter:drop-shadow(0 10px 8px var(--shadow))}
@media (min-width:760px){.hero{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}.hero-art{display:block}}
.scope-trace{flex:1 0 100%;display:block;height:28px;margin:.15rem 0 -.1rem;color:#7dffa0;filter:drop-shadow(0 0 3px rgba(120,255,160,.8));opacity:.9}
.scope-trace path{stroke-dasharray:6 0;animation:scope 3.2s linear infinite}
@keyframes scope{from{transform:translateX(0)}to{transform:translateX(-150px)}}
.vu-needle{transform-origin:110px 128px;transform-box:view-box;animation:vu 2.6s ease-in-out infinite alternate}
@keyframes vu{0%{transform:rotate(-8deg)}35%{transform:rotate(34deg)}55%{transform:rotate(18deg)}80%{transform:rotate(52deg)}100%{transform:rotate(26deg)}}
.sw-hand{transform-origin:270px 102px;transform-box:view-box;animation:sw 60s steps(60) infinite}
@keyframes sw{to{transform:rotate(360deg)}}
.crt-cursor{animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .scope-trace path,.vu-needle,.sw-hand,.crt-cursor{animation:none!important}
  .vu-needle{transform:rotate(26deg)}
}

/* ---------- page-local colors that assumed a light page ----------
   A few tool pages paint white text on the accent; the dark accent is
   light, so those labels take the on-accent ink instead. */
main .m-part.down,main .ro-key.down{color:var(--on-accent)}
main .ro-combo[aria-pressed="true"]{color:var(--panel)}
main .ro-combo[data-state="blocked"]::after,main .ro-combo[data-state="ghost"]::after{color:var(--fail)}

/* ============================================================
   Instruments (site-wide build-out). Every tool's faceplate names
   its instrument on a riveted plate, and the shared parts below
   (monitor bezel, tablet, viewfinder, stopwatch LCD, result slip,
   faders) are what each page's own <style> builds on. Paint and
   frames only: nothing here changes what a tool measures, and no
   rule animates anything a photosensitivity check would count.
   ============================================================ */

/* ---------- the nameplate: data-plate on the faceplate ---------- */
.tool-panel[data-plate]::after{
  content:attr(data-plate);
  content:attr(data-plate) / "";
  position:absolute;top:-.72rem;left:50%;transform:translateX(-50%);z-index:1;
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 .56rem/1 var(--db-mono);letter-spacing:.16em;text-transform:uppercase;
  color:#23201b;
  background:
    radial-gradient(circle at 5px 50%,#6f7477 0 1.6px,transparent 2.2px),
    radial-gradient(circle at calc(100% - 5px) 50%,#6f7477 0 1.6px,transparent 2.2px),
    linear-gradient(180deg,#f1f2f3,#b9bec2);
  border:1px solid #5f6468;border-radius:3px;padding:.32rem .9rem .3rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 0 rgba(0,0,0,.35);
  pointer-events:none;
}

/* ---------- a monitor on the bench: display tools ---------- */
.tool-panel[data-inst~="monitor"]{
  --bezel:#1d1a16;
  border:12px solid var(--bezel);border-bottom-width:30px;border-radius:16px;
  background-image:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 32%);
  box-shadow:inset 0 0 0 1px #000,inset 0 0 28px rgba(0,0,0,.16),0 0 0 1px #000,0 30px 26px -22px var(--shadow);
  margin-bottom:3.4rem;
}
@media (prefers-color-scheme:dark){.tool-panel[data-inst~="monitor"]{--bezel:#0b0a08;background-image:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 32%);box-shadow:inset 0 0 0 1px #000,inset 0 0 28px rgba(0,0,0,.5),0 0 0 1px #4a4238,0 30px 26px -22px var(--shadow)}}
/* the stand: neck and foot, under the chin */
.tool-panel[data-inst~="monitor"]::before{
  top:auto;left:50%;right:auto;bottom:calc(-30px - 2.9rem);width:10rem;margin-left:-5rem;height:2.9rem;
  background:
    linear-gradient(90deg,#2a2621,#4a4339 45%,#2a2621) 50% 0/2.4rem 2.2rem no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 100%,#3a342c 0 92%,transparent 96%) 50% 100%/100% .8rem no-repeat;
}
/* the plate sits on the chin; a pilot lamp beside it */
.tool-panel[data-inst~="monitor"][data-plate]::after{
  top:auto;bottom:-23px;background:linear-gradient(180deg,#3a352e,#24201b);color:#cfc6b6;border-color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.tool-panel[data-inst~="monitor"]>:first-child{margin-top:0}
@media (max-width:700px){
  .tool-panel[data-inst~="monitor"]{border:8px solid var(--bezel);border-bottom-width:26px;border-radius:12px}
  .tool-panel[data-inst~="monitor"][data-plate]::after{bottom:-21px}
  .tool-panel[data-inst~="monitor"]::before{bottom:calc(-26px - 2.6rem);height:2.6rem}
}

/* ---------- a tablet: the touch grid ---------- */
.tool-panel[data-inst~="tablet"]{
  --bezel:#1d1a16;
  border:14px solid var(--bezel);border-top-width:26px;border-bottom-width:26px;border-radius:30px;
  background-image:none;
  box-shadow:inset 0 0 0 1px #000,0 0 0 2px #5b544a,0 0 0 3px #000,0 22px 24px -16px var(--shadow);
}
@media (prefers-color-scheme:dark){.tool-panel[data-inst~="tablet"]{--bezel:#0b0a08;box-shadow:inset 0 0 0 1px #000,0 0 0 2px #4a4238,0 0 0 3px #000,0 22px 24px -16px var(--shadow)}}
/* front camera */
.tool-panel[data-inst~="tablet"]::before{
  top:-17px;left:50%;right:auto;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4f6b8a 0 1.5px,#0e0d0b 2.5px);box-shadow:0 0 0 1px #2e2a24;
}
.tool-panel[data-inst~="tablet"][data-plate]::after{
  top:auto;bottom:-20px;background:none;border:0;box-shadow:none;color:#9e9586;padding:.2rem .4rem;
}
@media (max-width:700px){.tool-panel[data-inst~="tablet"]{border-width:22px 9px;border-radius:24px}
  .tool-panel[data-inst~="tablet"]::before{top:-15px}
  .tool-panel[data-inst~="tablet"][data-plate]::after{bottom:-18px}}

/* ---------- a camera viewfinder ---------- */
.tool-panel[data-inst~="camera"] .cam-wrap{
  position:relative;
  border:7px solid #15130f;border-radius:14px;
  box-shadow:0 0 0 2px #4a4238,0 0 0 5px #15130f,0 10px 18px -10px var(--shadow);
}
.tool-panel[data-inst~="camera"] .cam-wrap::after{
  content:"";position:absolute;inset:10px;z-index:2;pointer-events:none;
  --c:rgba(255,255,255,.82);--l:22px;--t:2px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 50% 50%/18px 1px,linear-gradient(var(--c),var(--c)) 50% 50%/1px 18px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.8));
}

/* ---------- a stopwatch: the timers' big digits ---------- */
:not(:fullscreen)>.lcd-case:not(:fullscreen){
  position:relative;
  color:#1c2216;
  background:#aab596 linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%,rgba(0,0,0,.06));
  border:12px solid var(--case);border-radius:22px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.4),0 0 0 2px #5b544a,0 4px 0 #000,0 18px 22px -14px var(--shadow);
  text-shadow:2px 2px 0 rgba(28,34,22,.14);
  padding:.15em .2em .05em;
}
/* the crown and its two pushers */
:not(:fullscreen)>.lcd-case:not(:fullscreen)::before{
  content:"";position:absolute;left:50%;top:-30px;width:46px;height:18px;margin-left:-23px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,#8c9196 0 2px,#5f6468 2px 4px) 50% 0/26px 12px no-repeat,
    linear-gradient(#6f7477,#4a4f53) 50% 100%/12px 7px no-repeat;
}
:not(:fullscreen)>.lcd-case:not(:fullscreen)::after{
  content:"";position:absolute;inset:-26px -26px auto;height:12px;pointer-events:none;
  background:
    linear-gradient(#c8481a,#962f08) 18% 100%/30px 9px no-repeat,
    linear-gradient(#8c9196,#5f6468) 82% 100%/30px 9px no-repeat;
}
@media (prefers-color-scheme:dark){:not(:fullscreen)>.lcd-case:not(:fullscreen){background-color:#8f9a7c;border-color:#0b0a08;box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.4),0 0 0 2px #4a4238,0 4px 0 #000}}

/* ---------- a result slip: tools that report a result without a verdict box ---------- */
[data-slip]{
  position:relative;
  background:var(--thermal) !important;
  color:var(--thermal-ink) !important;
  border:0 !important;border-radius:2px;
  font-family:var(--mono);
  padding:1.05rem 1rem .9rem !important;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 12px 18px -12px var(--shadow);
  -webkit-mask:linear-gradient(#000 0 0) 0 7px/100% calc(100% - 14px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/12px 7px repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/12px 7px repeat-x;
  mask:linear-gradient(#000 0 0) 0 7px/100% calc(100% - 14px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/12px 7px repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/12px 7px repeat-x;
}
[data-slip]::before{
  content:attr(data-slip);content:attr(data-slip) / "";
  display:block;font:600 .64rem/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:#4a443a;border-bottom:1px dashed #8d8473;padding-bottom:.3rem;margin-bottom:.5rem;
}
[data-slip] a{color:#9a330c}
[data-slip] table{background:transparent}
[data-slip] th,[data-slip] td{color:var(--thermal-ink);border-color:#c9bfae}

/* ---------- faders: every range input is a slide pot with a knurled cap ---------- */
input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;height:28px;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(180deg,#14110d,#3a332a);box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.4)}
input[type="range"]::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(180deg,#14110d,#3a332a);box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.4)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:26px;margin-top:-9px;border-radius:3px;border:1px solid #14110d;
  background:linear-gradient(90deg,transparent 7px,var(--accent) 7px 9px,transparent 9px),repeating-linear-gradient(180deg,#e8e2d6 0 2px,#b9b1a1 2px 4px);box-shadow:0 2px 0 #000}
input[type="range"]::-moz-range-thumb{width:14px;height:24px;border-radius:3px;border:1px solid #14110d;
  background:linear-gradient(90deg,transparent 6px,var(--accent) 6px 8px,transparent 8px),repeating-linear-gradient(180deg,#e8e2d6 0 2px,#b9b1a1 2px 4px);box-shadow:0 2px 0 #000}
input[type="range"]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- an amber readout (tuners, function generator) ---------- */
.readout.amber,[data-inst~="amber"] .readout{
  --readout-bg:#160d02;--readout-ink:#ffc46b;--readout-dim:#d08b2c;--scope-grid:rgba(255,190,90,.06);
  text-shadow:0 0 6px rgba(255,170,60,.45);
}
[data-inst~="amber"] .readout .r-value.pass{color:#ffd88f}

/* ============================================================
   Paperwork: guides read as service-manual pages punched for a
   binder, sources as an index card, and the legal, about and
   contact pages as one document on a clipboard.
   ============================================================ */
/* punched for the binder: every spec sheet on the wall */
main .prose,main>.faq,main.wrap.prose{
  padding-left:2.1rem;
  background-image:
    radial-gradient(circle at .85rem 2.2rem,var(--board) 0 5px,var(--line-strong) 5.5px,transparent 6.5px),
    radial-gradient(circle at .85rem 50%,var(--board) 0 5px,var(--line-strong) 5.5px,transparent 6.5px),
    radial-gradient(circle at .85rem calc(100% - 2.2rem),var(--board) 0 5px,var(--line-strong) 5.5px,transparent 6.5px);
  background-repeat:no-repeat;
}
.tool-panel .prose,.verdict .prose{padding-left:0;background-image:none}

/* a guide's byline is the manual's revision line */
main:has(>[data-article-meta])>[data-article-meta]{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--ink-soft);
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:.35rem 0;width:fit-content;max-width:100%;
}
main:has(>[data-article-meta])>[data-article-meta] strong{color:var(--ink)}

/* sources: a ruled index card with a red head line */
main>[data-sources]{
  position:relative;max-width:48.5rem;margin-top:2.4rem;
  background-color:#fffdf6;color:#26231e;
  background-image:linear-gradient(transparent calc(2.3rem - 2px),#d9534f calc(2.3rem - 2px) 2.3rem,transparent 2.3rem),
    repeating-linear-gradient(transparent 0 1.45rem,#bcd3e6 1.45rem calc(1.45rem + 1px));
  background-position:0 0,0 2.3rem;background-repeat:no-repeat,repeat;
  border:1px solid #c9bfae;border-radius:3px;padding:.55rem 1.1rem 1rem;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 18px -14px var(--shadow);transform:rotate(-.4deg);
}
main>[data-sources] h2{margin:0 0 .9rem;font-size:1.05rem;color:#26231e}
main>[data-sources] p,main>[data-sources] li{color:#3f392f}
main>[data-sources] a{color:#9a330c}
@media (prefers-reduced-motion:reduce){main>[data-sources]{transform:none}}

/* legal, about, contact, 404: one document on a clipboard */
main.wrap.prose{
  position:relative;
  max-width:50rem;
  margin-top:2.6rem;
  background-color:var(--panel);
  border:1px solid var(--line-strong);
  border-top:14px solid #8a6a43;
  border-radius:6px 6px 4px 4px;
  padding:1.6rem 1.25rem 1.4rem 2.2rem;
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 22px -16px var(--shadow);
}
/* the clip */
main.wrap.prose::before{
  content:"";position:absolute;top:-30px;left:50%;width:120px;height:32px;margin-left:-60px;pointer-events:none;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#d3d6d9,#8c9196 55%,#6f7477);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 3px rgba(0,0,0,.35);
  -webkit-mask:radial-gradient(circle 9px at 50% 9px,#0000 98%,#000) ;mask:radial-gradient(circle 9px at 50% 9px,#0000 98%,#000);
}
main.wrap.prose>h1{border-bottom:2px solid var(--ink);padding-bottom:.4rem}
@media (prefers-color-scheme:dark){main.wrap.prose{border-top-color:#5a4329}}
@media (max-width:700px){main.wrap.prose{margin-left:.5rem;margin-right:.5rem;padding:1.3rem 1rem 1.2rem 1.9rem}}