/* How a country is governed (GovernmentChartHelper#government_chart): shared by elekt.io's country pages, which
   bundle it from app/javascript/elekt/site.css, and Jane's Countries app, which @uses it from
   application.bootstrap.scss. Plain CSS, so both build steps read the same file.

   The chart on a wide figure, the same boxes as stacked cards on a narrow one (a container query, so a chart
   squeezed into a column switches too). Voters are the anchor, elected bodies the accent, bodies chosen by others
   violet, appointed ones a dashed outline, hereditary ones quiet grey; a confidence link is dashed - accountability,
   not a choice of members.

   Colours are --gov-* custom properties. The defaults below sit in :where() (no specificity), so an app recolours
   the chart with one rule of its own: `.my-app .gov-figure { --gov-accent: ...; }`. */

:where(.gov-figure) {
    --gov-surface: #ffffff;
    --gov-ink: #101a36;
    --gov-muted: #525c76;
    --gov-line: #d6dbe7;
    --gov-accent: #2347c8;
    --gov-accent-soft: #e8edfc;
    --gov-indirect-bg: #e8e3f7;
    --gov-indirect-ink: #3f2a82;
    --gov-quiet-bg: #ecedf2;
    --gov-focus: #e8590c;
    --gov-radius: 12px;
}

.gov-figure { container-type: inline-size; margin: 0; background: var(--gov-surface); border: 1px solid var(--gov-line); border-radius: calc(var(--gov-radius) + 4px); padding: 1.25rem 1.25rem 1rem; color: var(--gov-ink); }
.gov-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--gov-line); }
.gov-svg { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; overflow: visible; }
.gov-box { fill: var(--gov-surface); stroke: var(--gov-line); stroke-width: 1.5; }
.gov-name { fill: var(--gov-ink); font-size: 16px; font-weight: 650; }
.gov-detail { fill: var(--gov-muted); font-size: 13.5px; }
.gov-next { fill: var(--gov-accent); font-size: 13px; font-weight: 650; }
.gov-node--electorate .gov-box { fill: var(--gov-ink); stroke: var(--gov-ink); }
.gov-node--electorate .gov-name, .gov-node--electorate .gov-detail { fill: var(--gov-surface); }
.gov-node--elected .gov-box { fill: var(--gov-accent-soft); stroke: var(--gov-accent); }
.gov-node--indirect .gov-box { fill: var(--gov-indirect-bg); stroke: var(--gov-indirect-ink); stroke-opacity: 0.55; }
.gov-node--appointed .gov-box { stroke: var(--gov-muted); stroke-opacity: 0.7; stroke-dasharray: 6 4; }
.gov-node--hereditary .gov-box { fill: var(--gov-quiet-bg); }
a.gov-node:hover .gov-box, a.gov-node:focus-visible .gov-box { stroke-width: 2.5; }
a.gov-node:focus-visible { outline: none; }
a.gov-node:focus-visible .gov-box { stroke: var(--gov-focus); }
.gov-line { fill: none; stroke: var(--gov-muted); stroke-width: 1.5; stroke-linejoin: round; }
.gov-line--confidence { stroke-dasharray: 5 4; }
.gov-arrowhead { fill: none; stroke: var(--gov-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gov-word { fill: var(--gov-muted); font-size: 12.5px; font-weight: 650; paint-order: stroke; stroke: var(--gov-surface); stroke-width: 5px; stroke-linejoin: round; }
.gov-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; padding: 0; font-size: 0.85rem; color: var(--gov-muted); }
.gov-legend li { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.gov-swatch { width: 0.9rem; height: 0.9rem; border-radius: 4px; border: 1.5px solid var(--gov-line); background: var(--gov-surface); flex: none; }
.gov-legend .gov-node--elected .gov-swatch { background: var(--gov-accent-soft); border-color: var(--gov-accent); }
.gov-legend .gov-node--indirect .gov-swatch { background: var(--gov-indirect-bg); border-color: color-mix(in srgb, var(--gov-indirect-ink) 55%, transparent); }
.gov-legend .gov-node--appointed .gov-swatch { border-style: dashed; border-color: var(--gov-muted); }
.gov-legend .gov-node--hereditary .gov-swatch { background: var(--gov-quiet-bg); }

/* The narrow version: the chart's rows as stacked cards, each saying its links in words. */
.gov-cards { display: none; list-style: none; margin: 0; padding: 0; }
.gov-tier { display: grid; gap: 0.5rem; }
.gov-tier + .gov-tier { margin-top: 1.4rem; position: relative; }
.gov-tier + .gov-tier::before { content: ""; position: absolute; left: 50%; top: -1.15rem; height: 0.9rem; border-left: 1.5px solid var(--gov-muted); }
.gov-card { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.7rem 0.85rem; background: var(--gov-surface); border: 1.5px solid var(--gov-line); border-radius: var(--gov-radius); }
.gov-card.gov-node--electorate { background: var(--gov-ink); border-color: var(--gov-ink); color: var(--gov-surface); }
.gov-card.gov-node--electorate .gov-card-detail { color: var(--gov-surface); opacity: 0.85; }
.gov-card.gov-node--elected { background: var(--gov-accent-soft); border-color: var(--gov-accent); }
.gov-card.gov-node--indirect { background: var(--gov-indirect-bg); border-color: color-mix(in srgb, var(--gov-indirect-ink) 55%, transparent); }
.gov-card.gov-node--appointed { border-style: dashed; border-color: color-mix(in srgb, var(--gov-muted) 70%, transparent); }
.gov-card.gov-node--hereditary { background: var(--gov-quiet-bg); }
.gov-card-name { font-size: 1rem; }
.gov-card-detail, .gov-card-mandate { font-size: 0.88rem; color: var(--gov-muted); }
.gov-card-mandate { color: var(--gov-ink); }
.gov-card-next { font-size: 0.88rem; font-weight: 650; color: var(--gov-accent); }

/* Below about 640px of figure the 1000-unit chart's 16px names would shrink under 10px: cards instead. */
@container (max-width: 640px) {
    .gov-chart { display: none; }
    .gov-cards { display: block; }
}
@media (max-width: 719px) {
    .gov-figure { padding: 0.9rem; }
}