@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,600..700,100&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================
   TOKENS — two palettes, each with light and dark modes. Green
   ("Calm Sage") is the default; orange is the original warm
   terracotta palette. Palette (data-palette) and mode (data-theme)
   are independent per-device choices in Settings (see theme.ts).
   Every palette block must declare the same colour tokens.
   ========================================================== */
:root {
  --bg: #f7f5ef;
  --surface: #ffffff;
  --surface-2: #f1efe7;
  --line: #e5e8e1;
  --ink: #18221e;
  --ink-2: #33433b;
  --ink-muted: #56655d;
  --primary: #4a7a68;
  --primary-hover: #3e6858;
  --on-primary: #ffffff;
  --primary-soft: #e3efe9;
  --on-primary-soft: #2f5446;
  --accent: #f4a261;
  --on-accent: #7a3a0f;
  --accent-soft: #fdeadb;
  --success: #5e9a74;
  --success-soft: #e4f2e8;
  --success-text: #2f5c42;
  --warning: #c98b3c;
  --warning-soft: #fbf0dc;
  --warning-text: #7a5217;
  --danger: #c75d5d;
  --danger-soft: #fbe6e4;
  --danger-text: #8a3030;
  --info-soft: #e3eff7;
  --info-text: #2d5873;
  --shadow-color: rgba(60, 90, 78, 0.12);
  --chrome-shadow: rgba(60, 90, 78, 0.08);
  --scrim: rgba(38, 51, 46, 0.35);
  --focus-ring: rgba(74, 122, 104, 0.35);
  --orb: radial-gradient(circle at 35% 30%, #6e9c8a 0%, var(--primary) 55%, var(--primary-hover) 100%);
  --frame-bg: linear-gradient(180deg, #eef0e8 0%, #f7f5ef 100%);
  /* The logo keeps its light colours in dark mode. */
  --logo-bg: #4a7a68;
  --logo-back: #f4a261;
  --logo-front: #f7f5ef;
  --shadow-lg: 0 16px 40px -12px var(--shadow-color);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ease: 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #121815;
  --surface: #1a221e;
  --surface-2: #222c27;
  --line: #2e3a34;
  --ink: #e6ece8;
  --ink-2: #c0cbc5;
  --ink-muted: #8d9b94;
  --primary: #7db39e;
  --primary-hover: #93c3af;
  --on-primary: #0f1f19;
  --primary-soft: #23362e;
  --on-primary-soft: #b6dccb;
  --accent: #f2a066;
  --on-accent: #f8c9a2;
  --accent-soft: #3a2b21;
  --success: #74b48b;
  --success-soft: #1e3326;
  --success-text: #a6d8b6;
  --warning: #d9a25a;
  --warning-soft: #3a2d18;
  --warning-text: #ebc68f;
  --danger: #d97272;
  --danger-soft: #3b2222;
  --danger-text: #f0a9a9;
  --info-soft: #1d2f3b;
  --info-text: #a9cde3;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --focus-ring: rgba(125, 179, 158, 0.45);
  --orb: radial-gradient(circle at 35% 30%, #93c3af 0%, var(--primary) 55%, #4a7a68 100%);
  --frame-bg: var(--bg);
  color-scheme: dark;
}

:root[data-palette='orange'] {
  --bg: #fbf7f3;
  --surface: #ffffff;
  --surface-2: #f6eee6;
  --line: #eee2d6;
  --ink: #2e241d;
  --ink-2: #5a4a3e;
  --ink-muted: #7a685b;
  --primary: #b5501a;
  --primary-hover: #9c4413;
  --on-primary: #ffffff;
  --primary-soft: #fcebdd;
  --on-primary-soft: #8a3d10;
  --accent: #f6b784;
  --on-accent: #6b3311;
  --accent-soft: #fdf0e4;
  --success: #5e9a74;
  --success-soft: #e4f2e8;
  --success-text: #2f5c42;
  --warning: #b98a2e;
  --warning-soft: #faf1d9;
  --warning-text: #6e5414;
  --danger: #c04b4b;
  --danger-soft: #fbe4e2;
  --danger-text: #8a2e2e;
  --info-soft: #e3eff7;
  --info-text: #2d5873;
  --shadow-color: rgba(110, 60, 25, 0.12);
  --chrome-shadow: rgba(110, 60, 25, 0.08);
  --scrim: rgba(46, 36, 29, 0.35);
  --focus-ring: rgba(194, 87, 26, 0.35);
  --orb: radial-gradient(circle at 35% 30%, #d9773a 0%, var(--primary) 55%, var(--primary-hover) 100%);
  --frame-bg: linear-gradient(180deg, #f5ede5 0%, #fbf7f3 100%);
  --logo-bg: #c2571a;
  --logo-back: #f6b784;
  --logo-front: #fbf7f3;
  color-scheme: light;
}

:root[data-palette='orange'][data-theme='dark'] {
  --bg: #17120f;
  --surface: #211a15;
  --surface-2: #2a211b;
  --line: #3a2e25;
  --ink: #f2e9e2;
  --ink-2: #d3c4b8;
  --ink-muted: #a08e80;
  --primary: #f0904f;
  --primary-hover: #f5a56e;
  --on-primary: #2a1406;
  --primary-soft: #3b2416;
  --on-primary-soft: #f8c9a6;
  --accent: #f2a66b;
  --on-accent: #fad9bf;
  --accent-soft: #352318;
  --success: #74b48b;
  --success-soft: #1e3326;
  --success-text: #a6d8b6;
  --warning: #d9b25a;
  --warning-soft: #3a3018;
  --warning-text: #ebd28f;
  --danger: #e07a7a;
  --danger-soft: #3d2222;
  --danger-text: #f2adad;
  --info-soft: #1d2f3b;
  --info-text: #a9cde3;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --scrim: rgba(0, 0, 0, 0.55);
  --focus-ring: rgba(240, 144, 79, 0.45);
  --orb: radial-gradient(circle at 35% 30%, #f5a56e 0%, var(--primary) 55%, #c2571a 100%);
  --frame-bg: var(--bg);
  color-scheme: dark;
}

/* ==========================================================
   BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-synthesis: none;
}
/* Derive the scroll lock from mounted dialogs so closing or reloading one
   cannot leave a stale inline lock on the page. */
html:has(.conversation-dialog[open]),
body:has(.conversation-dialog[open]) {
  overflow: hidden;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: 22px; line-height: 1.2; }
h2 { font-size: 17px; line-height: 1.25; }
h3 { font-size: 14px; }
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--primary);
  font-weight: 700;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background var(--ease),
    color var(--ease),
    transform var(--ease),
    border-color var(--ease);
}
button:active:not(:disabled) {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.small {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.muted {
  color: var(--ink-muted);
}
.spin {
  animation: spin 800ms linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.primary,
.secondary,
.quiet,
.danger {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
}
.primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 6px 16px -8px var(--primary);
}
.primary:hover:not(:disabled) {
  background: var(--primary-hover);
}
.secondary {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.quiet {
  color: var(--ink-2);
}
.quiet:hover:not(:disabled) {
  background: var(--surface-2);
}
.danger {
  background: var(--danger);
  color: #fff;
}
.wide {
  width: 100%;
}
a.primary,
a.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.small-button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 12.5px;
}
.text-link {
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 2px;
  border-radius: 8px;
}
.text-link:hover:not(:disabled) {
  text-decoration: underline;
}
.chip {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.chip:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--ink);
}
.chip.accent {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  border-color: transparent;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 8px -2px var(--shadow-color);
  position: relative;
  flex-shrink: 0;
}
.icon-btn.sm {
  width: 30px;
  height: 30px;
  box-shadow: none;
  color: var(--ink-muted);
}
.icon-btn.sm:hover:not(:disabled) {
  color: var(--danger-text);
  border-color: var(--danger);
}
.badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  border: 1.5px solid var(--surface);
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.row-actions > button {
  flex: 1 1 auto;
}

/* ==========================================================
   FORMS
   ========================================================== */
form label,
.field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
:where(input:not([type='checkbox'], [type='radio'], [type='file']), select, textarea) {
  width: 100%;
  min-height: 50px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
:where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input::placeholder {
  color: var(--ink-muted);
  font-weight: 500;
}
input[type='checkbox'] {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
}
.list-record-form fieldset,
.sheet-form fieldset,
.sheet-form {
  display: grid;
  gap: 14px;
}
.error,
.form-error,
.auth-error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.error button {
  color: inherit;
  flex-shrink: 0;
}

/* ==========================================================
   BRAND
   ========================================================== */
.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow: 0 4px 10px -6px var(--shadow-color);
  flex-shrink: 0;
}
.wordmark {
  font-family: var(--font-brand);
  font-weight: 650;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 100;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.wordmark b {
  font-weight: 700;
  color: var(--primary);
}
.on-image .wordmark {
  color: #fff;
}
.on-image .wordmark b {
  color: var(--logo-back);
}

/* ==========================================================
   APP SHELL — mobile-first; a calm centred frame on wide screens
   ========================================================== */
.app-shell {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 480px) {
  body {
    background: var(--frame-bg);
  }
  .app-shell {
    box-shadow: 0 0 40px var(--chrome-shadow);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  padding: 2px;
  border-radius: 12px;
}
.brand-top .wordmark {
  font-size: 19px;
}
.topbar-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  border: 1px solid var(--line);
}
.avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.avatar.lg {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
button.avatar {
  box-shadow: 0 2px 8px -2px var(--shadow-color);
}
.page {
  flex: 1;
  padding: 14px 16px calc(120px + env(safe-area-inset-bottom));
  animation: rise 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page-title {
  font-size: 22px;
  margin: 4px 0 14px;
}
.back-link {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.offline-banner {
  margin: 10px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: 12.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bottom navigation with the raised record button */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 100%;
  max-width: 440px;
  display: grid;
  grid-template-columns: 1fr 1fr 68px 1fr 1fr;
  align-items: end;
  padding: 7px 8px calc(9px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px -2px var(--chrome-shadow);
}
.tab {
  flex-direction: column;
  gap: 3px;
  padding: 6px 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
  border-radius: 14px;
  min-width: 0;
}
.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab.active {
  color: var(--primary);
}
.nav-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -26px;
}
.nav-mic-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ==========================================================
   TALK CONTROLS
   ========================================================== */
.talk-button {
  position: relative;
  border-radius: 50%;
  color: var(--on-primary);
  background: var(--orb);
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.talk-button.orb {
  width: 84px;
  height: 84px;
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--primary) 12%, transparent),
    0 0 0 20px color-mix(in srgb, var(--primary) 5%, transparent),
    0 12px 24px -6px var(--shadow-color);
}
.talk-button.orb::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0.6;
  animation: pulseGlow 2.4s ease-out infinite;
}
.talk-button.nav {
  width: 54px;
  height: 54px;
  background: var(--primary);
  box-shadow:
    0 0 0 5px var(--surface),
    0 10px 22px -12px var(--primary);
}
.talk-button.compact {
  width: 48px;
  height: 48px;
}
.talk-button.active {
  background: var(--danger);
  color: #fff;
}
.talk-button.active::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--danger);
  animation: pulseGlow 1.4s ease-out infinite;
}
.talk-button:disabled {
  opacity: 0.55;
}
.message-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 18px;
  box-shadow: 0 2px 10px -2px var(--shadow-color);
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.message-composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.message-composer input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
  font-size: 14px;
}
.message-composer button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  flex-shrink: 0;
}

/* ==========================================================
   HOME
   ========================================================== */
.hm2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 0;
}
.hm2-head {
  position: relative;
  padding: 112px 4px 0;
  isolation: isolate;
}
.hm2-backdrop {
  position: absolute;
  inset: -14px -16px auto;
  height: 210px;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.hm2-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0.9;
}
:root[data-theme='dark'] .hm2-backdrop img {
  opacity: 0.35;
}
.hm2-date {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.hm2-greet {
  margin: 12px 0 8px;
  font-family: var(--font-brand);
  font-variation-settings: 'SOFT' 100;
  font-weight: 650;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
/* Today at a glance: tasks, shopping, month-to-date spending */
.hm2-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow:
    0 14px 30px -24px var(--shadow-color),
    0 1px 0 var(--line);
}
.hm2-glance button {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: start;
  align-content: start;
  min-width: 0;
  padding: 12px 12px 11px;
  border-radius: 16px;
  text-align: left;
  transition: background var(--ease);
}
.hm2-glance button + button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line);
}
.hm2-glance button:hover,
.hm2-glance button:active {
  background: var(--surface-2);
}
.hm2-glance button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}
.hm2-glance .g-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
}
.hm2-glance .g-label svg {
  color: var(--primary);
}
.hm2-glance b {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  font-family: var(--font-brand);
  font-variation-settings: 'SOFT' 100;
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm2-glance small {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm2-glance[aria-busy='true'] b {
  color: var(--ink-muted);
}
/* Header row: whose numbers these are (the household, by name). */
.hm2-glance .g-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 0 2px;
  padding: 6px 8px 9px;
  border-bottom: 1px solid var(--line);
}
.hm2-glance .g-faces {
  display: inline-flex;
  flex: none;
}
.hm2-glance .g-faces i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--on-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.hm2-glance .g-faces i + i {
  margin-left: -7px;
}
.hm2-glance .g-faces i.is-me {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.hm2-glance .g-who {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm2-glance .g-house {
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
/* Each tile names its own time frame, so the three figures read as
   different scopes: this week, pending now, this month. */
.hm2-glance .g-scope {
  max-width: 100%;
  margin-top: 1px;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hm2-glance .g-tasks .g-scope {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.hm2-glance .g-shop .g-scope {
  background: var(--accent-soft);
  color: var(--on-accent);
}
.hm2-glance .g-spend .g-scope {
  background: var(--info-soft);
  color: var(--info-text);
}
.hm2-glance .g-shop .g-label svg {
  color: var(--on-accent);
}
.hm2-glance .g-spend .g-label svg {
  color: var(--info-text);
}
.hm2-glance button > b {
  margin-top: 6px;
}
/* Rupee figures are wider than counts; keep them whole on a phone. */
.hm2-glance .g-spend b {
  font-size: 21px;
  line-height: 1.24;
}
.hm2-glance .g-spend b.is-long {
  font-size: 18px;
}
/* The one personal number on the card. */
.hm2-glance small.g-mine {
  color: var(--primary);
  font-weight: 700;
}
.hm2-talk {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-top: 4px;
}
.hm2-mic-label {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  text-wrap: balance;
}
.hm2-mic-label strong {
  font-family: var(--font-brand);
  font-variation-settings: 'SOFT' 100;
  font-size: 19px;
  font-weight: 650;
  color: var(--ink);
}
.hm2-mic-label span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
}
.hm2-quick {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.hm2-quick button {
  gap: 6px;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.hm2-quick button svg {
  color: var(--primary);
}
.hm-examples {
  width: 100%;
}
.hm-examples summary {
  width: fit-content;
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
}
.hm-examples summary::-webkit-details-marker {
  display: none;
}
.hm-examples[open] summary {
  margin-bottom: 10px;
}
.example-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.example-pill {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
  text-align: center;
}
.example-pill:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.notice {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  text-align: center;
}
.pending-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.pending-banner span {
  flex: 1;
}
.pending-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 29px;
}
.hm2-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 4px;
}
.hm2-recent-head h2 {
  font-size: 15px;
  font-weight: 800;
}
.hm2-recent ul,
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  text-align: left;
  justify-content: flex-start;
  border-radius: 4px;
}
.feed li:first-child .feed-row {
  border-top: 0;
}
button.feed-row:hover {
  background: var(--surface-2);
}
.feed-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.feed-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.feed-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.feed-text small {
  font-size: 12px;
  color: var(--ink-muted);
}
.feed-row time {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   LISTS — tasks, shopping, spending rows
   ========================================================== */
.screen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.screen-toolbar > .primary {
  min-height: 40px;
  padding: 7px 14px;
  font-size: 13px;
  flex: 0 0 auto;
}
.segmented {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.segmented button {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}
.segmented button.selected {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-weight: 750;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.section-label {
  margin: 0 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}
.card-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  margin-bottom: 18px;
}
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-width: 0;
  scroll-margin: 80px;
}
.item-row + .item-row {
  border-top: 1px solid var(--line);
}
.item-row strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.item-row.done strong {
  text-decoration: line-through;
  color: var(--ink-muted);
}
.item-row.done {
  opacity: 0.7;
}
.item-row.not-done strong {
  color: var(--ink-2);
}
.grow {
  flex: 1;
  min-width: 0;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.35;
}
.check {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: transparent;
}
.check:hover:not(:disabled) {
  border-color: var(--primary);
}
.check.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.check.off {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  color: var(--danger-text);
}
.check.static {
  cursor: default;
}
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill.today,
.pill.accent {
  background: var(--accent-soft);
  color: var(--on-accent);
}
.pill.overdue,
.pill.closed-not_completed,
.pill.declined {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.pill.ok,
.pill.closed-completed {
  background: var(--success-soft);
  color: var(--success-text);
}
.pill.pending {
  background: var(--warning-soft);
  color: var(--warning-text);
}
.row-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.row-buttons .chip {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12px;
}
.list-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px 26px;
  text-align: center;
}
.list-empty img {
  width: 180px;
  border-radius: 18px;
  margin-bottom: 8px;
}
.list-empty-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-muted);
}
.list-empty strong {
  font-size: 15px;
  font-weight: 750;
}
.list-empty p {
  max-width: 290px;
  font-size: 13px;
  color: var(--ink-muted);
}
.list-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.list-empty-actions button {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 13px;
}
.list-empty.compact {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 4px 4px 18px;
  text-align: left;
}
.list-empty.compact .list-empty-icon {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  margin: 0;
}
.list-empty.compact strong {
  font-size: 13.5px;
}
.list-empty.compact p {
  max-width: none;
  font-size: 12px;
}
.list-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -6px 0 18px;
  font-size: 12px;
  color: var(--ink-muted);
}
/* ==========================================================
   SPENDING
   ========================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  margin-bottom: 14px;
}
.card.soft {
  background: var(--surface-2);
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.card-head h2 {
  font-size: 14px;
}
.spend-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.spend-amount {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 84px;
  margin: 16px 0 6px;
}
.bar {
  flex: 1;
  min-height: 6px;
  border-radius: 6px 6px 3px 3px;
  background: var(--primary-soft);
  transition: height 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar.is-now {
  background: var(--accent);
}
.chart-labels {
  display: flex;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ink-muted);
}
.chart-labels span {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.chart-labels .is-now {
  font-weight: 750;
  color: var(--on-accent);
}
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.card-actions button {
  flex: 1;
}
.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.balance-row + .balance-row {
  border-top: 1px solid var(--line);
}
.balance-row strong {
  font-size: 13.5px;
}
.balance-amount {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.balance-amount.owe {
  color: var(--danger-text);
}
.balance-amount.owed {
  color: var(--success-text);
}
.tile-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.txn-amount {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item-row.voided .txn-amount,
.item-row.voided strong {
  text-decoration: line-through;
  color: var(--ink-muted);
}
button.item-row {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  border-radius: 0;
}
button.item-row:hover {
  background: var(--surface-2);
}
.detail-list {
  margin: 0 0 6px;
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.detail-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.detail-list dt {
  color: var(--ink-muted);
}
.detail-list dd {
  margin: 0;
  text-align: right;
  font-weight: 650;
  overflow-wrap: anywhere;
}

/* ==========================================================
   SETTINGS & UPDATES
   ========================================================== */
.settings-content {
  display: grid;
  gap: 18px;
}
.settings-group {
  display: grid;
  gap: 8px;
}
.settings-group > h3,
.settings-group-title {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  overflow: hidden;
}
.settings-card + .settings-card {
  margin-top: 0;
}
.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  justify-content: flex-start;
  color: var(--ink);
  min-width: 0;
}
.settings-card > .settings-row + .settings-row,
.settings-card > * + .settings-row {
  border-top: 1px solid var(--line);
}
.settings-row-copy {
  display: grid;
  flex: 1 1 140px;
  gap: 2px;
  min-width: 0;
}
.settings-row-copy strong {
  font-size: 13.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.settings-row-copy span {
  font-size: 11.5px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.settings-icon {
  width: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--on-primary-soft);
  font-weight: 800;
}
button.settings-row:hover:not(:disabled) {
  background: var(--surface-2);
}
.settings-row > svg:last-child {
  color: var(--ink-muted);
  flex-shrink: 0;
}
/* Colour theme picker. Swatches always show their own palette's logo
   colours so each option previews what it selects. */
.palette-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  padding-left: 40px;
}
.palette-option {
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  transition:
    border-color var(--ease),
    background var(--ease);
}
.palette-option:hover {
  background: var(--surface-2);
}
.palette-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.palette-option:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.palette-swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.palette-swatch.is-green {
  background: linear-gradient(135deg, #4a7a68 0 55%, #f4a261 55% 100%);
}
.palette-swatch.is-orange {
  background: linear-gradient(135deg, #c2571a 0 55%, #f6b784 55% 100%);
}
.switch {
  position: relative;
  width: 48px;
  height: 28px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: var(--line);
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform var(--ease);
}
.switch.on {
  background: var(--primary);
}
.switch.on::after {
  transform: translateX(20px);
}
:root[data-theme='dark'] .switch::after {
  background: var(--ink);
}
:root[data-theme='dark'] .switch.on::after {
  background: var(--on-primary);
}
.switch:active:not(:disabled) {
  transform: none;
}
.settings-members summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  list-style: none;
  cursor: pointer;
}
.settings-members summary::-webkit-details-marker {
  display: none;
}
.settings-members summary > svg:last-child {
  color: var(--ink-muted);
  transition: transform var(--ease);
}
.settings-members[open] summary > svg:last-child {
  transform: rotate(180deg);
}
.settings-card > .settings-members {
  border-top: 1px solid var(--line);
}
.settings-member-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 6px;
  border-top: 1px solid var(--line);
}
.settings-member-list li {
  display: grid;
  gap: 10px;
  padding: 10px 0;
}
.settings-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.settings-member-confirm {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
}
.settings-member-list li + li {
  border-top: 1px solid var(--line);
}
.settings-member-list strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.settings-member-list small {
  color: var(--ink-muted);
  font-weight: 600;
}
.settings-invite {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
}
.invite-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-note {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.45;
}
.settings-editor,
.settings-confirm {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.settings-confirm p {
  font-size: 12.5px;
  color: var(--ink-2);
}
.settings-confirm .row-actions {
  margin-top: 0;
}
.settings-signout {
  justify-content: flex-start;
  color: var(--danger-text);
}
.settings-signout .settings-icon {
  color: var(--danger-text);
}
.alexa-copy {
  padding: 13px 14px;
  display: grid;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.alexa-connection {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.alexa-connection p {
  color: var(--ink-muted);
}
.update-list {
  display: grid;
  gap: 8px;
}
.update-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -18px var(--shadow-color);
}
.update-row.pending-update .tile-icon {
  background: var(--warning-soft);
  color: var(--warning-text);
}
.update-row .feed-text strong {
  font-size: 13.5px;
}
.update-row.pending-update {
  flex-wrap: wrap;
}
.pending-update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding-left: 48px;
}

/* ==========================================================
   EMPTY & STATUS SCREENS, LAUNCH, TOAST
   ========================================================== */
.status-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 20px;
  background: var(--bg);
}
.status-screen > div {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 340px;
  text-align: center;
}
.status-screen img {
  width: 190px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.status-screen h1 {
  font-size: 21px;
}
.status-screen p {
  color: var(--ink-muted);
  font-size: 13.5px;
  margin-bottom: 10px;
}
.launch {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg);
}
.launch-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 22px;
  box-shadow: 0 14px 30px -14px var(--shadow-color);
  animation: launchMark 600ms ease-out both;
}
.launch .wordmark {
  display: block;
  margin-top: 18px;
  font-size: 30px;
}
.launch-tag {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 13.5px;
}
@keyframes launchMark {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100% - 32px));
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 600;
  animation: toastPop 220ms ease;
}
@keyframes toastPop {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================
   SIGNED-OUT, SET UP AND ONBOARDING
   ========================================================== */
.auth-page {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.auth-page.centered {
  justify-content: center;
}
.intro-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.intro-brand .brand-logo {
  width: 30px;
  height: 30px;
}
.intro-brand .wordmark {
  font-size: 20px;
}
.intro-hero {
  position: relative;
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px -14px var(--shadow-color);
  animation: rise 500ms ease-out both;
}
.intro-hero img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 27px;
}
:root[data-theme='dark'] .intro-hero img,
:root[data-theme='dark'] .hm2-backdrop img {
  filter: brightness(0.88);
}
.intro-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -10px var(--shadow-color);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
  animation: introBob 3.6s ease-in-out infinite;
}
.intro-float i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.intro-float.f1 { top: 14px; left: -6px; }
.intro-float.f2 { top: 46%; right: -8px; animation-delay: 400ms; }
.intro-float.f3 { bottom: -14px; left: 22px; animation-delay: 800ms; }
@keyframes introBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.intro-copy {
  margin-top: 6px;
}
.intro-copy h1 {
  font-size: 27px;
  line-height: 1.12;
  margin-bottom: 6px;
}
.intro-copy p,
.auth-lead {
  color: var(--ink-muted);
  font-size: 14px;
}
.intro-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.intro-features li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.intro-features li > span:last-child {
  display: grid;
  gap: 1px;
}
.intro-features strong {
  font-size: 13.5px;
}
.intro-features small {
  font-size: 12px;
  color: var(--ink-muted);
}
.auth-actions {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.auth-actions .primary {
  min-height: 52px;
  font-size: 15px;
}
.auth-fine {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.auth-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.phone-head {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.phone-head-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  margin-bottom: 4px;
}
.phone-head h1 {
  font-size: 25px;
  line-height: 1.15;
}
.phone-head p {
  font-size: 13.5px;
  color: var(--ink-muted);
}
.phone-head p strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  padding: 18px 16px;
}
.phone-login {
  display: grid;
  gap: 16px;
  justify-items: stretch;
}
.phone-login > .auth-back {
  justify-self: start;
}
.phone-login form {
  display: grid;
  gap: 10px;
}
.phone-login label {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.phone-input {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.phone-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.phone-cc {
  display: grid;
  place-items: center;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.phone-input input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.otp-field {
  position: relative;
}
.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}
.otp-boxes span {
  aspect-ratio: 5 / 6;
  max-height: 60px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.otp-field:focus-within .otp-boxes span.current {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.otp-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  opacity: 0;
  border: 0 !important;
  caret-color: transparent;
  font-size: 16px !important;
}
.otp-resend {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.otp-resend button {
  color: var(--primary);
  font-weight: 700;
  padding: 2px 4px;
}
.phone-login .small a {
  font-weight: 650;
}
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.setup-head {
  display: grid;
  gap: 8px;
}
.setup-art {
  width: 120px;
  border-radius: 18px;
  margin-bottom: 2px;
}
.setup-head h1 {
  font-size: 24px;
  line-height: 1.15;
}
.setup-head p {
  color: var(--ink-muted);
  font-size: 13.5px;
}
.setup-head p strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.setup-form {
  display: grid;
  gap: 14px;
}
.code-input {
  text-transform: uppercase;
  font-weight: 800 !important;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.code-input::placeholder {
  letter-spacing: normal;
  text-transform: none;
}
.field-optional {
  font-weight: 500;
  color: var(--ink-muted);
}
.field-help {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: -8px;
}
.setup-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 12.5px;
  font-weight: 650;
}
.setup-submit {
  min-height: 52px;
}
.steps {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
}
.steps i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
}
.steps i.on {
  background: var(--primary);
}
.onboard-step-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 18px 18px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  animation: rise 300ms ease-out both;
}
.onboard-step-badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.onboard-step-img {
  width: 200px;
  border-radius: 18px;
}
.onboard-step-title {
  font-size: 20px;
}
.onboard-step-desc {
  font-size: 13.5px;
  color: var(--ink-muted);
}
.onboard-feature-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.onboard-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink-2);
}
.pwa-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.pwa-callout strong {
  display: block;
  font-size: 13px;
}
.pwa-callout p {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
}
.pwa-callout p svg {
  display: inline-block;
  vertical-align: -2px;
}
.pwa-callout .small-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
.account-sign-in {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.account-sign-in > strong {
  font-size: 13px;
}
.alexa-link-card {
  display: grid;
  gap: 14px;
}
.alexa-link-card p {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ==========================================================
   SHEETS (dialogs) — bottom sheet on every screen size
   ========================================================== */
.conversation-dialog {
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top));
  margin: auto auto 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.conversation-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: sheetUp 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.conversation-dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes sheetUp {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sheet-handle {
  width: 40px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 99px;
  background: var(--line);
  flex-shrink: 0;
}
.conversation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 10px;
  flex-shrink: 0;
}
.conversation-heading h2 {
  font-size: 17px;
}
.conversation-heading h2:focus {
  outline: none;
}
.dialog-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  flex-shrink: 0;
}
.conversation-body {
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 18px 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.conversation-body > p {
  font-size: 14px;
  color: var(--ink);
}
.task-outcomes {
  display: grid;
  gap: 8px;
}
.task-outcome {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--surface);
}
.task-outcome > span:last-child {
  display: grid;
  gap: 2px;
}
.task-outcome strong {
  font-size: 14px;
}
.task-outcome small {
  font-size: 12px;
  color: var(--ink-muted);
}
.task-outcome-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.task-outcome.is-done .task-outcome-icon {
  background: var(--primary);
  color: var(--on-primary);
}
.task-outcome.is-done:hover:not(:disabled) {
  border-color: var(--primary);
}
.task-outcome.is-not .task-outcome-icon {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.task-outcome.is-not:hover:not(:disabled) {
  border-color: var(--danger);
}
.amount-input {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips .chip.selected {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  border-color: transparent;
}

/* Conversation: listening, replies, history and help */
.listening-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  text-align: center;
}
.voice-orb {
  width: 104px;
  height: 104px;
  margin: 10px auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orb);
  color: var(--on-primary);
  position: relative;
}
.voice-orb.moving {
  animation: orbPulse 2s ease-in-out infinite;
}
.voice-orb.moving::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulseGlow 2s ease-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
}
.voice-wave span {
  width: 4px;
  border-radius: 99px;
  background: var(--primary);
}
.voice-wave.moving span {
  animation: voiceWave 0.8s ease-in-out infinite alternate;
}
@keyframes voiceWave {
  to { transform: scaleY(0.4); }
}
.voice-status {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.live-transcript {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  min-height: 56px;
  overflow-wrap: anywhere;
}
.original-transcript {
  color: var(--ink-muted);
  font-size: 13px;
}
.original-transcript summary {
  cursor: pointer;
  font-weight: 650;
}
.original-transcript p {
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.reply-content {
  display: grid;
  gap: 10px;
  font-size: 15px;
}
.clarification {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.source-links button {
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 12px;
  font-weight: 700;
}
.reply-controls {
  display: grid;
  gap: 6px;
}
.reply-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reply-controls > .small {
  text-align: center;
  font-size: 11px;
}
.conversation-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
}
.conversation-audio .quiet {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-muted);
}
.conversation-audio > p {
  width: 100%;
  text-align: center;
}
.completion {
  display: grid;
  gap: 12px;
}
.completion > p {
  font-size: 13.5px;
  color: var(--ink-2);
}
.history-content,
.help-content {
  display: grid;
  gap: 4px;
}
.help-content > p:first-child {
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.history-row,
.example-row {
  width: 100%;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
  color: var(--ink);
}
.history-row {
  flex-wrap: wrap;
}
.history-row > span {
  flex: 1;
  min-width: 60%;
  overflow-wrap: anywhere;
}
.history-row strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary);
}
.history-row small {
  color: var(--ink-muted);
  text-transform: capitalize;
}
.example-row svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* Proposal review */
.review {
  display: grid;
  gap: 12px;
}
.review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.review-heading .small {
  font-size: 12px;
}
.review-content {
  display: grid;
  gap: 10px;
}
.proposal-summary,
.proposal {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: grid;
  gap: 10px;
}
.proposal-summary.excluded {
  opacity: 0.55;
}
.summary-kind,
.proposal-top {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.proposal-top label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.summary-amount {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.proposal-summary h3 {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.proposal-summary dl {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.proposal-summary dl:empty {
  display: none;
}
.proposal-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
.proposal-summary dt {
  color: var(--ink-muted);
}
.proposal-summary dd {
  margin: 0;
  text-align: right;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.uncertain {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--warning-text);
  font-size: 12.5px;
}
.uncertain label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.split-editor {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.split-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.split-total {
  font-size: 12px;
  font-weight: 700;
}
.split-total.valid {
  color: var(--success-text);
}
.split-total.invalid,
.split-error {
  color: var(--danger-text);
  font-size: 12px;
}
.split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  align-items: center;
  gap: 8px;
}
.split-row input {
  min-height: 40px !important;
  padding: 8px 10px !important;
}
.split-row > span:last-child {
  font-size: 11px;
  color: var(--ink-muted);
}
.review .review-actions {
  position: sticky;
  bottom: -22px;
  z-index: 1;
  margin: 0;
  padding: 14px 0 22px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex-direction: row-reverse;
}
.review-actions button {
  flex: 1;
  min-height: 50px;
}
.review.processing .review-content,
.review.processing .review-actions {
  display: none;
}
.saved {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success-text);
  font-weight: 700;
}
.receipt-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 12px;
}
.receipt-dialog {
  display: grid;
  gap: 12px;
}
.receipt-dialog input[type='file'] {
  max-width: 100%;
  font-size: 13px;
}

@media (max-width: 380px) {
  .page {
    padding-inline: 12px;
  }
  .bottom-nav {
    grid-template-columns: 1fr 1fr 60px 1fr 1fr;
  }
  .tab {
    font-size: 10px;
  }
  .two-fields {
    grid-template-columns: 1fr;
  }
  .hm2-greet {
    font-size: 26px;
  }
  .hm2-glance {
    padding: 4px;
  }
  .hm2-glance button {
    padding: 10px 7px;
  }
  .hm2-glance b {
    font-size: 20px;
  }
  .hm2-glance small {
    white-space: normal;
  }
  .hm2-glance .g-scope {
    padding: 2px 5px;
    font-size: 9px;
    letter-spacing: 0.03em;
  }
}
.sb-form-group:has(#sb-desc)::after {
  content: "We collect your name and email address so we can follow up on this report.";
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--sb-text-secondary, #64748b);
  text-align: left;
}
/* Shakebug's annotate bar hides Cancel and Next on a narrow screen, and the row cannot scroll. */
.sb-annotator .sb-toolbar-wrapper {
  container-type: inline-size;
}
@container (max-width: 720px) {
  .sb-annotator .sb-toolbar-main {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .sb-annotator .sb-toolbar {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }
  .sb-annotator .sb-toolbar-actions {
    flex: 1 0 100%;
    justify-content: stretch;
  }
  .sb-annotator .sb-toolbar-actions .sb-btn {
    flex: 1 1 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.invitation-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
}
.invitation-card > .chip { justify-self: start; }
.invitation-card .invite-code-row input { min-width: 0; flex: 1; }
.invite-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.invite-revoke-confirm { display: grid; gap: 10px; }
/* Prototype parity: auth screens. Loaded after style.css, so equal-specificity rules here win. */

/* ==========================================================
   SHARED — entrance motion, back button, text buttons, errors
   ========================================================== */
@keyframes authUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes authFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes authPop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-back {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.auth-page > .auth-back {
  align-self: flex-start;
}

.text-btn {
  display: inline;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--primary-hover);
  font: inherit;
  font-weight: 700;
}
.text-btn:hover:not(:disabled) {
  text-decoration: underline;
}
.text-btn:active:not(:disabled) {
  transform: none;
}

.auth-error {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.auth-fine {
  line-height: 1.45;
  text-wrap: pretty;
}
.auth-fine svg {
  display: inline;
  vertical-align: -2px;
}

/* Busy labels: spinner beside the text, like the prototype's loading buttons. */
.setup-submit {
  min-height: 52px;
  gap: 10px;
}
.setup-submit:disabled {
  opacity: 0.5;
  box-shadow: none;
}

/* ==========================================================
   WELCOME — staggered entrance
   ========================================================== */
.intro-hero {
  animation: authFade 500ms ease-out both;
}
.intro-hero img {
  display: block;
}
.intro-float {
  color: var(--ink);
  opacity: 0;
  animation:
    authPop 400ms ease-out forwards,
    introBob 3.6s ease-in-out infinite;
}
.intro-float i {
  font-style: normal;
}
.intro-float.f1 { animation-delay: 350ms, 750ms; }
.intro-float.f2 { animation-delay: 550ms, 950ms; }
.intro-float.f3 { animation-delay: 750ms, 1150ms; }
.intro-copy {
  animation: authUp 450ms ease-out 200ms both;
}
.intro-copy h1 {
  text-wrap: balance;
}
.intro-copy p {
  line-height: 1.45;
}
.intro-features li {
  min-width: 0;
  animation: authUp 400ms ease-out both;
  animation-delay: calc(350ms + var(--i, 0) * 90ms);
}
.intro-features li > span:last-child {
  min-width: 0;
}
.intro-features small {
  line-height: 1.35;
}
.intro-feature-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.intro-actions {
  animation: authUp 400ms ease-out 750ms both;
}
.intro-actions .primary,
.onboard-actions .primary {
  gap: 8px;
}

/* ==========================================================
   PHONE NUMBER + SMS CODE
   ========================================================== */
.phone-login.is-page {
  gap: 16px;
}
.phone-head {
  margin-top: 8px;
}
.phone-head h1 {
  text-wrap: balance;
}
.phone-head p {
  line-height: 1.5;
}
.phone-form {
  display: grid;
  gap: 10px;
}
.phone-login .auth-card {
  padding: 18px 16px;
  animation: authUp 400ms ease-out 100ms both;
}
.field-label-row {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.phone-input.invalid,
.phone-input.invalid:focus-within {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.phone-input.invalid .phone-cc {
  border-right-color: var(--danger);
}
.phone-cc {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.phone-input input {
  padding: 0 14px;
  color: var(--ink);
}
.field-help-line {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: -2px;
}
.phone-form .setup-submit {
  margin-top: 6px;
}
.phone-form .auth-fine a,
.phone-form .small a {
  font-weight: 650;
}
.otp-sent {
  font-size: 13px;
  color: var(--ink-muted);
}
.otp-sent strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Six separate code boxes (style.css drew a single hidden input). */
.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  pointer-events: auto;
}
.otp-digit {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 5 / 6;
  max-height: 60px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  outline: none;
  caret-color: var(--primary-hover);
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}
.otp-digit:focus {
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.otp-boxes.invalid .otp-digit {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.otp-digit:disabled {
  opacity: 0.6;
}
.otp-resend {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.otp-resend b {
  color: var(--ink);
}
.otp-resend .text-btn {
  color: var(--primary-hover);
  font-weight: 700;
  padding: 2px 4px;
}

/* ==========================================================
   SET UP / ACCEPT INVITE
   ========================================================== */
.setup-head {
  animation: authUp 400ms ease-out both;
}
.setup-art {
  height: auto;
}
:root[data-theme='dark'] .setup-art {
  filter: brightness(0.82);
}
.setup-head p {
  font-size: 13px;
  line-height: 1.5;
}
.setup-form {
  gap: 14px;
  padding: 18px 16px;
  animation: authUp 400ms ease-out 100ms both;
}
.setup-form .field {
  gap: 6px;
}
.setup-form .field-label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.setup-form .field-help {
  margin-top: 0;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-muted);
}
.setup-form .field-error {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--danger-text);
}
.setup-form .field.invalid input,
.setup-form .field.invalid input:focus-visible {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.setup-mode {
  margin-top: 2px;
}
.setup-mode-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--on-primary-soft);
}
.setup-mode p {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}
.auth-quiet {
  color: var(--ink-muted);
  font-size: 13px;
}

/* ==========================================================
   INTRO STEPS 1–3
   ========================================================== */
.onboard-page .steps {
  margin: 12px 0 0;
}
.onboard-step-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 22px 18px 18px;
  border-radius: var(--radius-lg);
}
.onboard-step-badge {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 3px 8px;
  letter-spacing: 0.08em;
}
.onboard-step-img {
  width: 170px;
  height: 140px;
  object-fit: contain;
  border-radius: 0;
  margin: 10px auto 14px;
}
.onboard-step-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.onboard-step-title:focus {
  outline: none;
}
.onboard-step-desc {
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
}
.onboard-feature-pills {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.onboard-feature-pill {
  max-width: 100%;
  padding: 4px 10px;
  font-size: 11px;
  text-wrap: pretty;
}
.onboard-actions {
  display: grid;
  gap: 6px;
}
.onboard-skip {
  font-size: 12.5px;
}

/* ==========================================================
   LAUNCH + STATUS SCREENS
   ========================================================== */
.launch .wordmark {
  animation: authUp 500ms ease-out 200ms both;
}
.launch-tag {
  animation: authUp 500ms ease-out 350ms both;
}
.status-screen > div {
  display: block;
  padding: 32px 16px;
}
.status-screen .status-art {
  width: auto;
  border-radius: 0;
  max-width: 180px;
  margin: 0 auto 14px;
}
.status-screen h1 {
  font-size: 20px;
  margin-bottom: 4px;
}
.status-screen p {
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.status-actions {
  display: grid;
  justify-items: center;
  gap: 8px;
}

/* ==========================================================
   REDUCED MOTION — no delayed reveals or bobbing badges
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .intro-hero,
  .intro-float,
  .intro-copy,
  .intro-features li,
  .intro-actions,
  .phone-login .auth-card,
  .setup-head,
  .setup-form,
  .onboard-step-card,
  .launch-mark,
  .launch .wordmark,
  .launch-tag {
    animation: none !important;
  }
  .intro-float {
    opacity: 1;
  }
}
/* Prototype parity: home screens. Loaded after style.css, so equal-specificity rules here win.
   Covers Home ("Calm Home"), the top bar and bottom nav, the talk-or-type
   conversation sheet with proposal review, and Updates. Colours come from the
   palette tokens in style.css, so both palettes and dark mode follow. */

/* ==========================================================
   CALM TOKENS — derived from the palette so orange and dark follow
   ========================================================== */
:root {
  --calm-mist: color-mix(in srgb, var(--primary-soft) 55%, var(--bg));
  --calm-peach: color-mix(in srgb, var(--accent-soft) 70%, var(--bg));
  --calm-card: color-mix(in srgb, var(--surface) 78%, transparent);
  --calm-edge: color-mix(in srgb, var(--primary) 9%, transparent);
  --calm-shadow:
    0 1px 2px color-mix(in srgb, var(--on-primary-soft) 5%, transparent),
    0 12px 32px -18px color-mix(in srgb, var(--on-primary-soft) 26%, transparent);
  --calm-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
:root[data-theme='dark'] {
  --calm-mist: color-mix(in srgb, var(--primary-soft) 35%, var(--bg));
  --calm-peach: color-mix(in srgb, var(--accent-soft) 45%, var(--bg));
  --calm-card: color-mix(in srgb, var(--surface) 82%, transparent);
  --calm-edge: color-mix(in srgb, var(--primary) 9%, transparent);
  --calm-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 14px 30px -18px rgba(0, 0, 0, 0.6);
}

/* ==========================================================
   HOME
   ========================================================== */
/* Soft wash behind the whole Home page */
.page:has(> .hm2) {
  background:
    radial-gradient(120% 60% at 100% 0%, var(--calm-peach) 0%, transparent 60%),
    linear-gradient(180deg, var(--calm-mist) 0%, var(--bg) 46%);
}
.hm2 {
  gap: 22px;
  padding-bottom: 32px;
}

/* Greeting over the living-room illustration (2:1), soft top edge under the
   top bar and a long fade into the page at the bottom. */
.hm2-head {
  padding-top: calc(100vw * 0.33);
}
@media (min-width: 440px) {
  .hm2-head {
    padding-top: 146px;
  }
}
.hm2-backdrop {
  inset: -12px -16px auto;
  height: auto;
  aspect-ratio: 2 / 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 52%, transparent 96%);
}
@media (max-width: 380px) {
  /* .page uses 12px side padding here */
  .hm2-backdrop {
    inset: -12px -12px auto;
  }
}
.hm2-backdrop img {
  object-position: 50% 0;
  opacity: 0.82;
  filter: saturate(0.85);
}
:root[data-theme='dark'] .hm2-backdrop img {
  opacity: 0.4;
  filter: saturate(0.85) brightness(0.88);
}
.hm2-date {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hm2-greet {
  margin: 6px 0 18px;
  font-size: 29px;
  font-weight: 520;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* At a glance: one frosted card, three quiet columns */
.hm2-glance {
  gap: 0;
  margin-top: 0;
  padding: 6px;
  border: 1px solid var(--calm-edge);
  border-radius: 24px;
  background: var(--calm-card);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--calm-shadow);
}
.hm2-glance button {
  gap: 2px;
  padding: 12px;
  border-radius: 18px;
  transition:
    background 320ms var(--calm-ease),
    transform 320ms var(--calm-ease);
}
.hm2-glance button + button::before {
  top: 22%;
  bottom: 22%;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}
.hm2-glance button:hover {
  background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}
.hm2-glance button:active {
  background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}
.hm2-glance .g-label {
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 650;
}
.hm2-glance .g-label svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.hm2-glance .g-shop .g-label svg {
  background: var(--accent-soft);
  color: var(--on-accent);
}
.hm2-glance .g-spend .g-label svg {
  background: var(--info-soft);
  color: var(--info-text);
}
.hm2-glance b {
  font-size: 27px;
  font-weight: 520;
  line-height: 1.05;
  transition: color 400ms var(--calm-ease);
}
.hm2-glance button > b {
  margin-top: 0;
}
/* Rupee figures stay whole on a phone (see style.css: 21px, 18px when long). */
.hm2-glance .g-spend b {
  line-height: 1.32;
}
.hm2-glance small {
  font-size: 11.5px;
  font-weight: 550;
}
.hm2-glance small.g-mine {
  font-weight: 700;
}

/* Talk or type: a soft, airy card */
.hm2-talk {
  justify-items: stretch;
  gap: 14px;
  padding: 22px 16px 16px;
  border: 1px solid var(--calm-edge);
  border-radius: 26px;
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--primary-soft) 90%, transparent) 0%, transparent 70%),
    radial-gradient(80% 80% at 100% 100%, var(--calm-peach) 0%, transparent 70%),
    var(--surface);
  box-shadow: var(--calm-shadow);
  text-align: center;
}
.hm2-mic-label {
  gap: 4px;
}
.hm2-mic-label strong {
  font-size: 20px;
  font-weight: 540;
  line-height: 1.2;
}
.hm2-mic-label span {
  font-size: 13px;
}
.hm2-talk .message-composer {
  border: 1px solid var(--calm-edge);
  background: var(--surface);
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--on-primary-soft) 30%, transparent);
  transition:
    box-shadow 320ms var(--calm-ease),
    border-color 320ms var(--calm-ease);
}
.hm2-talk .message-composer:focus-within {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--on-primary-soft) 35%, transparent);
}
.hm2-talk .message-composer input {
  font-size: 13.5px;
}

/* Quick add: three bordered tiles */
.hm2-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hm2-quick button {
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--calm-edge);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
  transition:
    background 320ms var(--calm-ease),
    transform 320ms var(--calm-ease),
    box-shadow 320ms var(--calm-ease);
}
.hm2-quick button:hover {
  background: var(--surface);
  box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--on-primary-soft) 40%, transparent);
}
.hm2-quick button svg {
  flex: none;
  color: var(--primary);
}
.hm-examples summary {
  opacity: 0.85;
}

