:root {
  --sidebar-width: 224px;
  --header-height: 56px;
  --planner-day-header-height: 6.75rem;
  --sidebar-gap: 16px;
  --rail-width: 208px;

  /* Serif display font — used for the app title, day numbers, and recipe
     titles. Change it here to restyle all three at once. */
  --font-serif:  "Hedvig Letters Serif", serif;
  /* =====================================================================
     THEME PALETTE — tweak these to restyle the whole app.
     ===================================================================== */

  /* --- Brand accent (pink) --- */
  --accent: #FA556E;                    /* title, primary buttons, today dot */
  --accent-dark: #d62f64;               /* accent hover */
  --accent-shadow: rgba(245, 83, 133, 0.28); /* glow under the Add New button */
  --on-accent: #ffffff;                 /* text/icons sitting on a colored fill */

  /* --- Surfaces --- */
  --cream-bg: #ffffff;       /* page background (sidebar matches) */
  --card-bg: #ffffff;        /* sidebar, planner & modal cards */
  --search-bg: #ffffff;      /* search field */
  --surface-soft: #f7f5f1;   /* popover steppers & chips */
  --surface-soft-2: #f3f3f3; /* recipe nutrition box */
  --placeholder-bg: #f0e8db; /* empty thumbnail tiles */
  --avatar-bg: #ece2d4;      /* account avatar */
  --avatar-bg-hover: #e3d6c4;

  /* --- Hover fills --- */
  --hover-soft: #f0f0f0;     /* neutral hover/drag highlight */
  --hover-warm: #f4eee5;     /* header control hover */
  --hover-warm-2: #efe9df;   /* popover hover */
  --hover-warm-3: #faf2ea;   /* edit-toggle hover */

  /* --- Text --- */
  --ink: #3c3833;            /* primary text on the light theme */
  --text-primary: #333333;   /* general body text */
  --text-secondary: #555555; /* secondary text */
  --text-secondary-2: #444444;
  --muted: #939290;          /* uppercase labels, placeholders, hints */
  --text-muted-2: #718096;   /* section nutrition line */
  --text-muted-3: #666666;
  --text-faint: #999999;     /* dashed-button text, hints */
  --icon-muted: #888888;     /* close/remove icons */
  --label: #414443;          /* weekday + meal-section labels */

  /* --- Borders --- */
  --line: #cccccc;           /* hairline borders (thumbs, search) */
  --pill-border: #cccccc;    /* header control pills */
  --border-soft: #cccccc;    /* menu & popover borders */
  --border-2: #cccccc;       /* generic light border */
  --border-faint: #cccccc;   /* dividers */
  --input-border: #cccccc;   /* inline edit inputs */
  --input-border-2: #cccccc; /* modal form inputs */

  /* --- Semantic accents --- */
  --ingredient: #6f8f4f;     /* green leaf badge / active chip */
  --macro-pill-bg: #efebe3;  /* calorie & macro pills */
  --macro-pill-text: #2d3748;
  --danger: #cc3333;         /* error text, destructive hover */
  --danger-strong: #e53e3e;  /* remove-section button */
  --danger-strong-hover: #c53030;
  --success: #22aa77;        /* success message text */

  /* --- Chrome --- */
  --scrollbar: #d9d9d9;      /* scrollbar thumbs */
  --resizer: #9a8f7a;        /* sidebar resize handle */

  /* --- Overlays & elevation shadows --- */
  --ink-hover: rgba(60, 56, 51, 0.08);     /* transparent header-icon hover */
  --pill-overlay: rgba(255, 255, 255, 0.92);/* "Serves N" label over a thumb */
  --chip-overlay: rgba(255, 255, 255, 0.9); /* remove-meal X bubble */
  --modal-backdrop: rgba(0, 0, 0, 0.45);    /* dimmer behind modals */
  --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-badge: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-menu: 0 6px 20px rgba(0, 0, 0, 0.18);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);
}

body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
  margin: 0;
  padding-left: calc(var(--rail-width) + var(--sidebar-width) + 24px);
  padding-top: var(--header-height);
  color: var(--ink);
  background: var(--cream-bg);
  background-attachment: fixed;
  transition: padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Authentication gate. The application never flashes before Supabase has
   confirmed whether a visitor has an active session. */
body:not(.is-authenticated) {
  padding: 0;
}

body:not(.is-authenticated) #app-shell,
body.is-authenticated #landing-page,
.landing-page[hidden] {
  display: none;
}

body.auth-pending .landing-page {
  visibility: hidden;
}

.landing-page {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background: #fffaf4;
  color: #332f2a;
}

