/* Country CO₂-avoided section rendered by nuclear-co2-avoided.js.
   The light palette mirrors the .cer-* cards of country-energy-resources.css;
   the dark and nuclear map themes re-point the same tokens at the shared theme
   variables from reaktormap-theme.css. */

.nca-panel {
  --nca-surface: rgba(255, 255, 255, 0.72);
  --nca-border: rgba(223, 216, 203, 0.94);
  --nca-shadow: 0 16px 34px rgba(22, 31, 44, 0.08);
  --nca-text: #16233a;
  --nca-muted: #5f6d85;
  --nca-soft: #5a677d;
  --nca-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 255, 0.92));
  --nca-card-border: #dbe4f3;
  --nca-table-bg: rgba(255, 255, 255, 0.86);
  --nca-table-border: #e2e8f4;
  --nca-head-bg: #f4f7fd;
  --nca-foot-bg: #f7faff;
  --nca-row-border: #eef2f9;
  --nca-row-hover: rgba(229, 239, 255, 0.5);
  --nca-track: #eef2f9;
  --nca-fill: linear-gradient(90deg, #34a06a, #1c7c4c);
  --nca-link: #163e96;
  --nca-good-bg: linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(222, 247, 231, 0.92));
  --nca-good-border: #b6e0c4;
  --nca-good-text: #146c3a;
  --nca-good-soft: rgba(240, 253, 244, 0.8);
  --nca-tag-bg: #eafaf0;
  --nca-btn-bg: #e5efff;
  --nca-btn-border: #bfd2fb;
  --nca-btn-text: #163e96;
  --nca-btn-hover: #dbeafe;

  /* Matches the 16px rhythm the other stacked panels on the resource page use. */
  margin-top: 16px;
  border: 1px solid var(--nca-border);
  border-radius: 18px;
  background: var(--nca-surface);
  box-shadow: var(--nca-shadow);
  color: var(--nca-text);
  padding: 18px;
  display: grid;
  gap: 14px;
}

:root:is(:not([data-map-theme]), [data-map-theme="dark"], [data-map-theme="nuclear"]) .nca-panel {
  --nca-surface: color-mix(in srgb, var(--surf) 96%, transparent);
  --nca-border: var(--brd);
  --nca-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  --nca-text: var(--txt);
  --nca-muted: var(--mut);
  --nca-soft: var(--mut);
  --nca-card-bg: color-mix(in srgb, var(--surf) 82%, transparent);
  --nca-card-border: var(--brd);
  --nca-table-bg: color-mix(in srgb, var(--surf) 88%, transparent);
  --nca-table-border: var(--brd);
  --nca-head-bg: var(--surf);
  --nca-foot-bg: var(--surf);
  --nca-row-border: color-mix(in srgb, var(--brd) 65%, transparent);
  --nca-row-hover: color-mix(in srgb, var(--acc) 14%, transparent);
  --nca-track: color-mix(in srgb, var(--brd) 70%, transparent);
  --nca-fill: linear-gradient(90deg, #4ec98a, #2c8f5f);
  --nca-link: var(--acc);
  --nca-good-bg: color-mix(in srgb, #34a06a 18%, var(--surf));
  --nca-good-border: color-mix(in srgb, #34a06a 46%, transparent);
  --nca-good-text: #8fe7b4;
  --nca-good-soft: color-mix(in srgb, #34a06a 10%, transparent);
  --nca-tag-bg: color-mix(in srgb, #34a06a 22%, transparent);
  --nca-btn-bg: color-mix(in srgb, var(--acc) 18%, transparent);
  --nca-btn-border: color-mix(in srgb, var(--acc) 48%, transparent);
  --nca-btn-text: var(--txt);
  --nca-btn-hover: color-mix(in srgb, var(--acc) 30%, transparent);
}

.nca-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.nca-source {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--nca-muted);
}

.nca-head h2 {
  margin: 4px 0 0;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.15;
  color: var(--nca-text);
}

.nca-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nca-muted);
}

.nca-copy {
  margin: 8px 0 0;
  color: var(--nca-soft);
  font-size: 14px;
  max-width: 860px;
}

.nca-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.nca-kpi {
  border: 1px solid var(--nca-card-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--nca-card-bg);
}

.nca-kpi span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nca-muted);
}

