/* ─────────────────────────────────────────────────────────────────────────
   Phase 1 shared components — see ui_ux_redesign_plan.md at the repo root.

   Consumes tokens from static/tokens.css. Additive only: nothing in any
   existing template references these classes yet, so this file has zero
   effect until a template is actually migrated to use the bottom_sheet()
   macro (see _macros.html). Demoed in the Style Playground
   (admin_styles.html) so it can be checked across both themes before any
   real page adopts it.
   ───────────────────────────────────────────────────────────────────────── */

.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(20,14,10,.42); z-index: 900;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  /* z-index deliberately BELOW the green safe-area strips (app.css,
     z-index:20000) -- the strip is meant to always stay the visible
     topmost layer at the true screen edge (see its own comment). Sheets
     sitting above it (a since-reverted attempt) painted white background
     over the green strip instead of just leaving it visible. Real
     clearance for sheet content comes from padding-bottom below, not
     from out-stacking the strip. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 901;
  background: var(--bg-elevated); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow); transform: translateY(105%);
  transition: transform .28s cubic-bezier(.32,.72,.24,1);
  max-height: 82vh; overflow-y: auto;
  max-width: 560px; margin: 0 auto;
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
.sheet.open { transform: translateY(0); }

.sheet-handle {
  width: 36px; height: 4px; background: var(--line); border-radius: var(--r-pill);
  margin: var(--sp-3) auto;
}

.sheet-group { padding: var(--sp-2) var(--sp-4); }
.sheet-group + .sheet-group { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.sheet-group-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; padding: var(--sp-2) 0;
}

.sheet-item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap-min);
  width: 100%; background: none; border: none; text-align: left;
  font-size: var(--text-base); color: var(--ink); cursor: pointer;
  border-radius: var(--r-sm); padding: 0 var(--sp-2); font-family: var(--font-body);
}
.sheet-item:hover { background: var(--bg-sunken); }
.sheet-item.danger { color: var(--danger); }
.sheet-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-soft); }
.sheet-item.danger svg { color: var(--danger); }

/* "Choose up to N" pickers (e.g. bottom-nav shortcuts): a scannable
   vertical list instead of a wrapping chip cloud once there are more
   than a handful of options -- a trailing check shows selected state. */
.shortcut-pick .shortcut-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line, var(--pico-muted-border-color)); color: transparent;
}
.shortcut-pick .shortcut-check svg { width: 12px; height: 12px; color: inherit; }
.shortcut-pick.active { background: var(--bg-sunken); }
.shortcut-pick.active .shortcut-check {
  background: var(--accent, #1e8449); border-color: var(--accent, #1e8449); color: #fff;
}

.sheet-footer {
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Plain CSS classes rather than a macro on purpose: real button usage varies
   too much (onclick, type=submit, form attrs, ids) for a fixed-parameter
   macro to stay flexible. Every variant defines its own paired text-color
   token (--accent-ink, --danger-ink, ...) instead of assuming white, so
   light mode can't render invisible white-on-white text (the reported bug)
   regardless of which variant is used. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-4); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 700; font-family: var(--font-body);
  cursor: pointer; border: 1.5px solid transparent; white-space: nowrap;
  text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(.94); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg-sunken); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--bg-sunken); }
.btn-danger { background: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { filter: brightness(.94); }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--text-xs); }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Theme/style swatch picker (shared between settings.html and the quick
   theme-change bottom sheet in base.html -- keep both in sync if edited) ── */
