/* ============================================================
   CONDUIT — THE INSTRUMENT · machined file converter
   Design system: Braun catalog × studio rack. Flat. Light only.
   ============================================================ */

/* self-hosted fonts — no third-party CDN (keeps "no trackers" true, speeds LCP) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/plexmono.woff2) format('woff2');}

:root{
  /* palette — hardware faceplate, light on purpose */
  --chassis:#E3E4E0;      /* page ground: warm aluminum / paper */
  --panel:#F4F4F0;        /* module faces, the unit body */
  --ink:#17191B;          /* type, controls, borders at full strength */
  --ink-60:#5C6065;       /* engraved labels, secondary */
  --ink-40:#8A8E92;       /* faintest legible */

  --signal:#2E5BFF;       /* the ONE saturated color — cobalt. action + record dot */
  --signal-deep:#1A38B8;  /* hover + focus rings (passes 3:1 on chassis) */

  --meter-green:#1FB357;  /* success / file ready */
  --meter-amber:#F5A300;  /* working / meter running */
  --clip-red:#E5484D;     /* error state fill */
  --clip-text:#C63238;    /* error TEXT (contrast) */

  /* border system = the elevation system (no shadows) */
  --line:rgba(23,25,27,0.14);   /* resting module */
  --line-soft:rgba(23,25,27,0.08);
  --cell-empty:rgba(23,25,27,0.07);

  --r-ctrl:2px;           /* machined edges on controls */
  --r-mod:6px;            /* max radius, on modules */
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--chassis);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--signal-deep);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- type roles (the identity engine) ---------- */
/* LABEL -> Archivo Condensed caps. VALUE -> mono. SENTENCE -> Archivo body. */
.eng{                              /* engraved label */
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 78,'wght' 560;
  text-transform:uppercase;
  font-size:11px; letter-spacing:0.08em; line-height:1.2;
  color:var(--ink-60);
}
.eng.lg{ font-size:12px; }
.mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}
.wordmark{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 125,'wght' 850;
  text-transform:uppercase; letter-spacing:-0.01em; line-height:1;
}
.display{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118,'wght' 820;
  text-transform:uppercase; letter-spacing:-0.01em; line-height:0.98;
}
.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;
}

/* ---------- shell ---------- */
.shell{ max-width:1120px; margin:0 auto; padding:0 20px; }
@media(min-width:768px){ .shell{ padding:0 40px; } }

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:var(--chassis);
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  height:60px;
}
.brand{ display:flex; align-items:baseline; gap:9px; text-decoration:none; }
.brand .wordmark{ font-size:22px; }
.rec-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--signal); display:inline-block;
  align-self:center; margin-bottom:1px;
}
.brand .model{ color:var(--ink-60); }
.nav{ display:flex; gap:22px; }
.nav a{ text-decoration:none; }
.nav a:hover{ color:var(--ink); }
@media(max-width:520px){ .nav .opt{ display:none; } }

/* ---------- sections ---------- */
main{ display:block; }
.section{ padding:64px 0; }
@media(min-width:768px){ .section{ padding:104px 0; } }
.section.tight{ padding-top:40px; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-top:40px; }
.watermark{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
}
.watermark span{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 125,'wght' 900;
  font-size:min(46vw,560px); line-height:0.8;
  color:rgba(23,25,27,0.04);
  margin-top:-4vw; white-space:nowrap; letter-spacing:-0.02em;
  user-select:none;
}
.hero .shell{ position:relative; z-index:1; }
.hero-head{ max-width:760px; }
.kicker{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.kicker .bar{ width:22px; height:1px; background:var(--ink); }
h1.display{ font-size:clamp(34px,7vw,64px); margin:0 0 18px; }
.lede{ font-size:clamp(16px,2.4vw,19px); color:var(--ink); max-width:52ch; margin:0; }
.lede .soft{ color:var(--ink-60); }

/* ============================================================
   THE INSTRUMENT — the largest, most designed object
   ============================================================ */
.instrument-wrap{ margin-top:40px; position:relative; }

/* registration corners on the flagship unit */
.regmark{ position:absolute; width:14px; height:14px; z-index:2; pointer-events:none; color:var(--ink); }
.regmark::before,.regmark::after{ content:""; position:absolute; background:currentColor; }
.regmark::before{ width:14px; height:1.5px; }
.regmark::after{ width:1.5px; height:14px; }
.regmark.tl{ top:-7px; left:-7px; }
.regmark.tr{ top:-7px; right:-7px; }
.regmark.tr::before{ right:0; } .regmark.tr::after{ right:0; }
.regmark.bl{ bottom:-7px; left:-7px; } .regmark.bl::before{ bottom:0; } .regmark.bl::after{ bottom:0; }
.regmark.br{ bottom:-7px; right:-7px; } .regmark.br::before{ right:0;bottom:0; } .regmark.br::after{ right:0;bottom:0; }

/* the module frame */
.module{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-mod);
  padding:24px;
  transition:border-color .18s ease;
}
@media(min-width:768px){ .module{ padding:32px; } }
.module.active{ border-color:var(--ink); }   /* focus/active elevation = border weight */

