/* Recipe Soundtracks — a kitchen tape, not a generic music widget. */

html.legendary .kitchen-tape-card {
    --tape-ink: #0d0c0b;
    --tape-paper: #f0e4cf;
    --tape-orange: #f05b35;
    --tape-brass: #d8a84e;
    --tape-teal: #4eb5a7;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) auto;
    gap: 1.35rem;
    align-items: center;
    margin: 1rem 0 2.25rem;
    padding: 1rem 1.15rem;
    color: var(--tape-ink);
    background: var(--tape-paper);
    border: 1px solid rgba(13, 12, 11, .26);
    border-radius: .7rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
}

html.legendary .kitchen-tape-card__reel {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: .45rem;
    height: 72px;
    padding: .65rem;
    border: 2px solid var(--tape-ink);
    border-radius: .6rem .6rem 1.05rem 1.05rem;
    background: #e6d6b9;
}

html.legendary .kitchen-tape-card__spool {
    aspect-ratio: 1;
    border: 7px dotted var(--tape-ink);
    border-radius: 50%;
    background: var(--tape-paper);
}

html.legendary .kitchen-tape-card__window {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 28px;
    padding: 4px;
    overflow: hidden;
    background: var(--tape-ink);
    border-radius: 999px;
}

html.legendary .kitchen-tape-card__window i {
    display: block;
    width: 3px;
    height: 55%;
    background: var(--tape-orange);
    border-radius: 3px;
    animation: kitchen-tape-level 1.15s ease-in-out infinite alternate;
}
html.legendary .kitchen-tape-card__window i:nth-child(2) { height: 88%; animation-delay: -.3s; }
html.legendary .kitchen-tape-card__window i:nth-child(3) { height: 68%; animation-delay: -.6s; }
html.legendary .kitchen-tape-card__window i:nth-child(4) { height: 100%; animation-delay: -.45s; }
html.legendary .kitchen-tape-card__window i:nth-child(5) { height: 42%; animation-delay: -.15s; }

@keyframes kitchen-tape-level { to { height: 25%; } }