.nca-kpi strong {
  display: block;
  margin-top: 5px;
  font-size: 19px;
  line-height: 1.15;
  color: var(--nca-text);
}

.nca-kpi small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--nca-muted);
}

.nca-kpi.is-highlight {
  border-color: var(--nca-good-border);
  background: var(--nca-good-bg);
}

.nca-kpi.is-highlight strong {
  color: var(--nca-good-text);
}

.nca-block {
  display: grid;
  gap: 8px;
}

.nca-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.nca-block-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--nca-text);
}

.nca-block-head small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--nca-muted);
}

.nca-toggle {
  border: 1px solid var(--nca-btn-border);
  background: var(--nca-btn-bg);
  color: var(--nca-btn-text);
  font-family: inherit;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}

.nca-toggle:hover {
  background: var(--nca-btn-hover);
}

.nca-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--nca-table-border);
  border-radius: 14px;
  background: var(--nca-table-bg);
}

.nca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.nca-table th,
.nca-table td {
  padding: 8px 12px;
  text-align: left;
  color: var(--nca-text);
  border-bottom: 1px solid var(--nca-row-border);
  white-space: nowrap;
}

.nca-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--nca-head-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nca-muted);
}

/* Sortable headers: the button carries the padding so the whole header cell is
   clickable and the label keeps its column alignment. */
.nca-table.is-sortable thead th {
  padding: 0;
}

.nca-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.nca-table.is-sortable thead th.nca-num .nca-sort {
  justify-content: flex-end;
}

.nca-sort:hover {
  color: var(--nca-text);
}

.nca-sort.is-active {
  color: var(--nca-text);
  font-weight: 700;
}

.nca-sort-arrow {
  font-size: 9px;
  opacity: 0.45;
}

.nca-sort.is-active .nca-sort-arrow {
  opacity: 1;
}

.nca-table tbody tr:hover {
  background: var(--nca-row-hover);
}

.nca-table tbody th[scope="row"] {
  font-weight: 600;
}

.nca-table a {
  color: var(--nca-link);
  text-decoration: none;
}

.nca-table a:hover {
  text-decoration: underline;
}

.nca-table .nca-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nca-table tbody tr.is-empty td,
.nca-table tbody tr.is-empty th {
  color: var(--nca-muted);
}

.nca-table tbody tr.is-peak {
  background: var(--nca-good-soft);
}

.nca-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--nca-good-border);
  background: var(--nca-tag-bg);
  color: var(--nca-good-text);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

.nca-bar-cell {
  width: 42%;
  min-width: 200px;
}

.nca-bar-cell strong {
  display: inline-block;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 62px;
  text-align: right;
}

.nca-bar {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 76px);
  margin-right: 10px;
  height: 9px;
  border-radius: 999px;
  background: var(--nca-track);
  overflow: hidden;
}

.nca-bar i {
  display: block;
  height: 100%;
  width: var(--nca-bar-width, 0%);
  border-radius: 999px;
  background: var(--nca-fill);
}

.nca-table tfoot th,
.nca-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--nca-card-border);
  background: var(--nca-foot-bg);
  font-weight: 700;
}

/* The total row carries no bar, so its value has to be pulled over to where the
   per-row values sit. */
.nca-table tfoot .nca-bar-cell {
  text-align: right;
}

.nca-footnote {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nca-muted);
}

@media (max-width: 640px) {
  .nca-panel {
    padding: 14px;
  }

  .nca-bar-cell {
    min-width: 160px;
  }
}