/* Booklist — "Encore": warm, playful, sunny. The page itself is the surface; only bars, sheets and toasts float. */
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/fonts/rubik-hebrew-wght-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-display: swap; font-weight: 300 900; src: url(/fonts/rubik-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(/fonts/fredoka-hebrew-wght-normal.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-display: swap; font-weight: 300 700; src: url(/fonts/fredoka-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #FFF8F0; --band: #FFEBD6; --raised: #FFFFFF; --ink: #2B1838; --ink2: #6E5A70; --line: #F0DFCC;
  --primary: #F0652A; --on-primary: #2B1838; --accent: #7A3FE0;
  --danger: #C02633; --ok: #1A7446;
  --s-confirmed: #22995B; --s-confirmed-bg: #DDF5E6; --s-confirmed-ink: #155C38;
  --s-option: #C97C00; --s-option-bg: #FFF0C7; --s-option-ink: #7A4E00;
  --s-missing: #F0453A; --s-missing-bg: #FFE1DC; --s-missing-ink: #9E2219;
  --s-paid: #3E7BFA; --s-paid-bg: #E0EAFF; --s-paid-ink: #1F4BB0;
  --s-cancel: #958899; --s-cancel-bg: #EFEAF0; --s-cancel-ink: #5B4E60;
  --s-approved: #7A3FE0; --s-approved-bg: #EFE6FF; --s-approved-ink: #4B1FA0;
  --s-materials: #0E7C66; --s-materials-bg: #D5F2EA; --s-materials-ink: #0B5A4A;
  --hero-bg: #FFEBD6; --hero-ink: #2B1838; --hero-ink2: #6E5A70; --hero-pill: #2B1838; --hero-pill-ink: #FFF8F0; --hero-soft: rgba(43,24,56,.08);
  --nav-bg: #FFFFFF; --nav-ink: #6E5A70; --nav-active: #2B1838; --nav-active-bg: #FFEBD6;
  --wa: #15803D; --on-wa: #FFFFFF; --scrim: rgba(43,24,56,.38);
  --shadow-float: 0 -8px 32px rgba(43,24,56,.14); --shadow-pop: 0 10px 30px rgba(43,24,56,.18);
  --font-display: 'Fredoka', 'Rubik', system-ui, sans-serif; --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-btn: 999px; --r-input: 14px; --r-chip: 999px; --r-sheet: 28px; --r-hero: 28px; --r-cell: 16px;
  --ease: cubic-bezier(.32,.72,0,1); --nav-h: 76px; --rail-w: 248px;
}
/* Appearance: light by default; "dark" or "follow the phone" are chosen per device in settings (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #1E1424; --band: #2A1D31; --raised: #33253B; --ink: #FFF3E8; --ink2: #C9B8C8; --line: #3A2B42;
    --primary: #FF7D45; --on-primary: #1E1424; --accent: #B58CFF; --danger: #FF7A70; --ok: #4CC98A;
    --s-confirmed: #3BC27F; --s-confirmed-bg: #173A2A; --s-confirmed-ink: #8FE3B6;
    --s-option: #E0A42A; --s-option-bg: #3A2E12; --s-option-ink: #F5D58A;
    --s-missing: #FF6B5E; --s-missing-bg: #43201E; --s-missing-ink: #FFB3AB;
    --s-paid: #6E9BFF; --s-paid-bg: #1B2A4D; --s-paid-ink: #B5CBFF;
    --s-cancel: #9C95A3; --s-cancel-bg: #2C2A30; --s-cancel-ink: #CFC9D4;
    --s-approved: #B58CFF; --s-approved-bg: #2E2142; --s-approved-ink: #D9C6FF;
    --s-materials: #3CC9A7; --s-materials-bg: #13362F; --s-materials-ink: #9BE8D5;
    --hero-bg: #2A1D31; --hero-ink: #FFF3E8; --hero-ink2: #C9B8C8; --hero-pill: #FF7D45; --hero-pill-ink: #1E1424; --hero-soft: rgba(255,243,232,.08);
    --nav-bg: #2A1D31; --nav-ink: #C9B8C8; --nav-active: #FFF3E8; --nav-active-bg: #4A2F3B;
    --wa: #1E9E50; --scrim: rgba(0,0,0,.55); --shadow-float: 0 -8px 32px rgba(0,0,0,.5); --shadow-pop: 0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1424; --band: #2A1D31; --raised: #33253B; --ink: #FFF3E8; --ink2: #C9B8C8; --line: #3A2B42;
  --primary: #FF7D45; --on-primary: #1E1424; --accent: #B58CFF; --danger: #FF7A70; --ok: #4CC98A;
  --s-confirmed: #3BC27F; --s-confirmed-bg: #173A2A; --s-confirmed-ink: #8FE3B6;
  --s-option: #E0A42A; --s-option-bg: #3A2E12; --s-option-ink: #F5D58A;
  --s-missing: #FF6B5E; --s-missing-bg: #43201E; --s-missing-ink: #FFB3AB;
  --s-paid: #6E9BFF; --s-paid-bg: #1B2A4D; --s-paid-ink: #B5CBFF;
  --s-cancel: #9C95A3; --s-cancel-bg: #2C2A30; --s-cancel-ink: #CFC9D4;
  --s-approved: #B58CFF; --s-approved-bg: #2E2142; --s-approved-ink: #D9C6FF;
  --s-materials: #3CC9A7; --s-materials-bg: #13362F; --s-materials-ink: #9BE8D5;
  --hero-bg: #2A1D31; --hero-ink: #FFF3E8; --hero-ink2: #C9B8C8; --hero-pill: #FF7D45; --hero-pill-ink: #1E1424; --hero-soft: rgba(255,243,232,.08);
  --nav-bg: #2A1D31; --nav-ink: #C9B8C8; --nav-active: #FFF3E8; --nav-active-bg: #4A2F3B;
  --wa: #1E9E50; --scrim: rgba(0,0,0,.55); --shadow-float: 0 -8px 32px rgba(0,0,0,.5); --shadow-pop: 0 10px 30px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: 120px; scrollbar-gutter: stable; } /* the scrollbar space is always reserved, so nothing shifts when a page gets long or a sheet opens */
html.sheet-open { overflow: hidden; background-color: color-mix(in srgb, var(--bg) 62%, #2B1838); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink2); }
.prewrap { white-space: pre-wrap; }
.danger-text { color: var(--danger); }
.pad { padding: 10px 20px 0; }
.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loading { min-height: 100dvh; display: grid; place-items: center; color: var(--ink2); }
.loading .brand-mark { animation: breathe 1.4s ease-in-out infinite; }

/* ---------- brand tiles (Waze, Google Maps, WhatsApp, phone) ---------- */
.tile { --t: 52px; display: inline-block; width: var(--t); height: var(--t); flex: none; border-radius: calc(var(--t) * .27); overflow: hidden; box-shadow: 0 1px 2px rgba(43,24,56,.16), 0 0 0 1px rgba(43,24,56,.06); background: #fff; }
.tile svg { width: 100%; height: 100%; }
.tile.sm { --t: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.tile.xs { --t: 20px; border-radius: 6px; box-shadow: none; }
.tile.lg { --t: 72px; }
.tile-cal { display: inline-grid; place-items: center; background: var(--raised); color: var(--accent); }
.tile-cal .ico { width: 26px; height: 26px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-btn); font-weight: 600; font-size: 15.5px; line-height: 1.1; white-space: nowrap; text-decoration: none; transition: transform .14s var(--ease), filter .14s, background-color .2s, opacity .2s; user-select: none; }
.btn:active { transform: scale(.96); }
.btn:disabled, .btn.is-busy { opacity: .6; pointer-events: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { filter: brightness(1.04); }
.btn.soft { background: var(--band); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.wa { background: var(--wa); color: var(--on-wa); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.sm { min-height: 40px; padding: 0 15px; font-size: 14.5px; }
.btn.block { width: 100%; }
.btn .ico { width: 20px; height: 20px; }
.btn .tile.xs { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; border: 0; background: transparent; color: var(--ink); text-decoration: none; transition: background-color .2s, transform .14s var(--ease); }
.icon-btn:hover { background: var(--band); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.soft { background: var(--band); }
.link { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14.5px; min-height: 40px; padding: 0 2px; }

/* ---------- page shell ---------- */
.main { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom, 0px)); }
.portal-main { padding-bottom: 48px; }
.view { outline: none; }
.rail { display: none; }
.ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 8px; }
.ptitle { font: 600 30px/1.15 var(--font-display); margin: 0; text-wrap: balance; }
.psub { color: var(--ink2); font-size: 14.5px; margin-top: 4px; }
.empty-state { min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.empty-state > .ico { width: 44px; height: 44px; color: var(--ink2); }

/* ---------- hero ---------- */
.hero { background: var(--hero-bg); color: var(--hero-ink); padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 22px; border-radius: 0 0 var(--r-hero) var(--r-hero); }
.hello { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--hero-ink2); margin-bottom: 18px; }
.hello b { color: var(--hero-ink); font: 600 22px/1.2 var(--font-display); }
/* Today's date, unmistakable: its own pill under the greeting. */
.today-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: -8px 0 18px; padding: 8px 14px; border-radius: 999px; background: var(--hero-soft); color: var(--hero-ink); font-size: 15px; }
.today-line .ico { width: 18px; height: 18px; color: var(--primary); }
.today-line .tl-label { font-weight: 700; color: var(--primary); }
.today-line .tl-date { font-weight: 600; }
.today-line .tl-heb { color: var(--hero-ink2); font-weight: 500; }
.hero-eyebrow { font-size: 14.5px; font-weight: 500; color: var(--hero-ink2); }
.hero-title { font: 600 26px/1.2 var(--font-display); margin: 4px 0 2px; text-wrap: balance; }
.hero-sub { font-size: 15px; color: var(--hero-ink2); }
.hero-empty { display: grid; gap: 14px; justify-items: start; }
.leave { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.leave-lbl { display: block; font-size: 15px; font-weight: 500; color: var(--hero-ink2); }
.leave-time { font: 700 46px/1 var(--font-body); letter-spacing: -.5px; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--hero-pill); color: var(--hero-pill-ink); font-weight: 600; font-size: 14px; border: 0; }
.pill .ico { width: 18px; height: 18px; }
.pill-btn { transition: transform .14s var(--ease); }
.pill-btn:active { transform: scale(.95); }
.leave-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--hero-ink2); margin-top: 8px; padding: 4px 0; border: 0; background: none; min-height: 32px; }
.leave-meta .ico { width: 15px; height: 15px; opacity: .7; }
button.leave-box { display: block; border: 0; background: none; color: inherit; padding: 0; text-align: start; border-radius: 12px; transition: transform .14s var(--ease); }
button.leave-box:active { transform: scale(.97); }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink2); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.travel-picks { margin-bottom: 18px; }
.travel-picks .pick { flex: 1 0 calc(33% - 8px); justify-content: center; }
/* The three hero buttons always share one row; long names shorten with an ellipsis. */
.hero-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: nowrap; }
.hero-actions .btn { flex: 1 1 auto; min-width: 0; padding-inline: 14px; gap: 7px; }
.bl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .btn.soft { background: var(--hero-soft); color: var(--hero-ink); }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--hero-soft); font-weight: 500; font-size: 14.5px; }
.hero-note .ico { width: 18px; height: 18px; }