.landing-header {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-brand {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  text-decoration: none;
}

.landing-signin {
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(60, 56, 51, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font: 600 0.9rem/1 "Inter", sans-serif;
  cursor: pointer;
}

.landing-signin:hover { background: #fff; }

.landing-hero {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 88px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 2rem 7rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: 5rem;
}

.landing-copy { max-width: 590px; }

.landing-eyebrow {
  margin: 0 0 1rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-copy h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.4vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.landing-lede {
  max-width: 535px;
  margin: 1.75rem 0 2rem;
  color: #69625b;
  font-size: 1.08rem;
  line-height: 1.7;
}

.landing-cta {
  padding: 0.95rem 1.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(250, 85, 110, 0.25);
  color: #fff;
  font: 700 0.95rem/1 "Inter", sans-serif;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.landing-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }

.landing-account-note { margin: 1rem 0 0; color: #777068; font-size: 0.84rem; }
.landing-account-note button { padding: 0; border: 0; background: none; color: var(--accent-dark); font: inherit; font-weight: 700; cursor: pointer; }
.landing-account-note button:hover { text-decoration: underline; }

.landing-preview { position: relative; transform: rotate(1.5deg); }
.landing-preview-card { padding: 1.7rem; border: 1px solid rgba(60, 56, 51, 0.08); border-radius: 24px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 28px 80px rgba(76, 59, 45, 0.14); }
.preview-topline { display: flex; justify-content: space-between; margin-bottom: 1.4rem; font-family: var(--font-serif); font-size: 1.25rem; }
.preview-date { color: #918980; font-family: "Inter", sans-serif; font-size: 0.78rem; }
.preview-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.preview-days article { min-height: 255px; padding: 1rem 0.75rem; border-radius: 16px; background: #faf8f5; }
.preview-day { display: block; color: #9b948c; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; }
.preview-days strong { display: block; margin: 0.25rem 0 1.2rem; font: 400 2rem/1 var(--font-serif); }
.preview-meal { margin: 0 0 0.65rem; padding: 0.75rem; border-radius: 10px; background: #ede8e1; color: #5d5750; font-size: 0.72rem; line-height: 1.35; }
.preview-meal-pink { background: #ffe1e7; color: #8d3f51; }
.preview-meal-green { background: #e3efd9; color: #4e663d; }
.preview-meal-gold { background: #f8eac6; color: #76602c; }
.landing-float-card { position: absolute; right: -1.5rem; bottom: -2rem; display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(76, 59, 45, 0.18); transform: rotate(-3deg); }
.landing-float-card > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #e3efd9; color: #53703d; font-weight: 800; }
.landing-float-card strong, .landing-float-card small { display: block; }
.landing-float-card strong { font-size: 0.78rem; }
.landing-float-card small { margin-top: 0.2rem; color: #918980; font-size: 0.68rem; }
.landing-shape { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.landing-shape-one { right: -10rem; top: -14rem; width: 34rem; height: 34rem; background: rgba(250, 85, 110, 0.10); }
.landing-shape-two { left: 35%; bottom: -20rem; width: 30rem; height: 30rem; background: rgba(111, 143, 79, 0.10); }

@media (max-width: 850px) {
  .landing-hero { padding-top: 2.5rem; grid-template-columns: 1fr; gap: 4rem; }
  .landing-copy { max-width: 680px; }
  .landing-preview { width: min(100%, 590px); margin: 0 auto; }
}

@media (max-width: 540px) {
  .landing-header { padding: 1.15rem 1.2rem; }
  .landing-hero { padding: 2.5rem 1.2rem 5rem; }
  .landing-copy h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .landing-lede { font-size: 1rem; }
  .landing-preview-card { padding: 1rem; border-radius: 18px; }
  .preview-days { gap: 0.4rem; }
  .preview-days article { min-height: 220px; padding: 0.75rem 0.45rem; }
  .preview-meal { padding: 0.6rem 0.45rem; font-size: 0.62rem; }
  .landing-float-card { right: 0; }
}

/* Expanded vertical menu rail pinned to the far-left edge. */
.app-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-width);
  box-sizing: border-box;
  padding: 0.75rem 0.75rem;
  background: var(--card-bg);
  border-right: 1px solid var(--border-faint);
  z-index: 30; /* above the header so it spans full height */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

/* Monogram + wordmark at the top of the rail. */
.rail-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
  user-select: none;
}

.rail-logo-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.1;
}

/* Text label shown beside each icon in the expanded rail. */
.rail-label {
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.rail-spacer {
  flex: 1 1 auto;
}

.rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: 40px;
  padding: 0 0.55rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

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

.rail-btn:hover {
  background: var(--hover-soft);
  color: var(--ink);
}

.rail-btn.is-active {
  background: var(--hover-soft);
  color: var(--accent);
}

#recipe-nav {
  position: fixed;
  top: var(--header-height);
  /* Float the sidebar inset from the screen edges. Insetting the left edge by
     --sidebar-gap and shrinking width by the same amount keeps the right edge
     at --sidebar-width, so the resize handle stays aligned. */
  left: calc(var(--rail-width) + var(--sidebar-gap));
  bottom: var(--sidebar-gap);
  width: calc(var(--sidebar-width) - var(--sidebar-gap));
  padding: 1rem;
  box-sizing: border-box;
  background: var(--cream-bg);
  overflow-y: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.sidebar-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Match the planner's scrollbar styling on the left sidebar */
#recipe-nav::-webkit-scrollbar {
  width: 12px;                /* Sets the width of the scrollbar space */
}

/* Start the track below the search box so the scrollbar lines up with the
   top of the recipe list rather than running up past it. */
#recipe-nav::-webkit-scrollbar-track {
  margin-top: 4rem;
  margin-bottom: 1.75rem;
}

#recipe-nav::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border: 3px solid transparent; /* Acts as a spacer around the draggable handle */
  background-clip: padding-box;  /* Forces the color to stay inside the border */
  border-radius: 6px;
}

.sidebar-resizer {
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: calc(var(--rail-width) + var(--sidebar-width));
  width: 11px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 11;
  display: flex;
  align-items: stretch;
  justify-content: center;
  touch-action: none;
}

.sidebar-resizer::before {
  content: "";
  width: 1px;
  background: var(--border-faint);
  transition: background 0.15s, width 0.15s;
}

.sidebar-resizer:hover::before,
.sidebar-resizer.resizing::before {
  background: var(--resizer);
  width: 3px;
}

body.sidebar-collapsed .sidebar-resizer {
  display: none;
}

body.resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--ink-hover);
  color: var(--ink);
}

body.sidebar-collapsed {
  padding-left: calc(var(--rail-width) + 1.5rem);
}

body.sidebar-collapsed #recipe-nav {
  transform: translateX(calc(-100% - var(--sidebar-gap)));
}

body.sidebar-collapsed #sidebar-toggle svg {
  transform: scaleX(-1);
}

#recipe-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.5rem;
}

#recipe-nav a {
  text-decoration: none;
  color: var(--text-primary);
}

/* ===== Nutrition goals page ===== */
/* A full content page (not a sidebar swap): when the rail's Goals button is
   active, body.goals-open hides the planner + foods sidebar and this fills the
   whole area to the right of the rail, below the header. */
.goals-panel {
  position: fixed;
  top: var(--header-height);
  left: calc(var(--rail-width) + var(--sidebar-gap));
  right: 1.5rem;
  bottom: 16px;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1.2px solid #b3b3b3;
  border-radius: 28px;
  overflow-y: auto;
  z-index: 12;
  display: none;
  flex-direction: column;
}

body.goals-open .goals-panel { display: flex; }
body.goals-open #recipe-nav,
body.goals-open #sidebar-resizer,
body.goals-open #planner { display: none; }

.goals-panel .sidebar-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.9rem;
}

.goals-intro {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Scope switch: edit the Default, or a specific day (date picker). */
.goals-scope {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  flex-wrap: wrap;
}

.goals-scope-btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.goals-scope-btn:hover {
  background: var(--hover-warm);
}

.goals-scope-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.goals-date {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}

.goal-group-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.goal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem 2.5rem;
}

.goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.goal-label {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.goal-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.goal-input {
  width: 4.5rem;
  padding: 0.3rem 0.45rem;
  box-sizing: border-box;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  font-size: 0.85rem;
  text-align: right;
  color: var(--ink);
}

.goal-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* A field the current day explicitly overrides (vs inheriting the default). */
.goal-input.is-custom {
  border-color: var(--accent);
  background: var(--accent-shadow);
}

.goal-unit {
  width: 1.7rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.goals-reset {
  align-self: flex-start;
  margin-top: 1.75rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}

.goals-reset:hover {
  background: var(--hover-warm);
}

/* ===== Recipes library page ===== */
.recipes-panel {
  position: fixed;
  top: var(--header-height);
  left: calc(var(--rail-width) + var(--sidebar-gap));
  right: 1.5rem;
  bottom: 16px;
  padding: 1.75rem 2rem;
  box-sizing: border-box;
  background: var(--card-bg);
  overflow-y: auto;
  z-index: 12;
  display: none;
  flex-direction: column;
}

body.recipes-open .recipes-panel { display: flex; }
body.recipes-open #recipe-nav,
body.recipes-open #sidebar-resizer,
body.recipes-open #planner { display: none; }

.recipes-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.recipes-page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text-primary);
}

.recipes-page-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recipes-page-search {
  width: min(24rem, 46vw);
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--search-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2393897c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat left 0.7rem center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.recipes-page-search:focus {
  outline: none;
  border-color: var(--accent);
}

.recipes-page-add {
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.recipes-page-add:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.recipes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.recipe-library-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.recipe-library-card .recipe-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.recipe-library-card:hover .recipe-thumb,
.recipe-library-card:focus-visible .recipe-thumb {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.recipe-library-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--text-primary);
}

.recipe-library-meta {
  margin: -0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.recipe-library-nutrition {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.recipes-page-empty {
  margin: 2rem 0 0;
  color: var(--text-faint);
  font-style: italic;
}

@media (max-width: 760px) {
  .recipes-panel {
    padding: 1.25rem;
  }

  .recipes-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .recipes-page-actions {
    justify-content: flex-start;
  }

  .recipes-page-search {
    width: 100%;
  }
}

/* ===== Per-day goals modal ===== */
.day-goals-body {
  max-height: 55vh;
  overflow-y: auto;
  margin: 0.5rem 0 1.25rem;
  padding-right: 0.25rem;
}

.day-goals-body .goal-group-title:first-child {
  margin-top: 0.25rem;
}

.day-goals-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.day-goals-action {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.day-goals-action:hover {
  background: var(--hover-warm);
}

.day-goals-action.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.day-goals-action.is-primary:hover {
  background: var(--accent-dark);
}

#recipe-nav a:hover {
  text-decoration: underline;
}

#add-recipe-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--pill-border);
  background: var(--card-bg);
  color: var(--ink);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}

#add-recipe-btn:hover {
  background: var(--hover-warm);
}

.auth-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.auth-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  background: var(--avatar-bg);
  color: var(--ink);
  border: none;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.auth-avatar:hover {
  background: var(--avatar-bg-hover);
}

.auth-signin svg {
  display: block;
}

/* The account menu lives at the bottom of the left rail, so it opens upward and
   to the right of the avatar rather than below it. */
.auth-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  min-width: 200px;
  padding: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
  z-index: 1000;
}

.auth-menu[hidden] {
  display: none;
}

.auth-email {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  word-break: break-all;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 0.25rem;
}

.auth-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.5rem;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.auth-menu-item:hover {
  background: var(--hover-soft);
}

#planner {
  margin: 0 1.5rem 16px 0;
  padding: 0 1.5rem;
  /* Fill the space below the fixed header, leaving the 16px bottom margin
     always visible. The planner itself stays put; its contents scroll. */
  height: calc(100vh - var(--header-height) - 16px);
  box-sizing: border-box;
  background: var(--card-bg);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Customizes the track spacing in Chromium/Safari browsers */
#planner::-webkit-scrollbar {
  width: 12px;                /* Sets the width of the scrollbar space */
}

#planner::-webkit-scrollbar-track {
  margin-top: var(--planner-day-header-height);
  margin-bottom: 1.75rem;
}

