/* The shared empty state (static/js/empty-state.js), desktop and phone.
 *
 * The palette is a handful of --es-* tokens picked per theme: light, dark,
 * a page colour (--pc-*, app-colors.js / mobile-page-colors.js) and Glass.
 * A host that sits on its own surface (the TV screen) can set the same
 * tokens on .nst-es from its own sheet.
 *
 * Every rule is doubled on the class and marked important: the phone's
 * blanket sweeps ([data-theme=light] * * * painting leaves black, the global
 * button restyles, [class*=...] sweeps) would win otherwise.
 */

.nst-es {
    --es-ink: #111114;
    --es-dim: rgba(17, 17, 20, 0.58);
    --es-soft: rgba(17, 17, 20, 0.045);
    --es-line: rgba(17, 17, 20, 0.09);
    --es-btn: #111114;
    --es-on-btn: #ffffff;
    --es-glow: rgba(17, 17, 20, 0.07);
    --es-fun-a: #ff6a3d;
    --es-fun-b: #7c5cff;
}
[data-theme="dark"] .nst-es {
    --es-ink: #f5f5f7;
    --es-dim: rgba(245, 245, 247, 0.6);
    --es-soft: rgba(255, 255, 255, 0.06);
    --es-line: rgba(255, 255, 255, 0.12);
    --es-btn: #f5f5f7;
    --es-on-btn: #111114;
    --es-glow: rgba(255, 255, 255, 0.08);
}
[data-page-color] .nst-es {
    --es-ink: var(--pc-ink);
    --es-dim: var(--pc-dim);
    --es-soft: var(--pc-soft);
    --es-line: var(--pc-line);
    --es-btn: var(--pc-btn, var(--pc-ink));
    --es-on-btn: var(--pc-on-btn, var(--pc-page, #ffffff));
    --es-glow: var(--pc-soft);
}
html[data-appearance="glass"] .nst-es {
    --es-ink: #ffffff;
    --es-dim: rgba(255, 255, 255, 0.7);
    --es-soft: rgba(255, 255, 255, 0.1);
    --es-line: rgba(255, 255, 255, 0.2);
    --es-btn: #ffffff;
    --es-on-btn: #111114;
    --es-glow: rgba(255, 255, 255, 0.12);
}

html body .nst-es.nst-es {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 40px 20px 44px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    color: var(--es-ink) !important;
    -webkit-text-fill-color: var(--es-ink) !important;
    font-family: inherit !important;
}
html body .nst-es.nst-es * {
    box-sizing: border-box !important;
    font-family: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
html body .nst-es.nst-es [hidden] { display: none !important; }

/* The picture: a big soft tile with the line icon in it. */
html body .nst-es.nst-es .nst-es__art {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 96px !important;
    height: 96px !important;
    margin: 0 0 22px !important;
    border-radius: 30px !important;
    background: var(--es-soft) !important;
    border: 1px solid var(--es-line) !important;
    box-shadow: 0 18px 44px var(--es-glow) !important;
    color: var(--es-ink) !important;
}
html body .nst-es.nst-es .nst-es__halo { display: none !important; }
html body .nst-es.nst-es .nst-es__icon {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    flex: none !important;
    color: var(--es-ink) !important;
}
html body .nst-es.nst-es svg [fill="none"] { fill: none !important; }
html body .nst-es.nst-es svg [stroke="currentColor"] { stroke: currentColor !important; }

html body .nst-es.nst-es .nst-es__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--es-ink) !important;
    -webkit-text-fill-color: var(--es-ink) !important;
}
html body .nst-es.nst-es .nst-es__body {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 360px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: var(--es-dim) !important;
    -webkit-text-fill-color: var(--es-dim) !important;
}

html body .nst-es.nst-es .nst-es__acts {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 22px 0 0 !important;
}
html body .nst-es.nst-es .nst-es__btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    border: 1px solid var(--es-btn) !important;
    background: var(--es-btn) !important;
    color: var(--es-on-btn) !important;
    -webkit-text-fill-color: var(--es-on-btn) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    cursor: pointer !important;
    transition: transform 140ms ease, opacity 140ms ease !important;
}
html body .nst-es.nst-es .nst-es__btn:hover { opacity: 0.88 !important; }
html body .nst-es.nst-es .nst-es__btn:active { transform: scale(0.97) !important; }
html body .nst-es.nst-es .nst-es__btn[disabled] { opacity: 0.6 !important; cursor: default !important; }
html body .nst-es.nst-es .nst-es__btn[hidden] { display: none !important; }
html body .nst-es.nst-es .nst-es__btn svg { width: 16px !important; height: 16px !important; flex: none !important; display: block !important; }
html body .nst-es.nst-es .nst-es__btn * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html body .nst-es.nst-es .nst-es__btn--notify {
    background: transparent !important;
    border-color: var(--es-line) !important;
    color: var(--es-ink) !important;
    -webkit-text-fill-color: var(--es-ink) !important;
}
html body .nst-es.nst-es .nst-es__btn--notify.is-on { border-color: transparent !important; color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }
html body .nst-es.nst-es .nst-es__btn--link {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--es-dim) !important;
    -webkit-text-fill-color: var(--es-dim) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Guests: the same shape with some play -- a warm gradient halo that
   breathes behind the picture. */
