/* ─────────────────────────────────────────────────────────────────────
   בית הכנסת אביר יעקב — mobile app shell.

   The palette comes from the room itself: parchment for the ground, the
   deep indigo of a tallit for structure, and the warm brass of the rimonim
   as the single accent. Everything else is quiet so the numbers read.
   ───────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --ground:      #f7f4ec;
  --surface:     #ffffff;
  --surface-2:   #f1ebdd;
  --surface-3:   #e9e2d1;

  --ink:         #151b23;
  --ink-2:       #5d6572;
  --ink-3:       #8a8f99;
  --line:        #e2dbca;
  --line-strong: #cdc3ac;

  --primary:      #16324f;
  --primary-ink:  #f4efe2;
  --primary-soft: #e6ecf3;
  --primary-2:    #24507a;

  --brass:      #8b6614;
  --brass-lit:  #b98f2e;
  --brass-soft: #f5eddb;

  --good: #2c6a4a;
  --good-soft: #e4f0e8;
  --warn: #96590f;
  --warn-soft: #faeeda;
  --bad:  #a33227;
  --bad-soft: #f8e7e4;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --shadow: 0 1px 2px rgba(21,27,35,.05), 0 6px 20px -12px rgba(21,27,35,.18);
  --shadow-lift: 0 2px 6px rgba(21,27,35,.07), 0 16px 40px -20px rgba(21,27,35,.32);
  --shadow-up: 0 -8px 24px -14px rgba(21,27,35,.35);

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Noto Sans Hebrew",
          "Arial Hebrew", "Helvetica Neue", Arial, sans-serif;

  --tab-h: 62px;
  --head-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:      #0d1219;
    --surface:     #141c26;
    --surface-2:   #1b2532;
    --surface-3:   #24303f;

    --ink:         #ebe5d8;
    --ink-2:       #9aa5b4;
    --ink-3:       #6d7889;
    --line:        #24303f;
    --line-strong: #35435a;

    --primary:      #0f2438;
    --primary-ink:  #f1ead9;
    --primary-soft: #1a2c40;
    --primary-2:    #4b83bd;

    --brass:      #d3ab5b;
    --brass-lit:  #e6c483;
    --brass-soft: #2a2417;

    --good: #63b98c;  --good-soft: #14291f;
    --warn: #d99f4b;  --warn-soft: #2b2113;
    --bad:  #e0796b;  --bad-soft:  #2d1917;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -12px rgba(0,0,0,.7);
    --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.85);
    --shadow-up: 0 -8px 24px -12px rgba(0,0,0,.85);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:      #0d1219;
  --surface:     #141c26;
  --surface-2:   #1b2532;
  --surface-3:   #24303f;
  --ink:         #ebe5d8;
  --ink-2:       #9aa5b4;
  --ink-3:       #6d7889;
  --line:        #24303f;
  --line-strong: #35435a;
  --primary:      #0f2438;
  --primary-ink:  #f1ead9;
  --primary-soft: #1a2c40;
  --primary-2:    #4b83bd;
  --brass:      #d3ab5b;
  --brass-lit:  #e6c483;
  --brass-soft: #2a2417;
  --good: #63b98c;  --good-soft: #14291f;
  --warn: #d99f4b;  --warn-soft: #2b2113;
  --bad:  #e0796b;  --bad-soft:  #2d1917;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -12px rgba(0,0,0,.7);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.85);
  --shadow-up: 0 -8px 24px -12px rgba(0,0,0,.85);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Nothing outside the shell scrolls — that is what keeps the tab bar still. */
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--primary-2); }

:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ── shell ─────────────────────────────────────────────────────────── */
/* The app is designed for a phone. On a wider screen it stays a phone-width
   column, centred, rather than stretching a one-hand layout across a desk. */
/* The shell is exactly one viewport tall and only `main` scrolls inside it.
   The tab bar used to be `position: fixed`, which is correct on paper and
   unreliable in practice: a mobile browser's collapsing address bar drags a
   fixed element with it, and the bar visibly slid up and down while scrolling.
   As a plain flex child of a non-scrolling shell it physically cannot move. */
.app {
  height: 100dvh; display: flex; flex-direction: column;
  max-width: 520px; margin-inline: auto; width: 100%;
  background: var(--ground);
  overflow: hidden;
}
@media (min-width: 560px) {
  body { background: color-mix(in oklab, var(--ground) 60%, var(--surface-3)); }
  .app { box-shadow: 0 0 0 1px var(--line), 0 24px 70px -30px rgba(0,0,0,.35); }
}

.boot {
  min-height: 100dvh; display: grid; place-content: center; justify-items: center;
  gap: 18px; color: var(--ink-2);
}
.boot-mark {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--brass);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation-duration: 3s; } }

/* Header — a deep field with a single brass rule under it, like the band
   at the foot of a parochet. */
/* On a phone the crest sits centred above the title — it is the first thing
   you see when the app opens. From tablet width up the header becomes a row
   and the crest moves to the right, where reading starts. */
