/* mineral.watch — light theme + the menu-bar theme button (see assets/mw-theme.js)
 *
 * Linked on every page just before the page's own <style>. html[data-theme=light] outranks the
 * page's :root, so the neutrals below win; each page then sets its own light accents in an
 * html[data-theme=light] rule right after its :root (accent shades darkened to ~4.6:1 on --bg).
 * Component rules here only replace the dark literals the pages hard-code.
 */
html[data-theme=light]{
  --bg:#f6f8fa;--bg2:#eef2f6;--card:#fff;--line:#d5dce3;
  --ink:#1b2330;--txt:#1b2330;--muted:#57606a;
  color-scheme:light;
}

/* ---------- theme button (both themes) ---------- */
.nav-theme{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:99px;color:var(--muted);background:transparent;border:1px solid var(--line);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:color .15s ease,border-color .15s ease,background .15s ease}
.nav-theme:hover,.nav-theme:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--card)}
.nav-theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-theme svg{grid-area:1/1;width:15px;height:15px;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s ease}
/* dark shows the sun (switch to light), light shows the moon */
.nav-theme .i-moon,html[data-theme=light] .nav-theme .i-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
html[data-theme=light] .nav-theme .i-moon{opacity:1;transform:none}
/* where it ends the bar (pricing, terms, data, explorer, supply chain, 404) it sits at the right edge;
   on the dashboards and the homepage the page's .nav-here+* rule does that */
.nav-inner>.nav-theme:last-child{margin-left:auto}
/* pricing, terms and data scroll their link row sideways on phones: the button stays pinned at the right edge */
.nav-theme{position:sticky;right:0;z-index:1;background:var(--bg)}
.nav-inner:has(> a.link:not(.back)) > .nav-theme{box-shadow:0 0 0 4px var(--bg),18px 0 0 6px var(--bg),-16px 0 12px 2px var(--bg)}
/* the extra button costs 40px: on the narrowest phones the long dashboard titles (Platinum group metals) give a little back */
@media(max-width:379px){nav .nav-inner{gap:5px}.nav-theme{width:30px;height:30px}nav div.brand{font-size:.8rem;margin-right:0;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.nav-theme svg{transition:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- menu-bar call to action, a.cta (both themes): tap target, focus ring, arrow ---------- */
nav a.cta{display:inline-flex;align-items:center;gap:6px;min-height:32px}
nav a.cta::after{content:"→";display:inline-block;font-weight:700;transition:transform .25s ease}
nav a.cta:hover::after,nav a.cta:focus-visible::after{transform:translateX(3px)}
nav a.cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:379px){nav a.cta{padding-left:11px;padding-right:11px}nav a.cta::after{display:none}}
@media(prefers-reduced-motion:reduce){nav a.cta::after{transition:none}}

/* ---------- light: shared chrome ---------- */
html[data-theme=light] nav{background:rgba(246,248,250,.9)}
html[data-theme=light] .nav-menu{background:rgba(246,248,250,.97);box-shadow:0 28px 48px -28px rgba(27,35,48,.28)}
/* the dot-globe logo keeps its dark disc and lime in both themes */
html[data-theme=light] a.brand svg{--accent:#c8ff6b}
html[data-theme=light] .sub-form,html[data-theme=light] .mw-wall-form,html[data-theme=light] .about-form,html[data-theme=light] .wait-form{color-scheme:light}
html[data-theme=light] .mw-wall{box-shadow:0 30px 60px -30px rgba(27,35,48,.3)}
/* active chips filled with a (darkened) accent; the supply-chain layer and bloc chips stay card-coloured */
html[data-theme=light] .chip.on:not(.layer):not(.bloc){color:#fff}
html[data-theme=light] .leaflet-popup .pp-tag{color:var(--txt)!important}
html[data-theme=light] .leaflet-container{background:#e8ebee}

/* ---------- light: dashboards ---------- */
/* photo hero: a pale wash instead of the dark scrim, still tinted with the page accent */
html[data-theme=light] .hero-wrap .hero-bg{filter:grayscale(1) brightness(1.05) contrast(.95);opacity:.5}
html[data-theme=light] .hero-wrap .hero-tint{opacity:.3}
html[data-theme=light] .hero-wrap .hero-scrim{background:
  linear-gradient(90deg,rgba(246,248,250,.94) 0%,rgba(246,248,250,.72) 55%,rgba(246,248,250,.5) 100%),
  linear-gradient(180deg,rgba(246,248,250,.7) 0%,rgba(246,248,250,0) 35%,rgba(246,248,250,0) 68%,var(--bg) 100%)}
html[data-theme=light] .hero-wrap .stat{background:rgba(255,255,255,.78)}
html[data-theme=light] .hero-wrap .hero p{color:#3d4651}
html[data-theme=light] .bar-row .fill{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff))}
/* "how it works" flow diagrams */
html[data-theme=light] .fb{fill:var(--card);stroke:var(--line)}
html[data-theme=light] .ft{fill:var(--txt)}
html[data-theme=light] .fs{fill:var(--muted)}
html[data-theme=light] .fl{stroke:var(--muted)}
html[data-theme=light] .fe{fill:var(--accent)}
html[data-theme=light] .lab,html[data-theme=light] .fg,html[data-theme=light] .lab2{fill:var(--accent2)}
html[data-theme=light] #ah path,html[data-theme=light] marker path{fill:var(--muted)}