/* OpenDerm — cool-paper design system (shared by index.html & how-it-works.html) */
/* ============================================================
   OpenDerm — design variant · "Cool Paper" · near-white cool ground, slate-navy ink, soft blue shadows
   The original index.html layout, reskinned with a Physical-
   Intelligence-inspired language: warm paper, system mono at
   text sizes, serif reserved for display, black ink + gray,
   hairline rules, underline links, hard offset shadows. No color.
   ============================================================ */
:root{
  --paper:   #F3F5F7;
  --card:    #FBFCFD;
  --ink:     #14203A;
  --ink-2:   #2E3A52;          /* body */
  --gray:    #5A6478;          /* secondary (AA on paper) */
  --gray-2:  #767F91;          /* faint meta */
  --rule:    #2A3550;          /* strong rule */
  --rule-lt: rgba(20,32,58,0.16);
  --accent:  #1a4ed8; /* hairline */
  --shadow:  0 14px 32px -16px rgba(20,32,58,0.34);
  --shadow-sm: 0 8px 18px -10px rgba(20,32,58,0.28);
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--mono);
  font-size:14.2px;
  color:var(--ink-2);
  background:var(--paper);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
h1,h2,h3,h4{ color:var(--ink); line-height:1.12; font-weight:500; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block: clamp(44px, 6vw, 76px); }
.section + .section{ border-top:none; }
.section + .section::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:calc(min(100%, var(--maxw)) - 2 * var(--gutter)); height:1px; background:var(--rule-lt); }   /* faint divider, only as wide as the content */

/* mono labels */
.eyebrow{
  font-size:0.78rem; font-weight:700; letter-spacing:0.06em;
  color:var(--ink); display:inline-flex; align-items:center; gap:0.7em;
}
.eyebrow::before{ content:""; width:8px; height:8px; background:var(--accent); }
.eyebrow .idx{ color:var(--gray-2); font-weight:400; }
.figtag{ font-size:0.75rem; color:var(--gray); }

/* display type — serif is reserved for display, like a paper's title */
.display{
  font-family:var(--serif);
  font-weight:400; letter-spacing:-0.015em; line-height:1.02;
  font-size:clamp(2.6rem, 6.5vw, 5rem);
  color:var(--ink);
}
.display em{ font-style:italic; color:var(--ink); }
.h-section{
  font-family:var(--serif);
  font-weight:400; font-size:clamp(1.8rem, 3.8vw, 2.7rem);
  letter-spacing:-0.015em; line-height:1.1;
}
.h-section em{ font-style:italic; }
.lede{ font-size:0.97rem; line-height:1.75; color:var(--ink-2); }
.maxch{ max-width:64ch; }
.mono{ font-family:var(--mono); }
.mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }

/* ---------- buttons: bordered mono boxes with hard offset shadows ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.85rem; font-weight:700; letter-spacing:0.02em;
  padding:12px 20px; text-decoration:none;
  border:1px solid var(--ink);
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn--primary{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-sm); }
.btn--ghost{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(20,32,58,0.38); }
.btn:active{ transform:translateY(0); box-shadow:0 6px 14px -8px rgba(20,32,58,0.30); }
.btn .ar{ font-weight:400; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:90; background:var(--paper); border-bottom:1px solid var(--rule); }
.nav__in{ max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand__mark{ width:24px; height:24px; }
.brand span{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); }
.brand span i{ font-style:italic; color:var(--blue); }
.nav__links{ display:flex; align-items:center; gap:24px; font-size:0.9rem; }
.nav__links a[href="landscape.html"]{ order:1; }   /* "Other Approaches" sits last, after GitHub */
@media (min-width:901px){ .nav__links a[href="landscape.html"]{ padding-left:24px; border-left:1px solid var(--gray-2); } }   /* divider between GitHub and Other Approaches */
.nav__links > a{ text-decoration:none; }
.nav__links > a:hover{ text-decoration:underline; }
.nav__dropdown{ position:relative; }
.nav__dropbtn{ font-size:inherit; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; padding:0; text-decoration:none; }
.nav__dropbtn:hover{ text-decoration:underline; }
.nav__caret{ width:11px; height:11px; }
.nav__menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:190px; background:var(--card); border:1px solid var(--ink); box-shadow:var(--shadow-sm);
  padding:6px; opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.nav__dropdown:hover .nav__menu, .nav__dropdown:focus-within .nav__menu{ opacity:1; visibility:visible; }
/* invisible bridge over the gap between "Build it" and the menu, so the menu
   stays open while the pointer travels down to the items (desktop only) */
