.gasscoPanel {
  padding: 0;
  overflow: visible;
}

.gasscoPanelToggle {
  width: 100%;
  min-height: calc(54px * var(--page-scale, 1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--page-scale, 1));
  margin: 0;
  padding: calc(12px * var(--page-scale, 1)) calc(16px * var(--page-scale, 1));
  border: 0;
  border-radius: calc(13px * var(--page-scale, 1));
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gasscoPanelToggle:hover {
  background: rgba(255,255,255,0.025);
}

.gasscoPanelToggle:focus-visible {
  outline: calc(2px * var(--page-scale, 1)) solid rgba(76,201,240,0.72);
  outline-offset: calc(-2px * var(--page-scale, 1));
}

.gasscoPanelHeading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--page-scale, 1));
}

.gasscoPanelTitle {
  font-size: calc(16px * var(--page-scale, 1));
  line-height: 1.25;
  font-weight: 650;
  color: var(--text);
}

.gasscoPanelTeaser {
  font-size: calc(12px * var(--page-scale, 1));
  line-height: normal;
  font-weight: 400;
  color: var(--muted-2);
}

.gasscoPanelToggleMeta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--page-scale, 1));
  margin-left: auto;
}

.gasscoPanelFirstOpenHint {
  color: var(--muted-2);
  font-size: calc(11px * var(--page-scale, 1));
  font-weight: 400;
  white-space: nowrap;
}

.gasscoPanelFirstOpenHint[hidden] {
  display: none !important;
}

.gasscoPanelChevron {
  width: calc(22px * var(--page-scale, 1));
  height: calc(22px * var(--page-scale, 1));
  flex: 0 0 auto;
  color: rgba(127,138,161,0.96);
  transition: transform 160ms ease, color 160ms ease;
}

.gasscoPanelToggle[aria-expanded="true"] .gasscoPanelChevron {
  transform: rotate(180deg);
  color: rgba(119,189,243,0.98);
}

.gasscoPanelBody {
  padding: 0 calc(12px * var(--page-scale, 1)) calc(12px * var(--page-scale, 1));
}

.gasscoPanelBody[hidden] {
  display: none !important;
}

.gasscoSegment {
  margin: 0;
  padding: calc(14px * var(--page-scale, 1)) calc(4px * var(--page-scale, 1));
  border-top: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.075);
}

/* Keep nested chart cards visually integrated with the panel. */
.gasscoPanel .gasscoChartCard.card {
  margin: 0;
  padding: calc(14px * var(--page-scale, 1)) calc(4px * var(--page-scale, 1));
  border: 0;
  border-top: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.075);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gasscoCombinedImpactChartWrap {
  margin-top: calc(2px * var(--page-scale, 1));
  height: clamp(260px, 35vh, 380px);
}

.gasscoPanel .gasscoChartCard .chartExportFooter {
  transform: translateX(calc(8px * var(--page-scale, 1)));
}

.gasscoSegment h3 {
  margin: 0 calc(4px * var(--page-scale, 1)) calc(10px * var(--page-scale, 1));
  font-size: calc(15px * var(--page-scale, 1));
  line-height: 1.3;
  font-weight: 650;
  color: var(--text);
}

.gasscoSegment > h3 + .cardSub {
  margin-top: calc(-6px * var(--page-scale, 1));
}

.gasscoSegmentHead .cardSub {
  margin: 0 calc(4px * var(--page-scale, 1)) calc(10px * var(--page-scale, 1));
}

.gasscoSegmentHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10px * var(--page-scale, 1));
}

.gasscoStatusSummary {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: calc(25px * var(--page-scale, 1));
  padding: calc(3px * var(--page-scale, 1)) calc(8px * var(--page-scale, 1));
  border: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.09);
  border-radius: 999px;
  background: rgba(16,21,29,0.58);
  color: var(--muted);
  font-size: calc(11px * var(--page-scale, 1));
  white-space: nowrap;
}

