/*
 * Z-Index Scale
 * ==============
 * -1    Body texture (paper grain)
 *  1    Swipe content layer (shopping list)
 *  2    Feedback overlays (grab card, scan sweep)
 *  5    Panel resize handle
 * 10    Sticky footers (approve bar)
 * 40    Bottom navigation bar
 * 50    Header / top nav (sticky)
 * 210   Timer overlay
 * 215   Ask Anything bottom sheet
 * 230   Search overlay
 * 250   Standard tray/modal
 * 280   Barcode product cards
 * 300   Confirm dialog
 * 999   Auth overlay (login/onboarding)
 */

/* ============================================
   FORAGE — Custom CSS (Tailwind CDN handles base)
   ============================================ */

/* ============================================
   THEME TOKENS — Dark mode (default)
   ============================================ */
:root,
[data-theme="dark"] {
  --bg: #141414;
  --bg-card: #1c1c1c;
  --bg-nav: #0e0e0e;
  --border: #2a2a2a;
  --border-subtle: #222222;
  --text-primary: #e8e8e0;
  --text-secondary: #888888;
  --text-tertiary: #666666;
  --brand: #6DBE5A;
  --brand-dark: #4A9040;
  --brand-on-dark: #6DBE5A;
  --surface-lookout: #1a2a18;
  --text-lookout: #6DBE5A;
  --surface-board-note: rgba(139, 92, 246, 0.12);
  --surface-expiry: rgba(217, 69, 61, 0.12);
  --text-expiry: #E85D4A;
  --text-warning: #E6940A;
  --brand-rgb: 109, 190, 90;
  --leaf-vein: #141414;
  --toast-bg: rgba(30, 41, 59, 0.95);
  --backdrop: rgba(0, 0, 0, 0.5);
  --tab-inactive: #94a3b8;
  --checkbox-stroke: #060606;

  /* Shopping list source colours (unchanged between modes) */
  --sl-meal-plan: #6DBE5A;
  --sl-running-low: #EF9F27;
  --sl-patterns: #AFA9EC;
  --sl-suggestions: #F0997B;
  --sl-seasonal: #97C459;
  --sl-substitution: #85B7EB;
  --sl-manual: #94a3b8;
}

/* ============================================
   THEME TOKENS — Light mode (explicit + auto via system preference)
   ============================================ */
[data-theme="light"] {
  --bg: #F8F4ED;
  --bg-card: #F5F1EA;
  --bg-nav: #F8F4ED;
  --border: #E0D9CC;
  --border-subtle: #EAE4D8;
  --text-primary: #2c2c2a;
  --text-secondary: #5C5850;
  --text-tertiary: #7A756C;
  --brand: #4A9040;
  --brand-dark: #4A9040;
  --brand-on-dark: #6DBE5A;
  --surface-lookout: #EDF6EB;
  --text-lookout: #3A7830;
  --surface-board-note: rgba(139, 92, 246, 0.08);
  --surface-expiry: rgba(217, 69, 61, 0.08);
  --text-expiry: #C93D30;
  --text-warning: #C07A08;
  --brand-rgb: 74, 144, 64;
  --leaf-vein: #F8F4ED;
  --toast-bg: rgba(248, 244, 237, 0.95);
  --backdrop: rgba(0, 0, 0, 0.3);
  --tab-inactive: #7A756C;
  --checkbox-stroke: #FFFFFF;
}
/* Auto mode — inherit from [data-theme="light"] when system prefers light and no theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F8F4ED; --bg-card: #F5F1EA; --bg-nav: #F8F4ED;
    --border: #E0D9CC; --border-subtle: #EAE4D8;
    --text-primary: #2c2c2a; --text-secondary: #5C5850; --text-tertiary: #7A756C;
    --brand: #4A9040; --brand-dark: #4A9040; --brand-on-dark: #6DBE5A;
    --surface-lookout: #EDF6EB; --text-lookout: #3A7830;
    --surface-board-note: rgba(139, 92, 246, 0.08);
    --surface-expiry: rgba(217, 69, 61, 0.08);
    --text-expiry: #C93D30; --text-warning: #C07A08;
    --brand-rgb: 74, 144, 64; --leaf-vein: #F8F4ED;
    --toast-bg: rgba(248, 244, 237, 0.95);
    --backdrop: rgba(0, 0, 0, 0.3);
    --tab-inactive: #7A756C; --checkbox-stroke: #FFFFFF;
  }
}

/* Keyboard-only focus ring — visible on Tab, hidden on click */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
/* Override inline outline-none on form controls for keyboard accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
}

/* Material Symbols config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Force circular shapes — prevent flex stretch from distorting rounded-full elements */
.rounded-full[class*="size-"],
.rounded-full[class*="w-"][class*="h-"] {
  aspect-ratio: 1 / 1;
}

