/* Macro Early-Warning Panel — serious financial-monitor styling.
   Plain CSS, no framework. Reads on a phone. */

:root{
  --bg:#0e1420;
  --panel:#161e2e;
  --panel-2:#1c2739;
  --line:#28324a;
  --ink:#e7edf7;
  --ink-dim:#9fb0c9;
  --ink-faint:#6d7d98;
  --green:#3fb568;
  --green-bg:#12301f;
  --amber:#e0a53a;
  --amber-bg:#332611;
  --red:#e2564d;
  --red-bg:#331817;
  --grey:#7b8aa3;
  --accent:#5a9bd8;
  --radius:12px;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:24px 18px 64px}

/* ---- header ---- */
.page-head h1{
  font-size:1.5rem;
  letter-spacing:-.01em;
  margin:0 0 4px;
}
.page-head .sub{margin:0;color:var(--ink-dim);font-size:.92rem}
.asat{margin:.6rem 0 0;color:var(--ink-faint);font-size:.8rem;font-family:var(--mono)}

/* ---- regime banner ---- */
.regime{
  margin:20px 0 26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;
}
.regime-inner{padding:20px 22px;border-left:6px solid var(--grey)}
.regime-eyebrow{
  display:block;text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--ink-faint);margin-bottom:8px;
}
.regime-badge{
  font-size:1.8rem;font-weight:650;letter-spacing:-.01em;line-height:1.1;
}
.regime-sentence{margin:.5rem 0 0;color:var(--ink);font-size:1rem;max-width:62ch}
.regime-framing{
  margin:.8rem 0 0;color:var(--ink-dim);font-size:.9rem;font-style:italic;
  border-top:1px dashed var(--line);padding-top:.7rem;max-width:62ch;
}
/* regime states */
.regime--normal .regime-inner{border-left-color:var(--green)}
.regime--normal .regime-badge{color:var(--green)}
.regime--watch .regime-inner{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-bg),transparent 60%)}
.regime--watch .regime-badge{color:var(--amber)}
.regime--stagflation .regime-inner,
.regime--inflation .regime-inner,
.regime--deflation .regime-inner{border-left-color:var(--red);background:linear-gradient(90deg,var(--red-bg),transparent 60%)}
.regime--stagflation .regime-badge,
.regime--inflation .regime-badge,
.regime--deflation .regime-badge{color:var(--red)}
.regime--loading .regime-badge{color:var(--ink-faint)}

/* ---- grid ---- */
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  display:flex;flex-direction:column;
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-label{font-size:.95rem;font-weight:600;margin:0;color:var(--ink)}
.badge{
  flex:none;font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;
  padding:3px 8px;border-radius:999px;font-weight:700;white-space:nowrap;
  border:1px solid transparent;
}
.badge.normal{color:var(--green);background:var(--green-bg);border-color:#204a32}
.badge.triggered{color:var(--red);background:var(--red-bg);border-color:#5a2723}
.badge.stale{color:var(--amber);background:var(--amber-bg);border-color:#57451d}

.card-value{display:flex;align-items:baseline;gap:8px;margin:12px 0 0}
.value{font-family:var(--mono);font-size:2rem;font-weight:600;letter-spacing:-.02em}
.trend{font-size:1.25rem;line-height:1}
.trend.rising{color:var(--accent)}
.trend.falling{color:var(--accent)}
.trend.flat{color:var(--ink-faint)}
.secondary{margin:2px 0 0;color:var(--ink-dim);font-size:.82rem;min-height:1em}

.spark{width:100%;height:34px;margin:12px 0 4px;display:block}
.spark .line{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke}
.spark .thr{fill:none;stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.7}
.spark .dot{fill:var(--accent)}
.card.is-triggered .spark .line,.card.is-triggered .spark .dot{stroke:var(--red);fill:var(--red)}
.card.is-stale .spark .line{stroke:var(--grey)}
.card.is-stale .spark .dot{fill:var(--grey)}

.meta{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 0;
  border-top:1px solid var(--line);padding-top:10px;
}
.meta dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.meta dd{margin:2px 0 0;font-size:.8rem;color:var(--ink)}
.meta .asof,.meta .trendtext{font-family:var(--mono);font-size:.76rem}

.stale-note{
  margin:10px 0 0;font-size:.76rem;color:var(--amber);
  background:var(--amber-bg);border-radius:8px;padding:7px 9px;display:none;
}
.card.is-stale .stale-note{display:block}

/* ---- footer ---- */
.page-foot{margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.page-foot p{margin:0 0 6px;color:var(--ink-faint);font-size:.78rem;max-width:74ch}
#foot-note{color:var(--ink-dim)}

.error-box{
  background:var(--red-bg);border:1px solid #5a2723;color:#f2b3ae;
  padding:14px 16px;border-radius:var(--radius);font-size:.9rem;
}

@media (max-width:480px){
  .wrap{padding:18px 14px 48px}
  .regime-badge{font-size:1.5rem}
  .value{font-size:1.7rem}
  .grid{grid-template-columns:1fr}
}