/* ==========================================================================
   CP Elora — app shell
   --------------------------------------------------------------------------
   Loaded after design.css on the pages that opt in with $appRail.

   This layer gives the site the frame a streaming service has: a fixed rail of
   navigation on the left, one sticky bar across the top, a hero that is one
   picture with the promise written on it, and rows of cards that scroll
   sideways. Colour still comes only from the tokens, so light and dark both
   work; the hero sets its own scrim because it sits over artwork.
   ========================================================================== */

/* The rail only exists on a wide screen. Below that the header keeps the
   navigation it has always had, so nothing is lost on a phone. */
.app-rail { display: none; }

@media (min-width: 1041px) {
  body.has-rail { padding-left: 244px !important; }
  body.has-rail .app-rail {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: 244px;
    z-index: 60;
    padding: 16px 12px 14px;
    background: var(--bg-elev);
    border-right: 1px solid var(--line);
    overflow-y: auto;
  }
  /* One navigation on screen: the rail carries it, so the bar drops it. */
  body.has-rail .main-nav { display: none !important; }
  body.has-rail .mobile-menu { display: none !important; }
  /* The rail already carries the wordmark, so the bar keeps only search and the
     account controls and starts at the left edge of the content. */
  body.has-rail .arc-header .brand { display: none !important; }
  body.has-rail .arc-header .header-inner { padding: 0 22px !important; gap: 16px; }
  body.has-rail .header-search { flex: 1 1 auto; max-width: 560px; margin-right: auto; margin-left: 0; }
  body.has-rail .header-search input { width: 100%; }
}

/* A shorter desktop gets the icons only, so the page keeps its width. */
@media (min-width: 1041px) and (max-width: 1180px) {
  body.has-rail { padding-left: 76px !important; }
  body.has-rail .app-rail { width: 76px; align-items: center; padding-inline: 10px; }
  body.has-rail .app-rail-brand .app-rail-lock { display: none; }
  body.has-rail .app-rail-brand .app-rail-mark { display: block; }
  body.has-rail .rail-link span,
  body.has-rail .rail-label,
  body.has-rail .rail-link .rail-badge { display: none; }
  body.has-rail .rail-link { justify-content: center; padding: 11px 0; }
  body.has-rail .rail-group { width: 100%; }
}

.app-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  text-decoration: none;
}
.app-rail-brand img.app-rail-lock { display: block; height: 34px; width: auto; }
.app-rail-brand img.app-rail-mark { display: none; height: 30px; width: 30px; }

.rail-group { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.rail-group:first-of-type { border-top: 0; }
.rail-label {
  padding: 0 10px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.rail-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail-link.active { background: var(--lime-soft); color: var(--text); }
.rail-link.active svg { color: var(--lime-bright); }
.rail-link .rail-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--lime-bright);
}
.rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }

/* ---------- Top bar ---------- */
body.has-rail .arc-header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: var(--header-bg) !important;
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line) !important;
}
body.has-rail .arc-header .header-inner { max-width: none !important; min-height: 64px; }

/* ---------- Hero banner ---------- */
/* One picture the width of the page with the promise on it. The scrim is what
   makes white text safe over any artwork, in either theme. */
