/* Theme color tokens now live in tokens.css (generated from design tokens).   Legacy variable names are aliased there for compatibility. */

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

/* Rev 9 (§5.3): the document itself NEVER scrolls. html/body are a fixed
   frame; each screen is its own single scroll container (main > .screen),
   so empty or short screens cannot move or rubber-band, and iOS bounce
   happens only inside a container whose content is taller than the
   screen. */
html, body {
  height: 100%;
}

html {
  overscroll-behavior: none;
  /* §5.13 note 5: html is painted with the page background too
     (body already is), so the area exposed around and behind the
     moving keyboard — and any overscroll — is the theme colour,
     never black. The native shell paints its window the same
     colour (Keyboard autoBackdropColor "dom" + SceneDelegate). */
  background: var(--background);
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.45;
  letter-spacing: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

::selection { background: color-mix(in oklch, var(--primary) 25%, transparent); }

button { font-family: inherit; touch-action: manipulation; }
button:active { transform: scale(0.96); }
button { transition: transform 0.12s ease; }

/* ---- sticky top: header + add bar, frosted ---- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--background);
  background: color-mix(in srgb, var(--background) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}

.top-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  padding-top: max(14px, env(safe-area-inset-top));
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

header h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 10px;
}

header h1 .logo { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--shadow-sm); }

/* shadcn "outline" button */
#langToggle {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

#langToggle:hover { background: var(--accent-soft); color: var(--accent-foreground); }

#addForm { display: flex; gap: 8px; position: relative; }

/* shadcn "input" */
#addInput {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#addInput::placeholder { color: var(--muted-foreground); }

#addInput:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent), var(--shadow-sm);
}

/* shadcn "primary" button */
#addForm button {
  border: none;
  border-radius: var(--radius-md);
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

#addForm button:hover { filter: brightness(1.07); }

.hint {
  margin: 8px 4px 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

/* ---- list ---- */
main {
  max-width: 600px;
  margin: 0 auto;
  /* Rev 9: main is now the fixed frame (full height, no vertical
     padding); the old 6px top / 40px bottom document paddings moved
     onto the per-screen scroll containers below so total spacing is
     unchanged. Horizontal 16px stays on main, as before. */
  height: 100%;
  padding: 0 16px;
  /* The frame paints the page background itself (the same color body
     used to show through). Load-bearing since Rev 18 (§5.10): while a
     sheet is open the scrim service swaps the html/body background to
     the PRE-BLENDED band color, for the iOS status band and the
     letterbox canvas — regions the scrim layer does not paint. If that
     swapped color were also the in-viewport background, the
     translucent scrim would blend it a SECOND time: the page
     background ended up two blends deep (≈ rgb(170,174,169) on Sage)
     while opaque cards under the same scrim got the single designed
     pass (≈ rgb(213,215,214)), so the cards read as undimmed and
     "foregrounded" against the over-dark page. With the background on
     main, in-viewport pixels always start from --bg and take exactly
     one scrim pass, matching the band; html/body keep the swap for
     the canvas outside the frame. */
  background: var(--background);
}

/* Rev 9 (§5.3): exactly ONE scroll container per screen. The 6px/40px
   vertical paddings are main's old document paddings, moved (not added)
   so content keeps clearing the dock and the safe areas as before.
   Department headers are NOT sticky — nothing in a screen is. */
main > section.screen {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-top: 6px;
  padding-bottom: 40px;
  /* No visible scrollbar on the screens (the mockups show none);
     same pair of rules as the Month strips. Sheets keep their own. */
  scrollbar-width: none;
}

main > section.screen::-webkit-scrollbar { display: none; }

main > section.screen[hidden] {
  display: none;
}

/* Sheet scroll lock (Rev 9): while a sheet is open its screen container
   is frozen with this class — the offset is inherently preserved
   (nothing is repositioned, unlike the old body position:fixed lock). */
main > section.screen.scroll-locked {
  overflow: hidden;
}

/* Edge swipe-back (generic, web/swipe-back.js): while a screen has a
   registered back, vertical pans scroll natively and horizontal drags
   are handed to the gesture layer instead of the scroll container.
   The back-target reveal under the drag (a real section, or the Month
   snapshot clone under All activity) never takes input. */
main > section.screen.swipeback-armed {
  touch-action: pan-y;
}

main > section.screen.swipeback-clone {
  pointer-events: none;
}

/* ============ Rev 9 (§5.3): compact top bar ============
   One fixed bar for Plan / Us / Household (contents rendered by app.js).
   Height = safe-area top + 44; the content row is the bottom 44. Glass
   like the dock. Hidden state: opacity 0 + pointer-events none (and
   aria-hidden + tabindex -1, managed in app.js); the title rides up
   6px as it fades in. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 44px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 -0.5px 0 var(--line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.topbar.on {
  opacity: 1;
  pointer-events: auto;
}

.tb-row {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
}

.tb-start {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.tb-end {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Centered on the SCREEN (absolute across the full bar width), one
   line, ellipsis; slides up 6px as the bar fades in. */
.tb-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 100px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transform: translateY(6px);
  transition: transform 200ms ease;
  pointer-events: none;
}

.tb-title > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar.on .tb-title {
  transform: translateY(0);
}

.tb-avatars {
  display: flex;
  align-items: center;
  height: 44px;
  min-width: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tb-avatar {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg);
  overflow: hidden;
  flex: none;
}

/* Photo layer must FILL the circle: the span also holds the fallback
   initial as an in-flow flex item, so an in-flow img shares the row
   with it and leaves the initial visible as a band at the edge. */
.tb-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-avatar + .tb-avatar {
  margin-inline-start: -7px;
}

/* Rev 15 §6.11: the compact bar's switcher form (2+ households) —
   avatars 26 + a down chevron 14 that never mirrors. */
.tb-switcher { gap: 3px; padding-inline-end: 6px; border-radius: 999px; }
.tb-switcher .tb-chev-down { flex: none; color: var(--ink); transition: transform 180ms ease; }
.tb-switcher.open .tb-chev-down { transform: rotate(180deg); }

.tb-back {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-ink);
  cursor: pointer;
  white-space: nowrap;
}

[dir="rtl"] .tb-chev {
  transform: scaleX(-1);
}

/* §5.5: the Paste entry row's chevron points at the reading end. */
[dir="rtl"] .imp-chev {
  transform: scaleX(-1);
}

.tb-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .tb-title {
    transition: none;
  }
}

.dept { margin: 24px 0; }

.dept h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* shadcn "badge / secondary" */
.dept h2 .count {
  font-weight: 600;
  letter-spacing: 0;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.72rem;
}

.dept ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* shadcn "card" */
.dept li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  box-shadow: var(--shadow-sm);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

li.enter { animation: rise 0.28s ease-out; }

li.leaving {
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: scale(0.96);
}

/* shadcn "checkbox" */
.check {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.12s ease;
}
.check svg { width: 20px; height: 20px; }
.check .ico-check { display: none; }
li.done .check .ico-cart { display: none; }
li.done .check .ico-check { display: block; }

li.done { opacity: 0.5; }
li.done .check { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
li.done .check:active { transform: scale(0.9); }
li.done .name { text-decoration: line-through; }

.name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

/* shadcn "badge" on accent */
.qty {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-inline-start: 6px;
  white-space: nowrap;
}

/* ghost icon button */
.del {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-size: 1.25rem;
  line-height: 1;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s, transform 0.12s;
}

.del:hover { opacity: 1; background: var(--accent-soft); color: var(--accent-foreground); }

li.pending { opacity: 0.55; }
li.pending .check { animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.35; } }

.empty { text-align: center; color: var(--muted-foreground); margin: 64px 16px; }
.empty .big { font-size: 3.5rem; display: block; margin-bottom: 8px; }
.empty-title { font-size: 1.15rem; font-weight: 700; color: var(--foreground); margin: 0 0 4px; }
.empty-sub { font-size: 0.92rem; margin: 0; }

/* "Buy again" suggestions */
.dept.suggest h2 { color: var(--primary); }
.dept.suggest li { border-style: dashed; }
.addback {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, background-color 0.2s;
  will-change: transform; /* fix Safari not repainting bg in transformed drawer */
}
.addback:hover { background: var(--primary-hover); }
.addback:active { transform: scale(0.92); }
.addback:disabled { opacity: 0.6; }
.freq {
  margin-inline-start: auto;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chip {
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s, color 0.2s, transform 0.12s;
}
.chip:hover { background: var(--accent-soft); color: var(--accent-foreground); }
.chip::before { content: '+ '; font-weight: 700; }

.actions { margin: 28px 0 20px; }

/* shadcn "outline" button, full width */
.actions .ghost {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.actions .ghost:hover { background: var(--accent-soft); color: var(--accent-foreground); }

/* ---- Welcome / sign-in (Rev 12 §5.7) ---- */
/* Full-screen designed first screen, pixel-set from the Welcome board:
   a full-bleed Tote green hero (470px tall, 40px bottom corners, soft
   cream radial highlight) holding the language switch, the 132px cream
   tile and the 52px cream wordmark; Paper body (30/24/34) with the
   centered title + value line and the provider buttons pinned to the
   bottom (margin-top: auto). The login rules are scoped to #loginView
   and the invite welcome-card rules to .welcome-card: the two screens
   share class names (welcome-title / welcome-body) and bare selectors
   hijacked each other (the card's 300px body cap and 21px title ran
   the sign-in screen until 14 Oct 2026). */
#loginView {
  /* Break out of main's 16px gutters so the hero bleeds edge to edge. */
  margin-inline: -16px;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
}
#loginView[hidden] { display: none; }
.welcome-hero {
  background: #173A2B;
  border-radius: 0 0 40px 40px;
  height: 470px;
  flex: none;
  /* Board: the switch row starts 54px below the hero's top edge; the
     hero runs under the status bar, so never start above the inset. */
  padding: max(54px, env(safe-area-inset-top, 0px)) 20px 0;
  position: relative;
  overflow: hidden;
}
.welcome-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 18%, rgba(244,241,234,.10), transparent 60%);
}
.welcome-hero-top {
  position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 44px;
}
.welcome-lang { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(244,241,234,.14); }
.welcome-lang button {
  height: 28px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  background: transparent; color: rgba(244,241,234,.7);
}
.welcome-lang button.on { background: #F4F1EA; color: #173A2B; }
.welcome-tile {
  position: relative; display: block; width: 132px; height: 132px;
  margin: 58px auto 0;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.28));
}
.welcome-wordmark { position: relative; display: block; height: 41px; width: auto; margin: 22px auto 0; }
#loginView .welcome-body {
  flex: 1; min-height: 0;
  /* Board bottom padding 34px; the home-indicator inset is that same
     34px on current iPhones, so take the larger, never the sum. */
  padding: 30px 24px max(34px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
#loginView .welcome-title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; text-align: center; }
html[lang="he"] #loginView .welcome-title { letter-spacing: -0.01em; }
#loginView .welcome-text { margin: 10px 6px 0; font-size: 15px; line-height: 1.5; color: var(--soft); text-align: center; }
#loginView .welcome-actions { margin-top: auto; padding-top: 34px; }
#loginView .welcome-alert {
  margin: 0 0 12px; padding: 11px 14px; border-radius: 14px; text-align: start;
  background: color-mix(in srgb, var(--warm) 10%, var(--surface));
  color: color-mix(in srgb, var(--warm) 80%, #000);
  font-size: 14px; line-height: 1.45; min-height: 0;
}
#loginView .oauth-buttons { width: 100%; max-width: none; margin: 0; gap: 10px; }
#loginView .oauth-btn { height: 52px; padding: 0 20px; border-radius: 14px; gap: 10px; }
#loginView .oauth-google { border-color: transparent; box-shadow: inset 0 0 0 1px #747775; }
#loginView .oauth-btn.busy { pointer-events: none; }
#loginView .oauth-btn.dim { opacity: .45; pointer-events: none; }
.welcome-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none; opacity: .8;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: welcome-spin .8s linear infinite;
}
@keyframes welcome-spin { to { transform: rotate(360deg); } }
#loginView .welcome-fine { margin: 14px 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); text-align: center; }
#loginView .welcome-fine a { color: inherit; text-decoration: underline; }

.msg { color: var(--destructive); min-height: 1.4em; font-size: 0.9rem; }

/* Buy-again bottom drawer */
#drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 600px;
  margin: 0 auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.14);
  z-index: 50;
  max-height: 58vh;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(100% - 60px));
  transition: transform 0.25s ease;
}
#drawer.open {
  transform: translateY(0);
}
#drawer.open .teaser {
  display: none;
}
#drawer[hidden] {
  display: none;
}
.drawer-handle {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  cursor: grab;
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.drawer-handle .count {
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 700;
}
.drawer-handle .teaser {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.drawer-body li .hide-sug {
  background: none;
  border: none;
  color: var(--muted-foreground);
  font-size: 1.1rem;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
  opacity: 0.6;
}
.drawer-body li .hide-sug:hover {
  opacity: 1;
}
.drawer-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
}
.drawer-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-body li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}
.drawer-body .freq {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  white-space: nowrap;
}
body.has-drawer #listView {
  padding-bottom: 62px;
}

/* ---- header menu ---- */
#menuBtn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  letter-spacing: 1px;
}
.top-inner { position: relative; }
#menu {
  position: absolute;
  top: 58px;
  inset-inline-end: 16px;
  width: 248px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 60;
}
#menu[hidden] { display: none; }
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.menu-label { font-size: 0.9rem; font-weight: 600; }
.seg {
  display: flex;
  background: var(--muted);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.seg button.on {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.theme-dots { display: flex; gap: 8px; padding: 2px 4px; }
.theme-dots button {
  border: 2px solid transparent;
  background: none;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
}
.theme-dots button.on { border-color: var(--primary); }
.theme-dots .dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.theme-dots .dot.sage { background: #486f59; }
.theme-dots .dot.ocean { background: #3d6db5; }
.theme-dots .dot.clay { background: #b26a45; }
.theme-dots .dot.plum { background: #8e5aa8; }
.theme-dots .dot.midnight { background: #1c1c1e; }
.menu-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: none;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 8px 6px;
  cursor: pointer;
  font-family: inherit;
}

/* Store tag: faint icon when unset, badge when set */

/* ---- stats view ---- */
.stats-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}
.stats-head h2 { margin: 0; font-size: 1.3rem; }
#statsBack {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  cursor: pointer;
}
[dir="ltr"] #statsBack { transform: scaleX(-1); }
#adminBack {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  cursor: pointer;
}
[dir="ltr"] #adminBack { transform: scaleX(-1); }
.muted { color: var(--muted-foreground); font-size: 0.9rem; }

/* Autocomplete dropdown under the add input */
#suggestDrop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 70;
  overflow: hidden;
}
#suggestDrop[hidden] { display: none; }
#suggestDrop button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  color: inherit;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
#suggestDrop button:last-child { border-bottom: none; }
#suggestDrop button:active { background: var(--accent); }
#suggestDrop .sub {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  margin-inline-start: auto;
}

/* Stats/Activity tabs */
.seg.tabs {
  display: flex;
  gap: 4px;
  margin: 0 16px 16px;
  max-width: 600px;
}
.seg.tabs button {
  flex: 1;
  border: none;
  background: none;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--muted-foreground);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.seg.tabs button.on {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

/* Activity feed */
#activityList {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  max-width: 632px;
}
#activityList li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
#activityList li:last-child { border-bottom: none; }
#activityList .ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
#activityList .txt { flex: 1; min-width: 0; }
#activityList .desc { font-size: 0.95rem; }
#activityList .desc b { font-weight: 700; }
#activityList .time {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}
#activityMore {
  display: block;
  margin: 8px auto 24px;
}

.ghost-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* ---- Stats redesign ---- */
.stat-hero {
  display: flex;
  gap: 12px;
  margin: 0 16px 16px;
  max-width: 600px;
}
.stat-hero > div {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 16px 8px;
  text-align: center;
}
.stat-hero .stat-big {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.stat-hero .muted { font-size: 0.8rem; margin-top: 4px; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin: 0 16px 16px;
  max-width: 600px;
}
.stat-card h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
}
.stat-card .bars { width: 100%; height: auto; display: block; }
.donut-wrap {
  display: flex;
  gap: 20px;
  align-items: center;
}
.donut { width: 130px; height: 130px; flex-shrink: 0; }
.legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}
.legend-row .swatch {
  width: 12px; height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}
.legend-row span:nth-child(2) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legend-row b { font-weight: 700; }
.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.stat-row span {
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.92rem;
}
.stat-row .bar {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--muted);
  overflow: hidden;
}
.stat-row .bar div {
  height: 100%;
  background: var(--primary);
  border-radius: 5px;
}
.stat-row b { min-width: 2ch; text-align: end; }
.pad { padding: 0 16px; }

/* ---- Popover triggers (replace native selects) ---- */
.qty-btn, .store-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin-inline-start: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--muted-foreground);
  opacity: 0.75;
}
.qty-btn.unset, .store-btn:not(.set) {
  width: 30px;
  height: 30px;
}
.qty-btn.unset svg, .store-btn:not(.set) svg {
  width: 18px;
  height: 18px;
}
.qty-btn:not(.unset), .store-btn.set {
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 999px;
  padding: 4px 8px;
  padding-inline-end: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 1;
  gap: 4px;
  white-space: nowrap;
}
.store-btn.set {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.qty-btn .chev, .store-btn .chev {
  display: inline-flex;
  width: 10px;
  height: 10px;
  opacity: 0.7;
}
.qty-btn .chev svg, .store-btn .chev svg {
  width: 10px;
  height: 10px;
}

/* ---- Popover ---- */
#popBackdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 90;
}
#pop {
  position: fixed;
  z-index: 91;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 14px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
}
.pop-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pop-sec { margin-bottom: 14px; }
.pop-sec:last-child { margin-bottom: 0; }
.pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pop-chips button {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.pop-chips button.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pop-grid button {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 10px;
  padding: 10px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.pop-grid button.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.pop-custom {
  display: flex;
  gap: 6px;
}
input[type="text"], input[type="number"], input[type="password"], input[type="search"] {
  font-size: 16px;
}
.pop-custom input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 16px; /* iOS zooms the page if inputs are under 16px */
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--background);
  color: var(--foreground);
}
.pop-custom button {
  border: none;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.pop-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -4px -4px 8px;
}
.pop-list button {
  border: none;
  background: none;
  text-align: start;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pop-list button:hover { background: var(--muted); }
.pop-list button.on { font-weight: 700; }
.pop-list button .tick {
  color: var(--primary);
  font-weight: 700;
}
.pop-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.pop-actions button {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 10px;
  padding: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ---- Admin panel ---- */
#adminView, #settingsView {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
}
#settingsBack {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  cursor: pointer;
}
[dir="ltr"] #settingsBack { transform: scaleX(-1); }
.admin-desc.warn { color: #c0392b; }
.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.admin-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}
.admin-card h4 {
  margin: 16px 0 8px;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}
