/*
 * developments/css/panel-v5.css — D95.STAGE.B2 (v5.5)
 *
 * v5.5 stacked card-deck panel.
 *
 * Architecture: each stage of a project is a COMPLETE self-contained
 * card — stage-colored header band, hero (photo or Street View),
 * identity, tabs, content, and parcel sections. Cards are positioned
 * absolutely inside a deck container. Foreground card occupies the
 * full deck minus padding. Back cards are offset UP and RIGHT so their
 * stage-colored top band AND right edge peek as an L-shape. Click the
 * peek → that card slides forward.
 *
 * Bare parcels: single card, no peek, no offset.
 *
 * Stage colours (v1 chrome) — bold opaque bands so the user can read
 * the project's stage at a glance and identify back cards by colour:
 *   construction → gold (#d4a84b)
 *   approval     → blue (#2563eb)
 *   proposal     → grey (#6b7280)
 *   completion   → green (#16a34a)
 *   approval+refused → red (#dc2626)
 *
 * Tokens from developments/css/dev.css are reused (no redefinition).
 */

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Neutralize the outer floating-panel chrome when v5 is mounted           */
/*                                                                          */
/*  #dev-detail is the side-rail container styled as a "floating panel"    */
/*  (D80.E9): 1px border, 12px radius, lg shadow, bg-card background.      */
/*  My stage cards then render inside it with their own border + radius —  */
/*  reading as "card within a card."  When v5 is the active panel, drop    */
/*  the outer framing so the stage cards stand alone as the only chrome.   */
/*  :has() selector targets the container only when v5 actually mounted.   */
/* ═══════════════════════════════════════════════════════════════════════ */

#dev-detail:has(.panel-v5) {
  background: transparent;
  border: none;
  box-shadow: none;
}
@media (min-width: 1024px) {
  #dev-detail:has(.panel-v5) {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}
/* Tier 2 — the close-bar is HIDDEN when v5 is active. Each card has
   its own close button (×) on the right side of its band. Tier 1's
   floating-pill close button retired. */
#dev-detail:has(.panel-v5) .dev-detail-bar {
  display: none;
}

/* D95.STAGE.B2.HOTFIX.3 (2026-05-24) — Lloyd's two blockers:
   1. project panel was vertically smaller than nav panel
   2. no vertical scrollbar visible
   Root cause: `.dev-detail-scroll` was flex-centring a height-capped
   deck (min(720px, 100vh-96px)) so the v5 panel floated short of the
   container. Fix: let panel-v5 + .pv5-deck fill the scroll area
   edge-to-edge. Scrolling is owned by .pv5-card__tab-content (single-
   scroll discipline). The container scroll bar would only ever appear
   if the card itself exceeds the viewport, which we don't want. */
#dev-detail:has(.panel-v5) .dev-detail-scroll {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px;
  overflow: hidden;  /* inner tab-content owns the scrollbar */
}
/* ═══════════════════════════════════════════════════════════════════════ */
/*  Local design tokens + flex column layout                                */
/*                                                                          */
/*  HOTFIX.3 (2026-05-24) — merged two duplicate .panel-v5 blocks. The     */
/*  former second block set display:block, which silently overrode the     */
/*  HOTFIX.3 flex layout (later rule wins). Result: deck overflowed its    */
/*  container by ~400px because the deck's `flex: 1 1 auto` became a no-op  */
/*  inside a block parent. Single block now, display:flex, height:100%.    */
/* ═══════════════════════════════════════════════════════════════════════ */

