/**
 * templates/midnight.css — "the dark twilight showcase" (owner reference
 * 2026-07-30 #7: the dark "Luxe Estate" page on the owner's Heritage
 * Estates DESIGN.md — clean-room per the 2026-07-13 reference-recreation
 * decision; replaces the ivory-prospectus Pavilion wholesale at the owner's
 * direction, renamed Midnight for the dark turn). Scoped via
 * [data-template="midnight"]. Composer: composeMidnight
 * (lib/render-public.mjs) — anchorNav (translucent night bar, white
 * Contact pill) → full-bleed night hero (bottom-left serif H1, italic city
 * line) → glassmorphism stats card pulled over the hero's lower edge →
 * centered intro/CTAs → narrative + glass Virtual Host → bento collage
 * gallery on a deeper night band → outline feature chips → open-house card
 * → mediaExplorer → "Prime Location" map band (finite pulse pin) →
 * contact close with the form on a DARK card. No address band — the
 * reference ends on the contact block.
 *
 * theme: "dark" — the page rides tokens.css's [data-theme="dark"] semantic
 * ramp. NB: the ramp's documented ratios (15.89/8.02/4.68) were audited
 * against ink-900 #121316; recomputed on THIS re-pointed #0F172A canvas
 * they are 15.27 / 7.71 / 4.86 — all still pass, but a future canvas
 * lighter than this one must re-run the math (a11y round 2026-07-30). This
 * delta
 * re-tones the surfaces to the reference's slate-night pair: #0F172A
 * canvas with #020617 deep bands, Source Serif 4 display headings over
 * Inter, and the DESIGN.md dark-scheme green (#A1D494,
 * secondary-fixed-dim) as the mood accent — 10.5:1 on the canvas.
 *
 * Deliberate deviations (the family contract): buttons keep the org accent
 * tokens — on this dark template they flow through orgAccentStyleDark with
 * darkDefaultAccent's green pairing as the fallback (the reference's solid
 * #3B6934 fill measures only 2.8:1 against the night surfaces and fails
 * the dark fill gate; the DESIGN.md's own fixed pairing #A1D494/#002201 is
 * the compliant equivalent). The dark path needs NO white form card —
 * Monolith precedent. No fabricated brochure CTA, photo-count button, POI
 * minutes, plan-level toggles, or NEW LISTING badges.
 *
 * INVARIANT (property.css header, visual-elevation §0.1, inherited): never
 * set --color-accent, --color-accent-hover, --color-accent-active,
 * --color-focus-ring, --color-text-on-accent, or --color-accent-button-fill
 * here — org white-label injection (orgAccentStyleDark) must keep winning.
 * Green below is a template mood token on non-accent elements only.
 * --color-bg-canvas IS re-pointed (a surface token, not an accent one —
 * the same monolith.css precedent).
 */
.property-page[data-template="midnight"] {
  --mid-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mid-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mid-canvas: #0F172A;      /* slate-900 — the page night canvas */
  --mid-deep: #020617;        /* slate-950 — alternating deep bands + cards */
  --mid-green: #A1D494;       /* DESIGN.md secondary-fixed-dim — mood TEXT/ICON accent (10.5:1 on canvas) */
  --mid-line: rgba(255, 255, 255, 0.12);        /* decorative hairlines ONLY */
  --mid-line-strong: rgba(255, 255, 255, 0.28); /* chip borders (still decorative) */
  --mid-border-interactive: #7A8090;  /* input boundaries — 4.5:1 on canvas, 5.1:1 on deep */
  --mid-text-soft: #AEB4C0;   /* prose on night — 8.6:1 canvas / 9.7:1 deep */
  --mid-text-faint: #98A0AD;  /* quiet labels — 6.7:1 canvas */
  --tpl-frame: rgba(255, 255, 255, 0.12);

  /* Deepen the whole page to the reference night (surface token — the
     accent invariant above does not cover it; monolith precedent). */
  --color-bg-canvas: var(--mid-canvas);
  background: var(--mid-canvas);
  font-family: var(--mid-sans);
  /* Native date/time pickers + form chrome render dark, not glaring white. */
  color-scheme: dark;
}

/* Section heads: Source Serif 4 display, DESIGN.md tracking, with the
   reference's short green kicker rule (decorative, empty content). */
