/* ========================================
   Recipe detail — Backyard Blue
   The title leads. The source (video, your photo or your prompt)
   and the ingredients you can tick stay pinned in the left column
   while the numbered steps scroll on the right. On the phone the
   video or photo pins to the top. Add to plan opens a popover (a
   sheet on the phone).
   ======================================== */
.detail-container {
  position: relative;
  max-width: 1248px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-ink);
}

/* Wide: the side margins of the mockup's browser window. Every page starts --space-lg under the navbar. */
@media (min-width: 960px) {
  .detail-container {
    padding: var(--space-lg) var(--space-xl) var(--space-2xl);
    gap: var(--space-lg);
  }
}

/* The detail frame only swaps content; its children join the page layout. */
#recipe-detail-content { display: contents; }

/* ── Action bar ───────────────────────── */
.detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm-md);
}

.back-link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 44px;
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-display);
  text-decoration: none;
}

.detail-nav-actions {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm-md);
}

.detail-nav-actions form { margin: 0; max-width: 100%; }

/* Reserve the heart's extended hit area inside the flex row. */
.detail-nav .recipe-favorite-control { padding: var(--space-xs); }

/* Narrow phones: Back keeps its arrow and its name for screen readers. */
@media (max-width: 360px) {
  .back-link { min-width: 44px; }
  .back-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .detail-nav { gap: var(--space-sm); }
  .detail-nav .save-button { padding: 0 var(--space-sm); font-size: var(--text-body); }
}

/* Buttons look 40px tall; each keeps a 44px touch target. */
.save-button,
.detail-nav .recipe-favorite-button {
  position: relative;
  height: 40px;
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease;
}

.save-button::after,
.detail-nav .recipe-favorite-button::after {
  content: "";
  position: absolute;
  inset: -4px;
}

/* Wide buttons need only the extra height; the bar then does not overflow. */
.save-button::after { inset-inline: 0; }

.save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-display);
  min-height: 40px;
  height: auto;
  max-width: 100%;
  padding-block: var(--space-sm-md);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The heart is an icon-only round button. */
.detail-nav .recipe-favorite-button {
  width: 40px;
  min-width: 40px;
  border-radius: var(--radius-round);
}

.save-button.recipe-detail-plan-open { border-color: var(--color-heeler); background: var(--color-heeler); color: var(--color-paper); }

/* The heart sits on a quiet border line; once favourited it takes the ink line. */
.detail-nav .recipe-favorite-button { border-color: var(--color-border); background: transparent; }
.detail-nav .recipe-favorite-button.is-favorited { border-color: var(--line-color); background: var(--color-cream-dark); }

/* Archive is a quiet button: no line, fill on hover only. */
.save-button.archive-button {
  border-color: transparent;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .save-button:hover { background: var(--color-hover); }
  .save-button.recipe-detail-plan-open:hover { border-color: var(--color-heeler-dark); background: var(--color-heeler-dark); }
  .detail-nav .recipe-favorite-button:hover { background: var(--color-hover); }
}

.save-button:active { transform: scale(0.97); }

/* ── Layout: pinned source and ingredients beside the steps ── */
/* The source parts follow the stageshow mockup (docs/exec-plans/1793557849-show-recipe-source-on-detail-page),
   with each size snapped to the nearest design token. The ingredients, steps and title keep their own sizes. */
