/**
 * alert.css — התרעת פיקוד העורף.
 *
 * קובץ נפרד כי אותן מחלקות בדיוק משמשות בשני מקומות: מסך הלובי
 * והדגמה החיה בפאנל ההגדרות. שכפול היה מבטיח שההדגמה תתיישן ביחס
 * למה שהדייר באמת רואה — וזו בדיוק ההבטחה שאסור לשבור כאן.
 *
 * <b>אין הבהוב.</b> הבהוב מעל 3Hz הוא סיכון להתקף אפילפטי, ומדובר
 * במסך ציבורי. הפעימה היחידה כאן היא 2 שניות למחזור (0.5Hz).
 *
 * <b>אין אנימציית כניסה.</b> נמדד: בדפדפן שלא מרנדר פריימים אנימציה
 * נתקעת ב-currentTime=0, ותיבה שמגיעה למקומה דרך transform נשארת
 * מחוץ למסך. התראה מופיעה מיד ובמקום.
 */

/* ---------- התרעת פיקוד העורף ---------- */

/* סמל מעלית וקטורי-ב-CSS במקום האימוג'י 🛗. התו החדש חסר בחלק
   מהסטרימרים ומופיע כריבוע/סימן שבור; החץ והמסגרת כאן משתמשים
   בגליפים בסיסיים שקיימים בכל דפדפן, ונצבעים לפי הערכה הפעילה. */
.elev-symbol {
    display: inline-grid; place-items: center; flex: none;
    width: 1.05em; height: 1.05em; margin-inline-end: .32em;
    border: .09em solid currentColor; border-radius: .18em;
    box-sizing: border-box; vertical-align: -.13em;
}
.elev-symbol::before {
    content: "↕"; font-size: .72em; line-height: 1; font-weight: 900;
}

.oref {
    position: fixed;
    top: 0; bottom: 0;
    /* <b>right ולא inset-inline-end.</b> המסמך הוא RTL, ושם
       inline-end הוא דווקא הצד <b>השמאלי</b> — התיבה נחתה מחוץ
       למסך. הדרישה כאן היא פיזית ("בצד ימין") ולא לוגית, ולכן
       הנכס הפיזי הוא גם הנכון וגם חסין לשינוי כיוון עתידי. */
    right: 0;
    z-index: 2147483000;
    display: flex; flex-direction: column; justify-content: center;
    gap: calc(1.6vh * var(--oref-fit, 1));
    padding: calc(2.4vh * var(--oref-fit, 1)) 1.8vw;
    box-sizing: border-box;
    min-width: 0; max-width: 100vw;
    height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh;
    text-align: center;
    font-family: inherit;
    overflow: hidden;
    overscroll-behavior: none;
    /* <b>בלי אנימציית כניסה.</b> אנימציה שמזיזה את התיבה למקומה
       פירושה שהמיקום הנכון תלוי בכך שהאנימציה תסתיים. נמדד: בדפדפן
       שלא מרנדר פריימים האנימציה נתקעת ב-currentTime=0 והתיבה נשארת
       מחוץ למסך — וזה בדיוק מה שקורה על סטרימר זול בעומס. התראה
       מופיעה מיד ובמקום, נקודה. */
}
.oref > * { min-width: 0; max-width: 100%; }
/* רוחב לפי הבחירה. בלי רוחב מפורש התיבה מתכווצת לפי הטקסט,
   והרוחב שלה היה קופץ עם כל הודעה. */
.oref-size-s { width: 22vw; }
.oref-size-m { width: 29vw; }
.oref-size-l { width: 37vw; }
/* כשיש מקלטים הם מקבלים עמודה משלהם לצד ששת היישובים. ההרחבה
   זמנית ורק בזמן התרעה מקומית; היא מונעת דחיסה/חיתוך של שתי רשימות. */
.oref-size-s.oref-has-shelters { width: 38vw; }
.oref-size-m.oref-has-shelters { width: 45vw; }
.oref-size-l.oref-has-shelters { width: 54vw; }

