/* History of China — overrides loaded after core/css/style.css. Only rules
   where China differs from core: its fonts, the Rival States tab icon, the
   rulers search box, the nine At a Glance periods and the layers of the
   "China Through Time" map. */

/* ════════════════════════════════════════
   Design tokens — fonts (site.php fonts_url loads them)
════════════════════════════════════════ */
:root {
  --f-heading: 'Inria Serif', Georgia, serif;
  --f-body: 'Source Sans 3', 'Crimson Text', Georgia, serif;
  --f-ui: 'Source Sans 3', system-ui, sans-serif;
}

/* ════════════════════════════════════════
   Rulers page — "Rival States" tab icon (crossed swords, as on the old
   site); site.php gives the tab icon 'none', so it is drawn here in the
   tab's text colour.
════════════════════════════════════════ */
.rp-tab[data-tab="rival-states"]::before {
  content:''; flex-shrink:0; width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 14L11 5M11 5l3.5-3.3c1 1.1 1.1 2.7-.2 3.9L11 8.3M14 14L5 5M5 5L1.5 1.7c-1 1.1-1.1 2.7.2 3.9L5 8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 14L11 5M11 5l3.5-3.3c1 1.1 1.1 2.7-.2 3.9L11 8.3M14 14L5 5M5 5L1.5 1.7c-1 1.1-1.1 2.7.2 3.9L5 8.3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rulers search: 30% wider than the core 280px, with a lighter border,
   icon and placeholder so it reads clearly against the dark panel
   (same as Great Britain). */
.rp-search-wrap { border-color:rgba(255,255,255,0.3); color:var(--white); }
.rp-search-wrap:focus-within { border-color:rgba(201,168,68,0.7); }
.rp-search-icon { opacity:0.9; }
.rp-search-input::placeholder { color:var(--white-mid); }
@media (min-width:901px) { .rp-search-wrap { width:364px; } }

/* ════════════════════════════════════════
   At a Glance — nine periods in one row (core lays out eight).
════════════════════════════════════════ */
@media (min-width:901px) {
  .ag-era-list { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
}

/* ════════════════════════════════════════
   Map page — the page, controls, chapter panel, legend and embed all use
   core's .cm-* styles exactly as the Christianity map does. Styled here:
   what the China map has more of (eleven eras, 60 chapters, five view
   buttons, a ruler line and state chips) and its layers (js/china-map.js):
   land, one fading path per region, lakes, rivers, the modern outline,
   polity names, capitals and sites, plus the "China in YEAR" thumbnails.
════════════════════════════════════════ */

/* Eleven eras in one row on wide screens (core lays out eight). */
@media (min-width:901px) {
  .cm-eras { grid-template-columns:repeat(11, minmax(0, 1fr)); }
  .cm-eras button { padding-left:6px; padding-right:6px; }
}

/* 60 chapters on a stretched scale: china-map.js marks the year labels
   that would collide at the track's width (.cn-minor; the current one
   always shows), replacing core's every-other-label rules. */
#cm-tick-labels button { display:block; visibility:visible; }
#cm-tick-labels button.cn-minor:not(.cur) { display:none; }
#cm-tick-labels button.cur { z-index:1; background:rgba(8,6,16,0.97); }
/* Keep the first and last chapter years inside the track. */
#cm-tick-labels button:first-child { transform:none; }
#cm-tick-labels button:last-child { transform:translateX(-100%); }

/* Year badge: area line and the ruler in power (a button that opens the
   profile), as long as the names allow. */
.cm-pop-n { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-ruler {
  margin-top:6px; padding:0; background:none; border:0; text-align:left;
  pointer-events:auto; cursor:pointer; transition:color 0.2s;
}
.cn-ruler[hidden] { display:none; }
.cn-ruler:hover, .cn-ruler:focus-visible { color:var(--gold); outline:none; }
.cn-ruler:hover .cm-pop-n, .cn-ruler:focus-visible .cm-pop-n { text-decoration:underline; text-underline-offset:3px; }
.cm-tip-dates { margin-top:3px; font-variant-numeric:tabular-nums; color:var(--white-dim); }

/* Phones: a compact badge without the area line, so the ruler's name
   doesn't cover the map, and a taller map so the five view buttons fit
   beside it. */
@media (max-width:560px) {
  .cm-stage #cm-svg { aspect-ratio:4 / 3.6; }
  .cm-year-badge { left:8px; top:8px; padding:5px 9px 6px; }
  .cm-year { font-size:20px; }
  .cm-era { margin-top:1px; font-size:10px; letter-spacing:1px; }
  .cm-year-badge #cm-pop { display:none; }
  .cn-ruler { margin-top:3px; gap:5px; font-size:12px; }
  .cm-stage .cn-ruler svg { width:13px; height:13px; }
  .cm-pop-n { max-width:40vw; }
}

/* ── Map layers ── */
#cm-svg .cn-sea { fill:#0b0913; }
#cm-svg .cn-land { fill:#1d1a26; stroke:#2e2a36; stroke-width:0.6; vector-effect:non-scaling-stroke; pointer-events:none; }
/* Each region path is shown (display) by china-map.js, then faded in with
   .is-on; a fading-out path no longer takes the pointer. */
#cm-svg .cn-regions path {
  stroke:#08060f; stroke-width:0.7; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity 0.45s ease, fill 0.6s ease, filter 0.15s ease;
}
#cm-svg .cn-regions path.is-on { opacity:1; pointer-events:auto; }
#cm-svg .cn-regions.is-instant path { transition:none; }
#cm-svg .cn-regions path:hover { filter:brightness(1.25); stroke:var(--gold); stroke-width:1.4; }
#cm-svg .cn-focus { fill:#c9a844; }
#cm-svg .cn-chinese { fill:#8a6a3c; }
#cm-svg .cn-neighbor { fill:#3a3646; fill-opacity:0.92; }
#cm-svg .cn-lakes { fill:#4f7f9c; opacity:0.8; pointer-events:none; }
#cm-svg .cn-rivers path { fill:none; stroke:#5d8fae; stroke-width:0.9; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:0.75; pointer-events:none; }
#cm-svg .cn-rivers path.is-major { stroke-width:1.4; opacity:0.85; }
#cm-svg .cn-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.3; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke; opacity:0.6; pointer-events:none;
}
/* Polity names: font size and halo are set in map units by china-map.js
   so they read at a constant screen size at every zoom. */
#cm-svg .cn-labels { pointer-events:none; }
#cm-svg .cn-label {
  font-family:var(--f-heading); text-anchor:middle; dominant-baseline:middle;
  paint-order:stroke; stroke:#08060f; stroke-linejoin:round;
}
#cm-svg .cn-label--focus { font-weight:700; fill:#f6e7b8; }
#cm-svg .cn-label--chinese { fill:#e6cfa0; opacity:0.9; }
#cm-svg .cn-label--neighbor { fill:var(--white-mid); opacity:0.75; }
/* Capitals (star) and archaeological sites (dot): drawn at unit size and
   scaled by china-map.js to a constant screen size. */
