/*
=========================================================
PEGGY SUE — 5-INCH DISPLAY OVERRIDES
=========================================================

Target:
  800x480 landscape motorcycle touchscreen

Purpose:
  Short-screen layout overrides only.

Core desktop/tablet layouts remain in their normal files.

Consolidated:
  20260922-105011
=========================================================
*/
/*
=========================================================
DASH — CLASSIC TWIN DIALS
=========================================================
*/


/* PEGGY_CLASSIC_5INCH_OPTIMIZATION_V1
   Classic Dials riding layout for short landscape displays.
   Targets the final 5-inch Peggy Sue screen without altering
   normal desktop/laptop presentation.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  body.peggy-dash-focus #page-dash {
    min-height: 100vh;
    padding:
      3px 4px 3px;
  }

  body.peggy-dash-focus #dashV2Root {
    min-height: 0;
    height:
      calc(100vh - 6px);
  }

  body.peggy-dash-focus
  #dashV2Root:has(.cd2-shell) {
    min-height: 0;
  }


  /* -----------------------------------------------
     CLASSIC SHELL
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-shell {
    box-sizing: border-box;

    min-height: 0;
    height: 100%;

    padding:
      3px 6px 4px;

    border-radius: 9px;

    display: grid;

    grid-template-rows:
      22px
      minmax(0, 1fr)
      43px;
  }


  /* -----------------------------------------------
     TOP INDICATORS
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-indicators {
    height: 22px;

    align-items: center;

    gap: 5px;
  }

  body.peggy-dash-focus .cd2-indicator {
    min-width: 35px;

    padding:
      2px 5px;

    font-size: .43rem;
  }


  /* -----------------------------------------------
     MAIN TWO-GAUGE CLUSTER
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-cluster {
    min-height: 0;

    grid-template-columns:
      minmax(0, 1fr)
      54px
      minmax(0, 1fr);

    align-items: center;
  }

  body.peggy-dash-focus .cd2-dial {
    width:
      min(100%, 350px);

    max-height: 100%;

    justify-self: center;
  }

  body.peggy-dash-focus .cd2-svg {
    max-height: 100%;
  }


  /* -----------------------------------------------
     CENTER SECTION
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-center {
    min-width: 0;
  }

  body.peggy-dash-focus .cd2-name {
    font-size: .38rem;

    letter-spacing: .10em;
  }

  body.peggy-dash-focus .cd2-center-rule {
    width: 24px;

    margin:
      6px auto;
  }

  body.peggy-dash-focus .cd2-center-source {
    font-size: .34rem;

    letter-spacing: .03em;

    line-height: 1.15;

    overflow-wrap: anywhere;
  }


  /* -----------------------------------------------
     GAUGE FACE TEXT
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-number {
    font-size: 16px;
  }

  body.peggy-dash-focus .cd2-title {
    font-size: 10px;
  }

  body.peggy-dash-focus .cd2-digital {
    font-size: 34px;
  }

  body.peggy-dash-focus .cd2-unit {
    font-size: 9px;
  }


  /* -----------------------------------------------
     BOTTOM RIDING DATA
     ----------------------------------------------- */

  body.peggy-dash-focus .cd2-bottom {
    height: 43px;

    margin-top: 0;

    align-self: end;
  }

  body.peggy-dash-focus .cd2-bottom > div {
    min-width: 0;

    padding:
      5px 2px 3px;
  }

  body.peggy-dash-focus .cd2-bottom span {
    font-size: .39rem;

    letter-spacing: .055em;
  }

  body.peggy-dash-focus .cd2-bottom strong {
    margin-top: 2px;

    font-size: .79rem;

    line-height: 1.05;

    white-space: nowrap;
  }


  /* -----------------------------------------------
     SMALLER RIDING MENU BUTTON
     ----------------------------------------------- */

  body.peggy-dash-focus .dash-menu-button {
    top: 4px;
    right: 4px;

    min-width: 48px;
    min-height: 32px;

    padding:
      4px 7px;

    border-radius: 7px;

    font-size: .58rem;
  }
}

/* PEGGY_CLASSIC_5INCH_POLISH_V1
   Small readability polish for the 800x480 Classic Twin Dials view.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  body.peggy-dash-focus .cd2-name {
    font-size: .44rem;
    letter-spacing: .11em;
  }

  body.peggy-dash-focus .cd2-center-source {
    font-size: .39rem;
    color: rgba(190,198,206,.52);
  }

  body.peggy-dash-focus .cd2-center-rule {
    margin: 5px auto;
  }

  body.peggy-dash-focus .cd2-bottom {
    transform: translateY(-3px);
  }

  body.peggy-dash-focus .cd2-bottom span {
    font-size: .43rem;
    color: rgba(195,202,209,.52);
  }

  body.peggy-dash-focus .cd2-bottom strong {
    font-size: .86rem;
    font-weight: 700;
  }
}


/*
=========================================================
DASHBOARD PAGES — 800x480
=========================================================
*/


