/* ============================================================
   SCORR - VIDIPRINTER.CSS (extracted 20 July 2026)
   Shared teletype feed styling for the dashboard panel AND the
   standalone vidiprinter.html full-feed page. Was inline in
   index-dev.html's <style> since Session 18h - moved out unchanged
   so both pages read the ONE copy (same anti-drift rule as the
   Consolidation batch). Self-contained via .vidiprinter-scoped
   custom properties - the distinct black/amber teletype aesthetic
   deliberately does not inherit from the site theme (Section 13.7b).
   ============================================================ */

/* ── Session 18h: Vidiprinter panel ────────────────────────────
   Ported from vidiprinter-test.html (Session 17b), unchanged except
   for id/selector scoping to live alongside the rest of the
   dashboard. Deliberately self-contained via its own custom
   properties scoped to .vidiprinter rather than :root - the
   vidiprinter has a distinct black/amber teletype aesthetic that
   should not inherit from or affect the main site theme (documented
   design principle, Section 13.7b). */
.vidiprinter {
  --vp-bg: #0a0a0a;
  --vp-border: #2a2a2a;
  --vp-comp: #A67C3A;
  --vp-main: #E8C97A;
  --vp-score: #ffffff;
  --vp-detail: #888888;
  --vp-live: #2ECC71;
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
/* ── Session 18j: vidiprinter light-mode variant ────────────────
   Previously black/amber regardless of the site's scorr-mode
   toggle - a deliberate early decision (Section 13.7b: distinct
   aesthetic, shouldn't inherit from the main theme) that made sense
   while this was a standalone test page, but the panel now sits
   permanently on the dashboard, so it needs to at least not clash
   with a light page around it. Same body.light override convention
   theme.css uses everywhere else (Section 13.3), just applied to
   the .vidiprinter-scoped custom properties instead of :root.
   Colours chosen for contrast on a light background while keeping
   the amber/teletype character - not a simple inversion. */
body.light .vidiprinter {
  --vp-bg: #f4f1ea;
  --vp-border: #ddd6c4;
  --vp-comp: #8c6b2c;
  --vp-main: #6b4a17;
  --vp-score: #2c5aa0;
  --vp-detail: #6b6b6b;
  --vp-live: #1e8449;
}
/* .vp-mode-tag and .vp-line's separator use hardcoded colour values
   rather than the --vp-* custom properties above (pre-existing,
   not changed here), so they don't pick up the override block just
   by nesting - each needs its own explicit light-mode rule. */
body.light .vidiprinter .vp-mode-tag {
  color: #808080;
  border-color: #cccccc;
}
body.light .vidiprinter .vp-line {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.light .vidiprinter .vp-expand-btn {
  color: #767676;
}
/* .vp-feed-wrap's bottom fade gradient (rgba(10,10,10,0) -> var(--vp-bg))
   needs no override - the fade's start stop is fully transparent
   (alpha 0), so those RGB channel values never actually render in
   either mode; only the var(--vp-bg) end stop matters, and that
   already picks up the light-mode value above automatically. */
/* ── Session 18j: collapse vidiprinter while Hide Scores is active ──
   Goals/scores in the vidiprinter feed previously bypassed Hide
   Scores entirely - a separate panel from the match cards Hide
   Scores already covers, so turning the toggle on hid every score
   on the page except this one. Keys off the exact same
   body.hide-scores class core.js's initHideScores() already
   toggles (see body.hide-scores .dash-team-score etc above) -
   pure CSS, no separate toggle-detection logic needed. .vp-hidden-
   note sits in the DOM at all times (see the HTML above) and is
   simply hidden/shown by these two rules. */
.vp-hidden-note {
  display: none;
  margin: 0;
  padding: 16px 14px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--vp-detail);
}
body.hide-scores .vidiprinter .vp-feed-wrap,
body.hide-scores .vidiprinter .vp-footer {
  display: none;
}
body.hide-scores .vidiprinter .vp-hidden-note {
  display: block;
}
.vp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vp-border);
}
.vp-title {
  color: var(--vp-comp);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.vp-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vp-live);
  margin-right: 8px;
  animation: vp-pulse 1.4s ease-in-out infinite;
}
@keyframes vp-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,204,113,0.5); }
  50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(46,204,113,0); }
}
.vp-mode-tag {
  font-size: 10px;
  color: #666666;
  letter-spacing: 1px;
  border: 1px solid #333333;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.vp-mode-tag.live {
  color: var(--vp-live);
  border-color: var(--vp-live);
}
.vp-feed-wrap {
  /* Session 18h fix: was max-height only, which just clips content
     LARGER than the cap - with fewer lines than that, the box
     shrinks to fit its actual content (no height/min-height forcing
     it), so it visibly grew taller line by line as events arrived
     instead of opening at its final size. Fixed height forces the
     box to always be exactly 5 lines tall from the very first
     render, regardless of how many lines exist yet. ~34.5px per
     line (13px font * 1.5 line-height + 14px vertical padding + 1px
     border) * 5 = ~173px; a long team name wrapping to two lines is
     an acceptable approximation edge case, not worth exact per-line
     JS measurement for. */
  position: relative;
  height: 173px;
  overflow: hidden;
  transition: height 0.35s ease;
}
.vp-feed-wrap.expanded {
  height: auto;
  max-height: 900px;
}
.vp-feed-wrap:not(.expanded)::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(10,10,10,0), var(--vp-bg));
  pointer-events: none;
}
.vp-feed { display: flex; flex-direction: column; }
.vp-line {
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: normal;
  word-break: break-word;
}
.vp-char { opacity: 0; }
.vp-icon { color: var(--vp-main); font-weight: 700; }
/* 18 July 2026 (Andy): VAR rescind lines - the original line
   reprinted struck-through + dimmed, with the " (VAR)" tag after it
   left un-struck (it's the correction, not part of the mistake).
   line-through lands per character span; adjacent spans on one line
   read as a continuous strike. Dimming uses COLOR (and filter for
   the SVG icon), NOT the opacity property - typeLine()'s reveal sets
   style.opacity='1' inline on every span, which would override any
   CSS opacity here. Descendant selectors so the vp-team/vp-score
   colour rules can't out-rank the dim regardless of declaration
   order. */
