/* ==========================================================================
   Key–Chow Network — stylesheet
   Palette: cool pale stone ground, green-biased ink, pounamu jade accent for
   the New Zealand side, muted cinnabar reserved semantically for cross-border
   relationships and the Hainan band, ochre for source-confidence caveats.
   Type: Palatino-family serif for display, system sans for body, mono for data.
   ========================================================================== */

/* ---------- tokens: light is the base; both dark states redefine only vars ---------- */
:root {
  --stone:      #eef0ec;
  --surface:    #ffffff;
  --surface-2:  #f7f9f6;
  --ink:        #171e1c;
  --ink-soft:   #37453f;
  --muted:      #5d6b66;
  --faint:      #8a978f;
  --line:       #d3d9d4;
  --line-soft:  #e3e8e3;
  --jade:       #17685a;
  --jade-soft:  #d9e8e2;
  --rust:       #a6482a;
  --rust-soft:  #f2e0d8;
  --ochre:      #7e6516;
  --ochre-soft: #f0e9d0;
  --slate:      #4c5f68;
  --slate-soft: #dfe6e9;
  --on-accent:  #ffffff;
  --shadow:     0 1px 2px rgba(23,30,28,.06), 0 8px 24px -16px rgba(23,30,28,.28);
  --focus:      #17685a;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Hoefler Text", Georgia, "Songti SC", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Chinese pairs a Song/serif face with the Palatino display face for headings,
     and a PingFang/Noto sans with the system sans for running text. */
  --font-zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC",
             "Microsoft YaHei", "Heiti SC", sans-serif;
  --font-zh-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
                     "SimSun", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone:      #0f1513;
    --surface:    #17201d;
    --surface-2:  #1c2622;
    --ink:        #e7ede9;
    --ink-soft:   #c3cfc9;
    --muted:      #97a5a0;
    --faint:      #76837e;
    --line:       #2a3630;
    --line-soft:  #222d28;
    --jade:       #4fbfa6;
    --jade-soft:  #14332c;
    --rust:       #e08a6b;
    --rust-soft:  #3a2119;
    --ochre:      #c9a94a;
    --ochre-soft: #33290f;
    --slate:      #93aab4;
    --slate-soft: #1e2a2f;
    --on-accent:  #0f1513;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
    --focus:      #4fbfa6;
  }
}

:root[data-theme="dark"] {
  --stone:      #0f1513;
  --surface:    #17201d;
  --surface-2:  #1c2622;
  --ink:        #e7ede9;
  --ink-soft:   #c3cfc9;
  --muted:      #97a5a0;
  --faint:      #76837e;
  --line:       #2a3630;
  --line-soft:  #222d28;
  --jade:       #4fbfa6;
  --jade-soft:  #14332c;
  --rust:       #e08a6b;
  --rust-soft:  #3a2119;
  --ochre:      #c9a94a;
  --ochre-soft: #33290f;
  --slate:      #93aab4;
  --slate-soft: #1e2a2f;
  --on-accent:  #0f1513;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  --focus:      #4fbfa6;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body,
h1, h2, h3, h4, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }

body {
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px 72px; }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--line); background: var(--surface); }
.mast-in {
  max-width: 1320px; margin: 0 auto; padding: 26px 20px 22px;
  display: flex; flex-wrap: wrap; gap: 20px 32px;
  align-items: flex-end; justify-content: space-between;
}
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance;
}
.dek { margin-top: 10px; max-width: 58ch; color: var(--ink-soft); font-size: 15.5px; }
.stamp {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  text-align: right; line-height: 1.7; white-space: nowrap;
}
.stamp b { color: var(--ink); font-weight: 600; }