/* ---------- press feedback: every tappable element answers, softly, even on a quick tap ---------- */
/* Press feedback: every tappable thing gets a soft orange background the moment it is touched (kept ≥200ms, so even a quick tap shows). */
:root { --press: color-mix(in srgb, var(--primary) 16%, transparent); --press-on-band: color-mix(in srgb, var(--primary) 24%, var(--band)); }
.row, .row-hit, .cell, .wcard, .qa, .pick, .extra, .rail-i, .nav-i, .icon-btn, .link, .back, .a-chip, .tabs button, .mini-seg button, .leave-meta, button.leave-box, .hero-link, .check, summary, .wday-h, .stepper button, .pill-btn, .date-pick, .check-btn, .x { transition: background-color .28s var(--ease), transform .18s var(--ease), box-shadow .2s, color .2s; }
.is-pressed:not(.btn):not(.fab):not(.toggle):not(.check-btn):not(.nav-i):not(.qa) { background-color: var(--press) !important; }
.btn.soft.is-pressed, .icon-btn.soft.is-pressed, .cell.sel.is-pressed, .date-pick.is-pressed, .pill-btn.is-pressed { background-color: var(--press-on-band) !important; }
.btn.ghost.is-pressed, .btn.danger.is-pressed { background-color: var(--press) !important; }
.qa.is-pressed { background-color: var(--press); }
.nav-i.is-pressed .ic-wrap { background-color: var(--press); }
.row-hit.is-pressed, .hero-link.is-pressed, .check.is-pressed, summary.is-pressed, .pill-btn.is-pressed { border-radius: 12px; }
.link.is-pressed, .back.is-pressed, .leave-meta.is-pressed { border-radius: 10px; }
.cell.is-pressed { transform: scale(.94); }
.btn.is-pressed { transform: scale(.96); filter: brightness(.95); }
.icon-btn.is-pressed, .a-chip.is-pressed { transform: scale(.92); }
.qa.is-pressed, .fab.is-pressed { transform: scale(.92); }
.fab.is-pressed { transform: translateY(-12px) scale(.92); }
.pick.is-pressed, .extra.is-pressed, .tabs button.is-pressed { transform: scale(.96); }
.nav-i.is-pressed .ico { transform: scale(.86); }
.wcard.is-pressed { transform: scale(.98); }
button.leave-box.is-pressed { transform: scale(.97); }

