:root{
  --ground:#F6F7F8; --surface:#FFFFFF; --ink:#15212E; --muted:#56636F; --line:#DCE1E6; --soft:#EDF0F3;
  --sos:#C8102E; --sos-ink:#FFFFFF; --sos-deep:#9E0C24;
  --medical:#17804A; --city:#1D5FA8; --support:#6B3FA0; --warn:#9A6A00; --warn-bg:#FFF3D1;
  --focus:#1D5FA8; --pin:#E0A800;
  --f-num:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Rubik","Segoe UI",Arial,"Noto Sans Hebrew",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E141B; --surface:#161E27; --ink:#E8EDF2; --muted:#9AA7B4; --line:#2A3542; --soft:#1D2733;
    --sos:#E0283F; --sos-ink:#FFFFFF; --sos-deep:#B81D32;
    --medical:#4CC486; --city:#6FA8E8; --support:#B28BE6; --warn:#F2C14E; --warn-bg:#3A2F12; --focus:#6FA8E8;
  }
}
:root[data-theme="dark"]{
  --ground:#0E141B; --surface:#161E27; --ink:#E8EDF2; --muted:#9AA7B4; --line:#2A3542; --soft:#1D2733;
  --sos:#E0283F; --sos-ink:#FFFFFF; --sos-deep:#B81D32;
  --medical:#4CC486; --city:#6FA8E8; --support:#B28BE6; --warn:#F2C14E; --warn-bg:#3A2F12; --focus:#6FA8E8;
}
*{box-sizing:border-box}
html{font-size:17px}
html.big{font-size:21px}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);line-height:1.5;margin:0;overflow-x:hidden;padding-inline:16px;padding-block:0 44px}
.wrap{max-width:1120px;margin-inline:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
bdi.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;top:8px;inset-inline-start:16px;background:var(--surface);padding:8px 12px;z-index:9}

/* header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;direction:ltr}  /* the wordmark is a domain name: it stays MAYDAY.co.il in Hebrew too */
.brand .buoy{width:38px;height:38px;flex:none;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.brand:hover .buoy{transform:rotate(90deg)}
.brand .word{display:flex;align-items:baseline;gap:2px}
.brand b{font-family:var(--f-num);font-weight:700;font-size:1.9rem;letter-spacing:.06em;color:var(--sos);line-height:1}
.brand span{color:var(--muted);font-size:.9rem}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.langs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.langs button{font:inherit;font-size:.82rem;font-weight:500;background:none;border:0;color:var(--muted);padding:8px 10px;min-width:40px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.tbtn{font:inherit;font-size:.82rem;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 12px;cursor:pointer}


/* hero — the numbers are the page */
.hero{padding-block:30px 38px}
h1{font-size:clamp(1.7rem,3.3vw,2.3rem);line-height:1.1;margin:0 0 10px;text-wrap:balance;font-weight:700;letter-spacing:-.015em;max-width:20ch}
.lead{color:var(--muted);margin:0 0 22px;max-width:58ch;font-size:1.02rem}
.sos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:640px){.sos{grid-template-columns:repeat(4,1fr);gap:12px}}
.sos a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:152px;padding:16px 12px;background:var(--sos);color:var(--sos-ink);text-decoration:none;border-radius:12px;transition:background .15s, transform .15s}
/* the service's own mark leads the tile: a shield, a Magen David, a flame, a
   triangle — recognisable before the number is read. */
