/* ==========================================================================
   Recipe page, step-by-step cook mode, equipment sheet — see js/screens/recipe.js
   Figma: 04 Recipe (72:14916) + 04 Recipe Page Components (72:16769)
   ========================================================================== */

/* ---------- Sticky header with section tabs (Figma "Sticky header - RECIPE", 169px) ---------- */
.rcp-screen .sticky-header { height: calc(var(--safe-top) + 56px + 59px); }
.rcp-screen > .rcp-tabs { display: none; } /* moved into .sticky-header on mount */
.rcp-tabs { position: relative; height: 59px; background: var(--bg); }
.rcp-tabs-row {
  display: flex; margin: 0 16px;
  border-bottom: 1px solid var(--neutral-light-shade);
}
.rcp-tab {
  flex: 1 1 0; min-width: 0; padding: 12px 0 8px; margin-bottom: -1px;
  font: 500 14px/22.8px var(--font-sans); color: var(--caviar); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid transparent;
}
.rcp-tab.on { font-weight: 700; line-height: 22.75px; border-bottom-color: var(--tomato); }

/* ---------- Hero (Figma Frame 2608773, 456px) ---------- */
.rcp-hero { position: relative; height: 456px; overflow: hidden; background: var(--neutral-light); }
.rcp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcp-play {
  position: absolute; left: calc(50% - .5px); top: calc(50% + 12px); transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
}
.rcp-play img { width: 76px; height: 76px; }
.rcp-play:active { transform: translate(-50%, -50%) scale(.94); }