@media (min-width: 901px){
  .nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
}
.nav__menu a{ display:block; padding:8px 12px; text-decoration:none; font-size:inherit; }
.nav__menu a:hover{ background:var(--paper); text-decoration:underline; }
.nav__toggle{ display:none; flex-direction:column; gap:5px; padding:6px; }
.nav__toggle span{ width:22px; height:2px; background:var(--accent); }
@media (max-width: 900px){
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px var(--gutter) 18px;
    display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links > a, .nav__dropbtn{ padding:10px 0; }
  .nav__dropdown{ width:100%; }
  .nav__menu{ position:static; transform:none; opacity:1; visibility:visible; border:none; box-shadow:none; background:none; padding:0 0 0 18px; }
  .nav__cta{ margin-top:10px; }
}

/* ---------- hero — original split layout ---------- */
.hero{ position:relative; padding-top:clamp(28px, 3.5vw, 44px); padding-bottom:clamp(40px, 6vw, 72px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,32,58,0.10) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 32%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 60% 32%, #000 30%, transparent 78%);
  opacity:0.35;
}
.hero__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px, 5vw, 72px); align-items:center; }
.hero__copy{ max-width:620px; }
.hero h1{ margin:0 0 26px; }
.hero .lede{ max-width:54ch; }
.hero .lede + .lede{ color:var(--gray); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.hero__cta--quad{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; max-width:390px; }
/* the four hero CTAs are equal-weight controls: uppercase mono label left,
   direction glyph right (↓ scrolls, → navigates), hard offset shadow that the
   hover lifts and the click presses flat — unmistakably pressable */
.hero__cta--quad .btn{
  justify-content:space-between;
  background:var(--card); color:var(--ink);
  font-size:0.76rem; text-transform:uppercase; letter-spacing:0.07em;
  padding:13px 15px;
  box-shadow:3px 3px 0 0 var(--line-2);
}
.hero__cta--quad .btn .ar{ color:var(--gray); transition:transform .14s ease, color .14s ease; }
.hero__cta--quad .btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--line-2); }
.hero__cta--quad .btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 0 var(--line-2); }
.hero__cta--quad .btn:hover .ar{ color:var(--blue-deep); transform:translateX(3px); }
.hero__cta--quad .btn[href^="#"]:hover .ar{ transform:translateY(3px); }
@media (max-width: 420px){ .hero__cta--quad{ grid-template-columns:1fr; } }
.hero__photo{ width:100%; height:auto; mix-blend-mode:multiply; }
/* on desktop, let the photo outgrow its column — mostly rightward (as on index) */
@media (min-width: 901px){ .hero__photo{ width:122%; max-width:none; margin-left:-5%; margin-right:-17%; } }

/* ---------- three approaches ---------- */
.approaches3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(12px, 1.6vw, 18px); }
.appx { display: contents; }
.appx__body { grid-row: 1; display: flex; flex-direction: column; align-self: stretch; }
.appx__viz { grid-row: 2; position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 1.4vw, 18px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); background: radial-gradient(circle at 1px 1px, rgba(15,27,45,0.04) 1px, transparent 0) 0 0 / 22px 22px, linear-gradient(160deg, #fbfcfe, #eef3fb); }
.appx__viz svg.drawing { width: 100%; height: auto; }
.appx__viz .corner { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--blue); opacity: 0.5; }
.appx__viz .corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.appx__viz .corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.appx__viz .corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.appx__viz .corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.appx__viz .hud { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.appx__n { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.appx__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1.6vw, 1.6rem); letter-spacing: -0.01em; line-height: 1.1; }
.appx__body > p { flex:1; font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; }
.appx__traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.appx__traits span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); }
.appx__eg { min-height: 3.1em; font-family: var(--mono); font-size: 0.68rem; line-height: 1.55; color: var(--blue-deep); letter-spacing: 0.02em; margin-top: 13px; }
.appx__eg b { color: var(--blue-deep); font-weight: 600; }
@media (max-width: 860px) {
  .approaches3 { display: block; }
  .appx { display: block; }
  .appx + .appx { margin-top: clamp(26px, 6vw, 40px); padding-top: clamp(20px, 4vw, 26px); border-top: 1px solid var(--line); }
  .appx__viz { margin-top: 12px; }
}

