/* Mock-only additions for the hub-catalog consolidation round 1.
   These classes do NOT exist in the product stylesheets (hub.css / tube.css);
   they stand in for pieces the consolidated UI will need (type badges, filter
   chips, initials thumbnails, player placeholder). Everything else reuses the
   real tube-* / hub-* classes so the review reflects the production look. */

/* --- type badge on card thumbnails ------------------------------- */
.mock-kind {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--tube-radius-full, 9999px);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(4px);
}
.mock-kind-video { background: rgba(79, 70, 229, .88); }
.mock-kind-music { background: rgba(180, 83, 9, .88); }
.mock-kind-item  { background: rgba(5, 150, 105, .88); }

/* --- initials thumbnail placeholder ------------------------------ */
.mock-thumb-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--tube-accent, #6366f1);
  background: color-mix(in srgb, var(--tube-accent, #6366f1) 10%, var(--tube-surface, #fff));
}

/* --- filter chip bar --------------------------------------------- */
.mock-chipbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.mock-chipbar-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tube-text-subtle, #94a3b8);
  margin-right: .25rem;
}
.mock-chip {
  display: inline-flex;
  align-items: center;
  padding: .4rem .9rem;
  background: var(--tube-surface, #fff);
  border: 1px solid var(--tube-border, #e2e8f0);
  border-radius: var(--tube-radius-full, 9999px);
  font-size: .85rem;
  font-weight: 600;
  color: var(--tube-text-muted, #64748b);
  cursor: pointer;
}
.mock-chip:hover { border-color: var(--tube-accent, #6366f1); color: var(--tube-accent, #6366f1); }
.mock-chip.active {
  background: var(--tube-accent, #6366f1);
  border-color: var(--tube-accent, #6366f1);
  color: #fff;
}
.mock-chip-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--tube-border, #e2e8f0);
  margin: 0 .35rem;
}
.mock-empty {
  display: none;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tube-text-muted, #64748b);
  border: 1px dashed var(--tube-border, #e2e8f0);
  border-radius: var(--tube-radius-xl, 1.25rem);
  background: var(--tube-surface, #fff);
}
.mock-empty.show { display: block; }

/* --- hero search button affordance ------------------------------- */
.tube-hero-search input {
  padding-right: 6.5rem !important;
}
.tube-hero-search .mock-hero-btn {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: var(--tube-radius-full, 9999px);
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: var(--tube-accent, #6366f1);
  cursor: pointer;
}

/* --- author chip meta (name + instance) -------------------------- */
.tube-card-author-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tube-card-author-inst { font-size: .72rem; color: var(--tube-text-subtle, #94a3b8); }

/* --- video player placeholder ------------------------------------ */
.mock-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--hub-radius-lg, 1rem);
  background: linear-gradient(135deg, #111827, #1e1b4b);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}
.mock-player-play {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(2px);
}
.mock-player-play svg { width: 2rem; height: 2rem; fill: #fff; margin-left: .25rem; }
.mock-player-tag {
  position: absolute;
  bottom: .75rem;
  left: .9rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .65;
}

/* --- share pill reuses tube-action-pill; row spacing ------------- */
.tube-card-actions .mock-pill-spacer { margin-left: auto; display: flex; gap: .5rem; }

/* --- preview eyebrow note ---------------------------------------- */
.mock-preview-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: .3rem .8rem;
  border-radius: var(--tube-radius-full, 9999px);
  border: 1px dashed var(--tube-border-strong, #cbd5e1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tube-text-subtle, #94a3b8);
}

/* --- detail layout helpers (reuse hub classes where they exist) -- */
.mock-detail-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.mock-related-rail { margin-top: 2rem; }
.mock-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) { .mock-detail-layout { grid-template-columns: minmax(0, 1fr); } }

/* --- score staff-lines preview placeholder ----------------------- */
.mock-staff {
  position: relative;
  height: 10rem;
  border: 1px solid var(--hub-border, #e2e8f0);
  border-radius: var(--hub-radius-xl, 1rem);
  background: repeating-linear-gradient(to bottom, var(--hub-surface, #fff), var(--hub-surface, #fff) 1.45rem, var(--hub-border, #e2e8f0) 1.5rem);
  overflow: hidden;
}
.mock-staff-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--hub-text-subtle, #94a3b8);
}

/* ==================================================================
   ROUND 3 - WCAG AA contrast overrides (light theme)
   See CONTRAST-CHANGES.md. The real product CSS (hub.css/tube.css)
   ships these tokens lighter; this layer isolates the diff so the
   later template implementation can lift it back into the source.
   ================================================================== */

/* accent #6366f1 on white = 4.47:1 (fail). Darker indigo keeps the
   peerbase look and passes everywhere accent text sits on a surface. */
html[data-theme="light"] body.tube,
html[data-theme="light"] body.hub {
  --tube-accent: #4f46e5;
  --tube-accent-dark: #4338ca;
  --hub-accent: #4f46e5;
  --hub-accent-light: #6366f1;
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] body.tube {
    --tube-accent: #4f46e5;
    --tube-accent-dark: #4338ca;
  }
  html[data-theme="system"] body.hub {
    --hub-accent: #4f46e5;
    --hub-accent-light: #6366f1;
  }
}

/* subtle #94a3b8 on white = 2.56:1 (fail) -> #64748b = 4.76:1.
   Breadcrumbs, chip labels, rail hints, placeholders, notes. */
html[data-theme="light"] body.tube { --tube-text-subtle: #64748b; }
html[data-theme="light"] body.hub { --hub-text-subtle: #64748b; }
@media (prefers-color-scheme: light) {
  html[data-theme="system"] body.tube { --tube-text-subtle: #64748b; }
  html[data-theme="system"] body.hub { --hub-text-subtle: #64748b; }
}
html[data-theme="light"] ::placeholder,
html[data-theme="light"] .tube-hero-search input::placeholder { color: #64748b; }
@media (prefers-color-scheme: light) {
  html[data-theme="system"] ::placeholder,
  html[data-theme="system"] .tube-hero-search input::placeholder { color: #64748b; }
}

/* type badges were rgba(...,.88) over busy gradients (item green dropped
   to 3.77:1). Opaque, deeper solids: white on these is 5.5-7.9:1. */
.mock-kind {
  background: rgba(15, 23, 42, .82);
  backdrop-filter: none;
}
.mock-kind-video { background: #4338ca; }
.mock-kind-music { background: #92400e; }
.mock-kind-item  { background: #047857; }

/* initials fallback block: accent on a 10% tint was 3.91:1 (fail at
   large-text threshold 3:1 only barely, and it renders small in the
   mini rail). accent-dark on the tint is 5.5:1. */
.mock-thumb-ph { color: var(--tube-accent-dark, #4338ca); }

/* CTA buttons: white on amber #f59e0b = 2.15:1 (fail). Dark ink on the
   amber keeps the brand color and passes at 8.1:1. */
.hub-btn-primary { color: #1c1917; }
.mock-hero-btn { color: #fff; background: var(--tube-accent, #4f46e5); }

/* chips: inactive border #e2e8f0 on white = 1.4:1. Deepen the boundary
   and give inactive chips a tinted fill so the control reads as one. */
.mock-chip { border-color: #cbd5e1; }
.mock-chip.active { border-color: var(--tube-accent, #4f46e5); }

/* ==================================================================
   ROUND 6 - dark-theme AA overrides (operator: detail/shell "all dark")
   The operator browses with a dark system theme; the round-3 pass was
   light-scoped. Same method, dark tokens. See CONTRAST-CHANGES.md.
   ================================================================== */

/* subtle #64748b on dark surface #181b28 = 3.60 (fail) -> #94a3b8 = 6.68.
   Breadcrumbs, spec labels, skill levels, rail hints, staff notes. */
html[data-theme="dark"] body.tube { --tube-text-subtle: #94a3b8; }
html[data-theme="dark"] body.hub { --hub-text-subtle: #94a3b8; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body.tube { --tube-text-subtle: #94a3b8; }
  html[data-theme="system"] body.hub { --hub-text-subtle: #94a3b8; }
}

/* active chip: white on dark accent #818cf8 = 2.98 (fail) -> dark ink 8.6.
   Same for the hero Search button. */
html[data-theme="dark"] .mock-chip.active,
html[data-theme="dark"] .mock-hero-btn { color: #0f111a; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .mock-chip.active,
  html[data-theme="system"] .mock-hero-btn { color: #0f111a; }
}

/* initials fallback: accent-dark #6366f1 on dark tint = 3.49 -> accent
   #818cf8 on the tint is ~5.7. */
html[data-theme="dark"] body.tube .mock-thumb-ph { color: var(--tube-accent); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body.tube .mock-thumb-ph { color: var(--tube-accent); }
}

/* ==================================================================
   ROUND 6 - one content-container convention
   The peerbase chrome pages (community/detail via .hub-pad) are
   full-width with 1.5rem gutters; the tube pages centered a 1320px
   .tube-container, so every cross-page navigation shifted the content
   left edge. Standardize on the peerbase convention everywhere.
   ================================================================== */
.tube-container {
  max-width: none;
  margin-inline: 0;
}

/* ==================================================================
   ROUND 6 - system-dark parity for the tube tokens
   Product gap found while auditing the operator's "all dark" report:
   tube.css ships dark tokens ONLY for html[data-theme=dark], while
   hub.css covers prefers-color-scheme:dark under data-theme=system.
   Result: a system-dark visitor got a dark shell on a LIGHT tube
   body (colliding mixed rendering). Mirror the tube dark set into
   the system-dark scope so the consolidated UI is coherent.
   (At port time: fix this in the product token source instead.)
   ================================================================== */
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body.tube {
    --tube-bg: #0f111a;
    --tube-surface: #181b28;
    --tube-surface-elevated: #1f2333;
    --tube-text: #f1f5f9;
    --tube-text-muted: #94a3b8;
    --tube-border: #2a2f42;
    --tube-border-strong: #3a4058;
    --tube-accent: #818cf8;
    --tube-accent-light: #a5b4fc;
    --tube-accent-dark: #6366f1;
  }
}

/* The hero ribbon gradients are hardcoded light in tube.css, which hides
   light hero text in dark mode. Dark equivalents keep the brand feel. */
html[data-theme="dark"] .tube-hero-ribbon,
html[data-theme="dark"] .tube-channel-hero {
  background: linear-gradient(135deg, #1e1b4b, #181b28);
}
html[data-theme="dark"] .tube-profile-hero {
  background: linear-gradient(135deg, #1e1b4b, #292018);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .tube-hero-ribbon,
  html[data-theme="system"] .tube-channel-hero {
    background: linear-gradient(135deg, #1e1b4b, #181b28);
  }
  html[data-theme="system"] .tube-profile-hero {
    background: linear-gradient(135deg, #1e1b4b, #292018);
  }
}