/* A quiet pavement beneath clear shop-window panels. All scenery is contained. */
:root {
  --paper: #f0ecf7;
  --panel: #fffdfd;
  --ink: #2b2b2b;
  --muted: #5a5a5a;
  --line: #b0b0b0;
  --deep: var(--accent-ink);
  --lilac: var(--accent-soft);
  --blue: var(--accent-soft);
  --soft-blue: var(--accent-soft);
  --panel-edge: #696969;
  --floating-edge: #696969;
  --panel-shadow: 4px 4px 0 #89898935;
  --control-shadow: 2px 2px 0 #89898940;
  --paving-wash: #eaeaea26;
  --street-glow: transparent;
}
:root[data-colour-mode=macho] {
  --paper: #151d30;
  --panel: #1a263b;
  --ink: #f3edf9;
  --muted: #bfbed0;
  --line: #4d5570;
  --deep: #dac6fc;
  --lilac: #27334d;
  --blue: #30466a;
  --soft-blue: #202e46;
  --panel-edge: #69728a;
  --floating-edge: #69728a;
  --panel-shadow: 4px 4px 0 #070c19b3;
  --control-shadow: 2px 2px 0 #070c1977;
  --paving-wash: #080e24bf;
  --street-glow: #e6b45b24;
  --action: #30466a;
}
html { scroll-padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
/* Keep the entire pavement in one viewport layer, behind the scrolling page.
   The large viewport height covers the space revealed by mobile browser bars
   without resizing or shifting the tiles. Edge bounce must not expose a seam. */
html.street-page {
  --paving-wash: #a4adafdb;
  min-height: 100%;
  isolation: isolate;
  overscroll-behavior-y: none;
  background-color: var(--paper);
  image-rendering: pixelated;
}
html.street-page::before {
  content: '';
  position: fixed;
  inset: 0;
  min-height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: linear-gradient(var(--paving-wash), var(--paving-wash)), url('/assets/paving-mossy.webp');
  background-size: auto, 320px 320px;
  background-repeat: repeat;
}
html body.street-site {
  display: flow-root;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
html body.street-site .skip-link:focus {
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
}
/* Modal and fixed controls sit outside the body's padded content box. */
html body.grid-site.street-site dialog {
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  width: min(43rem, calc(100% - var(--page-gutter) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
html body.grid-site.street-site :is(#save-status, .save-status):not(:empty) {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: calc(50% + (env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2);
  max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
}
@media (max-width: 760px) {
  html body.grid-site.street-site dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  html body.grid-site.street-site :is(#save-status, .save-status):not(:empty) {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
.street-site :is(.masthead, main, main.extra-page, .site-nav, footer) {
  --page-width: 68rem;
  --page-gutter: 3rem;
}
html .grid-site.street-site .masthead {
  min-height: 4.5rem;
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  gap: 1rem;
  background: var(--lilac);
  border-color: var(--panel-edge);
  box-shadow: var(--panel-shadow);
  flex-wrap: wrap;
}
html .grid-site.street-site .masthead .wordmark { font-size: 2.25rem; line-height: 2.5rem; }
.street-site .masthead-note { margin-right: auto; font-size: .8125rem; }
.header-tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.header-tools > a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
html .grid-site.street-site .colour-mode { display: flex; flex: 0 0 auto; margin: 0; padding: 2px; gap: 2px; border: var(--stroke-thin) solid var(--panel-edge); background: var(--panel); }
html .grid-site.street-site .colour-mode button { flex: 0 0 auto; min-width: 3.25rem; min-height: 2.25rem; padding: .375rem .5rem; border: 0; box-shadow: none; font-size: .875rem; }
html .grid-site.street-site .colour-mode button[aria-pressed=true] { background: var(--ink); color: var(--panel); }
.street-menu { position: relative; font-size: .875rem; }
html .grid-site.street-site .street-menu > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.street-menu .current-section { text-decoration: underline; }
.street-menu nav { position: absolute; top: calc(100% + 8px); right: 0; width: 13rem; max-width: calc(100vw - 2rem); padding: .5rem; background: var(--panel); border: var(--stroke-thick) solid var(--panel-edge); box-shadow: var(--panel-shadow); z-index: 20; }
.street-menu nav a { display: block; padding: .75rem; min-height: 44px; text-decoration: none; }
.street-menu nav a:is(:hover, [aria-current=page]) { background: var(--soft-blue); text-decoration: underline; }
html .grid-site.street-site .site-nav {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin-top: 1rem;
  border: var(--stroke-thin) solid var(--panel-edge);
  background: var(--panel);
  box-shadow: var(--control-shadow);
}
html body.street-site .site-nav a:nth-child(n) {
  grid-column: auto;
  justify-content: center;
  text-align: center;
  align-items: center;
  border: 0;
  border-right: var(--stroke-thin) solid var(--line);
  box-shadow: none;
  background: transparent;
  translate: none;
  min-height: 44px;
  padding: .625rem .5rem;
  font-size: .875rem;
}
html body.street-site .site-nav a:last-child { border-right: 0; }
html body.street-site .site-nav a[aria-current=page] { background: var(--blue); box-shadow: inset 0 -2px var(--deep); }
html .grid-site.street-site main { gap: 1.5rem; padding-top: 1.5rem; }
/* Wider pavement joints between the slightly narrower reading panels. */
html .grid-site.street-site :is(.places-grid, .plan-grid, .saved-grid,
  .resource-grid, .tools-grid, .discovery-grid, .deals-grid, .support-options,
  .finder-results, .sales-list) { gap: 1.5rem; }
/* A compact opening keeps the search and useful links together. */
html .grid-site.street-site .home-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 1rem;
  padding: 1rem;
  border: var(--stroke-thin) solid var(--panel-edge);
  background: var(--panel);
  box-shadow: var(--panel-shadow), inset 0 -2px var(--street-glow);
  overflow: hidden;
}
html .grid-site.street-site .home-opening > * { margin: 0; min-width: 0; }
.home-search-copy { display: flex; flex-direction: column; gap: .75rem; }
.street-site .home-search-copy > * { margin: 0; }
html .grid-site.street-site .home-opening .welcome-lead { margin: 0; }
html .grid-site.street-site .home-opening h1 { font-size: 2.5rem; line-height: 2.75rem; }
.home-search-copy .eyebrow { color: var(--deep); }
.street-site .home-location { margin-top: .25rem; }
html body.street-site .home-opening .task-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; border-top: var(--stroke-thin) solid var(--line); padding-top: .5rem; }
html body.street-site .task-links a, html body.street-site .page-jumps a {
  display: inline-flex; flex: 0 1 auto; min-height: 44px; align-items: center; width: auto; background: transparent; border: 0; box-shadow: none; translate: none; padding: .5rem 0; font-size: .875rem; text-decoration: underline;
}
html body.street-site .task-links a[aria-current=true] { color: var(--deep); font-weight: 700; text-decoration-thickness: var(--stroke-thick); }
/* Use a calm backdrop for standalone copy. Pavement stays outside reading panels. */
html .grid-site.street-site :is(.intro, .page-heading, .welcome-notes, .welcome-sections) {
  background: var(--panel); border: var(--stroke-thin) solid var(--panel-edge); padding: .75rem 1rem; box-shadow: var(--control-shadow);
}
html .grid-site.street-site :is(.intro, .page-heading) h1 { font-size: 2.5rem; line-height: 2.75rem; }
html .grid-site.street-site :is(.intro, .page-heading) p { margin-bottom: 0; }
html .grid-site.street-site :is(.intro, .page-heading) .eyebrow { margin-bottom: .5rem; }
.street-site .guide-notes { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: flex-start; background: var(--paper); padding: .25rem .75rem; }
.street-site .guide-notes .filter-note { margin: 0; font-size: .8125rem; flex: 0 1 auto; }
.street-site .guide-notes .filter-note summary { min-height: 32px; align-content: center; }
.street-site .guide-notes .filter-note[open] { flex-basis: 100%; }
html .grid-site.street-site .results-heading { margin: 0; padding: 0; }
html .grid-site.street-site :is(.section-heading, .section-lead, .results-heading) { align-items: center; margin-bottom: .75rem; }
html .grid-site.street-site :is(.section-heading h2, .section-lead h2, .results-heading p) { background: var(--paper); padding: .25rem .5rem; }
html .grid-site.street-site :is(.section-heading h2, .welcome-page h2) { font-size: 1.75rem; line-height: 2rem; }
html body.street-site :is(.section-heading > a, .section-heading .row-actions > a, .welcome-notes > a, footer a) {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; border: 0; box-shadow: none; background: transparent; translate: none; text-decoration: underline;
}
.street-site :is(#home-date, .home-fresh > p, #free-window, #free-count, #sale-count, #explore-status, main > .filter-note, main > .location-info) { background: var(--paper); width: fit-content; max-width: 100%; padding: .25rem .5rem; }
.street-site #home-date { display: none; }
html .grid-site.street-site .finder { padding: 1rem; background: var(--soft-blue); }
html .grid-site.street-site .finder .location-tools { border: 0; margin: 0; padding: 0; }
html .grid-site.street-site .finder .location-info { margin: 0; }
html .grid-site.street-site .finder .location-info > summary { min-height: 32px; }
html .grid-site.street-site :is(.plan-controls, .shopping-controls, .explore-form) { background: var(--soft-blue); }
html .grid-site.street-site main > .location-tools { padding: .5rem 1rem; border: var(--stroke-thin) solid var(--line); background: var(--panel); }
/* Reserve one title row for the heading and medal. The explanation gets a full row. */
html .grid-site.street-site .listing-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 1rem; width: 100%; }
html .grid-site.street-site .listing-heading > :is(h2, h3) { grid-area: 1 / 1; margin: 0; min-width: 0; font-size: 1.5rem; line-height: 1.75rem; align-self: center; }
html body.street-site details.pick-award { display: contents; }
html body.street-site .pick-award > summary { grid-area: 1 / 2; width: auto; margin: 0; padding: 0; min-height: 44px; }
html body.street-site .pick-medal { width: 2.5rem; flex-basis: 2.5rem; min-height: 3rem; padding-top: 2px; }
html body.street-site .pick-reason { grid-column: 1 / -1; margin: .75rem 0 0; max-width: 100%; }
html body.street-site .pick-award:not([open]) > .pick-reason { display: none; }
html .grid-site.street-site :is(.place-card, .explore-card, .finder-card, .plan-card, .saved-card, .sale-card) { background: var(--panel); padding: .75rem; gap: .5rem; border-color: var(--panel-edge); }
html .grid-site.street-site .place-card .card-body { padding: 0; gap: .5rem; }
html .grid-site.street-site :is(.price-row, .detail-price) { background: var(--soft-blue); border: 0; border-left: var(--stroke-thick) solid var(--deep); padding: .75rem; margin: 0; }
html .grid-site.street-site .price-basis { font-size: .75rem; margin-bottom: -.5rem; }
html .grid-site.street-site :is(.card-meta, .card-kind) { background: transparent; padding: 0; }
html .grid-site.street-site .card-kind { margin-left: auto; }
html .grid-site.street-site .card-bottom { border-top: var(--stroke-thin) solid var(--line); padding-top: .75rem; align-items: center; }
html .grid-site.street-site .source-date { flex-basis: 100%; font-size: .75rem; }
html .grid-site.street-site :is(.card-deck, .catch) { margin: 0; }
html .grid-site.street-site .card-bottom .details-button { background: var(--blue); }
html .grid-site.street-site :is(.save-button, .follow-button, .text-button) { display: inline-flex; gap: .5rem; align-items: center; justify-content: center; background: transparent; box-shadow: none; border-color: transparent; padding: .5rem; }
.save-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; shape-rendering: crispEdges; }
.save-button[aria-pressed=false] .save-icon { opacity: .5; }
.save-button[aria-pressed=true] .save-icon { color: var(--deep); }
html .grid-site.street-site .save-button[aria-pressed=true] { color: var(--deep); background: var(--soft-blue); }
html .grid-site.street-site .row-actions { flex-wrap: wrap; }
html .grid-site.street-site .row-actions > a:not(.details-button):not(.pixel-button) { background: none; box-shadow: none; border: 0; padding: .5rem 0; text-decoration: underline; }
html .grid-site.street-site footer { background: var(--panel); border: var(--stroke-thin) solid var(--panel-edge); padding: 1rem; margin-bottom: 1.5rem; gap: .5rem 1.5rem; }
html .grid-site.street-site footer .footer-brand { text-decoration: none; }
html .grid-site.street-site .sale-card { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; }
html .grid-site.street-site .date-tile { display: flex; flex-direction: column; align-items: center; gap: 0; padding: .5rem .25rem; background: var(--soft-blue); border: var(--stroke-thin) solid var(--line); }
html .grid-site.street-site .sale-costs { background: var(--soft-blue); padding: .75rem; }
@media (min-width: 1001px) {
  html .grid-site.street-site .finder { display: grid; grid-template-columns: 1fr 1.5fr; gap: .75rem 1.5rem; }
  .street-site .finder .location-tools { grid-column: 1; grid-row: 1; }
  .street-site .finder .type-filters { grid-column: 1; grid-row: 2; }
  .street-site .finder .primary-filters { grid-column: 2; grid-row: 1 / 3; }
  .street-site .finder .extra-filters { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  html .grid-site.street-site .home-opening h1 { font-size: 2.25rem; }
}
@media (max-width: 760px) {
  .street-site :is(.masthead, main, main.extra-page, .site-nav, footer) { --page-gutter: 1.25rem; }
  html .grid-site.street-site .masthead { padding: .75rem; gap: .5rem; }
  html .grid-site.street-site .masthead .wordmark { font-size: clamp(1.25rem, 6.5vw, 1.75rem); }
  .header-tools { gap: .75rem; }
  html .grid-site.street-site .colour-mode button { min-width: 2.75rem; padding-inline: .375rem; }
  html .grid-site.street-site .home-opening { grid-template-columns: 1fr; padding: .75rem; }
  html .grid-site.street-site .home-opening h1 { font-size: 2rem; line-height: 2.25rem; }
  html .grid-site.street-site .home-opening .task-links { gap: 0 .75rem; }
  html .grid-site.street-site .site-nav a:nth-child(n) { font-size: .8125rem; padding: .5rem .25rem; }
  html .grid-site.street-site :is(.intro, .page-heading) h1 { font-size: 2.25rem; line-height: 2.5rem; }
  html .grid-site.street-site .intro-copy { margin-top: .5rem; }
  html .grid-site.street-site :is(.listing-heading > h2, .listing-heading > h3) { font-size: 1.375rem; line-height: 1.75rem; }
  html .grid-site.street-site .sale-card { grid-template-columns: 1fr; }
  html .grid-site.street-site .date-tile { flex-direction: row; justify-content: flex-start; gap: .5rem; width: fit-content; padding: .25rem .5rem; }
  html .grid-site.street-site main { gap: 1.25rem; }
  html .grid-site.street-site :is(.places-grid, .plan-grid, .saved-grid,
    .resource-grid, .tools-grid, .discovery-grid, .deals-grid, .support-options,
    .finder-results, .sales-list) { gap: 1.25rem; }
}
@media (max-width: 480px) {
  html .grid-site.street-site .masthead { justify-content: space-between; }
  .header-tools { width: 100%; margin: 0; }
  html .grid-site.street-site .header-tools .colour-mode { margin-left: auto; }
  html .grid-site.street-site :is(.section-heading h2, .welcome-page h2) { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Top-edge pulls move the foreground together, never the fixed paving layer. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Clip translated overflow to the body's original box, including short pages.
     Explicit root overflow keeps the body's clip from propagating to the viewport. */
  html.street-page[data-edge-bounds] { overflow-y: auto; }
  html.street-page[data-edge-bounds] > body.street-site { overflow-x: clip; overflow-y: clip; }
}
@media (prefers-reduced-motion: reduce), print {
  .street-site > [data-edge-pulling] { translate: none !important; }
}
/* Only active foreground panels get a tiny, bounded stretch. The document,
   menus, fixed pavement and native dialog layer keep their own geometry. */
@media screen and (prefers-reduced-motion: no-preference) {
  .street-site main [data-scroll-stretching] {
    scale: var(--street-stretch-x, 1) var(--street-stretch-y, 1);
    transform-origin: center;
  }
}
@media (forced-colors: active) {
  html.street-page::before { display: none; }
  html .grid-site.street-site .home-opening { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  html .grid-site.street-site .home-opening .task-links a { font-size: .8125rem; }
  html .grid-site.street-site .home-opening .eyebrow { display: none; }
}

html .grid-site.street-site .welcome-page .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
html .grid-site.street-site .welcome-page .section-heading > a { max-width: 9rem; text-align: right; justify-content: flex-end; }
/* Keep the wordmark on one line beside the motto on small phones. */
@media (max-width: 380px) {
  html .grid-site.street-site .masthead .wordmark {
    font-size: clamp(1rem, calc(10vw - 1rem), 1.375rem);
    line-height: 2rem;
  }
}

/* Current-time controls share the paving tiles used by location and filters. */
html .grid-site.street-site .availability-tools {
  grid-column: 1 / -1;
  background: var(--panel);
  padding: .75rem;
  min-width: 0;
}
html .grid-site.street-site .availability-tools .row-actions { display: flex; gap: .5rem; margin: 0; }
html .grid-site.street-site .availability-tools p { margin: .5rem 0 0; font-size: .875rem; line-height: 1.4; }
@media (min-width: 1001px) {
  html .grid-site.street-site .finder:has(.availability-tools) > .availability-tools { grid-row: 1; }
  html .grid-site.street-site .finder:has(.availability-tools) > .location-tools { grid-row: 2; }
  html .grid-site.street-site .finder:has(.availability-tools) > .type-filters { grid-row: 3; }
  html .grid-site.street-site .finder:has(.availability-tools) > .primary-filters { grid-row: 2 / 4; }
}