/* Recipe-detail page — the converged redesign (issue #182, slice B1).

   Ported from the canonical prototype
   recipe-masonry/recipe-detail-icons-buttons.html. The signature of the
   design is the icon-first ingredient rails: every ingredient is a
   sticker-icon tile in a horizontal-scroll rail.

   The page reads as one calm cookbook surface — Ingredients -> Method
   -> Notes flowing continuously, not three boxed modules. It is
   type-and-composition-led, not photo-led: the hero is sized to the
   editorial column.

   Tokens: every value resolves through tokens.css (--md-*, --space-*,
   --radius-*) so the page adapts to the dark theme for free. A handful
   of component-scoped custom properties below cover sizing the
   prototype introduced that the global scale doesn't carry.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it. */

@layer components {
  .recipe-detail {
    /* The converged design widens the editorial column past the
       768px --content-narrow tier to ~900px so the icon rails breathe.
       .page-shell reads --page-shell-max; overriding it here keeps the
       width decision local to this component. */
    --page-shell-max: 900px;

    display: flex;
    flex-direction: column;
    /* Section rhythm — the generous gap that lets the page read as one
       continuous surface rather than stacked cards. */
    gap: var(--space-7);
    padding-block: var(--space-8) var(--space-10);
  }

  /* === Hero ===
     Compact contained hero. aspect-ratio is locked from intrinsic dims
     (set inline) to prevent CLS; falls back to a 3:2 editorial ratio.
     Capped height keeps a tall hero from pushing the title below the
     fold on narrow viewports. */
  .recipe-detail__hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--md-surface-container);
  }

  .recipe-detail__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
  }

  /* === Hero variants by hero_kind ===
     wide-video       -- 16:9 image-shaped frame plus a play-affordance
                         out-link overlay. ADR 0002: we never embed an
                         iframe of stored video.
     vertical-video   -- 9:16 poster, side-by-side with the title zone
                         at desktop. Achieved by gridding the article
                         when the modifier class is present; the title
                         zone slots in column 2. Falls back to stacked
                         at mobile (see the mobile breakpoint below).
     image            -- the default; no overrides needed.
     none             -- no hero element; the article gets a slightly
                         tighter top padding because the title carries
                         the page (see modifier below).

     The play overlay is keyboard-accessible (it is a real <a>), opens
     in a new tab via rel="noopener noreferrer", and renders with a
     soft scrim so the label reads at any underlying poster brightness. */
  .recipe-detail__hero--vertical-video {
    aspect-ratio: 9 / 16;
    max-height: 70vh;
    max-width: 320px;
  }

  .recipe-detail__hero-play {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-start: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: rgba(24, 24, 27, 0.78);
    color: var(--md-zinc-50, #fafafa);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:is(:hover, :focus-visible) {
      background: rgba(24, 24, 27, 0.92);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
  }

  .recipe-detail__hero-play-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--md-primary);
    color: var(--md-on-primary);
  }

  .recipe-detail__hero-play-icon .icon {
    width: 12px;
    height: 12px;
    /* Optical nudge -- the play triangle is visually heavier on its
       right side, so a 1px shift centres it in the disc. */
    transform: translateX(1px);
  }

  /* .recipe-detail__hero needs relative positioning for the absolute
     play overlay to anchor against; layer that on the base. */
  .recipe-detail__hero {
    position: relative;
  }

  /* Vertical-video side-by-side at desktop. The article is already a
     flex column; switch to a 2-col grid when the modifier is present so
     the hero (which appears first in source order) sits in column 1 and
     the title zone (everything between the hero and the first
     `.recipe-detail__section`) flows into column 2. */
  @media (min-width: 768px) {
    .recipe-detail--hero-vertical-video {
      display: grid;
      grid-template-columns: minmax(220px, 320px) 1fr;
      column-gap: var(--space-7);
      row-gap: var(--space-6);
      align-items: start;
    }
    .recipe-detail--hero-vertical-video .recipe-detail__hero--vertical-video {
      grid-column: 1;
      grid-row: 1 / span 6;
    }
    /* Title zone, kicker, deck, creator, actions, factsbar all share
       column 2 in source-order rows. Sections (ingredients, method,
       etc.) span both columns. */
    .recipe-detail--hero-vertical-video > :not(.recipe-detail__hero):not(.recipe-detail__section):not(.recipe-detail__footer) {
      grid-column: 2;
    }
    .recipe-detail--hero-vertical-video > .recipe-detail__section,
    .recipe-detail--hero-vertical-video > .recipe-detail__footer {
      grid-column: 1 / -1;
    }
  }

  /* No-media state: drop the placeholder frame entirely and lift the
     title type one step so the page is anchored type-led, not by an
     empty box. The article still flows as a column. */
  .recipe-detail--hero-none .recipe-detail__title {
    font-size: clamp(2.8rem, 5vw, 3.8rem);
  }
  .recipe-detail--hero-none {
    padding-block-start: var(--space-6);
  }

  /* === Title zone === */
  .recipe-detail__kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.4rem, 4.2vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: var(--md-on-surface);
    max-width: 18ch;
    text-wrap: balance;
    font-variation-settings: 'opsz' 144;
  }

  .recipe-detail__deck {
    margin: 0;
    max-width: 44ch;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--md-on-surface-variant);
    text-wrap: balance;
    font-variation-settings: 'opsz' 48;
  }

  /* === Creator credit ===
     Second-most-prominent element after the hero. */
  .recipe-detail__creator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .recipe-detail__creator-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--md-on-surface);
  }

  .recipe-detail__creator-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }

  .recipe-detail__creator-verified {
    display: inline-grid;
    place-items: center;
    color: var(--md-primary);
  }

  .recipe-detail__creator-verified .icon {
    width: 16px;
    height: 16px;
  }

  .recipe-detail__creator-bio {
    margin: var(--space-1) 0 0;
    max-width: 60ch;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__creator-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--md-primary-text);
    text-decoration: none;
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover { color: var(--md-primary-action); }
  }

  .recipe-detail__creator-sub {
    margin-block-start: 1px; /* optical baseline nudge (allowlisted) */
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  /* === More from {creator} ===
     Wrapping grid of cards -- shares the .recipes-grid layout used by
     /recipes and /saved so card rendering stays consistent. */
  .recipe-detail__more-from-link {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--md-primary-text);
    text-decoration: none;
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover { color: var(--md-primary-action); }
  }

  .recipe-detail__more-from-grid {
    /* The shared .recipes-grid already carries its own grid sizing;
       this block exists so future tweaks specific to the inline rail
       (caps, gap overrides) have a local hook. */
    margin-block-start: var(--space-4);
  }

  /* === Actions row ===
     Save = primary CTA (its own component, recipe-save-button.css).
     Share / Print = explicit secondary buttons. */
  .recipe-detail__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .recipe-detail__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
    color: var(--md-zinc-700);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:is(:hover, [data-force~="hover"]) {
      border-color: var(--md-border-strong);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
      border-color: var(--md-primary);
    }
  }

  .recipe-detail__btn-secondary .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--md-on-surface-variant);
  }

  /* === Facts bar ===
     Prep / Cook / Total as divider-separated label/value stacks, plus
     the servings stepper. */
  .recipe-detail__factsbar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--md-border-muted);
  }

  .recipe-detail__fact {
    display: flex;
    flex-direction: column;
    gap: 2px; /* sub-token micro-gap (allowlisted) */
  }

  .recipe-detail__fact:not(.recipe-detail__fact--stepper) + .recipe-detail__fact:not(.recipe-detail__fact--stepper) {
    padding-inline-start: var(--space-6);
    border-inline-start: 1px solid var(--md-border-muted);
  }

  .recipe-detail__fact--stepper {
    margin-inline-start: auto;
  }

  .recipe-detail__fact-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__fact-value {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
  }

  /* === Servings stepper ===
     Outlined pill — circle buttons flank a label/value display. The
     htmx contract (#recipe-servings-stepper id, hx-select wiring) lives
     in the template; this styles the result. */
  .recipe-detail__stepper {
    display: inline-flex;
    align-items: center;
    margin-block-start: var(--space-1);
    padding: 3px; /* tight inset for the circle buttons (allowlisted) */
    border: 1.5px solid var(--md-border-muted);
    border-radius: var(--radius-pill);
    background: var(--md-surface-container-low);
  }

  .recipe-detail__stepper-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--md-primary);
    cursor: pointer;
    transition:
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      transform var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover:not(:disabled) {
      background: var(--md-primary-container);
    }

    &:active:not(:disabled) {
      transform: scale(0.9);
    }

    &:disabled {
      cursor: not-allowed;
      color: var(--md-on-surface-variant);
      opacity: 0.45;
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
  }

  .recipe-detail__stepper-btn .icon {
    width: 17px;
    height: 17px;
  }

  .recipe-detail__stepper-count {
    min-width: 84px;
    padding-inline: var(--space-2);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
    user-select: none;
  }

  /* === Section idiom ===
     One quiet heading row + content. No boxed card — the sections flow
     as one continuous surface (the cookbook test). */
  .recipe-detail__section {
    display: flex;
    flex-direction: column;
  }

  .recipe-detail__section-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--md-border-muted);
  }

  .recipe-detail__section-heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: -0.015em;
    line-height: 1;
  }

  .recipe-detail__section-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__section-spacer {
    flex: 1;
  }

  /* === Coming-soon control ===
     Low-contrast, outlined, non-interactive. Reserves space + signals
     intent (the meal-planning grocery pattern). */
  .recipe-detail__soon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--md-border);
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    cursor: not-allowed;
  }

  .recipe-detail__soon .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .recipe-detail__soon-tag {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container);
    padding: 2px 6px; /* chip inset (allowlisted) */
    border-radius: var(--radius-xs);
  }

  .recipe-detail__scale-note {
    margin: var(--space-3) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  /* === Ingredients — icon-tile rails === */
  .recipe-detail__ing-group {
    margin-block-start: var(--space-6);
  }

  .recipe-detail__ing-group-label {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--md-primary-text);
  }

  /* The wrap holds the right-edge fade so a scrollable rail visibly
     reads as scrollable. The fade is pointer-events:none so it never
     blocks a tile tap. */
  .recipe-detail__rail-wrap {
    position: relative;
  }

  .recipe-detail__rail-wrap::after {
    content: "";
    position: absolute;
    inset-block: 0 16px;
    inset-inline-end: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, var(--md-surface));
    pointer-events: none;
  }

  .recipe-detail__rail {
    display: flex;
    gap: var(--space-3);
    /* 2px inline lead so the first tile's focus ring isn't clipped by
       the scroll container (allowlisted micro-gap). */
    padding: var(--space-1) 2px var(--space-4);
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .recipe-detail__rail::-webkit-scrollbar {
    display: none;
  }

  .recipe-detail__tile-wrap {
    flex: 0 0 126px;
    scroll-snap-align: start;
  }

  /* The tile is a <label> wrapping a hidden checkbox — the whole tile
     is the tap target for the "tick this off" toggle. */
  .recipe-detail__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    min-height: 168px;
    padding: var(--space-5) var(--space-3) var(--space-4);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
    cursor: pointer;
    transition:
      border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      box-shadow var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover {
      border-color: var(--md-border-strong);
      box-shadow: var(--shadow-sm);
    }
  }

  .recipe-detail__tile-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .recipe-detail__tile-check:focus-visible + .recipe-detail__tile-tick {
    /* The hidden checkbox keeps keyboard focus; surface it on the tile. */
    box-shadow: var(--focus-ring);
  }

  /* The icon — resolved sticker PNG. drop-shadow gives the flat sticker
     a subtle lift off the tile. */
  .recipe-detail__tile-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(24, 24, 27, 0.18));
  }

  /* Missing-icon fallback — a neutral placeholder tile, no <img>.
     Robust for any ingredient with no ready icon (the hard
     constraint). A quiet bowl glyph on a soft disc. */
  .recipe-detail__tile-icon--placeholder {
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--md-surface-container);
    filter: none;
  }

  .recipe-detail__tile-icon--placeholder .icon {
    width: 30px;
    height: 30px;
    color: var(--md-border-strong);
  }

  .recipe-detail__tile-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.28;
    color: var(--md-on-surface);
  }

  .recipe-detail__tile-optional {
    font-style: italic;
    font-weight: 400;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__tile-qty {
    margin-block-start: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--md-on-surface-variant);
    font-variant-numeric: tabular-nums;
  }

  /* Checked state — the tile fills with the primary container tint and
     a tick badge appears. */
  .recipe-detail__tile-tick {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--md-primary);
    color: var(--md-on-primary);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial),
      transform var(--motion-spring-fast-spatial-duration) var(--motion-spring-fast-spatial);
  }

  .recipe-detail__tile-tick .icon {
    width: 13px;
    height: 13px;
  }

  .recipe-detail__tile:has(.recipe-detail__tile-check:checked) {
    background: var(--md-primary-container);
    border-color: var(--md-primary-muted);
  }

  .recipe-detail__tile:has(.recipe-detail__tile-check:checked) .recipe-detail__tile-tick {
    opacity: 1;
    transform: scale(1);
  }

  .recipe-detail__tile:has(.recipe-detail__tile-check:checked) .recipe-detail__tile-icon:not(.recipe-detail__tile-icon--placeholder) {
    filter: drop-shadow(0 2px 4px rgba(24, 24, 27, 0.18)) saturate(0.85) opacity(0.78);
  }

  /* === Method === */
  .recipe-detail__steps {
    display: flex;
    flex-direction: column;
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }

  .recipe-detail__step {
    display: flex;
    gap: var(--space-5);
    padding-block: var(--space-4);
  }

  .recipe-detail__step + .recipe-detail__step {
    border-block-start: 1px solid var(--md-border-muted);
  }

  .recipe-detail__step-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }

  .recipe-detail__step-text {
    margin: 0;
    padding-block-start: 3px; /* optical baseline alignment (allowlisted) */
    line-height: var(--leading-relaxed);
    color: var(--md-zinc-700);
  }

  .recipe-detail__step-text b {
    color: var(--md-on-surface);
    font-weight: 600;
  }

  /* === Notes === */
  .recipe-detail__notes {
    margin-block-start: var(--space-4);
    max-width: 64ch;
    line-height: var(--leading-relaxed);
    color: var(--md-zinc-700);
    white-space: pre-wrap;
  }

  /* === Nutrition — designed slot, data-pending === */
  .recipe-detail__nutrition {
    display: flex;
    align-items: center;
    gap: var(--space-9);
    flex-wrap: wrap;
    margin-block-start: var(--space-5);
  }

  .recipe-detail__donut {
    position: relative;
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
  }

  .recipe-detail__donut-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }

  .recipe-detail__donut-dash {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__nutrition-pending {
    max-width: 38ch;
  }

  .recipe-detail__nutrition-pending-head {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--md-on-surface);
  }

  .recipe-detail__nutrition-pending-body {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--md-on-surface-variant);
  }

  /* === Footer === */
  .recipe-detail__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--md-border-muted);
    text-align: center;
  }

  .recipe-detail__source {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--md-primary-text);
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover { color: var(--md-primary-action); }
  }

  .recipe-detail__provenance {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  .recipe-detail__back {
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
    transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    &:hover { color: var(--md-on-surface); }
  }

  /* === Mobile (390 design point) === */
  @media (max-width: 640px) {
    .recipe-detail {
      gap: var(--space-6);
      padding-block: var(--space-5) var(--space-8);
    }

    .recipe-detail__hero {
      aspect-ratio: 4 / 3;
    }

    .recipe-detail__title {
      font-size: 2.1rem;
    }

    .recipe-detail__deck {
      font-size: 1.05rem;
    }

    .recipe-detail__actions {
      width: 100%;
    }

    .recipe-detail__factsbar {
      gap: var(--space-4);
    }

    .recipe-detail__fact--stepper {
      margin-inline-start: 0;
      width: 100%;
    }

    .recipe-detail__nutrition {
      gap: var(--space-5);
    }
  }

  /* Print — drop the chrome, keep the recipe. The Print secondary
     button calls window.print() from recipe-detail.js. */
  @media print {
    .recipe-detail__actions,
    .recipe-detail__soon,
    .recipe-detail__back {
      display: none;
    }

    .recipe-detail__rail {
      flex-wrap: wrap;
      overflow: visible;
    }

    .recipe-detail__rail-wrap::after {
      display: none;
    }
  }

  /* Reduced motion — kill the tile-tick spring. */
  @media (prefers-reduced-motion: reduce) {
    .recipe-detail__tile-tick {
      transition: none;
    }
  }
}