/* Active tab icon — identical to inactive. The dot is the sole indicator. */
.tab.active .tab-icon {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fill-1 {
  font-variation-settings: 'FILL' 1;
}

/* Safe area bottom padding */
.pb-safe {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
}

.h-safe-bottom {
  height: env(safe-area-inset-bottom, 0);
}

/* Hide scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ============================================
   TAB BAR
   ============================================ */

.tab {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Active state = green dot + tinted text for better contrast */
.tab.active {
  color: var(--brand) !important;
  background: transparent !important;
  border: none !important;
  position: relative;
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--brand);
}


.tab:hover:not(.active) {
  color: var(--tab-inactive);
}

/* UX-004: On touch/mobile devices, always show hover-revealed actions (delete buttons etc) */
@media (hover: none), (max-width: 767px) {
  .group .opacity-0.group-hover\:opacity-100,
  .group > .opacity-0.group-hover\:opacity-100 {
    opacity: 0.7 !important;
  }
}

/* ============================================
   THE BOARD — CARD SIZING
   ============================================ */

/* Scroll mode (default): cards sized for peek */
.board-scroll .board-card {
  width: 82%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Grid mode (>= 4 cards): cards fill grid cells */
.board-grid .board-card {
  width: auto;
}

/* Desktop: fixed-width cards in flex-wrap */
@media (min-width: 1280px) {
  .board-scroll .board-card,
  .board-grid .board-card {
    width: 220px;
    flex-shrink: 0;
  }
}

/* ============================================
   ASK ANYTHING BOTTOM SHEET
   ============================================ */

.ask-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 215;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ask-sheet-overlay.open {
  pointer-events: auto;
  opacity: 1;
}

.ask-sheet {
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ask-sheet-overlay.open .ask-sheet {
  transform: translateY(0);
}

/* Ask sheet — animated placeholder overlay */
.ask-placeholder-overlay {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: var(--tab-inactive);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}
.ask-placeholder-overlay.fade-out {
  opacity: 0;
}

/* Ask sheet — chips row */
.ask-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px 4px;
  flex-wrap: nowrap;
}
.ask-chips-row::-webkit-scrollbar { display: none; }
.ask-chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================
   SPEED DIAL FAB
   ============================================ */

.speed-dial-option {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@keyframes fab-jolt {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(2px); }
  60%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

#fab-center.jolting {
  animation: fab-jolt 0.25s ease-out forwards;
}

/* Plan sub-tab active state — dot indicator, not filled pill */
.plan-sub-tab.active-dot {
  color: var(--brand);
  font-weight: 600;
  background: transparent !important;
  position: relative;
}
.plan-sub-tab.active-dot::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--brand);
}

/* ============================================
   THE BOARD — COLLAPSIBLE GROUPS
   ============================================ */

.board-group-content {
  overflow: hidden;
  transition: height 0.25s ease;
}

/* ============================================
   FOOD IMAGES — crop toward upper-centre
   ============================================ */
img.object-cover {
  object-position: center 30%;
}

/* ============================================
   COLLAPSIBLE SIDEBAR
   ============================================ */
#desktop-sidebar.collapsed {
  width: 64px !important;
  overflow: hidden;
}
#desktop-sidebar.collapsed .sidebar-label {
  display: none !important;
}
#desktop-sidebar.collapsed #sidebar-header {
  padding: 12px 8px 4px;
}
#desktop-sidebar.collapsed #sidebar-header > div {
  justify-content: center;
}
#desktop-sidebar.collapsed .sidebar-expand-btn {
  display: flex !important;
  justify-content: center;
}
#desktop-sidebar.collapsed button,
#desktop-sidebar.collapsed .sidebar-tab {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
#desktop-sidebar.collapsed nav,
#desktop-sidebar.collapsed nav + div {
  padding-left: 8px;
  padding-right: 8px;
}

/* ============================================
   RESIZABLE PANEL HANDLES
   ============================================ */
.panel-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  transition: background 0.15s;
}
.panel-resize-handle:hover,
.panel-resize-handle.dragging {
  background: rgba(var(--brand-rgb), 0.15);
}
.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 32px;
  border-radius: 2px;
  background: rgba(var(--brand-rgb), 0.25);
  transition: height 0.15s, background 0.15s;
}
.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  height: 48px;
  background: rgba(var(--brand-rgb), 0.5);
}

/* ============================================
   QUICK GRABS — COLLAPSE/EXPAND
   ============================================ */

.quick-grabs-list {
  overflow: hidden;
  height: 0;
  transition: height 0.25s ease;
}

/* ============================================
   CHAT OVERLAY
   ============================================ */


/* ============================================
   TIMER OVERLAY
   ============================================ */

.timer-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timer-overlay.open {
  pointer-events: auto;
  opacity: 1;
}

.timer-panel {
  height: 100vh;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timer-overlay.open .timer-panel {
  transform: translateY(0);
}

/* Timer card pulse for alarming timers */
@keyframes timer-alarm {
  0%, 100% { border-color: rgba(239, 68, 68, 0.5); }
  50% { border-color: rgba(239, 68, 68, 1); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
}

.timer-alarming {
  animation: timer-alarm 0.8s ease-in-out infinite;
}

/* Timer ring animation */
@keyframes timer-ring-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.timer-badge-pulse {
  animation: timer-ring-pulse 1.5s ease-in-out infinite;
}


/* ============================================
   CUSTOM CHECKBOX (Grocery)
   ============================================ */

.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  border: 2px solid rgba(var(--brand-rgb), 0.3);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms;
  position: relative;
}

.custom-checkbox:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.custom-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--checkbox-stroke);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.custom-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.3);
}