/* ---------- Body layout ---------- */
.rcp-body {
  padding: 24px 16px 72px;
  display: flex; flex-direction: column; gap: 40px;
  color: var(--caviar);
}
.rcp-line { display: block; width: 100%; height: 1px; flex-shrink: 0; background: var(--neutral-light-shade); }
.rcp-sec { display: flex; flex-direction: column; gap: 16px; }
.rcp-sec h2 { color: #232323; }

.rcp-sticker {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 8px; background: var(--tomato); backdrop-filter: blur(8px);
  font: 700 12px/1 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: #fff;
  white-space: nowrap;
}

/* ---------- Header block ---------- */
.rcp-head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rcp-head-top { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.rcp-head-top .rcp-sticker { align-self: center; }
.rcp-title { color: #232323; text-align: center; width: 100%; }
.rcp-meta { display: flex; align-items: center; gap: 8px; font: 400 14px/normal var(--font-sans); color: var(--neutral-dark); }
.rcp-counts { display: flex; justify-content: center; gap: 16px; }
.rcp-count {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/normal var(--font-sans); letter-spacing: .32px; color: var(--caviar);
}
.rcp-count b { font-weight: 500; }
.rcp-count em { font-style: normal; color: var(--neutral-dark); }
.rcp-redline { display: block; width: 120px; height: 1px; background: var(--tomato); }
.rcp-intro { width: 100%; font: 400 16px/26px var(--font-sans); }
.rcp-facts { width: 100%; margin: 0; display: flex; flex-direction: column; gap: 5px; font: 400 16px/22.4px var(--font-sans); }
.rcp-facts div { display: flex; }
.rcp-facts dt { width: 73px; flex-shrink: 0; font-weight: 700; }
.rcp-facts dd { margin: 0; }

/* ---------- Why this recipe works ---------- */
.rcp-why-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rcp-why-text {
  font: 400 14px/22.75px var(--font-sans);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.rcp-why.open .rcp-why-text { display: block; -webkit-line-clamp: none; }
.rcp-link { font: 400 16px/22.4px var(--font-sans); color: var(--tomato); }

/* ---------- Placeholder sections (FINAL RECIPE) ---------- */
.rcp-ph { padding: 0 8px; gap: 40px; }
.rcp-ph-text { font: 400 14px/22.75px var(--font-sans); color: #97928f; }

/* ---------- Ingredients ---------- */
.rcp-ing-groups { display: flex; flex-direction: column; gap: 16px; }
.rcp-ing-group { display: flex; flex-direction: column; gap: 4px; }
.rcp-ing-group + .rcp-ing-group { gap: 5px; }
.rcp-ing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rcp-ing {
  display: flex; align-items: center; gap: 6px; padding: 8px; min-height: 39px; border-radius: 50px; background: #fff;
  font: 400 16px/22.4px var(--font-sans); color: var(--caviar); cursor: pointer;
  transition: background .15s ease;
}
.rcp-ing.on { background: #f8d6c7; }
.rcp-ing img { width: 18px; height: 18px; flex-shrink: 0; }
.rcp-ing span { flex: 0 1 284px; min-width: 0; }
.rcp-ing i { font-style: italic; color: var(--neutral-dark); }
.rcp-ing-link { font-weight: 700; color: var(--tomato); }

/* ---------- Equipment ---------- */
.rcp-eq { font: 400 14px/22.75px var(--font-sans); }
.rcp-eq-link { font-weight: 700; color: var(--tomato); cursor: pointer; }

/* ---------- Cook along ---------- */
.rcp-cook { gap: 24px; }
.rcp-learn {
  background: #fff; border: 1px solid var(--neutral-light-shade); border-radius: 8px; cursor: pointer;
}
.rcp-learn-head { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 14px; }
.rcp-learn-head span { flex: 1 1 auto; font: 700 16px/22.4px var(--font-sans); padding-top: 1px; }
.rcp-caret { width: 24px; height: 24px; flex-shrink: 0; transition: transform .2s ease; }
.open > * > .rcp-caret, .open > .rcp-faq-q .rcp-caret { transform: rotate(180deg); }
.rcp-learn-body { display: none; margin: 0; padding: 0 15px 24px 39px; font: 400 16px/26px var(--font-sans); cursor: default; }
.rcp-learn.open .rcp-learn-body { display: block; }

.rcp-video { position: relative; height: 260px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; background: #fff; }
.rcp-video-media { position: absolute; left: 0; right: 0; top: -1px; height: 203px; overflow: hidden; display: block; }
.rcp-video-media > img { position: absolute; left: -38px; top: -18px; width: calc(100% + 88px); height: 252px; object-fit: cover; }
.rcp-video-pill {
  position: absolute; left: 50%; top: calc(50% + .5px); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 24px; border-radius: 48px;
  background: rgba(255,255,255,.95); font: 700 18px/25.2px var(--font-sans); color: var(--caviar); white-space: nowrap;
}
.rcp-video-foot { position: absolute; left: 15px; right: 15px; top: 218px; display: flex; justify-content: space-between; align-items: center; }
.rcp-video-title { font: 700 16px/22.4px var(--font-sans); }
.rcp-video-meta { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/normal var(--font-sans); letter-spacing: 1.2px; color: var(--neutral-dark); }

.rcp-start {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 15px 15px 16px; border: 1px solid var(--neutral-light-shade); border-radius: 8px; background: #fff;
  cursor: pointer; transition: transform .12s ease;
}
.rcp-start:active { transform: scale(.99); }
.rcp-start-imgs { display: flex; gap: 8px; width: 100%; height: 230px; }
.rcp-start-main { position: relative; flex: 0 0 230px; height: 230px; border-radius: 8px; overflow: hidden; }
.rcp-start-main img { position: absolute; top: 0; left: -88px; width: 382.77px; height: 230.18px; object-fit: cover; }
.rcp-start-thumbs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rcp-start-thumbs img { width: 100%; height: 71px; border-radius: 8px; object-fit: cover; }
.rcp-start-cta {
  width: 100%; height: 40px; border: 1px solid var(--caviar); border-radius: 24px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 16px/22.4px var(--font-sans); color: var(--caviar);
}
.rcp-start-cap { font: 400 14px/22.75px var(--font-sans); color: var(--neutral-dark); text-align: center; }

/* ---------- Instructions ---------- */
.rcp-instr { gap: 24px; }
.rcp-instr-list { display: flex; flex-direction: column; gap: 16px; }
.rcp-step { display: flex; flex-direction: column; gap: 12px; }
.rcp-step h3 { font: 700 18px/29.25px var(--font-sans); color: #232323; }
.rcp-step-text { display: flex; flex-direction: column; gap: 16px; font: 400 16px/26px var(--font-sans); }
.rcp-step-text i { font-style: italic; }

/* Recipe Tip (Tips Expandable / Hacks) */
.rcp-tip {
  background: #eef4fb; border-radius: 8px; padding: 12px 13px; cursor: pointer; /* was 2px cream outline */
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.rcp-tip-head { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.rcp-tip-label { display: inline-flex; align-items: flex-start; gap: 8px; font: 700 14px/22.75px var(--font-sans); color: #1f1f1f; }
.rcp-tip-label img { width: 24px; height: 24px; }
.rcp-tip-caret { width: 24px; height: 24px; transform: rotate(-90deg); transition: transform .2s ease; margin-right: 4px; }
.rcp-tip.open .rcp-tip-caret { transform: rotate(90deg); }
.rcp-tip-body { display: none; font: 400 14px/26px var(--font-sans); color: #1f1f1f; cursor: default; }
.rcp-tip.open .rcp-tip-body { display: block; }

/* ---------- FAQs ---------- */
.rcp-faqs { display: flex; flex-direction: column; gap: 16px; }
.rcp-faq { background: #eee4e5; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 24px; cursor: pointer; }
.rcp-faq-q { display: flex; align-items: center; gap: 16px; }
.rcp-faq-q span { flex: 1 1 auto; font: 700 16px/26px var(--font-sans); }
.rcp-faq-a { display: none; flex-direction: column; gap: 16px; font: 400 14px/22.75px var(--font-sans); cursor: default; }
.rcp-faq.open .rcp-faq-a { display: flex; }
.rcp-faq-by { display: flex; gap: 8px; align-items: flex-start; }
.rcp-faq-by img { width: 40px; height: 40px; border-radius: 100px; object-fit: cover; }
.rcp-faq-by span { display: flex; flex-direction: column; }
.rcp-faq-by b { font-weight: 700; }
.rcp-faq-by em { font-style: normal; color: var(--wine); }
.rcp-ask {
  height: 48px; border-radius: 30px; background: var(--wine); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 18px/25.2px var(--font-sans);
}
.rcp-ask:active { filter: brightness(.92); }
.rcp-ask-glyph { position: relative; width: 24px; height: 24px; }
.rcp-ask-glyph img { position: absolute; inset: 10.16% 10.17% 10.16% 10.15%; width: 79.68%; height: 79.68%; }
.rcp-ask-glyph b { position: absolute; left: 50%; top: calc(50% - 8.5px); transform: translateX(-50%); font: 700 11px/17.063px var(--font-sans); }

/* ---------- Mark as cooked checkbox ---------- */
.rcp-cooked {
  display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 48px; background: var(--neutral-light);
  font: 400 16px/22.4px var(--font-sans); color: var(--caviar); text-align: left;
}
.rcp-cooked-main { align-self: center; width: min(313px, 100%); }
.rcp-cooked-dot {
  width: 32px; height: 32px; border-radius: 100px; flex-shrink: 0; background: #fff; border: 1px solid var(--neutral-light-shade);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease;
}
.rcp-cooked.on .rcp-cooked-dot { background: var(--success); border-color: var(--success); }
.rcp-cooked.on .rcp-cooked-dot img { animation: pop .3s var(--ease-out); }

/* ---------- My rating + Comments ---------- */
.rcp-rate { display: flex; flex-direction: column; gap: 40px; }
.rcp-rate h2, .rcp-comments h2 { font: 700 24px/27px var(--font-sans); color: #232323; }
.rcp-myrating { display: flex; flex-direction: column; gap: 24px; }
.rcp-stars { display: flex; gap: 16px; }
.rcp-stars button { width: 32px; height: 32px; }
.rcp-stars button:active { transform: scale(.9); }
.rcp-stars img { width: 32px; height: 32px; }
.rcp-comments { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; width: 100%; }
.rcp-comments-rating, .rcp-comments-count { display: flex; align-items: flex-start; gap: 8px; font: 400 16px/26px var(--font-sans); color: #232323; }
.rcp-comments-stars { display: flex; gap: 8px; }
.rcp-comments-stars img { width: 24px; height: 24px; }
.rcp-comments-caret { position: absolute; right: 0; top: 60px; width: 32px; height: 32px; }

/* ---------- Up Next ---------- */
.rcp-upnext { background: var(--neutral-light); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.rcp-upnext h2 { font: 700 16px/26px var(--font-sans); }
.rcp-upnext-bars { display: flex; gap: 6px; width: 100%; }
.rcp-upnext-bars i { flex: 1 1 0; height: 4px; background: var(--neutral-light-shade); }
.rcp-upnext-bars i.on { background: var(--success); }
.rcp-upnext-bars i:first-child { border-radius: 100px 0 0 100px; }
.rcp-upnext-bars i:last-child { border-radius: 0 100px 100px 0; }

/* ---------- End of the road (FINAL RECIPE) ---------- */
.rcp-end { background: var(--neutral-light); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.rcp-end h2 { font: 700 16px/26px var(--font-sans); }
.rcp-cooked-class { border: 1px solid var(--neutral-light-shade); }
.rcp-outline-btn {
  height: 48px; border: 1px solid var(--caviar); border-radius: 30px; background: var(--neutral-light);
  font: 700 18px/25.2px var(--font-sans); color: var(--caviar);
}
.rcp-outline-btn:active { background: #e9e8e6; }

/* ---------- Equipment review sheet (Figma "Equipment links", 711px) ---------- */
.sheet.rcp-eqs { height: min(711px, calc(100% - var(--safe-top) - 24px)); }
.rcp-eqs-body { position: relative; padding-bottom: calc(var(--safe-bottom) + 24px); }
.rcp-eqs-hero { position: relative; height: 392px; overflow: hidden; }
.rcp-eqs-hero img { position: absolute; left: 0; top: -31.63%; width: 100%; height: 217.26%; object-fit: cover; object-position: top; }
.rcp-eqs-text { padding: 16px 16px 0; color: var(--caviar); }
.rcp-eqs-text h2 { color: #232323; }
.rcp-eqs-comments { display: flex; align-items: center; gap: 8px; margin-top: 9px; font: 400 16px/22.4px var(--font-sans); }
.rcp-eqs-desc { margin: 15px 0 0 3px; font: 400 16px/26px var(--font-sans); }
.rcp-eqs-author { display: flex; align-items: center; gap: 8px; margin-top: 16px; font: 400 16px/26px var(--font-sans); }
.rcp-eqs-author img { width: 40px; height: 40px; border-radius: 100px; object-fit: cover; }
.rcp-eqs-picks { margin-top: 32px; }
.rcp-eqs-card {
  position: relative; width: 245px; height: 469px; margin: 16px 0 0 5px; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.25);
}
.rcp-eqs-card span { position: absolute; left: 7px; top: 36px; width: 230px; height: 433px; overflow: hidden; }
.rcp-eqs-card img { position: absolute; left: -17.76px; top: -184.07px; width: 349px; height: 757.5px; }
.rcp-eqs-close { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; z-index: 2; }

/* ---------- Step-by-step cook mode (Figma "Step-by-Step Mode", 393×852) ---------- */
.rcp-steps-screen { background: #fff; }
.rcp-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rcp-viewport.dragging { cursor: grabbing; }
.rcp-track { display: flex; height: 100%; will-change: transform; }
.rcp-slide {
  flex: 0 0 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain;
}
.rcp-slide::-webkit-scrollbar { display: none; }
.rcp-slide-img { position: relative; height: 320px; overflow: hidden; background: var(--neutral-light); }
.rcp-slide-img img { position: absolute; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.rcp-slide-body { padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 16px; }
.rcp-slide-text { font: 400 24px/1.2 var(--font-sans); color: var(--caviar); }
.rcp-slide-text b { font-weight: 700; }
.rcp-ie { background: #fbf9ef; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.rcp-ie p { display: flex; gap: 8px; align-items: flex-start; font: 400 14px/22.75px var(--font-sans); color: var(--caviar); }
.rcp-ie img { width: 24px; height: 24px; flex-shrink: 0; }

.rcp-complete { display: flex; flex-direction: column; align-items: center; }
.rcp-complete-img { position: relative; width: 100%; height: 400px; flex-shrink: 0; overflow: hidden; background: var(--neutral-light); }
.rcp-complete-img img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.rcp-enjoy { margin-top: 40px; color: var(--caviar); text-align: center; }
.rcp-complete .rcp-cooked { width: min(313px, calc(100% - 32px)); margin-top: 32px; }
.rcp-rate-q { margin-top: 32px; font: 400 16px/26px var(--font-sans); color: var(--caviar); }
.rcp-complete .rcp-stars { margin: 16px 0 32px; }

.rcp-steps-close { position: absolute; left: 16px; top: calc(var(--safe-top) + 8px); width: 40px; height: 40px; z-index: 5; }
.rcp-steps-close img { width: 40px; height: 40px; }

.rcp-stepper {
  position: relative; flex-shrink: 0; z-index: 4; background: #fff;
  height: 72px; box-sizing: content-box; padding-bottom: max(var(--safe-bottom) - 34px, 0px);
  display: flex; align-items: center; padding-left: 16px; padding-right: 16px; gap: 8px;
}
.rcp-stepper-bars { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.rcp-stepper-bars i { flex: 1 1 0; height: 3px; background: var(--neutral-light-shade); transition: background .25s ease; }
.rcp-stepper-bars i.on { background: var(--success); }
.rcp-stepper-prev {
  width: 40px; height: 40px; border-radius: 100px; background: var(--caviar); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.rcp-stepper-prev img { width: 24px; height: 24px; transform: rotate(180deg); }
.rcp-stepper-prev.disabled { background: var(--neutral-light-shade); pointer-events: none; }
.rcp-stepper-count { flex: 1 1 auto; text-align: center; font: 400 18px/29.25px var(--font-sans); color: var(--caviar); white-space: nowrap; }
.rcp-stepper-next {
  position: relative; width: 140px; height: 40px; border-radius: 24px; background: var(--caviar); flex-shrink: 0;
  font: 700 16px/22.4px var(--font-sans); color: #fff;
}
.rcp-stepper-next span { position: absolute; left: calc(50% - 17px); top: calc(50% + .5px); transform: translateY(-50%); }
.rcp-stepper-next img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; }
.rcp-stepper-next.done span { left: 50%; transform: translate(-50%, -50%); }
.rcp-stepper-next.done img { display: none; }
.rcp-stepper-prev:active, .rcp-stepper-next:active { filter: brightness(1.25); }
.rcp-body-ph { padding-bottom: 97px; }