/* ==========================================================================
   הקול הפנימי — מערכת עיצוב
   תכלת → סגול על לבן. ניטרלים בהטיה סגלגלה.
   ========================================================================== */

:root{
  --sky:#2FA8DC;
  --violet:#7A5AD0;
  --sky-soft:#E8F5FC;
  --violet-soft:#F0EBFB;

  --ink:#241C33;
  --ink-2:#544B6B;
  --ink-3:#6E6786;

  --paper:#FFFFFF;
  --mist:#F7F5FC;
  --mist-2:#EFEBF8;
  --line:#E6E2F2;
  --line-2:#D6D0E8;

  --ok:#2E9E76;
  --warn:#C98A2E;

  --grad:linear-gradient(135deg,var(--sky) 0%,var(--violet) 100%);
  /* טקסט לבן על התכלת הבהירה נמדד ב-2.71 בלבד — מתחת לתקן. הכפתור
     הראשי מקבל אותו מסלול תכלת→סגול בגוונים כהים יותר, כדי שהכתובית
     תיקרא לכל אורך הגרדיאנט. השטחים הדקורטיביים נשארים ב---grad. */
  --grad-btn:linear-gradient(135deg,#1F7FA6 0%,#6A4BC2 100%);
  --shadow-sm:0 1px 2px rgba(36,28,51,.05), 0 2px 8px rgba(36,28,51,.04);
  --shadow-md:0 2px 4px rgba(36,28,51,.05), 0 12px 32px rgba(36,28,51,.07);
  --shadow-lg:0 4px 8px rgba(36,28,51,.06), 0 24px 56px rgba(36,28,51,.10);

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;

  --font:"Segoe UI","Assistant","Heebo","Rubik","Noto Sans Hebrew",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --measure:64ch;
}

@media (prefers-color-scheme:dark){
  :root{
    --sky:#5CC3F0; --violet:#A88CF0;
    --sky-soft:#132A38; --violet-soft:#1F1A33;
    --ink:#EFECF8; --ink-2:#B4ACC8; --ink-3:#9A93AE;
    --paper:#161225; --mist:#1C172E; --mist-2:#231D38;
    --line:#2E2745; --line-2:#3D3458;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.3);
    --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --sky:#5CC3F0; --violet:#A88CF0;
  --sky-soft:#132A38; --violet-soft:#1F1A33;
  --ink:#EFECF8; --ink-2:#B4ACC8; --ink-3:#9A93AE;
  --paper:#161225; --mist:#1C172E; --mist-2:#231D38;
  --line:#2E2745; --line-2:#3D3458;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 4px 8px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  --sky:#2FA8DC; --violet:#7A5AD0;
  --sky-soft:#E8F5FC; --violet-soft:#F0EBFB;
  --ink:#241C33; --ink-2:#544B6B; --ink-3:#6E6786;
  --paper:#FFFFFF; --mist:#F7F5FC; --mist-2:#EFEBF8;
  --line:#E6E2F2; --line-2:#D6D0E8;
  --shadow-sm:0 1px 2px rgba(36,28,51,.05), 0 2px 8px rgba(36,28,51,.04);
  --shadow-md:0 2px 4px rgba(36,28,51,.05), 0 12px 32px rgba(36,28,51,.07);
  --shadow-lg:0 4px 8px rgba(36,28,51,.06), 0 24px 56px rgba(36,28,51,.10);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--mist);
  color:var(--ink);
  line-height:1.65;
  font-size:16px;
  min-height:100vh;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance;letter-spacing:-.015em;font-weight:700}
p{margin:0}
button{font:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--violet); outline-offset:3px; border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
/* הסמל הוא עיגול על רקע לבן, ולכן חיתוך עגול ולא מלבן מעוגל —
   אחרת פינות לבנות בולטות מעל רקע הכותרת. */
.mark{width:42px;height:42px;flex:none;border-radius:50%;object-fit:contain;
      background:#fff;box-shadow:var(--shadow-sm)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.brand-txt i{font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.theme-btn{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  background:var(--mist-2);border:1px solid var(--line);border-radius:12px;
  color:var(--ink-2);cursor:pointer;transition:.25s var(--ease);
}
.theme-btn:hover{color:var(--violet);border-color:var(--line-2)}
/* מטרת נגיעה נוחה במובייל — כפתור אייקון בודד בפינת המסך */
@media (max-width:620px){ .theme-btn{width:44px;height:44px} }

/* ---------- progress ---------- */
.progress-wrap{
  position:sticky; top:67px; z-index:35;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:10px clamp(16px,4vw,40px);
}
.progress-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:7px}
.progress-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.progress-meta span:first-child{color:var(--ink-2);font-weight:600}
.progress-track{height:5px;background:var(--mist-2);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--grad);border-radius:99px;
  transition:width .5s var(--ease)}

