/* Prime Pulse — brand tokens + components. Mirrors the PDF visual system in
   fyi-pipeline/reports/burst_reports.py render(): navy banner, white body, PAPER cards,
   yellow section flags, tiles with a 3px blue top border, tabular numerics. */

@font-face { font-family: 'Sofia Pro'; font-style: normal; font-weight: 300;
  src: url(/assets/sofia-pro-light.woff) format('woff'); font-display: swap; }
@font-face { font-family: 'Sofia Pro'; font-style: normal; font-weight: 400;
  src: url(/assets/sofia-pro-regular.woff) format('woff'); font-display: swap; }

:root {
  --navy: #000d41; --blue: #0071bb; --sky: #2ea3f2; --yellow: #ffd400;
  --ink: #112337; --muted: #686e77; --line: #e3e8f0; --paper: #f2f8fb;
  --good: #1e7e46; --bad: #c0392b; --warn: #e08e0b; --white: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Sofia Pro', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 300; color: var(--ink); background: #fff;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
b, strong, .bold { font-weight: 400; }
a { color: var(--blue); text-decoration: none; }
.boot { padding: 60px; text-align: center; color: var(--muted); }

/* ---------- banner / shell ---------- */
.banner {
  background: var(--navy); color: #fff; padding: 14px 22px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.banner img.logo { height: 26px; display: block; }
.banner .title {
  font-weight: 400; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; border-left: 1px solid rgba(255,255,255,.25); padding-left: 18px;
}
.banner .title .view { color: var(--sky); }
.banner .spacer { flex: 1 1 auto; }
.banner .controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banner .asat { font-size: 9px; text-transform: uppercase; letter-spacing: .18em; color: var(--sky); text-align: right; }
.banner .asat b { display: block; color: #fff; letter-spacing: .16em; font-weight: 400; }
.banner select {
  font-family: inherit; font-size: 12px; font-weight: 400; color: var(--navy);
  background: #fff; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
.banner label.pill { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: var(--sky); display: flex; flex-direction: column; gap: 3px; }

/* nav tabs */
nav.tabs { background: var(--navy); padding: 0 22px; display: flex; gap: 4px; border-top: 1px solid rgba(255,255,255,.08); }
nav.tabs a {
  color: rgba(255,255,255,.7); font-size: 11px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .14em; padding: 11px 16px 12px; border-bottom: 3px solid transparent;
}
nav.tabs a.active { color: #fff; border-bottom-color: var(--yellow); }
nav.tabs a:hover { color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 22px 22px 60px; }

/* ---------- name row ---------- */
.namerow { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 18px; border-left: 4px solid var(--yellow); padding-left: 14px; flex-wrap: wrap; gap: 6px; }
.namerow .who { font-size: 24px; font-weight: 400; color: var(--navy); }
.namerow .when { font-size: 13px; color: var(--muted); }

/* ---------- section heads ---------- */
h2.sec { font-size: 11px; margin: 26px 0 12px; color: var(--navy); text-transform: uppercase; letter-spacing: .18em; font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
h2.sec .flag { display: inline-block; width: 18px; height: 8px; background: var(--yellow); border-radius: 2px; margin-right: 9px; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 6px; }
.tile { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 8px; padding: 12px 14px 11px; }
.tile .k { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; font-weight: 400; }
.tile .v { font-size: 23px; font-weight: 400; margin-top: 3px; color: var(--navy); font-variant-numeric: tabular-nums; }
.tile .s { color: var(--muted); font-size: 11px; margin-top: 2px; }
.pos { color: var(--good) !important; }
.neg { color: var(--bad) !important; }
.warncol { color: var(--warn) !important; }

/* ---------- cards / rows ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-chart { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.card h3 { margin: 0 0 8px; font-size: 12px; color: var(--navy); font-weight: 400; }
.row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.row:last-child { border-bottom: none; }
.row b { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--navy); }

/* ---------- charts ---------- */
.chart { width: 100%; height: 280px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.chart.tall { height: 320px; }
.chart.short { height: 150px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { padding: 7px 11px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
td:first-child, th:first-child { text-align: left; }
thead th { background: var(--navy); color: #fff; border: none; font-weight: 400; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
td.hl { background: #fff7d1; color: var(--navy); font-weight: 400; }
tr.foot td { font-weight: 400; border-top: 2px solid var(--navy); background: #f1f4f7; }
.tablewrap { overflow-x: auto; border-radius: 8px; }
.dates { color: var(--muted); font-size: 11px; line-height: 1.5; text-align: left; }
.lbl-miss { color: var(--bad); font-weight: 400; }
.lbl-under { color: var(--warn); font-weight: 400; }
.note { color: #98a2b0; font-style: italic; }
tr.bad td:first-child { border-left: 3px solid var(--bad); }
tr.warn td:first-child { border-left: 3px solid var(--warn); }
tr.ok td:first-child { border-left: 3px solid #a9d8ba; }

/* manager group heads (team/firm) */
h3.mgr { font-size: 14px; margin: 22px 0 8px; color: var(--navy); border-bottom: 2px solid var(--line); padding-bottom: 5px; font-weight: 400; }
h3.mgr .badge { float: right; font-size: 11px; color: var(--muted); }

.datesline { margin: 8px 2px 0; font-size: 12px; }
.subnote { margin-top: 8px; color: var(--muted); font-size: 12px; }

/* toast / error */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 50; }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.err403 { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 8px; padding: 22px; color: var(--ink); }
.err403 h3 { margin: 0 0 6px; color: var(--bad); font-weight: 400; }

.footer { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 12px; color: #9aa5ba; font-size: 11px; line-height: 1.5; }
.footer .brand { color: var(--blue); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; margin-bottom: 3px; }

@media (max-width: 760px) {
  .grid2, .grid-chart { grid-template-columns: 1fr; }
  .banner .title { border-left: none; padding-left: 0; }
}