/* Recent: one quiet card, type-tinted icons */
.hm2-recent-head {
  align-items: center;
  padding: 0 4px;
  margin-bottom: 10px;
}
.hm2-recent-head h2 {
  font-family: var(--font-brand);
  font-variation-settings: 'SOFT' 100;
  font-weight: 560;
  font-size: 17px;
}
.hm2-recent-head .text-link {
  font-size: 12.5px;
  font-weight: 650;
}
.hm2-recent ul {
  padding: 4px 14px;
  border: 1px solid var(--calm-edge);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--calm-shadow);
}
.hm2-recent li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.hm2-row {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  padding: 13px 2px;
  border-radius: 6px;
  text-align: left;
  transition: opacity 240ms var(--calm-ease);
}
.hm2-row:active:not(:disabled) {
  opacity: 0.6;
  transform: none;
}
.hm2-row:focus-visible {
  outline-offset: 0;
}
.hm2-ic {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.hm2-ic.task {
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.hm2-ic.shop {
  background: var(--accent-soft);
  color: var(--on-accent);
}
.hm2-ic.spend {
  background: var(--info-soft);
  color: var(--info-text);
}
.hm2-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hm2-txt strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm2-txt small,
.hm2-row time {
  font-size: 11.5px;
  color: var(--ink-muted);
}
.hm2-row time {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hm2-recent-empty {
  padding: 16px;
  border: 1px solid var(--calm-edge);
  border-radius: 22px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
}

/* Sections drift in gently, one after another */
@keyframes calmIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hm2 > *,
.hm2-glance button {
  animation: calmIn 640ms var(--calm-ease) backwards;
}
.hm2 > :nth-child(2) {
  animation-delay: 90ms;
}
.hm2 > :nth-child(3) {
  animation-delay: 180ms;
}
.hm2 > :nth-child(4) {
  animation-delay: 240ms;
}
.hm2-glance button:nth-child(1) {
  animation-delay: 120ms;
}
.hm2-glance button:nth-child(2) {
  animation-delay: 180ms;
}
.hm2-glance button:nth-child(3) {
  animation-delay: 240ms;
}
@media (prefers-reduced-motion: reduce) {
  .hm2 > *,
  .hm2-glance button {
    animation: none !important;
  }
}
/* style.css narrows these on small phones; keep that after the overrides above. */
@media (max-width: 380px) {
  .hm2-greet {
    font-size: 26px;
  }
  .hm2-glance {
    padding: 4px;
  }
  .hm2-glance button {
    padding: 10px 7px;
  }
  .hm2-glance b {
    font-size: 20px;
  }
}

/* ==========================================================
   TOP BAR & BOTTOM NAV
   ========================================================== */
.topbar {
  min-height: calc(54px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.top-actions {
  gap: 6px;
}
.icon-btn,
button.avatar {
  transition:
    transform var(--ease),
    background var(--ease);
}
.topbar .icon-btn:active:not(:disabled),
.topbar button.avatar:active:not(:disabled) {
  transform: scale(0.92);
}
.icon-btn .badge-dot {
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.bottom-nav {
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  align-items: center;
}
@media (max-width: 380px) {
  .bottom-nav {
    grid-template-columns: 1fr 1fr 60px 1fr 1fr;
  }
}
.tab {
  transition:
    color var(--ease),
    transform var(--ease);
}
.tab:active:not(:disabled) {
  transform: scale(0.92);
}
.nav-mic-wrap {
  margin-top: -24px;
}
.talk-button.nav {
  width: 52px;
  height: 52px;
  box-shadow:
    0 0 0 5px var(--surface),
    0 10px 22px -14px var(--primary);
}
.nav-mic-label {
  margin-top: 3px;
  font-size: 10px;
}

/* ==========================================================
   TALK OR TYPE — conversation sheet
   ========================================================== */
.convo-lead {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.convo-idle {
  display: grid;
  gap: 12px;
}
.convo-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.convo-examples .example-pill {
  white-space: normal;
  text-align: left;
  font-size: 11.5px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 4%, transparent);
}
.convo-heard {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Listening and thinking */
.listening-state.convo-listening,
.listening-state.convo-thinking {
  gap: 12px;
  padding: 6px 0 0;
}
.convo-pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 12.5px;
  font-weight: 750;
}
.convo-wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
}
.convo-wave i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleY(0.35);
  transform-origin: center;
}
.convo-wave.moving i {
  animation: convoBar 900ms ease-in-out infinite;
}
.convo-wave.moving i:nth-child(2n) {
  animation-delay: 120ms;
}
.convo-wave.moving i:nth-child(3n) {
  animation-delay: 240ms;
}
.convo-wave.moving i:nth-child(4n) {
  animation-delay: 360ms;
}
@keyframes convoBar {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}
.convo-transcript {
  max-width: 30ch;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.3;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.convo-transcript.has-words {
  color: var(--ink);
}
.convo-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.convo-hint b {
  color: var(--ink-2);
}
.convo-cancel {
  font-size: 13px;
  color: var(--ink-muted);
}
.convo-spinner {
  margin: 10px 0 2px;
  color: var(--primary);
}

/* Type bar above one large hold-to-talk mic that never moves */
.reply-controls {
  gap: 14px;
}
.talk-button.dock {
  width: 64px;
  height: 64px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--primary) 14%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--on-primary-soft) 55%, transparent);
}
.talk-button.dock.active {
  background: var(--primary-hover);
  color: var(--on-primary);
}
.talk-button.dock.active::after {
  inset: -10px;
  border: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  animation: convoRing 1.6s ease-out infinite;
}
@keyframes convoRing {
  from {
    transform: scale(0.92);
    opacity: 0.9;
  }
  to {
    transform: scale(1.12);
    opacity: 0;
  }
}
.convo-dock {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 4px;
}
.convo-foot {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}
.talk-button.dock.active + .convo-foot {
  color: var(--primary);
  font-weight: 700;
}

/* Microphone blocked or missing */
.convo-mic-help {
  display: grid;
  gap: 12px;
}
.convo-alert {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--danger-soft);
  color: var(--danger-text);
}
.convo-alert-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.convo-alert strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14.5px;
}
.convo-alert p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--danger-text);
}
.convo-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.convo-steps b {
  color: var(--ink);
}

