/* Home geometry is logical 1920x1080; viewport.js fits HD graphics surfaces. */
/* Static outlines: legacy webOS engines cannot apply variable font axes. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-300.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-400.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-500.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-700.ttf') format('truetype');
  font-weight: 700;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Theme stacking is bounded below trusted dialogs; navigation still owns bounds. */
.ctv-home {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  right: auto;
  bottom: auto;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
}
.ctv-starting {
  visibility: hidden;
}
.ctv-theme-suspended .ctv-ambient {
  visibility: hidden;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  cursor: default;
}
/* The Root window is an overlay; only positively observed content makes Home clear. */
html[data-home-presentation='overlay'],
html[data-home-presentation='closed'],
body[data-home-presentation='overlay'],
body[data-home-presentation='closed'] {
  background: transparent !important;
}
body[data-home-presentation='overlay'] #homeSurface.ctv-home {
  background-color: transparent !important;
  background-image: none !important;
}
body[data-home-presentation='overlay'] #homeSurface.ctv-home::before {
  top: auto;
  height: 400px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(0, 0, 0, 0.92)
  ) !important;
}
body[data-home-presentation='overlay'] .ctv-ambient {
  visibility: hidden !important;
}
body[data-home-presentation='closed'] #homeSurface,
body[data-home-presentation='closed'] #toast {
  visibility: hidden !important;
}
/* ---- ambient glow ---------------------------------------------------------------------------- */
.ambient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
/* Home bakes the settled glow into #ambientBase (app.js), so the two full-screen
   layers only exist while the colour crossfades. Themes keep the layers unless they opt
   into Classic motion; #ambientBase is also .ctv-ambient, so such a theme's ambient
   appearance applies to it, but only while baked, so it never doubles a layer. */
.ambient-base {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.ctv-theme-suspended .ambient-base {
  visibility: hidden;
}
#homeSurface:not(.ctv-theme-active) .ambient.baked,
#homeSurface.ctv-classic-motion .ambient.baked {
  opacity: 0 !important;
  transition: none !important;
}
#homeSurface.ctv-theme-active:not(.ctv-classic-motion) #ambientBase,
#homeSurface.ctv-theme-active #ambientBase:not(.baked) {
  background: none !important;
  border-style: none !important;
  box-shadow: none !important;
}
/* ---- top shelf ------------------------------------------------------------------------------- */
#hero {
  position: absolute;
  left: 136px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
/* ---- header ---------------------------------------------------------------------------------- */
header {
  position: absolute;
  top: 52px;
  left: 112px;
  right: 112px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 3;
  transition:
    opacity 300ms ease,
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Below the dock: the header slides away so the grid gets the whole screen. */
body.scrolled header {
  opacity: 0;
  transform: translateY(-48px);
  pointer-events: none;
}
#greeting {
  margin-left: 8px;
}
#timeRow {
  display: flex;
  align-items: flex-end;
}
#clock {
  line-height: 1;
}
#ampm {
  margin: 0 0 16px 12px;
}
.divider {
  width: 2px;
  height: 52px;
  margin: 0 32px 16px;
}
#date {
  margin-bottom: 18px;
  white-space: pre;
}
#topButtons {
  display: flex;
  margin-bottom: 12px;
}
/* Frosted pill, tvOS style. */
.pill {
  display: flex;
  align-items: center;
  height: 84px;
  margin-left: 20px;
  padding: 0 40px 0 32px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pill svg {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 44px;
  height: 44px;
  margin-right: 18px;
}
.pill.focused {
  transform: scale(1.04);
}
/* ---- grid ------------------------------------------------------------------------------------ */
#viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
#stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Its own layer: scrolling and focus changes recomposite instead of re-rastering tiles. */
  will-change: transform;
}
/* The tvOS lighter band behind the dock row. */
#dockBand {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.12);
}
.item {
  position: absolute;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(0.2, 0.8, 0.3, 1),
    left 320ms cubic-bezier(0.25, 0.8, 0.3, 1),
    top 320ms cubic-bezier(0.25, 0.8, 0.3, 1);
}
.item.shown {
  opacity: 1;
  transform: none;
}
/* Classic tiles are their own layers: the focus zoom then repaints one tile instead of
   4K tiles of the whole grid. These layers are unscaled at rest (the card zoom paints
   inside them, and input tiles only scale during their FLIP), so text stays sharp. */