/* shared drawing primitives for the three approach illustrations */
.drawing { display: block; }
.il-fig { fill: #e7cbb8; stroke: #cbaa8f; stroke-width: 1.2; stroke-linejoin: round; }
.il-rail { fill: #dbe3ee; stroke: var(--line-2); stroke-width: 1.1; }
.il-frame { fill: #eef2f8; stroke: var(--line-2); stroke-width: 1.3; }
.il-cam { fill: #ffffff; stroke: var(--ink-3); stroke-width: 1.3; }
.il-cam-d { fill: #e6edf6; }
.il-lens { fill: #16223a; }
.il-lens-i { fill: #33507f; }
.il-flash { fill: #cfe0fb; }
.il-wire { fill: none; stroke: var(--blue); stroke-width: 0.7; opacity: 0.26; }
.il-sight { fill: none; stroke: var(--blue); stroke-width: 0.9; opacity: 0.34; }
.il-arm { fill: none; stroke: #c4cfdd; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.il-arm-c { fill: none; stroke: #e7edf4; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.il-joint { fill: var(--blue); stroke: #fff; stroke-width: 1.6; }
.il-path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.il-beam { fill: none; stroke: var(--teal); stroke-width: 1.1; opacity: 0.8; }
.il-lead { fill: none; stroke: var(--ink-4); stroke-width: 0.8; stroke-dasharray: 3 3; }
.il-lab { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-3); letter-spacing: 0.03em; }
.il-lab-b { font-family: var(--mono); font-size: 8.5px; fill: var(--blue-deep); letter-spacing: 0.03em; }
.il-cap { font-family: var(--mono); font-size: 9px; fill: var(--blue-deep); letter-spacing: 0.09em; }
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__viz{ order:-1; max-width:480px; }
}

/* ---------- scroll reveal (never on the blended photo) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d, 0ms); }
.reveal.in{ opacity:1; transform:none; }
.hero__viz{ opacity:1 !important; transform:none !important; } /* multiply img: no transform/opacity ancestors */
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- section heads ---------- */
.sec-head{ margin-bottom:30px; }
.sec-head .h-section{ margin-top:16px; max-width:26ch; }
.prob-body .maxch{ max-width:none; font-size:0.95rem; }

/* ---------- in-text reference citations ----------
   keycap-style chips (mono numeral in a hairline box) instead of bare
   superscripts: no underline noise, no line-height disruption, and a
   hover card previews the source so the reader doesn't lose their place */
sup.cite{ line-height:0; vertical-align:0.34em; white-space:nowrap; }
sup.cite a{
  position:relative; display:inline-block;
  font-family:var(--mono); font-size:0.62rem; font-weight:600; line-height:1;
  padding:2.5px 4.5px 2px; margin:0 1.5px;
  border:1px solid var(--line-2); background:var(--card); color:var(--blue-deep);
  text-decoration:none;
  transition:border-color .14s ease, background .14s ease;
}
sup.cite a:hover{ border-color:var(--blue-deep); background:var(--blue-tint); }
sup.cite a[data-cite]:hover::after{
  content:attr(data-cite);
  position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:300px; white-space:normal; text-align:left;
  font-weight:400; font-size:0.66rem; line-height:1.55; letter-spacing:0;
  color:var(--ink-2); background:var(--card);
  border:1px solid var(--line-2); box-shadow:var(--shadow-sm);
  padding:8px 11px; pointer-events:none; z-index:6;
}

/* reference list — jumping to an entry flashes it; ↩ returns to the citation */
.refs{ margin-top:clamp(32px,4vw,48px); padding-top:18px; border-top:1px solid var(--line);
  font-size:0.75rem; line-height:1.5; color:var(--ink-3); }
.refs p{ padding:3px 8px; margin-left:-8px; scroll-margin-top:96px; transition:background .6s ease; }
.refs p + p{ margin-top:6px; }
.refs p:target{ background:var(--blue-tint); }
.refs .backref{ margin-left:6px; color:var(--gray-2); text-decoration:none; }
.refs .backref:hover{ color:var(--blue-deep); }
sup.cite a{ scroll-margin-top:96px; }
.points{ display:grid; }
.point{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:24px 0; border-top:1px solid var(--rule-lt); align-items:start; }
.point:last-child{ border-bottom:1px solid var(--rule-lt); }
.point .pn{ font-weight:700; color:var(--ink); padding-top:2px; }
.point h3{ font-family:var(--mono); font-size:0.95rem; font-weight:700; margin-bottom:8px; }
.point p{ color:var(--gray); font-size:0.97rem; max-width:70ch; }
@media (max-width: 600px){ .point{ grid-template-columns:1fr; gap:8px; } }

/* figure panel — 1px rule + offset shadow (the one loud PI element) */
.panel{ background:var(--card); border:1px solid var(--ink); box-shadow:var(--shadow); }
figure.panel{ padding:clamp(14px, 2vw, 22px); }
figure.panel figcaption{ margin-top:12px; padding-top:10px; border-top:1px solid var(--rule-lt); }

/* stats table (replaces tonal stat blocks) */
table.data{ border-collapse:collapse; width:100%; margin-top:26px; font-size:0.9rem; }
table.data td{ padding:9px 16px 9px 0; border-bottom:1px solid var(--rule-lt); vertical-align:baseline; }
table.data tr:first-child td{ border-top:1px solid var(--rule); }
table.data td.v{ font-weight:700; color:var(--ink); white-space:nowrap; font-size:1.05rem; }
table.data td.d{ color:var(--gray); }

/* ---------- prototype pending tiles ---------- */
.grid{ display:grid; gap:clamp(16px, 2vw, 24px); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px){ .grid-3, .grid-4{ grid-template-columns:1fr; } }
.pending{
  border:1px dashed rgba(42,53,80,0.36);
  min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--gray); font-size:0.78rem; text-align:center; padding:18px;
  background:transparent;
}
.pending__ico{ width:26px; height:26px; stroke:var(--gray-2); }
.pending__tag{ font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.7rem; }
.pending__hint{ color:var(--gray-2); }

/* ---------- compare slider (original element, paper-styled) ---------- */
.compare{
  --compare-pos:50%;
  position:relative; aspect-ratio:4/3; overflow:hidden; touch-action:none; cursor:ew-resize;
  border:1px solid var(--ink); background:var(--card); box-shadow:var(--shadow);
}
.compare__layer{ position:absolute; inset:0; }
.compare__layer svg{ width:100%; height:100%; }
.compare__layer img{
  display:block; width:100%; height:100%; object-fit:cover; user-select:none;
}
.compare__after{
  inset:0 auto 0 0; width:var(--compare-pos); overflow:hidden;
}
.compare__after img{ object-position:left center; }
.compare__handle{ position:absolute; top:0; bottom:0; left:var(--compare-pos); width:0; }
.compare__handle::before{ content:""; position:absolute; top:0; bottom:0; left:-0.5px; width:1.5px; background:var(--accent); }
.compare__grip{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  width:34px; height:34px; background:var(--paper); border:1px solid var(--ink); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.compare__lab{
  position:absolute; bottom:10px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em;
  background:var(--paper); border:1px solid var(--ink); padding:3px 8px; color:var(--ink);
}
.compare__lab.l{ left:10px; } .compare__lab.r{ right:10px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width: 600px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- build cards ---------- */
.buildcard{
  display:block; text-decoration:none; background:var(--card);
  border:1px solid var(--ink); box-shadow:var(--shadow-sm);
  padding:22px; transition:transform .14s ease, box-shadow .14s ease;
}
.buildcard:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(20,32,58,0.38); }
.buildcard h3{ font-family:var(--mono); font-size:0.95rem; font-weight:700; margin-top:14px; }
.buildcard h3 .ar{ font-weight:400; }
.card__ico{ width:30px; height:30px; color:var(--ink); }

/* ---------- footer ---------- */
.footer{ border-top:none; padding:44px 0 56px; font-size:0.85rem; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px, 4vw, 48px); }
@media (max-width: 800px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 500px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin-bottom:12px; }
.footer__brand i{ font-style:italic; color:var(--blue); }
.footer p{ color:var(--gray); }
.footer h5{ font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
.footer ul{ list-style:none; }
.footer li{ margin-bottom:8px; color:var(--ink-2); }
.footer a{ color:var(--ink-2); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
.footer__bottom{
  margin-top:44px; padding-top:16px; border-top:1px solid var(--rule-lt);
  display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:space-between; color:var(--gray); font-size:0.78rem;
}

/* ============================================================
   COMPATIBILITY TOKENS
   Map the original openderm variable names to cool-theme values,
   so shared chrome (below) and how-it-works.html's inline
   component styles resolve correctly.
   ============================================================ */
:root{
  --paper-2:    #E9EEF4;
  --paper-3:    #E0E7F1;
  --line:       #D8DFE9;
  --line-2:     #C3CDDB;
  --blue:       var(--accent);
  --blue-deep:  #12379e;
  --blue-700:   #1741b8;
  --blue-tint:  #E7EDFB;
  --blue-tint-2:#D6E2F9;
  --ink-3:      var(--gray);
  --ink-4:      var(--gray-2);
  --amber:      #B7791F;
  --amber-tint: #F6ECD6;
  --teal:       #0a7d8c;
  --good:       #1f9a6a;
  --danger:     #d23b43;
  --radius:     0px;
  --radius-lg:  0px;
  --shadow-1:   var(--shadow-sm);
  --shadow-2:   var(--shadow);
  --shadow-3:   0 24px 50px -20px rgba(20,32,58,0.42);
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --sans:       var(--mono);
}

/* ============================================================
   SHARED CHROME used by subpages (how-it-works.html, etc.)
   ============================================================ */
.mt-s { margin-top: 14px; }
.link-u { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); transition: text-decoration-color 0.2s; }
.link-u:hover { text-decoration-color: var(--ink); }
.h-sub { font-family: var(--mono); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink); line-height: 1.25; letter-spacing: -0.005em; max-width: 48ch; }
.quote { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.32; color: var(--ink); max-width: 22ch; letter-spacing: -0.01em; }

/* registration crosshair marks */
.regmark { position: absolute; width: 13px; height: 13px; pointer-events: none; opacity: 0.5; }
.regmark::before, .regmark::after { content: ""; position: absolute; background: var(--accent); }
.regmark::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-0.5px); }
.regmark::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-0.5px); }
.regmark.tl { top: 22px; left: 22px; } .regmark.tr { top: 22px; right: 22px; }
.regmark.bl { bottom: 22px; left: 22px; } .regmark.br { bottom: 22px; right: 22px; }

/* 2-column points variant */
.points--2col { grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 48px); }
.points--2col .point:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-lt); }
@media (max-width: 600px) { .points--2col { grid-template-columns: 1fr; } .points--2col .point:nth-last-child(2) { border-bottom: none; } }

