/* ════════════════════════════════════════════════════════
   Family Flavour — Design System
   Phase 2 (Auth + Family Creation)
   ════════════════════════════════════════════════════════ */

/* ── 1. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }


/* ── 2. DESIGN TOKENS ── */
:root {
  /* Cream surfaces — light to slightly deeper */
  --cream-1: #FFFCF4;       /* card interiors, input bg */
  --cream-2: #FBF7EB;       /* primary card surface */
  --cream-3: #F4ECD9;       /* page background */
  --cream-4: #EDE3CC;       /* deeper warm surface, hover */

  /* Sage — primary brand colour */
  --sage-1: #DDE3D5;        /* hover tints, soft fills */
  --sage-2: #ABB89A;        /* mid sage */
  --sage-3: #7B8C6F;        /* primary sage (buttons, accents) */
  --sage-4: #5A6F4D;        /* deep sage (text on cream) */
  --sage-5: #3F4F35;        /* darkest sage (high-contrast text) */

  /* Terracotta — warm accent */
  --terra-1: #F5DECF;       /* soft terracotta wash */
  --terra-2: #D88862;       /* mid terracotta */
  --terra-3: #B5532A;       /* primary terracotta (favourites, hearts) */
  --terra-4: #823818;       /* deep terracotta */

  /* Ink — warm browns for text */
  --ink-1: #3A2E20;         /* primary text */
  --ink-2: #6B5C4A;         /* secondary text */
  --ink-3: #8A7860;         /* tertiary, captions */
  --ink-4: #B0A18B;         /* placeholders, disabled */

  /* Borders — warm tans */
  --border-soft: #EDE0C5;
  --border-mid:  #E5DAC0;
  --border-firm: #D4C5A2;

  /* Semantic */
  --success: #5A8C5E;
  --success-bg: #E5EFE0;
  --warning: #C68E2D;
  --warning-bg: #F8EDD3;
  --danger:  #B5532A;       /* re-uses terra-3 */
  --danger-bg: #F5DECF;

  /* Radii, shadows, motion */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 999px;

  --shadow-soft: 0 2px 14px rgba(58, 46, 32, 0.06);
  --shadow-card: 0 4px 24px rgba(58, 46, 32, 0.08);

  --t-fast: 120ms ease;
  --t-mid:  220ms ease;

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h:  64px;
}


/* ── 3. TYPOGRAPHY ── */
body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--cream-3);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

.serif-display {
  font-family: 'Playfair Display', Georgia, serif;
}
.italic-soft {
  font-style: italic;
  color: var(--sage-4);
}
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.muted { color: var(--ink-2); }


/* ── 4. AUTH / WELCOME LAYOUT ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(ellipse at top, rgba(123, 140, 111, 0.06), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(181, 83, 42, 0.04), transparent 60%),
    var(--cream-3);
}

.auth-card {
  background: var(--cream-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 2.75rem 2.5rem 2.25rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-card);
}
.invite-banner {
  background: var(--cream-3);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--rose-deep, #6B2235);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--ink, #3a2e28);
  text-align: center;
}

.invite-banner strong {
  font-weight: 600;
  color: var(--rose-deep, #6B2235);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.auth-logo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--cream-1);
  padding: 4px;
}
.auth-edition {
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--sage-4);
  text-transform: uppercase;
}

.auth-divider {
  height: 1px;
  background: var(--border-mid);
  margin: 0 auto 1.5rem;
  width: 50%;
}

.auth-title {
  text-align: center;
  margin-bottom: 4px;
}
.auth-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--sage-4);
  font-size: 14px;
  margin-bottom: 1.75rem;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.25rem 0;
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}
.auth-or span {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

.auth-footer {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 1.5rem;
}
.auth-footer a {
  color: var(--sage-4);
  text-decoration: none;
  font-weight: 500;
}
.auth-footer a:hover { text-decoration: underline; }


/* ── 5. WELCOME (POST-AUTH, NO FAMILY YET) ── */
.welcome-card {
  background: var(--cream-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.welcome-logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  object-fit: contain;
  background: var(--cream-1);
  padding: 6px;
}

.welcome-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.path-card {
  background: var(--cream-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 1.5rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-mid), transform var(--t-mid), background var(--t-mid);
}
.path-card:hover {
  border-color: var(--sage-3);
  transform: translateY(-2px);
  background: var(--cream-2);
}
.path-card .path-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sage-1);
  color: var(--sage-4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.path-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  margin-bottom: 4px;
}
.path-card p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}


