/* cyberspacetraining-dark.css: site-wide DARK theme. Design: Web: UI/UX Designer, 2026-10-17. Preview only.
   Link LAST on every page: <link rel="stylesheet" href="/cyberspacetraining-dark.css?v=1">  and add class "dk" to <body>.
   Sections: 1 tokens, 2 legacy-variable remap, 3 overrides of hard-coded light colors, 4 shared core (header/footer/buttons/forms/cards), 5 site fixes. */

/* 1. Tokens */
:root{
  --dk-bg:#0b1630;
  --dk-surface:#13224a;
  --dk-surface-2:#243157;
  --dk-hero:#081024;
  --dk-border:#2d3952;
  --dk-border-strong:#626e87;
  --dk-heading:#ffffff;
  --dk-text:#e6edf6;
  --dk-muted:#9fb0c6;
  --dk-primary:#f2c94c;
  --dk-primary-hover:#f5d679;
  --dk-on-primary:#0b1630;
  --dk-link:#f2c94c;
  --dk-link-hover:#f7dc8b;
  --dk-accent:#7dd3fc;
  --dk-brand:#f2c94c;
  --dk-focus:#7dd3fc;
  --dk-input:#091226;
  --dk-shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px rgb(0 0 0/.25);
  --dk-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dk-font-heading:var(--dk-font);
  --dk-fs-body:1.0625rem;
  color-scheme:dark;
}

/* 2. Legacy variables -> dark roles */
html body.dk{--wall:var(--dk-surface);--wall-2:var(--dk-surface);--ceiling:var(--dk-surface);--trim:var(--dk-surface);--carpet:var(--dk-muted);--navy:var(--dk-link);--navy-2:var(--dk-link);--paper:var(--dk-surface);--memo:var(--dk-surface);--ink:var(--dk-text);--slate:var(--dk-muted);--brass:var(--dk-link);--s-employee:var(--dk-link);--s-ai:var(--dk-link);--s-phishing:var(--dk-link);--s-admin:var(--dk-link)}

/* 3. Hard-coded light colors from the live stylesheet, remapped (9 rules) */
body.dk .nameplate{background:var(--dk-surface);border:3px solid var(--dk-border-strong)}
body.dk .tag{background:var(--dk-surface)}
body.dk .btn{border:2px solid var(--dk-border-strong)}
body.dk .btn-primary{background:var(--dk-primary);color:var(--dk-on-primary)}
body.dk .card{border-top:6px solid var(--series,var(--dk-border-strong))}
body.dk .soon{background:var(--dk-surface)}
body.dk .steps li::before{background:var(--dk-surface)}
body.dk .cta{border-left:10px solid var(--dk-border-strong)}
body.dk .site-footer{background:var(--dk-surface-2)}

/* 4. Shared core (same on every site) */
html body.dk{background:var(--dk-bg);color:var(--dk-text);font-family:var(--dk-font);font-size:var(--dk-fs-body);line-height:1.65;-webkit-font-smoothing:antialiased}
html{scroll-padding-top:80px}
body.dk h1,body.dk h2,body.dk h3,body.dk h4{color:var(--dk-heading);font-family:var(--dk-font-heading);line-height:1.2;letter-spacing:-.01em}
body.dk h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem);font-weight:800}
body.dk h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem)}
body.dk p,body.dk li,body.dk dd,body.dk td{color:inherit}
body.dk strong,body.dk b{color:var(--dk-heading)}
body.dk a{color:var(--dk-link);text-underline-offset:3px}
body.dk a:hover{color:var(--dk-link-hover)}
body.dk small,body.dk .muted,body.dk .fine,body.dk figcaption{color:var(--dk-muted)}
body.dk hr{border-color:var(--dk-border)}
body.dk img[src$=".svg"]{color-scheme:dark}
/* focus: one visible ring everywhere (WCAG 2.4.7 / 2.4.11) */
body.dk :focus-visible{outline:3px solid var(--dk-focus)!important;outline-offset:3px;box-shadow:none}
body.dk input:focus-visible,body.dk textarea:focus-visible,body.dk select:focus-visible{outline-offset:1px}
/* skip link */
body.dk .dk-skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--dk-primary);color:var(--dk-on-primary);padding:12px 16px;border-radius:8px;font-weight:700}
body.dk .dk-skip:focus{left:8px}

