/* ════════════════════════════════════════════════════════════════
   AMPACITIES · GLASS SKIN  ·  shared calculator look (extracted)
   ════════════════════════════════════════════════════════════════
   The "iOS 26 Liquid Glass" skin established on the calculators
   (voltage-drop / cable-sizing / motor-starting / earthing-grid /
   maximum-demand), lifted out of their inline <style> blocks into one
   shared sheet so the PLATFORM and AUTH surfaces wear the exact same
   skin. Load it as an OVERRIDE layer ON TOP of calc-grouped.css:

     <link rel="stylesheet" href="/shared/_shared.css">          ← chrome tokens
     <link rel="stylesheet" href="/shared/site-chrome.css?v=…">  ← chrome
     <link rel="stylesheet" href="/shared/calc-grouped.css?v=…">  ← base .vd system
     <link rel="stylesheet" href="/shared/glass-skin.css?v=…">    ← THIS (the skin)
     <link rel="stylesheet" href="/shared/platform.css?v=…">      ← components

   Light/dark FOLLOWS the chrome's Day/Night toggle via
   data-theme="night|day" — one unified control. Default day.
     · NIGHT → aurora scene + frosted translucent glass, brightened clay.
     · DAY   → flat, opaque "grouped-cards" palette (landing matte language):
               canvas #faf9f5 · body #1a1a1e · display #fff · clay #d97757

   Everything is scoped under .vd-stage / .vd / .vd-suite, so it cannot
   leak into the chrome, the editorial homepage, or anywhere else.
   ════════════════════════════════════════════════════════════════ */

/* ---- 1 · kit constants (theme-independent), scoped to the stage ---- */
.vd-stage{
  --r-sm:9px; --r-md:13px; --r-lg:17px; --r-xl:22px; --r-2xl:28px; --r-pill:999px;
  --blur-sm:10px; --blur-md:24px; --blur-lg:50px;
  --ease-glass:cubic-bezier(.32,.72,0,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ff-sf:-apple-system,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --ff-sf-display:-apple-system,"SF Pro Display",system-ui,sans-serif;
  --ff-glassmono:"SF Mono",ui-monospace,"IBM Plex Mono",Menlo,Consolas,monospace;
}

/* ---- 2 · DARK GLASS (default) — material + .vd contract re-theme ---- */
[data-theme="night"] .vd-stage{
  --bg-base:#070609;
  --glass-subtle:rgba(255,255,255,.06);
  --glass-medium:rgba(255,255,255,.10);
  --glass-strong:rgba(255,255,255,.17);
  --glass-solid:rgba(22,20,28,.76);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-top:rgba(255,255,255,.34);
  --glass-border-strong:rgba(255,255,255,.30);
  --slab:rgba(15,13,19,.38);
  --card-top:rgba(255,255,255,.12);
  --card-bot:rgba(255,255,255,.045);
  --ctrl-bg:rgba(255,255,255,.07);
  --ctrl-bg-focus:rgba(255,255,255,.13);
  --specular:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.10) 24%,rgba(255,255,255,0) 48%);
  --shadow-glass:0 1px 1px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-card:0 2px 6px rgba(0,0,0,.3),0 14px 30px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13);
  --shadow-float:0 4px 10px rgba(0,0,0,.34),0 30px 64px -16px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.14);
  --hero-glow:0 0 38px rgba(224,138,102,.40);
  --focus-ring:0 0 0 3px rgba(224,138,102,.40);
}
[data-theme="night"] .vd{
  --display:rgba(255,255,255,.06);
  --ink:rgba(255,255,255,.97);
  --ink-dim:rgba(238,238,244,.70);
  --ink-fade:rgba(238,238,244,.58);
  --input:rgba(255,255,255,.07);
  --ctrl:rgba(255,255,255,.08);
  --copper:var(--amp-copper-night,#e08a66);   /* brightened clay for the dark scene (brand token, _shared.css) */
  --copper-deep:#d97757;
  --pass:var(--amp-pass-night,#93a877); --fail:var(--amp-fail-night,#ff5b50);
  --hairline:rgba(255,255,255,.11); --soft:rgba(255,255,255,.07);
  --on-dark:rgba(255,255,255,.92); --on-dark-dim:rgba(255,255,255,.54); --on-dark-line:rgba(255,255,255,.13);
}

/* ---- 3 · (removed, Phase 1b / D7) ----
   The "LIGHT GLASS" day token set that lived here (#e9edf5 bg, #d4571f copper, …)
   was DEAD CODE: the later "DAY MODE → solid grouped-cards" block re-declares every
   one of its custom properties at the same specificity, so none of these values ever
   rendered. Deleted so exactly one [data-theme="day"] token set exists (plan D7).
   Day is ivory #faf9f5 with clay #d97757 (landing language, migrated 2026-07-03). */

/* ---- 4 · aurora stage (the scene the glass refracts) ---- */
.vd-stage{
  position:relative; isolation:isolate;
  background:var(--bg-base) !important;
  padding:var(--stage-pad, 54px 28px 110px) !important; /* Phase 1b: tokenized (plan §2.2) — calc pages set --stage-pad via .suite-wide; platform keeps the 54px fallback until Phase 3 */
  transition:background .45s var(--ease-glass);
}
[data-theme="night"] .vd-stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 52% at 13% 2%, rgba(255,134,74,.20), transparent 58%),
    radial-gradient(52% 50% at 92% 6%, rgba(98,118,238,.15), transparent 60%),
    radial-gradient(66% 46% at 52% 108%, rgba(38,178,188,.11), transparent 66%),
    radial-gradient(125% 95% at 50% -8%, transparent 52%, rgba(0,0,0,.5));
  filter:saturate(116%);
}
[data-theme="day"] .vd-stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 52% at 13% 2%, rgba(255,184,142,.55), transparent 58%),
    radial-gradient(52% 50% at 92% 6%, rgba(182,192,250,.5), transparent 60%),
    radial-gradient(66% 46% at 52% 110%, rgba(150,222,226,.42), transparent 66%);
  filter:saturate(112%);
}
.vd-stage::after{   /* fine grain so the flats don't band */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px);
  background-size:3px 3px; mix-blend-mode:overlay;
}
[data-theme="night"] .vd-stage::after{ opacity:.05; }
.vd-stage > *{ position:relative; z-index:1; }

