/* ============================================================
   Kinetic Family Hub theme — from the Stitch design system.
   Loaded AFTER app.css so it wins ties. app.css contains four
   generations of tokens (--bg/--panel, --app-*, --product-*,
   --native-*); this file redefines all of them per theme with
   !important, which is what makes light/dark/accent switching
   work everywhere.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- LIGHT (default, explicit light, auto on light OS) ---------- */
:root,
:root[data-theme=light],
:root[data-theme=auto]{
  color-scheme:light!important;
  /* canvas + surfaces (Stitch: canvas #F2F2F7, pure white cards) */
  --app-bg:#f2f2f7!important;
  --surface:#ffffff!important;
  --surface-2:#f4f3f8!important;
  --ink:#1a1b1f!important;
  --ink-muted:#6e7380!important;
  --edge:rgba(209,209,214,.55)!important;
  --chip-on:#1a1b1f!important;
  --chip-on-ink:#ffffff!important;
  /* module identity colors (Apple-inspired, from DESIGN.md) */
  --id-shopping:#007aff!important; --id-calendar:#ff9500!important;
  --id-chores:#34c759!important;   --id-meals:#ff2d55!important;
  --id-reminders:#5856d6!important;--id-pets:#af52de!important;
  --id-maintenance:#00c7be!important;
  /* semantic */
  --ok-bg:color-mix(in srgb,#34c759 14%,#ffffff)!important; --ok-ink:#1d7a3a!important; --ok-edge:color-mix(in srgb,#34c759 40%,#ffffff)!important;
  --warn-bg:color-mix(in srgb,#ff9500 16%,#ffffff)!important; --warn-ink:#8a5200!important;
  --bad-bg:#ffdad6!important; --bad-ink:#93000a!important; --bad-edge:color-mix(in srgb,#ba1a1a 30%,#ffffff)!important;
  /* identity tints (12% on white) */
  --tint-blue:color-mix(in srgb,#007aff 12%,#ffffff)!important;
  --tint-green:color-mix(in srgb,#34c759 12%,#ffffff)!important;
  --tint-amber:color-mix(in srgb,#ff9500 14%,#ffffff)!important;
  --tint-pink:color-mix(in srgb,#ff2d55 10%,#ffffff)!important;
  --tint-violet:color-mix(in srgb,#af52de 11%,#ffffff)!important;
  --tint-sky:color-mix(in srgb,#007aff 9%,#ffffff)!important;
  --tint-lavender:color-mix(in srgb,#5856d6 11%,#ffffff)!important;
  --tint-mint:color-mix(in srgb,#00c7be 12%,#ffffff)!important;
  --tint-red:color-mix(in srgb,#ff3b30 12%,#ffffff)!important;
  --tile-pink:color-mix(in srgb,#ff2d55 22%,#ffffff)!important;
  --tile-purple:color-mix(in srgb,#5856d6 22%,#ffffff)!important;
  --tile-violet:color-mix(in srgb,#af52de 22%,#ffffff)!important;
  --tile-mint:color-mix(in srgb,#00c7be 24%,#ffffff)!important;
  --tile-yellow:color-mix(in srgb,#ffcc00 30%,#ffffff)!important;
  --tile-rose:color-mix(in srgb,#ff375f 20%,#ffffff)!important;
  /* legacy generation 1 (--bg/--panel family) */
  --bg:#f2f2f7!important; --bg-deep:#e9e9ef!important;
  --panel:#ffffff!important; --panel-strong:#ffffff!important;
  --soft:#f4f3f8!important; --line:rgba(209,209,214,.55)!important;
  --text:#1a1b1f!important; --muted:#6e7380!important;
  --done:#a5aab6!important;
  --shadow:0 1px 2px rgba(26,27,31,.05),0 8px 24px rgba(26,27,31,.05)!important;
  --glass-blur:none!important;
  /* legacy generation 2 (--app-* family) */
  --app-bg2:#eceaf2!important;
  --app-surface:#ffffff!important; --app-surface2:#f4f3f8!important;
  --app-text:#1a1b1f!important; --app-muted:#6e7380!important;
  --app-line:rgba(209,209,214,.55)!important;
  --app-hero1:var(--accent)!important;
  --app-hero2:color-mix(in srgb,var(--accent) 64%,#001a41)!important;
  --app-shadow:0 1px 2px rgba(26,27,31,.05),0 8px 24px rgba(26,27,31,.05)!important;
}

/* ---------- DARK (explicit dark, or auto/unset on dark OS) ---------- */
:root[data-theme=dark]{
  color-scheme:dark!important;
  --app-bg:#0d0e12!important;
  --surface:#1a1c22!important;
  --surface-2:#24262e!important;
  --ink:#f1f0f5!important;
  --ink-muted:#a2a7b4!important;
  --edge:rgba(255,255,255,.10)!important;
  --chip-on:var(--accent)!important;
  --chip-on-ink:#ffffff!important;
  --id-shopping:#0a84ff!important; --id-calendar:#ff9f0a!important;
  --id-chores:#30d158!important;   --id-meals:#ff375f!important;
  --id-reminders:#5e5ce6!important;--id-pets:#bf5af2!important;
  --id-maintenance:#40cbc4!important;
  --ok-bg:color-mix(in srgb,#30d158 18%,#1a1c22)!important; --ok-ink:#6fe394!important; --ok-edge:color-mix(in srgb,#30d158 35%,#1a1c22)!important;
  --warn-bg:color-mix(in srgb,#ff9f0a 18%,#1a1c22)!important; --warn-ink:#ffc35e!important;
  --bad-bg:color-mix(in srgb,#ff453a 20%,#1a1c22)!important; --bad-ink:#ff9d96!important; --bad-edge:color-mix(in srgb,#ff453a 36%,#1a1c22)!important;
  --tint-blue:color-mix(in srgb,#0a84ff 20%,#1a1c22)!important;
  --tint-green:color-mix(in srgb,#30d158 18%,#1a1c22)!important;
  --tint-amber:color-mix(in srgb,#ff9f0a 18%,#1a1c22)!important;
  --tint-pink:color-mix(in srgb,#ff375f 18%,#1a1c22)!important;
  --tint-violet:color-mix(in srgb,#bf5af2 18%,#1a1c22)!important;
  --tint-sky:color-mix(in srgb,#0a84ff 14%,#1a1c22)!important;
  --tint-lavender:color-mix(in srgb,#5e5ce6 20%,#1a1c22)!important;
  --tint-mint:color-mix(in srgb,#40cbc4 16%,#1a1c22)!important;
  --tint-red:color-mix(in srgb,#ff453a 18%,#1a1c22)!important;
  --tile-pink:color-mix(in srgb,#ff375f 30%,#1a1c22)!important;
  --tile-purple:color-mix(in srgb,#5e5ce6 32%,#1a1c22)!important;
  --tile-violet:color-mix(in srgb,#bf5af2 28%,#1a1c22)!important;
  --tile-mint:color-mix(in srgb,#40cbc4 28%,#1a1c22)!important;
  --tile-yellow:color-mix(in srgb,#ffd60a 24%,#1a1c22)!important;
  --tile-rose:color-mix(in srgb,#ff375f 26%,#1a1c22)!important;
  --bg:#0d0e12!important; --bg-deep:#101218!important;
  --panel:#1a1c22!important; --panel-strong:#1a1c22!important;
  --soft:#24262e!important; --line:rgba(255,255,255,.10)!important;
  --text:#f1f0f5!important; --muted:#a2a7b4!important;
  --done:#5d626e!important;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.42)!important;
  --glass-blur:none!important;
  --app-bg2:#101218!important;
  --app-surface:#1a1c22!important; --app-surface2:#24262e!important;
  --app-text:#f1f0f5!important; --app-muted:#a2a7b4!important;
  --app-line:rgba(255,255,255,.10)!important;
  --app-hero1:color-mix(in srgb,var(--accent) 80%,#0a0c14)!important;
  --app-hero2:color-mix(in srgb,var(--accent) 38%,#0a0c14)!important;
  --app-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.42)!important;
}
@media (prefers-color-scheme:dark){
  :root[data-theme=auto],
  :root:not([data-theme]){
    color-scheme:dark!important;
    --app-bg:#0d0e12!important;
    --surface:#1a1c22!important;
    --surface-2:#24262e!important;
    --ink:#f1f0f5!important;
    --ink-muted:#a2a7b4!important;
    --edge:rgba(255,255,255,.10)!important;
    --chip-on:var(--accent)!important;
    --chip-on-ink:#ffffff!important;
    --id-shopping:#0a84ff!important; --id-calendar:#ff9f0a!important;
    --id-chores:#30d158!important;   --id-meals:#ff375f!important;
    --id-reminders:#5e5ce6!important;--id-pets:#bf5af2!important;
    --id-maintenance:#40cbc4!important;
    --ok-bg:color-mix(in srgb,#30d158 18%,#1a1c22)!important; --ok-ink:#6fe394!important; --ok-edge:color-mix(in srgb,#30d158 35%,#1a1c22)!important;
    --warn-bg:color-mix(in srgb,#ff9f0a 18%,#1a1c22)!important; --warn-ink:#ffc35e!important;
    --bad-bg:color-mix(in srgb,#ff453a 20%,#1a1c22)!important; --bad-ink:#ff9d96!important; --bad-edge:color-mix(in srgb,#ff453a 36%,#1a1c22)!important;
    --tint-blue:color-mix(in srgb,#0a84ff 20%,#1a1c22)!important;
    --tint-green:color-mix(in srgb,#30d158 18%,#1a1c22)!important;
    --tint-amber:color-mix(in srgb,#ff9f0a 18%,#1a1c22)!important;
    --tint-pink:color-mix(in srgb,#ff375f 18%,#1a1c22)!important;
    --tint-violet:color-mix(in srgb,#bf5af2 18%,#1a1c22)!important;
    --tint-sky:color-mix(in srgb,#0a84ff 14%,#1a1c22)!important;
    --tint-lavender:color-mix(in srgb,#5e5ce6 20%,#1a1c22)!important;
    --tint-mint:color-mix(in srgb,#40cbc4 16%,#1a1c22)!important;
    --tint-red:color-mix(in srgb,#ff453a 18%,#1a1c22)!important;
    --tile-pink:color-mix(in srgb,#ff375f 30%,#1a1c22)!important;
    --tile-purple:color-mix(in srgb,#5e5ce6 32%,#1a1c22)!important;
    --tile-violet:color-mix(in srgb,#bf5af2 28%,#1a1c22)!important;
    --tile-mint:color-mix(in srgb,#40cbc4 28%,#1a1c22)!important;
    --tile-yellow:color-mix(in srgb,#ffd60a 24%,#1a1c22)!important;
    --tile-rose:color-mix(in srgb,#ff375f 26%,#1a1c22)!important;
    --bg:#0d0e12!important; --bg-deep:#101218!important;
    --panel:#1a1c22!important; --panel-strong:#1a1c22!important;
    --soft:#24262e!important; --line:rgba(255,255,255,.10)!important;
    --text:#f1f0f5!important; --muted:#a2a7b4!important;
    --done:#5d626e!important;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.42)!important;
    --glass-blur:none!important;
    --app-bg2:#101218!important;
    --app-surface:#1a1c22!important; --app-surface2:#24262e!important;
    --app-text:#f1f0f5!important; --app-muted:#a2a7b4!important;
    --app-line:rgba(255,255,255,.10)!important;
    --app-hero1:color-mix(in srgb,var(--accent) 80%,#0a0c14)!important;
    --app-hero2:color-mix(in srgb,var(--accent) 38%,#0a0c14)!important;
    --app-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.42)!important;
  }
}

/* ---------- accents (aligned to the identity palette) ---------- */
:root, :root[data-accent=blue]{--accent:#007aff!important;--accent2:#0a84ff!important}
:root[data-accent=teal]{--accent:#30b0c7!important;--accent2:#40cbc4!important}
:root[data-accent=purple]{--accent:#af52de!important;--accent2:#bf5af2!important}
:root[data-accent=green]{--accent:#34c759!important;--accent2:#30d158!important}
:root[data-accent=rose]{--accent:#ff2d55!important;--accent2:#ff375f!important}
:root[data-accent=amber]{--accent:#ff9500!important;--accent2:#ff9f0a!important}

/* ---------- typography ---------- */
html,body,button,input,select,textarea{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important}
h1{font-weight:700!important;letter-spacing:-.4px!important}
h2{font-weight:700!important;letter-spacing:-.4px!important}
.title{font-weight:600!important;letter-spacing:-.2px!important}
.eyebrow,.nav-group summary,.pantry-category-head h3,.pref-label,.home-section-title{
  font-size:.74rem!important;font-weight:600!important;letter-spacing:.5px!important;text-transform:uppercase!important}

/* ---------- global surfaces ---------- */
html,body{
  background:
    radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 34%),
    radial-gradient(circle at 12% 90%,color-mix(in srgb,#5856d6 7%,transparent),transparent 30%),
    var(--app-bg)!important;
  color:var(--ink)!important}
.login-page{background:
  radial-gradient(circle at 12% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 30rem),
  var(--app-bg)!important}
#app.app-shell-native{background:transparent!important;border:0!important;box-shadow:none!important}

button{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--edge)!important;transition:transform .15s ease,background .15s ease,border-color .15s ease!important}
button:active{transform:scale(.95)!important}
button[type=submit]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
  font-size:.8rem!important;font-weight:800!important;letter-spacing:.5px!important;text-transform:uppercase!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 24%,transparent)!important}
input,select,textarea,.search-input{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid transparent!important;border-radius:12px!important;box-shadow:none!important;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important}
input:focus,select:focus,textarea:focus,.search-input:focus{background:var(--surface)!important;border-color:color-mix(in srgb,var(--accent) 38%,transparent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)!important}
input::placeholder,textarea::placeholder,.search-input::placeholder{color:var(--ink-muted)!important}

.title,.section-head h2,.brand-block h1{color:var(--ink)!important}
.meta,.lead.small,#userBadge,.nav-group summary,.pantry-category-head h3{color:var(--ink-muted)!important}
.brand-block .eyebrow{color:var(--accent)!important}

/* ---------- shell: glass topbar, side nav, glass bottom tabs ---------- */
.topbar,#app.app-shell-native .topbar{
  background:color-mix(in srgb,var(--surface) 72%,transparent)!important;
  -webkit-backdrop-filter:blur(12px) saturate(160%)!important;backdrop-filter:blur(12px) saturate(160%)!important;
  border:1px solid var(--edge)!important;border-radius:16px!important}
#menuBtn{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--edge)!important}
.side-nav{background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:24px!important}
.nav-group{background:transparent!important;border:0!important}
.nav-group .nav-page,.side-nav-scroll>.nav-page{background:transparent!important;color:var(--ink)!important;border:0!important;border-radius:12px!important;font-weight:500!important}
.nav-group .nav-page:hover,.side-nav-scroll>.nav-page:hover{background:var(--surface-2)!important}
.nav-page.active,.side-nav-scroll>.nav-page.active,.bottom-tabs .nav-page.active,#app.app-shell-native .bottom-tabs .nav-page.active{
  background:color-mix(in srgb,var(--accent) 14%,transparent)!important;border:0!important;color:var(--accent)!important;font-weight:600!important}
.bottom-tabs,#app.app-shell-native .bottom-tabs{
  background:color-mix(in srgb,var(--surface) 78%,transparent)!important;
  -webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important;
  border:1px solid var(--edge)!important;border-radius:999px!important;
  margin:0 6px calc(8px + var(--safe-bottom))!important;
  box-shadow:0 18px 50px rgba(20,28,45,.18)!important}
.bottom-tabs .nav-page.active{background:color-mix(in srgb,var(--accent) 15%,transparent)!important;border-radius:999px!important}
.bottom-tabs .nav-page{background:transparent!important;border:0!important;color:var(--ink-muted)!important;font-weight:500!important}
.bottom-tabs .nav-page.active{color:var(--accent)!important}
.nav-scrim{background:rgba(10,11,15,.40)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}

/* ---------- cards, panels, lists ---------- */
.login-panel,section.view,.inner-panel,.summary-card,.page-card,.more-pages-panel,.add-panel,
.focus-grid .primary-card,.compact-page-grid .page-card,.event,.today-card,.native-hub-card,
.calendar-app-event,.app-project-card,.meal-planner-hero,.meal-plan-row,.planned-meals-section,
.today-ask-form,.pet-health-app,#projectCategoryList>.empty,#household>.settings-grid>.inner-panel,
#household .add-panel,#household .project-summary,#meals .planned-meals-section{
  background:var(--surface)!important;border:1px solid var(--edge)!important;color:var(--ink)!important;
  border-radius:16px!important;box-shadow:var(--shadow)!important}
section.view{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
.inner-panel{box-shadow:none!important}
.person,.item,.project{background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:16px!important}
.pantry-card{background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:16px!important}
.pantry-card.low{border-color:color-mix(in srgb,var(--id-calendar) 55%,transparent)!important;background:color-mix(in srgb,var(--id-calendar) 8%,var(--surface))!important}

#app .focus-grid .primary-card h2,#app .compact-page-grid .page-card h2,#app .today-card h3,
#app .meal-plan-row-head strong,#app .pet-health-tile strong,#app .native-list-head h3,
#app .app-project-card .title,#app .native-empty-card strong,#app .meal-plan-chip b,
#app .project-money-strip b,#app .today-ask-form label span,#app .demo-showcase strong{color:var(--ink)!important}
#app .focus-grid .primary-card .meta,#app .compact-page-grid .page-card .meta,#app .today-card p,
#app .today-card small,#app .today-feed-head span,#app .meal-plan-row-head span,#app .meal-plan-chip small,
#app .pet-health-tile span,#app .native-card-label,#app .native-card-detail,#app .project-money-strip span,
#app .today-ask-form label,#app .demo-showcase .meta,#app #household .project-summary span{color:var(--ink-muted)!important}
#app .primary-card strong,#app .page-card strong{color:var(--accent)!important}
.focus-grid .primary-card .pill,.today-card b,.calendar-time,.meal-plan-chip,.qty-stepper,
.pet-health-tabs span,.meal-planner-tabs span+span,.app-task-row.anytime,.project-category-delete,
.demo-readonly-pill,.native-list-head span,.pet-health-hero,.today-ask-form input{
  background:var(--surface-2)!important;color:var(--ink-muted)!important;border-color:transparent!important}
#app .page-card .pill,#app .add-panel>summary::after{background:color-mix(in srgb,var(--accent) 14%,transparent)!important;color:var(--accent)!important;border:0!important;font-weight:600!important}
#app .add-panel>summary{color:var(--ink)!important}
#app .quick-chip{background:color-mix(in srgb,var(--accent) 13%,transparent)!important;color:var(--accent)!important;border:0!important;font-weight:600!important}
#app .quick-chip:nth-child(2){background:color-mix(in srgb,var(--id-calendar) 13%,transparent)!important;color:color-mix(in srgb,var(--id-calendar) 80%,var(--ink))!important;border:0!important}
#app .quick-chip:nth-child(3){background:color-mix(in srgb,var(--id-chores) 13%,transparent)!important;color:color-mix(in srgb,var(--id-chores) 70%,var(--ink))!important;border:0!important}
#app .quick-chip:nth-child(4){background:color-mix(in srgb,var(--id-meals) 13%,transparent)!important;color:color-mix(in srgb,var(--id-meals) 80%,var(--ink))!important;border:0!important}

/* ---------- home hero: saturated accent gradient, white type ---------- */
#app .simple-home-head,#app .today-home .simple-home-head,#app .calm-home .simple-home-head.section-head{
  background:
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.18),transparent 8rem),
    linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 64%,#001a41))!important;
  color:#fff!important;border:0!important;border-radius:24px!important;
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 30%,transparent)!important}
#app .simple-home-head h2,#app .today-home .simple-home-head h2,
#app .calm-home.today-home .simple-home-head.section-head h2,
#app .simple-home-head h2::after,#app .simple-home-head.section-head h2::after{color:#fff!important}
#app .simple-home-head .meta,#app .calm-home.today-home .simple-home-head.section-head .meta,
#app .calm-home .simple-home-head.section-head .meta{color:rgba(255,255,255,.78)!important}
#app .simple-home-head::before,#app .calm-home .simple-home-head.section-head::before,
#app .today-home .simple-home-head::before{
  content:var(--brand-label,"Family")!important;
  background:rgba(255,255,255,.16)!important;color:#fff!important;
  font-size:.72rem!important;font-weight:600!important;letter-spacing:.5px!important;text-transform:uppercase!important;
  border:1px solid rgba(255,255,255,.25)!important;border-radius:999px!important}

/* ---------- per-section identity ---------- */
#app #shopping>.section-head{background:var(--tint-blue)!important}
#app #chores>.section-head{background:var(--tint-green)!important}
#app #calendar>.section-head{background:var(--tint-amber)!important}
#app #pantry>.section-head{background:var(--tint-pink)!important}
#app #meals>.section-head{background:var(--tint-pink)!important}
#app #pets>.section-head{background:var(--tint-violet)!important}
#app #notices>.section-head{background:var(--tint-sky)!important}
#app #notifications>.section-head{background:var(--tint-lavender)!important}
#app #maintenance>.section-head{background:var(--tint-mint)!important}
#app #household>.section-head{background:var(--tint-blue)!important}
#app .view>.section-head{border-radius:20px!important;border:0!important}
#app #shopping>.section-head h2,#app #chores>.section-head h2,#app #calendar>.section-head h2,
#app #pantry>.section-head h2,#app #meals>.section-head h2,#app #pets>.section-head h2,
#app #notices>.section-head h2,#app #notifications>.section-head h2,
#app #maintenance>.section-head h2,#app #household>.section-head h2{color:var(--ink)!important}
#app #shopping>.section-head .meta,#app #chores>.section-head .meta,#app #calendar>.section-head .meta,
#app #pantry>.section-head .meta,#app #meals>.section-head .meta,#app #pets>.section-head .meta,
#app #notices>.section-head .meta,#app #notifications>.section-head .meta,
#app #maintenance>.section-head .meta,#app #household>.section-head .meta{color:color-mix(in srgb,var(--ink) 64%,transparent)!important}
#app #household>.section-head::before{background:var(--surface)!important;color:var(--ink)!important}

/* ---------- status + task rows ---------- */
.stock-pill,.have-need-pill{border-radius:999px!important;font-weight:600!important;letter-spacing:.3px!important}
.stock-pill.high{background:var(--warn-bg)!important;color:var(--warn-ink)!important}
.stock-pill.low{background:var(--ok-bg)!important;color:var(--ok-ink)!important}
.have-need-pill.have{background:var(--ok-bg)!important;color:var(--ok-ink)!important;border-color:var(--ok-edge)!important}
.have-need-pill.need{background:var(--bad-bg)!important;color:var(--bad-ink)!important;border-color:var(--bad-edge)!important}
#app .app-task-row.overdue{background:var(--tint-red)!important}
#app .app-task-row.today{background:var(--surface)!important}
#app .app-task-row.tomorrow{background:var(--tint-sky)!important}
#app .native-hub-card.note{background:var(--tint-sky)!important}
#app .native-hub-card.homecare{background:var(--tint-mint)!important}
#app .native-hub-card.hot,#app .app-project-card.hot{background:var(--tint-red)!important}
#app .app-project-card.active{background:var(--tint-blue)!important}
#app .app-project-card.done{background:var(--tint-green)!important}

/* ---------- meals / pets / planner ---------- */
#app .meal-planner-tabs span,#app .pet-health-tabs .active,#app .meal-week-title button,#app .today-ask-form button{
  background:var(--chip-on)!important;color:var(--chip-on-ink)!important;border:0!important}
#app .meal-planner-tabs span+span{background:var(--surface-2)!important;color:var(--ink-muted)!important}
#app .meal-plan-add{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;color:var(--accent)!important;font-weight:600!important}
.meal-chip,#meals .meal-chip{background:var(--surface-2)!important;border-radius:10px!important}
.project-progress::-webkit-progress-value{background:var(--accent)!important}
.project-progress::-moz-progress-bar{background:var(--accent)!important}
#app .pet-health-tile{border-radius:16px!important}
#app .pet-health-tile.pink{background:var(--tile-pink)!important}
#app .pet-health-tile.purple{background:var(--tile-purple)!important}
#app .pet-health-tile.violet{background:var(--tile-violet)!important}
#app .pet-health-tile.mint{background:var(--tile-mint)!important}
#app .pet-health-tile.yellow{background:var(--tile-yellow)!important}
#app .pet-health-tile.rose{background:var(--tile-rose)!important}
#app .pet-health-tile span{background:color-mix(in srgb,var(--surface) 55%,transparent)!important}

/* ---------- section-scoped overrides (match app.css's id-scoped rules) ---------- */
#app #shopping .add-panel,#app #chores .add-panel,#app #pantry .add-panel,#app #meals .add-panel,
#app #pets .add-panel,#app #notices .add-panel,#app #notifications .add-panel,
#app #maintenance .add-panel,#app #household .add-panel{
  background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:16px!important}
#app #shopping .item,#app #chores .item,#app #calendar .event,#app #pantry .pantry-row,
#app #meals .person,#app #pets .person,#app #pets .pet-profile-card,#app #notices .person,
#app #notifications .person,#app #maintenance .person,#app #household .project,
#app #household .inner-panel,#app #household .project-summary{
  background:var(--surface)!important;border-color:var(--edge)!important;color:var(--ink)!important}
#app #calendar .calendar-status-card,#app #calendar .calendar-empty-card,#app #pantry .pantry-details,
#app #meals .meal-day,#app #meals .recipe-library-section,#app #meals .planned-meals-section{
  background:var(--surface)!important;border-color:var(--edge)!important;color:var(--ink)!important}
#app #meals .meal-chip{background:var(--surface-2)!important}
#app .native-empty-card,#app #noticesList>.empty,#app #maintenanceList>.empty,#app #choreList>.empty,
#app #calendarEvents>.empty,#app #projectCategoryList>.empty{
  background:var(--surface)!important;border-color:var(--edge)!important;color:var(--ink-muted)!important}
#app .native-card-label{background:color-mix(in srgb,var(--surface) 72%,transparent)!important;color:var(--ink-muted)!important}
#app .app-task-row .title,#app .calendar-app-event .title,#app .native-hub-card .title,
#app .app-project-card .title,#app .native-empty-card strong,#app .native-list-head h3{color:var(--ink)!important}
#app #household .project-summary strong{background:transparent!important;color:var(--ink)!important}
#app #household .project-summary span{background:transparent!important;color:var(--ink-muted)!important}
#app .more-pages-panel>summary,#app .add-panel>summary{color:var(--ink)!important}
#app .more-pages-panel>summary::after{background:color-mix(in srgb,var(--accent) 14%,transparent)!important;color:var(--accent)!important;border:0!important}

/* ---------- login / signup ---------- */
body .login-panel.login-panel{background:var(--surface)!important;border-radius:24px!important}
body .login-panel.hero-panel.hero-panel.hero-panel{
  background:
    radial-gradient(circle at 85% 12%,rgba(255,255,255,.16),transparent 10rem),
    linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#001a41))!important;
  border:0!important;color:#fff!important;border-radius:24px!important;
  box-shadow:0 16px 44px color-mix(in srgb,var(--accent) 32%,transparent)!important}
body .hero-panel.hero-panel h1,body .hero-panel.hero-panel .lead{color:#fff!important}
body .hero-panel.hero-panel .eyebrow{color:rgba(255,255,255,.82)!important}
body .hero-panel.hero-panel .security-note{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important;border-radius:16px!important}
body .hero-panel.hero-panel .security-note .meta,body .hero-panel.hero-panel .security-note span{color:rgba(255,255,255,.85)!important}
body .hero-panel.hero-panel a{color:#fff!important;text-decoration:underline}
button.secondary{
  background:var(--surface-2)!important;
  color:var(--ink)!important;
  border:1px solid var(--edge)!important;
  box-shadow:none!important;
}
button.secondary:hover{
  background:color-mix(in srgb,var(--surface-2) 84%,var(--accent) 16%)!important;
}
button.secondary:active{
  transform:scale(.97)!important;
}

/* ---------- settings: theme cards + accent swatches ---------- */
.pref-group{display:grid;gap:8px;margin-bottom:6px}
.pref-label{color:var(--ink-muted)!important}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.theme-chip input{position:absolute;opacity:0;pointer-events:none}
.theme-chip{position:relative;cursor:pointer}
.theme-chip-card{display:grid;gap:2px;padding:14px;border-radius:16px;border:2px solid var(--edge);min-height:64px;transition:border-color .15s ease}
.theme-chip-card b{font-weight:600;font-size:.92rem}
.theme-chip-card small{font-size:.74rem;opacity:.7}
.theme-chip-auto .theme-chip-card{background:linear-gradient(110deg,#ffffff 64%,#15171d 64.5%);color:#1a1b1f}
.theme-chip-auto .theme-chip-card b,.theme-chip-auto .theme-chip-card small{max-width:62%}
.theme-chip-light .theme-chip-card{background:#ffffff;color:#1a1b1f}
.theme-chip-dark .theme-chip-card{background:#15171d;color:#f1f0f5}
.theme-chip input:checked+.theme-chip-card{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.theme-chip input:focus-visible+.theme-chip-card{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.accent-picker{display:flex;gap:14px;flex-wrap:wrap;padding:6px 2px}
.accent-swatch{position:relative;cursor:pointer}
.accent-swatch input{position:absolute;opacity:0;pointer-events:none}
.accent-swatch span{display:block;width:38px;height:38px;border-radius:999px;border:3px solid transparent;background-clip:padding-box;transition:transform .15s ease,box-shadow .15s ease}
.accent-swatch[data-swatch=blue] span{background-color:#007aff}
.accent-swatch[data-swatch=green] span{background-color:#34c759}
.accent-swatch[data-swatch=rose] span{background-color:#ff2d55}
.accent-swatch[data-swatch=amber] span{background-color:#ff9500}
.accent-swatch[data-swatch=purple] span{background-color:#af52de}
.accent-swatch[data-swatch=teal] span{background-color:#30b0c7}
.accent-swatch input:checked+span{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ink);transform:scale(1.04)}
.accent-swatch input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}

/* ---------- nav icons (inline SVG masks; CSP-safe) ---------- */
.side-nav .nav-page{display:flex!important;align-items:center;gap:10px}
.side-nav .nav-page::before{
  content:""!important;flex:0 0 auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.nav-page[data-view=home]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E")}
.nav-page[data-view=shopping]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17' cy='20' r='1.6'/%3E%3Cpath d='M2 3h3l2.6 12h10.2L21 7H6'/%3E%3C/svg%3E")}
.nav-page[data-view=meals]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4 3v4a3 3 0 0 0 6 0V3M7 11v10M17 3c-2 2-2 6-2 8h4c0-2 0-6-2-8zM17 11v10'/%3E%3C/svg%3E")}
.nav-page[data-view=pantry]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v13H4zM4 8l2-5h12l2 5M12 3v5'/%3E%3C/svg%3E")}
.nav-page[data-view=chores]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.nav-page[data-view=calendar]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E")}
.nav-page[data-view=notices]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14a3 3 0 0 1-3 3H8l-5 4V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3z'/%3E%3C/svg%3E")}
.nav-page[data-view=notifications]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/%3E%3Cpath d='M10 20a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E")}
.nav-page[data-view=household]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5l5 5M9.5 9.5 4 15v5h5l5.5-5.5M13 6l5 5 3-3-5-5z'/%3E%3C/svg%3E")}
.nav-page[data-view=maintenance]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4.5 4.5 0 0 0-6 6L3 18v3h3l5.5-5.5a4.5 4.5 0 0 0 6-6L14 13l-3-3z'/%3E%3C/svg%3E")}
.nav-page[data-view=pets]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='9' r='1.8'/%3E%3Ccircle cx='18' cy='9' r='1.8'/%3E%3Ccircle cx='9.5' cy='5.5' r='1.8'/%3E%3Ccircle cx='14.5' cy='5.5' r='1.8'/%3E%3Cpath d='M12 11c-3 0-5.5 3-5.5 5.3 0 1.5 1.2 2.7 2.7 2.7 1 0 1.9-.5 2.8-.5s1.8.5 2.8.5c1.5 0 2.7-1.2 2.7-2.7C17.5 14 15 11 12 11z'/%3E%3C/svg%3E")}
.nav-page[data-view=settings]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 12a7 7 0 0 0-.15-1.4l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2.4-1.4L13.6 2h-3.2l-.45 2.6a7 7 0 0 0-2.4 1.4l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .5.05.9.15 1.4l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2.4 1.4l.45 2.6h3.2l.45-2.6a7 7 0 0 0 2.4-1.4l2.4 1 2-3.4-2-1.6c.1-.5.15-.9.15-1.4z'/%3E%3C/svg%3E")}
.nav-page[data-view=admin]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z'/%3E%3C/svg%3E")}

/* ---------- desktop shell: persistent Stitch sidebar ---------- */
@media (min-width:1024px){
  #app,#app.app-shell,#app.app-shell-native{
    display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;
    column-gap:20px!important;align-items:start!important;
    width:min(1480px,100%)!important;max-width:min(1480px,100%)!important;padding-bottom:28px!important}
  #app>:not(#sideNav){grid-column:2}
  #sideNav,.side-nav{
    grid-column:1!important;grid-row:1/span 40!important;
    position:sticky!important;top:16px!important;left:auto!important;bottom:auto!important;
    transform:none!important;transition:none!important;
    width:auto!important;height:calc(100vh - 32px)!important;max-height:calc(100vh - 32px)!important;
    z-index:5!important;border-radius:24px!important}
  #menuBtn,#closeMenuBtn,.bottom-tabs,#navScrim,.nav-scrim{display:none!important}
  /* sidebar header: workspace identity instead of "Pages" */
  .side-nav-head{padding:14px 12px 10px!important}
  .side-nav-head strong{display:block;font-size:0!important;line-height:0}
  .side-nav-head strong::before{
    content:var(--brand-label,"Family");display:block;
    font-size:1.35rem;line-height:1.2;font-weight:700;letter-spacing:-.4px;color:var(--ink)}
  .side-nav-head strong::after{
    content:"Family dashboard";display:block;margin-top:3px;
    font-size:.66rem;line-height:1.2;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
  .side-nav .nav-page{min-height:44px!important;font-size:.95rem!important}
  .side-nav .nav-page.active{
    background:var(--accent)!important;color:#fff!important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)!important}
  .nav-group{padding:2px 0!important}
  .topbar{border-radius:16px!important}
  .page-list{max-height:none!important;overflow:visible!important}
  /* views fill the content column instead of phone width */
  #app .view,#app section.view{max-width:none!important;width:100%!important}
  /* home: Stitch dashboard arrangement — hero + cards left, Today feed right */
  #app .view:not(.active){display:none!important}
  #home.today-home.active{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
  #home.today-home>.section-head{grid-column:1;margin-bottom:0!important}
  #home.today-home>.today-home-shell{grid-column:2;grid-row:1/span 3}
  #home.today-home>.home-grid,#home.today-home>.more-pages-panel{grid-column:1}
  #home.today-home>.home-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  #home .page-card,#app .compact-page-grid .page-card{grid-template-columns:52px minmax(0,1fr) auto!important}
}

/* ---------- bento touches: hover lift + identity soft glows ---------- */
@media (hover:hover){
  #app .page-card:hover,#app .click-card:hover,#app .summary-card:hover{
    transform:translateY(-3px) scale(1.01)!important;
    box-shadow:0 10px 28px rgba(20,28,45,.10)!important;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease!important}
}
#app #home .page-card{position:relative!important;overflow:hidden!important}
#app #home .page-card::after{
  content:"";position:absolute;right:-26px;bottom:-26px;width:96px;height:96px;border-radius:999px;
  background:var(--glow,var(--accent));filter:blur(34px);opacity:.22;pointer-events:none}
#app #home .page-card[data-view=shopping]{--glow:var(--id-shopping)}
#app #home .page-card[data-view=chores]{--glow:var(--id-chores)}
#app #home .page-card[data-view=calendar]{--glow:var(--id-calendar)}
#app #home .page-card[data-view=pantry],#app #home .page-card[data-view=meals]{--glow:var(--id-meals)}
#app #home .page-card[data-view=pets]{--glow:var(--id-pets)}
#app #home .page-card[data-view=household],#app #home .page-card[data-view=maintenance]{--glow:var(--id-maintenance)}
#app #home .page-card[data-view=notices],#app #home .page-card[data-view=notifications]{--glow:var(--id-reminders)}

/* ---------- polish ---------- */
.event{border-left:4px solid var(--id-calendar)!important}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent)!important;outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-muted) 38%,transparent) transparent}
@media (prefers-reduced-motion:reduce){button:active{transform:none!important}}