/* calc-night-skin.css (20261101e): DeckIQ's Night shift look for every calculator page, DARK MODE ONLY (standing rule 18, Jared 31 Oct:
   "the calcs in dark mode are hard on my eyes ... DeckIQ's redesign is much sharper ... make it the new standing rule design for calcs").
   The pages declare the old "Shed Designer" tokens on .cx in their own <style>; a rule on `html:not([data-mode="light"]) body.night .cx`
   outranks that one, so no page file changes. Loaded LAST on every calculator page. Light mode is untouched (no rule here matches it).
   Source of truth for the look: DeckIQ/newcalcs-shell/nc-night-skin.css and assets/deckiq-night.css (tokens --page #04070F, --panel #0A1120,
   --ink #EAF2FF, one cyan #7DF3FF for text and #22C9F0 for lines, amber #FFB547, 1px low-alpha edges, no glow, Sora / Inter / JetBrains Mono). */

/* ---- tokens ---- */
html:not([data-mode="light"]) body.night .cx{
  --bg:#04070F;--bg2:#070C18;--panel:#0A1120;--panel2:#0D1629;--field:#070C18;
  --line:rgba(160,220,255,.16);--ink:#EAF2FF;--soft:#9DB0CE;
  --accent:#22C9F0;--accent-ink:#03121A;--cyan:#7DF3FF;--glow:rgba(59,232,255,.22);--grid:rgba(160,220,255,.08);
  --warn:#FFB547;--stage1:#0A1120;--stage2:#04070F;--ica:#0D1629;--icb:#16233D;--icc:#0A1120;
  --top:rgba(125,243,255,.2);--edge:#22C9F0;--sky:#070C18;
  --n-glass1:rgba(16,26,46,.92);--n-glass2:rgba(9,15,30,.92);--n-shadow:0 18px 40px -22px rgba(0,0,0,.75);--n-hover:rgba(125,243,255,.4);
  --sans:Inter,Figtree,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* the 31 Oct kit pages (calc-nc-kit.css) */
  --nc-a:#7DF3FF;--nc-acc:#7DF3FF;--nc-accline:rgba(160,220,255,.16);--nc-glow:rgba(59,232,255,.10);--nc-r:#FFB547;--nc-stage1:#0A1120;--nc-stage2:#04070F}
/* the tool-card picture and the back bar (calc-tools.css) */
html:not([data-mode="light"]) body.night :is(.aqtA,.aqtC){--aqt-panel:#0A1120;--aqt-field:#070C18;--aqt-line:rgba(160,220,255,.16);--aqt-ink:#EAF2FF;--aqt-soft:#9DB0CE;--aqt-cyan:#7DF3FF;--aqt-bg:#04070F;--aqt-glow:rgba(59,232,255,.22)}
html:not([data-mode="light"]) body.night .aqBack{--aqb-line:rgba(160,220,255,.16);--aqb-cyan:#7DF3FF;--aqb-soft:#9DB0CE;--aqb-glow:rgba(59,232,255,.2)}

/* ---- type: Sora headings, Inter text, mono only for numbers and the small caps labels; no glow on any text ---- */
html:not([data-mode="light"]) body.night .cx{font-family:var(--sans)}
html:not([data-mode="light"]) body.night .cx *{text-shadow:none!important}
html:not([data-mode="light"]) body.night .cx :is(h1,h2){font-family:Sora,Inter,sans-serif;letter-spacing:-.03em}

/* ---- cards and stages: glass with a 1px edge ---- */
html:not([data-mode="light"]) body.night .cx :is(.cxcard,.nc-dlg){background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2));border:1px solid var(--line);border-radius:18px;box-shadow:var(--n-shadow),inset 0 1px 0 rgba(255,255,255,.05)}
html:not([data-mode="light"]) body.night .cx .nc-dlg{box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
html:not([data-mode="light"]) body.night .cx :is(.cxstage,.nc-stage,canvas.nc-cv){border-color:var(--line);box-shadow:var(--n-shadow)}
html:not([data-mode="light"]) body.night .cx .cxcard h3.t{font-size:12px;color:var(--soft);letter-spacing:.1em}
html:not([data-mode="light"]) body.night .cx :is(.cxcard h3.t::after,.trace){opacity:.4}

/* ---- inputs: quiet 1px, cyan only on hover and focus ---- */
html:not([data-mode="light"]) body.night .cx :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-width:1px;border-color:var(--line);border-radius:12px;background-color:var(--field)}
html:not([data-mode="light"]) body.night .cx :is(input,select,textarea):hover{border-color:var(--n-hover)}
html:not([data-mode="light"]) body.night .cx :is(input,select,textarea):focus{outline:none;border-color:#7DF3FF;box-shadow:0 0 0 3px rgba(125,243,255,.16)}
html:not([data-mode="light"]) body.night .cx :is(input[type=number],input[type=text],input.mono,.nc-in){font-family:var(--mono);font-weight:500}

/* ---- buttons: the PRIMARY (.cxb) is the cyan gradient with dark ink, like DeckIQ's Confirm; every other button is quiet glass ---- */
html:not([data-mode="light"]) body.night .cx :is(button,.cxb,a.cxb){border-width:1px}
html:not([data-mode="light"]) body.night .cx .cxb:not(.alt),html:not([data-mode="light"]) body.night .cx :is(.btn.primary,.btn.nc-watch,.nc-watch){background:linear-gradient(180deg,#7DF3FF,#22C9F0);color:#03121A!important;border:1px solid transparent;border-radius:12px;box-shadow:0 8px 26px -8px rgba(59,232,255,.7)}
html:not([data-mode="light"]) body.night .cx .cxb:not(.alt):hover{box-shadow:0 10px 30px -8px rgba(59,232,255,.85);filter:brightness(1.05)}
html:not([data-mode="light"]) body.night .cx :is(.cxb.alt,.btn:not(.primary):not(.nc-watch)){background:rgba(13,22,41,.8);border:1px solid var(--line);color:var(--ink);border-radius:12px;box-shadow:none}
html:not([data-mode="light"]) body.night .cx :is(.cxb.alt,.btn:not(.primary):not(.nc-watch)):hover{border-color:rgba(125,243,255,.55);background:rgba(34,201,240,.1);color:var(--ink)}
/* chips and segmented switches: a 1px edge; the picked one is the gradient */
html:not([data-mode="light"]) body.night .cx :is(.cxchip,.nc-chip){border:1px solid var(--line);background:rgba(13,22,41,.7);color:var(--ink);box-shadow:none}
html:not([data-mode="light"]) body.night .cx :is(.cxchip,.nc-chip)[aria-pressed="true"]{background:linear-gradient(180deg,#7DF3FF,#22C9F0);border-color:transparent;color:#03121A;box-shadow:none}
html:not([data-mode="light"]) body.night .cx :is(.seg2,.nc-seg,[class$="-seg"],[class*="-seg "]){border-width:1px;border-color:var(--line);background:var(--field)}
html:not([data-mode="light"]) body.night .cx :is(.seg2,.nc-seg,[class$="-seg"],[class*="-seg "]) button[aria-pressed="true"]{background:linear-gradient(180deg,#7DF3FF,#22C9F0);color:#03121A;box-shadow:none}

/* ---- the answer: a calm glass tile, the number in the soft cyan ---- */
html:not([data-mode="light"]) body.night .cx .tile{background:rgba(7,12,24,.6);border:1px solid var(--line);border-radius:14px}
html:not([data-mode="light"]) body.night .cx :is(.tile.big,.tile.m,.nc-big){background:linear-gradient(180deg,rgba(34,201,240,.10),rgba(34,201,240,.03));border:1px solid rgba(125,243,255,.32);box-shadow:var(--n-shadow)}
html:not([data-mode="light"]) body.night .cx :is(.tile.big b,.nc-big b){color:#7DF3FF;font-weight:700}
html:not([data-mode="light"]) body.night .cx .nc-tile{border:1px solid var(--line);background:rgba(7,12,24,.6);border-radius:14px}
html:not([data-mode="light"]) body.night .cx .nc-tile.hot{border-color:rgba(255,181,71,.55)}

/* ---- the rest of the page ---- */
html:not([data-mode="light"]) body.night .cx .cta{background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2));border:1px solid rgba(125,243,255,.3);box-shadow:var(--n-shadow)}
html:not([data-mode="light"]) body.night .cx table.t th{background:rgba(13,22,41,.8)}
html:not([data-mode="light"]) body.night .cx :is(.callout,.formula,.faq details,.related a){background:rgba(10,17,32,.8)}
html:not([data-mode="light"]) body.night .cx :is(.nc-note,.nc-warnbox,.nc-err){background:rgba(7,12,24,.7)}
html:not([data-mode="light"]) body.night .cx .nc-banner{border:1px solid rgba(125,243,255,.3);background:rgba(34,201,240,.06)}
html:not([data-mode="light"]) body.night .cx a.aqBackBtn{color:var(--ink)}
html:not([data-mode="light"]) body.night a.aqtA{box-shadow:var(--n-shadow)}
html:not([data-mode="light"]) body.night .aqtGo{border-width:1px}

/* ---- pages that keep their own accent tokens on #p-<page> (the 30 Oct measuring pages): same palette, ID-level so it outranks them ---- */
html:not([data-mode="light"]) body.night #p-board{--bf-a:#7DF3FF;--bf-acc:#7DF3FF;--bf-accline:rgba(160,220,255,.16);--bf-glow:rgba(59,232,255,.10);--bf-r:#FFB547;--bf-stage:#0A1120;--bf-stage2:#04070F}
html:not([data-mode="light"]) body.night #p-fraction{--fc-a:#7DF3FF;--fc-acc:#7DF3FF;--fc-accline:rgba(160,220,255,.16);--fc-glow:rgba(59,232,255,.10);--fc-r:#FFB547;--fc-stage:#0A1120;--fc-stage2:#04070F}
html:not([data-mode="light"]) body.night #p-mic{--mic-a:#7DF3FF;--mic-acc:#7DF3FF;--mic-accline:rgba(160,220,255,.16);--mic-glow:rgba(59,232,255,.10);--mic-r:#FFB547;--mic-stage:#0A1120;--mic-stage2:#04070F}
html:not([data-mode="light"]) body.night #p-tape{--tm-a:#7DF3FF;--tm-acc:#7DF3FF;--tm-accline:rgba(160,220,255,.16);--tm-glow:rgba(59,232,255,.10);--tm-r:#FFB547;--tm-stage:#0A1120;--tm-stage2:#04070F}
html:not([data-mode="light"]) body.night #p-unit{--uc-a:#7DF3FF;--uc-acc:#7DF3FF;--uc-accline:rgba(160,220,255,.16);--uc-glow:rgba(59,232,255,.10);--uc-r:#FFB547;--uc-stage:#0A1120;--uc-stage2:#04070F}
html:not([data-mode="light"]) body.night #p-password{--pg-yellow:#FFB547;--pg-stage2:#04070F}

/* ---- page-specific controls whose own rules use an id (they outrank the class rules above): 1px edges, no neon fills ---- */
html:not([data-mode="light"]) body.night .cx :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,output,[class$="-seg"],[class*="-seg "],.seg2,[class$="-step"],[class$="-op"],.bf-board,.bf-rview,.fc-sign,.mic-magbtn,.cl-magcorner,.pg-go,.pt-sw,[class$="-x"],button.x,.cn-flip,.dr-roll,.nr-gen){border-width:1px!important}
html:not([data-mode="light"]) body.night .cx :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-color:var(--line)!important}
html:not([data-mode="light"]) body.night .cx :is(input,select,textarea):focus{border-color:#7DF3FF!important}
html:not([data-mode="light"]) body.night .cx .mic-cuering{border-width:1px!important;box-shadow:none!important}

/* ---- "Watch how it works": the banner is quiet glass, its button the filled primary on every page (rule 12: the Watch button stays prominent) ---- */
html:not([data-mode="light"]) body.night .cx div:is([class$="-watch"],[class*="-watch "]){background:linear-gradient(180deg,rgba(34,201,240,.08),rgba(34,201,240,.02))!important;border:1px solid rgba(125,243,255,.28)!important;box-shadow:var(--n-shadow)!important}
html:not([data-mode="light"]) body.night .cx button:is([id*="watch"],[class*="watch"]){background:linear-gradient(180deg,#7DF3FF,#22C9F0)!important;color:#03121A!important;border:1px solid transparent!important;box-shadow:0 8px 26px -8px rgba(59,232,255,.7)!important}
/* the picture stages: the neutral Night shift ground instead of the blue gradient */
html:not([data-mode="light"]) body.night .cx :is([class$="-stage"],[class*="-stage "],.sf-main,.nr-reel){background:radial-gradient(120% 90% at 50% 0%,#0A1120,#04070F)!important;border-color:var(--line)!important;box-shadow:var(--n-shadow)!important}
/* every other button: a 1px edge */
html:not([data-mode="light"]) body.night .cx button:not(.cxb):not([id$="-watchbtn"]){border-width:1px!important}
html:not([data-mode="light"]) body.night .cx :is(.rp-units,.sd-pill){border-width:1px!important}