/* The website's header and footer (content/partials/header.html and footer.html), on every page that carries them: the
   website's pages and the app's public ones (help, sign-in, invitations). One copy, served by both hosts
   (apps/website/delivery.json, sharedFiles); chrome.js runs the header. The tokens come from brand.css. */

/* What the header and footer need wherever they are, with or without the website's own stylesheet. */
:is(.site-header, .site-footer) :is(p, ul, li) { margin: 0; padding: 0; list-style: none; }
:is(.site-header, .site-footer) :is(img, svg) { display: block; }
.site-header button { font: inherit; color: inherit; }
.lang-menu .icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Functional navigation stays readable beside the printed wordmark and drawn ink marks. */
.site-header { position: relative; z-index: 50; background: var(--paper); }
.header-inner { display: flex; align-items: center; gap: var(--space-7); min-height: 72px; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); color: var(--ink); text-decoration: none; }
.site-nav a > span { position: relative; white-space: nowrap; transition: color .15s; }
.site-nav a > span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-bottom: 1px solid currentColor; border-radius: 50%; opacity: 0; }
.site-nav a:hover > span::after, .site-nav a[aria-current] > span::after { opacity: 1; }
.site-nav a:hover > span, .site-nav a[aria-current] > span { color: var(--accent-text); }
.site-nav .nav-cta, .site-nav .nav-more { display: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); margin-left: auto; }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.link-quiet:hover { color: var(--ink); }
.header-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); text-decoration: none; }
.header-cta:hover { background: var(--ink-soft); }
.header-cta::after { content: '\2192'; transition: transform .2s var(--ease); }
.header-cta:hover::after { transform: translateX(2px); }
.site-nav a > span, .header-cta, .lang-menu summary, .nav-toggle { font: 500 15px/var(--lh-ui) var(--sans); letter-spacing: 0; text-transform: none;
  white-space: nowrap; }
/* Keep navigation on one row until the mobile menu takes over. */
@media (min-width: 961px) and (max-width: 1100px) {
  .header-inner { gap: var(--space-6); }
  .site-nav { gap: var(--space-4); }
  .header-actions { gap: var(--space-3); }
}
/* Language menu: the current language's short name, as the header's other words; the list, a sheet with an ink edge,
   names each language in its own words. */
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; height: 44px; padding: 0 8px; color: var(--ink); list-style: none;
  cursor: pointer; transition: color .15s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--accent-text); }
.lang-menu summary .icon { display: block; width: 18px; height: 18px; }
.lang-list { position: absolute; z-index: 60; top: calc(100% + 4px); right: 0; min-width: 168px; padding: 4px 0; border: 1px solid var(--ink); background: var(--paper); }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding: 12px 16px; color: var(--ink-soft); font: 400 15px/var(--lh-heading) var(--sans); text-decoration: none; }
.lang-list a:hover { background: var(--paper-deep); color: var(--ink); }
.lang-list a[aria-current]::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lang-list a[aria-current] { color: var(--ink); font-weight: 500; }
/* Offered once on an English page to a browser that prefers Chinese. */
.lang-hint { position: fixed; z-index: 90; left: 16px; bottom: 16px; display: flex; align-items: center; gap: var(--space-3) var(--space-4); max-width: min(440px, calc(100% - 32px)); padding: 12px 8px 12px 20px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -18px rgba(36, 40, 34, .55); font: 400 14px/var(--lh-ui) var(--sans); }
.lang-hint a { color: inherit; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.lang-hint-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .75; }
.lang-hint-close:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.nav-toggle { display: none; align-items: center; justify-content: flex-end; min-width: 44px; height: 44px; padding: 0 0 0 8px; border: 0; background: none; color: var(--ink);
  cursor: pointer; }
.nav-toggle .when-open, .site-header.is-open .nav-toggle .when-closed { display: none; }
.site-header.is-open .nav-toggle .when-open { display: inline; }
.site-nav a[aria-current="true"] { color: var(--ink); }

/* Footer: under an ink rule, the wordmark and its line, then the site's pages in four short lists under small mono
   headings, and a base line in the same mono. */
.site-footer { padding: 0 0 32px; background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8) var(--space-7); padding-top: 28px; border-top: 2px solid var(--ink); }
.footer-brand p { margin-top: var(--space-4); font-size: 15px; line-height: var(--lh-snug); color: var(--muted); }
.footer-social { display: flex; gap: var(--space-1); margin: var(--space-4) 0 0 -12px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-soft); transition: color .15s; }
.footer-social a:hover { color: var(--ink); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-nav { display: grid; align-content: start; gap: var(--space-3); }
.footer-h { margin-bottom: var(--space-2); font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.footer-nav a { width: fit-content; font-size: 15px; color: var(--ink); text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.footer-nav a:hover { text-decoration-color: currentColor; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-7); margin-top: var(--space-10); padding-top: 16px; border-top: 1px solid var(--ink); font: 500 12px/var(--lh-ui) var(--mono); color: var(--muted); }
/* The end of the page as the end of a piece: a final barline under a fermata, in the text's grey. The
   viewBox centres the staff on the text beside it and ends at the barline, so the staff stops on the
   column's right edge, as it would at a page margin, even when the row wraps; the fermata overhangs, as
   engraved ones do. */
.fine-mark { display: inline-flex; margin-left: auto; }
.fine-mark svg { width: 28px; height: 32.5px; overflow: visible; fill: currentColor; stroke: currentColor; }
.fine-mark .fine-staff { stroke-width: .8; opacity: .55; }
.fine-mark .fine-bar { stroke-width: 1.1; }
.fine-mark rect, .fine-mark circle { stroke: none; }
.fine-mark .fine-arc { fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* Narrower windows. */
@media (max-width: 1100px) {
  .site-nav { gap: var(--space-6); }
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  /* On a phone the header stays at the top, one row: the name, the language, the way in and the menu button, with a
     rule under it once the page moves. */
  .site-header { position: sticky; top: 0; transition: box-shadow .2s; }
  .site-header.is-scrolled { box-shadow: 0 1px 0 var(--ink); }
  .header-inner { height: 72px; align-items: center; gap: var(--space-6); padding: 0; }
  .brand span { --mark: 16px; }
  .header-actions { gap: var(--space-4); margin: 0 0 0 auto; }
  /* The menu is a page of its own under the header, as on most product sites: it covers the page, which
     stops scrolling (site.js), lists the pages in the header's capitals on ruled rows, and keeps the workspace button
     within thumb reach at the foot. */
  .menu-open, .menu-open body { overflow: hidden; }
  .site-header.is-open { background: var(--paper); box-shadow: 0 1px 0 var(--ink); }
  .site-header.is-open .header-cta { visibility: hidden; opacity: 0; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
  .site-header.is-open .site-nav { visibility: visible; opacity: 1; transition: opacity .25s var(--ease); }
  .site-nav a { min-height: 60px; margin-inline: 0; padding-inline: 0; border-bottom: 1px solid var(--line-strong); color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s; }
  .site-nav a > span { font-size: 24px; }
  .site-header.is-open .site-nav a { opacity: 1; transform: none; transition-duration: .45s; }
  .site-header.is-open .site-nav a:nth-child(2) { transition-delay: .03s; }
  .site-header.is-open .site-nav a:nth-child(3) { transition-delay: .06s; }
  .site-header.is-open .site-nav a:nth-child(4) { transition-delay: .09s; }
  .site-header.is-open .site-nav a:nth-child(n + 5) { transition-delay: .14s; }
  .site-nav a[aria-current] > span { color: var(--accent-text); }
  /* Help, privacy and terms take the free space above the workspace button at the foot. */
  .site-nav .nav-more { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin-top: auto; padding-top: 32px; }
  .site-nav .nav-more a { min-height: 44px; border: 0; font: 500 15px/var(--lh-ui) var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .site-nav .nav-more a:hover { color: var(--ink); }
  .site-nav a.nav-cta { display: flex; align-items: center; justify-content: center; flex: none; height: 50px; margin-top: var(--space-4); padding: 0 24px; border-radius: var(--radius-sm); font: 500 18px/var(--lh-ui) var(--sans); letter-spacing: 0; }
  .site-nav a.nav-cta { border: 0; background: var(--ink); color: var(--paper); }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* The footer's five columns of links sit under its brand until there is room beside it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .header-cta { display: none; }
  /* Signed in, the header holds the language, the avatar and the menu: tighten so none of them wraps. */
  .header-inner { gap: var(--space-3); }
  .header-actions { gap: var(--space-2); }
  .lang-menu summary { padding: 0 8px; }
}
@media (max-width: 380px) {
  .header-inner { gap: var(--space-2); }
  .brand { gap: var(--space-2); }
  .brand span { --mark: 12px; }
  .header-actions { gap: var(--space-1); }
  .lang-menu summary { padding-inline: 4px; }
}

/* The header's words in Chinese: the site's sans a size up, without capitals or tracking, which Chinese has no use for. */
:root:lang(zh) :is(.site-nav a > span, .header-cta, .nav-toggle) { font-family: var(--sans); font-size: 15px; letter-spacing: 0; }
@media (max-width: 960px) {
  :root:lang(zh) .site-nav a > span { font-size: 32px; line-height: var(--lh-heading); }
}
[data-theme=dark] .site-header.is-open { background: var(--paper); }