/* Original Observatory shell: full-width top navigation and normal page scrolling.
   Load after the component styles; retain the current localized wordmarks and palette. */
html { scroll-padding-top:88px; }
body,body.feed-locked { padding:0; height:auto; overflow:visible; overscroll-behavior:auto; }
.site-header.legacy-site-header {
  position:sticky; inset:auto; top:0; z-index:40;
  width:100%; height:auto; min-height:68px;
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:12px 20px;
  padding:12px max(24px,calc((100% - 1120px)/2));
  background:color-mix(in srgb,var(--color-surface) 92%,transparent);
  border-bottom:1px solid var(--color-border-subtle);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-header.legacy-site-header::before { content:none; }
.legacy-site-header .brand {
  display:inline-flex; align-items:center; justify-content:flex-start;
  flex:0 1 auto; width:auto; max-width:none; min-width:0;
  gap:10px; padding:0; text-decoration:none; color:var(--color-text-primary);
}
.legacy-site-header .brand-mark { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; color:var(--color-text-brand); }
.legacy-site-header .brand-mark svg,.legacy-site-header .brand-mark img { width:34px; height:34px; }
html .legacy-site-header .brand-name { display:block; font-size:1.08rem; line-height:1.25; font-weight:800; white-space:nowrap; letter-spacing:0; }
html:lang(zh-Hant) .legacy-site-header .brand-name { font-size:1.35rem; }
html:lang(ja) .legacy-site-header .brand-name,html:lang(ko) .legacy-site-header .brand-name { font-size:1.15rem; }
.legacy-site-header .site-nav {
  position:static; inset:auto; z-index:auto; width:auto;
  display:flex; flex-direction:row; flex-wrap:wrap; flex:0 1 auto;
  align-items:center; justify-content:flex-end; gap:6px; padding:0;
  background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.legacy-site-header .nav-item {
  display:inline-flex; flex-direction:row; align-items:center; justify-content:center;
  flex:0 0 auto; gap:6px; min-height:40px; padding:8px 10px;
  color:var(--color-text-muted); font-size:.92rem; font-weight:700; line-height:1.3;
  border-radius:8px; text-decoration:none;
}
.legacy-site-header .nav-label { display:inline; font-size:inherit; white-space:normal; }
.legacy-site-header .site-nav > .nav-item > svg,.legacy-site-header .nav-more > summary > svg { display:none; }
.legacy-site-header .nav-item:hover,.legacy-site-header .nav-item[aria-current="page"],.legacy-site-header .nav-more[open] > summary { color:var(--color-text-primary); background:var(--color-surface-soft); }
.legacy-site-header .nav-more { position:relative; display:block; flex:0 0 auto; margin:0; }
.legacy-site-header .nav-more summary::after { content:""; width:0; height:0; margin-left:3px; border-top:5px solid currentColor; border-right:4px solid transparent; border-left:4px solid transparent; }
.legacy-site-header .nav-more-menu {
  position:absolute; inset:auto 0 auto auto; top:calc(100% + 8px); bottom:auto;
  width:280px; min-width:0; max-width:calc(100vw - 32px); max-height:calc(100dvh - 100px);
  padding:8px; border-radius:8px; box-shadow:var(--shadow-raised); text-align:left;
}
.legacy-site-header .nav-more-menu a,.legacy-site-header .nav-more-menu button { font-size:.88rem; }
.legacy-site-header .nav-more-menu .nav-mobile-extra { display:flex; }
.legacy-site-header .mobile-header-action { display:none; }
.main-container:not(.home-main),body.feed-locked .feed-main:not(.home-main) {
  display:block; width:min(1120px,calc(100% - 48px)); max-width:none; height:auto;
  min-height:70vh; margin:0 auto; padding:20px 0 48px;
}
.site-footer,body.feed-locked .site-footer { display:block; width:min(1120px,calc(100% - 48px)); max-width:none; margin:0 auto; padding:20px 0 28px; }
.toast { bottom:24px; }
@media (min-width:641px) and (max-width:1050px) {
  .legacy-site-header .site-nav { gap:2px; }
  .legacy-site-header .nav-item { padding:8px 7px; font-size:.85rem; }
}
@media (max-width:640px) {
  html { scroll-padding-top:12px; }
  .site-header.legacy-site-header {
    position:static; min-height:0; height:auto; justify-content:flex-start;
    gap:8px 12px; padding:14px 16px;
  }
  .legacy-site-header .brand { flex:0 0 auto; width:auto; min-width:0; max-width:100%; gap:9px; }
  .legacy-site-header .brand-mark,.legacy-site-header .brand-mark svg,.legacy-site-header .brand-mark img { width:32px; height:32px; }
  html .legacy-site-header .brand-name { font-size:1.02rem; }
  html:lang(zh-Hant) .legacy-site-header .brand-name { font-size:1.22rem; }
  html:lang(ja) .legacy-site-header .brand-name,html:lang(ko) .legacy-site-header .brand-name { font-size:1.08rem; }
  .legacy-site-header .site-nav {
    display:grid; flex:1 1 100%; grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch; gap:4px; width:100%; min-width:0; padding:0; border:0;
  }
  .legacy-site-header .nav-item { display:flex; min-width:0; min-height:36px; padding:6px 4px; font-size:.85rem; text-align:center; line-height:1.3; }
  .legacy-site-header .nav-more { min-width:0; }
  .legacy-site-header .nav-more summary.nav-item { width:100%; height:100%; }
  .legacy-site-header .nav-more-menu { top:calc(100% + 8px); left:auto; right:0; bottom:auto; width:min(280px,calc(100vw - 32px)); max-height:calc(100dvh - 180px); }
  .main-container:not(.home-main),body.feed-locked .feed-main:not(.home-main) { width:calc(100% - 32px); padding:16px 0 36px; }
  .site-footer,body.feed-locked .site-footer { width:calc(100% - 32px); padding:16px 0 24px; }
  .toast { bottom:20px; }
}

.main-container.home-main { display:block; width:100%; max-width:none; height:auto; margin:0; padding:0; }

/* Compact primary navigation and grouped More menu. */
.nav-refresh .nav-item { min-height:44px; font-weight:550; }
.nav-refresh .nav-item[aria-current="page"] { color:var(--color-text-brand); font-weight:650; }
.nav-refresh .nav-more summary::after { transition:transform var(--motion-fast); }
.nav-refresh .nav-more[open] summary::after { transform:rotate(180deg); }
.legacy-site-header.nav-refresh .nav-more-menu {
  display:block; width:400px; max-width:calc(100vw - 32px);
  max-height:var(--nav-menu-space,calc(100dvh - 180px));
  padding:14px; overflow:auto; overscroll-behavior:contain;
  border-radius:12px; scrollbar-width:thin;
}
.nav-refresh .nav-menu-section,.nav-refresh .nav-preferences { display:block; min-width:0; }
.nav-refresh .nav-section-title { margin:0 0 8px; padding:0 6px; color:var(--color-text-muted); font-size:.74rem; font-weight:600; line-height:1.5; letter-spacing:.02em; }
.nav-refresh .nav-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.nav-refresh .nav-resource-grid a {
  display:flex; min-width:0; min-height:48px; gap:10px; padding:9px 8px;
  font-size:.85rem; font-weight:550; line-height:1.4; border-radius:7px;
}
.nav-refresh .nav-resource-grid a svg { flex:0 0 18px; width:18px; height:18px; color:var(--color-text-brand); }
.nav-refresh .nav-resource-grid a span { min-width:0; overflow-wrap:anywhere; }
.nav-refresh .nav-resource-grid a[aria-current="page"] { color:var(--color-text-brand); background:var(--color-surface-soft); }
.nav-refresh .nav-preferences { margin-top:10px; padding-top:12px; border-top:1px solid var(--color-border-subtle); }
.nav-refresh .nav-language-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:0 6px; }
.nav-refresh .nav-language-row label { flex:0 0 auto; margin:0; color:var(--color-text-secondary); font-size:.82rem; font-weight:500; }
.nav-refresh .nav-language-row select { width:auto; min-width:0; max-width:68%; min-height:44px; padding:8px 30px 8px 11px; font-size:.85rem; background-color:var(--color-surface); border:1px solid var(--color-border-subtle); border-radius:7px; }
.nav-refresh .nav-theme-field { min-width:0; margin:10px 0 0; padding:0 6px; border:0; }
.nav-refresh .nav-theme-field legend { padding:0; color:var(--color-text-secondary); font-size:.82rem; font-weight:500; line-height:1.5; }
.nav-refresh .nav-theme-field .appear-seg { display:flex; gap:3px; margin:6px 0 0; padding:3px; border-radius:8px; background:var(--color-surface-soft); }
.nav-refresh .nav-theme-field .appear-seg button { flex:1 1 0; min-width:0; min-height:44px; padding:7px 5px; border-radius:6px; font-size:.81rem; line-height:1.4; font-weight:500; justify-content:center; text-align:center; }
.nav-refresh .nav-theme-field .appear-seg button[aria-pressed="true"] { background:var(--color-surface); color:var(--color-text-brand); box-shadow:0 1px 3px rgb(0 0 0 / 12%); font-weight:600; }
.nav-refresh .nav-info-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 8px; margin:12px 0 0; padding:6px 4px 0; border-top:1px solid var(--color-border-subtle); }
.legacy-site-header.nav-refresh .nav-info-links a { display:inline-flex; align-items:center; min-height:44px; padding:4px 2px; color:var(--color-text-muted); font-size:.74rem; font-weight:500; line-height:1.4; }
.nav-refresh .nav-info-links a:hover { color:var(--color-text-brand); background:none; text-decoration:underline; }
@media(max-width:640px) {
  .legacy-site-header.nav-refresh .nav-item { min-height:44px; padding:7px 4px; font-size:.86rem; }
  .legacy-site-header.nav-refresh .nav-more-menu { width:min(400px,calc(100vw - 32px)); max-height:var(--nav-menu-space,calc(100dvh - 180px)); padding:12px; }
  .nav-refresh .nav-resource-grid { gap:2px; }
  .nav-refresh .nav-resource-grid a { gap:8px; padding:8px 6px; font-size:.82rem; }
  .nav-refresh .nav-language-row { gap:12px; }
  .nav-refresh .nav-info-links { gap:0 6px; }
}

