/* Daily Junction vendor-first rebuild, 2026-07-09
   2026-07-12: daisyUI 4 -> 5 token migration (--p/--bc/--b1.. don't exist in
   the v5 build; everything now reads --color-*), sticky two-tier nav +
   mobile drawer, Live TV + Arcade design pass. */
:root {
  --dj-max: 1320px;
  /* Legacy interactive-page aliases (quiz widgets predate the v5 rebuild and
     still read these). Keep them mapped onto daisyUI 5 theme tokens so the
     quiz chrome follows every skin instead of silently losing its styles.
     NB: never name one of these `--border` — daisyUI 5 uses --border as a
     LENGTH (1px) inside calc() for badge/btn padding and borders; overriding
     it with a colour invalidates those calcs and strips every pill's side
     padding sitewide (the 2026-07-12 "clipped eyebrows" bug). */
  --quiz-border: var(--color-base-300);
  --bg2: var(--color-base-200);
  --bg3: var(--color-base-300);
  --text: var(--color-base-content);
  --muted2: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  --accent: var(--color-primary);
  --red: var(--color-error);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.dj-shell {
  min-height: 100vh;
}

/* Page titles were consistently one scale too large across the three DJ
   surfaces. Keep editorial hierarchy, but cap display H1s below billboard
   size so the useful page content starts sooner on phones and laptops. */
.dj-shell main h1.font-display {
  font-size: clamp(1.75rem, 3.6vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.dj-wrap {
  width: min(var(--dj-max), calc(100% - 2rem));
  margin-inline: auto;
}

/* Inline SVG icon set (Lucide) — replaces emoji-as-icon sitewide. Inherits the
   text colour + sits on the text baseline; default ~1em, tunable per context. */
.dj-ico {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  flex: none;
  stroke-width: 2;
}
.dj-ico-sm { width: 0.9em; height: 0.9em; }
.dj-ico-lg { width: 1.35em; height: 1.35em; }
.dj-ico-xl { width: 1.75em; height: 1.75em; }
/* Unmapped glyph passthrough (span, not svg) — size with the icon slot. */
span.dj-ico-emoji { width: auto; height: auto; font-size: 1em; line-height: 1; vertical-align: -0.05em; }
/* Toggled state for icon buttons (favourite/star/like): fill the stroke icon
   instead of swapping in a different glyph — JS toggles .is-on only. */
.is-on > .dj-ico, button[aria-pressed="true"] > .dj-ico { fill: currentColor; }

.dj-prose {
  color: color-mix(in srgb, var(--color-base-content) 90%, transparent);
  font-size: 1.075rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.dj-prose > * + * {
  margin-top: 1.4rem;
}

.dj-prose h2,
.dj-prose h3,
.dj-prose h4 {
  color: var(--color-base-content);
  font-family: inherit;
  line-height: 1.22;
  letter-spacing: -0.018em;
  scroll-margin-top: 90px;
}

.dj-prose h2 {
  font-size: 1.85rem;
  font-weight: 800;
  margin-top: 2.9rem;
}

.dj-prose h3 {
  font-size: 1.38rem;
  font-weight: 750;
  margin-top: 2.1rem;
}

.dj-prose h4 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: 1.7rem;
}

/* Keep a heading tight to the paragraph it introduces. */
.dj-prose h2 + *,
.dj-prose h3 + *,
.dj-prose h4 + * {
  margin-top: 0.6rem;
}

.dj-prose strong,
.dj-prose b {
  font-weight: 700;
  color: var(--color-base-content);
}

.dj-prose em { font-style: italic; }

.dj-prose ul,
.dj-prose ol {
  padding-left: 1.4rem;
}

.dj-prose ul {
  list-style: disc;
}

.dj-prose ol {
  list-style: decimal;
}

.dj-prose li + li {
  margin-top: 0.5rem;
}

.dj-prose li::marker {
  color: var(--color-primary);
}

.dj-prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin-left: 0;
  font-size: 1.2rem;
  line-height: 1.6;
  font-style: italic;
  color: color-mix(in srgb, var(--color-base-content) 82%, transparent);
}

.dj-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.dj-prose a:hover {
  text-decoration-thickness: 2px;
}

.dj-prose img {
  width: 100%;
  height: auto;
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}

.dj-prose figure {
  margin: 2.2rem 0;
}

.dj-prose figure > img {
  margin: 0;
}

.dj-prose figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  text-align: center;
}

.dj-prose hr {
  border: 0;
  height: 1px;
  width: 42%;
  margin: 2.4rem auto;
  background: color-mix(in srgb, var(--color-base-content) 22%, transparent);
}

/* ---- .not-prose escape hatch (injected ad / promo units) ----
   Components injected into the rendered article body — mid-article ad
   slots, DJ house cards, the KaiOS cross-promo aside — must NOT inherit
   the article typography. `.dj-prose img { width: 100% }` in particular
   blew the house card's 20px brand chip up to full column width, turning
   the ad unit into one giant logo (owner-reported 2026-07-20). These
   higher-specificity rules restore component styling inside any
   .not-prose subtree. */
.dj-prose .not-prose img {
  width: auto;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}
.dj-prose .not-prose a {
  text-decoration: none;
}
.dj-prose .not-prose figure { margin: 0; }
/* Belt-and-braces on the two known injected units. */
.dj-prose .dj-house-card__logo { width: 20px; height: 20px; }
.dj-prose .dj-kaios-native img { width: 56px; height: 56px; }

/* Article body: an editorial lead paragraph with a drop cap. */
.article-body .dj-prose > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.62;
  color: var(--color-base-content);
}

.article-body .dj-prose > p:first-of-type::first-letter {
  float: left;
  margin: 0.36rem 0.62rem 0 0;
  font-size: 3.4rem;
  line-height: 0.78;
  font-weight: 800;
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .article-body .dj-prose > p:first-of-type::first-letter {
    font-size: 2.9rem;
  }
}

.dj-prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
}

.dj-prose th,
.dj-prose td {
  border: 1px solid var(--color-base-300);
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.dj-prose code {
  border-radius: 0.4rem;
  background: var(--color-base-200);
  padding: 0.15rem 0.4rem;
  font-size: 0.92em;
}

.dj-prose pre {
  overflow-x: auto;
  border-radius: 1rem;
  background: var(--color-neutral);
  color: var(--color-neutral-content);
  padding: 1rem;
}

.dj-hero-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dj-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dj-card-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dj-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dj-ticker {
  --ticker-gap: 1.5rem;
}

.dj-ticker-track {
  position: relative;
}

.dj-ticker-inner {
  width: max-content;
  animation: dj-ticker-scroll 28s linear infinite;
}

.dj-ticker:hover .dj-ticker-inner {
  animation-play-state: paused;
}

@keyframes dj-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.live-readers {
  white-space: nowrap;
}

/* Prominent shared live-audience signal. It stays in the header on every
   host; the apex mobile copy is a compact top-row chip while desktop keeps
   the full treatment. */
.dj-audience-signal {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-base-300));
  border-radius: 0.45rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 13%, #fff), #fff 74%);
  color: #14213d;
  box-shadow: 0 5px 16px rgba(20, 33, 61, 0.13);
  white-space: nowrap;
}

.dj-audience-beacon {
  position: relative;
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 22%, #fff);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.dj-audience-beacon > span {
  width: 0.66rem;
  height: 0.66rem;
  border-radius: inherit;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 48%, transparent);
  animation: reading-pulse 1.6s ease-in-out infinite;
}

.dj-audience-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42rem;
  line-height: 1;
}

