/* ==========================================================================
   CERES — configurator.css
   Page-specific layout for configurator.html. Loaded AFTER design-system.css.
   Component styling (option rows, packages, plate, progress, swatches,
   buttons, form fields) lives in design-system.css — this file only lays
   the configurator flow out on the page.
   ========================================================================== */

body { font-size:15px; }
.wrap { max-width:840px; margin:0 auto; padding:0 var(--gutter-m); }

/* header */
header.cfg-header { border-bottom:1px solid var(--border); padding:18px 0 14px; background:var(--black); position:sticky; top:0; z-index:40; }
.brandline { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cfg-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.cfg-logo img.mark { height:28px; width:auto; }
.cfg-logo img.wm { height:15px; width:auto; opacity:.95; }
.cfg-back { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-46); text-decoration:none; }
.cfg-back:hover { color:var(--ink); }
.cfg-progress-wrap { margin:16px 0 6px; }
.plabel { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-46); letter-spacing:.1em; text-transform:uppercase; margin-top:8px; display:block; }

main { padding:26px 0 132px; }
.step-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.step-h { font-family:var(--font-display); font-weight:400; letter-spacing:.5px; font-size:clamp(32px,6vw,52px); line-height:1; margin:0 0 10px; }
.step-h em { font-style:normal; color:var(--accent); }
.step-sub { color:var(--ink-46); font-size:14.5px; margin:0 0 24px; max-width:62ch; line-height:1.6; }

/* stage / visual */
.stage { position:relative; border:1px solid var(--border); border-radius:var(--r-control); overflow:hidden; margin-bottom:26px; background:radial-gradient(120% 90% at 50% 12%, #1c1f23 0%, #0e0f11 72%); }
.stage.photo { aspect-ratio:16/9; }
.stage.photo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.96) contrast(1.02); }
.stage .svgwrap svg { display:block; width:100%; height:auto; }
.stage-grad { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,7,7,.10) 0%,rgba(7,7,7,0) 34%,rgba(7,7,7,.62) 100%); }
.stage-tag { position:absolute; left:14px; bottom:11px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:.9; }
.hl-pulse { transform-box:fill-box; transform-origin:center; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:.8} }

/* model cards */
.modelgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
@media(max-width:600px){ .modelgrid{grid-template-columns:1fr} }
.mcard { position:relative; }
.mcard .mt { font-family:var(--font-display); font-size:30px; letter-spacing:.5px; }
.mcard .mfrom { font-family:var(--font-mono); font-size:15px; margin-top:8px; color:var(--accent); }
.mcard .mnett { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-46); letter-spacing:.06em; text-transform:uppercase; }
.mcard ul { list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--border); }
.mcard li { font-size:12.5px; color:var(--ink-46); padding:3px 0 3px 16px; position:relative; }
.mcard li::before { content:"–"; position:absolute; left:0; color:var(--ink-28); }

details.std { margin-top:16px; border:1px solid var(--border); border-radius:var(--r-control); background:var(--card); }
details.std summary { cursor:pointer; padding:13px 14px; font-size:12.5px; color:var(--ink-46); list-style:none; display:flex; justify-content:space-between; align-items:center; letter-spacing:.02em; }
details.std summary::-webkit-details-marker { display:none; }
details.std summary::after { content:"+"; font-family:var(--font-mono); color:var(--ink-46); }
details.std[open] summary::after { content:"–"; }
details.std .body { padding:2px 14px 14px; font-size:12.5px; color:var(--ink-46); line-height:1.75; }
details.std .std-list { margin:0; padding:2px 14px 16px 34px; font-size:12.5px; color:var(--ink-46); line-height:1.9; }
details.std .std-list li { padding-left:4px; }
details.std .std-list li::marker { color:var(--accent); }
.swap { margin-top:12px; }

/* fork */
.forkgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px){ .forkgrid{grid-template-columns:1fr} }
.fork { cursor:pointer; border:1px solid var(--border-2); border-radius:var(--r-control); background:var(--card); padding:26px 22px; transition:border-color .15s var(--ease), transform .15s var(--ease); }
.fork:hover { border-color:var(--accent); transform:translateY(-1px); }
.fork .ico { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-46); letter-spacing:.2em; }
.fork h3 { font-family:var(--font-display); font-weight:400; font-size:26px; margin:12px 0 6px; letter-spacing:.3px; }
.fork p { color:var(--ink-46); font-size:13px; margin:0; }

/* summary specifics */
.mass { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:14px 4px 4px; background:var(--plate-line); border:1px solid var(--plate-line); border-radius:4px; overflow:hidden; }
.mass .cell { background:var(--plate-2); padding:10px 8px; text-align:center; }
.mass .cell .cl { font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:#55524b; }
.mass .cell .cv { font-family:var(--font-mono); font-weight:600; font-size:17px; margin-top:2px; }
.mass .cell .cu { font-family:var(--font-mono); font-size:9.5px; color:#6b675e; }

.sumlist { border:1px solid var(--border); border-radius:var(--r-control); background:var(--card); padding:6px 14px; margin-bottom:16px; }
.sumrow { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.sumrow:last-child { border-bottom:none; }
.sumrow .n .c { font-family:var(--font-mono); font-size:10px; color:var(--ink-46); margin-right:7px; }
.sumrow .p { font-family:var(--font-mono); color:var(--ink-46); white-space:nowrap; }
.sumrow.base .n { color:var(--ink-46); }
.price-note {
  border:1px solid var(--border-2); border-left:2px solid var(--accent); border-radius:var(--r-control);
  background:var(--card-2); padding:15px 17px; margin:16px 0; font-size:13px; color:var(--ink-70); line-height:1.6;
}

.nudge { display:none; margin:14px 0; padding:15px 17px; border-radius:var(--r-control); background:var(--card-2); border:1px solid var(--border-2); font-size:13px; color:var(--ink-70); }
.nudge.on { display:block; }
.nudge b { color:var(--accent); }
.nudge button { margin-top:10px; }

.quote { border:1px solid var(--border); border-radius:var(--r-control); background:var(--card); padding:24px 22px; margin-top:10px; }
.quote h3 { font-family:var(--font-display); font-weight:400; font-size:26px; margin:0 0 4px; letter-spacing:.3px; }
.quote p { color:var(--ink-46); font-size:13px; margin:0 0 18px; }
.qgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px){ .qgrid{grid-template-columns:1fr} }
.privacy { font-size:11px; color:var(--ink-46); margin-top:12px; text-align:center; }

/* sticky bottom nav */
.cfg-nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.navtot { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-46); }
.navtot b { color:var(--accent); font-size:16px; }
.nbtns { display:flex; gap:10px; }