/* Bill Splitter — layout, type and motion, on Kit's tokens. No colours live
 * here (tests/css.test.js checks): retro.css and clean.css paint, each
 * scoped under its data-theme, both always linked.
 *
 * The phone layout is a column with a sticky top bar and a bottom tab bar;
 * from 768px the tabs become a side rail. The site nav (willperlak.com's bar,
 * 44px, scrolls away) sits above #app, so a full-height shell subtracts
 * --wp-site-nav-h. Every tap target is at least 44px.
 *
 * Sections are marked `== screen: <name> ==` so builders working on
 * different screens edit different hunks. */

/* == shell == */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text);
  background-color: var(--bg);
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p { margin: 0; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

#app {
  min-height: calc(100dvh - var(--wp-site-nav-h, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "demo" "top" "banner" "main";
}
#demo-bar { grid-area: demo; }
#topbar { grid-area: top; }
#unavailable-banner { grid-area: banner; }
#main { grid-area: main; }

#main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(96px + env(safe-area-inset-bottom));
}
#app[data-screen="loading"] #tabbar,
#app[data-screen="loading"] #fab-scan,
#app[data-screen="loading"] #topbar > *,
#app[data-screen="unavailable"] #tabbar,
#app[data-screen="unavailable"] #fab-scan,
#app[data-screen="unavailable"] #main > .view,
#app[data-screen="error"] #tabbar,
#app[data-screen="error"] #fab-scan,
#app[data-screen="error"] #topbar > :not(#brand),
#app[data-screen="error"] #main > .view { display: none !important; }
#app:not([data-screen="loading"]) #app-loading { display: none; }
#app-loading { margin-top: var(--space-7); }
#app:not([data-screen="error"]) #app-error { display: none; }
#app-error { margin-top: var(--space-6); justify-items: center; }
/* A 503 after sign-in: the banner stays in sight over the view in use. */
#app[data-screen="app"] #unavailable-banner { position: sticky; top: calc(56px + var(--space-2)); z-index: 12; }
/* The Scan receipt button never covers the end of the page: room for it
 * (its bottom offset, its height and a gap) whenever it shows. */
#app:has(#fab-scan:not([hidden])) #main { padding-bottom: calc(72px + 56px + var(--space-4) + env(safe-area-inset-bottom)); }

/* the demo bar */
#demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
}
#demo-bar select { min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
#demo-note { flex: 1 1 16rem; }

/* the top bar */
#topbar {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: var(--space-2); min-height: 56px; padding: var(--space-1) var(--space-3);
}
#topbar-back { grid-column: 1; justify-self: start; }
#topbar-title {
  grid-column: 2; font-size: var(--text-lg); font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw;
}
#topbar-action { grid-column: 3; justify-self: end; min-width: 44px; justify-content: center; }
#brand {
  grid-column: 1 / span 2; justify-self: start; font-size: var(--text-xl); font-weight: 700;
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
}
#avatar-me { grid-column: 3; justify-self: end; width: 44px; height: 44px; text-decoration: none; }
.back-link {
  /* A block, not a flex box, so a long group name ends in "…" rather than
   * being cut mid-word (text-overflow does not apply to a flex container). */
  display: inline-block; min-height: 44px; line-height: 44px; max-width: 100%;
  padding-right: var(--space-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.back-link::before { content: "‹"; display: inline-block; font-size: 1.6em; line-height: 1; margin-right: var(--space-1); vertical-align: -0.08em; }

/* the tab bar: bottom on a phone, a side rail from 768px */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: var(--space-1); font-size: var(--text-xs); text-decoration: none;
}
.tab-icon { font-size: 1.35rem; line-height: 1; }
.tab-text { white-space: nowrap; }
#tab-groups .tab-icon::before { content: "◉"; }
#tab-activity .tab-icon::before { content: "☰"; }
#tab-friends .tab-icon::before { content: "☺"; }
#tab-settings .tab-icon::before { content: "⚙"; }
.tab-count {
  position: absolute; top: 4px; left: calc(50% + 6px);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; line-height: 1;
}

@media (max-width: 767px) {
  /* Pushed screens take the whole height; the tabs come back on the four roots. */
  #app:not([data-view="groups"]):not([data-view="activity"]):not([data-view="friends"]):not([data-view="settings"]) #tabbar { display: none; }
  #app:not([data-view="groups"]):not([data-view="activity"]):not([data-view="friends"]):not([data-view="settings"]) #main { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
  #app {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "demo demo" "rail top" "rail banner" "rail main";
  }
  #tabbar {
    grid-area: rail; position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3);
  }
  /* The rail's panel and rule: a full-height item in the rail's grid area,
   * under the sticky tabs, so both reach the bottom of the page however
   * short the tab list is (the themes paint it). */
  #app::before { content: ""; grid-area: rail; }
  #app[data-screen="loading"]::before, #app[data-screen="unavailable"]::before, #app[data-screen="error"]::before { display: none; }
  .tab { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); font-size: var(--text-base); border-radius: var(--radius); }
  .tab-count { position: static; margin-left: auto; }
  #main { padding: var(--space-5) var(--space-5) var(--space-8); }
  #app:has(#fab-scan:not([hidden])) #main { padding-bottom: calc(var(--space-5) + 56px + var(--space-5)); }
}
@media (min-width: 1200px) {
  #app { grid-template-columns: 260px minmax(0, 1fr); }
  #main { max-width: 760px; }
}
/* A page with no rail (the server's sign-in-unavailable page): one column
 * at every width, so its card is centred (R2-look #5). */