.head {
  flex: none; z-index: 40;
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 88%, #000) 100%);
  color: var(--primary-ink);
  padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  border-bottom: 2px solid var(--brass);
  display: grid; grid-template-columns: 1fr; justify-items: center;
  gap: 5px; min-height: var(--head-h);
}
.head.staff { background: linear-gradient(180deg, #22160c 0%, #150e07 100%); border-bottom-color: var(--brass-lit); }

/* The emblem is a dark navy plate, and the header behind it is dark too, so on
   a phone it read as a smudge rather than a mark. The pale disc underneath it
   is what separates the two: the padding lets that disc show as a ring all the
   way round, the brass hairline draws the edge, and the soft glow lifts it off
   the field. Sized up as well — at 42px the lettering inside was unreadable.
   The two colours are written out rather than taken from --brass-soft and
   --brass-lit: those flip to near-black in dark mode, which would have put a
   dark halo behind a dark emblem on exactly the phones this was meant to fix.
   The header is dark in both themes, so this ring is light in both. */
.head-logo {
  width: 54px; height: 54px; border-radius: 50%; display: block;
  padding: 3px; background: #f5eddb;
  box-shadow: 0 0 0 1.5px #c49b3a, 0 0 0 4px rgba(0,0,0,.18), 0 3px 12px rgba(0,0,0,.45);
}

.head-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; }
.head-title strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.head-title span { font-size: 12.5px; opacity: .72; font-weight: 500; }

.head-actions {
  position: absolute; inset-inline-end: 12px;
  top: calc(env(safe-area-inset-top) + 11px);
  display: flex; gap: 6px;
}
.head-btn {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: inherit; font-size: 16px;
}
.head-btn:active { background: rgba(255,255,255,.18); }

@media (min-width: 560px) {
  .head {
    grid-template-columns: auto 1fr auto; align-items: center;
    justify-items: stretch; gap: 12px;
    padding-block: calc(env(safe-area-inset-top) + 10px) 10px;
  }
  .head-logo { width: 50px; height: 50px; }
  .head-title { text-align: start; }
  .head-actions { position: static; justify-self: end; }
}

main {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 18px);
}
main > * + * { margin-top: 14px; }

/* Bottom tabs
   Pinned to the viewport and opaque. It used to be 92% transparent over a
   blur, which let the parchment ground read straight through it — on a long
   page the bar looked like it had scrolled away. */
.tabs {
  flex: none; z-index: 50;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-up);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tab-h); color: var(--ink-2); font-size: 11px; font-weight: 600;
  position: relative;
}
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tab svg, .tab span { position: relative; z-index: 1; }
.tab[aria-current="page"] { color: var(--primary-2); }
/* The active tab gets a soft parchment pill so the position reads at a glance
   without another colour entering the palette. */
.tab[aria-current="page"]::after {
  content: ""; position: absolute; inset: 6px 8px; border-radius: var(--r-sm);
  background: var(--brass-soft); z-index: 0;
}
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; inset-inline: 22%; height: 3px;
  background: var(--brass); border-radius: 0 0 3px 3px;
}

/* ── cards ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 12px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h3 { font-size: 15px; }
.card-head .more { font-size: 13px; color: var(--primary-2); font-weight: 600; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--brass);
  text-transform: none; display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); opacity: .45; }

/* Hero card — the state of the household, the one number people open for. */
.hero {
  background: linear-gradient(165deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 82%, #000) 100%);
  color: var(--primary-ink); border: none; border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: linear-gradient(180deg, var(--brass-lit), transparent);
}
.hero-name { font-size: 13px; opacity: .78; font-weight: 600; }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.hero-cell { text-align: center; }
.hero-cell b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.hero-cell span { font-size: 11.5px; opacity: .72; }
.hero-cell.open b { color: var(--brass-lit); }
.hero-cell.credit b { color: #7fcb9f; }   /* a credit reads green on the navy hero in either theme */
.hero-sep { border-inline-start: 1px solid rgba(255,255,255,.14); }
.hero-line { font-size: 13.5px; opacity: .82; line-height: 1.6; margin-top: 8px; }
.hero.guest::after { background: linear-gradient(180deg, var(--brass-lit), transparent); }

.hint { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: 8px; text-align: center; }

/* Prayer times — a timetable, so the hours line up in a column and the eye
   can run down them without reading the labels. */
.prayer-group + .prayer-group { margin-top: 14px; }
.prayer-day {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--brass);
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.prayer-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.prayer-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.prayer-row:last-child { border-bottom: none; }
.prayer-row span { font-size: 14.5px; }
.prayer-row b { font-size: 16px; letter-spacing: -.01em; }

/* Shabbat strip */
.shabbat {
  display: flex; align-items: center; gap: 12px;
  background: var(--brass-soft); border: 1px solid color-mix(in oklab, var(--brass) 26%, transparent);
  border-radius: var(--r); padding: 12px 14px;
}
.shabbat-mark { font-size: 22px; line-height: 1; }
.shabbat b { display: block; font-size: 15px; }
.shabbat span { font-size: 12.5px; color: var(--ink-2); }
.shabbat .times { margin-inline-start: auto; display: flex; gap: 12px; flex-shrink: 0; }
.shabbat .times > div { text-align: center; display: grid; gap: 0; }
.shabbat .times b { font-size: 14px; color: var(--ink); display: block; line-height: 1.25; }
.shabbat .times span { font-size: 11px; color: var(--ink-2); }

/* Rows */
.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--line);
}
/* A receipt row is a button now, not a link — it opens the viewer inside the
   app instead of handing the PDF to a tab with no way back. A button needs to
   be told to fill its line and to read like the rows around it. */
