:root {
  color-scheme: light;
  --g-bg: #f3f8f7;
  --g-paper: #ffffff;
  --g-text: #152022;
  --g-muted: #5c6f72;
  --g-line: #d5e3e4;
  --g-teal: #0d9488;
  --g-teal-deep: #0f766e;
  --g-teal-soft: #e7f6f4;
  --g-ink: #0e1b1e;
  --g-warn: #b45309;
  --g-warn-bg: #fff7ed;
  --g-sidebar: 280px;
  --g-top: 58px;
  --g-top-safe: calc(var(--g-top) + env(safe-area-inset-top, 0px));
  --g-toc: 236px;
  --g-measure: 68ch;
  --g-ease: cubic-bezier(.22, 1, .36, 1);
  /* Overshoots slightly, so drawers and the TOC marker settle instead of stopping dead. */
  --g-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --g-ease-out: cubic-bezier(.16, 1, .3, 1);
  --g-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --g-font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  --g-font-ui: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--g-top-safe) + 16px); }
body.g-body {
  font: 16.5px/1.7 var(--g-font-body);
  color: var(--g-text);
  background:
    radial-gradient(1200px 480px at 12% -10%, rgba(13, 148, 136, .08), transparent 55%),
    radial-gradient(900px 420px at 92% 0%, rgba(15, 118, 110, .06), transparent 50%),
    var(--g-bg);
  min-height: 100vh;
}
html.script-cjk body.g-body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}
.g-skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--g-ink); color: #fff; padding: 8px 12px; border-radius: 8px;
  z-index: 80;
}
.g-skip:focus { left: 12px; outline: 2px solid #5eead4; outline-offset: 2px; }

/* ——— Top banner ———
   One row, four zones: nav (mobile only) · brand · secondary controls · one
   primary action. Nothing in it is allowed to grow enough to crowd the others,
   so the same markup stays legible from 320px to a wide desktop. */
.g-top {
  position: sticky; top: 0; z-index: 40;
  height: var(--g-top-safe);
  display: flex; align-items: center; gap: 8px;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  /* Opaque on purpose: a backdrop-filter on a sticky bar costs a compositing
     layer on every scroll frame, and behind a near-opaque dark fill there is
     nothing left to see through. The elevation shadow does the work instead. */
  background: linear-gradient(180deg, #101f22 0%, var(--g-ink) 100%);
  color: #f5f5f4;
  border-bottom: 1px solid rgba(45, 90, 94, .5);
  box-shadow: 0 0 0 rgba(6, 16, 18, 0);
  transition: box-shadow .3s var(--g-ease-out), border-color .3s var(--g-ease-out);
}
/* Lifts off the page only once there is something scrolled underneath it. */
body.is-scrolled .g-top {
  border-bottom-color: rgba(45, 90, 94, .75);
  box-shadow: 0 10px 28px -18px rgba(6, 16, 18, .9);
}
/* Reading progress, hairline along the bottom edge of the bar. */
.g-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(var(--g-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--g-teal) 0%, #5eead4 100%);
  opacity: 0;
  transition: opacity .3s var(--g-ease-out);
  pointer-events: none;
}
body.is-scrolled .g-progress { opacity: 1; }
.g-brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; min-width: 0;
  flex-shrink: 1;
}
.g-brand img { width: 28px; height: 28px; border-radius: 7px; display: block; flex-shrink: 0; }
.g-brand > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 1.1;
}
.g-brand-name {
  font-family: var(--g-font-display);
  font-weight: 700; font-size: 14.5px; letter-spacing: -.015em;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-brand-sub {
  font-family: var(--g-font-ui);
  font-size: 10.5px; color: #8aa3a6;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}
.g-top-spacer { flex: 1; min-width: 4px; }
/* The one primary action in the bar. Deliberately a compact pill rather than a
   full-size button: it sat at 44px with a glow and read as a banner ad. The
   44px touch target is preserved by the ::before overlay, not by the box. */
.g-top a.g-open {
  font-family: var(--g-font-ui);
  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  letter-spacing: -.005em;
  background: linear-gradient(135deg, var(--g-teal) 0%, var(--g-teal-deep) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  min-height: 34px;
  padding: 7px 13px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset;
  transition:
    filter .2s var(--g-ease-out),
    transform .2s var(--g-ease-out),
    box-shadow .2s var(--g-ease-out);
  white-space: nowrap; flex-shrink: 0;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
/* Keeps the tap area at 44px without inflating the visible pill. */
.g-top a.g-open::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 44px;
}
.g-top a.g-open:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .2) inset,
    0 6px 14px -6px rgba(13, 148, 136, .8);
}
.g-top a.g-open:active { transform: translateY(0) scale(.98); filter: brightness(.97); }
.g-top a.g-open:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
/* Two labels, one shown at a time — "See live numbers" does not fit a phone. */
.g-open-short { display: none; }
.g-top a.g-lib-link {
  font-family: var(--g-font-ui);
  color: #b9cccf; font-size: 13px; font-weight: 500; text-decoration: none;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  display: inline-flex; align-items: center;
  white-space: nowrap; flex-shrink: 0;
  transition: color .2s var(--g-ease-out), background .2s var(--g-ease-out);
}
.g-top a.g-lib-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.g-top a.g-lib-link:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.g-nav-btn {
  display: none;
  background: rgba(255, 255, 255, .05); color: #fff; border: 1px solid #2a4a4e;
  border-radius: 9px; width: 38px; height: 38px; cursor: pointer;
  flex-shrink: 0; align-items: center; justify-content: center;
  line-height: 0; padding: 0;
  position: relative;
  transition: background .2s var(--g-ease-out), border-color .2s var(--g-ease-out);
}
/* Drawn, not typed. The ☰ character's ink sits high inside its em box, so the
   button centred the text box correctly and the bars still looked pushed up. */
.g-nav-btn svg { display: block; }
.g-nav-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.g-nav-btn:hover { background: rgba(255, 255, 255, .1); border-color: #3d6a6e; }
.g-nav-btn:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }

.g-shell {
  display: grid;
  grid-template-columns: var(--g-sidebar) minmax(0, 1fr) var(--g-toc);
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  min-height: calc(100vh - var(--g-top-safe));
}

/* ——— Left sidebar ——— */
.g-sidebar {
  position: sticky; top: var(--g-top-safe);
  height: calc(100vh - var(--g-top-safe));
  overflow: auto;
  padding: 28px 14px 64px;
  border-right: 1px solid var(--g-line);
  background: linear-gradient(180deg, #fbfefd 0%, #f4faf9 100%);
}
.g-sidebar h2 {
  margin: 26px 8px 8px;
  font-family: var(--g-font-ui);
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: #7a9094;
  line-height: 1.3;
}
.g-sidebar h2:first-child { margin-top: 4px; }

/* ——— Library search, at the top of the nav ——— */
.g-search { margin: 0 8px 14px; }
.g-search input {
  width: 100%;
  font: 500 13.5px/1.4 var(--g-font-ui);
  color: var(--g-text);
  padding: 10px 12px;
  border: 1px solid var(--g-line);
  border-radius: 9px;
  background: var(--g-paper);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}
.g-search input:focus {
  outline: none; border-color: var(--g-teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16);
}
.g-search-results { margin-top: 10px; }
.g-search-hit {
  display: block;
  padding: 10px 12px;
  margin: 0 0 6px;
  border: 1px solid var(--g-line);
  border-radius: 9px;
  background: var(--g-paper);
  text-decoration: none;
  color: inherit;
}
.g-search-hit:hover { border-color: #9fd4ce; }
.g-search-lib {
  display: block;
  font-family: var(--g-font-ui);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-teal-deep);
}
.g-search-title {
  display: block;
  font-family: var(--g-font-ui);
  font-size: 13px; font-weight: 600; line-height: 1.35; margin-top: 2px;
}
.g-search-desc {
  display: block;
  font-size: 11.5px; line-height: 1.45; color: var(--g-muted); margin-top: 4px;
}
.g-search-empty {
  font-family: var(--g-font-ui);
  font-size: 12.5px; color: var(--g-muted); margin: 4px 12px;
}
/* :not() keeps the search results out of the 44px flex row treatment the nav
   items get — they are cards, not nav rows. */
.g-sidebar a:not(.g-search-hit), .g-sidebar .g-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin: 1px 0;
  min-height: 44px;
  border-radius: 7px;
  font-family: var(--g-font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #4d6366;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .18s ease, color .18s ease;
}
.g-sidebar a svg, .g-sidebar .g-soon svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: .78;
}
.g-sidebar a:hover {
  background: rgba(13, 148, 136, .08);
  color: #1a3336;
}
.g-sidebar a.is-active {
  background: rgba(13, 27, 30, .07);
  color: #102226;
  font-weight: 600;
}
.g-sidebar a.is-active:hover {
  background: rgba(13, 27, 30, .1);
  color: #102226;
}
.g-sidebar a.is-active svg { opacity: 1; }
.g-sidebar .g-soon {
  color: #9aadaf;
  cursor: default;
  justify-content: flex-start;
  font-weight: 450;
}
.g-sidebar a span, .g-sidebar .g-soon span.g-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-badge {
  font-family: var(--g-font-ui);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #8a9ea1;
  background: #eef4f4;
  border: 1px solid #dce7e8;
  border-radius: 999px;
  padding: 2px 7px;
  flex-shrink: 0;
  margin-left: auto;
  line-height: 1.4;
}

/* ——— Article ——— */
.g-article {
  background: var(--g-paper);
  border-right: 1px solid var(--g-line);
  padding: 60px 56px 72px;
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .38s var(--g-ease), transform .38s var(--g-ease);
}
.g-article.is-ready {
  opacity: 1;
  transform: none;
}
.g-article > * {
  max-width: var(--g-measure);
}
.g-article > .g-example,
.g-article > .g-grid,
.g-article > .g-pager,
.g-article > .g-table-wrap,
.g-article > .g-bottom-banner {
  max-width: none;
}
.g-kicker {
  font-family: var(--g-font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g-teal-deep); margin: 0 0 14px;
}
.g-article h1 {
  font-family: var(--g-font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0 0 18px;
  color: #0c1a1d;
}
.g-lede {
  font-size: 19px; line-height: 1.7; color: #3f4f52; margin: 0 0 34px;
}
.g-glossary {
  font-size: 15.5px;
  line-height: 1.65;
  color: #3f4f52;
  background: var(--g-teal-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 28px;
}
.g-glossary strong { color: var(--g-ink); font-weight: 700; }
/* Left, unlike the panel and the end-of-article CTA. This one sits between the
   H1 and the lede, and a centred button there makes the top of the page wobble
   against text that is flush left. */
.g-dash-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 36px;
  padding: 0;
}
/* A section break, not just a bigger line. The rule and the space above it are
   what stop eleven sections reading as one continuous column of text. */
.g-article h2 {
  font-family: var(--g-font-display);
  font-size: 24px; letter-spacing: -.02em;
  margin: 88px 0 22px; color: #102226;
  padding: 30px 10px 6px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 10px;
  border-top: 1px solid var(--g-line);
  scroll-margin-top: calc(var(--g-top-safe) + 18px);
  transition: background-color .55s var(--g-ease);
}
.g-article > h2:first-of-type { border-top: none; padding-top: 8px; margin-top: 56px; }
/* Panels bring their own frame, so the rule would double up on their heading. */
.g-product h2, .g-related h2 { border-top: none; padding-top: 0; margin-top: 0; }
.g-article h3 {
  font-family: var(--g-font-display);
  font-size: 17px; margin: 48px 0 14px; color: #102226;
  padding: 6px 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 8px;
  scroll-margin-top: calc(var(--g-top-safe) + 18px);
  transition: background-color .55s var(--g-ease);
}
.g-article h2.g-heading-flash,
.g-article h3.g-heading-flash {
  background-color: rgba(13, 148, 136, .16);
  transition: background-color .15s var(--g-ease);
}
.g-article p { margin: 0 0 1.4em; color: #3f4f52; line-height: 1.75; }
.g-article li { color: #3f4f52; }
.g-article a {
  color: var(--g-teal-deep);
  text-underline-offset: 2px;
  transition: color .18s ease;
}
.g-article a:hover { color: var(--g-teal); }
.g-article ul, .g-article ol { padding-left: 1.25em; margin: 0 0 1.5em; }
.g-article li + li { margin-top: 12px; }
.g-callout {
  border: 1px solid var(--g-line);
  background: #f4fbfa;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 28px 0;
}
.g-callout p { margin: 0 0 .85em; }
.g-callout p:last-child { margin-bottom: 0; }
.g-callout strong { color: #102226; }
.g-callout--warn { background: var(--g-warn-bg); border-color: #f3d7b0; }
.g-callout--agent { background: #f3f7ff; border-color: #d7e2f8; }
.g-callout--applicant { background: #f3fbf4; border-color: #cfe8d4; }
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 24px 0 12px;
}
.g-card {
  display: block;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color .22s var(--g-ease), box-shadow .22s var(--g-ease), transform .22s var(--g-ease);
}
a.g-card:hover {
  border-color: #9fd4ce;
  box-shadow: 0 10px 28px rgba(14, 27, 30, .06);
  transform: translateY(-2px);
}
.g-card h3 { margin: 0 0 8px; font-size: 15.5px; }
.g-card p { margin: 0; font-size: 13.5px; color: var(--g-muted); }
.g-card .g-badge { float: right; margin-top: 2px; }
.g-example {
  margin: 36px 0;
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfffe 0%, #f7fcfb 100%);
  padding: 20px 18px 14px;
}
/* The plot holds the height reservation; the caption below it is free to wrap
   to as many lines as a narrow screen needs. */
.g-example-plot { position: relative; }
.g-example canvas { width: 100% !important; max-height: 300px; }
.g-example figcaption {
  font-size: 12.5px; color: var(--g-muted); margin-top: 12px; line-height: 1.45;
}
.g-related {
  margin: 36px 0 8px;
  padding: 18px 18px 8px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: #fff;
}
.g-related h2 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.g-related p {
  margin: 0 0 12px;
  color: var(--g-muted);
  font-size: 14.5px;
}
.g-related ul { margin: 0; padding: 0; list-style: none; }
.g-related li { padding: 7px 0; border-top: 1px solid var(--g-line); font-size: 15px; }
.g-related-kicker {
  display: inline-block;
  min-width: 5.5rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g-teal-deep);
}
.g-cta-wrap {
  margin: 44px 0 8px;
  padding: 30px 26px 28px;
  border: 1px solid rgba(13, 148, 136, .18);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(13, 148, 136, .08), transparent 55%),
    #f7fbfa;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.g-cta-note {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--g-muted);
  line-height: 1.5;
}
.g-cta,
.g-article .g-dash-jump a.g-cta,
.g-article a.g-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--g-teal) 0%, var(--g-teal-deep) 100%);
  color: #fff !important;
  font-family: var(--g-font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 6px 16px -10px rgba(13, 148, 136, .65);
  cursor: pointer;
  min-height: 44px;
  transition:
    transform .2s var(--g-ease-out),
    filter .2s var(--g-ease-out),
    box-shadow .2s var(--g-ease-out);
  max-width: 100%;
}
.g-cta:focus-visible,
.g-article a.g-cta:focus-visible {
  /* Teal, not white: these buttons sit on the white article background. */
  outline: 2px solid var(--g-teal-deep);
  outline-offset: 3px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 0 0 5px rgba(13, 148, 136, .28);
}
.g-cta-sec:focus-visible,
.g-article a.g-cta-sec:focus-visible,
.g-nav-btn:focus-visible,
.g-sidebar a:focus-visible,
.g-pager a:focus-visible,
.g-toc-list a:focus-visible,
.g-lang .i18n-switcher:focus-visible,
.g-top a.g-lib-link:focus-visible {
  outline: 2px solid var(--g-teal);
  outline-offset: 3px;
}
.g-cta::after,
.g-article a.g-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .28) 50%, transparent 68%);
  transform: translateX(-120%);
  pointer-events: none;
}
.g-cta:hover,
.g-article a.g-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .24) inset,
    0 10px 20px -10px rgba(13, 148, 136, .7);
}
.g-cta:hover::after,
.g-article a.g-cta:hover::after {
  animation: gCtaSheen .55s var(--g-ease);
}
.g-cta:active,
.g-article a.g-cta:active {
  transform: scale(.985);
  filter: brightness(.98);
}
@keyframes gCtaSheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.g-cta--sm,
.g-dash-jump .g-cta {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 12px;
}
.g-cta-sec,
.g-article a.g-cta-sec {
  display: inline-flex;
  align-items: center;
  font-family: var(--g-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--g-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  min-height: 44px;
  padding: 10px 0;
}
.g-article a.g-cta-sec:hover { color: var(--g-teal); }
.g-product {
  margin: 40px 0 16px;
  padding: 30px 28px 28px;
  border: 1px solid rgba(13, 148, 136, .2);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 55% at 88% 8%, rgba(13, 148, 136, .12), transparent 58%),
    linear-gradient(165deg, #fbfffe 0%, #f3faf8 100%);
  box-shadow: 0 12px 32px -20px rgba(14, 27, 30, .18);
}
.g-product-kicker {
  font-family: var(--g-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-teal-deep);
  margin: 0 0 8px;
}
.g-article .g-product > h2,
.g-product > h2,
.g-product > h2:first-of-type {
  margin: 0 0 10px;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  font-size: 22px;
}
.g-product > p { margin: 0 0 14px; }
.g-product .g-example {
  margin: 4px 0 16px;
  background: #fff;
  box-shadow: 0 8px 24px -16px rgba(14, 27, 30, .2);
}
/* Centred, and stacked rather than strung along the left edge. A left-aligned
   button under a full-width figure reads as a footnote to it; the panel's whole
   job is to be the next step. */
.g-product-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 0;
}
.g-product-actions .g-cta { text-align: center; }
.g-product-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--g-muted);
  line-height: 1.55;
  text-align: center;
}
html.script-cjk .g-cta,
html.script-cjk .g-top a.g-open,
html.script-cjk .g-cta-sec {
  font-family: Figtree, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
html.script-cjk .g-cta { font-weight: 600; }
.g-table-wrap { overflow-x: auto; margin: 24px 0; }
.g-article table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.g-article th, .g-article td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--g-line);
  vertical-align: top;
}
.g-article th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--g-muted); }
.g-pager {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--g-line);
}
.g-pager a {
  flex: 1; text-decoration: none; color: inherit;
  border: 1px solid var(--g-line); border-radius: 14px; padding: 16px 16px;
  transition: border-color .22s var(--g-ease), box-shadow .22s var(--g-ease), transform .22s var(--g-ease);
}
.g-pager a:hover {
  border-color: #9fd4ce;
  box-shadow: 0 8px 22px rgba(14, 27, 30, .05);
  transform: translateY(-1px);
}
.g-pager span {
  display: block; font-size: 11px; color: var(--g-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}

/* ——— Right TOC: normal page nav, vertically centred ——— */
.g-toc {
  position: sticky; top: var(--g-top-safe);
  height: calc(100vh - var(--g-top-safe));
  overflow-y: auto;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.g-toc-label {
  margin: 0 0 10px;
  font-family: var(--g-font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #5c6f72;
}
.g-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.g-toc-list a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--g-font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #6b7f82;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.g-toc-list a:hover {
  color: var(--g-teal-deep);
  background: rgba(13, 148, 136, .07);
}
.g-toc-list a.is-active {
  color: var(--g-teal-deep);
  background: rgba(13, 148, 136, .1);
}

.g-lang #guidesLangSwitch.i18n-bar {
  display: flex; align-items: center; gap: 8px; padding: 0; margin: 0;
}
.g-lang .i18n-switcher-label { display: none; }
.g-lang .i18n-switcher {
  font: 500 0.8rem var(--g-font-ui);
  color: #e6efef;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  padding: 6px 8px;
  min-height: 34px;
  min-width: 0;
  cursor: pointer;
  transition: background .2s var(--g-ease-out), border-color .2s var(--g-ease-out);
}
.g-lang .i18n-switcher:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); }
.g-lang .i18n-switcher:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.g-lang { flex-shrink: 0; position: relative; }
/* Below the tablet break the select collapses to the same translate icon the
   dashboard uses (latin A + 文). The native picker still opens, so the
   accessible name and keyboard path are unchanged. */
