/* Discovery page (/businesses): search bar, cuisine rail, filter sidebar and shop cards.
   Built only from the semantic tokens in ui_tokens.css; see UI_STYLING.md. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.results-page { min-height: 65vh; }

/* Search bar: how to get the food, where, and what to look for. */
.search-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.search-form { margin: 0; }
.search-form-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.service-switch { display: inline-flex; flex: none; gap: var(--space-1); min-width: 0; margin: 0; padding: var(--space-1); border: 0; border-radius: var(--radius-pill); background: var(--color-canvas); }
.service-option { position: relative; display: flex; }
/* Each option's input also covers the switch padding, giving a 48px-high target. */
.service-option input { position: absolute; inset: calc(-1 * var(--space-1)) 0; width: 100%; height: calc(100% + 2 * var(--space-1)); margin: 0; opacity: 0; cursor: pointer; }
.service-option span { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 40px; padding-inline: var(--space-4); border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: var(--type-body); line-height: var(--type-body-line); font-weight: 600; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.service-option input:checked + span { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-raised); }
.service-option input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.search-fields { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-width: 0; }
.search-field { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 48px; padding-inline: var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-muted); }
.search-field:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 1px var(--color-focus); }
.search-field:has([aria-invalid="true"]) { border-color: var(--color-danger); }
.postcode-field { flex: 0 1 220px; }
.query-field { flex: 1 1 320px; }
.marketplace .search-field input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-text); font-size: var(--type-body-lg); }
.marketplace .search-field input:focus-visible { outline: none; }
.postcode-field input { text-transform: uppercase; }
.search-field input::placeholder { color: var(--color-text-muted); opacity: 1; text-transform: none; }
.search-submit { flex: none; }

