/* Native-app interaction layer adapted to the web. Presentation only. */
.dots {
  display: block;
  max-width: 1000px;
  height: 3px;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--ds-border-subtle);
}

.dots > span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--ds-accent);
  transition: width var(--motion-normal) var(--motion-ease);
}

@media all {
  html {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body {
    overscroll-behavior-x: none;
  }

  button,
  [role="button"],
  .optrow {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .main {
    min-height: calc(100svh - 56px);
    padding-top: var(--space-4);
  }

  :root {
    --ds-bg: #ffffff;
    --ds-border-subtle: #edf0ee;
  }

  .hd {
    background: var(--ds-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .dots {
    height: 3px;
    margin-inline: var(--space-5);
    padding: 0 0 var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--ds-border-subtle);
  }

  .dots > span {
    display: block;
    width: var(--progress);
    height: 3px;
    border-radius: inherit;
    background: var(--ds-accent);
    transition: width var(--motion-normal) var(--motion-ease);
  }

  h1.big {
    max-width: 20ch;
    margin-bottom: var(--space-2);
    font-size: clamp(1.625rem, calc(var(--app-canvas-width) * 0.07), 1.875rem);
    line-height: 1.34;
    font-weight: 750;
    letter-spacing: -.04em;
  }

  p.lead {
    margin-bottom: var(--space-5);
    font-size: .9375rem;
    line-height: 1.55;
  }

  .sec { margin-top: var(--space-5); }

  .cta {
    border-top: 1px solid var(--ds-border-subtle);
    background: var(--ds-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn {
    min-height: 54px;
    border-radius: var(--radius-control);
    letter-spacing: -.02em;
  }

  .sw .dchip { min-height: 48px; border-radius: var(--radius-control); }

  .optrow {
    min-height: 64px;
    padding-block: var(--space-2);
  }

  #optSum {
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-4) !important;
  }

  .prop-chips { gap: 6px; }
  .pchip { background: var(--ds-border-subtle); }
  .fade-in > * { animation-duration: var(--motion-fast); }

  .list > .item,
  .vehicle-group .list > .item,
  .drive-item .di-head {
    transform-origin: center;
    transition: background-color var(--motion-fast) var(--motion-ease),
      color var(--motion-fast) var(--motion-ease),
      transform var(--motion-instant) var(--motion-spring);
  }

  .list > .item:active,
  .vehicle-group .list > .item:active,
  .drive-item .di-head:active {
    transform: scale(.985);
    background: var(--ds-accent-soft);
  }

  .list > .item.on,
  .vehicle-group .list > .item.on {
    border-radius: var(--radius-md);
    background: var(--ds-accent-soft);
  }

  .optrow {
    border-radius: 0;
    background: transparent;
    transition: background-color var(--motion-fast) var(--motion-ease),
      transform var(--motion-instant) var(--motion-spring);
  }

  .optrow:active { background: var(--ds-accent-soft); }
  .optrow.sel { background: color-mix(in srgb, var(--ds-accent) 7%, transparent); }

  /* The visible checkbox remains compact while its actual hit target is 44px. */
  .optrow .ck {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    background-clip: content-box;
  }

  .optrow .ck::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1.5px solid var(--ds-border);
    border-radius: 6px;
    background: var(--ds-surface);
    transition: border-color var(--motion-fast) var(--motion-ease),
      background-color var(--motion-fast) var(--motion-ease);
  }

  .optrow .ck:checked::before {
    border-color: var(--ds-accent);
    background: var(--ds-accent);
  }

  .optrow .ck:checked::after {
    left: 18px;
    top: 14px;
    width: 6px;
    height: 11px;
  }

  .optrow .ck:active { transform: scale(.94); }
  .optrow .opt-toggle { flex: 0 0 44px; }

  .prop-item {
    transition: background-color var(--motion-fast) var(--motion-ease),
      transform var(--motion-instant) var(--motion-spring);
  }
  .prop-item:active { transform: scale(.99); }
  .pi-side i { min-height: 44px; padding-inline: var(--space-3); }

  .chip,
  .dchip,
  .btn,
  .iconbtn {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }

  .sheet { overscroll-behavior-y: contain; }
  .cta { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
}