/* Midnight / Ice: shared screen colours for hubs, guides and local previews.
   Light-mode and print colours remain owned by their existing styles. */
/* Keep touch form controls above iOS Safari's focus-zoom threshold without disabling zoom.
   Root specificity preserves this floor when page-specific styles load after the theme. */
@media screen and (pointer: coarse) {
  :root body select,
  :root .setup input[type=date],
  :root .calc input:not([type=range]){font-size:16px}
}
@media screen {
  :root:not([data-theme="light"]){
    --bg:#101827;--panel:#182438;--panel-2:#223149;--band:#0c1320;
    --text:#f2f6fb;--muted:#b0bed1;--muted-2:#97a8bf;
    --accent:#9dd7ff;--accent-hover:#d4edff;--on-accent:#101827;
    --accent-soft:rgba(157,215,255,.10);--accent-border:rgba(157,215,255,.45);
    --border:#344459;--border-strong:#536984;--hl:rgba(157,215,255,.06);
    --glow:radial-gradient(closest-side,rgba(157,215,255,.14),transparent);
    --canvas:var(--bg);--surface:var(--panel);--card:var(--panel-2);
    --hair:var(--border);--ink:var(--text);--body:var(--muted);
    --line:var(--border);--radius:12px;--radius-sm:8px;
  }
  :root{--c1:#9dd7ff;--c2:#537aa3;--c3:#24394f}
  body{background:var(--bg);color:var(--text)}
  :root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2{text-transform:none;line-height:1.05}
  nav.top{background:color-mix(in srgb,var(--bg) 90%,transparent)}
  .mark i{background:var(--accent)}
  .nav .brand-mark{padding:0;justify-content:center;color:var(--on-accent)}
  .nav .brand-mark:hover{background:var(--accent-hover);color:var(--on-accent)}
  nav.top .langs a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
  .tab[aria-selected=true]{border-bottom-color:var(--accent)}
  html:not([data-theme]) .red{color:var(--accent)}
  .k::before{background:var(--accent)}
  .cta{border-radius:8px}
  .cta.fill,.cta:not(.text):hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .cta.fill:hover{background:var(--accent-hover)}
  nav.top + .hero{background:var(--bg)}
  .hero .glow{background:radial-gradient(45% 55% at 68% 60%,rgba(157,215,255,.15),transparent 70%)}
  .hero .fade,[dir=rtl] .hero .fade{background:linear-gradient(var(--hero-direction,90deg),var(--bg) 26%,color-mix(in srgb,var(--bg) 85%,transparent) 40%,color-mix(in srgb,var(--bg) 25%,transparent) 62%,transparent 80%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent),transparent 25%,transparent 55%,var(--bg))}
  [dir=rtl]{--hero-direction:270deg}
  .ctaband::before{background:radial-gradient(40% 60% at 50% 100%,rgba(157,215,255,.13),transparent 70%)}
  .hero-bg::after{opacity:.15}
  @media(max-width:720px){
    .hero .fade,[dir=rtl] .hero .fade{background:linear-gradient(180deg,var(--bg) 18%,color-mix(in srgb,var(--bg) 35%,transparent) 45%,color-mix(in srgb,var(--bg) 35%,transparent) 60%,var(--bg) 88%)}
  }
}