/* Cook mode, timers, servings scaler, shopping list. Mobile first. */
.kk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin: -1rem 0 2rem; }
.kk-tools--serv { margin: 0 0 1.5rem; }
.kk-serv, .kk-units { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.kk-serv__n { min-width: 6.5rem; text-align: center; font-size: .95rem; }
.kk-serv__n b { font: 1.5rem/1 var(--serif, Georgia); }
.recipe .recipe__btn.kk-round { min-width: 2.75rem; width: 2.75rem; padding: 0; }
.kk-units .recipe__btn[aria-pressed="true"] { background: var(--pill-c, var(--rc-ink, #3f291e)); color: var(--rc-bg, #f8f6ed); }
@media (max-width: 799px) { .recipe .recipe__btn { min-height: 2.75rem; } }

/* Timer chips inside the method */
.kk-chip { display: inline; padding: .05em .55em; margin: 0 .1em; border: 1px solid var(--rose, #b18582); border-radius: 999px; background: var(--blush, #e8d0d0); color: var(--burgundy, #5c2a29); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.kk-chip::before { content: "⏱ "; }
.kk-chip:hover, .kk-chip:focus-visible { background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }

/* Timers bar */
.kk-timers { position: fixed; z-index: 90; left: .75rem; right: .75rem; bottom: 1rem; display: grid; gap: .5rem; max-width: 30rem; margin-inline: auto; }
.kk-timers[hidden] { display: none; }
.kk-timer { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem .55rem 1rem; border-radius: 999px; background: var(--chocolate, #3f291e); color: var(--cream, #f8f6ed); box-shadow: 0 8px 24px rgba(40, 24, 17, .35); }
.kk-timer__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.kk-timer__time { font: 1.4rem/1 var(--serif, Georgia); font-variant-numeric: tabular-nums; }
.kk-timer button { min-width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: rgba(248, 246, 237, .16); color: inherit; font: 600 .8rem/1 var(--sans, Arial); cursor: pointer; }
.kk-timer button:hover, .kk-timer button:focus-visible { background: var(--cream, #f8f6ed); color: var(--chocolate, #3f291e); }
.kk-timer.is-done { background: var(--burgundy, #5c2a29); animation: kk-pulse 1s ease-in-out infinite alternate; }
@keyframes kk-pulse { to { box-shadow: 0 0 0 6px rgba(177, 133, 130, .45); } }
@media (prefers-reduced-motion: reduce) { .kk-timer.is-done { animation: none; } }
.has-timers .kk-listfab { bottom: 5.25rem; }
.has-timers .kk-cook { padding-bottom: 5rem; }

/* Shopping list */
.kk-listfab { position: fixed; z-index: 60; left: .75rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); box-shadow: 0 8px 22px rgba(40, 24, 17, .3); font: 600 .78rem/1 var(--sans, Arial); letter-spacing: .06em; cursor: pointer; }
.kk-listfab[hidden] { display: none; }
.kk-listfab__n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: var(--cream, #f8f6ed); color: var(--burgundy, #5c2a29); }
.kk-list { width: min(34rem, 100vw); max-height: 100dvh; margin: 0 auto 0 0; padding: 0; border: 0; background: var(--cream, #f8f6ed); color: var(--chocolate, #3f291e); }
.kk-list[open] { display: flex; flex-direction: column; height: 100dvh; }
.kk-list::backdrop { background: rgba(40, 24, 17, .55); }
.kk-list__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(63, 41, 30, .2); }
.kk-list__head h2 { margin: 0; font-size: 1.9rem; }
.kk-list__x { width: 2.75rem; height: 2.75rem; border: 0; background: none; font: 300 2rem/1 var(--sans, Arial); cursor: pointer; color: inherit; }
.kk-list__body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.kk-list__recipe { margin-bottom: 1.75rem; }
.kk-list__recipe header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.kk-list__recipe h3 { margin: 0; font-size: 1.4rem; }
.kk-list__recipe h3 a { color: inherit; }
.kk-list__recipe header button { border: 0; background: none; color: var(--burgundy, #5c2a29); font: 600 .72rem/1 var(--sans, Arial); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: .5rem 0; }
.kk-list__recipe ul { list-style: none; margin: 0; padding: 0; }
.kk-list__recipe li { border-bottom: 1px solid rgba(63, 41, 30, .12); }
.kk-list__recipe label { display: flex; gap: .7rem; align-items: baseline; padding: .65rem 0; cursor: pointer; }
.kk-list__recipe input { width: 1.15rem; height: 1.15rem; accent-color: var(--burgundy, #5c2a29); flex: none; transform: translateY(.15rem); }
.kk-list__recipe input:checked + span { text-decoration: line-through; opacity: .5; }
.kk-list__empty { text-align: center; opacity: .8; padding-top: 2rem; }
.kk-list__foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(63, 41, 30, .2); }
.kk-list__foot button { flex: 1 1 auto; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--chocolate, #3f291e); border-radius: 999px; background: transparent; color: inherit; font: 600 .72rem/1 var(--sans, Arial); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.kk-list__foot button[hidden] { display: none; }
.kk-list__foot button:hover, .kk-list__foot button:focus-visible { background: var(--chocolate, #3f291e); color: var(--cream, #f8f6ed); }

/* Cook mode (full screen, one step at a time) */
.kk-cook { --kk-cook-scale: 1; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream, #f8f6ed); color: var(--chocolate, #3f291e); }
.kk-cook[open] { display: flex; flex-direction: column; }
.kk-cook::backdrop { background: transparent; }
.kk-cook__top { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-bottom: 1px solid rgba(63, 41, 30, .2); }
.kk-cook__x { flex: none; width: 2.9rem; height: 2.9rem; border: 0; background: none; font: 300 2.2rem/1 var(--sans, Arial); color: inherit; cursor: pointer; }
.kk-cook__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 1.15rem/1.2 var(--serif, Georgia); }
.kk-cook__tools { display: flex; gap: .35rem; }
.kk-cook__tools button, .kk-cook__nav button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 600 .78rem/1 var(--sans, Arial); letter-spacing: .06em; cursor: pointer; }
.kk-cook__dots { display: flex; gap: .3rem; padding: .7rem 1rem 0; }
.kk-cook__dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(63, 41, 30, .15); }
.kk-cook__dots i.is-past { background: var(--rose, #b18582); }
.kk-cook__dots i.is-on { background: var(--burgundy, #5c2a29); }
.kk-cook__step { flex: 1; display: grid; align-content: center; gap: 1rem; padding: 1.25rem; overflow-y: auto; outline: none; }
.kk-cook__count { margin: 0; font: 600 .78rem/1 var(--sans, Arial); letter-spacing: .16em; text-transform: uppercase; color: var(--burgundy, #5c2a29); }
.kk-cook__text { margin: 0; font: calc(1.7rem * var(--kk-cook-scale)) / 1.28 var(--serif, Georgia); }
.kk-cook .kk-chip { font-size: .8em; padding: .1em .6em; }
.kk-cook__nav { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; padding: .75rem .75rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(63, 41, 30, .2); }
.kk-cook__nav button { min-height: 3.5rem; font-size: .9rem; }
.kk-cook__nav [data-cook="next"] { background: var(--burgundy, #5c2a29); border-color: var(--burgundy, #5c2a29); color: var(--cream, #f8f6ed); }
.kk-cook__nav button:disabled { opacity: .35; cursor: default; }
.kk-cook__ings { position: absolute; inset: 4rem 0 0; z-index: 2; overflow-y: auto; padding: 1.25rem; background: var(--beige, #eadfcf); }
.kk-cook__ings[hidden] { display: none; }
.kk-cook__ings h3 { margin: 0 0 .75rem; font-size: 1.6rem; }
.kk-cook__ings ul { list-style: none; margin: 0; padding: 0; }
.kk-cook__ings label { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid rgba(63, 41, 30, .15); cursor: pointer; }
.kk-cook__ings input:checked + span { text-decoration: line-through; opacity: .5; }
@media (min-width: 800px) { .kk-cook__step { max-width: 52rem; width: 100%; margin-inline: auto; } .kk-cook__text { font-size: calc(2.4rem * var(--kk-cook-scale)); } .kk-cook__nav { max-width: 40rem; width: 100%; margin-inline: auto; } }