//
// SUSTAINABLE — light
// ===================
// Hero KPIs (CO₂ per page view + transfer + hosting), first/third
// party split as a stacked bar, then per-domain / dirtiest-asset /
// per-content-type horizontal bar lists.
//

$sustainable--first-party: $color--blue;
$sustainable--third-party: $color--text-muted;

.sustainable-hint {
  margin: 0 0 1rem 0;
  padding: 12px 14px;
  background: $color--info-bg;
  border: 1px solid $color--info-border;
  border-radius: $radius--md;
  color: $color--info;
  font-size: 0.95rem;
}

.sustainable-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 18px 0;
}

.sustainable-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: $radius--md;
  border: 1px solid $color--border;
  background: $color--surface-card;

  &.ok { background: $color--ok-bg; border-color: $color--ok-border; color: $color--ok; }
  &.warning { background: $color--warning-bg; border-color: $color--warning-border; color: $color--warning; }
  &.info { background: $color--info-bg; border-color: $color--info-border; color: $color--info; }
}

.sustainable-kpi-label {
  font-size: 0.78rem;
  font-weight: $font--weight--medium;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.sustainable-kpi-value {
  font-size: 1.75rem;
  font-weight: $font--weight--semibold;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.sustainable-kpi-value-text {
  font-size: 1.4rem;
  font-weight: $font--weight--semibold;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.sustainable-kpi-sub {
  font-size: 0.78rem;
  font-weight: $font--weight--medium;
  opacity: 0.85;
  word-break: break-all;
}

.sustainable-section-heading {
  margin-top: 1.5rem;
}

//
// First/Third party stacked bar
//
.sustainable-split {
  margin-bottom: 18px;
}

.sustainable-split-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: $radius--sm;
  overflow: hidden;
  background: $color--surface;
  border: 1px solid $color--border;
}

.sustainable-split-segment {
  display: block;
  height: 100%;
  &.sustainable-first-party { background: $sustainable--first-party; }
  &.sustainable-third-party { background: $sustainable--third-party; }
}

.sustainable-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 8px;
  font-size: 0.9rem;
}

.sustainable-split-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sustainable-split-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex: 0 0 auto;
  &.sustainable-first-party { background: $sustainable--first-party; }
  &.sustainable-third-party { background: $sustainable--third-party; }
}

.sustainable-split-name {
  color: $color--text-secondary;
  font-weight: $font--weight--medium;
}

.sustainable-split-value {
  color: $color--text;
  font-variant-numeric: tabular-nums;
}

//
// Per-domain / dirtiest assets / per-content-type bars
//
.sustainable-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.sustainable-bar-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.5fr) 2fr minmax(180px, auto);
  gap: 12px;
  align-items: center;
  font-size: 0.9rem;
  padding: 4px 0;
}

.sustainable-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sustainable-bar-name {
  color: $color--text;
  word-break: break-word;
}

.sustainable-bar-asset {
  color: $color--text;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 0.85rem;
}

.sustainable-bar-track {
  height: 8px;
  border-radius: $radius--sm;
  background: $color--surface;
  border: 1px solid $color--border;
  overflow: hidden;
}

.sustainable-bar-fill {
  display: block;
  height: 100%;
  background: $color--blue;
}

.sustainable-bar-meta {
  display: inline-flex;
  gap: 12px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: $color--text-secondary;
  white-space: nowrap;
}

.sustainable-bar-co2 {
  color: $color--text;
  font-weight: $font--weight--medium;
}