/* Market: one-row search header, filter sidebar (a drawer on phones and tablets), dense result grid. */
.page-shell--market { display: grid; gap: var(--space-4); padding-top: var(--space-3); }
/* The search form is the page grid. Phones: search | Filters, sale/wanted | sort, then results. */
.market-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; }
.market-form > * { grid-column: 1 / -1; min-width: 0; }

/* The title row. The title is for assistive technology on narrow screens. */
.market-heading { display: contents; }
.market-heading h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.market-kinds { grid-column: 1; grid-row: 2; display: flex; gap: .25rem; padding: .2rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-subtle); }
.market-kinds a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .75rem; border-radius: 999px; color: var(--color-text-secondary); font-size: .875rem; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background var(--motion-short), color var(--motion-short); }
.market-kinds a:hover { color: var(--color-text); }
.market-kinds a[aria-current] { background: var(--color-surface); color: var(--color-action); box-shadow: 0 1px 4px rgb(0 0 0 / .08); }

.market-search { grid-column: 1 / 3; grid-row: 1; display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .2rem .2rem .2rem .9rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); transition: border-color var(--motion-short), box-shadow var(--motion-short); }
.market-search:focus-within { border-color: var(--color-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 16%, transparent); }
.market-search > svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-text-secondary); }
.market-search .form-field { flex: 1; min-width: 0; }
.market-search .form-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.market-search .form-field__control input { min-height: 44px; padding: .5rem .3rem; border: 0; background: transparent; box-shadow: none; font-size: 1rem; }
.market-search__clear { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--color-text-secondary); }
.market-search__clear:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.market-search__clear svg { width: 1.1rem; height: 1.1rem; }
.market-search__submit { flex: none; min-height: 44px; padding: .5rem 1.1rem; }
.market-search__submit svg { display: none; width: 1.15rem; height: 1.15rem; }
/* Phones: the submit button carries the magnifier and keeps its text for assistive technology. */
@media (max-width: 39.99rem) {
  .market-search { padding-left: .75rem; }
  .market-search > svg { display: none; }
  .market-search__submit { width: 44px; padding: 0; }
  .market-search__submit svg { display: block; }
  .market-search__submit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Results: toolbar, applied filters, grid. Their boxes join the form grid on phones. */
.market-results { display: contents; }
.market-results > * { grid-column: 1 / -1; min-width: 0; }
.market-toolbar { display: contents; }
.market-toolbar > .form-field { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
.market-toolbar > .form-field .form-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.market-toolbar select { width: 100%; max-width: 9.5rem; min-width: 0; min-height: 44px; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; }
.market-toolbar__summary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; }
.market-toolbar__summary h2:focus:not([data-focus-restored]) { outline: none; }
.market-toolbar__summary h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.market-count { margin: 0; color: var(--color-text-secondary); font-size: .8125rem; font-variant-numeric: tabular-nums; }
/* Zero specificity so a revealed heading ([data-revealed]) can show the summary. */
:where(.market-toolbar__summary:not(:has(.market-count:not(.market-count--default)))) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.market-applied { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; }
.market-active-filters { display: flex; flex-wrap: wrap; gap: .25rem .4rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
/* 44px hit area around a 36px visible pill. */
.market-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-height: 44px; padding: .2rem .5rem .2rem .8rem; border: 4px solid transparent; border-radius: 999px; background: var(--color-surface-subtle); background-clip: padding-box; color: var(--color-text); font-size: .8125rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: background var(--motion-short); }
.market-chip:hover { background-color: color-mix(in srgb, var(--color-action) 12%, var(--color-surface-subtle)); }
.market-chip svg { flex: none; width: .9rem; height: .9rem; color: var(--color-text-secondary); }
.market-applied__clear { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem; font-size: .8125rem; font-weight: 650; }

.market-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; margin-top: var(--space-1); overflow-anchor: none; }
.market-results[aria-busy="true"] :is(.market-feed, .empty-state) { opacity: .55; transition: opacity var(--motion-short); }

/* Denser cards on the market only; other pages keep the shared card size. */
.market-feed .listing-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.market-feed .listing-card__link::after { border-radius: var(--radius-sm); }
.market-feed .listing-card:has(.listing-card__link:focus-visible) { border-radius: var(--radius-sm); }
.market-feed .listing-card__media > .status-badge { top: .45rem; left: .45rem; }
.market-feed .listing-card__body { gap: .3rem; padding: .5rem .1rem .15rem; }
.market-feed .listing-card__body h2 { font-size: .9rem; line-height: 1.3; letter-spacing: -.01em; }
.market-feed .listing-card__specs { max-height: 1.6rem; overflow: hidden; gap: .25rem; }
.market-feed .listing-card__specs li { padding: .1rem .45rem; line-height: 1.4; }
.market-feed .listing-card__facts { gap: .25rem .4rem; font-size: .75rem; }
.market-feed .listing-card__condition { padding: .1rem .45rem; }
.market-feed .listing-card__price { font-size: 1rem; }