/* ---------- summary tiles ---------- */
.tiles {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  border: 1px solid var(--line); margin-top: 28px;
}
.tile { background: var(--surface); padding: 14px 16px 15px; }
.tile .k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px;
}
.tile .v {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tile .s { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* ---------- sections ---------- */
section { margin-top: 46px; }
.sec-head {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
h2 {
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  letter-spacing: -.005em;
}
.sec-note { color: var(--muted); font-size: 13.5px; max-width: 62ch; }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; padding: 6px 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; border-radius: 3px;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--jade); color: var(--jade); }
.btn[aria-pressed="true"] {
  background: var(--jade); border-color: var(--jade); color: var(--on-accent);
}
.btn:focus-visible, a:focus-visible, .node:focus-visible, .ev:focus-visible, .rel:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ---------- workspace ---------- */
.workspace {
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (min-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 336px; }
}

.mapcard { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mapscroll { overflow-x: auto; overflow-y: hidden; }
svg.map { display: block; width: 100%; min-width: 940px; height: auto; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 16px;
  border-top: 1px solid var(--line-soft); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg-swatch { width: 22px; height: 0; border-top-width: 2px; display: inline-block; }
.lg-swatch.solid-slate  { border-top-style: solid;  border-top-color: var(--slate); }
.lg-swatch.solid-rust   { border-top-style: solid;  border-top-color: var(--rust); }
.lg-swatch.dashed-slate { border-top-style: dashed; border-top-color: var(--slate); }
.lg-swatch.dotted-slate { border-top-style: dotted; border-top-color: var(--slate); }
.lg-dot {
  width: 11px; height: 11px; border: 1.6px solid var(--slate);
  background: var(--surface); display: inline-block;
}
.lg-dot.person { border-radius: 50%; }

/* ---------- svg internals ---------- */
.band { fill: var(--surface-2); stroke: var(--line-soft); }
.band.nz { fill: var(--jade-soft); fill-opacity: .42; }
.band.cn { fill: var(--rust-soft); fill-opacity: .5; }
.band-label {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; fill: var(--muted);
}
.band-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; fill: var(--faint);
}

.edge {
  fill: none; stroke: var(--slate); stroke-width: 1.4; opacity: .5;
  transition: opacity .16s, stroke-width .16s;
}
.edge.cross { stroke: var(--rust); stroke-width: 1.9; opacity: .72; }
.edge.past { stroke-dasharray: 5 4; opacity: .32; }
.edge.contact { stroke-dasharray: 1.5 4; stroke-linecap: round; opacity: .5; }
.edge.hot { opacity: 1; stroke-width: 2.6; }
.edge.cold { opacity: .07; }

.node { cursor: pointer; }
.node .shape {
  fill: var(--surface); stroke: var(--slate); stroke-width: 1.5;
  transition: stroke-width .16s, fill .16s;
}
.node.t-nz .shape { stroke: var(--jade); }
.node.t-cn .shape { stroke: var(--rust); }
.node.t-intl .shape { stroke: var(--slate); }
.node.hub .shape { stroke-width: 2.6; }
.node.pastonly .shape { stroke-dasharray: 4 3; }
.node .lbl { font-size: 11.5px; font-weight: 550; fill: var(--ink); pointer-events: none; }
.node .sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  fill: var(--faint); pointer-events: none;
}
.node:hover .shape, .node.sel .shape { stroke-width: 3; }
.node.sel .shape { fill: var(--jade-soft); }
.node.t-cn.sel .shape { fill: var(--rust-soft); }
.node.cold { opacity: .2; }
.node .halo { fill: none; stroke: var(--jade); stroke-width: 0; }
.node.sel .halo { stroke-width: 1.2; opacity: .45; }

.edge-lbl {
  font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round;
}

/* ---------- detail panel ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 18px 18px 20px; position: sticky; top: 16px;
}
.panel .p-kind {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.panel h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  margin-bottom: 3px; line-height: 1.15;
}
.panel .p-zh { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.panel .p-role { margin-bottom: 14px; font-size: 14px; color: var(--ink-soft); }
.panel .p-role.tight { margin-bottom: 0; }
.panel h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.panel .facts { display: flex; flex-direction: column; gap: 10px; }
.panel .facts li { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.rels { display: flex; flex-direction: column; gap: 6px; }
.rel {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 4px 0 6px; cursor: pointer; font-size: 13px; color: var(--ink-soft);
}
.rel:hover { color: var(--jade); }
.rel .rel-name { font-weight: 600; }
.rel .rel-role { color: var(--muted); font-size: 12px; line-height: 1.4; }
.empty { color: var(--muted); font-size: 13.5px; font-style: italic; }

/* ---------- confidence chips ---------- */
.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 2px; vertical-align: 1px; white-space: nowrap;
}
.chip.reported  { background: var(--slate-soft); color: var(--slate); }
.chip.company   { background: var(--ochre-soft); color: var(--ochre); }
.chip.official  { background: var(--rust-soft);  color: var(--rust); }
.chip.uncertain { background: var(--ochre-soft); color: var(--ochre); }
.chip.count {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}

