/* Shared mobile selection and form polish; keeps the existing step flow and data intact. */
@media all {
  .main > h1.big {
    max-width: 22ch;
    text-wrap: balance;
  }

  .list > .item,
  .vehicle-group .list > .item {
    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 {
    background: var(--ds-accent-soft);
  }
  .list > .item.on,
  .vehicle-group .list > .item.on {
    color: var(--ds-accent-pressed);
    background: var(--ds-accent-soft);
  }
  .list > .item.on .chev { color: var(--ds-accent); }
  .list > .item .v { color: var(--ds-text); font-variant-numeric: tabular-nums; }
  .vehicle-group .sec { color: var(--ds-text-tertiary); }

  .di-head { transition: background-color var(--motion-fast) var(--motion-ease); }
  .di-head:active,
  .di-head.on { background: var(--ds-accent-soft); }
  .di-head.on .di-chev { color: var(--ds-accent); transform: rotate(90deg); }
  .di-chev { transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }

  .optrow .ck {
    position: relative;
    appearance: none;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    border: 1.5px solid var(--ds-border);
    border-radius: 6px;
    background: var(--ds-surface);
    accent-color: var(--ds-accent);
    transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), transform var(--motion-instant) var(--motion-spring);
  }
  .optrow .ck:checked { border-color: var(--ds-accent); background: var(--ds-accent); }
  .optrow .ck:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--ds-on-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .optrow .ck:active { transform: scale(.92); }
  .optrow.sel .ck { box-shadow: 0 0 0 3px var(--ds-accent-soft); }
  .optrow.rel-no { opacity: .52; }
  .optrow.rel-no .ck { border-color: var(--ds-disabled-text); }

  .pi-nm {
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  .pi-desc {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.45;
  }
  .prop-item:active { background: var(--ds-accent-soft); }

  .field {
    color: var(--ds-text);
    caret-color: var(--ds-accent);
    font-size: 1rem;
  }
  .field::placeholder { color: var(--ds-text-tertiary); }
  .agree { line-height: 1.5; }
  .agree input { border-radius: 6px; }

  .sheet-t button:active { color: var(--ds-accent); background: var(--ds-accent-soft); }
  .chip { transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), transform var(--motion-instant) var(--motion-spring); }
  .chip:active { transform: scale(.97); }
}