.panel-v5 {
  /* CP-GF.5 (2026-06-07) — back to a SINGLE-row band (stage pill + actions only;
     date/counts/chips moved to the status line + stat strip). 50px comfortably
     centers the 24px pill with breathing room. The tab-strip sticky-top + the
     mobile back-card collapse height both read this token, so they follow. */
  --pv5-band-height: 50px;
  /* D96.S5 — Tightened stack offsets from 28/16 to 20/12 per Lloyd's
     walkthrough ("top margin is way too large"). Deck padding-top was
     calc(28*2)=56px, leaving 56px of empty deck above the foreground
     card on every multi-stage project. Now calc(20*2)=40px — still
     enough to peek 2 stacked back cards (depth 1 at top:20px, depth 2
     at top:40px) but with less wasted top whitespace. Single-card
     variants (parcel, multi-unit) already had padding-top:0 via
     .pv5-deck--single. */
  --pv5-stack-top-offset: 20px;
  --pv5-stack-right-offset: 12px;
  --pv5-card-bg: var(--bg-paper, #fafaf9);
  --pv5-card-radius: 6px;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: transparent;
  color: var(--text, #111);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* VL.P2.P4 (F-6) — brand-parity error state. Was a bare <strong>+<p> in
   the top-left; now a vertically-centred card with a gold attention badge,
   a display-font title, the detail message, and (for transient failures
   only) a gold Retry button that re-invokes PanelV5.mount. Genuine 404
   empties render the same card without the button. */
.panel-v5--error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  height: 100%;
  padding: 32px 24px;
  color: var(--text-secondary, #374151);
}
.pv5-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  gap: 10px;
}
.pv5-error__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--gold, #d4a84b);
  background: var(--gold-faint, rgba(212, 168, 75, 0.18));
  color: var(--ink-1, #111);
  font: 700 22px/1 var(--font-display, "Outfit", sans-serif);
  margin-bottom: 2px;
}
.pv5-error__title {
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 16px; font-weight: 600;
  color: var(--text, #111);
}
.pv5-error__msg {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--text-muted, #67707c);
}
.pv5-error__retry {
  margin-top: 8px;
  font: 500 13px/1 var(--font-body, "Inter", sans-serif);
  padding: 9px 18px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--gold, #d4a84b);
  background: var(--gold, #d4a84b);
  color: #111;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-out, ease);
}
.pv5-error__retry:hover { background: var(--gold-dark, #b8923f); }
.pv5-error__retry:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Deck container — positions N cards in z-axis                            */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-deck {
  position: relative;
  /* Make space at top + right for back cards to peek into */
  padding-top: calc(var(--pv5-stack-top-offset) * 2);
  padding-right: calc(var(--pv5-stack-right-offset) * 2);
  /* HOTFIX.3 — fill the dev-detail-scroll container edge-to-edge
     (matching #dev-nav height). Previously capped at 720px which made
     the v5 panel visibly shorter than the nav panel on tall viewports. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.pv5-deck--single,
.pv5-deck--loading {
  padding-top: 0;
  padding-right: 0;
}

.pv5-deck__overflow {
  position: absolute;
  top: 4px;
  left: 16px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint, #9ca3af);
  font-family: var(--font-mono, monospace);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Card — full self-contained panel                                        */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-card {
  position: absolute;
  left: 0;
  background: var(--pv5-card-bg);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: var(--pv5-card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}

/* Per-stage colour custom property — drives band + right-edge strip */
.pv5-card[data-stage-kind="construction"] { --pv5-stage-color: var(--stage-construction, #d4a84b); --pv5-stage-text: #1a1308; }
.pv5-card[data-stage-kind="approval"]     { --pv5-stage-color: var(--stage-approved, #2563eb); --pv5-stage-text: #fff; }
.pv5-card[data-stage-kind="proposal"]     { --pv5-stage-color: var(--stage-proposed, #6b7280); --pv5-stage-text: #fff; }
.pv5-card[data-stage-kind="completion"]   { --pv5-stage-color: var(--stage-completed, #16a34a); --pv5-stage-text: #fff; }
/* SLS.2 stageless — abandoned/lapsed single project with zero derived stages:
   honest grey INACTIVE band on its minimal identity card. */
.pv5-card[data-stage-kind="inactive"]     { --pv5-stage-color: var(--stage-inactive, #d1d5db); --pv5-stage-text: var(--text-secondary, #374151); }
.pv5-card[data-stage-kind="parcel"]       { --pv5-stage-color: var(--bg-card, #f5f5f4); --pv5-stage-text: var(--text-secondary, #374151); }

/* Right-edge peek for back cards — clean white card edge, NO colored
   strip. Per Lloyd: "The sidebar should match what that card would
   look like in a white background." Only the top band carries stage
   color; the right peek is just the card's natural side as it would
   appear over white. A 1px hairline border (already on .pv5-card)
   suggests the back card's right edge. The ::after below paints the
   rightmost 16px of the back card in the card's body background so
   the visible peek is clean (no hero / band / content bleed through). */
.pv5-card[data-stack-position="back"]::after {
  content: '';
  position: absolute;
  /* Start at the top-peek boundary (28px), so the band's coloured top
     edge IS visible above the foreground card but its right edge does
     NOT bleed coloured into the side peek. */
  top: var(--pv5-stack-top-offset);
  right: 0;
  bottom: 0;
  width: var(--pv5-stack-right-offset);
  background: var(--pv5-card-bg);
  border-left: 1px solid var(--border, #e7e5e4);
  z-index: 1;
  pointer-events: none;
}

/* Foreground card — full area minus the deck's top+right padding.
   D96.S14 — stronger shadow (was shadow-md) so the foreground reads
   as visibly lifted above the back cards. */
.pv5-card[data-stack-position="foreground"] {
  top: calc(var(--pv5-stack-top-offset) * 2);
  right: calc(var(--pv5-stack-right-offset) * 2);
  bottom: 0;
  z-index: 30;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.08));
}

/* Back cards — depth 1: offset up + right by 1 unit.
   D96.S14 (Lloyd 2026-05-25) — "back cards don't feel as pronounced
   when stacked." Three changes to make the depth read at a glance:
     1. Per-card box-shadow so each back card casts its own ambient
        shadow rather than relying purely on z-stacking
     2. Hover lift via translate(0, -2px) — clear "you can interact
        with this" affordance
     3. Brightness bump on hover (was 1.04, now 1.06) for stronger
        feedback */
.pv5-card[data-stack-position="back"][data-stack-depth="1"] {
  top: var(--pv5-stack-top-offset);
  right: var(--pv5-stack-right-offset);
  bottom: var(--pv5-stack-top-offset);
  left: var(--pv5-stack-right-offset);
  z-index: 20;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  transition: transform var(--duration-fast, 150ms) var(--ease-out, ease-out),
              filter var(--duration-fast, 150ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
}
.pv5-card[data-stack-position="back"][data-stack-depth="2"] {
  top: 0;
  right: 0;
  bottom: calc(var(--pv5-stack-top-offset) * 2);
  left: calc(var(--pv5-stack-right-offset) * 2);
  z-index: 10;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  transition: transform var(--duration-fast, 150ms) var(--ease-out, ease-out),
              filter var(--duration-fast, 150ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
}
.pv5-card[data-stack-position="back"][data-stack-depth="3"] {
  top: 0;
  right: 0;
  bottom: calc(var(--pv5-stack-top-offset) * 3);
  left: calc(var(--pv5-stack-right-offset) * 3);
  z-index: 5;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  transition: transform var(--duration-fast, 150ms) var(--ease-out, ease-out),
              filter var(--duration-fast, 150ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

/* P3: the back-card lift is a hover affordance — gate it to hover-capable
   pointers so a touch tap doesn't leave it stuck "lifted"; touch gets a quick
   :active press instead. */
@media (hover: hover) {
  .pv5-card[data-stack-position="back"]:hover {
    filter: brightness(1.06);
    transform: translate(2px, -2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  }
}
.pv5-card[data-stack-position="back"]:active {
  filter: brightness(1.05);
}
.pv5-card[data-stack-position="back"]:focus-visible {
  outline: 3px solid var(--accent-gold, #d4a84b);
  outline-offset: 2px;
}

/* D96.S9 — Single-card chrome parity with #dev-nav.
   When the deck has only a foreground card (single-stage project, bare
   parcel, multi-unit — the common case Lloyd hits most), the back-card
   peek offset is wasted space: the card reads ~40×24px smaller than the
   right rail and uses a 6px radius vs the nav rail's 12px. Both surfaces
   should feel like sibling cards.
   Fix: when no `[data-stack-position="back"]` card exists, drop the
   deck's peek padding AND collapse the foreground card's offset so it
   fills the deck edge-to-edge, with 12px radius matching #dev-nav.
   Multi-stage projects (proposed → approved → construction → etc.) still
   match `:has(... back)` and keep the existing peek behaviour. `:has()` is
   supported in all current evergreens (Chrome 105+, Safari 15.4+, FF 121+).
   Container, not subtraction: nothing is removed. The deck just stops
   reserving room for cards that aren't there. */
.pv5-deck:not(:has(.pv5-card[data-stack-position="back"])) {
  padding-top: 0;
  padding-right: 0;
}
.pv5-deck:not(:has(.pv5-card[data-stack-position="back"])) .pv5-card[data-stack-position="foreground"] {
  top: 0;
  right: 0;
  border-radius: 12px;
}

/* Single-deck (bare parcel + loading) — card fills the deck edge-to-edge.
   HOTFIX.3c (2026-05-24): previously `position: relative` so the card grew
   with content (1367px) overflowing the 976px deck. Pin to inset:0 so the
   card matches deck height; the card itself is display:flex/column with
   .pv5-card__tab-content owning the scroll (single-scroll discipline). */
.pv5-deck--single .pv5-card,
.pv5-deck--loading .pv5-card {
  position: absolute;
  inset: 0;
}

/* Loading skeleton — D104.S1 enrichment + VL.LOAD redesign (2026-05-30).
   Mimics the real card architecture (band + hero + identity + tabs + body).
   VL.LOAD: (a) swapped the opacity pulse for the ONE shared gold travelling-
   highlight (dev-skel-sweep — same idiom + 1300ms tempo as the boot loader's
   dev-loader-sweep, background-position only = compositor-cheap); (b) when
   ui.js knows the clicked project, paintSkeleton pre-tints the band its REAL
   stage colour + shows the real stage pill + project name.
   NOTE: band + hero skeleton rules use the COMPOUND double-class selector so
   they beat the later, equal-specificity base .pv5-card__band / .pv5-card__hero. */
.pv5-card--skeleton {
  position: relative !important;
  height: 600px;
}

/* Shared gold sweep. Flat --bg-subtle declared FIRST as the fallback for
   engines without color-mix (degrades to solid grey, never to nothing). */
.pv5-card__band.pv5-card__band--skeleton,
.pv5-card__hero.pv5-card__hero--skeleton,
.pv5-skel-line,
.pv5-skel-tab {
  background: var(--bg-subtle, #ebeae8);
  background: linear-gradient(90deg,
    var(--bg-subtle, #ebeae8) 0%,
    color-mix(in srgb, var(--gold) 18%, var(--bg-subtle)) 50%,
    var(--bg-subtle, #ebeae8) 100%);
  background-size: 200% 100%;
  animation: dev-skel-sweep 1300ms ease-in-out infinite;
}
@keyframes dev-skel-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.pv5-card__hero.pv5-card__hero--skeleton { height: 200px; }
/* Neutral swept band carries no border + right-aligns any pill. */
.pv5-card__band.pv5-card__band--skeleton { border-bottom: none; justify-content: flex-end; }

/* Directional stagger so the body rows read as a cascade, not a unison flash. */
.pv5-card__tab-content--skeleton .pv5-skel-line:nth-child(1) { animation-delay: 0ms; }
.pv5-card__tab-content--skeleton .pv5-skel-line:nth-child(2) { animation-delay: 80ms; }
.pv5-card__tab-content--skeleton .pv5-skel-line:nth-child(3) { animation-delay: 160ms; }
.pv5-card__tab-content--skeleton .pv5-skel-line:nth-child(4) { animation-delay: 240ms; }

/* Text-shimmer row geometry */
.pv5-skel-line {
  border-radius: 4px;
  margin: 8px 14px;
}
.pv5-skel-line--title    { height: 24px; width: 70%; margin-top: 12px; }
.pv5-skel-line--subtitle { height: 14px; width: 55%; }
.pv5-skel-line--meta     { height: 12px; width: 40%; margin-bottom: 12px; }
.pv5-skel-line--body     { height: 14px; width: 90%; }
.pv5-skel-line--short    { width: 55%; }

/* VL.LOAD — per-stage band tint. When ui.js knows the clicked project's
   stage, paintSkeleton sets data-stage and the band is tinted its REAL stage
   colour (STATIC — not swept, so the colour reads cleanly) + a 3px stage
   border. The [data-stage] attribute lifts specificity over the neutral
   swept rule above, and over the base .pv5-card__band. Tokens resolve to
   dev.css's WINNING palette (proposed=#7c6cae, approved=#2563eb,
   construction=gold, completed=#16a34a, inactive=#d1d5db). No data-stage
   (bare-parcel / search-row / deep-link) → keeps the neutral swept grey. */
.pv5-card__band--skeleton[data-stage] { animation: none; }
.pv5-card__band--skeleton[data-stage="proposed"] {
  background: color-mix(in srgb, var(--stage-proposed, #7c6cae) 12%, var(--bg-subtle, #ebeae8));
  border-bottom: 3px solid var(--stage-proposed, #7c6cae);
}
.pv5-card__band--skeleton[data-stage="approved"] {
  background: color-mix(in srgb, var(--stage-approved, #2563eb) 12%, var(--bg-subtle, #ebeae8));
  border-bottom: 3px solid var(--stage-approved, #2563eb);
}
.pv5-card__band--skeleton[data-stage="construction"] {
  background: color-mix(in srgb, var(--stage-construction, #d4a84b) 14%, var(--bg-subtle, #ebeae8));
  border-bottom: 3px solid var(--stage-construction, #d4a84b);
}
.pv5-card__band--skeleton[data-stage="completed"] {
  background: color-mix(in srgb, var(--stage-completed, #16a34a) 12%, var(--bg-subtle, #ebeae8));
  border-bottom: 3px solid var(--stage-completed, #16a34a);
}
.pv5-card__band--skeleton[data-stage="inactive"] {
  background: color-mix(in srgb, var(--stage-inactive, #d1d5db) 30%, var(--bg-subtle, #ebeae8));
  border-bottom: 3px solid var(--stage-inactive, #d1d5db);
}

/* VL.LOAD — real stage pill + project name on the skeleton (when known). */
.pv5-card__stage-pill {
  margin-left: auto;
  font: var(--weight-semibold, 600) var(--text-caption, 11px)/1 var(--font-display, "Outfit", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-1, #111);
}
.pv5-skel-name {
  font: var(--weight-semibold, 600) var(--text-md, 15px)/1.3 var(--font-display, "Outfit", sans-serif);
  color: var(--ink-1, #111);
  margin: 12px 14px 0;
}

/* Tab strip placeholder — four equal-width pills matching the
   pv5-card__tabs layout (real tabs are CARD / ACTIVITY / DOCS / RECORD). */
.pv5-card__tabs--skeleton {
  display: flex;
  gap: 8px;
  padding: 12px 14px 4px;
  border-bottom: 1px solid var(--border-subtle, #e6e5e3);
}
.pv5-skel-tab {
  flex: 1;
  height: 28px;
  border-radius: 6px;
}

.pv5-card__tab-content--skeleton {
  padding: 8px 0 14px;
}

/* VL.LOAD — anti-strobe: a hover-prefetched panel that resolves sub-120ms
   never reaches full opacity, so the skeleton is gracefully absent instead
   of a one-frame flash. Pure opacity, no JS. */
.panel-v5[data-state="loading"] {
  animation: dev-skel-fadein var(--duration-fast, 120ms) var(--ease-out, ease);
}
@keyframes dev-skel-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Kept for back-compat; no longer applied (VL.LOAD replaced the pulse with
   the shared gold sweep above). */
@keyframes pv5-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Stage band — colored chrome strip at top of each card                   */
/* ═══════════════════════════════════════════════════════════════════════ */

/* V1 chrome — soft-tinted background + 3px coloured bottom border +
   stage-coloured pill chip on the right (Outfit bold uppercase). The
   colour signal lives in the pill + the 3px border, NOT a solid bar. */
.pv5-card__band {
  height: var(--pv5-band-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  background: color-mix(in srgb, var(--pv5-stage-color, var(--text-muted, #6b7280)) 12%, var(--pv5-card-bg, #fafaf9));
  border-bottom: 3px solid var(--pv5-stage-color, var(--text-muted, #6b7280));
  color: var(--text-secondary, #374151);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

/* Bare-parcel band uses the teal-parcel palette (same as v1/v3 close-bar chip) */
.pv5-card[data-stage-kind="parcel"] { --pv5-stage-color: #5eead4; --pv5-stage-text: #0f3030; }

.pv5-card__band-date {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #374151);
}
.pv5-card__band-counts {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  color: var(--text-muted, #6b7280);
}

/* D-AUDIT.STAGE-DRIFT.B.1 — activity_state indicator.
   Surfaces dormancy when project.activity_state is not 'active'. Small
   pill-shaped chip between the counts and the main stage pill. Color
   ramp: quiet (amber) → dormant (orange) → abandoned (red, dim text).
   'active' is the assumed default and gets no chip. */
.pv5-card__band-activity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 3px;
  white-space: nowrap;
}
.pv5-card__band-activity--quiet {
  color: #92400e;             /* amber-800 */
  background: #fef3c7;        /* amber-100 */
  border: 1px solid #fde68a;  /* amber-200 */
}
.pv5-card__band-activity--dormant {
  color: #9a3412;             /* orange-800 */
  background: #ffedd5;        /* orange-100 */
  border: 1px solid #fed7aa;  /* orange-200 */
}
.pv5-card__band-activity--abandoned {
  color: #b91c1c;             /* red-700 */
  background: #fee2e2;        /* red-100 */
  border: 1px solid #fecaca;  /* red-200 */
}

/* FND.T3.C — "New construction" honesty chip: a development Helio tracked (a
   /^new/ work-type permit), distinct from generic existing stock. Gold-tinted to
   tie to the construction identity + distinct from the amber dormancy chips.
   Dark-gold text on pale gold = AA on the light band. */
.pv5-card__band-newbuild {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill, 999px);
  color: #6b5310;             /* dark gold — AA on pale gold */
  background: #f7efd6;        /* pale gold */
  border: 1px solid #e6d28f;  /* gold-200 */
  white-space: nowrap;
}

/* The pill chip — V1 styling (.dev-detail-stage-label parity):
   bold display font, uppercase, white text on stage colour (dark on gold). */
.pv5-card__band-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill, 999px);   /* VL.P2.P5 — was raw 999px; same value, one scale */
  background: var(--pv5-stage-color, var(--text-muted, #6b7280));
  color: var(--pv5-stage-text, #fff);
  white-space: nowrap;
}
.pv5-card__band-pill-label {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Close button on the band — right of the pill */
.pv5-card__band-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary, #374151);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pv5-card__band-close:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text, #111);
}
.pv5-card__band-close:focus-visible {
  outline: 2px solid var(--accent-gold, #d4a84b);
  outline-offset: 2px;
}
.pv5-card__band-close-icon { font-weight: 400; line-height: 1; }

/* ═══ CP-GF.5 (2026-06-07, owner) — clean single-row band ═══════════════════
   The header was redesigned. The band is now ONE row: the stage pill (the lone
   filled signal, left) + the actions group (Follow injected by follow-ui.js +
   the close ×, right). The date / counts / new-build / activity chips moved OUT
   of the band — recency + the honesty signals to the status line under the title
   (.pv5-card__status), the size facts to the symmetric stat strip
   (.pv5-card__metrics), and the permit/inspection detail to the Construction
   Programme. This replaces the accreted TTF-HDR (2-row) + TTF-TB (toolbar) rules,
   which read "awful, not symmetrical" per the owner. The single child
   .pv5-card__band-primary spans the full band width; balance is pill-left /
   actions-right. follow-ui's .pv5-card__band-actions insertion hook is preserved. */
.pv5-card__band-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.pv5-card__band-primary .pv5-card__band-pill {
  margin-left: 0;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 12px;
}
.pv5-card__band-primary .pv5-card__band-pill-label {
  font-size: 13px;
  overflow: visible;
  text-overflow: clip;
}
/* bare-parcel unit count — a quiet count chip right of the pill */
.pv5-card__band-counts {
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  color: var(--text-muted, #6b7280);
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv5-card__band-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.pv5-card__band-close { flex: 0 0 auto; width: 44px; height: 44px; } /* P3: 44px WCAG touch target (icon stays centered via the base inline-flex) */
/* Follow → ghost chip matching the 24px pill tier (the base style was built for a
   dark band; this re-tones it for the cream band). Scoped under
   .pv5-card__band-actions so it beats user.css's base .dev-follow-btn--panel
   (follow-ui always injects the button into .pv5-card__band-actions). */
.pv5-card__band-actions .dev-follow-btn--panel {
  height: 24px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill, 999px);
  background: rgba(20, 16, 8, 0.06);
  color: var(--text-secondary, #374151);
  border: 1px solid color-mix(in srgb, var(--text-muted, #67707c) 28%, transparent);
}
.pv5-card__band-actions .dev-follow-btn--panel:hover {
  background: rgba(20, 16, 8, 0.1);
  border-color: color-mix(in srgb, var(--text-muted, #67707c) 42%, transparent);
}
.pv5-card__band-actions .dev-follow-btn--panel.is-following {
  background: color-mix(in srgb, var(--gold, #d4a84b) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold, #d4a84b) 44%, transparent);
  color: #6b5310; /* dark gold — AA on the faint gold tint */
}

/* ═══ CP-GF.5 — status line (recency + honesty signals, under the title) ═════
   Sits inside the identity block under the sub-line. Wraps freely (no truncation
   pressure — this is why the band-meta jumble moved here). One quiet recency
   stamp + small outline chips. */
.pv5-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 7px 0 0;
}
.pv5-card__status-asof {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  color: var(--text-muted, #6b7280);
}
/* COH.P2 — governing building-permit number in the status line (record anchor). */
.pv5-card__status-permit {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  color: var(--text-muted, #6b7280);
  padding: 1px 6px;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.pv5-card__status-chip {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  white-space: nowrap;
}
.pv5-card__status-chip--newbuild {
  color: #6b5310;                       /* dark gold — AA on white */
  border: 1px solid var(--gold, #d4a84b);
}
.pv5-card__status-chip--quiet     { color: #92400e; border: 1px solid #d6a52f; }
.pv5-card__status-chip--dormant   { color: #9a3412; border: 1px solid #ea580c; }
.pv5-card__status-chip--abandoned { color: #b91c1c; border: 1px solid #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Tier 2 — flex layout: band/hero/identity/timeline are fixed; only      */
/*  the tab content scrolls. Single-scroll discipline per Lloyd: no card-  */
/*  wide scroll that spans multiple viewports.                             */
/* ═══════════════════════════════════════════════════════════════════════ */

/* D110.SCROLL (2026-05-26) — Scroll ownership moved from
   .pv5-card__tab-content up to .pv5-card itself. The hero now scrolls
   away normally when the user scrolls inside the card; the band and the
   .pv5-card__sticky-rest group (identity + metrics + timeline + tabs)
   stick at the top so the user reads more tab content at once.
   Pre-D110: .pv5-card had overflow:hidden and the tab-content was the
   scroll owner — that meant the hero, identity row, and metrics ate
   ~340px of fixed viewport on every tab. */
.pv5-card {
  overflow-y: auto;
  overscroll-behavior: contain; /* P3: scroll stays in the sheet — no chain to the map/page (also blunts Android pull-to-refresh) */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #d1d5db) transparent;
}
.pv5-card::-webkit-scrollbar { width: 6px; height: 6px; }
.pv5-card::-webkit-scrollbar-track { background: transparent; }
.pv5-card::-webkit-scrollbar-thumb {
  background: var(--border-strong, #d1d5db);
  border-radius: 3px;
}
.pv5-card::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint, #9ca3af);
}
@media (prefers-reduced-motion: reduce) {
  .pv5-card { scroll-behavior: auto; } /* P3: no smooth-scroll on tab/anchor jumps for reduced-motion users */
}

.pv5-card__band {
  /* Sticks at the very top of the card; stage colour band stays in view */
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Z-CAPSTONE / D111 (2026-05-26) — Refines D110.SCROLL.
   Only the band stays pinned permanently. Identity, metrics, timeline,
   and the narrative region all scroll naturally as flow items. The tab
   strip becomes the new sticky pin once the user has scrolled past it
   (i.e. has committed to reading a tab). Net effect: full vertical
   surface for identity/narrative on initial view; full tab-content
   height once the user has scrolled.

   Backwards-compat: .pv5-card__sticky-rest is no longer rendered, but
   any in-flight cached HTML or future re-introduction stays well-behaved
   via display:contents (pass-through). */
.pv5-card__sticky-rest {
  display: contents;
}
.pv5-card__tabs {
  position: sticky;
  top: var(--pv5-band-height);
  z-index: 20;
  background: var(--pv5-card-bg, #fafaf9);
  /* Visual lift to mark the pin point */
  box-shadow: 0 1px 0 0 var(--border-subtle, #e5e4e0);
  /* PANEL-TABS-FIX (2026-06-09) — the headline SEV cause. `.pv5-card` is a
     fixed-height `display:flex; flex-direction:column` scroll container. The
     tab bar gained `overflow-x:auto` (horizontal tab scroll) which makes it a
     scroll container, so its flexbox `min-height:auto` resolves to 0. With the
     default flex-shrink:1, the tall card content then SHRANK the tab bar to
     ~0.67px (its border only) — the 25px tab buttons were clipped to invisible
     ("all the tabs are gone"). flex-shrink:0 pins the bar to its content
     height; horizontal overflow-x scrolling is unaffected. */
  flex-shrink: 0;
  /* COH.P2 — breathing room after the last section card (cards carry
     margin-bottom:0 so the gap is single-sourced here). */
  margin-top: 14px;
}

/* Backwards-compat: .pv5-card__tab-block is no longer rendered. */
.pv5-card__tab-block {
  display: contents;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Hero (photo or Street View)                                             */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-card__hero {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 240px;
  background: var(--bg-subtle, #ebeae8);
  overflow: hidden;
}
.pv5-card__hero--photo {
  background: #000;
}
.pv5-card__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.pv5-card__hero-stamp {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 3px 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.pv5-card__hero--streetview > iframe,
.pv5-card__hero--streetview > div[data-streetview-mount],
.pv5-card__hero--streetview .streetview-widget,
.pv5-card__hero--streetview canvas,
.pv5-card__hero--streetview .gm-style {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}
.pv5-card__hero-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* F-3: a subtle inset ring frames the embedded Street View so it reads as a
   deliberate part of our card rather than a bare third-party embed.
   pointer-events:none keeps the pano interactive AND leaves Google's required
   bottom-corner attribution (logo / © / Terms) fully visible — masking that
   would breach Google Maps Platform ToS. Full chrome removal needs the Static
   Street View API (flat image, watermark only) — a behavior change (loses
   pan/zoom), deferred to a Lloyd-gated decision. */
.pv5-card__hero--streetview::after,
.pv5-photos__streetview-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line, #e7e5e4);
  border-radius: inherit;
}
.pv5-card__hero-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  font-family: var(--font-mono, monospace);
}
.pv5-card__hero--abstract {
  background: linear-gradient(135deg, var(--bg-sunken), var(--bg-card));   /* VL.P2.FU — abstract hero keeps its #ebeae8->#f5f5f4 depth after the lift */
}
.pv5-card__hero-abstract {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Identity row (inside the card, under the hero)                          */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-card__identity {
  flex: 0 0 auto;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-card__identity-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pv5-card__identity-name {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text, #111);
  margin: 0;
  line-height: 1.3;
}
.pv5-card__identity-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.pv5-card__identity-sub-sep { color: var(--text-faint, #9ca3af); }
/* T1 — marketed name as quiet SECONDARY label. Civic address stays the
   authoritative primary in h1; this is descriptive context only (italic,
   slightly muted) so the user reads it as "also known as" not "this is
   the canonical name". */
.pv5-card__identity-display-name {
  font-style: italic;
  color: var(--text-muted, #6b7280);
  font-weight: 400;
}
.pv5-card__identity-headline {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #374151);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.01em;
}
.pv5-card__identity-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.pv5-card__identity-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #374151);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted, #6b7280);
}
.pv5-card__identity-action:hover {
  color: var(--accent-gold, #d4a84b);
  border-bottom-color: var(--accent-gold, #d4a84b);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Headline metrics row (D96.S7)                                            */
/*                                                                           */
/*  Always-visible row of 2-4 metric tiles between identity and tabs.        */
/*  Surfaces the top facts about the variant so the user can read units,     */
/*  year built, assessed value, etc. without clicking into a tab.            */
/*  Mono numerals + UPPERCASE labels echo the dashboard idiom used           */
/*  throughout V1 (assessments hero, KV grids).                              */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--border, #e7e5e4);
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-card__metric {
  background: var(--bg-paper, #fafaf9);
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* CP-GF.5 — symmetric centered stat strip */
  text-align: center;
  gap: 3px;
  min-width: 0;
}
.pv5-card__metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pv5-card__metric-value {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 19px;
  font-weight: 600;
  color: var(--text, #111);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pv5-card__metric-sub {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Tab bar + tab content (per-stage card)                                   */
/*                                                                           */
/*  D96.S8 — Removed a duplicate `.pv5-card__tab-block { flex: 0 0 auto }`   */
/*  block that previously lived here. Same HOTFIX.3b pattern S5 closed for   */
/*  `.pv5-card`: a later same-specificity rule silently overrode the         */
/*  canonical declaration at line 415 (`flex: 1 1 auto; min-height: 0`).     */
/*  Effect of the regression: tab content expanded to its natural height     */
/*  (1500px+), card clipped it via `overflow: hidden`, scrollbar never       */
/*  appeared because clientHeight matched scrollHeight. ~1276px of content   */
/*  was invisibly clipped on the construction-stage card. Verify-before-     */
/*  synthesize: confirmed via Playwright on prod (2688 Robie St) — tab       */
/*  content scrollTop=200 → returned 0 (no scroll possible).                 */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-card__tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border, #e7e5e4);
  background: var(--bg-paper, #fafaf9);
  /* Many tabs (incl. the gated Intelligence tab) used to clip / crawl out of
     the bar at narrow widths. Scroll horizontally instead, with a thin bar so
     overflow is discoverable; labels never truncate (flex:0 0 auto below). */
  overflow-x: auto;
  scrollbar-width: thin;
}
.pv5-card__tabs::-webkit-scrollbar { height: 4px; }
.pv5-card__tabs::-webkit-scrollbar-thumb { background: var(--border, #d9d7d3); border-radius: 2px; }
.pv5-card__tab {
  background: none;
  border: 0;
  flex: 0 0 auto;            /* never shrink a label to an ellipsis */
  white-space: nowrap;
  padding: 12px 12px 13px;   /* a touch tighter so more tabs fit before scroll */
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* The Intelligence tab is the web-tier emerging surface — set it slightly
   apart from the structured tabs with a divider + a faint gold marker. */
.pv5-card__tab[data-tab="intelligence"] {
  border-left: 1px solid var(--border, #e7e5e4);
  margin-left: 7px;
  padding-left: 15px;
}
.pv5-card__tab[data-tab="intelligence"]::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--gold-600, #b8923f);
  margin-right: 6px; vertical-align: middle; opacity: 0.75;
}
.pv5-card__tab:hover { color: var(--text-secondary, #374151); }
.pv5-card__tab.is-active {
  color: var(--text, #111);
  font-weight: 600;
}
/* Active tab underline color = stage color */
.pv5-card__tabs[data-stage-kind="construction"] .pv5-card__tab.is-active { border-bottom-color: var(--stage-construction, #d4a84b); }
.pv5-card__tabs[data-stage-kind="approval"]     .pv5-card__tab.is-active { border-bottom-color: var(--stage-approved, #2563eb); }
.pv5-card__tabs[data-stage-kind="proposal"]     .pv5-card__tab.is-active { border-bottom-color: var(--stage-proposed, #6b7280); }
.pv5-card__tabs[data-stage-kind="completion"]   .pv5-card__tab.is-active { border-bottom-color: var(--stage-completed, #16a34a); }
.pv5-card__tab:focus-visible {
  outline: 2px solid var(--accent-gold, #d4a84b);
  outline-offset: 2px;
  border-radius: 2px;
}
.pv5-card__tab-content {
  padding: 14px 20px 18px;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Parcel sections block (bottom of every card)                            */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-parcel-block {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-strong, #d1d5db);
  background: var(--bg-card, #f5f5f4);
}
.pv5-section {
  padding: 18px 20px;
  border-top: 1px solid var(--border, #e7e5e4);
}
.pv5-section:first-of-type { border-top: 0; }
.pv5-section__title {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pv5-section__source {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint, #9ca3af);
}
.pv5-section__body { font-size: 13px; color: var(--text-secondary, #374151); }

.pv5-subhead {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text, #111);
  margin: 14px 0 6px;
}
.pv5-section__body > .pv5-subhead:first-child { margin-top: 0; }

/* Key-value grids */
.pv5-kv-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border, #e7e5e4); }
.pv5-kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border, #e7e5e4);
  align-items: baseline;
}
.pv5-kv__k { font-size: 12px; color: var(--text-muted, #6b7280); }
.pv5-kv__v { font-size: 13px; color: var(--text, #111); }
.pv5-kv__v--mono { font-family: var(--font-mono, monospace); font-weight: 500; font-size: 12.5px; }
.pv5-kv--block { grid-template-columns: 1fr; gap: 4px; }
.pv5-kv--block .pv5-kv__k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }

.pv5-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #374151);
  background: var(--bg-paper, #fafaf9);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 3px;
}

/* Assessments */
.pv5-assessments__hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-assessments__hero-value {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #111);
  line-height: 1;
}
.pv5-assessments__hero-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.pv5-assessments__hero-taxable {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary, #374151);
  font-family: var(--font-mono, monospace);
}
.pv5-sales { list-style: none; padding: 0; margin: 8px 0 0; }
.pv5-sales__row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #e7e5e4);
  align-items: baseline;
  font-size: 13px;
}
.pv5-sales__date { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-muted, #6b7280); }
.pv5-sales__price { font-family: var(--font-mono, monospace); font-weight: 500; color: var(--text, #111); }
.pv5-sales__multi { font-size: 11px; color: var(--text-faint, #9ca3af); font-style: italic; }

/* Other Information */
.pv5-other__sub { margin-bottom: 14px; }
.pv5-other__sub:last-child { margin-bottom: 0; }
.pv5-other__list { list-style: none; padding: 0; margin: 0; }
.pv5-other__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #e7e5e4);
  font-size: 12.5px;
  color: var(--text-secondary, #374151);
}
.pv5-other__chip {
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  background: var(--bg-paper, #fafaf9);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 3px;
  padding: 2px 6px;
}
.pv5-other__chip--layer {
  font-family: var(--font-mono, monospace);
  font-weight: 500;
  color: var(--text-secondary, #374151);
  text-transform: none;
  letter-spacing: 0;
}
.pv5-other__class { font-family: var(--font-mono, monospace); font-weight: 500; font-size: 12px; color: var(--text, #111); }
.pv5-other__meta { font-size: 11.5px; color: var(--text-muted, #6b7280); }
.pv5-other__overlap { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-faint, #9ca3af); }

/* Cross-references */
.pv5-xrefs__list { font-family: var(--font-mono, monospace); font-size: 12px; word-break: break-all; }
.pv5-xrefs__parent-link { color: var(--text-secondary, #374151); text-decoration: none; border-bottom: 1px dotted var(--text-muted, #6b7280); }
.pv5-xrefs__parent-link:hover { color: var(--accent-gold, #d4a84b); border-bottom-color: var(--accent-gold, #d4a84b); }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Photos tab                                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-photos__group { margin-bottom: 18px; }
.pv5-photos__group:last-child { margin-bottom: 0; }
.pv5-photos__month {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--bg-paper, #fafaf9);
  padding: 4px 0;
  z-index: 2;
}
.pv5-photos__month-label { font-weight: 600; color: var(--text-secondary, #374151); }
.pv5-photos__month-count { color: var(--text-faint, #9ca3af); font-family: var(--font-mono, monospace); }
.pv5-photos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pv5-photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-subtle, #ebeae8);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.pv5-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv5-photo__date {
  position: absolute;
  left: 4px; bottom: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.pv5-photo:focus-visible { outline: 2px solid var(--accent-gold, #d4a84b); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Activity tab                                                            */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-act__year-group { margin-bottom: 14px; }
.pv5-act__year-group:last-child { margin-bottom: 0; }
.pv5-act__year {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-faint, #9ca3af);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-act__rows { display: flex; flex-direction: column; }
.pv5-act__row {
  display: grid;
  grid-template-columns: 90px 110px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-secondary, #374151);
  border-bottom: 1px solid var(--border, #e7e5e4);
  text-decoration: none;
}
.pv5-act__row:last-child { border-bottom: 0; }
.pv5-act__row--link { cursor: pointer; }
.pv5-act__row--link:hover { background: var(--bg-card, #f5f5f4); }
.pv5-act__row--link:hover .pv5-act__title { color: var(--text, #111); }
.pv5-act__date { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #6b7280); text-align: left; }
.pv5-act__kind { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary, #374151); }
.pv5-act__kind--approved { color: var(--stage-completed, #16a34a); }
.pv5-act__kind--refused, .pv5-act__kind--failed { color: var(--status-error, #dc2626); }
.pv5-act__kind--passed { color: var(--stage-completed, #16a34a); }
.pv5-act__title { color: var(--text, #111); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.pv5-act__source { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-muted, #6b7280); white-space: nowrap; }
.pv5-act__value { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-secondary, #374151); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Permits & Documents tab                                                 */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-pd { display: flex; flex-direction: column; gap: 18px; }
.pv5-permits__list { display: flex; flex-direction: column; }
.pv5-permit { border-bottom: 1px solid var(--border, #e7e5e4); }
.pv5-permit[open] { background: var(--bg-card, #f5f5f4); border-radius: 3px; border-bottom-color: transparent; }
.pv5-permit__summary {
  display: grid;
  grid-template-columns: 130px 80px 80px 90px 1fr;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
  align-items: baseline;
  list-style: none;
  font-size: 12.5px;
}
.pv5-permit__summary::-webkit-details-marker { display: none; }
.pv5-permit__summary:hover { background: var(--bg-subtle, #ebeae8); }
.pv5-permit__num { font-family: var(--font-mono, monospace); font-weight: 500; font-size: 12px; color: var(--text, #111); }
.pv5-permit__kind { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted, #6b7280); }
.pv5-permit__status { font-size: 11px; color: var(--text-secondary, #374151); text-transform: capitalize; }
.pv5-permit__date { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #6b7280); }
.pv5-permit__work { font-size: 12px; color: var(--text-secondary, #374151); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* P3.5 (mobile/iPad arc) — the 5-column permit row (130+80+80+90+1fr ≈ 420px)
   overflows the ~315px panel at 375px. Reflow to a 2-column stack at ≤480px. */
@media (max-width: 480px) {
  .pv5-permit__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
  }
  .pv5-permit__num    { grid-column: 1; }
  .pv5-permit__date   { grid-column: 2; text-align: right; }
  .pv5-permit__kind   { grid-column: 1; }
  .pv5-permit__status { grid-column: 2; text-align: right; }
  .pv5-permit__work   { grid-column: 1 / -1; white-space: normal; }
}
.pv5-permit__detail { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 0; }
.pv5-permit__detail .pv5-kv { padding: 4px 0; border-bottom: 1px dashed var(--border, #e7e5e4); }
.pv5-permit__detail .pv5-kv:last-child { border-bottom: 0; }
.pv5-permit__inspections { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, #e7e5e4); }
.pv5-permit__inspections-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #6b7280); margin-bottom: 6px; }
.pv5-insp { display: grid; grid-template-columns: 90px 80px 1fr; gap: 10px; padding: 3px 0; font-size: 11.5px; align-items: baseline; }
.pv5-insp__date { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted, #6b7280); }
.pv5-insp__outcome { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary, #374151); }
.pv5-insp__outcome--passed { color: var(--stage-completed, #16a34a); }
.pv5-insp__outcome--failed { color: var(--status-error, #dc2626); }
.pv5-insp__type { font-size: 11.5px; color: var(--text-secondary, #374151); text-transform: capitalize; }

.pv5-docs__list { display: flex; flex-direction: column; }
.pv5-doc {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #e7e5e4);
  align-items: baseline;
  font-size: 12.5px;
  text-decoration: none;
  color: var(--text-secondary, #374151);
}
.pv5-doc:last-child { border-bottom: 0; }
.pv5-doc--link:hover { background: var(--bg-card, #f5f5f4); }
.pv5-doc--link:hover .pv5-doc__label { color: var(--accent-gold, #d4a84b); }
.pv5-doc__cat { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #6b7280); }
.pv5-doc__label { font-size: 12.5px; color: var(--text, #111); overflow: hidden; text-overflow: ellipsis; }
.pv5-doc__date { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-faint, #9ca3af); }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Empty state                                                             */
/* ═══════════════════════════════════════════════════════════════════════ */

.pv5-empty { padding: 14px 0; text-align: left; }
.pv5-empty__msg { font-size: 13px; color: var(--text-secondary, #374151); margin: 0 0 4px; font-style: normal; }
.pv5-empty__hint { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0; line-height: 1.5; max-width: 480px; }

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Mobile (≤640px) — collapse the stack to vertical accordion              */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pv5-deck {
    padding-top: 0;
    padding-right: 0;
    /* SCROLL FIX: on mobile the cards become position:relative (accordion, below)
       so the DECK must own the scroll. Without this the stacked card content grows
       past the panel and is clipped by #dev-detail{overflow:hidden} with no way to
       reach it — the panel looked frozen. Verified live: deck scrollH 13824/772. */
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }
  .pv5-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-bottom: 8px;
  }
  .pv5-card[data-stack-position="back"] {
    /* On mobile back cards become collapsed accordion items — header band only */
    max-height: var(--pv5-band-height);
    overflow: hidden;
  }
  .pv5-card__hero { height: 200px; }
  .pv5-card__identity { padding: 14px 16px 10px; }
  .pv5-section { padding: 14px 16px; }
  .pv5-kv { grid-template-columns: 110px 1fr; gap: 8px; }
  .pv5-act__row {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "date kind"
      "date title"
      "source value";
    gap: 4px 8px;
  }
  .pv5-act__date { grid-area: date; }
  .pv5-act__kind { grid-area: kind; }
  .pv5-act__title { grid-area: title; }
  .pv5-act__source { grid-area: source; font-size: 10px; }
  .pv5-act__value { grid-area: value; font-size: 10px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  /* VL.LOAD — CRITICAL: added .pv5-skel-line, .pv5-skel-tab, .panel-v5 to
     the list. The pre-VL block omitted the skel rows, so the new
     dev-skel-sweep / dev-skel-fadein keyframes would have leaked motion
     under reduced-motion. Now every skeleton surface rests on its flat
     fill (the stage-tinted band keeps its STATIC real colour; unknown
     blocks hold flat --bg-subtle) and the real stage pill + project name
     still render as static text — the reduced-motion user gets the best
     part of the redesign (identity) with zero animation. */
  .pv5-card, .pv5-card__tab,
  .pv5-card__band--skeleton, .pv5-card__hero--skeleton,
  .pv5-skel-line, .pv5-skel-tab, .panel-v5 {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Tier 2 additions                                                        */
/*  - Tab bar V1 styling (equal-width flex, gold underline, no padding)    */
/*  - Hero compaction (200px → 180px) to leave more room for tab content   */
/*  - Identity row compaction                                              */
/*  - Timeline lifecycle bar (proposal/approval)                           */
/*  - Lens sub-card primitive                                              */
/*  - Cases / Decisions / Coverage / Documents content                     */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Hero shrink */
.pv5-card__hero { height: 180px; }

/* Identity compaction */
.pv5-card__identity { padding: 14px 20px 12px; }
.pv5-card__identity-name { font-size: 18px; line-height: 1.25; }
.pv5-card__identity-sub { margin-top: 3px; font-size: 12.5px; }
.pv5-card__identity-actions { margin-top: 8px; }

/* D96.S7 / CP-GF.5 — Metrics row compaction at narrow widths. Below 480px the
   row caps at 2 columns so each tile keeps room for the number even on a 360px
   phone viewport, and the value font shrinks one step. (The canonical desktop
   padding + value size live on the base rule above — these only kick in narrow.) */
@media (max-width: 480px) {
  .pv5-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .pv5-card__metric { padding: 9px 12px 10px; }
  .pv5-card__metric-value { font-size: 16px; }
  /* COH.P2.FU — the band's × close was fully clipped at 375px: the stage pill
     (flex:0 0 auto, nowrap, ~188px) + Follow pushed the actions past the card's
     hidden right edge. Let the pill shrink + truncate so Follow and × always
     stay on-card. The label ellipsizes ("UNDER CONST…"); actions untouched. */
  .pv5-card__band-primary .pv5-card__band-pill { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .pv5-card__band-primary .pv5-card__band-pill-label {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* V1 tab bar — equal-width tabs, gold underline (per-stage), border-bottom */
.pv5-card__tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid var(--border, #e7e5e4);
  background: var(--bg-paper, #fafaf9);
}
.pv5-card__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  /* TAB-FIT (2026-06-09) — at 7 merged tabs the equal-width slots (~58px) clipped
     the longer labels. Trimming the font 12.5→11.5px + side padding 6→4px buys
     each label enough room to render in full (paired with "Intelligence"→"Intel"). */
  padding: 11px 4px 12px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  /* equal-width tabs that truncate cleanly */
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0;
  transition: color 0.12s ease, border-color 0.12s ease;
  margin-bottom: -1px;
}
.pv5-card__tab:hover { color: var(--text-secondary, #374151); }
.pv5-card__tab.is-active {
  color: var(--text, #111);
  font-weight: 600;
}
/* Active underline = stage colour */
.pv5-card__tabs[data-stage-kind="construction"] .pv5-card__tab.is-active { border-bottom-color: var(--stage-construction, #d4a84b); }
.pv5-card__tabs[data-stage-kind="approval"]     .pv5-card__tab.is-active { border-bottom-color: var(--stage-approved, #2563eb); }
.pv5-card__tabs[data-stage-kind="proposal"]     .pv5-card__tab.is-active { border-bottom-color: var(--stage-proposed, #6b7280); }
.pv5-card__tabs[data-stage-kind="completion"]   .pv5-card__tab.is-active { border-bottom-color: var(--stage-completed, #16a34a); }
.pv5-card__tabs[data-stage-kind="parcel"]       .pv5-card__tab.is-active { border-bottom-color: #5eead4; }
.pv5-card__tab:focus-visible {
  outline: 2px solid var(--accent-gold, #d4a84b);
  outline-offset: -2px;
  border-radius: 2px;
}
.pv5-card__tab-content {
  padding: 14px 16px 18px;
}
/* TAB-FIT mobile (2026-06-09) — at ≤480px a 7-tab merged project gives ~41px
   equal-width slots; "Decision" et al. would need ~9px type to fit, so the
   ellipsis clips them. Switch to natural-width tabs + horizontal scroll (the bar
   already has overflow-x:auto) so labels stay legible and the user swipes. */
@media (max-width: 480px) {
  .pv5-card__tab { flex: 0 0 auto; }
}

/* ─── Timeline lifecycle bar ─────────────────────────────────────────── */

.pv5-timeline {
  display: flex;
  align-items: flex-start;
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--border, #e7e5e4);
  background: var(--bg-card, #f5f5f4);
  gap: 0;
}
.pv5-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}
.pv5-timeline__dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-paper, #fafaf9);
  border: 2px solid var(--border-strong, #d1d5db);
  box-sizing: border-box;
}
.pv5-timeline__step.is-filled .pv5-timeline__dot {
  background: var(--pv5-stage-color, var(--text-muted, #6b7280));
  border-color: var(--pv5-stage-color, var(--text-muted, #6b7280));
}
.pv5-timeline__step.is-current .pv5-timeline__dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pv5-stage-color, var(--text-muted)) 18%, transparent);
}
.pv5-timeline__step.is-refused .pv5-timeline__dot {
  background: var(--status-error, #dc2626);
  border-color: var(--status-error, #dc2626);
}
.pv5-timeline__line {
  flex: 1 1 0;
  height: 2px;
  margin-top: 5px;  /* aligns with dot centre */
  background: var(--border-strong, #d1d5db);
}
.pv5-timeline__line.is-filled {
  background: var(--pv5-stage-color, var(--text-muted, #6b7280));
}
.pv5-timeline__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #374151);
  white-space: nowrap;
}
.pv5-timeline__date {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--text-muted, #6b7280);
}
.pv5-timeline__date--empty { color: var(--text-faint, #9ca3af); font-style: italic; }

/* ─── Lens sub-card primitive ─────────────────────────────────────────── */

.pv5-lens {
  background: var(--bg-paper, #fafaf9);
  border: 1px solid var(--border, #e7e5e4);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 12px;
  overflow: hidden;
}
.pv5-lens:last-child { margin-bottom: 0; }
.pv5-lens__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border, #e7e5e4);
  background: var(--bg-card, #f5f5f4);
}
.pv5-lens__title {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text, #111);
  margin: 0;
}
.pv5-lens__source {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint, #9ca3af);
}
.pv5-lens__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.pv5-lens__body {
  padding: 10px 14px 14px;
  font-size: 13px;
  color: var(--text-secondary, #374151);
}

/* ─── Cases content ────────────────────────────────────────────────────── */

.pv5-case {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-case:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pv5-case__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.pv5-case__id {
  font-family: var(--font-mono, monospace);
  font-weight: 500;
  font-size: 12px;
  color: var(--text, #111);
}
.pv5-case__kind {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.pv5-case__link {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary, #374151);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted, #6b7280);
}
.pv5-case__link:hover { color: var(--accent-gold, #d4a84b); border-bottom-color: var(--accent-gold, #d4a84b); }

/* ─── Decisions content ────────────────────────────────────────────────── */

.pv5-decisions { display: flex; flex-direction: column; gap: 12px; }
.pv5-decision {
  padding: 10px 12px;
  background: var(--bg-card, #f5f5f4);
  border-radius: var(--radius-sm, 4px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}
.pv5-decision__outcome {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--text-secondary, #374151);
}
.pv5-decision__outcome[data-outcome="approved"] { color: var(--stage-completed, #16a34a); }
.pv5-decision__outcome[data-outcome="refused"]  { color: var(--status-error, #dc2626); }
.pv5-decision__outcome[data-outcome="withdrawn"],
.pv5-decision__outcome[data-outcome="lapsed"]   { color: var(--text-muted, #6b7280); }
.pv5-decision__date {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  text-align: right;
}
.pv5-decision__desc {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--text-secondary, #374151);
  margin-top: 2px;
}
.pv5-decision__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}
.pv5-decision__case { font-family: var(--font-mono, monospace); }
.pv5-decision__kind { text-transform: capitalize; }
.pv5-decision__link {
  color: var(--text-secondary, #374151);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted, #6b7280);
}
.pv5-decision__link:hover { color: var(--accent-gold, #d4a84b); border-bottom-color: var(--accent-gold, #d4a84b); }

/* ─── Coverage content ─────────────────────────────────────────────────── */

.pv5-coverage__list { display: flex; flex-direction: column; gap: 10px; }
.pv5-coverage__item {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e7e5e4);
}
.pv5-coverage__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pv5-coverage__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.pv5-coverage__date { font-family: var(--font-mono, monospace); }
.pv5-coverage__source {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 10px;
}
.pv5-coverage__link {
  margin-left: auto;
  color: var(--text-secondary, #374151);
  text-decoration: none;
}
.pv5-coverage__link:hover { color: var(--accent-gold, #d4a84b); }
.pv5-coverage__body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #374151);
}

/* ─── Property record tab content compaction ───────────────────────────── */

.pv5-card__tab-content .pv5-parcel-block {
  border-top: 0;
  background: transparent;
}
.pv5-card__tab-content .pv5-section {
  padding: 0 0 16px;
  border-top: 0;
}
.pv5-card__tab-content .pv5-section + .pv5-section {
  padding-top: 16px;
  border-top: 1px solid var(--border, #e7e5e4);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  Z-CAPSTONE — HELIO ANALYSIS section                                     */
/* ═══════════════════════════════════════════════════════════════════════ */
/*
   Renders between .pv5-timeline (or .pv5-card__metrics when no timeline)
   and .pv5-card__tabs. Featured projects only. Distinct typographic
   identity from the raw observed data: serif accents in the brand mark,
   visible monogram band, slightly different background to mark this as
   editorial/our opinion (not data-store output).
*/

/* COH.P2 — interpretive section-card: same container as .pv5-prog (gutter,
   border, radius) + the gold left rule marking the editorial layer (replaces
   the old full-bleed band + absolute ::before bar). */
.pv5-narr {
  flex: 0 0 auto;
  padding: 16px 16px 18px;
  margin: 14px 14px 0;
  background: linear-gradient(180deg,
    rgba(212, 168, 75, 0.04) 0%,
    rgba(212, 168, 75, 0.015) 100%);
  border: 1px solid var(--pv5-border, #e6e3dd);
  border-left: 3px solid var(--gold, #d4a84b);
  border-radius: 10px;
  position: relative;
}
/* COH.P2 — interpretive-layer chip: AI-generated, every claim cited. */
.pv5-narr__ai-chip {
  padding: 2px 7px; border-radius: var(--radius-pill, 999px);
  font: 700 8.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .06em;
  color: #8a6a23; background: rgba(212, 168, 75, .16); white-space: nowrap;
  align-self: center;
}

.pv5-narr__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pv5-narr__brand {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600, #b8923f);
}
.pv5-narr__thesis {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1f1f1f);
  font-style: italic;
}

/* Z-CAP.SUB.3 — point-in-time freshness stamp under the thesis. Quiet,
   mono, low-contrast: present but never competing with the analysis. */
.pv5-narr__asof {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a8a8a);
  margin-top: 4px;
}

.pv5-narr__summary {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary, #1f1f1f);
  margin: 6px 0 10px;
  font-weight: 500;
}

.pv5-narr__cite {
  font-size: 9px;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--gold-600, #b8923f);
  padding: 0 1px;
  letter-spacing: 0;
}

.pv5-narr__details {
  margin-top: 10px;
}

/* Z-CAP.STYLE.v3 — pronounced pill affordance, symmetric with the
   bottom Collapse button. Same dimensions, mirrored chevron direction. */
.pv5-narr__details-toggle,
.pv5-narr__collapse {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-600, #b8923f);
  background: rgba(212, 168, 75, 0.10);
  border: 1px solid rgba(212, 168, 75, 0.32);
  border-radius: 999px;
  user-select: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.pv5-narr__details-toggle::-webkit-details-marker { display: none; }
.pv5-narr__details-toggle:hover,
.pv5-narr__collapse:hover {
  color: var(--gold, #d4a84b);
  background: rgba(212, 168, 75, 0.18);
  border-color: var(--gold, #d4a84b);
}
.pv5-narr__details-toggle:active,
.pv5-narr__collapse:active {
  transform: translateY(1px);
}
.pv5-narr__details-toggle:focus-visible,
.pv5-narr__collapse:focus-visible {
  outline: 2px solid var(--gold, #d4a84b);
  outline-offset: 2px;
}

.pv5-narr__details-icon,
.pv5-narr__collapse-icon {
  /* Z-CAP.STYLE.v4 — chevron character is swapped in JS (▾↔▴) on the
     <details> toggle event, and label text is swapped too. No CSS
     rotate or ::after content-swap is needed; the pill keeps the same
     horizontal layout in both collapsed and expanded states. Removed:
     the v3 visibility:hidden + width:0 + ::after position:absolute
     hack, which collapsed the pill to ~47×72 in the expanded state. */
  font-size: 11px;
  line-height: 1;
  display: inline-block;
}

.pv5-narr__details-inner {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 168, 75, 0.18);
}

/* Symmetric bottom collapse button — same pill as the top, mirrored. */
.pv5-narr__collapse {
  margin-top: 16px;
  /* Button element resets */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.pv5-narr__collapse-label {
  display: inline-block;
}

.pv5-narr__body {
  margin-bottom: 14px;
}
.pv5-narr__body-p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary, #1f1f1f);
  margin: 0 0 10px;
}
.pv5-narr__body-p:last-child { margin-bottom: 0; }

.pv5-narr__watch,
.pv5-narr__gaps,
.pv5-narr__sources {
  margin-top: 12px;
}
.pv5-narr__watch-label,
.pv5-narr__gaps-label,
.pv5-narr__sources-label {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 6px;
}
.pv5-narr__watch-list,
.pv5-narr__gaps-list,
.pv5-narr__sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pv5-narr__watch-item,
.pv5-narr__gaps-item {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary, #1f1f1f);
  padding: 4px 0 4px 14px;
  position: relative;
}
.pv5-narr__watch-item::before,
.pv5-narr__gaps-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold-600, #b8923f);
  font-weight: 700;
}
.pv5-narr__gaps-item::before { color: var(--text-faint, #9ca3af); }

.pv5-narr__sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pv5-narr__source {
  display: inline-flex;
}
.pv5-narr__source-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  background: rgba(212, 168, 75, 0.08);
  border: 1px solid rgba(212, 168, 75, 0.2);
  border-radius: 999px;
  text-decoration: none;
  transition: all 120ms ease;
}
.pv5-narr__source-link:hover {
  color: var(--gold-600, #b8923f);
  border-color: var(--gold, #d4a84b);
  background: rgba(212, 168, 75, 0.14);
}
.pv5-narr__source-num {
  font-weight: 700;
  color: var(--gold-600, #b8923f);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 10.5px;
}
.pv5-narr__source-host {
  /* spacing handled via inline " " prefix to avoid CSS-level layout cost */
}

.pv5-narr__byline {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(212, 168, 75, 0.12);
  font-size: 10.5px;
  font-style: italic;
  color: var(--text-faint, #9ca3af);
  letter-spacing: 0.02em;
}

/* ─── Z-CAP.FU3 Street View footer card in Photos tab ──────────────────── */

.pv5-photos__streetview {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e7e5e4);
}
.pv5-photos__streetview-label {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
}
.pv5-photos__streetview-frame {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-subtle, #ebeae8);
}
.pv5-photos__streetview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pv5-photos__streetview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12.5px;
  color: var(--text-faint, #9ca3af);
}

/* ─── Z-CAP.STYLE.v2 — structured markdown body + clickable citations ─── */

.pv5-narr__bold {
  font-weight: 600;
  color: var(--text-primary, #1f1f1f);
}

.pv5-narr__body-list {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0;
}
.pv5-narr__body-li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary, #1f1f1f);
  padding: 3px 0 3px 14px;
  position: relative;
}
.pv5-narr__body-li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold-600, #b8923f);
  font-weight: 700;
}

/* Inline citation chips — linked variant lets users click straight to source. */
.pv5-narr__cite--linked {
  text-decoration: none;
  display: inline;
}
.pv5-narr__cite--linked:hover {
  text-decoration: none;
}
.pv5-narr__cite--linked:hover .pv5-narr__cite,
.pv5-narr__cite--linked > sup {
  color: var(--gold, #d4a84b);
  cursor: pointer;
}
.pv5-narr__cite--linked > sup {
  font-size: 9px;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  color: var(--gold-600, #b8923f);
  padding: 0 1px;
  letter-spacing: 0;
  transition: color 120ms ease;
}
.pv5-narr__cite--linked:focus-visible {
  outline: 2px solid var(--gold, #d4a84b);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Z-CAP.PERMITS-WALK.FU Q3 — multi-project chip nav ───────────────── */
/* Shown only when a parcel hosts 2+ distinct projects. Clicking a chip
   swaps the deck below. 72 parcels host 163 projects across the dataset;
   without this, 91 projects were rendered as 0 because card-deck.js
   only consumed stages_v5[0]. */

.pv5-deck-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.pv5-project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(212, 168, 75, 0.18);
  background: rgba(212, 168, 75, 0.04);
  flex-shrink: 0;
}

.pv5-project-chip {
  /* Button reset */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(212, 168, 75, 0.28);
  background: rgba(212, 168, 75, 0.06);
  color: var(--text-secondary, #6b7280);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv5-project-chip:hover {
  color: var(--gold-600, #b8923f);
  border-color: rgba(212, 168, 75, 0.55);
  background: rgba(212, 168, 75, 0.12);
}

.pv5-project-chip.is-active {
  color: var(--gold-600, #b8923f);
  border-color: var(--gold, #d4a84b);
  background: rgba(212, 168, 75, 0.18);
  font-weight: 600;
}

.pv5-project-chip:focus-visible {
  outline: 2px solid var(--gold, #d4a84b);
  outline-offset: 2px;
}

/* When wrapped in deck-wrap, the inner .pv5-deck still owns its own
   flex sizing — but it needs to know it's no longer the top-level
   element, so reset any "fill remainder" math at the wrap level. */
.pv5-deck-wrap > .pv5-deck {
  flex: 1 1 auto;
  min-height: 0;
}

/* ========== CTI Phase 3 — Construction timeline band (.pv5-ctl) ==========
   Additive synopsis on construction/completion cards (sibling to .pv5-timeline).
   Inherits --pv5-stage-color from the card's data-stage-kind. */
/* COH.P2 — record section-card (matches .pv5-prog; was a full-bleed band). */
.pv5-ctl {
  margin: 14px 14px 0;
  padding: 12px 16px 14px;
  border: 1px solid var(--pv5-border, #e6e3dd);
  border-radius: 10px;
  background: var(--surface, #faf9f7);
}
.pv5-ctl__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pv5-ctl__eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3, #67707c);
}
.pv5-ctl__current { font-size: 13px; font-weight: 700; color: var(--pv5-stage-color, #d4a84b); }
.pv5-ctl--completed .pv5-ctl__current { color: var(--stage-completed, #16a34a); }
.pv5-ctl--stalled  .pv5-ctl__current { color: var(--ink-2, #4b5563); }

.pv5-ctl__track {
  display: flex; align-items: flex-start;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.pv5-ctl__mk {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 62px; flex: 0 0 auto;
}
.pv5-ctl__dot {
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: var(--pv5-stage-color, #d4a84b); border: 2px solid var(--pv5-stage-color, #d4a84b);
}
.pv5-ctl__mk.is-pending .pv5-ctl__dot { background: transparent; border-color: var(--ink-3, #9aa3ad); }
.pv5-ctl__mk.is-current .pv5-ctl__dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv5-stage-color, #d4a84b) 28%, transparent);
}
.pv5-ctl--completed .pv5-ctl__dot { background: var(--stage-completed, #16a34a); border-color: var(--stage-completed, #16a34a); }
.pv5-ctl__mklabel { margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2, #374151); white-space: nowrap; }
.pv5-ctl__mk.is-pending .pv5-ctl__mklabel { color: var(--ink-3, #9aa3ad); font-weight: 500; }
.pv5-ctl__mkdate { font-size: 10px; color: var(--ink-3, #67707c); white-space: nowrap; }
.pv5-ctl__mkdate.is-empty { font-style: italic; opacity: .8; }

.pv5-ctl__line { flex: 1 1 auto; min-width: 16px; height: 2px; margin-top: 5px; background: var(--pv5-stage-color, #d4a84b); }
.pv5-ctl--completed .pv5-ctl__line.is-solid { background: var(--stage-completed, #16a34a); }
.pv5-ctl__line.is-dashed { background: transparent; border-top: 2px dashed var(--ink-3, #c4c9cf); height: 0; }
.pv5-ctl__line.is-dormant { border-top-color: var(--ink-3, #b0b6bd); }

.pv5-ctl__sub { margin: 10px 0 0; font-size: 12px; color: var(--ink-3, #67707c); line-height: 1.45; }
.pv5-ctl__chip { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pv5-ctl__chip--dormant { background: color-mix(in srgb, var(--ink-3, #67707c) 14%, transparent); color: var(--ink-2, #4b5563); }

.pv5-ctl__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 640px) { .pv5-ctl__track { overflow-x: visible; } }

/* ========== Project lifecycle (.pv5-prog) — LCR-B "Editorial ledger" ==========
   Owner Gate-1 pick (2026-06-09); replaces the dot-and-rail ladder. Header =
   eyebrow · thin progress meter · n/m mono count; sub-line = regime; completed
   stages as compressed check-rows with right-aligned mono dates; the CURRENT
   stage as a highlighted gold block with an IN PROGRESS chip. Field-review
   stages (Part-3 Structure/Envelope) keep the honesty note — engineer field
   review, not municipally inspected — never blank or "stalled". */
/* COH.P2 (2026-06-09) — section-card idiom: every foreground section below the
   metrics row (.pv5-prog, .pv5-ctl, .pv5-narr) shares the same container —
   14px gutter on all sides, 1px border, 10px radius, 16px internal padding.
   RECORD sections (lifecycle, build-out) keep the neutral border; INTERPRETIVE
   sections (Helio Analysis) add a 3px gold left rule + an "AI · CITED" chip so
   the two purposes are visually signalled, not implied. */
.pv5-prog {
  margin: 14px 14px 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--pv5-border, #e6e3dd);
  border-radius: 10px;
  background: var(--surface, #faf9f7);
}
.pv5-prog__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.pv5-prog__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3, #67707c);
}
.pv5-prog__meter {
  flex: 1; height: 3px; border-radius: 2px; overflow: hidden;
  background: var(--bg-subtle, #e8e5de);
}
.pv5-prog__meter-fill {
  display: block; height: 100%;
  /* green body with a gold leading edge — "built so far, gold where it's live" */
  background: linear-gradient(90deg, var(--stage-completed, #16a34a) 78%, var(--gold, #d4a84b));
}
.pv5-prog__meter-fill.is-full { background: var(--stage-completed, #16a34a); }
.pv5-prog__count {
  font: 700 11px var(--font-mono, "JetBrains Mono", monospace);
  color: var(--ink-1, #1f2937);
}
.pv5-prog__sub { font-size: 10.5px; color: var(--ink-3, #9aa3ad); margin-bottom: 10px; }

.pv5-prog__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pv5-prog__row {
  display: flex; align-items: center; gap: 9px;
  padding: 5.5px 0; border-bottom: 1px solid var(--border-subtle, #f1efea);
}
.pv5-prog__row:last-child { border-bottom: 0; }

.pv5-prog__tick {
  flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; box-sizing: border-box;
}
.pv5-prog__row.is-complete .pv5-prog__tick {
  background: color-mix(in srgb, var(--stage-completed, #16a34a) 12%, transparent);
  color: #15803d;
}
.pv5-prog__row.is-upcoming .pv5-prog__tick { border: 1.5px dashed var(--border, #cfc8bd); }

.pv5-prog__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2, #374151); line-height: 1.25; }
.pv5-prog__row.is-upcoming .pv5-prog__label { color: var(--ink-3, #9aa3ad); font-weight: 500; }
.pv5-prog__date {
  margin-left: auto;
  font: 500 10.5px var(--font-mono, "JetBrains Mono", monospace);
  color: var(--ink-3, #9aa3ad);
}

/* The current stage — highlighted gold block (the band's focal point) */
.pv5-prog__row.is-current {
  margin: 4px -6px; padding: 9px 10px;
  border-bottom: 0; border-left: 3px solid var(--gold, #d4a84b);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(212, 168, 75, .10), rgba(212, 168, 75, .03));
}
.pv5-prog__dot {
  flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold, #d4a84b);
  box-shadow: 0 0 0 3px rgba(212, 168, 75, .25);
  box-sizing: border-box;
}
.pv5-prog__body { display: flex; flex-direction: column; gap: 1px; }
.pv5-prog__row.is-current .pv5-prog__label { font-size: 13.5px; font-weight: 700; color: var(--ink-1, #1f2937); }
.pv5-prog__note { font-size: 10.5px; color: var(--gold-600, #b8923f); line-height: 1.3; }
.pv5-prog__chip {
  margin-left: auto; padding: 3px 8px; border-radius: var(--radius-pill, 999px);
  font: 700 9.5px var(--font-body, "Inter", system-ui, sans-serif); letter-spacing: .05em;
  color: #8a6a23; background: rgba(212, 168, 75, .22); white-space: nowrap;
}
/* Field review: in progress but not municipally inspected — dashed hollow dot */
.pv5-prog__row.is-current.is-fieldreview .pv5-prog__dot {
  background: #fff; border: 2px dashed var(--gold, #d4a84b); box-shadow: none;
}
/* Evidence chip on a completed row (permit #, "field review") — LCR-C */
.pv5-prog__src {
  margin-left: 8px; padding: 1.5px 6px; border-radius: var(--radius-pill, 999px);
  font: 700 8px/1.4 "JetBrains Mono", monospace; letter-spacing: .04em;
  color: #8a6a23; background: rgba(212, 168, 75, .16); white-space: nowrap;
}
/* Cross-feed footer: permit/inspection counts + jump to the Permits tab — LCR-C */
.pv5-prog__xfeed {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border, #e0ddd6);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.pv5-prog__xfeed-c { font-size: 9.5px; color: var(--ink-3, #67707c); }
.pv5-prog__xfeed-link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: 700 9.5px var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--gold-600, #b8923f); white-space: nowrap;
}
.pv5-prog__xfeed-link:hover { text-decoration: underline; }

/* ── Project Intelligence tab (E.3 — emerging-data layer) ───────────────── */
.pv5-intel { display: block; }
.pv5-intel__header { margin-bottom: 6px; }
.pv5-intel__brand {
  font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-600, #b8923f);
}
.pv5-intel__sub { font-size: 12px; line-height: 1.5; color: var(--ink-3, #67707c); margin-top: 5px; }
/* Owner-requested "how to read this" explainer (collapsible, closed by default). */
.pv5-intel__about { margin-top: 7px; }
.pv5-intel__about-sum {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font: 600 11.5px/1.2 var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--gold-600, #b8923f);
}
.pv5-intel__about-sum::-webkit-details-marker { display: none; }
.pv5-intel__about-sum::after {
  content: "\25be"; font-size: 9px; transition: transform 0.15s ease;
}
.pv5-intel__about[open] .pv5-intel__about-sum::after { transform: rotate(180deg); }
.pv5-intel__about-body { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--ink-3, #67707c); }
/* COH.P3 — jump pills: one per populated reader category (replaces the retired
   role-lens "For" filter). */
.pv5-intel__nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pv5-intel__nav-pill {
  appearance: none; cursor: pointer;
  padding: 4px 11px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--pv5-border, #e6e3dd); background: var(--surface, #faf9f7);
  font: 600 11px/1.3 var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--ink-2, #374151); white-space: nowrap;
}
.pv5-intel__nav-pill:hover {
  border-color: var(--gold, #d4a84b);
  background: rgba(212, 168, 75, .08);
}
.pv5-intel__about-body ul { margin: 0; padding-left: 16px; }
.pv5-intel__about-body li { margin: 3px 0; }
.pv5-intel__fam { padding: 4px 0 8px; }
.pv5-intel__fam-h {
  font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3, #9aa3ad);
  border-top: 1px solid var(--border, #ece9e4); padding-top: 11px; margin: 12px 0 7px;
}
.pv5-intel__row { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle, #f1efea); }
.pv5-intel__k { flex: 0 0 130px; font: 600 12.5px/1.45 Inter, sans-serif; color: var(--ink-2, #3a3a3a); }
.pv5-intel__v { flex: 1; font: 400 12.5px/1.5 Inter, sans-serif; color: var(--ink-1, #23262b); }
.pv5-intel__cite {
  display: inline-block; margin-left: 5px; vertical-align: super;
  font: 600 10px/1.4 "JetBrains Mono", monospace; color: var(--gold-600, #b8923f); text-decoration: none;
}
.pv5-intel__cite--linked:hover { text-decoration: underline; }
.pv5-intel__cite--internal { color: var(--ink-3, #9aa3ad); cursor: default; }
.pv5-intel__conf { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.pv5-intel__conf--high { background: var(--positive, #5a8a52); }
.pv5-intel__conf--medium { background: var(--gold, #d4a84b); }
.pv5-intel__conf--low { background: var(--border, #cfc8bd); }
/* Role LENS filter — one compact toggle row at the top of the tab. Replaces
   the per-fact role chips (which repeated the same 6 roles ×52 and read as
   clutter). Toggling a profession filters the facts to that lens. */
.pv5-intel__filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 2px 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #ebeae8);
}
.pv5-intel__filter-label {
  font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3, #67707c); margin-right: 2px;
}
.pv5-intel__filter-chip {
  font: 500 12px/1 Inter, sans-serif; color: var(--ink-2, #3a3a3a);
  background: var(--surface-sunken, #efece6); border: 1px solid transparent;
  border-radius: 999px; padding: 5px 11px; cursor: pointer; text-transform: capitalize;
  transition: background .12s, color .12s, border-color .12s;
}
.pv5-intel__filter-chip:hover { border-color: var(--border, #d9d7d3); }
.pv5-intel__filter-chip.is-active {
  background: var(--ink-1, #23262b); color: #fff; border-color: var(--ink-1, #23262b);
}
.pv5-intel__filter-chip:focus-visible { outline: 2px solid var(--accent-gold, #d4a84b); outline-offset: 1px; }
.pv5-intel__cite--plain { color: var(--ink-3, #9aa3ad); cursor: default; }
/* honesty: still-unverified machine extraction marker */
.pv5-intel__status {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3, #8a857d); background: var(--surface-sunken, #efece6);
  border: 1px solid var(--border, #e3e0db); border-radius: 4px; padding: 2px 5px;
}
/* confidence text: screen-reader-only by default, visible for low confidence */
.pv5-intel__conf-txt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pv5-intel__conf-txt.is-shown {
  position: static; width: auto; height: auto; margin: 0 0 0 5px; clip: auto; overflow: visible;
  font: 500 10px/1 Inter, sans-serif; color: var(--ink-3, #8a857d); vertical-align: middle;
}
.pv5-intel__absent { font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #9aa3ad); border-top: 1px solid var(--border, #ece9e4); padding-top: 10px; margin-top: 4px; }
.pv5-intel__nd { font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #9aa3ad); padding: 5px 0 2px; }
.pv5-intel__nd-label { font-weight: 600; color: var(--ink-3, #7a746b); }
.pv5-intel__foot { font-size: 11px; line-height: 1.5; color: var(--ink-3, #9aa3ad); border-top: 1px solid var(--border, #ece9e4); padding-top: 11px; margin-top: 6px; }
.pv5-intel__empty { font-size: 12.5px; color: var(--ink-3, #9aa3ad); padding: 14px 2px; }