/* צנצנות — jars on wooden shelves, a chalkboard on a mint wall. RTL, phone-first, wide-screen friendly. */

:root {
  --wall: #cfe8df;
  --wall-dot: #b0d7c9;
  --paper: #fbf6ec;
  --paper-2: #f1e9db;
  --card: #fffdf7;
  --ink: #3d3128;
  --muted: #8a7460;
  --line: #e3d8c6;
  --green: #2f4f43;
  --green-soft: #d5ead8;
  --amber: #b2660f;
  --amber-soft: #fbe3bd;
  --amber-line: #e0b56a;
  --red: #a83b32;
  --red-soft: #f4d9d5;
  --purple: #6b4f9e;
  --purple-soft: #e6dff2;
  --wood: #d3a56f;
  --wood-deep: #a67d4f;
  --coin: #f3c84f;
  --coin-deep: #c9962a;
  --chalk: #f6f1e3;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 1px 3px rgba(61, 49, 40, 0.08), 0 6px 18px rgba(61, 49, 40, 0.08);
  --tab-h: 66px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wall: #1f2f2a;
    --wall-dot: #2b3d37;
    --paper: #2b2621;
    --paper-2: #342e28;
    --card: #332d27;
    --ink: #f1e9dc;
    --muted: #b3a48f;
    --line: #4a4034;
    --green: #3f6b5b;
    --green-soft: #243a30;
    --amber: #e39a45;
    --amber-soft: #4a3520;
    --amber-line: #7a5a2a;
    --red: #e07a70;
    --red-soft: #4a2a27;
    --purple: #b39ddb;
    --purple-soft: #3a3050;
    --wood: #a67d4f;
    --wood-deep: #6f5236;
    --shadow: none;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  background-color: var(--wall);
  color: var(--ink);
  font-family: "Assistant", "Heebo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
body {
  min-height: 100vh;
  background-image: radial-gradient(var(--wall-dot) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  padding-bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));
  -webkit-user-select: none;
  user-select: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
.hand { font-family: "Amatic SC", "Segoe Print", "Comic Sans MS", cursive; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.bold { font-weight: 700; }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }
.hr { height: 1px; background: var(--line); margin: 12px 0; }

/* ---------------- header ---------------- */
.app-header {
  padding: calc(10px + env(safe-area-inset-top)) 18px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.app-title { font-family: "Amatic SC", "Segoe Print", cursive; font-size: 34px; font-weight: 700; line-height: 1; color: var(--green); }
.app-sub { color: var(--muted); font-size: 14px; }
.user-chip { font-size: 14px; color: var(--muted); }

/* ---------------- layout ---------------- */
#main { padding: 4px 16px 24px; max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) {
  #main { max-width: 1040px; }
  .wide-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  /* on a computer the chalkboard stays a chalkboard, not a billboard */
  .board-wrap { max-width: 560px; margin-left: auto; margin-right: auto; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.card.soft { background: var(--paper-2); }
.card-title { font-weight: 700; margin-bottom: 6px; }

/* ---------------- buttons & chips ---------------- */
.btn {
  display: block; width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 16px;
  padding: 13px 16px;
  margin-top: 10px;
  font-weight: 700;
}
.btn.primary { background: var(--green); border-color: var(--green); color: var(--chalk); box-shadow: 0 6px 14px rgba(47, 79, 67, 0.25); }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 9px 12px; font-size: 15px; width: auto; display: inline-block; margin: 6px 6px 0 0; }
.btn.hand { font-size: 27px; line-height: 1; padding: 14px 16px; }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 7px 13px; font-size: 15px;
}
.chip.selected { background: var(--green); border-color: var(--green); color: var(--chalk); font-weight: 700; }
.chip.muted { color: var(--muted); }

/* ---------------- the chalkboard ---------------- */
.board-wrap { position: relative; margin: 6px 22px 14px; padding-top: 30px; }
.board-wrap .string { position: absolute; top: 0; left: 0; width: 100%; height: 32px; display: block; }
.board-wrap .nail { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #5b4636; }
.board-wrap.flat { padding-top: 0; margin: 8px 0 10px; }
.board {
  background: #2f4f43; color: var(--chalk);
  border: 7px solid var(--wood); border-radius: 8px;
  box-shadow: 0 8px 18px rgba(61, 49, 40, 0.22);
  padding: 10px 14px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.board-wrap.flat .board { border-width: 5px; padding: 8px 12px 10px; }
.board .label { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 28px; line-height: 1; opacity: 0.85; }
.board .big { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 74px; line-height: 1; margin-top: 4px; }
.board .sub { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 26px; line-height: 1; opacity: 0.85; margin-top: 6px; }
.board .main { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 30px; line-height: 1.1; }
.board .quiet { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 21px; line-height: 1.1; opacity: 0.8; margin-top: 4px; }
.board.over .big, .board.over .main { color: #f7b7ad; }
.board.short { background: #7a4a12; }
.board .pending { margin-top: 10px; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 24px; line-height: 1; color: var(--coin); }

/* ---------------- shelves of jars ---------------- */
.shelf-label { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 27px; line-height: 1; color: var(--green); margin: 14px 8px 2px; display: block; }
.jars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 -2px; }
@media (min-width: 560px) { .jars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .jars { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.jars.weeks { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

/* a main shelf: exactly 3 slots wide, the rest reached by scrolling left (RTL) —
   the jar-unit's own plank sits edge to edge, so the plank scrolls as one piece too */
.jars.shelf {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: none; mask-image: none;
}
.jars.shelf::-webkit-scrollbar { display: none; }
.jars.shelf.dragging { cursor: grabbing; scroll-snap-type: none; }
.jars.shelf > .jar-unit { flex: 0 0 33.3333%; scroll-snap-align: start; }
@media (min-width: 560px) { .jars.shelf > .jar-unit { flex-basis: 25%; } }
@media (min-width: 900px) { .jars.shelf > .jar-unit { flex-basis: 16.6667%; } }
/* a quiet cue that more jars wait past an edge — only while there really are more (ui.js
   fadeShelf): .more-left fades the left 28px, .more-right the right 28px, both → one gradient */
.jars.shelf.more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
}
.jars.shelf.more-right {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px);
  mask-image: linear-gradient(to left, transparent 0, #000 28px);
}
.jars.shelf.more-left.more-right {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.jar-unit { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; margin-top: 12px; }
.jar-unit .jar-box { display: flex; align-items: flex-end; justify-content: center; width: 100%; padding: 0 10px; position: relative; }
/* a small paper chip pinned to the top of a jar's box: a קופה's distance from its goal (jar.js
   jarUnit `badge`, views/funds.js fundPct) — "62%", or gold once it is there */
.jar-chip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px 2px;
  font-family: "Amatic SC", cursive; font-weight: 700; font-size: 17px; line-height: 1; color: var(--ink);
  white-space: nowrap; box-shadow: 0 2px 5px rgba(61, 49, 40, 0.16); pointer-events: none;
}
.jar-chip.done { background: var(--coin); border-color: var(--coin-deep); }
.jar { width: 100%; height: auto; display: block; }
/* a picture in a jar's place (reserve chest, emergency money box): the wide jar's own box
   (120:105), the art contained and standing on the plank; inert so shelves drag and tap cleanly */
.jar-img {
  display: block; width: 100%; height: auto; aspect-ratio: 120 / 105;
  object-fit: contain; object-position: center bottom;
  pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  position: relative; z-index: 1; /* above the plank, so stage-5 floor coins lie on its front */
}
/* the art keeps empty room under the drawing (the chest: for the stage-5 floor coins) —
   lower it by exactly that room so the chest and the buffalo stand ON the plank.
   Measured on public/img (scripts/gen-reserve.mjs): 42/470 and 14/540 rows. */
.jar-img.art-reserve { transform: translateY(8.9%); }
.jar-img.art-emergency { transform: translateY(2.6%); }
.jar-unit .plank { width: 100%; height: 16px; background: var(--wood); border-bottom: 6px solid var(--wood-deep); box-shadow: 0 8px 14px rgba(61, 49, 40, 0.16); }
.jar-unit .stag { margin-top: 0; }
.jar-unit.selected .jar-box { filter: drop-shadow(0 0 7px rgba(243, 200, 79, 0.95)); }
.jar-unit:active .jar-box { transform: scale(0.97); }

/* a paper tag hanging from the shelf */
.stag {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px;
  padding: 3px 8px 5px; min-width: 88px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 6px rgba(61, 49, 40, 0.14);
}
.stag .nm { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 23px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stag .am { font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.stag.small { min-width: 64px; padding: 2px 6px 4px; }
.stag.small .nm { font-size: 19px; }
.stag.small .am { font-size: 14px; }
.jars.weeks .stag { min-width: 0; padding: 2px 4px 4px; }
.jars.weeks .stag .nm { font-size: 17px; }
.jars.weeks .stag .am { font-size: 13px; }
.jars.weeks .jar-unit .jar-box { padding: 0 6px; }
.stag.fast { background: var(--amber-soft); border-color: var(--amber-line); }
.stag.fast .am { color: var(--amber); }
.stag.over { background: var(--red-soft); border-color: var(--red); }
.stag.over .am { color: var(--red); }
.stag.wait .am { color: var(--amber); }
.stag.now { background: var(--green); border-color: var(--green); color: var(--chalk); }
.stag .am.flat { color: var(--muted); font-weight: 600; }
.stag.now .am.flat { color: rgba(246, 241, 227, 0.7); }

.chalk-line {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 10px 8px; margin-top: 8px; color: var(--green); text-align: right;
  font-family: "Amatic SC", cursive; font-weight: 700; font-size: 27px; line-height: 1;
}
.chalk-line svg { flex: 0 0 auto; }

.section-title { font-weight: 700; color: var(--muted); font-size: 14px; margin: 16px 4px 6px; letter-spacing: 0.02em; }

/* quiet rows: reserve, emergency, fixed */
.env-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px; margin-bottom: 8px; width: 100%; text-align: right;
}
.env-row .icon { font-size: 24px; width: 32px; text-align: center; }
.env-row .name { font-weight: 700; }
.env-row .amt { font-size: 20px; font-weight: 800; white-space: nowrap; }
.env-row .amt.neg { color: var(--red); }
.env-row .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.line-btn {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 12px 6px; color: var(--ink); font-weight: 600; text-align: right;
}
.line-btn .muted { font-weight: 400; }

/* ---------------- cards (moments): a note taped to the wall ---------------- */
.moment {
  position: relative; background: var(--paper);
  border-right: 4px solid var(--amber);
  transform: rotate(-0.55deg); margin-top: 20px;
}
.moment::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  width: 68px; height: 20px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(61, 49, 40, 0.09);
}
.moment .card-title { font-family: "Amatic SC", "Segoe Print", cursive; font-size: 27px; line-height: 1.05; color: var(--green); }
.moment.info { border-right-color: var(--green); }
.moment.serious { border-right-color: var(--red); }
/* a month about to close by itself: the last three days of choosing */
.moment.warn { border-right-color: var(--red); }
.moment.warn .card-title { color: var(--red); }
/* the household's announcement (src/announce.js): a photograph taped to the wall, then the words in full */
.moment.announce { border-right-color: var(--green); }
.announce-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-s); margin-bottom: 10px; }
.announce-text { white-space: pre-line; line-height: 1.6; margin-bottom: 12px; }
.moment.announce .btn { width: 100%; }
.ladder { font-size: 14px; color: var(--muted); margin-top: 4px; }
.ladder b { color: var(--ink); }
.policy-opt {
  width: 100%; text-align: right; border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px; margin-top: 8px; background: var(--card);
}
.policy-opt.selected { border-color: var(--green); background: var(--green-soft); }
.policy-opt .t { font-weight: 700; }

/* ---------------- tab bar + the coin ---------------- */
.tabbar {
  position: fixed; bottom: 0; right: 0; left: 0; z-index: 30;
  display: flex; align-items: stretch;
  background: var(--paper); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: "Amatic SC", cursive; font-weight: 700; font-size: 19px; line-height: 1;
}
.tab svg { width: 22px; height: 22px; }
.tab.selected { color: var(--green); }
.tab.tab-gone { visibility: hidden; pointer-events: none; }
.fab-slot { flex: 1; position: relative; }
.fab {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--coin); color: #5b4636;
  border: 3px solid var(--coin-deep);
  box-shadow: 0 6px 14px rgba(120, 80, 0, 0.3), inset 0 -4px 0 #d9a52e;
  display: flex; align-items: center; justify-content: center;
}
.fab::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed var(--coin-deep); }
.fab svg { width: 28px; height: 28px; position: relative; }
.fab:active { transform: translateX(-50%) scale(0.95); }

/* ---------------- sheets & overlays ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30, 24, 20, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.overlay.center { align-items: center; padding: 24px; }
.sheet {
  width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--paper); border-radius: 26px 26px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
  animation: up 220ms ease-out;
}
.overlay.center .sheet { border-radius: 22px; max-height: 88vh; padding-bottom: 20px; }
.sheet.full { max-height: 100vh; height: 100vh; border-radius: 0; padding-top: calc(10px + env(safe-area-inset-top)); }
@media (min-width: 900px) { .sheet.full { height: auto; max-height: 92vh; border-radius: 22px; } .overlay { align-items: center; padding: 24px; } }
@keyframes up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet-head .t { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 32px; line-height: 1; color: var(--green); }
.x { font-size: 22px; color: var(--muted); padding: 6px 10px; }
.grabber { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }

/* ---------------- expense sheet ---------------- */
/* direction:ltr so the ₪ sits after the number, like every other amount in the app */
.amount-display { text-align: center; padding: 4px 0 0; display: flex; direction: ltr; justify-content: center; align-items: baseline; gap: 6px; }
.amount-display .val { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 70px; line-height: 1; }
.amount-display .val.empty { color: var(--muted); }
.amount-display .cur { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 34px; line-height: 1; color: var(--muted); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 0; direction: ltr; }
.key {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  font-size: 24px; font-weight: 600; padding: 9px 0; box-shadow: 0 2px 0 var(--line);
}
.key:active { background: var(--paper-2); transform: translateY(1px); box-shadow: none; }
.key.ghost { background: var(--paper-2); color: var(--muted); font-size: 20px; }

.jar-pick { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.jar-pick::-webkit-scrollbar { display: none; }
.jar-pick .jar-unit { flex: 0 0 auto; width: 84px; margin-top: 4px; }
.jar-pick .jar-unit .jar-box { height: 76px; padding: 0 8px; }
.jar-pick .jar-unit .plank { height: 8px; border-bottom-width: 3px; }

.defaults { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.note-input, .text-input {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); margin-top: 8px;
}
.date-input { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.text-input.bad, .date-input.bad { border-color: var(--red); background: var(--red-soft); }

/* extra income: one row per destination, the last one takes the remainder */
.in-row { margin-top: 6px; gap: 6px; }
.in-row select { min-width: 0; }
/* .field input[type="text"] would stretch the amount to 100% and squeeze the jar picker away */
.field .in-row .in-amt { width: 76px; flex: 0 0 auto; text-align: center; padding: 10px 6px; }
.in-quarter { flex: 0 0 auto; padding: 6px 8px; margin: 0; }
.in-quarter:disabled { opacity: 0.45; }
.in-rest { width: 88px; flex: 0 0 auto; text-align: center; font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.in-rest.red { color: var(--red); }
.in-x { padding: 4px 6px; font-size: 18px; flex: 0 0 auto; position: relative; }
.in-x::after { content: ''; position: absolute; inset: -8px -8px; } /* a 44px tap area, the look unchanged */
.in-msg { min-height: 1.5em; margin: 4px 2px 0; }

/* ---------------- cover sheet ---------------- */
.src {
  width: 100%; text-align: right; display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-top: 8px;
}
.src .icon { font-size: 24px; width: 30px; text-align: center; }
.src .name { font-weight: 700; }
.src .sub { color: var(--muted); font-size: 13px; }
.src .max { font-weight: 800; white-space: nowrap; }
.src.suggested { border-color: var(--green); }
.src.selected { background: var(--green-soft); border-color: var(--green); }
.src.disabled { opacity: 0.5; }
.src.emergency { border-color: var(--red); }
.src.emergency.selected { background: var(--red-soft); }
.src.next_month { border-color: var(--red); border-style: dashed; }
.tag { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--green-soft); color: var(--green); font-weight: 700; }
.tag.red { background: var(--red-soft); color: var(--red); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }

.serious-screen { background: var(--red); color: #fff; border-radius: 18px; padding: 18px; margin-top: 8px; }
.serious-screen .t { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.serious-screen .chips .chip { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; }
.serious-screen .chips .chip.selected { background: #fff; color: var(--red); }
.hold {
  position: relative; overflow: hidden; width: 100%; margin-top: 14px; padding: 14px;
  border-radius: 14px; background: rgba(255,255,255,0.18); color: #fff; font-weight: 800; border: 2px solid #fff;
}
.hold > i { position: absolute; inset: 0; width: 0; background: #fff; opacity: 0.35; transition: width 0s; }
.hold.holding > i { width: 100%; transition: width 2000ms linear; }
.hold > span { position: relative; }

/* ---------------- history ---------------- */
.day-head { color: var(--muted); font-size: 14px; font-weight: 700; margin: 14px 4px 4px; }
.tx {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 14px; margin-bottom: 6px;
}
.tx .icon { font-size: 22px; width: 30px; text-align: center; }
.tx .name { font-weight: 700; }
.tx .sub { color: var(--muted); font-size: 13px; }
.tx .amt { font-weight: 800; white-space: nowrap; }
.tx .amt.in { color: var(--green); }
.tx.system { opacity: 0.8; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }

/* ---------------- detail / forms ---------------- */
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv .k { color: var(--muted); }
.field { margin-top: 12px; }
.field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.field select, .field input[type="text"], .field input[type="number"], .field input[type="date"] {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
}

/* ---------------- wallets ---------------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; text-align: center; }
.tile .name { font-size: 14px; color: var(--muted); }
.tile .amt { font-size: 20px; font-weight: 800; }
.tile .amt.neg { color: var(--red); }

/* ---------------- admin tables ---------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; }
.tbl input, .tbl select { width: 100%; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.tbl input.num { text-align: left; width: 96px; }
.tbl input.short { width: 56px; }
.tbl input.icon { width: 52px; text-align: center; }
.tbl-wrap { overflow-x: auto; }
/* the live template sum, written on a small chalkboard */
.reserve-bar {
  background: #2f4f43; color: var(--chalk);
  border: 5px solid var(--wood); border-radius: 8px;
  padding: 8px 14px; margin: 12px 0; text-align: center;
  font-family: "Amatic SC", "Segoe Print", cursive; font-weight: 700; font-size: 26px; line-height: 1.15;
  box-shadow: 0 6px 14px rgba(61, 49, 40, 0.18);
}
.reserve-bar.neg { background: #7a4a12; }

/* ---------------- pairing / toast ---------------- */
.pair-card { width: 100%; max-width: 380px; }
.pair-jar { display: flex; justify-content: center; margin-bottom: 2px; }
.pair-jar .jar { width: auto; }
.pair-input {
  width: 100%; font: inherit; text-align: center; padding: 12px; margin-top: 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.toast {
  position: fixed; bottom: calc(var(--tab-h) + 18px + env(safe-area-inset-bottom));
  right: 18px; left: 18px; z-index: 90;
  background: #2f4f43; color: var(--chalk);
  border: 4px solid var(--wood);
  border-radius: 10px; padding: 10px 16px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.toast button { color: var(--coin); font-weight: 800; }
/* the ✕ of a note that can be put away (ui.js toast, opts.close): small, at the end of the row, with room around it for a finger */
.toast button.toast-x { color: var(--chalk); font-weight: 400; font-size: 18px; line-height: 1; opacity: 0.85; padding: 8px 10px; margin: -8px -10px; flex: none; }
.offline { text-align: center; font-size: 13px; color: var(--amber); padding: 4px; }
.banknote {
  position: fixed; z-index: 95; width: 26px; height: 26px; border-radius: 50%;
  background: var(--coin); border: 2px solid var(--coin-deep); box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  pointer-events: none; transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms;
}
/* ---------------- one save button for a whole page (הגדרות) ----------------
 * It floats just above the tab bar, over the page rather than in it, and it is there only while
 * something is waiting to be saved — so the page below it is never a wall of save buttons. Above
 * ordinary content, below the sheets and the question (z-index 50), which must cover it. */
.a-save {
  position: fixed; bottom: calc(var(--tab-h) + 8px + env(safe-area-inset-bottom));
  right: 12px; left: 12px; z-index: 40;
  display: flex; align-items: stretch; gap: 8px;
  max-width: 620px; margin: 0 auto;
}
.a-save .btn { margin: 0; box-shadow: 0 6px 18px rgba(61, 49, 40, 0.28); }
.a-save .btn.primary { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 16px; }
.a-save .btn.ghost { flex: 0 0 auto; background: var(--card); align-self: center; }
.a-save .a-what { font-size: 13px; font-weight: 400; opacity: 0.85; }
.a-save .a-what:empty { display: none; }
/* room under the last card, so the bar never stands on it */
.a-save-pad { height: 64px; }
@media (min-width: 900px) { .a-save { max-width: 1040px; } }

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; } .banknote { transition: none; }
}

/* ---------------- שלישי כלכלי: the weekly meeting ---------------- */
.t-wrap { max-width: 640px; margin: 0 auto; }
.t-back { color: var(--muted); font-size: 15px; padding: 6px 4px 0; }
.board .cups { width: 150px; height: auto; margin: 8px 0 2px; color: var(--chalk); }
.tuesday-card .card-title { font-size: 30px; }

/* an insight: a paper slip, green edge for good news, wood for a plain fact */
.insight {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-right: 4px solid var(--wood);
  border-radius: 12px; padding: 10px 12px; margin-top: 8px; box-shadow: 0 2px 6px rgba(61, 49, 40, 0.06);
}
.insight.good { border-right-color: var(--green); }
.insight .ic { font-size: 21px; line-height: 1.25; flex: 0 0 auto; }
.insight .itx { flex: 1; line-height: 1.4; }
.insight .when { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.t-empty { margin: 6px 8px 0; }

.board .quiet.t-sub { margin-top: 2px; }
.t-flow { font-size: 14px; color: var(--muted); margin: 8px 6px 0; line-height: 1.45; }
.t-days { font-size: 22px; opacity: 0.75; }
.t-pills { display: flex; gap: 10px; justify-content: center; margin-top: 2px; }
.t-pills .stag { border-top: 1px solid var(--line); border-radius: 8px; min-width: 96px; }

.t-decision { margin-top: 16px; }
.t-decision .ic, .t-row .ic { font-size: 20px; flex: 0 0 auto; }
.t-decision .btn { margin-right: 30px; }
.t-ahead { padding: 4px 14px; }
.t-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.t-row:last-child { border-bottom: 0; }

.topic {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; margin-top: 8px;
}
.topic .itx { display: block; font-weight: 600; }
.topic .by { display: block; font-size: 13px; color: var(--muted); }
.topic .btn.small { margin: 0; flex: 0 0 auto; }
.topic-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.topic-add .text-input { margin-top: 0; }
.topic-add .btn.small { margin: 0; flex: 0 0 auto; }

.link { color: var(--green); font-weight: 700; text-decoration: underline; padding: 0; }
.t-done { margin-top: 22px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--coin); border: 1px solid var(--coin-deep); margin-inline-start: 4px; vertical-align: middle; }

/* ---- topics ("נושאים לשלישי") — appended block, owned by the topics agent ---- */
/* A topic's text has no length limit any more and may span several lines: no truncation,
   no ellipsis — wrap it and keep the line breaks the user typed. */
.topic .itx { white-space: pre-wrap; word-break: break-word; }
.topic { align-items: flex-start; }
.topic .btn.small { margin-top: 1px; }

/* Auto-growing multi-line topic input (replaces the old single-line, 120-char one). */
.topic-add { align-items: flex-end; }
.topic-input {
  flex: 1; resize: none; overflow-y: auto; max-height: 220px;
  line-height: 1.4; font-family: inherit;
}
.t-topics-history { display: block; margin: 10px auto 0; }

/* "כל הנושאים" history sheet: every topic, newest first, no per-person info. */
.topic-hist {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-top: 10px;
}
.topic-hist:first-child { margin-top: 4px; }
.topic-hist .th-text { white-space: pre-wrap; word-break: break-word; font-weight: 600; }
.topic-hist .th-meta { font-size: 13px; color: var(--muted); margin-top: 6px; }
.topic-hist .th-status { font-size: 13px; margin-top: 2px; }
.topic-hist .th-status.good { color: var(--green); font-weight: 600; }
.topic-hist.done { opacity: 0.85; }

/* ---------------- the emoji sticker on a jar (jar.js jarFig) ----------------
   Sized off the jar's own width (container units), so it sits the same on a 54px jar in the
   expense picker and on the big jar in a sheet. The white edge is the emoji's own outline. */
.jar-fig { position: relative; display: block; width: 100%; container-type: inline-size; }
.jar-fig .sticker {
  position: absolute; left: 50%; top: 67%;
  font-size: 24px; font-size: 24cqw; line-height: 1;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  filter:
    drop-shadow(0.07em 0 0 #fff) drop-shadow(-0.07em 0 0 #fff)
    drop-shadow(0 0.07em 0 #fff) drop-shadow(0 -0.07em 0 #fff)
    drop-shadow(0 0.04em 0.05em rgba(61, 49, 40, 0.45));
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.jar-fig.tall .sticker { top: 65%; font-size: 29cqw; }

/* ---------------- the chalkboard's other side (chalk.js) ---------------- */
.board.flippable { position: relative; cursor: pointer; justify-content: center; }
.board-in { display: flex; flex-direction: column; align-items: center; width: 100%; }
.board .quote {
  font-family: "Amatic SC", cursive; font-weight: 700; font-size: 40px; line-height: 1.1;
  padding: 4px 6px; text-wrap: balance;
}
.board .sponge { position: absolute; left: 0; top: 0; width: 66px; height: 44px; z-index: 3; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.35)); }
.board .sponge svg { display: block; width: 100%; height: 100%; }
.board .smear {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(174deg, rgba(246, 241, 227, 0.11) 0 8px, rgba(246, 241, 227, 0.03) 8px 21px),
    radial-gradient(ellipse at 50% 50%, rgba(246, 241, 227, 0.12), transparent 72%);
}
.board.writing .w { display: inline-block; animation: chalk-rtl var(--t, 240ms) linear backwards; animation-delay: var(--d, 0ms); }
.board.writing .num .w { animation-name: chalk-ltr; }
@keyframes chalk-rtl { from { clip-path: inset(-40% 0 -40% 100%); } to { clip-path: inset(-40% 0 -40% 0); } }
@keyframes chalk-ltr { from { clip-path: inset(-40% 100% -40% 0); } to { clip-path: inset(-40% 0 -40% 0); } }

/* ---------------- one month of a fixed charge / income (views/fixed.js) ---------------- */
.fx-line {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: right;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 12px; margin-top: 6px;
}
.fx-line .fx-name { display: block; font-weight: 700; }
.fx-line .fx-sub { display: block; font-size: 13px; color: var(--muted); }
.fx-line .fx-amt { font-weight: 800; white-space: nowrap; }
.fx-line.skipped .fx-name, .fx-line.skipped .fx-amt { text-decoration: line-through; color: var(--muted); }
.tag.muted-tag { background: var(--paper-2); color: var(--muted); }
.fx-status { margin-top: 10px; padding: 10px 14px; }

/* ---------------- the Tuesday reconciliation (views/reconcile.js) ---------------- */
.t-recon .ic { font-size: 20px; flex: 0 0 auto; }
.t-recon .btn { margin-right: 30px; }
.rc-acc { margin: 10px 0 0; padding: 12px 14px; }
.rc-acc .ic { font-size: 20px; flex: 0 0 auto; }
.rc-row { margin-top: 6px; gap: 8px; }
.rc-row .text-input { margin-top: 0; flex: 1; min-width: 0; }
.rc-row .chip { flex: 0 0 auto; }
.rc-status { min-height: 1.45em; margin-top: 4px; font-weight: 600; }
.rc-gap .btn.small { margin: 6px 0 0 6px; }
.rc-note { margin-top: 8px; resize: vertical; line-height: 1.4; }

/* ---------------- topics: who wrote, editing ---------------- */
.topic-edit { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1; padding: 6px 4px; }
.topic-hist .th-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.topic-hist .th-foot .link { font-size: 13px; flex: 0 0 auto; }
.t-edit-input { margin-top: 10px; }

/* ---------------- תובנות שלנו (views/insights.js) ----------------
   The household's own written lessons — not the meeting's computed feed (.insight, above).
   The words come first and whole: every line break kept, nothing clipped. Who wrote it and
   when sits underneath in small muted type, and an edit by someone else is quieter still. */
.ins-wrap { max-width: 640px; margin: 0 auto; }
.ins-title { margin: 6px 4px 2px; }
.ins-lead { margin: 0 4px 10px; }
.ins-add { padding: 12px; }
.ins-add .text-input { margin-top: 0; }
.ins-input { resize: none; overflow-y: auto; max-height: 260px; line-height: 1.45; font-family: inherit; }
.ins-add-row { display: flex; justify-content: flex-end; }
.ins-add-row .btn.small { margin: 8px 0 0; }
.ins-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--shadow); padding: 12px 14px; margin-top: 10px;
}
.ins-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.ins-foot { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.ins-meta { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.ins-edited { display: block; font-size: 12px; opacity: 0.85; }
.ins-btn { flex: 0 0 auto; color: var(--muted); font-size: 17px; line-height: 1; padding: 6px 7px; }
.ins-empty { margin: 16px 8px 0; text-align: center; }

/* ---------------- קופות חיסכון (views/funds.js) ----------------
   A קופה stands on the same wooden shelf as every other jar, under the same paper tag. What is
   new here is its goal (a thin line of coin colour under the amount), the empty place at the end
   of the shelf where a new one can be opened, and the sheet where its picture is chosen. */

/* the place a קופה could be: the jar drawn in dashes, with a + on the glass */
.jar-unit.ghost .jar-box { opacity: 0.55; }
.jar-unit.ghost .jar path { stroke-dasharray: 5 4; }
.jar-unit.ghost .plank { opacity: 0.7; }
.jar-unit.ghost .stag { border-style: dashed; color: var(--muted); }

/* the goal: how far along, in one line */
.fund-bar {
  height: 8px; border-radius: 999px; overflow: hidden; margin: 8px 0 4px;
  background: var(--paper-2); border: 1px solid var(--line);
}
.fund-bar > i { display: block; height: 100%; background: var(--coin); }
.fund-goal { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }

/* the screen: one row per קופה, its picture standing at the right of it */
.fund-list { margin-top: 8px; }
.fund-row .fund-thumb { flex: 0 0 auto; width: 56px; display: flex; align-items: flex-end; justify-content: center; }
.fund-row .fund-thumb .jar-img, .fund-row .fund-thumb .jar { max-height: 56px; }
.fund-row .fund-bar { margin: 6px 0 2px; }

/* the deposit / withdrawal sheet: the other side of the move, by where the money sits */
.fund-pick { margin: 2px 0 4px; }
.fp-group { margin-top: 8px; }
.fp-title { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.fp-chip .num { color: var(--muted); font-weight: 700; margin-right: 5px; }
.fp-chip.selected .num { color: rgba(246, 241, 227, 0.8); }
/* the emergency jar as the place money is taken OUT of (a transfer to an outside meter): red, as its own sheet paints it */
.fp-chip.danger { border-color: var(--red); color: var(--red); }
.fp-chip.danger .num { color: var(--red); }
.fp-chip.danger.selected { background: var(--red); border-color: var(--red); color: #fff; }
.fp-chip.danger.selected .num { color: rgba(255, 255, 255, 0.85); }

/* the picture: a checkerboard behind it, so a cut-out edge shows against light and dark alike */
.pic-block { margin-top: 6px; }
.pic-preview {
  display: flex; align-items: flex-end; justify-content: center; min-height: 128px;
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px;
  background-color: #fdfdfd;
  background-image:
    linear-gradient(45deg, #ddd6c6 25%, transparent 25%),
    linear-gradient(-45deg, #ddd6c6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd6c6 75%),
    linear-gradient(-45deg, transparent 75%, #ddd6c6 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.pic-preview.empty { align-items: center; background-image: none; background-color: var(--paper-2); }
.pic-preview .jar-unit { margin-top: 0; }
.pic-btn { text-align: center; }

/* the words to hand an image model: what to draw is typed here, the rest is already written */
.prompt-box {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 10px 12px; margin-top: 6px;
}
.prompt-what { margin-top: 0; }
.prompt-what .text-input { margin-top: 0; resize: vertical; }
.prompt-box .btn-row { margin: 8px 0 6px; }
.prompt-box .btn-row .btn.small { margin: 0; }
.prompt-box > .muted.small { margin-bottom: 6px; }
.prompt-sent { margin-top: 8px; }
.prompt-text {
  width: 100%; font: inherit; font-size: 13px; line-height: 1.45;
  direction: ltr; text-align: left; margin: 8px 0; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); resize: vertical;
}
.prompt-box .btn.small { margin-top: 0; }

/* a shortfall covered from a קופה: money that was already put aside for one thing */
.src.fund { border-color: var(--amber-line); }
.src.fund.selected { background: var(--amber-soft); border-color: var(--amber); }

/* ---------------- חובות וחסכונות בחוץ (views/trackers.js) ----------------
   A meter stands on the shelf like a קופה (the same units, the same chip, the same ghost and the
   same .fund-bar); what is its own is the sentence under the bar, the block that offers to finish
   a debt, the transfers written on it by hand, and the rule said under its numbers. */
.trk-sentence { justify-content: center; text-align: center; }
.trk-from { margin: 6px 2px 8px; text-align: center; }
.trk-finish {
  background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--radius-s);
  padding: 10px 12px; margin: 8px 0; line-height: 1.45;
}
.trk-finish.done { background: var(--paper-2); border-color: var(--line); }
.trk-finish .btn.small { margin: 8px 0 0; }
.trk-entry .trk-entry-acts { display: flex; gap: 14px; margin-top: 3px; }
.trk-entry .trk-entry-acts .link { font-size: 13px; }
.trk-entry.future, .trk-move.future { opacity: 0.7; }
.trk-row { cursor: default; }
.trk-type { margin-top: 4px; }
.trk-principle { margin: 8px 2px 0; padding: 8px 10px; border-right: 3px solid var(--coin); background: var(--paper-2); border-radius: 6px; }
.trk-delete { display: block; margin: 12px auto 0; font-size: 13px; }
/* real money into and out of a meter: its two buttons, the transfer sheet, and the moves in its list */
.trk-moves { margin-top: 4px; }
.trk-moves .btn { flex: 1 1 0; }
.tm-dir { margin: 2px 0 6px; }
.tm-none { margin-top: 4px; }
.tm-meters { margin: 2px 0 6px; }
button.trk-move { width: 100%; text-align: inherit; }

/* ---------------- every shekel coloured (views/money.js, SPEC3 §3) ---------------- */
/* the money map: the accounts on top, then where that money is, then the verdict */
.mm { margin: 10px 0; padding: 12px 14px; }
.mm-title { font-weight: 700; margin-bottom: 4px; }
.mm-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.mm-row.mm-top { font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; }
.mm-row .num, .mm-sub .num { white-space: nowrap; }
.mm-sub { display: flex; gap: 10px; align-items: baseline; padding: 1px 14px 1px 0; font-size: 13px; color: var(--muted); }
.mm-verdict { margin-top: 8px; font-weight: 700; }
.mm .btn.small { margin-top: 8px; }
/* Home's line while the accounts and the jars disagree */
.mm-alert { display: flex; align-items: center; gap: 10px; border-right: 4px solid var(--red); color: var(--red); font-weight: 700; }
.mm-alert .btn { flex: 0 0 auto; }
/* which jar a sum belongs to: the three choices, and the list one of them unfolds */
.mm-chips { margin-top: 6px; }
.mm-pick { margin-top: 6px; padding-right: 10px; border-right: 2px solid var(--line); }
/* the reserve's early warning (Home, before the close card) */
.rs-card .btn-row { flex-wrap: wrap; }
/* ---------------- the reserve's reminder (views/money.js reserveCard, core.js renderReserveTag) ----------------
   The household asked to see, all the time and not only at the meeting, how much the reserve still
   needs so the month does not end in the red. Two places say it, never both on one screen:
   • a paper tag pinned under the header on every screen but חודשי and the meeting — the figure and
     the one line that says what completing it buys; a tap goes to the card;
   • the card under the board of חודשי — the chest, the figure big in chalk red, the arithmetic
     behind it and the ways out. Not dismissible: it goes when the numbers change, and only then. */

/* the tag: the paper of the shelf tags, red-edged like an overdrawn jar's, held by a coin pin */
.rs-tag { padding: 10px 16px 0; max-width: 620px; margin: 0 auto; }
.rs-tag-btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  background: var(--red-soft); color: var(--red);
  border: 1px solid var(--red); border-radius: 10px;
  padding: 8px 14px 9px; transform: rotate(-0.5deg);
  box-shadow: 0 3px 6px rgba(61, 49, 40, 0.14);
}
.rs-tag-btn::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--coin); border: 1.5px solid var(--coin-deep); box-shadow: 0 1px 2px rgba(61, 49, 40, 0.3);
}
.rs-tag-btn .grow { min-width: 0; }
.rs-tag-lead { display: block; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 24px; line-height: 1; transform-origin: right center; }
.rs-tag-sub { display: block; font-size: 13px; color: var(--ink); opacity: 0.8; margin-top: 3px; }
.rs-tag-btn svg { flex: 0 0 auto; }
.rs-tag-btn:active { transform: rotate(-0.5deg) scale(0.985); }
@media (min-width: 900px) { .rs-tag { max-width: 560px; } } /* as wide as the board it hangs over */

/* the card: the chest beside the figure, the arithmetic as a short ledger, the total in red */
.rs-deficit { border-right-color: var(--red); }
.rs-head { display: flex; align-items: center; gap: 14px; }
.rs-head .jar-img { flex: 0 0 64px; width: 64px; }
.rs-lead { font-family: "Amatic SC", cursive; font-weight: 700; font-size: 26px; line-height: 1; color: var(--green); }
.rs-amt { display: inline-block; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 50px; line-height: 1; color: var(--red); margin-top: 4px; transform-origin: right center; }
.rs-sub { font-size: 14px; color: var(--muted); margin-top: 8px; }
.rs-ledger { margin: 10px 0 2px; padding-top: 6px; border-top: 1px dashed var(--line); }
.rs-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 14px; color: var(--muted); }
.rs-row .num { white-space: nowrap; }
.rs-row.total { color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.rs-row.total .num { color: var(--red); }
.rs-none { margin-top: 10px; }
.rs-card .btn-row .btn { font-size: 15px; padding: 11px 10px; } /* two doors side by side on a 360px phone */

/* the figure moved (a transfer, an income that landed): one pulse, on the card and on the tag */
.rs-amt.bump, .rs-tag-btn.bump .rs-tag-lead { animation: rs-bump 700ms ease-out; }
@keyframes rs-bump { 0% { transform: scale(1.15); } 45% { transform: scale(0.97); } 100% { transform: none; } }
/* arrived from the tag: a coin-coloured glow that fades, so the eye lands on the card */
.rs-card.rs-here { animation: rs-here 1400ms ease-out; }
@keyframes rs-here { 0%, 25% { box-shadow: 0 0 0 4px var(--coin); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .rs-amt.bump, .rs-tag-btn.bump .rs-tag-lead, .rs-card.rs-here { animation: none; } }
/* "להעביר לרזרבה": one row per jar or קופה */
.tr-row { gap: 8px; align-items: center; margin-top: 10px; }
.tr-row .tr-in { width: 90px; flex: 0 0 auto; margin-top: 0; text-align: center; }
.tr-row .chip { flex: 0 0 auto; }
/* the check sheet: where a gap goes, and "אולי זה:" */
.rc-route { margin-top: 8px; }
.rc-to-label { font-weight: 600; color: var(--muted); }
.rc-sus { margin-top: 8px; }
.rc-sus-row { gap: 8px; align-items: center; margin-top: 4px; }
.rc-sus-row .chip { flex: 0 0 auto; }
/* the "לסדר" sheet */
.mf-item { margin-top: 8px; padding: 10px 14px; }
.mf-item .btn { margin-top: 8px; }
/* "איך זה עובד" (C8): the ⓘ at the head of a sheet, the paragraph it opens, and the guide page */
.help-tip { margin: 4px 0 8px; }
.help-i { background: none; border: 1px solid var(--line); border-radius: 999px; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 16px; color: var(--muted); cursor: pointer; }
.help-i[aria-expanded="true"] { color: var(--green); border-color: var(--green); }
.help-body { margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--paper-2); font-size: 15px; line-height: 1.45; }
.help-body[hidden] { display: none; }
.help-body p { margin: 0 0 6px; }
.serious-screen .help-i { color: inherit; border-color: currentColor; }
.serious-screen .help-body { background: rgba(255, 255, 255, .15); }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.guide-topic p { margin: 6px 0; line-height: 1.5; }