/* PEGGY_RIDE_5INCH_OPTIMIZATION_V1
   Compact quick-glance Ride layout for the 800x480 bike display.
   Trip Recorder remains available below the fold.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  /* Keep fixed navigation from covering Ride data */
  #page-ride {
    padding-bottom: 82px;
  }


  /* -----------------------------------------------
     PAGE HEADING
     ----------------------------------------------- */

  #page-ride > .section-title {
    margin:
      2px 0 5px;

    font-size: .88rem;
  }


  /* -----------------------------------------------
     GPS SPEED + TRIP
     ----------------------------------------------- */

  #page-ride .ride-primary-grid {
    gap: 7px;
  }

  #page-ride .ride-primary-card {
    box-sizing: border-box;

    min-height: 0;
    height: 158px;

    padding:
      8px 10px;
  }

  #page-ride .ride-primary-card .label {
    font-size: .60rem;
  }

  #page-ride .ride-primary-card .value {
    margin-top: 4px;
  }

  #page-ride .ride-primary-card.hero-speed .value {
    font-size: 3.7rem;
    line-height: .88;
  }

  #page-ride .ride-primary-card:not(.hero-speed)
  .value {
    font-size: 2rem;
    line-height: 1;
  }

  #page-ride .ride-primary-card .unit {
    font-size: .72rem;
  }

  #page-ride .ride-primary-card .status {
    margin-top: 7px;

    padding:
      4px 7px;

    font-size: .58rem;
  }


  /* -----------------------------------------------
     HEADING / TEMP / VOLTAGE
     ----------------------------------------------- */

  #page-ride .ride-info-strip {
    gap: 6px;

    margin-top: 6px;
  }

  #page-ride .ride-info-item {
    box-sizing: border-box;

    min-height: 66px;

    padding:
      6px 9px;

    border-radius: 8px;
  }

  #page-ride .ride-info-item .label {
    font-size: .54rem;
  }

  #page-ride .ride-info-value {
    margin-top: 3px;

    font-size: 1.25rem;
  }

  #page-ride .ride-info-value .unit {
    font-size: .62rem;
  }

  #page-ride .ride-info-status {
    margin-top: 3px;

    font-size: .50rem;

    line-height: 1.05;
  }


  /* -----------------------------------------------
     TRIP RECORDER BELOW QUICK-GLANCE AREA
     ----------------------------------------------- */

  #page-ride .ride-trip-recorder {
    margin-top: 7px;
  }
}

/* PEGGY_LIGHTS_5INCH_OPTIMIZATION_V1
   Compact riding controls for the 800x480 Lights page.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-lights {
    padding-bottom: 84px;
  }


  /* -----------------------------------------------
     PAGE TITLE / SECTION HEADINGS
     ----------------------------------------------- */

  #page-lights > .section-title {
    margin:
      2px 0 4px;

    font-size: .88rem;
  }

  #page-lights > .report-heading {
    margin:
      4px 0 3px;

    font-size: .56rem;

    letter-spacing: .10em;
  }


  /* -----------------------------------------------
     WLED CONTROLLER
     ----------------------------------------------- */

  #page-lights .wled-summary-card {
    box-sizing: border-box;

    min-height: 0 !important;

    padding:
      7px 10px;

    border-radius: 9px;
  }

  #page-lights .wled-summary-card > .label {
    font-size: .52rem;
  }

  #page-lights .wled-summary-row {
    align-items: center;

    gap: 8px;

    margin-top: 2px;
  }

  #page-lights .wled-summary-title {
    margin-top: 2px;

    font-size: 1.2rem !important;

    line-height: 1;
  }

  #page-lights #wledStatus {
    margin-top: 4px;

    padding:
      3px 6px;

    font-size: .52rem;
  }

  #page-lights .wled-power-button {
    min-width: 126px;
    min-height: 42px;

    padding:
      6px 12px;

    font-size: .76rem;
  }

  #page-lights #wledCurrentState {
    margin-top: 3px;

    font-size: .49rem;

    line-height: 1.05;
  }


  /* -----------------------------------------------
     QUICK ACTIONS
     ----------------------------------------------- */

  #page-lights .wled-quick-card {
    min-height: 0 !important;

    padding:
      6px;
  }

  #page-lights .wled-quick-controls {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 7px;

    margin: 0;
  }

  #page-lights .wled-quick-controls
  .led-mode-button {
    width: 100%;

    min-width: 0;
    min-height: 58px;

    margin: 0;

    padding:
      7px 5px;

    font-size: .72rem;

    font-weight: 900;
  }


  /* -----------------------------------------------
     EVERYTHING BELOW QUICK ACTIONS
     ----------------------------------------------- */

  #page-lights .wled-zone-card {
    margin-top: 0;
  }
}