/* ---------- sections and rows: hierarchy from space and inset hairlines, not boxes ---------- */
.sec { margin-top: 28px; }
.sec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px 4px; margin: 0; font: 600 15px/1.3 var(--font-body); color: var(--ink2); min-height: 40px; }
.sec-h .count { color: var(--ink); }
.rows { display: flex; flex-direction: column; }
.row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 11px 20px; width: 100%; text-align: start; background: transparent; border: 0; color: inherit; text-decoration: none; font-size: 16px; transition: background-color .18s; }
button.row:active, a.row:active { background: var(--band); }
@media (hover: hover) { button.row:hover, a.row:hover { background: color-mix(in srgb, var(--band) 55%, transparent); } }
.row + .row::before { content: ""; position: absolute; top: 0; inset-inline-start: 70px; inset-inline-end: 0; height: 1px; background: var(--line); }
.row.plain + .row.plain::before, .row.plain + .row::before { inset-inline-start: 20px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-t { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.row-s { font-size: 14px; color: var(--ink2); margin-top: 1px; overflow-wrap: anywhere; }
.row-v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .btn.sm { flex: none; }
.bubble { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; flex: none; background: var(--band); color: var(--ink); }
.bubble .ico { width: 20px; height: 20px; }
.t-missing { background: var(--s-missing-bg); color: var(--s-missing-ink); }
.t-option { background: var(--s-option-bg); color: var(--s-option-ink); }
.t-paid { background: var(--s-paid-bg); color: var(--s-paid-ink); }
.t-confirmed { background: var(--s-confirmed-bg); color: var(--s-confirmed-ink); }
.t-cancel { background: var(--s-cancel-bg); color: var(--s-cancel-ink); }
.chev { color: var(--ink2); width: 18px; height: 18px; }
.empty-line { display: flex; align-items: center; gap: 10px; padding: 14px 20px; color: var(--ink2); }
.empty-line .ico { color: var(--s-confirmed); }
.dblock { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; flex: none; line-height: 1.1; }
.dblock b { font: 700 22px/1 var(--font-body); }
.dblock span { font-size: 12px; color: var(--ink2); margin-top: 3px; white-space: nowrap; }
.dblock.today b { color: var(--primary); }
.home-cols { display: block; }

/* chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-chip); font-size: 13px; font-weight: 500; line-height: 1.45; white-space: nowrap; flex: none; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; opacity: .85; }
.c-confirmed { background: var(--s-confirmed-bg); color: var(--s-confirmed-ink); }
.c-option { background: var(--s-option-bg); color: var(--s-option-ink); }
.c-missing { background: var(--s-missing-bg); color: var(--s-missing-ink); }
.c-paid { background: var(--s-paid-bg); color: var(--s-paid-ink); }
.c-cancel { background: var(--s-cancel-bg); color: var(--s-cancel-ink); }
.c-waiting { background: var(--s-option-bg); color: var(--s-option-ink); }
.c-deposit { background: var(--s-paid-bg); color: var(--s-paid-ink); }
.c-approved { background: var(--s-approved-bg); color: var(--s-approved-ink); }
.c-done { background: var(--s-confirmed-bg); color: var(--s-confirmed-ink); }
.c-materials { background: var(--s-materials-bg); color: var(--s-materials-ink); }

/* ---------- bottom navigation ---------- */
.nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--nav-bg); box-shadow: var(--shadow-float); view-transition-name: nav; }
.nav-pill { position: absolute; top: 0; left: 0; border-radius: 999px; background: var(--nav-active-bg); transition: transform .42s var(--ease), opacity .2s; pointer-events: none; }
.nav-pill.no-anim { transition: none; }
.nav-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--nav-ink); font-size: 12px; font-weight: 500; min-height: 54px; padding: 2px 0; transition: color .25s; }
.nav-i .ic-wrap { position: relative; display: grid; place-items: center; width: 58px; height: 32px; border-radius: 999px; }
.nav-i .ico { transition: transform .3s var(--ease); }
.nav-i[aria-current="page"] { color: var(--nav-active); font-weight: 600; }
.nav-i[aria-current="page"] .ico { stroke-width: 2.3; transform: translateY(-1px); }
.nav-i:active .ico { transform: scale(.88); }
.badge { position: absolute; top: -2px; inset-inline-start: 34px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--s-missing); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--nav-bg); }
.fab { justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary); margin-bottom: 6px; transform: translateY(-14px); box-shadow: 0 8px 20px rgba(240,101,42,.38); transition: transform .2s var(--ease), box-shadow .2s; }
.fab .ico { width: 26px; height: 26px; stroke-width: 2.4; transition: transform .3s var(--ease); }
.fab:active { transform: translateY(-12px) scale(.93); }
.fab:hover .ico { transform: rotate(90deg); }