/* ---------- layout ---------- */
main{flex:1;padding:clamp(24px,5vw,56px) clamp(16px,4vw,40px) 72px}
.wrap{max-width:760px;margin:0 auto}
.wrap-wide{max-width:940px;margin:0 auto}

.screen{animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,4vw,38px);box-shadow:var(--shadow-md);
}
.stack{display:flex;flex-direction:column}
.g-8{gap:8px}.g-12{gap:12px}.g-16{gap:16px}.g-20{gap:20px}.g-28{gap:28px}.g-36{gap:36px}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.11em;color:var(--violet);
  text-transform:none;
}
.lede{font-size:17px;color:var(--ink-2);line-height:1.75;max-width:var(--measure)}
.muted{color:var(--ink-3);font-size:14px}

/* ---------- landing ---------- */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:clamp(20px,5vw,44px) 0 8px}
.hero h1{font-size:clamp(32px,6vw,52px);letter-spacing:-.03em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .lede{font-size:clamp(16px,2.2vw,19px);text-align:center}

.quote-band{
  margin:8px auto 0;max-width:620px;padding:20px 26px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--sky-soft),var(--violet-soft));
  border:1px solid var(--line);
  font-size:18px;font-weight:600;color:var(--ink);text-align:center;letter-spacing:-.01em;
}

/* דבר בעל השיטה, לפני תחילת השאלון. מובלע ולא צועק: זהו הדבר האחרון
   שנקרא לפני הלחיצה על ההתחלה, ולכן הוא צריך להיקרא כפנייה אישית ולא
   כבאנר שיווקי. */
.rav-note{
  margin:6px auto 0;max-width:620px;padding:0 22px;
  border-inline-start:2px solid var(--violet);text-align:start;
}
.rav-note p{
  margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-2);font-style:italic;
}
.rav-note cite{
  display:block;margin-top:9px;font-style:normal;font-size:13.5px;
  font-weight:600;color:var(--ink-3);letter-spacing:.01em;
}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:7px}
.pillar b{font-size:15px}
.pillar span{font-size:14px;color:var(--ink-2);line-height:1.6}
.pillar .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--violet-soft);color:var(--violet);margin-bottom:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:99px;border:1px solid transparent;
  font-size:16px;font-weight:600;cursor:pointer;letter-spacing:-.01em;
  transition:.28s var(--ease);
}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 4px 14px rgba(122,90,208,.28)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(122,90,208,.36)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--violet);color:var(--violet)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn-lg{padding:17px 42px;font-size:17px}

.nav-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:30px}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field label .req{color:var(--violet)}
.field input,.field select{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--mist);color:var(--ink);
  font:inherit;font-size:15.5px;transition:.22s var(--ease);
}
/* Safari באייפון מזמזם את המסך בכל מיקוד על שדה שגופנו קטן מ-16px.
   15.5px היה חצי פיקסל מתחת לסף, וכל הקלדה בטופס קפצה. */
@media (max-width:767px){
  .field input,.field select,.gate-err ~ .field input{font-size:16px}
}
.field input::placeholder{color:var(--ink-3)}
.field input:hover,.field select:hover{border-color:var(--line-2)}

/* שאלה פתוחה — תיבת טקסט חופשי, בסגנון שדות הטופס */
.open-input{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--mist);color:var(--ink);
  font:inherit;font-size:16px;line-height:1.6;resize:vertical;min-height:120px;
  transition:.22s var(--ease);
}
.open-input::placeholder{color:var(--ink-3)}
.open-input:hover{border-color:var(--line-2)}

/* שני המוצרים בדף הבית — הדיין הפנימי והקול הפנימי */
.brand-pick{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media (max-width:520px){ .brand-pick{flex-direction:column;width:100%;max-width:340px} }
.field input:focus,.field select:focus{
  outline:none;border-color:var(--violet);background:var(--paper);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 12%,transparent);
}
.field .hint{font-size:12.5px;color:var(--ink-3)}
.field.err input{border-color:#D8607A}
.field .errmsg{font-size:12.5px;color:#D8607A;display:none}
.field.err .errmsg{display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.grid-2{grid-template-columns:1fr}}

.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);
  line-height:1.6;cursor:pointer}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--violet);cursor:pointer}