.property-page[data-template="midnight"] h2 {
  font: var(--fw-semibold) var(--fs-display-md) / 1.2 var(--mid-serif);
  letter-spacing: -0.02em; color: var(--color-text-primary);
}
.property-page[data-template="midnight"] .property-main h2::before,
.property-page[data-template="midnight"] .property-gallery > h2::before,
.property-page[data-template="midnight"] .property-features > h2::before,
.property-page[data-template="midnight"] .property-media-explorer > h2::before,
.property-page[data-template="midnight"] .property-openhouse > h2::before,
.property-page[data-template="midnight"] .property-floorplan > h2::before {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--mid-green); margin-bottom: var(--space-4);
}

/* Buttons: Inter semibold, DESIGN.md label tracking, soft 4px radius.
   Fills stay on the org accent tokens (darkDefaultAccent green fallback). */
.property-page[data-template="midnight"] .btn {
  font-family: var(--mid-sans); font-weight: var(--fw-semibold);
  letter-spacing: 0.05em; border-radius: 4px;
}
.property-page[data-template="midnight"] .btn-secondary {
  background: transparent; border: 1px solid var(--mid-border-interactive);
  color: var(--color-text-primary);
}
.property-page[data-template="midnight"] .btn-secondary:hover,
.property-page[data-template="midnight"] .btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary);
}

/* --- Anchor nav: the reference's translucent night bar ----------------------- */
.property-page[data-template="midnight"] .property-anchor-nav {
  background: rgba(2, 6, 23, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mid-line);
  min-height: 72px; gap: var(--space-6);
}
.property-page[data-template="midnight"] .property-anchor-nav a {
  font: var(--fw-medium) var(--fs-body-sm) / 1 var(--mid-sans);
  color: #C6CAD2; /* 8.4:1 on the worst-case bar composite */
}
.property-page[data-template="midnight"] .property-anchor-nav a:hover,
.property-page[data-template="midnight"] .property-anchor-nav a:focus-visible {
  color: #fff;
}
/* Last item is always Contact — the reference's WHITE "Schedule Tour" pill
   (navy text 17.8:1; hover slate-200 keeps 14.9:1). */
.property-page[data-template="midnight"] .property-anchor-nav a:last-child {
  margin-left: auto; background: #fff; color: #041627;
  padding-inline: var(--space-5); min-height: 44px; align-self: center;
  border-radius: 4px; font-weight: var(--fw-semibold); letter-spacing: 0.05em;
}
.property-page[data-template="midnight"] .property-anchor-nav a:last-child:hover,
.property-page[data-template="midnight"] .property-anchor-nav a:last-child:focus-visible {
  background: #E2E6EC; color: #041627;
}
/* Mobile: the Contact pill stays PINNED at the scroller's right edge
   (sticky-last-column pattern, family-wide since the Signet critic round —
   masks would fade the pinned pill). */
@media (max-width: 767px) {
  .property-page[data-template="midnight"] .property-anchor-nav a:last-child {
    position: sticky; right: 0;
    box-shadow: -10px 0 14px -6px rgba(2, 6, 23, 0.6);
  }
}

/* --- Hero: full-bleed night viewport, bottom-left serif overlay -------------- */
.property-page[data-template="midnight"] .tpl-hero { position: relative; }
.property-page[data-template="midnight"] .tpl-hero .property-hero-media { margin-bottom: 0; }
.property-page[data-template="midnight"] .tpl-hero .reel-stack {
  aspect-ratio: auto; height: 62vh; min-height: 420px;
}
@media (min-width: 900px) {
  .property-page[data-template="midnight"] .tpl-hero .reel-stack { height: 88vh; }
}
/* Scrim: the reference's bottom-anchored night gradient, with the family's
   FLAT floor discipline — a 0.66 deep-navy floor spans ONLY the bottom band
   (10%–40%) where the flex-end text stack actually lives; above it the
   photo breathes (the same "flat wash mutes the hero" lesson the Meridian
   critic round taught — a 56%-tall floor drowned this photo in navy on the
   first render). Worst-case composite over a pure-white photo in the flat
   zone ≈ #585B66: white title 6.8:1, the italic city line #E2E5EC 5.3:1. */
