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

:root {
  /* Complete Palette (light) — Background/Surface/Primary Text/Secondary Text/Borders are the
     exact hexes from the brand palette; Primary drives --accent since that's the one color used
     throughout for buttons/links/active states. Secondary and Highlight are carried through as
     their own variables for anything that needs a supporting brand color beyond the core UI ones. */
  --surface-0: #f3ebdd;   /* Background */
  --surface-1: #fbf8f2;   /* Surface */
  --surface-2: #fbf8f2;   /* Surface */
  --text-primary: #2b2722;   /* Primary Text */
  --text-secondary: #6a6257; /* Secondary Text */
  --text-muted: #a69c8d;     /* derived — lighter than Secondary Text, darker than Borders */
  --border: #dccfbf;         /* Borders */
  --border-strong: #c7b7a0;  /* derived — a deeper Borders tone for stronger dividers/inputs */
  --accent: #2e3a2d;      /* Primary */
  --accent-bg: #e7eae3;   /* derived — light tint of Primary */
  --accent-text: #2e3a2d; /* Primary */
  --accent-border: #c3cbbb; /* derived — mid tint of Primary */
  --secondary: #5a6a46;   /* Secondary */
  --highlight: #c88b3a;   /* Highlight */
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --success: #16a34a;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode isn't in the given palette, so these are derived from the same brand colors:
       Background becomes text, Primary's darkened further for the backdrop, and Accent (the
       brighter sage) takes over as --accent since Primary itself is too dark to read against a
       dark surface. */
    --surface-0: #1e231c;
    --surface-1: #262b22;
    --surface-2: #2e332a;
    --text-primary: #f3ebdd;
    --text-secondary: #c9bfae;
    --text-muted: #8b8477;
    --border: rgba(255,255,255,0.1);
    --border-strong: rgba(255,255,255,0.18);
    --accent: #748c5b;
    --accent-bg: #33402c;
    --accent-text: #c7d6b8;
    --accent-border: #445239;
    --secondary: #8fa377;
    --highlight: #e0a857;
  }
}

html, body { overflow-x: hidden; overscroll-behavior-x: none; }
body { font-family: var(--font); font-size: 15px; color: var(--text-primary); background: var(--surface-0); }

.app { display: flex; flex-direction: column; height: 100vh; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 0.5px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.logo-mark { display: block; flex-shrink: 0; object-fit: contain; }
.topbar .logo-mark { width: 24px; height: 24px; }
.brand { flex: 1; display: flex; align-items: center; min-width: 0; }
.logo-horizontal-topbar { display: block; height: 40px; width: auto; }
.hamburger-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--text-primary); font-size: 19px; border-radius: var(--radius); flex-shrink: 0; }
.hamburger-btn:hover { background: var(--surface-1); }
.nav-tabs { display: flex; gap: 4px; }
.nav-tab { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius); border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-secondary); font-family: var(--font); transition: background 0.15s; }
.nav-tab:hover { background: var(--surface-1); color: var(--text-primary); }
.nav-tab.active { background: var(--accent-bg); color: var(--accent-text); font-weight: 500; }
.cart-count { background: var(--accent); color: white; border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-left: 2px; }

.main { display: flex; flex: 1; overflow: hidden; }

.sidebar { width: 210px; flex-shrink: 0; border-right: 0.5px solid var(--border); overflow-y: auto; padding: 8px; background: var(--surface-1); }
.sidebar-heading { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 8px 4px; }
.cat-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius); border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-secondary); text-align: left; font-family: var(--font); transition: background 0.15s; white-space: nowrap; overflow: hidden; }
.cat-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.cat-btn.active { background: var(--surface-2); color: var(--text-primary); font-weight: 500; }
.cat-count { margin-left: auto; font-size: 11px; color: var(--text-muted); background: var(--surface-0); padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }

.content { flex: 1; overflow-y: auto; padding: 20px; }
.view { display: none; }
.view.active { display: block; }

.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h2 { font-size: 20px; font-weight: 500; flex: 1; }
.header-actions { display: flex; gap: 8px; align-items: center; }

.search-bar { position: relative; }
.search-bar input { padding-left: 32px; width: 220px; font-size: 13px; }
.search-bar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; pointer-events: none; }

