/* The European Sovereignty Index page. Scoped under .sovereignty-index, the same discipline as
   the three dataset pages. Tokens come from system.css (area hues, direction colours, paper,
   ink). 2026-08-31, step 2 of the index spec. */

.sovereignty-index .si-head { margin-bottom: 26px; }
.sovereignty-index .si-nojs { font-size: 14px; color: var(--muted); }
.sovereignty-index.js .si-nojs { display: none; }

/* the combined block: the number, its chart, the key */
.si-combined { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 26px 0 30px; border-top: 2px solid var(--ink); }
.si-total { margin: 0; }
.si-total b { display: block; font: 700 96px/.9 var(--head); color: var(--ink-head); letter-spacing: -.01em; }
.si-total span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 32ch; }
.si-total .si-unit { font: 600 10.5px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint, var(--muted)); margin-top: 8px; }
/* the headline: the level is the index value; the year's movement sits under it */
.si-total .si-total-kicker { display: block; font: 600 11px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; max-width: none; }
.si-total .si-total-of { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 32ch; }
.si-total .si-total-flow { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 34ch; }
.si-total .si-total-flow b { display: inline; font: 700 30px/1 var(--head); color: var(--ink-head); letter-spacing: 0; }
.si-val { font: 600 10.5px/1 var(--body); fill: var(--muted); }
.si-run-val { font: 700 12.5px/1 var(--head); fill: var(--ink-head); }
.si-pillar .si-flow-line { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.si-pillar .si-flow-line b { font: 700 20px/1 var(--head); color: var(--area); }
.si-level-h { margin: 0; font: 600 11px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.si-chart svg { display: block; width: 100%; height: auto; }
.si-axis { font: 500 10.5px/1 var(--body); fill: var(--muted); }
.si-zero { stroke: var(--hair); stroke-width: 1; }
.si-bar-up { fill: var(--up, #1a7f37); }
.si-bar-down { fill: var(--down, #cf222e); }
.si-run { fill: none; stroke: var(--ink-head); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.si-run-dot { fill: var(--ink-head); }
.si-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.si-legend i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.si-legend .si-bar-up { background: var(--up, #1a7f37); }
.si-legend .si-bar-down { background: var(--down, #cf222e); }
.si-legend .si-i-run { height: 2px; background: var(--ink-head); vertical-align: 4px; }

.si-key { padding: 22px 0 6px; border-top: 1px solid var(--hair); }
.si-key h2 { font: 700 13px/1 var(--head); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-head); margin: 0 0 6px; }
.si-key p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; max-width: 70ch; }
.si-sliders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.si-slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 12px/1.3 var(--body); color: var(--ink); }
.si-slider label b { font: 700 18px/1 var(--head); color: var(--area, var(--ink-head)); }
.si-slider input { width: 100%; margin: 8px 0 6px; accent-color: var(--area, var(--steel-deep)); }
.si-slider small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.si-key-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--muted); }
.si-key-actions button { font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--edge); background: var(--paper); color: var(--ink); cursor: pointer; }
.si-key-actions button:hover { border-color: var(--ink); }

/* the four pillar panels */
.si-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.si-pillar { --area: var(--ink); padding: 20px 20px 18px; background: var(--tint, var(--hair-soft)); }
.si-pillar-policy-and-law { --area: var(--area-policy-and-law); --tint: var(--area-policy-and-law-tint); }
.si-pillar-compute-and-infrastructure { --area: var(--area-compute-and-infrastructure); --tint: var(--area-compute-and-infrastructure-tint); }
.si-pillar-defence-and-space { --area: var(--area-defence-and-space); --tint: var(--area-defence-and-space-tint); }
.si-pillar-industry-investment-and-rd { --area: var(--area-industry-investment-and-rd); --tint: var(--area-industry-investment-and-rd-tint); }
.si-pillar header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.si-pillar h2 { font: 700 22px/1.1 var(--head); color: var(--ink-head); margin: 0; }
.si-pillar h2 a { color: inherit; text-decoration: none; }
.si-pillar h2 a:hover { color: var(--area); }
.si-pillar .si-weight { font: 600 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.si-pillar .si-run-total { margin: 12px 0 0; display: flex; align-items: baseline; gap: 12px; }
.si-pillar .si-run-total b { font: 700 56px/.9 var(--head); color: var(--area); letter-spacing: -.01em; }
.si-pillar .si-run-total span { font-size: 13px; line-height: 1.4; color: var(--muted); max-width: 22ch; }
.si-pillar .si-chart { margin-top: 14px; }
.si-pillar .si-bar-up { fill: var(--area); }
.si-pillar .si-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.si-pillar .si-counts b { color: var(--ink-head); font-weight: 600; }
/* the level block: the 0 to 100 number and its five sourced indicators */
.si-level { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.si-level-n { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.si-level-n b { font: 700 40px/1 var(--head); color: var(--ink-head); }
.si-level-n span { font-size: 12.5px; line-height: 1.4; color: var(--muted); max-width: 26ch; }
.si-indicators { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.si-indicators li { display: grid; grid-template-columns: 3.2ch minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.4; }
.si-indicators b { font: 700 14px/1.4 var(--head); color: var(--area, var(--ink-head)); text-align: right; }
.si-indicators span { color: var(--ink); }
.si-indicators small { display: block; font-size: 11.5px; color: var(--muted); }
.si-indicators small a { color: var(--muted); text-underline-offset: 2px; }
.si-indicators small a:hover { color: var(--area, var(--steel-deep)); }

.si-movers { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.si-movers li { display: grid; grid-template-columns: 4.5ch minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.4; }
.si-movers b { font: 700 15px/1.3 var(--head); color: var(--ink-head); text-align: right; }
.si-movers b.neg { color: var(--down, #cf222e); }
.si-movers a { color: var(--ink); text-decoration: none; }
.si-movers a:hover { color: var(--area, var(--steel-deep)); text-decoration: underline; text-underline-offset: 3px; }
.si-movers small { display: block; color: var(--muted); font-size: 12px; }

.si-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 26px 0 0; max-width: 78ch; }
.si-note strong { color: var(--ink-head); font-weight: 600; }
.si-body { margin-top: 36px; }

@media (max-width: 900px) {
  .si-combined { grid-template-columns: 1fr; gap: 24px; }
  .si-total b { font-size: 72px; }
  .si-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .si-sliders { grid-template-columns: 1fr; }
  .si-total b { font-size: 60px; }
  .si-pillar .si-run-total b { font-size: 44px; }
}