.property-page[data-template="midnight"] .tpl-hero-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  text-align: left; padding: var(--space-7);
  padding-bottom: calc(var(--space-9) + 3.5rem); /* clearance for the glass card overlap */
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.82),
    rgba(2, 6, 23, 0.66) 10%,
    rgba(2, 6, 23, 0.66) 40%,
    rgba(2, 6, 23, 0.06) 68%,
    rgba(2, 6, 23, 0.25) 100%
  );
}
@media (min-width: 900px) {
  .property-page[data-template="midnight"] .tpl-hero-overlay {
    padding-inline: max(var(--space-7), calc(50vw - 38rem));
  }
}
/* Reference stacks H1 → italic city line; DOM stays kicker → H1 (estateHero,
   shared) — flex order does the visual resequencing. */
.property-page[data-template="midnight"] .tpl-hero-title {
  order: 1;
  font: var(--fw-bold, 700) clamp(2rem, 4.5vw, 3.25rem) / 1.15 var(--mid-serif);
  letter-spacing: -0.02em;
  color: #fff; margin: 0 0 var(--space-3); max-width: 22ch;
  /* Content-independent backstop (a11y round 2026-07-30): a long address
     wrapping to 3 lines on a 420px mobile hero can climb past the flat
     scrim band into the fade zone — the shadow keeps the floor there too. */
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.85);
}
.property-page[data-template="midnight"] .tpl-hero-kicker {
  order: 2;
  font: var(--fw-regular) clamp(1.05rem, 1.6vw, 1.35rem) / 1.4 var(--mid-serif);
  font-style: italic;
  color: #E2E5EC; margin: 0;
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.85);
}
/* Price lives in the glass stats card below (and in the audible factsLine)
   — a second big numeral in the hero read as a duplicate, so this visual
   copy is dropped entirely. */
.property-page[data-template="midnight"] .tpl-hero-price { display: none; }
/* Reel controls clear the bottom-left text: play pill rides top-right. */
.property-page[data-template="midnight"] .tpl-hero .reel-play-btn {
  top: var(--space-6); bottom: auto; left: auto; right: var(--space-6);
  transform: none; z-index: 3;
}
.property-page[data-template="midnight"] .tpl-hero .reel-play-btn:active { transform: scale(0.96); }
/* Focus ring drawn INSIDE the pill's own frosted fill (a11y round
   2026-07-30, Serious): the default offset ring lands on raw photo pixels
   in the un-scrimmed top-right — #A1D494 vs a bright sky ≈1.7:1. Navy on
   the ~92% white fill ≈18:1, photo-independent (same reasoning the base
   button already applies to its text color). */
.property-page[data-template="midnight"] .tpl-hero .reel-play-btn:focus-visible {
  outline: 2px solid #041627; outline-offset: -4px;
}
.property-page[data-template="midnight"] .tpl-hero .staged-badge { z-index: 3; }

/* --- Glass stats card: the reference's glassmorphism price/beds/baths/sqft ---
   renderBigFacts (decorative — the sr-clipped factsLine below stays the one
   AT announcement) pulled up over the hero's flat-scrim zone. The 0.72 glass
   over a worst-case pure-white photo composites to ≈ #494C58: serif
   numerals #fff 8.5:1, caps labels #C6CAD2 5.0:1. */
.property-page[data-template="midnight"] .property-bigfacts--bordered {
  position: relative; z-index: 3;
  background: rgba(2, 6, 23, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--mid-line); border-radius: 12px;
  max-width: 64rem; margin: -4.5rem auto var(--space-8);
  padding: var(--space-6) var(--space-7);
  /* The reference's ambient lift — one soft dark bloom, not a hard drop
     (DESIGN.md's outline-first depth doctrine; critic round 2026-07-30). */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.property-page[data-template="midnight"] .property-bigfacts--bordered .bigfacts-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-8);
}
.property-page[data-template="midnight"] .bigfacts-item dd {
  font: var(--fw-semibold) var(--fs-heading-lg) / 1.2 var(--mid-serif);
  font-feature-settings: "tnum" 1; color: #fff;
}
.property-page[data-template="midnight"] .bigfacts-item dt {
  font: var(--fw-semibold) var(--fs-caption) / 1.4 var(--mid-sans);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: #C6CAD2; margin-top: var(--space-1);
}
@media (min-width: 640px) {
  .property-page[data-template="midnight"] .bigfacts-item + .bigfacts-item {
    border-left: 1px solid var(--mid-line); padding-left: var(--space-8);
  }
}
@media (max-width: 639px) {
  .property-page[data-template="midnight"] .property-bigfacts--bordered {
    margin-top: -2.5rem; margin-inline: var(--space-5);
  }
}