.loading { color: var(--text-muted); font-size: 14px; padding: 40px 0; display: flex; align-items: center; gap: 8px; }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.recipe-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; position: relative; user-select: none; }
.recipe-card:hover { border-color: var(--border-strong); }
.recipe-card:active { transform: scale(0.98); }
.recipe-card.selected { border-color: var(--accent); background: var(--accent-bg); }
.recipe-card .emoji { font-size: 28px; margin-bottom: 8px; }
.recipe-card h3 { font-size: 13px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.recipe-card .meta { font-size: 11px; color: var(--text-muted); }
.recipe-card .hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.check-badge { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: none; align-items: center; justify-content: center; }
.check-badge i { font-size: 12px; color: white; }
.recipe-card.selected .check-badge { display: flex; }

.recipe-detail { display: none; }
.recipe-detail.active { display: block; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-bottom: 16px; border: none; background: none; font-family: var(--font); padding: 0; }
.back-btn:hover { color: var(--text-primary); }
.detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.detail-emoji { font-size: 52px; line-height: 1; }
.detail-meta { flex: 1; }
.cat-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent-bg); color: var(--accent-text); margin-bottom: 6px; }
.detail-meta h2 { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.source-link { font-size: 13px; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.select-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius); border: 0.5px solid var(--border-strong); background: var(--surface-1); cursor: pointer; font-size: 13px; font-family: var(--font); color: var(--text-primary); transition: background 0.15s; }
.select-toggle:hover { background: var(--surface-0); }
.select-toggle.selected { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text); }
.detail-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.section-label { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 8px; }
.ingredients-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ingredients-table th { text-align: left; font-weight: 500; font-size: 11px; color: var(--text-muted); padding: 0 8px 6px 0; border-bottom: 0.5px solid var(--border); }
.ingredients-table td { padding: 7px 8px 7px 0; border-bottom: 0.5px solid var(--border); vertical-align: top; }
.ingredients-table tr:last-child td { border-bottom: none; }
.loc-badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--surface-0); color: var(--text-secondary); }
.steps-box { background: var(--surface-1); border-radius: 12px; padding: 16px; font-size: 13px; line-height: 1.8; color: var(--text-secondary); white-space: pre-line; }

.shopping-list { max-width: 640px; }
.selected-meals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.meal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-bg); color: var(--accent-text); border-radius: 20px; font-size: 12px; border: 0.5px solid var(--accent-border); }
.meal-chip button { background: none; border: none; cursor: pointer; color: var(--accent-text); padding: 0; line-height: 1; font-size: 15px; display: flex; }
.no-meals { color: var(--text-muted); font-size: 14px; text-align: center; padding: 48px 0; }
.no-meals i { font-size: 40px; margin-bottom: 12px; display: block; }
.shop-group { margin-bottom: 24px; }
.shop-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 0.5px solid var(--border); }
.shop-group-header i { font-size: 16px; color: var(--accent); }
.shop-group-header span { font-size: 13px; font-weight: 500; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.shop-item:last-child { border-bottom: none; }
.shop-item input[type=checkbox] { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }
.shop-item .item-label { flex: 1; cursor: pointer; }
.shop-item .item-label.done { text-decoration: line-through; color: var(--text-muted); }
.shop-item .from-recipe { font-size: 11px; color: var(--text-muted); }
.shop-item .qty { font-size: 12px; color: var(--text-secondary); margin-left: auto; white-space: nowrap; padding-left: 8px; }
.regular-items-section { margin-top: 28px; border-top: 0.5px solid var(--border); padding-top: 20px; }
.regular-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.regular-header i { font-size: 16px; color: var(--text-secondary); }
.regular-header h3 { font-size: 14px; font-weight: 500; }
.regular-hint { font-size: 12px; color: var(--text-muted); }
.regular-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 13px; border-bottom: 0.5px solid var(--border); }
.regular-item:last-child { border-bottom: none; }
.regular-item input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.regular-item .ri-label { flex: 1; cursor: pointer; }
.regular-item .ri-label.inactive { color: var(--text-muted); }
.regular-item .ri-qty { font-size: 12px; color: var(--text-secondary); }
.regular-item .ri-delete { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 15px; padding: 2px 4px; display: flex; margin-left: 4px; }
.regular-item .ri-delete:hover { color: var(--danger); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); border: 0.5px solid var(--border-strong); background: var(--surface-1); cursor: pointer; font-size: 13px; font-family: var(--font); color: var(--text-primary); transition: background 0.15s; }
.btn:hover { background: var(--surface-0); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { opacity: 0.9; background: var(--accent); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); }

