/* --glass is NOT overridden: it is the e-paper under the firmware frames, which are drawn with
   mix-blend-mode:multiply and would turn dark with it. The paper stays paper in both themes.
   Dark theme for every page. Tokens first; then the places the page styles paint white by hand.
   Device and phone mock-ups stay light on purpose: the case is white and e-paper is light in life. */
html[data-theme="dark"]{color-scheme:dark;
  --bg:#0E1512;--bg-2:#131C18;--mint:#15201B;--paper:#0E1512;--paper-2:#131C18;--card:#16201C;
  --ink:#E4ECE8;--ink-2:#A3B2AB;--line:#26332D;
  --green:#6DB38D;--green-ink:#8ECBA8;--green-soft:#1A2A22;--leaf-ink:#8ECBA8;--teal-ink:#8ECBA8;--teal:#6DB38D;
  --good-bg:#17281F;--warn-bg:#2E2114;--bad-bg:#2E1716}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] nav.top{background:rgba(14,21,18,.9);border-color:var(--line)}
html[data-theme="dark"] nav.top ul a,html[data-theme="dark"] .logo{color:var(--ink)}
html[data-theme="dark"] .hero.photo{background:var(--bg)}
html[data-theme="dark"] .hero.photo .bg{filter:brightness(.8) saturate(.95)}
html[data-theme="dark"] .hero.photo .fade{background:linear-gradient(90deg,#0E1512 0%,rgba(14,21,18,.95) 32%,rgba(14,21,18,.62) 45%,rgba(14,21,18,0) 58%)}
html[data-theme="dark"] .btn.line{background:transparent;border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .btn.text{color:var(--ink)}
html[data-theme="dark"] .chip{background:var(--card);border-color:var(--line);color:var(--ink-2)}
html[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#0E1512}
html[data-theme="dark"] .ticker,html[data-theme="dark"] footer,html[data-theme="dark"] .pathsrow{background:var(--bg)}
html[data-theme="dark"] .band,html[data-theme="dark"] .band[aria-pressed="true"],html[data-theme="dark"] .detail,
html[data-theme="dark"] .trust div,html[data-theme="dark"] .tile,html[data-theme="dark"] .feat,html[data-theme="dark"] .mode,
html[data-theme="dark"] .bf,html[data-theme="dark"] .offshot,html[data-theme="dark"] .chartcard,html[data-theme="dark"] .mount{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .homegrid figcaption{background:rgba(14,21,18,.88);color:var(--ink)}
html[data-theme="dark"] .meter i{background:var(--line)}
html[data-theme="dark"] .final::before{background:linear-gradient(180deg,#14231C,#0E1813)}
html[data-theme="dark"] .final{color:var(--ink);--text-d:#E4ECE8;--mute-d:#A3B2AB;--line-d:#2B3A33}
html[data-theme="dark"] .final .btn.line{color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] footer .logo{color:var(--ink)}
/* guide */
html[data-theme="dark"] .tocm{background:rgba(14,21,18,.94)}
html[data-theme="dark"] .results mark{background:#5A4A1C;color:#fff}
html[data-theme="dark"] .pill.new{background:#1B2C3D;color:#CFE3F5}
html[data-theme="dark"] .search input{background:var(--card);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .home{color:#0E1512}
/* legal pages */
html[data-theme="dark"] header,html[data-theme="dark"] footer{border-color:var(--line)}
html[data-theme="dark"] main p,html[data-theme="dark"] main li,html[data-theme="dark"] address{color:var(--ink-2)}
html[data-theme="dark"] main h1,html[data-theme="dark"] main h2,html[data-theme="dark"] main b{color:var(--ink)}
/* the switch itself */
.themebtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#E4EAE6);
  background:transparent;color:var(--ink,#18221E);cursor:pointer;flex:none;margin-left:10px}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.themebtn .moon{display:none}
html[data-theme="dark"] .themebtn .sun{display:none}
html[data-theme="dark"] .themebtn .moon{display:block}
/* sections built as ".dark" take their colours from these; the light theme sets them to white */
html[data-theme="dark"] .dark{--night:#131C18;--night-2:#16201C;--night-3:#131C18;--text-d:#E4ECE8;--mute-d:#A3B2AB;--line-d:#26332D;background:var(--bg-2);color:var(--ink)}
/* the guide's header carries the switch too; on a phone the link shortens so both fit */
@media (max-width:480px){.home .long{display:none}.home{padding:11px 14px!important}.themebtn{margin-left:8px;width:36px;height:36px}}
@media (max-width:380px){nav.top .logo small{display:none}}
/* 320-360 px: logo, link and switch do not fit side by side; the wordmark gives way, the house stays */
@media (max-width:360px){nav.top .logo{font-size:0;gap:0}nav.top .logo small{display:none}}