/**
 * developments/css/project-panel-v2.css — D88.F.0 scaffold.
 *
 * Minimal styles for the v2 placeholder. Real layout (header / sections /
 * regimes Z-stack) lands in F.1 and onward per D88-F-IMPLEMENTATION-PLAN.md.
 *
 * Variables: borrowed from _tokens.css (--bg-card, --fg-default,
 * --fg-quiet, --accent, --space-N, --radius-card, etc.). No new tokens
 * introduced in F.0 — every new visual decision waits for F.1's section
 * primitive so the design tokens stay one source of truth.
 */

.project-panel-v2 {
  display: flex;
  flex-direction: column;
  padding: var(--space-5, 24px);
  color: var(--fg-default, #111);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Loading state — keep it lightweight and unambiguous so it's
 * clear when v2 is mounting vs v1 (only matters during F.0-F.10). */
.project-panel-v2__loading-banner {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.04));
  border-radius: var(--radius-card, 8px);
  color: var(--fg-quiet, #555);
  font-style: italic;
}

/* Error state — high-contrast border so a v2-only error doesn't
 * silently look identical to v1 success. */
.project-panel-v2__error {
  padding: var(--space-4, 16px);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--radius-card, 8px);
  color: #991b1b;
}
.project-panel-v2__error strong { display: block; margin-bottom: var(--space-2, 8px); }
.project-panel-v2__error p { margin: 0; font-size: 13px; }

/* Placeholder (F.0 only — replaced by region renderers in F.2-F.9) */
.project-panel-v2__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.project-panel-v2__placeholder-badge {
  align-self: flex-start;
  margin: 0;
  padding: 2px 8px;
  background: var(--accent, #d4a84b);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}

.project-panel-v2__placeholder-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg-default, #111);
}

.project-panel-v2__placeholder-meta {
  margin: 0;
  color: var(--fg-quiet, #555);
  font-size: 13px;
}

.project-panel-v2__placeholder-body {
  margin: 0;
  color: var(--fg-default, #222);
}

.project-panel-v2__placeholder-back {
  margin: var(--space-4, 16px) 0 0;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.08));
  color: var(--fg-quiet, #666);
  font-size: 12px;
}

.project-panel-v2 code {
  padding: 1px 5px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.06));
  border-radius: 3px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* ========================================================================
 * D88.F.1 — Shared section primitive
 *
 * Every v2 region (identity, big-numbers, visual, physical-facts,
 * activity, regulatory, cross-refs) renders through Section.render()
 * and inherits this rhythm. Land here, not inside per-region CSS, so
 * the panel reads as ONE feed (Stripe-shape per D88.E lock-in) instead
 * of a collage of bespoke lens styles.
 *
 * Vertical rhythm:
 *   header (title + headline)        2 lines
 *   ──────────────────────────       8px gap to body
 *   body content                     (region-specific)
 *   ──────────────────────────       4px gap
 *   footnote (optional, quiet)       1 line
 *
 * Density modifiers tighten the row gap inside .v2-section__body without
 * changing the section's outer spacing. Use --compact for fact grids,
 * --list for tall single-column lists.
 * ====================================================================== */

.v2-section {
  display: block;
  /* D92.STACK — Pre-D92 the section had no left padding accent and no
     left rail. The CSS comment at this line (replaced) explicitly said
     "no background of its own — sections sit on the panel's surface so
     the full panel reads as one document." That design produced what
     Lloyd called "feels like a single sentence" — the regions had
     boundaries (border-bottom) but no SHAPE marking them as different
     kinds of content. Cheap-stack fix: a 2px left rail anchored to each
     region's content-type colour. Container-Not-Subtraction: nothing is
     hidden; we just give each region a visual identity it didn't have. */
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px) calc(var(--space-5, 20px) + 4px);
  border-bottom: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.06));
  position: relative;
  border-left: 2px solid transparent;  /* per-region colour set below */
}
.v2-section:last-child { border-bottom: none; }

/* D92.STACK — Per-region left rail colour. Each region carries a
   subtle 2px accent that lets users skim "where am I" without reading
   the title. Picks borrow from the rest of the design system:
   - Identity: gold (brand anchor)
   - Big numbers: gold-quiet (the headline metric strip)
   - Visual: neutral (photos shouldn't compete with a colour rail)
   - Physical facts: slate (PVSC is the property-record stratum)
   - Activity: amber (time/motion)
   - Regulatory: purple (planning regime)
   - Cross-refs: muted (footer / utility) */