/* ---- 5 · GLASS MATERIAL ENGINE — slab + crisply layered cards ---- */
.vd-stage .vd{
  background:var(--slab) !important;
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(190%); backdrop-filter:blur(var(--blur-lg)) saturate(190%);
  border:1px solid var(--glass-border) !important;
  border-top-color:var(--glass-border-top) !important;
  border-radius:var(--r-2xl) !important;
  box-shadow:var(--shadow-float) !important;
  position:relative; font-family:var(--ff-sf) !important;
}
.vd-stage .vd::before,
.vd-stage .vd .vd-card::before,
.vd-stage .vd .vd-hero::before{   /* lit 1px rim, brightest top-left */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--specular);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  pointer-events:none;
}
/* inner panels: gradient fill (lit top) + lit rim + drop shadow → they FLOAT on the slab */
.vd-stage .vd .vd-card,
.vd-stage .vd .vd-hero{
  position:relative;
  background:linear-gradient(177deg, var(--card-top), var(--card-bot)) !important;
  /* Phase 1b (D9, owner-ratified): nested card blur removed — blur(24px) sampling a slab
     already blurred 50px was invisible depth at real GPU cost (~2.1× the sampled area at
     1920px). The card look is carried by the gradient + rim + shadow, which stay. Same
     rationale as the form-control perf rule below. */
  border:1px solid var(--glass-border) !important;
  border-top-color:var(--glass-border-top) !important;
  border-radius:var(--r-xl) !important;
  box-shadow:var(--shadow-card) !important;
  transition:border-color .25s var(--ease-glass), box-shadow .25s var(--ease-glass);
}
.vd-stage .vd .cs-cols .vd-card:hover{ border-color:var(--glass-border-strong) !important; box-shadow:var(--shadow-float) !important; }
/* graceful fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  [data-theme="night"] .vd-stage .vd{ background:rgba(22,20,28,.95) !important; }
  [data-theme="night"] .vd-stage .vd .vd-card,[data-theme="night"] .vd-stage .vd .vd-hero{ background:rgba(40,38,50,.94) !important; }
  [data-theme="day"] .vd-stage .vd{ background:rgba(255,255,255,.96) !important; }
  [data-theme="day"] .vd-stage .vd .vd-card,[data-theme="day"] .vd-stage .vd .vd-hero{ background:rgba(255,255,255,.97) !important; }
}

/* ---- 6 · typography → SF Pro, tabular figures kept ---- */
.vd-stage .vd, .vd-stage .vd input, .vd-stage .vd select, .vd-stage .vd button{ font-family:var(--ff-sf) !important; }
.vd-stage .vd .vd-head .t{ color:var(--ink) !important; font-family:var(--ff-sf-display) !important; font-weight:600; letter-spacing:-.015em; }
.vd-stage .vd .vd-head .tag{ color:var(--ink-fade) !important; letter-spacing:.1em; }
.vd-stage .vd .vd-card .ct{ color:var(--ink-dim) !important; letter-spacing:.085em; }
.vd-stage .vd .vd-fld .fld-label{ color:var(--ink-dim) !important; }

