/* ═══ WEST COAST MASTER DIORAMA OVERLAY ═════════════════════════════════════
   Home page and service-area hub only.

   Renders the approved master diorama plate with the five service-region
   polygons, all thirty town pins, and the six North Coastal callout labels.
   Every rule below is scoped under `.wc-diorama`. This file sets no document
   root, no page-level, and no bare element style, and it defines no custom
   property outside the component.

   Presentation follows the approved review package at native stage scale,
   except that regions are invisible at rest: no fill and no outline. The .42
   fill and the stroke-width 9 outline in the region colour appear only on the
   one region emphasised by hover, keyboard focus, or a click lock.
   Pins are 11px dots with a white ring, town labels are 30px bold with a
   white halo painted under the fill, and callout leaders are low-opacity. Label
   geometry is never moved by this file — a revealed label is painted at the
   exact x/y/anchor recorded in diorama-overlay-data.json, so every clearance
   verified for the static layout still holds.

   At rest no town label and no leader line is painted at all. Hover or
   keyboard focus reveals them; hidden labels are removed from the render
   (display:none) rather than left painted-but-transparent, so what is painted
   and what is announced stay in step. */

.wc-diorama{
  --wc-diorama-nc:#1e88e5;
  --wc-diorama-ni:#43a047;
  --wc-diorama-ce:#fb8c00;
  --wc-diorama-so:#8e24aa;
  --wc-diorama-ea:#e53935;
  --wc-diorama-focus:#0057ff;
  --wc-diorama-label:30px;
  --wc-diorama-region-label:30px;

  position:relative;
  display:block;
  margin:18px 0 22px;
  max-width:100%;
  font-family:var(--font-display, inherit);
}

/* ── Stage ──
   Fixed 2752x1536 ratio so the overlay's user-space coordinates line up with
   the plate before, during, and after image load. overflow:hidden guarantees
   the component can never introduce a horizontal scrollbar. */
.wc-diorama__stage{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  max-width:100%;
  aspect-ratio:2752 / 1536;
  border:1px solid rgba(17,19,51,.14);
  border-radius:var(--r-lg, 18px);
  background:var(--cream-2, #f4f1ea);
  box-shadow:0 18px 46px rgba(17,19,51,.14);
}

.wc-diorama__plate{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;
}

/* ── Brand overlays ──
   The official logo and the mascot, restored from the component this one
   replaces and used intact: no crop, no mask, no recolour, and no transform —
   each is laid out at its own natural aspect ratio (height:auto against a
   percentage width) and the only effect applied is a drop shadow behind the
   artwork, which separates it from the plate without touching its pixels.

   Placement is the empty margin of the plate at native 2752x1536 stage scale.
   The logo sits in the sky above the mountain crest, at x 2312-2697 / y 54-167:
   right of every pin (the eastmost is Alpine at x=1863, its label ending near
   x=1990) and above every region name. The mascot sits in the empty south-east
   corner, at x 2279-2719 / y 1065-1505, outside all five region polygons — East
   reaches x=2258 only at y=700, and is west of x=1900 by y=1065 — and roughly
   290px clear of the nearest label. Both are painted before the overlay host
   and never carry a z-index above it, so a fill, a pin, a town label or a
   leader line always paints over them. Both are decorative and inert:
   pointer-events:none, empty alt, no link and no control. */
.wc-diorama__brand{
  position:absolute;
  z-index:1;
  top:3.5%;
  right:2%;
  width:14%;
  min-width:96px;
  height:auto;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 7px 14px rgba(17,19,51,.12));
}

.wc-diorama__mascot{
  position:absolute;
  z-index:1;
  right:1.2%;
  bottom:2%;
  width:16%;
  height:auto;
  pointer-events:none;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 14px 18px rgba(17,19,51,.22));
}

.wc-diorama__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* ── Region polygons ──
   Invisible at rest: no fill and no outline. Both are zeroed with opacity,
   not fill:none or stroke:none, so the polygon keeps its paint and the default
   visiblePainted pointer-events still hit-tests the whole interior. Hover,
   click, and tap work anywhere inside a region even though nothing is drawn.
   diorama-overlay.js puts .is-emphasised on at most one polygon at a time, and
   this is the only rule that makes a region visible. */
.wc-diorama__region{
  fill-opacity:0;
  stroke-opacity:0;
  stroke-width:5;
  cursor:pointer;
}

.wc-diorama__region.is-emphasised{
  fill-opacity:.42;
  stroke-opacity:.9;
  stroke-width:9;
}

.wc-diorama__region:focus{ outline:none; }

.wc-diorama__region:focus-visible{
  outline:none;
  stroke-width:11;
  stroke-dasharray:26 14;
}

/* ── Town pins ── */
.wc-diorama__pin{ cursor:pointer; }
.wc-diorama__pin:focus{ outline:none; }