.v2-section[data-region="identity"]       { border-left-color: rgba(212, 168, 75, 0.55); }   /* gold */
.v2-section[data-region="big-numbers"]    { border-left-color: rgba(212, 168, 75, 0.30); }   /* gold-quiet */
.v2-section[data-region="visual"]         { border-left-color: rgba(120, 120, 130, 0.30); }  /* neutral */
.v2-section[data-region="physical-facts"] { border-left-color: rgba(75,  108, 138, 0.40); }  /* slate */
.v2-section[data-region="activity"]       { border-left-color: rgba(224, 163,  46, 0.45); }  /* construction amber */
.v2-section[data-region="regulatory"]     { border-left-color: rgba(124, 108, 174, 0.45); }  /* proposed purple */
.v2-section[data-region="cross-refs"]     { border-left-color: rgba(140, 140, 145, 0.25); }  /* muted */

/* Header row: title left, count + source right. */
.v2-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
}
.v2-section__header-block {
  /* Container when there's a headline; keeps the header row tight and
     the headline as its own visual stratum below it.                  */
  margin-bottom: var(--space-2, 8px);
}
.v2-section__header-block > .v2-section__header { margin-bottom: var(--space-1, 4px); }

.v2-section__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-default, #111);
  letter-spacing: -0.005em;
}

.v2-section__header-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex: 0 0 auto;
}

