/* Nook app styles. References tokens from tokens.css only (STYLE.md §8). Mobile-first,
   bottom-anchored quick-add, 48px touch targets, dark mode inherited from tokens. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}

#screen { min-height: 100vh; min-height: 100dvh; }
.view { min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }

.muted { color: var(--text-muted); }

/* ---------- buttons & inputs ---------- */

.btn {
  font: inherit;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--surface-alt);
  color: var(--text);
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.btn-ghost { background: transparent; min-height: 2.5rem; padding: 0 var(--space-2); }
.btn-secondary { background: var(--surface); border-color: var(--border); width: 100%; }
.btn:disabled { opacity: 0.6; cursor: default; }

.alt-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.alt-methods:empty { display: none; }

.link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: var(--space-1);
  text-decoration: underline;
}

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  font: inherit;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  margin: var(--space-1) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}
label { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- auth / unlock ---------- */

#view-auth, #view-unlock { display: grid; place-items: center; padding: var(--space-4); }
.card {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-1);
  color: var(--accent);
  text-align: center;
}
.auth-logo { display: block; margin: 0 auto var(--space-2); }
.auth-card .muted { text-align: center; }
.auth-card form { display: flex; flex-direction: column; }
.auth-card .btn-primary { margin-top: var(--space-2); }
.switch { text-align: center; margin: var(--space-4) 0 0; }
.fineprint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-4); }
.hint {
  color: var(--danger);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

/* ---------- app bar ---------- */

.appbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
.appbar-brand { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.appbar-status { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.appbar-status .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-actions { display: flex; gap: var(--space-1); }

.dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: var(--radius-full);
  background: var(--success); flex: none;
}
.dot-offline { background: var(--warning); }

/* ---------- list tabs ---------- */

.tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
  scrollbar-width: thin;
}
.tab {
  font: inherit;
  white-space: nowrap;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.tab-active { background: var(--accent); color: var(--accent-contrast); border-color: transparent; font-weight: 600; }
.tab-add { font-size: var(--text-lg); line-height: 1; }

/* ---------- list tools (search + reorder) ---------- */

.list-tools {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: 0 var(--space-4) var(--space-2);
}
.list-tools input[type="search"] { flex: 1; margin: 0; min-height: 2.5rem; }

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

.ios-hint {
  position: fixed;
  left: 50%; bottom: 7.5rem;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  z-index: 6;
}

/* ---------- items ---------- */

.items { list-style: none; margin: 0; padding: 0 var(--space-3) 7rem; }
.item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  touch-action: pan-y; /* horizontal swipes are ours; vertical scrolling stays native */
  background: var(--bg);
}
.item.sortable-ghost { opacity: 0.4; }
.grip {
  width: 0.875rem;
  color: var(--ash);
  flex: none;
  cursor: grab;
  display: inline-flex;
  min-height: var(--tap-min);
  align-items: center;
}
.grip svg { width: 0.5rem; height: 1.125rem; fill: currentColor; }
.move-btn {
  font: inherit;
  min-width: var(--tap-min); min-height: var(--tap-min);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.check {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--ash);
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.check-on { background: var(--success); border-color: var(--success); }
.check-on::after {
  content: "✓";
  color: #fff;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-name { min-width: 0; overflow-wrap: anywhere; }
.item-open {
  font: inherit;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 0;
  cursor: pointer;
  min-height: 1.5rem;
}
.item-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.125rem; }
.item-done { text-decoration: line-through; color: var(--text-muted); }

.cat-group { margin: 0 0 var(--space-2); }
.cat-group > summary {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}
.item-group { list-style: none; margin: 0; padding: 0; }

textarea {
  width: 100%;
  font: inherit;
  padding: var(--space-3);
  margin: var(--space-1) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.assignees { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-3); }
.assignees legend { font-size: var(--text-sm); color: var(--text-muted); padding: 0 var(--space-1); }
.assignee-option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.assignee-option input { width: 1.25rem; height: 1.25rem; }

.comments { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.comments:empty { display: none; }
.comments li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.comments li:last-child { border-bottom: none; }
.comment-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.comment-form input { margin: 0; }

.recovery-reveal {
  background: var(--surface-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.recovery-reveal code { overflow-wrap: anywhere; font-size: var(--text-sm); }
.hint-warn { color: var(--warning); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
#form-password, #form-item-detail { display: flex; flex-direction: column; }
.badge-pending { color: var(--warning); font-size: var(--text-xl); line-height: 0; }
.item-del {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
}
.empty { text-align: center; padding: var(--space-12) var(--space-4); }

/* ---------- quick add (bottom, thumb zone) ---------- */

.quick-add {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.quick-add input { margin: 0; }
.quick-add .btn { flex: none; }

/* ---------- household panel ---------- */

.panel { max-width: 40rem; margin: 0 auto; padding: var(--space-4); }
.panel-heading { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.roster { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.roster:empty { display: none; }
.roster li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.roster li:last-child { border-bottom: none; }
.roster .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.roster .who .sub { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.role-badge { font-size: var(--text-xs); font-weight: 600; color: var(--accent); }
.pending-badge { font-size: var(--text-xs); font-weight: 600; color: var(--warning); }
.invite-form { display: flex; flex-direction: column; margin-top: var(--space-6); }
.invite-form .btn { margin-top: var(--space-1); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  transform: translateX(-50%);
  max-width: 90vw;
  background: var(--ink);
  color: var(--chalk);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  z-index: 5;
}

@media (min-width: 40em) {
  .items { padding-left: var(--space-6); padding-right: var(--space-6); }
  .quick-add { left: 50%; transform: translateX(-50%); max-width: 40rem; }
}

/* ============================================================================
   Phase 5: mockup-parity shell (mockups/index.html is the visual reference)
   ========================================================================== */

/* App bar: two-tone arch logomark + lowercase wordmark + member avatars */
.brandmark { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brandtext .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text);
}
.brandtext .household {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appbar .spacer { flex: 1; }

.avatars { display: flex; }
.avatars .av { margin-left: -0.4375rem; border: 2px solid var(--bg); }
.av {
  width: 1.875rem; height: 1.875rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: var(--text-xs); flex: none;
}
.av-persimmon { background: var(--persimmon); }
.av-jade { background: var(--jade); }
.av-cobalt { background: var(--cobalt); }
.av-orchid { background: var(--orchid); }
.av-amber { background: var(--amber); }

/* Panes + titles */
.pane { padding: 0 0 10rem; }
.screen-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  letter-spacing: -0.02em;
  margin: var(--space-2) var(--gutter) var(--space-3);
}
.pane .card { margin: 0 var(--gutter) var(--space-2); padding: var(--space-1) var(--space-3); }
.pane .stack { margin: var(--space-3) var(--gutter); display: flex; flex-direction: column; gap: var(--space-2); }

/* Eyebrow section markers with the small arch (brand §5) */
.eyebrow {
  display: flex; align-items: center; gap: 0.4375rem;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-4) var(--gutter) var(--space-2);
}
.eyebrow .arch { color: var(--persimmon); flex: none; }
.eyebrow-static::before {
  content: "";
  width: 0.75rem; height: 0.5rem; flex: none;
  border: 2px solid var(--persimmon);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Arch-top hero cards (brand §5: spend the boldness here) */
.arch-card { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md); }
.hero { color: #fff; padding: var(--space-4); margin: 0 var(--gutter) var(--space-2); }
.hero-jade { background: linear-gradient(155deg, var(--jade), color-mix(in srgb, var(--jade) 78%, var(--cobalt))); }
.hero-persimmon { background: linear-gradient(155deg, var(--persimmon), color-mix(in srgb, var(--persimmon) 78%, var(--orchid))); }
.hero-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.hero-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-title);
  letter-spacing: -0.02em;
  margin: 0.125rem 0 0.25rem;
  overflow-wrap: anywhere;
}
.hero-sub { font-size: var(--text-sm); opacity: 0.95; }
.num { font-variant-numeric: tabular-nums; }

/* Segmented control */
.seg {
  display: flex; gap: 0.25rem;
  background: var(--surface-alt);
  padding: 0.25rem;
  border-radius: var(--radius-full);
  margin: var(--space-2) var(--gutter) var(--space-2);
}
.seg button {
  flex: 1; font: inherit; font-size: var(--text-sm); font-weight: 600;
  border: none; background: transparent; color: var(--text-muted);
  padding: var(--space-2); border-radius: var(--radius-full); cursor: pointer;
  min-height: 2.5rem;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Money / chores / contact rows + category squares + chips */
.moneyline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--border); }
.moneyline:last-child { border-bottom: none; }
.cat {
  width: 2.375rem; height: 2.375rem; border-radius: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-size: 1.0625rem; color: #fff;
}
.cat-persimmon { background: var(--persimmon); }
.cat-jade { background: var(--jade); }
.cat-cobalt { background: var(--cobalt); }
.cat-amber { background: var(--amber); }
.cat-orchid { background: var(--orchid); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.row-title { font-size: var(--text-base); font-weight: 500; overflow-wrap: anywhere; }
.row-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.row-right { text-align: right; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.row-delta { font-size: var(--text-xs); font-weight: 600; }
.pos { color: var(--success); }
.neg { color: var(--danger); }

.chip { font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.5625rem; border-radius: var(--radius-full); display: inline-flex; align-items: center; }
.chip-jade { background: color-mix(in srgb, var(--jade) 18%, var(--surface)); color: var(--jade); }
.chip-amber { background: color-mix(in srgb, var(--amber) 24%, var(--surface)); color: #7a5200; }
:root[data-theme="dark"] .chip-amber { color: var(--amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-amber { color: var(--amber); } }
.chip-soft { background: var(--surface-alt); color: var(--text-muted); }

.linkish { font: inherit; background: none; border: none; color: var(--cobalt); cursor: pointer; font-size: var(--text-sm); font-weight: 600; min-height: var(--tap-min); padding: 0 var(--space-1); }
.btn-compact { width: auto; min-height: 2.5rem; padding: 0 var(--space-3); font-size: var(--text-sm); }
.split-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.split-row span { flex: 1; }
.split-row input { width: 7rem; margin: 0; }
select {
  font: inherit; font-size: 1rem;
  min-height: var(--tap); padding: 0 var(--space-3);
  margin: var(--space-1) 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  width: 100%;
}
input[type="file"] { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); }
input[type="number"] { width: 100%; font: inherit; font-size: 1rem; min-height: var(--tap); padding: 0 var(--space-3); margin: var(--space-1) 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); }

/* More tab: menu + privacy callout */
.menu { padding: 0 var(--space-2); }
.menu-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: left;
  padding: var(--space-3) var(--space-1); cursor: pointer; min-height: 3.5rem;
}
.menu-row:last-child { border-bottom: none; }
.chevron { color: var(--text-muted); font-size: var(--text-lg); }
.privacy {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: color-mix(in srgb, var(--jade) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--jade) 30%, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  margin: var(--space-3) var(--gutter) 0;
}
.privacy svg { color: var(--jade); flex: none; margin-top: 0.125rem; }
.btn-danger-text { font: inherit; font-weight: 600; background: none; border: none; color: var(--danger); cursor: pointer; min-height: var(--tap-min); }

/* Floating pill tab bar (mockup) */
.tabbar {
  position: fixed;
  left: var(--space-2); right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  height: 4rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 1.625rem;
  display: flex;
  padding: 0.375rem;
  z-index: 4;
  max-width: 40rem;
  margin: 0 auto;
}
.tabbar .tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem;
  color: var(--text-muted); font-size: 0.6875rem; font-weight: 600;
  border-radius: 1.25rem; font-family: var(--font-body);
}
.tabbar .tab svg { width: 1.375rem; height: 1.375rem; }
.tabbar .tab.tab-on { color: var(--persimmon); background: color-mix(in srgb, var(--persimmon) 12%, transparent); }

/* Quick-add and toasts float above the tab bar */
.quick-add { bottom: calc(5rem + env(safe-area-inset-bottom)); border-radius: var(--radius-lg); }
.toast { bottom: calc(6.25rem + env(safe-area-inset-bottom)); }
.ios-hint { bottom: calc(9.75rem + env(safe-area-inset-bottom)); }

/* ============================================================================
   Liquid glass refresh: translucent layered surfaces with specular highlights
   over an ambient brand tint. The brand itself (colour, type, the arch) is
   unchanged; this is the surface MATERIAL (STYLE.md §8.4). The Lists tab gets
   the full redesign: grouped glass cards, springy checks, capsule tools.
   ========================================================================== */

/* Ambient backdrop the glass refracts */
html, body {
  background:
    radial-gradient(1100px 520px at 12% -4%, color-mix(in srgb, var(--persimmon) 14%, transparent), transparent 60%),
    radial-gradient(900px 520px at 108% 8%, color-mix(in srgb, var(--jade) 12%, transparent), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* The material itself */
.card, .roster, .comments, .item-group, .cat-group, .recovery-reveal {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
.privacy {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* Glass app bar + tab bar (concentric radii, floating) */
.appbar {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}
.tabbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 1.75rem;
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
.tabbar .tab { transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease), transform var(--motion-fast) var(--ease); }
.tabbar .tab:active { transform: scale(0.94); }
.tabbar .tab.tab-on { background: color-mix(in srgb, var(--persimmon) 16%, transparent); }

/* Quick-add: floating glass capsule */
.quick-add {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  padding: var(--space-2);
}
.quick-add input { background: transparent; border: none; }
.quick-add input:focus-visible { outline: none; }
.quick-add:focus-within { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--glass-border)); }
.quick-add .btn { border-radius: var(--radius-full); min-height: var(--tap-min); }

/* Segmented control + hero sheen */
.seg {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.seg button { transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease); }
.seg button.on { background: var(--glass-bg-strong); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 1px 4px rgba(0,0,0,0.10); }
.hero { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), var(--glass-shadow); }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,0.22), transparent 38%);
  pointer-events: none;
}

/* ---------- Lists redesign ---------- */

/* List pills: glass, persimmon when active */
.ltab {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  transition: transform var(--motion-fast) var(--ease), background var(--motion-base) var(--ease);
}
.ltab:active { transform: scale(0.95); }
.ltab.on { background: var(--accent); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.tabs { padding: var(--space-1) var(--gutter) var(--space-3); }

/* Search + reorder as capsules */
.list-tools { padding: 0 var(--gutter) var(--space-3); }
.list-tools input[type="search"] {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
}
#btn-reorder {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
}
#btn-reorder[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }

/* Grouped glass cards instead of edge-to-edge rows */
.items { padding: 0 var(--gutter) 11rem; }
.item-group { overflow: hidden; margin: 0 0 var(--space-3); padding: 0 var(--space-2); }
.item {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  padding: var(--space-3) var(--space-2);
  transition: background var(--motion-fast) var(--ease);
}
.item:last-child { border-bottom: none; }
.item:active { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Springy check */
.check {
  width: 1.625rem; height: 1.625rem;
  border-width: 2px;
  transition: background var(--motion-base) var(--ease-spring), border-color var(--motion-base) var(--ease), transform var(--motion-base) var(--ease-spring);
}
.check:active { transform: scale(0.85); }
.check-on::after { font-size: 0.9375rem; }

/* Delete becomes a quiet circular dismiss */
.item .item-del {
  width: 2.25rem; height: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: var(--text-base);
  padding: 0;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.item .item-del:hover, .item .item-del:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* Category groups: the details element IS the glass card */
.cat-group { overflow: hidden; margin: 0 0 var(--space-3); padding: 0 var(--space-2); }
.cat-group .item-group {
  background: none; border: none; box-shadow: none; margin: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}
.cat-group > summary { min-height: var(--tap); gap: var(--space-2); }
.cat-group > summary::before {
  content: "";
  width: 0.75rem; height: 0.5rem; flex: none;
  border: 2px solid var(--persimmon);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
}
.cat-group > summary::marker { content: ""; }
.cat-group > summary::-webkit-details-marker { display: none; }

/* Empty states sit in their own soft glass card */
.empty {
  margin: 0 var(--gutter) var(--space-3);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-4);
}

/* Money/chore/menu rows inherit the hairline look */
.moneyline { border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.menu-row { border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.menu-row:last-child, .moneyline:last-child { border-bottom: none; }

/* Auth cards go glass too */
.auth-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

/* Dark mode: dimmer specular, hairline borders */
:root[data-theme="dark"] { --glass-highlight: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass-highlight: rgba(255,255,255,0.10); --glass-border: rgba(255,255,255,0.08); }
}

/* Flex children must be allowed to shrink below their intrinsic min-content width, or
   large user text sizes force horizontal overflow on narrow phones (320px + 125% text). */
.quick-add input,
.list-tools input[type="search"],
.comment-form input,
.invite-form input,
.tabbar .tab {
  min-width: 0;
}
.tabbar .tab { overflow: hidden; }

/* Accessibility: honour reduced transparency with solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .card, .roster, .comments, .item-group, .cat-group, .appbar, .tabbar, .quick-add, .seg,
  .auth-card, .empty, .list-tools input[type="search"], #btn-reorder, .ltab {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}