@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap");

/* --- 1. CORE VARIABLES & THEME --- */
:root {
  --ice-1: #f4fbff;
  --ice-2: #e6f1ff;
  --ice-3: #cfe9ff;
  --accent: #1b6fd8;
  --muted: #6b7c93;
  --primary-navy: #083463;
  --primary-blue: #1b6fd8;
  --accent-green: #28a745;
  --bg-body: linear-gradient(180deg, #f4fbff, #e6f1ff 40%, #f0f7ff 100%);
  --bg-card: rgba(255, 255, 255, 0.8);
  --border-subtle: rgba(200, 215, 235, 0.6);
  --text-main: #05223a;
  --text-header: #083463;
  --shadow-soft: 0 8px 30px rgba(11, 45, 80, 0.15);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --popup-height-default: min(82vh, 700px);
  --popup-height-large: min(88vh, 820px);
  --popup-height-medium: min(68vh, 560px);
  --popup-height-sheet: min(84vh, 720px);
  --popup-height-picker: min(76vh, 640px);
}

/* On iOS Safari, `vh` measures the LARGE viewport (as if the URL bar were
   hidden), so vh-sized popups overflow the visible screen and their bottom
   edge — submit buttons, date fields — gets clipped. `dvh` tracks the actual
   visible viewport; use it wherever supported. */
@supports (height: 100dvh) {
  :root {
    --popup-height-default: min(82dvh, 700px);
    --popup-height-large: min(88dvh, 820px);
    --popup-height-medium: min(68dvh, 560px);
    --popup-height-sheet: min(84dvh, 720px);
    --popup-height-picker: min(76dvh, 640px);
  }
}

/* --- 2. GLOBAL RESET --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}
body {
  background: var(--bg-body);
  color: var(--text-main);
  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  padding: 0;
}
/* Background texture overlay */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top center,
      rgba(255, 255, 255, 0.2),
      transparent 30%);
  mix-blend-mode: overlay;
  z-index: -1;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--text-header);
  font-weight: 900;
  margin-top: 0;
}

/* --- 3. CONTAINER --- */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#app-container {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 2rem 2.25rem 2.25rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* --- 3.5 APP LAYOUT & SIDEBAR --- */

.app-layout {
  --sidebar-w: 250px;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  position: relative;
  gap: 0;
  padding: 0;
}

#app-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1f314d 0%, #1b2b45 100%);
  backdrop-filter: blur(6px);
  color: #e8f1ff;
  --sidebar-bg: #1f314d;
  --sidebar-bg-soft: #253b5f;
  --sidebar-text: #e8f1ff;
  --sidebar-text-muted: #b8c9e6;
  --sidebar-border: rgba(170, 194, 230, 0.22);
  --sidebar-hover: rgba(156, 184, 230, 0.2);
  --sidebar-active: rgba(156, 184, 230, 0.3);
  --sidebar-accent: #a8c9ff;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 1px solid var(--sidebar-border);
  box-shadow: 0 12px 34px rgba(9, 20, 39, 0.42);
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  z-index: 40;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

#app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 250px;
  width: calc(100% - 250px);
  min-height: 100vh;
  min-height: 100dvh;
  background: #f3f9fd;
  transition:
    margin-left 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-shell-header {
  height: 104px;
  background: #ffffff;
  border-bottom: 1px solid rgba(200, 215, 235, 0.65);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 1.5rem;
  flex-shrink: 0;
}

.main-shell-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1;
  text-align: center;
  grid-column: 2;
}

.main-shell-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
  grid-column: 3;
}

.main-shell-meal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-shell-meal-actions #calendar-view-toggle-btn,
.main-shell-meal-actions #edit-plan-btn,
.main-shell-meal-actions #done-editing-btn {
  padding: 8px 14px;
  font-size: 0.9rem;
}

.main-shell-content {
  flex: 1;
  min-height: 0;
  background: #f3f9fd;
  overflow: auto;
}

.main-shell-content .container {
  height: 100%;
}

.main-shell-header .menu-toggle-btn {
  position: static;
  top: auto;
  left: auto;
}

.main-shell-header .about-icon-btn,
.main-shell-header .account-icon-btn {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}

/* Build Your Plan (#plan-builder-view) and Pick Days (#builder-assign-view)
   both supply their own in-flow .pbv-topbar instead of this global bar — see
   view-controller.js's navigateToView, which toggles this class, and the
   .pbv-* rules near .plan-builder-view / .builder-assign-view. */
body.pbv-active .main-shell-header {
  display: none;
}

/* When the sidebar is collapsed, sidebar-close-btn shrinks into a fixed
   top-left "reopen" chevron that lands exactly where .pbv-cancel-btn sits in
   the .pbv-topbar (the content area expands to fill the collapsed sidebar's
   space). Only hide it in that collapsed case; when the sidebar is open it
   lives inside the sidebar itself, offset from .pbv-topbar, so no overlap. */
body.pbv-active.sidebar-collapsed .sidebar-close-btn {
  display: none;
}

body.sidebar-collapsed #app-sidebar {
  transform: translateX(-100%);
}

body.sidebar-collapsed #app-main {
  margin-left: 0;
  width: 100%;
}

/* Sidebar Sections */
.sidebar-top {
  padding: max(4.35rem, calc(env(safe-area-inset-top, 0px) + 1.5rem)) 0.75rem 0.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-close-btn {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 0px));
  left: 0.75rem;
  z-index: 46;
  width: calc(var(--sidebar-w, 250px) - 1.5rem);
  height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(168, 201, 255, 0.28);
  background: rgba(168, 201, 255, 0.14);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    border-radius 0.25s ease,
    box-shadow 0.25s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
}

.sidebar-close-label {
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  max-width: 130px;
  overflow: hidden;
  transition:
    max-width 0.22s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.sidebar-close-btn:hover {
  background: rgba(168, 201, 255, 0.24);
  color: #ffffff;
}

body.sidebar-collapsed .sidebar-close-btn {
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.3);
  justify-content: center;
  animation: sidebar-arrow-in 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  z-index: 30;
}

body.sidebar-collapsed .sidebar-close-btn:hover {
  background: #3787ff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.4);
}

body.sidebar-collapsed .sidebar-close-btn .sidebar-close-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: translateX(6px);
}

body.sidebar-collapsed .sidebar-close-btn .chevron-left {
  transform: rotate(-45deg);
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Family Mode Toggle ───────────────────────────────────────────────────── */
.family-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.mode-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 201, 255, 0.22);
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  font-family: inherit;
}

.mode-btn:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.mode-btn.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(168, 201, 255, 0.45);
}

/* Collapsed sidebar hides toggle text */
.app-sidebar.collapsed .family-mode-toggle {
  padding: 0.5rem 0.25rem;
}

.app-sidebar.collapsed .mode-btn {
  font-size: 0;
  padding: 7px 4px;
}

.app-sidebar.collapsed .mode-btn.active::after {
  content: "●";
  font-size: 11px;
  color: #fff;
}

/* Notification badge on family button */
.family-notif-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.family-notif-badge.hidden {
  display: none;
}

/* ── Notifications Panel ──────────────────────────────────────────────────── */
.notifications-panel {
  position: fixed;
  top: 56px;
  right: 1rem;
  width: 340px;
  max-height: 480px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
}

.notifications-panel.hidden {
  display: none;
}

.notifications-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.notifications-list {
  overflow-y: auto;
  flex: 1;
}

.notif-item {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item:hover {
  background: #f9fafb;
}

.notif-item .notif-msg {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

.notif-item .notif-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 3px;
}

.notif-action-btn {
  margin-top: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #22c55e;
  background: #f0fdf4;
  color: #166534;
  border-radius: 6px;
  cursor: pointer;
}

/* ── Family member rows in settings ──────────────────────────────────────── */
.family-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  background: #fafafa;
}

.family-member-row .member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}

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

.family-member-row .member-name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-member-row .member-role {
  font-size: 11px;
  color: #9ca3af;
  text-transform: capitalize;
}

.family-member-row .member-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.family-member-row .member-action-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.family-member-row .member-action-btn:hover {
  background: #f3f4f6;
}

.family-member-row .member-action-btn.danger {
  border-color: #fecaca;
  color: #ef4444;
}

.family-member-row .member-action-btn.danger:hover {
  background: #fef2f2;
}

/* Invite rows */
.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #f0f0f0;
  font-size: 13px;
}

.invite-row .invite-email {
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.invite-row .invite-cancel-btn {
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #fecaca;
  background: #fff;
  color: #ef4444;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background 0.15s;
}

.invite-row .invite-cancel-btn:hover {
  background: #fef2f2;
}

/* Family planner-mode selector active state */
#family-planner-calendar-btn.f-active,
#family-planner-queue-btn.f-active {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
  font-weight: 600;
}

/* Admin action bar shown in calendar/queue view for admins in family mode */
.family-admin-bar {
  display: flex;
  gap: 8px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}

.family-admin-bar .f-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.family-admin-bar .f-btn-primary {
  background: #22c55e;
  color: #fff;
  border-color: #16a34a;
}

.family-admin-bar .f-btn-primary:hover {
  background: #16a34a;
}

.family-admin-bar .f-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.family-admin-bar .f-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Scope tabs in library picker modal */
.scope-tab {
  padding: 5px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  color: #6b7280;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.scope-tab.active,
.scope-tab:hover {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
}

/* f-btn styles for modals (used outside the admin bar) */
.f-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.f-btn-primary {
  background: #22c55e;
  color: #fff;
  border-color: #16a34a;
}

.f-btn-primary:hover {
  background: #16a34a;
}

.f-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.f-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.f-btn-danger {
  background: #ef4444;
  color: #fff;
  border-color: #dc2626;
}

.f-btn-danger:hover {
  background: #dc2626;
}

/* Inline status messages for family actions */
.f-status-msg {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

.f-status-msg--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
}

.f-status-msg--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  border-radius: 8px;
  position: relative;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: #ffffff;
}

.nav-item.active {
  background: var(--sidebar-active);
  color: #ffffff;
  font-weight: 600;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--sidebar-accent);
  border-radius: 0 3px 3px 0;
}

.discover-nav-item {
  background: linear-gradient(135deg, rgba(168, 201, 255, 0.2) 0%, rgba(168, 201, 255, 0.12) 100%);
  border: 2px solid var(--sidebar-accent);
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.discover-nav-item:hover {
  background: linear-gradient(135deg, rgba(168, 201, 255, 0.28) 0%, rgba(168, 201, 255, 0.2) 100%);
}

.sidebar-nav .discover-nav-item[title] {
  border-bottom: 2px solid var(--sidebar-accent) !important;
}

.nav-icon {
  font-size: 18px;
  display: inline-block;
  width: 24px;
  flex-shrink: 0;
}

.nav-text {
  flex: 1;
}

.ext-icon {
  opacity: 0.72;
  color: var(--sidebar-text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.sidebar-user-email {
  position: relative;
  flex: 1;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: 12px;
  transition: all 0.25s ease;
  display: flex;
  min-width: 0;
}

.sidebar-user-email:hover {
  color: #ffffff;
}

.user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.sidebar-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: rgba(168, 201, 255, 0.14);
  border: 1px solid rgba(168, 201, 255, 0.28);
  color: var(--sidebar-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.sidebar-icon-btn:hover {
  background: rgba(168, 201, 255, 0.25);
  color: #ffffff;
  border-color: var(--sidebar-accent);
}

.sidebar-account-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* Account avatar inside the sidebar button. The markup (sidebar.js) sets
   Tailwind utility classes, but plan.html ships no Tailwind — so size, clip,
   and style the avatar (photo or initial fallback) here instead. */
#sidebar-avatar {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

#sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile Menu Toggle Button */
.menu-toggle-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 45;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.3);
  gap: 0;
}

body:not(.sidebar-collapsed) .menu-toggle-btn {
  display: none;
}

.info-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-sizing: border-box;
}

.chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.chevron-left {
  transform: rotate(135deg);
}

.chevron-right {
  transform: rotate(-45deg);
}

.menu-toggle-btn:hover {
  background: #3787ff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.4);
}

body.sidebar-collapsing .sidebar-close-btn {
  transform: scale(0.95);
}

body.sidebar-collapsing .sidebar-close-label {
  opacity: 0;
  transform: translateX(8px);
}

body.sidebar-collapsing .sidebar-close-btn .chevron-left {
  transform: rotate(-45deg);
}

@keyframes sidebar-arrow-in {
  0% {
    opacity: 0;
    transform: translateX(-10px) scale(0.88) rotate(-8deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

/* Mobile Sidebar Backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 38;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}


/* --- 4. UTILITY CLASSES (Manual Implementation) --- */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

/* Positioning */
.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Spacing Helpers */
.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.space-x-2>*+* {
  margin-left: 0.5rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-y-3>*+* {
  margin-top: 0.75rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

/* Needed for checkbox labels */
.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

/* List utilities */
.list-disc {
  list-style-type: disc;
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0.5rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

/* Grid System */
.grid {
  display: grid;
  gap: 1rem;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

/* Padding Helpers */
.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Additional Padding */
.pb-4 {
  padding-bottom: 1rem;
}

/* Margin Helpers */
.mb-6 {
  margin-bottom: 1.5rem;
}

/* Sizing */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-h-96 {
  max-height: 24rem;
}

.h-7 {
  height: 1.75rem;
}

.w-7 {
  width: 1.75rem;
}

/* Overflow */
.overflow-y-auto {
  overflow-y: auto;
}

/* Relative Positioning */
.relative {
  position: relative;
}

/* Backgrounds */
.bg-white {
  background-color: #ffffff;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.bg-red-50 {
  background-color: #fef2f2;
}

.bg-green-50 {
  background-color: #f0fdf4;
}

.bg-black {
  background-color: #000000;
}

.bg-opacity-70 {
  background-color: rgba(0, 0, 0, 0.7);
}

.bg-primary-blue {
  background-color: var(--primary-blue);
}

.bg-secondary-green {
  background-color: var(--accent-green);
}

.bg-blue-800 {
  background-color: #1e40af;
}

.bg-green-600 {
  background-color: #16a34a;
}

/* Backdrop & Blur */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Text Styling */
.text-sm {
  font-size: 0.875rem;
}

.text-base {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-800 {
  color: #1f2937;
}

.text-gray-900 {
  color: #111827;
}

.text-red-500 {
  color: #ef4444;
}

.text-red-600 {
  color: #dc2626;
}

.text-blue-600 {
  color: #2563eb;
}

.text-white {
  color: #ffffff;
}

.add-fav-side-to-meal-btn {
  color: black;
}

.add-fav-main-personal-btn,
.add-fav-main-to-plan-btn {
  background: #3b82f6;
}

.add-fav-main-family-btn {
  background: #22c55e;
  color: #111;
}

.add-user-meal-personal-btn,
.add-user-meal-to-plan-btn {
  background: #3b82f6;
}

.add-user-meal-family-btn {
  background: #22c55e;
  color: #111;
}

.add-to-fam-lib-btn {
  background: #a855f7;
  color: #fff;
}

.text-primary-blue {
  color: var(--primary-blue);
}

.text-secondary-green {
  color: var(--accent-green);
}

.line-through {
  text-decoration: line-through;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* Borders & Shadows */
.border {
  border: 1px solid #e5e7eb;
}

.border-2 {
  border-width: 2px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Hover Helpers */
.hover\:bg-blue-50:hover {
  background-color: #eff6ff;
}

.hover\:bg-blue-100:hover {
  background-color: #dbeafe;
}

.hover\:bg-blue-800:hover {
  background-color: #1e40af;
}

.hover\:bg-red-50:hover {
  background-color: #fef2f2;
}

.hover\:bg-red-100:hover {
  background-color: #fee2e2;
}

.hover\:bg-green-600:hover {
  background-color: #16a34a;
}

.hover\:text-blue-800:hover {
  color: #1e40af;
}

.hover\:text-gray-800:hover {
  color: #1f2937;
}

.hover\:bg-white:hover {
  background-color: #ffffff;
}

/* Outline & Border Reset */
.outline-none {
  outline: none;
}

.border-none {
  border: none;
}

/* Text Truncation & Clamping */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
}

/* Disabled State */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- 5. COMPONENT STYLING --- */

/* ── Meal Detail Layout (card-first redesign) ────────────────────────────────
   The modal is a tinted "field". A sticky header (dot cluster, date, cook,
   Scale-all, Close) never scrolls; everything else — build/manage actions
   and the Main/Side dish cards — scrolls together in the body below it. */

/* Widen this modal specifically — the card-first layout wants room for the
   two-column recipe expansion. Overrides .modal-content.large's 42rem. */
#meal-detail-modal-content.meal-detail-layout {
  max-width: min(940px, 96vw);
  padding: 0;
}

.meal-detail-layout {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* Tinted "field" so the white header + cards read as elevated layers. */
  background: linear-gradient(180deg, #f7fbff 0%, #e9f1fb 100%);
}

/* ── Sticky header ─────────────────────────────────────────────────────────
   A normal flex child of .meal-detail-layout (column flow), so it simply
   never enters the scrollable area below — no overlay/absolute-positioning
   hack needed. .meal-detail-header-primary (dots/date/cook) never wraps
   internally; .meal-detail-scale-wrap is a separate flex item that drops to
   its own row when it doesn't fit alongside it. */
.meal-detail-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  flex: 0 0 auto;
  /* Right padding reserves room for .meal-detail-header-controls (Close, plus
     the Actions "..." trigger once updateActionsLayout() reveals it) so the
     absolutely-positioned pair never overlaps the dots/date/cook content. */
  padding: 0.65rem 7.4rem 0.65rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(8, 52, 99, 0.06);
}

.meal-detail-header-primary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.55rem;
  /* flex-shrink: 0 — its real content size (not a guessed basis) feeds the
     wrap decision below, so the header-primary/scale pair genuinely wraps
     onto two lines once they no longer fit, instead of silently clipping. */
  flex: 0 0 auto;
  min-width: 0;
}

/* Pinned to the header's corner (header is position:relative), independent
   of whether the header is one row or two (Scale wrapped below). Holds the
   Actions ("...") trigger + its popup alongside Close so both stay glued
   together at the corner regardless of header height. */
.meal-detail-header-controls {
  position: absolute;
  /* Vertically centered against the header's actual height, which varies
     (one row, or two when Scale wraps below) — a fixed top offset only
     looked right for one specific height. */
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.meal-detail-close-btn {
  box-shadow: 0 2px 6px rgba(8, 52, 99, 0.15);
  /* !important: .btn-x (global.css, loaded after plan.css) sets its own
     padding/font-size at equal selector specificity, so plain overrides here
     lose the cascade tie on load order alone. */
  padding: 6px 14px !important;
  font-size: 12.5px !important;
}

/* ── Actions ("...") trigger: opens the popup that holds the build/manage
   buttons once .meal-detail-toolbar can't fit them on one line (see
   .meal-detail-toolbar.hidden below, toggled by updateActionsLayout()). Icon
   only, same footprint as Close's collapsed circle so the pair reads as one
   control cluster. */
.meal-detail-actions-wrap {
  position: relative;
}

.meal-detail-actions-btn {
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(8, 52, 99, 0.15);
}

.meal-detail-actions-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Popup menu: mirrors the Library-style filter dropdown (picker-filter-panel)
   — floating card, corner arrow, fade + scale open transition — so it reads
   as the same "popover" pattern used elsewhere rather than a one-off. */
.meal-detail-actions-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max(220px, min(280px, 80vw));
  z-index: 20;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  box-shadow: var(--shadow-modal, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.meal-detail-actions-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.meal-detail-actions-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 11px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}

.meal-detail-actions-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Sits between the build-actions group (Generate Combined Recipe, Generate
   Cost, Suggest Sides) and the manage-actions group (Shopped For, Move,
   Delete) once JS relocates them here — hidden whenever it ends up first or
   last (one side empty) so it never shows as a stray line. */
.meal-detail-actions-menu-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--border-subtle);
}

.meal-detail-actions-menu-divider:first-child,
.meal-detail-actions-menu-divider:last-child {
  display: none;
}

/* ── Relocation target for header content that no longer fits ────────────
   Holds the "Who's cooking" chip (#cook-control-slot) and the Scale-all
   control (#instance-controls) once updateHeaderCompactLayout() moves them
   out of the sticky header — see the media queries in meal-detail-controller.js.
   Empty by default, so :not(:empty) is the only visibility switch needed;
   its bottom border doubles as the divider against the buttons below. */
.meal-detail-actions-menu-header {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.meal-detail-actions-menu-header:not(:empty) {
  display: flex;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}
/* Both relocated controls are flex items of the column above; without this
   each defaults to min-width:auto (its content's own max-content size), which
   lets a long "who's cooking" name push #cook-control-slot wider than the
   popup's fixed width instead of the name truncating inside it. */
.meal-detail-actions-menu-header > * {
  min-width: 0;
}
/* The cook-control banner (base .cook-control rule) is sized for page
   content — full page-banner padding/icon/font, a stacking margin-bottom this
   menu context doesn't need, and no cap on the name's width. Shrink it to a
   menu-row scale and truncate the name so a long one ellipsizes instead of
   overflowing the popup's fixed width. */
.meal-detail-actions-menu-header .cook-control {
  margin-bottom: 0;
  padding: 0.6rem 0.75rem;
  gap: 0.6rem;
  min-width: 0;
}
.meal-detail-actions-menu-header .cook-control-head {
  gap: 0.5rem;
  min-width: 0;
}
.meal-detail-actions-menu-header .cook-control-icon {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.meal-detail-actions-menu-header .cook-control-eyebrow {
  font-size: 0.62rem;
}
.meal-detail-actions-menu-header .cook-control-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meal-detail-actions-menu-header .cook-control-source {
  font-size: 0.65rem;
}
/* Scale-all fills the popup row edge-to-edge instead of the header's
   constrained flex-basis. */
.meal-detail-actions-menu-header .meal-detail-scale-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.meal-detail-actions-menu-header .meal-detail-scale {
  justify-content: space-between;
}

/* Buttons relocated into the popup (the real toolbar buttons, moved — not
   copies) restyle from inline pills / dish-action-btn chips into full-width,
   left-aligned menu rows. Self-contained (doesn't lean on
   .meal-detail-build-actions button or .meal-detail-manage-actions
   .dish-action-btn — those selectors need an ancestor this popup isn't) so
   both button families read consistently once they land here; the higher
   specificity here (class + element) still wins over the bare .dish-action-btn
   rules that keep applying to these same elements. */
.meal-detail-actions-menu-list > button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  padding: 0.65rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  background: #fff;
  color: var(--text-header);
  border: 1px solid transparent;
}

.meal-detail-actions-menu-list > button:hover:not(:disabled) {
  background: var(--ice-1);
  border-color: var(--border-subtle);
  transform: none;
}

.meal-detail-actions-menu-list > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.meal-detail-actions-menu-list > button.is-primary {
  background: var(--accent);
  color: #fff;
}

.meal-detail-actions-menu-list > button.is-primary:hover:not(:disabled) {
  background: #0f64cf;
  border-color: #0f64cf;
}

.meal-detail-actions-menu-list > button.remove-btn {
  color: #dc2626;
}

.meal-detail-actions-menu-list > button.remove-btn:hover:not(:disabled) {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.meal-detail-actions-menu-list > button.shopped-toggle-btn.shopped-active {
  color: #1e7e34;
  background: rgba(40, 167, 69, 0.12);
  border-color: var(--accent-green);
}

.meal-detail-actions-menu-list > button.shopped-toggle-btn.shopped-active:hover:not(:disabled) {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}

/* "Ate this: …" — a status the button also lets you change, so it carries the
   eaters indigo in both homes (toolbar and the "..." popup). */
.eaters-action-btn {
  color: #4f46e5;
}
.meal-detail-actions-menu-list > button.eaters-action-btn {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}
.meal-detail-actions-menu-list > button.eaters-action-btn:hover:not(:disabled) {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
/* Compound selector (not just .meal-detail-close-icon) — Font Awesome's own
   .fa-solid rule sets display:inline-block at equal specificity and its
   stylesheet loads after plan.css, so a single-class selector here would
   lose the cascade tie and the icon would show on desktop too. */
.meal-detail-close-btn .meal-detail-close-icon {
  display: none;
}

/* ── Dot cluster: 1 blue dot per main dish, 1 green dot per side ─────────── */
.meal-detail-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.meal-detail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.meal-detail-dot--main {
  background: var(--accent);
}
.meal-detail-dot--side {
  background: #22c55e;
}

/* ── Compact context chips (cook + planned date) reuse the banner markup but
      collapse to slim pills inside the header. ─────────────────────────────── */
.meal-detail-header-primary .cook-control,
.meal-detail-header-primary .meal-date-control {
  margin: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 0.55rem 0 0.5rem;
  border-radius: 999px;
  gap: 0.5rem;
  flex-wrap: nowrap;
  background: var(--ice-1);
  width: auto;
  flex-shrink: 0;
}
.meal-detail-header-primary .cook-control[data-cook-editable] {
  cursor: pointer;
}
.meal-detail-header-primary .cook-control[data-cook-editable]:hover,
.meal-detail-header-primary .cook-control[data-cook-editable]:focus-visible {
  background: rgba(27, 111, 216, 0.1);
  outline: none;
}
.meal-detail-header-primary .cook-control-head,
.meal-detail-header-primary .meal-date-head {
  gap: 0.4rem;
  min-width: 0;
}
.meal-detail-header-primary .cook-control-icon,
.meal-detail-header-primary .meal-date-icon {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.meal-detail-header-primary .cook-control-eyebrow,
.meal-detail-header-primary .cook-control-source,
.meal-detail-header-primary .meal-date-eyebrow,
.meal-detail-header-primary .meal-date-sub {
  display: none;
}
.meal-detail-header-primary .cook-control-name {
  font-size: 12.5px;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meal-detail-header-primary .cook-control-caret {
  font-size: 9px;
  color: var(--muted);
  flex-shrink: 0;
}
.meal-detail-header-primary .cook-control-actions {
  gap: 0.35rem;
}
.meal-detail-header-primary .cook-control-actions .dish-action-btn {
  padding: 0.24rem 0.55rem;
  font-size: 11px;
  border-radius: 999px;
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.1);
}
.meal-detail-header-primary .meal-date-actions {
  gap: 0.35rem;
}
.meal-detail-header-primary .meal-date-input {
  height: 22px;
  box-sizing: border-box;
  padding: 0 0.4rem;
  font-size: 12px;
  line-height: 22px;
  border-radius: 8px;
  /* Cancel the global `input { margin-bottom: 0.5rem }` — the asymmetric
     margin was throwing off align-items: center in this compact chip row. */
  margin: 0;
}

/* Static planned date (calendar meals — the date is fixed, so no input). */
.meal-date-static {
  display: inline-flex;
  align-items: center;
  height: 28px;
  box-sizing: border-box;
  gap: 0.5rem;
  background: var(--ice-1);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 999px;
  padding: 0 0.65rem 0 0.5rem;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-header);
  white-space: nowrap;
}
.meal-date-static-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent);
  font-size: 9px;
  flex-shrink: 0;
}
.meal-date-static-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Scale-all wrapper: a flex sibling of .meal-detail-header-primary. Drops
      to its own row (flex-wrap on .meal-detail-header) when both don't fit
      on one line — the primary group above never wraps to make room for it.
      Keeps #instance-controls id; JS toggles its display, so don't set
      display here. ─────────────────────────────────────────────────────── */
.meal-detail-scale-wrap {
  flex: 1 1 220px;
  min-width: 150px;
  max-width: 320px;
}

.instance-mixed-units-note {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

/* Bare row, no pill/chip background — the slider's own track is the "line".
   min-width:0 lets it shrink below its children's content size, so the
   slider (the flexible one) can give up width on narrow rows instead of
   the whole control overflowing its own container. */
.meal-detail-scale {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 100%;
}
.meal-detail-scale-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.meal-detail-scale-slider {
  -webkit-appearance: none;
  appearance: none;
  /* Flexible, not fixed: shrinks on narrow rows instead of overflowing
     .meal-detail-scale (label/value are flex-shrink:0, so this is the one
     that gives up width first). */
  flex: 1 1 90px;
  width: auto;
  max-width: 180px;
  min-width: 0;
  height: 5px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ice-3);
  cursor: pointer;
  outline: none;
}
.meal-detail-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.meal-detail-scale-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.meal-detail-scale-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
}
.meal-detail-scale-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3);
}
.meal-detail-scale-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.meal-detail-scale-value {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
  min-width: 2.6rem;
  text-align: center;
  flex-shrink: 0;
}
/* Compact +/- stepper: replaces the slider once updateHeaderCompactLayout()
   (meal-detail-controller.js) adds .is-compact-scale — the slider thumb
   becomes unusable once Scale-all is squeezed into the popup below 400px, so
   this reuses the same -/+ pattern as the per-dish scale steppers. Hidden by
   default; .dish-scale-btn already supplies the button's look.
   Compound selector (not just .meal-detail-scale-step): .dish-scale-btn sets
   its own display:inline-flex at equal specificity and is defined later in
   this file, so a single-class selector here would lose the cascade tie. */
.dish-scale-btn.meal-detail-scale-step {
  display: none;
  flex-shrink: 0;
}
.meal-detail-scale-wrap.is-compact-scale .meal-detail-scale-slider {
  display: none;
}
.meal-detail-scale-wrap.is-compact-scale .meal-detail-scale-step {
  display: inline-flex;
}
/* Master-scale explainer is redundant in the compact header (each dish shows
   its own serves chip + stepper); the JS still writes to it harmlessly. */
.meal-detail-scale-summary {
  display: none;
}

/* ── Scrollable body ───────────────────────────────────────────────────── */
.meal-detail-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* The sticky header above is a normal (non-overlapping) flex sibling now,
     so this just needs ordinary breathing room, not clearance padding. */
  padding: 16px 18px 22px;
}

/* Action bar: build actions (left) + meal management (right). Now the only
   row in .meal-detail-toolbar (context chips live in the sticky header). */
/* nowrap everywhere in this row on purpose: .meal-detail-toolbar is only ever
   shown fully expanded (see updateActionsLayout() in meal-detail-controller.js)
   once every button here fits on one line without wrapping; below that width
   the whole toolbar hides and the header's "..." Actions button + popup take
   over instead. Wrapping mid-row would defeat that all-or-nothing measurement. */
.meal-detail-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  gap: 0.6rem;
  overflow-x: hidden;
}
.meal-detail-build-actions,
.meal-detail-manage-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.meal-detail-build-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  background: #fff;
  color: var(--accent);
  border: 1px solid rgba(27, 111, 216, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.meal-detail-build-actions button:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.meal-detail-build-actions button.is-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.meal-detail-build-actions button.is-primary:hover:not(:disabled) {
  background: #0f64cf;
  border-color: #0f64cf;
}
.meal-detail-build-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Servings differ" notice — a full-width banner above the Main Dishes
   section whenever the meal's dishes don't all serve the same number. Amber,
   matching the legacy-day banner: a heads-up about the meal, not an error.
   Lives in the rebuilt content (not the build-actions toolbar) on purpose —
   that toolbar relocates into the "..." popup on narrow screens, and this
   needs to stay visible instead of getting buried behind a tap. Empty most of
   the time, so collapse the slot or its margin doubles up around nothing. */
.servings-sync-slot:empty {
  display: none;
}
.servings-sync-slot {
  margin-bottom: 1.1rem;
}
.servings-sync-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  column-gap: 0.55rem;
  background: #fff8e1;
  border: 1px solid #f3d48a;
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}
.servings-sync-ic {
  font-size: 14px;
  color: #b45309;
  flex-shrink: 0;
}
.servings-sync-text {
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
}
/* The differing counts themselves ("4 vs 8"), so the notice says what's wrong
   rather than only that something is. */
.servings-sync-values {
  font-size: 11.5px;
  font-weight: 900;
  color: #7c2d12;
  background: rgba(180, 83, 9, 0.12);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
/* Pushed to the row's far right on wide screens; when the row wraps (narrow
   screens, or many distinct serving counts) it lands alone on its own line,
   still right-aligned within it. */
.servings-sync-note button.servings-sync-fix {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: none;
  background: #b45309;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.servings-sync-note button.servings-sync-fix:hover:not(:disabled) {
  background: #92400e;
  color: #fff;
  transform: translateY(-1px);
}
.servings-sync-note button.servings-sync-fix:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}
@media (max-width: 480px) {
  .servings-sync-note {
    padding: 0.55rem 0.7rem;
  }
  .servings-sync-note button.servings-sync-fix {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* Manage cluster (Rename hidden by JS; Move hidden in list mode).
   flex-shrink: 0 + white-space: nowrap so these never squash/wrap their text
   (e.g. "Not Shopped For" stacking word-per-line) as the row runs out of
   room — they either render at full size or the row overflows, which is
   exactly the signal updateActionsLayout() needs to relocate everything into
   the "..." popup instead. */
.meal-detail-manage-actions .dish-action-btn {
  font-size: 12px;
  font-weight: 800;
  padding: 0.5rem 0.75rem;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border-subtle);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.meal-detail-manage-actions .dish-action-btn:hover {
  color: var(--text-header);
  border-color: #b9c9de;
  transform: translateY(-1px);
}
.meal-detail-manage-actions .dish-action-btn.remove-btn {
  color: #dc2626;
  border-color: #f0c8c8;
  background: #fff6f6;
}
.meal-detail-manage-actions .dish-action-btn.remove-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.meal-detail-manage-actions .dish-action-btn.shopped-toggle-btn.shopped-active {
  color: #1e7e34;
  border-color: var(--accent-green);
  background: rgba(40, 167, 69, 0.12);
}
.meal-detail-manage-actions .dish-action-btn.shopped-toggle-btn.shopped-active:hover {
  background: var(--accent-green);
  color: #fff;
  border-color: var(--accent-green);
}
.meal-detail-manage-actions .dish-action-btn.shopped-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Section divider (kicker + count tag + rule line + actions) ─────────── */
.detail-section-shell {
  margin-bottom: 1.4rem;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.detail-section-shell:last-child {
  margin-bottom: 0;
}
.detail-section-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.detail-section-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.detail-section-shell--main .detail-section-kicker {
  color: var(--accent);
}
.detail-section-shell--side .detail-section-kicker {
  color: #16a34a;
}
.detail-section-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.detail-section-tag--main {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}
.detail-section-tag--side {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}
.detail-section-rule {
  height: 1px;
  flex: 1;
  min-width: 12px;
  background: var(--border-subtle);
}
.detail-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-card-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Dish card (Concept-C inline) ──────────────────────────────────────── */
.detail-dish-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  /* Colored left edge differentiates Mains (blue) from Sides (green). */
  border-left: 3px solid transparent;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.detail-dish-card--main {
  border-left-color: var(--accent);
}
.detail-dish-card--side {
  border-left-color: #22c55e;
}
.detail-dish-card:hover {
  box-shadow: 0 8px 20px rgba(8, 52, 99, 0.1);
  transform: translateY(-1px);
}
.detail-dish-card.is-open {
  box-shadow: 0 8px 20px rgba(8, 52, 99, 0.1);
}
.detail-dish-card.is-deleted {
  opacity: 0.62;
}
.detail-dish-card.is-deleted .dish-title {
  text-decoration: line-through;
  color: var(--muted);
}

.dish-card-body {
  padding: 0.85rem 1rem;
}
.dish-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.dish-badge-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.dish-badge-dot--main {
  background: rgba(27, 111, 216, 0.14);
  color: #1662c1;
}
.dish-badge-dot--side {
  background: rgba(34, 197, 94, 0.16);
  color: #16a34a;
}
.dish-card-headtext {
  flex: 1;
  min-width: 0;
}
.dish-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.25;
  margin: 0;
}
.dish-info {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 3px;
}

/* Control row: serves + stepper (left) · library / remove (right). */
.dish-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: 0.7rem;
}
.dish-scale-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0;
  padding: 0;
  border: none;
  max-width: 100%;
  min-width: 0;
}
.dish-serves-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  background: var(--ice-1);
  border: 1px solid rgba(27, 111, 216, 0.22);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.detail-dish-card--side .dish-serves-chip {
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.28);
}
.dish-serves-chip--muted {
  color: var(--muted);
  background: transparent;
  border-color: rgba(120, 120, 120, 0.25);
  font-weight: 700;
}
.dish-scale-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ice-1);
  border-radius: 9px;
  padding: 0.22rem 0.35rem;
}
.dish-scale-caption {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-left: 0.2rem;
}
.dish-scale-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border-radius: 6px;
  border: none;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 52, 99, 0.12);
  color: var(--text-header);
  cursor: pointer;
  transition: all 0.15s ease;
}
.dish-scale-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.dish-scale-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.dish-scale-value {
  min-width: 2.2rem;
  text-align: center;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text-header);
}