.admin-card input[type="search"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  margin-bottom: 8px;
  background: var(--background);
  color: var(--foreground);
}
.admin-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}
.admin-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.admin-list li.is-deleted {
  opacity: 0.5;
}
.admin-list .pname {
  font-weight: 600;
  flex: 1;
}
.admin-list .psub {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.admin-list button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  cursor: pointer;
  font-size: 0.85rem;
}
.admin-list li.empty {
  justify-content: center;
  color: var(--muted-foreground);
}
.admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin: 8px 0;
  cursor: pointer;
}
.admin-row {
  display: flex;
  gap: 12px;
}
.admin-row label {
  flex: 1;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-row select {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  background: var(--background);
  color: var(--foreground);
}
.admin-slider {
  margin-bottom: 14px;
}
.admin-slider label {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 6px;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider-row input[type="range"] {
  flex: 1;
}
.slider-val {
  min-width: 48px;
  text-align: end;
  font-weight: 600;
  font-size: 0.9rem;
}
.edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.edit-field input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
}
.pop-actions .danger {
  color: #c0392b;
}
.pop-actions .primary {
  font-weight: 700;
}

/* ---- Admin accordion ---- */
.admin-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: start;
}
.admin-accordion-head h3 {
  margin: 0;
}
.admin-accordion-head .chev {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.admin-desc {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin: 8px 0;
}

/* ---- Admin refinements ---- */
.admin-title-row h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.count-badge {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted-foreground);
}
.admin-list .empty-state {
  justify-content: center;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  padding: 24px 16px;
  border-bottom: none;
}
.link-danger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #c0392b;
  font-size: 0.9rem;
  padding: 12px;
  cursor: pointer;
  text-align: center;
}
.primary-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
}
#adminProdTabs {
  margin: 8px 0;
}

/* ---- Cute tote empty state ---- */
.empty {
  text-align: center;
  padding: 48px 24px;
}
.tote-illo {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 8px 0 4px;
}
.empty-sub {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  margin: 0 0 16px;
}

.admin-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.danger-btn {
  color: #c0392b;
  border-color: #c0392b;
}

/* ---- Skeleton category header (pending items) ---- */
.skeleton-head {
  padding: 0 4px;
}
.skeleton-head .skel {
  display: inline-block;
  width: 90px;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--border) 25%, var(--card) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ Redesign: Plan view ============ */

.plan {
  padding-bottom: 120px;
}

.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}

.plan-avatars {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.plan-hh {
  display: flex;
  align-items: center;
}

.plan-hh-stack {
  display: flex;
  align-items: center;
}

.plan-avatars .avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg);
  overflow: hidden;
  flex: none;
}

/* Absolute fill: see .tb-avatar img (initial fallback is a flex item). */
.plan-avatars .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-avatars .avatar + .avatar {
  margin-inline-start: -8px;
}

.plan-hh-names {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  max-width: 38vw;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: start;
}

/* Rev 15 §6.11: at 2+ households the header start is ONE switcher
   button (avatar stack · household name · down chevron). The chevron
   opens downward, so it never mirrors in Hebrew; it flips up while
   the popover is open. (This replaces the old side chevron, whose
   display:flex silently defeated its [hidden] attribute.) */
.plan-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  max-width: 250px;
  background: none;
  border: 0;
  padding: 0 10px 0 2px;
  margin-inline-start: -2px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.plan-switcher.open { background: var(--fill); }
.plan-switcher .plan-hh-hname {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: start;
}
.plan-switcher .plan-hh-down {
  flex: none;
  color: var(--ink);
  transition: transform 180ms ease;
}
.plan-switcher.open .plan-hh-down { transform: rotate(180deg); }
.plan-switcher .avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg);
  overflow: hidden;
  flex: none;
}
.plan-switcher .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-switcher .plan-hh-stack > * + * { margin-inline-start: -8px; }
.plan-switcher .hrow-plus { width: 32px; height: 32px; }
/* [hidden] must win over the flex displays above (the old chevron bug). */
.plan-avatars[hidden], .plan-switcher[hidden] { display: none; }

.plan-chart {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.plan-title {
  padding: 10px 20px 0;
}

.plan-title h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
}

[dir="rtl"] .plan-title h1 {
  letter-spacing: -0.015em;
}

.plan-new {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--soft);
}

/* Empty-state meta line (§6.2): "0 items · Mori shopped Thursday" */
.plan-meta {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--soft);
}

.plan-meta .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}

.plan-new a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mori);
  font-weight: 500;
  text-decoration: none;
}

.plan-new .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mori);
}

/* Next shop card */
.next-shop {
  margin: 18px 12px 0;
  border-radius: var(--r-card);
  background: var(--deep);
  color: var(--deep-ink);
  padding: 18px 18px 16px;
}

.next-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.next-shop-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.6;
}

.next-shop-head span {
  font-size: 12.5px;
  opacity: 0.6;
}

.next-shop-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

.next-shop-count .mono {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.next-shop-count span:last-child {
  font-size: 14px;
  opacity: 0.6;
}

.aisle-bar {
  display: flex;
  gap: 3px;
  height: 6px;
  margin-top: 14px;
}

.aisle-bar span {
  border-radius: 3px;
  transition: flex-grow 0.5s var(--ease-out);
}

.next-shop-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  opacity: 0.6;
}

/* Rev 20 §5.11: the card is a button; its tray swaps the stores line
   for store chips. The swap cross-fades: the incoming layer animates
   in (chips: --card-tray-in, fade + 4px rise; the returning line
   fades back to its resting 60%). */
.next-shop {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.next-shop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-chip-gap);
  margin-top: 12px;
}

.ns-chips.ns-in {
  animation: nsChipsIn var(--card-tray-in) cubic-bezier(.22, 1.1, .36, 1);
}

@keyframes nsChipsIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.next-shop-foot.ns-in {
  animation: nsLineIn 0.3s ease;
}

@keyframes nsLineIn {
  from { opacity: 0; }
  to { opacity: 0.6; }
}

.ns-chip {
  height: var(--card-chip-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--card-chip-r);
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  background: var(--card-chip-off);
  color: var(--deep-ink);
  cursor: pointer;
}

.ns-chip .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.6;
}

.ns-chip[aria-checked="true"] {
  background: var(--card-chip-on);
  color: var(--deep);
  font-weight: 600;
}

/* The filtered card's clear (✕): 30 round at the end of row 1, its
   negative margins keep the head row at its unfiltered height. */
.ns-clear {
  flex: none;
  width: 30px;
  height: 30px;
  margin-block: -6px;
  margin-inline-end: -6px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 241, 234, 0.14);
  color: var(--deep-ink);
  cursor: pointer;
}

/* §5.11(5): the hidden-count line under the filtered list. */
.ns-hidden {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 20px 20px 0;
  font-size: 13px;
  color: var(--soft);
}

.ns-hidden button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ns-chips.ns-in, .next-shop-foot.ns-in { animation: none; }
}

/* Department sections (SPEC Rev3 §5.1: no header counts; right edge is quantities only) */
.plan-dept {
  padding-top: 24px;
}

.plan-dept-head {
  display: flex;
  align-items: center;
  padding: 0 20px 2px;
}

.plan-dept-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  /* Rev 20 §5.1: the 12px filled department shape leads the name. */
  display: flex;
  align-items: center;
  gap: 7px;
}

.plan-dept-head h2 svg {
  flex: none;
}

/* Plan rows (Rev 8 §5.1): no row border — the hairline hangs on the
   row body (see .plan-row-body::after below). */
.plan-row {
  position: relative;
  overflow: hidden;
  max-height: 88px;
}

.plan-row-tray {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-inline-end: 10px;
  background: var(--bg);
  pointer-events: none;
}
.plan-row.tray-open .plan-row-tray {
  pointer-events: auto;
}

.tray-btn {
  width: 68px;
  height: 48px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.6);
  -webkit-tap-highlight-color: transparent;
}

.tray-edit {
  background: var(--ink);
  color: var(--bg);
}

.tray-remove {
  background: color-mix(in srgb, var(--warm) 12%, var(--bg));
  color: color-mix(in srgb, var(--warm) 80%, black);
}

[data-theme="midnight"] .tray-remove {
  background: rgba(255,107,74,.16);
  color: #FF9C82;
}

