/* pages.css: עמודי התוכן הסטטיים.

   העמודים האלה אינם חלק מהאפליקציה. הם מסמכים רגילים שגוגל יכול לקרוא,
   ולכן כל התוכן שלהם כתוב ישירות ב-HTML ולא מיוצר ב-JavaScript. אפליקציית
   התרגול יושבת ב-index.html ומגיעים אליה מהקישור שבתחתית כל עמוד.

   הטוקנים מגיעים מ-base.css. כאן יש רק פריסת מסמך והרכיבים שנחוצים לה.

   הערה על מצב כהה: base.css מגדיר את הפלטה הכהה תחת [data-theme="dark"],
   שאותו קובע theme.js בתוך האפליקציה. בעמוד סטטי אין את הסקריפט הזה, ולכן
   מי שמגיע מגוגל עם מערכת במצב כהה היה מקבל עמוד לבן. הבלוק שלמטה מכסה את
   המקרה שבו איש עוד לא קבע ערך מפורש. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --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;
  }
}

/* ===== פריסה ===== */
.doc{max-width:min(74ch,100%);margin:0 auto;padding:0 20px 72px}

.doc-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;margin-bottom:28px;border-bottom:1px solid var(--rule);
}
.doc-top a.brand{font-weight:800;letter-spacing:-.02em;color:var(--text);font-size:1.02rem}
.doc-top a.brand:hover{text-decoration:none;color:var(--primary)}
.doc-top nav{display:flex;gap:14px;font-size:.86rem}

/* פירורי לחם */
.crumbs{font-size:.8rem;color:var(--text-3);margin-bottom:10px}
.crumbs a{color:var(--text-3)}
.crumbs a:hover{color:var(--primary)}

.doc h1{margin-bottom:12px}

/* התשובה הקצרה בראש העמוד. מי שהגיע מחיפוש מקבל תשובה לפני שהוא גולל. */
.lede{
  font-size:1.06rem;line-height:1.6;color:var(--text);
  border-inline-start:3px solid var(--primary);
  padding-inline-start:16px;margin-bottom:32px;
}

.doc h2{margin:38px 0 12px}
.doc h3{margin:26px 0 8px}
.doc p{margin-bottom:14px}
.doc ul,.doc ol{margin:0 0 16px;padding-inline-start:22px;color:var(--text-2)}
.doc li{margin-bottom:7px}
.doc strong{color:var(--text);font-weight:700}

/* ===== טבלה ===== */
.tbl-wrap{overflow-x:auto;margin-bottom:20px}
.doc table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:420px}
.doc th,.doc td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--border);vertical-align:top}
.doc thead th{
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--rule);white-space:nowrap;
}
.doc tbody tr:last-child td{border-bottom:none}

/* ===== שאלת דוגמה ===== */
.q{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);padding:20px;margin-bottom:22px;
}
.q .q-tag{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);display:block;margin-bottom:8px;
}
.q .stem{color:var(--text);font-weight:600;margin-bottom:14px}
.q .given{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:14px;font-size:.92rem;
}
.q .given p{margin-bottom:6px}
.q .given p:last-child{margin-bottom:0}

.opts{list-style:none;margin:0 0 4px;padding:0}
.opts li{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 13px;margin-bottom:7px;color:var(--text);font-size:.94rem;
}
.opts li .k{font-weight:700;color:var(--text-3);margin-inline-end:8px}

/* הפתרון סגור כברירת מחדל, כדי שאפשר יהיה לנסות קודם.
   details פתיח גם בלי JavaScript, ולכן גוגל קורא את התוכן שבתוכו. */
.sol{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.sol>summary{
  cursor:pointer;font-weight:700;color:var(--primary);font-size:.92rem;
  list-style:none;padding:4px 0;
}
.sol>summary::-webkit-details-marker{display:none}
.sol>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.sol[open]>summary::before{content:"▾ "}
.sol>summary:hover{text-decoration:underline;text-underline-offset:3px}
.sol .body{padding-top:10px}
.sol .body p{margin-bottom:10px;font-size:.93rem}
.sol .why{list-style:none;padding:0;margin:12px 0 0}
.sol .why li{
  font-size:.9rem;color:var(--text-2);
  padding:8px 12px;margin-bottom:6px;border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.sol .why li b{color:var(--text);font-weight:700}
.sol .why li.ok{background:var(--primary-soft);border:1px solid var(--primary-line)}

/* ===== הערה צדדית ===== */
.note{
  border:1px solid var(--border);border-inline-start:3px solid var(--signal);
  background:var(--signal-soft);border-radius:var(--radius-sm);
  padding:13px 16px;margin-bottom:20px;font-size:.92rem;color:var(--text-2);
}
.note b{color:var(--text)}

/* ===== שאלות נפוצות ===== */
.faq{border-top:1px solid var(--rule);margin-top:10px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--text);padding:13px 0;
  list-style:none;font-size:.96rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:left;color:var(--text-3);font-weight:400;font-size:1.15rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--primary)}
.faq .a{padding:0 0 15px;color:var(--text-2);font-size:.93rem}
.faq .a p{margin-bottom:10px}
.faq .a p:last-child{margin-bottom:0}

/* ===== קריאה לפעולה ===== */
.cta{
  border:1px solid var(--primary-line);background:var(--primary-soft);
  border-radius:var(--radius);padding:22px;margin:36px 0 30px;text-align:center;
}
.cta h2{margin:0 0 8px;font-size:1.12rem}
.cta p{margin-bottom:16px;font-size:.94rem}
.cta a.btn{
  display:inline-block;background:var(--primary);color:#fff;
  padding:11px 26px;border-radius:var(--radius-btn);font-weight:700;font-size:.96rem;
}
[data-theme="dark"] .cta a.btn{color:#0F1416}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .cta a.btn{color:#0F1416}}
.cta a.btn:hover{background:var(--primary-strong);text-decoration:none}
.cta small{display:block;margin-top:10px;color:var(--text-3);font-size:.8rem}

/* ===== קישורים לעמודים קרובים ===== */
.related{margin-top:34px;border-top:1px solid var(--rule);padding-top:20px}
.related h2{margin:0 0 14px;font-size:1rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.related a{
  display:block;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:11px 14px;color:var(--text);font-size:.93rem;font-weight:600;
}
.related a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}
.related a span{display:block;font-weight:400;font-size:.83rem;color:var(--text-3);margin-top:2px}

/* ===== תחתית ===== */
.doc-foot{
  margin-top:44px;border-top:1px solid var(--rule);padding-top:18px;
  font-size:.82rem;color:var(--text-3);
}
.doc-foot p{margin-bottom:8px;color:var(--text-3)}
.doc-foot nav{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}

@media (max-width:560px){
  .doc{padding:0 16px 56px}
  .doc h1{font-size:1.45rem}
  .lede{font-size:1rem}
  .doc-top nav{gap:11px;font-size:.82rem}
}