.recipe-layout {
  --recipe-pin-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.recipe-head,
.recipe-reading,
.recipe-pinned {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.recipe-source { min-width: 0; }

/* Wide: two columns. The video or photo and then the ingredients fill the left column; the title and steps the right.
   For a prompt, the prompt and its recipes fill the left column; the title, ingredients and steps the right. */
@media (min-width: 960px) {
  .recipe-layout {
    --recipe-pin-width: 406px;
    grid-template-columns: var(--recipe-pin-width) minmax(0, 1fr);
    grid-template-areas: "pinned head" "pinned reading";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-2xl);
  }

  /* The 16:9 video or photo is a fixed height, so the ingredients start a set gap under it. */
  .recipe-layout:is([data-source-kind="youtube_video"], [data-source-kind="photo"]) {
    --recipe-media-offset: calc(var(--recipe-pin-width) * 9 / 16 + var(--space-lg));
  }

  .recipe-layout[data-source-kind="text_prompt"] {
    grid-template-areas: "source head" "source pinned" "source reading";
    grid-template-rows: auto auto 1fr;
  }

  .recipe-media,
  .recipe-pinned { grid-area: pinned; }
  .recipe-source--prompt { grid-area: source; }
  .recipe-head { grid-area: head; }
  .recipe-reading { grid-area: reading; }

  .recipe-layout:not([data-source-kind="text_prompt"]) .recipe-pinned {
    /* A small inset keeps focus rings inside the column when it scrolls. */
    margin: calc(var(--recipe-media-offset, 0px) - var(--space-xs)) calc(var(--space-xs) * -1) calc(var(--space-xs) * -1);
    padding: var(--space-xs);
  }
}

/* Pin only where the screen is tall enough to keep the steps readable beside or under the source. */
@media (min-width: 960px) and (min-height: 600px) {
  .recipe-media {
    position: sticky;
    top: calc(var(--recipe-pin-top) + var(--space-md));
  }

  /* The left column scrolls on its own when it is taller than the screen. The prompt does not pin. */
  .recipe-layout:not([data-source-kind="text_prompt"]) .recipe-pinned {
    position: sticky;
    top: calc(var(--recipe-pin-top) + var(--space-md) + var(--recipe-media-offset, 0px) - var(--space-xs));
    max-height: calc(100dvh - var(--recipe-pin-top) - 2 * var(--space-md) - var(--recipe-media-offset, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Narrow: one column in page order. The video or photo pins under the navbar on a cream band and the recipe
   slides under its hard edge. Only in portrait: a full-width 16:9 box on a screen on its side would leave
   little room for the steps. */
@media (max-width: 959px) and (min-height: 600px) and (orientation: portrait) {
  .recipe-media:not(.recipe-media--unavailable) {
    position: sticky;
    top: var(--recipe-pin-top);
    z-index: 2;
    margin: calc(var(--space-sm-md) * -1) calc(var(--space-md) * -1);
    padding: var(--space-sm-md) var(--space-md);
    background: var(--color-cream);
  }

  /* Once you scroll into the recipe the video shrinks to a mini bar (recipe_video_dock_controller.js).
     The player only scales and the band only clips, so the page does not move and the video keeps playing. */
  .recipe-source--video {
    --recipe-video-mini: 0.32;
    clip-path: inset(0);
    transition: clip-path 280ms var(--ease-out-soft);
  }

  .recipe-source--video .video-player-wrapper {
    transform-origin: 0 0;
    transition: transform 280ms var(--ease-out-soft), border-width 280ms var(--ease-out-soft), border-radius 280ms var(--ease-out-soft);
  }

  .recipe-source--video.is-docked {
    clip-path: inset(0 0 calc((1 - var(--recipe-video-mini)) * (100% - 2 * var(--space-sm-md))) 0);
  }

  /* The line and corners grow as the player shrinks, so the mini player keeps the 1.5px line. */
  .recipe-source--video.is-docked .video-player-wrapper {
    transform: scale(var(--recipe-video-mini));
    border-width: calc(1.5px / var(--recipe-video-mini));
    border-radius: calc(var(--radius-md) / var(--recipe-video-mini));
  }

  .recipe-source--video .recipe-media-bar {
    position: absolute;
    top: var(--space-sm-md);
    right: var(--space-md);
    left: calc(var(--space-md) + var(--recipe-video-mini) * (100% - 2 * var(--space-md)) + var(--space-sm-md));
    height: calc(var(--recipe-video-mini) * (100% - 2 * var(--space-sm-md)));
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    visibility: hidden;
    opacity: 0;
    transform: translateX(calc(var(--space-sm-md) * -1));
    transition: opacity 160ms ease, transform 280ms var(--ease-out-soft), visibility 0s 280ms;
  }

  .recipe-source--video.is-docked .recipe-media-bar {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease 80ms, transform 280ms var(--ease-out-soft), visibility 0s;
  }
}

/* The mini bar shows only on the phone, once the video shrinks. */
.recipe-media-bar { display: none; }

.recipe-media-bar-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  color: var(--color-ink);
}

.recipe-media-bar-enlarge {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-cream);
  color: var(--color-ink);
}

.recipe-media-bar-enlarge svg { width: 18px; height: 18px; }
.recipe-media-bar-enlarge:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .recipe-media-bar-enlarge:hover { background: var(--color-hover); }
}

/* ── Source: the video ─────────────────── */
.video-player-wrapper {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius-cover);
  background: var(--color-cream-dark);
}

.video-player,
.video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}

