/* Lakeday brand tokens — load AFTER css/app.css
   <link rel="stylesheet" href="/css/lakeday-brand.css">
   Only overrides values; no structural CSS is duplicated.
   Palette: Lake Navy #082B55 · Lake Blue #3576A8 · Reflection Blue #75A8CE ·
            Sunrise Gold #F5B63D · Warm Ivory #F7F1E5. Full override layer
            (lockup images, gold-legibility rules, alternate schemes, serif
            retirement) is appended at the end of this file. */

:root{
  /* type — the serif is retired: the whole product is Hanken Grotesk. Both
     vars point at the sans stack so any var(--font-serif) usage anywhere
     (including files that don't otherwise know about the rebrand) keeps
     rendering correctly. */
  --font-serif:var(--font-sans);

  /* brand palette */
  --brand-navy:#082B55;
  --brand-blue:#3576A8;
  --brand-reflection:#75A8CE;
  --brand-gold:#F5B63D;
  --brand-ivory:#F7F1E5;

  /* legacy names — kept as aliases so every var(--brand-*) usage further
     down this file resolves to the new palette without individual edits */
  --brand-terracotta:#F5B63D;
  --brand-sage:#3576A8;
  --brand-ochre:#F5B63D;
  --brand-ink:#082B55;
  --brand-paper:#F7F1E5;

  /* scheme: mist (default) — cooler off-white pages */
  --paper:#EDF1F5;
  --paper-2:#F7FAFC;
  --paper-3:#E4EBF2;
  --paper-border:#D4DFE9;
  --paper-border-soft:#E2EAF1;

  --ink:#082B55;
  --ink-soft:#0C3868;
  --ink-text:#F7F1E5;

  --text-primary:#0E2338;
  --text-secondary:#33506B;
  --text-muted:#5E7591;
  --text-faint:#8CA3B8;
  --text-faintest:#B9C8D6;

  --accent:#F5B63D;
  --accent-ink:#082B55;
  --select:#3576A8;
  --select-soft:#75A8CE;
  --success:#3576A8;
  --danger:#A8402F;
  --danger-bg:#F6E1DC;
}

/* ---- Sidebar brand lockup ---- */
.sidebar-brand{display:flex;flex-direction:column;gap:9px;}
.sidebar-brand-lockup{display:flex;align-items:center;gap:9px;}
.sidebar-brand-lockup img{height:44px;width:auto;display:block;flex-shrink:0;}
.sidebar-brand-name{
  font-family:var(--font-sans);
  font-size:21px;line-height:1;letter-spacing:-.015em;color:#fff;font-weight:300;
}
.sidebar-brand-name b{font-weight:800;}
.sidebar-brand-sub{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);
}

/* ---- Ochre (Household) legibility ----
   White on #D6A33B is 2.3:1. Anything filled with the ochre category colour
   takes ink text instead. readableOnColor() already covers the filter chips;
   this catches CSS-driven fills. */