.wc-diorama__pin-hit{
  fill:none;
  r:24px;
  pointer-events:all;
}

.wc-diorama__pin-dot{
  r:11px;
  stroke:#fff;
  stroke-width:3;
  pointer-events:none;
}

.wc-diorama__pin:focus-visible .wc-diorama__pin-dot{
  stroke:var(--wc-diorama-focus);
  stroke-width:7;
}

/* ── Town labels ──
   Bold black glyphs with a white halo stroked under the fill and no
   background box. Inline and callout labels are painted identically; the two
   modes differ only in placement and in whether a leader is drawn. */
.wc-diorama__town-label{
  font:700 var(--wc-diorama-label)/1 var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  fill:#111;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:6px;
  stroke-linejoin:round;
  pointer-events:none;
}

/* Hidden at rest, and genuinely removed from the render rather than painted
   transparent. */
.wc-diorama__pin .wc-diorama__town-label,
.wc-diorama__pin .wc-diorama__leader{ display:none; }

.wc-diorama__pin.is-label-on .wc-diorama__town-label,
.wc-diorama__pin.is-label-on .wc-diorama__leader{ display:inline; }

/* ── North Coastal callout leaders ──
   The six coastal callout labels sit out in the untinted ocean margin, 310 to
   420px west of their own pins, so a revealed label needs a traceable line
   back to the town it names. A leader is only ever painted underneath a label
   that is itself painted. */
.wc-diorama__leader{
  stroke:#333;
  stroke-width:2;
  stroke-opacity:.55;
  fill:none;
  pointer-events:none;
}

/* ── Region names ──
   Decorative duplicates of each polygon's own accessible name, drawn in the
   region colour with the same white halo as a town label. */
.wc-diorama__region-name{
  font:700 var(--wc-diorama-region-label)/1 var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  paint-order:stroke;
  stroke:#fff;
  stroke-width:7px;
  stroke-linejoin:round;
  letter-spacing:1px;
  pointer-events:none;
}

/* ── Complete town list ──
   Present in the markup at every width, so the service area is readable with
   no pointer, no keyboard, and no JavaScript. Visually hidden on wide
   screens, where the plate itself carries the names on demand. */
.wc-diorama__index{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Caption is available to assistive technology but not painted, matching the
   component it replaces. */
.wc-diorama__caption{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Region overview ──
   The five region selectors and their synopses below the plate. The panel is
   plain readable content as served: every synopsis is painted until
   diorama-overlay.js narrows it to one, so nothing here is the only path to
   the text. Region colour is carried on a border and a numbered badge only —
   every word is dark text on a light surface, so no meaning depends on hue and
   no coloured surface has to carry small text. */
.wc-diorama-overview{
  --wc-diorama-nc:#1e88e5;
  --wc-diorama-ni:#43a047;
  --wc-diorama-ce:#fb8c00;
  --wc-diorama-so:#8e24aa;
  --wc-diorama-ea:#e53935;
  --wc-diorama-focus:#0057ff;

  margin:0 0 22px;
  max-width:100%;
  font-family:var(--font-display, inherit);
  color:#14161f;
}

.wc-diorama-overview__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin:0 0 14px;
  padding:0;
  list-style:none;
}

.wc-diorama-overview__item{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
}

.wc-diorama-overview__item--north-coastal{ --wc-diorama-region:var(--wc-diorama-nc); }
.wc-diorama-overview__item--north-inland{ --wc-diorama-region:var(--wc-diorama-ni); }
.wc-diorama-overview__item--central{ --wc-diorama-region:var(--wc-diorama-ce); }
.wc-diorama-overview__item--south{ --wc-diorama-region:var(--wc-diorama-so); }
.wc-diorama-overview__item--east{ --wc-diorama-region:var(--wc-diorama-ea); }

.wc-diorama-overview__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:2px solid var(--wc-diorama-region, rgba(17,19,51,.35));
  border-radius:50%;
  background:#fff;
  color:#1d1e2b;
  font-size:.78rem;
  font-weight:700;
  line-height:1;
}

.wc-diorama-overview__trigger{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin:0;
  padding:7px 14px;
  border:1px solid rgba(17,19,51,.18);
  border-left-width:4px;
  border-left-color:var(--wc-diorama-region, rgba(17,19,51,.35));
  border-radius:10px;
  background:#fff;
  color:#1d1e2b;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
}

.wc-diorama-overview__trigger:hover{
  border-color:rgba(17,19,51,.34);
  border-left-color:var(--wc-diorama-region, rgba(17,19,51,.35));
  background:rgba(17,19,51,.05);
}

/* Selection is the button's own aria-expanded state, so what is announced and
   what is painted cannot drift apart. */
