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

:root {
  color-scheme: light;

  --desk: #3a3833;
  --desk-2: #2e2c28;
  --paper: #f7f5ee;
  --ink: #1b1a15;        /* 15.97:1 על הנייר */
  --ink-soft: #4e4b43;   /* 7.98:1, עדיין AAA. אין דיו חיוור מזה, בשום מקום */
  --rule: #b6b1a4;       /* קווים בלבד, אף פעם לא טקסט */
  --wash: rgba(27, 26, 21, 0.07);

  --tear: 9px;
  --tear-w: 16px;

  --font: "Miriam Mono CLM", "Simple CLM", "DejaVu Sans Mono", "Liberation Mono",
          ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --desk: #08080a;
    --desk-2: #050506;
    --paper: #17171a;
    --ink: #eae7de;        /* 14.47:1 */
    --ink-soft: #aeaa9e;   /* 7.70:1 */
    --rule: #3d3c38;
    --wash: rgba(234, 231, 222, 0.08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --desk: #08080a;
  --desk-2: #050506;
  --paper: #17171a;
  --ink: #eae7de;        /* 14.47:1 */
  --ink-soft: #aeaa9e;   /* 7.70:1 */
  --rule: #3d3c38;
  --wash: rgba(234, 231, 222, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--desk);
  background-image: radial-gradient(120% 60% at 50% 0, var(--desk) 0%, var(--desk-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* ---------- פס הנייר ---------- */

.slip {
  position: relative;
  width: min(44rem, 100% - 1.25rem);
  margin: clamp(1rem, 4vw, 2.5rem) auto;
  padding: calc(var(--tear) + 1.4rem) clamp(0.9rem, 3.5vw, 1.6rem) calc(var(--tear) + 1.6rem);
  background: var(--paper);
  box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3), -5px 0 20px rgba(0, 0, 0, 0.3);
}

/* הקצה המשונן: משולשים בצבע השולחן שמונחים מעל הנייר */
.slip::before,
.slip::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--tear);
  background: var(--desk);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--tear-w) 100%;
  mask-size: var(--tear-w) 100%;
}

.slip::before {
  top: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,10 16,0' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,10 16,0' fill='%23000'/%3E%3C/svg%3E");
}

.slip::after {
  bottom: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,10 8,0 16,10' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,10 8,0 16,10' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- כלי עזר משותפים ---------- */

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0.7rem 0; }
.rule.dashed { border-top-style: dashed; margin: 1.1rem 0; }

/* השורה הקלאסית של קבלה: תיאור, נקודות מובילות, סכום */
.leader {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.leader::after {
  content: "";
  flex: 1 1 1.5rem;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-0.32em);
}

.line,
.line-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.45rem 0 0;
}