/* ---- 6b · the hero: a commanding copper figure glowing through glass ---- */
/* Phase 1b (plan §2.2): density values below are TOKENS with the pre-1b value as the
   fallback — the !important stays (cascade order is deliberate) but the value is set
   centrally. Pages opt in via .suite-wide (sets the D3 ratified values, calc-grouped.css);
   pages without it render exactly as before. */
.vd-stage .vd-compact .vd-hero{ padding:var(--hero-pad, 24px 26px) !important; gap:var(--hero-gap, 26px) !important; align-items:center; }
.vd-stage .vd .vd-hero-main{ padding-right:26px !important; border-right:1px solid var(--hairline) !important; }
.vd-stage .vd .vd-lbl{ color:var(--ink-fade) !important; letter-spacing:.14em; }
.vd-stage .vd .vd-figure{ margin:var(--fig-mar, 13px 0 4px) !important; }
.vd-stage .vd-compact .vd-figure .big .v{ font-family:var(--ff-sf-display) !important; font-size:var(--hero-size, 62px) !important; font-weight:700; letter-spacing:-.035em; color:var(--copper) !important; text-shadow:var(--hero-glow); }
.vd-stage .vd-compact .vd-figure .big .u{ font-size:var(--hero-unit, 23px) !important; font-weight:600; color:var(--ink-fade) !important; }
.vd-stage .vd .vd-figure .sub{ color:var(--ink-dim) !important; font-weight:500; font-size:14px; }
.vd-stage .vd .cs-gov{ color:var(--copper) !important; letter-spacing:.05em; }
.vd-stage .vd .vd-mini{ gap:var(--mini-gap, 18px 30px) !important; }
.vd-stage .vd .vd-mini .m .k{ color:var(--ink-fade) !important; letter-spacing:.07em; }
.vd-stage .vd .vd-mini .m .v{ color:var(--ink) !important; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.vd-stage .vd .vd-mini .m .v.hot{ color:var(--copper) !important; }

/* ---- 6c · instrument-grade rhythm: loosen the compact density for glass ---- */
.vd-stage .vd-compact .vd-card{ padding:var(--pad, 16px) !important; }
.vd-stage .vd-compact .cs-cols .vd-card .ct{ margin-bottom:var(--ct-mar, 13px) !important; }
.vd-stage .vd-compact .cs-cols .cs-grid{ gap:var(--fld-gap, 13px 16px) !important; }
.vd-stage .vd-compact .vd-fld .fl{ margin-bottom:var(--fl-mar, 6px) !important; }
.vd-stage .vd-compact .vd-fld .fld-label{ font-size:10.5px !important; letter-spacing:.05em !important; }
.vd-stage .vd-compact select.dd{ height:var(--ctl-h, 42px) !important; font-size:13.5px !important; }
.vd-stage .vd-compact .field{ height:var(--ctl-h, 42px) !important; }
.vd-stage .vd-compact .field input{ font-size:14px !important; }
.vd-stage .vd-compact .seg-radio label{ padding:8px 10px !important; font-size:12px !important; }

/* ---- 6d · one orchestrated entrance (reduced-motion safe) ---- */
@media (prefers-reduced-motion:no-preference){
  .vd-suite > .vd-disclaimer{ opacity:0; animation:lgRise .6s var(--ease-glass) .04s both; }
  /* the entrance is opacity-only (see lgRise below) — that's the perf fix;
     will-change is just a cheap compositor hint on the already-layered slabs */
  .vd-suite > section.vd{ opacity:0; animation:lgRise .6s var(--ease-glass) both; will-change:opacity; }
  .vd-suite > section.vd:nth-of-type(1){ animation-delay:.10s; }
  .vd-suite > section.vd:nth-of-type(2){ animation-delay:.17s; }
  .vd-suite > section.vd:nth-of-type(3){ animation-delay:.24s; }
  .vd-suite > section.vd:nth-of-type(4){ animation-delay:.31s; }
}
@keyframes lgRise{ from{ opacity:0; } to{ opacity:1; } } /* Phase 4 (§4.5 perf gate): was opacity+translateY(12px) —
   translating the blur(50px) slabs re-filtered every frame (worst 84ms at 4× CPU throttle, 1920 night; opacity-only
   measures 76ms worst and passes clean at 1×). The staggered fade keeps the entrance choreography. */

/* ---- 7 · controls: inputs, selects, fields, project fields ---- */
.vd-stage .vd select.dd,
.vd-stage .vd .field,
.vd-stage .vd .pj-fld input{
  color:var(--ink) !important;
  border:1px solid var(--glass-border) !important;
  border-top-color:var(--glass-border-top) !important;
  border-radius:var(--r-md) !important;
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(150%); backdrop-filter:blur(var(--blur-sm)) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition:border-color .2s var(--ease-glass), box-shadow .2s, background .2s;
}
.vd-stage .vd select.dd{ background-color:var(--ctrl-bg) !important; }
.vd-stage .vd .field{ background:var(--ctrl-bg) !important; }
.vd-stage .vd select.dd:hover,
.vd-stage .vd .field:hover{ border-color:var(--glass-border-strong) !important; }
.vd-stage .vd .pj-fld input{ border:none !important; border-bottom:1px solid var(--hairline) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.vd-stage .vd .pj-fld input:focus{ border-bottom-color:var(--copper) !important; }
.vd-stage .vd .field input{ color:var(--ink) !important; }
.vd-stage .vd .field .unit{ color:var(--ink-fade) !important; }
.vd-stage .vd .field:focus-within,
.vd-stage .vd select.dd:focus{ border-color:var(--copper) !important; box-shadow:var(--focus-ring) !important; background-color:var(--ctrl-bg-focus) !important; background:var(--ctrl-bg-focus) !important; }
.vd-stage .vd .field:focus-within{ background:var(--ctrl-bg-focus) !important; }
/* recolour the native select chevron + option list for the dark scene */
[data-theme="night"] .vd select.dd{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23eceaf2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important;
}
.vd-stage .vd select.dd option{ color:#181a1f; background:#fff; }
.vd-stage .vd select.dd:disabled,.vd-stage .vd .field input:disabled{ opacity:.4; }

/* ---- 8 · segmented (Cu/Al, Auto/Manual) + steppers ---- */
.vd-stage .vd .seg, .vd-stage .vd .seg-radio, .vd-stage .vd .stepper{
  background:var(--ctrl-bg) !important;
  border:1px solid var(--glass-border) !important; border-top-color:var(--glass-border-top) !important; border-radius:var(--r-md) !important;
  -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm));
}
.vd-stage .vd .seg-radio label, .vd-stage .vd .seg-btn{ color:var(--ink-dim) !important; transition:all .22s var(--ease-glass); border:1px solid transparent; }   /* idle border reserves the active pill's 1px — no shift on toggle (folded from cable-sizing, Phase 1b) */
.vd-stage .vd .seg-radio label:hover, .vd-stage .vd .seg-btn:hover{ color:var(--ink) !important; }
.vd-stage .vd .seg-radio label.active, .vd-stage .vd .seg-btn.active{
  background:var(--glass-strong) !important; color:var(--ink) !important;
  border:1px solid var(--glass-border-strong) !important; border-radius:9px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.vd-stage .vd .step-btn{ color:var(--copper) !important; }
.vd-stage .vd .step-btn:hover{ background:var(--soft) !important; }

/* ---- 9 · doc-status pill in card heads ---- */
.vd-stage .vd .vd-status{ background:var(--glass-subtle) !important; border:1px solid var(--glass-border) !important; -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm)); }
.vd-stage .vd .vd-status select{ color:var(--ink) !important; }
[data-theme="night"] .vd .vd-status select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23eceaf2' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat; background-position:right 0 center; }
.vd-stage .vd .vd-status select option{ color:#181a1f; }

/* unit selector inside a .field (e.g. cable-sizing's A/kW/kVA/hp) — folded from
   cable-sizing's inline copy in Phase 1b; inert on pages without .unit-sel markup */
.vd-stage .vd .field select.unit-sel{ -webkit-appearance:none; appearance:none; border:none; background:transparent; outline:none; cursor:pointer; flex:none; font:inherit; font-size:12px; font-weight:700; color:var(--ink-fade) !important; padding:0 14px 0 6px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23998' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; }
.vd-stage .vd .field select.unit-sel:hover, .vd-stage .vd .field select.unit-sel:focus-visible{ color:var(--copper) !important; }

/* ---- 10 · status pills / badges (PASS·FAIL) ---- */
.vd-stage .vd .vd-badge{ -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm)); border:1px solid var(--glass-border); }
.vd-stage .vd .vd-badge.pass{ color:var(--pass) !important; background:color-mix(in srgb,var(--pass) 18%,transparent) !important; border-color:color-mix(in srgb,var(--pass) 34%,transparent) !important; }
.vd-stage .vd .vd-badge.fail{ color:var(--fail) !important; background:color-mix(in srgb,var(--fail) 18%,transparent) !important; border-color:color-mix(in srgb,var(--fail) 34%,transparent) !important; }

