/* ══════════════════════════════════════════════════════════════════════════
   RASA — The Opening Chapter (js/home/opening-chapter.js)

   Typography-first, box-LAST: the hero (.mk-primary) stays the ONE card on
   the page; everything here is hairline-separated editorial rows. Tokens from
   styles.css; rides css/my-kitchen.css for the card, buttons and streak pill.

   Motion contract: ease-out only, feedback ≤100ms, transitions 250–400ms,
   ONE signature (the diya lighting) ≤700ms. Every toggled node carries the
   [hidden] counter-rule. Reveals are fail-safe: resting state is visible.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --oc-hair: rgba(242, 221, 208, 0.1);
  --oc-ash: rgba(242, 221, 208, 0.28);
  --oc-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
  --oc-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── [hidden] guards for everything JS toggles here ─────────────────────── */
.oc[hidden],
.oc-reading[hidden],
.oc-note[hidden],
.oc-epilogue[hidden],
.oc-door[hidden],
.oc-taste[hidden] {
  display: none !important;
}

/* ── Header, chapter skin ────────────────────────────────────────────────── */
.mk-header--chapter {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow pill"
    "title   title"
    "note    note";
  align-items: center;
  gap: 12px 20px;
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.mk-header--chapter .oc-eyebrow {
  grid-area: eyebrow;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
  margin: 0;
}
.mk-header--chapter .mk-greeting {
  grid-area: title;
  margin: 0;
}
.mk-header--chapter .oc-note {
  grid-area: note;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin: 0;
}
.mk-header--chapter .mk-streak {
  grid-area: pill;
  justify-self: end;
  margin: 0;
}

.oc-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
  margin: 0;
}
.oc-eyebrow--inline { margin-bottom: 10px; }

.mk-greeting--chapter {
  /* The chapter title: clean single line on desktop, balanced on narrower screens. */
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.7vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--color-blush);
  max-width: 100%;
  text-wrap: balance;
}

/* The diya pill, unlit until 3/3 */
.mk-streak--chapter {
  color: rgba(242, 221, 208, 0.7);
  border-color: rgba(242, 221, 208, 0.16);
}
.mk-streak--chapter .oc-diya__flame {
  opacity: 0;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.mk-streak--chapter .oc-diya__lamp { stroke: rgba(242, 221, 208, 0.55); fill: rgba(242, 221, 208, 0.06); }
.mk-streak--chapter[data-done="3"] {
  color: rgba(var(--color-science-rgb), 0.9);
  border-color: rgba(var(--color-science-rgb), 0.3);
}
.mk-streak--chapter[data-done="3"] .oc-diya__lamp { stroke: rgba(245, 166, 35, 0.85); fill: rgba(245, 166, 35, 0.12); }
.mk-streak--chapter[data-done="3"] .oc-diya__flame {
  animation: oc-flame-draw 450ms var(--oc-ease) forwards;
}
.mk-streak--chapter[data-done="3"] .oc-diya__flame--body {
  animation: oc-flame-draw 450ms var(--oc-ease) 120ms forwards, oc-flame-fill 200ms ease-out 450ms forwards;
}
@keyframes oc-flame-draw { to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes oc-flame-fill { to { fill-opacity: 1; } }
.oc-temp { transition: opacity 180ms ease-out, transform 180ms ease-out; }
.oc-temp.is-swapping { opacity: 0; transform: translateY(4px); }

/* ── The hero, chapter skin ──────────────────────────────────────────────── */
.mk-primary--chapter .mk-primary__body { padding-top: clamp(22px, 3vw, 34px); padding-bottom: clamp(22px, 3vw, 34px); }
.oc-card__technique { margin-bottom: 0.3rem; }
.mk-primary--chapter .mk-primary__tagline { margin-bottom: 0.9rem; max-width: 44ch; }

.oc-number {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 1rem;
}
.oc-number__value {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.oc-number__caption {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.oc-hair {
  border: 0;
  height: 1px;
  background: var(--oc-hair);
  margin: 0 0 1rem;
}
.oc-card__proofeyebrow { margin-bottom: 0.35rem; }
.oc-card__recipe {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: rgba(242, 221, 208, 0.9);
}
.oc-card__recipe a { color: inherit; text-decoration: none; }
.oc-card__recipe a::after { content: ""; position: absolute; inset: 0; }
.oc-card__recipe .mk-primary__titlearrow svg { width: 0.6em; height: 0.5em; }
.oc-card__proof {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 0.9rem;
  max-width: 48ch;
}
.mk-btn.is-done {
  border-color: rgba(139, 191, 90, 0.35);
  background: rgba(139, 191, 90, 0.08);
  color: rgba(139, 191, 90, 0.95);
  cursor: default;
}

/* ── The block under the card ────────────────────────────────────────────── */
.oc { margin-top: clamp(22px, 3.5vh, 34px); }

/* (c) the reading */
.oc-reading {
  overflow: hidden;
  border-top: 1px solid var(--oc-hair);
  border-bottom: 1px solid var(--oc-hair);
  padding: clamp(22px, 3vh, 30px) 0;
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.oc-reading.is-opening { transition: height 350ms var(--oc-ease); padding-top: 0; padding-bottom: 0; border-width: 0; }
.oc-reading__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 400;
  margin: 0 0 0.8rem;
  color: var(--color-blush);
}
.oc-reading__science,
.oc-reading__action {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(242, 221, 208, 0.8);
  max-width: 68ch;
  margin: 0 0 1rem;
}
.oc-reading__science .tc-science__highlight {
  color: var(--color-accent);
  font-style: italic;
}
.oc-reading__action strong { font-weight: 600; color: var(--color-blush); }
.oc-reading__actions { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 1.2rem; }

/* (d)+(e)+(f) grid */
.oc-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* (d) the rail — one hairline that fills like a pan coming to temperature */
.oc-rail {
  position: relative;
  padding-left: 40px;
}
.oc-rail__line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--oc-hair);
}
.oc-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(245, 166, 35, 0.95), rgba(245, 166, 35, 0.55));
  transform-origin: top;
  /* 0/3 → a 24px pilot; then to each station's row (≈ a third each) */
  transform: scaleY(0.06);
  transition: transform 600ms var(--oc-ease);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.35);
}
.oc-rail[data-done="1"] .oc-rail__fill { transform: scaleY(0.4); }
.oc-rail[data-done="2"] .oc-rail__fill { transform: scaleY(0.7); }
.oc-rail[data-done="3"] .oc-rail__fill { transform: scaleY(1); opacity: 0.55; }

