/* theme-dark.css — puts every page in the homepage's dark look.
   Loaded after each page's own <style>: the older pages are all built on the same
   variables (--paper, --ink, --red, --muted, --hair, --film, --warm …), so remapping
   those carries the whole page across. Homepage palette: #111 ground, #f2f2f2 ink,
   app orange (#c2410c behind white text, #f06a23 for accents on dark). */
:root{
  --paper:#111111; --paper2:#1b1b1b; --warm:#1b1b1b; --film:#1b1b1b;
  --ink:#f2f2f2; --muted:#b3b3b3; --hair:#2a2a2a;
  --red:#f06a23; --green:#5cbf75;
  --serif:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* help.html's own set */
  --bg:#111111; --panel:#1b1b1b; --panel2:#262626; --line:#2a2a2a; --text:#f2f2f2; --orange:#f06a23;
  color-scheme:dark;
}
html,body{background:#111111;color:#f2f2f2}
body{font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif}
h1,h2,h3,h4{letter-spacing:-0.02em}
::selection{background:#f2f2f2;color:#111111}

/* primary buttons: the app's orange with white text, like the homepage */
.btn-ink,.btn.btn-ink,a.btn-ink,button.btn-ink,.btn-primary,.cta-btn{background:#c2410c!important;color:#ffffff!important;border-color:#c2410c!important}
.btn-ink:hover,.btn.btn-ink:hover,.btn-primary:hover,.cta-btn:hover{background:#a8380a!important}
.btn-line,.btn-ghost{border-color:#3a3a3a!important;color:#f2f2f2!important}
.btn-paper{background:#f2f2f2!important;color:#111111!important}

/* form fields read on dark */
input,textarea,select{background:#1b1b1b;color:#f2f2f2;border-color:#3a3a3a}
input::placeholder,textarea::placeholder{color:#8c8c8c}

/* links in running text stay readable */
main a:not(.btn):not(.btn-ink):not(.btn-line),article a:not(.btn){color:#f06a23}

/* colours some pages hard-code (now variables with the old value as fallback) */
:root{ --soft:#d6d6d6; --soft2:#dcdcdc; --headbg:rgba(17,17,17,.92); }
th{background:#1b1b1b!important;color:#f2f2f2}
td{border-color:#2a2a2a}
.callout,[style*="#EAE3D4"]{background:#1b1b1b!important}
input[type=text],input[type=email],input[type=password],select,textarea{background:#1b1b1b!important;color:#f2f2f2!important;border-color:#3a3a3a!important}
.chip{background:#1b1b1b!important;color:#f2f2f2}
.chip.on,.chip:has(input:checked){background:#c2410c!important;border-color:#c2410c!important;color:#fff}
/* one typeface everywhere, help centre's headings included */
h1,h2,h3,h4,.wm{font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif!important;font-style:normal}
/* iPhone page: its dark strip and footer used --paper as text colour */
.strip,.strip .n{color:#f2f2f2}
.strip .c{color:#8c8c8c!important}
footer .wm,footer h5,footer .fcol a:hover{color:#f2f2f2}

/* the homepage's header and footer, shared by every page (classes kept apart from each
   page's own header/footer/nav rules so those can't restyle them) */
.vbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(16px,3vw,48px);background:#111111;font-family:"Instrument Sans",system-ui,sans-serif;position:relative;z-index:20}
.vbar .vmark{font-weight:600;font-size:22px;letter-spacing:-0.03em;text-decoration:none;color:#f2f2f2!important}
.vbar .vmark b{color:#c2410c}
.vbar .vlinks{display:flex;align-items:center;gap:26px;font-size:14px}
.vbar .vlinks a{text-decoration:none;color:#b3b3b3!important;transition:color .15s;border:0;background:none;padding:0}
.vbar .vlinks a:hover{color:#f2f2f2!important}
.vbar .vlinks a.vstart{background:#c2410c!important;color:#fff!important;font-weight:600;padding:11px 16px;border-radius:8px}
.vbar .vlinks a.vstart:hover{background:#a8380a!important}
.vfoot{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:end;padding:96px clamp(16px,3vw,48px) 32px;font:14px/1.5 "Instrument Sans",system-ui,sans-serif;color:#b3b3b3;background:#111111}
.vfoot .vlinks2{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.vfoot a{color:#f2f2f2!important;text-decoration:none}
.vfoot a:hover{text-decoration:underline}
.vfoot .r{text-align:right}
@media (max-width:640px){
  .vbar .vlinks .vhide{display:none}
  .vbar .vmark{font-size:20px}
  .vfoot{grid-template-columns:1fr;gap:10px;padding-top:72px}
  .vfoot .vlinks2{justify-content:flex-start}
  .vfoot .r{text-align:left}
}
/* plain .btn is the primary action on the older pages: orange like the homepage, not white */
.btn:not(.ghost):not(.btn-line):not(.btn-ghost):not(.btn-paper){background:#c2410c!important;color:#fff!important;border-color:#c2410c!important}
.btn:not(.ghost):not(.btn-line):not(.btn-ghost):not(.btn-paper):hover{background:#a8380a!important}
.btn.ghost{color:#f2f2f2!important}