/* Material Design 3 — baseline scheme.
 *
 * Everything visual is expressed as MD3 system tokens so the Material Web
 * components and the surrounding layout stay in step: the components read
 * --md-sys-color-* themselves, and the app chrome below reads the same values.
 *
 * Fonts are served from vendor/ rather than fonts.googleapis.com so the app has
 * no cross-origin dependency and works on first launch with no signal.
 */

@import url('vendor/fonts.css');

:root {
  /* --- MD3 baseline, light --- */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-background: #FEF7FF;
  --md-sys-color-on-background: #1D1B20;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  --md-ref-typeface-brand: 'Roboto', 'Noto Sans Hebrew', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto', 'Noto Sans Hebrew', system-ui, sans-serif;

  /* MD3 shape scale */
  --shape-xs: 4px;
  --shape-s: 8px;
  --shape-m: 12px;
  --shape-l: 16px;
  --shape-xl: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- MD3 baseline, dark --- */
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #E6E0E9;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E0E9;
    --md-sys-color-surface-variant: #49454F;
    --md-sys-color-on-surface-variant: #CAC4D0;
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;
    --md-sys-color-surface-container-lowest: #0F0D13;
    --md-sys-color-surface-container-low: #1D1B20;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-surface-container-high: #2B2930;
    --md-sys-color-surface-container-highest: #36343B;
    --md-sys-color-inverse-surface: #E6E0E9;
    --md-sys-color-inverse-on-surface: #322F35;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font-family: var(--md-ref-typeface-plain);
}

#app {
  direction: rtl;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: 96px;              /* clears the navigation bar */
  overflow-x: hidden;
  background: var(--md-sys-color-surface);
}

/* ---------- Material Symbols ---------- */
.msi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---------- top app bar (MD3 small) ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--md-sys-color-surface);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}
.appbar-row { display: flex; align-items: flex-start; gap: 12px; }
.appbar h1 {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
}
.appbar .sub {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .25px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}

/* Sync state. Quiet when healthy, error-coloured when not — the only thing
   worth interrupting anyone for is "your change did not save". */
.sync {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 16px; margin-top: 6px;
  color: var(--md-sys-color-on-surface-variant);
}
.sync .msi { font-size: 16px; }
.sync.off { color: var(--md-sys-color-error); }

/* ---------- layout ---------- */
.pane { padding: 12px 16px 8px; }

h2.sec {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .1px;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  margin: 22px 4px 10px;
}
h2.sec:first-child { margin-top: 8px; }

/* A section header that is also the control collapsing its list (F-6).
   Deliberately the same type, colour and margins as h2.sec — the tab is a run
   of sections and these two must not read as a different kind of thing. */
.sec-toggle {
  position: relative;                /* md-ripple */
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: 22px 0 10px;
  padding: 6px 4px;
  min-height: 48px;                  /* MD3 minimum touch target */
  border: 0; background: none; cursor: pointer;
  border-radius: var(--shape-s);
  font-family: inherit; text-align: start;
  color: var(--md-sys-color-primary);
  -webkit-tap-highlight-color: transparent;
}
.sec-toggle .sec-t {
  font-size: 14px; line-height: 20px; letter-spacing: .1px; font-weight: 500;
}
/* The count, in the pill shape the rest of the app uses for a status label.
   It is the whole point of a collapsed header: without it a closed section and
   an empty one are the same two words. */
.sec-toggle .sec-n {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 500; line-height: 16px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 8px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  /* Title and count read as one unit; everything after them goes to the far
     end. The auto margin lives here and not on .chev because .chev is an .msi,
     which sets direction:ltr on itself — inline-start/end on that element
     resolve against ltr and land on the wrong side inside this rtl row. */
  margin-inline-end: auto;
}
/* Far (logical) end of the row, like the chevron on a .row. */
.sec-toggle .chev {
  flex: 0 0 auto;
  font-size: 22px;
  transform: rotate(-90deg);         /* chevron_left → pointing down: closed */
  transition: transform .18s ease;
}
.sec-toggle .chev.up { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .sec-toggle .chev { transition: none; }
}

