/* ==========================================================================
   CP Elora — design layer
   --------------------------------------------------------------------------
   Loaded last, after style.css, site.css, studio.css and theme.css.

   This is not another coat of paint. It replaces the *structure* of the public
   pages: one content width, one rhythm, one card shape, and headings that read
   as editorial sections rather than dashboard panels.

   Rules followed throughout:
     - colour comes only from the existing tokens, so light and dark both work;
     - nothing glows, nothing gradients, nothing floats on a shadow;
     - one radius scale (8 / 12 / 999) and one hairline weight;
     - spacing comes from --s1..--s8.
   ========================================================================== */

:root {
  --page: 1280px;
  --rule: 1px solid var(--line);
  --card-r: 12px;
  --pill-r: 999px;
  /* One accent. The old violet is aliased to the lime so no page can reintroduce a second
     palette by asking for it, which is what kept dragging the channel and studio pages back
     to the previous look. */
  --violet: var(--lime);
  --violet-bright: var(--lime-bright);
  --violet-soft: rgba(200, 249, 78, 0.16);
  --neon-magenta: #ff8fb1;
}

/* One navigation. The left rail repeated the header word for word, so it is gone and the
   pages it sat beside now use the full content width. */
.home-sidebar { display: none !important; }
.home-shell { display: block !important; }
.home-main { max-width: var(--page) !important; margin-inline: auto !important; }

/* ---------- 1. Page frame ---------- */
.home-shell,
.browse-shell,
.wrap,
.channel-shell {
  max-width: var(--page) !important;
  margin-inline: auto !important;
}
.home-shell-wide {
  display: block !important;
  max-width: none !important;
}
.home-shell-wide .home-main {
  max-width: var(--page) !important;
  margin-inline: auto !important;
  padding: 0 clamp(16px, 2.4vw, 32px) var(--s8) !important;
}
main {
  padding-bottom: 0 !important;
}

/* ---------- 2. Hero ---------- */
/* A single band across the top of the page. Left: the promise. Right: four
   ways in. No artwork behind it, because the directory below is the artwork. */
.hero-band {
  border-bottom: var(--rule);
  margin: 0 calc(-1 * clamp(16px, 2.4vw, 32px)) 0;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
}
.hero-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  max-width: var(--page);
  margin-inline: auto;
}
.hero-band h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 68px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  font-weight: 700;
  margin: 14px 0 0 !important;
  text-wrap: balance;
}
.hero-band h1 em {
  font-style: normal;
  color: var(--lime);
}
.hero-band .hero-copy p {
  margin: var(--s4) 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.hero-band .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-band .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s5);
}

.hero-jump {
  display: grid;
  border-top: var(--rule);
}
.hero-jump-label {
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: var(--rule);
}
.hero-jump a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 13px 2px;
  border-bottom: var(--rule);
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s ease, padding 0.15s ease;
}
.hero-jump a span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-jump a small {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-jump a i {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-style: normal;
  font-size: 15px;
  color: var(--dim);
  transition: transform 0.15s ease, color 0.15s ease;
}
.hero-jump a:hover { color: var(--lime-bright); padding-left: 6px; }
.hero-jump a:hover i { color: var(--lime-bright); transform: translateX(3px); }

@media (max-width: 900px) {
  .hero-band-inner { grid-template-columns: 1fr; align-items: start; }
  .hero-band h1 { font-size: clamp(34px, 9vw, 48px) !important; }
}

/* ---------- 3. Sections ---------- */
/* Every section opens the same way: a mono label, a title, a rule, then content.
   The header row is shared by home, browse, games and the channel page. */
.section-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: var(--s4) !important;
  margin: var(--s7) 0 var(--s4) !important;
  padding-bottom: var(--s3) !important;
  border-bottom: var(--rule) !important;
}
.section-heading h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: block !important;
}
.section-heading p {
  margin: 6px 0 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted) !important;
  max-width: 60ch;
}
.section-heading .eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.section-heading .text-link {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted) !important;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.section-heading .text-link:hover { color: var(--text) !important; border-bottom-color: var(--line-strong); }
.home-section,
.home-feature-section { padding-top: 0 !important; }

/* The live dot is a state, not decoration: it only appears next to something live. */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
}

/* ---------- 4. Stream cards ---------- */
.stream-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
  gap: var(--s5) var(--s4) !important;
}
.stream-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.stream-card:hover { transform: none !important; }
.stream-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--card-r) !important;
  overflow: hidden;
  border: var(--rule);
  /* Background colour only: cards carry the game's cover as an inline background-image,
     and the shorthand here would wipe it. */
  background-color: var(--surface-2) !important;
}
.stream-thumb img,
.stream-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stream-card:hover .stream-thumb { border-color: var(--line-strong); }
.stream-card-meta {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px !important;
  align-items: start;
  padding: 0 !important;
}
/* Initials and small account chips are neutral surfaces with readable text. Painting them
   with the accent made a dark-on-dark square in light mode and shouted on every card. */
.avatar-lilac,
.avatar-pink,
.avatar-mint,
.avatar-gold,
.av-lilac,
.av-pink,
.av-blue,
.av-green,
.avatar-stack span {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.stream-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.stream-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stream-card-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stream-card-copy strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em;
  color: var(--text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stream-card-copy small {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.35 !important;
}
.stream-card-copy .category-label {
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim) !important;
  margin-top: 2px;
}
.live-pill,
.offline-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-family: var(--font-mono);
  font-size: 9.5px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(9, 10, 10, 0.72) !important;
  color: #f4f6f2 !important;
  backdrop-filter: blur(6px);
}
.live-pill i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #ff4b4b;
}
.viewer-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  background: rgba(9, 10, 10, 0.72) !important;
  color: #f4f6f2 !important;
  font-family: var(--font-mono);
  font-size: 9.5px !important;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}

/* ---------- 5. Category tiles ---------- */
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: var(--s3) !important;
}
.category-card {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 16px 16px !important;
  border: var(--rule) !important;
  border-radius: var(--card-r) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.category-card:hover { border-color: var(--line-strong) !important; background: var(--surface-2) !important; }
.category-card strong { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text) !important; }
.category-card small { grid-column: 1; font-size: 11.5px !important; color: var(--dim) !important; }
.category-card .category-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 15px !important;
  color: var(--lime) !important;
  background: none !important;
  padding: 0 !important;
}

/* The home grid swaps its six tiles for real game artwork once the catalogue answers.
   An artwork tile is a poster with its caption underneath, exactly like the games page:
   text laid over a cover is unreadable on bright art and hides the art itself. */
.category-card.has-art {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.category-card.has-art img {
  position: static !important;
  inset: auto !important;
  width: 100%;
  height: auto !important;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border: var(--rule);
  border-radius: var(--card-r);
  background: var(--surface-2);
}
.category-card.has-art strong {
  order: 2;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-card.has-art small {
  order: 3;
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim) !important;
}
/* Older rules pinned the caption over the artwork; un-pin it here, with the specificity
   those rules use. */
.category-card.has-art strong,
.category-card.has-art small {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  text-shadow: none !important;
  color: inherit;
}
.category-card.has-art small { color: var(--dim) !important; }
.category-card.has-art strong { color: var(--text) !important; }
.category-card.has-art::after,
.category-card.has-art::before { display: none !important; }
.category-card.has-art:hover img { border-color: var(--line-strong); }
.category-card.has-art:hover { background: transparent !important; }
.category-card.has-art:focus-visible { outline: none !important; }
.category-card.has-art:focus-visible img { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Smaller than a stream card on purpose: this grid is a shortcut into the catalogue,
   not the main event. */
#homeCategoryGrid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: var(--s4) var(--s3) !important;
}

/* An empty state is a line of text on a rule, not a grey box the size of a player. */
.discovery-empty {
  grid-column: 1 / -1;
  min-height: 0 !important;
  padding: var(--s5) 0 !important;
  border: 0 !important;
  border-top: var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* The category chips are a single rail that scrolls sideways. Wrapped onto two or three
   lines they push the directory off the screen and read as a tag cloud. */
.browseChips,
#browseChips,
.browse-chips,
#homeCategoryFilters {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  gap: 8px !important;
  padding-bottom: 6px !important;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.browseChips::-webkit-scrollbar,
#browseChips::-webkit-scrollbar,
#homeCategoryFilters::-webkit-scrollbar { height: 0 !important; display: none !important; }
.browseChips > *,
#homeCategoryFilters > * { flex: 0 0 auto; }

/* ---------- 6. Chips and controls ---------- */
.filter-chip,
.browse-chip,
.catalogue-chip {
  border-radius: var(--pill-r) !important;
  border: var(--rule) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 32px !important;
  padding: 0 13px !important;
}
.filter-chip:hover,
.browse-chip:hover { color: var(--text) !important; border-color: var(--line-strong) !important; }
.filter-chip.active,
.browse-chip.active {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
.button {
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.button-primary {
  background: var(--lime) !important;
  border-color: var(--lime) !important;
  color: var(--on-accent) !important;
}
.button-primary:hover { background: var(--lime-bright) !important; border-color: var(--lime-bright) !important; }
.button-ghost,
.button-quiet {
  background: transparent !important;
  border: var(--rule) !important;
  color: var(--text) !important;
}
.button-ghost:hover,
.button-quiet:hover { border-color: var(--line-strong) !important; background: var(--surface-2) !important; }

/* ---------- 7. Home extras ---------- */
/* The featured slot and the chat beside it are one panel with a divider, not two
   floating cards. */
.feature-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr) !important;
  gap: 0 !important;
  border: var(--rule) !important;
  border-radius: var(--card-r) !important;
  overflow: hidden;
}
.arc-feature-card {
  border: 0 !important;
  border-right: var(--rule) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
}
.arc-chat,
.arc-chat-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bg-elev) !important;
}
.arc-feature-placeholder { padding: clamp(24px, 3vw, 44px) !important; }
.feature-title { font-family: var(--font-display) !important; letter-spacing: -0.03em; }
.creator-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, 0.7fr) !important;
  gap: var(--s5) !important;
  align-items: center;
  margin-top: var(--s7) !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: var(--rule) !important;
  border-radius: var(--card-r) !important;
  background: var(--surface) !important;
}
.creator-banner h2 { font-size: clamp(22px, 2.4vw, 30px) !important; letter-spacing: -0.03em; }
.creator-banner-side { border-left: var(--rule); padding-left: var(--s5); text-align: right; }
.creator-banner-big {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--lime);
}