.gasscoCompactNote {
  margin: 0 calc(4px * var(--page-scale, 1)) calc(8px * var(--page-scale, 1));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: calc(11px * var(--page-scale, 1));
  line-height: 1.35;
}

.gasscoTableWrap {
  width: 100%;
  max-height: min(calc(530px * var(--page-scale, 1)), 66vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: calc(1px * var(--page-scale, 1)) solid var(--border);
  border-radius: calc(8px * var(--page-scale, 1));
  background: rgba(16,21,29,0.42);
}

.gasscoTable {
  width: 100%;
  min-width: calc(1060px * var(--page-scale, 1));
  border-collapse: separate;
  border-spacing: 0;
  font-size: calc(12px * var(--page-scale, 1));
}

.gasscoTable th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: calc(4px * var(--page-scale, 1)) calc(6px * var(--page-scale, 1));
  text-align: left;
  white-space: nowrap;
  background: rgba(16,21,29,0.96);
  backdrop-filter: blur(6px);
  border-bottom: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.10);
  color: var(--muted-2);
  font-size: calc(11px * var(--page-scale, 1));
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* Allow compact maintenance headers on narrow screens. */
#gasscoMaintenanceTable th {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#gasscoMaintenanceTable th:first-child,
#gasscoMaintenanceTable td:first-child {
  text-align: center;
}

.gasscoTable td {
  padding: calc(4px * var(--page-scale, 1)) calc(6px * var(--page-scale, 1));
  vertical-align: top;
  border-bottom: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.055);
  color: rgba(232,236,241,0.94);
  line-height: 1.36;
}

.gasscoTable tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.03);
}

.gasscoTable tbody tr {
  transition: background 120ms ease, box-shadow 120ms ease;
}

.gasscoTable tbody tr:hover {
  background: rgba(0,200,255,0.09);
  box-shadow: inset 0 0 0 9999px rgba(0,200,255,0.03);
}

.gasscoStatusBadge {
  display: inline-flex;
  align-items: center;
  padding: calc(2px * var(--page-scale, 1)) calc(6px * var(--page-scale, 1));
  border-radius: 999px;
  border: calc(1px * var(--page-scale, 1)) solid transparent;
  font-size: calc(10px * var(--page-scale, 1));
  font-weight: 650;
  white-space: nowrap;
}

.gasscoStatusBadge--active {
  color: rgba(255,219,221,0.98);
  background: rgba(230,59,63,0.17);
  border-color: rgba(230,59,63,0.24);
}

.gasscoStatusBadge--upcoming {
  color: rgba(211,244,255,0.98);
  background: rgba(76,201,240,0.13);
  border-color: rgba(76,201,240,0.20);
}

.gasscoPeriod {
  display: inline-flex;
  align-items: baseline;
  gap: calc(5px * var(--page-scale, 1));
  white-space: nowrap;
  font-weight: 600;
  color: rgba(232,236,241,0.98);
}

.gasscoPeriodStart,
.gasscoPeriodSep,
.gasscoPeriodEnd {
  color: inherit;
  font-weight: inherit;
}

.gasscoCellMain {
  display: block;
  font-weight: 600;
  color: rgba(232,236,241,0.98);
}

.gasscoCellSub {
  display: block;
  margin-top: calc(2px * var(--page-scale, 1));
  color: var(--muted-2);
  font-size: inherit;
  font-weight: 400;
}

.gasscoAssetNameLine {
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--page-scale, 1));
  max-width: 100%;
}

.gasscoAssetInfoBtn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(16px * var(--page-scale, 1));
  height: calc(16px * var(--page-scale, 1));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(174,184,196,0.76);
  cursor: help;
  vertical-align: middle;
  transition: color 120ms ease, background 120ms ease;
}