.month-span-bar[style*="D6A33B"],.month-span-bar[style*="d6a33b"],
.month-label[style*="D6A33B"],.month-label[style*="d6a33b"],
.week-chip[style*="D6A33B"],.week-chip[style*="d6a33b"],
.week-event-block[style*="D6A33B"],.week-event-block[style*="d6a33b"],
.day-event-block[style*="D6A33B"],.day-event-block[style*="d6a33b"],
.cat-filter-btn.on[style*="D6A33B"],.cat-filter-btn.on[style*="d6a33b"]{color:#082B55 !important;}

/* ---- Sign-in / invitation lockup ---- */
.login-logo.login-lockup{display:flex;align-items:center;justify-content:center;gap:10px;}
.login-logo.login-lockup img{height:30px;width:auto;min-width:0;max-width:none;border-radius:0;margin:0;display:block;flex-shrink:0;}
.login-wordmark{
  font-family:var(--font-sans);font-size:28px;line-height:1;letter-spacing:-.02em;
  color:var(--text-primary);font-weight:300;
}
.login-wordmark b{font-weight:800;}

/* ---- Mobile header lockup — rendered in renderTodayPage(), phone only ---- */
.mobile-brand-lockup{display:none;}
@media (max-width:760px){
  /* Sits above .today-header, which carries the page's 18px gutter — match it so
     the mark lines up with the greeting and date below it. */
  .mobile-brand-lockup{display:flex;align-items:center;gap:7px;padding:16px 18px 0;margin:0;}
  #review-strip:not([hidden]){display:block;margin:14px 14px 0;}
  #review-strip .review-strip{align-items:flex-start;gap:10px;padding:12px;}
  #review-strip .review-strip-copy{padding-right:4px;}
  #review-strip .review-strip-copy b{font-size:15px;line-height:1.25;}
  #review-strip .review-strip-copy span{font-size:12px;line-height:1.35;}
  #review-strip .review-strip-icon{width:30px;height:30px;}
  #review-strip .btn{align-self:center;white-space:nowrap;}
}
.mobile-brand-lockup img{height:18px;width:auto;display:block;}
.mobile-brand-lockup span{
  font-family:var(--font-sans);font-size:14px;line-height:1;letter-spacing:-.01em;
  color:var(--text-primary);font-weight:300;
}
.mobile-brand-lockup span b{font-weight:800;}

/* ---- Sign-in / invitation screen, per design frame 13 ---- */
.login-screen{background:var(--paper);padding:32px;}
.login-card{
  width:420px;max-width:100%;text-align:left;
  background:var(--paper-2);border:1px solid var(--paper-border);border-radius:20px;
  padding:34px 34px 30px;box-shadow:none;
}
.login-logo.login-lockup{justify-content:flex-start;margin-bottom:26px;}
.login-logo.login-lockup img{height:26px;width:auto;border-radius:0;margin:0;}
.login-wordmark{font-size:26px;}
.login-title{font-size:24px;line-height:1.2;}
.login-sub{font-size:14px;margin:4px 0 22px;}
.login-form{gap:14px;}
.login-input{
  padding:12px 14px;font-size:15px;background:#fff;
  border:1px solid var(--paper-border);border-radius:10px;color:var(--text-primary);
}
.login-input::placeholder{color:var(--text-faint);}
.login-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.login-btn.btn-primary{
  height:auto;padding:13px 16px;border-radius:11px;
  background:var(--ink);color:var(--ink-text);border:1px solid var(--ink);
  font-size:15px;font-weight:700;
}
.login-btn.btn-primary:hover{background:var(--ink-soft);}
.login-err{margin-top:-4px;}
.login-divider{margin:18px 0;font-weight:600;letter-spacing:.12em;}
.social-login-btn{
  height:46px;border-radius:11px;font-size:15px;font-weight:600;
  background:#fff;border:1px solid var(--paper-border);color:var(--text-primary);
}
.social-login-btn:hover{background:var(--paper-3);}
.login-invite-code-link{
  display:block;margin-top:18px;font-size:12px;font-weight:700;
  color:var(--text-muted);text-decoration:none;
}
.login-invite-code-link:hover{color:var(--accent);}

/* Login splash art. Only the matching <picture> source is downloaded, so
   phones never pay the cost of a desktop-sized image. */
.login-screen.login-screen--splash{
  position:relative;isolation:isolate;overflow:hidden;
  justify-content:flex-end;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#082B55;
  padding:clamp(24px,4vw,64px);
}
html:has(.login-screen--splash),
body:has(.login-screen--splash),
body:has(.login-screen--splash) #app{
  min-height:100%;
  min-height:100dvh;
  background:#082B55;
}
.login-splash-media{
  position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;
  background:#082B55;
}
.login-splash-media img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:login-splash-reveal .45s ease-out both;
}
.login-splash-overlay{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,17,13,.08) 0%,rgba(20,17,13,.12) 44%,rgba(20,17,13,.58) 100%),
    linear-gradient(180deg,rgba(20,17,13,.04),rgba(20,17,13,.18));
}
.login-splash-copy{
  position:absolute;z-index:1;left:clamp(32px,3.15vw,66px);top:34%;
  width:min(49vw,760px);color:#fff;text-align:left;text-shadow:0 2px 22px rgba(0,0,0,.4);
}
.login-splash-copy span{display:block;font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.login-splash-copy h1{font-family:var(--font-serif);font-size:clamp(46px,4.25vw,82px);line-height:1.03;margin:0;max-width:760px;}
.login-splash-copy p{font-size:clamp(16px,1.35vw,24px);line-height:1.45;max-width:690px;margin:34px 0 0;}
.login-splash-brand{
  position:absolute;z-index:1;left:clamp(32px,3.15vw,66px);top:clamp(30px,5.5vh,64px);
  display:flex;align-items:center;gap:12px;color:#fff;font-size:25px;text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.login-splash-brand img{display:block;width:37px;height:37px;}
.login-splash-brand b{font-weight:800;}
.login-splash-foot{
  position:absolute;z-index:1;left:clamp(32px,3.15vw,66px);bottom:clamp(24px,4.5vh,50px);
  color:#fff;font-size:13px;font-weight:650;text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.login-screen--splash .login-card .login-logo{display:none;}
.login-screen--splash .login-card{
  position:relative;z-index:1;margin:0;
  background:rgba(248,245,237,.94);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 24px 72px rgba(20,17,13,.3);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  backdrop-filter:blur(18px) saturate(115%);
}
@keyframes login-splash-reveal{
  from{opacity:.55;transform:scale(1.012);}
  to{opacity:1;transform:scale(1);}
}
@media (max-width:1180px){
  .login-screen.login-screen--splash{padding:clamp(22px,4vw,44px);}
  .login-splash-overlay{
    background:
      linear-gradient(90deg,rgba(20,17,13,.08),rgba(20,17,13,.38)),
      linear-gradient(180deg,rgba(20,17,13,.02),rgba(20,17,13,.18));
  }
  .login-splash-copy{width:min(50vw,560px);}
  .login-splash-copy h1{font-size:clamp(36px,4.5vw,58px);}
}
@media (max-width:640px){
  .login-screen.login-screen--splash{
    align-items:flex-end;justify-content:center;
    box-sizing:border-box;
    padding:
      calc(18px + env(safe-area-inset-top,0px))
      max(14px,env(safe-area-inset-right,0px))
      calc(18px + env(safe-area-inset-bottom,0px))
      max(14px,env(safe-area-inset-left,0px));
  }
  .login-splash-overlay{
    background:linear-gradient(180deg,rgba(20,17,13,.06) 0%,rgba(20,17,13,.18) 44%,rgba(20,17,13,.72) 100%);
  }
  .login-screen--splash .login-card{
    width:100%;max-width:440px;padding:26px 22px 22px;border-radius:18px;
  }
  .login-logo.login-lockup{margin-bottom:20px;}
  .login-sub{margin-bottom:18px;}
  .login-splash-copy{display:none;}
  .login-splash-brand,.login-splash-foot{display:none;}
  .login-screen--splash .login-card .login-logo{display:flex;}
}
@media (prefers-reduced-motion:reduce){
  .login-splash-media img{animation:none;}
}

/* Invitation acceptance: the same card on ink, as drawn in frame 13 */
.login-screen.invite-screen{background:var(--paper);}
.login-card.invite-card{
  background:var(--ink);border-color:var(--ink);color:#F7F1E5;
}
.invite-card .login-title{color:#fff;}
.invite-card .login-sub{color:#A9C2D8;}
.invite-card .login-wordmark{color:#fff;}
.invite-card .login-input{background:transparent;border-color:rgba(255,255,255,.16);color:#DCE9F3;}
.invite-card .login-input::placeholder{color:#6E93B5;}
.invite-card .login-btn.btn-primary{background:var(--brand-ochre);border-color:var(--brand-ochre);color:var(--ink);}
.invite-card .login-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}

/* app.css sizes .login-logo img as a 56px square crest; the mark is 100:86,
   so it must never be forced square. */
.login-logo.login-lockup img{width:auto !important;height:26px !important;border-radius:0 !important;margin:0 !important;}
.mobile-brand-lockup img,.sidebar-brand-lockup img{width:auto !important;border-radius:0 !important;}


/* =========================================================================
   Page-level brand pass — Settings, Import, Menu, dish editor, search.
   Keyed to the app's existing class names; no markup changes required.
   ========================================================================= */

.page-subtitle{max-width:70ch;text-wrap:pretty;}
.section-label{letter-spacing:.14em;}

/* ---- Settings & Import (Import reuses .settings-page/.settings-section) ----
   NOTE: .settings-page must keep height:100% + overflow-y:auto — it is the page's
   own scroll container. Below 1100px it falls back to a single column. */
.settings-page{
  height:100%;overflow-y:auto;padding:34px 40px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-content:start;
}
/* full-width rows: the page header, the Appearance card and the Display/Status pair */
.settings-page>div:first-child,
.settings-page>.appearance-card,
.settings-page>.secondary-settings-grid{grid-column:1/-1;}
@media (max-width:1100px){
  .settings-page{display:flex;flex-direction:column;}
  /* This file redefines .secondary-settings-grid (below) without carrying over
     app.css's mobile-collapse breakpoints, and being the later-loaded
     stylesheet it silently wins — so those breakpoints never actually applied.
     Re-declare the collapse here where it will actually take effect. */
  .secondary-settings-grid{grid-template-columns:1fr;}
}
.settings-title{font-family:var(--font-serif);font-size:34px;font-weight:600;}
.settings-subtitle{font-size:14px;color:var(--text-muted);margin-top:4px;}
.settings-section{
  background:var(--paper-2);border:1px solid var(--paper-border);border-radius:16px;
  padding:22px 26px;
}
.settings-section-title{
  font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--text-primary);
  letter-spacing:0;text-transform:none;margin-bottom:14px;
}
.settings-section-title.upper{
  font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);
}
.settings-section-toolbar{gap:12px;}
.settings-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--paper-border-soft);
}
.settings-row:first-of-type{border-top:none;}
.settings-row-label{font-size:15px;font-weight:600;color:var(--text-primary);}

/* Import candidate rows (Google Calendar + email) */
.gcal-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-top:1px solid var(--paper-border-soft);border-bottom:0;
}
.import-row-main{flex:1;min-width:0;cursor:pointer;}
.import-row-main b{font-size:16px;font-weight:700;color:var(--text-primary);}
.import-row-main small{display:block;font-size:13px;color:var(--text-muted);margin-top:3px;}
.import-row-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.import-row-actions .btn{font-size:13px;padding:7px 14px;border-radius:9px;}
.gcal-notice{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#7A5A12;background:color-mix(in srgb,var(--brand-ochre) 22%,var(--paper-2));
  padding:2px 7px;border-radius:5px;
}

/* ---- Menu page ---- */
.menu-panel{border-radius:16px;padding:18px;}
.menu-week-nav strong{font-size:15px;font-weight:700;color:var(--text-primary);}
.menu-week-grid{grid-template-columns:repeat(7,minmax(0,1fr));}
.menu-day-column{padding:0 8px;}
.menu-day-column+.menu-day-column{border-left:1px solid var(--paper-border-soft);}
.menu-day-column.today .menu-day-head b{color:var(--accent);}
.menu-day-head{display:flex;flex-direction:column;gap:1px;padding-bottom:10px;}
.menu-day-head b{font-size:12px;font-weight:700;color:var(--text-secondary);}
.menu-day-head span{font-size:10px;color:var(--text-faint);}
.menu-meal-slot{border-top:1px solid var(--paper-border-soft);padding:9px 0;}
.menu-meal-label{
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:5px;
}
.menu-meal-slot.drag-over{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px;}
.menu-assigned-dish{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--text-primary);
  background:var(--paper-3);border-radius:6px;padding:5px 7px;line-height:1.25;
}
.menu-assigned-dish button{border:0;background:none;color:var(--text-faint);cursor:pointer;font-size:13px;line-height:1;padding:0;}
.menu-drop-hint{font-size:10px;color:var(--text-faintest);}
.menu-dish-card{
  background:var(--paper);border:1px solid var(--paper-border-soft);border-radius:12px;
  padding:12px 14px;cursor:grab;
}
.menu-dish-card:hover{border-color:var(--paper-border);background:var(--paper-2);}
.menu-dish-card.dragging{opacity:.5;}
.menu-dish-copy b{font-size:14px;font-weight:700;color:var(--text-primary);}
.menu-dish-copy small{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;}
.menu-dish-type-select{
  font-size:13px;font-weight:700;color:var(--text-primary);
  background:var(--paper);border:1px solid var(--paper-border);border-radius:9px;padding:7px 12px;
}
.menu-empty{font-size:13px;color:var(--text-muted);line-height:1.5;}

/* ---- Dish / recipe editor ---- */
.recipe-editor-shell{max-width:512px;}
.recipe-mode-picker{display:flex;gap:10px;margin-bottom:18px;}
.recipe-mode-option{
  flex:1;text-align:left;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--paper-border);border-radius:12px;padding:12px 14px;
  font-family:var(--font-sans);
}
.recipe-mode-option b{display:block;font-size:14px;font-weight:700;color:var(--text-primary);}
.recipe-mode-option small{display:block;font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.4;}
.recipe-mode-option.active{border-color:var(--ink);background:var(--paper-3);}
.recipe-field{display:block;margin-bottom:13px;}
.recipe-field>span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:6px;
}
.recipe-field input,.recipe-field textarea,.recipe-field select,.recipe-import-row input{
  width:100%;font:inherit;font-size:14px;line-height:1.5;color:var(--text-primary);
  background:var(--paper);border:1px solid var(--paper-border);border-radius:10px;padding:11px 13px;
}
.recipe-field input:focus,.recipe-field textarea:focus,.recipe-import-row input:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}
.recipe-import-row{display:flex;gap:8px;margin-bottom:8px;}
.recipe-import-status{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:14px;}
.recipe-import-status.loading{color:var(--brand-ochre);}
.recipe-import-status.ok{color:var(--brand-sage);}
.recipe-import-status.err{color:var(--danger);}