/* ==========================================================
   REVIEW — check before adding
   ========================================================== */
.review-heading {
  align-items: flex-start;
}
.review-heading .convo-lead {
  flex: 1;
  padding-top: 4px;
}
.review-heading .text-link {
  flex: none;
}
.convo-ops {
  display: grid;
  gap: 8px;
}
.convo-op.proposal-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.convo-op.proposal-summary.excluded {
  opacity: 1;
  border-style: dashed;
}
.convo-op.excluded .convo-op-icon,
.convo-op.excluded .convo-op-body {
  opacity: 0.55;
}
.convo-op.excluded .convo-op-title {
  text-decoration: line-through;
}
.convo-op-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.convo-op-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.convo-op-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.proposal-summary .convo-op-title {
  padding: 2px 0;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.convo-op-meta {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.convo-op-note {
  font-size: 11.5px;
  color: var(--ink-muted);
}
.convo-op .uncertain {
  margin-top: 6px;
}
.icon-btn.convo-op-remove {
  width: 30px;
  height: 30px;
  flex: none;
  box-shadow: none;
  color: var(--ink-muted);
}
.convo-empty {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
/* Reject (ghost) and a wider Confirm */
.review .review-actions.convo-actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
}
.review.processing .review-actions.convo-actions {
  display: none;
}
.convo-actions .convo-reject {
  color: var(--ink-2);
}

/* ==========================================================
   UPDATES
   ========================================================== */
.update-row {
  gap: 10px 12px;
}
.upd-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
}
.upd-icon.is-review {
  background: var(--warning-soft);
  color: var(--warning-text);
}
.upd-text {
  flex: 1 1 140px;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.upd-text strong {
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.upd-text small {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.update-row .chip {
  min-width: 64px;
  min-height: 34px;
}
.updates-empty {
  display: grid;
  justify-items: center;
  padding: 32px 16px;
  text-align: center;
}
.updates-empty img {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 14px;
}
.updates-empty h2 {
  margin-bottom: 4px;
  font-size: 20px;
}
.updates-empty p {
  max-width: 290px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .convo-wave.moving i,
  .talk-button.dock.active::after {
    animation: none;
  }
}
/* Prototype parity: lists screens. Loaded after style.css, so equal-specificity rules here win. */

/* ==========================================================
   TASKS + SHOPPING — shared row look
   ========================================================== */
:is(.tasks-screen, .shopping-screen) .card-list {
  border-radius: var(--radius);
  margin-bottom: 14px;
}
:is(.tasks-screen, .shopping-screen) .item-row strong {
  font-size: 13px;
  line-height: 1.25;
  text-wrap: pretty;
}
:is(.tasks-screen, .shopping-screen) .item-row.done {
  opacity: 0.55;
}
:is(.tasks-screen, .shopping-screen) .meta {
  gap: 2px 5px;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
}
:is(.tasks-screen, .shopping-screen) .meta .pill {
  font-size: 9.5px;
  padding: 1px 6px;
}
:is(.tasks-screen, .shopping-screen) .check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transition:
    background var(--ease),
    border-color var(--ease);
}
:is(.tasks-screen, .shopping-screen) .check.on {
  animation: checkPop 200ms ease;
}
@keyframes checkPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
:is(.tasks-screen, .shopping-screen) .item-row > .icon-btn.sm {
  width: 28px;
  height: 28px;
}
:is(.tasks-screen, .shopping-screen) .list-tip {
  text-wrap: pretty;
}
:is(.tasks-screen, .shopping-screen) .list-tip svg {
  flex-shrink: 0;
}
:is(.tasks-screen, .shopping-screen) .list-empty-icon {
  background: var(--surface-2);
  color: var(--ink-muted);
}
:is(.tasks-screen, .shopping-screen) .list-empty strong {
  text-wrap: balance;
}
:is(.tasks-screen, .shopping-screen) .list-empty p {
  max-width: 280px;
  line-height: 1.45;
  text-wrap: pretty;
}
:is(.tasks-screen, .shopping-screen) .list-empty.compact {
  padding: 12px 4px 16px;
}
:is(.tasks-screen, .shopping-screen) .list-empty.compact p {
  max-width: none;
}

/* ==========================================================
   TASKS
   ========================================================== */
.tasks-screen .screen-toolbar > .primary {
  min-height: 40px;
  padding: 7px 13px;
  border-radius: 14px;
  white-space: nowrap;
}
.tasks-screen .meta-sep {
  color: var(--ink-muted);
}
/* The due pill doubles as the Edit due date control. */
.tasks-screen .meta button.pill {
  min-height: 0;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--ease);
}
.tasks-screen .meta button.pill:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px currentColor;
}
.tasks-screen .meta button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.tasks-screen .task-respond {
  margin-top: 6px;
}
.tasks-screen .task-respond .chip {
  min-height: 28px;
  padding: 3px 12px;
  font-size: 11.5px;
}
.tasks-screen .task-reassign-btn {
  flex-shrink: 0;
  min-height: 30px;
  padding: 5px 12px;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  border-color: transparent;
  font-size: 12px;
  font-weight: 750;
}
.tasks-screen .check.off {
  font-size: 12px;
  font-weight: 800;
}

/* First run: no tasks in the household yet. */
.tasks-first-run {
  display: grid;
  justify-items: center;
  padding: 32px 16px;
  text-align: center;
}
.tasks-first-run img {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 14px;
}
.tasks-first-run h2 {
  margin-bottom: 4px;
  font-size: 20px;
}
.tasks-first-run p {
  max-width: 300px;
  margin-bottom: 4px;
  font-size: 13.5px;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.tasks-first-run .quick-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.tasks-first-run .quick-prompt {
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  font-size: 11.5px;
  font-weight: 650;
  text-wrap: pretty;
  transition:
    background var(--ease),
    color var(--ease);
}
.tasks-first-run .quick-prompt:hover:not(:disabled) {
  background: var(--primary);
  color: var(--on-primary);
}
.tasks-first-run > .primary {
  margin-top: 14px;
}

/* ==========================================================
   SHOPPING
   ========================================================== */
.shopping-screen .shop-tabs {
  width: 100%;
  margin-bottom: 12px;
}
.shop-add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 6px 6px 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.shop-add-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.shop-add-bar.needs-name {
  border-color: var(--danger);
  animation: shopNudge 300ms ease;
}
@keyframes shopNudge {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shop-add-bar > svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.shop-add-bar input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}
.shop-add-bar input:focus-visible {
  box-shadow: none;
}
.shop-add-bar .primary {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 16px;
  font-size: 13px;
  box-shadow: none;
}
.shopping-screen .shop-row {
  padding: 13px 16px;
}
/* Quantity: quiet underlined text in the meta line, edited in the sheet. */
.qty-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 750;
  color: var(--primary-hover);
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  line-height: 1.2;
  cursor: pointer;
}
.qty-link:hover:not(:disabled) {
  border-bottom-style: solid;
}
.qty-link.is-empty {
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom-color: var(--line);
}
.qty-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================
   SHEETS — close, reassign, due date, quantity, delete
   ========================================================== */
.conversation-body > .task-sheet-q,
.task-sheet-q {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
  text-wrap: pretty;
}
.conversation-body .task-outcome {
  display: flex;
  align-items: center;
}
.conversation-body .task-outcome strong {
  color: var(--ink);
}
.conversation-body .task-outcome small {
  line-height: 1.35;
}
.task-delete-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  color: var(--danger-text);
  font-size: 13px;
  font-weight: 700;
}
.task-delete-link:hover:not(:disabled) {
  background: var(--danger-soft);
}