/* ── 6. APP SHELL (SIDEBAR LAYOUT) ── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--cream-2);
  border-right: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border-mid);
  margin-bottom: 1rem;
}
.sidebar-brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream-1);
  padding: 2px;
  flex-shrink: 0;
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sidebar-brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
}
.sidebar-brand-edition {
  font-size: 10px;
  font-style: italic;
  color: var(--sage-4);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

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

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  width: 100%;
  text-align: left;
}
.nav-item:hover {
  background: var(--cream-4);
  color: var(--ink-1);
}
.nav-item.active {
  background: var(--sage-1);
  color: var(--sage-5);
  font-weight: 500;
}
.nav-item .nav-icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-profile {
  margin: 1rem 0.75rem 0;
  padding: 0.85rem;
  border-top: 1px solid var(--border-mid);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sage-3);
  color: var(--cream-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  line-height: 1.2;
}
.profile-role {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 1px;
}

/* Main content area */
.main {
  padding: 2rem 2.5rem;
  overflow-x: hidden;
}
.main-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.main-header h1 {
  font-size: 28px;
}
.main-header .eyebrow {
  margin-bottom: 4px;
}


/* ── 7. COMPONENTS ── */

/* Form fields */
.field {
  margin-bottom: 0.85rem;
}
.field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 5px;
  font-weight: 500;
}
.input, .select, .textarea {
  width: 100%;
  background: var(--cream-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-1);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--sage-3);
  box-shadow: 0 0 0 3px rgba(123, 140, 111, 0.15);
}
.input::placeholder { color: var(--ink-4); }
.textarea { resize: vertical; min-height: 80px; }

.field-help {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 5px;
}
.field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 5px;
}

.field-row-right {
  text-align: right;
  margin-top: -0.4rem;
  margin-bottom: 1rem;
}
.field-row-right a {
  font-size: 12px;
  color: var(--sage-4);
  text-decoration: none;
  font-style: italic;
}
.field-row-right a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--sage-3);
  color: var(--cream-1);
  border-color: var(--sage-3);
  letter-spacing: 0.02em;
}
.btn-primary:hover:not(:disabled) {
  background: var(--sage-4);
  border-color: var(--sage-4);
}

.btn-secondary {
  background: var(--cream-1);
  color: var(--ink-1);
  border-color: var(--border-mid);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--sage-3);
  background: var(--cream-2);
}

.btn-ghost {
  background: transparent;
  color: var(--sage-4);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--sage-1);
  color: var(--sage-5);
}

.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: var(--terra-1);
}
.btn-danger-ghost:hover:not(:disabled) {
  background: var(--terra-1);
}

.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* Google G icon */
.google-g {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%234285F4' d='M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.8 30.2 0 24 0 14.6 0 6.5 5.4 2.5 13.2l7.8 6c1.9-5.7 7.2-9.7 13.7-9.7z'/><path fill='%2334A853' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.5 2.9-2.2 5.4-4.7 7l7.6 5.9c4.4-4 6.9-10 6.9-17.4z'/><path fill='%23FBBC05' d='M10.3 28.7c-.5-1.5-.8-3-.8-4.7s.3-3.2.8-4.7l-7.8-6C.9 16.3 0 20 0 24s.9 7.7 2.5 10.7l7.8-6z'/><path fill='%23EA4335' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.8 2.2-8.3 2.2-6.5 0-12-4-13.7-9.7l-7.8 6C6.5 42.6 14.6 48 24 48z'/></svg>") center/contain no-repeat;
}

/* Cards */
.card {
  background: var(--cream-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

/* Invite code display */
.invite-code-display {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-1);
  border: 1.5px dashed var(--sage-3);
  border-radius: var(--r-md);
  padding: 0.85rem 1.25rem;
}
.invite-code-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--sage-5);
}
.invite-code-copy {
  background: var(--sage-1);
  color: var(--sage-4);
  border: none;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.invite-code-copy:hover { background: var(--sage-2); color: var(--sage-5); }

/* Member list */
.member-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 1rem;
  background: var(--cream-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-1);
}
.member-meta {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.member-role-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--sage-1);
  color: var(--sage-5);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.member-role-pill.owner {
  background: var(--terra-1);
  color: var(--terra-4);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink-1);
  color: var(--cream-1);
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
  z-index: 1000;
  max-width: 90%;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.success { background: var(--sage-4); }
.toast.error { background: var(--terra-3); }

/* Loading state */
.loading-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--cream-3);
}
.loading-screen img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.05); }
}
.loading-screen span {
  font-style: italic;
  color: var(--ink-3);
  font-size: 13px;
}