.video-hero-recipe {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.video-hero-kicker {
  align-self: flex-start;
  padding: var(--space-xs) var(--space-sm-md);
  border: var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-cream-dark);
  font-size: var(--text-label);
  font-weight: var(--weight-extrabold);
}

.video-hero-title {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-family: var(--font-display);
  letter-spacing: normal;
  color: var(--color-ink);
}

.video-hero-description {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* The channel line sits right under the summary. */
.video-hero-recipe .video-source {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: calc(var(--space-xs) - var(--space-md));
}

.video-hero-recipe .video-source:not(:has(*)) { display: none; }

.channel-attribution--detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.channel-attribution--detail .channel-attribution__avatar {
  width: 32px;
  height: 32px;
}

.channel-attribution--detail .channel-attribution__label {
  font: inherit;
}

@media (hover: hover) and (pointer: fine) {
  a.channel-attribution--detail:hover { color: var(--color-ink-soft); }
}

/* ── Source: your photo ────────────────── */
/* A paper chip on the photo: "Your photo" with a camera. */
.recipe-source-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  line-height: normal;
}

.recipe-source-chip svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.recipe-source--photo .recipe-source-chip,
.recipe-photo-viewer .recipe-source-chip {
  position: absolute;
  left: var(--space-sm-md);
  bottom: var(--space-sm-md);
  width: max-content;
  height: 32px;
  padding: 0 var(--space-sm-md);
  border-radius: var(--radius-control);
  background: var(--color-paper);
}

.recipe-photo-open,
.recipe-photo-unavailable {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: var(--line);
  border-radius: var(--radius-cover);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  cursor: zoom-in;
}

.recipe-photo-unavailable { cursor: default; }

/* The notebook page, cropped to its written lines. */
.recipe-photo-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.recipe-photo-cover[data-crop="center"] { object-position: 50% 50%; }
.recipe-photo-cover[data-crop="portrait"] { object-position: 50% 15%; }
.recipe-photo-cover[data-crop="tall"] { object-position: 50% 30%; }

.recipe-photo-zoom,
.recipe-photo-close {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-paper);
  color: var(--color-ink);
}

.recipe-photo-zoom {
  right: var(--space-sm-md);
  bottom: var(--space-sm-md);
  width: 40px;
  height: 40px;
}

.recipe-photo-zoom svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .recipe-photo-open:hover .recipe-photo-zoom,
  .recipe-photo-close:hover { background: var(--color-hover); }
}

/* The viewer grows from the photo over the steps column, the photo's top edge level with the cover's.
   The clear backdrop leaves the ingredients in view. Its 334:282 box is the mockup's. */
.recipe-photo-viewer {
  position: fixed;
  inset: var(--recipe-photo-viewer-top, calc(var(--recipe-pin-top) + var(--space-md))) auto auto var(--recipe-photo-viewer-left, var(--space-md));
  box-sizing: border-box;
  width: var(--recipe-photo-viewer-width, calc(100vw - var(--space-xl)));
  max-width: none;
  height: min(calc(var(--recipe-photo-viewer-width, 100vw) * 282 / 334), calc(100dvh - var(--recipe-photo-viewer-top, 0px) - var(--space-md)));
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--radius-cover);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  transform-origin: top left;
}

.recipe-photo-viewer::backdrop { background: transparent; }

.recipe-photo-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.recipe-photo-viewer .recipe-source-chip {
  left: var(--space-md);
  bottom: var(--space-md);
}