html.legendary .kitchen-tape-card__copy { min-width: 0; }
html.legendary .kitchen-tape-card__kicker,
html.legendary .kitchen-tape-dialog__kicker {
    display: block;
    margin-bottom: .2rem;
    color: #8b321d;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
html.legendary .kitchen-tape-card h2 {
    margin: 0;
    color: var(--tape-ink);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    line-height: 1.08;
}
html.legendary .kitchen-tape-card p {
    margin: .3rem 0 .7rem;
    color: #4b4137;
    font-size: .9rem;
    line-height: 1.4;
}

html.legendary .kitchen-tape-card__phases,
html.legendary .kitchen-tape-program__timeline {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border-radius: 999px;
}
html.legendary .kitchen-tape-card__phases span {
    flex: 1 1 var(--phase-share);
    min-width: max-content;
    padding: .28rem .52rem;
    color: #fff;
    background: var(--tape-ink);
    border-right: 1px solid rgba(255,255,255,.3);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
html.legendary .kitchen-tape-card__phases span:nth-child(2) { background: #60402f; }
html.legendary .kitchen-tape-card__phases span:nth-child(3) { background: #19786c; }
html.legendary .kitchen-tape-card__phases span:nth-child(4) { background: #a63e24; }
html.legendary .kitchen-tape-card__phases b { font-weight: 500; opacity: .72; }

html.legendary .kitchen-tape-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 190px;
    padding: .85rem 1rem;
    color: #fff;
    background: var(--tape-ink);
    border: 1px solid var(--tape-ink);
    border-radius: .45rem;
    font: 750 .88rem/1 var(--font-body);
    cursor: pointer;
}
html.legendary .kitchen-tape-card__cta:hover,
html.legendary .kitchen-tape-card__cta:focus-visible { background: #a63e24; border-color: #a63e24; }
html.legendary .kitchen-tape-card__share {
    grid-column: 3;
    justify-self: end;
    margin-top: -.75rem;
    color: #6f2a19;
    font: 750 .72rem/1 var(--font-mono);
    text-decoration-thickness: 1px;
    text-underline-offset: .18rem;
}
html.legendary .kitchen-tape-card__share:hover,
html.legendary .kitchen-tape-card__share:focus-visible { color: #171310; }

html.legendary .kitchen-tape-dialog {
    width: min(1060px, calc(100vw - 2rem));
    max-height: min(880px, calc(100svh - 2rem));
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #171310;
    background: #f0e4cf;
    border: 1px solid rgba(240, 228, 207, .35);
    border-radius: .9rem;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
}
html.legendary .kitchen-tape-dialog::backdrop { background: rgba(5, 4, 3, .82); backdrop-filter: blur(8px); }
html.legendary .kitchen-tape-dialog__shell { max-height: inherit; overflow: auto; }

html.legendary .kitchen-tape-dialog__head {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem 1.1rem;
    color: #f4eadb;
    background: #15120f;
    border-bottom: 4px solid #f05b35;
}
html.legendary .kitchen-tape-dialog__head h2 {
    margin: 0;
    color: #fff7ea;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1;
}
html.legendary .kitchen-tape-dialog__head p { margin: .35rem 0 0; color: #cbbfac; }
html.legendary .kitchen-tape-dialog__head .kitchen-tape-dialog__kicker { color: #ff8b6d; }
html.legendary .kitchen-tape-dialog__close {
    width: 42px;
    height: 42px;
    color: #fff7ea;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
html.legendary .kitchen-tape-dialog__close:hover,
html.legendary .kitchen-tape-dialog__close:focus-visible { border-color: #ff8b6d; color: #ff8b6d; }

html.legendary .kitchen-tape-dialog__layout {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.45fr);
    min-height: 500px;
}
html.legendary .kitchen-tape-controls {
    display: grid;
    align-content: start;
    gap: .85rem;
    padding: 1.35rem;
    background: #dfccaa;
    border-right: 1px solid rgba(13, 12, 11, .2);
}
html.legendary .kitchen-tape-controls__lead span {
    color: #8b321d;
    font: 800 .67rem/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
html.legendary .kitchen-tape-controls__lead strong {
    display: block;
    margin: .3rem 0;
    font: 700 1.35rem/1.1 var(--font-display);
}
html.legendary .kitchen-tape-controls__lead p,
html.legendary .kitchen-tape-controls__guest {
    margin: .35rem 0 0;
    color: #534739;
    font-size: .78rem;
    line-height: 1.45;
}
html.legendary .kitchen-tape-controls__guest a { color: #7e2c18; font-weight: 750; }
html.legendary .kitchen-tape-controls label {
    display: grid;
    gap: .3rem;
    color: #514437;
    font: 750 .7rem/1 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
html.legendary .kitchen-tape-controls select {
    width: 100%;
    padding: .66rem .7rem;
    color: #15120f;
    background: #f7eddb;
    border: 1px solid rgba(13, 12, 11, .28);
    border-radius: .35rem;
    font: 650 .86rem/1.2 var(--font-body);
    text-transform: none;
}
html.legendary .kitchen-tape-controls__save {
    padding: .72rem;
    color: #fff;
    background: #8b321d;
    border: 0;
    border-radius: .35rem;
    font-weight: 750;
    cursor: pointer;
}
html.legendary .kitchen-tape-controls__save[disabled] { opacity: .55; cursor: wait; }
html.legendary .kitchen-tape-controls__status { min-height: 1.15rem; margin: 0; color: #6c2918; font-size: .78rem; }

html.legendary .kitchen-tape-program { min-width: 0; padding: 1.35rem 1.5rem 1.75rem; background: #f4ead9; }
html.legendary .kitchen-tape-program__timeline {
    position: sticky;
    z-index: 2;
    top: 100px;
    margin-bottom: 1.1rem;
    color: white;
    background: #15120f;
    box-shadow: 0 6px 20px rgba(13,12,11,.15);
}
html.legendary .kitchen-tape-program__timeline span {
    flex: 1 1 var(--phase-share);
    display: flex;
    justify-content: space-between;
    gap: .35rem;
    min-width: 74px;
    padding: .55rem .7rem;
    border-right: 1px solid rgba(255,255,255,.25);
    font: 700 .67rem/1 var(--font-mono);
    text-transform: uppercase;
}
html.legendary .kitchen-tape-program__timeline .is-cook { background: #60402f; }
html.legendary .kitchen-tape-program__timeline .is-plate { background: #19786c; }
html.legendary .kitchen-tape-program__timeline .is-reset { background: #a63e24; }
html.legendary .kitchen-tape-program__timeline small { opacity: .7; font-size: inherit; }

html.legendary .kitchen-tape-program__tracks { margin: 0; padding: 0; list-style: none; counter-reset: tape-track; }
html.legendary .kitchen-tape-program__tracks li {
    position: relative;
    counter-increment: tape-track;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .68rem .2rem .68rem 2.6rem;
    color: #181410;
    border-bottom: 1px solid rgba(13,12,11,.15);
}
html.legendary .kitchen-tape-program__tracks li::before {
    content: counter(tape-track, decimal-leading-zero);
    position: absolute;
    top: .82rem;
    left: .2rem;
    color: #8b321d;
    font: 750 .66rem/1 var(--font-mono);
}
html.legendary .kitchen-tape-program__tracks li > div { display: grid; gap: .12rem; min-width: 0; }
html.legendary .kitchen-tape-program__tracks strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
html.legendary .kitchen-tape-program__tracks li span:not(.kitchen-tape-program__phase) { color: #66594a; font-size: .75rem; }
html.legendary .kitchen-tape-program__tracks time { color: #66594a; font: .7rem/1 var(--font-mono); }
html.legendary .kitchen-tape-program__phase {
    grid-column: 1 / -1;
    margin: .3rem 0 -.15rem;
    color: #8b321d;
    font: 800 .62rem/1 var(--font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}

html.legendary .kitchen-tape-dialog__foot {
    padding: 1rem 1.5rem 1.25rem;
    color: #cfc1ae;
    background: #15120f;
}
html.legendary .kitchen-tape-dialog__playback-head {
    display: grid;
    gap: .25rem;
    margin-bottom: .8rem;
}
html.legendary .kitchen-tape-dialog__playback-head strong {
    color: #fff7ea;
    font: 700 1.05rem/1.2 var(--font-display);
}
html.legendary .kitchen-tape-dialog__playback-head span {
    max-width: 72ch;
    color: #cfc1ae;
    font-size: .78rem;
    line-height: 1.45;
}
html.legendary .kitchen-tape-dialog__provider-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
html.legendary .kitchen-tape-spotify { margin: 0 0 1rem; overflow: hidden; border-radius: 14px; background: #121212; }
html.legendary .kitchen-tape-spotify iframe { display: block; width: 100%; height: 352px; border: 0; }
html.legendary .kitchen-tape-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .72rem .9rem;
    color: #0d0c0b;
    background: #f4ead9;
    border: 1px solid transparent;
    border-radius: .35rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}
html.legendary .kitchen-tape-provider--spotify { color: #041a0b; background: #1ed760; }
html.legendary .kitchen-tape-provider--apple { color: #fff; background: #e84c62; }
html.legendary .kitchen-tape-provider--quiet { color: #f4ead9; background: transparent; border-color: rgba(244,234,217,.28); }
html.legendary .kitchen-tape-provider[disabled] { opacity: .68; cursor: wait; transform: none; filter: none; }
html.legendary .kitchen-tape-provider:hover,
html.legendary .kitchen-tape-provider:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }
html.legendary .kitchen-tape-dialog__foot > p { margin: .7rem 0 0; font-size: .72rem; line-height: 1.4; }

html.legendary .cook-stage__soundtrack {
    appearance: none;
    color: #f2e8d8;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d8a84e;
    padding: .22rem .1rem;
    font: 700 .7rem/1 var(--font-mono);
    cursor: pointer;
}
html.legendary .cook-stage__soundtrack:hover,
html.legendary .cook-stage__soundtrack:focus-visible { color: #ff8b6d; border-color: #ff8b6d; }

@media (max-width: 820px) {
    html.legendary .kitchen-tape-card { grid-template-columns: 110px minmax(0,1fr); }
    html.legendary .kitchen-tape-card__cta { grid-column: 1 / -1; width: 100%; }
    html.legendary .kitchen-tape-card__share { grid-column: 1 / -1; justify-self: start; margin-top: -.5rem; }
    html.legendary .kitchen-tape-dialog__layout { grid-template-columns: 1fr; }
    html.legendary .kitchen-tape-controls { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid rgba(13,12,11,.2); }
    html.legendary .kitchen-tape-controls__lead,
    html.legendary .kitchen-tape-controls__save,
    html.legendary .kitchen-tape-controls__guest,
    html.legendary .kitchen-tape-controls__status { grid-column: 1 / -1; }
    html.legendary .kitchen-tape-program__timeline { top: 96px; }
}

@media (max-width: 540px) {
    html.legendary .kitchen-tape-spotify { position: sticky; top: 0; z-index: 2; margin-inline: -.1rem; }
    html.legendary .kitchen-tape-spotify iframe { height: 152px; }
    html.legendary .kitchen-tape-card { grid-template-columns: 1fr; margin-inline: 0; padding: .9rem; }
    html.legendary .kitchen-tape-card__reel { display: none; }
    html.legendary .kitchen-tape-card__phases { border-radius: .35rem; }
    html.legendary .kitchen-tape-card__phases span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-inline: .35rem; }
    html.legendary .kitchen-tape-dialog { width: 100vw; max-height: 100svh; border: 0; border-radius: 0; }
    html.legendary .kitchen-tape-dialog__head { padding: 1rem; }
    html.legendary .kitchen-tape-dialog__layout { min-height: 0; }
    html.legendary .kitchen-tape-controls { grid-template-columns: 1fr; padding: 1rem; }
    html.legendary .kitchen-tape-controls > * { grid-column: 1 !important; }
    html.legendary .kitchen-tape-program { padding: 1rem; }
    html.legendary .kitchen-tape-program__timeline { position: static; border-radius: .35rem; }
    html.legendary .kitchen-tape-program__timeline span { min-width: 0; padding: .48rem .4rem; }
    html.legendary .kitchen-tape-program__timeline small { display: none; }
    html.legendary .kitchen-tape-dialog__foot { padding: 1rem; }
    html.legendary .kitchen-tape-provider { width: 100%; }
}

@media (min-width: 541px) and (max-width: 900px) {
    html.legendary .kitchen-tape-spotify iframe { height: 232px; }
}

@media (prefers-reduced-motion: reduce) {
    html.legendary .kitchen-tape-card__window i { animation: none; }
    html.legendary .kitchen-tape-provider { transition: none; }
}