/* module header */
.module-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid var(--line-soft);
}
.module-title{ display:flex; flex-direction:column; gap:7px; }
.module-title .name{ font-size:14px; }
.module-title .spec{ font-size:12px; color:var(--ink-60); }

/* state LED + text equivalent (never color-only) */
.state-led{ display:flex; align-items:center; gap:9px; white-space:nowrap; }
.led{
  width:10px; height:10px; border-radius:50%;
  background:var(--ink-40);
  border:1px solid rgba(23,25,27,0.25);
  flex:none;
}
[data-state="standby"] .led{ background:var(--ink-40); }
[data-state="resolving"] .led,[data-state="working"] .led{ background:var(--meter-amber); border-color:var(--meter-amber); }
[data-state="ready"] .led{ background:var(--signal); border-color:var(--signal); }
[data-state="done"] .led{ background:var(--meter-green); border-color:var(--meter-green); }
[data-state="error"] .led{ background:var(--clip-red); border-color:var(--clip-red); }
.state-txt{ font-size:11px; }

/* rack grid */
.rack{ display:grid; gap:24px; }
@media(min-width:900px){
  .rack{ grid-template-columns:1fr 1fr; gap:28px 32px; }
  .rack .full{ grid-column:1 / -1; }
}
.field{ display:flex; flex-direction:column; gap:12px; }
.field > .eng{ display:flex; align-items:center; gap:8px; }
.field-hint{ margin-left:auto; color:var(--ink-40); font-size:11px; }

/* ---- SOURCE: drop zone / file input ---- */
.dropzone{
  border:1px dashed rgba(23,25,27,0.28);
  border-radius:var(--r-ctrl);
  background:transparent;
  min-height:132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:20px; cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.dropzone:hover{ border-color:var(--ink); }
.dropzone.drag{ border-color:var(--signal-deep); border-style:solid; background:rgba(46,91,255,0.04); }
.dropzone .glyph{ color:var(--ink-60); }
.dropzone .prompt{ font-size:14px; }
.dropzone .sub{ font-size:12px; color:var(--ink-60); }
.dropzone .sub .mono{ color:var(--ink-60); }

/* source chip */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:var(--r-ctrl);
  padding:8px 12px; background:var(--chassis);
  font-size:12px; align-self:flex-start; max-width:100%;
}
.chip .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.chip .dot{ color:var(--ink-40); }
.chip .x{ border:none; background:none; cursor:pointer; color:var(--ink-60); padding:2px; line-height:0; border-radius:2px; }
.chip .x:hover{ color:var(--ink); }

/* media card */
.mediacard{
  display:flex; gap:14px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-ctrl);
  padding:14px; background:var(--chassis);
}
.thumb{
  width:56px; height:56px; flex:none; border-radius:2px;
  border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--ink-60);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .fmt{ font-size:11px; }