/* Placeholder section (Phase 3 stubs) */
.coming-soon {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--cream-2);
  border: 1px dashed var(--border-firm);
  border-radius: var(--r-md);
}
.coming-soon-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--sage-1);
  color: var(--sage-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coming-soon h2 {
  font-size: 22px;
  margin-bottom: 6px;
}
.coming-soon p {
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  max-width: 400px;
  margin: 0 auto;
}


/* ── 8. UTILITIES ── */
.stack { display: flex; flex-direction: column; }
.stack-1 > * + * { margin-top: 0.5rem; }
.stack-2 > * + * { margin-top: 1rem; }
.stack-3 > * + * { margin-top: 1.5rem; }
.row { display: flex; align-items: center; gap: 0.75rem; }
.row-between { justify-content: space-between; }
.text-center { text-align: center; }
.spacer { flex: 1; }
.hidden { display: none !important; }


/* ── 9. RESPONSIVE ── */
@media (max-width: 720px) {
  :root { --sidebar-w: 64px; }
  .sidebar-brand-text,
  .nav-item span:not(.nav-icon),
  .sidebar-profile .profile-name,
  .sidebar-profile .profile-role { display: none; }
  .sidebar-brand,
  .nav-item,
  .sidebar-profile { justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-item { padding: 10px; }
  .main { padding: 1.25rem 1.25rem; }
  .auth-card,
  .welcome-card { padding: 2rem 1.25rem; }
  .welcome-paths { grid-template-columns: 1fr; }
}

/* Tabler icon sizing */
.ti { font-size: 18px; line-height: 1; vertical-align: middle; }
.nav-icon .ti { font-size: 18px; }
.path-icon .ti, .coming-soon-icon .ti { font-size: 22px; }


/* ============================================================
   RECIPES — Phase 3a styles
   ============================================================ */

/* Toolbar: search + favourites toggle */
.recipes-toolbar {
  display: flex;
  gap: .75rem;
  margin: 1rem 0 .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.search-wrap {
  flex: 1;
  min-width: 240px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cream-2);
  border-radius: 999px;
  padding: 0 1rem;
  border: 1px solid transparent;
  transition: border-color .15s ease;
}
.search-wrap:focus-within {
  border-color: var(--sage-3);
}
.search-wrap i {
  color: var(--sage-3);
  margin-right: .5rem;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.search-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  padding: .65rem 0;
  font-family: 'Lora', serif;
  font-size: 1rem;
  color: var(--sage-3);
  outline: none;
}
.search-wrap input::placeholder {
  color: var(--sage-3);
  opacity: .55;
}

/* Chip — used for filter pills + favourites toggle */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--sage-3);
  border: 1px solid transparent;
  font-family: 'Lora', serif;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.chip:hover {
  border-color: var(--sage-3);
}
.chip-active,
.chip[aria-pressed="true"] {
  background: var(--sage-3);
  color: var(--cream-2);
  border-color: var(--sage-3);
}
.chip-toggle i {
  font-size: 1rem;
}

/* Filter pills: horizontally scrollable row */
.filter-pills {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  scrollbar-width: thin;
}
.filter-pills::-webkit-scrollbar {
  height: 4px;
}
.filter-pills::-webkit-scrollbar-thumb {
  background: var(--sage-3);
  border-radius: 4px;
  opacity: .3;
}

/* Recipe grid */
.recipes-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 1rem;
}
.recipes-grid:empty {
  display: none;
}
/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--sage-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.empty-state i {
  font-size: 3rem;
  opacity: .35;
}
.empty-state h3 {
  font-family: 'Playfair Display', serif;
  margin: 0;
  font-size: 1.4rem;
}
.empty-state p {
  margin: 0;
  font-family: 'Lora', serif;
  opacity: .75;
}

/* The "Add recipe" button in the page header — make sure it sits right */
.main-header {
  align-items: center;
}

/* === Recipe cards ====================================================== */

.recipe-card {
  background: var(--cream-2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(123, 140, 111, .15);
}

.recipe-card-photo {
 height: 160px;
  background: var(--sage-1, #d8dfd1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.recipe-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.recipe-card-photo .placeholder {
  font-size: 2.5rem;
  color: var(--sage-3);
  opacity: .35;
}

.recipe-card-body { padding: .85rem 1rem 1rem; }
.recipe-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 .2rem;
  color: var(--sage-3);
  line-height: 1.25;
}
.recipe-card-meta {
  font-family: 'Lora', serif;
  font-size: .82rem;
  color: var(--sage-3);
  opacity: .75;
}

.recipe-card-photo {
  position: relative;
}

.recipe-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--terra-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.1s ease;
}

.recipe-card-fav:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.recipe-card-fav:disabled {
  cursor: wait;
  opacity: 0.6;
}