.vidiprinter .vp-line .vp-rescind { text-decoration: line-through; color: #8a8a8a; }
.vidiprinter .vp-line .vp-icon-svg.vp-rescind { filter: grayscale(1) opacity(0.55); }
.vidiprinter .vp-line .vp-var { text-decoration: none; color: var(--vp-main); font-weight: 700; }
/* Session 37: favourite team's line - gold left edge + the name on a
   GOLD CHIP (dark text on gold; Andy's pick after the bold-only
   first cut proved invisible at feed size - 500 vs 700 in JetBrains
   Mono at 13px doesn't read). Binary, no per-team colours;
   competition-page highlights are a separate concept. Line padding
   compensates the border so favourite lines don't indent. The chip
   wrapper is built by typeLine() so the per-character typewriter
   spans share ONE background block instead of one box per letter;
   dark text is fixed #0d0d0d - it sits on gold in both themes. */
.vidiprinter .vp-line.vp-fav-line { border-left: 3px solid var(--vp-main); padding-left: 11px; }
.vidiprinter .vp-line .vp-fav-chip {
  background: var(--vp-main);
  border-radius: 4px;
  padding: 1px 5px;
}
.vidiprinter .vp-line .vp-fav-chip .vp-char {
  color: #0d0d0d;
  font-weight: 700;
}
/* 20 July 2026 (Andy): light mode's chip background is the DARK
   brown-gold (--vp-main flips to #6b4a17 there), so the fixed dark
   text was near-black-on-brown - unreadable. White text on the dark
   chip in day mode; dark text on the pale gold chip in dark mode. */
body.light .vidiprinter .vp-line .vp-fav-chip .vp-char {
  color: #ffffff;
}
/* ── Session 28: inline-SVG icon segments for the vidiprinter feed
   (red card + goal), replacing the old Unicode emoji glyphs. The
   red card was a surrogate-pair emoji (🟥 U+1F7E5) that typeLine()'s
   per-code-unit .split('') shattered into two lone surrogates, each
   rendering as a tofu box on iOS Safari - see the buildSegments()
   and typeLine() comments below. Sized to 1em so the icon tracks
   the surrounding text, including the .vp-line font-size drop at the
   480px breakpoint, automatically. The goal SVG inherits the gold
   vp-icon colour via stroke="currentColor"; the red card carries
   its own explicit red fill (a card is red, not theme-coloured). */
.vp-icon-svg svg { width: 1em; height: 1em; vertical-align: -0.12em; }
.vp-comp { color: var(--vp-comp); }
/* Session 18m follow-up: team name and score used to share one fused
   "vp-main" span (same text, same colour) - split into vp-team/
   vp-score so scores could be coloured independently, confirmed as
   the winning option on the vidiprinter-test.html comparison page
   ("4. Scores white" - team names, comp label, icons, and scorer
   detail all stayed at the current gold, only the score went white).
   vp-main itself kept below since older cached fixture displays or
   any other lingering reference to it would otherwise silently lose
   its colour rather than erroring - harmless dead weight, not worth
   hunting down every reference to delete outright. */
.vp-team { color: var(--vp-main); font-weight: 500; }
.vp-score { color: var(--vp-score); font-weight: 500; }
.vp-main { color: var(--vp-main); font-weight: 500; }
.vp-detail { color: var(--vp-detail); }
.vp-system { color: var(--vp-comp); letter-spacing: 1px; }
/* ── Session C2 (27 July 2026, Andy): four feed visual upgrades ─────
   1. FAVOURITE COMP - a gold star prefixes the comp label and the
      label itself brightens from bronze (--vp-comp) to the team-gold
      (--vp-main) on any line whose competition the visitor has
      starred. Client-side at render (js/vidiprinter.js). The star is
      the SITE's standard favourite gold via --fav-gold (theme.css),
      NOT --vp-main, so it reads identically to the comp-page star
      site-wide (item 4); the fallback keeps it gold if theme.css is
      ever absent. Coexists with the fav-TEAM chip and the fav-line
      gold left edge - all three are independent segments/rules.
      Deliberately no background wash and no filled-chip style: those
      mean "favourite team" and "correction" respectively.
   2. STATUS TAG - the whistle tag (HT/FT/AET/After Pens) moves to the
      score colour (--vp-score). Its own class, so the goal/card SVG
      icons keep vp-icon's gold. Token, not a hex, so light mode
      (score = blue) follows automatically.
   3. RED-CARD DETAIL - the player+minute bracket on red-card lines
      only is muted red instead of grey; goals stay grey. */
.vidiprinter .vp-line .vp-comp-fav-star { color: var(--fav-gold, #C9A84C); }
/* Favourite comp label: the STAR is the favourite marker, so the label KEEPS
   its bronze --vp-comp (Andy, 27 July 2026 - v1 brightened it to the team-gold
   --vp-main, but that read too close to the team names, which are also
   --vp-main; v2 bold-only was too subtle in JetBrains Mono). Bronze restores
   the colour separation from the gold team names; the gold star + bold weight
   mark it as favourite. Only the colour override is dropped - the label
   inherits .vp-comp's bronze; the bold stays. */
.vidiprinter .vp-line .vp-comp.vp-comp-fav { font-weight: 700; }
.vidiprinter .vp-line .vp-status-tag { color: var(--vp-score); font-weight: 700; }
.vidiprinter .vp-line .vp-detail.vp-detail-card { color: #cc6666; }
body.light .vidiprinter .vp-line .vp-detail.vp-detail-card { color: #a83232; }
.vp-footer { display: flex; justify-content: center; border-top: 1px solid var(--vp-border); }
.vp-expand-btn {
  background: none;
  border: none;
  color: #888888;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px;
  cursor: pointer;
  width: 100%;
}
.vp-expand-btn:hover { color: var(--vp-comp); }
@media (max-width: 480px) {
  .vp-line { font-size: 12px; padding: 6px 10px; }
}

/* ── Day separators (20 July 2026, Andy) ──────────────────────────
   "------------ 20th July 2026 ------------" typed at each local-day
   boundary (client-side - viewer's own timezone; see vidiprinter.js).
   WHITE in dark mode per Andy's spec; near-black equivalent on the
   cream day-mode background. */
.vidiprinter .vp-line.vp-day-line {
  border-left: none;
  padding-left: 14px;
}
.vidiprinter .vp-line .vp-char.vp-day {
  color: #ffffff;
  font-weight: 500;
}
body.light .vidiprinter .vp-line .vp-char.vp-day {
  color: #1a1a1a;
}

/* 25 July 2026 (Andy - emit-early goals): when a nameless goal's scorer
   arrives, its line is patched in place (js/vidiprinter.js patchLine) and
   briefly flashes gold so the update is noticeable, then fades to normal. */
.vp-line.vp-updated {
  animation: vp-goldfade 1.1s ease-out;
}
@keyframes vp-goldfade {
  0%   { background-color: rgba(201, 168, 76, 0.35); }
  100% { background-color: transparent; }
}