/* Consumer UI refinements. Theme colors remain owned by generated tokens.css. */
body.splitty-app { background-image:none; font-family:var(--font-body); line-height:1.55; }
.splitty-app { --control-radius:12px; --section-radius:18px; --navigation-space:calc(104px + env(safe-area-inset-bottom)); }
.splitty-app .app-column { padding-bottom:var(--navigation-space); }
.splitty-app #view { padding-inline:20px; }
.splitty-app #view h1 { overflow-wrap:anywhere; line-height:1.2; letter-spacing:-.025em; }
.splitty-app #view h2 { line-height:1.35; }
.splitty-app .card { border:1px solid color-mix(in srgb,var(--line) 28%,transparent); border-radius:var(--section-radius); background:var(--surface); box-shadow:none; backdrop-filter:none; }
.splitty-app .card:hover:not(:active) { transform:none; box-shadow:none; }
.splitty-app :is(.btn-primary,.btn-secondary,.btn-ghost,.btn-line) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; min-width:48px; padding:12px 18px; border-radius:var(--control-radius);
  font:600 .9375rem/1.4 var(--font-body); text-align:center; overflow-wrap:anywhere;
  box-shadow:none; background-image:none; backdrop-filter:none;
  transition:background-color .15s,color .15s,opacity .15s;
}
.splitty-app .btn-primary { background:var(--primary); color:var(--on-primary); border:0; }
.splitty-app .btn-secondary { background:var(--surface-2); color:var(--text); border:1px solid color-mix(in srgb,var(--line) 32%,transparent); }
.splitty-app .btn-ghost { background:transparent; color:var(--primary-text); border:0; }
.splitty-app .btn-line { background:var(--surface); color:var(--text); border:1px solid var(--line); }
.splitty-app :is(.btn-primary,.btn-secondary,.btn-ghost,.btn-line):hover:not(:disabled) { filter:none; transform:none; }
.splitty-app .btn-primary:hover:not(:disabled) { background:var(--primary-press); }
.splitty-app :is(.btn-secondary,.btn-ghost,.btn-line):hover:not(:disabled) { background:var(--surface-2); }
.splitty-app :is(button,input,select,textarea):disabled { opacity:.5; cursor:not-allowed; }
.splitty-app .field { min-height:48px; border-radius:var(--control-radius); border-width:1px; font-size:1rem; line-height:1.5; background:var(--surface); }
.splitty-app .field:focus-visible { border-color:var(--primary-text); box-shadow:inset 0 0 0 1px var(--primary-text); }
.splitty-app label { line-height:1.5; }
.splitty-app :is(.muted,.text-muted) { line-height:1.6; }
.splitty-app .list-row { padding-block:16px; border-bottom-color:color-mix(in srgb,var(--line) 28%,transparent); }
.splitty-app .bottom-nav { padding:8px 10px max(8px,env(safe-area-inset-bottom)); box-shadow:none; backdrop-filter:none; }
.splitty-app .nav-btn { min-height:56px; gap:5px; padding:6px 4px; border-radius:12px; font-weight:600; line-height:1.25; }
.splitty-app .nav-side { min-height:48px; }
.splitty-app [data-language-picker] { min-height:44px; padding:8px 12px; border-radius:12px; border-color:color-mix(in srgb,var(--line) 32%,transparent); color:var(--text); }
.splitty-app .sheet,.splitty-app .modal { border-radius:20px; }
.splitty-app .sheet-head { gap:16px; margin-bottom:20px; }
.splitty-app .sheet-foot { padding-block:16px; }
.splitty-app .quick-split { padding-block:24px; }
.splitty-app .quick-total { font-variant-numeric:tabular-nums; }
.splitty-app .quick-section { margin-block:24px; padding:12px 0 0; background:transparent; border-radius:0; }
.splitty-app .quick-section h2 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.splitty-app .quick-line { padding-block:14px; border-bottom:1px solid color-mix(in srgb,var(--line) 24%,transparent); align-items:baseline; gap:16px; }
.splitty-app .quick-line:last-child { border-bottom:0; }
.splitty-app .quick-line strong { font-weight:600; text-align:end; white-space:normal; overflow-wrap:anywhere; flex-shrink:0; max-width:48%; }
.splitty-app .quick-debt { padding-block:12px; border-bottom:1px solid color-mix(in srgb,var(--line) 24%,transparent); }
.splitty-app .quick-debt:last-child { border-bottom:0; }
.splitty-app .quick-debt .quick-line { padding-block:0 4px; border:0; }
.splitty-app .quick-split .quick-record { min-height:48px; padding:10px 0; text-align:start; justify-content:flex-start; font-size:.875rem; }
.splitty-app .quick-share-actions { display:flex; flex-wrap:wrap; gap:10px; margin-block:20px; }
.splitty-app .quick-share-actions button { flex:1 1 140px; width:auto; }
.splitty-app .quick-split .quick-notes { font-size:.875rem; color:var(--text-muted); line-height:1.65; margin-block:16px; }
.splitty-app .quick-name-row { gap:12px; flex-wrap:wrap; margin-top:12px; }
.splitty-app .quick-name-row > div { flex:1 1 160px; }
.splitty-app .quick-chips { gap:8px; margin-block:16px; }
.splitty-app .quick-chip { border:1px solid var(--line); background:var(--surface); color:var(--text); }
.splitty-app .quick-chip[aria-pressed="true"] { border-color:var(--primary); background:var(--primary); color:var(--on-primary); }
.splitty-app :focus-visible:not(.field):not(input):not(select):not(textarea) { outline:3px solid var(--primary-text); outline-offset:3px; }
@media(min-width:768px) {
  .splitty-app .app-column { padding-bottom:40px; }
  .splitty-app #view { padding-inline:32px; }
  .splitty-app .quick-split { padding-top:40px; }
  .splitty-app .bottom-nav { display:none; }
}
@media(prefers-reduced-motion:reduce) { .splitty-app :is(.card,.list-row,.btn-primary,.btn-secondary,.btn-ghost,.btn-line) { animation:none; transition:none; } }
@media(forced-colors:active) {
  .splitty-app :is(.card,.quick-section,.btn-primary,.btn-secondary,.btn-line) { border:1px solid CanvasText; }
  .splitty-app :focus-visible { outline:3px solid Highlight; }
}