.g-lang::before {
  content: "";
  display: none;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background:
    rgba(255, 255, 255, .05)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6efef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E")
    center / 19px 19px no-repeat;
  pointer-events: none;
}
.g-foot-links { margin-top: 40px; font-size: 13px; color: var(--g-muted); }

/* ——— Site footer: under pager, full content width ——— */
.g-bottom-banner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 24px 64px;
  border-top: 1px solid var(--g-line);
  background: none;
  box-sizing: border-box;
  text-align: center;
}
.g-article > .g-bottom-banner {
  max-width: none;
  margin-top: 36px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.g-bottom-banner__footnote {
  margin: 0 auto;
  max-width: 46rem;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--g-muted);
  text-align: center;
}
.g-bottom-banner__footnote strong {
  font-weight: 700;
  color: var(--g-ink);
}
.g-bottom-banner__legal {
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--g-muted);
  text-align: center;
}
.g-bottom-banner__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.g-bottom-banner__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 3.5vw, 24px);
}
.g-bottom-banner__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 8px 18px -10px rgba(13, 148, 136, .55);
}
.g-bottom-banner__mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.g-bottom-banner__name {
  font-family: var(--g-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.015em;
  color: var(--g-ink);
}

.g-scrim { display: none; }

@media (max-width: 1080px) {
  .g-shell { grid-template-columns: var(--g-sidebar) minmax(0, 1fr); padding: 0 28px; }
  .g-toc { display: none; }
  .g-article { padding: 48px 56px 56px; }
  .g-bottom-banner { padding: 40px 40px 64px; }
}
@media (max-width: 860px) {
  .g-nav-btn { display: inline-flex; }
  .g-shell { grid-template-columns: 1fr; padding: 0 32px; }
  .g-article { padding: 44px 40px 48px; border-right: 0; }
  .g-article h2 { margin-top: 44px; }
  .g-bottom-banner { padding: 36px 32px 56px; }
  /* The cross-library link moves into the drawer, where there is room for it. */
  .g-top a.g-lib-link { display: none; }
  .g-sidebar {
    position: fixed; left: 0; top: var(--g-top-safe); z-index: 30;
    width: min(86vw, 320px);
    transform: translateX(-102%);
    transition: transform .34s var(--g-ease-out);
    box-shadow: 12px 0 40px rgba(14, 27, 30, .18);
    will-change: transform;
  }
  body.g-nav-open .g-sidebar { transform: none; }
  .g-scrim {
    position: fixed; inset: var(--g-top-safe) 0 0 0;
    background: rgba(14, 27, 30, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 25;
    opacity: 0;
    visibility: hidden;
    transition: opacity .34s var(--g-ease-out), visibility .34s;
  }
  body.g-nav-open .g-scrim { opacity: 1; visibility: visible; }
  body.g-nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .g-shell { padding: 0; }
  .g-article { padding: 28px 20px 36px; }
  .g-bottom-banner { padding: 28px 20px 48px; }
  .g-product, .g-cta-wrap { padding: 18px 16px 16px; }
  /* Every doorway spans its container, so their edges agree. Left to shrink-wrap
     one phone-width page landed seven buttons on seven different left edges
     (20, 27.5, 30.8, 33.7, 36.5, 37, 66.6) — deliberate at reading width, ragged
     on a phone. */
  .g-product-actions .g-cta,
  .g-cta-wrap .g-cta,
  .g-dash-action .g-cta,
  .g-dash-jump .g-cta,
  .g-hit-actions .g-cta { width: 100%; }
  /* A label that wraps used to leave the sign-in pill floating against the right
     edge beside two lines of text. Letting the line wrap drops it onto its own
     centred row instead. */
  .g-dash-action .g-cta { flex-wrap: wrap; }
  /* The note under a doorway is prose. Centred it read as a caption on desktop,
     where it fits one line; over three lines on a phone it just looks broken. */
  .g-dash-action { text-align: left; }
  .g-dash-action-note, .g-product-note { text-align: left; }
  /* Centring each child of the panel meant a short secondary link sat centred
     while the one beside it wrapped to two lines and read as left-aligned.
     Stretch them all instead: the button centres its own label, the links read
     from the same left edge as the prose above. */
  .g-product-actions { align-items: stretch; }
  .g-product-actions .g-cta-sec { text-align: left; }
}

/* Tablet and phone banner. Four items at most, and each one has a fixed cost:
   38px nav + flexible brand + 38px translate icon + short pill. That budget is
   what keeps a 320px screen from overflowing. */
@media (max-width: 640px) {
  :root { --g-top: 56px; }
  .g-top {
    gap: 8px;
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  }
  .g-brand { gap: 9px; min-width: 0; flex: 1 1 auto; }
  .g-brand img { width: 26px; height: 26px; border-radius: 7px; }
  .g-brand-name { font-size: 13.5px; }
  .g-brand-sub { font-size: 10px; }
  .g-top-spacer { display: none; }
  /* Collapse the select into the translate-icon button. */
  .g-lang::before { display: block; }
  .g-lang .i18n-switcher {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    min-height: 0;
    opacity: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
  }
  .g-lang .i18n-switcher:focus-visible + .i18n-switcher-label,
  .g-lang:focus-within::before { outline: 2px solid #5eead4; outline-offset: 2px; }
  .g-open-long { display: none; }
  .g-open-short { display: inline; }
  .g-top a.g-open {
    font-size: 12.5px;
    min-height: 38px;
    padding: 8px 12px;
  }
}
/* Very narrow phones: drop the brand's second line rather than let the row wrap. */
@media (max-width: 380px) {
  .g-top { gap: 6px; }
  .g-brand-sub { display: none; }
  .g-brand-name { font-size: 13px; }
  .g-top a.g-open { padding: 8px 10px; }
}


/* ——— Breadcrumbs and freshness ———
   Both are now server-rendered, and both mirror something in the JSON-LD: the
   crumbs match BreadcrumbList, the timestamp matches dateModified. */
.g-crumbs {
  margin: 0 0 14px;
  font-family: var(--g-font-ui);
  font-size: 12.5px;
  color: var(--g-muted);
}
/* Inline flow, not flex. As a flex row each <li> became its own flex container
   and the items stopped sharing a baseline — "EOI Insights / 百科" sat 5px
   apart, in English too. A breadcrumb is a sentence of links, so it is laid out
   like one: one line-height, one baseline, and it wraps by itself. */
.g-crumbs ol {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.7;
}
.g-crumbs li { display: inline; }
.g-crumbs li + li::before {
  content: "/";
  color: #a8bcbe;
  margin: 0 6px;
  vertical-align: baseline;
}
.g-crumbs a {
  color: var(--g-muted);
  text-decoration: none;
  border-radius: 4px;
  vertical-align: baseline;
  transition: color .2s var(--g-ease-out);
}
.g-crumbs a:hover { color: var(--g-teal-deep); text-decoration: underline; }
.g-crumbs a:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; }
/* Stay inline. `overflow: hidden` on an inline-block moves its baseline to the
   bottom of the box, and `vertical-align: top` then drops the last crumb below
   "EOI Insights" and the slash. Long occupation titles wrap onto the next line
   of the same line box instead. */
.g-crumbs li:last-child span {
  color: #7b8f92;
  display: inline;
  vertical-align: baseline;
}
/* Two labelled facts that wrap as units. The old single string broke mid-phrase
   on a phone; these break between the two instead. */
.g-updated {
  margin: 0 0 28px;
  font-family: var(--g-font-ui);
  font-size: 12.5px;
  color: var(--g-muted);
}
.g-updated time {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  font-variant-numeric: tabular-nums;
}
.g-updated-item { display: inline-flex; align-items: baseline; gap: 6px; }
.g-updated-key {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8aa3a6;
}
.g-updated-val { color: var(--g-text); font-weight: 500; }
html.script-cjk .g-updated-key { letter-spacing: .02em; }

/* ——— TOC: a marker that slides between entries ———
   The highlight used to jump from one item to the next. A single absolutely
   positioned marker that animates to the active row reads as one continuous
   control instead of two separate states. */
.g-toc-list { position: relative; }
.g-toc-marker {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0;
  border-radius: 8px;
  background: rgba(13, 148, 136, .1);
  transform: translateY(var(--g-marker-y, 0));
  opacity: 0;
  transition:
    transform .38s var(--g-ease-spring),
    height .38s var(--g-ease-spring),
    opacity .25s var(--g-ease-out);
  pointer-events: none;
}
.g-toc-list.has-marker .g-toc-marker { opacity: 1; }
/* The marker draws the highlight, so the link itself only animates colour. */
.g-toc-list.has-marker a.is-active { background: transparent; }
.g-toc-list a { position: relative; z-index: 1; }
.g-toc-list a.is-active { font-weight: 600; }

/* ——— Heading anchors ———
   Hovering a section reveals a link to it. Click copies the deep link and the
   button confirms in place, so nobody has to hunt for the URL bar. */
.g-anchor {
  position: absolute; left: -1.55em; top: 50%;
  transform: translateY(-50%) scale(.9);
  width: 1.15em; height: 1.15em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; margin: 0;
  background: none; cursor: pointer;
  color: var(--g-teal);
  font: 600 .62em/1 var(--g-font-ui);
  opacity: 0;
  border-radius: 6px;
  transition: opacity .2s var(--g-ease-out), transform .2s var(--g-ease-out);
}
.g-article h2, .g-article h3 { position: relative; }
.g-article h2:hover .g-anchor,
.g-article h3:hover .g-anchor,
.g-anchor:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.g-anchor:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; }
.g-anchor.is-copied { opacity: 1; color: var(--g-teal-deep); }
.g-anchor.is-copied::after {
  content: attr(data-copied);
  position: absolute; left: 50%; bottom: 125%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 600 11px/1 var(--g-font-ui);
  color: #fff; background: var(--g-ink);
  padding: 5px 8px; border-radius: 6px;
  animation: gAnchorPop .22s var(--g-ease-spring);
}
@keyframes gAnchorPop {
  from { opacity: 0; transform: translateX(-50%) translateY(3px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* No hover on touch, and no room for a gutter icon on a phone. */
@media (hover: none), (max-width: 860px) {
  .g-anchor { display: none; }
}

/* ——— Back to top ———
   Fades in once the article is long enough to have lost the header. */
.g-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--g-teal-deep);
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(14, 27, 30, .5);
  opacity: 0;
  transform: translateY(10px) scale(.92);
  pointer-events: none;
  transition:
    opacity .28s var(--g-ease-out),
    transform .28s var(--g-ease-spring),
    background .2s var(--g-ease-out);
}
body.show-to-top .g-to-top {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.g-to-top:hover { background: #fff; color: var(--g-teal); }
.g-to-top:active { transform: scale(.94); }
.g-to-top:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 3px; }
.g-to-top svg { width: 19px; height: 19px; }

/* ——— Drawer footer: the cross-library link the header drops on mobile ——— */
.g-sidebar-cross {
  display: none;
  margin: 22px 8px 4px;
  padding-top: 18px;
  border-top: 1px solid var(--g-line);
}
.g-sidebar-cross a {
  min-height: 44px;
  font-weight: 600;
  color: var(--g-teal-deep);
}
.g-sidebar-cross a:hover { background: rgba(13, 148, 136, .08); }
@media (max-width: 860px) {
  .g-sidebar-cross { display: block; }
}

/* ——— Insight blocks ———
   The figures a reader came for, rendered at build time from
   data/library_facts.json. Nothing here depends on script to be readable. */

.g-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Two by two at reading width, one column on a phone. An auto-fit grid landed on
   three across and left the fourth stat stranded on its own row. */
.g-statstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 40px;
  max-width: none;
}
.g-stat {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--g-line); border-radius: 16px;
  background: var(--g-paper);
  padding: 24px 22px 38px;
  overflow: hidden;
}
/* The chart is a band along the card's base — context for the number, not a
   second thing to read. It has its own strip so it never crosses the text. */
.g-stat .g-spark,
.g-stat .g-bars {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 26px;
  color: var(--g-teal); pointer-events: none;
}
.g-stat .g-spark { opacity: .34; }
.g-stat .g-bars { opacity: .26; }
.g-spark-area { opacity: .18; }
.g-spark-dot { opacity: .9; }
.g-bars .is-peak { opacity: 1; }
.g-bars rect { opacity: .55; }

/* The line draws itself in and the bars grow, once, on load. Both are decorative
   and aria-hidden, so nothing is announced twice and nothing is lost if the
   animation never runs. */
@keyframes g-spark-draw {
  from { stroke-dashoffset: var(--spark-len, 200); }
  to { stroke-dashoffset: 0; }
}
/* Each fade ends on the resting opacity of the thing it fades in, not on 1.
   A shared 0 -> 1 keyframe won: the area fill animated up to full strength and
   the sparkline stopped being a line behind a number and became a teal slab. */
@keyframes g-spark-area-in { from { opacity: 0; } to { opacity: .18; } }
@keyframes g-spark-dot-in { from { opacity: 0; } to { opacity: .9; } }
@keyframes g-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.g-spark-line {
  stroke-dasharray: var(--spark-len, 200);
  animation: g-spark-draw 1.1s var(--g-ease-out) both;
}
.g-spark-area { animation: g-spark-area-in .9s var(--g-ease-out) .35s both; }
.g-spark-dot { animation: g-spark-dot-in .4s var(--g-ease-out) 1s both; }
.g-bars rect {
  transform-origin: 50% 100%;
  animation: g-bar-grow .7s var(--g-ease-out) both;
}
/* Left to right, so the row reads as a sweep rather than a pop. */
.g-bars rect:nth-child(4n+2) { animation-delay: .06s; }
.g-bars rect:nth-child(4n+3) { animation-delay: .12s; }
.g-bars rect:nth-child(4n+4) { animation-delay: .18s; }
.g-bars rect:nth-child(4n+5) { animation-delay: .24s; }
.g-stat-num {
  font-family: var(--g-font-display);
  font-size: clamp(26px, 3.6vw, 32px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; color: var(--g-ink);
  margin-bottom: 2px;
}
.g-stat-label {
  font-family: var(--g-font-ui);
  font-size: 13.5px; font-weight: 600; color: var(--g-text); line-height: 1.4;
}
.g-stat-note {
  font-family: var(--g-font-ui);
  font-size: 12.5px; color: var(--g-muted); margin-top: 6px; line-height: 1.5;
}

/* A card that opens the matching dashboard view. The cue only earns its space
   once the card is a doorway, so a plain .g-stat is unchanged. */
.g-stat--link {
  text-decoration: none; color: inherit;
  padding-bottom: 68px;
  transition: border-color .22s var(--g-ease), transform .22s var(--g-ease),
              box-shadow .22s var(--g-ease);
}
.g-stat--link:hover {
  border-color: #9fd4ce; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 27, 30, .08);
}
.g-stat--link:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; }
.g-stat-go {
  position: absolute; left: 22px; right: 22px; bottom: 30px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--g-font-ui);
  font-size: 12.5px; font-weight: 700; color: var(--g-teal-deep);
  line-height: 1.2;
}
.g-stat-go::after {
  content: "→";
  transition: transform .22s var(--g-ease);
}
.g-stat--link:hover .g-stat-go::after { transform: translateX(3px); }
/* The sparkline would sit under the cue; lift it clear. */
/* Long values — a jurisdiction name rather than a count — get a smaller face so
   the card keeps one line where it can. */
