/* LukeTV shared styles. Used by index.html and every project page. */
/* Layout: an engineering drawing sheet. Left-aligned copy on a 12-col grid, a dimensioned part drawing in the hero, specs set like a title block. */
/* IBM Plex, self-hosted (Latin subset). License: assets/fonts/OFL.txt */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/plex-sans-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-sans-cond-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plex-sans-cond-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
:root{
  --paper:#f4f6f9;     /* drafting sheet, cool white */
  --surface:#ffffff;   /* panels */
  --ink:#14202e;       /* text, part outlines */
  --muted:#4d5b6d;     /* secondary text: labels, captions */
  --soft:#2f3d50;      /* body copy inside cards and ledes */
  --rule:#d6dde6;      /* hairlines, grid */
  --line:#2c5c8f;      /* dimension lines, blueprint blue */
  --accent:#d9480f;    /* filament orange, used sparingly */
  --grid:rgba(44,92,143,.07);
  --display:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --s-1:.8125rem; --s0:1rem; --s1:1.1875rem; --s2:1.5rem; --s3:clamp(1.9rem,1.4rem + 1.8vw,2.6rem); --s4:clamp(2.5rem,1.6rem + 3.6vw,4.25rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1319; --surface:#141b23; --ink:#e6ecf2; --muted:#9fabba; --soft:#c6cfda; --rule:#25303c;
    --line:#7aaee3; --accent:#ff7b3a; --grid:rgba(122,174,227,.06); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0e1319; --surface:#141b23; --ink:#e6ecf2; --muted:#9fabba; --soft:#c6cfda; --rule:#25303c;
  --line:#7aaee3; --accent:#ff7b3a; --grid:rgba(122,174,227,.06); color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--s0)/1.65 var(--body);
  padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
.eyebrow{font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem/1 var(--display);letter-spacing:.01em}
.brand svg{width:26px;height:26px;flex:none}
.brand svg path{fill:var(--accent)}
.brand b{color:var(--accent);font-weight:700}
.top nav{display:flex;gap:28px;flex-wrap:wrap}
.top nav a{font:500 .95rem/1 var(--body);color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.hero h1{font:700 var(--s4)/1.02 var(--display);letter-spacing:-.01em;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:var(--s1);line-height:1.6;color:var(--soft);max-width:44ch;margin-top:22px}
.lede strong{color:var(--ink);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:6px;font:600 .95rem/1 var(--body);text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--accent);color:var(--paper)}
.btn.ghost{border-color:var(--rule);color:var(--ink);background:var(--surface)}
.btn.ghost:hover{border-color:var(--muted)}

/* drawing sheet */
.sheet{position:relative;margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px;background-position:-1px -1px}
.sheet svg{display:block;width:100%;height:auto;color:var(--line)}
.sheet .part{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.sheet .dim{stroke:var(--line);stroke-width:1;fill:none}
.sheet .ext{stroke:var(--line);stroke-width:.75;fill:none;opacity:.7}
.sheet .center{stroke:var(--line);stroke-width:.75;stroke-dasharray:8 3 2 3;fill:none}
.sheet .hole{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.sheet text{font-family:var(--mono);font-size:11px;fill:var(--line)}
.sheet .lbl{fill:var(--muted);font-size:10px;letter-spacing:.12em}
.sheet .tb{fill:none;stroke:var(--ink);stroke-width:1}
.sheet .tbt{fill:var(--ink);font-size:10px}
.sheet .tbm{fill:var(--muted);font-size:9px;letter-spacing:.08em}
.sheet-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:400 .75rem/1.4 var(--mono);color:var(--muted)}

/* spec strip */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden}
.specs div{padding:20px 22px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--rule)}
.specs div:first-child{border-left:0}
.specs strong{font:600 1.35rem/1.1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.specs strong small{font:500 .8rem var(--mono);color:var(--muted);margin-left:4px}

/* sections */
.block{padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--rule)}
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 56px;align-items:end;margin-bottom:40px}
.head h2{font:700 var(--s3)/1.08 var(--display);margin-top:12px}
.head p{color:var(--soft);max-width:56ch}

/* project log */
.log{border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow-x:auto}
.log table{width:100%;border-collapse:collapse;min-width:640px}
.log th{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule)}
.log td{padding:18px;border-bottom:1px solid var(--rule);vertical-align:top;font-variant-numeric:tabular-nums}
.log tr:last-child td{border-bottom:0}
.log .no{font:500 .95rem/1 var(--mono);color:var(--accent)}
.log .name{font-weight:600}
.log .name a{text-decoration:none}
.log .name a:hover{color:var(--accent)}
.log .name span{display:block;font-weight:400;color:var(--muted);font-size:var(--s-1);margin-top:2px}
.log .dash{color:var(--muted);font-family:var(--mono)}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 .75rem/1 var(--mono);padding:6px 10px;border-radius:99px;border:1px solid var(--rule);color:var(--muted);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pill.done i{background:var(--line)}
.focus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.focus>div,.focus>button{padding:22px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.focus h3{font:600 1.1rem/1.3 var(--body)}
.focus p{color:var(--soft);font-size:.92rem;line-height:1.6}
.focus .eyebrow{color:var(--line)}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink);counter-reset:s}
.steps li{counter-increment:s;padding:20px 20px 0 0;display:flex;flex-direction:column;gap:10px;position:relative}
.steps li::before{content:"0" counter(s);font:500 .8rem/1 var(--mono);color:var(--accent)}
.steps li::after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.steps h3{font:700 1.3rem/1.15 var(--display)}
.steps p{color:var(--muted);font-size:var(--s-1);line-height:1.6;max-width:28ch}

/* workshop */
.workshop-specs{margin-bottom:16px}
.shop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.card{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.card h3{font:700 var(--s2)/1.15 var(--display)}
.card > p{color:var(--muted);max-width:52ch}
.dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:6px 0 0;border-top:1px solid var(--rule)}
.dl dt,.dl dd{padding:11px 0;border-bottom:1px solid var(--rule);margin:0}
.dl dt{font:500 .75rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-right:24px}
.dl dd{font-variant-numeric:tabular-nums}
.side{display:grid;gap:16px}
.spools{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.spools span{width:38px;height:38px;border-radius:50%;border:6px solid var(--c);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 11px color-mix(in srgb,var(--c) 35%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:500 .8rem/1 var(--mono);padding:8px 11px;border:1px solid var(--rule);border-radius:6px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px}
.about h2{font:700 var(--s3)/1.08 var(--display);margin-top:12px}
.about .copy{display:flex;flex-direction:column;gap:16px;font-size:var(--s1);color:var(--muted);max-width:60ch}
.about .copy strong{color:var(--ink);font-weight:500}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px 40px;border-top:1px solid var(--rule);color:var(--muted);font-size:var(--s-1)}
footer .mono{font-size:.75rem}

/* ---------- project pages ---------- */
.crumbs{font:500 .75rem/1 var(--mono);letter-spacing:.08em;color:var(--muted);padding-top:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.proj-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,40px)}
.proj-hero h1{font:700 var(--s4)/1.02 var(--display);letter-spacing:-.01em;margin-top:16px}
.proj-hero .lede{max-width:52ch}
.proj-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-self:end}
.photo{margin:0 0 16px}
.photo img,.photo .ph{border-radius:10px;border:1px solid var(--rule);width:100%}
.photo figcaption,.shot figcaption{font:400 .75rem/1.5 var(--mono);color:var(--muted);margin-top:10px}

