/* The six reference compositions share content and navigation, but keep their
   distinct screen hierarchy. The selected composition is controlled by Owner. */
.brand > img {
  filter: none;
}
.variant-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #bed8f5;
}
#variant-preview {
  min-height: 30px;
  padding: 3px 20px 3px 7px;
  color: #f5fbff;
  background: #082342;
  border: 1px solid #2a74a6;
  border-radius: 6px;
  font-size: 12px;
}
.preview-banner a {
  margin-left: 0;
}
.preview-banner a:first-of-type {
  margin-left: auto;
}
.feature-description {
  color: #d2dff1;
  font-size: 19px;
  max-width: 480px;
  line-height: 1.45;
  margin: 12px 0 21px;
}
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.feature-trailer {
  height: 60px;
  min-width: 180px;
  font-size: 20px;
  background: rgba(3, 21, 42, .75);
}
.home-channels {
  margin-top: 24px;
}
.home-channels h2 {
  font-size: 24px;
}
.home-channel-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.home-channel {
  min-height: 90px;
  padding: 14px;
  text-align: left;
  justify-content: flex-start;
  flex-direction: column;
  gap: 5px;
  background: linear-gradient(140deg, #092c50, #061829);
  border: 1px solid #285278;
}
.home-channel strong {
  font-size: 20px;
}
.home-channel small {
  color: #aacbe8;
  font-size: 13px;
}
.channel-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #079bff;
  color: white;
  font-weight: 800;
  flex-shrink: 0;
}
.channel:nth-child(4n+2) .channel-mark { background: #6b55e9; }
.channel:nth-child(4n+3) .channel-mark { background: #00b890; }
.channel:nth-child(4n+4) .channel-mark { background: #fa7f21; }
.live-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bcd3ed;
  font-size: 13px;
  margin: 12px 0 18px;
}
.live-progress progress { flex: 1; height: 6px; }
body[data-variant="nordlicht"] .reference-hero {
  background: transparent;
}
body[data-variant="nordlicht"] .feature-actions {
  margin-top: 0;
}
body[data-variant="horizon"],
body[data-variant="command"],
body[data-variant="spotlight"],
body[data-variant="precision"] {
  background-image: url('/design-assets/aurora-background.jpg');
  background-size: cover;
}
body[data-variant="horizon"] .reference-hero,
body[data-variant="command"] .reference-hero,
body[data-variant="spotlight"] .reference-hero,
body[data-variant="aurora"] .reference-hero,
body[data-variant="precision"] .reference-hero {
  background-image: linear-gradient(90deg, rgba(0, 12, 26, .94) 0%, rgba(0, 15, 31, .61) 44%, rgba(0, 15, 31, .05) 100%), var(--hero-image);
  background-size: cover;
  background-position: center;
  border: 1px solid #22547b;
  border-radius: 12px;
  overflow: hidden;
}
body[data-variant="horizon"] .reference-hero,
body[data-variant="spotlight"] .reference-hero,
body[data-variant="aurora"] .reference-hero {
  height: 440px;
}
body[data-variant="horizon"] .hero-copy,
body[data-variant="spotlight"] .hero-copy,
body[data-variant="aurora"] .hero-copy {
  padding: 70px 35px;
}
body[data-variant="horizon"] .reference-hero h2,
body[data-variant="spotlight"] .reference-hero h2,
body[data-variant="aurora"] .reference-hero h2 {
  font-size: clamp(42px, 4.2vw, 70px);
  letter-spacing: 0;
}
body[data-variant="command"] .shell {
  grid-template-columns: 92px minmax(0, 1fr);
}
body[data-variant="command"] .sidebar {
  padding: 20px 8px;
}
body[data-variant="command"] .brand {
  padding: 0 8px;
}
body[data-variant="command"] .brand span,
body[data-variant="command"] #navigation button {
  font-size: 0;
}
body[data-variant="command"] #navigation button {
  justify-content: center;
  padding: 0;
  gap: 0;
}
body[data-variant="command"] .reference-hero,
body[data-variant="precision"] .reference-hero {
  display: flex;
  height: 390px;
  justify-content: space-between;
}
body[data-variant="command"] .hero-copy,
body[data-variant="precision"] .hero-copy {
  padding: 55px 35px;
}
body[data-variant="command"] .reference-hero h2,
body[data-variant="precision"] .reference-hero h2 {
  font-size: clamp(42px, 4vw, 66px);
  letter-spacing: 0;
}
body[data-variant="command"] .dashboard-live,
body[data-variant="precision"] .dashboard-live {
  align-self: stretch;
  margin: 16px;
  background: rgba(2, 20, 39, .94);
  box-shadow: 0 0 18px #002747;
  width: 285px;
  flex-shrink: 0;
}
body[data-variant="spotlight"] .reference-hero {
  max-width: 1150px;
}
body[data-variant="aurora"] {
  background-image: url('/design-assets/aurora-background.jpg');
}
body[data-variant="aurora"] .reference-hero {
  border-color: #9163c8;
  box-shadow: 0 0 20px #432c89;
}
body[data-variant="aurora"] .primary {
  background: linear-gradient(110deg, #00bcf5, #004fff);
}
body[data-variant="precision"] .reference-hero {
  height: 350px;
}
body[data-variant="precision"] .cards {
  gap: 12px;
}
body[data-variant="precision"] .reference-hero .hero-subtitle {
  font-size: 20px;
}
body[data-variant="precision"] .home-channel {
  min-height: 72px;
}
@media (max-width: 1100px) {
  body[data-variant="command"] .dashboard-live,
  body[data-variant="precision"] .dashboard-live {
    width: 220px;
  }
  .home-channel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body[data-variant="command"] .shell { display: block; }
  body[data-variant="command"] .brand span { display: inline; }
  body[data-variant="command"] .reference-hero,
  body[data-variant="precision"] .reference-hero { height: auto; min-height: 410px; }
  body[data-variant="command"] .dashboard-live,
  body[data-variant="precision"] .dashboard-live { display: none; }
  body[data-variant="horizon"] .hero-copy,
  body[data-variant="command"] .hero-copy,
  body[data-variant="spotlight"] .hero-copy,
  body[data-variant="aurora"] .hero-copy,
  body[data-variant="precision"] .hero-copy { padding: 55px 20px; }
  .feature-description { font-size: 15px; }
  .feature-trailer { min-width: 125px; height: 54px; font-size: 15px; }
  .home-channel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-banner { gap: 7px; flex-wrap: wrap; }
}
body[data-device="android"] .shell { display: block; }
body[data-device="android"] .sidebar { position: static; width: auto; }
body[data-device="android"] .brand span { display: inline; }
body[data-device="android"] .reference-hero { min-height: 350px; }
body[data-device="android"] .hero-copy { padding: 46px 18px; }
body[data-device="android"] .reference-hero h2 { font-size: clamp(30px, 7vw, 52px); }
body[data-device="android"] .feature-description { font-size: 15px; max-width: 360px; }
body[data-device="android"] .dashboard-live { display: none; }