.add-recipe-form { max-width: 580px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 10px; border-radius: var(--radius); border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary); font-size: 13px; font-family: var(--font); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.form-group textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ing-table-header { display: grid; grid-template-columns: 1fr 70px 90px 150px 32px; gap: 8px; margin-bottom: 6px; }
.ing-table-header span { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.ing-row { display: grid; grid-template-columns: 1fr 70px 90px 150px 32px; gap: 8px; align-items: start; margin-bottom: 8px; }
.ing-row input, .ing-row select, .ing-row .ing-name { font-size: 12px; padding: 6px 8px; }
.ing-row .ing-name { min-height: 0; resize: none; overflow: hidden; line-height: 1.4; font-family: var(--font); display: block; }
.del-ing { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 4px; display: flex; border-radius: var(--radius); }
.del-ing:hover { color: var(--danger); background: var(--danger-bg); }
.save-status { font-size: 13px; color: var(--success); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state i { font-size: 40px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 14px; }

/* Autocomplete */
.ing-name-wrap { position: relative; }
.autocomplete-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--surface-2); border: 0.5px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 50; max-height: 180px; overflow-y: auto; }
.autocomplete-item { padding: 7px 10px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--accent-bg); color: var(--accent-text); }
.autocomplete-item .ac-loc { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.autocomplete-item:hover .ac-loc, .autocomplete-item.active .ac-loc { color: var(--accent-text); opacity: 0.7; }
.autocomplete-new { font-style: italic; color: var(--text-muted); }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface-2); border-radius: 12px; border: 0.5px solid var(--border); max-width: 480px; width: 100%; }
.modal-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 0.5px solid var(--border); }
.modal-header h3 { flex: 1; font-size: 15px; font-weight: 500; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; display: flex; padding: 2px; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 0.5px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── Recipe card source link ── */
.recipe-card .card-source { font-size: 11px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipe-card .card-source a { color: var(--accent); text-decoration: none; }
.recipe-card .card-source a:hover { text-decoration: underline; }
.recipe-card .card-source span { color: var(--text-muted); }

/* ── Weekly planner ── */
.planner-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; min-height: 400px; }
.planner-day { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 200px; }
.planner-day-header { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; padding-bottom: 6px; border-bottom: 0.5px solid var(--border); margin-bottom: 2px; }
.planner-day-header .day-date { font-size: 11px; font-weight: 400; color: var(--text-muted); display: block; }
.planner-day.today { border-color: var(--accent); }
.planner-day.today .planner-day-header { color: var(--accent-text); }
.planner-slot { background: var(--surface-1); border: 0.5px dashed var(--border-strong); border-radius: 8px; padding: 7px 8px; min-height: 52px; position: relative; transition: border-color 0.15s; }
.planner-slot.has-recipe { background: var(--accent-bg); border-color: var(--accent-border); border-style: solid; }
.planner-slot.has-custom { background: var(--surface-0); border-style: solid; border-color: var(--border-strong); }
.planner-slot.drag-over { border-color: var(--accent); background: var(--accent-bg); }
.planner-slot-emoji { font-size: 16px; line-height: 1; }
.planner-slot-name { font-size: 11px; font-weight: 500; color: var(--text-primary); line-height: 1.3; margin-top: 2px; }
.planner-slot-cat { font-size: 10px; color: var(--text-muted); }
.planner-slot-clear { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 1px; display: flex; border-radius: 4px; opacity: 0; transition: opacity 0.15s; }
.planner-slot:hover .planner-slot-clear { opacity: 1; }
.planner-slot-clear:hover { color: var(--danger); background: var(--danger-bg); }
.planner-slot-empty { font-size: 11px; color: var(--text-muted); text-align: center; padding: 6px 0; width: 100%; }
.planner-slot-input { width: 100%; background: none; border: none; font-size: 11px; font-family: var(--font); color: var(--text-primary); outline: none; resize: none; padding: 0; line-height: 1.4; }
.planner-slot-input::placeholder { color: var(--text-muted); }

/* Drag source */
.recipe-card.dragging { opacity: 0.4; }

/* ── Planner v4 ── */
.planner-layout { display: flex; gap: 16px; height: calc(100vh - 120px); overflow: hidden; }
.planner-staging { width: 200px; flex-shrink: 0; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.staging-header { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.staging-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.staging-list { display: flex; flex-direction: column; gap: 6px; }
.staging-card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.staging-card:hover { border-color: var(--accent); background: var(--accent-bg); }
.staging-card.active-assign { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-border); }
.staging-card .sc-emoji { font-size: 18px; margin-bottom: 3px; }
.staging-card .sc-name { font-size: 12px; font-weight: 500; line-height: 1.3; }
.staging-card .sc-cat { font-size: 11px; color: var(--text-muted); }
.staging-empty { font-size: 12px; color: var(--text-muted); text-align: center; padding: 20px 0; line-height: 1.6; }

.planner-right { flex: 1; overflow-y: auto; }
.planner-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.planner-day { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.planner-day.today { border-color: var(--accent); }
.planner-day-header { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; padding-bottom: 5px; border-bottom: 0.5px solid var(--border); }
.planner-day.today .planner-day-header { color: var(--accent-text); }
.planner-day-header .day-date { font-size: 10px; font-weight: 400; color: var(--text-muted); display: block; margin-top: 1px; }

.planner-slot { border: 0.5px dashed var(--border-strong); border-radius: 7px; padding: 6px; min-height: 54px; cursor: pointer; transition: border-color 0.15s, background 0.15s; position: relative; display: flex; flex-direction: column; justify-content: center; }
.planner-slot.empty { align-items: center; }
.planner-slot.empty:hover { border-color: var(--accent); background: var(--accent-bg); }
.planner-slot.ready-to-assign { border-color: var(--accent); border-style: solid; background: var(--accent-bg); animation: pulse-border 1.2s ease-in-out infinite; }
@keyframes pulse-border { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.15); } 50% { box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } }
.planner-slot.has-recipe { background: var(--accent-bg); border-color: var(--accent-border); border-style: solid; cursor: pointer; }
.planner-slot.has-custom { background: var(--surface-0); border-style: solid; cursor: default; }
.slot-empty-label { font-size: 10px; color: var(--text-muted); text-align: center; }
.slot-emoji { font-size: 14px; line-height: 1; }
.slot-name { font-size: 11px; font-weight: 500; color: var(--text-primary); line-height: 1.3; margin-top: 2px; }
.slot-cat { font-size: 10px; color: var(--text-muted); }
.slot-remove { position: absolute; top: 3px; right: 3px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 1px; border-radius: 3px; display: flex; opacity: 0; transition: opacity 0.15s; }
.planner-slot:hover .slot-remove { opacity: 1; }
.slot-remove:hover { color: var(--danger); }
.slot-text-input { width: 100%; background: none; border: none; font-size: 11px; font-family: var(--font); color: var(--text-primary); outline: none; resize: none; padding: 0; line-height: 1.4; min-height: 36px; }
.slot-text-input::placeholder { color: var(--text-muted); }

/* ── Shopping week nav & day toggles ── */
.shop-week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.day-toggles { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.day-toggle { padding: 4px 10px; border-radius: 20px; border: 0.5px solid var(--border-strong); background: var(--surface-1); font-size: 12px; cursor: pointer; font-family: var(--font); color: var(--text-secondary); transition: background 0.15s; }
.day-toggle.on { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-border); font-weight: 500; }
.day-toggle.has-meals { font-weight: 500; }

/* ── v5 overrides ── */
.planner-top-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.planner-top-bar h2 { font-size:20px; font-weight:500; }
.planner-controls { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.week-label { font-size:13px; color:var(--text-secondary); white-space:nowrap; }

.staging-header { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text-secondary); }
.staging-header .btn-xs { margin-left:auto; padding:2px 7px; font-size:11px; }
.btn-xs { padding:2px 8px; font-size:11px; }

.staging-card { cursor:grab; user-select:none; }
.staging-card:active { cursor:grabbing; opacity:0.7; }
.staging-card.dragging { opacity:0.35; }

.planner-slot.drag-over { border-color:var(--accent) !important; border-style:solid !important; background:var(--accent-bg) !important; }

/* Remove day-toggle styles — no longer used */
.day-toggles { display:none; }
.shop-week-nav { display:none; }

/* ── Shopping meal chips ── */
.shop-meal-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; padding-bottom:16px; border-bottom:0.5px solid var(--border); }
.shop-meal-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:var(--accent-bg); color:var(--accent-text); border:0.5px solid var(--accent-border); border-radius:20px; font-size:12px; white-space:nowrap; }

