.cook-mode-body {
    background: var(--color-bg);
}

/* Fixed to the viewport rather than min-height so the page itself never
   scrolls — the stage (current step) and the ingredients panel each scroll
   internally instead when their own content is too tall (see below).
   overflow-y: auto stays as a fallback so content is never silently
   clipped if something unexpected ever overflows here; position: sticky
   on .cook-mode--nav then resolves correctly against this element's own
   scrollport instead of the viewport in that fallback case. */
.cook-mode {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.cook-mode--header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.cook-mode--exit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent-strong);
    text-decoration: none;
}

.cook-mode--exit:hover {
    background: var(--color-accent-soft);
}

.cook-mode--title {
    margin: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-accent-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cook-mode--wakelock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-border-strong);
}

.cook-mode--wakelock.is-active {
    color: var(--color-accent);
}

.cook-mode--wakelock.is-unsupported {
    opacity: 0.35;
}

.cook-mode--progress {
    margin-bottom: 1.75rem;
    flex-shrink: 0;
}

.cook-mode--progress-track {
    height: 6px;
    border-radius: 3px;
    background: var(--color-accent-soft);
    overflow: hidden;
    margin-bottom: 8px;
}

.cook-mode--progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-accent);
    transition: width 0.25s ease-in-out;
}

.cook-mode--progress-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* min-height: 0 lets this flex item shrink below its content's natural size
   (the flex default is content-based auto, which would otherwise refuse to
   shrink and blow out .cook-mode's fixed height) so a long step's text
   scrolls within its own bounded area instead of overflowing the page. */
.cook-mode--stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    min-height: 0;
    overflow-y: auto;
}

.cook-mode--steps {
    width: 100%;
}

.cook-mode--step {
    width: 100%;
    text-align: left;
}

.cook-mode--step-text {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(1.3rem, 4vw + 1rem, 1.9rem);
    line-height: 1.45;
    color: var(--color-text);
    margin: 0 0 1.25rem;
}

.cook-mode--step-number {
    font-family: var(--font-mono);
    color: var(--color-accent);
}

.cook-mode--timer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

.cook-mode--timer-chip.is-running {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.cook-mode--timer-chip.is-done {
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
}

.cook-mode--preview summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-muted);
}

.cook-mode--preview summary::-webkit-details-marker {
    display: none;
}

.cook-mode--preview-list {
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text-muted);
}

.cook-mode--preview-list p {
    margin: 0;
}

.cook-mode--ingredients {
    position: relative;
    background: var(--color-surface);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.cook-mode--ingredients-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-accent-strong);
}

.cook-mode--ingredients-chevron {
    display: inline-flex;
    transition: transform 0.2s ease-in-out;
}

.cook-mode--ingredients.is-open .cook-mode--ingredients-chevron {
    transform: rotate(180deg);
}

/* Positioned absolutely (anchored to .cook-mode--ingredients, its nearest
   positioned ancestor) and opening upward via `bottom: 100%`, rather than
   sitting inline below the toggle — so expanding it never changes the
   height of .cook-mode--ingredients itself, which would otherwise shrink
   .cook-mode--stage (its flex:1 sibling) and shift the step text/nav
   around every time it opens or closes.
   Fixed target height (rather than the content's natural scrollHeight) so
   this animates with a plain CSS transition — no JS measurement needed.
   Ingredient lists longer than this scroll within the panel instead of
   growing it. */
.cook-mode--ingredients-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 8px;
    background: var(--color-surface);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.25s ease-in-out;
    z-index: 5;
}

.cook-mode--ingredients.is-open .cook-mode--ingredients-content {
    max-height: min(45vh, 360px);
}

.cook-mode--ingredients-list {
    list-style: none;
    margin: 0;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cook-mode--ingredients-list li {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
}

.cook-mode--ingredient-amount {
    font-family: var(--font-mono);
    color: var(--color-accent);
    margin-right: 6px;
}

.cook-mode--nav {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding-top: 0.5rem;
    background: var(--color-bg);
    flex-shrink: 0;
}

.cook-mode--prev {
    flex: 1;
    justify-content: center;
    padding: 14px 16px;
}

.cook-mode--next,
.cook-mode--finish {
    flex: 2;
    justify-content: center;
    padding: 16px 20px;
    font-size: 14px;
}

/* .btn already sets display: inline-flex, which ties in specificity with the
   browser's own [hidden] rule — without these, toggling `hidden` here would
   silently do nothing (same gotcha as the mobile nav drawer). */
.cook-mode--next[hidden] {
    display: none;
}

.cook-mode--finish-form {
    display: contents;
}

.cook-mode--finish-form[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .cook-mode {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
}