/* Anonymous bill readers (src/pages/expense-share.php), direction B: paper and
   ink, the total once and large, the settle dial on the left, the receipt as
   hairline rows on the right. */
body.splitty-share { --b-paper:#F4FAFF; --b-ink:#0A2540; --b-action:#FFD337;
  --b-muted:color-mix(in srgb, var(--b-ink) 72%, var(--b-paper)); --b-hair:color-mix(in srgb, var(--b-ink) 15%, var(--b-paper));
  --wd-track:color-mix(in srgb, var(--b-ink) 7%, var(--b-paper));
  padding:28px clamp(16px,4vw,48px) 56px; background:var(--b-paper); background-image:none; color:var(--b-ink); font:1rem/1.6 var(--font-body); }
body.splitty-share::before { display:none; }
.expense-share { max-width:1120px; margin:auto; }
.expense-share-brand { display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid var(--b-hair); }
.es-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start; }
@media (max-width:820px) { .es-grid { grid-template-columns:1fr; } }
.expense-share h1 { font-size:clamp(28px,4vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.03em; overflow-wrap:anywhere; margin-block:0 8px; }
.expense-share .es-lead > h2.amount { font-size:clamp(44px,7vw,72px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-block:12px 16px; }
.expense-share .es-lead > p { color:var(--b-muted); margin:0 0 24px; max-width:44ch; }
.es-dial { max-width:340px; color:var(--b-ink); }
.es-dial .wd-cap { color:var(--b-muted); }
.expense-share section { padding:0; margin-block:0 28px; border-radius:0; background:transparent; }
.expense-share section h2 { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--b-muted); margin-bottom:6px; }
.expense-share .line { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-block:12px; border-bottom:1px solid var(--b-hair); }
.expense-share section > .line:first-of-type { border-top:1px solid var(--b-hair); }
.expense-share .line span:first-child { overflow-wrap:anywhere; min-width:0; }
.expense-share .line .amount { max-width:48%; flex-shrink:0; text-align:end; font-weight:700; overflow-wrap:anywhere; }
.expense-share .amount { font-variant-numeric:tabular-nums; }
.expense-share .muted { color:var(--b-muted); }
.expense-share .es-receipt > p { color:var(--b-muted); font-size:.875rem; margin-block:8px; }
.es-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; vertical-align:.05em; }