.gasscoAssetInfoBtn svg {
  width: calc(15px * var(--page-scale, 1));
  height: calc(15px * var(--page-scale, 1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gasscoAssetInfoBtn:hover,
.gasscoAssetInfoBtn:focus-visible,
.gasscoAssetInfoBtn[aria-expanded="true"] {
  color: rgba(225,231,238,0.96);
  background: rgba(255,255,255,0.07);
}

.gasscoAssetInfoBtn:focus-visible {
  outline: calc(1px * var(--page-scale, 1)) solid rgba(154,166,180,0.72);
  outline-offset: calc(2px * var(--page-scale, 1));
}

.gasscoAssetTooltip {
  position: fixed;
  z-index: 12000;
  width: min(calc(360px * var(--page-scale, 1)), calc(100vw - 20px));
  padding: calc(10px * var(--page-scale, 1));
  border: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.14);
  border-radius: calc(8px * var(--page-scale, 1));
  background: rgba(17,22,30,0.985);
  box-shadow: 0 calc(8px * var(--page-scale, 1)) calc(24px * var(--page-scale, 1)) rgba(0,0,0,0.34);
  color: rgba(232,236,241,0.96);
  font-size: calc(12px * var(--page-scale, 1));
  line-height: 1.42;
}

.gasscoAssetTooltip[hidden] {
  display: none !important;
}

.gasscoAssetTooltipHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10px * var(--page-scale, 1));
  margin-bottom: calc(6px * var(--page-scale, 1));
}

.gasscoAssetTooltipHeader strong {
  color: rgba(245,247,250,0.99);
  font-size: calc(13px * var(--page-scale, 1));
  font-weight: 700;
}

.gasscoAssetTooltipHeader span {
  flex: 0 1 auto;
  max-width: 65%;
  margin-left: auto;
  color: var(--muted-2);
  font-size: calc(11px * var(--page-scale, 1));
  font-weight: 600;
  text-align: right;
}

.gasscoAssetTooltipText {
  margin-bottom: calc(7px * var(--page-scale, 1));
  color: rgba(221,226,232,0.94);
}

.gasscoAssetTooltipRow {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(8px * var(--page-scale, 1));
  padding-top: calc(5px * var(--page-scale, 1));
  border-top: calc(1px * var(--page-scale, 1)) solid rgba(255,255,255,0.07);
}

.gasscoAssetTooltipRow + .gasscoAssetTooltipRow {
  margin-top: calc(5px * var(--page-scale, 1));
}

.gasscoAssetTooltipRow span {
  color: var(--muted-3);
  font-weight: 500;
}

.gasscoAssetTooltipRow strong {
  color: rgba(218,224,230,0.92);
  font-weight: 500;
}

.gasscoEffectUncertain {
  color: var(--muted-2);
  font-style: italic;
}

.gasscoEmptyCell {
  padding: calc(18px * var(--page-scale, 1)) !important;
  text-align: center;
  color: var(--muted-2) !important;
}

.gasscoTableFooter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8px * var(--page-scale, 1));
  margin: calc(8px * var(--page-scale, 1)) calc(2px * var(--page-scale, 1)) 0;
}

.gasscoFootNote {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  color: var(--muted-3);
  line-height: 1.4;
}

.gasscoTableExportActions {
  flex: 0 0 auto;
  transform: translateX(calc(12px * var(--page-scale, 1))) translateY(calc(8px * var(--page-scale, 1)));
}

.gasscoPanel .gasscoChartCard .chartExportFooter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center !important;
  column-gap: calc(5px * var(--page-scale, 1));
  transform: translateX(calc(8px * var(--page-scale, 1))) !important;
}

.gasscoPanel .gasscoChartCard .chartExportFooter .chartRangeSub {
  min-width: 0 !important;
  align-self: center !important;
  white-space: normal;
}

.gasscoPanel .gasscoChartCard .chartExportFooter .chartExportActions {
  width: auto !important;
  margin-top: 0 !important;
  justify-self: end !important;
  align-self: center !important;
  transform: none !important;
}

.gasscoMappingSegment {
  padding-bottom: calc(10px * var(--page-scale, 1));
}

.gasscoMappingWrap {
  max-height: none;
}

.gasscoMappingTable {
  min-width: calc(760px * var(--page-scale, 1));
}

.gasscoMappingTable td:first-child {
  font-weight: 600;
}