#planner::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border: 3px solid transparent; /* Acts as a spacer around the draggable handle */
  background-clip: padding-box;  /* Forces the color to stay inside the border */
  border-radius: 6px;
}

#recipe-search {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--search-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2393897c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat left 0.7rem center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

#recipe-search:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--card-bg);
}

#recipe-search::placeholder {
  color: var(--muted);
}

#recipe-nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: grab;
  user-select: none;
}

#recipe-nav .recipe-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.recipe-thumb-empty {
  background: var(--placeholder-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23c1b5a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / 55% no-repeat;
}

#recipe-nav .recipe-title {
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
}


.day-meals .recipe-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.day-meals .recipe-title {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.2;
  color: var(--text-primary);
}

/* ===== Thumbnail pills (label overlaid on a card image) ===== */
.thumb-wrap {
  position: relative;
  width: 100%;
}

.thumb-pill {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-overlay);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-pill);
  pointer-events: none;
}

/* The "Serves N" / default-amount pill is hidden in the sidebar only (the
   planner cards and the Add-food modal keep theirs). */
#recipe-nav .thumb-pill {
  display: none;
}

button.thumb-pill-btn {
  border: none;
  cursor: pointer;
  pointer-events: auto;
}

button.thumb-pill-btn:hover {
  background: var(--card-bg);
}

