/*
==============================================================================
  AVAVA | Radio Station HTML Template
  schedule.css — styles of the Schedule page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. Filter — search, channel and genre picks, the week's load, active chips
  02. On air — the day strip with the NOW needle, the current show, track log, next rail
  03. Week grid — seven days by nine slots, the NOW line, hours by channel
  04. Today — parts of the day, the hour ribbon and the cards
  05. Specials — the next night and the cards, specials by month
  06. Changes — the counters, the days rail and the edit cards
  07. Subscribe — calendar tiles, the feed with its QR, reminders
  08. Responsive

==============================================================================
*/

:root {
  --sc-e6: rgba(201, 80, 42, .06);
  --sc-e7: rgba(201, 80, 42, .07);
  --sc-e10: rgba(201, 80, 42, .1);
  --sc-e12: rgba(201, 80, 42, .12);
  --sc-e14: rgba(201, 80, 42, .14);
  --sc-e50: rgba(201, 80, 42, .5);
  --sc-e55: rgba(201, 80, 42, .55);
  --sc-e60: rgba(201, 80, 42, .6);
  /* the six channels keep one colour each across the grid and the split bar */
  --sc-c1: rgba(128, 128, 128, .62);
  --sc-c2: rgba(128, 128, 128, .54);
  --sc-c3: var(--accent);
  --sc-c4: rgba(128, 128, 128, .46);
  --sc-c5: rgba(128, 128, 128, .38);
  --sc-c6: rgba(128, 128, 128, .3);
}

.sec--filter { background: var(--panel); padding-top: 40px; }
.sec--onair, .sec--weekgrid, .sec--today, .sec--specials, .sec--changes, .sec--subscribe { background: var(--panel); }
.sec--subscribe { padding-bottom: 60px; }
.divider--s { background: var(--i10); }
.fl-sheet, .na-sheet, .wg-sheet, .td-sheet, .xp-sheet, .cg-sheet, .cl-sheet { border: 1px solid var(--i12); background: var(--card); }
.wg-sheet, .td-sheet, .xp-sheet, .cg-sheet, .cl-sheet { padding: clamp(26px, 2.8vw, 42px) clamp(24px, 2.6vw, 44px); }

/* ============================================================================
   01. Filter
   ========================================================================= */
