/* EDITED IN PLACE (10/11, docs/GRADES-ON-PAGES.md: generators are retired for built pages). This file is no longer
   generated: mocks/src/climate/make_css.py made its first build and now refuses to overwrite it without --force.
   Edit the rules here; tools/css_lint.py guards them (a rule two pages share goes in core.css). The note below is history. */
/* TG climate.css: Climate page only (merged direction, 10/8). Generated by mocks/src/climate/make_css.py:
   rules the live TownTapestry Climate page HTML uses (tools/css_audit.py, no app.js strings, on the Oct 9 renders of Exeter, Phoenix,
   Breckenridge, New York City), minus selectors core.css already has, plus the page-local additions at the end. */
.clm-hero .hb-in > p{color:var(--ink-2);margin:12px 0 0;font-size:16px;max-width:640px}
.clm-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.clm-kpis .kpi{display:block;transition:border-color .15s}
.clm-kpis .kpi:hover{border-color:#c9ced7}
.clm-cal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.clm-mo{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 8px 10px;border-radius:var(--r);background:#fff;border:1px solid var(--line);min-height:132px;overflow:hidden}
.clm-mo::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--mc)}
.clm-mo::after{content:"";position:absolute;inset:0;background:var(--mc);opacity:.07;pointer-events:none}
.clm-mo.now{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.clm-mo .mn{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.clm-mo .mn em{font-style:normal;color:var(--accent-ink);text-transform:none;letter-spacing:0}
.clm-mo b{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.clm-mo small{font-size:13px;color:var(--muted)}
.clm-mo .tg{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:8px;position:relative;z-index:1}
.clm-mo .tg i{font-style:normal;font-size:10.5px;font-weight:700;padding:2px 5px;border-radius:5px;line-height:1.25;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.clm-mo .tg i.nice{background:var(--accent-tint);border-color:transparent;color:var(--accent-ink)}
.clm-mo .tg i.snow{background:#efeafb;border-color:transparent;color:#5341a8}
.clm-mo .tg i.frost{background:#e8f0fa;border-color:transparent;color:#2f5f9f}
.clm-mo .tg i.heat{background:#fdece2;border-color:transparent;color:#b4501f}
.clm-mo .tg i.wet{background:#e6f1f9;border-color:transparent;color:#1f5f8f}
.clm-seasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.clm-season{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:14px;border:1px solid var(--line);background:#fff;border-top:4px solid var(--sc)}
.clm-season .ic{font-size:20px}
.clm-season > b{font-size:15px;margin-top:4px}
.clm-season .hl{font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--sc)}
.clm-season .hl small{font-size:15px;color:var(--muted);font-weight:600}
.clm-season > small{font-size:12.5px;color:var(--muted)}
.clm-range{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:18px 16px 10px 44px;background:#fff}
.card .clm-range{border:0;padding:6px 0 0 34px;margin:0}
.clm-range .pl{position:relative;height:250px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.clm-range .gl{position:absolute;left:0;right:0;border-top:1px solid var(--hair)}
.clm-range .gl span{position:absolute;left:-40px;top:-8px;font-size:11px;color:var(--faint);width:32px;text-align:right}
.clm-range .gl.frz{border-top:1.5px dashed #8fb1da}
.clm-range .gl.frz span{color:#3f6fb5;font-weight:600}
.clm-range .c{position:relative}
.clm-range .c i{position:absolute;left:18%;right:18%;border-radius:8px;min-height:4px}
.clm-range .c em{position:absolute;left:0;right:0;text-align:center;font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.clm-range .c em.b{color:var(--muted);font-weight:500}
.clm-range .c.now i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.clm-range .c u{position:absolute;left:10%;right:10%;height:3px;background:var(--ink);border-radius:2px;margin-bottom:-1px}
.clm-range .ax{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
.clm-range .ax .now{color:var(--ink);font-weight:700}
.clm-best{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;font-size:14px}
.clm-best b{margin-right:4px}
.clm-best span{padding:3px 10px;border-radius:999px;background:var(--accent-tint);color:var(--accent-ink);font-weight:600;font-size:13px}
.clm-best em{font-style:normal;color:var(--muted);font-size:13px;margin-left:4px}
.clm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.clm-stat{display:flex;flex-direction:column;gap:2px}
.clm-stat .ic{font-size:20px}
.clm-stat > b{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-top:4px}
.clm-stat .d{font-size:13.5px;color:var(--ink-2)}
.clm-stat .r{font-size:12.5px;color:var(--accent-ink);font-weight:600;margin-top:4px}
.clm-stat .vs{font-size:12px;color:var(--muted)}
.clm-meter{display:flex;gap:3px;margin-top:8px}
.clm-meter i{width:22px;height:6px;border-radius:3px;background:#e8ebef}
.clm-meter i.on{background:var(--mc)}
.clm-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.clm-two h3{font-size:15px}
.clm-two .muted{font-size:12.5px;margin:2px 0 10px}
.clm-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;height:130px;align-items:end;padding-top:18px}
.clm-bars .c{position:relative;height:100%}
.clm-bars .c i{position:absolute;left:0;right:0;bottom:0;border-radius:5px 5px 2px 2px;background:var(--bc);min-height:2px;opacity:.85}
.clm-bars .c:hover i{opacity:1}
.clm-bars .c em{position:absolute;left:-10px;right:-10px;text-align:center;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-2)}
.clm-bax{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin-top:6px;font-size:11px;color:var(--faint);text-align:center}
.clm-nosnow{color:var(--muted);font-size:14px;padding:30px 0}
.clm-ribbon{margin-bottom:12px;padding:40px 18px 14px}
.clm-ribbon .tr{position:relative;height:30px;border-radius:8px;background:linear-gradient(90deg,#dbe7f3,#e8f0fa)}
.clm-ribbon .grow{position:absolute;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,#9fd8b5,var(--accent) 50%,#9fd8b5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.clm-ribbon .grow span{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.2);padding:0 6px}
.clm-ribbon .grow em{font-style:normal;font-weight:600}
.clm-ribbon .pin{position:absolute;top:-28px;transform:translateX(-50%);font-size:12.5px;font-weight:700;white-space:nowrap}
.clm-ribbon .mk{display:grid;grid-template-columns:repeat(12,1fr);margin-top:6px;font-size:11px;color:var(--faint);text-align:center}
.clm-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.clm-plan .card{display:flex;flex-direction:column;gap:4px}
.clm-plan .ic{font-size:22px}
.clm-plan b{font-size:16px;margin-top:4px}
.clm-plan p{margin:2px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.clm-plan .link{font-size:13.5px;margin-top:auto;padding-top:8px}
.clm-hc{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center}
.clm-hc svg{width:160px;height:160px}
.clm-hc .n{font:800 28px var(--sans);fill:var(--ink)}
.clm-hc .l{font:600 12px var(--sans);fill:var(--muted)}
.clm-hc .rows{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.clm-hc .rows small{display:block;font-size:12.5px;color:var(--muted);margin-left:20px}
.clm-hc .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.clm-hc .muted{font-size:12.5px;margin:0}
.clm-nb{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.clm-leg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:8px}
.clm-leg i{width:140px;height:10px;border-radius:5px}
.clm-leg em{font-style:normal;margin-left:8px}
.clm-list .it{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.clm-list .it:last-child{border-bottom:0}
.clm-list .it.me{font-weight:700}
.clm-list .it i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:-1px;border:1px solid rgba(15,22,35,.1)}
.clm-list .it a:hover{color:var(--accent-ink)}
.clm-list .it small{color:var(--muted);font-weight:500;min-width:42px;display:inline-block;text-align:right}
.clm-cmp{display:flex;flex-direction:column}
.clm-cmp .row{display:grid;grid-template-columns:170px minmax(0,1fr) 220px;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.clm-cmp .row:last-child{border-bottom:0}
.clm-cmp .k b{display:block;font-size:14.5px}
.clm-cmp .k small{font-size:12.5px;color:var(--muted)}
.clm-cmp .strip{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#eef0f3,var(--c1))}
.clm-cmp .strip .mid{position:absolute;left:50%;top:-3px;width:1px;height:16px;background:#c3c9d2}
.clm-cmp .strip .me{position:absolute;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.clm-cmp .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:5px}
.clm-cmp .v{font-size:13.5px;color:var(--muted)}
.clm-cmp .v b{color:var(--ink)}
.clm-cmp .v small{display:block;font-size:12px}
.clm-then{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:12px;margin-bottom:12px}
.clm-then .big{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#fdece2,#fff 80%);border-color:#f5d9c6}
.clm-then .big b{font-size:44px;font-weight:800;letter-spacing:-.04em;color:#c0541f;line-height:1}
.clm-then .big small{font-size:12.5px;color:var(--muted);margin-top:6px}
.clm-then .big p{margin:8px 0 0;font-size:13px}
.clm-then .s4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.clm-then .s4 .card{display:flex;flex-direction:column;gap:2px}
.clm-then .s4 small{font-size:12.5px;color:var(--muted);font-weight:600}
.clm-then .s4 b{font-size:24px;font-weight:700;letter-spacing:-.03em;color:#c0541f}
.clm-then .s4 .muted{font-size:12px}
.clm-delta h3{font-size:15px;margin-bottom:6px}
.clm-delta .pl{position:relative;height:150px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;padding-top:16px}
.clm-delta .c{position:relative}
.clm-delta .c i{position:absolute;left:12%;right:12%;border-radius:4px;background:#e07a3f}
.clm-delta .c em{position:absolute;left:-8px;right:-8px;text-align:center;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-2)}
.clm-tab tr.now td{background:var(--accent-tint)}
.clm-tab tr.yr td{font-weight:700;border-top:1px solid var(--line)}
.clm-sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.clm-faq{display:flex;flex-direction:column;gap:8px}
.clm-faq details{border:1px solid var(--line);border-radius:var(--r);padding:0 16px}
.clm-faq summary{cursor:pointer;font-weight:600;padding:14px 0;font-size:15px}
.clm-faq p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px}
@media (max-width:1100px){
  .clm-nb{grid-template-columns:1fr}
  .clm-cal{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:900px){
  .clm-then{grid-template-columns:1fr}
  .clm-cmp .row{grid-template-columns:1fr;gap:6px}
  .clm-seasons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .clm-cal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clm-mo{min-height:112px}
  .clm-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .clm-kpis .kpi{padding:12px}
  .clm-kpis .kpi .v{font-size:22px}
  .clm-range{padding:14px 10px 8px 34px}
  .clm-range .pl{height:200px;gap:3px}
  .clm-range .ax{gap:3px;font-size:10.5px}
  .clm-range .c em{font-size:9.5px}
  .clm-range .c i{left:10%;right:10%}
  .clm-then .s4{grid-template-columns:1fr 1fr}
  .clm-hc{grid-template-columns:1fr;justify-items:center}
  .clm-ribbon .grow span{font-size:11.5px}
  .clm-ribbon .grow em{display:none}
  .clm-delta .c em{display:none}
}

/* ===== Page-local additions for the merged mocks (TG) ===== */
/* hero: the national frame with the state rank beside it (one line per lead measure) */
.clm-frame{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.clm-fr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.clm-fr .us{font-size:15px;font-weight:650;color:var(--ink)}
.clm-fr .clm-st{font-size:13px;color:var(--muted)}
.clm-fr .rk{white-space:nowrap;max-width:100%}
.clm-frame > .link{font-size:13.5px;margin-top:2px}
/* key numbers: U.S. line, then the state rank */
.clm-kpis .kpi .s2{margin-top:2px;color:var(--faint)}
/* what stands out: the state rank as context inside the card */
.hz-trait small .clm-tst{display:block;margin-top:4px;font-style:normal;color:var(--faint)}
/* frost & heat: four counts, the zone card, the no-ribbon cases, the station note */
.clm-stats.clm-stats4{grid-template-columns:repeat(4,minmax(0,1fr))}
.clm-zone{display:flex;gap:16px;align-items:center;margin-top:14px}
.clm-zone .clm-zb{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:14px;background:var(--accent-tint);color:var(--accent-ink)}
.clm-zone .clm-zb b{font-size:28px;line-height:1}
.clm-zone .clm-zb small{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.clm-zone p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.clm-nofrost{margin-bottom:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.clm-nofrost b{color:var(--ink)}
.clm-note{display:block}
.clm-note b{white-space:normal}
/* next door: the big city's stations, similar climates elsewhere */
.clm-city,.clm-sim{margin-top:16px}
.clm-city h3,.clm-sim h3{margin:0 0 4px}
.clm-where{display:block;font-size:12px;color:var(--muted);font-weight:400}
.clm-sim tr.me td{font-weight:650;background:var(--surface)}
.clm-sim .hz-tw,.clm-city .hz-tw{overflow-x:auto}
/* sources: town-specific list; the method is one link */
.clm-src ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.clm-src li b{color:var(--ink)}
/* neighbors talk: one card once the vote is gone */
.talk-one{display:block}
@media (max-width:900px){.clm-stats.clm-stats4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.clm-zone{align-items:flex-start}.clm-zone .clm-zb{width:64px;height:64px}.clm-zone .clm-zb b{font-size:22px}}
/* Ported from TownTapestry 10/11 (css audit: used on this page, no rule here). */
.clm-delta .c i.neg{background:#4f7fbf}
.clm-delta.neg .pl{background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}