.checked-item {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast {
  background: var(--toast-bg);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-left: 3px solid var(--brand);
  animation: toast-in 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast.info {
  border-left-color: #3b82f6;
}

.toast-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 150ms;
  flex-shrink: 0;
}
.toast-close-btn:hover {
  opacity: 1;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton {
  border-radius: 0.5rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

/* ============================================
   ACTION RESULT CARDS (Chat)
   ============================================ */

.action-card {
  border: 1px solid rgba(var(--brand-rgb), 0.2);
  border-radius: 0.75rem;
  overflow: hidden;
}

.action-card-header {
  background: rgba(var(--brand-rgb), 0.2);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.2);
}

/* ============================================
   SWIPE-TO-DELETE (Kitchen)
   ============================================ */

.swipe-container {
  position: relative;
  overflow: hidden;
}

/* ============================================
   RESPONSIVE — Tablet + Desktop layouts
   ============================================ */

/* --- Tablet: 768px – 1279px --- */
@media (min-width: 768px) {
  /* Show tablet top nav in header */
  .tablet-nav { display: flex !important; }
  .tablet-chat-btn { display: flex !important; }

  /* Hide mobile bottom nav + FAB */
  nav.fixed.bottom-0 { display: none !important; }

  /* Content no longer needs bottom padding for tab bar */
  #content { padding-bottom: 1rem !important; }

  /* Wider content area */
  #content {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Recipe grid: 3 columns */
  .recipe-grid-responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Meal plan: wider layout */
  .meal-plan-container { max-width: 100% !important; }

  /* Timer overlay: side panel on tablet */
  .timer-overlay .timer-panel {
    height: 100vh;
    width: min(420px, 60vw);
    margin-left: auto;
    border-radius: 0;
    transform: translateX(100%);
  }
  .timer-overlay.open .timer-panel {
    transform: translateX(0);
  }
  .timer-overlay > div {
    flex-direction: row;
    justify-content: flex-end;
  }
  .timer-panel > .flex.h-6 { display: none; }

  /* Tab top navigation active state */
  .tab-top.active {
    color: var(--brand);
    background: rgba(var(--brand-rgb), 0.1);
  }
  .tab-top.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  /* Grocery items: 2-column layout */
  .grocery-items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* Kitchen input buttons: inline row */
  .kitchen-input-row {
    display: flex;
    gap: 0.75rem;
  }
  .kitchen-input-row > button {
    flex: 1;
    flex-direction: row !important;
    gap: 0.5rem;
  }

  /* Toast: position at top right on tablet+ */
  #toast-container {
    bottom: auto !important;
    top: 5rem;
    left: auto !important;
    right: 1.5rem;
    transform: none !important;
  }
}

/* --- Desktop: ≥1280px --- */
@media (min-width: 1280px) {
  /* Show desktop sidebar, hide tablet top nav */
  .desktop-sidebar { display: flex !important; }
  .tablet-nav { display: none !important; }

  /* Sidebar active state */
  .sidebar-tab.active {
    color: var(--brand);
    background: rgba(var(--brand-rgb), 0.1);
    border-left: 3px solid var(--brand);
  }
  .sidebar-tab.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  /* Content: full width within sidebar layout, no padding for split panels */
  #content {
    max-width: 100%;
    padding: 0;
  }

  /* Recipe grid: 4 columns on desktop */
  .recipe-grid-responsive {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Dashboard grid layout */
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .dashboard-grid .dashboard-full {
    grid-column: span 2;
  }

  /* Meal plan: weekly grid */
  .meal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* Kitchen: split panel */
  .kitchen-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  /* Desktop scrollbar styling */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), 0.1);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-rgb), 0.2);
  }

  /* Peer checkbox toggle (auto-restock) */
  .peer:checked ~ div::after {
    transform: translateX(100%);
  }

  /* Header hidden on desktop (sidebar has logo + nav) */
  #app-header { display: none !important; }

  /* App body fills full viewport on desktop */
  body { height: 100vh; overflow: hidden; }
  #app-body { height: 100vh; min-height: 100vh; }
  #desktop-sidebar { height: 100vh; min-height: 100vh; }
}

/* Light mode: add top border for nav definition */
[data-theme="light"] nav.fixed.bottom-0 {
  border-top: 1px solid var(--border);
}

/*
 * Light Mode Tailwind Slate Overrides
 * Tailwind CDN generates cold blue-grey slates.
 * Forage light mode uses warm cream tones.
 * These !important overrides remap slate utilities.
 * Long-term fix: migrate to Tailwind v4 @theme system.
 */

