/* History of Japan — overrides loaded after core/css/style.css and the
   rulers-groups module CSS. */

/* Typography: Inria Serif headings, Source Sans 3 text (fonts_url in site.php). */
: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;
}

/* The History of Japan logo is narrower than the core default. */
#app-logo { width:207px; }
@media (max-width:1200px) { #app-logo { width:164px; } }
@media (max-width:960px)  { #app-logo { width:195.5px; } }
@media (max-width:760px)  { #app-logo { width:172.5px; } }
@media (max-width:520px)  { #app-logo { width:149.5px; } }

/* Clans & Parties: portrait tiles and tabs in the rulers-tab style. */
.rpp-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.rpp-tab { font-family:var(--f-ui); font-size:12.5px; font-weight:600; letter-spacing:0.8px; padding:10px 18px; }

/* ════════════════════════════════════════
   MAP — "Japan Through Time" (js/japan-map.js). Reuses core's .cm-* page,
   controls, panel and legend; these rules style the map layers (sea, land,
   one fading path per region, the modern border, the Northern Territories
   claim and the labels) and the panel parts shared with the other country
   maps. Colours follow the region categories of data/japan-map-data.json
   (hatches in partials/map.php).
════════════════════════════════════════ */
.cm-year-note {
  margin-top:4px;
  font-family:var(--f-ui); font-size:13px; color:var(--white-dim);
}
.cm-year-note:empty { display:none; }
.cm-tip-dates { margin-top:3px; font-variant-numeric:tabular-nums; color:var(--white-dim); }

/* Chapter events: dates can be long ("c. 38,000 years ago"), so a wider,
   right-aligned year column with a note on a smaller line. */
.cm-events .ag-event { grid-template-columns:78px 9px minmax(0, 1fr); column-gap:16px; }
.cm-events .ag-event::before { left:98px; }
.cm-events .ag-event-year { overflow-wrap:break-word; text-align:right; }
.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);
}
.cm-events-heading { margin:30px 0 6px; }
/* Events not on the timeline open their Wikipedia article. */
.cm-event--wiki .ag-event-text::after {
  content:"\2197"; margin-left:5px; font-size:0.8em; color:rgba(255,255,255,0.4);
}

/* Highlighted powers of the chapter, in their map colours. */
.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);
}

/* "Who Was in Power" in the chapter's year: the event modal's .em-power
   card, compacted for the panel. */
.em-power.cm-power { display:block; margin-top:4px; } /* beats .em-power's grid; the card grid below */
.em-power.cm-power[hidden] { display:none; }
.em-power.cm-power > .em-power-heading { margin:26px 0 10px; }
.cm-power-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap:10px 16px;
}
.cm-power .em-power-card { padding:6px 8px 6px 6px; border:1px solid rgba(255,255,255,0.1); border-radius:4px; gap:12px; }
.cm-power .em-power-portrait { width:42px; height:48px; }
.cm-power .em-power-name { font-size:16px; }
.cm-power .em-power-title,
.cm-power .em-power-reign { margin-top:2px; }

/* "Japan today" toggle among the map buttons. */
.cm-map-btns button[aria-pressed="true"] { color:var(--gold); }

