/* Runverra top-bar tools (sound, light/dark, language) and the hand-tuned light-mode fixes. Loaded last on every page, after the
   generated light layer (lib/theme-light.mjs -> theme-home.css on the home page, /assets/theme-sub.*.css on the others).
   Dark is the default. 2026-10-20 header tidy-up (Matt, via Vision):
   desktop  Services · Portfolio · About | Call us | Get a free demo | [ ♪ ☾ EN ] | Menu   (one rounded group, three icon buttons)
   phones   Call us · Get a free demo · ♪ · Menu   (the menu's top row has [☾ Dark/Light] [EN] next to Close) */

/* ---------- shared: the light/dark switch (icon shows the current mode: moon while dark, sun while light) ---------- */
.thm{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;padding:0;background:transparent;color:inherit;
  border:1px solid currentColor;cursor:pointer;transition:background-color .25s,color .25s}
.thm svg{width:16px;height:16px;display:block;flex:none}
.thm .thm__sun,html[data-theme="light"] .thm .thm__moon{display:none}
html[data-theme="light"] .thm .thm__sun{display:block}
.thm:focus-visible,.lang:focus-visible{outline:2px solid #FF5A1F;outline-offset:3px}
/* the language button is a placeholder until the language switch ships: plain "EN", aria-disabled, "More languages coming soon" */
.lang{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;background:transparent;color:inherit;border:1px solid transparent;
  font:600 12px/1 "DM Sans",Sans,var(--sans,sans-serif);letter-spacing:.06em;cursor:not-allowed;opacity:.78}
@media (prefers-reduced-motion:reduce){.thm{transition:none}}

/* ---------- top bar: the tools group ---------- */
/* (sound.js shows the sound button, adds its music note and its aria-label "Turn sound on/off"; its slow ember glow pulse comes
   from gallery.css / v3-sub.css and stays as it is) */
.nav__tools{display:inline-flex;align-items:center;flex:none}
.nav .snd{width:36px;height:36px;padding:0;gap:0;justify-content:center;border-radius:50%;flex:none}
.nav .snd .snd__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav .snd .snd__bars{display:none}
.nav .snd .snd__note{display:block}
.nav .snd[aria-pressed="true"] .snd__note{color:#FF5A1F}
html[data-theme="light"] .nav .snd[aria-pressed="true"] .snd__note{color:#C73400}
/* phones and tablets: only the sound button shows in the bar; light/dark and language live in the menu */
.nav__tools .nav__thm,.nav__tools .nav__lang{display:none}
/* desktop: one rounded outline around three equal icon buttons */
@media (min-width:1024px){
  .nav__tools{gap:4px;padding:2px;border:1px solid rgba(250,248,244,.55);border-radius:999px}
  .nav__tools .nav__thm,.nav__tools .nav__lang{display:inline-flex}
  .nav__tools .snd,.nav__tools .nav__thm,.nav__tools .nav__lang{width:32px;height:32px;border-radius:50%}
  .nav__tools .nav__thm{border-color:transparent!important}
  /* the sound button's own ring and fill come from several !important rules (gallery.css, v3-sub.css, the light layer); the id wins over
     all of them, so inside the group it is a plain icon like the other two. Its glow pulse (box-shadow) stays. */
  .nav__tools #snd{border-color:transparent!important;background:transparent!important}
  .nav .nav__tools .nav__thm,.nav .nav__tools .nav__lang{color:#FAF8F4}
  .nav__tools .nav__thm:hover{background:rgba(250,248,244,.14)}
  html[data-theme="light"] .nav__tools{border-color:rgba(20,20,20,.55)}
  html[data-theme="light"] .nav .nav__tools .nav__thm,html[data-theme="light"] .nav .nav__tools .nav__lang{color:#141414}
  html[data-theme="light"] .nav__tools .nav__thm:hover{background:rgba(20,20,20,.08)}
}
/* phones: logo, Call us, Get a free demo, sound and Menu stay on one line down to 360px ("Call us" keeps its word).
   Up to 480px, because between 401 and ~450px the Menu button would show its word again and push the bar past the edge;
   so Menu is the icon there too (as it already is at 400px and under) */
@media (max-width:480px){
  .nav .nav__menu{font-size:0!important;gap:0!important}
  .nav .nav__menu i{margin:0!important}
  .nav{padding-left:14px!important;padding-right:14px!important;gap:8px!important}
  .nav nav{gap:5px!important}
  .nav .nav__cta{font-size:13px!important}
  .nav .nav__call{padding:7px 9px!important;gap:5px!important}
  .nav .nav__cta:not(.nav__call){padding:8px 10px!important}
  .nav .nav__menu{min-width:40px!important;padding:9px!important}
  .nav .snd{width:34px;height:34px}
}

/* ---------- menu top row: brand ... [☾ Dark/Light] [EN] Close ---------- */
.thm--pill,.lang--pill{height:40px;padding:0 14px;border-radius:999px;font:500 14px/1 "DM Sans",Sans,var(--sans,sans-serif);white-space:nowrap}
.lang--pill{border-color:currentColor;font-weight:600;letter-spacing:.06em}
.thm--pill:hover{background:rgba(250,248,244,.12)}
html[data-theme="light"] .thm--pill:hover{background:rgba(20,20,20,.08)}
.rvm__top .thm--pill{margin:0 10px 0 auto}
.rvm__top .lang--pill{margin-right:12px}
/* the brand never touches the pills; on small phones the pills and Close are a little slimmer */
.rvm__top{gap:10px}
@media (max-width:400px){.rvm__top .thm--pill,.rvm__top .lang--pill{height:36px;padding:0 11px}.rvm__top .thm--pill{margin-right:6px}.rvm__top .lang--pill{margin-right:6px}.rvm__top .rvm__x{padding:9px 12px}}

/* ---------- light mode: spots the generated layer can't judge ---------- */
/* form fields: white wells with a 3:1 edge (#8A8379: 3.5:1 on paper, 3.8:1 on white) so each field is easy to find */
html[data-theme="light"] form.contact input,html[data-theme="light"] form.contact textarea,html[data-theme="light"] form.contact select{background:#FFFFFF!important;color:#141414!important;border-color:#8A8379!important}
html[data-theme="light"] body.g .quote input,html[data-theme="light"] body.g .quote select,html[data-theme="light"] body.g .quote textarea{background:#FFFFFF!important;color:#141414!important;border-color:transparent transparent #8A8379!important}
html[data-theme="light"] form.contact input:focus,html[data-theme="light"] form.contact textarea:focus,html[data-theme="light"] form.contact select:focus,
html[data-theme="light"] body.g .quote input:focus,html[data-theme="light"] body.g .quote select:focus,html[data-theme="light"] body.g .quote textarea:focus{border-color:#C73400!important}
html[data-theme="light"] form.contact ::placeholder,html[data-theme="light"] body.g .quote ::placeholder{color:#6B655D!important;opacity:1}
/* subpage top bar: the outlined Call us / Get a free demo pills need an edge on paper */
html[data-theme="light"] .rvc .nav .nav__cta{border-color:rgba(20,20,20,.7)!important}
/* the gallery's stacked panels: a softer lift on paper */
html[data-theme="light"] .gx+.gx{box-shadow:0 -24px 50px rgba(11,11,12,.12)}
/* outlined secondary buttons (Call us, See prices ...): a 3:1 edge on paper; the dark bands keep their own */
html[data-theme="light"] .btn.secondary:not(:hover):not(:is(.cine,.gx__frame,.car__media,.keep-dark) *),
html[data-theme="light"] body.g .btn-ghost:not(:hover):not(:is(.cine,.gx__frame,.car__media,.keep-dark) *){border-color:rgba(20,20,20,.62)!important}
/* 2026-10-20: the closing "stamp" wordmark (gallery.css): solid dark letters, a deeper ink red, darker cracks */
html[data-theme="light"] .stamp{color:#141414}
html[data-theme="light"] .stamp__r{color:#D93A12}
html[data-theme="light"] .stamp__cracks{opacity:.7}

html[data-theme="light"] body.g .ba .ba__facts{color:#55504A}