/* ---------- calendar ---------- */
/* Fixed calendar header: the title never wraps (so the layout never moves between months), the nav keeps its place. */
.cal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 6px; }
.cal-titles { min-width: 0; }
.cal-title { font-size: clamp(21px, 6.4vw, 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.cal-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 1.5em; }
.cal-nav { display: flex; gap: 6px; align-items: center; transition: opacity .2s; }
.cal-nav .icon-btn { width: 40px; height: 40px; }
.cal-nav[data-hidden] { opacity: 0; pointer-events: none; }
.cal-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 20px 12px; }
.tabs { position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: var(--r-btn); background: var(--band); isolation: isolate; }
.tabs .seg-pill { position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc((100% - 6px) / 3); border-radius: var(--r-btn); background: var(--raised); box-shadow: 0 1px 4px rgba(43,24,56,.14); transition: transform .42s var(--ease); z-index: -1; }
.tabs[data-i="1"] .seg-pill { transform: translateX(-100%); }
.tabs[data-i="2"] .seg-pill { transform: translateX(-200%); }
.tabs button { position: relative; border: 0; background: transparent; min-height: 38px; min-width: 78px; padding: 0 16px; border-radius: var(--r-btn); font-weight: 500; color: var(--ink2); transition: color .3s, transform .18s var(--ease); }
.tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 0 10px; }
.wd { text-align: center; font-size: 13px; color: var(--ink2); font-weight: 500; padding: 4px 0; }
.cell { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 60px; padding: 5px 0 6px; border: 0; border-radius: var(--r-cell); background: transparent; color: var(--ink); transition: background-color .2s, transform .12s var(--ease); }
.cell:active { transform: scale(.94); }
.cell .top { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cell .gd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: background-color .25s, color .25s; }
.cell .hd { font-size: 10.5px; color: var(--ink2); line-height: 1.1; white-space: nowrap; }
.cell .dots { display: flex; gap: 3px; height: 7px; margin-top: 3px; }
.cell .names { display: none; }
.d { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--s-confirmed); flex: none; }
.d.confirmed { background: var(--s-confirmed); } .d.option { background: var(--s-option); } .d.missing { background: var(--s-missing); } .d.paid { background: var(--s-paid); } .d.cancel { background: var(--s-cancel); }
.d.waiting { background: var(--s-option); } .d.deposit { background: var(--s-paid); } .d.approved { background: var(--s-approved); } .d.done { background: var(--s-confirmed); } .d.materials { background: var(--s-materials); }
.cell.out { opacity: .38; }
.cell.today .gd { background: var(--primary); color: var(--on-primary); }
.cell.sel { background: var(--band); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 20px 0; font-size: 13px; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.day-panel { margin-top: 16px; }
.search { padding: 0 16px 4px; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: var(--r-input); background: var(--band); color: var(--ink2); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.past { margin-top: 18px; }
.past summary { list-style: none; display: flex; justify-content: space-between; padding: 12px 20px; color: var(--ink2); font-weight: 600; cursor: pointer; }
.past summary::-webkit-details-marker { display: none; }

/* ---------- week ---------- */
.week { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
.wday { border-radius: 20px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.wday.today { box-shadow: 0 0 0 2px var(--primary); }
.wday.empty { background: transparent; }
.wday-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; }
.wday.empty .wday-h { padding-block: 8px; }
.wd-num { min-width: 36px; font: 700 26px/1 var(--font-display); text-align: center; }
.wday.empty .wd-num { font-size: 19px; font-weight: 600; color: var(--ink2); }
.wday.today .wd-num { color: var(--primary); }
.wd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wd-name { font-size: 15px; font-weight: 600; }
.wday.empty .wd-name { font-size: 14px; font-weight: 500; color: var(--ink2); }
.wday-h .hd { font-size: 12.5px; color: var(--ink2); }
.wday.empty .wday-h .hd { display: none; }
.wd-today { padding: 3px 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; }
.wd-add { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--band); color: var(--ink2); }
.wd-add .ico { width: 18px; height: 18px; }
.wday.empty .wd-add { background: transparent; }
.wday-evs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.wcard { display: grid; grid-template-columns: 50px 4px minmax(0, 1fr); gap: 0 12px; align-items: stretch; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; }
.wcard + .wcard { border-top: 1px solid var(--line); }
.wc-time { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.wc-time b { font-size: 16px; font-weight: 700; }
.wc-time span { font-size: 12.5px; color: var(--ink2); }
.wc-bar { border-radius: 4px; background: var(--wc, var(--line)); }
.wcard.clash .wc-bar { background: var(--danger); }
.wc-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wc-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wc-place { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; color: var(--ink2); }
.wc-place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-place .ico { width: 14px; height: 14px; flex: none; }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.w-waiting { --wc: var(--s-option); } .w-deposit { --wc: var(--s-paid); } .w-approved { --wc: var(--s-approved); } .w-done { --wc: var(--s-confirmed); } .w-materials { --wc: var(--s-materials); } .w-cancel { --wc: var(--s-cancel); }

/* ---------- event page ---------- */
.ev-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; }
.back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--ink); font-weight: 500; min-height: 44px; padding: 0 8px; border-radius: 999px; }
.back:active { background: var(--band); }
.ev-head { padding: 6px 20px 0; }
.ev-type { font-size: 14.5px; color: var(--ink2); font-weight: 500; }
.ev-title { font: 600 28px/1.18 var(--font-display); margin: 2px 0 6px; text-wrap: balance; }
.ev-date { font-size: 15px; color: var(--ink2); margin-bottom: 12px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 20px 12px 4px; }
.qa { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; min-height: 80px; padding: 0; text-decoration: none; text-align: center; border-radius: 16px; transition: transform .15s var(--ease); }
.qa:active { transform: scale(.92); }
.qa .tile { transition: box-shadow .2s, transform .2s var(--ease); }
@media (hover: hover) { .qa:hover .tile { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43,24,56,.16), 0 0 0 1px rgba(43,24,56,.06); } }
.qa.off { opacity: .45; }
.pending { margin: 20px 16px 0; padding: 16px; border-radius: 20px; background: var(--s-missing-bg); color: var(--ink); }
.pending h3 { margin: 0 0 10px; font-size: 16px; color: var(--s-missing-ink); display: flex; gap: 8px; align-items: center; }
.diff { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; margin-bottom: 14px; }
.diff .k { color: var(--ink2); }
.diff s { color: var(--ink2); text-decoration-thickness: 1px; }
.stale { margin: 0 0 12px; color: var(--s-missing-ink); font-size: 14px; }
.pending .acts, .acts-row { display: flex; gap: 8px; flex-wrap: wrap; }
.money-box { padding: 6px 20px 4px; }
.money-big { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.money-big .lbl { font-size: 15px; color: var(--ink2); }
.money-big .val { font: 700 30px/1.1 var(--font-body); }
/* The bar is full width and slides in from the start edge: transform only, and its leading end stays rounded. */
.track { height: 10px; border-radius: 99px; background: var(--band); overflow: hidden; margin: 12px 0 8px; }
.track i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--s-confirmed); transform: translateX(100%); transition: transform .9s var(--ease); }
.money-sub { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ink2); }
.task .check-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 999px; border: 2px solid var(--line); background: transparent; color: transparent; transition: background-color .25s, border-color .25s, color .2s, transform .15s var(--ease); }
.task .check-btn .ico { width: 20px; height: 20px; stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .05s; }
.task.done .check-btn { background: var(--s-confirmed); border-color: var(--s-confirmed); color: #fff; }
.task.done .check-btn .ico { stroke-dashoffset: 0; }
.task.done .row-t { text-decoration: line-through; color: var(--ink2); }
.stage-picker { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px; }
.stage-picker .pick[aria-pressed="true"].st-waiting { background: var(--s-option); border-color: var(--s-option); color: #fff; }
.stage-picker .pick[aria-pressed="true"].st-approved { background: var(--s-approved); border-color: var(--s-approved); color: #fff; }
:root[data-theme="dark"] .stage-picker .pick[aria-pressed="true"] { color: #1E1424; }
.stage-picker .pick[aria-pressed="true"].st-completed { background: var(--s-confirmed); border-color: var(--s-confirmed); color: #fff; }
.stage-picker .pick[aria-pressed="true"].st-materials_uploaded { background: var(--s-materials); border-color: var(--s-materials); color: #fff; }
.stage-picker .pick[aria-pressed="true"].st-cancelled { background: var(--s-cancel); border-color: var(--s-cancel); color: #fff; }
.ev-cols { display: block; }

/* ---------- money ---------- */
.big-sum { padding: 4px 20px 0; }
.big-sum .lbl { color: var(--ink2); font-size: 15px; }
.big-sum .val { font: 700 42px/1.1 var(--font-body); letter-spacing: -.5px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 20px 0; background: var(--line); border-radius: 18px; overflow: hidden; }
.stat { background: var(--bg); padding: 12px 14px; }
.stat .k { font-size: 13px; color: var(--ink2); }
.stat .v { font-weight: 700; font-size: 20px; }

/* ---------- settings ---------- */
.alerts { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px 8px; }
.a-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px 0 14px; border-radius: var(--r-chip); background: var(--band); font-weight: 500; font-size: 15px; border: 0; color: var(--ink); animation: pop-in .3s var(--ease); }
.a-chip .x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; border: 0; background: transparent; color: var(--ink2); }
.a-chip .x .ico { width: 16px; height: 16px; }
.a-add { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); padding: 0 14px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--band); border-radius: var(--r-btn); padding: 3px; flex: none; }
.stepper button { width: 38px; height: 38px; border-radius: var(--r-btn); border: 0; background: var(--raised); font-size: 18px; font-weight: 600; transition: transform .12s var(--ease); }
.stepper button:active { transform: scale(.9); }
.stepper b { min-width: 66px; text-align: center; }
.artist-row { min-height: 76px; }
.cat-row { min-height: 64px; }
.bubble.cat-orange { background: #FFE3CF; color: #B84A15; } .bubble.cat-purple { background: var(--s-approved-bg); color: var(--s-approved-ink); }
.bubble.cat-green { background: var(--s-confirmed-bg); color: var(--s-confirmed-ink); } .bubble.cat-blue { background: var(--s-paid-bg); color: var(--s-paid-ink); }
.bubble.cat-plum { background: #F1E4F4; color: #6A2C78; } .bubble.cat-teal { background: var(--s-materials-bg); color: var(--s-materials-ink); }
.sub-top { padding-top: 6px; }
.artist-row .row-t { font: 600 19px/1.25 var(--font-display); }
.artist-row + .row::before { inset-inline-start: 20px; }
.type-row { min-height: 54px; padding-block: 6px; }
.type-acts { display: flex; gap: 2px; flex: none; }
.type-acts .icon-btn { width: 40px; height: 40px; color: var(--ink2); }
.type-acts .icon-btn:disabled { opacity: .3; pointer-events: none; }
.toggle { position: relative; width: 52px; height: 32px; border-radius: 99px; border: 0; background: var(--line); flex: none; transition: background-color .25s; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 99px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .3s var(--ease); }
.toggle[aria-pressed="true"] { background: var(--s-confirmed); }
.toggle[aria-pressed="true"]::after { inset-inline-start: 23px; }

/* ---------- sheets ---------- */
#sheet-root { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: var(--scrim); }
.sheet { position: absolute; inset-inline: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--raised); color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-float); outline: none; touch-action: pan-y; }
.sheet.dragging { transition: none; }
.sheet-swap { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 8px auto 0; flex: none; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 2px 20px; flex: none; cursor: grab; }
.sheet-h h2 { margin: 0; font: 600 21px/1.25 var(--font-display); }
.sheet-b { padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.sheet .rows { margin-inline: -20px; }
.sheet .quick { padding-inline: 0; }
.sheet-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two > :only-child { grid-column: 1 / -1; }
.lead { font-size: 16px; color: var(--ink2); margin: 2px 0 14px; }
.to { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-input); background: var(--band); margin-bottom: 16px; }
.to .tile { --t: 40px; }
.to-main { display: flex; flex-direction: column; min-width: 0; }
.to .ph { color: var(--ink2); font-size: 14px; text-align: end; }
.intro-art { display: grid; place-items: center; padding: 8px 0 14px; }
.person-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.btn.danger.sm, .person-acts .danger { color: var(--danger); }

/* ---------- compact forms (new event): grouped, side by side, buttons always in view ---------- */
.compact .fgroup { padding: 2px 0 6px; }
.compact .fgroup + .fgroup { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.fg-h { font: 600 15px/1.2 var(--font-display); color: var(--ink2); margin: 0 0 10px; }
.compact .field { margin-bottom: 12px; gap: 5px; }
.compact .field > label, .compact .field > legend { font-size: 13px; }
.compact .inp { min-height: 46px; padding: 9px 12px; }
.compact .hint { font-size: 12px; min-height: 0; }
.grid2, .grid3 { display: grid; gap: 0 10px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr; }
.grid3 > :first-child { grid-column: 1 / -1; }
.grid2.wide-only { grid-template-columns: 1fr; }
.type-picks { gap: 6px; }
.type-picks .pick { min-height: 40px; padding: 0 14px; font-size: 15px; }
.other-type { margin-top: 8px; }
.portal-foot { display: flex; justify-content: center; padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.portal-foot .link { color: var(--ink2); font-weight: 500; }
/* Same-day warning without route data */
.day-note.warn { background: color-mix(in srgb, var(--s-option) 14%, var(--raised)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--s-option) 40%, transparent); }
.day-note.warn .dn-head { color: color-mix(in srgb, var(--s-option) 80%, var(--ink)); }
/* "למחרת" beside the end time when the event runs past midnight */
.nd { margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--band); color: var(--ink2); font-size: 12px; font-weight: 600; }
/* Overlapping events: marked wherever they are listed */
.cell.clash .gd { box-shadow: 0 0 0 2px var(--danger); }
.wcard.clash { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.clash-note .rows { margin-top: 6px; }
.clash-note .row { padding-inline: 0; min-height: 52px; }
/* Task rows: the text opens the task */
.task-hit { display: flex; flex: 1; min-width: 0; align-self: stretch; align-items: center; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 12px; }
.rail-foot[data-act] { cursor: pointer; border-radius: 14px; }
.toggle.is-pressed::after { transform: scale(.88); }
/* Must-fill fields carry a small mark */
.req > label::after, .req .date-head > label::after { content: '*'; margin-inline-start: 3px; color: var(--primary); font-weight: 700; }
/* Rows whose end holds its own button: the rest of the row is one tap target. */
.row.has-hit { padding-block: 0; padding-inline-start: 0; }
.row-hit { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; align-self: stretch; min-height: 62px; padding: 11px 0; padding-inline-start: 20px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
@media (min-width: 900px) { .row-hit { padding-inline-start: 16px; } }
.row.has-hit > .btn, .row.has-hit > .icon-btn, .row.has-hit > .chev { margin-block: 8px; }
.add-row .row-t { color: var(--primary); font-weight: 600; }
.bubble.t-add { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.hero-link { display: inline; padding: 0; margin: 0 -4px; padding-inline: 4px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 10px; }
button.hero-sub { display: block; }
.hero-sub .hs-date, .hero-sub .hs-time { display: block; }
.hero-sub .hs-time { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 600; color: var(--hero-ink); }
.hero-sub .hs-time .ico { width: 16px; height: 16px; }
.extra-new { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--primary); }
.extra-new .ico { width: 18px; height: 18px; }
.extra-create { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; margin-top: 6px; animation: note-in .3s var(--ease); }
.extra-create .inp { min-height: 44px; padding: 8px 12px; }
.ev-title .hero-link, .hero-title .hero-link { text-wrap: balance; }
/* "More details" in the new-event form: folded so the form stays short */
.more-fields { margin-top: 6px; }
.more-fields > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; cursor: pointer; list-style: none; margin: 0; padding: 10px 0; color: var(--ink); }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary .ico { width: 18px; height: 18px; color: var(--primary); transition: transform .3s var(--ease); }
.more-fields[open] > summary .ico { transform: rotate(45deg); }
.more-hint { flex-basis: 100%; font: 400 12.5px/1.3 var(--font-body); color: var(--ink2); }
.compact.many .fgroup + .fgroup { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.compact .more-fields { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 4px; }
/* Date field: typed, picked or Hebrew. The native picker stays rendered (invisible) so it can open over the button. */
.date-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.date-head > label { font-size: 14px; font-weight: 500; color: var(--ink2); }
.compact .date-head > label { font-size: 13px; }
.mini-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 999px; background: var(--band); isolation: isolate; }
.mini-seg::before { content: ""; position: absolute; top: 2px; bottom: 2px; inset-inline-start: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--raised); box-shadow: 0 1px 3px rgba(43,24,56,.14); transition: transform .38s var(--ease); z-index: -1; }
.mini-seg[data-i="1"]::before { transform: translateX(-100%); }
.mini-seg button { border: 0; background: transparent; min-height: 30px; min-width: 58px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink2); transition: color .25s; }
.mini-seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.date-greg { position: relative; display: flex; gap: 8px; align-items: stretch; }
.date-greg .date-text { flex: 1; letter-spacing: .02em; }
.date-greg .date-pick { width: 52px; height: auto; min-height: 46px; border-radius: var(--r-input); background: var(--band); }
.native-date { position: absolute; inset-inline-end: 0; bottom: 0; width: 52px; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.date-heb { display: grid; grid-template-columns: .8fr 1.3fr 1fr; gap: 8px; }
.date-heb .inp { padding-inline: 10px; }
.time-text { letter-spacing: .02em; }
.ne-total { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 6px; padding: 12px 14px; border-radius: 16px; background: var(--band); }
.ne-total span { font-size: 13px; color: var(--ink2); }
.ne-total b { font: 700 20px/1.2 var(--font-body); }
/* Same-day note */
.day-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--band); animation: note-in .3s var(--ease); }
.day-note.bad { background: color-mix(in srgb, var(--danger) 10%, var(--raised)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 35%, transparent); }
.dn-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dn-head .ico { width: 18px; height: 18px; }
.day-note.bad .dn-head { color: var(--danger); }
.day-note ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.day-note li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.dn-t { font-weight: 600; }
.dn-h { color: var(--ink2); }
.dn-p { flex-basis: 100%; color: var(--ink2); font-size: 13px; }
.dn-gap { flex-basis: 100%; font-size: 13px; color: var(--ink2); }
@keyframes note-in { from { opacity: 0; transform: translateY(-4px); } }
.sheet-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px -20px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--raised); box-shadow: 0 -1px 0 var(--line), 0 -10px 18px -12px rgba(43,24,56,.18); }
.sheet-foot .btn { width: auto; }
.sheet-foot.single { grid-template-columns: 1fr; }
.live-total { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 4px 0 6px; background: var(--line); border-radius: 16px; overflow: hidden; }
.live-total > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--band); }
.live-total span { font-size: 13px; color: var(--ink2); }
.live-total b { font: 700 20px/1.2 var(--font-body); }
.hero-chips { margin: 4px 0 6px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { font-size: 14px; font-weight: 500; color: var(--ink2); padding: 0; }
fieldset.field > legend { margin-bottom: 6px; }
.inp { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-input); border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.inp:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); outline: none; }
.inp.sm { min-height: 42px; padding: 6px 10px; font-size: 15px; width: auto; }
textarea.inp { min-height: 110px; line-height: 1.5; resize: vertical; }
input[type="date"].inp, input[type="time"].inp { direction: rtl; text-align: start; }
.inp[dir="ltr"] { text-align: left; }
.hint { color: var(--ink2); font-size: 13px; min-height: 1em; }
.form-error { color: var(--danger); font-weight: 500; font-size: 14.5px; min-height: 0; margin: 0 0 10px; }
.form-error:empty { display: none; }
.form-group { font: 600 17px/1.3 var(--font-display); margin: 22px 0 12px; }
.form-group:first-child { margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 48px; font-weight: 500; margin-bottom: 8px; }
.check input { width: 22px; height: 22px; accent-color: var(--s-confirmed); }
.pickers { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-chip); border: 1.5px solid var(--line); background: transparent; font-weight: 500; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .12s var(--ease); }
.pick:active { transform: scale(.95); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked), .pick[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pick:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pickers.big .pick { min-height: 52px; font-size: 16px; }
.extra { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--r-input); border: 1.5px solid var(--line); margin-bottom: 10px; min-height: 60px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.extra input { position: absolute; opacity: 0; pointer-events: none; }
.extra .box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--line); color: transparent; flex: none; transition: background-color .2s, border-color .2s, color .2s; }
.extra .box .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.extra-name { flex: 1; font-weight: 500; }
.extra:has(input:checked) { border-color: var(--primary); background: var(--band); }
.extra:has(input:checked) .box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.extra:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.link-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.link-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
.link-row .inp { min-height: 46px; }
details.advanced { margin: 6px 0 16px; border-radius: var(--r-input); background: var(--bg); padding: 2px 14px; }
details.advanced summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.perm-table { display: flex; flex-direction: column; margin-bottom: 14px; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.shake { animation: shake .4s; }

/* ---------- toast ---------- */
#toast { position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .25s, transform .4s var(--ease); }
#toast.show { opacity: 1; transform: none; }
.toast-in { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 13px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 15px; box-shadow: var(--shadow-pop); }
.toast-in .ico { width: 20px; height: 20px; stroke-width: 2.6; color: #8FE3B6; }
.check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .45s var(--ease) .1s forwards; }
body:has(.portal-main) #toast, body:has(.auth) #toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* While a sheet is open the toast moves to the top so it never covers the sheet's buttons. */
html.sheet-open #toast { bottom: auto; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateY(-16px) scale(.96); }
html.sheet-open #toast.show { transform: none; }

/* ---------- client & crew portal, wizard ---------- */
.portal-hero { padding-bottom: 24px; }
.c-owner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 700 19px/1 var(--font-body); flex: none; }
.c-owner b { display: block; font-size: 16px; }
.c-owner span { font-size: 14px; color: var(--hero-ink2); }
.progress-line { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--hero-ink2); }
.progress { display: flex; gap: 5px; flex: 1; }
.progress i { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--hero-ink) 14%, transparent); transition: background-color .4s; }
.progress i.on { background: var(--primary); }
.portal-cols { display: block; }
.preview-strip { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 16px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 14px; }
.preview-strip span { flex: 1; }
.preview-strip .btn.soft { background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }
.is-preview .btn, .is-preview .qa { pointer-events: none; }
.wizard { max-width: 560px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 32px; }
.wiz-top { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 10px; }
.c-title { font: 600 30px/1.2 var(--font-display); margin: 6px 0 14px; text-wrap: balance; }
.wizard .progress { margin-bottom: 22px; }
.wizard .progress i { background: var(--line); }
.wizard .progress i.on { background: var(--primary); }
.c-nav { display: flex; gap: 10px; margin-top: 18px; }
.c-nav .btn { flex: 1; min-height: 54px; font-size: 16.5px; }
.done-big { text-align: center; padding: 48px 0 10px; }
.okmark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--s-confirmed-bg); color: var(--s-confirmed-ink); }
.okmark.big { width: 80px; height: 80px; margin-bottom: 16px; animation: pop-in .5s var(--ease); }
.okmark.big .ico { width: 40px; height: 40px; stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s var(--ease) .25s forwards; }
.shared-cal .ptop .btn { flex: none; }