.dj-audience-copy strong {
  color: #0f172a;
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.dj-audience-copy > span {
  color: #334155;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dj-audience-mobile {
  display: none;
}

@media (max-width: 1023px) {
  .dj-audience-signal--desktop {
    display: none;
  }

  .dj-audience-mobile {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
  }

  .dj-audience-mobile .dj-audience-signal {
    width: auto;
    min-height: 2.25rem;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.34rem 0.55rem;
    border-radius: 0.35rem;
    box-shadow: 0 3px 10px rgba(20, 33, 61, 0.11);
  }

  .dj-audience-mobile .dj-audience-beacon {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  .dj-audience-mobile .dj-audience-copy {
    gap: 0.28rem;
  }

  .dj-audience-mobile .dj-audience-copy > span {
    font-size: 0.58rem;
    letter-spacing: 0.035em;
  }
}

.reading-now-dot {
  display: inline-flex;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  animation: reading-pulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes reading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.42); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.sticky-article-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 0.75rem;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sticky-article-bar.is-visible,
.sticky-article-bar--visible,
.sticky-article-bar[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-article-bar__inner {
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-base-100) 94%, transparent);
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}

.exit-popup,
.nl-sticky,
.nl-timed {
  position: fixed;
  z-index: 80;
}

.exit-popup {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.exit-popup.exit-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

.exit-popup-panel,
.nl-sticky-panel,
.nl-timed-panel {
  position: relative;
  border: 1px solid var(--color-base-300);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.exit-popup-panel {
  width: min(28rem, 100%);
  padding: 1.25rem;
}

.exit-popup-close,
.nl-timed-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--color-base-content);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.nl-sticky {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nl-sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nl-sticky-panel {
  margin-inline: auto;
  display: grid;
  max-width: 1040px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.nl-sticky-form {
  display: flex;
  gap: 0.5rem;
}

.nl-timed {
  right: 1rem;
  bottom: 1rem;
  width: min(20rem, calc(100vw - 1.5rem));
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nl-timed.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nl-timed-panel {
  padding: 0.9rem;
}

.reading-now-text {
  letter-spacing: -0.01em;
}

.article-audience-primary {
  display: flex;
  min-height: 5rem;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid color-mix(in srgb, var(--color-primary) 48%, var(--color-base-300));
  border-radius: 0.7rem;
  background: linear-gradient(115deg, color-mix(in srgb, var(--color-primary) 14%, #fff), #fff 68%);
  box-shadow: 0 8px 22px rgba(20, 33, 61, 0.12);
}

.article-audience-primary-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.55rem;
  color: #334155;
  font-size: 1rem;
  font-weight: 750;
}

.article-audience-primary-copy strong {
  color: #0f172a;
  font-size: clamp(1.65rem, 3.4vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1;
}

.article-audience-live {
  margin-left: auto;
  padding: 0.32rem 0.55rem;
  border-radius: 0.3rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-audience-inline,
.card-audience-signal {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-base-300));
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
  color: #24324a;
  font-weight: 750;
  white-space: nowrap;
}

.article-audience-inline {
  min-height: 2.35rem;
  margin-left: auto;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
}

.card-audience-signal {
  margin-left: auto;
  padding: 0.34rem 0.52rem;
  font-size: 0.82rem;
}

.article-audience-inline strong,
.card-audience-signal strong {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.article-audience-side {
  padding: 1rem;
  border: 2px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-base-300));
  border-radius: 0.7rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 11%, var(--color-base-100)), var(--color-base-100));
  box-shadow: 0 7px 20px rgba(20, 33, 61, 0.11);
}

.article-audience-eyebrow {
  color: #334155;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-audience-side .reading-now-text {
  margin-top: 0.15rem;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 750;
}

.article-audience-side .reading-now-text strong {
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.reading-now-dot--large {
  width: 1rem;
  height: 1rem;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 11%, transparent);
}

@media (max-width: 639px) {
  .article-audience-primary {
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem;
  }

  .article-audience-primary-copy {
    flex: 1 1 auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .article-audience-live {
    align-self: center;
  }
}

.reading-now-text::before {
  content: '';
}

.reading-now-text::after {
  content: '';
}

@media (max-width: 768px) {
  .sticky-article-bar {
    padding: 0.5rem;
  }

  .sticky-article-bar__inner {
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
  }

  .nl-sticky {
    padding: 0.5rem;
  }

  .nl-sticky-panel {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .nl-sticky-form {
    flex-direction: column;
  }

  .nl-timed {
    right: 0.5rem;
    bottom: 0.5rem;
    width: min(18rem, calc(100vw - 1rem));
  }

  .exit-popup {
    padding: 0.5rem;
  }

  .exit-popup-panel {
    width: min(100%, 24rem);
    padding: 1rem;
  }
}

.read-nudge {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 75;
  width: min(42rem, calc(100vw - 2rem));
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.read-nudge--visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.read-nudge--hidden {
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
}

.tag-cloud-1{font-size:.95em}
.tag-cloud-2{font-size:1.1em}
.tag-cloud-3{font-size:1.25em}
.tag-cloud-4{font-size:1.4em}

.dj-footer-links a {
  text-decoration: none;
}

.dj-footer-links a:hover {
  text-decoration: underline;
}

/* Interactive pages */
.quiz-diff-btn{padding:4px 11px;border:1px solid var(--quiz-border);background:var(--bg2);color:var(--muted2);font-size:11.5px;font-weight:700;cursor:pointer}
.quiz-diff-btn--active{background:var(--accent);border-color:var(--accent);color:#fff}
.quiz-q-difficulty{display:inline-block;margin-left:6px;padding:1px 7px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;background:var(--bg3);color:var(--muted2);border:1px solid var(--quiz-border)}
.quiz-q-difficulty--easy{color:#3fb950;border-color:#3fb950}
.quiz-q-difficulty--medium{color:#b59f3b;border-color:#b59f3b}
.quiz-q-difficulty--hard{color:var(--red,#da3633);border-color:var(--red,#da3633)}
.quiz-speedrun-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted2);margin-top:10px;cursor:pointer;user-select:none}
.quiz-timer{display:inline-block;margin-left:10px;font-size:12.5px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.quiz-result-time{font-size:12.5px;color:var(--muted2);margin-bottom:10px}
.quiz-share-card{max-width:100%;height:auto;border:1px solid var(--quiz-border);margin:0 auto 14px;display:block}
.quiz-leaderboard{margin-top:18px;padding-top:14px;border-top:1px solid var(--quiz-border);text-align:left}
.quiz-leaderboard-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:8px}
.quiz-leaderboard-list{list-style:decimal;padding-left:18px;margin:0;font-size:12.5px;color:var(--text);display:flex;flex-direction:column;gap:4px}
/* ---- Arcade (games hub + play pages) ---- */
.arc-random-btn{padding:10px 18px;border:0;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .15s ease}
.arc-random-btn:hover{transform:translateY(-1px) scale(1.02)}
.arc-controls{display:flex;flex-direction:column;gap:14px}
.arc-search-wrap{position:relative;max-width:440px}
.arc-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6;pointer-events:none}
.arc-search{width:100%;padding:11px 16px 11px 40px;border:1.5px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:var(--color-base-content);font-size:14px}
.arc-search:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}
.arc-chips{display:flex;flex-wrap:wrap;gap:8px}
.arc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:#475569;font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .15s ease}
.arc-chip:hover{border-color:var(--color-primary);color:var(--color-base-content)}
.arc-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.arc-chip-count{display:inline-block;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e2e8f0;color:#1e293b;font-size:11px;font-weight:800;line-height:22px;text-align:center;vertical-align:middle;font-variant-numeric:tabular-nums;opacity:1;isolation:isolate}
.arc-chip.active .arc-chip-count,.arc-chip.is-active .arc-chip-count{background:#fff;color:#0b3f7a}
.arc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.arc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.arc-rail .arc-card{scroll-snap-align:start}
.arc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-base-300);border-radius:14px;background:var(--color-base-100);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .18s ease,box-shadow .18s ease}
.arc-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.13)}
.arc-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--color-base-200)}
.arc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.arc-card:hover .arc-thumb img{transform:scale(1.06)}
.arc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#fff;background:rgba(0,0,0,.18);opacity:0;transition:opacity .18s ease}
.arc-card:hover .arc-play{opacity:1}
.arc-card-body{display:flex;flex:1;flex-direction:column;gap:4px;padding:10px 12px 12px}
.arc-card-body h3{font-size:13.5px;font-weight:800;line-height:1.35;margin:0}
.arc-card-body h3 a{color:var(--color-base-content);text-decoration:none}
.arc-card-body h3 a:hover{color:var(--color-primary)}
.arc-card-desc{font-size:12px;color:#475569;line-height:1.5;margin:2px 0 0}
.arc-card--hero .arc-thumb{aspect-ratio:16/9}
.arc-card--hero .arc-card-body h3{font-size:1.15rem}
.arc-cat-badge{display:inline-flex;align-items:center;gap:4px;width:fit-content;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);text-decoration:none}
.arc-fav{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#c0303c;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .15s ease}
.arc-fav:hover{transform:scale(1.15)}
.arc-fav.on{background:#c0303c;color:#fff}
.arc-player-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.arc-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;padding:9px 15px;border:1.5px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .15s ease}
.arc-action-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.arc-action-btn.on{background:#c0303c;border-color:#c0303c;color:#fff}
#arc-player:fullscreen{border-radius:0;border:0}
#arc-player:fullscreen iframe{width:100vw;height:100vh}
.arc-name-input{max-width:240px}
.arc-chat-name-input{max-width:150px}
.arc-play-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.arc-play-stat{border:1px solid var(--color-base-300);border-radius:14px;background:var(--color-base-200);padding:12px}
.arc-play-stat span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.arc-play-stat strong{display:block;margin-top:3px;font-size:1.15rem;color:var(--color-base-content)}
.arc-player-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-base-300);border-radius:16px;background:var(--color-base-200);padding:14px}
.arc-player-claim{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.arc-player-msg{min-height:18px;font-size:12.5px;color:#c0303c}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.arc-empty{font-size:14px}
@media (max-width:480px){
  .arc-player-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .arc-action-btn{width:100%;padding-inline:8px;font-size:12px}
  .arc-player-panel{align-items:stretch}
  .arc-player-claim,.arc-name-input{width:100%;max-width:100%}
}

/* ===================================================================
   Live TV portal (/live, /live/{id}) — 2026-07-12
   =================================================================== */

.tv-h1-live {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 0.6rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  transform: translateY(-0.35rem);
}

/* Studio shell: player + chat, dark chrome component on the light page */
.tv-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid #1c2330;
  background: #0e131b;
  box-shadow: 0 18px 45px -18px rgba(10, 16, 28, 0.55);
}
@media (max-width: 1023px) {
  .tv-shell { grid-template-columns: minmax(0, 1fr); }
}

.tv-stage { min-width: 0; }

.tv-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.tv-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.tv-player-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem 1.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), transparent);
  color: #fff;
  pointer-events: none;
  font-size: 0.85rem;
}
.tv-player-label { font-weight: 700; letter-spacing: 0.01em; }
.tv-player-status { margin-left: auto; opacity: 0.85; }

.tv-live-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
  animation: tv-pulse 1.8s infinite;
}
@keyframes tv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Info bar under the player */
.tv-infobar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding: 0.9rem 1.25rem;
  color: #e8edf6;
  border-top: 1px solid #1c2330;
}
.tv-infobar-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.tv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  font-size: 1.35rem;
  background: linear-gradient(140deg, var(--tv-accent, #1257a5), color-mix(in srgb, var(--tv-accent, #1257a5) 55%, #0e131b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.tv-avatar-logo {
  width: 82%;
  height: 82%;
  object-fit: contain;
  border-radius: 0.45rem;
}
.tv-avatar-logo.is-light-logo {
  background: rgba(0, 0, 0, 0.32);
  border-radius: 0.45rem;
}
.tv-infobar-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.tv-infobar-sub { font-size: 0.78rem; color: #97a3b8; margin-top: 2px; }

.tv-infobar-epg { min-width: 0; flex: 1 1 220px; }
.tv-epg-now, .tv-epg-next {
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-epg-next { color: #97a3b8; }
.tv-epg-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.45rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  vertical-align: 1px;
}
.tv-epg-tag--next { background: #2c3a52; }

.tv-infobar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.tv-infobar-actions .btn {
  border-color: #2c3a52;
  color: #e8edf6;
  background: transparent;
}
.tv-like-btn { gap: 0.35rem; }
.tv-action-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px;
}
.tv-action-logo.is-light-logo {
  background: #1b2333;
}
.tv-infobar-actions .btn:hover { border-color: #4a5d80; background: #1a2230; }
.tv-infobar-actions .btn.btn-active { background: #22314a; border-color: #4a5d80; }
.tv-watching {
  display: inline-flex;
  min-height: 2.7rem;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 0.78rem;
  border: 1px solid #ef4444;
  border-radius: 0.38rem;
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  color: #fff;
  box-shadow: 0 5px 15px rgba(127, 29, 29, 0.28);
  font-size: 0.92rem;
  font-weight: 750;
  white-space: nowrap;
}

.tv-watching .dj-ico {
  width: 1.15rem;
  height: 1.15rem;
}

.tv-watching strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -0.035em;
}

/* Chat panel */
.tv-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #1c2330;
  background: #10161f;
  color: #e8edf6;
}
@media (max-width: 1023px) {
  .tv-chat { border-left: 0; border-top: 1px solid #1c2330; height: 24rem; }
}
@media (min-width: 1024px) {
  /* Two-column shell: the chat column must not size the grid row — height:0
     keeps its content out of track sizing (row = stage height) and
     min-height:100% then stretches it back to the row, so tv-chat-body
     scrolls internally instead of growing the whole page. */
  .tv-chat { height: 0; min-height: 100%; }
}
.tv-chat-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #1c2330;
  font-size: 0.9rem;
}
.tv-chat-room {
  margin-left: auto;
  font-size: 0.72rem;
  color: #97a3b8;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-chat-body {
  flex: 1;
  /* min-height 0, not a rem floor: the body must SHRINK inside the clamped
     panel (24rem mobile / stage-height desktop) so the form never clips —
     flex:1 already grows it to fill whatever space the panel has. */
  min-height: 0;
  overflow-y: auto;
  padding: 0.8rem 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  overscroll-behavior: contain;
}
.tv-chat-msg { margin-bottom: 0.45rem; word-wrap: break-word; }
.tv-chat-who {
  font-weight: 700;
  color: hsl(var(--who-h, 210), 65%, 70%);
}
.tv-chat-who::after { content: ':'; color: #97a3b8; font-weight: 400; }
.tv-chat-ai,
.dj-ai-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--color-primary, #1257a5) 28%, transparent);
  border-radius: 999px;
  color: var(--color-primary, #1257a5);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  text-transform: uppercase;
}
.tv-chat-ai {
  margin: 0 0.25rem;
  border-color: #31425f;
  color: #aab8d4;
}
.tv-chat-empty { color: #97a3b8; font-size: 0.82rem; }
.tv-chat-form { padding: 0.75rem 1rem 0.9rem; border-top: 1px solid #1c2330; }
.tv-chat-form input[type="text"] {
  width: 100%;
  border: 1px solid #2c3a52;
  background: #0e131b;
  color: #e8edf6;
  border-radius: 0.8rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  outline: none;
}
.tv-chat-form input[type="text"]:focus { border-color: #4a5d80; }
.tv-chat-form input#tv-chat-name { max-width: 10rem; margin-bottom: 0.5rem; }
.tv-chat-row { display: flex; gap: 0.5rem; }
.tv-chat-row input { flex: 1; min-width: 0; }
.tv-chat-note { margin-top: 0.5rem; font-size: 0.7rem; color: #97a3b8; }

/* Category tabs */
.tv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}
.tv-tab {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tv-tab:hover { border-color: var(--color-primary); }
.tv-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}

/* Channel tiles */
.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.9rem;
}
.tv-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.tv-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tv-accent, #1257a5);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--tv-accent, #1257a5) 55%, transparent);
}
.tv-tile.is-active { border-color: var(--tv-accent, #1257a5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tv-accent, #1257a5) 45%, transparent); }
.tv-tile-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  font-size: 2.1rem;
  background:
    radial-gradient(120% 130% at 20% 0%, color-mix(in srgb, var(--tv-accent, #1257a5) 88%, #fff) 0%, var(--tv-accent, #1257a5) 55%, color-mix(in srgb, var(--tv-accent, #1257a5) 55%, #000) 100%);
}
.tv-tile-logo {
  width: min(72%, 8.5rem);
  height: 54%;
  object-fit: contain;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.8);
}
/* A logo that's actually light/white on transparent (sampled client-side —
   see djLogoLuminanceScan in play-app.js / livetv-portal.js) gets a dark
   plate instead of white, so it stays readable. No filters, no shadows. */
.tv-tile-logo.is-light-logo {
  background: #1b2333;
}
.tv-tile-icon { position: relative; z-index: 1; }
/* Fallback initial shown when a channel logo image fails to load. */
.tv-logo-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(56%, 5.4rem);
  aspect-ratio: 1 / 1;
  border-radius: 0.85rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tv-accent, #1257a5) 92%, #fff), color-mix(in srgb, var(--tv-accent, #1257a5) 62%, #0e131b));
  color: #fff;
  font-weight: 800;
  font-size: 1.9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 22px -16px rgba(0, 0, 0, 0.7);
}
.tv-avatar .tv-logo-fallback {
  width: 100%;
  border-radius: 12px;
  font-size: 1.25rem;
  box-shadow: none;
  background: transparent;
}
.tv-tile-live {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  padding: 0.1rem 0.42rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tv-tile-live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.28rem;
  border-radius: 50%;
  background: #ff3b30;
  vertical-align: 1px;
}
.tv-tile-fav {
  position: absolute;
  right: 0.45rem;
  top: 0.35rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s;
}
.tv-tile-fav:hover { transform: scale(1.2); }
.tv-tile-fav.is-on { color: #ffd83d; }
.tv-tile-body { padding: 0.6rem 0.75rem 0.7rem; }
.tv-tile-name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
}
.tv-tile-now {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-grid-empty { padding: 2.5rem 0; text-align: center; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }

/* Coming up list */
.tv-upcoming { display: grid; gap: 0.35rem; }
.tv-upcoming-item {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid transparent;
}
.tv-upcoming-item.is-now {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}
.tv-upcoming-time { font-weight: 800; font-size: 0.85rem; color: var(--color-primary); }
.tv-upcoming-title { font-weight: 600; font-size: 0.92rem; }
.tv-upcoming-desc {
  grid-column: 2;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  line-height: 1.5;
}

/* ===================================================================
   TV Guide grid (/tv-guide)
   =================================================================== */

.tvg-shell { overflow: hidden; border: 1px solid var(--color-base-300); border-radius: .7rem; background: var(--color-base-100); }
.tvg-scroll {
  max-height: min(72dvh, 760px);
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-base-300)) transparent;
  scrollbar-width: thin;
}
.tvg-scroll:focus-visible,
.tvg-lane:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tvg { min-width: 1280px; }

.tvg-ruler,
.tvg-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: stretch;
}
.tvg-ruler { position: sticky; top: 0; z-index: 6; background: var(--color-base-100); }
.tvg-corner {
  position: sticky;
  left: 0;
  z-index: 8;
  border-right: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  display: flex;
  align-items: center;
  padding-inline: .75rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tvg-times {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--color-base-300);
}
.tvg-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
  padding: 0.35rem 0 0.45rem 0.4rem;
  border-left: 1px dashed var(--color-base-300);
}
.tvg-nowline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--now-col, 1) - 1) / 360 * 100%);
  width: 2px;
  background: #e11d2e;
  z-index: 3;
}