.wc-diorama-overview__trigger[aria-expanded="true"]{
  border-color:rgba(17,19,51,.34);
  border-left-color:var(--wc-diorama-region, rgba(17,19,51,.35));
  background:rgba(17,19,51,.08);
  box-shadow:inset 0 0 0 1px rgba(17,19,51,.14);
  font-weight:700;
}

.wc-diorama-overview__trigger:focus{ outline:none; }

.wc-diorama-overview__trigger:focus-visible{
  outline:3px solid var(--wc-diorama-focus);
  outline-offset:2px;
}

.wc-diorama-overview__panel{ margin:0; }

/* The synopsis is the one block of running prose the component asks anyone to
   read, and it sits directly under the plate and the five selectors on both
   pages. It is set at 1.125rem with a 1.65 line height so it is comfortably
   legible at desktop reading distance, on a 98ch measure so it uses the width
   of the wide presentation card instead of the narrow column a 70ch measure
   left inside it. The measure is a cap, not a width: the paragraph is an
   auto-width block, so on any card narrower than 98ch it simply fills the card
   and wraps, and it can never push past it. */
.wc-diorama-overview__note{
  margin:0 0 10px;
  max-width:98ch;
  font-size:1.125rem;
  line-height:1.65;
  color:#14161f;
}

.wc-diorama-overview__note:last-child{ margin-bottom:0; }

/* Set by diorama-overlay.js only. Without the script every note stays painted. */
.wc-diorama-overview__note[hidden]{ display:none; }

/* ── Reserved synopsis height ──
   The six synopses are different lengths and the county overview is the
   shortest of them, so showing one at a time makes the panel change height,
   and everything below the component moves as the reader travels the plate.
   The panel therefore reserves the tallest note: all six paragraphs are
   placed in the same grid cell, so the panel is always as tall as the longest
   synopsis at the current width and the section after it never moves. Nothing
   is measured in this file and no height is written down — the reservation is
   whatever the longest paragraph needs once it has wrapped, which is why it
   holds at every width and would still hold if the wording changed.

   Gated on the class diorama-overlay.js adds, because stacking is only
   correct while that script is narrowing the panel to one paragraph. As
   served, with no script, the six paragraphs are ordinary sequential content
   and stay in normal flow; stacking them there would print them on top of one
   another.

   A reserved paragraph is hidden with visibility rather than display because
   only visibility keeps the box that holds the height open. It is hidden just
   as completely: unpainted, unhittable, unselectable, and out of the
   accessibility tree, so what is announced still matches what is on screen. */
.wc-diorama-overview__panel.is-single-note{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
}

.wc-diorama-overview__panel.is-single-note > .wc-diorama-overview__note{
  grid-area:1 / 1;
  align-self:start;
  /* A grid container does not collapse margins with its children, so the
     bottom margin that today collapses out of the panel would otherwise
     become real space inside it and shift the section below. */
  margin-bottom:0;
}

.wc-diorama-overview__panel.is-single-note > .wc-diorama-overview__note[hidden]{
  display:block;
  visibility:hidden;
}

.wc-diorama-overview__note-name{
  font-weight:700;
  color:#15161f;
}

/* The city line scales with the body it belongs to and stays a step below it,
   so the region's towns read as a caption to the synopsis rather than as part
   of the sentence above them. */
.wc-diorama-overview__note-cities{
  display:block;
  margin-top:6px;
  font-size:1rem;
  color:#14161f;
}

/* ── Responsive behaviour ──
   SVG text and pins are drawn in the plate's own 2752x1536 user space, so
   they shrink with the stage. Below the desktop breakpoint the label metrics
   are scaled back up so a revealed name stays legible.

   A region reveal can paint up to seven labels at once, and their verified
   clearances were computed at the native 30px metric, so the scale-up is
   applied only when exactly one label is on screen (`is-single-reveal`, set
   by diorama-overlay.js for a pin hover or pin focus). With a single label
   painted no label-to-label collision is possible. */
@media (max-width:1100px){
  .wc-diorama{
    --wc-diorama-region-label:38px;
  }
  .wc-diorama__overlay.is-single-reveal{
    --wc-diorama-label:40px;
  }
}