.recipe-card-fav .ti {
  font-size: 20px;
}
/* 3b — modal shell */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(60, 50, 40, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     z-index: 1000;
   }

   .modal-overlay[hidden] {
     display: none;
   }

   .modal-panel {
     background: var(--cream-2);
     border-radius: 12px;
     width: 100%;
     max-width: 560px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
   }

   .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px;
     border-bottom: 1px solid var(--sage-3);
   }

   .modal-header h2 {
     margin: 0;
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     color: var(--terra-3);
   }

   .modal-close {
     background: transparent;
     border: none;
     cursor: pointer;
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: var(--sage-3);
     transition: background 0.1s ease;
   }

   .modal-close:hover {
     background: rgba(0, 0, 0, 0.05);
   }

   .modal-close .ti {
     font-size: 24px;
   }

   .modal-body {
     padding: 24px;
   }
   /* 3c — recipe form scaffolding */
   .recipe-form {
     display: flex;
     flex-direction: column;
     gap: 24px;
   }

   .form-section {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }

   .form-section-title {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     color: var(--terra-3);
     margin: 0 0 4px 0;
   }

   .form-row {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }

   .form-row label {
     font-family: 'Lora', serif;
     font-size: 0.9rem;
     color: var(--sage-3);
     font-weight: 600;
   }

   .recipe-form input[type="text"],
   .recipe-form select,
   .recipe-form textarea {
     font-family: 'Lora', serif;
     font-size: 1rem;
     padding: 10px 12px;
     border: 1px solid var(--sage-3);
     border-radius: 8px;
     background: white;
     color: #2a2a2a;
     width: 100%;
     box-sizing: border-box;
     transition: border-color 0.1s ease, box-shadow 0.1s ease;
   }

   .recipe-form input[type="text"]:focus,
   .recipe-form select:focus,
   .recipe-form textarea:focus {
     outline: none;
     border-color: var(--terra-3);
     box-shadow: 0 0 0 3px rgba(178, 90, 60, 0.15);
   }

   .recipe-form textarea {
     resize: vertical;
     min-height: 80px;
   }
   /* 3c part 2 — allergy chips */
   .form-section-help {
     margin: 0;
     font-family: 'Lora', serif;
     font-size: 0.85rem;
     color: rgba(0, 0, 0, 0.55);
     font-style: italic;
   }

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

   .allergy-chip {
     display: inline-flex;
     align-items: center;
     padding: 6px 14px;
     border: 1px solid var(--sage-3);
     border-radius: 999px;
     background: white;
     color: var(--sage-3);
     font-family: 'Lora', serif;
     font-size: 0.9rem;
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
     user-select: none;
   }

   .allergy-chip:hover {
     background: rgba(155, 168, 145, 0.12);
   }

   /* Hide the actual checkbox visually but keep it accessible */
   .allergy-chip input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
     pointer-events: none;
   }

   /* When the hidden checkbox is ticked, fill the chip */
   .allergy-chip:has(input:checked) {
     background: var(--sage-3);
     color: var(--cream-2);
     border-color: var(--sage-3);
   }

   /* 3d — ingredient & step rows */
   .ingredient-rows {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }

   .ingredient-row {
     display: grid;
     grid-template-columns: 70px 100px 1fr auto;
     gap: 8px;
     align-items: center;
   }

   .ingredient-row input[type="text"] {
     padding: 8px 10px;       /* slightly tighter than the regular form inputs */
     font-size: 0.95rem;
   }

   .row-remove {
     background: transparent;
     border: none;
     cursor: pointer;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: var(--sage-3);
     transition: background 0.1s ease, color 0.1s ease;
   }

   .row-remove:hover {
     background: rgba(178, 90, 60, 0.1);
     color: var(--terra-3);
   }

   .row-remove .ti {
     font-size: 18px;
   }

   .form-add-btn {
     align-self: flex-start;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 14px;
     border: 1px dashed var(--sage-3);
     background: transparent;
     color: var(--sage-3);
     border-radius: 8px;
     font-family: 'Lora', serif;
     font-size: 0.95rem;
     cursor: pointer;
     transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
   }

   .form-add-btn:hover {
     background: rgba(155, 168, 145, 0.1);
     color: var(--terra-3);
     border-color: var(--terra-3);
     border-style: solid;
   }

   .form-add-btn .ti {
     font-size: 18px;
   }
   /* 3d — step rows (auto-numbered via CSS counter) */
   .step-rows {
     counter-reset: step-counter;
     display: flex;
     flex-direction: column;
     gap: 8px;
   }

   .step-row {
     counter-increment: step-counter;
     display: grid;
     grid-template-columns: 32px 1fr auto;
     gap: 8px;
     align-items: start;
   }

   .step-num::before {
     content: counter(step-counter) ".";
     font-family: 'Playfair Display', serif;
     color: var(--terra-3);
     font-size: 1.1rem;
     display: block;
     padding-top: 8px;
   }

   .step-row textarea {
     min-height: 50px;
     padding: 8px 10px;
     font-size: 0.95rem;
   }

   .step-row .row-remove {
     margin-top: 4px;     /* nudge the × down so it lines up with the first textarea row */
   }
   /* 3f — form actions (Save / Cancel) */
   .form-actions {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     padding-top: 16px;
     border-top: 1px solid var(--sage-3);
   }

   .btn-primary {
     background: var(--terra-3);
     color: var(--cream-2);
     border: none;
     padding: 10px 24px;
     border-radius: 8px;
     font-family: 'Lora', serif;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.15s ease, transform 0.1s ease;
   }

   .btn-primary:hover {
     background: rgba(178, 90, 60, 0.9);
     transform: translateY(-1px);
   }

   .btn-primary:disabled {
     opacity: 0.6;
     cursor: wait;
     transform: none;
   }

   .btn-ghost {
     background: transparent;
     color: var(--sage-3);
     border: 1px solid var(--sage-3);
     padding: 10px 24px;
     border-radius: 8px;
     font-family: 'Lora', serif;
     font-size: 1rem;
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   }

   .btn-ghost:hover {
     background: rgba(155, 168, 145, 0.1);
     color: var(--terra-3);
     border-color: var(--terra-3);
   }
   /* 3g — photo picker */
   .photo-pick-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 20px;
     border: 1px dashed var(--sage-3);
     border-radius: 8px;
     background: white;
     color: var(--sage-3);
     font-family: 'Lora', serif;
     font-size: 0.95rem;
     
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
     width: fit-content;
   }

   .photo-pick-btn[hidden] {
     display: none;
   }

   .photo-pick-btn:hover {
     background: rgba(155, 168, 145, 0.1);
     color: var(--terra-3);
     border-color: var(--terra-3);
     border-style: solid;
   }

   .photo-pick-btn .ti {
     font-size: 20px;
   }

   .photo-preview {
     position: relative;
     width: 100%;
     max-width: 320px;
     aspect-ratio: 4 / 3;
     border-radius: 8px;
     overflow: hidden;
     background: var(--sage-3);
   }

   .photo-preview img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .photo-remove {
     position: absolute;
     top: 8px;
     right: 8px;
     width: 32px;
     height: 32px;
     border: none;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.5);
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.1s ease;
   }

   .photo-remove:hover {
     background: rgba(0, 0, 0, 0.7);
   }

   .photo-remove .ti {
     font-size: 18px;
   }
   /* ──────────────────────────────────────────
   Recipe detail modal contents (3h)
   ────────────────────────────────────────── */
