/* ============================================================
       styles.css · all styling (no preprocessor, no build).
       Section TOC (current line numbers; refresh with:
         grep -nE "^    /\* (---|=====)" styles.css
       )
         Setup screen ..................... 180
         Header ........................... 243
         Bottom Nav ....................... 268
         Capture FAB / modal .............. 304, 335, 424
         Buttons / Cards .................. 1480, 1521
         Page Content ..................... 1531
         Tonight home surface ............. 1542
         Planner (legacy) ................. 1938
         Meal Bank ........................ 2068
         Modal / Sheet .................... 2154
         Swap picker ...................... 2288
         Week overview modal .............. 2353
         Search / Filter chips ............ 2496, 2528
         Empty State / Generate / Week nav  2560, 2589, 2596
         Settings ......................... 2625
         Household sharing ................ 2673
         Onboarding tour (concept 08) ..... 2762
         PWA install banner / Toast / Load  3306, 3362, 3387
         Desktop column constraint ........ 3920
         Groceries (concept 05) ........... 3944
         Pantry (concept 06; Ph 1 polish) . 4366
       ============================================================ */

    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* ---- Saffron (primary) ---- */
      --saffron-50:  #fff7ed;
      --saffron-100: #ffedd5;
      --saffron-200: #fed7aa;
      --saffron-300: #fdba74;
      --saffron-400: #fb923c;
      --saffron-500: #f97316;
      --saffron-600: #ea580c;
      --saffron-700: #c2410c;
      --saffron-900: #7c2d12;

      /* ---- Sage (success) ---- */
      --sage-50:  #f0fdf4;
      --sage-100: #dcfce7;
      --sage-500: #22c55e;
      --sage-600: #16a34a;
      --sage-700: #15803d;

      /* ---- Berry (danger) ---- */
      --berry-50:  #fef2f2;
      --berry-100: #fee2e2;
      --berry-500: #ef4444;
      --berry-600: #dc2626;
      --berry-700: #b91c1c;

      /* ---- Honey (warning) ---- */
      --honey-50:  #fefce8;
      --honey-100: #fef9c3;
      --honey-500: #eab308;
      --honey-700: #a16207;

      /* ---- Cream + warm stone neutrals ---- */
      --cream-50:  #fdfcf9;
      --cream-100: #faf7f0;
      --cream-200: #f3ede0;
      --stone-50:  #fafaf9;
      --stone-100: #f5f5f4;
      --stone-200: #e7e5e4;
      --stone-300: #d6d3d1;
      --stone-400: #a8a29e;
      --stone-500: #78716c;
      --stone-600: #57534e;
      --stone-700: #44403c;
      --stone-800: #292524;
      --stone-900: #1c1917;

      /* ---- Cuisine accents ---- */
      --c-italian:        #c2410c;
      --c-mexican:        #d97706;
      --c-asian:          #dc2626;
      --c-indian:         #b45309;
      --c-mediterranean:  #0e7490;
      --c-american:       #2563eb;
      --c-british:        #6366f1;
      --c-middle-eastern: #7c3aed;
      --c-thai:           #be185d;
      --c-other:          #78716c;

      /* ---- Semantic ---- */
      --bg:           var(--cream-50);
      --surface:      #ffffff;
      --surface-sunk: var(--cream-100);
      --border:       var(--stone-200);
      --border-strong:var(--stone-300);
      --text:         var(--stone-900);
      --text-muted:   var(--stone-500);
      --text-faint:   var(--stone-400);
      --primary:      var(--saffron-500);
      --primary-hover:var(--saffron-600);
      --primary-soft: var(--saffron-50);

      /* ---- Backwards-compat aliases (referenced by JS inline styles) ---- */
      --orange:       var(--saffron-500);
      --orange-light: var(--saffron-50);
      --orange-dark:  var(--saffron-600);
      --green:        var(--sage-500);
      --green-light:  var(--sage-50);
      --red:          var(--berry-500);
      --gray-50:      var(--cream-50);
      --gray-100:     var(--stone-100);
      --gray-200:     var(--stone-200);
      --gray-300:     var(--stone-300);
      --gray-500:     var(--stone-500);
      --gray-700:     var(--stone-700);
      --gray-900:     var(--stone-900);

      /* ---- Typography ---- */
      --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

      /* ---- Spacing / radius / shadow / motion ---- */
      --radius-sm:    6px;
      --radius:       12px;
      --radius-lg:    16px;
      --radius-xl:    24px;
      --radius-pill:  999px;
      --shadow-sm:    0 1px 2px rgba(28, 25, 23, 0.05);
      --shadow:       0 1px 3px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04);
      --shadow-md:    0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
      --shadow-lg:    0 12px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04);
      --shadow-warm:  0 8px 24px rgba(249, 115, 22, 0.22);
      --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
      --dur-fast:     120ms;
      --dur:          200ms;
      --dur-slow:     320ms;
    }

    :root[data-theme="dark"] {
      --bg:           #14110d;
      --surface:      #1f1b15;
      --surface-sunk: #18140f;
      --surface-raised:#2a241c;
      --border:       #2d271f;
      --border-strong:#3a3329;
      --text:         #f5efe4;
      --text-muted:   #b6a994;
      --text-faint:   #7a715f;
      --primary-soft: #2a1d10;
      --modal-backdrop: rgba(0, 0, 0, 0.65);
      --shadow:       0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md:    0 4px 12px rgba(0,0,0,0.35);
      --shadow-lg:    0 12px 32px rgba(0,0,0,0.55);
      --shadow-warm:  0 8px 24px rgba(249,115,22,0.30);
      color-scheme:   dark;
    }

    :root {
      --surface-raised: #ffffff;
      --modal-backdrop: rgba(28, 25, 23, 0.4);
    }

    body {
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.55;
      background: var(--bg);
      color: var(--text);
      min-height: 100dvh;
      padding-bottom: calc(84px + env(safe-area-inset-bottom));
      -webkit-font-smoothing: antialiased;
      /* Stop the browser's pull-to-refresh — dragging down on a bottom
         sheet was reloading the whole page instead of dismissing it. */
      overscroll-behavior-y: none;
      transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
    }

    h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

    /* --- Setup Screen --- */
    .setup-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100dvh;
      padding: 32px 24px;
      text-align: center;
      background:
        radial-gradient(circle at 20% 0%, var(--saffron-100), transparent 55%),
        radial-gradient(circle at 80% 100%, var(--sage-100), transparent 55%),
        var(--bg);
    }
    :root[data-theme="dark"] .setup-screen {
      background:
        radial-gradient(circle at 20% 0%, rgba(249, 115, 22, 0.18), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(34, 197, 94, 0.10), transparent 55%),
        var(--bg);
    }

    .setup-screen h1 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 44px;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 10px;
      font-variation-settings: 'SOFT' 70, 'opsz' 96;
    }
    .setup-screen h1 em { font-style: italic; color: var(--primary); }
    .setup-screen p { color: var(--text-muted); margin-bottom: 28px; max-width: 32ch; font-size: 15px; }

    .auth-card {
      width: 100%;
      max-width: 380px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: 24px 20px;
      text-align: left;
    }

    .setup-screen input {
      width: 100%;
      padding: 13px 16px;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius);
      font-size: 15px;
      font-family: inherit;
      color: var(--text);
      margin-bottom: 10px;
      outline: none;
      transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    .setup-screen input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
    }

    /* --- Header --- */
    .header {
      background: var(--surface);
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header h1 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.02em;
      font-variation-settings: 'SOFT' 50, 'opsz' 36;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header h1 svg { display: block; }

    /* --- Bottom Nav --- */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: flex-end;
      z-index: 100;
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -1px 3px rgba(28, 25, 23, 0.03);
    }

    .nav-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      padding: 9px 4px 9px;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-faint);
      cursor: pointer;
      transition: color var(--dur-fast) var(--ease-out);
    }

    .nav-btn.active { color: var(--primary); }
    .nav-btn svg { display: block; }

    /* --- Capture "+" button --- */
    /* Bottom-aligned with the others (same bottom padding) so every label
       sits on one baseline; the larger fab naturally lifts above the row. */
    .nav-btn-capture {
      flex: 0 0 60px;
      gap: 5px;
      padding: 9px 0 9px;
      color: var(--primary);
    }
    .nav-btn-capture .capture-fab {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);
      transition: transform var(--dur-fast) var(--ease-out);
      /* Lift the larger fab so it reads as a raised action and the nav
         stays the same height as a plain tab. */
      margin-top: -14px;
    }
    .nav-btn-capture:active .capture-fab { transform: scale(0.92); }
    .nav-btn-capture .capture-label {
      font-size: 11px;
      color: var(--text-faint);
      font-weight: 500;
    }

    /* --- Capture modal (Phase 1 scaffold) --- */
    .capture-drop {
      border: 2px dashed var(--border-strong);
      border-radius: var(--radius);
      padding: 22px 16px;
      text-align: center;
      background: var(--surface);
      margin-bottom: 14px;
      transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .capture-drop:hover { border-color: var(--primary); background: var(--surface-sunk); }
    .capture-drop-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
    }
    .capture-drop h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 17px;
      margin-bottom: 4px;
    }
    .capture-drop p { font-size: 12.5px; color: var(--text-muted); }
    .capture-drop input[type="url"],
    .capture-drop input[type="text"] {
      width: 100%;
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 14px;
      background: var(--surface-sunk);
      color: var(--text);
    }
    .capture-modes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }
    .capture-mode {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      display: flex;
      gap: 10px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      color: inherit;
      width: 100%;
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .capture-mode:hover { border-color: var(--primary); }
    .capture-mode.headline {
      background: var(--primary-soft);
      border-color: var(--primary);
    }
    .capture-mode .em { font-size: 20px; flex-shrink: 0; }
    .capture-mode .lb { font-size: 13px; font-weight: 600; line-height: 1.2; }
    .capture-mode .desc { font-size: 11px; color: var(--text-muted); line-height: 1.25; margin-top: 1px; }
    .capture-mode.headline .lb { color: var(--primary); }
    .capture-mode.full { grid-column: 1 / -1; }
    .capture-mode.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .capture-soon {
      display: inline-block;
      margin-left: auto;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-faint);
      background: var(--surface-sunk);
      padding: 2px 6px;
      border-radius: 999px;
    }

    /* --- Capture states (Phase 1, link mode wired) --- */
    .capture-error {
      background: var(--berry-50);
      color: var(--berry-700);
      border: 1px solid var(--berry-100);
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      line-height: 1.45;
      margin-bottom: 12px;
      word-break: break-word;
      max-height: 180px;
      overflow-y: auto;
      font-family: var(--font-mono);
    }
    :root[data-theme="dark"] .capture-error { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border-color: rgba(220, 38, 38, 0.30); }

    .capture-spinner {
      width: 36px;
      height: 36px;
      margin: 0 auto;
      border-radius: 50%;
      border: 3px solid var(--surface-sunk);
      border-top-color: var(--primary);
      animation: capture-spin 0.8s linear infinite;
    }
    @keyframes capture-spin { to { transform: rotate(360deg); } }

    .capture-preview-card {
      background: var(--surface);
      border: 1px solid var(--saffron-200);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow-warm);
      margin-bottom: 14px;
    }
    .capture-preview-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--primary);
      text-transform: uppercase;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .capture-preview-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 20px;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .capture-preview-meta {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .capture-preview-counts {
      font-size: 11.5px;
      color: var(--text-faint);
    }
    .capture-menu-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .capture-menu-row label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }
    .capture-menu-row select {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 13px;
      background: var(--surface-sunk);
      color: var(--text);
    }
    .capture-toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--primary);
      color: white;
      padding: 12px 22px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: var(--shadow-warm);
      z-index: 300;
      opacity: 0;
      transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
      pointer-events: none;
      max-width: calc(100vw - 32px);
      text-align: center;
    }
    .capture-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       Hive · Phase 1 read UI (PR #3 slice)
       ============================================================ */
    .hive-loading,
    .hive-empty {
      padding: 48px 24px;
      text-align: center;
      color: var(--text-muted);
    }
    .hive-empty .em { font-size: 38px; display: block; margin-bottom: 10px; }
    .hive-empty h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      color: var(--text);
      margin-bottom: 6px;
    }
    .hive-empty p { font-size: 14px; max-width: 32ch; margin: 0 auto; line-height: 1.5; }

    .hive-greeting {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: 'SOFT' 70, 'opsz' 24;
      font-size: 16px;
      color: var(--text-muted);
      padding: 0 20px;
      margin: 12px 0 16px;
    }

    .hive-menus-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 16px 18px;
    }
    .hive-menu-tile {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
      text-align: left;
    }
    .hive-menu-tile:active { transform: scale(0.98); }
    .hive-menu-tile:hover { box-shadow: var(--shadow-md); }
    .hive-menu-tile::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--accent, var(--saffron-500));
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .hive-menu-tile .em { font-size: 22px; line-height: 1; }
    .hive-menu-tile .nm {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 16px;
      letter-spacing: -0.005em;
      line-height: 1.15;
    }
    .hive-menu-tile .ct {
      font-size: 11.5px;
      color: var(--text-muted);
    }

    /* In-Hive sub-page header with back arrow */
    .hive-sub-header {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 12px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .hive-sub-header .back {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      border-radius: 50%;
      cursor: pointer;
    }
    .hive-sub-header .back:hover { background: var(--surface-sunk); color: var(--text); }
    .hive-sub-header .title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -0.005em;
      flex: 1;
      line-height: 1.15;
    }
    .hive-sub-header .sub {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    .hive-recipe-list { padding: 8px 12px 24px; }
    .hive-recipe-row {
      display: flex;
      gap: 12px;
      padding: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 8px;
      cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-out);
      text-align: left;
      width: 100%;
    }
    .hive-recipe-row:hover { border-color: var(--primary); }
    .hive-recipe-row:active { transform: scale(0.99); }
    .hive-recipe-row .thumb {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--saffron-200), var(--saffron-400));
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .hive-recipe-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .hive-recipe-row .nm {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.005em;
      line-height: 1.2;
      color: var(--text);
    }
    .hive-recipe-row .meta {
      font-size: 11.5px;
      color: var(--text-faint);
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .hive-recipe-row .meta .dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--text-faint);
    }
    .hive-recipe-row .chips { display: flex; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
    .hive-recipe-row .rchip {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--surface-sunk);
      color: var(--text-muted);
    }
    .hive-recipe-row .rchip.quick { background: var(--sage-100); color: var(--sage-700); }
    .hive-recipe-row .rchip.kid { background: #dbeafe; color: #1e40af; }
    :root[data-theme="dark"] .hive-recipe-row .rchip.kid { background: #1e293b; color: #93c5fd; }

    /* Subtle link to the samples browser, lives under the menu grid
       once the user has any recipes (so they can still discover the
       library after the empty state goes away). */
    .hive-samples-link {
      width: 100%;
      padding: 11px 14px;
      background: transparent;
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius);
      color: var(--text-muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .hive-samples-link:hover { border-color: var(--primary); color: var(--primary); }

    /* Sample library grid · cards group by menu, each card shows
       just enough to decide whether to add it. */
    .samples-grid {
      padding: 8px 12px 24px;
    }
    .samples-section-title {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 14px 4px 8px;
    }
    .sample-card {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 8px;
    }
    .sample-card .thumb {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      background: linear-gradient(135deg, var(--saffron-200), var(--berry-400));
      flex-shrink: 0;
    }
    .sample-card .info { min-width: 0; }
    .sample-card .nm {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.005em;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 3px;
    }
    .sample-card .meta {
      font-size: 11.5px;
      color: var(--text-faint);
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .sample-card .meta .dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: var(--text-faint);
    }
    .sample-card .add-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      background: var(--surface-raised);
      color: var(--primary);
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .sample-card .add-btn:hover:not([disabled]) { background: var(--primary); border-color: var(--primary); color: white; }
    .sample-card .add-btn[disabled] { opacity: 0.45; cursor: progress; }
    .sample-card.added { opacity: 0.65; }
    .sample-card.added .add-btn {
      color: var(--sage-700);
      border-color: var(--sage-300);
      background: var(--sage-50);
      cursor: default;
    }

    /* Recipe detail page */
    .hive-recipe-detail { padding: 0; }
    .hive-recipe-hero {
      aspect-ratio: 5 / 3;
      background-size: cover;
      background-position: center;
      background-color: var(--saffron-300);
      background-image: radial-gradient(circle at 30% 35%, #fef3c7 0%, #fbbf24 25%, #d97706 60%, #7c2d12 100%);
      position: relative;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .hive-recipe-hero .emoji-fill {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 72px;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
    }
    .hive-recipe-hero.has-photo .emoji-fill { display: none; }
    .hive-recipe-hero .gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
    }
    .hive-recipe-hero .badges {
      position: relative;
      z-index: 1;
      align-self: flex-end;
      display: flex;
      gap: 6px;
      padding: 12px;
    }
    .hive-recipe-hero .badge {
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: var(--stone-700);
    }

    .hive-recipe-body { padding: 18px 20px 24px; }
    .hive-recipe-body .name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 26px;
      letter-spacing: -0.015em;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .hive-recipe-body .meta {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    .hive-recipe-body .desc {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--text-muted);
      margin: 12px 0 18px;
      font-style: italic;
      font-family: var(--font-display);
      font-weight: 400;
      font-variation-settings: 'SOFT' 60, 'opsz' 24;
    }
    .hive-recipe-body .src {
      font-size: 11px;
      color: var(--text-faint);
      margin-bottom: 18px;
    }
    .hive-recipe-body .src a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
    }
    .hive-recipe-body h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -0.005em;
      margin: 22px 0 10px;
    }

    .hive-ing-row {
      display: flex;
      gap: 12px;
      padding: 7px 0;
      font-size: 14px;
      border-bottom: 1px solid var(--border);
    }
    .hive-ing-row:last-child { border-bottom: none; }
    .hive-ing-row .qty {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-muted);
      min-width: 70px;
      flex-shrink: 0;
    }
    .hive-ing-row .nm { flex: 1; }
    .hive-ing-row .notes {
      font-size: 12px;
      color: var(--text-faint);
      margin-left: 6px;
    }
    .hive-ing-row .breakdown {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      color: var(--text-faint);
      font-style: italic;
      line-height: 1.45;
    }

    .hive-step-row {
      display: flex;
      gap: 14px;
      padding: 12px 0;
      font-size: 14.5px;
      line-height: 1.55;
      border-bottom: 1px solid var(--border);
    }
    .hive-step-row:last-child { border-bottom: none; }
    .hive-step-row .num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .hive-step-row .text { flex: 1; }
    .hive-step-row .time {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-faint);
      margin-top: 4px;
      display: block;
    }

    /* Recipe detail · "Cook this" CTA between meta and ingredients */
    .hive-cook-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin: 18px 0 4px;
      padding: 13px 18px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: var(--shadow-warm);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .hive-cook-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }
    .hive-cook-cta:active { transform: translateY(0); }

    /* Edit recipe · pencil pill in the recipe detail header */
    .hive-edit-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      flex-shrink: 0;
      transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .hive-edit-pill:hover { color: var(--primary); border-color: var(--primary); }

    /* Pinned Save/Cancel bar for the edit form. Fixed to the bottom so
       it stays reachable while scrolling a long recipe, sitting just
       above the bottom nav (same offset trick as .cook-ready-cta). */
    .hive-edit-actions {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      gap: 10px;
      padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
      z-index: 50;
      margin-bottom: 70px; /* clear the fixed bottom nav */
    }
    .hive-edit-actions .btn { flex: 1; }
    .hive-edit-actions #hive-edit-save-pill { flex: 1.6; }
    .hive-edit-actions #hive-edit-save-pill[disabled] { opacity: 0.6; cursor: progress; }
    @media (min-width: 720px) {
      .hive-edit-actions {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
      }
    }

    /* Edit recipe form · bottom padding clears the pinned action bar. */
    .hive-edit-body {
      padding: 16px 20px 168px;
    }
    .hive-edit-section {
      margin-bottom: 22px;
    }
    .hive-edit-section h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 16px;
      letter-spacing: -0.005em;
      margin: 0 0 10px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .hive-edit-section h4 .ct {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 11.5px;
      color: var(--text-faint);
    }
    .hive-edit-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 12px;
    }
    .hive-edit-field .lbl {
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .hive-edit-field input,
    .hive-edit-field select,
    .hive-edit-field textarea {
      width: 100%;
      padding: 10px 12px;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 14px;
      color: var(--text);
      outline: none;
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .hive-edit-field textarea {
      resize: vertical;
      min-height: 70px;
      line-height: 1.5;
    }
    .hive-edit-field input:focus,
    .hive-edit-field select:focus,
    .hive-edit-field textarea:focus { border-color: var(--primary); }
    .hive-edit-fields-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hive-edit-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 12px;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius);
      cursor: pointer;
    }
    .hive-edit-toggle-row .lbl { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
    .hive-edit-toggle-row .switch {
      width: 40px;
      height: 24px;
      border-radius: 999px;
      background: var(--surface-sunk);
      border: 1.5px solid var(--border-strong);
      position: relative;
      flex-shrink: 0;
    }
    .hive-edit-toggle-row .switch::after {
      content: '';
      position: absolute;
      top: 1.5px;
      left: 1.5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--text-faint);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .hive-edit-toggle-row.on .switch {
      background: var(--primary);
      border-color: var(--primary);
    }
    .hive-edit-toggle-row.on .switch::after {
      transform: translateX(16px);
      background: white;
    }

    /* Editable row · ingredient or step.
       Two-column main row (qty/unit/name OR step text), with notes
       and reorder/delete in a tools row below. */
    .hive-edit-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .hive-edit-row .ing-main {
      display: grid;
      grid-template-columns: 60px 60px 1fr;
      gap: 6px;
    }
    .hive-edit-row .ing-main input {
      padding: 8px 10px;
      font-size: 13px;
      width: 100%;
    }
    .hive-edit-row .step-main textarea {
      width: 100%;
      padding: 8px 10px;
      font-size: 14px;
      line-height: 1.45;
      min-height: 50px;
      resize: vertical;
    }
    .hive-edit-row .row-tools {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hive-edit-row .row-tools input {
      flex: 1;
      padding: 7px 9px;
      font-size: 12px;
    }
    .hive-edit-row .row-tools .min-input { max-width: 80px; }
    .hive-edit-row .row-tools .opt-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      background: var(--surface-sunk);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint);
      cursor: pointer;
      user-select: none;
    }
    .hive-edit-row .row-tools .opt-chip.on {
      background: var(--primary-soft);
      border-color: var(--primary);
      color: var(--primary);
    }
    .hive-edit-row .row-tools .spacer { flex: 1; }
    .hive-edit-row .row-tools button.icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hive-edit-row .row-tools button.icon:hover:not([disabled]) { border-color: var(--text-muted); color: var(--text); }
    .hive-edit-row .row-tools button.icon[disabled] { opacity: 0.35; cursor: default; }
    .hive-edit-row .row-tools button.icon.danger { color: var(--berry-700); border-color: var(--berry-100); }
    :root[data-theme="dark"] .hive-edit-row .row-tools button.icon.danger { color: #fca5a5; border-color: rgba(252,165,165,0.25); }
    .hive-edit-row .row-tools button.icon.danger:hover { background: var(--berry-50); }
    :root[data-theme="dark"] .hive-edit-row .row-tools button.icon.danger:hover { background: rgba(252,165,165,0.10); }

    .hive-edit-add-btn {
      width: 100%;
      padding: 10px 14px;
      background: transparent;
      border: 1.5px dashed var(--border-strong);
      border-radius: var(--radius);
      color: var(--text-muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .hive-edit-add-btn:hover { border-color: var(--primary); color: var(--primary); }

    .hive-edit-danger-zone {
      margin-top: 36px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
    }
    .hive-edit-danger-zone h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 14px;
      color: var(--berry-700);
      margin: 0 0 6px;
    }
    :root[data-theme="dark"] .hive-edit-danger-zone h4 { color: #fca5a5; }
    .hive-edit-danger-zone p {
      font-size: 12.5px;
      color: var(--text-muted);
      margin: 0 0 12px;
      line-height: 1.45;
    }
    .hive-edit-delete-btn {
      width: 100%;
      padding: 11px 16px;
      background: var(--berry-50);
      color: var(--berry-700);
      border: 1px solid var(--berry-100);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    :root[data-theme="dark"] .hive-edit-delete-btn {
      background: rgba(252,165,165,0.10);
      color: #fca5a5;
      border-color: rgba(252,165,165,0.25);
    }
    .hive-edit-delete-btn:hover { background: var(--berry-100); }
    :root[data-theme="dark"] .hive-edit-delete-btn:hover { background: rgba(252,165,165,0.20); }
    .hive-edit-delete-btn[disabled] { opacity: 0.5; cursor: progress; }

    /* ============================================================
       Recipe-ready · the handoff between Hive detail and Cook mode.
       Plate stepper + scaled ingredients + D5b prep toggle.
       ============================================================ */
    .cook-ready-body {
      padding: 16px 20px 24px;
      /* Leave room for the sticky CTA + bottom nav at the bottom. */
      padding-bottom: 180px;
    }
    .cook-ready-hero {
      display: flex;
      gap: 14px;
      padding: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      margin-bottom: 18px;
    }
    .cook-ready-hero .thumb {
      width: 72px;
      height: 72px;
      border-radius: var(--radius);
      flex-shrink: 0;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
    .cook-ready-hero .info { flex: 1; min-width: 0; }
    .cook-ready-hero .nm {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: -0.01em;
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .cook-ready-hero .mt {
      font-size: 12.5px;
      color: var(--text-muted);
    }

    .cook-ready-section { margin-bottom: 18px; }
    .cook-ready-section h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 16px;
      letter-spacing: -0.005em;
      margin: 0 0 10px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .cook-ready-section h4 .hint {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 11.5px;
      color: var(--text-faint);
    }

    /* Plate stepper */
    .plate-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .plate-stepper .lbl {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .plate-stepper .lbl .t {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .plate-stepper .lbl .s {
      font-size: 11.5px;
      color: var(--text-faint);
    }
    .plate-stepper .controls {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .plate-stepper button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      background: var(--surface-raised);
      color: var(--text);
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .plate-stepper button:not([disabled]):hover { border-color: var(--primary); color: var(--primary); }
    .plate-stepper button[disabled] { opacity: 0.4; cursor: not-allowed; }
    .plate-stepper .count {
      min-width: 36px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 17px;
      font-weight: 600;
      color: var(--text);
    }

    /* Prep toggle */
    .prep-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      cursor: pointer;
    }
    .prep-toggle .lbl { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
    .prep-toggle .lbl .t {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .prep-toggle .lbl .s {
      font-size: 11.5px;
      color: var(--text-faint);
      line-height: 1.4;
    }
    .prep-toggle .switch {
      width: 44px;
      height: 26px;
      border-radius: 999px;
      background: var(--surface-sunk);
      border: 1.5px solid var(--border-strong);
      position: relative;
      flex-shrink: 0;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .prep-toggle .switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--text-faint);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .prep-toggle.on .switch {
      background: var(--primary);
      border-color: var(--primary);
    }
    .prep-toggle.on .switch::after {
      transform: translateX(18px);
      background: white;
    }

    /* Sticky bottom CTA for Recipe-ready */
    .cook-ready-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
      z-index: 50;
      /* Offset above the bottom nav (84px in body padding). */
      margin-bottom: 70px;
    }
    .cook-ready-cta-hint {
      margin-top: 8px;
      font-size: 11.5px;
      color: var(--text-faint);
      text-align: center;
      font-style: italic;
    }
    @media (min-width: 720px) {
      .cook-ready-cta {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
      }
    }

    /* --- Buttons --- */
    .btn {
      padding: 12px 20px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: all var(--dur-fast) var(--ease-out);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }
    .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .btn:active { transform: translateY(0); }

    .btn-primary {
      background: var(--primary);
      color: white;
      box-shadow: var(--shadow-warm);
    }
    .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }

    .btn-secondary {
      background: var(--surface);
      color: var(--text);
      border-color: var(--border-strong);
    }
    .btn-secondary:hover { background: var(--surface-sunk); border-color: var(--stone-400); }

    .btn-danger { background: var(--berry-50); color: var(--berry-700); }
    .btn-danger:hover { background: var(--berry-100); }

    .btn-small { padding: 8px 14px; font-size: 13px; }
    .btn-full { width: 100%; }
    .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

    /* --- Cards --- */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 4px 20px;
      margin-bottom: 12px;
    }

    /* --- Page Content --- */
    .page { display: none; padding: 20px; }
    .page.active { display: block; }
    .page > h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 28px;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    /* --- Tonight home surface (Phase 1) --- */
    .tonight-greeting {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: 'SOFT' 90, 'opsz' 48;
      font-size: 26px;
      line-height: 1.05;
      color: var(--text);
      padding: 18px 20px 0;
      letter-spacing: -0.015em;
    }
    .tonight-eyebrow {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--text-muted);
      padding: 2px 20px 10px;
    }
    .tonight-hero {
      padding: 0 16px 8px;
    }
    .tonight-hero-card {
      position: relative;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background-color: var(--saffron-300);
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow-md);
      display: flex;
      animation: tonight-hero-bloom 460ms var(--ease-out) both;
    }
    @keyframes tonight-hero-bloom {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.984);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .tonight-hero-card { animation: none; }
    }
    .tonight-hero-photo-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 72%;
      z-index: 0;
    }
    .tonight-hero-emoji {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 64px;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.30));
      z-index: 1;
    }
    .tonight-hero-overlay {
      position: relative;
      z-index: 2;
      align-self: flex-end;
      width: 100%;
      padding: 18px 18px 18px;
      color: white;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.78) 100%);
    }
    /* Overlay + all its text are pass-through so swipe chevrons sitting
       behind still receive taps (and the whole card stays tappable
       through text). Interactive children re-enable pointer events.
       pointer-events doesn't cascade in CSS, so every descendant has to
       be set explicitly. */
    .tonight-hero-overlay,
    .tonight-hero-overlay * { pointer-events: none; }
    .tonight-hero-overlay button,
    .tonight-hero-overlay button * { pointer-events: auto; }
    .tonight-hero-eyebrow {
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
    }
    .tonight-hero-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: -0.015em;
      color: white;
      /* Layered shadow so the name reads cleanly even when a swipe
         chevron sits directly behind it. */
      text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.45);
    }
    .tonight-hero-meta {
      font-size: 12.5px;
      color: rgba(255,255,255,0.85);
      margin-bottom: 8px;
    }
    .tonight-hero-cta {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 18px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: var(--shadow-warm);
      transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .tonight-hero-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }
    .tonight-hero-cta:active { transform: translateY(0); }

    /* The recipe hero card is itself tappable (opens the recipe); the
       inner buttons stopPropagation to keep their own actions. */
    .tonight-hero-card.is-tappable { cursor: pointer; }
    .tonight-hero-card.is-tappable:focus-visible {
      outline: 3px solid var(--primary-soft);
      outline-offset: 2px;
    }

    /* Action row · primary "Cook this" with the Side + Swap chips beside
       it, all the same height. Wraps gracefully if a side name is long. */
    .tonight-hero-actions {
      display: flex;
      align-items: stretch;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tonight-hero-actions .tonight-hero-cta { align-self: auto; }

    /* Secondary chips (Side · Swap) — frosted glass, sized to match the
       primary CTA height for a clean, aligned row. */
    .tonight-hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 48%;
      padding: 11px 14px;
      background: rgba(255,255,255,0.16);
      color: white;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .tonight-hero-chip svg { flex-shrink: 0; opacity: 0.9; }
    .tonight-hero-chip span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tonight-hero-chip:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); }
    /* Empty "Side" reads as an add affordance — dashed, lighter. */
    .tonight-hero-chip.chip-add {
      background: rgba(0,0,0,0.28);
      border-style: dashed;
      border-color: rgba(255,255,255,0.45);
      color: rgba(255,255,255,0.92);
    }
    .tonight-hero-chip.chip-add:hover { background: rgba(0,0,0,0.42); border-color: white; color: white; }

    /* Remove (X) · subtle frosted circle, top-right of the photo. The
       food image stays the hero; this stays out of the way until needed. */
    .tonight-hero-remove {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      padding: 0;
      background: rgba(0,0,0,0.38);
      color: white;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .tonight-hero-remove:hover { background: var(--berry-500); border-color: var(--berry-500); }

    /* Swipe affordance — subtle edge chevrons hinting the card flips
       between days. They also work as prev/next buttons on desktop.
       Sit visually BEHIND the overlay (z-index 1 < overlay's 2) so a
       wrapping meal name reads cleanly over them; the overlay container
       is pointer-events: none so chevron taps still land. */
    .tonight-hero-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      background: rgba(0,0,0,0.30);
      color: white;
      border: 1px solid rgba(255,255,255,0.20);
      border-radius: 999px;
      cursor: pointer;
      opacity: 0.66;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .tonight-hero-nav:hover,
    .tonight-hero-nav:active { opacity: 1; background: rgba(0,0,0,0.46); }
    .tonight-hero-nav.prev { left: 10px; animation: heroNavNudgePrev 1.5s var(--ease-out) 0.35s 2; }
    .tonight-hero-nav.next { right: 10px; animation: heroNavNudgeNext 1.5s var(--ease-out) 0.35s 2; }

    @keyframes heroNavNudgeNext {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      50%      { transform: translateY(-50%) translateX(3px); }
    }
    @keyframes heroNavNudgePrev {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      50%      { transform: translateY(-50%) translateX(-3px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tonight-hero-nav.prev, .tonight-hero-nav.next { animation: none; }
    }

    .tonight-hero-empty {
      padding: 36px 24px 32px;
      background: var(--surface);
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-lg);
      text-align: center;
      color: var(--text-muted);
    }
    .tonight-hero-empty .em { font-size: 38px; line-height: 1; margin-bottom: 10px; }
    .tonight-hero-empty .t {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      color: var(--text);
      margin-bottom: 4px;
    }
    .tonight-hero-empty .s {
      font-size: 13px;
      line-height: 1.5;
      max-width: 36ch;
      margin: 0 auto;
    }

    /* Concept-01 week strip · Mon-Sun glance with dot indicators */
    .week-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 2px 16px 6px;
    }
    .week-nav-arrow {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 50%;
      color: var(--text-muted);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .week-nav-arrow:hover { background: var(--surface-sunk); color: var(--text); border-color: var(--border-strong); }
    .week-nav-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      flex: 1;
      min-width: 0;
    }
    .week-nav-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      text-align: center;
    }
    .week-nav-today {
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      color: var(--primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .week-nav-today:hover { text-decoration: underline; }

    .week-strip {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 4px;
      padding: 4px 20px 16px;
      margin: 0;
    }
    .week-strip .day {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      font-size: 11.5px;
      color: var(--text-faint);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 0;
      border-radius: var(--radius-sm);
      font-family: inherit;
      transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .week-strip .day:hover { color: var(--text-muted); background: var(--surface-sunk); }
    .week-strip .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--surface-sunk);
      border: 1px solid var(--border-strong);
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }
    .week-strip .day.planned .dot {
      background: var(--saffron-200);
      border-color: var(--saffron-300);
    }
    .week-strip .day.cooked .dot {
      background: var(--sage-500);
      border-color: var(--sage-500);
    }
    .week-strip .day.today {
      color: var(--primary);
    }
    .week-strip .day.today .dot {
      background: var(--primary);
      border-color: var(--primary);
      width: 13px;
      height: 13px;
      box-shadow: 0 0 0 3px var(--primary-soft);
    }
    /* Selected day = the one previewed in the hero. A ring sets it
       apart from today's filled dot without changing the dot colour. */
    .week-strip .day.selected { color: var(--text); }
    .week-strip .day.selected .dot {
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--border-strong);
    }
    .week-strip .day.today.selected .dot {
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary);
    }
    :root[data-theme="dark"] .week-strip .day.cooked .dot {
      background: var(--sage-500);
      border-color: var(--sage-500);
    }

    .tonight-footer {
      padding: 14px 20px 24px;
    }

    /* --- Planner (legacy · still used by capture flow) --- */
    .day-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      margin-bottom: 12px;
      overflow: hidden;
    }

    .day-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--surface-sunk);
      border-bottom: 1px solid var(--border);
    }

    .day-header .day-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .day-header .day-name {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 17px;
      letter-spacing: -0.01em;
    }
    .day-header .day-date {
      font-size: 12px;
      color: var(--text-faint);
      letter-spacing: 0.02em;
    }

    .day-header .today-badge {
      background: var(--primary);
      color: white;
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .day-meal {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .day-meal .meal-thumb {
      width: 56px;
      height: 56px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--saffron-100), var(--honey-100));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .day-meal .meal-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    :root[data-theme="dark"] .day-meal .meal-thumb {
      background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(234,179,8,0.15));
    }

    .day-meal .meal-info { flex: 1; min-width: 0; }
    .day-meal .meal-name {
      font-weight: 500;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .day-meal .meal-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .day-meal .meal-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-shrink: 0;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--dur-fast) var(--ease-out);
      color: var(--text-muted);
    }

    .icon-btn:hover { border-color: var(--primary); color: var(--primary); }
    .icon-btn.locked {
      background: var(--primary-soft);
      border-color: var(--primary);
      color: var(--primary);
    }

    .empty-meal {
      padding: 18px 16px;
      color: var(--text-faint);
      font-style: italic;
      font-size: 14px;
      cursor: pointer;
      transition: color var(--dur-fast) var(--ease-out);
    }

    .empty-meal:hover { color: var(--text-muted); background: var(--surface-sunk); }

    /* --- Meal Bank --- */
    .meal-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 14px 16px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    }

    .meal-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

    .meal-item .meal-thumb {
      width: 96px;
      height: 96px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--saffron-100), var(--honey-100));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .meal-item .meal-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .meal-item .meal-details { flex: 1; min-width: 0; }
    .meal-item .meal-name { font-weight: 500; font-size: 15px; margin-bottom: 6px; }

    .meal-item .meal-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-transform: capitalize;
    }

    .tag-effort-quick   { background: var(--sage-100);  color: var(--sage-700); }
    .tag-effort-medium  { background: var(--honey-100); color: var(--honey-700); }
    .tag-effort-project { background: var(--berry-100); color: var(--berry-700); }
    .tag-kid            { background: #dbeafe;          color: #1e40af; }
    .tag-cuisine {
      background: var(--surface-sunk);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .tag-cuisine::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--c-dot, var(--c-other));
    }
    .c-italian        { --c-dot: var(--c-italian); }
    .c-mexican        { --c-dot: var(--c-mexican); }
    .c-asian          { --c-dot: var(--c-asian); }
    .c-indian         { --c-dot: var(--c-indian); }
    .c-mediterranean  { --c-dot: var(--c-mediterranean); }
    .c-american       { --c-dot: var(--c-american); }
    .c-british        { --c-dot: var(--c-british); }
    .c-middle-eastern { --c-dot: var(--c-middle-eastern); }
    .c-thai           { --c-dot: var(--c-thai); }
    .c-other          { --c-dot: var(--c-other); }
    :root[data-theme="dark"] .tag-kid { background: #1e293b; color: #93c5fd; }

    /* --- Modal / Sheet --- */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--modal-backdrop);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 200;
      align-items: flex-end;
      justify-content: center;
    }

    .modal-overlay.open { display: flex; }
    .modal-overlay { overscroll-behavior: contain; }
    /* Lock the page behind an open sheet so scrolling the sheet's
       content (e.g. a long "where it's from" list) doesn't drag the
       background with it. */
    /* Robust scroll lock (works on iOS, where overflow:hidden alone does
       not): the page is pinned and offset by its scroll position while a
       sheet is open. JS restores the position on close. */
    body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
    /* Swap picker can be launched from the week-overview modal, so it
       must stack above it. */
    #swap-modal { z-index: 210; }

    .modal {
      background: var(--surface-raised);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      width: 100%;
      max-width: 520px;
      max-height: 92dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 12px 20px 24px;
      animation: slideUp 0.32s var(--ease-out);
      touch-action: pan-y;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
      border-top: 1px solid var(--border);
    }

    .modal::before {
      content: '';
      display: block;
      width: 40px;
      height: 4px;
      background: var(--border-strong);
      border-radius: 2px;
      margin: 4px auto 16px;
    }

    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    .modal h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
      margin-bottom: 20px;
    }

    .form-group { margin-bottom: 16px; }

    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 12px 14px;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius);
      color: var(--text);
      font-size: 15px;
      font-family: inherit;
      outline: none;
      transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
    }

    .form-group textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
    }

    .toggle {
      width: 46px;
      height: 26px;
      border-radius: var(--radius-pill);
      background: var(--stone-300);
      border: none;
      cursor: pointer;
      position: relative;
      transition: background var(--dur-fast) var(--ease-out);
      flex-shrink: 0;
    }

    .toggle.on { background: var(--sage-600); }

    .toggle::after {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: white;
      position: absolute;
      top: 3px;
      left: 3px;
      transition: transform var(--dur-fast) var(--ease-out);
      box-shadow: var(--shadow-sm);
    }

    .toggle.on::after { transform: translateX(20px); }

    /* --- Swap picker --- */
    .swap-list { list-style: none; }

    .swap-item {
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out);
    }

    .swap-item div div:last-child { color: var(--text-muted); }
    .swap-item:hover { background: var(--surface-sunk); margin: 0 -20px; padding: 14px 20px; }
    .swap-item:last-child { border-bottom: none; }
    /* "Remove the side" lead row in the side picker. */
    .swap-item-remove {
      gap: 10px;
      justify-content: flex-start;
      color: var(--berry-500);
    }
    .swap-item-remove svg { flex-shrink: 0; }

    .swap-section {
      list-style: none;
      padding: 12px 0 6px;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .swap-section:first-child { padding-top: 4px; }

    /* "Surprise me" re-roll inside the swap modal. */
    .swap-surprise {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      margin-top: 2px;
      background: var(--primary-soft);
      color: var(--primary);
      border: 1px solid transparent;
      border-radius: var(--radius);
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .swap-surprise:hover { border-color: var(--primary); }
    .swap-or {
      text-align: center;
      font-size: 11.5px;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 12px 0 2px;
    }

    /* ===== Week overview modal ===== */
    .week-overview-sub {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      margin: -12px 0 14px;
    }
    .wko-list { list-style: none; }
    .wko-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
      border-bottom: 1px solid var(--border);
    }
    .wko-row:last-child { border-bottom: none; }
    .wko-dish {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 6px 12px 4px;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      border-radius: var(--radius-sm);
      transition: background var(--dur-fast) var(--ease-out);
    }
    .wko-dish:hover { background: var(--surface-sunk); }
    .wko-day {
      flex-shrink: 0;
      width: 38px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .wko-row.today .wko-day { color: var(--primary); }
    .wko-dishtext { flex: 1; min-width: 0; }
    .wko-main {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wko-side { font-size: 12px; color: var(--text-muted); }
    .wko-empty { font-size: 13.5px; color: var(--text-faint); font-style: italic; }
    /* Empty / removed day · an inviting "+ Add a meal" prompt. */
    .wko-add { font-size: 14px; font-weight: 600; color: var(--primary); }
    .wko-chev { flex-shrink: 0; color: var(--text-faint); margin-left: 2px; }
    .wko-act {
      flex-shrink: 0;
      width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--text-faint);
      cursor: pointer;
      border-radius: var(--radius-sm);
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .wko-act:hover { background: var(--surface-sunk); color: var(--primary); }
    /* Trailing controls per overview row — a labelled "Change" pill that
       opens the day's planner sheet (swap / shuffle), plus an X remove. */
    .wko-change {
      flex-shrink: 0;
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      background: var(--surface-sunk);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      color: var(--text-muted);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .wko-change svg { opacity: 0.8; }
    .wko-change:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
    .wko-remove {
      flex-shrink: 0;
      align-self: center;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
      background: none;
      border: none;
      border-radius: 50%;
      color: var(--text-faint);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .wko-remove:hover { background: var(--berry-50); color: var(--berry-600); }
    .week-overview-actions {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .week-overview-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

    /* "See the whole week" ghost link under the Shuffle button. */
    .tonight-overview-link {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 6px;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
    }
    .tonight-overview-link:hover { color: var(--primary); }

    /* "Hive" badge in the planner day card — distinguishes a planned
       captured recipe from a legacy meal at a glance. */
    .tag-hive {
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 700;
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 999px;
      vertical-align: middle;
      margin-left: 6px;
    }

    /* --- Search --- */
    .search-bar {
      position: relative;
      margin-bottom: 16px;
    }

    .search-bar input {
      width: 100%;
      padding: 12px 12px 12px 40px;
      background: var(--surface);
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius);
      color: var(--text);
      font-size: 15px;
      font-family: inherit;
      outline: none;
      transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }

    .search-bar input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
    }

    .search-bar svg {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-faint);
    }

    /* --- Filter chips --- */
    .filter-chips {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      overflow-x: auto;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
    }

    .chip {
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      border: 1.5px solid var(--border);
      background: var(--surface);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: all var(--dur-fast) var(--ease-out);
      color: var(--text);
      text-transform: capitalize;
    }

    .chip:hover { border-color: var(--border-strong); }
    .chip.active {
      border-color: var(--primary);
      background: var(--primary-soft);
      color: var(--primary-hover);
    }

    /* --- Empty State --- */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
      background: var(--surface);
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-lg);
    }

    .empty-state .icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .empty-state h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 20px;
      color: var(--text);
      margin-bottom: 8px;
    }

    /* --- Generate bar --- */
    .generate-bar {
      padding: 16px 20px 8px;
      display: flex;
      gap: 10px;
    }

    /* --- Week nav --- */
    .week-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .week-nav button {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      padding: 4px 12px;
      color: var(--text-muted);
      border-radius: var(--radius-sm);
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .week-nav button:hover { background: var(--surface-sunk); color: var(--text); }

    .week-nav .week-label {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 16px;
      letter-spacing: -0.01em;
    }

    /* --- Settings --- */
    .settings-section {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin: 20px 4px 8px;
    }
    .settings-section:first-child { margin-top: 4px; }

    .setting-item {
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    :root[data-theme="dark"] .setting-item { border-bottom-color: var(--border); }

    .setting-item:last-child { border-bottom: none; }
    .setting-item label { font-weight: 500; display: block; }
    .setting-item p { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .setting-row > div:first-child { flex: 1; min-width: 0; }

    .setting-select {
      flex: 0 0 auto;
      max-width: 48%;
      background: var(--surface-sunk);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .setting-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* --- Household sharing (concept 07) --- */
    .setting-input {
      flex: 1 1 auto;
      min-width: 0;
      background: var(--surface-sunk);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 9px 11px;
      font-family: inherit;
      font-size: 14px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .setting-input:focus { outline: none; border-color: var(--primary); }
    .household-members {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
      font-size: 14px;
      color: var(--text);
    }
    .household-member {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .household-you {
      font-size: 11px;
      font-weight: 600;
      color: var(--primary);
      background: var(--primary-soft);
      border-radius: var(--radius-pill);
      padding: 1px 8px;
    }
    .household-role {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .household-join {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      align-items: center;
    }
    .household-invite-result {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }
    .household-code {
      font-family: var(--font-mono, monospace);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: var(--text);
      background: var(--surface-sunk);
      border-radius: var(--radius-sm);
      padding: 8px 14px;
    }
    .household-code-hint {
      flex-basis: 100%;
      font-size: 12px !important;
      color: var(--text-muted) !important;
      margin: 0 !important;
      line-height: 1.45;
    }

    .setting-link {
      background: none;
      border: none;
      padding: 0;
      color: var(--primary);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }
    .setting-link:hover { color: var(--primary-hover); }
    .setting-link.danger { color: var(--berry-600); }
    .setting-link.danger:hover { color: var(--berry-700); }

    /* ===================== ONBOARDING TOUR (concept 08) =====================
       Welcome sheet, Capture coachmark, household-invite sheet. */

    /* Welcome sheet · single-screen modal that appears on first sign-in.
       Bottom-aligned on phones for thumb reach; centered on wider
       viewports through the @media block at the desktop column rule. */
    .welcome-sheet {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15, 12, 9, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .welcome-sheet.show { display: flex; animation: tour-fade-in 220ms var(--ease-out); }
    .welcome-sheet-card {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border-radius: 22px;
      padding: 24px 22px 22px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
      animation: tour-slide-up 320ms var(--ease-out);
      text-align: center;
    }
    .welcome-hero {
      width: 78px;
      height: 78px;
      border-radius: 22px;
      background: linear-gradient(135deg, var(--saffron-400), var(--berry-500));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      margin: 0 auto 16px;
      box-shadow: 0 10px 24px rgba(249, 115, 22, 0.32);
    }
    .welcome-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 24px;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .welcome-lede {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 280px;
      margin: 0 auto 16px;
    }
    .welcome-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 18px;
    }
    .welcome-pills span {
      font-size: 11.5px;
      font-weight: 600;
      background: var(--saffron-50);
      color: var(--saffron-700);
      border: 1px solid var(--saffron-200);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }
    .welcome-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .welcome-primary {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      padding: 12px;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out);
    }
    .welcome-primary:hover { background: var(--primary-hover); }
    .welcome-skip {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      padding: 8px;
      cursor: pointer;
    }
    .welcome-skip:hover { color: var(--text); }
    @keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes tour-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) {
      .welcome-sheet.show, .welcome-sheet-card,
      .invite-sheet.show, .invite-sheet-card { animation: none; }
    }

    /* Coachmark · dim layer with a spot cutout over the target and a
       tooltip positioned relative to it. The spot is paint-only; the
       dim catches clicks (and forwards a tap inside the spot to the
       target via JS, so the user lands in Capture in one motion). */
    .tour-dim {
      position: fixed;
      inset: 0;
      background: rgba(15, 12, 9, 0.62);
      z-index: 1000;
      animation: tour-fade-in 200ms var(--ease-out);
    }
    .tour-spot {
      position: fixed;
      z-index: 1001;
      border-radius: 18px;
      box-shadow: 0 0 0 9999px rgba(15, 12, 9, 0.62), 0 0 0 3px var(--primary-soft);
      background: transparent;
      pointer-events: none;
      animation: tour-spot-pulse 1.8s var(--ease-out) infinite;
    }
    @keyframes tour-spot-pulse {
      0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 12, 9, 0.62), 0 0 0 3px rgba(249, 115, 22, 0.22); }
      50%      { box-shadow: 0 0 0 9999px rgba(15, 12, 9, 0.62), 0 0 0 6px rgba(249, 115, 22, 0.40); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tour-spot { animation: none; }
    }
    .tour-tooltip {
      position: fixed;
      z-index: 1002;
      background: var(--surface);
      border-radius: 14px;
      padding: 14px 16px;
      width: 260px;
      max-width: calc(100vw - 28px);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
      animation: tour-slide-up 280ms var(--ease-out);
    }
    .tour-tooltip .t-eyebrow {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--primary);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .tour-tooltip .t-title {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 500;
      margin-bottom: 5px;
      letter-spacing: -0.01em;
    }
    .tour-tooltip .t-body {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .tour-tooltip .t-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .tour-tooltip .t-skip {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      padding: 6px 4px;
    }
    .tour-tooltip .t-skip:hover { color: var(--text); }
    .tour-tooltip .t-btn {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius-pill);
      padding: 7px 16px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
    }
    .tour-tooltip .t-btn:hover { background: var(--primary-hover); }
    /* Progress dots — one per step, filled for the current. */
    .tour-tooltip .t-dots {
      display: flex;
      gap: 6px;
    }
    .tour-tooltip .t-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--stone-300);
      transition: background var(--dur-fast) var(--ease-out);
    }
    .tour-tooltip .t-dot.on { background: var(--primary); }
    /* Tooltip points down at the target. Chevron x is driven by a JS
       CSS var so it aligns with the target's centre regardless of
       where the tooltip body got clamped within the viewport. */
    .tour-tooltip-below::before {
      content: "";
      position: absolute;
      bottom: -7px;
      left: var(--tour-chevron-x, 50%);
      margin-left: -7px;
      width: 14px;
      height: 14px;
      background: var(--surface);
      transform: rotate(45deg);
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.06);
    }

    /* Invite-nudge sheet — same vocabulary as the welcome sheet so the
       two read as one family. Less ornament, more pointed copy. */
    .invite-sheet {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15, 12, 9, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .invite-sheet.show { display: flex; animation: tour-fade-in 220ms var(--ease-out); }
    .invite-sheet-card {
      width: 100%;
      max-width: 420px;
      background: var(--surface);
      border-radius: 22px;
      padding: 22px 22px 20px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
      animation: tour-slide-up 320ms var(--ease-out);
      text-align: center;
    }
    .invite-emoji {
      font-size: 44px;
      line-height: 1;
      margin-bottom: 8px;
    }
    .invite-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .invite-lede {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 300px;
      margin: 0 auto 18px;
    }
    .invite-actions { display: flex; flex-direction: column; gap: 8px; }
    .invite-primary {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      padding: 12px;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
    }
    .invite-primary:hover { background: var(--primary-hover); }
    .invite-skip {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      padding: 8px;
      cursor: pointer;
    }
    .invite-skip:hover { color: var(--text); }

    /* On desktop (mobile column constrained to 480px), center the
       welcome/invite sheets in their card column so they don't float
       to the bottom of the whole window. */
    @media (min-width: 720px) {
      .welcome-sheet, .invite-sheet { align-items: center; }
    }

    /* Quickstart sample picker · onboarding step that lets a new
       user seed their hive in one go. Modal sheet on phones,
       centered card on desktop; the inner card has a fixed footer
       so the action buttons never scroll out of reach. */
    .quickstart-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15, 12, 9, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
    }
    .quickstart-modal.open { display: flex; animation: tour-fade-in 220ms var(--ease-out); }
    .quickstart-card {
      width: 100%;
      max-width: 520px;
      max-height: 92vh;
      background: var(--surface);
      border-radius: 22px 22px 0 0;
      display: flex;
      flex-direction: column;
      box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
      animation: tour-slide-up 320ms var(--ease-out);
    }
    .quickstart-head {
      padding: 22px 22px 12px;
      text-align: center;
      flex: 0 0 auto;
    }
    .quickstart-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    .quickstart-lede {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 340px;
      margin: 0 auto;
    }
    .quickstart-grid {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 8px 16px 12px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      align-content: start;
    }
    .qs-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      padding: 10px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: border-color var(--dur-fast) var(--ease-out),
                  background var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out);
    }
    .qs-tile:hover { border-color: var(--primary-soft); }
    .qs-tile:active { transform: scale(0.98); }
    .qs-tile.selected {
      border-color: var(--primary);
      background: var(--saffron-50);
    }
    .qs-tile-thumb {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
    }
    .qs-tile-body { display: flex; flex-direction: column; gap: 2px; }
    .qs-tile-name {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .qs-tile-meta {
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .qs-tile-check {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.85);
      background: rgba(0, 0, 0, 0.18);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--dur-fast) var(--ease-out),
                  border-color var(--dur-fast) var(--ease-out);
    }
    .qs-tile.selected .qs-tile-check {
      background: var(--primary);
      border-color: white;
    }
    .qs-tile.selected .qs-tile-check::after {
      content: "✓";
      color: white;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
    }
    .quickstart-footer {
      flex: 0 0 auto;
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--border);
      background: var(--surface);
    }
    .quickstart-skip {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 500;
      padding: 12px 14px;
      cursor: pointer;
    }
    .quickstart-skip:hover { color: var(--text); }
    .quickstart-add {
      flex: 1;
      padding: 12px;
      font-size: 14.5px;
      font-weight: 600;
    }
    .quickstart-add:disabled {
      background: var(--surface-sunk);
      color: var(--text-faint);
      cursor: not-allowed;
    }
    @media (min-width: 720px) {
      .quickstart-modal { align-items: center; padding: 24px; }
      .quickstart-card  { border-radius: 22px; max-height: 80vh; }
    }

    /* Floating multi-select bar on the sample library — appears when
       at least one card is picked, hides when the user clears them
       all. Anchored above the bottom nav so it doesn't collide. */
    .sample-lib-bar {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: calc(86px + env(safe-area-inset-bottom));
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px 10px 16px;
      background: var(--text);
      color: white;
      border-radius: 999px;
      box-shadow: 0 12px 30px rgba(28, 25, 23, 0.22);
      animation: tour-slide-up 240ms var(--ease-out);
    }
    .sample-lib-bar.show { display: flex; }
    .sample-lib-bar .slb-count {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .sample-lib-bar .slb-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .sample-lib-bar .slb-clear {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.75);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 500;
      padding: 6px 10px;
      cursor: pointer;
    }
    .sample-lib-bar .slb-clear:hover { color: white; }
    .sample-lib-bar .slb-btn {
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 999px;
      padding: 8px 16px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .sample-lib-bar .slb-btn:hover { background: var(--primary-hover); }
    .sample-lib-bar .slb-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    @media (min-width: 720px) {
      .sample-lib-bar { left: auto; right: 24px; width: min(420px, 90vw); }
    }

    /* Library card · selected state (multi-select). The added state
       stays as before — opaque + a fixed tick. */
    .sample-card.selected {
      border-color: var(--primary);
      background: var(--saffron-50);
    }
    .sample-card.selected .add-btn {
      background: var(--primary);
      color: white;
    }
    .sample-card[role="button"] { cursor: pointer; }
    .sample-card.added[role="button"] { cursor: default; }

    /* --- PWA install banner --- */
    .install-banner {
      display: none;
      margin: 12px 20px 0;
      padding: 14px 16px;
      background: var(--primary-soft);
      border: 1px solid var(--saffron-200);
      border-radius: var(--radius);
      gap: 12px;
      align-items: flex-start;
      box-shadow: var(--shadow-sm);
    }
    :root[data-theme="dark"] .install-banner { border-color: var(--saffron-700); }
    .install-banner.show { display: flex; }
    .install-banner .install-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      background: var(--primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .install-banner .install-body { flex: 1; min-width: 0; }
    .install-banner .install-title {
      font-weight: 600;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 2px;
    }
    .install-banner .install-copy {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .install-banner .install-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .install-banner button {
      background: none;
      border: none;
      color: var(--primary);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
    }
    .install-banner button:hover { background: rgba(249, 115, 22, 0.08); }
    .install-banner button.dismiss { color: var(--text-muted); }

    /* --- Toast --- */
    .toast {
      position: fixed;
      bottom: 96px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--stone-900);
      color: var(--cream-50);
      padding: 11px 20px;
      border-radius: var(--radius-pill);
      font-size: 14px;
      font-weight: 500;
      z-index: 300;
      box-shadow: var(--shadow-lg);
      animation: fadeInOut 2s ease-in-out;
      pointer-events: none;
    }

    @keyframes fadeInOut {
      0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
      15% { opacity: 1; transform: translateX(-50%) translateY(0); }
      85% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* --- Loading --- */
    .loading {
      display: flex;
      justify-content: center;
      padding: 32px;
    }

    .spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--stone-200);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* While Cook mode is open, hide the bottom nav and drop the
       body's bottom padding (the cook shell owns the full viewport). */
    body.cooking { padding-bottom: 0; }
    body.cooking .bottom-nav { display: none; }

    /* ============================================================
       Cook mode · Phase 1 · slice 2.
       Dark full-screen shell that overlays everything (including the
       bottom nav). The flow is two views: 'cook' (steps + timer) then
       'finish' (rating + tweak). Backed by client-side ephemeral state
       — the DB write is one cook_events row on Save & close.
       ============================================================ */
    .cook-shell {
      position: fixed;
      inset: 0;
      /* Explicit height belts the inset:0 suspenders — guards against
         any future ancestor transform/filter creating a containing
         block that would relax our viewport pinning. */
      height: 100dvh;
      max-height: 100dvh;
      z-index: 300;
      background: #0d0a06;
      color: #f5efe4;
      overflow: hidden;
      /* Force dark even when the app is in light mode. */
      color-scheme: dark;
    }
    /* cook-shell-content is the actual flex column. The shell wraps
       it so cook-ing-sheet (position: absolute) can overlay without
       participating in the layout. */
    #cook-shell-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    @media (min-width: 720px) {
      .cook-shell {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
        border-left: 1px solid #2d271f;
        border-right: 1px solid #2d271f;
      }
    }

    .cook-top {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px 8px;
      flex-shrink: 0;
    }
    .cook-top .icon-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #b6a994;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .cook-top .icon-btn:hover { background: rgba(255,255,255,0.06); color: #f5efe4; }
    .cook-progress {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
      overflow: hidden;
    }
    .cook-progress .bar {
      height: 100%;
      background: var(--saffron-500);
      transition: width 240ms var(--ease-out);
    }
    .cook-top .plate-pill {
      font-size: 11.5px;
      font-weight: 600;
      color: #b6a994;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      flex-shrink: 0;
    }
    .cook-top .ingredients-btn {
      font-size: 12px;
      font-weight: 600;
      color: var(--saffron-300);
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .cook-top .ingredients-btn:hover { background: rgba(249,115,22,0.10); border-color: var(--saffron-500); }

    .cook-step-counter {
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #7a715f;
      padding: 4px 0 18px;
    }

    /* Stage is the scroll container. We deliberately don't center
       here — when content overflows in a flex column with
       justify-content: center, browsers clip the top so the user
       can't scroll up to it. Instead the inner .cook-step-content
       wrapper handles vertical centering for short content. */
    .cook-step-stage {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      padding: 16px 28px 24px;
    }
    /* For a normal recipe step: pin to vertical center if content
       is short, top-anchor and scroll once it exceeds the viewport. */
    .cook-step-content {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    /* For prep stage: just flow from top, no centering games. */
    .cook-prep-content {
      /* block layout — natural top-down flow, parent scrolls it. */
    }
    .cook-step-text {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 26px;
      line-height: 1.32;
      letter-spacing: -0.01em;
      color: #f5efe4;
      font-variation-settings: 'SOFT' 70, 'opsz' 36;
      text-align: left;
    }
    /* Prep stage · synthetic first step when D5b is on */
    .cook-prep-header {
      margin-bottom: 18px;
    }
    .cook-prep-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #f5efe4;
      margin-bottom: 6px;
    }
    .cook-prep-sub {
      font-size: 13.5px;
      color: #b6a994;
      line-height: 1.5;
    }
    .cook-prep-list {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 4px;
    }
    .cook-prep-row {
      display: flex;
      gap: 12px;
      padding: 9px 0;
      font-size: 15px;
      line-height: 1.4;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: #f5efe4;
    }
    .cook-prep-row:last-child { border-bottom: none; }
    .cook-prep-row .qty {
      font-family: var(--font-mono);
      font-size: 13.5px;
      color: var(--saffron-300);
      min-width: 78px;
      flex-shrink: 0;
      padding-top: 1px;
    }
    .cook-prep-row .nm { flex: 1; }
    .cook-prep-row .notes {
      color: #7a715f;
      margin-left: 6px;
      font-size: 12.5px;
    }

    /* Timer pill (lives below the step text) */
    .cook-timer-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 22px;
      padding: 10px 18px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: #f5efe4;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .cook-timer-pill:hover { background: rgba(249,115,22,0.10); border-color: var(--saffron-500); }
    .cook-timer-pill.running { border-color: var(--saffron-500); color: var(--saffron-300); }
    .cook-timer-pill.firing {
      background: var(--saffron-500);
      border-color: var(--saffron-400);
      color: #18140f;
      animation: cookTimerPulse 0.9s ease-in-out infinite;
    }
    @keyframes cookTimerPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.04); }
    }

    .cook-bottom {
      display: flex;
      gap: 10px;
      padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
      flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.20);
    }
    .cook-bottom button {
      flex: 1;
      padding: 16px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      color: #f5efe4;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .cook-bottom button:hover:not([disabled]) { background: rgba(255,255,255,0.08); }
    .cook-bottom button[disabled] { opacity: 0.35; cursor: not-allowed; }
    .cook-bottom button.primary {
      background: var(--saffron-500);
      border-color: var(--saffron-500);
      color: #18140f;
      box-shadow: 0 6px 16px rgba(249,115,22,0.32);
    }
    .cook-bottom button.primary:hover:not([disabled]) { background: var(--primary-hover); }

    /* Ingredients sheet — slides up from the bottom inside cook shell */
    .cook-ing-sheet {
      position: absolute;
      inset: 0;
      z-index: 10;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: flex-end;
      justify-content: center;
    }
    .cook-ing-sheet.open { display: flex; }
    .cook-ing-sheet .sheet {
      width: 100%;
      max-height: 70%;
      overflow-y: auto;
      background: #1f1b15;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255,255,255,0.08);
      animation: slideUp 0.28s var(--ease-out);
    }
    .cook-ing-sheet h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 18px;
      margin: 0 0 12px;
      color: #f5efe4;
    }
    .cook-ing-sheet .row {
      display: flex;
      gap: 12px;
      padding: 8px 0;
      font-size: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      color: #f5efe4;
    }
    .cook-ing-sheet .row:last-child { border-bottom: none; }
    .cook-ing-sheet .qty {
      font-family: var(--font-mono);
      font-size: 13px;
      color: #b6a994;
      min-width: 70px;
      flex-shrink: 0;
    }
    .cook-ing-sheet .nm { flex: 1; }
    .cook-ing-sheet .notes { color: #7a715f; margin-left: 6px; font-size: 12px; }
    .cook-ing-sheet .close-row {
      margin-top: 14px;
      display: flex;
      justify-content: center;
    }
    .cook-ing-sheet .close-row button {
      padding: 10px 22px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: #f5efe4;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    /* End-of-cook view (shares the cook-shell container) */
    .cook-finish {
      flex: 1;
      overflow-y: auto;
      padding: 28px 24px 32px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .cook-finish .celebrate {
      text-align: center;
      padding-top: 6px;
    }
    .cook-finish .celebrate .emoji {
      font-size: 56px;
      line-height: 1;
      margin-bottom: 8px;
    }
    .cook-finish .celebrate h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 28px;
      letter-spacing: -0.015em;
      color: #f5efe4;
      margin-bottom: 6px;
    }
    .cook-finish .celebrate p {
      font-size: 13.5px;
      color: #b6a994;
    }

    .rating-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .rating-chip {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 14px 8px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,0.04);
      border: 1.5px solid rgba(255,255,255,0.08);
      color: #f5efe4;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .rating-chip .em { font-size: 26px; line-height: 1; }
    .rating-chip:hover { border-color: rgba(255,255,255,0.20); }
    .rating-chip.on {
      border-color: var(--saffron-400);
      background: rgba(249,115,22,0.12);
      color: var(--saffron-300);
    }

    .cook-finish label.field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .cook-finish label.field .lbl {
      font-size: 13px;
      font-weight: 600;
      color: #b6a994;
    }
    .cook-finish textarea {
      width: 100%;
      min-height: 84px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.04);
      border: 1.5px solid rgba(255,255,255,0.10);
      border-radius: var(--radius);
      color: #f5efe4;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.5;
      resize: vertical;
      outline: none;
    }
    .cook-finish textarea:focus { border-color: var(--saffron-500); }
    .cook-finish textarea::placeholder { color: #5e574a; }

    .cook-finish-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 6px;
    }
    .cook-finish-actions .save-btn {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-lg);
      background: var(--saffron-500);
      color: #18140f;
      border: none;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(249,115,22,0.36);
    }
    .cook-finish-actions .save-btn[disabled] { opacity: 0.7; cursor: progress; }
    .cook-finish-actions .skip-btn {
      width: 100%;
      padding: 12px;
      background: transparent;
      color: #b6a994;
      border: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .cook-finish-actions .skip-btn:hover { color: #f5efe4; }

    /* "Snap it" photo block — slots between rating and tweak in
       the finish view. Empty state is a dashed drop zone; once a
       photo is staged we swap in a thumbnail + replace/remove. */
    .snap-it-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,0.03);
      border: 1.5px dashed rgba(255,255,255,0.18);
      color: #b6a994;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .snap-it-empty:hover {
      border-color: var(--saffron-400);
      color: var(--saffron-300);
    }
    .snap-it-empty svg { flex-shrink: 0; }
    .snap-it-hint {
      font-size: 11.5px;
      color: #7a715f;
      line-height: 1.5;
      margin-top: 6px;
      padding: 0 4px;
    }

    .snap-it-ready {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-lg);
      background: rgba(249,115,22,0.08);
      border: 1.5px solid rgba(249,115,22,0.32);
    }
    .snap-it-ready .thumb {
      width: 56px;
      height: 56px;
      border-radius: var(--radius);
      object-fit: cover;
      flex-shrink: 0;
    }
    .snap-it-ready .meta { flex: 1; min-width: 0; }
    .snap-it-ready .meta .t {
      font-size: 13px;
      font-weight: 600;
      color: var(--saffron-300);
      margin-bottom: 2px;
    }
    .snap-it-ready .meta .s {
      font-size: 11.5px;
      color: #b6a994;
    }
    .snap-it-ready .actions { display: flex; gap: 4px; flex-shrink: 0; }
    .snap-it-ready .actions button {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.10);
      color: #b6a994;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .snap-it-ready .actions button:hover { color: #f5efe4; border-color: rgba(255,255,255,0.30); }

    /* --- Desktop: constrain to a mobile-width column --- */
    @media (min-width: 720px) {
      html {
        background: var(--surface-sunk);
      }
      body {
        max-width: 480px;
        margin: 0 auto;
        min-height: 100dvh;
        background: var(--bg);
        box-shadow: 0 0 0 1px var(--border), 0 24px 60px rgba(0, 0, 0, 0.08);
      }
      :root[data-theme="dark"] body {
        box-shadow: 0 0 0 1px var(--border), 0 24px 60px rgba(0, 0, 0, 0.4);
      }
      .bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
      }
    }

    /* ===================== GROCERIES (concept 05 · read path) ===================== */
    .groceries-head {
      padding: 18px 20px 6px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    /* "Cooking for…" entry to the servings modal — a quiet hint, not a
       headline, since the list itself is the main event. */
    .groceries-servings-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      padding: 7px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      color: var(--text-muted);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .groceries-servings-btn svg { opacity: 0.8; }
    .groceries-servings-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

    /* Servings modal rows */
    .srv-list { list-style: none; }
    .srv-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .srv-row:last-child { border-bottom: none; }
    .srv-meal { flex: 1; min-width: 0; }
    .srv-name {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .srv-day { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
    .srv-step { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
    .srv-step button {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .srv-step button:hover { border-color: var(--primary); color: var(--primary); }
    .srv-count { font-weight: 600; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
    .groceries-title {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: 'SOFT' 90, 'opsz' 48;
      font-size: 26px;
      letter-spacing: -0.015em;
      color: var(--text);
      line-height: 1.05;
    }
    .groceries-window {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Shopping mode (concept 04c) · segmented toggle + one-line hint. */
    .grocery-mode {
      padding: 2px 20px 0;
    }
    .grocery-mode-toggle {
      display: flex;
      gap: 3px;
      background: var(--surface-sunk);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 3px;
    }
    .gm-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 8px;
      border: none;
      background: none;
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }
    .gm-btn svg { opacity: 0.85; }
    .gm-btn.on { background: var(--surface); box-shadow: var(--shadow-sm); }
    #gm-home.on { color: var(--sage-700); }
    #gm-shop.on { color: var(--saffron-700); }
    .grocery-mode-hint {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--text-muted);
      padding: 9px 2px 2px;
    }
    .grocery-mode-hint::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--sage-500);
    }
    .mode-shop .grocery-mode-hint::before { background: var(--saffron-500); }

    .groceries-progress {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--bg);
      padding: 8px 20px 12px;
    }
    /* At home it's a calm "N left to buy" count, not a basket race. */
    .mode-home .groceries-progress-bar { display: none; }
    .mode-home .groceries-progress-label { margin-top: 0; font-weight: 600; }
    .groceries-progress-bar {
      height: 7px;
      border-radius: var(--radius-pill);
      background: var(--surface-sunk);
      overflow: hidden;
    }
    .groceries-progress-bar > span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: var(--radius-pill);
      background: var(--primary);
      transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .groceries-progress-label {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* Quick-add · deliberately quiet, it's not the main event. */
    .grocery-add {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 4px 20px 14px;
      padding: 9px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      transition: border-color var(--dur-fast) var(--ease-out);
    }
    .grocery-add:focus-within { border-color: var(--border-strong); }
    .grocery-add-plus {
      color: var(--primary);
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
    }
    .grocery-add input {
      flex: 1;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 14px;
      color: var(--text);
    }
    .grocery-add input::placeholder { color: var(--text-faint); }
    .grocery-add input:focus { outline: none; }

    .grocery-aisle {
      margin: 0 0 18px;
    }
    .grocery-aisle-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-faint);
      padding: 0 20px 8px;
      margin: 0;
    }
    .grocery-aisle-icon {
      font-size: 15px;
      line-height: 1;
      filter: saturate(0.9);
    }
    .grocery-aisle-name { flex: 0 0 auto; }
    .grocery-aisle-count {
      margin-left: auto;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--stone-300);
      text-transform: none;
    }
    .grocery-aisle-items {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      max-height: 4000px;
      transition: max-height 340ms var(--ease-out), opacity 200ms var(--ease-out);
    }
    /* A fully-checked aisle collapses; its head turns into a tap target. */
    .grocery-aisle.is-done .grocery-aisle-head { cursor: pointer; color: var(--sage-600); }
    .grocery-aisle.is-done .grocery-aisle-count { color: var(--sage-500); }
    .grocery-aisle.is-done .grocery-aisle-items {
      max-height: 0;
      opacity: 0;
      border-color: transparent;
    }
    .grocery-aisle.is-done.is-expanded .grocery-aisle-items {
      max-height: 4000px;
      opacity: 1;
      border-color: var(--border);
    }

    .grocery-row {
      display: flex;
      align-items: stretch;
      width: 100%;
      border-bottom: 1px solid var(--border);
      -webkit-tap-highlight-color: transparent;
    }
    .grocery-row:last-child { border-bottom: none; }
    /* Left hit area = the check circle (marks done). */
    .grocery-check-btn {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      padding: 13px 6px 13px 20px;
      background: none;
      border: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    /* Right hit area = the rest of the row (opens the detail sheet). */
    .grocery-body-btn {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 20px 13px 7px;
      background: none;
      border: none;
      text-align: left;
      color: var(--text);
      font: inherit;
      cursor: pointer;
    }
    .grocery-body-btn:active { background: var(--surface-sunk); }

    /* Item detail sheet */
    .gd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
    .gd-close {
      flex-shrink: 0;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: var(--surface-sunk); color: var(--text-muted);
      border-radius: 50%; cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .gd-close:hover { background: var(--border); color: var(--text); }
    .gd-section-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-faint); margin-bottom: 8px;
    }
    /* Cap the breakdown so the actions below it stay visible without
       scrolling the whole sheet; this list scrolls on its own if long. */
    .gd-from { display: flex; flex-direction: column; max-height: 34dvh; overflow-y: auto; overscroll-behavior: contain; }
    .gd-from-row {
      display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
      padding: 9px 0; border-bottom: 1px solid var(--border);
    }
    .gd-from-row:last-child { border-bottom: none; }
    .gd-from-name { font-size: 14px; font-weight: 500; color: var(--text); }
    .gd-from-meta { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
    .gd-from-empty { font-size: 13.5px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
    .gd-actions { margin-top: 18px; }
    .gd-actions .gd-have { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    /* "How much do you have?" segmented + stepper */
    .gd-seg { display: flex; gap: 7px; }
    .gd-seg button {
      flex: 1;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      border-radius: var(--radius);
      padding: 10px 4px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    }
    .gd-seg button.on { background: var(--sage-50); border-color: var(--sage-500); color: var(--sage-700); }
    .gd-stepper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 14px;
    }
    .gd-stepper button {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--border-strong);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 19px; line-height: 1;
      cursor: pointer;
    }
    .gd-stepper button:hover { border-color: var(--primary); color: var(--primary); }
    .gd-stepper .v { font-weight: 600; font-size: 15.5px; min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; }

    .grocery-check {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border-strong);
      position: relative;
      transition: background 0.15s, border-color 0.15s;
    }
    .grocery-check::after {
      content: '';
      position: absolute;
      left: 6px;
      top: 2px;
      width: 5px;
      height: 10px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg) scale(0);
      transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .grocery-row.is-checked .grocery-check {
      background: var(--primary);
      border-color: var(--primary);
    }
    /* "Bought" (shopping) ticks read saffron; "have" (at home) reads sage. */
    .grocery-row.is-have .grocery-check {
      background: var(--sage-500);
      border-color: var(--sage-500);
    }
    .grocery-row.is-bought .grocery-check {
      background: var(--saffron-500);
      border-color: var(--saffron-500);
    }
    .grocery-row.is-checked .grocery-check::after { transform: rotate(45deg) scale(1); }

    .grocery-main {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .grocery-name {
      font-size: 15px;
      line-height: 1.25;
      transition: color 0.15s;
    }
    .grocery-row.is-checked .grocery-name {
      color: var(--text-faint);
      text-decoration: line-through;
    }
    .grocery-from {
      font-size: 12px;
      color: var(--text-faint);
    }
    .grocery-qty {
      flex: 0 0 auto;
      font-size: 14px;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .grocery-row.is-checked .grocery-qty { color: var(--text-faint); }

    .groceries-loading {
      padding: 40px 20px;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
    }
    .groceries-empty {
      padding: 56px 32px;
      text-align: center;
      color: var(--text-muted);
    }
    .groceries-empty-icon { font-size: 40px; margin-bottom: 12px; }
    .groceries-empty p { margin: 0 0 6px; font-size: 16px; color: var(--text); }
    .groceries-empty-sub { font-size: 14px !important; color: var(--text-muted) !important; line-height: 1.5; margin-bottom: 20px !important; }
    .groceries-empty .btn { margin-top: 8px; }

    /* --- Pantry (concept 06; Phase 1 polish per concept 08) --- */
    .pantry-usefirst {
      margin: 8px 0 16px;
      padding: 12px 0 6px;
      background: var(--primary-soft);
      border-top: 1px solid var(--saffron-200);
      border-bottom: 1px solid var(--saffron-200);
    }
    .pantry-usefirst-head {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 14px;
      color: var(--saffron-700);
      padding: 0 20px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    /* Horizontal scroll rail of name pills — quieter than the previous
       comma-separated paragraph, same data. No emoji / no traffic-light
       cards: we don't want to lean visual confidence on a shelf-life
       estimate (see concept 08 · "tension we're holding"). */
    .pantry-usefirst-rail {
      display: flex;
      gap: 8px;
      padding: 2px 20px 8px;
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    .pantry-usefirst-rail::-webkit-scrollbar { display: none; }
    .pantry-usefirst-pill {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 11px;
      background: var(--surface);
      border: 1px solid var(--saffron-200);
      border-radius: var(--radius-pill);
      font-size: 12.5px;
      color: var(--text);
      scroll-snap-align: start;
      box-shadow: 0 1px 2px rgba(28,25,23,.04);
    }
    .pantry-usefirst-pill .puf-name { font-weight: 500; }
    .pantry-usefirst-pill .puf-days {
      font-size: 11px;
      font-weight: 600;
      color: var(--saffron-700);
    }

    /* Softer aisle headers — a slightly raised tile around the emoji
       so it reads as an aisle "label", item count on the right, sticky
       on scroll so you always know which aisle you're in. */
    .pantry-aisle-head {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg);
      padding-top: 10px;
      padding-bottom: 8px;
    }
    .pantry-aisle-head .grocery-aisle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      font-size: 15px;
    }
    .pantry-aisle-count {
      margin-left: auto;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-faint);
      letter-spacing: 0;
      text-transform: none;
    }

    .pantry-row {
      display: flex;
      align-items: center;
      gap: 10px;
      /* 20px left to align names with the aisle-header text;
         12px right so the X remove doesn't hug the edge either. */
      padding: 13px 12px 13px 20px;
      border-bottom: 1px solid var(--border);
    }
    .pantry-row:last-child { border-bottom: none; }
    .pantry-days {
      /* align-self: stops the parent .grocery-main flex column from
         stretching this pill across the whole row (the "yellow bar"
         bug). It's a pill, not a bar. */
      align-self: flex-start;
      display: inline-block;
      margin-left: 8px;
      padding: 1px 8px;
      border-radius: var(--radius-pill);
      font-size: 11px;
      font-weight: 600;
      vertical-align: middle;
      background: var(--surface-sunk);
      color: var(--text-faint);
      white-space: nowrap;
    }
    .pantry-days.is-soon { background: var(--honey-100); color: var(--honey-700); }
    .pantry-days.is-expired { background: var(--berry-100); color: var(--berry-700); }
    .pantry-row.is-expired .grocery-name { color: var(--text-muted); }
    .pantry-remove {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      border-radius: 50%;
      color: var(--text-faint);
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .pantry-remove:active { background: var(--surface-sunk); color: var(--berry-600); }