/* Splitter — a phone-first trip ledger.
   Everything here is designed for a 390px screen first; the desktop layout is the
   enhancement at the bottom of the file, not the other way round. */

:root {
  --ink: #14120f;
  --ink-soft: #3b3730;
  --muted: #7a7367;
  --line: rgba(20, 18, 15, .1);
  --line-strong: rgba(20, 18, 15, .2);
  --paper: #efe9dd;
  --card: #fffcf5;
  --mint: #7adfc0;
  --mint-soft: #e2f6ee;
  --peach: #f4b39e;
  --peach-soft: #fff0ea;
  --lilac: #b8a0e2;
  --lilac-soft: #f1ecfb;
  --yellow-soft: #fff3ce;
  --positive: #2c7a62;
  --negative: #b1503c;
  --danger: #a94433;
  --display: "Bricolage Grotesque", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-sm: 0 2px 8px rgba(20, 18, 15, .05);
  --shadow-md: 0 10px 28px rgba(20, 18, 15, .09);
  --shadow-lg: 0 24px 60px rgba(20, 18, 15, .16);
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --gutter: 16px;
  --bar-height: 60px;
  --tabbar-height: calc(66px + env(safe-area-inset-bottom));
  --safe-top: env(safe-area-inset-top);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-width: 320px;
  height: 100%;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* App manners: no horizontal drag, no rubber-band, no accidental text selection. */
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body.modal-open { position: fixed; top: var(--locked-scroll, 0); left: 0; right: 0; width: 100%; overflow: hidden; }

input, textarea, [contenteditable], .selectable, .detail-note, .receipt-warning, #receipt-prompt {
  -webkit-user-select: text;
  user-select: text;
}

button, input, select, textarea { font: inherit; font-family: inherit; color: inherit; }
button { touch-action: manipulation; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }

:focus-visible { outline: 2.5px solid #2f6f60; outline-offset: 2px; }
.tone-dark :focus-visible, .sidebar :focus-visible, .trip-hero :focus-visible { outline-color: var(--mint); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { position: relative; flex: none; width: 26px; height: 26px; }
.brand-mark span { position: absolute; width: 16px; height: 16px; border: 2.4px solid var(--mint); border-radius: 50%; }
.brand-mark span:first-child { top: 1px; left: 0; }
.brand-mark span:last-child { right: 0; bottom: 1px; border-color: var(--peach); }
.brand-word { display: grid; line-height: 1.1; }
.brand-word small { color: var(--muted); font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.welcome-brand .brand-word small { color: rgba(255, 252, 245, .72); font-weight: 600; }

.eyebrow { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Buttons, chips, fields ---------- */

.button {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.button:active { transform: scale(.975); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-lg { min-height: 54px; font-size: 16px; border-radius: 15px; }
.button-full { width: 100%; }
.button-primary { color: var(--card); background: var(--ink); }
.button-dark { color: var(--ink); background: var(--mint); }
.button-soft { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
.button-quiet { color: var(--muted); background: transparent; }
.button-danger { color: #fff; background: var(--danger); }
.button-hero { min-height: 48px; flex: 1; color: var(--ink); background: var(--mint); border-radius: 14px; }
.button-hero.ghost { color: var(--card); background: rgba(255, 252, 245, .12); border-color: rgba(255, 252, 245, .22); }

.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: rgba(20, 18, 15, .06); cursor: pointer; }
.icon-button:active { background: rgba(20, 18, 15, .12); }
.text-button { min-height: 36px; padding: 0 4px; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-row.scroll-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.chip-row.scroll-row::-webkit-scrollbar { display: none; }
.chip {
  min-height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
.chip:active { transform: scale(.96); }
.chip.active { color: var(--card); border-color: var(--ink); background: var(--ink); font-weight: 700; }
.chip.active .category-icon { color: var(--card); background: rgba(255, 252, 245, .18); }
.chip.person-chip { padding-left: 6px; }
.chip.person-chip .avatar { width: 28px; height: 28px; font-size: 10px; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.field > span i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px; /* keeps iOS from zooming on focus */
  appearance: none;
}
.field textarea { min-height: 88px; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: #a9a294; }
.form-grid { display: grid; gap: 14px; }
.form-help, .settings-readonly { color: var(--muted); font-size: 13px; line-height: 1.5; }
.form-error { margin: 0 0 10px; padding: 10px 12px; border-radius: 11px; color: var(--danger); background: #fdece7; font-size: 13px; font-weight: 600; }
.form-accounting-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.form-accounting-note svg { flex: none; }

.password-field { position: relative; display: flex; align-items: center; }
.password-field input { padding-right: 68px; }
.password-field button { position: absolute; right: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(20, 18, 15, .07); font-size: 12px; font-weight: 700; cursor: pointer; }

.spinner { width: 15px; height: 15px; display: inline-block; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.avatar { flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--card); background: var(--person-color, var(--ink)); font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.avatar-sm { width: 32px; height: 32px; font-size: 11px; }
.avatar-md { width: 40px; height: 40px; font-size: 13px; }
.avatar-lg { width: 52px; height: 52px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }

.category-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--mint-soft); font-size: 12px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.category-food, .category-groceries { background: var(--peach-soft); }
.category-stay { background: var(--lilac-soft); }
.category-transport { background: var(--mint-soft); }
.category-activity { background: var(--yellow-soft); }
.category-other { background: rgba(20, 18, 15, .07); }

.money-positive { color: var(--positive); }
.money-negative { color: var(--negative); }
.money-secondary { display: block; margin-top: 2px; color: var(--muted); font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0; opacity: .85; }

/* ---------- App shell ---------- */

.app-loading, .app-error { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px; color: var(--card); text-align: center; }
.app-loading { background: var(--ink); }
.app-loading p { color: rgba(255, 252, 245, .6); font-size: 14px; }
.app-error h1 { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.03em; }

.shell { min-height: 100dvh; }
.sidebar { display: none; }
.main { min-height: 100dvh; padding-bottom: calc(var(--tabbar-height) + 14px); background: var(--paper); }

.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--bar-height) + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
  transition: background .2s ease, color .2s ease;
}
.view-overview .app-bar, .view-settings .app-bar { color: var(--card); background: var(--ink); }
.app-bar-trip { min-width: 0; display: grid; gap: 1px; color: inherit; text-decoration: none; }
.app-bar-trip small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-overview .app-bar-trip small, .view-settings .app-bar-trip small { color: rgba(255, 252, 245, .5); }
.app-bar-trip strong { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.avatar-button .avatar { box-shadow: 0 0 0 2px rgba(255, 252, 245, .22); }
.avatar-button:active { transform: scale(.94); }

.view { padding: 4px var(--gutter) 28px; }
.view-overview .view, .view-settings .view { padding-top: 0; padding-inline: 0; }
.view-overview .view > *:not(.trip-hero), .view-settings .view > * { margin-inline: var(--gutter); }

.mobile-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  height: var(--tabbar-height);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-top: 1px solid var(--line);
  background: rgba(255, 252, 245, .93);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.mobile-nav-item { height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: transparent; color: #9a9386; font-size: 10px; font-weight: 600; letter-spacing: .01em; cursor: pointer; }
.mobile-nav-item.active { color: var(--ink); font-weight: 700; }
.mobile-nav-item.active svg { stroke-width: 2.1; }
.mobile-add { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center; border: 0; border-radius: 18px; color: var(--card); background: var(--ink); box-shadow: 0 8px 18px rgba(20, 18, 15, .26); cursor: pointer; }
.mobile-add:active { transform: scale(.93); }

.page-header { margin-bottom: 18px; display: grid; gap: 6px; }
.page-header .eyebrow { margin-bottom: 2px; }
.page-header h1 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.page-header p { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.page-header > .button { display: none; }
/* The app bar already names the view on a phone, so the page title would only repeat it. */
.view-expenses .page-header .eyebrow, .view-expenses .page-header h1,
.view-places .page-header .eyebrow, .view-places .page-header h1,
.view-people .page-header .eyebrow, .view-people .page-header h1,
.view-insights .page-header .eyebrow, .view-insights .page-header h1 { display: none; }
.view-expenses .page-header p, .view-places .page-header p, .view-people .page-header p, .view-insights .page-header p { font-size: 14px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-heading { padding: 16px 16px 10px; display: grid; gap: 10px; }
.panel-heading h2 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.panel-heading .eyebrow { margin-bottom: 3px; }

.empty-state { padding: 30px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.empty-state.compact { padding: 18px; }
.empty-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: var(--muted); background: rgba(20, 18, 15, .05); }
.empty-state h3 { font-family: var(--display); font-size: 17px; font-weight: 800; }
.empty-state p { color: var(--muted); font-size: 13px; max-width: 30ch; }
.empty-state .button { margin-top: 8px; }

/* ---------- Welcome / profile chooser ---------- */

.welcome-shell { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; color: var(--card); background: var(--ink); }
.welcome-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.welcome-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, .08) 0%, rgba(20, 18, 15, .38) 42%, rgba(20, 18, 15, .82) 100%); }
.aurora { position: absolute; border-radius: 50%; filter: blur(46px); opacity: 1; animation: drift 20s ease-in-out infinite; }
.aurora-1 { top: -18%; left: -18%; width: 92vw; height: 92vw; background: radial-gradient(circle, rgba(122, 223, 192, .9) 0%, rgba(122, 223, 192, .42) 42%, rgba(122, 223, 192, 0) 72%); }
.aurora-2 { top: -6%; right: -26%; width: 96vw; height: 96vw; background: radial-gradient(circle, rgba(184, 160, 226, .85) 0%, rgba(184, 160, 226, .36) 44%, rgba(184, 160, 226, 0) 72%); animation-delay: -7s; }
.aurora-3 { top: 16%; left: -8%; width: 86vw; height: 86vw; background: radial-gradient(circle, rgba(244, 179, 158, .7) 0%, rgba(244, 179, 158, .26) 42%, rgba(244, 179, 158, 0) 70%); animation-delay: -13s; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, 5%, 0) scale(1.12); }
}
.welcome-ridge { position: absolute; z-index: 1; inset: auto 0 0; width: 100%; height: 230px; }
.welcome-ridge path { fill: #0c0b09; }
.welcome-ridge .ridge-back { fill: rgba(255, 252, 245, .05); }
.welcome-card { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 20px); }
.welcome-brand { margin-bottom: 26px; color: var(--card); }
.welcome-copy { display: grid; gap: 10px; }
.welcome-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; width: fit-content; border-radius: 999px; background: rgba(255, 252, 245, .12); color: rgba(255, 252, 245, .82); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.welcome-card h1 { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.welcome-card > .welcome-copy p, .profile-choice-heading p { color: rgba(255, 252, 245, .68); font-size: 14px; line-height: 1.5; }
.welcome-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: rgba(255, 252, 245, .6); font-size: 12.5px; font-weight: 600; }
.welcome-facts li { display: flex; align-items: center; gap: 14px; }
.welcome-facts li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-left: -8px; }
.welcome-form { margin-top: 22px; display: grid; gap: 14px; }
.welcome-form .field > span { color: rgba(255, 252, 245, .6); }
.welcome-form input, .admin-login-panel input { min-height: 54px; border-color: rgba(255, 252, 245, .2); background: rgba(255, 252, 245, .08); color: var(--card); }
.welcome-form input::placeholder, .admin-login-panel input::placeholder { color: rgba(255, 252, 245, .38); }
.welcome-form .button-primary, .admin-login-panel .button-primary { color: var(--ink); background: var(--mint); }
.welcome-error { padding: 10px 12px; border-radius: 11px; color: #ffd9d0; background: rgba(169, 68, 51, .3); font-size: 13px; font-weight: 600; }
.welcome-foot { margin-top: auto; padding-top: 22px; color: rgba(255, 252, 245, .4); font-size: 11.5px; text-align: center; }

.profile-choice-heading { display: grid; }
.profile-picker { margin-top: 28px; }
.profile-picker-label { margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.profile-picker-label span { color: rgba(255, 252, 245, .9); font-family: var(--display); font-size: 15px; font-weight: 700; }
.profile-picker-label small { color: rgba(255, 252, 245, .42); font-size: 11px; }
.profile-choices { display: grid; gap: 9px; }
.profile-choices button {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 252, 245, .14);
  border-radius: 18px;
  background: rgba(255, 252, 245, .07);
  color: var(--card);
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease;
}
.profile-choices button:active { transform: scale(.985); background: rgba(255, 252, 245, .14); }
.profile-choices button.loading { opacity: .6; }
.profile-avatar { width: 48px; height: 48px; font-size: 16px; box-shadow: 0 0 0 2px rgba(255, 252, 245, .18); }
.profile-choice-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.profile-choice-name strong { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.profile-choice-name small { color: rgba(255, 252, 245, .5); font-size: 11.5px; }
.profile-shield { flex: none; color: var(--mint); }

.admin-login-panel { margin-top: 28px; display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: rgba(255, 252, 245, .07); border: 1px solid rgba(255, 252, 245, .13); }
.admin-login-head { display: flex; align-items: center; justify-content: space-between; }
.admin-login-head strong { font-family: var(--display); font-size: 19px; font-weight: 800; }
.admin-login-panel .icon-button { color: rgba(255, 252, 245, .7); background: rgba(255, 252, 245, .1); }
.admin-login-panel .field > span { color: rgba(255, 252, 245, .6); }
.admin-login-panel .password-field button { background: rgba(255, 252, 245, .14); color: var(--card); }
.admin-login-panel small { color: rgba(255, 252, 245, .45); font-size: 11.5px; text-align: center; }

/* ---------- Overview ---------- */

.trip-hero { padding: 16px var(--gutter) 20px; color: var(--card); background: var(--ink); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.trip-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-hero-top .eyebrow { color: rgba(255, 252, 245, .55); }
.currency-pill { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 252, 245, .2); border-radius: 999px; background: rgba(255, 252, 245, .09); color: var(--card); font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.trip-net { margin-top: 6px; }
.trip-net strong { display: block; font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.trip-net .money-secondary { color: rgba(255, 252, 245, .55); font-size: 14px; }
.trip-net.negative strong { color: var(--peach); }
.trip-net.positive strong { color: var(--mint); }
.trip-net p { margin-top: 6px; color: rgba(255, 252, 245, .62); font-size: 13px; line-height: 1.4; }
.hero-actions { margin-top: 16px; display: flex; gap: 9px; }
.people-balance-strip { margin-top: 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.people-balance-strip::-webkit-scrollbar { display: none; }
.people-balance-strip button {
  flex: 1 0 94px;
  min-width: 0;
  padding: 11px 10px;
  display: grid;
  gap: 8px;
  justify-items: start;
  border: 1px solid rgba(255, 252, 245, .13);
  border-radius: 15px;
  background: rgba(255, 252, 245, .06);
  color: var(--card);
  text-align: left;
  cursor: pointer;
}
.people-balance-strip button:active { background: rgba(255, 252, 245, .14); }
.person-dot { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--person-color, var(--mint)); color: var(--card); font-family: var(--display); font-size: 11px; font-weight: 800; }
.people-balance-strip span:last-child { width: 100%; min-width: 0; display: grid; gap: 1px; }
.people-balance-strip small { color: rgba(255, 252, 245, .5); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.people-balance-strip strong { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.people-balance-strip .money-positive { color: var(--mint); }
.people-balance-strip .money-negative { color: var(--peach); }

.overview-grid { margin-top: 18px; display: grid; gap: 14px; }
.ledger-total { display: flex; align-items: baseline; gap: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.ledger-total strong { flex: none; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.ledger-total small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }

.expense-list { padding: 4px 8px 8px; display: grid; gap: 2px; }
.expense-row {
  width: 100%;
  min-height: 62px;
  padding: 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.expense-row:active { background: rgba(20, 18, 15, .05); }
.payer-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--person-color, var(--ink)); color: var(--card); font-family: var(--display); font-size: 12px; font-weight: 800; }
.expense-main { min-width: 0; display: grid; gap: 2px; }
.expense-main strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-main small, .expense-amount small { color: var(--muted); font-size: 11.5px; }
.expense-amount { display: grid; gap: 2px; text-align: right; }
.expense-amount strong { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.ledger-more { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }

.right-stack { display: grid; gap: 14px; }
.settle-preview { padding: 18px; display: grid; gap: 8px; justify-items: start; color: var(--card); background: #23201b; border-color: transparent; }
.settle-preview.settled { color: var(--ink); background: var(--mint-soft); }
.smart-label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 252, 245, .12); color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.settle-preview.settled .smart-label { background: rgba(20, 18, 15, .08); color: var(--positive); }
.settle-preview h2 { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.settle-amount { font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.settle-preview .money-secondary { color: rgba(255, 252, 245, .5); }
.settle-preview p { color: rgba(255, 252, 245, .6); font-size: 13px; }
.settle-preview.settled p { color: var(--muted); }
.avatar-route { display: flex; align-items: center; gap: 10px; }
.avatar-route > span:not(.avatar) { flex: 1; min-width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
.avatar-route.large { gap: 14px; }
.settle-preview .button { margin-top: 6px; }

.books-card { padding: 16px; display: flex; align-items: flex-start; gap: 13px; }
.books-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--positive); background: var(--mint-soft); }
.books-card.attention .books-icon { color: var(--danger); background: #fdece7; }
.books-card h3 { font-family: var(--display); font-size: 16px; font-weight: 800; }
.books-card p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* ---------- Expenses view ---------- */

.toolbar { margin-bottom: 14px; display: grid; gap: 10px; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 0 14px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); color: var(--muted); }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink); appearance: none; }
.search-box input:focus { outline: none; }
.filter-pills { display: flex; gap: 7px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.filter-pill.active { color: var(--card); background: var(--ink); border-color: var(--ink); }
.table-title { padding: 14px 16px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.table-title strong { font-family: var(--display); font-size: 16px; font-weight: 800; }
.table-title span { color: var(--muted); font-size: 12px; }

/* ---------- Places & itinerary ---------- */

.places-tabs { margin-bottom: 16px; display: flex; gap: 5px; padding: 4px; border-radius: 15px; background: rgba(20, 18, 15, .06); }
.places-tabs button { flex: 1; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.places-tabs button.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); }
.places-toolbar { margin-bottom: 14px; display: grid; gap: 10px; }
.places-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; color: var(--muted); font-size: 12.5px; }
.places-summary strong { color: var(--ink); font-family: var(--display); font-size: 15px; font-weight: 800; }
.places-grid { display: grid; gap: 10px; }
.place-card { padding: 15px; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.place-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.place-card h3 { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.place-card p { color: var(--muted); font-size: 13px; line-height: 1.45; }
.place-no-note { font-style: italic; opacity: .75; }
.place-category { padding: 4px 9px; border-radius: 999px; background: var(--mint-soft); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.place-category-eat { background: var(--peach-soft); }
.place-category-stay { background: var(--lilac-soft); }
.place-category-do { background: var(--yellow-soft); }
.place-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.place-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; }
.place-card-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.place-card-actions .button { min-height: 40px; padding: 0 12px; font-size: 12.5px; }
.place-edit, .place-remove { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.place-remove { color: var(--danger); }
.place-sections { display: grid; gap: 22px; }
.place-section-heading { margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.place-section-heading > div { min-width: 0; }
.place-section-heading > span { flex: none; min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; background: rgba(20, 18, 15, .07); color: var(--muted); font-size: 12px; font-weight: 700; }
.place-section-heading h2 { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.place-section-heading p { color: var(--muted); font-size: 13px; }
.places-empty { padding: 30px 20px; display: grid; justify-items: center; gap: 9px; text-align: center; }
.places-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: var(--muted); background: rgba(20, 18, 15, .05); }
.places-empty h2 { font-family: var(--display); font-size: 18px; font-weight: 800; }
.places-empty p { color: var(--muted); font-size: 13px; max-width: 32ch; }

.itinerary-layout { display: grid; gap: 14px; }
.itinerary-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
.itinerary-summary span { padding: 11px 9px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.3; }
.itinerary-summary strong { display: block; margin-bottom: 2px; font-family: var(--display); font-size: 19px; font-weight: 800; color: var(--ink); }
.calendar-panel { padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.calendar-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.calendar-heading h2 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.calendar-next, .calendar-heading button { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); cursor: pointer; }
.calendar-mode-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(20, 18, 15, .06); }
.calendar-mode-tabs button { min-width: 0; min-height: 34px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; font-size: 12px; font-weight: 700; color: var(--muted); }
.calendar-mode-tabs button.active { color: var(--ink); background: var(--card); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekdays { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.calendar-day { aspect-ratio: 1; display: grid; place-content: center; gap: 2px; border: 1px solid transparent; border-radius: 11px; background: rgba(20, 18, 15, .04); font-size: 13px; font-weight: 600; cursor: pointer; }
.calendar-day.selected { color: var(--card); background: var(--ink); }
.calendar-day.today { border-color: var(--ink); }
.calendar-day > span { display: block; }
.calendar-day > b { display: none; }
.calendar-day > i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.calendar-day.selected > i { background: var(--mint); }
.calendar-blank { aspect-ratio: 1; }
.agenda-panel { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.agenda-heading { margin-bottom: 12px; display: grid; gap: 11px; }
.agenda-heading p { color: var(--muted); font-size: 12.5px; }
.agenda-heading h2 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.agenda-list { display: grid; gap: 9px; }
.agenda-empty { padding: 26px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.agenda-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--muted); background: rgba(20, 18, 15, .05); }
.agenda-empty h3 { font-family: var(--display); font-size: 17px; font-weight: 800; }
.agenda-empty p { color: var(--muted); font-size: 13px; max-width: 30ch; }
.itinerary-card { padding: 13px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.itinerary-time { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.itinerary-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.itinerary-title h3 { font-family: var(--display); font-size: 16px; font-weight: 800; }
.itinerary-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 12px; }
.itinerary-place { display: inline-flex; align-items: center; gap: 5px; }
.itinerary-content { display: grid; gap: 6px; }
.conflict-notice, .conflict-label { color: var(--danger); font-size: 12px; font-weight: 600; }
.itinerary-copy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.week-panel { padding: 12px 0; overflow: hidden; }
.week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.week-board { min-width: 620px; display: grid; grid-template-columns: 52px repeat(7, minmax(78px, 1fr)); }
.week-day-headings { display: contents; }
.week-hour-labels { display: grid; color: var(--muted); font-size: 10px; }
.week-day-columns { display: contents; }
.week-day-column { position: relative; border-left: 1px solid var(--line); }
.week-event { position: absolute; left: 2px; right: 2px; top: var(--event-top); height: var(--event-height); padding: 4px 6px; border-radius: 8px; background: var(--mint-soft); font-size: 10px; overflow: hidden; }
.week-all-day { padding: 6px 10px; color: var(--muted); font-size: 11px; }
.week-time-area { position: relative; }

/* ---------- Settle ---------- */

.settle-layout { display: grid; gap: 14px; }
.settle-plan { padding-bottom: 8px; }
.settle-intro { padding: 0 16px 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.reconcile-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: var(--mint-soft); color: var(--positive); font-size: 11px; font-weight: 700; white-space: nowrap; }
.transfer-list { padding: 0 12px 12px; display: grid; gap: 9px; }
.transfer-row { padding: 13px; display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.transfer-row.my-transfer { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.transfer-number { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.transfer-people { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.transfer-people strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-line { display: inline-grid; place-items: center; color: var(--muted); }
.transfer-amount { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.transfer-row .button { width: 100%; }
.celebrate { padding: 30px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.celebrate > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--positive); background: var(--mint-soft); }
.celebrate h3 { font-family: var(--display); font-size: 18px; font-weight: 800; }
.celebrate p { color: var(--muted); font-size: 13px; }
.balance-sheet { padding: 16px; }
.balance-sheet h2 { margin: 3px 0 12px; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.balance-list { display: grid; gap: 4px; }
.balance-list button { width: 100%; min-height: 56px; padding: 9px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.balance-list button:active { background: rgba(20, 18, 15, .05); }
.balance-list button > span:not(.avatar) { flex: 1; min-width: 0; display: grid; }
.balance-list strong { font-size: 14px; font-weight: 600; }
.balance-list small { color: var(--muted); font-size: 11.5px; }
.balance-list b { font-family: var(--display); font-size: 15px; font-weight: 800; }
.zero-sum { margin-top: 12px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.zero-sum span { display: inline-flex; align-items: center; gap: 6px; }
.zero-sum strong { color: var(--ink); font-family: var(--display); font-size: 14px; }

/* ---------- People ---------- */

.people-toolbar { margin-bottom: 14px; display: grid; gap: 10px; }
.people-toolbar p { color: var(--muted); font-size: 13px; }
.admin-note { color: var(--muted); font-size: 12px; }
.people-grid { display: grid; gap: 10px; }
.person-card { padding: 15px; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; }
.person-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.person-card h2 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.person-card h2 small { padding: 3px 8px; border-radius: 999px; background: rgba(20, 18, 15, .07); font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-badge { background: var(--mint-soft) !important; color: var(--positive); }
.person-card > p { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.person-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.person-stats span { padding: 10px; display: grid; gap: 2px; border-radius: 13px; background: rgba(20, 18, 15, .04); }
.person-stats small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.person-stats strong { font-family: var(--display); font-size: 16px; font-weight: 800; }
.person-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11.5px; }
.person-footer span:first-child { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Settings ---------- */

.settings-hero { padding: 6px var(--gutter) 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; color: var(--card); background: var(--ink); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.settings-hero .eyebrow { color: rgba(255, 252, 245, .5); }
.settings-hero > div { min-width: 0; }
.settings-hero h1 { margin-top: 3px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-hero p { color: rgba(255, 252, 245, .55); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-hero .button-soft { flex: none; color: var(--card); border-color: rgba(255, 252, 245, .25); background: rgba(255, 252, 245, .1); min-height: 42px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
.settings-hero .avatar-xl { width: 56px; height: 56px; font-size: 18px; }
.settings-form { display: grid; gap: 14px; }
.settings-card { margin-top: 14px; padding: 16px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
.settings-form .settings-card { margin-top: 0; }
.settings-card-head { display: flex; align-items: flex-start; gap: 12px; }
.settings-card-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: var(--mint-soft); }
.settings-card-icon.danger { color: var(--danger); background: #fdece7; }
.settings-card-head h2 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.settings-card-head p { margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.settings-field { display: grid; gap: 9px; }
.settings-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.settings-label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
.settings-field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.currency-preview { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: var(--radius); background: rgba(20, 18, 15, .05); }
.currency-preview span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.currency-preview strong { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; text-align: right; }
.settings-fields { margin: 0; padding: 0; border: 0; display: grid; gap: 13px; }
.settings-fields:disabled { opacity: .55; }
.settings-rows { display: grid; gap: 2px; }
.settings-row { width: 100%; min-height: 60px; padding: 11px 6px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.settings-row:not(.static):active { background: rgba(20, 18, 15, .05); }
.settings-row.static { cursor: default; }
.settings-row > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--ink-soft); background: rgba(20, 18, 15, .06); }
.settings-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.settings-row strong { font-size: 14px; font-weight: 600; }
.settings-row small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-row > svg { color: var(--muted); }
.settings-save { position: sticky; bottom: calc(var(--tabbar-height) + 8px); z-index: 5; }
.danger-card .button-danger { width: 100%; }
.settings-foot { margin: 22px 0 8px; color: var(--muted); font-size: 11.5px; text-align: center; }
.correction-list { display: grid; gap: 8px; }
.correction-row { display: flex; align-items: flex-start; gap: 10px; }
.correction-row > span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); background: rgba(20, 18, 15, .05); }
.correction-row strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.correction-row small { color: var(--muted); font-size: 11.5px; }

/* ---------- Modals & sheets ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 18, 15, .5);
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-backdrop.open { opacity: 1; }
.modal {
  width: 100%;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 16px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translateY(2%);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.modal-backdrop.open .modal { transform: translateY(0); }
.modal-header {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 calc(var(--gutter) * -1);
  padding: 14px var(--gutter) 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
}
.modal-header::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; border-radius: 3px; background: var(--line-strong); transform: translateX(-50%); }
.modal-header h2 { font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; }
.modal-header .eyebrow { margin-bottom: 3px; }
.modal form { display: grid; gap: 16px; }
.modal-actions { display: flex; gap: 9px; }
.modal-actions .button { flex: 1; }
.modal-actions .button-full { flex: 1 0 100%; }
/* A sticky footer pins to the scroll container's CONTENT box, so any bottom
   padding on the sheet would leave a band under it for content to show through.
   The sheet drops that padding and the footer carries the safe-area inset itself. */
.modal.sheet-modal { padding-bottom: 0; }
.sticky-actions { position: sticky; bottom: 0; z-index: 4; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter) calc(env(safe-area-inset-bottom) + 14px); background: var(--paper); box-shadow: 0 -12px 18px 6px var(--paper); }
.sheet-footer { display: grid; gap: 9px; }
.confirm-body { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.modal.confirm-modal { max-height: 70dvh; }
.confirm-payment { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.confirm-payment > strong { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.confirm-payment p { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 34ch; }

.detail-hero { display: flex; align-items: center; gap: 13px; }
.detail-hero .category-icon { width: 46px; height: 46px; border-radius: 15px; font-size: 22px; }
.detail-hero strong { display: block; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.detail-hero p { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: rgba(20, 18, 15, .06); font-size: 11.5px; font-weight: 600; }
.detail-note { padding: 12px 14px; border-radius: var(--radius); background: var(--yellow-soft); font-size: 13.5px; line-height: 1.5; }
.detail-section { padding: 14px; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.detail-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail-section-title strong { color: var(--ink); }
.split-row { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.split-row > span:not(.avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.split-row strong { font-family: var(--display); font-weight: 800; }
.receipt-item-detail-list { display: grid; gap: 7px; }
.receipt-item-detail-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.receipt-item-detail-list small { display: block; color: var(--muted); font-size: 11px; }
.audit-stamp { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: rgba(20, 18, 15, .04); color: var(--muted); font-size: 12px; }
.audit-stamp svg { flex: none; }
.audit-stamp small { display: block; margin-top: 2px; font-size: 11px; opacity: .85; word-break: break-word; }
.admin-actions { padding: 14px; display: grid; gap: 11px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.admin-actions p { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.admin-actions > div:last-child { display: flex; gap: 9px; }
.admin-actions .button { flex: 1; }
.profile-hero { display: flex; align-items: center; gap: 13px; }
.profile-hero h3 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.profile-hero h3 small { padding: 3px 8px; border-radius: 999px; background: rgba(20, 18, 15, .07); font-family: var(--body); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.profile-hero p { color: var(--muted); font-size: 12.5px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-stats span { padding: 13px; display: grid; gap: 3px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.profile-stats small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.profile-stats strong { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.ledger-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ledger-heading h3 { font-family: var(--display); font-size: 18px; font-weight: 800; }
.ledger-heading span { color: var(--muted); font-size: 12px; }
.ledger-list { display: grid; gap: 2px; }
.ledger-row { min-height: 54px; padding: 9px 4px; display: flex; align-items: center; gap: 11px; }
.ledger-row span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ledger-row strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row small { color: var(--muted); font-size: 11px; }
.ledger-row b { font-family: var(--display); font-size: 14px; font-weight: 800; }
.ledger-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(20, 18, 15, .05); }
.ledger-mark.settlement { color: var(--positive); background: var(--mint-soft); }
.pending-invite { padding: 11px 14px; border-radius: var(--radius); background: var(--yellow-soft); font-size: 12.5px; font-weight: 600; }
.invite-card { display: grid; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.invite-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.invite-card label { display: grid; gap: 6px; }
.invite-card label > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.invite-card label > div { display: flex; gap: 8px; }
.invite-card input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); font-size: 13px; }
.danger-zone { padding: 15px; display: grid; gap: 11px; border: 1px dashed rgba(169, 68, 51, .4); border-radius: var(--radius); }

/* ---------- The add-expense sheet ---------- */


.amount-pad { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--ink); color: var(--card); }
.currency-switch { display: flex; gap: 5px; padding: 4px; border-radius: 13px; background: rgba(255, 252, 245, .09); }
.currency-switch button { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 252, 245, .62); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; }
.currency-switch button b { font-size: 14px; }
.currency-switch button.active { color: var(--ink); background: var(--mint); }
.amount-input { display: grid; justify-items: center; gap: 2px; padding: 6px 0 2px; }
.amount-currency { color: rgba(255, 252, 245, .42); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.amount-input input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--card);
  font-family: var(--display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.045em;
  text-align: center;
  appearance: none;
}
.amount-input input:focus { outline: none; }
.amount-input input::placeholder { color: rgba(255, 252, 245, .25); }
.base-amount-field { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(255, 252, 245, .14); }
.base-amount-field[hidden] { display: none; }
.base-amount-field label { display: grid; gap: 7px; }
.base-amount-field label > span { color: rgba(255, 252, 245, .55); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.base-amount-input { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 46px; border: 1px solid rgba(255, 252, 245, .2); border-radius: 12px; background: rgba(255, 252, 245, .07); }
.base-amount-input input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--card); font-size: 16px; font-weight: 600; appearance: none; }
.base-amount-input input:focus { outline: none; }
.base-amount-input b { color: rgba(255, 252, 245, .55); font-size: 12px; font-weight: 700; }
#exchange-rate-note { color: rgba(255, 252, 245, .42); font-size: 11px; line-height: 1.4; }

.receipt-fallback { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.receipt-fallback[open] { box-shadow: var(--shadow-sm); }
.ai-summary { min-height: 68px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ai-summary::-webkit-details-marker { display: none; }
.ai-summary-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: var(--mint); }
.ai-summary-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ai-summary-text strong { font-family: var(--display); font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.ai-summary-text small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.summary-mark { flex: none; color: var(--muted); transition: transform .2s ease; }
.receipt-fallback[open] .summary-mark { transform: rotate(90deg); }
.ai-steps { padding: 4px 15px 0; display: grid; gap: 16px; }
.ai-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 11px; }
.ai-step-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 700; }
.ai-steps li > div { display: grid; gap: 8px; min-width: 0; }
.ai-steps strong { font-size: 14px; font-weight: 700; }
.ai-steps p { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ai-steps textarea { width: 100%; min-height: 84px; padding: 11px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
#receipt-copy-status:empty, #receipt-import-error:empty { display: none; }
#receipt-copy-status { color: var(--positive); font-size: 12px; font-weight: 600; }
#receipt-copy-status.warning { color: var(--danger); }
#receipt-import-error { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.prompt-peek summary { min-height: 34px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.prompt-peek textarea { margin-top: 8px; color: var(--muted); }
.ai-auto, .ai-note { margin: 12px 15px 15px; }
.ai-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }

.receipt-loading { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.receipt-loading img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.receipt-loading strong { display: block; font-size: 14px; font-weight: 700; }
.receipt-loading p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.receipt-review-card { display: grid; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.receipt-review-heading { display: flex; align-items: center; gap: 12px; }
.receipt-review-heading img, .receipt-review-placeholder { flex: none; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: rgba(20, 18, 15, .06); color: var(--muted); }
.receipt-review-heading > div { flex: 1; min-width: 0; }
.receipt-review-heading h3 { font-family: var(--display); font-size: 16px; font-weight: 800; }
.receipt-review-heading p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.receipt-review-heading .button { min-height: 38px; padding: 0 11px; font-size: 12px; }
.receipt-warning { padding: 10px 12px; border-radius: 12px; background: var(--yellow-soft); font-size: 12.5px; line-height: 1.45; }
.receipt-edit-list { display: grid; gap: 11px; }
.receipt-edit-item { display: grid; gap: 8px; min-width: 0; padding: 11px; border-radius: var(--radius); background: var(--paper); }
.receipt-edit-fields { display: grid; grid-template-columns: minmax(0, 1fr) 104px 40px; gap: 7px; align-items: center; }
.receipt-edit-fields > * { min-width: 0; }
.receipt-edit-fields input { width: 100%; min-width: 0; min-height: 44px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); font-size: 15px; }
.receipt-edit-fields label { display: flex; align-items: center; gap: 5px; padding: 0 9px; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); }
.receipt-edit-fields label span { color: var(--muted); font-size: 11px; font-weight: 700; }
.receipt-edit-fields label input { flex: 1; width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; text-align: right; }
.receipt-edit-fields > button { width: 40px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; background: rgba(20, 18, 15, .06); color: var(--muted); cursor: pointer; }
.receipt-item-assignees, .item-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.receipt-item-assignees > span:first-child { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.receipt-item-assignees button, .item-people button {
  min-height: 38px;
  padding: 0 10px 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.receipt-item-assignees button .avatar, .item-people button .avatar { width: 26px; height: 26px; font-size: 9px; opacity: .5; }
.receipt-item-assignees button.active, .item-people button.active { border-color: var(--ink); background: var(--ink); color: var(--card); }
.receipt-item-assignees button.active .avatar, .item-people button.active .avatar { opacity: 1; }
.receipt-review-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.receipt-review-footer > div { text-align: right; font-size: 12px; color: var(--muted); }
.receipt-review-footer strong { color: var(--ink); font-family: var(--display); font-size: 15px; }
.receipt-review-footer small { display: block; font-size: 11px; }
.receipt-review-footer small.warning { color: var(--danger); font-weight: 700; }

.sheet-fields { display: grid; gap: 15px; }
.sheet-fields .field > span { color: var(--muted); }
.date-row { display: flex; gap: 7px; align-items: center; }
.date-row input[type="date"] { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); font-size: 14px; appearance: none; }

.split-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.split-fieldset legend { padding: 0; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.split-mode-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 13px; background: rgba(20, 18, 15, .06); overflow-x: auto; scrollbar-width: none; }
.split-mode-tabs::-webkit-scrollbar { display: none; }
.split-mode-tabs button { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.split-mode-tabs button.active { color: var(--ink); background: var(--card); box-shadow: var(--shadow-sm); }
.split-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.split-presets { display: flex; gap: 12px; }
.participant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.participant {
  position: relative;
  min-height: 92px;
  padding: 12px 8px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.participant:active { transform: scale(.96); }
.participant > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participant .avatar { opacity: .45; transition: opacity .15s ease; }
.participant-check { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: transparent; background: rgba(20, 18, 15, .07); }
.participant.selected { border-color: var(--ink); background: var(--mint-soft); }
.participant.selected .avatar { opacity: 1; }
.participant.selected .participant-check { color: var(--card); background: var(--ink); }
.custom-split-list { display: grid; gap: 7px; }
.custom-split-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); opacity: .55; }
.custom-split-row.selected { opacity: 1; border-color: var(--line-strong); }
.custom-person-toggle { position: relative; min-width: 0; min-height: 44px; padding: 0 6px 0 34px; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.custom-person-toggle .participant-check { top: 50%; left: 4px; right: auto; transform: translateY(-50%); width: 22px; height: 22px; }
.custom-split-row.selected .participant-check { color: var(--card); background: var(--ink); }
.custom-person-toggle > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-split-row input { min-height: 44px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--paper); font-size: 15px; text-align: right; appearance: none; }
.custom-split-row b { color: var(--muted); font-size: 11px; font-weight: 700; }
.split-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--mint-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.split-total span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.split-total strong { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.split-total strong small { display: block; font-family: var(--body); font-size: 11px; font-weight: 600; color: var(--muted); }
.split-total.invalid { background: #fdece7; color: var(--danger); }
.split-total.hint { background: rgba(20, 18, 15, .05); color: var(--muted); font-weight: 500; }
.split-total.hint strong { display: none; }
.split-total.invalid strong { display: none; }
.split-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.item-split-intro { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: rgba(20, 18, 15, .05); font-size: 13px; font-weight: 600; }
.item-split-intro small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.receipt-items-ready { background: var(--mint-soft); }
.receipt-items-ready span { display: inline-flex; align-items: center; gap: 7px; }
.item-split-list { display: grid; gap: 11px; }
.item-split-row { display: grid; gap: 8px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.item-split-row > input { min-height: 44px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--paper); font-size: 15px; }
.item-split-row > label { display: flex; align-items: center; gap: 7px; padding: 0 11px; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--paper); }
.item-split-row > label span { color: var(--muted); font-size: 11px; font-weight: 700; }
.item-split-row > label input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; text-align: right; appearance: none; }
.item-remove { min-height: 40px; border: 0; border-radius: 11px; background: rgba(20, 18, 15, .06); color: var(--muted); cursor: pointer; }
.item-quick-actions { display: flex; gap: 7px; }
.item-quick-actions button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); font-size: 12px; font-weight: 600; cursor: pointer; }
.add-item-button { justify-self: start; }
.more-fields summary { min-height: 40px; display: inline-flex; align-items: center; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.more-fields[open] summary { margin-bottom: 10px; }
.manual-entry-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.manual-entry-divider::before, .manual-entry-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Toasts ---------- */

.toast-region { position: fixed; inset: auto 0 calc(var(--tabbar-height) + 12px); z-index: 200; display: grid; gap: 8px; padding: 0 var(--gutter); pointer-events: none; }
/* Settings pins a Save bar above the tab bar, so toasts clear it rather than collide. */
[data-screen="settings"] .toast-region { bottom: calc(var(--tabbar-height) + 74px); }
[data-screen="welcome"] .toast-region { bottom: calc(env(safe-area-inset-bottom) + 16px); }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius);
  color: var(--card);
  background: var(--ink);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast > span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--mint); }
.toast strong { display: block; font-size: 14px; font-weight: 700; }
.toast p { color: rgba(255, 252, 245, .68); font-size: 12.5px; line-height: 1.4; }

span.avatar { flex: none; }

/* ---------- Person colours (kept in CSS so the Pages CSP can block inline styles) ---------- */

/* A palette slot per person, assigned by their position in the group, so everyone
   is distinct no matter what colour their record happens to hold. Every tone keeps
   white initials legible on both the cream cards and the dark trip header. */
[data-person-tone] { --person-color: #2f6f60; }
[data-person-tone="1"] { --person-color: #b0522f; }
[data-person-tone="2"] { --person-color: #6a58a8; }
[data-person-tone="3"] { --person-color: #2f6b99; }
[data-person-tone="4"] { --person-color: #96611a; }
[data-person-tone="5"] { --person-color: #9c4361; }

/* ---------- Tablet and desktop ---------- */

@media (min-width: 700px) {
  :root { --gutter: 24px; }
  .view { max-width: 720px; margin: 0 auto; }
  .overview-grid, .settle-layout, .itinerary-layout { grid-template-columns: 1fr; }
  .people-grid, .places-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-backdrop { align-items: center; padding: 24px; }
  .modal { width: min(620px, 100%); max-height: 88dvh; padding-bottom: 20px; border-radius: var(--radius-xl); }
  .modal-header::before { display: none; }
  .modal-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .sticky-actions { padding-bottom: 12px; }
  .form-grid, .sheet-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .settings-form .settings-card { margin-top: 0; }
}

@media (min-width: 1040px) {
  :root { --gutter: 32px; }
  body { overflow-x: auto; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: 258px;
    padding: 28px 20px 20px;
    display: flex;
    flex-direction: column;
    color: var(--card);
    background: var(--ink);
  }
  .sidebar .brand { color: var(--card); font-size: 24px; }
  .trip-switcher { width: 100%; margin: 30px 0 20px; padding: 11px; display: grid; grid-template-columns: 38px 1fr 16px; align-items: center; gap: 11px; border: 1px solid rgba(255, 252, 245, .14); border-radius: var(--radius); background: rgba(255, 252, 245, .07); color: var(--card); text-align: left; cursor: pointer; }
  .trip-switcher small, .trip-switcher strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trip-switcher small { color: rgba(255, 252, 245, .5); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .trip-switcher strong { font-size: 14px; }
  .trip-switcher > svg { color: rgba(255, 252, 245, .45); }
  .trip-monogram { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: var(--mint); font-family: var(--display); font-size: 18px; font-weight: 800; }
  .main-nav { display: grid; gap: 4px; }
  .nav-item { width: 100%; min-height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 13px; background: transparent; color: rgba(255, 252, 245, .6); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
  .nav-item:hover { color: var(--card); background: rgba(255, 252, 245, .07); }
  .nav-item.active { color: var(--ink); background: var(--mint); font-weight: 700; }
  .sidebar-bottom { margin-top: auto; }
  .sync-status { margin: 0 10px 10px; display: flex; align-items: center; gap: 7px; color: rgba(255, 252, 245, .45); font-size: 10px; }
  .sync-status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(122, 223, 192, .2); }
  .trip-date { margin-bottom: 12px; padding: 0 10px; display: flex; align-items: center; gap: 9px; color: rgba(255, 252, 245, .5); font-size: 12px; }
  .profile-compact { width: 100%; padding: 12px 10px; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; border: 0; border-top: 1px solid rgba(255, 252, 245, .12); background: transparent; color: var(--card); text-align: left; cursor: pointer; }
  .profile-compact strong { display: block; font-size: 13px; }
  .profile-compact small { display: block; color: rgba(255, 252, 245, .5); font-size: 11px; }
  .profile-compact svg { color: rgba(255, 252, 245, .45); }
  .main { margin-left: 258px; padding-bottom: 40px; }
  .app-bar, .mobile-nav { display: none; }
  .view { max-width: 1120px; padding-top: 34px; }
  .view-overview .view, .view-settings .view { padding: 34px var(--gutter) 40px; }
  .view-overview .view > *:not(.trip-hero), .view-settings .view > * { margin-inline: 0; }
  .trip-hero, .settings-hero { padding: 26px 28px; border-radius: var(--radius-xl); }
  .trip-net strong { font-size: 54px; }
  .hero-actions { max-width: 420px; }
  .people-balance-strip { flex-wrap: wrap; }
  .people-balance-strip button { flex: 0 1 176px; }
  .page-header { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .page-header > div { display: grid; gap: 6px; }
  .page-header h1 { font-size: 40px; }
  .page-header > .button { display: inline-flex; }
  .view-expenses .page-header .eyebrow, .view-expenses .page-header h1,
  .view-places .page-header .eyebrow, .view-places .page-header h1,
  .view-people .page-header .eyebrow, .view-people .page-header h1 { display: block; }
  .overview-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); align-items: start; }
  .right-stack { grid-template-columns: 1fr; }
  .settle-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: start; }
  .itinerary-layout { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
  .people-grid, .places-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .transfer-row { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; }
  .transfer-row .button { width: auto; min-width: 150px; }
  .settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .settings-save { position: static; grid-column: 1 / -1; }
  .settings-save .button { max-width: 280px; }
  .welcome-shell { align-items: center; justify-content: center; }
  .welcome-card { flex: none; width: min(440px, 100%); padding: 38px 34px; border-radius: var(--radius-xl); background: rgba(255, 252, 245, .05); border: 1px solid rgba(255, 252, 245, .12); backdrop-filter: blur(8px); }
  .toast-region { inset: auto 0 24px auto; width: min(380px, calc(100% - 48px)); padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Receipt import is the primary entry path; keep repeat visits compact. */
.receipt-import-body { display: grid; gap: 10px; padding: 0 15px 15px; }
.receipt-import-actions { display: flex; gap: 8px; }
.receipt-import-actions .button { flex: 1; min-width: 0; padding-inline: 10px; }
.receipt-import-body > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.receipt-import-body textarea { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); font: 16px/1.45 var(--body, sans-serif); resize: vertical; }
.receipt-import-body textarea[aria-invalid="true"] { border-color: var(--danger); }
.receipt-import-body p { font-size: 13px; line-height: 1.5; }
.receipt-scan-actions { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; color: var(--muted); }
.receipt-scan-actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
#receipt-progress:empty, #receipt-review:empty { display: none; }
#receipt-progress { font-size: 13px; line-height: 1.5; scroll-margin-top: 88px; }
#receipt-review { scroll-margin-top: 88px; }
.receipt-review-totals { padding: 10px 12px; background: var(--mint-soft); border-radius: 12px; font-size: 13px; }
.receipt-review-totals strong { float: right; }
.receipt-review-totals small { display: block; clear: both; padding-top: 4px; line-height: 1.45; }
.receipt-review-totals .warning { color: var(--danger); }
.receipt-undo { display: flex; gap: 10px; justify-content: space-between; align-items: center; font-size: 13px; }
.receipt-undo span { overflow-wrap: anywhere; }
.receipt-item-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.receipt-item-shortcuts > span { flex: 1; color: var(--muted); font-size: 12px; }
.receipt-item-shortcuts button { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.receipt-edit-item.unassigned { outline: 1px solid var(--danger); }
.receipt-edit-item.unassigned .receipt-item-shortcuts > span { color: var(--danger); }
.receipt-item-assignees button { min-height: 44px; }
.receipt-edit-fields input { font-size: 16px; }
.receipt-edit-fields { grid-template-columns: minmax(0, 1fr) 112px 44px; }
.receipt-edit-fields > button { width: 44px; }
.receipt-review-card .text-button { min-height: 44px; }
@media (max-width: 540px) {
  .receipt-edit-fields { grid-template-columns: minmax(0, 1fr) 44px; }
  .receipt-edit-fields > input { grid-column: 1 / -1; }
  .receipt-edit-fields label { max-width: 155px; }
  .receipt-item-assignees { gap: 5px; }
  .receipt-item-assignees button { padding-inline: 8px; }
}
@media (max-width: 540px) {
  .receipt-review-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; }
  .receipt-review-heading img, .receipt-review-placeholder { width: 40px; height: 40px; border-radius: 11px; }
  .receipt-review-heading > .button { grid-column: 2; justify-self: start; padding-inline: 0; min-height: 44px; }
}

/* ---------- Insights ---------- */
/* Share and paid are validated as a pair against --card (CVD ΔE 9.1, both ≥ 3:1). */
:root { --bar-share: #12936e; --bar-paid: #b8672a; }
.insight-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.insight-tiles > div { padding: 13px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.insight-tiles small, .insight-award .eyebrow { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.insight-tiles strong { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.insight-tiles span { color: var(--muted); font-size: 12px; }
.insight-awards { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.insight-award { min-width: 0; padding: 13px; display: grid; align-content: start; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); text-align: left; cursor: pointer; }
.insight-award:not([data-profile]):not([data-expense]) { cursor: default; }
.insight-award strong { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.insight-award-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.insight-award small { color: var(--muted); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.insights-layout { margin-top: 14px; display: grid; gap: 14px; }
.insight-legend { padding: 0 16px 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--muted); font-size: 12px; }
.insight-key { width: 12px; height: 8px; border-radius: 2px; background: var(--bar-share); }
.insight-key.paid { margin-left: 8px; background: var(--bar-paid); }
.insight-people, .insight-rows { padding: 4px 8px 10px; display: grid; gap: 2px; }
.profile-spending .insight-rows { padding: 0; gap: 8px; }
.insight-person { width: 100%; padding: 10px 8px; display: grid; gap: 6px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; }
.insight-person:active { background: rgba(20, 18, 15, .05); }
.insight-person-name, .insight-row-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.insight-person-name strong, .insight-row-label strong { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-person-name b, .insight-row-label b { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.insight-person small, .insight-row small { color: var(--muted); font-size: 11.5px; }
.insight-row { padding: 8px; display: grid; gap: 6px; }
.profile-spending .insight-row { padding: 0; }
.insight-bars { display: grid; gap: 2px; }
.insight-bar { display: block; height: 8px; border-radius: 4px; background: rgba(20, 18, 15, .06); overflow: hidden; }
.insight-bar > span { display: block; width: var(--bar, 0%); height: 100%; border-radius: 4px; background: var(--bar-share); }
.insight-bar.paid > span { background: var(--bar-paid); }
.insight-bar > span[data-bar="0"] { display: none; }
.insights-teaser { padding: 16px; display: grid; gap: 10px; }
.insights-teaser h3 { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.insights-teaser ul { display: grid; gap: 6px; }
.insights-teaser li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.insights-teaser li span { color: var(--muted); flex: none; }
.insights-teaser li strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-title .text-button { margin-left: auto; min-height: 0; font-size: 12px; }
.profile-spending { margin-top: 8px; display: grid; gap: 12px; }
.insight-callout { width: 100%; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: baseline; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-align: left; cursor: pointer; }
.insight-callout small { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.insight-callout strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.insight-callout b { font-family: var(--display); font-weight: 800; }
@media (min-width: 700px) {
  .insight-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .insight-awards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (min-width: 1040px) {
  .insights-layout { grid-template-columns: 1.2fr 1fr; align-items: start; }
}