.recipe-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Two-column recipe detail on wider screens (PC) */
.rd-main,
.rd-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 760px) {
  /* recipe detail takes over the full screen on PC */
  #recipe-detail-modal {
    padding: 0;
  }
  #recipe-detail-modal .modal-panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  /* keep the recipe comfortable to read: centered, two columns */
  .recipe-detail {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 28px;
    row-gap: 20px;
    align-items: start;
  }
  .rd-actions {
    grid-column: 1 / -1;
  }
}

/* Photo */
.rd-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sage-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-photo-placeholder {
  color: var(--sage-3);
}
.rd-photo-placeholder .ti {
  font-size: 56px;
}

/* Author + category line */
.rd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rd-author {
  margin: 0;
  font-style: italic;
  color: var(--sage-4);
  font-size: 15px;
}
.rd-category {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--sage-1);
  color: var(--sage-4);
  font-size: 13px;
  font-weight: 500;
}
/* Translate / Show original button on the recipe detail */
.rd-translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--sage-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--sage-4);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rd-translate-btn:hover:not(:disabled) {
  background: var(--sage-1);
  border-color: var(--sage-3);
  color: var(--sage-5, var(--sage-4));
}
.rd-translate-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.rd-translate-btn .ti {
  font-size: 15px;
}

/* Allergy chips */
.rd-allergies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-allergy-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--cream-2);
  border: 1px solid var(--border-soft);
  color: var(--sage-3);
  font-size: 12px;
  font-weight: 500;
}
/* Memory + secrets sections (3h-4) */
.rd-section {
  background: var(--cream-1);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-section-text {
  margin: 0;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.55;
}
.rd-attribution {
  margin: 0;
  align-self: flex-end;
  font-style: italic;
  color: var(--sage-4);
  font-size: 13px;
}
/* Ingredients + steps lists (3h-5) */
.rd-ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-ingredients li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.5;
}
.rd-ingredients li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--sage-3);
}

.rd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: rd-step;
}
.rd-steps li {
  position: relative;
  padding-left: 32px;
  min-height: 22px;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.55;
  counter-increment: rd-step;
}
.rd-steps li::before {
  content: counter(rd-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--terra-1);
  color: var(--terra-3);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Detail modal actions / Delete button (3j-1) */
.rd-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  gap: 0.5rem;
}
/* 3i-1: Edit button in detail modal */
.rd-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--sage-1);
  color: var(--sage-3);
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--t-fast);
}
.rd-edit-btn:hover {
  background: var(--sage-1);
}
.rd-edit-btn .ti {
  font-size: 16px;
  color: var(--sage-3);
}
.rd-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--danger-bg);
  color: var(--danger);
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--t-fast);
}
.rd-delete-btn:hover {
  background: var(--danger-bg);
}
.rd-delete-btn .ti {
  font-size: 16px;
}

