/* History of Germany — overrides loaded after core/css/style.css: the logo
   size (the eagle-and-wordmark artwork is wider than core's default logos)
   and the "Germany Through Time" map (js/germany-map.js). */

#app-logo { width:180px; }
@media (max-width:1200px) { #app-logo { width:142.5px; } }
@media (max-width:960px)  { #app-logo { width:170px; } }
@media (max-width:760px)  { #app-logo { width:150px; } }
@media (max-width:520px)  { #app-logo { width:130px; } }

/* ════════════════════════════════════════
   MAP — "Germany Through Time" (js/germany-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 Holy Roman Empire's realm as a
   dashed umbrella, the modern outline, cities) and the panel parts shared
   with the other country maps (from Greece's theme.css). German and other
   highlighted polities get their own colour inline (data.colors).
════════════════════════════════════════ */
.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: a wider, right-aligned year column ("c. 1600 BCE"). */
.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; }

/* 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);
}
.cm-chip em { font-style:normal; font-size:11px; color:var(--white-dim); }
.cm-chip--more { color:var(--white-dim); }

/* "Who Was in Power" in the year shown: the event modal's ruler card,
   compacted for the panel. */
.em-power.cm-power { display:block; margin-top:4px; }
.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:minmax(0, 1fr); gap:10px; }
.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; }

.hm-sea { fill:#0a0f1a; }
.hm-land { fill:#1b1f2a; }
/* Each region path is shown (display) by germany-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;
  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.2); stroke:var(--gold); stroke-width:1.4; }
.hm-regions path.hm-focus { fill-opacity:0.92; }
.hm-regions path.hm-related { fill-opacity:0.8; }
.hm-regions path.hm-neighbor { fill:#3a3646; fill-opacity:0.92; }
/* The realm: a translucent gold veil with a dashed border over the
   principalities; only its border takes the pointer, so the states inside
   keep their own tooltips. */
.hm-umbrella-layer path.hm-umbrella {
  fill-opacity:0.16; stroke:#e0b24f; stroke-width:1.6; stroke-dasharray:6 4;
  pointer-events:none;
}
.hm-umbrella-layer path.hm-umbrella.is-on { opacity:1; pointer-events:visibleStroke; }
.hm-umbrella-layer path.hm-umbrella:hover { filter:none; stroke:#f4d27a; stroke-width:2.4; }
.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;
}

/* Cities: radius, font size and halo are set in map units by
   germany-map.js so they read at a constant screen size at every zoom; it
   shows only the cities of the year (.is-on), the minor ones only when
   zoomed in (.is-minor-off), none when zoomed out to Europe or the
   colonies (.is-far). */
.hm-cities { pointer-events:none; transition:opacity 0.4s ease; }
.hm-cities.is-far { opacity:0; }
.hm-city { opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0s linear 0.4s; }
.hm-city.is-on { opacity:1; visibility:visible; transition:opacity 0.4s ease; }
.hm-city.is-on.is-minor-off { opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0s linear 0.4s; }
.hm-city circle { fill:#f4ecd6; stroke:#08060f; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.hm-city text {
  font-family:var(--f-heading); font-weight:600; fill:var(--white);
  paint-order:stroke; stroke:#08060f; stroke-linejoin:round;
}
@media (prefers-reduced-motion: reduce) {
  .hm-regions path, .hm-cities, .hm-city { transition:none; }
}

/* Legend and tooltip swatches */
.hm-sw { display:inline-block; width:11px; height:11px; flex:none; }
.hm-sw--focus { background:#d9a441; }
.hm-sw--umbrella { background:rgba(224,178,79,0.16); box-shadow:inset 0 0 0 1px #e0b24f; outline:1px dashed #e0b24f; outline-offset:-1px; }
.hm-sw--related { background:linear-gradient(90deg, #5d86b0 0 33%, #76ab70 33% 66%, #b35a64 66%); }
.hm-sw--neighbor { background:#3a3646; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18); }
.cm-lg i.hm-sw--ref { width:18px; height:0; background:none; }
.hm-sw--ref { border-top:2px dashed #f1e6cf; }
.hm-sw--city { width:7px; height:7px; margin:0 2px; border-radius:50%; background:#f4ecd6; }

/* 47 keyframes on the era-weighted track: germany-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; }
.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 germany-map.js; wrap to rows here. */
  .cm-eras { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* Event modal / timeline map cards ("Germany in YEAR"): the borders of the
   year; German and highlighted states are coloured inline. */
.em-map-thumb .hm-thumb-land { fill:#2a2633; }
.em-map-thumb .hm-thumb-neighbor { fill:#4a4756; }
.em-map-thumb .hm-thumb-focus { filter:drop-shadow(0 0 6px rgba(201,168,68,0.6)); }
.em-map-thumb .hm-thumb-related { fill-opacity:0.75; }
.em-map-thumb .hm-thumb-umbrella {
  fill:#d9a441; fill-opacity:0.3; stroke:#e0b24f; stroke-width:1; stroke-dasharray:3 2;
  vector-effect:non-scaling-stroke;
}
.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;
}