/* ===== Quick-edit popover anchored to a pill ===== */
.pill-popover {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
  font-size: 0.8rem;
}

.popover-title {
  font-weight: 700;
  color: var(--text-secondary-2);
  text-align: center;
}

.popover-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.popover-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--surface-soft);
  color: var(--text-secondary-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.popover-step:hover {
  background: var(--hover-warm-2);
}

.popover-value {
  min-width: 38px;
  text-align: center;
  font-weight: 700;
}

.popover-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.popover-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface-soft);
  color: var(--text-secondary-2);
  cursor: pointer;
  font-size: 0.75rem;
}

.popover-chip:hover {
  background: var(--hover-warm-2);
}

.popover-chip.active {
  background: var(--ingredient);
  border-color: var(--ingredient);
  color: var(--on-accent);
}

#recipe-nav li:active {
  cursor: grabbing;
}

.planner-track {
  display: grid;
  grid-template-columns: repeat(var(--day-count, 4), minmax(0, 1fr));
  /* One shared row for the header plus one per meal section, so each meal
     section row sizes to the tallest day and the whole week expands together.
     The trailing flexible row absorbs any leftover height so the columns (and
     their divider lines) stretch to the bottom even when the days are empty. */
  grid-template-rows: repeat(var(--section-rows, 6), auto) minmax(0, 1fr);
  /* Fill the planner's full height when content is short; grow past it when
     content overflows (the 1fr row collapses and the planner scrolls). */
  min-height: 100%;
  /* Each day column spans every row, so fill one column at a time. */
  grid-auto-flow: column;
  justify-content: space-between;
  align-content: start;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .planner-track {
    transition: none !important;
  }
}