/* ---------- sign in ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(120% 60% at 50% 0%, var(--band), var(--bg) 70%); }
.auth-card { width: min(420px, 100%); }
.auth-card.center { text-align: center; display: grid; justify-items: center; gap: 12px; }
.auth-card.center > .ico { width: 44px; height: 44px; color: var(--ink2); }
.auth-brand { display: flex; align-items: center; gap: 12px; font: 600 24px/1 var(--font-display); margin-bottom: 26px; }
.auth .ptitle { margin-bottom: 20px; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--primary); color: var(--on-primary); font: 700 21px/1 var(--font-display); flex: none; }
.brand-mark.big { width: 52px; height: 52px; border-radius: 16px; font-size: 28px; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .main { padding-bottom: 56px; margin-inline-start: var(--rail-w); }
  .portal-main { margin-inline-start: 0; }
  .nav { display: none; }
  #toast { bottom: 28px; }
  /* Content is centered in a 1096px column. */
  .view { --gutter: max(12px, calc((100% - 1096px) / 2)); }
  .view > * { margin-inline: var(--gutter); }
  /* Desktop: the hero is a framed card with margins and rounded corners, as in the approved demo (phones stay edge to edge). */
  .view > .hero { margin: 24px calc(var(--gutter) + 16px) 0; border-radius: var(--r-hero); padding: 28px 32px; }
  .view > .pending, .view > .stat-row { margin-inline: calc(var(--gutter) + 16px); }
  .view > .preview-strip { margin-inline: 0; }
  .rail { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30; display: flex; flex-direction: column; gap: 4px; width: var(--rail-w); padding: 22px 14px; background: var(--bg); border-inline-end: 1px solid var(--line); view-transition-name: rail; overflow-y: auto; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; font: 600 22px/1 var(--font-display); }
  .rail-new { margin-bottom: 16px; }
  .rail-i { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--r-btn); border: 0; background: transparent; color: var(--ink2); font-weight: 500; text-align: start; transition: background-color .25s, color .25s; }
  .rail-i:hover { background: color-mix(in srgb, var(--band) 60%, transparent); color: var(--ink); }
  .rail-i[aria-current="page"] { background: var(--band); color: var(--ink); font-weight: 600; }
  .rail-i .badge { position: static; margin-inline-start: auto; box-shadow: none; }
  .rail-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .rail-foot b { display: block; }
  .rail-foot span:not(.avatar) { color: var(--ink2); font-size: 13px; }
  .rail-foot .avatar { width: 38px; height: 38px; font-size: 16px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .hero-grid .leave { margin-top: 0; flex-direction: column; align-items: flex-end; }
  .hero-title { font-size: 32px; }
  .hero-actions .btn { flex: 0 0 auto; padding-inline: 20px; }
  .home-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
  .ptop, .cal-head { padding-top: 30px; }
  .sec-h, .row, .ptop, .cal-head, .cal-tools, .money-box, .big-sum, .alerts, .pad, .ev-head, .empty-line, .legend, .stage-picker { padding-inline: 16px; }
  .row + .row::before { inset-inline-start: 66px; }
  .cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding-inline: 16px; }
  .cal-grid-wrap .legend { padding-inline: 0; }
  .grid { padding: 0; gap: 0; border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
  .wd { border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
  .cell { min-height: 108px; align-items: stretch; padding: 6px 8px; border-radius: 0; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cell:active { transform: none; }
  .cell .top { flex-direction: row; justify-content: space-between; }
  .cell .gd { width: 28px; height: 28px; font-size: 15px; }
  .cell .dots { display: none; }
  .cell .names { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; min-width: 0; }
  /* Month cell on a computer: the name gets the full width (two whole lines at most), the time sits under it. */
  .nm { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; align-items: start; font-size: 12.5px; line-height: 1.3; text-align: start; min-width: 0; }
  .nm .d { grid-row: 1 / span 2; margin-top: 5px; }
  .nm .nm-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
  .nm em { grid-column: 2; font-size: 11px; line-height: 1.2; }
  .nm .d { width: 6px; height: 6px; }
  .nm em { font-style: normal; color: var(--ink2); }
  .nm.more { color: var(--ink2); font-weight: 600; }
  .cell:hover { background: color-mix(in srgb, var(--band) 50%, transparent); }
  .cell.sel { background: var(--band); }
  .day-panel { margin-top: 0; }
  .day-panel .sec-h { padding-inline: 4px; }
  .day-panel .row { padding-inline: 4px; }
  .day-panel .pad { padding-inline: 4px; }
  .ev-bar { padding: 22px 8px 0; }
  .ev-title { font-size: 34px; }
  .quick { grid-template-columns: repeat(4, 104px); justify-content: start; padding-inline: 8px; }
  .pending { margin-inline: 16px; }
  .ev-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .ev-side { position: sticky; top: 16px; }
  .stat-row { margin-inline: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .portal-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  .portal { max-width: 1040px; margin: 0 auto; }
  .portal .quick { padding-inline: 12px; }
  #sheet-root .sheet { inset: auto; top: 50%; left: 50%; width: min(540px, calc(100vw - 48px)); max-height: 86dvh; border-radius: 24px; transform: translate(-50%, -50%); box-shadow: 0 30px 80px rgba(43,24,56,.28); }
  .sheet .grab { display: none; }
  .sheet-h { cursor: default; padding-top: 14px; }
  .search { padding-inline: 16px; max-width: 520px; }
  .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 0 16px; align-items: stretch; }
  .wday { position: relative; min-height: 340px; }
  .wday-h { flex-wrap: wrap; gap: 4px 8px; padding: 10px 44px 8px 10px; padding-inline: 10px 44px; }
  .wday.empty .wday-h { padding-block: 10px 8px; }
  .wd-num { min-width: 0; font-size: 22px; }
  .wday.empty .wd-num { font-size: 22px; }
  .wd-txt { flex: 1 1 60px; }
  .wd-name { font-size: 13.5px; }
  .wday-h .hd, .wday.empty .wday-h .hd { display: block; font-size: 11.5px; }
  .wd-add { position: absolute; top: 10px; inset-inline-end: 8px; width: 28px; height: 28px; }
  .wd-today { order: 9; }
  .wcard { grid-template-columns: 4px minmax(0, 1fr); grid-template-areas: "bar time" "bar main"; gap: 4px 10px; padding: 10px; }
  .wc-time { grid-area: time; flex-direction: row; gap: 3px; padding: 0; direction: ltr; justify-content: flex-end; }
  .wc-time b { font-size: 13.5px; }
  .wc-time span { font-size: 13.5px; }
  .wc-time b + span::before { content: '–'; }
  .wc-bar { grid-area: bar; }
  .wc-main { grid-area: main; }
  .wc-title { font-size: 14px; }
  #sheet-root .sheet.wide { width: min(920px, calc(100vw - 48px)); }
  /* Desktop new-event form: two columns (client + event | place + price), so it fits without scrolling. */
  .compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
  .compact .fgroup + .fgroup { border-top: 0; padding-top: 2px; margin-top: 0; }
  .compact .fgroup:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
  .compact.many .fgroup:nth-child(2) { border-top: 0; padding-top: 2px; margin-top: 0; }
  .compact.single { display: block; }
  /* New event: client and place on one side, the event on the other; price and extras across the full width. */
  .compact.ne { grid-template-areas: "client event" "place event" "money money" "more more"; }
  .compact.ne .fg-client { grid-area: client; } .compact.ne .fg-event { grid-area: event; } .compact.ne .fg-place { grid-area: place; }
  .compact.ne .fg-money { grid-area: money; } .compact.ne .more-fields { grid-area: more; }
  .compact.ne .fgroup { border-top: 0; padding-top: 2px; margin-top: 0; }
  .compact.ne .fg-place, .compact.ne .fg-money, .compact.ne .more-fields { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
  .compact.ne .fg-money { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "h h" "prices total" "extras extras"; column-gap: 32px; align-items: end; }
  .compact.ne .fg-money > .fg-h { grid-area: h; } .compact.ne .fg-money > .grid2 { grid-area: prices; }
  .compact.ne .fg-money > [data-field="extras"] { grid-area: extras; } .compact.ne .fg-money > .ne-total { grid-area: total; margin-bottom: 12px; }
  .compact .extra-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
  .compact .extra-list .extra { margin: 0; min-height: 52px; }
  .grid3 { grid-template-columns: 1.4fr 1fr 1fr; }
  .grid3 > :first-child { grid-column: auto; }
  .grid2.wide-only { grid-template-columns: 1fr 1fr; }
}

/* ---------- motion ---------- */
.entering [data-stagger] > * { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms + 60ms); }
.entering .hero, .entering .big-sum, .entering .ev-head { animation: rise .45s var(--ease) both; }
.entering .quick .qa { animation: rise .45s var(--ease) both; }
.entering .quick .qa:nth-child(2) { animation-delay: 40ms; } .entering .quick .qa:nth-child(3) { animation-delay: 80ms; } .entering .quick .qa:nth-child(4) { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { 50% { transform: scale(1.08); } }
@keyframes shake { 20%, 60% { transform: translateX(6px); } 40%, 80% { transform: translateX(-6px); } }
/* Page transitions, as in WhatsApp (RTL): entering a page pushes it in from the left while the current one moves
   aside to the right; going back is the exact reverse. One whole-screen picture each, so nothing moves diagonally,
   nothing fades, and the new page never shows up half-built. The bottom bar / side rail stay still. */
:root { --push: .3s cubic-bezier(.2, .8, .2, 1); }
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="forward"]::view-transition-new(root) { animation: var(--push) both vt-push-in-fwd; }
html[data-vt="forward"]::view-transition-old(root) { animation: var(--push) both vt-push-out-fwd; }
html[data-vt="back"]::view-transition-old(root) { z-index: 1; animation: var(--push) both vt-push-out-back; }
html[data-vt="back"]::view-transition-new(root) { animation: var(--push) both vt-push-in-back; }
html[data-vt="tab"]::view-transition-old(root) { animation: .12s ease-out both vt-fade-out; }
html[data-vt="tab"]::view-transition-new(root) { animation: .2s ease-out both vt-fade-in; }
@keyframes vt-push-in-fwd { from { transform: translateX(-100%); } }
@keyframes vt-push-out-fwd { to { transform: translateX(28%); filter: brightness(.92); } }
@keyframes vt-push-out-back { to { transform: translateX(-100%); } }
@keyframes vt-push-in-back { from { transform: translateX(28%); filter: brightness(.92); } }
/* On a computer the content area just changes quickly in place (the rail stays). */
@media (min-width: 900px) {
  html[data-vt="forward"]::view-transition-new(root), html[data-vt="back"]::view-transition-new(root) { z-index: auto; animation: .2s ease-out both vt-fade-in; }
  html[data-vt="forward"]::view-transition-old(root), html[data-vt="back"]::view-transition-old(root) { z-index: auto; animation: .12s ease-out both vt-fade-out; }
}
/* RTL: going forward moves content toward the start of the line (leftward). */
@keyframes vt-in-fwd { from { opacity: 0; transform: translateX(-48px); } }
@keyframes vt-out-fwd { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(48px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
html[data-vt="theme"]::view-transition-old(root), html[data-vt="theme"]::view-transition-old(main), html[data-vt="theme"]::view-transition-old(nav), html[data-vt="theme"]::view-transition-old(rail) { animation: .45s ease both vt-fade-out; }
html[data-vt="theme"]::view-transition-new(root), html[data-vt="theme"]::view-transition-new(main), html[data-vt="theme"]::view-transition-new(nav), html[data-vt="theme"]::view-transition-new(rail) { animation: .45s ease both vt-fade-in; }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}