/* Text: darken light greys so they're readable on cream */
[data-theme="light"] .text-slate-100 { color: #2c2c2a !important; }
[data-theme="light"] .text-slate-200 { color: #3d3d3a !important; }
[data-theme="light"] .text-slate-300 { color: #4a4a48 !important; }
[data-theme="light"] .text-slate-400 { color: #6a665e !important; }
[data-theme="light"] .text-slate-500 { color: #5c5850 !important; }
[data-theme="light"] .text-slate-600 { color: #4a4640 !important; }
[data-theme="light"] .text-slate-900 { color: #2c2c2a !important; }

/* Hover text: ensure hover states stay readable */
[data-theme="light"] .hover\:text-slate-200:hover { color: #2c2c2a !important; }
[data-theme="light"] .hover\:text-slate-300:hover { color: #3d3d3a !important; }

/* White backgrounds: blend with cream instead of stark white */
[data-theme="light"] .bg-white { background-color: var(--bg-card) !important; }

/* Backgrounds: flip dark slates to light equivalents */
[data-theme="light"] .bg-slate-700 { background-color: #E0D9CC !important; }
[data-theme="light"] .bg-slate-700\/50 { background-color: rgba(224, 217, 204, 0.5) !important; }
[data-theme="light"] .bg-slate-800 { background-color: #EAE4D8 !important; }
[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(234, 228, 216, 0.5) !important; }
[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(234, 228, 216, 0.8) !important; }
[data-theme="light"] .bg-slate-100 { background-color: #F0ECE4 !important; }
[data-theme="light"] .bg-slate-50 { background-color: #F5F1EA !important; }

/* Borders: warm up cool greys and lighten dark borders for cream bg */
[data-theme="light"] .border-slate-100 { border-color: #EAE4D8 !important; }
[data-theme="light"] .border-slate-200 { border-color: #E0D9CC !important; }
[data-theme="light"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #EAE4D8 !important; }
[data-theme="light"] .border-slate-700 { border-color: #D6CFC2 !important; }
[data-theme="light"] .border-slate-800 { border-color: #E0D9CC !important; }
[data-theme="light"] .border-slate-600 { border-color: #D6CFC2 !important; }
[data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.08) !important; }
[data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.1) !important; }
[data-theme="light"] .border-white\/30 { border-color: rgba(0, 0, 0, 0.15) !important; }

/* Glass effects: invert from white-on-dark to dark-on-light */
[data-theme="light"] .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05) !important; }
[data-theme="light"] .bg-white\/20 { background-color: rgba(0, 0, 0, 0.08) !important; }
/* Preserve white glass inside dark overlays (camera, barcode, image heroes) */
[data-theme="light"] .bg-black .bg-white\/10,
[data-theme="light"] [class*="bg-gradient"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="light"] .bg-black .bg-white\/20,
[data-theme="light"] [class*="bg-gradient"] .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }

/* Same overrides for auto mode */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .text-slate-100 { color: #2c2c2a !important; }
  :root:not([data-theme]) .text-slate-200 { color: #3d3d3a !important; }
  :root:not([data-theme]) .text-slate-300 { color: #4a4a48 !important; }
  :root:not([data-theme]) .text-slate-400 { color: #6a665e !important; }
  :root:not([data-theme]) .text-slate-500 { color: #5c5850 !important; }
  :root:not([data-theme]) .text-slate-600 { color: #4a4640 !important; }
  :root:not([data-theme]) .text-slate-900 { color: #2c2c2a !important; }
  :root:not([data-theme]) .bg-white { background-color: var(--bg-card) !important; }
  :root:not([data-theme]) .hover\:text-slate-200:hover { color: #2c2c2a !important; }
  :root:not([data-theme]) .hover\:text-slate-300:hover { color: #3d3d3a !important; }
  :root:not([data-theme]) .bg-slate-700 { background-color: #E0D9CC !important; }
  :root:not([data-theme]) .bg-slate-700\/50 { background-color: rgba(224, 217, 204, 0.5) !important; }
  :root:not([data-theme]) .bg-slate-800 { background-color: #EAE4D8 !important; }
  :root:not([data-theme]) .bg-slate-800\/50 { background-color: rgba(234, 228, 216, 0.5) !important; }
  :root:not([data-theme]) .bg-slate-800\/80 { background-color: rgba(234, 228, 216, 0.8) !important; }
  :root:not([data-theme]) .bg-slate-100 { background-color: #F0ECE4 !important; }
  :root:not([data-theme]) .bg-slate-50 { background-color: #F5F1EA !important; }
  :root:not([data-theme]) .border-slate-100 { border-color: #EAE4D8 !important; }
  :root:not([data-theme]) .border-slate-200 { border-color: #E0D9CC !important; }
  :root:not([data-theme]) .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #EAE4D8 !important; }
  :root:not([data-theme]) .border-slate-700 { border-color: #D6CFC2 !important; }
  :root:not([data-theme]) .border-slate-800 { border-color: #E0D9CC !important; }
  :root:not([data-theme]) .border-slate-600 { border-color: #D6CFC2 !important; }
  :root:not([data-theme]) .border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.08) !important; }
  :root:not([data-theme]) .border-white\/20 { border-color: rgba(0, 0, 0, 0.1) !important; }
  :root:not([data-theme]) .border-white\/30 { border-color: rgba(0, 0, 0, 0.15) !important; }
  :root:not([data-theme]) .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05) !important; }
  :root:not([data-theme]) .bg-white\/20 { background-color: rgba(0, 0, 0, 0.08) !important; }
  :root:not([data-theme]) .bg-black .bg-white\/10,
  :root:not([data-theme]) [class*="bg-gradient"] .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
  :root:not([data-theme]) .bg-black .bg-white\/20,
  :root:not([data-theme]) [class*="bg-gradient"] .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
}

/* ============================================
   TRANSITIONS & MISC
   ============================================ */

/* Tabular figures for countdown timers — fixed-width digits prevent jitter */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Inline timer pill — done/alarm flash */
@keyframes timer-pill-flash {
  0%, 100% { background-color: rgba(239, 68, 68, 0.2); }
  50% { background-color: rgba(239, 68, 68, 0.45); }
}
.inline-timer-done {
  animation: timer-pill-flash 1s ease-in-out infinite;
  color: #ef4444;
}

/* Prevent FOUC on dark bg */
body {
  font-family: 'Work Sans', sans-serif;
}

/* Paper texture overlay — light mode only.
   Uses negative z-index so it sits behind all content without
   needing position:relative on siblings (which breaks fixed nav). */
[data-theme="light"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }
}

/* Star rating */
.star-filled {
  font-variation-settings: 'FILL' 1;
  color: var(--brand);
}

/* Quick-grab card */
.grab-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  overflow: hidden;
}
.grab-card-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-card);
  border-radius: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.grab-card-feedback.show { opacity: 1; }

/* Collapsible details animation */
details summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

details summary::-webkit-details-marker {
  display: none;
}


/* Tag chips for allergies/preferences */
.tag-critical {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.tag-preference {
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), 0.2);
}

/* ============================================
   SHOPPING LIST — SECTION COLOURS
   ============================================ */

/* Section header badges */
.sl-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sl-section-badge.meal-plan { background: rgba(var(--brand-rgb),0.15); color: var(--sl-meal-plan); }
.sl-section-badge.running-low { background: rgba(239,159,39,0.15); color: var(--sl-running-low); }
.sl-section-badge.patterns { background: rgba(175,169,236,0.15); color: var(--sl-patterns); }
.sl-section-badge.suggestions { background: rgba(240,153,123,0.15); color: var(--sl-suggestions); }
.sl-section-badge.seasonal { background: rgba(151,196,89,0.15); color: var(--sl-seasonal); }
.sl-section-badge.manual { background: rgba(148,163,184,0.15); color: var(--sl-manual); }

/* ============================================
   SHOPPING LIST — ITEM ROWS
   ============================================ */

.sl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(var(--brand-rgb),0.02);
  border: 1px solid rgba(var(--brand-rgb),0.05);
  transition: all 200ms ease;
}
.sl-item:hover {
  background: rgba(var(--brand-rgb),0.05);
  border-color: rgba(var(--brand-rgb),0.1);
}

/* Dismiss animation */
.sl-item.dismissing {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0;
  overflow: hidden;
  transition: all 250ms ease;
}

/* Reason text colour per source */
.sl-reason.meal-plan { color: var(--sl-meal-plan); }
.sl-reason.running-low { color: var(--sl-running-low); }
.sl-reason.patterns { color: var(--sl-patterns); }
.sl-reason.suggestions { color: var(--sl-suggestions); }
.sl-reason.seasonal { color: var(--sl-seasonal); }
.sl-reason.manual { color: var(--sl-manual); }

/* ============================================
   SHOPPING LIST — DEAL TAGS
   ============================================ */

.sl-deal-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.sl-deal-tag.standard {
  background: rgba(var(--brand-rgb),0.12);
  color: var(--brand);
}
.sl-deal-tag.hot {
  background: rgba(239,159,39,0.15);
  color: #EF9F27;
}
.sl-deal-tag.hot::before {
  content: '🔥';
  font-size: 9px;
}

/* ============================================
   SHOPPING LIST — ENRICHED ITEM ROW
   ============================================ */

.sl-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--brand-rgb),0.06);
}
.sl-item-row:last-child {
  border-bottom: none;
}

/* ============================================
   SHOPPING LIST — SWIPE GESTURES
   ============================================ */

.sl-swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2px;
}

.sl-swipe-action-left,
.sl-swipe-action-right {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.sl-swipe-action-left {
  right: 0;
  background: var(--brand);
  color: #fff;
  justify-content: flex-end;
}

.sl-swipe-action-right {
  left: 0;
  background: #E24B4A;
  color: #fff;
  justify-content: flex-start;
}

.sl-swipe-content {
  position: relative;
  z-index: 1;
  background: var(--bg);
  touch-action: pan-y;
  user-select: none;
}

.sl-item-left {
  flex: 1;
  min-width: 0;
}
.sl-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
.sl-item-reason {
  font-size: 10px;
  margin-top: 2px;
  line-height: 1.3;
}

.sl-item-right {
  flex-shrink: 0;
  text-align: right;
  min-width: 100px;
}
.sl-item-prices {
  display: flex;
  align-items: baseline;
  gap: 3px;
  justify-content: flex-end;
}
.sl-price-lo {
  font-size: 10px;
  color: rgba(var(--brand-rgb),0.4);
}
.sl-price-main {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.sl-price-hi {
  font-size: 10px;
  color: rgba(148,163,184,0.4);
}

.sl-item-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}
.sl-item-qty {
  font-size: 10px;
  color: var(--text-tertiary);
}
.sl-item-retailer {
  font-size: 9px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================
   SHOPPING LIST — BUDGET CARD DESCRIPTIONS
   ============================================ */

.sl-budget-desc {
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================
   SHOPPING LIST — PRICE BAR
   ============================================ */

.sl-price-bar {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: rgba(148,163,184,0.15);
  position: relative;
  overflow: hidden;
}
.sl-price-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 300ms ease;
}
.sl-price-bar-fill.good { background: var(--sl-meal-plan); }
.sl-price-bar-fill.fair { background: var(--sl-running-low); }
.sl-price-bar-fill.high { background: #ef4444; }

/* ============================================
   SHOPPING LIST — BUDGET CARDS
   ============================================ */

.sl-budget-card {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(var(--brand-rgb),0.03);
  border: 1px solid rgba(var(--brand-rgb),0.08);
  text-align: center;
}
.sl-budget-card .sl-budget-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.sl-budget-card .sl-budget-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.sl-budget-card.best .sl-budget-value { color: var(--sl-meal-plan); }
.sl-budget-card.likely .sl-budget-value { color: var(--text-primary); }
.sl-budget-card.high .sl-budget-value { color: var(--sl-running-low); }

/* ============================================
   SHOPPING LIST — MEAL CARDS
   ============================================ */

.sl-meal-card {
  border-radius: 16px;
  border: 1px solid rgba(var(--brand-rgb),0.15);
  background: rgba(var(--brand-rgb),0.03);
  overflow: hidden;
}
.sl-meal-card-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--brand-rgb),0.08);
}

/* ============================================
   SHOPPING LIST — APPROVE FOOTER
   ============================================ */

.sl-approve-footer {
  position: sticky;
  bottom: 0;
  padding: 16px;
  background: linear-gradient(to top, var(--bg) 80%, transparent);
  z-index: 10;
}

/* ============================================
   SHOPPING MODE — AISLE SECTIONS
   ============================================ */

.sl-shopping-mode .sl-aisle-section {
  margin-bottom: 24px;
}
.sl-shopping-mode .sl-aisle-section.completed {
  opacity: 0.35;
}

/* Shopping mode — circular checkbox (large touch target, visible check) */
.sl-shopping-check {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--brand-rgb),0.25);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms ease;
  position: relative;
  /* Invisible tap padding for 44px touch target */
  padding: 8px;
  box-sizing: content-box;
  margin: -8px;
}
.sl-shopping-check:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.sl-shopping-check:checked::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 9px;
  width: 7px;
  height: 12px;
  border: 2px solid var(--checkbox-stroke);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.sl-shopping-check:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.2);
}

/* Review mode — small square check (item kept/dismissed indicator) */
.sl-review-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 2px solid rgba(var(--brand-rgb),0.2);
  background: rgba(var(--brand-rgb),0.05);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms ease;
  position: relative;
}
.sl-review-check:checked {
  background: rgba(var(--brand-rgb),0.15);
  border-color: rgba(var(--brand-rgb),0.4);
}
.sl-review-check:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--brand);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Shopping progress bar */
.sl-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--brand-rgb),0.1);
  overflow: hidden;
}
.sl-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width 300ms ease;
}

/* ============================================
   SHOPPING LIST — GENERATION BANNER
   ============================================ */

.sl-banner {
  padding: 16px;
  border-radius: 16px;
  background: var(--surface-lookout);
  border: 1px solid rgba(var(--brand-rgb),0.15);
}

/* ============================================
   SHOPPING LIST — RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
  .sl-budget-cards {
    display: flex;
    gap: 12px;
  }
}

@media (min-width: 1280px) {
  .sl-desktop-split {
    display: flex;
    height: 100%;
    overflow: hidden;
  }
  .sl-desktop-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
  }
  .sl-desktop-sidebar {
    flex-shrink: 0;
    overflow-y: auto;
    padding: 24px;
  }
}

/* ============================================
   BARCODE SCANNER
   ============================================ */

/* Scanner overlay */
#barcode-scanner-overlay {
  backdrop-filter: none; /* keep it crisp for camera feed */
}

/* html5-qrcode overrides — library injects its own styles */
#barcode-reader {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 400px;
  margin: 0 auto;
}

#barcode-reader video {
  border-radius: 1rem !important;
  object-fit: cover !important;
}

/* Hide the library's default UI chrome */
#barcode-reader__scan_region > img,
#barcode-reader__dashboard,
#barcode-reader__header_message {
  display: none !important;
}

/* Scan region border animation */
.barcode-scan-region {
  position: relative;
  width: 280px;
  height: 160px;
  margin: 0 auto;
  pointer-events: none;
}

.barcode-scan-region::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--brand);
  border-radius: 1rem;
  opacity: 0.8;
  animation: scan-pulse 2s ease-in-out infinite;
}

.barcode-scan-region::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  top: 50%;
  animation: scan-line 2s ease-in-out infinite;
}

@keyframes scan-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes scan-line {
  0% { top: 20%; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 80%; opacity: 0; }
}

/* Tray close button — large touch target */
.tray-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: rgba(109, 190, 90, 0.08);
  color: var(--text-secondary, #888);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}
.tray-close-btn:hover,
.tray-close-btn:active {
  background: rgba(109, 190, 90, 0.18);
  color: var(--brand, #6DBE5A);
}
.tray-close-btn .material-symbols-outlined {
  font-size: 28px;
}

/* Kitchen swipe — snap to pairs */
#kitchen-swipe {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#kitchen-swipe::-webkit-scrollbar { display: none; }
#kitchen-swipe > div > div:nth-child(odd) {
  scroll-snap-align: start;
}

/* Tray / bottom-sheet slide animations */
.tray-slide-up {
  animation: tray-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  overflow: clip !important;
}
.tray-slide-down {
  animation: tray-out 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  overflow: clip !important;
}
@keyframes tray-in {
  from { transform: translateY(100%); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes tray-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

/* Tray sizing — full width mobile, 85% tablet, 800px desktop */
.tray-slide-up,
.tray-slide-down {
  max-width: 100% !important;
  height: calc(100dvh - 56px) !important;
  max-height: calc(100dvh - 56px) !important;
  margin-top: auto !important;
}
@media (min-width: 768px) {
  .tray-slide-up,
  .tray-slide-down {
    max-width: 85% !important;
    border-radius: 1rem !important;
  }
}
@media (min-width: 1280px) {
  .tray-slide-up,
  .tray-slide-down {
    max-width: 800px !important;
  }
}

/* Backdrop fade for tray overlays */
[class*="bg-black/60"] {
  animation: backdrop-in 0.3s ease-out forwards;
}
[class*="bg-black/60"].closing {
  animation: backdrop-out 0.25s ease-in forwards;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Backdrop fade */
.tray-backdrop { animation: fade-in 0.2s ease-out; }
.tray-backdrop.closing { animation: fade-out 0.25s ease-in forwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Product card slide-up (barcode) */
.barcode-product-card {
  animation: tray-in 0.3s ease-out;
}

@keyframes slide-up-card {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Scan history strip */
.scan-history-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scan-history-strip::-webkit-scrollbar {
  display: none;
}

.scan-history-item {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 0.75rem;
  background: var(--bg-card);
  border: 1px solid rgba(var(--brand-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}

.scan-history-item:hover {
  border-color: rgba(var(--brand-rgb), 0.4);
}

.scan-history-item.added {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.2);
}

.scan-history-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nutrition grid inside product card */
.nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.nutrition-cell {
  padding: 0.75rem;
  border-radius: 0.75rem;
  text-align: center;
}

.nutrition-cell .value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.nutrition-cell .label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  opacity: 0.6;
}

/* Torch toggle button */
.torch-btn {
  transition: all 0.2s;
}

.torch-btn.active {
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.2);
}

/* ============================================
   SONNET SCAN SWEEP ANIMATION
   ============================================ */

.scan-sweep {
  background: linear-gradient(to top, rgba(109, 190, 90, 0.25) 0%, transparent 50%);
  border-radius: inherit;
}

@keyframes scan-sweep-up {
  0% { transform: translateY(100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* ============================================
   FORAGE SLIDER — custom range input
   ============================================ */
.forage-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--bar-colour, var(--brand)) var(--pct, 50%), var(--border, #2a2a2a) var(--pct, 50%));
  outline: none;
  cursor: pointer;
  touch-action: none;
}
.forage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--bg-card, #1c1c1c);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: grab;
  transition: transform 0.15s;
}
.forage-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.2);
}
.forage-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--bg-card, #1c1c1c);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: grab;
}
.forage-slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border, #2a2a2a);
}
.forage-slider::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--bar-colour, var(--brand));
}

/* Restock threshold overlay slider — amber knob, transparent track */
.forage-slider-restock {
  background: transparent !important;
  pointer-events: none;
}
.forage-slider-restock::-webkit-slider-thumb {
  pointer-events: auto;
  background: #f59e0b;
  border-color: var(--bg-card, #1c1c1c);
  width: 16px;
  height: 16px;
  z-index: 2;
}
.forage-slider-restock::-moz-range-thumb {
  pointer-events: auto;
  background: #f59e0b;
  border-color: var(--bg-card, #1c1c1c);
  width: 16px;
  height: 16px;
}
.forage-slider-restock::-moz-range-track {
  background: transparent;
}
.forage-slider-restock::-moz-range-progress {
  background: transparent;
}

/* ============================================
   ONBOARDING & AUTH
   ============================================ */

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-fade-up {
  animation: fadeUp 0.5s ease both;
}

.anim-scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.anim-fade-in {
  animation: fadeIn 0.3s ease both;
}

.anim-slide-down {
  animation: slideDown 0.3s ease both;
}

/* Stagger delays */
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }
.delay-4 { animation-delay: 0.48s; }
.delay-5 { animation-delay: 0.60s; }
.delay-6 { animation-delay: 0.72s; }
.delay-7 { animation-delay: 0.84s; }
.delay-8 { animation-delay: 0.96s; }

/* Onboarding screens */
#auth-overlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#auth-content {
  padding: 1rem;
}

@media (min-width: 768px) {
  #auth-content {
    padding: 2rem;
  }
}

