* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--cloud-cream); color: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button { appearance:none; -webkit-appearance:none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
button { -webkit-tap-highlight-color: transparent; }
img { display:block; max-width:100%; }

.app-shell {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--sunlit-gold) 30%, transparent) 0 18%, transparent 42%),
    radial-gradient(circle at 8% 26%, color-mix(in srgb, var(--sunset-peach) 16%, transparent) 0 12%, transparent 36%),
    var(--cloud-cream);
}
.desktop-rail { display:none; }
.root-view { min-height: 100dvh; padding: 18px 20px calc(var(--nav-h) + 34px); }

.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.page-header h1 { margin:3px 0 0; font-size: clamp(28px, 7vw, 34px); line-height:1.05; letter-spacing:-.035em; }
.show-title, .eyebrow { font-size:11px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:var(--soft-ink); }
.header-action { width:44px; height:44px; border:0; border-radius:50%; background:var(--paper); box-shadow:0 8px 24px rgba(117,72,33,.10); display:grid; place-items:center; font-size:22px; color:var(--coral-glow); }

.hero-card { overflow:hidden; border-radius: var(--radius-xl); background:var(--sunlit-gold); box-shadow: var(--shadow-soft); }
.hero-photo { height: 46vw; min-height:170px; max-height:330px; background:#eed4b5; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center 41%; }
.hero-copy { padding:18px; }
.pill { display:inline-flex; align-items:center; min-height:34px; padding:8px 14px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.035em; background:var(--paper); }
.hero-copy h2 { margin:12px 0 4px; font-size:26px; line-height:1.08; letter-spacing:-.03em; }
.hero-copy p { margin:0; color:var(--soft-ink); line-height:1.45; }

.section { margin-top:28px; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.section-title h2 { margin:4px 0 0; font-size:24px; letter-spacing:-.025em; }
.grid-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.soft-card, .white-card, .feature-card { border:0; text-align:left; border-radius:var(--radius-lg); padding:16px; min-height:104px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); border:1px solid color-mix(in srgb, var(--coral-glow) 7%, transparent); }
.soft-card.sea { background:var(--sea-mist); }
.soft-card.sand { background:var(--warm-sand); }
.soft-card.peach { background: color-mix(in srgb, var(--sunset-peach) 28%, var(--paper)); }
.soft-card h3, .feature-card h3 { margin:5px 0 4px; font-size:18px; line-height:1.15; }
.soft-card p, .feature-card p { margin:0; color:var(--soft-ink); font-size:14px; line-height:1.35; }
.card-kicker { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--soft-ink); }

.archive-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; border-radius:var(--radius-lg); padding:18px; background:var(--paper); box-shadow:var(--shadow-soft); }
.archive-card h3 { margin:5px 0 7px; font-size:19px; }
.archive-card p { margin:0; color:var(--soft-ink); font-size:14px; }
.round-action { width:50px; height:50px; border:0; border-radius:50%; background:var(--coral-glow); color:var(--on-accent); font-size:18px; }

.post-card { border:1px solid color-mix(in srgb, var(--coral-glow) 9%, transparent); display:flex; align-items:center; gap:14px; border-radius:var(--radius-lg); padding:18px; background: color-mix(in srgb, var(--sunset-peach) 16%, var(--paper)); }
.post-icon { width:38px; height:38px; border-radius:14px; background:var(--paper); display:grid; place-items:center; }
.post-card strong { display:block; margin-bottom:4px; }
.post-card span { color:var(--soft-ink); font-size:14px; }

.stack { display:grid; gap:12px; }
.feature-card { width:100%; min-height:88px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; }
.feature-card .chev { color:var(--coral-glow); font-size:28px; font-weight:300; }
.primary-button, .soft-button { min-height:48px; border:0; border-radius:18px; padding:0 18px; font-weight:800; }
.primary-button { background:var(--coral-glow); color:var(--on-accent); }
.soft-button { background:var(--warm-sand); color:var(--ink); }
.full { width:100%; }

.bottom-nav { position:fixed; z-index:900; left:0; right:0; bottom:0; height:var(--nav-h); padding:8px 8px max(10px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(18px); border-top:1px solid var(--hairline); display:grid; grid-template-columns:repeat(5,1fr); align-items:end; }
.nav-item, .nav-orb { border:0; background:transparent; min-width:44px; min-height:44px; }
.nav-item { display:grid; place-items:center; gap:1px; padding:6px; color:var(--soft-ink); font-size:17px; }
.nav-item small { font-size:10px; }
.nav-item.active { color:var(--coral-glow); font-weight:800; }
.nav-orb { width:66px; height:66px; border-radius:50%; background:var(--sunset-peach); color:var(--on-accent); font-weight:900; font-size:28px; align-self:start; justify-self:center; transform:translateY(-20px); box-shadow:0 12px 26px rgba(180,105,56,.28); }

.person-list { display:grid; gap:12px; }
.person { display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:16px; width:100%; padding:14px; border:0; border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); text-align:left; box-shadow:var(--shadow-card); }
.person > span:last-child { justify-self:end; color:var(--coral-glow); font-size:24px; }
.avatar { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:22px; background:var(--warm-sand); }
.avatar.aura { background:var(--sea-mist); }
.avatar.bobbi { background:var(--sunset-peach); color:var(--on-accent); }
.person small { color:var(--soft-ink); display:block; margin-top:4px; }

.studio-hero { border-radius:var(--radius-xl); overflow:hidden; background:var(--sunlit-gold); }
.studio-hero img { width:100%; height:220px; object-fit:cover; object-position:center 38%; }
.studio-hero .copy { padding:18px; }
.memory-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.memory-tile { min-height:126px; border:0; border-radius:22px; padding:14px; display:flex; align-items:flex-end; font-weight:800; background:var(--warm-sand); color:var(--ink); text-align:left; box-shadow:var(--shadow-card); }
.memory-tile:nth-child(2n) { background:var(--sea-mist); }
.memory-tile:nth-child(3n) { background:color-mix(in srgb, var(--sunset-peach) 25%, var(--paper)); }