.sos .mk{line-height:0;margin-bottom:2px}
.sos .mk svg{width:32px;height:32px;display:block}
.sos a:hover{background:var(--sos-deep)}
.sos a:active{transform:scale(.985)}
.sos .lbl{font-weight:500;font-size:.95rem;line-height:1.15;text-align:center}
.sos .n{font-family:var(--f-num);font-weight:700;font-size:clamp(3.5rem,8.5vw,5.2rem);line-height:.82;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.free{grid-column:1/-1;font-size:.9rem;color:var(--muted);margin:12px 0 0}

/* geo strip */
.geo{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l l" "v c" "x x";gap:8px 12px;align-items:center;margin-top:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
@media (min-width:760px){.geo{grid-template-columns:auto 1fr auto auto;grid-template-areas:"l v c x";gap:18px;padding:10px 12px 10px 16px}}
.geo-l{grid-area:l;display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;color:var(--ink);white-space:nowrap}
.geo-l svg{width:20px;height:20px;color:var(--pin);flex:none}
.geo-v{grid-area:v;min-width:0;line-height:1.1}
.geo-v .c{font-family:var(--f-num);font-weight:700;font-size:clamp(1.35rem,5vw,1.9rem);letter-spacing:.01em;color:var(--ink);cursor:copy;display:inline-flex;flex-wrap:wrap;column-gap:.3em}
.geo-v .c bdi{white-space:nowrap}
.geo-v .s{display:block;font-size:.78rem;color:var(--muted);margin-top:3px}
.geo-v .h{font-size:.9rem;color:var(--muted)}
.geo-c{grid-area:c}
.geo-c button{font:inherit;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:0;background:var(--ink);color:var(--ground);cursor:pointer;white-space:nowrap}
@media (min-width:760px){.geo-c button{min-width:11rem}}
.geo-c button.done{background:var(--medical);color:#fff}
.geo-c svg{width:18px;height:18px}
.geo-x{grid-area:x;display:flex;gap:6px;flex-wrap:wrap}
.geo-x:empty{display:none}
.geo-x .icon{font:inherit;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;font-size:.85rem;font-weight:500;padding:0 12px}
@media (min-width:760px){.geo-x .icon{min-height:48px}}
.geo-x .icon svg{width:17px;height:17px}
.btn{font:inherit;font-weight:500;font-size:.92rem;display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* directory */
.dir-head{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.dir-head > *{min-width:0}
h2.sec{font-size:1.5rem;margin:0;text-wrap:balance;letter-spacing:-.01em}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.search input{flex:1;font:inherit;font-size:1rem;border:0;background:none;color:var(--ink);padding:14px 0;min-width:0}
.search input:focus{outline:none}
.search:focus-within{outline:3px solid var(--focus);outline-offset:1px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
/* Chips wrap instead of scrolling sideways: a one-line strip needed the page
   itself to be wider than the screen. Compact sizing keeps them to a few rows. */
@media (max-width:759px){
  .chip{font-size:.8rem;padding:6px 10px;gap:6px}
  .chip i{width:8px;height:8px}
}
.chip{font:inherit;font-size:.85rem;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--muted))}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.cat{margin-top:34px}
.cat h3{display:flex;align-items:center;gap:9px;font-size:1.02rem;color:var(--ink);margin:0 0 8px;font-weight:700}
.cat h3 i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
/* Phone: the number leads the name on one line, prose gets the full width.
   Desktop: number and copy button flank a single column of text. */
.item{display:grid;grid-template-columns:auto 1fr auto;gap:2px 13px;padding:15px 2px;border-bottom:1px solid var(--line)}
.item .dial{grid-column:1;grid-row:1}
.item .name{grid-column:2/4;grid-row:1}
.item .desc{grid-column:1/-1;grid-row:2}
.item .meta{grid-column:1/3;grid-row:3}
.item .acts{grid-column:3;grid-row:3;justify-self:end;align-self:start}
@media (min-width:760px){
  .item{grid-template-columns:8.4rem 1fr auto;column-gap:18px}
  .item .dial{grid-row:1/span 3}
  .item .name{grid-column:2;grid-row:1}
  .item .desc{grid-column:2;grid-row:2}
  .item .meta{grid-column:2;grid-row:3}
  .item .acts{grid-column:3;grid-row:1/span 3;align-self:start}
}
.item .dial{font-family:var(--f-num);font-weight:700;font-size:2.35rem;line-height:1;color:var(--c);text-decoration:none;align-self:start;white-space:nowrap;font-variant-numeric:tabular-nums}
.item .dial:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.item .dial.long{font-size:1.5rem;padding-top:5px}
.item .name{font-weight:700;font-size:1.02rem;line-height:1.25}
/* what kind of help this is, in the colour of its category */
.item .name .tp{width:17px;height:17px;vertical-align:-3px;margin-inline-end:7px;color:var(--c)}
.item .he{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:1px}
[dir="ltr"] .item .he{text-align:left}
.item .desc{color:var(--muted);font-size:.92rem;margin:3px 0 0;max-width:68ch}
.meta{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:6px;font-size:.8rem;color:var(--muted)}
.meta .tag{border:0;padding:0}
.meta .chk{background:var(--warn-bg);color:var(--warn);border-radius:4px;padding:1px 7px;font-weight:500}
.acts{display:flex;gap:8px}
.acts button{font:inherit;font-size:.82rem;font-weight:500;border-radius:8px;padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted)}
.acts button:hover{color:var(--ink);border-color:var(--ink)}
.empty{padding:22px 2px;color:var(--muted)}
.found{color:var(--muted);font-size:.85rem;margin:0 0 2px}

/* blocks */
section.blk{margin-top:38px}
@media (min-width:760px){section.blk{margin-top:52px}}
.say{list-style:none;counter-reset:s;margin:16px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){.say{grid-template-columns:repeat(5,1fr)}}
.say li{counter-increment:s;border-top:2px solid var(--ink);padding-top:11px}
.say li::before{content:counter(s);font-family:var(--f-num);font-weight:700;font-size:2.4rem;line-height:1;color:var(--sos);display:block;margin-bottom:4px}
.say b{display:block;margin-bottom:2px}
.say span{color:var(--muted);font-size:.9rem}
.hint{color:var(--muted);font-size:.9rem;font-style:italic;margin-top:10px}
.twocol{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){.twocol{grid-template-columns:1fr 1fr}}
.twocol > div{min-width:0}
td{overflow-wrap:anywhere}
td.n{overflow-wrap:normal}
.tbl-wrap{overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;font-size:.92rem;border-top:2px solid var(--ink)}
th,td{text-align:start;padding-block:11px;padding-inline:0 14px;border-top:1px solid var(--line);vertical-align:top}
th{font-size:.84rem;color:var(--muted);border-top:0;font-weight:700}
td.n{font-family:var(--f-num);font-size:1.25rem;font-weight:600;white-space:nowrap}
td.n a{text-decoration:none;color:var(--sos)}
.note{color:var(--muted);font-size:.88rem;margin:6px 0 0;max-width:70ch}
.hosp{display:grid;grid-template-columns:1fr;gap:0 26px;margin-top:14px;border-top:2px solid var(--ink)}
@media (min-width:640px){.hosp{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hosp{grid-template-columns:1fr 1fr 1fr}}
.hosp a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-block:11px;padding-inline:2px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-size:.92rem}
.hosp a:hover bdi{text-decoration:underline;text-underline-offset:3px}
.hosp a bdi{white-space:nowrap;font-family:var(--f-num);font-weight:600;font-size:1.15rem;color:var(--sos)}
.rules{margin:12px 0 0;padding-inline-start:1.3em;display:grid;gap:6px}
.siren{background:var(--ink);color:var(--ground);border-radius:12px;padding:24px;display:grid;gap:20px;
  --sir-accent:#FF6B7E;--sir-soft:rgba(255,255,255,.07);--sir-edge:rgba(255,255,255,.22);--sir-tint:rgba(255,107,126,.16);--sir-btn:rgba(255,255,255,.42)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .siren{--sir-accent:#B3122B;--sir-soft:rgba(0,0,0,.05);--sir-edge:rgba(0,0,0,.16);--sir-tint:rgba(179,18,43,.12);--sir-btn:rgba(0,0,0,.35)}}
:root[data-theme="dark"] .siren{--sir-accent:#B3122B;--sir-soft:rgba(0,0,0,.05);--sir-edge:rgba(0,0,0,.16);--sir-tint:rgba(179,18,43,.12);--sir-btn:rgba(0,0,0,.35)}
.siren-head{display:flex;align-items:flex-start;gap:14px}
.siren-badge{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--sir-tint);color:var(--sir-accent)}
.siren-badge svg{width:25px;height:25px}
@media (prefers-reduced-motion:no-preference){
  .siren-badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--sir-accent);animation:sirenPulse 2.4s ease-out infinite}
}
@keyframes sirenPulse{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.5);opacity:0}}
.siren h2{margin:0;font-size:1.35rem}
.siren p{margin:5px 0 0;max-width:62ch;opacity:.85}
.siren-grid{display:grid;gap:12px;grid-template-columns:1fr}
/* grid items default to min-width:auto and refuse to shrink below their
   longest word, which pushed the whole page wide on small phones */