/* The search field above a filterable list (F-8). Sits between the section
   header and the rows, tight to both: it belongs to that list, and a normal
   .stack gap here would read as a third section of its own. */
.filter { margin: 0 0 10px; }
.filter md-outlined-text-field { width: 100%; }
/* The clear button is always in the DOM — see vFilterField for why it is hidden
   rather than added and removed. visibility, not display: the field keeps the
   trailing icon's width reserved either way, so the text never shifts sideways
   under the caret on the first or last keystroke. */
.filter.is-empty md-icon-button[slot="trailing-icon"] {
  visibility: hidden;
  pointer-events: none;
}

/* Cards: MD3 filled-card behaviour without pulling in the labs component. */
.card {
  position: relative;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-m);
  padding: 16px;
}
.card + .card { margin-top: 12px; }
.card-title {
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 12px;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stack > * + * { margin-top: 12px; }

md-outlined-text-field, md-outlined-select { width: 100%; }

.empty {
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--shape-m);
  padding: 24px 16px;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  line-height: 22px;
}

.hint {
  font-size: 12px;
  line-height: 18px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 4px;
  margin-top: 10px;
}

.banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-radius: var(--shape-m);
  padding: 12px 14px;
  font-size: 13px; line-height: 20px;
}
.banner.warn {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
.banner .msi { font-size: 20px; flex: 0 0 auto; }

/* ---------- day strip ---------- */
.days { padding: 4px 8px 0; }
md-tabs { --md-primary-tab-container-color: transparent; }

/* ---------- list rows ---------- */
md-list { background: transparent; --md-list-container-color: transparent; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
/* display:block on both, and it is load-bearing rather than cosmetic. As plain
   inline spans these two flow as one continuous run, so a row rendered as
   "מוניות לפארק" + "היום · משפחה 1 שילמו" put the first words of the subtitle on
   the end of the title line, with nothing between them. The 2px margin below
   only ever made sense for a block, which is what these were always meant to
   be — a title with a subtitle under it. */
.row .t1 {
  display: block;
  font-size: 16px; line-height: 22px; letter-spacing: .15px;
  color: var(--md-sys-color-on-surface);
}
.row .t2 {
  display: block;
  font-size: 13px; line-height: 18px; letter-spacing: .25px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 2px;
}
/* A document's own description (F-7), on its own line between the file name and
   the category/size line. Same size as .t2 but in the full on-surface colour:
   it is content someone typed, not metadata the app derived. `anywhere` because
   this is the one string in a row a user writes freely — a 120-character run
   with no space in it would otherwise push the row past 375px, and the same
   guard on .t1 covers the camera-roll file names that can do it too. */
.row .t1, .row .t2 { overflow-wrap: anywhere; }
.row .t2.desc { color: var(--md-sys-color-on-surface); }
.row .num {
  font-variant-numeric: tabular-nums;
  text-align: left; white-space: nowrap;
  font-size: 15px; font-weight: 500;
}
.row .num small {
  display: block; font-size: 12px; font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}
/* "We owe" on the balance card. The error colour rather than the error
   container pair used by .lbl.hot — that one fills a pill background, and
   there is no pill here. */
.row .num.hot { color: var(--md-sys-color-error); }

/* Family colour marker. Kept as a plain dot: Material has no "identity colour"
   token, and five families need telling apart at a glance. */
.dot-fam {
  width: 12px; height: 12px; border-radius: 50%;
  flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15);
}

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* ---------- activities ---------- */
.act { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--md-sys-color-surface-variant); }
.act:last-child { border-bottom: 0; }
.act .time {
  font-variant-numeric: tabular-nums;
  flex: 0 0 46px; padding-top: 1px;
  font-size: 14px; font-weight: 500;
  color: var(--md-sys-color-primary);
}
.act .grow { flex: 1; min-width: 0; }
.chips-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* Compact non-interactive labels. md-suggestion-chip is interactive and 32px
   tall; these are read-only metadata, so a plain label reads better. */
