/* ============================================================================
   Site plan — Edge (Lot A) and Echo (Lot B)
   Everything is expressed as a ratio of the 1196x690 space the shapes were
   authored in, so the overlay and the drawing scale as one unit. There are no
   pixel positions and no breakpoints for the plan itself: it is correct at any
   width by construction.
   ==========================================================================*/
.cc-plan {
  --cc-accent: #97a97f;
  --cc-accent-solid: #8aa06d;
  --cc-ink: #0d1b24;
  --cc-muted: #6f6f75;
  --cc-rule: #e6e6e8;
  font-family: "Inter Display", "Inter", sans-serif;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 40px;      /* full-bleed: no side gutters on the plan itself */
  background: transparent;
}
.cc-plan * { box-sizing: border-box; }

/* --- plan ---------------------------------------------------------------- */
/* The frame is the window; the stage is the (possibly larger) drawing behind it.
   On desktop they are the same size. On phones the frame narrows to one lot's
   bounding box and the stage is scaled up and offset behind it, which enlarges
   the suites without altering a single coordinate. */
.cc-plan__frame {
  position: relative;
  /* Full-bleed. The plan lives inside a 1400px-wide Framer block that is
     centred in the viewport, so `width:100%` can never exceed 1400px. `--cc-bleed`
     is measured in JS as the gutter on one side (viewport minus block, halved)
     and used to grow it past its parent. Measured rather than `100vw`, because
     100vw includes the scrollbar and would overflow by ~15px. */
  width: calc(100% + (var(--cc-bleed, 0px) * 2));
  max-width: none;
  margin-left: calc(var(--cc-bleed, 0px) * -1);
  aspect-ratio: 1196 / 690;   /* the authored coordinate space */
  overflow: hidden;
}
.cc-plan__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Phones: frame one lot. --fx/--fy/--fw/--fh are that lot's bounding box in the
   1196x690 space, measured in JS from SPOTS so it follows re-calibration. */
@media (max-width: 809px) {
  .cc-plan__frame { aspect-ratio: var(--fw, 1196) / var(--fh, 690); }
  .cc-plan__stage {
    width:  calc(100% * 1196 / var(--fw, 1196));
    height: calc(100% * 690  / var(--fh, 690));
    left:   calc(-100% * var(--fx, 0) / var(--fw, 1196));
    top:    calc(-100% * var(--fy, 0) / var(--fh, 690));
  }
  /* fewer shapes on screen and more room, so the labels can breathe */
  .cc-plan__tagid { font-size: clamp(11px, 3vw, 15px); }
  .cc-plan__tagsf { font-size: clamp(10px, 2.6vw, 13px); }
  .cc-plan__spot.is-active .cc-plan__tagid { font-size: clamp(15px, 4.2vw, 20px); }
  .cc-plan__spot.is-active .cc-plan__tagsf { font-size: clamp(12px, 3.2vw, 16px); }
  .cc-plan__tag { padding: 4px 8px; }
}
.cc-plan__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `fill` (not `contain`) so the drawing occupies exactly the same rectangle
     as the hotspot coordinate space — otherwise it letterboxes and every
     shape drifts sideways, which is what went wrong in the Framer version. */
  object-fit: fill;
  display: block;
}

/* --- hotspots ------------------------------------------------------------ */
.cc-plan__spot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cc-plan__spot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cc-plan__spot path {
  fill: rgba(151, 169, 127, 0.18);
  stroke: var(--cc-accent-solid);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  transition: fill .18s ease, stroke-width .18s ease, opacity .18s ease;
}
.cc-plan__spot:hover path { fill: rgba(151, 169, 127, 0.38); }
.cc-plan__spot.is-active path {
  fill: rgba(138, 160, 109, 0.82);
  stroke-dasharray: none;
  stroke-width: 2.5;
}
/* once something is chosen, the rest recede but stay legible */
.cc-plan.has-selection .cc-plan__spot:not(.is-active) path { opacity: .45; }