.tvg-row { border-bottom: 1px solid var(--color-base-200); }
.tvg-row:last-child { border-bottom: 0; }

.tvg-ch {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem 0.55rem 0.2rem;
  min-width: 0;
  border-right: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}
.tvg-ch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tv-accent, #1257a5) 30%, var(--color-base-300));
  color: var(--tv-accent, #1257a5);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tv-accent, #1257a5) 16%, transparent);
}
.tvg-ch-logo { display: block; width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.tvg-ch-name {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tvg-ch:hover .tvg-ch-name { color: var(--color-primary); }
.tvg-ch-live {
  margin-left: auto;
  padding: 0.08rem 0.4rem;
  border-radius: 0.4rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  flex: none;
}

.tvg-lane {
  display: grid;
  grid-template-columns: repeat(360, minmax(0, 1fr));
  grid-auto-rows: minmax(3.1rem, auto);
  gap: 1px;
  padding: 3px 0;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(8.333% - 1px), color-mix(in srgb, var(--color-base-300) 72%, transparent) calc(8.333% - 1px), color-mix(in srgb, var(--color-base-300) 72%, transparent) 8.333%);
}
.tvg-block {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 0.25rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.tvg-block:hover { border-color: var(--color-primary); }
.tvg-block.is-now {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-base-300));
}
.tvg-block-link {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0.3rem 0.55rem;
  color: inherit;
  text-decoration: none;
}
.tvg-block.has-reminder .tvg-block-link { padding-right: 1.8rem; }
.tvg-block-title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tvg-block-time { font-size: 0.66rem; color: color-mix(in srgb, var(--color-base-content) 74%, transparent); }
.tvg-block--always .tvg-block-title { white-space: normal; }

/* Sky/Foxtel-style mobile EPG: one synchronized canvas, a fixed channel rail,
   sticky ruler, and a single two-axis scroll surface. */
@media (max-width: 700px) {
  .tvg-scroll { max-height: 68dvh; }
  .tvg { min-width: 1320px; }
  .tvg-ruler,
  .tvg-row { grid-template-columns: 128px minmax(0, 1fr); }
  .tvg-ch { gap: 0.4rem; padding: 0.4rem 0.45rem; }
  .tvg-ch-icon { width: 36px; height: 36px; border-radius: 7px; }
  .tvg-ch-logo { padding: 3px; }
  .tvg-ch-name {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.15;
  }
  .tvg-ch-live { display: none; }
  .tvg-lane {
    grid-auto-rows: 4rem;
    padding-block: 3px;
  }
  .tvg-time { padding: 0.38rem 0 0.42rem 0.4rem; font-size: 0.7rem; }
  .tvg-block { border-radius: 0.2rem; }
  .tvg-block-link { padding: 0.35rem 0.42rem; }
  .tvg-block-title {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    line-height: 1.15;
  }
  .tvg-block-time { font-size: 0.64rem; }
  .tvg-block.has-reminder .tvg-block-link { padding-right: 0.42rem; }
  .tvg-remind { display: none; }
}
.tvg-row[hidden] { display: none; }
.tvg-empty { margin: 0; padding: 2rem 1rem; color: color-mix(in srgb, var(--color-base-content) 72%, transparent); text-align: center; }

/* ===================================================================
   Watch page actions (YouTube-style bar) + watch-later
   =================================================================== */

.watch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.watch-actions .btn.btn-active { border-color: var(--color-primary); color: var(--color-primary); }

.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.wl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}
.wl-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #000; }
.wl-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0.85rem 0.85rem; }
.wl-title { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.wl-meta { font-size: 0.74rem; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.wl-remove { align-self: flex-start; margin-top: 0.35rem; }
.wl-empty { padding: 3.5rem 1rem; text-align: center; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }

/* Live TV nav pill */
.dj-nav-live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
  font-weight: 700;
}
.dj-nav-live:hover { background: #c4131f; border-color: #c4131f; color: #fff; }

/* ===================================================================
   Sitewide navigation — sticky two-tier header + scroll strip + drawer
   (2026-07-12 rebuild: replaces the wrapping badge-pill wall)
   =================================================================== */

.dj-header {
  position: sticky;
  top: 0;
  z-index: 80;
  will-change: transform;
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-content) 10%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-base-100) 96%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  box-shadow: 0 4px 18px rgba(20, 32, 54, 0.06);
}

.dj-topbar .dj-ticker {
  margin-bottom: 0.65rem;
  padding: 0.5rem 1rem;
}

.dj-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  margin-right: 0.35rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.75rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dj-burger:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* These two are mobile-only chrome. Don't lean on the compiled lg:hidden
   utility: style.css loads after tailwind.css, so the component display rules
   above would win the cascade at equal specificity. */
@media (min-width: 1024px) {
  .dj-burger { display: none; }
  .dj-live-cta { display: none; }
  /* compress pills a touch so the full strip fits the 1200px container
     (track-scoped so this outranks the base .dj-nav-pill rule below) */
  .dj-navstrip-track .dj-nav-pill { font-size: 0.8rem; padding: 0.34rem 0.7rem; }
  .dj-navstrip-track { gap: 0.3rem; }
}

/* Section eyebrow → title rhythm. The uppercase kicker sat glued to its H2
   with no gap (owner report 2026-07-13, "poor spacing between headers"). Give
   every eyebrow a small, consistent breath below it across the home sections. */
.dj-eyebrow { display: block; margin-bottom: 0.4rem; }

/* MyJunction dashboard — cross-property quick-link hub (news / Play / Arcade). */
.myj-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.myj-hub-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--color-base-300); border-radius: 0.9rem;
  background: var(--color-base-100); color: var(--color-base-content);
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.myj-hub-link:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-base-100)); }
.myj-hub-link svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--color-primary); }

.dj-masthead {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  /* clip so the nowrap brand glyphs can never bleed over the action cluster
     (bell / Sign in / Live) on narrow bars — box shrinks under flex but text
     would otherwise overflow visually. Belt-and-suspenders with logo-only below. */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.dj-masthead-logo {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  /* Square-rounded, not bubbly — owner call 2026-07-13 (was 0.85rem). */
  border-radius: 0.375rem;
}
.dj-masthead-name {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dj-masthead-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The brand wordmark only fits alongside the mobile action cluster once the bar
   is ~600px wide; below that it overflowed onto the notification bell + Sign in
   (owner report 2026-07-13). Go logo-only under 600px — mirrors the play. chrome —
   and keep the tagline for the desktop bar where there's genuinely room. */
@media (max-width: 1023px) {
  .dj-masthead-tag { display: none; }
}
@media (max-width: 599px) {
  .dj-masthead-name { display: none; }
  .dj-masthead-logo { width: 2.4rem; height: 2.4rem; }
}

.dj-live-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  margin-left: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #e11d2e;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.dj-live-cta:hover { background: #c4131f; color: #fff; }
.dj-live-cta-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: tv-pulse 1.8s infinite;
}

/* --- tier 2: the strip. One row, scrolls sideways instead of wrapping. --- */
.dj-navstrip {
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}
.dj-navstrip .dj-wrap { position: relative; }
.dj-navstrip-track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.55rem 0;
  scroll-snap-type: x proximity;
}
.dj-navstrip-track::-webkit-scrollbar { display: none; }
/* soft fade hinting more items off-screen (harmless when nothing clips) */
.dj-navstrip .dj-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2.2rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-base-100));
}

.dj-nav-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.68rem;
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dj-nav-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dj-nav-pill.is-active {
  background: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--color-neutral-content);
}
.dj-nav-pill--wire {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}
.dj-nav-pill--wire:hover { color: var(--color-primary-content); opacity: 0.92; }
.dj-nav-pill--live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--live:hover { background: #c4131f; border-color: #c4131f; color: #fff; }
.dj-nav-pill--videos {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--videos:hover { background: #5b21b6; border-color: #5b21b6; color: #fff; }
.dj-nav-pill--arcade {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--arcade:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.dj-nav-pill--live.is-active,
.dj-nav-pill--videos.is-active,
.dj-nav-pill--arcade.is-active,
.dj-nav-pill--wire.is-active { outline: 2px solid var(--color-neutral); outline-offset: 1px; }
/* Coloured nav-pill icons sit inside the pill; size to the label. */
.dj-nav-pill .dj-ico { width: 0.95rem; height: 0.95rem; }
.dj-navstrip-sep {
  flex: none;
  width: 1px;
  height: 1.2rem;
  background: var(--color-base-300);
  margin: 0 0.2rem;
}

/* --- mobile drawer panel --- */
.dj-drawer-side { z-index: 120; }
.dj-drawer-side .drawer-overlay { background: rgba(15, 23, 42, 0.45); }
.dj-drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(20rem, 86vw);
  min-height: 100%;
  padding: 1rem 1.1rem 2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 0 60px rgba(10, 16, 28, 0.35);
}
.dj-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-base-300);
}
.dj-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 0.7rem;
  background: var(--color-base-100);
  cursor: pointer;
}
.dj-drawer-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dj-drawer-search { width: 100%; }
.dj-drawer-nav { display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; }
.dj-drawer-title {
  margin-top: 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.dj-drawer-list { display: flex; flex-direction: column; }
.dj-drawer-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-base-content) 90%, transparent);
}
.dj-drawer-list a:hover { background: var(--color-base-200); color: var(--color-primary); }
.dj-drawer-live { color: #e11d2e !important; }
.dj-drawer-live .dj-live-cta-dot { background: #e11d2e; box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.5); }
body.dj-noscroll { overflow: hidden; }

/* ===================================================================
   Live TV hero (dark studio card, matches the shell below)
   =================================================================== */

.tv-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid #1c2330;
  background:
    radial-gradient(90% 140% at 85% -20%, rgba(225, 29, 46, 0.28) 0%, transparent 55%),
    radial-gradient(70% 120% at 10% -10%, rgba(18, 87, 165, 0.35) 0%, transparent 60%),
    #0e131b;
  color: #e8edf6;
  padding: 1.25rem;
  box-shadow: 0 18px 45px -18px rgba(10, 16, 28, 0.55);
}
@media (min-width: 640px) { .tv-hero { padding: 1.55rem 1.75rem; } }
.tv-hero .tv-breadcrumb,
.tv-hero .tv-breadcrumb a { color: #97a3b8; }
.tv-hero .tv-breadcrumb a:hover { color: #fff; }
.tv-hero-title {
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #fff;
}
.tv-hero-sub {
  margin-top: 0.6rem;
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #aab8d4;
}
.tv-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.tv-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #2c3a52;
  border-radius: 999px;
  color: #e8edf6;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s;
}
a.tv-hero-chip:hover { border-color: #4a5d80; background: #1a2230; color: #fff; }
.tv-hero-chip--live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
}

/* Thin breadcrumb above the player (on the light page bg, not the dark hero). */
.tv-crumb { color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.tv-crumb a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.tv-crumb a:hover { text-decoration: underline; }

/* Slim hero — the relocated context strip that now sits BELOW the player
   (owner 2026-07-13). One row: title/description left, quick-action chips right;
   wraps on phones. Much shorter than the old page-topping hero block. */
.tv-hero--slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding: 1.1rem 1.35rem;
}
@media (min-width: 640px) { .tv-hero--slim { padding: 1.25rem 1.6rem; } }
.tv-hero-lead { min-width: 0; flex: 1 1 20rem; }
.tv-hero--slim .tv-hero-title { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.tv-hero--slim .tv-hero-sub { margin-top: 0.3rem; font-size: 0.88rem; line-height: 1.55; }
.tv-hero--slim .tv-hero-meta { margin-top: 0; flex: 0 1 auto; }

/* tabs: never wrap into a wall on phones — scroll like the nav strip */
@media (max-width: 767px) {
  .tv-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .tv-tabs::-webkit-scrollbar { display: none; }
  .tv-tab { flex: none; white-space: nowrap; }
}

/* infobar: tidy stacking on small screens */
@media (max-width: 640px) {
  .tv-infobar { gap: 0.7rem 1rem; padding: 0.85rem 1rem; }
  .tv-infobar-epg { flex-basis: 100%; order: 3; }
  .tv-infobar-actions { margin-left: 0; order: 4; }
}

/* ===================================================================
   Arcade design pass — hero, chips strip, rails, lounge chat, play page
   =================================================================== */

.arc-hero {
  position: relative;
  overflow: hidden;
}
.arc-hero::before {
  content: '🕹️';
  position: absolute;
  right: -0.6rem;
  top: -1.4rem;
  font-size: 7.5rem;
  opacity: 0.07;
  transform: rotate(12deg);
  pointer-events: none;
}
.arc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.arc-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-200);
  font-size: 0.82rem;
  font-weight: 700;
}

/* chips: wrap on desktop, single scrollable row on phones */
@media (max-width: 767px) {
  .arc-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
    scroll-snap-type: x proximity;
  }
  .arc-chips::-webkit-scrollbar { display: none; }
  .arc-chip { flex: none; scroll-snap-align: start; }
}
.arc-chip { color: color-mix(in srgb, var(--color-base-content) 72%, transparent); }
.arc-chip:hover { color: var(--color-base-content); }
.arc-chip.active { color: var(--color-primary-content); }
.arc-card-desc { color: color-mix(in srgb, var(--color-base-content) 66%, transparent); }
.arc-play-stat span { color: color-mix(in srgb, var(--color-base-content) 58%, transparent); }