#auth-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.onboarding-screen {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .onboarding-screen {
    max-width: 520px;
    padding: 3rem 2rem;
  }

  .onboarding-screen h2 {
    font-size: 26px;
  }

  .onboarding-screen .subtitle {
    font-size: 15px;
  }

  .onb-btn-primary {
    padding: 18px;
    font-size: 17px;
    border-radius: 18px;
  }

  .avatar-grid {
    gap: 14px;
  }

  .avatar-cell {
    padding: 14px 10px;
  }

  .avatar-cell .avatar-emoji {
    font-size: 36px;
  }

  .member-card {
    padding: 16px 20px;
  }

  .chat-bubble {
    font-size: 15px;
    padding: 14px 18px;
  }
}

@media (min-width: 1280px) {
  .onboarding-screen {
    max-width: 560px;
    padding: 3rem 2.5rem;
  }

  .onboarding-screen h2 {
    font-size: 28px;
  }
}

.onboarding-screen h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.onboarding-screen .subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Progress dots */
.progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2rem;
}

.progress-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s ease;
}

.progress-dots .dot.active {
  background: var(--brand);
  width: 24px;
  border-radius: 4px;
}

.progress-dots .dot.done {
  background: var(--brand);
}

/* Onboarding input fields */
.onb-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #f0f0f0;
  -webkit-text-fill-color: #f0f0f0;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease;
}