.hero-banner {
  position: relative;
  display: flex;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  min-height: clamp(300px, 32vw, 420px);
  background: var(--surface-2);
}
.hero-banner .hero-art { position: absolute; inset: 0; }
.hero-banner .hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-banner .hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 7, 8, 0.94) 0%, rgba(6, 7, 8, 0.78) 38%, rgba(6, 7, 8, 0.26) 72%, rgba(6, 7, 8, 0.06) 100%),
    linear-gradient(0deg, rgba(6, 7, 8, 0.72) 0%, rgba(6, 7, 8, 0) 58%);
}
.hero-banner .hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(22px, 3vw, 44px);
  max-width: min(780px, 92%);
}
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 7, 8, 0.5);
  color: #f4f6f2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4b4b;
  box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.22);
}
.hero-banner h1 {
  margin: 4px 0 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(34px, 4.6vw, 60px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  font-weight: 700 !important;
  text-wrap: balance;
}
.hero-banner h1 em { font-style: normal; color: var(--lime); }
.hero-banner .hero-copy-text { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.6; }
.hero-banner .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* Over artwork the copy is white whatever the theme is; with no artwork it uses
   the theme's own text colour. */
.hero-banner.has-art h1 { color: #ffffff; }
.hero-banner.has-art .hero-copy-text { color: rgba(255, 255, 255, 0.82); }
.hero-banner.no-art h1 { color: var(--text); }
.hero-banner.no-art .hero-copy-text { color: var(--muted); }
.button-glass {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
.button-glass:hover { background: rgba(255, 255, 255, 0.18) !important; }

/* ---------- Quick links ---------- */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background 0.14s ease;
}
.quick-links a:first-child { border-left: 0; }
.quick-links a:hover { background: var(--surface-2); }
.quick-links strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.quick-links small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.quick-links i { font-style: normal; color: var(--dim); transition: transform 0.14s ease; }
.quick-links a:hover i { color: var(--lime-bright); transform: translateX(3px); }

/* ---------- Rails ---------- */
/* Rows of cards that scroll sideways. A directory reads as a service this way
   and as a spreadsheet when the same cards are wrapped into a grid. */
.home-main .stream-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  /* A fixed column, not a flexible one: a rail with a single live channel must
     still be a card, not a 1100px poster. */
  grid-auto-columns: 288px !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.home-main .stream-grid::-webkit-scrollbar { height: 0; display: none; }
.home-main .stream-grid > * { scroll-snap-align: start; }
.home-main .stream-grid > .discovery-empty { grid-column: auto !important; min-width: 100%; }
.stream-thumb { border-radius: 14px !important; border-color: var(--line) !important; }
.stream-card { transition: transform 0.16s ease; }
.stream-card:hover { transform: translateY(-2px); }
.stream-card:hover .stream-thumb { border-color: var(--line-strong) !important; }
.stream-card-copy strong { font-size: 14px !important; }
.stream-avatar { width: 36px !important; height: 36px !important; }
.stream-card-meta { grid-template-columns: 36px minmax(0, 1fr) !important; }
/* LIVE is red on a stream card: it is a state, and the same red everywhere. */
.stream-thumb .live-pill {
  background: #e5342b !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.stream-thumb .live-pill i { background: #fff !important; margin-right: 5px; }
.stream-thumb .offline-pill {
  background: rgba(6, 7, 8, 0.74) !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #e9ecdf !important;
}
.stream-thumb .viewer-count {
  left: 8px;
  right: auto;
  bottom: 8px;
  background: rgba(6, 7, 8, 0.74) !important;
  border-radius: 6px !important;
  color: #fff !important;
}
.feature-layout { border-radius: 16px !important; }

/* Cover art for the games the site knows about, on the same sideways rail: a
   poster grid of 318,000 titles is a catalogue, but eight suggested games are a
   row. */
body.has-rail #homeCategoryGrid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: 168px !important;
  gap: 14px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
}
body.has-rail #homeCategoryGrid::-webkit-scrollbar { height: 0; display: none; }
body.has-rail #homeCategoryGrid > .category-card { min-width: 0; }

/* ---------- Page rhythm ---------- */
body.has-rail .section-heading { margin-top: var(--s6) !important; }
body.has-rail .home-shell-wide .home-main {
  padding-inline: clamp(18px, 2.6vw, 36px) !important;
  max-width: 1560px !important;
}
body.has-rail .arc-footer .footer-inner { max-width: 1560px !important; }
body.has-rail .creator-banner { border-radius: 16px !important; }

@media (max-width: 900px) {
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-links a:nth-child(3) { border-left: 0; }
  .quick-links a:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .home-main .stream-grid { grid-auto-columns: 236px !important; }
  .hero-banner { min-height: 340px; }
  .hero-banner .hero-body { max-width: 100%; }
  .hero-banner .hero-art::after {
    background: linear-gradient(0deg, rgba(6, 7, 8, 0.94) 12%, rgba(6, 7, 8, 0.55) 52%, rgba(6, 7, 8, 0.2) 100%);
  }
}

/* Light mode: the rail and the quick links are paper, the hero keeps its scrim
   because it is a picture on any theme. */
html[data-theme="light"] .app-rail { background: var(--surface) !important; }
html[data-theme="light"] .rail-link:hover { background: var(--surface-2); }
html[data-theme="light"] .rail-link.active { background: rgba(85, 127, 0, 0.1); color: #14170f; }
html[data-theme="light"] .hero-banner.no-art { background: var(--surface-2); }

/* ---------- 16. Home hero: the live stream itself ----------
   The reference opens on a broadcast, not on a slogan: the player fills the frame, the
   channel's own title and name sit on it with a green Watch button, and the chat is beside
   it. The marketing headline stays for screen readers and for the empty state. */
.home-hero { margin: 12px 0 0; }
.hero-feature-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.hero-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.hero-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #e5342b; box-shadow: 0 0 0 3px rgba(229, 52, 43, .18); }

.home-hero .feature-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.home-hero .feature-layout.is-empty { grid-template-columns: minmax(0, 1fr) !important; }
.home-hero .arc-feature-card {
  position: relative;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--surface-2) !important;
}
.home-hero .arc-feature-media { position: relative; aspect-ratio: 16 / 9; min-height: 0 !important; }
.home-hero .arc-feature-media video,
.home-hero .arc-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Until the stream produces a frame, the cover behind shows through. */
.home-hero .arc-feature-media video { opacity: 0; transition: opacity .25s ease; }
.home-hero .arc-feature-media video.is-playing { opacity: 1; }
/* The connection note belongs out of the way, not across the channel bar. */
.home-hero .arc-feature-status {
  left: auto !important;
  right: 12px !important;
  top: 12px !important;
  bottom: auto !important;
  max-width: 240px;
  text-align: left !important;
  border-radius: 999px !important;
  background: rgba(8, 9, 10, .78) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  padding: 5px 10px !important;
}
/* The channel bar sits on the picture, over a scrim, like a player overlay. */
.home-hero .arc-feature-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 40px 18px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0));
}
.home-hero .arc-feature-info strong { color: #fff; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.home-hero .arc-feature-info small { color: rgba(255, 255, 255, .74); }
.home-hero .arc-feature-info .category-label { color: var(--lime) !important; font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.home-hero .feature-cta {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lime) !important; color: #0c1206 !important;
  border: 0 !important;
  border-radius: 9px; padding: 10px 18px;
  font-weight: 700; font-size: 13px; text-decoration: none;
}
.home-hero .feature-cta:hover { background: var(--lime-bright); }
.home-hero .arc-chat { border-radius: 14px !important; overflow: hidden; height: 100%; }
.home-hero .arc-feature-placeholder { padding: clamp(28px, 4vw, 56px) !important; min-height: 380px; }

/* The line-up under the player. */
.hero-strip { margin: 18px 0 0; }
.hero-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hero-strip-head h2 {
  margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.hero-strip-head a { color: var(--lime); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.hero-strip-head a:hover { color: var(--lime-bright); }
.for-you-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 12px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  scrollbar-width: none;
}
.for-you-rail::-webkit-scrollbar { height: 0; display: none; }
.for-you-rail > .discovery-empty { min-width: 100%; }
.for-you-card { display: grid; gap: 6px; min-width: 0; text-decoration: none; color: inherit; }
.for-you-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.for-you-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.for-you-card strong {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.for-you-card small {
  font-size: 11px; color: var(--lime);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.for-you-thumb .live-pill { top: 6px; left: 6px; padding: 2px 5px !important; font-size: 8.5px !important; }
.for-you-thumb .viewer-count { left: 6px; top: 30px; bottom: auto; padding: 2px 5px !important; font-size: 8.5px !important; }

/* An avatar is the initial, with the picture laid over it. If the picture fails the
   initial is already there, so a broken image can never show alt text or an empty hole. */
.stream-card-meta .stream-avatar,
.arc-feature-info .stream-avatar { position: relative; }
.stream-card-meta .stream-avatar img,
.arc-feature-info .stream-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Cards carry the game's cover as an inline background, so nothing here may override
   background-image; a channel with no cover at all keeps the flat surface underneath. */

/* ---------- 17. Card and heading language ---------- */
/* Cards are art on the page with no frame around it, the game is named in the accent, and a
   section heading is a bold line with a green View all, not an editorial label block. */
.stream-thumb { border: 0 !important; background: var(--surface-2); }
.stream-card-copy .category-label {
  color: var(--lime) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 11.5px !important;
}
body.has-rail .section-heading {
  border-bottom: 0 !important;
  margin: 28px 0 12px !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}
body.has-rail .section-heading .eyebrow { display: none !important; }
body.has-rail .section-heading h2 { font-size: 17px !important; letter-spacing: -.02em !important; }
body.has-rail .section-heading p { margin-top: 2px !important; font-size: 12px !important; }
body.has-rail .section-heading .text-link {
  color: var(--lime) !important;
  border: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600;
}
body.has-rail .section-heading .text-link:hover { color: var(--lime-bright) !important; }

@media (max-width: 900px) {
  .home-hero .feature-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .for-you-rail { grid-auto-columns: 148px; }
  .home-hero .feature-cta { padding: 8px 12px; font-size: 12px; }
}
/* The page's own headline is for screen readers and the empty state only; there is no
   sloganeering band above the player any more. */
.home-hero > h1.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 18. The rail's live list ---------- */
/* Who is on air, with their picture and their game. This is the part of the reference rail
   that makes the product feel inhabited; the navigation alone reads as a settings menu. */
.app-rail .rail-live { padding-bottom: 6px; }
.app-rail .sidebar-channels { display: flex; flex-direction: column; gap: 2px; }
.app-rail .sidebar-channel {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
}
.app-rail .sidebar-channel:hover { background: var(--surface-2); color: var(--text); }
.app-rail .sidebar-avatar {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--surface-3);
  color: var(--text); font-size: 11px; font-weight: 700;
}
.app-rail .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-rail .sidebar-channel-copy { display: grid; gap: 1px; min-width: 0; flex: 1; }
.app-rail .sidebar-channel-copy strong {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-rail .sidebar-channel-copy small {
  font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-rail .sidebar-status {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em;
  color: #ff5a52;
}
.app-rail .sidebar-status i { width: 5px; height: 5px; border-radius: 50%; background: #e5342b; }
.app-rail .sidebar-viewers { color: var(--dim); }
.app-rail .sidebar-empty { padding: 2px 8px; font-size: 10.5px; color: var(--dim); }
/* The icon-only rail keeps the pictures and drops the text, which is still a who's-on-air list. */
@media (min-width: 1041px) and (max-width: 1180px) {
  body.has-rail .app-rail .sidebar-channel { justify-content: center; padding: 6px 0; }
  body.has-rail .app-rail .sidebar-channel-copy,
  body.has-rail .app-rail .sidebar-status { display: none; }
}