.lbl {
  font-size: 11px; line-height: 16px; padding: 2px 8px;
  border-radius: var(--shape-s);
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}
.lbl.hot { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.lbl.ok  { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.lbl.info{ background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* The payment-method control on an expense row (F-14), for the family that
   recorded it. A full-height tonal button beside an amount and a delete icon
   does not fit a 375px row, so it is compressed to roughly label height — the
   same footprint as the .lbl every other family sees in its place, which is
   what keeps the two versions of the row the same shape. */
md-filled-tonal-button.meth {
  flex: 0 0 auto;
  --md-filled-tonal-button-container-height: 30px;
  --md-filled-tonal-button-label-text-size: 12px;
  --md-filled-tonal-button-label-text-line-height: 16px;
  --md-filled-tonal-button-leading-space: 10px;
  --md-filled-tonal-button-trailing-space: 10px;
}

/* A SHARED expense row, which since F-14 carries more trailing controls than
   any other row in the app: the amount, the payment method, up to two status
   labels and a delete button. At 375px those leave the description a ~50px
   column that wraps one word per line, so this row alone is allowed to break —
   the description takes the first line to itself and the controls line up
   underneath it. Rows come out SHORTER this way, not taller: the wrapping they
   did inside a squeezed text column cost far more than one extra line.

   Private rows deliberately do NOT get this. They carry no status labels and no
   family dot, so the method control still fits beside a ~140px description and
   the row stays a single 67px line. */
.row.exp { flex-wrap: wrap; row-gap: 8px; }
.row.exp > .grow { flex: 1 0 100%; }

/* The private total broken out by payment method (F-14): directly under the
   heading and above the list it sums. Larger and darker than .hint because it
   is a figure rather than an aside — the cash number is the one somebody is
   standing at an ATM trying to read. The parts wrap instead of scrolling; a
   total plus three methods does not fit one 375px line. */
.subtotal {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  padding: 0 4px; margin: 0 0 10px;
  font-size: 13px; line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}
.subtotal .tot { color: var(--md-sys-color-on-surface); font-weight: 500; }

/* ---------- emergency card ---------- */
/* Deliberately the highest-contrast surface in the app: this gets held up to a
   stranger, outdoors, in Gulf sun. */
.ec {
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--shape-l);
  padding: 24px 20px; text-align: center;
}
.ec .big { font-size: 32px; line-height: 40px; font-weight: 500; color: var(--md-sys-color-on-surface); }
.ec .meta { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.ec .lbl2 {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant); margin: 18px 0 6px; font-weight: 500;
}
.ec .val { font-size: 16px; line-height: 24px; }
.tel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  border-radius: var(--shape-xl);
  padding: 14px; font-size: 20px; font-weight: 500; text-decoration: none;
  font-variant-numeric: tabular-nums; direction: ltr; margin-top: 10px;
}

/* ---------- documents ---------- */
.filepick {
  display: block; text-align: center; cursor: pointer;
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--shape-m);
  padding: 20px 16px;
  color: var(--md-sys-color-on-surface-variant); font-size: 14px;
}
.filepick input { display: none; }
.filepick.has { border-style: solid; color: var(--md-sys-color-on-surface); }

/* ---------- terms ---------- */
.tos { font-size: 14px; line-height: 21px; color: var(--md-sys-color-on-surface-variant); }
.tos .tos-lead { font-size: 15px; color: var(--md-sys-color-on-surface); }
.tos h3 {
  font-size: 13px; font-weight: 500; letter-spacing: .5px;
  color: var(--md-sys-color-primary);
  margin: 16px 0 4px;
}
.tos p + h3 { margin-top: 18px; }