/* --- Intro: centered CTAs; factsLine audible-but-invisible -------------------
   Family pairing: the glass card is aria-hidden (decorative:true in
   composeMidnight), so this sentence is the one facts announcement AT
   hears. Standard sr-only recipe, never display:none. */
.property-page[data-template="midnight"] .property-intro { padding-top: var(--space-4); text-align: center; }
.property-page[data-template="midnight"] .property-facts-line {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: 0;
}
.property-page[data-template="midnight"] .property-presented-by {
  justify-content: center; color: var(--mid-text-soft);
}
/* A brokerage logo drawn for light chrome can vanish on night — seat it on
   a small white plate (same honesty the print suite's logo chip uses). */
.property-page[data-template="midnight"] .property-presented-by .org-logo {
  background: #fff; padding: 2px 6px; border-radius: 4px; box-sizing: content-box;
}
.property-page[data-template="midnight"] .property-ctas { justify-content: center; margin-bottom: var(--space-9); }
.property-page[data-template="midnight"] .property-ctas .btn { min-height: 48px; }

/* --- Narrative + Virtual Host: the glass concierge card ---------------------- */
.property-page[data-template="midnight"] .property-body { padding-top: var(--space-8); }
.property-page[data-template="midnight"] .property-description {
  font-size: var(--fs-body-lg); line-height: 1.65; color: var(--mid-text-soft);
}
.property-page[data-template="midnight"] .property-chat-col h2 {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-heading-md);
}
.property-page[data-template="midnight"] .property-chat-col h2::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mid-green); flex-shrink: 0;
}
.property-page[data-template="midnight"] .chat-widget {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mid-line); border-radius: 12px;
}
.property-page[data-template="midnight"] .msg.host {
  background: #1B2537; color: var(--color-text-primary); /* 13:1 */
}
.property-page[data-template="midnight"] .msg.buyer {
  background: #0F2417; color: var(--color-text-primary); /* green-tinted night, 13.9:1 */
}
.property-page[data-template="midnight"] .chat-form input {
  background: var(--mid-deep); border-color: var(--mid-border-interactive);
  color: var(--color-text-primary); border-radius: 4px;
}
/* The chat lead-gate's injected input (property.js) reads the base
   --color-border-interactive — only 3.16:1 against the re-pointed #0F172A
   canvas (a11y round 2026-07-30). Same audited boundary as every other
   input on this template. */
.property-page[data-template="midnight"] .msg.gate-form input {
  border-color: var(--mid-border-interactive);
}

/* --- Section rhythm: the reference breathes ~96–128px between bands ---------- */
.property-page[data-template="midnight"] .property-features { margin-block: 6rem; }
.property-page[data-template="midnight"] .property-openhouse { margin-block: 6rem; }
.property-page[data-template="midnight"] .property-media-explorer { margin-block: 6rem; }
.property-page[data-template="midnight"] .property-floorplan { margin-block: 6rem; }

/* --- Gallery: deep night band, bento collage --------------------------------- */
.property-page[data-template="midnight"] .property-gallery {
  background: var(--mid-deep);
  max-width: none; margin-block: 6rem 0;
  padding-block: 6rem;
  padding-inline: max(var(--space-5), calc(50vw - 38rem));
}
/* Bento cycle of FOUR (the family grid since the Meridian rebuild): wide
   2×1 pinned to column 1 + tall 1×2 pinned to column 3 + two singles = two
   full rows per cycle. Base 6n spans neutralized first; aspect-ratio:auto +
   min-height:0 kills the transferred-minimum overflow (breaks at 10+
   photos otherwise); trailing tall collapses so a partial cycle ends
   ragged, never with a mid-grid hole. */
@media (min-width: 640px) {
  .property-page[data-template="midnight"] .gallery-grid--collage {
    grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: var(--space-5);
  }
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item {
    aspect-ratio: auto; min-height: 0;
  }
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item:nth-child(6n+1),
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item:nth-child(6n+4) {
    grid-column: auto; grid-row: auto;
  }
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item:nth-child(4n+1) {
    grid-column: 1 / span 2; grid-row: span 1;
  }
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item:nth-child(4n+2) {
    grid-column: 3; grid-row: span 2;
  }
  .property-page[data-template="midnight"] .gallery-grid--collage .gallery-item:nth-child(4n+2):nth-last-child(-n+2) {
    grid-column: 3; grid-row: span 1;
  }
}
@media (min-width: 1024px) {
  .property-page[data-template="midnight"] .gallery-grid--collage { grid-auto-rows: 250px; }
}
.property-page[data-template="midnight"] .gallery-item {
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.10);
}
.property-page[data-template="midnight"] .gallery-viewall-note {
  color: var(--mid-text-faint); text-align: center;
}

