/* Colors are defined once as roles; dark mode swaps them in one place.
   common.js reads these same variables so the Plotly chart matches the page. */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* A chart with an "About this data" panel beside it (stacked underneath on narrower screens). */
.page-wide {
  max-width: 1240px;
}

.with-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (min-width: 1100px) {
  .with-panel {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  /* "About this data" is a 320px column, so opening "Learn more" used to stretch it into a very tall,
     narrow strip. Instead, opening it eases the card out to the full width while the chart column fades
     and folds away (and eases back when closed), so the same text wraps into far fewer lines. The
     chart is not resized, only hidden. Below 1100px the card is already full width under the chart,
     so none of this applies there. */
  .info-panel--expandable {
    /* Span the whole row (still 320px wide, pinned right), so "width: 100%" below means the full row. */
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: end;
    width: 320px;
    position: relative;
    z-index: 1;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .with-panel:has(.info-panel--expandable details[open]) .info-panel--expandable {
    width: 100%;
  }

  /* Collapsing the chart column's height to 0 (the 1fr -> 0fr trick) lets the row shrink to the card. */
  .with-panel-main {
    grid-row: 1; /* both items share row 1; without this the card's explicit placement bumps the chart to row 2 */
    grid-column: 1;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .with-panel-main__inner {
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease-in-out 0.15s, visibility 0s linear 0s;
  }

  .with-panel:has(.info-panel--expandable details[open]) .with-panel-main {
    grid-template-rows: 0fr;
  }

  /* visibility flips only after the fade, so a hidden chart can't be tabbed into or read out. */
  .with-panel:has(.info-panel--expandable details[open]) .with-panel-main__inner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0s linear 0.5s;
  }
}

@keyframes info-panel-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.info-panel--expandable details[open] > :not(summary) {
  animation: info-panel-reveal 0.5s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
  .info-panel--expandable,
  .with-panel-main,
  .with-panel-main__inner {
    transition: none !important;
  }

  .info-panel--expandable details[open] > :not(summary) {
    animation: none;
  }
}

.info-panel {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
}

.info-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.info-panel h3 {
  margin: 16px 0 4px;
  font-size: 0.9rem;
}

.info-panel p,
.info-panel li {
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.info-panel ul {
  margin: 0;
  padding-left: 18px;
}

.facts {
  margin: 0;
}

.facts dt {
  margin-top: 10px;
  font-weight: 600;
}

.facts dd {
  margin: 2px 0 0;
  color: var(--text-secondary);
}

/* A short "what does this term mean?" box, closed until the reader wants it. */
details.explainer {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
}

details.explainer summary {
  color: var(--series-1);
  font-weight: 600;
}

details.explainer p {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

details.explainer .explainer-sources {
  color: var(--muted);
  font-size: 0.8rem;
}

details.explainer a {
  color: var(--series-1);
}

.info-panel details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--grid);
}

.info-panel summary {
  color: var(--series-1);
  font-weight: 600;
}

.site-nav {
  display: flex;
  gap: 20px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--grid);
  font-size: 0.9rem;
}

/* With six pages the links no longer fit on one line of a phone: let them wrap onto a second line. */
@media (max-width: 600px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 6px 16px;
  }
}

.site-nav a {
  padding: 0 0 8px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text-primary);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--series-1);
  color: var(--text-primary);
  font-weight: 600;
}

.tag {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--axis);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
}

h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
}

.subtitle {
  margin: 0 0 20px;
  color: var(--text-secondary);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px 4px;
}

#chart {
  width: 100%;
  height: 520px;
}

.card + .card {
  margin-top: 20px;
}