/* PEGGY_SHOW_5INCH_OPTIMIZATION_V1
   Compact SHOW controls for the 800x480 bike display.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-show {
    padding-bottom: 84px;
  }


  /* -----------------------------------------------
     PAGE / SECTION SPACING
     ----------------------------------------------- */

  #page-show > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-show .show-page-grid {
    gap: 4px;
  }

  #page-show .show-page-grid
  > .report-heading {
    margin: 3px 0 2px;

    font-size: .54rem;
    letter-spacing: .10em;
  }

  #page-show .show-page-grid
  > .report-heading:not(:first-child) {
    margin-top: 4px;
  }


  /* -----------------------------------------------
     FPP PLAYER STATUS
     ----------------------------------------------- */

  #page-show .fpp-player-card {
    min-height: 0 !important;

    padding: 7px 10px;

    border-radius: 9px;
  }

  #page-show .fpp-player-card .label {
    font-size: .50rem;
  }

  #page-show .fpp-player-card .value {
    margin-top: 2px !important;

    font-size: 1.15rem !important;

    line-height: 1;
  }

  #page-show #fppPlayerStatus {
    margin-top: 4px;

    padding: 3px 6px;

    font-size: .50rem;
  }

  #page-show #fppVersion {
    margin-top: 3px !important;

    font-size: .48rem;

    line-height: 1.05;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * Detailed FPP warning remains available on larger
   * screens. Hide it in the quick riding view.
   */
  #page-show #fppWarning {
    display: none;
  }


  /* -----------------------------------------------
     AUDIO / VOLUME
     ----------------------------------------------- */

  #page-show .fpp-volume-card {
    min-height: 0 !important;

    padding: 6px 9px;
  }

  #page-show .fpp-volume-header {
    align-items: center;
  }

  #page-show .fpp-volume-card .label {
    font-size: .50rem;
  }

  #page-show .fpp-volume-value {
    margin-top: 1px;

    font-size: 1.25rem;
  }

  #page-show .fpp-mute-button {
    min-width: 92px;
    min-height: 38px;

    padding: 5px 9px;

    font-size: .68rem;
  }

  #page-show .fpp-volume-controls {
    margin-top: 5px;

    gap: 6px;
  }

  #page-show .fpp-volume-step {
    min-width: 42px;
    min-height: 38px;

    padding: 4px;

    font-size: 1.1rem;
  }

  #page-show .fpp-volume-slider {
    min-height: 38px;
  }

  #page-show #fppVolumeMessage {
    display: none;
  }


  /* -----------------------------------------------
     ONE-TOUCH SHOWS
     ----------------------------------------------- */

  #page-show .quick-show-card {
    min-height: 0 !important;

    padding: 6px 8px;
  }

  #page-show .quick-show-card > .label {
    font-size: .50rem;
  }

  #page-show .quick-scene-grid {
    margin-top: 5px;

    gap: 6px;
  }

  #page-show .quick-scene-grid button {
    min-height: 44px;

    padding: 5px 7px;

    font-size: .62rem;
  }

  #page-show .quick-show-actions {
    margin-top: 6px;
  }

  #page-show .show-blackout-button {
    min-height: 42px;

    padding: 6px 10px;

    font-size: .64rem;
  }

  #page-show #quickShowMessage {
    display: none;
  }
}

