/* ═══════════════════════════════════════════════════
   Y254 — channel skin
   ───────────────────────────────────────────────────
   Loads AFTER assets/css/style.css and overrides only
   what makes Y254 its own channel. Every layout rule,
   component and breakpoint still comes from the KBC
   stylesheet, so the two sites stay structurally
   identical and only diverge in identity.

   Colours sampled from assets/img/y254-logo.png.
═══════════════════════════════════════════════════ */

:root{
  /* ── Palette derived from actual ink coverage in the logo ──
     Measured across every pixel of assets/img/y254-logo.png:
       BLUE   66.7%   the "254" wordmark and IMAGINE
       RED    19.2%   part of the swoosh
       GREEN  11.5%   part of the swoosh
       ORANGE  1.0%   a sliver of the swoosh

     So blue leads. KBC's --ember slot (nav underlines, buttons, live dot,
     ticker label, section rules) takes the logo BLUE — that single mapping
     is what separates the two channels at a glance. Red and green stay as
     the energetic secondaries they are in the mark itself. */

  --ember:#2B52A1;        /* logo blue — the dominant brand colour */
  --ember-2:#4A85E0;      /* lifted blue, for text and small accents */
  --gold:#4DBA45;         /* logo green, in place of KBC's gold */

  --y-red:#F01A22;        /* swoosh red — live dot, alerts, chart #1 */
  --y-orange:#DE6F2A;     /* swoosh orange — sparingly */
  --y-blue-deep:#1B3D7A;  /* darker blue for gradients */
}

/* ── Brand lockup: swap the "K" square for the real logo ── */
.brand .mark.y-mark{
  width:auto;height:42px;
  background:none;border-radius:0;
  padding:0;
}
.brand .mark.y-mark img{height:42px;width:auto;display:block;}
.drawer .brand .mark.y-mark img,
.site-foot .brand .mark.y-mark img{height:38px;}

/* ── Channel chip in the topbar, so the network relationship is explicit ── */
.tb-net{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);
}
.tb-net a{color:var(--paper-2);font-weight:700;}
.tb-net a:hover{color:var(--white);}

/* ── Live signifiers keep the logo red. "On air" reading red is a
   broadcast convention, and red is genuinely in the mark. ── */
.tb-live .dot,
.ticker .lbl .dot,
.btn-primary .dot,
.slot-b{background:var(--y-red);}
.ticker .lbl{background:var(--y-red);color:#fff;}

/* ── News rows ──
   KBC's .row-item grid is `auto 96px 1fr auto` — number, thumbnail, text,
   date. Y254 has no thumbnails yet, so the 96px image column is dropped
   and the text takes the free space. Without this the headline lands in
   the image slot and wraps into a ~96px ribbon. */
.rows .row-item{grid-template-columns:auto 1fr auto;}

/* ── Chart ── */
.chart{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink-2);}
.chart-top{
  padding:20px 24px;
  background:linear-gradient(100deg,var(--y-blue-deep),var(--ember) 55%,var(--y-red));
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.chart-top h3{
  font-family:var(--font-x);font-weight:800;font-size:20px;
  letter-spacing:.01em;color:#fff;
}
.chart-top .meta{font-size:12px;color:rgba(255,255,255,.9);font-weight:600;letter-spacing:.05em;}
.chart-row{
  display:flex;align-items:center;gap:16px;
  padding:15px 24px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.chart-row:last-child{border-bottom:none;}
.chart-row:hover{background:var(--ink-3);}
.chart-pos{
  font-family:var(--font-x);font-weight:800;font-size:22px;
  width:34px;flex-shrink:0;color:var(--fog-2);font-variant-numeric:tabular-nums;
}
.chart-row:nth-child(2) .chart-pos{color:var(--y-red);}
.chart-row:nth-child(3) .chart-pos{color:var(--ember-2);}
.chart-row:nth-child(4) .chart-pos{color:var(--gold);}
.chart-info{flex:1;min-width:0;}
.chart-song{font-weight:700;font-size:15px;color:var(--white);}
.chart-artist{font-size:13px;color:var(--fog);margin-top:2px;}
.chart-move{font-size:11.5px;font-weight:700;flex-shrink:0;letter-spacing:.04em;}
.chart-move.up{color:var(--gold);}
.chart-move.down{color:var(--y-red);}
.chart-move.same{color:var(--fog-2);}

/* ── Schedule ── */
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:22px;scrollbar-width:none;}
.days::-webkit-scrollbar{display:none;}
.day{
  padding:9px 18px;border-radius:var(--radius);
  background:transparent;border:1px solid var(--line-2);color:var(--paper-2);
  font-size:13px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  transition:all .3s var(--ease);cursor:pointer;
}
.day:hover{border-color:var(--paper);color:var(--white);}
.day.on{background:var(--ember);border-color:var(--ember);color:#fff;}

.slot{
  display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;
  padding:16px 18px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.slot:hover{background:var(--ink-2);}
.slot.now{background:rgba(43,82,161,.10);border-left:2px solid var(--y-red);}
.slot-t{
  font-family:var(--font-x);font-weight:800;font-size:15px;
  color:var(--ember-2);font-variant-numeric:tabular-nums;
}
.slot-n{font-weight:700;font-size:15px;color:var(--white);margin-bottom:3px;}
.slot-d{font-size:13px;color:var(--fog);}
.slot-b{
  padding:5px 12px;border-radius:var(--radius);background:var(--ember);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

/* ── Show card art placeholder ── */
.show-art{
  aspect-ratio:16/9;display:grid;place-items:center;font-size:42px;
  background:linear-gradient(135deg,var(--ink-3),var(--ink-4));
  position:relative;
}
.show-when{
  position:absolute;left:12px;bottom:12px;
  padding:5px 12px;border-radius:var(--radius);
  background:rgba(10,10,12,.88);backdrop-filter:blur(8px);
  font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--white);
}

@media(max-width:760px){
  .slot{grid-template-columns:76px 1fr;gap:12px;}
  .slot-b{grid-column:2;justify-self:start;margin-top:6px;}
  .tb-net{display:none;}
}