/* subpage header band */
.pagehead { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--rule); position: relative;
  background: radial-gradient(circle at 1px 1px, rgba(20,32,58,0.07) 1px, transparent 0) 0 0 / 26px 26px, var(--paper); }
.crumb, .pagehead .crumb { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb a, .pagehead .crumb a { color: var(--ink-3); text-decoration: none; } .crumb a:hover, .pagehead .crumb a:hover { color: var(--blue); text-decoration: underline; }
.pagehead h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); }
.pagehead h1 em { font-style: italic; color: var(--ink); }
.pagehead .lede { margin-top: 16px; max-width: 60ch; }
.pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* 3D / image viewport frame + loading bar */
.viewport { position: relative; width: 100%; border: 1px solid var(--line); background: var(--paper-2); overflow: hidden; box-shadow: var(--shadow-1); }
.viewport__hud { position: absolute; pointer-events: none; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.viewport__hud.tl { top: 14px; left: 16px; } .viewport__hud.tr { top: 14px; right: 16px; text-align: right; } .viewport__hud.bl { bottom: 14px; left: 16px; } .viewport__hud.br { bottom: 14px; right: 16px; text-align: right; }
.loadbar { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; background: var(--paper-2); transition: opacity 0.5s; }
.loadbar.hide { opacity: 0; pointer-events: none; }
.loadbar__track { width: 200px; height: 3px; background: var(--line); overflow: hidden; margin: 0 auto; }
.loadbar__fill { height: 100%; width: 0; background: var(--blue); transition: width 0.2s; }
.loadbar__txt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); max-width: 280px; }
.loadbar.cad-error .loadbar__fill, .loadbar.err .loadbar__fill { background: var(--danger); }
.loadbar.cad-error .loadbar__txt, .loadbar.err .loadbar__txt { color: var(--danger); text-transform: none; letter-spacing: 0.02em; }

