/* TikChak: one narrow mobile column. Colors, LCD and type come from prototype/fixit-cam.html. */

/* Fonts are served from our own server (no request to Google). SIL Open Font License, see /fonts/OFL-*.txt.
   Assistant is a variable font: one file covers weights 400 to 700. */
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/assistant-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/assistant-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Assistant"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/assistant-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/secular-one-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/secular-one-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Secular One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/secular-one-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/share-tech-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Contrast (IS 5568 / WCAG AA): text on a colored fill uses the *-strong / *-on tokens, at least 4.5:1.
   --accent stays the brand orange for large text, borders and the shutter (3:1 is enough there). */
:root {
  --bg: #F6F0E6;
  --glow: #FFDCC6;
  --surface: #FFFFFF;
  --ink: #1F1912;
  --muted: #5C534A;
  --line: #E4DACB;
  --shadow: 0 8px 24px rgba(90, 55, 20, .09);
  --accent: #D9581A;
  --accent-strong: #BF4D14;
  --accent-soft: #FBE6D8;
  --accent-ink: #FFFFFF;
  --link: #A8420F;
  --on-color: #FFFFFF;
  --lcd-bg: #C7D4B4;
  --lcd-ink: #1C2914;
  --danger: #B42318;
  --danger-bg: #FDECEA;
  --caution: #8A5A00;
  --caution-bg: #FFF4D6;
  --ok: #24724A;
  --ok-bg: #E4F4EA;
  --wa: #1F7A4D;
  --font-display: "Secular One", "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-body: "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --font-lcd: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15110E; --glow: #3A2416; --surface: #1F1915; --ink: #F1EAE1; --muted: #A89E92; --line: #382E26; --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --accent: #FF8640; --accent-strong: #FF8640; --accent-soft: #3A2416; --accent-ink: #1A0E06; --link: #FF9D63; --on-color: #0F1513;
    --lcd-bg: #1F2C1C; --lcd-ink: #B6EE78;
    --danger: #FF7A70; --danger-bg: #3A1714; --caution: #F5C451; --caution-bg: #33290F;
    --ok: #6BD49A; --ok-bg: #12301F; --wa: #3DBE7E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15110E; --glow: #3A2416; --surface: #1F1915; --ink: #F1EAE1; --muted: #A89E92; --line: #382E26; --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --accent: #FF8640; --accent-strong: #FF8640; --accent-soft: #3A2416; --accent-ink: #1A0E06; --link: #FF9D63; --on-color: #0F1513;
  --lcd-bg: #1F2C1C; --lcd-ink: #B6EE78;
  --danger: #FF7A70; --danger-bg: #3A1714; --caution: #F5C451; --caution-bg: #33290F;
  --ok: #6BD49A; --ok-bg: #12301F; --wa: #3DBE7E;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* rem, not px: the text grows with the size the user set in the browser or phone. */
/* A warm glow at the top of the page, behind the header; plain --bg underneath so text contrast is unchanged. */
body { background: var(--bg); background-image: radial-gradient(70% 320px at 50% -80px, var(--glow), transparent 70%); background-repeat: no-repeat; color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; overflow-wrap: break-word; }
.emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
[hidden] { display: none !important; }
.app { position: relative; max-width: 520px; margin: 0 auto; padding-inline: 16px; padding-block: max(10px, env(safe-area-inset-top)) 40px; display: flex; flex-direction: column; gap: 16px; }
main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
/* 1.5rem (24px) makes the logo "large text", for which the brand orange passes at 3:1. */
.brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
a.brand { min-height: 44px; }
.brand b { color: var(--accent); font-weight: 400; }
.logo { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-inline-end: 8px; border-radius: 11px; background: var(--accent-strong); color: var(--accent-ink); box-shadow: var(--shadow); flex: none; }
.logo svg { width: 22px; height: 22px; }
.tag { font-size: .78rem; color: var(--caution); background: var(--caution-bg); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; }
h2, .h2 { font-size: 1.3rem; line-height: 1.3; }
h3 { font-size: 1.1rem; line-height: 1.3; }
p { margin: 0; }
a { color: var(--link); }
.screen { display: flex; flex-direction: column; gap: 14px; }
.small { font-size: .85rem; color: var(--muted); }
.hint { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus: a thick outline plus a contrasting ring, visible on light, dark and colored backgrounds. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bg); }
/* Headings and messages receive focus from the script only, to tell a screen reader where it is. */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Tabs */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 5px; box-shadow: var(--shadow); }
.tabs.dim { opacity: .55; pointer-events: none; }
.tab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; text-align: center; border-radius: 12px; padding: 8px 4px; font-weight: 700; font-size: .92rem; line-height: 1.2; color: var(--muted); transition: background .15s, color .15s; }
.tab svg { width: 22px; height: 22px; flex: none; }
.tab[aria-selected="true"] { background: var(--accent-strong); color: var(--accent-ink); }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The slogan as a friendly note card. */
.slogan { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); text-wrap: balance; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; }
.slogan .emoji { font-size: 1.4rem; flex: none; }