button.row { width: 100%; text-align: start; font: inherit; color: inherit; }
.row:first-of-type { border-top: none; }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; font-size: 14.5px; font-weight: 650; }
.row-main span { font-size: 12.5px; color: var(--ink-2); display: block; margin-top: 1px; }
.row-end { text-align: end; flex-shrink: 0; }
.row-end b { display: block; font-size: 15px; }
.row.tappable { cursor: pointer; }
a.row.receipt { color: inherit; text-decoration: none; }
/* A staff receipt row carries a send button beside it without breaking the
   row's own layout. */
.receipt-line { display: flex; align-items: center; gap: 8px; }
.receipt-line .row { flex: 1; min-width: 0; }
a.row.receipt .pill { letter-spacing: .04em; }
.row.tappable:active { background: var(--surface-2); }

.avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-2);
}

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.pill.paid  { background: var(--good-soft); color: var(--good); }
.pill.part  { background: var(--warn-soft); color: var(--warn); }
.pill.open  { background: var(--bad-soft);  color: var(--bad); }
.pill.info  { background: var(--primary-soft); color: var(--primary-2); }
.pill.brass { background: var(--brass-soft); color: var(--brass); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px; position: relative; overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--accent, var(--line-strong)); }
.stat span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.stat b { display: block; font-size: 21px; margin-top: 3px; letter-spacing: -.02em; }
.stat.good { --accent: var(--good); } .stat.good b { color: var(--good); }
.stat.bad  { --accent: var(--bad); }  .stat.bad b  { color: var(--bad); }
.stat.brass{ --accent: var(--brass); }

/* Category bars */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; gap: 5px; }
.bar-top { display: flex; justify-content: space-between; font-size: 13.5px; }
.bar-top span { color: var(--ink-2); }
.bar-track { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--primary-2); }
.bar-fill.brass { background: linear-gradient(90deg, var(--brass-lit), var(--brass)); }

/* Chart */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-top: 6px; overflow-x: auto; }
.chart-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 26px; flex: 1; }
.chart-pair { display: flex; align-items: flex-end; gap: 2px; height: 100px; }
.chart-bar { width: 9px; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-bar.inc { background: var(--good); }
.chart-bar.exp { background: color-mix(in oklab, var(--bad) 75%, transparent); }
.chart-col small { font-size: 10px; color: var(--ink-3); }

/* Forms */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 13px; border-radius: 11px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(14px) calc(50% - 2px), calc(19px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input:focus { border-color: var(--primary-2); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }

/* A single yes/no the gabbai has to make deliberately — today only «the money
   is already in my hand» on the guest sheet. Written as a real checkbox rather
   than a switch so its state survives a screen reader and a hard reload, and
   sized to the same 44px target as every other tappable row. */
.check {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--surface); cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--brass); flex: none; margin: 0; }
.check span { font-size: 15px; color: var(--ink); }
.check:has(input:checked) { border-color: var(--brass-lit); background: var(--brass-soft); }
.check:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-soft); }

/* A select that has to sit inside a list row without pushing the name off the
   screen — used by the admin's access list. */
select.input.sm { min-height: 38px; font-size: 13.5px; padding: 4px 26px 4px 8px; width: auto; max-width: 108px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }

/* `hidden` has to beat every display rule below, or an element the code has
   just hidden stays on the screen. It was doing exactly that on the member
   form: «נקה» and «מלא ממנו את התאריך העברי» sat there with no civil date to
   clear or copy, because .btn sets display:flex and won on specificity. */
[hidden] { display: none !important; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 0 18px; border-radius: 13px;
  background: var(--primary); color: var(--primary-ink);
  font-size: 16px; font-weight: 700;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; }