/* הצהרה שלא סומנה — מסומנת כמו כל שדה חסר, עם הודעה ולא רק בגוון */
.check-wrap .errmsg{display:none;font-size:12.5px;color:#D8607A;margin:6px 0 0 30px}
.check-wrap.err .errmsg{display:block}
.check-wrap.err .check{color:#D8607A}
.check-wrap.err .check input{outline:2px solid #D8607A;outline-offset:3px;border-radius:4px}

/* ---------- gate ---------- */
.gate-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;
  padding:9px 10px 9px 18px;border-radius:99px;
  background:var(--mist);border:1px solid var(--line);font-size:13.5px;color:var(--ink-2);
}
.gate-who{display:flex;align-items:center;gap:9px}
.gate-who svg{flex:none;color:var(--ok)}
.gate-who b{color:var(--ink);font-weight:650}
.gate-bar .btn{margin-inline-start:auto;padding:7px 16px;font-size:12.5px}
.gate-err{
  border-radius:var(--r-sm);padding:12px 15px;font-size:14.5px;line-height:1.6;color:#B33E5C;
  background:color-mix(in srgb,#D8607A 11%,transparent);
  border:1px solid color-mix(in srgb,#D8607A 32%,transparent);
}
@media (prefers-color-scheme:dark){.gate-err{color:#FF9DB0}}
:root[data-theme="dark"] .gate-err{color:#FF9DB0}
:root[data-theme="light"] .gate-err{color:#B33E5C}

/* ---------- questionnaire picker ---------- */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.picks{grid-template-columns:1fr}}
.pick{
  position:relative;text-align:right;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:14px;transition:.28s var(--ease);
}
.pick:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.pick.sel{border-color:var(--violet);box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 12%,transparent),var(--shadow-md)}
.pick-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pick h3{font-size:21px}
.pick .tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:99px;
  background:var(--violet-soft);color:var(--violet);white-space:nowrap}
.pick .tag.sky{background:var(--sky-soft);color:var(--sky)}
.pick p{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.pick ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pick li{font-size:14px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start}
.pick li svg{flex:none;margin-top:4px;color:var(--sky)}
.pick .meta{display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3)}
.pick .meta b{color:var(--ink-2);font-weight:600}

/* ---------- questionnaire ---------- */
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.sec-head h2{font-size:clamp(22px,3.4vw,29px)}
/* שורת הכלים של השאלון: יציאה שמורה. שקטה בכוונה — היא אינה מתחרה
   בכפתור "המשך", והיא נמצאת שם רק למי שמחפש אותה. */
.quiz-tools{display:flex;justify-content:flex-start;margin-top:14px}
.btn-link{
  background:none;border:0;padding:6px 2px;font:inherit;font-size:14px;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;transition:color .2s var(--ease);
}
.btn-link:hover{color:var(--violet)}
.btn-sm{padding:9px 18px;font-size:14px}

/* פס ההמשך בדף הבית — הדרך לחזור לשאלון שנעצר באמצע */
.resume-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;max-width:620px;margin:0 auto 22px;padding:14px 20px;
  background:var(--mist-2);border:1px solid var(--line);border-radius:var(--r);
}
.resume-bar span{font-size:15px;color:var(--ink-2)}

.note{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--sky-soft);border:1px solid color-mix(in srgb,var(--sky) 22%,transparent);
  border-radius:var(--r);padding:14px 17px;font-size:14px;color:var(--ink-2);line-height:1.65;
}
.note svg{flex:none;margin-top:3px;color:var(--sky)}

.q{padding:22px 0;border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:none;padding-bottom:6px}
.q-txt{display:flex;gap:12px;font-size:16.5px;line-height:1.6;margin-bottom:16px;color:var(--ink)}
.q-num{
  flex:none;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:var(--mist-2);color:var(--ink-3);font-size:12.5px;font-weight:700;margin-top:2px;
  transition:.25s var(--ease);
}
.q.done .q-num{background:var(--grad);color:#fff}

/* likert */
.scale{display:flex;flex-direction:column;gap:8px}
.scale-row{display:flex;gap:8px}
.sc{
  flex:1;position:relative;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--mist);transition:.22s var(--ease);
}
.sc:hover{border-color:var(--violet);background:var(--paper)}
.sc input{position:absolute;opacity:0;pointer-events:none}
.sc .n{font-size:17px;font-weight:700;color:var(--ink-2);transition:.2s}
.sc .l{font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.35;min-height:2.7em}
.sc:has(input:checked){background:var(--grad);border-color:transparent;
  box-shadow:0 4px 14px rgba(122,90,208,.26)}
.sc:has(input:checked) .n,.sc:has(input:checked) .l{color:#fff}
@media (max-width:560px){.sc .l{display:none}.sc{padding:14px 4px}}

/* single choice */
.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  position:relative;cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--mist);font-size:15px;line-height:1.6;color:var(--ink-2);
  transition:.22s var(--ease);
}
.opt:hover{border-color:var(--violet);background:var(--paper);color:var(--ink)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .dot{
  flex:none;width:19px;height:19px;border-radius:50%;border:2px solid var(--line-2);
  margin-top:3px;transition:.22s var(--ease);position:relative;
}
.opt:has(input:checked){border-color:var(--violet);background:var(--violet-soft);color:var(--ink)}
.opt:has(input:checked) .dot{border-color:var(--violet);background:var(--violet)}
.opt:has(input:checked) .dot::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--paper);
}

/* case block */
.case-story{
  background:var(--mist);border:1px solid var(--line);border-right:3px solid var(--violet);
  border-radius:var(--r);padding:20px 22px;font-size:15.5px;line-height:1.8;color:var(--ink-2);
  margin-bottom:8px;
}
.case-story b{color:var(--ink)}

/* ---------- interstitial ---------- */
.inter{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px 0}
.inter .ring{
  width:78px;height:78px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#fff;box-shadow:0 8px 28px rgba(122,90,208,.3);
  animation:pop .55s var(--ease) both;
}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.inter h2{font-size:clamp(23px,3.6vw,30px)}
.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{
  padding:9px 17px;border-radius:99px;font-size:14px;font-weight:600;
  background:var(--violet-soft);color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 20%,transparent);
}

