/* SmartDrive layout and visualisation tokens. Oat owns controls and cards. */
:root {
 --bg:var(--background); --bg-alt:var(--faint); --surface:var(--card); --surface-2:var(--muted);
 --sd-border:var(--border); --sd-border-soft:var(--border);
 --text:var(--foreground); --text-dim:var(--muted-foreground); --text-faint:var(--faint-foreground);
 --font-body:var(--font-sans); --font-display:var(--font-sans);
 --eco:var(--primary); --eco-soft:var(--secondary); --ok:#187668; --err:var(--danger);
}
body { background:var(--background); }
.panel.card { margin-bottom:22px; }
.sd-gate-card.card { width:min(400px,calc(100vw - 32px)); }
.field[data-field] { margin-bottom:16px; }
.field input:not([type=checkbox]), .field select { width:100%; }
#forecast-tabs { display:block; }
.map-forecast-panel:not([open]) .map-forecast-body { display:none; }
.map-forecast-panel[open] .map-forecast-body { display:block; }
.map-forecast-toggle { padding:10px 12px; }
.map-forecast-body { padding:8px; }
.map-forecast-tabs { display:flex; }
.map-forecast-tabs button { flex:1; }
.sd-gate-card input { width:100%; }
.sd-gate-card button { margin-top:12px; width:100%; }
button.active:not([role=tab]) { background:var(--secondary); color:var(--secondary-foreground); }
.table { overflow-x:auto; }
@media(max-width:600px) { .panel.card { padding:16px; } }