.dish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}
.dish-action-btn {
  font-size: 11.5px;
  font-weight: 800;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  background: var(--ice-1);
  color: var(--accent);
  border: 1px solid rgba(27, 111, 216, 0.28);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.detail-dish-card--side .dish-action-btn:not(.remove-btn):not(.disabled-btn) {
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.28);
}
.dish-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}
.dish-action-btn.fav-active {
  color: #dc2626;
  border-color: #f0c8c8;
  background: #fff6f6;
}
.dish-action-btn.fav-active:hover,
.dish-action-btn.remove-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.dish-action-btn.remove-btn {
  color: #dc2626;
  border-color: #f0c8c8;
  background: #fff6f6;
}
.dish-action-btn.disabled-btn,
.dish-action-btn.disabled-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
  transform: none;
  cursor: default;
}

/* Expand / collapse toggle. */
.dish-toggle-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 0.4rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  background: var(--ice-1);
  color: var(--accent);
  border: 1px solid rgba(27, 111, 216, 0.3);
}
.dish-toggle-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dish-toggle-chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.detail-dish-card.is-open .dish-toggle-chevron {
  transform: rotate(180deg);
}

/* Expanded recipe body. */
.dish-collapse-body {
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  padding: 1rem;
  animation: dish-collapse-in 0.2s ease;
}
@keyframes dish-collapse-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.detail-card-columns {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 1.1rem;
}
.detail-card-panel {
  min-width: 0;
}
.dish-section-heading {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.detail-scroll-box {
  padding: 0;
}
.dish-collapse-body .detail-scroll-box {
  max-height: none;
  overflow: visible;
}
.detail-scroll-box--notes {
  margin-top: 1rem;
  background: #fff8e8;
  border: 1px solid #f2dfa6;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.detail-scroll-box--notes .dish-section-heading {
  color: #9a7b18;
}
.detail-scroll-box--notes .dish-text {
  color: #5c4d20;
}
.dish-text {
  color: #374151;
  line-height: 1.7;
  white-space: pre-wrap;
  margin-bottom: 0;
  font-size: 13px;
}
.legacy-day-notice {
  background: #fff8e1;
  border: 1px solid #f3d48a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.legacy-day-convert-btn {
  margin-left: 8px;
}
.ingredient-list {
  margin: 0;
  padding-left: 1.1rem;
}
.recipe-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: #374151;
  line-height: 1.7;
  font-size: 13px;
}
.ingredient-list li,
.recipe-steps li {
  margin-bottom: 0.3rem;
}
.recipe-steps li:last-child {
  margin-bottom: 0;
}

/* ── Combined Recipe modal ─────────────────────────────────────────────
   Reuses the dish-card visual language (badge icon, section headings,
   dish-text) instead of the old flat gray Tailwind-style boxes. */
#combined-recipe-modal-content {
  display: flex;
  flex-direction: column;
}
.combined-recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.combined-recipe-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.combined-recipe-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ice-1);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.combined-recipe-heading h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-header);
  margin: 0;
}
.combined-recipe-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.combined-recipe-cook-btn {
  font-size: 12.5px;
  font-weight: 800;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.combined-recipe-cook-btn:hover {
  background: #1662c1;
  border-color: #1662c1;
}
.combined-recipe-time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  margin: 0 0 1rem;
}
.combined-recipe-time span {
  color: var(--text-header);
}
.combined-recipe-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}
.combined-recipe-body::-webkit-scrollbar {
  width: 8px;
}
.combined-recipe-body::-webkit-scrollbar-track {
  background: transparent;
}
.combined-recipe-body::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 999px;
}
.combined-ingredients-box {
  background: var(--ice-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
#combined-recipe-content {
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

/* ── Price Breakdown modal ─────────────────────────────────────────────
   Reuses the Combined Recipe modal's header/body chrome (see above). Each
   dish renders as its own receipt-style card: a title/price head, then one
   dotted-leader row per ingredient so every line reads name ⋯⋯⋯ price. */
#price-breakdown-modal-content {
  display: flex;
  flex-direction: column;
}
.price-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.price-breakdown-dish {
  background: var(--ice-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.price-breakdown-dish-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  border-bottom: 1px solid var(--border-subtle);
}
.price-breakdown-dish-title {
  color: var(--text-header);
  font-size: 13.5px;
  font-weight: 800;
}
.price-breakdown-dish-price {
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}
.price-ingredient-list {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0.9rem 0.5rem;
}
.price-ingredient-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.28rem 0;
  font-size: 12.5px;
  color: #374151;
}
.price-ingredient-name {
  flex: 0 1 auto;
}
.price-ingredient-dots {
  flex: 1 1 auto;
  min-width: 8px;
  margin-bottom: 3px;
  border-bottom: 1px dotted var(--border-subtle);
}
.price-ingredient-price {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-ingredient-row--empty {
  color: var(--muted);
  font-style: italic;
}
#price-breakdown-note {
  margin-top: 0.75rem;
}

.detail-empty-state {
  padding: 1.1rem;
  border-radius: 12px;
  background: var(--ice-1);
  border: 1px dashed var(--border-subtle);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-size: 13px;
}

/* Calendar Components */
.meal-load-error {
  color: #b91c1c;
  font-size: 0.85rem;
  font-style: italic;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  text-align: center;
}

.meal-item-in-calendar {
  background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 100%);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.15);
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 100%;
}

.meal-item-in-calendar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27, 111, 216, 0.3);
  border-color: #0d5bb8;
  background: linear-gradient(135deg, #f7faff 0%, #e3efff 100%);
}

.meal-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-header);
  margin-bottom: 0.65rem;
  line-height: 1.3;
}

.meal-card-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

/* Meal Serving Badge */
.meal-serving-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
  border: 1px solid #9b59b6;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.meal-serving-badge.unspecified {
  background: rgba(149, 165, 166, 0.15);
  color: #7f8c8d;
  border: 1px solid #95a5a6;
}

.cook-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid #16a34a;
  white-space: nowrap;
}

/* Admin-only: badge is a button to reassign the cook in place. */
.cook-badge--clickable {
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.cook-badge--clickable:hover {
  background: rgba(22, 163, 74, 0.22);
  box-shadow: 0 1px 5px rgba(22, 163, 74, 0.28);
}

/* Empty "Assign cook" chip shown to admins on meals with no cook. */
.cook-badge--empty {
  background: transparent;
  color: var(--muted);
  border: 1px dashed rgba(107, 124, 147, 0.6);
}
.cook-badge--empty.cook-badge--clickable:hover {
  background: rgba(107, 124, 147, 0.1);
  color: var(--text-main);
  border-color: rgba(107, 124, 147, 0.85);
  box-shadow: none;
}

/* "Shopped for" marker — appears on a card only once the meal is marked as
   having all its ingredients. Same pill shape as .cook-badge, kelly-green
   (--accent-green, the sitewide "done" color) to read distinctly from the
   forest-green cook badge it often sits beside. */
.shopped-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(40, 167, 69, 0.14);
  color: #1e7e34;
  border: 1px solid var(--accent-green);
  white-space: nowrap;
}

/* "Who ate this" marker (family Track Eaters mode) — appears on a card only
   once a subset of the family is picked, since the default is everyone. Same
   pill shape as .cook-badge, indigo so it reads apart from the green cook and
   "shopped" chips it sits beside. */
.eaters-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  border: 1px solid #6366f1;
  white-space: nowrap;
}

/* ── "Who ate this" picker popover (anchored to the meal-detail action) ─────── */
.eaters-popover {
  position: fixed;
  /* Same reasoning as .cook-popover: appended to document.body but anchored
     inside the meal-detail modal (.modal-overlay is z-index 500). */
  z-index: 900;
  min-width: 220px;
  max-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
  animation: cook-popover-in 0.12s ease;
}
.eaters-popover-head {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 6px 8px 4px;
}
.eaters-popover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eaters-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.eaters-popover-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
/* Multi-select, so each row carries a checkbox rather than the cook picker's
   single tick. */
.eaters-popover-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid rgba(107, 124, 147, 0.5);
  font-size: 0.62rem;
  color: #fff;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.eaters-popover-box i {
  opacity: 0;
}
.eaters-popover-item.is-on .eaters-popover-box {
  background: #6366f1;
  border-color: #6366f1;
}
.eaters-popover-item.is-on .eaters-popover-box i {
  opacity: 1;
}
.eaters-popover-item.is-on {
  color: #4338ca;
}
.eaters-popover-avatar,
.eaters-popover-allicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
}
.eaters-popover-allicon {
  background: rgba(107, 124, 147, 0.85);
}
.eaters-popover-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eaters-popover-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 2px;
}
.eaters-popover-note {
  margin: 6px 2px 2px;
  padding: 0 8px;
  font-size: 0.66rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--muted);
}

/* ── Cook reassignment popover (anchored to the badge / Change button) ──────── */
.cook-popover {
  position: fixed;
  /* Must sit above .modal-overlay (z-index: 500); the popover is appended to
     document.body and is anchored to the "Change" button inside the meal-detail
     modal, so a lower value renders it behind the modal. */
  z-index: 900;
  min-width: 180px;
  max-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
  animation: cook-popover-in 0.12s ease;
}
@keyframes cook-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cook-popover-head {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 6px 8px 4px;
}
.cook-popover-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cook-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cook-popover-item:hover {
  background: rgba(27, 111, 216, 0.08);
}
.cook-popover-check {
  display: inline-flex;
  width: 16px;
  justify-content: center;
  color: #16a34a;
  opacity: 0;
}
.cook-popover-item.is-current .cook-popover-check {
  opacity: 1;
}
.cook-popover-item.is-current {
  color: #15803d;
}
.cook-popover-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 2px;
}
.cook-popover-unassign {
  color: var(--muted);
}
.cook-popover-unassign:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}
.cook-popover-unassign .cook-popover-check {
  color: currentColor;
  opacity: 1;
}

/* ── "Who's cooking" control inside the meal-detail modal ───────────────────── */
.cook-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #16a34a;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}
.cook-control-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.cook-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  flex-shrink: 0;
}
.cook-control-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cook-control-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.cook-control-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-header);
}
.cook-control-source {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.cook-control-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Planned-date control (meal detail, list meals only) ──────────────────── */
/* Mirrors the .cook-control banner but uses the accent blue to distinguish it. */
.meal-date-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1rem;
}

.meal-date-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.meal-date-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.meal-date-text {
  display: flex;
  flex-direction: column;
}

.meal-date-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.meal-date-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.meal-date-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.meal-date-input {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-header);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  background: #ffffff;
}

.meal-date-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.18);
}

/* Shopping List Items */
.shopping-item-container {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.75rem;
  background-color: #f9fafb;
}

.shopping-item-container:hover {
  background-color: #f3f4f6;
  border-color: var(--accent);
}

.shopping-item-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.shopping-item-text {
  flex: 1;
  color: #374151;
  word-break: break-word;
}

.shopping-item-container input:checked+.shopping-item-text {
  text-decoration: line-through;
  color: #9ca3af;
}

#shopping-list-view {
  overflow-x: hidden;
}

#shopping-list-panel {
  --sl-bar-inset: 2rem;
  overflow-x: hidden;
  padding-top: 0;
}

#shopping-list-quick-add {
  background-color: white;
}

#shopping-list-items {
  background-color: rgba(249, 250, 251, 0.5);
  padding: 0.75rem;
  border-radius: 8px;
}

/* Calendar Grids */
#main-calendar-grid,
#scheduler-drop-zones {
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

/* "Add to which day?" week grid: seven themed day cards. Cards now preview
   their meals as dish pills (see .day-select-meals below), so columns are
   sized to fit pill content rather than forced into a fixed 7-up row. */
#day-selector-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 0.55rem;
}

@media (max-width: 640px) {
  #day-selector-buttons {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 0.5rem;
  }
  .day-selector-week-label {
    order: -1;
    flex-basis: 100%;
  }
  .day-selector-jump {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  #day-selector-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Main calendar now uses a vertical day-selector layout (days-strip + sections) */
#main-calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  grid-template-columns: none;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   CALENDAR: Days strip (day selector)
   ============================================ */
.days-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.day-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.6rem 0.25rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(11, 45, 80, 0.06);
}

.day-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.day-chip .day-name {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.day-chip .day-num {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.1;
}

.day-chip.is-past:not(.is-selected) {
  opacity: 0.6;
}

.day-chip.today:not(.is-selected) {
  border-color: var(--accent);
}

.day-chip.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(27, 111, 216, 0.28);
}

.day-chip.is-selected .day-name,
.day-chip.is-selected .day-num {
  color: #fff;
}

.day-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
}

.day-chip-dot.has-meals {
  background: var(--accent);
}

.day-chip.is-selected .day-chip-dot.has-meals {
  background: #fff;
}

/* ============================================
   CALENDAR: Section headings + meal grid
   ============================================ */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.section-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-heading-row .section-heading {
  margin: 0;
}

.section-heading-today {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--ice-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.add-meal-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.add-meal-cta:hover {
  opacity: 0.88;
}

.calendar-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
}

.calendar-rest-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.25rem;
}

.meal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
}

/* ============================================
   CALENDAR: Meal card (no image, no tag)
   (.cal-meal-card — distinct from the select-meals .meal-card)
   ============================================ */
.cal-meal-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 45, 80, 0.06);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.cal-meal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 45, 80, 0.14);
  border-color: var(--accent);
}

.cal-meal-card .card-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-day-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}

.cal-meal-card .card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.5rem;
}

.cal-meal-card .card-pills .queue-card-recipe-group {
  width: 100%;
}

.cal-meal-card .card-pills .queue-pill {
  font-size: 11.5px;
  padding: 3px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-meal-card .card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0.65rem;
}

.cal-meal-card .card-meta .meal-serving-badge {
  margin-bottom: 0;
  padding: 3px 9px;
  font-size: 0.72rem;
}

.card-legacy-badge {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  margin: 0 0 0.5rem;
}

.cal-meal-card .card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.cal-meal-card .card-btn {
  flex: 1;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s ease, background 0.15s ease;
  text-align: center;
}

.cal-meal-card .card-btn-cook {
  background: var(--accent);
  color: #fff;
}

.cal-meal-card .card-btn-view {
  background: var(--btn-secondary-bg, #f0f7ff);
  color: var(--text-header);
  border-color: #cfe3f7;
}

.cal-meal-card .card-btn:hover {
  opacity: 0.85;
}

.day-cell {
  background: white;
  min-height: 260px;
  padding: 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s ease;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(11, 45, 80, 0.08);
  min-width: 1px;
}

.day-cell-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.day-add-meal-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #1b6fd8 0%, #0f64cf 100%);
  color: white;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 18px rgba(27, 111, 216, 0.24);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  flex-shrink: 0;
}

.day-add-meal-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 24px rgba(27, 111, 216, 0.3);
  filter: saturate(1.05);
}

.day-add-meal-btn:active {
  transform: translateY(0);
}

.next-week-card {
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  border-style: dashed;
  cursor: pointer;
}

.next-week-card-btn {
  width: 100%;
}

.next-week-card-subtext {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  #main-calendar-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .day-cell {
    min-height: 230px;
    padding: 0.9rem;
  }

}

@media (max-width: 768px) {

  /* Fix header layout on small screens */
  #app-container {
    padding: 1rem;
  }

  /* Move icon buttons below the title instead of overlapping */
  .about-icon-btn,
  .account-icon-btn {
    position: relative;
    right: auto;
    top: auto;
    margin: 0;
  }

  .header-top {
    flex-direction: column;
    gap: 1rem;
  }

  .calendar-title {
    font-size: 1.75rem;
    text-align: center;
  }

  /* Create a button row for info and account buttons */
  .header-top::after {
    content: "";
    display: none;
  }

  /* Add a container for icon buttons below title */
  #app-container {
    position: relative;
  }

  .about-icon-btn {
    position: absolute;
    left: 15px;
    top: 15px;
  }

  .account-icon-btn {
    position: absolute;
    right: 15px;
    top: 15px;
  }

  /* Give more room for the header so buttons don't overlap */
  .calendar-header {
    margin-top: 3rem;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  /* Stack button group vertically with better spacing */
  .button-group {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .button-group button {
    width: 100%;
  }

  /* Week navigation: date on its own row, Prev/Next side by side below */
  .week-navigation {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
  }

  .week-navigation #week-display {
    width: 100%;
    order: -1;
    font-size: 1.125rem;
    text-align: center;
  }

  .week-navigation #prev-week-btn,
  .week-navigation #next-week-btn {
    order: 1;
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  #main-calendar-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .day-cell {
    min-height: 200px;
    padding: 0.7rem;
  }

  .calendar-title {
    font-size: 1.5rem;
  }

  .about-icon-btn,
  .account-icon-btn {
    width: 40px;
    height: 40px;
  }

  .about-icon-btn svg,
  .account-icon-btn svg {
    width: 24px;
    height: 24px;
  }

  .about-icon-btn {
    right: 52px;
    top: 12px;
  }

  .account-icon-btn {
    right: 12px;
    top: 12px;
  }

  .week-display {
    font-size: 1rem;
  }
}

.day-cell.is-today {
  background: linear-gradient(135deg, #e6f1ff 0%, #f0f7ff 100%);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.day-cell:hover {
  background-color: var(--ice-1);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.15);
}

.day-cell.is-today:hover {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 4px 12px rgba(27, 111, 216, 0.15);
}

/* ============================================
   SCHEDULER: Day drop zones
   ============================================ */

.day-drop-zone {
  min-height: 72px;
  padding: 0.5rem;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  background: #fafafa;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  gap: 0.25rem;
  flex: 1;
}

.day-drop-zone:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--ice-1);
}

.day-drop-zone.drag-over {
  border-color: var(--accent);
  border-style: solid;
  background: linear-gradient(135deg, var(--ice-2) 0%, var(--ice-1) 100%);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.15);
  transform: scale(1.03);
}

.day-drop-zone.has-meal {
  border-color: #d1d5db;
  border-style: dashed;
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.65;
}

.day-drop-zone:has(.meal-card-draggable) {
  align-items: flex-start;
  justify-content: flex-start;
  border-style: solid;
  border-color: rgba(27, 111, 216, 0.25);
  background: white;
  padding: 0.375rem;
}

.day-drop-zone:has(.meal-card-draggable) .sched-zone-placeholder,
.day-drop-zone:has(.meal-card-draggable) .sched-zone-label {
  display: none;
}

/* ============================================
   SCHEDULER: Layout & components
   ============================================ */

.schedule-plan-view {
  padding: 1.5rem 0;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--text-header);
  margin-bottom: 0.25rem;
  margin-top: 0;
}

.section-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Scheduler top bar: title + save button */
.sched-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Two-column body */
.sched-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Left: meal list panel */
.sched-meal-panel {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
}

.sched-panel-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.625rem 0;
}

/* Right: calendar panel */
.sched-calendar-panel {
  flex: 1;
  min-width: 0;
}

/* Week blocks */
.sched-week-block {
  margin-bottom: 1.75rem;
}

.sched-week-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-subtle);
}

.sched-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

/* Day column */
.sched-day-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sched-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sched-day-name {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.sched-day-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.1;
}

/* Zone placeholder & labels */
.sched-zone-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px dashed #d1d5db;
  transition: border-color 0.2s ease;
}

.day-drop-zone:hover .sched-zone-placeholder {
  border-color: var(--accent);
}

.sched-zone-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1.3;
}

.sched-zone-readonly {
  color: #92400e;
  background: #fef3c7;
}

.sched-zone-existing {
  color: var(--accent);
  background: rgba(27, 111, 216, 0.1);
}

/* Save plan button */
.sched-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--accent-green);
  color: white;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.sched-save-btn:hover {
  background: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

.sched-save-btn:active {
  transform: translateY(0);
}

/* Scheduler responsive */
@media (max-width: 900px) {
  .sched-week-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .sched-body {
    flex-direction: column;
  }

  .sched-meal-panel {
    width: 100%;
    position: static;
    max-height: none;
  }

  #scheduler-meal-pen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  #scheduler-meal-pen .meal-card-draggable {
    margin-bottom: 0;
  }

  .sched-week-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .sched-week-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.col-span-full {
  grid-column: 1 / -1;
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.25s ease;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary Blue Buttons */
.bg-primary-blue,
#done-editing-btn,
#start-btn,
#fridge-add-btn,
#shopping-list-add-btn {
  background-color: var(--accent);
  color: white;
}

.bg-primary-blue:hover,
#done-editing-btn:hover,
#start-btn:hover,
#fridge-add-btn:hover,
#shopping-list-add-btn:hover {
  background-color: #3787ff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.3);
}

/* Secondary Green Buttons */
.bg-secondary-green,
#continue-to-schedule-btn,
#save-diet-btn {
  background-color: var(--accent-green);
  color: white;
}

.bg-secondary-green:hover,
#continue-to-schedule-btn:hover,
#save-diet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Featured Button (Your Meals) */
.featured-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  color: white;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 22px;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
  position: relative;
  overflow: hidden;
}

.featured-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.5s ease;
}

.featured-btn:hover::before {
  left: 100%;
}

.featured-btn:hover {
  background: linear-gradient(135deg, #ff8e53 0%, #ff6b6b 100%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.45);
}

.featured-btn:active {
  transform: translateY(-1px) scale(1.02);
}

.featured-btn svg {
  flex-shrink: 0;
}

/* Featured Button Alt (Create New Plan) */
.featured-btn-alt {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  color: white;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 22px;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.35);
  position: relative;
  overflow: hidden;
}

.featured-btn-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: left 0.5s ease;
}

.featured-btn-alt:hover::before {
  left: 100%;
}

.featured-btn-alt:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.45);
}

.featured-btn-alt:active {
  transform: translateY(-1px) scale(1.02);
}

.featured-btn-alt svg {
  flex-shrink: 0;
}

/* Ghost / Secondary Buttons */
.bg-gray-200,
.bg-gray-300,
#cancel-create-btn,
#close-preferences-btn,
#view-your-meals-btn,
#view-diet-btn,
#view-fridge-btn,
#view-shopping-list-btn,
#view-favorites-btn,
#edit-plan-btn,
#calendar-view-toggle-btn,
#prev-week-btn,
#next-week-btn,
.next-week-card-btn {
  background-color: #f5f5f5;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.bg-gray-200:hover,
.bg-gray-300:hover,
#view-your-meals-btn:hover,
#view-diet-btn:hover,
#view-fridge-btn:hover,
#view-shopping-list-btn:hover,
#view-favorites-btn:hover,
#edit-plan-btn:hover,
#calendar-view-toggle-btn:hover,
#prev-week-btn:hover,
#next-week-btn:hover,
.next-week-card-btn:hover {
  background-color: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.3);
}

/* Inputs */
input,
textarea,
select {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--text-main);
}

/* FIX: Checkbox Sizing 
   Prevents checkboxes from stretching 100% width causing layout gaps 
*/
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0;
  /* Reset the text-input padding/transition inherited from the rule above.
     Without this, checkboxes pick up padding:14px + transition:all, and the
     focus ring below animates in over 0.25s — a visible "spasm" on click. */
  padding: 0;
  transition: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.1);
}

/* Native checkboxes/radios don't need the text-input focus ring. */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  border-color: initial;
  box-shadow: none;
}

#time-per-day:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#any-time-btn {
  height: 2.65rem;
  padding: 0 1.1rem;
  background-color: #e6f1ff;
  color: var(--text-header, #083463);
  border: 2px solid var(--accent, #1b6fd8);
  border-radius: var(--control-radius, 10px);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color 260ms ease,
    color 260ms ease,
    border-color 260ms ease,
    box-shadow 360ms ease,
    transform 420ms cubic-bezier(0.18, 0.9, 0.2, 1) !important;
  transform-origin: center;
  will-change: transform;
}

#any-time-btn.active {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  transform: scale(1.08);
}

@keyframes any-time-lux-expand {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

#any-time-btn.is-expanding {
  animation: any-time-lux-expand 560ms cubic-bezier(0.22, 0.7, 0.18, 1);
}

@keyframes any-time-lux-contract {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

#any-time-btn.is-contracting {
  animation: any-time-lux-contract 360ms cubic-bezier(0.25, 0.7, 0.2, 1);
}

/* --- 6. MODAL SYSTEM --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 500;
  /* Safety net: if a popup is ever taller than the visible screen, let the
     overlay scroll instead of clipping the popup's top and bottom edges
     (flex centering clips both sides when the child overflows). */
  overflow-y: auto;
  /* Leaving overflow-x unset computes it to auto (same rule as the
     .modal-content comment below), which would let this backdrop itself
     become a second horizontally-scrollable layer around every popup. */
  overflow-x: hidden;
}

.modal-overlay > .modal-content,
.modal-overlay > .modal-content-box {
  margin-top: auto;
  margin-bottom: auto;
}