/* Viewfinder */
.viewfinder { position: relative; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; background: #0b0f0d; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Four corner brackets, like a scanner, so the user knows where to put the code. */
.vf-frame { position: absolute; inset: 18% 12%; pointer-events: none; }
.vf-frame i { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, .85); border-radius: 4px; }
.vf-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.vf-top { position: absolute; inset: 0 0 auto 0; padding: 12px 14px 28px; background: linear-gradient(rgba(0,0,0,.65), transparent); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.vf-step { font-weight: 700; font-size: 1.05rem; }
.vf-hint { font-size: .92rem; opacity: .92; }
.vf-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; padding-top: 90px; text-align: center; color: #E6EDE9; }
.vf-fallback .lcd { width: 70%; }
.cam-panel { display: flex; flex-direction: column; gap: 12px; }
.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.privacy-line { text-align: center; }
.privacy-line a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.cam-controls > :first-child { justify-self: start; }
.cam-controls > :last-child, .cam-controls #skipSticker { justify-self: end; }
.shutter { all: unset; cursor: pointer; width: 78px; height: 78px; border-radius: 50%; background: var(--surface); border: 5px solid var(--accent); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 40px var(--accent), var(--shadow); display: inline-grid; place-items: center; color: var(--accent-ink); position: relative; transition: transform .1s; }
.shutter svg { width: 30px; height: 30px; position: relative; }
/* A soft pulse ring invites the first tap; it stops under "reduce motion". */
.shutter::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.shutter:active { transform: scale(.94); }
.shutter:disabled { opacity: .5; }
.shutter:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* LCD panel */
.lcd { background: var(--lcd-bg); color: var(--lcd-ink); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,.18); direction: ltr; }
.lcd-code { font-family: var(--font-lcd); font-size: 2.6rem; line-height: 1; letter-spacing: .08em; min-width: 0; overflow-wrap: anywhere; }
.lcd-led { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.lcd-meta { font-family: var(--font-lcd); font-size: .85rem; opacity: .8; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
/* "Reduce motion" on the device: no blinking, no smooth scrolling, no transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .shutter:active, .btn:active { transform: none; }
}

/* Loading: three steps light up one after another while the server works. */
.scan { gap: 14px; }
.scan-title { display: flex; align-items: center; gap: 10px; }
.scan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.scan-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted); animation: scanText .4s forwards; }
.scan-steps .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); flex: none; animation: scanDot .4s forwards; }
.scan-steps li:nth-child(1), .scan-steps li:nth-child(1) .dot { animation-delay: 1.2s; }
.scan-steps li:nth-child(2), .scan-steps li:nth-child(2) .dot { animation-delay: 4s; }
.scan-steps li:nth-child(3), .scan-steps li:nth-child(3) .dot { animation-delay: 7.5s; }
@keyframes scanDot { to { background: var(--accent-strong); border-color: var(--accent-strong); } }
@keyframes scanText { to { color: var(--ink); } }
.tip { background: var(--accent-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: .95rem; }
.tip:empty { display: none; }

/* Buttons: every control is at least 44 by 44 pixels. */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; border-radius: 14px; padding: 14px 18px; font-weight: 700; font-size: 1.05rem; text-align: center; transition: transform .1s; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bg); }
.btn-small { padding: 9px 14px; font-size: .95rem; }
.btn-primary { background: var(--accent-strong); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; }
.btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn-video { background: #C4302B; color: #fff; font-size: 1.15rem; padding: 16px 18px; width: 100%; }
.btn-pro { background: var(--ink); color: var(--bg); padding: 16px 18px; }
.btn-pro.urgent { background: var(--danger); color: var(--on-color); }
.btn-wa { background: var(--wa); color: var(--on-color); }
.btn-block { width: 100%; }
.link-btn { text-decoration: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.row > .btn { flex: 1 1 120px; }
.back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 4px; color: var(--muted); font-size: .95rem; align-self: flex-start; }
.back:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.error { color: var(--danger); font-weight: 600; }
.notice { border-radius: 12px; padding: 12px 14px; font-size: .95rem; border: 1px solid var(--line); background: var(--bg); color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Review */
.shots { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.shots > * { min-width: 0; }
/* No overflow clipping: with large text the box grows instead of cutting the label off. */
.shot { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border: 2px dashed var(--line); border-radius: 14px; background: var(--surface); text-align: center; padding: 8px; color: var(--muted); font-size: .9rem; cursor: pointer; margin: 0; }
.shot.filled { border-style: solid; border-color: var(--accent); }
.shot:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.shot figcaption { position: absolute; bottom: 0; inset-inline: 0; background: rgba(0,0,0,.7); color: #fff; font-size: .85rem; padding: 4px; border-radius: 0 0 12px 12px; }
.shot strong { color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .city-form label { font-weight: 600; font-size: .95rem; }
textarea, input[type="text"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
textarea { min-height: 84px; resize: vertical; }

/* Result */
.banner { border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.banner strong { font-size: 1.1rem; }
.banner.stop { background: var(--danger-bg); color: var(--danger); }
.banner.caution { background: var(--caution-bg); color: var(--caution); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow); }
.device-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.device-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); display: inline-grid; place-items: center; font-size: 1.5rem; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.device-icon:empty { display: none; }
.device-name { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; }
.chip { font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.chip.high { background: var(--ok-bg); color: var(--ok); }
.chip.medium { background: var(--caution-bg); color: var(--caution); }
.chip.low { background: var(--danger-bg); color: var(--danger); }
.label { font-family: var(--font-body); font-size: .78rem; line-height: 1.5; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
ol.steps li::before { content: counter(s); font-weight: 700; background: var(--accent-strong); color: var(--accent-ink); border-radius: 50%; text-align: center; line-height: 30px; height: 30px; width: 30px; }
.video-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.video-card strong { display: block; font-size: .95rem; line-height: 1.3; }
.done { position: relative; overflow: hidden; background: var(--ok-bg); color: var(--ok); border-radius: 14px; padding: 16px; font-weight: 700; font-size: 1.1rem; text-align: center; }
/* Confetti on "solved": six bits fly up and fade. Added only when motion is allowed (app.js). */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; bottom: 0; width: 8px; height: 12px; border-radius: 2px; opacity: 0; background: var(--accent); }
.done.pop .confetti i { animation: confetti 1.3s ease-out forwards; }
.confetti i:nth-child(1) { left: 12%; background: var(--accent); animation-delay: 0s; }
.confetti i:nth-child(2) { left: 28%; background: var(--ok); animation-delay: .1s; }
.confetti i:nth-child(3) { left: 44%; background: var(--caution); animation-delay: .05s; }
.confetti i:nth-child(4) { left: 60%; background: var(--accent); animation-delay: .15s; }
.confetti i:nth-child(5) { left: 76%; background: var(--ok); animation-delay: .02s; }
.confetti i:nth-child(6) { left: 90%; background: var(--caution); animation-delay: .12s; }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-110px) rotate(260deg); opacity: 0; } }
.lead-box { font-size: .95rem; white-space: pre-wrap; background: var(--bg); border-radius: 10px; padding: 12px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.city-form { display: flex; flex-direction: column; gap: 6px; }
.city-row { display: flex; flex-wrap: wrap; gap: 8px; }
.city-row input { flex: 1 1 10em; min-width: 0; }
.pro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pro { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.pro-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pro-head h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.08rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); font-size: 1.3rem; line-height: 1; display: inline-grid; place-items: center; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
footer.small { text-align: center; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.legal-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; color: var(--link); font-weight: 600; }
.legal-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }

.verified-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; font-weight: 700; color: var(--ok); }

/* Consent window (privacy §2): the three choices look the same, none is pushed. */
.consent { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 16px; padding: 20px; background: var(--surface); color: var(--ink); }
.consent::backdrop { background: rgba(0, 0, 0, .6); }
.consent[open] { display: flex; flex-direction: column; gap: 14px; }
.consent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.consent-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.consent-prefs { display: flex; flex-direction: column; gap: 12px; }
.consent-prefs fieldset { display: flex; flex-direction: column; gap: 10px; }
.pref { display: flex; flex-direction: column; gap: 2px; padding-block: 6px; border-top: 1px solid var(--line); }
.pref .small { padding-inline-start: 32px; }
.btn-icon { padding: 0; width: 44px; height: 44px; font-size: 1.1rem; flex: none; }
input[type="checkbox"]:disabled { accent-color: var(--muted); }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent-strong); }
.choice { display: flex; flex-wrap: wrap; gap: 0 18px; }
.gas-ask { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 10px; gap: 2px; }
.gas-ask legend { font-weight: 600; font-size: .95rem; padding: 0 4px; margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; }

