/* ══ FIND A TRADE: WHAT THE RESULTS PAGE ADDS ═══════════════════════════ 13 Oct 2026 (rp119), v1 ══
   Sir, 13 Oct: the polishing pass, tab by tab, to 9.8. The page keeps its listing grammar (The
   Modern House: the search on the photograph, the filters as a line of type, the grid). What
   changed is what it says: the bar's filters read the platform's record, the sort says what it
   does, the search box shows what was asked. This sheet carries the filter notes and counts, and
   the band under the grid: three things worth a minute before accepting a price, each a door to the
   page that answers it, then a way to post the job instead. Tokens are the page's own (:root in
   results.html); effects: A3 a ruled index (the doors), A6 numerals, T28 an arrow that steps. */

/* the bar's notes, counts and the sign that a filter is on */
.tmh-filters .f-note { margin: 4px 0 8px; font-family: var(--sans); font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.tmh-filters .f-note-lead { color: var(--ink); font-size: 12.5px; }
.tmh-filters .f-note a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.tmh-filters .f-check { display: flex; align-items: center; gap: 8px; }
.tmh-filters .f-count { margin-left: auto; padding-left: 12px; font-family: var(--sans); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tmh-filters .f-group[data-fg="checks"] .f-body { min-width: 300px; }
.tmh-filters .f-group.has-on h4 { color: var(--navy); }
.tmh-filters .f-group.has-on h4::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--gold-soft); }

/* what was searched, said above the grid, with the way back to everything */
.all-label .all-clear { margin-left: 12px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; letter-spacing: .14em; }
.be-clear { font: inherit; color: var(--navy); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ══ BEFORE YOU ACCEPT A PRICE ══ */
.rz-before { margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.rz-before-h { margin-bottom: clamp(22px, 2.6vw, 34px); }
.rz-k { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.rz-before-h h2 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--navy); }
.rz-doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.rz-doors li + li { border-left: 1px solid var(--line-2); }
.rz-door { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; height: 100%; padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2.2vw, 30px); text-decoration: none; color: inherit;
  transition: background-color 220ms ease; }
.rz-door:hover, .rz-door:focus-visible { background: var(--cream-2); }
.rz-n { font-family: var(--serif-display); font-size: 30px; line-height: 1; color: var(--gold); }
.rz-t { font-family: var(--serif-display); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; color: var(--navy); }
.rz-d { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.rz-go { justify-self: start; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
  padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.rz-go::after { content: '\2192' / ""; display: inline-block; margin-left: 8px; transition: transform 220ms ease; }
.rz-door:hover .rz-go::after, .rz-door:focus-visible .rz-go::after { transform: translateX(3px); }

/* the other way round: post the job */
.rz-post { margin-top: clamp(22px, 2.6vw, 34px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.6vw, 36px); background-color: var(--navy); color: var(--cream); text-decoration: none; position: relative; isolation: isolate; overflow: hidden; }
.rz-post::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 140% at 100% 0%, rgba(212, 169, 67, .18), transparent 60%); }
.rz-post-t { font-family: var(--serif-display); font-size: clamp(21px, 2vw, 28px); line-height: 1.15; }
.rz-post-d { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: rgba(250, 248, 243, .78); }
.rz-post-go { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; background-color: var(--gold-soft); color: var(--navy);
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: transform 220ms ease; }
.rz-post-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 220ms ease; }
.rz-post:hover .rz-post-go { transform: translateY(-1px); }
.rz-post:hover .rz-post-go svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .rz-doors { grid-template-columns: minmax(0, 1fr); }
  .rz-doors li + li { border-left: 0; border-top: 1px solid var(--line-2); }
  .rz-post { grid-template-columns: minmax(0, 1fr); }
  .rz-post-go { justify-self: start; }
  .tmh-filters .f-group[data-fg="checks"] .f-body { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .rz-door, .rz-go::after, .rz-post-go, .rz-post-go svg { transition: none; } }
@media (forced-colors: active) { .rz-post { border: 1px solid CanvasText; } .tmh-filters .f-group.has-on h4::after { background: Highlight; } }

/* the sort, a button and a listbox now (it was a div no key could open) */
.custom-select-trigger { width: 100%; text-align: left; }
.custom-select-trigger:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.custom-select-options { list-style: none; margin: 0; padding: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms !important; }
.custom-select.open .custom-select-options { visibility: visible; transition-delay: 0s !important; }
.custom-select-options:focus { outline: none; }
.custom-select-option.is-at { background: var(--cream-2); }
.custom-select.open .custom-select-options:focus-visible .custom-select-option.is-at { box-shadow: inset 2px 0 0 var(--navy); }

/* the end card's link */
.board-more .bm-s a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* a shut panel is out of the tab order too (its boxes were reachable by Tab while invisible) */
.tmh-filters .f-group .f-body { visibility: hidden; transition: max-height 220ms ease, opacity 180ms ease, visibility 0s linear 220ms; }
.tmh-filters .f-group.open .f-body { visibility: visible; transition-delay: 0s; }
.tmh-filters .f-group h4:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

/* the breadcrumb's mark between crumbs: in the muted ink, not the rule colour (1.46 to 1) */
.tmh-crumb > span[aria-hidden="true"] { color: var(--muted); }

/* a phone: the count and the sort each keep one line (the sort's label broke in two at 390) */
.sort-wrap { white-space: nowrap; }
@media (max-width: 560px) {
  .results-meta { flex-wrap: wrap; row-gap: 12px; }
  .results-meta .sort-wrap { margin-left: auto; }
}

/* rp120: the skip link's -1px margin put it a pixel past the page's left edge; it sits at 0,0 */
a.skip { margin: 0; left: 0; top: 0; }