/* A modal opened from within another already-open modal (e.g. the "Add
   Meals" picker launched from Create Meal Poll) reuses the existing dark
   backdrop instead of stacking a second one on top of it. */
.modal-overlay-bare {
  background-color: transparent;
  backdrop-filter: none;
}

/* Z-Index helpers for modals */
.z-50 {
  z-index: 500 !important;
}

.z-60 {
  z-index: 600 !important;
}

.z-70 {
  z-index: 700 !important;
}

.z-80 {
  z-index: 800 !important;
}

/* FIX: Missing z-index for generated shopping lists */
.z-90 {
  z-index: 900 !important;
}

/* The global alert modal must sit above runtime-built overlays
   (poll/confirm/prompt modals use inline z-index: 9999) so its
   validation messages aren't hidden behind them. */
#alert-modal {
  z-index: 10000 !important;
}

.hidden {
  display: none !important;
}

/* Modal Content Box */
[id$="-modal-content"],
.modal-content-box,
.modal-content {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 650px;
  height: var(--popup-height-default);
  max-height: var(--popup-height-default);
  overflow-y: auto;
  /* Leaving overflow-x unset makes it compute to `auto` (per spec, whenever
     one axis is non-visible the other stops being `visible` too), which
     turns any horizontal bleed — like the type=date WebKit overflow bug
     below — into an actual horizontally-scrollable modal on iOS. Pin it to
     hidden so bleed gets clipped instead of becoming a scroll gesture. */
  overflow-x: hidden;
  /* Belt-and-suspenders (see .log-food-body): iOS's focus-scroll behavior
     can still nudge a container sideways when it mismeasures a date field's
     width, even with overflow-x hidden. Block the sideways swipe outright. */
  touch-action: pan-y;
  box-shadow: var(--shadow-modal);
  transform: scale(1);
  opacity: 1;
  transition:
    transform 150ms ease-out,
    opacity 150ms ease-out;
}

.modal-content.hidden {
  transform: scale(0.95);
  opacity: 0;
}

#preferences-modal-content {
  height: auto;
  max-height: min(88vh, 640px);
}

/* Daily goals modal: it inherited the generic .medium box's fixed height
   and uniform 2.5rem padding, leaving a huge empty margin on every side
   around its short form. Let the header sit flush and the form own its
   padding, with the box fitting its content up to the medium cap. */
#nutrition-goals-modal-content {
  padding: 0;
  height: auto;
  max-height: var(--popup-height-medium);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Time-per-meal row: input + "Any Time" toggle sitting on one line. */
.pref-time-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pref-time-row .form-input {
  flex: 1;
  min-width: 0;
}

.modal-content.large {
  max-width: 42rem;
  height: var(--popup-height-large);
  max-height: var(--popup-height-large);
}

.modal-content.medium {
  max-width: 28rem;
  height: var(--popup-height-medium);
  max-height: var(--popup-height-medium);
}

.modal-content.compact {
  height: auto;
  min-height: 0;
  max-height: min(55vh, 420px);
  position: relative;
}

.modal-content.compact .event-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
}

/* Shared bits for small single-purpose forms inside a .compact modal
   (Create Event, Join Event, New Meal, etc.) */
.modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-section .form-input {
  width: 100%;
}

.modal-error {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.6rem 0 0;
}

.modal-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.modal-code-input {
  height: 3.2rem;
  text-align: center;
  font-size: 1.5rem;
  font-family: "Courier New", monospace;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Log food modal (and the Repeating Meal modal, which shares this shell):
   they pair a flush divider .modal-header with a body, so they shouldn't
   inherit the generic box's uniform 2.5rem padding (which pushed the header
   down and inset its divider). Let the header sit flush and the body own its
   padding. Height is auto (capped at the large max) by default so the
   manual/label/photo tabs and the review form shrink to fit their content
   instead of leaving dead whitespace below. Only while the "From my
   library" list is being browsed does .log-food-modal-tall force the fixed
   large height, so that list's .nutri-capture-panel-fill has room to grow
   into instead of the popup collapsing around a short/filtered list. */
#log-food-modal-content,
#repeating-meal-modal-content {
  padding: 0;
  height: auto;
  max-height: var(--popup-height-large);
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

#log-food-modal-content.log-food-modal-tall,
#repeating-meal-modal-content.log-food-modal-tall {
  height: var(--popup-height-large);
}

#log-food-modal-content .log-food-body,
#repeating-meal-modal-content .log-food-body,
#nutrition-goals-modal-content .log-food-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Same type=date WebKit overflow bug as the .modal-content comment below:
     leaving overflow-x unset here computes it to auto (since overflow-y is
     non-visible), which turned the Date field's iOS bleed into a real
     horizontally-scrollable popup body instead of clipping it. */
  overflow-x: hidden;
  /* Belt-and-suspenders: even with overflow-x hidden, iOS's own "scroll the
     focused input into view" behavior can still nudge scroll position when
     it mismeasures a date input's width. touch-action blocks the user's own
     sideways swipe outright, regardless of what triggers the bleed. */
  touch-action: pan-y;
}

/* "From my library" picker: let the search row keep its natural size and the
   list itself grow to fill whatever space is left, so a short list still
   fills the fixed-height popup instead of leaving dead space below it. */
.nutri-capture-panel-fill {
  flex: 1;
  min-height: 0;
}

/* .picker-list already flexes to fill (it's built for the standalone
   .picker-modal shell), but nested here inside another flex column it also
   needs min-height: 0 or its default auto min-height stops it from
   shrinking, so it overflows the fixed-height popup instead of scrolling. */
.nutri-capture-panel-fill .picker-list {
  min-height: 0;
}

/* These two modals strip the search row's own 16px gutter (their body already
   pads), so the shared filter dropdown's matching `right: 16px` leaves it
   floating inboard of the filter button it belongs to. Flush it to the row. */
#log-food-modal .nutri-capture-panel-fill .picker-filter-panel,
#repeating-meal-modal .nutri-capture-panel-fill .picker-filter-panel {
  right: 0;
  width: min(320px, 100%);
}

/* Shared pinned footer for Log Food, Repeating Meal, and Daily Goals: sits
   outside the scrollable .log-food-body, with its submit button wired via
   `form="..."` back to the form inside, so Cancel/Save stay visible no
   matter how far the body scrolls. */
.nutri-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}

/* Meal submissions modal shell (request / pick / review) */
.modal-sheet {
  width: min(620px, 94vw);
  height: var(--popup-height-sheet);
  max-height: var(--popup-height-sheet);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.6),
    0 8px 24px -12px rgba(15, 23, 42, 0.35);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.9rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.82);
}

.modal-header .modal-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
}

.modal-body {
  padding: 1rem;
  overflow-y: auto;
}

.modal-close-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #dbe3ee;
  border-radius: 9999px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.modal-close-btn:hover {
  color: #0f172a;
  border-color: #c5d2e3;
  background: #f8fafc;
}

.modal-close-btn:focus-visible {
  outline: 2px solid #1b6fd8;
  outline-offset: 1px;
}

.form-label {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #334155;
}

/* .form-input now lives in global.css (single source of truth). */

#meal-pick-scope-tabs {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

#meal-pick-list {
  background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
}

#meal-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#meal-request-review-modal .modal-sheet {
  max-width: 580px;
}

#meal-request-review-modal .modal-body {
  flex: 1;
  min-height: 0;
}

#meal-request-modal .modal-sheet {
  height: auto;
  max-height: min(72vh, 460px);
}

/* Send Link / Send Request labels wrap to two lines on narrow screens while
   Cancel stays on one — stretch the row so Cancel matches their height
   instead of sitting short next to them. */
#meal-request-modal .form-dialog-foot {
  align-items: stretch;
}
#meal-request-modal .form-dialog-foot button {
  text-align: center;
}

#meal-request-response-modal .modal-sheet,
#meal-request-review-modal .modal-sheet {
  height: min(86vh, 760px);
  max-height: min(86vh, 760px);
}

@media (max-width: 640px) {
  .modal-overlay {
    padding: 0.6rem;
  }

  [id$="-modal-content"],
  .modal-content-box,
  .modal-content {
    height: min(86vh, 760px);
    max-height: min(86vh, 760px);
  }

  .modal-content.medium {
    height: min(64vh, 460px);
    max-height: min(64vh, 460px);
  }

  .modal-content.large {
    height: min(90vh, 860px);
    max-height: min(90vh, 860px);
  }

  .picker-modal {
    height: min(86vh, 760px);
    max-height: min(86vh, 760px);
  }

  .modal-sheet {
    width: 100%;
    height: min(86vh, 760px);
    max-height: min(86vh, 760px);
    border-radius: 14px;
  }

  /* dvh re-declare: the vh values above measure the LARGE viewport (as if
     the browser's address bar were hidden), so on mobile they run taller
     than what's actually visible and the popup's bottom gets cut off.
     dvh tracks the real visible viewport — see the :root popup-height note. */
  @supports (height: 100dvh) {
    [id$="-modal-content"],
    .modal-content-box,
    .modal-content {
      height: min(86dvh, 760px);
      max-height: min(86dvh, 760px);
    }

    .modal-content.medium {
      height: min(64dvh, 460px);
      max-height: min(64dvh, 460px);
    }

    .modal-content.large {
      height: min(90dvh, 860px);
      max-height: min(90dvh, 860px);
    }

    .picker-modal {
      height: min(86dvh, 760px);
      max-height: min(86dvh, 760px);
    }

    .modal-sheet {
      height: min(86dvh, 760px);
      max-height: min(86dvh, 760px);
    }
  }

  #meal-request-modal .modal-sheet {
    height: auto;
    max-height: min(76vh, 480px);
  }

  .modal-header {
    padding: 0.85rem 0.85rem 0.75rem;
  }

  .modal-body {
    padding: 0.85rem;
  }

  .modal-header .modal-title {
    font-size: 1.06rem;
  }

  /* Meal-detail sticky header: header-primary sizes to its real content
     (see base rule) so the wrap decision is accurate; Scale-all naturally
     drops to its own row once both no longer fit side by side. Close shrinks
     to an icon-only button here so more of the narrow row is left for the
     dots/date/cook content it needs to reserve space for. Right padding
     covers Close + Actions, both icon-only circles here. */
  .meal-detail-header {
    padding: 0.6rem 4.6rem 0.6rem 0.75rem;
    gap: 0.35rem 0.5rem;
  }
  .meal-detail-header-primary {
    gap: 0.35rem;
  }
  .meal-detail-scale-wrap {
    flex-basis: 100%;
  }
  .meal-detail-header-primary .cook-control-name {
    max-width: 42px;
  }
  .meal-date-static-label {
    max-width: 50px;
  }
  /* !important: .btn-x (global.css, loaded after plan.css) sets its own
     padding/font-size at equal selector specificity, so plain overrides here
     lose the cascade tie on load order alone. */
  .meal-detail-close-btn {
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .meal-detail-close-label {
    display: none;
  }
  /* Must match the base rule's specificity (.meal-detail-close-btn
     .meal-detail-close-icon) — a plain .meal-detail-close-icon selector here
     would always lose to that more specific, unconditional base rule. */
  .meal-detail-close-btn .meal-detail-close-icon {
    display: inline;
    font-size: 13px;
  }
}

/* Extra-narrow phones (iPhone 5/SE-1 width and similar, ~320px): the primary
   row's content needs to shrink a bit further still to clear the Close
   button reserved space without ever wrapping. */
@media (max-width: 340px) {
  .meal-detail-header-primary {
    gap: 0.25rem;
  }
  .meal-detail-header-primary .cook-control,
  .meal-detail-header-primary .meal-date-control {
    padding: 0 0.4rem 0 0.35rem;
  }
  .meal-detail-header-primary .cook-control-icon {
    display: none;
  }
}

/* Alert Popup — mirrors the Nutrition tab card look */
.alert-modal-content {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  box-shadow: 0 24px 60px rgba(8, 52, 99, 0.18);
}

#alert-modal-content {
  height: auto;
  max-height: min(44vh, 340px);
  overflow-y: auto;
}

.alert-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alert-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #1b6fd8);
  background: rgba(27, 111, 216, 0.1);
  box-shadow: inset 0 0 0 1px rgba(27, 111, 216, 0.12);
}

.alert-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.alert-message {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-header, #083463);
  line-height: 1.55;
  margin: 0;
}

/* === PICKER MODAL UNIFIED STYLES ===
   Shared by the Shopping List's inline "Add from Library" panel AND the
   Add Main Dish / Add Side Dish popups. The scoped block further down
   (#main-dish-picker-overlay / #library-side-picker-modal) re-themes the
   filter button + dropdown for just those two popups so the Shopping List
   panel's existing accordion-style filter is left untouched. */

/* Main container for picker modals */
.picker-modal {
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  height: var(--popup-height-picker);
  max-height: var(--popup-height-picker);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-modal, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}

/* Header: title + close button */
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.picker-title-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.picker-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent);
}

.picker-title-icon--side {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.picker-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-header);
  margin: 0;
}

/* Header action button (e.g. "Suggest Sides" in the Add Side Dish picker) */
.picker-header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  background: #fff;
  color: var(--accent);
  border: 1px solid rgba(27, 111, 216, 0.35);
  white-space: nowrap;
}

.picker-header-action:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.picker-header-action--side {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
}

.picker-header-action--side:hover {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

/* Search + Filter row */
.picker-search-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  align-items: stretch;
  position: relative;
}

.picker-search {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Cancel the global `input { margin-bottom: 0.5rem }` reset — in
     .picker-search-row the filter button's align-self: stretch masks it,
     but .picker-custom-row uses align-items: center, where the stray
     bottom margin throws the input out of line with the Add button. */
  margin: 0;
}

.picker-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

/* Filter toggle button (Shopping List's text+icon variant) */
.picker-filter-btn {
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid #d7e1ee;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-header);
  font-size: 0.9rem;
  transition: all 0.18s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 6px;
}

.picker-filter-btn:hover {
  border-color: var(--accent);
  background: #f0f4ff;
}

.picker-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Collapsible filter panel (Shopping List's inline accordion variant) */
.picker-filter-panel {
  background: #f7fbff;
  border-bottom: 1px solid var(--border-subtle);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.picker-filter-panel.is-open {
  max-height: 1000px;
  overflow: hidden;
  padding: 12px 16px;
}

.picker-filter-group {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

.picker-filter-group:last-child {
  margin-bottom: 0;
}

.picker-filter-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

/* Scope buttons (All / Favorites) */
.picker-scope-btns {
  display: flex;
  gap: 6px;
}

.picker-scope-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.18s ease;
  text-align: center;
}

.picker-scope-btn:hover {
  border-color: var(--accent);
  background: #f0f4ff;
}

.picker-scope-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Numeric filters grid (Max Calories, Max Time) */
.picker-numeric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.picker-numeric-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.picker-numeric-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  display: block;
}

.picker-numeric-input {
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text-main);
}

.picker-numeric-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

/* Advanced Filters (Folder + Tags) — spliced into picker filter panels when
   the account "Advanced Filters" setting is on. Fully self-contained: the
   .tag-filter-* classes in library.css are scoped under .lib-scope (the
   embedded Library tab) and never reach these picker popups, so every rule
   needed to make the tag row look finished lives here instead. */
.picker-folder-select {
  width: 100%;
  cursor: pointer;
}

[data-adv-filter-group] .adv-tag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

[data-adv-filter-group] .adv-tag-head .picker-filter-group-label {
  margin-bottom: 0;
}

[data-adv-filter-group] .tag-filter-mode-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  padding: 3px;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
}

[data-adv-filter-group] .tag-filter-mode-btn {
  padding: 3px 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-adv-filter-group] .tag-filter-mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.25);
}

[data-adv-filter-group] .tag-filter-mode-btn:hover:not(.active) {
  color: var(--accent);
}

/* Tag pills: select-multiple via toggle. Wraps to rows but is capped at
   ~2 rows tall so a big tag library doesn't blow out the panel — the rest
   scrolls vertically instead. */
[data-adv-filter-group] .tag-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  max-height: 64px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
}

[data-adv-filter-group] .tag-filter-buttons::-webkit-scrollbar {
  width: 6px;
}

[data-adv-filter-group] .tag-filter-buttons::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}

[data-adv-filter-group] .tag-filter-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  opacity: 0.55;
}

[data-adv-filter-group] .tag-filter-pill.active {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

[data-adv-filter-group] .tag-filter-pill:hover {
  opacity: 0.8;
}

[data-adv-filter-group] .tag-filter-pill.active:hover {
  opacity: 1;
}

/* Items container - scrollable list */
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
  padding: 12px 16px;
  flex: 1;
}

/* Individual item row — themed like the meal-detail .detail-dish-card:
   colored left edge (blue = main, green = side), whole row is a selection
   toggle (checkbox indicator on the left) instead of a per-item Add button. */
.picker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  cursor: pointer;
  /* Some pickers build rows as <div role="button">, others as real <button>s,
     which inherit the UA's centered text and knock the title/meta out of line
     with every other picker. Pin the alignment on the shared row instead. */
  text-align: left;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.picker-item--main {
  border-left-color: var(--accent);
}

.picker-item--side {
  border-left-color: #22c55e;
}

.picker-item:hover {
  box-shadow: 0 8px 20px rgba(8, 52, 99, 0.1);
  transform: translateY(-1px);
}

.picker-item.is-selected {
  border-color: var(--accent);
  background: var(--ice-1);
}

.picker-item--side.is-selected {
  border-color: #22c55e;
  background: #f0fdf4;
}

.picker-item.is-added {
  cursor: default;
  opacity: 0.6;
}

.picker-item.is-added:hover {
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transform: none;
}

/* Cap reached: this row isn't picked, but selecting it would exceed the
   meal's main/side limit, so it's inert until something else is deselected. */
.picker-item.is-limit-reached {
  cursor: not-allowed;
  opacity: 0.45;
}

.picker-item.is-limit-reached:hover {
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transform: none;
}

/* Checkbox-style selection indicator */
.picker-item-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #c7d6ea;
  background: #fff;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  transition: all 0.18s ease;
}

.picker-item.is-selected .picker-item-check {
  background: var(--accent);
  border-color: var(--accent);
}

.picker-item--side.is-selected .picker-item-check {
  background: #22c55e;
  border-color: #22c55e;
}

.picker-item.is-added .picker-item-check {
  border-color: #d1d5db;
  background: #f3f4f6;
}

/* Item info (name, meta) */
.picker-item-info {
  flex: 1;
  min-width: 0;
}

.picker-item-title {
  margin: 0;
  font-weight: 800;
  color: var(--text-header);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-item-meta {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-item-added-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Single-select variant (Log Food / Repeating Meal "From library"): tapping a
   row picks that dish outright, so the multi-select checkbox would lie. Lead
   with the dish-type icon tile used in .picker-title-icon and close with a
   chevron, keeping the row anatomy of the multi-select pickers. */
.picker-item--pick {
  width: 100%;
}

.picker-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent);
}

.picker-item--side .picker-item-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.picker-item-go {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: #c7d6ea;
  transition: color 0.18s ease, transform 0.18s ease;
}

.picker-item--pick:hover .picker-item-go {
  color: var(--accent);
  transform: translateX(2px);
}

.picker-item--side.picker-item--pick:hover .picker-item-go {
  color: #16a34a;
}

/* Add button (legacy single-item variant, still used by other pickers) */
.picker-add-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* Main dish variant - blue */
.picker-add-btn--main {
  background: #3b82f6;
  color: white;
}

.picker-add-btn--main:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* Side dish variant - green */
.picker-add-btn--side {
  background: #22c55e;
  color: white;
}

.picker-add-btn--side:hover {
  background: #16a34a;
  transform: scale(1.05);
}

/* Empty state message */
.picker-empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Sticky footer for the multi-select popups: live selection count + a single
   batch "Add Selected" button (replaces per-item Add buttons). */
.picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: #fff;
  flex-shrink: 0;
}

.picker-selected-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.picker-add-selected-btn {
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
}

.picker-add-selected-btn--main {
  background: var(--accent);
}

.picker-add-selected-btn--main:hover:not(:disabled) {
  background: #0f64cf;
}

.picker-add-selected-btn--side {
  background: #22c55e;
}

.picker-add-selected-btn--side:hover:not(:disabled) {
  background: #16a34a;
}

.picker-add-selected-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

.picker-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.picker-footer-cancel-btn {
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}

/* ── Add Main Dish / Add Side Dish / Shopping List library picker: Library-style
   icon-only filter "logo" + floating filter dropdown (mirrors Library's
   #filter-toggle-btn / #filter-panel). Scoped by container id. ── */
/* The Log Food / Repeating Meal modal bodies already supply horizontal
   padding, so strip the search/filter row's own inset + top gap to flush it
   with the method tabs above it (other pickers own their full-bleed width,
   so they need it). Same reasoning covers .picker-list's own gutter. */
#log-food-modal .picker-search-row,
#repeating-meal-modal .picker-search-row {
  padding: 0 0 12px;
}

#log-food-modal .picker-list,
#repeating-meal-modal .picker-list {
  padding: 0;
}

#main-dish-picker-overlay .picker-filter-btn,
#library-side-picker-modal .picker-filter-btn,
#poll-picker-overlay .picker-filter-btn,
#shopping-list-panel .picker-filter-btn,
#log-food-modal .picker-filter-btn,
#repeating-meal-modal .picker-filter-btn,
#meal-request-response-modal .picker-filter-btn,
#friend-dish-picker-modal .picker-filter-btn,
.pb-filter-row .picker-filter-btn {
  width: 42px;
  padding: 0;
  gap: 0;
  align-self: auto;
  font-size: 15px;
  justify-content: center;
}

#main-dish-picker-overlay .picker-filter-btn span,
#library-side-picker-modal .picker-filter-btn span,
#poll-picker-overlay .picker-filter-btn span,
#shopping-list-panel .picker-filter-btn span,
#log-food-modal .picker-filter-btn span,
#repeating-meal-modal .picker-filter-btn span,
#meal-request-response-modal .picker-filter-btn span,
#friend-dish-picker-modal .picker-filter-btn span,
.pb-filter-row .picker-filter-btn span {
  display: none;
}

#main-dish-picker-overlay .picker-filter-panel,
#library-side-picker-modal .picker-filter-panel,
#poll-picker-overlay .picker-filter-panel,
#shopping-list-panel .picker-filter-panel,
#log-food-modal .picker-filter-panel,
#repeating-meal-modal .picker-filter-panel,
#meal-request-response-modal .picker-filter-panel,
#friend-dish-picker-modal .picker-filter-panel,
.pb-filter-row .picker-filter-panel {
  /* Positioned + sized by openFloatingFilterPanel() in advanced-filters.js
     (top/left/max-height set inline) rather than CSS top/right — fixed so it
     can float clear of whichever modal box it's anchored to instead of being
     clipped at that box's edge when the box is shorter than the panel. */
  position: fixed;
  width: min(320px, calc(100% - 32px));
  z-index: 20;
  max-height: none;
  overflow: visible;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  box-shadow: var(--shadow-modal, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

#main-dish-picker-overlay .picker-filter-panel.is-open,
#library-side-picker-modal .picker-filter-panel.is-open,
#poll-picker-overlay .picker-filter-panel.is-open,
#shopping-list-panel .picker-filter-panel.is-open,
#log-food-modal .picker-filter-panel.is-open,
#repeating-meal-modal .picker-filter-panel.is-open,
#meal-request-response-modal .picker-filter-panel.is-open,
#friend-dish-picker-modal .picker-filter-panel.is-open,
.pb-filter-row .picker-filter-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  padding: 12px;
}

#main-dish-picker-overlay .picker-filter-panel::before,
#library-side-picker-modal .picker-filter-panel::before,
#poll-picker-overlay .picker-filter-panel::before,
#shopping-list-panel .picker-filter-panel::before,
#log-food-modal .picker-filter-panel::before,
#repeating-meal-modal .picker-filter-panel::before,
#meal-request-response-modal .picker-filter-panel::before,
#friend-dish-picker-modal .picker-filter-panel::before,
.pb-filter-row .picker-filter-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}

/* ── "Add Meals" picker custom-meal row (poll-controller.js openMealPicker):
   text input + Add button for typing a meal that isn't in the library,
   sitting below the .picker-list inside the shared .picker-modal shell. ── */
.picker-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  flex-shrink: 0;
}

.picker-custom-row .picker-search {
  flex: 1;
}

.picker-custom-add-btn {
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid #d7e1ee;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-header);
  font-size: 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.picker-custom-add-btn:hover {
  border-color: var(--accent);
  background: #f0f4ff;
}

/* ── Suggest Sides Modals ────────────────────────────────────────────────── */
/* Shares the .form-dialog shell (gradient card, flush header divider, footer
   bar) used by New Meal / Create Event / Create Meal Poll, just capped to
   this content's shorter height instead of the shell's default 660px. */
#suggest-sides-ingredients-modal-content {
  max-height: min(72vh, 520px);
}

#gen-side-modal-content {
  max-height: min(76vh, 580px);
}

/* The results dialog scrolls inside .ss-results-list only, so the header and
   footer stay pinned while a long list of suggestions scrolls between them. */
#gen-side-modal-content .form-dialog-body {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* Suggested Side Dishes footer mirrors the "Add Side Dish" library picker's
   .picker-footer: live selection count on the left, actions on the right —
   instead of the generic .form-dialog-foot's flex-end run of buttons. Needs
   the doubled-up selector to outrank .form-dialog-foot's own justify-content,
   which is declared later in this file at the same specificity. */
.form-dialog-foot.gen-side-foot {
  justify-content: space-between;
}

.ss-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2.5rem 1rem;
}

.ss-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.04);
}

#ingredients-input-section {
  transition: opacity 0.15s ease;
}

#ingredients-input-section.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ss-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  padding: 0.4rem 0 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Ingredient chips reuse the app's established green-pill treatment
   (same values as .cook-control-actions .dish-action-btn) instead of an
   unrelated emerald palette. */
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: #15803d;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  line-height: 1;
}

.ss-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #15803d;
  cursor: pointer;
  border: none;
  background: rgba(21, 128, 61, 0.14);
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}

.ss-chip-remove:hover {
  background: #dc2626;
  color: #fff;
}

.ss-chips-empty {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  align-self: center;
}

.ss-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ss-add-row .form-input {
  flex: 1;
  margin: 0;
  width: auto;
}

/* Results list */
.ss-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.alert-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.alert-action-btn {
  background: var(--accent, #1b6fd8);
  color: #fff;
  border: none;
  padding: 0.6rem 1.6rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.alert-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(27, 111, 216, 0.32);
}

.modal-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--text-header);
  margin-bottom: 1.5rem;
}

.modal-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  flex-shrink: 0;
}

.modal-footer button {
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* (Meal-detail layout / header / pills styles now live in the card-first block
   above — the older overrides here were removed to avoid conflicts.) */

/* ── "Add to which day?" day picker ─────────────────────────────────────────
   Themed week view: header, week nav + jump-to-date, and a grid of day cards
   that preview the meals already scheduled on each day. */
.day-selector-modal-content {
  padding: 1.75rem;
}

/* Content is a short info strip + one week of day cards — nowhere near the
   generic .large box's 820px height, which left a large empty gap below the
   grid. Fit the box to its content instead (mirrors #log-food-modal-content /
   #nutrition-goals-modal-content). */
#day-selector-modal-content {
  height: auto;
  max-height: var(--popup-height-large);
}

.day-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.day-selector-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.1;
}

/* Context strip: mirrors the tinted info-bar look used on the Nutrition tab
   and the library's Add To Calendar picker instead of plain muted text. */
.day-selector-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  background: rgba(27, 111, 216, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 0 1.1rem;
}

.day-selector-sub i {
  color: var(--accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Step card surface (mirrors .add-cal-step-section / .nutri-card): white
   background, subtle border, soft navy-tinted shadow. */
.day-selector-step-section {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.day-selector-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 12px;
}

.day-selector-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.3);
}

.day-selector-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.day-selector-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: rgba(27, 111, 216, 0.07);
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.day-selector-nav-btn:hover {
  background: var(--accent);
  color: #fff;
}

.day-selector-week-label {
  flex: 1;
  min-width: 140px;
  text-align: center;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--text-header);
}

.day-selector-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-subtle);
  background: var(--ice-1);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

.day-selector-jump-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.day-selector-jump-input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
}

.day-selector-jump-input:focus {
  outline: none;
}

/* Day cards: date on top, a preview of that day's meals below rendered as
   dish pills (mains blue, sides green — same .queue-pill used on the queue
   cards), sized down to fit the compact card. */
.day-select-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  min-height: 82px;
  padding: 0.6rem 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(11, 45, 80, 0.06);
}

.day-select-card:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.day-select-card .day-select-btn-date {
  align-self: stretch;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--text-header);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-subtle);
}

.day-select-meals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.day-select-meal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Shrink the shared queue pills to fit the compact day card; long dish names
   ellipsize instead of overflowing the narrow column. */
.day-select-card .queue-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.day-select-btn-more {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--muted);
}

/* "+N" pill appended when a meal has more dishes than fit in the card. */
.day-select-card .queue-pill.day-select-pill-more {
  background: var(--btn-secondary-bg, #f1f5f9);
  color: var(--muted, #6b7280);
}

.day-select-btn-empty {
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  color: var(--muted);
  opacity: 0.7;
}

.day-select-card.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.day-select-card.is-family:not(.is-full) {
  border-color: var(--accent-green);
}
.day-select-card.is-family:not(.is-full):hover {
  border-color: var(--accent-green);
}

.day-select-card.is-jump-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ice-3);
}

.day-select-card.is-full,
.day-select-card:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.day-select-card.is-origin {
  border-color: var(--accent-green);
  background: var(--ice-1);
  opacity: 0.85;
}
.day-select-card.is-origin .day-select-btn-date {
  color: var(--accent-green);
}

/* Meal-detail responsive tweaks (base styles live in the card-first block). */
@media (max-width: 720px) {
  /* Recipe expansion stacks to a single column. */
  .detail-card-columns {
    grid-template-columns: 1fr;
  }
}

/* --- Meal of the Week --- */
.motw-modal {
  max-width: 860px;
  padding: 0;
  overflow-x: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid rgba(27, 111, 216, 0.12);
}

.motw-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 1rem 1.5rem 0.75rem;
  margin: 0 0 1rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
}

#meal-of-week-loading,
#meal-of-week-content,
#meal-of-week-error {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
}

.motw-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
  font-weight: 700;
}

.motw-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-header);
  margin: 0;
}


.motw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 0;
  color: var(--muted);
  font-weight: 600;
}

