/* Residence layer — panel tabs, media tiles, scene states, plan viewer.
   Palette and shapes follow creative-direction.css; nothing here restyles the
   region or resort scales. */

/* ---------------------------------------------------------------- tab bars */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 14px}
.tabs button{padding:8px 11px;border:1px solid rgba(23,37,33,.16);border-radius:999px;
  background:rgba(255,255,255,.55);color:var(--cimalpes-forest);font-size:11px;cursor:pointer}
.tabs button.active{background:var(--cimalpes-forest);color:var(--cimalpes-ivory)}
.tab-body h3{margin:20px 0 6px;font:700 11px/1 Inter,system-ui;letter-spacing:.12em;
  text-transform:uppercase;color:#7b6a47}
.tab-body>h3:first-child{margin-top:4px}
.muted{color:#71817a;font-size:12px}
.prototype-badge{margin:0 0 12px;padding:8px 11px;border-left:3px solid var(--cimalpes-gold);
  background:rgba(184,148,82,.12);border-radius:0 8px 8px 0;font-size:11px;color:#6d5c39}

/* ------------------------------------------------------------------- facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0}
.fact{padding:9px 7px;background:#fff;border-radius:10px;text-align:center}
.fact small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8b9691}
.fact strong{display:block;margin-top:3px;font:700 15px/1 Georgia,serif}
.highlights{margin:6px 0;padding-left:18px;color:#50625f;line-height:1.5;font-size:13px}
.highlights li{margin-bottom:5px}
.contact{padding:12px;background:#fff;border-radius:10px;display:grid;gap:4px}
.contact a{color:var(--cimalpes-clay);font-weight:600;text-decoration:none;font-size:13px}

/* ------------------------------------------------------------------- media */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.media-tile{position:relative;margin:0;padding:11px;border:1px solid var(--line);
  border-radius:12px;background:#ffffffaa;display:grid;gap:4px;align-content:start}
.media-tile.splat{grid-column:1/-1;border-color:var(--cimalpes-gold);background:rgba(184,148,82,.1)}
.media-tile.empty{background:repeating-linear-gradient(45deg,#ffffff88 0 8px,#f0ece2aa 8px 16px)}
.media-kind{font:800 9px/1 Inter,system-ui;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cimalpes-clay)}
.media-tile strong{font-size:12px;line-height:1.25}
.media-tile small{font-size:11px;color:#6c7a77;line-height:1.35}
.media-tile img,.media-tile video{width:100%;border-radius:8px;display:block}
.media-tile figcaption{display:grid;gap:3px}
.pending{font:600 10px/1 Inter,system-ui;letter-spacing:.08em;text-transform:uppercase;color:#9aa39c}
.empty-state{padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center;
  display:grid;gap:5px;background:#ffffff66}
.empty-state strong{font-size:13px}
.empty-state small{font-size:11px;color:#71817a}

/* ------------------------------------------------------- availability list */
.count{font-size:13px;margin:0 0 4px}
.filters{grid-template-columns:1fr 1fr}
.card.amenity{cursor:default}
.card b .status{display:inline-block;margin-right:7px;padding:2px 6px;border-radius:999px;
  font:700 9px/1.5 Inter,system-ui;letter-spacing:.07em;text-transform:uppercase;vertical-align:middle}
.status.available{background:#dfe9dd;color:#31543f}
.status.reserved{background:#f4e6c8;color:#7a5c1c}
.status.sold{background:#e3e1de;color:#5c5a56}
.apt-eyebrow{display:block;margin-top:16px}
.apt-eyebrow .status{margin-right:4px}

/* -------------------------------------------------------------- plan tiles */
.plan-thumb{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:12px;
  background:#fff}
.plan-thumb img{width:100%;display:block;border-radius:8px}
.schematic-svg{width:100%;height:auto;display:block}
.schematic-svg .room{fill:#f7f4ec;stroke:#314c43;stroke-width:1.5}
.schematic-svg .room.terrace{fill:#e6ece2;stroke-dasharray:5 4}
.schematic-svg .room-name{font:600 11px Inter,system-ui;fill:#314c43;text-anchor:middle}
.schematic-svg .room-area{font:500 10px Inter,system-ui;fill:#7b8a83;text-anchor:middle}

/* Elements toggled with the `hidden` attribute. An id rule with a `display`
   value outranks the UA's [hidden]{display:none}, which leaves an invisible
   overlay swallowing clicks. See MISTAKES.md M-001. */
#planViewer[hidden],#sceneStatus[hidden],#sceneTools[hidden]{display:none!important}

/* ------------------------------------------------------------ scene states */
#sceneStatus{position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(201,213,203,.82);backdrop-filter:blur(3px)}
.scene-note{max-width:min(430px,80%);padding:26px 30px;border-radius:20px;text-align:center;
  background:rgba(245,241,232,.96);box-shadow:0 24px 70px rgba(16,35,30,.24);display:grid;gap:8px}
.scene-note strong{font:20px/1.25 Georgia,serif}
.scene-note small{font-size:12px;color:#61716c;line-height:1.4}
.scene-note.error strong{color:var(--cimalpes-clay)}
.scene-actions{display:grid;gap:7px;margin-top:8px}
.scene-actions button{border-radius:999px;padding:11px 16px}
.spinner{width:26px;height:26px;margin:0 auto 4px;border-radius:50%;
  border:3px solid rgba(49,76,67,.2);border-top-color:var(--cimalpes-forest);
  animation:sceneSpin .9s linear infinite}
@keyframes sceneSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
#sceneTools{position:absolute;left:18px;bottom:18px;z-index:6;display:flex;gap:6px}
#sceneTools button{border:0;border-radius:999px;padding:8px 12px;font:600 11px/1 Inter,system-ui;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(23,37,33,.9);color:#ead7ad;
  cursor:pointer}

/* ------------------------------------------------------------- plan viewer */
/* Desktop: beside the 3D view, leaving the panel readable. Mobile: full screen. */
#planViewer{position:fixed;z-index:30;inset:68px 414px 0 0;display:grid;
  grid-template-rows:auto 1fr auto;background:rgba(23,37,33,.96);color:var(--cimalpes-ivory)}
.plan-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid rgba(245,241,232,.18)}
.plan-bar strong{font:600 13px/1 Inter,system-ui}
.plan-zoom{font:600 11px/1 Inter,system-ui;color:#ead7ad;min-width:44px}
.plan-controls{margin-left:auto;display:flex;gap:6px}
.plan-controls button{border:0;border-radius:8px;padding:8px 12px;background:rgba(245,241,232,.14);
  color:var(--cimalpes-ivory);font:600 12px/1 Inter,system-ui;cursor:pointer}
.plan-controls button:hover{background:rgba(245,241,232,.28)}
.plan-stage{position:relative;overflow:hidden;display:grid;place-items:center;
  touch-action:none;cursor:grab}
/* No will-change here: the canvas scales up to 6x, and promoting a layer that
   large is expensive on the low-power machines this has to run on. */
.plan-canvas{transform-origin:center;max-width:86%;max-height:86%}
.plan-canvas img{max-width:100%;max-height:80vh;display:block;user-select:none}
.plan-canvas .schematic-svg{width:min(680px,84vw)}
.plan-canvas .schematic-svg .room{fill:#f7f4ec}
.plan-note{margin:0;padding:10px 16px;font-size:11px;color:#b9c4bb;
  border-top:1px solid rgba(245,241,232,.18)}

@media (max-width:720px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .media-grid{grid-template-columns:1fr}
  #planViewer{inset:0}
  .plan-canvas .schematic-svg{width:92vw}
  #sceneTools{left:12px;bottom:auto;top:12px}
  .scene-note{padding:20px 22px}
}