/* recipes-detail.css — Recipes detail-page styles.
   Chrome (tokens, palette, type, .frame header/nav/footer, .site-notice,
   .skip-link, bare-element rules) is NOT defined here — it is @import-ed from
   the canonical design system, so it can NEVER drift from the rest of the site.
   The @imports MUST stay first (CSS requires @import before any other rule).
   Depth is two levels up: recipe pages live at /site/recipes/ and that tree
   deploys to the site root, served at /design. Mirrors prompts-detail.css. */
@import url("../../design/tokens.css");   /* Layer 0 — the DNA (palette, type, rhythm, layout) */
@import url("../../design/shell.css");    /* Layer 1 — the chrome + block set (.frame header/nav/footer) */

/* Below: ONLY the `.recipe-detail` scoped rules the shared shell does not own. */

.recipe-detail{ max-width:min(72ch, 92vw); margin:0 auto; padding:var(--gap-wide, 2rem) 0; }

/* Arrival — the recipe's title block. Mirrors the prompts .arrival rhythm. */
.recipe-detail .arrival{ text-align:center; margin-bottom:var(--gap-wide, 2rem); }
.recipe-detail .arrival .cat-line{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--gap-wide, 1.5rem); }
.recipe-detail .arrival .diamond-mark{
  color:var(--persimmon); font-size:14px; letter-spacing:6px; margin-bottom:var(--gap); }
.recipe-detail .arrival h1{
  font-family:var(--font-display); font-size:var(--size-headline, 2.2rem); color:var(--ink);
  margin:var(--gap-tight) 0; line-height:1.1; }
.recipe-detail .arrival .tagline{
  font-family:var(--font-body); font-style:italic; font-size:var(--size-lead);
  color:var(--muted); max-width:52ch; margin:var(--gap) auto 0; }

/* Shared part label — used by ingredients + each body part. */
.recipe-detail .part-label{
  font-family:var(--font-mono); font-size:var(--size-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink); font-weight:600;
  margin:0 0 var(--gap-tight) 0; padding-bottom:var(--gap-tight);
  border-bottom:var(--stroke-hairline) solid var(--hairline); }
.recipe-detail .part-label .count,
.recipe-detail .part-label .who{
  float:right; color:var(--faint); font-weight:400; }

/* Ingredients — the gifts-used block as cross-linked chips. */
.recipe-detail .ingredients{ margin:var(--gap-wide) 0; }
.recipe-detail .gift-chips{
  list-style:none; padding:0; margin:var(--gap) 0 0 0;
  display:flex; flex-wrap:wrap; gap:var(--gap-tight, 0.5rem); }
.recipe-detail .gift-chips .gift-chip{
  display:inline-block; text-decoration:none;
  border:var(--stroke-hairline) solid var(--hairline); border-radius:2px;
  padding:0.25em 0.6em; background:var(--ground);
  transition:border-color 0.15s ease, background 0.15s ease; }
.recipe-detail .gift-chips .gift-chip code{
  font-family:var(--font-mono); font-size:var(--size-code); color:var(--ink); }
.recipe-detail .gift-chips .gift-chip:hover{
  border-color:var(--persimmon); background:var(--paper); }

/* Body parts — the five authored sections. */
.recipe-detail .recipe-part{ margin:var(--gap-wide) 0; }
.recipe-detail .recipe-part p{
  font-family:var(--font-body); font-size:var(--size-body); line-height:1.72;
  color:var(--ink); margin:var(--gap-tight) 0 0 0; }

/* The honest edge — visually set apart: this is the load-bearing honesty. */
.recipe-detail .recipe-edge{
  border-left:3px solid var(--persimmon); padding-left:var(--gap);
  background:var(--ground); padding-top:var(--gap-tight); padding-bottom:var(--gap-tight);
  margin-top:var(--gap-wide); }
.recipe-detail .recipe-edge p{ color:var(--muted); }

/* The invite — turns the reader into a potential contributor. */
.recipe-detail .recipe-invite{
  margin:var(--gap-wide) 0 0 0; padding-top:var(--gap-wide);
  border-top:var(--stroke-hairline) solid var(--hairline); text-align:center; }
.recipe-detail .recipe-invite p{
  font-family:var(--font-body); font-style:italic; font-size:var(--size-body);
  color:var(--muted); max-width:54ch; margin:0 auto; }

/* Difficulty badge — the ski-slope gauge (glyph + name) in the arrival strip.
   The glyph carries the slope color; the text stays in the muted identity voice. */
.recipe-detail .difficulty{
  font-family:var(--font-mono); font-size:var(--size-label);
  white-space:nowrap; }
.recipe-detail .diff-green{ color:#2e7d32; }
.recipe-detail .diff-blue{ color:#1565c0; }
.recipe-detail .diff-black{ color:var(--ink); font-weight:600; }
.recipe-detail .diff-double{ color:var(--ink); font-weight:700; }