#planner-controls {
  position: fixed;
  top: 0;
  left: var(--rail-width);
  right: 0;
  height: var(--header-height);
  box-sizing: border-box;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border-faint);
  z-index: 20; /* sits above the sidebar so the header extends over it */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.today-btn {
  height: 2.125rem;
  box-sizing: border-box;
  padding: 0 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

.today-btn:hover {
  background: var(--hover-warm);
}

#planner-controls .date-step-group {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  overflow: hidden;
}

#planner-controls .date-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  line-height: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}

#planner-controls .today-btn:hover,
#planner-controls .date-step:hover {
  background: var(--hover-warm);
}

#planner-controls .calendar-icon-btn:hover {
  background: var(--ink-hover);
}

.month-label {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: normal;
  color: var(--ink);
  margin-left: 0.25rem;
}

.calendar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  line-height: 0;
}

.calendar-icon-btn svg {
  width: 26px;
  height: 26px;
}

.calendar-picker {
  position: relative;
  display: inline-flex;
}

/* Hidden input the native date picker anchors to. Pinned to the bottom-left
   of the calendar icon so the dropdown opens aligned under the icon. */
.date-picker-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  /* Recolor the native date picker's selected/today highlight from the
     browser-default blue to the brand red. */
  accent-color: var(--accent);
}

.planner-controls-spacer {
  flex: 1;
}

.day-count-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.day-count-label select {
  height: 2.125rem;
  box-sizing: border-box;
  padding: 0 2rem 0 0.75rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233c3833' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
}

.day-column {
  /* Subgrid: adopt the planner track's rows so each meal section lines up
     vertically across every day of the week. */
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 0 1rem;
  position: relative;
}

.day-column:first-child {
  padding-left: 0;
}

.day-column:last-child {
  padding-right: 0;
}

.day-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--border-faint);
  /* Above the sticky header+summary stack (z 5) so the day dividers stay
     visible through its full-bleed white background. */
  z-index: 6;
}

.day-column h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  text-align: center;
}

.day-meals {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-height: 200px;
  display: grid;
  grid-template-columns: repeat(var(--meal-cols, 2), minmax(0, 1fr));
  align-content: start;
  gap: 0.85rem;
  flex: 1;
}

.day-section.drag-over .day-meals {
  background: var(--hover-soft);
  border-radius: 4px;
  /* Paint the gray lower than the drop zone actually extends so the highlight
     reads as taking up more space, without changing layout/spacing. */
  box-shadow: 0 24px 0 var(--hover-soft);
}


.day-totals {
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--hover-soft);
  border-radius: 4px;
  font-size: 0.75rem;
  text-align: center;
}

.day-cal {
  font-weight: bold;
  font-size: 0.9rem;
}

.day-macros {
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
}

.modal-dialog {
  position: relative;
  background: var(--card-bg);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  width: 100%;
}

.modal-sm { max-width: 420px; }
.modal-lg { max-width: 720px; }

.modal-dialog h2 {
  margin: 0 0 1rem;
}

.food-kind-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  margin: -0.35rem 0 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.food-kind-toggle[hidden] {
  display: none;
}

.food-kind-toggle button {
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  background: transparent;
  color: var(--text-secondary-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}

.food-kind-toggle button.active {
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: var(--shadow-pill);
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--icon-muted);
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.modal-close:hover { color: var(--danger); }

/* Forms */
.modal-dialog form label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.modal-dialog form input[type="text"],
.modal-dialog form input[type="email"],
.modal-dialog form input[type="password"],
.modal-dialog form input[type="number"],
.modal-dialog form select,
.modal-dialog form textarea {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--input-border-2);
  border-radius: 3px;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0.5rem 0;
}

.form-error.info { color: var(--success); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-actions button[type="submit"] {
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}

.form-actions button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Recipe form specifics */
.rf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.rf-grid .rf-full { grid-column: 1 / -1; }

.rf-image-field {
  margin-bottom: 0.75rem;
}

.rf-image-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rf-image-preview-img {
  max-width: 160px;
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border-2);
}

.rf-image-remove {
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-secondary-2);
}

.rf-image-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* Food (ingredient) edit form */
.if-name {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.if-default {
  margin-bottom: 1rem;
}

.if-create-fields {
  margin-bottom: 0.75rem;
}

.if-macro-grid,
.if-nutrient-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}

.if-nutrients {
  margin: 0.4rem 0 0.9rem;
}

.if-nutrients summary {
  cursor: pointer;
  color: var(--text-secondary-2);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.if-nutrient-section {
  padding-top: 0.4rem;
}

.if-nutrient-section h3 {
  margin: 0 0 0.45rem;
  color: var(--text-secondary-2);
  font-size: 0.85rem;
}

.if-default-label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.if-default-inputs {
  display: flex;
  gap: 0.5rem;
}

.if-default-inputs #if-amount {
  width: 6rem;
}

