/* The brand is the ticketing site's (hatzolah-ticketing/public/style.css); check.mjs holds these tokens to it. */
:root {
  --navy: #2b3190;
  --navy-dark: #1f2470;
  --red: #cc3a33;
  --amber: #c77700;
  --green: #4f7d24;
  --fg: #1d1f2b;
  --muted: #5f6377;
  --line: #dfe1ea;
  --bg: #f2f3f8;
  --glow: #ffb300;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--fg);
  line-height: 1.45;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--navy); }

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1rem; background: #fff;
  border-bottom: 4px solid var(--navy); box-shadow: 0 3px 0 var(--red);
}
header.site img { display: block; height: 3rem; width: auto; }
header.site span { color: var(--navy); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

main { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
main.wide { max-width: 68rem; }
@media (min-width: 44rem) {
  header.site { padding: 0.75rem 2rem; }
  header.site img { height: 3.75rem; }
  main { margin: 1.5rem auto 2rem; padding: 1.5rem 2rem 2.5rem; background: #fff; border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(20, 24, 70, 0.06); }
}
footer.site { text-align: center; color: var(--muted); font-size: 0.9rem; padding: 0 1rem 2.5rem; }

h1 { font-size: 1.6rem; margin: 0.25rem 0 0.5rem; color: var(--navy); line-height: 1.2; }
h2 { font-size: 0.8rem; margin: 2rem 0 0.6rem; color: var(--navy); letter-spacing: 0.08em; text-transform: uppercase; }
h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.25rem; max-width: 44rem; }
.quiet { color: var(--muted); }
.crumb { display: inline-block; margin-bottom: 0.75rem; text-decoration: none; font-weight: 600; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05em 0.45em; border-radius: 0.35rem;
  background: #2a2d36; color: #fff; font: 600 0.88em/1.4 system-ui, sans-serif; text-align: center;
  box-shadow: 0 2px 0 #11131a; white-space: nowrap;
}

button, .button {
  display: inline-block; font: inherit; font-size: 1rem; padding: 0.7rem 1rem; border: 1px solid #c9ccd9;
  border-radius: 0.5rem; background: #fff; color: var(--fg); cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .button:hover { border-color: var(--navy); }
button.primary, .button.primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
button.primary:hover, .button.primary:hover { background: var(--navy-dark); }
.button.big { width: 100%; padding: 1rem; font-size: 1.1rem; }
button.link { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--navy); font-size: inherit; }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus { outline: 3px solid rgba(43, 49, 144, 0.3); outline-offset: 2px; }

/* ── search ── */
.searchbox input {
  width: 100%; font: inherit; font-size: 1.15rem; padding: 0.9rem 1rem 0.9rem 2.8rem;
  border: 2px solid var(--navy); border-radius: 0.75rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%232b3190' stroke-width='2.4'%3E%3Ccircle cx='9.5' cy='9.5' r='7'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E") no-repeat 0.85rem center;
}
.results { margin-top: 1rem; }

/* ── home ── */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 1.25rem 0; }
@media (min-width: 44rem) { .quick { grid-template-columns: repeat(6, 1fr); } }
.quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.9rem 0.4rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0.75rem; text-decoration: none; color: var(--fg); font-weight: 600; font-size: 0.95rem; text-align: center;
}
.quick-btn:hover { border-color: var(--navy); background: #fff; }
.quick-icon { font-size: 1.6rem; line-height: 1; }
.cards { display: grid; gap: 0.6rem; margin-bottom: 0.5rem; }
@media (min-width: 44rem) { .cards { grid-template-columns: 1.4fr 1fr 1fr; } }
.card { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: 0.75rem; border: 1px solid var(--line); text-decoration: none; color: var(--fg); background: #fff; }
.card strong { color: var(--navy); font-size: 1.05rem; }
.card span { color: var(--muted); }
.card:hover { border-color: var(--navy); }
.card-tour { background: var(--navy); border-color: var(--navy); }
.card-tour strong, .card-tour span { color: #fff; }
.topics { display: grid; gap: 0; }
@media (min-width: 44rem) { .section .topics, .related .topics { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.topic { display: block; padding: 0.7rem 0.5rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); border-radius: 0.4rem; }
.topic:hover { background: var(--bg); }
.topic-title { display: block; font-weight: 600; color: var(--navy); }
.topic-sum { display: block; color: var(--muted); font-size: 0.92rem; }
.report-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 2.5rem; padding: 1rem 1.25rem; background: #f4f5fc; border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: 0.5rem;
}

/* ── a topic ── */
.demo { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 52rem) { .demo { grid-template-columns: minmax(16rem, 21rem) 1fr; gap: 2rem; } .demo-radio { position: sticky; top: 1rem; } }
.demo-radio { display: flex; flex-direction: column; align-items: center; }
.hs-note { min-height: 1.5rem; margin-top: 0.5rem; text-align: center; color: var(--muted); font-size: 0.95rem; }
.now-step { display: none; }
@media (max-width: 51.99rem) {
  /* On a phone the step being taught sits under the radio, where the eye already is. */
  .now-step { display: flex; gap: 0.6rem; align-items: flex-start; width: 100%; margin-bottom: 0.75rem; padding: 0.75rem 0.9rem; border: 2px solid var(--navy); border-radius: 0.6rem; background: #f7f8fe; font-size: 1.05rem; position: sticky; top: 0; z-index: 2; box-shadow: 0 4px 12px rgba(20, 24, 70, .12); }
  .now-n { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
  .hs-note { font-size: 0.85rem; }
  .handset { width: min(100%, 19rem, 30vh); }
  .button-info { position: sticky; bottom: 0; z-index: 2; min-height: 0; box-shadow: 0 -4px 16px rgba(20, 24, 70, .12); border: 1px solid var(--line); }
  .controls button:not(.primary) { padding: 0.7rem 0.75rem; }
  .controls .play-all { display: none; }
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.steps li {
  counter-increment: step; position: relative; padding: 0.75rem 0.9rem 0.75rem 3rem; border: 1px solid var(--line);
  border-radius: 0.6rem; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, opacity .2s;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0.8rem; top: 0.7rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--bg); color: var(--navy); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem;
}
.steps li.done { opacity: 0.6; }
.steps li.done::before { content: '✓'; background: var(--green); color: #fff; }
.steps li.current { border: 2px solid var(--navy); background: #f7f8fe; box-shadow: 0 2px 8px rgba(43, 49, 144, 0.12); }
.steps li.current::before { background: var(--navy); color: #fff; }
.step-why { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; }
.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.controls .primary { flex: 1 1 8rem; }
@media (max-width: 51.99rem) {
  .controls { position: sticky; bottom: 0; z-index: 2; flex-wrap: nowrap; background: rgba(255,255,255,.96); margin: 0.75rem -1rem 0; padding: 0.6rem 1rem; border-top: 1px solid var(--line); }
}
.body p, .body li { max-width: 44rem; }
.body dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; }
.body dt { font-weight: 600; }
.body dd { margin: 0; }

/* ── the handset ── */
.handset { position: relative; width: min(100%, 19rem); aspect-ratio: 300 / 660; user-select: none; -webkit-tap-highlight-color: transparent; }
.handset svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-body { fill: #22252b; }
.hs-face { fill: #1a1c21; stroke: #2e3138; stroke-width: 2; }
.hs-antenna, .hs-shadow { fill: #1b1d22; }
.hs-bezel { fill: #050608; }
.hs-stripe { fill: #2f9be0; }
.hs-ring { fill: #101114; stroke: #2c2f36; stroke-width: 3; }
.hs-grille { fill: #0e0f12; }
.hs-key { cursor: pointer; }
.hs-cap { fill: #30333b; stroke: #0b0c0e; stroke-width: 1.5; transition: fill .15s; }
.hs-arrow .hs-cap { fill: transparent; stroke: none; }
.hs-arrow .hs-label { fill: #4aa3ff; font-size: 15px; }
.hs-red .hs-label { fill: #ff5a50; }
.hs-green .hs-label { fill: #4cd06a; }
.hs-icon { pointer-events: none; }
.hs-icon-phone path { fill: #3ccf63; }
.hs-icon-power > path:first-child { fill: #ff4a3d; }
.hs-power { fill: none; stroke: #ff4a3d; stroke-width: 1.5; stroke-linecap: round; }
.hs-red .hs-cap { fill: #30333b; }
.hs-key[data-key="SOS"] .hs-cap { fill: #c62828; }
.hs-key[data-key="SOS"] .hs-label { fill: #fff; font-size: 9px; }
.hs-key[data-key="KNOB"] .hs-cap { fill: #26292f; }
.hs-knurl { stroke: #3a3e46; stroke-width: 2; }
.hs-label { fill: #e9ebef; font: 700 12px system-ui, sans-serif; pointer-events: none; }
.hs-key:hover .hs-cap { fill: #3d414b; }
.hs-arrow:hover .hs-label { fill: #8cc7ff; }
.hs-key:focus { outline: none; }
.hs-key:focus-visible .hs-cap { stroke: var(--glow); stroke-width: 2.5; }
.hs-lit .hs-cap { stroke: var(--glow); stroke-width: 3.5; animation: glow 1.1s ease-in-out infinite; }
.hs-lit.hs-arrow .hs-cap { fill: rgba(255, 179, 0, .22); }
.hs-lit .hs-label { fill: #fff; }
@keyframes glow { 50% { stroke-opacity: .35; } }
.hs-pressed { transform-box: fill-box; transform-origin: center; animation: press .26s ease-out; }
@keyframes press { 40% { transform: scale(.88); } }
.hs-held .hs-cap { fill: var(--glow); }
.hs-held .hs-label { fill: #1a0e00; }
.hs-glass { position: absolute; overflow: hidden; border-radius: 2px; background: #000; }
.hs-panel { transform-origin: top left; }
@media (prefers-reduced-motion: reduce) { .hs-lit .hs-cap, .hs-pressed { animation: none; } }

/* ── buttons, sounds, synch ── */
.button-info { background: var(--bg); border-radius: 0.75rem; padding: 1rem 1.25rem; min-height: 10rem; }
.button-info h2 { margin-top: 0; font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
.button-info dl { margin: 0 0 0.75rem; }
.button-info dt { font-weight: 600; color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.button-info dd { margin: 0.1rem 0 0; }
.sounds { display: grid; gap: 0.75rem; }
@media (min-width: 44rem) { .sounds { grid-template-columns: 1fr 1fr; } }
.sound { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.9rem 1rem; background: #fff; }
.sound-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.sound p { margin: 0.35rem 0 0.6rem; }
.sound-why { color: var(--muted); font-size: 0.95rem; }
.sound-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sound-actions button { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; background: #e6e8f2; color: var(--muted); }
.compare { display: grid; gap: 0.75rem; }
.compare-row { border: 1px solid var(--line); border-radius: 0.75rem; padding: 1rem 1.1rem; }
.compare-cols { display: grid; gap: 0.75rem; }
@media (min-width: 44rem) { .compare-cols { grid-template-columns: 1fr 1fr; } }
.compare-cols p { margin: 0.25rem 0 0; }
.compare-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.compare-tag.radio { color: var(--navy); }

/* ── screen words ── */
.words { display: grid; gap: 0.75rem; }
@media (min-width: 44rem) { .words { grid-template-columns: 1fr 1fr; } }
.word { border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.8rem 1rem; background: #fff; }
.word p { margin: 0.5rem 0 0; }
.word-focus { border: 2px solid var(--navy); box-shadow: 0 2px 10px rgba(43, 49, 144, .18); }
.word-screen { display: inline-flex; flex-direction: column; padding: 0.35rem 0.6rem; border-radius: 0.4rem; background: #161310; color: #ffc400; font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; }
.word-line .word-screen, .word-screen.word-line { background: #081119; color: #90caf9; }
.word-screen.word-banner, .word-screen.word-band { background: #ffb300; color: #1a0e00; }
.word-word { font-weight: 700; letter-spacing: .02em; }
.word-line { font-size: 0.8rem; opacity: .85; }
.topic-word .topic-title { font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .02em; }