/* Light theme and accessibility switches. Dark is the base in style.css. */
html[data-theme=light]{
  --bg:#F4F1E8;--surface:#FFFFFF;--surface2:#ECE8DA;--line:#D9D4C3;--line2:#C4BEAA;
  --text:#1D2418;--muted:#566049;--accent:#C2500F;--moss:#3F7A2C;--amber:#8A5E00;--water:#1F6E8C;
}
html[data-theme=light] a{color:#A63F00}
html[data-theme=light] input[type=date],html[data-theme=light] input[type=datetime-local]{color-scheme:light}
/* Text on the orange and green fills stays dark in dark mode, white in light mode. */
html[data-theme=light] .btn.primary,html[data-theme=light] .chip[aria-pressed="true"],html[data-theme=light] .day.hunt,html[data-theme=light] .day.hunt .d{color:#FFFFFF}
html[data-theme=light] .badge.good{color:#FFFFFF}
html[data-theme=light] .btn.danger{color:#A63F00}
html[data-theme=light] .badge.bad{border-color:#8A937C}
html[data-hc]{--line:#8A937C;--line2:#B7BFAA;--muted:#D6DBC9}
html[data-hc][data-theme=light]{--line:#4A5340;--line2:#2E3528;--muted:#2E3528;--text:#000}
html[data-text=large] body{font-size:19px}
html[data-text=large] .small{font-size:15px}
html[data-text=large] .eyebrow{font-size:14px}
/* Admin and shell */
#tabs.five{grid-template-columns:repeat(5,1fr)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg .chip{flex:1}
.ad-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.ad-tabs .chip{flex:none}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--moss)}
.dot.bad{background:#D8452B}.dot.warn{background:var(--amber)}.dot.off{background:var(--line2)}
.meter{height:10px;border-radius:5px;background:var(--surface2);overflow:hidden}
.meter i{display:block;height:10px;background:var(--moss)}
.meter i.warn{background:var(--amber)}.meter i.bad{background:#D8452B}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:14px}
.kv b{font-weight:600;text-align:right}
.pin{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:440px;margin:8px auto 4px}
.pin button{min-height:clamp(72px,11vh,96px);font-size:34px;font-weight:800;border-radius:18px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);cursor:pointer;touch-action:manipulation}
.pin button:active{background:var(--accent);color:#11160F}
.pin button[data-hx=pin-del]{font-size:30px}
.pindots{display:flex;gap:16px;justify-content:center;min-height:26px;margin:10px 0 4px}
.pindots i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2)}
.pindots i.on{background:var(--accent);border-color:var(--accent)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;z-index:9;font-size:14px}
body.gated #tabs{display:none}
body.gated #app{padding-top:calc(env(safe-area-inset-top) + 60px)}
/* Night mode (HF-44): red on pure black so night vision survives. Wins over light theme and High Contrast. */
html[data-night],html[data-night][data-theme=light],html[data-night][data-hc]{
  --bg:#000;--surface:#0A0000;--surface2:#140202;--line:#3A0B08;--line2:#5A140F;
  --text:#E5584A;--muted:#A8392E;--accent:#9E2318;--moss:#B8372B;--amber:#D0473A;--water:#B8372B;color-scheme:dark}
html[data-night] a{color:#E5584A}
html[data-night] .btn.primary,html[data-night] .chip[aria-pressed="true"],html[data-night] .day.hunt,html[data-night] .day.hunt .d,html[data-night] .badge.good{color:#000}
html[data-night] .btn.danger{color:#E5584A}
html[data-night] svg:not(.spark):not(.mapsvg){filter:grayscale(1) sepia(1) hue-rotate(-50deg) saturate(6) brightness(.7)}
html[data-night] input[type=date],html[data-night] input[type=datetime-local]{color-scheme:dark}
/* Green Light (HF-153): the same idea in green, picked in Setup › Appearance › Light Color */
html[data-night][data-light=green],html[data-night][data-light=green][data-theme=light],html[data-night][data-light=green][data-hc]{
  --bg:#000;--surface:#000A02;--surface2:#021404;--line:#0B3A12;--line2:#125A1C;
  --text:#4FD86A;--muted:#2E9C42;--accent:#1F8A33;--moss:#2EAA45;--amber:#3BC254;--water:#2EAA45}
html[data-night][data-light=green] a,html[data-night][data-light=green] .btn.danger{color:#4FD86A}
html[data-night][data-light=green] svg:not(.spark):not(.mapsvg){filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(5) brightness(.75)}
/* HF-161: Admin sections as a grid of tiles, no sideways scroll */
.ad-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible}
.ad-tabs .chip{width:100%;justify-content:center;text-align:center;border-radius:10px;min-height:44px;padding:8px 4px}