.cc-plan__spot:focus { outline: none; }
.cc-plan__spot:focus-visible path {
  stroke: var(--cc-ink);
  stroke-width: 3;
  stroke-dasharray: none;
}

/* --- card ---------------------------------------------------------------- */
.cc-plan__card {
  /* the plan is full-bleed, but running text should not be — keep the card
     within a readable measure and give it gutters of its own */
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 20px 20px 0;
  border-top: 1px solid var(--cc-rule);
  min-height: 96px;
}
.cc-plan__hint {
  margin: 0;
  font-size: 16px;
  color: var(--cc-muted);
}
.cc-plan__detail { position: relative; }
.cc-plan__lot {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-accent);
}
.cc-plan__id {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--cc-ink);
}
.cc-plan__sf {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--cc-ink);
}
.cc-plan__sf.is-tbc { color: var(--cc-muted); font-style: italic; }
.cc-plan__note {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-muted);
  max-width: 60ch;
}
.cc-plan__close {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--cc-rule);
  background: none;
  border-radius: 999px;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--cc-muted);
  cursor: pointer;
}
.cc-plan__close:hover { border-color: var(--cc-accent); color: var(--cc-ink); }

@media (max-width: 809px) {
  .cc-plan { padding: 0 0 32px; }
  .cc-plan__id { font-size: 24px; }
  .cc-plan__close { position: static; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-plan__spot path { transition: none; }
}

/* --- calibration mode (?calibrate=1) ------------------------------------- */
.cc-plan--cal .cc-plan__spot { cursor: move; }
.cc-plan--cal .cc-plan__spot path { fill: rgba(151,169,127,.30); stroke-dasharray: none; }
.cc-plan--cal .cc-plan__spot.is-cal-sel path {
  fill: rgba(232,93,74,.45); stroke: #e85d4a; stroke-width: 3;
}
.cc-plan__cal {
  /* Fixed to the bottom of the viewport so it is always reachable. Kept to a
     single compact bar by default — the output box is collapsed — so it hides
     as little of the plan as possible. `body` gets matching bottom padding
     (set in JS) so the lowest shapes can still be scrolled clear of it. */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;
  margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #0d1b24; color: #f4f4f0;
  border-top: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 -6px 20px rgba(0,0,0,.28);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cc-plan__cal .cc-plan__calout { display: none; }
.cc-plan__cal.is-open .cc-plan__calout { display: block; max-height: 30vh; }
.cc-plan__cal.is-open .cc-plan__calhelp { display: block; }
.cc-plan__cal .cc-plan__calhelp { display: none; }
.cc-plan__calbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cc-plan__calsel { color: #97a97f; flex: 1 1 auto; }
.cc-plan__cal button {
  border: 1px solid rgba(255,255,255,.3); background: none; color: inherit;
  border-radius: 6px; padding: 4px 12px; font: inherit; cursor: pointer;
}
.cc-plan__cal button:hover { border-color: #97a97f; }
.cc-plan__calout {
  width: 100%; background: #06121a; color: #cfe0c4; border: 0; border-radius: 6px;
  padding: 8px; font: inherit; resize: vertical;
}
.cc-plan__calhelp { margin: 8px 0 0; color: rgba(244,244,240,.55); }

/* resize handle shown on the selected shape in calibration mode */
.cc-plan__calhandle {
  position: absolute;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: #e85d4a;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  cursor: nwse-resize;
  z-index: 15;
  touch-action: none;
}

/* --- on-plan suite labels ------------------------------------------------ */
.cc-plan__tag {
  /* Sits ABOVE the shape rather than on top of it, so the label never covers
     the footprint it is describing. Anchored on `bottom`, so when the selected
     state enlarges the chip it grows upward and the gap to the shape stays even. */
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 3px rgba(13, 27, 36, 0.18);
  color: var(--cc-ink);
  white-space: nowrap;
  pointer-events: none;          /* clicks belong to the shape underneath */
  line-height: 1.15;
  transition: background .18s ease, box-shadow .18s ease, padding .18s ease;
}
.cc-plan__tagid {
  font-size: clamp(8px, 0.85vw, 12px);
  font-weight: 600;
  letter-spacing: .01em;
}
.cc-plan__tagsf {
  font-size: clamp(7px, 0.72vw, 11px);
  font-style: normal;
  color: var(--cc-muted);
}
/* selected: bigger type, inverted chip */
.cc-plan__spot.is-active .cc-plan__tag {
  background: var(--cc-ink);
  box-shadow: 0 3px 10px rgba(13, 27, 36, 0.35);
  padding: 6px 12px;
}
.cc-plan__spot.is-active .cc-plan__tagid {
  font-size: clamp(13px, 1.5vw, 20px);
  color: #fff;
}
.cc-plan__spot.is-active .cc-plan__tagsf {
  font-size: clamp(11px, 1.15vw, 15px);
  color: var(--cc-accent);
}
/* Hover must not repaint the chip white while the ACTIVE state is still
   colouring the title white — that produced white-on-white and the suite ID
   disappeared. Hover the light chip only when the shape is NOT selected; the
   selected chip lifts to a slightly lighter ink so its white text stays legible. */
.cc-plan__spot:not(.is-active):hover .cc-plan__tag { background: #fff; }
.cc-plan__spot.is-active:hover .cc-plan__tag { background: #16303f; }
/* dim labels of unselected shapes so the chosen one reads clearly */
.cc-plan.has-selection .cc-plan__spot:not(.is-active) .cc-plan__tag { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .cc-plan__tag { transition: none; }
}

/* --- combinable suites --------------------------------------------------- */
/* a quiet "+" on the chip signals the suite can be joined to its neighbour,
   so the flexibility is discoverable before anyone clicks */
.cc-plan__plus {
  font-style: normal;
  margin-left: 3px;
  color: var(--cc-accent-solid);
  font-weight: 700;
}
.cc-plan__spot.is-active .cc-plan__plus { color: var(--cc-accent); }
.cc-plan__spot.is-combinable path { stroke-dasharray: 5 3; }
/* combined selection reads as one block: solid, no dashes between members */
.cc-plan__spot.is-combinable.is-active path { stroke-dasharray: none; }

.cc-plan__breakdown {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--cc-muted);
}
.cc-plan__breakdown:empty { display: none; }

/* --- the other lot (context, not inventory) -------------------------------
   Drawn quietly so the district still reads as one plan, but clearly not
   part of this page's inventory. Clicking sends you to the page that does
   lease it, so the shared drawing becomes navigation instead of dead space. */
.cc-plan__spot.is-other {
  cursor: pointer;
}
.cc-plan__spot.is-other path {
  fill: rgba(13, 27, 36, 0.05);
  stroke: rgba(13, 27, 36, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}
.cc-plan__spot.is-other:hover path,
.cc-plan__spot.is-other:focus-visible path {
  fill: rgba(151, 169, 127, 0.22);
  stroke: var(--cc-accent-solid);
  stroke-dasharray: none;
}
/* its label stays out of the way until you reach for it */
.cc-plan__spot.is-other .cc-plan__tag {
  opacity: 0;
  transition: opacity .18s ease;
}
.cc-plan__spot.is-other:hover .cc-plan__tag,
.cc-plan__spot.is-other:focus-visible .cc-plan__tag {
  opacity: 1;
  background: var(--cc-ink);
}
.cc-plan__spot.is-other .cc-plan__tagid { color: #fff; }
.cc-plan__spot.is-other .cc-plan__tagsf { color: var(--cc-accent); }
/* a live selection should not dim the cross-page cue into invisibility */
.cc-plan.has-selection .cc-plan__spot.is-other path { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .cc-plan__spot.is-other .cc-plan__tag { transition: none; }
}

/* --- cross-page link ------------------------------------------------------
   On phones the other lot is cropped out of view, so its click-through has no
   target. This is the text equivalent, and it reads fine on desktop too. */
.cc-plan__crosslink {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  color: var(--cc-accent-solid);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.cc-plan__crosslink:hover { color: var(--cc-ink); }