.bobbi-center { text-align:center; padding:14px 0 20px; }
.bobbi-orb-large { width:120px; height:120px; margin:8px auto 12px; border-radius:50%; display:grid; place-items:center; background:var(--sunset-peach); color:var(--on-accent); font-size:48px; font-weight:900; box-shadow:var(--shadow-soft); }
.bobbi-center h2 { margin:8px 0 0; font-size:26px; }
.chat-preview { padding:16px; border-radius:var(--radius-lg); background:var(--paper); line-height:1.45; }
.chat-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.composer { position:sticky; bottom:calc(var(--nav-h) + 10px); margin-top:16px; padding:10px; display:grid; grid-template-columns:1fr 44px; gap:8px; background:var(--paper); border-radius:22px; box-shadow:var(--shadow-soft); }
.composer input { min-height:44px; border:0; background:transparent; color:var(--ink); padding:0 8px; outline:none; }
.composer button { width:44px; height:44px; border:0; border-radius:50%; background:var(--coral-glow); color:var(--on-accent); font-size:22px; }

.surface-host:empty { display:none; }
.surface { position:fixed; inset:0; z-index:var(--surface-z); width:100vw; height:100dvh; background:var(--cloud-cream); isolation:isolate; display:flex; flex-direction:column; }
.surface-header { flex:0 0 auto; min-height:72px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; border-bottom:1px solid var(--hairline); background:var(--cloud-cream); }
.surface-back { width:44px; height:44px; border:0; border-radius:50%; background:var(--paper); font-size:28px; }
.surface-header strong { display:block; text-align:center; }
.surface-header small { display:block; text-align:center; color:var(--soft-ink); margin-top:2px; }
.surface-body { flex:1 1 auto; min-height:0; overflow:auto; padding:18px 18px calc(26px + env(safe-area-inset-bottom)); }
.surface-card { padding:18px; border-radius:var(--radius-lg); background:var(--paper); }
.surface-card + .surface-card { margin-top:12px; }

body.surface-open { overflow:hidden; }
.toast { position:fixed; z-index:var(--toast-z); left:50%; bottom:110px; transform:translate(-50%, 18px); opacity:0; pointer-events:none; transition:.22s ease; background:var(--ink); color:var(--cloud-cream); padding:11px 16px; border-radius:999px; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width: 900px) {
  .app-shell { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); }
  .desktop-rail { display:flex; position:fixed; inset:0 auto 0 0; width:var(--rail-w); padding:30px 18px 24px; flex-direction:column; border-right:1px solid var(--hairline); background:color-mix(in srgb, var(--paper) 96%, var(--warm-sand)); z-index:50; }
  .brand-lockup { padding:0 10px 38px; }
  .brand-title { font-size:13px; font-weight:900; letter-spacing:.03em; }
  .brand-subtitle { margin-top:8px; color:var(--soft-ink); font-size:13px; }
  .rail-nav { display:grid; gap:8px; }
  .rail-nav button { min-height:48px; border:0; border-radius:16px; background:transparent; text-align:left; padding:0 16px; font-weight:700; }
  .rail-nav button.active { background:var(--warm-sand); }
  .rail-bobbi { margin-top:auto; border:0; border-radius:24px; padding:16px; background:linear-gradient(145deg,var(--sunlit-gold),var(--sunset-peach)); text-align:left; box-shadow:var(--shadow-card); }
  .rail-bobbi strong { display:block; margin:6px 0 14px; font-size:18px; }
  .buttonlike { display:inline-flex; min-height:42px; align-items:center; padding:0 14px; border-radius:16px; background:var(--coral-glow); color:var(--on-accent); font-weight:800; }
  .root-view { grid-column:2; min-width:0; padding:34px 54px 64px; max-width:1280px; width:100%; }
  .bottom-nav { display:none; }
  .desktop-home-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr); gap:30px; align-items:start; }
  .hero-card.desktop { display:grid; grid-template-columns:minmax(240px,42%) minmax(0,58%); min-height:340px; }
  .hero-card.desktop .hero-photo { height:340px; min-height:340px; }
  .hero-card.desktop .hero-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; padding:34px; }
  .hero-card.desktop .hero-copy h2 { font-size:38px; max-width:480px; }
  .desktop-wide { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr); gap:30px; }
  .section { margin-top:34px; }
  .mobile-only { display:none !important; }
  .surface { left:var(--rail-w); width:calc(100vw - var(--rail-w)); }
}

/* Compact desktop/tablet: also covers Chrome's “Desktop site” viewport on phones. */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --rail-w: 190px; }
  .desktop-rail { padding:24px 14px 20px; }
  .brand-lockup { padding:0 8px 24px; }
  .rail-nav button { padding:0 12px; }
  .rail-bobbi { padding:14px; }
  .rail-bobbi strong { font-size:16px; }
  .root-view { max-width:none; padding:28px 28px 52px; }
  .page-header { margin-bottom:18px; }
  .desktop-home-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .hero-card.desktop { grid-template-columns:minmax(230px,40%) minmax(0,1fr); min-height:320px; }
  .hero-card.desktop .hero-photo { height:320px; min-height:320px; }
  .hero-card.desktop .hero-copy { padding:28px; }
  .hero-card.desktop .hero-copy h2 { font-size:34px; }
  .desktop-home-grid > section { width:100%; }
  .desktop-home-grid > section .stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .desktop-wide { grid-template-columns:minmax(0,1fr); gap:22px; }
  .desktop-wide > div { min-width:0; }
  .section-title h2 { font-size:22px; }
  .archive-card, .post-card { width:100%; min-width:0; }
}

