/* Healthy City Lab shared shell for research, news and data-tool pages. */
@font-face{font-family:"Noto Sans SC";src:url("../fonts/notosanssc.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif SC";src:url("../fonts/notoserifsc.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/spacegrotesk.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/spacemono-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/spacemono-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --green:#1fa85c;--green-deep:#0f5c32;--green-ink:#0b2a1a;--green-soft:#eaf7ef;
  --heat:#ff6a3d;--heat-soft:#ffb454;--heat-bg:#fff1ea;
  --ink:#0e1512;--grey:#5a7a66;--bg:#fff;--bg-alt:#f3f8f4;--card:#fff;
  --line:#dceee3;--lead:#314338;--head:var(--green-ink);--night:#0b1f15;
  --nav-bg:rgba(255,255,255,.88);--hero-a:#f1faf4;--hero-b:#fff;--hero-c:#fff6f1;
  --serif:"Noto Serif SC","SimSun",serif;--sans:"Noto Sans SC","Microsoft YaHei",sans-serif;
  --display:"Space Grotesk","Noto Sans SC",sans-serif;--mono:"Space Mono","SFMono-Regular",ui-monospace,monospace;
  --max:1680px;--pad:clamp(1.2rem,5vw,5rem);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --green:#34c77b;--green-deep:#5fd99a;--green-ink:#0b2a1a;--green-soft:#10271b;
  --heat:#ff7a4e;--heat-soft:#ffc06b;--heat-bg:#241710;
  --ink:#e6f2ea;--grey:#92b3a1;--bg:#07120d;--bg-alt:#0d1c14;--card:#0e2017;
  --line:#1c3326;--lead:#b9d2c4;--head:#eaf6ef;--night:#060f0a;
  --nav-bg:rgba(7,18,13,.88);--hero-a:#0b1f15;--hero-b:#07120d;--hero-c:#170f0a;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);color:var(--head);letter-spacing:.01em;text-wrap:balance}
a{color:inherit;text-decoration:none}strong{color:var(--green-deep);font-weight:700}em{color:var(--grey);font-style:normal}
button,input,select{font:inherit}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:1000;padding:.7rem 1rem;border-radius:999px;background:var(--heat-soft);color:#07120d;font-weight:800;transform:translateY(-180%);transition:transform .18s}
.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid var(--heat);outline-offset:4px}.page-content:focus{outline:0}

.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-inner{width:100%;padding:.68rem var(--pad);display:flex;align-items:center;gap:clamp(.75rem,2vw,1.4rem)}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto;min-width:0}.brand-logo{width:34px;height:25px;object-fit:contain;flex:none}
.brand-mark{width:26px;height:26px;border-radius:7px;flex:none;background:conic-gradient(from 210deg,var(--green),var(--heat-soft),var(--heat),var(--green));box-shadow:0 0 0 4px rgba(31,168,92,.12)}
.brand-text{display:flex;min-width:0;flex-direction:column;font-family:var(--serif);font-size:1rem;line-height:1.1;color:var(--head)}
.brand-text b{color:inherit;white-space:nowrap}.brand-text small{margin-top:.18rem;font:400 .55rem/1.2 var(--mono);letter-spacing:.05em;color:var(--grey);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(.65rem,1.5vw,1.15rem);font-size:.88rem;font-weight:600}.nav-links a{position:relative;display:flex;align-items:baseline;gap:.28rem;padding:.25rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-.15rem;height:2px;background:var(--heat);transition:right .2s}.nav-links a:hover::after{right:0}.nav-links .idx{font:700 .58rem var(--mono);color:var(--green)}.nav-links .nav-mobile-contact{display:none}
.nav-tools{display:flex;gap:.4rem}.tg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 .55rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:700 .72rem var(--mono);cursor:pointer;transition:border-color .18s,color .18s,background .18s}.tg:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}
.content-menu{display:none;position:relative;width:36px;height:34px;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}.content-menu span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .2s,top .2s}.content-menu span:first-child{top:12px}.content-menu span:last-child{top:20px}.content-menu[aria-expanded="true"] span:first-child{top:16px;transform:rotate(45deg)}.content-menu[aria-expanded="true"] span:last-child{top:16px;transform:rotate(-45deg)}
.nav-cta{padding:.42rem .88rem;border:1.5px solid var(--green-deep);border-radius:999px;color:var(--green-deep);font:700 .74rem var(--mono);white-space:nowrap;transition:background .18s,color .18s}.nav-cta:hover{background:var(--green-deep);color:var(--bg)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1.35rem;border-radius:999px;font-weight:750;font-size:.94rem;transition:transform .18s,background .18s,color .18s,box-shadow .18s}.btn-primary{background:var(--green-ink);color:#fff}.btn-primary:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,92,50,.22)}.btn-ghost{border:1.5px solid var(--green-deep);color:var(--green-deep)}.btn-ghost:hover{background:var(--green-deep);color:var(--bg)}
.kicker{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--heat);font:700 .72rem var(--mono);letter-spacing:.12em}.kicker span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 .35rem;border-radius:6px;background:var(--heat-bg);color:var(--heat);font-size:.65rem}

