/* evenfacts-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="/evenfacts-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:#1e1b2e;
  --dk-surface:#2a2640;
  --dk-surface-2:#39354d;
  --dk-hero:#161422;
  --dk-border:#3d3d51;
  --dk-border-strong:#70758a;
  --dk-heading:#ffffff;
  --dk-text:#ece9f6;
  --dk-muted:#b9b3cf;
  --dk-primary:#a78bfa;
  --dk-primary-hover:#bda8fb;
  --dk-on-primary:#1e1b2e;
  --dk-link:#a78bfa;
  --dk-link-hover:#c6b4fc;
  --dk-accent:#2dd4bf;
  --dk-brand:#a78bfa;
  --dk-focus:#fcd34d;
  --dk-input:#181625;
  --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{--paper:var(--dk-surface);--ink:var(--dk-text);--muted:var(--dk-muted);--rule:var(--dk-surface);--left:var(--dk-link);--leftbg:var(--dk-surface);--right:var(--dk-link);--rightbg:var(--dk-surface);--fact:var(--dk-text);--factbg:var(--dk-surface);--accent:var(--dk-link)}

/* 3. Hard-coded light colors from the live stylesheet, remapped (32 rules) */
body.dk .skip:focus{background:var(--dk-surface)}
body.dk .mast{border-bottom:3px double var(--dk-border-strong)}
body.dk .logo-mark{background:var(--dk-surface-2);color:var(--dk-text)}
body.dk nav a:hover{border-color:var(--dk-border-strong)}
body.dk .ribbon{background:var(--dk-surface-2);color:var(--dk-text)}
body.dk .ask input{border:2px solid var(--dk-border-strong);background:var(--dk-surface)}
body.dk .ask input:disabled{background:var(--dk-surface)}
body.dk .ask button{background:var(--dk-surface-2)}
body.dk .pill{background:var(--dk-primary);color:var(--dk-on-primary)}
body.dk .card a{background:var(--dk-surface)}
body.dk .card a:hover{border-color:var(--dk-border-strong)}
body.dk .badge{border:2px solid var(--dk-border-strong)}
body.dk .badge span{background:var(--dk-primary);color:var(--dk-on-primary)}
body.dk .bottom{background:var(--dk-surface);border-left:5px solid var(--dk-border-strong)}
body.dk .panel-left{border-color:var(--dk-border-strong)}
body.dk .panel-right{border-color:var(--dk-border-strong)}
body.dk .panel-facts{border-color:var(--dk-border-strong)}
body.dk .q{background:var(--dk-surface);border-left:3px solid var(--dk-border-strong)}
body.dk .pubbox{border:2px solid var(--dk-border-strong);background:var(--dk-surface)}
body.dk .foot{border-top:3px double var(--dk-border-strong)}
body.dk .ask button{background:var(--dk-surface-2)}
body.dk .results .res{border:1px solid var(--dk-border)}
body.dk .conf-high{color:var(--dk-link)}
body.dk .conf-medium{color:var(--dk-link)}
body.dk .conf-low{color:var(--dk-link)}
body.dk .recent button{border:1px solid var(--dk-border);background:var(--dk-surface)}
body.dk .tabs{border-bottom:2px solid var(--dk-border)}
body.dk .tabs a[aria-selected="true"]{background:var(--dk-surface-2)}
body.dk .history td,body.dk .history th{border-bottom:1px solid var(--dk-border)}
body.dk .results.nomatch{border:2px solid var(--dk-border);background:var(--dk-surface)}
body.dk .req-msg.ok{color:var(--dk-link)}
body.dk .req-msg.err{color:var(--dk-link)}

/* 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 */
/* left/right columns keep their identity on dark */
body.dk [class*=left]{border-color:#a78bfa}
body.dk [class*=right]{border-color:#2dd4bf}


/* ---------- Builder fixes (2026-10-17) ---------- */
/* checker button: dark text sat on the dark surface; make it the primary violet fill with dark text */
body.dk .ask button{background:var(--dk-primary);color:var(--dk-on-primary)}
body.dk .ask button:hover{background:var(--dk-primary-hover)}
body.dk .ask button:disabled,body.dk .ask button[aria-disabled=true]{background:var(--dk-surface-2);color:var(--dk-text)}
/* EXAMPLE ribbon (kept under the new header): link contrast */
body.dk .ribbon{background:var(--dk-surface);color:var(--dk-text);border-bottom:1px solid var(--dk-border)}
body.dk .ribbon a{color:var(--dk-link-hover);text-decoration:underline}
/* Left / Right column edges use the two accents (handoff §4) */
html body.dk{--right:var(--dk-accent)}