.v2-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.06));
  color: var(--fg-quiet, #666);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.v2-section__source {
  color: var(--fg-quiet, #888);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.v2-section__headline {
  margin: 0;
  color: var(--fg-default, #333);
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.v2-section__body {
  display: block;
  color: var(--fg-default, #222);
  font-size: 13px;
  line-height: 1.5;
}

.v2-section__empty {
  padding: var(--space-3, 12px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border-radius: 6px;
  color: var(--fg-quiet, #777);
}
.v2-section__empty p { margin: 0; font-size: 12px; }

.v2-section__footnote {
  margin: var(--space-3, 12px) 0 0;
  padding-top: var(--space-2, 8px);
  border-top: 1px dashed var(--border-quiet, rgba(0, 0, 0, 0.06));
  color: var(--fg-quiet, #888);
  font-size: 11px;
  line-height: 1.4;
}

/* Collapsible variant — wraps header in <summary> for native keyboard
 * support. Override default disclosure arrow to keep the chrome quiet. */
.v2-section--collapsible .v2-section__details { display: block; }
.v2-section--collapsible .v2-section__summary {
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.v2-section--collapsible .v2-section__summary::-webkit-details-marker { display: none; }
.v2-section--collapsible .v2-section__summary::after {
  content: "";
  display: inline-block;
  margin-left: var(--space-2, 8px);
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--fg-quiet, #888);
  transform: translateY(-1px) rotate(0deg);
  transition: transform 120ms ease;
  vertical-align: middle;
}
.v2-section--collapsible .v2-section__details[open] .v2-section__summary::after {
  transform: translateY(-1px) rotate(90deg);
}

/* Density modifiers — tighten the body without changing section padding. */
.v2-section--density-compact .v2-section__body .v2-row { padding: 4px 0; }
.v2-section--density-list .v2-section__body { padding-top: 2px; }

/* Row primitive (label/value pair). Used inside fact-grid and freestanding. */
.v2-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: 6px 0;
  border-bottom: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.04));
  font-size: 13px;
}
.v2-row:last-child { border-bottom: none; }

.v2-row__label {
  flex: 0 0 auto;
  color: var(--fg-quiet, #666);
  font-weight: 500;
}

.v2-row__value {
  flex: 1 1 auto;
  text-align: right;
  color: var(--fg-default, #111);
  font-variant-numeric: tabular-nums;
  /* Preserve dotted-underline citation popovers from v1 cite() output. */
}
.v2-row__value--mono {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* Fact grid — sequence of rows. Single column on mobile; two columns on
 * wider panels so dense data (PVSC) reads at a glance. */
.v2-fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 520px) {
  .v2-fact-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5, 20px);
  }
}

/* ========================================================================
 * D88.F.2 — Identity region
 *
 * The first visual element. For multi-regime projects this carries the
 * Apple Wallet Z-stack (literal stacked cards with translateY offsets +
 * scale + opacity decay, active card on top). Single-regime falls back
 * to a normal header with a small chip.
 * ====================================================================== */

.v2-identity { display: block; }

/* Parent breadcrumb (phased children) */
.v2-identity__parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2, 8px);
  color: var(--fg-quiet, #666);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.v2-identity__parent:hover { border-bottom-color: var(--fg-quiet, #666); }
.v2-identity__parent-arrow { font-size: 11px; }

/* Title — project name, the visual hierarchy starter */
.v2-identity__name {
  margin: 0 0 var(--space-1, 4px);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-default, #111);
}
.v2-identity__name .cite,
.v2-identity__name .cite--empty {
  /* Citation popover machinery from v1; dotted underline already styled
   * in project-panel.css. No override needed beyond inherit. */
  color: inherit;
}

.v2-identity__address {
  margin: 0 0 var(--space-3, 12px);
  font-size: 13px;
  color: var(--fg-quiet, #555);
  line-height: 1.4;
}

/* Meta row — stage / path / neighborhood */
.v2-identity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  font-size: 12px;
}
.v2-identity__meta-stage,
.v2-identity__meta-path,
.v2-identity__meta-neighborhood {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.05));
  color: var(--fg-default, #333);
  font-weight: 500;
  line-height: 1.2;
}
.v2-identity__meta-path {
  background: rgba(212, 168, 75, 0.08);   /* faint gold — HRM track is the project's regulatory pathway */
  color: #7a6320;
}

/* Single-regime chip — quiet, indicates the legal pathway */
.v2-identity__regime-solo {
  margin-top: var(--space-3, 12px);
}
.v2-identity__regime-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--fg-default, #222);
  font-size: 12px;
  font-weight: 500;
}

/* -----------------------------------------------------------------------
 * Wallet Z-stack (multi-regime)
 *
 * Container is a flex column. Each card uses `order: data-depth` so the
 * top card paints last (above others). Cards behind translate down by
 * `--peek` * depth and scale down marginally. opacity also decays so
 * depth reads visually, not just spatially. Active card has no offset.
 *
 * The container reserves enough height for the active card + N peeks.
 * Cards are absolutely positioned so they overlap. Click handler on each
 * card animates the new active card to depth 0 by setting --order via
 * dataset.depth (which the CSS reads via attr() / data-attr).
 * --------------------------------------------------------------------- */

.v2-identity__regime-stack {
  --peek: 22px;          /* D90.1 — back-card hover-lift (right-variant) takes
                            over the click-target role; --peek can be more
                            modest (was 28 from D89.4 cheap-variant). */
  --card-h: 92px;        /* nominal active card height; container reserves space */
  --scale-step: 0.04;    /* scale decay per depth (active = 1.0, depth1 = 0.96, …) */

  position: relative;
  margin: var(--space-3, 12px) 0 var(--space-2, 8px);
  /* Reserve height for the tallest possible stack (5 visible cards) so
   * cards behind have something to peek into without forcing a reflow. */
  min-height: calc(var(--card-h) + 4 * var(--peek) + 8px);
  isolation: isolate;   /* z-index scopes within stack */
}

/* D91.SHIP RCA-4 — On touch devices the D90.1 hover-lift never fires
 * (no :hover state), so the visible 22px peek strip IS the tap target.
 * That's below WCAG 2.5.8 AA (44px) and below Helio's own
 * --touch-target-min token. Bump the peek to a finger-pad sized 44px
 * for phones + hoverless input, which also gives the stack room for the
 * tall click strip; reserved min-height tracks the larger peek
 * automatically via the calc() above. */
@media (max-width: 640px), (hover: none) {
  .v2-identity__regime-stack {
    --peek: 44px;
  }
}

.v2-identity__regime-card {
  /* Reset native button chrome */
  appearance: none;
  -webkit-appearance: none;
  -webkit-user-select: text;
  user-select: text;
  border: none;
  font: inherit;
  text-align: left;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1),
              opacity 220ms ease,
              box-shadow 220ms ease;
  transform-origin: top center;
  /* Per-depth selectors below set the z-index + transform stack.
   * attr(number) isn't broadly supported yet — explicit selectors only. */
}

/* Layered offsets per depth — use generic-but-specific selectors so we
 * don't have to enumerate every regime kind. Each depth pushes the card
 * down by `--peek * depth` and scales by 1 - depth * --scale-step. */
.v2-identity__regime-card[data-depth="0"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.v2-identity__regime-card[data-depth="1"] {
  transform: translateY(calc(var(--peek) * 1)) scale(calc(1 - var(--scale-step)));
  opacity: 0.94;
  z-index: 19;
}
.v2-identity__regime-card[data-depth="2"] {
  transform: translateY(calc(var(--peek) * 2)) scale(calc(1 - 2 * var(--scale-step)));
  opacity: 0.88;
  z-index: 18;
}
.v2-identity__regime-card[data-depth="3"] {
  transform: translateY(calc(var(--peek) * 3)) scale(calc(1 - 3 * var(--scale-step)));
  opacity: 0.82;
  z-index: 17;
}
.v2-identity__regime-card[data-depth="4"] {
  transform: translateY(calc(var(--peek) * 4)) scale(calc(1 - 4 * var(--scale-step)));
  opacity: 0.76;
  z-index: 16;
}
.v2-identity__regime-card[data-depth="5"],
.v2-identity__regime-card[data-depth="6"],
.v2-identity__regime-card[data-depth="7"] {
  transform: translateY(calc(var(--peek) * 5)) scale(calc(1 - 5 * var(--scale-step)));
  opacity: 0.7;
  z-index: 15;
  /* Tighten clipping by hiding contents past 5 — the user can still
   * click them, they just visually merge with the bottom card. */
}

/* D90.1 hover-tilt — RIGHT-VARIANT.
 *
 * Hovering or focusing a back-card lifts it ABOVE the active card via
 * z-index promotion + transform that pulls it forward (translateY
 * upward + scale to nearly-full). The active card recedes very
 * slightly underneath so the cursor reads as "this card is now the
 * front." Clicking the lifted card triggers setActiveRegime and the
 * stack permanently re-orders (handled by identity.js).
 *
 * Keyboard parity: :focus-visible mirrors :hover so Tab also lifts.
 *
 * prefers-reduced-motion: snap-no-animation — the lift still happens
 * (so the click target is reachable) but with transition: none.
 */
.v2-identity__regime-card[data-depth="1"]:hover,
.v2-identity__regime-card[data-depth="1"]:focus-visible {
  transform: translateY(-2px) scale(1.005);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.v2-identity__regime-card[data-depth="2"]:hover,
.v2-identity__regime-card[data-depth="2"]:focus-visible {
  transform: translateY(-2px) scale(1.005);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.v2-identity__regime-card[data-depth="3"]:hover,
.v2-identity__regime-card[data-depth="3"]:focus-visible {
  transform: translateY(-2px) scale(1.005);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.v2-identity__regime-card[data-depth="4"]:hover,
.v2-identity__regime-card[data-depth="4"]:focus-visible {
  transform: translateY(-2px) scale(1.005);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.v2-identity__regime-card[data-depth="5"]:hover,
.v2-identity__regime-card[data-depth="5"]:focus-visible,
.v2-identity__regime-card[data-depth="6"]:hover,
.v2-identity__regime-card[data-depth="6"]:focus-visible,
.v2-identity__regime-card[data-depth="7"]:hover,
.v2-identity__regime-card[data-depth="7"]:focus-visible {
  transform: translateY(-2px) scale(1.005);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* Active card recedes very slightly while a back card is hovered.
 * Implemented via :has(...) parent selector — modern browsers only
 * (Firefox 121+, Safari 15.4+, Chrome 105+). Fallback: graceful
 * no-op; the back card still lifts above via z-index. */
.v2-identity__regime-stack:has(.v2-identity__regime-card:not([data-depth="0"]):hover) .v2-identity__regime-card[data-depth="0"],
.v2-identity__regime-stack:has(.v2-identity__regime-card:not([data-depth="0"]):focus-visible) .v2-identity__regime-card[data-depth="0"] {
  transform: translateY(2px) scale(0.99);
  filter: brightness(0.98);
}
.v2-identity__regime-card:focus-visible {
  outline: 2px solid var(--accent, #d4a84b);
  outline-offset: 2px;
}

.v2-identity__regime-card-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-quiet, #888);
  margin-bottom: 2px;
}
.v2-identity__regime-card-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-default, #111);
  line-height: 1.25;
}
.v2-identity__regime-card-blurb {
  margin: 0;
  font-size: 12px;
  color: var(--fg-quiet, #666);
  line-height: 1.35;
}

/* Reduced motion — skip the spring-y transition. Cards still reorder
 * + lift on hover (so the click target is reachable) but they snap
 * instantly instead of gliding. */
@media (prefers-reduced-motion: reduce) {
  .v2-identity__regime-card { transition: none; }
  .v2-identity__regime-stack:has(.v2-identity__regime-card:not([data-depth="0"]):hover) .v2-identity__regime-card[data-depth="0"],
  .v2-identity__regime-stack:has(.v2-identity__regime-card:not([data-depth="0"]):focus-visible) .v2-identity__regime-card[data-depth="0"] {
    transform: none;
    filter: none;
  }
}

/* Phases list (phased parents) — vertical compact list */
.v2-identity__phases {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.06));
}
.v2-identity__phases-head {
  margin: 0 0 var(--space-2, 8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-quiet, #888);
}
.v2-identity__phases-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-identity__phase {
  margin: 0 0 4px;
  font-size: 12px;
}
.v2-identity__phase a {
  display: flex;
  gap: var(--space-2, 8px);
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--fg-default, #222);
  text-decoration: none;
}
.v2-identity__phase a:hover { background: var(--bg-card-muted, rgba(0, 0, 0, 0.04)); }
.v2-identity__phase-label {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--fg-quiet, #555);
}
.v2-identity__phase-name { flex: 1 1 auto; }

/* Siblings (other projects on same PID) — quiet aside */
.v2-identity__siblings {
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border-radius: 6px;
  font-size: 12px;
}
.v2-identity__siblings-head {
  display: block;
  margin-bottom: var(--space-1, 4px);
  font-weight: 600;
  color: var(--fg-quiet, #666);
}
.v2-identity__siblings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-identity__siblings-list li { margin: 0 0 2px; }
.v2-identity__siblings-link {
  color: var(--fg-default, #222);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-quiet, rgba(0, 0, 0, 0.2));
}
.v2-identity__siblings-link:hover { border-bottom-color: var(--fg-default, #222); }
.v2-identity__siblings-stage { color: var(--fg-quiet, #888); }

/* ========================================================================
 * D88.F.3 — Big-numbers band
 *
 * Stripe-style headline metric tiles sitting right under identity.
 * Horizontal row on desktop, single row scrollable on narrow viewports.
 * Each tile: value (large, tabular-nums) + label (small, muted).
 *
 * Citation popovers from v1 cite() ride along on the value span — the
 * dotted-underline pattern from project-panel.css already styles them.
 * ====================================================================== */

.v2-bignumbers__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3, 12px);
  margin: 4px 0 0;
}

.v2-bignumbers__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3, 12px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
}

.v2-bignumbers__value {
  display: inline-flex;
  align-items: baseline;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-default, #111);
  font-variant-numeric: tabular-nums;
  /* Citation chip overrides inherit font-size so the BIG read still
   * works even when v1 cite() wraps the value in a <span class="cite"> */
}
.v2-bignumbers__value .cite,
.v2-bignumbers__value .cite--empty {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.v2-bignumbers__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-quiet, #888);
}

.v2-bignumbers__sub {
  font-size: 10px;
  color: var(--fg-quiet, #aaa);
  font-style: italic;
}

/* Density-compact section inherited from F.1 already tightens row padding
 * inside this band; no further override needed. */

/* ========================================================================
 * D88.F.4 — Visual region
 *
 * Photos + Street View unified inside ONE section. Toggle pills if both
 * are available; otherwise the single modality renders alone. Photos
 * default when both exist (richer signal, cached thumbnails load fast).
 * ====================================================================== */

.v2-visual__switcher {
  display: block;
}

.v2-visual__pills {
  display: inline-flex;
  gap: 4px;
  margin-bottom: var(--space-3, 12px);
  padding: 2px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.04));
  border-radius: 8px;
}

.v2-visual__pill {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 4px 10px;
  background: transparent;
  color: var(--fg-quiet, #666);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.v2-visual__pill:hover { color: var(--fg-default, #222); }
.v2-visual__pill.is-active {
  background: var(--bg-card, #fff);
  color: var(--fg-default, #111);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.v2-visual__pill:focus-visible {
  outline: 2px solid var(--accent, #d4a84b);
  outline-offset: 2px;
}

.v2-visual__stage { display: block; }

/* Photo grid — 3 columns on most panel widths, 2 on narrow, lazy-loaded
 * thumbnails. Each tile is an anchor → opens source in new tab. */
.v2-visual__photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 480px) {
  .v2-visual__photo-grid { grid-template-columns: repeat(2, 1fr); }
}

.v2-visual__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.06));
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
  /* D90.2 — when the tile is a <button> (lightbox available), reset
   * native button chrome so the visual is identical to the <a> variant. */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.v2-visual__photo:hover { transform: translateY(-2px); }
.v2-visual__photo:focus-visible {
  outline: 2px solid var(--accent, #d4a84b);
  outline-offset: 2px;
}

.v2-visual__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-visual__photo-date {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.v2-visual__photo-overflow {
  margin: var(--space-2, 8px) 0 0;
  color: var(--fg-quiet, #888);
  font-size: 11px;
  font-style: italic;
}

/* Street View embed — fixed aspect so the Google panorama has stable
 * dimensions for its tile renderer. v1's StreetView.mount() targets the
 * data-streetview-mount div and replaces its contents with the panorama
 * iframe; we just provide the stage. */
.v2-visual__streetview-mount {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  overflow: hidden;
}

/* ========================================================================
 * D88.F.5 — Physical-facts region (PVSC + specs merged)
 *
 * Single source of "what this property actually looks like physically."
 * PVSC assessment record + permit-derived specs that didn't make the
 * F.3 headline, in three blocks (Building / Land + value / Identifiers)
 * + an optional aggregate disclosure when project spans >1 PID.
 * ====================================================================== */

.v2-physical { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

/* D93.B — Refined "no PVSC roll yet" empty-state. Pre-D93 this read as
   an apologetic alert (gold background, gold border, alarm coloring).
   Lloyd's feedback: parcels without a published assessment are NORMAL
   for the construction-stage projects this panel tracks; the styling
   should communicate "informational" not "broken". New treatment:
   inline note with a small pill-style tag, no background — sits as a
   quiet caption above the permit-derived specs blocks. */
.v2-physical__pvsc-empty {
  margin: 0 0 var(--space-2, 8px);
  padding: 0;
  background: none;
  border: none;
  color: var(--fg-muted, #6b7280);
  font-size: 12px;
  line-height: 1.5;
}
.v2-physical__pvsc-empty-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(120, 120, 130, 0.30);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-default, #555);
  background: rgba(120, 120, 130, 0.06);
  vertical-align: 1px;
}

.v2-physical__aggregate {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border-radius: 6px;
  font-size: 12px;
}
.v2-physical__aggregate > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg-quiet, #555);
  margin-bottom: var(--space-2, 8px);
}
.v2-physical__aggregate[open] > summary { margin-bottom: var(--space-2, 8px); }

.v2-physical__badge {
  align-self: flex-start;
  margin-top: var(--space-2, 8px);
  padding: 3px 8px;
  background: rgba(37, 99, 235, 0.08);  /* approved-blue family */
  color: #1e4eb0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ========================================================================
 * D88.F.6 — Activity unified feed
 *
 * Stripe-shape vertical timeline. Permits, inspections, planning events,
 * narrative captions merged chronologically newest-first. Dot color
 * encodes kind; "recent" (within 60d) gets an accent ring. C3 cadence
 * research: static history reads encyclopedic, fresh activity breathes.
 * ====================================================================== */

.v2-activity { display: block; }

.v2-activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Vertical track — single grey hairline through the dot column */
  position: relative;
}
.v2-activity__list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-quiet, rgba(0, 0, 0, 0.08));
}

.v2-activity__item {
  position: relative;
  display: flex;
  gap: var(--space-3, 12px);
  padding: 6px 0 6px 0;
  font-size: 12px;
  transition: padding 120ms ease;
}

/* D89.5 — static vs fresh typography (C3 cadence research).
   Recent items breathe with extra padding + bolder headline;
   archived items (>1yr) read encyclopedic — tighter and lower-contrast. */
.v2-activity__item--recent {
  padding: 10px 0;
}
.v2-activity__item--recent .v2-activity__headline {
  font-weight: 600;
}
.v2-activity__item--archived .v2-activity__headline {
  color: var(--fg-quiet, #666);
  font-weight: 400;
  font-size: 11.5px;
}
.v2-activity__item--archived .v2-activity__meta {
  color: var(--fg-quiet, #999);
}

.v2-activity__dot {
  position: relative;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--bg-card, #fff);
  border: 2px solid var(--fg-quiet, #888);
  z-index: 1;
}
.v2-activity__dot--permit            { border-color: var(--stage-construction); }  /* construction (brand gold) */
.v2-activity__dot--inspection        { border-color: #888; }
.v2-activity__dot--inspection-pass   { border-color: #16a34a; background: #d8f0e0; }
.v2-activity__dot--inspection-fail   { border-color: #dc2626; background: #fbe2e2; }
.v2-activity__dot--planning          { border-color: #7c6cae; }  /* proposed-purple */
.v2-activity__dot--planning-findings { border-color: #7c6cae; background: #ece6f5; }
.v2-activity__dot--planning-approved { border-color: #2563eb; background: #dbe9fb; }  /* approved-blue */
.v2-activity__dot--narrative-blog    { border-color: #d4a84b; }
.v2-activity__dot--narrative-fb      { border-color: #1e5fbf; }
.v2-activity__dot.is-recent {
  box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.18);
}

.v2-activity__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.v2-activity__headline {
  display: block;
  color: var(--fg-default, #111);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
a.v2-activity__headline {
  border-bottom: 1px solid transparent;
}
a.v2-activity__headline:hover {
  color: var(--accent, #b8923f);
  border-bottom-color: currentColor;
}

.v2-activity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  font-size: 11px;
  color: var(--fg-quiet, #888);
}
.v2-activity__date {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.v2-activity__sub {
  /* Keep the metadata one-line typically; wraps on narrow panels. */
}

.v2-activity__tail {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.05));
}
.v2-activity__tail > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-quiet, #555);
  padding: 4px 0;
}
.v2-activity__tail > summary:hover { color: var(--fg-default, #222); }
.v2-activity__tail > .v2-activity__list { margin-top: var(--space-2, 8px); }

/* D90.3 — filter note when a regime is active in the Wallet Z-stack */
.v2-activity__filter-note {
  margin: 0 0 var(--space-3, 12px);
  padding: 6px 10px;
  background: rgba(212, 168, 75, 0.08);
  border-left: 2px solid var(--accent, #d4a84b);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-default, #5a4a20);
}
.v2-activity__filter-clear {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #b8923f);
  text-decoration: underline;
  cursor: pointer;
}
.v2-activity__filter-clear:hover { color: #7a6320; }

/* ========================================================================
 * D88.F.7 — Regulatory overlays
 *
 * Zoning limits, heritage designation, HCD, shadow study, archived
 * case, active street closures. All from HRM ArcGIS / planning sources.
 * ====================================================================== */

.v2-reg { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.v2-reg__block {
  padding: var(--space-3, 12px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border-radius: 6px;
  border-left: 2px solid var(--border-quiet, rgba(0, 0, 0, 0.15));
}
.v2-reg__block[data-source="hrm_arcgis"]      { border-left-color: #7c6cae; }
.v2-reg__block[data-source="hrm_permit"]      { border-left-color: var(--stage-construction); }
.v2-reg__block[data-source="hrm_planning_app"]{ border-left-color: #2563eb; }

.v2-reg__block-head {
  margin: 0 0 var(--space-2, 8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-quiet, #666);
}

.v2-reg__zoning-list,
.v2-reg__heritage-list,
.v2-reg__chip-list,
.v2-reg__closure-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-reg__chip-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.v2-reg__zoning-row,
.v2-reg__heritage-item,
.v2-reg__closure {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  font-size: 12px;
  color: var(--fg-default, #222);
}

.v2-reg__zoning-label,
.v2-reg__heritage-name,
.v2-reg__closure-segment {
  color: var(--fg-default, #222);
  font-weight: 500;
}
.v2-reg__zoning-cap,
.v2-reg__heritage-adj,
.v2-reg__closure-range {
  color: var(--fg-quiet, #666);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.v2-reg__heritage-item--adjacent .v2-reg__heritage-name { color: var(--fg-quiet, #777); }
.v2-reg__heritage-item--on { font-weight: 600; }

.v2-reg__chip {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-default, #222);
}

.v2-reg__archived {
  margin: 0;
  font-size: 12px;
  color: var(--fg-quiet, #777);
  font-style: italic;
}

.v2-reg__heritage-more {
  font-size: 11px;
  color: var(--fg-quiet, #888);
  font-style: italic;
}

/* ========================================================================
 * D88.F.8 — Cross-references
 *
 * Quiet bottom-of-panel surface for navigating to related identities:
 * parcels, external case links, project team attribution.
 * ====================================================================== */

.v2-xref { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.v2-xref__block { display: block; }
.v2-xref__block-head {
  margin: 0 0 var(--space-2, 8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-quiet, #666);
}

.v2-xref__pids {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.v2-xref__pid {
  padding: 3px 8px;
  background: rgba(20, 168, 168, 0.08);  /* teal — parcel pill family */
  color: #0d6e6e;
  border: 1px solid rgba(20, 168, 168, 0.22);
  border-radius: 4px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 11px;
  text-decoration: none;
}
.v2-xref__pid:hover {
  background: rgba(20, 168, 168, 0.14);
  border-color: rgba(20, 168, 168, 0.4);
}

.v2-xref__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-xref__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: 6px 8px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font-size: 12px;
  color: var(--fg-default, #222);
  text-decoration: none;
}
.v2-xref__link:hover { border-color: var(--accent, #d4a84b); color: var(--accent, #b8923f); }
.v2-xref__link-arrow { color: var(--fg-quiet, #888); font-size: 11px; }

.v2-xref__team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 480px) {
  .v2-xref__team { grid-template-columns: 1fr 1fr 1fr; }
}
.v2-xref__team-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border-radius: 5px;
}
.v2-xref__team-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-quiet, #888);
}
.v2-xref__team-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-default, #222);
}

/* ========================================================================
 * D89.3 — Feedback chip ("Suggest a correction")
 *
 * Native <details>/<summary> + form posting to existing endpoint
 * /api/developments/projects/feedback. Spam defense: honeypot
 * website_url + 2s timing check (server enforces both).
 * ====================================================================== */

.v2-feedback {
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--bg-card-muted, rgba(0, 0, 0, 0.03));
  border: 1px dashed var(--border-quiet, rgba(0, 0, 0, 0.15));
  border-radius: 6px;
}
.v2-feedback__summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-quiet, #666);
  font-weight: 500;
  -webkit-user-select: none;
  user-select: none;
}
.v2-feedback__summary:hover { color: var(--fg-default, #222); }
.v2-feedback[open] .v2-feedback__summary {
  margin-bottom: var(--space-3, 12px);
  color: var(--fg-default, #222);
}

.v2-feedback__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.v2-feedback__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.v2-feedback__field-label {
  color: var(--fg-quiet, #666);
  font-weight: 500;
}
.v2-feedback__select,
.v2-feedback__textarea,
.v2-feedback__input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-quiet, rgba(0, 0, 0, 0.15));
  border-radius: 4px;
  background: var(--bg-card, #fff);
  color: var(--fg-default, #222);
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}
.v2-feedback__textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.v2-feedback__select:focus-visible,
.v2-feedback__textarea:focus-visible,
.v2-feedback__input:focus-visible {
  outline: 2px solid var(--accent, #d4a84b);
  outline-offset: 1px;
  border-color: transparent;
}

/* Honeypot — off-screen, not visually rendered to humans. Bots that
 * fill every field will populate it; server rejects when it's non-empty. */
.v2-feedback__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v2-feedback__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: 4px;
}
.v2-feedback__submit {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 12px;
  background: var(--accent, #d4a84b);
  color: #1a1a1a;
  border: none;
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.v2-feedback__submit:hover { background: var(--gold-600, #b8923f); }
.v2-feedback__submit:disabled {
  background: var(--border-quiet, rgba(0, 0, 0, 0.15));
  color: var(--fg-quiet, #888);
  cursor: not-allowed;
}
.v2-feedback__status {
  font-size: 11px;
  color: var(--fg-quiet, #666);
  font-style: italic;
}
.v2-feedback__status.is-error {
  color: #b91c1c;
  font-style: normal;
}