/* ============================================================
   live.css — Live page (Romania's power system)
   Prefix: live-   ·   Companion files: live.html, js/live.js
   Removing the feature = delete these three files + the nav link.

   Chart surfaces are pinned to the two values the palette was
   validated against (#fcfcfb light / #1a1a19 dark). Changing them
   invalidates the contrast results, so change --live-surface only
   together with a re-run of the palette validator.
   ============================================================ */

.live-page {
  --live-surface:   #fcfcfb;   /* validated chart surface, light */
  --live-plane:     #f9f9f7;
  --live-ink:       #0b0b0b;
  --live-ink-2:     #52514e;
  --live-ink-muted: #898781;
  --live-grid:      #e1e0d9;
  --live-axis:      #c3c2b7;
  --live-ring:      rgba(11, 11, 11, 0.10);
  --live-accent:    #3FA9C4;

  /* Categorical slots — stack order: coal, nuclear, gas, hydro, wind, solar.
     Validated (adjacent pairlist): CVD ΔE 9.1 · normal-vision ΔE 22.9. */
  --live-coal:    #8b4513;
  --live-nuclear: #4a3aa7;
  --live-gas:     #eb6834;
  --live-hydro:   #2a78d6;
  --live-wind:    #1baf7a;
  --live-solar:   #eda100;
  --live-storage: #e87ba4;
  --live-other:   #898781;   /* neutral tail bucket, not a categorical hue */

  background: var(--live-plane);
  min-height: 100vh;
}

body.theme-dark.live-page {
  --live-surface:   #1a1a19;   /* validated chart surface, dark */
  --live-plane:     #0d0d0d;
  --live-ink:       #ffffff;
  --live-ink-2:     #c3c2b7;
  --live-ink-muted: #898781;
  --live-grid:      #2c2c2a;
  --live-axis:      #383835;
  --live-ring:      rgba(255, 255, 255, 0.10);

  --live-coal:    #b06a2c;
  --live-nuclear: #9085e9;
  --live-gas:     #d95926;
  --live-hydro:   #3987e5;
  --live-wind:    #199e70;
  --live-solar:   #c98500;
  --live-storage: #d55181;
  --live-other:   #898781;
}

/* ---------------------------------------------------------- layout */

.live-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 24px 96px;
  color: var(--live-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.live-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------- header */

.live-head { margin-bottom: 40px; }

.live-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--live-accent);
  margin-bottom: 10px;
}

.live-title {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--live-ink);
}

.live-lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 18px;
  color: var(--live-ink-2);
}

.live-lede a { color: var(--live-accent); }

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--live-ink-muted);
  font-variant-numeric: tabular-nums;
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0ca30c;
  box-shadow: 0 0 0 3px rgba(12, 163, 12, 0.18);
}

.live-status[data-state="stale"] .live-dot { background: #fab219; box-shadow: 0 0 0 3px rgba(250, 178, 25, 0.18); }
.live-status[data-state="error"] .live-dot { background: #d03b3b; box-shadow: 0 0 0 3px rgba(208, 59, 59, 0.18); }

/* ---------------------------------------------------------- KPI row */

.live-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.live-kpi {
  background: var(--live-surface);
  border: 1px solid var(--live-ring);
  border-radius: 12px;
  padding: 18px 20px;
}

.live-kpi-label {
  font-size: 13px;
  color: var(--live-ink-2);
  margin-bottom: 6px;
}

.live-kpi-value {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--live-ink);
}

.live-kpi-unit {
  font-size: 15px;
  font-weight: 400;
  color: var(--live-ink-muted);
  margin-left: 4px;
}

.live-kpi-delta {
  font-size: 13px;
  margin-top: 6px;
  color: var(--live-ink-muted);
  font-variant-numeric: tabular-nums;
  min-height: 18px;
}

/* ---------------------------------------------------------- cards */

.live-card {
  background: var(--live-surface);
  border: 1px solid var(--live-ring);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.live-card-head { margin-bottom: 20px; }

.live-card-title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--live-ink);
}

.live-card-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--live-ink-2);
  margin: 0;
  max-width: 68ch;
}

/* ---------------------------------------------------------- mix */

.live-mix {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
}

.live-donut { margin: 0; }

/* Scoped, and !important to beat the global `svg { width: 100% }` rule. */
.live-donut svg {
  width: 100% !important;
  height: auto !important;
  display: block;
  overflow: visible;
}

.live-donut-total {
  font-size: 30px;
  font-weight: 600;
  fill: var(--live-ink);
}

.live-donut-unit {
  font-size: 12px;
  fill: var(--live-ink-muted);
}

.live-arc {
  transition: opacity 140ms ease;
  cursor: default;
}

.live-mix[data-hover] .live-arc { opacity: 0.35; }
.live-mix[data-hover] .live-arc[data-on] { opacity: 1; }

.live-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
}

.live-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--live-ink-2);
  min-height: 34px;
  cursor: default;
}

.live-legend li:hover { background: var(--live-plane); }

.live-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.live-legend-name { flex: 1 1 auto; }

.live-legend-val {
  font-variant-numeric: tabular-nums;
  color: var(--live-ink);
  font-weight: 600;
}

.live-legend-pct {
  font-variant-numeric: tabular-nums;
  color: var(--live-ink-muted);
  width: 48px;
  text-align: right;
}

