/* ============ dark.css: the dark theme ============
   In dark mode every word is white, and headings and bold words are yellow.
   To change the yellow, change --hd below. */
:root[data-theme="dark"]{
  --hd:#FFBB00;
  --ink:#FFFFFF; --ink-soft:#FFFFFF; --fg:#FFFFFF;
  --card:#111A33; --bg:#0B1226; --paper:#0B1226;
  color-scheme:dark;
}
:root[data-theme="dark"] body{color:#fff;}

/* headings, bold words and small titles: yellow */
:root[data-theme="dark"] :is(h1,h2,h3,h4,h5,h6,b,strong,th,.kicker,.crumb-w a,.sk-more):not(.pc-sheet *):not(.btn *):not(.tt-btn *):not(.wa-tip *){color:var(--hd);}
:root[data-theme="dark"] .section-head.center .kicker,
:root[data-theme="dark"] .life .kicker{color:var(--hd);}

/* things that sat in navy text */
:root[data-theme="dark"] .top-card .t-avg,
:root[data-theme="dark"] .p-tile .v,
:root[data-theme="dark"] .gcard .gl b,
:root[data-theme="dark"] .stat-item b,
:root[data-theme="dark"] .stat b,
:root[data-theme="dark"] .dash-card b,
:root[data-theme="dark"] .eight .n{color:var(--hd);}
:root[data-theme="dark"] .login-card .lock-icon{color:var(--hd);}
:root[data-theme="dark"] .pillar .p-icon svg,
:root[data-theme="dark"] .mv-icon svg{stroke:var(--hd);}
:root[data-theme="dark"] [style*="B37E00"]{color:var(--hd) !important;}
:root[data-theme="dark"] .skill-card.soon .tile svg{stroke:#fff;}
:root[data-theme="dark"] .sk-more{color:var(--hd);}

/* cards that were light in the light theme */
:root[data-theme="dark"] .gallery-card{background:var(--card); border-color:var(--line);}
:root[data-theme="dark"] .gallery-card .g-label,
:root[data-theme="dark"] .gallery-card .g-label small{color:#fff;}
:root[data-theme="dark"] .gallery-card .g-label b{color:var(--hd);}
:root[data-theme="dark"] .gallery-nav button{background:var(--card); color:var(--hd); border-color:rgba(255,255,255,.3);}
:root[data-theme="dark"] .skill-card,
:root[data-theme="dark"] .map-card{background:var(--card); border-color:rgba(255,255,255,.14);}
:root[data-theme="dark"] .map-card .mb span{color:#fff;}
:root[data-theme="dark"] .shop-art.photo{background:#1a2446;}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{background:#0B1226; color:#fff; border-color:rgba(255,255,255,.28);}
:root[data-theme="dark"] .field select option{background:#0B1226; color:#fff;}
:root[data-theme="dark"] ::placeholder{color:rgba(255,255,255,.55);}
:root[data-theme="dark"] .field label{color:#fff;}
:root[data-theme="dark"] .top-chip,
:root[data-theme="dark"] .portal-tab,
:root[data-theme="dark"] .p-exam button{color:#fff;}
:root[data-theme="dark"] .top-chip.on,
:root[data-theme="dark"] .portal-tab.active,
:root[data-theme="dark"] .p-exam button.on{color:#fff;}
:root[data-theme="dark"] .qty button,
:root[data-theme="dark"] .shop-sizes button{color:#fff;}
:root[data-theme="dark"] .shop-sizes button.on{background:var(--gold); border-color:var(--gold); color:#0F2047;}
:root[data-theme="dark"] .shop-price-tag{background:var(--red); color:#fff;}
:root[data-theme="dark"] .sheet{background:#0B1226; color:#fff;}
:root[data-theme="dark"] .btn-dark{background:var(--navy); color:#fff;}
:root[data-theme="dark"] .btn-dark:hover{background:var(--red);}
:root[data-theme="dark"] .btn-primary{color:#fff;}
:root[data-theme="dark"] .btn b,
:root[data-theme="dark"] .btn strong{color:inherit;}
:root[data-theme="dark"] .wa-float .wa-tip,
:root[data-theme="dark"] .tt-float .tt-tip{background:#fff; color:#12203F;}
:root[data-theme="dark"] .tt-btn{background:#fff; color:#0b0b10;}
:root[data-theme="dark"] .sk-zoom{color:#12203F;}
:root[data-theme="dark"] .ribbon-tag{color:#0F2047;}
:root[data-theme="dark"] .top-card .medal{color:#0F2047;}
:root[data-theme="dark"] .gal figure{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); color:#fff;}
:root[data-theme="dark"] .gal figure.sk-fig figcaption{color:var(--hd);}
:root[data-theme="dark"] .news-body p,
:root[data-theme="dark"] .testi-card p.body{color:#fff;}
:root[data-theme="dark"] .testi-person b{color:var(--hd) !important;}
:root[data-theme="dark"] .testi-person span{color:#fff !important;}
:root[data-theme="dark"] .shop-bar b{color:var(--hd);}
:root[data-theme="dark"] .sum b{color:var(--hd);}
:root[data-theme="dark"] .line .amt{color:#fff;}
:root[data-theme="dark"] .err-msg,
:root[data-theme="dark"] .shop-err{color:#FF8A8A;}
:root[data-theme="dark"] a:not(.btn):hover{color:var(--hd);}
:root[data-theme="dark"] footer,
:root[data-theme="dark"] footer p,
:root[data-theme="dark"] footer li,
:root[data-theme="dark"] footer span{color:#fff;}
:root[data-theme="dark"] footer h5{color:var(--hd);}
:root[data-theme="dark"] footer a{color:#fff;}
:root[data-theme="dark"] footer a:hover{color:var(--hd);}

/* header and photo overlays stay white on photos; their headings go yellow */
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .story-hero h1{color:var(--hd);}
:root[data-theme="dark"] .hero p,
:root[data-theme="dark"] .story-hero p,
:root[data-theme="dark"] .hero .lede{color:#fff;}
:root[data-theme="dark"] .mobile-menu a{color:#fff;}
:root[data-theme="dark"] .cta-banner h3{color:var(--hd);}
:root[data-theme="dark"] .cta-banner p{color:#fff;}

/* the printable report card is paper: keep it dark on white even in dark mode */
:root[data-theme="dark"] .pc-sheet{--ink:#12203F; --ink-soft:#4C5A78; --fg:#12203F; color:#12203F;}
:root[data-theme="dark"] .news-body a{color:var(--hd);}
:root[data-theme="dark"] .news-date,
:root[data-theme="dark"] .term-pill{color:#fff;}