.motw-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid var(--accent);
  border-top-color: #ffffff;
  animation: spin 0.85s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.motw-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1b6fd8 0%, #1559b0 100%);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 16px 34px rgba(11, 45, 80, 0.18);
  margin-bottom: 1.5rem;
  color: #fff;
}

.motw-hero::after {
  content: "\f2e7"; /* fa-bowl-food */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1rem;
  bottom: -0.6rem;
  font-size: 4.5rem;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.motw-hero h4 {
  position: relative;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.3rem;
  color: #fff;
}

.motw-hero p {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

.motw-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 12px 24px rgba(11, 45, 80, 0.08);
  border: 1px solid rgba(27, 111, 216, 0.08);
  margin-bottom: 1.5rem;
}

.motw-card--accent {
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
}

.motw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.motw-card-header h5 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0;
}

.motw-card-header h5::before {
  content: "";
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: var(--primary-blue);
}

.motw-card--accent .motw-card-header h5::before {
  background: var(--accent-green);
}

.motw-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
}

.motw-dish-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.85rem;
}

.motw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.motw-grid h6 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.motw-list {
  list-style: disc;
  list-style-position: inside;
  padding-left: 0.35rem;
  color: var(--text-main);
  font-weight: 600;
}

.motw-text {
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
}

.motw-notes {
  margin-top: 0.75rem;
  background: rgba(27, 111, 216, 0.08);
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  color: var(--text-main);
  font-style: italic;
}

.motw-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.motw-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.motw-btn--library {
  background: #fff;
  color: var(--text-header);
  border: 1.5px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(11, 45, 80, 0.06);
}

.motw-btn--library i {
  color: var(--primary-blue);
}

.motw-btn--library:hover {
  border-color: var(--primary-blue);
  background: #f5f9ff;
}

.motw-btn--primary {
  background: linear-gradient(135deg, #1b6fd8 0%, #1559b0 100%);
  color: white;
  box-shadow: 0 8px 18px rgba(27, 111, 216, 0.3);
}

.motw-btn--family {
  background: linear-gradient(135deg, #4f7cf0 0%, #3a55c8 100%);
  color: white;
  box-shadow: 0 8px 18px rgba(58, 85, 200, 0.3);
}

/* The footer holds the primary "add the whole meal" action — bump its size and
   weight so it reads as the main call-to-action below the cards. */
.motw-footer .motw-btn--primary,
.motw-footer .motw-btn--family {
  padding: 0.9rem 1.75rem;
  font-size: 1.02rem;
}

.motw-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.motw-btn:active {
  transform: translateY(0);
}

.motw-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-subtle);
}

.motw-chip {
  background: rgba(27, 111, 216, 0.1);
  color: var(--text-header);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
}

.motw-note-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  border: 1px solid #f3e2bd;
  border-left: 4px solid #f0a92b;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

.motw-note-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(240, 169, 43, 0.16);
  color: #d98a0b;
  font-size: 1rem;
}

.motw-note-body {
  min-width: 0;
}

.motw-note-card h6 {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: #92600c;
}

.motw-note-card p {
  color: var(--text-main);
  line-height: 1.6;
  margin: 0;
}

.motw-error {
  text-align: center;
  padding: 2rem 0;
  color: #b91c1c;
  font-weight: 700;
}

.motw-error span {
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.35rem;
}

.motw-sides {
  display: flex;
  flex-direction: column;
}

/* ── Meal of the Week — day picker modal ─────────────────────────────────── */
.motw-day-modal {
  max-width: 460px;
}

.motw-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.motw-day-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-header);
  margin: 0.1rem 0 0;
  line-height: 1.25;
}

.motw-day-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.motw-day-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.motw-day-btn:hover:not(:disabled) {
  border-color: var(--primary-blue);
  box-shadow: 0 6px 16px rgba(27, 111, 216, 0.14);
  transform: translateY(-1px);
}

.motw-day-btn--family:hover:not(:disabled) {
  border-color: var(--accent-green);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.14);
}

.motw-day-btn:disabled {
  background: #f3f5f8;
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

.motw-day-btn-text {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.motw-day-btn-day {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-header);
}

.motw-day-btn-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.motw-day-btn:disabled .motw-day-btn-day {
  color: var(--muted);
}

.motw-day-pill {
  flex-shrink: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.motw-day-pill--open {
  background: rgba(27, 111, 216, 0.1);
  color: var(--primary-blue);
}

.motw-day-pill--family {
  background: rgba(40, 167, 69, 0.12);
  color: var(--accent-green);
}

.motw-day-pill--full {
  background: #eceff3;
  color: #9ca3af;
}


/* --- 7. MISC UI ELEMENTS --- */

/* Edit Mode Toggles */
.link-btn-remove,
.link-btn-move {
  background: none !important;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

.link-btn-remove {
  color: #dc2626;
}

.link-btn-move {
  color: #2563eb;
}

/* List & Cards */
#meal-options-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Meal selection cards */
.meal-card {
  position: relative;
  border: 2px solid var(--border-subtle);
  padding: 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  background: rgba(255, 255, 255, 0.9);
}

.meal-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 111, 216, 0.18);
}

.meal-card.selected {
  border-color: var(--accent-green);
  background-color: #f0fdf4;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.2);
}

.meal-card.selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  height: 24px;
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  color: white;
  border-radius: 50%;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ── Redesigned meal selection cards (select-meals-view) ─────────────────── */

.meal-select-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  border-left: 4px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.meal-select-card + .meal-select-card {
  margin-top: 10px;
}

.meal-select-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 4px 14px rgba(27,111,216,0.13);
  transform: translateY(-1px);
}

.meal-select-card.selected {
  border-left-color: var(--accent-green);
  background: #f0fdf4;
  box-shadow: 0 4px 16px rgba(34,197,94,0.15);
}

.meal-select-card.selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  height: 22px;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-green);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
}

/* Summary row (always visible) */
.msc-summary {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px 12px;
}

.msc-check-col {
  padding-top: 3px;
  flex-shrink: 0;
}

.msc-checkbox-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  transition: border-color 0.15s, background 0.15s;
}

.meal-select-card.selected .msc-checkbox-ring {
  border-color: var(--accent-green);
  background: var(--accent-green);
}

.msc-body {
  flex: 1;
  min-width: 0;
}

.msc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.msc-main-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-header);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.msc-meta-badge {
  flex-shrink: 0;
  background: #e8f0fe;
  color: #1b6fd8;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.msc-sides-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.msc-side-pill {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.msc-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}

.msc-servings {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.msc-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 3px;
  transition: opacity 0.15s;
  margin-left: auto;
}

.msc-expand-btn:hover {
  opacity: 0.75;
}

.msc-chevron {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.msc-expand-btn[aria-expanded="true"] .msc-chevron {
  transform: rotate(180deg);
}

/* Details panel */
.msc-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.msc-details.msc-details--open {
  max-height: 1400px;
}

.msc-detail-block {
  padding: 12px 16px 14px 14px;
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
}

.msc-detail-main {
  border-left: 3px solid #1b6fd8;
}

.msc-detail-side {
  border-left: 3px solid #86efac;
  border-top: 1px solid #e9f7ef;
}

.msc-detail-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.msc-detail-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.msc-detail-meta {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.msc-detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.msc-col-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 6px 0;
}

.msc-ing-list {
  list-style: disc;
  padding-left: 16px;
  margin: 0;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.65;
  /* Match the Recipe column: cap the height and scroll internally so the two
     columns stay the same height instead of the ingredients running long. */
  max-height: 220px;
  overflow-y: auto;
}

.msc-ing-empty {
  color: var(--muted);
  font-style: italic;
  list-style: none;
  padding-left: 0;
}

.msc-recipe-text {
  font-size: 12.5px;
  color: #374151;
  white-space: pre-wrap;
  line-height: 1.65;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .msc-detail-cols {
    grid-template-columns: 1fr;
  }

  .msc-top-row {
    flex-wrap: wrap;
  }
}

/* Meal pen cards */
.meal-card-draggable {
  background: white;
  border: 2px solid var(--border-subtle);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 0.75rem 0.875rem;
  margin-bottom: 0.5rem;
  cursor: grab;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(11, 45, 80, 0.07);
}

.meal-card-draggable:hover {
  border-color: var(--accent);
  box-shadow: 0 5px 16px rgba(27, 111, 216, 0.18);
  transform: translateY(-1px);
}

.meal-card-draggable.active {
  border-color: var(--accent);
  border-width: 2px;
  border-left-width: 4px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 6px 20px rgba(27, 111, 216, 0.2);
}

/* Compact card when inside a drop zone */
.day-drop-zone .meal-card-draggable {
  margin-bottom: 0.25rem;
  border-left-width: 3px;
  padding: 0.375rem 0.5rem;
  width: 100%;
  box-shadow: none;
  border-radius: 7px;
}

.day-drop-zone .meal-card-draggable:last-child {
  margin-bottom: 0;
}

.day-drop-zone .sched-meal-hint {
  display: none;
}

.day-drop-zone .sched-meal-name {
  font-size: 0.72rem;
  margin-bottom: 0.15rem;
}

.day-drop-zone .sched-side-pill {
  font-size: 0.6rem;
  padding: 1px 5px;
}

/* Meal card inner components */
.sched-meal-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-header);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.sched-meal-sides {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}

.sched-side-pill {
  display: inline-block;
  background: rgba(27, 111, 216, 0.09);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}

.sched-meal-hint {
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 700;
  background: transparent;
  border-radius: 0;
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-btn:hover {
  color: var(--accent);
  box-shadow: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(27, 111, 216, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(27, 111, 216, 0.5);
}

/* --- 8a. Tailwind-like Utility Replacements (No Tailwind) --- */
.pr-2 {
  padding-right: 0.5rem;
}

.max-h-60vh {
  max-height: 60vh;
}

.max-h-50vh {
  max-height: 50vh;
}

.max-h-70vh {
  max-height: 70vh;
}

.max-h-32px {
  max-height: 8rem;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* --- 8. VIEW LAYOUTS --- */
.calendar-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid var(--border-subtle);
  position: relative;
  z-index: 35;
}

.header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.calendar-title {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-header);
  letter-spacing: -0.5px;
}

.account-icon-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg,
      var(--accent) 0%,
      var(--primary-blue) 100%);
  color: white;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 16px rgba(27, 111, 216, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.account-icon-btn:hover {
  box-shadow:
    0 6px 20px rgba(27, 111, 216, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 1);
}

.account-icon-btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.3);
}

.about-icon-btn {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: linear-gradient(135deg,
      var(--accent) 0%,
      var(--primary-blue) 100%);
  color: white;
  border-radius: 12px;
  cursor: pointer !important;
  padding: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 16px rgba(27, 111, 216, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.about-icon-btn:hover {
  box-shadow:
    0 6px 20px rgba(27, 111, 216, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.about-icon-btn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.3);
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.week-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 12px;
  border: 2px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.week-display {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-header);
  letter-spacing: 0.25px;
}

.edit-section {
  display: none;
}

/* Inline Panels (Diet, Fridge, Shopping Lists) */
.panel-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow-y: auto;
}

#diet-view .panel-header,
#fridge-view .panel-header,
#shopping-list-view .panel-header,
#family-view .panel-header,
#friends-view .panel-header {
  display: none;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid var(--border-subtle);
  flex-shrink: 0;
  position: relative;
  z-index: 35;
}

.panel-title {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--text-header);
}

.panel-back-btn {
  background: rgba(27, 111, 216, 0.1);
  border: 1px solid rgba(27, 111, 216, 0.2);
  color: var(--accent);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.panel-back-btn:hover {
  background: rgba(27, 111, 216, 0.18);
}

/* ── Themed confirm dialog (calendar/modal-utils.js createConfirmDialog) ─── */
.calendar-confirm-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-confirm-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: #dcfce7;
  color: #166534;
}

.calendar-confirm-icon--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.calendar-confirm-title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 800;
  color: #111827;
}

.calendar-confirm-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

.calendar-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-confirm-ok-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  background: #22c55e;
}

.calendar-confirm-ok-btn--danger {
  background: #ef4444;
}

/* ── Favorite-target picker (calendar/day-selector-controller.js) ────────── */
.favorite-target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.favorite-target-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.favorite-target-subtitle {
  margin: 10px 0 0 0;
  color: #4b5563;
}

.favorite-target-rows {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favorite-target-merge-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

.favorite-target-merge-title {
  font-weight: 600;
  text-align: left;
}

.favorite-target-merge-count {
  font-size: 12px;
  color: #6b7280;
}

.favorite-target-new-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #86efac;
  color: #111827;
  font-weight: 700;
  cursor: pointer;
}

/* ── Meal-queue delete/remove confirm dialogs (calendar/meal-queue-controller.js) ── */
.queue-confirm-title {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 700;
}

.queue-confirm-message {
  margin: 0 0 16px 0;
  color: #4b5563;
  font-size: 14px;
}

.queue-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.queue-confirm-delete-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ── Cook assignments (calendar/cook-assignments-controller.js) ─────────── */
.cook-rota-section {
  margin-bottom: 16px;
}

.cook-rota-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cook-rota-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cook-rota-day-label {
  width: 42px;
  font-size: 13px;
  color: var(--text-header, #083463);
  font-weight: 700;
}

.cook-rota-select {
  flex: 1;
  height: 32px;
  font-size: 13px;
  max-width: none;
}

.cook-rota-readonly-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
}

.cook-rota-readonly-day {
  color: var(--muted, #6b7c93);
  font-weight: 600;
}

.cook-rota-readonly-name {
  font-weight: 700;
  color: var(--text-header, #083463);
}

.cook-rota-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted, #6b7c93);
}

.cook-needy-section {
  margin-bottom: 16px;
}

/* Same pill shape as .cook-badge so a cook's name reads consistently
   whether it's on a meal card or in the cook history list. */
.cook-history-cookname {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  background: transparent;
  color: var(--muted, #6b7c93);
  border: 1px dashed rgba(107, 124, 147, 0.6);
  white-space: nowrap;
  flex-shrink: 0;
}

.cook-history-cookname--cooked {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid #16a34a;
}

.cook-history-rest {
  margin-top: 0.4rem;
}

.cook-history-toggle-btn {
  margin-top: 10px;
}

/* ── Meal-request review + date picker (calendar/meal-request-controller.js) ── */
.meal-review-note {
  color: var(--muted);
  padding: 16px 0;
  text-align: center;
}

.meal-review-error-note {
  color: var(--danger, #ef4444);
  padding: 16px 0;
  text-align: center;
}

/* Per-member submission card — mirrors the .picker-item card treatment
   (white card, soft shadow, rounded) used across the request/pick popups. */
.meal-review-group {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: box-shadow 0.18s ease;
}

.meal-review-group:hover {
  box-shadow: 0 8px 20px rgba(8, 52, 99, 0.08);
}

.meal-review-group-header {
  background: linear-gradient(180deg, var(--ice-1) 0%, #ffffff 100%);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.meal-review-group-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-header);
  min-width: 0;
}

.meal-review-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent);
}

.req-meal-cards {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-submission-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(8, 52, 99, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.review-submission-card:hover {
  box-shadow: 0 6px 16px rgba(8, 52, 99, 0.08);
  transform: translateY(-1px);
}

.review-submission-card-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-header);
}

.review-submission-action-btn {
  white-space: nowrap;
}

.date-picker-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-picker-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.date-picker-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-pick-option {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background 0.1s, border-color 0.1s;
}

/* ── Meal poll (calendar/poll-controller.js) ─────────────────────────────── */
.poll-status-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 9999px;
}

.poll-status-chip--open {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}

.poll-status-chip--ended {
  background: rgba(107, 124, 147, 0.12);
  color: var(--muted, #6b7c93);
}

.poll-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.poll-title {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mutually-exclusive option states — mine-and-open / winner / default —
   drive the option card's border+background and its progress-fill color
   together, so the fill reuses the same modifier classes as the card. */
.poll-option {
  position: relative;
  border-radius: 10px;
  padding: 10px 12px;
  border-width: 2px;
  border-style: solid;
}

.poll-option--open {
  cursor: pointer;
}

.poll-option--mine {
  border-color: var(--accent, #1b6fd8);
  background: #eef5fe;
}

.poll-option--winner {
  border-color: #22c55e;
  background: #f0fdf4;
}

.poll-option--default {
  border-color: var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: #fff;
}

.poll-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.poll-vote-marker {
  width: 18px;
  height: 18px;
  border: 2px solid #c3d4ea;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.poll-vote-marker--radio {
  border-radius: 50%;
}

.poll-vote-marker--square {
  border-radius: 5px;
}

.poll-vote-marker--mine {
  border-color: var(--accent, #1b6fd8);
  background: var(--accent, #1b6fd8);
}

.poll-vote-check {
  color: #fff;
  font-size: 11px;
}

.poll-option-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-header, #083463);
}

.poll-option-winner-tag {
  font-size: 11px;
  color: #1e8035;
  font-weight: 700;
}

.poll-option-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.poll-add-plan-btn {
  white-space: nowrap;
}

.poll-remove-btn {
  border: none;
  background: transparent;
  color: var(--muted, #6b7c93);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.poll-option-bar-track {
  height: 6px;
  border-radius: 4px;
  background: #eef2f7;
  margin-top: 8px;
  overflow: hidden;
}

.poll-option-bar-fill {
  height: 100%;
  transition: width 0.2s;
}

.poll-option-bar-fill--mine {
  background: var(--accent, #1b6fd8);
}

.poll-option-bar-fill--winner {
  background: #22c55e;
}

.poll-option-bar-fill--default {
  background: #9cc2f0;
}

.poll-option-voters {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted, #6b7c93);
}

.poll-footer-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted, #6b7c93);
}

.poll-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.poll-footer-actions--open {
  margin-top: 10px;
}

.poll-footer-actions--ended {
  margin-top: 12px;
  align-items: center;
}

.poll-footer-hint {
  font-size: 12px;
  color: var(--muted, #6b7c93);
}

/* Hide back buttons in fridge and diet views */
#close-fridge-btn,
#close-diet-btn {
  display: none;
}

.panel-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2rem;
  flex: 1;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY TAB — styled to match the Nutrition & Events tabs: grouped sections
   with a title + pill tag above soft-shadowed cards, navy headers, blue accent.
   Shares the visual language of the .nutri-* / .events-* components.
   ═══════════════════════════════════════════════════════════════════════════ */
#family-view {
  padding: 0;
}

.family-header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.family-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scroll body (mirrors .nutri-view / .events-view) */
.family-view {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.5rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Grouped section (mirrors .nutri-group / .events-group) */
.family-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.family-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.family-group-head-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.family-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0;
}

.family-group-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.family-group-tag.count {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}

.family-group-tag.admin-tag {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

/* Card surface (mirrors .nutri-card / .events-card) */
.family-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.family-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}

.family-loading {
  color: var(--muted, #6b7c93);
  font-size: 0.875rem;
  margin: 0;
}

.poll-empty-note--admin {
  margin-bottom: 12px;
}

.family-action-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.family-members {
  display: flex;
  flex-direction: column;
}

.family-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.65rem 0;
}

.family-member:first-child {
  padding-top: 0;
}

.family-member:last-child {
  padding-bottom: 0;
}

.family-member + .family-member {
  border-top: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}

.family-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e5e7eb;
}

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

.family-member-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-member-email {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-role-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.family-role-badge--owner {
  background: #fef3c7;
  color: #92400e;
}

.family-role-badge--admin {
  background: #e0e7ff;
  color: #3730a3;
}

.family-role-badge--member {
  background: #f3f4f6;
  color: #374151;
}

.family-no-members-note {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

/* ── Cook assignments + voting: shared control sizing ────────────────────────
   The "Sign me up" button and the "Assign…" dropdown sit side-by-side and must
   line up exactly — same height, radius, and vertical rhythm. */
.family-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
  background: #fff;
}

.family-row + .family-row {
  margin-top: 0.4rem;
}

.family-row-info {
  min-width: 0;
  flex: 1;
}

.family-row-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.family-row-meta {
  font-size: 0.75rem;
  color: var(--muted, #6b7c93);
  margin: 0.1rem 0 0;
}

.family-row-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Both controls share one height so they align perfectly on the baseline.
   margin:0 overrides the global `select { margin-bottom }` rule that would
   otherwise inflate the select's margin-box and nudge it off-center. */
.cook-ctrl {
  height: 34px;
  margin: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  line-height: 1;
}

button.cook-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #d3e3f7;
  background: #f3f8ff;
  color: var(--text-header, #083463);
  transition: background 0.15s ease, border-color 0.15s ease;
}

button.cook-ctrl:hover {
  background: #e7f1ff;
  border-color: #b8d2f2;
}

select.cook-ctrl {
  padding: 0 1.9rem 0 0.7rem;
  min-width: 116px;
  max-width: 150px;
  color: var(--text-header, #083463);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background-color: #fff;
  /* Custom caret so it renders identically across browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  cursor: pointer;
}

select.cook-ctrl:hover {
  border-color: #b8d2f2;
}

select.cook-ctrl:focus-visible {
  outline: none;
  border-color: var(--accent, #1b6fd8);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.15);
}

@media (max-width: 768px) {
  .family-view {
    padding: 1.25rem 1.25rem 2rem;
    gap: 1.5rem;
  }

  .family-card {
    padding: 1rem;
  }
}

.fridge-panel-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS TAB — styled to match the Nutrition tab (grouped cards, soft shadows,
   blue accent, pill tags). Shares the visual language of .nutri-* components.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scroll body shared by the list + detail screens (mirrors .nutri-view) */
.events-view {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 2rem 2.5rem;
}

/* Grouped section: header row + stacked cards (mirrors .nutri-group) */
.events-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.events-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.events-group-head-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.events-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0;
}

.events-group-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.events-group-tag.host {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}

.events-group-tag.guest {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}

.events-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Card surface (mirrors .nutri-card) */
.events-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.events-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}

/* ── Loading / empty states (mirrors .nutri-empty-*) ─────────────────────── */
.events-loading-state {
  text-align: center;
  padding: 3rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.events-empty-inner {
  text-align: center;
  padding: 2.5rem 1.25rem;
}

.events-empty-inner.compact {
  padding: 1.75rem 1rem;
}

.events-empty-icon {
  margin-bottom: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.events-empty-icon img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.events-empty-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0 0 0.35rem;
}

.events-empty-sub {
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

/* ── Event cards (list) ──────────────────────────────────────────────────── */
.event-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s,
    transform 0.15s;
}

.event-card:hover {
  border-color: var(--accent);
  background: var(--ice-1);
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.13);
  transform: translateY(-1px);
}

.event-card-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.1);
}

.event-card-icon img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.event-card-body {
  flex: 1;
  min-width: 0;
}

.event-card-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.event-card-members {
  flex: 0 0 auto;
  padding: 0.18rem 0.6rem;
  background: rgba(27, 111, 216, 0.09);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.event-card-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
}

/* ── Share link card ─────────────────────────────────────────────────────────
 * The invite link is the primary way people get into an event (it opens the
 * public /events/<token> page, which works with no account), so it leads the
 * detail screen and the join code is demoted to a footnote. */
.event-share-card {
  display: block;
}

.event-share-hint {
  margin: 0.15rem 0 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.event-share-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.event-share-input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(27, 111, 216, 0.05);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-main);
  text-overflow: ellipsis;
}

.event-share-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.2);
}

.event-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

/* The quick-share targets are anchors so they can carry href schemes
   (whatsapp:, sms:, mailto:) — line them up with the real buttons. */
.event-share-actions a.btn-secondary {
  text-decoration: none;
}

.event-share-foot {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

.event-share-foot-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-share-settings {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-share-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.event-share-toggle input {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.event-share-toggle strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-header);
}

.event-share-toggle small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Marks a signup or dish that came in through the public link rather than
   from an account, so the host can tell the two apart at a glance. */
.event-guest-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(107, 124, 147, 0.15);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}

.event-signup-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.event-signup-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 0.15rem;
  line-height: 1;
}

.event-signup-remove:hover {
  color: var(--danger, #d32f2f);
}

/* ── Join code card ──────────────────────────────────────────────────────── */
.event-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.event-code-block {
  min-width: 0;
}

.event-code-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.event-code {
  font-size: 1.4rem;
  font-weight: 900;
  font-family: monospace;
  letter-spacing: 0.2em;
  color: var(--text-header);
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.25rem 0.7rem;
}

/* ── Meal mode segmented control (mirrors .nutri-range-switcher) ─────────── */
.events-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
}

.meal-mode-btn {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--muted, #6b7c93);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.meal-mode-btn:hover {
  color: var(--accent, #1b6fd8);
}

.meal-mode-btn.active {
  background: var(--accent, #1b6fd8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
}

/* ── Slot cards ──────────────────────────────────────────────────────────── */
.event-slot-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.event-slot-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.15rem;
}

.event-slot-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.event-slot-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.event-slot-count {
  font-size: 0.9rem;
  font-weight: 900;
}

.event-slot-count.full { color: var(--accent-green); }
.event-slot-count.open { color: var(--accent); }

.event-slot-bar-track {
  flex: 1;
  height: 8px;
  background: #eef2f8;
  border-radius: 999px;
  overflow: hidden;
}

.event-slot-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.event-slot-bar-fill.full { background: var(--accent-green); }

.event-slot-names {
  font-size: 0.8rem;
  color: var(--text-main);
  margin: 0.3rem 0 0.65rem;
}

.event-slot-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* ── Meal cards ──────────────────────────────────────────────────────────── */
.event-meal-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.event-meal-info { min-width: 0; }

.event-meal-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 0.1rem;
}

.event-meal-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}

.event-meal-delete-btn {
  white-space: nowrap;
}

.event-no-members-note {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.event-signup-note {
  color: var(--muted);
}

.event-slot-full-badge {
  font-size: 0.8rem;
  color: var(--accent-green);
  font-weight: 800;
}

/* ── Members ─────────────────────────────────────────────────────────────── */
.event-members {
  display: flex;
  flex-direction: column;
}

.event-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-main);
}

.event-member-row + .event-member-row {
  border-top: 1px solid var(--border-subtle);
}

.event-member-crown { font-size: 0.9rem; }

.event-member-crown-spacer {
  display: inline-block;
  width: 1.3rem;
}

.event-member-name { font-weight: 600; }

/* ── Detail header (mirrors .pb-header: slim, thin divider, in-flow with the
   rest of .events-view instead of the old full-width .panel-header bar) ──── */
.events-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.events-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  background: rgba(27, 111, 216, 0.1);
  border: 1px solid rgba(27, 111, 216, 0.2);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.events-back-btn:hover {
  background: rgba(27, 111, 216, 0.18);
}

.event-detail-header-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.events-detail-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.event-detail-date {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
  margin: 0.15rem 0 0;
}

/* ── Shared small-button sizes (compound selectors beat global.css base) ──── */
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-danger.btn-sm,
.btn-danger-soft.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 9px;
}

.btn-primary.btn-xs,
.btn-secondary.btn-xs,
.btn-danger.btn-xs {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 8px;
}

/* Preserved: shared label used by Family / poll / cook tabs */
.events-section-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .events-view {
    padding: 1.25rem 1.25rem 2rem;
    gap: 1.5rem;
  }
  .events-mode-switch {
    width: 100%;
  }
  .meal-mode-btn {
    flex: 1;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRIDGE TAB — styled to match the Nutrition tab (group head + soft-shadowed
   cards, navy headers, blue accent, pill count chip). Shares the visual
   language of the .nutri-* components.
   ═══════════════════════════════════════════════════════════════════════════ */

.fridge-view-body {
  display: flex;
  flex-direction: column;
}

.fridge-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Group head: title + sub on the left, count chip on the right */
.fridge-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.fridge-group-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.fridge-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0;
}

.fridge-group-sub {
  margin: 0;
  color: var(--muted, #6b7c93);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 46ch;
}

.fridge-count-chip {
  flex-shrink: 0;
  align-self: center;
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* "Shared with your family" indicator — Shopping List & Fridge tabs, shown
   whenever activeFamilyId is set, regardless of the personal/family planner
   mode toggle (see fridge-store.js / shopping-list-controller.js). */
.family-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card surface (mirrors .nutri-card) */
.fridge-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.fridge-card-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}

/* Add-item row */
.fridge-add-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.fridge-add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.8rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0 0.95rem;
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.95rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fridge-add-input::placeholder {
  color: rgba(107, 124, 147, 0.7);
}

.fridge-add-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(27, 111, 216, 0.18);
}

.fridge-add-button {
  flex: 0 0 auto;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  height: 2.8rem;
  box-sizing: border-box;
  padding: 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}

.fridge-add-button:hover {
  background: #3787ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(27, 111, 216, 0.22);
}

.fridge-add-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Scan-a-photo CTA (inside the add-item card) ───────────────────────────── */
.fridge-scan-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(27, 111, 216, 0.45);
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.05);
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.fridge-scan-cta:hover {
  background: rgba(27, 111, 216, 0.1);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.fridge-scan-cta > .fa-camera {
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.fridge-scan-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.fridge-scan-cta-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-main);
}

.fridge-scan-cta-sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.3;
}

.fridge-scan-cta-arrow {
  flex: 0 0 auto;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ── Scan modal ────────────────────────────────────────────────────────────── */
.fridge-scan-content {
  height: auto;
  min-height: 0;
  max-height: min(90vh, 720px);
  max-width: 560px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}

.fridge-scan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.fridge-scan-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-header);
  margin: 0;
}

.fridge-scan-title > i {
  color: var(--accent);
  font-size: 1.15rem;
}

.fridge-scan-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}

/* Capture zone */
.fridge-scan-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
  border: 2px dashed rgba(27, 111, 216, 0.4);
  border-radius: 14px;
  background: rgba(27, 111, 216, 0.04);
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.fridge-scan-zone:hover {
  background: rgba(27, 111, 216, 0.08);
  border-color: var(--accent);
}

.fridge-scan-zone-icon {
  font-size: 1.8rem;
  color: var(--accent);
}

.fridge-scan-zone-title {
  font-weight: 800;
  color: var(--text-main);
  font-size: 0.98rem;
}

.fridge-scan-zone-sub {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

/* Photo preview thumbs */
.fridge-scan-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.fridge-scan-preview:empty {
  margin-top: 0;
}

.fridge-scan-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(8, 52, 99, 0.12);
}

.fridge-scan-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fridge-scan-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fridge-scan-note {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.08);
  color: #92600b;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
}

.fridge-scan-note > i {
  margin-top: 0.1rem;
  flex: 0 0 auto;
}

.fridge-scan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.3rem;
}

/* Loading */
.fridge-scan-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 1rem;
}

.fridge-scan-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: fridge-scan-spin 0.85s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

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

.fridge-scan-loading-text {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

/* Review list */
.fridge-scan-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  max-height: 42vh;
  margin: 0 -0.35rem;
  padding: 0.15rem 0.35rem;
}

