/* Wide instrument panels retain their calibrated layout. Ordinary monitors,
   tablets and portrait screens reflow at readable sizes instead of shrinking. */
.display { transform:scale(var(--panel-scale,1)); }
@media (max-aspect-ratio: 11/5) {
  html { min-height:100%; }
  body { overflow:auto; }
  body:has(dialog[open]) { overflow:hidden; }
  .display { position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; min-height:100dvh; transform:none; padding:clamp(12px,2vw,28px); grid-template-rows:auto auto auto auto; gap:18px; overflow:visible; }
  .topbar,.header-status,.indicators { flex-wrap:wrap; }
  .topbar { gap:18px; }
  .header-status { justify-content:flex-end; }
  .primary-instruments { min-height:350px; grid-template-columns:1fr 1fr 1fr; }
  .display[data-layout] .primary-instruments { grid-template-columns:1fr 1fr 1fr; }
  .tach,.speed { min-height:350px; overflow:hidden; }
  .tach-dial { max-width:100%; }
  #speed-digits { font-size:clamp(130px,13vw,234px); }
  .sensor-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sensor-card { min-width:0; }
  .dashboard-footer { flex-wrap:wrap; align-items:center; }
  .meth-summary { min-height:66px; }
  .module-strip { flex-wrap:wrap; }
  .dashboard-nav { flex-wrap:wrap; }
  .dashboard-nav button { min-height:52px; }
  .workspace-dialog { left:calc(var(--viewport-left,0px) + 12px); top:calc(var(--viewport-top,0px) + 12px); width:calc(var(--viewport-width,100vw) - 24px); height:calc(var(--viewport-height,100dvh) - 24px); transform:none; border-radius:14px; }
  .dialog-header { padding:14px 20px; flex-wrap:wrap; gap:12px; }
  .dialog-header > div:first-child { flex:1; min-width:0; }
  .dialog-header h2 { font-size:28px; }
  .dialog-header p { overflow-wrap:anywhere; }
  .close-button { margin-left:auto; }
  .control-tabs { flex-basis:190px; padding:12px; overflow:auto; }
  .control-tabs button { padding:14px 10px; min-height:48px; }
  .control-panels,.driver-panel { padding:18px; }
  .setting-card { min-width:0; }
  .settings-grid,.driver-panel .settings-grid,.trip-workspace,.fuel-workspace,.alert-workspace,.ops-columns { height:auto; align-items:start; }
  .driver-panel .settings-grid { gap:16px; }
  .fuel-workspace { grid-template-columns:1.2fr 1fr; }
  .race-body,.appearance-body,.appearance-gallery { overflow:auto; padding:18px; align-content:start; }
  .race-body { grid-template-columns:1fr 1fr; }
  .race-results { min-height:300px; }
  .race-timer strong { font-size:clamp(60px,8vw,112px); }
  .appearance-tabs { margin:0; flex-wrap:wrap; }
  .appearance-tabs button { font-size:16px; padding:10px 14px; }
  .appearance-body { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .appearance-sample { grid-column:1 / -1; }
  .appearance-gallery > * { flex-shrink:0; }
  .gallery-heading { flex-wrap:wrap; gap:12px; }
  .look-collections { flex-wrap:wrap; margin:0; }
  .look-grid { flex:none; grid-auto-rows:minmax(155px,auto); grid-template-rows:none; }
  .look-card { min-height:155px; }
  .look-art { gap:20px; }
  .background-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .health-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .knock-summary { flex-wrap:wrap; gap:20px; }
  .knock-body { padding:18px; }
  .knock-graph-wrap { flex:none; height:280px; }
  .diagnostics-toolbar { flex-wrap:wrap; padding:12px 18px; gap:10px; }
  .diagnostics-toolbar input { width:auto; min-width:0; flex:1; }
  .diagnostics-toolbar > span { overflow-wrap:anywhere; }
  .diagnostics-body { padding:0 18px 18px; }
  .command-result { padding:12px 18px; min-height:48px; max-height:80px; }
  .review-host { height:auto; min-height:480px; }
  .review { height:auto; min-height:480px; }
  .review-body { grid-template-columns:220px minmax(0,1fr); }
  .review svg { flex:none; height:240px; }
  .review-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .review-toolbar,.review-options { flex-wrap:wrap; }
  .review-sidebar { max-height:400px; }
  .splash-wordmark strong { max-width:100%; font-size:clamp(28px,7vw,80px); }
  .splash-wordmark { padding:24px; max-width:100%; }
  .chime-controls,.driver-panel .chime-volume { flex-wrap:wrap; }
}
@media (max-aspect-ratio: 11/5) and (max-width: 1200px) {
  .primary-instruments,.display[data-layout] .primary-instruments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .speed { border-right:0; }
  .secondary-instruments { grid-column:1 / -1; grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:24px; padding:24px; border-top:1px solid var(--line); }
  .boost-gauge { border:0; }
  .fuel-workspace,.alert-workspace,.ops-columns,.driver-panel .settings-grid { grid-template-columns:1fr; }
  .health-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .look-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .race-body { grid-template-columns:1fr; }
  .race-main { padding:18px; }
  .race-history { max-height:260px; }
}
@media (max-aspect-ratio: 11/5) and (max-width: 900px) {
  .control-workspace { flex-direction:column; }
  .control-tabs { display:flex; flex-wrap:wrap; flex:none; gap:6px; padding:10px; border-right:0; border-bottom:1px solid var(--line); max-height:145px; }
  .control-tabs button { width:auto; flex:1 0 auto; margin:0; padding:10px; font-size:14px; }
  .control-tabs p { display:none; }
  .appearance-body,.settings-grid,.trip-workspace { grid-template-columns:1fr; }
  .appearance-sample { grid-column:auto; }
  .look-art { gap:14px; }
  .look-caption strong { font-size:18px; }
  .background-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .appearance-tabs { order:3; flex-basis:100%; }
  .appearance-tabs button { flex:1; }
  .dialog-header h2 { font-size:24px; }
  .dialog-header p { font-size:12px; }
  .close-button { min-height:44px; padding:8px 12px; gap:10px; }
  .review-body { grid-template-columns:1fr; }
  .review-sidebar { max-height:170px; }
  .review-plots { min-height:330px; }
  .knock-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .knock-status-pill { margin-left:0; }
}
@media (max-aspect-ratio: 11/5) and (max-width: 600px) {
  .header-status { justify-content:flex-start; }
  .indicators { gap:6px; }
  .indicator { font-size:12px; padding:6px 8px; }
  .primary-instruments,.display[data-layout] .primary-instruments { grid-template-columns:minmax(0,1fr); }
  .tach { border-right:0; border-bottom:1px solid var(--line); }
  #speed-digits { font-size:190px; }
  .secondary-instruments { grid-template-columns:1fr; padding:20px; gap:26px; }
  .sensor-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sensor-card { padding:14px 12px; }
  .sensor-card h2 { font-size:16px; }
  .sensor-card .quality-label { font-size:9px; }
  .sensor-reading { flex-wrap:wrap; gap:4px; }
  .sensor-reading > span:first-child { font-size:44px; }
  .sensor-reading .unit { font-size:14px; }
  .meth-summary { min-width:0; width:100%; flex-wrap:wrap; gap:14px; padding:12px; }
  .dashboard-nav { width:100%; }
  .dashboard-nav button { flex:1 0 auto; justify-content:center; }
  .dialog-header { padding:12px; }
  .dialog-header h2 { font-size:21px; }
  .dialog-header .eyebrow { font-size:9px; letter-spacing:1px; }
  .control-panels,.driver-panel,.appearance-gallery,.appearance-body,.race-body,.knock-body { padding:12px; }
  .setting-card,.driver-panel .setting-card,.appearance-body .setting-card { padding:14px; }
  .look-grid { grid-template-columns:1fr; }
  .background-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .gallery-heading h3 { font-size:18px; }
  #appearance-current { max-width:100%; text-align:left; }
  .swatches { gap:8px; flex-wrap:wrap; }
  .appearance-inline { flex-wrap:wrap; }
  .appearance-inline label { flex-basis:100%; }
  .health-cards { gap:10px; }
  .health-cards strong { font-size:20px; }
  .fuel-fields,.ops-fields,.layout-instruments { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .alert-setting-row { flex-wrap:wrap; }
  .alert-number-fields { width:100%; }
  .alert-number-fields label { flex:1; min-width:0; }
  .alert-number-fields input { width:100%; }
  .driver-panel .compact-label { flex-wrap:wrap; }
  .brightness-settings { gap:14px; }
  .trip-distance { font-size:56px; }
  .economy-cards { grid-template-columns:1fr; }
  .race-splits { gap:8px; }
  .race-splits > div { padding:10px; }
  .race-splits strong { font-size:24px; }
  .race-heading { flex-wrap:wrap; }
  .race-timer { gap:10px; }
  .race-timer strong { letter-spacing:-2px; }
  .wifi-details { grid-template-columns:1fr; gap:8px; }
  .wifi-details dd { margin-bottom:10px; }
  .diagnostics-toolbar input { width:100%; flex-basis:100%; }
  .diagnostics-body { padding:0 12px 12px; }
  .diagnostics-toolbar > span { margin-left:0; }
  .knock-legend { flex-wrap:wrap; gap:10px; }
  .review-stats { gap:8px; }
  .review-stats > div { padding:10px; }
  .review-stats strong { font-size:20px; }
  .review-toolbar select { flex-basis:100%; }
  .ops-status-row { font-size:13px; gap:10px; }
  .ops-panel .control-note { font-size:13px; }
  #wheel-hint { white-space:normal; width:max-content; max-width:100%; text-align:center; }
}

@media (max-aspect-ratio: 11/5) and (min-width: 1500px) {
  .appearance-body { grid-template-columns:1fr 1fr .85fr; }
  .appearance-sample { grid-column:auto; }
}

/* Keep the full cluster visible on common 720p/768p bench monitors. */
@media (max-aspect-ratio: 11/5) and (min-width: 1201px) and (max-height: 900px) {
  .display { padding:16px; gap:14px; }
  .topbar { gap:10px; }
  .indicators { gap:6px; }
  .indicator { font-size:12px; padding:6px 8px; }
  .turn-cluster { width:34px; padding:4px; }
  .turn-cluster svg { width:26px; }
  .header-status { gap:8px; }
  .connection-badge { font-size:11px; padding:8px; }
  .drive-quick { gap:6px; }
  .drive-quick button { font-size:12px; padding:8px; }
  #clock-time { font-size:22px; min-width:68px; }
  .primary-instruments,.tach,.speed { min-height:300px; }
  .tach-readout { top:136px; }
  #rpm-value { font-size:90px; }
  .sensor-row { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
  .sensor-card { padding:14px 12px; }
  .sensor-card h2 { font-size:16px; }
  .sensor-card .quality-label { font-size:9px; }
  .sensor-reading > span:first-child { font-size:44px; }
  .sensor-reading .unit { font-size:14px; }
  .dashboard-footer { gap:12px; }
  .meth-summary { min-width:340px; gap:14px; }
  .dashboard-nav { gap:6px; }
  .dashboard-nav button { font-size:14px; padding:0 10px; }
  .module-strip { gap:8px; }
}

/* Keep indicators on the screen centerline, independent of side-group widths. */
@media (max-aspect-ratio:11/5) and (max-width:1200px) {
  .topbar { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"indicators indicators" "status actions"; }
}
@media (max-aspect-ratio:11/5) and (max-width:600px) {
  .topbar { grid-template-columns:minmax(0,1fr); grid-template-areas:"indicators" "status" "actions"; }
  .topbar > .header-status,.topbar > .drive-quick { justify-self:center; justify-content:center; }
  .topbar > .drive-quick { flex-wrap:wrap; max-width:100%; min-width:0; }   /* Four buttons do not fit 320 px with every font */
}