.if-default-hint {
  font-size: 0.75rem;
  color: var(--text-secondary-2);
  margin: 0.4rem 0 0;
}

.modal-dialog fieldset {
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}

.modal-dialog legend {
  padding: 0 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.rf-ingredient-row,
.rf-step-row {
  display: grid;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rf-ingredient-row {
  grid-template-columns: auto 1fr 1fr 2fr 1.5fr auto auto;
}

.rf-ingredient-row.rf-dragging {
  opacity: 0.5;
}

.rf-drag-handle {
  background: none;
  border: none;
  color: var(--icon-muted);
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  touch-action: none;
}

.rf-drag-handle:active {
  cursor: grabbing;
}

.rf-step-row {
  grid-template-columns: auto 1fr auto;
}

.rf-ingredient-row input[type="text"],
.rf-step-row textarea {
  margin-top: 0;
}

.rf-ing-optional {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.rf-step-num {
  font-weight: bold;
  color: var(--text-muted-3);
  min-width: 1.5rem;
}

.rf-remove {
  background: none;
  border: none;
  color: var(--icon-muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.4rem;
}

.rf-remove:hover { color: var(--danger); }

.rf-add-row {
  background: var(--card-bg);
  border: 1px dashed var(--text-faint);
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
}

.rf-add-row:hover { border-color: var(--accent); color: var(--accent); }

#auth-toggle-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}

#auth-toggle-link:hover { text-decoration: underline; }

.day-meals li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
}

.day-meals li:active {
  cursor: grabbing;
}

.day-meals li.dragging {
  opacity: 0.4;
}

/* "Add item" tile: sits in the next grid slot (kept last via order), revealed
   only when the section is hovered or the button is keyboard-focused. */
.add-meal {
  order: 1;
  cursor: default;
}

.add-meal-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px dashed var(--border-2);
  border-radius: 12px;
  color: var(--text-muted-3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}

.day-section:hover .add-meal-btn,
.add-meal-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.add-meal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.add-meal-btn svg {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.remove-meal {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip-overlay);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--icon-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.day-meals li:hover .remove-meal,
.remove-meal:focus {
  opacity: 1;
}

.remove-meal:hover {
  color: var(--danger);
}

#recipe-nav li {
  cursor: pointer;
}

/* Top section of the recipe popup: title (and meta) on the left, image on the
   right. Stacks back to a single column on narrow screens. */
.recipe-view-top {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.recipe-view-title-col {
  flex: 1 1 auto;
  min-width: 0;
}

.recipe-view-img-col {
  flex: 0 0 auto;
  /* Keep the image clear of the absolutely-positioned modal close button. */
  margin-top: 0.5rem;
}

.recipe-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (max-width: 560px) {
  .recipe-view-top {
    flex-direction: column;
  }
}

/* The recipe detail popup drops the soft drop shadow other modals use. */
#recipe-view-modal .modal-dialog {
  box-shadow: none;
}

/* Bigger, more readable type for the recipe detail popup. Most child elements
   inherit this base size; headings and the meta/nutrition lines scale up too. */
#recipe-view-content {
  font-size: 1.2rem;
  line-height: 1.55;
}

#recipe-view-content h2 {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 400;
}

.recipe-view-actions {
  position: absolute;
  top: 0.6rem;
  right: 2.5rem;
  z-index: 1;
  flex: none;
}

.recipe-view-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
}

.recipe-view-menu-btn:hover {
  background: var(--surface-soft);
  color: var(--text-secondary-2);
}

/* Dropdown menu reusing the pill-popover shell, but as a list of actions. */
.menu-popover {
  padding: 4px;
  min-width: 140px;
}

.popover-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary-2);
}

.popover-menu-item:hover {
  background: var(--hover-warm-2);
}

.popover-menu-item--danger {
  color: var(--accent);
}

.popover-menu-item--danger:hover {
  background: var(--accent);
  color: #fff;
}

.recipe-view-img {
  display: block;
  width: 220px;
  max-width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0;
}

@media (max-width: 560px) {
  .recipe-view-img {
    width: 100%;
    margin-bottom: 1rem;
  }
}

.recipe-view-meta {
  color: var(--text-muted-3);
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.recipe-view-nutrition {
  margin: 0 0 0.75rem;
  color: var(--text-muted-3);
  font-size: 0.95rem;
}

#recipe-view-content h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.5rem;
}

/* Ingredients sit in a narrower column to the left of the steps. The column
   stacks above steps on narrow screens. */
.recipe-view-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.recipe-view-ingredients-col {
  flex: 0 0 34%;
  min-width: 0;
}

.recipe-view-steps-col {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .recipe-view-body {
    flex-direction: column;
    gap: 0;
  }

  .recipe-view-ingredients-col {
    flex-basis: auto;
  }
}