/* ---- 11 · disclaimer = copper glass capsule ---- */
.vd-stage .vd-suite .vd-disclaimer{
  background:color-mix(in srgb,var(--copper) 14%, var(--glass-subtle)) !important;
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(150%); backdrop-filter:blur(var(--blur-md)) saturate(150%);
  border:1px solid color-mix(in srgb,var(--copper) 30%, transparent) !important;
  border-left:3px solid var(--copper) !important; border-radius:var(--r-lg) !important;
}
.vd-stage .vd-suite .vd-disclaimer .dl-tag{ background:var(--copper) !important; color:#190f06 !important; }
.vd-stage .vd-suite .vd-disclaimer .dl-txt{ color:var(--ink-dim) !important; }
.vd-stage .vd-suite .vd-disclaimer strong{ color:var(--copper) !important; }

/* ---- 12 · tables (Comparison + Revision) ---- */
.vd-stage .vd table.vd-tbl th{ color:var(--ink-dim) !important; border-bottom-color:var(--glass-border) !important; }
.vd-stage .vd table.vd-tbl td{ border-bottom-color:var(--hairline) !important; }
.vd-stage .vd table.vd-tbl tbody tr.sel{ background:color-mix(in srgb,var(--copper) 16%,transparent) !important; }

/* ---- 13 · document apparatus: title-block, exports, add-buttons ---- */
.vd-stage .vd .vd-tb{ background:var(--glass-border) !important; border-color:var(--glass-border) !important; }
.vd-stage .vd .tb-cell{ background:var(--glass-subtle) !important; }
.vd-stage .vd .tb-cell.brand{ background:color-mix(in srgb,var(--copper) 16%, rgba(0,0,0,.34)) !important; }
.vd-stage .vd .tb-cell input{ color:var(--ink) !important; }
.vd-stage .vd .add-btn{ background:var(--glass-subtle) !important; border:1px dashed var(--glass-border) !important; border-radius:var(--r-md) !important; color:var(--ink-dim) !important; -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm)); }
.vd-stage .vd .add-btn:hover{ border-color:var(--copper) !important; color:var(--copper) !important; }
.vd-stage .vd .vd-exports{ background:var(--glass-subtle) !important; border:1px solid var(--glass-border) !important; border-radius:var(--r-lg) !important; -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm)); }
.vd-stage .vd .vd-exports a{ background:var(--glass-medium) !important; border:1px solid var(--glass-border) !important; border-radius:var(--r-md) !important; color:var(--ink) !important; -webkit-backdrop-filter:blur(var(--blur-sm)); backdrop-filter:blur(var(--blur-sm)); }
.vd-stage .vd .vd-exports a:hover{ border-color:var(--copper) !important; color:var(--copper) !important; }
.vd-stage .vd .vd-exports a[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.vd-stage .vd .vd-exports a[aria-disabled="true"]:hover{ border-color:var(--glass-border) !important; color:var(--ink) !important; }
.vd-stage .vd .vd-adv-toggle{ background:var(--glass-subtle) !important; border:1px solid var(--glass-border) !important; border-radius:var(--r-md) !important; }
.vd-stage .vd .vd-adv-toggle:hover{ background:var(--glass-medium) !important; }

/* perf: the form controls sit inside already-frosted cards, so their OWN
   backdrop-blur just multiplies GPU cost for no visible gain — drop it. The slab,
   cards, hero, status pill, badges, disclaimer and export bar keep the glass material. */
.vd-stage .vd select.dd, .vd-stage .vd .field, .vd-stage .vd .pj-fld input,
.vd-stage .vd .seg, .vd-stage .vd .seg-radio, .vd-stage .vd .stepper{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

/* ════════════════════════════════════════════════════════════════
   DAY MODE → solid "grouped-cards" palette (Construction Kit)
   Night keeps Liquid Glass. Day goes FLAT/opaque in the locked palette
   — colours + material only; geometry, motion and SF Pro type unchanged.
     canvas #faf9f5 · body #1a1a1e · display #fff · ink #181a1f
     number keys #f0eee6 · function keys #e8e6dc · clay #d97757
   ════════════════════════════════════════════════════════════════ */
[data-theme="day"] .vd-stage{
  --bg-base:#faf9f5;
  /* opaque-ify the kit's material tokens so every token-driven surface reads solid */
  --slab:#1a1a1e;
  --card-top:#ffffff; --card-bot:#ffffff;
  --glass-subtle:#ffffff; --glass-medium:#f0eee6; --glass-strong:#e8e6dc; --glass-solid:#ffffff;
  --glass-border:rgba(24,26,31,0.10); --glass-border-top:rgba(24,26,31,0.10); --glass-border-strong:rgba(24,26,31,0.20);
  --ctrl-bg:#f0eee6; --ctrl-bg-focus:#ffffff;
  --specular:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
  --shadow-glass:0 1px 2px rgba(20,16,10,0.10);
  --shadow-card:0 6px 22px -10px rgba(20,16,10,0.28);
  --shadow-float:0 30px 70px -30px rgba(20,16,10,0.50);
  --hero-glow:0 0 0 rgba(0,0,0,0);
  --focus-ring:0 0 0 3px rgba(217,119,87,0.34);
}
[data-theme="day"] .vd{
  --display:#ffffff; --ink:#181a1f;
  --ink-dim:rgba(24,26,31,0.55); --ink-fade:rgba(24,26,31,0.40);
  --input:#f0eee6; --ctrl:#e8e6dc;
  --copper:var(--amp-copper,#d97757); --copper-deep:#b0512f; --pass:var(--amp-pass,#5b7046); --fail:var(--amp-fail,#d23b2e);
  --hairline:rgba(24,26,31,0.12); --soft:rgba(24,26,31,0.08);
  --on-dark:rgba(255,255,255,0.92); --on-dark-dim:rgba(255,255,255,0.50); --on-dark-line:rgba(255,255,255,0.12);
}
/* flatten: drop the aurora scene, grain, specular rims and all blur in day */
[data-theme="day"] .vd-stage::before,
[data-theme="day"] .vd-stage::after,
[data-theme="day"] .vd-stage .vd::before,
[data-theme="day"] .vd-stage .vd .vd-card::before,
[data-theme="day"] .vd-stage .vd .vd-hero::before{ display:none !important; }
[data-theme="day"] .vd-stage *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* function keys (segmented / steppers) → #e8e6dc, with a dark active pill (kit look) */
[data-theme="day"] .vd-stage .vd .seg,
[data-theme="day"] .vd-stage .vd .seg-radio,
[data-theme="day"] .vd-stage .vd .stepper{ background:#e8e6dc !important; border-color:rgba(24,26,31,0.10) !important; }
[data-theme="day"] .vd-stage .vd .seg-radio label.active,
[data-theme="day"] .vd-stage .vd .seg-btn.active{ background:#1a1a1e !important; color:#fff !important; border-color:transparent !important; }

/* head + export bar sit on the dark #1a1a1e body → keep their chrome light-on-dark */
[data-theme="day"] .vd-stage .vd .vd-head .t{ color:#fff !important; }
[data-theme="day"] .vd-stage .vd .vd-head .tag{ color:rgba(255,255,255,0.5) !important; }
[data-theme="day"] .vd-stage .vd .vd-status{ background:rgba(255,255,255,0.08) !important; border-color:rgba(255,255,255,0.14) !important; }
[data-theme="day"] .vd-stage .vd .vd-status select{ color:#fff !important; }
[data-theme="day"] .vd-stage .vd .vd-exports{ background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.12) !important; }
[data-theme="day"] .vd-stage .vd .vd-exports a{ background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.12) !important; color:rgba(255,255,255,0.92) !important; }
[data-theme="day"] .vd-stage .vd .vd-exports a:hover{ border-color:var(--copper) !important; color:var(--copper) !important; }
[data-theme="day"] .vd-stage .vd .vd-exports .meta,
[data-theme="day"] .vd-stage .vd .vd-exports .xlabel{ color:rgba(255,255,255,0.5) !important; }
/* the Advanced disclosure toggle sits on the dark #1a1a1e body, so keep it
   light-on-dark in day instead of the white glass-subtle fill that would hide its text. */
[data-theme="day"] .vd-stage .vd .vd-adv-toggle{ background:rgba(255,255,255,0.05) !important; border-color:rgba(255,255,255,0.12) !important; color:rgba(255,255,255,0.92) !important; }
[data-theme="day"] .vd-stage .vd .vd-adv-toggle:hover{ background:rgba(255,255,255,0.09) !important; }
[data-theme="day"] .vd-stage .vd .vd-adv-toggle .hint{ color:rgba(255,255,255,0.5) !important; }
/* title-block brand cell legibility in day (folded from cable-sizing, Phase 1b) */
[data-theme="day"] .vd-stage .vd .tb-cell.brand{ background:#1a1a1e !important; }

/* ---- accessibility: honour OS "reduce transparency" at night (Phase 1b / D9) ----
   values copied verbatim from the @supports-not fallback above, so the look is proven */
@media (prefers-reduced-transparency:reduce){
  [data-theme="night"] .vd-stage *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  [data-theme="night"] .vd-stage .vd{ background:rgba(22,20,28,.95) !important; }
  [data-theme="night"] .vd-stage .vd .vd-card,
  [data-theme="night"] .vd-stage .vd .vd-hero{ background:rgba(40,38,50,.94) !important; }
}