/* === Scan review modal === */

/* Info banner at the top of the review modal */
.scan-review-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 1.25rem;
  background: #FAF0E0;
  border: 1px solid #E5D4B0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B4A2C;
}

.scan-review-banner i {
  font-size: 18px;
  color: #A04C2A;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Section header that shows a title + a small right-aligned count */
.form-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.form-section-header .form-section-title {
  margin-bottom: 0;
}

.scan-found-count {
  font-size: 12px;
  color: #8A7866;
  font-style: italic;
  white-space: nowrap;
}

/* 4-across grid for servings / prep / cook / temp */
.form-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.form-row-grid .form-row {
  margin-bottom: 0;
}

@media (max-width: 540px) {
  .form-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================
   HOME VIEW — 3-ZONE LAYOUT
   ============================================ */
.home-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
}

.home-center {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0; /* prevents grid blowout */
}

.home-right {
  position: sticky;
  top: 1.5rem;
}

/* Collapse to one column on narrower screens */
@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
  }
  .home-right {
    position: static;
  }
}

/* ============================================
   WEEKLY MEAL PLANNER
   ============================================ */
.meal-planner {
  background: #F8F1E4;
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.5rem;
}

/* Header with week nav */
.meal-planner-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.week-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #2a2018;
  margin: 0;
  text-align: center;
}

.week-nav {
  background: transparent;
  border: 1px solid #E8DFC8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #A04C2A;
  font-size: 1.1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.week-nav:hover {
  background: #E8DFC8;
  border-color: #A04C2A;
}
.week-nav .ti {
  font-size: 1.1rem;
}

/* Day rows */
.meal-planner-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.day-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: stretch;
}

.day-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  color: #A04C2A;
  display: flex;
  align-items: center;
  padding-left: 0.25rem;
}

.meal-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

/* Tiles */
.meal-tile {
  background: var(--cream-1);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent;
}

.meal-tile.empty {
  background: transparent;
  border: 2px dashed #d9cdb1;
}
.meal-tile.empty:hover {
  border-color: #A04C2A;
  background: rgba(160, 76, 42, 0.04);
}

.meal-tile.filled {
  background: var(--cream-1);
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.06);
}
.meal-tile.filled:hover {
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.1);
}

.slot-label {
  font-family: 'Lora', serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a89c84;
  line-height: 1;
}

.add-recipe {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: #A04C2A;
}

.recipe-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #2a2018;
  line-height: 1.25;
}

/* Footer buttons */
.meal-planner-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #E8DFC8;
}

.mp-primary-btn {
  background: #A04C2A;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
}
.mp-primary-btn:hover { background: #883e22; }

.mp-secondary-btn {
  background: transparent;
  color: #A04C2A;
  border: 1px solid #A04C2A;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
}
.mp-secondary-btn:hover { background: rgba(160, 76, 42, 0.08); }

/* Use-up panel */
.use-up-panel[hidden] {
  display: none;
}
.use-up-panel {
  margin-top: 0.9rem;
  padding: 0.9rem;
  background: var(--cream-1);
  border-radius: 10px;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.use-up-panel input {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #E8DFC8;
  border-radius: 6px;
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  background: #F8F1E4;
  color: #2a2018;
}
.use-up-panel input:focus {
  outline: none;
  border-color: #A04C2A;
  background: #fff;
}

/* Responsive: stack tiles below day label on narrow screens */
@media (max-width: 600px) {
  .day-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .day-name {
    padding-left: 0;
  }
}
/* ============================================
   HOME — section colors & depth
   ============================================ */

/* Tonight's Dinner spotlight — elevated white card, the centerpiece */
#tonightsDinner {
  background: var(--cream-1);
  border: 1px solid #E8DFC8;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(60, 40, 20, 0.06);
  padding: 3rem 2rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}

/* When it's in placeholder state, override .coming-soon's dashed border */
#tonightsDinner.coming-soon {
  border-style: solid;
}

#tonightsDinner h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin: 0.5rem 0;
  color: #2a2018;
}

#tonightsDinner p {
  font-family: 'Lora', serif;
  font-style: italic;
  color: #6b5d48;
  max-width: 400px;
  margin: 0;
  line-height: 1.5;
}

/* Recently shared sidebar card — warmer cream tone, clearly a sidebar */
.home-right .card {
  background: #EFE3C8;
  border: 1px solid #DDD0A8;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.04);
}