.recipe-view-ingredients {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.9rem;
}

.recipe-view-ingredients li {
  margin-bottom: 0.25rem;
}

/* Ingredient rows are tappable to reveal their nutrition breakdown. */
.recipe-view-ingredient {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.12s ease;
}

.recipe-view-ingredient:hover,
.recipe-view-ingredient:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  outline: none;
}

/* Ingredient images render as small icons rather than full thumbnails. */
.recipe-view-ingredient-thumb {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.recipe-view-ingredient-thumb-empty {
  background-color: rgba(0, 0, 0, 0.06);
}

.recipe-view-steps {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.recipe-view-steps li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
/* ---- Per-day meal sections ---- */
/* The date header and nutrition summary live in one sticky stack so they freeze
   together with no drift between them. The stack full-bleeds to the day's
   divider lines; its children re-inset their content with horizontal padding. */
.day-header-stack {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card-bg);
  margin: 0 -1rem;
}

.day-column:first-child .day-header-stack {
  margin-left: 0;
}
.day-column:last-child .day-header-stack {
  margin-right: 0;
}

.day-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.5rem 1rem 1.75rem 1rem;
}

.day-column:first-child .day-column-header {
  padding-left: 0;
}
.day-column:last-child .day-column-header {
  padding-right: 0;
}

.day-column-header h2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.day-weekday {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label);
}

.day-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
}

.day-number.is-today {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.day-edit-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  border-radius: 6px;
  color: #000;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.day-edit-toggle:hover {
  background: var(--hover-warm-3);
}

.day-edit-toggle--icon {
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  position: relative;
}

.day-edit-toggle--icon svg {
  display: block;
}

/* Dot on the ellipsis marking a day that carries custom nutrition goals. */
.day-edit-toggle--icon.has-custom::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.day-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.day-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.day-section-name {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.day-section-name-input {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}

.day-section-name-input:focus {
  outline: none;
  border-color: var(--accent);
}

.day-section-remove {
  background: none;
  border: none;
  color: var(--danger-strong);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  flex-shrink: 0;
}

.day-section-remove:hover {
  color: var(--danger-strong-hover);
}

.day-section .day-meals {
  min-height: 2.5rem;
}

.day-add-section {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--input-border);
}

.day-add-section-input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.78rem;
}

.day-add-section-input:focus {
  outline: none;
  border-color: var(--accent);
}

.day-add-section-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.day-add-section-btn:hover {
  background: var(--accent-dark);
}

/* Nutrition line shown directly under each section title */
.day-section .day-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.45rem;
  padding: 0;
  background: none;
  border-radius: 0;
  text-align: left;
  font-size: 0.72rem;
  color: var(--text-muted-2);
}

.day-section .day-totals span {
  padding: 0;
  font-size: 0.66rem;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
}

/* Dot separator between macro values */
.day-section .day-totals span:not(:first-child)::before {
  content: "·";
  margin-right: 0.35rem;
  color: var(--text-muted-2);
}

.day-section .day-cal {
  color: var(--macro-pill-text);
}

.day-section .day-pro {
  color: var(--macro-pill-text);
}

.day-section .day-carb {
  color: var(--macro-pill-text);
}

.day-section .day-fat {
  color: var(--macro-pill-text);
}

/* ===== Sidebar: unified recipe + ingredient list ===== */
/* Cards inherit the recipe grid/tile look so the two kinds are interchangeable. */
#recipe-nav li.sidebar-card {
  position: relative;
}

/* Small corner badge marking a card as an individual ingredient. */
.card-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ingredient);
  box-shadow: var(--shadow-badge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.sidebar-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--text-faint);
  font-style: italic;
}

/* Tap the empty area of a day's drop zone to open the "Add food" modal. */
.day-meals {
  cursor: pointer;
}

/* "Add food" modal: search box + result grid mirror the sidebar list. */
#food-search-input {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--search-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2393897c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat left 0.7rem center;
  border: 1px solid var(--line);
  border-radius: 999px;
}

#food-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--card-bg);
}

#food-search-input::placeholder {
  color: var(--muted);
}

.food-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.75rem;
}

.food-search-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}

.food-search-list .recipe-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.food-search-list .recipe-title {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.2;
  color: var(--text-primary);
}