/* Localized name with the Observatory's English signature. */
.legacy-site-header .brand-wordmark { display:flex; flex-direction:column; justify-content:center; min-width:0; gap:2px; }
.legacy-site-header .brand-english { display:block; color:var(--color-text-brand); font-size:9px; font-weight:550; line-height:1.25; letter-spacing:.12em; white-space:nowrap; }
.legacy-site-header .brand-mark,.legacy-site-header .brand-mark svg,.legacy-site-header .brand-mark img { flex-shrink:0; width:38px; height:38px; }
html:lang(zh-Hant) .legacy-site-header .brand-name { font-size:1.2rem; }
@media(max-width:640px) {
  .legacy-site-header .brand-mark,.legacy-site-header .brand-mark svg,.legacy-site-header .brand-mark img { width:36px; height:36px; }
  .legacy-site-header .brand-english { font-size:9px; letter-spacing:.08em; }
  html:lang(zh-Hant) .legacy-site-header .brand-name { font-size:1.12rem; }
}
.nav-refresh .nav-theme-field .appear-seg button { gap:5px; }
.nav-refresh .nav-theme-field .appear-seg button svg { flex:0 0 18px; width:18px; height:18px; }
.nav-refresh .nav-theme-field .appear-seg button span { white-space:nowrap; }
@media(max-width:360px) {
  .nav-refresh .nav-theme-field .appear-seg button { gap:4px; padding-inline:3px; font-size:.78rem; }
  .nav-refresh .nav-theme-field .appear-seg button svg { flex-basis:16px; width:16px; height:16px; }
}