#cm-svg .cn-mark { cursor:pointer; }
#cm-svg .cn-mark path { fill:var(--gold); stroke:#08060f; stroke-width:1.2; vector-effect:non-scaling-stroke; }
#cm-svg .cn-mark circle { fill:#f4ecd6; stroke:#08060f; stroke-width:1.5; vector-effect:non-scaling-stroke; }
#cm-svg .cn-mark--site circle { stroke:var(--gold); stroke-width:2; fill:#08060f; }
#cm-svg .cn-mark text {
  font-family:var(--f-heading); font-weight:600; font-size:14px; fill:var(--white);
  paint-order:stroke; stroke:#08060f; stroke-width:4px; stroke-linejoin:round;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  #cm-svg .cn-regions path { transition:none; }
}

/* Legend and tooltip swatches share the layer colours (core sizes
   .cm-lg i and .cm-tip-swatch). */
.cn-sw { display:inline-block; width:11px; height:11px; flex:none; }
.cn-sw--focus { background:#c9a844; }
.cn-sw--chinese { background:#8a6a3c; }
.cn-sw--neighbor { background:#3a3646; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
.cm-lg i.cn-sw--ref { width:18px; height:0; background:none; border-top:2px dashed #f1e6cf; }
.cm-lg i.cn-sw--capital {
  width:12px; height:12px; background:var(--gold);
  clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cm-lg i.cn-sw--site { width:9px; height:9px; margin:0 1px; border-radius:50%; background:#08060f; box-shadow:0 0 0 2px var(--gold); }

/* ── Chapter panel ── */
/* Dates can be long ("c. 780,000 years ago"): a wider year column than
   core's 50px with "BCE" / "years ago" on a smaller line below (the rail
   moves with it: column + 20px gap + half the dot). */
.cm-events .ag-event { grid-template-columns:78px 9px minmax(0, 1fr); }
.cm-events .ag-event::before { left:102px; }
.cm-events .ag-event-year { overflow-wrap:break-word; }
.cm-event-day {
  display:block; margin-top:2px;
  font-family:var(--f-ui); font-size:12px; line-height:1.3; letter-spacing:0.2px;
  color:rgba(255,255,255,0.45);
}
/* Rows that open a Wikipedia article instead of a timeline entry. */
.cm-events .ag-event--linked { cursor:pointer; }
.cm-event-ext {
  display:inline-block; width:13px; height:13px; margin-left:7px; vertical-align:-1px;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.55;
}
.cm-event--wiki:hover .cm-event-ext, .cm-event--wiki:focus-visible .cm-event-ext { opacity:1; }

/* Chinese states in focus in the chapter. */
.cm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cm-chips[hidden] { display:none; }
.cm-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,0.14); border-radius:999px;
  background:rgba(255,255,255,0.03);
  font-family:var(--f-ui); font-size:13px; line-height:1.35; color:var(--white);
}
.cm-chip--more { color:var(--white-dim); cursor:help; }

/* ── "China in YEAR" cards (event modal, timeline corner): borders of the
   year, see renderThumb() in js/china-map.js. ── */
.em-map-thumb .cn-thumb-land { fill:#2a2633; }
.em-map-thumb .cn-thumb-chinese { fill:#8a7a4a; }
.em-map-thumb .cn-thumb-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.2; stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke; opacity:0.5;
}
.em-map-thumb .cn-thumb-mark { fill:var(--gold); stroke:#08060f; stroke-width:1; vector-effect:non-scaling-stroke; }