/* GabChai's tokens: the only place a raw color, size or radius lives (docs/plans/style-guide.md).
   The look is Paper (spec section 17). Named by role, never by hue. */
.ui-scrim, .ui-dialog {
  /* surfaces */
  --surface: #F7F3EC;        /* the page: warm paper */
  --mail-width: 520px;       /* a letter GabChai sends: its body's width (send-invitations, mail templates) */
  --surface-bar: #FBF8F3;    /* the top bar, drawers, sheet heads */
  --surface-card: #fff;
  --surface-soft: #EFE9DF;   /* hover, quiet fills */
  --surface-cream: #FBF6EA;  /* the entrance sign */
  --surface-input: #fffdf8;  /* where she writes */
  --scrim: #1c1410b3;

  /* lines */
  --line: #E6DFD3;           /* the hairline edge */
  --line-strong: #cfc3aa;    /* around controls */

  /* text */
  --text: #1C1A17;
  --text-muted: #6B645A;
  --text-hover: #33302a;     /* the ink profile pill, hovered */
  --on-action: #fff;         /* text on teal, red or ink */

  /* action: the current page and main buttons */
  --action: #0E5C55;
  --action-hover: #0b4a44;
  --action-soft: #E6F1EF;
  --disabled: #cfc6b4;

  /* counts: red. The badge fill, and a darker red for count text on paper (4.33:1 fails AA at #C44B27) */
  --count: #C44B27;
  --count-ink: #B3441F;
  --count-soft: #F8D4C8;     /* a choice against (she rejects this), and an error notice */
  --stop-ink: #923615;       /* red text on count-soft, a not-started chip: count-ink is 4.05:1 there, short of AA */

  /* the keyboard focus ring: butter, with a thin ink edge inside it so it reads on paper (3:1; Moti chose it, 2026-09-27) */
  --focus: #F3C14B;
  --focus-edge: var(--text);

  /* states */
  --good: #1F7A5C;
  --good-soft: #D5EFE4;
  --needs: #B07908;          /* borders and bars only: 3.18:1 on needs-soft, too light for text */
  --needs-ink: #7a5405;      /* needs-work text */
  --needs-soft: #FBEBC4;
  --quiet-soft: #EFE2C6;     /* sand */

  /* link blue: the congregation's part, words she chants, Talk */
  --link: #2F5D8C;
  --link-soft: #EAF1F8;
  --link-edge: #c9d7e6;

  --gold: #d8b35a;           /* the entrance sign's edge */
  /* the entrance: a night frame around the places' windows (spec section 1) */
  --entry-frame: radial-gradient(120% 90% at 50% 0%, #2a2a3a 0%, #121219 55%, #0b0b10 100%);
  --entry-ink: #f3efe6; --entry-ink-soft: #f3efe6c7; --entry-line: #ffffff38; --entry-glass: #ffffff0f;
  --window-veil: linear-gradient(to bottom, #08080cc7 0%, #08080c40 26%, #0000 42%, #0000 68%, #08080cb3 100%);
  --shadow-window: 0 30px 60px -20px #000c, 0 0 0 1px #ffffff14;
  --r-window: 22px; --window-ink-shadow: 0 1px 8px #000a;
  --greeting-black: #000;    /* the greeting videos' own black, so they have no edge */
  --greeting-melt: radial-gradient(closest-side, #000 55%, #0000);   /* the video's edge melting away as he settles in */

  /* the three pens she marks her portion with (Read it): the pen, and the mark it leaves */
  --pen-agree: #dff3e8; --mark-agree: #cdebd9;
  --pen-hate: #fbdcd2;  --mark-hate: #f8cbbd;
  --pen-huh: #fdf0c8;   --mark-huh: #fbe6a6;
  --pen-edge: #0002;

  /* the room behind the entrance and the sanctuary */
  --room-day: #2a1f17;
  --room-night: #120d22;
  --night: #2a2462;          /* the night switch, on */
  --night-edge: #6a5fb0;
  --room: var(--room-day);
  --room-veil: linear-gradient(#0000, #0006 70%);             /* over the blurred room, so the sign reads */
  --room-veil-night: linear-gradient(#0b081a55, #0b081acc);
  --shadow-sign: 0 0 0 6px #fffbf31f, 0 24px 60px #0006;     /* the entrance sign, hanging in the room */
  --shadow-gc: 0 8px 14px #0007;                             /* GabChai standing in the room */
  --shadow-room: 0 10px 30px #0006;                          /* a card over the dark room */
  /* the sanctuary's doors: a thin, quiet underline under each (Moti, 2026-09-30: "more narrow and less
     conspicuous"), the butter glow when one is chosen, and its name tag */
  --door-line: #fff6d880; --door-line-edge: #00000026;
  --door-glow: #f3c14b1f;
  --door-tag: #1f4a3aee;

  /* an invitation's four looks (docs/plans/invitations.html): the card's paper, its ink, its edge and its art */
  --inv-paper: #fffaf0; --inv-paper-ink: #3a2f1c; --inv-paper-edge: #d8b35a;
  --inv-glass: #fbf8f3; --inv-glass-ink: #1f2a44;
  --inv-glass-art: linear-gradient(90deg, #8c2f39 0 16%, #d8a13a 16% 32%, #2f5d8c 32% 50%, #1f7a5c 50% 66%, #6a4c93 66% 82%, #c4602b 82%);
  --inv-scroll: #f3e6c4; --inv-scroll-ink: #3b2a12; --inv-scroll-edge: #b8955a;
  --inv-roller: linear-gradient(90deg, #5a3a1c, #9a6a3a 40%, #5a3a1c);
  --inv-sea: linear-gradient(180deg, #e9f3f6 0%, #fdf8ee 70%, #f1e2c2 100%); --inv-sea-ink: #18414d; --inv-sea-edge: #9cc3cf;
  --shadow-card: 0 10px 30px -12px #3a2f1c55;
  /* the colors a family can pick for the card's words */
  --inv-ink-navy: #1f2a44; --inv-ink-forest: #1f4a3a; --inv-ink-wine: #6e1f2e; --inv-ink-gold: #7a5a16; --inv-ink-plum: #4a2a5e;
  --inv-r: 6px; --inv-r-scroll: 2px;   /* a card's paper corner, sharper than the app's own */
  --inv-name: 40px;                     /* her name on the card */

  /* type: Inter for text, Fraunces for titles, names and big numbers */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: Fraunces, Georgia, serif;
  --t-xs: 12px;      /* kickers, chips, small caps labels */
  --t-sm: 13.5px;    /* secondary lines, hints */
  --t-md: 15px;      /* buttons, menu rows, labels */
  --t-base: 16px;    /* body, inputs (16 keeps iOS from zooming) */
  --t-lg: 18px;      /* card titles, the bar's title */
  --t-xl: 22px;      /* sheet titles, big prompts */
  --t-2xl: 28px;     /* page titles */
  --t-display: 34px; /* the big count, the sign */
  --lh: 1.5;
  --lh-tight: 1.2;
  --caps: .07em;     /* letter spacing for uppercase labels */

  /* Hebrew: print, and the Torah scroll in the Stam faces; marks need room above and below */
  --hebrew: 'Noto Serif Hebrew', 'SBL Hebrew', serif;
  --hebrew-stam: 'StamAshkenaz', 'Noto Serif Hebrew', serif;
  --hebrew-sefarad: 'StamSefarad', 'Noto Serif Hebrew', serif;
  --lh-hebrew: 1.85;
  --reading: Georgia, 'Iowan Old Style', serif;  /* a long text she reads and marks */
  --he-s: 22px;
  --he-m: 28px;
  --he-l: 36px;

  /* space, on a 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;

  /* corners */
  --r-sm: 8px;       /* small inner things: a word, a date */
  --r-control: 12px; /* buttons, fields, rows */
  --r-card: 16px;    /* cards, sheets, menus */
  --r-pill: 999px;   /* chips, pills, and anything round */

  /* shadows */
  --shadow-lift: 0 6px 18px #0003;   /* a button that floats, a card lifted */
  --shadow-float: 0 14px 40px #0003; /* menus, popovers, sheets */
  --shadow-art: 0 1px 2px #0004;     /* under GabChai's picture */
  --shadow-key: 0 3px 0 #0003;       /* a key you press down, like the pens */
  --shadow-key-down: inset 0 2px 5px #0003;

  /* motion: two durations; every animation also honors prefers-reduced-motion */
  --quick: .15s;
  --slow: .3s;

  /* touch */
  --touch: 44px;
  --barH: 52px;
}

/* Night changes the room behind the entrance and the sanctuary, nothing else (spec section 17). */
.night { --room: var(--room-night) }

/* The shared parts (app/src/ui/*.tsx). Every value is a token from tokens.css. */

/* ---- Button */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--touch); padding: 0 var(--s5); border-radius: var(--r-control);
  font: 600 var(--t-md)/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer; transition: background-color var(--quick), border-color var(--quick);
}
.ui-btn:disabled, .ui-btn[aria-disabled=true] { cursor: default }
.ui-primary { background: var(--action); color: var(--on-action) }
.ui-primary:hover:not(:disabled) { background: var(--action-hover) }
.ui-primary:disabled:not([aria-busy]) { background: var(--disabled) }
.ui-secondary { background: var(--surface-card); color: var(--action); border-color: var(--action) }
.ui-secondary:hover:not(:disabled) { background: var(--action-soft) }
.ui-secondary[aria-pressed=true] { background: var(--action); color: var(--on-action) }
/* pressed stays pressed under the pointer: a phone's last tap leaves it there, and the pale hover fill under white text read 1.15 to 1 */
.ui-secondary[aria-pressed=true]:hover:not(:disabled) { background: var(--action-hover) }
.ui-quiet { background: none; color: var(--text-muted) }
.ui-quiet:hover:not(:disabled) { background: var(--surface-soft); color: var(--text) }
/* in a dialog, a sheet or a menu every button has an edge, so none reads as floating text (Moti, walk 6: "a border on all buttons in the menus") */
.ui-dialog .ui-quiet, .ui-sheet-left .ui-quiet, .ui-menu .ui-quiet { border-color: var(--line-strong) }
.ui-danger { background: var(--surface-card); color: var(--count-ink); border-color: var(--count) }
.ui-danger:hover:not(:disabled) { background: var(--surface-soft) }
.ui-link { background: none; color: var(--action); padding: 0 var(--s1); text-decoration: underline; text-underline-offset: 3px }
.ui-secondary:disabled:not([aria-busy]), .ui-quiet:disabled, .ui-danger:disabled, .ui-link:disabled { opacity: .5 }
.ui-sm { min-height: 36px; padding: 0 var(--s3); font-size: var(--t-sm) }
.ui-sm.ui-icon { width: 36px }
.ui-icon { width: var(--touch); padding: 0; border-radius: var(--r-pill); font-size: var(--t-lg) }
.ui-block { width: 100%; white-space: normal }   /* a full-width button wraps a long name rather than leaving the screen */
.ui-back {
  display: inline-flex; align-items: center; gap: var(--s1); align-self: flex-start; min-height: var(--touch);
  padding: 0 var(--s2); margin: 0 0 var(--s3) calc(-1 * var(--s2)); border-radius: var(--r-control);
  font: 600 var(--t-md)/1.2 var(--sans); color: var(--action); text-decoration: none;
}
.ui-back > span { font-size: var(--t-lg) }
.ui-back:hover { background: var(--surface-soft) }
.ui-spin { width: 1em; height: 1em; border-radius: var(--r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .7s linear infinite }
@keyframes ui-spin { to { transform: rotate(360deg) } }

/* ---- Field */
.ui-field { display: block; margin: 0 0 var(--s4) }
.ui-label { display: block; font: 600 var(--t-sm)/1.3 var(--sans); margin: 0 0 var(--s1); color: var(--text) }
.ui-hint { display: block; font-size: var(--t-sm); color: var(--text-muted); margin: var(--s1) 0 0 }
.ui-labelline { display: flex; align-items: baseline; gap: var(--s1); margin: 0 0 var(--s1) }
.ui-labelline .ui-label { margin: 0 }
.ui-need { font-size: var(--t-sm); color: var(--text-muted) }
.ui-input {
  width: 100%; min-height: var(--touch); border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 10px var(--s3); background: var(--surface-card); font: var(--t-base)/var(--lh) var(--sans); color: var(--text);
}
/* iOS WebKit gives a date its own width, wider than a phone's card (Moti, 2026-10-29: "picking a saturday date extends
   off screen"); without its native look it takes the field's width, and its value sits left like every other field's */
.ui-input:is([type=date], [type=time], [type=datetime-local], [type=month]) { -webkit-appearance: none; appearance: none; min-width: 0; display: block; box-sizing: border-box }
.ui-input::-webkit-date-and-time-value { text-align: left }
.ui-input:focus-visible { border-color: var(--action) }
.ui-input[aria-invalid=true] { border-color: var(--count) }
textarea.ui-input { min-height: 140px; background: var(--surface-input); resize: vertical }
.ui-error { display: block; color: var(--count-ink); font: 600 var(--t-sm)/1.3 var(--sans); margin: var(--s1) 0 0 }

/* ---- Card */
.ui-card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4) var(--s4) }
.ui-card.ui-clergy { background: var(--needs-soft); border: 0; border-left: 4px solid var(--needs) }
.ui-card.ui-ask { background: var(--action); border: 0; color: var(--on-action) }
.ui-card.ui-note { background: var(--action-soft); border-color: var(--action) }
.ui-card > :first-child { margin-top: 0 }
.ui-card > :last-child { margin-bottom: 0 }
/* a button set straight in a card, under something else, keeps the standard gap (Moti, 2026-11-09: "no padding") */
.ui-card > :not(.ui-btn) + .ui-btn { margin-top: var(--s3) }

/* ---- Chip and Count */
.ui-chip { display: inline-flex; align-items: center; font: 700 var(--t-xs)/1 var(--sans); padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap; flex: none }
.ui-chip.ui-good { background: var(--good-soft); color: var(--action) }
.ui-chip.ui-needs { background: var(--needs-soft); color: var(--needs-ink) }
.ui-chip.ui-quiet { background: var(--quiet-soft); color: var(--text-muted) }
.ui-chip.ui-live { background: var(--action-soft); color: var(--action); text-transform: uppercase; letter-spacing: var(--caps) }
.ui-chip.ui-stop { background: var(--count-soft); color: var(--stop-ink) }
.ui-chip.ui-edge { box-shadow: inset 0 0 0 1.5px var(--edge, currentColor) }
.ui-chip.ui-edge.ui-good { --edge: var(--good) }
.ui-chip.ui-edge.ui-needs { --edge: var(--needs) }
.ui-chip.ui-edge.ui-stop { --edge: var(--count) }
.ui-chipbtn { border: 0; gap: var(--s1); font-size: var(--t-sm); padding: var(--s2) var(--s3); min-height: 32px; cursor: pointer }
.ui-chipbtn:hover { box-shadow: inset 0 0 0 1px currentColor }
.ui-count { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--count); color: var(--on-action); font: 700 var(--t-xs)/20px var(--sans); text-align: center; flex: none }

/* ---- Segmented */
/* as wide as its words: a column or grid around it would otherwise stretch it, the last choice seeming to fill the row */
.ui-seg { display: inline-flex; width: fit-content; max-width: 100%; flex-wrap: wrap; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); overflow: hidden; background: var(--surface-card) }
.ui-seg button { border: 0; background: none; padding: 0 var(--s4); min-height: var(--touch); font: 600 var(--t-md) var(--sans); color: var(--action) }
.ui-seg button + button { border-left: 1px solid var(--line) }
.ui-seg button[data-state=on] { background: var(--action); color: var(--on-action) }

/* ---- Choice: cards, one chosen; Choices: several */
.ui-choice { display: grid; gap: var(--s2) }
.ui-copt {
  display: flex; gap: var(--s3); align-items: center; width: 100%; min-height: 64px; padding: var(--s3) var(--s4);
  background: var(--surface-card); border: 2px solid var(--line); border-radius: var(--r-control);
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.ui-copt:hover { border-color: var(--line-strong) }
.ui-copt[data-state=on] { border-color: var(--action) }
.ui-copt[data-disabled] { cursor: default }
.ui-ccheck { width: 24px; height: 24px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center }
.ui-copt[data-state=on] .ui-ccheck { background: var(--action); border-color: var(--action) }
.ui-copt[data-state=on] .ui-ccheck::after { content: '✓'; color: var(--on-action); font: 700 var(--t-sm)/1 var(--sans) }

/* ---- Sheet and Dialog */
.ui-scrim { position: fixed; inset: 0; z-index: 200; background: var(--scrim); animation: ui-fade var(--quick) ease-out }
.ui-dialog {
  /* clear of a phone's clock and home bar: the app draws under both. Its top stays put, so what opens inside it grows
     it downward and nothing above moves (Moti, 2026-11-10: "make the modal not jump around") */
  --dlg-top: calc(env(safe-area-inset-top) + min(8dvh, 72px));
  position: fixed; z-index: 201; left: 50%; top: var(--dlg-top); transform: translateX(-50%);
  width: min(720px, calc(100vw - var(--s8))); max-height: calc(100dvh - var(--dlg-top) - var(--s4) - env(safe-area-inset-bottom));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-float); animation: ui-fade var(--quick) ease-out;
}
.ui-dialog.ui-narrow { width: min(420px, calc(100vw - var(--s8))) }
/* a whole page's worth, like the library over a lesson: the full screen on a phone, a large window on a computer */
.ui-dialog.ui-wide { top: calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2); transform: translate(-50%, -50%); width: min(960px, calc(100vw - var(--s8))); height: calc(100dvh - var(--s8) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none }
@media (max-width: 640px) {
  .ui-dialog.ui-wide { top: 50%; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0 }
  .ui-dialog.ui-wide .ui-shd { padding-top: calc(var(--s2) + env(safe-area-inset-top)) }
  .ui-dialog.ui-wide .ui-sbd { padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)) }
}
.ui-sheet-left {
  position: fixed; z-index: 201; left: 0; top: 0; bottom: 0; width: min(340px, 86vw);
  display: flex; flex-direction: column; background: var(--surface-bar); box-shadow: var(--shadow-float);
  padding-top: env(safe-area-inset-top); animation: ui-slide var(--quick) ease-out;
}
.ui-shd { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) var(--s2) var(--s2) var(--s4); background: var(--surface-bar); border-bottom: 1px solid var(--line) }
.ui-shd h2 { flex: 1; margin: 0; font: 600 var(--t-xl)/var(--lh-tight) var(--serif) }
.ui-sbd { padding: var(--s4); overflow: auto }
.ui-sdesc { margin: 0 0 var(--s3); color: var(--text-muted) }
@keyframes ui-fade { from { opacity: 0 } }
@keyframes ui-slide { from { transform: translateX(-100%) } }

