/* Pit Wall Console system layer: flatter structure, fewer boxes, stricter rows. */

:root {
  --console-row: 52px;
  --console-row-tall: 76px;
  --console-section-pad: var(--space-5);
  --console-rule: color-mix(in srgb, var(--pc-border) 86%, transparent);
  --console-rule-soft: color-mix(in srgb, var(--pc-border) 62%, transparent);
  --console-surface: color-mix(in srgb, var(--pc-bg) 88%, var(--pc-low));
  --console-surface-hot: color-mix(in srgb, var(--pc-mid) 52%, var(--pc-bg));
  --console-control-height: 36px;
  --console-control-surface: color-mix(in srgb, var(--pc-bg) 82%, var(--pc-low));
  --console-control-border: color-mix(in srgb, var(--pc-border-strong) 72%, var(--pc-border));
  --console-page-title: 700 1.62rem/1.12 var(--font-f1);
  --console-page-title-tracking: 0.12em;
  --console-page-copy: 400 0.92rem/1.45 var(--font-main);
  --console-topbar-block: 58px;
  --console-topbar-pad-y: var(--space-5);
}

.dashboard-scroll {
  padding: 0 var(--space-6) var(--space-8);
}

.dash-hero {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: calc(var(--console-topbar-block) + (var(--console-topbar-pad-y) * 2));
  padding: var(--console-topbar-pad-y) 0;
  margin: 0 0 var(--space-5);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--console-rule);
}

.hero-flex {
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.hero-titles {
  align-items: flex-start;
  min-height: var(--console-topbar-block);
  min-width: 0;
}

.hero-titles > div {
  display: grid;
  gap: var(--space-2);
}

.hero-titles h2,
.deck-title {
  margin: 0;
  color: var(--pc-on-surface);
  font: var(--console-page-title);
  letter-spacing: var(--console-page-title-tracking);
  text-transform: uppercase;
}

.hero-titles p {
  max-width: 68ch;
  margin: 0;
  color: var(--pc-on-surface-muted);
  font: var(--console-page-copy);
}

.hero-controls {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: var(--console-topbar-block);
  background: transparent;
  border: 0;
  padding: 0;
}

.selectors,
.deck-tools,
.data-hero-controls {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.control-group,
.control-unit {
  min-width: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

.control-group label,
.unit-label {
  color: var(--pc-on-surface-muted);
  font: var(--text-label-caps) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

select,
.segmented-control,
.gp-selector-wrapper,
.calendar-refresh,
.data-status-block,
.data-freshness-card {
  background-color: var(--console-surface);
  border-color: var(--console-rule);
}

select,
.bg-dark-input {
  height: var(--console-control-height);
  min-width: 104px;
  background-color: var(--console-control-surface) !important;
  border: 1px solid var(--console-control-border) !important;
  color: var(--pc-on-surface) !important;
  font: var(--text-data);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

select:hover,
select:focus-visible,
.gp-selector-wrapper:focus-within,
.segmented-control:focus-within {
  border-color: color-mix(in srgb, var(--pc-primary) 72%, var(--pc-border-strong)) !important;
  outline: none;
}

#race-select,
#replay-race-select {
  min-width: 220px;
}

.segmented-control,
.gp-selector-wrapper {
  min-height: var(--console-control-height);
  background: var(--console-control-surface);
  border: 1px solid var(--console-control-border);
}

.segmented-control {
  align-items: stretch;
  padding: 2px;
}

.segment-btn {
  min-width: 58px;
  padding: 0 var(--space-3);
  font: var(--text-data);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.gp-selector-wrapper {
  min-width: 220px;
  height: var(--console-control-height);
  padding-left: var(--space-2);
}

.gp-prefix {
  height: 100%;
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
}

.gp-select-custom {
  height: calc(var(--console-control-height) - 2px) !important;
  min-width: 0;
}

.calendar-refresh {
  min-height: var(--console-control-height);
  padding-block: 0;
  background: var(--console-control-surface);
  border-color: var(--console-control-border);
  color: var(--pc-on-surface);
}

.panel {
  padding: var(--console-section-pad) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--console-rule);
}

.panel-header,
.panel-header.border-bottom {
  min-height: 42px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--console-rule);
}

.panel-header h2,
.panel-header h3,
.panel h3 {
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.chart-frame {
  min-height: 500px;
  background: var(--console-surface);
  border: 1px solid var(--console-rule);
  border-top-color: var(--pc-border-strong);
}

.chart-frame canvas {
  padding: var(--space-2);
}

.stats-row,
.calendar-command-grid,
.calendar-metrics,
.data-command-grid {
  gap: 0;
  margin-bottom: var(--space-5);
  background: transparent;
  border: 1px solid var(--console-rule);
}

.stats-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card,
.calendar-command-panel,
.calendar-metric,
.data-command-panel,
.summary-stat-card {
  min-height: var(--console-row-tall);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--console-rule);
  justify-content: center;
}

.stat-card:last-child,
.calendar-command-panel:last-child,
.calendar-metric:last-child,
.data-command-panel:last-child,
.summary-stat-card:last-child {
  border-right: 0;
}

.stat-card .value,
.calendar-command-panel strong,
.calendar-metric strong,
.data-command-panel strong,
.summary-stat-cardValue {
  font-size: 1.28rem;
}

.stat-card .label,
.stat-card .subtext,
.calendar-kicker,
.calendar-metric span,
.data-kicker,
.summary-stat-cardLabel {
  font-size: 0.66rem;
}

.control-deck {
  margin: 0;
  padding: var(--console-topbar-pad-y) 0 var(--space-3);
  background: color-mix(in srgb, var(--pc-bg) 92%, var(--pc-low));
  border: 0;
  border-bottom: 1px solid var(--console-rule);
}

.control-deck-main {
  align-items: flex-start;
  min-height: var(--console-topbar-block);
}

.deck-branding {
  align-items: flex-start;
  min-height: var(--console-topbar-block);
}

.deck-metadata {
  margin-top: var(--space-2);
  color: var(--pc-on-surface-muted);
  font: var(--console-page-copy);
  font-size: 0.78rem;
  line-height: 1.35;
}

.tape-integration {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--console-rule-soft);
}

.telemetry-tape,
.driver-list-scroll {
  border-color: var(--console-rule);
}

.tape-cell,
.driver-item-row,
.v-stat-item {
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid var(--console-rule-soft);
}

.tape-cell:hover,
.driver-item-row:hover {
  background: var(--console-surface-hot);
}

.dashboard-tabs-container {
  top: 100px;
  background: var(--pc-bg);
  border-bottom: 1px solid var(--console-rule);
}

.tab-btn {
  min-width: 136px;
  padding: var(--space-3) var(--space-5);
}

#tab-overview > .split-view {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.62fr);
  grid-template-areas:
    "chart results"
    "conditions results";
  gap: var(--space-5);
  align-items: start;
}

#tab-overview > .split-view > .right-column {
  display: contents;
}