.amt {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.line-total { font-weight: 700; }
.line-total .amt { font-size: 1.125rem; }

.line-note {
  margin: 0.05rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.fineprint {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.fineprint.center { text-align: center; }

.section-title {
  margin: 0 0 0.6rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- ראש הקבלה ---------- */

.slip-head { text-align: center; }

.vendor {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.vendor-line {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.doc-type {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.doc-meta,
.pay-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.4rem;
  margin: 0.6rem 0 0;
}

.doc-meta div,
.pay-meta div { display: flex; gap: 0.4rem; align-items: baseline; }

.doc-meta dt,
.pay-meta dt {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.doc-meta dd,
.pay-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.slip-head h1 {
  margin: 0.3rem 0 0.5rem;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.blurb {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.75;
  text-align: start;
}

/* ---------- תיבת פרטי הלקוח ---------- */

.slip-box {
  margin-top: 1.1rem;
  border: 1px solid var(--ink);
  padding: 0.85rem 0.9rem 1rem;
}

.box-title {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.field { margin-top: 0.85rem; }

.field label,
.field .label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

.stack-top { margin-top: 0.7rem; }

input[type="number"],
input[type="search"] {
  width: 100%;
  padding: 0.35rem 0.1rem;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  border-radius: 0;
}

input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
button:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.money-input {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.money-input input {
  width: 7ch;
  flex: none;
  font-size: 1.5rem;
  font-weight: 800;
  border-bottom-color: var(--ink);
  appearance: textfield;          /* בלי חצי הגלגלת, כדי שהשדה יישאר צר כמו על נייר */
  -moz-appearance: textfield;
}

.money-input input::-webkit-outer-spin-button,
.money-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.money-input .suffix {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-soft);
  pointer-events: none;
}

input[type="range"] {
  width: 100%;
  margin-top: 0.7rem;
  accent-color: var(--ink);
}

/* נקודות הציון של המשק, מודפסות ישר על המחוון */

/*
 * חצי מנקודות הציון יושבות מעל המחוון וחצי מתחתיו, כדי שיהיה להן מקום.
 * גובה השורה מוגדר פעם אחת כאן, ומספר השורות מגיע מ-app.js דרך --tick-rows.
 * תווית היא תמיד שתי שורות טקסט, ולכן שורה נמוכה מזה הייתה גולשת החוצה.
 */
.range-marks {
  --tick-row: 2.55rem;
  position: relative;
  height: calc(var(--tick-rows, 1) * var(--tick-row));
  margin-top: 0.15rem;
}

.range-marks-top { margin: 0.6rem 0 0.15rem; }

.tick {
  position: absolute;
  top: 0;
  display: block;
  padding-top: 0.5rem;
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  transform: translateX(50%);      /* ממורכז על הנקודה עצמה, בכיוון RTL */
}

/* מעל המחוון: החריץ בתחתית התווית ומצביע כלפי מטה, אל המסלול */
.range-marks-top .tick {
  top: auto;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.tick-end { transform: translateX(100%); text-align: start; }
.tick-start { transform: none; text-align: end; }

.tick-end::before { inset-inline-start: 0; }
.tick-start::before { inset-inline-start: 100%; }

/* החריץ עצמו, שיוצא מהמחוון אל התווית */
.tick::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  width: 1px;
  height: 0.4rem;
  background: var(--ink-soft);
}

.range-marks-top .tick::before { top: auto; bottom: 0; }

.tick-r1 { top: var(--tick-row); }
.range-marks-top .tick-r1 { top: auto; bottom: var(--tick-row); }

.tick-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}

.tick-value {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}


/* ---------- תרשימים ---------- */

.chart-block {
  margin: 1.1rem 0 0;
  padding: 0;
}

.chart-block figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.chart-title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chart-sub {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.chart {
  width: 100%;
  height: 232px;
}

/*
 * ECharts ממקם טקסט לפי הנחה של כיוון שמאל לימין. בתוך דף RTL זה מזיז את
 * תוויות הצירים אל מחוץ לשטח הנראה, ולכן ה-SVG עצמו מוצהר כ-LTR. הטקסט
 * העברי בתוך כל תווית עדיין נקרא מימין לשמאל, כי זה מה שהדפדפן עושה לו.
 */
.chart svg { direction: ltr; }

#curveChart { height: 200px; }
.chart-donut { height: 210px; }
.chart-short { height: 168px; }
#methodChart { height: 216px; }

.chart-note {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hint {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* בורר מצבים: הנבחר מודפס בהיפוך דיו, כמו הדגשה במדפסת תרמית */

.segmented { display: flex; gap: 0.4rem; }
.segmented label { margin: 0; }

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--ink-soft);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.segmented input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

label.check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
  letter-spacing: 0;
}

label.check input { accent-color: var(--ink); width: 0.9rem; height: 0.9rem; }

.advanced {
  margin-top: 1.1rem;
  border-top: 1px dashed var(--rule);
  padding-top: 0.7rem;
}

.advanced summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  list-style-position: inside;
}

/* ---------- מקטעים ---------- */

.slip-section { margin-top: 1.2rem; }

.tool-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.tool-row input[type="search"] { flex: 1; }

.ghost-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  padding: 0.45rem 0.8rem;
  min-height: 2.25rem;
  cursor: pointer;
  white-space: nowrap;
}

.ghost-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.primary-btn {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.primary-btn:hover { background: transparent; color: var(--ink); }

/* הכפתור השני בזוג: אותה צורה, בלי המילוי, כדי שהראשון יישאר הראשון. */
.quiet-btn {
  margin-top: 0.5rem;
  color: var(--ink);
  background: transparent;
}

.quiet-btn:hover { background: var(--ink); color: var(--paper); }

.primary-btn[disabled] { opacity: 0.55; cursor: default; }

#stubNote { margin-top: 0.55rem; }

.view-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.view-tools .zero-toggle { margin: 0; margin-inline-start: auto; }

.row-count {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.row-count span {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.zero-toggle {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

.zero-toggle input { width: 0.8rem; height: 0.8rem; }

.search-status {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  min-height: 1em;
}

.col-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding: 0 0.1rem;
}

.col-head + .rule { margin-top: 0.35rem; }
.col-head { margin-top: -0.35rem; }

/* הכותרת הרצה: איזה אשכול ואיזה סעיף מודפסים כרגע מתחת לאצבע */
.running-head {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0;
  padding: 0.4rem 0.1rem;
  min-height: 1.9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.running-head.is-on { opacity: 1; }

/* ---------- עץ התקציב ---------- */

.node > .node-row {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr) auto;   /* minmax(0) או שהעץ העמוק גולש */
  align-items: baseline;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.1rem;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--rule);
  font: inherit;
  color: inherit;
  text-align: start;
}

.node.has-children > .node-row { cursor: pointer; }
.node.has-children > .node-row:hover { background: var(--wash); }

/* תוצאת חיפוש שאפשר לרדת אליה במפה מתנהגת כמו שורה שאפשר לפתוח. */
.node-row[data-jump] { cursor: pointer; }
.node-row[data-jump]:hover { background: var(--wash); }

.twisty {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  transition: transform 0.15s ease;
  display: inline-block;
  text-align: center;
}

.node.open > .node-row .twisty { transform: rotate(-90deg); }

.row-main { min-width: 0; }

.row-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.row-name .tag {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  padding: 0 0.35em;
  white-space: nowrap;
}

.row-trail,
.row-note {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- שורות שנויות במחלוקת ---------- */

.tag.flag-tag {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  letter-spacing: 0.04em;
}

.tag.flags-below {
  border-style: dashed;
  font-weight: 400;
}

.node.is-flagged > .node-row { background: var(--wash); }

/* הנימוק לסימון, מודפס מתחת לשורה עם פס בשוליים כמו הערה בשוליים של דף */
.row-why {
  display: block;
  margin-top: 0.35rem;
  padding-inline-start: 0.6rem;
  border-inline-start: 2px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- ההסבר שמתחת לשורה ---------- */

.row-what {
  display: block;
  margin-top: 0.25rem;
  padding-inline-start: 1.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

/*
 * התקציר הוא ה-summary עצמו, ולכן הוא גם השורה שנקראת וגם הידית שפותחת. אין
 * שורת "עוד" נפרדת, כי שורה כזאת הייתה מוסיפה בחזרה את הגובה שהקיצור חסך.
 */
summary.row-what {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary.row-what::-webkit-details-marker { display: none; }

/* משולש קטן בקצה הימני, באותו רוחב שבו יושב ה-twisty של השורה שמעל */
summary.row-what::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.row-explain[open] > summary.row-what::before { content: "\2212"; }

.row-detail {
  display: block;
  padding-inline-start: 1.25rem;
}

.row-full {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.row-claims {
  display: block;
  margin-top: 0.2rem;
  padding-inline-start: 0.6rem;
  border-inline-start: 1px solid var(--rule);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
}

.claim { display: block; }
.claim-criticism::before { content: "ביקורת: "; font-weight: 700; color: var(--ink); }

/*
 * שתי השורות שמדווחות טענה של צד. הן מקבלות את אותו משקל בדיוק, אותו גודל
 * ואותו דיו, כי ההבדל היחיד שהאתר מצהיר עליו ביניהן הוא מי טוען אותן.
 */
.claim-right::before { content: "ביקורת מימין: "; font-weight: 700; color: var(--ink); }
.claim-left::before { content: "ביקורת משמאל: "; font-weight: 700; color: var(--ink); }

.claim-right,
.claim-left { margin-top: 0.35rem; }

.claim-src { display: block; font-size: 0.8125rem; }
.claim-src a { color: var(--ink-soft); }

.flag-legend {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.flag-legend .tag {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0 0.35em;
  border: 1px solid var(--ink);
}

/* הרמות העמוקות נעשות שקטות יותר, כדי שהעין תראה קודם את הגדול */
.node.depth-2 > .node-row .row-name,
.node.depth-3 > .node-row .row-name,
.node.depth-4 > .node-row .row-name { font-size: 0.9375rem; font-weight: 400; }

.node.depth-2 > .node-row,
.node.depth-3 > .node-row,
.node.depth-4 > .node-row { padding-block: 0.4rem; }

/*
 * העומק לא נקנה בהחוורה של הדיו: כל טקסט כאן נשאר ב-AAA. מה שמשתנה זה משקל
 * האות, ההזחה וקו ההנחיה המקווקו שרץ לאורך כל תת-עץ.
 */
.node.depth-3 > .node-row .row-name,
.node.depth-4 > .node-row .row-name { color: var(--ink-soft); }

.children {
  display: block;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px dotted var(--rule);
}

.row-amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row-amount .amount {
  display: block;
  font-weight: 700;
  font-size: 1rem;
}

.node.depth-2 .row-amount .amount,
.node.depth-3 .row-amount .amount,
.node.depth-4 .row-amount .amount { font-size: 0.9375rem; font-weight: 400; }

.row-amount .pct {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/*
 * מספר הסימוכין התקציבי, הכי שקט בשורה. הוא היחיד בעמוד שיוצא מהכלל של
 * "שום טקסט לא קטן מ-13 פיקסלים ושום דיו לא חלש מ-AAA": הוא לא נועד
 * לקריאה רצופה אלא לאימות מול ספר התקציב, ובגודל מלא הוא גנב את השורה.
 */
.row-amount .code,
.level-nums .code {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.4875rem;      /* 40% פחות מ-0.8125rem */
  font-weight: 400;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0.5;              /* 40% פחות מ-0.85 */
}

/* ---------- המפה ---------- */

/*
 * המפה מודפסת כקבלה ולא כרשימה של קופסאות: אין מסגרות, אין מילויים, ואין
 * פינות מעוגלות. מה שמחזיק אותה מסודרת הוא שארבע העמודות זהות בכל שורה ובכל
 * עומק. לכן כל השורות הן אחיות ב-DOM, והעומק נכנס אל תוך עמודת השם בלבד:
 * ברגע שרמה פנימית יושבת במכל עם ריפוד, עמודת הסכום נשברת והנייר נראה כמו
 * טופס.
 *
 * עמודת הסכום מיושרת לקצה החיצוני שלה ולא לרוחב קבוע, כי רוחב קבוע היה חייב
 * להתאים ל"8,600,000 ₪" של תצוגת ארבעים השנה וגונב חצי שורה בכל שאר הזמן.
 */

/*
 * המרחק שבו מתחיל השם: עמודת האחוז הימנית ועוד המרווח שאחריה. הטקסט שמודפס
 * מתחת לשורה פתוחה מוסט באותו מרחק, ולכן הוא משתנה יחד עם העמודות במסך צר.
 */
.receipt { --map-inset: 4.4rem; }

.map-block + .map-block {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--rule);
}

.map-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.map-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.map-total {
  font-weight: 700;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.map-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.map-note {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- שורה על הנייר ---------- */

.item {
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 1fr) auto 3.4rem;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.1rem;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.item:hover { background: var(--wash); }
.item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/*
 * מספר עם מינוס או עם אחוז הוא רצף של ספרות ותווים ניטרליים, ובשורה עברית
 * הסימן נודד לצד השני של המספר. כל תא מספרי הוא אי דו-כיווני משלו.
 */
.item-pct,
.item-amt,
.item-total {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * האחוזים מוצהרים LTR ולא רק מבודדים. בידוד לבד לא מספיק: המינוס הוא תו
 * ניטרלי, ובתוך תא שכיוונו ימין-לשמאל הוא נודד אל הקצה השני של המספר.
 * הסכום דווקא נשאר RTL, כי שם זה מה שמציב את ה-₪ לפני הספרות, בדיוק כמו
 * בספח שנשלח.
 */
.item-pct,
.item-total { direction: ltr; }

.item-pct {
  text-align: right;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.item-name {
  font-size: 0.9375rem;
  line-height: 1.4;
}

.item-name .txt { min-width: 0; }

.item-amt {
  text-align: end;
  font-size: 0.9375rem;
}

.item-total {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/*
 * העומק נקרא משני דברים: השם נכנס פנימה, ומהמקום שאליו הוא נכנס יורד קו
 * מנוקד. הקו מצויר על כל שורה בנפרד ומצטרף לרכבת אחת רצופה, כי שורות באותו
 * עומק נכנסות בדיוק לאותו מרחק. בלעדיו, אחרי תת-עץ פתוח אי אפשר לדעת שחזרת
 * רמה למעלה, והאחוזים נראים כאילו הם קופצים בלי סיבה.
 */
.item.depth-2 .item-name { padding-inline-start: 1.1rem; }
.item.depth-3 .item-name { padding-inline-start: 2.2rem; }
.item.depth-4 .item-name { padding-inline-start: 3.3rem; }
.item.depth-5 .item-name { padding-inline-start: 4.4rem; }

.item.depth-2 .txt,
.item.depth-3 .txt,
.item.depth-4 .txt,
.item.depth-5 .txt {
  padding-inline-start: 0.5rem;
  border-inline-start: 1px dotted var(--rule);
}

/*
 * שורה פתוחה היא הכותרת של מה שמודפס מתחתיה, ולכן היא מודגשת ומופרדת בקו
 * מנוקד. הדגשה בלבד, בלי היפוך דיו: היפוך על שורה אחת בתוך רשימה ארוכה קופץ
 * כמו כתם ולא כמו כותרת.
 */
.item.is-open { font-weight: 700; }
.item.is-open .item-pct,
.item.is-open .item-total { color: var(--ink); }
.item.is-open .item-name::after { border-bottom-style: solid; }

.item.is-flagged .txt > .flag-tag { margin-inline-end: 0.3rem; }

.item-flags {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- מה שמודפס מתחת לשורה פתוחה ---------- */

.item-note,
.item-why,
.item-full,
.item-claims,
.item-figures {
  margin: 0.1rem 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
}

.item-note { color: var(--ink); }

.item-why {
  color: var(--ink);
  border-inline-start: 2px solid var(--ink);
  padding-inline-start: 0.6rem;
}

.item-full { color: var(--ink); }

.item-claims {
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 0.6rem;
}

.item-figures {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}


/* ---------- בועת ההסבר ---------- */

/*
 * בועה אחת לכל העמוד. היא יושבת ב-fixed מעל הכול, ולכן היא לא מוסיפה גובה
 * לנייר ולא נחתכת בקצה של שום מכל.
 */
.bubble {
  position: fixed;
  z-index: 40;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.5rem 0.65rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.bubble.is-on { opacity: 1; visibility: visible; }

/*
 * במסך צר אין מקום גם להזחה של ארבע רמות, גם לשם וגם לעמודת סכום שמורה מקום
 * ל"270.2 מיליארד ש"ח · 39.8%". השם מקבל את כל הרוחב, והסכום יורד לשורה משלו.
 */
@media (max-width: 560px) {
  .children { padding-inline-start: 0.5rem; }

  /*
   * במסך צר העמודות מצטמצמות אבל נשארות ארבע. השורה היא מה שהופך את זה
   * לקבלה, ושבירת הסכום לשורה משלו הייתה מכפילה את אורך המפה.
   */
  /*
   * ארבע עמודות לא נכנסות ל-341 פיקסלים בלי לשבור כל שם לשתי שורות, ולכן
   * במסך צר החלק מכלל התקציב יורד. הוא הפחות דחוף מהשניים: מי שקורא רמה
   * מסוימת שואל קודם איך היא מתחלקת, והמספר עצמו נשאר בבועה ובשורה הפתוחה.
   */
  .receipt { --map-inset: 3.3rem; }
  .item { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.3rem; }
  .item-total { display: none; }
  .item-name, .item-amt { font-size: 0.875rem; }

  .two-up { grid-template-columns: 1fr; gap: 0.7rem; }

  .node > .node-row { grid-template-columns: 0.8rem minmax(0, 1fr); }

  .row-amount {
    grid-column: 2;
    text-align: start;
    margin-top: 0.3rem;
    white-space: normal;      /* השורה הזאת מתארכת במסך צר, ומותר לה לרדת שורה */
  }

  .row-amount .amount,
  .row-amount .pct,
  .row-amount .code { white-space: nowrap; }

  .row-amount .amount,
  .row-amount .pct { display: inline; }

  .row-amount .amount::after {
    content: " · ";
    color: var(--ink-soft);
  }

  /* הקוד נשאר בשורה משלו גם כאן, אחרת השורה ארוכה מדי וגולשת */
  .row-amount .code { display: block; margin-top: 0.05rem; }
}

mark {
  background: var(--ink);
  color: var(--paper);
  padding: 0 0.15em;
}

.empty {
  padding: 1.4rem 0.1rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-align: center;
}

/* ---------- הסכום הגדול ---------- */

.grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.grand-label {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.grand-amt {
  font-size: clamp(1.6rem, 8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.grand-note {
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.period-toggle {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.period-toggle label { margin: 0; }
.period-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.period-toggle span {
  display: block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ink-soft);
  font-size: 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.period-toggle input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.period-toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* מספר מוסתר: הכוכביות שייכות לצד שמאל של הספרות, כמו על קבלה אמיתית */
#paySlip { direction: ltr; unicode-bidi: isolate; }

.pay-head {
  margin: 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- הפריטים שכולם מתווכחים עליהם ---------- */

.extras { margin-top: 0.4rem; }

.extra { margin-top: 0.55rem; }

.extra + .extra { border-top: 1px dotted var(--rule); padding-top: 0.55rem; }

.extra-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.extra-value {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.extra-note {
  margin: 0.1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- האותיות הקטנות ---------- */

.fineprint-block h2 {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fineprint-block p,
.fineprint-block li {
  margin: 0 0 0.45rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.fineprint-block ul { margin: 0; padding-inline-start: 1rem; }

.disclaimer { color: var(--ink-soft) !important; }

.sources li { margin-bottom: 0.2rem; }
.sources a { color: var(--ink); }

/* ---------- תחתית הקבלה ---------- */

.slip-foot { margin-top: 1.4rem; text-align: center; }

.stars {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.stars.latin { direction: ltr; font-weight: 400; color: var(--ink-soft); font-size: 0.875rem; }

.thanks {
  margin: 0.7rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.barcode {
  height: 42px;
  width: min(15rem, 85%);
  margin: 1rem auto 0.3rem;
  background-image: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 13px,
    var(--ink) 13px 14px, transparent 14px 18px,
    var(--ink) 18px 19px, transparent 19px 23px);
}

.barcode-no {
  margin: 0;
  direction: ltr;
  font-size: 0.875rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.printed {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- מתג התצוגה, מחוץ לנייר ---------- */

.theme-toggle {
  position: fixed;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 5;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  opacity: 0.7;
}

.theme-toggle:hover { opacity: 1; }

@media (max-width: 480px) {
  .theme-toggle { opacity: 0.45; }
}

/* ---------- הדפסה ---------- */

@media print {
  html, body { background: #fff; }
  .slip { box-shadow: none; width: 100%; margin: 0; padding: 0; }
  .slip::before, .slip::after { display: none; }
  .theme-toggle, .tool-row, .view-tools, .primary-btn, .period-toggle,
  .running-head, .range-marks, .bubble { display: none; }
  input[type="range"] { display: none; }

  /* על נייר אין מה ללחוץ, ולכן תגית היא פריט מודפס ולא כפתור. */
  .tag-btn { break-inside: avoid; }
  .tag-btn.is-open { background: none; color: inherit; }
  .tag-btn.is-open .tag-total,
  .tag-btn.is-open .tag-share { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}