.g-stat-num--long { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; }
.g-stat-lock {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g-muted);
  border: 1px solid var(--g-line); border-radius: 999px;
  padding: 2px 7px; margin-left: auto; white-space: nowrap;
}

/* A doorway under a block of figures: the table is one month, this is the
   series behind it. */
.g-dash-action {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
  margin: 26px 0 34px;
  text-align: center;
}
.g-dash-action .g-cta { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.g-dash-action .g-stat-lock {
  margin-left: 0; color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .34);
}
.g-dash-action-note {
  font-family: var(--g-font-ui); font-size: 13px; color: var(--g-muted);
}

/* Two lists that read as a pair; one column below the tablet break. */
.g-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px;
  margin: 22px 0; max-width: none;
}
.g-split > div > h3 { margin-top: 0; }
.g-movers { list-style: none; margin: 0; padding: 0; }
/* Name on one line, movement on the next. Occupation names run long enough that
   an inline layout wraps on some rows and not others, which makes the column
   impossible to scan. */
.g-movers li {
  padding: 9px 0; border-bottom: 1px solid var(--g-line);
  font-size: 15px; line-height: 1.4;
}
.g-mover-name { display: block; }
.g-mover-delta {
  display: block; margin-top: 2px;
  font-family: var(--g-font-ui);
  font-size: 13px; font-weight: 600;
}
.g-movers--up .g-mover-delta { color: var(--g-teal-deep); }
.g-movers--down .g-mover-delta { color: #b4530a; }

/* Row headers carry data, so they lose the uppercase column-header treatment. */
.g-article tbody th {
  font-size: inherit; letter-spacing: 0; text-transform: none;
  color: inherit; font-weight: 600;
}
.g-article table caption {
  caption-side: bottom; text-align: left;
  font-size: 12.5px; color: var(--g-muted); padding-top: 10px;
}
.g-ladder td { font-variant-numeric: tabular-nums; }
.g-article td.is-up { color: var(--g-teal-deep); font-weight: 600; }
.g-article td.is-down { color: #b4530a; font-weight: 600; }

/* ——— Occupation lookup ——— */
.g-lookup { margin: 34px 0; max-width: none; }
.g-lookup-hint { color: var(--g-muted); font-size: 15px; margin: 0 0 12px; }
.g-lookup-field { position: relative; max-width: 520px; }
.g-lookup input {
  width: 100%; font: 500 16px/1.4 var(--g-font-ui); color: var(--g-text);
  padding: 13px 16px; border: 1px solid var(--g-line); border-radius: 12px;
  background: var(--g-paper); -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}
.g-lookup input:focus {
  outline: none; border-color: var(--g-teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16);
}
.g-lookup-results:not(:empty) { margin-top: 14px; }
.g-lookup-fallback { font-size: 14px; margin: 12px 0 0; }
.g-hit {
  border: 1px solid var(--g-line); border-radius: 16px;
  padding: 20px 20px 18px; margin-bottom: 14px; background: var(--g-paper);
  transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}
.g-hit:hover {
  border-color: #9fd4ce;
  box-shadow: 0 8px 22px rgba(14, 27, 30, .05);
}
.g-hit-head { display: block; text-decoration: none; color: inherit; }
.g-hit-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin: 16px 0 0;
}
.g-hit-actions .g-cta { margin: 0; }
.g-hit-title { display: block; font-weight: 700; font-size: 16px; }
.g-hit-code {
  font-family: var(--g-font-ui); font-size: 12px; font-weight: 600;
  color: var(--g-teal-deep); letter-spacing: .04em;
}
.g-hit-figs {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px;
  font-family: var(--g-font-ui); font-size: 13px; color: var(--g-muted);
}
.g-hit-figs b { color: var(--g-text); font-weight: 700; }
.g-lookup-empty { color: var(--g-muted); font-size: 15px; margin: 0; }

/* ——— Intent tiles ——— */
.g-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 22px 0; max-width: none;
}
.g-tile {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  border: 1px solid var(--g-line); border-radius: 16px;
  background: var(--g-paper); padding: 18px 18px 20px;
  transition: border-color .22s var(--g-ease), transform .22s var(--g-ease),
              box-shadow .22s var(--g-ease);
}
.g-tile:hover {
  border-color: #9fd4ce; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 27, 30, .07);
}
.g-tile-title {
  font-family: var(--g-font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.01em; color: var(--g-ink);
}
.g-tile-blurb { font-size: 14.5px; color: var(--g-muted); line-height: 1.5; }

/* ——— Comparison picker ——— */
.g-compare-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
  margin: 20px 0; max-width: none;
}
.g-field { margin: 0; }
.g-field label {
  display: block; font-family: var(--g-font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--g-muted); margin-bottom: 6px;
}
.g-field select {
  width: 100%; font: 500 15px/1.4 var(--g-font-ui); color: var(--g-text);
  padding: 11px 12px; border: 1px solid var(--g-line); border-radius: 12px;
  background: var(--g-paper);
}
.g-field select:focus {
  outline: none; border-color: var(--g-teal);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16);
}
.g-compare td { font-variant-numeric: tabular-nums; }
.g-compare thead th { font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--g-ink); font-weight: 700; }

