/* ─────────────────────────────────────────────────────────────────
   styles.css
   ─────────────────────────────────────────────────────────────────
   Single shared stylesheet for the Recipes prototypes
   (index.html, v1–v5).

   Loaded AFTER the Tailwind CDN runtime in every HTML file via:
       <link rel="stylesheet" href="styles.css" />

   Tailwind's runtime injects its utilities <style> at the end of
   <head> at script execution time, so utility classes win the
   cascade vs. element selectors here. Selectors below intentionally
   use class or compound selectors (.prose-recipe h1, .scroll-hide)
   so they take precedence where they need to.

   Dependencies / relationships:
     · Tailwind CDN          — provides utility classes used in HTML
     · Tabler Icons webfont  — provides .ti / .ti-* via class names
     · Google Fonts (Inter)  — body font-family
     · Google Fonts (Instrument Serif) — V1 only, .font-display
     · app.js                — sets toast opacity inline; expects
                                #toast to exist (it injects it itself)

   Sections (in order below):
     1. Base                   — page-level defaults (body font)
     2. Display typography     — Instrument Serif accent (V1)
     3. Scrollbar              — global thin styling + .scroll-hide
     4. Entrance animations    — fade + translate-up + blur stagger
     5. Focus ring             — accessibility outline
     6. Scroll fade hint       — sticky gradient masks (V3)
     7. Chapter numbers        — tabular nums for "01" labels (V4)
     8. Prose (markdown body)  — Markdown-rendered typography
   ───────────────────────────────────────────────────────────────── */


/* ── 1. Base ───────────────────────────────────────────────────── */
/* Inter is loaded per-page via <link rel="stylesheet"> in <head>. */
body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}


/* ── 2. Display typography (archived) ──────────────────────────── */
/* Originally used by the V1 editorial prototype (now in
   /ARCHIVE/v1-editorial.html). The Instrument Serif font is loaded
   only on that page via its <head> <link>; this rule has no effect
   when the font isn't loaded, so it stays here harmlessly in case
   we revisit a serif accent for the live site. */
.font-display {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-weight: 400;
}


/* ── 3. Scrollbar ──────────────────────────────────────────────── */
/* Thin, light, theme-consistent scrollbar across the app. */
*::-webkit-scrollbar          { width: 8px; height: 8px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-thumb    { background: rgb(0 0 0 / 0.08); border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / 0.18); }
* { scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / 0.12) transparent; }

/* Apply to a scrollable container to hide its scrollbar entirely
   while keeping wheel/touch scroll functional (used in V3's
   ingredients list — the .scroll-fade gradients hint at overflow). */
.scroll-hide::-webkit-scrollbar { width: 0; height: 0; display: none; }
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }


/* ── 4. Entrance animations ────────────────────────────────────── */
/* Fade-in + translate-up + blur-out. Sequenced top-to-bottom via
   the .enter-d1..d8 delay modifiers. Respects reduced-motion. */