.footer{position:relative;padding:clamp(3.4rem,6vw,5.6rem) var(--pad) 2.2rem;background:#071c12;color:#c7ddcf;overflow:hidden}.footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(199,221,207,.055) 1px,transparent 1px);background-size:clamp(8rem,14vw,14rem) 100%;opacity:.7;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);pointer-events:none}.footer-inner{position:relative;z-index:1;width:100%}
.footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.12)}.footer-kicker{margin-bottom:.45rem;color:var(--heat-soft);font:700 .68rem var(--mono);letter-spacing:.14em}.footer h2{margin:0;color:#f4fff8;font-size:clamp(1.7rem,3vw,2.6rem)}.footer-contact{display:inline-flex;padding:.7rem 1.1rem;border-radius:999px;background:var(--heat-soft);color:#092116;font-weight:800;white-space:nowrap}
.footer-bot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.5rem;margin-top:2.1rem;font-size:.86rem}.content-footer .f-label{margin-bottom:.45rem;color:var(--heat-soft);font:700 .66rem var(--mono);letter-spacing:.08em}.f-col>div:last-child{line-height:1.6}.footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem}.footer-legal a{color:#9fc7b0;transition:color .18s}.footer-legal a:hover{color:var(--heat-soft)}
@media(max-width:980px){.nav-tools{margin-left:auto}.content-nav .nav-cta{display:none}html.js .content-menu{display:block}html.js .content-nav .nav-links{position:absolute;left:0;right:0;top:100%;display:flex;min-height:calc(100dvh - 58px);padding:clamp(2rem,7vw,4rem) var(--pad);flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;background:var(--bg);border-top:1px solid var(--line);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .22s,visibility .22s,transform .22s}html.js .content-nav .nav-links a{justify-content:space-between;padding:1.05rem 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.55rem,6vw,2.4rem);color:var(--head)}html.js .content-nav .nav-links a::after{display:none}html.js .content-nav .nav-links .idx{order:2;font-size:.62rem}html.js .content-nav .nav-links .nav-mobile-contact{display:flex}.content-nav-open{overflow:hidden}html.js .content-nav-open .content-nav .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}html:not(.js) .content-nav .nav-inner{flex-wrap:wrap}html:not(.js) .content-nav .nav-links{order:4;width:100%;overflow-x:auto;padding-top:.45rem;border-top:1px solid var(--line);scrollbar-width:thin}html:not(.js) .content-nav .nav-links a{white-space:nowrap}html:not(.js) .content-nav .nav-links .nav-mobile-contact{display:flex}.footer-bot{grid-template-columns:1fr 1fr}.footer-legal{grid-column:1/-1}}
@media(max-width:640px){.brand-text small{display:none}.nav-cta{display:none}.footer-top{align-items:flex-start;flex-direction:column}.footer-bot{grid-template-columns:1fr}.footer-legal{grid-column:auto}}
@media(max-width:480px){.content-nav .brand-text{font-size:.88rem}.content-nav .brand-logo{width:30px;height:22px}.content-nav .nav-inner{gap:.45rem}.content-nav .tg,.content-nav .content-menu{min-width:32px;width:32px;height:32px;padding:0 .35rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media print{.nav,.footer,.skip-link{display:none!important}.page-content{display:block}.content-page{background:#fff;color:#111}}

/* Homepage-aligned shell for generated research and news pages.
   Scoped to .content-page so the diagnosis map keeps its own application theme. */
body.content-page{
  --metro-sky:#f0eee9;--metro-stone:#fbfaf7;--metro-ink:#171717;--metro-slate:#242424;
  --metro-olive:#455816;--metro-lime:#a0b41c;--metro-khaki:#d8d4cc;
  --green:var(--metro-lime);--green-deep:var(--metro-olive);--green-ink:var(--metro-ink);--green-soft:#eef0df;
  --ink:var(--metro-ink);--grey:#66635d;--bg:var(--metro-sky);--bg-alt:var(--metro-stone);--card:var(--metro-stone);
  --accent-label:#2f7035;--meta-label:var(--grey);--label-rule:var(--metro-lime);
  --line:rgba(23,23,23,.14);--lead:#3e3c38;--head:var(--metro-ink);--night:var(--metro-ink);
  --nav-bg:color-mix(in srgb,var(--metro-sky) 92%,transparent);--hero-a:var(--metro-sky);--hero-b:var(--metro-stone);--hero-c:var(--metro-khaki);
  --max:1520px;--pad:clamp(1.25rem,4.2vw,5.75rem);
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.65;text-rendering:optimizeLegibility;
}
:root[data-theme="dark"] body.content-page{
  --ink:var(--metro-sky);--grey:var(--metro-khaki);--bg:var(--metro-ink);--bg-alt:#2b2926;--card:var(--metro-slate);
  --line:rgba(240,238,233,.16);--lead:#d8d4cc;--head:var(--metro-sky);--nav-bg:color-mix(in srgb,var(--metro-ink) 92%,transparent);
  --accent-label:#8fc96a;--meta-label:var(--metro-khaki);
  --green-deep:var(--metro-lime);--green-soft:#30351f;--hero-a:var(--metro-ink);--hero-b:#2b2926;--hero-c:var(--metro-slate);
}
.content-page .skip-link{border-radius:0;background:var(--metro-lime);color:var(--metro-ink)}
.content-page :focus-visible{outline-color:var(--metro-lime)}

.content-page .content-nav{height:76px;background:var(--nav-bg);border-color:var(--line);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.content-page .content-nav .nav-inner{height:100%;padding:0 var(--pad);display:grid;grid-template-columns:minmax(245px,1fr) auto minmax(245px,1fr);align-items:center;gap:2rem}
.content-page .content-nav .brand{justify-self:start;gap:.8rem;margin:0}
.content-page .content-nav .brand-logo{width:44px;height:38px}
.content-page .content-nav .brand-text{font-size:1.08rem;line-height:1.05;color:var(--head)}
.content-page .content-nav .brand-text b{font-family:var(--serif);letter-spacing:.04em}
.content-page .content-nav .brand-text small{margin-top:.38rem;color:var(--grey);font:700 .54rem/1 var(--mono);letter-spacing:.12em}
.content-page .content-nav .nav-links{justify-self:center;gap:clamp(1.2rem,2.6vw,3rem);font-size:.87rem;font-weight:700;letter-spacing:.05em}
.content-page .content-nav .nav-links a{gap:.42rem;padding:.5rem 0}
.content-page .content-nav .nav-links a::after{left:0;right:0;bottom:.2rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.content-page .content-nav .nav-links a:hover::after{right:0;transform:scaleX(1);transform-origin:left}
.content-page .content-nav .nav-links .idx{color:var(--ink);font-size:.55rem}
.content-page .content-nav .nav-tools{justify-self:end;gap:.55rem}
.content-page .content-nav .tg,.content-page .content-nav .content-menu{width:42px;height:42px;min-width:42px;padding:0;border-color:var(--line);border-radius:50%;font-size:.69rem;transition:background .25s,border-color .25s,transform .25s}
.content-page .content-nav .tg:hover,.content-page .content-nav .content-menu:hover{border-color:rgba(23,23,23,.3);background:var(--card);color:inherit;transform:translateY(-2px)}
.content-page .content-nav .content-menu span{left:12px;right:12px}

.content-page .btn{min-height:44px;padding:.72rem 1.2rem;border-radius:2px;font-size:.88rem;font-weight:750;box-shadow:none}
.content-page .btn-primary{background:var(--metro-ink);color:var(--metro-sky)}
.content-page .btn-primary:hover{background:var(--metro-olive);box-shadow:none}
.content-page .btn-ghost{border:1px solid currentColor;color:var(--green-deep)}
.content-page .btn-ghost:hover{background:var(--metro-olive);color:var(--metro-stone)}

.content-page .content-footer{padding:clamp(5rem,8vw,7rem) var(--pad) 2rem;background:var(--metro-ink);color:var(--metro-sky)}
.content-page .content-footer::before{opacity:.24;background-image:linear-gradient(90deg,rgba(240,238,233,.12) 1px,transparent 1px);background-size:clamp(110px,12vw,190px) 100%;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.content-page .content-footer .footer-inner{max-width:1520px;margin-inline:auto}
.content-page .content-footer .footer-top{display:block;padding:0;border:0}
.content-page .content-footer h2{max-width:1200px;color:var(--metro-sky);font-size:clamp(2.6rem,5.2vw,6.2rem);font-weight:620;line-height:1.08;letter-spacing:-.055em}
.content-page .content-footer .footer-bot{grid-template-columns:1.3fr 1fr .7fr 1fr;gap:2rem;margin-top:clamp(5rem,8vw,8rem);padding-top:1.5rem;border-top:1px solid rgba(240,238,233,.28);font-size:.72rem}
.content-page .content-footer .footer-label{margin-bottom:.7rem;color:rgba(240,238,233,.9);font:700 .54rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.content-page .content-footer .f-col>div:last-child{color:rgba(240,238,233,.86);line-height:1.6}
.content-page .content-footer .footer-legal{align-items:flex-end;gap:.7rem}
.content-page .content-footer .footer-legal a{margin:0;color:rgba(240,238,233,.86)}
.content-page .content-footer .footer-legal a:hover{color:var(--metro-lime)}

@media(max-width:980px){
  .content-page .content-nav{height:70px}
  .content-page .content-nav .nav-inner{grid-template-columns:1fr auto;gap:.75rem}
  .content-page .content-nav .nav-tools{margin-left:0}
  .content-page .content-nav .content-menu{display:block}
  html.js .content-page .content-nav .nav-links{top:100%;min-height:calc(100dvh - 70px);justify-self:stretch;padding:2rem var(--pad);background:var(--bg)}
  html.js .content-page .content-nav .nav-links a{font-size:clamp(1.8rem,6vw,3rem);font-weight:600}
  .content-page .content-footer .footer-bot{grid-template-columns:1fr 1fr}
  .content-page .content-footer .footer-legal{grid-column:auto;align-items:flex-start}
}
@media(max-width:640px){
  .content-page .content-nav{height:64px}
  .content-page .content-nav .brand{gap:.5rem}
  .content-page .content-nav .brand-logo{width:36px;height:32px}
  .content-page .content-nav .brand-text{font-size:.9rem}
  .content-page .content-nav .tg,.content-page .content-nav .content-menu{width:44px;height:44px;min-width:44px}
  .content-page .content-footer h2{font-size:clamp(2.75rem,14vw,5.4rem)}
  .content-page .content-footer .footer-bot{grid-template-columns:1fr;gap:1.5rem}
  body.content-page{overflow-wrap:anywhere}
  .content-page .content-nav .nav-inner{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
  html.js .content-page .content-nav .nav-links{padding:clamp(1.5rem,6svh,3.5rem) max(var(--pad),env(safe-area-inset-left)) max(2rem,env(safe-area-inset-bottom));overscroll-behavior:contain}
  html.js .content-page .content-nav .nav-links a{min-height:60px;padding:1rem 0;font-size:clamp(1.6rem,8vw,2.35rem)}
  .content-page .btn,.content-page button,.content-page input,.content-page select{min-height:44px}
  .content-page main img{height:auto}
  .content-page .content-footer{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
  .content-page .content-footer h2{overflow-wrap:anywhere}
  .content-page .content-footer .footer-bot{margin-top:3.75rem;font-size:.78rem}
}
@media(hover:none),(pointer:coarse){.content-page .content-nav .tg:hover,.content-page .content-nav .content-menu:hover,.content-page .btn:hover{transform:none}}