/* ── Regular items standalone tab ── */
.regulars-view { max-width: 640px; }
.regulars-group { margin-bottom: 24px; }
.regulars-group-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding-bottom:6px; border-bottom:0.5px solid var(--border); }
.regulars-group-header i { font-size:16px; color:var(--accent); }
.regulars-group-header span { font-size:13px; font-weight:500; }
.regular-item-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:0.5px solid var(--border); font-size:13px; }
.regular-item-row:last-child { border-bottom:none; }
.regular-item-row input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); flex-shrink:0; }
.regular-item-row .ri-label { flex:1; cursor:pointer; color:var(--text-muted); }
.regular-item-row .ri-label.checked { text-decoration:none; color:var(--text-primary); font-weight:600; }
.regular-item-row .ri-qty { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.regular-item-row .ri-delete { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:15px; padding:2px 4px; display:flex; margin-left:4px; border-radius:var(--radius); }
.regular-item-row .ri-delete:hover { color:var(--danger); background:var(--danger-bg); }

/* Regular items in shopping list get a subtle repeat icon */
.shop-item.is-regular .from-recipe { font-style: italic; }
.shop-item.is-regular .item-label::before { content: '↻ '; font-size: 10px; color: var(--text-muted); }

/* ── Auto-fill ── */
:root { --success: #16a34a; }
@media (prefers-color-scheme: dark) { :root { --success: #4ade80; } }
#autofill-status { min-height: 18px; }

/* ── Autofill match indicators ── */
.ing-row.match-exact .ing-name { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.ing-row.match-contains .ing-name { border-color: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,0.15); }
.ing-match-badge { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 10px; white-space: nowrap; margin-top: 3px; display: inline-block; }
.ing-match-badge.exact { background: #dcfce7; color: #15803d; }
.ing-match-badge.contains { background: #fef3c7; color: #b45309; }
.ing-match-badge.none { background: var(--surface-0); color: var(--text-muted); }

/* ── Suggest button ── */
.ing-suggest-btn { display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:2px 8px; border-radius:10px; border:0.5px solid var(--accent-border); background:var(--accent-bg); color:var(--accent-text); font-size:11px; cursor:pointer; font-family:var(--font); white-space:nowrap; }
.ing-suggest-btn:hover { background:var(--accent); color:white; }

/* ── Household picker modal ── */
.household-list { display:flex; flex-direction:column; gap:6px; }
.household-option { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius); border:0.5px solid var(--border-strong); cursor:pointer; font-size:14px; }
.household-option:hover { background:var(--accent-bg); }
.household-option.current { background:var(--accent-bg); border-color:var(--accent-border); }
.hh-you { font-size:11px; color:var(--text-muted); margin-left:auto; }

/* ── Recipe card / detail: household ownership ── */
.card-household { display:flex; align-items:center; gap:4px; margin-top:5px; font-size:11px; color:var(--text-muted); }
.card-household i { font-size:11px; }
.household-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.household-line:has(.version-list) { align-items:flex-start; }
.household-line a { color:var(--accent-text); text-decoration:none; }
.household-line a:hover { text-decoration:underline; }
.version-list { list-style:none; margin:4px 0 0; padding:0; width:100%; display:flex; flex-direction:column; gap:3px; }

/* ── Toggle-style buttons (e.g. Hide checked) ── */
.btn.active { background:var(--accent-bg); color:var(--accent-text); border-color:var(--accent-border); }

/* ── Regular items: qty stepper ── */
.ri-qty-stepper { display:flex; align-items:center; gap:6px; }
.ri-qty-stepper .ri-qty { min-width:52px; text-align:center; }
.qty-btn { display:flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border-radius:50%; border:0.5px solid var(--border-strong); background:var(--surface-1); color:var(--text-secondary); cursor:pointer; font-size:11px; }
.qty-btn:hover { background:var(--accent-bg); color:var(--accent-text); border-color:var(--accent-border); }
.qty-btn:active { transform:scale(0.92); }

/* ── Filter / sort bar ── */
.filter-bar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:14px; border-bottom:0.5px solid var(--border); }
.filter-group { display:flex; align-items:center; gap:8px; }
.filter-group label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.filter-group select { padding:5px 8px; font-size:12px; border-radius:var(--radius); border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-primary); font-family:var(--font); }
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { padding:4px 11px; border-radius:20px; border:0.5px solid var(--border-strong); background:var(--surface-1); font-size:12px; cursor:pointer; font-family:var(--font); color:var(--text-secondary); transition:background 0.15s; }
.chip:hover { background:var(--surface-0); }
.chip.active { background:var(--accent-bg); color:var(--accent-text); border-color:var(--accent-border); font-weight:500; }

/* ── Consolidated sort/filter dropdown ── */
.filter-dropdown { position:relative; }
.filter-toggle-btn { position:relative; }
.filter-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:#fff; font-size:10px; font-weight:600; line-height:1; }
.filter-dropdown-panel { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:260px; background:var(--surface-2); border:0.5px solid var(--border-strong); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); padding:16px; flex-direction:column; gap:14px; }
.filter-dropdown-panel.open { display:flex; }
.filter-dropdown-panel .filter-group { flex-direction:column; align-items:flex-start; gap:6px; }
.filter-dropdown-panel .filter-group select { width:100%; }

/* ── Recipe card: rating / nutrition / rotation ── */
.card-stars { display:flex; gap:1px; margin-top:4px; }
.card-stars i { font-size:12px; color:var(--highlight); }
.card-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:5px; }
.card-badges span { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--text-muted); }
.card-badges i { font-size:11px; }