.fl-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); padding: 16px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i16); }
.fl-search { display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; min-width: 0; }
.fl-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fl-hint { color: var(--i5); white-space: nowrap; text-transform: none; }
.fl-hint:hover { color: var(--accent); }
.fl-field { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--accent); }
.fl-glass { flex: none; font: 400 26px / 1 'DM Mono', ui-monospace, monospace; color: var(--accent); }
.fl-q { flex: 1; min-width: 0; padding: 0; border-bottom: 0; font: 500 17px / 1.2 Archivo, sans-serif; }
.fl-q::-webkit-search-decoration, .fl-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.fl-field .mono { flex: none; white-space: nowrap; }
.fl-drop { display: flex; flex-direction: column; gap: 6px; flex: 1 1 150px; min-width: 0; }
.fl-pick { display: flex; align-items: center; gap: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--i28); text-transform: none; letter-spacing: 0; }
.fl-pick .v { color: var(--i75); }
.fl-pick.is-on { border-bottom-color: var(--accent); }
.fl-pick.is-on .v { color: var(--accent); }
.fl-pick:hover { border-bottom-color: var(--accent); }
.fl-pick .mono:last-child { margin-left: auto; }
.fl-kinds { flex: none; }
.fl-kinds button { padding: 9px 12px; color: var(--i7); }
.fl-kinds button.is-on { background: var(--accent); color: #fff; }
.fl-day { display: flex; align-items: center; flex: none; border: 1px solid var(--i28); }
.fl-day button { padding: 9px 11px; color: var(--i6); }
.fl-day button:hover { color: var(--accent); }
.fl-day .mono { padding: 9px 12px; white-space: nowrap; }
.fl-week { display: flex; align-items: flex-end; gap: clamp(8px, 1.1vw, 18px); padding: 14px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i12); }
.fl-week > .mono { flex: none; padding-bottom: 6px; }
.fl-week ol { display: flex; align-items: flex-end; gap: clamp(8px, 1.1vw, 18px); flex: 1; min-width: 0; }
.fl-week li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.fl-week li:hover { opacity: .8; }
.fl-week .mono { color: var(--i5); }
.fl-week li .mono:last-child { color: var(--i4); }
.fl-week li.is-on .mono { color: var(--accent); }
.fl-col { display: flex; align-items: flex-end; height: 26px; background: var(--i10); }
.fl-col > i { display: block; width: 100%; background: var(--i28); }
.fl-week li.is-on .fl-col > i { background: var(--accent); }
.fl-active { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i12); }
.fl-act { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--sc-e14); border: 1px solid var(--sc-e60); color: var(--accent); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; white-space: nowrap; }
.fl-act .x { opacity: .6; }
.fl-act:hover { background: var(--accent); color: #fff; }
.fl-clear:hover { color: var(--accent); }
.fl-presets { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fl-preset { padding: 7px 11px; border: 1px solid var(--i28); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; white-space: nowrap; }
.fl-preset:hover { border-color: var(--accent); color: var(--accent); }
.fl-sum { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 26px); padding: 12px clamp(24px, 2.6vw, 44px); }
.fl-next { display: flex; align-items: center; gap: 9px; }
.fl-next .mono, .fl-sum > .mono { white-space: nowrap; }
.fl-split { flex: 1 1 200px; min-width: 120px; display: flex; height: 6px; background: var(--i10); }
.fl-split .live { width: 78%; background: var(--accent); }
.fl-split .reb { width: 22%; background: var(--i28); }

/* ============================================================================
   02. On air
   ========================================================================= */
.na-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 13px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i16); }
.na-top h2 { font-weight: 400; }
.na-eq { height: 16px; gap: 3px; color: var(--accent); }
.na-day { padding: 16px clamp(24px, 2.6vw, 44px); border-bottom: 1px solid var(--i12); }
.na-strip { position: relative; display: flex; height: 34px; background: var(--i10); }   /* the NOW flag hangs into the padding above, as in the prototype */
.na-blk { display: flex; align-items: center; min-width: 0; padding: 0 8px; border-right: 1px solid rgba(0, 0, 0, .4); background: var(--i14); text-align: left; text-transform: none; letter-spacing: 0; }
.na-blk .mono { color: var(--i6); }
.na-blk.is-on { background: var(--accent); }
.na-blk.is-on .mono { color: #fff; }
.na-blk:hover { opacity: .85; }
.na-f2 { flex: 2; }
.na-f3 { flex: 3; }
.na-f4 { flex: 4; }
.na-needle { position: absolute; left: 94%; top: -5px; bottom: -5px; width: 2px; background: var(--accent); }
.na-now { position: absolute; left: 94%; top: -22px; transform: translateX(-50%); color: var(--accent); }
.na-hours { display: flex; justify-content: space-between; padding-top: 7px; }
.na-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
.na-main { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2vw, 30px); padding: clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 44px); border-right: 1px solid var(--i12); }
.na-clock { flex: none; display: flex; flex-direction: column; gap: 9px; }
.na-time { font-size: clamp(34px, 4.4vw, 64px); line-height: .9; letter-spacing: -.02em; color: var(--ink); }
.na-prog { width: 190px; max-width: 100%; background: var(--i14); }
.na-prog > span { background: var(--accent); }
.na-what { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.na-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.na-ch { padding: 5px 9px; background: var(--accent); color: #fff; }
.na-what h3 { font-size: clamp(24px, 2.9vw, 44px); line-height: .98; letter-spacing: -.04em; color: var(--ink); }
.na-with { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.na-with .serif { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.1; color: var(--i82); }
.na-play { padding: 11px 18px; letter-spacing: .18em; }
.na-ends { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.na-cd { font-size: clamp(28px, 3.4vw, 52px); line-height: .9; }
.na-log { display: flex; flex-direction: column; gap: 11px; padding: clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 44px); }
.na-log ol { display: flex; flex-direction: column; gap: 11px; }
.na-log li { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--i12); }
.na-log .tm { flex: none; color: var(--i45); }
.na-log .n { font: 500 14px / 1.3 Archivo, sans-serif; color: var(--i82); }
.na-log li.is-on .tm, .na-log li.is-on .n { color: var(--accent); }
.na-rail { display: flex; align-items: stretch; border-top: 1px solid var(--i12); }
.na-rail li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px clamp(18px, 2vw, 30px); border-right: 1px solid var(--i12); cursor: pointer; }
.na-rail li:last-child { border-right: 0; }
.na-rail li:hover { background: var(--hover); }
.na-rail li.is-on { background: var(--sc-e10); }
.na-rt { display: flex; align-items: baseline; gap: 10px; }
.na-rt .tm { color: var(--i7); }
.na-rail li.is-on .tm, .na-rail li.is-on .cta { color: var(--accent); }
.na-rail .grot { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.na-rail .cta { margin-top: 4px; color: var(--i5); }

/* ============================================================================
   03. Week grid
   ========================================================================= */
.wg-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 14px; }
.wg-chip { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--i28); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; line-height: normal; white-space: nowrap; }
.wg-chip .c { opacity: .6; }
.wg-chip.is-on { border-color: var(--sc-e60); background: var(--sc-e14); color: var(--accent); }
.wg-chip:hover { border-color: var(--accent); color: var(--accent); }
.wg-heads, .wg-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); gap: clamp(4px, .6vw, 10px); }
.wg-heads { border-top: 2px solid var(--i5); padding-top: 12px; }
.wg-day { display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 9px; border-bottom: 1px solid var(--i2); min-width: 0; cursor: pointer; }
.wg-day:hover { background: var(--hover); }
.wg-day.is-on { background: var(--sc-e10); border-bottom-color: var(--accent); }
.wg-dl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wg-dl .mono:first-child { color: var(--i7); }
.wg-dl .mono:last-child { color: var(--i45); white-space: nowrap; }
.wg-day.is-on .wg-dl .mono { color: var(--accent); }
.wg-day .abar { background: var(--i10); }
.wg-day .abar > span { background: var(--i28); }
.wg-day.is-on .abar > span { background: var(--accent); }
.wg-grid { position: relative; margin-top: 8px; }
.wg-ct { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wg-ct .mono { flex: none; color: var(--i5); }
.wg-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--i45); }
.wg-eq { height: 8px; gap: 1.5px; color: #fff; }
.wg-eq > span { width: 1.5px; }
.wg-split { display: flex; flex-direction: column; gap: 9px; margin-top: clamp(16px, 2vw, 24px); }
.wg-bars { display: flex; height: 12px; gap: 2px; }
.wg-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.wg-lg { display: flex; align-items: center; gap: 7px; }
.wg-lg .mono { white-space: nowrap; }
.wg-sw { display: block; width: 14px; height: 14px; flex: none; }
.wg-sw--live { background: var(--i2); }
.wg-sw--reb { background-image: repeating-linear-gradient(135deg, var(--i22) 0 4px, transparent 4px 8px); }
.wg-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(16px, 2vw, 24px); padding-top: 14px; border-top: 2px solid var(--i5); }
.dj-on { display: flex; align-items: center; gap: 9px; }