.plan-row-slide {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding-inline: 8px 10px;
  background: var(--bg);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.plan-row.has-note .plan-row-slide {
  min-height: 64px;
}

.plan-row.is-new .plan-row-slide {
  background: color-mix(in srgb, var(--mori) 6%, var(--bg));
}

/* Check control: 44×52 hit area; Rev 20 §5.1 — a 22px circle
   (r 9.4, 1.75 stroke) in the department colour. */
.plan-check {
  flex: none;
  width: 44px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.plan-check svg {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
}

.plan-check:active svg {
  transform: scale(0.88);
}

.plan-check-pop {
  transform-box: fill-box;
  transform-origin: center;
  /* Pop animation now handled by Motion One (see plan.js checkOff) */
}

.plan-row-text {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
  margin-inline-end: 8px;
}

.plan-row-body {
  position: relative;
  background: none;
  border: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  flex: 1;
  /* Full row height (§5.1): the slide centers its flex children, so
     without this the body shrinks to its content height and floats
     mid-row — and the hairline on its bottom edge (below) lands that
     far above the row's true bottom. Stretched, the body IS the row's
     full height in the 56, 64 and checked states alike. Its children
     center on that full height (the text column re-stretches itself;
     the badges center on the whole name+note block, not the name). */
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Row hairline (Rev 8 §5.1; extent ruled by Yogev 14 Oct): starts at
   the text column (after the department shape) and runs the FULL
   width of the row to the far edge, passing under the badges. It
   hangs on the row body, whose box spans exactly that extent; on the
   text column it stopped wherever the badges began. inset-inline-end
   0 = the body edge, which already sits inside the slide's end
   padding, in both row heights and in the checked state. */
.plan-row-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}

.plan-row-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.plan-row-name-t {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.plan-row.is-checking .plan-row-name-t {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--soft);
}

.plan-row-name .new-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mori);
  flex: none;
}

.plan-row-note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: start;
}

/* Checked state (§5.1): while the row sits in its 1200ms grace the
   note and both badges fade to 40% — nothing else changes: the row
   keeps its 56/64 height and the badges keep the cluster layout
   below. (This block previously carried the badge cluster's flex
   declarations on these selectors instead, which forced the note to
   a 44px min-height and blew a checked note row up to ~83px.) */
.plan-row.is-checking .plan-row-note,
.plan-row.is-checking .plan-badges {
  opacity: .4;
}

/* Badge cluster at the row's end edge (§5.1): store badge first,
   quantity badge last, 6px between them. The row body's
   align-items: center centers the cluster on the full row height. */
.plan-badges {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge {
  height: 28px;
  padding-inline: 8px;
  border-radius: 8px;
  background: var(--fill);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.badge-store {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--soft);
  font-size: 13px;
  font-weight: 500;
  max-width: 136px;
}
.badge-store-t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-qty {
  background: var(--fill);
  padding-inline: 9px;
}
.badge-qty .q-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.badge-qty .q-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: .7;
}

/* Undo toast */
.plan-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  height: 48px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 16px 8px;
  font-size: 14px;
  font-weight: 400;
  z-index: 90;
  /* Enter/exit animations handled by Motion One (see plan.js toast) */
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}

.plan-toast-msg {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-toast-undo {
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Long-press context menu */
.plan-ctx {
  position: absolute;
  z-index: 95;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.2);
  padding: 6px;
}

.plan-ctx button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.plan-ctx button.danger {
  color: var(--warm);
}

/* Shared scrim layers (web/scrim.js): one element per sheet family,
   created once at boot, body-level, opacity-only animation. The color
   is the single token treatment; a layer's opacity is its progress.
   The bottom overscan (§5.10) keeps keyboard and viewport resizes
   from ever uncovering an undimmed strip below the layer. */
.scrim-layer {
  position: fixed;
  inset: 0 0 -50vh 0;
  background: rgb(var(--scrim-rgb) / var(--scrim-max));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Popover tier (§5.10): anchored, glanceable surfaces (the long-press
   row menu's layer) dim at about half the sheet strength. */
.scrim-layer.pop {
  background: rgb(var(--scrim-rgb) / var(--scrim-max-pop));
}

/* Item sheet (Edit) */
#itemSheet:empty {
  display: none;
}

.is-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  background: var(--surface);
  border-radius: 30px 30px 0 0;
  padding: 8px 20px calc(30px + env(safe-area-inset-bottom));
  max-height: 82vh;
  overflow-y: auto;
  transform: translateY(100%);
  /* Slide animation handled by Motion One (see plan.js openItemSheet/closeItemSheet) */
}

.is-grab {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 4px auto 12px;
}

.is-grabzone {
  padding: 6px 0 2px;
  cursor: grab;
  touch-action: none;
}
.is-grabzone .is-grab {
  margin: 0 auto;
}

.is-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.is-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-sec h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
}

.is-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
}

.is-stepper button {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--fill);
  border: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.is-stepper .mono {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.is-qval {
  background: none;
  border: 0;
  padding: 0 6px;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The value box is fluid (Yogev, 14 Oct): in the item sheet the value is
   a <button>, so the fixed width:52px of .is-stepper button used to size
   it, and a long value ('500' after sliding the unit to ml) overflowed
   the box and painted over the -/+ buttons. Keep 52px as the floor so
   1-2 digit values render exactly as before, and let wider values grow
   the box symmetrically; flex:none so the box can never shrink below its
   content and the -/+ buttons (also flex:none) are never overlapped.
   Specificity (0,2,0) deliberately beats .is-stepper button (0,1,1);
   shared by the item sheet (plan.js) and the Add sheet typing state
   (add-sheet.js), which both render number+unit inside .is-qval. */
.is-stepper .is-qval {
  width: auto;
  min-width: 52px;
  padding: 0 14px;
  flex: none;
}
.is-qnum {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.is-qunit {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  opacity: .7;
}
.is-qty-input {
  width: 110px;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  outline: none;
}

.is-note-input {
  height: 48px;
  border-radius: 14px;
  background: var(--fill);
  font-size: 16px;
  padding-inline: 14px;
  width: 100%;
  border: 0;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.is-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--soft);
  min-height: 16px;
}
.is-note-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.is-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.is-chip {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.is-chip.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.is-done {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  border-radius: 16px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
}
.is-done:disabled {
  opacity: 1;
}

/* Global button reset: prevent iOS native styling from fading buttons */
button {
  -webkit-appearance: none;
  appearance: none;
}
/* Ensure primary accent buttons are never faded */
button[style*="--accent"] {
  opacity: 1 !important;
}

/* Dock */
.plan-dock {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  border-radius: var(--r-dock);
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px var(--line), 0 1px 1px var(--shadow), 0 20px 40px var(--shadow);
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.dock-low {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  color: var(--ink);
  font-size: 14px;
}

.dock-low .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
  flex: none;
}

.dock-low .text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-low .text strong {
  font-weight: 600;
}

.dock-low .text span:last-child {
  color: var(--soft);
}

.dock-low svg {
  flex: none;
}

.dock-add {
  height: 52px;
  border-radius: var(--r-dock-btn);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 400;
  background: var(--fill);
  color: var(--soft);
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: start;
}

/* ============ Shell glass (Phase 3 chunk 3c) ============
   Liquid Glass, approximated for the shell only: <html> carries
   .native solely inside the Capacitor app (set by native.js), so
   the PWA/web rendering stays exactly as designed above. Over the
   shared frosted treatment the floating surfaces (dock, top bar)
   gain what reads as glass on iOS 26: a clearer fill (the theme's
   --glass thinned via color-mix, so it follows theme+appearance
   on its own), stronger saturation, and a 1px specular rim along
   the top edge — --glass-spec carries the rim color per
   theme/appearance (bright on light grounds, faint on dark).
   With Reduce Transparency on, the token system's documented
   fallback applies instead: the opaque surface, no blur. The
   scrim/band system (§5.10) is untouched — this is only the two
   floating surfaces' own finish. */
html.native .plan-dock,
html.native .topbar {
  background: color-mix(in srgb, var(--glass) 78%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
}

html.native .plan-dock {
  box-shadow: inset 0 1px 0 var(--glass-spec), inset 0 0 0 0.5px var(--line), 0 1px 1px var(--shadow), 0 20px 40px var(--shadow);
}

html.native .topbar {
  box-shadow: inset 0 1px 0 var(--glass-spec), inset 0 -0.5px 0 var(--line);
}

@media (prefers-reduced-transparency: reduce) {
  html.native .plan-dock,
  html.native .topbar {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Add dock: board "serif" display titles (letter-spacing tightens in LTR,
   relaxes in RTL — same convention as .hh-title). */
#addDock .ba-title { letter-spacing: -0.035em; }
[dir="rtl"] #addDock .ba-title { letter-spacing: -0.01em; }

/* Add dock: the focused field gets the 2px accent ring (SPEC §6.4). */
#addDock .ad-field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }

.uslider-host { margin-top: 2px; }

/* Matched query text in typing results is bold, no highlight (board <mark>). */
#addDock mark { background: none; color: inherit; font-weight: 700; }

/* ============ Add dock (Rev 20 §5.13) ============
   One component: the Plan dock, the focused field and the expanded
   add UI are the same element. The field is pinned at the bottom
   (above the keyboard or the screen edge); content grows ABOVE it.
   Geometry is driven from add-sheet.js (content height = the
   §5.13 caps); the transitions here are the GROWTH contract only:
   420ms cubic-bezier(.22,1.1,.36,1) on inset/radius/padding.
   The keyboard ride is NOT a CSS transition: it is a WAAPI
   transform owned by add-sheet.js (300ms cubic-bezier(.32,.72,0,1)
   from focus) — the retired bottom transition read the keyboard
   only after its own animation ended, the step-pop this replaces,
   so bottom and transform deliberately carry no transition here. */
#addDock {
  z-index: 41;
  gap: 0;
  transition: left var(--dock-grow-ms) var(--dock-grow-ease),
    right var(--dock-grow-ms) var(--dock-grow-ease),
    border-radius var(--dock-grow-ms) var(--dock-grow-ease),
    padding var(--dock-grow-ms) var(--dock-grow-ease),
    background-color var(--dock-grow-ms) ease;
}
#addDock.expanded {
  left: 0;
  right: 0;
  border-radius: 30px 30px 0 0;
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  box-shadow: inset 0 0 0 0.5px var(--line), 0 -12px 34px var(--shadow);
}
#addDock.expanded.kb { padding-bottom: 8px; }
html.native #addDock.expanded {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#addDock .ad-grab {
  height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex: none;
  touch-action: none;
  cursor: grab;
  transition: height var(--dock-grow-ms) var(--dock-grow-ease);
}
#addDock.expanded .ad-grab { height: 20px; }
#addDock .ad-grab-bar {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 8px;
  flex: none;
}

#addDock .ad-content {
  position: relative;
  height: 0;
  flex: none;
  transition: height var(--dock-grow-ms) var(--dock-grow-ease);
}
#addDock .ad-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: opacity 0.25s ease;
}
#addDock .ad-pane::-webkit-scrollbar { display: none; }
#addDock .ad-pane.off { opacity: 0; pointer-events: none; }
#addDock .ad-cta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 2;
}

