/* ==========================================================================
   domovita-sold-area.css 1.0.0 - briefing layout slice 2 (2026-09-29)
   ==========================================================================
   The district and town sold-price pages (.dv-sa-area) and the two sold-price
   hubs (.dv-sa-hub) on the house page system, the way the street page
   already is. Spec: docs/superpowers/specs/2026-09-29-briefing-layout-slice-2-design.md

   Loaded ONLY by tmpl/solddistrict/default.php and tmpl/soldtown/default.php:
       registerAndUseStyle('com_domovita.sold-area', ..., ['version' => '1.0.0'],
                           [], ['com_domovita.pages', 'com_domovita.sold'])
   so it always lands after domovita-sold.css and domovita-pages.css. The
   classic.php rollback copies never load it: a flip back to classic drops
   every rule below, the navy-strip one included.

   SCOPE RULE: every selector carries .dv-sa-area or .dv-sa-hub, except the
   one named rule in section 1. Checked by
   `python tools/ops/check_sold_area.py static`.
   ========================================================================== */

/* --- 1. Navy strip (the one unscoped rule) ---------------------------------
   Helix gives #sp-main-body 100px of top padding over a navy fill, and
   domovita-sold.css pins it to 16px !important at 600px and below on every
   sold page. The mock's paper band sits straight under the header, so both
   go. !important only because the sold sheet's phone rule is !important;
   (1,1,1) also beats its (1,0,0), and this sheet loads after it. Safe
   unscoped: the view-solddistrict / view-soldtown body classes are shared
   only with the classic templates and the A-Z / street-letter layouts, none
   of which load this sheet. */
body.view-solddistrict #sp-main-body,
body.view-soldtown #sp-main-body { padding-top: 0 !important; }

/* --- 2. Wrappers ------------------------------------------------------------
   Detail: dv-container dv-sd-page dv-pg-page dv-sa-area (keeping .dv-sd-page
   inherits the street's serif headings, answer size and rail rules on
   purpose). Hubs: dv-container dv-sd-index dv-pg-page dv-sa-hub.
   .dv-container (domovita.css) and .dv-sd-page / .dv-sd-index
   (domovita-sold.css) draw the old boxed white card at (0,1,0), and
   domovita-pages.css's .dv-pg-page only beats them today by loading later.
   This pins the reset at (0,2,0), so the bands never sit inside a card
   whatever the load order. The values are .dv-pg-page's own. */
.dv-pg-page.dv-sa-hub,
.dv-pg-page.dv-sa-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* --- 3. Hub headings: Georgia, as on the street page -------------------------
   domovita-pages.css's heading backstop (.dv-pg-page.dv-pg-page h1/h2/h3,
   (0,2,1)) turns headings system sans once the wrapper carries .dv-pg-page.
   The detail pages keep .dv-sd-page and inherit the street's (0,3,1) serif
   rules from domovita-sold.css; the hubs carry .dv-sd-index instead, so they
   get their own at (0,3,1), with the street hero h1's values. */
.dv-pg-page.dv-sa-hub .dv-sd-hero h1 {
    font-family: var(--dv-serif);
    font-weight: 400;
    font-size: var(--dv-fs-display-mid);
    line-height: 1.06;
    letter-spacing: -0.01em;
}
.dv-pg-page.dv-pg-page.dv-sa-hub h2,
.dv-pg-page.dv-pg-page.dv-sa-hub h3 { font-family: var(--dv-serif); font-weight: 400; }

/* --- 4. Postcode lookup pill (hub and area) ---------------------------------
   Same values as the street's .dv-sd-lookup (domovita-sold.css 3.7.0 block),
   under its own class. It sits under the hero sub / answer paragraph on
   its own row (the mock's pill; the street's two-track hero row is not
   used). The input inside keeps the sitewide Aurum field skin
   (templates/shaper_helixultimate/css/dv-helix-overrides.css,
   `#sp-main-body input[type="text"]...`, ID-rooted), exactly as the street's
   pill does: a class-only rule cannot restyle it, and matching the street
   matters more here. Its gold focus ring is the visible focus state. */
