.market-view-switcher-scroll-wrap {
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
}

.market-view-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--varial-space-sm, 0.5rem);
}

.market-view-switcher-btn {
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-pill, 999px);
  background: var(--varial-card-bg, #fff);
  color: var(--varial-gray-700, #3E3A36);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.6rem 1rem;
}

.market-view-switcher-btn.active {
  border-color: var(--varial-primary, #1B3AA0);
  background: var(--varial-primary, #1B3AA0);
  color: var(--varial-card-bg, #fff);
}

.market-view-switcher-btn-locked {
  background: var(--varial-bg, #FAF8F2);
  border-style: dashed;
  color: var(--varial-gray-600, #4D4A46);
  cursor: not-allowed;
  opacity: 0.85;
}

.market-view-switcher-btn-locked .market-view-lock-badge {
  margin-left: var(--varial-space-xs, 0.25rem);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: text-bottom;
}

.market-view-chart-area {
  min-height: 20rem;
}

.market-view-chart-area .card-body {
  min-height: 20rem;
  padding: var(--varial-space-md, 0.75rem);
}

.market-mode-pane {
  min-height: 20rem;
}

.market-mode-pane[hidden] {
  display: none;
}

.market-region-row,
.market-region-col {
  min-height: 100%;
}

.market-region-col {
  min-width: 0;
}

/* Region filter column hiding */
.market-region-col[hidden] {
  display: none;
}

/* Spotlight chart height is set explicitly in JS (spotChartHeight, ~55vh) and
   pinned onto the container so the box matches the Plotly SVG. A CSS min-height
   here would re-introduce the box/SVG divergence that overflowed the charts
   under responsive:true (issue #2911) — so it is intentionally not set. */

.rrp-region-chart,
.dispatch-region-chart,
.vwap-region-chart,
.vwap-compare-chart,
.asx-product-chart,
.asx-history-chart,
.mtpasa-stacked-chart,
.gas-chart,
.capacity-chart {
  min-height: 8rem;
}

.market-region-table-wrap {
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-card-bg, #fff);
}

.market-region-table-scroll {
  width: 100%;
  max-height: 18rem;
  overflow-x: auto;
  overflow-y: auto;
}

.market-region-table {
  margin-bottom: 0;
  font-size: 0.72rem;
  width: max-content;
  min-width: 100%;
}

.market-region-table thead th {
  position: sticky;
  top: 0;
  background: var(--varial-bg, #FAF8F2);
  color: var(--varial-gray-700, #3E3A36);
  z-index: 1;
}

.market-region-table td,
.market-region-table th {
  white-space: nowrap;
}

.market-region-table-empty {
  padding: var(--varial-space-sm, 0.5rem);
  color: var(--varial-gray-600, #4D4A46);
  font-size: 0.75rem;
}

@media (max-width: 991.98px) {
  .market-view-chart-area,
  .market-view-chart-area .card-body {
    min-height: 16rem;
  }

  .market-mode-pane {
    min-height: 16rem;
  }

  .rrp-region-chart,
  .dispatch-region-chart,
  .vwap-region-chart,
  .asx-product-chart,
  .asx-history-chart,
  .mtpasa-stacked-chart,
  .gas-chart,
  .capacity-chart {
    min-height: 8rem;
  }

  .market-region-table-scroll {
    max-height: 14rem;
  }
}

@media (max-width: 767.98px) {
  .market-region-row {
    flex-direction: column;
  }
  .market-region-col {
    /* `flex: none` cancels Bootstrap's `.col { flex: 1 0 0% }` (equal
       specificity, later source order wins); nothing else sets width on this
       element, so width: 100% applies with no !important needed. */
    width: 100%;
    flex: none;
  }
  .market-view-chart-area,
  .market-mode-pane {
    min-height: unset;
  }
  .market-view-switcher {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .market-view-switcher::-webkit-scrollbar {
    display: none;
  }
  .market-view-switcher-btn {
    flex-shrink: 0;
  }
  .market-view-switcher-scroll-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    background: linear-gradient(to right, transparent, var(--varial-bg, #FAF8F2));
    pointer-events: none;
  }
}

/* ── VWAP compare UI ──────────────────────────────────────── */

.gas-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  border: 1px dashed var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-bg, #FAF8F2);
  color: var(--varial-gray-600, #4D4A46);
}

.vwap-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Two placeholders stack; keep the pair inside the screen-height cap below. */
  min-height: 34vh;
  border: 1px dashed var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-bg, #FAF8F2);
  color: var(--varial-gray-600, #4D4A46);
}

/* VWAP compare pane — charts 2/5, ranking table 3/5 (desktop). The chart heights
   are sized (JS) to (viewport − header/tabs/summary) so the charts + table area is
   capped to the screen and scrolls internally rather than growing the whole page.
   The Tabulator height is then synced (JS: _syncVwapTableHeight) to end level with
   the charts column. Columns stay full-width and stacked below lg. */
@media (min-width: 992px) {
  .vwap-charts-col {
    flex: 0 0 40%;
    width: 40%;
    max-width: 40%;
  }
  .vwap-table-col {
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
  }
}

.vwap-target-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1.5px solid;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: default;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

/* VWAP Tabulator row visuals.
   Row backgrounds (slot-b + active) live in css/vendors/tabulator-revert.css
   so the !important overrides Tabulator-supplied specificity stay in the
   vendor-exemption zone (per CLAUDE.md CSS rule #1). Only non-background,
   non-!important rules stay here. */
#vwap-duid-table .tabulator-row {
  cursor: pointer;
}

#vwap-duid-table .tabulator-row.table-active,
#vwap-duid-table .tabulator-row.vwap-row-b {
  font-weight: 500;
}

/* Combined stats strip — a real <table> so the header + both slot rows share
   one set of column widths (a flex-row-per-slot layout let them drift, #3731). */
.vwap-combined-stats {
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-card-bg, #fff);
  overflow: hidden;
}

.vwap-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.vwap-stats-table th,
.vwap-stats-table td {
  padding: 0.4rem 0.75rem;
  text-align: right;
  white-space: nowrap;
}

.vwap-stats-table thead th {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--varial-gray-600, #4D4A46);
  border-bottom: 1px solid var(--varial-border, #E8E4D8);
}

.vwap-stats-table thead th:first-child {
  text-align: left;
}

.vwap-stats-table tbody th {
  text-align: left;
  border-left: 4px solid transparent;
}

.vwap-stat-row + .vwap-stat-row th,
.vwap-stat-row + .vwap-stat-row td {
  border-top: 1px solid var(--varial-border, #E8E4D8);
}

.vwap-stat-row-a th {
  border-left-color: var(--varial-primary, #1B3AA0);
}

.vwap-stat-row-b th {
  border-left-color: var(--varial-green, #16A34A);
}

.vwap-stat-rowhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vwap-stat-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.vwap-stat-row-a .vwap-stat-slot-badge {
  background: rgba(27, 58, 160, 0.12);
  color: var(--varial-primary, #1B3AA0);
}

.vwap-stat-row-b .vwap-stat-slot-badge {
  background: rgba(22, 163, 74, 0.12);
  color: var(--varial-green, #16A34A);
}

.vwap-stat-duid-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--varial-gray-900, #1C1814);
}

.vwap-stat-value {
  font-weight: 700;
  color: var(--varial-gray-900, #1C1814);
}

/* DUID VWAP controls bar — a label anchors the 30/90 window toggle on the
   right so the segmented control reads as a deliberate control, not a floating
   pill, and the pane top lines up across both columns. */
.vwap-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
}

.vwap-controls-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--varial-gray-700, #3A3733);
}

/* DUID VWAP window toggle (#3731) — 30/90 day segmented control. */
.vwap-window-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.vwap-window-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--varial-gray-700, #3A3733);
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.vwap-window-btn:hover {
  border-color: var(--varial-accent, #E85D3A);
  color: var(--varial-accent, #E85D3A);
  text-decoration: none;
}

.vwap-window-btn.active {
  color: #fff;
  background: var(--varial-primary, #1B3AA0);
  border-color: var(--varial-primary, #1B3AA0);
}

.vwap-window-locked {
  color: var(--varial-gray-400, #9A9690);
}

.vwap-window-locked:hover {
  border-color: var(--varial-gray-400, #9A9690);
  color: var(--varial-gray-600, #4D4A46);
}

.vwap-window-lock {
  font-size: 0.65rem;
}

/* Mobile: shrink the combined-stats strip so all four columns (label + Avg
   VWAP / Avg TWAP / VWAP-TWAP) fit within the card instead of being clipped by
   the wrapper's overflow (#4168). A tiny x-scroll is the safety net on the
   narrowest phones so no column is ever hidden outright. */
@media (max-width: 575.98px) {
  .vwap-combined-stats {
    overflow-x: auto;
  }
  .vwap-stats-table {
    font-size: 0.7rem;
  }
  .vwap-stats-table th,
  .vwap-stats-table td {
    padding: 0.3rem 0.4rem;
  }
  .vwap-stat-duid-label {
    font-size: 0.7rem;
  }
  .vwap-stat-slot-badge {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.62rem;
  }
  .vwap-stat-rowhead {
    gap: 0.3rem;
  }
  .vwap-controls-title {
    font-size: 0.74rem;
  }
}

/* ── News digest (Revert News tab, #2308 B2) ─────────────────────────── */
.news-digest-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-digest-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--varial-border, #E8E4D8);
}

.news-digest-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.news-digest-rank {
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.news-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--varial-gray-600, #4D4A46);
  background: rgba(120, 120, 120, 0.12);
}

.news-rank-top {
  color: #fff;
  background: var(--varial-accent, #E85D3A);
}

.news-digest-body {
  min-width: 0;
  flex: 1;
}

.news-digest-title {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--varial-gray-900, #1C1814);
  text-decoration: none;
}

.news-digest-title:hover {
  text-decoration: underline;
}

.news-digest-extlink {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  opacity: 0.5;
}

.news-digest-meta {
  margin-top: 0.15rem;
}

.news-digest-summary {
  margin-top: 0.35rem;
  color: var(--varial-gray-700, #3A3733);
  line-height: 1.45;
}

/* ── News header + info popover (#2308 B2) ───────────────────────────── */
.news-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.news-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.news-info-wrap {
  position: relative;
  display: inline-flex;
}

.news-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  line-height: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--varial-gray-600, #4D4A46);
  background: transparent;
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.news-info-btn:hover,
.news-info-btn[aria-expanded="true"] {
  color: var(--varial-accent, #E85D3A);
  border-color: var(--varial-accent, #E85D3A);
}

.news-info-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 20;
  width: min(30rem, 80vw);
  padding: 0.7rem 0.85rem;
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-left: 3px solid var(--varial-accent, #E85D3A);
  border-radius: var(--varial-radius-sm, 0.25rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-info-line {
  color: var(--varial-gray-600, #4D4A46);
}

.news-meta-key {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
  margin-right: 0.3rem;
}

/* ── News selection panel: period + custom dates + tags ──────────────── */
.news-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-bg, #FAF8F2);
}

.news-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.news-control-label {
  flex-shrink: 0;
  width: 3.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--varial-gray-600, #4D4A46);
}

.news-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.news-seg {
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--varial-gray-700, #3A3733);
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.news-seg:hover {
  border-color: var(--varial-accent, #E85D3A);
  color: var(--varial-accent, #E85D3A);
}

.news-seg.active {
  color: #fff;
  background: var(--varial-primary, #1B3AA0);
  border-color: var(--varial-primary, #1B3AA0);
}

/* Guest-locked period presets (#3731) — monthly/annual/custom require sign-in. */
.news-seg-locked {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--varial-gray-400, #9A9690);
  text-decoration: none;
}

.news-seg-locked:hover {
  border-color: var(--varial-gray-400, #9A9690);
  color: var(--varial-gray-600, #4D4A46);
  text-decoration: none;
}

.news-seg-lock {
  font-size: 0.65rem;
}

.news-daterow {
  gap: 0.5rem 0.75rem;
}

.news-date-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--varial-gray-600, #4D4A46);
}

.news-date-input {
  padding: 0.15rem 0.4rem;
  font-size: 0.78rem;
  color: var(--varial-gray-900, #1C1814);
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
}

.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.news-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--varial-gray-700, #3A3733);
  background: var(--varial-surface-2, rgba(120, 120, 120, 0.08));
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.news-tag:hover {
  border-color: var(--varial-accent, #E85D3A);
  color: var(--varial-accent, #E85D3A);
}

.news-tag.active {
  color: #fff;
  background: var(--varial-accent, #E85D3A);
  border-color: var(--varial-accent, #E85D3A);
}

.news-tag-count {
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* News: "+ more over time" hint + attribution disclaimer (#2308 B2) */
.news-meta-more {
  font-style: italic;
  opacity: 0.75;
}

.news-disclaimer {
  margin-top: 0.4rem;
  color: var(--varial-gray-700, #3A3733);
  line-height: 1.4;
}

/* News: per-article tags + tag search (#2308 A3) */
.news-digest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.news-itemtag {
  padding: 0.08rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--varial-gray-600, #4D4A46);
  background: var(--varial-surface-2, rgba(120, 120, 120, 0.08));
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.news-itemtag:hover {
  color: var(--varial-accent, #E85D3A);
  border-color: var(--varial-accent, #E85D3A);
}

.news-tagsearch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.news-tagsearch-icon {
  position: absolute;
  left: 0.55rem;
  font-size: 0.72rem;
  color: var(--varial-gray-600, #4D4A46);
  pointer-events: none;
}

.news-tagsearch-input {
  padding: 0.2rem 0.5rem 0.2rem 1.6rem;
  font-size: 0.78rem;
  width: 12rem;
  max-width: 45vw;
  color: var(--varial-gray-900, #1C1814);
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
}

.news-tagsearch-input:focus {
  outline: none;
  border-color: var(--varial-accent, #E85D3A);
}

.news-tagresults:empty {
  display: none;
}

/* News: multiselect tag dropdown (#2308 A3) */
.news-tagdd {
  position: relative;
  margin-left: auto;
}

.news-tagdd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--varial-gray-700, #3A3733);
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
  cursor: pointer;
}

.news-tagdd-btn:hover,
.news-tagdd-btn[aria-expanded="true"] {
  border-color: var(--varial-accent, #E85D3A);
}

.news-tagdd-btn.filtered {
  color: #fff;
  background: var(--varial-accent, #E85D3A);
  border-color: var(--varial-accent, #E85D3A);
}

.news-tagdd-count {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.news-tagdd-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 30;
  width: 20rem;
  max-width: 85vw;
  background: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.news-tagdd-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--varial-border, #E8E4D8);
}

.news-tagdd-search {
  flex: 1;
  min-width: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: 999px;
}

.news-tagdd-search:focus {
  outline: none;
  border-color: var(--varial-accent, #E85D3A);
}

.news-tagdd-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.news-tagdd-link {
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--varial-accent, #E85D3A);
  background: none;
  border: 0;
  cursor: pointer;
}

.news-tagdd-sep {
  color: var(--varial-gray-600, #4D4A46);
}

.news-tagdd-list {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.news-tagdd-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.7rem;
  margin: 0;
  font-size: 0.8rem;
  cursor: pointer;
}

.news-tagdd-item:hover {
  background: var(--varial-bg, #FAF8F2);
}

.news-tagdd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--varial-gray-800, #2A2724);
}

.news-tagdd-n {
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--varial-gray-600, #4D4A46);
}

/* Mobile: tighten the news selection panel so the period/show controls take
   less vertical room (#4168). The fixed-width uppercase labels drop to inline
   width (the segmented buttons already read as "period" / "show"), padding and
   gaps shrink, and the segment/tag pills go a touch smaller so more fit per
   line before wrapping. */
@media (max-width: 575.98px) {
  .news-header {
    margin-bottom: 0.5rem;
  }
  .news-controls {
    padding: 0.55rem 0.6rem;
    gap: 0.45rem;
  }
  .news-control-row {
    gap: 0.3rem 0.4rem;
  }
  .news-control-label {
    width: auto;
  }
  .news-seg,
  .news-tag {
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* ── Interconnectors: staggered "brick" map layout (#3775) ─────────────
   No region-label boxes — each chart already names its link and marks the two
   regions on its axis, so the geography is carried by position instead. The
   eastern-spine links run down the right column (QLD-NSW, NSW-VIC, VIC-TAS) and
   SA's western links (NSW-SA, SA-VIC) are offset half a brick down the left, so
   each chart reads as sitting between the two regions it connects. Every link
   spans two rows; the half-row offset produces the stagger and lets the two
   columns interleave vertically, keeping the panel compact. */
.intx-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--varial-space-sm, 0.5rem);
  align-items: start;
  grid-template-areas:
    ".            edge-qld-nsw"
    "edge-nsw-sa  edge-qld-nsw"
    "edge-nsw-sa  edge-vic-nsw"
    "edge-vic-sa  edge-vic-nsw"
    "edge-vic-sa  edge-vic-tas"
    ".            edge-vic-tas"
    "edge-other   edge-other";
}

.intx-edge {
  border: 1px solid var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-bg, #FAF8F2);
  padding: var(--varial-space-xs, 0.25rem);
}

.intx-edge[hidden] {
  display: none;
}

.intx-edge-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--varial-gray-600, #4D4A46);
  margin-bottom: 0.25rem;
  text-align: center;
}

.intx-edge-charts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--varial-space-xs, 0.25rem);
}

.intx-card {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Reserved slot for a link AEMO has not yet published in DispatchIS (Project
   EnergyConnect). A slim strip, not a full chart-height box, so it doesn't add
   a whole chart row of vertical height to the map. */
.intx-placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 4rem;
  border: 1px dashed var(--varial-border, #E8E4D8);
  border-radius: var(--varial-radius-sm, 0.25rem);
  background: var(--varial-bg, #FAF8F2);
  color: var(--varial-gray-600, #4D4A46);
  font-size: 0.75rem;
  padding: var(--varial-space-sm, 0.5rem);
}

@media (max-width: 767.98px) {
  /* The stagger can't survive one column, so fall back to a simple top-to-bottom
     list of links in NEM order (north to south, SA's links interleaved). */
  .intx-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "edge-qld-nsw"
      "edge-nsw-sa"
      "edge-vic-nsw"
      "edge-vic-sa"
      "edge-vic-tas"
      "edge-other";
  }
}