.market-pagination { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: var(--space-4); min-height: 44px; overflow-anchor: none; }
.market-pagination__end { margin: 0; color: var(--color-text-secondary); font-size: .875rem; }
.market-next { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; }
.market-new-listings { display: grid; gap: .6rem; padding: 1rem; background: var(--color-surface-subtle); border-radius: var(--radius-sm); }
#market-new-listings:not(:has(*)) { display: none; }
.market-wanted-hook { margin: 0; }
.market-wanted-hook a { font-weight: 650; }

/* Filters: a disclosure without JavaScript, a sidebar on desktop and a modal drawer on smaller screens. */
.market-filters { grid-column: 3; grid-row: 1; min-width: 0; }
/* Without JavaScript the open disclosure takes its own full-width row. */
.market-filters[open]:not(.market-filters--drawer) { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 63.99rem) { .market-form:has(> .market-filters[open]:not(.market-filters--drawer)) .market-search { grid-column: 1 / -1; } }
.market-filters__toggle { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: 650; cursor: pointer; list-style: none; }
.market-filters__toggle::-webkit-details-marker { display: none; }
.market-filters__toggle svg { flex: none; width: 1.2rem; height: 1.2rem; }
.market-filters__badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: auto; padding-inline: .35rem; border-radius: 999px; background: var(--color-action); color: var(--color-text-inverse); font-size: .75rem; font-variant-numeric: tabular-nums; }
.market-filters__panel { display: flex; flex-direction: column; min-width: 0; margin-top: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.market-filters__header { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .75rem; border-bottom: 1px solid var(--color-border); }
.market-filters__header h2 { flex: 1; min-width: 0; font-size: 1rem; }
.market-filters__reset { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; font-weight: 650; text-align: end; }
.market-filters__close { display: none; }
.market-filters__body { display: grid; padding: 0 .75rem; }
.market-filters__footer { display: grid; gap: .5rem; padding: .75rem; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-surface); }
.market-filters__footer .button { width: 100%; min-height: 44px; padding: .55rem 1rem; font-size: .875rem; }

/* Pending-change hints. Empty regions stay in the accessibility tree so the first message is announced. */
.market-status { margin: 0; color: var(--color-text); font-size: .8125rem; line-height: 1.4; }
.market-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.market-toolbar__status { grid-column: 1 / -1; text-align: end; }

.market-filter-group { border-bottom: 1px solid var(--color-border); }
.market-filter-group > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 650; cursor: pointer; list-style: none; }
.market-filter-group > summary::-webkit-details-marker { display: none; }
.market-filter-group > summary svg { flex: none; width: 1rem; height: 1rem; color: var(--color-text-secondary); transition: transform var(--motion-short); }
.market-filter-group[open] > summary svg { transform: rotate(90deg); }
.market-filter-group__body { padding-bottom: .6rem; }

