/* Series pages: country hubs, /countries/ and one page per country x variable.
   Loaded only by the pages scripts/build-series-pages.js generates. */
.sp { max-width: 1040px; margin: 0 auto; padding: 22px 24px 50px; }
.sp h2 { font-size: 1.02rem; color: var(--navy); font-weight: 700; margin: 0 0 10px; text-align: left; }
.sp code { font-family: var(--mono); font-size: 0.86em; color: var(--blue-dark); background: var(--blue-tint); border-radius: 4px; padding: 1px 4px; }
.sp-crumbs { display: flex; flex-wrap: wrap; gap: 7px; font-size: 0.84rem; color: var(--muted); margin-bottom: 14px; }
.sp-crumbs a { color: var(--blue); }
.sp-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--navy); font-weight: 800; line-height: 1.15; margin: 0 0 6px; text-align: left; }
.sp-sub { color: var(--muted); font-size: 0.95rem; margin: 0 0 18px; }
.sp-head .sp-actions { margin-bottom: 22px; }
.sp-svg { width: 100%; height: auto; display: block; }
.sp-svg .g { stroke: #eef2f5; stroke-width: 1; }
.sp-svg .z { stroke: #9aa8b5; stroke-width: 1; }
.sp-svg .yl { font-size: 11px; fill: #5b6b7b; text-anchor: end; font-family: inherit; }
.sp-svg .xl { font-size: 11px; fill: #5b6b7b; text-anchor: middle; font-family: inherit; }
/* Key figures above the chart */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 16px; }
.sp-cards > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sp-cards dt { font-size: 0.76rem; color: var(--muted); margin-bottom: 4px; }
.sp-cards dd { margin: 0; }
.sp-cards b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.sp-cards b small { font-size: 0.7em; font-weight: 600; color: var(--muted); }
.sp-cards dd span { font-size: 0.78rem; color: var(--muted); }

/* Chart card, laid out and styled like the Comparison tool (compare.html,
   explore.css): title and Report error, time range, chart, Display/Export. */
.sp-chartbox { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow-md); margin-bottom: 18px; }
.sp-chead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sp .sp-caption { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; color: #1d2733; }
.sp-report { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6b7b; background: #fff; border: 1px solid #e1e7ec; border-radius: 6px; padding: 4px 9px; text-decoration: none; white-space: nowrap; }
.sp-report:hover { color: #0074F0; border-color: #0074F0; }
.sp-report svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.sp-label { font-size: 11px; font-weight: 600; color: #5b6b7b; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; }
.sp-range { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp-range[hidden] { display: none; }
.sp-presets { display: inline-flex; border: 1px solid #e1e7ec; border-radius: 6px; overflow: hidden; background: #fff; }
.sp-presets button { border: 0; border-left: 1px solid #e1e7ec; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #5b6b7b; padding: 5px 11px; cursor: pointer; transition: background .12s, color .12s; }
.sp-presets button:first-child { border-left: 0; }
.sp-presets button:hover { background: #f0f8ff; color: #1d2733; }
.sp-presets button.active { background: #0074F0; color: #fff; }
.sp-chart { position: relative; margin: 0; }
.sp-svg .ln { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sp-svg .ln.main { stroke: #0074F0; stroke-width: 2; }
.sp-svg .ln.cmp { stroke-width: 1.6; }
.sp-svg .ln.f { stroke-dasharray: 2 3; opacity: .9; }
.sp-svg .dot.main { fill: #0074F0; }
.sp-svg .el { font-size: 11px; font-family: inherit; fill: #5b6b7b; }
.sp-svg .el.main { fill: #0074F0; font-weight: 600; }
.sp-svg .hover-x { display: none; }
.sp-svg .hdots circle { stroke: #fff; stroke-width: 1.5; }
/* Hover card, as in the Comparison tool */
.sp-tip { position: absolute; top: 8px; z-index: 5; max-width: 340px; background: rgba(255, 255, 255, .98); border: 1px solid #e1e7ec; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 8px 12px 9px; font-size: 12px; color: #222; pointer-events: none; }
.sp-tip .tt-header { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: #0074F0; }
.sp-tip table { width: 100%; border: 0; border-collapse: collapse; background: transparent; box-shadow: none; border-radius: 0; font-size: inherit; margin: 0; }
.sp-tip td { border: 0; background: transparent; padding: 2px 0; vertical-align: middle; }
.sp-tip tr:nth-child(even), .sp-tip tr:hover { background: transparent; }
.sp-tip .tt-dot { font-size: 14px; line-height: 1; padding-right: 8px; width: 1em; }
.sp-tip .tt-state { padding-right: 28px; white-space: nowrap; color: #555; }
.sp-tip .tt-val { text-align: right; font-weight: 500; color: #111; padding-left: 8px; white-space: nowrap; }
.sp-tip small { color: #5b6b7b; font-weight: 400; }
.sp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #5b6b7b; margin-top: 2px; }
.sp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sp-legend .lg { display: inline-block; width: 18px; height: 0; border-top: 2px solid #0074F0; }
.sp-legend .lg.f { border-top-style: dotted; }
.sp-legend .sp-unit { margin-left: auto; }
.sp-note { margin: 8px 0 0; font-size: 0.82rem; color: #7a5a00; background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 8px; padding: 7px 10px; }
.sp-note[hidden] { display: none; }
.sp-tool { font: inherit; font-size: 12.5px; color: #1d2733; background: #fff; border: 1px solid #e1e7ec; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
/* Display / Export row */
.sp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f5; }
.sp-tools[hidden] { display: none; }
.sp-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-toggle, .sp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: #fff; border: 1px solid #e1e7ec; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12.5px; color: #1d2733; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
.sp-toggle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #cfcfcf; transition: background .12s; }
.sp-toggle:hover, .sp-btn:hover { border-color: #0074F0; color: #0074F0; }
.sp-toggle[aria-pressed="true"] { border-color: #0074F0; color: #0074F0; background: rgba(0, 123, 255, .06); box-shadow: inset 0 0 0 1px #0074F0; }
.sp-toggle[aria-pressed="true"]::before { background: #0074F0; }
.sp-toggle:disabled { opacity: .45; cursor: default; }
.sp-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
/* Download menu */
.sp-dl { position: relative; }
.sp-dl-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 250px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #e1e7ec; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.sp-dl-menu[hidden] { display: none; }
.sp-dl-menu li { margin: 0; }
.sp-dl-menu button, .sp-dl-menu a { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: #1d2733; background: none; border: 0; border-radius: 4px; padding: 7px 10px; cursor: pointer; text-decoration: none; }
.sp-dl-menu button:hover, .sp-dl-menu a:hover { background: #f0f8ff; }
.sp-dl-menu .sp-dl-cite { font-size: 13px; line-height: 1.45; color: #5b6b7b; padding: 8px 10px 4px; border-top: 1px solid #e1e7ec; margin-top: 4px; max-width: 250px; }
.sp-dl-menu .sp-dl-cite a { display: inline; padding: 0; width: auto; color: #0074F0; font-weight: 600; }
.sp-more { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; font-size: 0.86rem; }
.sp-more a { font-weight: 600; }
.sp-chartbox .sp-actions { margin-top: 12px; align-items: center; }
.sp-textlink { display: inline-block; padding: 4px 0; font-size: 0.86rem; font-weight: 600; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-actions .download-button, .sp-actions .cta-button { padding: 9px 14px; font-size: 0.88rem; margin: 0; }
.sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.sp-cols > section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sp-table { font-size: 0.88rem; box-shadow: none; border: 0; border-radius: 0; }
.sp-table th { background: none; color: var(--muted); font-size: 0.72rem; letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sp-table td { padding: 7px 8px; }
.sp-table tr:nth-child(even), .sp-table tr:hover { background: none; }
.sp-table td:nth-child(2) { text-align: right; }
.sp-table th:nth-child(2) { text-align: right; }
.sp-table tr.fc td { color: var(--muted); }
.sp-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); background: var(--blue-tint); border-radius: 4px; padding: 2px 6px; }
.sp-sources { list-style: none; margin: 0 0 12px; padding: 0; }
.sp-sources li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--body); }
.sp-sources li:first-child { border-top: 0; padding-top: 0; }
.sp-sources .yrs { color: var(--muted); white-space: nowrap; }
.sp-muted { color: var(--muted); font-size: 0.88rem; }
.sp-links { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; margin: 0; }
.sp-links a, .sp-crumbs a, .sp-related a, .sp-cite a, .sp-release a { font-weight: 600; }
.sp-related { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.sp-related p { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.sp-related p a { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font-size: 0.85rem; color: var(--navy); }
.sp-related p a:hover { border-color: var(--blue-border); background: var(--blue-tint); }
.sp-related p a.all { border: 0; background: none; color: var(--blue); }
.sp-cite { font-size: 0.84rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin: 0 0 4px; }
.sp-release { font-size: 0.8rem; color: var(--muted); margin: 0; }
.sp-hubgroup { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.sp-hubtable td:nth-child(2), .sp-hubtable th:nth-child(2) { text-align: left; }
.sp-hubtable .num { text-align: right; white-space: nowrap; }
.sp-hubtable .num span { color: var(--muted); }
@media (max-width: 820px) {
  .sp-cols, .sp-related { grid-template-columns: 1fr; }
}
.sp-hubtable { table-layout: fixed; }
.sp-hubtable .c-var { width: 40%; } .sp-hubtable .c-code { width: 20%; } .sp-hubtable .c-cov { width: 17%; } .sp-hubtable .c-num { width: 23%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp-filter input { width: 100%; max-width: 420px; font: inherit; font-size: 0.95rem; padding: 10px 12px; border: 1px solid #cdd6e0; border-radius: 8px; color: var(--ink); background: #fff; margin-bottom: 20px; }
.sp-filter input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 116, 240, .15); }
.sp-region { margin-bottom: 22px; }
.sp-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.sp-countries li { display: flex; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-size: 0.9rem; }
.sp-countries li[hidden], .sp-region[hidden] { display: none; }
.sp-countries a { color: var(--navy); font-weight: 600; }
.sp-countries span { color: var(--muted); font-size: 0.8rem; }

.sp-tunit { margin: -6px 0 6px; font-size: 0.8rem; }
.sp-hubtable td .u { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 400; }
@media (max-width: 560px) {
  /* Series pages */
  .sp { padding: 18px 16px 40px; }
  .sp-cols > section, .sp-chartbox, .sp-hubgroup { padding: 14px; }
  .sp-cards { grid-template-columns: 1fr 1fr; }
  .sp-cards b { font-size: 1.15rem; }
  .sp-tools { gap: 8px; }
  .sp-cols { grid-template-columns: minmax(0, 1fr); }
  .sp-table { font-size: 0.84rem; }
  .sp-table td, .sp-table th { padding: 6px 4px; }
  .sp-badge { font-size: 0.7rem; padding: 2px 4px; }
  .sp-svg .yl, .sp-svg .xl, .sp-svg .el { font-size: 26px; }
  /* Country hub: one stacked row per variable. */
  .sp-hubtable colgroup, .sp-hubtable thead { display: none; }
  .sp-hubtable, .sp-hubtable tbody { display: block; }
  .sp-hubtable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
  .sp-hubtable tr:first-child { border-top: 0; }
  .sp-hubtable td { display: block; padding: 0; border: 0; }
  .sp-hubtable td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .sp-hubtable td:nth-child(2) { display: none; }
  .sp-hubtable td:nth-child(3) { color: var(--muted); font-size: 0.8rem; }
}

.sp-svg .dot.src { fill: #9aa6b2; }
.sp-svg .dot.f { opacity: .75; }