/* ============================================================================
   04. Today
   ========================================================================= */
.td-when { padding: 9px 13px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
.td-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-bottom: clamp(14px, 1.8vw, 22px); }
.td-glance li { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; background: var(--i10); border-top: 2px solid var(--i2); min-width: 0; cursor: pointer; }
.td-glance li:hover { background: var(--i12); }
.td-glance li.is-on { background: var(--sc-e10); border-top-color: var(--accent); }
.td-gl { display: flex; align-items: baseline; gap: 10px; }
.td-gl .mono:first-child { color: var(--i7); }
.td-gl .mono:last-child { color: var(--i4); white-space: nowrap; }
.td-glance li.is-on .td-gl .mono { color: var(--accent); }
.td-glance .abar { background: var(--i10); }
.td-glance .abar > span { background: var(--i35); }
.td-glance li.is-on .abar > span { background: var(--accent); }
.td-grid { display: grid; grid-template-columns: clamp(94px, 10vw, 132px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); border-top: 2px solid var(--i5); padding-top: 14px; }
.td-ribbon { position: relative; border-right: 1px solid var(--i18); padding-right: 14px; }
.td-ribbon ol { display: flex; flex-direction: column; gap: 2px; height: 100%; }
.td-ribbon li { display: flex; align-items: flex-start; justify-content: flex-end; gap: 9px; padding-top: 2px; }
.td-gap { background-image: repeating-linear-gradient(135deg, var(--i10) 0 4px, transparent 4px 8px); }
.td-bar { background: var(--i10); cursor: pointer; }
.td-bar .mono { color: var(--i6); white-space: nowrap; }
.td-bar > i { display: block; width: 12px; height: 2px; margin-top: 5px; background: var(--i28); }
.td-bar.is-past .mono { color: var(--i35); }
.td-bar.is-live { background: rgba(201, 80, 42, .2); }
.td-bar.is-live .mono { color: var(--accent); }
.td-bar.is-live > i { width: 20px; background: var(--accent); }
/* the marker hangs on the hour that is on air, as in the prototype */
.td-bar.is-live { position: relative; }
.td-now { position: absolute; right: -14px; top: 0; width: 26px; height: 2px; background: var(--accent); }
.td-nowt { position: absolute; right: -14px; top: 0; transform: translate(100%, -50%); padding: 3px 6px; background: var(--accent); color: #fff; }
.td-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-content: start; }
.td-card { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 14px; border: 1px solid var(--i14); border-left: 3px solid var(--i22); cursor: pointer; transition: transform .16s ease; }
.td-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.td-card.is-live { border-color: var(--sc-e55); border-left-color: var(--accent); background: var(--sc-e7); }
.td-card.is-next { border-left-color: var(--i45); }
.td-card.is-past { border-left-color: var(--i14); }
.td-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-h .tm { flex: none; color: var(--i5); }
.td-card.is-live .td-h .tm { color: var(--accent); }
.td-h .dur { flex: none; color: var(--i45); white-space: nowrap; }
.td-live { flex: none; display: flex; align-items: center; gap: 7px; padding: 4px 8px; background: var(--accent); color: #fff; }
.td-live .eq { height: 8px; gap: 1.5px; color: #fff; }
.td-live .eq > span { width: 1.5px; }
.td-card > .n { font: 600 clamp(15px, 1.5vw, 19px) / 1.2 Archivo, sans-serif; color: var(--ink); }
.td-card.is-live > .n { color: var(--accent); }
/* a programme that has already gone out is dimmed, not struck through */
.td-card.is-past > .n { color: var(--i4); }
.td-card > .serif { font-size: 15px; line-height: 1.15; color: var(--i75); }
.td-card.is-past > .serif { color: var(--i45); }
.td-note { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.td-note .nl { flex: none; color: var(--i35); }
.td-card.is-live .td-note .nl { color: var(--accent); }
.td-note .nt { font: 400 13px / 1.35 Archivo, sans-serif; color: var(--i78); }
.td-card.is-past .td-note .nt { color: var(--i45); }
.td-air { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.td-wave > span { flex: 1; min-width: 0; background: var(--i28); }
.td-wave > span.p { background: var(--accent); }
.td-line { position: relative; display: block; height: 4px; background: var(--i16); }
.td-line > i { display: block; height: 4px; width: 30%; background: var(--accent); }
.td-line > b { position: absolute; top: -2px; bottom: -2px; left: 30%; width: 2px; background: #fff; }
.td-f { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; margin-top: auto; border-top: 1px solid var(--i14); }
.td-f .tch { color: var(--i45); text-wrap: pretty; }
.td-card.is-live .td-f .tch { color: var(--accent); }
.td-fl { display: flex; align-items: baseline; gap: 12px; }
.td-fl .tpl { color: var(--i35); }
.td-card.is-live .td-fl .tpl { color: var(--accent); }
.td-cta { color: var(--i5); }
.td-cta:hover { color: var(--accent); }
.td-foot, .xp-past-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 2vw, 26px); padding-top: 14px; border-top: 2px solid var(--i5); }

/* ============================================================================
   05. Specials
   ========================================================================= */
.xp-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 40px); padding: clamp(16px, 2vw, 26px); margin-bottom: clamp(16px, 2vw, 26px); border: 1px solid var(--sc-e55); background: var(--sc-e7); }
.xp-hero { position: relative; min-width: 0; min-height: clamp(220px, 26vw, 340px); overflow: hidden; background: var(--i10); }
.xp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .2), rgba(13, 13, 13, .82)); }
.xp-when { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 6px 10px; background: var(--accent); color: #fff; }
.xp-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.xp-in { display: flex; flex-direction: column; gap: 4px; }
.xp-in .mono, .xp-cap > .mono { color: rgba(245, 244, 241, .84); }
.xp-in .orb { font-size: clamp(28px, 3.4vw, 52px); line-height: .9; }
.xp-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xp-body h3 { font-size: clamp(22px, 2.6vw, 40px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.xp-sub { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.15; color: var(--i82); }
.xp-lineup { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.xp-lineup li { display: flex; align-items: baseline; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--i14); }
.xp-lineup .tm { flex: none; color: var(--i55); }
.xp-lineup li.is-on .tm { color: var(--accent); }
.xp-lineup .n { min-width: 0; font: 600 14px / 1.3 Archivo, sans-serif; color: var(--ink); text-wrap: pretty; }
.xp-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
.xp-acts .btn-ember { padding: 12px 18px; letter-spacing: .18em; }
.xp-acts .ar-csv { padding: 12px 16px; }
.xp-cards { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 26px); }
.xp-card { flex: 1 1 clamp(220px, 20vw, 280px); display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--i14); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.xp-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.xp-card:first-child { flex-grow: 1.6; }
.xp-card.is-on { border-color: var(--sc-e55); background: var(--sc-e7); }
.xp-fig { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: 210px; overflow: hidden; background: var(--i10); }   /* a card that wraps to its own row must not blow the photo up */
.xp-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-top { position: absolute; left: 11px; right: 11px; top: 11px; display: flex; align-items: center; gap: 9px; }
.xp-date { flex: none; padding: 5px 9px; background: var(--i14); color: var(--ink); }
.xp-card.is-on .xp-date { background: var(--accent); color: #fff; }
.xp-cd { margin-left: auto; color: var(--i6); }
.xp-card.is-on .xp-cd { color: var(--accent); }
.xp-t { font-size: clamp(16px, 1.7vw, 23px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; }
.xp-card.is-on .xp-t { color: var(--accent); }
.xp-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.xp-n .orb { font-size: clamp(15px, 1.6vw, 21px); line-height: 1; color: var(--ink); }
.xp-card.is-on .xp-n .orb { color: var(--accent); }
.xp-card > .serif { font-size: 15px; line-height: 1.15; color: var(--i78); text-wrap: pretty; }
.xp-card p { font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i68); text-wrap: pretty; }
.xp-f { display: flex; flex-direction: column; gap: 6px; padding-top: 9px; margin-top: auto; border-top: 1px solid var(--i14); }
.xp-f .mono { text-wrap: pretty; }
.xp-fl { display: flex; align-items: baseline; gap: 12px; }
.xp-cta { color: var(--i5); }
.xp-card.is-on .xp-cta { color: var(--accent); }
.xp-cta:hover, .xp-cta.is-on { color: var(--accent); }
.xp-year { display: flex; flex-direction: column; gap: 9px; margin-top: clamp(18px, 2.2vw, 28px); }
.xp-months { display: flex; gap: 2px; align-items: flex-end; }
.xp-months li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.xp-months li:hover { opacity: .8; }
.xp-months .mono { color: var(--i4); }
.xp-months li.is-on .mono { color: var(--accent); }
.xp-months > li > i { display: block; background: var(--i28); }
.xp-m0 { height: 10px; background: var(--i10) !important; }
.xp-m1 { height: 26px; }
.xp-m2 { height: 42px; }
.xp-months li.is-on > i { background: var(--accent); }
.xp-past { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--i28); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; line-height: normal; white-space: nowrap; }
.xp-past .y { opacity: .6; }
.xp-past:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   06. Changes
   ========================================================================= */
.cg-h2 { font-size: clamp(22px, 2.6vw, 40px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.cg-when { padding: 9px 13px; border: 1px solid var(--sc-e55); color: var(--accent); white-space: nowrap; }
.cg-grid { display: grid; grid-template-columns: clamp(110px, 11vw, 150px) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px); border-top: 2px solid var(--i5); padding-top: 14px; }
.cg-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 14px; border-right: 1px solid var(--i18); }
.cg-days { display: flex; flex-direction: column; gap: 8px; }
.cg-days li { display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--i12); cursor: pointer; }
.cg-days li:hover { border-bottom-color: var(--accent); }
.cg-dl { display: flex; align-items: baseline; gap: 10px; }
.cg-dl .mono:first-child { color: var(--i7); }
.cg-dl .mono:last-child { color: var(--i5); }
.cg-days li[data-empty] .mono:first-child { color: var(--i35); }
.cg-days li[data-empty] .mono:last-child { color: var(--i28); }
.cg-days li.is-on .mono { color: var(--accent); }
.cg-days .abar { background: var(--i10); }
.cg-days .abar > span { background: var(--i28); }
.cg-days li.is-on .abar > span { background: var(--accent); }
.cg-trend { margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding-top: 10px; }
.cg-bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.cg-bars > span { flex: 1; min-width: 0; background: var(--i28); }
.cg-bars > span:last-child { background: var(--accent); }
.cg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-content: start; }
.cg-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--i14); cursor: pointer; }
.cg-card:hover { border-color: var(--accent); }
.cg-card.is-fresh { border-color: var(--sc-e55); background: var(--sc-e7); }
.cg-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.cg-tag { flex: none; padding: 5px 9px; background: var(--i14); color: var(--ink); }
.cg-tag--guest { background: var(--accent); color: #fff; }
.cg-tag--swap { background: var(--i2); color: var(--ink); }
.cg-tag--cancelled { background: var(--i10); color: var(--i7); }
.cg-tag--moved { background: var(--i14); color: var(--ink); }
.cg-date { margin-left: auto; color: var(--i42); white-space: nowrap; }
.cg-card.is-fresh .cg-date { color: var(--accent); }
.cg-diff { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cg-diff .was { font: 400 14px / 1.3 Archivo, sans-serif; color: var(--i45); text-decoration: line-through; text-wrap: pretty; }
.cg-diff .now-row { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cg-diff .ar { flex: none; color: var(--i42); }
.cg-card.is-fresh .cg-diff .ar { color: var(--accent); }
.cg-diff .now { min-width: 0; font: 600 clamp(15px, 1.5vw, 18px) / 1.25 Archivo, sans-serif; color: var(--ink); text-wrap: pretty; }
.cg-card.is-fresh .cg-diff .now { color: var(--accent); }
.cg-card p { font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i68); text-wrap: pretty; }
.cg-f { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; margin-top: auto; border-top: 1px solid var(--i14); }
.cg-f .serif { font-size: 14px; line-height: 1.15; color: var(--i75); text-wrap: pretty; }
.cg-fl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cg-cta { color: var(--i5); }
.cg-cta:hover { color: var(--accent); }
.cg-sub { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 26px); margin-top: clamp(18px, 2.2vw, 28px); padding-top: 14px; border-top: 2px solid var(--i5); }
.cg-in { flex: 1 1 240px; min-width: 160px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--i28); padding-bottom: 6px; }
.cg-in .rq { padding: 0; border-bottom: 0; }
.cg-in button { flex: none; }