/* פעימה איטית — 0.5Hz, הרבה מתחת לסף ההבהוב המסוכן */
@keyframes orefPulse { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes orefLocalPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .78; transform: scale(1.015); }
}

.oref-local-hit {
    display: flex; align-items: center; justify-content: center; gap: .65vw;
    width: 100%; min-height: calc(5.4vh * var(--oref-fit, 1));
    padding: calc(.7vh * var(--oref-fit, 1)) .8vw; box-sizing: border-box;
    border: calc(.28vh * var(--oref-fit, 1)) solid #fff;
    border-radius: calc(1vh * var(--oref-fit, 1));
    background: #b42318; color: #fff;
    box-shadow: 0 0 0 .35vh rgba(180, 35, 24, .24), 0 .5vh 1.4vh rgba(80, 8, 4, .28);
    font-size: calc(3.05vh * var(--oref-fit, 1)); font-weight: 900; line-height: 1.1;
    text-align: center; animation: orefLocalPulse 1.8s ease-in-out infinite;
}
.oref-local-hit span { font-size: 1.18em; line-height: 1; }

/* הפעימה היחידה שנשארה היא של האייקון, והיא בטוחה להיתקע:
   הגרוע ביותר הוא אייקון סטטי. */
@media (prefers-reduced-motion: reduce) {
    .oref .oref-ic, .oref-local-hit { animation: none; }
}
html.a11y-noAnim .oref-local-hit { animation: none !important; }

.oref-head { display: flex; flex-direction: column; align-items: center; gap: calc(.6vh * var(--oref-fit, 1)); }
.oref-ic { font-size: calc(7vh * var(--oref-fit, 1)); line-height: 1; animation: orefPulse 2s ease-in-out infinite; }
.oref-kicker {
    font-size: calc(2.1vh * var(--oref-fit, 1)); font-weight: 900; letter-spacing: .06em;
    padding: calc(.5vh * var(--oref-fit, 1)) 1.4vh; border-radius: 999px;
}
.oref-title {
    font-size: calc(4.4vh * var(--oref-fit, 1)); font-weight: 900; line-height: 1.15;
    overflow-wrap: anywhere; word-break: break-word;
}
.oref-zones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(.5vh * var(--oref-fit, 1)); }
.oref-zones li {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: calc(4.25vh * var(--oref-fit, 1));
    padding: calc(.48vh * var(--oref-fit, 1)) .65vw;
    border: 1px solid rgba(0, 0, 0, .14); border-radius: calc(.72vh * var(--oref-fit, 1));
    background: rgba(127, 127, 127, .14); box-sizing: border-box;
    font-size: calc(2.9vh * var(--oref-fit, 1)); font-weight: 800; line-height: 1.2;
    text-align: center;
    white-space: nowrap; overflow: hidden;
}
.oref-zone-name { display: block; min-width: 0; max-width: 100%; white-space: nowrap; line-height: inherit; }
.oref-zones .oref-zone-placeholder { visibility: hidden; }
.oref-zones .oref-more {
    min-height: 0; padding: calc(.35vh * var(--oref-fit, 1)) .5vw;
    border: 0; border-radius: 0; background: transparent;
    font-size: calc(2.1vh * var(--oref-fit, 1)); font-weight: 700; opacity: .9;
}
.oref-zones .oref-more-placeholder { visibility: hidden; }