#homeSurface[data-layout='dock-grid'] #tiles .item,
#homeSurface[data-layout='dock-grid'] .input-tile {
  will-change: transform;
}
.item.dock .name {
  display: none;
}
/* Rearranging: the held tile wiggles and floats above the others; the glass steps aside. */
.item.focused {
  z-index: 2;
}
.item.moving {
  z-index: 2;
}
.item.moving .card {
  animation: wiggle 240ms ease-in-out infinite alternate;
}
@keyframes wiggle {
  from {
    transform: scale(1.1) rotate(-1.2deg);
  }
  to {
    transform: scale(1.1) rotate(1.2deg);
  }
}
body.editing #glass {
  opacity: 0 !important;
}
.card {
  position: relative;
  width: 100%;
  /* Height and item width come from the shared geometry in app.js. */
  overflow: hidden;
  /* One shared glide for growing and shrinking, in step with the glass frame. */
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Faint rim so black tiles (Apple TV) still read against the black page. */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.item.focused .card {
  transform: scale(1.1);
}
/* OK press: a short dip that never delays the launch. */
.item.focused.pressed .card {
  transform: scale(1.056);
  transition-duration: 120ms;
}
.card img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}
/* Transparent system icons: smaller glyph, centred. */
.card.glyph img {
  top: 50%;
  height: 62%;
  transform: translate(-50%, -50%);
}
.name {
  height: 44px;
  margin-top: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}
.item.focused .name {
  opacity: 1;
  transform: translateY(8px);
}
/* The single floating glass highlight that springs between tiles. */
#glass {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border: 3px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
/* Bright top specular. */
#glass::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
}
/* ---- inputs dropdown ------------------------------------------------------------------------- */
#inputsPanel {
  position: absolute;
  z-index: 5;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transform-origin: top;
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
#inputsPanel.hidden {
  opacity: 0;
  transform: translateY(-16px) scaleY(0.92);
  pointer-events: none;
}
.inputRow {
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 24px;
  white-space: nowrap;
}
.inputRow svg {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
.separator {
  height: 2px;
  margin: 12px 24px;
}
.inputRow .input-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: 24px;
  border-radius: 50%;
}
/* ---- inputs shelf (Classic) ------------------------------------------------------------------ */
/* app.js owns left/top/width and tile positions; tiles scale inside the clipped window. */
#inputShelf {
  position: absolute;
  height: 296px;
  transition: opacity 260ms ease;
}
#btnInputs[hidden],
#inputShelf[hidden] {
  display: none;
}
#inputShelf.covered {
  opacity: 0;
  pointer-events: none;
}
#inputShelfCaption {
  position: absolute;
  left: 24px;
  top: 0;
  line-height: 28px;
  white-space: nowrap;
}
#inputShelfWindow {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  /* 12px above the tiles and room below the focused tile for its shadow. */
  height: 268px;
  overflow: hidden;
}
/* Fades only the peeking next tile; whole-tile scrolling never clips the left edge. */
/* Decorative: engines without -webkit-mask-image show the unfaded peeking tile. */
/* doiuse-disable css-masks */
#inputShelf.overflow-right #inputShelfWindow {
  -webkit-mask-image: linear-gradient(90deg, #000 93%, transparent);
}
/* doiuse-enable css-masks */
#inputShelfTrack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* app.js sets each tile's left, width and height: the focused tile grows (no scale
   transform at rest, so its text stays sharp) and later tiles move right. The change
   snaps, and app.js animates it with a transform from the old box (FLIP), so growing
   never relayouts per frame. Contents anchor to the tile's edges so they fit both sizes.
   app.js's SHELF_FADES mirrors these transitions minus transform. */