/* --- Features: night outline chips ------------------------------------------- */
.property-page[data-template="midnight"] .feature-list--outline li {
  border: 1px solid var(--mid-line-strong); border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #E6E9EE; /* ≈13:1 on the chip composite */
  font-family: var(--mid-sans); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

/* --- Open house: the one dated card (real listing.openHouse only) ------------ */
.property-page[data-template="midnight"] .property-openhouse {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--mid-line); border-radius: 12px;
  padding: var(--space-7);
}
.property-page[data-template="midnight"] .tpl-openhouse-when {
  font: var(--fw-semibold) var(--fs-heading-lg) / 1.3 var(--mid-serif); color: #fff;
}

/* --- Media explorer ---------------------------------------------------------- */
.property-page[data-template="midnight"] .media-explorer-note,
.property-page[data-template="midnight"] .tour-fallback-note,
.property-page[data-template="midnight"] .tour-linkout-note {
  color: var(--mid-text-soft);
}
.property-page[data-template="midnight"] .media-explorer-note a,
.property-page[data-template="midnight"] .tour-fallback-note a,
.property-page[data-template="midnight"] .tour-linkout-note a,
.property-page[data-template="midnight"] .media-explorer-nav a {
  color: var(--mid-green);
}

/* --- Map: the "Prime Location" deep band ------------------------------------- */
.property-page[data-template="midnight"] .property-map {
  background: var(--mid-deep);
  max-width: none; margin-block: 6rem 0;
  padding-block: 6rem;
  padding-inline: max(var(--space-5), calc(50vw - 38rem));
}
.property-page[data-template="midnight"] .map-card {
  /* background-COLOR only — the shorthand wiped the base topo-dot
     background-image on the first render; the dots re-tone to night. */
  background-color: var(--mid-canvas);
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid var(--mid-line);
  border-radius: 16px; max-width: 64rem; margin-inline: auto;
}
.property-page[data-template="midnight"] .map-card-pin { background: var(--mid-green); }
/* The reference's pulsing pin — finite run (2 cycles = 4.8s): WCAG 2.2.2
   needs a pause control for auto-started motion past 5s, and reduced-motion
   alone doesn't cover users who never set the flag (family rule since the
   Signet a11y round). Explicit guard on top of the universal kill-switch. */
@keyframes mid-pin-pulse { 50% { opacity: 0.55; } }
.property-page[data-template="midnight"] .map-card-pattern {
  animation: mid-pin-pulse 2.4s var(--ease-standard, ease-in-out) 2;
}
@media (prefers-reduced-motion: reduce) {
  .property-page[data-template="midnight"] .map-card-pattern { animation: none; }
}
.property-page[data-template="midnight"] .map-card-address {
  font: var(--fw-semibold) var(--fs-heading-md) / 1.3 var(--mid-serif); color: #fff;
}
.property-page[data-template="midnight"] .map-card-citystate { color: var(--mid-text-soft); }

/* --- Contact: "experience the estate" close, form on the DEEP card ----------
   Dark path: orgAccentStyleDark / darkDefaultAccent guarantee the submit
   fill's contrast on night surfaces, so no white inner card is needed
   (Monolith precedent — contrast the light templates' #E5E2E1 gate). */
.property-page[data-template="midnight"] .property-agent-contact {
  padding-block: 6rem 7rem; max-width: none;
}
.property-page[data-template="midnight"] .property-agent-contact > h2 {
  text-align: center; margin: 0 auto var(--space-7); max-width: 1216px;
}
.property-page[data-template="midnight"] .agent-contact-grid {
  background: var(--mid-deep); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: var(--space-7);
  max-width: 960px; margin-inline: auto;
  /* Center the short identity column against the tall form (critic round
     2026-07-30, Major: on this bordered dark-on-dark card the top-pinned
     stub left ~600px of explicit void — the white-card templates hide the
     same gap in brightness). */
  align-items: center;
}
/* Portrait-scale presence for the reference's green-ring avatar: stacked
   column, 96px ring — an embellishment of existing data, nothing invented. */