.mediacard .meta{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.mediacard .meta .fname{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mediacard .meta .specs{ font-size:12px; color:var(--ink-60); display:flex; gap:8px; flex-wrap:wrap; }

/* ---- OUTPUT FORMAT: segmented toggle ---- */
.segment{ display:inline-flex; border:1px solid var(--ink); border-radius:var(--r-ctrl); overflow:hidden; flex-wrap:wrap; }
.seg-btn{
  border:none; background:var(--panel); cursor:pointer;
  padding:10px 16px; font-size:12px;
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);
  transition:background .09s cubic-bezier(.2,0,0,1), color .09s cubic-bezier(.2,0,0,1);
}
.seg-btn:last-child{ border-right:none; }
.seg-btn[aria-pressed="true"]{ background:var(--ink); color:var(--panel); } /* selected face inverts */

/* ---- stepped / detented selector ---- */
.stepper{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-ctrl); overflow:hidden; }
.step{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--panel); cursor:pointer;
  border-bottom:1px solid var(--line-soft); text-align:left; border-left:none;border-right:none;border-top:none;
  transition:background .1s ease;
}
.step:last-child{ border-bottom:none; }
.step:hover:not(.locked){ background:rgba(23,25,27,0.03); }
.step .tick{ width:14px; height:14px; flex:none; border:1px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.step[aria-checked="true"] .tick{ background:var(--ink); }
.step[aria-checked="true"] .tick .in{ width:6px; height:6px; border-radius:50%; background:var(--panel); }
.step .fmt{ font-family:'IBM Plex Mono',monospace; font-size:13px; }
.step .desc{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:11px; color:var(--ink-60); margin-left:auto; text-align:right; }
.step.locked{ cursor:not-allowed; }
.step.locked .fmt,.step.locked .tick{ color:var(--ink-40); border-color:var(--ink-40); opacity:.75; }
.step .lock{ color:var(--ink-40); }
.step .pro-hint{ font-size:11px; color:var(--signal-deep); text-decoration:none; margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.step .pro-hint:hover{ text-decoration:underline; }

/* ============================================================
   METER BRIDGE — the centerpiece detail
   ============================================================ */
.bridge{ border:1px solid var(--line); border-radius:var(--r-ctrl); padding:18px; background:var(--chassis); }
.bridge-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.readout{
  display:flex; align-items:center; gap:2px; min-width:0;
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.02em;
  color:var(--ink);
}
.rd-text{ transition:opacity .06s linear; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rd-text.tick{ opacity:0; }
.rd-cursor{ color:var(--signal); animation:blink 1.06s steps(1,end) infinite; }
[data-state="error"] .rd-text{ color:var(--clip-text); }
.rd-timer{ font-size:13px; color:var(--ink-60); white-space:nowrap; }

/* 24 discrete cells */
.meter{ display:flex; gap:3px; height:34px; }
.cell{
  flex:1 1 0; background:var(--cell-empty); border-radius:1px;
  position:relative;
}
.cell.lit{ background:var(--meter-amber); }
.cell.done{ background:var(--meter-green); }
.cell.err{ background:var(--clip-red); }
.cell.lead{ animation:flick .2s steps(2,end) infinite; }
.cell.peak::after{
  content:""; position:absolute; inset:0;
  outline:1.5px solid var(--meter-amber); outline-offset:-1.5px; border-radius:1px;
}

/* calibration ticks */
.ticks{ display:flex; height:12px; margin-top:6px; position:relative; }
.tk{ flex:1 1 0; border-left:1px solid var(--line-soft); position:relative; }
.tk:last-child{ border-right:1px solid var(--line-soft); }
.tk.maj{ border-left-color:rgba(23,25,27,0.3); }
.tk.maj::after{
  content:attr(data-n); position:absolute; top:12px; left:-4px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-40);
}
.ticks{ margin-bottom:14px; }

/* ============================================================
   ACTIONS
   ============================================================ */
.action-row{ display:flex; flex-direction:column; gap:12px; }
@media(min-width:560px){ .action-row{ flex-direction:row; align-items:center; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--ink); background:var(--panel); color:var(--ink);
  border-radius:var(--r-ctrl); padding:14px 22px; cursor:pointer;
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 90,'wght' 680;
  text-transform:uppercase; letter-spacing:0.04em; font-size:13px;
  transition:transform .06s ease, background .1s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn:active{ transform:scale(0.98); }
.btn.block{ width:100%; }
@media(min-width:560px){ .btn.grow{ flex:1; } }

/* the ONE signal button */
.btn.signal{ background:var(--signal); border-color:var(--signal); color:#fff; }
.btn.signal:hover{ background:var(--signal-deep); border-color:var(--signal-deep); }
.btn.signal[disabled]{ background:transparent; border-color:var(--line); color:var(--ink-40); cursor:not-allowed; }

/* stop = neutral cancel, not signal */
.btn.stop{ background:var(--panel); border-color:var(--ink); color:var(--ink); }

/* ghost / secondary */
.btn.ghost{ border-color:var(--line); color:var(--ink-60); }
.btn.ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* download control — unpowered until DONE */
.download{
  border:1px solid var(--line); color:var(--ink-40);
  background:var(--panel); pointer-events:none;
}
.download .arrow{ transition:transform .15s ease; }
.download.powered{
  border-color:var(--ink); color:var(--ink);
  pointer-events:auto;
}
.download.powered:hover .arrow{ transform:translateY(2px); }

/* error panel */
.errbox{ display:none; gap:12px; flex-direction:column; }
[data-state="error"] .errbox{ display:flex; }
.errbox .code{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--clip-text); }
.errbox .msg{ font-size:14px; }

/* only show relevant sub-parts per state (JS also toggles) */
.when{ display:none; }

/* ============================================================
   DEMO / state inspector — sits on the CHASSIS, clearly labeled
   ============================================================ */
.demo{
  margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0; border-top:1px dashed var(--line);
}
.demo .eng{ display:flex; align-items:center; gap:8px; }
.demo .badge{ border:1px solid var(--ink-40); border-radius:2px; padding:1px 5px; font-size:9px; color:var(--ink-60); }
.demo .jumps{ display:flex; gap:6px; flex-wrap:wrap; }
.jump{
  border:1px solid var(--line); background:transparent; border-radius:2px;
  padding:6px 10px; cursor:pointer; font-size:11px;
  font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-60);
  transition:border-color .1s ease,color .1s ease;
}
.jump:hover{ border-color:var(--ink); color:var(--ink); }
.jump[aria-current="true"]{ border-color:var(--ink); color:var(--ink); background:rgba(23,25,27,0.04); }

/* ============================================================
   SIGNAL CHAIN diagram (drawn in system language)
   ============================================================ */
.chain{ display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch; }
@media(min-width:640px){ .chain{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; } }
.node{
  border:1px solid var(--line); border-radius:var(--r-ctrl); background:var(--panel);
  padding:18px; display:flex; flex-direction:column; gap:8px; min-height:96px; justify-content:center;
}
.node .n-label{ font-size:11px; }
.node .n-val{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-60); }
.node.mid{ border-color:var(--ink); }
.arrow-h{ display:flex; align-items:center; justify-content:center; color:var(--ink-60); padding:6px 0; }
@media(max-width:639px){ .arrow-h{ transform:rotate(90deg); } }

/* ============================================================
   PRICING faceplates
   ============================================================ */
.tiers{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:820px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{
  border:1px solid var(--line); border-radius:var(--r-mod); background:var(--panel);
  padding:24px; display:flex; flex-direction:column; gap:16px;
}
.tier.powered{ border-color:var(--ink); }
.tier .t-head{ display:flex; align-items:center; justify-content:space-between; }
.tier .t-name{ font-size:12px; }
.tier .t-dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); }
.tier .price{ display:flex; align-items:baseline; gap:6px; }
.tier .price .amt{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-variant-numeric:tabular-nums; }
.tier .price .per{ font-size:12px; color:var(--ink-60); }
.tier ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.tier li{ display:flex; gap:9px; font-size:13px; align-items:flex-start; }
.tier li .v{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--ink); }
.tier li .k{ color:var(--ink-60); }
.tier .t-cta{ margin-top:auto; }