/* ---- Unified search ---- */
.search-modal-backdrop{background:color-mix(in srgb,var(--ink) 82%,transparent);}
.search-modal-card{
  width:660px;max-width:92vw;background:var(--paper);border-radius:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.4);overflow:hidden;
}
.search-input-row{
  display:flex;align-items:center;gap:12px;padding:20px 24px;
  border-bottom:1px solid var(--paper-border);
}
.search-input-row input{
  flex:1;border:0;background:none;font:inherit;font-size:19px;color:var(--text-primary);outline:none;
}
.search-input-icon{
  display:block;width:20px;height:20px;flex:0 0 20px;background:var(--text-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m20.7 19.3-4.2-4.2a7 7 0 1 0-1.4 1.4l4.2 4.2a1 1 0 0 0 1.4-1.4ZM5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m20.7 19.3-4.2-4.2a7 7 0 1 0-1.4 1.4l4.2 4.2a1 1 0 0 0 1.4-1.4ZM5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.search-close-btn{
  font-size:11px;font-weight:600;color:var(--text-muted);
  border:1px solid var(--paper-border);border-radius:6px;background:none;padding:3px 7px;cursor:pointer;
}
.search-results{padding:16px 14px 20px;max-height:60vh;overflow:auto;}
.search-result-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;
}
.search-result-row:hover,.search-result-row.active{background:var(--paper-3);}
.search-result-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.search-result-main b{font-size:15px;font-weight:600;color:var(--text-primary);}
.search-result-main small{display:block;font-size:12px;color:var(--text-muted);margin-top:2px;}
.search-result-kind{
  margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.search-empty{font-size:14px;color:var(--text-muted);padding:18px 12px;}

/* ---- Settings: appearance card, household, status ---- */
.appearance-card,.settings-section{
  background:var(--paper-2);border:1px solid var(--paper-border);border-radius:16px;padding:22px 26px;
}
.appearance-card-title{
  font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--text-primary);
  letter-spacing:0;text-transform:none;margin-bottom:6px;
}
.appearance-note,.settings-section-note{
  font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:10px;max-width:64ch;text-wrap:pretty;
}
.appearance-sub-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:14px 0 10px;
}
.secondary-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* segmented tabs (Color/Photo, Light/Dark/Auto) */
.seg-tabs{display:inline-flex;gap:6px;background:var(--paper-3);border-radius:10px;padding:4px;}
.seg-tab{
  font:inherit;font-size:13px;font-weight:500;color:var(--text-muted);
  background:none;border:0;border-radius:7px;padding:6px 16px;cursor:pointer;
}
.seg-tab.active{background:var(--paper-2);color:var(--text-primary);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08);}

/* scheme swatches + accent dots */
.scheme-swatches{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.scheme-swatch{background:none;border:0;padding:0;cursor:pointer;text-align:center;}
.scheme-swatch-chip{
  width:62px;height:46px;border-radius:10px;border:1px solid var(--paper-border);
}
.scheme-swatch.active .scheme-swatch-chip{border:3px solid var(--accent);}
.scheme-swatch-label{font-size:11px;color:var(--text-muted);margin-top:5px;}
.scheme-swatch.active .scheme-swatch-label{color:var(--text-secondary);font-weight:600;}
.accent-dots{display:flex;gap:12px;align-items:center;}
.accent-dot{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;padding:0;}
.accent-dot.active{border:3px solid var(--ink);box-shadow:0 0 0 2px var(--paper-2) inset;}

/* household */
.household-member-row{gap:12px;}
.household-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-3);color:var(--text-muted);font-size:14px;font-weight:700;
}
.household-avatar.pending{background:transparent;border:1.5px dashed var(--paper-border);}
.household-member-email{font-size:12px;color:var(--text-muted);margin-top:2px;}
.role-badge{
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--text-muted);background:var(--paper-3);padding:3px 8px;border-radius:5px;flex-shrink:0;
}
.role-badge.primary{color:var(--ink);background:color-mix(in srgb,var(--brand-ochre) 45%,var(--paper-2));}
.role-badge.invited{color:#7A5A12;background:color-mix(in srgb,var(--brand-ochre) 20%,var(--paper-2));}
.household-invite-form{display:flex;gap:8px;margin-top:14px;}
.household-invite-form input{
  flex:1;min-width:0;font:inherit;font-size:14px;color:var(--text-primary);
  background:var(--paper);border:1px solid var(--paper-border);border-radius:10px;padding:10px 13px;
}
.household-invite-form input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.household-invite-status{font-size:12px;color:var(--text-muted);margin-top:8px;}
.household-invite-link{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--paper-3);border-radius:10px;padding:9px 11px;
}
.household-invite-link input{
  flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12px;color:var(--text-muted);outline:none;
}
.household-pending-title{margin-top:18px;}
.home-badge{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:color-mix(in srgb,var(--brand-ochre) 45%,var(--paper-2));
  padding:2px 7px;border-radius:5px;margin-left:8px;
}

/* toggles */
.switch-slider{background:var(--paper-border);}
.switch input:checked + .switch-slider{background:var(--brand-sage);}
.settings-sub-options{margin:0 0 8px 18px;padding-left:14px;border-left:2px solid var(--paper-border-soft);}
.settings-sub-options .settings-row{gap:18px;}
.settings-sub-options .settings-row>div:first-child{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;}
.settings-sub-options small{color:var(--text-muted);font-size:11px;line-height:1.35;}
.settings-sub-options.is-disabled{opacity:.5;}

/* ---- Settings tabs: only the active section's cards are shown ---- */
.settings-page[data-tab] > [data-settings-tab]{display:none;}
.settings-page[data-tab="get-started"] > [data-settings-tab="get-started"],
.settings-page[data-tab="display"] > [data-settings-tab="display"],
.settings-page[data-tab="household"] > [data-settings-tab="household"],
.settings-page[data-tab="accounts"] > [data-settings-tab="accounts"],
.settings-page[data-tab="weather"] > [data-settings-tab="weather"],
.settings-page[data-tab="news"] > [data-settings-tab="news"]{display:block;}
.settings-page[data-tab="display"] > .secondary-settings-grid[data-settings-tab="display"]{display:grid;}
.accounts-settings-grid{grid-column:1/-1;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;}
.settings-page[data-tab="accounts"] > .accounts-settings-grid{display:grid;}
.import-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.next-up-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.quick-add-icon{display:block;width:20px;height:20px;background:currentColor;}
.quick-add-icon.event{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9Z'/%3E%3C/svg%3E") center/contain no-repeat;}
.quick-add-icon.task{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 3a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h14Zm-1.3 5.3-7.2 7.2-3.2-3.2-1.4 1.4 4.6 4.6 8.6-8.6-1.4-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 3a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h14Zm-1.3 5.3-7.2 7.2-3.2-3.2-1.4 1.4 4.6 4.6 8.6-8.6-1.4-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ---- Settings section tab links (replaces the static subtitle) ---- */
.settings-jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.settings-jump button{
  font:inherit;font-size:14px;font-weight:500;color:var(--text-muted);
  background:none;border:0;border-radius:8px;padding:5px 10px;cursor:pointer;
  transition:background .12s,color .12s;
}
.settings-jump button:hover{background:var(--paper-3);color:var(--text-primary);}
.settings-jump button.active{color:var(--text-primary);font-weight:700;background:var(--paper-3);}
.settings-jump button+button{position:relative;}
.settings-jump button+button::before{
  content:'·';position:absolute;left:-6px;color:var(--text-faintest);
}
.settings-jump button.active{box-shadow:inset 0 -2px 0 var(--accent);}
.settings-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.settings-logout{flex:0 0 auto;margin-top:4px}

/* ═══════════════════════════════════════════════════════════════════════
   Lakeday v2 — streamlined flows (Today hero, review strip, day-row
   Menu, batch Import, sidebar status, first run, ambient photo mode)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --tb-card:#F7FAFC;
  --tb-page:#EDF1F5;
  --tb-thumb-empty:#E4EBF2;
  --tb-shadow:0 1px 2px rgba(8,43,85,.05),0 12px 28px rgba(8,43,85,.07);
  --tb-shadow-lift:0 20px 44px rgba(8,43,85,.24);
  --tb-tap:48px;
}

a{color:var(--accent);}
a:hover{color:var(--text-primary);}

.app-update-banner{
  position:fixed;z-index:10020;top:18px;left:50%;transform:translateX(-50%);
  width:min(680px,calc(100vw - 36px));display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 14px 13px 18px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--paper-border));
  border-radius:14px;background:var(--tb-card);color:var(--text-primary);box-shadow:0 18px 46px rgba(37,33,29,.24);
}
.app-update-banner[hidden]{display:none;}
.app-update-banner>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.app-update-banner b{font-size:14px;}
.app-update-banner span{font-size:12.5px;color:var(--text-muted);}
.app-update-banner button{flex:0 0 auto;}

/* ---- Type ramp: 42 / 21 / 17 / 14 / 11 ---- */
.page-title{font-size:42px;line-height:1.05;}
.page-subtitle{font-size:16px;margin-top:6px;}
.section-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--text-faint);}

/* ---- Cards lose their borders; one soft shadow instead ---- */
.settings-section,.menu-panel{border:none!important;background:var(--tb-card);box-shadow:var(--tb-shadow);border-radius:18px;}

