:root {
  --navy: #1f3864;
  --tile: #f2f6fc;
  --label: #7f7f7f;
  --red: #c0392b;
  --fs: clamp(10px, 0.75vw, 16px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: var(--fs); }

.tabs { display: flex; gap: 0.4vw; padding: 0.6vh 0.9vw 0; }
.tabs a { color: var(--navy); background: var(--tile); text-decoration: none; padding: 0.4vh 0.8vw; border-radius: 4px; font-weight: bold; font-size: 0.95em; border: 1px solid #d9e2f3; }
.tabs a:hover { background: #d9e2f3; }
.tabs a.active { color: #fff; background: var(--navy); border-color: var(--navy); }.screen { display: flex; flex-direction: column; gap: 0.9vh; padding: 0.9vh 0.9vw; min-height: 100vh; }
body.single { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.single .screen { flex: 1; min-height: 0; }
body.single .screen.off { display: none; }
html.tv body { cursor: none; }

.top { background: var(--navy); color: #fff; padding: 0.9vh 1vw; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.top h1 { margin: 0; font-size: 1.9em; }
.top.slim h1 { font-size: 1.5em; }
.top .sub { color: #d9e2f3; font-size: 0.95em; margin-top: 3px; }
.top .right { text-align: right; }
.brand { display: flex; align-items: center; gap: 0.8vw; }
/* White badge: the logo's navy brackets would vanish on the navy header */
.brand-logo { height: 2.6em; background: #fff; padding: 0.3em 0.6em; border-radius: 4px; }
.clock { font-weight: bold; font-size: 1.2em; white-space: pre; }
.period-filter { display: flex; gap: 0.4vw; margin-top: 0.6vh; }
.period-filter button {
  font: bold 0.95em Arial, sans-serif; color: #d9e2f3; background: transparent; cursor: pointer;
  border: 1px solid #8ea9db; border-radius: 4px; padding: 0.35vh 0.9vw;
}
.period-filter button:hover { background: #2f4b80; }
.period-filter button.active { color: var(--navy); background: #fff; border-color: #fff; }
.tile .val.breached { color: var(--red); }
.tile .val.clear { color: #2e9e5b; }

.banner { padding: 0.5vh 0.8vw; border-radius: 4px; font-weight: bold; }
.banner.bad { background: var(--red); color: #fff; animation: pulse 1.6s infinite; }
.banner.warn { background: #fff4ce; color: #7f6000; border: 1px solid #e8a33d; }
@keyframes pulse { 50% { opacity: 0.7; } }

.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6vh 0.6vw; }.tile { background: var(--tile); border-radius: 4px; padding: 0.7vh 0.8vw; border-left: 4px solid var(--navy); }
.tile .lbl { color: var(--label); font-weight: bold; font-size: 0.9em; }
.tile .val { font-size: 2.3em; font-weight: bold; line-height: 1.15; }
.tile .cap { color: var(--label); font-size: 0.85em; }

.card { border: 1px solid #d9e2f3; border-radius: 4px; padding: 0.6vh 0.6vw; display: flex; flex-direction: column; min-height: 0; }
.card h3 { margin: 0 0 0.5vh; color: var(--navy); font-size: 1.15em; }
.note { color: var(--label); font-weight: normal; font-size: 0.8em; margin-left: 1vw; }
.chart-box { position: relative; flex: 1; min-height: 22vh; }

.row { display: grid; gap: 0.6vw; }
.r-charts { grid-template-columns: 1.4fr 1fr; flex: 1; min-height: 0; }
.scorecard { flex: 0 0 auto; }
.cv-box { flex: 1; min-height: 0; display: flex; align-items: center; overflow: hidden; }
.tbl.cv { font-size: 1.15em; }
.tbl.cv td { padding-top: 0.6vh; padding-bottom: 0.6vh; }
.tbl.cv th { white-space: nowrap; }
.cv-box:has(.brands), .grid4 .cv-box { align-items: stretch; }
.grid4 .tbl.cv { height: 100%; }
.tbl.brands { height: 100%; }
.tbl.brands td { padding-top: 0.45vh; padding-bottom: 0.45vh; white-space: nowrap; }
.tbl.brands td:last-child { width: 26%; }

.r-he { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.r-he2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.r-he .tbl td:first-child { white-space: nowrap; }
.tbl.cv.zones { font-size: 1.05em; }
.tbl.models td { padding-top: 0.35vh; padding-bottom: 0.35vh; white-space: nowrap; }
.cv-box:has(.models) { align-items: flex-start; }

.grid4 { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 0.8vh 0.6vw; min-height: 0; }
.grid4 .span2 { grid-column: span 2; }
body:not(.single) .grid4 { min-height: 85vh; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--navy); color: #fff; text-align: left; padding: 0.4vh 0.5vw; font-size: 0.95em; }
.tbl td { padding: 0.35vh 0.5vw; border-bottom: 1px solid #e5e9f2; }
.tbl tfoot td { font-weight: bold; border-top: 2px solid var(--navy); }
.tbl .r { text-align: right; }
.tbl .bad { color: var(--red); font-weight: bold; }
.share { position: relative; height: 1.15em; background: #eef2f9; border-radius: 3px; min-width: 6vw; }
.share > span { position: absolute; inset: 0 auto 0 0; background: #2e75b6; opacity: 0.55; border-radius: 3px; }
.share > em { position: relative; font-style: normal; padding-left: 4px; font-size: 0.9em; }

/* Phones: one column, scrollable page, fixed chart heights (the vw/vh sizing above is for TVs) */
@media (max-width: 820px) {
  :root { --fs: 13px; }
  body.single { height: auto; overflow: visible; display: block; }
  .tabs { overflow-x: auto; gap: 6px; padding: 8px 8px 0; scrollbar-width: none; }
  .tabs a { flex: 0 0 auto; padding: 8px 12px; white-space: nowrap; }
  .screen { padding: 8px; gap: 8px; min-height: 0; }
  .top { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .top h1, .top.slim h1 { font-size: 1.35em; }
  .brand { flex-wrap: wrap; gap: 8px; }
  .brand-logo { height: 34px; }
  .top .right { text-align: left; }
  .clock { font-size: 1em; }
  .period-filter { gap: 6px; margin-top: 8px; }
  .period-filter button { padding: 6px 12px; }
  .banner { padding: 8px 10px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 8px 10px; }
  .tile .val { font-size: 1.9em; }
  .row, .r-charts, .r-he, .grid4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  body:not(.single) .grid4 { min-height: 0; }
  .grid4 .span2 { grid-column: auto; }
  .card { padding: 8px; overflow-x: auto; }
  .chart-box { flex: none; height: 260px; min-height: 0; }
  .cv-box { overflow-x: auto; }
  .note { display: block; margin-left: 0; }
  .tbl th, .tbl td { padding: 6px; }
  .share { min-width: 60px; }
}