/* Driving mode. Targets stay large enough to hit without looking. */

@layer modes {
  #car {
    position: fixed;
    inset: 0;
    z-index: var(--z-car);
    background: var(--bg-0);
    color: var(--text);
  }

  #car[hidden] { display: none !important; }

  .car-ui {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }

  .car-now { text-align: center; }
  .car-now h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .car-transport { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); }
  .car-play, .car-slot, .car-transport .btn { min-width: 76px; min-height: 76px; }

  .car-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
  }

  .car-slot {
    text-align: left;
    padding: var(--sp-3);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
  }

  .car-slot.is-empty { color: var(--text-mute); }
  .car-hint { color: var(--text-mute); text-align: center; }

  html[data-night] #car { background: #05060a; }
}