/* ---- Touch targets ---- */
.btn{min-height:44px;}
.btn.btn-sm{min-height:38px;}
.btn-accent{background:var(--accent);color:#fff;border:none;font-weight:700;}
.btn-ghost{background:transparent;border:none;color:var(--text-muted);font-weight:600;}

/* ---- Category chip: colour AND label ---- */
.cat-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;white-space:nowrap;
  color:var(--cc,var(--text-muted));
  background:color-mix(in srgb,var(--cc,#999) 16%,transparent);
}

/* ═══ Sidebar ═══════════════════════════════════════════════════════════ */
.sidebar-nav{display:flex;flex-direction:column;gap:3px;margin-top:26px;}
.sidebar-nav .nav-item{
  display:flex;align-items:center;gap:14px;
  min-height:var(--tb-tap);padding:0 15px;border-radius:12px;
  font-size:16px;font-weight:500;color:#A9C2D8;text-decoration:none;
}
.sidebar-nav .nav-item .nav-icon{flex-shrink:0;opacity:.9;}
.sidebar-nav .nav-item:hover{background:rgba(255,255,255,.08);color:#DCE9F3;}
.sidebar-nav .nav-item.active{background:rgba(117,168,206,.22);color:#fff;font-weight:800;box-shadow:inset 3px 0 #75A8CE;}
.nav-dot{display:none;}

.sidebar-util{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);}
.nav-util{
  display:flex;align-items:center;gap:13px;width:100%;
  min-height:46px;padding:0 15px;border-radius:11px;
  background:none;border:none;cursor:pointer;text-align:left;text-decoration:none;
  font-family:inherit;font-size:15px;font-weight:500;color:#7E9DBB;
}
.nav-util:hover{background:rgba(255,255,255,.08);color:#DCE9F3;}
.nav-util.active{background:rgba(255,255,255,.14);color:#fff;font-weight:700;}
.nav-util .nav-label{flex:1;}
.nav-badge{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.nav-badge[hidden]{display:none;}

.app-sidebar{position:relative;}
.sidebar-search-wrap{display:none;}

/* ═══ Today ═════════════════════════════════════════════════════════════ */
.review-strip{
  display:flex;align-items:center;gap:16px;
  background:color-mix(in srgb,var(--accent) 14%,var(--paper-2));
  border-radius:14px;padding:14px 18px;margin-bottom:16px;
}
.review-strip-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
}
.review-strip-copy{flex:1;display:flex;flex-direction:column;gap:2px;}
.review-strip-copy b{font-size:16px;color:var(--text-primary);}
.review-strip-copy span{font-size:13.5px;color:var(--text-muted);}
.review-strip-x{background:none;border:none;font-size:22px;line-height:1;color:var(--text-faint);cursor:pointer;padding:0 4px;}

.add-menu-wrap{position:relative;}
.btn-add .btn-caret{
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  width:12px;height:12px;margin-left:8px;opacity:.65;transition:transform .14s;
}
.btn-add .btn-caret::before{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.add-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:236px;
  background:var(--tb-card);border-radius:14px;padding:8px;box-shadow:var(--tb-shadow-lift);
}
.add-menu[hidden]{display:none;}
.add-menu button{
  display:flex;align-items:center;gap:13px;width:100%;
  min-height:var(--tb-tap);padding:0 12px;border:none;border-radius:10px;
  background:none;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--text-primary);
}
.add-menu button:hover{background:var(--paper-3);}

.next-up{
  background:var(--ink);color:var(--ink-text);
  border-radius:18px;padding:24px 26px;margin-bottom:16px;cursor:pointer;
  box-shadow:0 14px 32px rgba(8,43,85,.22);
}
.next-up.is-empty{background:var(--ink);color:var(--ink-text);box-shadow:0 14px 32px rgba(8,43,85,.22);cursor:default;}
.next-up-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.next-up-kicker{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.next-up.is-empty .next-up-kicker{color:#A9C2D8;}
.next-up .cat-chip{background:rgba(255,255,255,.14);color:#fff;}
.next-up-main{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:12px;}
.next-up-time{font-size:34px;font-weight:300;font-variant-numeric:tabular-nums;color:#fff;}
.next-up-time small{font-size:18px;margin-left:4px;}
.next-up.is-empty .next-up-time{color:#fff;}
.next-up-title{font-family:var(--font-serif,Spectral),serif;font-size:38px;font-weight:600;line-height:1.05;color:#fff;}
.next-up.is-empty .next-up-title{font-size:26px;line-height:1.25;margin-top:12px;color:#fff;}
.next-up.is-empty{padding:26px;}
.next-up-meta{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:15px;color:#A9C2D8;}
.next-up-meta:empty{display:none;}
.next-up-meta a{color:#DCE9F3;}
.next-up-prep{color:#E8CD9E;}

/* ═══ Menu ══════════════════════════════════════════════════════════════ */
.page-menu{display:flex;flex-direction:column;gap:18px;height:100%;position:relative;overflow:hidden;}
.menu-tabbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.menu-tabs{display:inline-flex;background:var(--paper-3);border-radius:13px;padding:4px;gap:2px;}
.menu-tab{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:0 20px;border:none;border-radius:10px;
  background:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--text-muted);
}
.menu-tab.active{background:var(--tb-card);color:var(--text-primary);font-weight:700;box-shadow:0 2px 6px rgba(37,33,29,.1);}
.menu-tab-badge{font-size:12px;font-weight:800;background:var(--accent);color:#fff;border-radius:10px;padding:2px 8px;}
.menu-tabbar-actions{display:flex;align-items:center;gap:10px;}
.menu-body{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0;}
.menu-plan-layout{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;}
.menu-plan-content{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px;}
.menu-meal-filter{position:relative;}
.menu-filter-button{display:inline-flex;align-items:center;gap:7px;}
.menu-filter-button svg{flex:0 0 auto;}
.menu-filter-popover{
  position:absolute;right:0;top:calc(100% + 8px);z-index:35;width:250px;padding:14px;
  border:1px solid var(--paper-border);border-radius:13px;background:var(--tb-card);
  box-shadow:0 16px 44px rgba(37,33,29,.18);display:grid;gap:7px;
}
.menu-filter-popover[hidden]{display:none;}
.menu-filter-popover>b{font-size:14px;}
.menu-filter-popover>span{margin-bottom:5px;color:var(--text-muted);font-size:12px;line-height:1.4;}
.menu-filter-popover>button{
  display:grid;grid-template-columns:24px 1fr;align-items:center;gap:9px;width:100%;min-height:39px;padding:5px 9px;
  border:1px solid var(--paper-border-soft);border-radius:9px;background:var(--paper);color:var(--text-primary);
  font:inherit;font-size:13px;font-weight:700;text-align:left;text-transform:capitalize;cursor:pointer;
}
.menu-filter-popover>button:hover{border-color:var(--accent);}
.menu-filter-popover>button i{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--paper-border);border-radius:6px;font-style:normal;color:var(--ink-text);}
.menu-filter-popover>button[aria-pressed="true"] i{border-color:var(--accent);background:var(--accent);}
.menu-library-persistent{
  grid-column:1;grid-row:1;
  min-width:0;min-height:0;background:var(--tb-card);border-radius:16px;padding:18px 16px;
  box-shadow:var(--tb-shadow);display:flex;flex-direction:column;gap:12px;
}
.menu-library-persistent .menu-library-list{flex:1;min-height:0;overflow-y:auto;}
.menu-library-persistent .menu-library-foot{margin-top:auto;}
.menu-new-dish-btn{white-space:nowrap;}
.settings-segmented{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--paper-3);flex:0 0 auto;}
.settings-segmented button{min-height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;}
.settings-segmented button.active{background:var(--tb-card);color:var(--text-primary);box-shadow:0 1px 5px rgba(37,33,29,.1);}
.menu-library-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;border-radius:10px;background:var(--paper-3);}
.menu-library-filters button{min-width:0;min-height:34px;padding:0 5px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.menu-library-filters button.active{background:var(--tb-card);color:var(--text-primary);box-shadow:0 1px 5px rgba(37,33,29,.1);}

.menu-week-rows{flex:1;display:flex;flex-direction:column;gap:9px;min-height:0;overflow-y:auto;padding-right:3px;}
.menu-day-row{
  flex:0 0 auto;min-height:76px;display:flex;align-items:center;gap:20px;
  background:var(--tb-card);border-radius:15px;padding:10px 22px 10px 18px;box-shadow:var(--tb-shadow);
}
.menu-day-row.today{box-shadow:inset 0 0 0 2px var(--accent),var(--tb-shadow);}
.menu-day-when{width:74px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;}
.menu-day-when b{font-size:16px;font-weight:800;color:var(--text-secondary);}
.menu-day-row.today .menu-day-when b{color:var(--text-primary);}
.menu-day-when span{font-size:12.5px;color:var(--text-faint);}
.menu-day-thumb{
  width:56px;height:56px;border-radius:13px;flex-shrink:0;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:18px;
}
/* Wherever the "Available Dishes" drag-and-drop sidebar is on screen, a "+"
   button to open the same picker as a popup is redundant — it's only needed
   once the sidebar is gone (narrow/phone widths) and a popup is the sole way
   to assign a dish. Hidden by default; re-shown at the phone breakpoint below. */
.menu-meal-add{display:none;border:0;font-family:inherit;cursor:pointer;box-shadow:inset 0 0 0 1px var(--paper-border-soft);transition:transform .12s,box-shadow .12s;}
.menu-meal-add:hover,.menu-meal-add:focus-visible{transform:scale(1.03);box-shadow:inset 0 0 0 2px var(--accent);}
.menu-day-row .menu-meal-slot{border:none;padding:0;background:none;min-height:0;}
.menu-day-meals{display:contents;}
.menu-slot-lead,.menu-slot-sm{flex:1 1 0;width:auto;min-width:0;max-width:none;}
.menu-day-row .menu-meal-label{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:3px;}
.menu-slot-sm .menu-meal-label{font-size:9px;letter-spacing:.15em;color:var(--text-faintest);}
.menu-day-row .menu-meal-content{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
.menu-slot-lead .menu-assigned-dish{font-size:14px;font-weight:700;background:none;padding:0;color:var(--text-primary);}
.menu-slot-sm .menu-assigned-dish{font-size:14px;font-weight:600;background:none;padding:0;color:var(--text-secondary);}
.menu-day-row .menu-assigned-dish button{
  opacity:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;
  width:24px;height:24px;margin-left:3px;border:1px solid var(--paper-border);
  border-radius:50%;background:var(--paper);color:var(--text-muted);
  font-size:16px;font-weight:700;line-height:1;transition:background .12s,color .12s,border-color .12s;
}
.menu-day-row .menu-assigned-dish{min-width:0;max-width:100%;}
.menu-day-row .menu-assigned-dish>span{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.3;}
.menu-day-row .menu-assigned-dish button:hover{
  background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger) 38%,var(--paper-border));color:var(--danger);
}
.menu-day-row .menu-drop-hint{font-size:14px;color:var(--text-faintest);}
.menu-slot-lead .menu-drop-hint{font-size:19px;}
.menu-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.menu-row-btn{
  min-height:38px;padding:0 14px;border-radius:10px;
  border:1.5px solid var(--paper-border);background:var(--tb-card);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-primary);
}
.menu-row-btn:hover{background:var(--paper-3);}
.menu-day-row .menu-meal-slot.drag-over{outline:2px dashed var(--accent);outline-offset:4px;border-radius:8px;}

.menu-week-footer{
  display:flex;align-items:center;gap:16px;flex-shrink:0;
  background:var(--tb-card);border-radius:16px;padding:16px 22px;box-shadow:var(--tb-shadow);
}
.menu-week-footer div{flex:1;display:flex;flex-direction:column;gap:2px;}
.menu-week-footer b{font-size:16px;}
.menu-week-footer span{font-size:13.5px;color:var(--text-muted);}

.menu-dish-grid{
  flex:1;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-content:start;
}
.menu-grocery-full{flex:1;min-height:0;overflow-y:auto;background:var(--tb-card);border-radius:18px;padding:22px 24px;box-shadow:var(--tb-shadow);}

.menu-library{
  position:absolute;right:0;top:0;bottom:0;z-index:30;width:320px;
  background:var(--tb-card);box-shadow:-16px 0 44px rgba(37,33,29,.16);
  padding:26px 22px;display:flex;flex-direction:column;gap:14px;
}
.menu-library[hidden]{display:none;}
.menu-library-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-serif,Spectral),serif;font-size:21px;font-weight:600;}
.menu-library-head button{background:none;border:none;font-size:22px;color:var(--text-faint);cursor:pointer;line-height:1;}
.menu-library-note{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0;}
.menu-library-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;}
.menu-library-foot{flex-shrink:0;}
.menu-library-foot .btn{width:100%;}

@media (min-width:761px){
  .menu-library{display:none!important;}
  .menu-change-btn,.menu-add-meal-btn{display:none!important;}
  .menu-day-row .menu-meal-slot{align-items:center;}
}

/* ═══ Import ════════════════════════════════════════════════════════════ */
.import-batchbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--ink);color:var(--ink-text);border-radius:14px;padding:12px 20px;
}
.page-import>.import-batchbar{grid-column:1/-1;position:sticky;top:0;z-index:8;width:100%;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.source-owner{display:flex;align-items:center;gap:7px;margin-top:8px}.source-owner>span{font-size:10px;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.source-owner select{min-width:130px;border:1px solid var(--paper-border);border-radius:8px;background:var(--paper);color:var(--text-primary);padding:5px 8px;font-size:11px}
.import-batchbar.is-busy{opacity:.6;pointer-events:none;}
.import-batchbar b{font-size:16px;}
.import-batch-hint{font-size:14.5px;color:var(--text-faint);margin-left:auto;}
.import-batchbar .btn-accent{min-height:44px;}
.import-batchbar .btn-ghost{color:var(--text-faint);}
.import-batchbar:not(.has-selection) .btn-accent,
.import-batchbar:not(.has-selection) .btn-ghost{opacity:.4;pointer-events:none;}

.import-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.import-check input{position:absolute;opacity:0;width:0;height:0;}
.import-check span{
  width:28px;height:28px;border-radius:9px;display:block;
  box-shadow:inset 0 0 0 2px var(--paper-border);background:transparent;
}
.import-batchbar .import-check span{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.import-check input:checked + span{
  background:var(--brand-sage);box-shadow:inset 0 0 0 2px var(--brand-sage);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size:18px;background-position:center;background-repeat:no-repeat;
}
.import-check input:indeterminate + span{background:var(--brand-ochre);box-shadow:inset 0 0 0 2px var(--brand-ochre);}

.import-cat-select{
  min-height:42px;padding:0 12px;border-radius:10px;
  border:1.5px solid var(--paper-border);background:var(--tb-card);color:var(--text-primary);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.import-batchbar .import-cat-select{background:rgba(255,255,255,.12);border-color:transparent;color:#fff;}

.import-list{max-height:none;display:flex;flex-direction:column;}
.gcal-row{display:flex;align-items:center;gap:16px;min-height:74px;padding:12px 4px;}
.import-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;cursor:pointer;}
.import-row-main b{font-size:17px;font-weight:700;color:var(--text-primary);}
.import-row-main small{font-size:13.5px;color:var(--text-muted);}
.import-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.import-dup{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;
  font-size:12.5px;font-weight:600;color:#7A5A12;
  background:#FBEDD2;border-radius:8px;padding:8px 12px;
}
html[data-theme="dark"] .import-dup{background:rgba(245,182,61,.16);color:var(--brand-ochre);}

/* ═══ Ambient photo mode ════════════════════════════════════════════════ */
.ambient-picker{display:flex;flex-direction:column;gap:8px;}
.ambient-option{
  display:flex;align-items:flex-start;gap:12px;width:100%;
  padding:13px 14px;border-radius:12px;cursor:pointer;text-align:left;
  border:1.5px solid var(--paper-border);background:var(--tb-card);font-family:inherit;
}
.ambient-option.active{border-color:var(--text-primary);background:var(--paper-3);}
.ambient-radio{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:2px;
  box-shadow:inset 0 0 0 2px var(--paper-border);
}
.ambient-option.active .ambient-radio{background:var(--text-primary);box-shadow:inset 0 0 0 4px var(--tb-card);}
.ambient-picker.is-disabled{opacity:.45}.ambient-option:disabled{cursor:not-allowed}
.ambient-option b{display:block;font-size:15px;color:var(--text-primary);}
.ambient-option small{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;line-height:1.4;}

#ambient-screen{
  position:fixed;inset:0;z-index:9000;
  background:#0A2141 center/cover no-repeat;
  opacity:0;transition:opacity .32s ease;
}
#ambient-screen.visible{opacity:1;}
#ambient-screen[hidden]{display:none;}
#ambient-screen.no-photo{background-color:#0A2141;}
.ambient-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,10,.42) 0%,rgba(20,16,10,.06) 40%,rgba(20,16,10,.62) 100%);}
.ambient-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:54px 60px;color:#fff;}
.ambient-top{display:flex;justify-content:space-between;align-items:flex-start;}
.ambient-brand{display:flex;align-items:center;gap:10px;opacity:.9;font-size:20px;}
.ambient-brand img{height:20px;width:auto;display:block;}
.ambient-brand b{font-weight:800;}
.ambient-wx{text-align:right;}
.ambient-temp{font-size:52px;font-weight:200;line-height:1;}
.ambient-wx-sub{font-size:15px;opacity:.85;margin-top:6px;}
.ambient-clock{font-size:176px;font-weight:200;line-height:.86;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.ambient-date{font-family:var(--font-serif,Spectral),serif;font-style:italic;font-size:28px;margin-top:14px;opacity:.92;}
.ambient-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
.ambient-agenda{width:min(980px,78vw);display:grid;gap:14px;}
.ambient-next{width:100%;}
.ambient-tasks{width:min(620px,100%);padding:0 4px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.ambient-tasks:empty{display:none;}
.ambient-tasks-title{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.78;margin-bottom:7px;}
.ambient-tasks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px 18px;}
.ambient-tasks li{font-size:15px;font-weight:650;white-space:nowrap;}
.ambient-tasks li::before{content:'✓';margin-right:7px;opacity:.78;}
.ambient-kicker{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
.ambient-next b{font-size:24px;font-weight:600;}
.ambient-hint{font-size:14px;opacity:.75;}
.ambient-next .next-up{margin:0;padding:26px 30px;background:linear-gradient(135deg,rgba(8,43,85,.78),rgba(53,118,168,.62));backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);box-shadow:0 18px 46px rgba(0,0,0,.28);}
.ambient-next .next-up-title{font-size:38px;}
.ambient-next .next-up-meta{font-size:16px;}
.ambient-next .next-up.is-empty{background:linear-gradient(135deg,rgba(8,43,85,.78),rgba(53,118,168,.62));color:#fff;}
.ambient-next .next-up.is-empty .next-up-kicker{color:rgba(255,255,255,.65);}
.ambient-next .next-up.is-empty .next-up-time,
.ambient-next .next-up.is-empty .next-up-title{color:#fff;}
.next-up-drive{display:inline-flex;align-items:center;gap:7px;color:#fff;flex:0 0 auto;white-space:nowrap;}
.next-up-drive-copy{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}.next-up-drive-copy b{display:block;font-size:12px;white-space:nowrap}.next-up-drive-copy small{display:block;font-size:10px;opacity:.72;margin-top:3px;white-space:nowrap}
.next-up-drive.is-live{color:#62D48A}.next-up-drive.is-live::before{animation:drive-live-pulse 1.6s ease-in-out infinite}
@keyframes drive-live-pulse{0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(98,212,138,0))}50%{opacity:.5;filter:drop-shadow(0 0 5px rgba(98,212,138,.8))}}
.next-up-drive::before{
  content:'';display:inline-block;width:17px;height:17px;flex:0 0 17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.1 11 6.4 7.7A2.7 2.7 0 0 1 8.9 6h6.2a2.7 2.7 0 0 1 2.5 1.7l1.3 3.3H20a2 2 0 0 1 2 2v4a1 1 0 0 1-1 1h-1v1.2a1.8 1.8 0 0 1-3.6 0V18H7.6v1.2a1.8 1.8 0 0 1-3.6 0V18H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2h1.1Zm2.2 0h9.4l-1-2.5a.7.7 0 0 0-.6-.5H8.9a.7.7 0 0 0-.6.5L7.3 11ZM6 15.5A1.5 1.5 0 1 0 6 12a1.5 1.5 0 0 0 0 3.5Zm12 0a1.5 1.5 0 1 0 0-3.5 1.5 1.5 0 0 0 0 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.1 11 6.4 7.7A2.7 2.7 0 0 1 8.9 6h6.2a2.7 2.7 0 0 1 2.5 1.7l1.3 3.3H20a2 2 0 0 1 2 2v4a1 1 0 0 1-1 1h-1v1.2a1.8 1.8 0 0 1-3.6 0V18H7.6v1.2a1.8 1.8 0 0 1-3.6 0V18H3a1 1 0 0 1-1-1v-4a2 2 0 0 1 2-2h1.1Zm2.2 0h9.4l-1-2.5a.7.7 0 0 0-.6-.5H8.9a.7.7 0 0 0-.6.5L7.3 11ZM6 15.5A1.5 1.5 0 1 0 6 12a1.5 1.5 0 0 0 0 3.5Zm12 0a1.5 1.5 0 1 0 0-3.5 1.5 1.5 0 0 0 0 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.next-up-drive.is-transit::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='15' rx='5' fill='black'/%3E%3Crect x='5' y='9' width='14' height='8' fill='black'/%3E%3Ccircle cx='8' cy='19' r='2' fill='black'/%3E%3Ccircle cx='16' cy='19' r='2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='15' rx='5' fill='black'/%3E%3Crect x='5' y='9' width='14' height='8' fill='black'/%3E%3Ccircle cx='8' cy='19' r='2' fill='black'/%3E%3Ccircle cx='16' cy='19' r='2' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.photo-source-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.photo-rotation-rate{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:13px;color:var(--text-muted);}
.photo-rotation-rate select{border:1px solid var(--paper-border);border-radius:8px;background:var(--paper);color:var(--text-primary);padding:6px 9px;font:inherit;}
body.ambient-off.has-bg{background-image:none!important;}
body.ambient-off.has-bg::before{display:none!important;}

/* Native iOS landscape status bars sit over the WebView. Tablet-width layouts
   do not use the phone rule above, so reserve the top safe area for both sides
   of the dashboard shell without changing browser or Android spacing. */
@media (orientation:landscape) and (min-width:761px){
  html.native-ios body.native-ios .app-sidebar{
    padding-top:calc(30px + env(safe-area-inset-top,0px));
  }
  html.native-ios body.native-ios .app-main{
    padding-top:env(safe-area-inset-top,0px);
  }
}
@media (orientation:landscape) and (min-width:761px) and (max-width:1180px){
  html.native-ios body.native-ios .app-sidebar{
    padding-top:calc(24px + env(safe-area-inset-top,0px));
  }
}

@media (max-width:1180px){
  .menu-slot-sm{width:120px;}
  .next-up-title{font-size:30px;}
  .menu-plan-layout{grid-template-columns:220px minmax(0,1fr);}
  .menu-plan-content .menu-day-row{
    flex:0 0 auto;height:auto;display:grid;align-items:start;min-height:0;padding:14px 16px;gap:10px 12px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "when when"
      "dinner dinner"
      "breakfast lunch"
      "actions actions";
  }
  .menu-plan-content .menu-day-when{grid-area:when;width:100%;flex-direction:row;align-items:baseline;gap:8px;}
  .menu-plan-content .menu-slot-lead{grid-area:dinner;min-width:0;max-width:none;}
  .menu-plan-content .menu-slot-sm{width:auto;min-width:0;}
  .menu-plan-content .menu-slot-sm[data-menu-meal="breakfast"]{grid-area:breakfast;}
  .menu-plan-content .menu-slot-sm[data-menu-meal="lunch"]{grid-area:lunch;}
  .menu-plan-content .menu-row-actions{grid-area:actions;width:100%;}
  .menu-plan-content .menu-row-actions .menu-row-btn{flex:1;}
  .menu-plan-content{overflow-y:auto;}
  .menu-plan-content .menu-week-rows{flex:none;}
}
@media (max-width:760px){
  .app-update-banner{top:10px;align-items:stretch;flex-direction:column;gap:10px;padding:14px;}
  .app-update-banner button{width:100%;}
  .accounts-settings-grid{grid-template-columns:1fr;}
  .import-page-heading{align-items:stretch;flex-direction:column;}

  /* Settings rows (label + control, e.g. a toggle, segmented buttons, or a
     member/device row's action button) pack everything onto one line with no
     wrap — fine on desktop, but crowds/squeezes on a phone-width screen.
     Let the control drop to its own line instead of fighting the label for space. */
  .settings-row{flex-wrap:wrap;row-gap:8px;}

  /* Installed to the home screen, the app paints under the status bar. */
  .app-main{padding-top:env(safe-area-inset-top,0px);}

  /* Add menu: the button sits at the LEFT of the phone header, so a right-aligned
     popover hangs off the screen edge. Open it leftward-anchored instead, and keep
     the trigger's filled contrast while it's open. */
  .add-menu{left:0;right:auto;width:min(272px,calc(100vw - 36px));}
  .btn-add{-webkit-tap-highlight-color:transparent;}
  .btn-add,
  #add-menu-btn[aria-expanded="true"],
  #add-menu-btn:focus,
  #add-menu-btn:active{
    background:var(--ink);border-color:var(--ink);color:var(--ink-text);opacity:1;
  }
  #add-menu-btn[aria-expanded="true"] .btn-caret{transform:rotate(180deg);}
  .add-menu button{font-size:15px;}

  /* Menu day rows: stack date → dish → other meals → actions so nothing has to
     share a 40px column with a 21px dish name. */
  /* The desktop plan divides one fixed-height column seven ways; on a phone the page
     has to scroll and every row has to size to its own content instead. */
  .page-menu{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
  .menu-body,.menu-week-panel{flex:none;min-height:0;overflow:visible;}
  .menu-plan-layout{display:block;min-height:0;}
  .menu-plan-content{display:flex;overflow:visible;}
  .menu-library-persistent{display:none;}
  .menu-week-rows{flex:none;gap:10px;overflow:visible;}
  .menu-plan-content .menu-day-row{
    flex:0 0 auto;height:auto;display:grid;align-items:stretch;min-height:0;padding:14px 16px 16px;gap:0 12px;
    grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:
      "when when"
      "thumb meals";
  }
  .menu-plan-content .menu-day-when{order:1;grid-area:when;width:100%;flex-direction:row;align-items:baseline;gap:8px;margin-bottom:8px;}
  .menu-plan-content .menu-day-when b{font-size:15px;}
  .menu-plan-content .menu-day-thumb{
    order:2;grid-area:thumb;width:46px;height:46px;min-height:46px;border-radius:11px;
    align-self:center;background-size:cover;background-position:center;
  }
  /* The drag-and-drop sidebar is hidden at this width (see .menu-library-persistent
     above), so the "+" is the only way to assign a dish — bring it back. */
  .menu-meal-add{display:flex;align-items:center;justify-content:center;}
  .menu-plan-content .menu-day-meals{
    grid-area:meals;display:flex;flex-direction:column;min-width:0;
  }
  .menu-plan-content .menu-slot-lead{order:3;grid-area:dinner;min-width:0;max-width:none;}
  .menu-plan-content .menu-slot-lead .menu-assigned-dish{font-size:15px;line-height:1.25;}
  .menu-plan-content .menu-slot-lead .menu-drop-hint{font-size:14px;}
  .menu-plan-content .menu-slot-sm{order:4;width:auto;min-width:0;}
  .menu-plan-content .menu-slot-sm[data-menu-meal="breakfast"]{grid-area:breakfast;}
  .menu-plan-content .menu-slot-sm[data-menu-meal="lunch"]{grid-area:lunch;}
  .menu-plan-content .menu-day-row .menu-meal-slot{
    display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;gap:10px;
    min-height:38px;padding:8px 0;cursor:pointer;
  }
  .menu-plan-content .menu-day-row .menu-meal-label{
    min-height:18px;margin:0;padding:1px 0 0;line-height:18px;
    font-size:10px;letter-spacing:.14em;color:var(--text-faint);
  }
  .menu-plan-content .menu-day-row .menu-meal-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0;}
  .menu-plan-content .menu-day-row .menu-drop-hint,.menu-plan-content .menu-day-row .menu-assigned-dish{font-size:13px;line-height:18px;}
  .menu-plan-content .menu-day-row .menu-drop-hint{padding-top:1px;}
  .menu-day-row .menu-assigned-dish button{opacity:1;flex-basis:28px;width:28px;height:28px;}
  .menu-week-footer{flex-direction:column;align-items:stretch;gap:12px;padding:16px;}
  .menu-week-footer .btn{width:100%;min-height:46px;}
  .menu-library{position:fixed;inset:auto 12px calc(78px + env(safe-area-inset-bottom,0px)) 12px;width:auto;max-height:min(70vh,620px);border-radius:18px;box-shadow:0 18px 60px rgba(37,33,29,.28);}
  .menu-filter-popover{position:fixed;left:18px;right:18px;top:auto;bottom:calc(82px + env(safe-area-inset-bottom,0px));width:auto;}
  .menu-tabbar{flex-wrap:nowrap;gap:10px;}
  .menu-tabbar-actions{min-width:0;flex:0 0 auto;}
  .menu-new-dish-btn{width:auto;min-width:max-content;white-space:nowrap;}

  /* More menu is text-only now — no icon column to align to. */
  .mobile-more-menu{min-width:176px;}
  .mobile-more-menu button{min-height:46px;padding:0 18px;font-size:15px;font-weight:600;}

  .ambient-inner{padding:32px 26px;}
  .ambient-clock{font-size:96px;}
  #ambient-screen{display:none;}
}

/* ===========================================================================
   Phone: tab bar, sheets, toasts, store mode, system states
   Loaded after app.css, so these win at equal specificity.
   =========================================================================== */
@media (max-width:760px){
  /* Five slots — four labelled destinations plus Add. Grocery and the utility
     views moved out of the bar and into the ⋯ sheet, so labels can be read. */
  .premium-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:64px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    z-index:170;
  }
  .premium-bottom-nav a,.premium-bottom-nav button{height:52px;gap:5px;font-size:11px;letter-spacing:.005em;}
  .premium-bottom-nav .nav-bottom-dot{width:6px;height:6px;}
  .premium-bottom-nav .mobile-nav-create{
    width:48px;height:48px;border-radius:16px;font-size:27px;font-weight:400;line-height:1;
  }
  .premium-bottom-nav .mobile-nav-create[aria-expanded="true"]{transform:rotate(45deg);}
  .premium-bottom-nav .mobile-nav-create{transition:transform .18s ease;}

  /* Utility affordance: one fixed button, above the bar, below every overlay. */
  .mobile-util-btn{
    position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));
    width:44px;height:44px;border-radius:50%;border:1px solid var(--paper-border);
    background:var(--paper-2);color:var(--text-secondary);
    font-size:20px;line-height:1;font-family:inherit;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(30,25,18,.16);z-index:180;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-util-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--ink-text);}
  body.modal-open .mobile-util-btn,
  body.create-modal-open .mobile-util-btn,
  body.search-open .mobile-util-btn,
  body.toast-open .mobile-util-btn,
  body.mobile-sheet-open .mobile-util-btn{display:none;}

  /* ── Bottom sheets ───────────────────────────────────────────────────── */
  .mobile-sheet-scrim{
    position:fixed;inset:0;background:rgba(20,18,13,.42);z-index:185;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .mobile-sheet-scrim.open{opacity:1;pointer-events:auto;}
  .mobile-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:190;
    display:flex;flex-direction:column;gap:2px;
    padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px));
    background:var(--paper-2);border-top:1px solid var(--paper-border);
    border-radius:20px 20px 0 0;box-shadow:0 -14px 44px rgba(30,25,18,.24);
    transform:translateY(102%);transition:transform .24s cubic-bezier(.22,.68,.24,1);
  }
  .mobile-sheet.open{transform:translateY(0);}
  .mobile-sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--paper-border);margin:2px auto 8px;}
  .mobile-sheet-title{
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-faint);padding:0 6px 6px;
  }
  .mobile-sheet-row{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    width:100%;min-height:56px;padding:9px 10px;border:none;border-radius:12px;
    background:none;font-family:inherit;text-align:left;color:var(--text-primary);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-sheet-row:active{background:var(--paper-3);}
  .mobile-sheet-row b{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;}
  .mobile-sheet-row small{font-size:12px;color:var(--text-muted);}
  .mobile-sheet-badge{
    display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
    padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  }
  .mobile-sheet-badge[hidden]{display:none;}
  .mobile-sheet-cancel{
    min-height:48px;margin-top:6px;border:1px solid var(--paper-border);border-radius:12px;
    background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--text-secondary);
  }

  /* ── Swipe to complete ───────────────────────────────────────────────── */
  .task-row{position:relative;}
  .task-row.swiping{
    z-index:1;background:var(--paper-2);
    box-shadow:0 4px 16px rgba(30,25,18,.12);border-radius:10px;
  }
  .task-row.swiping::before{
    content:attr(data-swipe-label);
    position:absolute;inset:0;z-index:-1;
    display:flex;align-items:center;padding:0 18px;
    border-radius:10px;background:#75a8ce;color:#fff;
    font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }
  .task-row.swipe-armed::before{background:#3576a8;}

  /* ── Undo toast ──────────────────────────────────────────────────────── */
  .tb-toast{
    position:fixed;left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));
    z-index:230;display:flex;align-items:center;gap:12px;
    padding:13px 14px;border-radius:14px;background:#082b55;color:#f7f1e5;
    box-shadow:0 16px 40px rgba(8,43,85,.34);
    opacity:0;transform:translateY(14px);transition:opacity .18s ease,transform .18s ease;
    pointer-events:none;
  }
  .tb-toast.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .tb-toast span{flex:1;min-width:0;font-size:14px;line-height:1.35;}
  .tb-toast button{
    flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid rgba(244,240,231,.4);
    border-radius:9px;background:none;color:#f7f1e5;font-family:inherit;font-size:14px;font-weight:700;
  }

  /* ── Offline banner (body-level, so it owns its own notch inset) ──────── */
  .offline-banner{
    position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));
    z-index:240;display:flex;flex-direction:column;gap:2px;
    padding:11px 14px;border-radius:13px;background:#0c3868;color:#f7f1e5;
    box-shadow:0 12px 32px rgba(8,43,85,.28);
  }
  .offline-banner{flex-direction:row;align-items:baseline;gap:7px;}
  .offline-banner b{font-size:13px;letter-spacing:.02em;flex:0 0 auto;}
  .offline-banner span{font-size:12px;opacity:.86;line-height:1.4;}
  /* The banner is fixed, so the page has to make room for it or it covers the
     greeting. One line high, plus the gap it sits in. */
  body.is-offline .app-main{padding-top:calc(env(safe-area-inset-top,0px) + 58px);}

  /* ── Pull to refresh ─────────────────────────────────────────────────── */
  .ptr-indicator{
    position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) - 26px);
    transform:translateX(-50%);z-index:150;
    width:32px;height:32px;border-radius:50%;background:var(--paper-2);
    border:1px solid var(--paper-border);box-shadow:0 6px 16px rgba(30,25,18,.16);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .16s ease;pointer-events:none;
  }
  .ptr-indicator.visible{opacity:1;}
  .ptr-indicator span{
    width:14px;height:14px;border-radius:50%;
    border:2px solid var(--paper-border);border-top-color:var(--text-faint);
  }
  .ptr-indicator.armed span{border-top-color:var(--accent);}
  .ptr-indicator.spinning span{animation:ptr-spin .7s linear infinite;}

  /* ── Empty day ───────────────────────────────────────────────────────── */
  .empty-day{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:6px;padding:30px 18px 26px;
  }
  .empty-day-mark{
    width:44px;height:44px;margin-bottom:6px;border-radius:13px;
    border:1.5px dashed var(--paper-border);
  }
  .empty-day b{font-family:var(--font-serif,Spectral),serif;font-size:19px;font-weight:600;}
  .empty-day span{font-size:14px;color:var(--text-muted);line-height:1.45;max-width:30ch;}
  .empty-day-actions{display:flex;gap:10px;margin-top:12px;}
  .empty-day-actions .btn{min-height:44px;padding:0 18px;}

  /* ── Menu: an empty slot is the invitation to plan ───────────────────── */
  /* Base reset (border/background/color/etc.) now lives unconditionally in
     app.css; only the mobile-specific size bump stays here. */
  .menu-plan-content .menu-slot-lead .menu-drop-cta{font-size:15px;}

  /* ── Grocery: store mode ─────────────────────────────────────────────── */
  .modal-overlay:has(.grocery-store-mode){padding:0;align-items:stretch;justify-content:stretch;}
  .modal-box:has(.grocery-store-mode){width:100%;max-width:none;height:100%;max-height:none;}
  .grocery-store-mode{
    display:flex;flex-direction:column;height:100%;max-height:none;
    border-radius:0;padding:calc(12px + env(safe-area-inset-top,0px)) 0 0;
  }
  .grocery-store-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:0 16px 12px;border-bottom:1px solid var(--paper-border);
  }
  .grocery-store-mode .event-info-title{margin:0;font-size:22px;}
  .grocery-store-count{margin-top:2px;font-size:13px;color:var(--text-muted);}
  .grocery-store-actions{display:flex;align-items:center;gap:8px;}
  .grocery-store-actions .btn{min-height:40px;}
  .grocery-store-mode .event-info-close{position:static;width:40px;height:40px;font-size:22px;}
  .grocery-store-mode .grocery-modal-body{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 16px;
  }
  .grocery-store-mode .grocery-category{margin-top:16px;}
  .grocery-store-mode .event-info-section-title{
    position:sticky;top:0;z-index:1;margin:0 -16px;padding:8px 16px;
    background:var(--paper-2);
  }
  .grocery-store-mode .grocery-row{
    min-height:56px;gap:14px;padding:0 2px;font-size:17px;line-height:1.3;
    border-bottom:1px solid var(--paper-border);
  }
  .grocery-store-mode .grocery-row input[type="checkbox"]{width:26px;height:26px;flex:0 0 26px;}
  .grocery-store-mode .grocery-completed{margin-top:20px;}
  .grocery-store-mode .grocery-completed summary{min-height:48px;display:flex;align-items:center;font-size:15px;}
  .grocery-store-mode .grocery-modal-add-form{
    flex:0 0 auto;margin:0;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--paper-border);background:var(--paper-2);
  }
  .grocery-store-mode .grocery-modal-add-form input{min-height:48px;font-size:16px;}
  .grocery-store-mode .grocery-modal-add-form .btn{min-height:48px;padding:0 18px;}
}
@keyframes ptr-spin{to{transform:rotate(360deg);}}