.input-tile {
  position: absolute;
  top: 12px;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 160ms ease,
    opacity 200ms ease;
}
.input-tile.pressed {
  transform: scale(0.96);
  transition-duration: 120ms;
}
.input-glyph {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 40px;
  height: 40px;
}
.input-tile .input-dot {
  position: absolute;
  top: 34px;
  right: 24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.input-tile.focused .input-glyph {
  left: 28px;
  top: 26px;
  width: 48px;
  height: 48px;
}
.input-tile.focused .input-dot {
  top: 40px;
  right: 28px;
}
.input-dot {
  display: none;
}
.connected .input-dot {
  display: block;
}
.input-name,
.input-detail {
  position: absolute;
  left: 24px;
  right: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.input-name {
  bottom: 50px;
  line-height: 36px;
}
.input-detail {
  bottom: 20px;
  line-height: 26px;
}
.input-tile.focused .input-name,
.input-tile.focused .input-detail {
  left: 28px;
  right: 28px;
}
.input-tile.focused .input-name {
  bottom: 62px;
  line-height: 44px;
}
.input-tile.focused .input-detail {
  bottom: 26px;
  line-height: 30px;
}
/* The frame inherits theme rounding. Native video compositing varies by renderer/firmware:
   earlier webOS 6 hardware ignored rounded clipping, masks and opacity. Keep the inset
   and stop covered shelves rather than relying on clipping or fading the video plane. */
.input-preview {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border-radius: inherit;
  overflow: hidden;
}
.input-preview video {
  display: block;
  width: 100%;
  height: 100%;
  /* The focused tile's frame is exactly 16:9 (384x216), so filling never distorts
     and the TV's video scaler never has to crop. */
  object-fit: fill;
}
/* Text colors switch with media readiness; transform/background motion stays unchanged. */
.input-tile.previewing .input-glyph,
.input-tile.previewing .input-dot {
  visibility: hidden;
}
/* Classic fades the partly visible next row so it reads as more content, not a cut-off edge. */
#viewport::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
#homeSurface:not(.ctv-theme-active) #viewport.row-peek::after {
  opacity: 1;
}
/* Rows scrolled above the screen edge fade out under it. */
#viewport::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 96px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
#homeSurface:not(.ctv-theme-active) #viewport.row-above::before {
  opacity: 1;
}
/* Themes that opt into Classic motion (dock-grid only) keep both fades, softer so they
   read as a vignette over a wallpaper. */
#homeSurface.ctv-classic-motion #viewport::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
#homeSurface.ctv-classic-motion #viewport::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}
#homeSurface.ctv-classic-motion #viewport.row-peek::after,
#homeSurface.ctv-classic-motion #viewport.row-above::before {
  opacity: 1;
}
/* Classic keeps the localized date on two lines: weekday, then month and day. */
#homeSurface[data-layout='dock-grid'] #date {
  white-space: pre-line;
}
/* ---- toast ----------------------------------------------------------------------------------- */
#toast {
  position: absolute;
  left: 50%;
  bottom: 80px;
  padding: 20px 40px;
  border-radius: 40px;
  background: rgba(40, 40, 44, 0.95);
  font-size: 28px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 200ms ease;
  z-index: 6;
}
#toast.shown {
  opacity: 1;
}
#topButtons {
  flex-shrink: 0;
}
/* Screen editing: the + tile is fixed at the end, outside the movable apps. */
.add-app .card {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #62656d;
}
.add-app svg {
  width: 64px;
  height: 64px;
}
.card.missing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card.missing-icon::after {
  content: attr(data-initial);
  display: flex;
  align-items: center;
  justify-content: center;
}
.item.moving .card {
  outline: 4px solid #fff;
}
.item.moving::after {
  content: '←  ↑  ↓  →';
  position: absolute;
  top: -55px;
  width: 100%;
  text-align: center;
}
#hideApp,
#appUndo button,
#appPicker button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 22px;
  background: #303239;
  outline: none;
}
#hideApp {
  position: absolute;
  z-index: 8;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 18px 32px;
  font-size: 28px;
}
#hideApp svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
#hideApp.focused,
#hideApp:focus,
#appUndo button:focus,
#appPicker button:focus {
  border-color: white;
  background: #f3f3f4;
  color: #15161a;
}
#editHint {
  position: absolute;
  z-index: 8;
  bottom: 25px;
  width: 100%;
  text-align: center;
  font-size: 23px;
  color: #c5c6cd;
}
#appUndo {
  position: absolute;
  z-index: 9;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 18px 24px 18px 32px;
  border: 1px solid #555862;
  border-radius: 28px;
  background: #24262c;
  font-size: 28px;
  white-space: nowrap;
}
#appUndo button {
  padding: 12px 28px;
}
#appPicker {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-picker-card {
  width: 1120px;
  padding: 46px 52px;
  border: 1px solid #434650;
}
.app-picker-card h2 {
  margin-bottom: 14px;
}
#appPickerStatus {
  min-height: 68px;
  line-height: 1.35;
  margin-bottom: 20px;
}
#appPickerList {
  max-height: 580px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 24px;
}
#appPicker .app-choice {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  min-height: 96px;
  padding: 12px 22px;
  margin-bottom: 10px;
}
.app-choice img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
#appPickerClose {
  padding: 16px 28px;
}
#hideApp[hidden],
#editHint[hidden],
#appUndo[hidden],
#appPicker[hidden] {
  display: none;
}
body.editing header {
  pointer-events: none;
}
/* Old engines keep normal motion; this optional accessibility override is safe to ignore. */
/* doiuse-disable prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .item,
  .card,
  #glass,
  .name,
  #stage,
  #hero,
  .pill,
  #inputShelf,
  #inputShelfWindow,
  #inputShelfTrack,
  .input-tile,
  .input-glyph,
  .input-dot,
  .input-name,
  .input-detail,
  #viewport,
  #viewport::before,
  #viewport::after,
  .ambient {
    transition: none !important;
    animation: none !important;
  }
}
/* doiuse-enable prefers-reduced-motion */
body.editing #hero {
  visibility: hidden;
  opacity: 0 !important;
}
body.editing .item.moving .name {
  display: block;
  opacity: 1;
  transform: none;
}
/* Spacing for the pre-flex-gap TV engines. */
#hideApp svg {
  margin-right: 16px;
}
#appUndo button {
  margin-left: 30px;
}
.app-choice img {
  margin-right: 24px;
}