/* PEGGY_BIKE_5INCH_OPTIMIZATION_V1
   Compact BIKE monitoring layout for 800x480.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-bike {
    padding-bottom: 84px;
  }

  #page-bike > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-bike > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;
    letter-spacing: .10em;
  }

  #page-bike .bike-status-grid {
    gap: 6px;
  }

  #page-bike .bike-status-grid .card {
    box-sizing: border-box;

    min-height: 0;
    height: 108px;

    padding: 8px 10px;
  }

  #page-bike .bike-status-grid .label {
    font-size: .56rem;
  }

  #page-bike .bike-status-grid .value {
    margin-top: 6px;

    font-size: 1.55rem;

    line-height: 1;
  }

  #page-bike .bike-status-grid .unit {
    font-size: .68rem;
  }

  #page-bike .bike-status-grid .status {
    margin-top: 7px;

    padding: 3px 6px;

    font-size: .50rem;
  }

  #page-bike .bike-system-strip {
    margin-top: 0;
  }

  #page-bike .bike-system-strip .card {
    min-height: 0 !important;

    padding: 8px 10px;
  }
}

/* PEGGY_DATA_5INCH_OPTIMIZATION_V1
   Compact DATA overview for the 800x480 bike display.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-data {
    padding-bottom: 84px;
  }

  #page-data > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-data > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;
    letter-spacing: .10em;
  }


  /* -----------------------------------------------
     CONNECTION CARD
     ----------------------------------------------- */

  #page-data .data-connection-card {
    min-height: 0 !important;

    margin-bottom: 4px;

    padding: 7px 10px;
  }

  #page-data .data-connection-card .label {
    font-size: .52rem;
  }

  #page-data .data-link-title {
    margin-top: 2px;

    font-size: 1.18rem;

    line-height: 1;
  }

  #page-data .data-connection-card .status {
    margin-top: 4px;

    padding: 3px 6px;

    font-size: .50rem;
  }

  #page-data .data-connection-card .small-line {
    margin-top: 3px;

    font-size: .48rem;

    line-height: 1.05;
  }


  /* -----------------------------------------------
     LIVE OVERVIEW GAUGES
     ----------------------------------------------- */

  #page-data .gauge-cluster {
    gap: 6px;

    margin-top: 0;
  }

  #page-data .gauge-card {
    min-height: 0 !important;

    padding: 4px 4px 3px;
  }

  #page-data .gauge {
    width: 112px;
    height: 112px;

    margin:
      0 auto 2px;
  }

  #page-data .gauge-number {
    font-size: 1.45rem;
  }

  #page-data .gauge-unit {
    font-size: .50rem;
  }

  #page-data .gauge-name {
    margin-top: 1px;

    font-size: .52rem;
  }

  #page-data .gauge-scale {
    margin-top: 1px;

    font-size: .44rem;
  }


  /* -----------------------------------------------
     DETAILS BELOW
     ----------------------------------------------- */

  #page-data .data-value-grid {
    gap: 6px;
  }
}

/* PEGGY_STATS_5INCH_OPTIMIZATION_V1
   Compact STATS overview for 800x480.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-stats {
    padding-bottom: 84px;
  }

  #page-stats > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-stats .stats-periods {
    gap: 5px;
    margin-bottom: 5px;
  }

  #page-stats .stats-periods button {
    min-height: 34px;

    padding: 4px 3px;

    font-size: .68rem;
  }

  #page-stats #statsStatus {
    margin: 0 0 5px;

    padding: 3px 6px;

    font-size: .52rem;
  }

  #page-stats > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;
    letter-spacing: .10em;
  }

  #page-stats .stats-clean-grid {
    gap: 6px;
  }

  #page-stats .stats-card {
    box-sizing: border-box;

    min-height: 0;
    height: 74px;

    padding: 7px 9px;
  }

  #page-stats .stats-card .label {
    font-size: .52rem;
  }

  #page-stats .stats-value {
    margin-top: 3px;

    font-size: 1.35rem;

    line-height: 1;
  }

  #page-stats .stats-unit {
    font-size: .60rem;
  }

  #page-stats #statsPeriodName {
    font-size: 1rem !important;
  }

  #page-stats .stats-chart-card {
    margin-top: 5px;
  }
}

/* PEGGY_REPORTS_5INCH_OPTIMIZATION_V1
   Compact Reports overview for the 800x480 bike display.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-reports {
    padding-bottom: 84px;
  }

  #page-reports > .section-title {
    margin: 2px 0 4px;

    font-size: .88rem;
  }

  #page-reports > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;

    letter-spacing: .10em;
  }


  /* -----------------------------------------------
     REPORTS SUMMARY
     ----------------------------------------------- */

  #page-reports .reports-summary-card {
    min-height: 0 !important;

    padding: 7px 10px;
  }

  #page-reports .reports-summary-card .label {
    font-size: .52rem;
  }

  #page-reports #vehicleHistoryTitle {
    margin-top: 2px;

    font-size: 1.18rem !important;

    line-height: 1;
  }

  #page-reports #reportDatabaseStatus {
    margin-top: 4px;

    padding: 3px 6px;

    font-size: .50rem;
  }

  #page-reports .reports-summary-card .small-line {
    margin-top: 3px;

    font-size: .47rem;

    line-height: 1.08;
  }


  /* -----------------------------------------------
     CURRENT TRIP
     ----------------------------------------------- */

  #page-reports
  .reports-current-trip-grid {
    gap: 6px;
  }

  #page-reports
  .reports-current-trip-grid .card {
    box-sizing: border-box;

    min-height: 0;

    height: 72px;

    padding: 7px 9px;
  }

  #page-reports
  .reports-current-trip-grid .label {
    font-size: .51rem;
  }

  #page-reports
  .reports-current-trip-grid
  .report-mini-value {
    margin-top: 3px;

    font-size: 1.2rem;

    line-height: 1;
  }

  #page-reports
  .reports-current-trip-grid .unit {
    font-size: .58rem;
  }
}