@keyframes enterUp {
  from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(8px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);   filter: blur(0);    }
}
.enter    { animation: enterUp 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.enter-d1 { animation-delay:  80ms; }
.enter-d2 { animation-delay: 160ms; }
.enter-d3 { animation-delay: 240ms; }
.enter-d4 { animation-delay: 320ms; }
.enter-d5 { animation-delay: 400ms; }
.enter-d6 { animation-delay: 480ms; }
.enter-d7 { animation-delay: 560ms; }
.enter-d8 { animation-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}


/* ── 5. Focus ring ─────────────────────────────────────────────── */
/* Applied to interactive elements with .focus-ring. Only shows for
   keyboard navigation (:focus-visible). */
.focus-ring:focus-visible {
  outline: 2px solid rgb(15 23 42);
  outline-offset: 2px;
  border-radius: 8px;
}


/* ── 6. Scroll fade hint (V3 only) ─────────────────────────────── */
/* Sticky gradient masks at top/bottom of a scrollable container so
   the user gets a visual hint that there's more content above/below
   even when the scrollbar is hidden via .scroll-hide. */
.scroll-fade { position: relative; }
.scroll-fade::before,
.scroll-fade::after {
  content: "";
  position: sticky;
  left: 0; right: 0;
  height: 16px;
  pointer-events: none;
  display: block;
}
.scroll-fade::before { top: 0;    background: linear-gradient(to bottom, white, transparent); margin-bottom: -16px; }
.scroll-fade::after  { bottom: 0; background: linear-gradient(to top,    white, transparent); margin-top:    -16px; }


/* ── 7. Chapter numbers (V4 only) ──────────────────────────────── */
/* Tabular numerals so the "01", "02", "03" chapter markers align
   visually as monospace digits. */
.chapter-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ── 8. Prose (Markdown body) ──────────────────────────────────── */
/* Markdown-rendered prose for the recipe Rich Text body.

   Spacing follows the @tailwindcss/typography v0.5 prose-base
   defaults — every block element carries its own margin-top
   and margin-bottom; CSS margin-collapsing handles the rest.
   The "h* + *" override tightly couples a heading to its
   first child of content (this is the canonical prose pattern
   used by Tailwind Typography, GitHub markdown, Stripe Press).

   All margins use em so they scale with the element's own
   font-size (esp. for h1/h2/h3 and pre which differ in size). */
.prose-recipe {
  font-size: 1rem;          /* 16px */
  line-height: 1.75;        /* 28/16 */
  color: rgb(51 65 85);
}

/* First/last children should not push the article away from its
   wrapping section's heading or padding. */
.prose-recipe > :first-child { margin-top: 0 !important; }
.prose-recipe > :last-child  { margin-bottom: 0 !important; }

/* Headings — sizes from @tailwindcss/typography prose-base. */
.prose-recipe h1 {
  color: rgb(15 23 42);
  font-size: 2.25em;            /* 36px */
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.111;
  margin-top: 0;
  margin-bottom: 0.8888889em;   /* 32px */
}
.prose-recipe h2 {
  color: rgb(15 23 42);
  font-size: 1.5em;             /* 24px */
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.333;
  margin-top: 1.7em;            /* 40.8px (was 48) */
  margin-bottom: 1em;           /* 24px */
}
.prose-recipe h3 {
  color: rgb(15 23 42);
  font-size: 1.25em;            /* 20px */
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.6;
  margin-top: 1.4em;            /* 28px (was 32) */
  margin-bottom: 0.6em;         /* 12px */
}

/* Tight coupling: the heading's own margin-bottom controls the gap
   to its first content child. Without this, a paragraph's larger
   margin-top would override and create too much space. */
.prose-recipe h1 + *,
.prose-recipe h2 + *,
.prose-recipe h3 + * {
  margin-top: 0 !important;
}

/* Paragraphs */
.prose-recipe p {
  margin-top: 1.05em;       /* 16.8px (was 20) */
  margin-bottom: 1.05em;
  text-wrap: pretty;
}

/* Inline marks */
.prose-recipe strong { color: rgb(15 23 42); font-weight: 600; }
.prose-recipe em     { font-style: italic; }

.prose-recipe a {
  color: rgb(15 23 42);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(203 213 225);
  transition: text-decoration-color 150ms ease;
}
.prose-recipe a:hover { text-decoration-color: rgb(15 23 42); }

/* Inline code */
.prose-recipe code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  font-weight: 500;
  color: rgb(15 23 42);
  background: rgb(241 245 249);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* Blockquote — gray-toned, no italic. */
.prose-recipe blockquote {
  margin-top: 1.35em;       /* 21.6px (was 25.6) */
  margin-bottom: 1.35em;
  padding-left: 1.15em;
  border-left: 2px solid rgb(203 213 225);
  color: rgb(71 85 105);
  font-weight: 400;
}
.prose-recipe blockquote p     { margin: 0; }
.prose-recipe blockquote p + p { margin-top: 1em; }

/* Code block */
.prose-recipe pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;       /* 14px */
  line-height: 1.7142857;   /* 24/14 */
  margin-top: 1.45em;       /* ~20.3px (was 24) */
  margin-bottom: 1.45em;
  padding: 0.857em 1.142em; /* 12px 16px */
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  color: rgb(30 41 59);
  overflow-x: auto;
}
.prose-recipe pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

/* HR */
.prose-recipe hr {
  margin-top: 2.25em;       /* 36px (was 48) */
  margin-bottom: 2.25em;
  border: 0;
  border-top: 1px solid rgb(226 232 240);
}

/* Bullet list — small slate dot marker. */
.prose-recipe ul {
  margin-top: 1.05em;       /* was 1.25em */
  margin-bottom: 1.05em;
  list-style: none;
  padding-left: 0;
}
.prose-recipe ul > li {
  position: relative;
  padding-left: 1.5em;
  margin-top: 0.4em;        /* 6.4px (was 8) */
  margin-bottom: 0.4em;
}
.prose-recipe ul > li::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgb(148 163 184);
}

/* Ordered list — numbered chip ("01", "02", ...) marker. */
.prose-recipe ol {
  margin-top: 1.05em;       /* was 1.25em */
  margin-bottom: 1.05em;
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}
.prose-recipe ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.875rem;
  margin-top: 0.6em;        /* 9.6px (was 12) */
  margin-bottom: 0.6em;
  min-height: 2rem;
}
.prose-recipe ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgb(100 116 139);
  background: rgb(241 245 249);
  border-radius: 9999px;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Media inside the prose body. */
.prose-recipe img,
.prose-recipe video {
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 12px;
  display: block;
  width: 100%;
  height: auto;
}