/* Accessibility menu (js/a11y.js). The button floats at the bottom corner; the page leaves room for it. */
.app { padding-bottom: 88px; }
.a11y-fab { position: fixed; z-index: 30; bottom: max(16px, env(safe-area-inset-bottom)); inset-inline-end: 16px; width: 52px; height: 52px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent-strong); color: var(--on-color); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.a11y-fab svg { width: 30px; height: 30px; }
.a11y-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.a11y-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.a11y-text-controls { display: inline-flex; align-items: center; gap: 8px; }
.a11y-text output { min-width: 3.5em; text-align: center; font-weight: 700; }
.a11y-switches { display: flex; flex-direction: column; }
.a11y-switches .check { border-top: 1px solid var(--line); padding-block: 6px; }
.a11y-hint { display: block; font-weight: 400; }

/* The settings, as classes on <html>. They come last so they win over the theme tokens above. */
:root.a11y-text-1 { font-size: 115%; }
:root.a11y-text-2 { font-size: 130%; }
:root.a11y-text-3 { font-size: 150%; }
:root.a11y-font { --font-body: Arial, "Arial Hebrew", Tahoma, sans-serif; --font-display: Arial, "Arial Hebrew", Tahoma, sans-serif; }
.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
.a11y-motion *, .a11y-motion *::before, .a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-gray .app, .a11y-gray dialog { filter: grayscale(1); }
:root.a11y-contrast, :root.a11y-contrast[data-theme="dark"] {
  --bg: #000000; --surface: #000000; --ink: #FFFFFF; --muted: #FFFFFF; --line: #FFFFFF;
  --accent: #FFD600; --accent-strong: #FFD600; --accent-ink: #000000; --link: #FFD600; --on-color: #000000;
  --lcd-bg: #000000; --lcd-ink: #FFD600;
  --danger: #FF8A80; --danger-bg: #000000; --caution: #FFD600; --caution-bg: #000000;
  --ok: #7CFFB2; --ok-bg: #000000; --wa: #FFD600;
  --glow: transparent; --accent-soft: #000000; --shadow: none;
}
.a11y-contrast .avatar, .a11y-contrast .device-icon, .a11y-contrast .tip, .a11y-contrast .pro, .a11y-contrast .slogan { border: 1px solid #FFFFFF; }
.a11y-contrast .card, .a11y-contrast .notice, .a11y-contrast .banner, .a11y-contrast .chip, .a11y-contrast .done, .a11y-contrast .lead-box, .a11y-contrast .tag, .a11y-contrast .consent { border: 1px solid #FFFFFF; }
.a11y-contrast .btn-video { background: #000000; color: #FFD600; border: 2px solid #FFD600; }
.a11y-contrast .a11y-fab { background: #FFD600; color: #000000; border-color: #FFFFFF; }

/* Legal pages (privacy, terms, accessibility), rendered from docs/legal/*.md */
.legal-doc { gap: 0; line-height: 1.65; }
.legal-doc h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 12px; }
.legal-doc h2 { margin-top: 24px; margin-bottom: 8px; }
.legal-doc p, .legal-doc ul, .legal-doc table { margin: 0 0 12px; }
.legal-doc ul { padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal-doc th, .legal-doc td { text-align: start; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); }
.legal-doc th { color: var(--muted); font-size: .85rem; }
/* On a phone each table row becomes a small card, labeled by its column headers. */
@media (max-width: 640px) {
  .legal-doc table.stack, .legal-doc table.stack tbody, .legal-doc table.stack tr, .legal-doc table.stack td { display: block; }
  .legal-doc table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-doc table.stack tr { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; margin-bottom: 10px; }
  .legal-doc table.stack td { border: 0; padding: 6px 0; }
  .legal-doc table.stack td + td { border-top: 1px solid var(--line); }
  .legal-doc table.stack td::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; color: var(--muted); }
}

/* Admin */
.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin th, .admin td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* position: relative keeps the screen-reader-only header text inside the scroll box; without it the
   hidden text escapes the box and widens the whole page sideways. */
.admin .table-wrap { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; }
.admin .card { min-width: 0; max-width: 100%; }
.admin .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.admin .cats { display: flex; flex-wrap: wrap; gap: 0 14px; }
.admin .cats label { font-weight: 400; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.admin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.admin .stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.admin .stats b { font-family: var(--font-lcd); font-size: 1.5rem; font-weight: 400; }
.admin .attention { background: var(--caution-bg); }
.admin .warn { color: var(--caution); font-weight: 700; font-size: .85rem; }
.admin .verify-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.admin .app { max-width: 960px; }