/* Preserve the photo-led recipe header; add a focused cooking reader below. */
#detailView[data-recipe-section] {
  --recipe-reader-width:800px;
  min-width:0;
}
#detailView[data-recipe-section] .hero-actions .btn {
  min-width:0;
  min-height:44px;
}

.recipe-tabs {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:20;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;
  margin:0 0 24px;
  padding:4px;
  border-radius:16px;
  background:var(--surface-2);
  background:color-mix(in srgb,var(--surface-2) 85%,transparent);
  box-shadow:inset 0 0 0 1px var(--hair);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
}
.recipe-tabs [data-recipe-section-button] {
  min-width:0;
  min-height:44px;
  padding:0 8px;
  border-radius:12px;
  color:var(--muted);
  font-size:clamp(12px,3.4vw,14px);
  font-weight:600;
  white-space:nowrap;
  transition:background-color 160ms var(--ease),color 160ms var(--ease),box-shadow 160ms var(--ease);
}
.recipe-tabs [data-recipe-section-button]:is(.is-on,.is-active,[aria-selected="true"],[aria-pressed="true"],[aria-current="page"]) {
  background:var(--glass);
  color:var(--accent);
  box-shadow:var(--sh-1),inset 0 1px 0 rgb(255 253 249 / .6);
}
#detailView[data-recipe-section="ingredients"] .recipe-extra,
#detailView[data-recipe-section="ingredients"] .recipe-guide > .method-panel,
#detailView[data-recipe-section="cook"] :is(.recipe-heading,.recipe-tabs,.ingredients-panel,.recipe-extra,.detail-back),
#detailView[data-recipe-section]:not([data-recipe-section="cook"]) .recipe-focus { display:none; }
#detailView[data-recipe-section] .recipe-guide { display:block; }
#detailView[data-recipe-section] .ingredients-panel .section-head { align-items:center; gap:12px; }
#detailView[data-recipe-section] .ingredients-panel .section-head h2 { font-size:26px; }
#detailView[data-recipe-section] .servings .icon-btn { width:44px; height:44px; min-height:44px; }
#detailView[data-recipe-section] .servings .serv-value { min-width:82px; }
.ingredients-start { display:flex; margin:16px 0 24px; }
.ingredients-start [data-cook-start],
#detailView[data-recipe-section] [data-cook-start] { min-height:44px; }
.ingredients-start [data-cook-start] { flex:1; }
.recipe-extra { display:grid; gap:28px; max-width:880px; }
.recipe-extra :is(.nutrition-method,.recipe-reference) { line-height:1.6; }
.recipe-extra :is(.nutrition-method,.recipe-reference) summary {
  display:flex;
  align-items:center;
  min-height:44px;
  padding-block:8px;
}