/* rails: Swiper-enhanced when JS is up, plain scroll rail otherwise */
.arc-rail.swiper { grid-auto-flow: unset; display: block; overflow: hidden; padding-bottom: 0; }
.arc-rail.swiper .swiper-slide { width: 200px; }
.arc-rail .swiper-button-prev,
.arc-rail .swiper-button-next {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: var(--color-base-content);
  transition: border-color 0.15s, color 0.15s;
}
.arc-rail .swiper-button-prev:hover,
.arc-rail .swiper-button-next:hover { border-color: var(--color-primary); color: var(--color-primary); }
.arc-rail .swiper-button-prev::after,
.arc-rail .swiper-button-next::after { font-size: 0.85rem; font-weight: 800; }
.arc-rail .swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .arc-rail .swiper-button-prev,
  .arc-rail .swiper-button-next { display: none; }
}

/* lounge chat: give the message box real chrome (was unstyled) */
.arc-chat {
  height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  overscroll-behavior: contain;
}
.arc-chat:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.arc-chat-row { margin-bottom: 0.4rem; word-wrap: break-word; }
.arc-chat-row strong { color: var(--color-primary); font-weight: 700; }
.arc-chat-time {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.arc-chat-form { display: flex; gap: 0.5rem; }
.arc-chat-form .arc-search { border-radius: 999px; }
.arc-chat-form input#arc-chat-body { flex: 1; min-width: 0; }

/* leaderboard rows */
.arc-lb { display: flex; flex-direction: column; gap: 0.3rem; }
.arc-lb li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
  background: var(--color-base-100);
  font-size: 0.9rem;
}
.arc-lb li:nth-child(1) { background: color-mix(in srgb, #ffd83d 12%, var(--color-base-100)); }
.arc-lb-rank { flex: none; width: 2.1rem; font-weight: 800; }
.arc-lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arc-lb-pts { margin-left: auto; flex: none; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.arc-lb-empty { justify-content: center; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }
.arc-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.arc-me {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
  background: var(--color-base-200);
  font-size: 0.88rem;
  font-weight: 600;
}

/* play page: the compiled utility set predates rounded-[1.5rem]/aspect-[3/4],
   so the player frame styles them here instead */
#arc-player { border-radius: 1rem; }
#arc-player.arc-player--tall { aspect-ratio: 3 / 4; }
#arc-player.arc-player--wide { aspect-ratio: 16 / 9; }

/* ===================================================================
   Bottom-dock coordination (2026-07-12) — cookie banner, newsletter
   sticky, read-nudge and the reading bar all dock to the viewport
   bottom; djDock (layout.php) lets exactly ONE through at a time.
   =================================================================== */

.dj-dock-suppressed {
  opacity: 0 !important;
  transform: translateY(130%) !important;
  pointer-events: none !important;
}

/* The mobile bottom nav is a permanent bottom appliance (play/arcade set
   --dj-botnav-h to its height; 0 on desktop / navless surfaces). Popup cards —
   the cookie consent banner and the timed corner surfaces — ride ABOVE the nav
   (and above any banner via --dj-dock-h), never behind or under it. */
#cookie-banner { bottom: var(--dj-botnav-h, 0px); }
.nl-timed { bottom: calc(1rem + var(--dj-botnav-h, 0px) + var(--dj-dock-h, 0px)); }
@media (max-width: 768px) {
  .nl-timed { bottom: calc(0.5rem + var(--dj-botnav-h, 0px) + var(--dj-dock-h, 0px)); }
}

/* read-nudge was a positioned wrapper with NO panel chrome — raw text
   floated over the page. Give it the standard card treatment. */
.read-nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
.read-nudge-icon { flex: none; font-size: 1.15rem; }
.read-nudge-msg { flex: 1 1 auto; min-width: 0; }
.read-nudge-cta {
  flex: none;
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.read-nudge-cta:hover { text-decoration: underline; }
.read-nudge-close {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-base-content);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
@media (max-width: 640px) {
  .read-nudge { flex-wrap: wrap; font-size: 0.84rem; }
}

/* exit-popup kicker (was unstyled) */
.exit-popup-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  margin-bottom: 0.35rem;
}

/* reading-bar internals: the compiled utility set predates h-1.5 /
   transition-[width] / tracking-[0.2em], so the label + progress track
   get real classes here (markup carries them alongside the utilities) */
.sticky-bar-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}
.sticky-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-base-300);
}
#sticky-bar-prog {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

/* search autocomplete flyout (was completely unstyled) */
.search-ac {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 90;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}
.search-ac li a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-ac li + li a { border-top: 1px solid var(--color-base-200); }
.search-ac li a:hover { background: var(--color-base-200); color: var(--color-primary); }

/* ===================================================================
   SITEWIDE CLASS-COVERAGE REPAIR — 2026-07-12 audit
   The compiled tailwind bundle predates many templates; every class
   below is used in live markup but had NO definition anywhere.
   Sections: form controls, utility shim, quiz, video cards, TOC,
   ads/badges/misc. Single source of truth: this file.
   =================================================================== */

/* ---- form controls (root cause of the invisible Discussion form) ---- */
/* The compiled daisy bundle ships .input/.select with NO border — text
   fields rendered invisible on white cards. Border + focus ring here are
   authoritative; radius/height stay with the bundle so .join corner
   grouping keeps working. (.search-mini input keeps its own look.) */
.input, .select {
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  background: var(--color-base-100);
  transition: border-color 0.15s;
}
.input:focus, .select:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.textarea {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.92rem;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
/* advertise forms alias — same look as .textarea */
textarea.dj-ta, .dj-ta {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.92rem;
  line-height: 1.6;
}
.dj-ta:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-color: var(--color-primary); }
/* daisyUI 4 leftovers still in markup — map to sane v5 equivalents */
.form-control { display: flex; flex-direction: column; gap: 0.35rem; }
.label-text { font-size: 0.85rem; font-weight: 600; color: color-mix(in srgb, var(--color-base-content) 80%, transparent); }
.checkbox-xs { width: 1rem; height: 1rem; }
.table-sm th, .table-sm td { padding: 0.4rem 0.6rem; font-size: 0.85rem; }

/* ---- missing utility shim (exact Tailwind equivalents) ---- */
.-mt-6 { margin-top: -1.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.leading-5 { line-height: 1.25rem; }
.h-6 { height: 1.5rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-24 { height: 6rem; }
.w-0 { width: 0; } .w-6 { width: 1.5rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-40 { width: 10rem; }
.w-2\/5 { width: 40%; }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); } /* up-arrows on money hub used it unshimmed */
.border-primary { border-color: var(--color-primary); }
.text-base-content\/80 { color: color-mix(in srgb, var(--color-base-content) 80%, transparent); }
.bg-warning\/10 { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.border-warning\/40 { border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }
.ring-base-100 { --tw-ring-color: var(--color-base-100); }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.rounded-\[1\.25rem\] { border-radius: 0.9rem; }
.rounded-\[1\.1rem\] { border-radius: 1.1rem; }
.rounded-\[1rem\] { border-radius: 1rem; }
.rounded-\[0\.9rem\] { border-radius: 0.9rem; }
.left-2 { left: 0.5rem; }
.top-2 { top: 0.5rem; }
.text-\[0\.7rem\] { font-size: 0.7rem; }
.text-primary\/80 { color: color-mix(in srgb, var(--color-primary) 80%, transparent); }
.group:hover .group-hover\:text-primary { color: var(--color-primary); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.select-all { user-select: all; }
.break-all { word-break: break-all; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.not-prose { /* typography-escape marker; no styles by design */ }
.hover\:border-primary:hover { border-color: var(--color-primary); }
.hover\:text-error:hover { color: var(--color-error); }
.hover\:badge-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }
.placeholder\:text-base-content\/40::placeholder { color: color-mix(in srgb, var(--color-base-content) 40%, transparent); }
@media (min-width: 640px) {
  .sm\:grid-cols-\[1fr_140px\] { grid-template-columns: 1fr 140px; }
}
@media (min-width: 1024px) {
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:inline-flex { display: inline-flex; }
}
/* steps + boxed tabs (advertise/sport pages) — compact standalone versions */
.steps { display: flex; flex-direction: column; gap: 0.9rem; counter-reset: dj-step; }
.steps .step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  counter-increment: dj-step;
}
.steps .step::before {
  content: counter(dj-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  font-size: 0.8rem;
  font-weight: 800;
  /* This is a hand-built component sharing daisyUI's .steps/.step class
     names for an unrelated grid+icon-based component. Cascade layers make
     this unlayered rule win per-property, but any property it does NOT set
     can still leak in from the layered vendor rule (margin-inline-start:-100%
     there, meant for a connector line) — WebKit applies the leaked margin,
     shoving this badge off-screen and collapsing the row to nothing.
     Chromium happens not to. Reset explicitly so nothing can leak through. */
  margin: 0;
  position: static;
}
.steps .step::after { content: none; } /* suppress the vendor's own icon/counter pseudo-element — this component doesn't use it */
.steps .step-primary::before { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }
.steps-vertical { flex-direction: column; }
@media (min-width: 1024px) {
  .lg\:steps-horizontal { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .lg\:steps-horizontal .step { flex-direction: column; text-align: center; flex: 1; }
}
.tabs-boxed { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 0.9rem; background: var(--color-base-200); }
.tabs-boxed .tab { padding: 0.4rem 0.9rem; border-radius: 0.65rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.tabs-boxed .tab-active, .tabs-boxed .tab.is-active { background: var(--color-base-100); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ---- quiz engine (entire interactive UI had no styles) ---- */
.quiz-progress-wrap {
  position: relative;
  margin-top: 1.25rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  padding-inline: 0.75rem;
}
.quiz-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-base-200));
  transition: width 0.3s ease;
}
.quiz-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-base-content);
}
.quiz-question { display: none; margin-top: 1.5rem; }
.quiz-question--active { display: block; }
.quiz-q-text { font-size: 1.08rem; font-weight: 600; line-height: 1.55; }
.quiz-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.1rem; list-style: none; padding: 0; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.quiz-option:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.quiz-option[disabled] { cursor: default; transform: none; }
.quiz-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  font-size: 0.8rem;
  font-weight: 800;
}
.quiz-option-text { min-width: 0; }
.quiz-option--correct {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-base-100));
}
.quiz-option--correct .quiz-option-letter { background: var(--color-success); border-color: var(--color-success); color: var(--color-success-content); }
.quiz-option--wrong {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-base-100));
}
.quiz-option--wrong .quiz-option-letter { background: var(--color-error); border-color: var(--color-error); color: var(--color-error-content); }
.quiz-explanation {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  font-size: 0.9rem;
  line-height: 1.6;
}
.quiz-explain-icon { flex: none; font-size: 1.05rem; }
.quiz-nav { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.quiz-next-btn, .quiz-finish-btn { border-radius: 999px; }
.quiz-results { margin-top: 1.5rem; }
.quiz-results-inner { text-align: center; padding: 1rem 0 0.5rem; }
.quiz-score-ring { position: relative; width: 9.5rem; height: 9.5rem; margin: 0 auto; }
.quiz-ring-svg { width: 100%; height: 100%; display: block; }
.quiz-ring-bg { stroke: var(--color-base-300); }
.quiz-ring-fill { stroke: var(--color-primary); stroke-linecap: round; transition: stroke-dashoffset 0.9s ease; }
.quiz-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
}
.quiz-result-headline { margin-top: 1.1rem; font-size: 1.6rem; font-weight: 800; }
.quiz-result-sub { margin-top: 0.4rem; color: color-mix(in srgb, var(--color-base-content) 65%, transparent); }
.quiz-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.25rem; }
.quiz-sidebar-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.quiz-sidebar-list { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.6rem; }
.quiz-sidebar-link {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  text-decoration: none;
}
.quiz-sidebar-link:hover { background: var(--color-base-200); color: var(--color-primary); }
.quiz-sidebar-meta { display: block; margin-top: 0.15rem; font-size: 0.74rem; font-weight: 500; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.quiz-index-score {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent);
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 800;
}