.style-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem }
.style-swatch { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.6rem .4rem; border-radius:8px; border:2px solid var(--pico-muted-border-color); background:transparent; cursor:pointer; transition:border-color .15s; color:inherit; font-family:inherit; }
.style-swatch:hover { border-color:#aaa }
.style-swatch.active { border-color:#1e8449 }
.swatch-preview { width:100%; height:52px; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:8px 10px; box-sizing:border-box }
.swatch-bar { height:7px; border-radius:3px }
.swatch-card { height:11px; border-radius:var(--r-xs, 4px) }
.swatch-name { font-size:.78rem; font-weight:600 }
.swatch-hint { font-size:.68rem; color:var(--pico-muted-color); text-align:center; line-height:1.3 }

/* ── Badges / chips ── */
.kosher-badge {
  display: inline-flex; align-items: center; gap: .3em; font-size: var(--text-xs);
  font-weight: 700; padding: .3em .7em; border-radius: var(--r-pill); line-height: 1;
}
.kosher-badge-meat { background: var(--meat-soft); color: var(--meat); }
.kosher-badge-dairy { background: var(--dairy-soft); color: var(--dairy); }
.kosher-badge-pareve { background: var(--pareve-soft); color: var(--pareve); }
.kosher-badge-not-kosher { background: var(--not-kosher-soft); color: var(--not-kosher); }
.kosher-badge-gold { background: var(--gold-soft); color: var(--gold); }

.chip {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-4);
  border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  border: 1.5px solid var(--line); color: var(--ink-soft); background: var(--bg-elevated);
  cursor: pointer; font-family: var(--font-body);
}
.chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── Confirm sheet — a bottom_sheet() body for a single yes/no decision ── */
.confirm-sheet { padding: var(--sp-2) var(--sp-4) calc(var(--sp-5) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); text-align: center; }
.confirm-icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: var(--sp-2) auto var(--sp-3);
}
.confirm-icon.danger { background: var(--danger-soft); color: var(--danger); }
.confirm-icon svg { width: 24px; height: 24px; }
.confirm-sheet h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--sp-2); }
.confirm-sheet p { font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--sp-5); }
.confirm-actions { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── Bottom nav (mobile) — phase 1: Recipes + conditional Meal Plan/Shopping
   List slots + Alerts + You. "You" reuses the existing avatar dropdown;
   full "You sheet" rebuild is a separate follow-up. ── */
.bottom-nav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--bg-elevated, var(--pico-card-background-color, #fff));
  border-top: 1px solid var(--line, var(--pico-muted-border-color));
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
.bottom-nav .bn-item {
  /* font-size intentionally in px, not rem: this is compact nav chrome
     with icon-anchored labels, not reading content, so it shouldn't
     scale with the user's font-size preference (--pico-font-size) --
     at "large" that preference was inflating these labels enough to
     wrap/overflow the fixed-width tabs. */
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; margin: 0; padding: 0 2px; background: none; border: none; box-sizing: border-box;
  color: var(--muted, var(--pico-muted-color)); font-size: 10px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer; position: relative;
  font-family: var(--font-body, inherit); -webkit-appearance: none; appearance: none;
}
.bottom-nav .bn-item.active { color: var(--accent, #1e8449); }
.bottom-nav .bn-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; }
.bottom-nav .bn-item svg { width: 21px; height: 21px; display: block; }
.bottom-nav .bn-badge {
  position: absolute; top: -4px; right: -8px;
  background: var(--danger, #c0392b); color: #fff; font-size: 9px; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: var(--r-pill, 999px); display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.bottom-nav .bn-badge.bn-badge-notice {
  top: auto; bottom: -3px; right: -6px; left: auto;
  background: #e67e22; min-width: 12px; height: 12px; font-size: 8px; padding: 0;
}
.avatar-dropdown-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--pico-muted-color); display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
}
.avatar-dropdown-close svg { width: 14px; height: 14px; }
.avatar-dropdown-close:hover { background: var(--pico-muted-border-color); }
.mobile-sheet-handle { display: none; }
#mobile-panel-backdrop { display: none; }
.header-mobile-only { display: none; }
@media (min-width: 640px) {
  .bottom-nav { display: none; }
}
@media (max-width: 639px) {
  .mobile-sheet-handle {
    display: block; width: 36px; height: 4px; background: var(--line, var(--pico-muted-border-color));
    border-radius: var(--r-pill, 999px); margin: .6rem auto .2rem; flex-shrink: 0;
  }
  /* Dimming backdrop behind the Alerts/More bottom panels -- without
     it the panel didn't read clearly as "something popped up" against
     the page behind it. */
  #mobile-panel-backdrop {
    display: block; position: fixed; inset: 0; z-index: 900;
    background: rgba(20, 14, 10, .42); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  #mobile-panel-backdrop.open { opacity: 1; pointer-events: auto; }
  /* Bell/avatar trigger buttons in the header duplicate the bottom
     nav's Alerts/You tabs on mobile -- hide the trigger only, not
     the panel/dropdown itself (still opened from the bottom nav). */
  .header-mobile-hide { display: none !important; }
  /* Nav-shortcut icons mirrored into the desktop header (no bottom nav
     there) don't belong on mobile -- the bottom nav already shows them. */
  .header-desktop-only { display: none !important; }
  .header-mobile-only { display: inline-flex !important; }
  /* Recipe pages: collapse the header's own visible bar on mobile (the
     bottom nav covers navigation there) without display:none, which would
     also hide the notif/avatar panels nested inside it -- visibility:hidden
     is reversible per-descendant (see the visibility:visible !important
     below), unlike display:none. Desktop keeps the header untouched. */
  .recipe-page-header { visibility: hidden; height: 0; overflow: hidden; }
  /* Notification panel, avatar dropdown, and the timer panel become
     full-width bottom panels on mobile, sitting on top of (not above)
     the bottom nav -- covering it while open rather than leaving it
     visible underneath, instead of small dropdowns anchored near the
     top header (which was hard to reach and looked out of place next
     to the new bottom-sheet-style UI used everywhere else). #notif-panel
     and #timerPanel positioning is inline, so needs !important to override. */
  .avatar-dropdown,
  #notif-panel,
  #timerPanel {
    position: fixed !important;
    visibility: visible !important;
    left: 0 !important; right: 0 !important; top: auto !important;
    bottom: 0 !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    max-height: 65vh !important; overflow-y: auto !important;
    border-radius: 14px 14px 0 0 !important;
    border: none !important; border-top: 1px solid var(--pico-muted-border-color) !important;
    padding-bottom: calc(1rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .15) !important;
  }
}
@media (max-width: 639px) {
  body { padding-bottom: calc(1rem + 56px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
}

/* Instructions: ingredient mentions are tappable/hoverable to show the
   amount needed, so the reader doesn't have to scroll back up to the
   ingredients list. See ing-tooltip wiring in recipe.html. */
.ing-ref {
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
.ing-ref:hover, .ing-ref:focus, .ing-ref.ing-active {
  background: var(--accent-soft);
  outline: none;
  border-radius: 3px;
}
#ing-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: min(260px, 80vw);
  padding: .45rem .65rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg-elevated);
  font-size: var(--text-xs);
  line-height: 1.3;
  box-shadow: var(--shadow);
  pointer-events: none;
}