.pace-dock { display: none; }

@media (max-width: 700px) {
  :root { --pace-dock-height: 3.9rem; }

  /* iOS standalone paints the protected Home-indicator canvas from the root
     background, beyond the layout viewport occupied by the dock itself. */
  html { background: #f4c542; }
  html:has(.pace-dock[data-pace-state="ahead"]) { background: #075f36; }
  html:has(.pace-dock[data-pace-state="behind"]) { background: #a61924; }
  html:has(.pace-dock[data-pace-state="on-time"]),
  html:has(.pace-dock[data-pace-state="planned"]) { background: #f4c542; }

  .ride-bar[data-route-state="on-course"] { background: #075f36; }
  .ride-bar[data-route-state="caution"] { color: #172019; background: #f4c542; }
  .ride-bar[data-route-state="off-course"] { background: #a61924; }
  .ride-bar[data-route-mode="transit"] { color: #fff; background: #075985; }
  .ride-bar[data-route-state="caution"] .ride-rescue,
  .ride-bar[data-route-state="caution"] p { color: #273226; }
  .ride-bar[data-route-state="caution"] a { color: #172019; text-decoration-color: #172019; }
  .ride-bar[data-route-state="on-course"] .maneuver-arrow circle { fill: #064528; stroke: #fff; }
  .ride-bar[data-route-state="caution"] .maneuver-arrow circle { fill: #f4c542; stroke: #172019; }
  .ride-bar[data-route-state="caution"] .maneuver-arrow path { stroke: #172019; }
  .ride-bar[data-route-state="off-course"] .maneuver-arrow circle { fill: #7f101b; stroke: #fff; }
  .ride-bar[data-route-mode="transit"] .maneuver-arrow circle { fill: #064465; stroke: #fff; }
  body:has(.ride-bar[data-route-state="on-course"]) #start-guidance[data-state="active"] { background: #075f36; }
  body:has(.ride-bar[data-route-state="caution"]) #start-guidance[data-state="active"] { color: #172019; background: #f4c542; border-color: #172019; }
  body:has(.ride-bar[data-route-state="off-course"]) #start-guidance[data-state="active"] { background: #a61924; }
  body:has(.ride-bar[data-route-mode="transit"]) #start-guidance[data-state="active"] { background: #075985; }

  .pace-dock {
    position: relative;
    z-index: 1300;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 1.2fr 2fr auto;
    min-height: calc(var(--pace-dock-height) + env(safe-area-inset-bottom));
    align-items: center;
    gap: .55rem;
    padding: .4rem calc(.65rem + env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) calc(.65rem + env(safe-area-inset-left));
    border-top: 3px solid rgba(255,255,255,.92);
    color: #fff;
    background: #a66b00;
    box-shadow: 0 -.25rem 1rem rgba(20,37,42,.28);
    font-variant-numeric: tabular-nums;
  }

  .pace-dock[data-pace-state="ahead"] { background: #075f36; }
  .pace-dock[data-pace-state="behind"] { background: #a61924; }
  .pace-dock[data-pace-state="on-time"],
  .pace-dock[data-pace-state="planned"] { color: #172019; background: #f4c542; }
  .pace-copy { min-width: 0; }
  .pace-copy strong,
  .pace-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pace-copy strong { font-size: .78rem; line-height: 1.15; }
  .pace-copy span { margin-top: .16rem; font-size: .58rem; font-weight: 750; line-height: 1.2; opacity: .92; }
  .pace-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; }
  .pace-metrics span { min-width: 0; text-align: center; font-size: .52rem; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
  .pace-metrics strong { display: block; margin-bottom: .2rem; overflow: hidden; font-size: .76rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  #pace-settings-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 2px solid currentColor; border-radius: 50%; padding: 0; color: inherit; background: transparent; }
  #pace-settings-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

  .pace-settings {
    position: absolute;
    right: .55rem;
    bottom: calc(100% + .45rem);
    left: .55rem;
    padding: .85rem;
    border: 2px solid #172019;
    border-radius: .9rem;
    color: #172019;
    background: #fffdf8;
    box-shadow: 0 -.35rem 1.5rem rgba(20,37,42,.35);
  }
  .pace-settings[hidden] { display: none; }
  .pace-settings p { margin: 0 0 .65rem; font-size: .72rem; font-weight: 850; }
  .pace-settings form { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .pace-settings label { display: grid; gap: .25rem; font-size: .62rem; font-weight: 850; }
  .pace-settings input { width: 100%; min-height: 2.5rem; border: 2px solid #172019; border-radius: .5rem; padding: .4rem .5rem; color: #172019; background: #fff; font: 850 1rem/1 system-ui,sans-serif; }
  .pace-settings small { grid-column: 1 / -1; color: #41565c; font-size: .58rem; line-height: 1.35; }
  #pace-reset { grid-column: 1 / -1; min-height: 2.35rem; border: 0; border-radius: .5rem; color: #fff; background: #075985; font: 850 .7rem/1 system-ui,sans-serif; }
}