/* detail.css -- Recipe detail screen styles
 *
 * Design tokens come from base.css. This file adds detail-screen-specific rules only.
 *
 * CSS is linked from index.html per ARCHITECTURE.md -- never imported from JS.
 *
 * When shared.css is created (triggered by the planner screen), move:
 *   - Protein swatch colour: PROTEIN_COLOR imported from lib/dom.js (single source of truth)
 *   - .detail-protein-swatch colour rules
 *   - card, sheet, and chip styles from home.css
 */

/* ---- Layout ---------------------------------------------------------------- */

.detail-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--cream);
  padding-bottom: 32px;
}

/* ---- Header ---------------------------------------------------------------- */

.detail-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--cream);
}

.detail-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--terracotta);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 0;
  height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}

.detail-back svg { flex-shrink: 0; }

.detail-header-actions {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.detail-action-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 3px;
}

.detail-action-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.detail-action-btn.is-in-plan ~ .detail-action-label,
.detail-action-btn.is-in-list ~ .detail-action-label {
  color: var(--olive);
  font-weight: 700;
}

.detail-action-btn.is-saved ~ .detail-action-label {
  color: var(--terracotta);
  font-weight: 700;
}

.detail-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.detail-action-btn:hover { background: rgba(0, 0, 0, 0.05); }

.detail-action-btn.is-saved { color: var(--white); background: var(--terracotta); }
.detail-action-btn.is-in-plan { color: var(--white); background: var(--olive); }
.detail-action-btn.is-in-list { color: var(--white); background: var(--olive); }
.detail-action-btn:disabled { opacity: 0.35; cursor: default; }

/* ---- Body ------------------------------------------------------------------ */

.detail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---- Hero ------------------------------------------------------------------ */

.detail-hero {
  display: flex;
  align-items: stretch;
  padding: 24px 16px 20px;
}

/* BUG FIX: removed min-height: 100% which caused layout issues in some browsers.
   align-self: stretch is sufficient -- the swatch expands to match the hero content height
   because the parent uses align-items: stretch (flex default). */
.detail-protein-swatch {
  width: 5px;
  border-radius: 4px;
  background: var(--swatch-color, #B5A48A);
  flex-shrink: 0;
  margin-right: 16px;
  align-self: stretch;
}

.detail-hero-content {
  flex: 1;
  min-width: 0;
}

/* ---- Meta row -- JetBrains Mono, uppercase --------------------------------- */

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.detail-meta-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--sand);
  padding: 4px 8px;
  border-radius: 3px;
}

/* ---- Title -- Lora serif --------------------------------------------------- */

.detail-title {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--brown);
  margin: 0 0 8px;
}

.detail-description {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--brown-mid);
  margin: 0 0 10px;
}

/* ---- Badges ---------------------------------------------------------------- */

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}

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

.badge-kids        { background: var(--olive-pale); color: var(--olive); }
.badge-slow        { background: #EEF0F6; color: #3A5080; }
.badge-vegetarian  { background: var(--sand); color: var(--brown-mid); }
.badge-vegan       { background: var(--sand); color: var(--brown-mid); }
.badge-gluten      { background: var(--sand); color: var(--brown-mid); }
.badge-dairy       { background: var(--sand); color: var(--brown-mid); }
.badge-nut         { background: var(--sand); color: var(--brown-mid); }
.badge-highprotein { background: var(--sand); color: var(--brown-mid); }

/* ---- Source attribution ---------------------------------------------------- */

.detail-source {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

.detail-source-own {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}

.detail-source-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.detail-source-name {
  color: var(--muted);
}

/* ---- PRO TIP --------------------------------------------------------------- */

.detail-tip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
  margin: 0 16px 20px;
  padding: 14px 16px;
  background: var(--sand);
  border-radius: 8px;
}

.detail-tip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--terracotta);
  flex-shrink: 0;
  padding-top: 2px;
  white-space: nowrap;
}

.detail-tip-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brown-mid);
}

/* ---- Sections -------------------------------------------------------------- */

.detail-section { padding: 24px 16px 24px; }

.detail-section-title {
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brown);
  margin: 0 0 16px;
}

/* ---- Serving scaler -------------------------------------------------------- */

.detail-scaler {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-scaler-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  color: var(--brown);
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.detail-scaler-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.detail-scaler-btn:not(:disabled):hover {
  background: var(--terracotta-pale);
}

.detail-scaler-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--brown-mid);
  min-width: 7ch;
  text-align: center;
}

.detail-scaler-row {
  margin-bottom: 20px;
}

/* ---- Ingredients ----------------------------------------------------------- */

.detail-ingredients {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.detail-ingredient {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brown);
  padding: 14px 0;
  border-bottom: 1px solid var(--sand-mid);
}

.detail-ingredient:last-child { border-bottom: none; }

/* ---- Steps ----------------------------------------------------------------- */

.detail-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0 14px 12px;
  border-left: 3px solid rgba(182, 77, 50, 0.35);
  border-radius: 0;
}

.detail-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--terracotta);
  flex-shrink: 0;
  padding-top: 3px;
  letter-spacing: 0.05em;
  min-width: 20px;
}

.detail-step-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brown);
}

/* ---- Made It --------------------------------------------------------------- */

.detail-made-it-section {
  margin: 32px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.detail-made-it-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sand);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--brown-mid);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.detail-made-it-btn:hover:not(.is-made) {
  background: var(--terracotta-pale);
}

.detail-made-it-btn.is-made {
  background: #EEF6E8;
  border-color: #B2D9A0;
  color: #3A6A28;
  cursor: pointer;
}

.detail-made-it-note {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding-left: 4px;
}

/* ---- Skeleton loading ------------------------------------------------------ */

@keyframes skel-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}

.skel-swatch,
.skel-line {
  background: var(--sand);
  border-radius: 4px;
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.detail-hero--skeleton .detail-protein-swatch {
  background: var(--sand);
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.skel-meta         { height: 20px; width: 55%; margin-bottom: 10px; }
.skel-title        { height: 32px; width: 85%; margin-bottom: 8px; }
.skel-desc         { height: 16px; width: 90%; margin-bottom: 6px; }
.skel-desc.short   { width: 60%; }

.detail-section .skel-section-head { height: 16px; width: 30%; margin-bottom: 16px; }
.detail-section .skel-item         { height: 48px; width: 100%; margin-bottom: 1px; border-radius: 0; }
.detail-section .skel-item.short   { width: 65%; }

/* ---- Error state ----------------------------------------------------------- */

.detail-error-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 48px 32px;
  text-align: center;
}

.detail-error-msg {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--brown-mid);
  max-width: 28ch;
  margin: 0;
}

.detail-retry-btn {
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.detail-retry-btn:hover { opacity: 0.88; }

/* ---- Easy sides / easy proteins accordions -------------------------------- */

.detail-suggest {
  margin: 0 16px 20px;
}

.detail-suggest-accordion {
  border-radius: 12px;
  border: 0.5px solid rgba(46,31,18,0.15);
  overflow: hidden;
}

.detail-suggest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: var(--sand);
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  gap: 8px;
}

.detail-suggest-header:hover {
  background: var(--cream);
}

.detail-suggest-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--brown);
  line-height: 1.3;
  flex: 1;
}

.detail-suggest-chevron {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.detail-suggest-header.is-open .detail-suggest-chevron {
  transform: rotate(180deg);
}

.detail-suggest-body {
  background: var(--white);
  border-top: 0.5px solid rgba(46,31,18,0.08);
  padding: 6px 0;
}

.detail-suggest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
}

.detail-suggest-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.detail-suggest-dot--sides    { background: var(--olive); }
.detail-suggest-dot--proteins { background: var(--amber); }

.detail-suggest-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--brown);
  line-height: 1.4;
}

/* ---- Ingredient swaps accordion ------------------------------------------ */

.detail-swaps {
  margin: 0 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--terracotta);
  overflow: hidden;
}

.detail-swaps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: var(--terracotta-pale);
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  gap: 8px;
}

.detail-swaps-header:hover {
  background: #EFD9D1;
}

.detail-swaps-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.detail-swaps-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--terracotta);
  line-height: 1.3;
}

.detail-swaps-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--brown-mid);
  line-height: 1.3;
}

.detail-swaps-chevron {
  color: var(--terracotta);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.detail-swaps-header.is-open .detail-swaps-chevron {
  transform: rotate(180deg);
}

.detail-swaps-body {
  background: var(--white);
  border-top: 0.5px solid rgba(46,31,18,0.08);
}

.swap-group {
  padding: 10px 16px;
}

.swap-group + .swap-group {
  border-top: 0.5px solid rgba(46,31,18,0.08);
}

.swap-ing {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}

.swap-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 3px;
}

.swap-row:last-child {
  margin-bottom: 0;
}

.swap-arrow {
  flex-shrink: 0;
  color: var(--sand-mid);
  margin-top: 2px;
}

.swap-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--brown);
  line-height: 1.4;
}

.swap-hint {
  color: var(--muted);
}