/* 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) 86%, transparent);
  font-size: 1rem;
  line-height: 1.8;
}

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

.dj-prose h2,
.dj-prose h3,
.dj-prose h4 {
  color: var(--color-base-content);
  font-family: inherit;
  line-height: 1.2;
  margin-top: 2rem;
}

.dj-prose h2 {
  font-size: 1.65rem;
  font-weight: 800;
}

.dj-prose h3 {
  font-size: 1.3rem;
  font-weight: 700;
}

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

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

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

.dj-prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

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

.dj-prose img {
  width: 100%;
  border-radius: 1rem;
}

.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;
}

.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;
}

.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 {
  font-size: 0.78rem;
  color: #97a3b8;
  white-space: nowrap;
}

/* 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-group { overflow: hidden; }
.tvg-group-title { font-size: clamp(1.2rem, 2.3vw, 1.5rem); letter-spacing: -0.015em; }
.tvg-scroll {
  max-height: min(74vh, 760px);
  overflow: auto;
  border: 1px solid var(--color-base-300);
  border-radius: 0.55rem;
  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: 980px; }

.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);
}
.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-group {
    margin-bottom: 1rem;
    border-radius: 0.65rem;
    padding: 0.65rem;
    box-shadow: none;
  }
  .tvg-group-title { margin-bottom: 0.35rem; padding-inline: 0.3rem; font-size: 1.2rem; }
  .tvg-scroll { max-height: 70dvh; border-radius: 0.4rem; }
  .tvg { min-width: 820px; }
  .tvg-ruler,
  .tvg-row { grid-template-columns: 94px minmax(0, 1fr); }
  .tvg-ch { gap: 0.35rem; padding: 0.35rem 0.4rem; }
  .tvg-ch-icon { width: 32px; height: 32px; border-radius: 6px; }
  .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.68rem;
    line-height: 1.12;
  }
  .tvg-ch-live { display: none; }
  .tvg-lane {
    grid-auto-rows: 3.65rem;
    padding-block: 3px;
  }
  .tvg-time { padding: 0.32rem 0 0.38rem 0.3rem; font-size: 0.66rem; }
  .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.72rem;
    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; }
}

/* ===================================================================
   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;
}

/* corner surfaces ride above whatever currently owns the dock */
.nl-timed { bottom: calc(1rem + var(--dj-dock-h, 0px)); }
@media (max-width: 768px) {
  .nl-timed { bottom: calc(0.5rem + 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);
}
.quiz-progress-bar {
  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;
  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) 55%, transparent);
  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) 50%, 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) 55%, 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);
}
.app-release-sha {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  word-break: break-all;
  color: color-mix(in srgb, var(--color-base-content) 40%, 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,
.dj-hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.card:hover,
.dj-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 27, 45, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  a.card, .dj-hover-lift { transition: none; }
  a.card:hover, .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) 52%, 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) 58%, 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;
}