:root {
  color-scheme: light;
  --background: #f2f2f7; --surface: #fff; --ink: #151519; --secondary: #62626d;
  --line: #dedee5; --danger: #b42332; --accent: var(--light-accent); --soft: var(--light-soft); --on-accent: #fff;
  --light-accent: #3b5470; --light-soft: #e8f0f7; --dark-accent: #b0c7e3; --dark-soft: #293b4f;
  --glass: color-mix(in srgb, var(--surface) 74%, transparent); --glass-line: color-mix(in srgb, var(--line) 70%, transparent);
  --glass-edge: #ffffffc0; --glass-shade: #0000001a; --glass-light: 34%;
  /* Springs sampled from SwiftUI-style response/damping; app.mjs reads the same tokens for scripted motion. */
  --spring-bouncy: cubic-bezier(.34, 1.45, .64, 1); --spring-snappy: cubic-bezier(.2, .9, .3, 1.02); --spring-smooth: cubic-bezier(.22, 1, .36, 1);
  font: 106.25%/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  -webkit-text-size-adjust: 100%;
}
html[data-theme="luciaBlue"] { --light-accent: #3b5470; --light-soft: #e8f0f7; --dark-accent: #b0c7e3; --dark-soft: #293b4f; }
html[data-theme="moonlight"] { --light-accent: #5e478f; --light-soft: #f0e8fa; --dark-accent: #ccbbfa; --dark-soft: #3d2e57; }
html[data-theme="rose"] { --light-accent: #943d5c; --light-soft: #fce8f0; --dark-accent: #faadc2; --dark-soft: #522938; }
html[data-theme="mint"] { --light-accent: #266652; --light-soft: #e6f7f0; --dark-accent: #8cdbba; --dark-soft: #1f4238; }
html[data-theme="midnight"] { --light-accent: #333d73; --light-soft: #e8ebf7; --dark-accent: #abbaf7; --dark-soft: #212945; }
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-bouncy: linear(0, 0.033, 0.118, 0.234, 0.365, 0.498, 0.625, 0.739, 0.837, 0.916, 0.978, 1.024, 1.055, 1.074, 1.082, 1.083, 1.079, 1.07, 1.06, 1.049, 1.038, 1.028, 1.019, 1.011, 1.005, 1, 0.997, 0.995, 0.994, 0.993, 0.993, 0.994, 0.994, 0.995, 0.996, 0.997, 1);
    --spring-snappy: linear(0, 0.041, 0.137, 0.26, 0.389, 0.513, 0.623, 0.718, 0.796, 0.858, 0.906, 0.942, 0.968, 0.986, 0.998, 1.005, 1.009, 1.011, 1.011, 1.01, 1.009, 1.008, 1.006, 1.005, 1.004, 1.003, 1);
    --spring-smooth: linear(0, 0.068, 0.208, 0.362, 0.504, 0.624, 0.72, 0.795, 0.851, 0.893, 0.924, 0.946, 0.962, 0.973, 0.981, 0.987, 0.991, 0.994, 0.996, 0.997, 1);
  }
}
html { background: var(--background); color: var(--ink); }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; border: 0; color: inherit; background: transparent; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
button, input, select, a { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--accent); }
button:active:not(:disabled) { opacity: .7; }
button .icon { pointer-events: none; }
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.8rem; line-height: 1.25; letter-spacing: -.035em; }
h2 { font-size: 1.18rem; line-height: 1.4; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
.app-shell { max-width: 580px; min-height: 100svh; margin: auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.topbar { min-height: 62px; padding: calc(9px + env(safe-area-inset-top)) 20px 9px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px; }
.topbar h1 { font-size: 1.06rem; text-align: center; letter-spacing: -.02em; }
.topbar .icon-button { color: var(--accent); }
.topbar .add-top { background: var(--accent); color: var(--on-accent); border-radius: 50%; }
.content { padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.content.has-add { padding-bottom: 86px; }
.large-title { padding: 0 4px 4px; font-size: 1.9rem; }
.card { background: var(--surface); border-radius: 23px; padding: 20px; text-align: left; width: 100%; container-type: inline-size; }
.soft { background: var(--soft); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.small { gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.secondary { color: var(--secondary); }
.accent { color: var(--accent); }
.caption, .hint { font-size: .78rem; line-height: 1.5; color: var(--secondary); }
.hint { margin-top: 10px; }
.money { font: 650 min(2.2rem, 12cqi)/1.15 -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.045em; overflow-wrap: anywhere; }
.money.small { font-size: 1.08rem; letter-spacing: -.015em; white-space: nowrap; }
.money.medium { font-size: 1.5rem; }
.icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.icon-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.primary, .outline, .text-button, .danger-button { min-height: 48px; border-radius: 16px; padding: 11px 16px; font-weight: 600; display: flex; gap: 8px; justify-content: center; align-items: center; }
.primary { background: var(--accent); color: var(--on-accent); width: 100%; }
.outline { border: 1px solid var(--line); color: var(--accent); width: 100%; }
.text-button { color: var(--accent); }
.danger-button { color: var(--danger); background: var(--surface); width: 100%; }
.month-picker { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; color: var(--accent); }
.month-picker .month-title { min-height: 44px; font-size: .93rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabbar { position: fixed; z-index: 5; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 32px), 548px); padding: 5px; border: 1px solid var(--glass-line); border-radius: 34px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: 0 10px 30px -8px #0000002e, inset 0 1px 0 var(--glass-edge); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* Labels grow with text size but, like iOS tab bars, scale to fit their tab instead of breaking a word. */
.tabbar button { position: relative; z-index: 1; min-width: 0; min-height: 60px; padding: 7px 2px; border-radius: 27px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-weight: 600; container-type: inline-size; }
.tabbar button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: min(clamp(12px, .72rem, 15px), 19cqi); }
.tabbar .icon { width: 24px; height: 24px; }
.tabbar [aria-current="page"], .tabbar button.is-under { color: var(--accent); }
/* The selected tab paints below its neighbours so its glass lens slides under their icons. */
.tabbar [aria-current="page"] { z-index: 0; }
/* A selection pill sits behind the selected control's label; app.mjs glides it between renders. */
.pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--soft); }
.tabbar .pill { background: linear-gradient(to bottom, color-mix(in srgb, #fff var(--glass-light), var(--soft)), var(--soft) 62%); box-shadow: inset 0 1px 1px var(--glass-edge), inset 0 -1px 2px var(--glass-shade), 0 2px 8px var(--glass-shade); }
.tabbar .pill.is-lifted { scale: 1.1 1.14; background: color-mix(in srgb, var(--soft) 58%, transparent); box-shadow: inset 0 1px 1px var(--glass-edge), inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 10px 24px var(--glass-shade); }
.add-bar { position: fixed; z-index: 4; bottom: calc(91px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(100%, 580px); padding: 10px 20px; background: var(--background); }
.add-bar .primary { min-height: 54px; }
.daily-overview { display: flex; flex-direction: column; gap: 16px; }
.daily-main { display: flex; align-items: flex-start; gap: 16px; }
.daily-label { font-size: .88rem; font-weight: 600; }
.daily-overview .money { font-size: min(2.35rem, 12cqi); }
.daily-state { font-size: 1.25rem; font-weight: 650; text-wrap: balance; }
.daily-context { font-size: .8rem; }
.daily-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--secondary); font-size: .72rem; }
.daily-link { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; }
.daily-link .icon { width: 15px; height: 15px; }
.ledger-overview { background: var(--surface); border-radius: 18px; padding: 4px 16px 0; }
.ledger-overview .month-picker { margin-inline: -6px; }
.month-total, .day-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.month-total { padding: 8px 0 12px; }
.month-total .money { font-size: 1rem; }
/* Large text moves the amount to its own line instead of splitting its digits. */
.month-total .money, .day-heading .money { margin-left: auto; text-align: right; }
.budget-line { width: 100%; min-height: 48px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .78rem; text-align: left; color: var(--accent); }
.budget-line > .icon { width: 18px; height: 18px; flex-shrink: 0; }
.budget-summary { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 0 12px; text-align: left; container-type: inline-size; }
.budget-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .86rem; }
.budget-summary-head > .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.budget-summary > .money { font-size: min(1.6rem, 10cqi); }
.budget-summary .progress { margin-block: 4px 2px; }
.budget-summary .figure { padding: 1px 0; font-size: .82rem; }
.reminder-line { min-height: 44px; color: var(--accent); font-size: .82rem; text-align: left; }
.day-heading { padding: 0 2px 8px; }
.day-heading h2 { margin: 0; font-size: .94rem; }
.day-heading .money { font-size: .94rem; }
.day-group .expense-row:last-child { border-bottom: 0; }
.expense-row, .icon-button, .budget-line, .budget-summary, .daily-overview { scroll-margin-block: 16px 188px; }
.mascot { --size: 64px; width: var(--size); height: calc(var(--size) * 208 / 192); flex-shrink: 0; background-image: url('./assets/lucia-idle.webp'); background-size: calc(var(--size) * 6) auto; animation: idle 1.5s steps(6, end) infinite; }
@keyframes idle { to { background-position-x: calc(var(--size) * -6); } }
.expense-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line); }
.category-icon { width: 42px; height: 42px; border-radius: 13px; color: var(--accent); background: var(--soft); display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.expense-title { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.expense-row .money { font-size: .86rem; }
.day-group h2 { margin-bottom: 6px; }
.empty { padding: 36px 16px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.empty > .icon { width: 38px; height: 38px; color: var(--accent); }
.empty .primary { width: auto; }
.progress { width: 100%; height: 5px; border-radius: 8px; overflow: hidden; background: var(--line); }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.category-total { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: .85rem; color: var(--secondary); }
input:not([type="checkbox"]), select { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-height: 48px; width: 100%; min-width: 0; padding: 11px 12px; }
input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }
input[type="date"] { -webkit-appearance: none; }
.amount-field { font-size: 2rem; border: 0 !important; background: transparent !important; padding: 0 !important; }
.currency { color: var(--secondary); font-size: 1.5rem; }
.check-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); flex-shrink: 0; }
.list-card { background: var(--surface); border-radius: 16px; padding: 0 16px; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 0; text-align: left; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row [data-check] { margin-left: auto; color: var(--accent); }
.settings-select { position: relative; cursor: pointer; }
.settings-select .selection-value { max-width: 55%; color: var(--secondary); text-align: right; overflow-wrap: anywhere; }
.settings-select > .icon { width: 18px; height: 18px; color: var(--secondary); }
select.settings-select-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 54px; opacity: 0; padding: 0; border: 0; cursor: pointer; }
.settings-select:has(select:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.settings-select:has(select:disabled) { opacity: .5; cursor: default; }
.money.inline { font: inherit; letter-spacing: inherit; }
.currency-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; line-height: 1.5; color: var(--secondary); padding: 8px 12px; background: var(--soft); border-radius: 12px; overflow-wrap: anywhere; }
.currency-status:empty { display: none; }
.currency-status .text-button { min-height: 44px; flex-shrink: 0; padding: 4px 8px; font-size: inherit; }
.currency-details { color: var(--secondary); font-size: .74rem; }
.currency-details > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; justify-content: space-between; cursor: pointer; list-style: none; }
.currency-details > summary::-webkit-details-marker { display: none; }
.currency-details > summary .icon { width: 16px; height: 16px; flex-shrink: 0; }
.currency-details[open] > summary .icon { transform: rotate(180deg); }
.currency-details .currency-status { margin-top: 4px; }
.disclosure-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.disclosure-card > summary::-webkit-details-marker { display: none; }
.disclosure-card > summary .icon { width: 18px; height: 18px; flex-shrink: 0; }
.disclosure-card[open] > summary .icon { transform: rotate(180deg); }
.disclosure-card > .stack { margin-top: 12px; }
.currency-explanation { font-size: .8rem; }
.swatch { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.calendar-card { padding: 12px; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px 0; }
.weekday { text-align: center; font-size: .72rem; color: var(--secondary); overflow: hidden; }
.calendar-day { min-height: 46px; min-width: 0; border-radius: 10px; font-size: .88rem; padding: 3px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.calendar { position: relative; isolation: isolate; }
.calendar-day { position: relative; }
.calendar-day[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.day-marks { height: 12px; display: flex; gap: 3px; align-items: center; color: var(--accent); }
.day-marks .icon { width: 10px; height: 10px; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }
.calendar-legend .icon { width: 12px; height: 12px; color: var(--accent); }
.day-marks .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.figure { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: .88rem; padding: 5px 0; }
.figure > :last-child { text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.agenda-row { display: flex; align-items: flex-start; width: 100%; min-height: 60px; text-align: left; gap: 12px; padding: 12px 0; }
.agenda-row + .agenda-row { border-top: 1px solid var(--line); }
.agenda-row .icon { color: var(--accent); margin-top: 3px; }
.error { color: var(--danger); font-size: .84rem; }
.error:empty { display: none; }
.loading, .blocked { max-width: 500px; margin: 15svh auto 0; padding: 24px; text-align: center; }
.blocked { display: flex; flex-direction: column; gap: 20px; }
dialog { margin: auto auto 0; border: 0; padding: 0; color: var(--ink); background: var(--background); width: min(100%, 580px); max-width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
dialog::backdrop { background: #0005; backdrop-filter: blur(3px); }
.sheet-header { padding: 12px 16px; display: grid; grid-template-columns: minmax(66px, auto) 1fr minmax(66px, auto); align-items: center; gap: 8px; background: var(--background); position: sticky; top: 0; z-index: 2; }
.sheet-header h2 { text-align: center; font-size: 1rem; overflow-wrap: anywhere; }
.sheet-header button { min-height: 44px; color: var(--accent); font-size: .88rem; text-align: left; }
.sheet-header button:last-child { text-align: right; }
.sheet-header [data-action="save-header"] { font-weight: 650; }
.sheet-body { display: flex; flex-direction: column; gap: 22px; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
.form-section { display: flex; flex-direction: column; gap: 12px; }
.section-label { font-size: .79rem; color: var(--secondary); padding: 0 12px; }
.form-card { background: var(--surface); padding: 16px; border-radius: 16px; display: flex; flex-direction: column; gap: 16px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.category-grid button { min-height: 68px; border-radius: 12px; padding: 8px; background: var(--background); color: var(--secondary); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; }
.category-grid button[aria-pressed="true"] { background: var(--soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.segmented { position: relative; isolation: isolate; display: flex; gap: 4px; background: var(--background); padding: 4px; border-radius: 10px; }
.segmented button { position: relative; flex: 1; min-height: 44px; border-radius: 8px; }
.segmented .pill { background: var(--surface); box-shadow: 0 1px 3px #0002, 0 3px 8px #0000000d; }
.setup { min-height: 100dvh; max-width: 580px; margin: auto; display: flex; flex-direction: column; }
.setup-header { padding: calc(8px + env(safe-area-inset-top)) 20px 8px; display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.setup-header h1 { font-size: 1.05rem; }
.setup-header button { color: var(--accent); min-height: 44px; }
.setup-content { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.setup-heading { font-size: 1.5rem; letter-spacing: -.025em; }
.setup-actions { padding: 12px 24px calc(20px + env(safe-area-inset-bottom)); }
.setup-actions .row { margin-top: 8px; }
.setup-actions .text-button { font-weight: 400; }
#notice { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(70px + env(safe-area-inset-top)); width: max-content; max-width: calc(100% - 32px); border-radius: 14px; background: var(--ink); color: var(--surface); padding: 12px 18px; font-size: .88rem; box-shadow: 0 4px 16px #0003; pointer-events: none; }
#notice:empty { display: none; }
@media (max-height: 760px) and (max-width: 1099px) {
  .topbar { min-height: 52px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .content { gap: 14px; padding-top: 4px; }
  .daily-overview { padding: 16px; gap: 12px; }
  .expense-row, .icon-button, .budget-line, .budget-summary, .daily-overview { scroll-margin-block: 16px 96px; }
}
@media (max-height: 500px) and (max-width: 1099px) {
  .app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { bottom: calc(6px + env(safe-area-inset-bottom)); padding: 4px; }
  .tabbar button { flex-direction: row; min-height: 44px; padding: 3px 6px; gap: 6px; }
  .tabbar button span { font-size: min(clamp(12px, .72rem, 15px), 13cqi); }
  .tabbar .icon { width: 20px; height: 20px; }
  .expense-row, .icon-button, .budget-line, .budget-summary, .daily-overview { scroll-margin-block: 12px 72px; }
}
@media (min-width: 1100px) {
  .tabbar { left: calc(50% - 290px - 236px); top: 24px; bottom: auto; transform: none; width: 212px; grid-template-columns: 1fr; gap: 4px; padding: 8px; border-radius: 22px; }
  .tabbar button { flex-direction: row; justify-content: flex-start; min-height: 48px; padding: 8px 14px; gap: 12px; border-radius: 15px; }
  .tabbar button span { font-size: .88rem; }
  .app-shell { padding-bottom: 24px; }
  .add-bar { bottom: 0; }
  .content.has-add { padding-bottom: 96px; }
  .expense-row, .icon-button, .budget-line, .budget-summary, .daily-overview { scroll-margin-block: 16px 96px; }
}
@media (min-width: 700px) { .app-shell, .setup { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } dialog { margin: auto; border-radius: 24px; max-height: 85dvh; } }
@media (max-width: 350px) { .content { padding-left: 14px; padding-right: 14px; } .tabbar { width: calc(100% - 16px); } }
html[data-appearance="dark"] { color-scheme: dark; --background: #000; --surface: #1c1c1e; --ink: #f5f5f7; --secondary: #acacb6; --line: #38383e; --danger: #ff8b98; --accent: var(--dark-accent); --soft: var(--dark-soft); --on-accent: #141a24; --glass-edge: #ffffff26; --glass-shade: #00000059; --glass-light: 9%; }
@media (prefers-color-scheme: dark) { html:not([data-appearance="light"]) { color-scheme: dark; --background: #000; --surface: #1c1c1e; --ink: #f5f5f7; --secondary: #acacb6; --line: #38383e; --danger: #ff8b98; --accent: var(--dark-accent); --soft: var(--dark-soft); --on-accent: #141a24; --glass-edge: #ffffff26; --glass-shade: #00000059; --glass-light: 9%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .tabbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Motion: every transition and animation lives here, so Reduce Motion keeps the static layout unchanged. */
@media (prefers-reduced-motion: no-preference) {
  /* Buttons dim while pressed and bounce after the click (app.mjs). Shrinking a pressed button
     would move its edge out from under a mouse, so the release would miss it. */
  button { transition: opacity .2s ease, color .25s ease, background-color .25s ease; }
  button:active:not(:disabled) { transition-duration: .08s; }
  .tabbar button:active:not(:disabled) { opacity: 1; }
  .tabbar .icon { transition: scale .78s var(--spring-bouncy); }
  .tabbar button:active .icon { scale: .84; transition-duration: .12s; }
  .tabbar .pill { transition: scale .78s var(--spring-bouncy), background-color .3s ease, box-shadow .3s ease; }
  .tabbar [aria-current="page"]:active .pill:not(.is-lifted) { scale: 1.05 1.08; transition-duration: .16s; }
  /* Explicit fixed stacking keeps a leaving sheet above the page where `overlay` is unsupported. */
  dialog { position: fixed; inset: 0; z-index: 20; overflow: auto; transition: translate .54s var(--spring-snappy), scale .54s var(--spring-snappy), opacity .3s ease; }
  dialog { transition: translate .54s var(--spring-snappy), scale .54s var(--spring-snappy), opacity .3s ease, overlay .54s allow-discrete, display .54s allow-discrete; }
  dialog:not([open]) { translate: 0 100%; pointer-events: none; transition-duration: .32s; transition-timing-function: cubic-bezier(.32, 0, .67, 0); }
  @starting-style { dialog[open] { translate: 0 100%; } }
  dialog::backdrop { background: #0000; backdrop-filter: blur(0); transition: background-color .32s ease, backdrop-filter .32s ease; }
  dialog::backdrop { transition: background-color .32s ease, backdrop-filter .32s ease, overlay .32s allow-discrete, display .32s allow-discrete; }
  dialog[open]::backdrop { background: #0005; backdrop-filter: blur(3px); }
  dialog:not([open])::backdrop { pointer-events: none; }
  @starting-style { dialog[open]::backdrop { background: #0000; backdrop-filter: blur(0); } }
  /* Side slides stay inside their container instead of widening the page or the sheet. */
  .content, .calendar-card, .setup-content, .sheet-body { overflow-x: clip; }
  #notice:not(:empty) { animation: toast-in .78s var(--spring-bouncy); }
  details[data-disclosure] { interpolate-size: allow-keywords; }
  details[data-disclosure] > summary .icon { transition: transform .54s var(--spring-snappy); }
  @supports selector(::details-content) {
    details[data-disclosure]::details-content { block-size: 0; overflow: clip; overflow-clip-margin: 8px; opacity: 0; transition: block-size .54s var(--spring-snappy), opacity .3s ease, content-visibility .54s allow-discrete; }
    details[data-disclosure][open]::details-content { block-size: auto; opacity: 1; }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  dialog:not([open]) { translate: 0 24px; scale: .94; opacity: 0; }
  @starting-style { dialog[open] { translate: 0 24px; scale: .94; opacity: 0; } }
}
@keyframes toast-in { from { opacity: 0; translate: 0 -16px; scale: .86; } }