@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111313;--panel:#1c1e1d;--line:#323532;--muted:#979c96;--accent:#d9ed8b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eff0e9;font:14px 'DM Sans',sans-serif}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:1px solid var(--line);background:transparent;border-radius:5px}button:hover{border-color:#a3ac96}a{color:inherit;text-decoration:none}header{height:86px;border-bottom:1px solid #2a2d29;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}.brand{font:600 15px 'Space Grotesk',sans-serif;letter-spacing:1.5px;display:flex;align-items:center;gap:14px}.mark{font-size:29px;color:var(--accent);letter-spacing:-5px;margin-right:8px}.beta{font:9px 'DM Sans';letter-spacing:1px;border:1px solid #414638;border-radius:4px;padding:5px 7px;color:#b5bea7}nav{display:flex;align-items:center;gap:32px}nav button{border:0;color:#9da39b}nav .active{color:var(--accent)}#count{background:#30352a;padding:2px 6px;border-radius:4px;font-size:11px;margin-left:5px}main{max-width:1600px;margin:auto;padding:42px 4.5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow,.tiny-label{font-size:10px;letter-spacing:2px;color:#a6ad9e;font-weight:600}h1,h2,h3,p{margin:0}h1{font:500 clamp(30px,3vw,46px) 'Space Grotesk';letter-spacing:-1.8px;margin:10px 0}p{line-height:1.6;color:var(--muted)}.status{font-size:11px;color:#adb5a5}.status i{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:9px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 314px;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:555px}.viewport{position:relative;background:radial-gradient(ellipse at 48% 45%,#3e4536 0,#292d27 43%,#1a1e1a 100%);min-height:555px;overflow:hidden}.stage-label{position:absolute;top:25px;left:27px;right:27px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.7px;z-index:1;color:#c0c7b7}.stage-label span:last-child{color:#77816e}#canvas-wrap{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;outline-offset:-5px!important}#poster{width:100%;height:100%;object-fit:contain}#load-status{position:absolute;top:60px;left:27px;color:#c3ccb7;font-size:12px}.view-tools{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);display:flex;gap:5px;white-space:nowrap;background:#191c19d9;border:1px solid #41483b;border-radius:7px;padding:5px}.view-tools button{border:0;padding:9px 12px;color:#bec6b5;font-size:17px}.view-tools button span{font-size:11px;margin-left:5px}.view-tools button:hover,.view-tools button[aria-pressed=true]{background:#39412f;color:var(--accent)}.stage-bottom{position:absolute;bottom:24px;left:27px;right:27px;display:flex;justify-content:space-between;color:#87917d;font-size:9px;letter-spacing:1.5px}b{margin:0 10px;color:#60685b}aside{background:var(--panel);padding:28px;border-left:1px solid var(--line);display:flex;flex-direction:column}.panel-heading{padding-bottom:27px}.panel-heading h2{font:500 28px 'Space Grotesk';margin:12px 0 7px;letter-spacing:-1px}.panel-heading h2 span{color:#70796b}.panel-heading p:last-child{font-size:12px}.control-section{border-top:1px solid var(--line);padding:22px 0}h3{font-size:10px;font-weight:400;color:#75806b;letter-spacing:1px}h3 span{color:#d7dbd0;margin-left:8px;font-size:12px;letter-spacing:0}.section-title{display:flex;align-items:center;justify-content:space-between}#finish-label{font-size:10px;color:#9ca691}.swatches{display:flex;gap:14px;margin:18px 0 12px}.swatch{width:39px;height:39px;border-radius:50%;background:var(--swatch);border:3px solid var(--panel);outline:1px solid #4b5147}.swatch.selected{outline:2px solid var(--accent)}.hint{font-size:10px;color:#798471}.lighting{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.lighting button{font-size:10px;color:#aeb7a3;padding:6px 6px 9px;border-color:#3a4036}.lighting .selected{border-color:var(--accent);color:var(--accent)}.light-preview{display:block;height:39px;margin-bottom:8px;border-radius:3px;background:radial-gradient(ellipse at 50% 15%,#b2bda4,#2c3227 75%)}.light-preview.warm{background:radial-gradient(ellipse at 50% 15%,#d6b77e,#393025 75%)}.light-preview.cool{background:radial-gradient(ellipse at 50% 15%,#9fb5d6,#242d39 75%)}.range-row{display:flex;gap:10px;align-items:center;margin-top:14px;color:#8d9881}input{width:100%;accent-color:var(--accent);direction:rtl}.save-area{margin-top:auto;padding-top:12px}.primary{display:flex;justify-content:space-between;width:100%;background:var(--accent);color:#232a17;padding:13px 16px;border:0;font-weight:600}.save-area p{font-size:9px;text-align:center;margin-top:12px}.under{display:flex;align-items:center;gap:35px;padding:34px 0 36px;border-bottom:1px solid var(--line)}.under h2{font:400 21px 'Space Grotesk';margin-top:9px;letter-spacing:-.5px}.under p{max-width:280px;font-size:12px;margin-left:auto}.edition{font-size:9px;line-height:2;color:#76816c;border-left:1px solid var(--line);padding-left:30px;letter-spacing:1px}.edition strong{font-weight:400;color:#bcc4b2}footer{display:flex;justify-content:space-between;max-width:1600px;margin:auto;padding:25px 4.5%;font-size:9px;letter-spacing:1.4px;color:#7c8474}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--accent);color:#242c19;padding:13px 22px;border-radius:6px;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.saved-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 20px}.saved-heading span{color:var(--muted);font-size:12px}#scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.scene{border:1px solid var(--line);border-radius:7px;padding:18px}.scene p{font-size:12px;margin:8px 0 15px}.scene button{padding:8px 12px;margin-right:8px}dialog{max-width:500px;background:var(--panel);color:#edf0e8;border:1px solid #505949;border-radius:10px;padding:35px}dialog::backdrop{background:#000a}dialog h2{font:500 27px 'Space Grotesk';margin:15px 0}dialog p{margin:12px 0}#close-about{float:right;border:0;font-size:25px}@media(max-width:850px){header{padding:0 22px}.beta,nav #about,.status{display:none}nav{gap:16px}.brand{font-size:12px}.workspace{grid-template-columns:minmax(0,1fr)}.viewport{min-height:450px}aside{border-left:0;border-top:1px solid var(--line)}.under{flex-wrap:wrap;gap:20px}.under p{margin-left:0}.edition{display:none}#scenes{grid-template-columns:1fr 1fr}}@media(max-width:480px){main{padding:28px 16px 0}header{height:70px;padding:0 16px}.brand{gap:7px;font-size:10px;letter-spacing:1px}nav{gap:12px;font-size:12px}nav button{font-size:11px}.mark{font-size:23px}h1{font-size:29px;letter-spacing:-1.3px}.intro p:not(.eyebrow){font-size:12px}.viewport{min-height:390px}.stage-label{left:18px;right:18px;font-size:8px}.stage-label{gap:10px}.stage-label span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-label span:last-child{font-size:7px;letter-spacing:.8px;flex:none;white-space:nowrap}.view-tools button{padding:8px}.view-tools button span{font-size:10px}.stage-bottom{font-size:7px;left:18px;right:18px}aside{padding:23px}footer{font-size:8px;letter-spacing:.4px}#scenes{grid-template-columns:1fr}}
/* PewBuild / cream editorial edition. */
:root{color-scheme:light;--bg:#f5f1e8;--panel:#fcfaf5;--line:#d7d1c5;--muted:#68665f;--accent:#262621}
body{color:#22221f;font-family:Arial,Helvetica,sans-serif}header{height:100px;border-color:var(--line)}.brand{font:600 15px Arial,sans-serif;letter-spacing:2.5px}.mark{font-family:Georgia,serif;font-size:32px;letter-spacing:-3px}.beta{font:9px Arial,sans-serif;color:#70695e;border-color:var(--line);border-radius:0;letter-spacing:1.5px}nav button{color:var(--muted)}nav .active{border-bottom:1px solid;padding-bottom:5px}#count{background:#e5dfd3;color:#22221f;border-radius:0}main{padding-top:55px}.intro{margin-bottom:38px;align-items:flex-end}.eyebrow,.tiny-label{font:10px Arial,sans-serif;letter-spacing:2.5px;color:#756d60}h1{font:400 clamp(44px,5.2vw,76px)/1.05 Georgia,serif;letter-spacing:-3px;margin:18px 0}.intro>div>p:last-child{font-size:14px;line-height:1.8}.status{color:var(--muted);padding-bottom:8px}.status i{background:#85785c}.workspace{border-radius:0;grid-template-columns:minmax(0,1fr) 330px}.viewport{background:radial-gradient(ellipse at 48% 40%,#f0ebe0 0,#e3dccd 55%,#cec5b4 100%)}.stage-label{color:#554f43}.stage-label span:last-child{color:#756c5d}#load-status{color:#625a4c}.stage-bottom{color:#675f51}.view-tools{background:#faf7f0ed;border:1px solid #c8c0b1;border-radius:0;box-shadow:0 8px 30px #65554010}.view-tools button{color:#49453c;border-radius:0}.view-tools button:hover,.view-tools button[aria-pressed=true]{background:#e6dfd2;color:#22221f}aside{padding:30px}.panel-heading h2{font:400 36px Georgia,serif;letter-spacing:-1px}.panel-heading h2 span{font-style:italic;color:#a59a86}.panel-heading p:last-child{font-size:12px}h3{color:#8b806c}h3 span{color:#3c3932}#finish-label,.hint{color:#746b5c}.swatch{outline-color:#bcb3a2}.swatch.selected{outline-color:#262621}.lighting button{border-radius:0;border-color:var(--line);color:#6d6559}.lighting .selected{border-color:#262621;color:#262621}.light-preview{border-radius:0;background:radial-gradient(ellipse at 50% 15%,#f5efe0,#ada48e 85%)}.light-preview.warm{background:radial-gradient(ellipse at 50% 15%,#f9e1b5,#b1946d 85%)}.light-preview.cool{background:radial-gradient(ellipse at 50% 15%,#e1e6eb,#939eae 85%)}.range-row{color:#70685a}.primary{border-radius:0;background:#262621;color:#f5f1e8;padding:16px}.primary:hover{background:#49463d}.under{padding:40px 0;gap:45px}.under h2{font:400 30px Georgia,serif;letter-spacing:-.8px}.under p{line-height:1.8}.edition,.edition strong{color:#756b5a}footer{padding-top:30px;padding-bottom:30px;color:#70695c}#toast{background:#262621;color:#f5f1e8;border-radius:0}.scene{border-radius:0;background:var(--panel)}.scene button{border-radius:0}dialog{background:var(--panel);color:#22221f;border-radius:0;border-color:var(--line)}dialog h2{font:400 32px Georgia,serif}button{border-radius:0}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#71613d}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr)}.intro{align-items:flex-start}main{padding-top:38px}.under{gap:22px}.under h2{font-size:26px}}
@media(max-width:480px){header{height:78px}.brand{font-size:12px}.mark{font-size:27px}h1{font-size:43px;letter-spacing:-2px}.intro{margin-bottom:25px}.intro>div>p:last-child{font-size:13px}main{padding-top:30px}.panel-heading h2{font-size:34px}.stage-bottom{font-size:7px}aside{padding:24px}.under{padding:30px 0}.under h2{font-size:25px}.view-tools button{padding:8px}}

/* Build configurator */
.preset-row{display:flex;flex-wrap:wrap;gap:8px}
.preset-row button{border:1px solid var(--line);background:transparent;color:#4a4639;padding:9px 12px;font-size:12px;letter-spacing:.02em}
.preset-row button.selected{background:#262621;color:#f5f1e8;border-color:#262621}
.slots{display:flex;flex-direction:column;gap:10px}
.slot{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:10px}
.slot label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#756b5a}
.slot select{width:100%;border:1px solid var(--line);background:#fffdf8;color:#22221f;padding:8px 9px;font:inherit;font-size:12px;border-radius:0}
.slot select:focus-visible{outline:2px solid #71613d;outline-offset:1px}
.slot option.incompatible{color:#8c2f22}
.verdict{font-size:10px;letter-spacing:.14em;padding:5px 9px;border:1px solid currentColor}
.verdict.ok{color:#4a5a3c}
.verdict.advisory{color:#7a6a32}
.verdict.unknown,.verdict.incomplete{color:#6a6458}
.verdict.blocking{color:#8a4b1e}
.verdict.hazard{color:#8c2f22;background:#8c2f22;color:#f8ede9;border-color:#8c2f22}
.report #findings{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.finding{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-left:3px solid var(--line);background:#fffdf8}
.finding strong{font-size:12.5px;font-weight:600;line-height:1.45;color:#22221f}
.finding span{font-size:11.5px;color:#6a6458;line-height:1.5}
.finding em{font-size:11px;color:#8a8273;font-style:italic;line-height:1.5}
.finding.ok{border-left-color:#4a5a3c}
.finding.advisory{border-left-color:#9a8742}
.finding.unknown,.finding.incomplete{border-left-color:#a39a88}
.finding.blocking,.finding.dimensional{border-left-color:#b4651f;background:#fdf4ec}
.finding.hazard{border-left-color:#8c2f22;background:#f9ebe6}
.finding.hazard strong{color:#7d2a1e}
#transfer-note{margin-top:11px;font-size:11px;line-height:1.6}
@media(max-width:480px){.slot{grid-template-columns:1fr;gap:4px}}

/* The configurator panel is far taller than the viewport, and a stretched grid
   row pushed the canvas below the fold. Cap both to one studio height and let
   the panel scroll inside it. */
.workspace{min-height:0}
.viewport{height:min(72vh,680px);min-height:420px}
aside{max-height:min(72vh,680px);overflow-y:auto;scrollbar-width:thin}
@media(max-width:850px){
  .viewport{height:auto;min-height:420px}
  aside{max-height:none;overflow:visible}
}
/* The verdict has to stay visible while the component list scrolls under it. */
.report{position:sticky;top:0;background:var(--panel);z-index:2;border-top:0;padding-top:0;box-shadow:0 10px 14px -12px #6655401f}
.report .section-title{padding:14px 0 10px}
/* A select is as wide as its longest option unless the track can shrink, which
   otherwise forces the whole page wider than a phone viewport. */
.slot{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.slot select{min-width:0;max-width:100%}
.preset-row button{max-width:100%}
@media(max-width:480px){.slot{grid-template-columns:minmax(0,1fr)}}

/* ---- Wizard ---- */
.steps{display:flex;gap:0;list-style:none;margin:0 0 4px;padding:0;position:sticky;top:0;background:var(--panel);z-index:3;border-bottom:1px solid var(--line)}
.steps .step{flex:1}
.steps button{width:100%;border:0;border-bottom:2px solid transparent;background:transparent;color:#908674;padding:12px 4px;font-size:11px;letter-spacing:.04em}
.steps .done button{color:#5d5547}
.steps .current button{color:#22221f;border-bottom-color:#262621;font-weight:600}
.step-lead{font-size:11.5px;line-height:1.6;color:#7a7162;margin-bottom:14px}
#step-body{padding:18px 0 6px}

.platform-grid{display:flex;flex-direction:column;gap:10px}
.platform-card{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fffdf8;padding:14px;color:inherit}
.platform-card:hover{border-color:#8b806c}
.platform-card.selected{border-color:#262621;box-shadow:inset 0 0 0 1px #262621}
.platform-card h4{margin:0 0 7px;font:400 17px Georgia,serif;letter-spacing:-.2px}
.platform-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 7px}
.platform-meta span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8b806c}
.platform-note{font-size:11.5px;line-height:1.55;color:#756b5a;margin:0}
.platform-price{display:block;margin-top:9px;font:400 16px Georgia,serif;color:#22221f}
.platform-card.scratch{background:transparent;border-style:dashed}

.appearance{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.appearance h4{margin:0 0 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8b806c;font-weight:600}
.appearance .swatches{margin:0 0 14px}

/* ---- Review ---- */
.radar-wrap{display:flex;justify-content:center;margin:4px 0 10px}
.radar{width:100%;max-width:280px;height:auto;overflow:visible}
.radar-ring{fill:none;stroke:#d8d0bf;stroke-width:1}
.radar-spoke{stroke:#e0d8c8;stroke-width:1}
.radar-fill{fill:#73795566;stroke:#5f684a;stroke-width:1.5}
.radar-label{font:9px Arial,sans-serif;fill:#8b806c;letter-spacing:.04em}
.radar-value{font:10px Georgia,serif;fill:#3c3932}

.parts-table{display:flex;flex-direction:column;margin-top:8px}
.parts-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.parts-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.parts-slot{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9b9182}
.parts-model{font-size:12px;color:#33312b;line-height:1.4}
.parts-row strong{font:400 14px Georgia,serif;white-space:nowrap}
.ffl-tag{align-self:flex-start;margin-top:3px;font-size:8px;letter-spacing:.14em;color:#8a4b1e;border:1px solid #c89a6e;padding:2px 5px}
.review-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.review-actions button{padding:11px 14px;font-size:12px}
.scene-total{font:400 15px Georgia,serif;color:#3c3932;margin:4px 0 12px}

/* ---- Pinned footer ---- */
.aside-foot{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:12px 0 2px;margin-top:auto;z-index:3}
.total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.total-row span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8b806c}
.total-row em{font-style:normal;color:#a89d88;letter-spacing:0;text-transform:none;font-size:10px}
.total-row strong{font:400 22px Georgia,serif;color:#22221f}
.nav-row{display:flex;gap:8px}
.nav-row button{flex:1;padding:11px;font-size:12px}
.nav-row button:disabled{opacity:.35;cursor:default}
.nav-row .primary{flex:1.4}
/* Sticky children pin to the padding box, so the aside's top padding left a gap
   that scrolling rows showed through. The padding moves onto the step bar, and
   the fit report pins directly below it rather than fighting it for top:0. */
aside{padding-top:0}
.steps{top:0;margin-top:0}
.report{top:40px}
/* Legal findings read as a standing condition of the build, not a defect to
   fix, so they get their own colour rather than borrowing the blocking one. */
.verdict.legal{color:#f4ecdd;background:#4a4336;border-color:#4a4336}
.finding.legal{border-left-color:#7d6f52;background:#f8f4ea}
.finding.legal strong{color:#4a4336}
/* Jurisdiction selector sits with the verdicts, because compliance is
   re-evaluated on every change the same way fit is. */
.jurisdiction-row{display:flex;align-items:center;gap:8px;padding:0 0 12px}
.jurisdiction-row label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8b806c;white-space:nowrap}
.jurisdiction-row select{flex:1;min-width:0;border:1px solid var(--line);background:#fffdf8;color:#22221f;padding:6px 7px;font:inherit;font-size:11.5px;border-radius:0}
.jurisdiction-row select:focus-visible{outline:2px solid #71613d;outline-offset:1px}
.jurisdiction-row .verdict{white-space:nowrap;font-size:9px;padding:4px 7px}

/* Per-part imaging state, stated on the row that selects the part. */
.photo-tag{grid-column:1/-1;justify-self:end;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8a8070;border:1px solid var(--line);padding:2px 6px;white-space:nowrap}
.photo-tag.has-photo{color:#3f6b4b;border-color:#9bb3a1}

/* Maker and seller on a parts-list row. */
.parts-maker{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8a8070}
.parts-seller{display:block;font-size:9px;color:#9a9183;font-style:italic}

/* ============================================================================
   Tactical edition. Overrides the cream editorial theme above rather than
   replacing it, so reverting is deleting this block. Palette and type follow
   the reference configurator: near-black navy ground, amber accent, monospace
   body with a bold sans for headings.
   ========================================================================= */
:root{
  color-scheme:dark;
  --bg:#0a0e14; --panel:#0f1621; --raised:#141d2b; --line:#202c3e;
  --muted:#8294ad; --text:#e8eef6; --accent:#f5a524; --accent-ink:#10151e;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px}
p{color:var(--muted)}

/* Chrome */
header{border-bottom:1px solid var(--line);background:var(--bg)}
.brand{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text)}
.mark{font-family:var(--mono);color:var(--accent)}
.beta{color:var(--muted);border-color:var(--line);border-radius:3px}
nav button,nav a{color:var(--muted);font-family:var(--mono)}
nav .active{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:4px}
#count{background:var(--raised);color:var(--text);border-radius:3px}
footer{color:#5d6b80;border-top:1px solid var(--line)}

h1{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text);letter-spacing:-1.5px}
.eyebrow,.tiny-label{color:var(--accent);font-family:var(--mono)}
.status{color:var(--muted)}
.status i{background:var(--accent)}

/* Studio surfaces */
.workspace{border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.viewport{background:radial-gradient(ellipse at 48% 42%,#1b2636 0,#121a26 55%,#0a0e14 100%)}
.stage-label{color:var(--muted)}
.stage-label span:last-child{color:var(--accent)}
#load-status,.stage-bottom{color:#6b7a91}
.view-tools{background:#0f1621e6;border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px #0006}
.view-tools button{color:var(--text);border-radius:3px}
.view-tools button:hover,.view-tools button[aria-pressed=true]{background:var(--raised);color:var(--accent)}
aside{background:var(--panel);border-left:1px solid var(--line)}

/* Wizard tabs: the active step is an amber tab, as on the reference site. */
.steps{border-bottom:1px solid var(--line);background:var(--panel);gap:6px}
.steps button{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  border:1px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0;background:var(--raised);padding:9px 6px}
.steps .current button{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.steps .done button{color:var(--text)}
.step-lead{color:var(--muted)}

/* Controls */
button{border:1px solid var(--line);color:var(--text);border-radius:3px;font-family:var(--mono)}
button:hover{border-color:#36506f}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:3px;font-weight:700;letter-spacing:.06em}
.primary:hover{background:#ffb93d}
select,input[type=text],input[type=search]{background:var(--raised);color:var(--text);
  border:1px solid var(--line);border-radius:3px;font-family:var(--mono)}
.slot label,.jurisdiction-row label,h3,.total-row span{color:var(--muted)}
h3 span{color:var(--text)}
.slot select,.jurisdiction-row select{background:var(--raised);color:var(--text);border-color:var(--line)}
.slot option.incompatible{color:#ff8a6a}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Verdicts and findings */
.verdict{border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.verdict.ok{color:#5fd39b;border-color:#2b5a45}
.verdict.advisory{color:#f5c76a;border-color:#5a4a24}
.verdict.unknown,.verdict.incomplete{color:#8294ad;border-color:var(--line)}
.verdict.blocking{color:#ff9470;border-color:#5f3322}
.verdict.hazard{color:#fff1ec;background:#8c2f22;border-color:#8c2f22}
.verdict.legal{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.finding{background:var(--raised);border-radius:3px}
.finding strong{color:var(--text)}
.finding span{color:var(--muted)}
.finding em{color:#6b7a91}
.finding.ok{border-left-color:#2f7d5b}
.finding.advisory{border-left-color:#9a7a2a}
.finding.unknown,.finding.incomplete{border-left-color:#3d4c62}
.finding.blocking,.finding.dimensional{border-left-color:#c25a2f;background:#1d1510}
.finding.hazard{border-left-color:#c23a26;background:#20100d}
.finding.hazard strong{color:#ff9d86}
.finding.legal{border-left-color:var(--accent);background:#1a1710}
.finding.legal strong{color:var(--accent)}
.report{background:var(--panel);border-bottom:1px solid var(--line)}
#transfer-note,.hint{color:#6b7a91}

/* Platform cards */
.platform-card{background:var(--raised);border:1px solid var(--line);border-radius:4px}
.platform-card:hover{border-color:#36506f}
.platform-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.platform-card h4{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text);letter-spacing:0}
.platform-meta span{background:#0b1220;border:1px solid var(--line);border-radius:3px;padding:3px 6px;color:var(--muted)}
.platform-note{color:var(--muted)}
.platform-price{font-family:var(--mono);color:var(--accent);font-weight:700}
.platform-card.scratch{background:transparent;border-style:dashed}

/* Radar */
.radar-ring{stroke:#1e2a3c}
.radar-spoke{stroke:#1a2432}
.radar-fill{fill:#f5a52433;stroke:var(--accent);stroke-width:1.5}
.radar-label{fill:#6b7a91;font-family:var(--mono)}
.radar-value{fill:var(--text);font-family:var(--mono)}

/* Parts list */
.parts-row{border-bottom:1px solid var(--line)}
.parts-slot{color:#6b7a91}
.parts-maker{color:var(--accent)}
.parts-model{color:var(--text)}
.parts-seller{color:#6b7a91}
.parts-row strong{font-family:var(--mono);color:var(--text)}
.ffl-tag{background:#2a1d10;color:var(--accent);border:1px solid #4a3418}
.scene-total{font-family:var(--mono);color:var(--text)}
.photo-tag{color:#6b7a91;border-color:var(--line);border-radius:3px}
.photo-tag.has-photo{color:#5fd39b;border-color:#2b5a45}

/* Pinned footer */
.aside-foot{background:var(--panel);border-top:1px solid var(--line)}
.total-row em{color:#6b7a91}
.total-row strong{font-family:var(--mono);color:var(--accent);font-size:20px}

/* Dialog, toast, saved builds */
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px}
dialog h2{font-family:'Space Grotesk',system-ui,sans-serif}
#toast{background:var(--accent);color:var(--accent-ink);border-radius:3px}
.scene{background:var(--raised);border:1px solid var(--line);border-radius:4px}
.saved-heading span{color:var(--muted)}
.under{border-bottom:1px solid var(--line)}
.under h2{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--text)}
.edition,.edition strong{color:#6b7a91;border-left-color:var(--line)}
.swatch{outline-color:var(--line)}
.swatch.selected{outline-color:var(--accent)}
.lighting button{border-color:var(--line);color:var(--muted);border-radius:3px}
.lighting .selected{border-color:var(--accent);color:var(--accent)}

/* View-mode controls: segmented toggles over the viewport, as on the
   reference configurator. */
.view-modes{position:absolute;top:52px;left:27px;right:27px;display:flex;gap:8px;
  align-items:center;z-index:2;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#0f1621cc}
.seg button{border:0;border-radius:0;padding:7px 11px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:transparent}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
#slot-count{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
#slot-count b{color:var(--accent);font-weight:700}
@media(max-width:480px){
  .view-modes{top:46px;left:18px;right:18px;gap:6px}
  .seg button{padding:6px 8px;font-size:9px;letter-spacing:.06em}
  #slot-count{width:100%;margin-left:0}
}

/* Component picker: slot chips, search, and cards. Replaces seventeen
   dropdowns with one list at a time, which is what makes room for a card
   carrying the maker, the price and the specifications. */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--raised);
  border:1px solid var(--line);border-radius:3px;white-space:nowrap}
.chip:hover{color:var(--text);border-color:#36506f}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.chip i{font-style:normal;font-size:9px;color:#5fd39b}
.chip.on i{color:var(--accent-ink)}
.chip i.need{color:#5d6b80}
.chip.filled{border-color:#2b5a45}
.chip.on.filled{border-color:var(--accent)}

.picker-search{width:100%;padding:9px 10px;font-size:12px;margin-bottom:8px}
.picker-count{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#5d6b80;margin:0 0 8px}

.cards{display:flex;flex-direction:column;gap:7px}
.card{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
  text-align:left;padding:10px 11px;background:var(--raised);border:1px solid var(--line);border-radius:3px}
.card:hover{border-color:#36506f}
.card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.card.conflict{opacity:.72}
.card.conflict .card-model{text-decoration:line-through;text-decoration-color:#7a3a2a}
.card-maker{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card.conflict .card-maker{color:#9a7560}
.card-model{font-size:12px;line-height:1.4;color:var(--text)}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.card-tags i{font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--muted);
  background:#0b1220;border:1px solid var(--line);border-radius:2px;padding:2px 5px}
.card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}
.card-foot b{font-size:13px;color:var(--accent);font-weight:700}
.card-foot em{font-style:normal;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6b80}
.card-foot em.has-photo{color:#5fd39b}
.card-why{font-size:10px;line-height:1.45;color:#ff9470;margin-top:4px}
.card-seller{font-size:9px;color:#5d6b80;font-style:italic}
.card.none{align-items:flex-start;border-style:dashed}
.show-more{width:100%;margin-top:8px;padding:9px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.show-more:hover{color:var(--text)}

/* Each step is its own page. The platform step has no build to show, so the
   viewport steps aside and the chooser takes the full width. */
.workspace.no-viewport{grid-template-columns:minmax(0,1fr)}
.workspace.no-viewport .viewport{display:none}
.workspace.no-viewport aside{border-left:0;max-height:none;overflow:visible}
.workspace.no-viewport .platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.workspace.no-viewport .aside-foot{position:static}
@media(max-width:700px){
  .workspace.no-viewport .platform-grid{grid-template-columns:1fr}
}

/* Subcategory chips sit under the slot chips, one indent in. */
.chips.subs{margin:-4px 0 12px;padding-left:2px}
.chip.sub{font-size:9px;padding:4px 7px;background:transparent;color:#6b7a91}
.chip.sub:hover{color:var(--text)}
.chip.sub.on{background:transparent;color:var(--accent);border-color:var(--accent);font-weight:700}
.chip.sub i{color:#4a5a70;font-size:8.5px}
.chip.sub.on i{color:var(--accent)}

/* An empty stage says what it is waiting for. */
#empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;text-align:center;padding:0 32px;pointer-events:none}
#empty-state strong{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
#empty-state span{font-size:12px;line-height:1.6;color:#6b7a91;max-width:38ch}
/* An id selector beats the [hidden] UA rule, so hiding has to be restated. */
#empty-state[hidden]{display:none}

/* Policy pages. Same theme, no studio chrome — a reviewer should be able to
   read these without the 3D app loading at all. */
.legal{max-width:70ch;margin:0 auto;padding:44px 0 72px}
.legal h1{font-size:clamp(26px,3vw,36px);letter-spacing:-1px;margin:0 0 6px}
.legal .updated{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5d6b80;margin:0 0 30px}
.legal h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:16px;color:var(--text);
  margin:30px 0 9px;letter-spacing:-.2px}
.legal p,.legal li{font-size:13px;line-height:1.72;color:#9fb0c6;margin:0 0 11px}
.legal ul{margin:0 0 11px;padding-left:19px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .note{border-left:2px solid var(--accent);background:#141d2b;padding:12px 14px;margin:18px 0}
.legal .note p:last-child{margin-bottom:0}
.legal table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:12.5px}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{color:var(--muted);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.legal td{color:#9fb0c6}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{color:#7c8ca3}
.footer-links a:hover{color:var(--accent)}

/* Standing notes in the fit report fold away, so the component picker is not
   pushed below the fold by context nobody needs to act on. */
.finding-fold{border:1px solid var(--line);border-radius:3px;background:#101825;padding:0}
.finding-fold summary{cursor:pointer;padding:9px 11px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);list-style:none}
.finding-fold summary::-webkit-details-marker{display:none}
.finding-fold summary::before{content:'▸ ';color:var(--accent)}
.finding-fold[open] summary::before{content:'▾ '}
.finding-fold summary:hover{color:var(--text)}
.finding-fold .finding{margin:0 9px 9px;background:var(--raised)}