/* ---------- what's going on now ---------- */
.now-i {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--shape-m);
  padding: 12px 14px;
}
.now-i + .now-i { margin-top: 8px; }
.now-h { display: flex; align-items: center; gap: 8px; }
.now-who { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; }
.now-age { font-size: 12px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.now-t { font-size: 16px; line-height: 22px; margin-top: 4px; }
/* Older than a few hours is probably no longer true. Faded rather than hidden:
   "they said the pool, four hours ago" is still worth something. */
.now-i.stale { background: var(--md-sys-color-surface-container-low); opacity: .65; }
.now-i .lbl .msi { font-size: 14px; vertical-align: -2px; }

/* ---------- worth knowing ---------- */
.note-i {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-m);
  padding: 14px 16px;
  border-inline-start: 4px solid var(--md-sys-color-outline-variant);
}
.note-i + .note-i { margin-top: 10px; }
.note-h { display: flex; align-items: flex-start; gap: 8px; }
.note-t { flex: 1; font-size: 16px; line-height: 22px; font-weight: 500; }
.note-b { font-size: 14px; line-height: 20px; color: var(--md-sys-color-on-surface-variant); margin-top: 6px; }
.note-i.k-closed { border-inline-start-color: var(--md-sys-color-error); }
.note-i.k-stay   { border-inline-start-color: var(--md-sys-color-primary); }
.note-i.k-do     { border-inline-start-color: var(--md-sys-color-tertiary); }
.note-i.k-info   { border-inline-start-color: var(--md-sys-color-outline); }
.note-i.now { background: var(--md-sys-color-surface-container-high); }

/* ---------- bingo ---------- */
.bg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bgi {
  position: relative; overflow: hidden;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-m);
  padding: 14px; text-align: start; min-height: 84px;
  display: flex; flex-direction: column;
  border: 1px solid transparent;
  color: var(--md-sys-color-on-surface);
  font-family: inherit;
}
.bgi .nm { flex: 1; font-size: 14px; line-height: 20px; }
.bgi[data-taken="1"] { background: var(--md-sys-color-surface-container-highest); }
.bgi[data-taken="1"] .nm { opacity: .55; text-decoration: line-through; }
.bgi[data-pending="1"] { border: 1px dashed var(--md-sys-color-tertiary); }
.bgi .by { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 500; }
.bgi .pts { margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--md-sys-color-primary); }

.bar { height: 4px; border-radius: 2px; background: var(--md-sys-color-surface-variant); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--md-sys-color-primary); }
.score { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- navigation bar (MD3 spec, hand-built) ---------- */
/* The Material Web navigation bar lives in labs/ and is explicitly unstable, so
   this follows the MD3 navigation-bar spec directly: 80px tall, 32px indicator
   pill, 24px icon, 12px medium label, ripple on press. */
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  max-width: 460px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--md-sys-color-surface-container);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--md-sys-color-surface-variant);
}
.navitem {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 0 16px; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: var(--md-sys-color-on-surface-variant);
  min-height: 64px;
}
.navitem .ind {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 32px; border-radius: 16px;
  transition: background-color .15s ease;
}
.navitem .nl {
  font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .3px;
  white-space: nowrap;
}
.navitem[aria-selected="true"] { color: var(--md-sys-color-on-surface); }
.navitem[aria-selected="true"] .ind {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
@media (prefers-reduced-motion: reduce) { .navitem .ind { transition: none; } }

/* ---------- dialog ---------- */
md-dialog { max-width: min(92vw, 420px); }

/* Document viewer: as much of the screen as a dialog can reasonably take,
   because a boarding pass read through a letterbox is no use. */
md-dialog.dlg-doc { max-width: min(96vw, 560px); }
.doc-view {
  display: block; width: 100%; border: 0; border-radius: var(--shape-s);
  background: var(--md-sys-color-surface-container-highest);
}
img.doc-view { max-height: 62vh; object-fit: contain; }
iframe.doc-view { height: 62vh; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- snackbar ---------- */
/* MD3 snackbar. Material Web has no snackbar component yet, so this follows the
   spec: inverse surface, 4dp corner, bottom-anchored above the nav bar. */
.snackbar {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 420px);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--shape-xs);
  padding: 14px 16px; font-size: 14px; line-height: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 10px;
}
.snackbar .msi { font-size: 20px; }
.snackbar.err { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

@media print {
  body > * { display: none !important; }
  #printArea { display: block !important; direction: rtl; font-family: sans-serif; }
  .pcard { border: 2px solid #000; border-radius: 10px; padding: 14px; margin: 0 0 10px; page-break-inside: avoid; }
  .pcard h3 { font-size: 22px; margin-bottom: 4px; }
  .pcard p { font-size: 14px; margin: 2px 0; }
}
#printArea { display: none; }