.recipe-photo-close {
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.recipe-photo-close svg {
  width: 20px;
  height: 20px;
}

/* On the phone the viewer grows down from the photo, as wide as the page, in a 277:315 box. */
@media (max-width: 959px) {
  .recipe-photo-viewer {
    height: min(calc(var(--recipe-photo-viewer-width, 100vw) * 315 / 277), calc(100dvh - var(--recipe-photo-viewer-top, 0px) - var(--space-md)));
  }
}

/* ── Source: your prompt ───────────────── */
/* The prompt in quotes on a paper card, then its recipes as a numbered list that marks the open one. */
.recipe-prompt-card {
  padding: var(--space-lg);
  border: var(--line);
  border-radius: var(--radius-cover);
  background: var(--color-paper);
}

.recipe-prompt-label {
  gap: var(--space-sm);
  color: var(--color-ink-soft);
}

.recipe-prompt-text {
  margin: var(--space-sm-md) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  white-space: pre-line;
  text-indent: -0.4em;
}

.recipe-prompt-recipes ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.recipe-prompt-recipe {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  min-height: 54px;
  padding: 0 var(--space-sm-md) 0 var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: normal;
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.recipe-prompt-recipe-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.recipe-prompt-recipe-name { min-width: 0; overflow-wrap: anywhere; }

/* The open recipe: an ink line and an ink number. */
.recipe-prompt-recipe.active { border-color: var(--color-ink); }
.recipe-prompt-recipe.active .recipe-prompt-recipe-number { background: var(--color-ink); color: var(--color-paper); }

@media (hover: hover) and (pointer: fine) {
  .recipe-prompt-recipe:not(.active):hover { background: var(--color-hover); }
}

/* On the phone the mockup's sizes are a step smaller, and the recipes wrap in rows. */
@media (max-width: 959px) {
  .recipe-source-chip { font-size: var(--text-label); }
  .recipe-photo-zoom { width: 32px; height: 32px; }
  .recipe-prompt-card { padding: var(--space-md); }
  .recipe-prompt-text { font-size: var(--text-title); }
  .recipe-prompt-recipes ol { flex-flow: row wrap; }
  .recipe-prompt-recipe { min-height: 44px; font-size: var(--text-body); }
  .recipe-prompt-recipe-number { width: 28px; height: 28px; font-size: var(--text-label); }
}

/* ── Other recipes from the same idea ─── */
.recipe-selector {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm-md);
}

.recipe-selector-label {
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  color: var(--color-ink-soft);
}

.recipe-tabs {
  display: flex;
  gap: var(--space-sm-md);
  overflow-x: auto;
  padding: var(--space-xs);
  scrollbar-width: none;
}

.recipe-tab {
  flex: 0 0 auto;
  scroll-margin-inline: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 0 var(--space-md) 0 var(--space-sm);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-title);
  font-family: var(--font-display);
  text-decoration: none;
  white-space: nowrap;
}

.recipe-tab .tab-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-display);
}

/* The open recipe: an ink line and an ink number. */
.recipe-tab.active { border-color: var(--color-ink); }
.recipe-tab.active .tab-number { background: var(--color-ink); color: var(--color-paper); }

@media (hover: hover) and (pointer: fine) {
  .recipe-tab:not(.active):hover { background: var(--color-hover); }
}

/* ── Ingredients and steps ────────────── */
.ingredients-section,
.steps-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm-md);
}

.section-header h2 {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-headline);
  line-height: normal;
  font-family: var(--font-display);
}

.ingredients-in-hand {
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.ingredients-list,
.steps-list,
.tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each ingredient row has its own divider; a list gap would double the space. */
.ingredients-list {
  gap: 0;
}

.ingredient-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm-md) var(--space-xs);
  border: 0;
  border-bottom: 1.5px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-body);
  line-height: normal;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease;
}

.ingredient-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--color-paper);
  color: var(--color-paper);
}

/* An unticked ingredient box sits on the strong border line; ticked, it turns ink (theme.css). */
.ingredient-toggle .ingredient-box { border-color: var(--color-border-strong); }

/* The name leads; the amount sits at the row end so amounts line up in one column. */
.ingredient-line {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: var(--space-sm-md);
  min-width: 0;
}

.ingredient-name { flex: 1 1 auto; min-width: 0; }

.ingredient-amount {
  flex: 0 1 auto;
  max-width: 45%;
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.ingredient-toggle[aria-pressed="true"] { color: var(--color-ink-soft); }
.ingredient-toggle[aria-pressed="true"] .ingredient-line {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.step-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-cream-dark);
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-display);
  font-family: var(--font-display);
}

.step-text {
  margin: 0;
  padding-top: var(--space-sm);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.tips-list { margin-top: var(--space-sm-md); }

.tips-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-sm) * 8);
  border: 1.5px solid transparent;
  border-radius: var(--radius-cover);
  background: var(--color-cream-dark);
}

.tips-card__icon {
  position: absolute;
  top: 18px;
  left: 18px;
  color: var(--color-ink);
}

.tips-card__title { font-weight: var(--weight-semibold); font-size: var(--text-body); line-height: normal; font-family: var(--font-display); }

