/* A dedicated driving dashboard for phones held sideways. Portrait stays unchanged. */
@media (orientation: landscape) and (max-height: 600px) and (min-width: 480px) {
  body.cc-app.cc62-app #tripFullscreen:not(.hidden),
  body.cc-trip-page #screenTrip.active {
    --drive-bg: #0d1c28;
    --drive-panel: #172c3d;
    --drive-line: #2e4759;
    --drive-text: #edf5fc;
    --drive-muted: #a5bacb;
    --drive-accent: #72dfcc;
    --drive-accent-soft: #133c37;
    --drive-alert: #ffabb1;
    --drive-alert-soft: #38262f;
    --drive-warn: #ffd18b;
    --drive-warn-soft: #443622;
    --drive-top: max(8px, var(--cc-safe-top, env(safe-area-inset-top, 0px)));
    --drive-bottom: max(8px, var(--cc-safe-bottom, env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box !important;
    padding: var(--drive-top) max(14px, var(--cc-safe-right, env(safe-area-inset-right, 0px))) var(--drive-bottom) max(14px, var(--cc-safe-left, env(safe-area-inset-left, 0px))) !important;
    background: var(--drive-bg) !important;
    color: var(--drive-text) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--drive-line) var(--drive-bg);
  }
  [data-theme=light] body.cc-app.cc62-app #tripFullscreen,
  [data-theme=light] body.cc-trip-page #screenTrip.active {
    --drive-bg: #edf5f6;
    --drive-panel: #fff;
    --drive-line: #cddfe4;
    --drive-text: #173444;
    --drive-muted: #526d7c;
    --drive-accent: #087d70;
    --drive-accent-soft: #dff4eb;
    --drive-alert: #ab3345;
    --drive-alert-soft: #fff0f1;
    --drive-warn: #8a5a0b;
    --drive-warn-soft: #fff0d1;
  }

  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-shell,
  body.cc-trip-page #screenTrip.active {
    display: grid !important;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
    grid-template-areas: "heading heading" "speed stats" "config config" "actions actions";
    grid-template-rows: 44px minmax(118px, 1fr) auto minmax(44px, auto);
    gap: 8px 14px !important;
    align-content: stretch;
    width: 100% !important;
    max-width: 1100px !important;
    height: calc(100dvh - var(--drive-top) - var(--drive-bottom)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-shell { padding: 0 !important; }
  body.cc-trip-page #screenTrip.active {
    height: 100dvh !important;
    max-width: none !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-shell:has(#tripPausedDrivingFullscreen > :not([hidden])),
  body.cc-trip-page #screenTrip.active:has(#tripDrivingPaused > :not([hidden])) {
    grid-template-areas: "heading heading" "speed stats" "config config" "driving driving" "actions actions";
    grid-template-rows: 44px minmax(118px, 1fr) auto auto minmax(44px, auto);
  }
  body.cc-trip-page #screenTrip.active:has(#recoveryNotice:not(.hidden)) {
    grid-template-areas: "heading heading" "recovery recovery" "speed stats" "config config" "actions actions";
    grid-template-rows: 44px auto minmax(118px, 1fr) auto minmax(44px, auto);
  }
  body.cc-trip-page #screenTrip.active:has(#recoveryNotice:not(.hidden)):has(#tripDrivingPaused > :not([hidden])) {
    grid-template-areas: "heading heading" "recovery recovery" "speed stats" "config config" "driving driving" "actions actions";
    grid-template-rows: 44px auto minmax(118px, 1fr) auto auto minmax(44px, auto);
  }

  /* A shared top bar keeps navigation and GPS out of the instrument area. */
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-header {
    grid-area: heading;
    display: grid !important;
    grid-template-columns: minmax(88px, 1fr) minmax(0, 2fr) minmax(88px, 1fr) !important;
    gap: 10px !important;
    min-width: 0;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-header > div { display: block !important; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-header strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px !important;
    font-weight: 750;
    color: var(--drive-text) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-back {
    justify-self: start;
    min-height: 44px !important;
    padding: 8px 12px !important;
    background: var(--drive-panel) !important;
    border: 1px solid var(--drive-line) !important;
    border-radius: 13px !important;
    color: var(--drive-text) !important;
    font-size: 12px !important;
  }
  body.cc-app.cc62-app #tripFullscreenGps {
    background: var(--drive-panel) !important;
    color: var(--drive-muted) !important;
    border: 1px solid var(--drive-line);
    font-size: 10px !important;
    padding: 6px 10px !important;
  }
  body.cc-trip-page #screenTrip.active .trip-mobile-nav {
    grid-area: heading;
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 144px 0 0;
    gap: 12px;
  }
  /* Account shortcuts remain in Settings; they are not driving instruments. */
  body.cc-trip-page #screenTrip.active .trip-mobile-nav .cc-account-row { display: none !important; }
  body.cc-trip-page #screenTrip.active .trip-nav-btn {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 13px;
    background: var(--drive-panel) !important;
    border-color: var(--drive-line) !important;
    color: var(--drive-text) !important;
    font-size: 12px;
  }
  body.cc-trip-page #screenTrip.active #returnToTripBtn {
    padding: 8px 0;
    border-color: transparent !important;
    background: transparent !important;
    font-size: 16px;
  }
  body.cc-trip-page #screenTrip.active > .ccv-trip-settings-bar {
    grid-area: heading;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
  body.cc-trip-page #screenTrip.active > .ccv-trip-settings-bar button {
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    background: var(--drive-panel) !important;
    border-color: var(--drive-line) !important;
    color: var(--drive-text) !important;
    font-size: 12px !important;
  }
  body.cc-trip-page #screenTrip.active #recoveryNotice {
    grid-area: recovery;
    margin: 0;
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  [data-theme=light] body.cc-trip-page #screenTrip.active #recoveryNotice { color: #805007 !important; }

  /* Status and speed share one visual instrument, without copying live values. */
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-state-row,
  body.cc-trip-page #screenTrip.active .trip-top {
    grid-area: speed;
    z-index: 1;
    align-self: start;
    justify-self: stretch;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 9px;
    padding: 9px 10px 0;
    margin: 0 !important;
    min-width: 0;
  }
  body.cc-app.cc62-app #tripFullscreen .movement-badge,
  body.cc-trip-page #screenTrip.active .movement-badge {
    font-size: 10px !important;
    line-height: 1.4;
    padding: 4px 9px !important;
    margin: 0;
  }
  body.cc-app.cc62-app #tripFullscreen .movement-badge.moving,
  body.cc-trip-page #screenTrip.active .movement-badge.moving {
    background: var(--drive-accent-soft) !important;
    color: var(--drive-accent) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .movement-badge.stopped,
  body.cc-trip-page #screenTrip.active .movement-badge.stopped {
    background: var(--drive-warn-soft) !important;
    color: var(--drive-warn) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .movement-badge.paused,
  body.cc-trip-page #screenTrip.active .movement-badge.paused {
    background: var(--drive-bg) !important;
    color: var(--drive-muted) !important;
  }
  body.cc-trip-page #screenTrip.active .gps-badge { font-size: 10px; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-speed,
  body.cc-trip-page #screenTrip.active .speed-wrap {
    grid-area: speed;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 118px !important;
    padding: 31px 12px 10px !important;
    border: 1px solid var(--drive-line);
    border-radius: 22px;
    background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--drive-accent) 15%, transparent), transparent 70%), var(--drive-panel);
  }
  body.cc-app.cc62-app #tripFullscreenSpeed,
  body.cc-trip-page #screenTrip.active .speed-value {
    color: var(--drive-text) !important;
    font-size: clamp(68px, 24dvh, 132px) !important;
    font-weight: 800 !important;
    line-height: .95 !important;
    letter-spacing: -4px !important;
    font-variant-numeric: tabular-nums;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-speed > span,
  body.cc-trip-page #screenTrip.active .speed-unit {
    margin: 1px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--drive-muted) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats,
  body.cc-trip-page #screenTrip.active .stats-grid {
    grid-area: stats;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    min-width: 0;
    min-height: 0;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article,
  body.cc-trip-page #screenTrip.active .stat-box {
    display: grid;
    align-content: center;
    min-height: 0 !important;
    min-width: 0;
    gap: 4px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--drive-line) !important;
    border-radius: 17px !important;
    background: var(--drive-panel) !important;
    color: var(--drive-text) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats small,
  body.cc-trip-page #screenTrip.active .stat-label {
    color: var(--drive-muted) !important;
    font-size: 10px !important;
    line-height: 1.25;
    font-weight: 550;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article strong,
  body.cc-trip-page #screenTrip.active .stat-value {
    font-size: clamp(19px, 3.1vw, 30px) !important;
    line-height: 1.12;
    font-weight: 750;
    color: var(--drive-text) !important;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article.highlight,
  body.cc-trip-page #screenTrip.active .stat-box.highlight {
    background: var(--drive-accent-soft) !important;
    border-color: color-mix(in srgb, var(--drive-accent) 40%, var(--drive-line)) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article.highlight strong,
  body.cc-trip-page #screenTrip.active .stat-box.highlight .stat-value { color: var(--drive-accent) !important; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-config,
  body.cc-trip-page #screenTrip.active .trip-config-mini {
    grid-area: config;
    min-width: 0;
    padding: 0 8px;
    margin: 0 !important;
    color: var(--drive-muted) !important;
    font-size: 10px !important;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
  }

  body.cc-app.cc62-app #tripPausedDrivingFullscreen,
  body.cc-trip-page #tripDrivingPaused { display: none; grid-area: driving; min-width: 0; }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen:has(> :not([hidden])),
  body.cc-trip-page #tripDrivingPaused:has(> :not([hidden])) { display: block; }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving {
    margin: 0;
    padding: 2px 8px 2px 13px;
    border-radius: 13px;
    gap: 8px;
  }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving > div,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving small,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving small { font-size: 8px; letter-spacing: .8px; }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving-values,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving-values { margin: 0; }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving-values strong,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving-values strong { font-size: 13px; }
  body.cc-app.cc62-app #tripPausedDrivingFullscreen .cc-trip-driving-button,
  body.cc-trip-page #tripDrivingPaused .cc-trip-driving-button { min-height: 44px; padding: 7px 12px; }

  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-actions,
  body.cc-trip-page #screenTrip.active .trip-actions {
    grid-area: actions;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--drive-bg) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-actions button,
  body.cc-trip-page #screenTrip.active .trip-actions button {
    min-height: 44px !important;
    padding: 9px 14px !important;
    border: 1px solid var(--drive-line) !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.3;
    background: var(--drive-panel) !important;
    color: var(--drive-text) !important;
  }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-actions .danger-action,
  body.cc-trip-page #screenTrip.active .trip-actions .danger-action {
    background: var(--drive-alert-soft) !important;
    border-color: color-mix(in srgb, var(--drive-alert) 32%, var(--drive-line)) !important;
    color: var(--drive-alert) !important;
  }
  body.cc-app.cc62-app #tripFullscreen button:focus-visible,
  body.cc-trip-page #screenTrip.active :is(button, a):focus-visible {
    outline: 3px solid var(--drive-accent) !important;
    outline-offset: 2px;
  }
}

@media (orientation: landscape) and (max-height: 350px) and (min-width: 480px) {
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-shell,
  body.cc-trip-page #screenTrip.active { gap: 5px 10px !important; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-speed,
  body.cc-trip-page #screenTrip.active .speed-wrap { padding-top: 29px !important; border-radius: 17px; }
  body.cc-app.cc62-app #tripFullscreenSpeed,
  body.cc-trip-page #screenTrip.active .speed-value { font-size: 68px !important; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article,
  body.cc-trip-page #screenTrip.active .stat-box { padding: 6px 10px !important; border-radius: 13px !important; }
  body.cc-app.cc62-app #tripFullscreen .trip-fullscreen-stats article strong,
  body.cc-trip-page #screenTrip.active .stat-value { font-size: 20px !important; }
}