/* ═══════════════════════════════════════════════════════════════════════════════
   WrapsDesigner design system.

   Loaded AFTER style.css so it wins. style.css stays because the app pages
   (auth, dashboard, subscribe, vehicles, admin) depend on its layout classes;
   everything visual is restated here so those pages come across too.

   The page is a CLIENT PROOF SHEET: the artefact a shop sends a customer to get
   a wrap signed off.

   ⛔ Two things stay out of the copy, because the product does not deliver them
      cleanly and we will not claim otherwise:
        1. figures. No dimensions, millimetres, bleed or overlap numbers.
        2. panel-level detail. No door shuts, seams, swage lines, wheel arches.
      The 3D shows the real BODY SHAPE and how a design reads from any angle.

   NOT covered by this file: the browser editor at /demo-pr. That is a separate
   React bundle with its own styling and must not be touched from here.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── faces. Archivo carries a real wdth axis (62-125%), so the wide display cut
      and the normal body cut come out of one variable file. ─────────────────── */
@font-face{font-family:Archivo; src:url("/static/fonts/archivo-var-latin.woff2") format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo; src:url("/static/fonts/archivo-var-latin-ext.woff2") format('woff2');
  font-weight:400 800; font-stretch:62% 125%; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Mono'; src:url("/static/fonts/plexmono-400-latin.woff2") format('woff2'); font-weight:400; font-display:swap}
@font-face{font-family:'Plex Mono'; src:url("/static/fonts/plexmono-500-latin.woff2") format('woff2'); font-weight:500; font-display:swap}

:root{
  /* style.css's own variables, repointed. Dozens of app rules reference these by name
     (.auth-header h1, .auth-footer a, .stat-value ...), so redefining them here brings
     those pages across without hunting the individual selectors. */
  --primary-color:#9FC3E0; --primary-dark:#C5DCEE; --secondary-color:#9FC3E0;
  --danger-color:#E09090; --warning-color:#E0B87A; --success-color:#8FCBA6;
  --info-color:#9FC3E0; --dark-color:#0F1418; --light-color:#161C22;
  --border-color:#263039; --text-color:#E6ECF2; --text-light:#7D8B98;

  --ink:#0F1418; --panel:#161C22; --rule:#263039; --rule2:#33404B;
  --paper:#E6ECF2; --muted:#7D8B98; --anno:#9FC3E0;
  --ok:#8FCBA6; --warn:#E0B87A; --bad:#E09090;
  /* The light theme declares color-scheme:light (line ~358); the dark default declared
     nothing, so the browser drew NATIVE widgets -- the open <select> list, scrollbars,
     date pickers -- in light colours on a dark page. */
  color-scheme:dark;
  /* long-form reading colour: 11.2:1 on --ink, so AAA, but softer than --paper so headings
     still lead. --muted is 5.31:1, which scrapes AA and is not good enough for 1,600 words. */
  --read:#BFCBD6;
  --warn-line:rgba(224,184,122,.32);
  /* input borders must clear 3:1 for WCAG 1.4.11 non-text contrast. --rule2 is 1.74:1. */
  --field:#5E6E7E;
  --pad:56px; --lead:1240px;
}

/* ── base ───────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{background:var(--ink); color:var(--paper); margin:0;
     font-family:Archivo,system-ui,-apple-system,sans-serif; font-variation-settings:'wdth' 100;
     font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
main{background:var(--ink); min-height:50vh}
img{max-width:100%}
a{color:var(--anno); text-decoration:none}
a:hover{color:var(--paper)}
:focus-visible{outline:2px solid var(--anno); outline-offset:3px}
hr{border:0; border-top:1px solid var(--rule); margin:32px 0}

h1,h2,h3,h4{font-variation-settings:'wdth' 108; letter-spacing:-.02em; line-height:1.14;
            color:var(--paper); font-weight:700}
h1{font-size:clamp(28px,3.6vw,44px)}
h2{font-size:clamp(23px,2.8vw,34px)}
h3{font-size:19px; font-weight:600; font-variation-settings:'wdth' 106}
h4{font-size:16.5px; font-weight:600; font-variation-settings:'wdth' 104}

/* the utility face: every label, control, caption and piece of metadata */
.m{font-family:'Plex Mono',ui-monospace,SFMono-Regular,monospace; font-size:11px;
   letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.m b{color:var(--paper); font-weight:500}

/* ═══ SHARED CHROME ════════════════════════════════════════════════════════ */
/* the navbar becomes the title block across the head of a proof sheet */
.navbar{position:sticky; top:0; z-index:40; background:rgba(15,20,24,.93);
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
        border-bottom:1px solid var(--rule); box-shadow:none; padding:0}
.navbar .container{max-width:none; padding:11px 22px; display:flex; align-items:center; gap:22px}
.navbar-brand{font-family:'Plex Mono',monospace; font-size:12px; font-weight:500;
              letter-spacing:.1em; text-transform:uppercase; color:var(--paper)}
.navbar-brand:hover{color:var(--anno)}
.navbar-menu{display:flex; gap:20px; align-items:center; list-style:none;
             padding:0; margin-top:0; margin-bottom:0}
.navbar-menu a{font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
               text-transform:uppercase; color:var(--muted)}
.navbar-menu a:hover{color:var(--paper)}
/* the sign-up button was green from the old palette and fought every page */
.navbar-menu a.btn-primary,.navbar-menu a.btn{background:transparent; border:1px solid var(--rule2);
  color:var(--paper); padding:7px 13px; border-radius:0; font-weight:500}
.navbar-menu a.btn-primary:hover,.navbar-menu a.btn:hover{border-color:var(--anno); color:var(--anno); background:transparent}

.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; background:transparent; border:1px solid var(--rule2); color:var(--paper);
  width:34px; height:30px; align-items:center; justify-content:center; cursor:pointer; padding:0}
.nav-toggle svg{width:17px; height:17px}
.nav-toggle:hover{border-color:var(--anno); color:var(--anno)}

.footer{background:var(--ink); border-top:1px solid var(--rule); color:var(--muted);
        padding:32px var(--pad); font-family:'Plex Mono',monospace; font-size:11px;
        letter-spacing:.06em; margin-top:0}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--paper)}

