/* TV compatibility layer: fixed fallbacks first, scalable values second. */
.connection { padding: .7vh 1vw; font-size: 13px; font-size: clamp(11px, .88vw, 17px); }
.connection span::before { min-width: 8px; min-height: 8px; }
.connection small { font-size: 10px; font-size: clamp(9px, .64vw, 12px); }
.clock { padding: .45vh .8vw; }
.clock small { font-size: 10px; font-size: clamp(9px, .66vw, 13px); }
.clock strong { font-size: 28px; font-size: clamp(24px, 1.8vw, 36px); }
.cold-panel { background: linear-gradient(180deg, rgba(3, 49, 82, .61), rgba(1, 28, 52, .34) 48%, rgba(0, 19, 38, .16)); }
.cold-grid > div:not(.not-connected) { background: rgba(1, 28, 53, .44); }
.cold-grid strong { font-size: 26px; font-size: clamp(22px, 1.78vw, 36px); }
.cold-grid span,
.cold-grid .not-connected { font-size: 10px; font-size: clamp(9px, .68vw, 13px); }
.exception-panel { background: linear-gradient(145deg, rgba(6, 48, 80, .62), rgba(0, 22, 43, .56)); }
.exception { font-size: 11px; font-size: clamp(10px, .76vw, 15px); }
.exception b { font-size: 15px; font-size: clamp(14px, 1.04vw, 21px); }
.decision b { font-size: 11px; font-size: clamp(10px, .74vw, 15px); }
.decision span { font-size: 10px; font-size: clamp(9px, .64vw, 13px); }
.decision small { font-size: 9px; font-size: clamp(8px, .58vw, 12px); }
.ribbon { background: linear-gradient(145deg, rgba(3, 47, 80, .58), rgba(0, 24, 47, .48)); }
.ribbon b { font-size: 11px; font-size: clamp(10px, .8vw, 16px); }
.ribbon strong { font-size: 21px; font-size: clamp(19px, 1.48vw, 30px); }
.ribbon span { font-size: 9px; font-size: clamp(9px, .61vw, 12px); }
footer { height: auto; min-height: 0; padding: .1vh 1.2vw; font-size: 9px; font-size: clamp(8px, .56vw, 11px); }

/* Applied by display.js when Grid or clamp() is absent on an older TV browser. */
html.legacy-tv #board { display: flex !important; flex-direction: column; }
html.legacy-tv .tv-header { display: flex !important; flex: 0 0 76px; height: 76px; min-height: 76px; padding: 5px 15px; }
html.legacy-tv .tv-identity { flex: 0 0 310px; }
html.legacy-tv .tv-identity img { width: 62px; height: 62px; max-width: 62px; max-height: 62px; }
html.legacy-tv .tv-identity span { font-size: 16px; }
html.legacy-tv .tv-identity h1 { font-size: 31px; }
html.legacy-tv .signature { flex: 1 1 auto; font-size: 9px; }
html.legacy-tv .connection { flex: 0 0 215px; min-width: 215px; font-size: 12px; }
html.legacy-tv .connection small { font-size: 9px; }
html.legacy-tv .clock { flex: 0 0 120px; min-width: 120px; }
html.legacy-tv .clock small { font-size: 9px; }
html.legacy-tv .clock strong { font-size: 25px; }
html.legacy-tv main { display: flex !important; flex: 1 1 auto; flex-direction: column; height: auto; min-height: 0; padding: 5px 14px 2px; overflow: hidden; }
html.legacy-tv main > * + * { margin-top: 5px; }
html.legacy-tv .situation { display: flex !important; flex: 0 0 42px; height: 42px; padding: 4px 10px; }
html.legacy-tv .situation-mark { flex: 0 0 auto; font-size: 10px; margin-right: 10px; }
html.legacy-tv .situation-copy { flex: 1 1 auto; min-width: 0; }
html.legacy-tv .situation-copy strong { font-size: 13px; }
html.legacy-tv .situation-copy span { font-size: 9px; }
html.legacy-tv .situation-facts { flex: 0 0 auto; font-size: 9px; }
html.legacy-tv .cards,
html.legacy-tv .row,
html.legacy-tv .ribbon { display: flex !important; width: 100%; min-width: 0; }
html.legacy-tv .cards { flex: 0 0 96px; height: 96px; }
html.legacy-tv .cards > .card { flex: 1 1 0; width: 16.666%; min-width: 0; }
html.legacy-tv .cards > * + *,
html.legacy-tv .row > * + * { margin-left: 9px; }
html.legacy-tv .card { padding: 9px 7px 7px 54px; }
html.legacy-tv .card .label { min-height: 25px; font-size: 12px; }
html.legacy-tv .card strong { font-size: 25px; }
html.legacy-tv .card small { font-size: 9px; }
html.legacy-tv .card .card-icon,
html.legacy-tv .card .card-glow { left: 10px; top: 24px; width: 31px; height: 31px; }
html.legacy-tv .row-main { flex: 1.15 1 0; min-height: 165px; }
html.legacy-tv .row-bottom { flex: 1 1 0; min-height: 150px; }
html.legacy-tv .row-main > .trend-panel { flex: 1.45 1 0; }
html.legacy-tv .row-main > .movement-panel { flex: .94 1 0; }
html.legacy-tv .row-main > .family-panel { flex: 1 1 0; }
html.legacy-tv .row-bottom > .zone-panel,
html.legacy-tv .row-bottom > .cold-panel { flex: 1.08 1 0; }
html.legacy-tv .row-bottom > .exception-panel { flex: .95 1 0; }
html.legacy-tv .panel { min-width: 0; height: auto; padding: 7px 10px; }
html.legacy-tv .panel h2 { font-size: 13px; }
html.legacy-tv .source { font-size: 9px; }
html.legacy-tv .chart,
html.legacy-tv .family-chart { height: calc(100% - 28px); }
html.legacy-tv .ribbon { flex: 0 0 72px; height: 72px; }
html.legacy-tv .ribbon > div { flex: 1 1 25%; min-width: 0; }
html.legacy-tv footer { flex: 0 0 18px; height: 18px; min-height: 18px; font-size: 8px; }

@media (min-width: 901px) and (max-height: 800px) {
  #board { grid-template-rows: 68px minmax(0, 1fr) 18px; }
  .tv-header { flex-basis: 68px; }
  .tv-identity img { width: 58px; height: 58px; }
  .tv-identity h1 { font-size: 31px; }
  .tv-identity span { font-size: 15px; }
  main { grid-template-rows: minmax(38px, .42fr) minmax(76px, 1fr) minmax(158px, 2.2fr) minmax(148px, 2fr) minmax(68px, 1fr); gap: 5px; }
  .card { padding-top: 8px; padding-bottom: 7px; }
  .panel { padding-top: 7px; padding-bottom: 7px; }
  html.legacy-tv .tv-header { flex-basis: 68px; height: 68px; min-height: 68px; }
  html.legacy-tv .cards { flex-basis: 86px; height: 86px; }
  html.legacy-tv .situation { flex-basis: 38px; height: 38px; }
  html.legacy-tv .ribbon { flex-basis: 66px; height: 66px; }
}

@media (max-width: 900px) {
  #board { display: block; }
  .situation { grid-template-columns: 1fr; gap: 7px; margin-bottom: 8px; padding: 12px; }
  .situation-facts { justify-content: flex-start; flex-wrap: wrap; }
  .situation-copy strong,
  .situation-copy span { white-space: normal; }
}