/* Cooking is a viewport, not a scrolling document. */
html:has(body.is-cooking),body.is-cooking { overflow:hidden; overscroll-behavior:none; }
.recipe-focus { position:fixed; inset:0 0 0 var(--side); z-index:20; display:flex; flex-direction:column; height:100vh; height:100dvh; min-width:0; background:var(--bg); overflow:hidden; }
.cook-header { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:8px; flex:none; min-height:64px; padding:calc(10px + env(safe-area-inset-top)) calc(72px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left)); background:var(--bg); }
.cook-header :is([data-cook-exit],[data-cook-steps]) { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 10px; border-radius:999px; background:var(--glass); box-shadow:0 0 0 1px var(--hair),var(--sh-1); }
.cook-header [data-cook-exit] { width:44px; padding:0; }
.cook-header-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; }
.cook-recipe-meta { min-width:0; }
.cook-recipe-name { min-width:0; margin:0; overflow:hidden; color:var(--ink-2); font:500 15px/1.25 var(--serif); text-overflow:ellipsis; white-space:nowrap; }
.cook-people { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.3; font-variant-numeric:tabular-nums; }
.cook-header [data-cook-steps] { min-width:94px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cook-header [data-cook-steps] svg { width:14px; height:14px; }
.cook-scroll { flex:1; min-width:0; min-height:0; padding:0; overflow:hidden; overscroll-behavior:none; }
.recipe-focus .method-panel { width:100%; height:100%; max-width:920px; min-height:0; margin-inline:auto; }
.recipe-focus .method-panel > :is(.section-head,.progress-track,.method-options,.method-batches,.large-yield,.reset-steps) { display:none !important; }
.recipe-focus .steps,.recipe-focus .steps.steps-count-3 { display:block; height:100%; min-height:0; }
.recipe-focus .step,.recipe-focus .step:is(.is-current,.is-done) { display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100%; min-height:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; cursor:default; transition:none; }
.recipe-focus :is(.step,.serve-card)[hidden],.step-source[hidden] { display:none !important; }
.recipe-focus .step-visual { display:flex; align-items:center; justify-content:center; container-type:size; width:100%; height:min(clamp(128px,36dvh,360px),var(--cook-banner-cap,999px)); min-height:0; border:0; border-radius:0 0 28px 28px; background:var(--plate); overflow:hidden; }
.recipe-focus .step-art { flex:none; width:min(100cqw,100cqh); max-width:100%; height:min(100cqw,100cqh); aspect-ratio:1; }
.recipe-focus .step.is-done .step-art.is-in { opacity:1; filter:none; }
.recipe-focus .step-body { display:grid; grid-template-areas:none; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) 44px; align-content:stretch; gap:12px; width:100%; min-width:0; min-height:0; padding:16px calc(20px + env(safe-area-inset-right)) 16px calc(20px + env(safe-area-inset-left)); overflow:hidden; }
.step-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0; }
.recipe-focus .step-text,.recipe-focus .step.is-done .step-text { min-width:0; margin:0; padding:0; color:var(--ink); font:500 28px/1.1 var(--serif); letter-spacing:-.018em; text-wrap:balance; }
.cook-part { flex:none; min-width:40px; padding:4px 7px; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:12px; line-height:1.5; text-align:center; font-variant-numeric:tabular-nums; }
.cook-part[hidden] { display:block !important; visibility:hidden; }
.step-page-content { display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:8px 6px; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; color:var(--ink-2); font:400 16px/1.5 var(--font); overflow-wrap:break-word; }
.step-page-copy,.step-page-note { flex-basis:100%; width:100%; margin:0; }
.step-page-note { color:var(--muted); font-size:13px; line-height:1.45; }
.cook-page-measure { position:fixed !important; top:0; left:-10000px; height:auto !important; min-height:0 !important; max-height:none !important; visibility:hidden; overflow:visible !important; pointer-events:none; }
.recipe-focus .step-page-content .step-amount { max-width:100%; padding:4px 10px 4px 4px; background:var(--surface-2); font-size:14px; line-height:1.45; }
.recipe-focus .step-page-content .step-amount.is-text { padding-left:10px; }
.recipe-focus .step-page-content .step-amount > span { min-width:0; overflow-wrap:anywhere; }
.recipe-focus .step-page-content .step-amount strong { min-width:0 !important; }
.recipe-focus .step-page-content .ia { flex:none; }
.recipe-focus .amount-scope { flex-basis:100%; width:100%; margin:0; font-size:12px; line-height:1.45; }
.step-actions { display:grid; grid-template-columns:minmax(0,1fr) 128px; grid-template-rows:44px; align-items:center; gap:8px; min-width:0; min-height:44px; }
.recipe-focus .step-controls { grid-area:auto; display:block; min-width:0; margin:0; }
.recipe-focus .step-controls:empty { display:none; }
.recipe-focus .timer-wrap { display:flex; align-items:center; gap:4px; }
.recipe-focus .timer-pill { flex:none; min-width:104px; height:44px; min-height:44px; }
.recipe-focus .timer-pill .t-label { min-width:5ch; text-align:center; }
.recipe-focus .timer-reset { flex:none; width:44px; height:44px; }
.recipe-focus .timer-reset[hidden] { display:grid !important; visibility:hidden; pointer-events:none; }
.recipe-focus .step-check { grid-area:auto; grid-column:2; grid-row:1; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:128px; height:44px; min-height:44px; max-width:100%; padding:0 8px; border:1px solid var(--accent-line); border-radius:999px; background:var(--accent-soft); color:var(--accent); transition:background-color 160ms var(--ease),color 160ms var(--ease); }
.recipe-focus .step-check-label { font-size:14px; font-weight:600; white-space:nowrap; }
.recipe-focus .step-check .step-index { display:none; }
.recipe-focus .step-check svg { position:static; flex:none; width:16px; height:16px; }
.recipe-focus .step-check svg path { stroke-dasharray:none; stroke-dashoffset:0; }
.recipe-focus .step.is-done .step-check { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.recipe-focus .step:active .step-check { transform:none; }
.recipe-focus .serve-card,.recipe-focus .steps-count-4 .serve-card { display:block; width:100%; height:100%; min-height:0; margin:0; aspect-ratio:auto; border-radius:24px; box-shadow:none; }
.recipe-focus .serve-card figcaption { left:calc(24px + env(safe-area-inset-left)); right:calc(24px + env(safe-area-inset-right)); align-items:center; flex-wrap:wrap; }
.recipe-focus .serve-card figcaption span { font-size:30px; }
.cook-dock { position:relative; inset:auto; z-index:2; flex:none; display:grid; grid-template-columns:44px repeat(2,minmax(0,1fr)); gap:8px; align-items:center; min-height:64px; padding:10px calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); border-top:1px solid var(--hair); background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1); }
.cook-dock button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; height:44px; min-height:44px; padding:0 10px; border-radius:999px; background:var(--surface); box-shadow:0 0 0 1px var(--hair); font-size:12px; font-weight:600; white-space:nowrap; transition:background-color 160ms var(--ease),color 160ms var(--ease); }
.cook-dock button[hidden] { display:none !important; }
.cook-dock button svg { flex:none; width:16px; height:16px; }
.cook-dock [data-cook-next] { background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.cook-dock button:is(:disabled,[aria-disabled="true"]) { opacity:.4; }
.cook-dock .cook-timer-shortcut { grid-column:1 / -1; justify-content:flex-start; background:var(--surface); }
.cook-timer-shortcut span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.is-cooking .app-profile { position:fixed; top:calc(10px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); z-index:40; }
body.is-cooking .toast-host { bottom:calc(80px + env(safe-area-inset-bottom)); }

/* Read-only ingredients and direct step selection reuse the existing dialog. */
#popover .recipe-sheet-list {
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.recipe-sheet-ingredient {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:12px 0;
  border-bottom:1px solid var(--hair);
}
.recipe-sheet-ingredient .ia { --ia:40px; }
.rsi-copy { display:grid; gap:3px; min-width:0; }
.rsi-name { font:500 19px/1.2 var(--serif); }
.rsi-note { color:var(--muted); font-size:13px; line-height:1.4; overflow-wrap:break-word; }
.rsi-grams { min-width:5ch; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.cook-step-row {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:60px;
  padding:10px 12px;
  border-radius:12px;
  text-align:left;
  transition:background-color 160ms var(--ease);
}
.csr-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.csr-title { min-width:0; color:var(--ink); font:500 19px/1.25 var(--serif); }
.csr-status { min-width:44px; color:var(--ok); font-size:12px; text-align:right; }
.csr-status svg,.csr-number svg { width:18px; height:18px; }
.cook-step-row.is-current { background:var(--accent-soft); }
.cook-step-row.is-current .csr-number { background:var(--accent); color:var(--accent-ink); }


.recipe-sheet-list > * { flex:none; }
.recipe-sheet-list > [hidden] { display:none !important; }
.popover[data-recipe-sheet] { background:transparent; opacity:1; transition:none; }
.popover[data-recipe-sheet]::before { content:""; position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity 180ms var(--ease); }
.popover[data-recipe-sheet].is-open::before { opacity:1; }
.popover[data-recipe-sheet] .pop-card { position:relative; z-index:1; display:flex; flex-direction:column; height:min(720px,90dvh); max-height:90dvh; padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:var(--surface); overflow:hidden; }
.popover[data-recipe-sheet] .pop-close { width:44px; height:44px; min-height:44px; }
.cook-sheet-options { display:flex; flex-wrap:wrap; gap:8px; flex:none; margin:0 0 12px; }
.cook-sheet-options .btn { min-height:44px; }
.cook-sheet-hint { margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }
.recipe-sheet-pager { flex:none; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; padding-top:12px; }
.recipe-sheet-pager button { width:44px; height:44px; border-radius:50%; background:var(--surface-2); }
.recipe-sheet-pager button:disabled { opacity:.35; }
.recipe-sheet-pager span { text-align:center; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.recipe-extra summary::after { content:""; flex:none; width:7px; height:7px; margin-left:auto; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); }
.recipe-extra details[open] > summary::after { transform:rotate(225deg); }
@media (hover:hover) {
  .recipe-tabs [data-recipe-section-button]:hover,.cook-step-row:hover { background:var(--accent-soft); color:var(--accent); }
  .cook-dock button:not([data-cook-next]):not(:disabled):hover { background:var(--surface-2); }
  .cook-dock [data-cook-next]:not(:disabled):hover { background:var(--accent-hover); }
}
@media (max-width:760px) {
  body.is-cooking { padding-bottom:0; }
  body.is-cooking .sidebar { display:none; }
  body.is-cooking .app-profile { top:calc(8px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); }
  .recipe-focus { inset-inline-start:0; }
  .cook-dock .cook-button-label { display:none; }
  .recipe-focus .step-body { padding-inline:calc(16px + env(safe-area-inset-left)) calc(16px + env(safe-area-inset-right)); }
}
@media (max-width:359px) {
  #detailView[data-recipe-section] .ingredients-panel .section-head { align-items:flex-start; flex-direction:column; }
  #detailView[data-recipe-section] .servings { align-self:flex-end; }
  .cook-header { gap:6px; padding-left:12px; padding-right:68px; }
  .cook-header [data-cook-steps] { min-width:90px; padding-inline:8px; font-size:11px; }
  .cook-recipe-name { font-size:14px; }
  .cook-dock { gap:6px; padding-inline:12px; }
  .cook-dock button { gap:4px; padding-inline:7px; font-size:12px; }
  .recipe-sheet-ingredient { grid-template-columns:36px minmax(0,1fr) auto; gap:9px; }
  .recipe-sheet-ingredient .ia { --ia:34px; }
}
@media (min-width:761px) {
  .recipe-tabs { max-width:640px; top:12px; }
  .ingredients-start [data-cook-start] { flex:0 1 auto; min-width:200px; }
  .cook-header { min-height:76px; padding:16px calc(88px + env(safe-area-inset-right)) 16px 28px; gap:12px; }
  .cook-recipe-name { font-size:20px; }
  .cook-header [data-cook-steps] { min-width:110px; font-size:13px; }
  .recipe-focus .step-visual { border-radius:24px; }
  .recipe-focus .step-text { font-size:32px; }
  .cook-dock { grid-template-columns:112px 160px 180px; justify-content:center; gap:12px; padding-inline:28px; }
  .cook-dock button { font-size:14px; }
  .cook-dock .cook-timer-shortcut { width:100%; }
  body.is-cooking .app-profile { top:16px; right:24px; }
}
@media (min-width:480px) and (max-height:500px) {
  body.is-cooking .sidebar { display:none; }
  .recipe-focus { inset-inline-start:0; }
  .cook-header { min-height:60px; padding-top:calc(8px + env(safe-area-inset-top)); padding-bottom:8px; }
  .recipe-focus .step,.recipe-focus .step:is(.is-current,.is-done) { grid-template-columns:minmax(160px,32%) minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .recipe-focus .step-visual { height:100%; padding-left:env(safe-area-inset-left); border-radius:20px; }
  .recipe-focus .step-body { padding-block:8px; gap:8px; }
  .recipe-focus .step-text { font-size:26px; }
  .cook-dock { padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); min-height:60px; }
  .cook-dock .cook-button-label { display:none; }
  .cook-dock:has(.cook-timer-shortcut:not([hidden])) { grid-template-columns:44px minmax(0,1fr) 112px 132px; }
  .cook-dock:has(.cook-timer-shortcut:not([hidden])) .cook-timer-shortcut { grid-column:2; grid-row:1; }
  .cook-dock:has(.cook-timer-shortcut:not([hidden])) [data-cook-prev] { grid-column:1; grid-row:1; }
  .cook-dock:has(.cook-timer-shortcut:not([hidden])) [data-cook-ingredients] { grid-column:3; grid-row:1; }
  .cook-dock:has(.cook-timer-shortcut:not([hidden])) [data-cook-next] { grid-column:4; grid-row:1; }
}
@media (min-width:480px) and (max-height:400px) {
  body.is-cooking .app-profile { top:calc(4px + env(safe-area-inset-top)); }
  .cook-header { min-height:52px; padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:4px; }
  .recipe-focus .step-body { padding:6px calc(12px + env(safe-area-inset-right)) 6px 12px; gap:6px; }
  .recipe-focus .step-text { font-size:24px; }
  .cook-dock { min-height:52px; padding-top:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .recipe-tabs,.cook-dock,.cook-header :is([data-cook-exit],[data-cook-steps]) { background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .recipe-tabs [aria-pressed="true"] { background:var(--accent-soft); }
}
@media (prefers-reduced-motion:reduce) {
  .recipe-tabs [data-recipe-section-button],.recipe-focus :is(.step-art,.step-check,.step-check svg path,.timer-pill,.ring-fg),.cook-dock button,.cook-step-row,.popover[data-recipe-sheet]::before { transition:none; animation:none; }
}