/* ---- Menu */
.ui-menu { min-width: 240px; max-width: min(340px, var(--radix-dropdown-menu-content-available-width)); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: var(--s2); z-index: 210; animation: ui-fade var(--quick) ease-out }
.ui-mitem { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); padding: 0 var(--s3); border-radius: var(--r-control); font: 500 var(--t-md) var(--sans); cursor: pointer; outline: none; user-select: none }
.ui-mitem[data-highlighted] { background: var(--surface-soft) }
.ui-mitem[data-highlighted]:focus-visible, .ui-mitem:focus-visible { box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px var(--focus-edge) }
.ui-msep { height: 1px; background: var(--line); margin: var(--s1) 0 }
.ui-mlabel { padding: var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s1) }

/* ---- ListRow */
.ui-list { display: grid; gap: var(--s2) }
.ui-lrow {
  display: flex; gap: var(--s3); align-items: center; width: 100%; min-height: 64px; padding: var(--s3) var(--s4);
  background: var(--surface-card); border: 2px solid transparent; border-radius: var(--r-control); box-shadow: 0 0 0 1px var(--line);
  color: var(--text); text-decoration: none; text-align: left; font: inherit;
}
a.ui-lrow:hover, button.ui-lrow:hover { box-shadow: 0 0 0 1px var(--action) }
.ui-lrow[aria-current] { border-color: var(--action) }
.ui-lrow.ui-locked { opacity: .7 }
.ui-lead { width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; font-weight: 700; background: var(--quiet-soft); color: var(--text-muted) }
.ui-lead.ui-done { background: var(--action); color: var(--on-action) }
.ui-lead.ui-cur { background: var(--good-soft); color: var(--action) }
.ui-lead.ui-blue { background: var(--link-soft); color: var(--link); text-decoration: none; padding: 0 }
.ui-lbody { flex: 1; min-width: 0 }
.ui-lbody b { display: block; font-size: var(--t-base) }
.ui-lbody span { display: block; font-size: var(--t-sm); color: var(--text-muted) }