/* The strip: teaser / quick-add chips / added note cross-fade in
   one 44px row (plus the 6px breathing gap under it) above the
   field; it collapses entirely while the dock is expanded. */
#addDock .ad-strip {
  position: relative;
  height: 50px;
  flex: none;
  overflow: hidden;
  transition: height var(--dock-grow-ms) var(--dock-grow-ease);
}
#addDock .ad-strip > * {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#addDock .ad-strip > *.on { opacity: 1; pointer-events: auto; }
#addDock .ad-teaser { width: 100%; }
#addDock .ad-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
#addDock .ad-chips::-webkit-scrollbar { display: none; }
#addDock .ad-chip {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  font-family: inherit;
}
#addDock .ad-chip.on {
  background: var(--dt);
  box-shadow: inset 0 0 0 1.5px var(--dc);
  font-weight: 600;
}
#addDock .ad-chip-all { color: var(--accent-ink); font-weight: 600; }
#addDock .ad-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 12px;
}
#addDock .ad-note-t {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}
#addDock .ad-note-undo {
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 600;
  height: 44px;
  padding: 0 8px;
  cursor: pointer;
  font-family: inherit;
  flex: none;
}

/* The field row: the field itself (52px pill) + the Done button
   that expands in whenever the user can back out (focused or
   expanded). The field never moves; only the button's width does. */
#addDock .ad-fieldrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
#addDock .ad-field {
  flex: 1;
  height: 52px;
  border-radius: 26px;
  background: var(--fill);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 15px;
  color: var(--soft);
  min-width: 0;
  cursor: text;
}
#addDock .ad-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 17px;
  color: var(--ink);
  font-family: inherit;
}
#addDock .ad-field input::placeholder { color: var(--soft); }
#addDock .ad-field input::-webkit-search-cancel-button { display: none; }
#addDock .ad-trail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
}
#addDock .ad-done {
  height: 52px;
  max-width: 0;
  opacity: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  flex: none;
  transition: max-width var(--dock-keyboard-ms) var(--dock-keyboard-ease),
    opacity 0.25s ease, padding var(--dock-keyboard-ms) var(--dock-keyboard-ease);
}
#addDock.canback .ad-done { max-width: 84px; opacity: 1; padding: 0 10px 0 2px; }

/* Reduced motion (§5.13): heights and cross-fades are instant; the
   keyboard still moves the dock (the lift snaps, on the same clock). */
@media (prefers-reduced-motion: reduce) {
  #addDock { transition: none; }
  #addDock .ad-content, #addDock .ad-grab, #addDock .ad-strip,
  #addDock .ad-pane, #addDock .ad-strip > *, #addDock .ad-done { transition: none; }
}

/* Empty state */
.plan-empty {
  text-align: center;
  padding: 20px;
}

#emptyTote { max-width: 360px; margin: 0 auto; }
#emptyTote svg { display: block; width: 100%; height: auto; }

.plan-empty h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 12px 0 6px;
}

.plan-empty p {
  color: var(--soft);
  font-size: 15px;
  margin: 0 0 4px;
}

.plan-empty .meta {
  font-size: 12.5px;
  color: var(--soft);
  margin-bottom: 16px;
}

/* ---- First run (Rev 10 §5.6): starter grid, rhythm card, folded links */
.fr-starter {
  padding: 4px 20px 0;
}
.fr-starter h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
[dir="rtl"] .fr-starter h2 { letter-spacing: -0.01em; }
.fr-starter > p {
  margin: 6px 4px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
}
.fr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fr-pill {
  height: 40px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.fr-pill svg { flex: none; }
.fr-starter-bar .fr-add-btn {
  width: 100%;
  height: 52px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}
.fr-starter-bar .fr-add-btn:disabled {
  background: var(--fill);
  color: var(--soft);
  cursor: default;
}
.fr-starter-links {
  display: flex;
  justify-content: center;
  gap: 22px;
}
.fr-starter-links button {
  height: 44px;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--soft);
  padding: 0;
}
.fr-starter-links button.fr-link-accent { color: var(--accent-ink); }
.fr-folded-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 10px;
}
.fr-folded-links button {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-ink);
  padding: 6px 0;
}
.fr-card {
  margin: 16px 12px 0;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
  padding: 12px 12px 12px 16px;
}
.fr-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fr-card-title { font-size: 15px; font-weight: 600; }
.fr-card-x {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--soft);
  padding: 0;
}
.fr-card-sub {
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--soft);
}
.fr-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 14px;
  background: var(--fill);
}
.fr-seg button {
  flex: 1;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--soft);
  border: 0;
  cursor: pointer;
  padding: 0 4px;
}
.fr-seg button:hover { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow); }

.sleeping-tote {
  animation: breathe 4.5s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .sleeping-tote { animation: none; }
  .plan-row-slide { transition: none; }
}

/* ============ Add sheet detents: RETIRED (Rev 20 §5.13) ============ */
/* The Add sheet's opening detent (the sheet-top custom property,
   50dvh, with the typing state rising to 25dvh) is gone: the add
   flow is the dock now (see the Add dock block above), whose
   heights are the §5.13 caps, not detents. Other sheets never
   used that variable. */

/* ============ Redesign: Household view ============ */

.household {
  padding: 54px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}

.hh-top { }