/* Trusted layout templates. External CSS never controls hit areas or positions. */
.ctv-theme-active #glass::before {
  background: none;
}
#homeSurface[data-layout='icon-grid'] #hero,
#homeSurface[data-layout='side-grid'] #hero {
  display: none;
}
#homeSurface[data-layout='icon-grid'] header {
  top: 70px;
  align-items: center;
}
#homeSurface[data-layout='icon-grid'] #clock {
  font-size: 46px;
}
#homeSurface[data-layout='icon-grid'] #ampm {
  font-size: 22px;
  margin-bottom: 4px;
}
#homeSurface[data-layout='icon-grid'] #greeting,
#homeSurface[data-layout='icon-grid'] .divider {
  display: none;
}
#homeSurface[data-layout='icon-grid'] #date {
  font-size: 22px;
  margin: 0 0 5px 28px;
}
#homeSurface[data-layout='icon-grid'] .pill {
  height: 60px;
  padding: 0 22px;
  font-size: 25px;
}
#homeSurface[data-layout='icon-grid'] .pill svg {
  height: 30px;
  width: 30px;
}
#homeSurface[data-layout='icon-grid'] .card {
  background: #171717 !important;
}
#homeSurface[data-layout='icon-grid'] .card img {
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
#homeSurface[data-layout='icon-grid'] .name,
#homeSurface[data-layout='side-grid'] .name {
  opacity: 1;
  transform: none;
}

#homeSurface[data-layout='side-grid'] header {
  left: 0;
  top: 0;
  right: auto;
  width: 480px;
  height: 1080px;
  padding: 100px 64px;
  display: block;
}
#homeSurface[data-layout='side-grid'] #timeRow {
  flex-wrap: wrap;
}
#homeSurface[data-layout='side-grid'] #clock {
  font-size: 76px;
}
#homeSurface[data-layout='side-grid'] #ampm {
  font-size: 25px;
  margin-bottom: 12px;
}
#homeSurface[data-layout='side-grid'] #greeting,
#homeSurface[data-layout='side-grid'] .divider {
  display: none;
}
#homeSurface[data-layout='side-grid'] #date {
  width: 100%;
  margin-top: 30px;
  white-space: normal;
  line-height: 1.5;
  font-size: 27px;
}
#homeSurface[data-layout='side-grid'] #topButtons {
  display: block;
  margin-top: 120px;
}
#homeSurface[data-layout='side-grid'] .pill {
  margin: 16px 0;
  padding: 0 16px;
  width: 352px;
  font-size: 27px;
}
#homeSurface[data-layout='side-grid'] .card {
  background: #181818 !important;
}
#homeSurface[data-layout='side-grid'] .card img {
  top: 50%;
  left: 50%;
  width: 72%;
  height: 68%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
#homeSurface[data-layout='side-grid'] #viewport {
  left: 500px;
}
#homeSurface[data-layout='side-grid'] #stage {
  left: -500px;
}

