/* Shared by every page (landing, guides, privacy, terms, feedback, 404).
   Linked last in <head>. Holds what must look the same everywhere:
   the Light / Dark / System theme control, color-scheme, and the print sheet. */

/* ---- color-scheme follows the theme, so scrollbars, form controls and the
   canvas behind the page match it ---- */
:root{color-scheme:dark}
:root[data-theme='light']{color-scheme:light}

/* ---- logo: at phone width only the mark stays, the name is still read aloud ---- */
@media(max-width:420px){
  .logo-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---- theme control: Light / Dark / System ----
   A glass capsule with a sliding thumb. The head script writes data-theme-pref on
   <html> before first paint, so the thumb is already in place on load. Without
   JavaScript there is nothing to switch, so the control is not shown. */
.theme-seg{position:relative;display:inline-flex;flex:none;padding:2px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-edge)}
.theme-seg::before{content:'';position:absolute;top:2px;left:2px;width:30px;height:30px;border-radius:50%;
  background:var(--glass-hi);box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateX(60px);transition:transform .2s var(--ease-out,cubic-bezier(0.23,1,0.32,1))}
:root[data-theme-pref='light'] .theme-seg::before{transform:translateX(0)}
:root[data-theme-pref='dark'] .theme-seg::before{transform:translateX(30px)}
:root[data-theme-pref='system'] .theme-seg::before{transform:translateX(60px)}
.theme-seg button{position:relative;z-index:1;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer;transition:color .16s}
.theme-seg button[aria-pressed='true']{color:var(--ink)}
.theme-seg svg{display:block}
@media (hover:hover) and (pointer:fine){.theme-seg button:hover{color:var(--ink)}}
html:not(.js) .theme-seg{display:none}
/* the 250 ms colour fade rewrites every transition; keep the thumb's slide */
html.theme-fade .theme-seg::before{transition:transform .2s var(--ease-out,cubic-bezier(0.23,1,0.32,1)),background-color .25s var(--ease-out,cubic-bezier(0.23,1,0.32,1))!important}
@media (prefers-reduced-motion:reduce){
  .theme-seg::before,.theme-seg button{transition:none}
  html.theme-fade .theme-seg::before{transition:none!important}
}
@media (prefers-contrast:more){
  .theme-seg{border-color:var(--glass-edge)}
  .theme-seg::before{box-shadow:inset 0 0 0 1px var(--glass-edge)}
}
@media (forced-colors:active){
  .theme-seg{border:1px solid ButtonText}
  .theme-seg::before{background:Highlight;box-shadow:none}
  .theme-seg button{color:ButtonText}
  .theme-seg button[aria-pressed='true']{color:HighlightText}
}

/* ---- print: dark text on white, no decorative layers, nothing hidden by
   a scroll reveal. Answers in closed <details> are opened by site.js. ---- */
@media print{
  :root,:root[data-theme='light']{
    --bg:#fff;--bg2:#fff;--ink:#111;--ink2:#222;--ink3:#444;--brand:#0a5e45;--brand-ink:#0a5e45;
    --hr:#bbb;--glass-edge:#bbb;--border:#bbb;--box-ink:#111;--code-ink:#0a5e45;
    --glass:transparent;--glass-hi:#f1f1f1;--field:#fff;color-scheme:light}
  html,body{background:#fff!important;color:#111!important}
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none!important}
  .aura,.hills,.flies,#flies,header,.skip,.theme-seg,.win-dl-help,.win-dl-live,[data-win-note]{display:none!important}
  .pane,.glass,.parse,.hashbox,.mside,.mhero{background:none!important;border:0!important}
  .pane::before,.pane::after,.glass::before,.glass::after{display:none!important}
  .wrap{margin-top:0}
  .pane{padding:0!important}
  .rv{opacity:1!important;transform:none!important}
  .mock{transform:none!important;translate:none!important}
  .shot:has(.th-light) .th-dark{display:none!important}
  .shot .th-light{display:block!important}
  .shot,.box,details,.card,.t-item{break-inside:avoid}
  a{color:#0a5e45!important}
  /* privacy and terms: a printed link shows where it goes */
  [data-print-urls] a[href]:not([href^='#'])::after{content:' (' attr(href) ')';font-size:.85em;color:#444;word-break:break-all}
}