/* gabion theme: light palette, theme switch, mobile fixes. Shared by every page, loaded after the page styles.
   Light is the default (set before first paint in each page's <head>), dark is the option. Light keeps the brand lime as a fill or marker and never as text on a light ground. */

/* ---------- light palette ---------- */
html[data-theme="light"]{
  --ink:#F3F1EC; --ink-2:#EAE7E0;
  --panel:rgba(255,255,255,.74);
  --line:rgba(6,6,8,.10); --line-2:rgba(6,6,8,.24);
  --fg:#0B0B0E; --body:#2C2B29; --mute:#4E4C48; --dim:#6F6C67;
  --amber:#0B0B0E; --lime:#D2FE05;
  --ice:#1F6FA8; --violet:#5B47C4; --mint:#127A55; --up:#127A55; --down:#C2334B; --orange:#B5521E;
  color-scheme:light;
}
html[data-theme="light"],html[data-theme="light"] body{background-color:var(--ink)}
html[data-theme="light"] ::selection{background:rgba(210,254,5,.6);color:#0B0B0E}

/* headings: the accent word sits on a lime marker, text stays dark */
html[data-theme="light"] :is(h1,h2,.h1,.h2) em{
  color:#0B0B0E;background:var(--lime);padding:0 .1em;margin:0 -.04em;text-shadow:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone
}

/* the giant 404: a lime band under the zero instead of a full block */
html[data-theme="light"] h1#n em{background:linear-gradient(transparent 64%,var(--lime) 64%,var(--lime) 86%,transparent 86%);padding:0;margin:0}

/* fills that are lime in dark stay lime in light, with dark text on top */
html[data-theme="light"] .btn::after,
html[data-theme="light"] .chip[aria-pressed="true"]{background:var(--lime)}
html[data-theme="light"] .chip[aria-pressed="true"]{border-color:var(--lime);color:#0B0B0E}
html[data-theme="light"] .btn:hover,html[data-theme="light"] .btn:focus-visible{color:#0B0B0E}
html[data-theme="light"] .tg.live{background:var(--lime);border-color:var(--lime);color:#0B0B0E}
html[data-theme="light"] .brand small{border-color:rgba(6,6,8,.3)}

/* bars and sheets that were near-black glass */
html[data-theme="light"] :is(.top,.hdr){background:rgba(243,241,236,.9)}
html[data-theme="light"] .sheet{background:rgba(243,241,236,.96)}
html[data-theme="light"] dialog.wd{background:#FBFAF7}
html[data-theme="light"] dialog.wd::backdrop{background:rgba(6,6,8,.4)}
html[data-theme="light"] :is(.inp,.hex,.msg,.code:not(:has(pre))){background:rgba(255,255,255,.7)}
html[data-theme="light"] .sr{background:rgba(6,6,8,.35)}
html[data-theme="light"] .sr-box{background:#FBFAF7;box-shadow:0 20px 60px rgba(6,6,8,.18)}
html[data-theme="light"] .marquee{background:transparent}
html[data-theme="light"] .side{background:var(--ink)}

/* the logo is never placed on a light ground: in light it sits on its dark app-icon tile (Identity Spec) */
html[data-theme="light"] .brand .mark{
  box-sizing:content-box;padding:4px;margin:-4px 0;border-radius:6px;background:#060608;color:#ECE8E1
}

/* terminal-like islands stay dark in light mode: code, figures, the lens, brand previews */
html[data-theme="light"] :is(.code:has(pre),.ep,.fig,.box:has(.ln-stage),.banner,.kit .pv,.anat,.dd svg,.sonar){
  --ink:#060608; --ink-2:#0c0c10; --panel:rgba(13,13,17,.66);
  --line:rgba(236,232,225,.09); --line-2:rgba(236,232,225,.24);
  --fg:#ECE8E1; --body:#B9B5AE; --mute:#8D8A85; --dim:#55534F;
  --amber:#D2FE05; --ice:#9FD8FF; --violet:#B7A4FF; --mint:#7BE3B6; --up:#4CC38A; --down:#F2647A; --orange:#FF9A6B;
  color-scheme:dark
}
html[data-theme="light"] .dd figure.lt svg{background:#ECE8E1}
html[data-theme="light"] :is(.box:has(.ln-stage),.banner){background-color:#09090c;color:var(--fg)}

/* inline accent colors set to lime (section and product colors) read as dark text in light */
html[data-theme="light"] [style*="#D2FE05" i]{--c:var(--fg)!important}
html[data-theme="light"] :is(.code:has(pre),.fig,.banner,.box:has(.ln-stage)) [style*="#D2FE05" i]{--c:#D2FE05!important}
/* the same for the near-white accent (terminal sidebar: Access) */
html[data-theme="light"] [style*="#ECE8E1" i]{--c:var(--fg)!important}
html[data-theme="light"] :is(.code:has(pre),.fig,.banner,.box:has(.ln-stage)) [style*="#ECE8E1" i]{--c:#ECE8E1!important}
/* pastel product colors used as text (landing rotator): same hue, dark enough to read on paper */
html[data-theme="light"] .ch{color:color-mix(in srgb,var(--c,var(--fg)) 40%,#0B0B0E)}
html[data-theme="light"] .ch::before{box-shadow:none}
/* docs, Identity Spec: the Geist Mono sample had a fixed light color */
html[data-theme="light"] .typo .t3{color:var(--body)}

/* full-screen canvases: the shared background reads the theme itself (bg.js); the landing hero and the 404 ping are inverted */
html[data-theme="light"] #gl,html[data-theme="light"] #ldc,html[data-theme="light"] canvas#c{filter:invert(1) hue-rotate(180deg) brightness(.985) contrast(.96)}

/* ---------- theme switch ---------- */
.mk-theme,.mk-theme *{box-sizing:border-box}
.mk-theme{
  position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:-10px -4px;padding:0;
  border:0;background:none;color:var(--mute);cursor:pointer;-webkit-tap-highlight-color:transparent
}
.mk-theme .mk-tr{
  position:relative;display:block;width:38px;height:20px;border:1px solid var(--line-2);border-radius:999px;
  transition:border-color .3s,background-color .3s
}
.mk-theme .mk-tr svg{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;opacity:.55}
.mk-theme .mk-tr .mk-su{left:5px}
.mk-theme .mk-tr .mk-mo{right:5px}
.mk-theme .mk-kn{
  position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg);
  transition:transform .35s cubic-bezier(.19,1,.22,1),background-color .3s
}
.mk-theme[aria-checked="true"] .mk-kn{transform:translateX(18px)}
.mk-theme:hover .mk-tr,.mk-theme:focus-visible .mk-tr{border-color:var(--fg)}
.mk-theme:focus-visible{outline:none}
.mk-theme:focus-visible .mk-tr{outline:2px solid var(--fg);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mk-theme .mk-kn{transition:none}}

/* where the switch sits on each page */
.top:has(> .mk-theme){grid-template-columns:auto minmax(0,1fr) auto auto}
.top > .mk-theme{justify-self:end;align-self:center}
.tlinks .mk-theme{margin:-12px -6px -12px 0}
.hdr-r .mk-theme{margin:-10px -2px}
.top:has(> .code + .mk-theme){justify-content:flex-start;gap:14px}
.top > .code:has(+ .mk-theme){margin-left:auto}

/* 404: "Tap" on touch screens, "Click" elsewhere */
.hint .h-tap{display:none}
@media (hover:none){.hint .h-click{display:none}.hint .h-tap{display:inline}}

/* menu open: the page behind does not scroll */
html.mk-lock,html.mk-lock body{overflow:hidden}

/* ---------- mobile fixes ---------- */
@media (max-width:900px){
  /* 16px stops iOS from zooming into a field on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select{font-size:16px!important}

  /* touch targets: at least 44px tall */
  .menu-btn{min-height:44px}
  .close,.wd-x{min-height:44px;padding:0 4px;margin-bottom:8px}
  #accCopy{min-height:44px}
  .snd{min-height:44px}
  .social{gap:0}
  .social a{min-width:40px;min-height:44px;align-items:center;justify-content:center}
  .social .snd{margin-left:6px}
  .top:has(> .mk-theme){align-items:center}
  .hdr-r{gap:8px}
  .rail nav a{display:inline-flex;align-items:center;min-height:44px}
  .tabs-mini a,.nav-cta a{min-height:44px}

  /* terminal: Home, Quantum Risk and Docs stay reachable; the header no longer sticks */
  .top:has(.tlinks){position:relative;grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .tlinks{display:flex!important;grid-column:1/-1;grid-row:2;justify-content:flex-start;align-items:center;gap:22px;margin:0 0 -8px}
  .tlinks a{display:inline-flex;align-items:center;min-height:40px}
  .tlinks .mk-theme{margin-left:auto}
}

/* small labels on phones: nothing under 10px, and the most-read ones at 11px */
@media (max-width:640px){
  :is(.tg,.tag,.tab,.chip,.venues .lab,.cols span,.p-foot span){font-size:10px}
  :is(.spec dt,.specs dt,dl dt,.k,.ttl,.eyebrow,.crumb){font-size:11px}
}

/* very small phones (320px) */
@media (max-width:480px){
  .hdr-r .home{display:none}
}
@media (max-width:360px){
  .top:has(.tlinks) .brand small{display:none}
  .hdr{gap:8px}
  .social a{min-width:34px}
  .social .snd{margin-left:2px;padding-left:10px}
  .tiers th,.tiers td{padding-left:8px;padding-right:8px}
}
@media (max-width:340px){
  .hdr .word{display:none}
}