/* ---- Shared header (partial: see handoff §3) ---- */
body.dk .dk-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--dk-hero) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--dk-border)}
body.dk .dk-header .dk-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px);min-height:64px;display:flex;align-items:center;gap:16px}
body.dk .dk-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.125rem;color:var(--dk-heading);text-decoration:none;margin-right:auto;white-space:nowrap}
body.dk .dk-logo img{height:32px;width:auto}
body.dk .dk-logo b{color:var(--dk-brand)}
body.dk .dk-nav{display:flex;align-items:center;gap:4px}
body.dk .dk-nav a{color:var(--dk-text);text-decoration:none;font-weight:600;font-size:.9375rem;padding:10px 12px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center}
body.dk .dk-nav a:hover{background:var(--dk-surface-2);color:var(--dk-heading)}
body.dk .dk-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--dk-primary)}
body.dk .dk-header .dk-cta{margin-left:8px}
body.dk .dk-menu{display:none;position:relative}
body.dk .dk-menu>summary{list-style:none;cursor:pointer;min-height:44px;padding:0 14px;display:flex;align-items:center;gap:8px;border:1px solid var(--dk-border-strong);border-radius:8px;color:var(--dk-heading);font-weight:600}
body.dk .dk-menu>summary::-webkit-details-marker{display:none}
body.dk .dk-menu>summary:before{content:"";width:18px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
body.dk .dk-menu[open]>div{position:absolute;right:0;top:52px;min-width:240px;background:var(--dk-surface);border:1px solid var(--dk-border);border-radius:12px;box-shadow:var(--dk-shadow);padding:8px;display:grid}
body.dk .dk-menu[open]>div a{padding:12px 14px;min-height:48px;display:flex;align-items:center;color:var(--dk-text);text-decoration:none;border-radius:8px;font-weight:600}
body.dk .dk-menu[open]>div a:hover{background:var(--dk-surface-2)}
@media (max-width:860px){body.dk .dk-nav{display:none}body.dk .dk-menu{display:block}body.dk .dk-header .dk-cta{display:none}}

/* ---- Buttons ---- */
body.dk .dk-btn,body.dk button:not(.dk-plain),body.dk input[type=submit],body.dk .btn,body.dk .button,body.dk .cta{min-height:48px;border-radius:8px;font-weight:700}
body.dk .dk-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;background:var(--dk-primary);color:var(--dk-on-primary);text-decoration:none;border:2px solid var(--dk-primary);transition:background .15s ease,border-color .15s ease}
body.dk .dk-btn:hover{background:var(--dk-primary-hover);border-color:var(--dk-primary-hover);color:var(--dk-on-primary)}
body.dk .dk-btn.ghost{background:transparent;color:var(--dk-heading);border-color:var(--dk-border-strong)}
body.dk .dk-btn.ghost:hover{background:var(--dk-surface-2)}

/* ---- Forms ---- */
body.dk input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),body.dk select,body.dk textarea{background:var(--dk-input);color:var(--dk-heading);border:1px solid var(--dk-border-strong);border-radius:8px;min-height:48px;font-size:1rem}
body.dk ::placeholder{color:var(--dk-muted);opacity:1}
body.dk label,body.dk legend{color:var(--dk-heading)}
body.dk input[type=checkbox],body.dk input[type=radio],body.dk input[type=range],body.dk progress{accent-color:var(--dk-primary)}
body.dk option{background:var(--dk-surface);color:var(--dk-text)}

/* ---- Cards, tables, details ---- */
body.dk table{border-color:var(--dk-border)}
body.dk th{background:var(--dk-surface-2);color:var(--dk-heading)}
body.dk td,body.dk th{border-color:var(--dk-border)}
body.dk tr:nth-child(even) td{background:color-mix(in srgb,var(--dk-surface) 60%,transparent)}
body.dk details{border-color:var(--dk-border)}
body.dk summary{color:var(--dk-heading);min-height:44px}
body.dk code,body.dk kbd{background:var(--dk-surface-2);color:var(--dk-heading);border-radius:4px}
body.dk .dk-card{background:var(--dk-surface);border:1px solid var(--dk-border);border-radius:16px;box-shadow:var(--dk-shadow);padding:24px}

