/* History of Finland — overrides loaded after core/css/style.css: the inline
   SVG logo, three rulers-tab icons, ten At a Glance ages in one row, the
   head of government in "Who Was in Power", and the "The Making of Finland"
   map layers (js/finland-map.js), which reuse core's .cm-* map page. */

/* Inline SVG logo (partials/logo.php, site.php logo_partial) — sized like
   the image logo of the other sites. */
#app-logo.app-logo-svg { height:auto; overflow:visible; }

/* ════════════════════════════════════════
   Rulers page — Swedish Realm (castle), Grand Dukes (imperial crown) and
   Independent Finland (Nordic-cross flag) tab icons; site.php gives those
   tabs icon 'none', so they are drawn here in the tab's text colour.
════════════════════════════════════════ */
.rp-tab[data-tab="swedish"]::before,
.rp-tab[data-tab="grand-duchy"]::before,
.rp-tab[data-tab="republic"]::before {
  content:''; flex-shrink:0; width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:var(--fi-tab-icon) center / contain no-repeat;
  mask:var(--fi-tab-icon) center / contain no-repeat;
}
.rp-tab[data-tab="swedish"] {
  --fi-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 14.2V5.5h2V7h1.5V5.5h3V7H11V5.5h2v8.7zM6.4 14.2v-2.6a1.6 1.6 0 0 1 3.2 0v2.6M1.8 14.2h12.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="grand-duchy"] {
  --fi-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13.5h10M3.5 11.5c0-4 1.8-6.5 4.5-6.5s4.5 2.5 4.5 6.5zM8 5V2M6.6 3.2h2.8M8 5v6.5M5.5 7.5c.8.6 1.6.9 2.5.9s1.7-.3 2.5-.9' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="republic"] {
  --fi-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 14.5V2M3.5 2.5h9.5v6.5H3.5M7 2.5v6.5M3.5 5.7h9.5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════
   At a Glance — ten ages: one column per age, all in a single row (core
   lays out eight); bibliography in four columns.
════════════════════════════════════════ */
@media (min-width:901px) {
  .ag-era-list { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }
}
.bib-groups { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1100px) {
  .bib-groups { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════
   "Who Was in Power" — the head of state beside the chairman of the Senate
   or prime minister; the coloured line under the side card names the
   party. The columns stack once each would drop below ~200px.
════════════════════════════════════════ */
.em-power {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:12px 20px;
  align-items:start;
}
.em-power > .em-power-heading { grid-column:1 / -1; margin-bottom:1px; }
a.em-power-card--pm { color:inherit; text-decoration:none; }
.em-power-party {
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-ui); font-size:13px; line-height:1.3; color:var(--white-dim);
}
.em-power-party i { width:9px; height:9px; border-radius:50%; flex:none; }

/* ════════════════════════════════════════
   MAP — "The Making of Finland" (js/finland-map.js), as in the prototype
   data/finland-map.html: the sea, the graticule, the 27 zones coloured by
   who held them, the lakes over them and the places.
════════════════════════════════════════ */
.em-sea { fill:#0b1220; }
.fm-graticule { fill:none; stroke:rgba(255,255,255,0.06); stroke-width:0.6; vector-effect:non-scaling-stroke; pointer-events:none; }
.fm-lakes { fill:#0b1220; stroke:rgba(255,255,255,0.08); stroke-width:0.3; vector-effect:non-scaling-stroke; pointer-events:none; }
.cm-country { fill:#24222c; stroke:rgba(10,10,20,0.45); stroke-width:0.5; vector-effect:non-scaling-stroke; transition:fill 0.9s cubic-bezier(.4,0,.2,1); }
.cm-country.core { stroke:rgba(10,10,20,0.6); stroke-width:0.7; }
.cm-country:hover { stroke:var(--gold); stroke-width:1.4; }
/* Statuses: only those on the map in the year shown are listed. */
.cm-lg--trad { grid-template-columns:repeat(2, minmax(0, auto)); }
.cm-lg--trad span { cursor:default; }
.cm-lg--trad span b { font-weight:inherit; }
.cm-lg span { transition:opacity 0.4s; }
#cm-lg-trad span.off { display:none; }
.cm-lg i { border-radius:2px; }
.cm-lg i.fm-key-core { background:#e8edf5; border:1px solid rgba(10,10,20,0.6); }
.cm-lg i.fm-key-lake { background:#0b1220; border:1px solid rgba(255,255,255,0.3); }
/* "Finland in YEAR" thumbnails (event modal, timeline corner card): the
   sea behind the zones, the lakes over them. */
.em-map-thumb svg { background:#0b1220; }
.em-map-thumb svg .fm-thumb-lakes { fill:#0b1220; stroke:none; }

/* Chapter subtitle under the title, as in the prototype. */
.cm-chapter-sub { font-family:var(--f-ui); font-size:14px; color:var(--white-dim); margin:2px 0 12px; }
.cm-chapter-sub[hidden] { display:none; }
/* Head of state of the year shown, under the chapter text (as Germany's). */
.em-power.cm-power { display:block; margin-top:4px; }
.em-power.cm-power[hidden] { display:none; }
.em-power.cm-power > .em-power-heading { margin:22px 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; }

/* Thirteen era buttons in two rows; 30 chapters (finland-map.js marks the
   year labels that would collide; the current one always shows). */
.cm-eras { grid-template-columns:repeat(7, minmax(0, 1fr)); }
.cm-eras button { padding-left:4px; padding-right:4px; }
.cm-tick-labels button.thin:not(.cur) { visibility:hidden; }
.cm-tick-labels button:first-child { transform:none; }
.cm-tick-labels button:last-child { transform:translateX(-100%); }
@media (max-width:900px) {
  .cm-eras { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:600px) {
  .cm-lg--trad { grid-template-columns:minmax(0, 1fr); }
}