/* PEGGY_MAINTENANCE_5INCH_OPTIMIZATION_V1
   Compact service-status overview for 800x480.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-maintenance {
    padding-bottom: 84px;
  }

  #page-maintenance > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-maintenance > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;
    letter-spacing: .10em;
  }

  #page-maintenance
  .maintenance-status-grid {
    gap: 6px;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  #page-maintenance
  .maintenance-status-grid .card {
    box-sizing: border-box;

    min-height: 0;
    height: 100px;

    padding: 7px 9px;
  }

  #page-maintenance
  .maintenance-status-grid .label {
    font-size: .52rem;
  }

  #page-maintenance
  .maintenance-status-grid
  .report-mini-value {
    margin-top: 4px;

    font-size: 1.35rem;

    line-height: 1;
  }

  #page-maintenance
  .maintenance-status-grid .unit {
    font-size: .60rem;
  }

  #page-maintenance
  .maintenance-detail {
    margin-top: 4px;

    font-size: .48rem;

    line-height: 1.05;
  }

  #page-maintenance
  .maintenance-status-grid .status {
    margin-top: 5px;

    padding: 3px 6px;

    font-size: .48rem;
  }

  #page-maintenance
  .maintenance-odometer-card {
    margin-top: 0;
  }
}

/* PEGGY_SYSTEM_5INCH_OPTIMIZATION_V1
   Compact diagnostics overview for 800x480.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-check {
    padding-bottom: 84px;
  }

  #page-check > .section-title {
    margin: 2px 0 4px;
    font-size: .88rem;
  }

  #page-check > .report-heading {
    margin: 4px 0 3px;

    font-size: .56rem;
    letter-spacing: .10em;
  }


  /* -----------------------------------------------
     SYSTEM CHECK HEADER
     ----------------------------------------------- */

  #page-check .diagnostic-toolbar {
    gap: 6px;

    margin-bottom: 6px;
  }

  #page-check .diagnostic-overall {
    padding: 6px 9px;

    font-size: .72rem;
  }

  #page-check #diagnosticChecked,
  #page-check #diagnosticSummary {
    font-size: .60rem;
  }


  /* -----------------------------------------------
     FILTER BUTTONS
     ----------------------------------------------- */

  #page-check .diagnostic-filter-bar {
    gap: 5px;

    margin-bottom: 6px;
  }

  #page-check .diagnostic-filter-bar button {
    min-height: 32px;

    padding: 4px 4px;

    font-size: .58rem;
  }


  /* -----------------------------------------------
     DIAGNOSTIC GROUPS
     ----------------------------------------------- */

  #page-check .diagnostic-category {
    margin-bottom: 6px;
  }

  #page-check .diagnostic-category-header {
    min-height: 34px;

    padding: 5px 7px;

    gap: 5px;
  }

  #page-check .diagnostic-category-title {
    font-size: .63rem;
  }

  #page-check .diagnostic-category-counts {
    font-size: .54rem;
  }

  #page-check .diagnostic-category-grid {
    gap: 6px;

    padding-top: 5px;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* -----------------------------------------------
     INDIVIDUAL DIAGNOSTIC CARDS
     ----------------------------------------------- */

  #page-check .diagnostic-card {
    min-height: 0 !important;

    padding: 7px 8px;

    border-left-width: 4px;
  }

  #page-check .diagnostic-heading {
    gap: 5px;
  }

  #page-check .diagnostic-card .label {
    font-size: .56rem;
  }

  #page-check .diagnostic-state {
    font-size: .56rem;
  }

  #page-check .diagnostic-detail {
    margin-top: 4px;

    font-size: .58rem;

    line-height: 1.12;
  }

  #page-check .diagnostic-help-button {
    width: 28px !important;
    min-width: 28px !important;

    height: 28px !important;
    min-height: 28px !important;

    flex-basis: 28px !important;

    font-size: .78rem !important;

    line-height: 26px !important;
  }

  #page-check .diagnostic-help-panel {
    margin-top: 6px;

    padding: 7px;

    font-size: .60rem;

    line-height: 1.2;
  }
}

