/* market.css: market snapshot + blog styles (v24). Loaded only by /market/ and /blog/ pages. Mirrors the additive block in styles.css v202. */

/* v17: market snapshot sample pages */
.mkt-sample { margin: 1.25rem 0 0; padding: .7rem 1rem; border: 1px solid var(--line-gold); color: #e6e1d7; font-size: .9rem; max-width: 46rem; }
.mkt-explain { max-width: 52rem; margin: 0 0 2rem; color: #d9d4ca; }
.mkt-explain p, .mkt-legal p, .mkt-method p, .mkt-panel > p { color: #d9d4ca; }
.mkt-mls-note { font-size: .9rem; color: #efe2bd !important; }
.mkt-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mkt-card { background: #171717; border: 1px solid var(--line-gold); padding: 1.3rem 1.25rem 1.2rem; display: flex; flex-direction: column; }
.mkt-card h2 { font-size: 1.45rem; margin: 0; color: #fff; }
.mkt-seat { margin: .15rem 0 .8rem; color: #bdb7ac; font-size: .85rem; }
.mkt-block { border-top: 1px solid var(--line-gold); padding: .8rem 0 .4rem; }
.v8 .mkt-card .mkt-sub, .mkt-sub { font-family: var(--font-body); line-height: 1.3; font-size: .72rem !important; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #e4c87c; margin: 0 0 .55rem; font-weight: 650; }
.mkt-stats { margin: 0; display: grid; gap: .55rem; }
.mkt-stats div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.mkt-stats dt { color: #bdb7ac; font-size: .85rem; }
.mkt-stats dd { margin: 0; color: #fff; font-weight: 650; text-align: right; font-size: 1rem; }
.mkt-dd-sub { display: block; font-weight: 400; font-size: .75rem; color: #bdb7ac; }
.mkt-stats dd.mkt-na { font-weight: 400; color: #d9d4ca; font-size: .78rem; max-width: 13.5rem; line-height: 1.35; }
.mkt-stats dd .mkt-dd-sub { max-width: 13.5rem; margin-left: auto; }
.mkt-stats-lg dd .mkt-dd-sub { margin-left: 0; }
.mkt-flag { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border: 1px solid #e4c87c; color: #efe2bd; font-size: .65rem; font-weight: 600; letter-spacing: .04em; vertical-align: middle; }
.mkt-asof { color: #efe2bd; font-size: .8rem; margin: .7rem 0 .3rem; }
.mkt-note { color: #bdb7ac; font-size: .8rem; line-height: 1.45; margin: .3rem 0; }
.mkt-soon { display: inline-block; margin: 0 0 .35rem; padding: .2rem .6rem; background: #2a2620; color: #efe2bd; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.mkt-links { margin: auto 0 0; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; align-items: center; font-size: .9rem; }
.mkt-links a:not(.btn) { color: #efe2bd; text-decoration: underline; }
.mkt-btn { padding: .55rem .9rem; font-size: .72rem; }
.mkt-legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-gold); max-width: 52rem; font-size: .9rem; }
.mkt-legal a, .mkt-method a, .mkt-explain a { color: #efe2bd; text-decoration: underline; }
.mkt-detail { max-width: 62rem; }
.mkt-panel { background: #141414; border: 1px solid var(--line-gold); padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.mkt-panel h2 { margin: 0 0 .4rem; color: #fff; }
.mkt-panel h3 { margin: 2rem 0 .6rem; color: #fff; font-size: 1.25rem; }
.mkt-stats-lg { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
.mkt-stats-lg div { display: block; background: #1d1d1d; padding: .9rem 1rem; border: 1px solid rgba(228,200,124,.2); }
.mkt-stats-lg dd { text-align: left; font-size: 1.6rem; margin-top: .25rem; }
.mkt-fig { margin: 0; }
.mkt-chart { width: 100%; height: auto; display: block; background: #101010; }
.mkt-chart .grid { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.mkt-chart .ax { fill: #bdb7ac; font-size: 12px; font-family: inherit; }
.mkt-chart .bar { fill: #c9a03f; }
.mkt-chart .bar.part { fill: #6b5a33; }
.mkt-chart .ln { fill: none; stroke: #efe2bd; stroke-width: 2; }
.mkt-chart .pt { fill: #efe2bd; }
.mkt-chart .pt.part { fill: #101010; stroke: #efe2bd; stroke-width: 1.5; }
.mkt-fig figcaption { color: #bdb7ac; font-size: .8rem; margin-top: .4rem; }
.mkt-table-wrap { margin: 1rem 0; }
.mkt-table-wrap summary { cursor: pointer; color: #efe2bd; text-decoration: underline; font-size: .95rem; }
.mkt-scroll { overflow-x: auto; }
.mkt-table { border-collapse: collapse; width: 100%; margin: .6rem 0; font-size: .9rem; color: #e6e1d7; }
.mkt-table caption { text-align: left; color: #bdb7ac; font-size: .8rem; padding-bottom: .4rem; }
.mkt-table th, .mkt-table td { border-bottom: 1px solid rgba(255,255,255,.1); padding: .45rem .6rem; text-align: right; }
.mkt-table th[scope="row"], .mkt-table thead th:first-child { text-align: left; font-weight: 500; }
.mkt-table thead th { color: #efe2bd; font-weight: 600; font-size: .78rem; letter-spacing: .04em; }
.mkt-method { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line-gold); }
.mkt-source { color: #fff !important; font-weight: 600; }
.mkt-soon-list { columns: 2; color: #d9d4ca; margin: .4rem 0 1rem; padding-left: 1.2rem; }
.mkt-board-slot { border: 1px dashed var(--line-gold); padding: .7rem .9rem; color: #bdb7ac !important; font-size: .85rem; }
.v8 .county-market-link a { color: var(--gold-pale); text-decoration: underline; }
@media (max-width: 560px) { .mkt-soon-list { columns: 1; } }

/* v18: colorful snapshot KPIs and charts */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mkt-hero { background: radial-gradient(ellipse at 20% 0%, #2a2414 0%, #0b0b0b 65%); }
.kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1.2rem 0 1.8rem; }
.kpi { position: relative; background: linear-gradient(160deg, #221e14 0%, #151515 60%); border: 1px solid rgba(228,200,124,.35); padding: 1rem 1.1rem 1rem; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #e4c87c, #b8912f); }
.kpi.kpi-closed_sales_n::before { background: linear-gradient(90deg, #9fc5e8, #5b8fc7); }
.kpi.kpi-median_psf::before { background: linear-gradient(90deg, #d7b4f0, #a77ad6); }
.v7 .kpi p { margin: 0; }
.v7 .kpi .kpi-period { color: #efe2bd; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; }
.v7 .kpi .kpi-label { color: #d9d4ca; font-size: .9rem; margin-top: .25rem; }
.v7 .kpi .kpi-value { color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.15; margin: .3rem 0 .35rem; }
.v7 .kpi .kpi-meta { color: #bdb7ac; font-size: .75rem; line-height: 1.45; margin-top: .45rem; }
.kpi-chg { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; font-size: .85rem; font-weight: 700; border-radius: 999px; }
.kpi-up { background: rgba(76,175,120,.18); color: #8fe0b0; border: 1px solid rgba(143,224,176,.45); }
.kpi-down { background: rgba(240,128,110,.16); color: #ffb3a6; border: 1px solid rgba(255,179,166,.45); }
.kpi-flat { background: rgba(255,255,255,.08); color: #e6e1d7; border: 1px solid rgba(255,255,255,.2); }
.mkt-stats dd .kpi-chg { font-size: .8rem; }
.chart-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .chart-grid { grid-template-columns: 1fr 1fr; } .chart-grid .chart-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.chart-card { background: #111; border: 1px solid rgba(228,200,124,.25); padding: 1rem 1rem .8rem; }
.v7 .chart-card h3, .v8 .mkt-panel .chart-card h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.mkt-chart .ln { stroke: #e4c87c; stroke-width: 2.5; fill: none; }
.mkt-chart .ln-part { stroke-dasharray: 5 4; stroke: #efe2bd; stroke-width: 2; }
.mkt-chart .pt { fill: #f7e7b5; }
.mkt-chart .pt-part { fill: #111; stroke: #efe2bd; stroke-width: 2; stroke-dasharray: 3 2; }
.mkt-chart .bar-part { stroke: #e4c87c; stroke-width: 1.2; stroke-dasharray: 3 2; }
.mkt-chart .ax-part { fill: #efe2bd; }
.chart-card .mkt-chart .ax, .chart-card .mkt-chart .ax-part { font-size: 19px; }
.mkt-chart .bandA { fill: #e4c87c; } .mkt-chart .bandB { fill: #5b8fc7; }
.mkt-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.key { display: inline-block; width: 18px; height: 10px; vertical-align: middle; margin-left: .4rem; }
.key-line { height: 3px; background: #e4c87c; }
.key-part { height: 0; border-top: 2px dashed #efe2bd; }
.key-bar { background: linear-gradient(#f0d68f, #b8912f); }
.key-hatch { background: repeating-linear-gradient(45deg, #2b2618 0 3px, #e4c87c 3px 5px); outline: 1px dashed #e4c87c; }
.chart-soon { display: flex; flex-direction: column; justify-content: center; }
.row-part th, .row-part td { color: #efe2bd; font-style: italic; }
.mkt-facts { color: #d9d4ca; padding-left: 1.1rem; margin: .5rem 0 1rem; font-size: .9rem; line-height: 1.55; }
.mkt-facts li { margin-bottom: .35rem; }
.mkt-facts strong { color: #fff; }
.v7 .mkt-legacy { margin: .4rem 0 0; padding: .4rem .6rem; border-left: 3px solid #e4c87c; background: #221e14; color: #efe2bd; font-size: .75rem; line-height: 1.4; }
.mkt-links .mkt-note { margin: 0; }
@media (max-width: 640px) {
  .chart-card .mkt-chart .ax, .chart-card .mkt-chart .ax-part { font-size: 26px; }
  .mkt-chart .ln { stroke-width: 4; }
  .mkt-chart .ln-part { stroke-width: 3.5; }
  .mkt-chart .pt { r: 4.5; }
  .chart-card { padding: .8rem .6rem .7rem; }
}
.mkt-scroll:focus-visible { outline: 2px solid #e4c87c; outline-offset: 2px; }

/* v19 weekly "This week" box */
.wk-box { position: relative; margin: 1rem 0 1.4rem; padding: 1rem 1.1rem 1.1rem; background: linear-gradient(150deg, #262014 0%, #161616 70%); border: 1px solid rgba(228,200,124,.45); }
.wk-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #e4c87c, #5b8fc7); }
.v7 .wk-box .wk-title, .v8 .wk-box .wk-title { margin: 0 0 .25rem; color: #e4c87c; font-size: 1.15rem !important; letter-spacing: .03em; }
.v7 .wk-box .wk-period { margin: 0 0 .6rem; color: #e6e1d7; font-size: .9rem; }
.wk-box .wk-badge { margin-left: 0; margin-right: .35rem; font-size: .7rem; }
.wk-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi.wk-kpi { padding: .8rem .9rem; }
.kpi.wk-mls::before, .kpi.wk-new_listings::before, .kpi.wk-mls_closed_sales::before { background: linear-gradient(90deg, #9fc5e8, #5b8fc7); }
.kpi.wk-pva::before { background: linear-gradient(90deg, #e4c87c, #b8912f); }
.v7 .kpi .kpi-value.wk-soon { font-size: 1.15rem; color: #efe2bd; }
.v7 .wk-box .mkt-asof, .v7 .wk-box .mkt-note { margin: .6rem 0 0; }
.mkt-card .wk-box .wk-grid { grid-template-columns: 1fr; }
@media (max-width: 600px) { .wk-box { padding: .9rem .9rem 1rem; } .wk-grid { grid-template-columns: 1fr; } }

/* v20 MLS section + staging preview */
.mkt-preview-banner { margin: 0 0 1rem; padding: .75rem 1rem; background: #f2c94c; color: #1a1406; border: 2px solid #fff3c4; font-size: .95rem; line-height: 1.45; }
.mkt-preview-banner strong { color: #1a1406; text-transform: uppercase; letter-spacing: .04em; }
.mkt-preview-top { position: sticky; top: 0; z-index: 50; }
.v7 .mkt-mls-live .mkt-prov { margin: .4rem 0 .8rem; color: #e6e1d7; font-size: .9rem; line-height: 1.5; }
.v7 .mkt-mls-live h3.mkt-seg { margin: 1.6rem 0 0; color: #e4c87c; font-size: 1.35rem !important; }
.kpi.kpi-dom::before { background: linear-gradient(90deg, #8fe0c8, #3fa58a); }
.kpi.kpi-ratio::before { background: linear-gradient(90deg, #f5b38a, #d9783f); }
.kpi.kpi-inv::before { background: linear-gradient(90deg, #f0a6c8, #c2578a); }
.v7 .kpi .kpi-value.kpi-na { font-size: 1.15rem; color: #d9d4ca; }
.v7 .chart-card h4 { margin: 0 0 .6rem; color: #f3ead2; font-size: 1.05rem; }
.v7 .mkt-credit { margin-top: .9rem; padding: .7rem .9rem; border-left: 3px solid #e4c87c; background: rgba(228,200,124,.08); color: #efe9dc; font-size: .85rem; line-height: 1.5; }
.v7 .wk-box .wk-missing { color: #e6e1d7; }

/* v20 blog post */
.v7 .blog-post h2 { margin: 2.2rem 0 .7rem; color: #f3ead2; font-size: 1.6rem; }
.v7 .blog-post h3 { margin: 1.6rem 0 .5rem; color: #e4c87c; }
.v7 .blog-post p, .v7 .blog-post li { color: #e6e1d7; font-size: 1.05rem; line-height: 1.7; max-width: 46rem; }
.v7 .blog-post a, .v7 .mkt-post a, .v7 .blog-list a { color: #f0d68f; text-decoration: underline; text-underline-offset: 3px; }
.v7 .blog-hero .blog-through { margin: .6rem 0 .2rem; display: inline-block; padding: .3rem .7rem; background: rgba(228,200,124,.14); border: 1px solid rgba(228,200,124,.55); color: #f3ead2; }
.v7 .blog-hero .blog-asof { color: #d9d4ca; font-size: .9rem; max-width: 46rem; }
.v7 .blog-post .faq-q { margin-bottom: .2rem; color: #fff; }
.v7 .blog-post .faq-item { margin: 0 0 1.1rem; }
.v7 .mls-soon-note { margin: .6rem 0 1rem; padding: .8rem 1rem; border: 1px dashed rgba(159,197,232,.7); background: rgba(91,143,199,.12); max-width: 46rem; }
.v7 .mls-soon-note p { margin: 0; color: #e6eef7; }
.v7 .blog-post .mls-credit { padding: .6rem .9rem; border-left: 3px solid #e4c87c; background: rgba(228,200,124,.08); font-size: .92rem; }
mark.ed-confirm { background: #f2c94c; color: #1a1406; padding: 0 .2rem; }
.blog-list { list-style: none; padding: 0; margin: 0; }
.v7 .blog-card { padding: 1.2rem 1.3rem; border: 1px solid rgba(228,200,124,.4); background: linear-gradient(150deg, #262014 0%, #161616 70%); margin-bottom: 1rem; }
.v7 .blog-card h2 { margin: 0 0 .3rem; font-size: 1.4rem; }
.v7 .blog-card .blog-meta { color: #e4c87c; font-size: .9rem; margin: 0 0 .4rem; }
.v7 .mkt-post { margin: 1.2rem 0 .4rem; padding: .8rem 1rem; border: 1px solid rgba(228,200,124,.45); background: rgba(228,200,124,.07); color: #e6e1d7; }
.v7 .mkt-post-k { display: inline-block; margin-right: .4rem; color: #e4c87c; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v7 .chart-card h4 { text-transform: none; letter-spacing: normal; font-family: inherit; }

/* v24 source labels */
.v7 .src-label { display: inline-block; margin: .2rem 0 .6rem; padding: .2rem .65rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; }
.v7 .src-tag { display: inline-block; margin-right: .35rem; padding: .05rem .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: .1em; border-radius: 2px; }
.v7 .src-mls { background: #1d3550; color: #e6eef7; border: 1px solid #9fc5e8; }
.v7 .src-pva { background: #2a2414; color: #f3ead2; border: 1px solid #e4c87c; }
.v7 .blog-hero .blog-byline { color: #efe2bd; font-size: .95rem; margin: .4rem 0 0; }