/* ---------- done ---------- */
.done-list{display:flex;flex-direction:column;gap:11px;margin-top:6px;text-align:right;width:100%;max-width:440px}
.done-item{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.6}
.done-item svg{flex:none;margin-top:4px;color:var(--ok)}

/* ---------- מסמך פרטיות ----------
   טקסט רץ ארוך, ולכן שורה קצרה יותר מרוחב הכרטיס הרגיל: קריאה נוחה
   נשברת סביב 75 תווים לשורה, לא ברוחב המסך. */
.legal .card{text-align:right}
.legal h3{
  font-size:17px;font-weight:600;margin:26px 0 8px;color:var(--ink);
}
.legal h3:first-child{margin-top:0}
.legal p{margin:0 0 12px;color:var(--ink-2);line-height:1.75;max-width:68ch}
.legal .legal-list{
  margin:0 0 14px;padding-inline-start:20px;color:var(--ink-2);
  line-height:1.75;max-width:68ch;
}
.legal .legal-list li{margin-bottom:7px}
.legal .nav-row{justify-content:center}

/* קישור המסמך מתחת להצהרה במסך הפרטים */
.check-wrap .legal-link{
  display:block;margin-top:7px;font-size:13px;color:var(--violet);
  margin-inline-start:30px;
}

/* ---------- footer ---------- */
.foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot{
  text-align:center;padding:30px 24px 40px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:13.5px;display:flex;flex-direction:column;gap:5px;
  background:var(--paper);
}
.foot .fine{font-size:12px;opacity:.8}