.siren-grid > *,.siren-steps > *{min-width:0}
.siren-steps li span{overflow-wrap:anywhere}
@media (min-width:760px){.siren-grid{grid-template-columns:repeat(3,1fr)}}
.siren-card{display:grid;gap:6px;align-content:start;background:var(--sir-soft);border:1px solid var(--sir-edge);border-radius:10px;padding:16px}
.siren-card .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--sir-tint);color:var(--sir-accent);margin-bottom:6px}
.siren-card .ic svg{width:26px;height:26px}
.siren-card b{font-size:1rem}
.siren-card .d{opacity:.82;font-size:.88rem;line-height:1.45}
.siren-where{border-top:1px solid var(--sir-edge);padding-top:18px}
.siren-wt{margin:0;font-size:1rem;font-weight:700;opacity:.9}
.siren-steps{list-style:none;counter-reset:w;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.siren-steps{grid-template-columns:repeat(4,1fr)}}
.siren-steps li{counter-increment:w;display:flex;align-items:center;gap:9px;background:var(--sir-soft);border:1px solid var(--sir-edge);border-radius:10px;padding:11px 12px;font-size:.86rem;line-height:1.25}
.siren-steps li::before{content:counter(w);font-family:var(--f-num);font-weight:700;font-size:1.15rem;line-height:1;color:var(--sir-accent)}
.siren-steps svg{width:21px;height:21px;flex:none}
.siren .siren-note{margin:12px 0 0;font-size:.85rem;opacity:.68;max-width:76ch}
.siren .btn{background:transparent;color:var(--ground);border-color:var(--sir-btn)}
.siren .btn.primary{background:var(--sos);color:#fff;border-color:var(--sos)}
.siren .btn svg{width:16px;height:16px;flex:none}
@media (max-width:400px){
  .siren{padding:18px}
  .siren-steps{grid-template-columns:1fr}
}
footer{margin-top:64px;padding-block:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;display:grid;gap:10px}
footer p{margin:0;max-width:80ch}
footer .srcs{display:flex;flex-wrap:wrap;gap:6px 14px}
footer .contact{margin-top:4px}
footer .colophon{opacity:.75}

/* back to top — appears only once the emergency numbers are off screen */
.totop{position:fixed;inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s,transform .18s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:22px;height:22px}
html.mono .totop{border-width:2px;box-shadow:none}
.toast{position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:22px;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:10px;font-size:.9rem;z-index:9}
[dir="rtl"] .toast{transform:translateX(50%)}
/* apps */
.apps{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media (min-width:640px){.apps{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.apps{grid-template-columns:1fr 1fr 1fr}}
.app{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.app.must{border-color:color-mix(in srgb,var(--sos) 45%,var(--line))}
.app h3{margin:0;font-size:1.05rem;line-height:1.25}
.app .pub{font-size:.82rem;color:var(--muted)}
.app p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.app .badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:.76rem;font-weight:700;padding:2px 9px;border-radius:99px}
.badge.must{background:var(--sos);color:#fff}
.badge.unoff{background:var(--warn-bg);color:var(--warn)}
.stores{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stores a{font:inherit;font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;border-radius:10px;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.stores a.primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.stores svg{width:16px;height:16px;flex:none}
.stores .na{font-size:.82rem;color:var(--muted);align-self:center}
.builtin{margin-top:18px;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.builtin{grid-template-columns:1fr 1fr}}
.builtin div{border-top:2px solid var(--ink);padding-top:10px}
.builtin b{display:block;margin-bottom:4px}
.builtin span{color:var(--muted);font-size:.9rem}
/* black & white high-contrast mode */
html:root.mono{
  --ground:#FFFFFF; --surface:#FFFFFF; --ink:#000000; --muted:#1A1A1A; --line:#000000; --soft:#EDEDED;
  --sos:#000000; --sos-ink:#FFFFFF; --sos-deep:#333333;
  --medical:#000000; --city:#000000; --support:#000000; --warn:#000000; --warn-bg:#FFFFFF; --focus:#000000; --pin:#000000;
}
html.mono .badge.unoff,html.mono .meta .chk{border:1.5px solid #000}
html.mono .app,html.mono .geo{border-width:2px}
html.mono .list,html.mono .say li,html.mono .hosp,html.mono table{border-top-width:3px}
html:root.mono .siren{--sir-accent:#fff;--sir-tint:transparent;--sir-edge:#fff;--sir-soft:transparent;--sir-btn:#fff}
html.mono .siren-badge,html.mono .siren-card .ic{border:2px solid var(--ground)}
html.mono .siren-card,html.mono .siren-steps li{border-width:2px}
html.mono .siren .btn.primary{background:var(--ground);color:var(--ink);border-color:var(--ground)}
html.mono .item{border-top-width:2px}
html.mono footer a,html.mono .note a{text-decoration:underline}
@media (max-width:480px){#printBtn{display:none}}
html.mono img{filter:grayscale(1)}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.tbtn{display:inline-flex;align-items:center;gap:6px}
.tbtn svg{width:16px;height:16px;flex:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.tools,.geo-c,.geo-x,.search,.chips,.acts,.toast,.totop{display:none!important}body{background:#fff;color:#000}}