.gasscoInfoLine {
  margin: calc(4px * var(--page-scale, 1)) calc(4px * var(--page-scale, 1)) 0;
  color: var(--muted-2);
  font-size: calc(10px * var(--page-scale, 1));
  line-height: 1.5;
}

.gasscoInfoLine a {
  color: rgb(119,189,243);
  text-decoration: none;
}

.gasscoInfoLine a:hover,
.gasscoInfoLine a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .gasscoPanelToggle {
    padding-left: calc(12px * var(--page-scale, 1));
    padding-right: calc(12px * var(--page-scale, 1));
  }

  .gasscoSegmentHead {
    align-items: flex-start;
  }

  .gasscoStatusSummary {
    font-size: calc(10px * var(--page-scale, 1));
  }

  .gasscoTable {
    min-width: calc(820px * var(--page-scale, 1));
  }

  #gasscoMaintenanceTable {
    min-width: calc(760px * var(--page-scale, 1));
  }

  #gasscoMaintenanceTable th {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  /* Keep the gas-flow destination table compact on mobile. */
  .gasscoMappingTable {
    min-width: calc(680px * var(--page-scale, 1));
  }

  .gasscoMappingTable th,
  .gasscoMappingTable td {
    padding-left: calc(3px * var(--page-scale, 1));
    padding-right: calc(3px * var(--page-scale, 1));
  }

  .gasscoMappingTable th {
    white-space: normal;
    line-height: 1.2;
  }

  #gasscoMaintenanceTable .gasscoPeriod {
    display: inline-grid;
    grid-template-columns: max-content;
    gap: 0;
    white-space: normal;
  }

  #gasscoMaintenanceTable .gasscoPeriodStart,
  #gasscoMaintenanceTable .gasscoPeriodEnd {
    white-space: nowrap;
  }

  #gasscoMaintenanceTable .gasscoPeriodSep {
    display: none;
  }

  #gasscoMaintenanceTable .gasscoPeriodEnd::before {
    content: "– ";
  }
  
}

@media (max-width: 480px) {
  .gasscoPanelTitle {
    font-size: calc(15px * var(--page-scale, 1));
  }

  .gasscoPanelFirstOpenHint {
    font-size: calc(10px * var(--page-scale, 1));
  }

  .gasscoStatusSummary {
    white-space: normal;
    text-align: right;
  }

}

@media (prefers-reduced-motion: reduce) {
  .gasscoPanelChevron {
    transition: none;
  }
}

/* Keep the maintenance table vertically resizable. */
.gasscoMaintenanceHeadline {
  color: rgba(232,236,241,0.96) !important;
  font-size: calc(13px * var(--page-scale, 1)) !important;
  font-weight: 600;
  line-height: 1.35;
}

.gasscoTableWrap:not(.gasscoMappingWrap) {
  height: calc(420px * var(--page-scale, 1));
  min-height: calc(220px * var(--page-scale, 1));
  max-height: 70vh;
  resize: vertical;
}

.gasscoMappingWrap {
  height: auto;
  min-height: 0;
  max-height: none;
  resize: none;
}

@media (max-width: 700px) {
  .gasscoTableWrap:not(.gasscoMappingWrap) {
    height: calc(340px * var(--page-scale, 1));
    min-height: calc(180px * var(--page-scale, 1));
    max-height: 62vh;
  }
}

#gasscoCombinedImpactCard {
  position: relative;
}

#gasscoCombinedImpactCard > h3 {
  padding-right: calc(34px * var(--page-scale, 1));
}

.gasscoCombinedImpactInfo {
  position: absolute !important;
  top: calc(13px * var(--page-scale, 1));
  right: calc(4px * var(--page-scale, 1));
  z-index: 1000;
}

.gasscoCombinedImpactInfo .tipBox {
  left: auto;
  right: calc(-4px * var(--page-scale, 1));
}

.gasscoCombinedImpactInfo .tipBox::before {
  left: auto;
  right: calc(10px * var(--page-scale, 1));
}