.fridge-scan-review-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fridge-scan-qty-input {
  flex: 0 0 30%;
  min-width: 0;
  height: 2.6rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0 0.7rem;
  background: #fff;
  color: var(--text-main);
  font-size: 0.9rem;
}

.fridge-scan-name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.6rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0 0.7rem;
  background: #fff;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 600;
}

.fridge-scan-qty-input:focus,
.fridge-scan-name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.15);
}

.fridge-scan-row-remove {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 8px;
  background: rgba(217, 64, 64, 0.08);
  color: #d94040;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fridge-scan-row-remove:hover {
  background: rgba(217, 64, 64, 0.16);
}

.fridge-scan-add-row-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.fridge-scan-add-row-btn:hover {
  background: rgba(27, 111, 216, 0.06);
  border-color: var(--accent);
}

/* Items list */
.fridge-list-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#fridge-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 46vh;
  overflow-y: auto;
  /* let hover/focus rings breathe without clipping inside the scroll area */
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
}

.fridge-empty-state {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 1.75rem 1rem;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.03);
}

.fridge-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 11px;
  background: rgba(27, 111, 216, 0.04);
  border: 1px solid transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.fridge-list-item:hover {
  background: rgba(27, 111, 216, 0.08);
  border-color: rgba(27, 111, 216, 0.18);
}

.fridge-list-item-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--text-main);
  word-break: break-word;
}

.fridge-list-item-name::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

#shopping-list-panel .bg-gray-50 {
  background: #ffffff;
  border: 1px solid rgba(200, 215, 235, 0.7);
}

#shopping-list-panel .delete-shopping-list {
  color: #c73434;
  background: #fff1f1;
  border: 1px solid #efb2b2;
  border-radius: 9px;
  font-weight: 700;
  transition: all 0.2s ease;
}

#shopping-list-panel .delete-shopping-list:hover {
  color: #ffffff;
  background: #d54444;
  border-color: #d54444;
}

#shopping-list-panel .view-shopping-list {
  color: var(--accent);
  background: rgba(27, 111, 216, 0.1);
  border: 1px solid rgba(27, 111, 216, 0.25);
  border-radius: 9px;
  font-weight: 700;
  transition: all 0.2s ease;
}

#shopping-list-panel .view-shopping-list:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

#shopping-list-panel .shopping-item-container {
  background: #ffffff;
  border: 1px solid rgba(200, 215, 235, 0.7);
}

#shopping-list-panel .shopping-item-container:hover {
  background: #f6fbff;
  border-color: var(--accent);
}

body.shopping-list-detail-fullscreen-active {
  overflow: hidden;
}

#shopping-list-view.shopping-list-screen-full,
#shopping-list-view:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: white;
  padding: 1.25rem 1.5rem;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow-y: auto;
}

#shopping-list-view.shopping-list-screen-full #shopping-list-panel,
#shopping-list-view:fullscreen #shopping-list-panel {
  height: calc(100vh - 6.5rem);
  height: calc(100dvh - 6.5rem);
  overflow-y: auto;
}

/* ── Shopping List: Create Flow ────────────────────────────────────────── */

.panel-card.shopping-list-create-mode {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shopping-create-action-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: #fff;
}

.shopping-create-action-bar .sl-back-btn {
  flex-shrink: 0;
}

.shopping-generate-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  background: #2378e8;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.shopping-generate-btn:hover:not(:disabled) {
  background: #3787ff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.3);
}

.shopping-generate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shopping-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.shopping-source-badge--calendar {
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
}

.shopping-source-badge--queue {
  background: rgba(22, 101, 52, 0.1);
  color: #166534;
}

/* Family/Personal/Both source tab toggle — mirrors .nutri-range-switcher */
.shopping-source-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
}

.shopping-source-tab {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--muted, #6b7c93);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shopping-source-tab:hover {
  color: var(--text-header, #083463);
}

.shopping-source-tab.active {
  background: var(--accent, #1b6fd8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
}

/* Source labels on meal cards when "Both" is selected */
.shopping-source-label {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.shopping-source-label--family {
  background: #dcfce7;
  color: #166534;
}

.shopping-source-label--personal {
  background: #dbeafe;
  color: #1e40af;
}

.shopping-source-label--library {
  background: rgba(168, 85, 247, 0.14);
  color: #7e22ce;
}

/* Planned Meals / From Library tab toggle in the shopping list creator */
.sl-picker-tabs {
  padding: 0.85rem 1.25rem 0;
  flex-shrink: 0;
}

.sl-library-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.shopping-library-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.shopping-create-meal-list {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Individual meal selection cards */
.shopping-meal-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(200, 215, 235, 0.75);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.shopping-meal-card:hover {
  background: #f5faff;
  border-color: rgba(27, 111, 216, 0.28);
  box-shadow: 0 4px 14px rgba(8, 52, 99, 0.09);
}

.shopping-meal-card--selected {
  background: rgba(27, 111, 216, 0.06);
  border-color: var(--accent, #1b6fd8);
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.12);
}

/* Same specificity as .shopping-meal-card:hover (0,2,0) — placed after it so
   a selected card keeps its accent tint on hover instead of the plain hover
   style winning by source order. */
.shopping-meal-card--selected:hover {
  background: rgba(27, 111, 216, 0.1);
  border-color: var(--accent, #1b6fd8);
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.16);
}

.shopping-meal-card input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 17px;
  height: 17px;
  accent-color: var(--accent, #1b6fd8);
  flex-shrink: 0;
  cursor: pointer;
}

.shopping-meal-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Mains/Sides pill rows — reuses the queue card's .queue-card-pills /
   .queue-card-recipe-group / .queue-pill(-main|-side|-empty) classes (see
   plan.css around .queue-meal-card) so a meal reads identically here and on
   the Meal List, since neither carries a stored name anymore. */
.shopping-meal-card .queue-card-pills {
  gap: 8px;
}

.shopping-meal-card__meta {
  font-size: 0.76rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.shopping-meal-card__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* "See More" button */
.shopping-see-more-btn {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.7rem 1rem;
  background: transparent;
  border: 1.5px dashed var(--border-subtle, #d1d5db);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shopping-see-more-btn:hover {
  background: rgba(27, 111, 216, 0.06);
  color: var(--accent, #1b6fd8);
  border-color: rgba(27, 111, 216, 0.4);
}

/* Empty state in create flow */
.shopping-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted, #6b7280);
}

.shopping-empty-icon {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopping-empty-icon img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.shopping-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-header, #0f172a);
  margin-bottom: 0.4rem;
}

.shopping-empty-sub {
  font-size: 0.875rem;
}

/* Loading text while resolving calendar meal names */
.shopping-loading-text {
  color: var(--muted, #6b7280);
  font-size: 0.875rem;
  padding: 1.5rem 0;
  text-align: center;
}

/* ─────────────── Shopping List: Ingredient Review (Step 2) ─────────────── */

/* The whole panel scrolls (no inner scroll region) so the page scrolls as one. */
.panel-card.sl-review-mode {
  padding: 0;
  display: block;
  overflow-y: auto;
}

/* Action bar pinned to the top of the scrolling panel. */
.sl-review-actionbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.sl-review-feeds {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  background: rgba(27, 111, 216, 0.1);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.sl-review-step-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-review-body {
  padding: 1rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sl-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: rgba(244, 251, 255, 0.92);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
}

.sl-review-selectall {
  padding: 0.4rem 0.85rem;
  background: rgba(27, 111, 216, 0.08);
  color: var(--accent, #1b6fd8);
  border: 1px solid rgba(27, 111, 216, 0.25);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sl-review-selectall:hover {
  background: rgba(27, 111, 216, 0.16);
  border-color: rgba(27, 111, 216, 0.45);
}

.sl-review-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
}

/* Per-dish group */
.sl-review-group {
  background: var(--bg-card, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  overflow: hidden;
}

.sl-review-group__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}

input[type="checkbox"].sl-review-group__check {
  width: 22px;
  height: 22px;
  margin-right: 0;
  accent-color: var(--accent, #1b6fd8);
  cursor: pointer;
  flex-shrink: 0;
}

.sl-review-group__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sl-review-group__name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-header, #083463);
  word-break: break-word;
}

.sl-review-group__context {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted, #6b7c93);
}

/* Per-dish scale stepper */
.sl-review-scale {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.sl-review-scale__btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5faff;
  color: var(--accent, #1b6fd8);
  border: 1px solid rgba(27, 111, 216, 0.25);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sl-review-scale__btn:hover:not(:disabled) {
  background: rgba(27, 111, 216, 0.14);
  border-color: rgba(27, 111, 216, 0.5);
}

.sl-review-scale__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sl-review-scale__current {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  min-width: 38px;
  text-align: center;
}

.sl-review-group__items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
}

/* Ingredient row */
.sl-review-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-review-item--excluded {
  opacity: 0.45;
}

input[type="checkbox"].sl-review-item__check {
  width: 22px;
  height: 22px;
  margin-right: 0;
  accent-color: var(--accent, #1b6fd8);
  cursor: pointer;
  flex-shrink: 0;
}

.sl-review-item__qty,
.sl-review-item__unit,
.sl-review-item__name {
  border: 1px solid rgba(200, 215, 235, 0.8);
  border-radius: 7px;
  padding: 0.35rem 0.55rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-main, #05223a);
  background: #f8fbff;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.sl-review-item__qty:focus,
.sl-review-item__unit:focus,
.sl-review-item__name:focus {
  border-color: var(--accent, #1b6fd8);
  background: #fff;
}

.sl-review-item__qty {
  width: 52px;
  flex-shrink: 0;
  text-align: center;
}

.sl-review-item__unit {
  width: 64px;
  flex-shrink: 0;
}

.sl-review-item__name {
  flex: 1;
  min-width: 0;
}

/* Add-ingredient row */
.sl-review-add {
  width: 100%;
  padding: 0.5rem;
  background: rgba(27, 111, 216, 0.04);
  border: none;
  border-top: 1px dashed rgba(27, 111, 216, 0.3);
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.sl-review-add:hover {
  background: rgba(27, 111, 216, 0.1);
}

/* ─── Combined-from provenance sub-line (finished list, view + edit) ─────── */
/* Allow the finished-list rows to wrap so the provenance line drops below. */
#shopping-list-panel .shopping-item-container,
.sl-edit-row {
  flex-wrap: wrap;
}

.sl-item-sources {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding-left: calc(20px + 0.75rem); /* align under the item text, past the checkbox */
}

.sl-item-sources__label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7c93);
}

.sl-item-source {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1458b2;
  background: rgba(27, 111, 216, 0.08);
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* Create Plan */
.view-title {
  font-size: 2.25rem;
  font-weight: 900;
  text-align: center;
  color: var(--text-header);
  margin-bottom: 0.5rem;
}

.view-subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2rem;
}

.idea-textarea {
  width: 100%;
  padding: 1.25rem;
  border: 2px solid rgba(200, 215, 235, 0.6);
  border-radius: 12px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  resize: none;
  min-height: 120px;
}

.idea-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(27, 111, 216, 0.3);
}

.action-buttons {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.btn-large {
  width: 100%;
  font-size: 1.125rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Loading & Empty States */
.meal-list-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.75rem;
  background-color: rgba(249, 250, 251, 0.5);
  border-radius: 8px;
}

#meal-options-list>*+* {
  margin-top: 1.25rem;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 0;
}

.loading-spinner.hidden {
  display: none;
}

.spinner-icon {
  height: 2.5rem;
  width: 2.5rem;
  border: 4px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 0.85s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

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

/* ── Day Meals Panel ── */
@keyframes dmpSlideIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dmp-meal-row:hover {
  box-shadow: 0 6px 20px rgba(27, 111, 216, 0.14);
  border-color: #a8c9ff !important;
}

.dmp-open-btn:hover {
  opacity: 0.88;
}

.dmp-rename-btn:hover {
  border-color: #1b6fd8 !important;
  color: #1b6fd8 !important;
}

.dmp-remove-btn:hover {
  background: #fee2e2 !important;
}

.loading-modal-spinner {
  animation: spin 0.85s linear infinite;
  height: 3rem;
  width: 3rem;
  border: 4px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  will-change: transform;
  backface-visibility: hidden;
}

.loading-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

#loading-modal-content {
  height: auto;
  max-height: none;
}

.spinner-ring {
  width: 60px;
  height: 60px;
  border: 5px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.spinner-text {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--muted);
  font-weight: 500;
}

.continue-button {
  margin-top: 2rem;
  width: 100%;
  font-size: 1.125rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.continue-button:hover:not(:disabled) {
  transform: scale(1.01);
}

.continue-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .modal-footer {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
}

@media (max-width: 480px) {
  .meal-serving-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
    margin-bottom: 0.25rem;
  }

  .meal-serving-badge.unspecified {
    padding: 3px 8px;
    font-size: 0.65rem;
  }
}

/* Legacy classes kept for compatibility */
.drag-drop-zone {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Fridge items remove button — round ghost button that turns red on hover */
.list-item-remove-btn {
  display: inline-flex;
  visibility: visible;
  pointer-events: auto;
}

#fridge-items-list .list-item-remove-btn {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  box-sizing: border-box;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

#fridge-items-list .list-item-remove-btn:focus-visible,
.fridge-add-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(27, 111, 216, 0.2);
}

#fridge-items-list .list-item-remove-btn:hover {
  color: #ffffff;
  background: #d54444;
  border-color: #d54444;
}

/* --- RESPONSIVE DESIGN --- */

/* Tablet: 768px and below */
@media (max-width: 768px) {
  .app-layout {
    --sidebar-w: 280px;
    padding: 0;
    gap: 0;
  }

  /* Sidebar becomes hamburger menu */
  #app-sidebar {
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
  }

  #app-main {
    margin-left: 0;
    width: 100%;
  }

  .main-shell-header {
    height: auto;
    min-height: 82px;
    padding: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .fridge-card {
    padding: 1rem;
  }

  .fridge-group-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .fridge-count-chip {
    align-self: flex-start;
  }

  .sl-group-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sl-count-tag {
    align-self: flex-start;
  }

  .fridge-add-row {
    flex-direction: column;
  }

  .fridge-add-button {
    width: 100%;
  }

  .main-shell-title {
    font-size: 1.4rem;
    width: 100%;
    text-align: center;
  }

  .main-shell-actions {
    width: 100%;
    justify-content: center;
  }

  .main-shell-meal-actions {
    justify-content: center;
  }

  .main-shell-meal-actions #calendar-view-toggle-btn,
  .main-shell-meal-actions #edit-plan-btn,
  .main-shell-meal-actions #done-editing-btn {
    padding: 7px 10px;
    font-size: 0.8rem;
  }

  .menu-toggle-btn {
    display: flex;
  }

  .sidebar-backdrop {
    display: block;
  }

  /* Adjust container padding on mobile */
  #app-container {
    padding: 3rem 1rem 1.5rem;
    border-radius: 8px;
    min-height: 100%;
  }

  /* Calendar grid adjusts for mobile */
  #main-calendar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .day-cell {
    min-height: 140px;
    padding: 0.75rem;
  }

  .button-group {
    flex-direction: column;
    gap: 0.5rem;
  }

  .button-group button {
    width: 100%;
  }

  /* Hide about and account buttons on mobile (use sidebar instead) */
  #about-btn,
  #account-btn {
    display: none;
  }

  /* Adjust meal card text on mobile */
  .meal-item-in-calendar {
    padding: 0.75rem;
  }

  .day-cell-header {
    gap: 0.5rem;
  }

  .day-add-meal-btn {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.05rem;
  }

  .meal-card-title {
    font-size: 13px;
  }
}

/* Mobile: 640px and below */
@media (max-width: 640px) {
  /* Sidebar narrower on small phones */
  .app-layout {
    --sidebar-w: 280px;
  }

  #main-calendar-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .day-cell {
    min-height: 120px;
    padding: 0.5rem;
  }

  #app-container {
    padding: 1rem 0.75rem 1rem;
    margin: 0;
  }

  .container {
    padding: 0;
  }

  .panel-view {
    padding: 0;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    padding-bottom: 1rem;
  }

  #shopping-list-view .panel-header {
    flex-direction: row;
    align-items: center;
  }

  .panel-card {
    padding: 1.25rem;
  }

  #shopping-list-panel {
    --sl-bar-inset: 1.25rem;
  }

  .nav-item {
    padding: 12px 14px;
    font-size: 14px;
  }

  .sidebar-footer {
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .user-profile {
    flex-direction: column;
    gap: 8px;
  }

  .sidebar-user-email {
    font-size: 11px;
    text-align: center;
  }

  .sidebar-icon-btn {
    width: 32px;
    height: 32px;
  }

  .menu-toggle-btn {
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
  }
}

/* Desktop version: About and Account buttons stay visible */
@media (min-width: 769px) {
  .sidebar-backdrop {
    display: none;
  }

  /* On desktop with sidebar, hide old about/account buttons since sidebar has them */
  #about-btn,
  #account-btn {
    display: none;
  }
}

/* ===== Meals on Deck View ===== */
.meal-queue-view {
  padding: 24px 16px 48px;
  max-width: 680px;
  margin: 0 auto;
}

.meal-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.meal-queue-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.queue-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.22);
}

.queue-add-btn:hover {
  background: #3787ff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.32);
}

/* Empty state */
.meal-queue-empty {
  text-align: center;
  padding: 64px 20px;
}

.queue-empty-icon {
  font-size: 52px;
  margin-bottom: 16px;
  line-height: 1;
}

.queue-empty-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.queue-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 6px;
}

.queue-empty-sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
}

.queue-add-btn-large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(27, 111, 216, 0.25);
}

.queue-add-btn-large:hover {
  background: #3787ff;
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.35);
}

/* Meal card list */
.meal-queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.queue-meal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(11, 45, 80, 0.06);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.queue-meal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(11, 45, 80, 0.14);
  border-color: var(--accent);
}

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

/* Reorder control — a drag handle, always shown. Dragging is handled
   entirely via Pointer Events in meal-queue-controller.js so it also works
   with touch. */