/* chips (viewer tools) */
.chip { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 12px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink-2); transition: all 0.18s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .glyph { font-size: 0.95em; margin-right: 1px; }

/* ============================================================
   PAGE COMPONENTS (bom, cad, wiring, results, landscape, build)
   ported from openderm.css; themed cool via the compat tokens above
   ============================================================ */
.section--alt { background: var(--paper-2); }   /* tinted band; full-width border-block dropped in favor of the faint content-width divider */

.btn--sm { padding: 0.55em 0.95em; font-size: 0.82rem; }

.stat .num { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; position: relative; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}

.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }

.card h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; margin: 14px 0 8px; }

.card p { font-size: 0.99rem; color: var(--ink-2); }

.card .figtag { position: absolute; top: 18px; right: 20px; }

/* ============================================================================
   DATASHEET / SPEC TABLE
   ========================================================================== */
.specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px) clamp(32px, 5vw, 64px); }

@media (max-width: 760px) { .specgrid { grid-template-columns: 1fr; } }

.specblock h4 { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-lt); display: flex; justify-content: space-between; }

.specblock h4 .n { color: var(--ink-4); }

.specrow { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }

.specrow .sk { color: var(--ink-2); }

.specrow .sv { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); text-align: right; }

.specrow .sv .u { color: var(--ink-3); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sysdiag__spec .sk { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }

.sysdiag__spec .sv { font-size: 0.86rem; color: var(--ink); font-weight: 500; margin-top: 3px; }

.section--ink .card h3 { color: var(--ink); margin-top: 16px; }

/* totals strip */
.totals { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }

.totals > div { padding: 18px 24px; border-right: 1px solid var(--line); flex: 1; min-width: 150px; }

.totals > div:last-child { border-right: none; }

.totals .tv { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); letter-spacing: -0.01em; }

.totals .tv.blue { color: var(--ink); }

.totals .tk { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 6px; }

/* ============================================================================
   BOM TOOLBAR + TABLE
   ========================================================================== */
.bomtools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 28px 0 18px; }

.search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }

.search input { width: 100%; font-family: var(--sans); font-size: 0.9rem; padding: 10px 14px 10px 38px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; }

.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }

.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); }

.filters { display: flex; flex-wrap: wrap; gap: 7px; }

.bomtable-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper); }

.bomtable { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.bomtable thead th { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 14px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }

.bomtable thead th .sortarrow { opacity: 0; margin-left: 4px; color: var(--blue); }

.bomtable thead th.sorted .sortarrow { opacity: 1; }

.bomtable thead th.num, .bomtable td.num { text-align: right; font-family: var(--mono); }

.bomtable tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }

.bomtable tbody tr:hover { background: var(--blue-tint); }

.bomtable tbody tr:last-child td { border-bottom: none; }

.bomtable .pname { color: var(--ink); font-weight: 500; }