/* Channel uses readable rows, a fixed header and a separate selection detail. */
#homeSurface[data-layout='channel-list'] header {
  top: 52px;
  align-items: center;
}
#homeSurface[data-layout='channel-list'] #timeRow {
  display: block;
}
#homeSurface[data-layout='channel-list'] #clock {
  font-size: 52px;
}
#homeSurface[data-layout='channel-list'] #ampm {
  font-size: 24px;
  margin-bottom: 5px;
}
#homeSurface[data-layout='channel-list'] #greeting,
#homeSurface[data-layout='channel-list'] .divider {
  display: none;
}
#homeSurface[data-layout='channel-list'] #date {
  display: block;
  font-size: 22px;
  margin: 10px 0 0;
}
#homeSurface[data-layout='channel-list'] .pill {
  height: 76px;
  font-size: 30px;
  padding: 0 28px;
}
#homeSurface[data-layout='channel-list'] .pill svg {
  width: 36px;
  height: 36px;
}
#homeSurface[data-layout='channel-list'] #viewport {
  top: 200px;
}
#homeSurface[data-layout='channel-list'] #stage {
  top: -200px;
}
#homeSurface[data-layout='channel-list'] #hero {
  left: 1270px;
  right: 80px;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 52px;
  line-height: 1.25;
  max-height: 420px;
  overflow: hidden;
}
#homeSurface[data-layout='channel-list'] #hero::before {
  content: attr(data-position);
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 24px;
}
#channelArtwork {
  display: none;
  position: absolute;
  left: 1270px;
  top: 250px;
  width: 480px;
  height: 240px;
  object-fit: contain;
  background: #141414;
  pointer-events: none;
}
#homeSurface[data-layout='channel-list'] #channelArtwork {
  display: block;
}
#homeSurface.ctv-channel-multi #channelArtwork,
#homeSurface.ctv-channel-multi #hero {
  display: none;
}
#homeSurface[data-layout='channel-list'] .card {
  background: transparent;
}
#homeSurface[data-layout='channel-list'] .card::after {
  box-shadow: none;
}
#homeSurface[data-layout='channel-list'] .card img {
  left: 60px;
  top: 12px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform: none;
  background: #181818;
}
#homeSurface[data-layout='channel-list'] .name {
  position: absolute;
  top: 0;
  left: 148px;
  right: 16px;
  height: 88px;
  line-height: 88px;
  font-size: 32px;
  margin: 0;
  opacity: 1;
  transform: none;
  text-align: left;
  pointer-events: none;
}
#homeSurface[data-layout='channel-list'] .item::before {
  content: attr(data-channel);
  position: absolute;
  left: 12px;
  top: 0;
  font: 26px/88px monospace;
  color: #69beed;
  z-index: 3;
  pointer-events: none;
}
#homeSurface[data-layout='channel-list'] .item.focused::before {
  color: #181818;
}
#homeSurface[data-layout='channel-list'] .card.missing-icon::after {
  font-size: 44px;
  left: 60px;
  top: 12px;
  right: auto;
  width: 64px;
  height: 64px;
}
#homeSurface[data-layout='channel-list'] .add-app svg {
  position: absolute;
  top: 12px;
  left: 60px;
  width: 64px;
  height: 64px;
}
/* Large column choices keep a useful 48px glyph and a 24px label. */
#homeSurface.ctv-channel-compact .card img {
  left: 50%;
  top: 8px;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
}
#homeSurface.ctv-channel-compact .name {
  left: 8px;
  right: 8px;
  top: 62px;
  height: 32px;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
}
#homeSurface.ctv-channel-compact .item::before {
  display: none;
}
#homeSurface.ctv-channel-compact .add-app svg {
  top: 8px;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
}
#homeSurface.ctv-channel-compact .card.missing-icon::after {
  left: 0;
  top: 6px;
  right: 0;
  width: auto;
  height: 50px;
  font-size: 36px;
}
/* The label and number share row coordinates; selected/moving icons stay aligned. */
#homeSurface[data-layout='channel-list'] .item.focused .card,
#homeSurface[data-layout='channel-list'] .item.moving .card {
  transform: none;
  animation: none;
}
/* A single immediate row highlight: no smaller border followed by a travelling glass. */
#homeSurface[data-layout='channel-list'] #glass {
  visibility: hidden;
  transition: none;
}
#homeSurface[data-layout='channel-list'] #hero,
#homeSurface[data-layout='channel-list'] #stage,
#homeSurface[data-layout='channel-list'] .item,
#homeSurface[data-layout='channel-list'] .card {
  transition: none;
}
/* Keep candidate skins flat and leave selected-frame room before labels. */
.ctv-theme-active .card::after {
  border-radius: inherit;
  box-shadow: none;
}
#homeSurface[data-layout='side-grid'] .name,
#homeSurface[data-layout='icon-grid'] .name {
  margin-top: 34px;
}

