:root {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --ink: #142033;
  --ink-2: #4a5568;
  --ink-3: #7a8699;
  --line: #e2e7ee;
  --navy: #0f2747;
  --navy-2: #1d3d66;
  --accent: #2563eb;
  --ok: #15803d;      --ok-bg: #e8f5ec;
  --watch: #b45309;   --watch-bg: #fdf3e2;
  --breach: #c2410c;  --breach-bg: #fdeae0;
  --reg: #9f1239;     --reg-bg: #fbe4ea;
  --na: #7a8699;      --na-bg: #eef1f5;
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); }
h2 { font-size: 18px; margin: 0; letter-spacing: .1px; }
h3 { font-size: 14.5px; margin: 0 0 2px; }
.muted { color: var(--ink-3); font-size: 12.5px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- header */
.top {
  background: var(--navy); color: #fff; display: grid; gap: 24px; align-items: center;
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(220px, 1fr) auto; padding: 14px 24px;
}
.brand .title { font-size: 21px; font-weight: 700; letter-spacing: .2px; }
.brand .sub { color: #b9c7da; font-size: 12.5px; }
.asof { text-align: center; }
.asof-label, .cfp-label { color: #b9c7da; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.asof-date { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.asof-dow { color: #b9c7da; font-size: 12px; min-height: 16px; }
.cfp { border-left: 1px solid #2c4a73; padding-left: 20px; }
.cfp-level { font-size: 17px; font-weight: 700; }
.cfp-drivers { color: #d6e0ec; font-size: 12px; min-height: 16px; }
.cfp.l1 .cfp-level { color: #fcd34d; }
.cfp.l2 .cfp-level { color: #fdba74; }
.cfp.l3 .cfp-level { color: #fda4af; }
.cfp.l0 .cfp-level { color: #86efac; }
.tally { display: flex; gap: 8px; }
.tally .t { background: #1a3558; border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 64px; }
.tally .n { font-size: 20px; font-weight: 700; display: block; font-variant-numeric: tabular-nums; }
.tally .k { font-size: 10.5px; color: #b9c7da; text-transform: uppercase; letter-spacing: .5px; }
.tally .t.ok .n { color: #86efac; } .tally .t.watch .n { color: #fcd34d; }
.tally .t.breach .n { color: #fdba74; } .tally .t.reg .n { color: #fda4af; }

/* ---------------------------------------------------------------- time bar */
.timebar {
  position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 10px 24px 6px;
  box-shadow: 0 2px 6px rgba(15, 39, 71, .05);
}
.controls { display: flex; gap: 6px; align-items: center; }
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; height: 32px;
  min-width: 32px; padding: 0 10px; font: 600 14px var(--font); cursor: pointer;
}
.btn:hover { border-color: #b8c3d3; background: #f7f9fc; }
.btn:focus-visible, .datepick:focus-visible, input[type=range]:focus-visible, .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-play { min-width: 82px; background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-play:hover { background: var(--navy-2); }
.datepick { height: 32px; border: 1px solid var(--line); border-radius: 7px; padding: 0 8px; font: 14px var(--font); color: var(--ink); }
.track-wrap { position: relative; padding-top: 22px; }
.events { position: absolute; top: 0; left: 0; right: 0; height: 20px; }
.ev {
  position: absolute; top: 2px; height: 16px; border-radius: 4px; background: #dbe5f3; color: var(--navy);
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; cursor: pointer; min-width: 22px;
  border: 1px solid #c3d2e8; overflow: hidden; white-space: nowrap;
}
.ev:hover, .ev.on { background: var(--navy); color: #fff; border-color: var(--navy); }
input[type=range] { width: 100%; margin: 0; accent-color: var(--navy); height: 20px; }
.months { position: relative; height: 16px; font-size: 10.5px; color: var(--ink-3); }
.months span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
main { padding: 18px 24px 8px; max-width: 1680px; margin: 0 auto; }
.loading { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 15px; }
.block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid2.inner { margin-bottom: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.chart-lg { position: relative; height: 330px; }
.chart-md { position: relative; height: 260px; margin-top: 8px; }

/* ---------------------------------------------------------------- tiles */
.group { margin-bottom: 14px; }
.group:last-child { margin-bottom: 0; }
.group-name { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3); margin-bottom: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tile {
  border: 1px solid var(--line); border-left: 5px solid var(--na); border-radius: 8px; padding: 9px 11px 7px;
  cursor: pointer; background: #fff; transition: box-shadow .12s, transform .12s; min-width: 0;
}
.tile:hover { box-shadow: 0 3px 10px rgba(15, 39, 71, .10); }
.tile.sel { box-shadow: 0 0 0 2px var(--accent); }
.tile .name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tile .val { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .lim { font-size: 11.5px; color: var(--ink-3); text-align: right; }
.tile canvas { width: 100%; height: 28px; display: block; margin-top: 2px; }
.tile .foot2 { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.tile.s-OK { border-left-color: var(--ok); } .tile.s-WATCH { border-left-color: var(--watch); }
.tile.s-BREACH { border-left-color: var(--breach); background: #fffaf7; }
.tile.s-REG_BREACH { border-left-color: var(--reg); background: #fff8fa; }
.tile.s-OK .val { color: var(--ink); } .tile.s-WATCH .val { color: var(--watch); }
.tile.s-BREACH .val { color: var(--breach); } .tile.s-REG_BREACH .val { color: var(--reg); }
.tile.s-NA .val { color: var(--na); }

.pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.s-OK.pill { background: var(--ok-bg); color: var(--ok); }
.s-WATCH.pill { background: var(--watch-bg); color: var(--watch); }
.s-BREACH.pill { background: var(--breach-bg); color: var(--breach); }
.s-REG_BREACH.pill { background: var(--reg-bg); color: var(--reg); }
.s-NA.pill { background: var(--na-bg); color: var(--na); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
     border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; }
td { border-bottom: 1px solid #eef1f5; padding: 6px 8px; vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.future td { color: #b3bccb; }
tr.open td { background: #fffaf3; }
tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
tr.sub td:first-child { padding-left: 20px; color: var(--ink-2); }
.small-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); margin: 12px 0 4px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }

.foot { color: var(--ink-3); font-size: 12px; padding: 4px 24px 24px; max-width: 1680px; margin: 0 auto; }
.foot b { color: var(--ink-2); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
  .top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally { grid-column: 1 / -1; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .top, .timebar { padding-left: 16px; padding-right: 16px; }
  main { padding: 12px 16px; }
  .top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cfp { border-left: 0; padding-left: 0; }
  .tally .t { min-width: 0; flex: 1; }
  .timebar { grid-template-columns: minmax(0, 1fr); position: static; }
  .controls { flex-wrap: wrap; }
  .months span.minor { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tile .row { flex-direction: column; align-items: flex-start; gap: 0; }
  .tile .lim { text-align: left; }
  .tile .name { white-space: normal; }
  .tile .foot2 { gap: 6px; }
  .block { padding: 12px; }
}