.queue-card-reorder {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.queue-card-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 14px;
  cursor: grab;
  touch-action: none;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.queue-card-drag-handle:hover {
  color: var(--accent);
  background: rgba(27, 111, 216, 0.08);
}

.queue-card-drag-handle:active {
  cursor: grabbing;
}

.queue-card-dragging {
  position: relative;
  z-index: 20;
  transition: none;
  box-shadow: 0 16px 34px rgba(11, 45, 80, 0.22);
  cursor: grabbing;
  user-select: none;
}

/* Prevent text selection page-wide while a card is being dragged. */
body.queue-card-drag-active {
  user-select: none;
}

.queue-card-name {
  display: block;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dish pills — mains blue, sides green — matching the "Add To List" popup.
   The popup's copies live in plan-library.css scoped under .lib-scope, so these
   unscoped rules are what style the pills used outside the Library tab (the list
   card and the meal-detail header). */
.queue-pill {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.queue-pill-main {
  background: #dbeafe;
  color: #1e40af;
}

.queue-pill-side {
  background: #dcfce7;
  color: #166534;
}

/* Meals are shown as their dishes rendered as coloured pills (mains blue,
   sides green) — no stored name. Pills wrap onto multiple rows for meals with
   many dishes, keeping the card compact but complete. */
.queue-card-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.queue-card-pills .queue-card-recipe-group {
  width: 100%;
}

.queue-card-pills .queue-pill {
  font-size: 11px;
  padding: 4px 12px;
  line-height: 1.35;
  max-width: min(150px, 32vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Placeholder pill for a meal that has no dishes yet. */
.queue-pill-empty {
  background: var(--btn-secondary-bg, #f1f5f9);
  color: var(--muted, #9ca3af);
  border: 1px dashed var(--border-subtle, #d1d5db);
  font-style: italic;
}

/* Add-to-List/Add-to-Calendar target-card shell (border, header row, Mains/
   Sides detail body) — same scoping problem as the pills above: the copies in
   plan-library.css live under .lib-scope, so the View List/View Calendar
   popup (built by plan-builder-controller.js and appended straight to
   document.body, outside .lib-scope) needs its own unscoped rules here. */
.queue-target-card {
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: box-shadow 0.15s;
  flex-shrink: 0;
}

.queue-target-card:hover {
  box-shadow: 0 2px 10px rgba(8, 52, 99, 0.1);
}

.queue-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.queue-card-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(27, 111, 216, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.queue-card-detail-body {
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  padding: 10px 14px 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-card-recipe-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.queue-pill-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9ca3af);
  margin-right: 2px;
}

/* No max-height/overflow here (unlike the .lib-scope copy) — this list's
   scrolling is handled one level up by .form-dialog-body, so the "Already in
   your list" / "Adding now" sections just grow to full height instead of
   scrolling in their own boxes. */
.queue-meal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted, #6b7280);
}

.queue-empty-state i {
  font-size: 30px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.45;
}

.queue-empty-state p {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.queue-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* In the meta row the date badge sits inline beside the cook badge, so drop the
   standalone top margin it carries when shown on its own. */
.queue-card-meta .queue-card-date {
  margin-top: 0;
}

/* Planned-date badge — shown only when a list meal has a date. The native date
   input is overlaid transparently so a click anywhere on the badge opens it. */
.queue-card-date {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent);
  border: 1px solid rgba(27, 111, 216, 0.3);
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.queue-card-date:hover {
  background: rgba(27, 111, 216, 0.18);
  box-shadow: 0 1px 5px rgba(27, 111, 216, 0.25);
}

.queue-card-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

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

.queue-card-view-btn {
  padding: 7px 14px;
  background: var(--btn-secondary-bg, #f0f7ff);
  color: var(--text-header);
  border: 1px solid #cfe3f7;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.queue-card-view-btn:hover {
  opacity: 0.85;
}

.queue-card-cook-btn {
  padding: 7px 14px;
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.queue-card-cook-btn:hover {
  opacity: 0.88;
}

#review-meals-queue-btn:hover {
  background: color-mix(in srgb, var(--accent-green) 72%, rgb(116, 255, 111)) !important;
  filter: saturate(1.05);
  box-shadow: 0 3px 10px rgba(40, 167, 69, 0.28);
}

.queue-card-delete-btn {
  padding: 7px 9px;
  background: transparent;
  color: #9ca3af;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.queue-card-delete-btn:hover {
  color: #ef4444;
  border-color: #fca5a5;
}

/* ── Queue header actions group ──────────────────────────────────────────── */

.queue-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.queue-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(27, 111, 216, 0.08);
  color: var(--accent, #1b6fd8);
  border: 1px solid rgba(27, 111, 216, 0.2);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.queue-history-btn:hover {
  background: rgba(27, 111, 216, 0.16);
  border-color: rgba(27, 111, 216, 0.35);
}

.queue-history-badge {
  display: none;
}

/* ── History sub-panel ────────────────────────────────────────────────────── */

/* Give the History panel its own bounded height at every breakpoint (mirrors
   .plan-builder-view's calc(100dvh - header - app-container padding), with an
   extra 72px for .meal-queue-view's own 24px/48px top/bottom padding) so the
   header can be a non-scrolling flex child and only .queue-history-scroll
   below it scrolls — the page itself must never scroll, or the sticky
   header/search row would travel with it. #app-container's vertical padding
   and .main-shell-header's height both change at the two mobile breakpoints
   below, hence the three separate chrome totals. */
@media (min-width: 769px) {
  #queue-history-view {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 104px - 4.25rem - 72px);
    min-height: 420px;
    overflow: hidden;
  }
}

/* 641-768px: .main-shell-header is auto-height (~82px min) and #app-container
   padding is 3rem 1rem 1.5rem (4.5rem vertical). */
@media (max-width: 768px) {
  #queue-history-view {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 82px - 4.5rem - 72px);
    min-height: 320px;
    overflow: hidden;
  }
}

/* ≤640px: #app-container padding tightens further to 1rem 0.75rem 1rem
   (2rem vertical). */
@media (max-width: 640px) {
  #queue-history-view {
    height: calc(100dvh - 82px - 2rem - 72px);
  }
}

/* Border line mirrors .pb-header's line under "Meals lined up to cook next".
   Override .meal-queue-header's row layout so the heading row and the search
   row stack vertically. */
.queue-history-sticky-header {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
}

.queue-history-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: 1rem;
}

/* Header row: back + heading on the left, count chip on the right — mirrors
   the .fridge-group-head / .family-group-head title + pill pattern. */
.queue-history-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.queue-history-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.queue-history-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.queue-history-heading .meal-queue-title {
  line-height: 1.1;
}

.queue-history-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
}

/* Count pill — matches .fridge-count-chip. */
.queue-history-count {
  flex-shrink: 0;
  align-self: center;
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.queue-history-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
  border: 1px solid rgba(27, 111, 216, 0.2);
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.queue-history-back-btn:hover {
  background: rgba(27, 111, 216, 0.18);
  border-color: rgba(27, 111, 216, 0.35);
}

/* Search field with a leading icon (mirrors the fridge add-input surface). */
.queue-history-search-row {
  position: relative;
  margin-top: 0.85rem;
}

.queue-history-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #6b7c93);
  font-size: 0.85rem;
  pointer-events: none;
}

.queue-history-search {
  width: 100%;
  height: 2.7rem;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0 0.95rem 0 2.35rem;
  background: #fff;
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.queue-history-search::placeholder {
  color: rgba(107, 124, 147, 0.7);
}

.queue-history-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(27, 111, 216, 0.15);
}

/* History cards — mirror .queue-meal-card's frosted surface + soft blue
   shadow so removed meals read as siblings of the active list, not a
   different, flatter component. */
.history-meal-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(11, 45, 80, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.history-meal-card:hover {
  box-shadow: 0 10px 22px rgba(11, 45, 80, 0.12);
  border-color: rgba(27, 111, 216, 0.35);
}

.history-card-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-card-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-card-meta {
  font-size: 12px;
  color: var(--muted, #6b7c93);
}

/* Removed-date badge — an editable pill; the native date input is overlaid
   transparently so a click anywhere on the badge opens it (mirrors the
   list card's planned-date badge). */
/* Holds the history card's editable chips (removed-date, and "Ate:" when the
   family tracks eaters) so a second chip wraps onto its own line rather than
   stretching the card. */
.history-card-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* "Ate: …" on a history card. Unlike the read-only .eaters-badge on queue and
   calendar cards, this one IS the editor — history cards have no detail modal
   behind them — so it takes the date chip's button affordances. */
.history-card-eaters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  /* The date chip beside this one is a <label> and inherits the page's
     line-height; a <button> gets `normal` from the UA stylesheet, which would
     leave the two pills at visibly different heights side by side. */
  line-height: inherit;
  background: var(--btn-secondary-bg, #f1f5f9);
  color: var(--muted, #6b7c93);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Once a specific set of people is recorded, the chip takes the eaters indigo
   so a set meal reads apart from one still on the "everyone" default. */
.history-card-eaters.is-set {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  border-color: #6366f1;
}

.history-card-eaters:hover {
  background: rgba(99, 102, 241, 0.18);
  color: #4338ca;
  border-color: #6366f1;
  box-shadow: 0 1px 5px rgba(79, 70, 229, 0.22);
}

.history-card-eaters-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-date {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--btn-secondary-bg, #f1f5f9);
  color: var(--muted, #6b7c93);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.history-card-date:hover {
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
  box-shadow: 0 1px 5px rgba(11, 45, 80, 0.1);
}

.history-card-date-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

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

.history-restore-btn {
  padding: 6px 12px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.history-restore-btn:hover {
  background: #dcfce7;
}

.history-delete-btn {
  padding: 6px 8px;
  background: transparent;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.history-delete-btn:hover {
  color: #ef4444;
  border-color: #fca5a5;
}

@media (max-width: 480px) {
  .queue-card-cook-btn {
    display: none;
  }
  .queue-card-actions {
    gap: 4px;
  }
  .queue-card-pills .queue-pill {
    max-width: 90px;
  }
}

/* ── Shopping List: Redesigned Components ─────────────────────────────────── */

/* Home view wrapper */
.sl-home {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Shopping List home: group head (mirrors .fridge-group-head) ─────────── */
.sl-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sl-group-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.sl-group-sub {
  margin: 0;
  color: var(--muted, #6b7c93);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 46ch;
}

.sl-count-tag {
  flex-shrink: 0;
  align-self: center;
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Create New button */
.sl-create-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  background: #2378e8;
  color: #fff;
  font-family: inherit;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(27, 111, 216, 0.28);
  transition: all 0.2s ease;
}

.sl-create-btn:hover {
  background: #3787ff;
  box-shadow: 0 6px 22px rgba(27, 111, 216, 0.38);
  transform: translateY(-1px);
}

.sl-create-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.sl-create-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sl-create-btn__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.sl-create-btn__sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

/* "Recent lists" label */
.sl-section-header {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  margin-bottom: 0.1rem;
}

/* List of past lists */
.sl-list-cards {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Individual list card */
.sl-list-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid rgba(200, 215, 235, 0.75);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: all 0.18s ease;
}

.sl-list-card:hover {
  border-color: rgba(27, 111, 216, 0.28);
  box-shadow: 0 4px 14px rgba(8, 52, 99, 0.09);
}

.sl-list-card__icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 111, 216, 0.07);
  border-radius: 10px;
}

.sl-list-card__icon img {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
}

.sl-list-card__body {
  flex: 1;
  min-width: 0;
}

.sl-list-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sl-list-card__title {
  flex: 1;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pencil that turns the card's date into an editable date field. */
.sl-date-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #6b7c93);
  font-size: 0.62rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sl-date-edit:hover {
  background: rgba(27, 111, 216, 0.08);
  border-color: rgba(27, 111, 216, 0.2);
  color: var(--accent, #1b6fd8);
}

.sl-date-input {
  flex-shrink: 0;
  max-width: 150px;
  padding: 0.2rem 0.45rem;
  border: 1.5px solid var(--accent, #1b6fd8);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  background: #fff;
}

.sl-list-card__count {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(27, 111, 216, 0.08);
  color: var(--accent, #1b6fd8);
}

.sl-list-card__preview {
  font-size: 0.75rem;
  color: var(--muted, #6b7c93);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-list-card__dishes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.sl-list-card__dish {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: rgba(27, 111, 216, 0.08);
  color: #1458b2;
  white-space: nowrap;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-list-card__dish--more {
  background: rgba(107, 124, 147, 0.12);
  color: var(--muted, #6b7c93);
}

.sl-list-card__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* View / Delete buttons on list cards */
.sl-btn-view,
.sl-btn-delete {
  padding: 0.38rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-btn-view {
  background: rgba(27, 111, 216, 0.09);
  color: var(--accent, #1b6fd8);
  border: 1px solid rgba(27, 111, 216, 0.2);
}

.sl-btn-view:hover {
  background: var(--accent, #1b6fd8);
  color: #fff;
  border-color: var(--accent, #1b6fd8);
}

.sl-btn-delete {
  background: rgba(199, 52, 52, 0.06);
  color: #c73434;
  border: 1px solid rgba(199, 52, 52, 0.18);
}

.sl-btn-delete:hover {
  background: #c73434;
  color: #fff;
  border-color: #c73434;
}

/* Small screens: the icon + date + dish pills + View/Delete buttons no
   longer fit comfortably in one horizontal row. Drop the "Shopping List —"
   prefix (the date alone is enough context here), let the date wrap instead
   of ellipsis-truncating, shrink the icon/pills, and turn the actions into a
   stretched vertical column so View/Delete fill the card's full height
   instead of floating as a skinny row surrounded by empty space. */
@media (max-width: 640px) {
  .sl-list-card {
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
  }

  .sl-list-card__icon {
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
  }

  .sl-list-card__icon img {
    width: 1.05rem;
    height: 1.05rem;
  }

  .sl-list-card__prefix {
    display: none;
  }

  .sl-list-card__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .sl-list-card__count {
    white-space: nowrap;
  }

  .sl-list-card__dish {
    max-width: 8rem;
  }

  .sl-list-card__actions {
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
  }

  .sl-btn-view,
  .sl-btn-delete {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
  }
}

/* Load more / empty state */
.sl-load-more {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
  color: var(--muted, #6b7c93);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-load-more:hover {
  background: rgba(27, 111, 216, 0.05);
  border-color: rgba(27, 111, 216, 0.3);
  color: var(--accent, #1b6fd8);
}

/* ── Shopping List: Delete Confirm Popup ─────────────────────────────────── */

.sl-confirm-box {
  max-width: 340px !important;
  text-align: center;
  padding: 2rem 1.75rem !important;
}

.sl-confirm-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.sl-confirm-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0 0 0.3rem;
}

.sl-confirm-sub {
  font-size: 0.8rem;
  color: var(--muted, #6b7c93);
  margin: 0 0 1.4rem;
}

.sl-confirm-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.sl-confirm-delete-btn {
  padding: 0.45rem 1.2rem;
  background: #c73434;
  color: #fff;
  border: 1px solid #c73434;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-confirm-delete-btn:hover {
  background: #a82828;
  border-color: #a82828;
}

/* ── Shopping List: Detail Action Bar ────────────────────────────────────── */

/* Sits flush against the main shell header — reads as a second toolbar row
   directly beneath it, not a floating bar with a gap above. Breaks out of
   #shopping-list-panel's own horizontal padding (negative margin) so its
   white background spans edge-to-edge like the header, then reapplies that
   inset as padding so the buttons still line up with the content below. */
.sl-action-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0.6rem 0.75rem;
  margin: 0 calc(-1 * var(--sl-bar-inset, 2rem)) 1.25rem;
  padding: 0.85rem var(--sl-bar-inset, 2rem);
  background: #fff;
  border-bottom: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  overflow-x: auto;
}

.sl-action-bar__right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0.35rem;
}

/* Back button — primary navigation */
.sl-back-btn {
  display: inline-flex;
  align-items: center;
  height: 2.1rem;
  padding: 0 0.9rem;
  background: transparent;
  border: 1px solid rgba(27, 111, 216, 0.2);
  border-radius: 10px;
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-back-btn:hover {
  background: rgba(27, 111, 216, 0.07);
  border-color: rgba(27, 111, 216, 0.35);
}

/* Toolbar action buttons (Full Screen, Edit, Done) */
.sl-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.1rem;
  padding: 0 0.85rem;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid rgba(27, 111, 216, 0.18);
  border-radius: 9px;
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-toolbar-btn:hover {
  background: rgba(27, 111, 216, 0.14);
  border-color: rgba(27, 111, 216, 0.3);
}

/* Icon-only variant (Full Screen) — square rather than text-wide padding */
.sl-toolbar-btn--icon {
  justify-content: center;
  width: 2.1rem;
  padding: 0;
  font-size: 0.85rem;
}

/* Print button variant */
.sl-toolbar-btn--print {
  background: #1b6fd8;
  color: #fff;
  border-color: #1b6fd8;
}

.sl-toolbar-btn--print:hover {
  background: #1559b3;
  border-color: #1559b3;
}

/* Apply Fridge variant — a green accent so this "smart" action stands out from
   the neutral Full Screen/Edit/Print buttons it sits alongside. */
.sl-toolbar-btn--accent {
  background: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.28);
  color: var(--accent-green, #28a745);
}

.sl-toolbar-btn--accent:hover {
  background: rgba(40, 167, 69, 0.18);
  border-color: rgba(40, 167, 69, 0.4);
}

.sl-toolbar-btn--accent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(27, 111, 216, 0.07);
  border-color: rgba(27, 111, 216, 0.18);
  color: var(--accent, #1b6fd8);
}

.sl-toolbar-btn--accent:disabled:hover {
  background: rgba(27, 111, 216, 0.07);
  border-color: rgba(27, 111, 216, 0.18);
}

/* ── Apply Fridge review modal ────────────────────────────────────────────── */

/* Shell mirrors #log-food-modal-content: a flush, non-scrolling .modal-header
   stays visible above the scrolling match list, and a pinned footer holds the
   Close button — so both stay on screen no matter how far the list scrolls. */
.sl-fridge-apply-content {
  padding: 0;
  height: auto;
  max-height: var(--popup-height-large);
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.sl-fridge-apply-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sl-fridge-apply-title {
  font-weight: 800;
  color: var(--text-header, #083463);
}

.sl-fridge-apply-sub {
  margin: 0 0 1.25rem 0;
  color: var(--muted, #6b7c93);
  font-size: 0.9rem;
}

.sl-fridge-apply-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sl-fridge-apply-count {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sl-fridge-apply-all-btn {
  padding: 0.45rem 1rem;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sl-fridge-apply-all-btn:hover:not(:disabled) {
  background: #23923d;
}

.sl-fridge-apply-all-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sl-fridge-apply-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sl-fridge-apply-row {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: opacity 0.2s ease;
}

.sl-fridge-apply-row--applied {
  opacity: 0.5;
}

.sl-fridge-apply-row__body {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sl-fridge-apply-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sl-fridge-apply-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7c93);
}

.sl-fridge-apply-item {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #05223a);
  overflow-wrap: break-word;
}

.sl-fridge-apply-detail {
  font-size: 0.8rem;
  color: var(--muted, #6b7c93);
}

.sl-fridge-apply-arrow {
  flex-shrink: 0;
  color: var(--accent, #1b6fd8);
  font-size: 0.9rem;
}

.sl-fridge-apply-note {
  margin: 0.6rem 0 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted, #6b7c93);
}

.sl-fridge-apply-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}

.sl-fridge-apply-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.sl-fridge-apply-badge--full {
  background: rgba(40, 167, 69, 0.12);
  color: #1e7a34;
}

.sl-fridge-apply-badge--partial {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}

.sl-fridge-apply-row-btn {
  flex-shrink: 0;
  padding: 0.4rem 1rem;
  background: #1b6fd8;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sl-fridge-apply-row-btn:hover:not(:disabled) {
  background: #1559b3;
}

.sl-fridge-apply-row-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.sl-fridge-apply-applied {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e7a34;
}

@media (max-width: 640px) {
  /* Compact the action bar so Back/Apply Fridge/Full Screen/Edit/Print stay
     in a single row on narrow phones instead of wrapping to a second line. */
  .sl-action-bar {
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
  }

  .sl-action-bar__right {
    gap: 0.3rem;
  }

  .sl-back-btn,
  .sl-toolbar-btn {
    height: 1.9rem;
    padding: 0 0.6rem;
    font-size: 0.76rem;
  }

  .sl-toolbar-btn--icon {
    width: 1.9rem;
    padding: 0;
  }

  .sl-fridge-apply-row__body {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .sl-fridge-apply-arrow {
    transform: rotate(90deg);
  }

  .sl-fridge-apply-outcome {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .sl-fridge-apply-row-btn {
    width: 100%;
  }
}

/* ── Shopping List: Items Container ──────────────────────────────────────── */

.sl-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1rem;
}

/* Category section headers */
.sl-category-header {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent, #1b6fd8);
}

.sl-category-header:first-child {
  margin-top: 0;
}

.sl-category-header h4 {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent, #1b6fd8);
  margin: 0;
}

/* Enhance existing shopping item containers within the panel */
#shopping-list-panel .shopping-item-container {
  background: #fff;
  border: 1px solid rgba(200, 215, 235, 0.75);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(8, 52, 99, 0.05);
  transition: all 0.15s ease;
}

#shopping-list-panel .shopping-item-container:hover {
  background: #f5faff;
  border-color: rgba(27, 111, 216, 0.3);
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.08);
}

/* ── Shopping List: Edit Mode ─────────────────────────────────────────────── */

.sl-edit-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(200, 215, 235, 0.75);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(8, 52, 99, 0.04);
}

.shopping-edit-input {
  flex: 1;
  border: 1px solid rgba(200, 215, 235, 0.8);
  border-radius: 7px;
  padding: 0.35rem 0.6rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-main, #05223a);
  background: #f8fbff;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.shopping-edit-input:focus {
  border-color: var(--accent, #1b6fd8);
  background: #fff;
}

.sl-remove-btn {
  padding: 0.3rem 0.55rem;
  background: rgba(199, 52, 52, 0.06);
  color: #c73434;
  border: 1px solid rgba(199, 52, 52, 0.18);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sl-remove-btn:hover {
  background: #c73434;
  color: #fff;
  border-color: #c73434;
}

.sl-add-item-btn {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem;
  background: rgba(27, 111, 216, 0.05);
  border: 1px dashed rgba(27, 111, 216, 0.3);
  border-radius: 10px;
  color: var(--accent, #1b6fd8);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sl-add-item-btn:hover {
  background: rgba(27, 111, 216, 0.1);
  border-color: var(--accent, #1b6fd8);
}

/* Add buttons row (Add Item + Add Header side-by-side) */
.sl-add-btns-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.sl-add-btns-row .sl-add-item-btn {
  margin-top: 0;
  flex: 1;
}

/* Add Header button variant — subtle distinction */
.sl-add-header-btn {
  background: rgba(27, 111, 216, 0.02);
  border-style: dashed;
  border-color: rgba(27, 111, 216, 0.2);
  color: rgba(27, 111, 216, 0.75);
}

/* Header edit row */
.sl-edit-row--header {
  background: rgba(27, 111, 216, 0.04);
  border-color: rgba(27, 111, 216, 0.25);
  border-left: 3px solid var(--accent, #1b6fd8);
}

.sl-header-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

/* ── Shopping List: Dishes header ─────────────────────────────────────────── */

.sl-dishes-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(180deg, #f4fbff, #eaf3ff);
  border: 1px solid rgba(27, 111, 216, 0.16);
  border-radius: 12px;
}

.sl-dishes-header__label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b7c93);
}

.sl-dishes-header__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sl-dish-pill {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  background: rgba(27, 111, 216, 0.1);
  color: #1458b2;
}

/* ── Shopping List: Store filter chips (view mode) ────────────────────────── */

.sl-store-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}

.sl-store-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--chip-color, #1b6fd8);
  background: color-mix(in srgb, var(--chip-color, #1b6fd8) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--chip-color, #1b6fd8) 35%, #fff);
  transition: all 0.15s ease;
}

.sl-store-filter-chip:hover {
  background: color-mix(in srgb, var(--chip-color, #1b6fd8) 20%, #fff);
}

.sl-store-filter-chip.is-active {
  color: #fff;
  background: var(--chip-color, #1b6fd8);
  border-color: var(--chip-color, #1b6fd8);
}

/* ── Shopping List: Store chip (on items) ─────────────────────────────────── */

.sl-store-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}

.sl-store-chip--editable .sl-store-chip__name {
  cursor: pointer;
}

.sl-store-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}

.sl-store-chip__remove:hover {
  background: rgba(0, 0, 0, 0.34);
}

/* Store area inside an edit row */
.sl-edit-row__store {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sl-edit-row__store .sl-store-chip {
  margin-left: 0;
}

.sl-add-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.3rem 0.6rem;
  background: #f3f8ff;
  color: #083463;
  border: 1px dashed #b8d2f2;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sl-add-store-btn:hover {
  background: #e7f1ff;
  border-color: var(--accent, #1b6fd8);
  border-style: solid;
}

/* ── Shopping List: Inline add affordance (edit mode) ─────────────────────── */

.sl-insert-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.55rem;
  position: relative;
}

.sl-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 1.6rem;
  padding: 0 0.7rem;
  background: #fff;
  border: 1px dashed rgba(27, 111, 216, 0.4);
  border-radius: 20px;
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.sl-insert-row:hover .sl-insert-btn,
.sl-insert-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.sl-insert-row--always {
  height: auto;
  margin-top: 0.35rem;
}

.sl-insert-row--always .sl-insert-btn {
  opacity: 1;
  transform: none;
  width: 100%;
  justify-content: center;
  background: rgba(27, 111, 216, 0.05);
  padding: 0.55rem;
}

.sl-insert-btn:hover {
  background: rgba(27, 111, 216, 0.12);
  border-style: solid;
}

.sl-insert-btn__plus {
  font-size: 1rem;
  line-height: 1;
}

.sl-insert-btn__hint {
  font-size: 0.78rem;
}

.sl-insert-row:not(.sl-insert-row--always) .sl-insert-btn__hint {
  display: none;
}

/* ── Shopping List: Popovers (add menu + store picker) ────────────────────── */

.sl-popover {
  z-index: 600;
  min-width: 180px;
  background: #fff;
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(8, 52, 99, 0.18);
  overflow: hidden;
  animation: sl-popover-in 0.12s ease;
}

@keyframes sl-popover-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.sl-add-popover {
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sl-add-popover__choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.sl-add-popover__choice:hover {
  background: #f0f6ff;
}

.sl-add-popover__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
  font-size: 0.85rem;
}

.sl-store-picker {
  width: 250px;
}

.sl-store-picker__search {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e3edf8;
}

.sl-store-picker__input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 700;
  color: #27496d;
  font-family: inherit;
}

.sl-store-picker__input::placeholder {
  color: #9fb3ca;
  font-weight: 600;
}

.sl-store-picker__list {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.25rem;
}

.sl-store-picker__item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.1s ease;
}

.sl-store-picker__item:hover {
  background: #f0f6ff;
}

.sl-store-picker__item.is-selected {
  background: #e8f2ff;
}

.sl-store-picker__pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  cursor: pointer;
  text-align: left;
}

.sl-store-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sl-store-picker__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-store-picker__delete {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.2rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.1s ease, background 0.1s ease;
}

.sl-store-picker__delete:hover {
  opacity: 1;
  background: rgba(199, 52, 52, 0.12);
}

.sl-store-picker__create {
  width: 100%;
  padding: 0.5rem 0.6rem;
  margin-top: 0.15rem;
  background: rgba(27, 111, 216, 0.06);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
}

.sl-store-picker__create:hover {
  background: rgba(27, 111, 216, 0.13);
}

.sl-store-picker__empty {
  padding: 0.7rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6e8198;
}

@media print {
  /* Hide all page chrome */
  #app-sidebar,
  #sidebar-close-btn,
  #shopping-list-action-bar,
  .sl-insert-row,
  .sl-store-filter-row,
  .sl-popover {
    display: none !important;
  }

  body {
    background: #fff !important;
    overflow: visible !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Flatten the entire layout so nothing clips */
  .app-layout {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  #app-main {
    display: block !important;
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .main-shell-header {
    display: none !important;
  }

  .main-shell-content {
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .main-shell-content .container {
    height: auto !important;
  }

  #app-container {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* Hide every panel view except the shopping list */
  .panel-view {
    display: none !important;
  }

  /* Un-absolute the shopping list view so it flows naturally */
  #shopping-list-view {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 1rem 2rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #shopping-list-panel {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  #shopping-list-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
  }

  #shopping-items .border-t-2 {
    border-color: #1b6fd8 !important;
  }

  .shopping-item-container {
    break-inside: avoid;
    box-shadow: none !important;
    background: #fff !important;
  }

  .shopping-item-text.line-through {
    color: #999 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Header Left
   ═══════════════════════════════════════════════════════════════════════════ */

.main-shell-header-left {
  display: flex;
  align-items: center;
  grid-column: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nutrition Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

.nutri-panel-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#nutri-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nutri-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.nutri-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}

/* ── Range switcher ──────────────────────────────────────────────────────── */

.nutri-range-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
}

/* On small screens the header switcher would wrap onto its own row under the
   "See how your meals add up..." text, out of sight once the meal history is
   scrolled into view. Swap it for a second instance anchored below the
   "+ Log food" button instead — same controls, better reach. Desktop keeps
   just the header copy. */
.nutri-range-switcher--mobile {
  display: none;
}

.nutri-range-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--muted, #6b7c93);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nutri-range-btn-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.72;
}

.nutri-range-btn:hover {
  color: var(--accent, #1b6fd8);
}

.nutri-range-btn.active {
  background: var(--accent, #1b6fd8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.nutri-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.nutri-stat-card {
  background: var(--bg-card, rgba(255, 255, 255, 0.8));
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.nutri-stat-value {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  line-height: 1.2;
}

.nutri-stat-value--macros {
  font-size: 1.05rem;
}

.nutri-stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
  margin-top: 0.15rem;
}

.nutri-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 0.4rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}

.nutri-trend-chip.up-good {
  background: rgba(40, 167, 69, 0.1);
  color: #1e8035;
}

.nutri-trend-chip.down-bad {
  background: rgba(199, 52, 52, 0.08);
  color: #c73434;
}

.nutri-trend-chip.neutral {
  background: rgba(107, 124, 147, 0.1);
  color: var(--muted, #6b7c93);
}

/* ── Bar chart ───────────────────────────────────────────────────────────── */

.nutri-chart {
  position: relative;
  height: 230px;
  padding-top: 28px;
}

.nutri-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100%;
}

.nutri-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
  position: relative;
}

.nutri-bar-track {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.nutri-bar {
  width: 100%;
  max-width: 42px;
  background: linear-gradient(180deg, #5da4f5 0%, var(--accent, #1b6fd8) 100%);
  border-radius: 8px 8px 0 0;
  min-height: 2px;
  transition: filter 0.15s ease;
}

.nutri-bar.empty {
  background: rgba(107, 124, 147, 0.14);
}

.nutri-bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1rem 0.45rem;
  background: var(--primary-navy, #083463);
  color: #fff;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 3;
}

.nutri-bar-col:hover .nutri-bar-value {
  opacity: 1;
}

.nutri-bar-col:hover .nutri-bar {
  filter: brightness(1.12);
}

.nutri-bar-day {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
  margin-top: 0.35rem;
  white-space: nowrap;
}

.nutri-bar-day.hidden-label {
  visibility: hidden;
}

.nutri-day-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
}

.nutri-day-badge.on {
  background: rgba(40, 167, 69, 0.14);
  color: #1e8035;
}

.nutri-day-badge.over {
  background: rgba(199, 52, 52, 0.12);
  color: #c73434;
}

.nutri-day-badge.none {
  visibility: hidden;
}

.nutri-target-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--primary-navy, #083463);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.nutri-target-label {
  position: absolute;
  right: 0;
  top: -1.15rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--primary-navy, #083463);
  white-space: nowrap;
}

.nutri-chart-hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--muted, #6b7c93);
}

.nutri-chart-notice {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted, #6b7c93);
  font-size: 0.875rem;
}

/* ── Data-quality notice ─────────────────────────────────────────────────── */

#nutri-data-quality.nutri-data-quality {
  background: #fff8e6;
  border: 1px solid rgba(180, 83, 9, 0.25);
}

.nutri-data-quality-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #b45309;
  margin: 0 0 0.35rem;
}

.nutri-data-quality-list {
  font-size: 0.78rem;
  color: #92610c;
  margin: 0;
}

/* ── Top meals & variety ─────────────────────────────────────────────────── */

.nutri-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.nutri-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.nutri-top-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.nutri-top-rank {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 111, 216, 0.08);
  color: var(--accent, #1b6fd8);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.nutri-top-title {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main, #05223a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nutri-count-pill {
  flex-shrink: 0;
  padding: 0.12rem 0.55rem;
  background: rgba(27, 111, 216, 0.09);
  color: var(--accent, #1b6fd8);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.nutri-variety-big {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0 0 0.25rem;
}

.nutri-variety-sub {
  font-size: 0.8rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

.nutri-variety-sub--spaced {
  margin-top: 0.5rem;
}

.nutri-muted-note {
  font-size: 0.82rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

/* ── Empty / notice states ───────────────────────────────────────────────── */

.nutri-empty-inner {
  text-align: center;
  padding: 3rem 1.25rem;
}

.nutri-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.nutri-empty-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0 0 0.35rem;
}

.nutri-empty-sub {
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

.nutri-restricted-block {
  max-width: 480px;
  margin: 1.5rem auto 0;
}

@media (max-width: 768px) {
  .nutri-restricted-block {
    margin: 1.25rem 1.25rem 0;
    max-width: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .nutri-two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .nutri-range-switcher {
    width: 100%;
  }

  .pb-header-actions .nutri-range-switcher {
    display: none;
  }

  .nutri-range-switcher--mobile {
    display: inline-flex;
  }

  .nutri-range-btn {
    flex: 1;
  }

  .nutri-chart {
    height: 190px;
  }

  .nutri-bars {
    gap: 3px;
  }
}

/* =====================================================================
   NUTRITION — FOOD LOG (Today view, logger modal, goals)
   ===================================================================== */

.nutri-view {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 2rem 2.5rem;
}

@media (max-width: 768px) {
  .nutri-view {
    padding: 1.25rem 1.25rem 2rem;
  }
}

.nutri-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Group headers ───────────────────────────────────────────────────────── */

.nutri-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.nutri-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0;
}

.nutri-group-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.nutri-group-tag.personal {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}

/* ── Daily summary: calorie ring + macro bars ────────────────────────────── */

.nutri-summary-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
}

.nutri-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex: 0 0 auto;
}

.nutri-ring {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}

.nutri-ring-track {
  fill: none;
  stroke: #e6eef9;
  stroke-width: 12;
}

.nutri-ring-progress {
  fill: none;
  stroke: var(--accent, #1b6fd8);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
}

.nutri-ring-progress.over {
  stroke: var(--danger, #d32f2f);
}

.nutri-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nutri-ring-consumed {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text-header, #083463);
  line-height: 1.05;
}

.nutri-ring-goal {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
}

.nutri-ring-remaining {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-green, #28a745);
}

.nutri-ring-remaining.over {
  color: var(--danger, #d32f2f);
}

.nutri-ring-remaining.muted {
  color: var(--muted, #6b7c93);
  font-weight: 700;
}

.nutri-macros {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 200px;
}

.nutri-macro-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.nutri-macro-name {
  color: var(--text-header, #083463);
}

.nutri-macro-vals {
  color: var(--muted, #6b7c93);
  font-weight: 700;
}

.nutri-macro-bar {
  height: 9px;
  border-radius: 999px;
  background: #eef2f8;
  overflow: hidden;
}

.nutri-macro-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.nutri-macro[data-macro="protein"] .nutri-macro-fill {
  background: #1b6fd8;
}
.nutri-macro[data-macro="carbs"] .nutri-macro-fill {
  background: #f59e0b;
}
.nutri-macro[data-macro="fat"] .nutri-macro-fill {
  background: #ef6c5a;
}

.nutri-macro-fill.over {
  background: var(--danger, #d32f2f);
}

.nutri-summary-empty {
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

/* ── Day navigator (which day the ring/macros above are showing) ─────────── */

.nutri-summary-daynav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  margin-bottom: -0.4rem;
}

.nutri-daynav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: #fff;
  color: var(--accent, #1b6fd8);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nutri-daynav-btn:hover:not(:disabled) {
  background: rgba(27, 111, 216, 0.08);
  border-color: var(--accent, #1b6fd8);
}

.nutri-daynav-btn:disabled {
  color: var(--border-subtle, #c8d7eb);
  cursor: not-allowed;
  opacity: 0.55;
}

.nutri-summary-daynav-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 128px;
}

.nutri-summary-daynav-label {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.nutri-summary-daynav-today {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent, #1b6fd8);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nutri-summary-daynav-today:hover {
  text-decoration: underline;
}

.nutri-goals-link {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  background: transparent;
  border: none;
  cursor: pointer;
}

.nutri-goals-link:hover {
  text-decoration: underline;
}

/* "Manage nutrients" flows inline in the goals form (unlike the corner-anchored
   .nutri-goals-link used elsewhere), so it needs to opt back out of absolute
   positioning or it escapes to the modal overlay and floats over the header. */
#goal-manage-nutrients {
  position: static;
  align-self: flex-end;
}

/* ── Summary card actions (nutrient filter + edit goals) ──────────────────── */

/* This row is deliberately NOT a floating corner overlay. .nutri-goals-link
   positions itself absolutely, which only worked while the macro column stayed
   short enough for align-items:center to hold it below the corner. Nutrients
   register themselves from scans now, so as soon as the column outgrows the
   140px ring it top-aligns and an absolute control lands on top of the first
   bar's value text. Giving the controls their own full-width row reserves the
   space instead, so they cannot collide at any nutrient count. */
.nutri-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  width: 100%;
  /* The card's 1.5rem flex gap is tuned for the ring/macros pair; pull this row
     back toward the content it sits above. */
  margin-bottom: -0.75rem;
}

.nutri-summary-actions .nutri-goals-link {
  position: static;
  top: auto;
  right: auto;
}

.nutri-filter-wrap {
  position: relative;
}

.nutri-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted, #6b7c93);
  background: transparent;
  border: none;
  cursor: pointer;
}

.nutri-filter-btn:hover,
.nutri-filter-btn.active {
  color: var(--accent, #1b6fd8);
}

.nutri-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 30;
  width: 15rem;
  padding: 0.75rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(8, 52, 99, 0.16);
}

.nutri-filter-panel.is-open {
  display: block;
}

.nutri-filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nutri-filter-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.nutri-filter-all {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nutri-filter-all:hover {
  text-decoration: underline;
}

/* The list is uncapped by design — nutrients accumulate as scans find them, so
   this scrolls rather than growing the popover off-screen. */
.nutri-filter-rows {
  display: flex;
  flex-direction: column;
  max-height: 15rem;
  overflow-y: auto;
}

.nutri-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.25rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  cursor: pointer;
}

.nutri-filter-row:hover {
  background: #f2f7fd;
}

.nutri-filter-row input {
  flex: 0 0 auto;
  accent-color: var(--accent, #1b6fd8);
  cursor: pointer;
}

.nutri-filter-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nutri-filter-unit {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
}

.nutri-filter-note {
  margin: 0.6rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted, #6b7c93);
}

/* Below this width the card centers and wraps, bringing the ring up under the
   corner controls. Reserving headroom for them means guessing their height, so
   instead they stop being corner controls: position:static drops them back into
   the flex flow and width:100% gives them their own line above the ring, which
   can't overlap by construction. Matches the existing 640px breakpoint where the
   card starts centering. */
@media (max-width: 640px) {
  /* Filter to the left, Edit goals to the right. Bunched at the end instead,
     the filter button sits too close to the right edge for its own popover:
     anchored right:0 to a wrap ~219px in, a 15rem panel hangs off the left of a
     375px screen. Splitting them lets the panel anchor leftward with room. */
  .nutri-summary-actions {
    justify-content: space-between;
  }

  .nutri-filter-panel {
    left: 0;
    right: auto;
    width: min(15rem, calc(100vw - 6rem));
  }
}

.nutri-log-btn {
  align-self: stretch;
  font-size: 1rem;
}

/* ── Logged-entries list ─────────────────────────────────────────────────── */

.nutri-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nutri-history-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent, #1b6fd8);
}

.nutri-history-day:first-child {
  margin-top: 0;
}

.nutri-history-day-cal {
  letter-spacing: 0;
  color: var(--muted, #6b7c93);
}

.nutri-log-empty {
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  text-align: center;
  padding: 1.5rem 0.5rem;
  margin: 0;
}

.nutri-log-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  background: #fff;
}

.nutri-log-info {
  flex: 1;
  min-width: 0;
}

.nutri-log-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.nutri-log-name-text {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nutri-log-meta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted, #6b7c93);
  margin-top: 0.15rem;
}

.nutri-log-cals {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-header, #083463);
  white-space: nowrap;
}

.nutri-log-cals small {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
}

.nutri-src-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(107, 124, 147, 0.12);
  color: var(--muted, #6b7c93);
}
.nutri-src-badge.label {
  background: rgba(27, 111, 216, 0.12);
  color: #1662c1;
}
.nutri-src-badge.photo {
  background: rgba(124, 92, 214, 0.14);
  color: #6b46c1;
}
.nutri-src-badge.library {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}
/* Origin badge for plan-sourced rows in the merged Meal History list. */
.nutri-src-badge.plan {
  background: rgba(27, 111, 216, 0.12);
  color: #1662c1;
}
/* Origin badge for a repeating-meal template's virtual (not-yet-logged) row. */
.nutri-src-badge.repeating {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
/* Family "Track who ate what": this plan row is already in the day's totals.
   Kelly-green, the sitewide "done" colour, to read as settled rather than
   pending like the blue Plan badge beside it. */
.nutri-src-badge.counted {
  background: rgba(40, 167, 69, 0.14);
  color: #1e7e34;
}

/* A faint tint sets plan rows apart from logged rows. Editing/dismissing a
   plan row only touches its Nutrition-tab display override, never the plan. */
.nutri-log-row.planned {
  background: rgba(27, 111, 216, 0.04);
}
/* Same idea for a repeating meal's virtual occurrence row. */
.nutri-log-row.repeating {
  background: rgba(217, 119, 6, 0.04);
}
/* A counted plan row isn't a suggestion — it's already in the totals, so it
   takes the green tint of the logged rows rather than the blue "planned" one. */
.nutri-log-row.planned.is-counted {
  background: rgba(40, 167, 69, 0.05);
}

/* Footnote under the ring when part of today's total came from the plan
   (family Track Eaters) rather than from something the user logged. */
.nutri-counted-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(40, 167, 69, 0.08);
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 600;
  color: #1e7e34;
}
.nutri-counted-note i {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

/* Repeating Meals card header — title + "Add" button on one row. */
.nutri-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.nutri-card-head-row .nutri-section-title {
  margin-bottom: 0;
}

/* Weekday picker for a repeating meal's "Weekly" rule. */
.nutri-weekday-row {
  display: flex;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.nutri-weekday-btn {
  flex: 1;
  padding: 6px 4px;
  border: 1px solid var(--border-subtle);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
}
.nutri-weekday-btn:hover {
  border-color: var(--accent);
  background: #f0f4ff;
}
.nutri-weekday-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* A paused repeating meal stays in the management list (so it's easy to find
   and re-enable) but reads as inactive. */
.nutri-repeat-paused {
  opacity: 0.55;
}

.nutri-log-cals-missing {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
}

.nutri-conf-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
.nutri-conf-chip.high {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}
.nutri-conf-chip.medium {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
.nutri-conf-chip.low {
  background: rgba(199, 52, 52, 0.1);
  color: #c73434;
}

.nutri-log-actions {
  display: flex;
  gap: 0.25rem;
}

.nutri-icon-btn {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nutri-icon-btn:hover {
  color: var(--accent, #1b6fd8);
  border-color: var(--accent, #1b6fd8);
}
.nutri-icon-btn.danger:hover {
  color: var(--danger, #d32f2f);
  border-color: var(--danger, #d32f2f);
}

/* ── Log Food modal ──────────────────────────────────────────────────────── */

/* Columns follow however many tabs the row actually has (2-up, 3-up, 4-up), so
   the two-tab Repeating Meal row fills its width instead of sitting half empty
   in the old fixed 4-column grid. */
.nutri-method-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 0.7rem;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
}

/* Only 4-up rows (Log Food's methods) get cramped on narrow screens; 2- and
   3-up rows stay on one line. */
@media (max-width: 479px) {
  .nutri-method-tabs:has(> :nth-child(4)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
}

.nutri-method-tab {
  padding: 0.45rem 0.4rem;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--muted, #6b7c93);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}
.nutri-method-tab:hover {
  color: var(--accent, #1b6fd8);
}
.nutri-method-tab.active {
  background: var(--accent, #1b6fd8);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
}

.nutri-capture-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nutri-capture-intro {
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  margin: 0;
  text-align: center;
}

.nutri-capture-zone {
  border: 2px dashed #7fb2f4;
  border-radius: 16px;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, #f9fcff 0%, #f2f8ff 100%);
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.nutri-capture-zone:hover {
  background: #edf5ff;
  border-color: var(--accent, #1b6fd8);
}
.nutri-capture-zone-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.nutri-capture-zone-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}
.nutri-capture-zone-sub {
  font-size: 0.78rem;
  color: var(--muted, #6b7c93);
  margin-top: 0.2rem;
}

.nutri-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.nutri-photo-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}
.nutri-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nutri-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 33, 61, 0.85);
  color: #fff;
  border: none;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.nutri-log-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
}
.nutri-log-loading p {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
  margin: 0;
}

/* ── Review & confirm form ───────────────────────────────────────────────── */

.nutri-review-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nutri-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.nutri-field-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7c93);
}

.nutri-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

.nutri-macro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.nutri-field input[type="date"] {
  min-width: 0;
  width: 100%;
}

/* The native date control has its own minimum rendering width (calendar
   icon + mm/dd/yyyy segments) that ignores CSS width/min-width on some
   mobile browsers, so splitting it into a half-width grid column can push
   it past the popup's right edge. Give Meal and Date each a full-width row
   once the popup is too narrow to fit both comfortably. */
@media (max-width: 768px) {
  .nutri-mealdate-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Manage nutrient types modal ─────────────────────────────────────────── */
/* Shares the .form-dialog shell (gradient card, flush header divider, footer
   bar) with the Request Picks / Create Poll / Pick Meals popups so it reads
   as part of the same popup family instead of the older flat .modal-content
   box it used to sit in. */

/* Deliberately NOT .form-field — that class's global
   `.form-field .form-input { width: 100% }` rule would cascade into every
   row's name input and unit select (both carry .form-input too) and fight
   the row's own sizing at equal specificity, stretching the unit select
   full-width and squashing the name input to nothing. */
.nutrient-manage-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nutrient-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nutrient-manage-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nutrient-manage-row .nutrient-manage-label {
  flex: 1;
  min-width: 0;
}

.nutrient-manage-row .nutrient-manage-unit-sel {
  width: 72px;
  flex-shrink: 0;
}

/* Sized to match the row's .form-input height so the whole row reads as one
   control group instead of the icon buttons looking undersized. */
.nutrient-manage-row .nutrient-manage-move,
.nutrient-manage-row .nutrient-manage-del {
  width: 2.65rem;
  height: 2.65rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d7e1ee;
  border-radius: var(--control-radius);
  background: #ffffff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted, #6b7c93);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.nutrient-manage-row .nutrient-manage-move:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background: #eef5ff;
  color: var(--primary-blue);
}

.nutrient-manage-row .nutrient-manage-move:disabled {
  opacity: 0.35;
  cursor: default;
}

.nutrient-manage-row .nutrient-manage-del:hover {
  border-color: var(--danger);
  background: #fdecea;
  color: var(--danger);
}

.nutrient-manage-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nutrient-manage-add .form-input[type="text"],
.nutrient-manage-add #nutrient-manage-name {
  flex: 1;
  min-width: 0;
}

.nutrient-manage-add #nutrient-manage-unit {
  width: 72px;
  flex-shrink: 0;
}

/* ── Calorie-goal toggle + slider (Daily goals modal) ────────────────────── */
.nutri-goal-calorie {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.04);
}

.nutri-goal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nutri-goal-slider-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nutri-goal-slider-row.disabled {
  opacity: 0.45;
}

.nutri-goal-slider-value {
  flex: 0 0 auto;
  min-width: 4.5rem;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--accent, #1b6fd8);
  white-space: nowrap;
}

/* Range input — mirrors the recipe-scale slider styling. */
.nutri-goal-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--ice-3, #d6e4f5);
  cursor: pointer;
  outline: none;
}
.nutri-goal-slider:disabled {
  cursor: not-allowed;
}
.nutri-goal-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #1b6fd8);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.nutri-goal-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.nutri-goal-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #1b6fd8);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
}
.nutri-goal-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ice-3, #d6e4f5);
}
.nutri-goal-slider:focus-visible {
  outline: 2px solid var(--accent, #1b6fd8);
  outline-offset: 4px;
}

/* iOS-style on/off switch. */
.nutri-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}
.nutri-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.nutri-switch-track {
  display: inline-block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--ice-3, #cdd9e8);
  transition: background 0.18s ease;
}
.nutri-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 45, 80, 0.35);
  transition: transform 0.18s ease;
}
.nutri-switch input:checked + .nutri-switch-track {
  background: var(--accent, #1b6fd8);
}
.nutri-switch input:checked + .nutri-switch-track .nutri-switch-thumb {
  transform: translateX(18px);
}
.nutri-switch input:focus-visible + .nutri-switch-track {
  outline: 2px solid var(--accent, #1b6fd8);
  outline-offset: 2px;
}

.nutri-review-hint {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-header, #083463);
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid rgba(27, 111, 216, 0.18);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  margin: 0;
}
.nutri-review-hint.low {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}

.nutri-computed-total {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent, #1b6fd8);
  margin: 0;
}

/* Portion scale widget (see #log-scale-panel). Matches the look of the
   library recipe editor's ingredient scale control (.ing-scale-* in
   library.css), but those rules are generated into plan-library.css nested
   under `.lib-scope` (the Library tab embed) and don't reach this modal, so
   the same design is restated here scoped to #log-scale-panel directly. */
#log-scale-panel.ing-scale-panel {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  background: var(--ice-1, #f4fbff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#log-scale-panel .ing-scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

#log-scale-panel .ing-scale-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-header, #083463);
  font-family: "Nunito", sans-serif;
}

#log-scale-panel .ing-scale-title i {
  color: var(--accent, #1b6fd8);
}

#log-scale-panel .ing-scale-value {
  min-width: 48px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent, #1b6fd8);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  text-align: center;
}

#log-scale-panel .ing-scale-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3, #cfe9ff);
  outline: none;
  cursor: pointer;
  margin: 2px 0 12px;
  padding: 0;
  border: none;
}

#log-scale-panel .ing-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent, #1b6fd8);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

#log-scale-panel .ing-scale-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

#log-scale-panel .ing-scale-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent, #1b6fd8);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
}

#log-scale-panel .ing-scale-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3, #cfe9ff);
}

#log-scale-panel .ing-scale-slider:focus-visible {
  outline: 2px solid var(--accent, #1b6fd8);
  outline-offset: 3px;
}

#log-scale-panel .ing-scale-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

#log-scale-panel .ing-scale-preset {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 8px;
  background: #fff;
  color: var(--text-main, #05223a);
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#log-scale-panel .ing-scale-preset:hover {
  background: var(--ice-2, #e6f1ff);
  border-color: var(--accent, #1b6fd8);
  color: var(--accent, #1b6fd8);
}

#log-scale-panel .ing-scale-note {
  display: flex;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #6b7c93);
}

#log-scale-panel .ing-scale-note i {
  margin-top: 2px;
  color: var(--accent, #1b6fd8);
  flex-shrink: 0;
}

#log-scale-panel .ing-scale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#log-scale-panel .ing-scale-btn-secondary {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: #fff;
  color: var(--muted, #6b7c93);
}

#log-scale-panel .ing-scale-btn-secondary:hover {
  background: var(--ice-2, #e6f1ff);
  color: var(--text-main, #05223a);
}

.nutri-field input.log-field-scaled {
  border-color: var(--accent, #1b6fd8);
  background: #eef6ff;
  box-shadow: 0 0 0 2px rgba(27, 111, 216, 0.12);
}

.nutri-servings-note {
  font-size: 0.74rem;
  color: var(--muted, #6b7c93);
  margin: 0;
}

@media (max-width: 640px) {
  .nutri-summary-card {
    justify-content: center;
  }
  .nutri-method-tab {
    font-size: 0.72rem;
    padding: 0.4rem 0.4rem;
  }
}

/* Toast animations (shared showToast helper) */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* =====================================================================
   FULL PLAN VIEW (printable / PDF overlay)
   ===================================================================== */

/* Trigger button shown in the calendar + queue headers */
.full-plan-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  background: var(--primary-blue);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.full-plan-trigger-btn:hover {
  background: var(--primary-navy);
}
.full-plan-trigger-btn i {
  font-size: 0.85em;
}

/* "+ Create Plan" — same shape and blue as .full-plan-trigger-btn and the
   rest of the header's action buttons, so the group reads as one consistent
   set. Sits first in .pb-header-actions on both the Calendar and List tabs. */
.create-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  background: var(--primary-blue);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, filter 0.15s ease;
}
.create-plan-btn:hover {
  background: var(--primary-navy);
}
.create-plan-btn i {
  font-size: 0.85em;
}

/* ≤640px: the List tab's 4-button group (Create Plan, View Full Plan,
   History, Add Meal) is too wide for one row at full desktop size and
   pushes Add Meal off screen. Keep all four inline on a single row —
   Shrink View Full Plan to its icon-only form and move it to the front,
   trim the other three down to compact padding/type, and space the whole
   group evenly across the header's full width. */
@media (max-width: 640px) {
  .queue-pb-header .pb-header-actions {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .queue-pb-header .full-plan-trigger-btn {
    order: -1;
    padding: 8px 10px;
  }
  .queue-pb-header .full-plan-trigger-btn span {
    display: none;
  }
  .queue-pb-header .create-plan-btn,
  .queue-pb-header .queue-history-btn,
  .queue-pb-header .queue-add-btn {
    padding: 7px 10px;
    font-size: 0.82rem;
    gap: 0.3rem;
  }
}

/* Overlay shell */
.full-plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.full-plan-overlay.hidden {
  display: none;
}

/* Toolbar — light frosted bar matching the family/fridge tabs and popups
   (navy title + blue-accent controls) rather than a stark navy strip. */
.full-plan-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  color: var(--text-header);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px rgba(8, 52, 99, 0.05);
}
.full-plan-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.full-plan-toolbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent);
  font-size: 1rem;
}
.full-plan-toolbar-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.full-plan-toolbar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header);
  line-height: 1.1;
}
.full-plan-toolbar-sub {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.full-plan-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fp-toolbar-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.4rem;
  padding: 8px 14px;
  height: 38px;
  font-size: 0.86rem;
  font-weight: 800;
  font-family: inherit;
  white-space: nowrap;
  color: var(--accent);
  background: rgba(27, 111, 216, 0.08);
  border: 1.5px solid rgba(27, 111, 216, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}
.fp-toolbar-btn:hover {
  background: rgba(27, 111, 216, 0.15);
  border-color: rgba(27, 111, 216, 0.4);
  transform: translateY(-1px);
}
.fp-toolbar-btn--primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.3);
}
.fp-toolbar-btn--primary:hover {
  background: #3787ff;
  border-color: #3787ff;
}
.fp-toolbar-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.fp-toolbar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  color: var(--muted);
  background: #eef2f7;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fp-toolbar-close:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

/* Scope popover */
.full-plan-scope-wrap {
  position: relative;
}
.full-plan-scope-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 250px;
  padding: 1rem;
  background: #fff;
  color: var(--text-main);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
}
.full-plan-scope-popover.hidden {
  display: none;
}
.fp-scope-label {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.fp-scope-label strong {
  color: var(--primary-navy);
}
.fp-scope-input {
  width: 100%;
  padding: 9px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
}
.fp-scope-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.fp-scope-cancel,
.fp-scope-apply {
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.fp-scope-cancel {
  background: #f1f5f9;
  color: var(--muted);
  border: 1.5px solid var(--border-subtle);
}
.fp-scope-apply {
  background: var(--primary-blue);
  color: #fff;
  border: 1.5px solid var(--primary-blue);
}

/* Scroll area + paper — the document reads as a sheet of paper floating on a
   soft tinted backdrop (matches the app's frosted card surfaces). The print
   media query below strips the shadow/radius/padding so paper output stays
   edge-to-edge. */
.full-plan-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #eef4fb;
  padding: 2rem 1rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.full-plan-document {
  width: 100%;
  max-width: 8.5in;
  background: #fff;
  color: var(--text-main);
  padding: 2.25rem 0.5in 0.8in;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(8, 52, 99, 0.12);
}

.fp-loading,
.fp-no-meals {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1rem;
  font-weight: 700;
}

/* Cover */
.fp-cover {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--primary-blue);
}
.fp-cover-brand {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin: 0 0 0.35rem;
}
.fp-cover-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary-navy);
  margin: 0 0 0.25rem;
}
.fp-cover-sub {
  font-size: 1rem;
  font-weight: 800;
  color: var(--muted);
  margin: 0;
}
.fp-cover-range {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0.35rem 0 0;
}
.fp-cover-generated {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

/* Day / queue-item section */
.fp-day {
  margin-bottom: 1.6rem;
}
.fp-day-head {
  margin-bottom: 0.75rem;
  break-after: avoid;
  page-break-after: avoid;
}

/* Bundles a heading with the first block of content that follows it (e.g. a
   day/meal heading + the first dish). This is what actually keeps a heading
   from being stranded alone at the bottom of a page: if the group doesn't
   fit in the remaining space, break-inside forces the WHOLE group (heading
   included) onto the next page instead of leaving the heading behind with a
   blank gap under it. Only the first dish is bundled — later dishes in the
   same meal still flow/break normally. */
.fp-head-group {
  break-inside: avoid;
  page-break-inside: avoid;
}
.fp-day-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--primary-navy);
  background: none;
  padding: 0 0 0.4rem;
  border-bottom: 3px solid var(--primary-navy);
  margin: 0;
}
.fp-no-meals {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
  padding: 0.4rem 0.2rem 0.2rem;
  margin: 0;
}

/* Meal */
.fp-meal {
  margin-bottom: 1rem;
  padding-left: 0.25rem;
}
.fp-meal-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--primary-navy);
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1.5px dashed var(--ice-3);
  break-after: avoid;
  page-break-after: avoid;
}
.fp-empty-meal {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

/* Dish */
.fp-dish {
  break-inside: avoid;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.7rem;
  background: var(--ice-1);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--primary-blue);
  border-radius: 8px;
}
.fp-dish--side {
  border-left-color: var(--accent-green);
}
.fp-dish-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fp-role-tag {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-blue);
  padding: 2px 8px;
  border-radius: 999px;
}
.fp-role-tag--side {
  background: var(--accent-green);
}
.fp-dish-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}
.fp-deleted-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #b42318;
  background: #fde7e5;
  padding: 2px 8px;
  border-radius: 999px;
}

.fp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.1rem;
}
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--primary-navy);
  background: #fff;
  border: 1px solid var(--ice-3);
  padding: 3px 9px;
  border-radius: 999px;
}

.fp-dish-cols {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.85rem;
  margin-top: 0.65rem;
}
.fp-block-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 0.3rem;
}
.fp-dish-cols ul,
.fp-dish-cols ol {
  margin: 0;
  padding-left: 1.15rem;
}
.fp-dish-cols li {
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 0.15rem;
}
.fp-dish-cols .dish-text {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
}

.fp-notes {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--ice-3);
}
.fp-notes p {
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-main);
}

@media (max-width: 640px) {
  .fp-dish-cols {
    grid-template-columns: 1fr;
  }
  .full-plan-toolbar-title {
    display: none;
  }
  .fp-toolbar-btn span {
    display: none;
  }
}

/* ── Print: isolate the document ──────────────────────────────────────── */
@media print {
  body.full-plan-printing #full-plan-overlay {
    position: static !important;
    display: block !important;
    background: #fff !important;
  }
  body.full-plan-printing .full-plan-toolbar,
  body.full-plan-printing .full-plan-scope-popover {
    display: none !important;
  }
  body.full-plan-printing .full-plan-scroll {
    overflow: visible !important;
    padding: 0 !important;
    display: block !important;
  }
  body.full-plan-printing .full-plan-document {
    max-width: none !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
  /* Hide the rest of the app while printing the plan */
  body.full-plan-printing #app-layout {
    display: none !important;
  }
  body.full-plan-printing {
    background: #fff !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* A full dish (ingredients + all recipe steps) is routinely taller than a
     single printed page, so it — and the .fp-head-group that bundles the
     first dish with its heading — must NOT be break-inside: avoid here: a
     block taller than one page can never satisfy "don't break inside me",
     and Chrome's fragmenter responds by stranding the heading alone and
     reserving blank space while it repeatedly tries (and fails) to push the
     oversized block onto a fresh page. Only the small, genuinely atomic
     pieces (a heading, a dish's title/badge row) stay glued together; the
     ingredient list and recipe steps are left free to break across pages
     like normal text. */
  .fp-head-group,
  .fp-dish {
    break-inside: auto;
    page-break-inside: auto;
  }
  .fp-dish-head {
    break-inside: avoid;
    break-after: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  /* CSS grid does not fragment across printed pages in Chromium — it either
     fits whole or forces large blank gaps. Stack the two columns instead so
     the ingredient list and recipe steps can break normally. */
  .fp-dish-cols {
    display: block;
  }
  .fp-dish-cols .fp-col + .fp-col {
    margin-top: 0.65rem;
  }
  .fp-dish-cols li {
    break-inside: avoid;
  }
}

/* ============================================================
   MEAL BUILDER DASHBOARD (plan-builder-view)
   ============================================================ */
.plan-builder-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* Build Your Plan topbar — stands in for both the global .main-shell-header
   (hidden for this view, see body.pbv-active) and the shared .pb-header used
   elsewhere, so its subtitle can stay put at every width. Mirrors the card
   gradient used by .form-dialog for a consistent themed look. */
.pbv-topbar {
  flex-shrink: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}
.pbv-topbar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.pbv-title {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.15;
}
.pbv-title i {
  color: var(--accent);
  font-size: 0.85em;
  margin-right: 0.45rem;
}
.pbv-cancel-btn {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.pbv-cancel-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--ice-2);
}
.pbv-done-btn {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
}
.pbv-subtitle {
  margin: 0.6rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.pb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.pb-header-text .section-subtitle {
  margin: 0;
}
.pb-header-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* The Family List view's container isn't a flex-gap column, so the header bar
   needs explicit spacing before the list below it. */
.queue-pb-header {
  margin-bottom: 20px;
}

/* The calendar view isn't a flex-gap column either, so the header bar needs
   explicit spacing before the week-navigation strip below it. */
.calendar-pb-header {
  margin-bottom: 1.5rem;
}

/* Suggestions/Library switch — desktop shows both panels side by side (see
   .pb-dashboard below) so this stays hidden until the <=768px media query
   turns it into a single-pane switch, mirroring .picker-scope-btn's
   light-card segmented-control look used elsewhere in this same panel. */
.pb-mode-toggle {
  display: none;
  gap: 0.5rem;
}
.pb-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-subtle);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.18s ease;
}
.pb-mode-btn:hover {
  border-color: var(--accent);
  background: #f0f4ff;
}
.pb-mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Two-panel dashboard. Panels stretch to equal height (grid default), and each
   panel's body scrolls internally so the page itself never scrolls.
   Column gap is wider than row gap to keep an airy gutter between panels. */
.pb-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1rem;
  column-gap: 2.5rem;
  min-height: 0;
}
.pb-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.pb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pb-panel-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-header);
}
.pb-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: 2px;
}
.pb-empty-hint {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.25rem 0.5rem;
}

/* Suggestions panel */
#pb-suggest-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pb-idea {
  width: 100%;
  resize: none;
  min-height: 64px;
}
.pb-suggest-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pb-suggest-actions .btn-primary,
.pb-suggest-actions .btn-secondary {
  flex: 1;
  min-width: 130px;
}
/* Compact "Meal of the Week" pill, top-right of the suggestions panel head */
.pb-motw-link {
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-weight: 800;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  white-space: nowrap;
}
.pb-motw-link:hover {
  opacity: 0.92;
}

/* Centered placeholder box shown in a panel body while it's empty/loading */
.pb-panel-body--empty {
  justify-content: center;
  align-items: center;
}
.pb-placeholder {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border-subtle);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--muted);
  text-align: center;
}
.pb-placeholder-icon {
  font-size: 1.9rem;
  line-height: 1;
}
.pb-placeholder-text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 30ch;
}
.pb-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* Library filter row — search input + filter icon button (shares the Add
   Meals popup's picker-filter-btn/picker-filter-panel pattern, scoped in the
   "Library-style icon-only filter" block below). position:relative anchors
   the floating filter panel to this row. */
.pb-filter-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  position: relative;
}
.pb-search {
  height: 2.65rem;
  flex: 1 1 auto;
  min-width: 130px;
}

/* Source cards (suggestions + library) */
.pb-source-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pb-source-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pb-source-name {
  font-weight: 800;
  color: var(--text-header);
}
.pb-source-meta {
  font-size: 0.8rem;
  color: var(--muted);
}
/* Time / calories / servings chips on a generated-idea card. */
.pb-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pb-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: #eef5ff;
  color: var(--primary-navy, #1b4f8a);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pb-meta-chip i {
  font-size: 0.72rem;
  opacity: 0.75;
}
.pb-type-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.pb-type-badge--main {
  background: #e6f1ff;
  color: var(--primary-navy);
}
.pb-type-badge--side {
  background: #e9f9ee;
  color: #1c6b34;
}
.pb-source-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pb-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.pb-add-new,
.pb-add-to {
  border: 1.5px solid var(--primary-blue);
  background: var(--primary-blue);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
}
.pb-add-to {
  background: #fff;
  color: var(--primary-blue);
}
.pb-add-new:hover {
  filter: brightness(0.95);
}
.pb-add-to:hover {
  background: var(--ice-2);
}
.pb-expand {
  border: none;
  background: transparent;
  color: var(--primary-blue);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.pb-expand .msc-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.pb-expand[aria-expanded="true"] .msc-chevron {
  transform: rotate(180deg);
}

/* Add-to picker modal */
.pb-add-to-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pb-add-to-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.pb-add-to-row:hover {
  border-color: var(--primary-blue);
  background: var(--ice-1);
}
.pb-add-to-pills {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}
.pb-add-to-pills .queue-card-recipe-group {
  flex-wrap: wrap;
}

/* View List / View Calendar popup (opened from .pb-view-toggle-btn) */
.pb-view-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pb-view-section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pb-view-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--ice-2);
  color: var(--primary-navy, #1b4f8a);
  font-size: 0.7rem;
  font-weight: 800;
}
/* Meal detail cards reuse the Library tab's Add-to-List/Add-to-Calendar
   target-card look (.queue-target-card + .queue-pill — see the unscoped
   copies above .queue-card-meta, needed because this popup is appended to
   document.body, outside the Library tab's .lib-scope) — .queue-card-top
   holds the meal name + recipe count, .queue-card-detail-body always shows
   the full Mains/Sides pill lists below it. Just two small additions here:
   the meal name (that card was built for a fixed "Add Here" button, not a
   title) and a "New" badge for meals staged this session. */
.pb-view-meal-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text-header);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-view-new-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: #16a34a;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.queue-target-card.pb-view-card-new {
  border-color: rgba(22, 163, 74, 0.35);
  background: #f6fef9;
}
.pb-view-empty-inline {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}
.pb-view-cal-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  background: rgba(27, 111, 216, 0.07);
  color: var(--primary-navy, #1b4f8a);
  font-size: 0.8rem;
  font-weight: 600;
}
.pb-view-cal-hint-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem 0.7rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}
.pb-view-cal-hint-empty i {
  color: var(--accent);
}
.pb-view-cal-day-detail {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}
.pb-view-cal-day-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-header);
}
/* Day zones here are real, clickable buttons (unlike the read-only preview
   they started as) — clicking one swaps which day's cards show below, same
   pick-a-day interaction as .pb-assign-day-zone, just without a booking
   step after it. */
.pb-assign-day-zone.pb-view-cal-zone.is-today {
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.pb-assign-day-zone.pb-view-cal-zone.selected.is-today {
  box-shadow: 0 0 0 2px #fff inset;
}

/* Bottom tray — fixed at the bottom of the builder column. Grows to its
   natural content height (never its own vertical scrollbar) — .pb-dashboard
   above yields the space first (see its flex:1/min-height), and
   .plan-builder-view itself is the scroll fallback if the tray ever outgrows
   the whole view. */
.pb-tray {
  flex-shrink: 0;
  background: rgba(244, 251, 255, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.6rem 0.75rem;
}
.pb-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.4rem;
}
.pb-tray-head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-width: 0;
}
.pb-tray-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--text-header);
  white-space: nowrap;
}
.pb-tray-title-short {
  display: none;
}
.pb-tray-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pb-tray-chip {
  display: inline-flex;
  align-items: center;
  background: #eef5ff;
  color: var(--primary-navy, #1b4f8a);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Collapse toggle — only ever shown at <=768px (see mobile media query
   below); on desktop the tray stays permanently expanded, same as before. */
.pb-tray-toggle {
  display: none;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
}
.pb-tray-toggle .msc-chevron {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.pb-tray-toggle[aria-expanded="false"] .msc-chevron {
  transform: rotate(-90deg);
}
/* Groups View List/Calendar + Create Meal together on the right of the tray
   head, so they stay adjacent no matter how .pb-tray-head-main wraps. */
.pb-tray-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pb-add-empty-btn {
  flex-shrink: 0;
  border: 1.5px dashed var(--primary-blue);
  background: transparent;
  color: var(--primary-blue);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.pb-add-empty-btn:hover {
  background: var(--ice-2);
}
.pb-view-toggle-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--primary-navy, #1b4f8a);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pb-view-toggle-btn:hover {
  border-color: var(--primary-blue);
  background: var(--ice-2);
}
.pb-view-toggle-btn i {
  font-size: 0.72rem;
}
.pb-tray-empty {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 0.75rem 0;
}
.pb-tray-list {
  list-style: none;
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.25rem 0.1rem 0.4rem;
  margin: 0;
}
.pb-tray-card {
  flex: 0 0 auto;
  max-width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pb-tray-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
/* Circular icon button — clearer tap target and less alarming than a bare
   red "x" glyph, while still reading as a destructive action on hover. */
.pb-tray-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: var(--btn-secondary-bg, #f1f5f9);
  color: var(--muted, #6b7280);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.pb-tray-remove svg {
  width: 12px;
  height: 12px;
}
.pb-tray-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}
/* Pill body — Mains/Sides groups, always visible (no expand/collapse; the
   pills already show the full dish names). */
.pb-tray-pills {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pb-tray-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
}
.pb-tray-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-tray-pill .pb-dish-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}
.pb-tray-pill .pb-dish-remove:hover {
  opacity: 1;
}
.pb-dish-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}
.pb-tray-rename {
  align-self: flex-start;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--primary-blue);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}
.pb-tray-rename:hover {
  border-color: var(--primary-blue);
}

/* Calendar-mode day assignment */
.builder-assign-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pb-assign-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Context strip: mirrors the tinted info-bar used on the Nutrition tab and the
   Add To Calendar picker. */
.pb-assign-context {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  background: rgba(27, 111, 216, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0;
}
.pb-assign-context i {
  color: var(--accent);
  flex-shrink: 0;
}

/* Shared card surface (mirrors .nutri-card): white, subtle border, soft shadow. */
.pb-assign-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  padding: 1.1rem 1.2rem 1.25rem;
}

.pb-assign-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}
.pb-assign-card-title i {
  color: var(--accent);
  font-size: 0.85rem;
}

