/* Shared public header. Scoped rules also work in standalone weather and game pages. */
#fourhao-site-header{display:contents}
:root:has(.site-header),.app-shell:has(>.site-header){--topbar-height:76px}
.site-header{--surface:var(--color-surface,#fff);--surface-soft:var(--color-soft,#f0f3f8);--bg:var(--color-bg,#f5f7fa);--text:var(--color-text,#243248);--secondary:var(--color-secondary,#53657d);--muted:var(--color-muted,#607087);--border:var(--color-border,#dbe2ec);--link:var(--readable-accent-light,#315fc8);--accent-soft:color-mix(in srgb,var(--accent,#4775ee) 10%,transparent)}
:root[data-theme=dark] .site-header{--surface:var(--color-surface,#1c2536);--surface-soft:var(--color-soft,#263248);--text:var(--color-text,#e4eaf4);--secondary:var(--color-secondary,#becbdd);--muted:var(--color-muted,#a0aec4);--border:var(--color-border,#33425a);--link:var(--readable-accent-dark,#aac4ff)}
.site-header{--site-header-height:76px;position:sticky;top:0;z-index:35;display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;align-items:center;gap:24px;min-height:var(--site-header-height);width:100%;padding:12px 24px;border-bottom:1px solid var(--border,#dbe2ec);background:var(--surface,#fff);color:var(--text,#243248);font:400 16px/1.5 var(--font-family,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);box-sizing:border-box;text-align:left;isolation:isolate}
.site-header *{box-sizing:border-box}.site-header a{text-decoration:none;color:inherit}.site-header button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;margin:0}.site-header svg{flex-shrink:0;vertical-align:middle}.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--accent,#4775ee);outline-offset:3px}.site-header-identity{display:flex;align-items:center;gap:10px;min-width:0}.site-header-brand{display:inline-flex;flex-shrink:0;align-items:center;min-height:40px}.site-header-brand img{display:block;width:236px;height:auto;max-width:none}.site-header .site-header-brand-dark{display:none}[data-theme=dark] .site-header .site-header-brand-light{display:none}[data-theme=dark] .site-header .site-header-brand-dark{display:block}
.site-header-primary{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap}.site-header-primary>a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 8px;border-radius:8px;color:var(--secondary,#53657d);font-size:var(--font-body,1rem);font-weight:400;}.site-header-primary>a:hover,.site-header-primary>a[aria-current=page]{background:var(--accent-soft,#eef3ff);color:var(--link,#315fc8)}.site-header-primary>a[aria-current=page]{font-weight:600}
.site-header-daily{min-width:0;padding-left:16px;border-left:1px solid var(--border,#dbe2ec)}.site-header-daily .topbar-daily{margin:0;padding:0;height:auto;border:0;min-width:0}.site-header-daily .daily-summary{justify-content:flex-end}.site-header-daily .daily-trigger{font-family:inherit;line-height:1.5}.site-header-daily-fallback{display:flex;align-items:center;justify-content:flex-end;gap:16px}.site-header-daily-fallback>a{display:flex;align-items:center;gap:7px;min-height:40px;color:var(--secondary,#53657d)}
.site-header-controls{display:flex;align-items:center;gap:4px;padding-left:16px;border-left:1px solid var(--border,#dbe2ec);white-space:nowrap}.site-header .site-header-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;min-width:40px;height:40px;padding:8px;border-radius:8px;color:var(--secondary,#53657d)}.site-header .site-header-icon:hover,.site-header-my:hover{background:var(--accent-soft,#eef3ff);color:var(--link,#315fc8)}.site-header .site-header-icon:disabled{opacity:.5;cursor:wait}.site-header-my{display:flex;align-items:center;gap:7px;min-height:40px;padding:4px 8px;border-radius:8px;font-size:var(--font-body,1rem)}.site-header-my[aria-current=page]{background:var(--accent-soft,#eef3ff);color:var(--link,#315fc8)}.site-header-error{margin:0;padding:8px 20px;color:var(--danger,#ac3939);background:var(--surface,#fff);font-size:var(--font-body,1rem);line-height:1.6}
.site-header .daily-popover{right:0;text-align:left;font-family:var(--font-family,"PingFang SC","Microsoft YaHei",system-ui,sans-serif);line-height:1.6}.site-header .daily-popover button,.site-header .daily-popover a{font-family:inherit}.site-header .daily-popover p{line-height:1.7}.site-header .daily-popover .icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:7px}.site-header .daily-popover-heading>button{margin-left:auto}
.site-header .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header .spin{animation:site-header-spin 1s linear infinite}@keyframes site-header-spin{to{transform:rotate(360deg)}}
@media(max-width:1500px){.site-header{gap:14px;padding-inline:20px}.site-header-primary{gap:2px}.site-header-primary>a{padding-inline:8px;font-size:var(--font-body,1rem);font-weight:400;}.site-header-daily{padding-left:12px}.site-header-controls{padding-left:12px}}
@media(max-width:1240px){.site-header{grid-template-columns:max-content minmax(0,1fr) max-content;gap:0 16px;padding:8px 20px 0;--site-header-height:116px}.site-header-primary{justify-content:center}.site-header-brand img{width:220px}.site-header-controls{padding-left:12px}.site-header-daily{grid-column:1/-1;grid-row:2;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:42px;border-left:0;border-top:1px solid var(--border,#dbe2ec);padding:2px 0;margin-top:7px}.site-header-daily .daily-summary{justify-content:center;gap:12px}.site-header-daily>.topbar-daily{width:100%}.site-header .daily-popover{top:calc(100% + 5px);right:0}}
@media(max-width:980px){.site-header{grid-template-columns:minmax(0,1fr) max-content;gap:0 10px;padding:8px 14px 0;--site-header-height:158px}.site-header-brand img{width:205px}.site-header-controls{grid-column:2;grid-row:1;border-left:0;padding-left:0}.site-header-controls .site-header-icon{width:36px;min-width:36px;height:38px;padding:7px}.site-header-my{padding-inline:3px;gap:5px}.site-header-primary{grid-row:2;grid-column:1/-1;justify-content:center;gap:18px;padding:4px 0;border-top:1px solid var(--border,#dbe2ec);margin-top:6px}.site-header-primary>a{min-height:38px;padding:5px 12px;font-size:var(--font-body,1rem);font-weight:400;}.site-header-daily{grid-row:3;margin-top:0;min-height:41px}.site-header .daily-popover{position:fixed;top:calc(var(--topbar-height,158px) + 6px);left:12px;right:12px;max-width:calc(100vw - 24px);width:auto}.site-header .daily-summary{gap:5px}.site-header .daily-trigger{padding:4px 5px;gap:5px;font-size:var(--font-body,1rem)}.site-header .daily-city{max-width:6ch}.site-header .daily-lunar,.site-header .daily-term{display:none}}
@media(max-width:430px){.site-header{padding-inline:10px;gap:0 6px}.site-header-brand img{width:174px}.site-header-controls{gap:0}.site-header-controls .site-header-icon{width:34px;min-width:34px}.site-header-my{font-size:var(--font-body,1rem);padding-inline:2px}.site-header-primary{gap:10px}.site-header-primary>a{padding-inline:10px;font-size:var(--font-body,1rem);font-weight:400;}.site-header .daily-trigger{font-size:var(--font-body,1rem);gap:4px}.site-header .daily-city{max-width:5ch}.site-header .daily-temperature{font-size:var(--font-body,1rem)}}
@media print{.site-header{position:static}.site-header-controls,.site-header-daily{display:none}}
@media(max-width:1240px){:root:has(.site-header),.app-shell:has(>.site-header){--topbar-height:116px}}
@media(max-width:980px){:root:has(.site-header),.app-shell:has(>.site-header){--topbar-height:158px}}

/* Four primary channels remain reachable at narrow mobile widths. */
@media(max-width:980px){.site-header-primary{gap:0}.site-header-primary>a{gap:5px;padding-inline:6px}}
@media(max-width:360px){.site-header-primary>a svg{display:none}.site-header-brand img{width:154px}.site-header-my{font-size:14px}}

/* Daily content must remain inside its own grid track, including long API labels.
   Query this track rather than the viewport: channels and controls also need space. */
.site-header-daily { container:site-daily / inline-size; }
.site-header-daily .topbar-daily,.site-header-daily .daily-summary { width:100%; max-width:100%; min-width:0; }
.site-header-daily .daily-summary { gap:8px; }
.site-header-daily .daily-trigger { min-width:0; max-width:100%; gap:6px; padding-inline:6px; }
.site-header-daily .daily-weather-trigger { flex:0 1 auto; justify-content:flex-start; }
.site-header-daily .daily-calendar-trigger { flex:0 1 auto; }
.site-header .daily-city { flex:0 1 auto; min-width:0; max-width:6em; white-space:nowrap; }
.site-header .daily-temperature { flex:0 1 auto; min-width:0; max-width:7ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header .daily-weather-status,.site-header .daily-condition { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header .daily-condition { max-width:6em; }
.site-header .daily-calendar-trigger time { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header :is(.daily-condition,.daily-range,.daily-lunar,.daily-term,.daily-cached) { display:inline; }
.site-header :is(.daily-range,.daily-lunar,.daily-term,.daily-cached) { flex-shrink:0; }
.site-header .daily-range { flex-shrink:1; min-width:0; max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header-brand { min-width:0; max-width:100%; flex-shrink:1; }
.site-header-brand img { max-width:100%; }
.site-header-primary>a { min-width:0; }
.site-header-primary>a>span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
@container site-daily (max-width:900px) { .site-header .daily-term { display:none; } }
@container site-daily (max-width:780px) { .site-header .daily-range { display:none; } }
@container site-daily (max-width:660px) { .site-header .daily-lunar { display:none; } }
@container site-daily (max-width:540px) { .site-header .daily-condition { display:none; } }
@container site-daily (max-width:430px) { .site-header .daily-cached { display:none; } }
@container site-daily (max-width:370px) { .site-header .daily-weekday { display:none; } }
@container site-daily (max-width:320px) {
  .site-header .daily-trigger { gap:4px; padding-inline:4px; }
  .site-header .daily-city { max-width:4em; }
  .site-header-daily .daily-summary { gap:5px; }
}
@media(max-width:980px) { .site-header-primary>a { flex:0 1 auto; } }
@supports not (container-type:inline-size) {
  @media(max-width:1800px) { .site-header :is(.daily-range,.daily-lunar,.daily-term) { display:none; } }
  @media(max-width:1600px) { .site-header .daily-condition { display:none; } }
  @media(max-width:600px) { .site-header .daily-cached { display:none; } }
  @media(max-width:400px) { .site-header .daily-weekday { display:none; } }
}