@media (max-width: 899px) {
  .desktop-only { display:none !important; }
}

/* Bobbi chat layout contract: the conversation scrolls; the composer never overlays it. */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

body.bobbi-active { overflow:hidden; }
.root-view.bobbi-root {
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding-bottom:calc(var(--nav-h) + max(10px, env(safe-area-inset-bottom)) + 8px);
}
.bobbi-layout {
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
}
.bobbi-scroll {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding:0 2px 18px;
  scroll-padding-bottom:18px;
}
.bobbi-scroll > .page-header { margin-top:0; }
.composer {
  position:static;
  inset:auto;
  z-index:auto;
  margin:0;
  flex:0 0 auto;
  width:100%;
}

@media (min-width:900px) {
  .root-view.bobbi-root {
    height:100dvh;
    padding-top:34px;
    padding-bottom:28px;
    overflow:hidden;
  }
  .bobbi-layout {
    max-width:980px;
    margin:0 auto;
  }
  .bobbi-scroll { padding-bottom:22px; }
  .composer { margin-top:0; }
}

@media (min-width:900px) and (max-width:1199px) {
  .root-view.bobbi-root {
    padding-top:28px;
    padding-bottom:22px;
  }
}

/* V1.4 — authenticated family shell */
[hidden] { display:none !important; }
.header-actions { display:flex; align-items:center; gap:8px; }
.account-action { font-size:13px; font-weight:900; letter-spacing:.02em; color:var(--ink); background:var(--warm-sand); }
button:disabled { opacity:.58; cursor:not-allowed; }

.auth-gate {
  min-height:100dvh;
  padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  display:grid;
  align-content:center;
  gap:18px;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--sunlit-gold) 44%, transparent), transparent 38%),
    radial-gradient(circle at 10% 70%, color-mix(in srgb, var(--sunset-peach) 20%, transparent), transparent 42%),
    var(--cloud-cream);
}
.auth-portrait { max-width:560px; width:100%; margin:0 auto; aspect-ratio:16/10; border-radius:30px; overflow:hidden; box-shadow:var(--shadow-soft); background:var(--sunlit-gold); }
.auth-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.auth-panel { width:min(100%,560px); margin:0 auto; padding:24px; border-radius:30px; background:color-mix(in srgb, var(--paper) 96%, var(--sunlit-gold)); box-shadow:var(--shadow-soft); }
.auth-panel h1 { margin:8px 0 8px; font-size:clamp(34px,10vw,54px); line-height:.98; letter-spacing:-.045em; }
.auth-status { min-height:48px; margin:0 0 18px; color:var(--soft-ink); line-height:1.5; }
.auth-form { display:grid; gap:10px; }
.auth-form label, .surface-form label { font-size:13px; font-weight:800; color:var(--ink); }
.auth-form input, .surface-form input, .surface-form textarea, .surface-form select {
  width:100%;
  min-height:48px;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--paper);
  color:var(--ink);
  padding:12px 14px;
}
.surface-form textarea { resize:vertical; min-height:108px; line-height:1.45; }
.surface-form select { appearance:auto; }
.auth-form .primary-button { margin-top:4px; }
.auth-footnote { margin:18px 0 0; font-size:12px; line-height:1.5; color:var(--soft-ink); }
#authSecondary { margin-top:6px; }
.otp-form { gap:12px; }
.otp-heading { display:grid; gap:5px; margin-bottom:2px; }
.otp-heading strong { font-size:19px; letter-spacing:-.02em; }
.otp-heading small { color:var(--soft-ink); overflow-wrap:anywhere; }
.auth-form .otp-input {
  min-height:64px;
  padding:12px 14px;
  text-align:center;
  font-size:clamp(25px,8vw,34px);
  font-weight:900;
  letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
  caret-color:var(--coral-glow);
}
.otp-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.text-button { min-height:44px; border:0; background:transparent; color:var(--soft-ink); font-weight:800; padding:8px 10px; }
.text-button:hover { color:var(--ink); }
@media (max-width:360px) { .otp-actions { grid-template-columns:1fr; } }

.surface-form { display:grid; gap:10px; margin-top:20px; }
.surface-form .primary-button { margin-top:8px; }
.optional { font-weight:500; color:var(--soft-ink); }
.form-help { margin:2px 0 0; color:var(--soft-ink); font-size:12px; line-height:1.45; }
.surface-card h2 { margin:8px 0 8px; }
.surface-card > p { color:var(--soft-ink); line-height:1.5; }
.account-facts { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; padding:16px 0 22px; }
.account-facts span { color:var(--soft-ink); }
.account-facts strong { text-align:right; }
.danger-button { margin-top:6px; }

.empty-card { border-radius:var(--radius-lg); padding:22px; background:var(--paper); box-shadow:var(--shadow-card); }
.empty-card h3 { margin:8px 0 6px; font-size:20px; }
.empty-card p { margin:0; color:var(--soft-ink); line-height:1.45; }
.empty-card .primary-button { margin-top:18px; }
.plans-hero { margin-top:12px; min-height:164px; }
.plans-hero h2 { margin:0 0 8px; font-size:25px; }
.family-identity { margin-top:12px; min-height:168px; }
.family-identity h2 { font-size:26px; margin:8px 0 6px; }
.family-identity .pill { margin-top:18px; }
.invite-card { background:color-mix(in srgb, var(--sunlit-gold) 44%, var(--paper)); }
.memory-tile span { display:grid; gap:6px; }
.memory-tile small { font-size:10px; font-weight:800; color:var(--soft-ink); text-transform:uppercase; letter-spacing:.04em; }
.memory-empty { grid-column:1/-1; min-height:190px; }
.studio-hero .copy h2 { margin:0 0 6px; }
.studio-hero .copy p { margin:0; color:var(--soft-ink); }