.btn.brass { background: linear-gradient(180deg, var(--brass-lit), var(--brass)); color: #21170a; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
/* The guide button on the member's home screen wears the header's own blue,
   so it reads as the app speaking about itself rather than as one more row
   in the list (owner, 2026-09-09). */
.btn.headline {
  background: linear-gradient(180deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 88%, #000) 100%);
  color: var(--primary-ink); border: 1px solid color-mix(in oklab, var(--primary) 70%, #000);
}
.btn.sm { min-height: 40px; font-size: 14px; border-radius: 11px; width: auto; }
.btn.google {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  text-decoration: none; font-size: 15.5px;
}
.btn.google:active { background: var(--surface-2); }

.or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  color: var(--ink-3); font-size: 12.5px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 14px; font-weight: 600; min-height: 40px;
}
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip.brass[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: #21170a; }

/* Shabbat sheet — the gabbai's one screen */
.sheet-row {
  display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.sheet-row:first-child { border-top: none; }
.sheet-honor { font-size: 13px; font-weight: 700; color: var(--brass); }
.sheet-body { display: grid; gap: 6px; }
.sheet-line { display: grid; grid-template-columns: 1fr 82px 54px; gap: 6px; }
.sheet-input {
  padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 16px; width: 100%; appearance: none;
}
.sheet-input.filled { border-color: var(--good); background: var(--good-soft); }
.sheet-amount { font-weight: 700; text-align: center; align-self: center; font-size: 15px; }
/* The total and its save button close the sheet — they are the last thing on
   the screen, below the last row, and they scroll away with it.
   They were `position: sticky` with a bottom offset the height of the tab bar.
   That offset made sense while the bar was `position: fixed` over the page;
   once the bar became a plain flex child, the offset stopped meaning "just
   above the bar" and started meaning "a bar's height up from the bottom of the
   list" — so the block hovered in the middle of the screen and covered the very
   rows the gabbai was filling in. */
.sheet-total {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lift);
}
.sheet-total > div { display: grid; gap: 2px; }
.sheet-total b { font-size: 20px; display: block; }
.sheet-total .btn { width: auto; flex: 1; min-height: 44px; }

datalist { display: none; }

/* Name suggestions.
   A native <datalist> did the job on a desktop and almost nothing on a phone —
   Android shows a cramped list, iOS often shows none at all — so the gabbai
   was typing full names from memory. This is the same idea, drawn by us. */
.ta-wrap { position: relative; }
.ta-pop {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 90;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
  max-height: 244px; overflow-y: auto; overscroll-behavior: contain;
}
.ta-pop[hidden] { display: none; }
.ta-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; text-align: start; border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.ta-item:last-child { border-bottom: none; }
.ta-item.on, .ta-item:hover { background: var(--brass-soft); }

/* ── photographing an invoice ────────────────────────────────────────────
   The camera is offered first and the manual fields second, so the divider has
   to read as a real choice rather than as a section break. */
.or-line { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--ink-2); font-size: 12px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.scan-busy { padding: 12px; text-align: center; color: var(--brass); font-weight: 600; }
.scan-done { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.scan-done > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-done b { font-weight: 700; }
.scan-done span { font-size: 12px; color: var(--ink-2); }
.scan-warn { color: var(--warn); font-size: 12px; font-weight: 600; }
.scan-thumb { flex: 0 0 64px; }
.scan-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* The invoice at full size — scrollable, because a bill is taller than a phone. */
.invoice-view { max-height: 70vh; overflow: auto; text-align: center; }
.invoice-view img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }

/* Closing an account: the two kinds of debt above, the split below, and the
   line the gabbai actually reads — what the balance will be when he presses. */
.settle-lines { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 8px; }
.settle-lines > div { display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px; border-radius: 11px; background: var(--surface-2); }
.settle-lines span { color: var(--ink-2); font-size: 13.5px; }
.settle-lines .brass { color: var(--brass); font-size: 13.5px; font-weight: 700; }

.settle-split { margin: 4px 0 12px; }
.settle-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 12px; }
.settle-row span { color: var(--ink-2); font-size: 13.5px; }
.settle-row.brass b { color: var(--brass); }
.settle-row.bad b { color: var(--bad); }
.settle-row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.settle-row.total span, .settle-row.total b { font-weight: 700; }

/* The opening line carries two numbers per man — shekels, and a count of
   נדבת ליבו that has no sum yet — so the row needs a pair of small labelled
   boxes rather than one bare input. */
.opening-fields { display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
.opening-fields label { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.opening-fields small { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.opening-fields .input { max-width: 78px; text-align: center; }

/* A sheet row that was cancelled. It stays on the screen — the record is what
   happened, including the mistake — but it must not read as a live charge. */
.row.voided .row-main b, .row.voided .row-main span { text-decoration: line-through; opacity: .55; }

/* An undertaking with no sum yet — shown as a count, and never as ₪0. */
.sheet-amount.undetermined { color: var(--brass); font-weight: 700; }

/* The picker's last row when it offers a name it has never seen — the guest
   who is being written down for the first time. Marked so a tired thumb does
   not mistake it for a man already on the books. */
.ta-item.ta-new { border-top: 1px solid var(--line); color: var(--brass); }
.ta-item.ta-new b { font-weight: 650; }

.ta-item b { font-weight: 600; }
.ta-item mark { background: none; color: var(--primary-2); font-weight: 800; }
.ta-item small { color: var(--ink-2); font-size: 12px; margin-inline-start: auto; }
.ta-empty { padding: 11px; color: var(--ink-2); font-size: 13.5px; }

/* The receipt, opened inside the app.
   Handing the PDF to a new tab left no way back inside an installed PWA — the
   only exit was killing the window. It gets its own frame and its own X. */
.pdfview {
  position: fixed; inset: 0; z-index: 95; background: var(--ground);
  /* The bar must clear the phone's status area, or the ✕ sits under the clock
     and cannot be tapped — one of the ways this screen read as unclosable. */
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; flex-direction: column;
}
.pdfview-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: var(--primary); color: var(--primary-ink);
  border-bottom: 2px solid var(--brass);
}
.pdfview-bar b { font-size: 15px; flex: 1; }
.pdfview-bar button, .pdfview-bar a {
  color: var(--primary-ink); background: rgba(255,255,255,.12);
  border-radius: var(--r-sm); padding: 7px 11px; font-size: 13px; font-weight: 600;
  text-decoration: none; line-height: 1;
}
.rc-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 20px; }

/* The one thing to do with a receipt once it is on screen: send it. Kept out
   of the scroller so it is reachable without scrolling to the bottom first. */
.rc-actions {
  flex: none; padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-up);
  display: flex; flex-direction: column; gap: 8px;
}
.rc-actions .btn { width: 100%; }
.rc-paper {
  max-width: 520px; margin-inline: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px;
}
.rc-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 2px solid var(--brass); }
.rc-head img { border-radius: 50%; }
.rc-head strong { display: block; font-size: 16px; color: var(--primary); }
.rc-head span { font-size: 12px; color: var(--ink-2); }
.rc-no { margin-inline-start: auto; text-align: end; }
.rc-no span { display: block; font-size: 11px; color: var(--ink-2); }
.rc-no b { font-size: 17px; color: var(--brass); }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 14px 0; }
.rc-grid span { display: block; font-size: 11.5px; color: var(--ink-2); }
.rc-grid b { font-size: 14px; }
.rc-lines { border-top: 1px solid var(--line); }
.rc-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rc-row div { flex: 1; min-width: 0; }
.rc-row b { font-size: 14px; }
.rc-row span { display: block; font-size: 12.5px; color: var(--ink-2); }
.rc-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--primary); color: var(--primary-ink);
  border-radius: var(--r-sm); padding: 11px 14px; margin-top: 14px;
}
.rc-total b { font-size: 19px; }
.rc-note { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
.rc-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2); line-height: 1.7; text-align: center;
}