#app.app-single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "demo" "top" "banner" "main"; }
#app.app-single::before { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #topbar { position: static; }
  .tab { min-height: 48px; flex-direction: row; gap: var(--space-2); }
  #main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  #app:has(#fab-scan:not([hidden])) #main { padding-bottom: calc(60px + 48px + var(--space-4) + env(safe-area-inset-bottom)); }
  #app[data-screen="app"] #unavailable-banner { top: 0; }
}

/* the scan button */
.fab {
  position: fixed; right: var(--space-4); bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 20;
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-5);
  border-radius: var(--radius-full); font-size: var(--text-lg); font-weight: 700; text-decoration: none;
}
.fab-icon::before { content: "▣"; }
@media (min-width: 768px) { .fab { bottom: var(--space-5); right: var(--space-5); } }
@media (orientation: landscape) and (max-height: 500px) { .fab { bottom: calc(60px + env(safe-area-inset-bottom)); min-height: 48px; } }

/* views enter; exactly one is shown at a time */
.view:not([hidden]) { animation: wp-enter var(--duration) var(--ease-out); }
.view-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-1) 0 var(--space-3); }
.view-title { font-size: var(--text-xl); font-weight: 700; }

/* == shared components == */
.card { border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.list { list-style: none; margin: 0; padding: 0; }
.list.card { padding: 0; overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-4);
}
.list-row:has(> .row-link), .list-row:has(> .row-button) { padding: 0; }
.row-link, .row-button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px;
  padding: var(--space-3) var(--space-4); margin: 0; border: 0; background: none; text-align: left; text-decoration: none; font: inherit;
}
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: var(--weight-semibold); }
.row-sub { font-size: var(--text-sm); }
.row-amount { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; max-width: 45%; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.card-row { padding: var(--space-3) var(--space-4); }
.section-label {
  margin: var(--space-5) var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.card > .section-label:first-child { margin-top: 0; }
/* The settled fold: its summary is a section label (same spacing) that opens on a click; the disclosure marker stays the browser's. */
.fold > summary { cursor: pointer; }
.muted { font-size: var(--text-sm); }
.empty { text-align: center; padding: var(--space-5) var(--space-2); }
.empty-card { text-align: center; padding: var(--space-6) var(--space-4); display: grid; gap: var(--space-2); }
/* A discarded receipt opened on Check or Assign: only its card shows (R2-phone #7). */
.view.is-discarded > :not(.empty-card) { display: none; }
.spacer { flex: 1 1 auto; }

.amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.amount-pos, .amount-neg, .amount-zero { font-weight: 700; }
.hero-amount { font-size: clamp(1.6rem, 7.2vw, 2.6rem); line-height: 1.1; font-weight: 800; margin: var(--space-1) 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-card { padding: var(--space-5); }
.hero-card .hero-head, .hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2;
}
.primary { font-weight: 700; }
.danger { font-weight: 600; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); margin: 0;
  border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
#topbar .link-btn { text-decoration: none; font-size: var(--text-lg); padding: 0 var(--space-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 1.5rem; line-height: 1; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.sheet-actions > * { flex: 1 1 10rem; }
.sheet-menu { flex-direction: column; margin-top: 0; }
.sheet-menu > * { flex: 0 0 auto; }

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  padding: 3px; border-radius: var(--radius); margin-bottom: var(--space-4);
}
.seg-btn { min-height: 44px; padding: var(--space-1) var(--space-2); border-radius: calc(var(--radius) - 3px); font-weight: 600; line-height: 1.2; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 4px var(--space-4) 4px 5px; border-radius: var(--radius-full); font-weight: 500; line-height: 1.1;
}
.chip:not(:has(.avatar)) { padding-left: var(--space-4); }
.chip[aria-pressed="true"] { font-weight: 700; }
.chip-text { white-space: nowrap; }
/* Check's tip chips (FEAT-billsplit-8): the label on its own line, the
 * four chips on one row under it. The colours are .chip's. */
#check-tip-chips { align-items: center; }
#check-tip-chips-label { flex-basis: 100%; }
.tip-chip { font-variant-numeric: tabular-nums; }
/* A phone fits You · Sam · Priya · Jordan on one row of chips (the
 * mockup's screen 4): smaller avatars and padding, the 44px height kept. */
@media (max-width: 479px) {
  .chips { gap: 4px; }
  .chip { gap: 5px; padding: 3px 10px 3px 3px; font-size: 0.875rem; }
  .chip:not(:has(.avatar)) { padding-left: var(--space-3); }
  .chip .avatar { width: 22px; height: 22px; font-size: 0.72rem; }
}

.field { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
textarea.field { min-height: 88px; resize: vertical; }
.field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); min-width: 0; }
.field-row > label { font-size: var(--text-sm); font-weight: 600; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
@media (max-width: 379px) { .field-pair { grid-template-columns: minmax(0, 1fr); } }
.amount-input { text-align: right; font-variant-numeric: tabular-nums; }
.errors { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: var(--space-3) 0; font-size: var(--text-sm); }
#unavailable-banner { margin: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-3);
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; line-height: 1.2;
}
.is-busy { pointer-events: none; }
.is-settled { font-weight: inherit; }
.is-selected { font-weight: inherit; }
.is-flagged { font-weight: inherit; }
.is-unread { font-weight: inherit; }

