/* ============================================================================
   INTERACTIVE SITE PLAN — engine skin
   Status colors: available = brand teal · occupied = neutral · pad = dashed
   ========================================================================== */

.sp { --sp-av: #045C66; --sp-hot: #0B7E8A; }

/* toolbar */
.sp-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.sp-toolbar-label {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--stone);
  margin-right: 2px;
}
.sp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-chip {
  font-family: inherit; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid #B9B29C; background: transparent;
  color: var(--ink); cursor: pointer;
}
.sp-chip:hover { background: var(--sand); }
.sp-chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.sp-chip:focus-visible, .sp-clear:focus-visible { outline: 3px solid var(--sp-hot); outline-offset: 2px; }
.sp-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal); }
.sp-size select { font-family: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid #B9B29C; background: var(--paper); }
.sp-clear { border: none; background: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; color: var(--charcoal); }
.sp-legend { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.sp-legend li { list-style: none; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--charcoal); }
.sp-legend .sw { width: 13px; height: 13px; border: 1px solid var(--stone); display: inline-block; }
.sp-legend .sw-av { background: var(--sp-av); border-color: var(--sp-av); }
.sp-legend .sw-pn { background: var(--brass, #A2712C); border-color: var(--brass, #A2712C); }
.sp-legend .sw-oc { background: #fff; }
.sp-legend .sw-pd { background: #fff; border-style: dashed; }
.sp-legend .sw-p2 { background: repeating-linear-gradient(45deg, #E9E4D6 0 5px, #DAD2BE 5px 8px); border-color: #B4AC94; }

/* stage */
.sp-stage { position: relative; background: #EFEADD; border: 1px solid var(--hairline); box-shadow: 0 22px 44px -30px rgba(70,60,38,.35); }
.sp-viewport { touch-action: none; cursor: grab; }
.sp-viewport:active { cursor: grabbing; }
.sp-viewport svg { display: block; width: 100%; height: auto; }
.sp-hint {
  position: absolute; left: 12px; bottom: 8px; font-size: 11.5px; color: #77725F;
  background: rgba(246,243,235,.88); padding: 3px 10px; pointer-events: none;
}
.sp-zoom {
  position: absolute; top: 12px; left: 12px; z-index: 20; display: flex; flex-direction: column; gap: 4px;
}
.sp-zoom button {
  width: 38px; height: 38px; font-size: 19px; line-height: 1; cursor: pointer;
  border: 1px solid #B9B29C; background: var(--paper); color: var(--ink);
}
.sp-zoom button:hover { background: var(--sand); }
.sp-zoom button:focus-visible { outline: 3px solid var(--sp-hot); outline-offset: 1px; }

/* suites */
.sp-suite { cursor: pointer; }
.sp-suite polygon {
  stroke: rgba(36, 38, 31, .55); stroke-width: 3; vector-effect: none;
  transition: fill .12s ease;
}
.sp-suite.is-available polygon { fill: rgba(4, 92, 102, .28); stroke: rgba(4, 92, 102, .9); stroke-width: 4; }
.sp-suite.is-occupied  polygon { fill: rgba(255, 255, 255, 0.01); }
.sp-suite.is-pad       polygon { fill: rgba(255, 255, 255, 0.01); stroke-dasharray: 14 10; }
.sp-suite.is-pending   polygon { fill: rgba(162, 113, 44, .16); stroke: rgba(162, 113, 44, .85); stroke-width: 4; }
.sp-suite.is-phase2    polygon { fill: rgba(117, 112, 95, .16); stroke: rgba(117, 112, 95, .7); }
.sp-suite.has-cover    polygon { fill: #F7F6F2; stroke: rgba(36,38,31,.75); }
.sp-suite.has-cover.is-available polygon { fill: var(--sp-av); }
.sp-suite.has-cover.is-available .sp-cover-label { fill: #fff; }
.sp-suite.has-cover.is-pending polygon { fill: var(--brass, #A2712C); }
.sp-suite.has-cover.is-pending .sp-cover-label { fill: #fff; }

/* live-mode extras: masks blot stale baked-in callouts; chips are banner
   cards over parcel-wide hotspots (pad rows, outparcels). */
.sp-mask { fill: #FFFFFF; stroke: none; pointer-events: none; }
.sp-suite.is-chip polygon { fill: rgba(255, 255, 255, 0.01); stroke: none; }
.sp-suite.is-chip.is-hot polygon, .sp-suite.is-chip:hover polygon { stroke: rgba(4, 92, 102, .8); stroke-width: 5; fill: rgba(4, 92, 102, .08); }
.sp-chip-card { fill: #2E2D27; }
.sp-chip-card.has-logo { fill: #FFFFFF; stroke: #CFC8B2; stroke-width: 2; }
.sp-suite.is-chip .sp-cover-label { fill: #fff; }
.sp-suite.is-chip .sp-chip-card.has-logo ~ .sp-cover-label { fill: var(--charcoal); }
.sp-suite.is-chip.is-available .sp-chip-card { fill: var(--teal, #045C66); }
.sp-suite.is-chip.is-pending .sp-chip-card { fill: var(--brass, #A2712C); }
.sp-cover-label { fill: var(--charcoal); text-anchor: middle; font-family: var(--sans); font-weight: 700; pointer-events: none; }

/* ---------------------------------------------------------------------------
   OPAQUE COVER STYLE (property.coverStyle === "opaque" — deerbrook pilot).
   Every cover is a fully opaque data card: available = brand teal (this is
   what should pop), pending = brass, occupied/pad = quiet warm paper with an
   ink label so availability carries the eye. The .sp-halo underlayer paints
   the same color ~8 plan-px past the traced edge (paint happens UNDER every
   cover fill) so raster art never bleeds at cover edges; the thin ink stroke
   on the cover itself is the demise line between adjacent cards. */
.sp.sp-opaque .sp-halo { pointer-events: none; stroke-width: 16; }
.sp.sp-opaque .sp-halo.is-available { fill: var(--sp-av); stroke: var(--sp-av); }
.sp.sp-opaque .sp-halo.is-pending   { fill: var(--brass, #A2712C); stroke: var(--brass, #A2712C); }
.sp.sp-opaque .sp-halo.is-occupied,
.sp.sp-opaque .sp-halo.is-pad       { fill: #FAF7F0; stroke: #FAF7F0; }
/* filtered-out suites: the card washes out over an opaque paper halo instead
   of going transparent — the raster's baked labels must never reappear. */
.sp.sp-opaque .sp-halo.is-dim       { fill: #FAF7F0; stroke: #FAF7F0; }

.sp.sp-opaque .sp-suite.has-cover polygon { stroke: rgba(52, 50, 43, .38); stroke-width: 3; }
.sp.sp-opaque .sp-suite.has-cover.is-occupied polygon { fill: #FAF7F0; }
.sp.sp-opaque .sp-suite.has-cover.is-pad polygon { fill: #FAF7F0; stroke-dasharray: 14 10; }
.sp.sp-opaque .sp-suite.has-cover .sp-cover-label { fill: var(--ink, #34322B); font-weight: 500; }
.sp.sp-opaque .sp-suite.has-cover.is-available .sp-cover-label,
.sp.sp-opaque .sp-suite.has-cover.is-pending .sp-cover-label { fill: #fff; font-weight: 700; }

/* hover/hot states stay fully opaque — never let the raster ghost through */
.sp.sp-opaque .sp-suite.has-cover.is-available.is-hot polygon,
.sp.sp-opaque .sp-suite.has-cover.is-available:hover polygon { fill: var(--sp-hot); }
.sp.sp-opaque .sp-halo.is-available.is-hot { fill: var(--sp-hot); stroke: var(--sp-hot); }
.sp.sp-opaque .sp-suite.has-cover.is-pending.is-hot polygon,
.sp.sp-opaque .sp-suite.has-cover.is-pending:hover polygon { fill: #B58038; }
.sp.sp-opaque .sp-halo.is-pending.is-hot { fill: #B58038; stroke: #B58038; }
.sp.sp-opaque .sp-suite.has-cover.is-occupied.is-hot polygon,
.sp.sp-opaque .sp-suite.has-cover.is-occupied:hover polygon,
.sp.sp-opaque .sp-suite.has-cover.is-pad.is-hot polygon,
.sp.sp-opaque .sp-suite.has-cover.is-pad:hover polygon { fill: #EFE9DA; }
.sp.sp-opaque .sp-halo.is-occupied.is-hot,
.sp.sp-opaque .sp-halo.is-pad.is-hot { fill: #EFE9DA; stroke: #EFE9DA; }

/* Phase II (future-phase suites): hatched sand card, stone label — clearly
   neither the teal Available pop nor the paper Occupied quiet. Hover keeps
   the hatch (opaque rule: raster never ghosts through) and speaks through a
   firmer demise stroke instead of a fill change. */
.sp.sp-opaque .sp-suite.has-cover.is-phase2 polygon { fill: url(#sp-p2hatch); }
.sp.sp-opaque .sp-halo.is-phase2 { fill: #E9E4D6; stroke: #E9E4D6; }
.sp.sp-opaque .sp-suite.has-cover.is-phase2 .sp-cover-label { fill: #6E695B; font-weight: 500; }
.sp.sp-opaque .sp-suite.has-cover.is-phase2.is-hot polygon,
.sp.sp-opaque .sp-suite.has-cover.is-phase2:hover polygon { stroke: rgba(52, 50, 43, .62); stroke-width: 5; }

/* keyboard focus ring must outrank the opaque demise stroke */
.sp.sp-opaque .sp-suite:focus-visible polygon { stroke: var(--sp-hot); stroke-width: 10; stroke-dasharray: none; }
/* explicit demise hairline over abutting same-color covers (geo.demiseLines) */
.sp.sp-opaque .sp-demise { fill: none; stroke: rgba(250, 247, 240, .92); stroke-width: 5; pointer-events: none; }

/* legend swatches match the opaque cards */
.sp.sp-opaque .sp-legend .sw-oc { background: #FAF7F0; border-color: #C9C2AD; }
.sp.sp-opaque .sp-legend .sw-pd { background: #FAF7F0; border-style: dashed; border-color: #8F8A78; }

.sp-suite.is-hot polygon, .sp-suite:hover polygon { }
.sp-suite.is-hot.is-available polygon, .sp-suite.is-available:hover polygon { fill: rgba(11, 126, 138, .55); }
.sp-suite.is-hot.is-occupied polygon,  .sp-suite.is-occupied:hover polygon  { fill: rgba(94, 104, 104, .30); }
.sp-suite.is-hot.is-pad polygon,       .sp-suite.is-pad:hover polygon       { fill: rgba(94, 104, 104, .30); }
.sp-suite.is-hot.is-pending polygon,   .sp-suite.is-pending:hover polygon   { fill: rgba(162, 113, 44, .38); }
.sp-suite:focus { outline: none; }
.sp-suite:focus-visible polygon { stroke: var(--sp-hot); stroke-width: 9; }
.sp-suite.is-dim { opacity: .16; pointer-events: none; }

/* tooltip */
.sp-tip {
  position: absolute; z-index: 30; pointer-events: none; min-width: 150px;
  background: var(--footer); color: #fff; padding: 10px 14px 11px;
  border-top: 2px solid var(--brass);
  box-shadow: 0 6px 18px rgba(56, 48, 30, .35);
}
.sp-tip .t-suite { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #C4BCA4; }
.sp-tip .t-name { display: block; font-size: 16px; margin: 2px 0 1px; color: #F6F3EB; }
.sp-tip .t-sf { display: block; font-size: 12.5px; color: #D8D2BF; }
.sp-tip .t-note { display: block; font-size: 11px; color: #B3AC97; margin-top: 2px; }

/* detail panel */
.sp-panel {
  position: absolute; top: 16px; right: 16px; width: 320px; max-width: calc(100% - 32px);
  background: #FFFDF8; border: 1px solid #CFC8B2; z-index: 25;
  box-shadow: 0 14px 38px rgba(56, 48, 30, .28);
  animation: sp-panel-in .18s ease-out;
}
@keyframes sp-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-panel { animation: none; } }
.sp-panel header {
  background: var(--footer); color: #fff; display: flex; justify-content: space-between;
  align-items: center; padding: 11px 16px; border-bottom: 2px solid var(--brass);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.sp-x { background: none; border: none; color: #CBD1CC; font-size: 22px; line-height: 1; cursor: pointer; }
.sp-x:hover, .sp-x:focus-visible { color: #fff; outline: none; }
.sp-panel-body { padding: 18px; max-height: 56vh; overflow: auto; }
.sp-panel h3 { font-size: 21px; line-height: 1.15; color: var(--charcoal); }
.sp-badge {
  display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px;
}
.sp-badge-available { background: var(--teal); color: #fff; }
.sp-badge-occupied { background: var(--mist); color: var(--charcoal); }
.sp-badge-pad { border: 1px dashed var(--charcoal); color: var(--charcoal); }
.sp-badge-pending { background: var(--brass, #A2712C); color: #fff; }
.sp-badge-phase2 { background: #E9E4D6; color: #6E695B; border: 1px solid #B4AC94; }
.sp-panel dl { margin-top: 14px; font-size: 14px; }
.sp-panel dl div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--rule); }
.sp-panel dt { color: var(--slate); flex-shrink: 0; }
.sp-panel dd { font-weight: 700; text-align: right; }
.sp-panel h4 { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin: 16px 0 6px; }
.sp-docs { margin: 0; }
.sp-docs li { list-style: none; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.sp-cta {
  display: block; text-align: center; margin-top: 16px; padding: 12px;
  background: var(--teal); color: #fff; text-decoration: none;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.sp-cta:hover { background: var(--sp-hot); }
.sp-cta-ghost { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
.sp-cta-ghost:hover { background: var(--mist); }

/* spaces table */
.sp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: transparent; }
.sp-table th {
  text-align: left; background: transparent; color: var(--stone); padding: 10px 16px 8px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  border-bottom: 1px solid var(--ink);
}
.sp-table th:last-child, .sp-table td:last-child { text-align: right; }
.sp-table td { padding: 11px 16px; border-top: 1px solid var(--hairline); }
.sp-table tr.grp td {
  background: transparent; font-size: 11px; font-weight: 400; letter-spacing: .24em;
  text-transform: uppercase; color: var(--brass); padding: 22px 16px 6px;
}
.sp-table tr.row { cursor: pointer; }
.sp-table tr.row:hover, .sp-table tr.row.is-hot { background: #ECE7D8; }
.sp-table tr.row:focus-visible { outline: 3px solid var(--sp-hot); outline-offset: -3px; }
.sp-table tr.row.av td:nth-child(2) { color: var(--teal); font-weight: 700; }
.sp-table .note { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #A2712C; margin-left: 8px; }

/* stats block (project page header) */
.sp-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.sp-stats .stat b { display: block; font-size: clamp(20px, 2.4vw, 30px); color: var(--charcoal); }
.sp-stats .stat span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }

/* mobile */
@media (max-width: 760px) {
  .sp-panel {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none;
    border-left: none; border-right: none; border-bottom: none;
  }
  .sp-panel-body { max-height: 46vh; }
  .sp-legend { margin-left: 0; }
  .sp-hint { display: none; }
}