/* =========================================================================
   Lakeday design override layer (from Claude Design project
   "Lakeday rebrand assets", lakeday-brand.css). Loaded later in this same
   file, so it wins the cascade at equal specificity over the rules above
   without needing to edit every individual selector.
   ========================================================================= */

/* Alternate schemes */
html[data-scheme="ivory"]{
  --paper:#F7F1E5; --paper-2:#FCF8F0; --paper-3:#EDE4D4; --paper-border:#DED3BF; --paper-border-soft:#E7DDCB;
}
html[data-scheme="shore"]{
  --paper:#DDE7EF; --paper-2:#EAF1F6; --paper-3:#CBDAE6; --paper-border:#BFD1E0; --paper-border-soft:#D2DFEA;
}
html[data-scheme="reflection"]{
  --paper:#CFDEEA; --paper-2:#DEE9F2; --paper-3:#BCD1E2; --paper-border:#AFC7DB; --paper-border-soft:#C4D6E5;
}
html[data-scheme="navy"],
html[data-theme="dark"]{
  --paper:#0A2141; --paper-2:#0E2C52; --paper-3:#143A66; --paper-border:#1D4574; --paper-border-soft:#173A63;
  --ink:#061A33; --ink-soft:#082B55;
  --text-primary:#EAF1F7; --text-secondary:#BFD4E6; --text-muted:#93B0C9; --text-faint:#6E8FAC; --text-faintest:#4A6D8C;
  --tb-card:#0E2C52; --tb-page:#0A2141; --tb-thumb-empty:#143A66;
  --tb-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.28);
  color-scheme:dark;
}