/* ── "Already on this day" context list ──────────────────────────────────── */
.pb-planned-meals {
  display: flex;
  flex-direction: column;
}
.pb-planned-meal + .pb-planned-meal {
  border-top: 1px solid var(--border-subtle);
}
.pb-planned-meal-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.pb-planned-meal-head:hover {
  background: var(--ice-1, #f4fbff);
}
.pb-planned-caret,
.pb-assign-caret {
  color: var(--muted);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.pb-planned-meal-head.is-open .pb-planned-caret,
.pb-assign-meal-head.is-open .pb-assign-caret {
  transform: rotate(90deg);
  color: var(--accent);
}
.pb-planned-meal-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-header);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-planned-meal-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.pb-planned-dishes {
  padding: 0.2rem 0.8rem 0.7rem 1.9rem;
  background: #fff;
}

/* ── Shared dish list (built meals + planned meals) ──────────────────────── */
.pb-dish-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.15rem 0;
}
.pb-dish-role {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
}
.pb-dish-role--main {
  background: #dbeafe;
  color: #1e40af;
}
.pb-dish-role--side {
  background: #dcfce7;
  color: #166534;
}
.pb-dish-names {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
}
.pb-dish-empty {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
}

/* ── Built-meal assignment card ──────────────────────────────────────────── */
.pb-assign-meal-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pb-assign-meal-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.pb-assign-meal-name {
  flex: 1;
  font-weight: 900;
  font-size: 1rem;
  color: var(--text-header);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-assign-meal-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.pb-assign-meal-dishes,
.pb-assign-meal-days {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pb-assign-meal-dishes {
  color: var(--muted);
  background: var(--ice-2, #eef6ff);
}
.pb-assign-meal-days {
  color: var(--accent);
  background: rgba(27, 111, 216, 0.12);
}
.pb-assign-meal-dishlist {
  padding: 0.1rem 0 0.85rem 1.55rem;
}

/* "Add" toggle button per meal, scoped to the currently selected day. */
.pb-assign-add-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pb-assign-add-btn:hover:not(:disabled) {
  background: var(--primary-navy, #0f4c81);
  border-color: var(--primary-navy, #0f4c81);
}
.pb-assign-add-btn.is-added {
  background: #fff;
  color: #16a34a;
  border-color: #16a34a;
}
.pb-assign-add-btn.is-added:hover:not(:disabled) {
  background: #f0fdf4;
}
.pb-assign-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pb-assign-meal-targets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Day picker (Step 1): mirrors the Add To Calendar week grid so both flows
   share one visual language. `.lib-day-zone`/`.add-cal-*` classes come from
   plan-library.css; these rules just re-scope the `#calendar-week-container`
   layout to this view's own grid class. */
.pb-assign-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}
.pb-assign-week-grid .sched-day-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}
.pb-assign-week-grid .sched-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pb-assign-week-grid .sched-day-name {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.pb-assign-week-grid .sched-day-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.1;
}
/* Step wrapper (mirrors the Add To Calendar picker's card-per-step look, but
   defined here rather than in the generated plan-library.css since this view
   sits outside that file's `.lib-scope`). */
.pb-assign-step {
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}
.pb-assign-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 12px;
}
.pb-assign-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.3);
}

