/* Dark theme: tokens plus the hand-tuned rules the generator (theme-dark.css) can't decide. Light stays the default look.
   The palette is the 360 Apps obsidian identity (same values as the .sec-dark bands), not an inversion: obsidian page,
   slightly lifted surfaces, blue-tint links, the brand blue/cyan unchanged. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --field-bg: #161D27; --field-border: #6B7A90; --field-border-hover: #9AA6B8; --placeholder: #9AA6B8; --field-error: #F87171;
  --bg: #0B0E13; --cloud: #0B0E13;
  --surface: rgba(22, 27, 35, .86); --surface-solid: #161B23;
  --ink: #F1F4F9; --ink-2: #C9D1DE; --ink-3: #A3AEC0; --line: rgba(120, 190, 255, .18);
  --cobalt-deep: #8CC8FF;  /* links and accents: AA on obsidian (cobalt itself stays the button blue) */
  --ok: #4ADE80;
}
:root[data-theme="dark"] body, :root[data-theme="dark"] .subpage { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .btn-dark:hover, :root[data-theme="dark"] .btn-light:hover, :root[data-theme="dark"] .nav-links .nav-cta:hover,
:root[data-theme="dark"] .nav-cta-m:hover { background: #0B5CD6; }
:root[data-theme="dark"] .inq-result, :root[data-theme="dark"] .pv-close { background: #161B23; color: var(--ink); }

/* bands: the gallery's full-width wash is a box-shadow (the generator only maps backgrounds) */
:root[data-theme="dark"] .gallery { box-shadow: 0 0 0 100vmax rgba(11,14,19,.55); }
/* sub-pages have no phone menu: the switch sits in the bar, icons only */
.nav-theme-sub { margin-left: auto; }
.nav-theme-sub + .nav-cta-m { margin-left: 0; }
@media (min-width: 981px) { .nav-theme-sub { order: 2; margin-left: 8px; } .subpage .nav-links-sub { order: 1; } }

/* logos: ink artwork on light, the white artwork on dark */
/* !important: component rules such as .foot-logo img { display: block } must not show both; the visible one keeps its own display */
:root:not([data-theme="dark"]) .logo-dark, :root[data-theme="dark"] .logo-light { display: none !important; }

/* background canvas sits on obsidian: core glow a touch stronger */
:root[data-theme="dark"] .hud-core::before { background: #0B0E13; }

/* theme switch (nav on desktop, inside the menu panel on phones) */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; min-height: 30px; padding: 4px 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.theme-switch button span[aria-hidden] { font-size: 15px; line-height: 1; }
.theme-switch button[aria-pressed="true"] { background: var(--blue-fill); color: #fff; }
.theme-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--cobalt-soft); }
.theme-switch .ts-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-theme-li { display: flex; align-items: center; }
@media (max-width: 980px) {
  .nav-theme-li { padding: 10px 4px 4px; }
  .nav-theme-li .theme-switch { width: 100%; justify-content: stretch; }
  .nav-theme-li .theme-switch button { flex: 1; justify-content: center; min-height: 44px; }      /* full-size touch targets in the menu */
  .nav-theme-li .theme-switch .ts-label { position: static; width: auto; height: auto; clip: auto; }
}

/* blue cards (.svc, .pf-card ...) keep their light-theme look: white buttons with cobalt text */
:root[data-theme="dark"] :is(.svc, .why, .cz li, .proof, .proof-note, .quote, .pf-item, .pf-card, .sb-cfg, .sb-result) { --cobalt-deep: #0B5CD6; }
/* status labels: the .sec-dark versions */
:root[data-theme="dark"] .lab-ok { background: rgba(74,222,128,.14); color: #86EFAC; }
:root[data-theme="dark"] .lab-dev { background: rgba(120,190,255,.14); color: #A9D4FF; }
:root[data-theme="dark"] .lab-sim { color: var(--blue-tint); box-shadow: inset 0 0 0 1px rgba(120,190,255,.55); }
:root[data-theme="dark"] .lab-plan { background: rgba(255,255,255,.08); }

/* attention pulse: a soft breathing glow around the theme switch and "Start a project". Only box-shadow / opacity animate
   (no layout shift); the glow never takes clicks, and the focus outline is drawn outside it, so it stays visible.
   The switch uses a pseudo-element; the CTA animates its own box-shadow because fx.css already uses its ::after (hover
   shine, with overflow: hidden). Off for visitors who ask for reduced motion. */
.theme-switch { position: relative; }
.theme-switch::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(124,192,255,.75), 0 0 16px 2px rgba(22,119,255,.45); opacity: 0; animation: attn-pulse 3.2s ease-in-out infinite; }
@keyframes attn-pulse { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.nav-links .nav-cta, .nav-cta-m { animation: attn-glow 3.2s ease-in-out 1.6s infinite; }  /* takes turns with the switch */
@keyframes attn-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,192,255,0), 0 0 0 0 rgba(22,119,255,0); }
  50% { box-shadow: 0 0 0 3px rgba(124,192,255,.55), 0 0 18px 3px rgba(22,119,255,.45); } }
@media (prefers-reduced-motion: reduce) { .theme-switch::after { animation: none; opacity: 0; } .nav-links .nav-cta, .nav-cta-m { animation: none; } }

/* Phones only (<= 700px app shell, site.js initAppShell; Stage D 2026-10-29, brand blue per Boss): the top bar and the
   bottom navigation are the 360 Apps brand blue (--cobalt-hi #0B5CD6) in BOTH themes. Light tokens are re-scoped onto the
   two bars only, so the hero and every section keep their own theme. White text on #0B5CD6 = 5.98:1; tab labels
   #EAF2FF = 5.3:1; the active tab = bold + white top indicator + a light pill (4.78:1 on the pill), not colour alone.
   "Start a project" turns white with blue text (5.98:1) so it stays visible on the blue bar. Desktop never matches. */
@media (max-width: 700px) {
  html.m-app .topnav, html.m-app .m-tabbar {
    --ink: #FFFFFF; --ink-2: #EAF2FF; --ink-3: #EAF2FF; --line: rgba(255, 255, 255, .26);
    --surface: rgba(255, 255, 255, .12); --surface-solid: #0B5CD6; --cobalt: #FFFFFF; --cobalt-deep: #FFFFFF;
    --cobalt-soft: rgba(255, 255, 255, .12); color-scheme: dark; }
  /* the :root[data-theme="dark"].m-app selectors outrank the generated theme-dark.css bar rules */
  html.m-app .topnav, :root[data-theme="dark"].m-app .topnav { background: #0B5CD6; color: var(--ink); border-bottom-color: rgba(255, 255, 255, .22); }
  html.m-app .m-tabbar, :root[data-theme="dark"].m-app .m-tabbar { background: #0B5CD6; }
  html.m-app .topnav .nav-cta-m { background: #FFFFFF; color: #0B5CD6; }
  html.m-app .topnav .nav-cta-m:hover { background: #EAF2FF; color: #0B5CD6; }
  html.m-app .topnav .nav-cta-m:focus-visible, html.m-app .topnav .theme-switch :focus-visible { outline-color: #FFFFFF; }
  html.m-app:not([data-theme="dark"]) .topnav .logo-light { display: none !important; }
  html.m-app:not([data-theme="dark"]) .topnav .logo-dark { display: block !important; }
  /* phone header logo (Boss 2026-10-30): the same artwork with a thin black outline round the whole blue graphic (orbit +
     zero, both still blue), so it stays readable on the blue bar; desktop keeps logo-360-apps.webp */
  .topnav .logo-dark { content: url("/brand/logo-360-apps-mk.webp"); }
}

/* Android / installed app (2026-10-30): when the page is drawn under a status bar or display cutout (installed app,
   edge-to-edge browsers), the blue top bar grows by that inset so the logo and buttons stay below it. It is 0 in a normal
   browser tab and on iPhone Safari, so nothing moves there. The bottom bar already pads by safe-area-inset-bottom. */
@media (max-width: 700px) {
  html.m-app .topnav { padding-top: env(safe-area-inset-top, 0px); }
}