/* Mobile-first quote flow. This layer changes presentation only; app state and requests stay in app.js/api.js. */
@media all {
  html { scroll-behavior: smooth; }
  body { background: var(--ds-bg); }
  .app { width: 100%; max-width: 560px; min-height: 100svh; }

  .hd {
    background: color-mix(in srgb, var(--ds-bg) 94%, transparent);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
  }
  .hd-in { min-height: 52px; padding: var(--space-1) var(--space-5); gap: var(--space-2); }
  .hd-t { font-size: var(--type-body-small-size); font-weight: 700; letter-spacing: -.02em; }
  .hd-sub { font-size: var(--type-caption-size); font-weight: 600; font-variant-numeric: tabular-nums; }
  .iconbtn { width: 44px; height: 44px; border-radius: var(--radius-full); }
  .dots { gap: 5px; padding: 0 var(--space-5) var(--space-2); }
  .dots i { height: 3px; border-radius: var(--radius-full); }

  .main {
    padding: var(--space-5) var(--space-5) calc(112px + env(safe-area-inset-bottom));
    scroll-margin-top: 56px;
  }
  h1.big {
    max-width: 18ch;
    margin: 0 0 var(--space-2);
    font-size: var(--type-page-title-size);
    font-weight: var(--type-page-title-weight);
    line-height: var(--type-page-title-line);
    letter-spacing: var(--type-page-title-track);
    text-wrap: pretty;
  }
  p.lead { margin: 0 0 var(--space-6); font-size: var(--type-body-small-size); line-height: 1.5; letter-spacing: -.02em; }
  .sec {
    margin: var(--space-6) 0 var(--space-2);
    color: var(--ds-text-secondary);
    font-size: var(--type-section-size);
    font-weight: var(--type-section-weight);
    line-height: var(--type-section-line);
    letter-spacing: var(--type-section-track);
  }
  .vehicle-group + .vehicle-group .sec { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--ds-border-subtle); }

  /* Vehicle choice is a fast scan list, not a stack of seven separate cards. */
  .list { gap: 0; }
  .list > .item,
  .vehicle-group .list > .item {
    min-height: 68px;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-1);
    border: 0;
    border-bottom: 1px solid var(--ds-border-subtle);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .list > .item:last-child,
  .vehicle-group .list > .item:last-child { border-bottom-color: transparent; }
  .item .n { font-size: 1rem; font-weight: 700; letter-spacing: -.03em; }
  .item .m { margin-top: var(--space-1); font-size: var(--type-body-small-size); line-height: 1.35; }
  .item .v { font-size: var(--type-body-small-size); font-weight: 700; font-variant-numeric: tabular-nums; }
  .item:active { background: var(--ds-border-subtle); transform: scale(.995); }
  .chev { width: 18px; height: 18px; }
  .drive-item { border: 0; border-bottom: 1px solid var(--ds-border-subtle); border-radius: 0; background: transparent; box-shadow: none; }
  .drive-item .di-head { min-height: 68px; padding: var(--space-3) var(--space-1); }
  .di-l .n { font-size: 1rem; font-weight: 700; }
  .di-r b { font-size: var(--type-body-small-size); font-variant-numeric: tabular-nums; }
  .drive-item .drives { padding: 0 var(--space-1) var(--space-3); }
  .dchip { min-height: 48px; border-radius: var(--radius-control); font-size: var(--type-body-small-size); }

  /* Option selection keeps the real option detail accordion, with a quieter list hierarchy. */
  .sw { margin: 0 0 var(--space-4); }
  .sw .dchip { min-height: 48px; }
  #main > .row.card,
  #main > button.row.card {
    min-height: 56px;
    margin: 0 0 var(--space-3) !important;
    padding: var(--space-2) 0;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-border) !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #optSumVal { font-size: var(--type-body-small-size); font-weight: 700; }
  #optSumVal small { font-size: var(--type-caption-size); }
  #optlist.card {
    margin-top: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .optrow { min-height: 64px; gap: var(--space-3); padding: var(--space-3) 0; border-bottom-color: var(--ds-border-subtle); }
  .optrow .ck { width: 20px; height: 20px; margin: 0; accent-color: var(--ds-accent); }
  .optrow .nm { font-size: .9375rem; line-height: 1.45; letter-spacing: -.025em; }
  .optrow .pr { font-size: var(--type-body-small-size); font-weight: 700; font-variant-numeric: tabular-nums; }
  .optrow.sel { background: transparent; }
  .optrow.sel .nm { color: var(--ds-accent); font-weight: 700; }
  .opt-toggle-slot, .opt-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .optmore { margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2) var(--space-4) var(--space-4); border: 0; border-radius: var(--radius-control); background: var(--ds-border-subtle); }
  .optmore .mfr { color: var(--ds-text-secondary); font-size: var(--type-body-small-size); line-height: 1.65; }
  .optmore .items span { border-color: var(--ds-border); border-radius: var(--radius-sm); }

  /* Condition summary: one continuous list and a single visible primary action. */
  #optSum {
    min-height: 56px;
    margin: 0 0 var(--space-6) !important;
    padding: var(--space-2) 0;
    border: 0 !important;
    border-bottom: 1px solid var(--ds-border) !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #optSum .k { font-size: var(--type-body-small-size); }
  #optSum .val { font-size: var(--type-body-small-size); }
  #main > .card:has(> .row:is([data-k],.condition-product-fixed)) {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .row:is([data-k],.condition-product-fixed) { min-height: 60px; gap: var(--space-2); padding: var(--space-3) 0; border-bottom-color: var(--ds-border-subtle); }
  .row:is([data-k],.condition-product-fixed) .k { font-size: var(--type-body-small-size); }
  .row:is([data-k],.condition-product-fixed) .val { font-size: .9375rem; font-weight: 700; text-align: right; }
  .row:is([data-k],.condition-product-fixed) .chev { margin-left: var(--space-1); }

  /* Sticky action: stable size, safe-area padding and immediate pressed feedback. */
  .cta {
    padding: var(--space-2) max(var(--space-5), env(safe-area-inset-left)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-right));
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-bg) 0%, transparent), var(--ds-bg) 36%);
    -webkit-backdrop-filter: saturate(140%);
    backdrop-filter: saturate(140%);
  }
  .cta-in { gap: var(--space-2); }
  .btn {
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-control);
    font-size: var(--type-button-size);
    font-weight: var(--type-button-weight);
    letter-spacing: -.025em;
    transition: transform var(--motion-instant) var(--motion-spring), background-color var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
  }
  .btn:active:not(:disabled) { transform: scale(.985); }
  .btn:disabled { opacity: .6; }
  .btn.ghost { flex-basis: 34%; background: var(--ds-surface); border: 1px solid var(--ds-border); }

  /* Form fields and sheet choices remain large enough for thumb input. */
  .field { min-height: 56px; margin-bottom: var(--space-3); border-radius: var(--radius-control); }
  .agree { min-height: 44px; align-items: center; font-size: var(--type-caption-size); }
  .agree input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--ds-accent); }
  .main > .btn { display: flex; width: 100%; min-height: 56px; flex: none; align-items: center; justify-content: center; margin-top: var(--space-2) !important; }
  .main > .btn.ghost { width: 100%; flex: none; background: var(--ds-surface); border: 1px solid var(--ds-border); color: var(--ds-text); }
  .sheet-wrap { padding-top: env(safe-area-inset-top); }
  .sheet {
    max-height: min(88dvh, 760px);
    padding: var(--space-2) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    overscroll-behavior: contain;
    animation: mobileSheetIn var(--motion-normal) var(--motion-spring) both;
  }
  @keyframes mobileSheetIn { from { opacity: .94; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .sheet-h { margin-bottom: var(--space-2); background: transparent; }
  .sheet-t { min-height: 52px; margin-bottom: var(--space-4); font-size: 1.25rem; }
  .sheet-t button { width: 44px; height: 44px; border-radius: var(--radius-full); }
  .sheet-l { margin: var(--space-4) 0 var(--space-2); font-size: var(--type-body-small-size); }
  .grid4, .grid3, .grid5 { gap: var(--space-2); }
  .chip { min-height: 48px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-control); font-size: var(--type-body-small-size); }

  /* Loading keeps the list geometry visible; avoid a mascot-sized visual competing with progress. */
  .analyze-head { padding: var(--space-3) 0 var(--space-5); text-align: left; }
  .analyze-head h2 { font-size: 1.375rem; line-height: 1.35; letter-spacing: -.04em; }
  .analyze-head p { font-size: var(--type-body-small-size); }
  .mascot { width: 44px; height: 44px; margin: var(--space-4) 0 0; border-width: 3px; box-shadow: none; }
  .analyze-head:has(.mascot) { display: grid; grid-template-columns: minmax(0,1fr) 44px; column-gap: var(--space-3); align-items: center; }
  .analyze-head h2, .analyze-head p { grid-column: 1; }
  .analyze-head .mascot { grid-column: 2; grid-row: 1 / span 2; }
  #main > .row.card:has(#eta) { min-height: 52px; margin: 0 0 var(--space-3) !important; padding: var(--space-2) 0; border: 0 !important; border-bottom: 1px solid var(--ds-border) !important; border-radius: 0; background: transparent; box-shadow: none; }
  #main > #anList.card { overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .lender { min-height: 60px; gap: var(--space-3); padding: var(--space-3) 0; border-bottom-color: var(--ds-border-subtle); }
  .lender .logo { display: none; }
  .lender .nm { font-size: var(--type-body-small-size); font-weight: 650; }
  .lender .st { font-size: var(--type-caption-size); }
  .anbar { height: 4px; margin-bottom: var(--space-3); }

  /* Result is ranked, scannable and number-led; supporting details stay secondary. */
  .result-layout { gap: var(--space-6); }
  .hero { margin-bottom: var(--space-4); padding: var(--space-5); border-radius: var(--radius-panel); }
  .hero .lab { font-size: var(--type-body-small-size); }
  .hero .big { margin: var(--space-2) 0 var(--space-3); font-size: var(--type-main-value-size); font-weight: var(--type-main-value-weight); line-height: var(--type-main-value-line); letter-spacing: var(--type-main-value-track); }
  .hero .big span { font-size: 1rem; }
  .hero .cap { font-size: var(--type-caption-size); line-height: 1.6; }
  .result-secondary .sec { margin-top: var(--space-6); margin-bottom: var(--space-2); color: var(--ds-text); }
  .result-list.card { overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; counter-reset: lender-rank; }
  .lender.rev { min-height: 68px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--ds-border-subtle); animation-duration: var(--motion-page); }
  .lender.rev::before { counter-increment: lender-rank; content: counter(lender-rank); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--ds-border-subtle); color: var(--ds-text-secondary); font-size: var(--type-caption-size); font-weight: 700; font-variant-numeric: tabular-nums; }
  .lender.rev > div:nth-child(2) { min-width: 0; }
  .lender.rev .muted { margin-top: var(--space-1); font-size: var(--type-caption-size); }
  .lender.rev .st { margin-left: 0; font-size: var(--type-body-small-size); font-weight: 700; white-space: nowrap; }
  .lender.rev.best::before { background: var(--ds-accent-soft); color: var(--ds-positive); }
  .lender.rev.best .st { color: var(--ds-positive); }
  .result-note { font-size: var(--type-caption-size); line-height: 1.6; }
  .quote-error { padding-top: var(--space-5); }
  .quote-error .lead { line-height: 1.65; }

  .prop-chips { gap: var(--space-2); margin-bottom: var(--space-4); }
  .pchip { min-height: 36px; padding: var(--space-1) var(--space-3); background: var(--ds-border-subtle); border: 0; font-size: var(--type-caption-size); }
  .prop-car { gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--ds-border); border-radius: 0; background: transparent; box-shadow: none; }
  .pc-thumb { width: 48px; height: 48px; border-radius: var(--radius-control); font-size: var(--type-body-size); }
  .pc-nm { font-size: var(--type-body-size); }
  .pc-tr { font-size: var(--type-caption-size); }
  .pc-pr { margin-top: var(--space-1); font-size: var(--type-body-small-size); }
  .prop-list { gap: 0; }
  .prop-item { min-height: 68px; gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--ds-border-subtle); border-radius: 0; background: transparent; }
  .pi-thumb { display: none; }
  .pi-cat { font-size: var(--type-caption-size); }
  .pi-nm { font-size: var(--type-body-small-size); }
  .pi-desc { font-size: var(--type-caption-size); }
  .pi-side b { font-size: var(--type-body-small-size); }
  .pi-side i { min-height: 32px; display: inline-flex; align-items: center; padding-inline: var(--space-2); border-radius: var(--radius-full); background: var(--ds-border-subtle); font-size: var(--type-caption-size); }

  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .fade-in > * { animation-duration: var(--motion-page); }
}

@media (max-width: 359px) {
  .main { padding-inline: var(--space-4); }
  .hd-in { padding-inline: var(--space-4); }
  .cta { padding-inline: max(var(--space-4), env(safe-area-inset-left)); }
  .hero .big { font-size: 2.125rem; }
  .lender.rev { grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-2); }
  .lender.rev .st { font-size: var(--type-caption-size); }
}