/* PEGGY_SETTINGS_5INCH_OPTIMIZATION_V1
   Compact Settings navigation for the 800x480 bike display.
   Opened controls remain touch-friendly.
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  #page-config {
    padding-bottom: 84px;
  }


  /* -----------------------------------------------
     PAGE TITLE
     ----------------------------------------------- */

  #page-config > h2 {
    margin:
      2px 0 5px;

    font-size: 1rem;
  }


  /* -----------------------------------------------
     INTRO / STATUS
     ----------------------------------------------- */

  #page-config .config-intro {
    min-height: 0 !important;

    padding:
      7px 10px;

    margin-bottom: 5px;
  }

  #page-config .config-intro .label {
    font-size: .50rem;

    letter-spacing: .10em;
  }

  #page-config .config-heading {
    margin-top: 2px;

    font-size: .78rem;

    line-height: 1;
  }

  #page-config .config-intro .small-line {
    margin-top: 3px;

    font-size: .47rem;

    line-height: 1.05;
  }

  #page-config #configSaveStatus {
    margin-top: 4px;

    padding:
      3px 6px;

    font-size: .50rem;
  }


  /* -----------------------------------------------
     CATEGORY HEADINGS
     ----------------------------------------------- */

  #page-config > .report-heading {
    margin:
      5px 0 3px;

    font-size: .54rem;

    letter-spacing: .10em;
  }


  /* -----------------------------------------------
     COLLAPSIBLE SETTINGS SECTIONS
     ----------------------------------------------- */

  #page-config .config-section {
    min-height: 0 !important;

    margin-bottom: 5px;

    padding: 0 !important;
  }

  #page-config .config-section > summary {
    min-height: 36px;

    box-sizing: border-box;

    padding:
      8px 10px;

    font-size: .68rem;

    line-height: 1;

    cursor: pointer;
  }

  #page-config .config-section[open] > summary {
    margin-bottom: 4px;
  }


  /* -----------------------------------------------
     OPEN SECTION CONTENT
     ----------------------------------------------- */

  #page-config .config-section-grid {
    gap: 6px;

    padding:
      0 6px 6px;
  }

  #page-config .config-card {
    min-height: 0 !important;

    padding:
      8px 9px;
  }

  #page-config .config-card > .section-title {
    margin-bottom: 6px;

    font-size: .72rem;
  }

  #page-config .config-field {
    margin-bottom: 7px;
  }

  #page-config .config-field > span {
    font-size: .58rem;
  }

  #page-config .config-field select,
  #page-config .config-field input[type="text"],
  #page-config .config-field input[type="number"],
  #page-config .config-field input[type="time"],
  #page-config .config-field input[type="date"] {
    min-height: 38px;

    padding:
      5px 8px;

    font-size: .72rem;
  }

  #page-config .config-help,
  #page-config .config-card .small-line {
    font-size: .52rem;

    line-height: 1.15;
  }


  /* -----------------------------------------------
     PAGE VISIBILITY / ORDER CONTROLS
     ----------------------------------------------- */

  #page-config .config-check-grid {
    gap: 5px;
  }

  #page-config .config-check-grid label {
    min-height: 34px;

    padding:
      5px 7px;

    font-size: .58rem;
  }

  #page-config .config-order-list {
    gap: 5px;
  }


  /* -----------------------------------------------
     SAVE / RESET
     ----------------------------------------------- */

  #page-config .config-actions-card {
    min-height: 0 !important;

    padding:
      7px 8px;
  }

  #page-config .config-actions {
    gap: 6px;
  }

  #page-config .config-actions button {
    min-height: 40px;

    padding:
      6px 9px;

    font-size: .66rem;
  }
}