/* ═══ MARKETING PAGE FURNITURE ═════════════════════════════════════════════ */
.sheet-body{display:grid; grid-template-columns:96px 1fr}
.rail{border-right:1px solid var(--rule)}
.rail > div{position:sticky; top:110px; height:0}
.rail span{position:absolute; left:48px; transform:translateX(-50%) rotate(180deg);
           writing-mode:vertical-rl; white-space:nowrap}
.field{min-width:0}

/* ONE rule owns vertical section padding so nothing cancels out */
.sec{padding:96px var(--pad); border-top:1px solid var(--rule)}
.sec.first{border-top:0}
.sec.dark{background:var(--panel)}
.lead{max-width:var(--lead)}
.hd > .m{display:block; margin-bottom:16px}
.sub{margin-top:22px; max-width:58ch; font-size:clamp(15px,1.4vw,17.5px); color:var(--muted)}
.sub b{color:var(--paper); font-weight:600}

/* the wide uppercase cut is spent ONCE per page, on the hero */
.display{font-size:clamp(34px,5.2vw,74px); font-weight:800; font-variation-settings:'wdth' 118;
         letter-spacing:-.005em; line-height:.96; text-transform:uppercase; max-width:14ch; margin:0}
.display em{font-style:normal; color:var(--muted); font-variation-settings:'wdth' 118}