a{color:var(--select);}
a:hover{color:var(--text-primary);}

/* ---- Selection vs action ------------------------------------------------- */
/* Anything that means "this is the current/selected/complete thing" is Lake
   Blue, independent of the user's accent choice. */
.nav-item.active{
  background:rgba(117,168,206,.22);color:#fff;font-weight:800;
  box-shadow:inset 3px 0 var(--select-soft);
}
.nav-item.active .nav-dot{background:var(--select-soft);border-color:var(--select-soft);}
.nav-util.active{background:rgba(247,241,229,.14);color:#fff;font-weight:700;}
.mini-cal-day.today > span:first-child{background:var(--select);color:#fff;}
.mini-cal-day.selected:not(.today) > span:first-child{border-color:var(--select);}
.month-cell.today{border-color:var(--select);background:color-mix(in srgb,var(--select) 12%,var(--paper-2));}
.month-cell.selected:not(.today){border-color:var(--select-soft);}
.day-num.today-num{background:var(--select);}
.week-grid-headcell.today{background:var(--select);}
.week-grid-headcell.selected{outline-color:var(--select);}
.week-timeline-col.today{background:color-mix(in srgb,var(--select) 8%,transparent);}
.menu-day-row.today{box-shadow:inset 0 0 0 2px var(--select),var(--tb-shadow);}
.schedule-row.is-next{background:var(--paper-3);}
.tcheck.done,.switch input:checked + .switch-slider,
.import-check input:checked + span{background:var(--success);border-color:var(--success);}
.import-check input:checked + span{box-shadow:inset 0 0 0 2px var(--success);}
.tcheck:hover{border-color:var(--select);}
.grocery-row input{accent-color:var(--success);}
.cal-tab.active,.menu-tab.active,.seg-tab.active{color:var(--text-primary);}
.settings-jump button.active{box-shadow:inset 0 -2px 0 var(--select);}
.login-input:focus,.recipe-field input:focus,.household-invite-form input:focus{
  border-color:var(--select);box-shadow:0 0 0 3px color-mix(in srgb,var(--select) 20%,transparent);
}

/* ---- Gold legibility ----------------------------------------------------- */
/* Retargets the old ochre rules from #D6A33B to Sunrise Gold. */
.btn-accent,.next-badge,.today-pill,.nav-badge,.menu-tab-badge,
.role-badge.primary,.home-badge{background:var(--accent);color:var(--accent-ink);}
.btn-accent{font-weight:800;}
.month-span-bar[style*="F5B63D"],.month-span-bar[style*="f5b63d"],
.month-label[style*="F5B63D"],.month-label[style*="f5b63d"],
.week-chip[style*="F5B63D"],.week-chip[style*="f5b63d"],
.week-event-block[style*="F5B63D"],.week-event-block[style*="f5b63d"],
.day-event-block[style*="F5B63D"],.day-event-block[style*="f5b63d"],
.cat-filter-btn.on[style*="F5B63D"],.cat-filter-btn.on[style*="f5b63d"]{color:#082B55 !important;}
.import-check input:indeterminate + span{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);}
.gcal-notice{color:#7A5A12;background:#FBEDD2;}
.import-dup{color:#7A5A12;background:#FBEDD2;}
.next-up-prep{color:#F0C97A;}
.recipe-import-status.loading{color:#B0801C;}
.recipe-import-status.ok{color:var(--select);}
.role-badge.invited{color:#7A5A12;background:color-mix(in srgb,var(--brand-gold) 20%,var(--paper-2));}
.invite-card .login-btn.btn-primary{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--ink);}

/* Primary buttons stay navy; the ONE gold button per view is the commit
   action, marked up as .btn-accent. */
.btn-primary{background:var(--ink);color:var(--ink-text);border-color:var(--ink);}

/* ---- Brand lockup ------------------------------------------------------- */
/* The wordmark is artwork now, not HTML text: one <img> per lockup. */
.sidebar-brand{display:flex;flex-direction:column;gap:9px;}
.sidebar-brand-lockup img{height:44px;width:auto !important;display:block;border-radius:0 !important;}
.sidebar-brand-name{display:none;}
.sidebar-brand-sub{
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#6E93B5;
}
.login-logo.login-lockup img{width:auto !important;height:28px !important;border-radius:0 !important;margin:0 !important;}
.login-wordmark{display:none;}
.mobile-brand-lockup img{height:18px;width:auto !important;border-radius:0 !important;}
.mobile-brand-lockup span{display:none;}
.login-splash-brand img{width:auto;height:72px;}
.login-splash-brand b,.login-splash-brand span{display:none;}
.ambient-brand img{height:26px;width:auto;}
.ambient-brand b,.ambient-brand span{display:none;}

/* ---- Serif retirement --------------------------------------------------- */
/* Headings keep their size and get weight instead of a second family. */
.page-title,.settings-title,.cal-toolbar-left .cal-heading,.panel-date,
.mini-cal-head strong,.next-up-title,.menu-library-head,.settings-section-title,
.appearance-card-title,.next-steps-card h2,.hero-date-line,.hero-greeting,
.ambient-date{
  font-family:var(--font-sans);font-style:normal;
}
.page-title,.hero-date-line,.next-up-title{font-weight:700;letter-spacing:-.025em;}
.settings-title,.cal-toolbar-left .cal-heading{font-weight:700;letter-spacing:-.02em;}
.panel-date,.mini-cal-head strong,.settings-section-title,.appearance-card-title,
.menu-library-head,.next-steps-card h2{font-weight:700;letter-spacing:-.01em;}
.hero-greeting{font-weight:500;}
.ambient-date{font-weight:400;}
.login-splash-copy h1{font-family:var(--font-sans);font-weight:700;letter-spacing:-.03em;}

/* ---- Photo-background mode --------------------------------------------- */
body.has-bg .app-sidebar{background:rgba(8,43,85,.82);}
body.has-bg #news-ticker-bar{background:rgba(4,27,55,.94);}
#news-ticker-bar{background:#041B37;color:var(--brand-ivory);}
.ticker-label{color:var(--accent);}
#ambient-screen{background-color:#0A2141;}
.wx-current-card{background:linear-gradient(150deg,#0C3868,#082B55);}

/* ---- Today page: frame 1a treatment — light header, gold used only on the
   primary action; the Next-up card stays navy+gold on its own. ------------ */
.btn-add{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

/* ---- Today page: review-strip / next-steps card moved under Next Up,
   into the narrower left column — stack single-column instead of the wide
   two-up layout those components use as a full-width banner elsewhere. ---- */
.today-col-left .next-steps-card{
  grid-template-columns:1fr;gap:14px;margin-bottom:16px;
}
.today-col-left .next-steps-list{grid-template-columns:1fr 1fr;}
.today-col-left #review-strip{margin-bottom:16px;}
@media (max-width:520px){
  .today-col-left .next-steps-list{grid-template-columns:1fr;}
}
/* Right column narrowed to match the smaller calendar below, so the
   left/right column divider (.today-col-left's border-right) sits right
   against the calendar/grocery content instead of leaving a gap. */
.today-body{grid-template-columns:1.35fr .55fr;}

/* ---- Today page: mini calendar sized down moderately (both axes) -------- */
#mini-calendar-widget .mini-cal-head{margin-bottom:12px;}
#mini-calendar-widget .mini-cal-head strong{font-size:16px;}
#mini-calendar-widget .mini-cal-head button{font-size:13px;}
#mini-calendar-widget .mini-cal-dows{gap:2px;font-size:9px;margin-bottom:5px;}
#mini-calendar-widget .mini-cal-grid{gap:2px;}
#mini-calendar-widget .mini-cal-day{gap:2px;padding:4px 0;font-size:11px;border-radius:7px;}
#mini-calendar-widget .mini-cal-day > span:first-child{width:24px;height:24px;}
#mini-calendar-widget .mini-dot{width:4px;height:4px;}