/* After the Fed — data tool styles. Builds on /assets/css/site.css variables. */
.lab-banner { font-family: var(--sans); font-size: .85rem; background: #f5f7f6; border-left: 5px solid var(--stamp); padding: .55rem .8rem; margin: 0 0 .8rem; }
.lab-nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--sans); font-size: .9rem; margin: 0 0 1.6rem; }
.lab-nav a { color: var(--ink); }
.lab-wide { max-width: var(--wide); }
.lab-new { background: #fff7c9; padding: .4rem .6rem; }

.chart-card { border-top: 2px solid var(--forest); padding-top: .4rem; margin: 2.2rem 0 2.6rem; }
.chart-card h2 { margin-top: .6rem; }
.chart-sub { font-family: var(--sans); font-size: .95rem; font-weight: 580; color: var(--muted); margin: 1.2rem 0 .3rem; }
.chart-now { font-family: var(--sans); margin: 0 0 .6rem; }
.chart-now strong { font-size: 1.5rem; color: var(--forest); font-variant-numeric: tabular-nums; }
.chart { position: relative; width: 100%; min-height: 240px; }
.chart-cols { min-height: 200px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--sans); font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis0 { stroke: var(--ink); stroke-width: 1; }
.chart .line-a { fill: none; stroke: var(--forest); stroke-width: 2.25; stroke-linejoin: round; }
.chart .line-b { fill: none; stroke: var(--stamp); stroke-width: 2; stroke-linejoin: round; }
.chart .band { fill: var(--forest); opacity: .18; }
.chart .bar-up { fill: var(--stamp); }
.chart .bar-down { fill: var(--forest); }
.chart .bar-zero { fill: var(--muted); }
.chart .bar-before { fill: #8fa79a; }
.chart .bar-after { fill: var(--forest); }
.chart .val { font-size: 13px; font-weight: 700; fill: var(--ink); }
.chart .lbl { font-size: 12px; fill: var(--muted); }
.chart .cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot-a { fill: var(--forest); }
.chart .dot-b { fill: var(--stamp); }
.chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: .8rem; padding: .3rem .5rem; white-space: nowrap; transform: translateX(-50%); }
.chart-tip[hidden] { display: none; }
.chart-range { display: flex; gap: .4rem; margin: 0 0 .5rem; font-family: var(--sans); }
.chart-range button, .btn-quiet { font-family: var(--sans); font-size: .9rem; background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: .25rem .7rem; cursor: pointer; border-radius: 0; }
.chart-range button[aria-pressed="true"] { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.legend { font-family: var(--sans); font-size: .88rem; color: var(--muted); }
.sw { display: inline-block; width: 1.2rem; height: .22rem; vertical-align: middle; margin: 0 .3rem 0 .6rem; }
.sw-a { background: var(--forest); } .sw-b { background: var(--stamp); }

.city-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-family: var(--sans); margin: 1rem 0 .3rem; }
.city-pick label { font-weight: 700; }
.city-pick select { font-family: var(--sans); font-size: 1.1rem; padding: .45rem .55rem; border: 2px solid var(--forest); background: #ffffff; color: var(--ink); border-radius: 0; min-width: 16rem; max-width: 100%; }
.geo-note { margin-bottom: 1.4rem; }
.city-tool { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.city-out .big { font-family: var(--sans); font-size: 2.6rem; font-weight: 700; color: var(--stamp); font-variant-numeric: tabular-nums; line-height: 1.05; margin: 0 0 .3rem; }
.city-out .label { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin: 0; }
.city-explain { font-family: var(--sans); font-size: .95rem; }
.city-inputs { margin-top: 0; background: var(--paper-2); padding: 1rem 1.1rem; max-width: none; }
.city-inputs h2 { margin: 0; font-family: var(--sans); font-size: 1.05rem; }
.chart-ba { min-height: 230px; max-width: 30rem; }

.keynums { background: var(--paper-2); border-top: 4px solid var(--forest); padding: 1rem 1.2rem .6rem; margin: 2rem 0; max-width: var(--wide); }
.keynums h2 { margin: 0 0 .2rem; font-family: var(--sans); font-size: 1.15rem; }
.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .9rem 1.4rem; margin: .8rem 0; }
.kn-grid div { border-top: 1px solid var(--rule); padding-top: .5rem; }
.kn-grid dt { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.kn-grid dd { margin: 0; font-family: var(--sans); font-size: 1.45rem; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }
.kn-grid dd.kn-sub { font-size: .82rem; font-weight: 450; color: var(--ink); }
.kn-grid dd.kn-small { font-size: 1rem; }
.cite-line { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; background: var(--wash); padding: .6rem .8rem; display: inline-block; }

@media (max-width: 720px) {
  .city-tool { grid-template-columns: 1fr; gap: 1.2rem; }
  .city-out .big { font-size: 2.1rem; }
  .chart { min-height: 200px; }
  .city-pick select { min-width: 0; width: 100%; }
}

[hidden] { display: none !important; }
.hbars { list-style: none; padding: 0; margin: .6rem 0 1.4rem; font-family: var(--sans); font-size: .9rem; }
.hbars li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 5.5rem; align-items: center; gap: .6rem; padding: .18rem 0; margin: 0; }
.hbars .hb-track { height: .95rem; background: transparent; }
.hbars .hb-fill { display: block; height: 100%; width: 0; background: var(--stamp); transition: width 1s cubic-bezier(.2,.7,.2,1); }
.hbars .hb-fill.neg { background: var(--forest); }
.hbars li.is-picked { font-weight: 700; }
.hbars li.is-picked .hb-fill { background: var(--ink); }
.hbars .hb-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 720px) { .hbars li { grid-template-columns: 7.5rem minmax(0, 1fr) 4.6rem; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .hbars .hb-fill { transition: none; } }

/* ===== 2026-10-29 design refresh ===== */
.lab-banner { background: var(--paper-2); border-left-color: var(--up); }
.chart-card { border-top: 2px solid var(--ink); }
.chart-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.chart-now strong { color: var(--ink); }
.chart .grid { stroke: #e6e6e6; }
.chart .line-a { stroke: var(--accent); }
.chart .line-b { stroke: var(--up); }
.chart .band { fill: var(--accent); opacity: .12; }
.chart .bar-up { fill: var(--up); }
.chart .bar-down { fill: var(--down); }
.chart .bar-before { fill: #a9b8cc; }
.chart .bar-after { fill: var(--accent); }
.chart .dot-a { fill: var(--accent); } .chart .dot-b { fill: var(--up); }
.sw-a { background: var(--accent); } .sw-b { background: var(--up); }
.chart-range button, .btn-quiet { border-color: #8a8a8a; border-radius: 2px; font-size: .82rem; }
.chart-range button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.city-pick select { border: 1px solid var(--ink); border-radius: 2px; }
.city-out .big { color: var(--up); }
.city-inputs { background: var(--paper-2); border-top: 2px solid var(--ink); }
.keynums { background: none; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); padding: .8rem 0 .4rem; }
.keynums h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.kn-grid { gap: 0 1.6rem; }
.kn-grid div { border-top: 1px solid var(--rule); padding: .65rem 0 .8rem; }
.kn-grid dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kn-grid dd { color: var(--ink); font-size: 1.7rem; letter-spacing: -.01em; }
.kn-grid dd.kn-sub { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.cite-line { background: var(--wash); border-left: 3px solid var(--accent); }
.hbars .hb-fill { background: var(--up); } .hbars .hb-fill.neg { background: var(--down); }