.market-choices { display: grid; margin: 0; padding: 0; border: 0; min-width: 0; }
.market-choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-inline: .35rem; border-radius: var(--radius-sm); font-size: .875rem; cursor: pointer; }
.market-choice:hover { background: var(--color-surface-subtle); }
.market-choice:has(input:checked) { color: var(--color-action); font-weight: 650; }
.market-form [data-focus-restored]:focus { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.market-choice input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-action); }
.market-choice > svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-text-secondary); }
.market-choice > span { min-width: 0; overflow-wrap: anywhere; }
.market-choice--toggle { padding-block: .25rem; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.market-choice--toggle label { flex: 1; min-height: 44px; display: flex; align-items: center; cursor: pointer; }

.market-filters .form-field__control :is(input, select) { min-height: 44px; padding: .5rem .65rem; font-size: 1rem; }
.market-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.market-range__field { display: grid; gap: .2rem; min-width: 0; }
.market-range__field label { color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; }
.market-range__field input { width: 100%; min-width: 0; min-height: 44px; padding: .5rem .6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 1rem; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.market-range__field input::-webkit-inner-spin-button, .market-range__field input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.market-range__field input:focus { border-color: var(--color-action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 16%, transparent); }
.market-range__field input:user-invalid { border-color: var(--color-danger); }
.market-range__dash { padding-bottom: .7rem; color: var(--color-text-secondary); }
.market-range__apply { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-action); }
.market-range__apply:hover { background: var(--color-surface-subtle); }
.market-location { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center; }

@media (max-width: 63.99rem) {
  .market-toolbar__summary:has(h2[data-revealed]), .market-toolbar__summary h2[data-revealed] { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .market-toolbar__summary h2[data-revealed] { font-size: 1.125rem; }
}

/* JavaScript turns the open disclosure into a modal drawer below the desktop breakpoint. */
html.market-drawer-open { overflow: hidden; }
@media (max-width: 63.99rem) {
  .market-filters--drawer[open]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgb(18 24 20 / .56); }
  .market-filters--drawer > .market-filters__panel { position: fixed; z-index: var(--z-sheet); inset: 0 0 0 auto; width: min(100%, 26rem); margin: 0; border: 0; border-radius: 0; box-shadow: var(--shadow-overlay); }
  .market-filters--drawer .market-filters__header { padding: .5rem .75rem .5rem 1rem; }
  .market-filters--drawer .market-filters__header h2 { font-size: 1.125rem; }
  .market-filters--drawer .market-filters__close { display: grid; }
  .market-filters--drawer .market-filters__body { flex: 1; align-content: start; padding: 0 1rem; overflow-y: auto; overscroll-behavior: contain; }
  .market-filters--drawer .market-filters__footer { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
  /* "Show results" applies everything at once in the drawer. */
  .market-filters--drawer .market-range__apply { display: none; }
  .market-filters--drawer .market-range { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .market-filters--drawer .market-location { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 40rem) {
  .market-kinds a { padding-inline: 1.1rem; }
  .market-toolbar select { max-width: 12rem; }
  /* At most four columns, so every full page of 24 listings fills its rows at 2, 3 or 4 columns. */
  .market-feed { grid-template-columns: repeat(auto-fill, minmax(max(11rem, (100% - 3rem) / 4), 1fr)); gap: 1.5rem 1rem; }
}

@media (min-width: 64rem) {
  .page-shell--market { padding-top: var(--space-4); }
  .market-form { grid-template-columns: 14.5rem minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; }
  .market-heading { display: grid; grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "search kinds"; gap: var(--space-3) var(--space-6); align-items: center; }
  .market-heading h1 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; grid-area: title; min-width: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.6vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
  .market-search { grid-area: search; }
  .market-kinds { grid-area: kinds; }
  .market-kinds a { flex: none; }

  .market-results { display: grid; grid-column: 2; grid-row: 2; gap: var(--space-3); }
  .market-results > * { grid-column: auto; }
  .market-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; min-height: 44px; }
  .market-toolbar__summary, .market-toolbar__summary:not(:has(.market-count:not(.market-count--default))) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .market-toolbar__summary h2 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: 1.125rem; }
  .market-toolbar > .form-field { display: flex; align-items: center; gap: .5rem; }
  .market-toolbar > .form-field .form-field__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .8125rem; white-space: nowrap; }
  .market-toolbar select { width: auto; max-width: none; font-size: .875rem; }
  .market-feed { grid-template-columns: repeat(auto-fill, minmax(max(12rem, (100% - 3rem) / 4), 1fr)); gap: 1.5rem 1rem; margin-top: 0; }

  .market-filters, .market-filters[open]:not(.market-filters--drawer) { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--market-header-height, 5.5rem) + var(--space-4)); max-height: calc(100dvh - var(--market-sidebar-top, 11rem) - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-sm); scroll-padding-block-end: calc(var(--market-filters-footer-height, 4.5rem) + var(--space-2)); }
  .market-filters__toggle { display: none; }
  .market-filters__panel { margin-top: 0; }
  /* "Show results" and the pending hint stay visible at the bottom of the sidebar only; phones use the drawer or, without JavaScript, the page flow. */
  .market-filters__footer { position: sticky; bottom: 0; }
  .market-toolbar__status { flex-basis: 100%; }
  .market-filters .form-field__control :is(input, select), .market-range__field input { font-size: .875rem; }
}

@media (min-width: 80rem) {
  .market-heading { grid-template-columns: auto minmax(18rem, 1fr) auto; grid-template-areas: "title search kinds"; }
}

/* Very narrow screens and large text: the sale/wanted switch gets its own row. */
@media (max-width: 22.5rem) {
  .market-kinds { grid-column: 1 / -1; }
  .market-toolbar > .form-field { grid-column: 1 / -1; grid-row: 3; }
  .market-toolbar select { max-width: none; }
  .market-filters[open]:not(.market-filters--drawer) { grid-row: 4; }
  .market-filters__toggle { gap: .35rem; padding-inline: .6rem; }
  .market-filters__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}