:root{
  --bg:#0b1f33; --panel:#13283f; --ink:#eaf2fb; --muted:#9fb4c9; --line:#21405f;
  --p101:#E8741E; /* orange */ --p102:#E8C31E; /* yellow */ --p103:#2E6FE8; /* blue */
  --timtra:#6B7BE8; /* TIMTRA periwinkle (brand accent) */ --warn:#caa23a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#08182a;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
/* ── Brand lockup: TIMIRON (parent) big, TIMTRA logo (product) small ── */
.brand-lock{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand-timiron{font-family:Georgia,"Times New Roman",serif;font-weight:700;text-transform:uppercase;color:var(--ink)}
.brand-timtra-logo{display:block;height:auto;object-fit:contain}
/* topbar compact lockup (Timiron parent, small caps; TIMTRA wordmark) */
.tb-brand{display:flex;align-items:baseline;gap:9px}
.tb-timiron{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--muted)}
.tb-timtra{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.06em;font-size:22px}
.tb-timtra .t-tim{color:var(--ink)} .tb-timtra .t-tra{color:var(--timtra)}
.subtitle{color:var(--muted);font-size:13px}
.logout{margin-left:auto;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
main{max-width:920px;margin:0 auto;padding:14px 16px 8px}
section{margin-bottom:18px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 9px;font-weight:700}
/* Summary hero — stands out, carries day + live time */
.hero{background:linear-gradient(180deg,#173455,#0f2741);border:1px solid var(--line);border-left:4px solid var(--timtra);border-radius:14px;padding:18px 20px 20px;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hero-day{font-size:21px;font-weight:800;color:var(--ink);line-height:1.1}
.hero-report{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.hero-clock{font-size:24px;font-weight:800;color:var(--timtra);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
#brief .narr{font-size:15.5px;line-height:1.6;color:#dce8f6;margin:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.brief p{margin:6px 0;font-size:17px}
.asof{color:var(--muted);font-size:12px}
.vol-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.vol{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.vol-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.vol-num{font-size:28px;font-weight:800;margin:6px 0;font-variant-numeric:tabular-nums}
.vol-sub{color:var(--muted);font-size:12px}
.narr{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.h-sub{color:var(--muted);font-size:11px;text-transform:none;letter-spacing:0;font-weight:400}
/* data tables */
.tablecard{padding:0;overflow:hidden}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:#0e2236}
table.tbl td{padding:10px 14px;border-bottom:1px solid #18324a;color:var(--ink)}
table.tbl th.r,table.tbl td.r{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tr.tot td{font-weight:800;border-top:1px solid var(--line);background:#0e2236}
.carrier-rows{display:flex;flex-direction:column;gap:8px}
.carrier{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.c-name{font-weight:700}
.c-stat{color:var(--muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.c-avg{color:var(--ink)}
@media(max-width:560px){.carrier{grid-template-columns:1fr 1fr;row-gap:4px}.c-name{grid-column:1/3}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--c,#888);border-radius:12px;padding:14px}
.tile.p101{--c:var(--p101)} .tile.p102{--c:var(--p102)} .tile.p103{--c:var(--p103)}
.tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pump-name{font-weight:800;font-size:18px}
.tile-stale{font-size:11px;color:var(--warn);margin:-2px 0 8px}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:700}
.pill.active{background:#1c5e2a;color:#d6ffd9}
.pill.idle{background:#2a3a4c;color:var(--muted)}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-size:14px}
.rows .k{color:var(--muted)} .rows .val{text-align:right;font-variant-numeric:tabular-nums}
.banner{padding:10px 16px;background:#3a2f12;color:var(--warn);border-bottom:1px solid #5a4a1c;font-size:13px;text-align:center}
.muted{color:var(--muted)}
.hidden{display:none}
footer{max-width:1100px;margin:8px auto 28px;padding:0 16px;color:var(--muted);font-size:12px}
/* compact stat cards (Yesterday / Crude Quality): smaller so they fit side-by-side */
.vol-cards.compact{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.vol-cards.compact .vol{padding:12px 10px}
.vol-cards.compact .vol-num{font-size:22px}
/* Phone: keep stat cards side-by-side (2-up) rather than stacked */
@media(max-width:560px){
  .vol-cards{grid-template-columns:repeat(2,1fr)}
  .vol-num{font-size:24px}
  .vol-cards.compact{grid-template-columns:repeat(2,1fr)}
  .vol-cards.compact .vol-num{font-size:20px}
}