/* The market section (Oct 28, 2026): /market/<area>/, its neighborhoods and their monthly pages. Builds on site.css —
   the .market / .table--market / .market-chart rules there — and adds the five tiles, the map, the neighborhood cards,
   the chart controls and the wide month-by-month tables. Black and white like the rest of the site; the only colour is
   the map (a grey street map with the neighborhoods in blue, shaded green rising / red declining; light or dark) and the
   chart's series lines. */

/* five tiles */
.stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.stats--five .stat__num { font-size: clamp(30px, 2.9vw, 46px); }
.stats--five .stat__cap { font-size: 14px; }
@media (max-width: 1000px) { .stats--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 340px) { .stats--five { grid-template-columns: 1fr; } }
.page-market .hero--compact.hero--page { min-height: clamp(380px, 34vw, 480px); }
.page-market .section-head .lead { max-width: 820px; }
.page-market .section-head .lead a { text-decoration: underline; text-underline-offset: 3px; }

/* the map: OpenStreetMap through OpenFreeMap, drawn by MapLibre (Matt, Oct 28, 9:32 PM: "more like a google maps"), with
   Matthew's zones on top in blue, shaded by measure; a Light | Dark switch (the Local Map's, Oct 9), the pick remembered */
.mkmap { margin-top: 28px; border: 1px solid var(--hair); background: var(--white); position: relative; z-index: 0; isolation: isolate; }   /* its own stacking context: the map's controls stay under the fixed header and the Let's-talk pill */
.mkmap__ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-family: var(--sans); font-size: 14px; }
.mkmap__ctl select, .mkctl select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--hair); background: var(--white); color: var(--ink); }
.mkmap__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; color: var(--body); font-size: 13px; }
.mkmap__legend i { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: middle; border: 1px solid var(--ink); }
/* the swatches show the shading as it lands on the map (the fill at its opacity over the land colour, light and dark) */
.mkmap__legend .is-up, .mkpop .badge.is-up { background: #d7e7dc; }
.mkmap__legend .is-down, .mkpop .badge.is-down { background: #f1ddd9; }
.mkmap__legend .is-flat, .mkpop .badge.is-flat { background: #e7e9eb; }
.mkmap--dark .mkmap__legend .is-up { background: #1d3328; }
.mkmap--dark .mkmap__legend .is-down { background: #4a2219; }
.mkmap--dark .mkmap__legend .is-flat { background: #222a33; }
.mkmap--dark .mkmap__legend i { border-color: #6f6f6f; }
.mkmap__look { display: inline-flex; border: 1px solid var(--hair); }
.mkmap__look button { font: inherit; font-size: 13px; padding: 5px 10px; background: var(--white); color: var(--ink); border: 0; cursor: pointer; }
.mkmap__look button + button { border-left: 1px solid var(--hair); }
.mkmap__look button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mkmap__look button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mkmap__map { height: 640px; width: 100%; background: #f2f3f0; }   /* the light style's land colour, shown until the map draws */
.mkmap--dark .mkmap__map { background: #0c0c0c; }
@media (max-width: 700px) { .mkmap__map { height: 460px; } }
.mkmap__map canvas:focus { outline: none; }
.mkmap .maplibregl-ctrl-group { border-radius: 0; box-shadow: none; border: 1px solid var(--hair); }
.mkmap .maplibregl-ctrl-group button { width: 32px; height: 32px; }
.mkmap .maplibregl-ctrl-attrib { font-family: var(--sans); font-size: 11px; background: rgba(255, 255, 255, .85); }
.mkmap .maplibregl-ctrl-attrib a { color: var(--body); }
.mkmap--dark .maplibregl-ctrl-group { background: #2a2a2a; border-color: #3d3d3d; }
.mkmap--dark .maplibregl-ctrl-group button + button { border-top-color: #3d3d3d; }
.mkmap--dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.mkmap--dark .maplibregl-ctrl-attrib { background: rgba(20, 20, 20, .85); color: #bdbdbd; }
.mkmap--dark .maplibregl-ctrl-attrib a { color: #d6d6d6; }
.mkmap .maplibregl-cooperative-gesture-screen { font-family: var(--sans); font-size: 15px; }
.mkmap--offline::after { content: 'The street map could not be loaded right now; the neighborhoods still show.'; position: absolute; left: 12px; bottom: 12px; z-index: 2; font: 12px/1.4 var(--sans); color: var(--body); background: rgba(255, 255, 255, .9); padding: 6px 10px; border: 1px solid var(--hair); }
.mkpopup .maplibregl-popup-content { font-family: var(--sans); padding: 16px 18px 14px; border-radius: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.mkpopup .maplibregl-popup-close-button { font-size: 20px; width: 28px; height: 28px; line-height: 28px; color: var(--muted); }
.mkpopup .maplibregl-popup-close-button:hover { background: transparent; color: var(--ink); }
.mkpop h4 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0 24px 8px 0; }
.mkpop .badge { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; margin-bottom: 8px; }
.mkpop .badge b { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.mkpop table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 8px; }
.mkpop td, .mkpop th { padding: 3px 4px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; }
.mkpop td:first-child, .mkpop th:first-child { text-align: left; }
.mkpop .btn { display: block; text-align: center; margin-top: 8px; }
.mkpop .sub { font-size: 12px; color: var(--muted); }

/* Neighborhood deep dive (Matt, Oct 28, 1:43 PM): a card per neighborhood with a zoomed-in snapshot of its boundary on the
   same map (tools/market_thumbs.py, a static image — no live map on the cards), three numbers, and the page behind it.
   card → page → breadcrumb back */
.mkcards { margin-top: 40px; }
.mkcard { text-decoration: none; display: flex; flex-direction: column; padding: 0 0 20px; border: 1px solid var(--hair); background: var(--white); overflow: hidden; }
a.mkcard:hover { border-color: var(--ink); }
.mkcard__map { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--hair); background: var(--ivory); }
.mkcard__map--none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--sans); font-size: 13px; }
.mkcard .column__title { padding: 18px 20px 0; }
.mkcard__line, .mkcard__sub, .mkcard__cta { padding: 0 20px; }
.mkcard__line { margin-top: 8px; color: var(--body); }
.mkcard strong { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.mkcard__sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.mkcard__cta { display: block; margin-top: 14px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.mkcard--soon { opacity: .6; }

/* The banner under the map (Matt, Oct 28, 2:33 PM: "a banner section that says 'Dive deeper on the neighborhoods'") — the
   cards live on /market/<area>/neighborhoods now, to keep the main page light. */
.mkbanner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 32px; padding: 32px 36px; background: var(--ink); color: var(--white); }
.mkbanner .eyebrow { color: rgba(255, 255, 255, 0.7); }
.mkbanner h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; margin: 6px 0 10px; color: var(--white); }
.mkbanner p { max-width: 58ch; color: rgba(255, 255, 255, 0.82); font-size: var(--lead); line-height: 1.6; margin: 0; }
.mkbanner .btn--fill { background: var(--white); color: var(--ink); border-color: var(--white); white-space: nowrap; }
.mkbanner .btn--fill:hover { background: var(--ivory); }
.mkmore__link { margin-top: 24px; }
.mkdetails--bars { margin-top: 14px; padding: 10px 0 0; border-top: 1px solid var(--hair); }
.mkdetails--bars summary { font-size: 14px; font-family: var(--sans); }
.mkdetails--bars .market__table { max-width: none; }
.mkdetails--bars .table--history tbody th { min-width: 0; }

/* The month, number by number (Matt, Oct 28, 1:47 PM — RealTracs' own shape): the 16-row table, and beside it the bars for
   the pressed row, this calendar month in every year on file. The three longer tables fold up underneath (.mkmore). */
.mkmonth { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px 48px; align-items: start; }
@media (max-width: 960px) { .mkmonth { grid-template-columns: 1fr; } }
.mkmonth__table .market__table { margin-top: 0; }
.mkrow { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.mkrow:hover { text-decoration-style: solid; color: var(--ink); }
.mkrow[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration-style: solid; text-decoration-color: var(--ink); }
.market .table--yoy tr:has(.mkrow[aria-pressed="true"]) { background: var(--ivory); }
.market .table--yoy .is-change.is-up::after { content: " ↑"; color: #2e7d4f; }
.market .table--yoy .is-change.is-down::after { content: " ↓"; color: #b5452d; }
.mkbars { position: sticky; top: calc(var(--header-h) + 16px); border: 1px solid var(--hair); background: var(--white); padding: 18px 20px 16px; }
@media (max-width: 960px) { .mkbars { position: static; order: -1; } }   /* phones: the bars first, the table under them; a tap on a row brings the bars back into view (market.js) */
#mk-bars { scroll-margin-top: calc(var(--header-h) + 8px); }
.mkbars__title { font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--ink); margin: 0; }
.mkbars__sub { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.mkbars__svg { display: block; width: 100%; height: auto; margin-top: 10px; font-size: 12px; }
.mkb-axis { stroke: var(--ink); stroke-width: 1; }
.mkb-bar { fill: #cfcac2; }
.mkb-bar.is-now { fill: var(--ink); }
.mkb-val { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); }
.mkb-year { font-family: var(--mono); font-size: 11px; fill: var(--muted); letter-spacing: 0.04em; }
.mkbars .market__foot { margin-top: 6px; }
.mkbars .oneliner { display: inline-block; margin-top: 10px; }
.mkmonth__table, .mkmore__body { display: grid; gap: 28px; }   /* the table and its footnote keep .market's spacing inside the block */
.mkmore { margin-top: 28px; }
.mkmore[open] > summary { margin-bottom: 20px; }
.mkpager { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 32px; }

/* chart controls (shown once js/market.js has loaded) */
.mkctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 18px 0 6px; font-family: var(--sans); font-size: 14px; }
.mkctl label { display: inline-flex; gap: 8px; align-items: center; }
.mkctl__win { display: inline-flex; border: 1px solid var(--hair); }
.mkctl__win button { font: inherit; font-size: 13px; padding: 6px 12px; background: var(--white); color: var(--ink); border: 0; border-right: 1px solid var(--hair); cursor: pointer; }
.mkctl__win button:last-child { border-right: 0; }
.mkctl__win button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mkchips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mkchips button { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid var(--hair); background: var(--white); color: var(--body); border-radius: 999px; cursor: pointer; }
.mkchips button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--ivory); }
.mkchips button .mc-key { width: 18px; margin-right: 8px; vertical-align: middle; }
#mk-now, #mk-head, #mk-hoods, #mk-numbers, #mk-charts, #mk-faq, #mk-all, #mk-archive { scroll-margin-top: calc(var(--header-h) + 8px); }   /* jump links and a shared #chart?… link land with the heading clear of the fixed header */
/* Section jumps (Matt, Oct 28, 3:01 PM): pills under the highlights; at the end of every section a small underlined
   "Back to highlights" with a circled up-arrow before it (text, not a pill). */
.mkjump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.mkjump__pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; background: var(--white); transition: background-color 150ms ease, color 150ms ease; }
.mkjump__pill:hover, .mkjump__pill:focus-visible { background: var(--ink); color: var(--white); }
.mkback-wrap { margin-top: 36px; }
.mkback { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13px; color: var(--body); text-decoration: none; }
.mkback__icon { flex: 0 0 auto; color: var(--ink); }
.mkback__text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.mkback:hover .mkback__text, .mkback:focus-visible .mkback__text { color: var(--ink); text-decoration-color: var(--ink); }
.band + .section .mkback-wrap { display: none; }
.market-chart { max-width: none; }
.market-chart__svg { max-width: 980px; }
/* Series colours (Oct 28, 2026, 1:40 PM — Matt: "use more colors on the graph so that we can differentiate what represents what").
   Bound to the series, not to its place among the ones shown: market.py gives every series a hue 0–4 (a median/average pair
   shares one; the average is dashed). The five hues pass the dataviz validator on white and on ivory: lightness band,
   chroma floor, colour-blind separation (worst adjacent pair ΔE 13.0 deutan), normal-vision floor, 3:1 contrast. */
.mc-h0 { --mc: #2f5d9b; } .mc-h1 { --mc: #c0562c; } .mc-h2 { --mc: #0f9c93; } .mc-h3 { --mc: #ad8520; } .mc-h4 { --mc: #8e58ad; }
.mc-line.mc-h0, .mc-line.mc-h1, .mc-line.mc-h2, .mc-line.mc-h3, .mc-line.mc-h4 { stroke: var(--mc); stroke-width: 2; }
.mc-line.mc-dash { stroke-dasharray: 6 4; }
.mc-dot.mc-h0, .mc-dot.mc-h1, .mc-dot.mc-h2, .mc-dot.mc-h3, .mc-dot.mc-h4 { fill: var(--mc); }
.mc-key.mc-h0, .mc-key.mc-h1, .mc-key.mc-h2, .mc-key.mc-h3, .mc-key.mc-h4 { border-top: 2.5px solid var(--mc); }
.mc-key.mc-key--dash { border-top-style: dashed; }
.mkchips button[aria-pressed="false"] .mc-key { opacity: 0.45; }   /* the chip keeps its colour so the reader can find the series; muted until it is shown */
.mc-hover { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.mktip { position: absolute; pointer-events: none; background: var(--white); border: 1px solid var(--ink); padding: 8px 10px; font-size: 12px; line-height: 1.5; font-family: var(--sans); color: var(--ink); white-space: nowrap; z-index: 5; }
.mktip b { font-family: var(--mono); font-weight: 400; display: block; color: var(--muted); margin-bottom: 2px; }
#mk-svg { position: relative; }

/* the wide month-by-month tables: a scrolling table at every width (site.css stacks the 3-column one on phones) */
.market__table--wide { max-width: none; }
.market .table--history td, .market .table--history thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; padding-right: 0; }
.market .table--history tbody th { min-width: 140px; white-space: nowrap; }
@media (max-width: 600px) {
  .market .table--history thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .market .table--history, .market .table--history tbody, .market .table--history caption { display: revert; }
  .market .table--history tr { display: table-row; padding: 0; border: 0; }
  .market .table--history tbody th { display: table-cell; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); min-width: 120px; }
  .market .table--history td { display: table-cell; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; color: var(--body); }
  .market .table--history td::before { content: none; }
}
.mkdetails { border-top: 1px solid var(--ink); padding: 14px 0; }
.mkdetails summary { cursor: pointer; font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; color: var(--ink); }
.mkdetails[open] summary { margin-bottom: 14px; }
.mkall { gap: 0; }
.mkarchive a { margin-right: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); white-space: nowrap; }
.mkarchive th { width: 80px; }