.tips-card__text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.prep-ahead-section { padding: 0; }

/* ── Source link ──────────────────────── */
.detail-footer {
  display: flex;
  justify-content: center;
}

.source-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-extrabold);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .source-link:hover { background: var(--color-hover); }
}

/* ── Add to plan: pick the day, see the whole day ── */
/* Sizes, colours and motion follow the Day view 3 board (soft zoom, drop in).
   The board sets line-height: normal and content boxes, so the dialog does too. */
/* The wrapper adds no box, so opening it does not move the page. */
.recipe-detail-plan { display: contents; }
.recipe-detail-plan[hidden] { display: none; }

.recipe-detail-plan-open { anchor-name: --recipe-detail-plan-open; }

.recipe-detail-plan-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog-backdrop);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.recipe-detail-plan-panel {
  position: absolute;
  z-index: var(--z-dialog);
  top: 70px;
  right: 24px;
  width: 400px;
  display: flex;
  flex-direction: column;
  padding: var(--space-sm-md);
  border: var(--line);
  border-radius: var(--radius-plan-popover);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: normal;
  text-align: left;
  animation: recipe-detail-plan-pop-in 240ms var(--ease-out-soft) both;
}

/* Hang the popover under its button; without anchors it sits at the right edge. */
@supports (anchor-name: --a) {
  .recipe-detail-plan-panel {
    position-anchor: --recipe-detail-plan-open;
    top: calc(anchor(bottom) + 12px);
    right: anchor(right);
  }
}

.recipe-detail-plan-handle { display: none; }

.recipe-detail-plan-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 0 var(--space-sm) var(--space-xs);
}

.recipe-detail-plan-header h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-plan-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-title);
}

.recipe-detail-plan-close,
.recipe-detail-plan-remove,
.recipe-detail-plan-toast-retry,
.recipe-detail-plan-toast-dismiss {
  flex: 0 0 auto;
  padding: var(--space-plan-hair) var(--space-plan-row);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.recipe-detail-plan-close,
.recipe-detail-plan-remove,
.recipe-detail-plan-toast-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-detail-plan-close {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-plan-row);
  color: var(--color-ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  :is(.recipe-detail-plan-close, .recipe-detail-plan-remove, .recipe-detail-plan-toast-retry, .recipe-detail-plan-toast-dismiss):hover { background: var(--color-hover); }
}

.recipe-detail-plan-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-plan-stack);
}

/* Seven chips on a warm track. One heeler thumb slides under the chosen day. */
.recipe-detail-plan-days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2xs);
  padding: var(--space-plan-track);
  border-radius: var(--radius-plan-track);
  background: var(--color-cream-dark);
}

.recipe-detail-plan-day-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(3px + var(--recipe-detail-plan-day-index, 0) * ((100% - 18px) / 7 + 2px));
  width: calc((100% - 18px) / 7);
  border-radius: var(--radius-plan-chip);
  background: var(--color-heeler);
  transition: left 220ms ease, width 220ms ease;
}

.recipe-detail-plan-day {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 60px;
  padding: var(--space-sm) 0 var(--space-plan-chip-end);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: var(--radius-plan-chip);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  transition: color 220ms ease;
}

.recipe-detail-plan-day[aria-selected="true"] { color: var(--color-paper); }
.recipe-detail-plan-day.is-bumping { animation: recipe-detail-plan-bump 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }

.recipe-detail-plan-day-name {
  font-size: var(--text-plan-chip);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-plan-chip);
  text-transform: uppercase;
}

.recipe-detail-plan-day-number {
  font-family: var(--font-display);
  font-size: var(--text-plan-date);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-plan-date);
}

.recipe-detail-plan-day-dots {
  display: flex;
  gap: var(--space-2xs);
  height: 4px;
}

.recipe-detail-plan-day-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--color-ink-soft);
  animation: recipe-detail-plan-pop 380ms cubic-bezier(0.3, 1.7, 0.5, 1) both;
}

.recipe-detail-plan-day[aria-selected="true"] .recipe-detail-plan-day-dot { background: var(--color-paper); }

/* The chosen day: its name and every recipe planned for it. */
.recipe-detail-plan-day-panels {
  min-height: 190px;
  overflow: hidden;
}

.recipe-detail-plan-day-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-2xs);
  animation: recipe-detail-plan-zoom 260ms var(--ease-out-soft) both;
}