/* ── controls ───────────────────────────────────────────────────────────────── */
.go,.btn{font-family:'Plex Mono',monospace; font-size:12px; letter-spacing:.12em;
   text-transform:uppercase; font-weight:500; background:var(--paper); color:var(--ink);
   padding:15px 22px; border:1px solid var(--paper); border-radius:0; cursor:pointer;
   transition:.15s; display:inline-block; text-decoration:none}
.go:hover,.btn:hover{background:var(--anno); border-color:var(--anno); color:var(--ink)}
.go.alt,.btn-outline,.btn-secondary{background:transparent; color:var(--paper); border-color:var(--rule2)}
.go.alt:hover,.btn-outline:hover,.btn-secondary:hover{border-color:var(--anno); color:var(--anno); background:transparent}
.btn-primary{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn-primary:hover{background:var(--anno); border-color:var(--anno); color:var(--ink)}
.btn-danger{background:transparent; color:var(--bad); border-color:var(--bad)}
.btn-danger:hover{background:var(--bad); color:var(--ink); border-color:var(--bad)}
.btn-block{display:block; width:100%; text-align:center}
.cta{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap}

/* ═══ APP COMPONENTS, restated in the new language ═════════════════════════ */
.container{max-width:var(--lead); margin:0 auto; padding:0 var(--pad)}
.card,.auth-card,.stat-card{background:var(--panel); border:1px solid var(--rule);
  border-radius:0; box-shadow:none; color:var(--paper)}
.card-header{border-bottom:1px solid var(--rule); background:transparent; padding:18px 22px}
.card-body{padding:22px}
.auth-container{padding:64px var(--pad)}
.auth-card{padding:36px}
.auth-header h1,.auth-header h2{margin-bottom:8px}
.auth-footer{border-top:1px solid var(--rule); margin-top:24px; padding-top:20px; color:var(--muted)}

.form-group{margin-bottom:18px}
.form-label,label{font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px}
.form-control,input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=url],select,textarea{
  background:var(--ink); border:1px solid var(--field); border-radius:0; color:var(--paper);
  font-family:inherit; font-size:15px; padding:12px 14px; width:100%}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--anno); outline:none; box-shadow:none}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--muted)}
.form-text,.form-check{color:var(--muted); font-size:13.5px}

.table{width:100%; border-collapse:collapse; color:var(--paper)}
.table th,.table td{border-bottom:1px solid var(--rule); padding:13px 16px; text-align:left}
.table th{font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:500; border-bottom-color:var(--rule2)}
.table tr:hover{background:var(--panel)}

.alert{border-radius:0; border:1px solid var(--rule2); background:var(--panel);
       color:var(--paper); padding:14px 18px}
.alert-success{border-color:var(--ok); color:var(--ok)}
.alert-danger{border-color:var(--bad); color:var(--bad)}
.alert-warning{border-color:var(--warn); color:var(--warn)}
.alert-info{border-color:var(--anno); color:var(--anno)}

.badge{border-radius:0; font-family:'Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; padding:4px 9px; border:1px solid currentColor; background:transparent}
.badge-success{color:var(--ok)} .badge-danger{color:var(--bad)}
.badge-warning{color:var(--warn)} .badge-info{color:var(--anno)}

.dashboard-header{border-bottom:1px solid var(--rule); padding-bottom:22px; margin-bottom:30px}
.dashboard-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule)}
.stat-card{border:0; padding:22px}
.stat-value{font-size:32px; font-weight:700; font-variation-settings:'wdth' 112;
  letter-spacing:-.03em; color:var(--paper)}
.stat-label{font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}

.pagination a,.pagination span{border:1px solid var(--rule2); border-radius:0; color:var(--paper);
  padding:8px 13px; font-family:'Plex Mono',monospace; font-size:12px}
.spinner{border-color:var(--rule2); border-top-color:var(--anno)}
.text-muted{color:var(--muted)}
.text-success{color:var(--ok)} .text-danger{color:var(--bad)}