.dv-pg-page.dv-sa-hub .dv-sa-lookup,
.dv-pg-page.dv-sa-area .dv-sa-lookup {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 420px;
    margin: 1.25rem 0 0;
    padding: 6px 6px 6px 18px;
    background: #fff;
    border: 1px solid var(--dv-pg-rule-strong, #d8d0bd);
    border-radius: 999px;
}
.dv-pg-page.dv-sa-hub .dv-sa-lookup input,
.dv-pg-page.dv-sa-area .dv-sa-lookup input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: var(--dv-pg-t-body, 1rem);
    color: var(--dv-pg-ink, var(--dv-ink));
}
.dv-pg-page.dv-sa-hub .dv-sa-lookup .dv-pg-btn-primary,
.dv-pg-page.dv-sa-area .dv-sa-lookup .dv-pg-btn-primary {
    flex: 0 0 auto;
    min-height: 48px;
    background: var(--dv-navy, #1F3A5F);
    border-color: var(--dv-navy, #1F3A5F);
    --dv-pg-btn-ink: var(--dv-on-navy, #FFFFFF);
}
.dv-pg-page.dv-sa-hub .dv-sa-lookup .dv-pg-btn-primary:hover,
.dv-pg-page.dv-sa-hub .dv-sa-lookup .dv-pg-btn-primary:focus,
.dv-pg-page.dv-sa-area .dv-sa-lookup .dv-pg-btn-primary:hover,
.dv-pg-page.dv-sa-area .dv-sa-lookup .dv-pg-btn-primary:focus {
    background: var(--dv-deep-navy, #16283F);
    border-color: var(--dv-deep-navy, #16283F);
    --dv-pg-btn-ink: var(--dv-on-navy, #FFFFFF);
}

/* --- 5. Hub bands --------------------------------------------------------------
   Shell only (spec "Hubs - shell only"): the paper band holds the breadcrumb
   (town hub), the unchanged hero and the lookup; the white band holds
   everything else byte for byte, still styled by domovita-sold.css. These
   rules only fit the old blocks to the band edges. */
.dv-pg-page.dv-sa-hub .dv-pg-band-hero .dv-sd-hero { margin-bottom: 0; }
.dv-pg-page.dv-sa-hub .dv-pg-band-white > .dv-pg-inner > :first-child { margin-top: 0; }
.dv-pg-page.dv-sa-hub .dv-pg-band-white > .dv-pg-inner > :last-child { margin-bottom: 0; }

/* --- 6. Phone ----------------------------------------------------------------
   Area rail order (spec "Phone order"): the rail stays ONE block and only the
   main-column block marked .dv-pg-rail-first (the compact table, Tasks 13-14)
   goes ahead of it; everything else follows the rail. domovita-sold.css
   (the "phone rail order" block, 2026-09-21) splits the rail on every
   .dv-sd-page for the street page (display: contents, .dv-ew order 1,
   capture / guide / upsell order 3); these undo that for .dv-sa-area only.
   The rail rule is (0,4,0) against the sold sheet's (0,3,0). The child rules
   are (0,5,0) because the sold sheet's are already (0,4,0), and a tie would
   rest on load order. Checked on the built pages in Tasks 13 and 14 (DOM
   order + computed order at 393 px). */
@media (max-width: 1023.98px) {
    .dv-pg-page.dv-sd-page.dv-sa-area .dv-pg-shell-rail { display: flex; }
    .dv-pg-page.dv-sd-page.dv-sa-area .dv-pg-shell-rail > .dv-ew,
    .dv-pg-page.dv-sd-page.dv-sa-area .dv-pg-shell-rail > .dv-cap,
    .dv-pg-page.dv-sd-page.dv-sa-area .dv-pg-shell-rail > .dv-area-guide-link,
    .dv-pg-page.dv-sd-page.dv-sa-area .dv-pg-shell-rail > .dv-upsell-block { order: 0; margin-bottom: 0; }
}
@media (max-width: 600px) {
    .dv-pg-page.dv-sa-hub .dv-sa-lookup,
    .dv-pg-page.dv-sa-area .dv-sa-lookup { max-width: none; }
}

/* ==========================================================================
   Detail pages, sections 7-13 - plan task T13 (2026-09-29): the district
   page, mock 2c. Town (T14) reuses every rule. Spec: docs/superpowers/specs/
   2026-09-29-briefing-layout-slice-2-design.md. Every selector carries
   .dv-sa-area (checked by `python tools/ops/check_sold_area.py static`).
   The phone rail (one block, DOM order) is section 6's rule; it is not
   repeated here.
   ========================================================================== */

/* --- 7. Paper band ---------------------------------------------------------- */
/* The existing whole-area flag sits directly above the stat grid. */
.dv-sa-area .dv-sa-scope-top .dv-sd-scopeflag { margin: 1rem 0 0; }
.dv-sa-area #dv-sa-statgrid { margin-top: 1rem; }
/* domovita-sold.css rings the phone jump link in white (written for the navy
   hero); on paper that ring is invisible. */
@media (max-width: 600px) {
    .dv-sa-area .dv-sd-jump-ew:focus-visible { outline-color: var(--dv-navy, #1F3A5F); }
}

/* --- 8. Stat grid (stat_grid.php) ------------------------------------------- */
.dv-sa-area #dv-sa-statgrid .dv-pg-metric-note a {
    color: var(--dv-blue, #2F6FCC);                 /* 4.92:1 on the white tile */
    font-weight: 500;
    text-decoration: none;
}
.dv-sa-area #dv-sa-statgrid .dv-pg-metric-note a::after { content: "\00a0\2192"; }
.dv-sa-area #dv-sa-statgrid .dv-pg-metric-note a:hover,
.dv-sa-area #dv-sa-statgrid .dv-pg-metric-note a:focus-visible { text-decoration: underline; }
/* domovita.css colours every component link #1F3A5F from
   body.com-domovita #sp-component > .sp-column a:not(.btn):not(.dv-back-link)
   (1,4,2), so the colour above (1,3,1) never reached the link (measured on
   staging, T13 screenshot pass). (1,5,1) wins without !important. */
.dv-pg-page.dv-sd-page.dv-sa-area #dv-sa-statgrid .dv-pg-metric .dv-pg-metric-note a { color: var(--dv-blue, #2F6FCC); }

/* --- 9. Trend block and England and Wales line (trend_block.php) ------------ */
/* Styled on the wrapper only: an AJAX filter replaces #dv-chart-trend whole. */
.dv-sa-area .dv-sa-trend { margin: 0 0 2.5rem; }
/* The "Price trend" h2 (owner change 2026-09-29, spec amendment 10): the same
   spacing as the "Latest recorded sales" h2 in section 10. */
.dv-sa-area .dv-sa-trend h2 { margin: 0 0 0.75rem; }
.dv-sa-area .dv-sa-trend .dv-sd-scopeflag { margin: 0.75rem 0 0; }
.dv-sa-area .dv-sa-ew-line {
    margin: 0.6rem 0 0;
    max-width: 72ch;
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
    color: var(--dv-pg-ink-2);
}

/* --- 10. Compact table block (recent_compact.php + the link row) ------------ */
.dv-sa-area .dv-pg-shell-main > .dv-pg-rail-first { margin-bottom: 2.5rem; }
.dv-sa-area .dv-sa-recent h2 { margin: 0 0 0.75rem; }
.dv-sa-area .dv-sa-typepills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}
.dv-sa-area .dv-sa-typepills .dv-pg-pill {
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border-color: var(--dv-pg-rule-strong);
    background: #fff;
    font: inherit;
    font-size: var(--dv-pg-t-caption);
    color: var(--dv-pg-ink);
    text-decoration: none;
    cursor: pointer;
}
.dv-sa-area .dv-sa-typepills .dv-pg-pill:hover { border-color: var(--dv-navy, #1F3A5F); }
.dv-sa-area .dv-sa-typepills .dv-pg-pill:focus-visible { outline: 2px solid var(--dv-blue, #2F6FCC); outline-offset: 2px; }
.dv-sa-area .dv-sa-typepills .dv-pg-pill[aria-current="true"] {
    background: var(--dv-navy, #1F3A5F);            /* white on navy 11.6:1 */
    border-color: var(--dv-navy, #1F3A5F);
    color: #fff;
}
/* "All types" is the one pill that is an <a>. The same (1,4,2) component
   link rule in domovita.css painted it #1F3A5F, which on the current pill's
   navy fill was 1:1 - an invisible label (measured on staging, T13
   screenshot pass). (1,5,1) and (1,6,1) win without !important. */
.dv-pg-page.dv-sd-page.dv-sa-area #dv-sa-recent .dv-sa-typepills a.dv-pg-pill { color: var(--dv-pg-ink); }
.dv-pg-page.dv-sd-page.dv-sa-area #dv-sa-recent .dv-sa-typepills a.dv-pg-pill[aria-current="true"] { color: #fff; }
.dv-sa-area .dv-sa-recent-table .dv-sd-row-link { font-weight: 600; color: var(--dv-pg-ink); text-decoration: none; }
.dv-sa-area .dv-sa-recent-table tr:hover .dv-sd-row-link,
.dv-sa-area .dv-sa-recent-table .dv-sd-row-link:focus-visible { color: var(--dv-navy, #1F3A5F); text-decoration: underline; }
.dv-sa-area .dv-sa-recent-table tbody tr[data-href] { cursor: pointer; }
.dv-sa-area .dv-sa-recent-table .dv-pg-num { text-align: right; white-space: nowrap; }
.dv-sa-area .dv-sa-reveal { margin: 0.9rem 0 0; }
.dv-sa-area .dv-sa-caption { margin: 0.6rem 0 0; font-size: var(--dv-pg-t-caption); color: var(--dv-pg-ink-3); }
.dv-sa-area .dv-sa-recent-note {
    margin: 0.9rem 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--dv-blue, #2F6FCC);
    border-radius: 4px;
    background: var(--dv-blue-tint, #E6F1FB);
    font-size: var(--dv-pg-t-meta);
    line-height: 1.5;
    color: var(--dv-pg-ink);
}
.dv-sa-area .dv-sa-recent-note a { color: var(--dv-navy, #1F3A5F); text-decoration: underline; }
/* [hidden] must beat every display rule in this block (pills display:flex,
   phone rows display:grid) - the UA's [hidden] loses to any author display
   value. domovita-sold.css does the same for its scope chips. */
.dv-sa-area .dv-sa-recent[hidden],
.dv-sa-area .dv-sa-recent [hidden] { display: none !important; }
.dv-sa-area .dv-sa-linkrow {
    margin: 0.9rem 0 0;
    font-family: var(--dv-pg-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--dv-pg-ink-3);
}
.dv-sa-area .dv-sa-linkrow a { color: var(--dv-navy, #1F3A5F); text-decoration: none; }
.dv-sa-area .dv-sa-linkrow a:hover,
.dv-sa-area .dv-sa-linkrow a:focus-visible { text-decoration: underline; }

/* --- 11. Type table and the town's sub-area column (breakdown.php) ---------- */
.dv-sa-area .dv-sa-breakdown { margin: 0 0 2.5rem; }
.dv-sa-area .dv-sa-breakdown h2 { margin: 0 0 0.9rem; }
.dv-sa-area .dv-sa-breakdown > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem 2rem;
    align-items: start;
}
.dv-sa-area .dv-sa-breakdown table { border-top: 1px solid var(--dv-navy, #1F3A5F); }
.dv-sa-area .dv-sa-breakdown .dv-pg-num { text-align: right; white-space: nowrap; }
.dv-sa-area .dv-sa-breakdown caption {
    caption-side: bottom;
    padding-top: 0.6rem;
    text-align: left;
    font-size: var(--dv-pg-t-caption);
    line-height: 1.45;
    color: var(--dv-pg-ink-3);
}

/* --- 12. Rail: Living in {Town} (living_links.php) -------------------------- */
.dv-sa-area .dv-sa-living {
    padding: 1rem 1.1rem;
    border: 1px solid var(--dv-pg-rule-strong);
    border-radius: 6px;
    background: #fff;
}
/* (0,4,1): beats the street's serif heading rule
   .dv-pg-page.dv-pg-page.dv-sd-page h2 (0,3,1), inherited via .dv-sd-page. */
.dv-pg-page.dv-sd-page.dv-sa-area .dv-sa-living h2 {
    margin: 0 0 0.75rem;
    font-family: var(--dv-pg-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dv-pg-ink-3);                       /* 5.43:1 on white */
}
.dv-sa-area .dv-sa-living .dv-area-guide-link {
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.dv-sa-area .dv-sa-living ul { margin: 0; padding: 0; list-style: none; }
.dv-sa-area .dv-sa-living li { border-top: 1px solid var(--dv-pg-rule); }
.dv-sa-area .dv-sa-living li a {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    font-size: var(--dv-pg-t-meta);
    color: var(--dv-pg-ink);
    text-decoration: none;
}
.dv-sa-area .dv-sa-living li a::after { content: "\2192"; color: var(--dv-blue, #2F6FCC); }
.dv-sa-area .dv-sa-living li a:hover,
.dv-sa-area .dv-sa-living li a:focus-visible { color: var(--dv-navy, #1F3A5F); text-decoration: underline; }

/* --- 13. Phone: the compact table as two-line rows (mock phone-2c) ---------- */
/* Address + price, then type, date, change. Each cell keeps its own text;
   only the dot is generated. */
@media (max-width: 767.98px) {
    .dv-sa-area .dv-sa-recent-table thead { display: none; }
    .dv-sa-area .dv-sa-recent-table,
    .dv-sa-area .dv-sa-recent-table tbody { display: block; width: 100%; }
    .dv-sa-area .dv-sa-recent-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "addr addr price" "type date change";
        column-gap: 0.4rem;
        row-gap: 2px;
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--dv-pg-rule);
    }
    .dv-sa-area .dv-sa-recent-table td { display: block; padding: 0; border: 0; }
    .dv-sa-area .dv-sa-recent-table td:nth-child(1) { grid-area: addr; }
    .dv-sa-area .dv-sa-recent-table td:nth-child(2) { grid-area: type; font-size: var(--dv-pg-t-caption); color: var(--dv-pg-ink-2); }
    .dv-sa-area .dv-sa-recent-table td:nth-child(3) { grid-area: price; justify-self: end; }
    .dv-sa-area .dv-sa-recent-table td:nth-child(4) { grid-area: date; font-size: var(--dv-pg-t-caption); color: var(--dv-pg-ink-3); }
    .dv-sa-area .dv-sa-recent-table td:nth-child(4)::before { content: "\00b7\0020"; }
    .dv-sa-area .dv-sa-recent-table td:nth-child(5) { grid-area: change; justify-self: end; font-size: var(--dv-pg-t-caption); }
}