/* ============================================================
   AD slot — chassis only, fixed size (zero CLS), never button-shaped
   ============================================================ */
.adslot{
  border:1px solid var(--line-soft); border-radius:2px;
  height:90px; display:flex; align-items:center; justify-content:center;
  background:var(--chassis); color:var(--ink-40); position:relative;
}
.adslot .eng{ color:var(--ink-40); }
.adslot::before{ content:"AD"; position:absolute; top:6px; left:8px; font-family:'Archivo'; font-variation-settings:'wdth' 78,'wght' 560; font-size:9px; letter-spacing:0.1em; color:var(--ink-40); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:40px 0 56px; }
.foot .row{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; }
.foot .marks{ display:flex; flex-direction:column; gap:6px; }
.foot .marks .mono{ font-size:11px; color:var(--ink-60); }
.foot .cols{ display:flex; gap:48px; flex-wrap:wrap; }
.foot .col{ display:flex; flex-direction:column; gap:10px; }
.foot .col a{ text-decoration:none; font-size:13px; color:var(--ink-60); }
.foot .col a:hover{ color:var(--ink); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  border:1px solid var(--ink); background:var(--panel); color:var(--ink);
  padding:11px 16px; border-radius:var(--r-ctrl); font-size:13px;
  display:flex; align-items:center; gap:10px;
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40;
}
.toast.show{ opacity:1; }

/* section headers */
.sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.sec-head .bar{ width:22px; height:1px; background:var(--ink); }
.sec-head h2{ font-size:clamp(20px,3vw,26px); margin:0; }