/* ── long-form documents: legal pages and articles ──────────────────────────── */
.legal-doc,.doc{max-width:68ch; margin:0 auto; padding:72px var(--pad) 96px;
  color:var(--read); font-size:17.5px; line-height:1.75}
.legal-doc h1,.doc h1{margin-bottom:10px; color:var(--paper)}
.legal-doc h2,.doc h2{margin:44px 0 12px; font-size:23px; color:var(--paper)}
.legal-doc h3,.doc h3{margin:30px 0 8px; color:var(--paper)}
.legal-doc p,.doc p{margin:0 0 15px}
.legal-doc ul,.legal-doc ol,.doc ul,.doc ol{margin:0 0 18px 20px}
.legal-doc li,.doc li{margin-bottom:10px}
.legal-doc strong,.doc strong{color:var(--paper)}
.legal-doc table,.doc table{width:100%; border-collapse:collapse; margin:18px 0}
.legal-doc th,.legal-doc td,.doc th,.doc td{border:1px solid var(--rule); padding:11px 13px; text-align:left}
.doc blockquote{border-left:2px solid var(--anno); margin:22px 0; padding:4px 0 4px 20px; color:var(--paper)}
.doc cite{display:block; margin-top:9px; font-family:'Plex Mono',monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-style:normal}

/* ── footer. Mono is for the meta lines only; the disclaimer paragraphs are prose
      and were unreadable set in a monospace face. ────────────────────────────── */
