/* Classic appearance. Geometry and trusted overlays belong to style.css. */
.ctv-home {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#hero {
  font-size: 96px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
#greeting {
  color: rgba(255, 255, 255, 0.55);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#clock {
  font-size: 104px;
  font-weight: 300;
  letter-spacing: -0.04em;
}
#ampm {
  color: rgba(255, 255, 255, 0.7);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.divider {
  background: rgba(255, 255, 255, 0.2);
}
#date {
  color: rgba(255, 255, 255, 0.65);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pill {
  border-radius: 42px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.08)
  );
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pill svg {
  fill: currentColor;
}
.pill.focused {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  color: #000;
}
#dockBand {
  border-radius: 52px;
  background: #141416;
}
.item.moving .card {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.card {
  border-radius: 32px;
  background: #1c1c1e;
}
.card::after {
  border-radius: 32px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.name {
  color: rgba(255, 255, 255, 0.95);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
#glass {
  border-radius: 38px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0.07)
  );
  box-shadow:
    0 0 4px 2px rgba(255, 255, 255, 0.19),
    0 0 12px 4px rgba(255, 255, 255, 0.08);
}
#glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
}
#inputsPanel {
  border-radius: 40px;
  background: linear-gradient(
    180deg,
    rgba(42, 42, 46, 0.95),
    rgba(22, 22, 24, 0.96)
  );
}
.inputRow {
  border-radius: 24px;
  font-size: 30px;
  font-weight: 500;
}
.inputRow svg {
  fill: currentColor;
}
.inputRow.focused {
  background: rgba(255, 255, 255, 0.96);
  color: #000;
}
.separator {
  background: rgba(255, 255, 255, 0.12);
}
.input-dot {
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.22);
}
.inputRow.disconnected {
  opacity: 0.5;
}
.inputRow.disconnected.focused {
  opacity: 0.85;
}
#inputShelfCaption {
  color: rgba(255, 255, 255, 0.55);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.input-tile {
  border-radius: 32px;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  color: #fff;
}
.input-tile.focused {
  background: rgba(255, 255, 255, 0.96);
  /* Fits the 20px below the grown tile, so the shelf window never clips it. */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #000;
}
.input-tile.disconnected {
  opacity: 0.45;
}
.input-tile.disconnected.focused {
  opacity: 0.85;
}
.input-glyph {
  fill: currentColor;
}
.input-name {
  font-size: 30px;
  font-weight: 500;
}
.input-detail {
  color: rgba(255, 255, 255, 0.6);
  font-size: 21px;
}
.input-tile.focused .input-name {
  font-size: 38px;
}
.input-tile.focused .input-detail {
  font-size: 24px;
}
.input-tile.focused .input-detail {
  color: rgba(0, 0, 0, 0.6);
}
/* The focused tile frames the live picture; its labels sit on a scrim over the video. */
.input-tile.previewing {
  color: #fff;
}
.input-tile.previewing .input-detail {
  color: rgba(255, 255, 255, 0.78);
}
.input-tile.previewing .input-preview {
  background: #000;
}
.input-tile.previewing .input-preview::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 75%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
}
.add-app .card {
  background: #202126;
}
.add-app svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.card.missing-icon {
  background: #292c34;
}
.card.missing-icon::after {
  font-size: 80px;
}
.item.moving .card {
  box-shadow: 0 22px 60px #000b;
}
.item.moving::after {
  font-size: 30px;
}
#appPicker {
  background: rgba(7, 8, 12, 0.96);
}
.app-picker-card {
  border-radius: 32px;
  background: #1d1f25;
}
.app-picker-card h2 {
  font-size: 48px;
  font-weight: 500;
}
#appPickerStatus {
  font-size: 25px;
  color: #c4c7d0;
}
#appPicker .app-choice {
  font-size: 30px;
}
.app-choice img {
  border-radius: 12px;
}
#appPickerClose {
  font-size: 26px;
}
#appPicker #appPickerClose {
  font-size: 26px;
}