:root{--ink:#243337;--muted:#667774;--line:#dce7e4;--soft:#f6faf9;--accent:#2f9185;--accent2:#247d73;--warn:#8a6542;--bg:#f4f6f4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;line-height:1.7}
a{color:var(--accent2)}button,select,input{font:inherit}.page{max-width:1320px;margin:auto;padding:0 40px 72px}.topnav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:900;color:var(--ink);font-size:20px}.navlinks{display:flex;gap:18px;flex-wrap:wrap}.navlinks a{text-decoration:none;color:#4f6561;font-weight:750;font-size:14px}.navlinks a[aria-current="page"]{color:var(--accent2)}
.hero{padding:66px 0 32px}.kicker{margin:0 0 8px;color:var(--accent2);font-size:12px;font-weight:900;letter-spacing:.12em}.hero h1{margin:0;font-size:clamp(36px,5vw,56px);line-height:1.18;letter-spacing:-.035em}.hero .lead{max-width:720px;margin:18px 0 0;color:var(--muted);font-size:17px}.heroMeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.pill{display:inline-flex;align-items:center;min-height:34px;padding:5px 11px;border-radius:999px;background:#eef7f5;color:#376b64;font-size:12px;font-weight:850}
.searchPanel,.comparePanel{margin-top:28px;padding:26px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(38,75,69,.05)}.detailSection{margin-top:0;padding:32px 0;border:0;border-top:1px solid var(--line);background:transparent}.searchPanel h2,.detailSection h2{margin:0 0 6px;font-size:25px}.sub{margin:0;color:var(--muted)}
.directSearch{margin-top:18px}.directSearch label{display:block;margin-bottom:6px;font-size:12px;font-weight:850;color:#57716c}.directSearch input{width:100%;min-height:50px;padding:11px 13px;border:1px solid #cbdad6;border-radius:12px;background:#fff;color:var(--ink)}.searchStatus{min-height:20px;margin:5px 0 0;color:var(--muted);font-size:12px}.controls{display:grid;grid-template-columns:1fr 1.35fr auto auto;gap:10px;margin-top:12px;align-items:end}.field label{display:block;margin-bottom:6px;font-size:12px;font-weight:850;color:#57716c}.field select,.field input{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cbdad6;border-radius:12px;background:#fff;color:var(--ink)}.btn{min-height:48px;padding:10px 16px;border-radius:12px;border:1px solid #b8d5cf;background:#fff;color:var(--accent2);font-weight:900;cursor:pointer}.btnPrimary{border-color:var(--accent);background:var(--accent);color:#fff}.btn:disabled{opacity:.45;cursor:not-allowed}
.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:38px 0 16px}.sectionHead h2{margin:0;font-size:26px}.sectionHead p{margin:0;color:var(--muted);font-size:13px}.sortField{min-width:220px}.sortField label{display:block;margin-bottom:5px;color:#57716c;font-size:11px;font-weight:850}.sortField select{width:100%;min-height:42px;padding:8px 10px;border:1px solid #cbdad6;border-radius:11px;background:#fff;color:var(--ink)}.municipalityGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}@media(min-width:1240px){.municipalityGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}.muniCard{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}.muniCard h3{margin:0;font-size:20px}.muniCard .meta{margin:3px 0 14px;color:var(--muted);font-size:12px}.miniMetrics{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:12px 0}.miniMetric{padding:9px 10px;border-radius:11px;background:var(--soft);font-size:12px}.miniMetric strong{display:block;font-size:17px}.cardActions{display:flex;gap:8px;margin-top:14px}.cardActions .btn{flex:1;min-height:42px;padding:8px 10px;font-size:13px}
.empty{padding:34px 20px;text-align:center;border:1px dashed #cbdad6;border-radius:18px;color:var(--muted);background:#fff}
.compareBar{position:sticky;bottom:14px;z-index:20;margin-top:24px;padding:12px 14px;border:1px solid #c7dcd7;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 14px 30px rgba(32,69,63,.12);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;gap:12px}.compareChips{display:flex;gap:7px;flex-wrap:wrap}.compareChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef7f5;font-size:12px;font-weight:800}.compareChip button{border:0;background:transparent;cursor:pointer;color:#567}.compareCount{display:inline-flex;align-items:center;padding:6px 3px;color:#72827f;font-size:11px;font-weight:850}
.breadcrumb{padding-top:22px;color:var(--muted);font-size:13px}.detailHero{padding:44px 0 28px}.detailHero h1{margin:0;font-size:clamp(34px,6vw,58px);line-height:1.15}.detailLead{max-width:760px;color:var(--muted);font-size:17px}.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.metricGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.metricRow{padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:#fff}.metricTop{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.metricTop b{font-size:15px}.metricTop strong{font-size:24px}.metricScore{display:flex;align-items:baseline;gap:8px}.metricScore span{font-size:11px;color:var(--muted);font-weight:800}.bar{position:relative;height:9px;margin-top:9px;border-radius:999px;background:#e8efed;overflow:hidden}.bar:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(37,60,58,.28)}.bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}.metricRow small{display:block;margin-top:7px;color:var(--muted)}
.proconGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.procon{padding:18px;border-radius:16px}.procon.good{background:#f0f8f6}.procon.caution{background:#fbf7f1}.procon h3{margin:0 0 8px;font-size:18px}.procon ul{margin:0;padding-left:20px}.procon li+li{margin-top:7px}
.factGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.fact{padding:16px;border-radius:14px;background:var(--soft)}.fact small{display:block;color:var(--muted)}.fact strong{font-size:20px}
.compareNext .btn{display:inline-flex;margin-top:16px;text-decoration:none}.stationPicks{margin-top:18px;padding:16px;border-radius:16px;background:#f4f9f7}.stationPickLabel{margin:0 0 10px;color:#55706a;font-size:12px;font-weight:900}.stationPickGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.stationPickGrid:has(.stationPick:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.stationPick{display:block;padding:13px 14px;border:1px solid #d6e5e1;border-radius:13px;background:#fff;text-decoration:none;color:var(--ink)}.stationPick span{display:block;color:var(--muted);font-size:11px}.stationPick strong{display:block;margin-top:2px;font-size:17px}.stationPick small{display:block;margin-top:5px;color:var(--accent2);font-weight:850}.stationList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.stationItem{display:flex;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:#fff}.stationItem span{color:var(--muted);font-size:12px}.stationItem strong{display:block}.stationEmpty{color:var(--muted)}
.note{margin-top:14px;padding:13px 15px;border-radius:12px;background:#f6f8f7;color:#61706d;font-size:12px}.dataNote{margin-top:18px;padding:18px 20px;border:1px solid #dce7e4;border-radius:16px;background:#f7faf9;color:#5e706c;font-size:12px;line-height:1.75}.dataNote strong{display:block;margin-bottom:4px;color:#405b56;font-size:13px}.dataNote p{margin:0}.dataNote>small{display:block;margin-top:7px;color:#7a8986}
dialog{width:min(1120px,calc(100vw - 32px));max-height:82vh;border:0;border-radius:20px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(20,35,32,.4)}.modalInner{padding:22px}.modalHead{display:flex;justify-content:space-between;gap:16px;align-items:center}.modalHead h2{margin:0}.iconBtn{border:0;background:#eef4f2;border-radius:10px;min-width:40px;min-height:40px;cursor:pointer}.compareTableWrap{overflow:auto;margin-top:16px}.compareInsights{margin:0 0 16px;padding:15px 16px;border-radius:14px;background:#f4f9f7}.compareInsights>strong{display:block;margin-bottom:8px;font-size:14px}.compareInsights ul{list-style:none;margin:0;padding:0}.compareInsights li{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid #deebe7}.compareInsights li:first-child{border-top:0}.compareInsights li b{font-size:12px}.compareInsights li span{text-align:right;color:var(--muted);font-size:12px}.compareTable{width:100%;border-collapse:collapse;min-width:640px}.compareTable th,.compareTable td{padding:12px;border-bottom:1px solid var(--line);text-align:right}.compareTable th:first-child,.compareTable td:first-child{text-align:left}.compareTable thead th{position:sticky;top:0;background:#fff}.compareMobile{display:none}.compareMobileCard{padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}.compareMobileCard h3{margin:0;font-size:19px}.compareMobileCard h3 a{text-decoration:none}.compareMobileCard>p{margin:1px 0 12px;color:var(--muted);font-size:12px}.compareMobileCard dl{margin:0}.compareMobileCard dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #edf2f0}.compareMobileCard dt{color:var(--muted);font-size:12px}.compareMobileCard dd{margin:0;font-weight:850}
footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:800px){.compareInsights li{display:block}.compareInsights li span{display:block;margin-top:2px;text-align:left}.sectionHead{align-items:stretch;flex-direction:column}.sortField{min-width:0}.compareTable{display:none}.compareMobile{display:grid;gap:10px}.compareTableWrap{overflow:visible}.page{padding:0 16px 46px}.topnav{align-items:flex-start}.navlinks{gap:10px 14px}.hero{padding-top:42px}.controls{grid-template-columns:1fr}.municipalityGrid{grid-template-columns:1fr}.metricGrid,.proconGrid,.stationList,.stationPickGrid{grid-template-columns:1fr}.factGrid{grid-template-columns:repeat(2,1fr)}.compareBar{bottom:8px;align-items:flex-end}.compareChips{max-width:70%}}
@media(max-width:520px){.navlinks{font-size:12px}.searchPanel{padding:19px 15px;border-radius:18px}.detailSection{padding:26px 0}.hero h1,.detailHero h1{font-size:36px}.factGrid{grid-template-columns:1fr 1fr}.compareBar{display:block}.compareChips{max-width:none;margin-bottom:9px}.compareBar .btn{width:100%}}

.sectionEyebrow{margin-bottom:5px;color:var(--accent2);font-size:11px;font-weight:900;letter-spacing:.1em}.quickRead{margin-top:0}.quickSummary{max-width:820px;margin:10px 0 0;padding:14px 16px;border-left:3px solid var(--accent);background:#f7faf9;color:#425a56;font-size:15px}.localVariation .textLink{display:inline-block;margin-top:15px;font-weight:850;text-decoration:none}.districtGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.districtCard{padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}.districtCard small{display:block;color:var(--accent2);font-weight:900}.districtCard strong{display:block;margin-top:2px}.districtCard p{margin:6px 0 0;color:var(--muted);font-size:13px}.districtCard:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:800px){.districtGrid{grid-template-columns:1fr}.districtCard:last-child:nth-child(odd){grid-column:auto}}

.commuteModes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:18px}.commuteRow{padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:#fff}.commuteHead{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.commuteHead span{font-size:13px;font-weight:800}.commuteHead strong{font-size:18px}.commuteBar{height:8px;margin-top:8px;border-radius:999px;background:#e8efed;overflow:hidden}.commuteBar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.commuteNote{margin:10px 0 0;color:var(--muted);font-size:11px}
@media(max-width:800px){.commuteModes{grid-template-columns:1fr}}

.climateTraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:18px}.climateTrait{padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff}.climateTraitHead{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.climateTraitHead>span{font-size:13px;font-weight:850}.climateTraitHead>div{display:flex;align-items:baseline;gap:7px}.climateTraitHead small{color:var(--muted);font-size:10px;font-weight:800}.climateTraitHead strong{font-size:18px}.climateTraitBar{height:8px;margin-top:8px;border-radius:999px;background:#e8efed;overflow:hidden}.climateTraitBar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
@media(max-width:800px){.climateTraits{grid-template-columns:1fr}}

@media(max-width:800px){.page{padding-left:16px;padding-right:16px}.topnav{align-items:flex-start}.navlinks{gap:10px 14px}.navlinks a{font-size:13px}}

/* 2026-09-23 mobile navigation: give the brand and links separate rows. */
@media(max-width:800px){
  .topnav{flex-direction:column;align-items:stretch;gap:7px;padding:14px 0 9px}
  .brand{display:inline-flex;align-items:center;align-self:flex-start;min-height:40px}
  .navlinks{width:100%;gap:2px 14px}
  .navlinks a{display:inline-flex;align-items:center;min-height:38px;white-space:nowrap}
}


/* 2026-09-23 municipality UX refresh: conclusion → meaning → evidence → living area. */
.detailHero{padding:54px 0 34px}
.detailHero h1{max-width:980px;letter-spacing:-.035em}
.detailLead{max-width:820px;margin:16px 0 0;font-size:18px;line-height:1.85}
.detailJump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.detailJump a{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid #d1e2de;border-radius:999px;background:#f8fbfa;color:#356b64;text-decoration:none;font-size:12px;font-weight:850}
.detailJump a:after{content:"↓";margin-left:7px;color:#72a198}
.detailJump a:hover{background:#eef7f5;border-color:#b8d6cf}
.quickRead{padding-top:36px}
.quickRead h2{max-width:780px;font-size:clamp(27px,3.3vw,38px);line-height:1.35;letter-spacing:-.025em}
.quickSummary{max-width:860px;margin:13px 0 0;padding:0 0 0 16px;border-left:3px solid var(--accent);background:transparent;color:#3e5752;font-size:17px;line-height:1.85}
.proconGrid{gap:26px;margin-top:25px}
.procon{padding:20px 0 0;border-radius:0;border-top:1px solid var(--line);background:transparent!important}
.procon h3{font-size:16px;color:#385b55}
.procon.good h3:before{content:"＋";display:inline-grid;place-items:center;width:25px;height:25px;margin-right:8px;border-radius:50%;background:#e9f6f2;color:#2c7d72;font-size:14px}
.procon.caution h3:before{content:"!";display:inline-grid;place-items:center;width:25px;height:25px;margin-right:8px;border-radius:50%;background:#fff4e8;color:#8a6542;font-size:13px}
.procon ul{padding-left:0;list-style:none}
.procon li{position:relative;padding:12px 0 12px 19px;border-top:1px solid #edf1f0;color:#435955;line-height:1.75}
.procon li:first-child{border-top:0}
.procon li:before{content:"";position:absolute;left:1px;top:23px;width:6px;height:6px;border-radius:50%;background:#7fb8ae}
.procon.caution li:before{background:#c9a77d}
#metricsSection .sub{max-width:760px;line-height:1.75}
.metricGrid{gap:12px 24px}
.metricRow{padding:15px 10px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.metricTop strong{font-variant-numeric:tabular-nums}
.metricRow small{line-height:1.65}
#factsSection .factGrid{max-width:980px}
#factsSection .fact{background:#f7faf9;border:1px solid #e5ecea}
#stationSection{scroll-margin-top:18px}
#stationSection>h2{font-size:clamp(27px,3vw,36px);letter-spacing:-.02em}
#stationSection>.sub{max-width:760px;line-height:1.75}
.stationPicks{padding:20px;background:#f4f9f7;border:1px solid #dfebe7}
.stationPick{transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.stationPick:hover{transform:translateY(-1px);border-color:#a9cec6;box-shadow:0 8px 20px rgba(38,75,69,.06)}
@media(max-width:800px){
  .detailHero{padding:38px 0 28px}
  .detailLead{font-size:16px}
  .detailJump{display:grid;grid-template-columns:1fr}
  .detailJump a{justify-content:space-between;min-height:46px;border-radius:12px}
  .quickRead h2,#stationSection>h2{font-size:28px}
  .quickSummary{font-size:16px;padding-left:13px}
  .proconGrid{gap:18px}
  .procon{padding-top:16px}
  .procon li{font-size:15px;padding-top:11px;padding-bottom:11px}
  .metricGrid{gap:0}
  .metricRow{padding:16px 10px}
}


/* 2026-09-23 municipality comparison: differences first, mobile metric-by-metric. */
.compareInsights{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--line);background:transparent;border-radius:0}
.compareInsights>strong{font-size:13px;color:#315b55}
.compareInsights li{align-items:baseline;padding:9px 0}
.compareInsights li b{font-size:13px}
.compareInsights li span{font-size:12px;line-height:1.6}
.compareMobileTitle{margin:0 0 10px;font-size:16px;color:#315b55}
.compareMobileMatrix{display:grid;grid-template-columns:68px repeat(var(--compare-count),minmax(0,1fr));border:1px solid #dce7e4;border-radius:13px;overflow:hidden;background:#fff}
.compareMobileCorner,.compareMobileHead,.compareMobileMetric,.compareMobileValue{min-width:0;padding:9px 6px;border-right:1px solid #e6ecea;border-bottom:1px solid #e6ecea}
.compareMobileCorner{display:flex;align-items:flex-end;background:#f5f8f7;color:#6a7a77;font-size:10px}
.compareMobileHead{background:#f5f8f7;text-align:center}
.compareMobileHead strong{display:block;color:#294c46;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.compareMobileHead small{display:block;margin-top:3px;color:#75837f;font-size:9px}
.compareMobileMetric{display:flex;align-items:center;background:#fbfcfb;color:#536862;font-size:11px}
.compareMobileValue{display:flex;align-items:center;justify-content:center;text-align:center}
.compareMobileValue b{color:#314d48;font-size:18px;font-variant-numeric:tabular-nums}
.compareMobileValue.is-highest{background:#edf8f5;box-shadow:inset 0 -3px 0 var(--accent)}
.compareMobileValue.is-highest b{color:#24756b}
.compareMobileLinks{display:grid;gap:7px;margin-top:12px}
.compareMobileLinks a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:10px 12px;border:1px solid #dfe8e5;border-radius:11px;background:#fff;text-decoration:none}
.compareMobileLinks strong{color:#31544e;font-size:13px}
.compareMobileLinks span{color:var(--accent2);font-size:11px;font-weight:850}
.compareMobileNote{margin:11px 1px 0!important;color:#6b7a77!important;font-size:11px!important;line-height:1.65!important}
@media(max-width:800px){
  dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
  .modalInner{padding:14px 12px 18px}
  .modalHead{position:sticky;top:-14px;z-index:3;margin:-14px -12px 0;padding:12px;background:rgba(255,255,255,.97);border-bottom:1px solid #e5ebe9;backdrop-filter:blur(8px)}
  .modalHead h2{font-size:21px}
  .iconBtn{min-width:44px;min-height:44px}
  .compareInsights{margin-top:12px}
  .compareMobile{display:block}
}
@media(max-width:380px){
  .compareMobileMatrix{grid-template-columns:58px repeat(var(--compare-count),minmax(0,1fr))}
  .compareMobileHead strong{font-size:12px}
  .compareMobileMetric{font-size:10px}
  .compareMobileValue b{font-size:16px}
}


/* 2026-09-24 final readability floor for municipality evidence and comparison. */
.climateTraitHead small{font-size:11px}
@media(max-width:800px){
  .compareMobileCorner{font-size:11px}
  .compareMobileHead small{font-size:11px;line-height:1.35}
  .compareMobileMetric{font-size:11px}
  .compareMobileLinks span{font-size:12px}
  .compareMobileNote{font-size:12px!important}
}

/* 2026-09-24 system consistency pass: typography, controls, focus, spacing. */
:root{
  --focus-ring:rgba(47,145,133,.28);
  --control-radius:12px;
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:is(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
.btn,.directSearch input,.field select,.field input,.sortField select{border-radius:var(--control-radius)}
.cardActions .btn,.sortField select{min-height:44px}
@media(max-width:800px){
  .navlinks a{min-height:42px;display:inline-flex;align-items:center}
  .btn,.directSearch input,.field select,.field input,.sortField select{min-height:46px}
  .muniCard .meta,.searchStatus,.stationPickLabel,.stationItem span,.note,.dataNote{font-size:13px}
  .metricRow small,.commuteNote,.compareMobileNote{font-size:12px!important;line-height:1.65}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* 2026-09-24 municipality-to-station comparison bridge. */
.stationCompareLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:18px;
  padding:10px 15px;
  border:1px solid #b9d7d1;
  border-radius:12px;
  background:#fff;
  color:var(--accent2);
  font-size:14px;
  font-weight:900;
  text-decoration:none;
}
.stationCompareLink:hover{background:#f1f8f6;border-color:#8fc2b8}
.stationCompareLink:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media(max-width:800px){
  .stationCompareLink{width:100%;min-height:48px}
}

/* 2026-09-24 persistent municipality comparison tray. */
.compareBar{
  position:fixed;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:30;
  width:min(920px,calc(100% - 32px));
  margin:0;
  transform:translateX(-50%);
  box-shadow:0 14px 34px rgba(32,69,63,.15);
}
body.municipality-compare-visible .page,
body:has(.compareBar:not([hidden])) .page{
  padding-bottom:170px;
}
body:has(dialog[open]){
  overflow:hidden;
}
@media(max-width:800px){
  .compareBar{
    width:calc(100% - 20px);
    bottom:max(8px,env(safe-area-inset-bottom));
    padding:11px 12px;
  }
  body.municipality-compare-visible .page,
  body:has(.compareBar:not([hidden])) .page{
    padding-bottom:210px;
  }
}
@media(max-width:520px){
  .compareBar{
    width:calc(100% - 12px);
  }
  .compareBar .compareChips{
    max-height:72px;
    overflow:auto;
    overscroll-behavior:contain;
  }
}

body.comparison-dialog-open{overflow:hidden}

/* 2026-09-24 metric pictograms: quiet, scan-friendly labels. */
.metricLabel{display:inline-flex;align-items:center;gap:8px;min-width:0}
.metricIcon{width:18px;height:18px;flex:0 0 18px;color:#607b75}
.metricLabel>span{min-width:0}
@media(max-width:800px){.metricLabel{gap:7px}.metricIcon{width:16px;height:16px;flex-basis:16px}}


/* 2026-09-24 shared money context: prefecture-level household finance + prices. */
.moneySection{scroll-margin-top:18px}
.moneySection>.sub{max-width:820px;line-height:1.8}
.moneyGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.moneyCard{min-width:0;padding:17px;border:1px solid #e2e9e6;border-radius:15px;background:#fbfcfb}
.moneyCard small{display:block;color:var(--muted);font-size:12px;font-weight:850}
.moneyCard strong{display:block;margin-top:5px;color:#315b55;font-size:24px;line-height:1.25;font-variant-numeric:tabular-nums}
.moneyCard span{display:block;margin-top:6px;color:#587069;font-size:11px;font-weight:850}
.moneyCard em{display:block;margin-top:2px;color:#81908c;font-size:10px;font-style:normal}
.moneyNote{max-width:900px;margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.75}
@media(max-width:800px){
  .moneyGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moneyCard span,.moneyNote{font-size:12px}
  .moneyCard em{font-size:11px}
}
@media(max-width:380px){.moneyGrid{grid-template-columns:1fr}}


/* 2026-09-24 municipality list readability pass.
   Match the station hub pattern: one clear card link + one checkbox compare action. */
.compareBar[hidden]{display:none!important}
.municipalityGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.muniCard{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border:1px solid #d9e4e1;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 0 rgba(36,51,55,.02);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.muniCard:hover{border-color:#c2d8d3;box-shadow:0 8px 24px rgba(36,51,55,.055);transform:translateY(-1px)}
.muniCard:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.muniCardLink{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  padding:20px 20px 17px;
  color:inherit;
  text-decoration:none;
}
.muniEyebrow{margin:0 0 2px;color:#68807b;font-size:11px;font-weight:800;letter-spacing:.02em}
.muniCard h3{margin:0;font-size:23px;line-height:1.35;letter-spacing:-.02em}
.muniCard .meta{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.miniMetrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:18px 0 0;
  border-top:1px solid #e5ece9;
  border-bottom:1px solid #e5ece9;
}
.miniMetric{
  min-width:0;
  padding:11px 7px 10px;
  border-right:1px solid #edf2f0;
  border-radius:0;
  background:transparent;
  color:#657671;
  font-size:10px;
  line-height:1.25;
  text-align:center;
}
.miniMetric:last-child{border-right:0}
.miniMetric span{display:block;white-space:nowrap}
.miniMetric strong{
  display:block;
  margin-top:4px;
  color:#29413d;
  font-size:21px;
  font-weight:780;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.cardCta{display:block;margin-top:14px;color:var(--accent2);font-size:12px;font-weight:850}
.muniCompareChoice{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:11px 20px;
  border-top:1px solid #e3eae7;
  background:#fafcfb;
  color:#3e5e58;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}
.muniCompareChoice input,
.topCompareChoice input{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.muniCompareChoice.is-selected{background:#f0f8f6;color:#286f66}
.muniCompareChoice.is-disabled{opacity:.48;cursor:not-allowed}
.topCompareChoice{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 13px;
  border:1px solid #b8d5cf;
  border-radius:12px;
  background:#fff;
  color:var(--accent2);
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
}
.topCompareChoice.is-selected{border-color:var(--accent);background:#eef8f5}
.topCompareChoice.is-disabled{opacity:.45;cursor:not-allowed}
.compareBar{width:min(760px,100%);margin-left:auto;margin-right:auto}

@media(max-width:980px){
  .municipalityGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .municipalityGrid{grid-template-columns:1fr;gap:14px}
  .muniCardLink{padding:17px 16px 14px}
  .muniCard h3{font-size:22px}
  .muniCompareChoice{padding-left:16px;padding-right:16px}
  .miniMetric{padding-left:4px;padding-right:4px}
  .miniMetric strong{font-size:20px}
}


/* 2026-09-24 one-second comprehension: compact hero snapshot, not another full chart. */
.glanceSummary{margin:22px 0 4px;padding:16px 18px 18px;border:1px solid #dce8e5;border-radius:18px;background:#f8fbfa}
.glanceHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.glanceHead strong{font-size:14px;color:#294f49;letter-spacing:.01em}
.glanceHead span{color:var(--muted);font-size:11px;font-weight:700}
.glanceGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.glanceMetric{min-width:0;padding:12px 13px;border:1px solid #e2ebe9;border-radius:13px;background:#fff}
.glanceMetricTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.glanceMetricTop>span{display:flex;align-items:center;gap:7px;min-width:0}
.glanceMetricTop .metricIcon{width:17px;height:17px;flex:0 0 auto}
.glanceMetricTop b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#3b5c56}
.glanceMetricTop em{flex:0 0 auto;padding:3px 7px;border-radius:999px;font-size:10px;font-style:normal;font-weight:850;background:#eef3f2;color:#60736f}
.glanceMetric.is-high .glanceMetricTop em{background:#e7f4f0;color:#277166}
.glanceMetric.is-low .glanceMetricTop em{background:#fff2df;color:#8b6332}
.glanceValue{display:block;margin-top:5px;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:#173f38}
.glanceBar{position:relative;height:7px;margin-top:10px;border-radius:999px;background:#e6ecea;overflow:hidden}
.glanceBar i{display:block;height:100%;border-radius:999px;background:#5b9f94}
.glanceMetric.is-low .glanceBar i{background:#bd986a}
.glanceMetric.is-missing .glanceBar i{display:none}
.glanceBar span{position:absolute;top:-2px;bottom:-2px;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(58,83,78,.18)}
@media(max-width:800px){
  .glanceSummary{margin-top:18px;padding:14px}
  .glanceHead{align-items:flex-start;flex-direction:column;gap:2px}
  .glanceGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .glanceMetric{padding:11px}
  .glanceValue{font-size:28px}
}
@media(max-width:380px){
  .glanceGrid{grid-template-columns:1fr}
}


/* 2026-09-24 one-second municipality list: give each compact score an immediate meaning. */
.miniMetric em{display:block;margin-top:3px;color:#74827f;font-size:9px;font-style:normal;font-weight:850;line-height:1.2}
.miniMetric.is-high strong,.miniMetric.is-high em{color:#277166}
.miniMetric.is-low strong,.miniMetric.is-low em{color:#8b6332}
.miniMetric.is-missing{opacity:.65}
@media(max-width:680px){
  .miniMetric em{font-size:9px}
}


/* 2026-09-24 municipality detail: meaning first, evidence second. */
#factsSection .fact span{
  display:block;
  margin-top:6px;
  color:#73827f;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
}
#metricsSection,#factsSection,#moneySection,#stationSection{scroll-margin-top:18px}
@media(max-width:800px){
  .detailJump{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .detailJump a{min-height:44px;padding:8px 10px;font-size:12px}
  #factsSection .fact span{font-size:12px}
}
@media(max-width:380px){
  .detailJump{grid-template-columns:1fr}
}


/* 2026-09-25 municipality population + terrain context. */
.muniContextChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.muniContextChip{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border:1px solid #dfe9e6;border-radius:999px;background:#f7faf9;color:#5b716c;font-size:10px;font-weight:800;line-height:1.25}
.muniContextChip.is-pop{border-color:#d8e7e3;background:#f2f8f6;color:#356b62}
.muniContextChip.is-slope{border-color:#e7dfd2;background:#fbf8f2;color:#776348}
.contextSection{scroll-margin-top:18px}
.contextSection>.sub{max-width:860px;line-height:1.8}
.contextGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.contextCard{min-width:0;padding:18px;border:1px solid #dfe8e5;border-radius:16px;background:#fafcfb}
.contextCard small{display:block;color:#70817d;font-size:11px;font-weight:850}
.contextCard strong{display:block;margin-top:5px;color:#234b45;font-size:27px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.contextCard span{display:block;margin-top:7px;color:#526b65;font-size:12px;font-weight:800;line-height:1.55}
.contextCard p{margin:8px 0 0;color:#70817d;font-size:11px;line-height:1.65}
.contextMeter{height:8px;margin-top:12px;border-radius:999px;background:#e7eeec;overflow:hidden}
.contextMeter i{display:block;height:100%;border-radius:999px;background:#6aa69c}
.contextCard.is-slope .contextMeter i{background:#ad936d}
.contextNote{max-width:900px;margin:12px 0 0;color:#71807d;font-size:11px;line-height:1.75}
@media(max-width:800px){
  .contextGrid{grid-template-columns:1fr}
  .muniContextChip{font-size:11px}
  .contextCard p,.contextNote{font-size:12px}
}

/* 2026-09-25 SEO crawl wiring: static 1,741-municipality directory */
.allMunicipalityDirectory{margin:clamp(36px,6vw,72px) 0 24px}
.prefDirectoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prefDirectory{border:1px solid var(--line,#d9ded9);border-radius:16px;background:var(--surface,#fff);overflow:hidden}
.prefDirectory summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}
.prefDirectory summary::-webkit-details-marker{display:none}
.prefDirectory summary span{font-size:.86rem;color:var(--muted,#68716b);font-weight:600}
.prefDirectory[open] summary{border-bottom:1px solid var(--line,#d9ded9)}
.prefMuniLinks{display:flex;flex-wrap:wrap;gap:8px 10px;padding:14px 18px 18px}
.prefMuniLinks a{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border-radius:999px;background:var(--surface-soft,#f5f7f5);color:inherit;text-decoration:none;font-size:.92rem}
.prefMuniLinks a:hover{text-decoration:underline}
@media(max-width:720px){.prefDirectoryGrid{grid-template-columns:1fr}.prefDirectory summary{padding:14px 16px}.prefMuniLinks{padding:12px 14px 16px}.prefMuniLinks a{font-size:.9rem}}


/* 2026-09-26 shared discovery core: municipality next-step links. */
.discoverySection{scroll-margin-top:18px}
.discoveryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.discoveryCard{min-width:0;padding:18px;border:1px solid #dfe8e5;border-radius:16px;background:#fafcfb}
.discoveryCard small{display:block;color:#6f817d;font-size:11px;font-weight:850}
.discoveryCard strong{display:block;margin-top:6px;color:#244c45;font-size:17px;line-height:1.5}
.discoveryCard p{margin:8px 0 0;color:#657772;font-size:12px;line-height:1.8}
.discoveryCard a{color:#2f8177;font-weight:800;text-decoration:none}
.discoveryCard a:hover{text-decoration:underline}
@media(max-width:800px){.discoveryGrid{grid-template-columns:1fr}.discoveryCard p{font-size:13px}}


/* 2026-09-26 first-view priority: expose municipality search earlier on mobile. */
@media(max-width:680px){
  .page{padding-left:14px;padding-right:14px}
  .topnav{padding-top:12px;padding-bottom:12px}
  .hero{padding:24px 0 12px}
  .hero .kicker{margin-bottom:5px;font-size:10px}
  .hero h1{font-size:30px;line-height:1.18}
  .hero .lead{margin-top:9px;font-size:13px;line-height:1.6}
  .heroMeta{display:none}
  .searchPanel{margin-top:12px;padding:16px 14px;border-radius:16px}
  .searchPanel h2{font-size:22px}
  .searchPanel .sub{font-size:12px;line-height:1.55}
  .directSearch{margin-top:11px}
  .directSearch input{min-height:44px}
  .controls{grid-template-columns:1fr;gap:8px;margin-top:8px}
  .field select,.btn{min-height:44px}
  .topCompareChoice{min-height:42px}
}


/* 2026-09-26 detail first-look summary: meaning before detail. */
.detailFirstLook{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.firstLookItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #dce7e4;
  border-radius:999px;
  background:#fff;
}
.firstLookItem small{
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.firstLookItem strong{
  font-size:13px;
  line-height:1.2;
}
.firstLookItem.is-strong{border-color:#bfded7;background:#f0f8f6;color:#286f66}
.firstLookItem.is-careful{border-color:#e7d9c5;background:#fbf6ee;color:#795f3c}
@media(max-width:680px){
  .detailFirstLook{gap:6px;margin-top:10px}
  .firstLookItem{min-height:32px;padding:6px 9px}
  .firstLookItem small{font-size:9px}
  .firstLookItem strong{font-size:12px}
}


/* 2026-09-27 quiet municipality hero: one purpose per visual layer. */
.detailHero{max-width:1080px;padding-top:42px;padding-bottom:26px}
.detailHero .kicker{margin-bottom:5px;color:#67807a;letter-spacing:.06em}
.detailHero h1{max-width:none;font-size:clamp(38px,6vw,64px);line-height:1.08}
.detailLead{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7}
.detailFirstLook{margin-top:13px}
.firstLookItem{border:0;background:transparent!important;padding:4px 0;min-height:auto;border-radius:0}
.firstLookItem+.firstLookItem{margin-left:18px;padding-left:18px;border-left:1px solid #dde7e4}
.firstLookItem small{color:#758681;font-size:9px}
.firstLookItem strong{color:#315b55;font-size:14px}
.firstLookItem.is-careful strong{color:#755f45}
.glanceSummary{margin-top:16px;padding:13px 15px 15px;border-color:#e2e9e7;border-radius:14px;background:#fbfcfb}
.glanceHead{margin-bottom:9px}
.glanceHead strong{font-size:12px}
.glanceHead span{font-size:10px}
.glanceMetric{padding:9px 10px;border:0;border-left:1px solid #e6ecea;border-radius:0;background:transparent}
.glanceMetric:first-child{border-left:0}
.glanceValue{font-size:25px}
.glanceBar{height:5px;margin-top:8px}
.heroActions{align-items:center;margin-top:15px}
.heroActions .btn{min-height:42px;padding:8px 13px;font-size:12px}
.heroTextLink{display:inline-flex;align-items:center;min-height:42px;padding:8px 4px;color:#356b64;font-size:12px;font-weight:850;text-decoration:none}
.heroTextLink:after{content:" →";margin-left:3px}
.heroTextLink:hover{text-decoration:underline}
.detailJump{margin-top:13px;gap:14px}
.detailJump a{min-height:auto;padding:3px 0;border:0;border-radius:0;background:transparent;color:#6b7c78;font-size:11px}
.detailJump a:after{content:"↓";margin-left:5px;color:#9aaba7}
.detailJump a:hover{background:transparent;color:#2f746b}
@media(max-width:800px){
  .detailHero{padding-top:27px;padding-bottom:22px}
  .detailHero h1{font-size:40px}
  .detailLead{margin-top:9px;font-size:15px;line-height:1.65}
  .detailFirstLook{margin-top:10px}
  .firstLookItem+.firstLookItem{margin-left:12px;padding-left:12px}
  .glanceSummary{margin-top:13px;padding:11px 10px 12px}
  .glanceHead{display:none}
  .glanceGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .glanceMetric{padding:7px 8px}
  .glanceMetricTop{display:block}
  .glanceMetricTop>span{gap:4px}
  .glanceMetricTop .metricIcon{width:14px;height:14px}
  .glanceMetricTop b{font-size:10px}
  .glanceMetricTop em{display:none}
  .glanceValue{font-size:23px;margin-top:5px}
  .heroActions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:13px}
  .heroActions .btnPrimary{grid-column:1/-1;justify-content:center;text-decoration:none}
  .heroActions .btn{min-height:44px}
  .heroTextLink{justify-content:flex-end;padding-right:2px}
  .detailJump{display:flex;gap:16px;margin-top:13px}
  .detailJump a{justify-content:flex-start;min-height:30px;padding:3px 0;font-size:11px}
}
@media(max-width:430px){
  .detailHero h1{font-size:36px}
  .glanceMetricTop .metricIcon{display:none}
  .glanceMetricTop b{font-size:9px}
  .glanceValue{font-size:21px}
  .heroActions{grid-template-columns:1fr}
  .heroActions .btn,.heroTextLink{width:100%;justify-content:center}
}


/* 2026-09-27: strengthen municipality metric-bar contrast without changing values or scale. */
#metricsSection .bar{background:#d7e3e0}
#metricsSection .bar>i{background:#247d73}
#metricsSection .bar .lfVizBarFill{opacity:.88}

/* 2026-09-27: strengthen shared bars used by municipality context cards. */
.contextMeter{background:#d2dfdc}
.contextMeter .lfVizBarFill{background:#2f8176;opacity:1}

/* Keep every station link in the HTML crawl graph while keeping long city pages compact. */
.stationList.is-collapsed .stationItem:nth-of-type(n+7){display:none}
.stationList.is-expanded .stationItem{display:flex}
.stationListToggle{grid-column:1/-1;justify-self:start;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);padding:10px 15px;font:inherit;font-weight:800;cursor:pointer}
.stationListToggle:hover{background:#f1f8f6;border-color:#8fc2b8}
.stationListToggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}

/* A selected city must leave a direct route to the next comparison candidate. */
.compareBrowse{display:inline-flex;align-items:center;min-height:40px;padding:6px 10px;color:var(--accent);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.compareBrowse:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:8px}