/* people */
.avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full); font-weight: 700; font-size: 1rem; line-height: 1; user-select: none;
}
.avatar-small { width: 32px; height: 32px; font-size: 0.85rem; }
.avatar-large { width: 56px; height: 56px; font-size: 1.35rem; }
.avatar-stack { display: inline-flex; align-items: center; flex: 0 0 auto; padding-right: 8px; }
.avatar-slot { display: block; width: 24px; height: 32px; }
.avatar-slot:last-child { width: 32px; }
.avatar-more { font-size: 0.78rem; }
/* Phones: a smaller, tighter stack so a group's name keeps its line. */
@media (max-width: 479px) {
  .avatar-stack { padding-right: 4px; }
  .avatar-stack .avatar-small { width: 26px; height: 26px; font-size: 0.75rem; }
  .avatar-stack .avatar-slot { width: 18px; height: 26px; }
  .avatar-stack .avatar-slot:last-child { width: 26px; }
}
.member-color-1 { background-color: var(--member-1-bg); color: var(--member-1-fg); }
.member-color-2 { background-color: var(--member-2-bg); color: var(--member-2-fg); }
.member-color-3 { background-color: var(--member-3-bg); color: var(--member-3-fg); }
.member-color-4 { background-color: var(--member-4-bg); color: var(--member-4-fg); }
.member-color-5 { background-color: var(--member-5-bg); color: var(--member-5-fg); }
.member-color-6 { background-color: var(--member-6-bg); color: var(--member-6-fg); }
.member-color-7 { background-color: var(--member-7-bg); color: var(--member-7-fg); }
.member-color-8 { background-color: var(--member-8-bg); color: var(--member-8-fg); }