@media (min-width:900px) {
  .auth-gate { grid-template-columns:minmax(360px,720px) minmax(360px,520px); align-items:center; justify-content:center; gap:34px; padding:48px; }
  .auth-portrait { max-width:none; height:min(72vh,720px); aspect-ratio:auto; }
  .auth-panel { margin:0; padding:34px; }
  .auth-panel h1 { font-size:56px; }
  .surface-form { max-width:620px; }
}

@media (max-width:420px) {
  .auth-panel { padding:20px; }
  .auth-portrait { aspect-ratio:16/9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* V1.5 — living Home + real record detail surfaces */
.text-action { min-height:44px; border:0; background:transparent; padding:0 4px; color:var(--coral-glow); font-weight:800; }
.pulse-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pulse-card { min-width:0; min-height:104px; border:0; border-radius:20px; padding:14px 10px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:4px; text-align:left; box-shadow:var(--shadow-card); }
.pulse-card.sea { background:var(--sea-mist); }
.pulse-card.sand { background:var(--warm-sand); }
.pulse-card.peach { background:color-mix(in srgb,var(--sunset-peach) 30%,var(--paper)); }
.pulse-value { font-size:27px; line-height:1; font-weight:900; letter-spacing:-.04em; }
.pulse-card > span:last-child { color:var(--soft-ink); font-size:11px; line-height:1.2; }
.pulse-note { margin:12px 2px 0; color:var(--soft-ink); font-size:13px; line-height:1.45; }

.home-stream { display:grid; gap:28px; }
.home-stream-main, .home-stream-side { min-width:0; }
.archive-memory { width:100%; border:0; border-radius:var(--radius-lg); padding:20px; display:block; text-align:left; background:var(--paper); box-shadow:var(--shadow-card); }
.archive-memory.empty { border:0; }
.archive-memory strong { display:block; margin:7px 0 7px; font-size:20px; letter-spacing:-.02em; }
.archive-memory p { margin:0; color:var(--soft-ink); line-height:1.48; }
.archive-date { display:block; color:var(--soft-ink); font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.archive-link { display:block; margin-top:18px; color:var(--coral-glow); font-weight:800; font-size:13px; }
.archive-memory .soft-button { margin-top:16px; }
.capsule-mini, .bobbi-home-card { width:100%; border:0; margin-top:12px; border-radius:20px; padding:15px 16px; display:grid; align-items:center; gap:12px; text-align:left; box-shadow:var(--shadow-card); }
.capsule-mini { grid-template-columns:1fr auto; background:var(--warm-sand); }
.capsule-mini small, .bobbi-home-card small { display:block; color:var(--soft-ink); font-size:10px; font-weight:900; letter-spacing:.05em; }
.capsule-mini strong, .bobbi-home-card strong { display:block; margin-top:3px; line-height:1.28; }
.capsule-mini > span:last-child, .bobbi-home-card > span:last-child { color:var(--coral-glow); font-size:24px; }
.bobbi-home-card { grid-template-columns:46px 1fr auto; background:color-mix(in srgb,var(--sunset-peach) 24%,var(--paper)); }
.bobbi-home-orb { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--sunset-peach); color:var(--on-accent); font-weight:900; font-size:20px; }

.detail-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.status-pill { min-height:30px; padding:7px 11px; display:inline-flex; align-items:center; border-radius:999px; background:var(--warm-sand); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.status-pill.done { background:var(--sea-mist); }
.status-pill.cancelled { background:color-mix(in srgb,var(--soft-ink) 12%,var(--paper)); }
.detail-card h2 { margin:12px 0 18px; font-size:28px; letter-spacing:-.03em; }
.detail-list { margin:0; display:grid; gap:0; }
.detail-list > div { padding:14px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:72px 1fr; gap:16px; }
.detail-list dt { color:var(--soft-ink); font-size:12px; font-weight:800; }
.detail-list dd { margin:0; line-height:1.45; }
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.detail-note { margin-top:18px !important; padding:14px; border-radius:16px; background:var(--sea-mist); color:var(--ink) !important; }
.memory-date { margin:-8px 0 16px !important; font-size:12px; }
.memory-body { padding:18px; border-radius:18px; background:var(--cloud-cream); line-height:1.65; white-space:pre-wrap; }

.profile-mark { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--warm-sand); font-size:26px; font-weight:900; margin-bottom:16px; }
.profile-mark.bobbi { background:var(--sunset-peach); color:var(--on-accent); }
.profile-fact { margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:16px; }
.profile-fact span { color:var(--soft-ink); }

.story-timeline { position:relative; display:grid; gap:0; max-width:760px; margin:0 auto; }
.story-entry { position:relative; width:100%; border:0; background:transparent; padding:0 0 22px; display:grid; grid-template-columns:82px 20px minmax(0,1fr); gap:10px; text-align:left; }
.story-entry::before { content:""; position:absolute; left:91px; top:20px; bottom:-2px; width:1px; background:var(--hairline); }
.story-entry:last-child::before { display:none; }
.story-date { padding-top:2px; color:var(--soft-ink); font-size:11px; font-weight:800; line-height:1.3; }
.story-dot { position:relative; z-index:1; width:12px; height:12px; margin:2px auto 0; border-radius:50%; background:var(--coral-glow); box-shadow:0 0 0 5px var(--cloud-cream); }
.story-copy { min-width:0; padding:14px 16px; margin-top:-12px; border-radius:18px; background:var(--paper); box-shadow:var(--shadow-card); }
.story-copy strong { display:block; margin-bottom:5px; }
.story-copy small { display:block; color:var(--soft-ink); line-height:1.45; }

.needs-list { display:grid; gap:12px; }
.needs-item { width:100%; border:0; border-radius:20px; padding:16px; display:grid; gap:4px; text-align:left; background:var(--paper); box-shadow:var(--shadow-card); }
.needs-item > span { color:var(--soft-ink); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.needs-item small { color:var(--soft-ink); }
.status-list { margin-top:18px; border-top:1px solid var(--hairline); }
.status-row { padding:14px 0; display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--hairline); }
.status-row span { color:var(--soft-ink); }
.status-row strong { text-align:right; }
.capsule-entry-list { display:grid; gap:10px; margin-top:18px; }
.capsule-entry { padding:14px; border-radius:16px; background:var(--cloud-cream); }
.capsule-entry p { margin:6px 0 0; }
.empty-inline { margin-top:18px; padding:14px; border-radius:16px; background:var(--cloud-cream); color:var(--soft-ink); line-height:1.45; }

.composer-disabled { opacity:.72; box-shadow:none; border:1px dashed var(--hairline); }
.composer-disabled input:disabled { -webkit-text-fill-color:var(--soft-ink); color:var(--soft-ink); opacity:1; }
.composer-disabled button:disabled { background:var(--warm-sand); }

@media (min-width:900px) {
  .home-stream { grid-template-columns:minmax(0,1.5fr) minmax(300px,.72fr); gap:30px; align-items:start; }
  .home-stream-side { position:sticky; top:28px; }
}

@media (min-width:900px) and (max-width:1199px) {
  .home-stream { grid-template-columns:minmax(0,1fr); gap:24px; }
  .home-stream-side { position:static; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .home-stream-side .section-title { grid-column:1/-1; }
  .archive-memory { grid-column:1/-1; }
  .capsule-mini, .bobbi-home-card { margin-top:0; }
}

@media (max-width:520px) {
  .pulse-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .pulse-card { min-height:94px; padding:12px 8px; }
  .pulse-value { font-size:24px; }
  .story-entry { grid-template-columns:68px 18px minmax(0,1fr); gap:7px; }
  .story-entry::before { left:76.5px; }
}

/* V1.7 — private Family Studio media */
.media-picker { min-height:92px; border:1px dashed color-mix(in srgb,var(--coral-glow) 52%,var(--hairline)); border-radius:20px; padding:16px; display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:12px; align-items:center; background:color-mix(in srgb,var(--sunlit-gold) 16%,var(--paper)); cursor:pointer; }
.media-picker > span { grid-row:1/3; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--sunset-peach); color:var(--on-accent); font-size:24px; }
.media-picker strong { align-self:end; }
.media-picker small { align-self:start; color:var(--soft-ink); font-weight:600; line-height:1.3; }
.media-preview { display:flex; flex-wrap:wrap; gap:7px; min-height:0; }
.media-preview:empty { display:none; }
.media-file-chip { max-width:100%; padding:7px 10px; border-radius:999px; background:var(--sea-mist); color:var(--ink); font-size:11px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.form-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-split > div { min-width:0; display:grid; gap:10px; }

.memory-tile { position:relative; overflow:hidden; isolation:isolate; }
.memory-tile.has-media { min-height:190px; padding:0; background:var(--ink); }
.memory-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.memory-tile.has-media::after { content:""; position:absolute; inset:34% 0 0; z-index:-1; background:linear-gradient(transparent,rgba(20,17,16,.78)); }
.memory-tile.has-media > span { width:100%; padding:14px; color:#fff; align-self:flex-end; }
.memory-tile.has-media small { color:rgba(255,255,255,.82); }

.archive-memory.has-media { overflow:hidden; padding:0; }
.archive-memory-media { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--warm-sand); }
.archive-memory-copy { display:block; padding:18px 20px 20px; }

.memory-media-gallery { display:grid; gap:10px; margin:0 0 16px; }
.memory-media-item { width:100%; max-height:min(62dvh,720px); object-fit:contain; display:block; border-radius:18px; background:#171413; }
.memory-media-unavailable { padding:18px; border-radius:18px; background:var(--warm-sand); color:var(--soft-ink); }
.memory-delete { margin-top:22px; }
.story-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; margin:0 0 12px; border-radius:12px; background:var(--warm-sand); }

@media (max-width:520px) {
  .form-split { grid-template-columns:1fr; }
  .memory-tile.has-media { min-height:168px; }
}

/* ========================================================================== */
/* Bobbi Family 2.0 — full family home                                        */
/* ========================================================================== */

button, input, textarea, select, a { font: inherit; }
button, [role="button"], a.buttonlike { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb,var(--denim-blue) 72%,white); outline-offset:3px; }
button:disabled, input:disabled, textarea:disabled, select:disabled { cursor:not-allowed; opacity:.56; }

.page-title-lockup { min-width:0; }
.page-header { gap:16px; }
.header-actions { flex-shrink:0; }
.notification-button { position:relative; }
.notification-dot { position:absolute; right:-3px; top:-3px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:var(--coral-glow); color:#fff; font-size:9px; line-height:1; box-shadow:0 0 0 3px var(--cloud-cream); }
.rail-version { margin-top:auto; color:var(--soft-ink); opacity:.65; font-size:10px; padding:10px 8px 0; }

.home-hero-grid { display:grid; gap:18px; align-items:stretch; }
.family-hero { min-height:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.pulse-panel { padding:18px; border-radius:var(--radius-lg); background:var(--paper); box-shadow:var(--shadow-card); }
.section-title.compact { margin-bottom:14px; }
.section-title.compact h2 { font-size:19px; }
.home-dashboard-grid, .home-lower-grid { display:grid; gap:28px; }
.dashboard-column { min-width:0; }
.home-mini-stack { min-width:0; }
.mini-feature { width:100%; min-height:72px; margin-top:12px; border:0; border-radius:20px; padding:13px 15px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; text-align:left; background:var(--paper); box-shadow:var(--shadow-card); color:var(--ink); }
.mini-feature > span:last-child { font-size:22px; color:var(--coral-glow); }
.mini-icon { width:42px; height:42px; border-radius:15px; display:grid; place-items:center; background:var(--sea-mist); font-size:19px; }
.mini-feature small { display:block; color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.08em; }
.mini-feature strong { display:block; margin-top:2px; line-height:1.25; }

.page-intro { margin:6px 0 24px; padding:22px; border-radius:var(--radius-xl); background:linear-gradient(135deg,color-mix(in srgb,var(--sunlit-gold) 42%,var(--paper)),var(--paper)); display:flex; justify-content:space-between; gap:22px; align-items:flex-end; box-shadow:var(--shadow-card); }
.page-intro > div { min-width:0; max-width:720px; }
.page-intro h2 { margin:5px 0 7px; font-size:clamp(25px,5vw,38px); letter-spacing:-.04em; }
.page-intro p { margin:0; color:var(--soft-ink); line-height:1.5; }
.plan-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.plan-stats button { min-height:88px; border:0; border-radius:20px; padding:13px; text-align:left; background:var(--paper); box-shadow:var(--shadow-card); color:var(--ink); }
.plan-stats strong { display:block; font-size:27px; line-height:1; }
.plan-stats span { display:block; margin-top:6px; color:var(--soft-ink); font-size:11px; font-weight:700; }
.feature-card.blue { background:color-mix(in srgb,var(--denim-blue) 30%,var(--paper)); }

.reminder-card { width:100%; min-height:70px; border:0; border-radius:18px; padding:13px 14px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.reminder-card.high { background:color-mix(in srgb,var(--sunset-peach) 18%,var(--paper)); }
.reminder-card.low { background:color-mix(in srgb,var(--sea-mist) 52%,var(--paper)); }
.reminder-check { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--hairline); background:var(--cloud-cream); }
.reminder-card small { display:block; color:var(--soft-ink); margin-bottom:2px; font-size:10px; }
.reminder-card strong { display:block; line-height:1.3; }
.quiet-card { padding:18px; border-radius:20px; background:var(--sea-mist); box-shadow:var(--shadow-card); }
.quiet-card > span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--paper); font-weight:900; }
.quiet-card strong { display:block; margin:12px 0 4px; }
.quiet-card p { margin:0 0 14px; color:var(--soft-ink); }

.studio-banner { display:grid; grid-template-columns:minmax(115px,.55fr) minmax(0,1fr); gap:18px; align-items:center; padding:14px; border-radius:var(--radius-xl); background:var(--paper); box-shadow:var(--shadow-card); overflow:hidden; }
.studio-banner-photo { min-height:200px; border-radius:22px; overflow:hidden; }
.studio-banner-photo img { width:100%; height:100%; min-height:200px; object-fit:cover; object-position:center 43%; display:block; }
.studio-banner h2 { margin:5px 0 8px; font-size:clamp(24px,4.7vw,37px); letter-spacing:-.04em; }
.studio-banner p { color:var(--soft-ink); line-height:1.5; }
.collection-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,240px); gap:12px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:none; }
.collection-row::-webkit-scrollbar { display:none; }
.collection-card, .collection-new { min-height:188px; border:0; border-radius:22px; padding:0; overflow:hidden; scroll-snap-align:start; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); position:relative; }
.collection-card > .memory-hero-media { width:100%; height:110px; object-fit:cover; display:block; }
.collection-placeholder { height:110px; display:grid; place-items:center; background:var(--warm-sand); font-size:34px; }
.collection-copy { display:block; padding:12px 14px 14px; }
.collection-copy small { color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.07em; }
.collection-copy strong { display:block; margin:3px 0 3px; }
.collection-copy > span { color:var(--soft-ink); font-size:11px; }
.collection-new { padding:18px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--sea-mist); }
.collection-new.peach { background:color-mix(in srgb,var(--sunset-peach) 27%,var(--paper)); }
.collection-new > span { width:42px; height:42px; margin-bottom:auto; display:grid; place-items:center; border-radius:50%; background:var(--paper); font-size:22px; }
.collection-new strong { margin-bottom:4px; }
.collection-new small { color:var(--soft-ink); line-height:1.3; }