/* Scenic: wallpaper first, a large quiet clock and one bottom row at a time. */
#homeSurface[data-layout='scenic-grid'] {
  background-size: cover;
  background-position: center;
}
#homeSurface[data-layout='scenic-grid']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 65%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.18),
      transparent 45%,
      rgba(0, 0, 0, 0.86)
    );
  pointer-events: none;
}
#homeSurface[data-layout='scenic-grid'] header {
  top: 104px;
  align-items: flex-start;
}
#homeSurface[data-layout='scenic-grid'] #timeRow {
  display: block;
}
#homeSurface[data-layout='scenic-grid'] #clock {
  font-size: 176px;
  font-weight: 300;
  letter-spacing: -4px;
}
#homeSurface[data-layout='scenic-grid'] #ampm {
  font-size: 40px;
  margin-left: 16px;
}
#homeSurface[data-layout='scenic-grid'] #date {
  display: block;
  font-size: 30px;
  margin: 22px 0 0 6px;
  text-transform: none;
  letter-spacing: 0;
}
#homeSurface[data-layout='scenic-grid'] #greeting,
#homeSurface[data-layout='scenic-grid'] .divider,
#homeSurface[data-layout='scenic-grid'] #glass {
  display: none;
}
#homeSurface[data-layout='scenic-grid'] .pill {
  height: 72px;
  padding: 0 24px;
  font-size: 28px;
  margin-left: 14px;
}
#homeSurface[data-layout='scenic-grid'] .pill svg {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
#homeSurface[data-layout='scenic-grid'] #viewport {
  top: 730px;
  bottom: 50px;
}
#homeSurface[data-layout='scenic-grid'] #stage {
  top: -730px;
  transition: none;
}
#homeSurface[data-layout='scenic-grid'] .item {
  padding-bottom: 12px;
  border-radius: 6px;
  transition: none;
}
#homeSurface[data-layout='scenic-grid'] .item.focused,
#homeSurface[data-layout='scenic-grid'] .item.moving {
  outline: none;
  background: transparent;
}
#homeSurface[data-layout='scenic-grid'] .card {
  border-radius: 14px;
  transform: none;
  transition: none;
}
#homeSurface[data-layout='scenic-grid'] .card img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}
#homeSurface[data-layout='scenic-grid'] .name {
  opacity: 1;
  transform: none;
  font-size: 28px;
  margin: 16px -32px 0;
  line-height: 32px;
  height: 32px;
  font-weight: 400;
}
#homeSurface[data-layout='scenic-grid'] .card.missing-icon::after {
  font-size: 48px;
}
body.editing #homeSurface[data-layout='scenic-grid'] #viewport {
  top: 600px;
}
body.editing #homeSurface[data-layout='scenic-grid'] #stage {
  top: -600px;
}
.ctv-position {
  display: none;
}
#homeSurface[data-layout='scenic-grid'] .ctv-position {
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 112px;
  color: #ece7df;
  font-size: 28px;
  z-index: 3;
  pointer-events: none;
}
body.editing #homeSurface[data-layout='scenic-grid'] .ctv-position {
  display: none;
}

#homeSurface[data-layout='scenic-grid'] #hero {
  display: block;
  left: 112px;
  right: 400px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  word-wrap: break-word;
  max-height: 132px;
  overflow: hidden;
  transition: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
#homeSurface[data-layout='scenic-grid'] .add-app .name {
  white-space: normal;
  height: 64px;
}
#homeSurface[data-layout='scenic-grid'] .item.focused .card {
  border: 3px solid #ece7df;
}

/* Reorder controls remain in the trusted footer; the ribbon needs no arrow cluster. */
#homeSurface[data-layout='scenic-grid'] .item.moving::after {
  content: none;
}

/* Remote focus follows every key immediately; pointer movement keeps its transitions.
   In particular, repeated arrows must not continually retarget an unfinished scroll.
   On the Classic layout (unthemed, or a theme that opts into Classic motion) the focused
   card still grows in place; app.js lands the glass on it at card size so the frame
   grows with the card instead of gliding behind it. */