[data-theme="light"] .onb-input {
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
}

.onb-input:focus {
  border-color: var(--brand);
}

.onb-input::placeholder {
  color: var(--text-tertiary);
}

/* Primary button */
.onb-btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--brand);
  color: #141414;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(109, 190, 90, 0.3);
}

.onb-btn-primary:hover {
  filter: brightness(1.1);
}

.onb-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ghost button */
.onb-btn-ghost {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.onb-btn-ghost:hover {
  color: var(--text-primary);
}

/* Green tint card */
.green-tint-card {
  background: #1a2a18;
  border: 1px solid #2d5a24;
  border-radius: 16px;
  padding: 16px;
}

[data-theme="light"] .green-tint-card {
  background: #EDF6EB;
  border-color: #B8D8B0;
}

/* Avatar picker */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.avatar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-cell:hover:not(.used) {
  border-color: var(--brand);
  background: #1a2a18;
}

.avatar-cell.selected {
  border-color: var(--brand);
  background: #1a2a18;
  box-shadow: 0 0 12px rgba(109, 190, 90, 0.3);
}

[data-theme="light"] .avatar-cell.selected {
  background: #EDF6EB;
}

[data-theme="light"] .avatar-cell:hover:not(.used) {
  background: #EDF6EB;
}

.avatar-cell.used {
  opacity: 0.3;
  cursor: not-allowed;
}

.avatar-cell .avatar-emoji {
  font-size: 32px;
  line-height: 1;
}

.avatar-cell .avatar-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.avatar-cell.selected .avatar-label {
  color: var(--brand);
}

/* Allergy chips */
.allergy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.allergy-chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.allergy-chip:hover {
  border-color: var(--brand);
}

.allergy-chip.selected {
  background: rgba(109, 190, 90, 0.15);
  border-color: var(--brand);
  color: var(--brand);
}

/* Member cards */
.member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.member-card .member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(109, 190, 90, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

@media (min-width: 768px) {
  .member-card .member-avatar {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }
}

.member-card .member-info {
  flex: 1;
  min-width: 0;
}

.member-card .member-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.member-card .member-role {
  font-size: 12px;
  color: var(--text-secondary);
}

.member-card .member-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.member-card .member-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(109, 190, 90, 0.1);
  color: var(--brand);
}

/* Add member card (dashed border) */
.add-member-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-member-card:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Chat bubbles (Lookout conversation) */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeUp 0.3s ease both;
}