/* A recognizable language entry even when a shared URL uses an unfamiliar script. */
.legacy-site-header.nav-refresh .nav-more > summary > svg { display:block; flex:0 0 18px; width:18px; height:18px; }
.form-panel [aria-invalid="true"] { border-color:var(--color-danger-text); }
.form-message:focus { outline:2px solid var(--color-text-brand); outline-offset:4px; }

/* Reflow localized names and controls when readers enlarge text. */
html .legacy-site-header .brand-name { white-space:normal; overflow-wrap:anywhere; }
.legacy-site-header .nav-label { min-width:0; overflow-wrap:anywhere; }
.nav-refresh .nav-theme-field .appear-seg button span { white-space:normal; overflow-wrap:anywhere; }
.nav-refresh .nav-theme-field .appear-seg button { flex-wrap:wrap; }
@media(max-width:640px) {
  .legacy-site-header .brand { flex:0 1 auto; }
  .legacy-site-header .nav-more summary.nav-item { flex-wrap:wrap; }
}

@media(max-width:640px) {
  .legacy-site-header .site-nav { grid-template-columns:repeat(auto-fit,minmax(min(100%,max(calc((100% - 8px)/3),4rem)),1fr)); }
}

/* Keep the account entry visible beside the brand, including on phones. */
.legacy-site-header .site-nav { margin-left:auto; }
.legacy-site-header .nav-account { flex:0 0 auto; }
.legacy-site-header .nav-account-button { min-height:44px; padding:8px 12px; color:var(--color-text-brand); border:1px solid var(--color-border-subtle); font-size:.85rem; white-space:nowrap; }
@media(max-width:640px) {
  .legacy-site-header .brand { order:1; flex:1 1 150px; }
  .legacy-site-header .nav-account { order:2; margin-left:auto; }
  .legacy-site-header .site-nav { order:3; margin-left:0; }
  .legacy-site-header .nav-account-button { padding-inline:9px; font-size:.78rem; }
}