/* ── Detail view: rating widget ── */
.rating-widget { display:flex; gap:3px; margin:6px 0 8px; }
.rating-widget i { font-size:19px; color:var(--highlight); cursor:pointer; transition:transform 0.1s; }
.rating-widget i:hover { transform:scale(1.15); }
.rotation-line { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.rotation-line i { font-size:13px; color:var(--text-muted); }

/* ── Nutrition box ── */
.section-sub { font-size:10px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-muted); }
.nutrition-box { display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--surface-1); border-radius:12px; padding:14px 16px; }
.nutrient { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.nutrient .nv { font-size:16px; font-weight:600; color:var(--text-primary); }
.nutrient .nl { font-size:11px; color:var(--text-muted); }
.nutrition-empty { font-size:13px; color:var(--text-muted); flex:1; }
.nutrition-box .btn-xs { margin-left:auto; }
.nutrition-box #nutrition-status { font-size:11px; }

/* ── Auth-gate header (logo + tagline) ── */
.auth-header { display:flex; align-items:center; justify-content:center; padding:20px; }
.logo-horizontal { display:block; width:100%; max-width:280px; height:auto; }

/* ── Slide-out navigation drawer ── */
.nav-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:90; }
.nav-drawer { position:fixed; top:0; left:0; bottom:0; width:280px; max-width:82vw; background:var(--surface-2); border-right:0.5px solid var(--border); z-index:91; transform:translateX(-100%); transition:transform 0.2s ease; display:flex; flex-direction:column; overflow-y:auto; padding-top:env(safe-area-inset-top); }
.nav-drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:0.5px solid var(--border); }
.logo-horizontal-drawer { display:block; height:46px; width:auto; }
.drawer-close { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:16px; border-radius:var(--radius); margin-left:auto; flex-shrink:0; }
.drawer-close:hover { background:var(--surface-1); color:var(--text-primary); }
.drawer-section { padding:10px 10px 4px; }
.drawer-section-label { font-size:11px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; padding:6px 8px; }
.drawer-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 8px; border-radius:var(--radius); border:none; background:none; cursor:pointer; font-size:14px; color:var(--text-primary); text-align:left; font-family:var(--font); transition:background 0.15s; }
.drawer-item:hover { background:var(--surface-1); }
.drawer-item.active { background:var(--accent-bg); color:var(--accent-text); font-weight:500; }
.drawer-item i { font-size:16px; color:var(--text-secondary); }
.drawer-item.active i { color:var(--accent-text); }