/* ---- video cards (/videos hub + watch pages; old dj-* palette is dead) ---- */
.video-card {
  border-color: var(--color-base-300) !important;
  background: var(--color-base-100) !important;
}
.video-thumb-wrap { background: #0e131b; }
.video-duration-badge { background: rgba(0, 0, 0, 0.8); color: #fff; }
.video-channel-badge { color: var(--color-primary); letter-spacing: 0.06em; }
.video-title { color: var(--color-base-content); text-decoration: none; }
.video-title:hover { color: var(--color-primary); }
.video-desc { color: color-mix(in srgb, var(--color-base-content) 62%, transparent); }
.video-meta { color: color-mix(in srgb, var(--color-base-content) 50%, transparent); }
.video-play-btn { opacity: 0.85; transition: opacity 0.15s, background 0.2s; }
.video-card:hover .video-play-btn { opacity: 1; }

/* ---- article table of contents (JS-built) ---- */
.toc-widget { font-size: 0.9rem; }
.rail-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.toc-list { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.6rem; counter-reset: toc; }
.toc-item { list-style: none; }
.toc-item--h3 { padding-left: 0.9rem; }
.toc-link {
  display: block;
  padding: 0.35rem 0.55rem;
  border-left: 2px solid transparent;
  border-radius: 0 0.5rem 0.5rem 0;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  text-decoration: none;
  line-height: 1.45;
}
.toc-link:hover { color: var(--color-primary); background: var(--color-base-200); }
.toc-link--active { border-left-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.toc-mobile-wrap { margin-bottom: 1.25rem; }
.toc-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-100);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.toc-mobile-panel {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ---- ad frames, badges, freshness chips, small JS-injected bits ---- */
.ad-slot {
  margin: 1.25rem 0;
  padding: 0.75rem;
  border: 1px dashed var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  text-align: center;
}
.ad-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
}
.ad-adcash { min-height: 50px; }
.editors-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, #ffd83d 22%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, #b8860b 45%, transparent);
  color: #8a6d00;
  font-size: 0.68rem;
  font-weight: 800;
}
.trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
  color: var(--color-error);
  font-size: 0.68rem;
  font-weight: 800;
}
.section-updated {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-base-100));
  color: var(--color-success);
  font-size: 0.7rem;
  font-weight: 800;
  vertical-align: middle;
}
.pdb-item--updated { animation: dj-flash 0.7s ease; }
@keyframes dj-flash {
  0% { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
  100% { background: transparent; }
}
.search-hl { background: color-mix(in srgb, var(--color-warning) 35%, transparent); border-radius: 0.2em; padding: 0 0.1em; }
.ticker-fade-out { opacity: 0; transition: opacity 0.3s ease; }
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--color-error);
  animation: tv-pulse 1.8s infinite;
  vertical-align: 2px;
}
/* markdown renderer extras */
.table-wrap { overflow-x: auto; }
.task-list { list-style: none; padding-left: 0.25rem; }
.task { display: flex; align-items: baseline; gap: 0.5rem; }
/* scroll-reveal (IntersectionObserver adds .aos-animate) */
[data-aos] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-aos].aos-animate { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}
/* misc leftovers */
.tvg-corner { display: block; }
.tv-like-glyph { margin-right: 0.1rem; }
.tv-tile-icon { font-size: 2.1rem; line-height: 1; }
.arc-lb-tabs { display: inline-flex; gap: 0.4rem; }
.sticky-bar-title { min-width: 0; }
.nl-sticky-close { flex: none; }
.helpful-widget .helpful-thanks { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--color-success); }
.helpful-btn--voted { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }

/* ---- eyebrow/badge pills: never clip the label ----
   Browsers can render the text larger than daisyUI's fixed pill height
   (minimum-font-size setting, zoom, OS accessibility text scaling). The
   Live TV / videos tiles survive because their pills are content-sized —
   give every .badge the same behaviour: the daisy --size becomes a floor
   and the pill grows with its text instead of letting it spill out. */
.badge {
  height: auto;
  min-height: var(--size, 1.5rem);
  padding-block: 0.1em;
  /* Side padding floor: daisy derives it from the --size/--border custom
     props — if a variable ever breaks that calc again (the 2026-07-12
     --border colour collision), or the browser inflates fonts, the em term
     keeps the rounded pill ends clear of the glyphs. */
  padding-inline: max(0.8em, calc(var(--size, 1.5rem) / 2 - var(--border, 1px)));
}

/* ---- app landing pages (/djplay, /djarcade): screenshots + version history ---- */
.app-shots {
  display: flex;
  max-width: 100%;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.9rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.app-shot {
  flex: 0 0 auto;
  width: min(52vw, 232px);
  margin: 0;
  scroll-snap-align: start;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-base-300);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.app-shot figcaption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  text-align: center;
}
.app-download-btn {
  max-width: 100%;
  min-height: 3rem;
  height: auto;
  white-space: normal;
  text-align: center;
}
.app-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 1.4rem;
  margin-top: 1.25rem;
}
.app-facts > div { min-width: 0; }
.app-facts dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.app-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-base-content);
  overflow-wrap: anywhere;
}
.app-changelog { list-style: none; margin: 1rem 0 0; padding: 0; }
.app-release {
  padding: 1rem 0;
  border-top: 1px solid var(--color-base-300);
}
.app-release:first-child { border-top: 0; padding-top: 0.25rem; }
.app-release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.app-release-version { font-weight: 800; font-size: 1.05rem; }
.app-release-meta {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.app-release-notes {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
  /* Release notes are authored as a multi-line changelog (one change per
     line); preserve the line breaks so each entry reads as its own row. */
  white-space: pre-line;
}
.app-release-sha {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  word-break: break-all;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.app-icon { border-radius: 1.4rem; }
.app-sha { overflow-wrap: anywhere; word-break: break-all; }

/* ---- Listen to this article (browser TTS, no vendor) ---- */
.dj-listen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dj-listen-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--color-base-300); border-radius: 999px; background: var(--color-base-100); font-weight: 700; font-size: 0.85rem; color: var(--color-base-content); cursor: pointer; box-shadow: 0 2px 8px rgba(32, 42, 68, 0.05); }
.dj-listen-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dj-listen-btn.is-on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content, #fff); }
.dj-listen-note { font-size: 0.75rem; color: color-mix(in srgb, var(--color-base-content) 70%, transparent); }

/* ---- /apps hub: QR + actions row ---- */
.app-qr-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-base-300);
}
.app-qr {
  width: 132px;
  height: 132px;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
}
.app-qr-side { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

/* ===================================================================
   Engagement v2 — shared micro-interaction layer (P3 item 20) + hub
   components (Part D2, 2026-07-13). Light theme only, neutral-skeuo:
   1px base-300 borders, soft inset highlights, shadow-sm scale.
   =================================================================== */

/* ---- standardised card hover: subtle lift on every CLICKABLE card ---- */
/* a.card - news publication style: no lift effect, just subtle border change */
a.card {
  transition: border-color 0.15s ease;
}
a.card:hover {
  border-color: var(--color-primary);
}
/* .dj-hover-lift keeps the playful lift effect for components that want it */
.dj-hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.dj-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 27, 45, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .dj-hover-lift { transition: none; }
  .dj-hover-lift:hover { transform: none; }
}

/* ---- skeleton shimmer for rails / late-filling slots ---- */
.dj-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1em;
  border-radius: 0.75rem;
  background: var(--color-base-200);
}
.dj-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: dj-shimmer 1.4s infinite;
}
@keyframes dj-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .dj-skeleton::after { animation: none; } }

/* ---- count-up-ready stat chip (numbers use tabular figures so a JS
       count-up never causes layout shift) ---- */
.dj-stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 27, 45, 0.05);
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-base-content) 65%, transparent);
  white-space: nowrap;
}
.dj-stat-chip strong,
.dj-stat-chip [data-count-to] {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--color-base-content);
}
.dj-stat-chip .dj-ico { width: 0.9rem; height: 0.9rem; align-self: center; color: var(--color-primary); }

/* ---- reading-progress bar (contract with the article markup:
       <div class="dj-progress"><span class="dj-progress-bar"></span></div>,
       JS sets the bar's inline width as the reader scrolls) ---- */
.dj-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}
.dj-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #7c3aed));
  border-radius: 0 2px 2px 0;
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) { .dj-progress-bar { transition: none; } }

/* ---- apex toast (play.css/arcade.css each have their own; this is the
       shared one for the news host). Toggle .is-in to show. ---- */
.dj-toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 16px);
  z-index: 90;
  max-width: 92vw;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  background: #12161d;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dj-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ---- hub hero band (used by partials/hub-hero.php and the hubs' own
       pre-integration fallbacks — same classes either way) ---- */
.dj-hub-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100)), var(--color-base-100) 55%);
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.06);
  padding: 2rem;
}
@media (min-width: 640px) { .dj-hub-hero { padding: 2.5rem; } }
.dj-hub-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.dj-hub-hero-main { display: flex; flex-direction: column; gap: 0.6rem; min-width: min(100%, 30ch); flex: 1 1 30ch; }
.dj-hub-hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.dj-hub-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, var(--color-base-200));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 27, 45, 0.08);
  color: var(--color-primary);
}
.dj-hub-hero-icon .dj-ico { width: 1.5rem; height: 1.5rem; }
.dj-hub-hero-title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.08;
  color: var(--color-base-content);
}
.dj-hub-hero-sub {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-base-content) 66%, transparent);
}
.dj-hub-hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }

/* ---- data band: row of neutral-skeuo stat cells (weather summary,
       markets-at-a-glance, …) ---- */
.dj-band {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dj-band-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 16px;
  background: var(--color-base-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 27, 45, 0.05);
}
.dj-band-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
}
.dj-band-val {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-base-content);
  font-variant-numeric: tabular-nums;
}
.dj-band-sub { font-size: 0.75rem; color: color-mix(in srgb, var(--color-base-content) 74%, transparent); }

/* ---- apex /quizzes cover-art cards: the arc-card core lives above in
       this file; these three mirror arcade.css so the same card reads
       identically on the news host (arcade.css re-declares them with the
       SAME values on the arcade host — keep in sync). ---- */
.arc-thumb--quiz { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-base-200)), var(--color-base-200)); }
.arc-quiz-glyph { font-size: 3rem; line-height: 1; }
.arc-quiz-best { display: inline-flex; font-size: 11px; font-weight: 800; color: var(--color-primary); margin-top: 2px; }
.qz-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.45rem; }
.qz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-200);
  font-size: 0.68rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  white-space: nowrap;
}
.qz-badge .dj-ico { width: 0.8rem; height: 0.8rem; }
.qz-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- horoscopes: zodiac glyph tiles (♈–♓ are content glyphs, styled
       as neutral-skeuo tiles) + pick-your-sign selector ---- */
.horo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, var(--color-base-200));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(15, 27, 45, 0.05), 0 1px 2px rgba(15, 27, 45, 0.08);
}
.horo-glyph { font-size: 2rem; line-height: 1; color: var(--color-primary); }
.horo-tile--sm { width: 44px; height: 44px; border-radius: 13px; }
.horo-tile--sm .horo-glyph { font-size: 1.35rem; }
.horo-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.horo-pick-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem 0.45rem;
  min-width: 64px;
  border: 1px solid var(--color-base-300);
  border-radius: 14px;
  background: var(--color-base-100);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.horo-pick-btn:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.horo-pick-glyph { font-size: 1.4rem; line-height: 1; color: var(--color-primary); }