.chat-bubble.lookout {
  align-self: flex-start;
  background: #1a2a18;
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

[data-theme="light"] .chat-bubble.lookout {
  background: #EDF6EB;
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  align-self: flex-start;
}

.typing-indicator .typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: bounce 1.2s infinite;
}

.typing-indicator .typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator .typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* Suggestion chips */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.suggestion-chip {
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.suggestion-chip:hover {
  border-color: var(--brand);
  background: rgba(109, 190, 90, 0.1);
}

/* Milestone bar */
.milestone-bar {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 0 16px;
}

.milestone-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
  flex-shrink: 0;
}

.milestone-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  transition: all 0.3s ease;
}

.milestone-circle.completed {
  background: var(--brand);
  border-color: var(--brand);
  color: #141414;
}

.milestone-circle.active {
  border-color: var(--brand);
  box-shadow: 0 0 8px rgba(109, 190, 90, 0.4);
}

.milestone-circle.locked {
  opacity: 0.4;
}

.milestone-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.milestone-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 -4px;
  margin-bottom: 20px;
}

.milestone-line.filled {
  background: var(--brand);
}

/* Milestone expandable cards */
.milestone-card {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.milestone-card:hover {
  border-color: var(--brand);
}

.milestone-card.active {
  border-color: var(--brand);
  background: #1a2a18;
}

[data-theme="light"] .milestone-card.active {
  background: #EDF6EB;
}

.milestone-card .ms-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.milestone-card .ms-icon {
  font-size: 24px;
}

.milestone-card .ms-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.milestone-card .ms-timing {
  font-size: 12px;
  color: var(--text-secondary);
}

.milestone-card .ms-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.milestone-card .ms-badge.active {
  background: rgba(109, 190, 90, 0.15);
  color: var(--brand);
}

.milestone-card .ms-badge.locked {
  background: var(--bg);
  color: var(--text-tertiary);
}

.milestone-card .ms-badge.completed {
  background: rgba(109, 190, 90, 0.15);
  color: var(--brand);
}

.milestone-card .ms-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: none;
}

