/* Design tokens. Contrast checked for WCAG 2.0 AA (IS 5568): body text >= 7:1, muted >= 4.5:1, accent on white 6.9:1 */
:root {
  --bg: #f6f7f9; --card: #ffffff; --ink: #14161a; --muted: #5a606b; --line: #e2e5ea;
  --accent: #0b5cad; --accent-ink: #ffffff; --accent-soft: #e8f1fb; --good: #146c43; --good-soft: #e6f4ec; --warn: #8a4b00; --warn-soft: #fdf3e2;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --r: 14px; --fs: 16px; --hdr: 60px;
  --font: 'Heebo', system-ui, 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111317; --card: #1b1e24; --ink: #eef0f3; --muted: #a7adb8; --line: #2f343d; --accent: #6aa8ec; --accent-ink: #0b1320; --accent-soft: #1d2a3a; --good: #5fc28f; --good-soft: #15281e; --warn: #e2b04a; --warn-soft: #2b2312; } }
:root[data-theme="dark"] { --bg: #111317; --card: #1b1e24; --ink: #eef0f3; --muted: #a7adb8; --line: #2f343d; --accent: #6aa8ec; --accent-ink: #0b1320; --accent-soft: #1d2a3a; --good: #5fc28f; --good-soft: #15281e; --warn: #e2b04a; --warn-soft: #2b2312; }

/* accessibility menu states */
html.a11y-contrast { --bg: #000; --card: #000; --ink: #fff; --muted: #fff; --line: #fff; --accent: #ffeb3b; --accent-ink: #000; --accent-soft: #222; --good: #7cff9b; --good-soft: #000; --warn: #ffd166; --warn-soft: #000; --shadow: none; }
html.a11y-links a { text-decoration: underline !important; outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-font { --font: Arial, sans-serif; letter-spacing: .02em; word-spacing: .08em; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 2000; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 8px; }
.m { color: var(--muted); font-size: .875rem; }

/* buttons & fields: >= 44px touch targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; }
input[type=text], input[type=email], input[type=number], input[type=search], select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); width: 100%; }
fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.chk { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; background: var(--card); }
.chk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.chk small { display: block; color: var(--muted); }

/* header */
.hdr { position: sticky; top: 0; z-index: 1000; height: var(--hdr); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.125rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo svg { flex: none; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current=page] { background: var(--accent-soft); color: var(--accent); }
#navBtn { display: none; }
@media (max-width: 860px) {
  #navBtn { display: inline-flex; margin-inline-start: auto; }
  .nav { display: none; position: absolute; top: var(--hdr); inset-inline: 0; flex-direction: column; background: var(--card); border-bottom: 1px solid var(--line); padding: 8px; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .logo span { font-size: 1rem; }
}

/* footer */
.ftr { border-top: 1px solid var(--line); background: var(--card); padding: 24px 16px; font-size: .875rem; color: var(--muted); }
.ftr nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.ftr a { color: var(--ink); }

/* content pages */
.page { max-width: 820px; margin: 0 auto; padding: 32px 16px 56px; }
.page h1 { font-size: 2rem; margin: 0 0 8px; }
.page h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.page .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.page table { width: 100%; border-collapse: collapse; } .page th, .page td { text-align: right; border-bottom: 1px solid var(--line); padding: 8px 4px; vertical-align: top; }
.note { background: var(--warn-soft); border: 1px solid var(--warn); padding: 10px 14px; border-radius: 10px; }

/* a11y menu */
#a11yPanel { position: fixed; z-index: 1500; inset-block-start: calc(var(--hdr) + 8px); inset-inline-end: 12px; width: min(320px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; }
#a11yPanel[hidden] { display: none; }
#a11yPanel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#a11yPanel .btn[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* help chat */
#chatBtn { position: fixed; z-index: 950; bottom: 18px; inset-inline-end: 18px; box-shadow: var(--shadow); border-radius: 999px; min-height: 50px; }
#chat { position: fixed; z-index: 1200; bottom: 16px; inset-inline-end: 16px; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 90px)); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#chat[hidden] { display: none; }
.chh { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); }
#chatLog { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .9375rem; }
.msg.bot { background: var(--bg); align-self: flex-start; border-start-start-radius: 4px; }
.msg.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-start-end-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--card); color: var(--accent); cursor: pointer; font-size: .875rem; }
.chf { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chn { margin: 0; padding: 0 12px 8px; font-size: .75rem; }
.wabox { border: 1px solid var(--good); background: var(--good-soft); border-radius: 14px; padding: 12px; margin: 10px 0; display: grid; gap: 6px; }
.wabox p { margin: 0; }
@media (max-width: 860px) { #chatBtn { bottom: 76px; } #chat { inset: auto 0 0 0; width: 100vw; height: 85dvh; border-radius: 18px 18px 0 0; } }

/* community */
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 10px; }
.post h3 { margin: 0 0 4px; font-size: 1.0625rem; } .post .m { margin: 0 0 6px; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.post img { max-width: 100%; max-height: 360px; border-radius: 10px; display: block; margin: 8px 0; }
.reply { border-top: 1px solid var(--line); padding: 8px 0 4px; margin-inline-start: 12px; } .reply.off { background: var(--good-soft); border-radius: 10px; padding: 8px 10px; }
.pill { font-size: .75rem; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 999px; font-weight: 600; } .pill.ok { background: var(--good-soft); color: var(--good); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 16px 0 12px; overflow-x: auto; }
.tabs [role=tab] { min-height: 44px; padding: 0 14px; border: 0; background: none; border-bottom: 3px solid transparent; border-radius: 0; cursor: pointer; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tabs [role=tab][aria-selected=true] { color: var(--accent); border-color: var(--accent); }
textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font: inherit; color: inherit; }
.err { color: #b42318; } html.a11y-contrast .err { color: #ff8a80; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.sm { min-height: 40px; padding: 0 12px; font-size: .9375rem; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#cMap { height: 340px; border-radius: var(--r); border: 1px solid var(--line); }
.repf { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 8px; }

.steps { padding-inline-start: 20px; display: grid; gap: 10px; }
.steps ul { margin: 4px 0; }

.tbl { overflow-x: auto; max-width: 100%; }
.tbl td[dir=ltr] a { word-break: break-all; }
.rights { display: grid; gap: 10px; padding-inline-start: 20px; }
[hidden] { display: none !important; }
.wm { font-weight: 800; letter-spacing: -.01em; color: var(--accent); } .wm b { color: var(--good); font-weight: 800; }
.cmpbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.cmpbar select, .cmpbar input { width: 100%; }
.legend i { display: inline-block; width: 120px; height: 10px; border-radius: 5px; vertical-align: middle; background: linear-gradient(to left, #d6e6f8 0 20%, #9cc3ec 20% 40%, #5b9bd8 40% 60%, #2a6fb8 60% 80%, #0b4a8a 80%); }
.cmpwrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin: 12px 0 20px; }
#cmap { height: 70vh; border-radius: 16px; border: 1px solid var(--line); }
#cpanel { max-height: 70vh; overflow: auto; }
#cpanel table { width: 100%; border-collapse: collapse; font-size: .875rem; } #cpanel td, #cpanel th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; }
#cpanel th { color: var(--muted); font-weight: 500; } #cpanel h3 { margin: 18px 0 4px; color: var(--accent); font-size: 1rem; }
#cpanel td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb { position: relative; height: 8px; background: var(--accent-soft); border-radius: 4px; min-width: 50px; }
.pb b { position: absolute; top: -2px; width: 4px; height: 12px; border-radius: 2px; background: var(--accent); }
.pb s { position: absolute; top: -3px; right: 50%; width: 1px; height: 14px; background: var(--muted); }
.up { color: var(--good); } .dn { color: var(--warn); } .old { color: var(--warn); font-size: .75rem; white-space: nowrap; }
@media (max-width: 800px) { .cmpwrap { grid-template-columns: minmax(0, 1fr); } #cmap { height: 50vh; } #cpanel { max-height: none; } }
#cmap { overflow: hidden; contain: paint; }
.tbl { position: relative; }  /* keep .sr (absolute) inside the scroll box */
.lyrbox { margin: 12px 0; } .lyrbox summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lyr { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.lgrp { border: 0; margin: 0; padding: 0; } .lgrp legend { font-weight: 700; padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.lgrp legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lgrp .chk { min-height: 32px; }
.lgrp .chk { border: 0; background: none; padding: 2px 0; min-height: 32px; box-shadow: none; } .lgrp .chk:has(input:checked) { background: none; }
.lyr { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stg{display:flex;flex-wrap:wrap;gap:2px 8px;margin:6px 0;padding:0;list-style:none;font-size:.8rem;color:#6b7280}
.stg .ok{color:#15803d}.stg .now{color:#111827;font-weight:700}
.chip[aria-pressed="true"]{background:var(--accent);color:#fff}

.ftr a, nav.m a, nav[aria-label="פירורי לחם"] a { display: inline-block; min-height: 24px; padding-block: 3px; }
#view { min-height: calc(100vh - 80px); }
td a, tbody th a { display: inline-block; min-height: 24px; padding-block: 3px; }
.alrt{margin-top:6px}.alrt summary{cursor:pointer;color:var(--accent);font-weight:600;min-height:24px}.alrt form{display:grid;gap:4px;margin-top:6px}
.grade{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;font-weight:800;color:#fff}
.gA{background:#146c43}.gB{background:#3f8f3a}.gC{background:#9a6b00}.gD{background:#b54708}.gF{background:#b42318}
details.inl{display:inline}details.inl summary{cursor:pointer;color:var(--accent);min-height:24px}
.prw{display:flex;flex-wrap:wrap;gap:8px 16px}.prw label{display:grid;gap:2px}
.plab{font-size:13px;line-height:1.25;font-weight:600;font-family:inherit;color:#14161a;text-align:center;white-space:nowrap;transform:translate(-50%,-50%);text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff;pointer-events:none}.plab b{font-weight:800}.lz .plab{display:none}