@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:        #0a0e14;
  --bg2:       #0d1320;
  --grid:      rgba(80,120,160,0.06);
  --ink:       #c7d3e0;
  --ink-dim:   #6b7d92;
  --emp:       #4fb286;
  --unemp:     #d98a4f;
  --nilf:      #7d8aa0;
  --openings:  #4f9fd9;
  --reserve:   #4f9fd9;
  --rrp:       #b15fc4;
  --tga:       #d9c14f;
  --asset:     #4fb286;
  --liab:      #d98a4f;
  --layoff:    #e85d5d;
  --crude:     #d98a4f;
  --gasoline:  #4f9fd9;
  --distillate:#4fb286;
  --jet:       #b15fc4;
  --line:      rgba(120,150,180,0.25);
  --box:       rgba(20,28,40,0.85);
  --box-edge:  rgba(120,160,200,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);}
body{
  font-family:'IBM Plex Sans',sans-serif;color:var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;background-position:center;
  -webkit-font-smoothing:antialiased;
}
.sheet{max-width:1180px;margin:0 auto;padding:30px 30px 60px;position:relative;}

.topnav{display:flex;justify-content:space-between;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  color:var(--ink-dim);margin-bottom:24px;}
.topnav .back{color:var(--ink-dim);text-decoration:none;transition:color .15s;}
.topnav .back:hover{color:var(--openings);}
.topnav .navmeta{color:var(--ink-dim);}

.masthead{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:6px;
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;}
.title-block h1{font-size:33px;font-weight:700;letter-spacing:-0.01em;margin:0;line-height:1.02;}
.title-block h1 .thin{font-weight:400;color:var(--ink-dim);}
.stamp{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-dim);line-height:1.7;}
.stamp .big{color:var(--ink);font-size:12px;letter-spacing:0.05em;}
#status{color:var(--unemp);}
#status.live{color:var(--emp);}

.subhead{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-dim);
  letter-spacing:0.02em;margin:14px 0 20px;max-width:800px;line-height:1.6;}
.subhead b{color:var(--openings);font-weight:600;}

.legend{display:flex;gap:20px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px;align-items:center;}
.legend span{display:inline-flex;align-items:center;gap:7px;}
.legend .legnote{text-transform:none;letter-spacing:0.02em;opacity:0.75;}
.swatch{width:22px;height:3px;border-radius:2px;display:inline-block;}

.frame{position:relative;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 40%, rgba(40,70,110,0.12), transparent 70%),var(--bg2);
  border-radius:4px;overflow:hidden;}
.frame::before{content:attr(data-tag);
  position:absolute;top:10px;left:14px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:0.18em;color:var(--ink-dim);opacity:0.6;z-index:5;}
.corner{position:absolute;width:11px;height:11px;border-color:var(--box-edge);z-index:5;}
.corner.tl{top:7px;left:7px;border-left:1px solid;border-top:1px solid;}
.corner.tr{top:7px;right:7px;border-right:1px solid;border-top:1px solid;}
.corner.bl{bottom:7px;left:7px;border-left:1px solid;border-bottom:1px solid;}
.corner.br{bottom:7px;right:7px;border-right:1px solid;border-bottom:1px solid;}

svg{display:block;width:100%;height:auto;}
.node-box{fill:var(--box);stroke:var(--box-edge);stroke-width:1;}
.node-title{font-family:'IBM Plex Sans',sans-serif;font-weight:600;fill:var(--ink);}
.node-tag{font-family:'IBM Plex Mono',monospace;fill:var(--ink-dim);letter-spacing:0.08em;}
.node-val{font-family:'IBM Plex Mono',monospace;font-weight:600;}
.node-unit{font-family:'IBM Plex Mono',monospace;font-size:0.55em;fill:var(--ink-dim);font-weight:400;letter-spacing:0.04em;}
.node-sub{font-family:'IBM Plex Mono',monospace;fill:var(--ink-dim);}
.col-label{font-family:'IBM Plex Mono',monospace;fill:var(--ink-dim);letter-spacing:0.2em;text-transform:uppercase;}
.flow{fill:none;stroke-linecap:round;}
.flow-dash{stroke-dasharray:5 9;animation:flow 1.1s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-14;}}
/* SPR pipe carries its own inline dasharray and isn't in the JS clone map */
#p_spr{animation:flow 1.1s linear infinite;}
/* p_spr already carries a stroke-dasharray in the HTML; animate it in place */
#p_spr{animation:flow 1.1s linear infinite;}

