/* History of Mexico — overrides loaded after core/css/style.css: the inline
   SVG logo, two rulers-tab icons, ten At a Glance ages in one row, the
   viceroy and rival-government cards in "Who Was in Power", and the map's
   live legend. The map itself uses core's .cm-* styles (js/mexico-map.js is
   the christianity map engine). */

/* 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 — Tlatoque (stepped pyramid) and Kings & Viceroys (crowned
   tower) tab icons; site.php gives those tabs icon 'none', so they are
   drawn here in the tab's text colour.
════════════════════════════════════════ */
.rp-tab[data-tab="tlatoque"]::before,
.rp-tab[data-tab="new-spain"]::before {
  content:''; flex-shrink:0; width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:var(--mx-tab-icon) center / contain no-repeat;
  mask:var(--mx-tab-icon) center / contain no-repeat;
}
.rp-tab[data-tab="tlatoque"] {
  --mx-tab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 14h13M2.8 14l1.4-3h7.6l1.4 3M4.2 11l1.3-3h5l1.3 3M5.5 8l1.2-2.8h2.6L10.5 8M6.7 5.2V3h2.6v2.2M8 14v-3' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
.rp-tab[data-tab="new-spain"] {
  --mx-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");
}

/* ════════════════════════════════════════
   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)); }

/* ════════════════════════════════════════
   "Who Was in Power" — the ruler (tlatoani, King of Spain or head of
   state) beside the viceroy of New Spain or a rival government (the
   event's `primeMinister` cards); 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; }

/* ════════════════════════════════════════
   MAP — "Mexico Through Time": the legend lists only the states and
   cultures shown in the year on screen (js/mexico-map.js sets .is-off).
════════════════════════════════════════ */
.cm-lg span.is-off { display:none; }