/* ============================================================================
   solar.css — solar.php only: band table, metric cards and trend charts.
   ========================================================================= */

.solar-section { margin-bottom: 40px; }
.solar-section:first-of-type { margin-top: 4px; }

/* .section-heading (layout.css) does the styling. Only the spacing differs:
   a .section-sub sits directly underneath each one here. */
.solar-section .section-heading { margin-bottom: 4px; }

.section-sub {
	font-size: 0.82rem;
	color: var(--text3);
	margin-bottom: 16px;
}

/* ── HF band table ───────────────────────────────────────────────────────── */
.band-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 24px var(--glow2);
}

.band-table th,
.band-table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--border2);
}

.band-table th {
	background: var(--surface2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text2);
}

/* Last band row and the outlook row that belongs to it. */
.band-table tr:last-child td,
.band-table tr:nth-last-child(2) td {
	border-bottom: none;
}

.band-name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--readout);
}

.band-freq {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--text3);
	margin-top: 3px;
}

.outlook-cell {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	line-height: 1.45;
	max-width: 240px;
}

.outlook-cell.good { color: var(--online-text); }
.outlook-cell.fair { color: var(--warn-text); }
.outlook-cell.poor { color: var(--danger-text); }
.outlook-cell.dim  { color: var(--text3); }

.table-note {
	font-size: 0.72rem;
	color: var(--text3);
	margin-top: 8px;
	padding-left: 2px;
}

/* ── Metric cards ────────────────────────────────────────────────────────── */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.cards .card {
	padding: 18px;
	border-radius: 12px;
	box-shadow: 0 4px 24px var(--glow2);
	transition: transform 0.15s, border-color 0.2s;
}

.cards .card:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}

.card-label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text2);
	margin-bottom: 10px;
}

.card-value {
	font-family: var(--font-head);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
}

.card-value.small { font-size: 1.1rem; }
.card-value.good  { color: var(--online-text); text-shadow: 0 0 14px var(--halo-good); }
.card-value.fair  { color: var(--warn-text);   text-shadow: 0 0 14px var(--halo-fair); }
.card-value.poor  { color: var(--danger-text); text-shadow: 0 0 14px var(--halo-poor); }
.card-value.dim   { color: var(--text3); }

.card-desc {
	font-size: 0.74rem;
	color: var(--text3);
	line-height: 1.45;
}

/* ── Trend charts ────────────────────────────────────────────────────────── */
.charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 14px;
}

.chart-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 24px var(--glow2);
}

.chart-box.tall { padding: 16px 16px 8px; }

.chart-title {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text2);
	margin-bottom: 10px;
}

.chart-box canvas {
	width: 100%;
	height: 120px;
	display: block;
}

.chart-box canvas.h150 { height: 150px; }
.chart-box canvas.h180 { height: 180px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* On narrow screens the outlook moves from a 4th column to its own row. */
.outlook-row { display: none; }

@media (max-width: 640px) {
	.band-table th:nth-child(4),
	.band-row td:nth-child(4) { display: none; }

	.outlook-row      { display: table-row; }
	.outlook-row td   { padding-top: 0; }
	.band-row td      { border-bottom: none; }
	.outlook-cell     { max-width: none; }
}