#tab-overview .chart-panel {
  grid-area: chart;
}

#tab-overview .conditions-panel {
  grid-area: conditions;
}

#tab-overview .results-panel {
  grid-area: results;
  min-width: 0;
  flex: initial;
}

.right-column {
  gap: var(--space-5);
}

.race-intelligence-panel {
  background: transparent;
}

.intel-grid {
  padding: 0;
  gap: 0;
  border-top: 1px solid var(--console-rule-soft);
}

.intel-item {
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--console-rule-soft);
  border-right: 1px solid var(--console-rule-soft);
}

.intel-item:last-child {
  border-right: 0;
}

.results-wrapper,
.driver-table-wrapper {
  margin-top: 0;
  padding: 0;
  border-top: 1px solid var(--console-rule);
}

.driver-table th {
  height: 38px;
  padding: 0 var(--space-4);
  background: var(--pc-bg);
  border-bottom: 1px solid var(--pc-border-strong);
}

.driver-table td {
  height: var(--console-row);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--console-rule-soft);
}

.driver-table tr:hover td {
  background: var(--console-surface-hot);
}

.weather-grid {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--console-rule);
}

.weather-metric {
  min-height: var(--console-row);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--console-rule-soft);
}

.weather-metric .val {
  font-size: 1.32rem;
}

.session-notes,
.glass-note {
  background: transparent;
  border-color: var(--console-rule);
}

.standings-split {
  gap: var(--space-6);
}

.driver-panel,
.constructors-panel,
.driver-selector-sidebar,
.vital-stats-panel,
.track-record-panel,
.driver-hero {
  background: transparent;
  border-color: var(--console-rule);
}

.driver-panel,
.constructors-panel {
  padding: var(--space-5) 0 0;
}

.driver-hero {
  min-height: 220px;
  border-inline: 0;
}

.driver-photo {
  background: var(--console-surface);
}

.photo-overlay {
  box-shadow: none;
}

.stats-summary-grid {
  gap: 0;
  border: 1px solid var(--console-rule);
}

.progress-grid {
  gap: var(--space-6);
}

.progress-item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--console-rule-soft);
}

.calendar-panel {
  padding: var(--console-section-pad) 0;
}

.calendar-event {
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--console-rule);
}

.calendar-event > * {
  background: transparent;
  border-right: 1px solid var(--console-rule-soft);
}

.calendar-event > *:last-child {
  border-right: 0;
}

.calendar-event.is-next > *,
.calendar-event.is-live > * {
  background: color-mix(in srgb, var(--pc-mid) 34%, transparent);
}

.calendar-sessions {
  gap: 0;
  padding: 0;
  background: transparent;
  border-left: 0;
}

.calendar-session {
  min-height: 74px;
  background: transparent;
  border-right: 1px solid var(--console-rule-soft);
  border-bottom: 1px solid var(--console-rule-soft);
}

.calendar-session.is-next,
.calendar-session.is-live {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-primary) 42%, transparent);
}

.calendar-list {
  gap: 0;
}

.data-section {
  padding: var(--space-5) 0;
}

.data-source-card,
.latest-shard,
.latest-brief-list li {
  border-color: var(--console-rule-soft);
}

.map-primary-area,
.trace-feed-unit,
.hud-context-box,
.hud-legend-industrial,
.scrub-unit,
.battle-comparison-unit {
  background: var(--console-surface);
  border-color: var(--console-rule);
}

@media (max-width: 1180px) {
  #tab-overview > .split-view {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "results"
      "conditions";
  }

  #tab-overview > .split-view > .right-column {
    display: flex;
  }

  .dash-hero,
  .control-deck-main,
  .hero-flex {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .dashboard-scroll {
    padding: 0 var(--space-4) var(--space-6);
  }

  .stats-row,
  .calendar-command-grid,
  .calendar-metrics,
  .data-command-grid {
    grid-template-columns: 1fr;
  }

  .stat-card,
  .calendar-command-panel,
  .calendar-metric,
  .data-command-panel,
  .summary-stat-card {
    border-right: 0;
    border-bottom: 1px solid var(--console-rule);
  }

  .calendar-event > * {
    border-right: 0;
  }
}