#homeSurface.ctv-remote-navigation:not(.ctv-scroll-glide) #stage,
#homeSurface.ctv-remote-navigation .item {
  transition: none !important;
}
/* Other layouts, and themes that don't opt into Classic motion, keep fully immediate
   remote focus. (Chrome 38 has no attribute selectors inside :not(), so the other
   presets are listed.) */
#homeSurface.ctv-remote-navigation.ctv-theme-active:not(.ctv-classic-motion)
  #glass,
#homeSurface.ctv-remote-navigation.ctv-theme-active:not(.ctv-classic-motion)
  .card,
#homeSurface.ctv-remote-navigation.ctv-theme-active:not(.ctv-classic-motion)
  .name,
#homeSurface.ctv-remote-navigation[data-layout='icon-grid'] #glass,
#homeSurface.ctv-remote-navigation[data-layout='icon-grid'] .card,
#homeSurface.ctv-remote-navigation[data-layout='icon-grid'] .name,
#homeSurface.ctv-remote-navigation[data-layout='side-grid'] #glass,
#homeSurface.ctv-remote-navigation[data-layout='side-grid'] .card,
#homeSurface.ctv-remote-navigation[data-layout='side-grid'] .name,
#homeSurface.ctv-remote-navigation[data-layout='channel-list'] #glass,
#homeSurface.ctv-remote-navigation[data-layout='channel-list'] .card,
#homeSurface.ctv-remote-navigation[data-layout='channel-list'] .name,
#homeSurface.ctv-remote-navigation[data-layout='scenic-grid'] #glass,
#homeSurface.ctv-remote-navigation[data-layout='scenic-grid'] .card,
#homeSurface.ctv-remote-navigation[data-layout='scenic-grid'] .name {
  transition: none !important;
}
/* A single tap glides to the next row; app.js removes this during held arrows. */
#homeSurface.ctv-scroll-glide #stage {
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Edge bump: a press that cannot move nudges the grid or shelf and springs back.
   It moves the untransformed wrappers, so the inline scroll and glass transforms stay
   untouched and the bump runs on the compositor. */
#homeSurface.ctv-edge-bump.bump-down #viewport {
  animation: ctv-bump-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#homeSurface.ctv-edge-bump.bump-left #viewport,
#homeSurface.ctv-edge-bump.bump-shelf-left #inputShelfWindow {
  animation: ctv-bump-left 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#homeSurface.ctv-edge-bump.bump-right #viewport,
#homeSurface.ctv-edge-bump.bump-shelf-right #inputShelfWindow {
  animation: ctv-bump-right 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ctv-bump-down {
  40% {
    transform: translateY(10px);
  }
}
@keyframes ctv-bump-left {
  40% {
    transform: translateX(-10px);
  }
}
@keyframes ctv-bump-right {
  40% {
    transform: translateX(10px);
  }
}

/* Ribbon editing keeps the lane anchored and exposes controls at the moving card. */
body.ribbon-editing #homeSurface[data-ribbon='true'] #viewport,
body.ribbon-editing #homeSurface[data-ribbon='true'] #stage {
  top: 0;
}
body.ribbon-editing #homeSurface.ctv-home[data-ribbon='true'] .item .name {
  display: none !important;
}
body.ribbon-editing #homeSurface[data-ribbon='true'] .item.moving .card {
  outline: none;
}
.ribbon-edit-arrow {
  position: absolute;
  z-index: 6;
  width: 28px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
.ribbon-edit-arrow svg {
  width: 24px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ribbon-edit-left {
  left: -30px;
}
.ribbon-edit-right {
  right: -30px;
}
.ribbon-delete-mark {
  display: none;
}
body.ribbon-editing #hideApp {
  bottom: auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  justify-content: center;
}
body.ribbon-editing #hideApp::before {
  content: none;
}
body.ribbon-editing #hideApp .hide-standard-icon {
  display: none;
}
body.ribbon-editing #hideApp .ribbon-delete-mark {
  display: block;
  width: 36px;
  height: 36px;
  stroke-width: 2.8;
}
body.ribbon-editing #hideApp span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
body.ribbon-editing #hideApp.focused {
  background: transparent;
  color: #fff;
}
body.ribbon-editing #hideApp.focused .ribbon-delete-mark {
  width: 44px;
  height: 44px;
  stroke-width: 3.2;
}
body.ribbon-editing #editHint {
  bottom: auto;
  color: #fff;
  text-shadow: 0 2px 6px #000;
}

#homeSurface.ctv-remote-navigation #hideApp {
  transition: none !important;
}