/* Sheets / modals */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(10,14,20,.55);
  display: flex; align-items: flex-end; backdrop-filter: blur(2px);
}
/* A sheet parked under another one: `display:flex` above would beat the
   default `hidden` styling, so say it explicitly. */
.overlay[hidden] { display: none; }
.modal {
  background: var(--surface); width: 100%; max-width: 520px; margin-inline: auto;
  max-height: 88dvh; overflow-y: auto; position: relative;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--brass);
}
.modal-grip { width: 40px; height: 4px; border-radius: 99px; background: var(--line-strong); margin: 8px auto 14px; }
/* Every sheet closes without a guess: the grip is a hint, this is the button. */
.modal-x {
  position: absolute; inset-block-start: 10px; inset-inline-start: 12px;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.modal-x:active { background: var(--line); }
.modal h3 { font-size: 17px; margin-bottom: 4px; }
.modal .sub { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }

/* Login — the crest is the whole identity here, so it leads the card and
   nothing competes with it: no headline, just a quiet line of purpose. */
.login {
  /* Owner directive 2026-09-01: the card sat dead centre and read as floating.
     It starts lower now — a proportion of the viewport rather than a fixed
     number, so a small phone does not push the button off the bottom — and the
     page still scrolls when the card is taller than what is left. */
  min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(40px, 11dvh, 132px) 20px 32px; background: var(--ground);
}
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 22px 20px; box-shadow: var(--shadow-lift);
  width: 100%; max-width: 360px;
}
.login-mark { text-align: center; margin-bottom: 20px; }
.login-logo {
  /* The source is drawn for this frame — the crest at 74% of its own field —
     so the circle crops paper and never artwork. */
  width: min(196px, 58vw); height: auto; aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto 16px; display: block;
  box-shadow: 0 6px 26px -8px rgba(21,27,35,.42);
}
.login-mark p { font-size: 13.5px; color: var(--ink-2); }
/* שער הכניסה לדמו (2026-09-17). מבנה זהה לכרטיס ההתחברות, רק רחב מעט
   יותר — כי כאן יש משפט הסבר ולא רק שדה טלפון. */