/* the meter */
.meter { height: 10px; border-radius: var(--radius-full); overflow: hidden; margin: var(--space-3) 0; }
.meter-fill {
  height: 100%; width: 100%; transform-origin: left center; transform: scaleX(var(--meter, 0));
  transition: transform var(--duration) var(--ease-out);
}

/* the sheet */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  animation: wp-fade-in var(--duration-fast) var(--ease-out);
}
.sheet-body {
  width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: wp-sheet-in var(--duration) var(--ease-out);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sheet-title { font-size: var(--text-lg); font-weight: 700; }
.sheet-close { flex: 0 0 auto; }
.sheet-form { display: grid; gap: var(--space-2); }
.sheet-form .sheet-actions { margin-top: var(--space-2); }
@media (min-width: 768px) {
  .sheet { align-items: center; }
  .sheet-body { border-radius: var(--radius-lg); animation-name: wp-dialog-in; }
}

/* the toast */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-weight: 600;
  animation: wp-toast-in var(--duration) var(--ease-out);
}
.toast-info, .toast-success, .toast-error { font-weight: 600; }

/* photos */
.photo-thumb { width: 72px; height: 88px; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; flex: 0 0 auto; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-gone { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-1); font-size: var(--text-xs); height: auto; min-height: 88px; }
.photo-full { display: flex; justify-content: center; }
.photo-full img { max-width: 100%; max-height: 72dvh; display: block; object-fit: contain; }
.rotate-0 { transform: none; }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }
.receipt-thumb { flex: 0 0 auto; width: 44px; height: 52px; border-radius: var(--radius-sm); }

/* == screen: groups == */
#groups-summary-amount { margin: var(--space-2) 0; }
#groups-new { margin-top: var(--space-1); }

/* == screen: activity == */
.activity-row { align-items: flex-start; }
.activity-row > .avatar { margin-top: 2px; }
.activity-text { font-weight: 500; }
.activity-row .badge { margin-left: var(--space-2); padding: 2px var(--space-2); font-size: var(--text-xs); }
#activity-more { width: 100%; }

/* == screen: friends == */
#friends-intro { margin-bottom: var(--space-4); }

/* == screen: settings == */
.settings-card { display: grid; gap: var(--space-2); }
#settings-taxtip { margin-bottom: 0; }

/* == screen: scan == */
.scan-card { display: grid; gap: var(--space-3); }
.scan-choose { display: grid; gap: var(--space-3); }
.scan-choose .button { min-height: 56px; font-size: var(--text-lg); }
.scan-progress { display: grid; gap: var(--space-3); justify-items: stretch; }
.scan-preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius); }
.progress-track { height: 6px; border-radius: var(--radius-full); overflow: hidden; }
.progress-bar { height: 100%; width: 100%; }

/* == screen: check == */
.receipt-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: start; }
.receipt-fields { display: contents; }
.receipt-fields > .field-row { grid-column: 2; min-width: 0; }
.receipt-fields > .field-pair { grid-column: 1 / -1; }
.receipt-fields .field-row:last-child { margin-bottom: 0; }
.photo-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.line-row .row-title { font-weight: 700; }
.flag-text::before { content: "▲ "; }
.totals-card { display: grid; gap: var(--space-1); }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
.total-row .field { width: 9em; flex: 0 0 auto; }
.total-final { font-weight: 700; font-size: var(--text-lg); margin-top: var(--space-2); padding-top: var(--space-2); }
#check-badge { justify-self: start; margin-top: var(--space-2); }
#check-add-line { margin: var(--space-1) 0 var(--space-4); }