.hh-back {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.hh-back .flip { transform: scaleX(-1); }

.hh-title {
  margin: 8px 4px 0;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;
}

[dir="rtl"] .hh-title { letter-spacing: -0.01em; }

/* Rev 15 §6.11 (2+ households): mono eyebrow above the title, and the
   title becomes the active household's name (34/600, two lines max). */
.hh-eyebrow {
  margin: 12px 4px 0;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--soft);
  text-transform: uppercase;
}
.hh-title.clamp2 {
  font-size: 34px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-scopenote { margin: 10px 4px 0; font-size: 13px; color: var(--soft); }
.hh-scopenote b { color: var(--ink); font-weight: 600; }

/* Rev 16: the rename row at the top of Members + end-card states. */
.hh-rename-row { border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.hh-rename-val {
  font-size: 14px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}
.hh-end-card.is-disabled { cursor: default; opacity: .75; }
.hh-end-title.accent { color: var(--accent-ink); }

.hh-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 6px 16px;
  box-shadow: 0 1px 2px var(--shadow);
}

.hh-card.pad0 { padding: 0 16px; }

.hh-h2 {
  margin: 0 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
}

/* Rev 13 §6.9: no section headings. A 1px --line divider and the
   "Just for you" label mark where the personal settings start. */
.hh-jfy { margin: 0 4px -6px; }
.hh-jfy-rule { height: 1px; background: var(--line); margin-bottom: 12px; }
.hh-jfy-label { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* Account card first row (Rev 13 §6.9): "Signed in with {provider}"
   with the account email under it; not tappable. */
.hh-signedin { display: flex; flex-direction: column; justify-content: center; min-height: 62px; }
.hh-signedin-name { font-size: 15.5px; font-weight: 500; }
.hh-signedin-email { font-size: 13px; color: var(--soft); margin-top: 1px; }
.hh-link.warm .hh-link-name { color: var(--destructive, #B3261E); }

a.hh-link { text-decoration: none; }

/* Members (Rev 13: one row per person, each row a single button) */
.hh-member {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.hh-avatar-wrap { position: relative; flex: none; display: inline-flex; }
/* Divider only BETWEEN rows: the last row in the Members card (a solo
   member, or the member above the invite row handled by that row's own
   presence) never carries a stray line under it. */
.hh-member:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.hh-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}

.hh-member-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hh-member-name { font-size: 16px; font-weight: 600; }
.hh-member-role { font-size: 13px; color: var(--soft); }

.hh-invite {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: start;
}

.hh-invite-plus {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  flex: none;
}

/* Member management */
.hh-avatar { overflow: hidden; }
/* Absolute fill: see .tb-avatar img (initial fallback is a flex item). */
.hh-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hh-member-email { font-size: 13px; color: var(--soft); }
/* Role chip (board: 24 tall, radius 12, 12/600 on --fill) */
.hh-role-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fill);
  color: var(--soft);
  flex: none;
}
.hh-mini-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.hh-mini-btn.danger { color: var(--destructive, #C81E1E); border-color: var(--destructive, #C81E1E); }
.hh-mini-btn:disabled { opacity: .5; }
.hh-invite-box {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.hh-invite-box-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  margin-bottom: 8px;
}
.hh-invite-box-row { display: flex; gap: 8px; align-items: center; }
.hh-invite-box-row input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  direction: ltr;
}
.hh-invite-box-exp { display: block; font-size: 12px; color: var(--soft); margin-top: 6px; }
.hh-danger-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--destructive, #C81E1E);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  text-align: start;
}

/* Shop together card (SPEC §6.10 Rev 5) */
.hh-shop-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: 0 1px 2px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hh-shop-avs { display: flex; align-items: center; }

.hh-shop-avs .hh-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
  box-shadow: 0 0 0 3px var(--surface);
  position: relative;
  z-index: 1;
}

.hh-shop-seat {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: -10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
  flex: none;
}

.hh-shop-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
[dir="rtl"] .hh-shop-title { letter-spacing: 0; }
.hh-shop-body { font-size: 14.5px; line-height: 1.5; color: var(--soft); margin: 6px 0 0; }

.hh-shop-btn {
  height: 50px;
  border-radius: 16px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

.hh-shop-fine { font-size: 12.5px; color: var(--soft); text-align: center; margin: 0; }

/* Delete / Leave card (SPEC §6.10 Rev 5): last on the page, own card */
.hh-end-card {
  width: 100%;
  background: var(--surface);
  border-radius: 22px;
  border: 0;
  box-shadow: 0 1px 2px var(--shadow);
  padding: 14px 18px;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  display: block;
}

.hh-end-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--warm) 85%, black);
}

[data-theme="midnight"] .hh-end-title { color: #FF9C82; }

.hh-end-sub {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--soft);
  margin-top: 3px;
}

/* Invite flow (SPEC §6.10) */
.hh-footnote { font-size: 13px; color: var(--soft); margin: 10px 4px 0; line-height: 1.45; }
.hh-invite-title { font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.hh-invite-sub { font-size: 13px; font-weight: 400; color: var(--soft); line-height: 1.4; }
.hh-invite-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}
.hh-invite-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.hh-invite-avatar.grey { background: var(--fill); color: var(--soft); box-shadow: none; }
.hh-invite-row.muted .hh-member-name { color: var(--soft); }
.hh-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hh-pill {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.hh-pill.soft { background: var(--accent-soft); color: var(--accent-ink); }
.hh-pill.quiet { background: var(--fill); color: var(--ink); }
.hh-pill.warn { background: color-mix(in srgb, var(--warm) 12%, var(--surface)); color: var(--warm); }
.hh-pill.accent { background: var(--accent); color: #fff; }
.hh-pill:disabled { opacity: .5; }
.hh-role-badge.soft { background: var(--accent-soft); color: var(--accent-ink); }
.hh-role-badge.warm { background: color-mix(in srgb, var(--warm) 14%, var(--surface)); color: var(--warm); }
.hh-mismatch {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--mori) 9%, var(--surface));
  border-radius: 16px;
  padding: 12px 12px;
  margin: 10px 0 4px;
}
.hh-mismatch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mori); flex: none; margin-top: 6px;
}
.hh-mismatch-text { flex: 1; font-size: 13.5px; line-height: 1.5; }
.hh-mismatch-x {
  background: none; border: 0; cursor: pointer; flex: none;
  color: var(--soft); font-size: 17px; line-height: 1; padding: 2px 4px;
}

/* Who's-it-for + link-ready sheet (§6.10 states 2-3) */
.ivs-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 66;
  background: var(--surface);
  border-radius: 30px 30px 0 0;
  /* The keyboard offset (ivsKbApply) rides on the keyboard clock:
     in the shell it is set at willShow, as the keyboard starts
     moving, so the panel tracks it instead of jumping ahead. */
  transition: bottom 300ms cubic-bezier(.32,.72,0,1);
  padding: 10px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto;
  /* Safety cap only: never reached at rest, keeps the panel on screen
     (and internally scrollable) when the keyboard offset lifts it on
     short viewports. */
  max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
}
/* Full-width drag/tap strip for the grip; the pill itself is unchanged.
   (The 2px that used to be the pill's top margin lives here now.) */
.ivs-gripzone { padding: 2px 0 0; cursor: grab; touch-action: none; }
.ivs-grip { width: 38px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 16px; }
.ivs-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.ivs-body { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.ivs-label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--soft); }
.ivs-input {
  width: 100%; min-height: 52px; border-radius: 14px; padding: 0 14px;
  border: 1.5px solid var(--accent); background: var(--surface);
  font-size: 16px; font-family: inherit; color: var(--ink); outline: none;
}
.ivs-help { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--soft); }
.ivs-primary {
  width: 100%; min-height: 54px; margin-top: 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.ivs-primary:disabled { opacity: .5; }
.ivs-primary.danger { background: var(--destructive, #B3261E); }
.ivs-cancel {
  width: 100%; min-height: 48px; margin-top: 8px; border: 0; background: transparent;
  color: var(--soft); font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.ivs-fine { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--soft); line-height: 1.5; }

/* Household name sheet (Rev 16: create + rename share the sheet) */
.hns-labelrow { display: flex; align-items: baseline; justify-content: space-between; }
.hns-labelrow .ivs-label { margin-bottom: 8px; }
.hns-counter { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.hns-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hns-chips[hidden] { display: none; }
.hns-chip {
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 13px;
  cursor: pointer;
}
.hns-error { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--destructive, #B3261E); }
.hns-error[hidden] { display: none; }
/* About Tote sheet (Rev 7 §6.9): wordmark + version + legal rows */
.about-brand { display: flex; justify-content: center; margin-top: 2px; }
.about-brand img { height: 23px; width: auto; display: block; }
.about-version {
  margin: 10px 0 0; text-align: center;
  font-family: var(--font-mono, monospace); font-size: 13px; color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.about-rows { margin-top: 18px; }
.ivs-seats { display: flex; justify-content: center; gap: 14px; margin: 6px 0 16px; }
.ivs-seat {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; overflow: hidden;
}
.ivs-seat img { width: 100%; height: 100%; object-fit: cover; }
.ivs-seat.ring { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.ivs-linkrow { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.ivs-linkrow input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 14px;
  border: 0; border-radius: 14px; background: var(--fill);
  font-family: var(--font-mono, monospace); font-size: 13.5px; color: var(--ink);
  direction: ltr; text-align: left;
}
.ivs-copy {
  min-height: 50px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; font-family: inherit; color: var(--ink); cursor: pointer;
}

/* Stranded notice (Rev 16 decision 10): one-time card at the top of
   the fresh list after someone else deleted your only household. */
.stranded-card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}
.stranded-title { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.stranded-body { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--soft); }
.stranded-btn {
  margin-top: 12px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent-ink);
  cursor: pointer;
}

/* Screen-reader-only (the §6.11 live region). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Welcome card + home-screen tip (§6.10 invitee state 5) */
.welcome-card {
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-card); padding: 20px;
  margin-bottom: 14px; position: relative;
}
.welcome-avatars { display: flex; margin-bottom: 12px; }
.welcome-av {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 2px var(--ink);
}
.welcome-av + .welcome-av { margin-inline-start: -9px; }
/* Absolute fill: see .tb-avatar img (initial fallback is a flex item). */
.welcome-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-card .welcome-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.welcome-card .welcome-body { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; opacity: .82; max-width: 300px; }
.welcome-x {
  position: absolute; top: 12px; inset-inline-end: 12px;
  background: none; border: 0; color: inherit; opacity: .7;
  font-size: 19px; line-height: 1; cursor: pointer; padding: 6px;
}
.home-tip {
  position: fixed; left: 8px; right: 8px; z-index: 35;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 118px);
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
}
.home-tip img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.home-tip-t { flex: 1; min-width: 0; }
.home-tip-title { font-size: 14.5px; font-weight: 600; }
.home-tip-body { font-size: 13px; color: var(--soft); line-height: 1.45; margin-top: 2px; }
.home-tip-x { background: none; border: 0; color: var(--soft); font-size: 17px; cursor: pointer; padding: 2px 4px; line-height: 1; }

/* Demo data (owner-only section) */
.hh-demo-body { font-size: 14px; line-height: 1.45; color: var(--soft); margin: 8px 0 0; }
.hh-demo-status { font-size: 13.5px; font-weight: 500; margin: 10px 0 0; }
.hh-demo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }

/* Segmented control */
.hh-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: var(--fill);
}

.hh-seg.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 14px; padding: 3px; }

