/* ============================================================
   HaulIQ — day / night switch

   Standalone so it can ride in six different headers: the pill
   bar on the marketing pages, the sidebar on the dashboard, the
   plain <nav> on payment/reset, the split-screen panels on
   login/signup. Every page that wants it needs three things:

     <link rel="stylesheet" href="brand/theme-switch.css">
     <script src="brand/theme.js"></script>      (in <head>)
     the .hq-theme button markup, anywhere

   theme.js binds every .hq-theme on the page by itself — there
   is no per-page wiring to forget.
   ============================================================ */

/* A real switch rather than an icon button: both faces stay on the
   track so the control reads as a state, and the lime knob parks
   over whichever side is live. */
.hq-theme{
  position:relative; flex-shrink:0;
  width:58px; height:30px; padding:0;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface-sunk); cursor:pointer;
  display:inline-flex; align-items:center;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.hq-theme:hover{ border-color:var(--border-strong); }
.hq-theme:focus-visible{ outline:2px solid var(--brand-text); outline-offset:3px; }

/* the knob — sits under the faces, slides between them */
.hq-theme::after{
  content:''; position:absolute; top:2px; left:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--brand); box-shadow:var(--shadow-brand);
  transform:translateX(28px);            /* midnight: over the moon */
  transition:transform .3s var(--ease), background .22s var(--ease);
}
[data-theme="light"] .hq-theme::after{ transform:translateX(0); }

/* faces ride above the knob so the live one reads against lime */
.hq-theme svg{
  position:absolute; top:50%; z-index:1; width:14px; height:14px;
  transform:translateY(-50%); color:var(--text-faint);
  transition:color .22s var(--ease); pointer-events:none;
}
/* 7px, not 9px: the knob is 24px parked at 2px, so its centre sits at
   14px in and 14px from the far edge. The faces have to land on that
   centre or the lit one reads off-axis inside the lime. */
.hq-theme .hq-sun{ left:7px; }
.hq-theme .hq-moon{ right:7px; }
.hq-theme .hq-moon{ color:var(--text-invert); }
[data-theme="light"] .hq-theme .hq-moon{ color:var(--text-faint); }
[data-theme="light"] .hq-theme .hq-sun{ color:var(--text-invert); }

/* Login and signup are full-bleed split screens with no header to
   sit in, so the switch docks to the top corner instead. Only used
   where there is genuinely no other slot. */
.hq-theme-dock{ position:fixed; top:20px; right:20px; z-index:60; }
@media(max-width:520px){ .hq-theme-dock{ top:14px; right:14px; } }

/* Two lockups, one shown at a time. The class names the GROUND the
   mark is cut for — .hq-logo-dark is the white lockup, for a dark
   ground; .hq-logo-light is the ink one, for paper. Normally the
   ground follows the theme, so the theme picks the mark. Applies to
   any logo pair on the site, not just the pill bar's.

   Qualified with img so these outrank the bar's own `.hq-brand img`
   (nav.css) — a bare class loses that tie-break and BOTH marks paint. */
img.hq-logo-light{ display:none; }
[data-theme="light"] img.hq-logo-light{ display:block; }
[data-theme="light"] img.hq-logo-dark{ display:none; }

/* …except where a block deliberately runs against the page — the
   editorial footer is paper on midnight and midnight on paper. Its
   ground is the opposite of the theme, so the pair flips with it.
   Mark the block .hq-invert and the right mark shows both ways. */
.hq-invert img.hq-logo-dark{ display:none; }
.hq-invert img.hq-logo-light{ display:block; }
[data-theme="light"] .hq-invert img.hq-logo-dark{ display:block; }
[data-theme="light"] .hq-invert img.hq-logo-light{ display:none; }

@media(prefers-reduced-motion:reduce){
  .hq-theme,.hq-theme svg,.hq-theme::after{ transition:none; }
}