@media (max-width:760px){
  .wc-diorama{
    --wc-diorama-region-label:50px;
  }
  .wc-diorama__stage{ border-radius:12px; }

  /* The logo shrinks with the stage, so give it back some of the width it
     loses; a floor of 96px keeps the wordmark readable at any stage size. */
  .wc-diorama__brand{ top:3.5%; right:2.5%; width:20%; }

  .wc-diorama__overlay.is-single-reveal{
    --wc-diorama-label:58px;
  }
  .wc-diorama__pin-dot{ r:16px; }
  .wc-diorama__pin-hit{ r:40px; }

  /* Thirty pins cannot all be independently tappable across a phone-width
     plate, so at this width the full list is painted as ordinary readable
     content instead of being left to the overlay alone. */
  .wc-diorama__index{
    position:static;
    width:auto;
    height:auto;
    margin:14px 0 0;
    padding:0;
    overflow:visible;
    clip-path:none;
    white-space:normal;
  }
  .wc-diorama__index-title{
    margin:0 0 8px;
    font-size:1rem;
    line-height:1.3;
  }
  .wc-diorama__index-regions{
    margin:0;
    padding:0;
    list-style:none;
  }
  .wc-diorama__index-region{
    margin:0 0 10px;
    font-weight:700;
    line-height:1.35;
  }
  .wc-diorama__index-towns{
    margin:2px 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:2px 10px;
    font-weight:400;
    font-size:.95rem;
  }
  .wc-diorama__index-towns li{
    margin:0;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* Comfortable tap targets, and a synopsis measure that suits the width. */
  .wc-diorama-overview__trigger{
    min-height:44px;
    padding:10px 14px;
    font-size:1rem;
  }
  /* The measure cap comes off entirely at this width — the panel is the full
     width of the card and the text wraps to it. Both sizes step down from the
     desktop pair, keeping the city line below the body it captions rather than
     above it, which is what a flat 1rem city line at this width would do. */
  .wc-diorama-overview__note{
    max-width:100%;
    font-size:1.0625rem;
  }
  .wc-diorama-overview__note-cities{
    font-size:.95rem;
  }
}

/* Below 700px the stage is too small to give the mascot room it does not owe
   the reader: it is dropped from the render entirely rather than scaled down
   into the corner where the South pins and their labels sit. The logo stays. */
@media (max-width:699.98px){
  .wc-diorama__mascot{ display:none; }
}

@media (max-width:480px){
  .wc-diorama{
    --wc-diorama-region-label:64px;
  }
  .wc-diorama__overlay.is-single-reveal{
    --wc-diorama-label:76px;
  }
  .wc-diorama__pin-dot{ r:20px; }
  .wc-diorama__pin-hit{ r:52px; }
}

/* ── Coarse pointer ──
   No hover exists, so the pin has to be reachable as a tap target and the
   dot has to be large enough to aim at. Activation reveals and locks the
   label; see diorama-overlay.js. */
@media (pointer:coarse){
  .wc-diorama__pin-hit{ r:44px; }
  .wc-diorama__pin-dot{ r:15px; }
  .wc-diorama__region{ stroke-width:7; }
  .wc-diorama-overview__trigger{ min-height:44px; }
}

/* ── Motion ──
   The component adds no motion beyond a short region fade. Remove it for
   reduced-motion users while preserving every state change. */
@media (prefers-reduced-motion:no-preference){
  .wc-diorama__region{ transition:fill-opacity 120ms ease, stroke-opacity 120ms ease, stroke-width 120ms ease; }
  .wc-diorama-overview__trigger{ transition:background-color 120ms ease, border-color 120ms ease; }
}

@media (prefers-reduced-motion:reduce){
  .wc-diorama__region,
  .wc-diorama__pin,
  .wc-diorama__pin-dot,
  .wc-diorama-overview__trigger{ transition:none !important; animation:none !important; }
}

/* ── Forced colours ──
   Keep the focus indicator visible when the author colours are dropped. */
@media (forced-colors:active){
  .wc-diorama__region:focus-visible{ stroke:Highlight; }
  .wc-diorama__pin:focus-visible .wc-diorama__pin-dot{ stroke:Highlight; }
  .wc-diorama-overview__trigger[aria-expanded="true"]{ border-color:Highlight; }
}

/* ── Mobile town index restyle: card, orange region eyebrows, town chips ── */
@media (max-width:760px){
  .wc-diorama__index{
    margin:18px 0 0;
    padding:20px 18px 14px;
    background:#f7f8fa;
    border:1px solid rgba(17,19,51,.1);
    border-radius:14px;
  }
  .wc-diorama__index-title{
    font-family:"Barlow Condensed",Impact,sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-size:20px;
    color:#111333;
    margin:0 0 14px;
  }
  .wc-diorama__index-region{
    font-family:Inter,system-ui,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#fc3900;
    margin:0 0 14px;
    padding-top:12px;
    border-top:1px solid rgba(17,19,51,.08);
  }
  .wc-diorama__index-region:first-child{ border-top:0; padding-top:0; }
  .wc-diorama__index-towns{
    margin:8px 0 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-family:Inter,system-ui,sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:#111333;
  }
  .wc-diorama__index-towns li{
    background:#fff;
    border:1px solid rgba(17,19,51,.14);
    border-radius:999px;
    padding:7px 12px;
    line-height:1.2;
    white-space:nowrap;
    overflow-wrap:normal;
  }
}
@media (max-width:760px){
  main .wc-diorama__index-towns li{ font-size:14px !important; font-family:Inter,system-ui,sans-serif; line-height:1.2 !important; }
}