/* ---- SectionHead and Kicker */
.ui-kicker { margin: 0; font: 700 var(--t-xs)/1.3 var(--sans); letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-muted) }
.ui-shead { display: flex; gap: var(--s2); align-items: center; margin: var(--s5) 2px var(--s2) }

/* ---- Page, Stack, Row */
.ui-page { margin: 0 auto; padding: var(--s5) var(--s4) var(--s12) }
.ui-page.ui-column { max-width: calc(760px + 2 * var(--s4)) }
.ui-page > h1 + p { margin: var(--s2) 0 var(--s4) }
.ui-page > .ui-card { margin: var(--s3) 0 }
.ui-page.ui-wide { max-width: calc(1120px + 2 * var(--s4)) }
.ui-stack { display: flex; flex-direction: column }
.ui-row { display: flex; align-items: center; flex-wrap: wrap }
.ui-grow { flex: 1; min-width: 0 }
.ui-title { margin: 0; font: 600 var(--t-2xl)/var(--lh-tight) var(--serif) }
.ui-title small { display: block; font: 400 var(--t-sm)/1.4 var(--sans); color: var(--text-muted) }
.ui-titlerow { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between }
.ui-titlerow .ui-title { flex: 1; min-width: 0 }
.ui-titlerow > .ui-btn { flex: none }

