/* Kenya Data Atlas — focused mobile density and visual hierarchy overhaul.
 * Keep the two data-dense audited workspaces layout-stable on direct route loads.
 * Their full styles remain cacheable assets, but are discovered synchronously
 * through this already-critical stylesheet so hydration cannot restyle the page
 * after first paint.
 */
@import url("compare.css");
@import url("countyiq-view.css");

@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:optional;src:url("https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500 600;font-display:optional;src:url("https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2") format("woff2")}

/* P16 desktop CLS hardening. Compare and CountyIQ are data-dense, dynamically
 * hydrated workspaces. Pin their text metrics to local fonts so the optional
 * brand webfonts can never reflow the analytical canvas after first paint. */
.compare-hub *,.countyiq-route *{font-family:Arial,sans-serif!important}
.compare-hub h1,.compare-hub h2,.compare-hub h3,.compare-hub .compare-cell-value,.compare-hub .life-match-count strong,
.countyiq-route h1,.countyiq-route h2,.countyiq-route h3,.countyiq-route .ciq-metric strong,.countyiq-route .ciq-fiscal strong,.countyiq-route .ciq-social-metric strong{font-family:Georgia,serif!important}

/* The place-facts panel is inserted by a lazy hardening module after its JSON
 * resolves. Its reservation must exist in a critical stylesheet, not only in
 * that same lazy module's CSS, otherwise script/CSS arrival order can create a
 * desktop layout shift. No extra request is introduced by duplicating these two
 * structural rules here. */
@media(min-width:761px){
  #ciq-metrics:not(:has(+ #ciq-place-facts)){margin-bottom:360px}
  #ciq-place-facts{display:flow-root;min-height:360px}
}

@media(max-width:760px){
  /* Home: keep the value proposition, search and pulse visible within a much shorter first screen. */
  .hero{padding:1.9rem var(--mobile-gutter) 1.75rem;gap:1.15rem;align-items:start}
  .hero h1{font-size:clamp(2.65rem,12.3vw,3.75rem);line-height:.92}
  .hero-intro{font-size:.9rem;line-height:1.5;margin:.85rem 0 1rem;max-width:34rem}
  .search-shell>label{font-size:.78rem;margin-bottom:.35rem}
  .search-box{height:52px;border-radius:12px;padding:0 .8rem;box-shadow:0 7px 20px rgba(27,48,40,.07)}
  .search-box kbd{display:none}
  .search-shell>p{margin:.48rem 0 0;font-size:.68rem;white-space:nowrap;overflow-x:auto;padding-bottom:.15rem;scrollbar-width:none}
  .search-shell>p::-webkit-scrollbar{display:none}
  .search-results{top:82px;border-radius:12px}
  .hierarchy{margin-top:.72rem;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.35rem;padding-bottom:.1rem;scrollbar-width:none}
  .hierarchy::-webkit-scrollbar{display:none}
  .hierarchy b{display:none}
  .hierarchy span{flex:0 0 auto;padding:.34rem .56rem;background:rgba(255,255,255,.84)}

  .pulse-card{padding:1rem 1.05rem 1.05rem;border-radius:14px;box-shadow:0 12px 30px rgba(18,60,50,.13)}
  .pulse-top{font-size:.62rem}
  .metric-label{margin:.9rem 0 0;font-size:.72rem}
  .feature-value{font-size:clamp(3.55rem,17vw,4.4rem);margin-top:.12rem}
  .feature-value span{font-size:1.7rem}
  .trend{margin:.42rem 0;font-size:.68rem}
  .sparkline{height:48px;margin:.62rem 0 .7rem;gap:4px}
  .pulse-card dl{padding-top:.65rem;gap:.5rem;margin:.35rem 0 .15rem}
  .pulse-card dt{font-size:.52rem}.pulse-card dd{font-size:.68rem;margin:.15rem 0}
  .pulse-card .text-link{min-height:34px;padding:.25rem 0;font-size:.74rem}

  .home-glance{padding-top:2.2rem;padding-bottom:2.4rem}
  .home-glance .section-heading{display:block;margin-bottom:1rem}
  .home-glance .section-heading h2{font-size:2.15rem}
  .home-glance .section-heading>p{margin-top:.55rem;font-size:.78rem;line-height:1.45}
  .home-glance .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px;overflow:hidden;background:var(--line)}
  .home-glance .metric-card{min-height:118px!important;padding:.82rem .76rem!important}
  .home-glance .metric-card .label{font-size:.65rem;line-height:1.25;max-width:72%}
  .home-glance .metric-card strong{font-size:1.55rem!important;margin:.32rem 0!important}
  .home-glance .metric-card .delta{font-size:.59rem;line-height:1.3}
  .home-glance .metric-card small{font-size:.54rem;margin-top:.55rem;line-height:1.35}
  .home-glance .metric-card .badge{top:.6rem;right:.6rem;transform:scale(.88);transform-origin:top right}
  .home-glance-actions{margin-top:.8rem;font-size:.74rem}

  /* CountyIQ: undo the over-reserved P16 mobile geometry and keep the first analytical screen dense. */
  .countyiq-route{background:linear-gradient(180deg,#edf4ef 0,#fbfbf8 18rem,#fbfbf8 100%)}
  .ciq-hero{padding:1.65rem var(--mobile-gutter) 1rem!important;gap:.75rem!important}
  .ciq-hero h1{font-size:clamp(2.5rem,11.5vw,3.2rem)!important;line-height:.92!important}
  .ciq-intro{font-size:.8rem!important;line-height:1.45!important;margin-top:.58rem!important}
  .ciq-controls{padding:.72rem!important;border-radius:12px!important;box-shadow:0 8px 22px rgba(22,43,35,.05)}
  .ciq-controls label{font-size:.56rem}.ciq-controls select{min-height:44px!important;padding:.62rem 3.2rem .62rem .7rem!important}
  .ciq-mode{font-size:.58rem!important;margin-top:.4rem!important}
  .ciq-body{padding:0 var(--mobile-gutter) 2.7rem!important}
  .ciq-principle{display:block!important;padding:.62rem 0!important;margin-bottom:.7rem!important;font-size:.66rem!important;line-height:1.42}
  .ciq-principle span{display:block}.ciq-principle span+span{margin-top:.25rem;color:#718078}

  /* P16 visual-regression fix: previous 920px metric reservation remained after the grid became two columns. */
  .ciq-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:248px!important;border-radius:14px;overflow:hidden}
  .ciq-metric{min-height:124px!important;padding:.78rem .7rem!important;background:linear-gradient(180deg,#fff,#fbfcfa)}
  .ciq-metric .label{font-size:.61rem!important;line-height:1.25;padding-right:1.8rem!important}
  .ciq-metric strong{font-size:1.42rem!important;margin:.3rem 0 .14rem!important;line-height:1}
  .ciq-metric .context{font-size:.57rem;line-height:1.3}
  .ciq-metric small{font-size:.52rem!important;margin-top:.45rem!important;line-height:1.3}
  .ciq-metric .badge{top:.55rem!important;right:.55rem!important;transform:scale(.82);transform-origin:top right}

  /* P16 CLS reservation was far larger than the actual compact facts block on phones. */
  #ciq-metrics:not(:has(+ #ciq-place-facts)){margin-bottom:0!important}
  #ciq-place-facts{min-height:0!important}
  .kda-place-facts{margin:.72rem 0!important;padding:.78rem!important;border-radius:12px!important}
  .kda-place-facts-head{margin-bottom:.6rem!important}
  .kda-place-facts-head h3{font-size:1.2rem!important}
  .kda-place-facts-head p{font-size:.66rem!important;line-height:1.35!important}
  .kda-place-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.42rem!important}
  .kda-place-fact{padding:.58rem!important;border-radius:9px!important;min-height:86px}
  .kda-place-fact small{font-size:.57rem!important}.kda-place-fact strong{font-size:1rem!important}.kda-place-fact span{font-size:.56rem!important}
  .kda-place-facts-sources{font-size:.56rem!important;line-height:1.35!important;margin-top:.55rem!important}

  .ciq-grid{gap:.65rem!important;margin-top:.65rem!important}
  .ciq-card{padding:.85rem!important;border-radius:14px!important;box-shadow:0 7px 20px rgba(22,43,35,.035)!important}
  .ciq-card-head{margin-bottom:.62rem!important;gap:.45rem!important}
  .ciq-card-head small{font-size:.52rem}.ciq-card-head h2{font-size:1.4rem!important}.ciq-card-head p{font-size:.6rem!important;line-height:1.35!important}
  .ciq-trend svg{min-height:158px!important}
  .ciq-years{font-size:.52rem!important}
  .ciq-trend-note{font-size:.58rem!important;line-height:1.4!important;margin-top:.5rem!important}
  .ciq-benchmarks{gap:.62rem!important}.ciq-benchmark{padding-bottom:.58rem!important}.ciq-benchmark-top{font-size:.66rem}.ciq-benchmark-top strong{font-size:1rem}.ciq-track{height:8px;border-radius:99px}.ciq-track i{border-radius:99px}.ciq-benchmark small{font-size:.54rem}

  .ciq-fiscal{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:10px;overflow:hidden}
  .ciq-fiscal div{padding:.68rem!important}.ciq-fiscal small{font-size:.52rem!important}.ciq-fiscal strong{font-size:1.08rem!important}
  .ciq-social-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ciq-social-metric{min-height:105px!important;padding:.68rem!important}.ciq-social-metric strong{font-size:1.22rem!important}
}

@media(max-width:380px){
  .home-glance .metric-card{min-height:112px!important;padding:.72rem .66rem!important}
  .ciq-metrics{min-height:232px!important}.ciq-metric{min-height:116px!important;padding:.68rem .62rem!important}.ciq-metric strong{font-size:1.3rem!important}
}