.hl{transition:opacity .15s;cursor:default;}
.frame.dim .hl:not(.on){opacity:0.13;}
/* SVG <a> wrappers (e.g. drill-down link on the SPR node) get a pointer hint */
svg a{cursor:pointer;}
svg a:hover .hl{filter:brightness(1.15);}

/* ---- flow table ---- */
.flowtable{margin-top:22px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg2);}
.ft-head{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;
  color:var(--ink-dim);padding:11px 16px;border-bottom:1px solid var(--line);}
.ft-grid{display:grid;grid-template-columns:repeat(6,1fr);}
.ft-cell{padding:14px 15px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;
  transition:background .15s;cursor:default;}
.ft-cell:last-child{border-right:none;}
.ft-cell:hover{background:rgba(79,159,217,0.06);}
.ft-dir{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);letter-spacing:0.06em;}
.ft-id{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--ink-dim);letter-spacing:0.04em;}
.ft-cell b{font-family:'IBM Plex Mono',monospace;font-size:21px;margin-top:4px;}
.ft-desc{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--ink-dim);}

/* ---- readouts (fed page) ---- */
.readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:22px;border-radius:4px;overflow:hidden;}
.ro{background:var(--bg2);padding:15px 16px 16px;}
.ro .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--ink-dim);text-transform:uppercase;}
.ro .num{font-family:'IBM Plex Mono',monospace;font-size:25px;font-weight:600;margin-top:8px;letter-spacing:-0.01em;}
.ro .chg{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:5px;color:var(--ink-dim);}
.ro .bar{height:3px;margin-top:11px;border-radius:2px;background:rgba(255,255,255,0.06);position:relative;overflow:hidden;}
.ro .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;}
/* 4-week trailing sparkline on each readout card */
.ro .spark{display:block;width:100%;height:24px;margin-top:10px;}
.ro .spark .spark-line{fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.ro .spark .spark-band{fill:rgba(120,150,180,0.10);}
/* 5-yr range indicator: ▼ below / ◆ within / ▲ above */
.ro .range{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:0.04em;
  margin-top:5px;color:var(--ink-dim);}
.ro .range.below{color:var(--layoff);}
.ro .range.above{color:var(--emp);}
.ro .range.within{color:var(--ink-dim);}

.foot{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:var(--ink-dim);line-height:1.7;letter-spacing:0.02em;}
.foot .src{max-width:680px;}
.wordmark{font-weight:600;color:var(--ink);letter-spacing:0.16em;text-transform:uppercase;font-size:11px;white-space:nowrap;}
.wordmark span{color:var(--ink-dim);font-weight:400;}

@media(max-width:760px){
  .sheet{padding:18px 14px 40px;}
  .readouts{grid-template-columns:repeat(2,1fr);}
  .ft-grid{grid-template-columns:repeat(2,1fr);}
  .ft-cell:nth-child(2n){border-right:none;}
  .title-block h1{font-size:24px;}
  .masthead{align-items:flex-start;gap:18px;}
  .stamp{text-align:left;font-size:10.5px;}
  .subhead{font-size:11.5px;}
  .legend{gap:12px;font-size:10px;}
  .topnav{font-size:10px;letter-spacing:0.1em;flex-wrap:wrap;gap:8px;}
}
@media(max-width:480px){
  .sheet{padding:14px 10px 32px;}
  .readouts{grid-template-columns:1fr;}
  .title-block h1{font-size:21px;line-height:1.1;}
  .kicker{font-size:10px;letter-spacing:0.24em;}
  .ft-grid{grid-template-columns:1fr;}
  .ft-cell{border-right:none !important;}
  .frame{padding:14px 8px 18px;}
  .frame::before{font-size:8.5px;letter-spacing:0.08em;}
  /* Per-detail-page legend can otherwise wrap into many short lines. */
  .legend{font-size:9.5px;gap:8px;}
  .legend .legnote{display:none;}
  /* SVG schematics use viewBox so they scale, but tiny text inside loses
     legibility on phones. Keep the readouts (which DO render mobile-friendly)
     as the primary surface and let the schematic shrink. */
  .subhead{font-size:11px;line-height:1.55;}
}