.milestone-card.expanded .ms-details {
  display: block;
}

.milestone-card .ms-unlock-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-primary);
}

.milestone-card .ms-unlock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* Invite card */
.invite-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.invite-card .invite-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: var(--brand);
  color: #141414;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.invite-card .invite-btn:hover {
  filter: brightness(1.1);
}

.invite-card .invite-btn.sent {
  background: rgba(109, 190, 90, 0.15);
  color: var(--brand);
  cursor: default;
}

/* Seed progress sub-bar */
.seed-progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin-top: 8px;
}

.seed-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  transition: width 0.5s ease;
}

/* Meal rating card */
.rating-buttons {
  display: flex;
  gap: 8px;
}

.rating-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
}

.rating-btn:hover {
  border-color: var(--brand);
}

.rating-btn .rating-emoji {
  font-size: 24px;
}

.rating-btn.selected {
  border-color: var(--brand);
  background: rgba(109, 190, 90, 0.1);
}

/* Chore wars */
.rps-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.rps-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 600;
}

.rps-btn .rps-emoji {
  font-size: 36px;
}

.rps-btn:hover {
  border-color: var(--brand);
  transform: scale(1.05);
}

.rps-btn.selected {
  border-color: var(--brand);
  background: rgba(109, 190, 90, 0.1);
  transform: scale(1.05);
}

/* Preview card */
.preview-card {
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

/* Role chips */
.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.role-chip:hover {
  border-color: var(--brand);
}

.role-chip.selected {
  background: rgba(109, 190, 90, 0.15);
  border-color: var(--brand);
  color: var(--brand);
}

/* Scan items list */
.scan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  animation: slideDown 0.2s ease both;
}

.scan-item .scan-zone {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(109, 190, 90, 0.1);
  color: var(--brand);
  font-weight: 600;
}

/* Login screen */
.login-screen {
  text-align: center;
  padding: 2rem;
}

.login-screen .login-leaf {
  margin-bottom: 1rem;
}

.login-screen .login-wordmark {
  font-size: 32px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.login-screen .login-tagline {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 0.5rem;
}

.login-screen .login-subtext {
  color: var(--text-tertiary);
  font-size: 13px;
  max-width: 300px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

/* Joiner flow */
.joiner-dinner-card {
  padding: 20px;
  border-radius: 16px;
  text-align: center;
}

.joiner-dinner-card .dinner-label {
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.joiner-dinner-card .dinner-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.joiner-dinner-card .dinner-details {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Family preview circle */
.family-preview {
  display: flex;
  justify-content: center;
  gap: -8px;
}

.family-preview .family-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid var(--brand);
  background: var(--bg-card);
  margin-left: -8px;
}

.family-preview .family-avatar:first-child {
  margin-left: 0;
}

/* ============================================
   GLOBAL SEARCH — Bottom Sheet (matches Ask Anything pattern)
   ============================================ */

.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.global-search-overlay.open {
  pointer-events: auto;
  opacity: 1;
}

.global-search-sheet {
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.global-search-overlay.open .global-search-sheet {
  transform: translateY(0);
}

.global-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 12px;
}

.global-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.global-search-input-wrap .material-symbols-outlined {
  position: absolute;
  left: 14px;
  color: var(--text-tertiary);
  font-size: 18px;
  pointer-events: none;
}

.global-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 12px 42px;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease;
}

.global-search-input:focus {
  border-color: var(--brand);
}

.global-search-input::placeholder {
  color: var(--text-tertiary);
}

.global-search-kbd {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  flex-shrink: 0;
}

.global-search-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.global-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
}

.global-search-group {
  border-bottom: 1px solid var(--border);
}

.global-search-group:last-child {
  border-bottom: none;
}

.global-search-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.global-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.1s ease;
  text-align: left;
}

.global-search-item:hover,
.global-search-item.selected {
  background: rgba(109, 190, 90, 0.08);
}

.global-search-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(109, 190, 90, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.global-search-item-info {
  flex: 1;
  min-width: 0;
}

.global-search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-search-item-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.global-search-item-detail {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Light mode */
[data-theme="light"] .global-search-item:hover,
[data-theme="light"] .global-search-item.selected {
  background: rgba(74, 144, 64, 0.08);
}

/* Kbd hidden on mobile */
@media (max-width: 640px) {
  .global-search-kbd {
    display: none;
  }
}

/* ============================================
   SCROLL WHEEL PICKER (date/time)
   ============================================ */

.wheel-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wheel-scroll::-webkit-scrollbar {
  display: none;
}

.wheel-scroll .wheel-item {
  transition: color 0.1s ease, font-weight 0.1s ease;
}

/* Hide native number input spinners for consistent styling */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Mobile tap feedback — complements Tailwind hover: utilities */
@media (hover: none) {
  button:active, [role="button"]:active {
    opacity: 0.85;
    transform: scale(0.97);
  }
  .group:active {
    opacity: 0.9;
  }
}

/* Touch tap feedback for all interactive elements */
button, [role="button"], [onclick] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Horizontal scroll snap for pill/chip rows */
.snap-scroll {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.snap-scroll > * {
  scroll-snap-align: start;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}