/* ---------- source refs ---------- */
.refs { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: 1px; }
a.ref {
  font-family: var(--font-mono); font-size: 10px; text-decoration: none;
  color: var(--jade); border: 1px solid var(--line); border-radius: 2px;
  padding: 0 4px; line-height: 15px; display: inline-block;
  font-variant-numeric: tabular-nums;
}
a.ref:hover { background: var(--jade); border-color: var(--jade); color: var(--on-accent); }

/* ---------- timeline ---------- */
.tl { position: relative; margin-top: 6px; }
.tl-row {
  display: grid; grid-template-columns: 116px 26px minmax(0, 1fr); position: relative;
}
.tl-date {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); text-align: right; padding: 16px 12px 0 0;
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
.tl-rail { position: relative; }
.tl-rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line); transform: translateX(-.5px);
}
.tl-row:first-child .tl-rail::before { top: 20px; }
.tl-row:last-child .tl-rail::before { bottom: auto; height: 20px; }
.tl-mark {
  position: absolute; left: 50%; top: 20px; width: 9px; height: 9px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--surface); border: 2px solid var(--slate);
}
.s-key  .tl-mark { border-color: var(--jade); }
.s-chow .tl-mark { border-color: var(--slate); }
.s-nz   .tl-mark { border-color: var(--jade); background: var(--jade); }
.s-cn   .tl-mark { border-color: var(--rust); background: var(--rust); }

.tl-body { padding: 6px 0 22px 14px; }
.ev {
  display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; padding: 11px 14px 12px;
  cursor: pointer; transition: border-color .14s, background .14s;
}
.ev:hover { border-color: var(--jade); }
.ev.on { border-color: var(--jade); background: var(--surface-2); }
.ev-strand {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px;
}
.ev-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  line-height: 1.25; margin-bottom: 5px;
}
.ev-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.ev-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.filter-note {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  padding: 10px 14px; border: 1px dashed var(--line); border-radius: 3px;
  margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}

/* ---------- caveats ---------- */
.caveat {
  border: 1px solid var(--ochre); border-left-width: 3px; background: var(--surface);
  padding: 16px 18px; border-radius: 3px;
}
.caveat h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ochre); margin-bottom: 9px; font-weight: 600;
}
.caveat p { margin-bottom: 10px; font-size: 14px; color: var(--ink-soft); max-width: 74ch; }
.caveat p:last-child { margin-bottom: 0; }

/* ---------- sources ---------- */
.src-list { border-top: 1px solid var(--line); }
.src-list li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline;
}
.src-id {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.src-main a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--jade); font-weight: 600;
}
.src-main a:hover { color: var(--jade); }
.src-main .pub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.foot {
  margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.8;
}

