/* Hearth — Aurora skin (default). Night glass over a living aurora field:
   the remote is one screen — a smart "now" strip, a glowing orb you push,
   swipe or steer like a joystick, edge sliders for volume and channel, and a
   dock of the things you actually use. Only applies under data-skin="aurora". */

[data-skin="aurora"] {
  --bg: #07080c;
  --bg-deep: #040508;
  --body: #11131b;
  --body-edge: #ffffff14;
  --ink: #eef0f6;
  --ink-soft: #9aa0b4;
  --ink-faint: #5d6377;
  --key: #ffffff0f;
  --key-ink: #eef0f6;
  --key-edge: #00000066;
  --signal: #ff6a2b;
  --signal-deep: #b8360b;
  --signal-soft: #ff6a2b2e;
  --cyan: #5ee7ff;
  --glass: #0b0d14;
  --glass-1: #ffffff0b;
  --glass-2: #ffffff14;
  --hair: #ffffff1c;
  --led-off: #3a3f52;
  --shadow: 0 1px 0 #ffffff12 inset, 0 24px 60px -24px #000;
  color-scheme: dark;
}

[data-skin="aurora"] body {
  background:
    radial-gradient(70% 45% at 85% -5%, #5ee7ff14, transparent 70%),
    radial-gradient(80% 55% at 10% 105%, #ff6a2b1f, transparent 70%),
    var(--bg);
}
[data-skin="aurora"] .grain { mix-blend-mode: screen; opacity: .07; }
[data-skin="aurora"] .aurora-only { display: revert !important; }
[data-skin="aurora"] .slider, [data-skin="aurora"] .rocker-ch { display: flex !important; }
[data-skin="aurora"] .orb-key { display: grid !important; }
[data-skin="aurora"] .orb-field { display: block !important; }
[data-skin="aurora"] .orb-stage, [data-skin="aurora"] .house-stage { display: block !important; }

/* Glass everywhere */
[data-skin="aurora"] :is(.icon-btn, .unit, .chip, .pick button, .rooms button, .checklist li, .toggle, .skin-card, .say input, .fields input, .switch) {
  background: var(--glass-1); border: 1px solid var(--hair); box-shadow: none; color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
[data-skin="aurora"] .icon-btn { color: var(--ink); }
[data-skin="aurora"] .cta { background: linear-gradient(135deg, #ff8a4c, var(--signal)); box-shadow: 0 0 0 1px #ffffff22 inset, 0 10px 34px -8px var(--signal); }
[data-skin="aurora"] .cta.pressed { transform: scale(.97); box-shadow: 0 0 0 1px #ffffff22 inset, 0 4px 14px -6px var(--signal); }
[data-skin="aurora"] .ghost.pressed { background: var(--glass-2); }

/* ── House ─────────────────────────────── */
/* The house field scrolls away with the page (absolute, not fixed): pinned
   particles under moving cards read as broken, and cost frames on phones. */
[data-skin="aurora"] .house-field {
  position: absolute; top: 0; left: 0; width: 100%; height: 72dvh; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
[data-skin="aurora"] .house-stage { position: absolute; top: 6dvh; right: 0; width: min(100vw, 560px); height: 46dvh; pointer-events: none; }
[data-skin="aurora"] #remote:not([hidden]) ~ .house-field { display: none !important; }
[data-skin="aurora"] #house { position: relative; z-index: 1; }
[data-skin="aurora"] .hero { padding-top: max(26dvh, 150px); }
[data-skin="aurora"] .hero h2 { text-shadow: 0 2px 40px #07080c; }
[data-skin="aurora"] .kicker { color: var(--signal); }
[data-skin="aurora"] .nearby { background: var(--glass-1); border: 1px solid #ff6a2b55; box-shadow: 0 0 40px -12px var(--signal); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[data-skin="aurora"] .unit { padding: 10px; background: #10121bf0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-skin="aurora"] .screen { background: #05060a; box-shadow: inset 0 0 0 1px #ffffff12; }
[data-skin="aurora"] .screen::before { background: linear-gradient(115deg, #ffffff08 0 30%, transparent 30.5%); }
[data-skin="aurora"] .unit.on .screen {
  background:
    radial-gradient(80% 120% at 30% 110%, #ff6a2b66, transparent 60%),
    radial-gradient(70% 90% at 85% -10%, #5ee7ff40, transparent 70%),
    #07080c;
  animation: breathe-screen 6s ease-in-out infinite;
}
@keyframes breathe-screen { 50% { filter: brightness(1.18) saturate(1.2); } }
[data-skin="aurora"] .unit.on { border-color: #ff6a2b44; box-shadow: 0 0 50px -24px var(--signal); }
[data-skin="aurora"] .unit .quick { background: var(--glass-2); border-color: var(--hair); }
[data-skin="aurora"] .unit.on .quick { background: var(--signal); box-shadow: 0 0 24px -4px var(--signal); }
[data-skin="aurora"] .unit.on[data-brand="appletv"] .screen {
  background: radial-gradient(80% 120% at 30% 110%, #8fc4ff55, transparent 60%), radial-gradient(70% 90% at 85% -10%, #f2f2ff33, transparent 70%), #07080c;
}
[data-skin="aurora"] .dock, [data-skin="aurora"] .tabs {
  background: #0d0f17cc; border: 1px solid var(--hair); box-shadow: 0 20px 60px -10px #000;
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
[data-skin="aurora"] .dock-btn { background: var(--glass-1); }
[data-skin="aurora"] .colophon { color: var(--ink-faint); }
[data-skin="aurora"] .empty-screen { background: #05060a; }

/* ── Remote: one screen, no scroll ─────── */
[data-skin="aurora"] #remote { max-width: 520px; height: calc(100dvh - var(--demo-bar, 0px)); }
[data-skin="aurora"] .panels { overflow: hidden; padding: 8px 0 0; display: flex; flex-direction: column; }
[data-skin="aurora"] .tabs { display: none; }
[data-skin="aurora"] .device {
  flex: 1; min-height: 0; padding: 0; gap: 10px; background: none; border: 0; box-shadow: none; border-radius: 0;
  display: flex; flex-direction: column;
  --pad: min(64vw, 34dvh, 300px);
}
[data-skin="aurora"] .device-head, [data-skin="aurora"] .nav-keys, [data-skin="aurora"] .rockers,
[data-skin="aurora"] .transport, [data-skin="aurora"] .gb-keys, [data-skin="aurora"] .lcd-bezel,
[data-skin="aurora"] .pad-hint { display: none !important; }

/* The "now" strip */
[data-skin="aurora"] .hud {
  display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  border-radius: 24px; background: linear-gradient(135deg, #ffffff0d, #ffffff04); border: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); flex: none;
}
.hud-main { min-width: 0; display: grid; gap: 4px; }
.hud-kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.hud-kicker .live { width: 7px; height: 7px; border-radius: 50%; background: var(--led-off); flex: none; }
.device:not(.offline) .hud-kicker .live { background: #3fd36f; box-shadow: 0 0 10px #3fd36f; animation: pulse 2s infinite; }
.hud-title {
  margin: 0; font-size: clamp(26px, 7.4vw, 36px); line-height: 1; letter-spacing: -.04em; font-weight: 750;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, #fff, #ffd2bd 70%, #ff9a6b); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hud-chips { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 9.5px; text-transform: uppercase; color: var(--ink-soft); }
.hud-chips span { padding: 4px 8px; border-radius: 999px; background: var(--glass-1); border: 1px solid var(--hair); white-space: nowrap; }
.hud-chips span.hot { color: #ffd2bd; border-color: #ff6a2b55; }
.hud-vol { position: relative; width: 72px; height: 72px; display: grid; place-items: center; align-content: center; color: var(--ink); }
.hud-vol svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-vol circle { fill: none; stroke-width: 5; }
.hud-vol .trk { stroke: #ffffff14; }
.hud-vol .lvl { stroke: url(#volGrad); stroke: var(--signal); stroke-linecap: round; transition: stroke-dasharray .35s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px #ff6a2b); }
.hud-vol.muted .lvl { stroke: var(--ink-faint); filter: none; }
.hud-vol b { position: relative; font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.hud-vol small { position: relative; font-size: 8px; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }
.hud-vol.pressed { transform: scale(.94); }
[data-skin="aurora"] .hud-ticker {
  display: block !important; margin: 0 4px; height: 16px; overflow: hidden; font-size: 10px; letter-spacing: .04em; color: var(--ink-soft);
  white-space: nowrap; text-overflow: ellipsis; flex: none;
}
.hud-ticker.swap { animation: ticker .5s ease-out; }
@keyframes ticker { from { opacity: 0; transform: translateY(8px); } }

/* The orb */
/* The orb zone is three columns that never overlap: channel rail | orb | volume
   rail. The orb takes what's left of the width (container units: the remote's
   own width, not the window's), so narrow phones shrink the orb, not the rails. */
[data-skin="aurora"] .device { container-type: inline-size; }
[data-skin="aurora"] .orb-zone {
  --rail: 56px; --gap: 14px;
  --pad: min(calc(100cqw - 2 * var(--rail) - 2 * var(--gap)), 34dvh, 300px);
  display: block; position: relative; flex: 1; min-height: calc(var(--pad) + 24px);
}
[data-skin="aurora"] .orb-field { position: absolute; inset: -10px -16px; width: calc(100% + 32px); height: calc(100% + 20px); pointer-events: none; }
[data-skin="aurora"] .orb-stage { position: absolute; left: 50%; top: 50%; width: var(--pad); height: var(--pad); transform: translate(-50%, -50%); pointer-events: none; }
[data-skin="aurora"] .pad {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  background: radial-gradient(circle, transparent 54%, #ffffff06 70%, #ffffff10);
  border: 1px solid #ffffff24; box-shadow: 0 0 80px -20px #ff6a2b66, inset 0 0 40px #ffffff08;
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
[data-skin="aurora"] .pad::before { /* aim beam while steering */
  content: ''; position: absolute; inset: -2px; border-radius: 50%; opacity: 0; transition: opacity .2s;
  background: conic-gradient(from calc(var(--aim, 0rad) - .5rad), #ff6a2bcc 0 1rad, transparent 1rad);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%); mask: radial-gradient(circle, transparent 64%, #000 66%);
}
[data-skin="aurora"] .pad.stick::before { opacity: 1; }
[data-skin="aurora"] .pad.swiping { box-shadow: 0 0 90px -10px #ff6a2b99, inset 0 0 40px #ffffff0c; }
[data-skin="aurora"] .arc { color: #ffffffb0; opacity: 1; font-size: 22px; }
[data-skin="aurora"] .arc.pressed { color: #fff; filter: drop-shadow(0 0 8px var(--signal)); }
[data-skin="aurora"] .ok {
  inset: 33%; background: radial-gradient(circle at 50% 40%, #ffffff30, #ffffff08 60%); border: 1px solid #ffffff2a;
  box-shadow: 0 0 30px -6px #ff6a2b88, inset 0 1px 0 #ffffff33; color: #fff; font-size: 13px; letter-spacing: .1em;
}
[data-skin="aurora"] .ok.pressed { transform: scale(.92); box-shadow: 0 0 50px -4px var(--signal), inset 0 1px 0 #ffffff33; }
[data-skin="aurora"] .pad.charged .ok { box-shadow: 0 0 0 3px var(--signal), 0 0 50px var(--signal); }
[data-skin="aurora"] .pad-knob {
  display: block; position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; margin: -14% 0 0 -14%; border-radius: 50%;
  pointer-events: none; opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.2, 1.4, .3, 1);
  background: radial-gradient(circle at 45% 40%, #fff, #ffb18a 30%, var(--signal) 60%, transparent 72%);
  box-shadow: 0 0 40px 6px #ff6a2b88;
}
[data-skin="aurora"] .pad.stick .pad-knob { opacity: 1; transition: opacity .15s; }
[data-skin="aurora"] .pad.stick .ok { opacity: .25; }
[data-skin="aurora"] .pad .ripple { border-color: #ffffffcc; box-shadow: 0 0 30px var(--signal); }

/* Corner keys around the orb */
.orb-key {
  position: absolute; width: 54px; height: 54px; border-radius: 50%; display: none; place-items: center; font-size: 20px; color: var(--ink);
  background: var(--glass-1); border: 1px solid var(--hair); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .1s, background .15s, box-shadow .15s; z-index: 2;
}
.orb-key.pressed { transform: scale(.9); background: var(--glass-2); box-shadow: 0 0 24px -4px var(--signal); }
/* Tucked into the orb's corners, inside the rails. */
.orb-key.tl { left: calc(var(--rail, 56px) + 6px); top: 0; } .orb-key.tr { right: calc(var(--rail, 56px) + 6px); top: 0; }
.orb-key.bl { left: calc(var(--rail, 56px) + 6px); bottom: 0; } .orb-key.br { right: calc(var(--rail, 56px) + 6px); bottom: 0; }
.orb-key.power-key { color: #fff; background: linear-gradient(135deg, #ff8a4c, var(--signal)); border-color: #ffffff33; box-shadow: 0 0 30px -6px var(--signal); }
.orb-key.power-key .charge { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--signal); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .45s; }
.orb-key.power-key.charged .charge { opacity: 1; transform: scale(1); }
.device.offline .orb-key.power-key { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 50% { box-shadow: 0 0 46px 2px var(--signal); } }

/* Volume: a real slider (fill = the TV's level; slide anywhere, it follows
   the finger). Channel: a two-button rocker. Both sit in their own rail. */
.slider, .rocker-ch {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: var(--rail, 56px); height: min(calc(var(--pad) + 16px), 290px);
  flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 24px;
  background: var(--glass-1); border: 1px solid var(--hair); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-user-select: none; user-select: none; touch-action: none; -webkit-touch-callout: none;
}
.slider { right: 0; padding: 8px 0; justify-content: flex-start; cursor: ns-resize; transition: box-shadow .2s, transform .2s cubic-bezier(.2, .9, .2, 1.2); }
.rocker-ch { left: 0; }
.slider .fill {
  position: absolute; inset: 0; z-index: 0; transform-origin: bottom; transform: scaleY(var(--level, 0));
  background: linear-gradient(0deg, #ff6a2bcc, #ff8a4c99 60%, #ffb18a66); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.slider:not(.absolute) .fill { display: none; }
.slider .cap, .slider .val { position: relative; z-index: 1; pointer-events: none; }
.slider .cap { flex: none; width: 100%; height: 44px; display: grid; place-items: center; font-size: 26px; font-weight: 300; line-height: 1; color: var(--ink); }
.slider .val { margin: auto 0 2px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 6px #0009; }
.slider .cap.hit { animation: caphit .28s ease-out; }
@keyframes caphit { 40% { transform: scale(1.35); color: #fff; text-shadow: 0 0 12px var(--signal); } }
.slider.active { box-shadow: 0 0 34px -6px var(--signal); }
.slider.sliding { transform: translateY(-50%) scaleX(1.08); }
.slider.sliding .fill { transition: transform .06s linear; }
.slider:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.rocker-ch .cap { flex: 1; width: 100%; display: grid; place-items: center; color: var(--ink); transition: background .12s; }
.rocker-ch .cap svg { width: 24px; height: 24px; }
.rocker-ch .up svg { transform: rotate(-90deg); } .rocker-ch .down svg { transform: rotate(90deg); }
.rocker-ch .cap.pressed { background: var(--glass-2); color: #fff; box-shadow: inset 0 0 24px -6px var(--signal); }
.rocker-ch .lbl { flex: none; width: 60%; padding: 6px 0; text-align: center; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border-block: 1px solid var(--hair); }

/* Smart dock */
[data-skin="aurora"] .smart-dock {
  display: flex !important; gap: 8px; padding: 8px; margin-bottom: calc(8px + var(--safe-b)); border-radius: 26px; flex: none;
  background: #0d0f17cc; border: 1px solid var(--hair); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  overflow-x: auto; scrollbar-width: none;
}
.smart-dock::-webkit-scrollbar { display: none; }
.dock-item {
  flex: 1 0 54px; min-width: 54px; height: 58px; border-radius: 18px; display: grid; place-items: center; align-content: center; gap: 3px;
  background: var(--glass-1); color: var(--ink); font-size: 19px; transition: transform .1s, background .15s;
}
.dock-item small { font-size: 8.5px; color: var(--ink-soft); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-item.pressed { transform: scale(.92); background: var(--glass-2); }
.dock-item.app i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 750; color: #fff; background: var(--tint); overflow: hidden; }
.dock-item.app i img { width: 100%; height: 100%; object-fit: cover; }
.dock-item.current { box-shadow: inset 0 0 0 1.5px var(--signal); }
.dock-item.on { color: var(--signal); }

/* Apps / inputs / say open as a sheet over the orb */
[data-skin="aurora"] .panel:not(.device) {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); max-height: 74dvh; overflow-y: auto; z-index: 60;
  padding: 10px 18px calc(22px + var(--safe-b)); border-radius: 28px 28px 0 0;
  background: #0d0f17f2; border: 1px solid var(--hair); border-bottom: 0; box-shadow: 0 -30px 80px #000c;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: sheet .35s cubic-bezier(.2, .9, .2, 1);
}
.sheet-bar { display: none; }
[data-skin="aurora"] .sheet-bar {
  position: sticky; top: -10px; z-index: 2; display: flex; gap: 6px; align-items: center; margin: -10px -18px 12px; padding: 12px 14px;
  background: #0d0f17f2;
}
.sheet-bar button { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sheet-bar button.active { background: var(--glass-2); color: #fff; }
.sheet-bar button.close { margin-left: auto; width: 40px; padding: 0; background: var(--glass-1); color: #fff; }
.sheet-bar button.pressed { transform: scale(.94); }
[data-skin="aurora"] .scrim { position: fixed; inset: 0; z-index: 55; background: #000a; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
[data-skin="aurora"] .panel-title { display: none; }
[data-skin="aurora"] .app-icon { box-shadow: 0 0 0 1px #ffffff1a, 0 12px 26px -12px #000; }
[data-skin="aurora"] .app span { color: var(--ink-soft); }

[data-skin="aurora"] .switch.active { background: linear-gradient(135deg, #ffffff22, #ffffff0c); border-color: #ffffff33; color: #fff; }
[data-skin="aurora"] .pair-banner { background: var(--glass-1); border: 1px solid #ff6a2b55; box-shadow: 0 0 40px -14px var(--signal); }

/* Sheets + setup */
[data-skin="aurora"] .sheet, [data-skin="aurora"] .setup { background: #0b0d14; }
[data-skin="aurora"] .sheet::backdrop { background: #000b; }
[data-skin="aurora"] .skin-card.active { border-color: var(--signal); box-shadow: 0 0 30px -10px var(--signal); }
[data-skin="aurora"] .note { background: #161925e6; color: #eef0f6; box-shadow: 0 18px 40px -14px #000c, 0 0 0 1px var(--hair) inset; }

/* Short phones: shrink the orb and the strip so it still fits one screen. */
@media (max-height: 700px) {
  [data-skin="aurora"] .device { gap: 8px; }
  [data-skin="aurora"] .orb-zone { --pad: min(calc(100cqw - 2 * var(--rail) - 2 * var(--gap)), 30dvh, 240px); }
  [data-skin="aurora"] .hud { padding: 10px 12px 10px 14px; }
  [data-skin="aurora"] .hud-title { font-size: 24px; }
  [data-skin="aurora"] .hud-vol { width: 60px; height: 60px; }
  .orb-key { width: 48px; height: 48px; }
  .dock-item { height: 52px; }
}
@media (max-width: 380px) {
  [data-skin="aurora"] .orb-zone { --rail: 50px; --gap: 10px; }
}

/* The TV's own apps under the catalog: a heading (Aurora hides panel titles,
   which made them read as duplicates) and white monogram letters (.app span
   is the label colour, which also hit the letter inside the tile). */
[data-skin="aurora"] .all-apps-title { display: block; margin: 26px 0 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
[data-skin="aurora"] .app .app-icon span { color: #fff; font-size: 28px; font-weight: 750; letter-spacing: -.04em; }

/* Tablets: a bigger orb, and the orb zone only as tall as it needs, centred,
   so the corner keys sit around the orb instead of at the ends of a tall,
   empty column. */
@media (min-width: 700px) and (min-height: 820px) {
  [data-skin="aurora"] #remote { max-width: 640px; }
  [data-skin="aurora"] .orb-zone {
    --rail: 72px; --gap: 22px;
    --pad: min(calc(100cqw - 2 * var(--rail) - 2 * var(--gap)), 44dvh, 430px);
    flex: none; height: calc(var(--pad) + 150px); margin-block: auto;
  }
  [data-skin="aurora"] .slider, [data-skin="aurora"] .rocker-ch { height: min(calc(var(--pad) + 16px), 440px); }
  [data-skin="aurora"] .orb-key { width: 66px; height: 66px; font-size: 24px; }
  [data-skin="aurora"] .ok { font-size: 18px; }
  [data-skin="aurora"] .arc { font-size: 30px; }
}