/* ---------- 8. Footer ---------- */
.arc-footer {
  border-top: var(--rule) !important;
  background: var(--bg) !important;
  margin-top: var(--s8) !important;
}
.footer-inner { max-width: var(--page) !important; padding: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 32px) var(--s5) !important; }
.footer-top { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) !important; gap: clamp(24px, 4vw, 64px) !important; }
.footer-brand p { color: var(--muted) !important; font-size: 13px !important; max-width: 34ch; }
.footer-brand .pill { display: none !important; }
.footer-cols { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--s4) !important; }
.footer-col h3 {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--dim) !important;
  margin: 0 0 var(--s2) !important;
}
.footer-col a {
  display: block;
  padding: 3px 0;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  text-decoration: none;
}
.footer-col a:hover { color: var(--text) !important; }
.footer-bottom {
  margin-top: var(--s6) !important;
  padding-top: var(--s3) !important;
  border-top: var(--rule) !important;
  display: flex !important;
  justify-content: space-between;
  gap: var(--s4);
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  letter-spacing: 0.04em;
  color: var(--dim) !important;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr !important; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feature-layout { grid-template-columns: 1fr !important; }
  .arc-feature-card { border-right: 0 !important; border-bottom: var(--rule) !important; }
  .creator-banner { grid-template-columns: 1fr !important; }
  .creator-banner-side { border-left: 0; border-top: var(--rule); padding: var(--s4) 0 0; text-align: left; }
}

/* The games heading already closes with a rule, so the grid section must not add another
   50px of air between them. */
#categoryDirectorySection { margin-top: 0 !important; padding-top: 0 !important; }

/* ---------- 9. Page heads ---------- */
.browse-head,
.page-head,
.page-header,
.category-head {
  border-bottom: var(--rule) !important;
  padding-bottom: var(--s5) !important;
  margin-bottom: var(--s5) !important;
}
.browse-head h1,
.page-head h1,
.page-header h1 {
  font-size: clamp(32px, 4vw, 52px) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
}
.browse-head p,
.page-head p { color: var(--muted) !important; font-size: 14px !important; }

/* One more row of space than the header had, so the placeholder is not cut off. */
.header-search { min-width: 220px; }
@media (max-width: 1240px) { .header-search { min-width: 0; } }

/* Search fields share one shape. */
.header-search,
.category-search-field,
.browse-search,
.games-search {
  border-radius: 8px !important;
}
.header-search input,
.category-search-field input,
.browse-search input { font-size: 13.5px !important; }

/* The studio and the control room navigate from their own sidebar, so the public nav is
   removed from the bar rather than printed a second time one row lower. */
.arc-header.studio-bar .main-nav { display: none !important; }
.arc-header.studio-bar .header-inner { gap: 18px; }
.arc-header.studio-bar .header-search { margin-right: auto; }

/* Category picker in Creator Studio: a search over the whole catalogue with the choice shown as a
   poster chip. Shared by Channel details and Stream Manager, which used to be a text box and a
   short static dropdown respectively. */
.cd-category { display: grid; gap: 8px; margin: 6px 0 4px; }
.cd-category-label { font-weight: 600; font-size: 13px; }
.cd-category-selected { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.cd-category-art { width: 34px; height: 46px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--surface-3); color: var(--muted); font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.cd-category-art img { width: 100%; height: 100%; object-fit: cover; }
.cd-category-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cd-category-copy strong { font-size: 13.5px; font-weight: 600; }
.cd-category-copy small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cd-category-hint { margin: 0; font-size: 12px; color: var(--muted); }
.cd-category .category-search { margin: 0; }
/* `hidden` has to win over the flex layout above, or an empty category chip stays on screen. */
.cd-category [hidden] { display: none !important; }