/* ============================================================================
   07. Subscribe
   ========================================================================= */
.cl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 44px); border-top: 2px solid var(--i5); padding-top: clamp(16px, 2vw, 26px); }
.cl-left { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 24px); min-width: 0; }
.cl-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.cl-apps li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--i14); cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.cl-apps li:hover { transform: translateY(-3px); border-color: var(--accent); }
.cl-apps li.is-on { border-color: var(--sc-e55); background: var(--sc-e6); }
.cl-t { font-size: clamp(16px, 1.7vw, 22px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; }
.cl-apps li.is-on .cl-t, .cl-apps li.is-on .orb, .cl-apps li.is-on .cl-go { color: var(--accent); }
.cl-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.cl-n .orb { font-size: clamp(15px, 1.5vw, 20px); line-height: 1; color: var(--ink); }
.cl-apps .abar { background: var(--i12); }
.cl-apps .abar > span { background: var(--i4); }
.cl-apps li.is-on .abar > span { background: var(--accent); }
.cl-go { margin-top: auto; color: var(--ink); }
.cl-feed { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 26px); padding: clamp(14px, 1.6vw, 20px); border: 1px solid var(--i14); }
.cl-qr { flex: none; width: clamp(92px, 9vw, 120px); aspect-ratio: 1; padding: 7px; background: #fff; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 2px; }   /* the QR paper stays white in both themes */
.cl-qr > i { display: block; }
.cl-qr > i.on { background: #141110; }
.cl-ft { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cl-url { font-size: clamp(12px, 1.3vw, 16px); letter-spacing: .02em; line-height: 1.5; color: var(--ink); word-break: break-all; }
.cl-fa { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.cl-fa .btn-ember { padding: 8px 12px; letter-spacing: .14em; }
.cl-fa .ar-csv { padding: 8px 12px; }
.cl-right { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--i16); }
.cl-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.cl-chip { padding: 8px 11px; border: 1px solid var(--i28); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; line-height: normal; white-space: nowrap; }
.cl-chip.is-on { border-color: var(--sc-e50); background: var(--sc-e12); color: var(--accent); }
.cl-chip:hover { border-color: var(--accent); color: var(--accent); }
.cl-preview { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cl-preview li { display: flex; align-items: baseline; gap: 11px; padding-bottom: 8px; border-bottom: 1px solid var(--i12); min-width: 0; }
.cl-preview .tm { flex: none; color: var(--i55); }
.cl-preview li.is-on .tm { color: var(--accent); }
.cl-preview .n { min-width: 0; font: 500 14px / 1.3 Archivo, sans-serif; color: var(--ink); text-wrap: pretty; }
.cl-mail label { letter-spacing: .24em; text-transform: uppercase; color: var(--i5); }
.cl-mail input { padding: 6px 0; border-bottom-color: var(--i28); font-size: 16px; }
.cl-send { justify-content: space-between; padding: 15px 20px; letter-spacing: .18em; }

/* ============================================================================
   The week grid to scale — 06:00 to 06:00, a block at its start hour and as
   tall as it runs, as on Shows; --hr is one hour
   ========================================================================= */
.wg-scroll { position: relative; }
.wg-grid { --hr: 30px; }
.wg-hours, .wg-col { position: relative; height: calc(var(--hr) * 24); min-width: 0; }
.wg-hours .mono { position: absolute; left: 0; transform: translateY(-2px); }
.wg-col { background: repeating-linear-gradient(to bottom, var(--i10) 0 1px, transparent 1px calc(var(--hr) * 2)); }
.wg-col.is-today { background-color: var(--sc-e6); }
.wg-b { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; padding: 6px 8px; background: var(--i12); border-left: 3px solid var(--i45); text-align: left; text-transform: none; letter-spacing: 0; }
.wg-b:hover { background: var(--i16); }
.wg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wg-b .n { font: 600 12px / 1.15 Archivo, sans-serif; color: var(--ink); }
.wg-b .serif { font-size: 12px; line-height: 1.1; color: var(--i6); }
.wg-h--1 .serif, .wg-h--1 .wg-ct, .wg-h--2 .wg-guest { display: none; }
.wg-b.is-reb { background-image: repeating-linear-gradient(135deg, var(--i22) 0 4px, transparent 4px 8px); }
.wg-b.is-auto { background: transparent; border: 1px dashed var(--i2); border-left: 3px solid var(--i2); }
.wg-b.is-live { background: var(--accent); border-left-color: var(--accent); }
.wg-b.is-live .wg-ct .mono, .wg-b.is-live .serif { color: rgba(255, 255, 255, .84); }
.wg-b.is-live .n { color: #fff; }
.wg-b.is-live .wg-dot { background: #fff; }
.wg-b.is-live:hover { background: #E0663D; }
.wg-b.is-out { opacity: .16; }
.wg-b.is-pick { box-shadow: inset 0 0 0 1px var(--accent); }
.wg-guest { align-self: flex-start; padding: 2px 6px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
.wg-guest:empty { display: none; }
.wg-b.is-live .wg-guest { border-color: #fff; color: #fff; }
.wg-c0 { border-left-color: var(--i55); }
.wg-c0 .wg-dot { background: var(--i55); }
.wg-c1 { border-left-color: var(--sc-c1); }
.wg-c1 .wg-dot { background: var(--sc-c1); }
.wg-c2 { border-left-color: var(--sc-c2); }
.wg-c2 .wg-dot { background: var(--sc-c2); }
.wg-c3 { border-left-color: var(--sc-c3); }
.wg-c3 .wg-dot { background: var(--sc-c3); }
.wg-c4 { border-left-color: var(--sc-c4); }
.wg-c4 .wg-dot { background: var(--sc-c4); }
.wg-c5 { border-left-color: var(--sc-c5); }
.wg-c5 .wg-dot { background: var(--sc-c5); }
.wg-c6 { border-left-color: var(--sc-c6); }
.wg-c6 .wg-dot { background: var(--sc-c6); }
.wg-sw-c0 { background: var(--i55); }
.wg-sw-c1 { background: var(--sc-c1); }
.wg-sw-c2 { background: var(--sc-c2); }
.wg-sw-c3 { background: var(--sc-c3); }
.wg-sw-c4 { background: var(--sc-c4); }
.wg-sw-c5 { background: var(--sc-c5); }
.wg-sw-c6 { background: var(--sc-c6); }
.wg-bars > i { display: block; min-width: 2px; }
.wg-sw--auto { border: 1px dashed var(--i35); }
.wg-at--6 { top: calc(var(--hr) * 0); }
.wg-at--7 { top: calc(var(--hr) * 1); }
.wg-at--8 { top: calc(var(--hr) * 2); }
.wg-at--9 { top: calc(var(--hr) * 3); }
.wg-at--10 { top: calc(var(--hr) * 4); }
.wg-at--11 { top: calc(var(--hr) * 5); }
.wg-at--12 { top: calc(var(--hr) * 6); }
.wg-at--13 { top: calc(var(--hr) * 7); }
.wg-at--14 { top: calc(var(--hr) * 8); }
.wg-at--15 { top: calc(var(--hr) * 9); }
.wg-at--16 { top: calc(var(--hr) * 10); }
.wg-at--17 { top: calc(var(--hr) * 11); }
.wg-at--18 { top: calc(var(--hr) * 12); }
.wg-at--19 { top: calc(var(--hr) * 13); }
.wg-at--20 { top: calc(var(--hr) * 14); }
.wg-at--21 { top: calc(var(--hr) * 15); }
.wg-at--22 { top: calc(var(--hr) * 16); }
.wg-at--23 { top: calc(var(--hr) * 17); }
.wg-at--24 { top: calc(var(--hr) * 18); }
.wg-at--25 { top: calc(var(--hr) * 19); }
.wg-at--26 { top: calc(var(--hr) * 20); }
.wg-at--27 { top: calc(var(--hr) * 21); }
.wg-at--28 { top: calc(var(--hr) * 22); }
.wg-at--29 { top: calc(var(--hr) * 23); }
.wg-h--1 { height: calc(var(--hr) * 1 - 2px); }
.wg-h--2 { height: calc(var(--hr) * 2 - 2px); }
.wg-h--3 { height: calc(var(--hr) * 3 - 2px); }
.wg-h--4 { height: calc(var(--hr) * 4 - 2px); }
.wg-h--5 { height: calc(var(--hr) * 5 - 2px); }
.wg-h--6 { height: calc(var(--hr) * 6 - 2px); }
.wg-h--7 { height: calc(var(--hr) * 7 - 2px); }
/* 22:36 is 16.6 hours into the broadcast day */
.wg-now-at { top: calc(var(--hr) * 16.6); }
.wg-line { position: absolute; left: 56px; right: 0; height: 2px; background: var(--accent); pointer-events: none; }
.wg-line-t { position: absolute; left: 0; transform: translateY(-50%); padding: 2px 5px; background: var(--accent); color: #fff; pointer-events: none; }
.wg-pick { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--sc-e60); background: var(--sc-e10); }
.wg-pick .n { font: 600 15px / 1.2 Archivo, sans-serif; color: var(--ink); }
.wg-pick .serif { font-size: 16px; color: var(--accent); }
.wg-day { text-align: left; }

/* the finder */
.fl-sel { width: 100%; padding: 0 22px 6px 0; border: 0; border-bottom: 1px solid var(--i28); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9502A'/%3E%3C/svg%3E") no-repeat right 4px center; color: var(--i75); font: 400 14px / 1.3 'DM Mono', ui-monospace, monospace; -webkit-appearance: none; appearance: none; cursor: pointer; }
.fl-sel.is-on { border-bottom-color: var(--accent); color: var(--accent); }
.fl-sel option { background: var(--card); color: var(--ink); }
.fl-dayb { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; text-align: left; }
.fl-acts { display: contents; }

/* the week switch, as the sort switch on the other pages */
.sec--weekgrid .pa-sorts { display: flex; align-items: center; border: 1px solid var(--i22); flex: none; }
.sec--weekgrid .pa-sorts button { padding: 8px 12px; color: var(--i6); text-transform: none; white-space: nowrap; }
.sec--weekgrid .pa-sorts button.is-on { background: var(--i12); color: var(--ink); }
.sec--weekgrid .pa-sorts button:hover { color: var(--accent); }

/* ============================================================================
   08. Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .na-grid { grid-template-columns: minmax(0, 1fr); }
  .na-main { border-right: 0; border-bottom: 1px solid var(--i12); }
  .xp-lead { grid-template-columns: minmax(0, 1fr); }
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-right { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--i16); }
}

@media (max-width: 900px) {
  .wg-heads, .wg-grid { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .wg-line { left: 44px; }
  .wg-b { padding: 5px 4px; }
  .wg-b .serif, .wg-ct .mono, .wg-eq, .wg-dot { display: none; }
  .wg-b .n { white-space: normal; line-height: 1.1; }
  .wg-day { padding: 6px 4px 8px; }
  .wg-dl .mono:last-child, .wg-day > .mono { display: none; }
  .td-grid { grid-template-columns: 72px minmax(0, 1fr); }
  .cg-grid { grid-template-columns: minmax(0, 1fr); }
  .cg-side { padding-right: 0; border-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--i18); }
  .cg-days { flex-direction: row; flex-wrap: wrap; }
  .cg-days li { flex: 1 1 90px; }
  .na-rail { flex-wrap: wrap; }
  .na-rail li { flex: 1 1 200px; }
}

@media (max-width: 760px) {
  .sec--filter { padding-top: 24px; }
  .fl-bar, .fl-week, .fl-active, .fl-sum, .na-top, .na-day, .na-main, .na-log { padding-left: 18px; padding-right: 18px; }
  .wg-sheet, .td-sheet, .xp-sheet, .cg-sheet, .cl-sheet { padding-left: 18px; padding-right: 18px; }
  .fl-presets { margin-left: 0; }
  .fl-next .mono, .fl-sum > .mono { white-space: normal; }
  .fl-kinds, .fl-day { flex: 1 1 100%; }
  .fl-week > .mono { display: none; }
  .na-blk .mono { display: none; }
  .na-hours .mono:nth-child(even) { display: none; }
  .na-main { flex-direction: column; align-items: flex-start; }
  .na-ends { align-items: flex-start; }
  .na-rail li { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--i12); }
  /* the week slides sideways inside its sheet, the hours stay put */
  .wg-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-right: -18px; padding-right: 18px; }
  .wg-heads, .wg-grid { grid-template-columns: 40px repeat(7, 108px); gap: 3px; width: max-content; }
  .wg-grid { --hr: 28px; }
  .wg-hours, .wg-heads > span:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); }
  .wg-hours .mono { left: 4px; }
  .wg-b .serif { display: block; }
  .wg-b .wg-ct .mono, .wg-dot { display: inline-block; }
  .wg-line { left: 40px; }
  .wg-line-t { display: none; }
  .td-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-grid { grid-template-columns: minmax(0, 1fr); }
  .td-ribbon { display: none; }
  .ar-totals, .ar-totals ul { flex-wrap: wrap; row-gap: 14px; }
  .ar-totals { width: 100%; }
  .ar-totals .mono { white-space: normal; }
  .xp-card, .xp-card:first-child { flex: 1 1 100%; }
  .cl-feed { padding: 14px; }
}
/* on air and today, live */
.na-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.na-cta .cta { margin-top: 0; cursor: pointer; }
.na-cta .cta:hover, .td-cta:hover { color: var(--accent); }
.js-sc-remind.is-on { color: var(--accent); }
.td-gb { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; text-align: left; }
.td-card.is-pick { box-shadow: inset 0 0 0 1px var(--accent); }
.td-fl .ar-btn { margin-left: auto; }
.na-blk { cursor: default; }
/* specials, live */
.js-xp-remind.is-on:not(.btn-ember) { color: var(--accent); }
.xp-past { cursor: default; }
.xp-past:hover { border-color: var(--i28); color: var(--i7); }
.xp-fl .xp-cta { cursor: pointer; }
.xp-fl .xp-cta:hover { color: var(--accent); }
/* changes, live: the newest edit keeps its date in ember, nothing more */
.cg-card.is-fresh { border-color: var(--i14); background: none; }
.cg-card[hidden] { display: none; }
.cg-card { cursor: default; }
.cg-db { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; text-align: left; }
.cg-cta { cursor: pointer; }
.cg-cta:hover { color: var(--accent); }
.js-cg-note.is-ok, .js-cg-note.is-err { color: var(--accent); }
/* subscribe, live */
.cl-app { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit; height: 100%; }
.cl-pick { display: flex; gap: 12px; }
.cl-pick[hidden], .cl-pick .fl-sel[hidden] { display: none; }
.cl-form { display: flex; flex-direction: column; gap: 13px; }
.js-cl-note.is-ok, .js-cl-note.is-err { color: var(--accent); }
.cl-fa button.ar-csv { cursor: pointer; }