/*
=========================================================
PEGGY_EXTRA_DASH_5INCH_LAYOUTS_V1

800x480 landscape optimization for:

  Wild
  Future Bars
  Panoramic HUD
  Neon Reactor

CVO Custom and Modern Cluster are intentionally untouched.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {


  /* =====================================================
     WILD
     ===================================================== */

  .d2-wild {
    min-height: 440px !important;

    padding:
      30px 12px 7px !important;
  }

  .d2-wild-stage {
    width: min(470px, 86%);

    max-height: 310px;

    margin:
      -2px auto -8px;
  }

  .d2-wild-speed {
    font-size:
      clamp(5.8rem, 18vw, 8.2rem) !important;
  }

  .d2-wild-gear {
    right: 9%;
  }

  .d2-wild-rpm {
    left: 6%;
  }

  .d2-wild-gear strong {
    font-size: 2.6rem;
  }

  .d2-wild-rpm strong {
    font-size: 1.25rem;
  }

  .d2-wild .d2-info-strip {
    margin-top: -5px;

    min-height: 48px;
  }


  /* =====================================================
     FUTURE BARS
     ===================================================== */

  .fb-shell {
    min-height: 440px !important;

    padding:
      32px 11px 7px !important;
  }

  .fb-heading {
    min-height: 27px;

    padding:
      0 8px 4px;
  }

  .fb-rpm-panel {
    margin:
      5px 10px 0;
  }

  .fb-rpm-track {
    height: 13px;
  }

  .fb-rpm-scale {
    padding-top: 2px;
  }

  .fb-main {
    grid-template-columns:
      82px minmax(0, 1fr) 82px;

    gap: 5px;

    min-height: 225px;

    padding:
      0 4px;
  }

  .fb-vmeter-body {
    width: 28px;

    height: 126px;
  }

  .fb-vmeter-number {
    margin-top: 13px;

    font-size: .86rem;
  }

  .fb-speed-brackets {
    min-height: 166px;
  }

  .fb-speed-brackets::before,
  .fb-speed-brackets::after {
    top: 10px;

    bottom: 10px;
  }

  .fb-speed {
    font-size:
      clamp(4.9rem, 15vw, 6.4rem);
  }

  .fb-speed-unit {
    margin-top: 7px;
  }

  .fb-speed-source {
    margin-top: 4px;
  }

  .fb-bottom {
    gap: 5px;

    margin:
      -2px 5px 0;
  }

  .fb-data-card {
    min-height: 47px;

    padding:
      6px 7px 4px;
  }

  .fb-data-card > strong,
  .fb-card-head strong {
    margin-top: 3px;

    font-size: .75rem;
  }

  .fb-mini-track {
    height: 5px;

    margin-top: 5px;
  }


  /* =====================================================
     PANORAMIC HUD
     ===================================================== */

  .ph-shell {
    min-height: 440px !important;

    padding:
      32px 10px 6px !important;
  }

  .ph-vision-strip {
    min-height: 72px;

    grid-template-columns:
      .9fr .65fr 1.35fr;
  }

  .ph-brand {
    padding:
      6px 8px;
  }

  .ph-brand strong {
    margin-top: 3px;

    font-size: .64rem;
  }

  .ph-speed-block {
    padding:
      4px 6px;
  }

  .ph-speed-block strong {
    font-size: 3.2rem;
  }

  .ph-strip-data {
    padding:
      5px 4px;
  }

  .ph-strip-data span {
    margin-bottom: 3px;
  }

  .ph-strip-data strong {
    font-size: .78rem;
  }

  .ph-cockpit {
    grid-template-columns:
      78px minmax(0, 1fr) 78px;

    min-height: 246px;

    margin-top: 0;
  }

  .ph-side-readout {
    padding:
      8px 5px;
  }

  .ph-rpm-horizon {
    height: 226px;
  }

  .ph-rpm-center {
    bottom: 31px;
  }

  .ph-rpm-center strong {
    font-size: 4.25rem;
  }

  .ph-source {
    bottom: 8px;
  }

  .ph-tile-row {
    gap: 5px;

    margin:
      -5px 3px 0;
  }

  .ph-tile {
    min-height: 49px;

    padding:
      6px 7px 4px;
  }

  .ph-tile-top strong {
    font-size: .73rem;
  }

  .ph-tile-track {
    height: 6px;

    margin-top: 6px;
  }

  .ph-live-line {
    margin-top: 6px;

    padding-top: 4px;
  }


  /* =====================================================
     NEON REACTOR
     ===================================================== */

  .nr-shell {
    min-height: 440px !important;

    padding:
      32px 10px 6px !important;
  }

  .nr-header {
    height: 30px;

    padding:
      0 7px 4px;
  }

  .nr-title strong {
    font-size: .72rem;
  }

  .nr-dashboard {
    grid-template-columns:
      minmax(135px, .82fr)
      minmax(235px, 1.55fr)
      minmax(135px, .82fr);

    gap: 7px;

    min-height: 294px;

    padding:
      1px 2px 0;
  }

  .nr-side {
    gap: 7px;
  }

  .nr-card {
    height: 126px;

    padding:
      7px 8px 6px;
  }

  .nr-spark {
    height: 52px;

    margin-top: 6px;
  }

  .nr-level {
    height: 8px;
  }

  .nr-core {
    min-height: 286px;
  }

  .nr-reactor-ring {
    width: 205px;

    height: 205px;
  }

  .nr-ring-grid {
    inset: 29px;
  }

  .nr-speed-value {
    font-size: 5.7rem;
  }

  .nr-speed-unit {
    margin-top: 6px;
  }

  .nr-sixth {
    right: 23px;

    top: 34px;
  }

  .nr-rpm-readout {
    margin-top: -2px;
  }

  .nr-speed-chart {
    height: 23px;

    margin-top: 1px;
  }

  .nr-speed-chart svg {
    height: 20px;
  }

  .nr-footer {
    gap: 5px;

    margin:
      -4px 2px 0;
  }

  .nr-strip {
    min-height: 52px;

    padding:
      6px 7px 4px;
  }

}