.hm-sea { fill:#0a0f1a; }
.hm-land { fill:#1b1f2a; }
/* Each region path is shown (display) by japan-map.js, then faded in with
   .is-on; a fading-out path no longer takes the pointer. */
.hm-regions path {
  stroke:#08060f; stroke-width:0.7; stroke-linejoin:round; fill-rule:evenodd;
  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;
}
.hm-regions path.is-on { opacity:1; pointer-events:auto; }
.hm-regions.is-instant path { transition:none; }
.hm-regions path:hover { filter:brightness(1.25); stroke:var(--gold); stroke-width:1.4; }
.hm-jp { fill:#c9a844; }
.hm-jp-rival { fill:#ead79a; }
.hm-jp-colony { fill:#c47a3c; }
.hm-regions path.hm-jp-occupied { fill:url(#jp-hatch-occ); stroke:#d99a6a; }
.hm-regions path.hm-jp-vassal { fill:url(#jp-hatch-vassal); stroke:#e3c66f; }
.hm-regions path.hm-jp-occ { fill:url(#jp-hatch-allied); stroke:#8fb0db; }
.hm-ryukyu { fill:#8a6fa8; }
.hm-us { fill:#4f76a8; }
.hm-regions path.hm-native { fill:url(#jp-hatch-native); stroke:#a99672; }
/* Archaeological cultures (no state): a faint gold area with a dashed edge. */
.hm-regions path.hm-culture { fill:#c9a844; fill-opacity:0.22; stroke:#e3c66f; stroke-width:1.1; stroke-dasharray:5 4; }
.hm-related { fill:#6f8f80; }
.hm-neighbor { fill:#3a3646; fill-opacity:0.92; }
.hm-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.4; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke; opacity:0.8; pointer-events:none;
  transition:opacity 0.3s ease;
}
.hm-ref.is-off { opacity:0; }
/* Japan's claim to the Northern Territories (from 1952). */
.hm-claims {
  fill:none; stroke:#e0736a; stroke-width:1.6; stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke; pointer-events:none;
  opacity:0; transition:opacity 0.6s ease;
}
.hm-claims.is-on { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .hm-regions path, .hm-ref, .hm-claims { transition:none; }
}

/* Labels: font size and halo are set in map units by japan-map.js so they
   read at a constant screen size at every zoom; it also hides names that
   do not fit or overlap (.is-on). Chapter notes are italic. */
.hm-labels { pointer-events:none; }
.hm-label {
  font-family:var(--f-heading); font-weight:700; fill:#e9e4d8;
  paint-order:stroke; stroke:#08060f; stroke-linejoin:round;
  text-anchor:middle; dominant-baseline:middle;
  opacity:0; transition:opacity 0.4s ease;
}
.hm-label.is-on { opacity:1; }
.hm-label--jp { fill:#f6e7b8; }
.hm-label--note { font-style:italic; font-weight:400; fill:#fff; }
@media (prefers-reduced-motion: reduce) {
  .hm-label { transition:none; }
}

/* Legend, chip and tooltip swatches */
.hm-sw { display:inline-block; width:11px; height:11px; flex:none; }
.hm-sw--jp { background:#c9a844; }
.hm-sw--jp-rival { background:#ead79a; }
.hm-sw--jp-colony { background:#c47a3c; }
.hm-sw--jp-occupied { background:repeating-linear-gradient(45deg, #c47a3c 0 2px, #5a3b2e 2px 5px); }
.hm-sw--jp-vassal { background:repeating-linear-gradient(-45deg, #c9a844 0 2px, #8a6fa8 2px 5px); }
.hm-sw--jp-occ { background:repeating-linear-gradient(45deg, #4f76a8 0 1.6px, #c9a844 1.6px 5px); }
.hm-sw--ryukyu { background:#8a6fa8; }
.hm-sw--us { background:#4f76a8; }
.hm-sw--native { background:repeating-linear-gradient(30deg, #a99672 0 1.5px, #4a4338 1.5px 5px); }
.hm-sw--culture { background:rgba(201,168,68,0.25); border:1px dashed #e3c66f; }
.hm-sw--related { background:#6f8f80; }
.hm-sw--neighbor { background:#3a3646; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
.cm-lg i.hm-sw--ref, .cm-lg i.hm-sw--claim { width:18px; height:0; background:none; }
.hm-sw--ref { border-top:2px dashed #f1e6cf; }
.hm-sw--claim { border-top:2px dashed #e0736a; }
/* japan-map.js hides the entries (and columns) not drawn in the chapter. */
.cm-legend [data-cat][hidden],
.cm-legend .cm-legend-col[hidden] { display:none; }

/* 42 chapters on the track: japan-map.js marks the labels that would
   collide at the track's width (the current one always shows). */
.cm-tick-labels button.hm-minor:not(.cur) { display:none; }
/* 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%); }
@media (max-width:900px) {
  /* The era count is set inline by japan-map.js; wrap to rows here. */
  .cm-eras { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* Timeline and event modal map cards: the borders of the chapter. */
.em-map-thumb .hm-thumb-land { fill:#2a2633; }
.em-map-thumb .hm-thumb-jp { fill:var(--gold); filter:drop-shadow(0 0 6px rgba(201,168,68,0.6)); }
.em-map-thumb .hm-thumb-jp-rival { fill:#ead79a; }
.em-map-thumb .hm-thumb-jp-colony { fill:#c47a3c; }
.em-map-thumb .hm-thumb-jp-occupied { fill:#c47a3c; fill-opacity:0.55; }
.em-map-thumb .hm-thumb-jp-vassal { fill:#b39a63; }
.em-map-thumb .hm-thumb-jp-occ { fill:#a8945a; }
.em-map-thumb .hm-thumb-ryukyu { fill:#8a6fa8; }
.em-map-thumb .hm-thumb-us { fill:#4f76a8; }
.em-map-thumb .hm-thumb-native { fill:#6b604e; }
.em-map-thumb .hm-thumb-culture { fill:rgba(201,168,68,0.35); }
.em-map-thumb .hm-thumb-related { fill:#5f7a6e; }
.em-map-thumb .hm-thumb-ref {
  fill:none; stroke:#f1e6cf; stroke-width:1.2; stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke; opacity:0.6;
}