/* HF dashboard accents use the active XOTA preset's contrast-safe text colours. */
.verdict > div {
  position: relative;
  border-top: 3px solid var(--tone, var(--primary-text));
}
.verdict > div:nth-child(5n + 1) { --tone: var(--primary-text); }
.verdict > div:nth-child(5n + 2) { --tone: var(--success); }
.verdict > div:nth-child(5n + 3) { --tone: var(--accent-text); }
.verdict > div:nth-child(5n + 4) { --tone: var(--primary-text); }
.verdict > div:nth-child(5n + 5) { --tone: var(--accent-text); }
.verdict > div:not(.main) strong { color: var(--tone); }

.metrics.explained .metric {
  --tone: var(--primary-text);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--tone) 36%, var(--soft));
  box-shadow: inset 0 3px var(--tone);
  background: var(--panel);
}
.metrics.explained .metric:nth-child(4n + 2) { --tone: var(--accent-text); }
.metrics.explained .metric:nth-child(4n + 3) { --tone: var(--success); }
.metrics.explained .metric:nth-child(4n + 4) { --tone: var(--primary-text); }
.metrics.explained .metric strong { color: var(--tone); }
.metrics.explained .metric > span,
.metrics.explained .metric small,
.metrics.explained .metric .unit { color: var(--text); }

.chart-card { border-top: 3px solid var(--primary-text); }
.charts > .chart-card:nth-child(2) { border-top-color: var(--success); }
.charts > .chart-card:nth-child(3) { border-top-color: var(--accent-text); }
.chart-card.wide { border-top-color: var(--accent-text); }
.band-row {
  border-left: 3px solid var(--state);
  background: var(--panel);
}
.band-row .state { color: var(--state); font-weight: 600; }
.band-row .bar { border-radius: 999px; }
.band-row .bar i { border-radius: inherit; }

.quality {
  --tone: var(--text);
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 42%, var(--panel));
  border-radius: 3px;
  background: var(--panel);
  font-weight: 600;
}
.quality--good { --tone: var(--hamqsl-good); }
.quality--fair { --tone: var(--hamqsl-fair); }
.quality--poor { --tone: var(--hamqsl-poor); }
.grey-list p { border-left: 3px solid var(--accent-text); }
.grey-list p:nth-child(2) { border-left-color: var(--primary-text); }
.grey-list p:nth-child(3) { border-left-color: var(--accent-text); }
.grey-list p:nth-child(4) { border-left-color: var(--success); }
.glossary details { border-top: 3px solid var(--accent-text); }
.glossary details:nth-child(3n + 2) { border-top-color: var(--success); }
.glossary details:nth-child(3n + 3) { border-top-color: var(--primary-text); }

.condition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--soft);
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
}
.condition-legend > span { display: inline-flex; align-items: baseline; gap: 4px; }
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--primary-text);
}
.legend-dot.good { background: var(--hamqsl-good); }
.legend-dot.fair { background: var(--hamqsl-fair); }
.legend-dot.poor { background: var(--hamqsl-poor); }
.solar-legend { margin-top: 14px; }
.mobile-chart-note { display: none; }

@media (max-width: 600px) {
  .chart-card { min-width: 0; }
  .chart.tall { height: 225px; }
  .chart:not(.tall) { height: 205px; }
  .mobile-chart-note { display: block; color: var(--text); }
  .station-section .table-scroll { overflow: visible; }
  .station-table, .station-table tbody, .station-table tr, .station-table td { display: block; width: 100%; }
  .station-table thead { display: none; }
  .station-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 10px 12px;
    margin-top: 10px;
    background: var(--panel2);
    border-left: 3px solid var(--accent-text);
  }
  .station-table td { min-width: 0; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .station-table td:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--soft); }
  .station-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    font: 10px var(--mono);
  }
}