/* ================================================================
   LOKTUBE v221 — REAL FIX (targets v50_master.css + v205_patch.css,
   the two files header.php actually loads)
   ------------------------------------------------------------------
   BUG 1 — Black card:
   v205_patch.css sets `.yt-card { background: var(--bg1); }` but
   --bg1 is never defined anywhere (not in header.php's inline
   :root, not in v50_master.css, not in v205_patch.css). An
   undefined CSS variable with no fallback makes the whole
   declaration invalid, so background falls back to transparent —
   the card shows the page's near-black body colour through it.

   BUG 2 — Title/channel/views split into side-by-side columns:
   .yt-meta is declared TWICE with non-overlapping properties, so
   they merge instead of one replacing the other:
     v50_master.css : .yt-meta { display:flex; gap:10px; padding:...}
     v205_patch.css : .yt-meta { flex:1; min-width:0; }
   Result: .yt-meta becomes display:flex (row) AND flex:1 at the
   same time — so its children (title, channel, stats) become
   flex-row siblings squeezed into narrow columns instead of
   stacking normally under the title.

   LOAD ORDER: this file must be the LAST <link rel="stylesheet">
   in <head>, after v50_master.css and v205_patch.css. It is
   currently linked mid-<body> in header.php (line ~516) — move it
   up into <head>, right after the v205_patch.css line, so it
   applies before first paint (no flash of broken layout).
   ================================================================ */

/* ── FIX 1: define the missing --bg1 token ─────────────────────
   Match the existing dark palette already set in header.php's
   inline <style> (--bg:#0C0C0C, --bg2:#111, --bg3:#1A1A1A). */
:root {
  --bg1: #141414;
}
[data-theme="light"] {
  --bg1: #FFFFFF;
}

/* ── FIX 2: un-merge .yt-meta back into a single, correct role ──
   .yt-meta should ONLY be the flex:1 info column beside the
   avatar (per v205's intent) — never a flex row itself. */
.yt-meta {
  display: block !important;
  flex: 1;
  min-width: 0;
}

/* ── POLISH: channel name + views + time on one line, YouTube
   style, instead of 3 separate stacked rows ── */
.yt-channel,
.yt-stats {
  display: inline;
  margin-bottom: 0;
}
.yt-stats::before {
  content: '•';
  margin: 0 5px;
  opacity: .55;
  font-size: 10px;
}
.yt-channel + .yt-stats {
  display: inline;
}

/* Ensure the row (avatar + info) itself still lays out correctly */
.yt-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.yt-avatar-wrap { flex-shrink: 0; }

/* Safety net: if --bg1 is ever missing in a future theme, fall
   back to --bg2 rather than rendering transparent/black again */
.yt-card {
  background: var(--bg1, var(--bg2, #141414));
}