/* ---- Hebrew */
.ui-he { font-family: var(--hebrew); font-weight: 500; line-height: var(--lh-hebrew) }
.ui-he.ui-stam { font-family: var(--hebrew-stam); font-weight: 400 }
.ui-he.ui-sefarad { font-family: var(--hebrew-sefarad); font-weight: 400 }
.ui-he.ui-s { font-size: var(--he-s) } .ui-he.ui-m { font-size: var(--he-m) } .ui-he.ui-l { font-size: var(--he-l) }

/* ---- Avatar and SaveState */
.ui-av { display: inline-grid; place-items: center; border-radius: var(--r-pill); color: var(--on-action); font-weight: 700; flex: none; line-height: 1 }
.ui-glyph { display: inline-block; vertical-align: -0.125em; flex: none }
.ui-save { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--text-muted) }
.ui-save.ui-failed { color: var(--count-ink); font-weight: 600 }

/* ---- Notice and the toasts */
.ui-notice { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid; font-size: var(--t-md); color: var(--text); min-height: var(--touch) }
.ui-notice.ui-n-success { background: var(--good-soft); border-color: var(--good) }
.ui-notice.ui-n-error { background: var(--count-soft); border-color: var(--count) }
.ui-notice.ui-n-info { background: var(--link-soft); border-color: var(--link-edge) }
/* a notice under the button that caused it keeps its distance (Moti, 2026-10-01: "no padding between button and notification") */
.ui-btn + .ui-notice { margin-top: var(--s3) }
.ui-nicon { width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; flex: none; font: 700 var(--t-sm)/1 var(--sans); color: var(--on-action) }
.ui-n-success .ui-nicon { background: var(--good) } .ui-n-error .ui-nicon { background: var(--count-ink) } .ui-n-info .ui-nicon { background: var(--link) }
.ui-ntext { flex: 1; min-width: 0 }
.ui-toasts { position: fixed; z-index: 300; left: 0; right: 0; top: calc(var(--s3) + env(safe-area-inset-top)); display: grid; gap: var(--s2); justify-items: center; padding: 0 var(--s4); pointer-events: none }
.ui-toast { width: min(460px, 100%); pointer-events: auto; box-shadow: var(--shadow-float); border-radius: var(--r-control); opacity: 0; transform: translateY(-8px); transition: opacity var(--quick), transform var(--quick) }
.ui-toast.ui-in { opacity: 1; transform: none }