/* == screen: assign == */
.assign-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.assign-line .chips { margin-bottom: var(--space-1); }
.meter-card { display: block; }
/* The meter, and why Done waits, stay in view while lines are assigned
   (R1-phone #27): pinned to the bottom of the viewport, portrait and
   landscape. On a phone the tab bar is hidden on this screen; from 768px it
   is the side rail, so the bottom is free there too. */
#assign-meter-card {
  position: sticky; bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); z-index: 5;
}
@media (orientation: landscape) and (max-height: 500px) {
  #assign-meter-card { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  #assign-meter-card .meter { margin: var(--space-1) 0; }
}
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.line-toggle { gap: var(--space-3); }
.check-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.line-toggle[aria-pressed="true"] .check-mark::before { content: "✓"; }
#assign-person-chips { margin-top: 0; margin-bottom: var(--space-3); }
#assign-taxmode { margin: var(--space-3) 0 var(--space-2); }
@media (max-width: 479px) { .assign-line { padding-left: var(--space-3); padding-right: var(--space-3); } }

/* == screen: split == */
.share-bar { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-4); }
.share-seg { flex: var(--share, 1) 1 0; min-width: 4px; }
#split-total { margin: var(--space-2) 0 0; }
#split-edited { margin: 0 var(--space-1) var(--space-2); }
#split-note { margin: var(--space-3) var(--space-1); }
#split-delete { margin-top: var(--space-4); }
/* the Share sheet: one row per guest on the expense */
.share-list { margin-top: var(--space-2); }
.share-row { align-items: flex-start; padding-left: 0; padding-right: 0; }
.share-url { margin-top: var(--space-2); font-size: var(--text-sm); }
.share-send, .share-renew { flex: 1 1 10rem; }

/* == screen: group == */
#group-settle { width: 100%; margin-top: var(--space-2); min-height: 52px; }
#group-add-expense { margin-bottom: var(--space-3); }
.member-options { flex: 0 0 auto; }
.member-claim { margin-top: var(--space-1); font-weight: 600; }
.group-admin { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
#group-add-member { width: 100%; }
/* The spending card's rows sit in the card's own padding. */
.spend-row > .row-link { padding-left: 0; padding-right: 0; }
.spend-card .section-label { margin-left: 0; margin-right: 0; }

/* == screen: settle == */
.plan-row .row-button { gap: var(--space-3); }
.plan-people { display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.plan-arrow { padding: 0 2px; }
.method-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.method {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 64px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); text-align: left;
}
.method-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; }
#settle-go { width: 100%; min-height: 52px; }
#settle-note { text-align: center; margin: var(--space-3) 0; }
.pay-confirm, .pay-reject { flex: 1 1 8rem; }
.pay-delete { align-self: flex-start; }

/* == screen: expense-form == */
.form-card { display: grid; gap: var(--space-1); }
.member-pick { padding: var(--space-1) 0; min-height: 52px; }
.weight-input { width: 6em; margin-left: auto; text-align: right; }
#ef-preview { margin: var(--space-2) 0; }
#ef-kind { margin-top: var(--space-2); }

/* == screen: group-form == */
.guest-row { display: grid; gap: 0; padding: var(--space-3) 0; }

/* == screen: guest == */
.guest-main { width: 100%; max-width: 640px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); }
#guest-app { min-height: calc(100dvh - var(--wp-site-nav-h, 0px)); }
.guest-hero { text-align: center; display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); }
.guest-hero .hero-amount { font-size: clamp(2rem, 10vw, 2.8rem); }
.guest-section { margin-top: var(--space-2); }
.guest-expense { scroll-margin-top: var(--space-4); }
.guest-expense .list-row { padding-left: 0; padding-right: 0; }
.guest-claim { text-align: center; margin: var(--space-5) 0; font-size: var(--text-base); }
.guest-page .toast { bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
#guest-app[data-screen="loading"] #guest-balance { display: none; }