.oref-migun { display: flex; flex-direction: column; align-items: center; gap: calc(.2vh * var(--oref-fit, 1)); margin-top: calc(.6vh * var(--oref-fit, 1)); }
.oref-migun-n { font-size: calc(8vh * var(--oref-fit, 1)); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.oref-migun-u { font-size: calc(2.1vh * var(--oref-fit, 1)); font-weight: 700; line-height: 1.25; }

.oref-desc {
    font-size: calc(2.4vh * var(--oref-fit, 1)); font-weight: 700; line-height: 1.35;
    overflow-wrap: anywhere; word-break: break-word;
}

.oref-foot { margin-top: auto; padding-top: calc(1.4vh * var(--oref-fit, 1)); display: flex; flex-direction: column; gap: calc(.4vh * var(--oref-fit, 1)); }
/* הדיסקליימר קטן אבל <b>לא</b> חלש: 4.5:1 לפחות בכל סגנון.
   זו השורה היחידה שמגיעה לדיירים, שאינם צד לחוזה. */
.oref-note {
    font-size: calc(1.9vh * var(--oref-fit, 1)); font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere; word-break: break-word;
}
.oref-src  {
    font-size: calc(1.6vh * var(--oref-fit, 1)); font-weight: 600;
    overflow-wrap: anywhere; word-break: break-word;
}

/* --- סגנונות. כל אחד נמדד: 7:1 ומעלה לטקסט הראשי, 4.5:1 להערות. --- */

/* קלאסי — כתום מלא. #1f0c00 על #f08a24 = 7.53:1 (נמדד).
   7:1 ולא 4.5:1 כי מסך בלובי נקרא ממרחק 3–5 מטר ודרך אור יום —
   התקן הוא רצפה, לא יעד. */
.oref-classic { background: #f08a24; color: #1f0c00; }
.oref-classic .oref-kicker { background: #1f0c00; color: #ffd9a8; }
.oref-classic .oref-zones li:not(.oref-more) { background: rgba(31, 12, 0, .10); border-color: rgba(31, 12, 0, .20); }
.oref-classic .oref-note   { color: #1f0c00; }
.oref-classic .oref-src    { color: #2e1200; }

/* פסים — כתום ושחור, הסימון הקלאסי של אזהרה */
.oref-stripe {
    color: #ffe6c7;
    background:
        repeating-linear-gradient(-45deg, #1a1205 0 22px, #241a08 22px 44px),
        #1a1205;
    border-inline-start: .9vh solid #f08a24;
}
.oref-stripe .oref-title  { color: #ffb257; }
.oref-stripe .oref-kicker { background: #f08a24; color: #2a1400; }
.oref-stripe .oref-zones li:not(.oref-more),
.oref-dark .oref-zones li:not(.oref-more) { background: rgba(255, 230, 199, .07); border-color: rgba(255, 230, 199, .18); }
.oref-stripe .oref-note   { color: #ffd2a0; }
.oref-stripe .oref-src    { color: #e0b98f; }

/* בהיר — כתום על לבן, למסכים בלובי מואר מאוד */
.oref-soft {
    background: #fff8f0; color: #4a1f00;
    border-inline-start: 1.1vh solid #c2410c;
}
.oref-soft .oref-title  { color: #9a3412; }
/* לבן על #9a3412 = 7.31:1; על #c2410c היה רק 5.18:1 */
.oref-soft .oref-kicker { background: #9a3412; color: #fff; }
.oref-soft .oref-zones li:not(.oref-more) { background: rgba(154, 52, 18, .08); border-color: rgba(154, 52, 18, .18); }
.oref-soft .oref-migun-n { color: #9a3412; }
.oref-soft .oref-note   { color: #5c2800; }
.oref-soft .oref-src    { color: #6b3410; }

/* כהה — כתום על שחור */
.oref-dark {
    background: #0d0803; color: #ffdcb4;
    border-inline-start: .9vh solid #f08a24;
}
.oref-dark .oref-title  { color: #ffa53d; }
.oref-dark .oref-kicker { background: #f08a24; color: #2a1400; }
.oref-dark .oref-migun-n { color: #ffa53d; }
.oref-dark .oref-note   { color: #ffcf9c; }
.oref-dark .oref-src    { color: #d9ab7d; }

/* תרגיל — נראה אחרת לגמרי. מסך בלובי שכותב "ירי רקטות" בתרגיל
   מייצר בהלה אמיתית, ולכן ההבדל חייב להיות מיידי ולא בניואנס. */
.oref-drill { background: #1e3a5f !important; color: #d6e6ff !important; }
.oref-drill .oref-title  { color: #9ec5ff !important; }
.oref-drill .oref-kicker { background: #9ec5ff !important; color: #0b1c33 !important; }
.oref-drill .oref-zones li:not(.oref-more) { background: rgba(158, 197, 255, .10) !important; border-color: rgba(158, 197, 255, .24) !important; }
.oref-drill .oref-migun-n { color: #9ec5ff !important; }
.oref-drill .oref-note   { color: #c8dcf7 !important; }


/* ---------- מקלטים קרובים ---------- */
/* יורש את צבעי הסגנון הפעיל (currentColor + שקיפות) ולכן מתאים
   אוטומטית לכל אחת מארבע הערכות בלי כפילות של ארבעה בלוקים. */
.oref-shelters { margin-top: calc(.8vh * var(--oref-fit, 1)); text-align: start; }
.oref-sh-t { font-size: calc(2.1vh * var(--oref-fit, 1)); font-weight: 900; margin-bottom: calc(.5vh * var(--oref-fit, 1)); text-align: center; }
.oref-shelters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(.5vh * var(--oref-fit, 1)); }
.oref-shelters li {
    display: flex; flex-direction: column; line-height: 1.25;
    padding: calc(.6vh * var(--oref-fit, 1)) .9vh; border-radius: .8vh;
    background: rgba(127, 127, 127, .18); min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
}
.oref-shelters b { font-size: calc(2.1vh * var(--oref-fit, 1)); font-weight: 800; }
.oref-shelters span { font-size: calc(1.8vh * var(--oref-fit, 1)); opacity: .9; }
.oref-shelters i { font-size: calc(1.7vh * var(--oref-fit, 1)); font-style: normal; font-weight: 700; opacity: .85; }
/* ברקע בהיר השכבה האפורה חלשה מדי — מכהים אותה */
.oref-soft .oref-shelters li { background: rgba(154, 52, 18, .10); }
.oref-classic .oref-shelters li { background: rgba(31, 12, 0, .13); }

.oref-columns {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 1.2vw; align-items: start; min-width: 0; min-height: 0;
}
.oref-columns > * { min-width: 0; }
.oref-columns .oref-shelters { margin-top: 0; }
.oref-zones-col {
    padding: calc(.8vh * var(--oref-fit, 1)) .7vw;
    border-radius: .9vh; background: rgba(127, 127, 127, .11);
}

/* חלון מקלטים עצמאי. הוא יושב פיזית משמאל להתראה ולא בתוך התיבה שלה,
   ולכן רשימת היישובים נשארת ברוחב ובמספר השורות שבחר הלקוח. */
.oref-shelter-window {
    position: fixed; top: 0; bottom: 0; z-index: 2147482999;
    display: flex; flex-direction: column; justify-content: center;
    width: 26vw; min-width: 0; height: 100vh; height: 100dvh;
    padding: 3vh 1.5vw; box-sizing: border-box;
    font-family: inherit; text-align: start;
    border-inline-end: .45vh solid rgba(240, 138, 36, .82);
    box-shadow: -7px 0 22px rgba(0, 0, 0, .34);
}
.oref-shelter-window[hidden] { display: none !important; }
.oref-shelter-for-s { right: 22vw; width: 24vw; }
.oref-shelter-for-m { right: 29vw; width: 26vw; }
.oref-shelter-for-l { right: 37vw; width: 28vw; }
.oref-shelter-window .oref-shelters { margin: 0; }
.oref-shelter-window .oref-sh-t {
    margin-bottom: 1.25vh; font-size: 3vh; text-align: center;
}
.oref-shelter-window .oref-shelters ul { gap: .9vh; }
.oref-shelter-window .oref-shelters li {
    padding: 1.05vh 1vw; border: 1px solid rgba(127, 127, 127, .22);
    border-radius: 1vh;
}
.oref-shelter-window .oref-shelters b { font-size: 2.35vh; }
.oref-shelter-window .oref-shelters span { font-size: 1.95vh; }
.oref-shelter-window .oref-shelters i { font-size: 1.85vh; }
.oref-shelter-note {
    margin-top: 1.3vh; padding-top: 1vh; border-top: 1px solid rgba(127,127,127,.28);
    font-size: 1.65vh; font-weight: 700; text-align: center; opacity: .82;
}
.oref-shelter-classic { background: #fff3e2; color: #311300; }
.oref-shelter-soft { background: #fffaf4; color: #4a1f00; }
.oref-shelter-stripe { background: #171109; color: #ffe6c7; }
.oref-shelter-dark { background: #090705; color: #ffdcb4; }
.oref-shelter-window.oref-shelter-stripe .oref-shelters li,
.oref-shelter-window.oref-shelter-dark .oref-shelters li {
    background: rgba(255, 230, 199, .07); border-color: rgba(255, 230, 199, .18);
}

@media (max-aspect-ratio: 1/1) {
    .oref-size-s.oref-has-shelters,
    .oref-size-m.oref-has-shelters,
    .oref-size-l.oref-has-shelters { width: 92vw; }
    .oref-columns { grid-template-columns: 1fr; gap: 1vh; }
    .oref.oref-home-hit.oref-size-s,
    .oref.oref-home-hit.oref-size-m,
    .oref.oref-home-hit.oref-size-l { width: 56vw; }
    .oref-shelter-for-s,
    .oref-shelter-for-m,
    .oref-shelter-for-l { right: 56vw; width: 44vw; }
    .oref-shelter-window { padding-inline: 1.4vw; }
}

.oref-preview .oref-sh-t { font-size: 12px; }
.oref-preview .oref-shelters b { font-size: 12px; }
.oref-preview .oref-shelters span,
.oref-preview .oref-shelters i { font-size: 10px; }

/* ---------- נרות שומר השבת ----------
   כאן ולא רק ב-tv.css: אותם נרות מופיעים גם בדוגמה שבדף הבית,
   ובלי הסגנון הזה ה-SVG נצבע בכלום — נר בלתי נראה. */
.sv-candles { display: flex; gap: 5vw; align-items: flex-end; }
.sv-candle  {
    height: 26vh; width: auto; overflow: visible;
    filter: drop-shadow(0 1.2vh 1.4vh rgba(74, 48, 16, .18));
}
.sv-wax     { fill: #f6efe0; stroke: #d8c7a8; stroke-width: 1; }
.sv-wax-top { fill: #fffaf0; stroke: #dfcfb2; stroke-width: .7; }
.sv-wax-drip { fill: #eee1c9; opacity: .78; }
.sv-wax-shine { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.6; stroke-linecap: round; opacity: .72; }
.sv-holder  { fill: #c9a227; }
.sv-holder-shine { fill: none; stroke: #f0d66a; stroke-width: 1.2; stroke-linecap: round; opacity: .78; }
.sv-base    { fill: #b89120; }
.sv-wick    { fill: #4a3b28; }
.sv-wick-tip{ fill: #ff7a1e; opacity: .9; }
.sv-flame   { fill: #ff9818; filter: drop-shadow(0 0 2.4px rgba(255, 139, 12, .9)); }
.sv-flame-in{ fill: #fff2a8; filter: drop-shadow(0 0 1.6px rgba(255, 238, 133, .95)); }
.sv-ember   { fill: #6ea8ff; opacity: .55; }
.sv-glow    { fill: #f5a52426; }
.sv-glow2   { fill: #ffcf7a33; }
.sv-wax-light { fill: #ffb648; opacity: .28; }

/* עיקר התנועה הוא מורפינג הצורה (SMIL בתוך ה-SVG) — כאן נשארת רק
   תנועת-מִשנה: רעד עדין, הילות נושמות בקצבים זרים זה לזה, גחלת
   כחולה מהבהבת ואור חם שרוקד על ראש הנר. הכל בקצבים לא-מתחלקים,
   כך שהדפוס כמעט לא חוזר על עצמו. */
.sv-flame, .sv-flame-in {
    transform-box: fill-box;
    transform-origin: center bottom;
    will-change: transform, opacity;
}
.sv-glow, .sv-glow2 {
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform, opacity;
}
.sv-flame    { animation: svSway 3.1s ease-in-out infinite; }
.sv-flame-in { animation: svSway 2.23s ease-in-out -.7s infinite; }
.sv-glow     { animation: svGlow 2.9s ease-in-out -.4s infinite; }
.sv-glow2    { animation: svGlow2 1.7s ease-in-out -.2s infinite; }
.sv-ember    { animation: svEmber 1.9s ease-in-out infinite; }
.sv-wax-light{ animation: svWaxLight 2.5s ease-in-out -.9s infinite; }
.sv-candle:nth-child(2) .sv-flame    { animation-delay: -1.4s; animation-duration: 3.47s; }
.sv-candle:nth-child(2) .sv-flame-in { animation-delay: -.55s; animation-duration: 2.51s; }
.sv-candle:nth-child(2) .sv-glow     { animation-delay: -1.9s; animation-duration: 3.23s; }
.sv-candle:nth-child(2) .sv-glow2    { animation-delay: -.8s; animation-duration: 1.93s; }
.sv-candle:nth-child(2) .sv-ember    { animation-delay: -1.1s; animation-duration: 2.17s; }
.sv-candle:nth-child(2) .sv-wax-light{ animation-delay: -1.6s; animation-duration: 2.83s; }
@keyframes svSway {
    0%,100% { transform: rotate(-1.1deg); }
    30%     { transform: rotate(1.6deg) translateY(-.5px); }
    62%     { transform: rotate(-1.8deg); }
    82%     { transform: rotate(.9deg) translateY(-.3px); }
}
@keyframes svGlow {
    0%,100% { opacity:.55; transform: scale(.95,.98); }
    40%     { opacity:.95; transform: scale(1.14,1.10); }
    70%     { opacity:.7;  transform: scale(1.02,1.05); }
}
@keyframes svGlow2 {
    0%,100% { opacity:.5; transform: scale(.92,.95); }
    50%     { opacity:1;  transform: scale(1.12,1.16); }
}
@keyframes svEmber {
    0%,100% { opacity:.4; }
    45%     { opacity:.75; }
    75%     { opacity:.5; }
}
@keyframes svWaxLight {
    0%,100% { opacity:.18; }
    50%     { opacity:.4; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-flame, .sv-flame-in, .sv-glow, .sv-glow2, .sv-ember, .sv-wax-light { animation: none; }
}

/* ---------- שוליים בטוחים לטלוויזיה (overscan) ----------
   ‎<html data-safe>‎ נכתב רק במסך הלובי (tv.js), ולכן ההדגמה בפאנל ובדף הבית לא
   מושפעת. המשתנים מוגדרים ב-tv.css; בלעדיהם ה-fallback הוא 0px.
   <b>התיבה נשארת צמודה לשפה, רק התוכן שבה זז פנימה:</b> פס אדום שמגיע עד קצה
   המסך נראה נכון גם בטלוויזיה שלא חותכת, ו-fitAlert מודד את התיבה בתוך הריפוד
   ומקטין עד שהכל נכנס. הצד השמאלי של התיבה לעולם אינו על שפת המסך (רוחב עד 92vw). */
html[data-safe] .oref {
    padding-top: calc(2.4vh * var(--oref-fit, 1) + var(--safe-y, 0px));
    padding-bottom: calc(2.4vh * var(--oref-fit, 1) + var(--safe-y, 0px));
    padding-right: calc(1.8vw + var(--safe-x, 0px));
}
/* חלון המקלטים נוגע בשפה העליונה והתחתונה; במסך עומד (1/1) גם בשפה השמאלית */
html[data-safe] .oref-shelter-window {
    padding-top: calc(3vh + var(--safe-y, 0px));
    padding-bottom: calc(3vh + var(--safe-y, 0px));
}
@media (max-aspect-ratio: 1/1) {
    html[data-safe] .oref-shelter-window { padding-left: calc(1.4vw + var(--safe-x, 0px)); }
}