/* ---------------------------------------------------------- table view */

.live-card-foot { margin-top: 18px; }

.live-table-btn {
  background: none;
  border: 1px solid var(--live-ring);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--live-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-family: inherit;
}

.live-table-btn:hover { color: var(--live-ink); border-color: var(--live-axis); }

.live-table-wrap { margin-top: 16px; }

.live-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.live-table th,
.live-table td {
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--live-grid);
  color: var(--live-ink);
}

.live-table th {
  color: var(--live-ink-2);
  font-weight: 500;
  font-size: 13px;
}

.live-table th:first-child,
.live-table td:first-child { text-align: left; }

/* ---------------------------------------------------------- period selector
   Filters sit in one row above the chart they control, per the chart-layer
   convention: the reader should see what can change before seeing the thing
   that changes. */

.live-spans {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.live-span {
  background: none;
  border: 1px solid var(--live-ring);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--live-ink-2);
  cursor: pointer;
  min-height: 30px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.live-span:hover { color: var(--live-ink); border-color: var(--live-axis); }

.live-span[aria-pressed="true"] {
  color: var(--live-surface);
  background: var(--live-ink);
  border-color: var(--live-ink);
}

/* The year picker shares the span buttons' shape so the row reads as one
   control group. It is a <select> only because nineteen buttons do not fit. */
.live-year { display: inline-flex; }

.live-year-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--live-ring);
  border-radius: 7px;
  padding: 6px 28px 6px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--live-ink-2);
  cursor: pointer;
  min-height: 30px;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;

  /* Chevron as a background image, because a <select> cannot carry an ::after.
     currentColor does not resolve inside a data URI, so the stroke is the
     muted-ink literal #898781 — the one value that is identical in both
     themes, which is why the dark block below does not need to restate it. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23898781' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.live-year-select:hover:not(:disabled) { color: var(--live-ink); border-color: var(--live-axis); }
.live-year-select:disabled { opacity: 0.45; cursor: default; }

/* Mirrors .live-span[aria-pressed="true"] — a selected year is a selected
   span, and the two must not look like different kinds of state. */
.live-year-select[data-active="true"] {
  color: var(--live-surface);
  background-color: var(--live-ink);
  border-color: var(--live-ink);
}

/* The open list is painted by the OS and does not inherit the page surface.
   Unpinned, a dark-theme dropdown opens white. */
.live-year-select option {
  background: var(--live-surface);
  color: var(--live-ink);
}

.live-span-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--live-ink-muted);
  min-height: 19px;
}

/* ---------------------------------------------------------- area chart */

.live-area {
  margin: 0;
  position: relative;
}

.live-area svg {
  width: 100% !important;
  height: auto !important;
  display: block;
  overflow: visible;
}

.live-axis-text {
  font-size: 11px;
  fill: var(--live-ink-muted);
  font-variant-numeric: tabular-nums;
}

.live-gridline {
  stroke: var(--live-grid);
  stroke-width: 1;
}

.live-baseline {
  stroke: var(--live-axis);
  stroke-width: 1;
}

.live-crosshair {
  stroke: var(--live-axis);
  stroke-width: 1;
  pointer-events: none;
}

.live-tip {
  position: absolute;
  pointer-events: none;
  background: var(--live-surface);
  border: 1px solid var(--live-ring);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--live-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 5;
  font-variant-numeric: tabular-nums;
}

.live-tip-time {
  color: var(--live-ink-muted);
  margin-bottom: 6px;
  font-size: 11.5px;
}

.live-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-tip-row span:last-child {
  margin-left: auto;
  font-weight: 600;
}

/* ---------------------------------------------------------- borders */

.live-borders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 20px;
}

.live-border {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--live-grid);
  font-size: 13.5px;
  min-height: 34px;
}

.live-border-name { color: var(--live-ink-2); }

.live-border-cc {
  font-size: 11px;
  color: var(--live-ink-muted);
  letter-spacing: 0.04em;
}

.live-border-mw {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--live-ink);
}

.live-border[data-dir="idle"] .live-border-mw { color: var(--live-ink-muted); font-weight: 400; }

/* ---------------------------------------------------------- footer */

.live-foot {
  font-size: 13px;
  line-height: 1.6;
  color: var(--live-ink-muted);
  max-width: 70ch;
}

.live-foot a { color: var(--live-ink-2); }

.live-foot-note {
  color: #d03b3b;
  margin-top: 8px;
}

/* ---------------------------------------------------------- mobile
   Own media query, inside this feature's own stylesheet (never in
   responsive.css — that file is for existing elements only). */

@media (max-width: 760px) {
  .live-wrap { padding: 84px 16px 64px; }
  .live-title { font-size: 30px; }
  .live-lede { font-size: 16px; }

  .live-kpis { grid-template-columns: 1fr; gap: 12px; }
  .live-kpi { padding: 14px 16px; }
  .live-kpi-value { font-size: 28px; }

  .live-card { padding: 18px 16px; }

  .live-spans { gap: 5px; }
  .live-span { padding: 6px 10px; font-size: 12.5px; }
  .live-year-select { padding: 6px 26px 6px 10px; font-size: 12.5px; }

  .live-mix {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }

  .live-donut { width: 220px; }
  .live-legend { grid-template-columns: 1fr; width: 100%; }
  .live-borders { grid-template-columns: 1fr; }
}