.home-right .card h3 {
  margin: 0 0 0.6rem;
  color: #2a2018;
  font-size: 1.05rem;
}

.home-right .card p.muted {
  margin: 0;
  line-height: 1.5;
  color: #6b5d48;
}
/* ============================================
   HOME — full-height column treatment
   (Sidebars match cream-2, center is cream-3)
   ============================================ */

/* Break the home columns out of .main's padding so they go edge-to-edge */
.home-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
  /* Negate .main's right + bottom padding so columns reach screen edge */
  margin: 0 -2.5rem -2rem 0;
  min-height: 65vh;
}

/* Center band — slightly deeper cream, where the hero card lives */
.home-center {
  background: var(--cream-3);
  padding: 0.5rem 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* Right band — matches the left sidebar tone, full height */
.home-right {
  background: var(--cream-2);
  border-left: 1px solid var(--border-mid);
  padding: 1.5rem 1.75rem;
  position: static;
}

/* Recently shared no longer needs its own card styling —
   the column IS the panel now, content sits directly on it */
.home-right .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.home-right .card h3 {
  margin: 0 0 0.5rem;
  color: var(--ink-1);
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
}

.home-right .card p.muted {
  margin: 0;
  color: var(--ink-2);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Mobile: stack to one column, undo the negative margins */
@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
    margin: 0;
    min-height: 0;
  }
  .home-right {
    border-left: none;
    border-top: 1px solid var(--border-mid);
  }
}
/* ============================================
   MEAL PICKER MODAL
   ============================================ */
.meal-picker-context {
  margin-bottom: 1rem;
  font-style: italic;
  font-size: 0.9rem;
}

.meal-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.meal-picker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--cream-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
  font-family: 'Lora', serif;
}

.meal-picker-item:hover {
  border-color: var(--sage-3);
  background: var(--cream-2);
}

.meal-picker-item.selected {
  border-color: var(--terra-3);
  background: var(--terra-1);
}

.meal-picker-item-photo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--sage-1);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-3);
}

.meal-picker-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meal-picker-item-photo .ti {
  font-size: 22px;
  opacity: 0.5;
}

.meal-picker-item-info {
  flex: 1;
  min-width: 0;
}

.meal-picker-item-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.2;
}

.meal-picker-item-meta {
  font-size: 0.8rem;
  color: var(--ink-3);
  font-style: italic;
  margin: 2px 0 0;
}

.meal-picker-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ink-3);
  font-style: italic;
  font-size: 0.9rem;
}

.meal-picker-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-mid);
  display: flex;
  justify-content: center;
}
/* ============================================
   TONIGHT'S DINNER HERO CARD
   ============================================ */

/* ============================================
   TONIGHT'S DINNER HERO CARD
   ============================================ */

/* Filled state: big photo on TOP, info BELOW (vertical stack like the inspo) */
#tonightsDinner.tonight-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-height: 0;
}

#tonightsDinner.tonight-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(60, 40, 20, 0.1);
}

.tonight-photo-wrap {
  background: var(--sage-1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;     /* nice cinematic ratio for a full-width hero photo */
  min-height: 0;
}
.tonight-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tonight-photo-wrap.placeholder .ti {
  font-size: 4rem;
  color: var(--sage-3);
  opacity: 0.5;
}

.tonight-info {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tonight-info .eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.tonight-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  font-style: italic;
  color: var(--ink-1);
  margin: 0;
  line-height: 1.15;
}

.tonight-author {
  font-size: 0.95rem;
  margin: 0;
  color: var(--sage-4);
}

.tonight-meta {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: var(--ink-3);
  margin: 0;
}

.tonight-view-cta {
  margin-top: 0.75rem;
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  color: var(--terra-3);
  font-weight: 500;
}

/* Empty state — keep the existing white card, but style the "Plan your week" link */
#tonightsDinner.coming-soon p a {
  color: var(--terra-3);
  font-weight: 500;
  text-decoration: none;
}
#tonightsDinner.coming-soon p a:hover {
  text-decoration: underline;
}

/* Mobile: a bit smaller title + tighter padding */
@media (max-width: 700px) {
  .tonight-info {
    padding: 1.25rem 1.5rem 1.75rem;
  }
  .tonight-name {
    font-size: 1.4rem;
  }
}
/* ---- Step 6: Use-up ingredient search ---- */
.use-up-summary {
  font-family: 'Lora', serif;
  font-size: 15px;
  color: var(--ink-2);
  margin: 16px 0 10px;
}
/* Header row that holds the summary + the close button */
.use-up-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}
.use-up-results-header .use-up-summary {
  margin: 0;
}

/* Close button on the results panel */
.use-up-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.use-up-close:hover {
  background: var(--cream-2);
  border-color: var(--ink-3);
  color: var(--ink-1, var(--ink-2));
}
.use-up-close .ti {
  font-size: 16px;
}

