/* base.css: טוקנים, טיפוגרפיה ופריסה בסיסית.

   כיוון עיצובי: מכשיר מדידה, לא אפליקציית שיווק. נייר ודיו, גריד צפוף,
   אקסנט אחד בלבד (פטרול) ואות אזהרה אחת (ענבר) ששמורה לזמן וללחץ.
   הצבעים הסמנטיים (נכון/שגוי) הם דיו כהה ולא ניאון, כדי שדף מלא שאלות
   לא ייראה כמו לוח מודעות. */
:root{
  /* דיו ונייר */
  --ink:#15181C;
  --paper:#F2F1ED;          /* אפור־חם בעל כרומה נמוכה, לא לבן קר */
  --surface:#FBFAF8;
  --surface-2:#EDEBE6;

  --text:var(--ink);
  --text-2:#565B63;
  --text-3:#6E737B;
  --border:#D9D6CF;
  --rule:#C4C0B7;           /* קו הפרדה דק, כמו קו על טופס */

  /* אקסנט יחיד */
  --primary:#0E5E58;
  --primary-strong:#0A4A45;
  --primary-soft:rgba(14,94,88,.10);
  --primary-line:rgba(14,94,88,.26);

  /* אות זמן ולחץ */
  --signal:#9A5B12;
  --signal-soft:rgba(154,91,18,.12);

  /* שמות תואמים לקוד הקיים: accent/warning/danger ממופים לאותה פלטה */
  --accent:#0E5E58;
  --warning:#9A5B12;
  --danger:#9B2C2C;

  --good:#1F6B3D;
  --bad:#9B2C2C;

  --shadow:0 1px 2px rgba(21,24,28,.06);
  --shadow-lg:0 6px 22px rgba(21,24,28,.10);

  /* רדיוסים מדורגים: כרטיס כמעט חד כמו טופס, כפתור מעט מעוגל, שבב עגול */
  --radius:5px;
  --radius-sm:4px;
  --radius-btn:7px;

  --fig-stroke:#2A2E34; --fig-fill:none;
  --header-h:58px;
  --focus:#0E5E58;
}
[data-theme="dark"]{
  --ink:#E8E6E1;
  --paper:#131518;
  --surface:#1A1D21;
  --surface-2:#22262B;

  --text:var(--ink);
  --text-2:#A3A7AE;
  --text-3:#8E939B;
  --border:#2E333A;
  --rule:#3A4048;

  --primary:#4FB3A9;
  --primary-strong:#67C5BB;
  --primary-soft:rgba(79,179,169,.14);
  --primary-line:rgba(79,179,169,.32);

  --signal:#D99A3E;
  --signal-soft:rgba(217,154,62,.16);

  --accent:#4FB3A9;
  --warning:#D99A3E;
  --danger:#D97A72;

  --good:#5FBE84;
  --bad:#D97A72;

  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 8px 26px rgba(0,0,0,.55);
  --fig-stroke:#C9CDD3;
  --focus:#7FD3C9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI','Arial Hebrew','Noto Sans Hebrew',Arial,sans-serif;
  background:var(--paper); color:var(--text);
  line-height:1.62; min-height:100vh;
  font-variant-numeric:tabular-nums;
  transition:background .25s,color .25s;
  -webkit-font-smoothing:antialiased;
}

/* היררכיה נשענת על משקל וריווח, לא על גופן שאי אפשר לטעון מקומית */
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
h2{font-size:1.28rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
h3{font-size:1.02rem;font-weight:700;letter-spacing:-.005em}
p{color:var(--text-2)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* תווית קטנה בשוליים, במקום אימוג'י ככותרת סעיף */
.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;
  color:var(--text-3);text-transform:uppercase;
  display:block;margin-bottom:4px;
}

/* ===== מיקוד מקלדת =====
   טבעת אחת לכל האלמנטים האינטראקטיביים. outline ולא border, כדי שלא תזיז
   פריסה, ו-focus-visible כדי שלא תופיע בלחיצת עכבר. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  position:relative;z-index:2;
}
/* בתוך מכלים עם overflow חתוך (סרגל ניווט נגלל, כרטיס עם overflow:hidden)
   טבעת חיצונית נחתכת ואינה נראית, ולכן מציירים אותה בתוך גבולות האלמנט. */
.nav button:focus-visible,
.review-item summary:focus-visible,
.cat-card:focus-visible,
.mobile-nav button:focus-visible{
  outline-offset:-3px;
}

/* טקסט לקוראי מסך בלבד */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
table{border-collapse:collapse}
.ltr{direction:ltr;text-align:left}
.mono{font-family:'Consolas','Courier New',monospace;font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

.container{max-width:1080px;margin:0 auto;padding:0 20px}
.boot-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}

/* ===== סרגל עליון ===== */
.app-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;
}
.app-header .container{display:flex;align-items:center;gap:8px;width:100%}
.logo{
  display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:1.06rem;
  cursor:pointer;white-space:nowrap;letter-spacing:-.02em;
}
.logo .logo-badge{
  width:9px;height:9px;border-radius:2px;background:var(--primary);
  display:inline-block;flex:0 0 auto;transform:translateY(-1px);
}
.nav{display:flex;gap:0;margin-inline-start:22px;flex:1;overflow-x:auto}
.nav button{
  padding:8px 12px;font-size:.9rem;font-weight:600;color:var(--text-2);
  white-space:nowrap;border-bottom:2px solid transparent;border-radius:0;
  transition:color .15s,border-color .15s;
}
.nav button:hover{color:var(--text)}
.nav button.active{color:var(--text);border-bottom-color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:4px}
.icon-btn{
  width:34px;height:34px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  color:var(--text-2);transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}

main{padding:28px 0 70px}
@media(max-width:760px){
  h1{font-size:1.4rem}
  h2{font-size:1.14rem}
  .nav{margin-inline-start:6px}
  main{padding:18px 0 60px}
}

/* ===== ניווט תחתון בנייד ===== */
.mobile-nav{display:none}
@media(max-width:760px){
  .app-header .nav{display:none}
  .mobile-nav{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--rule);
    padding:3px 2px calc(3px + env(safe-area-inset-bottom,0px));
  }
  .mobile-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px;border-radius:var(--radius-sm);color:var(--text-3);
    font-size:.68rem;font-weight:600;min-height:48px;justify-content:center;
    border-top:2px solid transparent;
  }
  .mobile-nav button.active{color:var(--primary);border-top-color:var(--primary)}
  .mobile-nav .mn-icon{font-size:1.1rem;line-height:1}
  main{padding-bottom:86px}
  .logo{font-size:.98rem}
}
@media(max-width:760px){
  /* בזמן מבחן אין ניווט תחתון, כדי שלא ייצאו בטעות משאלה מתוזמנת */
  body.in-test .mobile-nav{display:none}
  body.in-test main{padding-bottom:24px}
  .kbd-hint{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}