/* Shared shell for every page this repository renders: design tokens, base elements, the header,
   the first-visit notice, the footer, buttons and the accessibility affordances. It is loaded by
   both `homepage-head` and `head`, so the homepage and the template pages (policy, guide, error)
   carry one header, one notice and one footer instead of the two shells PLAN-038 M-08 found.
   Page-specific rules stay in `home.css` (homepage sections) and `site.css` (policy/guide/error
   content). Its URL does not change with its contents, so bump the `?v=` in both head defines
   whenever this file changes — see docs/gotchas.md. */
:root{--ink:#11162e;--navy:#10172f;--blue:#5268f5;--blue-hover:#4056d7;--violet:#806ff4;--muted:#68738a;--line:#e2e7f1;--soft:#f3f5fb;--panel:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;color:var(--ink);background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:0}html{scroll-behavior:smooth;scroll-padding-top:100px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;display:block}p{line-height:1.75}h1,h2,h3,p,figure{margin:0}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--violet);outline-offset:5px}
.wrap{width:min(1320px,calc(100% - 80px));margin-inline:auto}
.skip-link{position:fixed;left:20px;top:-100px;background:white;padding:14px;z-index:50}.skip-link:focus{top:12px}
.eyebrow{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.12em;font-weight:650;color:var(--blue);line-height:1.5}
.brand-line{width:23px;height:2px;background:var(--blue);flex:none}
.eyebrow>span{width:23px;height:2px;background:currentColor;flex:none}

/* Header. The three page anchors live inside a native <details> so they stay reachable below
   760px without a line of JavaScript (PLAN-038 A4); above it the summary is hidden and the
   content is forced visible, so the desktop row is unchanged. */
.header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{height:86px;display:flex;align-items:center;gap:50px}
.brand{display:flex;align-items:center;min-height:44px}.brand img{width:110px;height:auto}
.nav nav{margin-left:auto}
.menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;font-size:13px;list-style:none;border:1px solid var(--line);border-radius:9px;padding:0 12px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{border-color:var(--blue);color:var(--blue)}
.menu-links{display:flex;gap:30px;align-items:center}
.nav nav a,.login{font-size:14px;display:flex;align-items:center;min-height:44px}
.nav-actions{display:flex;gap:28px;align-items:center}
.nav a:hover,.footer a:hover{color:var(--blue)}
/* `::details-content` is how current engines hide a closed <details>; forcing it visible is what
   keeps the desktop row identical to the pre-A4 `.nav nav` flex row. The `display:contents` makes
   the generated box disappear so `.menu-links` lays out directly inside `.menu`. The @supports
   guard means an engine without the pseudo-element keeps the 菜单 summary on desktop — a working
   collapsed menu — instead of losing the navigation entirely. */
@media(min-width:761px){
  .menu::details-content{content-visibility:visible;display:contents}
  @supports selector(::details-content){.menu>summary{display:none}}
}

.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:58px;padding:0 26px;border:1px solid transparent;border-radius:9px;font-size:16px;font-weight:650;transition:background .18s,transform .18s}
.button [aria-hidden]{font-size:23px;font-weight:400}
.button.primary,.button.small{background:var(--blue);color:#fff}
.button:hover{background:var(--blue-hover);transform:translateY(-2px)}
.button.small{min-height:44px;font-size:13px;padding:0 17px;gap:18px}
.button.small [aria-hidden]{font-size:18px}

/* First-visit analytics notice (PLAN-061). In document flow, never modal: the collection it
   describes is not optional, so there is nothing to decide and nothing that should block the page.
   Identical markup and placement on every page since PLAN-038 A3. */
.site-notice{display:flex;align-items:center;gap:32px;border-block:1px solid var(--line);padding:18px 0;color:var(--muted);width:min(1320px,calc(100% - 80px));margin-inline:auto}
.site-notice[hidden]{display:none}
.site-notice-title{font-size:13px;font-weight:650;color:var(--ink);line-height:1.5;margin-bottom:3px}
.site-notice-copy{font-size:13px;line-height:1.65;max-width:970px}
.site-notice a{text-decoration:underline;text-underline-offset:3px}
.site-notice-content{min-width:0;flex:1}
.site-notice button{display:flex;align-items:center;justify-content:center;gap:17px;flex:none;background:white;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:0 18px;font-size:13px}
.site-notice button:hover{border-color:var(--blue);background:var(--soft)}
.site-notice .button{flex:none;min-height:44px;font-weight:400}

.footer{padding-top:64px;padding-bottom:28px}
.footer-top{display:flex;align-items:center;gap:24px;padding-bottom:32px}
.footer-top .brand img{width:85px}
.footer-top>p{font-size:12px;color:var(--muted)}
/* `flex-wrap` because the footer navigation is at exactly zero slack at 320px with four links
   (measured: 288px of content in a 288px row). Without it the next label to grow overflows the page
   instead of dropping to a second line. */
.footer nav{display:flex;flex-wrap:wrap;gap:28px;margin-left:auto}
.footer a{display:flex;align-items:center;min-height:44px;font-size:12px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:11px}
.footer-bottom>div{display:flex;gap:25px}
.platform-errors{color:var(--ink)}

@media(min-width:761px) and (max-width:1080px){.wrap,.site-notice{width:calc(100% - 48px)}.nav{gap:24px}.menu-links{gap:18px}.nav-actions{gap:18px}}
@media(max-width:760px){
  html{scroll-padding-top:85px}
  .wrap,.site-notice{width:calc(100% - 40px)}
  .nav{height:66px;gap:12px}
  .brand img{width:82px}
  .nav nav{margin-left:auto}
  .menu{position:relative}
  .menu>summary{font-size:12px;padding:0 11px;gap:6px}
  /* Absolute, so opening the menu never reflows the sticky header or the page under it. */
  .menu-links{position:absolute;right:0;top:calc(100% + 9px);z-index:30;flex-direction:column;align-items:stretch;gap:0;min-width:150px;padding:4px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 34px rgba(17,22,46,.14)}
  .nav nav a{font-size:13px}
  .nav-actions{gap:14px}
  .nav-actions .login{font-size:12px}
  .button.small{font-size:12px;padding:0 13px;gap:12px;min-height:44px}
  .button.primary{min-height:51px;font-size:14px;padding:0 21px;gap:24px}
  .site-notice{gap:14px;align-items:stretch;flex-direction:column;padding:15px 0}
  .site-notice-title{font-size:12px}
  .site-notice-copy{font-size:13px}
  .site-notice button{align-self:flex-end;font-size:12px;min-height:44px}
  .footer{padding-top:37px;padding-bottom:20px}
  .footer-top{flex-wrap:wrap;gap:10px 17px;padding-bottom:20px}
  .footer-top>p{font-size:12px}
  .footer nav{width:100%;margin:0;gap:24px}
  .footer-bottom{gap:5px;flex-wrap:wrap;font-size:10px}
  .footer-bottom>div{gap:20px}
  .footer-bottom a{font-size:12px}
}
@media(max-width:360px){.wrap,.site-notice{width:calc(100% - 32px)}.nav{gap:8px}.menu>summary{padding:0 9px}.button.primary{padding:0 17px;gap:17px}.nav-actions{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.button:hover{transform:none}}

@media(max-width:360px){.nav-actions .button.small [aria-hidden]{display:none}.nav-actions .button.small{padding:0 10px}}

/* Device downloads and the user-requested desktop-to-Android handoff. */
.download-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;max-width:calc(100% - 32px);width:max-content;padding:14px 20px;background:var(--ink);color:white;border-radius:9px;font-size:14px;box-shadow:0 8px 24px #11162e20}
.download-status[hidden],.qr-trigger[hidden]{display:none}
.download-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);padding:32px;border:1px solid var(--line);border-radius:16px;color:var(--ink);background:var(--panel)}
.download-dialog::backdrop{background:#10172f66}
.dialog-close{display:block;margin:-16px -12px 12px auto;padding:10px 12px;min-height:44px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:14px}
.dialog-close:hover{background:var(--soft)}
.download-dialog h2{font-size:24px;line-height:1.4;margin:12px 0}
.download-dialog p:not(.eyebrow){font-size:14px;color:var(--muted)}
.download-qr{width:232px;height:232px;margin:16px auto 0;background:white}
.download-dialog .qr-address{text-align:center;font-size:12px;overflow-wrap:anywhere;margin-bottom:24px}
.download-dialog .button{width:100%}
.qr-status{margin-top:12px}
.qr-trigger{display:block;padding:8px 0;min-height:44px;border:0;background:transparent;color:var(--blue);font-size:14px;text-align:left}
[aria-busy="true"]{cursor:progress}
@media(max-width:480px){.download-dialog{padding:24px}.download-dialog h2{font-size:22px}.download-status{bottom:16px}}