.bomtable .pnotes { color: var(--ink-3); font-size: 0.8rem; margin-top: 3px; max-width: 42ch; }

.bomtable .catpill { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: var(--paper-3); color: var(--ink-2); white-space: nowrap; }

.bomtable a.vlink { color: var(--blue); display: inline-flex; align-items: center; gap: 4px; }

.bomtable a.vlink svg { width: 12px; height: 12px; }

.bomtable .qmark { color: var(--ink-4); }

.bomtable tfoot td { padding: 16px; font-family: var(--mono); font-size: 0.84rem; background: var(--paper-2); border-top: 2px solid var(--line-2); color: var(--ink); }

.bom-scroll { overflow-x: auto; }

.bom-scroll--core,
.bom-scroll--screws {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--blue) var(--paper-3);
  scrollbar-width: auto;
}

.bom-scroll--core { max-height: min(68vh, 680px); }
.bom-scroll--screws { max-height: min(52vh, 420px); }

.bom-scroll--core::-webkit-scrollbar,
.bom-scroll--screws::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.bom-scroll--core::-webkit-scrollbar-track,
.bom-scroll--screws::-webkit-scrollbar-track {
  background: var(--paper-3);
}

.bom-scroll--core::-webkit-scrollbar-thumb,
.bom-scroll--screws::-webkit-scrollbar-thumb {
  background: var(--blue);
  border: 3px solid var(--paper-3);
  border-radius: 999px;
}

.bom-scroll-cue {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--blue-deep);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bom-scroll-cue span {
  font-size: 0.9rem;
  line-height: 1;
}

.bom-scroll--core .bomtable thead th,
.bom-scroll--screws .bomtable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.bom-scroll--core:focus-visible,
.bom-scroll--screws:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

@media (max-width: 720px) {
  .bomtable .hide-sm { display: none; }
  .bomtable thead th { position: static; }
}

/* BOM — cost split, section blocks, screws */
.bom .section { padding-block: clamp(40px, 5vw, 64px); }

.costsplit-note { font-size: 0.98rem; max-width: 80ch; margin-top: 18px; color: var(--ink-2); }

.bomsec-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; justify-content: space-between; }

.bomsec-head h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; margin-top: 6px; }

.screw-vendors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }

.screw-vendors .vlink { color: var(--blue); display: inline-flex; align-items: center; gap: 5px; font-size: 0.95rem; }

.screw-vendors .vlink svg { width: 12px; height: 12px; flex: none; }

/* ============================================================================
   CAD / WIRING PAGE LAYOUT
   ========================================================================== */
.toolpage { display: grid; grid-template-columns: 1fr 300px; gap: 0; }

@media (max-width: 900px) { .toolpage { grid-template-columns: 1fr; } }

.toolpage__stage { position: relative; min-height: 60vh; }

.toolpage__side { border-left: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); background: var(--paper); }

@media (max-width: 900px) { .toolpage__side { border-left: none; border-top: 1px solid var(--line); } }

.toolpage__side h3 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }

.legend { display: grid; gap: 9px; margin-top: 6px; }

/* ---- articulated CAD: joint sliders ---- */
.side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.joints { display: grid; gap: 15px; }