.pb-assign-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 12px;
}
.pb-assign-week-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: rgba(27, 111, 216, 0.07);
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pb-assign-week-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.pb-assign-week-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pb-assign-week-label {
  min-width: 150px;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-header);
}

.pb-assign-day-zone {
  appearance: none;
  font-family: inherit;
  position: relative;
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  border: 2px solid var(--border-subtle, #d7e1ee);
  background: #f7fbff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  outline: none;
  padding: 5px 6px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(8, 52, 99, 0.04);
}
.pb-assign-day-zone-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pb-assign-day-zone-count {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 20px;
  padding: 1px 5px;
  line-height: 1.4;
  white-space: nowrap;
}
.pb-assign-day-zone-names {
  font-size: 9px;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.pb-assign-day-zone:hover:not(:disabled):not(.past) {
  border-color: var(--accent);
  background: #eff6ff;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.18);
}
.pb-assign-day-zone:focus-visible:not(.past) {
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.35);
}
.pb-assign-day-zone.has-meals {
  border-color: rgba(27, 111, 216, 0.35);
  background: rgba(27, 111, 216, 0.06);
}
.pb-assign-day-zone.has-meals .pb-assign-day-zone-count {
  background: #2563eb;
}
.pb-assign-day-zone.selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(27, 111, 216, 0.3);
}
.pb-assign-day-zone.selected .pb-assign-day-zone-count {
  background: #fff;
  color: var(--accent);
}
.pb-assign-day-zone.selected .pb-assign-day-zone-names {
  color: #fff;
}
.pb-assign-day-zone.past {
  background: #eef2f7;
  border-color: var(--border-subtle);
  cursor: not-allowed;
  opacity: 0.45;
}
/* Small "+N" badge for meals assigned this session, distinct from the
   existing-plan count shown by `.pb-assign-day-zone-count`. */
.pb-assign-day-new-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  background: #16a34a;
  border-radius: 999px;
  padding: 1px 5px;
}
.pb-assign-day-zone.selected .pb-assign-day-new-badge {
  background: #fff;
  color: #16a34a;
}

.pb-assign-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(27, 111, 216, 0.05);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
}
.pb-assign-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pb-assign-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.pb-assign-legend-dot--available {
  background: #f7fbff;
  border-color: var(--border-subtle, #d7e1ee);
}
.pb-assign-legend-dot--has-meals {
  background: rgba(27, 111, 216, 0.2);
  border-color: rgba(27, 111, 216, 0.5);
}
.pb-assign-legend-dot--selected {
  background: var(--accent);
  border-color: var(--accent);
}
.pb-assign-legend-dot--past {
  background: #eef2f7;
  border-color: var(--border-subtle);
  opacity: 0.45;
}

.pb-assign-day-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.pb-assign-day-date {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
}
.pb-assign-day-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(27, 111, 216, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pb-assign-legacy-notice {
  font-size: 13px;
  color: #b45309;
  font-weight: 600;
  background: #fef3c7;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.pb-assign-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.pb-assign-empty-hint i {
  font-size: 1rem;
  color: var(--accent);
}

/* Preferences modal: opt-in fridge autofill */
.pb-autofill-btn {
  align-self: flex-start;
  margin-top: -0.25rem;
  border: 1.5px solid var(--primary-blue);
  background: var(--ice-2);
  color: var(--primary-navy);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pb-autofill-btn:hover {
  background: var(--ice-3);
}
.pb-autofill-btn[hidden] {
  display: none;
}

/* Desktop: builder fills the viewport so the page never scrolls; the dashboard
   grows to fill the gap between header and tray, and panels scroll internally.
   Neither view has a 104px .main-shell-header to subtract here — .pbv-topbar
   replaces it in-flow (see body.pbv-active), so only #app-container's
   padding counts. */
@media (min-width: 769px) {
  .builder-assign-view {
    height: calc(100dvh - 4.25rem);
    /* On short screens, don't crush the panels — keep the view tall enough to
       hold the dashboard floor + tray, and let .main-shell-content scroll
       rather than clipping the tray. */
    min-height: 620px;
    overflow: hidden;
  }
  /* Same bounded-height treatment as .builder-assign-view just above: the
     tray never grows tall (.pb-tray-list scrolls horizontally, one row of
     cards), so the view's height can be a hard cap — the Suggestions/Library
     panels are the only thing that scroll, via their own .pb-panel-body. */
  .plan-builder-view {
    height: max(620px, calc(100dvh - 4.25rem));
    overflow: hidden;
  }
  .pb-dashboard {
    flex: 1;
    /* Guarantee the Library / Suggestions panels stay readable; the tray yields
       space rather than the panels collapsing. */
    min-height: 340px;
  }
  .pb-assign-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Mobile: single-pane (see .pb-mode-toggle below) — the active panel fills
   whatever height .plan-builder-view has (see the height-cap media queries
   further down), so its own .pb-panel-body scroll is all that's needed; the
   page itself never scrolls, same guarantee as desktop. */
@media (max-width: 768px) {
  .pb-mode-toggle {
    display: flex;
  }
  /* Topbar shrinks to a tight icon-only Cancel + smaller title, but the
     subtitle underneath always stays visible — .main-shell-header is gone in
     this view (body.pbv-active), so there's room for it at every width. */
  .pbv-topbar {
    padding: 0.75rem 0.85rem;
  }
  .pbv-topbar-row {
    gap: 0.5rem;
  }
  .pbv-title {
    font-size: 1.15rem;
  }
  .pbv-cancel-btn {
    padding: 0.5rem 0.6rem;
  }
  .pbv-cancel-btn span {
    display: none;
  }
  .pbv-subtitle {
    font-size: 0.8rem;
    margin-top: 0.45rem;
  }
  /* Single-pane: swap grid for a flex column so the one visible panel (the
     other is display:none via data-active-panel below) fills all the height
     .pb-dashboard has, instead of both sharing a grid row's auto height. */
  .pb-dashboard {
    display: flex;
    flex-direction: column;
  }
  .pb-dashboard .pb-panel {
    flex: 1;
    min-height: 0;
  }
  .pb-dashboard[data-active-panel="suggestions"] .pb-library-panel,
  .pb-dashboard[data-active-panel="library"] .pb-suggestions-panel {
    display: none;
  }
  /* Tighten the Current Selection head row so the title, chip, and Create
     Meal button all fit on one line down to narrow phone widths. "Current
     Selection" swaps to just "Selection" here — the mode toggle right below
     already makes clear what's being selected, so the fuller label is only
     needed on desktop where space isn't tight. */
  .pb-tray {
    padding: 0.5rem 0.6rem;
  }
  .pb-tray-head {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }
  .pb-tray-head-main {
    gap: 0.3rem;
    min-width: 0;
  }
  .pb-tray-title-full {
    display: none;
  }
  .pb-tray-title-short {
    display: inline;
  }
  .pb-tray-title {
    font-size: 0.82rem;
  }
  .pb-tray-chip {
    padding: 0.15rem 0.4rem;
    font-size: 0.68rem;
  }
  .pb-add-empty-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  .pb-view-toggle-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  .pb-tray-head-actions {
    gap: 0.35rem;
  }
  .pb-tray-toggle {
    display: inline-flex;
  }
  .pb-tray.is-collapsed .pb-tray-list,
  .pb-tray.is-collapsed .pb-tray-empty {
    display: none;
  }
}

/* Icon-only View List/Calendar button on the narrowest phones — text label
   is redundant once the icon + the mode toggle below already say "you're
   choosing a view", and the row is otherwise too tight for it. */
@media (max-width: 480px) {
  .pb-view-toggle-label {
    display: none;
  }
  .pb-view-toggle-btn {
    padding: 0.3rem 0.45rem;
  }
}

/* Mobile height caps — same "page must never scroll" guarantee as desktop
   (mirrors #queue-history-view's identical three-tier formula), just for
   .plan-builder-view. No .main-shell-header to subtract here (it's hidden
   via body.pbv-active — .pbv-topbar replaces it in-flow instead), so only
   #app-container's vertical padding counts, and that changes at these
   breakpoints, hence two totals. */

/* 641-768px: #app-container padding is 3rem 1rem 1.5rem (4.5rem vertical). */
@media (max-width: 768px) and (min-width: 641px) {
  .plan-builder-view {
    height: max(480px, calc(100dvh - 4.5rem));
    overflow: hidden;
  }
  .pb-dashboard {
    flex: 1;
    min-height: 0;
  }
}

/* <=640px: #app-container padding tightens further to 1rem 0.75rem 1rem
   (2rem vertical). */
@media (max-width: 640px) {
  .plan-builder-view {
    height: max(420px, calc(100dvh - 2rem));
    overflow: hidden;
  }
  .pb-dashboard {
    flex: 1;
    min-height: 0;
  }
  .pbv-title {
    font-size: 1.05rem;
  }
  .pbv-subtitle {
    font-size: 0.76rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Refined form dialogs — New Meal, Create/Join Event, Create Meal Poll
   ---------------------------------------------------------------------------
   Mirrors the Nutrition tab look: a flush header divider, a tidy body with
   small-caps field labels floating on a faint tinted card, and a footer
   action bar. Replaces the oversized generic .modal-content padding (2.5rem)
   and 1.875rem title these small forms used to inherit and look bloated with.
   ══════════════════════════════════════════════════════════════════════════ */
.form-dialog {
  padding: 0;
  height: auto;
  max-height: min(90vh, 660px);
  /* dvh = the visible viewport on iOS (see the :root popup-height note) so the
     footer buttons and the Date field never sit under Safari's URL bar. */
  max-height: min(88dvh, 660px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 18px;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.6),
    0 8px 24px -12px rgba(15, 23, 42, 0.35);
}
.form-dialog.sm {
  max-width: 27rem;
}
.form-dialog.md {
  max-width: 33rem;
}
/* View List/Calendar needs more width than a typical form dialog — its cards
   carry full mains/sides pill rows, same as the Library tab's Add-to-List/
   Add-to-Calendar cards they're styled after. */
.form-dialog.pb-view-dialog {
  max-width: 42rem;
}

/* Icon badge in front of the "Your List"/"Your Calendar" title — same chip
   used by the Add-to-List/Add-to-Calendar and Pick Meals headers, so this
   read-only sibling reads as part of the same popup family. */
.pb-view-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pb-view-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent, #1b6fd8);
}

/* Header sits flush at the top of the card (reuses .modal-header divider). */
.form-dialog > .modal-header {
  padding: 1.1rem 1.35rem 0.95rem;
  background: transparent;
}
.form-dialog > .modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.form-dialog-body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  overflow-y: auto;
  /* See the .modal-content comment: an unset overflow-x computes to auto
     once overflow-y isn't visible, turning the type=date WebKit overflow
     bug into a real horizontal scroll on iOS instead of getting clipped. */
  overflow-x: hidden;
  /* Belt-and-suspenders (see .log-food-body): iOS's focus-scroll behavior
     can still nudge this container sideways when it mismeasures the Date
     field's width, even with overflow-x hidden. Block the sideways swipe
     outright rather than chase the exact mismeasurement. */
  touch-action: pan-y;
}
/* Inputs pick up `margin-bottom: 0.5rem` from the legacy global
   `input, textarea, select` rule, which stacks on top of the gap above
   (bloating the row spacing) and — inside a flex row like .pref-time-row —
   throws off align-items:center since sibling buttons don't get that
   margin. This is the single source of truth for spacing between rows, so
   strip it here. */
.form-dialog .form-input {
  margin-bottom: 0;
}
.form-dialog textarea.form-input {
  height: auto;
  min-height: 4.4rem;
  padding: 0.55rem 0.82rem;
  line-height: 1.4;
  resize: vertical;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7c93);
}
.form-field .form-input {
  width: 100%;
}

.form-dialog-hint {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted, #6b7c93);
  margin: 0;
}

.form-dialog-error {
  color: var(--danger, #dc2626);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
}

/* Inline checkbox line (e.g. "Let members add their own meals"). */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-header, #083463);
  cursor: pointer;
  user-select: none;
}
.form-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent, #1b6fd8);
  flex-shrink: 0;
  cursor: pointer;
}

.form-dialog-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.35rem;
  border-top: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* Refine Your Preferences + Add-to picker footer — recolor the generic
   .btn-primary/.btn-secondary to match the pill buttons on the plan-builder
   source cards (.pb-add-new/.pb-add-to) instead of the site-wide button system. */
#preferences-modal .form-dialog-foot .btn-primary,
#preferences-modal .form-dialog-foot .btn-secondary,
#pb-add-to-overlay .form-dialog-foot .btn-primary,
#pb-add-to-overlay .form-dialog-foot .btn-secondary,
#pb-view-overlay .form-dialog-foot .btn-primary,
#pb-view-overlay .form-dialog-foot .btn-secondary {
  border-width: 1.5px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  box-shadow: none;
}
#preferences-modal .form-dialog-foot .btn-primary,
#pb-add-to-overlay .form-dialog-foot .btn-primary,
#pb-view-overlay .form-dialog-foot .btn-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}
#preferences-modal .form-dialog-foot .btn-primary:hover:not(:disabled),
#pb-add-to-overlay .form-dialog-foot .btn-primary:hover:not(:disabled),
#pb-view-overlay .form-dialog-foot .btn-primary:hover:not(:disabled) {
  filter: brightness(0.95);
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  transform: none;
}
#preferences-modal .form-dialog-foot .btn-secondary,
#pb-add-to-overlay .form-dialog-foot .btn-secondary,
#pb-view-overlay .form-dialog-foot .btn-secondary {
  background-color: #fff;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
#preferences-modal .form-dialog-foot .btn-secondary:hover:not(:disabled),
#pb-add-to-overlay .form-dialog-foot .btn-secondary:hover:not(:disabled),
#pb-view-overlay .form-dialog-foot .btn-secondary:hover:not(:disabled) {
  background-color: var(--ice-2);
}

/* Plan Saved confirmation — shares the .form-dialog shell (header divider,
   gradient card, footer bar) with New Meal / Add-to-plan, but centers a
   success icon + message instead of a form. */
.success-dialog-body {
  align-items: center;
  text-align: center;
  padding-top: 1.5rem;
}
.success-dialog-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ice-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  flex-shrink: 0;
}
.success-dialog-icon svg {
  width: 2rem;
  height: 2rem;
}
.success-dialog-text {
  margin: 0;
}
.success-dialog-foot {
  justify-content: stretch;
}
.success-dialog-foot .btn-primary {
  width: 100%;
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}
.success-dialog-foot .btn-primary:hover:not(:disabled) {
  filter: brightness(0.95);
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

/* Sub-section header row inside a dialog body (label + inline action). */
.form-dialog-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Staged meals list in the Create Meal Poll dialog. */
.poll-draft-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.poll-draft-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
  background: #fff;
}
.poll-draft-row .poll-draft-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-header, #083463);
}
.poll-draft-remove {
  border: none;
  background: transparent;
  color: var(--muted, #6b7c93);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  border-radius: 6px;
  transition: color 0.15s ease;
}
.poll-draft-remove:hover {
  color: #b54a4a;
}
.poll-draft-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted, #6b7c93);
  border: 1px dashed var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
  background: rgba(27, 111, 216, 0.03);
}


/* Member picker (Request Meal Picks dialog) — multi-select checkbox rows
   that mirror the poll picker's card treatment on the app's blue accent. */
.member-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}
.member-pick-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.member-pick-card:hover {
  border-color: #b8d2f2;
}
.member-pick-card.selected {
  border-color: var(--accent, #1b6fd8);
  background: rgba(27, 111, 216, 0.06);
}
.member-pick-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #d7e1ee;
  background: transparent;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease,
    color 0.15s ease;
}
.member-pick-card.selected .member-pick-check {
  border-color: var(--accent, #1b6fd8);
  background: var(--accent, #1b6fd8);
  color: #fff;
}
.member-pick-text {
  min-width: 0;
}
.member-pick-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-pick-email {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Requester's note, shown to the member on the accept/decline prompt and
   again on the picker header once they're choosing meals. */
.meal-request-note {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: rgba(27, 111, 216, 0.06);
  color: var(--text-header, #083463);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.45;
  overflow-wrap: break-word;
}
#meal-request-accept-note {
  margin: 0;
  text-align: left;
}

/* Family Meal Request (accept/decline) — shares the .form-dialog shell and
   Plan Saved's icon-circle treatment, but keeps .form-dialog-body's default
   stretch alignment (instead of .success-dialog-body's center-everything)
   so the prompt and note wrap at full width, with a two-up Decline/Accept
   footer instead of a single confirm button. */
#meal-request-accept-modal .form-dialog-body {
  text-align: center;
}
#meal-request-accept-modal .success-dialog-icon {
  align-self: center;
}
#meal-request-accept-modal .success-dialog-icon i {
  font-size: 1.5rem;
}
#meal-request-accept-modal .form-dialog-foot {
  justify-content: stretch;
}
#meal-request-accept-modal .form-dialog-foot button {
  flex: 1;
}
#meal-pick-note {
  margin: 12px 16px 0;
}
/* Request Meal Picks note — fixed-size box, not user-resizable. */
#meal-request-note {
  resize: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Friends tab
   Built on the same group-head + card-surface language as the Family and
   Fridge tabs (.family-group / .fridge-group / .nutri-group): a centred
   760px column of titled groups, each holding one white rounded card, with
   tinted rounded rows inside. Friends owns its own parallel .friends-* token
   set — matching how .family-* and .nutri-* each own theirs — so it can be
   retuned without dragging the other tabs with it.
   The send-a-dish picker deliberately reuses the shared .picker-modal shell
   (the Add Dishes popup) rather than a bespoke modal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll body (mirrors .family-view) ──────────────────────────────────── */
.friends-view {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 2rem 2.5rem;
}

@media (max-width: 768px) {
  .friends-view {
    gap: 1.5rem;
    padding: 1.25rem 1.25rem 2rem;
  }
}

/* ── Group + card surfaces (mirror .fridge-group / .family-card) ─────────── */
.friends-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.friends-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.friends-group-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.friends-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  margin: 0;
}

.friends-group-sub {
  margin: 0;
  color: var(--muted, #6b7c93);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 46ch;
}

/* Count pill (mirrors .fridge-count-chip / .family-group-tag.count) */
.friends-count-chip {
  flex-shrink: 0;
  align-self: center;
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card surface (mirrors .family-card / .fridge-card) */
.friends-card {
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

@media (max-width: 768px) {
  .friends-card {
    padding: 1rem;
  }
}

.friends-card-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #6b7c93);
  margin: 0 0 0.9rem;
}

.friends-loading {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

/* ── Invite card ──────────────────────────────────────────────────────────
   Before a link exists the card holds one dashed accent call-to-action, the
   same treatment as the Fridge tab's "Scan your fridge" CTA. Generating
   swaps it for the link row (link field + solid Copy button + regenerate). */

.friends-invite-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(27, 111, 216, 0.45);
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.05);
  color: var(--accent, #1b6fd8);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.friends-invite-cta:hover:not(:disabled) {
  background: rgba(27, 111, 216, 0.1);
  border-color: var(--accent, #1b6fd8);
  transform: translateY(-1px);
}

.friends-invite-cta:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.friends-invite-cta > .fa-link {
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.friends-invite-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.friends-invite-cta-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-main, #05223a);
}

.friends-invite-cta-sub {
  font-size: 0.78rem;
  color: var(--muted, #6b7c93);
  font-weight: 600;
  line-height: 1.3;
}

.friends-invite-cta-arrow {
  flex: 0 0 auto;
  font-size: 0.8rem;
  opacity: 0.7;
}

.friends-invite-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.friends-invite-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 2.8rem;
  box-sizing: border-box;
  padding: 0 0.9rem;
  border: 1px solid rgba(27, 111, 216, 0.16);
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.06);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1662c1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Solid accent action (mirrors .fridge-add-button) */
.friends-copy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.8rem;
  box-sizing: border-box;
  padding: 0 1.25rem;
  background: var(--accent, #1b6fd8);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}

.friends-copy-btn:hover {
  background: #3787ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(27, 111, 216, 0.22);
}

.friends-copy-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.friends-invite-hint {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--muted, #6b7c93);
  line-height: 1.45;
}

.friends-invite-hint > i {
  color: var(--accent, #1b6fd8);
  margin-right: 0.35rem;
}

@media (max-width: 520px) {
  .friends-invite-row {
    flex-wrap: wrap;
  }

  .friends-invite-link {
    flex: 1 1 100%;
  }

  .friends-copy-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Icon buttons ─────────────────────────────────────────────────────────── */
.friends-icon-btn {
  background: none;
  border: none;
  color: var(--muted, #6b7c93);
  cursor: pointer;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.friends-icon-btn:hover {
  color: var(--accent, #1b6fd8);
  background: rgba(27, 111, 216, 0.08);
}

.friends-icon-btn--danger:hover {
  color: var(--danger, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}

/* Boxed variant sized to line up with the 2.8rem invite row controls */
.friends-icon-btn--boxed {
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  background: #fff;
}

.friends-icon-btn--boxed:hover {
  border-color: var(--accent, #1b6fd8);
}

/* ── Friends list ─────────────────────────────────────────────────────────
   Tinted rounded rows with a blue hover, like the Fridge tab's item list —
   the whole row is the "open chat" target, so it carries role=button and a
   chevron; the remove action sits inside it and stops propagation. */

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.friend-row:hover {
  background: rgba(27, 111, 216, 0.08);
  border-color: rgba(27, 111, 216, 0.18);
}

.friend-row:focus-visible {
  outline: none;
  border-color: var(--accent, #1b6fd8);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.18);
}

/* Avatar chip (mirrors .family-avatar) */
.friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  object-fit: cover;
  background-color: #e5e7eb;
}

.friend-row-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.friend-row-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-sub {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted, #6b7c93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.friend-row-chevron {
  font-size: 0.8rem;
  color: var(--muted, #6b7c93);
  opacity: 0.55;
  padding: 0 0.25rem;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.friend-row:hover .friend-row-chevron {
  color: var(--accent, #1b6fd8);
  opacity: 1;
}

/* Dashed empty state (mirrors .fridge-empty-state, with a
   circular icon on top) */
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1.75rem 1rem;
  border: 1px dashed var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.03);
}

.friends-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.friends-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-header, #083463);
}

.friends-empty-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #6b7c93);
  line-height: 1.5;
  max-width: 40ch;
}

/* ── Inline friend chat view ──────────────────────────────────────────────
   Swapped into #friends-content in place of the friends list (see
   friends/chat-controller.js) — not a modal. .friends-chat-card bounds the
   message list to a comfortable chat height and scrolls it internally,
   while the header and compose row stay put. */

.friends-chat-backbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.friends-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}

.friends-back-btn:hover {
  text-decoration: underline;
}

.friends-chat-head-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.friends-chat-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.friends-chat-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-chat-sub {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #6b7c93);
}

/* Fills the space below the backbar/friend-header down to .friends-view's own
   bottom padding, so the compose row stays on-screen without having to
   scroll the whole page (mirrors .plan-builder-view's calc(100dvh - header -
   app-container padding) pattern). The Friends tab hides its in-panel
   .panel-header (relying on #main-shell-title, like the Family tab),
   so the chrome above the card is: .main-shell-header (104) + #app-container's
   top padding (32) + the backbar/avatar/name+sub rows above the card (~120)
   + .friends-view's desktop bottom padding (40) ≈ 296px. */
.friends-chat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  height: min(620px, calc(100vh - 296px));
  height: min(620px, calc(100dvh - 296px));
  min-height: 320px;
}

/* Same idea, smaller fixed chrome above the card on mobile (no in-panel
   .panel-header, smaller .main-shell-header, and .friends-view's 32px bottom
   padding) — ~270px total. */
@media (max-width: 768px) {
  .friends-chat-card {
    padding: 0;
    height: min(620px, calc(100vh - 270px));
    height: min(620px, calc(100dvh - 270px));
    min-height: 280px;
  }
}

/* ── Chat mode: fill the whole panel ──────────────────────────────────────
   .friends-view is a 760px reading column for the invite/list cards above,
   but a 2-person chat should behave like a real messaging pane and use the
   full width and height available, not float as a narrow box in a wide
   desktop viewport. chat-controller.js toggles this modifier on #friends-content
   for the lifetime of an open thread. The card itself scrolls its own
   message list, so the outer view shouldn't also scroll (that would produce
   nested scrollbars). */
.friends-view.friends-view--chat {
  max-width: none;
  height: 100%;
  overflow: hidden;
}

.friends-view--chat .friends-group {
  flex: 1;
  min-height: 0;
}

.friends-view--chat .friends-chat-card {
  flex: 1;
  height: auto;
  max-height: none;
  min-height: 0;
}

.chat-friend-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  object-fit: cover;
  background-color: #e5e7eb;
}

/* Tinted message canvas so the white "their" bubbles read as cards against
   it, the same ice tone used by .picker-filter-panel / .fridge tinted rows. */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.25rem;
  min-height: 0;
  background: #f7fbff;
}

.chat-bubble-row {
  display: flex;
}

.chat-bubble-row.mine {
  justify-content: flex-end;
}

/* A dish message is a caption bubble stacked over the dish card. The stack
   owns the 80% width cap, so the caption bubble measures against the row
   rather than against the stack's own shrink-to-fit width (which would
   squeeze it down to the width of the widest word). */
.chat-bubble-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  min-width: 0;
  max-width: 80%;
}

.chat-bubble-row.mine .chat-bubble-stack {
  align-items: flex-end;
}

.chat-bubble-stack .chat-bubble {
  max-width: 100%;
}

.chat-bubble {
  max-width: 80%;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  background: #fff;
  color: var(--text-main, #05223a);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  word-break: break-word;
}

.chat-bubble-row.mine .chat-bubble {
  background: var(--accent, #1b6fd8);
  border-color: var(--accent, #1b6fd8);
  color: #fff;
  box-shadow: 0 4px 12px rgba(27, 111, 216, 0.22);
}

/* Sent-dish card — the .picker-item treatment (white card, coloured left
   edge, icon badge, pill meta) rendered inside a chat bubble row. */
.chat-dish-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-left: 3px solid var(--accent, #1b6fd8);
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.06);
  width: min(320px, 100%);
}

.chat-dish-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem 0.55rem;
  min-width: 0;
}

.chat-dish-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent, #1b6fd8);
}

.chat-dish-card-name {
  margin: 0;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-header, #083463);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-dish-card-body {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0 0.85rem 0.75rem;
}

.chat-dish-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted, #6b7c93);
  background: rgba(27, 111, 216, 0.06);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.chat-dish-card-actions {
  padding: 0 0.85rem 0.8rem;
}

.chat-dish-copy-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(27, 111, 216, 0.25);
  border-radius: 10px;
  background: rgba(27, 111, 216, 0.06);
  color: var(--accent, #1b6fd8);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.chat-dish-copy-btn:hover {
  background: rgba(27, 111, 216, 0.12);
  border-color: var(--accent, #1b6fd8);
}

.chat-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  color: var(--muted, #6b7c93);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 1.5rem 1rem;
  max-width: 34ch;
}

.chat-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
}

/* ── Compose bar ──────────────────────────────────────────────────────────── */
.friends-compose-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: #fff;
  flex-shrink: 0;
}

.friends-compose-input {
  flex: 1;
  min-width: 0;
  height: 2.8rem;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 999px;
  padding: 0 1rem;
  background: #fff;
  color: var(--text-main, #05223a);
  font-family: inherit;
  font-size: 0.92rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.friends-compose-input::placeholder {
  color: rgba(107, 124, 147, 0.7);
}

.friends-compose-input:focus {
  outline: none;
  border-color: var(--accent, #1b6fd8);
  box-shadow: 0 0 0 4px rgba(27, 111, 216, 0.18);
}

.friends-compose-btn {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}

.friends-compose-btn--dish {
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent, #1b6fd8);
}

.friends-compose-btn--dish:hover {
  background: rgba(27, 111, 216, 0.18);
  transform: translateY(-1px);
}

.friends-compose-btn--send {
  background: var(--accent, #1b6fd8);
  color: #fff;
}

.friends-compose-btn--send:hover {
  background: #3787ff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(27, 111, 216, 0.22);
}

.friends-compose-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ── Send A Dish picker ───────────────────────────────────────────────────
   Built on the shared .picker-modal shell (the Add Dishes popup) — see the
   PICKER MODAL UNIFIED STYLES block above; only the loading state needs a
   rule of its own, since the picker owns the whole modal body. */
.friends-picker-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

/* ── Add-to-home-screen banner (a2hs.js) ─────────────────────────────────── */
.a2hs-banner-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

.a2hs-banner-install-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  background: #fff;
  color: #0d4fa8;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.a2hs-banner-close-btn {
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* ── AI accuracy notes (unscoped) ─────────────────────────────────────────────
   The Library tab gets this class from plan-library.css, but that file wraps
   every rule in `.lib-scope` so its copy only applies inside #library-view /
   #library-modals. These same warnings also appear on plan.html surfaces
   outside that scope — the price-breakdown modal and the nutrition photo
   estimator — where they would otherwise render as unstyled body text.
   Keep the two visually identical; the scoped copy wins inside the Library by
   specificity, which is harmless because the declarations match. */
.ai-accuracy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0.25rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.07);
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

.ai-accuracy-note i {
  margin-top: 2px;
  flex-shrink: 0;
}