/* ==========================================================================
   Cook-along.

   The one screen designed to be read from arm's length: tablet propped against
   the tin, hands in the bowl, glasses somewhere else entirely. So the type is
   enormous, the paper is plain — no gingham behind anything she has to read —
   and every control is well past the 44pt floor rather than just clearing it.

   Only theme tokens, so light and dark both come out right on their own.
   ========================================================================== */

body.is-cooking { overflow: hidden; }

.cook {
  position: fixed; inset: 0; height: 100dvh; z-index: 150;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); color: var(--ink);
}

/* ── The bar ───────────────────────────────────────────────────────────── */

.cook__bar {
  position: relative;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--rule);
  padding: max(.6rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           calc(.6rem + 20px) max(1rem, env(safe-area-inset-left));
}

/* Exactly two rows of squares — one row reads as a dashed rule, not a check. */
.cook__bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background-image: var(--gingham-soft); pointer-events: none;
}

.cook__exit { min-height: 54px; font-size: 1.05rem; padding: .6rem 1.15rem; }

.cook__title {
  flex: 1 1 8rem; margin: 0; text-align: center;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Timers, which follow her from step to step ────────────────────────── */

.cook__timers { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.cook__timers:empty { display: none; }

.cook__timer {
  display: flex; align-items: center; gap: .4rem;
  padding: .2rem .25rem .2rem .9rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-deep); font-weight: 600;
}
.cook__timer-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cook__timer-clock { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.cook__timer button {
  font: inherit; font-weight: 700; font-size: .9rem;
  min-height: 44px; min-width: 44px; padding: 0 .5rem;
  border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook__timer button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.cook__timer.is-done { background: var(--danger-wash); color: var(--danger); animation: cook-pulse 1.1s ease-in-out infinite; }
@keyframes cook-pulse { 50% { opacity: .55; } }

/* ── The card ──────────────────────────────────────────────────────────── */

.cook__stage {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;                       /* leave the horizontal axis to the swipe */
  display: grid; align-content: start; justify-items: center;
  padding: clamp(1.25rem, 4vh, 3rem) max(1.25rem, env(safe-area-inset-right))
           2rem max(1.25rem, env(safe-area-inset-left));
}

.cook__card { width: min(46rem, 100%); outline: none; }

@keyframes cook-in-next { from { opacity: 0; transform: translateX(30px); } }
@keyframes cook-in-back { from { opacity: 0; transform: translateX(-30px); } }
.cook__card--next { animation: cook-in-next .22s ease-out; }
.cook__card--back { animation: cook-in-back .22s ease-out; }

.cook__eyebrow {
  margin: 0 0 .9rem; font-size: .9rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
}
.cook__h { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); margin: 0 0 1.25rem; }
.cook__subhead { font-family: var(--serif); font-size: 1.45rem; margin: 1.75rem 0 .4rem; }

.cook__step {
  margin: 0; max-width: 24em;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.4rem); line-height: 1.45;
}

.cook__hint { margin: 1.75rem 0 0; color: var(--ink-faint); font-size: .95rem; }

/* ── Ingredients, crossed off as she goes ──────────────────────────────── */

.cook__ings { list-style: none; margin: 0; padding: 0; }

.cook__ing {
  display: flex; align-items: flex-start; gap: .85rem;
  width: 100%; min-height: 62px; padding: .85rem .4rem; text-align: left;
  font: inherit; font-size: clamp(1.15rem, .95rem + .75vw, 1.5rem); line-height: 1.4;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.cook__ing:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.cook__tick {
  flex: none; width: 2rem; height: 2rem; margin-top: .1rem;
  border: 2px solid var(--rule); border-radius: 999px;
  display: grid; place-items: center; color: transparent;
}
.cook__ing[aria-pressed="true"] { color: var(--ink-faint); }
.cook__ing[aria-pressed="true"] span:last-child { text-decoration: line-through; }
/* --meadow lightens after dark, so the tick goes near-black on it — the same
   trick the filled controls in styles.css use. */
.cook__ing[aria-pressed="true"] .cook__tick { background: var(--meadow); border-color: var(--meadow); color: #fff; }

/* Two columns once there's room, so a long list stays on one screen. */
@media (min-width: 860px) {
  .cook__ings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.25rem; }
}

/* ── Timer offers on a step ────────────────────────────────────────────── */

.cook__chips { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.25rem; }
.cook__chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-weight: 600; font-size: 1.05rem;
  min-height: 58px; padding: .7rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-wash); color: var(--accent-deep);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cook__chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── The controls along the bottom ─────────────────────────────────────── */

.cook__foot {
  display: grid; gap: .7rem;
  background: var(--card); border-top: 1px solid var(--rule);
  padding: .8rem max(1rem, env(safe-area-inset-right))
           max(.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* Everything the app wants to say back — what it heard, what it started, and
   when the microphone has given up. It wraps: the last two are whole sentences,
   and the half that gets clipped is always the half saying the buttons still
   work. Capped at a readable measure so it doesn't run the width of an iPad. */
.cook__say {
  margin: 0; justify-self: center; max-width: min(100%, 34rem);
  padding: .5rem 1.1rem; border-radius: var(--radius);
  background: var(--accent-wash); color: var(--accent-deep); font-weight: 600;
  text-align: center; line-height: 1.35;
}

.cook__tools { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.cook__tool { min-height: 54px; font-size: 1rem; }

/* These two toggles deliberately don't use .btn--toggle: that class is re-skinned
   pink further down styles.css for the Favorite heart, and "on" here means the
   thing is running, not that she loves it. */
.cook .cook__tool[aria-pressed="true"] {
  background: var(--accent-wash); border-color: var(--accent); color: var(--accent-deep);
}

.cook__rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; }
.cook__rate > span { font-weight: 600; color: var(--ink-soft); margin-right: .25rem; }
.cook__rate button {
  font: inherit; font-weight: 600; min-height: 48px; padding: .5rem 1.1rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.cook__rate button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.cook__tip { margin: 0; text-align: center; color: var(--ink-faint); font-size: .85rem; line-height: 1.4; }

.cook__nav { display: grid; grid-template-columns: 1fr 1.35fr; gap: .75rem; }
.cook__navbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: inherit; font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  min-height: clamp(64px, 10vh, 88px); border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--paper-deep); color: var(--ink);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cook__navbtn--next { background: var(--accent); border-color: var(--accent); color: #fff; }
.cook__navbtn:disabled { opacity: .35; cursor: default; }
.cook__navbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cook__navico { width: 1.5rem; height: 1.5rem; }
.cook__navico--flip { transform: scaleX(-1); }   /* the back arrow, pointing on */

/* Never more than two rows of dots, however long the recipe is. */
.cook__dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  max-height: 92px; overflow-y: auto;
}
/* 44 square, even though the dot she can see is 10px: they sit edge to edge, so
   anything narrower means the step either side is a fingertip away. */
.cook__dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cook__dot span {
  width: 10px; height: 10px; border-radius: 999px; background: var(--rule);
  transition: background .15s, transform .15s;
}
.cook__dot--ing span { border-radius: 3px; }
.cook__dot.is-done span { background: var(--ink-faint); }
.cook__dot.is-here span { background: var(--accent); transform: scale(1.6); }

/* ── Smaller and shorter screens ───────────────────────────────────────── */

/*
 * Landscape on a phone, or a tablet in a stand with the keyboard up.
 *
 * A phone in landscape is 390px tall, and the bar and the controls were taking
 * about 320 of it — leaving the step itself, which is the entire point of the
 * screen, in a window shorter than one line of its own type. She got "STEP 3 OF
 * 12" and a scrollbar.
 *
 * So the room is taken from the things that aren't the recipe. The tip goes
 * (it is a nicety, and it is repeated in the recipe editor); the dots are held
 * to one row rather than two; the buttons come down to just over the 44 floor
 * and no further. Nothing here drops below 44: a short screen is a propped-up
 * one, and she is reaching for it with the back of a floury knuckle.
 */
@media (max-height: 620px) {
  .cook__stage { padding-top: 1rem; padding-bottom: 1rem; }
  .cook__step { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem); }
  .cook__h { font-size: 1.8rem; margin-bottom: .8rem; }
  .cook__ing { min-height: 54px; padding-block: .6rem; }
  .cook__exit { min-height: 48px; }
  .cook__navbtn { min-height: 52px; }
  .cook__tool { min-height: 48px; }
  .cook__rate button { min-height: 44px; }
  .cook__tip { display: none; }
  /* The dots keep their 44 square — the row that would have wrapped scrolls
     sideways instead of stealing another 44px from the step.
     `safe` is the whole of the fix: a centred flex row that overflows splits
     the overflow evenly, and the half that goes off the START is outside the
     scrollable region — scrollLeft is clamped at 0, so nothing can bring it
     back. Twenty-five steps on a phone held sideways put the first four or
     five dots, Ingredients among them, somewhere she can neither see nor
     reach. `safe center` gives up centring exactly when the row overflows,
     which is exactly when centring is doing the damage.
     Written twice on purpose, and it works here where it wouldn't with a
     var(): a Safari that doesn't know `safe` throws the second declaration out
     at parse time and keeps the first, rather than accepting it and failing
     later with nothing left to fall back to. */
  .cook__dots {
    max-height: 44px; flex-wrap: nowrap; overflow-x: auto;
    justify-content: center;
    justify-content: safe center;
  }
  .cook__dot { flex: none; }
  .cook__foot { gap: .45rem; padding-top: .6rem; }
}

@media (max-width: 560px) {
  .cook__title { order: 3; flex-basis: 100%; text-align: left; }
  .cook__timers { justify-content: flex-start; }
  .cook__tools { display: grid; grid-template-columns: 1fr 1fr; }
  .cook__tools .cook__tool:only-child { grid-column: 1 / -1; }
  .cook__nav { grid-template-columns: 1fr 1fr; }
  .cook__chip, .cook__navbtn { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cook__card--next, .cook__card--back { animation: none; }
  .cook__timer.is-done { animation: none; }
  .cook__dot span { transition: none; }
}

/*
 * The same colours again, as light-dark() pairs.
 *
 * The rules above now carry only the daytime value, which every browser
 * understands; this block adds the evening half where light-dark() is
 * supported. Without the guard these declarations were simply invalid on an
 * older Safari, and an invalid `color` inherits — which on a filled blue
 * button meant near-white text on light blue.
 */
@supports (color: light-dark(#000, #fff)) {
  .cook__ing[aria-pressed="true"] .cook__tick { color: light-dark(#fff, #1B1917); }
  .cook__rate button[aria-pressed="true"] { color: light-dark(#fff, #1B1917); }
  .cook__navbtn--next { color: light-dark(#fff, #1B1917); }
}