/* --- MANUAL THEME OVERRIDE (data-theme) — added for in-app Light/Dark/System toggle. OS dark rules converted to html[data-theme="dark"] scope. --- */
html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
/* ---------- tokens ---------- */
/* [hidden] must always win, even against display:grid/flex/block set on a
   class. Without this, a hidden fixed overlay keeps capturing taps. */
[hidden] { display: none !important; }

:root {
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Solid Clean Corner Radii */
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-full: 9999px;

  /* Spacing Scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --pad: 20px;

  /* Typography Scale */
  --fs-large-title: 32px;   /* screen titles ("Home") */
  --fs-title: 24px;         /* section headers */
  --fs-title3: 20px;        /* sheet headings */
  --fs-headline: 16px;      /* card titles, list rows */
  --fs-body: 15px;          /* body text, inputs */
  --fs-subhead: 14px;       /* secondary labels */
  --fs-footnote: 13px;      /* captions, metadata */
  --fs-caption: 12px;       /* smallest permitted */

  /* Solid Clean Brand Palette */
  --accent: #5b4fe0;        /* Electric Indigo */
  --primary: #5b4fe0;
  --primary-hover: #483cc4;
  --danger: #ba1a1a;        /* Error Red */
  --warn: #f59e0b;          /* Warning Amber */
  --good: #006d37;          /* Success Green */
  --good-bg: #6bfe9c;

  --bg: #f8f9fe;            /* Soft off-white canvas */
  --surface: #ffffff;
  --text: #191c1f;
  --text-2: #474554;
  --text-3: #777586;
  --hair: #e1e2e7;
  --row-bg: #f2f3f8;
  --track: #e1e2e7;

  --glass-blur: 16px;
  --glass-sat: 180%;
  --glass-bg: rgba(248, 249, 254, 0.85);
  --glass-brd: rgba(225, 226, 231, 0.7);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --card-surface: #ffffff;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* b205 — THE LIGHT PALETTE HAD NEVER BEEN MIGRATED. The dark half was moved to
   html[data-theme="dark"] for the in-app Light/Dark/System picker; this half
   was left as an OS media query. applyTheme() always writes an explicit
   data-theme, so a user on a dark device who chooses LIGHT matched neither
   block and fell through to the bare :root defaults — --text #191c1f instead
   of #000000, and a 20px drop shadow where a 0.5px hairline belongs. Two people
   who both chose Light saw different chrome depending on their OS.

   Both selectors now carry it: the media query for "System" on a light device,
   and the explicit stamp for anyone who picked Light. */
html[data-theme="light"] {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --text: #000000;
  --text-2: rgba(60,60,67,.6);
  --text-3: rgba(60,60,67,.3);
  --glass-bg: rgba(249,249,251,.8);
  --glass-brd: rgba(0,0,0,.06);
  --glass-shadow: 0 -0.5px 0 rgba(0,0,0,.1);
  --row-bg: rgba(120,120,128,.08);
  --hair: rgba(60,60,67,.18);
  --track: rgba(120,120,128,.16);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f2f7;            /* systemGroupedBackground */
    --surface: #ffffff;
    --text: #000000;
    --text-2: rgba(60,60,67,.6);    /* secondaryLabel */
    --text-3: rgba(60,60,67,.3);    /* tertiaryLabel */
    --glass-bg: rgba(249,249,251,.8);
    --glass-brd: rgba(0,0,0,.06);
    --glass-shadow: 0 -0.5px 0 rgba(0,0,0,.1);
    --row-bg: rgba(120,120,128,.08);   /* systemFill-ish */
    --hair: rgba(60,60,67,.18);        /* separator */
    --track: rgba(120,120,128,.16);
  }
}


  html[data-theme="dark"]{
    --bg: #000000;              /* true black grouped background */
    --surface: #1c1c1e;        /* secondarySystemGroupedBackground */
    --text: #ffffff;
    --text-2: rgba(235,235,245,.6);
    --text-3: rgba(235,235,245,.3);
    --accent: #0a84ff;         /* systemBlue (dark) */
    --danger: #ff453a;
    --warn: #ff9f0a;
    --good: #30d158;
    --glass-bg: rgba(30,30,32,.8);
    --card-surface: #1c1c1e;
    --card-shadow: 0 0 0 0.5px rgba(255,255,255,.04);
    --glass-brd: rgba(255,255,255,.1);
    --glass-shadow: 0 -0.5px 0 rgba(255,255,255,.1);
    --row-bg: rgba(120,120,128,.24);
    --hair: rgba(84,84,88,.65);
    --track: rgba(120,120,128,.32);
  }


/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* Phase 2 (responsive fix): the document-level overscroll lock forced
     2-finger / janky single-finger scrolling on Android foldables (Z Fold).
     It is now scoped to sheets/modals only (see .sheet / .side-panel), so the
     page scrolls naturally with one finger. */
  overscroll-behavior-y: auto;
}
*, *::before, *::after { box-sizing: border-box; }

body {
  /* Phase 1: honour left/right safe-area insets (notched landscape / camera
     cutouts).  Phase 2: <body> is the single natural scroller — allow vertical
     panning explicitly. */
  padding: 0 max(var(--pad), env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  touch-action: pan-y;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -.022em; margin: 0; }

button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }

/* ---------- background mesh ---------- */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  /* Static — no animation. Constantly animating three large blurred gradients
     repaints the whole screen every frame and is the main cause of lag on a
     phone. The look is kept; only the motion is removed. */
}
.b1 { width: 62vw; height: 62vw; background: #0a84ff; top: -14vw; left: -18vw; }
.b2 { width: 54vw; height: 54vw; background: #ff375f; top: 32vh; right: -20vw; }
.b3 { width: 50vw; height: 50vw; background: #32d74b; bottom: -16vh; left: 8vw; }

@media (prefers-color-scheme: light) { .blob { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- glass ---------- */
.sheet.glass {
  background: var(--card-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}

.glass-sm {
  background: var(--row-bg);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: .5px solid var(--glass-brd);
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(var(--pad) * -1);
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.topbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Colour carry: the list's hue follows it from the grid card into its own
   screen. A soft tint, not the saturated fill — the title and progress row are
   body-weight text, and body text never sits on a saturated fill. The hue is
   set on #view-list by renderShop. */
#view-list .topbar {
  background: hsl(var(--hue, 210) 62% 96%);
  border-bottom: .5px solid hsl(var(--hue, 210) 40% 86%);
}
#view-list .topbar .bar > span { background: hsl(var(--hue, 210) 66% 46%); }


  html[data-theme="dark"] #view-list .topbar{
    background: hsl(var(--hue, 210) 32% 14%);
    border-bottom-color: hsl(var(--hue, 210) 28% 26%);
  }
  html[data-theme="dark"] #view-list .topbar .bar > span{ background: hsl(var(--hue, 210) 62% 58%); }


#trip-name { font-size: var(--fs-title); line-height: 1.15; }
.sub { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }

.countdown {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.countdown:empty { display: none; }


/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.login-title {
  font-size: 30px;
  letter-spacing: -.03em;
  text-align: center;
  margin-bottom: 28px;
}

.who-grid { display: grid; gap: 12px; }

.who-btn {
  --hue: 210;
  --c: hsl(var(--hue) 85% 52%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  text-align: left;
  transition: transform .3s var(--ease-spring);
  animation: rise .45s var(--ease-out) backwards;
}
.who-btn:active { transform: scale(.97); }
 html[data-theme="dark"] .who-btn{ --c: hsl(var(--hue) 90% 68%); } 

.who-face {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(var(--hue) 85% 52% / .18);
  color: var(--c);
  font-size: 17px; font-weight: 700;
}
.who-name { flex: 1; font-size: var(--fs-headline); font-weight: 600; letter-spacing: -.01em; }

.code-wrap { animation: rise .35s var(--ease-out); }
.code-for { text-align: center; font-size: 15px; color: var(--text-2); margin: 0 0 14px; }
#code-input, #set-code, #set-code2 {
  width: 100%;
  padding: 14px;
  border-radius: var(--r-sm);
  border: .5px solid var(--glass-brd);
  background: var(--row-bg);
  font-size: 22px;
  text-align: center;
  letter-spacing: .3em;
  -webkit-appearance: none;
  appearance: none;
}
#code-input:focus, #set-code:focus, #set-code2:focus { outline: none; border-color: var(--accent); }

.code-err {
  min-height: 18px;
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  text-align: center;
}

/* ---------- avatar ---------- */
.home-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.avatar {
  --hue: 210;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(var(--hue) 85% 52% / .2);
  color: hsl(var(--hue) 85% 45%);
  border: .5px solid var(--glass-brd);
  font-size: 15px; font-weight: 700;
  transition: transform .3s var(--ease-spring);
}
.avatar:active { transform: scale(.9); }
 html[data-theme="dark"] .avatar{ color: hsl(var(--hue) 90% 70%); } 

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  --hue: 210;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.2px solid var(--track);
  background: transparent;
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: all .22s var(--ease-out);
}
.chip.on {
  border-color: hsl(var(--hue) 85% 52%);
  background: hsl(var(--hue) 85% 52% / .16);
  color: hsl(var(--hue) 85% 45%);
}
 html[data-theme="dark"] .chip.on{ color: hsl(var(--hue) 90% 70%); } 

.chip-note { width: 100%; font-size: 12px; color: var(--text-3); margin-top: 7px; }

/* Collapsible "more shops" in the shop filter */
.more-shops-btn { color: var(--accent); border-color: var(--track); }
.more-shops { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: .5px solid var(--hair); }
.more-shops[hidden] { display: none; }

/* Shop-item shop picker: chosen chips + scrollable dropdown of the rest */
.shop-chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-more-toggle { margin-top: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--track); border-radius: 10px;
  background: var(--card-surface, #fff); color: var(--accent); font-weight: 600;
  font-size: 14px; cursor: pointer; }
.shop-more-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 180px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--bg, #f7f7f9); }
.shop-more-list[hidden] { display: none; }

/* UK quick-add supermarkets dropdown (Settings → Shops) */
.uk-more-toggle { margin-top: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--track); border-radius: 10px;
  background: var(--card-surface, #fff); color: var(--accent); font-weight: 600;
  font-size: 14px; cursor: pointer; }
.uk-more-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 180px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px; border: 1px solid var(--hair); border-radius: 10px; }
.uk-more-list[hidden] { display: none; }

/* Soft fade when the location sheet closes back to Settings */
#sheet-location.sheet-fading { opacity: 0; transition: opacity .22s ease; pointer-events: none; }

/* Location permission denied / failure panel */
.loc-denied { margin-top: 14px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--warn, #ff9500); background: rgba(255,149,0,.08); }
.loc-denied[hidden] { display: none; }
.loc-denied-title { margin: 0 0 6px; font-weight: 700; font-size: 15px; color: var(--text); }
.loc-denied-body { margin: 0 0 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.loc-denied-how { margin: 0 0 12px; font-size: 13px; color: var(--text); line-height: 1.5; }

/* ---------- shop/brand tagging (v31) ---------- */
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
/* Shop chips default to a neutral blue accent (no per-item hue). */
.shop-chips .chip { --hue: 210; }

.field-hint { font-weight: 400; color: var(--text-3); font-size: 12px; }

/* Settings → Shops: manage rows + add box */
.shop-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--track);
}
.shop-manage-row .nm { flex: 1; font-size: 15px; font-weight: 600; }
.shop-manage-row .loc-badge {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: #E6F1FB; padding: 2px 8px; border-radius: 10px; vertical-align: middle;
}
 html[data-theme="dark"] .shop-manage-row .loc-badge{ background: rgba(55,138,221,.20); } 
.shop-loc.active { color: var(--accent); }
.shop-del {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--text-3);
  border-radius: 8px;
}
.shop-del:active { background: var(--track); color: var(--danger, #e11); }

.shop-add-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.shop-add-row input {
  flex: 1;
  padding: 11px 13px;
  font-size: 16px;
  border: 1px solid var(--track);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text);
}
.shop-add-row .btn { flex: none; }

/* Filter sheet: by-shop section */
#filter-shop-wrap { margin-top: 6px; }
#filter-shop-wrap h3 { margin-bottom: 8px; }

/* Bug fix (Aug 2025): render the by-shop and by-category chip rows as their
   own single-line horizontal scrollers. This replaces the old "+N more"
   collapse pattern with a native, thumb-friendly swipe interaction that
   scales to any number of shops or categories without wrapping into a
   cramped wall of chips. Fades on the right edge hint that more is off-screen. */
#filter-shop-wrap,
#filter-cat-wrap {
  padding: 8px 10px 10px;
  margin: 8px 0;
  background: rgba(60, 60, 67, .04);
  border-radius: 14px;
  border: 1px solid rgba(60, 60, 67, .06);
}
#filter-shop-wrap h3,
#filter-cat-wrap h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: hsl(var(--accent-hue, 250) 65% 45%);
}
#filter-shop-chips,
#filter-cat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
}
#filter-shop-chips::-webkit-scrollbar,
#filter-cat-chips::-webkit-scrollbar { display: none; }
#filter-shop-chips .chip,
#filter-cat-chips .chip {
  flex: none;
  scroll-snap-align: start;
  white-space: nowrap;
}

  html[data-theme="dark"] #filter-shop-wrap,
  html[data-theme="dark"] #filter-cat-wrap{
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
  }


/* ---------- adhoc / recipe mode (v35) ---------- */
#adhoc-fields textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid var(--track);
  border-radius: 12px;
  background: var(--card, #fff);
  color: var(--text);
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
#adhoc-count { margin: 6px 2px 0; font-weight: 600; }

/* ---------- side panel (v37) ---------- */
.panel-scrim {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / .4);
  opacity: 0;
  z-index: 900;
  transition: opacity .28s var(--ease-out);
}
.panel-scrim.show { opacity: 1; }
/* #6 — unified sub-menu: the list options open as a bottom sheet (like every
   other menu) instead of a side drawer. Same element/ids, restyled. */
.side-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: 88vh; max-height: 88dvh;
  background: var(--card-surface, #fff);
  z-index: 901;
  transform: translateY(100%);
  transition: transform .32s var(--ease-spring);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -12px 40px rgb(0 0 0 / .18);
  border-radius: 22px 22px 0 0;
  padding: 8px 0 max(env(safe-area-inset-bottom), 20px);
  overflow-y: auto;
}
.side-panel::before {
  content: ""; width: 38px; height: 5px; border-radius: 3px;
  background: var(--text-3); opacity: .5; margin: 8px auto 4px; flex: none;
}
.side-panel.open { transform: translateY(0); }
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 14px;
}
.panel-head h2 { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
/* Rows are grouped into rounded cards (iOS Settings style). */
.panel-nav { display: flex; flex-direction: column; padding: 0 16px; }
.panel-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: none;
  background: var(--row-bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  transition: background .15s;
}
/* Round the group: first/last items in a run get rounded corners, and a hair
   divider separates them. The separators (.panel-sep) break the runs. */
.panel-nav > .panel-item + .panel-item { border-top: .5px solid var(--hair); }
.panel-nav > .panel-item:first-child,
.panel-sep + .panel-item { border-radius: 14px 14px 0 0; }
.panel-nav > .panel-item:last-child,
.panel-item:has(+ .panel-sep) { border-radius: 0 0 14px 14px; }
/* A lone item between separators is fully rounded. */
.panel-sep + .panel-item:has(+ .panel-sep) { border-radius: 14px; }
.panel-item:active { filter: brightness(.94); }
.panel-item.danger { color: var(--danger); }
.panel-item svg { flex: none; width: 20px; height: 20px; opacity: .85; }
.panel-sep { height: 14px; }
.panel-field { padding: 14px 16px; background: var(--row-bg); }
.panel-field:first-of-type { border-radius: 14px 14px 0 0; }
.panel-field + .panel-field { border-top: .5px solid var(--hair); border-radius: 0; }
.panel-field:last-of-type { border-radius: 0 0 14px 14px; }
.panel-field > label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 500;
}
.panel-rename-row { display: flex; gap: 8px; }
.panel-rename-row input {
  flex: 1;
  padding: 11px 13px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  background: var(--card-surface, #fff);
  color: var(--text);
  min-width: 0;
}
.panel-rename-row .btn { flex: none; }
.hue-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

/* ⓘ info dot next to a settings heading */
.info-dot {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  vertical-align: middle;
  margin-left: 6px;
}

/* Green tick that flashes on Send — the ONLY send feedback (no dialogs). */
/* CONFIRMATION - Concept A (approved 2026-08-24).
   Replaces a 92px iOS-green (#34c759) disc parked over the middle of the list.
   Green belongs to a different app - nothing else in PRV is that colour - and
   a wordless disc could not say WHAT worked, which on "Send to assignee" is
   the only thing worth saying.
   A pill instead, in PRV's lilac, sitting where the send bar is so it never
   covers the list. Same bottom offset as #toast: that position is already
   known to clear the tab bar and the safe-area inset, and the two are never
   on screen together on any path that raises this. */
#flash-tick {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translate(-50%, 10px) scale(.97);
  max-width: min(90vw, 420px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border-radius: 9999px;
  /* b232 — `--hue` is set on this element by flashTick() when a list is open
     and removed otherwise, so the pill is the list's colour on a list and the
     app's lilac everywhere else. Lightness untouched; only the hue is freed. */
  background: hsl(var(--hue, 268) 72% 94%);
  border: 1px solid hsl(var(--hue, 270) 60% 86%);
  color: hsl(var(--hue, 270) 62% 38%);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 6px 22px hsl(var(--hue, 270) 60% 40% / .18);
  opacity: 0;
  pointer-events: none;
  z-index: 5000;
  transition: opacity .2s var(--ease-out),
              transform .34s cubic-bezier(.2, 1.1, .35, 1);
}
#flash-tick.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#flash-tick .ft-tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: hsl(var(--hue, 270) 70% 52%);
  color: #fff;
}
#flash-tick .ft-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] #flash-tick {
  background: hsl(var(--hue, 268) 32% 22%);
  border-color: hsl(var(--hue, 268) 40% 34%);
  color: hsl(var(--hue, 268) 70% 86%);
  box-shadow: 0 6px 22px rgb(0 0 0 / .4);
}
html[data-theme="dark"] #flash-tick .ft-tick { background: hsl(var(--hue, 270) 72% 62%); }
@media (prefers-reduced-motion: reduce) {
  #flash-tick { transition: opacity .2s linear; transform: translate(-50%, 0) scale(1); }
}
#filter-cat-wrap { margin-top: 6px; }
#filter-cat-wrap h3 { margin-bottom: 8px; }

/* Per-shop location pin in Settings → Shops */
.shop-loc {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--text-3);
  border-radius: 8px;
}
.shop-loc.set { color: var(--accent); }
.shop-loc:active { background: var(--track); }
.shop-loc.busy { opacity: .5; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 1; } }

/* Toast — brief status message + the "near a shop" auto-filter notice */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translate(-50%, 24px);
  max-width: min(90vw, 420px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(30, 30, 34, .95);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgb(0 0 0 / .3);
  opacity: 0;
  pointer-events: none;
  z-index: 4000;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-spring);
}
/* b209 — only a toast that HAS a control is hit-testable. See toast() for
   what this was doing to every sheet's primary button. */
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: none; }
#toast.show.has-action { pointer-events: auto; }
#toast button {
  flex: none;
  border: none;
  background: none;
  color: hsl(210 90% 72%);
  font-size: 14px;
  font-weight: 700;
  padding: 2px 4px;
}

/* ---------- due dates ---------- */
.due {
  flex: none;
  font-size: 10px; font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--track);
  color: var(--text-2);
  white-space: nowrap;
}
.due.soon { background: rgba(255,159,10,.18); color: var(--warn); }
.due.over { background: rgba(255,69,58,.18); color: var(--danger); }
.row.on .due { opacity: .35; }

.who-tag {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
}

.lock {
  flex: none;
  color: var(--text-3);
}

/* ---------- member rows ---------- */
.mem-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 7px;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  border: .5px solid var(--glass-brd);
  width: 100%;
  text-align: left;
  color: var(--text);
}
.mem-row .who-face { width: 32px; height: 32px; font-size: 13px; }
.mem-row .nm { flex: 1; font-size: 15px; font-weight: 600; }
.mem-row .tag { font-size: 11px; color: var(--text-3); }

.opt {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- views ----------
   Tabs slide; drilling into a list pushes from the right. Direction is set by
   app.js on <body> just before the view swaps, so one keyframe serves both. */
.view { animation: viewIn .25s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; } }

body[data-nav-dir="forward"] .view:not([hidden]) {
  animation: slideFromRight .28s var(--ease-out);
}
body[data-nav-dir="back"] .view:not([hidden]) {
  animation: slideFromLeft .28s var(--ease-out);
}
@keyframes slideFromRight {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
}

/* ---------- floating tab bar ----------
   Sits over the content, not docked to it. Hidden whenever the app is signed
   out, and while a sheet is open so it can't float above the scrim. */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-brd);
  box-shadow: 0 8px 28px rgba(20,20,40,.16);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
}
.tabbar[hidden] { display: none !important; }

.tab {
  min-width: 76px;
  min-height: 44px;          /* 44px touch target, per the brief */
  padding: 5px 14px;
  border: none;
  background: none;
  border-radius: 17px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
.tab.on {
  color: #fff;
  /* Carries the active area's hue, set by app.js. Falls back to the app accent
     on Home, which has no single hue of its own. */
  background: var(--tab-hue-bg, var(--accent));
}
.tab:active { transform: scale(.96); }

/* Content must clear the floating bar, or the last card sits under it. */
.view:not([hidden]) { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }

@media (prefers-reduced-motion: reduce) {
  body[data-nav-dir] .view:not([hidden]) { animation: viewIn .2s var(--ease-out); }
  .tab { transition: none; }
}

/* ---------- home ---------- */
.home-head {
  padding: calc(env(safe-area-inset-top) + 28px) 0 20px;
}
.home-head h1 { font-size: var(--fs-large-title); letter-spacing: -.03em; }

/* Compact avatar-led header (v1.1 · direction B) */
.home-greet-hi { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 0; }
.home-greet-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 1px 0 0; }

/* ---------- Home grid (v1.9) ----------
   Two columns. An odd trailing card sits alone in the LEFT column at normal
   width rather than stretching: a full-bleed card reads as a different kind of
   object and breaks the rhythm of the grid. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
.gcard-orphan { grid-column: 1; }

/* ---------- gradient card ----------
   Colour derives from the stored hue number, never a hardcoded pair, so a list
   whose colour the user changes still works. Two stops off one hue, plus a
   darker wash used behind pills and progress tracks — white directly on the
   light stop of a gradient loses contrast, which flat fills never had to solve.
   Angle is a single token: change --card-grad-angle, not seven rules. */
.card-wrap {
  --hue: 210;
  /* Wider luminance spread than the first pass, which read as flat colour: the
     two stops were only ~0.11-0.28 apart in relative luminance, below what the
     eye picks up across a 160px card. These are ~0.18-0.42 apart. */
  --c: hsl(var(--hue) 78% 64%);
  --c-deep: hsl(var(--hue) 72% 34%);
  --c-wash: hsl(var(--hue) 80% 20%);
  --card-grad-angle: 200deg;
  position: relative;
  min-width: 0;          /* lets a long list name ellipsis instead of widening the column */
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 116px;
  text-align: left;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(var(--card-grad-angle), var(--c), var(--c-deep));
  color: #fff;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease-out);
}
.gcard:active { transform: scale(.97); }

.gcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.gcard-icon {
  font-size: 21px;
  line-height: 1;
  flex: none;
  filter: drop-shadow(0 1px 2px hsl(var(--hue) 80% 18% / .45));
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
}
/* The "needs me" count. Solid dark wash rather than translucent white, so it
   stays legible over the light end of the gradient. */
.gcard-badge {
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: var(--c-wash);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gcard-foot { display: block; margin-top: 12px; }
.gcard-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  /* The lighter stop puts white text at 1.5:1 on green and 2.3:1 on amber, well
     under the 3:1 needed. A tight dark shadow restores legibility on every hue
     without darkening the gradient itself. */
  text-shadow: 0 1px 3px hsl(var(--hue) 80% 18% / .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard-sub {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 3px hsl(var(--hue) 80% 18% / .55);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress. Track is the dark wash, not 28% white, for the same contrast reason
   as the badge. */
.gcard-bar.solo {
  height: 5px;
  /* Translucent, not solid: a solid dark track at 0% fill reads as a *filled*
     dark bar rather than an empty channel. */
  background: hsl(var(--hue) 80% 16% / .38);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.gcard-bar.solo > span {
  display: block; height: 100%;
  background: #fff; border-radius: 3px;
  transition: width .5s var(--ease-out);
}
.gcard-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.gcard-bar-row { display: flex; align-items: center; gap: 7px; }
.gcard-bar-lbl {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.9);
  width: 26px; flex: none;
}
.gcard-bar {
  flex: 1; height: 5px;
  background: hsl(var(--hue) 80% 16% / .38);
  border-radius: 3px; overflow: hidden;
}
.gcard-bar > span {
  display: block; height: 100%;
  background: #fff; border-radius: 3px;
  transition: width .5s var(--ease-out);
}

/* Entry animation runs ONCE, on a card's first appearance. It is removed on
   animationend so a later repaint never replays it — replaying it on every
   home refresh was the full-screen flash. */
.gcard-enter { animation: rise .45s var(--ease-out) backwards; }

@media (prefers-reduced-motion: reduce) {
  .gcard-enter { animation: none; }
  .gcard, .gcard-bar > span, .gcard-bar.solo > span { transition: none; }
}

.card-wrap { position: relative; width: 100%; }

/* ---------- edit mode ----------
   Long-press any card and the grid starts jiggling, with a ✕ on every card that
   can be deleted. Reordering is a plain drag while in this mode — no grip, which
   was too small a target on a half-width card. */

/* Two alternating rotations. iOS also nudges position slightly, which is what
   stops it reading as a pure spin. */
@keyframes jiggleA {
  0%, 100% { transform: rotate(-.6deg) translate(0, 0); }
  50%      { transform: rotate(.6deg) translate(0, -.6px); }
}
@keyframes jiggleB {
  0%, 100% { transform: rotate(.65deg) translate(0, -.5px); }
  50%      { transform: rotate(-.55deg) translate(0, 0); }
}
.edit-mode .card-wrap {
  animation: jiggleA .28s ease-in-out infinite;
  animation-delay: var(--jiggle-delay, 0ms);
}
.edit-mode .card-wrap:nth-child(even) { animation-name: jiggleB; }
/* The card being dragged must not jiggle — it's following the finger. */
.edit-mode .card-wrap.dragging-card { animation: none; }

/* Cards lift very slightly so edit mode reads as a distinct state. */
.edit-mode .gcard { transform: scale(.985); }

/* The ✕ badge. Top-LEFT, matching iOS. Present in the DOM always; revealed in
   edit mode, so switching modes does no layout work. */
.card-del {
  position: absolute;
  top: -6px; left: -6px;
  width: 26px; height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f2f2f7;
  color: #1c1c1e;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* A 26px dot is under the 44px minimum, so an invisible ring extends the hit
   area without changing how it looks. */
.card-del::before {
  content: "";
  position: absolute;
  top: -9px; left: -9px; right: -9px; bottom: -9px;
  border-radius: 50%;
}
.edit-mode .card-wrap.deletable .card-del {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.card-del:active { transform: scale(.88); }


  html[data-theme="dark"] .card-del{ background: #3a3a3c; color: #fff; }


/* Done button, shown under the grid while editing. */
.edit-done-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: 10px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edit-done-btn[hidden] { display: none; }
.edit-done-btn:active { opacity: .85; }

/* While editing, the New list button would be a mis-tap waiting to happen. */
.cards-editing .new-list-btn { opacity: .35; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .edit-mode .card-wrap { animation: none; }
  /* Without the jiggle, edit mode still needs to be visibly different. */
  .edit-mode .gcard { outline: 2px dashed rgba(255,255,255,.6); outline-offset: -4px; }
  .card-del { transition: none; }
}
.card-sub:empty { display: none; }

.card-meta { display: flex; align-items: center; gap: 10px; }
.card-meta .bar { flex: 1; }
.card-meta .bar > span { background: var(--c); }
.card-stat {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.home-foot { padding: 26px 0 10px; text-align: center; }

/* ---------- sub header ---------- */
.sub-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(var(--pad) * -1) 8px;
  padding: calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-top: 0; border-left: 0; border-right: 0;
}
.sub-head h1 { flex: 1; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }

.back-btn {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .3s var(--ease-spring);
}
.back-btn svg { width: 22px; height: 22px; }
.back-btn:active { transform: scale(.92); }
.back-btn:active { transform: scale(.88); }

.topbar-row .back-btn { margin-right: 2px; }
.topbar-row { align-items: center; }
.title-wrap { flex: 1; min-width: 0; }

/* Home / menu icons in a topbar, matching the back button. */
.nav-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--row-bg);
  transition: transform .3s var(--ease-spring);
  margin-left: 4px;
}
.nav-icon:active { transform: scale(.88); }

/* Section subheading inside a sheet (e.g. "Travel details") sits a little
   tighter than a full h3 divider. */
.sheet-sub { margin-top: 18px; }

/* ---------- trip list ---------- */
.trip-list { padding-top: 8px; padding-bottom: 96px; }

/* b110.2 · iOS-26 "liquid glass" Add-trip bar (RULES R26). A LIGHT frosted
   glass capsule (the glass IS the material) with an indigo label/icon as the
   accent — reads unmistakably as glass over any background, unlike a solid
   colour slab. Legible indigo-on-light everywhere; solid fallback under
   Reduce Transparency (below). */
.fab-trip {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; border: .5px solid rgba(255,255,255,.7); border-radius: 22px; cursor: pointer;
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  color: #4232c7;
  font-size: 16.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(40,30,120,.16), inset 0 1px 0 rgba(255,255,255,.65);
  z-index: 40;
  transition: transform .12s ease;
}
.fab-trip:active { transform: scale(.98); }
.fab-trip-plus { font-size: 24px; font-weight: 800; line-height: 1; margin-top: -2px; color: #4232c7; }

  html[data-theme="dark"] .fab-trip{ background: rgba(44,44,48,.5); color: #c3bcff; border-color: rgba(255,255,255,.16);
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
  html[data-theme="dark"] .fab-trip-plus{ color: #c3bcff; }


/* Respect iOS Settings → Accessibility → Reduce Transparency: swap the frosted
   chrome for solid surfaces so it stays legible (RULES R26 · adjustable opacity). */
@media (prefers-reduced-transparency: reduce) {
  .bottomnav { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fab-trip { background: #5a4fe6; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
  .tabbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] .bottomnav{ background: #1c1c1e; }
  html[data-theme="dark"] .tabbar{ background: #1c1c1e; }
}
/* b110 · trip card thumbnail shows a real photo (own memory or landmark). */
.trip-card.tc2 .tc2-thumb.has-img { background-color: #d7dae6; }
.trip-card.tc2 .tc2-thumb.has-img .material-symbols-outlined { display: none; }

/* Trip settings sheet menu rows. */
.settings-menu { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.settings-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 16px; border: 1px solid rgba(120,120,140,0.14);
  border-radius: 16px; background: rgba(120,120,140,0.05);
  cursor: pointer; text-align: left; color: inherit;
}
.settings-row:active { transform: scale(.99); }
.settings-ic { font-size: 24px; line-height: 1; }
.settings-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.settings-txt b { font-size: 15px; font-weight: 700; }
.settings-txt small { font-size: 12.5px; color: var(--text-2, #8b8a98); }
.settings-chev { font-size: 22px; color: var(--text-2, #b7b6c2); }
/* Phase 2 (b102): destructive action row (e.g. Delete trip) — red title so the
   danger reads at a glance while keeping the same clean, spaced-out layout. */
.settings-row.danger { border-color: rgba(224,85,79,.22); background: rgba(224,85,79,.06); }
.settings-row.danger b { color: #e0554f; }
.settings-row.danger .settings-chev { color: rgba(224,85,79,.55); }

.trip-card {
  --hue: 210;
  --c: hsl(var(--hue) 85% 52%);
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 16px 16px 20px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  transition: transform .3s var(--ease-spring);
  animation: rise .4s var(--ease-out) backwards;
}
.trip-card:active { transform: scale(.98); }
.trip-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c);
}
.trip-card.archived { opacity: .55; }
.trip-card.archived::before { background: var(--text-3); }
 html[data-theme="dark"] .trip-card{ --c: hsl(var(--hue) 90% 68%); } 

.trip-card-top { display: flex; align-items: baseline; gap: 8px; }
.trip-card h3 { flex: 1; font-size: var(--fs-headline); font-weight: 600; letter-spacing: -.01em; }
.trip-when { font-size: 13px; color: var(--text-2); margin: 2px 0 10px; }

.pill {
  flex: none;
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 5px;
  background: hsl(var(--hue) 85% 52% / .16);
  color: var(--c);
}
.pill.grey { background: var(--track); color: var(--text-2); }
.pill.live { background: rgba(48,209,88,.18); color: var(--good); }
/* b108 Smart Travel — trip-card status pills + meta */
.pill.ok { background: rgba(48,209,88,.18); color: var(--good); }
.pill.warn { background: rgba(245,158,11,.20); color: var(--warn); }
.pill { display: inline-flex; align-items: center; gap: 3px; }
.pill-ic { font-size: 12px; line-height: 1; }
.trip-sub2 { font-size: 12px; color: var(--text-2); margin: -6px 0 10px; font-weight: 600; }
/* Passenger validity badges (review pane + trip detail) */
.pax-badge { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 20px; }
.pax-badge.ok { background: rgba(48,209,88,.18); color: var(--good); }
.pax-badge.warn { background: rgba(245,158,11,.20); color: var(--warn); }
.pax-name { display: flex; align-items: center; gap: 8px; }
/* Passengers preview block in the scan review */
.sc-pax { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--track); }
.sc-pax-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--track); }
.sc-pax-row:last-of-type { border-bottom: none; }
.sc-pax-ava { flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; }
.sc-pax-info { display: flex; flex-direction: column; min-width: 0; }
.sc-pax-info b { font-size: 15px; }
.sc-pax-info span { font-size: 12px; color: var(--text-2); }
.sc-pax-note { font-size: 11px; color: var(--text-2); margin-top: 8px; }


/* ---------- new-item highlight ---------- */
.row.fresh { background: hsl(45 100% 50% / .07); }
.dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px hsl(45 100% 50% / .18);
}
.sec-badge {
  flex: none;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warn);
  color: #000;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- default view picker ---------- */
.opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  border: .5px solid var(--glass-brd);
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
.opt-row .lbl { flex: 1; }
.opt-check { color: var(--accent); opacity: 0; }
.opt-row.on .opt-check { opacity: 1; }

/* Notifications section (own collapsible) */
.notif-pill {
  font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px;
  background: var(--track, #eee); color: var(--text-2, #666); margin-right: 6px;
}
.notif-pill.on { background: #dff5e6; color: #1c8a4a; }
 html[data-theme="dark"] .notif-pill.on{ background: rgba(48,209,88,.20); color: #4ad06a; } 
.notif-desc { font-size: 13px; color: var(--text-2); margin: 0 0 12px; line-height: 1.45; }
.notif-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notif-btn {
  flex: 1; min-width: 90px; text-align: center;
  border: 1px solid var(--glass-brd, rgba(60,60,67,.15));
  background: var(--card-surface, #fff); color: var(--text);
  border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.notif-btn:active { transform: scale(.97); }

/* Opening-screen selector as pills (approved Settings design) */
.open-pills { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; }
.open-pill {
  border: 1px solid var(--glass-brd, rgba(60,60,67,.12));
  background: var(--card-surface, #fff);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 20px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.open-pill.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.open-pill:active { transform: scale(.97); }

/* ---------- essential information bar ---------- */
.icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: transform .3s var(--ease-spring);
}
.icon-btn:active { transform: scale(.9); }

.essential-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  transition: transform .3s var(--ease-spring), opacity .2s;
}
.essential-bar:active { transform: scale(.98); opacity: .85; }
.essential-bar > span {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.essential-chev { color: var(--text-3); }

/* ---------- unlock row ---------- */
.unlock-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.unlock-row input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: .5px solid var(--glass-brd);
  background: var(--row-bg);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.unlock-row input:focus { outline: none; border-color: var(--accent); }
.unlock-btn { flex: none; width: auto; padding: 11px 18px; margin-bottom: 0; }

/* ---------- segmented control ---------- */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  padding: 3px;
  border-radius: 12px;
  background: var(--track);
}

.seg-pill {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 9px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  transition: transform .42s var(--ease-spring);
  will-change: transform;
}
.seg-pill.right { transform: translateX(100%); }

.seg-btn {
  position: relative;
  z-index: 1;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: color .25s;
}
.seg-btn.active { color: var(--text); }

/* ---------- overall progress ---------- */
.overall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transform-origin: left;
  transition: width .5s var(--ease-out);
}
.overall-txt {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
  text-align: right;
}

/* ---------- list ---------- */
.list { padding-top: 16px; }

.section {
  /* --hue is set per section in JS; everything below derives from it, so a new
     section only needs one number rather than a new block of CSS. */
  --hue: 210;
  --sec: hsl(var(--hue) 85% 52%);
  --sec-soft: hsl(var(--hue) 85% 52% / .13);

  position: relative;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Body is a soft PASTEL wash of the list colour (not white), so the whole
     card reads as "blue" — matching the darker header. */
  background: hsl(var(--hue) 70% 97%);
  border: .5px solid hsl(var(--hue) 50% 88%);
  box-shadow: 0 1px 4px hsl(var(--hue) 40% 50% / .1);
  animation: rise .5s var(--ease-out) backwards;
}

  html[data-theme="dark"] .section{ background: hsl(var(--hue) 30% 14%); border-color: hsl(var(--hue) 30% 24%); }

@keyframes rise { from { opacity: 0; } }

/* Colour spine down the left edge — identifies the section at a glance without
   shouting over the content. */
.section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--sec);
  transition: background .4s var(--ease-out);
}
.section.done::before { background: var(--good); }

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 18px;
  cursor: pointer;
  /* Darker band than the pastel body, so the header clearly leads its section. */
  background: hsl(var(--hue) 65% 88%);
  transition: background .4s var(--ease-out);
}

  html[data-theme="dark"] .section-head{ background: hsl(var(--hue) 40% 22%); }

.section.done .section-head { background: hsl(142 71% 45% / .14); }

.section-head h2 {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sec);
  transition: color .4s var(--ease-out);
}
.section.done .section-head h2 { color: var(--good); }

/* ---------- colour coding (v34): everything inherits the list's hue ---------- */
/* Sublist headers: a darker, bold tint of the list colour. Items below: the
   same hue at a readable depth (not bright mid-tone, which fails on white).
   Both derive from the section's --hue, which shopping lists set to the list
   colour, so a blue list reads as blue headers + blue items. */
.section-head h2 {
  color: hsl(var(--hue) 68% 34%);   /* darker, bold header */
  font-weight: 800;
}
.section .row-swipe .label {
  color: hsl(var(--hue) 60% 38%);   /* item text in the same family, readable */
  font-weight: 600;
}
/* b210 — a TASK row keeps the shared card's weight. The rule above is
   Grocery's: the list's hue-tinted item text at 600. It reaches task rows too,
   because both live in `.section .row-swipe`, so Home alone drew its task
   names lighter than the same task in School, Garage, Health and Pets.
   Scoped to `.tc-row`, so Grocery's own rows are untouched. */
.section .row-swipe .row.tc-row .label { font-weight: 750; }
/* Bought/done items fade to neutral so completed ≠ active, keeping the colour
   meaningful (colour = still to get). */
.section .row-swipe .row.on .label {
  color: var(--text-3);
  font-weight: 500;
}

  html[data-theme="dark"] .section-head h2{ color: hsl(var(--hue) 70% 72%); }
  html[data-theme="dark"] .section .row-swipe .label{ color: hsl(var(--hue) 55% 70%); }
  html[data-theme="dark"] .section .row-swipe .row.on .label{ color: var(--text-3); }



  html[data-theme="dark"] .section{ --sec: hsl(var(--hue) 90% 68%); }


.count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- section badge: ring while in progress, green tick when done ---- */
.badge { flex: none; width: 22px; height: 22px; position: relative; }

.ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-spring);
}
.ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.ring .track { stroke: var(--track); }
.ring .fill {
  stroke: var(--sec);
  transition: stroke-dashoffset .55s var(--ease-out), stroke .3s;
}

.tick {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--good);
  color: #fff;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s var(--ease-out), transform .45s var(--ease-spring);
}
.section.done .ring { opacity: 0; transform: rotate(-90deg) scale(.6); }
.section.done .tick { opacity: 1; transform: scale(1); }

.chev {
  flex: none;
  color: var(--text-3);
  transition: transform .35s var(--ease-spring);
}
.section.collapsed .chev { transform: rotate(-90deg); }

.rows { display: block; }
.section.collapsed .rows { display: none; }

/* ---------- reorder grip on section headers ---------- */
.sec-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px -6px 0;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: grab;
  border-radius: 8px;
  touch-action: none;            /* let the drag own the gesture, not scroll */
  -webkit-touch-callout: none;
  transition: color .2s, background .2s, transform .1s;
}
.sec-grip:active { cursor: grabbing; transform: scale(.9); background: var(--track); }

/* ---------- per-item drag grip + lift (b131) — reorder rows within a section ---------- */
.item-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -5px -6px -5px 0;
  border: none;
  background: none;
  color: var(--text-3);
  opacity: .72;
  cursor: grab;
  border-radius: 8px;
  touch-action: none;            /* the drag owns the gesture, not scroll */
  -webkit-touch-callout: none;
  transition: color .2s, background .2s, transform .1s, opacity .2s;
}
.item-grip:active { cursor: grabbing; transform: scale(.9); opacity: 1; background: var(--track); }
.row-swipe.item-dragging {
  box-shadow: 0 14px 40px rgba(20,20,40,.24);
  border-radius: 14px;
  background: var(--card-surface, #fff);
  opacity: .99;
  pointer-events: none;
  overflow: hidden;
}
html[data-theme="dark"] .row-swipe.item-dragging { box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.row-swipe.item-dragging .row { border-top: none; }
.item-drag-placeholder {
  border-radius: 12px;
  background: rgba(120,120,140,.10);
  border: 2px dashed rgba(120,120,140,.22);
  box-sizing: border-box;
  margin: 2px 0;
}

/* ---------- red "to buy" badge shown when a section is collapsed ---------- */
.to-buy-badge {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e11;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgb(238 17 17 / .4);
}
.to-buy-badge[hidden] { display: none; }
/* Only show the red badge when collapsed — expanded sections already show rows. */
.section:not(.collapsed) .to-buy-badge { display: none; }

/* ---------- "show only what to buy" filter ---------- */
.icon-btn.active {
  background: var(--sec, hsl(210 90% 55%));
  color: #fff;
}
#btn-shop-filter.active { background: #e11; color: #fff; }
.list.filtered .section.collapsed .rows { display: block; }  /* filter forces rows visible */
.row-swipe[hidden] { display: none; }
.section[hidden] { display: none; }

/* ---------- row ---------- */
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;                 /* iOS minimum touch target */
  border-top: .5px solid hsl(var(--hue) 40% 88% / .7);
  transition: background .18s;
}

  html[data-theme="dark"] .row{ border-top-color: hsl(var(--hue) 25% 26% / .6); }

.row:active { background: var(--row-bg); }

/* T3/T5 — THE TICK. The mark stays 26px; what changes is its shape and how
   much of the row belongs to it.

   SHAPE says what the tick will do. A repeating task logs its completion and
   rolls forward, so its tick clears again: circle. Everything else latches:
   rounded square. Before this, nothing on the row told you which was coming —
   you found out after tapping.

   TAP ZONE. 26px is well under the 44px minimum, and on Grocery it sat 11px
   from a 28px basket — 38px centre to centre, where guidance asks for 44. The
   ::before takes the hit area to 44x44 without moving the mark or changing the
   layout, and the bell has moved to the trailing edge so nothing is stolen from
   a neighbour. `inset:-9px` is exactly (44-26)/2. */
.box {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.8px solid var(--text-3);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .28s var(--ease-spring), border-color .28s,
              border-radius .28s var(--ease-spring), transform .28s var(--ease-spring);
}
.row.repeats .box { border-radius: 50%; }
.box::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 12px;
}
.box svg { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease-spring); }
.box:active { transform: scale(.85); }

.row.on .box { background: var(--good); border-color: var(--good); }
.row.on .box svg { opacity: 1; transform: scale(1); }
/* b139 · repeating-task completion: a quick green pop for confirmation before
   the row resets to blank for the next occurrence. */
@keyframes prvJustDone { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.row.just-done .box { animation: prvJustDone .4s cubic-bezier(.34,1.56,.64,1); }
.row.pri:not(.on) .box { border-color: var(--danger); }

.label-wrap { flex: 1; min-width: 0; }
.label { font-size: 17px; letter-spacing: -.01em; transition: color .28s, opacity .28s; }
.row.on .label { color: var(--text-3); text-decoration: line-through; }
.meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flag {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255,69,58,.16);
  color: var(--danger);
}
.row.on .flag { opacity: .3; }

.edit {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-radius: 8px;
}
.edit:active { background: var(--row-bg); }

/* ---------- fab ---------- */
.fab-wrap {
  position: fixed;
  right: var(--pad);
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  /* Above the install nag and the offline banner — the + must always be
     tappable, whatever else is on screen. Sheets (z 40+) still cover it. */
  z-index: 38;
}
.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: transform .35s var(--ease-spring);
}
.fab:active { transform: scale(.88); }

/* The list's add button is filled with that list's colour, like Reminders /
   Todoist — instantly tying the action to the list you're in. */
#btn-shop-add.fab {
  --hue: 210;
  background: hsl(var(--hue) 82% 50%);
  color: #fff;
  box-shadow: 0 4px 14px hsl(var(--hue) 82% 50% / .4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
}
#btn-shop-add.fab svg { stroke: #fff; }

/* ---------- connection banner ---------- */
.conn {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,159,10,.9);
  color: #000;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: rise .4s var(--ease-out);
}

/* Compact action sheets (Edit/Delete menus, small pickers) float as a rounded
   card lifted off the screen edges, iOS action-sheet style — not a thin strip
   jammed against the bottom. */
.sheet.compact {
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: calc(env(safe-area-inset-bottom) + var(--sp-2));
  border-radius: var(--r-lg);
  max-height: 80vh;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
.sheet.compact .sheet-actions {
  position: static;
  margin: var(--sp-4) 0 0;
  padding: 0;
  border-top: 0;
  background: transparent;
}

/* ---------- sheets ---------- */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade .3s var(--ease-out);
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--pad) calc(env(safe-area-inset-bottom) + 40px);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
  /* Opaque surface — a translucent sheet let the list behind bleed through and
     looked "botched". iOS sheets are solid. */
  background: var(--card-surface);
  box-shadow: 0 -1px 0 var(--hair), 0 -12px 40px rgba(0,0,0,.18);
  animation: up .42s var(--ease-spring);
}
@keyframes up { from { transform: translate3d(0,100%,0); } }
/* #6 (app-wide) — smooth slide-down on close so sheets never vanish abruptly.
   Matches the 300ms JS timer in closeSheets(). Applies to bottom sheets AND
   full-page profiles (both dismiss downward, iOS-style). */
@keyframes sheet-down { to { transform: translate3d(0,100%,0); } }
.sheet.closing {
  animation: sheet-down .3s cubic-bezier(.32,.72,0,1) forwards;
  pointer-events: none;
  z-index: 90;   /* stay above a profile revealed behind it during the slide-down */
}
.sheet-scrim.closing { animation: sheet-scrim-out .28s var(--ease-out) forwards; }
@keyframes sheet-scrim-out { to { opacity: 0; } }

/* Actions (Save/Cancel/Delete) stick to the bottom of the sheet, so they're
   always reachable no matter how long the form is — this was cut off before. */
.sheet-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 calc(env(safe-area-inset-bottom) + var(--sp-4));
  margin: var(--sp-3) calc(var(--pad) * -1) 0;
  padding-left: var(--pad);
  padding-right: var(--pad);
  background: var(--card-surface);
  border-top: .5px solid var(--hair);
  z-index: 6;
}
.sheet-actions .btn { flex: 1; margin: 0; }

.grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--text-3);
  margin: 0 auto 14px;
}

.sheet h2 { font-size: 20px; margin-bottom: 14px; }
.sheet h3 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin: 26px 0 12px;
}

.field { display: block; margin-bottom: var(--sp-4); }
.field > span {
  display: block;
  font-size: var(--fs-footnote);
  font-weight: 400;
  color: var(--text-2);
  margin: 0 0 var(--sp-2) var(--sp-1);
}
.field input, .field select {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: none;
  background: var(--row-bg);
  color: var(--text);
  font-size: var(--fs-body); /* 17px stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
  padding-right: 34px;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}
/* #3 — date inputs styled to match every other field: same fill, radius and
   text alignment whether empty or filled, so Start/End (and all dates across
   the app) look identical instead of one showing a pale empty pill. */
.field input[type="date"] {
  min-height: 48px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]:in-range::-webkit-datetime-edit,
.field input[type="date"]::-webkit-datetime-edit { color: var(--text); }
/* empty date shows muted placeholder text, same box as a filled one */
.field input[type="date"]:not(:focus):invalid::-webkit-datetime-edit { color: var(--text-3); }

/* Destination typeahead (#3). Sits directly under the destination input as a
   normal block so it never clips inside the scrolling trip sheet. */
.dest-suggest {
  margin-top: 6px;
  border-radius: var(--r-md);
  background: var(--row-bg);
  overflow: hidden;
  /* b105: cap the list so it never grows unbounded and pushes rows off-screen;
     it scrolls internally if there are many matches. */
  max-height: 42vh;
  max-height: 42dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dest-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  text-align: left;
  color: var(--text);
  border-bottom: .5px solid var(--glass-brd);
}
.dest-opt:last-child { border-bottom: none; }
.dest-opt:active,
.dest-opt.on { background: var(--track); }
.dest-opt-flag { font-size: 19px; line-height: 1; flex: 0 0 auto; }
.dest-opt-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dest-opt-name { font-size: 15px; font-weight: 600; }
.dest-opt-ctx {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* b166 — the typeahead's own states. It used to have none: while it waited it
   showed nothing, and when it found nothing it showed nothing, so "still
   thinking" and "no such place" and "broken" were all the same blank box. */
.dest-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
}
.dest-note.is-busy { flex-direction: row; align-items: center; gap: 8px; }
.dest-note b { font-size: 14px; color: var(--text); font-weight: 600; }
.dest-note small { font-size: 11.5px; color: var(--text-3); }
.dest-spin {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid var(--hair);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dest-spin .7s linear infinite;
}
@keyframes dest-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dest-spin { animation-duration: 2.4s; }
}
.dest-raw {
  margin-top: 4px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.dest-raw:active { filter: brightness(.92); }

/* --- #7 trip sheet redesign: hero preview + segmented travel mode --- */
.t-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 24px;
  padding: 16px 18px;
  margin: 0 0 20px;
  background: linear-gradient(var(--card-grad-angle), var(--c), var(--c-deep));
  color: #fff;
  overflow: hidden;
}
/* b103: real 3D trips icon (matches the Home tile) instead of a flat emoji;
   flex layout so the title/subtitle never overlap the icon. */
.t-hero-img { flex: none; width: 58px; height: 58px; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(10,20,60,.34)); }
.t-hero-txt { flex: 1; min-width: 0; }
.t-hero-name { font-size: 18px; font-weight: 800; margin: 0 0 3px; letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(8,16,48,.45); }
.t-hero-sub { font-size: 13px; opacity: .95; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(8,16,48,.4); }

/* b101: destination confirmation map under the Destination field. */
.t-dest-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 18px;
  border: .5px solid var(--hair);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.35);
  animation: rise .3s var(--ease-out) backwards;
}
.t-dest-map-canvas { width: 100%; height: 150px; }
.t-dest-map-label {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.92); color: #1c2340;
  font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  max-width: calc(100% - 20px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.t-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.t-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.t-seg-btn {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 11px 4px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.t-seg-btn.on { background: var(--accent); color: #fff; }
.t-seg-btn .t-seg-ic { display: block; font-size: 22px; margin-bottom: 3px; }

/* ===== b104: New-trip flow — menu of section cards + focused sub-screens ===== */
.tp-pane { display: none; }
.tp-pane.on { display: block; animation: viewIn .2s var(--ease-out); }
.tp-subhead { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.tp-back {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(20,22,40,.10);
  box-shadow: 0 4px 14px rgba(20,22,40,.10);
  color: var(--text); font-size: 24px; line-height: 1;
}
.tp-back:active { transform: scale(.92); }
.tp-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  text-transform: none; color: var(--text); margin: 0;
}
.tp-lede { margin: -6px 2px 14px; color: var(--text-2); font-size: 13px; }

/* ===== ADD A TRIP — the guided flow (b166) ================================
   The wizard reuses the existing panes, so all of this is chrome around them:
   the chooser, the two new screens, and the footer that replaces each pane's
   own Done button while a flow is in progress. */

/* While the wizard is running, each pane's own footer is redundant — the bar
   at the bottom owns forward motion. Hidden, not removed: the same markup is
   the edit flow's only way out. */
#trip-form.tp-wiz .tp-pane .sheet-actions { display: none; }
#trip-form.tp-wiz .tp-pane[data-pane="menu"] { display: none !important; }

/* --- step 0: what kind of entry --- */
.tp-kinds { display: flex; flex-direction: column; gap: 10px; }
.tp-kind {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 14px;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
  background: var(--row-bg);
  text-align: left;
  color: var(--text);
}
.tp-kind:active { background: var(--track); }
.tp-kind-ic { display: flex; flex: none; color: var(--accent); }
.tp-kind-ic svg { width: 24px; height: 24px; }
.tp-kind-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tp-kind-txt b { font-size: 15px; font-weight: 600; }
.tp-kind-txt small { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }

/* --- when: month + year --- */
.tp-when { display: flex; flex-direction: column; gap: 2px; }
.tp-when-nights i { font-style: normal; color: var(--text-3); font-weight: 400; }
.tp-when-exact {
  align-self: flex-start;
  margin: 2px 2px 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

/* --- photo: one, or none --- */
.tp-photo-preview {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: var(--row-bg);
  border: 1px dashed var(--hair);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.tp-photo-preview.has { border-style: solid; border-color: transparent; }
.tp-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  color: var(--text-3);
}
.tp-photo-empty svg { width: 26px; height: 26px; color: var(--accent); opacity: .85; }
.tp-photo-empty b { font-size: 14.5px; color: var(--text); font-weight: 600; }
.tp-photo-empty small { font-size: 12px; }
.tp-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- review --- */
.tp-review {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  background: var(--row-bg);
  overflow: hidden;
  margin-bottom: 16px;
}
.tp-rev-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: none;
  text-align: left;
  color: var(--text);
  border-bottom: .5px solid var(--glass-brd);
}
.tp-rev-row:last-child { border-bottom: none; }
.tp-rev-row:active { background: var(--track); }
.tp-rev-k { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.tp-rev-v { font-size: 14.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tp-rev-edit { font-size: 12.5px; color: var(--accent); font-weight: 600; }

/* --- the wizard footer --- */
.tp-wiz-bar {
  position: sticky;
  bottom: 0;
  margin: 18px -2px -2px;
  padding: 12px 2px calc(4px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: .5px solid var(--glass-brd);
}
.tp-wiz-rail { display: flex; gap: 4px; margin-bottom: 12px; }
.tp-wiz-dot { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tp-wiz-dot i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
  transition: background .22s var(--ease-out);
}
.tp-wiz-dot.done i { background: var(--accent); opacity: .45; }
.tp-wiz-dot.on i { background: var(--accent); }
.tp-wiz-dot em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-wiz-dot.on em { color: var(--accent); font-weight: 600; }
.tp-wiz-actions { display: flex; gap: 10px; }
.tp-wiz-actions .btn { flex: 1; }
.tp-wiz-actions #tp-wiz-back { flex: 0 0 34%; }
.tp-wiz-actions .btn:disabled { opacity: .45; }
.tp-sum.set { color: var(--text); font-weight: 600; }
.tp-sum.empty { color: var(--text-3); font-style: italic; }

  html[data-theme="dark"] .tp-back{ background: #2a2a2c; border-color: rgba(255,255,255,.12); }


/* b106: Smart Travel engine — auto-fill card on the New-trip menu. */
.tp-autofill {
  border-radius: 20px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  background: linear-gradient(160deg, rgba(91,79,224,.10), rgba(63,131,230,.08));
  border: 1px solid rgba(91,79,224,.22);
}
.tp-af-head { display: flex; align-items: flex-start; gap: 10px; }
.tp-af-spark { color: var(--accent); font-size: 22px; margin-top: 1px; flex: none; }
.tp-af-txt b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.tp-af-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.tp-af-btns { display: flex; gap: 10px; margin-top: 12px; }
.tp-af-btn { flex: 1; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tp-af-btn .material-symbols-outlined { font-size: 19px; }
/* b108 — primary Upload button + secondary scan link. */
.tp-af-upload { flex: 1; margin: 0; height: 52px; font-size: 15.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tp-af-upload .material-symbols-outlined { font-size: 22px; }
.tp-af-scan-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0;
  background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 4px; width: 100%; justify-content: center; }
.tp-af-scan-link .material-symbols-outlined { font-size: 18px; }
.tp-af-status { margin-top: 12px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.tp-af-status.error { color: #b3261e; }
.tp-af-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(91,79,224,.25); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Review pane extracted-field rows reuse .field styling; passport gets a tint. */
#sc-fields .field { margin-bottom: 14px; }
.sc-passport {
  border-radius: 16px; padding: 12px 14px 4px; margin: 4px 0 14px;
  background: rgba(180,120,40,.08); border: 1px solid rgba(180,120,40,.20);
}
.sc-passport-head { font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #8a5a12; margin: 0 0 8px; }


/* Styled "Discard this item?" dialog (replaces native confirm on close). */
.discard-ov {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .18s var(--ease-out);
}
.discard-ov.show { opacity: 1; }
.discard-card {
  width: min(92vw, 340px);
  background: var(--card-surface, #fff);
  border-radius: 22px; padding: 22px 20px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  transform: scale(.94); transition: transform .2s var(--ease-spring);
}
.discard-ov.show .discard-card { transform: scale(1); }
.discard-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
.discard-card p { margin: 0 0 18px; color: var(--text-2); font-size: 14px; }
.discard-btns { display: flex; gap: 10px; }
.discard-btns button { flex: 1; padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 700; }
.discard-keep { background: var(--row-bg); color: var(--text); }
.discard-go { background: rgba(224,85,79,.12); color: #e0554f; }
.discard-go:active, .discard-keep:active { transform: scale(.97); }

/* Design 2 — the itemised delete warning, an optional block INSIDE prvConfirm
   (app.js `items`/`itemsHeading`/`itemsEmptyText`/`undoNote`), not a second
   sheet. Unscoped: used by the Vault, and by every section list that can
   delete a document (Garage, Pets, Health, Home) — "the same all across the
   app". Every colour below is an existing token, already carried in all
   three theme states (:root, html[data-theme], the media query) — nothing
   new is introduced here. */
.pcf-list {
  margin: 2px 0 14px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden;
}
.pcf-list-h {
  padding: 9px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2); background: var(--row-bg);
}
.pcf-list-r {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 12px;
  border-top: 1px solid var(--hair);
}
.pcf-list-b { width: 5px; height: 5px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--text-2); }
.pcf-list-lbl { flex: 1; min-width: 0; font-size: 13px; color: var(--text); line-height: 1.35; }
.pcf-list-det {
  flex: none; font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-2);
}
.pcf-list-empty {
  padding: 10px 12px; margin: 0; font-size: 13px; color: var(--text-2);
  border-top: 1px solid var(--hair);
}
/* Honest about undo — a hard-deleted derived record cannot come back even
   though the document itself is only soft-deleted. Said once, plainly. */
.pcf-undo { margin: -6px 0 14px; font-size: 12px; color: var(--text-2); }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  border: .5px solid var(--glass-brd);
  font-size: 15px;
  margin-bottom: 16px;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: var(--track);
  position: relative;
  transition: background .3s var(--ease-out);
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: transform .32s var(--ease-spring);
}
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(20px); }
/* button-based switch (role=switch) driven by an .on class */
.switch.on { background: var(--good); }
.switch.on::after { transform: translateX(20px); }
button.switch { border: none; padding: 0; cursor: pointer; }
button.switch .knob { display: none; }

.btn {
  flex: 1;
  padding: 15px;
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-weight: 600;
  background: var(--row-bg);
  color: var(--text);
  border: none;
  transition: transform .2s var(--ease-spring), opacity .2s;
}
.btn:active { transform: scale(.96); opacity: .8; }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.danger { color: var(--danger); }

/* Equal-width button groups (Settings). Every button in a row gets the same
   width and they wrap tidily on narrow screens, so no more ragged 2+1 layouts.
   flex-basis:0 forces true equal columns regardless of label length. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}
.btn-row .btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A lone button in a row shouldn't stretch full-width awkwardly if it's short,
   but full-width reads fine for single actions, so leave it. */

/* ---------- info sheet ---------- */
.info-row, .person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  margin-bottom: 7px;
}
.info-row .k, .person-row .n {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  flex: none;
  width: 40%;
}
.info-row .v, .person-row .p {
  font-size: 14px;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.info-row .v.empty, .person-row .p.empty {
  color: var(--text-3);
  font-style: italic;
}
.person-row a { color: var(--accent); text-decoration: none; font-weight: 600; }

.call {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--good);
  color: #fff;
}

/* --- editable info rows --- */
.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sheet-head h2 { margin-bottom: 0; }

.link-btn {
  flex: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 2px;
}
.link-btn:active { opacity: .5; }

/* The "New list" action reads as a proper button — a boxed, dashed-outline card
   with larger, bolder text, so it's clearly tappable and not a faint link. */
.new-list-btn {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 2px dashed hsl(210 40% 75%);
  background: rgba(255,255,255,.5);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform .15s var(--ease-out), background .15s;
}
.new-list-btn:active { transform: scale(.98); background: rgba(255,255,255,.8); }

  html[data-theme="dark"] .new-list-btn{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }


.info-row input,
.person-row input {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: .5px solid var(--glass-brd);
  background: var(--bg);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.info-row input:focus,
.person-row input:focus { outline: none; border-color: var(--accent); }

.person-row .n input { font-size: 14px; }

.tips {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.tips li { margin-bottom: 8px; }
.tips b { color: var(--text); }

.parent-zone {
  margin-top: 26px;
  padding-top: 18px;
  border-top: .5px solid var(--hair);
}
.hint { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 4px 0 0; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  font-size: 14px;
}
.empty-getstarted { padding: 48px 24px; color: var(--text-2); }
.empty-getstarted .empty-lead { font-size: 17px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.empty-getstarted .empty-sub { font-size: 14px; color: var(--text-2); margin: 0 0 20px; line-height: 1.5; }
.empty-getstarted .btn.primary { display: inline-block; width: auto; padding: 13px 26px; }
.empty-getstarted .empty-or { font-size: 13px; color: var(--text-3); margin: 14px 0 0; }

/* #1-4 grocery redesign */
.gsec-intro { font-size: 14px; color: var(--text-2); margin: 8px 4px 12px; }
.gsec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gsec {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px; border: none; border-radius: 16px;
  background: var(--row-bg); color: var(--text);
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: filter .15s;
}
.gsec:active { filter: brightness(.94); }
.gsec-e { font-size: 22px; }
.gc-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.gc-emoji { font-size: 26px; }
.gc-head h2 { font-size: 20px; font-weight: 700; margin: 0; }
.gc-hint { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }
.gc-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gc-item {
  padding: 10px 14px; border-radius: 20px; border: 1.5px solid transparent;
  background: var(--row-bg); color: var(--text); font-size: 14px; cursor: pointer;
}
.gc-item.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.gc-item.on::after { content: " ✓"; }
.uk-super { display: flex; flex-wrap: wrap; gap: 8px; }
.uk-chip {
  padding: 9px 13px; border-radius: 18px; border: 1.5px dashed var(--accent);
  background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer;
}
.uk-chip:disabled { opacity: .5; }

/* ---- list welcome / demo (#2) ---- */
.welcome-hero {
  position: relative;
  border-radius: 20px; padding: 18px; margin: 8px 0 6px; color: #fff;
  background: linear-gradient(200deg, var(--c, #4aa3ff), var(--c-deep, #1f6fe0));
}
/* #7 — close control anchored to the TOP-RIGHT corner of the hero (not floating
   over the tab). Blue-themed for visibility: an accent-blue disc with a white
   cross, which stays clearly legible on any hero colour. */
.welcome-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent, #007aff); color: #fff;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer; padding: 0; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.welcome-x:active { transform: scale(.92); }
.welcome-emoji { font-size: 32px; line-height: 1; }
.welcome-hero h2 { font-size: 22px; font-weight: 700; margin: 8px 0 2px; color: #fff; }
.welcome-tag { font-size: 13px; opacity: .92; margin: 0; line-height: 1.4; }
.welcome-feats { margin: 4px 0 2px; }
.welcome-feat { display: flex; gap: 12px; padding: 12px 2px; border-bottom: .5px solid var(--hair, rgba(0,0,0,.08)); }
.welcome-feat:last-child { border-bottom: none; }
.wf-e { font-size: 20px; width: 26px; text-align: center; flex: 0 0 26px; }
/* b232 — the feature glyph is a line icon on every list now, not only on
   Grocery. `.dv2-lineic` sizes at 1em, so `.wf-e`'s 20px is what draws it; it
   only needs centring inside the 26px column, which text-align cannot do to an
   inline <svg> with no baseline to sit on. */
.wf-e { display: grid; place-items: center; }
/* And the primary action, which now carries a glyph before its label. Was
   Grocery-gated at design-v2-grocery.css:1083 for exactly this. */
#sheet-welcome .sheet-actions .btn.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.wf-t { font-size: 15px; font-weight: 600; margin: 0; }
.wf-d { font-size: 13px; color: var(--text-2); margin: 2px 0 0; line-height: 1.4; }
.wf-soon {
  font-size: 10px; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-left: 4px;
}


/* ---------- install nag ---------- */
.install-nag {
  position: fixed;
  left: var(--pad);
  /* A compact card on the left. It never spans full width and never enters the
     bottom-right corner, so it cannot sit over the + button. */
  max-width: min(320px, calc(100vw - 2 * var(--pad) - 76px));
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 24;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  animation: rise .45s var(--ease-out);
}
/* Only Home ever shows it, and Home has no FAB — but guard anyway: if any
   list/trip view is active, the nag is forced hidden. */
body:has(#view-list:not([hidden])) .install-nag,
body:has(#view-trip:not([hidden])) .install-nag {
  display: none !important;
}
.nag-body { flex: 1; }
.nag-body b { font-size: 14px; display: block; margin-bottom: 3px; }
.nag-body p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.45; }
.nag-body svg { vertical-align: -2px; }
.nag-x {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-3);
}

/* ---------- push toggle ---------- */
.push-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: var(--r-sm);
  background: var(--row-bg);
  border: .5px solid var(--glass-brd);
  margin-bottom: 8px;
}
.push-row .pl { flex: 1; }
.push-row .pl b { display: block; font-size: 15px; font-weight: 600; }
.push-row .pl span { font-size: 12px; color: var(--text-2); }

.push-state {
  flex: none;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--track);
  color: var(--text-2);
}
.push-state.on { background: rgba(48,209,88,.18); color: var(--good); }
.push-state.off { background: rgba(255,69,58,.16); color: var(--danger); }

/* ---------- trip map ---------- */
.map-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0;
  animation: rise .5s var(--ease-out) backwards;
}
#world-map { width: 100%; display: block; }
#world-map svg { width: 100%; height: auto; display: block; }

.map-land { fill: hsl(215 20% 30% / .55); stroke: none; }
@media (prefers-color-scheme: light) { .map-land { fill: hsl(215 25% 78%); } }

.map-route {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.map-route.past { stroke-dasharray: 2 3; opacity: .5; }

.map-home {
  fill: var(--text);
}
.map-marker {
  cursor: pointer;
  transition: transform .2s var(--ease-spring);
  transform-box: fill-box;
  transform-origin: center;
}
.map-marker:active { transform: scale(1.4); }

.map-vehicle { fill: #fff; }

.map-hint {
  margin: 0;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  border-top: .5px solid var(--hair);
}

.map-pop {
  position: absolute;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .5px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  font-size: 12px;
  pointer-events: none;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 5;
  animation: rise .25s var(--ease-out);
}
.map-pop b { display: block; font-size: 13px; }
.map-pop span { color: var(--text-2); }

.map-wrap { position: relative; }

/* ---------- header buttons ---------- */
.head-btns { display: flex; align-items: center; gap: 8px; }
.head-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--row-bg);
  border: .5px solid var(--glass-brd);
  color: var(--text);
  transition: transform .3s var(--ease-spring);
}
.head-icon:active { transform: scale(.9); }
.head-icon.urgent { color: var(--danger); }

/* ---------- notes on their own line (#7) ---------- */
.label-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Assignee circles now sit inline, to the right of the item name, pushed to the
   end of the row so they line up. Kept compact so the name stays prominent. */
.assign-inline { margin-left: auto; display: inline-flex; }
.assign-inline .assign-row { margin-top: 0; gap: 5px; }
.assign-inline .assign-dot { width: 24px; height: 24px; font-size: 10px; }
.row-note {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  margin-top: 3px;
  white-space: normal;      /* wrap fully, never truncate */
  word-break: break-word;
}
.row.on .row-note { text-decoration: line-through; opacity: .5; }

/* ---------- three-dots + swipe delete (#3) ---------- */
.dots {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--text-3);
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 2px;
}
.dots:active { background: var(--row-bg); }

.row-swipe {
  position: relative;
  border-radius: var(--r-sm);
}
.row-swipe .row {
  position: relative;
  z-index: 1;
  transition: transform .2s var(--ease-out);
}
/* While a swipe is active, JS adds .swiping (which clips overflow) and injects
   the red delete panel. Nothing red exists in the resting state, so a row can
   never look broken. */
.row-swipe.swiping { overflow: hidden; }
.row-swipe.swiping .row { background: var(--surface); }
/* iOS-26 (b117): Apple Reminders-style trailing Delete action — flush to the
   row's right edge, full height, system red, rounded to match the row card. */
.swipe-del {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff3b30;
  color: #fff;
  z-index: 0;
  border: none;
  border-top-right-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
}
.swipe-del svg { width: 24px; height: 24px; }
.swipe-del:active { background: #e0342a; }

  html[data-theme="dark"] .swipe-del{ background: #ff453a; }
  html[data-theme="dark"] .swipe-del:active{ background: #e63f36; }
/* b135 · full-swipe "release to delete" state — the panel widens as you drag
   past the halfway point and deepens its red so the gesture reads as committal. */
.swipe-del.armed{ background: #d92c22; }
  html[data-theme="dark"] .swipe-del.armed{ background: #ff5a50; }
/* ==================== b135 · Task 4 — item Shop picker ====================
   Make the Shop dropdown a proper FULL-WIDTH, scrollable list (it was cramped
   and not using the sheet width), separate the Qty and Shop cards so they read
   as two distinct iOS-26 rows, and style the "＋ Add a shop name" row. */
#sheet-shop-item #s-shops-wrap.lp-shop-drop{ width: 100%; margin-top: 14px; }
#sheet-shop-item #s-shops.lp-shop-drop-body{
  width: 100%;
  max-height: 244px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#sheet-shop-item .shop-roll{ width: 100%; }
/* The add-a-shop row: indigo accent, centred, clearly an action not a shop. */
.shop-roll-row.shop-roll-add{ justify-content: center; }
.shop-roll-row.shop-roll-add .srr-name{
  color: hsl(var(--hue, 210) 60% 42%);
  font-weight: 800;
  text-align: center;
  width: 100%;
}
  html[data-theme="dark"] .shop-roll-row.shop-roll-add .srr-name{ color: hsl(var(--hue, 210) 70% 70%); }
/* ==================== b136 · shop location — address search ==================== */
.loc-or{ text-align: center; color: var(--text-3); font-size: 12px; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .08em; }
.loc-addr-label{ display: block; font-size: 12px; color: var(--text-2); margin: 0 2px 6px; }
.loc-addr-row input{ flex: 1; min-width: 0; }
.loc-addr-results{ margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.loc-addr-results[hidden]{ display: none; }
.loc-addr-opt{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--row-bg); color: var(--text); font-size: 14px; line-height: 1.35; }
.loc-addr-opt .material-symbols-outlined{ font-size: 18px; color: var(--accent); flex: none; }
.loc-addr-opt:active{ background: var(--track); }


/* ---------- card badges (#4) ---------- */
.card-badge.assigned {
  background: hsl(var(--hue) 85% 48%);
  color: #fff;
}

/* ---------- urgent flash takeover (#6) ---------- */
.flash-takeover {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: linear-gradient(160deg, hsl(4 82% 52%), hsl(354 78% 44%));
  display: grid;
  place-items: center;
  padding: 32px;
  animation: flashIn .3s var(--ease-out);
}
/* hidden must fully remove it — otherwise the fixed full-screen overlay keeps
   intercepting taps across the whole app even while invisible. */
.flash-takeover[hidden] { display: none !important; }
@keyframes flashIn { from { opacity: 0; transform: scale(1.04); } }
.flash-inner { text-align: center; color: #fff; max-width: 440px; }
.flash-bang {
  width: 78px; height: 78px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  color: #fff;
  animation: flashPulse 1.1s ease-in-out infinite;
}
@keyframes flashPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
.flash-from { font-size: 15px; opacity: .85; margin-bottom: 8px; font-weight: 600; }
.flash-msg { font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 32px; letter-spacing: -.02em; }
.flash-ack { background: #fff; color: hsl(4 70% 45%); min-width: 160px; }

/* ---------- map box (#2) ---------- */
#trip-map {
  width: 100%;
  height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  background: #a3cce6;
  position: relative;
}
.maplibregl-ctrl-attrib { font-size: 9px !important; }
.map-flag {
  background: rgba(255,255,255,.92);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  white-space: nowrap;
  transform: translate(-50%, -140%);
}

/* ---------- swipe-to-delete a whole list card ---------- */


/* ---------- Buy / Bought (shopping) ---------- */
/* b210 — ONE BELL. There were two: `.buy-flag`, a dashed circle that fills
   amber when the family is asked, on Home; and `.pet-act-flag`, a borderless
   9px square that turned orange, on School, Garage, Health and Pets. Same
   control, same meaning, two looks — so the nudge read as a different feature
   depending which section you were in. The dashed ring is kept because it is
   the one that says "nothing asked yet" without any state to read. */
.buy-flag,
.pet-act-flag {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-3);
  border: 1.5px dashed var(--text-3);
  background: transparent;
  /* T3 — the bell/basket now trails the row rather than leading it, so its
     breathing room swaps sides. */
  margin-left: 2px;
  cursor: pointer;
  transition: all .18s;
}
.buy-flag.on,
.pet-act-flag.on {
  color: #fff;
  background: hsl(28 90% 52%);
  border-style: solid;
  border-color: hsl(28 90% 52%);
}
.row.wanted { background: hsl(28 90% 52% / .1); }
.row.wanted .label { font-weight: 600; }

.send-bar {
  position: sticky;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  z-index: 20;
}
.send-bar .btn { width: 100%; margin: 0; }
.send-bar.done .btn { background: var(--good, hsl(142 71% 42%)); }

/* ---------- About / build info ---------- */
.about-box { margin-top: 4px; }
.about-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px; font-size: 14px;
  border-bottom: 1px solid var(--hairline, rgba(128,128,128,.15));
}
.about-row span { color: var(--text-2); }
.about-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.build-warn {
  margin: 10px 0 4px; padding: 10px 12px;
  background: hsl(38 92% 50% / .14); color: hsl(28 90% 38%);
  border-radius: 10px; font-size: 13px; line-height: 1.4;
}

/* ---------- #8/#9: attachments, call, suggestions ---------- */
.attach-row { display: flex; flex-direction: column; gap: 8px; }
.attach-current a { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; }
.attach-status { font-size: 13px; color: var(--text-2); line-height: 1.4; }

.row-clip, .row-call {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: hsl(210 90% 55% / .12);
  margin-left: 2px;
}
.row-clip { color: var(--text-2); background: var(--row-bg); }
.row-call:active, .row-clip:active { transform: scale(.9); }

.suggest-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-height: 46vh; overflow-y: auto; }

/* a84 (Aug 2026 · Push #2 · Bug §2g): Select-all button on the suggest sheet
   header, mirroring the existing grocery pattern. Sits inline with the title
   so it's always tap-reachable. */
.suggest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 4px;
}
.suggest-head h2 { margin: 0; }
.suggest-selectall {
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  min-height: 36px; border-radius: 999px;
}
.suggest-selectall.all-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* a84 (Aug 2026 · Push #2 · Bug §2c): Get-started kind chooser sheet. */
.gs-kind-grid {
  display: flex; flex-direction: column; gap: 12px;
  margin: 12px 0 4px;
}
.gs-kind-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px;
  background: var(--row-bg); border: 1.5px solid transparent;
  text-align: left; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
  min-height: 68px;
}
.gs-kind-btn:hover { border-color: var(--accent); }
.gs-kind-btn:active { transform: scale(.98); }
.gs-kind-btn.gs-kind-both { background: linear-gradient(135deg, rgba(124,111,239,.10), rgba(91,79,224,.05)); }
.gs-kind-emoji { font-size: 34px; flex: none; width: 44px; text-align: center; }
.gs-kind-title { font-size: 17px; font-weight: 700; color: var(--text); }
.gs-kind-sub   { font-size: 13px; color: var(--text-3); display: block; }
.gs-kind-btn > span:not(.gs-kind-emoji) { display: flex; flex-direction: column; gap: 2px; }

.suggest-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--row-bg); text-align: left; font-size: 15px;
  color: var(--text-3); transition: all .15s;
}
.suggest-item .suggest-check {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--text-3); color: transparent; font-size: 13px;
}
.suggest-item.on { color: var(--text); }
.suggest-item.on .suggest-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Section headings inside the smart-pack picker (trip mode). The first one
   drops its top margin so the list doesn't start with a gap. */
.suggest-group-head {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
  margin: 14px 2px 2px; padding: 0;
}
.suggest-group-head:first-child { margin-top: 2px; }
.suggest-star { color: var(--accent); font-size: 12px; }

/* ---------- recurrence weekday picker ---------- */
.weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.weekdays .wd {
  flex: 1 1 0; min-width: 40px;
  padding: 9px 0; border-radius: var(--r-sm);
  background: var(--row-bg); color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: all .15s;
}
.weekdays .wd.on {
  background: var(--accent, hsl(210 90% 55%)); color: #fff;
}
.weekdays .wd:active { transform: scale(.94); }

/* Task flag (bell) — same footprint as the shopping cart flag. */
.buy-flag.task.on {
  background: hsl(265 85% 58%);
  border-color: hsl(265 85% 58%);
}
.row.wanted .buy-flag.task.on { color: #fff; }

/* ---------- universal sheet close button ---------- */
.sheet-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  /* Phase 2 (b102): drop the purple accent circle. A clean neutral close chip
     that matches the app's other close buttons (.doc-modal-close / .set-close),
     sits clear of the grabber, and stays legible on every sheet background (R3). */
  border: 1px solid rgba(20,22,40,.10);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(20,22,40,.10);
  color: #1a2b4a;
  z-index: 30;
  transition: transform .15s, background .15s;
}
.sheet-close:active { transform: scale(.92); background: #eef0f6; }
/* #1 — keep sheet headings and intro text clear of the top-right close X */
.sheet > h2:first-of-type, .sheet > .sheet-lede:first-of-type { padding-right: 54px; }
.sheet-lede { padding-right: 44px; }
/* Bug fix (Aug 2025): the small hint paragraph directly under a sheet's H2
   was overlapping the absolutely-positioned close X. Give any such hint
   (and the first paragraph after H2) enough right-padding to clear the button. */
.sheet > h2 + .hint,
.sheet > h2 + p.hint,
.sheet > h2 + p { padding-right: 44px; }

/* ---------- trips two-bar (to go / home) ---------- */
.card-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bar-labeled { display: flex; align-items: center; gap: 10px; }
.bar-labeled .bar-lbl {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  width: 38px; flex: none;
}
.bar-labeled .bar { flex: 1; }
.bar-labeled .card-stat { flex: none; }

/* ---------- floating long-press menu ---------- */
.float-menu {
  position: fixed;
  z-index: 100;
  min-width: 168px;
  background: var(--card-surface, #fff);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  border: .5px solid var(--glass-brd);
  padding: 6px;
  display: flex; flex-direction: column;
  animation: fmIn .14s var(--ease-out);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
@keyframes fmIn { from { opacity: 0; transform: scale(.94); } }
.float-menu button {
  text-align: left;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 15px; font-weight: 500;
  color: var(--text);
  transition: background .12s;
}
.float-menu button:active { background: var(--row-bg); }
.float-menu button.danger { color: var(--danger, #ff453a); }

/* ---------- avatars (photos + initials) ---------- */
.avatar-face {
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700;
  overflow: hidden;
  line-height: 1;
}
.avatar-face.has-photo { background: var(--row-bg); }
.avatar-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-face.has-photo { padding: 0; overflow: hidden; }
.who-face.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar.has-photo, .btn-avatar.has-photo { overflow: hidden; padding: 0; }

.avatar-edit {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 18px;
}
.avatar-preview { flex: none; }
.avatar-preview .avatar-face { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.avatar-edit-btns { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.avatar-edit-btns .btn { margin: 0; }

/* ---------- drag-to-reorder cards ---------- */
.dragging-card {
  box-shadow: 0 16px 48px rgba(20,20,40,.28) !important;
  transform: scale(1.03);
  opacity: .97;
  transition: transform .12s var(--ease-out);
  pointer-events: none;
}
.drag-placeholder {
  border-radius: 28px;
  background: rgba(120,120,140,.10);
  border: 2px dashed rgba(120,120,140,.25);
  box-sizing: border-box;
}
#cards > .card-wrap {
  transition: transform .18s var(--ease-out);
}

/* ---------- drag: no text selection / highlight ---------- */
#cards [data-card] {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;   /* allow vertical scroll; we cancel it manually once a drag starts */
}
body.dragging-active {
  -webkit-user-select: none; user-select: none;
  cursor: grabbing;
  touch-action: none;
  overflow: hidden;
}
body.dragging-active * { -webkit-user-select: none !important; user-select: none !important; }

/* ---------- per-item assignee circles (#2) ---------- */
.assign-row {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.assign-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: hsl(var(--hue) 70% 42%);
  background: transparent;
  border: 1.5px dashed hsl(var(--hue) 60% 60% / .5);
  overflow: hidden;
  transition: all .15s var(--ease-out);
  flex: none;
}
.assign-dot.has-photo { border-style: solid; }
.assign-dot img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .45; filter: grayscale(.4);
  transition: all .15s;
}
.assign-dot.on {
  color: #fff;
  background: hsl(var(--hue) 80% 52%);
  border: 1.5px solid hsl(var(--hue) 80% 52%);
  box-shadow: 0 2px 6px hsl(var(--hue) 80% 52% / .35);
}
.assign-dot.on img { opacity: 1; filter: none; }
.assign-dot:active { transform: scale(.88); }

/* ---------- list colour swatches ---------- */
.hue-swatches { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hue-swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  /* Aug 2025: soft pastel palette — no more bold/saturated colour options. */
  background: hsl(var(--hue) 68% 84%);
  border: 3px solid transparent;
  transition: transform .15s var(--ease-out);
  flex: none;
}
.hue-swatch.on {
  border-color: hsl(var(--hue) 45% 55%);
  transform: scale(1.12);
  box-shadow: 0 2px 8px hsl(var(--hue) 60% 60% / .35);
}
.hue-swatch:active { transform: scale(.9); }

/* ---------- join screen (redeem an invite) ---------- */

.join-sub {
  text-align: center;
  font-size: 15px;
  color: var(--text-2);
  margin: -18px 0 28px;
  line-height: 1.45;
}
.join-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 16px 0 6px;
}
.join-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;           /* 16px stops iOS zooming the page on focus */
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--text);
}
.join-input:focus {
  outline: none;
  border-color: hsl(210 68% 52%);
  box-shadow: 0 0 0 3px hsl(210 68% 52% / .15);
}
#view-join .sheet-actions { margin-top: 22px; }
#view-join .btn.primary { width: 100%; }

/* ---------- invite section (settings, admin only) ---------- */

.invite-note {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  margin: -4px 0 12px;
}
#invite-section .join-input { margin-bottom: 4px; }
#invite-section .code-err { text-align: left; }
.invite-state { font-size: 13px; color: var(--text-2); }
.invite-state.ok  { color: hsl(150 60% 38%); }
.invite-state.old { opacity: .6; }

/* ---------- landing (signed-out front door) ---------- */

.landing-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.landing-brand {
  font-size: 15px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: hsl(210 68% 52%);
  margin: 0 0 24px;
}
.landing-title {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; margin: 0 0 12px;
}
.landing-lede {
  font-size: 17px; color: var(--text-2); line-height: 1.5; margin: 0 0 32px;
}
.btn.block { display: block; width: 100%; }
.btn.block + .btn.block { margin-top: 10px; }

/* ---- A1 self-serve signup ---- */
.signup-dots { display: flex; gap: 6px; margin: 0 0 16px; }
.signup-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.signup-dots i.on { background: var(--accent); }
.su-mem {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 14px; background: var(--row-bg); margin-bottom: 8px;
}
.su-mem-body { flex: 1; }
.su-av {
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.su-mem-nm { font-weight: 600; font-size: 15px; }
.su-mem-rl { font-size: 12px; color: var(--text-2); }
.su-mem-x {
  border: none; background: none; color: var(--text-3);
  font-size: 15px; cursor: pointer; padding: 6px;
}
.su-add { margin-top: 14px; }
.su-add-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.su-swatch { display: flex; gap: 6px; flex-wrap: wrap; }
.su-hue { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.su-hue.on { border-color: var(--text); }
.su-adult { font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.landing-more { margin-top: 36px; }
.landing-more summary {
  list-style: none; cursor: pointer; min-height: 44px;
  font-size: 16px; font-weight: 600; color: hsl(210 68% 52%);
  padding: 12px 0; display: flex; align-items: center; gap: 8px;
}
.landing-more summary::-webkit-details-marker { display: none; }
.landing-more .chev { transition: transform .2s var(--ease-out); }
.landing-more[open] summary .chev { transform: rotate(180deg); }
.landing-feature {
  padding: 16px 0; border-top: 1px solid var(--hair);
}
.landing-feature h3 { font-size: 16px; font-weight: 600; margin: 0 0 3px; }
.landing-feature p {
  font-size: 15px; color: var(--text-2); margin: 0; line-height: 1.45;
}

/* ---------- signed-out navigation links ---------- */

.link-back {
  background: none; border: none; padding: 8px 0;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  cursor: pointer; align-self: flex-start; min-height: 44px;
  font-family: inherit;
}
.link-alt {
  display: block; width: 100%; margin-top: 16px;
  background: none; border: none; padding: 12px 0;
  font-size: 15px; font-weight: 600; color: hsl(210 68% 52%);
  cursor: pointer; min-height: 44px; font-family: inherit;
}

/* ---------- danger zone (v1.9-a3) ----------
   Deliberately plain and slightly cold: destructive actions shouldn't look
   like the rest of the app's friendly buttons. Red is used as an outline
   rather than a fill, so the button doesn't compete with primary actions
   above it — a solid red block reads as "press me" at a glance. */
.danger-h { color: var(--danger, #b3261e); }

.danger-box {
  border: 1px solid hsl(4 60% 55% / .3);
  border-radius: var(--r-lg, 18px);
  padding: 14px;
  margin-top: 8px;
}
.danger-lede {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.danger-btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid hsl(4 60% 55% / .55);
  background: none;
  color: #b3261e;
  font-weight: 600;
  border-radius: 14px;
}
.danger-btn:active { background: hsl(4 60% 55% / .08); }
.danger-btn:disabled { opacity: .45; }
#leave-row + #wipe-row { margin-top: 14px; padding-top: 14px; border-top: .5px solid var(--glass-brd); }

.sheet-lede {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.wipe-summary {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: hsl(4 60% 55% / .08);
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
}
.wipe-summary:empty { display: none; }

#member-danger {
  margin-top: 18px;
  padding-top: 14px;
  border-top: .5px solid var(--glass-brd);
}
#member-danger[hidden] { display: none !important; }


  html[data-theme="dark"] .danger-h, html[data-theme="dark"] .danger-btn, html[data-theme="dark"] .wipe-summary{ color: #f2b8b5; }
  html[data-theme="dark"] .danger-btn{ border-color: hsl(4 60% 62% / .5); }
  html[data-theme="dark"] .wipe-summary{ background: hsl(4 60% 40% / .18); }


/* ---------- collapse-all button (v1.9-a4) ----------
   Chevrons point inward when pressing collapses, outward when it expands, so
   the icon shows the outcome rather than the state. */
#btn-shop-fold svg, #btn-trip-fold svg { transition: transform .2s var(--ease-out); }
#btn-shop-fold.folded svg, #btn-trip-fold.folded svg { transform: rotate(180deg); }
#btn-shop-fold[hidden], #btn-trip-fold[hidden] { display: none !important; }

/* ---------- invite revoke ---------- */
.invite-row { display: flex; align-items: center; gap: 8px; }
.invite-email {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.invite-revoke {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--track, rgba(120,120,140,.14));
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* 26px is under the 44px minimum; extend the hit area invisibly. */
.invite-revoke::before {
  content: ""; position: absolute;
  top: -9px; left: -9px; right: -9px; bottom: -9px;
  border-radius: 50%;
}
.invite-revoke:active { background: hsl(4 60% 55% / .16); color: #b3261e; }
.invite-remove {
  flex: none;
  padding: 7px 12px;
  border: none; border-radius: 10px;
  background: hsl(4 70% 55% / .12);
  color: var(--danger, #ff3b30);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.invite-remove:active { background: hsl(4 70% 55% / .22); }
.invite-remove:disabled { opacity: .5; }
.invite-revoke:disabled { opacity: .4; }

/* ---------- changelog ---------- */
.changelog { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cl-entry {
  padding: 12px 14px;
  border-radius: var(--r-lg, 18px);
  background: var(--row-bg, rgba(120,120,140,.07));
  border: .5px solid var(--glass-brd, rgba(120,120,140,.18));
}
.cl-entry.cl-new { border-color: hsl(210 70% 55% / .45); }
.cl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cl-head b { font-size: 14px; }
.cl-date { font-size: 12px; color: var(--text-2); flex: 1; }
.cl-pill {
  flex: none;
  padding: 2px 8px; border-radius: 9px;
  background: var(--accent, #185FA5); color: #fff;
  font-size: 11px; font-weight: 700;
}
.cl-notes { margin: 0; padding-left: 18px; }
.cl-notes li {
  font-size: 13px; line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 3px;
}
.cl-notes li:last-child { margin-bottom: 0; }
.changelog-more { width: 100%; margin-top: 10px; }
.changelog-more[hidden] { display: none !important; }

/* Settings#2 — back-to-top button */
.scroll-top-btn {
  /* #3 — anchored bottom-CENTRE of the sheet, not the right edge, and kept
     translucent so it's available without pulling the eye. Fixed to the
     viewport bottom (the settings sheet is itself a bottom sheet), centred
     horizontally. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  top: auto;
  float: none;
  margin: 0;
  z-index: 60;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(0, 122, 255, .55);
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  opacity: .78;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}
.scroll-top-btn:hover { opacity: 1; }
.scroll-top-btn:active { transform: translateX(-50%) scale(.92); }

/* ============ Settings redesign (unified grouped-card UI) ============ */
/* ===== Warm Hearth theme — scoped to Settings only ===== */
#sheet-settings {
  --wh-bg: #f4f2ef; --wh-card: #ffffff; --wh-ink: #2a2724; --wh-ink2: #8a7f74;
  --wh-hair: rgba(70,55,40,.12); --wh-teal: #2f6d5b; --wh-teal-t: #e9f2ee; --wh-teal-on: #1e4a3d;
  --wh-shadow: 0 1px 6px rgba(70,55,40,.05); --wh-shadow-lg: 0 2px 10px rgba(70,55,40,.06);
  background: var(--wh-bg);
}

  html[data-theme="dark"] #sheet-settings{
    --wh-bg: #1a1816; --wh-card: #242019; --wh-ink: #f2ede4; --wh-ink2: #a89a8b;
    --wh-hair: rgba(255,255,255,.10); --wh-teal: #5dcaa5; --wh-teal-t: rgba(93,202,165,.16); --wh-teal-on: #9fe1cb;
    --wh-shadow: none; --wh-shadow-lg: none;
  }

#sheet-settings h2 { color: var(--wh-ink); }
#sheet-settings .glabel { color: var(--wh-ink2); }
/* Household hero */
#sheet-settings .wh-hero { margin-top: 6px; }
#sheet-settings .wh-hero .stack { margin-right: 4px; }
#sheet-settings .wh-hero {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  background: var(--wh-card); border: .5px solid var(--wh-hair); border-radius: 18px;
  box-shadow: var(--wh-shadow-lg); padding: 14px; margin-bottom: 6px;
}
#sheet-settings .wh-hero .av { width: 44px; height: 44px; border-radius: 13px; background: var(--wh-teal);
  color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 600; flex: none; }
#sheet-settings .wh-hero .who { flex: 1; min-width: 0; }
#sheet-settings .wh-hero .nm { font-size: 15px; font-weight: 600; color: var(--wh-ink); }
#sheet-settings .wh-hero .sub { font-size: 12px; color: var(--wh-ink2); }
#sheet-settings .wh-hero .stack { display: flex; align-items: center; }
#sheet-settings .wh-hero .stack .d { width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 600; color: #fff; border: 2px solid var(--wh-card); }
#sheet-settings .wh-hero .stack .d + .d { margin-left: -9px; }
#sheet-settings .wh-hero .chev { color: var(--wh-ink2); font-size: 15px; margin-left: 4px; }
/* Retheme section cards to Warm Hearth */
#sheet-settings .sec-card { background: var(--wh-card); border: .5px solid var(--wh-hair);
  border-radius: 16px; box-shadow: var(--wh-shadow); }
#sheet-settings .sec-head { color: var(--wh-ink); }
#sheet-settings .sec-badge { width: 36px; height: 36px; border-radius: 10px; }
#sheet-settings .sec-count { background: var(--wh-teal); }
#sheet-settings .sec-body { border-top-color: var(--wh-hair); }
#sheet-settings .set-row { color: var(--wh-ink); border-bottom-color: var(--wh-hair); }
#sheet-settings .set-row .row-sub { color: var(--wh-ink2); }
#sheet-settings .notif-pill.on { background: var(--wh-teal-t); color: var(--wh-teal-on); }
#sheet-settings .open-pill.on { background: var(--wh-teal); border-color: var(--wh-teal); }
#sheet-settings .glabel-danger, #sheet-settings .danger-h { color: var(--danger); }

#sheet-settings h3 {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 26px 10px 8px; padding: 0;
}
#sheet-settings h3 .opt { text-transform: none; letter-spacing: 0; color: var(--text-3); font-weight: 500; }
#sheet-settings .danger-h { color: var(--danger); }
/* Group the content that follows each heading into a rounded card. */
#me-box, #push-box, #default-opts, #shops-box, #about-box,
#members-box, #invite-list, .danger-box {
  background: var(--card-surface, #fff);
  border-radius: 16px;
  box-shadow: 0 0 0 .5px var(--hair);
  overflow: hidden;
  margin: 0 0 6px;
}
#me-box:empty, #shops-box:empty, #members-box:empty, #invite-list:empty { display: none; }
/* Rows inside those cards */
#push-box .opt-row, #default-opts .opt-row, .about-row {
  border-radius: 0; box-shadow: none; margin: 0;
  border-bottom: .5px solid var(--hair);
}
#push-box .opt-row:last-child, #default-opts .opt-row:last-child,
.about-row:last-child { border-bottom: none; }
/* Buttons in settings become full-width card rows with a chevron feel */
#sheet-settings .btn-row { display: flex; flex-direction: column; gap: 0;
  background: var(--card-surface, #fff); border-radius: 16px;
  box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
#sheet-settings .btn-row .btn {
  border-radius: 0; background: none; box-shadow: none;
  border-bottom: .5px solid var(--hair); text-align: left;
  padding: 15px 16px; font-weight: 500; justify-content: flex-start;
}
#sheet-settings .btn-row .btn:last-child { border-bottom: none; }
/* #1 — iOS grouped-card polish: a chevron on navigational rows and a subtle
   press state, matching the approved settings mockup. Pure styling; no markup
   or handlers change. Destructive rows (Sign out) keep no chevron. */
#sheet-settings .btn-row .btn:not(.danger-btn)::after {
  content: "›";
  margin-left: auto;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}
#sheet-settings .btn-row .btn:active,
#sheet-settings .opt-row:active,
#loc-auto-toggle:active,
.about-row:active { background: var(--hair); }
/* Shop add + supermarket chips sit in their own inset */
#sheet-settings .shop-add-row { margin: 8px 0; }
#loc-auto-toggle {
  background: var(--card-surface, #fff); border-radius: 16px;
  box-shadow: 0 0 0 .5px var(--hair); padding: 15px 16px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
/* Danger zone rows */
.danger-box { padding: 4px 0; }
.danger-box > div { padding: 12px 16px; }
.danger-box .danger-lede { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }
#sheet-settings .hint { padding: 0 6px; margin: 6px 0 10px; }

/* #7 — repeating-task completion history */
.task-history-line { font-size: 12px; color: var(--text-2); margin-top: 4px; cursor: pointer; }
.task-history-line .thl-label { color: var(--text-3); }
.task-history-line .thl-more { color: var(--accent); font-weight: 600; margin-left: 4px; }
/* b131 — Apple-style grouped History (per-item task/purchase history). Grey
   uppercase day headers + rounded white grouped cards (one row per entry:
   green tick · time · person avatar). Theme-aware via tokens (RULES R27/R35). */
.history-body { display: block; max-height: 62vh; overflow-y: auto; overflow-x: hidden;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 2px; }
.histx { display: flex; flex-direction: column; gap: 18px; }
.histx-group { display: flex; flex-direction: column; }
.histx-day { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); padding: 0 4px 6px 14px; }
.histx-card { background: var(--card-surface, #fff); border: .5px solid var(--hair);
  border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,22,40,.05); }
.histx-row { display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: .5px solid var(--hair); }
.histx-row:last-child { border-bottom: none; }
.histx-ic { color: #34c759; font-size: 21px; flex: none; }
.histx-time { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; font-size: 15px; }
.histx-who { flex: none; display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.histx-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--accent); }
.histx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: var(--text-2); padding: 34px 20px; }
.histx-empty .material-symbols-outlined { font-size: 44px; opacity: .55; }
.histx-empty p { margin: 0; font-size: 14px; line-height: 1.45; }

/* #4 — Adhoc quick-add row */
.adhoc-add { padding: 8px 12px; }
.adhoc-input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1.5px dashed var(--hair); background: transparent;
  color: var(--text); font-size: 15px;
}
.adhoc-input:focus { outline: none; border-color: var(--accent); border-style: solid; }

/* #4 — location filter switch row */
.loc-switch-row{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:8px 0;
  background:var(--card-surface,#fff);border-radius:14px;box-shadow:0 0 0 .5px var(--hair)}
.loc-switch-row .lbl{flex:1;font-size:16px}

/* ============ Settings — grouped-card redesign (approved mockup) ============ */
#sheet-settings .glabel-sub { color: var(--text-3); text-transform: none; letter-spacing: 0; font-weight: 500; }

.set-group {
  background: var(--card-surface, #fff);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 .5px var(--hair);
  margin-bottom: 4px;
}
.set-field { padding: 14px 16px; border-bottom: .5px solid var(--hair); }
.set-field:last-child { border-bottom: none; }
.set-field label { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; }
.set-field-row { display: flex; gap: 8px; }
.set-field-row input {
  flex: 1; padding: 11px 12px; border-radius: 10px; border: none;
  background: var(--bg, #f2f2f7); color: var(--text); font-size: 15px;
}
.set-add {
  padding: 11px 18px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}
/* embedded dynamic blocks sit flush inside a card, hairline-separated */
.set-embed:empty { display: none; }
.set-embed { border-bottom: .5px solid var(--hair); }
.set-group > .set-embed:last-child { border-bottom: none; }

/* embedded opt-rows / push block sit flush as card rows in Settings */
.set-embed .opt-row {
  margin: 0; border-radius: 0; border: none;
  border-bottom: .5px solid var(--hair);
  background: none; padding: 15px 16px; width: 100%;
}
.set-embed .opt-row:last-child { border-bottom: none; }
.set-embed .push-row { padding: 14px 16px; }
.set-embed .btn-row { padding: 0 12px 12px; }
.set-embed.changelog { padding: 8px 14px; }

/* ============ Settings — collapsible section cards (Variant A) ============ */
#sheet-settings h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 4px 10px; }
#sheet-settings .glabel {
  font-size: 12px; color: var(--text-2); font-weight: 600;
  margin: 20px 8px 8px; text-transform: uppercase; letter-spacing: .05em;
}
#sheet-settings .danger-glabel { color: var(--danger); }
#sheet-settings .hint { padding: 12px 16px 4px; margin: 0; }

.sec-card {
  background: var(--card-surface, #fff);
  border: .5px solid var(--hair);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 12px;
}
.sec-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: none; border: 0; text-align: left; cursor: pointer;
  color: var(--text); font-size: 16px;
}
.sec-badge {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; flex: none;
}
.badge-blue   { background: #E6F1FB; }
.badge-teal   { background: #E1F5EE; }
.badge-purple { background: #EEEDFE; }
.badge-coral  { background: #FAECE7; }
.badge-amber  { background: #FAEEDA; }
.badge-pink   { background: #FBEAF0; }

  html[data-theme="dark"] .badge-blue{background:rgba(55,138,221,.20)} html[data-theme="dark"] .badge-teal{background:rgba(29,158,117,.20)}
  html[data-theme="dark"] .badge-purple{background:rgba(127,119,221,.22)} html[data-theme="dark"] .badge-coral{background:rgba(216,90,48,.20)}
  html[data-theme="dark"] .badge-amber{background:rgba(186,117,23,.22)} html[data-theme="dark"] .badge-pink{background:rgba(212,83,126,.20)}

.sec-title { flex: 1; font-weight: 600; }
.sec-count {
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 10px; margin-right: 6px;
}
.sec-chev { color: var(--text-3); transition: transform .22s var(--ease-out, ease); flex: none; }
.sec-card.collapsed .sec-chev { transform: rotate(-90deg); }
.sec-body { border-top: .5px solid var(--hair); }
.sec-card.collapsed .sec-body { display: none; }

/* rows inside a section body */
.set-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: .5px solid var(--hair);
  font-size: 16px; width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: var(--text); cursor: pointer;
}
.sec-body > .set-row:last-child, .sec-body > .set-field:last-child { border-bottom: none; }
.set-row .ic { width: 26px; text-align: center; font-size: 19px; flex: none; }
.set-row .lbl { flex: 1; }
.set-row .row-sub { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; font-weight: 400; }
.set-row .chev { margin-left: auto; color: var(--text-3); font-size: 20px; line-height: 1; }
.set-row .val-b { margin-left: auto; color: var(--text); font-weight: 600; }
.set-row.static { cursor: default; }
.set-row.danger { color: var(--danger); }
.set-row.accent { color: var(--accent); }
.set-row:not(.static):active { background: var(--hair); }
.set-row.tog .opt-check { margin-left: auto; opacity: 0; transition: opacity .15s; }
.set-row.tog.on .opt-check { opacity: 1; color: var(--accent); }

.sec-body .set-field { padding: 14px 16px; border-bottom: .5px solid var(--hair); }
.sec-body .set-field label { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 8px; }
.sec-embed:empty { display: none; }
.sec-embed { border-bottom: .5px solid var(--hair); }
.sec-body > .sec-embed:last-child { border-bottom: none; }
.sec-embed .opt-row {
  margin: 0; border-radius: 0; border: none;
  border-bottom: .5px solid var(--hair);
  background: none; padding: 14px 16px; width: 100%;
}
.sec-embed .opt-row:last-child { border-bottom: none; }
.sec-embed .push-row { padding: 14px 16px; }
.sec-embed .btn-row { padding: 0 12px 12px; }
.sec-embed.changelog { padding: 8px 14px; }
.danger-card { border-color: var(--danger); }

/* member roster with join status (#3) */
.mem-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: .5px solid var(--hair); }
.mem-item:last-child { border-bottom: none; }
.mem-face { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; color: #fff; }
.mem-info { flex: 1; min-width: 0; }
.mem-name { font-size: 16px; }
.mem-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 10px; flex: none; }
.pill-admin  { color: #0F6E56; background: #E1F5EE; }
.pill-joined { color: #185FA5; background: #E6F1FB; }
.pill-pending{ color: #854F0B; background: #FAEEDA; }

/* #5 — passcode reveal (eye) toggle */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: none; color: var(--text-2); cursor: pointer;
  border-radius: 8px;
}
.pw-eye:active { background: var(--hair); }

/* Material Symbols Outlined Icon Font Rule */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   STITCH UI ONBOARDING DESIGN SYSTEM STYLES
   ========================================================================== */
.stitch-page {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fafafc;
  min-height: 100vh;
  color: #191c1f;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 32px;
  box-sizing: border-box;
}

.ob-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.ob-screen[hidden], .view[hidden] {
  display: none !important;
}

.stitch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-bottom: 24px;
  position: relative;
  z-index: 20;
}

.stitch-back-btn {
  background: #f0f1f5;
  border: none;
  color: #191c1f;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  margin-right: 12px;
  flex-shrink: 0;
}

.stitch-back-btn:hover {
  background: #e4e6eb;
  transform: scale(1.05);
}

.stitch-back-btn:active {
  transform: scale(0.95);
}

.progress-bar-wrap {
  display: flex;
  gap: 6px;
  flex: 1;
  max-width: 220px;
}

.progress-segment {
  height: 4px;
  flex: 1;
  background: #e1e2e7;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.progress-segment.active {
  background: #5b4fe0;
}

.stitch-title {
  font-size: 26px;
  font-weight: 800;
  color: #191c1f;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.stitch-subtitle {
  font-size: 14px;
  color: #474554;
  margin: 0 0 24px;
}

.setup-card-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid #e1e2e7;
  cursor: pointer;
  transition: all 0.2s ease;
}

.setup-card-option.selected {
  border-color: #5b4fe0;
  background: #f0efff;
  box-shadow: 0 4px 14px rgba(91, 79, 224, 0.1);
}

.setup-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f4f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b4fe0;
  flex-shrink: 0;
}

.area-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.area-card {
  position: relative;
  border-radius: 20px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.area-card.selected {
  border-color: #5b4fe0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.area-card-icon-wrap {
  font-size: 24px;
  margin-bottom: 10px;
}

.area-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #191c1f;
}

.check-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5b4fe0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.area-card.selected .check-overlay {
  opacity: 1;
}

.child-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7f7fb;
  margin-bottom: 12px;
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 34px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: #5b4fe0;
}

input:checked + .switch-slider:before {
  transform: translateX(22px);
}

.stitch-bottom-bar {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stitch-btn-primary {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  background: #5b4fe0;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(91, 79, 224, 0.25);
  transition: transform 0.1s ease, background 0.2s ease;
}

.stitch-btn-primary:active {
  transform: scale(0.98);
}

.stitch-btn-secondary {
  width: 100%;
  height: 50px;
  border-radius: 16px;
  background: transparent;
  color: #474554;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #e1e2e7;
  cursor: pointer;
}

.live-search-input {
  width: 100%;
  height: 50px;
  border-radius: 16px;
  border: 1.5px solid #e1e2e7;
  padding: 0 16px 0 44px;
  font-size: 15px;
  box-sizing: border-box;
  background: white;
  outline: none;
}

.live-search-input:focus {
  border-color: #5b4fe0;
}

.live-search-input:disabled {
  background: #f0f1f5;
  color: #777586;
}

.search-icon-pos {
  position: absolute;
  left: 14px;
  top: 13px;
  color: #777586;
}

.member-chip {
  padding: 8px 14px;
  border-radius: 20px;
  background: #f0f1f5;
  color: #191c1f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.member-chip.selected {
  background: #5b4fe0;
  color: white;
}

.animate-success-pulse {
  animation: success-pop 0.6s cubic-bezier(.2,1.4,.4,1) both, pulse-ring 2s 0.6s infinite;
}
@keyframes success-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(107, 254, 156, 0.5); }
  70% { box-shadow: 0 0 0 20px rgba(107, 254, 156, 0); }
  100% { box-shadow: 0 0 0 0 rgba(107, 254, 156, 0); }
}

.welcome-hero-art {
  position: relative; background: #eef2ff; border-radius: 28px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(66,50,199,0.12);
}
.welcome-hero-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 28px;
}

.welcome-feats { display: flex; flex-direction: column; gap: 12px; }
.wf { display: flex; gap: 12px; align-items: flex-start; }
.wf-ic { width: 24px; height: 24px; border-radius: 50%; background: #e0e7ff; color: #5b4fe0; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.wf div b { display: block; font-size: 14px; color: #191c1f; }
.wf div span { font-size: 12px; color: #474554; }

.confetti-container { position: absolute; inset: -40px; pointer-events: none; overflow: hidden; }

/* ================= Family Command Centre dashboard ================= */
#view-dashboard { background: #f5f6fb; }
.dash {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  max-width: 480px; margin: 0 auto; padding: 20px 18px 108px;
  color: #191c1f; box-sizing: border-box;
}
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dash-hi { font-size: 15px; color: #474554; margin: 0 0 2px; font-weight: 600; }
.dash-wave { display: inline-block; }
.dash-title {
  /* Bug fix Aug 2025 §7 — matched to the Family Hub mockup: bigger serif
     display face for editorial polish. Falls back to the modern stack when
     a serif isn't available. Line-height tight, tracking negative for that
     "book cover" feel. */
  font-family: "New York", "Charter", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  font-size: 36px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em;
  margin: 0; max-width: 320px;
}
.dash-bell {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid #e7e8ed; color: #4232c7; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.15s ease;
}
.dash-bell:active { transform: scale(0.94); }
.dash-bell-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  background: #4232c7; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid #f5f6fb;
}
.dash-attention {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: #ece9ff; border: none; border-radius: 18px; padding: 16px; margin-bottom: 26px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-attention:active { transform: scale(0.99); }
.dash-att-ic { width: 44px; height: 44px; border-radius: 50%; background: #4232c7; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-att-txt { flex: 1; display: flex; flex-direction: column; }
.dash-att-txt b { font-size: 15px; font-weight: 700; color: #191c1f; }
.dash-att-txt span { font-size: 13px; color: #474554; }
.dash-att-chev { color: #777586; }
.dash-sec { margin-bottom: 26px; }
.dash-h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; }
.dash-h2-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-h2-row .dash-h2 { margin: 0; }
.dash-link { background: none; border: none; color: #4232c7; font-weight: 700; font-size: 14px; cursor: pointer; }

.dash-glance { display: grid; grid-auto-flow: column; grid-auto-columns: 116px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dash-glance::-webkit-scrollbar { display: none; }
.g-card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.15s ease; }
.g-card:active { transform: scale(0.97); }
.g-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; }
.g-name { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.g-meta { font-size: 12px; color: #474554; margin: 0 0 10px; }
.g-meta.alert { color: #ba1a1a; font-weight: 700; }
.g-bar { height: 6px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.g-bar > span { display: block; height: 100%; border-radius: 999px; }

.dash-continue { display: flex; flex-direction: column; gap: 14px; }
.c-card { position: relative; border-radius: 22px; padding: 18px 20px; color: #fff; cursor: pointer; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,0.12); transition: transform 0.15s ease; }
.c-card:active { transform: scale(0.99); }
.c-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 34px; }
.c-textwrap { flex: 1; min-width: 0; }
.c-ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.c-title { font-size: 20px; font-weight: 800; margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
.c-sub { font-size: 13px; opacity: 0.92; margin: 2px 0 0; }
.c-chev { margin-left: auto; opacity: 0.9; }
.c-progress { display: flex; align-items: center; gap: 10px; }
.c-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.35); overflow: hidden; }
.c-bar > span { display: block; height: 100%; background: #fff; border-radius: 999px; }
.c-pct { font-size: 14px; font-weight: 700; }
.c-foot { font-size: 12px; opacity: 0.9; margin: 12px 0 0; }

.dash-house { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dash-house::-webkit-scrollbar { display: none; }
.h-card { background: #fff; border-radius: 16px; padding: 14px 10px; text-align: center; box-shadow: 0 3px 12px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.15s ease; }
.h-card:active { transform: scale(0.96); }
.h-ic { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.h-name { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.h-meta { font-size: 11px; color: #777586; margin: 0; }
.h-meta.alert { color: #ba1a1a; font-weight: 700; }

.dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-qa { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e7e8ed; border-radius: 16px; padding: 16px 14px; font-size: 14px; font-weight: 700; color: #191c1f; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.dash-qa:active { transform: scale(0.97); }
.dash-qa .material-symbols-outlined { color: #4232c7; font-size: 20px; }

/* ================= Bottom navigation ================= */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: space-around; align-items: center;
  /* b110 · iOS-26 frosted glass tab bar (see RULES R26). Translucent + heavy
     blur/saturation so content scrolls softly behind it. */
  background: rgba(255,255,255,0.68);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-top: 0.5px solid rgba(0,0,0,0.08);
  box-shadow: 0 -0.5px 0 rgba(0,0,0,0.04);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
}

  html[data-theme="dark"] .bottomnav{ background: rgba(28,28,30,0.66); border-top-color: rgba(255,255,255,0.10); }

.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #777586; font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 6px 0; transition: color 0.15s ease;
}
.bn-item .material-symbols-outlined { font-size: 24px; }
.bn-item.active { color: #4232c7; }
/* b128 fix — the tab bar was unreadable in Dark Mode: the brand-purple active
   colour and the muted grey label both sank into the dark glass. Lift both to
   iOS system-contrast values on dark. */
html[data-theme="dark"] .bn-item { color: #b6b6be; }
html[data-theme="dark"] .bn-item.active { color: #0a84ff; }

/* ================= Profile / Settings page ================= */
#view-profile { background: #f5f6fb; }
.settings { max-width: 480px; margin: 0 auto; padding: 18px 18px 108px; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; color: #191c1f; box-sizing: border-box; }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.set-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.set-close { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1.5px solid #e7e8ed; color: #474554; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.set-profile { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #6a5cff, #4232c7); color: #fff; border-radius: 22px; padding: 18px; margin-bottom: 18px; position: relative; box-shadow: 0 10px 24px rgba(66,50,199,0.25); }
.set-avatar { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; border: 3px solid rgba(255,255,255,0.4); }
.set-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-profile-info { flex: 1; min-width: 0; }
.set-profile-name { font-size: 19px; font-weight: 800; margin: 0 0 2px; }
.set-profile-email { font-size: 13px; opacity: 0.9; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-role-badge { font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.25); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.set-photo-btn { position: absolute; bottom: 14px; left: 58px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #4232c7; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.set-photo-btn .material-symbols-outlined { font-size: 15px; }
.set-card { background: #fff; border-radius: 20px; padding: 18px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.set-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.set-card-head .material-symbols-outlined { color: #4232c7; }
.set-card-head h2 { font-size: 16px; font-weight: 800; margin: 0; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.set-row-main { flex: 1; min-width: 0; }
.set-row-label { font-size: 14px; font-weight: 600; margin: 0; }
.set-row-sub { font-size: 13px; color: #777586; margin: 2px 0 0; }
.set-row-action { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e7e8ed; background: #fff; color: #4232c7; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.set-members-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #777586; letter-spacing: 0.04em; margin: 14px 0 8px; }
.set-mem { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f1f5; }
.set-mem-face { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.set-mem-face img { width: 100%; height: 100%; object-fit: cover; }
.set-mem-info { flex: 1; min-width: 0; }
.set-mem-name { font-size: 15px; font-weight: 700; margin: 0; }
.set-mem-role { font-size: 12px; color: #777586; margin: 1px 0 0; }
.set-swatches { display: flex; gap: 6px; }
.set-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.set-swatch.on { border-color: #191c1f; }
.set-add-member { width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #f0efff; color: #4232c7; border: none; border-radius: 14px; padding: 13px; font-weight: 700; font-size: 14px; cursor: pointer; }
.set-invite-help { font-size: 13px; color: #474554; margin: 0 0 14px; line-height: 1.5; }
.set-qr { display: flex; justify-content: center; margin-bottom: 14px; }
.set-qr img, .set-qr canvas { border-radius: 12px; border: 6px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.set-link-row { display: flex; gap: 8px; margin-bottom: 10px; }
.set-link-row input { flex: 1; min-width: 0; border: 1.5px solid #e7e8ed; border-radius: 12px; padding: 11px 12px; font-size: 13px; color: #474554; background: #f7f8fb; }
.set-copy-btn { width: 46px; border-radius: 12px; border: none; background: #4232c7; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.set-share-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #191c1f; color: #fff; border: none; border-radius: 14px; padding: 13px; font-weight: 700; font-size: 14px; cursor: pointer; }
.set-logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #191c1f; border: 1.5px solid #e7e8ed; border-radius: 16px; padding: 15px; font-weight: 700; font-size: 15px; cursor: pointer; margin-bottom: 12px; }
.set-danger { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #ba1a1a; border: 1.5px solid #ffdad6; border-radius: 16px; padding: 15px; font-weight: 700; font-size: 14px; cursor: pointer; }

/* Dashboard family avatar row */
.dash-family { display: flex; align-items: center; gap: -8px; }
.dash-fam-face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; border: 2px solid #f5f6fb; margin-left: -8px; }
.dash-fam-face:first-child { margin-left: 0; }
.dash-fam-face img { width: 100%; height: 100%; object-fit: cover; }

/* ---- New-list name suggestion chips ---- */
.nl-suggest { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nl-suggest::-webkit-scrollbar { display: none; }
.nl-chip { flex: 0 0 auto; white-space: nowrap; background: #f0efff; color: #4232c7; border: 1.5px solid transparent; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.nl-chip.on { background: #4232c7; color: #fff; }
.nl-chip-new { background: #fff; border-color: #d7d8de; color: #191c1f; }

/* ---- Simplified dashboard: pending tiles + all-done state ---- */
.dash-pending { display: flex; flex-direction: column; gap: 14px; }
.dash-pending .c-card { padding: 20px; }
.c-badge { background: rgba(255,255,255,0.28); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.c-badge .material-symbols-outlined { font-size: 15px; }
.c-badge-due { background: rgba(255,255,255,0.42); }
/* Badges live on their own wrapping row, so a long list name can never clip
   them on a narrow phone (#3). */
.c-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
/* Drag-to-reorder grip, pinned to the tile's top-right corner. */
/* BUG FIX (a83 · Aug 2026 · Push #1 · Bug §3):
   Drag handle moved back to right-side vertical middle (was top-right small
   corner). Full 44×44 touch target so long-press + drag is easy on a phone.
   Uses `right:` positioning + vertical centering via translateY, leaves the
   card body tappable everywhere else (touch-action is honoured on the handle
   only). */
.c-drag {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  padding: 0;
}
.c-drag .material-symbols-outlined { font-size: 24px; }
.c-drag:active { cursor: grabbing; background: rgba(255,255,255,0.36); }
.c-drag:hover { background: rgba(255,255,255,0.30); }
.c-card-dragging { opacity: 0.9; transform: scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,0.28); z-index: 5; }
.c-card-done { opacity: 0.72; }
.c-card-done .c-ic { background: rgba(255,255,255,0.95); color: #1a7f37; font-weight: 900; }
.group-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.group-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border: none; border-radius: 12px; background: rgba(0,0,0,0.05); color: #444; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.group-tab .material-symbols-outlined { font-size: 18px; }
.group-tab.active { background: hsl(var(--hue,210),70%,50%); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
 html[data-theme="dark"] .group-tab{ background: rgba(255,255,255,0.08); color: #ccc; } 
.dash-done { text-align: center; background: #fff; border-radius: 22px; padding: 40px 24px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.dash-done-ic { font-size: 52px; margin-bottom: 12px; }
.dash-done-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.dash-done-sub { font-size: 14px; color: #777586; margin: 0; }

/* ---- Onboarding: respect device notch / status bar so tops aren't cut ---- */
.ob-screen { padding-top: calc(env(safe-area-inset-top) + 8px); box-sizing: border-box; }
#view-landing { max-width: 560px; margin: 0 auto; }

/* ---- Prominent 'Add a list' button on the Lists tab ---- */
.new-list-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #4232c7; color: #fff; border: none; border-radius: 16px; padding: 16px;
  font-size: 15px; font-weight: 800; cursor: pointer; margin: 16px 0 8px;
  box-shadow: 0 6px 18px rgba(66,50,199,0.28);
}

/* ================= Responsive: phone / tablet / desktop ================= */
@media (min-width: 700px) {
  .dash, .settings { max-width: 640px; padding-left: 24px; padding-right: 24px; }
  #view-landing { max-width: 600px; }
  .cards { max-width: 660px; margin-left: auto; margin-right: auto; }
  .bottomnav { justify-content: center; gap: 72px; }
  .bn-item { flex: 0 0 auto; min-width: 90px; }
}
@media (min-width: 1100px) {
  .dash, .settings { max-width: 760px; }
  .cards { max-width: 780px; }
}


/* ---- Onboarding screen banners (3D artwork for screens 2-6) ---- */
.ob-banner {
  width: 100%; height: 150px; object-fit: cover; object-position: center;
  border-radius: 20px; display: block; margin: 2px 0 20px;
  box-shadow: 0 8px 24px rgba(66, 50, 199, 0.10);
}
.ob-banner.compact { height: 112px; margin-bottom: 16px; }
.ob-banner.top { object-position: center top; }

/* ---- Suggested invite chips (screen 4) ---- */
.ob-suggest-wrap { margin-bottom: 16px; }
.ob-suggest-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: #777586; letter-spacing: 0.05em; margin-bottom: 8px;
}
.ob-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1.5px solid #e1e2e7; border-radius: 999px; padding: 8px 12px;
  font-size: 14px; font-weight: 600; color: #191c1f; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.suggest-chip:hover { border-color: #c4c0ff; }
.suggest-chip .material-symbols-outlined { font-size: 18px; color: #5b4fe0; pointer-events: none; }
.suggest-chip .sc-badge {
  font-size: 10px; font-weight: 700; background: #e0e7ff; color: #5b4fe0;
  padding: 2px 6px; border-radius: 8px;
}
.suggest-chip.added { background: #5b4fe0; border-color: #5b4fe0; color: #fff; }
.suggest-chip.added .material-symbols-outlined { color: #fff; }
.suggest-chip.added .sc-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* ---- Polished join-a-home result cards (screen 2) ---- */
.join-hh-card {
  display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff;
  border: 1.5px solid #e1e2e7; border-radius: 16px; margin-bottom: 10px;
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.join-hh-card:hover { border-color: #c4c0ff; box-shadow: 0 4px 14px rgba(66, 50, 199, 0.08); }
.join-hh-card.selected { border-color: #5b4fe0; background: #f6f5ff; }
.join-hh-ic {
  width: 44px; height: 44px; border-radius: 14px; background: #f0efff; color: #5b4fe0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.join-hh-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0;
}


/* ================= Documents Vault ================= */
#view-documents { background: #f5f6fb; }
.docs { max-width: 480px; margin: 0 auto; padding: 18px 18px 108px; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; color: #191c1f; box-sizing: border-box; }
.docs-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.docs-head-txt { flex: 1; min-width: 0; }
.docs-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.docs-sub { font-size: 14px; color: #777586; margin: 4px 0 0; }
.docs-add { width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; border: none; background: #4232c7; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(66,50,199,0.28); }
.docs-add .material-symbols-outlined { font-size: 26px; }
.docs-add:active { transform: scale(0.96); }
.docs-ai-note { display: flex; align-items: center; gap: 10px; background: #eef0ff; color: #4232c7; border-radius: 14px; padding: 12px 14px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.docs-ai-note .material-symbols-outlined { font-size: 20px; }
.docs-uploading { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 16px; font-size: 14px; font-weight: 600; color: #474554; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.docs-spinner { width: 20px; height: 20px; border: 3px solid #e0e0f0; border-top-color: #4232c7; border-radius: 50%; animation: docspin 0.8s linear infinite; flex-shrink: 0; }
@keyframes docspin { to { transform: rotate(360deg); } }
.docs-list { display: flex; flex-direction: column; gap: 12px; }
.doc-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1.5px solid #eceef4; border-radius: 18px; padding: 16px; cursor: pointer; transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; }
.doc-card:active { transform: scale(0.99); }
.doc-card:hover { border-color: #c4c0ff; box-shadow: 0 6px 18px rgba(66,50,199,0.08); }
.doc-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: linear-gradient(135deg,#6a5cff,#4232c7); color: #fff; display: flex; align-items: center; justify-content: center; }
.doc-ic .material-symbols-outlined { font-size: 24px; }
.doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.doc-name { font-size: 16px; font-weight: 800; color: #191c1f; line-height: 1.2; overflow-wrap: anywhere; }
.doc-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6a5cff; }
.doc-summary { font-size: 13px; color: #777586; line-height: 1.4; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.doc-chip { display: inline-flex; align-items: center; gap: 4px; background: #f2f3f9; color: #474554; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.doc-chip .material-symbols-outlined { font-size: 14px; }
.doc-chip-date { background: #fff2e0; color: #a15c00; }
.doc-chev { color: #c4c4d0; align-self: center; flex-shrink: 0; }
.docs-empty { text-align: center; padding: 48px 24px; }
.docs-empty-ic { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; background: #eef0ff; color: #4232c7; display: flex; align-items: center; justify-content: center; }
.docs-empty-ic .material-symbols-outlined { font-size: 40px; }
.docs-empty-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.docs-empty-sub { font-size: 14px; color: #777586; margin: 0 auto 20px; max-width: 300px; line-height: 1.5; }
.docs-empty-btn { display: inline-flex; align-items: center; gap: 8px; background: #4232c7; color: #fff; border: none; border-radius: 14px; padding: 14px 20px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(66,50,199,0.28); }
.docs-empty-btn .material-symbols-outlined { font-size: 20px; }

/* Document detail modal */
.doc-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.doc-modal-scrim { position: absolute; inset: 0; background: rgba(20,20,40,0.45); backdrop-filter: blur(2px); }
.doc-modal-sheet { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 26px 26px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow-y: auto; animation: docsheet 0.24s cubic-bezier(0.16,1,0.3,1); }
@keyframes docsheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.doc-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.doc-modal-title { font-size: 21px; font-weight: 800; margin: 0; line-height: 1.2; }
.doc-modal-close { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #f2f3f9; border: none; color: #474554; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.doc-modal-summary { font-size: 14px; color: #474554; line-height: 1.5; margin: 0 0 16px; }
.doc-details { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.doc-detail { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f0f1f5; }
.doc-detail:last-child { border-bottom: none; }
.doc-detail-k { font-size: 13px; color: #777586; font-weight: 600; flex-shrink: 0; }
.doc-detail-v { font-size: 14px; color: #191c1f; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
a.doc-detail-v { color: #4232c7; }
.doc-modal-none { font-size: 14px; color: #777586; text-align: center; padding: 12px 0 20px; }
.doc-preview-img { width: 100%; border-radius: 16px; margin-bottom: 8px; display: block; }
.doc-preview-file { display: flex; align-items: center; gap: 10px; background: #f5f6fb; border-radius: 14px; padding: 16px; color: #4232c7; font-weight: 700; font-size: 14px; text-decoration: none; }
.doc-preview-file .material-symbols-outlined { font-size: 26px; }
.doc-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.doc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; padding: 14px; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; }
.doc-btn .material-symbols-outlined { font-size: 19px; }
.doc-btn-ghost { background: #eef0ff; color: #4232c7; }
.doc-btn-danger { background: #fff; color: #ba1a1a; border-color: #ffdad6; }
/* b107: Vault doc modal — rename, Details/Document tabs, copy buttons. */
.doc-rename-row { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.doc-rename-btn { display: inline-flex; align-items: center; gap: 6px; background: #eef0ff; color: #4232c7; border: none; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.doc-rename-btn .material-symbols-outlined { font-size: 17px; }
.doc-rename-btn:active { transform: scale(.96); }
.doc-tabs { display: flex; gap: 6px; background: #f2f3f9; border-radius: 14px; padding: 4px; margin-bottom: 16px; }
.doc-tab { flex: 1; border: none; background: none; border-radius: 11px; padding: 10px; font-size: 14px; font-weight: 800; color: #777586; cursor: pointer; }
.doc-tab.on { background: #fff; color: #191c1f; box-shadow: 0 1px 3px rgba(20,20,40,.10); }
.doc-tabpane { display: none; }
.doc-tabpane.on { display: block; }
.doc-detail-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-detail-main .doc-detail-k { text-align: left; }
.doc-detail-main .doc-detail-v { text-align: left; }
.doc-copy { flex: none; width: 34px; height: 34px; border-radius: 10px; border: none; background: #f2f3f9; color: #4232c7; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: center; }
.doc-copy .material-symbols-outlined { font-size: 18px; }
.doc-copy:active { transform: scale(.92); }
.doc-copy.copied { background: #d7f5dd; color: #1f7a37; }
.doc-copy-all { width: 100%; margin: 4px 0 14px; }
.doc-empty-details { text-align: center; padding: 24px 12px; color: #777586; }
.doc-empty-details .material-symbols-outlined { font-size: 40px; color: #c3c1d0; }
.doc-empty-details p { font-size: 14px; margin: 8px 0 14px; }
.doc-empty-note { font-size: 13px; color: #9a98a8; }
.doc-btn-primary { background: #4232c7; color: #fff; }

/* b107: iOS-style Contact card on Profile. */
/* ===== b109 · iOS-Contacts contact card: one rounded card PER heading ===== */
.contact-card { background: transparent; border-radius: 0; padding: 0; box-shadow: none;
  display: flex; flex-direction: column; gap: 10px; }
.cc-progress-card { background: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(20,20,40,.06); }
.cc-progress { height: 7px; border-radius: 999px; background: #eef0f5; overflow: hidden; }
.cc-progress-bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #5b4fe0, #3f83e6); transition: width .4s ease; }
.cc-progress-note { font-size: 12.5px; font-weight: 700; color: #777586; margin: 8px 2px 0; }
.cc-rows { display: flex; flex-direction: column; gap: 10px; }
/* each heading = its OWN card */
.cc-card { display: flex; align-items: center; gap: 13px; background: #fff; border-radius: 16px;
  padding: 14px 14px; box-shadow: 0 1px 3px rgba(20,20,40,.06); border: 1px solid transparent;
  text-align: left; -webkit-tap-highlight-color: transparent; }
.cc-card[data-cc-edit] { cursor: pointer; transition: transform .12s ease, background .12s ease; }
.cc-card[data-cc-edit]:active { transform: scale(.985); background: #fafaff; }
.cc-card--empty { border: 1px dashed #d9dae6; box-shadow: none; }
.cc-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eef0ff; color: #4232c7; display: flex; align-items: center; justify-content: center; font-size: 21px; }
.cc-rc { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-k { font-size: 11.5px; color: #9a98a8; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.cc-v { font-size: 15.5px; color: #191c1f; font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.cc-v.cc-empty { color: #b8b6c4; font-weight: 600; }
.cc-chev { flex: none; color: #c7c8d6; font-size: 22px; }
.cc-copy { flex: none; width: 34px; height: 34px; border-radius: 10px; border: none; background: #f2f3f9; color: #4232c7; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cc-copy .material-symbols-outlined { font-size: 18px; }
.cc-copy.copied { background: #d7f5dd; color: #1f7a37; }
.cc-v-multiline { white-space: pre-line; line-height: 1.35; }
.cc-edit-btn { width: 100%; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #eef0ff; color: #4232c7; border: none; border-radius: 14px; padding: 14px; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.cc-edit-btn .material-symbols-outlined { font-size: 19px; }
.cc-edit-btn:active { transform: scale(.98); }

/* b109 · iOS New-Contact edit sheet — one rounded card per field */
.cc-edit-body { display: flex; flex-direction: column; gap: 12px; }
.cc-edit-card { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #ececf3;
  border-radius: 16px; padding: 12px 14px; min-height: 58px; }
.cc-edit-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #eef0ff; color: #4232c7;
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cc-edit-field { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cc-edit-label { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #9a98a8; }
.cc-edit-card input { border: none; background: none; font-size: 16px; color: #191c1f; padding: 2px 0; outline: none; width: 100%; }
.cc-edit-card input::placeholder { color: #b8b6c4; font-weight: 500; }
.cc-edit-card--stack { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.cc-edit-cardhead { display: flex; align-items: center; gap: 13px; padding: 13px 14px 9px; }
.cc-edit-cardtitle { font-size: 15px; font-weight: 800; color: #43414f; }
.cc-addr-row { display: block; padding: 12px 14px; border-top: 1px solid #f0f1f5; }
.cc-addr-row input { border: none; background: none; font-size: 16px; color: #191c1f; outline: none; width: 100%; }
.cc-addr-row input::placeholder { color: #b8b6c4; font-weight: 500; }
#sheet-contact .field { margin-bottom: 14px; }
.doc-file-slot { min-height: 120px; }
.doc-file-hint { text-align: center; color: #9a98a8; font-size: 13px; padding: 30px 0; }
.doc-view-frame { width: 100%; height: 62vh; border: none; border-radius: 14px; background: #f5f6fb; }
/* b108 — document fits the screen: whole image visible (contain), never cropped. */
.doc-view-imgwrap { width: 100%; max-height: 62vh; overflow: auto; border-radius: 14px;
  background: #f5f6fb; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.doc-view-img { max-width: 100%; max-height: 62vh; width: auto; height: auto; object-fit: contain; border-radius: 14px; display: block; }
.doc-af-spin { width: 15px; height: 15px; border-radius: 50%; display: inline-block; vertical-align: -2px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }


/* ================= Settings redesign additions ================= */
.set-section-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9a98a8; margin: 22px 4px 10px; }
.set-card-flush { padding: 6px; }
.set-nav-row { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none; padding: 12px; cursor: pointer; text-align: left; border-radius: 14px; transition: background-color 0.15s ease; }
.set-nav-row:active { background: #f2f3f9; }
.set-nav-row + .set-nav-row { border-top: 1px solid #f0f1f5; }
.set-nav-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.set-nav-ic .material-symbols-outlined { font-size: 22px; }
.set-nav-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-nav-label { font-size: 15px; font-weight: 700; color: #191c1f; }
.set-nav-sub { font-size: 12px; color: #777586; margin-top: 1px; }
.set-nav-chev { color: #c4c4d0; }

/* ---- Assignee faces on Home tiles (#2) ---- */
.c-faces { display: inline-flex; align-items: center; margin-right: 4px; }
.c-face { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid rgba(255,255,255,0.9); margin-left: -8px; box-sizing: border-box; }
.c-face:first-child { margin-left: 0; }
.c-face img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Document renewal reminder banner (#doc modal) ---- */
.doc-reminder { display: flex; align-items: center; gap: 10px; width: 100%; border-radius: 14px; padding: 13px 14px; font-size: 13px; font-weight: 700; margin-bottom: 16px; text-align: left; }
.doc-reminder .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.doc-reminder.is-set { background: #e9f7ee; color: #1a7f37; }
.doc-reminder.is-cta { background: #fff2e0; color: #a15c00; border: none; cursor: pointer; }
.doc-reminder.is-cta:active { transform: scale(0.99); }
.doc-reminder.is-cta:disabled { opacity: 0.6; }
.doc-chip-rem { background: #e9f7ee; color: #1a7f37; }

/* ---- App guide ("what this app can do") ---- */
.guide-intro { font-size: 14px; color: #474554; line-height: 1.5; margin: 0 0 20px; }
.guide-sec { margin-bottom: 22px; }
.guide-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.guide-sec-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #eef0ff; color: #4232c7; display: flex; align-items: center; justify-content: center; }
.guide-sec-ic .material-symbols-outlined { font-size: 20px; }
.guide-sec-head h3 { font-size: 16px; font-weight: 800; margin: 0; color: #191c1f; }
.guide-list { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.guide-list li { position: relative; padding-left: 22px; font-size: 13.5px; color: #474554; line-height: 1.5; }
.guide-list li::before { content: ''; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #6a5cff; }

/* ---- In-app inbox (bell feed) ---- */
.inbox-clear { background: none; border: none; color: #6a5cff; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 4px; }
.inbox-clear:active { opacity: 0.6; }
.inbox-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: #fff; border: none; border-bottom: 1px solid #f0f1f5; padding: 14px 4px; cursor: pointer; position: relative; }
.inbox-item:last-child { border-bottom: none; }
.inbox-item:active { background: #f7f8fc; }
.inbox-item.is-unread { background: #f5f4ff; }
.inbox-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: #eef0ff; color: #4232c7; display: flex; align-items: center; justify-content: center; }
.inbox-ic .material-symbols-outlined { font-size: 20px; }
.inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-title { font-size: 14px; font-weight: 800; color: #191c1f; overflow-wrap: anywhere; }
.inbox-body-txt { font-size: 13px; color: #474554; line-height: 1.4; overflow-wrap: anywhere; }
.inbox-time { font-size: 11px; color: #9a98a8; font-weight: 600; margin-top: 2px; }
.inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: #6a5cff; flex-shrink: 0; margin-top: 6px; }
.inbox-empty { text-align: center; padding: 44px 20px; color: #777586; }
.inbox-empty .material-symbols-outlined { font-size: 44px; color: #c4c4d0; }
.inbox-empty p { font-size: 16px; font-weight: 800; color: #474554; margin: 12px 0 4px; }
.inbox-empty span { font-size: 13px; }

/* ============================================================
   Round: 8-feature update (folders, just-mine, guide, reminders,
   item-sheet polish). Uses the existing design tokens.
   ============================================================ */

/* #8 — Item sheet polish: give inputs/selects a clear resting border and a
   proper accent focus ring so the "add detail" sheet reads as part of the app. */
#sheet-shop-item .field input,
#sheet-shop-item .field select,
#sheet-shop-item .field textarea {
  border: 1px solid var(--hair);
  background: var(--surface);
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#sheet-shop-item .field input:focus,
#sheet-shop-item .field select:focus,
#sheet-shop-item .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 79, 224, 0.14);
}
#sheet-shop-item .field > span {
  font-weight: 600;
  color: var(--text-2);
  font-size: var(--fs-subhead);
}
#sheet-shop-item h2 { font-size: 22px; font-weight: 800; }

/* #3 — Home "just mine" toggle */
.dash-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.mine-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--hair); background: var(--surface);
  color: var(--text-2); font-size: var(--fs-subhead); font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.mine-toggle .material-symbols-outlined { font-size: 18px; }
.mine-toggle.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 14px rgba(91,79,224,.28);
}
.dash-mine-empty {
  text-align: center; padding: 40px 24px; color: var(--text-2);
}
.dash-mine-empty .material-symbols-outlined { font-size: 44px; color: var(--accent); opacity: .7; }
.dash-mine-empty p { margin: 12px 0 4px; font-weight: 700; color: var(--text); }
.dash-mine-empty span { font-size: var(--fs-footnote); }

/* #6 — Documents Vault folders */
.vault-folders {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.vault-folder {
  position: relative; text-align: left; cursor: pointer;
  border: none; background: transparent; padding: 0;
  display: flex; flex-direction: column;
}
.vault-folder-body {
  position: relative;
  height: 120px; border-radius: 6px 18px 18px 18px;
  background: hsl(var(--fhue) 60% 94%);
  border: 1px solid hsl(var(--fhue) 45% 85%);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.vault-folder-tab {
  position: absolute; top: -9px; left: 14px; width: 46%; height: 16px;
  border-radius: 8px 8px 0 0;
  background: hsl(var(--fhue) 55% 82%);
  z-index: 0;
}
.vault-folder-ic { font-size: 40px; color: hsl(var(--fhue) 45% 42%); }
.vault-folder-name { margin-top: 10px; font-weight: 800; font-size: var(--fs-headline); color: var(--text); line-height: 1.2; }
.vault-folder-count { font-size: var(--fs-footnote); color: var(--text-3); margin-top: 2px; }
.vault-folder-new .vault-folder-body-new {
  height: 120px; border-radius: 18px;
  background: transparent; border: 2px dashed rgba(120,120,140,0.32);
  box-shadow: none;
}
.vault-folder-new .vault-folder-ic { color: var(--text-3, #9a99a8); }
.vault-folder-new .vault-folder-name { color: var(--text-2, #8b8a98); }
.vault-folder-del {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(20,20,30,0.55); color: #fff;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
}

.vault-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: var(--fs-subhead);
  padding: 4px 0 14px;
}
.vault-back .material-symbols-outlined { font-size: 20px; }
.docs-folder-empty { text-align: center; padding: 40px 20px; color: var(--text-3); }
.docs-folder-empty .material-symbols-outlined { font-size: 40px; opacity: .6; }

/* #4/#7 — Guide "Try it" deep-link button */
.guide-try {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-weight: 700; font-size: var(--fs-subhead);
  box-shadow: 0 4px 14px rgba(91,79,224,.28);
}
.guide-try .material-symbols-outlined { font-size: 18px; }
.guide-try:active { background: var(--primary-hover); }

/* #2 — Default reminder timing (settings) */
.set-remind-row { display: flex; gap: 10px; align-items: center; }
.set-remind-row select {
  flex: 1; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--surface); color: var(--text);
  font-size: var(--fs-body); -webkit-appearance: none; appearance: none;
}
.set-save-btn {
  flex: 0 0 auto; padding: 12px 20px; border-radius: var(--r-md);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-weight: 700; font-size: var(--fs-subhead);
}
.set-save-btn:active { background: var(--primary-hover); }

/* ============================================================
   Round: household + attachments fixes
   ============================================================ */

/* Add-member modal: name + child toggle */
#addmem-modal .field { margin-bottom: 18px; }
.addmem-toggle {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--surface);
  cursor: pointer; text-align: left; margin-bottom: 20px;
}
.addmem-toggle-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.addmem-toggle-title { font-weight: 700; color: var(--text); }
.addmem-toggle-sub { font-size: var(--fs-footnote); color: var(--text-3); }
.addmem-switch {
  flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px;
  background: var(--hair); position: relative; transition: background .18s ease;
}
.addmem-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .18s var(--ease-spring);
}
.addmem-toggle[aria-checked="true"] .addmem-switch { background: var(--accent); }
.addmem-toggle[aria-checked="true"] .addmem-knob { transform: translateX(20px); }
.addmem-actions { display: flex; gap: 12px; }
.addmem-actions .btn { flex: 1; }

/* Remove-attachment button in the item sheet */
#s-attach-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.attach-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-remove {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--danger, #d64545); background: transparent;
  color: var(--danger, #d64545); font-weight: 600; font-size: var(--fs-footnote);
  cursor: pointer;
}
.attach-remove:active { background: rgba(214,69,69,.08); }

/* In-app attachment viewer */
.viewer-img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.viewer-frame { width: 100%; height: 68vh; border: none; border-radius: var(--r-md); background: #fff; }
.viewer-fallback {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--accent); font-weight: 700;
}
#viewer-open { text-decoration: none; }

/* Document folder picker in the doc modal */
.doc-folder-pick { margin: 16px 0; display: flex; flex-direction: column; gap: 6px; }
.doc-folder-pick label { font-size: var(--fs-footnote); color: var(--text-3); font-weight: 600; }
.doc-folder-pick select {
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--hair); background: var(--surface); color: var(--text);
  font-size: var(--fs-body); -webkit-appearance: none; appearance: none;
}

/* ================= Bottom-nav pending badge ================= */
.bn-item { position: relative; }
.bn-dot {
  position: absolute; top: 2px; right: calc(50% - 18px);
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30; border: 2px solid rgba(255,255,255,0.95);
}

/* ================= Pending Items tab ================= */
#view-pending { background: var(--bg, #f6f7fb); min-height: 100vh; }
.pend { max-width: 480px; margin: 0 auto; padding: 20px 18px 120px; box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; color: var(--text, #191c1f); }
.pend-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pend-avatar { width: 46px; height: 46px; border-radius: 50%; border: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800;
  font-size: 18px; flex-shrink: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.pend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pend-head-txt { flex: 1; min-width: 0; }
.pend-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.pend-sub { font-size: 14px; color: var(--text-2, #6b6a78); margin: 2px 0 0; }
.pend-bell { position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-surface, #fff); border: 1px solid #eceef4; color: var(--text-2, #474554);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); flex-shrink: 0; }
.pend-bell-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff3b30; border: 2px solid #fff; }

.pend-groups { display: flex; flex-direction: column; gap: 22px; }
.pend-group { animation: pendIn 0.35s ease both; }
@keyframes pendIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pend-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pend-group-ic { width: 38px; height: 38px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.pend-group-name { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; }
.pend-pill { font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.pend-progress { height: 6px; border-radius: 999px; background: #e9eaf0; overflow: hidden; margin-bottom: 12px; }
.pend-progress > span { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }

.pend-card { background: var(--card-surface, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05); margin-bottom: 12px; }
.pend-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6; transition: opacity 0.3s ease, transform 0.3s ease; }
.pend-row:last-child { border-bottom: none; }
.pend-row.done { opacity: 0.4; }
.pend-row.done .pend-row-name { text-decoration: line-through; }
.pend-check { background: none; border: none; padding: 0; cursor: pointer; color: #c3c5d0;
  display: flex; align-items: center; flex-shrink: 0; transition: color 0.15s ease; }
.pend-check .material-symbols-outlined { font-size: 26px; }
.pend-row.done .pend-check { color: #34c759; }
.pend-row.done .pend-check .material-symbols-outlined::before { content: ''; }
.pend-row-txt { flex: 1; min-width: 0; }
.pend-row-name { font-size: 15px; font-weight: 700; margin: 0; color: var(--text, #191c1f); }
.pend-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  font-weight: 600; color: #d98a00; margin-top: 3px; }
.pend-flag .material-symbols-outlined { font-size: 15px; }
.pend-flag-due { color: var(--text-2, #6b6a78); }
.pend-row-face { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }
.pend-row-face img { width: 100%; height: 100%; object-fit: cover; }

.pend-markall { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 16px; padding: 15px; color: #fff; font-weight: 800; font-size: 15px;
  cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.12); transition: transform 0.1s ease, opacity 0.2s ease; }
.pend-markall:active { transform: scale(0.98); }
.pend-markall:disabled { opacity: 0.6; }
.pend-markall .material-symbols-outlined { font-size: 20px; }

.pend-empty { text-align: center; padding: 60px 24px; color: var(--text-2, #6b6a78); }
.pend-empty .material-symbols-outlined { font-size: 56px; color: #c3c5d0; margin-bottom: 12px; }
.pend-empty p { font-size: 16px; font-weight: 700; margin: 0; }

.pend-fab { position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%; border: none; z-index: 61;
  background: linear-gradient(135deg, #6a5cff, #4232c7); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 26px rgba(66,50,199,0.4); transition: transform 0.12s ease; }
.pend-fab:active { transform: scale(0.92); }
.pend-fab .material-symbols-outlined { font-size: 30px; }


  html[data-theme="dark"] .pend-progress{ background: #2c2c2e; }
  html[data-theme="dark"] .pend-row{ border-bottom-color: rgba(255,255,255,0.06); }
  html[data-theme="dark"] .pend-bell{ border-color: rgba(255,255,255,0.08); }


/* ================= List view: "Just mine" toggle ================= */
.list-filterbar { display: flex; align-items: center; gap: 8px; padding: 6px 14px 2px; }
.mine-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,0.14); color: var(--text, #191c1f);
  border: 1.5px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.mine-toggle .material-symbols-outlined { font-size: 17px; }
.mine-toggle:active { transform: scale(0.96); }
.mine-toggle.active {
  background: hsl(var(--hue, 210) 70% 46%); color: #fff;
  border-color: hsl(var(--hue, 210) 70% 46%);
  box-shadow: 0 4px 12px hsl(var(--hue, 210) 70% 46% / 0.35);
}

/* ================= Trip destination essentials ================= */
.trip-essentials { margin: 4px 0 14px; }
.ess-loading { display: flex; align-items: center; gap: 8px; padding: 14px 2px; color: var(--text-2, #6b6a78); font-size: 14px; }
.ess-spin { animation: essspin 1s linear infinite; font-size: 20px; }
@keyframes essspin { to { transform: rotate(360deg); } }
.ess-hint { color: var(--text-2, #6b6a78); font-size: 13.5px; padding: 8px 2px; }
.ess-block { margin-bottom: 16px; }
.ess-h { font-size: 14px; font-weight: 800; margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.ess-note { font-size: 11px; font-weight: 700; color: var(--text-2, #6b6a78); background: rgba(120,120,140,0.14); padding: 3px 9px; border-radius: 999px; }
.wx-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.wx-card { flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 14px; background: linear-gradient(160deg, hsl(205 80% 55% / 0.14), hsl(220 70% 45% / 0.1));
  border: 1px solid hsl(210 60% 60% / 0.2); }
.wx-dow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.wx-date { font-size: 10px; color: var(--text-2, #6b6a78); }
.wx-emoji { font-size: 24px; margin: 3px 0; }
.wx-temp { font-size: 14px; font-weight: 800; }
.wx-lo { font-weight: 600; color: var(--text-2, #6b6a78); margin-left: 3px; }
.wx-precip { font-size: 10px; color: #2f7fd0; font-weight: 700; }
.ess-info { border-radius: 14px; overflow: hidden; border: 1px solid rgba(120,120,140,0.16); }
.ess-row { display: flex; gap: 12px; padding: 10px 13px; border-bottom: 1px solid rgba(120,120,140,0.12); }
.ess-row:last-child { border-bottom: none; }
.ess-k { flex: 0 0 40%; font-weight: 700; font-size: 13px; }
.ess-v { flex: 1; font-size: 13px; color: var(--text, #191c1f); }
.ess-ai { font-size: 11px; color: var(--text-2, #9a99a8); margin: 7px 2px 0; }

.ess-wiki { font-size: 12.5px; line-height: 1.5; color: var(--text-2, #6b6a78); margin: 9px 2px 0; }
.cur-conv { padding: 9px 13px; font-size: 13px; background: rgba(99,91,255,0.06); color: var(--text, #191c1f); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cur-conv b { color: var(--brand, #635bff); font-weight: 800; }
.cur-src { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #9a99a8); background: rgba(120,120,140,0.12); padding: 2px 7px; border-radius: 999px; margin-left: auto; }

/* #5 — Passengers & documents (auto-pulled from the Vault) on the trip Info sheet */
.pax-sub { font-size: 12.5px; color: var(--text-2, #8b8a98); margin: 2px 2px 10px; }
.pax-row { padding: 12px 0; border-top: 1px solid rgba(120,120,140,0.14); }
.pax-row:first-of-type { border-top: none; }
.pax-name { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.pax-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--brand, #635bff); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.pax-doc { background: rgba(99,91,255,0.05); border: 1px solid rgba(99,91,255,0.14); border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; }
.pax-doc-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text, #191c1f); }
.pax-doc-head .material-symbols-outlined { font-size: 19px; color: var(--brand, #635bff); }
.pax-doc-title { flex: 1; }
.pax-doc-go { color: var(--text-3, #b7b6c2) !important; font-size: 20px !important; }
.pax-fields { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pax-field { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pax-field span { color: var(--text-2, #8b8a98); }
.pax-field b { color: var(--text, #191c1f); font-weight: 700; text-align: right; }
.pax-empty { font-size: 12.5px; color: var(--text-2, #8b8a98); padding: 4px 0; }
.pax-link { color: var(--brand, #635bff); font-weight: 700; }
/* b112 · iOS-Contacts passport card, one per passenger (RULES R25). */
.pax-card { background: #fff; border-radius: 18px; padding: 6px 14px 12px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(20,20,40,.06); border: .5px solid rgba(120,120,140,.12); }
.pax-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 0 6px; }
.pax-card-name { font-weight: 800; font-size: 16px; color: var(--text, #191c1f); }
.pc-fields { display: flex; flex-direction: column; }
.pc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(120,120,140,.12); }
.pc-row:first-child { border-top: none; }
.pc-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eef0ff; color: #4232c7;
  display: flex; align-items: center; justify-content: center; font-size: 19px; }
.pc-rc { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pc-k { font-size: 11px; color: #9a98a8; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.pc-v { font-size: 15px; color: #191c1f; font-weight: 700; overflow-wrap: anywhere; }
.pc-v.pc-empty { color: #b8b6c4; font-weight: 600; }
.pc-docs { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pc-doclink { display: flex; align-items: center; gap: 8px; background: rgba(99,91,255,.06);
  border: 1px solid rgba(99,91,255,.14); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.pc-doclink .material-symbols-outlined { font-size: 18px; color: #4232c7; }
.pc-doclink-t { flex: 1; color: var(--text, #191c1f); }
.pc-go { color: #b7b6c2 !important; }
.pc-empty-note { margin-top: 8px; font-size: 12.5px; color: var(--text-2, #8b8a98); }
.pax-card .pax-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 12.5px; }

  html[data-theme="dark"] .pax-card{ background: #1c1c1e; border-color: rgba(255,255,255,.08); }
  html[data-theme="dark"] .pc-v{ color: #f2f2f7; } html[data-theme="dark"] .pax-card-name{ color: #f2f2f7; }
  html[data-theme="dark"] .pc-ic{ background: rgba(99,91,255,.22); color: #c3bcff; }


/* b113 (f) · clean trip-details cards (iOS style) */
#info-body { display: flex; flex-direction: column; gap: 10px; }
.tinfo-card { display: flex; align-items: flex-start; gap: 12px; background: #fff; border-radius: 16px;
  padding: 13px 14px; box-shadow: 0 1px 3px rgba(20,20,40,.06); border: .5px solid rgba(120,120,140,.12); }
.tinfo-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; background: #eef0ff; color: #4232c7;
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.tinfo-rc { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tinfo-k { font-size: 11px; color: #9a98a8; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tinfo-v { font-size: 15px; color: #191c1f; font-weight: 700; overflow-wrap: anywhere; }
.tinfo-flights { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.tinfo-flight { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: #f2f3fb; border: 1px solid rgba(99,91,255,.16); border-radius: 10px; padding: 6px 10px;
  font-size: 14.5px; font-weight: 800; color: #2f2a5e; letter-spacing: .02em; }
.tinfo-flight .material-symbols-outlined { font-size: 17px; color: #4232c7; }
/* b113 (g) · emergency contacts auto-filled from Profile contact cards */
#people-body { display: flex; flex-direction: column; gap: 10px; }
.em-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 1px 3px rgba(20,20,40,.06); border: .5px solid rgba(120,120,140,.12); }
.em-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; display: grid;
  place-items: center; font-size: 16px; font-weight: 800; }
.em-rc { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.em-n { font-size: 15.5px; font-weight: 800; color: #191c1f; }
.em-p { font-size: 14px; font-weight: 700; color: #4232c7; }
.em-e { font-size: 12.5px; color: #8b8a98; overflow-wrap: anywhere; }
.em-call { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #eaf7ee; color: #1f9d4d;
  display: grid; place-items: center; text-decoration: none; }
.em-call .material-symbols-outlined { font-size: 21px; }

  html[data-theme="dark"] .tinfo-card, html[data-theme="dark"] .em-card{ background: #1c1c1e; border-color: rgba(255,255,255,.08); }
  html[data-theme="dark"] .tinfo-v, html[data-theme="dark"] .em-n{ color: #f2f2f7; }
  html[data-theme="dark"] .tinfo-ic{ background: rgba(99,91,255,.22); color: #c3bcff; }
  html[data-theme="dark"] .tinfo-flight{ background: rgba(99,91,255,.16); color: #d7d3ff; }


/* #3 — Export trips to PDF sheet */
.export-actions { display: flex; gap: 8px; margin: 8px 0 12px; }
.tx-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.tx-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(120,120,140,0.16); border-radius: 14px; cursor: pointer; }
.tx-item input { width: 20px; height: 20px; accent-color: var(--brand, #635bff); flex: 0 0 auto; }
.tx-main { display: flex; flex-direction: column; gap: 1px; }
.tx-main b { font-size: 15px; font-weight: 700; }
.tx-main small { font-size: 12.5px; color: var(--text-2, #8b8a98); }



/* ==========================================================================
   RESPONSIVE / MULTI-PLATFORM FIX  (appended — later cascade wins)
   Phase 1: iPhone notch / Dynamic Island safe areas
   Phase 2: Android foldables & universal single-finger scrolling
   Phase 3: Desktop app experience (left sidebar + wide multi-column)
   Phase 4: Cross-cutting polish + breakpoint ladder
   ========================================================================== */

/* ---------- Phase 1: safe-area top padding on the signed-in views ----------
   .dash / .pend / .docs / .settings previously used a fixed 18–20px top pad,
   so their headers (dash-head bell + "Just mine", pend/docs/set titles) sat
   under the Dynamic Island on an iPhone. Mirror the working .home-head/.topbar
   pattern by folding env(safe-area-inset-top) into the top padding. */
.dash     { padding-top: calc(env(safe-area-inset-top) + 20px); }
.pend     { padding-top: calc(env(safe-area-inset-top) + 20px); }
.docs     { padding-top: calc(env(safe-area-inset-top) + 18px); }
.settings { padding-top: calc(env(safe-area-inset-top) + 18px); }

/* ---------- Phase 2: universal scrolling & dynamic viewport height ----------
   Replace 100vh with 100dvh (dynamic viewport height) so mobile-browser chrome
   and foldable hinges don't clip full-height screens. 100vh stays as a fallback
   for browsers without dvh (declaration simply drops if unsupported). */
.login-wrap, .landing-wrap, .stitch-page { min-height: 100dvh; }
#view-pending { min-height: 100dvh; }

/* Vertical scroll containers pan with one finger. */
.dash, .pend, .docs, .settings, .list, .shop-list, .side-panel {
  touch-action: pan-y;
}
/* Horizontal rails (dashboard glance / house strips, chip rows) pan sideways. */
.dash-glance, .dash-house, .chips, .shop-chips, .t-seg, .gc-items {
  touch-action: pan-x;
}
/* overscroll containment is scoped to overlays only (never the document). */
.side-panel, .doc-modal-sheet { overscroll-behavior: contain; }

/* ==========================================================================
   Phase 3 + 4: DESKTOP  (>= 1024px) — persistent left sidebar + wide shell
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- turn the docked bottom nav into a persistent left sidebar --- */
  #bottomnav.bottomnav {
    top: 0;
    bottom: 0;
    right: auto;
    left: 0;
    width: 248px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    border-top: none;
    border-right: 1px solid #e7e8ed;
    background: rgba(255, 255, 255, 0.97);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #bottomnav.bottomnav::before {
    content: "PRV";
    display: block;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #4232c7;
    letter-spacing: -0.02em;
    padding: 6px 12px 18px;
  }
  #bottomnav .bn-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    position: relative;
    transition: background .15s ease, color .15s ease;
  }
  #bottomnav .bn-item .material-symbols-outlined { font-size: 22px; }
  #bottomnav .bn-item:hover { background: #f2f3f9; color: #4232c7; }
  #bottomnav .bn-item.active { background: #ece9ff; color: #4232c7; }
  #bottomnav .bn-item:focus-visible {
    outline: 2px solid #4232c7;
    outline-offset: 2px;
  }
  /* pending dot moves inline next to the label in the sidebar */
  #bottomnav .bn-item .bn-dot { position: static; margin-left: auto; }

  /* Shift the whole document right ONLY while the sidebar is present, so
     onboarding / sign-in and drill-in (trip / list) screens stay centred. */
  body:has(#bottomnav:not([hidden])) {
    padding-left: 248px;
  }

  /* --- wider centred content shell --- */
  .dash, .pend, .docs, .settings {
    max-width: 1040px;
  }

  /* --- fill the extra width with columns --- */
  .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .dash-pending { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
  .dash-quick { grid-template-columns: repeat(4, 1fr); }
  .settings-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* --- pointer-friendly hover states (touch targets are preserved) --- */
  .g-card:hover, .c-card:hover, .h-card:hover, .dash-qa:hover,
  .gcard:hover, .trip-card:hover, .settings-row:hover { filter: brightness(0.98); }
  .dash-qa:hover { border-color: #4232c7; }

  /* --- sheets / modals become centred dialogs (not full-width bottom sheets) --- */
  .sheet:not(.compact) {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, 92vw);
    transform: translate(-50%, -50%);
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 20px;
    animation: dialogPop .28s var(--ease-out);
  }
  .sheet:not(.compact) .sheet-actions {
    border-radius: 0 0 20px 20px;
  }

  /* b150 — Pet/School/Car profile is a SOLID FULL PAGE, never a centred dialog,
     even on desktop/tablet. The dialog treatment above made it float in the
     middle with a scrim (image 2) and stutter. Higher specificity + later in
     source order than `.sheet:not(.compact)`, so it wins. */
  .sheet.profile-page:not(.compact),
  .sheet.profile-page:not(.compact):not([hidden]) {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    transform: none;
    border-radius: 0;
    animation: prvProfileIn .3s var(--ease-out, cubic-bezier(.22,.61,.36,1));
  }
  .sheet.profile-page:not(.compact) .sheet-actions { border-radius: 0; }

  /* list-options / sub-menu sheet: centred, narrower, still eases up */
  .side-panel {
    left: 50%;
    right: auto;
    width: min(460px, 92vw);
    max-height: 82vh;
    max-height: 82dvh;
    border-radius: 20px;
    bottom: 6vh;
    transform: translateX(-50%) translateY(120%);
  }
  .side-panel.open { transform: translateX(-50%) translateY(0); }

  /* document / inbox modal centres instead of sticking to the bottom */
  .doc-modal { align-items: center; }
  .doc-modal-sheet { border-radius: 24px; max-width: 560px; max-height: 85vh; max-height: 85dvh; }
}

@keyframes dialogPop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
}

/* --- Phase 4: large-desktop tier — a touch more breathing room --- */
@media (min-width: 1440px) {
  .dash, .pend, .docs, .settings { max-width: 1200px; }
}

/* ============================================================
   Home: uniform 3D list icons + "one at a time" carousel
   (added for the Home view-mode feature)
   ============================================================ */
.c-ic-img { width: 56px; height: 56px; object-fit: contain; display: block; }

.dash-pending.dash-carousel { display: block; gap: 0; }
.hc-stage { position: relative; }
.hc-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px;
  touch-action: pan-x;
}
.hc-track::-webkit-scrollbar { display: none; }
.hc-card {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  border-radius: 30px; padding: 22px; color: #fff; cursor: pointer;
  /* Build a92 (Aug 2025) — bumped from 46vh to 60vh so every tile has room
     for the enlarged hero icon (matches the "Trips" hero look). */
  min-height: 60vh; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 16px 34px rgba(0,0,0,0.18); overflow: hidden;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.hc-card:active { transform: scale(0.985); }
.hc-icon { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hc-img {
  /* Build a92 (Aug 2025) — bump icon size again to match the giant Trips
     hero look shown in the user's reference screenshot. Icons now occupy
     ~70% of the tile height on phone. Text sizes unchanged.
     History: 260px → 460px → 620px → 720px (this pass). */
  width: 720px; max-width: 96%; height: auto; max-height: 62vh; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.34));
  /* Bug fix (Aug 2025): iOS Safari opens a share/save sheet on long-press of
     an <img>. Disable the callout, text-selection, drag and drag-image so the
     icon feels like part of the card, not a photo. `user-select:none` also
     blocks the "Copy Subject" / "Look Up" iOS 17+ text-recognition popover. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}
/* Same protection for the tile icons in the "All in one list" view and the
   Profile reorder rows — same PNG, same iOS callout problem. */
.c-ic-img, .hv-order-img {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}

/* ---------- Animated icons (Aug 2025 build a74) ----------
   Built-in categories use Lottie via .lottie-wrap; custom AI-generated
   icons get a subtle CSS bounce instead. Respects prefers-reduced-motion. */
.lottie-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: visible; line-height: 0;
  /* Prevent long-press callout on the wrapper too. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  pointer-events: none;
}
.lottie-wrap svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* Carousel card size — square wrapper (matches the previous .hc-img
   footprint). Lottie compositions are 1400x1400 with the icon centred at
   comp middle; the wrap is transparent so animated transforms can spill.
   Bug fix Aug 2025 §6: bumped to match the enlarged .hc-img so Lottie-driven
   categories (Grocery/Home/Maintenance/Health/etc.) look as big as the AI
   3D icon on custom tiles. Car gets a per-key smaller cap (below) since its
   Lottie already renders wide. */
.hc-icon .lottie-wrap {
  /* Build a92 (Aug 2025) — matched to the bigger .hc-img. */
  width: 720px; max-width: 96%; height: auto; aspect-ratio: 1/1;
  max-height: 62vh;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,0.34));
  position: relative;
}
/* Car — bump only +1 size relative to Phase A (it already renders wide). */
.hc-icon .lottie-wrap[data-lottie-key="car"] {
  width: 560px; max-width: 90%;
  max-height: 52vh;
}
.hc-icon .lottie-wrap .lottie-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* Tile icons in "All in one list" and Profile reorder rows */
.c-ic .lottie-wrap, .hv-order-ic .lottie-wrap {
  width: 100%; height: 100%; aspect-ratio: 1/1;
  position: relative; display: block;
}
.c-ic .lottie-wrap .lottie-poster,
.hv-order-ic .lottie-wrap .lottie-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* Custom AI icon — subtle idle float + entrance bounce. */
@keyframes icon-anim-custom-in {
  0%   { transform: scale(0.6) translateY(-8px); opacity: 0; }
  55%  { transform: scale(1.08) translateY(2px); opacity: 1; }
  75%  { transform: scale(0.97) translateY(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes icon-anim-custom-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1.5deg); }
}
.icon-anim-custom {
  animation: icon-anim-custom-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             icon-anim-custom-idle 3.4s ease-in-out 800ms infinite;
  transform-origin: center bottom;
}
/* Accessibility — no motion for those who prefer it. */
@media (prefers-reduced-motion: reduce) {
  .icon-anim-custom { animation: none !important; }
  .lottie-wrap svg { animation: none !important; }
}
.hc-title { font-size: 30px; font-weight: 800; margin: 0 0 2px; line-height: 1.1; }
.hc-sub { font-weight: 600; opacity: 0.92; margin: 0 0 16px; font-size: 15px; }
.hc-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.28); border-radius: 99px; overflow: hidden; }
.hc-bar > span { display: block; height: 100%; background: #fff; border-radius: 99px; transition: width .4s ease; }
.hc-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; font-weight: 800; letter-spacing: .5px; opacity: .92; }
.hc-badge {
  position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.22); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; z-index: 4;
}
.hc-badge .material-symbols-outlined { font-size: 16px; }
.hc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.92); color: #1f2430; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.hc-nav.hc-prev { left: 6px; }
.hc-nav.hc-next { right: 6px; }
.hc-nav.hidden { display: none; }
.hc-dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0 4px; }
.hc-dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(120,130,150,0.35); transition: all .2s ease; }
.hc-dot.on { width: 22px; background: var(--brand, #5b4fe0); }
.hc-cta {
  width: 100%; margin-top: 8px; padding: 15px; border: none; border-radius: 18px; cursor: pointer;
  background: var(--brand, #5b4fe0); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hc-cta:active { transform: scale(0.98); }

/* Final carousel card: "+ Create new list" — visually distinct (dashed border,
   large plus, muted gradient) so it reads as an action, not another list. */
.hc-card.hc-add {
  border: 2px dashed rgba(255,255,255,0.55);
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}
.hc-card.hc-add .hc-title { opacity: 0.98; }
.hc-card.hc-add .hc-sub { opacity: 0.85; margin-bottom: 4px; }
.hc-add-plus {
  width: 160px; height: 160px; max-width: 60%; max-height: 30vh;
  border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28);
}
.hc-add-plus .material-symbols-outlined {
  font-size: 108px; font-variation-settings: 'FILL' 0, 'wght' 300;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28));
}

/* Profile: Home-screen preferences */
.hv-seg { display: flex; gap: 10px; margin: 10px 0 6px; }
.hv-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 16px; border: 2px solid rgba(120,130,150,0.28); background: transparent;
  cursor: pointer; font-weight: 700; font-size: 13px; color: inherit;
}
.hv-opt .material-symbols-outlined { font-size: 26px; }
.hv-opt.active { border-color: var(--brand, #5b4fe0); background: rgba(91,79,224,0.10); color: var(--brand, #5b4fe0); }
.hv-order-hint { margin: 2px 0 8px; opacity: 0.7; }
.hv-order { display: flex; flex-direction: column; gap: 8px; }
.hv-order-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  background: rgba(120,130,150,0.08); border: 1px solid rgba(120,130,150,0.16);
}
.hv-order-row.dragging { opacity: .9; box-shadow: 0 10px 22px rgba(0,0,0,0.16); }
.hv-grip { color: #9aa0ad; cursor: grab; touch-action: none; }
.hv-order-ic {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.hv-order-img { width: 28px; height: 28px; object-fit: contain; }
.hv-order-name { font-weight: 700; }
/* b115 · per-tile show/hide iOS toggle in Home-screen prefs */
.hv-hide-sw { margin-left: auto; flex: none; }
.hv-order-row.is-hidden { opacity: .55; }
.hv-order-row.is-hidden .hv-order-img { filter: grayscale(1); }

/* ============================================================
   List-level History sheet (#sheet-list-history)
   Shows the last shopping trip (or recent task completions).
   ============================================================ */
.lh-body { padding: 6px 2px 12px; max-height: 62vh; overflow-y: auto; }
.lh-head {
  padding: 14px 16px; border-radius: 16px; margin: 2px 0 16px;
  background: linear-gradient(140deg, hsl(210, 70%, 58%), hsl(220, 68%, 48%));
  color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
.lh-when { font-weight: 700; font-size: 15px; letter-spacing: .1px; }
.lh-by { opacity: .92; font-size: 13px; margin-top: 4px; }
.lh-by b { font-weight: 800; }
.lh-section { margin: 0 0 18px; }
.lh-section-name {
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3); margin: 4px 14px 8px;
}
/* iOS-26 grouped inset card: one rounded card per section, hairline dividers. */
.lh-items {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  background: var(--card-surface, #fff); border: .5px solid var(--hair);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(20,22,40,.05);
}
.lh-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border-bottom: .5px solid var(--hair);
}
.lh-item:last-child { border-bottom: none; }
.lh-tick { color: #16a34a; font-size: 20px; flex: none; }
.lh-label { flex: 1; font-weight: 600; color: var(--text); min-width: 0; }
.lh-flagged { color: var(--text-3); font-size: 12px; flex: none; }
.lh-empty {
  text-align: center; padding: 32px 16px; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lh-empty .material-symbols-outlined { font-size: 44px; opacity: 0.6; }

/* P2-SH - one .lh-shop per shop in the window, newest first. The per-shop
   markup inside is unchanged; this only separates the repetitions.
   C-6: this sheet lives OUTSIDE #view-list, where a var(--dv2-*) token
   silently voids the whole declaration - third time that has bitten. Only the
   global tokens the block above already uses appear here. */
.lh-shop + .lh-shop { margin-top: 22px; padding-top: 20px; border-top: .5px solid var(--hair); }
.lh-shop:last-of-type .lh-section:last-child { margin-bottom: 4px; }
.lh-more {
  display: block; width: calc(100% - 4px); margin: 4px 2px 2px;
  padding: 13px 14px; border-radius: 14px;
  border: .5px solid var(--hair); background: var(--card-surface, #fff);
  color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer;
}
.lh-more:active { opacity: .7; }

/* ============================================================
   Home carousel: press-and-hold "edit" mode
   (jiggle + red X delete + quick-add chip + crumble animation)
   ============================================================ */
.hc-card.hc-jiggle {
  animation: hc-wobble 0.42s ease-in-out infinite alternate;
  box-shadow: 0 22px 42px rgba(0,0,0,0.22);
  z-index: 6;  /* above pagination dots */
  overflow: visible !important;  /* release the Liquid Glass clip so the
                                    delete X (top-right) is fully visible */
}
@keyframes hc-wobble {
  0%   { transform: rotate(-0.9deg); }
  100% { transform: rotate(0.9deg); }
}
.hc-hold-actions {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  overflow: visible;
}
.hc-hold-x, .hc-hold-add {
  pointer-events: auto; position: absolute;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  animation: hc-pop-in 0.22s ease-out;
  transform-origin: center;
}
.hc-hold-x {
  top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #e11d48; color: #fff;  /* rose red — reads as "danger / remove" */
  z-index: 21;
  /* Keep X visible even when parent card clips its overflow (Liquid Glass sets
     overflow:hidden on .hc-card). Use inset positioning so scale-pop stays
     within the card. */
}
.hc-hold-x .material-symbols-outlined {
  font-size: 24px; font-variation-settings: 'wght' 700;
}
.hc-hold-add {
  bottom: 12px; left: 12px;
  padding: 10px 14px; border-radius: 99px;
  background: rgba(255,255,255,0.95); color: #1f2430;
  font-weight: 700; font-size: 14px;
}
.hc-hold-add .material-symbols-outlined { font-size: 20px; }
.hc-hold-add-lbl { padding-right: 2px; }
@keyframes hc-pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Crumble-away animation for delete. Uses transform-origin bottom so the card
   "collapses" downward rather than shrinking symmetrically — reads as
   "removed / gone" rather than "resized". */
.hc-card.hc-crumbling {
  animation: hc-crumble 0.5s cubic-bezier(0.55, 0.05, 0.6, 0.99) forwards;
  transform-origin: 50% 100%;
  pointer-events: none;
}
@keyframes hc-crumble {
  0%   { transform: scale(1) rotate(0);            opacity: 1; filter: blur(0); }
  35%  { transform: scale(1.02) rotate(-1.6deg);   opacity: 0.98; }
  70%  { transform: scale(0.7)  rotate(4deg) translateY(20px); opacity: 0.55; filter: blur(1px); }
  100% { transform: scale(0.15) rotate(10deg) translateY(60px); opacity: 0; filter: blur(3px); }
}

/* ============================================================
   REDESIGN 2025 — List detail header + toolbar (Picture 1)
   ============================================================ */

/* Make the title breathe: no more truncation of "Grocery" behind icons. */
#view-list .lp-topbar { padding-bottom: 8px; }
#view-list .lp-topbar .topbar-row { align-items: center; }
#view-list .lp-title-wrap { flex: 1 1 auto; min-width: 0; }
#view-list .lp-name {
  /* R9 · one title size. -.01em was the odd one out by a hundredth. */
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 5-icon toolbar row: rounded pill under the header. Uses the list's hue. */
.lp-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
  margin: 10px 0 4px;
  padding: 5px 6px;
  border-radius: 18px;
  background: hsl(var(--hue, 210) 60% 100% / .55);
  border: 1px solid hsl(var(--hue, 210) 40% 82% / .55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 14px hsl(var(--hue, 210) 40% 40% / .10),
              0 1px 2px rgba(20,22,32,.04);
}
.lp-tool {
  flex: 1 1 0; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 12px;
  color: hsl(var(--hue, 210) 60% 32%);
  position: relative;
  transition: background .15s ease, transform .1s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lp-tool:hover { background: hsl(var(--hue, 210) 80% 96% / .85); }
.lp-tool:active { transform: scale(.94); background: hsl(var(--hue, 210) 80% 94%); }
.lp-tool[aria-pressed="true"] {
  background: hsl(var(--hue, 210) 70% 92%);
  color: hsl(var(--hue, 210) 70% 30%);
}
.lp-tool svg { pointer-events: none; }

/* Tooltip — appears on desktop :hover, or when JS adds .show-tip on
   mobile long-press. */
.lp-tip {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20,22,32,.94); color: #fff;
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  padding: 6px 10px; border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 30;
  max-width: 220px;
}
.lp-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(20,22,32,.94);
}
/* Show on desktop hover (pointer:fine) */
@media (hover: hover) and (pointer: fine) {
  .lp-tool:hover .lp-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Show when JS toggles show-tip (mobile long-press) */
.lp-tool.show-tip .lp-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dark tooltip on dark scheme too */

  html[data-theme="dark"] .lp-tools{
    background: hsl(var(--hue, 210) 30% 18% / .55);
    border-color: hsl(var(--hue, 210) 25% 30% / .5);
  }
  html[data-theme="dark"] .lp-tool{ color: hsl(var(--hue, 210) 60% 72%); }
  html[data-theme="dark"] .lp-tool:hover{ background: hsl(var(--hue, 210) 45% 22% / .8); }


/* Hide legacy top-row icon buttons that used to be in the header row. */
.lp-legacy { display: none !important; }

/* Ensure back button remains circular against the light tinted header.
   Bug §3 fix (a89 · Aug 2026): the old hue-tinted chip
   `hsl(var(--hue) 62% 55%)` washed out to near-invisible white-on-light on
   pale hues (yellow/teal), breaking RULES.md R3. Per DESIGN.md the back
   button must be a SOLID NAVY chip with a white chevron — visible on every
   background. */
#view-list .back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20,24,55,0.92);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  flex: 0 0 auto;
}
#view-list .back-btn:active { transform: scale(.92); }
#view-list .back-btn svg { stroke: #fff; }

/* Nudge the filter bar closer to the toolbar */
#view-list .list-filterbar { margin-top: 4px; }

/* ============================================================
   REDESIGN 2025 — Options popup (Picture 2)
   iOS 26/27-style floating sheet, tinted header, default assignee.
   Overrides on .side-panel (kept id/class for existing JS wiring).
   ============================================================ */

/* Turn the old side-panel into a bottom-anchored floating popup. */
.side-panel.lp-sheet {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  top: auto;
  width: auto; max-width: 640px; margin: 0 auto;
  height: auto; max-height: 84vh;
  transform: translateY(120%);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 24px 60px rgba(16,17,25,.22),
    0 6px 16px rgba(16,17,25,.08);
  overflow-y: auto;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 20px);
  transition: transform .32s cubic-bezier(.32,.72,.24,1);
}
.side-panel.lp-sheet.open { transform: translateY(0); }
.side-panel.lp-sheet::before { content: none; }


  html[data-theme="dark"] .side-panel.lp-sheet{
    background: rgba(30,30,34,.86);
    border-color: rgba(255,255,255,.08);
  }


.lp-grab {
  display: block;
  width: 38px; height: 5px; border-radius: 99px;
  background: rgba(60,60,67,.28);
  margin: 2px auto 12px;
}

.lp-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 12px;
  border-bottom: 0;
  position: static;   /* override the side-panel default */
}
.lp-sheet-icon {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg,
    hsl(var(--hue, 210) 70% 55%),
    hsl(var(--hue, 210) 78% 45%));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  box-shadow: 0 4px 12px hsl(var(--hue, 210) 60% 45% / .35);
  flex: none;
}
.lp-sheet-icon img { width: 26px; height: 26px; object-fit: contain; }
/* b232 — the tile holds a line icon on every list now, not only on Grocery
   (design-v2-grocery.css:1617 sized it there). Ungated, same 20px. */
.lp-sheet-lineic { width: 20px; height: 20px; }
/* Was inline `style="background:#f0a868"` on #sheet-filter's head. Moved to a
   class so the Design V2 grocery sheet can override it without !important —
   the rendered colour is unchanged for every other list. */
.lp-sheet-icon--filter { background: #f0a868; }
.lp-sheet-title {
  flex: 1; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em;
  color: hsl(var(--hue, 210) 65% 30%);
  background: linear-gradient(90deg,
    hsl(var(--hue, 210) 68% 45%),
    hsl(var(--hue, 210) 78% 35%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

  html[data-theme="dark"] .lp-sheet-title{
    background: linear-gradient(90deg,
      hsl(var(--hue, 210) 70% 72%),
      hsl(var(--hue, 210) 90% 82%));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.lp-sheet-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(60,60,67,.10); color: rgba(60,60,67,.7);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.lp-sheet-close:active { transform: scale(.92); }

/* Sheet nav — resets old side-panel padding rules. */
.lp-panel-nav { padding: 0 !important; display: block; }

.lp-group-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(60,60,67,.55); font-weight: 700;
  padding: 12px 6px 6px;
}

  html[data-theme="dark"] .lp-group-lbl{ color: rgba(235,235,245,.5); }

.lp-group {
  background: #fff;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(60,60,67,.08);
  overflow: hidden;
}

  html[data-theme="dark"] .lp-group{
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }

.lp-group + .lp-group-lbl { margin-top: 4px; }

/* Reset the legacy rounded-corner rules that mess with our new grouping. */
.lp-panel-nav .panel-item + .panel-item { border-top: 0 !important; }
.lp-panel-nav > .panel-item { border-radius: 0 !important; }
.lp-panel-nav > .panel-item.lp-row { background: transparent; }

.lp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; min-height: 52px;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(60,60,67,.08);
  width: 100%;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.lp-group > .lp-row:last-child { border-bottom: 0; }
.lp-row:active { background: rgba(60,60,67,.05); }
.lp-lic {
  width: 28px; height: 28px; border-radius: 8px;
  background: hsl(var(--hue, 210) 90% 96%);
  color: hsl(var(--hue, 210) 65% 40%);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

  html[data-theme="dark"] .lp-lic{
    background: hsl(var(--hue, 210) 30% 22%);
    color: hsl(var(--hue, 210) 70% 78%);
  }

.lp-lbl { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.lp-lbl b { color: hsl(var(--hue, 210) 65% 34%); font-weight: 700; }

  html[data-theme="dark"] .lp-lbl b{ color: hsl(var(--hue, 210) 70% 78%); }

.lp-chev { color: rgba(60,60,67,.4); flex: none; }
.lp-destr .lp-lbl { color: #d0342c; }
.lp-destr .lp-lic { background: #ffecec; color: #d0342c; }

  html[data-theme="dark"] .lp-destr .lp-lic{ background: rgba(255,80,80,.15); color: #ff6b6b; }
  html[data-theme="dark"] .lp-destr .lp-lbl{ color: #ff6b6b; }


/* Person dropdown */
.lp-drop { padding: 0; }
.lp-drop-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
}
.lp-drop[open] .lp-drop-head,
.lp-drop-head[aria-expanded="true"] { border-bottom: 1px solid rgba(60,60,67,.08); }
.lp-drop-chev { color: rgba(60,60,67,.4); transition: transform .18s ease; flex: none; }
.lp-drop-head[aria-expanded="true"] .lp-drop-chev { transform: rotate(180deg); }
.lp-drop-body { max-height: 260px; overflow: auto; }
.lp-drop-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  border-bottom: 1px solid rgba(60,60,67,.05);
  text-align: left;
  font-size: 15px; color: var(--text);
}
.lp-drop-opt:last-child { border-bottom: 0; }
.lp-drop-opt.on {
  background: hsl(var(--hue, 210) 90% 97%);
  color: hsl(var(--hue, 210) 65% 32%);
  font-weight: 700;
}

  html[data-theme="dark"] .lp-drop-opt.on{
    background: hsl(var(--hue, 210) 40% 18%);
    color: hsl(var(--hue, 210) 70% 78%);
  }

.lp-drop-opt .lp-tick { margin-left: auto; color: hsl(var(--hue, 210) 65% 45%); }

.lp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(60,60,67,.15);
  color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.lp-note {
  font-size: 12px; color: rgba(60,60,67,.6);
  padding: 6px 6px 4px;
}
 html[data-theme="dark"] .lp-note{ color: rgba(235,235,245,.55); } 

.lp-field {
  background: #fff; padding: 12px 14px; margin: 0;
  border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(60,60,67,.08);
}

  html[data-theme="dark"] .lp-field{
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }

.lp-field + .lp-field { margin-top: 8px; }

/* Hide the removed legacy actions but keep them in the DOM for wiring. */
.lp-removed { display: none !important; }

/* Panel scrim — subtle blur behind the sheet */
.panel-scrim { background: rgba(20,22,32,.32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ============================================================
   REDESIGN 2025 — Item / Section sheets (Pictures 3 & 4)
   ============================================================ */

/* Give both sheets the iOS-27 floating-popup look. */
.sheet.lp-item-sheet,
.sheet.lp-sec-sheet {
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px 28px 24px 24px !important;
  box-shadow:
    0 24px 60px rgba(16,17,25,.22),
    0 6px 16px rgba(16,17,25,.08) !important;
}

  html[data-theme="dark"] .sheet.lp-item-sheet,
  html[data-theme="dark"] .sheet.lp-sec-sheet{
    background: rgba(30,30,34,.9) !important;
    border-color: rgba(255,255,255,.08);
  }

.lp-in-sheet {
  margin: 0 -6px 12px !important;
  padding: 0 !important;
}

/* Shop dropdown inside the item edit sheet */
.lp-shop-drop {
  padding: 0;
}
.lp-shop-drop > span {
  display: block;
  padding: 4px 2px 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(60,60,67,.55);
}
.lp-shop-drop-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(60,60,67,.15);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px; font-weight: 500; color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease;
}
.lp-shop-drop-head:active { transform: scale(.995); }
.lp-shop-drop-head[aria-expanded="true"] {
  border-color: hsl(var(--hue, 210) 55% 55%);
  border-radius: 14px 14px 0 0;
}
.lp-shop-drop-head .lp-shop-drop-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-shop-drop-head .lp-drop-chev { color: rgba(60,60,67,.5); transition: transform .18s ease; flex: none; }
.lp-shop-drop-head[aria-expanded="true"] .lp-drop-chev { transform: rotate(180deg); color: hsl(var(--hue, 210) 60% 40%); }

  html[data-theme="dark"] .lp-shop-drop-head{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--text); }

.lp-shop-drop-body {
  background: #fff;
  border: 1px solid hsl(var(--hue, 210) 55% 55%);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 6px 8px;
}

  html[data-theme="dark"] .lp-shop-drop-body{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }

/* Repaint chips inside the dropdown as full-width rows for scannability. */
.lp-shop-drop-body .chip {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 10px 12px !important;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  margin: 0 !important;
  transition: background .12s ease;
}
.lp-shop-drop-body .chip:not(.shop-roll-row)::after {
  content: "";
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(60,60,67,.25);
  transition: background .12s ease, border-color .12s ease;
}
.lp-shop-drop-body .chip.on { background: hsl(var(--hue, 210) 90% 96%); color: hsl(var(--hue, 210) 65% 32%); font-weight: 700; }
.lp-shop-drop-body .chip.on:not(.shop-roll-row)::after {
  background: hsl(var(--hue, 210) 65% 45%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>') center/12px 12px no-repeat;
  border-color: hsl(var(--hue, 210) 65% 45%);
}
.lp-shop-drop-body .shop-chosen,
.lp-shop-drop-body .shop-more-toggle,
.lp-shop-drop-body .shop-more-list,
.lp-shop-drop-body .chip-note { all: unset; display: block; }
.lp-shop-drop-body .chip-note { color: rgba(60,60,67,.6); padding: 8px 10px; font-size: 13px; }

/* ============================================================
   REDESIGN 2025 — Item row assignee chip + dropdown (Picture 5)
   ============================================================ */

.lp-assign-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background: hsl(var(--hue, 210) 90% 96%);
  color: hsl(var(--hue, 210) 65% 32%);
  border: 1px solid hsl(var(--hue, 210) 55% 85%);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  max-width: 130px;
  transition: transform .1s ease, background .15s ease;
}
.lp-assign-chip:active { transform: scale(.96); }
.lp-assign-chip.unassigned {
  background: rgba(60,60,67,.06);
  color: rgba(60,60,67,.6);
  border-color: rgba(60,60,67,.14);
}
.lp-assign-chip .av {
  width: 22px; height: 22px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  overflow: hidden;
}
.lp-assign-chip .av img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border-radius: inherit;
}
.lp-assign-chip.unassigned .av { background: rgba(60,60,67,.2); color: rgba(60,60,67,.7); }
.lp-assign-chip .nm { max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-assign-chip .chev { width: 12px; height: 12px; opacity: .7; flex: none; }

  html[data-theme="dark"] .lp-assign-chip{ background: hsl(var(--hue, 210) 30% 22%); color: hsl(var(--hue, 210) 70% 78%); border-color: hsl(var(--hue, 210) 30% 30%); }


/* Floating dropdown menu for assignee (positioned absolutely under the chip) */
.lp-assign-menu {
  position: absolute;
  z-index: 100;
  min-width: 180px; max-width: 220px;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20,22,32,.18), 0 0 0 1px rgba(60,60,67,.08);
  padding: 6px;
  animation: lp-fade-in .18s ease;
}
@keyframes lp-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

  html[data-theme="dark"] .lp-assign-menu{ background: rgba(30,30,34,.95); box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); }

.lp-assign-menu .head {
  padding: 8px 10px 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(60,60,67,.55);
}
.lp-assign-menu .opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: 10px;
  cursor: pointer;
  background: transparent; border: 0;
  width: 100%; text-align: left;
  font-size: 14px; color: var(--text);
}
.lp-assign-menu .opt:hover { background: rgba(60,60,67,.06); }
.lp-assign-menu .opt.on {
  background: hsl(var(--hue, 210) 90% 96%);
  color: hsl(var(--hue, 210) 65% 32%);
  font-weight: 700;
}

  html[data-theme="dark"] .lp-assign-menu .opt.on{ background: hsl(var(--hue, 210) 30% 22%); color: hsl(var(--hue, 210) 70% 78%); }

.lp-assign-menu .opt .av {
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lp-assign-menu .opt .av img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border-radius: inherit;
}
.lp-assign-menu .opt .tick { margin-left: auto; color: hsl(var(--hue, 210) 65% 45%); }
.lp-assign-menu .sep { border-top: 1px solid rgba(60,60,67,.1); margin: 4px 4px; }

/* ============================================================
   REDESIGN 2025 — Tasks / Shopping / Both segmented control
   ============================================================ */
.lp-kind-seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin: 6px 0 4px;
  padding: 4px;
  border-radius: 14px;
  background: hsl(var(--hue, 210) 60% 100% / .55);
  border: 1px solid hsl(var(--hue, 210) 40% 82% / .55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.lp-kind-seg button {
  height: 34px; border: 0; border-radius: 10px;
  background: transparent; color: rgba(60,60,67,.7);
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.lp-kind-seg button.on {
  background: hsl(var(--hue, 210) 65% 50%); color: #fff;
  box-shadow: 0 3px 10px hsl(var(--hue, 210) 60% 45% / .35);
}
.lp-kind-seg svg { width: 14px; height: 14px; }

  html[data-theme="dark"] .lp-kind-seg{ background: hsl(var(--hue, 210) 30% 18% / .55); border-color: hsl(var(--hue, 210) 25% 30% / .5); }
  html[data-theme="dark"] .lp-kind-seg button{ color: rgba(235,235,245,.6); }


/* Item-kind picker (task/shopping) in the item sheet — for 'both' lists */
.lp-kind-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0;
}
.lp-kind-picker button {
  padding: 10px; border-radius: 12px;
  background: rgba(60,60,67,.06);
  border: 1px solid rgba(60,60,67,.12);
  color: var(--text);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lp-kind-picker button.on {
  background: hsl(var(--hue, 210) 90% 95%);
  border-color: hsl(var(--hue, 210) 55% 55%);
  color: hsl(var(--hue, 210) 65% 32%);
}

  html[data-theme="dark"] .lp-kind-picker button{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
  html[data-theme="dark"] .lp-kind-picker button.on{ background: hsl(var(--hue, 210) 30% 22%); border-color: hsl(var(--hue, 210) 55% 55%); color: hsl(var(--hue, 210) 70% 78%); }



/* ============================================================
   Icon picker + AI-icon warning banner (Aug 2025)
   ============================================================ */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 12px;
}
.icon-picker-grid .ip-tile {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: rgba(60, 60, 67, .05);
  border: 1.5px solid rgba(60, 60, 67, .08);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.icon-picker-grid .ip-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.icon-picker-grid .ip-tile:hover { background: rgba(91, 79, 224, .08); }
.icon-picker-grid .ip-tile:active { transform: scale(.94); }
.icon-picker-grid .ip-tile.on {
  border-color: var(--accent, #5b4fe0);
  background: rgba(91, 79, 224, .12);
  box-shadow: 0 0 0 3px rgba(91, 79, 224, .15);
}
.icon-picker-actions {
  display: flex;
  gap: 10px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
#icon-picker-status { color: hsl(0, 0%, 40%); font-size: 12px; }

.lp-icon-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 6px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(251, 146, 60, .18));
  border: 1px solid rgba(251, 146, 60, .35);
  border-radius: 14px;
  font-size: 13px;
  color: #7a4c00;
}
.lp-icon-warn .material-symbols-outlined {
  font-size: 22px;
  color: #b45309;
  flex: none;
}
.lp-icon-warn-msg { flex: 1; line-height: 1.3; }
.lp-icon-warn .btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

  html[data-theme="dark"] .icon-picker-grid .ip-tile{
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
  }
  html[data-theme="dark"] .icon-picker-grid .ip-tile:hover{ background: rgba(147, 138, 244, .18); }
  html[data-theme="dark"] .icon-picker-grid .ip-tile.on{
    border-color: hsl(250 80% 70%);
    background: rgba(147, 138, 244, .22);
    box-shadow: 0 0 0 3px rgba(147, 138, 244, .18);
  }
  html[data-theme="dark"] .lp-icon-warn{
    background: linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(251, 146, 60, .12));
    border-color: rgba(251, 146, 60, .28);
    color: #fbbf24;
  }
  html[data-theme="dark"] .lp-icon-warn .material-symbols-outlined{ color: #fbbf24; }



/* ==========================================================================
   LIQUID GLASS UI  ·  Build a81  ·  2026-08-03
   Unified iOS-26-style "wet glass" material applied across every surface.
   This block is intentionally appended last so it wins the cascade without
   requiring !important. Structural rules above are untouched.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Wallpaper gradient the whole app sits on. Every glass surface tints from
     this. Warm-lavender by default; per-view overrides below. */
  --lg-wall-1: #ffe3f0;    /* peach   */
  --lg-wall-2: #dbe6ff;    /* cornflower */
  --lg-wall-3: #e7dcff;    /* lilac   */
  --lg-wall-4: #fef7fb;    /* off-white */

  /* Material tints */
  --lg-mat-light:  rgba(255,255,255,.62);
  --lg-mat-thin:   rgba(255,255,255,.42);
  --lg-mat-thick:  rgba(255,255,255,.82);
  --lg-mat-dark:   rgba(24,24,32,.42);

  /* Border hairlines & inner highlight */
  --lg-hair:       rgba(255,255,255,.55);
  --lg-hair-dim:   rgba(255,255,255,.28);
  --lg-hair-ink:   rgba(15,20,60,.06);
  --lg-inset:      inset 0 1px 0 rgba(255,255,255,.65);
  --lg-inset-dim:  inset 0 1px 0 rgba(255,255,255,.35);

  /* Shadows */
  --lg-lift-1: 0 6px 16px rgba(15,20,60,.06);
  --lg-lift-2: 0 12px 32px rgba(15,20,60,.10);
  --lg-lift-3: 0 24px 48px -20px rgba(60,50,180,.35);

  /* Blur/saturation for the "wet glass" feel */
  --lg-blur:     22px;
  --lg-blur-lo:  14px;
  --lg-blur-hi:  32px;
  --lg-sat:      180%;
}


  html[data-theme="dark"]{
    --lg-wall-1: #201738;
    --lg-wall-2: #12183a;
    --lg-wall-3: #24123c;
    --lg-wall-4: #0d0d18;
    --lg-mat-light:  rgba(30,30,42,.62);
    --lg-mat-thin:   rgba(30,30,42,.42);
    --lg-mat-thick:  rgba(30,30,42,.82);
    --lg-hair:       rgba(255,255,255,.10);
    --lg-hair-dim:   rgba(255,255,255,.06);
    --lg-hair-ink:   rgba(0,0,0,.4);
    --lg-inset:      inset 0 1px 0 rgba(255,255,255,.10);
    --lg-inset-dim:  inset 0 1px 0 rgba(255,255,255,.06);
    --lg-lift-1: 0 6px 16px rgba(0,0,0,.30);
    --lg-lift-2: 0 12px 32px rgba(0,0,0,.40);
  }


/* ---- Wallpaper: soft radial-blob background under everything ---- */
body {
  background:
    radial-gradient(650px 460px at 14% -6%, var(--lg-wall-1) 0%, transparent 60%),
    radial-gradient(720px 520px at 100% 8%,  var(--lg-wall-2) 0%, transparent 58%),
    radial-gradient(520px 520px at 30% 96%,  var(--lg-wall-3) 0%, transparent 60%),
    linear-gradient(180deg, var(--lg-wall-4) 0%, #eef1ff 100%);
  background-attachment: fixed;
}

/* Kill the legacy "mesh" solid blobs — the wallpaper does the job now with
   less GPU cost and no colour clash. */
.mesh, .blob { display: none !important; }

/* ---- Bottom tab bar: floating frosted pill ---- */
.tabbar {
  background: var(--lg-mat-light) !important;
  border: .75px solid var(--lg-hair) !important;
  border-radius: 32px !important;
  padding: 8px 6px !important;
  box-shadow: var(--lg-lift-2), var(--lg-inset) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  min-width: min(360px, calc(100vw - 24px));
}
.tab {
  border-radius: 18px;
  color: rgba(15,15,25,.55);
  font-weight: 600;
}
.tab.on {
  background: linear-gradient(180deg, var(--tab-hue-bg, #6f61ff), color-mix(in oklab, var(--tab-hue-bg, #4b3ce0) 78%, black));
  color: #fff;
  box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--tab-hue-bg, #6f61ff) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.28);
}

  html[data-theme="dark"] .tab{ color: rgba(255,255,255,.55); }


/* ---- Top bar: sticky frosted panel ---- */
.topbar {
  background: var(--lg-mat-light);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: .75px solid var(--lg-hair-ink);
}
#view-list .topbar {
  background: linear-gradient(180deg,
    hsla(var(--hue, 210) 78% 88% / .92),
    hsla(var(--hue, 210) 78% 82% / .78));
  border-bottom: .75px solid hsla(var(--hue, 210) 40% 60% / .35);
}

  html[data-theme="dark"] #view-list .topbar{
    background: linear-gradient(180deg,
      hsla(var(--hue, 210) 42% 22% / .95),
      hsla(var(--hue, 210) 42% 16% / .82));
    border-bottom: .75px solid hsla(var(--hue, 210) 40% 50% / .25);
  }


/* Header buttons (back, options, add-people, edit, notif) — glass pills.
   NOTE (a89): .back-btn is intentionally EXCLUDED here (and via :not(.back-btn)
   below) so the solid-navy back-button rule further down actually wins — the
   glass group's (0,4,1)+!important selector was silently overriding it, which
   is why the back arrow kept disappearing on light headers. */
.nav-icon, .icon-btn, .fab-trip,
.topbar-row button:not(.tab):not(.btn-primary):not(.btn-accent):not(.back-btn) {
  background: var(--lg-mat-light) !important;
  border: .75px solid var(--lg-hair) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--lg-lift-1), var(--lg-inset) !important;
}

/* Back button — always visible with strong contrast (bug fix Aug 2025 §1b)
   Glass back-btn disappears on light lavender/blue tile backgrounds. Force a
   solid dark navy chip with white chevron on every screen so it is always
   findable. Keeps the same 40x40 target and rounded-pill shape. */
.back-btn {
  background: rgba(20, 24, 55, 0.92) !important;
  border: .5px solid rgba(255,255,255,0.10) !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 6px 14px -6px rgba(20,24,55,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.back-btn svg,
.back-btn svg * { stroke: #fff !important; color: #fff !important; fill: none !important; }

/* ---- Home carousel: liquid-glass hero card ---- */
.hc-card {
  min-height: 60vh !important;
  border-radius: 34px !important;
  box-shadow:
    var(--lg-lift-3),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 .75px rgba(255,255,255,.28) !important;
  padding: 24px !important;
  overflow: hidden;
  isolation: isolate;
}
/* Colour-bleed blobs on the hero card */
.hc-card::before {
  content: "";
  position: absolute; top: -36px; right: -36px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55) 0%, transparent 70%);
  filter: blur(28px); opacity: .8; z-index: 0; pointer-events: none;
}
.hc-card::after {
  content: "";
  position: absolute; bottom: -32px; left: -32px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35) 0%, transparent 70%);
  filter: blur(28px); opacity: .55; z-index: 0; pointer-events: none;
}
.hc-card > *:not(.hc-hold-actions) { position: relative; z-index: 1; }
.hc-title { letter-spacing: -.03em !important; font-weight: 800 !important; }
.hc-sub   { letter-spacing: -.01em; font-weight: 500 !important; opacity: .9; }
.hc-bar   { background: rgba(255,255,255,.24) !important; height: 6px !important; border-radius: 99px !important; }
.hc-bar > span {
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.7)) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.5);
}
.hc-meta { letter-spacing: .4px !important; opacity: .82; }
.hc-img  { filter: drop-shadow(0 32px 44px rgba(20,20,55,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.20)) !important; }
.hc-icon .lottie-wrap {
  filter: drop-shadow(0 32px 44px rgba(20,20,55,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.20)) !important;
}

/* Pagination dots — active becomes a stretched pill */
.hc-dots .dot,
.hc-dot {
  transition: width .25s var(--ease-spring), background .2s ease;
}
.hc-dot.active,
.hc-dots .dot.active {
  width: 24px !important;
  border-radius: 99px !important;
}

/* Home "Create new list" card — indigo glass */
.hc-card.hc-add {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    linear-gradient(155deg, #7C6FEF 0%, #5b4fe0 100%) !important;
  border: 1px dashed rgba(255,255,255,.5) !important;
  box-shadow:
    var(--lg-lift-3),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 0 .75px rgba(255,255,255,.18) !important;
}

/* ---- Home grid tiles ("All in one list" view) ---- */
.c-card {
  border-radius: 26px !important;
  box-shadow:
    0 12px 26px -10px color-mix(in oklab, hsl(var(--tile-hue, 250) 62% 55%) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 .75px rgba(255,255,255,.2) !important;
  overflow: hidden; isolation: isolate;
}
.c-card::before {
  content: ""; position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent 70%);
  filter: blur(24px); opacity: .8; z-index: 0; pointer-events: none;
}
.c-card > * { position: relative; z-index: 1; }
/* Icon bubble becomes glass wafer */
.c-ic {
  background: rgba(255,255,255,.95) !important;
  border: .75px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 10px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
.c-title { letter-spacing: -.02em !important; font-weight: 800 !important; }

/* ---- Filter pills / "Just mine" / "All" chips ---- */
.who-btn, .g-filter-chip,
button[data-role="filter"], .chip {
  background: var(--lg-mat-light);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .75px solid var(--lg-hair);
  box-shadow: var(--lg-lift-1), var(--lg-inset);
  border-radius: 99px;
}

/* ---- Sheets (modals from the bottom) ---- */
.sheet:not(.compact):not([hidden]) {
  border-radius: 30px 30px 0 0;
  background: var(--lg-mat-thick);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  border: .75px solid var(--lg-hair);
  border-bottom: 0;
  box-shadow:
    0 -30px 60px -20px rgba(15,20,60,.25),
    var(--lg-inset);
}
/* Grabber handle on sheets */
.sheet:not(.compact)::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 99px;
  background: rgba(15,20,60,.18);
}

  html[data-theme="dark"] .sheet:not(.compact)::before{ background: rgba(255,255,255,.22); }


/* Scrim (dim background behind sheets) */
.sheet-scrim {
  background: rgba(10,10,20,.32) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---- Side panel (options drawer inside a list) ---- */
.side-panel {
  background: var(--lg-mat-thick) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  border: .75px solid var(--lg-hair);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 60px -20px rgba(15,20,60,.25), var(--lg-inset);
}

/* ---- Section cards (Profile groups, settings) ---- */
.sec-card, .settings-card {
  background: var(--lg-mat-light) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: .75px solid var(--lg-hair) !important;
  border-radius: 26px !important;
  box-shadow: var(--lg-lift-1), var(--lg-inset) !important;
}

/* ---- Item rows (list-detail rows) — subtle frost ---- */
.item-row, .li-row, .task-row {
  background: var(--lg-mat-thin);
  border: .75px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--lg-lift-1), var(--lg-inset-dim);
  border-radius: 20px;
}

/* ---- Primary buttons — glossy gradient with inner shine ---- */
.btn-primary, .btn-accent, button.primary,
button[type="submit"]:not(.link):not(.text):not(.tab) {
  background: linear-gradient(180deg, #6f61ff 0%, #4b3ce0 100%);
  color: #fff;
  border-radius: 99px;
  box-shadow:
    0 12px 22px -8px rgba(70,60,220,.55),
    inset 0 1px 0 rgba(255,255,255,.35);
  border: 0;
}
.btn-primary:active, .btn-accent:active {
  transform: scale(.985);
  box-shadow:
    0 6px 14px -6px rgba(70,60,220,.55),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Secondary / ghost buttons stay glass */
.btn-secondary, .btn-ghost, .btn.ghost {
  background: var(--lg-mat-light);
  border: .75px solid var(--lg-hair);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  color: var(--text);
  border-radius: 99px;
  box-shadow: var(--lg-lift-1), var(--lg-inset);
}

/* ---- FAB (new item) — bright indigo drop. NOTE: .fab-trip is intentionally
   EXCLUDED here — it uses the iOS-26 frosted-glass rule above (RULES R26).
   This !important block was silently overriding the frosted Add-trip bar. ---- */
.fab, .fab-add {
  background: linear-gradient(180deg, #6f61ff, #4b3ce0) !important;
  color: #fff !important;
  box-shadow:
    0 20px 34px -12px rgba(70,60,220,.55),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  border: 0 !important;
}

/* ---- Progress bar (generic, outside hero) ---- */
.progress, .bar { background: rgba(15,20,60,.10); border-radius: 99px; }
.progress > span, .bar > span {
  background: linear-gradient(90deg, var(--accent), #8b7dff);
  border-radius: 99px;
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ---- Chips / meta pills used in item rows ---- */
.qty-chip, .assignee-chip, .meta-chip {
  background: rgba(255,255,255,.55);
  border: .5px solid rgba(15,20,60,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 99px;
}

/* ---- Segmented controls (view toggle, tabs) ---- */
.segwrap, .segmented, [role="tablist"].seg {
  background: rgba(15,20,60,.05);
  padding: 4px;
  border-radius: 16px;
  border: .5px solid var(--lg-hair-ink);
}
.seg.on, .segmented .on, [role="tab"][aria-selected="true"] {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 3px 8px rgba(15,20,60,.06), 0 0 0 .5px rgba(15,20,60,.04);
  border-radius: 12px;
}

/* ---- Inputs — subtle rounded glass ---- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input:not([type]), textarea, select {
  background: rgba(255,255,255,.65);
  border: .75px solid var(--lg-hair-ink);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* b209 — the shared "working" ring. Two sheets that four sections share (the
   suggest sheet and the document re-read) drew their spinner with the Material
   Symbols font, which is the one icon language School and Pets both ban. A
   ring needs no font and reads the same everywhere. */
.pf-spin {
  width: 16px; height: 16px; border-radius: 50%; flex: none; display: inline-block;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: pf-spin .7s linear infinite; vertical-align: -3px;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-spin { animation: none; } }

/* b210 — Health draws the shared `.row.tc-row` like every other task-based
   section. It has no stylesheet of its own, so its card ground lives here,
   scoped to its own container. Tokens only: the grammar, the spacing and the
   type belong to the shared row and are not restated. */
html[data-theme="dark"] @media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) }

/* ---- Toast — floating dark glass pill ---- */
#toast, .toast {
  background: rgba(16,18,28,.72) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: .75px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---- Trip cards (list of trips) — Blue-family palette (bug fix Aug 2025 §1)
   Was: purple→pink→coral gradient. Made "83 days" pill + "Past" chip + dates
   nearly unreadable and the whole screen very high-key. Now: each row uses
   a per-row blue shade (--hue set from JS.tripHue: 198..232) with high-
   contrast white text, so trips are scannable and every element is legible. */
.trip-card {
  --hue: 212;
  border-radius: 28px !important;
  /* b101: LIVE (upcoming/current) trips — a calmer, lighter blue than before. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    linear-gradient(155deg,
      hsl(210 70% 62%) 0%,
      hsl(212 66% 72%) 100%) !important;
  color: #fff !important;
  box-shadow:
    0 16px 30px -16px hsl(210 52% 40% / .42),
    var(--lg-lift-3),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  overflow: hidden; isolation: isolate;
}
/* b101: ENDED trips — very pale red with dark text, so a finished trip looks
   settled/archived rather than active. */
.trip-card.is-past {
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 60%),
    linear-gradient(155deg,
      hsl(6 62% 95%) 0%,
      hsl(8 56% 90%) 100%) !important;
  color: #7c2f2f !important;
  box-shadow:
    0 12px 24px -16px hsl(6 45% 55% / .38),
    var(--lg-lift-3),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.trip-card.is-past .pill { background: rgba(124,47,47,.14) !important; color: #7c2f2f !important; }
/* b105 BUGFIX: past-trip TITLE was white (generic `.trip-card h3`) on the pale
   red card, i.e. invisible. Make the whole past card read in red. */
.trip-card.is-past h3 { color: #7c2f2f !important; }
.trip-card.is-past .trip-when { color: #9a5555 !important; }
.trip-card.is-past .card-stat { color: #7c2f2f !important; }
.trip-card.is-past .bar { background: rgba(124,47,47,.16) !important; }
.trip-card.is-past .bar span { background: #c07070 !important; }
.trip-card::before {
  content: ""; position: absolute; top: -30px; right: -30px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent 70%);
  filter: blur(24px); opacity: .8; z-index: 0; pointer-events: none;
}
.trip-card.is-past::before { opacity: .35; }
.trip-card > * { position: relative; z-index: 1; }

/* Text + accents inside trip cards must stay readable on blue */
.trip-card h3           { color: #fff !important; }
.trip-card .trip-when   { color: rgba(255,255,255,.88) !important; }
.trip-card .card-stat   { color: #fff !important; font-weight: 700; }
.trip-card .bar         { background: rgba(255,255,255,.24) !important; }
.trip-card .bar > span  { background: #fff !important; box-shadow: 0 0 8px rgba(255,255,255,.45); }
.trip-card .pill        { background: rgba(255,255,255,.24) !important; color: #fff !important; }
.trip-card .pill.grey   { background: rgba(255,255,255,.20) !important; color: rgba(255,255,255,.92) !important; }
.trip-card .pill.live   { background: rgba(48,209,88,.32) !important; color: #eafff0 !important; }

/* ============================================================= */
/* b108 — redesigned trip cards (clean white card + destination  */
/* thumbnail + smart pill + traveller avatars). Applied to ALL   */
/* trips incl. past. Overrides the older coloured-gradient card. */
/* ============================================================= */
.trip-card.tc2 {
  display: flex !important; gap: 14px; align-items: stretch;
  padding: 15px 15px 15px 18px !important;
  background: #fff !important;
  color: #191c1f !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 26px -18px rgba(20,24,55,.35), 0 1px 3px rgba(20,24,55,.06) !important;
  text-align: left;
}

  html[data-theme="dark"] .trip-card.tc2{ background: #1c1d26 !important; color: #f3f3f7 !important; }

.trip-card.tc2::before { display: none !important; }
.trip-card.tc2 .tc2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trip-card.tc2 .trip-card-top { align-items: flex-start; margin-bottom: 4px; }
.trip-card.tc2 h3 { color: #191c1f !important; font-size: 19px; font-weight: 800; line-height: 1.2; }
 html[data-theme="dark"] .trip-card.tc2 h3{ color: #f3f3f7 !important; } 
.trip-card.tc2 .tc2-when { display: flex; align-items: center; gap: 6px; font-size: 13.5px;
  font-weight: 600; color: #5c5b68 !important; margin: 4px 0 0; overflow-wrap: anywhere; }
.trip-card.tc2 .tc2-when .material-symbols-outlined { font-size: 17px; color: #a6a4b3; }
.trip-card.tc2 .tc2-dates { font-size: 13px; color: #8a8896 !important; margin: 3px 0 0; font-weight: 600; }
.trip-card.tc2 .tc2-metarow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.trip-card.tc2 .tc-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  font-weight: 700; color: #6b6a78 !important; }
.trip-card.tc2 .tc-meta .material-symbols-outlined { font-size: 16px; color: #a6a4b3; }
.trip-card.tc2 .tc-avatars { display: flex; margin-top: 10px; }
.trip-card.tc2 .tc-ava { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -8px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; }
.trip-card.tc2 .tc-ava:first-child { margin-left: 0; }
.trip-card.tc2 .tc-ava-more { background: #d9d9e2 !important; color: #55535f; }
.trip-card.tc2 .card-meta { margin-top: 12px; }
.trip-card.tc2 .card-meta .bar { background: #ececf3 !important; height: 7px; border-radius: 999px; }
.trip-card.tc2 .card-meta .bar > span { background: var(--accent) !important; box-shadow: none !important; }
.trip-card.tc2 .card-stat { color: #6b6a78 !important; font-weight: 800; }
.trip-card.tc2 .tc2-thumb { flex: none; width: 92px; align-self: stretch; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.trip-card.tc2 .tc2-thumb .material-symbols-outlined { font-size: 34px; color: rgba(255,255,255,.92);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.trip-card.tc2 .pill { background: #eef0f5 !important; color: #55535f !important; }
.trip-card.tc2 .pill.ok { background: rgba(48,209,88,.16) !important; color: #12813f !important; }
.trip-card.tc2 .pill.warn { background: rgba(245,158,11,.18) !important; color: #b4600f !important; }
.trip-card.tc2.is-past { background: #fbfbfd !important; }
 html[data-theme="dark"] .trip-card.tc2.is-past{ background: #191a22 !important; } 
.trip-card.tc2.is-past h3 { color: #4a4956 !important; }
.trip-card.tc2.is-past .tc2-thumb { filter: grayscale(.35) brightness(.98); }


/* ---- Doc cards (Vault) ---- */
.doc-card {
  background: var(--lg-mat-light) !important;
  border: .75px solid var(--lg-hair) !important;
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--lg-lift-1), var(--lg-inset) !important;
}

/* ---- Notifications drawer / sheet ---- */
.notif-item, .notif-card {
  background: var(--lg-mat-light);
  border: .5px solid var(--lg-hair);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--lg-lift-1);
}

/* ---- Reduce motion — keep static ---- */
@media (prefers-reduced-motion: reduce) {
  .hc-card::before, .hc-card::after,
  .c-card::before, .trip-card::before { animation: none !important; }
}

/* ---- Extra polish: dashboard "Just mine" / avatars row ---- */
.dash-avatars .avatar,
.avatar {
  box-shadow: 0 3px 8px rgba(0,0,0,.14), 0 0 0 2px #fff, 0 0 0 3px rgba(15,20,60,.04);
}

/* ---- Micro-detail: hairline separators inside cards use ink not white ---- */
.sec-card .row + .row,
.settings-card .row + .row,
.settings-row + .settings-row {
  border-top: .5px solid var(--lg-hair-ink);
}

/* End Liquid Glass ================================================= */

/* ==========================================================================
   BUILD a82  ·  Carousel unification (slide = card + CTA) + icon animations
   ==========================================================================
   The a80/a81 bug: deleting a hero card only removed the .hc-card while the
   CTA button below (rendered as a single sibling `#hc-cta`) kept the deleted
   list's label. Root cause: card and CTA were two independent nodes sharing
   only a JS-side `meta[]` array that never got pruned on delete.
   Fix: each swipeable unit is now a `.hc-slide` containing BOTH the card AND
   its own CTA. Delete removes the whole slide. Dots sit under everything and
   are pruned in sync.
   ========================================================================== */

.hc-track {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.hc-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  min-width: 0;
  width: 100%;
}
/* Cards nested inside slides drop the old "flex: 0 0 100%" behaviour that
   was designed for cards being direct scroll-track children. Now each card
   just fills its slide's width naturally. */
.hc-slide > .hc-card {
  flex: 1 1 auto;
  min-height: 460px;
  width: 100%;
  scroll-snap-align: unset;
}
.hc-slide > .hc-cta {
  flex: 0 0 auto;
  width: 100%;
  min-height: 56px;
  border-radius: 99px;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  color: #fff;
  /* Bug fix Aug 2025 §5 — CTA now uses the slide's --hue so it visually
     belongs to its tile. Falls back to indigo when --hue is missing (the
     "+ Create new list" slide keeps its own indigo via .hc-add-cta below). */
  background: linear-gradient(180deg,
    hsl(var(--hue, 250) 72% 56%) 0%,
    hsl(var(--hue, 250) 76% 42%) 100%);
  box-shadow:
    0 12px 22px -8px hsl(var(--hue, 250) 55% 32% / .55),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hc-slide > .hc-cta:active {
  transform: scale(.985);
  box-shadow: 0 6px 14px -6px hsl(var(--hue, 250) 55% 32% / .55), inset 0 1px 0 rgba(255,255,255,.35);
}
.hc-slide > .hc-cta .material-symbols-outlined { font-size: 22px; }
/* The "+ Create new list" slide keeps the indigo primary look. */
.hc-slide[data-newlist="1"] > .hc-cta {
  background: linear-gradient(180deg, #6f61ff 0%, #4b3ce0 100%);
  box-shadow: 0 12px 22px -8px rgba(70,60,220,.55), inset 0 1px 0 rgba(255,255,255,.35);
}

.dash-carousel > #hc-dots,
.dash-carousel > .hc-dots {
  display: flex; justify-content: center; gap: 6px;
  margin: 14px 0 4px;
}

/* ==========================================================================
   HERO-CARD ICON ANIMATIONS  (build a82)
   All Lottie files now render statically. On top we drive nicer motion via
   CSS on the icon wrapper.
   Default : slow Y-axis 3D rotation ("turntable")
   Car     : drives in from the right with a soft dust trail
   Pets    : icon slides in from the left & holds still
   ========================================================================== */

/* ==========================================================================
   HOME CAROUSEL ICON — STATIC (bug fix Aug 2025 §2)
   The previous "hc-spin3d" continuous Y-axis rotation made the icon look
   like a flat sprite sliding sideways, not a 3D object, and it fought
   against the size + depth. We now keep the icon STATIC with a strong
   drop-shadow so the tile feels deep and premium without any motion.
   Car "drive-in" and Pets "arrive-in" one-shot animations are also
   disabled for the same reason (they contributed to the "sideways" feel).
   ========================================================================== */

.hc-card .hc-icon {
  position: relative;
  overflow: visible;
}
/* Kill all motion on the hero icon */
.hc-card .hc-icon .lottie-wrap,
.hc-card .hc-icon > img.hc-img {
  animation: none !important;
}
.hc-card.hc-add .hc-icon .hc-add-plus { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hc-card .hc-icon .lottie-wrap,
  .hc-card .hc-icon > img.hc-img {
    animation: none !important;
  }
}

/* Car / Pets one-shot slide-in animations were disabled Aug 2025 §2
   (they contributed to the "sideways" feel). Keeping structure for
   possible future reintroduction. */
.hc-card .hc-icon .lottie-wrap[data-lottie-key="car"],
.hc-card .hc-icon .lottie-wrap[data-lottie-key="pets"] {
  animation: none !important;
}
.hc-card .hc-icon:has(.lottie-wrap[data-lottie-key="car"])::before {
  content: none !important;
}

/* ==========================================================================
   GROCERY CASCADE  (build a82) — Select-all in each section sheet
   ========================================================================== */
#sheet-gcascade .gc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 6px 2px 10px;
}
#sheet-gcascade .gc-selectall {
  background: var(--lg-mat-light);
  border: .75px solid var(--lg-hair);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 99px;
  padding: 8px 14px;
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent, #5b4fe0);
  cursor: pointer;
  box-shadow: var(--lg-lift-1, 0 6px 16px rgba(15,20,60,.06)),
              var(--lg-inset, inset 0 1px 0 rgba(255,255,255,.65));
}
#sheet-gcascade .gc-selectall .material-symbols-outlined { font-size: 18px; }
#sheet-gcascade .gc-selectall.on { color: #fff; background: linear-gradient(180deg,#6f61ff,#4b3ce0); border-color: transparent; }


/* ===== Aug 2026 · New-list sheet redesign (Item 1 · Picture 2) ===== */
.sheet-x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e7e9f2; color: #3a4066; border: none;
  cursor: pointer; padding: 0; z-index: 5;
  -webkit-tap-highlight-color: transparent;
}
.sheet-x:active { transform: scale(.92); }

#sheet-new-list h2 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
/* Quick names now wrap in a grid (was a single horizontal scroller). */
#sheet-new-list .nl-suggest { flex-wrap: wrap; overflow: visible; padding: 2px 0; }
#sheet-new-list .nl-chip { padding: 10px 16px; font-size: 15px; }

/* Type: three big tappable rows */
.nl-type-rows { display: flex; flex-direction: column; gap: 10px; }
.nl-type-row {
  display: flex; align-items: center; gap: 14px;
  background: #eceef4; border: 2px solid transparent; border-radius: 16px;
  padding: 12px 14px; cursor: pointer; width: 100%; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.nl-type-row.sel { background: #fff; border-color: #5b4fe3; box-shadow: 0 2px 10px rgba(91,79,227,.15); }
.nl-type-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.nl-type-ic .material-symbols-outlined { font-size: 26px; }
.nl-type-lbl { font-size: 17px; font-weight: 600; color: #1c2141; }

/* Colour circles a touch bigger to match Picture 2 */
.hue-swatches-round .hue-swatch { width: 40px; height: 40px; }

/* ===== Celebration overlay (Item 2) ===== */
.celebrate-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: rgba(20,24,55,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .26s ease;
}
.celebrate-overlay.show { opacity: 1; }
.celebrate-card {
  position: relative; background: #fff; border-radius: 26px; padding: 34px 28px 28px;
  width: min(88vw, 360px); text-align: center;
  box-shadow: 0 24px 60px rgba(20,24,55,.35);
  transform: translateY(14px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.celebrate-overlay.show .celebrate-card { transform: translateY(0) scale(1); }
.celebrate-burst {
  width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 58px;
  background: radial-gradient(circle at 50% 40%, #8b7bff, #5b4fe3);
  box-shadow: 0 14px 36px rgba(91,79,227,.45);
  animation: cele-pop .5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes cele-pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.celebrate-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: #12162f; }
.celebrate-sub { font-size: 15px; color: #5a6178; margin: 0 0 20px; }
.celebrate-card .btn.primary { width: 100%; }
.celebrate-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.celebrate-confetti .cf {
  position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px;
  animation-name: cf-fall; animation-timing-function: linear; animation-iteration-count: 1;
}
@keyframes cf-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: .9; } }

/* ===== Aug 2026 · Push 2 · "Add" popup (Item 3) ===== */
.add-opts { display: flex; flex-direction: column; gap: 11px; margin: 10px 0 4px; }
.add-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: #eceef4; border: 2px solid transparent; border-radius: 16px;
  padding: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.add-opt:active { transform: scale(.99); }
.add-opt-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.add-opt-ic .material-symbols-outlined { font-size: 25px; }
.add-opt-txt { display: flex; flex-direction: column; gap: 2px; }
.add-opt-t { font-size: 17px; font-weight: 700; color: #1c2141; }
.add-opt-s { font-size: 12px; color: #7b8199; }
.add-opt-both { background: linear-gradient(135deg, #7c6fef, #5b4fe0); }
.add-opt-both .add-opt-t, .add-opt-both .add-opt-s { color: #fff; }

/* ===== Item 4 · assignee avatar on suggest rows + picker menu ===== */
.suggest-item .suggest-lbl { flex: 1; }
.suggest-assignee {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 2px rgba(91,79,227,.18);
}
.suggest-assignee:active { transform: scale(.9); }
.assignee-menu {
  position: fixed; z-index: 5000; width: 220px; max-height: 60vh; overflow-y: auto;
  background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 34px rgba(20,24,55,.28); border: 1px solid #e6e9f2;
}
.assignee-menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 10px; background: transparent; cursor: pointer;
}
.assignee-menu-row:active { background: #f0f1f7; }
.assignee-menu-row.on { background: #f0efff; }
.assignee-menu-name { font-size: 15px; font-weight: 600; color: #1c2141; }

/* Aug 2026 · land-on-tile: briefly highlight a freshly created list tile */
.tile-justcreated {
  animation: tile-pop 2.4s ease;
  border-radius: 22px;
}
@keyframes tile-pop {
  0%   { box-shadow: 0 0 0 0 rgba(91,79,227,0); }
  12%  { box-shadow: 0 0 0 4px rgba(91,79,227,.55), 0 10px 26px rgba(91,79,227,.35); transform: scale(1.03); }
  40%  { box-shadow: 0 0 0 4px rgba(91,79,227,.35); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(91,79,227,0); }
}

/* Aug 2026 · Item 6: make the Trips suitcase icon noticeably bigger (~2 sizes up),
   only on the Trips tile. Parents allow overflow so the scaled icon isn't clipped. */
.c-card[data-trip] .c-ic, .hc-card[data-trip] .hc-icon { overflow: visible; }
.c-card[data-trip] .c-ic-img { transform: scale(1.34); transform-origin: center; }
.hc-card[data-trip] .hc-img { transform: scale(1.34); transform-origin: center; }

/* Build a93 (2025-08-05) — bring every fixed-tile hero icon up to the same
   Trips-style scale that Trips has enjoyed since a86. Applies to both PNG
   heroes (.hc-img) AND Lottie wrappers (.lottie-wrap). Parent .hc-icon
   already allows overflow (see .hc-card .hc-icon { overflow: visible }
   above). Combined with the a92 CSS bump (min-height 60vh, 720px icon
   box) this makes Grocery, Health, Car, Home Tasks, Pets, School,
   Maintenance and Shopping all render at the same big hero size the user
   requested in the reference screenshot. */
.hc-card .hc-icon { overflow: visible; }
.hc-card .hc-img,
.hc-card .hc-icon .lottie-wrap {
  transform: scale(1.34) !important;
  transform-origin: center !important;
}
/* Trips already has an intrinsic scale — don't double-scale it. */
.hc-card[data-trip] .hc-img {
  transform: scale(1.34) !important;
}
/* Compact/list-view: match the same enlargement on the small tile icons so
   both "carousel" and "list" home views look proportionally similar. */
.c-card .c-ic { overflow: visible; }
.c-card:not([data-trip]) .c-ic-img { transform: scale(1.10); transform-origin: center; }

/* =====================================================================
   BUILD a94 (2025-08-05) — DESIGN (a): white/neutral tile cards
   ---------------------------------------------------------------------
   Replace the pastel-blue tile gradient with a clean white/off-white
   card so the icons pop against the light background. Overrides the
   inline gradient set by renderHomeCarousel() and the compact list
   view's .c-card. Text switches to dark on light. Progress bar keeps
   its subtle indigo accent so the tile still feels tied to the brand.
   ===================================================================== */

/* Carousel hero cards */
.hc-card {
  color: #1a1c26 !important;
  background: linear-gradient(160deg, #FBFBFD 0%, #F2F3F8 100%) !important;
  border: 1px solid rgba(20, 22, 40, 0.06) !important;
  box-shadow: 0 14px 32px rgba(20, 22, 40, 0.08),
              0 2px 6px rgba(20, 22, 40, 0.04) !important;
}
.hc-card .hc-title { color: #1a1c26 !important; text-shadow: none !important; }
.hc-card .hc-sub   { color: #6d7085 !important; text-shadow: none !important; }
.hc-card [class*="hc-progress"],
.hc-card .hc-progress,
.hc-card .hc-bar {
  background: rgba(30, 32, 44, 0.08) !important;
}
.hc-card .hc-progress > span,
.hc-card .hc-progress-fill,
.hc-card .hc-progress-bar > span,
.hc-card .hc-bar > span {
  background: linear-gradient(90deg, #6d6cf5, #5b4fe0) !important;
}
/* Progress label ("PROGRESS", "100 %") tone-down */
.hc-card .hc-progress-label,
.hc-card .hc-progress-num,
.hc-card .hc-meta,
.hc-card .hc-meta > span,
.hc-card [class*="hc-progress-"] {
  color: #6d7085 !important;
}
/* "Just mine" pill in the header uses the same neutral treatment */
.hc-card .hc-tag,
.hc-card .hc-just-mine {
  color: #6d7085 !important;
  background: rgba(30, 32, 44, 0.05) !important;
}
/* Icon drop-shadow was tuned for a coloured bg. Soften for white cards. */
.hc-card .hc-img {
  filter: drop-shadow(0 18px 22px rgba(30, 32, 44, 0.14))
          drop-shadow(0 4px 6px rgba(30, 32, 44, 0.08)) !important;
}
.hc-card .hc-icon .lottie-wrap {
  filter: drop-shadow(0 18px 22px rgba(30, 32, 44, 0.14)) !important;
}
/* The CTA button (Add items to X / Add new trip) — keep it indigo & bold. */
.hc-cta {
  background: linear-gradient(135deg, #6d6cf5, #5b4fe0) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(91, 79, 224, 0.24) !important;
}

/* Compact list-view tiles — same white treatment */
.c-card:not([data-trip]) {
  color: #1a1c26 !important;
  background: linear-gradient(135deg, #FBFBFD, #F2F3F8) !important;
  border: 1px solid rgba(20, 22, 40, 0.06);
  box-shadow: 0 6px 16px rgba(20, 22, 40, 0.06),
              0 1px 3px rgba(20, 22, 40, 0.04);
}
.c-card:not([data-trip]) .c-name,
.c-card:not([data-trip]) .c-sub {
  color: #1a1c26 !important;
  text-shadow: none !important;
}
.c-card:not([data-trip]) .c-sub {
  color: #6d7085 !important;
}

/* The "hc-add" (create new list) card is disabled in a91 but if it ever
   comes back, keep it indigo — it's a CTA, not a content tile. */
.hc-card.hc-add {
  color: #ffffff !important;
  background: linear-gradient(160deg, #7C6FEF, #5b4fe0) !important;
}

/* ==================================================================
   HOME SCREEN v2 — "Family Hub" single page (Aug 2025 · build b95)
   PRV welcome hero · Get started guide · Upcoming activities ·
   My House Overview constellation. Replaces carousel + tile grid.
   ================================================================== */
#view-dashboard .home2 {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 1. Welcome hero — sky gradient + the PRV welcome house image */
.home2-hero {
  border-radius: 0 0 28px 28px;
  padding: max(14px, env(safe-area-inset-top)) 18px 18px;
  background: linear-gradient(180deg, #CDE7FF 0%, #E7F1FF 55%, #F4F4FA 100%);
  text-align: center;
}
.home2-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home2-brand { font-weight: 800; letter-spacing: .10em; color: #1B2A47; font-size: 18px; }
.home2-welcome { flex: 1; margin: 0; font-size: 17px; font-weight: 700; color: #1B2A47; }
.home2-avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  color: #fff; font-weight: 700; display: grid; place-items: center; overflow: hidden; font-size: 15px; flex: none;
}
.home2-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.home2-hero-img { display: block; width: 100%; max-width: 460px; margin: 6px auto 0; height: auto; }
.home2-title {
  font-family: 'New York', Charter, Georgia, serif;
  font-size: 30px; line-height: 1.1; color: #141A2E; margin: 2px 0 0;
  font-weight: 700; letter-spacing: -.01em;
}

/* wrap the non-hero sections back in a side gutter */
.home2 > .home2-guide,
.home2 > .home2-sec { margin-left: 12px; margin-right: 12px; }

/* 2. Get started guide */
.home2-guide {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: #1B2A47; color: #fff; border: none; border-radius: 20px; padding: 16px 18px;
}
.home2-guide-glyph {
  width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .14);
  display: grid; place-items: center; flex: none;
}
.home2-guide-glyph .material-symbols-outlined { font-size: 24px; }
.home2-guide-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home2-guide-title { font-weight: 700; font-size: 16px; }
.home2-guide-sub { font-size: 13px; color: rgba(255, 255, 255, .72); }
.home2-guide-bar { margin-top: 8px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.home2-guide-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6f61ff, #8f83ff); width: 0; transition: width .5s ease; }
.home2-chev { color: currentColor; opacity: .7; flex: none; }

/* 3 + 4. Section card */
.home2-sec {
  background: #fff; border: 1px solid rgba(20, 22, 40, .05); border-radius: 22px;
  padding: 16px 14px 18px; box-shadow: 0 10px 26px rgba(20, 22, 40, .05);
}
.home2-sechead { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; }
.home2-h2 { font-size: 19px; font-weight: 800; color: #141A2E; margin: 0; }
.home2-addr { font-size: 13px; color: #5B6B85; margin: 2px 0 0; }

/* Upcoming activities — horizontal swipe carousel with dots (b97) */
.home2-pending { margin-top: 12px; }
.home2-actscroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.home2-actscroll::-webkit-scrollbar { display: none; }
.home2-actslide { flex: 0 0 100%; scroll-snap-align: center; }
.home2-actdots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.home2-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfd6e6; transition: all .2s ease; }
.home2-dot.on { background: #1B2A47; width: 18px; border-radius: 4px; }
.home2-act { display: flex; align-items: center; gap: 10px; background: #F7F8FC; border: 1px solid rgba(20, 22, 40, .05); border-radius: 16px; padding: 12px 12px; }
.home2-act-main { flex: 1; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; min-width: 0; }
.home2-act-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; flex: none; }
.home2-act-img { width: 36px; height: 36px; object-fit: contain; }
.home2-act-img-wrap { width: 36px; height: 36px; display: grid; place-items: center; }
.home2-act-txt { display: flex; flex-direction: column; min-width: 0; }
.home2-act-name { font-weight: 700; font-size: 15px; color: #1a1c26; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home2-act-sub { font-size: 12.5px; color: #6d7085; }
.home2-act-done { flex: none; background: #1B2A47; color: #fff; border: none; border-radius: 99px; padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 40px; }
.home2-act-done:disabled { opacity: .55; }
.home2-pend-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; color: #6d7085; text-align: center; }
.home2-pend-empty .material-symbols-outlined { font-size: 30px; color: #A9C3E8; }
.home2-pend-empty p { margin: 0; font-size: 13px; }

/* b130 — every Home card shares the SAME 12px side gutter so the Get-started,
   Upcoming activities and My House Overview cards are all equal width and line
   up edge-to-edge across the screen (was: the constellation went full-bleed
   while the others sat inset, so they looked mismatched). */
.home2-sec--wide { padding: 16px 8px 22px; border-radius: 22px; }
.home2-sec--wide .home2-h2, .home2-sec--wide .home2-addr { padding-left: 6px; }

/* Constellation SVG — allow it to breathe to the section edges */
.home2-const { margin: 8px 0 0; width: 100%; }
.fhc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fhc-spoke { stroke: #D5DCE8; stroke-width: 2; }
.fhc-hub-bg { fill: #D3E4D5; stroke: #A8C4AC; stroke-width: 3; }
.fhc-hub-tx { fill: #39604a; font-weight: 700; font-size: 34px; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
.fhc-node { cursor: pointer; }
.fhc-node-bg { fill: #fff; }
.fhc-node image { filter: none; }          /* no drop-shadow on the 3D icons (b95) */
.fhc-ring { transition: stroke .2s ease; }
.fhc-labels { pointer-events: none; }
.fhc-label {
  fill: #2b3346; font-weight: 700; font-size: 34px;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  paint-order: stroke; stroke: #ffffff; stroke-width: 7px; stroke-linejoin: round;
}
.fhc-badge-bg { fill: #E5484D; stroke: #fff; stroke-width: 3; }
.fhc-badge-tx { fill: #fff; font-weight: 800; font-size: 30px; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }
.fhc-node:active { opacity: .72; }
.fhc-node:focus-visible { outline: none; }
.fhc-node:focus-visible .fhc-ring { stroke: #3B6FD4; }
@keyframes fhcIn { from { opacity: 0; } to { opacity: 1; } }
.fhc-node { animation: fhcIn .4s ease both; animation-delay: calc(var(--i, 0) * .05s); }
@media (prefers-reduced-motion: reduce) { .fhc-node { animation: none; } }

/* ============================================================
   GROCERY UX REDESIGN — Aug 2025 (build b99)
   Clean "Picture 4" surfaces: item edit card (Qty+Description,
   rollable shop picker), pastel list-options sheet with a bottom
   Save bar, redesigned filter, and the notifications nudge.
   ============================================================ */

/* --- Edit card: Qty + Description side by side --- */
.field-2col {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: end;
}
.field-2col > .field { margin: 0; }
.field-2col > .field[hidden] { display: none; }
.field-2col > .field[hidden] ~ .field { grid-column: 1 / -1; }

/* --- Item row: quantity badge next to the name --- */
.qty-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: hsl(var(--hue, 210) 70% 92%);
  color: hsl(var(--hue, 210) 45% 38%);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
  flex: none;
}

  html[data-theme="dark"] .qty-badge{ background: hsl(var(--hue, 210) 40% 26%); color: hsl(var(--hue, 210) 70% 82%); }


/* --- Rollable shop picker (edit card) --- */
.lp-shop-drop-body.shop-chips { padding: 0; }
.shop-roll {
  max-height: 176px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--hair, #e9edf4);
  border-radius: 14px;
  background: var(--card, #fff);
  scroll-snap-type: y proximity;
}
.shop-roll-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 14px !important;
  border: none !important;
  border-bottom: .5px solid var(--hair, #eef1f6) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 16px;
  color: var(--text, #243b53) !important;
  scroll-snap-align: start;
}
.shop-roll-row:last-child { border-bottom: none !important; }
.srr-name { font-weight: 600; }
.srr-tick {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--hair, #d7deea);
  display: grid; place-items: center;
  color: transparent;
  flex: none;
  transition: all .15s var(--ease-out, ease);
}
.shop-roll-row.on { background: hsl(var(--hue, 210) 70% 96%) !important; }
.shop-roll-row.on .srr-name { color: hsl(var(--hue, 210) 45% 40%) !important; font-weight: 800; }
.shop-roll-row.on .srr-tick {
  background: hsl(var(--hue, 210) 60% 55%);
  border-color: hsl(var(--hue, 210) 60% 55%);
  color: #fff;
}

  html[data-theme="dark"] .shop-roll{ background: #1a2233; border-color: #2c3852; }
  html[data-theme="dark"] .shop-roll-row.on{ background: hsl(var(--hue, 210) 40% 22%) !important; }


/* --- List options sheet: bottom Save bar (pastel, roomy) ---
   STICKY, not absolute. `position: absolute` inside .side-panel.lp-sheet —
   which is itself the scrolling element — resolves `bottom: 0` against the
   scrollport and then rides UP over the content as you scroll, so the button
   parked itself across the middle of the list and covered the store options
   underneath it. Reported with a screenshot: "Save & close" sitting on top of
   "Iceland" with three more shops hidden behind it.
   Sticky pins it to the bottom edge instead and keeps it in flow, so the last
   row scrolls clear of it rather than under it. The 84px reservation on
   .lp-panel-nav is no longer load-bearing but is left in as slack for the
   safe-area inset. */
.lp-panel-nav { padding-bottom: 12px; }
.lp-save-bar {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) * -1 - 20px);
  z-index: 3;
  margin: 4px -14px calc(env(safe-area-inset-bottom) * -1 - 20px);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--card, #fff) 72%, transparent);
  border-top: .5px solid var(--hair, #eef1f6);
}
html[data-theme="dark"] .lp-save-bar {
  background: linear-gradient(to top, rgba(30,30,34,.96) 72%, transparent);
  border-top-color: rgba(255,255,255,.08);
}
/* A dropdown inside the sheet gets its own scroll rather than growing the
   sheet past the fold. 260px is ~5 rows: enough that a family with a dozen
   shops can see there are more and flick through them. */
.side-panel.lp-sheet .lp-drop-body { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lp-save-bar .btn.block { width: 100%; padding: 15px; font-size: 17px; font-weight: 800; border-radius: 16px; }
.lp-removed { display: none !important; }

/* --- Filter sheet: clean Picture-4 rows --- */
.filter-clean .lp-sheet-head { margin-bottom: 4px; }
.filt-row {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 12px !important;
}
.filt-ic {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 19px;
  flex: none;
}
/* Were inline `style="background:…"` on the two filter rows. Moved to classes
   so the Design V2 grocery sheet can override them without !important; the
   rendered colour is unchanged for every other list. */
.filt-ic--all { background: #e6ecff; }
.filt-ic--buy { background: #ffe8d6; }
.filt-row .lbl { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.filt-row .lbl b { font-size: 16px; color: var(--text, #243b53); font-weight: 700; }
.filt-row .lbl small { font-size: 12.5px; color: var(--text-3, #8794a8); font-weight: 500; }

/* --- Notifications nudge --- */
.notif-recommend {
  background: #fff6e6;
  border: 1px solid #ffe0a3;
  color: #8a5a00;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.notif-btn.primary {
  background: var(--accent, #6b74e6);
  color: #fff;
  border-color: transparent;
}

  html[data-theme="dark"] .notif-recommend{ background: #2e2510; border-color: #5a4a1e; color: #ffdd99; }


/* b100: iOS "add to Home Screen" install guide inside the Notifications card. */
.notif-install {
  background: #eef1ff;
  border-color: #c7cffa;
  color: #33407a;
}
.notif-install b { color: inherit; }
.notif-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.notif-steps li { line-height: 1.45; }
.notif-ico { font-size: 13px; }

  html[data-theme="dark"] .notif-install{ background: #1b2140; border-color: #34407a; color: #c7d0ff; }



/* ============================================================
   iOS-26 redesign (build b116) — Apple Reminders-style task sheet
   + frosted-glass "Home chrome". Scoped to #sheet-shop-item so the
   rest of the app is untouched until Phase 2.
   ============================================================ */
:root{
  --i26-bg:#efeff4; --i26-card:#ffffff; --i26-sep:rgba(60,60,67,.13);
  --i26-tx:#1c1c1e; --i26-tx2:#8a8a8e; --i26-hdr:#6d6d72;
  --i26-blue:#007aff; --i26-green:#34c759; --i26-red:#ff3b30; --i26-amber:#ff9f0a; --i26-indigo:#5856d6;
  --i26-glass:rgba(248,248,252,.72); --i26-glass-br:rgba(255,255,255,.55);
}

  html[data-theme="dark"]{
    --i26-bg:#000000; --i26-card:#1c1c1e; --i26-sep:rgba(84,84,88,.5);
    --i26-tx:#f2f2f7; --i26-tx2:#98989f; --i26-hdr:#8d8d93;
    --i26-blue:#0a84ff; --i26-green:#30d158; --i26-red:#ff453a; --i26-amber:#ffd60a; --i26-indigo:#5e5ce6;
    --i26-glass:rgba(30,30,34,.62); --i26-glass-br:rgba(255,255,255,.10);
  }


/* --- Sheet shell: a tall grouped modal like Apple Reminders --- */
#sheet-shop-item.ios26-sheet{
  background:var(--i26-bg); color:var(--i26-tx);
  border-radius:16px 16px 0 0; padding:0;
  display:flex; flex-direction:column;
  max-height:94dvh; height:auto;
}
#sheet-shop-item.ios26-sheet .grabber{ margin:8px auto 2px; }
.ios26-hdr{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px 12px; background:var(--i26-bg);
  border-radius:16px 16px 0 0;
}
.ios26-title{ font-size:17px; font-weight:600; letter-spacing:-.2px; margin:0; color:var(--i26-tx); text-align:center; flex:1; }
.ios26-x{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:var(--i26-card); color:var(--i26-tx); display:grid; place-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.10);
}
 html[data-theme="dark"] .ios26-x{ background:#2c2c2e; } 
.ios26-check{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:var(--i26-blue); color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(10,120,255,.45);
}
.ios26-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 18px; flex:1; }

/* --- Grouped cards + section headers --- */
.ios26-sechdr{
  font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--i26-hdr); padding:20px 6px 7px;
}
#sheet-shop-item .ios26-group{
  background:var(--i26-card); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
#sheet-shop-item .ios26-hr{ height:1px; background:var(--i26-sep); margin-left:16px; }
#sheet-shop-item .ios26-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px; min-height:52px;
  width:100%; background:none; border:none; text-align:left; color:var(--i26-tx);
  font-family:inherit; cursor:default;
}
#sheet-shop-item button.ios26-row, #sheet-shop-item .ios26-menurow{ cursor:pointer; }
#sheet-shop-item .ios26-ico{
  width:29px; height:29px; border-radius:8px; flex:none; display:grid; place-items:center; color:#fff;
}
#sheet-shop-item .ios26-ico .material-symbols-outlined{ font-size:19px; }
.ic-red{ background:var(--i26-red); } .ic-grey{ background:#8e8e93; }
.ic-amber{ background:var(--i26-amber); } .ic-blue{ background:var(--i26-blue); }
.ic-green{ background:var(--i26-green); } .ic-indigo{ background:var(--i26-indigo); }
#sheet-shop-item .ios26-rlabel{ font-size:17px; font-weight:400; flex:1; letter-spacing:-.2px; color:var(--i26-tx); }
#sheet-shop-item .ios26-rsub{ display:block; font-size:13px; font-weight:600; color:var(--i26-blue); }
#sheet-shop-item .ios26-rval{ font-size:17px; color:var(--i26-tx2); letter-spacing:-.2px; max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sheet-shop-item .ios26-chev{ width:8px; height:14px; color:var(--i26-tx2); opacity:.5; flex:none; }

/* Inputs inside the grouped cards */
#sheet-shop-item .ios26-input{
  width:100%; border:none; background:transparent; outline:none;
  padding:14px 16px; font-size:17px; color:var(--i26-tx); font-family:inherit; letter-spacing:-.2px;
}
#sheet-shop-item .ios26-title-input{ font-weight:600; }
#sheet-shop-item .ios26-input::placeholder{ color:var(--i26-tx2); }
#sheet-shop-item .ios26-inrow{
  flex:1; border:none; background:transparent; outline:none; text-align:right;
  font-size:17px; color:var(--i26-tx); font-family:inherit;
}
#sheet-shop-item .ios26-inrow::placeholder{ color:var(--i26-tx2); }
#sheet-shop-item .ios26-phone{ text-align:left; }
#sheet-shop-item .ios26-selnative{
  border:none; background:transparent; outline:none; text-align:right;
  font-size:17px; color:var(--i26-tx2); font-family:inherit; -webkit-appearance:none; appearance:none;
  max-width:60%;
}
#sheet-shop-item .ios26-nativehidden{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
#sheet-shop-item .ios26-pickrow{ padding:4px 12px 12px; }
#sheet-shop-item .ios26-dateinput{
  border:none; background:rgba(120,120,128,.12); border-radius:9px;
  padding:9px 12px; font-size:16px; color:var(--i26-tx); font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
 html[data-theme="dark"] #sheet-shop-item .ios26-dateinput{ background:rgba(120,120,128,.22); color-scheme:dark; } 
#sheet-shop-item .ios26-wdrow{ flex-wrap:wrap; }
#sheet-shop-item .ios26-wdrow .weekdays{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
#sheet-shop-item .ios26-subtxt{ font-size:13px; color:var(--i26-tx2); padding:8px 22px 0; }
#sheet-shop-item .ios26-attachbtn{
  border:none; background:transparent; color:var(--i26-blue); font-size:17px;
  font-family:inherit; cursor:pointer; padding:0; flex:1; text-align:left;
}
#sheet-shop-item .ios26-visgroup{ padding:12px 16px; }

/* iOS switch */
.ios26-sw{
  width:51px; height:31px; border-radius:31px; background:rgba(120,120,128,.32);
  position:relative; flex:none; border:none; padding:0; cursor:pointer; transition:background .2s;
}
.ios26-sw::after{
  content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.16); transition:transform .2s;
}
.ios26-sw.on{ background:var(--i26-green); }
.ios26-sw.on::after{ transform:translateX(20px); }

/* Bottom actions */
#sheet-shop-item .ios26-actions{
  display:flex; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--i26-bg); border-top:1px solid var(--i26-sep);
}
#sheet-shop-item .ios26-del{ flex:1; background:var(--i26-card); color:var(--i26-red); border:none; border-radius:14px; font-weight:600; }
#sheet-shop-item .ios26-savebtn{ flex:2; border-radius:14px; }

/* Frosted-glass option popover */
.ios26-pop-ov{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.06); }
.ios26-pop{
  position:fixed; width:min(300px,86vw); z-index:2001;
  max-height:min(60vh,460px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px; padding:4px 0;
  background:var(--i26-glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  border:.5px solid var(--i26-glass-br);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  transform:scale(.96); opacity:0; transform-origin:top left; transition:transform .16s ease, opacity .16s ease;
}
.ios26-pop.in{ transform:scale(1); opacity:1; }
.ios26-popitem{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 16px; font-size:17px; color:var(--i26-tx); background:none; border:none;
  font-family:inherit; cursor:pointer;
}
.ios26-popitem + .ios26-popitem{ border-top:.5px solid var(--i26-sep); }
.ios26-popitem:active{ background:rgba(120,120,128,.18); }
.ios26-popitem .ios26-tick{ width:18px; height:18px; color:var(--i26-blue); opacity:0; flex:none; }
.ios26-popitem.ios26-on .ios26-tick{ opacity:1; }
.ios26-popitem span{ flex:1; }
@media (prefers-reduced-transparency: reduce){
  .ios26-pop{ background:var(--i26-card); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Suppress the auto-injected generic close button — our header supplies its own ✕/✓. */
#sheet-shop-item > .sheet-close{ display:none !important; }

/* ---- Home chrome: frosted-glass bottom nav (b116) ---- */
#bottomnav{
  background:var(--i26-glass) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border-top:.5px solid var(--i26-glass-br);
}
@media (prefers-reduced-transparency: reduce){
  #bottomnav{ background:var(--i26-card) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ============================================================
   PHASE 2 (build b119 · 2025-08-11) — iOS-26 "Liquid Glass" APP-WIDE
   Lifts the b116 task-sheet look onto the SHARED components so every
   bottom sheet, menu, long-press surface and settings screen matches
   the task sheet + bottom nav. CSS-ONLY re-skin — no element IDs or
   behaviour changed (RULES R27/R28).
   Scoped OUT: #sheet-shop-item (already iOS-26 via .ios26-sheet),
   .sheet.compact (keeps its lifted action-sheet shape), and the
   coloured grocery .section cards on the list screen.
   ============================================================ */

/* ---- 1. Bottom sheets: Apple grouped-canvas typography ---- */
.sheet:not(.ios26-sheet):not(.compact){
  border-radius: 22px 22px 0 0;
}
.sheet:not(.ios26-sheet):not(.compact) > h2:first-of-type,
.sheet:not(.ios26-sheet):not(.compact) .sheet-head h2{
  font-size: 22px; font-weight: 700; letter-spacing: -.4px;
  color: var(--i26-tx);
}
/* Section sub-headings inside a sheet → iOS grey uppercase (was indigo). */
.sheet:not(.ios26-sheet):not(.compact) h3{
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--i26-hdr);
  margin: 22px 0 8px 2px;
}

/* Auto-injected close ✕ → clean iOS round chip on every sheet/menu. */
.sheet-close, .side-panel .sheet-close{
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(120,120,128,.16); color: var(--i26-tx2);
  display: grid; place-items: center; border: none;
  box-shadow: none;
}

  html[data-theme="dark"] .sheet-close, html[data-theme="dark"] .side-panel .sheet-close{ background: rgba(120,120,128,.34); color: var(--i26-tx); }


/* ---- 2. Inputs: iOS grouped field with blue focus ring ---- */
.sheet:not(.ios26-sheet):not(.compact) .field input,
.sheet:not(.ios26-sheet):not(.compact) .field select,
.sheet:not(.ios26-sheet):not(.compact) .field textarea{
  border-radius: 12px;
  background: var(--row-bg);
  border: 1px solid transparent;
  font-size: 16px;                 /* 16px avoids iOS focus-zoom */
}
.sheet:not(.ios26-sheet):not(.compact) .field input:focus,
.sheet:not(.ios26-sheet):not(.compact) .field select:focus,
.sheet:not(.ios26-sheet):not(.compact) .field textarea:focus{
  outline: none; border-color: var(--i26-blue);
}
.sheet:not(.ios26-sheet):not(.compact) .field > span{
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--i26-hdr); margin-left: 4px;
}

/* ---- 3. Coloured-chip icon set — standard app-wide ----
   One consistent icon chip: a light accent-tinted rounded square with the
   glyph in the accent colour. Works for font glyphs AND svgs regardless of
   their fill, so nothing ever goes invisible. Danger rows tint red. */
.settings-menu{ gap: 10px; }
.settings-row{
  background: var(--i26-card); border: none;
  border-radius: 14px; padding: 13px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.settings-row + .settings-row{ margin-top: 0; }
.settings-ic{
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 19px !important;
  background: rgba(10,132,255,.14); color: var(--i26-blue);
}
.settings-txt b{ color: var(--i26-tx); font-weight: 600; font-size: 16px; }
.settings-txt small{ color: var(--i26-tx2); }
.settings-chev{ color: var(--i26-tx2); opacity: .5; }
.settings-row.danger{ background: var(--i26-card); border: none; }
.settings-row.danger .settings-ic{ background: rgba(255,59,48,.14); color: var(--i26-red); }
.settings-row.danger b{ color: var(--i26-red); }
.settings-row.danger .settings-chev{ color: var(--i26-red); opacity: .5; }

/* ---- 4. Hamburger side-panel: iOS grouped rows + chip icons ---- */
.side-panel{ background: var(--i26-bg); }
.panel-head h2{ color: var(--i26-tx); }
.panel-item{ background: var(--i26-card); color: var(--i26-tx); font-size: 16px; }
.panel-item svg{
  flex: none; width: 30px; height: 30px; padding: 6px; box-sizing: border-box;
  border-radius: 8px; background: rgba(10,132,255,.14); color: var(--i26-blue);
  opacity: 1;
}
.panel-item.danger{ color: var(--i26-red); }
.panel-item.danger svg{ background: rgba(255,59,48,.14); color: var(--i26-red); }
.panel-field{ background: var(--i26-card); }
.panel-field > label{ color: var(--i26-hdr); font-weight: 600; }

/* ---- 5. Chips, segmented + primary buttons: iOS radii ---- */
.chip{ border-radius: 999px; }
.btn{ border-radius: 14px; }
.btn.primary, .btn-primary, .btn-accent, button.primary{
  border-radius: 14px; font-weight: 600; letter-spacing: -.2px;
}

/* ---- 6. Generic modal close buttons unified to the same chip ---- */
.doc-modal-close, .set-close, .sheet-x{
  border-radius: 50%;
}

/* ---- 7. Screen headers: Apple large-title tightening (dashboard/vault/
   profile/landing all use these) ---- */
.sub-head h1, .home-head h1{ letter-spacing: -.4px; color: var(--i26-tx); }

/* ---- 8. Frosted floating tab pill (match the bottom nav glass, R26) ---- */
.tabbar{
  background: var(--i26-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: .5px solid var(--i26-glass-br);
}
@media (prefers-reduced-transparency: reduce){
  .tabbar{ background: var(--i26-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================
   BUILD b120 (2025-08-11) — iOS Contacts "ONE CARD PER FIELD"
   (RULES R25 · NON-NEGOTIABLE). User QA: the item-edit sheet crammed
   Section / Qty / Shop (and Date/Time/Repeat/Assign/etc.) into a single
   card with hairline dividers — cramped, un-Apple. Every row is now its
   OWN rounded card with a 10px gap and round edges, exactly like the
   iOS Contacts screen (each heading = its own tab). CSS-ONLY — all
   element IDs and behaviour preserved (R28). Scoped to #sheet-shop-item
   where the .ios26-group pattern lives.
   ============================================================ */
#sheet-shop-item .ios26-group:not(.ios26-visgroup){
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: flex; flex-direction: column; gap: 10px;
}
/* every visible child (input / row / menu row / weekday row / shop head +
   body / picker reveal) becomes its own standalone rounded card. */
#sheet-shop-item .ios26-group:not(.ios26-visgroup) > *:not(.ios26-hr){
  background: var(--i26-card);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  min-height: 52px;
}
/* the bare title/note inputs sit flush inside their own cards */
#sheet-shop-item .ios26-group:not(.ios26-visgroup) > .ios26-input{
  min-height: 0; padding: 15px 16px;
}
/* dividers are gone — the gap separates the cards now */
#sheet-shop-item .ios26-group .ios26-hr{ display: none !important; }
/* the "who can see it" control stays one tidy card, just fully rounded */
#sheet-shop-item .ios26-visgroup{ border-radius: 14px; }
/* a touch more breathing room above each section header */
#sheet-shop-item .ios26-sechdr{ padding: 24px 6px 8px; }

/* ============================================================
   BUILD b121 (2025-08-11) — iOS Contacts "ONE CARD PER ITEM" on the
   LIST SCREEN (RULES R25 · NON-NEGOTIABLE). This is the surface the user
   actually meant: every grocery item and every task row was crammed into
   ONE section card with hairline dividers. Now the section card is
   dissolved and EACH ROW is its own rounded white card with a gap, on the
   grey grouped canvas — exactly like the iOS Contacts screen. Applies to
   BOTH grocery AND task lists (all use #view-list .section/.rows/.row), so
   nothing is redesigned per-list — this is the shared core. CSS-ONLY; all
   IDs, swipe-to-delete, collapse and filter behaviour preserved (R28).
   ============================================================ */
/* 1. Dissolve the section container: no card fill / border / spine.
   Scoped to `.list` (the shared container class on BOTH #shop-list — every
   home tile: Grocery, Health, Car, Home Tasks, Pets, School, Maintenance,
   Shopping — AND #list, the trip packing list). Every list, one rule. */
.list .section{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 22px;
}
.list .section::before{ display: none !important; }

/* 2. Section header stays as its OWN rounded card (keeps the list hue so
      "Fruit" / "Tasks" still reads as a coloured header), with a gap below. */
.list .section-head{
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 13px 16px;
}

/* 3. Rows container keeps its display (so collapse/filter still work) — the
      gap between item cards comes from margins, never a display change. */
.list .row-swipe + .row-swipe{ margin-top: 10px; }

/* 4. EACH item = its own rounded card. overflow:hidden clips the swipe-to-
      delete panel to the card's rounded corners. */
.list .row-swipe{
  background: var(--surface);
  /* T12 — the same corner as Grocery and the six hubs. Grocery's own rule
     already said 16px; the Diary and any plain task list sat at 14px, on the
     same screen, two pixels different for no reason anyone chose.
     RADIUS ONLY. A border here would move the swipe-delete panel's clip by a
     pixel on every row, which is why these rows draw their hairline as a ring
     shadow instead — see halo9.css. */
  border-radius: var(--tc-rad);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  overflow: hidden;
}

  html[data-theme="dark"] .list .row-swipe{ box-shadow: 0 0 0 .5px rgba(255,255,255,.06); }


/* 5. The row itself: opaque card surface, no divider, roomier height. */
.list .row{
  background: var(--surface);
  border-top: none !important;
  border-radius: 14px;
  min-height: 58px;
}
.list .row:active{ background: var(--row-bg); }
/* keep the "new item" highlight readable on a white card */
.list .row.fresh{ background: hsl(45 100% 50% / .12); }


/* ---------- b125 · Child settings accordion (Profile) ---------- */
#child-settings{ display:flex; flex-direction:column; gap:10px; }
.cl-card{ background:#fff; border:1px solid var(--sep,#e3e3e8); border-radius:16px; overflow:hidden; }
.cl-head{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; background:none; border:0; cursor:pointer; text-align:left; }
.cl-ava{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; flex:0 0 auto; overflow:hidden; }
.cl-ava img{ width:100%; height:100%; object-fit:cover; }
.cl-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cl-nm{ font-size:16.5px; font-weight:600; color:#1c1c1e; }
.cl-st{ font-size:12.5px; color:#8a8a8e; margin-top:1px; }
.cl-pill{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; letter-spacing:.3px; flex:0 0 auto; }
.cl-pill.ok{ background:rgba(52,199,89,.15); color:#1e8e3e; }
.cl-pill.warn{ background:rgba(255,159,10,.18); color:#b26a00; }
.cl-caret{ color:#c4c4c9; font-size:22px; transition:transform .2s; flex:0 0 auto; }
.cl-caret.open{ transform:rotate(90deg); }
.cl-body{ border-top:1px solid var(--sep,#e3e3e8); padding:6px 14px 14px; }
.cl-loading{ color:#8a8a8e; font-size:13.5px; padding:10px 2px; }
.cl-mini{ font-size:12px; font-weight:600; color:#6d6d72; text-transform:uppercase; letter-spacing:.3px; margin:14px 2px 6px; }
.cl-note{ font-size:12px; color:#8a8a8e; margin:0 2px 8px; line-height:1.4; }
.cl-selrow{ display:flex; justify-content:space-between; align-items:center; margin:14px 2px 4px; }
.cl-sub{ background:#f6f6f9; border-radius:12px; overflow:hidden; }
.cl-row{ display:flex; align-items:center; gap:11px; padding:11px 12px; position:relative; }
.cl-row + .cl-row::before{ content:""; position:absolute; top:0; left:47px; right:0; height:1px; background:var(--sep,#e3e3e8); }
.cl-ic{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; overflow:hidden; }
.cl-ic img{ width:20px; height:20px; object-fit:contain; }
.cl-ic .material-symbols-outlined{ font-size:18px; }
.cl-lbl{ font-size:16px; color:#1c1c1e; flex:1; font-weight:500; }
.cl-link{ background:none; border:0; color:#0a84ff; font-size:13.5px; font-weight:600; cursor:pointer; padding:4px 2px; }
.cl-toggle{ background:none; border:0; padding:0; cursor:pointer; flex:0 0 auto; }
.cl-sw{ display:block; width:49px; height:30px; border-radius:16px; background:#e4e4ea; position:relative; transition:background .2s; }
.cl-sw.on{ background:#34c759; }
.cl-knob{ position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:left .2s; }
.cl-sw.on .cl-knob{ left:21px; }
.cl-btnrow{ display:flex; gap:10px; margin-top:14px; }
.cl-btn{ flex:1; text-align:center; padding:12px; border-radius:13px; font-size:14.5px; font-weight:600; border:0; cursor:pointer; }
.cl-btn.danger{ background:rgba(255,59,48,.1); color:#ff3b30; }

/* ---------- Appearance theme picker (Profile → Appearance) ---------- */
.theme-seg{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.theme-seg-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:64px;
  padding:12px 6px;
  border-radius:14px;
  border:1px solid var(--hair);
  background:var(--row-bg);
  color:var(--text-2);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.theme-seg-btn .material-symbols-outlined{ font-size:22px; }
.theme-seg-btn:active{ transform:scale(.97); }
.theme-seg-btn.on{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 6px 16px -8px var(--accent);
}

/* ---------- Vault nested sub-folders (b127) ---------- */
.vault-subfolders{ margin-top: 4px; }
.vault-here-docs{ margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
/* b184 — a child's folder supplies its own headings, one per school year, so
   the generic one would sit above them saying the same thing twice. */
.vault-here-docs:has(> .vault-year-head)::before{ display: none; }
.vault-here-docs::before{
  content: "In this folder";
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-2); text-transform: uppercase; opacity: .7;
  margin: 2px 2px 2px;
}

/* ==================== b129 · iOS-26 collapsible Settings accordions ==================== */
/* Every Profile heading is now a tap-to-open card (My contact card / Quick access /
   Household / Child settings / Home screen / Appearance / Notifications / Invite /
   Reminders / About). Smooth grid-rows expand; chevron rotates. */
.acc{
  background: var(--card-surface, #fff);
  border: .5px solid var(--hair);
  border-radius: 18px;
  margin: 0 0 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.acc-head{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 16px; min-height: 56px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.acc-head:active{ background: var(--row-bg); }
.acc-ic{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: hsl(var(--ah,210) 70% 92%);
  color: hsl(var(--ah,210) 52% 42%);
}
.acc-ic .material-symbols-outlined{ font-size: 20px; }
.acc-title{ flex: 1 1 auto; font-size: 17px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.acc-head .notif-pill{ flex: 0 0 auto; margin-right: 2px; }
.acc-chev{
  flex: 0 0 auto; color: var(--text-3); font-size: 24px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.acc.open .acc-chev{ transform: rotate(180deg); }
.acc-body{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.acc.open .acc-body{ grid-template-rows: 1fr; }
.acc-body-in{ overflow: hidden; min-height: 0; }
/* Flatten the inner section — the accordion card already provides the surface. */
.acc-body-in > .set-card,
.acc-body-in > .contact-card{
  margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent;
  padding: 4px 16px 18px;
}
.acc-body-in > .set-card.set-card-flush{ padding: 4px 10px 12px; }
/* dark */
html[data-theme="dark"] .acc{ background: var(--card-surface); border-color: var(--hair); box-shadow: var(--card-shadow); }
html[data-theme="dark"] .acc-ic{ background: hsl(var(--ah,210) 38% 22%); color: hsl(var(--ah,210) 60% 72%); }
@media (prefers-reduced-motion: reduce){
  .acc-chev, .acc-body{ transition: none; }
}

/* ==================== b131 · Notifications buttons — pixel-match the Appearance
   theme segmented style: three independent, equal-width tab cards (icon over
   label) sitting directly on the accordion surface — NO enclosing box. Uses
   flex so 1 / 2 / 3 buttons each fill their share equally (state-dependent). ==================== */
/* b133 · KILL the leftover box (THE bug 3 AIs missed). The shared rule near the
   top of this file (`#me-box, #push-box, #default-opts, … { box-shadow:0 0 0 .5px
   var(--hair); border-radius:16px; overflow:hidden; background:#fff }`) still
   painted a hairline RING around #push-box. The old de-box rule below only reset
   background/border/padding/margin — it NEVER reset box-shadow/border-radius/
   overflow, so that ring kept drawing the "cramped inner box" around the
   notification buttons. Reset them too (equal ID specificity, later rule wins) so
   the description + 3 buttons sit DIRECTLY on the accordion card, exactly like the
   Appearance theme picker. */
#push-box, .notif-box{
  background: transparent; border: 0; padding: 0; margin: 0;
  box-shadow: none; border-radius: 0; overflow: visible;
}
/* Equal, independent tab-cards for any count (3 on / 2 off / 1 blocked) — mirrors
   the Appearance .theme-seg-btn sizing via .notif-btn's `flex:1 1 0` below. */
.notif-actions{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
}
.notif-btn{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 64px; padding: 12px 6px;
  border-radius: 14px; border: 1px solid var(--hair);
  background: var(--row-bg); color: var(--text-2);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  text-align: center; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.notif-btn .material-symbols-outlined{ font-size: 22px; }
.notif-btn > span:last-child{ display: block; max-width: 100%; }
.notif-btn:active{ transform: scale(.97); }
.notif-btn.primary{
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 16px -8px var(--accent);
}

/* ==================== b129 · Documents Vault — dark-mode readability ==================== */
html[data-theme="dark"] .docs-title{ color: var(--text); }
html[data-theme="dark"] .docs-sub{ color: var(--text-2); }
html[data-theme="dark"] #view-documents{ background: transparent; }
html[data-theme="dark"] .vault-folder-name{ color: var(--text); }
html[data-theme="dark"] .vault-folder-count{ color: var(--text-3); }
html[data-theme="dark"] .vault-folder-body{
  background: hsl(var(--fhue) 36% 17%);
  border-color: hsl(var(--fhue) 30% 30%);
  box-shadow: 0 6px 16px rgba(0,0,0,.40);
}
html[data-theme="dark"] .vault-folder-tab{ background: hsl(var(--fhue) 34% 26%); }
html[data-theme="dark"] .vault-folder-ic{ color: hsl(var(--fhue) 60% 72%); }
html[data-theme="dark"] .vault-folder-new .vault-folder-body-new{
  border-color: rgba(255,255,255,.22); background: transparent;
}
html[data-theme="dark"] .vault-folder-new .vault-folder-ic,
html[data-theme="dark"] .vault-folder-new .vault-folder-name{ color: var(--text-3); }
html[data-theme="dark"] .vault-back{ color: var(--accent); }
html[data-theme="dark"] .docs-folder-empty{ color: var(--text-3); }
html[data-theme="dark"] .vault-here-docs::before{ color: var(--text-2); }


/* ==================== b130 · AI help assistant ==================== */
.ai-fab{
  position: fixed; right: 16px; z-index: 60;
  bottom: calc(76px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #6f61ff, #8f83ff);
  box-shadow: 0 10px 24px -6px rgba(111,97,255,.6);
  transition: transform .12s ease, box-shadow .15s ease;
}
.ai-fab:active{ transform: scale(.93); }
.ai-fab .material-symbols-outlined{ font-size: 27px; }

.ai-chat{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; }
.ai-chat-scrim{ position: absolute; inset: 0; background: rgba(10,12,22,.42); backdrop-filter: blur(2px); }
.ai-chat-panel{
  position: relative; width: 100%; max-width: 640px; margin: 0 auto;
  height: min(82vh, 640px); display: flex; flex-direction: column;
  background: var(--card-surface, #fff);
  border-radius: 24px 24px 0 0; overflow: hidden;
  box-shadow: 0 -12px 40px rgba(0,0,0,.22);
  padding-bottom: env(safe-area-inset-bottom);
  animation: ai-rise .26s cubic-bezier(.32,.72,0,1);
}
@keyframes ai-rise{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
.ai-chat-head{
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px;
  border-bottom: .5px solid var(--hair);
}
.ai-chat-badge{
  width: 38px; height: 38px; border-radius: 12px; flex: none; color: #fff;
  display: grid; place-items: center; background: linear-gradient(140deg,#6f61ff,#8f83ff);
}
.ai-chat-badge .material-symbols-outlined{ font-size: 22px; }
.ai-chat-head-txt{ flex: 1; min-width: 0; }
.ai-chat-head-txt h2{ margin: 0; font-size: 17px; font-weight: 800; color: var(--text); }
.ai-chat-head-txt p{ margin: 1px 0 0; font-size: 12.5px; color: var(--text-2); }
.ai-chat-x{
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--row-bg); color: var(--text-2); font-size: 15px;
}
.ai-chat-body{
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.ai-msg{ max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.42; }
.ai-msg-user{ align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.ai-msg-bot{ align-self: flex-start; background: var(--row-bg); color: var(--text); border-bottom-left-radius: 6px; }
.ai-msg-bot.ai-typing{ color: var(--text-3); }
.ai-nav-btn{
  align-self: flex-start; margin-top: -4px; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-family: inherit; font-weight: 700;
  font-size: 13.5px; cursor: pointer;
}
.ai-nav-btn:active{ transform: scale(.97); }
.ai-nav-btn .material-symbols-outlined{ font-size: 18px; }
.ai-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ai-chip{
  padding: 9px 13px; border-radius: 999px; border: .5px solid var(--hair);
  background: var(--row-bg); color: var(--text); font-family: inherit; font-size: 13px;
  cursor: pointer; text-align: left;
}
.ai-chip:active{ transform: scale(.97); }
.ai-chat-form{
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px;
  border-top: .5px solid var(--hair);
}
.ai-chat-input{
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--hair); background: var(--row-bg); color: var(--text);
  font-family: inherit; font-size: 15px;
}
.ai-chat-input:focus{ outline: none; border-color: var(--accent); }
.ai-chat-send{
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--accent);
}
.ai-chat-send:disabled{ opacity: .5; }
.ai-chat-send .material-symbols-outlined{ font-size: 22px; }

/* ==================== Pets — hub + Hartley wizard + profile (Phase 1, b132) ==================== */
.pets-topbar-row { display: flex; align-items: center; gap: 8px; }
.pets-topbar-row .title-wrap { flex: 1; text-align: center; }
.pets-add-top { margin-left: auto; }
.pets-body { padding: 16px; max-width: 640px; margin: 0 auto; }

.pets-empty { text-align: center; padding: 28px 18px 40px; }
.pets-empty h2 { margin: 22px 0 8px; font-size: 26px; font-weight: 800; color: var(--text); }
.pets-empty p { margin: 0 auto 22px; max-width: 320px; color: var(--text-2); font-size: 15px; line-height: 1.5; }

.pets-circles { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pets-circle { display: grid; place-items: center; border-radius: 50%; border: 2px dashed var(--hair);
  font-size: 26px; width: 76px; height: 76px; opacity: .55; }
.pets-circle.lg { width: 104px; height: 104px; font-size: 40px; opacity: .8; }

.pets-list { display: flex; flex-direction: column; gap: 16px; }
.petcard { display: block; width: 100%; text-align: left; padding: 0; border: none; cursor: pointer;
  background: var(--card-surface, #fff); border-radius: 22px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(20,22,40,.07); transition: transform .12s; }
.petcard:active { transform: scale(.985); }
.petcard-banner { height: 180px; display: grid; place-items: center; background: #efe7dc; overflow: hidden; }
html[data-theme="dark"] .petcard-banner { background: #2a2723; }
.petcard-photo { width: 100%; height: 100%; object-fit: cover; }
.petcard-emoji { font-size: 68px; }
.petcard-meta { padding: 16px 20px 20px; }
.petcard-name { font-size: 24px; font-weight: 800; color: var(--text); }
.petcard-age { margin-top: 2px; color: var(--text-2); font-size: 15px; }

.pets-more { text-align: center; padding: 34px 18px 8px; }
.pets-more h3 { margin: 18px 0 6px; font-size: 22px; font-weight: 800; color: var(--text-2); }
.pets-more p { margin: 0; color: var(--text-3); font-size: 15px; }
.pets-plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card-surface, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.15); font-weight: 700; vertical-align: middle; }

/* Add-pet intro sheet */
.addpet-head { display: flex; align-items: center; gap: 10px; }
.addpet-paw { color: var(--accent); font-size: 26px; }
.addpet-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.addpet-icons { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 20px; }
.addpet-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 2px dashed var(--hair); font-size: 26px; opacity: .7; }
.addpet-ic.big { width: 72px; height: 72px; font-size: 34px; opacity: .95; }
.btn.block { display: block; width: 100%; }
.addpet-sub { text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 12px 4px 4px; }

/* Hartley wizard */
.petw-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 12px; }
.petw-progress { flex: 1; height: 6px; border-radius: 3px; background: var(--track, rgba(120,120,140,.18)); overflow: hidden; }
.petw-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .25s; }
.petw-x { flex: none; width: 34px; height: 34px; border: none; background: var(--row-bg); color: var(--text-2);
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.petw-body { max-height: 58vh; overflow-y: auto; padding: 4px 2px; }
.petw-hi { margin-bottom: 6px; }
.petw-face { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--row-bg); font-size: 24px; }
.petw-q { background: var(--row-bg); color: var(--text); border-radius: 16px 16px 16px 4px;
  padding: 12px 15px; margin: 10px 0 0; max-width: 86%; font-size: 15.5px; line-height: 1.45; }
.petw-q.live { font-weight: 600; }
.petw-a { margin: 8px 0 0 auto; background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px;
  padding: 9px 14px; max-width: 80%; width: fit-content; font-size: 14.5px; font-weight: 600; }
.petw-a.skip { background: var(--row-bg); color: var(--text-3); font-weight: 500; }
.petw-controls { margin-top: 14px; }
.petw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.petw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 16px;
  border: 1.5px solid var(--hair); background: var(--card-surface, #fff); color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .1s, border-color .15s, background .15s; }
.petw-chip:active { transform: scale(.96); }
.petw-chip:hover { border-color: var(--accent); }
.petw-chip-emoji { font-size: 20px; }
.petw-textrow, .petw-daterow { display: flex; gap: 10px; align-items: center; }
.petw-input, .petw-date { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--hair); background: var(--card-surface, #fff); color: var(--text);
  font-family: inherit; font-size: 16px; }
.petw-send { flex: none; width: 48px; height: 48px; border: none; border-radius: 14px; background: var(--accent);
  color: #fff; display: grid; place-items: center; cursor: pointer; }
.petw-datenext { flex: none; }
.petw-photo { display: flex; flex-direction: column; gap: 10px; }
.petw-photo-drop { height: 120px; border: 2px dashed var(--hair); border-radius: 18px; display: grid; place-items: center;
  color: var(--text-3); margin-bottom: 4px; }
.petw-photo-drop .material-symbols-outlined { font-size: 40px; }
.petw-foot { display: flex; justify-content: flex-end; padding-top: 12px; min-height: 20px; }
.petw-skip { background: none; border: none; color: var(--text-2); font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; padding: 6px 4px; }
.petw-saving { text-align: center; padding: 40px 20px; color: var(--text-2); }
.spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--hair);
  border-top-color: var(--accent); border-radius: 50%; animation: petspin .8s linear infinite; }
@keyframes petspin { to { transform: rotate(360deg); } }

/* Pet profile (Phase 1) */
.pet-profile-body { max-height: 78vh; overflow-y: auto; padding: 2px; }
.pet-hero { background: #efe7dc; border-radius: 20px; padding: 16px; margin-bottom: 16px; }
html[data-theme="dark"] .pet-hero { background: #2a2723; }
.pet-hero-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pet-hero-emoji { font-size: 24px; }
.pet-hero-title h2 { margin: 0; font-size: 26px; font-weight: 800; color: var(--text); }
.pet-photo-wrap { border-radius: 14px; overflow: hidden; background: var(--card-surface, #fff); }
.pet-photo { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.pet-photo.empty { height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); }
.pet-photo-emoji { font-size: 56px; }
.pet-photo-hint { font-size: 14px; }
.pet-info-h { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: -.01em; }
.pet-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pet-info-cell { background: var(--card-surface, #fff); border: .5px solid var(--hair); border-radius: 14px; padding: 12px 14px; }
.pet-info-k { color: var(--text-2); font-size: 13px; margin-bottom: 3px; }
.pet-info-v { color: var(--text); font-size: 16px; font-weight: 700; }
.pet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.btn.danger { background: rgba(255,59,48,.12); color: #ff3b30; border: none; }
.pet-soon { text-align: center; color: var(--text-3); font-size: 13px; margin: 14px 0 4px; }

/* ==================== b140 · Pets polish (images, reposition, edit sheet) ==================== */
/* Cute image circles on the hub (replaces the emoji + dashed circle look). */
.pets-circle { border: none; background: transparent; overflow: visible; }
.pets-circle img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.pets-circle.sm { width: 72px; height: 72px; }
.pets-circle.lg { width: 108px; height: 108px; opacity: 1; }
.pets-circle.sm:first-child { transform: rotate(-6deg) translateY(6px); }
.pets-circle.sm:last-child { transform: rotate(6deg) translateY(6px); }
/* "Have more pets?" is now a real button (bug: the + used to do nothing). */
.pets-more { display: block; width: 100%; border: none; background: transparent; cursor: pointer;
  text-align: center; padding: 30px 18px 12px; border-radius: 20px; transition: background .15s, transform .1s; }
.pets-more:active { transform: scale(.99); background: var(--row-bg); }
.pets-plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; vertical-align: middle; }
/* Top-right add button alignment. */
.pets-add-top { margin-left: auto; }
.pets-topbar-row .back-btn { flex: none; }
/* Card banner: image fallback + focal-position honoured. */
.petcard-hero { width: 70%; height: 70%; object-fit: contain; margin: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.addpet-ic img, .addpet-ic.big img { width: 100%; height: 100%; object-fit: contain; }
.addpet-ic { overflow: visible; background: transparent; box-shadow: none; }

/* Wizard assistant identity (PRV, not Hartley). */
.petw-hi { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.petw-face { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; }
.petw-face .material-symbols-outlined { font-size: 22px; }
.petw-who { font-weight: 800; font-size: 15px; color: var(--text-2); }

/* Profile header bar with edit pencil. */
.pet-topbar { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.pet-top-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--row-bg);
  color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.pet-top-btn:active { transform: scale(.94); }
.pet-top-title { flex: 1; text-align: center; font-size: 18px; font-weight: 800; color: var(--text); }
.pet-photo { object-position: 50% 50%; }
/* Empty-photo state doubles as an "add a photo" button. */
.pet-photo.empty { width: 100%; border: none; cursor: pointer; position: relative; }
.pet-photo.empty.hasart { height: 220px; background: #f4efe7; display: grid; place-items: center; }
html[data-theme="dark"] .pet-photo.empty.hasart { background: #2a2723; }
.pet-photo-art { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.14)); }
.pet-photo-add { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--accent); font-size: 13.5px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: nowrap; }
html[data-theme="dark"] .pet-photo-add { background: rgba(40,40,44,.9); }
.pet-photo-add .material-symbols-outlined { font-size: 18px; }

/* Edit sheet (individual fields, iOS-26 grouped cards). */
.pet-edit-body { display: flex; flex-direction: column; max-height: 82vh; }
.pe-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.pe-x, .pe-save { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--row-bg);
  color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.pe-save { background: var(--accent); color: #fff; }
.pe-save[disabled] { opacity: .5; }
.pe-title { flex: 1; text-align: center; font-size: 18px; font-weight: 800; color: var(--text); }
.pe-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 20px; display: flex; flex-direction: column; gap: 12px; }
.pe-photo-card { background: var(--card-surface, #fff); border-radius: 18px; box-shadow: 0 0 0 .5px var(--hair); padding: 12px; }
.pe-photo-frame { position: relative; height: 240px; border-radius: 14px; overflow: hidden; background: #f4efe7;
  touch-action: none; cursor: grab; user-select: none; }
html[data-theme="dark"] .pe-photo-frame { background: #2a2723; }
.pe-photo-frame.dragging { cursor: grabbing; }
.pe-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; }
.pe-photo-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; }
.pe-photo-hint .material-symbols-outlined { font-size: 15px; }
.pe-photo-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); }
.pe-photo-empty img { width: 120px; height: 120px; object-fit: contain; }
.pe-photo-emoji { font-size: 54px; }
.pe-photo-btns { display: flex; gap: 8px; margin-top: 10px; }
.pe-photo-btns .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pe-photo-btns .material-symbols-outlined { font-size: 18px; }
.btn.ghost { background: var(--row-bg); color: var(--text-2); border: none; }
.pe-field { display: flex; flex-direction: column; gap: 8px; background: var(--card-surface, #fff);
  border-radius: 16px; box-shadow: 0 0 0 .5px var(--hair); padding: 13px 14px; }
.pe-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
.pe-input { width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit;
  font-size: 16px; font-weight: 600; padding: 2px 0; }
.pe-input:focus { outline: none; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-chip { padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--hair); background: transparent;
  color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.pe-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Car registration lookup (DVSA MOT History) */
.veh-reg-row { display: flex; align-items: center; gap: 10px; }
.veh-reg-row .pe-input { flex: 1; letter-spacing: 1.5px; }
.veh-lookup-btn { flex: none; min-width: 78px; min-height: 40px; padding: 0 16px; border: none;
  border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; font-size: 14.5px;
  font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .1s; }
.veh-lookup-btn:active { transform: scale(.96); }
.veh-lookup-btn[disabled] { opacity: .6; }
.veh-lookup-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; animation: veh-spin .7s linear infinite; display: inline-block; }
.veh-lookup-spin.dark { border-color: var(--hair); border-top-color: var(--accent); }
@keyframes veh-spin { to { transform: rotate(360deg); } }
.veh-lookup-card { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 16px;
  background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair); animation: veh-fade .25s ease; }
@keyframes veh-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.veh-lookup-card.loading, .veh-lookup-card.empty { color: var(--text-3); font-size: 14.5px; font-weight: 600; }
.veh-lookup-card.empty .material-symbols-outlined { color: var(--text-3); font-size: 22px; }
.veh-lookup-card.ok { background: linear-gradient(135deg, rgba(52,199,89,.10), rgba(52,199,89,.03));
  box-shadow: 0 0 0 1px rgba(52,199,89,.28); }
.veh-lookup-emoji { font-size: 30px; line-height: 1; flex: none; }
.veh-lookup-main { flex: 1; min-width: 0; }
.veh-lookup-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-lookup-sub { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.veh-lookup-mot { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 13px;
  font-weight: 700; color: #1a7f37; }
.veh-lookup-mot .material-symbols-outlined { font-size: 17px; }
.veh-lookup-badge { color: #34c759; font-size: 24px; flex: none; }

/* ===== Car profile redesign (b160) ===== */
.veh-marque { width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, #ffffff, #e2e4f0);
  box-shadow: inset 0 0 0 1px #d3d5e6, 0 2px 6px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.veh-marque > span { font-weight: 800; color: #6a6c86; font-size: 10.5px; letter-spacing: .2px; line-height: 1; text-align: center; padding: 0 3px; }
.veh-marque .material-symbols-outlined { font-size: 22px; color: #8a8c9e; }
.veh-marque.lg { width: 52px; height: 52px; }
.veh-marque.lg > span { font-size: 12px; }

.veh-plate { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.22); border: 1px solid rgba(0,0,0,.15); }
.veh-plate .gb { background: #0b3fae; color: #fff; width: 17px; display: flex; align-items: center; justify-content: center; }
.veh-plate .gb b { font-size: 7.5px; font-weight: 800; letter-spacing: .2px; }
.veh-plate .reg { background: #fff; color: #111; font-weight: 800; font-size: 19px; letter-spacing: 1.5px;
  padding: 3px 9px; font-family: "Arial Narrow", Arial, sans-serif; }
.veh-plate.sm .reg { font-size: 14px; padding: 3px 7px; letter-spacing: 1px; }
.veh-plate.sm .gb { width: 14px; }
.veh-plate.sm .gb b { font-size: 6.5px; }

.veh-hero { position: relative; border-radius: 22px; overflow: hidden; margin: 4px 0 14px;
  background: linear-gradient(160deg, #eaeafb, #d8dcf1); box-shadow: 0 10px 26px rgba(20,20,60,.10); }
.veh-hero-imgwrap { width: 100%; height: 186px; display: flex; align-items: center; justify-content: center; }
.veh-hero-img { width: 100%; height: 186px; object-fit: cover; display: block; }
.veh-hero-img.default { object-fit: cover; }
.veh-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.42)); pointer-events: none; }
.veh-usephoto { position: absolute; top: 12px; right: 12px; z-index: 2; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px); color: #2a2a34; font-size: 12.5px; font-weight: 700; font-family: inherit; }
.veh-usephoto .material-symbols-outlined { font-size: 16px; }
.veh-usephoto:active { transform: scale(.96); }
.veh-hero-ovl { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 11px; right: 14px; }
.veh-hero-txt { min-width: 0; }
.veh-hero-mm { font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }

.veh-rings { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 6px; }
.veh-ring { flex: 1; text-align: center; }
.veh-ring svg { width: 78px; height: 78px; }
.veh-ring-lab { font-size: 12px; font-weight: 800; color: #2a2a34; margin-top: 2px; }
.veh-ring-dy { font-size: 11px; color: #8a8a95; font-weight: 600; margin-top: 1px; }
.veh-ring.add { flex: 1; border: none; cursor: pointer; background: transparent; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.veh-ring.add .veh-ring-plus { width: 66px; height: 66px; border-radius: 50%; border: 2px dashed #cfcfe0;
  color: #b3b3c4; font-size: 30px; font-weight: 300; display: flex; align-items: center; justify-content: center; }
.veh-ring.add:active { transform: scale(.97); }
.veh-spec-grid .pet-info-v { text-transform: none; }

.pe-daterow { display: flex; gap: 12px; }
.pe-daterow .pe-field { flex: 1; }

/* Car welcome / empty state */
.veh-welcome .veh-welcome-art { width: 100%; height: 168px; border-radius: 22px; overflow: hidden;
  margin: 4px auto 18px; background: linear-gradient(160deg, #eaeafb, #d8dcf1); box-shadow: 0 12px 30px rgba(20,20,60,.12); }
.veh-welcome .veh-welcome-art img { width: 100%; height: 168px; object-fit: cover; display: block;
  transition: opacity .3s ease; }
.pe-chip:active { transform: scale(.96); }
/* R29 — these sheets carry their own header (back/edit/save), so hide the
   auto-injected generic top-right ✕ to avoid a double close button. */
#sheet-pet > .sheet-close, #sheet-pet-edit > .sheet-close, #sheet-cropper > .sheet-close,
#sheet-pet-activity > .sheet-close, #sheet-pet-suggest > .sheet-close { display: none; }

/* ==================== b141 · Photo Studio cropper (drag + pinch/zoom) ==================== */
.crop-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.crop-wrap { padding: 0 2px; }
.crop-stage { position: relative; width: 100%; height: 320px; border-radius: 18px; overflow: hidden;
  background: #0d0d10; touch-action: none; cursor: grab; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.crop-stage:active { cursor: grabbing; }
.crop-stage.round { border-radius: 999px; }
.crop-stage img { position: absolute; top: 0; left: 0; max-width: none; will-change: transform; pointer-events: none; -webkit-user-drag: none; }
.crop-tools { display: flex; align-items: center; gap: 12px; padding: 16px 6px 4px; }
.crop-zico { color: var(--text-3); font-size: 22px; }
.crop-zoom { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: var(--hair); outline: none; }
.crop-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.crop-zoom::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }
.crop-hint { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 8px 0 2px; }

/* Pets edit — static photo preview + "reposition & zoom" affordance. */
.pe-photo-img.static { width: 100%; height: 100%; object-fit: cover; }
.pe-photo-adjust { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pe-photo-adjust .material-symbols-outlined { font-size: 17px; }
.pe-photo-adjust:active { transform: translateX(-50%) scale(.96); }

/* ==================== b142 · Pets Phase 2 — Activities, Notes, Suggestions ==================== */
.pet-section { margin-top: 22px; }
.pet-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pet-sec-head .pet-info-h { margin: 0; }
.pet-sec-add { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent);
  color: #fff; display: grid; place-items: center; cursor: pointer; }
.pet-sec-add:active { transform: scale(.92); }
.pet-sec-add .material-symbols-outlined { font-size: 20px; }
.pet-sec-loading, .pet-empty-row { color: var(--text-3); font-size: 14px; padding: 12px 2px; }
.pet-activities { display: flex; flex-direction: column; gap: 8px; }
.pet-act { display: flex; align-items: center; gap: 12px; background: var(--card-surface, #fff);
  border-radius: 14px; box-shadow: 0 0 0 .5px var(--hair); padding: 12px 12px; }
.pet-act-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--hair);
  background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.pet-act.done .pet-act-check { background: #2fae5f; border-color: #2fae5f; }
/* b157 — the "nudge" bell (mirrors the task-list flag). Resting = muted grey;
   .on = amber-filled so a nudged reminder reads as needing attention now. */
/* b210 — the section bell's own look is gone; it draws as .buy-flag above.
   Left as a marker so the next reader knows where it went. */
.pet-act-body { flex: 1; min-width: 0; text-align: left; border: none; background: transparent;
  padding: 0; cursor: pointer; font-family: inherit; }
.pet-act-label { font-size: 15.5px; font-weight: 600; color: var(--text); }
.pet-act.done .pet-act-label { text-decoration: line-through; color: var(--text-3); }
.pet-act-meta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pet-act > .lp-assign-chip.assign-compact { flex: none; align-self: center; margin: 0 2px; }
.pet-act-urgent { color: #e5484d; font-weight: 700; }
.pet-act-done { font-size: 12.5px; font-weight: 600; color: var(--accent, #2b6cff); margin-top: 3px; }
.pet-act-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.pet-act-hist { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent;
  color: var(--accent, #2b6cff); font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 8px;
  cursor: pointer; font-family: inherit; }
.pet-act-hist:active { background: var(--row-bg); }
.pet-act-del { width: 34px; height: 34px; flex: none; border: none; background: transparent; color: var(--text-3);
  display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.pet-act-del:active { background: var(--row-bg); }
/* b143 — green-tick confirmation flash when a care activity is completed */
.pet-act.just-done { box-shadow: 0 0 0 1.5px #2fae5f; transition: box-shadow .2s; }
.pet-act.just-done .pet-act-check { background: #2fae5f; border-color: #2fae5f;
  animation: prvJustDone .4s cubic-bezier(.34,1.56,.64,1); }
.pet-suggest-btn { margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pet-suggest-btn .material-symbols-outlined { font-size: 19px; color: var(--accent); }
.pet-notes-input { width: 100%; border: none; background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair);
  border-radius: 14px; padding: 13px 14px; font-family: inherit; font-size: 15px; color: var(--text); resize: vertical; min-height: 84px; }
.pet-notes-input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
/* b143 — per-pet Documents section */
.pet-docs { display: flex; flex-direction: column; gap: 8px; }
.pet-doc-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair); border: none;
  border-radius: 14px; padding: 12px; cursor: pointer; font-family: inherit; }
.pet-doc-row:active { background: var(--row-bg); }
.pet-doc-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pet-doc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pet-doc-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-doc-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pet-doc-type { font-weight: 700; color: var(--accent, #2b6cff); text-transform: capitalize; }
.pet-doc-chev { color: var(--text-3); font-size: 20px; flex: none; }
.pet-doc-hint { font-size: 12.5px; color: var(--text-3); margin: 10px 2px 0; line-height: 1.45; }
/* b143 — delete a completion-history entry + blue "History" tag */
.histx-day-lbl { color: var(--accent, #2b6cff); }
.histx-del { margin-left: auto; width: 32px; height: 32px; flex: none; border: none; background: transparent;
  color: #e5484d; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.histx-del:active { background: var(--row-bg); }
/* b144 — School: term dates (holidays red), child photo picker, hub circles */
.pets-circle.sch { display: grid; place-items: center; font-size: 26px; background: var(--card-surface, #fff); }
.pets-circle.lg.sch { font-size: 40px; }
.child-terms { display: flex; flex-direction: column; gap: 6px; }
.term-row { display: flex; align-items: center; gap: 11px; background: var(--card-surface, #fff);
  box-shadow: 0 0 0 .5px var(--hair); border-radius: 13px; padding: 11px 13px; }
.term-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #1c1c1e; }
.term-row.hol .term-dot { background: #e5484d; }
.term-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.term-label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.term-row.hol .term-label { color: #e5484d; }
.term-range { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.term-row.hol .term-range { color: #e5484d; opacity: .8; }
.term-tag { flex: none; font-size: 11px; font-weight: 800; color: #e5484d; text-transform: uppercase;
  letter-spacing: .3px; background: color-mix(in srgb, #e5484d 12%, transparent); padding: 3px 8px; border-radius: 999px; }
.child-photo-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; cursor: pointer; margin: 4px 0 14px; }
.child-photo-prev { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; box-shadow: 0 0 0 .5px var(--hair); }
.child-photo-ph { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.child-photo-ph .material-symbols-outlined { font-size: 34px; }
.child-photo-cap { font-size: 12.5px; color: var(--text-3); }

/* Suggestions sheet */
.pet-suggest-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--text-3); font-size: 14px; }
.pet-suggest-loading .material-symbols-outlined { font-size: 34px; color: var(--accent); }
.spin { animation: prvspin 1s linear infinite; }
@keyframes prvspin { to { transform: rotate(360deg); } }
.pet-sugg { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card-surface, #fff); border: none; box-shadow: 0 0 0 .5px var(--hair); border-radius: 14px; padding: 12px 14px; }
.pet-sugg-box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--hair);
  display: grid; place-items: center; color: #fff; transition: all .12s; }
.pet-sugg.on .pet-sugg-box { background: var(--accent); border-color: var(--accent); }
.pet-sugg-body { flex: 1; min-width: 0; }
.pet-sugg-label { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); }
.pet-sugg-meta { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.pet-sugg:active { transform: scale(.99); }
/* ==================== b134 · compact assignee chip (avatar-only) ====================
   User: the row's "Assign to" chip showed the full name and ate the row width.
   Now it shows ONLY the avatar (photo thumbnail, or initials fallback) with a
   small +N for multiple assignees. The full name lives in the title/aria-label. */
.lp-assign-chip.assign-compact{ gap: 2px; padding: 3px 5px 3px 3px; }
.lp-assign-chip.assign-compact .nm{ display: none; }
.lp-assign-chip.assign-compact .av{ width: 26px; height: 26px; font-size: 11px; font-weight: 800; }
.lp-assign-chip.assign-compact .av img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lp-assign-chip.assign-compact .lp-assign-add{ font-size: 18px; line-height: 1; color: var(--text-3); }
.lp-assign-more{ font-size: 11px; font-weight: 800; color: var(--text-2); margin: 0 1px; }

/* ==================== b137 · Vault — iOS-26 sub-folder list + bulk select ==================== */
.vault-sublist{ display:flex; flex-direction:column; background:var(--card-surface,#fff); border-radius:16px; box-shadow:0 0 0 .5px var(--hair); overflow:hidden; margin:12px 0 16px; }
.vault-subrow{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; background:transparent; border:0; text-align:left; position:relative; }
.vault-subrow + .vault-subrow, .vault-subrow-new{ box-shadow: inset 0 .5px 0 var(--hair); }
.vault-subrow:active{ background:var(--row-bg); }
.vault-subrow-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:hsl(var(--fhue,210) 70% 94%); color:hsl(var(--fhue,210) 55% 42%); }
  html[data-theme="dark"] .vault-subrow-ic{ background:hsl(var(--fhue,210) 40% 22%); color:hsl(var(--fhue,210) 70% 72%); }
.vault-subrow-ic .material-symbols-outlined{ font-size:20px; }
.vault-subrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.vault-subrow-name{ font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vault-subrow-sub{ font-size:12px; color:var(--text-3); }
.vault-subrow-count{ font-size:13px; color:var(--text-3); flex:none; min-width:18px; text-align:right; }
.vault-subrow-chev{ font-size:20px; color:var(--text-3); flex:none; margin-left:2px; }
.vault-subrow-ic-new{ background:transparent; color:var(--accent,#6b5cff); box-shadow:inset 0 0 0 1.5px currentColor; }
.vault-subrow-new .vault-subrow-name{ color:var(--accent,#6b5cff); font-weight:700; }

/* Multi-select on document rows */
.vault-here-docs.selecting .doc-card{ position:relative; padding-left:46px; }
.vault-here-docs.selecting .doc-card::before{ content:''; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; box-shadow: inset 0 0 0 2px var(--text-3); transition: background .12s ease; }
.vault-here-docs.selecting .doc-card.selected::before{ content:'✓'; background:var(--accent,#6b5cff); box-shadow:none; color:#fff; font-size:14px; font-weight:800; line-height:22px; text-align:center; }
.doc-select-bar{ display:flex; align-items:center; gap:8px; padding:9px 10px; margin:0 0 12px; background:var(--card-surface,#fff); border-radius:14px; box-shadow:0 0 0 .5px var(--hair); position:sticky; top:6px; z-index:5; }
.dsb-count{ flex:1; text-align:center; font-size:14px; font-weight:700; color:var(--text); }
.dsb-btn{ font-size:14px; font-weight:600; color:var(--accent,#6b5cff); background:transparent; border:0; padding:6px 8px; display:inline-flex; align-items:center; gap:4px; }
.dsb-move{ font-weight:800; }
.dsb-move[disabled]{ color:var(--text-3); opacity:.5; }
.dsb-move .material-symbols-outlined{ font-size:18px; }

/* Move-to-folder sheet */
#sheet-move-folder .mv-list{ display:flex; flex-direction:column; gap:2px; max-height:58vh; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-top:8px; }
.mv-row{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; background:transparent; border:0; text-align:left; border-radius:12px; color:var(--text); }
.mv-row:active{ background:var(--row-bg); }
.mv-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:hsl(var(--fhue,210) 70% 94%); color:hsl(var(--fhue,210) 55% 42%); }
  html[data-theme="dark"] .mv-ic{ background:hsl(var(--fhue,210) 40% 22%); color:hsl(var(--fhue,210) 70% 72%); }
.mv-ic .material-symbols-outlined{ font-size:18px; }
.mv-sub{ padding-left:26px; }
.mv-ic-sub{ background:transparent; box-shadow:inset 0 0 0 1px var(--hair); color:var(--text-2); }
.mv-name{ font-size:15px; font-weight:600; }
.mv-sub-date{ font-size:12px; color:var(--text-3); font-weight:500; }

/* ==================== b138 · AI assistant action cards ==================== */
.ai-action{ align-self:flex-start; max-width:88%; margin:2px 0 4px; padding:12px 14px; border-radius:16px; background:var(--card-surface,#fff); box-shadow:0 0 0 .5px var(--hair), 0 4px 14px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:10px; }
.ai-action-main{ display:flex; align-items:flex-start; gap:10px; }
.ai-action-ic{ font-size:22px; color:var(--accent,#6b5cff); flex:none; margin-top:1px; }
.ai-action-label{ font-size:14px; line-height:1.4; color:var(--text); font-weight:600; }
.ai-action-btns{ display:flex; gap:8px; justify-content:flex-end; }
.ai-action-no{ font-size:14px; font-weight:600; color:var(--text-2); background:var(--row-bg); border:0; border-radius:11px; padding:8px 14px; }
.ai-action-yes{ font-size:14px; font-weight:800; color:#fff; background:var(--accent,#6b5cff); border:0; border-radius:11px; padding:8px 16px; display:inline-flex; align-items:center; gap:4px; }
.ai-action-yes .material-symbols-outlined{ font-size:18px; }
.ai-action-yes[disabled]{ opacity:.6; }
.ai-action.done{ opacity:.9; }
.ai-action.done .ai-action-ic{ color:#2fae5f; }



/* ==========================================================================
   b148 — Pet / School / Car profile as a FULL-PAGE card (was a bottom sheet).
   Frozen top bar (back + 3-line menu), iOS-26 "same card" sections, neat empty
   bars for Reminders (smart) & Documents (clip). Shared by all three hubs via
   the .profile-page class on #sheet-pet / #sheet-child / #sheet-vehicle.
   ========================================================================== */
.sheet.profile-page,
.sheet.profile-page:not(.compact):not([hidden]) {
  top: 0;
  bottom: 0;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border: 0;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom) + 40px);
  background: var(--bg, #f2f3f8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  animation: prvProfileIn .34s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
@keyframes prvProfileIn { from { transform: translate3d(100%,0,0); } }
/* No grabber / no injected X on a full page — the back button is the exit. */
.sheet.profile-page::before { content: none !important; display: none !important; }
.sheet.profile-page > .grabber,
.sheet.profile-page > .sheet-close { display: none !important; }

/* b152 — the profile is now a FULL PAGE, so its body must NOT keep the old
   bottom-sheet cap (`.pet-profile-body { max-height:78vh; overflow-y:auto }`).
   That inner 78vh scroll box clipped the lower Information rows (Address / Phase
   / School type / Ofsted after b151) and left dead grey space below. Let the
   whole page scroll as one; the sticky top bar then freezes against the sheet. */
.sheet.profile-page .pet-profile-body {
  max-height: none;
  overflow: visible;
  padding: 2px 2px 0;
}

/* Frozen top bar */
.sheet.profile-page .pet-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 calc(var(--pad) * -1);
  padding: calc(env(safe-area-inset-top) + 8px) var(--pad) 10px;
  background: var(--bg, #f2f3f8);
  border-bottom: .5px solid var(--hair);
}
.sheet.profile-page .pet-top-title { font-size: 17px; }

/* iOS-26 "same card" sections — one consistent card per heading (picture 3). */
.sheet.profile-page .pet-section {
  margin-top: 14px;
  background: var(--card-surface, #fff);
  border: .5px solid var(--hair);
  border-radius: 20px;
  padding: 16px 16px 18px;
  box-shadow: 0 1px 3px rgba(15,20,60,.05);
}
.sheet.profile-page .pet-section[hidden] { display: none; }
.sheet.profile-page .pet-sec-head { margin-bottom: 12px; }
.sheet.profile-page .pet-sec-head .pet-info-h,
.sheet.profile-page .pet-info .pet-info-h { font-size: 17px; font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.sheet.profile-page .pet-notes,
.sheet.profile-page .pet-activities { margin: 0; }
.sheet.profile-page .pet-doc-hint { margin: 12px 2px 0; }

/* Section header tool cluster (smart + add) sit at the right end of the bar. */
.pet-sec-tools { display: inline-flex; align-items: center; gap: 8px; }
.pet-sec-smart {
  width: 34px; height: 34px; border-radius: 50%;
  border: .5px solid var(--hair);
  background: var(--card-surface, #fff);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(15,20,60,.08);
  cursor: pointer;
}
.pet-sec-smart:active { transform: scale(.92); }
.pet-sec-smart .material-symbols-outlined { font-size: 20px; }
/* Picture-3 look: light circular add/clip button with a dark glyph. */
.sheet.profile-page .pet-sec-add {
  width: 34px; height: 34px;
  background: var(--card-surface, #fff);
  border: .5px solid var(--hair);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15,20,60,.08);
}
.sheet.profile-page .pet-sec-add .material-symbols-outlined { font-size: 21px; color: var(--text); }

/* ---- 3-line profile menu (bottom action sheet, not a .sheet so it layers
   ON TOP of the full-page profile instead of replacing it) ---- */
.pm-overlay { position: fixed; inset: 0; z-index: 120; }
.pm-overlay[hidden] { display: none; }
.pm-scrim { position: absolute; inset: 0; background: rgba(10,10,20,.34);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s var(--ease-out); }
.pm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 10px);
  animation: up .34s var(--ease-spring, cubic-bezier(.22,.9,.3,1));
}
.pm-card, .pm-cancel {
  background: var(--card-surface, #fff);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(15,20,60,.18);
}
.pm-card { margin-bottom: 8px; }
.pm-item {
  width: 100%; border: 0; background: transparent;
  padding: 16px 18px; font-size: 17px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  border-bottom: .5px solid var(--hair);
}
.pm-item:last-child { border-bottom: 0; }
/* b184 — a school year header inside a child's Vault folder. The Vault is not
   inside the School token gate, so this is written in the shared vocabulary. */
.vault-year-head {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-3);
  padding: 16px 2px 6px;
}
.vault-here-docs > .vault-year-head:first-child { padding-top: 4px; }
.pm-item:active { background: var(--row-bg); }
.pm-item .material-symbols-outlined { font-size: 22px; color: var(--text-2); }
.pm-item.danger { color: #e5484d; }
.pm-item.danger .material-symbols-outlined { color: #e5484d; }
.pm-cancel {
  width: 100%; border: 0; padding: 16px; font-size: 17px; font-weight: 800;
  color: var(--accent); cursor: pointer;
}
.pm-cancel:active { background: var(--row-bg); }
html[data-theme="dark"] .sheet.profile-page,
html[data-theme="dark"] .sheet.profile-page .pet-topbar { background: var(--bg, #000); }

/* b151 — School name auto-lookup (typeahead dropdown + matched-school chip).
   Static list that pushes the form down (no overlay) — cheap + iOS-list style. */
.school-suggest {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  background: var(--card-surface, #fff);
  border: 0.5px solid var(--sep, rgba(60,60,67,.14));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 4px 20px rgba(0,0,0,.04));
}
.school-suggest[hidden] { display: none; }
.school-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  min-height: 44px;
  justify-content: center;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--sep, rgba(60,60,67,.1));
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.school-suggest-item:last-child { border-bottom: 0; }
.school-suggest-item:active { background: var(--row-bg, rgba(0,0,0,.05)); }
.ss-name { font-size: 15px; font-weight: 600; color: var(--text, #111); }
.ss-meta { font-size: 12.5px; color: var(--text-2, #6b7280); }
.school-info-chip {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(10,132,255,.08);
  border-radius: 12px;
}
.school-info-chip .material-symbols-outlined { color: #0a84ff; font-size: 20px; line-height: 1.1; }
.school-info-chip .si-body { display: flex; flex-direction: column; gap: 3px; }
.si-addr { font-size: 13px; color: var(--text, #111); }
.si-ph { font-size: 12px; color: var(--text-2, #6b7280); }
.si-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(52,199,89,.16);
  color: #248a3d;
}
html[data-theme="dark"] .si-badge { color: #4cd964; }

/* ===== b152 — School child documents: expandable tabs + laid-out report ===== */
.pet-docs { display: flex; flex-direction: column; gap: 8px; }
.cdoc { background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair); border-radius: 14px; overflow: hidden; }
.cdoc-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: none; padding: 12px; cursor: pointer; font-family: inherit; }
.cdoc-head:active { background: var(--row-bg); }
.cdoc-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cdoc-head-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cdoc-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdoc-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.cdoc-type { font-weight: 700; color: var(--accent, #2b6cff); text-transform: capitalize; }
.cdoc-chev { color: var(--text-3); font-size: 22px; flex: none; transition: transform .22s ease; }
.cdoc.open .cdoc-chev { transform: rotate(180deg); }
.cdoc-body { padding: 2px 13px 13px; border-top: .5px solid var(--hair); }
.cdoc-summary { font-size: 13.5px; color: var(--text-2, var(--text)); line-height: 1.5; margin: 12px 0 4px; }
.cdoc-summary.muted { color: var(--text-3); }
.cdoc-fields { display: flex; flex-direction: column; margin-top: 8px; }
.cdoc-field { padding: 9px 0; border-top: .5px solid var(--hair); }
.cdoc-field:first-child { border-top: none; }
.cdoc-fk { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
.cdoc-fv { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; word-break: break-word; }
.cdoc-tools { display: flex; gap: 8px; margin-top: 12px; }
.cdoc-tool { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: none;
  border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.cdoc-tool .material-symbols-outlined { font-size: 18px; }
.cdoc-tool:active { opacity: .7; }
/* Report layout */
.cdoc-report { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
/* #5 — medical report results (blood tests etc.), iOS-26 grouped rows */
.med-results { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 .5px var(--hair); background: var(--card-surface, #fff); }
.med-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: .5px solid var(--hair); }
.med-row:last-child { border-bottom: 0; }
.med-name { font-size: 14.5px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.med-vals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.med-value { font-size: 14.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.med-range { font-size: 11.5px; color: var(--text-3); }
.med-flag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; }
.med-flag.fl-normal { background: rgba(52,199,89,.16); color: #1f8a3b; }
.med-flag.fl-high { background: rgba(255,59,48,.16); color: #c0392b; }
.med-flag.fl-low { background: rgba(255,149,0,.18); color: #b8690b; }
.med-flag.fl-abn { background: rgba(255,149,0,.18); color: #b8690b; }
html[data-theme="dark"] .med-flag.fl-normal { color: #4cd964; }
html[data-theme="dark"] .med-flag.fl-high { color: #ff6b60; }
html[data-theme="dark"] .med-flag.fl-low, html[data-theme="dark"] .med-flag.fl-abn { color: #ffb454; }
.rep-period { font-size: 12.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: .5px solid var(--hair); border-radius: 12px; overflow: hidden; }
.rep-cell { background: var(--card-surface, #fff); padding: 9px 11px; }
.rep-cell-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
.rep-cell-v { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 2px; }
.rep-block-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin: 0 0 8px 2px; }
.rep-subjects { display: flex; flex-direction: column; gap: 6px; }
.rep-subj { background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair); border-radius: 12px; padding: 10px 12px; }
.rep-subj-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-subj-name { font-size: 14.5px; font-weight: 700; color: var(--text); flex: 1; min-width: 90px; }
.rep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rep-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  background: var(--row-bg, #f2f2f7); border-radius: 999px; padding: 3px 9px; color: var(--text); }
.rep-chip-k { font-weight: 600; color: var(--text-3); text-transform: none; }
.rep-chip-v { font-weight: 800; }
.rep-chip.g-e { background: rgba(52,199,89,.16); } .rep-chip.g-e .rep-chip-v { color: #248a3d; }
.rep-chip.g-g { background: rgba(0,122,255,.14); } .rep-chip.g-g .rep-chip-v { color: #0060df; }
.rep-chip.g-m { background: rgba(90,200,250,.16); } .rep-chip.g-m .rep-chip-v { color: #0a84c2; }
.rep-chip.g-a { background: rgba(255,159,10,.18); } .rep-chip.g-a .rep-chip-v { color: #b25e00; }
.rep-chip.g-i { background: rgba(255,149,0,.18); } .rep-chip.g-i .rep-chip-v { color: #c2410c; }
.rep-chip.g-u { background: rgba(255,59,48,.16); } .rep-chip.g-u .rep-chip-v { color: #c4241b; }
.rep-subj-comment { font-size: 13px; color: var(--text-2, var(--text)); line-height: 1.45; margin-top: 8px;
  padding-top: 8px; border-top: .5px solid var(--hair); }
.rep-key { display: flex; flex-direction: column; gap: 6px; }
.rep-key-row { display: flex; align-items: flex-start; gap: 10px; }
.rep-key-code { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  font-size: 13px; font-weight: 800; background: var(--row-bg, #f2f2f7); color: var(--text); }
.rep-key-code.g-e { background: rgba(52,199,89,.16); color: #248a3d; }
.rep-key-code.g-g { background: rgba(0,122,255,.14); color: #0060df; }
.rep-key-code.g-m { background: rgba(90,200,250,.16); color: #0a84c2; }
.rep-key-code.g-a { background: rgba(255,159,10,.18); color: #b25e00; }
.rep-key-code.g-i { background: rgba(255,149,0,.18); color: #c2410c; }
.rep-key-code.g-u { background: rgba(255,59,48,.16); color: #c4241b; }
.rep-key-mean { font-size: 13px; color: var(--text-2, var(--text)); line-height: 1.4; padding-top: 3px; }
.rep-support { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.rep-support li { font-size: 13px; color: var(--text-2, var(--text)); line-height: 1.45; }
html[data-theme="dark"] .rep-chip { background: rgba(255,255,255,.06); }

/* ===== b154 — Collapsible profile sections (Pet / School / Car) ===== */
.sheet.profile-page .pet-info.pf-acc {
  margin-top: 14px;
  background: var(--card-surface, #fff);
  border: .5px solid var(--hair);
  border-radius: 20px;
  padding: 16px 16px 18px;
  box-shadow: 0 1px 3px rgba(15,20,60,.05);
}
.sheet.profile-page .pf-acc-header {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin-bottom: 0; -webkit-user-select: none; user-select: none;
}
.sheet.profile-page .pf-acc-header .pet-info-h { flex: 1; margin: 0; }
.sheet.profile-page .pf-acc-chev { flex: none; color: var(--text-3); font-size: 26px; transition: transform .22s ease; }
.sheet.profile-page .pf-acc.collapsed .pf-acc-chev { transform: rotate(-90deg); }
.sheet.profile-page .pf-acc:not(.collapsed) .pf-acc-body { margin-top: 14px; }
.sheet.profile-page .pf-acc.collapsed .pf-acc-body { display: none; }
.sheet.profile-page .pf-acc-header:active { opacity: .6; }
/* ===== b155 — each document as its own profile tab + Hide ===== */
.sheet.profile-page .pf-doc-sec .cdoc-sub { margin-bottom: 12px; }
.sheet.profile-page #child-doc-sections:empty,
.sheet.profile-page #pet-doc-sections:empty,
.sheet.profile-page #vehicle-doc-sections:empty { display: none; }
.pf-hidden { margin-top: 8px; padding: 0 2px; }
.pf-hidden-toggle {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  background: transparent; border: none; padding: 8px 4px; cursor: pointer;
}
.pf-hidden-toggle .material-symbols-outlined { font-size: 18px; }
.pf-hidden-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pf-hidden-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card-surface, #fff); box-shadow: 0 0 0 .5px var(--hair);
  border-radius: 12px; padding: 8px 12px;
}
.pf-hidden-name { flex: 1; min-width: 120px; font-size: 14px; font-weight: 600; color: var(--text); }

/* ===== b156 — Documents uploader bar (i) + info modal + order tweaks ===== */
/* (i) secondary button next to the attach button */
.sheet.profile-page .pet-sec-info {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; background: var(--row-bg, #eef0f4); color: var(--text-2, var(--text));
}
.sheet.profile-page .pet-sec-info:active { transform: scale(.92); }
.sheet.profile-page .pet-sec-info .material-symbols-outlined { font-size: 20px; }
/* Uploader section = header bar only (no expandable body). */
.sheet.profile-page .pf-no-acc { padding-bottom: 16px; }
.sheet.profile-page .pf-no-acc .pet-sec-head { margin-bottom: 0; }
.sheet.profile-page .pf-no-acc .pet-docs:empty { display: none; }
/* (i) explainer modal */
.pf-info-ov {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(10,12,26,.42); padding: 24px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pf-info-ov[hidden] { display: none; }
.pf-info-card {
  width: 100%; max-width: 320px; background: var(--card-surface, #fff); border-radius: 20px;
  padding: 22px 20px 16px; box-shadow: 0 18px 50px rgba(10,12,40,.28); text-align: center;
}
.pf-info-msg { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--text); }
.pf-info-ok {
  width: 100%; border: none; border-radius: 14px; padding: 13px; font-family: inherit;
  font-size: 16px; font-weight: 700; color: #fff; background: var(--accent, #2b6cff); cursor: pointer;
}
.pf-info-ok:active { opacity: .85; }


/* ===================================================================== */
/* Health hub (b158) — soft-red pastel member cards + contact tabs.       */
/* ===================================================================== */
.pets-circle.hl { color: #c2413a; }
.petcard.health { --hue: 350; }
.petcard-banner.health {
  height: 132px;
  background: linear-gradient(160deg, #ffe3e0 0%, #ffd0cb 100%);
}
html[data-theme="dark"] .petcard-banner.health {
  background: linear-gradient(160deg, #4a2b2b 0%, #3a2422 100%);
}
.hc-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #fff;
  background: hsl(var(--hue, 350), 62%, 62%);
  box-shadow: 0 6px 16px rgba(194, 65, 58, .28);
}
.pet-hero.health {
  background: linear-gradient(160deg, #ffe9e6 0%, #ffdad5 100%);
}
html[data-theme="dark"] .pet-hero.health {
  background: linear-gradient(160deg, #3a2422 0%, #2c1c1b 100%);
}
.hc-avatar-lg {
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 40px; font-weight: 700; color: #fff;
  background: hsl(var(--hue, 350), 62%, 62%);
  box-shadow: 0 8px 22px rgba(194, 65, 58, .30);
}
/* Editable card fields + per-tab "Same as admin" */
.hc-fields { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 2px; }
.hc-fields .pe-field { margin: 0; }
.hc-fields .pe-input:disabled { opacity: .55; }
.hc-same {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 2px 6px; font-size: 14px; color: var(--text-2, #6b6b70);
  cursor: pointer;
}
.hc-same input { width: 18px; height: 18px; accent-color: #c2413a; }
.pet-section.hc-contact .pet-sec-head { margin-bottom: 2px; }

/* Compact contact card (GP / Dentist / Chemist) — one grouped card with slim
   rows + a working call button, instead of three tall input boxes. */
.hccard { background: var(--card-surface, #fff); border-radius: 16px; box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; margin-top: 4px; }
.hc-avatar-sm { width: 46px; height: 46px; border-radius: 50%; background: hsl(var(--hue,350) 66% 52%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex: none; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.pet-hero.health .pet-hero-title { display: flex; align-items: center; gap: 12px; }
.pet-hero.health { padding-bottom: 16px; }
.hc-lite { position: relative; padding: 9px 14px; border-bottom: .5px solid var(--hair); }
.hc-lite:last-child { border-bottom: 0; }
.hc-lite-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); margin-bottom: 2px; }
.hc-lite-in { width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 15.5px; font-weight: 600; padding: 1px 0; }
.hc-lite-in:focus { outline: none; }
.hc-lite-in:disabled { opacity: .55; }
.hc-phone-lite { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.hc-phone-lite .hc-lite-lbl { grid-column: 1; grid-row: 1; }
.hc-phone-lite .hc-lite-in { grid-column: 1; grid-row: 2; }
.hc-call { grid-column: 2; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(52,199,89,.16); color: #1f8a3b; text-decoration: none; }
.hc-call .material-symbols-outlined { font-size: 20px; }
.hc-call:active { transform: scale(.92); }
.hc-call.off { background: var(--fill, rgba(120,120,128,.12)); color: var(--text-3); pointer-events: none; opacity: .45; }
html[data-theme="dark"] .hc-call { color: #4cd964; }
/* The autocomplete dropdown sits under the search row */
.hc-lite .school-suggest { left: 0; right: 0; }



/* ══ TASK CARD — the benchmark (approved 2026-08-25) ══════════════════════
   One card grammar for the whole app. This is the task half; the Grocery half
   lives in design-v2-grocery.css and the two are deliberately the same
   geometry — 96px / 1fr / auto, one hairline, one history pill.

   These rules live in style.css rather than the Design V2 sheet because task
   lists never get `body.dv2-groc`; that class gates the Grocery surface and
   only the Grocery surface. Anything written under it would simply not apply
   here, which is the C-6 trap in reverse.

   BEHAVIOUR IS UNTOUCHED. Bell requests, circle completes, history is written,
   the repeat rolls forward. This is what the row looks like. */

/* -- T12 . ONE TASK CARD ----------------------------------------------
   Six sections declared this same card under six token names that all resolve
   to the same two values, and then disagreed about everything around them:
   radius 12/12/12/14/16/16, row gap 6/7/7/7/8, three different ambers for
   "due", and one of those (Garage) with no dark-mode value at all.

   home-c.css already said it out loud - "the tile tokens the other four
   sections already agree on. A fifth set is how they drift apart." So there is
   one set, here, and the section files no longer carry their own.

   Canon is Home Tasks, per TASK_STANDARD T12. */
:root {
  --tc-bg: rgba(255, 255, 255, 0.72);
  --tc-bd: rgba(20, 16, 38, 0.07);
  --tc-shadow: 0 1px 3px rgba(20, 20, 40, 0.05);
  --tc-rad: 16px;
  --tc-gap: 8px;
  --tc-due: hsl(28 85% 34%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tc-bg: rgba(255, 255, 255, 0.07);
    --tc-bd: rgba(255, 255, 255, 0.12);
    --tc-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --tc-due: hsl(32 90% 66%);
  }
}
:root[data-theme="dark"] {
  --tc-bg: rgba(255, 255, 255, 0.07);
  --tc-bd: rgba(255, 255, 255, 0.12);
  --tc-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --tc-due: hsl(32 90% 66%);
}

.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task {
  background: var(--tc-bg);
  border: 1px solid var(--tc-bd);
  border-radius: var(--tc-rad);
  box-shadow: var(--tc-shadow);
}
/* Home and Shop stack their rows in a flex column and pay the gap there; the
   other four space themselves. One value, the two mechanisms that existed. */
.tc-row.pv-task, .tc-row.sv-task, .tc-row.hv-task, .tc-row.gv-task {
  margin-bottom: var(--tc-gap);
}
.tc-row.pv-task:last-child, .tc-row.sv-task:last-child,
.tc-row.hv-task:last-child, .tc-row.gv-task:last-child { margin-bottom: 0; }
.hm-task-rows, .sh-rows { gap: var(--tc-gap); }

/* One ink. Four sections set these to the same dv2 tokens in four files; two
   set nothing and inherited whatever the screen happened to give them. */
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .label { color: var(--dv2-text-primary); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .tc-k { color: var(--dv2-text-muted); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .tc-v { color: var(--dv2-text-primary); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .tc-v.q { color: var(--dv2-text-sub); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .tc-v.due { color: var(--tc-due); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task .tc-meta { border-top-color: var(--tc-bd); }
.tc-row.hm-task, .tc-row.pv-task, .tc-row.sv-task,
.tc-row.hv-task, .tc-row.gv-task, .tc-row.sh-task.on .label { color: var(--dv2-text-sub); text-decoration: line-through; }
/* One lift while dragging. */
.tc-row.hm-task.item-dragging, .tc-row.sh-task.item-dragging {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.row.tc-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 9px 14px;
}
.tc-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tc-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tc-top .label-wrap { flex: 1; min-width: 0; }
/* The legacy `.label-row` is `flex-wrap: wrap`, which dropped the repeat CHIP
   onto its own line and made the card 107px against Grocery's 93. The row no
   longer wraps — but the NAME is allowed two lines, which is a deliberate
   departure from the Grocery card and the one place the two differ.
   Measured: at 390px the name has 142px, or 92px once a repeat chip is beside
   it, and ordinary task names do not fit. "Replace smoke alarm battery" needs
   225px. Grocery items are short nouns; tasks are imperative sentences, so
   forcing one line would ellipsise most real rows. Two lines, then ellipsis.
   The card is 94px for a short name and ~114px for a long one. */
.tc-top .label-row { gap: 7px; flex-wrap: nowrap; min-width: 0; }
.tc-row .label {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.22;
}
/* The chip aligns to the FIRST line of a two-line name rather than floating at
   the vertical centre of the block. */
.tc-top .label-row { align-items: flex-start; }
.tc-top .tc-rep, .tc-top .tc-urgent { margin-top: 2px; }
/* The name is the dominant element and this is where it earns it: one line to
   itself, sharing it only with its own badges. */
.tc-row .label { font-size: 17px; font-weight: 750; letter-spacing: -.014em; }

/* The repeat chip — Grocery puts qty here, a task puts its cadence. */
.tc-rep {
  flex: none;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: hsl(268 72% 94%);
  border: .75px solid hsl(270 55% 89%);
  color: hsl(270 60% 40%);
  font-size: 10.5px; font-weight: 750; white-space: nowrap;
}
.tc-urgent {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: hsl(4 78% 52%); color: #fff;
  font-size: 11px; font-weight: 900; line-height: 1;
}

/* ── The metadata grid ───────────────────────────────────────────────────
   96px FIXED on the first track, for the same reason Grocery's store column
   is fixed: on `auto` it sizes to each row's own value, so "Today" and
   "Wed 2 Sep" push LAST DONE to different x positions and the column cannot be
   read down the list. Fixed, every value starts in the same place. */
.tc-meta {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 1px 14px;
  align-items: end;
  padding-top: 7px;
  border-top: 1px solid var(--hair, rgba(60,60,67,.10));
}
.tc-k {
  grid-row: 1;
  font-size: 8.5px; line-height: 1.15; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.tc-v {
  grid-row: 2;
  font-size: 12.5px; line-height: 1.3; font-weight: 650;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* "Not set" and "Never" are values, not blanks — an empty cell under a label
   reads as a rendering fault. */
.tc-v.q { color: var(--text-3); font-weight: 600; }
/* b210.1 — `.due` is ALSO a global component: a 10px/700 grey chip with its
   own padding, radius and ground (line 764). This rule only ever set a colour,
   so a task due within two days rendered its date as a small pill instead of
   the card's value — in every section, since the card was built. The cell is a
   VALUE; the state changes its colour and nothing else. */
.tc-v.due {
  color: hsl(28 85% 34%);
  background: none; padding: 0; border-radius: 0;
  font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
html[data-theme="dark"] .tc-v.due { color: hsl(32 90% 66%); }

/* The count and History are ONE control — the number is what makes you want
   the history. Same data-act the row menu already routes. */
.tc-hist {
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex; align-items: center; gap: 4px;
  flex: none;
  padding: 5px 9px;
  border-radius: 9999px;
  border: .75px solid var(--hair, rgba(60,60,67,.12));
  background: var(--card, #fff);
  /* b232 — same fix as the done tick below: the pill sits on a list row and
     reads as that list's, not as the app's. halo9.css:277 had already done
     this under Colour only. */
  color: hsl(var(--hue, 270) 70% 52%);
  font: inherit; font-size: 11.5px; font-weight: 750;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer;
  transition: transform .14s;
}
.tc-hist:active { transform: scale(.95); }
.tc-hist svg { flex: none; opacity: .85; }
html[data-theme="dark"] .tc-hist { color: hsl(var(--hue, 270) 72% 74%); background: rgba(255,255,255,.06); }

.meta.tc-sub { margin-top: 0; font-size: 11px; }
.row-note.tc-note { margin-top: 0; }
.tc-row.on .tc-meta { opacity: .5; }

/* ══ COMPLETION CONFIRMATION — Concept C ══════════════════════════════════
   Replaces the system green. Two things were wrong with it: green belongs to
   another app's palette, and completing a repeating task told you nothing
   about the one fact that just changed — the countdown restarted.

   The tick is DRAWN rather than shown, and a chip names the next occurrence.
   Nothing about completion logic moves; the chip only reports it. */
.row.tc-row .box,
#view-list.dv2-grocery .row .box { transition: background .28s var(--ease-spring), border-color .28s, transform .28s var(--ease-spring); }

/* b210.1 — `just-done` fills the box too, not only `on`. The confirmation is
   a MOMENT, and for the ~2s it lasts the row's `on` state can legitimately be
   false — a repeating task rolls forward the instant the server answers. The
   fill belonged to a state that had already moved on. */
/* b232 — THE HARD PURPLE FOLLOWS THE LIST NOW, IN SIMPLE TOO.
   `hsl(270 …)` was the app accent baked into shared list chrome. halo9.css:229
   and :291 already repainted the first two from the room's `--h9-mark`, but
   ONLY under `body.halo9` — and Simple is the default, so every list showed
   the hard purple, which is what the user photographed in Grocery.
   `--hue` is the list's own colour and is what Simple's whole design already
   runs on: `#view-list` carries it (renderShop), the header, the tool pill,
   the add button and the FAB all read it. 270 stays as the fallback, so
   anything drawing these outside a list is byte-identical to before. The
   lightness numbers are unchanged — only the hue is freed. */
.row.on .box,
.row.just-done .box {
  background: hsl(var(--hue, 270) 70% 52%);
  border-color: hsl(var(--hue, 270) 70% 52%);
}
.section.done .tick { background: hsl(var(--hue, 270) 70% 52%); }
.section.done::before { background: hsl(var(--hue, 270) 70% 52%); }
.section.done .section-head h2 { color: hsl(var(--hue, 270) 62% 46%); }
html[data-theme="dark"] .section.done .section-head h2 { color: hsl(var(--hue, 270) 72% 76%); }

/* The draw. Only on the moment of completion — a row that is merely already
   ticked must not re-animate on every render. */
.row.just-done .box { position: relative; }
.row.just-done .box svg path {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: tcDraw 340ms cubic-bezier(.5,0,.2,1) 60ms forwards;
}
@keyframes tcDraw { to { stroke-dashoffset: 0; } }
.row.just-done .box::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid hsl(270 70% 52%);
  animation: tcHalo 760ms cubic-bezier(.2,.7,.3,1) 70ms both;
  pointer-events: none;
}
@keyframes tcHalo {
  0%   { opacity: .6; transform: scale(.8); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* "In 2 weeks" — the countdown that just restarted, said out loud for the
   first time. Takes the avatar's place for ~2s; the name ellipsises rather
   than wrapping while it is there. */
.tc-done-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 6px;
  border-radius: 9999px;
  background: hsl(268 72% 94%);
  border: 1px solid hsl(270 60% 87%);
  color: hsl(270 62% 38%);
  font-size: 11.5px; font-weight: 750; white-space: nowrap;
  opacity: 0; transform: translateX(8px);
  transition: opacity .2s var(--ease-out), transform .34s cubic-bezier(.2,1.1,.35,1);
}
.tc-done-chip.show { opacity: 1; transform: none; }
.tc-done-chip .tcd {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: hsl(270 70% 52%); color: #fff;
}
html[data-theme="dark"] .tc-done-chip {
  background: hsl(268 32% 22%); border-color: hsl(268 40% 34%); color: hsl(268 70% 86%);
}
@media (prefers-reduced-motion: reduce) {
  /* T11 — the box pop was the one piece of the confirmation this block missed.
     tcDraw and tcHalo were silenced here from the start; `prvJustDone` is
     declared 7,600 lines earlier next to `.box` and was never brought in, so a
     user who asked for no motion still got a box scaling to 1.22 on every tick.
     The confirmation still reads: the box fills and the tick is drawn, both
     instantly. */
  .row.just-done .box { animation: none; }
  .row.just-done .box svg path { animation: none; stroke-dashoffset: 0; }
  .row.just-done .box::after { animation: none; opacity: 0; }
  .tc-done-chip { transition: opacity .2s linear; transform: none; }
}


/* ── Six-month rhythm strip, above the completion entries ────────────────
   Counted client-side from the history the sheet already fetched, so it can
   never disagree with the list underneath it. */
.hist-strip {
  background: var(--card, #fff);
  border: 1px solid var(--hair, rgba(60,60,67,.10));
  border-radius: 15px;
  padding: 13px 14px 10px;
  margin-bottom: 14px;
}
.hs-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.hs-top b { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.hs-top span {
  margin-left: auto; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.hs-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
           align-items: end; height: 58px; }
.hs-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 100%; }
.hs-bar i { display: block; border-radius: 5px 5px 3px 3px;
            background: hsl(270 70% 52%); opacity: .85; }
/* A zero month is a flat rule, not a missing column. */
.hs-bar i.z { background: var(--text-3); opacity: .22; height: 3px; }
.hs-bar u {
  font-style: normal; text-decoration: none; text-align: center;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.hs-bar em {
  font-style: normal; text-align: center;
  font-size: 10.5px; font-weight: 800;
  color: hsl(270 70% 52%); font-variant-numeric: tabular-nums;
}
.hs-bar em.z { color: var(--text-3); opacity: .5; }
html[data-theme="dark"] .hs-bar i { background: hsl(270 72% 68%); }
html[data-theme="dark"] .hs-bar em { color: hsl(270 72% 76%); }


/* ── The legacy-row cleanup, no longer Grocery-only ───────────────────────
   design-v2-grocery.css hides Change icon and both colour pickers under
   `body.dv2-groc.a2a-clean` / `.a1a-clean`. Task lists never get dv2-groc, so
   all three survived there — measured on Home Tasks, not assumed.

   `body.lp-clean` is set by renderShop() for Grocery AND every task list, so
   one rule now covers both. HIDE ONLY: every node stays in the DOM with its
   handler bound, because app.js is one IIFE and a non-optional dereference of
   a removed element throws at script-eval and takes the app down with it. */
body.lp-clean #panel-hue-lbl,
body.lp-clean #panel-hue-field,
body.lp-clean #section-hue-field { display: none !important; }

/* GP-2 · Change icon is hidden on EVERY list, not just the lp-clean ones.
   Icons are a fixed system now — there is nothing left to change to, and the
   row led to a flow that generated an AI image the app no longer draws.
   Ungated rather than added to the lp-clean group above because lp-clean is
   set for grocery and task lists only, which would have left the control
   live on a plain shopping list. Hidden, never removed: same IIFE rule. */
#panel-change-icon { display: none !important; }


/* ── Task lists: neutral ink, not hue-tinted ──────────────────────────────
   The legacy surface derives its text colour from the list's own hue, so
   Home Tasks rendered every name in rgb(39,97,155) — measured, not assumed —
   which is why the card read as a different app from Grocery even once its
   geometry matched. Grocery escapes this through `#view-list.dv2-grocery`
   overriding with the --dv2-* text tokens.

   These use the same ink values as the Grocery surface. Specificity is
   deliberately low (0,2,0) so Grocery's own (1,1,0) rules still win wherever
   both apply, and the hue is left doing what it should — the section rail,
   the ring, the accents — rather than the reading text.

   NOTE, and it is the honest limit of this pass: this is TYPOGRAPHY only. The
   task surface still has the legacy background rather than the Grocery aurora,
   and the section headers are still the legacy card rather than white glass.
   Porting those means broadening ~200 `#view-list.dv2-grocery` selectors, and
   that is its own release. */
body.lp-clean .row .label { color: rgba(14,10,38,0.92); }
body.lp-clean .row.on .label { color: rgba(14,10,38,0.45); }
body.lp-clean .section-head h2 { color: rgba(14,10,38,0.92); }
body.lp-clean .section .count,
body.lp-clean .section-count { color: rgba(14,10,38,0.45); }
body.lp-clean .row-note { color: rgba(14,10,38,0.45); }
html[data-theme="dark"] body.lp-clean .row .label,
html[data-theme="dark"] body.lp-clean .section-head h2 { color: rgba(255,255,255,0.95); }
html[data-theme="dark"] body.lp-clean .row.on .label,
html[data-theme="dark"] body.lp-clean .section .count,
html[data-theme="dark"] body.lp-clean .section-count,
html[data-theme="dark"] body.lp-clean .row-note { color: rgba(255,255,255,0.45); }


/* ── Profile → Centre tile picker ─────────────────────────────────────────
   Which list sits in the middle of Home. Same row grammar as the list-order
   rows beneath it, so the two read as one section rather than two widgets. */
.hub-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hub-pick-opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hair, #eef1f6);
  background: var(--card, #fff);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s, background .18s;
}
/* b232 — DEAD, and left as the record rather than repainted. `.hub-pick-opt`
   was the one-card-per-list hub picker; renderHubPicker() replaced it with a
   single `.pc-vrow` and `verify_profile_c.py:338` asserts the class is gone
   from app.js entirely. Nothing in the app emits it, so the `hsl(270 …)` below
   draws nothing and freeing its hue would be a change with no pixel behind it.
   Delete this block when someone can run the profile suite against it. */
.hub-pick-opt.on {
  border-color: hsl(270 70% 62%);
  background: hsl(268 72% 97%);
}
html[data-theme="dark"] .hub-pick-opt { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .hub-pick-opt.on { background: hsl(268 40% 20%); border-color: hsl(270 60% 52%); }
.hub-pick-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
.hub-pick-img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.hub-pick-nm { flex: 1; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.hub-pick-tick { flex: none; color: hsl(270 70% 52%); }
html[data-theme="dark"] .hub-pick-tick { color: hsl(270 72% 74%); }

/* The hub is a control now, not decoration. */
.fhc-hub-live { cursor: pointer; }
.fhc-hub-live:active .fhc-hub-bg { transform-box: fill-box; transform-origin: center; transform: scale(.96); }


/* Traveller quick-add (Aug 2026). Removing the silent pre-fill of the
   signed-in member must not turn "put myself on this trip" into typing — so
   the household is offered as chips. Explicit, one tap, and visible. */
.t-who-quick { margin: -2px 0 8px; display: flex; flex-wrap: wrap; gap: 7px; }
.t-who-quick .set-row-sub { flex: 0 0 100%; margin: 0; }
.t-who-quick .chip { font-size: 13px; }

/* ── b175 · Vault → Garage, and (Task 11 review) Vault → Home ────────────
   A sub-folder under Garage is a vehicle, so its folder offers the vehicle
   rather than only its files; the Vault's Home folder is the same move for
   the property. Lives in style.css rather than garage-c.css/home-c.css
   because the Vault is not a Garage screen and never carries `body.gv-on`
   (nor a Home screen carrying `body.hm-on`) — one way to draw a Vault
   return link, extended to a second selector rather than duplicated. */
.vault-garage-link,
.vault-home-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  margin: 0 0 12px; padding: 12px 13px; cursor: pointer;
  background: var(--card, #fff); border: 1px solid rgba(20,16,38,.08);
  border-radius: 16px; box-shadow: 0 1px 3px rgba(20,20,40,.05);
  color: inherit; font-family: inherit; text-align: left;
}
.vault-garage-link:active,
.vault-home-link:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .vault-garage-link:active,
  .vault-home-link:active { transform: none; }
}
.vault-garage-link-ic, .vault-garage-link-chev,
.vault-home-link-ic, .vault-home-link-chev {
  flex: none; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
}
.vault-garage-link-ic, .vault-home-link-ic { width: 22px; height: 22px; stroke-width: 1.9; }
.vault-garage-link-chev, .vault-home-link-chev { width: 18px; height: 18px; stroke-width: 2; opacity: .45; }
.vault-garage-link-main, .vault-home-link-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vault-garage-link-main b, .vault-home-link-main b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.vault-garage-link-main small, .vault-home-link-main small { font-size: 12.5px; opacity: .6; margin-top: 1px; }
html[data-theme="dark"] .vault-garage-link,
html[data-theme="dark"] .vault-home-link {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .vault-garage-link,
  html:not([data-theme="light"]) .vault-home-link {
    background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12);
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
  }
}

/* ── b225 · R8 — a document read must announce itself ────────────────────
   prvUploadShow (app.js) is the shared overlay behind this: three named
   steps, anchored to the viewport rather than to whichever fold or screen
   the scan started from, so a read that takes several seconds never reads
   as a dead button. SECTION_CHROME.md R8.

   UNSCOPED ON PURPOSE — not gated on any view's body class, unlike almost
   everything else in this file. Garage's own look (`.gv-upload*`,
   garage-c.css) is gated on `body.gv-on` and reaches into
   `--gv-sheet-bg`/`--gv-tile-bd`, tokens that exist nowhere outside Garage.
   Extending that selector list the way `.vault-garage-link`/`.vault-home-link`
   above share one rule would either never match anywhere else (still behind
   body.gv-on) or force those tokens global — which is the rewrite this
   promotion exists to avoid, since "Garage must look exactly as it does
   today" either way. So garage-c.css keeps its rules untouched, and
   prvUploadShow chooses classes by which view is live: Garage's own names
   while `body.gv-on` is set (unchanged pixels), these unscoped ones
   everywhere else. Own tokens, defined in all three theme states like every
   section's, so no other file has to carry them for this to render right. */
.prv-upload-scrim {
  --prv-up-bg: rgba(255,255,255,0.86); --prv-up-bd: rgba(20,16,38,0.08);
  --prv-up-text: #191c1f; --prv-up-sub: #6b6878; --prv-up-muted: #8f8ca0;
  --prv-up-accent: #5b4fe0; --prv-up-good: #16704A; --prv-up-bad: #B3312A;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20,20,40,.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
}
html[data-theme="dark"] .prv-upload-scrim {
  --prv-up-bg: #16182099; --prv-up-bd: rgba(255,255,255,0.12);
  --prv-up-text: #f2f2f5; --prv-up-sub: rgba(255,255,255,0.55); --prv-up-muted: rgba(255,255,255,0.38);
  --prv-up-accent: #9B85FF; --prv-up-good: #5DD48F; --prv-up-bad: #FF8A80;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prv-upload-scrim {
    --prv-up-bg: #16182099; --prv-up-bd: rgba(255,255,255,0.12);
    --prv-up-text: #f2f2f5; --prv-up-sub: rgba(255,255,255,0.55); --prv-up-muted: rgba(255,255,255,0.38);
    --prv-up-accent: #9B85FF; --prv-up-good: #5DD48F; --prv-up-bad: #FF8A80;
  }
}
.prv-upload {
  position: relative; width: min(320px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 22px 30px; border-radius: 22px;
  background: var(--prv-up-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--prv-up-bd);
  box-shadow: 0 18px 46px rgba(20,20,40,.3);
  color: var(--prv-up-text); text-align: center;
}
.prv-upload-t { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.prv-upload-s { font-size: 13px; color: var(--prv-up-sub); line-height: 1.4; }
.prv-spin {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 3px solid var(--prv-up-accent); border-top-color: transparent;
  animation: prv-spin .7s linear infinite;
}
@keyframes prv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .prv-spin { animation-duration: 2.4s; }
}
.prv-upload-ic { width: 30px; height: 30px; color: var(--prv-up-good); }
.prv-upload.bad .prv-upload-ic { color: var(--prv-up-bad); }
.prv-upload-steps {
  display: flex; gap: 6px; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--prv-up-muted);
}
.prv-upload-steps span { opacity: .35; }
.prv-upload-steps span.on { opacity: 1; color: var(--prv-up-accent); }
.prv-upload-steps span.done { opacity: 1; color: var(--prv-up-good); }
.prv-upload-bar {
  position: absolute; left: 22px; right: 22px; bottom: 14px; height: 4px;
  border-radius: 100px; background: var(--prv-up-bd); overflow: hidden;
}
.prv-upload-bar i {
  display: block; height: 100%; width: 0%; border-radius: 100px;
  background: var(--prv-up-accent); transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .prv-upload-bar i { transition: none; }
}

/* b189 — the actions under a document preview. "Open full screen" is a way to
   LOOK at a file; Download is the way to keep it, and the two belong together
   rather than one of them being the only thing on offer. */
.doc-file-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-file-acts .doc-btn { flex: 1 1 auto; justify-content: center; }
.doc-rename-row a.doc-rename-btn { text-decoration: none; }

/* b190 — a child's Vault folder, to the approved board (screen 8): a
   breadcrumb saying where you are, then chips for the kinds it holds. */
/* b192 — the pill used by both doors onto a child's documents: "Add"/"Vault"
   beside the Chapters heading in School, and "Add to <child>"/"Open in School"
   inside the Vault folder. Shared, so the two sides cannot drift apart, and
   ungated because the Vault is not a School view. */
.sv-hh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--sv-chip-bd, rgba(140,140,160,.34));
  background: transparent; color: var(--dv2-text-sub, #9aa0b0);
  font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.sv-hh-btn:active { transform: scale(.96); }
.sv-hh-btn .sv-ic { width: 14px; height: 14px; }
.vault-kid-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; }
.vault-crumb { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0;
  font-size: 12.5px; color: var(--text-3); }
.vault-crumb-ic { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vault-chips { display: flex; gap: 6px; overflow-x: auto; padding: 12px 2px 2px; }
.vault-chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 99px;
  background: var(--card-surface, #fff); border: 1px solid var(--hair);
  color: var(--text-2); white-space: nowrap; font-family: inherit; cursor: pointer; }
.vault-chip.on { background: var(--text); color: var(--card-surface, #fff);
  border-color: var(--text); font-weight: 700; }

/* b195 — arriving on the right screen is half the job; the other half is being
   shown WHICH row. A pending tap or a notification lands on a list of near
   identical rows, so the one you came for lifts and holds a ring for a moment,
   then settles. Not a colour change: the row keeps its own state. */
@keyframes prvFlash {
  0%   { box-shadow: 0 0 0 0 rgba(143,95,190,.55); }
  22%  { box-shadow: 0 0 0 4px rgba(143,95,190,.42); }
  100% { box-shadow: 0 0 0 0 rgba(143,95,190,0); }
}
.prv-flash {
  animation: prvFlash 2.4s cubic-bezier(.25,.9,.3,1) 1;
  border-radius: 14px;
  position: relative; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .prv-flash { animation: none; box-shadow: 0 0 0 3px rgba(143,95,190,.45); }
}

/* b199 — ADD BY EMAIL. The address is the whole content of the sheet, so it is
   the biggest thing on it and it is a button: the only useful action is to take
   a copy of it. */
.docs-add-mail { margin-right: 8px; }
.de-wrap { padding: 4px 18px 26px; }
.de-note { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #5a5866; }
.de-addr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 15px 16px; border-radius: 14px;
  border: 1px solid #d9d6e4; background: #f7f6fb; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.de-addr:active { transform: scale(.99); }
.de-addr-a {
  font: 600 15px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1d1b27; word-break: break-all; min-width: 0;
  /* Selectable, so the address is still copyable by hand where the clipboard
     API is blocked — which it is inside several in-app browsers. */
  -webkit-user-select: text; user-select: text;
}
.de-addr-c {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 700; color: #6b4ba8;
}
.de-small { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #86839a; }
.de-hh {
  margin: 22px 0 8px; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: #86839a;
}
.de-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #ece9f3;
}
.de-row:last-child { border-bottom: 0; }
.de-row-n { font-size: 14px; color: #1d1b27; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.de-row-s { font-size: 12px; color: #86839a; flex: none; }
html[data-theme="dark"] .de-note { color: #a8a4b8; }
html[data-theme="dark"] .de-addr { background: #1a1b28; border-color: #2d2d40; }
html[data-theme="dark"] .de-addr-a { color: #eeecf5; }
html[data-theme="dark"] .de-addr-c { color: #bb92e2; }
html[data-theme="dark"] .de-row { border-bottom-color: #26263a; }
html[data-theme="dark"] .de-row-n { color: #eeecf5; }
.de-rotate {
  margin-top: 18px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid #ddd9e8; background: transparent; color: #86839a;
  font-size: 12.5px; font-weight: 650;
}
html[data-theme="dark"] .de-rotate { border-color: #2d2d40; color: #a8a4b8; }

/* ── b201 · a notice becomes School Tasks ──────────────────────────────────
   Here rather than school-c.css: that file is gated on body.sv-on, and this
   sheet also opens from the @ sheet in the Vault, where sv-on is not set.

   ON TOKENS, NOT LITERALS (b204). The first version used --tint/--dim, which
   do not exist, so every colour fell back to a light-theme literal: white
   rows under white text once the app went dark. --surface / --text / --text-2
   / --row-bg / --accent are the app's own and are defined for both themes. */
.nt-offer {
  align-self: flex-start;
  /* Under the notice, with air. -2px pulled it flush against the card's edge
     so it read as part of the border rather than as a control of its own. */
  margin: 10px 0 16px 22px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--row-bg); color: var(--accent);
  font: 600 13px/1 -apple-system, system-ui, sans-serif; cursor: pointer;
}
.nt-offer:active { opacity: .7; }
/* A notice already acted on states the outcome and offers nothing further. */
.nt-done {
  margin: 10px 0 16px 22px;
  display: inline-flex; align-items: center; gap: 6px; color: var(--good);
  font: 600 13px/1 -apple-system, system-ui, sans-serif;
}

.nt-intro { padding: 4px 20px 0; color: var(--text); font: 600 17px/1.3 -apple-system, system-ui, sans-serif; }
.nt-sub   { padding: 6px 20px 14px; color: var(--text-2); font: 400 14px/1.4 -apple-system, system-ui, sans-serif; }
.nt-list  { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }

/* THE WHOLE ROW IS THE TARGET, not a 20px checkbox. This is a review a parent
   runs down at speed, and a small hit area is what turns "untick that one"
   into three attempts. */
.nt-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 14px; text-align: left;
  background: var(--row-bg); color: var(--text); cursor: pointer;
}
.nt-row .sv-grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nt-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--hair); color: #fff;
}
.nt-row.is-on .nt-box { background: var(--accent); border-color: var(--accent); }
/* Unticked is DIMMED, not hidden: the parent can see what they dropped and put
   it back, which is what makes unticking safe enough to do quickly. */
.nt-row:not(.is-on) .nt-lab { opacity: .45; text-decoration: line-through; }
.nt-lab { color: var(--text); font: 500 15px/1.35 -apple-system, system-ui, sans-serif; }
.nt-due { color: var(--accent); font: 400 13px/1.3 -apple-system, system-ui, sans-serif; }
/* A notice that gave no date says so, rather than showing a guessed one. */
.nt-due.nt-nodate { color: var(--text-2); }

.nt-actions { display: flex; justify-content: space-between; align-items: center;
              gap: 12px; padding: 14px 20px 4px; flex-wrap: wrap; }
.nt-dropall, .nt-never {
  border: 0; background: none; cursor: pointer; padding: 4px 0;
  font: 500 14px/1 -apple-system, system-ui, sans-serif;
}
.nt-dropall { color: var(--accent); }
.nt-never   { color: var(--text-2); }
.nt-empty   { padding: 28px 24px; text-align: center; color: var(--text-2);
              font: 400 15px/1.45 -apple-system, system-ui, sans-serif; }
.nt-foot    { display: flex; gap: 10px; padding: 16px 20px 28px; }
.nt-foot .btn { flex: 1; }

/* The @ sheet's version of the same offer (b201). */
.de-made { display: block; margin-top: 6px; color: var(--good);
           font: 600 13px/1 -apple-system, system-ui, sans-serif; }
.de-kidpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
              margin-top: 8px; color: var(--text-2);
              font: 500 13px/1 -apple-system, system-ui, sans-serif; }
.de-kidbtn { border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
             background: var(--row-bg); color: var(--accent);
             font: 600 13px/1 -apple-system, system-ui, sans-serif; }
.de-row .nt-offer { margin: 8px 0 0; }

/* ── b211 · the Diary: a row wears its OWNING SECTION's colour ────────────
   Decision 3. The colour identifies the part of the household the renewal
   belongs to, not the kind of document it is — private medical and dental
   insurance are both Health; vehicle insurance is Garage; travel insurance is
   Travel. The section is derived server-side from where the source document is
   filed (/api/renewals/index), so a row cannot be coloured one thing while its
   paperwork lives somewhere else.

   These hues deliberately avoid the three the app uses for STATUS — 355 red,
   152 green, 38 amber. A section identity and a warning must never be mistaken
   for one another, so the identity is a rail on the leading edge and the status
   stays in the pill it has always been in.

   Rail only. No fill, no text colour: the row's own type is body text and the
   design brief is explicit that body text never sits on a saturated fill. */
.row-swipe[data-rnsec] { position: relative; }
.row-swipe[data-rnsec]::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3.5px;
  border-radius: 0 3px 3px 0; background: hsl(var(--rnsec-h) 62% 52%);
  pointer-events: none; z-index: 2;
}
/* b230 — RE-KEYED, NOT RECOLOURED. `_owning_section()` used to answer in this
   file's own vocabulary ("garage", "travel"); it now answers in the nine keys
   the rest of the app uses, so `garage` became `car` and `travel` became
   `trips`. The hue numbers are byte-for-byte what they were: Simple looks
   exactly as it did, which is the point. Missing the rename would have been
   invisible in review and would have silently dropped the rail from every
   vehicle and travel renewal.

   Six keys, not nine. `grocery`, `maintenance` and `shopping` are in
   RENEWAL_SECTIONS for completeness, but nothing files a document against a
   shopping list, so `_owning_section()` cannot return them and there is no
   honest Simple hue to give them. If that ever changes, this is the list that
   has to grow with it. */
.row-swipe[data-rnsec="health"] { --rnsec-h: 350; }
.row-swipe[data-rnsec="pets"]   { --rnsec-h: 285; }
.row-swipe[data-rnsec="school"] { --rnsec-h: 255; }
.row-swipe[data-rnsec="car"]    { --rnsec-h: 220; }
.row-swipe[data-rnsec="trips"]  { --rnsec-h: 190; }
.row-swipe[data-rnsec="home"]   { --rnsec-h: 100; }
html[data-theme="dark"] .row-swipe[data-rnsec]::before { background: hsl(var(--rnsec-h) 72% 66%); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .row-swipe[data-rnsec]::before { background: hsl(var(--rnsec-h) 72% 66%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   b232 · R9 — ONE TITLE SIZE (SECTION_CHROME.md)
   ══════════════════════════════════════════════════════════════════════════
   Six screens had drifted to four different values and nobody had chosen any
   of them:

     list screen (incl. the Diary)  28 / 800 / -.01em   deliberate
     Grocery                        28 / 800 / -.03em   deliberate
     School, Garage                 19 / 700 / -.02em   deliberate, and the
                                                        one the user reported
     Travel, Our map                30 / 800 / -.03em   deliberate
     Pets, Health, Home, Shop      ~32 / 700            NO RULE AT ALL — the
                                                        browser's default h1
                                                        (2em), which is what
                                                        is left when nothing
                                                        claims the property

   Canon is the list screen's, the only value in the set anyone chose on
   purpose: 28px / 800 / -.02em. The 19px overrides in school-c.css and
   garage-c.css are DELETED rather than re-pointed — a third competing rule is
   how the set got to four in the first place.

   This rule sits at the end of style.css so it beats the -.4px tightening at
   line 7964, which is earlier and equally specific. It is the LOWEST
   specificity in the group (0,0,1 / 0,0,2), so the two `#view-list` rules
   above still win — they were edited to the same numbers.

   Both appearance states. Title size is not a colour. */
.lp-name,
.sub-head h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* A completion whose task has been deleted. b235 let the record outlive the
   task; this is what says so, rather than leaving a name in the list with
   nothing behind it. */
.lh-gone {
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--hair, rgba(60,60,67,.16));
  border-radius: 3px; padding: 2px 5px; vertical-align: 1px;
}
.lh-item-gone .lh-tick { opacity: .45; }