.food-search-list li:hover .recipe-thumb {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ===== Full-day nutrition summary (progress bars under each day's date) ===== */
.day-summary {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  /* Horizontal padding re-insets the content so labels stay aligned with the
     meal section names (the parent stack handles the bleed and background).
     Bottom space is padding so the stack's opaque background covers the full
     frozen band and masks meal cards scrolling under it. */
  padding: 0 1rem 2.8rem 1rem;
  font-size: 0.7rem;
  color: var(--macro-pill-text);
  cursor: pointer;
}

/* Outer columns have no padding on the planner-facing side, so the content
   stays flush to the planner's inner edge. */
.day-column:first-child .day-summary {
  padding-left: 0;
}
.day-column:last-child .day-summary {
  padding-right: 0;
}

/* Each metric is a column: the vertical bar on top, then its percent and a
   label beneath. */
.day-metric {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.metric-label {
  font-weight: 400;
  text-align: center;
  line-height: 1.1;
  font-size: 0.52rem;
}

/* The verbose cur/target value is kept in the DOM (metric-cur) for the popover
   but not shown beneath each bar, where space is tight. */
.metric-value {
  display: none;
}

.metric-cur {
  font-weight: 700;
  color: var(--macro-pill-text);
}

/* Vertical track: a tall rounded rectangle the fill rises through. */
.metric-bar {
  width: 100%;
  max-width: 3rem;
  height: 3.6rem;
  background: var(--hover-warm-2);
  border-radius: 0.8rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.metric-fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 0.8rem;
  transition: height 0.2s ease;
  /* Goal not yet reached: a dotted fill. */
  background-color: transparent;
  background-image: radial-gradient(var(--accent) 26%, transparent 28%);
  background-size: 2px 2px;
}

/* Goal reached: a solid fill. */
.metric-fill.is-reached {
  background-image: none;
  background-color: var(--accent);
}

.metric-pct {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
}

/* Section macro lines open the same breakdown popover on tap. */
.day-section .day-totals {
  cursor: pointer;
}

.day-section .day-totals:hover span {
  color: var(--ink);
}

/* ===== Nutrition breakdown popover ===== */
.nutrition-popover {
  min-width: 250px;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Goal + progress bar shown under a single-metric breakdown heading. */
.nutrition-goal {
  margin-bottom: 0.6rem;
}

.nutrition-goal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.nutrition-goal-value strong {
  color: var(--macro-pill-text);
}

.nutrition-goal-pct {
  font-variant-numeric: tabular-nums;
}

.nutrition-goal-bar {
  display: block;
  height: 6px;
  background: var(--hover-warm-2);
  border-radius: 3px;
  overflow: hidden;
}

.nutrition-goal-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #1a1a1a;
  border-radius: 3px;
}

.nutrition-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.72rem;
}

.nutrition-table th,
.nutrition-table td {
  text-align: right;
  padding: 3px 5px;
  white-space: nowrap;
}

.nutrition-table th:first-child,
.nutrition-table td:first-child {
  text-align: left;
  white-space: normal;
  max-width: 160px;
}

.nutrition-table thead th {
  color: var(--label);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nutrition-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-faint);
}

.nutrition-table tfoot td {
  border-top: 1px solid var(--border-soft);
  font-weight: 700;
}

.nutrition-qty {
  display: block;
  color: var(--text-faint);
  font-size: 0.64rem;
}

.nutrition-na {
  color: var(--text-faint);
  font-style: italic;
  text-align: center !important;
}

.nutrition-empty {
  margin: 0;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
}

/* ===== Vitamins / minerals summary entries + hover detail ===== */
/* The "% vitamins" / "% minerals" entries open their own detail popover, so
   hint that they're independently interactive within the totals bar. */
.day-vit,
.day-min {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-color: var(--text-faint);
}

.day-vit:hover,
.day-min:hover,
.day-vit:focus-visible,
.day-min:focus-visible {
  color: var(--ink);
  outline: none;
}

.micro-popover {
  min-width: 264px;
  max-width: 320px;
}

.micro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.micro-table td {
  padding: 3px 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.micro-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-faint);
}

.micro-name {
  text-align: left;
  white-space: normal;
  color: var(--text-primary);
}

.micro-amt {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.micro-bar-cell {
  width: 72px;
}

.micro-bar {
  display: block;
  width: 100%;
  height: 6px;
  background: var(--hover-soft);
  border-radius: 999px;
  overflow: hidden;
}

.micro-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.micro-pct {
  width: 38px;
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ===== Shopping list ===== */
.shopping-list-btn {
  position: relative;
}

/* Unchecked-item count over the cart icon. */
.shopping-list-count {
  position: absolute;
  top: 2px;
  left: 24px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.62rem;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

#shopping-list-form {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

#shopping-list-input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
}

#shopping-list-input:focus {
  outline: none;
  border-color: var(--accent);
}

#shopping-list-add {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#shopping-list-add:hover {
  background: var(--accent-dark);
}

.shopping-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-faint);
}

.shopping-item label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.9rem;
}

.shopping-item input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
}

.shopping-item-name {
  overflow-wrap: anywhere;
}

.shopping-item.checked .shopping-item-name {
  text-decoration: line-through;
  color: var(--text-faint);
}

.shopping-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.shopping-item-remove:hover {
  color: var(--danger-strong);
}

.shopping-list-actions {
  margin-top: 0.75rem;
  text-align: right;
}

#shopping-list-clear {
  background: none;
  border: none;
  color: var(--danger-strong);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

#shopping-list-clear:hover {
  color: var(--danger-strong-hover);
}