/* Energytron additions. The look itself comes from /shared/style.css (the Budgetron styles). */
.panel-neutral, .panel-live { border-top-color: var(--link); }
.panel-neutral h2, .panel-live h2 { color: var(--link); }

/* Fourth totals item, and a two-column totals bar on narrow screens */
.summary-cover { border-left: 4px solid var(--link); padding-left: 0.6rem; }
@media (max-width: 39.99rem) {
	.summary { grid-template-columns: repeat(2, 1fr); }
}

/* Dials */
.gauge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.total-gauges { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.gauge {
	--g: var(--text);
	margin: 0;
	padding: 0.5rem 0.5rem 0.6rem;
	text-align: center;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.panel-income .gauge { --g: var(--income); }
.panel-expenditure .gauge { --g: var(--expenditure); }
.gauge.g-gen { --g: var(--income); }
.gauge.g-con { --g: var(--expenditure); }
.gauge.g-gap { --g: var(--text); }
.gauge svg { display: block; width: 100%; height: auto; }
.g-track, .g-val { fill: none; stroke-width: 10; }
.g-track { stroke: var(--track); }
.g-val { stroke: var(--g); transition: stroke-dasharray 0.2s; }
.g-tick { stroke: var(--text); stroke-width: 2.5; }
.g-num {
	font: 700 15px var(--font);
	text-anchor: middle;
	fill: var(--text);
	font-variant-numeric: tabular-nums;
}
.gauge figcaption { font-weight: 700; line-height: 1.3; }
.gauge small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.gauge-note { color: var(--text-muted); font-style: italic; }
#conSliders .slider-grid { margin-bottom: 0.5rem; }

/* Live generation mix */
.mix-label { margin: 0.75rem 0 0.25rem; font-weight: 700; }
.mixbar {
	display: flex;
	height: 1.75rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 6px;
}
.mixbar span { display: block; min-width: 0; border-right: 1px solid var(--surface); }
.swatch {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 0.5rem;
	vertical-align: -0.1rem;
	border-radius: 3px;
}
.f-coalOil { background: #7a6f66; }
.f-gas     { background: #d9822b; }
.f-nuclear { background: #8e5bd1; }
.f-hydro   { background: #2f7fc9; }
.f-wind    { background: #1d9e75; }
.f-solar   { background: #e0b21a; }
.f-bio     { background: #5f9c3a; }
.f-other   { background: #8a96a3; }
.f-imports { background: #c04f8f; }
#liveBody .stats { margin-top: 1rem; }
#liveBody td { text-align: right; }

/* Sticky dial panels (they use the Budgetron's .flow-panel behaviour). Level 1 is the totals,
   level 2 the generation stations or consumption groups, level 3 each group's sectors. */
.dial-l2 { top: var(--flow2-top, 0px); z-index: 8; }
.dial-l3 { top: var(--flow3-top, 0px); z-index: 7; }
/* Every sticky dial is the same small fixed size (they used to stretch to fill the row, which made the big ones too tall) */
.dial-panel .gauge-grid, .dial-panel .total-gauges { grid-template-columns: repeat(auto-fill, 6.25rem); justify-content: start; gap: 0.4rem; margin: 0 0 0.5rem; }
.dial-panel .gauge { padding: 0.2rem 0.25rem 0.3rem; }
.dial-panel .gauge figcaption { font-size: 0.75rem; }
.dial-panel .gauge small { display: none; }
.dial-gen .gauge { --g: var(--income); }
.dial-con .gauge { --g: var(--expenditure); }
.gauge[data-reset] { cursor: pointer; }
.gauge[data-reset]:hover { border-color: var(--link); }
.gauge[data-reset]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }