/* ─────────────────────────────────────────────────────────────────────
   guide.css — עיצוב משותף לעמודי ההדרכה והמדריכים.

   כל צבע, מרווח ומשקל מגיעים מ-design-tokens.css. הקובץ הזה אינו
   מגדיר צבעים משלו אלא רק פריסה: כותרות מקטע, טבלאות, כרטיסי אזהרה,
   וגושי נוסח שצריך לקרוא מהם בקול.

   שני עמודי המדריכים נבנו במקור כדפים עצמאיים, כל אחד עם לוח צבעים
   משלו — אחד בהיר ואחד כהה. הם נראו כאילו הודבקו לאתר, ולא היו חלק
   ממנו. כאן הם חוזרים לשפה אחת.

   מובייל תחילה: הטבלאות גוללות בתוך עצמן ולא דוחפות את הדף, והרשתות
   מתקפלות לעמודה אחת.
   ───────────────────────────────────────────────────────────────── */

.guide-wrap { max-width: 860px; margin-left:auto;margin-right:auto;margin-inline:auto; padding: var(--sp-5) var(--sp-4) var(--sp-9); }

/* ── הכותרת הראשית ── */
.guide-head { text-align: center; padding: var(--sp-7) 0 var(--sp-5); }
.guide-head .kicker { letter-spacing: var(--tracking-label); color: var(--c-gold-400); font-size: .78rem; }
.guide-head h1 { margin: var(--sp-2) 0 var(--sp-3); line-height: 1.15; }
.guide-head .lede { color: var(--ink-soft); max-width: 52ch; margin-left:auto;margin-right:auto;margin-inline:auto;
  font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ניווט בין חלקי המדריך */
.guide-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-7); }
.guide-jump a { display: block; padding: var(--sp-3) var(--sp-4); text-decoration: none;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); transition: border-color .18s ease, background .18s ease; }
.guide-jump a:hover { border-color: var(--line-accent); background: var(--bg-raised); }
.guide-jump .k { display: block; font-size: .72rem; color: var(--ink-dim);
  letter-spacing: var(--tracking-label); margin-bottom: 2px; }
.guide-jump .t { font-family: 'Frank Ruhl Libre', serif; font-size: 1.08rem; color: var(--c-gold-300); }

/* ── חלק ומקטע ── */
.guide-part { margin-top: var(--sp-8); scroll-margin-top: 12px; }
.guide-part > h2 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); color: var(--c-gold-300);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line-accent); }
.guide-part > .lede { color: var(--ink-soft); margin: var(--sp-3) 0 0; max-width: 60ch; }

.guide-sec { margin-top: var(--sp-6); }
.guide-sec h3 { font-size: 1.18rem; padding-bottom: 6px; margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line); }
.guide-sec h4 { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-1); color: var(--c-gold-200); }
.guide-sec p { margin: 0 0 var(--sp-3); }
.guide-sec ul, .guide-sec ol { padding-right:1.3em;padding-inline-start:1.3em; margin: 0 0 var(--sp-3); }
.guide-sec li { margin-bottom: 6px; }

/* ── טבלאות: גוללות בתוך עצמן, לעולם לא דוחפות את הדף ── */
.guide-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-4) 0;
  border: 1px solid var(--line); border-radius: 12px; }
.guide-table table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 30rem; }
.guide-table th, .guide-table td { text-align: start; padding: 10px 12px;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table th { font-size: .74rem; font-weight: 600; color: var(--ink-dim);
  letter-spacing: .04em; background: var(--bg-inset); position: sticky; top: 0; }
.guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* ── כרטיסים ── */
.guide-card, .guide-warn, .guide-good, .guide-now {
  padding: var(--sp-4); margin: var(--sp-4) 0; border-radius: 12px; font-size: .95rem;
}
.guide-card { background: var(--bg-surface); border: 1px solid var(--line); }
.guide-warn { background: rgba(224,133,133,.07); border-right:3px solid var(--c-rose-400);border-inline-start:3px solid var(--c-rose-400); }
.guide-warn b { color: var(--c-rose-400); }
.guide-good { background: rgba(143,176,99,.09); border-right:3px solid var(--c-olive-400);border-inline-start:3px solid var(--c-olive-400); }
.guide-now  { background: var(--bg-surface); border: 1px solid var(--line-accent); text-align: center; }
.guide-now .lbl { font-size: .74rem; color: var(--ink-dim); letter-spacing: var(--tracking-label); }
.guide-now .big { font-family: 'Frank Ruhl Libre', serif; font-size: 1.5rem;
  color: var(--c-gold-300); margin: 4px 0 6px; }
.guide-now p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ── נוסח שאומרים בקול: גדול יותר, מרווח יותר ── */
.guide-nusach { background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0;
  font-family: 'Noto Serif Hebrew', 'Frank Ruhl Libre', serif;
  font-size: 1.06rem; line-height: 2.05; }
.guide-nusach .step { display: block; font-family: 'Assistant', sans-serif;
  font-size: .72rem; letter-spacing: var(--tracking-label); color: var(--c-gold-400);
  margin: var(--sp-4) 0 2px; }
.guide-nusach .step:first-child { margin-top: 0; }

.guide-bracha { background: rgba(212,169,79,.09); border-right:3px solid var(--c-gold-400);border-inline-start:3px solid var(--c-gold-400);
  border-radius: 8px; padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
  font-family: 'Noto Serif Hebrew', serif; font-size: 1.05rem; line-height: 1.95; }

blockquote.guide-q { margin: var(--sp-4) 0; padding: 4px var(--sp-4);
  border-right:2px solid var(--line-strong);border-inline-start:2px solid var(--line-strong); color: var(--ink-soft); font-size: .95rem; }
blockquote.guide-q cite { display: block; font-style: normal; font-size: .78rem;
  color: var(--ink-dim); margin-top: 6px; }

/* ── מצפן ההנחה — שלוש רוחות סביב הפירות ── */
.guide-compass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  max-width: 24rem; margin: var(--sp-4) auto; }
.guide-compass div { background: var(--bg-surface); border: 1px solid var(--line);
  padding: var(--sp-3) 8px; text-align: center; font-size: .8rem; min-height: 4.5rem;
  display: flex; flex-direction: column; justify-content: center; border-radius: 8px; }
.guide-compass .mid { background: rgba(143,176,99,.16); border-color: var(--c-olive-500); }
.guide-compass .x { background: transparent; border: 0; }
.guide-compass b { font-family: 'Frank Ruhl Libre', serif; font-size: .92rem; display: block; }
.guide-compass small { color: var(--ink-dim); font-size: .72rem; }

/* ── יציאות ── */
.guide-exits { display: flex; flex-wrap: wrap; gap: 8px var(--sp-4);
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.guide-exits a { color: var(--c-gold-300); text-decoration: none; font-size: .92rem;
  border-bottom: 1px solid var(--line); }
.guide-exits a:hover { border-color: var(--c-gold-400); }

.guide-sources { margin-top: var(--sp-6); font-size: .86rem; color: var(--ink-dim); }
.guide-sources h3 { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: var(--sp-2); }
.guide-sources li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .guide-wrap { padding-left:var(--sp-3);padding-right:var(--sp-3);padding-inline:var(--sp-3); }
  .guide-nusach { padding-left:var(--sp-3);padding-right:var(--sp-3);padding-inline:var(--sp-3); font-size: 1.02rem; }
  .guide-compass { max-width: 100%; }
}
@media print {
  .guide-sec, .guide-table { break-inside: avoid; }
}