.card h2 {
  margin: 8px 12px 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.chart-desc {
  margin: 2px 12px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.chart {
  width: 100%;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.controls button {
  padding: 6px 14px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.controls button:hover {
  background: var(--grid);
}

.controls button[aria-checked="true"] {
  border-color: var(--series-1);
  color: var(--text-primary);
  font-weight: 600;
}

.controls button:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

/* A label beside a group of choice buttons (the Mānoa page has four such groups; role="checkbox" toggles reuse the
   same aria-checked styling as the role="radio" groups). */
.control-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 12px;
}

.control-group .controls {
  margin: 0;
}

.control-label {
  min-width: 68px;
  color: var(--muted);
  font-size: 0.85rem;
}

.sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
}

.slider-head label {
  font-weight: 600;
}

.slider-head output {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.slider input[type="range"] {
  width: 100%;
  margin: 6px 0 0;
  accent-color: var(--series-1);
}

.slider-help {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.reset {
  margin: 12px 0 0;
  padding: 6px 14px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.reset:hover {
  background: var(--grid);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

/* The Mānoa page, with both estimates shown: a fixed 5 columns so each estimate's peak/energy/width/capacity-factor/
   peak-sun-hours tiles form their own row, lined up under the same headings instead of wrapping wherever they fit. */
.stats.paired {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .stats.paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

.stat-sub {
  color: var(--muted);
  font-size: 0.85rem;
}

.notes {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.notes li {
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 2px solid var(--grid);
}

.notes strong {
  color: var(--text-primary);
  font-weight: 600;
}

.source {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.8rem;
}

details {
  margin-top: 24px;
}

summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.table-wrap {
  max-height: 360px;
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

th,
td {
  padding: 6px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--axis);
  color: var(--text-secondary);
  font-weight: 600;
}

tbody tr + tr td {
  border-top: 1px solid var(--grid);
}

tbody tr.provisional td {
  color: var(--text-secondary);
  font-style: italic;
}

.error {
  padding: 16px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
}

@media (max-width: 600px) {
  #chart {
    height: 440px;
  }
  h1 {
    font-size: 1.3rem;
  }
}

/* ---- Milestones on the renewable-share chart ---------------------------------------------------------------------- */

.milestones {
  margin-top: 16px;
}

.milestones h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.milestone-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.milestone-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.milestone-buttons button {
  padding: 4px 10px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.milestone-buttons button:hover {
  background: var(--grid);
}

.milestone-buttons button[aria-pressed="true"] {
  border-color: var(--series-2);
  color: var(--text-primary);
  font-weight: 600;
}

.milestone-buttons button:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.has-milestones .rangeslider-rangeplot .scatterlayer .trace:last-child {
  display: none;
}

/* Space between the buttons and the card, empty or not. (The empty card's own class would otherwise pull it up to 2px.) */
.milestones .milestone-card {
  margin-top: 22px;
}

.milestone-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.milestone-card p {
  margin: 6px 0 0;
}

/* ---- Plant map ---------------------------------------------------------------------------------------------- */

.time-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.time-controls button {
  padding: 6px 14px;
  border: 1px solid var(--axis);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.time-controls button:hover {
  background: var(--grid);
}

.time-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--series-1);
}

.time-controls output {
  min-width: 88px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.time-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Past the last month EIA has records for, the map is showing plans, and says so. */
.time-note-plan {
  color: var(--text-secondary);
}

#map {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.stats-compact {
  grid-template-columns: 1fr;
  margin: 0 0 12px;
}

.group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.group-table th,
.group-table td {
  padding: 5px 4px;
  white-space: nowrap;
}

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

.group-table tbody tr + tr td {
  border-top: 1px solid var(--grid);
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
}

.panel-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.plant-card {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
}

.plant-card h2 {
  margin: 0;
  font-size: 1.05rem;
}

.plant-card-meta,
.plant-card-empty {
  margin: 2px 0 8px;
  color: var(--text-secondary);
}

.plant-card-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.unit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.unit-table th,
.unit-table td {
  padding: 4px 8px;
  white-space: nowrap;
}

.unit-table th:nth-child(-n + 2),
.unit-table td:nth-child(-n + 2) {
  text-align: left;
}

.unit-not-now td {
  color: var(--muted);
}

.unit-now td {
  color: var(--text-primary);
  font-weight: 600;
}

/* Planned, not built yet: shown on the map on this date, but not in service. */
.unit-planned td {
  color: var(--text-secondary);
  font-style: italic;
}

.plant-card .unit-table {
  display: block;
  overflow-x: auto;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--series-1);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.leaflet-tooltip {
  background: var(--surface);
  border-color: var(--axis);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  #map {
    height: 420px;
  }
  /* Play, Today and the date on one row; the slider gets a full row of its own beneath them. */
  .time-controls {
    flex-wrap: wrap;
  }
  .time-controls input[type="range"] {
    order: 3;
    flex: 1 0 100%;
  }
  .time-controls output {
    margin-left: auto;
  }
}

/* OpenStreetMap's tiles are light only: in dark mode, invert and dim them (the circles are in another pane, so
   they keep their colors). */
@media (prefers-color-scheme: dark) {
  .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
  }

  .leaflet-container {
    background: var(--surface);
  }
}