/* ===== v15 (mobile only ≤650px): two-row header, collapsible filters, comment dock above the bar ===== */
.v15-filter-toggle { display: none; }
@media (max-width: 650px) {
  /* --- toggle button (inserted by v15.js next to each page's search box) --- */
  :root:not(#_v3) .v15-filter-toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 40px; padding: 0; border-radius: 12px; cursor: pointer; order: 2;
    border: 1px solid color-mix(in srgb, #2f6b50 22%, transparent);
    background: color-mix(in srgb, #2f6b50 7%, var(--ui-surface, #fff)); color: #2f6b50;
    -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, border-color .2s ease;
  }
  :root:not(#_v3) .v15-filter-toggle svg { width: 18px; height: 18px; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
  :root:not(#_v3) .v15-filter-toggle[aria-expanded="true"] { background: #2f6b50; border-color: #2f6b50; color: #fff; }

  :root:not(#_v3) .v15-filter-toggle .v15-badge {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: #2f6b50; color: #fff; font: 700 11px/17px system-ui, sans-serif; text-align: center;
    box-shadow: 0 0 0 2px var(--ui-surface, #f6f8f5); transform: scale(0); transition: transform .25s cubic-bezier(.3,1.5,.5,1);
  }
  :root:not(#_v3) .v15-filter-toggle.has-active .v15-badge { transform: scale(1); }
  :root:not(#_v3) .v15-filter-toggle[aria-expanded="true"] .v15-badge { background: #fff; color: #2f6b50; box-shadow: 0 0 0 2px #2f6b50; }
  :root:not(#_v3) .match-toolbar-main > .match-search, :root:not(#_v3) .risk-toolbar > .risk-search { order: 1; min-width: 0; flex: 1 1 auto; }
  :root:not(#_v3) .match-toolbar-main > .match-blocked-toggle { order: 3; }
  :root:not(#_v3) .match-toolbar-main > .match-publish, :root:not(#_v3) .risk-toolbar > .risk-publish { order: 4; }

  /* --- filter panels become an overlay card under the search row: no reflow when opening --- */
  :root:not(#_v3) .match-controls, :root:not(#_v3) .risk-toolbar { position: relative; z-index: 30; }
  :root:not(#_v3) .match-controls-inner { position: relative; overflow: visible !important; }
  :root:not(#_v3) .match-mobile-filters, :root:not(#_v3) .risk-mobile-filter {
    position: absolute !important; left: 10px; right: 10px; top: calc(100% + 6px); z-index: 31; margin: 0 !important;
    display: flex !important; flex-wrap: wrap; gap: 8px; padding: 12px !important; height: auto !important; overflow: visible !important;
    border-radius: 16px; border: 1px solid color-mix(in srgb, #2f6b50 16%, transparent);
    background: color-mix(in srgb, var(--ui-surface, #fbfcfa) 94%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 14px 34px rgba(20, 45, 32, .16), 0 2px 6px rgba(20, 45, 32, .08);
    opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 100% 0;
    transform: translateY(-6px) scale(.96);
    transition: opacity .2s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
  }
  :root:not(#_v3) .match-toolbar ~ .match-mobile-filters { top: 56px; }
  :root:not(#_v3) .v15-open > .match-mobile-filters, :root:not(#_v3) .v15-open .match-mobile-filters,
  :root:not(#_v3) .risk-toolbar.v15-open + .risk-mobile-filter {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .18s ease, transform .36s cubic-bezier(.2,.9,.25,1.05), visibility 0s;
  }
  :root:not(#_v3) .match-mobile-filters > *, :root:not(#_v3) .risk-mobile-filter > * { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none !important; min-height: 44px; }
  :root:not(#_v3) .match-mobile-filters select, :root:not(#_v3) .risk-mobile-filter select { width: 100%; min-height: 44px; }
  :root:not(#_v3) .risk-mobile-filter label { display: flex; align-items: center; gap: 6px; }
  :root:not(#_v3) .risk-mobile-filter label select { flex: 1; }
  @media (prefers-reduced-motion: reduce) {
    :root:not(#_v3) :is(.match-mobile-filters, .risk-mobile-filter, .v15-filter-toggle svg) { transition: none !important; }
  }

  /* --- third rows removed: list headings (kept while searching, the sort select lives there) --- */
  :root:not(#_v3) .match-list-heading:not(.is-searching) { display: none !important; }
  :root:not(#_v3) .match-list:has(> .match-list-heading:not(.is-searching)) .match-list-scroll { padding-top: 0 !important; }
  :root:not(#_v3) .risk-list-heading { display: none !important; }

  /* --- deals: pickers in one 44px row, summary card folded away (the spec picker already names it) --- */
  :root:not(#_v3) .mobile-price-picker { padding-top: 0 !important; padding-bottom: 0 !important; gap: 8px !important; }
  :root:not(#_v3) .mobile-price-picker > div > span { display: none !important; }
  :root:not(#_v3) .mobile-price-picker button { min-height: 44px !important; height: 44px !important; }
  :root:not(#_v3) .price-quotes-top > .price-quotes-heading { display: none !important; }

  /* --- detail view: the search/filter row is not needed there --- */
  :root:not(#_v3) .match-columns:has(> .match-detail.open) > .match-controls { display: none !important; }

  /* --- comments: X-like proportions; composer dock sits above the bottom bar instead of under it --- */
  :root:not(#_v3) .match-detail > .match-comment-slot { bottom: calc(10px + 56px + 8px + env(safe-area-inset-bottom, 0px)) !important; z-index: 72; }
  :root:not(#_v3) .match-detail-scroll { padding-bottom: calc(92px + 64px + env(safe-area-inset-bottom, 0px)) !important; }
  :root:not(#_v3) .match-comment-content { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }
  :root:not(#_v3) .match-comment-body { min-width: 0; }
  :root:not(#_v3) .match-comment-nested .match-comment-content { font-size: 14.5px; }
}
@media (max-width: 650px) {
  /* risk: the filter row is a sibling of the toolbar, so anchor it to risk-main just under the 48px toolbar */
  :root:not(#_v3) .risk-main:has(> .risk-mobile-filter) { position: relative; }
  :root:not(#_v3) .risk-main > .risk-mobile-filter { top: calc(var(--v15-risk-top, 48px) + 6px); }
}
@media (max-width: 650px) {
  /* composer: no square focus ring inside the rounded pill; while typing, the bar steps aside and the dock drops to the bottom */
  :root:not(#_v3) .match-comment-slot :is(input, textarea):focus { outline: none !important; box-shadow: none !important; }
  :root:not(#_v3) .match-comment-slot .match-comment-dock:focus-within { border-color: color-mix(in srgb, #2f6b50 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, #2f6b50 14%, transparent) !important; }
  :root:not(#_v3) .match-detail > .match-comment-slot { transition: bottom .28s cubic-bezier(.2,.8,.2,1); }
  :root:not(#_v3):has(.match-detail > .match-comment-slot :focus-within) .match-detail > .match-comment-slot { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  :root:not(#_v3):has(.match-detail > .match-comment-slot :focus-within) .mobile-navigation { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
}