.horo-pick-name { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }
.horo-pick-btn.is-mine { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(15, 27, 45, 0.08); }
.horo-pick-btn.is-mine .horo-pick-name { color: var(--color-primary); }
.horo-card.is-mine { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 6px 18px rgba(15, 27, 45, 0.08); }
.horo-mine-flag { display: none; }
.horo-card.is-mine .horo-mine-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- tools hub: inline mini-widget per card ---- */
.tool-mini {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 14px;
  background: var(--color-base-200);
}
.tool-mini-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tool-mini-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-mini label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.tool-mini input,
.tool-mini select {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-base-300);
  border-radius: 10px;
  background: var(--color-base-100);
  font-size: 0.85rem;
  color: var(--color-base-content);
}
.tool-mini input:focus,
.tool-mini select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.tool-mini-out {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.tool-mini-out strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.tool-mini-golabel { justify-content: flex-end; }
.tool-mini-golabel .btn { align-self: stretch; }

/* ---- account/login: split hero with the membership value-prop panel ---- */
.login-split { display: grid; gap: 1.5rem; align-items: stretch; grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }
@media (min-width: 900px) { .login-split { grid-template-columns: 1.05fr 1fr; } }
.login-value {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1.1rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-base-100)), var(--color-base-100) 60%);
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.06);
}
.login-perk { display: flex; gap: 0.75rem; align-items: flex-start; }
.login-perk-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, var(--color-base-200));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 27, 45, 0.06);
  color: var(--color-primary);
}
.login-perk-ico .dj-ico { width: 1.1rem; height: 1.1rem; }
.login-perk h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--color-base-content); }
.login-perk p { margin: 0.15rem 0 0; font-size: 0.85rem; line-height: 1.5; color: color-mix(in srgb, var(--color-base-content) 65%, transparent); }
.login-price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.login-price strong { font-family: var(--font-display, Georgia, serif); font-size: 1.9rem; font-weight: 800; color: var(--color-base-content); }
.login-price span { font-size: 0.85rem; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }

/* ---- news wire: group headers + freshness chip ---- */
.wire-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-base-300);
}
.wire-group-head h2 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-base-content);
}
.wire-group-head .dj-ico { width: 1rem; height: 1rem; color: var(--color-primary); }
.wire-group-n { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--color-base-content) 50%, transparent); }

/* ---- my-junction: cross-property pull rails ---- */
.mj-pull-list { display: flex; flex-direction: column; gap: 0.4rem; }
.mj-pull-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-base-300);
  border-radius: 12px;
  background: var(--color-base-100);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-base-content);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.mj-pull-item:hover { border-color: var(--color-primary); transform: translateY(-1px); color: var(--color-primary); }
.mj-pull-item .dj-ico { width: 0.95rem; height: 0.95rem; flex: none; color: var(--color-primary); }
.mj-pull-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-empty {
  padding: 1.1rem 1rem;
  border: 1px dashed var(--color-base-300);
  border-radius: 14px;
  background: var(--color-base-100);
  font-size: 0.85rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.mj-empty a { font-weight: 700; color: var(--color-primary); text-decoration: none; }
.mj-empty a:hover { text-decoration: underline; }

/* ==========================================================================
   dj-wiki-daily — Wikimedia featured-daily module (Part F rank 11, G5 §3).
   Apex homepage only; reuses card tokens; no JS, no dark mode.
   ========================================================================== */
.dj-wiki-daily-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.dj-wiki-daily-tile {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 14px;
  background: var(--color-base-100);
  min-width: 0;
}
.dj-wiki-daily-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 72% floor for small text — 55% failed WCAG AA (render-qa 2026-07-13). */
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.dj-wiki-daily-title { margin: 0 0 0.4rem; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.dj-wiki-daily-title a { color: var(--color-base-content); text-decoration: none; }
.dj-wiki-daily-title a:hover { color: var(--color-primary); }
.dj-wiki-daily-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.dj-wiki-daily-imgwrap {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-base-200);
}
.dj-wiki-daily-img { display: block; width: 100%; max-height: 170px; object-fit: cover; }
.dj-wiki-daily-meta {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.dj-wiki-daily-list { margin: 0; padding: 0; list-style: none; }
.dj-wiki-daily-list li {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.dj-wiki-daily-list li:last-child { margin-bottom: 0; }
.dj-wiki-daily-list a { color: inherit; text-decoration: none; }
.dj-wiki-daily-list a:hover { color: var(--color-primary); }
.dj-wiki-daily-year {
  display: inline-block;
  margin-right: 0.35rem;
  font-weight: 800;
  color: var(--color-primary);
}
.dj-wiki-daily-foot {
  margin: 1rem 0 0;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}
.dj-wiki-daily-foot a { color: inherit; font-weight: 700; text-decoration: none; }
.dj-wiki-daily-foot a:hover { color: var(--color-primary); }

/* Republished source embeds retain their supplied markup verbatim. Keep any
   fixed-width video frame inside the article column on narrow viewports; the
   companion main.js hook adds accessibility metadata without touching the
   stored source body. */
.theconversation-article-body iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

/* ===========================================================================
   Apex editorial refinement — 2026-07-16

   Daily Junction keeps daisyUI/Tailwind as its prebuilt component chassis.
   This final layer only changes presentation on the news host (identified by
   the shared .dj-header); Play and Arcade retain their own visual languages.
   The aim is a denser, calmer news portal: fewer bubble-shaped controls, one
   elevation level, quieter type and clearer story hierarchy. No component is
   hidden and no engagement, ordering or interaction contract is changed.
   ========================================================================== */

body:has(.dj-header) {
  --font-body: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --radius-selector: 0.25rem;
  --radius-field: 0.3rem;
  --radius-box: 0.4rem;
  --radius-lg: 0.35rem;
  --radius-xl: 0.45rem;
  --radius-2xl: 0.55rem;
  background: color-mix(in srgb, var(--color-base-content) 3%, var(--color-base-100));
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body:has(.dj-header) .dj-shell {
  background: color-mix(in srgb, var(--color-base-content) 3%, var(--color-base-100));
}

/* Publication header: solid, keylined and compact. The coloured destination
   controls remain, but use tab geometry rather than soft app-style pills. */
.dj-header {
  border-bottom-color: var(--color-base-300);
  background: var(--color-base-100);
  backdrop-filter: none;
  box-shadow: 0 1px 4px rgba(20, 32, 54, 0.07);
}

.dj-header [class~="navbar"] {
  padding-block: 0.5rem;
}

.dj-header .dj-burger {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.25rem;
  background: var(--color-base-100);
}

.dj-header .dj-masthead {
  gap: 0.55rem;
}

.dj-header .dj-masthead-logo {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.2rem;
}

.dj-header .dj-masthead-name {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.dj-header .dj-masthead-tag {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}

.dj-header .live-readers,
.dj-header .dj-live-cta {
  border-radius: 0.25rem;
}

.dj-topbar .dj-ticker {
  margin-bottom: 0.42rem;
  padding: 0.38rem 0.65rem;
  border-color: var(--color-base-300);
  border-radius: 0.2rem;
  background: var(--color-base-200);
}

.dj-header .dj-ticker .badge {
  min-height: 1.35rem;
  border-radius: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dj-header .dj-ticker-link {
  font-size: 0.8rem;
  font-weight: 500;
}

.dj-header .dj-ticker-link > :first-child {
  color: var(--color-primary);
}

.dj-header .dj-navstrip {
  border-top-color: var(--color-base-300);
}

.dj-header .dj-navstrip-track {
  gap: 0.25rem;
  padding: 0.42rem 0;
}

.dj-header .dj-navstrip-track .dj-nav-pill {
  gap: 0.32rem;
  padding: 0.34rem 0.62rem;
  border-color: color-mix(in srgb, var(--color-base-content) 9%, var(--color-base-300));
  border-radius: 0.22rem;
  background: var(--color-base-200);
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: none;
}

.dj-header .dj-navstrip-track .dj-nav-pill:hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-base-100));
  color: var(--color-primary);
}

.dj-header .dj-navstrip-track .dj-nav-pill.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-base-300));
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-base-content));
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.dj-header .dj-navstrip-track .dj-nav-pill--wire,
.dj-header .dj-navstrip-track .dj-nav-pill--live,
.dj-header .dj-navstrip-track .dj-nav-pill--videos,
.dj-header .dj-navstrip-track .dj-nav-pill--arcade {
  color: #fff;
  font-weight: 700;
}

.dj-header .dj-navstrip-track .dj-nav-pill--wire {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.dj-header .dj-navstrip-track .dj-nav-pill--live {
  border-color: #d7192d;
  background: #d7192d;
}

.dj-header .dj-navstrip-track .dj-nav-pill--videos {
  border-color: #5c2d91;
  background: #5c2d91;
}

.dj-header .dj-navstrip-track .dj-nav-pill--arcade {
  border-color: #087f73;
  background: #087f73;
}

.dj-header .dj-navstrip-track :is(.dj-nav-pill--wire, .dj-nav-pill--live, .dj-nav-pill--videos, .dj-nav-pill--arcade):hover {
  color: #fff;
  opacity: 0.9;
}

.dj-header .dj-navstrip-track :is(.dj-nav-pill--wire, .dj-nav-pill--live, .dj-nav-pill--videos, .dj-nav-pill--arcade).is-active {
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.72);
}

.dj-header .dj-navstrip-track .dj-nav-pill--wire.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.dj-header .dj-navstrip-sep {
  height: 1.45rem;
  margin-inline: 0.1rem;
}

/* Shared newsroom rhythm and type. Explicit utility classes remain in the
   templates; this component scope gives them a calmer editorial hierarchy. */
.dj-header ~ main {
  padding-block: 1.35rem 2.5rem;
  background: color-mix(in srgb, var(--color-base-content) 3%, var(--color-base-100));
}

.dj-header ~ main .font-display {
  letter-spacing: -0.018em;
}

.dj-header ~ main :is(h1, h2).font-display {
  font-weight: 700;
}

.dj-header ~ main h3.font-display,
.dj-header ~ main [class~="card-title"] {
  font-weight: 650;
}

.dj-header ~ main section h2.font-display {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.15;
}

.dj-header ~ main .dj-eyebrow {
  margin-bottom: 0.25rem;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.dj-header ~ main .dj-wrap[class~="mt-12"] {
  margin-top: 2.25rem;
}

.dj-header ~ main .dj-wrap[class~="mt-10"] {
  margin-top: 1.9rem;
}

.dj-header ~ main .dj-wrap[class~="mt-8"] {
  margin-top: 1.5rem;
}

.dj-header ~ main [class~="card"] {
  border-color: var(--color-base-300);
  border-radius: 0.35rem;
  background: var(--color-base-100);
  box-shadow: none;
}

.dj-header ~ main [class~="card"] [class~="card-body"] {
  gap: 0.62rem;
  padding: 0.9rem 1rem 1rem;
}

.dj-header ~ main [class~="card"] [class~="card-title"] {
  font-size: 1.02rem;
  line-height: 1.28;
}

.dj-header ~ main .dj-card-thumb {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--color-base-300);
}

.dj-header ~ main .badge {
  border-radius: 0.18rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.dj-header ~ main .btn {
  border-radius: 0.25rem;
  font-weight: 650;
}

.dj-header ~ main :is(.input, .select, .textarea) {
  border-radius: 0.25rem;
}

.dj-header ~ main [class~="text-base-content/50"],
.dj-header ~ main [class~="text-base-content/60"] {
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.dj-header ~ main [class~="text-success"] {
  color: color-mix(in srgb, var(--color-success) 68%, var(--color-base-content));
}

/* Small utility labels on the Sport and Tools hubs sat below the publication's
   own muted-text floor. Keep their hierarchy quiet without sacrificing
   legibility on the pale portal canvas. */
.dj-header ~ main [aria-label="Sport headlines"] [class~="tab"]:not([class~="tab-active"]),
.dj-header ~ main .tool-mini label {
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
}

/* Homepage: keep the existing lead/rail content, but introduce a stronger
   lead-versus-secondary hierarchy and ruled section rhythm. */
.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] [class~="hero"] {
  padding: 0.2rem 0 0.5rem;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] [class~="hero-content"] {
  gap: 1rem;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] .dj-hero-image + div {
  padding: 1.15rem 1.25rem 1.3rem;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] .dj-hero-image + div h2.font-display {
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  line-height: 1.08;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] aside > :first-child,
.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] aside > .grid > div {
  border-color: var(--color-base-300);
  border-radius: 0.35rem;
  box-shadow: none;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) :is(section[aria-label="New on Daily Junction"], section[aria-label^="Latest in "]) > [class~="mb-5"] {
  margin-bottom: 0.9rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-base-300);
}

.dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Trending now"] > div {
  padding: 1rem 0 0;
  border-width: 3px 0 0;
  border-color: var(--color-primary);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) .dj-wiki-daily-tile {
  border-radius: 0.35rem;
  box-shadow: none;
}

.dj-header ~ main:has(section[aria-label="Top stories"]) .dj-wiki-daily-imgwrap {
  border-radius: 0.2rem;
}

@media (min-width: 768px) {
  .dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="New on Daily Junction"] > .grid > article:first-child {
    grid-column: span 2;
  }

  .dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="New on Daily Junction"] > .grid > article:first-child .dj-card-thumb {
    aspect-ratio: 16 / 7;
  }

  .dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="New on Daily Junction"] > .grid > article:first-child [class~="card-title"] {
    font-size: 1.3rem;
  }
}

/* Compact title bands on category/tag/listing pages. */
.dj-header ~ main > section.dj-wrap:first-child > [class~="border-b"] {
  padding-bottom: 1.6rem;
}

.dj-header ~ main > section.dj-wrap:first-child > [class~="border-b"] nav {
  margin-bottom: 1rem;
}

.dj-header ~ main > section.dj-wrap:first-child > [class~="border-b"] h1 {
  font-size: clamp(2rem, 4vw, 2.7rem);
}