/* ---------- narrow screens ---------- */
@media (max-width: 620px) {
  .src-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .src-list li .chip { grid-column: 2; justify-self: start; }
  .tl-row { grid-template-columns: 82px 22px minmax(0, 1fr); }
  .tl-date { font-size: 10px; padding-right: 8px; }
  .stamp { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Bilingual pairing
   Every description renders twice, as .en and .zh siblings. Chinese sits under
   its English counterpart, slightly smaller and quieter, so English reads first
   without the Chinese looking like an afterthought.
   ========================================================================== */

.zh {
  display: block;
  font-family: var(--font-zh);
  font-size: 0.95em;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: 0.3em;
}

/* Headings take the Chinese serif and keep heading colour. */
h1 .zh, h2 .zh, h3 .zh, .ev-title .zh {
  font-family: var(--font-zh-display);
  color: var(--ink-soft);
  font-size: 0.88em;
  line-height: 1.5;
  margin-top: 0.15em;
}
.panel h3 .zh { font-size: 0.85em; }

/* Chinese body copy inside long-form blocks keeps a readable measure. */
.dek .zh, .sec-note .zh, .caveat .zh { max-width: 46em; }
.caveat .zh strong { color: var(--ink); font-weight: 600; }

/* Compact contexts read side by side rather than stacked. */
.chip .en, .chip .zh,
.btn .en, .btn .zh,
.legend span .en, .legend span .zh,
.p-kind .en, .p-kind .zh,
.ev-strand .en, .ev-strand .zh,
.tile .k .en, .tile .k .zh,
.stamp .en, .stamp .zh {
  display: inline;
  margin: 0;
}
.chip .zh, .btn .zh, .legend span .zh, .p-kind .zh, .ev-strand .zh, .tile .k .zh {
  font-family: var(--font-zh);
  font-size: 1em;
  letter-spacing: 0;
  color: inherit;
}
.chip .zh::before, .btn .zh::before, .legend span .zh::before,
.p-kind .zh::before, .ev-strand .zh::before, .tile .k .zh::before { content: " / "; }

/* The stamp block stacks but stays mono-sized. */
.stamp .zh {
  display: block; font-family: var(--font-zh); font-size: 11px;
  color: var(--muted); margin-top: 4px;
}
.stamp .zh b { color: var(--ink); }
#stamp-counts .zh { margin-top: 2px; }

/* Timeline dates and tile subtitles stay small. */
.tl-date .zh { font-family: var(--font-zh); font-size: 10.5px; margin-top: 3px; letter-spacing: 0; }
.tile .s .zh { font-family: var(--font-zh); font-size: 12px; margin-top: 2px; }
.filter-note .zh { font-family: var(--font-zh); font-size: 11px; margin-top: 3px; }

/* Facts list: text then its provenance on its own line. */
.panel .facts li .fact-text.zh { margin-top: 0.35em; }
.fact-meta { display: block; margin-top: 6px; }

/* Connection rows: role in both languages, name once. */
.rel .rel-role .zh { font-size: 11.5px; margin-top: 1px; }

/* SVG band captions: the Chinese line has its own baseline set in app.js. */
.band-sub.zh { font-family: var(--font-zh); font-size: 10px; margin-top: 0; }

/* SVG edge labels — no display property here, so the visibility rules below win. */
.edge-lbl.zh { font-family: var(--font-zh); font-size: 9px; margin-top: 0; }

/* The language control */
.langbar { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 10px; }
.langbar .btn { font-family: var(--font-mono); letter-spacing: .04em; text-transform: none; }

.mast-side { display: flex; flex-direction: column; align-items: flex-end; }
.mast-lead { flex: 1 1 420px; min-width: 0; }
.sec-title { min-width: 0; }

@media (max-width: 620px) {
  .mast-side { align-items: flex-start; }
  .langbar { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Visibility. These must stay LAST so they outrank the context rules above.
   -------------------------------------------------------------------------- */
body.lang-en .zh,
body.lang-zh .en { display: none; }
body.lang-zh .zh::before { content: ""; }
body.lang-zh .zh { color: var(--ink-soft); margin-top: 0; }
body.lang-zh .chip .zh, body.lang-zh .btn .zh,
body.lang-zh .legend span .zh, body.lang-zh .p-kind .zh,
body.lang-zh .ev-strand .zh, body.lang-zh .tile .k .zh { color: inherit; }
body.lang-zh h2 .zh, body.lang-zh h3 .zh, body.lang-zh .ev-title .zh { color: var(--ink); }