.splitty-app [data-bui-root] { font-family:var(--font-body); }
.splitty-app .home-heading h1 { font-weight:700; letter-spacing:-.025em; }
.splitty-app .home-heading button { min-height:48px; padding:12px 16px; font-size:.9375rem; border-radius:12px; }
.splitty-app .home-quick { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 18px; border-radius:12px; background:var(--primary); color:var(--on-primary); font-size:.9375rem; font-weight:600; margin-block:0 16px; }
.splitty-app .home-heading .home-quick { margin:0; }
.splitty-app .home-quick:hover { background:var(--primary-press); }
.splitty-app .home-quick:focus-visible { outline:3px solid var(--primary-text); outline-offset:3px; }
.splitty-app [data-bui-root] .primitive-table-cell { min-height:80px; padding:18px; border-color:color-mix(in srgb,var(--line) 28%,transparent); }

/* Shell, direction B (13 Oct 2026): a flat top bar at every width, the
   four routes as underline tabs from 768px, a hairline under it, no shadow.
   Paper #F4FAFF / ink #0A2540; dark is the Deep navy. One action colour,
   Sunshine, marks the active tab. */
.splitty-app { --b-paper:#F4FAFF; --b-ink:#0A2540; --b-action:#FFD337;
  --b-muted:color-mix(in srgb, var(--b-ink) 72%, var(--b-paper)); --b-hair:color-mix(in srgb, var(--b-ink) 15%, var(--b-paper)); }