.oc-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--oc-hair);
}
.oc-rail__head .oc-eyebrow { margin: 0; }
.oc-rail__count {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.oc-rail__count strong { color: var(--color-accent); font-weight: 500; }

.oc-stations { list-style: none; margin: 0; padding: 0; }
.oc-station { border-bottom: 1px solid var(--oc-hair); }
.oc-station__hit {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  min-height: 72px;
  padding: 16px 0;
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: background 0.3s ease;
}
.oc-station__hit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6);
  border-radius: 6px;
}
.oc-station__num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--oc-ash);
  transition: color 250ms var(--oc-ease-quart);
  position: relative;
}
.oc-station.is-done .oc-station__num { color: var(--color-accent); }
.oc-station__text { min-width: 0; display: grid; gap: 3px; }
.oc-station__label {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: rgba(242, 221, 208, 0.88);
  overflow-wrap: anywhere;
}
.oc-station__sub {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.oc-station__state {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  justify-self: end;
}
.oc-station.is-done .oc-station__state { color: rgba(139, 191, 90, 0.9); }
.oc-station__hit:hover .oc-station__label { color: var(--color-blush); }

/* ignition — one shot, only on the station that just flipped */
.oc-station.is-igniting .oc-station__num::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55);
  animation: oc-ring 520ms var(--oc-ease) forwards;
  pointer-events: none;
}
@keyframes oc-ring { to { box-shadow: 0 0 0 18px rgba(245, 166, 35, 0); } }

.oc-cliff,
.oc-epilogue__cliff {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--color-text-secondary);
}
.oc-cliff strong, .oc-epilogue__cliff strong { font-weight: 500; color: var(--color-blush); }
.oc-cliff--locked { color: var(--color-text-muted); }
.oc-lock { width: 16px; height: 16px; flex: 0 0 auto; }

.oc-epilogue { padding: 18px 0 6px; }
.oc-epilogue__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--color-blush);
  margin: 0;
}

/* (e) + (f) the right margin column */
.oc-side { display: grid; gap: 0; }
.oc-door {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--oc-hair);
  text-decoration: none;
  color: inherit;
}
.oc-side .oc-door:last-child { border-bottom: 1px solid var(--oc-hair); }
.oc-door .oc-eyebrow--inline { margin-bottom: 4px; }
.oc-door__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: rgba(242, 221, 208, 0.9);
  transition: color 0.3s ease;
}
.oc-door__title svg { width: 14px; height: 12px; color: rgba(var(--color-science-rgb), 0.6); transition: transform 0.3s ease; }
.oc-door:hover .oc-door__title { color: var(--color-blush); }
.oc-door:hover .oc-door__title svg { transform: translateX(4px); }
.oc-door__sub { font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.oc-door--unlock .oc-door__title { color: rgba(var(--color-science-rgb), 0.9); font-size: 1.1rem; }
.oc-door:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6);
  border-radius: 6px;
}
.oc-taste {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--oc-hair);
}

/* ── Library re-tone in chapter mode (the open cards come first) ─────────── */
.rasa-member.oc-active .recipes-grid .recipe-card[data-oc-open] { order: -1; }
.rasa-member.oc-active .recipe-card[data-oc-open]::before {
  content: "Open";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #14100a;
  background: rgba(245, 166, 35, 0.92);
  border-radius: 999px;
  padding: 4px 9px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .oc-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 540px) {
  .mk-header--chapter {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "pill"
      "title"
      "note";
    gap: 10px;
  }
  .mk-header--chapter .mk-streak {
    justify-self: start;
  }
  .mk-header--chapter .mk-greeting--chapter {
    font-size: clamp(1.55rem, 5.8vw, 1.95rem);
    line-height: 1.22;
  }
}
@media (max-width: 520px) {
  .oc-rail { padding-left: 32px; }
  .oc-rail__line { left: 14px; }
  .oc-station__hit {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    grid-template-areas: "num text" "num state";
    min-height: 64px;
  }
  .oc-station__num { grid-area: num; font-size: 2.2rem; }
  .oc-station__text { grid-area: text; }
  .oc-station__state { grid-area: state; justify-self: start; }
  .oc-number__value { font-size: 2.6rem; }
  .oc-reading__science, .oc-reading__action { font-size: 1.08rem; }
  .oc-reading__actions { flex-direction: column; align-items: stretch; }
  .oc-reading__actions .mk-btn { justify-content: center; }
}

/* ── Reduced motion: final states visible, nothing draws or counts ───────── */
@media (prefers-reduced-motion: reduce) {
  .oc-rail__fill, .oc-station__num, .oc-temp, .oc-door__title, .oc-door__title svg, .oc-reading.is-opening {
    transition-duration: 0.001ms;
  }
  .mk-streak--chapter[data-done="3"] .oc-diya__flame,
  .mk-streak--chapter[data-done="3"] .oc-diya__flame--body {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
  .oc-station.is-igniting .oc-station__num::after { animation: none; display: none; }
}