.login-card.intro { max-width: 460px; }
.login-card.intro a.btn { text-decoration: none; }
.intro-lead { font-size: 15px; line-height: 1.75; color: var(--ink-2); text-align: center; margin: 2px 0 14px; }
.intro-note { margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.intro-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.intro-links .chip { font-size: 13px; }

/* שורת בחירה — כפתורים קטנים שנעטפים, עם מצב «נבחר» (2026-09-20). */
.pickrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pickrow .btn { flex: 1 1 auto; min-width: 0; }
.pickrow .btn.on { background: var(--brass); border-color: var(--brass); color: #21170a; font-weight: 700; }
.pickrow .btn[disabled] { opacity: .45; cursor: not-allowed; }

.login-note { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.65; margin-top: 16px; }

.demo-list { display: grid; gap: 8px; max-height: 46dvh; overflow-y: auto; margin-top: 4px; }
.demo-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface);
}
.demo-item:active { background: var(--surface-2); }
.demo-item b { font-size: 14.5px; }
.demo-item small { display: block; color: var(--ink-2); font-size: 12px; }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { font-size: 11px; color: var(--ink-3); text-align: center; font-weight: 700; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 9px; background: var(--surface-2); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 13px; border: 1px solid transparent; position: relative; padding: 2px;
}
.cal-day small { font-size: 9px; color: var(--ink-3); line-height: 1; }
.cal-day.shabbat { background: var(--primary-soft); border-color: color-mix(in oklab, var(--primary-2) 22%, transparent); }
.cal-day.holiday { background: var(--brass-soft); border-color: color-mix(in oklab, var(--brass) 32%, transparent); }
.cal-day.fast { background: var(--bad-soft); }
.cal-day.today { outline: 2px solid var(--brass); outline-offset: 1px; }
.cal-day.out { opacity: .3; }
.cal-day.rc { background: var(--surface-2); border-color: var(--line-strong); }
/* The event name under the date: one line, clipped rather than wrapped, so a
   long holiday name cannot stretch the square. */
.cal-day em {
  font-style: normal; font-size: 8px; line-height: 1; color: var(--ink-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.cal-day { cursor: pointer; font: inherit; font-size: 13px; }
button.cal-day:active { transform: scale(.94); }
.cal-day.picked { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-day.picked small, .cal-day.picked em { color: rgba(255,255,255,.82); }
.cal-day.off { opacity: .28; pointer-events: none; }

/* Date picker */
.picker-nav { margin-bottom: 8px; }
.picker-jump { display: flex; gap: 6px; margin-bottom: 10px; }
.picker-jump .btn { flex: 1; padding-inline: 4px; font-size: 12px; }
.picker-field { display: flex; gap: 8px; align-items: center; }
.picker-field #birthdate-open { flex: 1; justify-content: flex-start; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 5px; vertical-align: -1px; }

/* Notices */
.notice {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r); font-size: 13.5px;
  border: 1px solid var(--line); background: var(--surface-2); line-height: 1.45;
}
.notice.brass { background: var(--brass-soft); border-color: color-mix(in oklab, var(--brass) 30%, transparent); }
.notice.shabbat-mode { background: var(--primary-soft); border-color: color-mix(in oklab, var(--primary-2) 28%, transparent); }
/* A blocked donation report has to read as blocked, not as another brass tip —
   red is otherwise reserved for the toast, so this is the one place a notice
   is allowed to alarm rather than just inform. */
.notice.bad { background: var(--bad-soft); border-color: color-mix(in oklab, var(--bad) 30%, transparent); }
.notice b { display: block; }
.notice ul { margin: 6px 0 0; padding-inline-start: 18px; }
.notice li { margin: 2px 0; }

.empty { text-align: center; padding: 26px 10px; color: var(--ink-3); font-size: 13.5px; }

.toast {
  position: fixed; inset-inline: 16px; max-width: 488px; margin-inline: auto;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 90; background: var(--ink); color: var(--ground); padding: 13px 16px;
  border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lift);
  animation: rise 220ms ease-out;
}
.toast.bad { background: var(--bad); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.foot-note { font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 6px 0 0; line-height: 1.6; }

/* Segmented choice — used at login to pick WhatsApp or SMS. Two taps of the
   same size, so neither reads as the "real" button. */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px;
}
.seg-btn {
  padding: 9px 6px; border-radius: 6px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); background: transparent; transition: background .12s, color .12s;
}
.seg-btn.on { background: var(--surface); color: var(--primary-2); box-shadow: var(--shadow); }

/* «השבוע בבית הכנסת» — the community board at the top of the home screen.
   Sections are separated by a hairline rather than by nested cards, so the
   whole week reads as one list. */
.week .week-part + .week-part { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.week .eyebrow { margin-bottom: 4px; }
.week .row { padding-block: 8px; }
.week .row-end .pill { white-space: nowrap; }

/* The lobby board, inside the app.
   The board is written in vw units for a television, so a narrow iframe would
   render it at phone-sized text and prove nothing. It is therefore laid out at
   a real 1280×720 and scaled down as a whole — what the gabbai sees here is
   the wall, shrunk, not a different design. */
.board-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 12px; border: 1px solid var(--line);
  background: #0d1b2a;
}
.board-preview iframe {
  position: absolute; top: 0; right: 0; width: 1280px; height: 720px;
  border: 0; transform-origin: top right; pointer-events: none;
}