/* .mobile-only elements (mobile "Recipes" tab, drawer Browse section) are hidden on desktop and
   shown only inside the mobile @media block below, where the desktop-only My Cookbook/Discover
   nav tabs are hidden instead — keeps the mobile bottom bar exactly as it was before this tab
   was split into two on desktop. */
.mobile-only { display:none; }

/* ══════════════════════════════════════════════════════════════════════
   Mobile layout
   - Header: nav-tabs become a fixed bottom tab bar (app-style)
   - Recipe tab: category sidebar becomes a horizontal scrolling chip row
   - Weekly planner: staging + day grid become horizontal snap-scroll rows
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header */
  .topbar { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; }
  .logo-horizontal-topbar { display: none; }
  picture.mobile-only { display: block; }

  /* My Cookbook/Discover collapse into the single mobile-only "Recipes" tab; the mobile-only
     drawer "Browse" section carries the mode choice instead — keeps this bar's button count and
     look exactly as it was before the tab split. */
  .nav-tab[data-mode] { display: none; }
  .nav-tab.mobile-only { display: flex; }
  .nav-drawer .mobile-only { display: block; }
  .filter-group.mobile-only { display: flex; }

  .mobile-search-btn.mobile-only { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--text-primary); font-size: 18px; border-radius: var(--radius); flex-shrink: 0; margin-left: auto; }
  .mobile-search-btn:hover { background: var(--surface-1); }

  /* Category chips move into the filter-dropdown-panel (below) to save space, so the standalone
     sidebar row is hidden outright — !important since showView() also sets an inline display on
     it for the desktop layout. */
  .sidebar { display: none !important; }

  /* The page-header's search bar is replaced by the topbar magnifying-glass button; tapping it
     toggles .search-open, revealing the bar (and hiding the title) in its place. */
  #recipe-page-header .search-bar { display: none; }
  #recipe-page-header.search-open .search-bar { display: flex; }
  #recipe-page-header.search-open h2 { display: none; }

  .filter-category-chips .cat-btn { width: auto; white-space: nowrap; }

  .nav-tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    width: 100%;
    background: var(--surface-2);
    border-top: 0.5px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    justify-content: space-around;
  }
  .nav-tab { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 10px; border-radius: 8px; white-space: nowrap; }
  .nav-tab i { font-size: 18px; }

  .main { flex-direction: column; padding-bottom: 62px; min-width: 0; }

  .content { padding: 14px; min-width: 0; max-width: 100%; }
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-bar, .search-bar input { width: 100%; }
  .filter-bar { gap: 10px; }

  /* Weekly planner */
  .planner-layout { flex-direction: column; height: auto; overflow: visible; gap: 10px; }
  .planner-staging { width: 100%; }
  .staging-hint { display: none; }
  .staging-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; }
  .staging-card { flex-shrink: 0; width: 130px; }
  .planner-right { overflow-y: visible; }
  .planner-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .planner-day { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }

  /* Add recipe form: stack paired fields instead of squeezing them side by side */
  .form-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-row > .form-group:nth-child(1),
  .form-row > .form-group:nth-child(2) { grid-column: 1 / -1; }

  /* Ingredient rows: stack into a compact card instead of a cramped 5-column row */
  .ing-table-header { display: none; }
  .ing-row {
    position: relative;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "qty unit"
      "loc loc";
    gap: 8px;
    padding: 10px;
    padding-right: 34px;
    background: var(--surface-1);
    border-radius: var(--radius);
  }
  .ing-name-wrap { grid-area: name; }
  .ing-qty { grid-area: qty; }
  .ing-unit { grid-area: unit; }
  .ing-loc { grid-area: loc; width: 100%; }
  .del-ing { position: absolute; top: 8px; right: 8px; }
}

@media (max-width: 480px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recipe-card { padding: 10px; }
  .planner-day { flex: 0 0 85%; }
}

/* ── Toasts (utils/errors.js) ─────────────────────────────────────────── */
#toast-container { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; max-width: min(360px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--radius); background: var(--surface-2); border: 0.5px solid var(--border-strong); color: var(--text-primary); font-size: 13px; font-family: var(--font); box-shadow: 0 4px 16px rgba(0,0,0,0.15); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.toast-success { border-color: var(--success); }