/* Shared site chrome: the help ("?") button + modal, and the footer (About + AI disclaimer).
   Used on the public pages (home, search, compare, broadcast). Theme-aware — all colours come
   from Pico's CSS variables, so it follows light/dark automatically. */

/* ── Channel logo tile ────────────────────────────────────────────────────────
   One class for every surface that names a channel (home cards, comparison timeline rows,
   week dashboard, search hits). Source art is a 96x96 PNG on an OPAQUE tile — deliberately not
   transparent: two of the five marks are black or white-on-white and would disappear on one of
   the themes. The rounding + the hairline border live here, so all five read as one family
   whether their tile is white (Imedi, Formula, Rustavi 2) or brand-coloured (GPB, Pirveli).
   Sizes: default 22px · .sm 16px (dense rows) · .lg 28px (headings). */
.ch-logo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--pico-muted-border-color);
  object-fit: contain;
  vertical-align: middle;
}
.ch-logo.sm { width: 16px; height: 16px; border-radius: 4px; }
.ch-logo.lg { width: 28px; height: 28px; border-radius: 6px; }

/* ── "not the main evening edition" marker ────────────────────────────────────
   An asterisk on the corner of the channel logo for a day when the channel's main evening
   broadcast wasn't available on YouTube and a different edition stands in for it.
   See planning/EDITION_FLAG_PLAN.md §8. Wrap the <img> in .logo-wrap to position it.

   It is a real <button>, not a <span title="...">: `title` does nothing on touch and is
   unreachable by keyboard, and this is the only place the explanation exists. */
.logo-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }

.edition-mark {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  /* FIXED PAIR, deliberately (DESIGN_GUIDELINES rule 2). This badge sits on the LOGO ART —
     an opaque tile that is white for three channels and brand-dark for two — not on a theme
     surface, so neither half may follow the theme. --tv-coral / --tv-on-coral are declared
     once in :root and never re-declared per theme, so they are stable in both. 6.3:1. */
  background: var(--tv-coral);
  color: var(--tv-on-coral);
  /* Ring in the surrounding surface so the badge separates from the logo underneath. */
  box-shadow: 0 0 0 2px var(--pico-card-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
/* The mark follows the <img>, so it can size itself off the logo's own size class. */
.ch-logo.sm ~ .edition-mark { width: 11px; height: 11px; top: -4px; right: -4px; font-size: 9px; }
.ch-logo.lg ~ .edition-mark { width: 16px; height: 16px; top: -5px; right: -6px; font-size: 12px; }

.edition-mark:hover,
.edition-mark:focus-visible { filter: brightness(1.08); }

/* The explanation. Shown on hover, on keyboard focus, and on tap (a <button> takes focus when
   tapped, which is why :focus is used and not only :focus-visible). */
.edition-mark::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 15rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  /* Fixed pair again, and for a second reason: this bubble lives INSIDE a <button>, where Pico
     remaps its own colour variables (rule 7). Hard-coding both halves keeps it readable in both
     themes and immune to that remapping. #f5f7ff on #242038 is ~15:1. */
  background: #242038;
  color: #f5f7ff;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
}
.edition-mark:hover::after,
.edition-mark:focus::after { opacity: 1; visibility: visible; }

/* Channel name + its logo as one inline unit (keeps the two from wrapping apart). */
.ch-id {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* ── Help "?" floating button (fixed top-right) ───────────────────────────── */
.help-fab {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 90;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  color: var(--tv-ink);   /* not --pico-color: this is a <button>, where Pico shadows it dark */
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.help-fab:hover { background: var(--tv-hover); }

/* A pill keeps :focus after a click, so its coral focus ring lingers like a stuck "glow"
   (and can be mistaken for the selected state). Drop the ring for pointer focus; keep it for
   keyboard users via :focus-visible. */
.chip:focus:not(:focus-visible),
.mode-btn:focus:not(:focus-visible) { box-shadow: none; }

/* ── Help modal ───────────────────────────────────────────────────────────── */
.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.help-modal {
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.help-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.help-modal-head strong { font-size: 1.15rem; }
.help-close {
  background: none;
  border: none;
  color: var(--pico-muted-color);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  width: auto;
  margin: 0;
}
.help-close:hover { color: var(--tv-ink); }   /* <button>: --pico-color is shadowed dark */
.help-body { max-height: 70vh; overflow-y: auto; }
.help-body h4 { margin: 1rem 0 0.2rem; font-size: 0.95rem; }
.help-body h4:first-child { margin-top: 0.2rem; }
.help-body p { margin: 0.2rem 0 0; font-size: 0.9rem; line-height: 1.5; }

/* ── Footer (About + AI disclaimer) ───────────────────────────────────────── */
.site-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.82rem;
  color: var(--pico-muted-color);
}
.site-footer .ai-disclaimer { margin: 0 0 0.6rem; line-height: 1.5; }
.site-footer details { margin: 0; }
.site-footer summary { cursor: pointer; font-weight: 600; color: var(--pico-color); }
.site-footer .about-body p { margin: 0.6rem 0 0; line-height: 1.55; }
/* Language switcher — compact inline select, sits under the About block. */
.site-footer .lang-switch { margin: 1rem 0 0; }
.site-footer .lang-switch label { display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--pico-muted-color); }
.site-footer .lang-switch select { width: auto; margin: 0; display: inline-block;
  padding: 0.15rem 1.6rem 0.15rem 0.5rem; font-size: 0.8rem; height: auto; }

/* ── Brand palette: coral accent, theme-aware (WCAG-AA verified) ─────────────
   Coral (#fe7f63) is a FILL colour, not a text colour — coral text on white, or
   white text on coral, both fail contrast (~2.5:1). So:
     · LIGHT theme → links/accent-text use a darkened coral (#cf4020, 4.8:1 on
       white); coral fills carry dark violet (#242038) text (6.3:1).
     · DARK theme  → bright coral reads fine as accent text on the dark bg (6.3:1).
   Functional colours (topic chips, status badges) are intentionally left alone —
   they encode more meanings than 5 brand colours can. See DESIGN_GUIDELINES.md. */
:root {
  /* Pico's primary colour scheme → coral */
  --pico-primary: #cf4020;                        /* links / accent text (light) */
  --pico-primary-hover: #a8331a;
  --pico-primary-underline: rgba(207, 64, 32, 0.5);
  --pico-primary-hover-underline: #cf4020;
  --pico-primary-background: #fe7f63;             /* filled button background */
  --pico-primary-hover-background: #f26a4d;
  --pico-primary-border: #fe7f63;
  --pico-primary-hover-border: #f26a4d;
  --pico-primary-inverse: #242038;                /* text ON a coral button */
  --pico-primary-focus: rgba(254, 127, 99, 0.5);  /* focus ring */

  /* Reusable brand tokens for component styles (calendar.css, week.css, inline). */
  --tv-coral: #fe7f63;                         /* selected fill / ring / bar */
  --tv-coral-text: #cf4020;                    /* accent text/border on light */
  --tv-coral-tint: rgba(254, 127, 99, 0.14);   /* faint "selected" background */
  --tv-on-coral: #242038;                      /* text that sits ON a coral fill */
  /* Normal body-text colour that is SAFE to use inside a <button>. Pico re-maps
     --pico-color to the button's inverse on every button, so a custom pill/icon button
     that wants ordinary text must use this token instead of var(--pico-color). */
  --tv-ink: #242038;
  /* The ONLY hover/focus background on the site. It is deliberately TRANSLUCENT: whatever text
     sits on it keeps its own contrast against the page, in both themes. Do not reach for
     --pico-secondary-background — that is the solid mid-slate secondary-BUTTON fill, and using it
     as a hover surface puts a dark box behind ordinary text on the light theme (task 24).
     See DESIGN_GUIDELINES.md rule 8. */
  --tv-hover: rgba(36, 32, 56, 0.06);
}

/* Dark theme: bright coral is legible as accent text on the dark background. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-primary: #fe7f63;
    --pico-primary-hover: #ff9a82;
    --pico-primary-underline: rgba(254, 127, 99, 0.5);
    --pico-primary-hover-underline: #fe7f63;
    --pico-primary-background: #fe7f63;
    --pico-primary-hover-background: #ff9174;
    --pico-primary-border: #fe7f63;
    --pico-primary-hover-border: #ff9174;
    --pico-primary-inverse: #242038;
    --pico-primary-focus: rgba(254, 127, 99, 0.45);
    --tv-coral-text: #fe7f63;
    --tv-coral-tint: rgba(254, 127, 99, 0.22);
    --tv-ink: #e0f7ff;
    --tv-hover: rgba(224, 247, 255, 0.09);
  }
}
[data-theme="dark"] {
  --pico-primary: #fe7f63;
  --pico-primary-hover: #ff9a82;
  --pico-primary-underline: rgba(254, 127, 99, 0.5);
  --pico-primary-hover-underline: #fe7f63;
  --pico-primary-background: #fe7f63;
  --pico-primary-hover-background: #ff9174;
  --pico-primary-border: #fe7f63;
  --pico-primary-hover-border: #ff9174;
  --pico-primary-inverse: #242038;
  --pico-primary-focus: rgba(254, 127, 99, 0.45);
  --tv-coral-text: #fe7f63;
  --tv-coral-tint: rgba(254, 127, 99, 0.22);
  --tv-ink: #e0f7ff;
  --tv-hover: rgba(224, 247, 255, 0.09);
}