html body .nst-es.nst-es--guest .nst-es__art {
    border-radius: 999px !important;
    background: var(--es-soft) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
html body .nst-es.nst-es--guest .nst-es__halo {
    display: block !important;
    position: absolute !important;
    inset: -10px !important;
    border-radius: 999px !important;
    background: conic-gradient(from 200deg, var(--es-fun-a), var(--es-fun-b), var(--es-fun-a)) !important;
    opacity: 0.22 !important;
    filter: blur(10px) !important;
    animation: nst-es-breathe 3.6s ease-in-out infinite !important;
    z-index: -1 !important;
}
html body .nst-es.nst-es--guest .nst-es__art { isolation: isolate !important; }
html body .nst-es.nst-es--guest .nst-es__icon { animation: nst-es-bob 3.6s ease-in-out infinite !important; }
@keyframes nst-es-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.18; } 50% { transform: scale(1.06); opacity: 0.3; } }
@keyframes nst-es-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    html body .nst-es.nst-es .nst-es__halo, html body .nst-es.nst-es .nst-es__icon { animation: none !important; }
}

/* Inside a dashboard card or a narrow rail. */
html body .nst-es.nst-es--compact { padding: 22px 12px 24px !important; }
html body .nst-es.nst-es--compact .nst-es__art { width: 64px !important; height: 64px !important; border-radius: 20px !important; margin-bottom: 14px !important; box-shadow: none !important; }
html body .nst-es.nst-es--compact .nst-es__icon { width: 30px !important; height: 30px !important; }
html body .nst-es.nst-es--compact .nst-es__title { font-size: 17px !important; }
html body .nst-es.nst-es--compact .nst-es__body { font-size: 14px !important; }
html body .nst-es.nst-es--compact .nst-es__acts { margin-top: 16px !important; }

/* EmptyState.mount(): the host box's own lines step aside. */
html body .has-nst-es > :not(.nst-es-host) { display: none !important; }
html body .nst-es-host { width: 100% !important; align-self: stretch !important; }

/* Dark surfaces. The button pair is always --es-btn (fill) with --es-on-btn
   (label) and every theme above sets both, so a label can never take the
   fill's colour. A host that is dark whatever the theme (the TV, the stream
   stage, a room) passes surface:'dark' (.nst-es--on-dark) or sets the tokens
   on its own .nst-es; hosts whose own sweeps reach in at id strength get the
   same token rules repeated at that strength below. */
html body .nst-es.nst-es--on-dark,
html body #mtv .nst-es.nst-es {
    --es-ink: #ffffff;
    --es-dim: rgba(255, 255, 255, 0.7);
    --es-soft: rgba(255, 255, 255, 0.08);
    --es-line: rgba(255, 255, 255, 0.2);
    --es-btn: #ffffff;
    --es-on-btn: #111114;
    --es-glow: rgba(0, 0, 0, 0.3);
}
html body #mtv#mtv#mtv .nst-es .nst-es__title { color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }
html body #mtv#mtv#mtv .nst-es .nst-es__body { color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }
html body #mtv#mtv#mtv .nst-es .nst-es__btn.nst-es__btn--primary { background: var(--es-btn) !important; border-color: var(--es-btn) !important; }
html body #mtv#mtv#mtv .nst-es .nst-es__btn.nst-es__btn--primary,
html body #mtv#mtv#mtv .nst-es .nst-es__btn.nst-es__btn--primary * { color: var(--es-on-btn) !important; -webkit-text-fill-color: var(--es-on-btn) !important; }
html body #mtv#mtv#mtv .nst-es .nst-es__btn--notify,
html body #mtv#mtv#mtv .nst-es .nst-es__btn--notify * { color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important; }
html body #mtv#mtv#mtv .nst-es .nst-es__btn--link,
html body #mtv#mtv#mtv .nst-es .nst-es__btn--link * { background: transparent !important; border-color: transparent !important; color: var(--es-dim) !important; -webkit-text-fill-color: var(--es-dim) !important; }