/* Reassign: member radio cards */
.task-reassign-form {
  display: grid;
  gap: 10px;
}
.task-reassign-form > .quiet.wide {
  margin-top: -2px;
}
.reassign-members {
  display: grid;
  gap: 8px;
}
.reassign-members legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
form label.reassign-option,
.reassign-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--ease),
    background var(--ease);
}
.reassign-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.reassign-option .avatar.sm {
  width: 32px;
  height: 32px;
}
.reassign-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.reassign-name small {
  color: var(--ink-muted);
  font-weight: 600;
}
.reassign-radio {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.reassign-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.reassign-option:has(input:checked) .reassign-radio {
  border-color: var(--primary);
  box-shadow:
    inset 0 0 0 4px var(--surface),
    inset 0 0 0 10px var(--primary);
}
.reassign-option:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.reassign-members:disabled .reassign-option {
  cursor: default;
  opacity: 0.7;
}
.reassign-empty {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.task-sheet-note {
  margin: 0 2px 4px;
}

/* Small inline text buttons inside list sheets */
:is(.qty-form, .list-record-form) .text-btn {
  display: inline;
  min-height: 0;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--primary-hover);
  font: inherit;
  font-weight: 700;
}
:is(.qty-form, .list-record-form) .text-btn:hover:not(:disabled) {
  text-decoration: underline;
}
:is(.qty-form, .list-record-form) .text-btn:disabled {
  color: var(--ink-muted);
  opacity: 0.6;
}

/* Quantity editor: stepper + unit + common units */
.qty-form fieldset {
  display: grid;
  gap: 0;
}
.qty-form .field-label {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.qty-editor {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.qty-stepper button {
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--primary-hover);
}
.qty-stepper button:hover:not(:disabled) {
  background: var(--surface-2);
}
.qty-stepper button:disabled {
  color: var(--ink-muted);
  opacity: 0.5;
}
.qty-stepper input {
  width: 56px;
  min-height: 48px;
  height: 48px;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: transparent;
  box-shadow: none;
}
.qty-stepper input:focus-visible {
  box-shadow: none;
}
.qty-stepper:focus-within,
.qty-unit:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.qty-stepper:has(input[aria-invalid]) {
  border-color: var(--danger);
}
.qty-unit {
  flex: 1;
  min-width: 0;
  min-height: 51px;
  font-size: 14px;
}
.qty-units {
  margin: 0 0 6px;
}
.qty-units .chip {
  min-height: 32px;
  padding: 5px 14px;
  font-size: 12px;
}
.qty-form .qty-any {
  justify-self: start;
  margin: 2px 0 12px;
}
.qty-form .form-error {
  margin-bottom: 10px;
}
/* Prototype parity: spending screens. Loaded after style.css, so equal-specificity rules here win. */

/* ---------- Toolbar ---------- */
.spending .screen-toolbar {
  margin-bottom: 12px;
}
.spending .screen-toolbar > .spend-add {
  flex: 0 0 auto;
  gap: 4px;
  min-height: 40px;
  padding: 7px 13px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px -2px var(--shadow-color);
}

/* ---------- Total card ---------- */
.spend-total .card-head {
  align-items: flex-start;
}
.spend-total .spend-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}
.spend-total .spend-amount {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 2px;
}
.spend-total .spend-period {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
}
.spend-total .chart {
  gap: 8px;
  height: 84px;
  margin: 16px 0 6px;
}
.spend-total .bar {
  min-height: 8px;
  border-radius: 6px 6px 3px 3px;
  background: var(--primary-soft);
}
.spend-total .bar.is-now {
  background: var(--accent);
}
.spend-total .chart-labels {
  font-size: 11px;
  color: var(--ink-muted);
}
.spend-total .chart-labels .is-now {
  font-weight: 700;
  color: var(--on-accent);
}
.spend-summary {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------- Balances ---------- */
.spend-balances {
  margin-top: 14px;
}
.spend-balances-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.spend-balances-head h2 {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0;
}
.spend-balances .spend-count {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--surface);
  color: var(--ink-muted);
}
.spend-balances .balance-row {
  padding: 10px 0;
}
.spend-balances .balance-row strong {
  font-size: 13px;
  color: var(--ink);
}
.spend-balances .balance-amount {
  font-size: 16px;
  font-weight: 800;
}
.spend-balanced {
  padding: 8px 0 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.spend-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---------- Transactions ---------- */
.spending .spend-section {
  margin: 18px 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.spend-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.spend-list .item-row {
  gap: 12px;
  padding: 12px 14px;
}
.spend-list .tile-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.spend-list .item-row strong {
  font-size: 13px;
}
.spend-list .meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}
.spend-list .item-row.voided .tile-icon {
  opacity: 0.6;
}
.expense-row-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}
.ghost-button {
  min-height: 32px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ghost-button:hover:not(:disabled) {
  background: var(--surface-2);
}
@media (max-width: 360px) {
  .expense-row-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Sheets: add expense, details, void, receipt ---------- */
.spend-sheet {
  display: grid;
  gap: 14px;
}
.spend-sheet.sheet-form fieldset {
  gap: 14px;
}
.spend-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.spend-field > label,
.spend-field > .field-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.spend-field input[aria-invalid='true'] {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.field-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-text);
}
.expense-form .amount-input {
  font-size: 32px !important;
  letter-spacing: -0.04em;
}
.spend-sheet .spend-choice {
  width: 100%;
  margin: 0;
}
.spend-choice button {
  overflow: hidden;
  text-overflow: ellipsis;
}
.spend-choice.wrap {
  flex-wrap: wrap;
  border-radius: 18px;
}
.spend-choice.wrap button {
  flex: 1 1 calc(33.333% - 4px);
}
.expense-share {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.spend-save {
  min-height: 48px;
  margin-top: 4px;
}
.spend-sheet-actions {
  display: grid;
  gap: 8px;
}
.spend-sheet .danger-soft {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 14px;
  font-weight: 700;
}
.spend-sheet .danger-soft:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 18%, var(--danger-soft));
}
.spend-sheet .spend-void {
  color: var(--danger-text);
}
.spend-sheet-copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Details */
.expense-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.expense-detail-hero .spend-amount {
  margin: 0;
  font-size: 30px;
}
.spend-sheet .detail-list {
  gap: 0;
  margin: 0;
  padding: 2px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
}
.spend-sheet .detail-list > div {
  padding: 10px 0;
}
.spend-sheet .detail-list > div + div {
  border-top: 1px solid var(--line);
}

/* Void summary */
.spend-sheet-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}
.spend-sheet-summary .tile-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: var(--surface);
}
.spend-sheet-summary strong {
  display: block;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.spend-sheet-summary .meta {
  display: block;
}
.spend-sheet-amount {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Receipt */
.receipt-for {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.receipt-for strong {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.receipt-for span {
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.receipt-form {
  display: grid;
  gap: 14px;
}
.receipt-form fieldset {
  display: grid;
  gap: 8px;
}
.receipt-privacy {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--info-soft);
  color: var(--info-text);
  font-size: 13px;
}
.receipt-privacy .small {
  color: inherit;
}
.receipt-picker {
  display: grid;
  gap: 6px;
}
.receipt-picker > span {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.receipt-picker input[type='file'] {
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.receipt-picker input[type='file']:hover:not(:disabled) {
  border-color: var(--primary);
}
.receipt-picker input[type='file']:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.receipt-picker input[type='file']::file-selector-button {
  margin-right: 10px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.receipt-form fieldset > .primary {
  margin-top: 6px;
}
.receipt-confirm {
  display: grid;
  gap: 8px;
}
.receipt-confirm p {
  font-size: 13px;
  color: var(--ink);
}
/* Prototype parity: settings screens. Loaded after style.css, so equal-specificity rules here win. */

/* ----------------------------------------------------------
   Groups: a muted heading over a stack of row cards
   ---------------------------------------------------------- */
.settings-content {
  gap: 18px;
}
.settings-content .settings-group {
  gap: 8px;
}
.settings-content .settings-group-title {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-wrap: balance;
}
.settings-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* Each row is its own card. */
.settings-list > .settings-row,
.settings-list > .settings-members,
.settings-list > .pwa-callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px -18px var(--shadow-color);
  min-width: 0;
}
.settings-list > .settings-row {
  padding: 13px 14px;
}
.settings-list > .settings-members {
  overflow: hidden;
}
.settings-content .settings-row-copy strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.25;
}
.settings-content .settings-row-copy span {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.settings-content .settings-row > .avatar,
.settings-content .settings-row > .chip,
.settings-content .settings-row > .switch,
.settings-content .settings-row > .settings-icon {
  flex-shrink: 0;
}
.settings-content .settings-row > .chip {
  min-width: 64px;
  min-height: 34px;
  text-align: center;
}
.settings-content .settings-row > svg:last-child,
.settings-content .settings-members summary > svg:last-child {
  color: var(--ink-muted);
  flex-shrink: 0;
}

/* Tappable rows */
.settings-action {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.settings-list > button.settings-row:hover:not(:disabled) {
  background: var(--surface-2);
}
.settings-action:focus-visible,
.settings-members summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.settings-members summary:focus-visible {
  outline-offset: -3px;
  border-radius: 18px;
}
.settings-action.is-danger strong,
.settings-action.is-danger .settings-icon {
  color: var(--danger-text);
}

/* Members disclosure */
.settings-content .settings-member-list {
  padding: 0 14px 4px;
}
.settings-content .settings-member-list li {
  padding: 0;
}
.settings-content .settings-member-row {
  min-width: 0;
}
.settings-content .settings-member-list strong {
  overflow-wrap: anywhere;
}
.settings-content .settings-member-list .pill {
  flex-shrink: 0;
  font-size: 11px;
}

/* Appearance: palette options sit under the row text, no icon to align to. */
.settings-content .palette-options {
  padding-left: 0;
}

.settings-content .settings-note {
  margin: 0 2px;
  font-size: 11.5px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Linking controls for older Google-only accounts */
.settings-auth .account-sign-in {
  flex: 1 1 100%;
  padding: 0;
  border-top: 0;
}

/* Install / update callout from the app shell, shown as a row card */
.settings-list > .pwa-callout {
  padding: 13px 14px;
  flex-wrap: wrap;
}
.settings-list > .pwa-callout strong {
  font-size: 13.5px;
  font-weight: 750;
}
.settings-list > .pwa-callout p {
  font-size: 11.5px;
}

/* Sign out: a centred text button below the groups */
.settings-content > .settings-signout {
  justify-content: center;
  margin-top: 6px;
  color: var(--danger-text);
}
.settings-content > .settings-signout:hover:not(:disabled) {
  background: var(--danger-soft);
}

/* ----------------------------------------------------------
   Invite a member
   ---------------------------------------------------------- */
.settings-invite-card .settings-invite {
  flex: 1 1 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.invite-fresh {
  display: grid;
  gap: 10px;
}
.invite-code-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  background: var(--surface-2);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.invite-code-display .invite-code-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--on-primary-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
}
.invite-code-display .invite-code-input:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.invite-code-display .small-button {
  flex: 0 0 auto;
  min-height: 36px;
}
.settings-invite .invite-code-row {
  min-width: 0;
}
.invite-link-input {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-invite .invite-code-row .invite-link-input {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 12px;
}
.invite-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.invite-list-head strong {
  font-size: 12.5px;
  font-weight: 750;
}
.settings-invite p[role='status'] {
  margin: 0 2px;
}
.settings-invite .invitation-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
}
.invitation-copy {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.invitation-copy strong {
  font-size: 12.5px;
  font-weight: 750;
}
.invitation-copy span {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.4;
  text-wrap: pretty;
}
.settings-invite .invitation-card > .chip {
  flex-shrink: 0;
}
.invite-load-older {
  justify-self: start;
}

/* ----------------------------------------------------------
   Bottom sheets (portalled to <body>, so not scoped to settings)
   ---------------------------------------------------------- */
.settings-sheet {
  display: grid;
  gap: 12px;
}
.settings-sheet > p:not(.error) {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.settings-sheet-form {
  display: grid;
  gap: 14px;
}
.settings-sheet-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.settings-sheet-actions > .quiet {
  min-height: 44px;
}

@media (max-width: 380px) {
  .settings-list > .settings-row {
    padding: 12px;
  }
}