/* ============================================================
   בסיס משותף לשלושת העמודים: אסימוני צבע, סרגל ניווט, טיפוגרפיה.
   מובייל-תחילה — כללי שולחן עבודה נמצאים ב-min-width למטה.
   ============================================================ */

:root{
  --paper:#EEEFF1; --plate:#FFFFFF;
  --graphite:#16191C; --muted:#5D666F; --faint:#8D959D;
  --hair:#C6CBD1; --hair-soft:#DEE1E5;
  --steel:#38516E; --steel-wash:#E4E9F0;
  --red:#A32B1E; --red-wash:#F5E4E1;
  --amber:#8A6516; --green:#2F6B44;
  --lift:0 1px 2px rgba(22,25,28,.06),0 10px 30px rgba(22,25,28,.05);
  --navh:52px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111417; --plate:#191D21;
  --graphite:#E6E9EC; --muted:#98A1AA; --faint:#6E777F;
  --hair:#2C3339; --hair-soft:#232A2F;
  --steel:#8AA7C8; --steel-wash:#1D2833;
  --red:#E07A6B; --red-wash:#2B1E1C;
  --amber:#D6A94A; --green:#6FBA8B;
  --lift:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --paper:#111417; --plate:#191D21;
  --graphite:#E6E9EC; --muted:#98A1AA; --faint:#6E777F;
  --hair:#2C3339; --hair-soft:#232A2F;
  --steel:#8AA7C8; --steel-wash:#1D2833;
  --red:#E07A6B; --red-wash:#2B1E1C;
  --amber:#D6A94A; --green:#6FBA8B;
  --lift:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;direction:rtl;background:var(--paper);color:var(--graphite);
  font-family:"Assistant",-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}

.wrap{max-width:940px;margin:0 auto;padding:0 16px 70px}

/* ── סרגל הניווט ───────────────────────────────── */
.topnav{position:sticky;top:0;z-index:40;background:var(--plate);
  border-bottom:1px solid var(--hair)}
.nav-inner{max-width:940px;margin:0 auto;padding:0 16px;height:var(--navh);
  display:flex;align-items:center;gap:10px}
.brand{font-family:"Rubik",sans-serif;font-weight:500;font-size:14px;
  color:var(--graphite);text-decoration:none;white-space:nowrap;flex:none}
.brand span{display:none}
.nav-links{display:flex;gap:0;margin-inline-start:auto;flex:none}
.nav-links a{font-size:12.5px;color:var(--muted);text-decoration:none;
  padding:7px 7px;border-radius:5px;white-space:nowrap;
  display:flex;align-items:center;gap:5px}
.nav-links a:hover{color:var(--graphite);background:var(--steel-wash)}
.nav-links a[aria-current]{color:var(--graphite);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--steel)}
.nav-links .badge{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--faint);font-variant-numeric:tabular-nums}
.nav-links a[aria-current] .badge{color:var(--steel)}

/* ── יסודות משותפים ────────────────────────────── */
.plate{background:var(--plate);border:1px solid var(--hair);
  box-shadow:var(--lift);margin:18px 0;padding:20px 16px}
.plate-head{display:flex;gap:12px;align-items:baseline;
  padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--hair)}
.pnum{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--red);
  letter-spacing:.1em;flex:none;padding-top:5px}
.plate h2{font-family:"Rubik",sans-serif;font-weight:500;
  font-size:clamp(19px,4.6vw,26px);margin:0;letter-spacing:-.01em;
  text-wrap:balance;line-height:1.25}
.plate h2 span{display:block;font-family:"Assistant",sans-serif;font-weight:300;
  font-size:14px;color:var(--muted);margin-top:6px;line-height:1.55}
p.body{font-size:15.5px;margin:0 0 14px;max-width:66ch}
p.body b{font-weight:600}

.cta{font-family:"Rubik",sans-serif;font-weight:500;font-size:15px;
  color:#fff;background:var(--steel);text-decoration:none;
  padding:11px 20px;border:1px solid var(--steel);display:inline-block}
:root[data-theme="dark"] .cta,
:root:not([data-theme="light"]) .cta{color:var(--plate)}
.cta:hover{background:var(--graphite);border-color:var(--graphite)}

/* הערות שוליים */
.margin{margin-top:20px;padding-top:14px;border-top:1px dashed var(--hair);
  display:grid;grid-template-columns:1fr;gap:3px 14px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--muted);line-height:1.7}
.margin dt{color:var(--red);white-space:nowrap}
.margin dd{margin:0 0 10px;font-family:"Assistant",sans-serif;font-size:13.5px}
.margin dd:last-child{margin-bottom:0}
.margin dd b{color:var(--graphite);font-weight:600}

/* תרשים שאינו יכול להתכווץ — נגלל בתוך עצמו בלבד */
.scroller{overflow-x:auto;margin-inline:-16px;padding-inline:16px;
  -webkit-overflow-scrolling:touch}
.scroller svg{display:block;height:auto;direction:ltr}
.scroll-hint{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--faint);margin:6px 0 0}

/* ── שולחן עבודה ───────────────────────────────── */
@media (min-width:700px){
  :root{--navh:56px}
  .wrap{padding:0 22px 90px}
  .nav-inner{padding:0 22px}
  .brand{font-size:15px}
  .brand span{display:inline;color:var(--faint);font-weight:400}
  .nav-links a{font-size:14px;padding:7px 13px}
  .plate{margin:26px 0;padding:30px 30px 26px}
  .plate-head{gap:16px;padding-bottom:14px;margin-bottom:24px}
  .plate h2 span{font-size:15px}
  .margin{grid-template-columns:auto 1fr;gap:9px 14px}
  .margin dd{margin:0}
  .scroller{margin-inline:-6px;padding-inline:6px}
  .scroll-hint{display:none}
}