.dj-header ~ main > section.dj-wrap:first-child > [class~="border-b"] h1 + p {
  margin-top: 0.7rem;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
}

.dj-header ~ main > section.dj-wrap:first-child > [class~="border-b"] h1 + p + div {
  margin-top: 0.85rem;
}

.dj-header ~ main > section.dj-wrap:first-child + section.dj-wrap > [class~="rounded-lg"] {
  padding: 0.75rem 1rem;
  border-right: 0;
  border-left: 0;
  border-radius: 0.25rem;
  background: transparent;
  box-shadow: none;
}

/* Hub components: retain all stats and calls to action, remove the faux
   inset-gloss treatment and let the headline/data do the work. */
.dj-header ~ main .dj-hub-hero {
  padding: 1.35rem 1.5rem;
  border-color: var(--color-base-300);
  border-top: 3px solid var(--color-primary);
  border-radius: 0.35rem;
  background: var(--color-base-100);
  box-shadow: none;
}

.dj-header ~ main .dj-hub-hero-row {
  align-items: flex-start;
  gap: 1rem;
}

.dj-header ~ main .dj-hub-hero-main {
  gap: 0.45rem;
}

.dj-header ~ main .dj-hub-hero-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.22rem;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
  box-shadow: none;
}

.dj-header ~ main .dj-hub-hero-title {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 700;
}

.dj-header ~ main .dj-hub-hero-sub {
  max-width: 70ch;
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
}

.dj-header ~ main .dj-stat-chip {
  padding: 0.3rem 0.6rem;
  border-radius: 0.22rem;
  box-shadow: none;
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
}

.dj-header ~ main .dj-band {
  gap: 0.55rem;
}

.dj-header ~ main .dj-band-cell {
  padding: 0.72rem 0.85rem;
  border-radius: 0.3rem;
  box-shadow: none;
}

/* News Wire becomes a compact chronological publication list instead of a
   dashboard made from one floating card per feed item. */
.dj-header ~ main:has(.wire-group-head) {
  background: var(--color-base-100);
}

.dj-header ~ main:has(.wire-group-head) > section.dj-wrap[class~="mt-10"] {
  margin-top: 1.45rem;
}

.dj-header ~ main:has(.wire-group-head) > section:first-child > [class~="hero"] {
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--color-base-300);
  border-top: 3px solid var(--color-primary);
  border-radius: 0.35rem;
  background: var(--color-base-100);
  box-shadow: none;
}

.dj-header ~ main:has(.wire-group-head) > section:first-child > [class~="hero"] [class~="hero-content"] {
  gap: 0.7rem;
}

.dj-header ~ main:has(.wire-group-head) > section:first-child > [class~="hero"] h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.25rem);
}

.dj-header ~ main:has(.wire-group-head) > section:first-child > [class~="hero"] p {
  max-width: 72ch;
  font-size: 0.98rem;
  line-height: 1.58;
}

.dj-header ~ main:has(.wire-group-head) > section.dj-wrap[class~="mt-10"] > .grid {
  gap: 1.35rem;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head {
  margin: 0;
  padding: 0.55rem 0.2rem;
  border-top: 2px solid var(--color-base-content);
  border-bottom-color: var(--color-base-300);
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head h2 {
  font-size: 1rem;
  font-weight: 700;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-n {
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
  font-weight: 600;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head ~ article {
  margin-block: 0;
  padding: 0.9rem 0.2rem 0.95rem;
  border: 0;
  border-bottom: 1px solid var(--color-base-300);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head ~ article h3 {
  margin-top: 0.4rem;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.34;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head ~ article h3 + p {
  margin-top: 0.42rem;
  line-height: 1.58;
}

.dj-header ~ main:has(.wire-group-head) .wire-group-head ~ article > :last-child {
  margin-top: 0.55rem;
}

.dj-header ~ main:has(.wire-group-head) [class~="text-base-content/40"],
.dj-header ~ main:has(.wire-group-head) [class~="text-base-content/50"],
.dj-header ~ main:has(.wire-group-head) [class~="text-base-content/60"] {
  color: color-mix(in srgb, var(--color-base-content) 76%, transparent);
}

.dj-header ~ main:has(.wire-group-head) aside > div,
.dj-header ~ main:has(.wire-group-head) [class~="space-y-6"] > [class~="rounded-lg"] {
  border-radius: 0.35rem;
  box-shadow: none;
}

.dj-header ~ main:has(.wire-group-head) aside [class~="badge-outline"] {
  background: var(--color-base-200);
}

/* Article pages use a clean reading canvas. Only true callouts and tools stay
   boxed; the prose itself no longer sits inside a second card. */
.dj-header ~ main:has(> article.dj-wrap) {
  background: var(--color-base-100);
}

.dj-header ~ main article.dj-wrap .article-title {
  max-width: 38ch;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.dj-header ~ main article.dj-wrap .article-byline {
  color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
}

.dj-header ~ main article.dj-wrap > figure {
  border-radius: 0.3rem;
  box-shadow: none;
}

.dj-header ~ main article.dj-wrap .article-body > :is(aside, section, div),
.dj-header ~ main article.dj-wrap aside[aria-label="Article tools"] > div {
  border-radius: 0.35rem;
  box-shadow: none;
}

.dj-header ~ main article.dj-wrap .article-body > div:has(> .dj-prose) {
  padding: 0;
  border: 0;
  background: transparent;
}

.dj-header ~ main article.dj-wrap .dj-prose {
  max-width: 72ch;
  font-size: 1.03rem;
  line-height: 1.76;
}

.dj-header ~ main article.dj-wrap .article-body > aside:first-of-type {
  border-left: 3px solid var(--color-primary);
}

.dj-header ~ main article.dj-wrap .article-body details {
  border-radius: 0.25rem;
}

.dj-header ~ main article.dj-wrap [aria-label="Key points at a glance"] > span {
  border-radius: 0.25rem;
  box-shadow: none;
}

.dj-header ~ main article.dj-wrap .dj-listen-btn,
.dj-header ~ main article.dj-wrap .sticky-article-bar__inner {
  border-radius: 0.25rem;
  box-shadow: none;
}

/* Footer and consent chrome follow the same restrained geometry. The consent
   copy, choices, priority and behaviour remain exactly as authored. */
body:has(.dj-header) .dj-shell > footer {
  background: color-mix(in srgb, var(--color-base-content) 4%, var(--color-base-100));
}

body:has(.dj-header) .dj-shell > footer .dj-wrap {
  padding-block: 2.25rem;
}

body:has(.dj-header) .dj-shell > footer .grid {
  gap: 1.75rem;
}

body:has(.dj-header) .dj-shell > footer .font-display {
  font-weight: 650;
  letter-spacing: -0.01em;
}

body:has(.dj-header) #cookie-banner > div {
  border-radius: 0.3rem;
  box-shadow: 0 4px 18px rgba(15, 27, 45, 0.14);
}

@media (max-width: 767px) {
  .dj-header ~ main {
    padding-block: 1rem 2rem;
  }

  .dj-header [class~="navbar"] {
    padding-block: 0.4rem;
  }

  .dj-header .dj-masthead-logo {
    width: 2.25rem;
    height: 2.25rem;
  }

  .dj-topbar .dj-ticker {
    margin-bottom: 0.35rem;
    padding-block: 0.34rem;
  }

  .dj-header .dj-navstrip-track {
    padding-block: 0.36rem;
  }

  .dj-header ~ main .dj-wrap[class~="mt-12"] {
    margin-top: 1.8rem;
  }

  .dj-header ~ main .dj-hub-hero {
    padding: 1.1rem;
  }

  .dj-header ~ main:has(.wire-group-head) > section:first-child > [class~="hero"] {
    padding: 1.05rem;
  }

  .dj-header ~ main:has(section[aria-label="Top stories"]) section[aria-label="Top stories"] .dj-hero-image + div {
    padding: 1rem;
  }

  .dj-header ~ main article.dj-wrap .dj-prose {
    font-size: 1rem;
  }

  body:has(.dj-header) #cookie-banner > div {
    gap: 0.65rem;
    padding: 0.7rem;
  }
}

/* The compact mobile audience chip shares a row with the existing controls.
   Let the two navbar clusters size to their contents throughout the mobile
   header range instead of each reserving 50%. Desktop begins at 64rem and is
   deliberately outside this correction. */
@media (max-width: 1023px) {
  .dj-header .navbar-start {
    width: auto;
    flex: 0 0 auto;
  }

  .dj-header .navbar-end {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.25rem;
  }
}

@media (max-width: 599px) {
  .dj-header [class~="navbar"] {
    gap: 0.25rem;
  }
}

@media (max-width: 479px) {
  .dj-header .dj-burger,
  .dj-header .dj-masthead-logo,
  .dj-header #djPushBell {
    width: 2.05rem;
    height: 2.05rem;
    min-height: 2.05rem;
  }

  .dj-header .dj-account .btn-sm {
    height: 2.05rem;
    min-height: 2.05rem;
    padding-inline: 0.35rem;
    font-size: 0.72rem;
  }

  .dj-header .dj-live-cta {
    min-height: 2.05rem;
    gap: 0.25rem;
    margin-left: 0;
    padding: 0.35rem 0.4rem;
    font-size: 0.72rem;
  }

  .dj-audience-mobile .dj-audience-signal {
    min-height: 2.05rem;
    gap: 0.35rem;
    padding: 0.3rem 0.45rem;
  }
}

@media (max-width: 399px) {
  .dj-audience-mobile .dj-audience-signal {
    gap: 0.3rem;
    padding-inline: 0.4rem;
  }

  .dj-audience-mobile .dj-audience-copy > span {
    font-size: 0;
  }

  .dj-audience-mobile .dj-audience-copy > span::after {
    content: 'NOW';
    font-size: 0.56rem;
  }
}

@media (max-width: 339px) {
  .dj-audience-mobile .dj-audience-copy > span {
    display: none;
  }
}

/* ============================================================
   HOUSE DISPLAY-AD UNITS + AD SHELL + END-OF-ARTICLE SHELF
   Retention infrastructure — a proper branded display-ad build
   (layered gradient, DJ masthead lockup, watermark icon, CTA
   button) that fills every ad space the network doesn't fill,
   sized to match the shape of the slot: medium-rect (mrect),
   leaderboard, half-page, or square.
   ============================================================ */

.dj-ad-wrap {
  margin: 1.25rem 0;
  min-height: 60px;
}
.dj-ad-wrap--house,
.dj-ad-wrap--house-live { margin: 1.25rem 0; }
.dj-ad-house[hidden] { display: none; }
.dj-ad-network[hidden] { display: none; }

/* --------- HOUSE CARD v2: proper display-ad unit ---------- */
.dj-house-card {
  --_hc: var(--dj-hc-accent, #1e40af);
  --_hc-deep: color-mix(in srgb, var(--_hc) 55%, #0b1220);
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.18);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.dj-house-card:hover,
.dj-house-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.26);
  text-decoration: none;
}
.dj-house-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Layered background: gradient + dot-grid texture + specular sheen +
   radial glow + DJ-red baseline bar (echoes the masthead logo's red
   underline, so every house unit carries an unmistakable brand cue). */
.dj-house-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%),
    linear-gradient(135deg, var(--_hc) 0%, var(--_hc-deep) 100%);
  background-size: 18px 18px, auto, auto;
  background-position: -4px -4px, 0 0, 0 0;
}
.dj-house-card__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: #e8401f;   /* DJ masthead red */
  opacity: 0.92;
}
.dj-house-card__glow {
  position: absolute;
  top: -60%;
  right: -40%;
  width: 120%;
  height: 200%;
  z-index: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.dj-house-card__watermark {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 46%;
  aspect-ratio: 1;
  z-index: 1;
  color: rgba(255, 255, 255, 0.14);
  transform: rotate(-8deg);
  pointer-events: none;
}
.dj-house-card__watermark .dj-ico { width: 100%; height: 100%; }

.dj-house-card__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 20px;
  gap: 10px;
}
.dj-house-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dj-house-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.92);
}
.dj-house-card__logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  padding: 2px;
  flex: 0 0 auto;
}
.dj-house-card__kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.dj-house-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.dj-house-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.dj-house-card__title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.1;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}
.dj-house-card__blurb {
  font-size: 0.86rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.78);
}
.dj-house-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #fff;
  color: #0f172a;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  align-self: flex-start;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.dj-house-card:hover .dj-house-card__cta {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
}
.dj-house-card__arrow { transition: transform 220ms ease; font-weight: 900; }
.dj-house-card:hover .dj-house-card__arrow { transform: translateX(4px); }

/* Fallback flag (JS observer swapped this in) is styled the same as
   a directly-rendered card — the fallback path is invisible to the reader. */

/* -------- SIZE VARIANTS -------- */

/* Medium-rect (IAB 300×250) — the default sidebar / mid-content shape. */
.dj-house-card--mrect {
  aspect-ratio: 300 / 250;
  min-height: 200px;
}
.dj-house-card--mrect .dj-house-card__title { font-size: clamp(1.1rem, 2vw, 1.35rem); }