.use-up-empty {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--ink-3);
  margin: 16px 0;
}

.use-up-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.use-up-result {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  background: var(--cream-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.05s;
  font-family: inherit;
}

.use-up-result:hover {
  background: var(--cream-4);
  border-color: var(--terra-2);
}

.use-up-result:active {
  transform: scale(0.99);
}

.use-up-result-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cream-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.use-up-result-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.use-up-result-photo i {
  font-size: 24px;
  color: var(--ink-4);
}

.use-up-result-info {
  flex: 1;
  min-width: 0;
}

.use-up-result-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--ink-1);
  margin: 0 0 2px;
}

.use-up-result-author {
  font-family: 'Lora', serif;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

/* ---- Step 6: panel layout — stack results under the search row ---- */
.use-up-panel {
  flex-wrap: wrap;
  align-items: flex-start;
}
.use-up-panel #useUpInput {
  flex: 1;
}
.use-up-panel #useUpResults {
  flex-basis: 100%;
}
/* ---- Recently shared aside ---- */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.recent-recipe {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px;
  background: var(--cream-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform 0.05s;
  font-family: inherit;
}

.recent-recipe:hover {
  background: var(--cream-4);
  border-color: var(--terra-2);
}

.recent-recipe:active {
  transform: scale(0.99);
}

.recent-recipe-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cream-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recent-recipe-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-recipe-photo i {
  font-size: 20px;
  color: var(--ink-4);
}

.recent-recipe-info {
  flex: 1;
  min-width: 0;
}

.recent-recipe-framing {
  font-family: 'Lora', serif;
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 2px;
}

.recent-recipe-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: var(--ink-1);
  margin: 0 0 2px;
  line-height: 1.2;
}

.recent-recipe-when {
  font-family: 'Lora', serif;
  font-size: 11px;
  color: var(--ink-4);
  margin: 0;
}
/* ---- Sidebar feedback link (Step 8) ---- */
.sidebar-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  width: 100%;
  text-align: left;
}

.sidebar-feedback:hover {
  background: var(--cream-4);
  color: var(--ink-1);
}

.sidebar-feedback .sidebar-feedback-icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-feedback em {
  font-style: italic;
}
@media (max-width: 768px) {
  .sidebar-feedback {
    justify-content: center;
    padding: 9px;
  }
  .sidebar-feedback > span:last-of-type {
    display: none;
  }
}
/* Converter inputs — brand-warm instead of browser white */
.conv-input,
.conv-from,
.conv-to {
  background: var(--cream-1);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  color: var(--ink-1);
}

.conv-input:focus,
.conv-from:focus,
.conv-to:focus {
  outline: none;
  border-color: var(--sage-3);
}
/* Two-button layout for scan recipe picker (camera + gallery) */
.scan-pick-buttons {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

@media (min-width: 480px) {
  .scan-pick-buttons {
    flex-direction: row;
  }
  
  .scan-pick-buttons .photo-pick-btn {
    flex: 1;
  }
}
/* ─── Activation screen ──────────────────────────────────── */
.auth-error {
  background: var(--danger-bg);
  color: var(--danger);
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  font-size: 14px;
  margin: 1rem 0;
  border: 1px solid var(--danger);
}

.auth-footer-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 1.25rem;
}

.auth-footer-note a {
  color: var(--terra-3);
  text-decoration: underline;
}

.auth-footer-signout {
  margin-top: 0.5rem;
  font-size: 12px;
  color: var(--ink-4);
}

.auth-footer-signout a {
  color: var(--ink-4);
}
@media (min-width: 760px) {
  .modal-panel:has(.recipe-form) {
    max-width: 800px;
  }
}/* === Scan modal: tidy, aligned button layout === */

/* A display rule was overriding the `hidden` attribute, so the pick buttons
   stayed on screen after a photo was chosen. Force hidden rows to actually hide. */
.scan-pick-buttons[hidden],
#scan-actions[hidden],
#scan-photo-preview[hidden],
#scan-page-count[hidden] {
  display: none !important;
}

/* Centre the icon + label in the Take photo / Choose from gallery buttons */
.scan-pick-buttons .photo-pick-btn {
  justify-content: center;
}

/* Action area: a clean 2-column grid */
#scan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 1rem;
}

/* "2 pages added" — centred and subtle, spanning the full width */
#scan-page-count {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--sage-4);
}

/* Secondary actions side by side; primary button spans the full width */
#scan-choose-different { grid-column: 1; }
#scan-add-page        { grid-column: 2; }
#scan-use-photo       { grid-column: 1 / -1; }

/* Every action button fills its cell and centres its contents */
#scan-actions .btn-ghost,
#scan-actions .btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}