.property-page[data-template="midnight"] .agent-contact-card {
  flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.property-page[data-template="midnight"] .agent-contact-avatar {
  width: 96px; height: 96px; font-size: var(--fs-display-md);
  background: #102415; color: var(--mid-green);
  border: 2px solid var(--mid-green); /* the reference's green portrait ring */
  font-family: var(--mid-sans);
}
.property-page[data-template="midnight"] .agent-contact-name {
  font: var(--fw-semibold) var(--fs-heading-md) / 1.3 var(--mid-serif); color: #fff;
}
/* Soft, not green — DESIGN.md's green budget is icon/rule-scale only, never
   a text line (critic round 2026-07-30). */
.property-page[data-template="midnight"] .agent-contact-brokerage { color: var(--mid-text-soft); }
.property-page[data-template="midnight"] .agent-contact-dre { color: var(--mid-text-faint); }
.property-page[data-template="midnight"] .agent-contact-org-logo {
  background: #fff; padding: 4px 8px; border-radius: 4px; box-sizing: content-box;
}
.property-page[data-template="midnight"] .property-agent-contact .property-schedule h2 {
  color: #fff; font-size: var(--fs-heading-md); text-align: left;
}
/* DESIGN.md input spec, night mode: recessed canvas fill inside the deep
   card (the reference's slate-900-on-slate-950 pairing), 1px slate
   boundary #7A8090 (4.5:1 on the fill, 5.1:1 on the card — both clear the
   3:1 non-text floor), caps labels above. Focus stays on the org token. */
.property-page[data-template="midnight"] #schedule-form input,
.property-page[data-template="midnight"] #schedule-form textarea {
  background: var(--mid-canvas); border: 1px solid var(--mid-border-interactive);
  border-radius: 4px; color: var(--color-text-primary);
}
.property-page[data-template="midnight"] #schedule-form input:focus-visible,
.property-page[data-template="midnight"] #schedule-form textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring); outline-offset: 2px;
}
.property-page[data-template="midnight"] .schedule-form .field label {
  font: var(--fw-semibold) var(--fs-body-sm) / 1.4 var(--mid-sans);
  text-transform: uppercase; letter-spacing: 0.05em; color: #C6CAD2;
}
.property-page[data-template="midnight"] .schedule-status { color: var(--mid-text-soft); }

/* --- Floor plan: the "Spatial Layout" dark frame ------------------------------
   (renderFloorPlan is appended by propertyPageV2 after the contact close —
   the reference places it mid-page, a known family limitation.) */
.property-page[data-template="midnight"] .floorplan-img {
  background: #fff; padding: var(--space-5);
  border: 1px solid var(--mid-line); border-radius: 12px;
}

/* AA notes (worst-case composite math; values verified by the 2026-07-30
   a11y review's independent recomputation): hero flat zone = 0.66 × #020617
   over pure white ≈ #585B66 — white title 6.77:1, italic city line #E2E5EC
   5.37:1 (plus the content-independent text-shadow backstop above). Glass
   stats card = 0.72 × #020617 over pure white ≈ #494C58 — serif numerals
   #fff 8.54:1, caps labels #C6CAD2 5.20:1. On the #0F172A canvas: white
   17.8:1, prose #AEB4C0 8.58:1, quiet labels #98A0AD 6.7:1 (7.65:1 on the
   deep card), green #A1D494 10.51:1; all higher still on the #020617
   bands. Chat bubbles: ink-100 on #1B2537 13.1:1, on #0F2417 14.0:1. Input
   boundary #7A8090: 4.52:1 vs the #0F172A fill, 5.11:1 vs the #020617 card
   (3:1 floor) — incl. the lead-gate input override above. Nav links
   #C6CAD2 8.54:1 on the 0.85 bar composite; the white Contact pill carries
   #041627 at 18.27:1 (hover #E2E6EC 14.59:1). The default accent pairing
   (#A1D494 fill / #002201 text, 10.06:1; hover 7.23:1, active 4.99:1) is
   emitted by darkDefaultAccent in render-public.mjs, not here. The
   reel-play button's focus ring is self-contained on its own fill (see
   hero block) — every other focus ring lands on an opaque audited surface.
   rgba hairlines (0.12/0.28 white) are decorative only — boundaries use
   --mid-border-interactive. */