.hh-seg-btn {
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  color: var(--soft);
  border: 0;
  cursor: pointer;
}

.hh-seg-btn.sm { height: 40px; border-radius: 11px; font-size: 13.5px; }

.hh-seg-btn.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px var(--shadow);
}

/* Theme swatches */
.hh-themes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hh-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hh-theme-prev {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s ease;
}

.hh-theme-prev.on { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--ink); }

.hh-theme-prev svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hh-theme-name { font-size: 12px; font-weight: 500; color: var(--ink); }
.hh-theme-name.on { font-weight: 700; }

/* Notify toggles */
.hh-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.hh-toggle-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hh-toggle-name { font-size: 15.5px; font-weight: 500; }
.hh-toggle-sub { font-size: 12.5px; color: var(--soft); }

.hh-switch {
  width: 52px;
  height: 32px;
  border-radius: 16px;
  padding: 3px;
  display: flex;
  background: var(--line);
  flex: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hh-switch.on { background: var(--accent); }

.hh-knob {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: transform 0.25s cubic-bezier(.3,1.4,.5,1);
}

/* Catalog links */
.hh-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: start;
  color: var(--ink);
}

.hh-link-shapes { display: flex; gap: 2px; }
.hh-link-name { flex: 1; font-size: 15.5px; font-weight: 500; }
.hh-link-n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.hh-chev { color: var(--soft); flex: none; }
.hh-chev.flip { transform: scaleX(-1); }

.hh-sense { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.hh-sense-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hh-sense-name { font-size: 15.5px; font-weight: 500; }
.hh-sense-hint { font-size: 12.5px; color: var(--soft); }

/* ============ Redesign: Us view ============ */

.us {
  padding: 16px 16px 40px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
}

.us-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.us-back {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

[dir="rtl"] .us-back svg { transform: scaleX(-1); }

.us-gear {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.us-head { padding: 6px 4px 0; }

.us-head h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
}

[dir="rtl"] .us-head h1 { letter-spacing: -0.015em; }

.us-head p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--soft);
}

.us-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px 16px 16px;
  box-shadow: 0 1px 2px var(--shadow);
}

.us-life { margin: 4px 0 0; }
.us-life figcaption { margin-top: 16px; }

.us-mix-row {
  display: grid;
  grid-template-columns: 16px 1fr 70px 42px;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

.us-mix-row .mono {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.us-mix-row .mono:last-child { font-size: 12.5px; }

.us-soft { color: var(--soft); }

.us-note {
  margin: 0 4px;
  font-size: 13px;
  color: var(--soft);
  line-height: 1.45;
}

.us-section {
  margin: 10px 4px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
}

.us-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.us-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.us-tile {
  border-radius: 20px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
}

.us-tile-accent {
  background: var(--accent);
  color: var(--on-accent);
}

.us-bignum {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.us-tile-sub {
  font-size: 12.5px;
  margin-top: 2px;
  line-height: 1.35;
}

.us-tile:not(.us-tile-accent) .us-tile-sub { color: var(--soft); }
.us-tile-accent .us-tile-sub { opacity: 0.85; }

.us-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--fill);
  margin-top: 8px;
  overflow: hidden;
}

.us-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.us-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.us-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-chip);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 500;
}

.us-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

.us-dow span {
  text-align: center;
  font-size: 10.5px;
  color: var(--soft);
}

.us-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.us-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.us-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px;
}

.us-ring-in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.us-feed { padding-top: 6px; padding-bottom: 6px; }

/* Activity timeline */
.us-activity { padding: 4px 0; }
.us-act-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.us-act-row:first-child { border-top: 0; }
.us-act-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.us-act-main {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.us-act-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--soft);
  font-size: 14px;
}
.us-act-more {
  display: block;
  margin: 12px auto 0;
  padding: 10px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.us-act-more:disabled { opacity: 0.5; }

.us-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
}

.us-dots {
  display: flex;
  gap: 3px;
  flex: none;
}

.us-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.us-feed-main {
  flex: 1;
  font-size: 14.5px;
  min-width: 0;
}

.us-feed .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Fix: ensure accent surfaces use solid accent (hardcoded per theme) */
html[data-theme="sage"] .add-all-btn, html[data-theme="sage"] .us-tile-accent,
html[data-theme="sage"] .hh-switch.on {
  background: #1F6B45 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html[data-theme="ocean"] .add-all-btn, html[data-theme="ocean"] .us-tile-accent,
html[data-theme="ocean"] .hh-switch.on {
  background: #1D5FBF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html[data-theme="clay"] .add-all-btn, html[data-theme="clay"] .us-tile-accent,
html[data-theme="clay"] .hh-switch.on {
  background: #B3421E !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html[data-theme="plum"] .add-all-btn, html[data-theme="plum"] .us-tile-accent,
html[data-theme="plum"] .hh-switch.on {
  background: #7B2E9C !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html[data-theme="midnight"] .add-all-btn, html[data-theme="midnight"] .us-tile-accent,
html[data-theme="midnight"] .hh-switch.on {
  background: #FFC24B !important;
  color: #1A1B1E !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}





/* ---- OAuth login ---- */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
  max-width: 320px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: transform 0.1s;
}
.oauth-btn:active { transform: scale(0.98); }
.oauth-apple {
  background: #000;
  color: #fff;
  border-color: #000;
}
.oauth-google {
  background: #fff;
  color: #1f1f1f;
  border-color: #dadce0;
}
[data-theme="midnight"] .oauth-google {
  background: #191B23;
  color: #F2EFE7;
  border-color: rgba(242,239,231,.2);
}

/* ---- Rev 15/16 (§6.11): the household row + switcher popover ---- */
/* One row component, two homes: the Your households card on Household
   and the Plan switcher popover. Min-height 64, avatar slot 52, hairline
   between rows, role chip, 24px check slot at the inline end. */
.hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
  color: var(--ink);
  font-family: inherit;
}
.hrow + .hrow { border-top: 1px solid var(--line); }
.hrow.pressed, .hrow:active { background: var(--fill); }
.hrow.is-disabled { cursor: default; }
.hrow-avs {
  width: 52px;
  flex: none;
  display: flex;
  align-items: center;
}
.hrow .avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--surface);
  overflow: hidden;
  flex: none;
}
/* Absolute fill: see .tb-avatar img (initial fallback is a flex item). */
.hrow .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hrow-avs > * + * { margin-inline-start: -8px; }
.hrow-plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #6B7280;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 0 0 2px var(--surface);
}
.hrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hrow-name {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: start;
}
.hrow.is-active .hrow-name { font-weight: 600; }
.hrow-members {
  font-size: 13px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hrow-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hrow-check.on { background: var(--accent); color: var(--on-accent); }
.hrow-newav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hrow-new .hrow-name { color: var(--accent-ink); font-weight: 500; }

/* The popover: fixed overlay, 12 from the screen's start edge, 6 below
   the anchor, 340 wide at most, radius 22, ink-10% scrim. */
.hhpop-scrim {
  position: fixed;
  inset: 0 0 -50vh 0;
  z-index: 58;
  background: rgb(var(--scrim-rgb) / var(--scrim-max-pop));
}
.hh-popover {
  position: fixed;
  z-index: 59;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 1px 2px var(--shadow), 0 24px 60px rgba(22, 32, 26, .22);
  padding: 14px 8px 8px;
  animation: hhpop-in 180ms cubic-bezier(.22, 1, .36, 1);
  transform-origin: top left;
}
[dir="rtl"] .hh-popover { transform-origin: top right; }
[data-theme="midnight"] .hh-popover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .55);
}
@keyframes hhpop-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.hhpop-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  padding: 0 10px 6px;
}
.hhpop-rows { max-height: 324px; overflow-y: auto; overscroll-behavior: contain; }
.hh-popover .hrow { padding-inline: 10px; border-radius: 14px; }
.hh-popover .hrow + .hrow { border-top: 0; }
.hhpop-rule { height: 1px; background: var(--line); margin: 6px 10px; }
.hhpop-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border: 0;
  background: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  text-align: start;
}
.hhpop-settings:active { background: var(--fill); }

/* The switch landing (§7 motion row): list in 220 ms from 8 below. */
@keyframes hh-switch-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.plan.hh-switch-in { animation: hh-switch-in 220ms cubic-bezier(.22, 1, .36, 1); }
/* Switch placeholders (§6.11 "not cached yet"): soft --fill blocks. */
.hh-skel { padding: 0 16px; }
.hh-skel-head { height: 44px; }
.hh-skel-card { height: 92px; border-radius: var(--r-card); background: var(--fill); margin-bottom: 14px; }
.hh-skel-row { height: 56px; border-radius: 14px; background: var(--fill); margin-bottom: 8px; }
.hh-skel-row.short { width: 62%; }