/* ---------- save pill ---------- */
.saved{
  position:fixed;bottom:22px;inset-inline-start:22px;z-index:60;
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-md);
  font-size:13px;color:var(--ink-2);
  opacity:0;transform:translateY(8px);transition:.35s var(--ease);pointer-events:none;
}
.saved.show{opacity:1;transform:none}
.saved svg{color:var(--ok)}
.saved.err{border-color:#D8607A;color:#D8607A}
.saved.err svg{color:#D8607A}

/* ---------- תשובה שנייה אופציונלית ----------
   נחשפת רק אחרי בחירה ראשונה ורק בלחיצה מפורשת, ולכן היא מעוצבת
   כמדרג שני ולא כשדה שווה ערך: מוסטת פנימה, רקע רך וגופן קטן יותר.
   האפשרות שכבר נבחרה כראשונה מוצגת מעומעמת ואינה ניתנת לסימון. */
.second{margin-top:10px}
.second .btn-link{font-size:13.5px}
.second-box{
  margin-top:10px;padding:14px 16px;border-radius:var(--r);
  background:var(--mist);border:1px solid var(--line);
}
.second-note{font-size:13px;color:var(--ink-3);line-height:1.6;margin-bottom:10px}
.opts-2{margin-bottom:8px}
.opts-2 .opt{font-size:15px}
.opt-off{opacity:.38;pointer-events:none}
.second-clear{font-size:13px;color:var(--ink-3)}

/* שכבת הפער בית/חוץ: היגד אחד, שני סולמות מסומנים. העטיפה הפנימית
   (gap-side) היא ה-data-q, ולכן הספירה והסימון עובדים כמו בליקרט. */
.gap-pair{padding:22px 0;border-bottom:1px solid var(--line)}
.gap-pair:last-of-type{border-bottom:none;padding-bottom:6px}
.gap-pair .q-txt{margin-bottom:10px}
.q.gap-side{padding:8px 0 12px;border-bottom:none}
.gap-side-label{
  display:inline-block;font-size:13px;font-weight:700;color:var(--ink-3);
  margin-bottom:7px;padding:3px 10px;border-radius:999px;background:var(--mist-2);
}
.q.gap-side.done .gap-side-label{background:var(--grad);color:#fff}

/* שני הדגשים שהנבדקים שואלים עליהם שוב ושוב — בולטים בצבע ובמשקל,
   במסך ההנחיות (brief-emph) ובתזכורת שבכל מסך שאלות (note-emph). */
.brief-emph{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--violet-soft);border:2px solid var(--violet);border-radius:16px;
  padding:16px 18px;margin-top:18px;
  font-size:16.5px;font-weight:700;line-height:1.8;color:var(--ink);
}
.brief-emph svg{flex:0 0 auto;margin-top:3px;color:var(--violet)}
.note.note-emph{
  background:var(--violet-soft);border:1.5px solid var(--violet);
  color:var(--ink);font-weight:700;font-size:15px;
}
.note.note-emph svg{color:var(--violet)}

/* הודעת כשל בכניסה — הזמנה שפגה, נשללה או שאינה קיימת. אותו מבנה
   כמו .note, בצבע שאומר שמשהו לא תקין ולא שהכול כשורה. */
.note.note-bad{
  background:color-mix(in srgb,#D8607A 9%,transparent);
  border-color:color-mix(in srgb,#D8607A 34%,transparent);
  color:var(--ink);
}
.note.note-bad svg{color:#B8455F}
:root[data-theme="dark"] .note.note-bad svg{color:#FF9DB0}

/* ---------- דיאלוגים של המערכת (dialog.js) ---------- */
/* מחליפים את חלונות הדפדפן: אותו תפקיד, השפה העיצובית של המערכת. */
.dlg-veil{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:20px;background:rgba(20,14,35,.45);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .16s var(--ease);
}
.dlg-veil.on{opacity:1}
.dlg-veil.out{opacity:0}
.dlg{
  width:min(440px,94vw);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:22px 22px 18px;
  transform:translateY(10px) scale(.98);transition:transform .16s var(--ease);
  border-top:3px solid transparent;
  border-image:var(--grad) 1;border-image-width:3px 0 0 0;
}
.dlg-veil.on .dlg{transform:none}
.dlg-body{font-size:15px;line-height:1.65;color:var(--ink);white-space:normal}
.dlg-input{
  margin-top:14px;width:100%;padding:10px 12px;font:inherit;font-size:14.5px;
  color:var(--ink);background:var(--mist);border:1px solid var(--line-2);
  border-radius:var(--r-sm);
}
.dlg-input:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:transparent}
.dlg-row{
  display:flex;justify-content:flex-start;gap:10px;margin-top:18px;
  flex-direction:row-reverse;   /* האישור ראשון מימין בפריסת RTL */
}
.dlg-row .btn{padding:9px 20px;font-size:14px}
/* פעולה הרסנית: האישור אדום, שלא תאושר מתוך הרגל */
.dlg-danger{background:#C24B63 !important;box-shadow:none}
.dlg-danger:hover{background:#AD3C54 !important}
@media (prefers-reduced-motion:reduce){
  .dlg-veil,.dlg{transition:none}
}