.footer{font-family:Archivo,system-ui,sans-serif; font-size:14px; letter-spacing:0; text-align:center}
.footer p{margin:0 0 4px}
.footer .f-copy,.footer .f-links{font-family:'Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase}
.footer .f-links{margin-top:14px}
.footer .f-reg{max-width:62ch; margin:10px auto 0; font-size:13.5px; line-height:1.65}
.footer .f-nd{display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  margin:26px auto 0; color:var(--muted); font-family:'Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase}
.footer .f-nd svg{width:46px; height:auto; display:block}
.footer .f-nd:hover{color:var(--paper)}

.footer .f-note{max-width:66ch; margin:26px auto 0; padding:18px 22px; text-align:center;
  border:1px solid var(--rule); background:var(--panel); font-size:13.5px; line-height:1.7}
.footer .f-note strong{color:var(--paper)}

/* hazard tape. Fixed yellow and black in BOTH themes on purpose: it is a reference to a
   physical object, like the dark plate the vehicle sits on, so it must not follow the palette.
   The stripes are a repeating gradient rather than an image, so it scales and costs nothing. */
.warnbox{position:relative; padding:13px; margin-top:14px;
  background:repeating-linear-gradient(45deg,#F2C230 0 15px,#12161A 15px 30px)}
.warnbox-in{background:var(--ink); padding:52px 44px 44px}
.warnbox-tag{position:absolute; top:0; left:28px; transform:translateY(-50%); z-index:2;
  background:#F2C230; color:#12161A; font-family:'Plex Mono',monospace; font-size:11px;
  font-weight:700; letter-spacing:.17em; text-transform:uppercase; padding:8px 15px;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* the joke sits beside the argument on a wide screen, with the explanation laid over the
   bottom of the picture so the two read as one object rather than image-then-caption */
.slop-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:56px;
  align-items:center}
.slop{margin:0; max-width:none; position:relative; line-height:0}
.slop img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.slop figcaption{position:absolute; left:0; right:0; bottom:0; margin:1px;
  padding:15px 18px; text-transform:none; letter-spacing:.02em; font-size:12px; line-height:1.65;
  /* fixed dark, not tokens: this sits ON the photograph, so it must not follow the theme */
  color:#EAEFF4; background:rgba(12,17,21,.58); border-top:1px solid rgba(255,255,255,.18);
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.slop figcaption b{color:#fff; font-weight:500}
/* two slides, same 1200x670 box so nothing jumps. Look is unchanged: the nav just sits at
   the right-hand end of the caption bar that was already there. */
.slop-img{display:none}
.slop-img.is-on{display:block}
.slop figcaption{display:flex; align-items:flex-end; gap:18px}
.slop-cap{flex:1 1 auto}
.slop-nav{flex:0 0 auto; display:flex; align-items:center; gap:8px; white-space:nowrap}
.slop-nav button{background:transparent; border:1px solid rgba(255,255,255,.28); color:#EAEFF4;
  font:inherit; font-size:15px; line-height:1; width:24px; height:24px; cursor:pointer; padding:0}
.slop-nav button:hover{border-color:#fff; background:rgba(255,255,255,.12)}
.slop-count{opacity:.75; font-size:11px}


/* one line answering the question everyone arrives with, pointing at the joke downstairs.
   Deliberately slight: it is a signpost, not a section. */
.mini-ai{margin:0; padding:22px var(--pad); border-top:1px solid var(--rule);
  display:flex; gap:10px 24px; align-items:baseline; flex-wrap:wrap;
  font-size:15px; color:var(--muted)}
.mini-ai b{color:var(--paper); font-weight:600}
.mini-ai a{margin-left:auto; flex:0 0 auto; font-family:'Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--anno); white-space:nowrap}
.mini-ai a:hover{color:var(--paper)}
@media(max-width:820px){ .mini-ai a{margin-left:0} }

/* the same box inside the article, where the measure is narrow: stack it and use the full
   column rather than trying to sit two abreast in 68 characters */
.art-slop{margin:40px 0}
.art-slop .slop-split{grid-template-columns:1fr; gap:26px}
.art-slop h2,.art-slop h3{margin:0 0 12px}
.art-slop .warnbox-in{padding:44px 26px 26px}
.art-slop p{margin-bottom:0}
/* the overlay was sized for a 600px image on the homepage. In a 68 character column, and on
   any phone, it covers half the picture, so the caption sits under the image instead. */
.art-slop .slop figcaption,
.slop-static .slop figcaption{position:static; margin:0; background:rgba(255,255,255,.045);
  border-top:0; border:1px solid var(--rule); border-top-color:transparent; text-shadow:none;
  color:var(--muted)}
.art-slop .slop img{border-bottom:0}
@media(max-width:560px){
  .slop figcaption{position:static; margin:0; background:rgba(255,255,255,.045);
    border-top:0; border:1px solid var(--rule); border-top-color:transparent;
    text-shadow:none; color:var(--muted)}
  .slop img{border-bottom:0}
}

/* ── cookie banner ──────────────────────────────────────────────────────────── */
#cookie-banner{position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:var(--panel); border-top:1px solid var(--rule2); color:var(--paper);
  padding:10px 16px; font-size:14px}
#cookie-banner > div{max-width:1100px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px}
.ck-btn{padding:8px 16px; font-size:11px}

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:1080px){ :root{--pad:34px} }
@media(max-width:820px){
  :root{--pad:20px}
  .sheet-body{grid-template-columns:1fr}
  .rail{display:none}
  .sec{padding-top:64px; padding-bottom:64px}
  .navbar .container{padding:9px 14px; gap:12px}
  .nav-toggle{display:inline-flex}
  /* the links become a panel under the bar instead of wrapping the bar to three rows */
  .navbar-menu{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; padding:6px 0;
    background:var(--ink); border-bottom:1px solid var(--rule)}
  .navbar-menu.is-open{display:flex}
  .navbar-menu li{width:100%}
  .navbar-menu a{display:block; padding:13px 16px}
  .navbar-menu a.btn-primary,.navbar-menu a.btn{margin:6px 16px 8px; text-align:center}
  /* icon only: the word does not survive the space */
  .theme-btn{padding:7px 9px}
  .theme-btn span{gap:0}
  .theme-btn .lbl{display:none}
  .legal-doc,.doc{padding-top:44px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}

/* ═══ LIGHT MODE ═══════════════════════════════════════════════════════════════
   Dark is the default. This is opt-in, remembered per browser.

   Not a straight inversion. The BDA style guide asks for dark text on a light but
   NOT white background, so the page is a soft cool paper rather than #fff, which
   keeps glare down and keeps the slate identity. Every value is measured:
     heading 16.07:1   read 11.55:1   muted 5.37:1   anno 5.64:1   field 3.40:1
   The reading colour is 11.55:1, deliberately matching dark mode's 11.23:1 so the
   two themes are equally readable rather than one being an afterthought.
   ═══════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --ink:#EEF1F4; --panel:#E2E7EC; --rule:#CDD6DD; --rule2:#B4C0CA;
  --paper:#10161B; --muted:#56646F; --read:#26323C; --anno:#2B6489;
  --field:#748491;
  --ok:#2F6B45; --warn:#8A5A16; --bad:#A33232;
  --warn-line:rgba(138,90,22,.34);
  /* style.css's own variables follow the theme too */
  --primary-color:#2B6489; --primary-dark:#1F4C6B; --secondary-color:#2B6489;
  --danger-color:#A33232; --warning-color:#8A5A16; --success-color:#2F6B45;
  --info-color:#2B6489; --dark-color:#10161B; --light-color:#E2E7EC;
  --border-color:#CDD6DD; --text-color:#10161B; --text-light:#56646F;
  color-scheme:light;
}
html[data-theme="light"] .navbar{background:rgba(238,241,244,.93)}
html[data-theme="light"] .go:hover,html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-primary:hover{color:#EEF1F4}
html[data-theme="light"] .go,html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary{background:var(--paper); color:var(--ink); border-color:var(--paper)}
html[data-theme="light"] .go:hover,html[data-theme="light"] .btn:hover{background:var(--anno); border-color:var(--anno)}
html[data-theme="light"] .go.alt,html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-secondary{background:transparent; color:var(--paper); border-color:var(--rule2)}
html[data-theme="light"] .go.alt:hover,html[data-theme="light"] .btn-outline:hover{color:var(--anno); border-color:var(--anno); background:transparent}
/* the vehicle is rendered on black, so on a light page it needs to keep its own plate,
   otherwise a white wrap on white paper disappears */
html[data-theme="light"] .plate{background:#0F1418}
html[data-theme="light"] .plate .dim b{background:#0F1418; color:#9FC3E0}
html[data-theme="light"] .plate .dim::before,html[data-theme="light"] .plate .dim i,
html[data-theme="light"] .plate .angles,html[data-theme="light"] .plate .caveat{border-color:#2A343D; background-color:transparent}
html[data-theme="light"] .plate .angles span::before{background:#2A343D}
html[data-theme="light"] .plate .m,html[data-theme="light"] .plate .caveat{color:#8B97A2}
html[data-theme="light"] .plate .angles .on{color:#9FC3E0}
html[data-theme="light"] .plate .angles .on::before{background:#9FC3E0}
html[data-theme="light"] .demo .veil{color:#E6ECF2}
html[data-theme="light"] .demo .veil .note{color:#9BA7B2}

/* ── the toggle itself ──────────────────────────────────────────────────────── */
.theme-btn{background:transparent; border:1px solid var(--rule2); color:var(--muted);
  font-family:'Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; line-height:1}
.theme-btn:hover{color:var(--paper); border-color:var(--anno)}
.theme-btn svg{width:13px; height:13px; flex:0 0 auto}
.theme-btn .on-dark{display:inline-flex} .theme-btn .on-light{display:none}
html[data-theme="light"] .theme-btn .on-dark{display:none}
html[data-theme="light"] .theme-btn .on-light{display:inline-flex}

/* footer: ongoing-development notice (drafts/dev-status-copy.md item 3) */
.footer .f-dev{margin:14px 0 0;font-size:.85rem;color:var(--muted);text-align:center}