.family-cover { position:relative; min-height:245px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-soft); }
.family-cover img { width:100%; height:100%; min-height:245px; position:absolute; inset:0; object-fit:cover; object-position:center 38%; }
.family-cover::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(34,27,22,.72)); }
.family-cover-copy { position:relative; z-index:1; min-height:245px; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; }
.family-cover-copy .eyebrow { color:rgba(255,255,255,.8); }
.family-cover-copy h2 { margin:5px 0 4px; font-size:31px; }
.family-cover-copy p { margin:0; color:rgba(255,255,255,.9); max-width:600px; }
.family-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.family-tool { min-height:132px; border:0; border-radius:22px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.family-tool > span { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:var(--warm-sand); font-size:19px; }
.family-tool strong { margin-top:auto; padding-top:16px; }
.family-tool small { margin-top:3px; color:var(--soft-ink); }

.bobbi-status-strip { margin:4px 0 18px; min-height:46px; border-radius:17px; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--sea-mist); color:var(--ink); }
.bobbi-status-strip > span:not(.status-dot) { color:var(--soft-ink); font-size:11px; }
.bobbi-status-strip button { margin-left:auto; min-height:32px; border:0; border-radius:999px; padding:0 11px; background:var(--paper); color:var(--ink); font-size:10px; font-weight:800; }
.status-dot.local { width:9px; height:9px; border-radius:50%; background:#4f9f74; box-shadow:0 0 0 4px rgba(79,159,116,.13); }
.chat-thread { max-width:800px; margin:0 auto; display:grid; gap:12px; padding-bottom:24px; }
.bobbi-welcome { padding:24px 8px 10px; text-align:center; }
.bobbi-welcome h2 { margin:10px auto 8px; max-width:560px; font-size:clamp(27px,6vw,40px); letter-spacing:-.04em; }
.bobbi-welcome p { max-width:620px; margin:0 auto; color:var(--soft-ink); line-height:1.55; }
.bobbi-prompts { margin:20px auto 0; max-width:650px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.bobbi-prompts button { min-height:42px; border:1px solid var(--hairline); border-radius:999px; padding:0 14px; background:var(--paper); color:var(--ink); font-size:12px; box-shadow:var(--shadow-card); }
.chat-message { max-width:min(82%,650px); padding:13px 15px 10px; border-radius:20px; box-shadow:var(--shadow-card); }
.chat-message.user { justify-self:end; background:var(--sunset-peach); color:var(--on-accent); border-bottom-right-radius:7px; }
.chat-message.assistant { justify-self:start; background:var(--paper); border-bottom-left-radius:7px; }
.chat-message > span { display:block; margin-bottom:4px; font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; opacity:.67; }
.chat-message p { margin:0; line-height:1.5; white-space:pre-wrap; }
.chat-message small { display:block; margin-top:6px; font-size:9px; opacity:.56; text-align:right; }
.composer { grid-template-columns:42px minmax(0,1fr) 44px; }
.composer-tool { width:42px !important; height:42px !important; min-width:42px !important; background:var(--sea-mist) !important; color:var(--ink) !important; }

.surface-stack { display:grid; gap:11px; margin-top:12px; }
.choice-fieldset, .memory-picker-list, .quiet-hours { border:0; padding:0; margin:4px 0; }
.choice-fieldset legend, .memory-picker-list legend, .quiet-hours legend { margin-bottom:9px; font-weight:800; }
.choice-grid { display:flex; flex-wrap:wrap; gap:7px; }
.choice-pill { cursor:pointer; }
.choice-pill input { position:absolute; opacity:0; pointer-events:none; }
.choice-pill span { min-height:40px; padding:0 13px; display:flex; align-items:center; border-radius:999px; border:1px solid var(--hairline); background:var(--paper); font-size:12px; font-weight:700; }
.choice-pill input:checked + span { background:var(--sunlit-gold); border-color:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral-glow) 28%,transparent); }
.toggle-row { min-height:64px; padding:10px 0; display:flex !important; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--hairline); cursor:pointer; }
.toggle-row span { min-width:0; }
.toggle-row strong, .toggle-row small { display:block; }
.toggle-row small { margin-top:3px; color:var(--soft-ink); line-height:1.35; }
.toggle-row input[type="checkbox"] { width:42px; height:24px; accent-color:var(--coral-glow); flex-shrink:0; }
.memory-picker-list { display:grid; gap:8px; max-height:46dvh; overflow:auto; padding-right:2px; }
.memory-picker-list label { min-height:58px; padding:9px 11px; display:flex; align-items:center; gap:10px; border:1px solid var(--hairline); border-radius:15px; background:var(--cloud-cream); }
.memory-picker-list input { width:18px; height:18px; accent-color:var(--coral-glow); }
.memory-picker-list span { min-width:0; }
.memory-picker-list strong, .memory-picker-list small { display:block; }
.memory-picker-list small { margin-top:2px; color:var(--soft-ink); }
.collection-detail-grid { margin:18px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.collection-detail-grid button { min-width:0; border:0; border-radius:16px; padding:0; overflow:hidden; background:var(--cloud-cream); color:var(--ink); text-align:left; }
.collection-detail-grid img { width:100%; aspect-ratio:1.2; object-fit:cover; display:block; }
.collection-detail-grid button > span { aspect-ratio:1.2; display:grid; place-items:center; background:var(--warm-sand); }
.collection-detail-grid strong { display:block; padding:9px; font-size:11px; }

.post-office-hero, .vault-hero, .device-hero { background:linear-gradient(135deg,color-mix(in srgb,var(--warm-sand) 72%,var(--paper)),var(--paper)); }
.post-card { width:100%; border:0; border-radius:19px; padding:13px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.post-card.pinned { background:color-mix(in srgb,var(--sunlit-gold) 22%,var(--paper)); }
.post-stamp { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:var(--warm-sand); font-size:17px; }
.post-card small { color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.06em; }
.post-card strong { display:block; margin:2px 0; }
.post-card p { margin:0; color:var(--soft-ink); font-size:11px; line-height:1.35; }

.vault-list, .device-list { display:grid; gap:10px; margin-top:13px; }
.vault-row { width:100%; min-height:74px; border:0; border-radius:18px; padding:12px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.vault-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--sea-mist); font-size:18px; }
.vault-row small { color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.06em; }
.vault-row strong, .vault-row span span { display:block; }
.vault-row span span { margin-top:3px; color:var(--soft-ink); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.device-row { width:100%; min-height:76px; border:0; border-radius:19px; padding:12px 14px; display:grid; grid-template-columns:46px minmax(0,1fr) 12px; align-items:center; gap:11px; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.device-orb { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--sunset-peach); color:var(--on-accent); font-weight:900; font-size:19px; box-shadow:inset 0 0 0 5px rgba(255,255,255,.35); }
.device-orb.large { width:76px; height:76px; margin-bottom:15px; font-size:28px; }
.device-row strong, .device-row small { display:block; }
.device-row small { margin-top:3px; color:var(--soft-ink); line-height:1.35; }
.device-status { width:10px; height:10px; border-radius:50%; background:#aaa; }
.device-status.online { background:#4f9f74; box-shadow:0 0 0 4px rgba(79,159,116,.13); }
.device-status.pairing { background:var(--sunset-peach); box-shadow:0 0 0 4px rgba(246,164,95,.18); }
.device-status.revoked { background:#af6459; }
.device-live-line { margin:3px 0 18px; display:flex; align-items:center; gap:8px; text-transform:capitalize; }
.device-detail input[type="range"] { width:100%; accent-color:var(--coral-glow); margin:12px 0 20px; }

.settings-extra { margin-top:18px; display:grid; gap:8px; }
.capsule-seal { width:100%; margin-top:16px; }
.capsule-entry small { display:block; margin-top:7px; color:var(--soft-ink); font-size:10px; }

.brief-card { background:linear-gradient(160deg,var(--paper),color-mix(in srgb,var(--sea-mist) 46%,var(--paper))); }
.brief-block { margin-top:12px; padding:14px; border-radius:17px; background:var(--cloud-cream); }
.brief-block > span { display:block; color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.brief-block strong { display:block; margin:4px 0 2px; }
.brief-block small { color:var(--soft-ink); }

.calendar-list { display:grid; gap:16px; }
.calendar-month { padding:18px; border-radius:22px; background:var(--paper); box-shadow:var(--shadow-card); }
.calendar-month h2 { margin:0 0 12px; font-size:21px; }
.calendar-month button { width:100%; min-height:64px; padding:10px 0; border:0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; text-align:left; background:transparent; color:var(--ink); }
.calendar-day { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--warm-sand); font-weight:900; }
.calendar-month strong, .calendar-month small { display:block; }
.calendar-month small { color:var(--soft-ink); margin-top:2px; }

.search-box { margin-top:18px; min-height:52px; display:grid !important; grid-template-columns:34px minmax(0,1fr); align-items:center; padding:0 12px; border-radius:17px; background:var(--cloud-cream); border:1px solid var(--hairline); }
.search-box input { border:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
.search-results { margin-top:12px; display:grid; gap:8px; }
.search-result { min-height:64px; border:0; border-radius:16px; padding:11px 13px; display:grid; grid-template-columns:80px minmax(0,1fr); column-gap:9px; text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-card); }
.search-result > span { grid-row:1/3; align-self:center; color:var(--soft-ink); font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.search-result strong { align-self:end; }
.search-result small { align-self:start; margin-top:2px; color:var(--soft-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.notification-list { margin:15px 0; display:grid; gap:8px; }
.notification-row { min-height:62px; border:0; border-radius:16px; padding:10px 12px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:center; text-align:left; background:var(--cloud-cream); color:var(--ink); }
.notification-row > span { font-size:18px; }
.notification-row strong, .notification-row small { display:block; }
.notification-row small { margin-top:2px; color:var(--soft-ink); }

.privacy-points { display:grid; gap:10px; margin-top:18px; }
.privacy-points > div { padding:15px; border-radius:17px; background:var(--cloud-cream); }
.privacy-points span { color:var(--coral-glow); font-size:10px; font-weight:900; }
.privacy-points strong { display:block; margin:3px 0 4px; }
.privacy-points p { margin:0; color:var(--soft-ink); line-height:1.46; }
.bobbi-orb-large.small { width:72px; height:72px; margin:0 0 16px; font-size:26px; }

.network-status { position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index:3100; max-width:calc(100vw - 32px); transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:9px 13px; border-radius:999px; background:var(--ink); color:var(--paper); box-shadow:var(--shadow-soft); font-size:11px; font-weight:800; transition:.22s ease; }
.network-status.show { transform:translate(-50%,0); opacity:1; }

@media (min-width:900px){
  .home-hero-grid { grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr); }
  .home-dashboard-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .home-lower-grid { grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); align-items:start; }
  .home-mini-stack { position:sticky; top:28px; }
  .family-tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .collection-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .surface-body { padding-bottom:44px; }
}

@media (min-width:1200px){
  .studio-banner { grid-template-columns:minmax(300px,.75fr) minmax(0,1fr); }
  .studio-banner-photo { min-height:250px; }
  .studio-banner-photo img { min-height:250px; }
  .family-cover { min-height:330px; }
  .family-cover img, .family-cover-copy { min-height:330px; }
  .family-tools-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .family-tool { min-height:150px; }
}

@media (max-width:699px){
  .page-intro { align-items:stretch; flex-direction:column; }
  .page-intro .primary-button { width:100%; }
  .studio-banner { grid-template-columns:1fr; }
  .studio-banner-photo { min-height:190px; }
  .studio-banner-photo img { min-height:190px; }
  .home-dashboard-grid, .home-lower-grid { gap:22px; }
  .family-cover-copy h2 { font-size:26px; }
  .chat-message { max-width:88%; }
}

@media (max-width:430px){
  .family-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .family-tool { min-height:118px; padding:13px; }
  .plan-stats { gap:7px; }
  .plan-stats button { min-height:78px; }
  .plan-stats strong { font-size:24px; }
  .collection-row { grid-auto-columns:minmax(176px,70vw); }
  .collection-detail-grid { gap:7px; }
  .bobbi-status-strip button { margin-left:0; }
  .composer { gap:7px; padding-left:10px; padding-right:10px; }
}
.postcard-preview { margin:18px 0; overflow:hidden; border-radius:22px; background:var(--paper); box-shadow:var(--shadow-soft); border:1px solid var(--hairline); }
.postcard-preview img, .postcard-image-empty { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--warm-sand); }
.postcard-image-empty { display:grid; place-items:center; font-size:48px; }
.postcard-message { padding:20px; background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--warm-sand) 30%,var(--paper))); }
.postcard-message > span { color:var(--coral-glow); font-size:9px; font-weight:900; letter-spacing:.1em; }
.postcard-message p { margin:10px 0 12px; font-family:Georgia,serif; font-size:20px; line-height:1.45; color:var(--ink); }
.postcard-message small { color:var(--soft-ink); }
a.primary-button, a.soft-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.primary-button.small { min-height:40px; padding:0 13px; border-radius:14px; }