/* Cook mode. */

/* ---------- cook mode ---------- */
body[data-view="cook"] .topbar, body[data-view="cook"] .foot { display: none; }
body[data-view="cook"] main { padding-bottom: 0; max-width: 1180px; }
body[data-view="cook"] .timers { bottom: calc(var(--cook-foot, 120px) + 8px); }
.cook { min-height: 100dvh; display: flex; flex-direction: column; }
.cook-top {
  position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 10px 0; padding-top: max(10px, env(safe-area-inset-top)); background: var(--paper);
}
.cook-top-l, .cook-top-r { display: flex; gap: 8px; }
.cook-top-r { justify-content: flex-end; }
.cook-title { min-width: 0; max-width: 50vw; text-align: center; font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cook-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none;
}
.cook-icon:hover { border-color: var(--muted); }
.cook-icon[aria-pressed="true"] { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.cook-icon svg, .cook-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cook-main { flex: 1; display: flex; min-height: 0; overflow-x: clip; }
.cook-side { display: none; }
.cook-stage { flex: 1; min-width: 0; padding: 18px 0 24px; }
.cook-card, .cook-mise, .cook-flow { width: 100%; max-width: 40em; margin: 0 auto; }
.cook-card.from-right { animation: cook-in-r .22s ease-out; }
.cook-card.from-left { animation: cook-in-l .22s ease-out; }
@keyframes cook-in-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes cook-in-l { from { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .cook-card.from-right, .cook-card.from-left { animation: none; } }
.cook-chapter, .cook-count { margin: 0 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.cook-text { font-family: var(--text); font-size: 27px; line-height: 1.5; margin: 0 0 22px; }
.cook-text .timer-chip { font-size: .74em; }
.cook-sum { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.8; color: var(--muted); }
.cook-sum b { color: var(--ink); font-weight: 700; }
.cook-sum .is-tool { color: var(--muted); }
.cook-sum li:not(.is-tool) { color: var(--ink); }

.cook-mise h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 12px; }
.cook-mise h2 { font-size: 15px; color: var(--muted); margin: 22px 0 2px; }
.cook-mise .ing-head { margin: 22px 0 2px; }
.mise-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 14px; }
.cook-mise .ing-row { cursor: pointer; }

.cook-foot {
  position: sticky; bottom: 0; z-index: 6; background: var(--paper);
  padding: 10px 0; padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.cook-bar { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.cb-group { min-width: 0; }
.cb-mise { flex: 0 0 18px; }
.cb-pills { display: flex; gap: 3px; }
.cb-pill { flex: 1; min-width: 0; height: 18px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.cb-mise .cb-pill { width: 100%; }
.cb-pill::before { content: ""; width: 100%; height: 6px; border-radius: 3px; background: var(--line); }
.cb-pill.is-done::before { background: var(--strong); }
.cb-pill.is-now::before { background: var(--accent); }
.cb-label { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-label.is-now { color: var(--ink); font-weight: 600; }
.cook-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cook-where { font-weight: 600; font-size: 15px; }
.cook-arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.cook-arrow.is-hidden { visibility: hidden; }
.cook-arrow.is-primary { background: var(--strong); color: var(--on-strong); border-color: var(--strong); }
.cook-arrow span { display: none; }

/* scroll mode: a wheel of steps that snaps the one in the middle into place.
   Steps taller than the screen scroll freely until their edge. Only opacity
   and scale change, so no step changes height while you scroll. */
html:has(.cook[data-mode="scroll"]) {
  scroll-snap-type: y mandatory;
  scroll-padding: var(--cook-top, 60px) 0 var(--cook-foot, 80px);
}
.cook-flow { list-style: none; padding: 30dvh 0 50dvh; }
.cf-step {
  scroll-snap-align: center; padding: 18px 0; cursor: pointer;
  opacity: .32; transform: scale(.94); transform-origin: left center; transition: opacity .25s, transform .25s;
}
.cf-step.is-now { opacity: 1; transform: none; cursor: auto; }
.cf-step .cook-text { font-size: 24px; margin-bottom: 16px; }
.cf-chapter { font-size: 13px; font-weight: 600; color: var(--muted); padding: 22px 0 0; }
@media (prefers-reduced-motion: reduce) { .cf-step { transition: none; } }

@media (min-width: 900px) {
  body[data-view="cook"] main { max-width: 1560px; padding: 0 32px; }
  .cook-main { gap: 48px; }
  .cook[data-mode="steps"] .cook-stage { display: flex; flex-direction: column; justify-content: center; padding-bottom: 48px; }
  .cook[data-mode="steps"].is-mise .cook-stage { justify-content: flex-start; }
  .cook-card { max-width: 960px; }
  .cook:not(.is-mise) .cook-side, .cook[data-mode="scroll"] .cook-side {
    display: block; flex: 0 0 280px; align-self: flex-start; position: sticky; top: 72px;
    max-height: calc(100dvh - 72px - var(--cook-foot, 120px)); overflow: auto;
    padding: 22px 24px 22px 0; border-right: 1px solid var(--line); font-size: 15px;
  }
  .cook-side h2 { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
  .cook-side h2 + ul { margin-bottom: 20px; }
  .cook-side ul { list-style: none; margin: 0; padding: 0; }
  .cook-side li { padding: 4px 8px; margin: 0 -8px; border-radius: 6px; }
  .cook-side li.is-used { color: var(--muted); text-decoration: line-through; opacity: .6; }
  .cook-side li.is-now { background: var(--mark); }
  .cook-side b { font-weight: 700; }
  .cook-stage { padding-top: 22px; }
  .cook-text { font-size: clamp(34px, 1.2vw + 1.4vh + 10px, 52px); }
  .cook-sum { font-size: 18px; }
  .cf-step .cook-text { font-size: clamp(28px, 1vw + 1vh + 10px, 40px); }
  .cook-foot { border-top: 1px solid var(--line); }
  .cook-nav { position: relative; }
  .cook-arrow { width: auto; height: 44px; border-radius: 999px; padding: 0 18px; display: inline-flex; gap: 8px; font-weight: 600; font-size: 15px; }
  .cook-arrow span { display: inline; }
}