/* ---- Shared footer (restyles the existing <footer>; partial in handoff §3) ---- */
body.dk>footer,body.dk footer.site-footer,body.dk .dk-footer{background:var(--dk-hero);color:var(--dk-muted);border-top:1px solid var(--dk-border);font-size:.9375rem}
body.dk>footer a,body.dk .dk-footer a{color:var(--dk-text)}
body.dk>footer a:hover,body.dk .dk-footer a:hover{color:var(--dk-link-hover)}
body.dk .dk-footer .dk-wrap{max-width:1160px;margin:0 auto;padding:40px clamp(16px,4vw,32px);display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
body.dk .dk-footer .dk-legal{grid-column:1/-1;font-size:.8125rem;color:var(--dk-muted);border-top:1px solid var(--dk-border);padding-top:16px}

/* ---- Ads: reserve space, no layout shift; consent bar compact ---- */
body.dk ins.adsbygoogle{background:transparent!important;min-height:100px;display:block}

@media (prefers-reduced-motion:reduce){body.dk *,body.dk *:before,body.dk *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* neutralize legacy header rules on the shared partial */
body.dk header.dk-header{display:block;max-width:none;margin:0;padding:0;text-align:left;justify-content:initial}
body.dk .dk-header .dk-wrap{width:100%;box-sizing:border-box}
/* any button-like link sitting on a bright fill gets dark text */
body.dk a.cta,body.dk a.btn-primary,body.dk .btn-primary,body.dk button[type=submit]:not(.ghost){color:var(--dk-on-primary)}
/* secondary / ghost buttons: outline, light text (never a second bright fill) */
body.dk .ghost,body.dk .btn-ghost,body.dk .btn-secondary,body.dk .btn.secondary,body.dk .btn-outline{background:transparent!important;color:var(--dk-heading)!important;border:2px solid var(--dk-border-strong)!important}
body.dk .ghost:hover,body.dk .btn-ghost:hover,body.dk .btn-secondary:hover{background:var(--dk-surface-2)!important}
body.dk button:disabled,body.dk button[disabled]{background:var(--dk-surface-2)!important;color:var(--dk-muted)!important;border-color:var(--dk-border)!important;cursor:not-allowed}


/* 5. Site-specific fixes */
/* navy space: CSS-only star field, no image download */
html body.dk{background:
 radial-gradient(1.5px 1.5px at 12% 18%,#ffffffcc 50%,transparent 51%),radial-gradient(1px 1px at 28% 72%,#ffffffaa 50%,transparent 51%),
 radial-gradient(1.5px 1.5px at 47% 33%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 63% 12%,#ffffffb3 50%,transparent 51%),
 radial-gradient(1px 1px at 78% 58%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 90% 26%,#ffffffcc 50%,transparent 51%),
 radial-gradient(1px 1px at 35% 90%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 6% 52%,#fff9 50%,transparent 51%),
 radial-gradient(900px 500px at 85% -10%,#1f3a5f 0%,transparent 65%),radial-gradient(700px 500px at -10% 40%,#16295299 0%,transparent 60%),var(--dk-bg);
 background-size:600px 600px,600px 600px,600px 600px,600px 600px,600px 600px,600px 600px,600px 600px,600px 600px,100% 100%,100% 100%,auto;background-attachment:fixed}
body.dk section,body.dk main,body.dk .hero{background-color:transparent}
body.dk h1 em,body.dk h1 span,body.dk h1 .accent{color:var(--dk-primary)}
/* the yellow "lesson" sticky note becomes a calm sky-edged card (no tilt) */
body.dk [class*=note],body.dk [class*=lesson],body.dk [class*=sticky]{background:var(--dk-surface)!important;color:var(--dk-text)!important;transform:none!important;border:1px solid var(--dk-border);border-left:4px solid var(--dk-accent);border-radius:12px;box-shadow:var(--dk-shadow)}
body.dk [class*=pill],body.dk [class*=badge],body.dk [class*=eyebrow]{background:#7dd3fc1f;color:var(--dk-accent);border:1px solid #7dd3fc55}
/* episode frames keep their art, framed for dark */
body.dk img:not([src$=".svg"]){border-radius:12px}


/* ---------- Builder fixes (2026-10-17) ---------- */
/* "Lesson in 10 seconds" card (.tip): flat, no tilt, sky left edge */
body.dk .tip{transform:none;background:var(--dk-surface);color:var(--dk-text);border:1px solid var(--dk-border);border-left:4px solid var(--dk-accent);border-radius:12px}
/* Spot the Red Flag: --navy now maps to gold, so text on it must be navy */
body.dk #rf-play,body.dk #rf-clock{color:var(--dk-on-primary)}

/* ---------- UI/UX review fixes (REVIEW.md combined list, 2026-10-17) ---------- */
body.dk .rf-email-in{background:var(--dk-surface);border-color:var(--dk-border);color:var(--dk-text)}
body.dk .rf-email-in .rf-clue-text{color:var(--dk-muted)}
body.dk{--cubicle:#1c2a4a;--trim:#33456e}

/* Round 3: explanation text clear of the accent bar */
body.dk .rf-email-in .rf-clue-note{padding-left:12px}