/* Floridablanca 1787 — Balearic volume.
   Palette mirrors the sister project (madoz) for visual continuity. */
:root {
  --bg: #fdfaf3;
  --surface: #ffffff;
  --border: #e0d9c5;
  --text: #1a1a1a;
  --text-muted: #6b6258;
  --accent: #2f5d8b;        /* census blue */
  --accent-light: #e2eaf4;
  --accent-dark: #20415e;
  --num-bg: #f7f3eb;
  --pill-bg: #efe7d3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #f0e7d0 0%, var(--bg) 100%);
  padding: 1.5em 2em 1em;
}
.header-content { max-width: 1400px; margin: 0 auto; }
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8em;
  margin: 0 0 0.2em;
  letter-spacing: 0.4px;
}
.subtitle {
  margin: 0;
  color: var(--text-muted);
  font-style: italic;
}

nav.tabs {
  padding: 0 2em;
  background: var(--bg);
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75em 1.3em;
  cursor: pointer;
  font: inherit;
  font-size: 0.95em;
  color: var(--text-muted);
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-content { display: none; padding: 1.5em 2em 3em; max-width: 1400px; margin: 0 auto; }
.tab-content.active { display: block; }

/* === HOME ============================================================ */
.home-hero {
  background: linear-gradient(135deg, var(--accent-light) 0%, #f4ecd6 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2.5em 2em 2em;
  text-align: center;
  margin-bottom: 2em;
}
.home-hero h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2em;
  margin: 0 0 0.35em;
  color: var(--accent-dark);
  letter-spacing: 0.4px;
}
.home-lead {
  color: var(--text-muted);
  font-style: italic;
  font-size: 1.05em;
  margin: 0 auto 1.8em;
  max-width: 680px;
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5em;
  max-width: 900px;
  margin: 0 auto;
}
.home-stat {
  padding: 0.6em 0.4em;
  background: none;
  border: none;
  border-radius: 0;
}
.home-stat .num {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.8em;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.home-stat .label {
  display: block;
  font-size: 0.75em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.3em;
}

.home-featured {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1.3em 1.6em 1.2em;
  margin: 0 0 2em;
}
.home-featured[hidden] { display: none; }
.featured-eyebrow {
  margin: 0 0 0.4em;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}
.featured-title {
  margin: 0 0 0.3em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45em;
  color: var(--accent-dark);
  letter-spacing: 0.3px;
}
.featured-meta {
  margin: 0 0 0.8em;
  font-size: 0.85em;
  color: var(--text-muted);
}
.featured-excerpt {
  margin: 0 0 1em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02em;
  line-height: 1.7;
  color: var(--text);
}
.featured-open {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent-dark);
  border-radius: 4px;
  padding: 0.55em 1em;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.featured-open:hover { background: var(--accent-dark); }

.home-prose { margin: 0 0 1.4em; line-height: 1.7; }
.home-prose h2 {
  font-family: Georgia, serif;
  font-size: 1.35em;
  color: var(--accent-dark);
  margin: 1.5em 0 0.6em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}
.home-prose p { margin: 0 0 0.9em; }
.home-prose strong { color: var(--accent-dark); }
.home-prose em { font-style: italic; }
.source-links {
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.source-links li { margin: 0 0 0.35em; }

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em;
  margin: 0 0 2em;
}
.source-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.9em 1.1em;
}
.source-card h3 {
  margin: 0 0 0.45em;
  font-family: Georgia, serif;
  font-size: 1.05em;
  color: var(--accent-dark);
}
.source-card p { margin: 0; font-size: 0.92em; }
.source-card .num {
  font-family: Georgia, serif;
  font-weight: 700;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* === POBLES (list) ================================================== */
#tab-pobles.tab-content.active { display: grid; grid-template-columns: 260px 1fr; gap: 1.5em; }

aside.filters {
  padding: 1em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: fit-content;
  position: sticky; top: 1em;
}
aside.filters h3 {
  margin: 0 0 0.8em;
  font-size: 1em;
  font-family: Georgia, serif;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4em;
}
.filter-group { margin-bottom: 0.9em; }
.filter-group label {
  display: block;
  font-size: 0.82em;
  color: var(--text-muted);
  margin-bottom: 0.2em;
}
.filter-group input, .filter-group select {
  width: 100%;
  padding: 0.45em 0.55em;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.9em;
  background: var(--surface);
}
.filter-group input:focus, .filter-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.filter-count {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: var(--text-muted);
  font-style: italic;
}
.filter-actions {
  display: flex; gap: 0.4em; margin-top: 0.5em;
}
.btn-clear, .btn-export {
  flex: 1;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.4em 0.6em;
  border-radius: 3px;
  font: inherit;
  font-size: 0.82em;
  cursor: pointer;
}
.btn-clear:hover, .btn-export:hover { color: var(--accent); border-color: var(--accent); }
.btn-export {
  background: var(--accent-light);
  color: var(--accent-dark);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-export:hover { background: var(--accent); color: white; }

.hint-banner {
  margin: 0 0 0.8em;
  padding: 0.55em 0.9em;
  background: var(--num-bg);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 0.86em;
  line-height: 1.5;
  color: var(--text-muted);
}
.hint-banner strong { color: var(--accent-dark); font-weight: 600; }

.pobles-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.92em;
}
.pobles-table th, .pobles-table td {
  text-align: left;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--border);
}
.pobles-table th {
  background: var(--num-bg);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.pobles-table th.sortable:hover { color: var(--accent); }
.pobles-table th.sorted-asc::after  { content: " ▲"; opacity: 0.6; }
.pobles-table th.sorted-desc::after { content: " ▼"; opacity: 0.6; }
.pobles-table tbody tr { cursor: pointer; }
.pobles-table tbody tr:hover { background: var(--accent-light); }
.pobles-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pill {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--pill-bg);
  border-radius: 2px;
  font-size: 0.8em;
  color: var(--accent-dark);
  font-weight: 600;
}
.pill.r  { background: #d9e7d8; color: #2d5e2a; }
.pill.s  { background: #f0dfc8; color: #6e4520; }
.pill.se { background: #ecd3d0; color: #6e2a25; }
.pill.ss { background: #e0d3eb; color: #4c2d6e; }

/* === POBLE DETAIL ==================================================== */
.detail-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 12, 0.45);
  display: none;
  z-index: 100;
}
.detail-overlay.open { display: block; }
.detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(900px, 95vw);
  background: var(--bg);
  box-shadow: -4px 0 16px rgba(0,0,0,0.2);
  overflow-y: auto;
  padding: 1.5em 2em 2em;
}
.detail-close {
  position: absolute; top: 1em; right: 1em;
  background: none; border: none; cursor: pointer;
  font-size: 1.4em; color: var(--text-muted);
  padding: 0.2em 0.4em;
}
.detail-close:hover { color: var(--accent); }
.detail-panel h2 {
  font-family: Georgia, serif;
  margin: 0 0 0.1em;
  color: var(--accent-dark);
}
.detail-name1787 {
  margin: 0 0 1em;
  font-style: italic;
  color: var(--text-muted);
}
.detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6em 1.2em;
  padding: 0.8em 1em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 1.2em;
}
.detail-meta dt {
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.detail-meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

.detail-section {
  margin-top: 1.5em;
}
.detail-section h3 {
  font-family: Georgia, serif;
  font-size: 1.15em;
  margin: 0 0 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
  color: var(--accent-dark);
}

.demog-table, .occ-table, .members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}
.demog-table th, .demog-table td,
.occ-table th, .occ-table td,
.members-table th, .members-table td {
  padding: 0.35em 0.6em;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.demog-table th, .occ-table th, .members-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.82em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--num-bg);
}
.demog-table td:first-child,
.occ-table td:first-child,
.members-table td:first-child { text-align: left; }
.demog-table tr.rollup td { font-weight: 700; background: var(--accent-light); }

