.sectors-section {
  background: var(--color-canvas);
}

.sectors-layout {
  display: grid;
  gap: var(--space-3);
}

.sector-panels {
  display: grid;
  gap: var(--space-4);
}

.sector-panel { min-width: 0; }
.sector-panel__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-block-end: var(--space-2); }
.sector-panel__header h3 { margin: 0; font-size: var(--title-panel-size); font-weight: var(--title-panel-weight); line-height: 1.2; }
.sector-panel__header p { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.sectors-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.sectors-header h2 {
  font-size: var(--title-primary-size);
  font-weight: var(--title-primary-weight);
  line-height: var(--title-primary-line-height);
  margin: 0;
}

.sectors-introduction,
.sectors-state,
.sector-row__detail,
.sectors-zero-state {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.sectors-introduction {
  margin-block-start: var(--space-1);
}

.sectors-date,
.sector-detail__date,
.sector-detail__count,
.sector-row__membership {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.sector-row__membership { display: block; margin-block-start: 0.2rem; }
.sector-row__membership--compact, .sector-row__membership--mobile { display: none; }

.sector-chart {
  overflow: hidden;
  border: var(--border-width) solid rgb(244 189 80 / 38%);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.sector-row {
  scroll-margin-top: var(--navigation-offset);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) var(--touch-target-min);
  align-items: center;
  min-height: 6.25rem;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #030a0d;
}

.sector-row--expanded {
  position: relative;
  z-index: 1;
  border: 1px solid rgb(244 189 80 / 62%);
  background: #122128;
  box-shadow: inset 3px 0 rgb(244 189 80 / 58%);
}

.sector-row--expanded .sector-row__name { font-weight: 800; }

.sector-row__toggle {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border: 1px solid rgb(244 189 80 / 48%);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.sector-row__chevron { color: currentColor; font-size: 1.25rem; line-height: 1; transform: translateY(-0.08em); }

.sector-row__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.sector-detail {
  padding: var(--space-3);
  border-block: 1px solid rgb(244 189 80 / 35%);
  background: #05090b;
  box-shadow: inset 3px 0 rgb(244 189 80 / 36%);
}

.sector-detail__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-2); }
.sector-detail__title { color: var(--color-text); }
.sector-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sector-table th, .sector-table td { padding: 0.45rem 0.6rem; border-block-end: 1px solid rgb(255 255 255 / 9%); text-align: right; }
.sector-table thead { background: #15191b; color: var(--color-text-muted); font-size: 0.75rem; }
.sector-table th:first-child { text-align: left; }
.sector-table tbody th { color: var(--color-text); }
.sector-table tbody tr:not(:last-child) th,
.sector-table tbody tr:not(:last-child) td { border-block-end-color: rgb(255 255 255 / 5%); }
.movement--positive { color: var(--color-success); }
.movement--negative { color: var(--color-decline); }
.movement--neutral { color: var(--color-neutral); }

@media (min-width: 600px) and (max-width: 1023px) {
  .sector-row__membership--wide { display: none; }
  .sector-row__membership--compact { display: block; }
}

.sector-row:not(:last-child) {
  border-block-end: var(--border-width) solid rgb(244 189 80 / 9%);
}

.sector-row__identity {
  min-width: 0;
}

.sector-row__name {
  display: block;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.sector-row__detail {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.6875rem;
  line-height: 1.2;
}

.sector-row__track {
  grid-column: 1 / 3;
  grid-row: 2;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-surface);
}

.sector-row__bar {
  width: var(--sector-share);
  height: 100%;
  background: var(--color-info);
  transition: width var(--transition-base), background-color var(--transition-base);
}

[data-sector-chart][data-metric="value"] .sector-row__bar {
  background: #d8b46c;
}

@media (min-width: 900px) {
  .sector-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-table { font-size: 0.6875rem; }
  .sector-table th, .sector-table td { padding-inline: 0.3rem; }
}

.sector-row__value {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.sectors-state:empty,
[data-sectors-state="current"] .sectors-state {
  display: none;
}

[data-sectors-state="loading"] .sector-chart,
[data-sectors-state="unavailable"] .sector-chart,
[data-sectors-state="malformed"] .sector-chart {
  min-height: 12rem;
}

.sectors-action {
  width: fit-content;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 599px) {
  .sectors-header {
    align-items: start;
  }

  .sector-row {
    grid-template-columns: minmax(7.5rem, 1fr) minmax(5.75rem, auto) var(--touch-target-min);
    gap: var(--space-1) var(--space-2);
  }

  .sector-row__track { grid-column: 1 / -1; }
  .sector-row__membership--wide { display: none; }
  .sector-row__membership--mobile { display: block; }
  .sector-table thead { display: none; }
  .sector-table, .sector-table tbody, .sector-table tr, .sector-table th, .sector-table td { display: block; }
  .sector-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--space-2); border-block-end: 1px solid rgb(255 255 255 / 12%); }
  .sector-table th, .sector-table td { padding: 0.2rem; border: 0; text-align: right; }
  .sector-table th:first-child { grid-column: 1 / -1; font-size: 1rem; }
  .sector-table td::before { content: attr(data-label) " "; color: var(--color-text-muted); font-size: 0.6875rem; }
}

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