@media (max-width: 860px) {
  .g-split, .g-compare-picker { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g-statstrip { grid-template-columns: 1fr; }
  /* Full width means the graphic band is stretched across the whole card — 348
     by 26 is 13:1, flat enough that a sparkline stops reading as a trend. Give
     it height back, and the cue room to sit above it. */
  .g-stat .g-spark, .g-stat .g-bars { height: 40px; }
  .g-stat { padding-bottom: 52px; }
  .g-stat--link { padding-bottom: 84px; }
  .g-stat-go { bottom: 46px; }
  /* Stacked, the two freshness pairs were ragged: "DATA TO" and "PAGE UPDATED"
     are different widths, so their values started at different x. A two-column
     grid lines the values up under each other. */
  .g-updated time { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
  .g-updated-item { display: contents; }
}

/* Wide tables on a phone. Five columns squeezed into 350px wrapped the headings
   over four and five lines each — a 122px header row. Headers stay on one line
   and the wrapper scrolls, with a fade at the edge so it is clear that it does. */
@media (max-width: 640px) {
  .g-table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* A right-edge shadow that retracts once the table is scrolled to its end. */
    background:
      linear-gradient(to right, var(--g-paper) 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat,
      linear-gradient(to left, var(--g-paper) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(14, 27, 30, .12), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(14, 27, 30, .12), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .g-article th { white-space: nowrap; }
  .g-article table { width: auto; min-width: 100%; }
  .g-article th, .g-article td { padding: 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-article, .g-card, .g-pager a, .g-top a.g-open, .g-cta, .g-sidebar a,
  .g-toc-list a, .g-article h2, .g-article h3, .g-sidebar,
  .g-toc-marker, .g-to-top, .g-anchor, .g-scrim, .g-progress, .g-top,
  .g-tile, .g-hit, .g-lookup input, .g-field select {
    transition: none !important;
    animation: none !important;
  }
  .g-tile:hover, .g-hit:hover { transform: none; }
  /* Show the drawn result, not the drawing of it. Turning the animation off is
     enough — each element's resting style is the finished state; only the dash
     offset needs clearing, since it lives outside the keyframes. */
  .g-spark-line, .g-spark-area, .g-spark-dot, .g-bars rect {
    animation: none !important;
    transform: none !important;
  }
  .g-spark-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .g-cta::after, .g-article a.g-cta::after { display: none; animation: none; }
  .g-cta:hover, .g-article a.g-cta:hover, .g-top a.g-open:hover,
  .g-cta:active, .g-article a.g-cta:active, .g-top a.g-open:active {
    transform: none;
  }
  .g-article { opacity: 1; transform: none; }
  .g-article h2.g-heading-flash,
  .g-article h3.g-heading-flash { background-color: transparent; }
  /* Without motion the sliding marker is just a lag, so fall back to the
     per-item highlight it replaced. */
  .g-toc-marker { display: none; }
  .g-toc-list.has-marker a.is-active { background: rgba(13, 148, 136, .1); }
  .g-to-top { transform: none; }
  .g-anchor.is-copied::after { animation: none; }
  html { scroll-behavior: auto; }
}