/* בקרות פר-שקופית (משך וגודל גופן) — נמשך מ-shul-avdon */
.slide-row { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); margin-bottom: 10px; padding: 4px 4px 10px; }
.slide-row .check { border: 0; background: none; margin: 0; padding: 8px 8px 4px; min-height: 38px; }
.slide-row:has(input[type=checkbox]:checked) { border-color: var(--brass-lit); }
.slide-ctl { display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-wrap: wrap; }
.slide-ctl .secs { width: 76px; min-height: 38px; padding: 6px 8px; font-size: 15px; text-align: center; }
.slide-ctl .lbl { font-size: 12.5px; color: var(--ink-3); }
.fontpick { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; margin-inline-start: auto; }
.fontpick .fbtn { border: 0; background: var(--surface); color: var(--ink-2); padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; min-height: 38px; }
.fontpick .fbtn + .fbtn { border-inline-start: 1px solid var(--line-strong); }
.fontpick .fbtn.on { background: var(--brass); color: #fff; font-weight: 700; }

/* העברה בין חשבונות */
.xfer-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.xfer-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start;
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.xfer-tile span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.xfer-tile b { font-size: 17px; }
.xfer-tile.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass) inset; background: var(--surface); }
.xfer-tile .neg, .xfer-preview .neg { color: var(--bad); }
.xfer-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.xfer-pair .field { min-width: 0; }
.xfer-swap { min-width: 44px; padding-inline: 10px; margin-bottom: 12px; font-size: 18px; }
.xfer-preview { font-size: 14px; line-height: 1.7; padding: 8px 10px; margin: 2px 0 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.xfer-warn { display: block; color: var(--warn); font-weight: 600; }
.xfer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.xfer-in { color: var(--good); }
.xfer-out { color: var(--bad); }
.xfer-side { font-size: 11.5px; color: var(--ink-3); }
.xfer-void { display: block; color: var(--bad); font-size: 12px; }
.xfer-row.voided .row-main b, .xfer-row.voided .xfer-end b { text-decoration: line-through; color: var(--ink-3); }
.xfer-cancel { font-size: 12.5px; }

/* הלוח בראש מסך הכניסה (הוראת הבעלים 2026-09-22) — גדול, ראשון, ומתחלף לבד. */
.board-card { margin: 0 0 14px; }
.board-preview.big { aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.board-open {
  display: block; width: 100%; margin-top: 8px; padding: 9px 12px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; text-align: center;
}

/* חידון בית הכנסת (הוראת הבעלים 2026-09-23) */
.quiz-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }
.quiz-q { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 14px; }
.quiz-opts { display: flex; flex-direction: column; gap: 9px; }
.quiz-opt {
  text-align: start; padding: 13px 15px; min-height: 52px; font: inherit; font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.quiz-opt:disabled { opacity: 1; }
.quiz-opt.right { border-color: var(--good); background: var(--good-soft); color: var(--good); font-weight: 700; }
.quiz-opt.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.quiz-why { margin-top: 12px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.quiz-why b { color: var(--ink); margin-inline-end: 6px; }
.quiz-done { text-align: center; padding: 10px 0 4px; }
.quiz-big { font-size: 56px; font-weight: 800; color: var(--brass); line-height: 1; }
.quiz-big span { font-size: 26px; color: var(--ink-3); }

/* לאן מתפללים — חוגה, מחט ומרחק */
.qibla-card { text-align: center; }
.qibla-dial { position: relative; width: 210px; height: 210px; margin: 6px auto 14px; transition: transform .2s linear; }
.qibla-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-2); }
.qibla-ring span { position: absolute; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.qibla-ring .n { top: 7px; left: 50%; transform: translateX(-50%); color: var(--brass); }
.qibla-ring .s { bottom: 7px; left: 50%; transform: translateX(-50%); }
.qibla-ring .e { right: 9px; top: 50%; transform: translateY(-50%); }
.qibla-ring .w { left: 9px; top: 50%; transform: translateY(-50%); }
.qibla-needle { position: absolute; inset: 0; transition: transform .35s ease; }
.qibla-needle i {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-inline: 11px solid transparent; border-bottom: 74px solid var(--brass);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.qibla-mid {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  min-width: 68px; padding: 7px 10px; font-size: 17px; font-weight: 700;
}
.qibla-dir b { display: block; font-size: 22px; }
.qibla-dir span { color: var(--ink-3); font-size: 13.5px; }
.qibla-meta { margin-top: 6px; color: var(--ink-2); font-size: 14px; }

/* בקשות שממתינות לגבאי (הוראת הבעלים 2026-09-23) — בולטות מעט משאר
   הכרטיסים, כי זה הדבר היחיד במסך שמחכה שהוא יעשה בו משהו. */
.pend-card { border-color: var(--brass-lit); box-shadow: 0 0 0 1px var(--brass-soft) inset; }
.pend-card .btn.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }

/* ── מה מופיע על הלוח (הוראת הבעלים 2026-09-23) ──────────────────────────
   מתג בשורת תפילה, ורשימת השורות שבתוך שקופית. השורה המוסתרת נשארת
   קריאה ורק מעומעמת: הגבאי צריך לראות מה כיבה, לא לאבד אותו. */
.row.off .row-main, .row.off .row-end { opacity: .5; }
.vis { flex: none; display: inline-flex; align-items: center; cursor: pointer; padding: 6px 2px; margin-inline-start: 4px; }
.vis input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vis > span {
  display: block; width: 46px; height: 27px; border-radius: 999px; flex: none;
  background: var(--line-strong); position: relative; transition: background .16s ease;
}
.vis > span::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .16s ease;
}
.vis input:checked + span { background: var(--brass); }
.vis input:checked + span::after { transform: translateX(-19px); }
.vis input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }

.rowset { margin: 2px 10px 0; border-top: 1px dashed var(--line); }
.rowset > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; padding: 8px 2px; font-size: 13px; color: var(--ink-2); }
.rowset > summary::-webkit-details-marker { display: none; }
.rowset > summary::after { content: '⌄'; color: var(--ink-3); font-size: 15px; }
.rowset[open] > summary::after { content: '⌃'; }
.rowset .cnt { margin-inline-start: auto; font-size: 12px; color: var(--ink-3); }
.rowset-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 6px; padding: 2px 0 10px; }
.check.sm { min-height: 38px; padding: 7px 9px; margin: 0; border-radius: 9px; }
.check.sm input { width: 17px; height: 17px; }
.check.sm span { font-size: 12.5px; }
.rowset-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.rowset-acts .btn { flex: 1; }

/* תשלום בהמחאות (הוראת הבעלים 2026-09-23) — שלוש עמודות צרות שנכנסות גם
   בטלפון: מספר, סכום, תאריך. שורת הסיכום היא השומר: אדומה כל עוד הפירוט
   אינו מסתכם בסכום התשלום, ואז כפתור השמירה נעול. */
.chq { border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px; margin-bottom: 12px; background: var(--surface-2); }
.chq-head { display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; gap: 6px; margin: 10px 2px 4px; font-size: 11.5px; color: var(--ink-3); }
.chq-list { display: flex; flex-direction: column; gap: 6px; }
.chq-row { display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; gap: 6px; }
.chq-row .input { min-height: 40px; padding: 6px 8px; font-size: 14px; }
.chq-row .chq-date { font-size: 12.5px; padding: 6px 4px; }
.chq-sum { margin-top: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; text-align: center; }
.chq-sum.ok { background: var(--good-soft); color: var(--good); }
.chq-sum.bad { background: var(--bad-soft); color: var(--bad); }
.chq-mini { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; word-break: break-word; }

/* הפלייר שצורף להודעת הגבאי (הוראת הבעלים 2026-09-23) — תצוגה מקדימה
   ברוחב מלא, כדי שהגבאי יראה מה בדיוק יעלה לקיר. */
.ann-img { margin-bottom: 10px; }
.ann-img img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.ann-img .btn { width: 100%; margin-top: 6px; }

/* שם משלו לכל שורה בתוך שקופית (הוראת הבעלים 2026-09-23) — הצ׳קבוקס למעלה,
   ומתחתיו שדה שבו ה-‎placeholder‎ הוא השם שהמערכת נותנת, כך שרואים מיד מה
   יופיע אם לא כותבים כלום. */
.rowset-item { display: flex; flex-direction: column; gap: 3px; }
.rowset-item .check.sm { margin: 0; }
.input.sm.rowname { min-height: 34px; padding: 4px 8px; font-size: 12.5px; }

/* בורר מהירות הגלילה (הוראת הבעלים 2026-09-23) — שורה משלו מתחת לשניות
   ולגופן, כי הוא שייך רק לשקופיות שארוכות מהמסך. */
.slide-ctl.scrollrow { margin-top: 4px; }
.slide-ctl.scrollrow .fontpick { margin-inline-start: 8px; }

/* שליטה לכל פלייר בנפרד — שניות ותדירות (הוראת הבעלים 2026-09-25). שתי
   הפקדים יושבים מתחת לשם, כך שהשורה נשארת שורה גם בטלפון. */
.flyer-ctl { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.flyer-ctl label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.flyer-ctl .input.sm { min-height: 30px; padding: 2px 6px; font-size: 12.5px; width: auto; }
.flyer-ctl input[type="number"] { width: 68px; }
.flyer-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.flyer-row.is-off { opacity: .55; }
.flyer-row.is-off .flyer-thumb { filter: grayscale(1); }