/* LazyFruit shared accessibility widget + theme modes.
   Loaded on every page (root-absolute /a11y.css). The widget styles are self-contained;
   the theme blocks remap the CSS variables the pages already use. */

/* ---------- floating button (same spot on every page) ---------- */
#lf-a11y-btn{
  position:fixed; right:18px; bottom:18px; z-index:2147483000;
  width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:#fff; background:#12161a; border:2px solid rgba(255,255,255,.32);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transition:transform .14s ease, background .14s, border-color .14s;
  padding-bottom:env(safe-area-inset-bottom);
}
#lf-a11y-btn:hover{ transform:translateY(-2px); border-color:#fff; background:#1b2128; }
#lf-a11y-btn:focus-visible{ outline:3px solid #4ea1ff; outline-offset:2px; }
#lf-a11y-btn svg{ display:block; }

/* ---------- panel ---------- */
#lf-a11y-panel{
  position:fixed; right:18px; bottom:78px; z-index:2147483000;
  width:min(300px, calc(100vw - 36px));
  background:#14181d; color:#eef2ee;
  border:1px solid rgba(255,255,255,.16); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  padding:16px 16px 12px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:14px; line-height:1.45;
  animation:lf-a11y-in .18s ease both;
}
#lf-a11y-panel[hidden]{ display:none; }
@keyframes lf-a11y-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
#lf-a11y-panel h2{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9fb0a4; margin:2px 0 12px; font-weight:700; }
#lf-a11y-panel .grp{ margin-bottom:14px; }
#lf-a11y-panel .grp > .lbl{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9fb0a4; display:block; margin-bottom:8px; }
.lf-seg{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.lf-seg4{ grid-template-columns:1fr 1fr 1fr 1fr; }
.lf-seg4 button{ flex-direction:row; font-size:13px; padding:8px 4px; }
.lf-seg button{
  appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700;
  padding:9px 6px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:#cdd6cf; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:background .12s, border-color .12s, color .12s;
}
.lf-seg button .ic{ font-size:16px; }
.lf-seg button:hover{ border-color:rgba(255,255,255,.4); color:#fff; }
.lf-seg button[aria-pressed="true"]{ background:#2a6cff; border-color:#2a6cff; color:#fff; }
.lf-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  appearance:none; cursor:pointer; font:inherit; text-align:left;
  padding:11px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:#eef2ee; margin-top:8px;
}
.lf-toggle:hover{ border-color:rgba(255,255,255,.4); }
.lf-toggle .sw{ width:38px; height:22px; border-radius:999px; background:rgba(255,255,255,.2); position:relative; flex:0 0 auto; transition:background .15s; }
.lf-toggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; }
.lf-toggle[aria-pressed="true"] .sw{ background:#2a6cff; }
.lf-toggle[aria-pressed="true"] .sw::after{ transform:translateX(16px); }
.lf-toggle .t small{ display:block; color:#9fb0a4; font-size:11px; font-weight:400; }
#lf-a11y-panel .foot{ font-size:11px; color:#7f8a80; margin-top:10px; }
#lf-a11y-panel :focus-visible{ outline:2px solid #4ea1ff; outline-offset:2px; }

/* ---------- LIGHT ---------- */
html[data-theme="light"]{
  --bg:#eef1ee; --surface:#ffffff; --surface-2:#f3f6f3; --surface-3:#e9ede9;
  --on-surface:#161c18; --text:#161c18; --fg-strong:#0c110d; --muted:#566056;
  --line:rgba(0,0,0,.14); --line-2:rgba(0,0,0,.24);
  --glass:rgba(0,0,0,.045); --glass2:rgba(0,0,0,.07);
  --glass-bg:rgba(0,0,0,.05); --glass-border:rgba(0,0,0,.16); --glass-pink:rgba(255,70,170,.10);
  --white:#161c18; --light-pink:#c01f75;
  color-scheme:light;
}
html[data-theme="light"] body{ background:#eef1ee !important; }
html[data-theme="light"] body::before{ display:none !important; }

/* ---------- ULTRA DARK (high contrast) ---------- */
html[data-theme="ultra"]{
  --bg:#000000; --surface:#0a0b0c; --surface-2:#101214; --surface-3:#16191c;
  --on-surface:#ffffff; --text:#ffffff; --fg-strong:#ffffff; --muted:#cdd6cf;
  --line:rgba(255,255,255,.32); --line-2:rgba(255,255,255,.5);
  --glass:rgba(255,255,255,.07); --glass2:rgba(255,255,255,.1);
  --glass-bg:rgba(255,255,255,.08); --glass-border:rgba(255,255,255,.4); --glass-pink:rgba(255,70,170,.2);
  color-scheme:dark;
}
html[data-theme="ultra"] body{ background:#000 !important; }
html[data-theme="ultra"] body::before{ background:rgba(0,0,0,.72) !important; }

/* ---------- COLOR-BLIND: stronger separation & always-underlined links ---------- */
html[data-cvd="on"]{ --line:rgba(128,128,128,.55); --line-2:rgba(160,160,160,.75); }
html[data-cvd="on"] a:not(.btn):not(.crumb):not(.domchip):not(.map-node){ text-decoration:underline; }
html[data-cvd="on"] .map-edge{ stroke-width:1.8; }

/* ---------- REDUCE MOTION ---------- */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}