/* ---------- load stagger (opacity only, <=200ms) ---------- */
.stagger>*{ opacity:0; animation:appear .2s ease forwards; }
.stagger>*:nth-child(1){ animation-delay:.02s; }
.stagger>*:nth-child(2){ animation-delay:.06s; }
.stagger>*:nth-child(3){ animation-delay:.10s; }
.stagger>*:nth-child(4){ animation-delay:.14s; }
.stagger>*:nth-child(5){ animation-delay:.18s; }

/* ---------- keyframes ---------- */
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes flick{ 0%{opacity:1} 100%{opacity:0.5} }
@keyframes appear{ to{opacity:1} }

/* ============================================================
   REDUCED MOTION — instant swaps; meter still shows progress
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rd-cursor{ opacity:1; }
  .stagger>*{ opacity:1; }
}

/* ============================================================
   SITE CHROME — nav active + sub-page heads
   ============================================================ */
.nav a[aria-current="page"]{ color:var(--ink); }
.model{ font-size:12px; color:var(--ink-60); align-self:center; }

.page-head{ border-bottom:1px solid var(--line); padding:56px 0 40px; position:relative; overflow:hidden; }
@media(min-width:768px){ .page-head{ padding:80px 0 56px; } }
.page-head .lede{ margin-top:16px; }
.linkline{ display:inline-flex; align-items:center; gap:6px; color:var(--signal-deep); text-decoration:none; font-size:13px; }
.linkline:hover{ text-decoration:underline; }
.muted{ color:var(--ink-60); }

/* ============================================================
   MONO TABLE — job log / history / formats matrix
   ============================================================ */
.tablewrap{ border:1px solid var(--line); border-radius:var(--r-mod); overflow-x:auto; background:var(--panel); }
table.log{ width:100%; border-collapse:collapse; min-width:560px; }
table.log th{
  text-align:left; font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 78,'wght' 560;
  text-transform:uppercase; font-size:10px; letter-spacing:0.08em; color:var(--ink-60);
  padding:13px 16px; border-bottom:1px solid var(--ink); white-space:nowrap;
}
table.log td{
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:12px;
  padding:12px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink); white-space:nowrap; vertical-align:middle;
}
table.log tr:last-child td{ border-bottom:none; }
table.log td.name{ font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 100,'wght' 500; white-space:normal; max-width:220px; }
table.log td.dim{ color:var(--ink-60); }
table.log .lock{ color:var(--ink-40); vertical-align:-2px; }
.st{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); }
.st .d{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-40); }
.st.ok .d{ background:var(--meter-green); }
.st.err{ color:var(--clip-text); } .st.err .d{ background:var(--clip-red); }
.st.work .d{ background:var(--meter-amber); }
.log-empty{ padding:22px 16px; color:var(--ink-60); font-size:13px; }

/* ============================================================
   SPEC SHEET — engraved label · mono value
   ============================================================ */
.specsheet{ border:1px solid var(--line); border-radius:var(--r-mod); background:var(--panel); overflow:hidden; }
.specrow{ display:grid; grid-template-columns:1fr; gap:5px; padding:15px 20px; border-bottom:1px solid var(--line-soft); }
@media(min-width:640px){ .specrow{ grid-template-columns:240px 1fr; gap:24px; align-items:baseline; } }
.specrow:last-child{ border-bottom:none; }
.specrow .v{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink); }
.specrow .v.wrap{ font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 100,'wght' 400; }
.specrow.group{ background:var(--chassis); border-top:1px solid var(--line); }
.specrow.group .eng{ color:var(--ink); }

/* ============================================================
   PARTS GALLERY (/parts)
   ============================================================ */
.gallery{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:760px){ .gallery{ grid-template-columns:1fr 1fr; } }
.part{ border:1px solid var(--line); border-radius:var(--r-mod); background:var(--chassis); padding:20px; display:flex; flex-direction:column; gap:14px; }
.part.span{ grid-column:1 / -1; }
.part > .p-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.part .stage{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-ctrl); padding:20px; display:flex; flex-wrap:wrap; gap:16px 20px; align-items:center; }
.part .stage.col{ flex-direction:column; align-items:stretch; }
.cap{ font-size:11px; color:var(--ink-60); font-family:'IBM Plex Mono',monospace; }
.swatch-row{ display:flex; flex-wrap:wrap; gap:18px; }
.swatch{ display:flex; align-items:center; gap:8px; }
.meter.mini{ height:26px; min-width:200px; flex:1; }