/* Cuisine rail: each choice is an animated food object over a label, with no pill chrome. */
.cuisine-rail { margin: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.cuisine-rail-frame { position: relative; }
.cuisine-rail-track { display: flex; gap: var(--space-1); padding-block: var(--space-3) var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.cuisine-rail-track::-webkit-scrollbar { display: none; }
.cuisine-rail-frame.can-scroll-forward .cuisine-rail-track { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
.cuisine-rail-frame.can-scroll-back .cuisine-rail-track { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); }
.cuisine-rail-frame.can-scroll-back.can-scroll-forward .cuisine-rail-track { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
.marketplace .cuisine-option { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 84px; padding: var(--space-1) var(--space-2) var(--space-2); border: 0; border-radius: var(--radius-tile); background: none; color: var(--color-text); font: inherit; cursor: pointer; scroll-snap-align: start; }
.marketplace .cuisine-option:focus-visible { outline-offset: 0; }
.cuisine-object { width: 64px; height: 64px; transition: transform var(--motion-medium) var(--ease-standard); }
.cuisine-option-label { position: relative; padding-bottom: var(--space-1); font-size: var(--type-label); line-height: var(--type-label-line); font-weight: 600; white-space: nowrap; }
.cuisine-option-label::after { content: ""; position: absolute; right: 16%; bottom: 0; left: 16%; height: 3px; border-radius: var(--radius-pill); background: currentColor; transform: scaleX(0); transition: transform var(--motion-medium) var(--ease-standard); }
.cuisine-option.selected .cuisine-option-label { color: var(--color-brand); }
.cuisine-option.selected .cuisine-option-label::after { transform: scaleX(1); }
.cuisine-option.selected .cuisine-object { transform: translateY(-2px) scale(1.08); }
.rail-arrow { position: absolute; top: 50%; z-index: var(--layer-raised); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -28px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-popover); cursor: pointer; }
.rail-arrow-back { left: calc(var(--space-3) * -1); }
.rail-arrow-back .ui-icon { transform: scaleX(-1); }
.rail-arrow-forward { right: calc(var(--space-3) * -1); }
@media (hover: hover) {
  .cuisine-option:hover .cuisine-object { transform: translateY(-2px) scale(1.06); }
  .cuisine-option:hover .cuisine-option-label::after { transform: scaleX(.5); }
  .cuisine-option.selected:hover .cuisine-option-label::after { transform: scaleX(1); }
}
@media (pointer: coarse) { .rail-arrow { display: none; } }

/* Shared three.js surfaces: a canvas over a symbol or gradient that stays when WebGL cannot run. */
.food-scene { position: relative; display: block; overflow: hidden; }
.food-scene-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.food-scene-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; transition: opacity var(--motion-medium) var(--ease-standard); }
.food-scene.is-live .food-scene-fallback { opacity: 0; }

/* Results with the filter sidebar on wide screens. */
.discovery-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; padding-block: var(--space-6) var(--space-16); }
.discovery-layout.has-filters { grid-template-columns: 248px minmax(0, 1fr); }
.filter-sidebar { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.filter-sheet-header { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; margin-bottom: var(--space-2); }
.filter-sheet-header h2 { flex: 1; margin: 0; font-size: var(--type-title); line-height: var(--type-title-line); letter-spacing: -.025em; }
.marketplace .clear-filters { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-size: var(--type-label); font-weight: 600; text-underline-offset: 3px; }
.filter-sheet-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-canvas); color: var(--color-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.filters { display: grid; margin: 0; }
.filter-group { min-width: 0; margin: 0; padding: var(--space-4) 0; border: 0; border-top: 1px solid var(--color-border); }
.filter-group legend { float: left; width: 100%; margin: 0 0 var(--space-2); padding: 0; font-size: var(--type-body-lg); line-height: var(--type-body-lg-line); font-weight: 700; }
.filter-group legend + * { clear: both; }
.filter-option { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: var(--type-body); line-height: var(--type-body-line); cursor: pointer; }
.marketplace .filter-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--color-brand); cursor: pointer; }
.filter-option > span:first-of-type { flex: 1; min-width: 0; }
.filter-option-count { flex: none; color: var(--color-text-muted); font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.filter-more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-size: var(--type-label); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more[open] > summary { display: none; }
.filter-actions { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.filter-actions .primary-button { width: 100%; }
.js .filter-actions:not(:has(> :not([hidden]))) { display: none; }
.filter-sheet-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--type-body); font-weight: 600; cursor: pointer; }
.filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-on-action); font-size: var(--type-caption); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Results heading, states and shop cards. */
.results-column { min-width: 0; }
.results-region { transition: opacity var(--motion-medium) var(--ease-standard); }
.results-region[aria-busy="true"] { opacity: .55; }
.results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.results-heading h2 { margin: 0; font-size: var(--type-title); line-height: var(--type-title-line); letter-spacing: -.025em; }
.results-count { flex: none; color: var(--color-text-muted); font-size: var(--type-body); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-8) var(--space-6); }
.shop-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius-tile); }
.shop-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-tile); background: var(--color-brand-subtle); isolation: isolate; }
.shop-card-scene { position: absolute; inset: 0; transition: transform var(--motion-slow) var(--ease-standard); }
.shop-card-fallback { background: radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--color-brand) 32%, transparent), transparent 55%), radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 50%), var(--color-brand-subtle); }
.shop-card-logo { position: absolute; bottom: var(--space-3); left: var(--space-3); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-brand); box-shadow: var(--shadow-raised); font-size: var(--type-body); font-weight: 750; letter-spacing: .02em; }
.shop-card-tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2) 2px 6px; border-radius: var(--radius-pill); background: var(--color-brand-fixed); color: var(--color-on-brand-fixed); font-size: var(--type-caption); line-height: 1.25rem; font-weight: 700; }
.shop-card-tag .ui-icon { width: 14px; height: 14px; }
.shop-card.is-closed .shop-card-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--color-scrim); }
.shop-card-state { position: absolute; top: 50%; left: 50%; z-index: 2; max-width: calc(100% - 2 * var(--space-3)); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-overlay-label); color: var(--color-on-overlay); font-size: var(--type-body); line-height: var(--type-body-line); font-weight: 700; text-align: center; transform: translate(-50%, -50%); }
.shop-card-body { display: grid; gap: 2px; min-width: 0; }
.shop-card-name { margin: 0; overflow: hidden; font-size: var(--type-body-lg); line-height: var(--type-body-lg-line); font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.marketplace .shop-card-link { text-decoration: none; }
.shop-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-tile); }
.marketplace .shop-card-link:focus-visible { outline: none; }
.shop-card:has(.shop-card-link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.shop-card-cuisines, .shop-card-meta, .shop-card-fees { margin: 0; font-size: var(--type-label); line-height: var(--type-label-line); }
.shop-card-cuisines { overflow: hidden; color: var(--color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.shop-card-meta { color: var(--color-text-muted); }
.shop-card-meta .status { font-size: inherit; }
.shop-card-fees { color: var(--color-text); }
@media (hover: hover) { .shop-card:hover .shop-card-scene { transform: scale(1.03); } }
.distance-note { margin: var(--space-8) 0 0; color: var(--color-text-muted); font-size: var(--type-caption); line-height: var(--type-caption-line); }
.empty-state { padding: var(--space-12) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); text-align: center; }
.empty-symbol { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-tile); background: var(--color-brand-subtle); color: var(--color-brand); }
.empty-symbol .ui-icon { width: 24px; height: 24px; }
.empty-state h2, .empty-state h3 { margin: var(--space-4) 0 var(--space-3); font-size: var(--type-title); line-height: var(--type-title-line); letter-spacing: -.025em; }
.empty-state p { max-width: 480px; margin-inline: auto; color: var(--color-text-muted); font-size: var(--type-body); }

/* Below the wide layout the sidebar becomes a bottom sheet (or stays inline without JavaScript). */
@media (max-width: 899px) {
  .discovery-layout.has-filters { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .filter-sidebar { position: static; max-height: none; overflow: visible; }
  .js .filter-sheet { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--layer-sheet); display: flex; flex-direction: column; max-height: min(88dvh, 760px); padding-inline: var(--space-4); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-surface); box-shadow: var(--shadow-dialog); transform: translateY(100%); visibility: hidden; transition: transform var(--motion-slow) var(--ease-standard), visibility 0s linear var(--motion-slow); }
  .js .filter-sheet.is-open { box-shadow: var(--shadow-dialog), 0 0 0 100vmax var(--color-scrim); transform: none; visibility: visible; transition: transform var(--motion-slow) var(--ease-standard), visibility 0s; }
  .js .filter-sheet-header { flex: none; margin: 0; padding-block: var(--space-3); }
  .js .filter-sheet .filters { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .js .filter-actions { position: sticky; bottom: 0; padding-block: var(--space-3); background: var(--color-surface); }
  body.has-open-sheet, body.has-open-sheet .marketplace-content { overflow: hidden; }
}
@media (max-width: 760px) {
  .search-form-inner { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-block: var(--space-3); }
  .service-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-option span { padding-inline: var(--space-2); font-size: var(--type-label); }
  .search-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .postcode-field { grid-column: 1 / -1; }
  .search-submit { padding-inline: var(--space-4); }
  .cuisine-object { width: 56px; height: 56px; }
  .marketplace .cuisine-option { min-width: 76px; padding-inline: var(--space-1); }
  .results-heading { flex-direction: column; gap: var(--space-1); }
  .shop-grid { gap: var(--space-6) var(--space-4); }
}
@media (max-width: 520px) {
  .search-submit .ui-icon { display: none; }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .service-option span, .cuisine-object, .cuisine-option-label::after, .food-scene-fallback, .results-region, .shop-card-scene, .js .filter-sheet, .js .filter-sheet.is-open { transition: none; }
}