/* TV & Media documentation */
.media-product-hero{height:240px;position:relative;color:#fff;background-color:#1d2722;background-image:linear-gradient(180deg,rgba(12,18,15,.08) 0%,rgba(12,18,15,.58) 100%),linear-gradient(90deg,rgba(12,18,15,.78) 0%,rgba(12,18,15,.58) 42%,rgba(12,18,15,.30) 72%,rgba(12,18,15,.16) 100%),url('../images/sb20-tv-wall.webp');background-size:cover;background-position:center 38%;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-6) var(--space-5);overflow:hidden}
.media-product-hero__nav{position:absolute;left:18px;right:18px;top:max(18px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}
.media-product-hero__nav .icon-button{color:#fff;background:rgba(18,26,22,.34);border:1px solid rgba(255,255,255,.20);box-shadow:var(--shadow-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.media-product-hero__copy{max-width:76%;text-shadow:0 2px 14px rgba(0,0,0,.48)}
.media-product-hero__copy small{display:block;font-size:var(--font-xs);letter-spacing:.22em;font-weight:700;opacity:.88}
.media-product-hero__copy h1{margin:var(--space-2) 0 var(--space-1);font-family:var(--font-heading-family);font-size:var(--font-xl);line-height:var(--line-tight);font-weight:500}
.media-product-hero__copy span{font-size:var(--font-xs);font-weight:600;opacity:.92}
.media-doc-page{padding-top:var(--space-3);padding-bottom:var(--space-6)}
.media-device-card{padding:var(--space-5);display:grid;grid-template-columns:64px 1fr;align-items:center;gap:var(--space-4)}
.media-device-card__icon{width:var(--icon-box-xl);height:var(--icon-box-xl);border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-soft);color:var(--green);font-size:var(--font-lg)}
.media-device-card__copy strong{display:block;font-family:var(--font-heading-family);font-size:var(--font-lg);font-weight:500;line-height:var(--line-tight)}
.media-device-card__copy span{display:block;margin-top:var(--space-1);color:var(--muted);font-size:var(--font-xs);line-height:var(--line-normal)}
.media-intro{margin:var(--space-4) var(--space-1) var(--space-3);color:var(--ink);font-size:var(--font-sm);line-height:var(--line-copy)}
.media-source-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 var(--space-1) var(--space-4)}
.media-source-list span{padding:var(--space-2) var(--space-2);border:1px solid var(--line);border-radius:var(--radius-pill);background:rgba(255,255,255,.42);color:var(--muted);font-size:var(--font-xs);font-weight:600}
.media-instruction-card{margin-top:var(--space-3);padding:var(--space-5) var(--space-5)}
.media-instruction-card__title{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.media-instruction-card__title>span{width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--surface-soft);color:var(--green);font-size:var(--font-md);flex:0 0 auto}
.media-instruction-card__title h2{margin:0;font-size:var(--font-md);line-height:var(--line-tight)}
.media-steps{counter-reset:step;list-style:none;margin:0 0 0 var(--space-2);padding:0;display:grid;gap:var(--space-2)}
.media-steps li{counter-increment:step;display:grid;grid-template-columns:26px 1fr;gap:var(--space-3);align-items:start;color:var(--muted);font-size:var(--font-xs);line-height:var(--line-normal)}
.media-steps li::before{content:counter(step);width:22px;height:22px;border-radius:var(--radius-round);display:grid;place-items:center;background:var(--green);color:#fff;font-size:var(--font-xs);font-weight:700;margin-top:1px}
.media-sound-controls{margin-top:var(--space-3)}
.media-manual-link{min-height:var(--control-lg);margin-top:var(--space-3);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);display:grid;grid-template-columns:28px 1fr 22px;align-items:center;gap:var(--space-2);color:var(--ink);font-size:var(--font-xs);font-weight:700;box-shadow:var(--shadow-soft)}
.media-manual-link>.app-icon:first-child{color:var(--green)}
.media-manual-link>.app-icon:last-child{justify-self:end;color:var(--muted);font-size:var(--font-xs)}

/* Reusable media status */
.media-status{margin-top:var(--space-3);padding:var(--space-4);display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);min-height:88px}
.tv-page>.media-status{margin:var(--space-3) 0 var(--space-4)}
.media-status__art{width:var(--icon-box-xl);height:var(--icon-box-xl);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-soft);display:grid;place-items:center;color:var(--green);font-size:var(--font-lg)}
.media-status__art img{width:100%;height:100%;object-fit:cover;display:block}
.media-status__copy{min-width:0;display:grid;gap:2px}
.media-status__copy small{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.media-status__copy strong{font-size:var(--font-md);line-height:var(--line-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-status__copy>span{font-size:var(--font-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-status__copy em{margin-top:var(--space-1);font-size:var(--font-xs);color:var(--green);font-style:normal;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-status__state{align-self:start;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--muted);font-size:var(--font-xs);font-weight:700;white-space:nowrap}
.media-status[data-state="playing"] .media-status__state{background:var(--green);color:#fff}
.media-status[data-state="paused"] .media-status__state{background:#dedbd3;color:var(--ink)}

/* Waiting/off media should read as unavailable, not as an active player. */
.media-status[data-state="idle"],
.media-status[data-state="on"],
.media-status[data-state="off"],
.media-status[data-state="unavailable"]{background:#f0eee8;border-color:#e3dfd7;box-shadow:none;color:#7c837f}
.media-status[data-state="idle"] .media-status__art,
.media-status[data-state="on"] .media-status__art,
.media-status[data-state="off"] .media-status__art,
.media-status[data-state="unavailable"] .media-status__art{background:#e5e2dc;color:#929994;filter:grayscale(1)}
.media-status[data-state="idle"] .media-status__copy strong,
.media-status[data-state="on"] .media-status__copy strong,
.media-status[data-state="off"] .media-status__copy strong,
.media-status[data-state="unavailable"] .media-status__copy strong{color:#737a76;font-weight:600}
.media-status[data-state="idle"] .media-status__copy small,
.media-status[data-state="idle"] .media-status__copy>span,
.media-status[data-state="idle"] .media-status__copy em,
.media-status[data-state="on"] .media-status__copy small,
.media-status[data-state="on"] .media-status__copy>span,
.media-status[data-state="on"] .media-status__copy em,
.media-status[data-state="off"] .media-status__copy small,
.media-status[data-state="off"] .media-status__copy>span,
.media-status[data-state="off"] .media-status__copy em,
.media-status[data-state="unavailable"] .media-status__copy small,
.media-status[data-state="unavailable"] .media-status__copy>span,
.media-status[data-state="unavailable"] .media-status__copy em{color:#979d99}
.media-status[data-state="idle"] .media-status__state,
.media-status[data-state="on"] .media-status__state,
.media-status[data-state="off"] .media-status__state,
.media-status[data-state="unavailable"] .media-status__state{background:#e2dfd8;color:#8b918d}

/* Reusable volume control */
.media-volume-control{--volume-level:20%;margin-top:var(--space-3);padding:var(--space-4) var(--space-5)}
.media-volume-control__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.media-volume-control__head h2{margin:0;font-size:var(--font-md)}
.media-volume-control__head output{font-size:var(--font-xs);font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.media-volume-control__buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);align-items:center;justify-items:center}
.media-volume-control__buttons .circle-action{width:var(--control-lg);height:var(--control-lg)}
.media-volume-control__mute{position:relative}
.media-volume-control__mute .volume-icon-muted{display:none}
.media-volume-control.is-muted .media-volume-control__mute{background:var(--green);color:#fff}
.media-volume-control.is-muted .media-volume-control__mute .volume-icon-unmuted{display:none}
.media-volume-control.is-muted .media-volume-control__mute .volume-icon-muted{display:inline-block}
.media-volume-control__slider{margin-top:var(--space-3);display:grid;grid-template-columns:20px 1fr 20px;align-items:center;gap:var(--space-2);color:var(--muted)}
.media-volume-control__slider .app-icon{font-size:var(--font-xs)}
.media-volume-control__slider input[type="range"]{width:100%;accent-color:var(--green);cursor:pointer}
.media-volume-control.is-muted .media-volume-control__slider{opacity:.45}
.remote-control>.media-volume-control{margin-top:0}

/* Remote should use the same content width as the rest of the app. */
.remote-page .remote-control{max-width:none}
.remote-page .remote-dpad{width:min(340px,86vw)}

@media(max-width:420px){
.media-product-hero{height:218px;padding:var(--space-5) var(--space-4);background-position:center 37%}.media-product-hero__nav{left:14px;right:14px}.media-product-hero__copy{max-width:78%}.media-product-hero__copy h1{font-size:var(--font-xl)}
.media-device-card{padding:var(--space-4);grid-template-columns:56px 1fr}.media-device-card__icon{width:var(--icon-box-lg);height:var(--icon-box-lg);border-radius:var(--radius-md);font-size:var(--font-lg)}.media-device-card__copy strong{font-size:var(--font-lg)}.media-instruction-card{padding:var(--space-4)}.media-intro{font-size:var(--font-xs)}.media-steps{margin-left:var(--space-1)}
.media-status{grid-template-columns:52px minmax(0,1fr);gap:var(--space-3)}.media-status__art{width:var(--icon-box-lg);height:var(--icon-box-lg);border-radius:var(--radius-md)}.media-status__state{grid-column:2;justify-self:start;margin-top:var(--space-1)}.media-volume-control{padding:var(--space-4)}.media-volume-control__buttons .circle-action{width:var(--control-md);height:var(--control-md)}
.remote-page .remote-dpad{width:min(310px,88vw)}
}


/* Live Home Assistant TV controls */
.tv-ambilight-control{width:100%;margin:var(--space-3) 0 0;padding:var(--space-4) var(--space-4);border:1px solid var(--line);display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);text-align:left;color:var(--ink);cursor:pointer}
.tv-ambilight-control__icon{width:var(--icon-box-md);height:var(--icon-box-md);border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-soft);color:var(--green)}
.tv-ambilight-control__copy{display:grid;gap:3px}
.tv-ambilight-control__copy strong{font-size:var(--font-md);line-height:var(--line-tight)}
.tv-ambilight-control__copy small{font-size:var(--font-xs);line-height:var(--line-normal);color:var(--muted)}
.tv-ambilight-control__state{padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--muted);font-size:var(--font-xs);font-weight:700}
.tv-ambilight-control[data-state="on"] .tv-ambilight-control__icon,.tv-ambilight-control[data-state="on"] .tv-ambilight-control__state{background:var(--green);color:#fff}
.tv-ambilight-control[data-ha-busy="1"]{opacity:.62;pointer-events:none}

.remote-secondary__icon{width:var(--icon-box-sm);height:var(--icon-box-sm);display:grid;place-items:center;line-height:var(--line-tight)}
.remote-secondary__icon .app-icon{font-size:var(--font-lg);line-height:var(--line-tight)}
.remote-key .app-icon{display:block;line-height:var(--line-tight)}
.tv-power-button{grid-template-columns:56px minmax(0,1fr);gap:var(--space-3)}
.tv-power-button__icon{width:var(--icon-box-lg);height:var(--icon-box-lg);justify-self:center}
.tv-power-button>span:last-child{min-width:0;align-self:center}

.remote-page button:disabled{opacity:.38;cursor:not-allowed}
.remote-page button:disabled:active{transform:none}

.tv-page .tv-ambilight-control{margin-bottom:var(--space-3)}
.tv-page .feature-row--remote{margin-top:var(--space-3)}

.tv-page .tv-power-button{grid-template-columns:52px minmax(0,1fr);gap:var(--space-3);padding-left:var(--space-4);padding-right:var(--space-4)}
.tv-page .tv-ambilight-control{grid-template-columns:52px minmax(0,1fr) auto;gap:var(--space-3);padding-left:var(--space-4);padding-right:var(--space-4)}

.tv-page .feature-row--remote{grid-template-columns:52px minmax(0,1fr) 22px;gap:var(--space-3);padding-left:var(--space-4);padding-right:var(--space-4)}
.tv-page .feature-row--remote>.app-icon:first-child{width:var(--icon-box-lg);height:var(--icon-box-lg);display:grid;place-items:center;justify-self:start;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--green);font-size:var(--font-lg)}
.tv-page .tv-ambilight-control__icon{width:var(--icon-box-lg);height:var(--icon-box-lg);justify-self:start}

.tv-page button:disabled,.tv-page input:disabled{opacity:.38;cursor:not-allowed}


/* Keep the TV & Media shortcuts clear of the landscape illustration. */
.tv-page>.landscape-detail{margin-top:var(--space-6)}
.remote-page .tv-ambilight-control{margin:var(--space-3) 0 var(--space-4)}
.nintendo-switch-page .nintendo-switch-intro{padding:var(--space-5)}
.nintendo-switch-intro .media-source-list{margin:var(--space-4) 0 0}
.nintendo-switch-intro p{margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--font-sm);line-height:var(--line-copy)}
.nintendo-switch-page .media-steps li{font-size:var(--font-sm)}


/* The console guide is a complete, balanced document instead of an oversized
   empty shell below the last line of the original list. */
.nintendo-switch-page{display:flex;flex-direction:column;gap:var(--space-3);min-height:calc(100dvh - 80px)}
.nintendo-switch-page>.nintendo-switch-intro,
.nintendo-switch-page>.media-instruction-card{margin-top:0}
.nintendo-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.nintendo-option{padding:var(--space-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.nintendo-option:last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:var(--space-3)}
.nintendo-option__icon{display:grid;place-items:center;width:var(--icon-box-md);height:var(--icon-box-md);flex-shrink:0;border-radius:var(--radius-md);background:var(--surface-soft);color:var(--green);font-size:var(--font-md)}
.nintendo-option h2,.nintendo-finish h2{margin:0;font-size:var(--font-md);line-height:var(--line-tight)}
.nintendo-option p,.nintendo-finish p{margin:var(--space-1) 0 0;color:var(--muted);font-size:var(--font-xs);line-height:var(--line-normal)}
.nintendo-finish{margin-top:auto;padding:var(--space-4);display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-soft)}
.nintendo-finish>span{display:grid;place-items:center;color:var(--green);font-size:var(--font-lg)}
@media(max-width:360px){.nintendo-options{grid-template-columns:1fr}.nintendo-option:last-child{grid-column:1;flex-direction:column;align-items:flex-start}}


/* Nintendo guest-guide typography: one body-size, one heading-size.
   Compact game metadata is secondary; instructions and cards read alike. */
.nintendo-switch-page .nintendo-switch-intro>p,
.nintendo-switch-page .media-steps li,
.nintendo-switch-page .media-intro,
.nintendo-switch-page .nintendo-option p,
.nintendo-switch-page .nintendo-finish p{
    font-size:var(--font-sm);line-height:var(--line-copy)
}
.nintendo-switch-page .nintendo-option h2,
.nintendo-switch-page .nintendo-finish h2{font-size:var(--font-md)}
.nintendo-switch-page .nintendo-option{min-width:0}
.nintendo-switch-page .nintendo-option p{overflow-wrap:break-word}