@media (prefers-reduced-motion: reduce) {
  .hh-popover { animation: hhpop-fade 150ms ease; }
  .plan.hh-switch-in { animation: hhpop-fade 150ms ease; }
  .plan-switcher .plan-hh-down { transition: none; }
}
@keyframes hhpop-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Unit slider (Rev 8 §5.2) ---- */
.uslider { width: 100%; }
.uslider-viewport {
  position: relative;
  height: 48px;
  overflow: hidden;
  outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
  mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
  touch-action: pan-y;
}
.uslider-viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 14px;
}
.uslider-window {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 66px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: var(--ink);
  pointer-events: none;
}
.uslider-strip {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  will-change: transform;
}
.uslider-stop {
  width: 72px;
  flex: none;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  opacity: .62;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uslider-stop.is-sel {
  color: var(--bg);
  opacity: 1;
  font-weight: 600;
}

/* Rev 10 §5.4 + Rev 13 — member photos. The entry is the viewer's own
   Members row: an 18px camera badge (surface circle, 1px --line ring)
   on the 38px avatar's end-bottom corner while they have no photo. */
.hh-cam-badge {
  position: absolute;
  inset-inline-end: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.hh-add-photo { font-size: 13px; font-weight: 500; color: var(--accent-ink); }

.ph-sheet { padding: 2px 20px 14px; display: flex; flex-direction: column; align-items: center; }
.ph-title { margin: 4px 0 14px; font-size: 20px; font-weight: 600; align-self: flex-start; }
.ph-preview {
  position: relative;
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--you); color: var(--you-on);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; overflow: hidden; flex: none;
}
/* Absolute fill: see .tb-avatar img (initial fallback is a flex item). */
.ph-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-body { margin: 14px 0 4px; font-size: 14px; color: var(--soft); text-align: center; }
.ph-alert {
  margin-top: 12px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; color: var(--destructive, #B3261E);
  background: var(--fill); border-radius: 12px; padding: 10px 12px;
}
.ph-try { font: inherit; font-weight: 600; color: var(--accent-ink); background: none; border: 0; cursor: pointer; padding: 0; flex: none; }
.ph-rows { width: 100%; margin-top: 8px; }
.ph-row {
  width: 100%; min-height: 60px;
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; border-top: 1px solid var(--line);
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  padding: 8px 0;
}
.ph-row-ic { width: 28px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--soft); }
.ph-row.warm .ph-row-name { color: var(--destructive, #B3261E); }
.ph-row-text { flex: 1; display: flex; flex-direction: column; }
.ph-row-name { font-size: 15.5px; font-weight: 500; }
.ph-row-sub { font-size: 13px; color: var(--soft); }
.ph-g { font-weight: 700; font-size: 19px; color: var(--soft); }

.ph-frame {
  position: fixed; inset: 0; z-index: 90; background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 14px) 20px calc(env(safe-area-inset-bottom) + 16px);
}
.ph-frame-title { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.ph-frame-stage { position: relative; flex: 1; width: 100%; overflow: hidden; touch-action: none; }
.ph-frame-img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.ph-frame-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  pointer-events: none;
}
.ph-frame-hint { margin: 10px 0 0; font-size: 13.5px; color: rgba(255,255,255,.75); text-align: center; }
.ph-zoom { width: min(340px, 100%); margin-top: 12px; accent-color: #fff; }
.ph-frame-btns { display: flex; gap: 12px; width: 100%; margin-top: 16px; }
.ph-frame-btns button {
  flex: 1; height: 52px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600;
  border: 0; cursor: pointer;
}
.ph-frame-cancel { background: rgba(255,255,255,.14); color: #fff; }
.ph-frame-use { background: #fff; color: #000; }

/* ============ Rev 14: The month in the tote + All activity ============ */

.mn {
  padding: 16px 16px 40px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.mn .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.mn button { font: inherit; color: inherit; }

.mn-topbar { display: flex; align-items: center; justify-content: space-between; }
.mn-back {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
[dir="rtl"] .mn-back svg { transform: scaleX(-1); }

.mn-head { padding: 6px 4px 0; }
.mn-eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--soft);
  text-transform: uppercase;
}
.mn-head h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.04em;
}
[dir="rtl"] .mn-head h1 { letter-spacing: -0.015em; }

/* Hero */
.mn-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 2px;
}
.mn-count-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
}
.mn-count {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}
.mn-came-home { font-size: 16px; color: var(--soft); }
.mn-chips {
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.mn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mn-chip .mono { font-size: 14px; font-weight: 600; }

/* Hero animation (SPEC §6.8 + §7): shapes fall 640ms in front of the
 * handle, vanish behind the front panel; the bag gulps for 2100ms. */
.mn-into {
  animation: mnInto 640ms cubic-bezier(.55, 0, 1, .45) both;
}
@keyframes mnInto {
  0% { transform: translateY(-1500px); opacity: 1; }
  99% { opacity: 1; }
  100% { transform: none; opacity: 0; }
}
.mn-gulp {
  animation: mnGulp 2100ms ease-in-out both;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes mnGulp {
  0%, 100% { transform: none; }
  15%, 35%, 55%, 75% { transform: scale(1.012, .985); }
  25%, 45%, 65%, 85% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-into, .mn-gulp { animation: none; }
  .mn-into { opacity: 0; }
}

/* Empty month */
.mn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0 4px;
}
.mn-empty-mark { width: 200px; }
.mn-empty-mark svg { width: 100%; height: auto; display: block; }
.mn-empty h2 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mn-empty p { margin: 6px 0 0; font-size: 15px; color: var(--soft); line-height: 1.45; }

/* Tiles */
.mn-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mn-tile {
  border-radius: 20px;
  padding: 14px 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
}
.mn-tile-num {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.mn-tile-unit { font-size: 13px; font-weight: 500; color: var(--soft); }
.mn-tile-label {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--soft);
  margin-top: 4px;
}

/* Cards */
.mn-card {
  background: var(--surface);
  border-radius: 28px;
  padding: 18px 14px 8px;
  box-shadow: 0 1px 2px var(--shadow);
}
.mn-card h2 {
  margin: 0 4px 10px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Tote noticed */
.mn-notice-row {
  display: flex;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.mn-notice-marker { padding-top: 3px; flex: none; }
.mn-plain-dot {
  display: block;
  width: 10px;
  height: 10px;
  margin: 3px;
  border-radius: 50%;
  background: var(--soft);
  opacity: .55;
}
.mn-people-dot {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.mn-people-dot span {
  position: absolute;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mn-people-dot span:first-child { inset-inline-start: 0; }
.mn-people-dot span:last-child {
  inset-inline-end: 0;
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* Day by day */
.mn-days { padding-bottom: 6px; }
.mn-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 6px;
}
.mn-dow span { text-align: center; font-size: 10.5px; color: var(--soft); }
.mn-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 6px;
}
.mn-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.mn-day-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  background: transparent;
  color: var(--soft);
}
.mn-day-num.filled { font-weight: 600; }
.mn-day-dots { height: 5px; display: flex; gap: 3px; }
.mn-day-dots i { width: 5px; height: 5px; border-radius: 50%; }
.mn-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--soft);
}
.mn-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mn-legend-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--soft);
  display: inline-block;
}
.mn-legend-dotwrap { width: 12px; display: inline-flex; justify-content: center; }
.mn-legend-dotwrap i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--soft);
}
.mn-role { margin: 14px 0 6px; font-size: 15px; line-height: 1.45; font-weight: 500; }
.mn-person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}
.mn-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mn-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mn-person-name { font-size: 14.5px; font-weight: 500; flex: 1; }
.mn-person-counts { font-size: 13px; color: var(--soft); }
.mn-person-counts b { color: var(--ink); font-weight: 600; }
.mn-tip { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.mn-all-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  margin-top: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
[dir="rtl"] .mn-all-activity svg { transform: scaleX(-1); }

/* Earlier months */
.mn-earlier h2 {
  margin: 0 4px 10px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.mn-earlier-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mn-earlier-row::-webkit-scrollbar { display: none; }
.mn-earlier-tile {
  flex: none;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0 10px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow);
  cursor: pointer;
}
.mn-earlier-name { font-size: 14px; font-weight: 500; }
.mn-earlier-total { font-size: 12.5px; color: var(--soft); margin-top: -4px; }

/* All activity */
.mn-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mn-filters::-webkit-scrollbar { display: none; }
.mn-filter {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
}
.mn-filter.on { background: var(--ink); color: var(--bg); }
.mn-act-card { padding: 4px 14px 6px; }
.mn-act-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--soft);
  padding: 18px 4px 4px;
}
.mn-act-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--line);
}
.mn-act-main { flex: 1; display: flex; flex-direction: column; font-size: 15px; line-height: 1.4; }
.mn-act-main b { font-weight: 600; }
.mn-act-strip { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.mn-act-time {
  font-size: 12px;
  color: var(--soft);
  white-space: nowrap;
  padding-top: 3px;
}
.mn-act-empty { padding: 18px 4px; font-size: 15px; color: var(--soft); }

/* Plan: month-end packed line (Rev 14 §6.1) */
.plan-packed { margin: 6px 0 0; font-size: 15px; color: var(--soft); }
.plan-packed a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  font-weight: 500;
  text-decoration: none;
}