/* ---- CopyField */
.ui-copy { display: flex; gap: var(--s2) }
.ui-copy .ui-input { flex: 1; min-width: 0; font-size: var(--t-sm); background: var(--surface-soft); text-overflow: ellipsis }

/* ---- Loader: GabChai, what is getting ready, and how far along */
.ui-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s5) var(--s4); text-align: center }
.ui-loader-cover { position: absolute; inset: 0; z-index: 3; background: var(--surface); transition: opacity .5s ease-out }
.ui-loader-gc { width: 96px; height: 96px; object-fit: contain; animation: ui-bob 1.6s ease-in-out infinite }
.ui-loader-label { margin: 0; font: 600 var(--t-lg) var(--serif); color: var(--text) }
/* a room's loader: GabChai's tallit video on its own black (Loader, tallit) */
.ui-loader-tallit { background: var(--greeting-black) }
/* a room's loader is GabChai alone: its line is for a screen reader only (Moti, 2026-10-27: "remove the text too") */
.ui-loader-tallit .ui-loader-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.ui-loader-video { height: min(42dvh, 320px); aspect-ratio: 464 / 688; object-fit: contain }
@keyframes ui-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

@media (prefers-reduced-motion: reduce) {
  .ui-toast { transition: none; transform: none }
  .ui-btn { transition: none }
  .ui-scrim, .ui-dialog, .ui-sheet-left, .ui-menu { animation: none }
  .ui-spin { animation: none }
  .ui-loader-gc { animation: none }
  .ui-loader-cover { transition: none }
}
.ui-confirm-body { margin: 0 0 var(--s3) }
.ui-colors { display: flex; flex-wrap: wrap; gap: var(--s2) }
.ui-colors button { padding: 2px; border: 0; background: none; border-radius: var(--r-pill); cursor: pointer; min-width: var(--touch); min-height: var(--touch); display: inline-flex; align-items: center; justify-content: center }
.ui-colors button[aria-checked=true] { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--text) }