.cadstage { height: clamp(440px, 70vh, 760px); background: linear-gradient(160deg, #fbfcfe, #eaeff7); }

/* e-stop chain */
.estop { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-top: 24px; }

.estop__step { flex: 1; min-width: 220px; display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-1); }

.estop__step.danger { border-color: var(--danger); background: var(--danger-tint); }

.estop__n { font-family: var(--mono); width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-content: center; background: var(--blue); color: #fff; font-size: 0.85rem; }

.estop__step.danger .estop__n { background: var(--danger); }

.estop__step b { color: var(--ink); font-size: 0.98rem; }

.estop__step p { font-size: 0.84rem; color: var(--ink-2); margin-top: 5px; }

.estop__arrow { display: flex; align-items: center; color: var(--ink-4); font-size: 1.4rem; }

@media (max-width: 760px) { .estop__arrow { transform: rotate(90deg); justify-content: center; width: 100%; } }

/* ============================================================================
   RESULTS / SKIN SCAN TRACKER (results.html + results.js)
   ========================================================================== */
/* the scan viewer is the whole page: fill the viewport below the 64px nav so the
   surface is in immediate full view on landing. The tall sidebar scrolls inside. */
.toolpage--scan { height: calc(100vh - 64px); height: calc(100dvh - 64px); }

.toolpage--scan .toolpage__stage { min-height: 0; }

.toolpage--scan .toolpage__side { overflow-y: auto; }

.scanstage { height: 100%; background:
  radial-gradient(circle at 1px 1px, rgba(15,27,45,0.045) 1px, transparent 0) 0 0 / 24px 24px,
  linear-gradient(160deg, #fbfcfe, #eaeff7); }

.scanstage__resolution-note { max-width: calc(55% - 24px); line-height: 1.45; }

@media (max-width: 900px) {
  .toolpage--scan { height: auto; }
  .toolpage--scan .scanstage { height: clamp(420px, 62vh, 640px); }
  .toolpage--scan .toolpage__side { overflow-y: visible; }
}

/* segmented scan selector */
.scantabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* visually-hidden heading (keeps the page's h1 for a11y / SEO without intro text) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* tracked-lesion list */
.lesionlist { display: grid; gap: 6px; margin-top: 2px; padding-right: 2px; }

/* cross-scan lesion detail modal */
.scanmodal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: clamp(14px, 3vw, 32px); background: rgba(15,27,45,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.scanmodal.open { display: flex; }

.scanmodal__sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); width: min(1100px, 96vw); height: min(88vh, 860px);
  padding: clamp(18px, 2.5vw, 28px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; overflow: hidden; }

.scanmodal__close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow-1); display: grid; place-content: center; }

.scanmodal__close:hover { border-color: var(--blue); color: var(--blue-deep); }

@media (max-width: 640px) {
  .scanmodal__sheet { height: min(92vh, 900px); }
  .scanmodal__strip { flex-direction: column; overflow-y: auto; }
  .datecol { min-height: 240px; }
}

/* ============================================================
   component/card links carry their own affordance — no underline
   (bare prose links keep the design-6 underline; .link-u is explicit)
   ============================================================ */
a.card, .card, a.vlink, .vlink, .bomtable a, .scantabs a, .scantabs button,
.lesionlist a, .lesionlist button, .toolbar a, .legend a, .estop a,
.scanmodal__close, .screw-vendors .vlink, .joints a { text-decoration: none; }

/* ============================================================
   results.html — JS-rendered components (scan tabs, lesion list,
   detail modal, first-load walkthrough). Ported from openderm.css,
   themed cool. Scan tabs read as buttons; lesion thumbs are compact.
   ============================================================ */

/* scan tabs — clear toggle buttons */
.scantab { text-align: left; display: grid; gap: 3px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-sm);
  transition: background 0.16s, color 0.16s, transform 0.14s, box-shadow 0.16s; }
.scantab:hover { background: var(--paper-2); transform: translateY(-1px); }
.scantab.active { background: var(--ink); border-color: var(--ink); }
.scantab__n { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink); }
.scantab__d { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.scantab.active .scantab__n, .scantab.active .scantab__d { color: var(--paper); }

/* tracked-lesion list — compact rows, small thumbnails (fit more) */
.lesionlist { gap: 4px; }
.lesion { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 4px 7px; cursor: pointer; border: 1px solid var(--line); background: var(--paper);
  transition: border-color 0.16s, background 0.16s, transform 0.16s; }
.lesion:hover { border-color: var(--ink); background: var(--paper-2); transform: translateX(1px); }
.lesion:focus-visible { outline: none; border-color: var(--ink); background: var(--paper-2); }
.lesion__thumb { width: 24px; height: 24px; overflow: hidden; background: var(--paper-3); display: grid; place-items: center; flex: none; border: 1px solid var(--line); }
.lesion__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lesion__glyph { font-size: 0.8rem; color: var(--ink-4); }
.lesion__body { display: grid; gap: 1px; min-width: 0; }
.lesion__top { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--ink); font-weight: 500; }
.lesion__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.lesion__meta { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.02em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesion__arrow { color: var(--ink-4); font-size: 1.05rem; line-height: 1; padding-right: 4px; }
.lesion:hover .lesion__arrow { color: var(--ink); }

/* lesion detail modal internals */
.scanmodal__head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.scanmodal__head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.01em; }
.scanmodal__badge { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; color: #fff; font-weight: 500; white-space: nowrap; }
.scanmodal__summary { color: var(--ink-2); font-size: 0.9rem; margin: 9px 0 15px; flex: 0 0 auto; }
.scanmodal__summary b { color: var(--ink); }
.scanmodal__strip { display: flex; gap: clamp(14px, 2vw, 26px); flex: 1; min-height: 0; }
.datecol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.datecol--image { justify-content: center; }
.datecol__cap { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 500; margin-bottom: 10px; flex: 0 0 auto; }
.datecol__cap span { color: var(--ink-3); }
.gallery { flex: 1; min-height: 0; display: grid; gap: 8px; align-content: center; justify-content: start; overflow: hidden; }
.datecol--image .gallery { flex: 0 0 auto; }
.gallery figure { position: relative; margin: 0; }
.gallery img { width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--line); background: var(--paper-3); display: block; }
.gallery figcaption { position: absolute; left: 4px; bottom: 4px; font-family: var(--mono); font-size: 9px; color: #fff; background: rgba(15,27,45,0.6); padding: 1px 5px; border-radius: 3px; }
.datecol__absent { flex: 1; display: grid; place-content: center; text-align: center; padding: 30px; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 0.84rem; background: var(--paper-2); }
@media (max-width: 640px) { .scanmodal__strip { flex-direction: column; overflow-y: auto; } .datecol { min-height: 240px; } }

/* first-load guided walkthrough (results.js): pulse ring + coach-mark card */
.tourring { position: fixed; z-index: 88; pointer-events: none; border: 2px solid var(--accent);
  box-shadow: 0 0 0 0 rgba(26,78,216,0.35); animation: tourpulse 1.9s var(--ease) infinite;
  transition: left 0.35s var(--ease), top 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease); }
@keyframes tourpulse { 70% { box-shadow: 0 0 0 11px rgba(26,78,216,0); } 100% { box-shadow: 0 0 0 0 rgba(26,78,216,0); } }
.tourcard { position: fixed; z-index: 90; width: min(302px, calc(100vw - 24px)); padding: 15px 17px 13px; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.tourcard.pop { animation: tourpop 0.45s var(--ease) both; }
@keyframes tourpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tourcard.hide, .tourring.hide { display: none; }
.tourcard__kicker { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.tourcard__kicker span { color: var(--ink-4); letter-spacing: 0.08em; }
.tourcard__title { font-size: 0.94rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 5px; }
.tourcard__body { font-size: 0.8rem; line-height: 1.55; color: var(--ink-2); }
.tourcard__body b { color: var(--ink); font-weight: 600; }
.tourcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; }
.tourcard__skip { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ink-3); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: color 0.2s, text-decoration-color 0.2s; }
.tourcard__skip:hover { color: var(--ink); text-decoration-color: var(--ink); }
.tourcard__nav { display: flex; align-items: center; gap: 12px; }
.tourcard__dots { display: flex; gap: 5px; }
.tourcard__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.tourcard__dots i.on { background: var(--ink); }
.tourcard__dots i.done { background: var(--ink); opacity: 0.3; }
.tourcard__next { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: background 0.18s, border-color 0.18s, transform 0.12s; }
.tourcard__next:hover { background: var(--accent); border-color: var(--accent); }
.tourcard__next:active { transform: translateY(1px); }
.tourcard__next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tourcard__arrow { position: absolute; width: 12px; height: 12px; background: var(--paper); border: 1px solid var(--ink); transform: rotate(45deg); }
.tourcard__arrow.is-left { left: -7px; border-right: 0; border-top: 0; }
.tourcard__arrow.is-right { right: -7px; border-left: 0; border-bottom: 0; }
.tourcard__arrow.is-top { top: -7px; border-right: 0; border-bottom: 0; }
.tourcard__arrow.is-bottom { bottom: -7px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .tourring { animation: none; } .tourcard.pop { animation: none; } }

/* Scan 02 "auto-detected change" callouts (results.js): small coach-marks that
   flag the two controlled test-marker moles the first time Scan 02 is opened */
.changelabel { position: fixed; z-index: 87; width: min(224px, calc(100vw - 24px)); padding: 10px 13px;
  background: var(--paper); border: 1px solid var(--ink); border-left: 3px solid var(--danger);
  box-shadow: var(--shadow); pointer-events: none; animation: changepop 0.42s var(--ease) both; }
@keyframes changepop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.changelabel.is-out { animation: none; opacity: 0; transition: opacity 0.34s var(--ease); }
.changelabel__kicker { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--danger); margin-bottom: 4px; }
.changelabel__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.changelabel__body { display: block; font-size: 0.76rem; line-height: 1.5; color: var(--ink-2); }
.changelabel__arrow { position: absolute; width: 11px; height: 11px; background: var(--paper); border: 1px solid var(--ink); transform: rotate(45deg); }
.changelabel__arrow.is-top { top: -6px; border-right: 0; border-bottom: 0; }
.changelabel__arrow.is-bottom { bottom: -6px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .changelabel { animation: none; } }

/* results.html — status legend items (JS-rendered; dot colour set inline via --teal / --danger) */
.legend__item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--ink-2); }
.legend__sw { width: 22px; height: 4px; border-radius: 2px; flex: none; }
.legend__dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* cad.html — articulated joint sliders (JS-rendered).
   Axis name is the prominent label (with its body-colour dot); the live
   value reads as secondary; range/description line removed per design. */
.joints { display: grid; gap: 20px; }
.joint__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.joint__name { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.joint__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--paper); }
.joint__val { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-3); font-variant-numeric: tabular-nums; background: var(--paper-2);
  border: 1px solid var(--rule-lt); padding: 2px 8px; }
.joint__range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 12px 0 0;
  border-radius: 3px; background: var(--line-2); outline: none; cursor: pointer; }
.joint__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: var(--shadow-sm);
  transition: transform 0.12s var(--ease); }
.joint__range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.joint__range::-webkit-slider-thumb:active { transform: scale(1.05); }
.joint__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--paper); box-shadow: var(--shadow-sm); cursor: pointer; }
.joint__range:focus-visible { box-shadow: 0 0 0 3px var(--blue-tint); }