:root[data-theme="dark"] .splitty-app { --b-paper:#0A2540; --b-ink:#F4FAFF; }
body.splitty-app { background:var(--b-paper); color:var(--b-ink); }
.splitty-app .shell-top { background:var(--b-paper); border-bottom:1px solid var(--b-hair); }
.splitty-app .shell-top-in { display:flex; align-items:center; gap:28px; max-width:1184px; margin-inline:auto; padding:0 20px; min-height:60px; }
.splitty-app .shell-brand { display:inline-flex; align-items:center; gap:10px; color:var(--b-ink); text-decoration:none; font-size:1.125rem; letter-spacing:-.02em; }
.splitty-app .shell-brand strong { font-weight:800; }
.splitty-app .shell-nav { display:none; align-items:stretch; gap:24px; align-self:stretch; }
.splitty-app .shell-nav .nav-side { position:relative; display:inline-flex; align-items:center; min-height:60px; padding:0; border-radius:0; background:none; color:var(--b-muted); font-weight:600; font-size:.9375rem; }
.splitty-app .shell-nav .nav-side:hover { color:var(--b-ink); }
.splitty-app .shell-nav .nav-side.active { color:var(--b-ink); }
.splitty-app .shell-nav .nav-side.active::after { content:""; position:absolute; inset-inline:0; bottom:-1px; height:3px; border-radius:3px; background:var(--b-action); }
.splitty-app .shell-lang { margin-inline-start:auto; }
.splitty-app .shell-lang-pick { border:1px solid var(--b-hair); border-radius:999px!important; padding-inline:10px; color:var(--b-ink)!important; }
.splitty-app .app-column { max-width:1184px; }
/* Legacy views were drawn for a 720px column; React routes set their own width. */
.splitty-app #view > :not([data-bui-root]) { max-width:720px; margin-inline:auto; }
.splitty-app .bottom-nav { background:var(--b-paper); border-top:1px solid var(--b-hair); max-width:none; }
.splitty-app .bottom-nav .nav-btn { position:relative; color:var(--b-muted); }
.splitty-app .bottom-nav .nav-btn.active { color:var(--b-ink); }
.splitty-app .bottom-nav .nav-btn.active::before { content:""; position:absolute; top:-9px; inset-inline:22%; height:3px; border-radius:3px; background:var(--b-action); }
@media(min-width:768px) {
  .splitty-app .shell-nav { display:flex; }
  .splitty-app .shell-top-in { padding:0 32px; }
}

.splitty-app #view .font-display { font-family:var(--font-body); font-weight:700; }
/* Direction B: no gradients. tokens.css casts a world glow from body::before. */
body.splitty-app::before { display:none; }
.splitty-app .shell-lang [data-language-picker] { min-height:36px!important; padding:6px 14px!important; border:1px solid var(--b-hair); border-radius:999px; color:var(--b-ink); background:none; }
/* Bottom nav, direction B: text tabs, the active one under a Sunshine bar. */
.splitty-app .bottom-nav .nav-ico { display:none; }
.splitty-app .bottom-nav .nav-btn { min-height:52px; font-size:.8125rem; }

/* Direction B on the legacy views React still mounts (trip tab bodies, sheets):
   one action colour (Sunshine pill, deep ink), flat sections with hairlines,
   no soft shadows. Trip colours stay on the people and wedges. */
.splitty-app .btn-primary { background:var(--b-action); color:#0A2540; border-radius:999px; font-weight:700; }
.splitty-app .btn-primary:hover:not(:disabled) { background:color-mix(in srgb, var(--b-action) 88%, #0A2540); }
.splitty-app :is(.btn-secondary,.btn-line) { border-radius:999px; }
.splitty-app :is([data-trip-body],[data-feed-rows]) .card { background:transparent; border:0; border-top:1px solid var(--b-hair); border-radius:0; padding-inline:0; box-shadow:none; }
.splitty-app :is([data-trip-body],[data-feed-rows]) .card:last-child { border-bottom:1px solid var(--b-hair); }
.splitty-app :is([data-trip-body],[data-feed-rows]) .list-row { border-bottom-color:var(--b-hair); }
.splitty-app [data-trip-body] .btn-ghost { color:var(--b-ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
/* One payment = one row: Mark as paid is an outline pill, not a full-width slab. */
.splitty-app [data-trip-body] .settle-pay { width:auto; background:transparent; color:var(--b-ink); border:1.5px solid var(--b-ink); padding:8px 20px; }
.splitty-app [data-trip-body] .settle-pay:hover:not(:disabled) { background:color-mix(in srgb, var(--b-ink) 6%, transparent); }
/* The tab hero is a figure, not a coloured slab; filters are underline tabs; fields are lines. */
.splitty-app [data-trip-body] .hero-card { background:none!important; color:var(--b-ink)!important; padding:0 0 8px!important; border-radius:0; box-shadow:none; }
.splitty-app [data-trip-body] .hero-card :is(.hero-scrim,[aria-hidden="true"].absolute) { display:none; }
.splitty-app [data-trip-body] .hero-card * { color:inherit; }
.splitty-app [data-trip-body] .chip { background:none; border:0; border-radius:0; padding:8px 0; margin-inline-end:14px; color:var(--b-muted); font-weight:500; box-shadow:none; }
.splitty-app [data-trip-body] .chip.sel { color:var(--b-ink); font-weight:600; box-shadow:inset 0 -3px 0 var(--b-action); }
.splitty-app [data-trip-body] .field { background:transparent; border-width:0 0 1px; border-color:var(--b-ink); border-radius:0; padding-inline:0; }
/* Sheets, direction B: solid paper with a hairline, never frosted or shadowed;
   fields are lines; the sheet title is the page title size. */
.splitty-app .sheet, .splitty-app .modal { background:var(--b-paper)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important; border:1px solid var(--b-hair)!important; color:var(--b-ink); }
.splitty-app :is(.sheet,.modal) .field { background:transparent; border-width:0 0 1px; border-color:color-mix(in srgb, var(--b-ink) 55%, var(--b-paper)); border-radius:0; padding-inline:0; }
.splitty-app :is(.sheet,.modal) .field:focus-visible { box-shadow:inset 0 -2px 0 var(--b-ink); }
.splitty-app :is(.sheet,.modal) .sheet-head h2, .splitty-app :is(.sheet,.modal) .sheet-head h3 { font-size:1.375rem; font-weight:800; letter-spacing:-.02em; }
.splitty-app :is(.sheet,.modal) .chip.sel { background:transparent; color:var(--b-ink); border-color:var(--b-ink); box-shadow:inset 0 -3px 0 var(--b-action); }
.splitty-app .split-dial { display:flex; justify-content:center; }
/* Signed out there is nowhere for the nav to go: brand and language only. */
.splitty-app.signed-out .shell-nav, .splitty-app.signed-out .bottom-nav { display:none!important; }
.splitty-app.signed-out .app-column { padding-bottom:40px; }
.splitty-app .ob.ob-b { background:var(--b-paper); color:var(--b-ink); }
.splitty-app .ob.ob-b:focus-visible { outline:none; }
.splitty-app :is(.sheet,.modal) .btn-ghost { color:var(--b-ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }