/* Main-site typography. Load after /ds/zs.css and /ds/fonts/serif-5.3.0.css.
   Font assets and licences live in /ds/fonts/; the shared design system stays reusable. */
:root {
  --font-body: "Source Serif 4 Variable", "Noto Serif SC Variable", Georgia,
    "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --font-heading: var(--font-body);
}

body { font-family: var(--font-body); }

.zs-btn, .zs-seg > *, .zs-chips > *, .zs-input, .zs-select, .zs-textarea, .zs-brand .zs-sub {
  font-family: var(--font-body);
}

/* Code and aligned values retain JetBrains Mono; canvas renderers use it directly. */
pre, code, kbd, samp, .tnum { font-family: var(--font-mono); }

/* Compact leading, with natural letter and word spacing. */
main p:not(.tnum, .zs-label, .zs-readout) { line-height: 1.55; }

/* Top-bar tabs, at every width: bare text, no panel, no outline, no fill. The current page is simply darker. */
.zs-topbar .zs-tabs [aria-current="page"] { background: none; }
.zs-navbtn { display: none; }

/* Wide screens: the tabs leave the top bar and float on the left of the page, centred in the window and fixed as it
   scrolls, numbered like a table of contents with the numbers lined up under the ZHANG.stream brand.
   Below 1200px there isn't room beside the 880px column, so they stay in the top bar.
   `nav.zs-tabs` outranks ranger.js's injected `.zs-tabs.zr-nav { position: relative }`. */
@media (min-width: 1200px) {
  .zs-topbar nav.zs-tabs {
    position: fixed; z-index: 10; top: 50%; left: calc(50% - 566px); transform: translateY(-50%);
    margin: 0; padding: 0; overflow: visible; counter-reset: dock;
    flex-direction: column; align-items: flex-start; gap: 0; font-size: 14px;
  }
  .zs-topbar nav.zs-tabs a {
    position: relative; height: 30px; padding: 0 0 0 30px; counter-increment: dock;
    color: var(--muted-foreground); transition: color .3s;
  }
  .zs-topbar nav.zs-tabs a::before { /* the number; out of flow, so a struck-out label doesn't strike it too */
    content: counter(dock, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    font: 10px/1 var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--muted-foreground) 65%, transparent); transition: color .3s;
  }
  .zs-topbar nav.zs-tabs a[href="/trade/"] { margin-top: 18px; } /* a gap, not a rule, sets the struck-out pair apart */
  .zs-topbar nav.zs-tabs a[style*="line-through"] { opacity: .55; }
  .zs-topbar nav.zs-tabs .zr-mark { margin-left: 13px; } /* the Ranger's head sits just past the label, not on it */
  .zs-topbar nav.zs-tabs a:is(:hover, :focus-visible, [aria-current="page"]),
  .zs-topbar nav.zs-tabs a:is(:hover, :focus-visible, [aria-current="page"])::before { color: var(--foreground); }
}

/* Phones: /nav.js folds the tabs behind an Index button and they open as a full-screen numbered index under the top
   bar, with the same 01–08 as the wide-screen column. Without the script the bar keeps its swipeable row.
   --zs-nav-top is the bar's bottom edge when it opened (the page may be scrolled a little); z-index clears the Ranger. */
@media (max-width: 640px) {
  .zs-navbtn {
    display: inline-flex; align-items: center; gap: 8px; height: var(--control); margin: 0 -8px 0 auto; padding: 0 8px;
    border: 0; background: none; color: var(--foreground); font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .zs-navbtn i { position: relative; width: 9px; height: 9px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .zs-navbtn i::before, .zs-navbtn i::after { content: ""; position: absolute; background: currentColor; }
  .zs-navbtn i::before { inset: 4px 0 auto; height: 1px; }
  .zs-navbtn i::after { inset: 0 auto 0 4px; width: 1px; }
  .zs-nav-open .zs-navbtn i { transform: rotate(45deg); }
  .zs-nav-open { overflow: hidden; }

  .zs-topbar:has(.zs-navbtn) .zs-tabs {
    position: fixed; inset: var(--zs-nav-top, 36px) 0 0; z-index: 45; max-width: none; margin: 0;
    padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; counter-reset: dock;
    background: var(--background); -webkit-mask-image: none; mask-image: none;
    visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s;
  }
  .zs-nav-open .zs-topbar .zs-tabs { visibility: visible; opacity: 1; transition: opacity .3s; }
  .zs-topbar:has(.zs-navbtn) .zs-tabs a {
    position: relative; height: 44px; padding: 0 0 0 32px; counter-increment: dock;
    font-size: 20px; color: var(--muted-foreground);
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s, transform .6s cubic-bezier(.2, .8, .2, 1), color .3s;
  }
  .zs-topbar:has(.zs-navbtn) .zs-tabs a::before {
    content: counter(dock, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    font: 10px/1 var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
  }
  .zs-topbar:has(.zs-navbtn) .zs-tabs a:is([aria-current="page"], :active),
  .zs-topbar:has(.zs-navbtn) .zs-tabs a:is([aria-current="page"], :active)::before { color: var(--foreground); }
  .zs-topbar:has(.zs-navbtn) .zs-tabs a[href="/trade/"] { margin-top: 14px; }
  .zs-topbar:has(.zs-navbtn) .zs-tabs .zr-mark { margin: 17px 0 0 -4px; } /* the Ranger's head, centred on its row */
  .zs-nav-open .zs-topbar .zs-tabs a { opacity: 1; transform: none; }
  .zs-nav-open .zs-topbar .zs-tabs a[style*="line-through"] { opacity: .55; }
  /* Open in a short cascade, top to bottom; closing is all at once. */
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(2) { transition-delay: 30ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(3) { transition-delay: 60ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(4) { transition-delay: 90ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(5) { transition-delay: 120ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(6) { transition-delay: 150ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(7) { transition-delay: 180ms; }
  .zs-nav-open .zs-topbar .zs-tabs a:nth-of-type(8) { transition-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-topbar .zs-tabs, .zs-topbar .zs-tabs a, .zs-navbtn i { transition: none !important; }
}