:root{
  --bg:#0b0f17; --panel:#121826; --panel2:#182032; --line:#232d42;
  --fg:#e6ecf7; --muted:#8798b4; --accent:#4c9aff; --up:#22c55e; --down:#ef4444;
  --warn:#f59e0b; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 "Inter",-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:19px;margin:0}
h2{font-size:13px;margin:0 0 12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hidden{display:none !important}

.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;flex:0 0 38px;display:block}
.sub{margin:2px 0 0;color:var(--muted);font-size:12px}
.conn{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.conn-sep{width:1px;height:14px;background:var(--line)}
.freshness{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tickage{font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap;
  background:var(--panel2);color:var(--muted)}
.tickage.fresh{background:rgba(34,197,94,.14);color:var(--up)}
.tickage.stale{background:rgba(245,158,11,.14);color:var(--warn)}

/* Freshness strip: cadence plus the newest tick, always on screen. */
.freshbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0;padding:9px 24px;border-bottom:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.freshbar .cadence{display:flex;align-items:center;gap:7px;color:var(--fg)}
.fb-icon{width:14px;height:14px;flex:0 0 14px;color:var(--accent)}
.fb-sep{width:1px;height:13px;background:var(--line)}
.fb-item strong{color:var(--fg);font-weight:600}
.fb-item strong.warn{color:var(--warn)}
.fb-item strong.ok{color:var(--up)}
@media (max-width:700px){.freshbar{padding:9px 16px}.fb-sep{display:none}}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.ok{background:var(--up);box-shadow:0 0 8px var(--up)}
.dot.bad{background:var(--down);box-shadow:0 0 8px var(--down)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}

.banner{margin:14px 24px 0;padding:12px 16px;border-radius:var(--radius);
  border:1px solid var(--warn);background:rgba(245,158,11,.09);color:#fcd9a3;font-size:13px}
.banner b{color:#fff}
.banner ul{margin:6px 0 0;padding-left:18px}
.banner.bad{border-color:var(--down);background:rgba(239,68,68,.09);color:#f8c9c9}

.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  padding:16px 24px;border-bottom:1px solid var(--line)}
.controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
select,input{background:var(--panel2);border:1px solid var(--line);color:var(--fg);
  padding:8px 11px;border-radius:9px;font-size:13px;min-width:132px;font-family:inherit}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px}
button{padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid transparent;font-family:inherit}
button.primary{background:var(--accent);color:#04101f}
button.primary:hover{filter:brightness(1.1)}
button.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
button.ghost:hover{color:var(--fg);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}

main{padding:24px 24px 72px;max-width:1680px;margin:0 auto}

/* Section headings give the page a readable top-to-bottom shape instead of
   one undifferentiated wall of cards. */
.block{margin-bottom:34px}
.block-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.stack{display:grid;gap:16px;grid-template-columns:1fr}

.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-bottom:26px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.kpi .label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.kpi .value{font-size:22px;font-weight:650;margin-top:6px;font-variant-numeric:tabular-nums;
  line-height:1.15}
.kpi .hint{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.up{color:var(--up)} .down{color:var(--down)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;min-width:0}
.card.span2{grid-column:span 2}
.card.span3{grid-column:span 3}
/* The grid holds 3 columns only down to a 1340px viewport (420px minimum
   track + 16px gaps + 48px page padding); below that it drops to 2, so a
   span3 must collapse first or it would overflow the row. */
@media (max-width:1339px){.card.span3{grid-column:span 2}}
@media (max-width:900px){.card.span3,.card.span2{grid-column:span 1}}

/* Every card is a clickable disclosure: the header is the control. */
.card[data-card]{cursor:pointer;transition:border-color .14s ease,background .14s ease}
.card[data-card]:hover{border-color:#31405e}
.card[data-card]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.open{border-color:var(--accent);background:var(--panel2)}
.card-title{font-size:13px;margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  /* keep the chevron clear of the tag that follows the title text */
  position:relative;padding-right:20px}
.card-title::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .16s ease;opacity:.65}
.card.open .card-title::after{transform:rotate(-135deg);margin-top:-2px}
.card.open .card-title{color:var(--fg)}

/* Expanded detail body */
.card-detail{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.card-detail h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px;font-weight:600}
.card-detail h3 + h3{margin-top:18px}
.card-detail p.explain{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* 300px minimum keeps wide values (drawdown episode timelines, hour-by-hour
   rows) on one line in the full-width cards without crowding the narrow ones. */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 22px;margin:0}
.dl div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid rgba(35,45,66,.5);font-size:12.5px}
.dl dt{color:var(--muted);white-space:nowrap;flex:0 0 auto}
.dl dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;
  /* A wide value (a drawdown episode timeline joins three timestamps with
     arrows) cannot fit beside its label. Wrapping inside the value keeps the
     row intact, where nowrap made it spill out of the card. */
  white-space:normal;overflow-wrap:anywhere;line-height:1.45;
  /* Absorbs the slack so the value hugs the right edge, even when wrapped. */
  margin-left:auto}

.chart{position:relative;height:260px}
.chart.tall{height:360px}
.chart.short{height:210px}
.note{color:var(--muted);font-size:12px;margin:12px 0 0;line-height:1.55}
.tag{font-size:10px;background:var(--panel2);border:1px solid var(--line);
  padding:2px 7px;border-radius:6px;color:var(--muted);letter-spacing:.03em;
  text-transform:none;font-weight:500}

/* Calendar */
.calbar{display:flex;align-items:center;gap:10px;margin:12px 0 14px}
.callabel{font-size:13.5px;min-width:190px;text-align:center;font-variant-numeric:tabular-nums}
button.ghost.sm{padding:6px 12px;font-size:12px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calhead{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;
  text-align:center;padding:4px 0}
.calday{position:relative;aspect-ratio:1/.82;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);display:flex;flex-direction:column;justify-content:space-between;
  padding:7px 8px;color:var(--fg);font-family:inherit;font-size:12px;cursor:pointer;
  text-align:left;overflow:hidden}
.calday:hover{border-color:var(--accent)}
.calday.empty{visibility:hidden}
.calday.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.calday.today .cnum{color:var(--accent);font-weight:700}
.calday .cnum{font-variant-numeric:tabular-nums;font-weight:600}
.calday .cticks{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.calday .cbar{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#4c9aff,#22d3a7)}
.calday.up .cbar{background:var(--up)}
.calday.down .cbar{background:var(--down)}

.tablewrap{max-height:360px;overflow:auto;border-radius:9px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
th{position:sticky;top:0;background:var(--panel2);text-align:right;padding:9px 12px;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
td{text-align:right;padding:7px 12px;border-bottom:1px solid rgba(35,45,66,.5);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:rgba(76,154,255,.06)}
th{cursor:default}

.tables{display:flex;flex-direction:column;gap:10px}
/* Asset-class coverage bars */
.classes{display:flex;flex-direction:column;gap:7px}
.classrow{display:grid;grid-template-columns:190px 1fr 56px;align-items:center;gap:12px}
.classrow .cname{color:var(--muted);font-size:11.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.classrow .cbar{height:8px;background:rgba(35,45,66,.75);border-radius:6px;overflow:hidden}
.classrow .cbar i{display:block;height:100%;background:linear-gradient(90deg,#4c9aff,#8b5cf6);
  border-radius:6px}
.classrow .ccount{text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px}
.trow{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.trow .meta{color:var(--muted);font-size:11.5px;margin-top:3px}
.pill{font-size:10.5px;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.ok{background:rgba(34,197,94,.14);color:var(--up)}
.pill.bad{background:rgba(239,68,68,.14);color:var(--down)}
.pill.warn{background:rgba(245,158,11,.14);color:var(--warn)}

.loading{position:fixed;inset:0;display:grid;place-items:center;gap:14px;
  background:rgba(11,15,23,.82);z-index:50;color:var(--muted)}
.loading{display:none;place-items:center}
.loading:not(.hidden){display:grid;align-content:center;justify-items:center;gap:14px}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{color:var(--down);padding:12px}