/*
=========================================================
PEGGY_CVO_5INCH_FINAL_V1

Stable 800x480 CVO Custom layout.
No scaling or JavaScript.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .cvo2-shell {
    min-height: 440px !important;

    padding:
      5px 12px 6px !important;
  }


  /* Top warning / shift-light area */
  .cvo2-top {
    height: 28px;
  }


  /* Main tach / speed arc */
  .cvo2-stage {
    height: 330px;

    margin:
      -2px auto 0;
  }


  /* Pull the artwork slightly upward */
  .cvo2-gauge-svg {
    inset:
      -10px 0 0;
  }


  /* Keep the central readouts proportional */
  .cvo2-speed {
    font-size:
      clamp(
        5.9rem,
        18vw,
        8.5rem
      );
  }


  /* Slightly tighten bottom telemetry */
  .cvo2-bottom {
    gap: 28px;

    margin-top: -2px;
  }

  .cvo2-bottom strong {
    font-size: 1.15rem;
  }

  .cvo2-gear strong {
    font-size: 2.55rem;
  }


  /* Mini meters stay readable but use less height */
  .cvo2-mini-meter {
    margin-top: 3px;
  }

  .cvo2-mini-track {
    height: 5px;
  }

}

/*
=========================================================
PEGGY_PERFORMANCE_5INCH_FINAL_V1

Stable 800x480 Performance layout.
Pulls the center upward and gives the bottom row breathing room.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .d2-performance {
    min-height: 440px !important;

    padding:
      30px 14px 7px !important;
  }


  /* Shift lights */
  .d2-performance .d2-shift {
    margin:
      2px 7% 8px;

    gap: 4px;
  }

  .d2-performance .d2-shift-seg {
    height: 10px;
  }


  /* Main speed / gear area */
  .d2-performance-center {
    min-height: 245px !important;

    grid-template-columns:
      minmax(0,1fr)
      100px;
  }


  /* Speed stays dominant */
  .d2-performance-number {
    font-size:
      clamp(
        6.2rem,
        20vw,
        9.2rem
      ) !important;
  }


  /* Gear/RPM side column */
  .d2-performance-gear {
    font-size: 3.6rem;
  }

  .d2-performance-rpm {
    margin-top: 18px;

    font-size: 1.1rem;
  }


  /* Bottom telemetry row */
  .d2-performance .d2-info-strip {
    margin-top: 2px;

    min-height: 52px;
  }

}

/*
=========================================================
PEGGY_FUTURE_BARS_5INCH_FINAL_V1

Final 800x480 Future Bars positioning.
Keeps the main gauge size and pulls the bottom cards upward.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .fb-shell {
    padding-bottom: 5px !important;
  }

  .fb-main {
    min-height: 215px !important;
  }

  .fb-bottom {
    margin:
      -10px 5px 0 !important;

    gap: 5px;
  }

  .fb-data-card {
    min-height: 44px !important;

    padding:
      5px 7px 4px !important;
  }

  .fb-data-card > strong,
  .fb-card-head strong {
    margin-top: 2px;

    font-size: .72rem;
  }

  .fb-mini-track {
    margin-top: 4px;
  }

}

/*
=========================================================
PEGGY_PANORAMIC_5INCH_FINAL_V1

Final 800x480 Panoramic HUD positioning.
Keeps the main HUD large and raises the lower sensor tiles.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .ph-shell {
    padding-bottom: 5px !important;
  }

  .ph-cockpit {
    min-height: 226px !important;
  }

  .ph-rpm-horizon {
    height: 212px !important;
  }

  .ph-rpm-center {
    bottom: 27px;
  }

  .ph-source {
    bottom: 6px;
  }

  .ph-tile-row {
    margin:
      -13px 3px 0 !important;

    gap: 5px;
  }

  .ph-tile {
    min-height: 44px !important;

    padding:
      5px 7px 4px !important;
  }

  .ph-tile-top strong {
    font-size: .70rem;
  }

  .ph-tile-track {
    height: 5px;

    margin-top: 5px;
  }

  .ph-live-line {
    margin-top: 5px;

    padding-top: 3px;
  }

}

/*
=========================================================
PEGGY_NEON_5INCH_FINAL_V1

Final 800x480 Neon Reactor positioning.
Keeps the reactor large and raises the bottom data strip.
=========================================================
*/

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .nr-shell {
    padding-bottom: 5px !important;
  }

  .nr-dashboard {
    min-height: 276px !important;
  }

  .nr-card {
    height: 118px !important;
  }

  .nr-core {
    min-height: 270px !important;
  }

  .nr-reactor-ring {
    width: 195px !important;
    height: 195px !important;
  }

  .nr-rpm-readout {
    margin-top: -4px;
  }

  .nr-speed-chart {
    margin-top: -1px;
  }

  .nr-footer {
    margin:
      -10px 2px 0 !important;

    gap: 5px;
  }

  .nr-strip {
    min-height: 44px !important;

    padding:
      5px 7px 4px !important;
  }

  .nr-strip > strong {
    margin-top: 2px;

    font-size: .76rem;
  }

  .nr-strip > small {
    top: 6px;

    right: 7px;
  }

  .nr-strip-meter {
    height: 5px;

    margin-top: 5px;
  }

}