/* placeholder box: delete once the real image/model is in */
.ph{display:grid;place-items:center;aspect-ratio:16/10;background:var(--surface);border:1px dashed var(--muted)!important;border-radius:10px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px;
  font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;padding:16px}

.viewer model-viewer{display:block;width:100%;height:clamp(320px,50vw,480px);background:transparent;--poster-color:transparent}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

.iters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shot{margin:0;display:flex;flex-direction:column;gap:12px}
.shot img,.shot .ph{aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--rule)}
.shot h3{font:700 1.3rem/1.15 var(--display);display:flex;gap:10px;align-items:baseline}
.shot h3 span{font:500 .8rem/1 var(--mono);color:var(--accent)}
.shot p{color:var(--muted);font-size:var(--s-1);line-height:1.6}

.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--s-1)}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid var(--rule);flex:none}
.legend span{color:var(--muted);font-family:var(--mono);margin-left:auto}

.notes{margin:0;padding:0;list-style:none;display:grid;gap:14px;font-size:var(--s1);color:var(--muted);max-width:62ch}
.notes li{padding-left:26px;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--accent)}
.notes strong{color:var(--ink);font-weight:500}

.files{display:grid;gap:10px}
.files a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);text-decoration:none;transition:border-color .15s}
.files a:hover{border-color:var(--accent)}
.files b{font-weight:600}
.files span{font:400 .75rem/1.4 var(--mono);color:var(--muted)}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:980px){
  .hero,.proj-hero{grid-template-columns:minmax(0,1fr)}
  .proj-meta{justify-self:start}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;gap:28px 20px}
  .steps li{border-top:2px solid var(--ink)}
  .steps li::after{display:none}
  .focus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop,.split{grid-template-columns:minmax(0,1fr)}
  .iters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .head,.about{grid-template-columns:minmax(0,1fr)}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs div:nth-child(3){border-left:0}
  .specs div:nth-child(n+3){border-top:1px solid var(--rule)}
  .top nav{gap:18px}
}
@media (max-width:520px){
  .top{flex-wrap:wrap;gap:14px}
  .top nav{width:100%;gap:16px}
  .steps,.focus,.iters{grid-template-columns:minmax(0,1fr)}
  .sheet-cap span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){.btn,.files a{transition:none}}

/* featured builds: 3D viewer + build sheet */
.builds{display:grid;gap:20px}
.build{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden}
.build .sheet{border:0;border-right:1px solid var(--rule);border-radius:0;display:flex;flex-direction:column}
.build .stage{position:relative;flex:1;display:flex;min-height:clamp(300px,42vw,440px)}
.build .sheet model-viewer{display:block;flex:1;min-height:clamp(300px,42vw,440px)}
.build-info{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.build-info h3{font:700 var(--s2)/1.15 var(--display)}
.build-info > p{color:var(--muted);max-width:48ch}
.plates{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}
.plates button{font:500 .72rem/1 var(--mono);letter-spacing:.04em;padding:7px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--muted);cursor:pointer}
.plates button:hover{color:var(--ink);border-color:var(--muted)}
.plates button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.swatches{display:inline-flex;gap:6px;vertical-align:middle}
.swatches i{width:16px;height:16px;border-radius:50%;border:1px solid var(--rule);background:var(--c)}
.credit{font:400 .78rem/1.55 var(--mono);color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin-top:auto}
.credit a{color:var(--line)}
.more-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-top:56px}
.more-head h3{font:700 var(--s2)/1.15 var(--display)}
.more-head p{color:var(--muted);font-size:var(--s-1);max-width:60ch}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.mini{border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.mini .shot-ph{aspect-ratio:4/3;display:grid;place-items:center;border-bottom:1px solid var(--rule);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;
  font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mini-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mini h4{margin:0;font:600 1.05rem/1.3 var(--body)}
.mini .stats{font:400 .8rem/1.5 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.mini .credit{margin-top:auto}
@media (max-width:900px){
  .build{grid-template-columns:minmax(0,1fr)}
  .build .sheet{border-right:0;border-bottom:1px solid var(--rule)}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.more{grid-template-columns:minmax(0,1fr)}}
.mini .shot-img{position:relative;margin:0;border-bottom:1px solid var(--rule);background:#d5dce5}
.mini .shot-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mini .shot-img figcaption{position:absolute;top:10px;left:10px;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#14202e;background:rgba(255,255,255,.75);padding:5px 7px;border-radius:4px}
/* dark studio backdrop for 3D viewers and renders (same in light and dark themes) */
.build .sheet{background-color:#1b222c;
  background-image:radial-gradient(110% 85% at 50% 40%,rgba(255,255,255,.07),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,20px 20px,20px 20px}
.build .plates button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#a9b5c3}
.build .plates button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.build .plates button[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.build .plates button:focus-visible{outline-color:#ff7b3a}
.mini .shot-img{background:#1b222c}
/* render lightbox + magnifier */
.zoomable{position:relative;display:block;cursor:zoom-in}
.zoomable::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314202e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s}
.zoomable:hover::after,.zoomable:focus-visible::after{transform:scale(1.1)}
#lightbox{position:fixed;inset:0;border:0;padding:0;margin:0;width:auto;height:auto;max-width:none;max-height:none;background:rgba(12,16,22,.96);color:#e6ecf2;overflow:hidden}
#lightbox::backdrop{background:rgba(12,16,22,.7)}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
.lb-cap{font:500 .8rem/1.4 var(--mono);color:#a9b5c3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btns{display:flex;gap:8px;flex:none}
.lb-btns button{width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.lb-btns button:hover{background:rgba(255,255,255,.14)}
.lb-btns button:focus-visible{outline:2px solid #ff7b3a;outline-offset:2px}
.lb-stage{position:absolute;top:64px;bottom:48px;left:16px;right:16px;overflow:hidden}
.lb-stage img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;cursor:zoom-in;transition:transform .25s ease;touch-action:none;user-select:none;-webkit-user-drag:none}
.lb-stage.zoomed img{transform:scale(2.6);cursor:zoom-out}
.lb-hint{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));text-align:center;font:400 .75rem/1.4 var(--mono);color:#7d8a99;padding-inline:16px}
@media (prefers-reduced-motion:reduce){.lb-stage img,.zoomable::after{transition:none}}
@media (max-width:560px){.lb-hint{font-size:.7rem}.lb-btns button{width:36px;height:36px}.lb-stage{left:8px;right:8px}}
/* 3D viewers start as a still image; the model only downloads after "View in 3D" */
.view3d{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0;border:0;background:#1b222c;cursor:pointer;color:#fff}
.view3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.view3d span{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:99px;background:rgba(14,19,25,.82);border:1px solid rgba(255,255,255,.22);
  font:600 .9rem/1 var(--body);box-shadow:0 4px 18px rgba(0,0,0,.35);transition:background .15s,border-color .15s}
.view3d span svg{width:18px;height:18px}
.view3d:hover span,.view3d:focus-visible span{background:#d9480f;border-color:#d9480f}
.view3d:focus-visible{outline:2px solid #ff7b3a;outline-offset:-4px}
.view3d.loading{cursor:progress}
.view3d.loading span{background:rgba(14,19,25,.82);border-color:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){.view3d span{transition:none}}
/* ---------- home: The Hanger ---------- */
.intro{padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,48px);max-width:760px}
.intro h1{font:700 var(--s4)/1.02 var(--display);letter-spacing:-.01em;margin-top:18px}
.intro h1 em{font-style:normal;color:var(--accent)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-bottom:clamp(56px,7vw,88px)}
.door{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--accent);transform:translateY(-2px)}
.door .sheet{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:18px}
.door-body{padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:12px;flex:1}
.door h2{font:700 var(--s3)/1.08 var(--display)}
.door p{color:var(--soft);max-width:46ch;line-height:1.6}
.door .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;padding:11px 16px;border:1px solid var(--accent);border-radius:6px;font:600 .92rem/1 var(--body);color:var(--accent);transition:background .15s,color .15s}
.door:hover .go{background:var(--accent);color:#fff}
.door.feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.door.feature .sheet{border-bottom:0;border-left:1px solid var(--rule)}
.door.feature .door-body{justify-content:center}
.door.feature .go{margin-top:14px}
@media (max-width:760px){.doors{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.door.feature{grid-template-columns:minmax(0,1fr)}.door.feature .sheet{order:-1;border-left:0;border-bottom:1px solid var(--rule)}}
@media (prefers-reduced-motion:reduce){.door,.door .go{transition:none}.door:hover{transform:none}}

/* illustrations (printer + code editor) */
.sheet .frame{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.sheet .win{fill:var(--surface);stroke:var(--rule);stroke-width:1.5}
.sheet .bar{stroke:var(--rule);stroke-width:1.5;fill:none}
.sheet .ghost{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.sheet .printed{fill:color-mix(in srgb,var(--accent) 70%,var(--surface))}
.intro .lede{max-width:52ch}
.sheet .layers{stroke:var(--ink);stroke-width:.8;opacity:.22;fill:none}
.sheet .code text{font-size:10.5px;fill:var(--ink)}
.sheet .code .ln{fill:var(--muted)}
.sheet .code .kw{fill:var(--line)}
.sheet .code .num{fill:var(--accent)}
.sheet .code .ln{fill:var(--muted)}
.sheet .cursor{fill:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet .cursor{animation:none}}

/* ---------- print cost calculator (/print/quote/) ---------- */
.q-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start;padding-bottom:clamp(48px,6vw,72px)}
.q-drop{position:relative;display:block;min-height:clamp(320px,44vw,480px);border:1px solid var(--rule);border-radius:10px;overflow:hidden;cursor:pointer;
  background-color:#1b222c;background-image:radial-gradient(110% 85% at 50% 40%,rgba(255,255,255,.07),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,20px 20px,20px 20px}
.q-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.q-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.q-view{position:absolute;inset:0}
.q-view canvas{display:block;width:100%;height:100%;cursor:grab}
.q-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:24px}
.q-pick{position:absolute;inset:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed rgba(255,255,255,.22);border-radius:8px;color:#c9d3de;text-align:center;padding:16px;transition:border-color .15s,background .15s}
.q-pick svg{width:40px;height:40px;color:#ff7b3a}
.q-pick strong{font:700 1.3rem/1.2 var(--display);color:#fff}
.q-pick span{font:400 .85rem/1.4 var(--mono)}
.q-drop:hover .q-pick,.q-drop.drag .q-pick{border-color:#ff7b3a;background:rgba(255,123,58,.06)}
.q-drop.loaded{cursor:default}
.q-drop.loaded .q-pick{display:none}
.q-drop.loaded.drag .q-pick{display:flex;background:rgba(14,19,25,.8)}
.q-status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font:400 .78rem/1.5 var(--mono);color:var(--muted)}
.q-card{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:16px}
.q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.q-price{display:block;font:700 var(--s4)/1 var(--display);margin-top:10px;font-variant-numeric:tabular-nums}
.q-subline{color:var(--muted);font-size:var(--s-1);margin-top:8px}
.q-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.q-table td{padding:9px 0;border-top:1px solid var(--rule);vertical-align:top;font-size:.92rem}
.q-table td:nth-child(2){color:var(--muted);text-align:right;padding-right:14px;white-space:nowrap;font-family:var(--mono);font-size:.82rem}
.q-table td:last-child{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:.85rem}
.q-table small{display:block;color:var(--muted);font:400 .74rem/1.4 var(--mono);margin-top:2px}
.q-table .q-sum td{font-weight:600;border-top:2px solid var(--ink)}
.q-table .q-total-row td{color:var(--accent);font-size:1rem}
.q-sw{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid var(--rule);margin-right:8px;vertical-align:-1px}
.q-help ol{margin:0;padding-left:20px;display:grid;gap:12px;color:var(--muted);font-size:.92rem}
.q-help strong{color:var(--ink);font-weight:600}
.q-notes{margin:0;padding-left:18px;color:var(--muted);font-size:var(--s-1);display:grid;gap:4px}
.q-card .btn{align-self:flex-start;cursor:pointer}
.q-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.q-settings fieldset{margin:0;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:18px 20px 20px;display:grid;gap:10px;align-content:start;min-width:0}
.q-settings legend{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.q-settings label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.88rem}
.q-settings input,.q-settings select{width:7.5em;font:400 .88rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:7px 8px;text-align:right}
.q-settings select{text-align:left}
.q-settings input[type=color]{padding:2px;height:32px}
.q-settings .actions{grid-column:1/-1;margin-top:0}
.q-mats-wrap{grid-column:1/-1}
.q-mats{width:100%;border-collapse:collapse}
.q-mats th,.q-mats td{padding:6px 8px 6px 0;text-align:left;font-size:.85rem}
.q-mats thead th{font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.q-mats input{width:100%;max-width:9em}
.q-fine{margin-top:20px;color:var(--muted);font-size:var(--s-1);max-width:70ch}
@media (max-width:980px){.q-grid{grid-template-columns:minmax(0,1fr)}.q-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.q-settings{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.q-pick{transition:none}}

/* ---------- dev dashboard (/dev/) ---------- */
.dev-tag{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:4px 8px;vertical-align:middle}
.dev-login{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:28px}
.dev-login label{display:grid;gap:6px;font:500 .8rem/1 var(--mono);color:var(--muted)}
.dev-login input{font:400 1rem/1.2 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:11px 12px;min-width:260px}
.dev-login .btn{cursor:pointer}
.dev-error{width:100%;color:var(--accent);font-size:var(--s-1)}
.dev-range{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font:500 .85rem/1 var(--mono)}
.dev-range a{color:var(--muted);text-decoration:none}
.dev-range a:hover,.dev-range a[aria-current]{color:var(--accent)}
.dev-specs2{margin-top:16px}
.dev-notice{margin-bottom:16px;padding:12px 16px;border:1px solid var(--accent);border-radius:8px;font-size:var(--s-1)}
.dev-reset{margin-top:12px}
.dev-reset .btn,.q-settings .btn{cursor:pointer}

/* calculator: colors panel */
.q-colors{margin-top:16px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:18px 20px;display:grid;gap:14px}
.q-colors-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.q-colors h3{font:700 1.2rem/1.2 var(--display)}
.q-colors-head p{color:var(--muted);font-size:var(--s-1);margin-top:2px}
.q-colors-head .btn{cursor:pointer;padding:9px 13px;font-size:.85rem}
.q-slots,.q-parts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.q-slots li{display:grid;grid-template-columns:40px 1fr minmax(0,13em) 4.5em 24px;align-items:center;gap:10px}
.q-slots .q-sw-big{width:26px;height:26px;margin:0 auto;display:block}
/* calculator: filament picker on the Price tab lines */
.q-line{display:inline-flex;align-items:center;gap:0;max-width:100%}
.q-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;padding:2px}
.q-swb{width:20px;height:20px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.25);padding:0;cursor:pointer;transition:transform .1s}
.q-swb:hover{transform:scale(1.15)}
.q-swb[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
.q-swb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-swb.any{background:conic-gradient(#e74c3c,#f1c40f,#2ecc71,#3498db,#9b59b6,#e74c3c);color:#fff;font:700 .7rem/1 var(--mono);text-shadow:0 0 2px #000}
.q-swb.more{background:var(--paper);color:var(--ink);border:1px dashed var(--muted);font:700 .85rem/1 var(--mono)}
dialog.q-cat{width:min(680px,94vw);max-height:90vh;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--paper);color:var(--ink);overflow:auto}
dialog.q-cat::backdrop{background:rgba(0,0,0,.45)}
.q-cat-in{padding:16px}
.q-cat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.q-cat-top h3{margin:0;font-size:1rem}
.q-cat-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.q-cat-head select,.q-cat-head input[type=search]{font:400 .85rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:6px 8px;min-width:0}
.q-cat-head input[type=search]{flex:1 1 9em}
.q-cat-note{margin:8px 0 0;font-size:.8rem}
.q-cat-grid{margin-top:10px;max-height:52vh}
.q-cat-tabs{margin-bottom:10px}
.q-cat-tabs button{padding:8px 10px;font-size:.84rem}
.q-cat-any{display:grid;gap:8px;margin-top:10px}
.q-cat-any .inv-sw{padding:10px 12px;font-size:.9rem}
.q-cat-any .inv-sw i{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.q-swb{transition:none}.q-swb:hover{transform:none}}
.q-slots select,.q-parts select{font:400 .85rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:6px 8px;min-width:0}
.q-slot-name{font-size:.9rem}
.q-slot-g{font:400 .8rem/1 var(--mono);color:var(--muted);text-align:right}
.q-x{width:24px;height:24px;border:1px solid var(--rule);border-radius:6px;background:none;color:var(--muted);cursor:pointer;line-height:1}
.q-x:hover{color:var(--accent);border-color:var(--accent)}
.q-colors h4{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.q-colors h4 small{letter-spacing:0;text-transform:none;margin-left:6px}
.q-parts{max-height:260px;overflow:auto}
.q-parts li{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;padding:6px 8px;border:1px solid transparent;border-radius:6px;cursor:pointer}
.q-parts li.has-copies{grid-template-columns:16px 1fr auto auto}
.q-copies{display:inline-flex;align-items:center;gap:4px;font:500 .85rem/1 var(--mono);color:var(--muted);cursor:default}
.q-copies input{width:4.2em;font:400 .85rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:6px 6px;text-align:center}
.q-parts li:hover{background:var(--paper)}
.q-parts li.sel{border-color:var(--accent);background:var(--paper)}
.q-part-name{font-size:.88rem;min-width:0;overflow-wrap:anywhere}
.q-part-name small{display:block;color:var(--muted);font:400 .72rem/1.4 var(--mono)}
.q-slots input:disabled,.q-slots select:disabled{opacity:.7;cursor:default}

/* calculator: design card, license, plates, MakerWorld link */
.q-design{margin-top:16px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:18px 20px;display:grid;gap:6px}
.q-design h3{font:700 1.25rem/1.2 var(--display)}
.q-design-by{color:var(--muted);font-size:var(--s-1)}
.q-design-by a{color:var(--line)}
.q-lic{margin-top:6px;font-size:var(--s-1);padding:9px 12px;border-radius:8px;border:1px solid var(--rule)}
.q-lic strong{font:600 .78rem/1 var(--mono);margin-right:6px}
.q-lic.ok{border-color:#5aa469}
.q-lic.no,.q-lic-warn{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.q-lic-warn{font-size:var(--s-1);padding:10px 12px;border:1px solid var(--accent);border-radius:8px}
.q-plates{display:flex;flex-wrap:wrap;gap:8px}
.q-plate{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--rule);border-radius:6px;font-size:.85rem;cursor:pointer}
.q-plate small{color:var(--muted);font-size:.75rem}
.q-plate:has(input:checked){border-color:var(--ink)}
.q-mw{border-top:1px solid var(--rule);padding-top:14px;display:grid;gap:8px;font-size:.9rem;color:var(--muted)}
.q-mw strong{color:var(--ink)}
.q-mw-row{display:flex;gap:8px}
.q-mw-row input{flex:1;min-width:0;font:400 .85rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:9px 10px}
.q-mw-row .btn{cursor:pointer}
.q-mw-msg{font-size:var(--s-1)}
.q-file-cfg{font-size:.78rem;color:var(--line);margin:0}

/* calculator: color legend over the 3D view */
.q-legend{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-height:calc(100% - 24px);overflow:auto}
.q-legend button{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 8px;border-radius:99px;background:rgba(14,19,25,.8);border:1px solid rgba(255,255,255,.18);color:#e6ecf2;font:500 .74rem/1 var(--mono);cursor:pointer;white-space:nowrap}
.q-legend button .q-sw{margin-right:0;border-color:rgba(255,255,255,.35)}
.q-legend button:hover{border-color:rgba(255,255,255,.5)}
.q-legend button[aria-pressed="true"]{border-color:#ff7b3a;background:rgba(14,19,25,.95)}
.q-legend button:focus-visible{outline:2px solid #ff7b3a;outline-offset:2px}
.q-link{padding:0;border:0;background:none;color:var(--line);font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:520px){.q-legend button{font-size:.68rem;padding:5px 9px 5px 7px}}

/* calculator: request this print */
.q-buttons{display:flex;flex-wrap:wrap;gap:10px}
.q-buttons .btn{cursor:pointer}
.q-req{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:12px}
.q-req h3{font:700 1.2rem/1.2 var(--display)}
.q-req > p{color:var(--muted);font-size:var(--s-1)}
.q-req label{display:grid;gap:6px;font-size:.88rem}
.q-req label small{color:var(--muted);font-weight:400}
.q-req input:not([type=checkbox]),.q-req textarea{font:400 .95rem/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:9px 11px;width:100%}
.q-req textarea{resize:vertical}
.q-req .q-check{display:flex;align-items:flex-start;gap:8px}
.q-req .q-check input{margin-top:3px}
.q-req .actions{margin-top:0}
.q-req .btn{cursor:pointer}
.q-req .btn:disabled{opacity:.6;cursor:progress}
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.q-attach-note:empty,.q-req-msg:empty{display:none}
.q-attach-note,.q-req-msg{font-size:var(--s-1);color:var(--accent)}
.q-req-done{padding:14px 16px;border:1px solid #5aa469;border-radius:8px;background:color-mix(in srgb,#5aa469 10%,transparent)}
.q-code{font:600 1rem/1 var(--mono);letter-spacing:.05em;padding:2px 6px;border:1px solid var(--rule);border-radius:4px;background:var(--surface)}
.req-list{display:grid;gap:12px}
.req{border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface);padding:16px 18px;display:grid;gap:6px}
.req-accepted,.req-printing{border-left-color:var(--line)}
.req-done{border-left-color:#5aa469;opacity:.85}
.req-declined{border-left-color:var(--rule);opacity:.7}
.req-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.req-head .dash{font-size:.75rem;margin-left:6px}
.req-code{font-weight:600;color:var(--accent);margin-right:4px}
.req-price{font-size:1.1rem}
.req-what{font-weight:500}
.req-what .swatches{margin-left:8px}
.req-meta{font-size:.8rem;color:var(--muted)}
.req-meta strong{color:var(--ink)}
.req-note{font-size:.9rem;padding:10px 12px;background:var(--paper);border-radius:6px;white-space:pre-wrap}
.req-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.req-actions form{margin:0}
.req-actions select{font:400 .85rem/1.2 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px}
.req-actions .btn{cursor:pointer;padding:9px 13px;font-size:.85rem}
.q-custom{grid-column:2/-1;font:400 .85rem/1.2 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--accent);border-radius:6px;padding:7px 9px;min-width:0}
.q-ready{margin-top:6px;font:500 .82rem/1.4 var(--mono);color:var(--line)}
.q-ready:empty{display:none}
/* calculator: what you picked (a chip per color under the price; .q-pick is the drop zone's placeholder, so these are .q-picked) */
.q-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.q-picks:empty{display:none}
.q-picked{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:1px solid var(--rule);border-radius:99px;background:var(--paper);font:500 .78rem/1.2 var(--mono);color:var(--ink)}
.q-picked .q-sw{margin:0;width:12px;height:12px;flex:none}
.q-picked small{color:var(--muted);font-size:.72rem}
.q-surprise{cursor:pointer;border-style:dashed}
.q-surprise:hover{border-color:var(--accent);color:var(--accent)}

/* popular prints: dashboard */
.pop-admin{display:grid;gap:10px;margin-bottom:20px}
.pop-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:12px}
.pop-row img,.pop-noimg{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--paper)}
.pop-noimg{display:grid;place-items:center;font:500 .65rem/1 var(--mono);color:var(--muted);text-align:center}
.pop-warn{color:var(--accent);font-weight:600}
.pop-add .pop-wide input{width:16em}
.pop-add input[type=file]{width:16em;text-align:left}
@media (max-width:600px){.pop-row{grid-template-columns:56px 1fr}.pop-row img,.pop-noimg{width:56px;height:56px}.pop-row .req-actions{grid-column:1/-1}}

/* popular prints: quote page */
.pop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.pop-card{border:1px solid var(--rule);border-radius:10px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.pop-card img,.pop-ph{width:100%;aspect-ratio:4/3;object-fit:cover;background:#1b222c}
.pop-ph{display:grid;place-items:center;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#93a0b0}
.pop-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pop-body h3{font:700 1.2rem/1.2 var(--display)}
.pop-body > p{color:var(--muted);font-size:var(--s-1)}
.pop-meta{font:400 .76rem/1.5 var(--mono)}
.pop-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.pop-foot strong{font:700 1.3rem/1 var(--display)}
.pop-foot .btn{cursor:pointer;padding:10px 14px;font-size:.88rem}
.pop-link{font-size:var(--s-1);color:var(--line)}
.pop-req{margin-top:16px;max-width:560px}
#pop-req-done{margin-top:16px;max-width:560px}

/* calculator: choose another file */
.q-status{align-items:center}
.btn.q-choose{display:none;cursor:pointer;padding:10px 14px;font-size:.9rem;border-color:var(--accent);color:var(--ink)}
.q-choose svg{width:18px;height:18px;color:var(--accent)}
.btn.q-choose:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.q-choose:hover svg{color:#fff}
.q-drop.loaded + .q-status .btn.q-choose{display:inline-flex}

/* footer admin button (home page) */
footer{align-items:center}
.foot-right{display:inline-flex;align-items:center;gap:14px}
.admin-btn{font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--muted);padding:7px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.admin-btn:hover{color:var(--ink);border-color:var(--muted)}

/* dev: admin accounts */
.admin-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.admin-form{grid-template-columns:minmax(0,1fr)}
.admin-form input{width:13em;text-align:left}
.admin-form .btn{justify-self:start;cursor:pointer;margin-top:6px}
.dev-bad{border-color:var(--accent);color:var(--accent)}
.dev-login{flex-direction:column;align-items:flex-start}
@media (max-width:760px){.admin-forms{grid-template-columns:minmax(0,1fr)}}

/* dev: price checks */
.req-check{font:500 .8rem/1.5 var(--mono);padding:6px 10px;border-radius:6px;border:1px solid var(--rule)}
.req-check-ok{color:#2f7d4a;border-color:#5aa469;background:color-mix(in srgb,#5aa469 8%,transparent)}
.req-check-mismatch{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.req-check-unknown{color:var(--muted)}
.req-today{color:var(--line);margin-left:6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .req-check-ok{color:#7fd19a}}

/* dev: live new-request check */
.poll-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);
  padding:12px 14px 12px 18px;border-radius:10px;background:var(--ink);color:var(--paper);box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:.92rem}
.poll-banner .btn{background:var(--accent);color:#fff;padding:9px 14px;font-size:.88rem}
.poll-tools{max-width:1160px;margin:0 auto;padding:0 0 28px;display:flex;gap:12px;align-items:center;font:400 .75rem/1.4 var(--mono);color:var(--muted)}
.poll-tools .btn{cursor:pointer;padding:6px 10px;font-size:.75rem}
.pop-foot strong small{display:block;font:400 .7rem/1.3 var(--mono);color:var(--muted);margin-top:4px}

/* calculator: clear button, MakerWorld profile picker */
.q-file-btns{display:inline-flex;gap:8px;flex-wrap:wrap}
.btn.q-clear{display:none;cursor:pointer;padding:10px 14px;font-size:.9rem}
.q-drop.loaded + .q-status .btn.q-clear{display:inline-flex}
.q-profile{display:grid;gap:6px;margin-top:8px;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.q-profile select{font:400 .9rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:9px 10px;width:100%}
.q-mw-row .btn:disabled{opacity:.6;cursor:progress}

/* calculator: plate render gallery */
.q-plate-nav{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:6px;padding:5px;border-radius:99px;
  background:rgba(14,19,25,.82);border:1px solid rgba(255,255,255,.18);color:#e6ecf2;font:500 .78rem/1 var(--mono);white-space:nowrap}
.q-plate-nav span{padding:0 8px;max-width:48vw;overflow:hidden;text-overflow:ellipsis}
.q-plate-nav button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.q-plate-nav button:hover{border-color:#ff7b3a;color:#ff7b3a}
.q-plate-nav button:focus-visible{outline:2px solid #ff7b3a;outline-offset:2px}

/* calculator: all-plates grid */
.q-plate-grid{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px;padding:14px 14px 62px;overflow:auto;align-content:start}
.q-pg{position:relative;display:block;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.03);cursor:zoom-in;aspect-ratio:1/1;overflow:hidden}
.q-pg img{width:100%;height:100%;object-fit:contain}
.q-pg span{position:absolute;left:6px;top:6px;font:500 .66rem/1 var(--mono);color:#e6ecf2;background:rgba(14,19,25,.8);padding:4px 6px;border-radius:4px}
.q-pg:hover,.q-pg:focus-visible{border-color:#ff7b3a;outline:none}
.q-plate-nav .q-pv{width:auto;height:30px;border-radius:99px;padding:0 12px;font:500 .74rem/1 var(--mono)}
.q-plate-nav .q-pv[aria-pressed="true"],.q-plate-nav .q-pt[aria-pressed="true"]{border-color:#ff7b3a;box-shadow:0 0 0 1px #ff7b3a}

/* calculator: plate strip under the 3D view (one thumbnail or numbered chip per plate) */
.q-plate-nav.strip{max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:thin;border-radius:14px;padding:5px 6px}
.q-plate-nav .q-pt{position:relative;flex:none;width:46px;height:46px;border-radius:8px;padding:0;overflow:hidden;background:#fff;font:600 .72rem/1 var(--mono)}
.q-plate-nav .q-pt img{width:100%;height:100%;object-fit:cover;display:block}
.q-plate-nav .q-pt span{position:absolute;left:3px;bottom:3px;padding:2px 5px;border-radius:4px;background:rgba(14,19,25,.85);color:#e6ecf2;font-size:.62rem}
.q-plate-nav .q-pt.txt{background:rgba(255,255,255,.08);width:auto;min-width:46px;padding:0 10px}
.q-plate-nav .q-pt.txt span{position:static;background:none;padding:0;font-size:.74rem}
.q-plate-nav .q-pt.txt span::before{content:"Plate "}
.q-plate-nav .q-pt:hover{border-color:#ff7b3a}

/* calculator: bigger view (the viewer fills the window) */
.q-big{position:absolute;right:12px;bottom:14px;z-index:3;display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(14,19,25,.82);color:#e6ecf2;cursor:pointer;padding:0}
.q-drop.loaded .q-big{display:flex}
.q-big svg{width:18px;height:18px}
.q-big:hover{border-color:#ff7b3a;color:#ff7b3a}
.q-big:focus-visible{outline:2px solid #ff7b3a;outline-offset:2px}
.q-drop.big{position:fixed;inset:0;z-index:60;min-height:0;border:0;border-radius:0;cursor:default}
.q-drop.big .q-big{right:16px;bottom:18px;width:44px;height:44px}
.q-plate-nav.strip{max-width:calc(100% - 120px)}
body.q-bigview{overflow:hidden}
/* phones: finger-sized targets, and the overlays clear the notch and home bar in the big view */
@media (pointer:coarse){.q-big{width:44px;height:44px}.q-swb{width:26px;height:26px}.q-swatches{gap:9px}.q-plate-nav .q-pt{width:44px;height:44px}}
.q-drop.big .q-big{right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
.q-drop.big .q-plate-nav{bottom:max(14px,env(safe-area-inset-bottom))}
.q-drop.big .q-legend{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
.q-drop.big .q-size{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
/* calculator: size readout in the corner of the 3D view */
.q-size{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:55%;text-align:right}
.q-size>*{display:inline-block;padding:6px 10px;border-radius:99px;background:rgba(14,19,25,.8);border:1px solid rgba(255,255,255,.18);color:#e6ecf2;font:500 .74rem/1.25 var(--mono)}
.q-size.big>span:first-child,.q-size .q-size-warn{border-color:#ff5a5a;color:#ffb3b3}
.q-size button{cursor:pointer;color:#ffb27a;border-color:rgba(255,123,58,.6)}
.q-size button:hover{border-color:#ff7b3a;color:#fff}
.q-size button:focus-visible{outline:2px solid #ff7b3a;outline-offset:2px}
.q-notes .q-warn{color:#c0392b;font-weight:600}
@media (max-width:520px){.q-size>*{font-size:.66rem;padding:5px 8px}.q-plate-nav .q-pt{width:40px;height:40px}}

/* dev: sidebar layout with separate pages */
.dev-body{padding:0}
.dev-app{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s}
.dev-app.mini{grid-template-columns:64px minmax(0,1fr)}
.dev-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:16px 10px;border-right:1px solid var(--rule);background:var(--surface);overflow:hidden auto}
.dev-side-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 4px}
.dev-side .brand{font-size:1.15rem;gap:10px;min-width:0;white-space:nowrap}
.dev-collapse{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--muted);cursor:pointer}
.dev-collapse svg{width:16px;height:16px;transition:transform .18s}
.dev-collapse:hover{color:var(--ink);border-color:var(--muted)}
.dev-nav,.dev-side-foot{display:flex;flex-direction:column;gap:2px}
.dev-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.dev-nav a,.dev-side-foot a,.dev-user{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font:500 .92rem/1.2 var(--body);white-space:nowrap}
.dev-nav a:hover,.dev-side-foot a:hover{background:var(--paper);color:var(--ink)}
.dev-nav a[aria-current]{background:var(--paper);color:var(--ink)}
.dev-nav a[aria-current]::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.dev-ico{width:20px;height:20px;flex:none}
.dev-user{font-size:.85rem}
.dev-count{margin-left:auto;min-width:22px;padding:3px 7px;border-radius:99px;background:var(--accent);color:#fff;font:600 .72rem/1 var(--mono);text-align:center}
.dev-count:empty{display:none}
.dev-app.mini .dev-label{display:none}
.dev-app.mini .dev-side-top{flex-direction:column;gap:12px}
.dev-app.mini .dev-collapse svg{transform:rotate(180deg)}
.dev-app.mini .dev-nav a,.dev-app.mini .dev-side-foot a,.dev-app.mini .dev-user{justify-content:center;padding:10px 0}
.dev-app.mini .dev-count{position:absolute;top:2px;right:2px;min-width:16px;padding:2px 4px;font-size:.6rem}
.dev-main{min-width:0;width:100%;max-width:1180px;justify-self:center;margin-inline:auto;padding:20px clamp(16px,3vw,44px) 40px}
.dev-main [data-tab]{display:none}
.dev-main [data-tab].on{display:block}
.dev-main .specs[data-tab].on{display:grid}
.dev-main .block{border-top:0;padding-block:12px 28px}
.dev-main .intro{padding-block:12px 24px}
@media (prefers-reduced-motion:reduce){.dev-app,.dev-collapse svg{transition:none}}
.dev-main .poll-tools{padding:24px 0 0;margin:0;max-width:none}
.dev-side svg{max-width:26px;max-height:26px}
@media (max-width:600px){.dev-app.mini{grid-template-columns:56px minmax(0,1fr)}.dev-app.mini .dev-side{padding:12px 6px}.dev-main{padding:16px 12px 32px}}

/* dev: delete quotes */
.q-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.q-tools .btn{cursor:pointer;padding:9px 13px;font-size:.85rem}
.q-tools .btn:disabled{opacity:.5;cursor:default}
.q-all{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);margin-right:6px}
.btn.q-danger{margin-left:auto;border-color:var(--accent);color:var(--accent)}
.btn.q-danger:hover{background:var(--accent);color:#fff}
.log th.q-chk,.log td.q-chk{width:36px;padding-right:0}

/* dev: trending designs */
.dev-sub{font:700 1.2rem/1.2 var(--display);margin:8px 0 12px}
.dev-sub small{font:400 .78rem/1 var(--mono);color:var(--muted);margin-left:8px}
.trend{margin-bottom:8px}
.trend .name{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.trend-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none}
.trend .btn{cursor:pointer;padding:8px 12px;font-size:.82rem;white-space:nowrap}
.pop-warn{display:block}
.pop-links{font-size:var(--s-1)}
.trend .name > span{flex-basis:100%;display:flex;align-items:center;gap:6px}
.trend .name .swatches{display:inline-flex;margin:0}
.trend .name .swatches i{display:inline-block;width:12px;height:12px;flex:none}

/* dev: filament inventory */
.inv-table td{padding-top:6px;padding-bottom:6px}
.inv-table input[type=text],.inv-table input[type=number],.inv-table select{width:100%;font:400 .88rem/1.2 var(--sans,inherit);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:7px 9px}
.inv-table input[type=color]{width:40px;height:32px;padding:2px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);cursor:pointer}
.inv-table th:nth-child(1),.inv-table td:nth-child(1){width:56px}
.inv-table th:nth-child(3),.inv-table td:nth-child(3){width:9em}
.inv-table th:nth-child(4),.inv-table td:nth-child(4){width:6.5em}
.inv-pick-tools .inv-fee{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.inv-pick-tools .inv-fee input{width:5.5em}
.inv-table .inv-stock{text-align:center;width:5em}
.inv-table .inv-stock input{width:18px;height:18px;cursor:pointer}
.inv-empty{padding:14px 4px}
#inv-form .q-tools{margin-top:12px}
#inv-form .inv-only{display:flex;align-items:flex-start;gap:8px;margin-top:14px;max-width:720px;font-size:.9rem;line-height:1.45}
#inv-form .inv-only input{margin-top:4px}
.btn.inv-save{margin-left:auto}

/* popular prints: picture grid, 3 rows of 4 */
.pop-tile{display:flex;flex-direction:column;gap:4px;min-width:0}
.pop-pic{display:block;padding:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#1b222c;cursor:pointer;aspect-ratio:1;width:100%}
.pop-pic img,.pop-pic .pop-ph{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .25s}
.pop-pic:hover img{transform:scale(1.04)}
.pop-pic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pop-tile h3{font:700 1rem/1.25 var(--display);margin-top:6px;overflow-wrap:anywhere}
.pop-price{font:500 .85rem/1.2 var(--mono);color:var(--ink)}
.pop-acts{font-size:.82rem;color:var(--muted)}
@media (max-width:900px){.pop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.pop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}}

/* dev: request status filter */
.req-filter{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.req-filter button{font:500 .82rem/1 var(--mono);color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:8px 13px;cursor:pointer}
.req-filter button b{font-weight:600;color:var(--ink);margin-left:4px}
.req-filter button:hover{border-color:var(--muted)}
.req-filter button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.req-filter button[aria-pressed=true] b{color:#fff}
.req-none{padding:8px 2px 16px}
.req[hidden]{display:none}

/* Terms of Service: always-visible link at the bottom of every page */
body{padding-bottom:42px}
.legal-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));font:400 .76rem/1.3 var(--mono);color:var(--muted);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule)}
.legal-bar a{color:var(--ink);font-weight:600}
@media (max-width:600px){.legal-bar span{display:none}}
.terms{max-width:760px;padding-block:24px 48px}
.terms h1{font:700 clamp(2rem,5vw,3rem)/1.1 var(--display);margin:6px 0 4px}
.terms h2{font:700 1.25rem/1.25 var(--display);margin:30px 0 8px}
.terms p,.terms li{color:var(--ink);max-width:68ch}
.terms ul{padding-left:1.2em;margin:8px 0}
.terms-date{color:var(--muted);font-size:.8rem;margin-bottom:18px}
.terms-note{margin-top:30px;color:var(--muted)}

/* dev: inventory - Bambu colors and photos */
.inv-add-panels{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;margin-top:20px}
@media (max-width:900px){.inv-add-panels{grid-template-columns:1fr}}
.inv-panel{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:16px 18px;display:grid;gap:10px;align-content:start}
.inv-panel h3{font:700 1.1rem/1.2 var(--display)}
.inv-panel > p.dash{font-size:var(--s-1)}
.inv-pick-tools{display:flex;flex-wrap:wrap;gap:8px}
.inv-pick-tools select,.inv-pick-tools input,.inv-ai-form input{font:400 .88rem/1.2 inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;min-width:0}
.inv-pick-tools input{flex:1 1 12em}
.inv-pick-tools .btn,.inv-ai-form .btn,.inv-photo-btn{cursor:pointer;padding:9px 13px;font-size:.85rem}
.inv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;max-height:330px;overflow:auto;padding:2px}
.inv-sw{display:flex;align-items:center;gap:8px;text-align:left;padding:6px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;font:400 .78rem/1.2 inherit;min-width:0}
.inv-sw i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(128,128,128,.5)}
.inv-sw span{min-width:0;overflow-wrap:anywhere}
.inv-sw small{display:block;color:var(--muted);font-size:.68rem}
.inv-sw:hover{border-color:var(--muted)}
.inv-sw.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.inv-sw.on span::after{content:" ✓";color:var(--accent)}
.inv-photo-btn{justify-self:start}
.inv-photo-msg{font-size:var(--s-1);min-height:1.3em}
.inv-ai summary{cursor:pointer;font-size:var(--s-1);color:var(--muted)}
.inv-ai-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:10px 0 6px}
.inv-ai-form label{display:grid;gap:4px;font-size:.8rem;color:var(--muted);flex:1 1 14em}
.inv-table tr.inv-new td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn.inv-save.inv-dirty::after{content:" •";color:#fff}

/* dev: clear price differences, sort requests */
.inline-form{display:inline;margin:0}
.dev-notice .inline-form .btn{margin-left:8px;padding:6px 11px;font-size:.8rem;cursor:pointer}
.req-check .inline-form .q-link{margin-left:6px}
.req-sort{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 .8rem/1 var(--mono);color:var(--muted)}
.req-sort select{font:400 .82rem/1.2 var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:7px 10px}
.pop-price small{font-size:.75rem;color:var(--muted)}

/* dev: popular print pictures from 3D models */
.pop-render-prev{width:160px;height:160px;border-radius:10px;object-fit:cover;border:1px solid var(--rule)}
.pop-photo-form{display:inline}
.pop-photo-form .btn{cursor:pointer}

/* request status page */
.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}
.status-page{max-width:720px;padding-block:24px 56px}
.status-page h1{font:700 clamp(2rem,5vw,3rem)/1.1 var(--display);margin:6px 0 10px}
.status-form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.status-form input{font:600 1.1rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:12px 14px;width:11ch}
.status-form .btn{cursor:pointer}
.status-msg{margin-top:12px;color:var(--muted);min-height:1.4em}
.status-card{margin-top:8px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:20px 22px;display:grid;gap:14px}
.status-card header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status-card h2{font:700 1.4rem/1.2 var(--display)}
.status-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:s}
.status-steps li{font:500 .78rem/1.2 var(--mono);color:var(--muted);padding-top:12px;border-top:4px solid var(--rule)}
.status-steps li.on{border-top-color:var(--accent);color:var(--ink)}
.status-steps li.now{font-weight:700}
.status-steps.declined li{opacity:.5}
.status-meta{font-size:.8rem;color:var(--muted)}
/* dev: pay links and status emails */
.req-notify{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);margin-left:6px}
.req-pay{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.req-pay input[type=url]{font:400 .82rem/1.2 inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;width:16em;max-width:100%}
.req-pay .btn{cursor:pointer}

/* calculator: ask how many before showing the price */
.q-head{flex-wrap:wrap}
.q-qty-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin-bottom:12px}
.q-qty-row label{font-weight:600}
.q-qty-row input{width:6em;font:600 1rem/1 var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:9px 10px}
.q-qty-row .btn{cursor:pointer}
#q-result.asking .q-qty-row{padding:16px;border:1px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
#q-result.asking .q-qty-row label{font:700 1.2rem/1.2 var(--display);width:100%}
#q-result.asking .q-price-wrap,#q-result.asking #q-badge,#q-result.asking .q-table,#q-result.asking .q-notes,#q-result.asking .q-buttons,#q-result.asking #q-lic-warn,#q-result.asking .q-req,#q-result.asking .q-req-done{display:none}
#q-result.asking .q-tabs,#q-result.asking .q-panel{display:none}

/* calculator: Price / Settings tabs */
.q-tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule)}
.q-tabs button{cursor:pointer;font:600 .9rem/1 inherit;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px}
.q-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.q-panel{display:flex;flex-direction:column;gap:16px}
.q-panel[hidden]{display:none}
.q-tab-note{color:var(--muted);font-size:var(--s-1)}
.q-page-fine{margin-top:32px}
.q-panel .q-colors{margin-top:0}
.q-panel .q-settings{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* request forms: email code */
.q-verify{display:grid;gap:8px;padding:12px;border:1px dashed var(--rule);border-radius:8px}
.q-verify .btn{justify-self:start;cursor:pointer;padding:8px 12px;font-size:.85rem}
.q-code-in input{font:600 1.1rem/1 var(--mono);letter-spacing:.2em;width:9ch}
.q-verify-msg{font-size:var(--s-1);color:var(--muted);min-height:1.2em}
.req-ok{color:#5aa469;font-size:.8rem}
.mail-form{margin-top:16px}
.mail-test{margin:8px 0 20px}
.mail-test .btn{cursor:pointer}

/* dev: several sending mailboxes */
.mail-box{margin:20px 0 24px;display:grid;gap:12px}
.mail-box h3{font:700 1.15rem/1.2 var(--display);display:flex;align-items:center;gap:10px}
.mail-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mail-acts form{margin:0}
.mail-acts .btn{cursor:pointer;padding:6px 10px;font-size:.8rem}
tr.mail-off td{opacity:.55}
.mail-note{font-size:var(--s-1)}

/* UX round: MakerWorld link under the drop zone, quantity stepper, project log pictures, notify form, fine print */
.q-mw-top{margin-top:14px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:14px 16px}
.q-mw-msg .q-link{margin-left:2px}
.q-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--paper)}
.q-stepper button{width:44px;font:600 1.2rem/1 var(--mono);color:var(--ink);background:var(--surface);border:0;cursor:pointer}
.q-stepper button:hover{background:var(--paper)}
.q-qty-row .q-stepper input{width:4.5em;border:0;border-radius:0;text-align:center;font-size:1.15rem;padding:11px 4px;-moz-appearance:textfield}
.q-stepper input::-webkit-outer-spin-button,.q-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.log-pic{float:left;margin-right:12px}
.log-pic img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--rule);display:block;background:#1b222c}
.notify{display:grid;gap:8px;max-width:560px;margin-top:20px;color:var(--muted);font-size:.92rem}
.notify strong{color:var(--ink)}
.notify-msg{font-size:var(--s-1);min-height:1.2em}
details.q-page-fine summary{cursor:pointer;color:var(--muted)}
details.q-page-fine p{margin-top:8px}
@media (max-width:600px){.legal-bar{gap:2px 6px}}
/* /print/ Most popular: facts under the price, color pick in the request form, log cross-links, category filters */
.pop-about{font-size:.82rem;line-height:1.45;color:var(--soft)}
.pop-facts{font:400 .75rem/1.4 var(--mono);color:var(--muted)}
.pop-color-pick{display:flex;align-items:center;gap:8px}
.pop-color-pick .q-sw{width:16px;height:16px;flex:none;margin:0}
.pop-color-pick select{font:400 .95rem/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:9px 11px;width:100%;min-width:0}
.log-req{display:block;margin-top:8px;font-size:.8rem;white-space:nowrap}
.log tr:target td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.log-note{margin-top:14px;font-size:.85rem}
.focus button{text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.focus button:hover{border-color:var(--line)}
.focus button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.focus button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* dev: trending across model sites (api/trending-lib.php) */
.trend-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.trend-filters{display:inline-flex;gap:4px}
.trend-bar .btn{cursor:pointer;padding:8px 12px;font-size:.82rem}
.trend-bar .btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.trend-bar select{font:400 .88rem/1.2 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px 10px}
.trend-tag{font:600 .65rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:99px;border:1px solid var(--rule);color:var(--muted);font-style:normal}
.trend-tag.trend-hot{border-color:var(--accent);color:var(--accent)}
.trend-tag.trend-rising{color:var(--ink)}
.trend-sites td .btn+.btn{margin-left:6px}
.trend-settings .inv-ai-form label{display:grid;gap:4px;font-size:.85rem}
.trend-settings .inv-ai-form input[readonly]{min-width:min(100%,520px)}
.trend-watch{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px;font-size:.85rem}
.trend-watch li{display:flex;gap:10px;align-items:center}
.trend-watch .inline-form{display:inline}
/* dev: popular prints sorted by category */
.pop-cat-head{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:10px 0 -2px}
.pop-cat-head:first-child{margin-top:0}
.pop-cat-head small{font:inherit;color:var(--line);margin-left:6px}
.pop-cat-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-4px 0 14px}
.pop-cat-tools .btn{cursor:pointer;padding:8px 12px;font-size:.82rem}
.pop-cat-form select{font:400 .82rem/1.2 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;max-width:170px}
/* /print/ Most popular: category tabs (Fidgets first) */
.pop-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.pop-tabs button{font:500 .8rem/1 var(--mono);letter-spacing:.04em;padding:9px 13px;border-radius:99px;border:1px solid var(--rule);background:var(--surface);color:var(--muted);cursor:pointer}
.pop-tabs button:hover{border-color:var(--line);color:var(--ink)}
.pop-tabs button[aria-selected=true]{border-color:var(--accent);color:var(--accent)}
.pop-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* dev: trending designs carry their guessed category; fidgets stand out */
.trend-tag.trend-cat{border-style:dashed}
.trend-tag.trend-fidgets{border-style:solid;border-color:var(--ink);color:var(--ink)}