/* Leaderboard — inline between paragraphs, wide + short. Grid layout. */
.dj-house-card--leaderboard { min-height: 96px; }
.dj-house-card--leaderboard .dj-house-card__inner {
  padding: 14px 18px;
  gap: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.dj-house-card--leaderboard .dj-house-card__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  grid-column: 1;
}
.dj-house-card--leaderboard .dj-house-card__body {
  grid-column: 2;
  flex-direction: column;
  gap: 3px;
}
.dj-house-card--leaderboard .dj-house-card__title {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.15;
}
.dj-house-card--leaderboard .dj-house-card__blurb { display: none; }
.dj-house-card--leaderboard .dj-house-card__cta {
  grid-column: 3;
  align-self: center;
}
.dj-house-card--leaderboard .dj-house-card__watermark {
  right: -8%;
  bottom: auto;
  top: -30%;
  width: 30%;
}
@media (max-width: 560px) {
  .dj-house-card--leaderboard { min-height: 110px; }
  .dj-house-card--leaderboard .dj-house-card__inner {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    gap: 8px;
  }
  .dj-house-card--leaderboard .dj-house-card__top { grid-column: 1; }
  .dj-house-card--leaderboard .dj-house-card__body { grid-column: 1; }
  .dj-house-card--leaderboard .dj-house-card__cta { grid-column: 1; }
  .dj-house-card--leaderboard .dj-house-card__eyebrow { display: none; }
}

/* Half-page (300×600 desktop / stacks on mobile) — deep vertical shape for
   the article-end AdSense slot. Extra room for a big headline. */
.dj-house-card--halfpage {
  aspect-ratio: 3 / 4;
  min-height: 260px;
}
.dj-house-card--halfpage .dj-house-card__inner { padding: 22px 22px; gap: 14px; }
.dj-house-card--halfpage .dj-house-card__title {
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
}
.dj-house-card--halfpage .dj-house-card__watermark {
  right: -12%;
  bottom: -10%;
  width: 55%;
}
@media (min-width: 900px) {
  .dj-house-card--halfpage { aspect-ratio: 300 / 480; }
}

/* Square — end-of-article grid, one per sub-property. */
.dj-house-card--square {
  aspect-ratio: 1 / 1;
  min-height: 200px;
}
.dj-house-card--square .dj-house-card__title {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}
@media (max-width: 560px) {
  .dj-house-card--square {
    aspect-ratio: auto;
    min-height: 130px;
  }
  .dj-house-card--square .dj-house-card__blurb { display: none; }
}

/* -------- SUB-PROPERTY ACCENTS -------- */
/* -------- Rendered campaign creative (GIF units) --------
   The image-ad presentation of the house campaign: real IAB-size
   animated creatives served like network fill, with the standard
   corner ad furniture (info triangle + "Ad"). */
.dj-house-ad {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  border-radius: 0;
}
.dj-house-ad img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
}
.dj-house-ad__ovl {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #5f6368;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 0 10px 0 8px;
  pointer-events: none;
}
.dj-house-ad__ovl svg { width: 11px; height: 11px; }
.dj-house-card--live    { --dj-hc-accent: #dc2626; }   /* live red */
.dj-house-card--shorts  { --dj-hc-accent: #ea580c; }   /* shorts orange */
.dj-house-card--arcade  { --dj-hc-accent: #0d9488; }   /* arcade teal */
.dj-house-card--play    { --dj-hc-accent: #7c3aed; }   /* play violet */
.dj-house-card--apps    { --dj-hc-accent: #0ea5e9; }   /* apps sky */
.dj-house-card--primary { --dj-hc-accent: #1e40af; }   /* primary indigo */

/* Live variant — extra ON AIR pulse dot on the kicker. */
.dj-house-card--live .dj-house-card__kicker {
  background: #dc2626;
  border-color: #fca5a5;
  padding-left: 20px;
  position: relative;
}
.dj-house-card--live .dj-house-card__kicker::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: dj-hc-pulse 1.6s ease-out infinite;
}
@keyframes dj-hc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-house-card--live .dj-house-card__kicker::before { animation: none; }
}

/* Small-screen tighten */
@media (max-width: 560px) {
  .dj-house-card__inner { padding: 14px 16px; }
  .dj-house-card__title { font-size: clamp(1rem, 4vw, 1.2rem); }
}

/* End-of-article shelf — three square house cards after the prose, giving a
   reader who finished a clean next-tap into video / shorts / arcade. */
.dj-end-of-article {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 1.1rem;
  border: 1px solid var(--color-base-300);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-base-100));
}
.dj-end-of-article__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 0.4rem;
}
.dj-end-of-article__title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1.2rem;
}
.dj-end-of-article__grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dj-end-of-article__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Anchor marker — invisible, only used by main.js to bound reading-progress %. */
.dj-article-end-anchor { display: block; height: 0; overflow: hidden; }

/* Nav pill — Shorts variant (amber, matches shorts house-card accent). */
.dj-nav-pill--shorts {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-color: #d97706;
  color: #1f2937;
  font-weight: 700;
}
.dj-nav-pill--shorts:hover { background: #d97706; border-color: #b45309; color: #fff; }
.dj-nav-pill--shorts.is-active { outline: 2px solid var(--color-neutral); outline-offset: 1px; }
.dj-nav-pill--shorts .dj-ico { color: currentColor; }
.dj-header .dj-navstrip-track .dj-nav-pill--shorts {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-color: #d97706;
  color: #1f2937;
}
.dj-header .dj-navstrip-track .dj-nav-pill--shorts:hover {
  background: #b45309;
  color: #fff;
}

/* Drawer — Shorts row echoes header pill accent. */
.dj-drawer-shorts {
  color: #b45309;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dj-drawer-shorts .dj-ico { color: #d97706; }

/* Homepage launcher tiles — colour the icon by sub-property. */
.dj-home-launcher--live .dj-home-launcher__icon { color: #e11d2e; background: rgba(225, 29, 46, 0.10); }
.dj-home-launcher--shorts .dj-home-launcher__icon { color: #d97706; background: rgba(217, 119, 6, 0.10); }
.dj-home-launcher--arcade .dj-home-launcher__icon { color: #0f766e; background: rgba(15, 118, 110, 0.10); }
.dj-home-launcher--apps .dj-home-launcher__icon { color: #0f172a; background: rgba(15, 23, 42, 0.08); }
.dj-home-launcher--live,
.dj-home-launcher--shorts,
.dj-home-launcher--arcade,
.dj-home-launcher--apps {
  border-color: currentColor;
  border-color: var(--color-base-300);
}

/* ============================================================
   MOBILE STICKY QUICKTABS
   Always-visible bottom bar with News / Live / Shorts / Arcade
   so a bouncer sees an onward journey before they leave. Hidden
   on tablet+; safe-area padded; body reserves room via padding.
   Sits above sticky-article-bar (70), read-nudge (75), and any
   other bottom-anchored chrome. On the Arcade host it stacks
   ABOVE the arcade's own arc-bottom-nav so both coexist.
   ============================================================ */

.dj-quicktabs {
  display: none;
}

@media (max-width: 767px) {
  /* Actual rendered heights (measured in Chrome/Safari mobile):
     - dj-quicktabs = 60px + safe-area (dj-quicktab items are 51-52px due to
       icon+label vertical stack, plus 4+4 container padding).
     - arc-bottom-nav = 60px (min-height, padding inside via border-box).
     Body pads bottom by the composite so the last article paragraph isn't
     hidden under either bar. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body.dj-host-arcade { padding-bottom: calc(60px + 60px + env(safe-area-inset-bottom, 0px)); }

  .dj-quicktabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;                   /* very bottom edge — the estate "escape hatch" */
    z-index: 100;                /* above read-nudge (75) + sticky-article-bar (70/80) */
    background: var(--color-base-100);
    border-top: 1px solid var(--color-base-300);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
    backdrop-filter: saturate(180%) blur(6px);
  }
  /* Arcade — dj-quicktabs stays at bottom:0 and arc-bottom-nav (arcade's own
     Home/Explore/Favourites/Leaders/Profile) stacks IMMEDIATELY above it.
     60px matches the quicktabs' measured content-height so the two bars
     abut with no visible gap. The safe-area-inset lives entirely on the
     quicktabs' own padding-bottom; add it here again and we'd double-count. */
  .dj-quicktabs--above-arc { bottom: 0; z-index: 100; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  body.dj-host-arcade .arc-bottom-nav {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 4px;         /* dj-quicktabs owns the safe-area strip */
    z-index: 46;
  }
  /* Read-nudge on arcade lifts above BOTH bars. */
  body.dj-host-arcade .read-nudge {
    bottom: calc(1rem + 62px + 60px + env(safe-area-inset-bottom, 0px));
  }
  /* Arcade toast (arcade.css puts it above arc-bottom-nav using --dj-dock-h;
     the nav itself moved up so the toast must lift too). */
  body.dj-host-arcade .arc-toast {
    bottom: calc(72px + 62px + 60px + env(safe-area-inset-bottom, 0px));
  }
  .dj-quicktab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--color-base-content) 74%, transparent);
    text-decoration: none;
    min-height: 48px;
    border-radius: 10px;
  }
  .dj-quicktab:active { background: color-mix(in srgb, var(--color-base-content) 6%, transparent); }
  .dj-quicktab__icon .dj-ico { width: 1.35rem; height: 1.35rem; display: block; }
  .dj-quicktab.is-active { color: var(--color-primary); }
  .dj-quicktab--live { color: #e11d2e; }
  .dj-quicktab--shorts { color: #ea580c; }
  .dj-quicktab--arcade { color: #0d9488; }
  .dj-quicktab--live.is-active,
  .dj-quicktab--shorts.is-active,
  .dj-quicktab--arcade.is-active {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
  .dj-quicktab--live:not(.is-active) .dj-quicktab__icon {
    position: relative;
  }
  .dj-quicktab--live:not(.is-active) .dj-quicktab__icon::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #e11d2e;
    box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.5);
    animation: dj-hc-pulse 1.8s ease-out infinite;
  }
  /* Header dj-live-cta always visible on mobile — drops Tailwind's lg:hidden. */
  .dj-header .dj-live-cta { display: inline-flex; }

  /* Read-nudge floats above the quicktabs bar (was flush at bottom). */
  .read-nudge {
    bottom: calc(1rem + 62px + env(safe-area-inset-bottom, 0px));
  }
  body.dj-host-arcade .read-nudge {
    bottom: calc(1rem + 62px + 64px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 768px) {
  .dj-quicktabs { display: none; }
}

/* ============================================================
   AUDIENCE CHIP — Arcade "playing now"
   Match play chrome: sit inline in the header actions row on
   every viewport, chip-sized on mobile like the other actions.
   ============================================================ */
.arc-audience-chip {
  min-height: 2.2rem;
  padding: 0.32rem 0.65rem;
  gap: 0.5rem;
  border-radius: 0.4rem;
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.1);
}
.arc-audience-chip .dj-audience-copy strong { font-size: 0.98rem; }
.arc-audience-chip .dj-audience-copy > span {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
}
@media (max-width: 767px) {
  .arc-audience-chip {
    min-height: 2rem;
    padding: 0.28rem 0.5rem;
    gap: 0.38rem;
  }
  .arc-audience-chip .dj-audience-copy strong { font-size: 0.9rem; }
  .arc-audience-chip .dj-audience-copy > span {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }
  .arc-audience-chip .dj-audience-beacon {
    width: 0.75rem;
    height: 0.75rem;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
  }
  .arc-audience-chip .dj-audience-beacon > span {
    width: 0.45rem;
    height: 0.45rem;
  }
}
/* On very narrow screens the "PLAYING NOW" label pushes Sign-in / Join past
   the right edge (owner-reported 2026-07-20). Drop the label — the beacon
   dot and the number are the informative bits; the label reappears at 461px+. */
@media (max-width: 460px) {
  .arc-audience-chip .dj-audience-copy > span { display: none; }
  .arc-audience-chip { padding: 0.24rem 0.42rem; }
  body.dj-host-arcade .arc-header-actions { gap: 4px; }
  body.dj-host-arcade .arc-header-actions .arc-bell,
  body.dj-host-arcade .arc-favourites-link {
    display: none; /* both are reachable from the arc-bottom-nav below */
  }
  body.dj-host-arcade .arc-brand-name { max-width: 88px; }
}

/* ============================================================
   ARTICLE AUDIENCE "PRIMARY" CARD — mobile chip form
   The prominent 5rem-tall reading-now card is not appropriate in
   the article-actions row on narrow screens. Collapse to chip.
   ============================================================ */
@media (max-width: 640px) {
  .article-audience-primary {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    gap: 0.42rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100));
    box-shadow: 0 2px 8px rgba(20, 33, 61, 0.08);
    border-width: 1px;
  }
  .article-audience-primary-copy { font-size: 0.72rem; gap: 0.32rem; }
  .article-audience-primary-copy strong {
    font-size: 1rem;
    letter-spacing: -0.02em;
  }
  .article-audience-live { display: none; }
}

/* End of house-card / quicktabs / audience block. */