.recipe-detail-plan-day-panel[hidden] { display: none; }

.recipe-detail-plan-day-panel h3 {
  margin: 0 0 var(--space-xs) var(--space-plan-row);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-plan-heading);
  font-weight: var(--weight-semibold);
  line-height: normal;
}

.recipe-detail-plan-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-detail-plan-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-plan-gap);
  min-height: 44px;
  max-height: 64px;
  overflow: hidden;
  padding: 0 var(--space-xs) 0 var(--space-plan-row);
  border-radius: var(--radius-plan-row);
  transition: opacity 180ms ease;
}

.recipe-detail-plan-row-check {
  flex: 0 0 auto;
  display: none;
  color: var(--color-heeler-dark);
}

.recipe-detail-plan-row.is-current .recipe-detail-plan-row-check { display: flex; }

.recipe-detail-plan-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 180ms ease;
}

.recipe-detail-plan-row.is-current .recipe-detail-plan-row-name {
  color: var(--color-heeler-dark);
  font-weight: var(--weight-extrabold);
}

.recipe-detail-plan-row.is-busy .recipe-detail-plan-row-name { opacity: 0.45; }
.recipe-detail-plan-row-name.is-shaking { animation: recipe-detail-plan-shake 380ms ease; }
.recipe-detail-plan-row.is-dropping { animation: recipe-detail-plan-drop 620ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.recipe-detail-plan-row.is-dropping .recipe-detail-plan-row-check svg { animation: recipe-detail-plan-pop 460ms cubic-bezier(0.3, 1.7, 0.5, 1) both; }
.recipe-detail-plan-row.is-leaving { animation: recipe-detail-plan-leave 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.recipe-detail-plan-remove-form { display: contents; }

.recipe-detail-plan-remove {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-plan-row);
  color: var(--color-ink-soft);
}

/* One icon at a time: the cross at rest, the spinner while a request runs. */
.recipe-detail-plan-spinner,
.recipe-detail-plan-tick { display: none; }

.recipe-detail-plan-spinner { animation: recipe-detail-plan-spin 700ms linear infinite; }
.recipe-detail-plan-remove[aria-busy="true"] .recipe-detail-plan-spinner { display: block; }
.recipe-detail-plan-remove[aria-busy="true"] .recipe-detail-plan-remove-icon { display: none; }

/* This recipe, not yet on the chosen day. */
.recipe-detail-plan-ghost {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: var(--space-plan-gap);
  min-height: 44px;
  padding: 0 var(--space-plan-row);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-plan-row);
  color: var(--color-ink-soft);
  animation: recipe-detail-plan-fade-in 260ms ease both;
}

.recipe-detail-plan-ghost[hidden] { display: none; }

.recipe-detail-plan-ghost span {
  flex: 1 1 auto;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  font-style: italic;
}

.recipe-detail-plan-add-form { margin: 0; }

.recipe-detail-plan-submit {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-plan-hair) var(--space-plan-row);
  border: var(--line);
  border-radius: var(--radius-md);
  background: var(--color-heeler);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--text-plan-heading);
  font-weight: var(--weight-semibold);
  line-height: normal;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.recipe-detail-plan-submit.is-pending { background: var(--color-heeler-dark); }

.recipe-detail-plan-submit.is-added {
  background: var(--color-paper);
  color: var(--color-heeler-dark);
}

.recipe-detail-plan-submit[aria-busy="true"] .recipe-detail-plan-spinner,
.recipe-detail-plan-submit.is-added:not([aria-busy="true"]) .recipe-detail-plan-tick { display: block; }

.recipe-detail-plan-submit.is-added:not([aria-busy="true"]) .recipe-detail-plan-tick { animation: recipe-detail-plan-pop 460ms cubic-bezier(0.3, 1.7, 0.5, 1) both; }

/* A failed request: a white card on an ink line, alert mark in tomato. */
.recipe-detail-plan-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-dialog-toast);
  width: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-sm-md);
  padding: var(--space-plan-gap) var(--space-plan-row) var(--space-plan-gap) var(--space-plan-gap);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-plan-toast);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: normal;
  animation: recipe-detail-plan-toast-in 300ms var(--ease-out-soft) both;
}

.recipe-detail-plan-toast[hidden] { display: none; }

.recipe-detail-plan-toast-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-tomato-ink);
  border-radius: var(--radius-round);
  background: var(--color-tomato-light);
  color: var(--color-tomato-ink);
}

.recipe-detail-plan-toast-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-plan-hair);
}

.recipe-detail-plan-toast-title {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-plan-toast);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recipe-detail-plan-toast-detail {
  color: var(--color-ink-soft);
  font-size: var(--text-plan-note);
}

.recipe-detail-plan-toast-retry {
  min-height: 36px;
  padding: 0 var(--space-sm-md);
  border-radius: var(--radius-round);
  color: var(--color-heeler-dark);
  font-family: var(--font-display);
  font-size: var(--text-plan-retry);
  font-weight: var(--weight-semibold);
}

.recipe-detail-plan-toast-dismiss {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-round);
  color: var(--color-ink-soft);
}

@keyframes recipe-detail-plan-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; } }
@keyframes recipe-detail-plan-sheet-up { from { transform: translateY(40px); opacity: 0; } to { opacity: 1; } }
@keyframes recipe-detail-plan-zoom { from { opacity: 0; transform: scale(0.96); } }
@keyframes recipe-detail-plan-fade-in { from { opacity: 0; } }
@keyframes recipe-detail-plan-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes recipe-detail-plan-drop { 0% { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes recipe-detail-plan-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes recipe-detail-plan-spin { to { transform: rotate(360deg); } }
@keyframes recipe-detail-plan-leave {
  0% { opacity: 1; max-height: 64px; }
  35% { opacity: 0; transform: translateX(14px); max-height: 64px; }
  100% { opacity: 0; transform: translateX(14px); max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; }
}
@keyframes recipe-detail-plan-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes recipe-detail-plan-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* ── Phone ────────────────────────────── */
@media (max-width: 760px) {
  .detail-container { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .video-hero-title { font-size: var(--text-display-phone); }
}

@media (max-width: 560px) {
  .detail-nav { gap: var(--space-sm); }
  .detail-nav-actions { gap: var(--space-xs); }
  .save-button { padding: 0 var(--space-sm-md); font-size: var(--text-body); }

  /* On the phone, Add to plan is a sheet over a dimmed page. */
  .recipe-detail-plan-backdrop { background: color-mix(in srgb, var(--color-ink) 34%, transparent); }

  .recipe-detail-plan-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 100dvh;
    overflow-y: auto;
    gap: var(--space-xs);
    padding: var(--space-plan-gap) var(--space-sm-md) calc(var(--space-plan-sheet) + env(safe-area-inset-bottom, 0px));
    border-width: 1.5px 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: recipe-detail-plan-sheet-up 300ms var(--ease-out-soft) both;
  }

  .recipe-detail-plan-handle {
    display: block;
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: var(--radius-round);
    background: var(--color-border);
  }

  .recipe-detail-plan-day { min-height: 64px; }
  .recipe-detail-plan-day-panels { min-height: 196px; }
  .recipe-detail-plan-submit { min-height: 56px; }

  .recipe-detail-plan-toast {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: auto;
    width: auto;
  }
}

body.recipe-detail-plan-modal-open { overflow: hidden; }

@media (min-width: 561px) {
  body.recipe-detail-plan-modal-open { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .save-button:active { transform: none; }
  .recipe-media-bar-enlarge:active { transform: none; }
  .recipe-source--video,
  .recipe-source--video .video-player-wrapper,
  .recipe-source--video .recipe-media-bar,
  .recipe-source--video.is-docked .recipe-media-bar { transition: none; }
  .recipe-detail-plan-day-indicator,
  .recipe-detail-plan-day,
  .recipe-detail-plan-submit { transition: none; }
  .recipe-detail-plan-panel,
  .recipe-detail-plan-day.is-bumping,
  .recipe-detail-plan-day-dot,
  .recipe-detail-plan-day-panel,
  .recipe-detail-plan-ghost,
  .recipe-detail-plan-row.is-dropping,
  .recipe-detail-plan-row.is-dropping .recipe-detail-plan-row-check svg,
  .recipe-detail-plan-row-name.is-shaking,
  .recipe-detail-plan-submit.is-added:not([aria-busy="true"]) .recipe-detail-plan-tick,
  .recipe-detail-plan-toast,
  .recipe-detail-plan-row.is-leaving { animation-duration: 1ms; }
  .recipe-detail-plan-spinner { animation-duration: 2s; }
}