/* === RELIGIOUS VIZ ================================================== */
.order-legend {
  display: flex; flex-wrap: wrap; gap: 0.4em 0.9em;
  margin: 0 0 1em;
  font-size: 0.82em;
}
.order-legend .swatch {
  display: inline-block; width: 0.8em; height: 0.8em;
  border-radius: 50%; margin-right: 0.35em;
  vertical-align: -1px;
}

.order-bar {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  gap: 0.6em;
  align-items: center;
  font-size: 0.88em;
  margin-bottom: 0.3em;
}
.order-bar .label { color: var(--text); }
.order-bar .bar { height: 1.0em; border-radius: 2px; }
.order-bar .meta {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.85em;
}

.convent-map { display: grid; gap: 0.45em; }
.convent-map-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: 0.8em;
  align-items: center;
  font-size: 0.88em;
  padding: 0.25em 0.35em;
  border-radius: 3px;
  cursor: pointer;
}
.convent-map-row:hover { background: var(--accent-light); }
.convent-map-row .pueblo-name { color: var(--text); font-weight: 500; }
.convent-map-row .dots {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.convent-dot {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}
.convent-map-row .count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Canonical religious-order family colours. Used both in the order
   bar chart and the per-pueblo dot map. */
.ord-franciscan  { background: #5b8b4a; }   /* green */
.ord-dominican   { background: #3a5e8c; }   /* blue */
.ord-augustinian { background: #b5803a; }   /* orange */
.ord-carmelite   { background: #6b3a8b; }   /* purple */
.ord-mercedarian { background: #2f8b8b; }   /* teal */
.ord-trinitarian { background: #7a4a2f; }   /* brown */
.ord-jeronymite  { background: #3a8b6b; }   /* dark green */
.ord-cistercian  { background: #8b2f3a; }   /* dark red */
.ord-cartusian   { background: #1f3a5e; }   /* navy */
.ord-vincentian  { background: #5e8baf; }   /* light blue */
.ord-other-clergy{ background: #8b758b; }   /* mauve */
.ord-secular     { background: #b5a875; }   /* sand (hermitatges/beateris) */

.convent-card, .welfare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 0.7em;
}
.convent-card h4, .welfare-card h4 {
  margin: 0 0 0.3em;
  font-family: Georgia, serif;
  font-size: 1.02em;
}
.convent-card .order, .welfare-card .total {
  margin: 0 0 0.4em;
  font-size: 0.85em;
  color: var(--text-muted);
}
.convent-card .members, .welfare-card .roles {
  display: flex; flex-wrap: wrap; gap: 0.4em 0.9em;
  font-size: 0.88em;
}
.convent-card .members span, .welfare-card .roles span {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.convent-card .members b, .welfare-card .roles b {
  color: var(--accent-dark);
}

.observations-note {
  padding: 0.7em 1em;
  background: #fff7e0;
  border-left: 3px solid #b88a2a;
  font-size: 0.92em;
  margin-bottom: 1em;
}

/* === DEMOGRAFIA ===================================================== */

/* Population pyramid: 3-column grid (V bars · age label · M bars). */
.pyramid-card { margin-bottom: 1.5em; }
.pyramid-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em 1.5em;
  margin-bottom: 0.4em;
}
.pyramid-header h3 { margin: 0; }
.pyramid-controls {
  font-size: 0.88em; color: var(--text-muted);
  display: flex; align-items: center; gap: 0.4em;
}
.pyramid-controls select {
  font-family: inherit; font-size: 0.92em;
  padding: 0.3em 0.5em;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
}
.pyramid-controls select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.pyramid-meta {
  margin: 0 0 0.8em;
  font-size: 0.88em;
  color: var(--text-muted);
}
.pyramid-meta b { color: var(--accent-dark); }

.pyramid-chart {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0.5em 0.4em;
  align-items: center;
}
.pyramid-chart .py-header {
  text-align: center;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}
.pyramid-chart .py-header.left  { text-align: right; padding-right: 0.4em; }
.pyramid-chart .py-header.right { text-align: left;  padding-left: 0.4em; }

.pyramid-row-left {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5em;
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  color: var(--text-muted);
}
.pyramid-row-right {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.5em;
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  color: var(--text-muted);
}
.pyramid-bar-male,
.pyramid-bar-female {
  height: 1.05em;
  border-radius: 2px;
  min-width: 2px;
}
.pyramid-bar-male   { background: #2f5d8b; }   /* accent blue */
.pyramid-bar-female { background: #a8845b; }   /* sandy brown */
.pyramid-age {
  text-align: center;
  font-size: 0.85em;
  font-family: Georgia, serif;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* Occupation stacked-bars per pueblo. */
.occ-stack-card { margin-bottom: 1.5em; }
.occ-header {
  display: flex; flex-wrap: wrap; gap: 0.4em 1.5em;
  align-items: baseline; margin: 0 0 0.4em;
}
.occ-header h3 { margin: 0; }
.occ-mode-toggle {
  display: inline-flex; gap: 0.4em;
  background: var(--num-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15em;
  font-size: 0.84em;
}
.occ-mode-toggle label {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s;
}
.occ-mode-toggle input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.occ-mode-toggle label:has(input:checked) {
  background: var(--accent);
  color: white;
}
.occ-mode-toggle label:hover:not(:has(input:checked)) {
  background: var(--accent-light);
  color: var(--accent-dark);
}
.occ-legend {
  display: flex; flex-wrap: wrap; gap: 0.4em 1.1em;
  font-size: 0.82em;
  margin-bottom: 0.8em;
  color: var(--text);
}
.occ-legend span { display: inline-flex; align-items: center; gap: 0.35em; }
.occ-legend .swatch {
  display: inline-block; width: 0.85em; height: 0.85em;
  border-radius: 2px;
}
.occ-stack {
  display: grid;
  gap: 0.25em;
}
.occ-row {
  display: grid;
  grid-template-columns: 160px 1fr 70px;
  align-items: center;
  gap: 0.6em;
  font-size: 0.85em;
  padding: 0.2em 0.3em;
  border-radius: 3px;
  cursor: pointer;
}
.occ-row:hover { background: var(--accent-light); }
.occ-row .occ-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ-row .occ-bar-wrap {
  display: flex;
  align-items: center;
  height: 1.15em;
  min-width: 0;
}
.occ-row .occ-bar {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: width 0.25s ease;
}
.occ-row .occ-seg { height: 100%; }
.occ-row .occ-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Derived demographic-indicators table. Mirrors the Pobles table
   styling but with right-aligned numeric columns and subtle row
   hover so the click-through to the pueblo detail is discoverable. */
.indicators-card { margin-bottom: 1.5em; overflow-x: auto; }
.indicators-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.indicators-table th, .indicators-table td {
  text-align: left;
  padding: 0.45em 0.7em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.indicators-table th {
  background: var(--num-bg);
  font-weight: 600;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.indicators-table th.sortable:hover { color: var(--accent); }
.indicators-table th.sorted-asc::after  { content: " ▲"; opacity: 0.6; }
.indicators-table th.sorted-desc::after { content: " ▼"; opacity: 0.6; }
.indicators-table tbody tr { cursor: pointer; }
.indicators-table tbody tr:hover { background: var(--accent-light); }
.indicators-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.indicators-table th.num { text-align: right; }
/* Compact spacing inside cells with a colour swatch. */
.indicators-table .cell-warm {
  color: #8b3a2f;
  font-weight: 600;
}
.indicators-table .cell-cool {
  color: #2f5d8b;
  font-weight: 600;
}
.indicators-table .vidal-flag {
  display: inline-block;
  margin-left: 0.3em;
  color: #b88a2a;
  cursor: help;
  font-size: 0.95em;
}
.indicators-table .vidal-flag:hover { color: #8b3a2f; }

.vidal-notes {
  margin-top: 1em;
  padding: 0.7em 1em;
  background: #fff7e0;
  border-left: 3px solid #b88a2a;
  border-radius: 3px;
  font-size: 0.88em;
  line-height: 1.5;
}
.vidal-notes summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-dark);
  font-family: Georgia, serif;
  font-size: 1em;
  padding: 0.1em 0;
}
.vidal-notes summary:hover { color: var(--accent); }
.vidal-notes ul { margin: 0.4em 0 0.6em 0; padding-left: 1.4em; }
.vidal-notes li { margin-bottom: 0.55em; }
.vidal-notes em { color: #4a3a20; }
.vidal-notes strong { color: var(--accent-dark); }

/* Marital × age × sex stacked-bar pyramid. Same skeleton as the
   population pyramid (V left / age centre / M right) but each bar
   is at 100% width and split into solters / casats / vidus, so the
   composition per age-band is visible at a glance. */
.marital-card { margin-bottom: 1.5em; }
.marital-header {
  display: flex; flex-wrap: wrap; gap: 0.4em 1.5em;
  align-items: baseline; margin: 0 0 0.4em;
}
.marital-header h3 { margin: 0; }
.ms-legend {
  display: flex; flex-wrap: wrap; gap: 0.5em 1.2em;
  font-size: 0.82em;
  margin: 0 0 0.4em;
}
.ms-legend span { display: inline-flex; align-items: center; gap: 0.35em; }
.ms-legend .swatch {
  display: inline-block; width: 0.85em; height: 0.85em;
  border-radius: 2px;
}
.ms-single  { background: #c9a878; }   /* sandy tan — youth */
.ms-married { background: #2f5d8b; }   /* accent blue — paired */
.ms-widowed { background: #6e2620; }   /* dark terracotta — loss */

.marital-meta {
  margin: 0 0 0.5em;
  font-size: 0.85em;
  color: var(--text-muted);
}
.marital-meta b { color: var(--accent-dark); }

.marital-chart {
  display: grid;
  grid-template-columns: 65px 1fr 80px 1fr 65px;
  gap: 0.45em 0.4em;
  align-items: center;
}
.marital-chart .mc-header {
  text-align: center;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}
.marital-chart .mc-header.left  { text-align: right; padding-right: 0.4em; grid-column: 1 / 3; }
.marital-chart .mc-header.right { text-align: left;  padding-left: 0.4em;  grid-column: 4 / 6; }

.marital-count {
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.marital-count.left  { text-align: right; }
.marital-count.right { text-align: left; }
.marital-age {
  text-align: center;
  font-family: Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  color: var(--accent-dark);
}
.marital-bar {
  display: flex;
  height: 1.05em;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.marital-bar.left { flex-direction: row-reverse; }
.marital-bar .ms-seg { height: 100%; }

/* Sex-ratio diverging bars per pueblo. Centred at 100 (parity), with
   the bar extending left for female-skewed pueblos and right for
   male-skewed. Five colour buckets convey the magnitude. */
.ratio-card { margin-bottom: 1.5em; }
.ratio-axis {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  gap: 0.6em;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding-bottom: 0.3em;
  margin-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}
.ratio-axis-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.ratio-axis-inner .ax-left   { text-align: left; }
.ratio-axis-inner .ax-center { text-align: center; font-weight: 600; color: var(--accent-dark); }
.ratio-axis-inner .ax-right  { text-align: right; }
.ratio-axis-inner > * { white-space: nowrap; }

.ratio-chart { display: grid; gap: 0.15em; }
.ratio-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  gap: 0.6em;
  align-items: center;
  font-size: 0.85em;
  padding: 0.15em 0.3em;
  border-radius: 3px;
  cursor: pointer;
}
.ratio-row:hover { background: var(--accent-light); }
.ratio-row .ratio-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ratio-row .ratio-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.ratio-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 1.1em;
  align-items: center;
}
.ratio-bar::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px; bottom: -3px;
  width: 1px;
  background: var(--text);
  transform: translateX(-50%);
}
.ratio-bar .neg-wrap { display: flex; justify-content: flex-end; height: 100%; }
.ratio-bar .pos-wrap { display: flex; justify-content: flex-start; height: 100%; }
.ratio-bar .neg,
.ratio-bar .pos {
  height: 100%;
  border-radius: 2px;
}

.ratio-strong-female { background: #2f5d8b; }   /* deep blue */
.ratio-mid-female    { background: #6e9bcc; }   /* mid blue */
.ratio-light-female  { background: #b9d0e6; }   /* light blue */
.ratio-light-male    { background: #e6c9b9; }   /* light terracotta */
.ratio-mid-male      { background: #cc8f6e; }   /* mid terracotta */
.ratio-strong-male   { background: #8b3a2f; }   /* deep terracotta */

/* "Where do these occupations live?" — top-5 pueblos per group. */
.occ-geography {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9em;
}
.occ-geo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.7em 0.9em 0.5em;
}
.occ-geo-card h4 {
  margin: 0 0 0.2em;
  font-family: Georgia, serif;
  font-size: 1em;
  color: var(--accent-dark);
  display: flex; align-items: center; gap: 0.45em;
}
.occ-geo-card .group-swatch {
  display: inline-block; width: 0.85em; height: 0.85em;
  border-radius: 2px;
}
.occ-geo-card .group-total {
  font-size: 0.78em;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.occ-geo-rank {
  display: grid;
  grid-template-columns: 1em 1fr 60px 80px;
  gap: 0.35em;
  font-size: 0.85em;
  align-items: center;
  padding: 0.25em 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 2px;
}
.occ-geo-rank:hover { background: var(--accent-light); }
.occ-geo-rank .rank {
  text-align: center;
  font-size: 0.78em;
  color: var(--text-muted);
}
.occ-geo-rank .name { color: var(--text); }
.occ-geo-rank .count { text-align: right; color: var(--accent-dark); font-weight: 600; }
.occ-geo-rank .share {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Canonical occupation-group colours, used in both the legend and
   the per-pueblo stacked bars. */
.occ-agri     { background: #5b8b4a; }   /* green — pagesia */
.occ-craft    { background: #b5803a; }   /* orange — artesania */
.occ-service  { background: #6b3a8b; }   /* purple — servei domèstic */
.occ-clergy   { background: #8b2f3a; }   /* red — clergat */
.occ-nobility { background: #2f5d8b; }   /* blue — noblesa/admin */
.occ-military { background: #b59d4a; }   /* gold — militars */
.occ-other    { background: #8b758b; }   /* mauve — estudiants i altres */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.5em;
  margin-bottom: 1.5em;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1em 1.2em 1.4em;
  margin-bottom: 1.5em;
}
/* Inside a chart-grid the gap already handles spacing — reset to
   avoid double separation. */
.chart-grid > .chart-card { margin-bottom: 0; }
.chart-card h3 {
  font-family: Georgia, serif;
  margin: 0 0 0.7em;
  font-size: 1.05em;
  color: var(--accent-dark);
}
.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 0.6em;
  align-items: center;
  font-size: 0.85em;
  margin-bottom: 0.25em;
}
.bar-row .name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar  {
  height: 0.85em;
  background: var(--accent);
  border-radius: 2px;
}
.bar-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.bar-row.alt .bar { background: #a8845b; }

/* === COMENTARI ====================================================== */
.prose {
  font-family: Georgia, serif;
  font-size: 1.02em;
  line-height: 1.7;
}
.prose p { margin: 0 0 1em; }
.prose .nota {
  margin-top: 1.5em;
  padding: 1em 1.2em;
  border-left: 3px solid var(--accent);
  background: var(--num-bg);
  font-size: 0.93em;
  white-space: pre-wrap;
}

/* === FOOTER ========================================================= */
footer {
  max-width: 1400px;
  margin: 2em auto;
  padding: 1em 2em;
  border-top: 1px solid var(--border);
  font-size: 0.82em;
  color: var(--text-muted);
  text-align: center;
}
footer code { font-size: 0.95em; }
.footer-repo { margin-top: 0.7em; }
.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text-muted);
}
.repo-link:hover { color: var(--accent-dark); }
.repo-icon { width: 1em; height: 1em; }