/* One page frame: header and content share the homepage's measure and gutters.
   Keep these outside the worksheet/paper styles so every page has the same edges. */
:root {--site-content-width:1080px; --site-gutter:40px; --site-canvas:#f7f6f0}
body.shared-page {background:var(--site-canvas)}
.shared-page > .site-shell,
.shared-page > .app-shell {
  box-sizing:border-box; width:calc(100% - 2 * var(--site-gutter));
  max-width:var(--site-content-width); margin:0 auto; padding:0;
}
/* Header typography remains isolated from worksheet UI and paper typography. */
.site-header.shared-header {
  --header-ink:#263629; --header-muted:#677162; --header-green:#416044;
  --header-line:#dce0d4;
  --header-serif:"Songti SC","STSong","Noto Serif CJK SC",Georgia,serif;
  --header-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  width:calc(100% - 2 * var(--site-gutter)); max-width:var(--site-content-width); height:auto; min-height:112px;
  margin:0 auto; padding:0; gap:20px; flex-wrap:nowrap; position:relative;
  border-bottom:1px solid var(--header-line); color:var(--header-ink);
  font:14px/1.5 var(--header-sans); text-align:start;
}
.site-header.shared-header .brand {
  display:flex; align-items:center; gap:13px; min-width:0; flex-shrink:1;
  color:var(--header-ink); text-decoration:none;
  font:700 24px/1.5 var(--header-serif); letter-spacing:2px;
}
.site-header.shared-header .brand-mark {
  display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px;
  position:static; transform:none; background:var(--header-green); color:white;
  border:0; border-radius:12px; font:700 29px/1.5 var(--header-serif); letter-spacing:0;
}
.site-header.shared-header .brand-mark::before,
.site-header.shared-header .brand-mark::after {content:none}
.site-header.shared-header .shared-brand-name {font:inherit; letter-spacing:inherit}
.site-header.shared-header .brand small {
  display:block; margin:0; color:var(--header-muted);
  font:400 10px/1.6 var(--header-sans); letter-spacing:2.5px;
}
.site-header.shared-header .shared-header-actions {display:flex; align-items:center; min-width:0; flex-shrink:0}
.site-header.shared-header .language-picker {position:relative; flex-shrink:0; z-index:20}
.site-header.shared-header .language-picker summary {
  box-sizing:border-box; display:flex; align-items:center; gap:8px; min-height:44px;
  margin:0; padding:8px 10px; list-style:none; cursor:pointer;
  border:1px solid transparent; border-radius:8px; background:transparent;
  color:inherit; font:400 12px/1.5 var(--header-sans); touch-action:manipulation;
}
.site-header.shared-header .language-picker summary::-webkit-details-marker {display:none}
.site-header.shared-header .language-picker summary:hover,
.site-header.shared-header .language-picker[open] summary {background:#e7eddf; border-color:#d1d9c8}
.site-header.shared-header summary:focus-visible,
.site-header.shared-header a:focus-visible {outline:3px solid #98732d; outline-offset:3px}
.site-header.shared-header .globe {display:block; width:23px; height:23px; flex-shrink:0}
.site-header.shared-header .chevron {display:block; width:12px; height:12px; flex-shrink:0}
.site-header.shared-header .language-picker[open] .chevron {transform:rotate(180deg)}
.site-header.shared-header .language-menu {
  box-sizing:border-box; position:absolute; inset:auto; inset-inline-end:0; inset-inline-start:auto;
  top:calc(100% + 10px); display:block; width:250px; min-width:0; max-width:calc(100vw - 40px);
  max-height:min(560px,70vh); overflow:auto; overscroll-behavior:contain;
  margin:0; padding:8px; background:#fffefa; border:1px solid var(--header-line);
  border-radius:12px; box-shadow:0 12px 36px #26362920; color:var(--header-ink);
}
.site-header.shared-header .language-menu p {
  font:400 11px/1.5 var(--header-sans); color:var(--header-muted);
  padding:10px 12px; margin:0; border-bottom:1px solid var(--header-line);
}
.site-header.shared-header .language-menu a {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:44px; padding:10px 12px; border-radius:6px;
  color:inherit; font:400 14px/1.5 var(--header-sans); text-decoration:none; touch-action:manipulation;
}
.site-header.shared-header .language-menu a:hover {background:#f0f2e9}
.site-header.shared-header .language-menu a[aria-current] {background:#e7eddf; color:var(--header-green); font-weight:600}
.site-header.shared-header .language-menu a:focus-visible {outline-offset:-3px}
.site-header.shared-header .current-language {display:block}
@media(max-width:900px) {:root {--site-gutter:28px}}
@media(max-width:640px) {
  :root {--site-gutter:20px}
  .site-header.shared-header {min-height:94px; gap:10px}
  .site-header.shared-header .brand {font-size:20px; gap:9px; letter-spacing:1px}
  .site-header.shared-header .brand-mark {width:40px; height:40px; flex-basis:40px}
  .site-header.shared-header .current-language {display:none}
  .site-header.shared-header .language-picker summary {padding:8px}
  .site-header.shared-header .language-menu {max-height:65vh}
}
@media print {.site-header.shared-header {display:none}}
/* The same font-independent mark is used in every UI locale and the favicon. */
.site-header.shared-header .brand-mark svg {display:block; width:100%; height:100%}