/* Confluence site chrome — nav, mobile menu, footer, buttons. Shared by every page.
   Loads after tokens.css (and after style.css on inner pages). Values via var() only.
   Page content lives in site.css (new pages) or style.css + long.css (long-form pages). */

:root{
  --gx:clamp(20px,4.4vw,var(--pad-x));
  --wrap-w:min(var(--wrap), calc(100vw - 2 * var(--gx)));
  --nav-h:76px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --rule-soft:color-mix(in srgb, var(--band-mut) 34%, transparent);
}

.x-skip{position:absolute;left:var(--gx);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px;font-size:14px;text-decoration:none}
.x-skip:focus{top:12px}
.x-wrap{width:var(--wrap-w);margin-inline:auto}

/* ── Nav ─────────────────────────────── */
.x-nav{
  position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gx);
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .6s var(--ease-out),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.x-nav.is-solid{background:var(--paper);border-bottom-color:var(--hairline)}
.x-nav.is-hidden{transform:translateY(-101%)}
.x-mark{font-family:var(--brand);font-weight:700;font-size:clamp(17px,1.6vw,21px);letter-spacing:.08em;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.2}
.x-mark .dot{color:var(--terra)}
.x-mark .zh{font-family:var(--sans);font-weight:500;font-size:.8em;letter-spacing:.12em;color:var(--muted);margin-left:.45em}
.x-nav-links{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);font-family:var(--sans);font-size:var(--t-nav);letter-spacing:.3em;line-height:1.6}
html[lang="en"] .x-nav-links{letter-spacing:.08em}
.x-nav-links > a:not(.x-btn){position:relative;text-decoration:none;color:var(--text);padding:6px 0}
.x-nav-links > a[aria-current]:not(.x-btn){color:var(--terra-deep)}
.x-nav-links > a:not(.x-btn)::after{content:"";position:absolute;left:0;right:.3em;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.x-nav-links > a:not(.x-btn):hover::after{transform:scaleX(1);transform-origin:left}
.x-lang{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--faint);display:inline-flex;gap:.5em}
.x-lang .cur{color:var(--ink)}
.x-lang a{text-decoration:none;color:var(--muted)}
.x-lang a:hover{color:var(--ink)}
.x-menu-btn{display:none}

/* ── Buttons ─────────────────────────── */
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-width:6em;box-sizing:border-box;
  font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.12em;line-height:1.25;white-space:nowrap;
  padding:.95em 2.2em;border:1px solid transparent;border-radius:var(--btn-radius);
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.x-btn:hover{background:var(--btn-primary-bg-hover)}
.x-btn-sm{font-size:15px;letter-spacing:.14em;padding:.62em 1.3em;min-height:36px;background:transparent;color:var(--ink);border-color:var(--ink)}
.x-btn-sm:hover{background:var(--ink);color:var(--paper)}
html[lang="en"] .x-btn{letter-spacing:.04em}

/* ── Footer (the page's deep band) ───── */
footer.x-foot{
  display:block;position:relative;overflow:hidden;
  background:var(--deep);color:var(--band-mid);
  padding:clamp(80px,9vw,136px) 0 0;border-top:0;
  font-family:var(--sans);letter-spacing:var(--tracking-body);
}
.x-foot > .x-wrap{position:relative}
.x-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;font-size:15px;line-height:2}
.x-foot-cols div{display:flex;flex-direction:column;align-items:flex-start}
.x-foot-cols a{text-decoration:none;color:var(--band-mid);transition:color var(--dur) var(--ease)}
.x-foot-cols a:hover{color:var(--band-bright)}
.x-foot-h{font-size:var(--site-t-label);letter-spacing:var(--site-tracking-seclabel);color:var(--band-mut);margin-bottom:14px}
.x-foot-mark{margin-top:clamp(72px,9vw,140px)}
.x-foot-mark .wm{display:inline-block;font-family:var(--brand);font-weight:700;color:var(--band-bright);font-size:12.4vw;line-height:.78;letter-spacing:-.01em;white-space:nowrap;margin-left:-.04em}
.x-foot-mark .dot{color:var(--terra)}
.x-seal{display:inline-grid;place-items:center;min-width:var(--seal-size);min-height:var(--seal-size);padding:6px 0;background:var(--seal-bg);color:var(--seal-fg);border-radius:var(--seal-radius);position:absolute;right:0;top:0}
.x-seal span{writing-mode:vertical-rl;font-family:var(--serif);font-weight:var(--w-serif);font-size:15px;line-height:1;letter-spacing:.1em;white-space:nowrap}
.x-foot-base{display:flex;justify-content:space-between;gap:16px;margin-top:clamp(28px,3vw,44px);padding-block:22px 28px;border-top:1px solid var(--rule-soft);font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--band-mut)}

/* ── Responsive ──────────────────────── */
@media (max-width:1100px){
  .x-nav-links{letter-spacing:.2em}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .x-nav-links{display:none}
  .x-menu-btn{
    display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 2px;
    background:none;border:0;cursor:pointer;color:var(--ink);font:500 14px/1 var(--sans);letter-spacing:.3em;
  }
  html[lang="en"] .x-menu-btn{letter-spacing:.12em}
  .x-menu-lines{position:relative;width:22px;height:9px}
  .x-menu-lines::before,.x-menu-lines::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease-out)}
  .x-menu-lines::before{top:0}.x-menu-lines::after{bottom:0}
  .x-menu-btn[aria-expanded="true"] .x-menu-lines::before{transform:translateY(3.75px) rotate(45deg)}
  .x-menu-btn[aria-expanded="true"] .x-menu-lines::after{transform:translateY(-3.75px) rotate(-45deg)}
  .x-menu{
    position:fixed;inset:0;z-index:35;background:var(--paper);
    display:flex;flex-direction:column;justify-content:space-between;
    padding:calc(var(--nav-h) + 32px) var(--gx) calc(28px + env(safe-area-inset-bottom));
  }
  .x-menu[hidden]{display:none}
  .x-menu nav{display:flex;flex-direction:column}
  .x-menu nav a{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:var(--site-w-title);font-size:40px;line-height:1.3;letter-spacing:.12em}
  html[lang="en"] .x-menu nav a{letter-spacing:.01em}
  .x-menu nav a[aria-current]{color:var(--terra)}
  .x-menu nav a .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--terra)}
  .x-menu-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .x-menu-lang{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--muted);text-decoration:none}
  .js .x-menu nav a{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms + 80ms)}
  .js .x-menu.is-open nav a{opacity:1;transform:none}
  body.menu-open{overflow:hidden}
  .x-nav.menu-open{background:var(--paper);border-bottom-color:transparent}
  .x-foot-cols{grid-template-columns:1fr 1fr}
  .x-foot-cols div:last-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .x-mark .zh{display:none}
  .x-foot-cols{grid-template-columns:1fr;gap:32px}
  .x-seal{min-width:36px;min-height:36px}
  .x-seal span{font-size:12px}
  .x-foot-base{flex-direction:column;gap:6px}
}

/* ── Large screens (≥1800px): chrome grows with the page ── */
@media (min-width:1800px){
  :root{--gx:clamp(40px,3.2vw,96px);--wrap-w:min(1680px, calc(100vw - 2 * var(--gx)));--nav-h:92px}
  .x-mark{font-size:24px}
  .x-nav-links{font-size:17px}
  .x-lang{font-size:15px}
  .x-btn{font-size:18px}
  .x-btn-sm{font-size:17px}
  .x-foot-h{font-size:15px}
  .x-foot-cols{font-size:17px}
  .x-foot-base{font-size:13px}
  .x-seal{min-width:58px;min-height:58px}
  .x-seal span{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .x-nav,.js .x-menu nav a{transition:none!important}
}