/* Tactile surfaces: depth at rest, deliberate interaction, no perpetual motion. */
:root{
  --depth-rest:0 1px 2px #182c3b08,0 5px 12px #182c3b06,0 15px 30px -17px #182c3b22;
  --depth-raised:0 2px 3px #182c3b06,0 10px 22px -7px #182c3b14,0 24px 42px -20px #182c3b2a;
  --depth-edge:inset 0 1px 0 #ffffffed,inset 0 -1px 0 #253d4d06;
  --depth-ease:cubic-bezier(.2,.7,.25,1);
}
body{background:#f2f4f7}
.portfolio-stage,.metric-strip,.panel,.property-directory,.property-dossier,.stat{
  border-color:#dfe5e9;
  border-radius:12px;
  box-shadow:var(--depth-edge),var(--depth-rest);
  transition:box-shadow 220ms var(--depth-ease),border-color 220ms ease,transform 220ms var(--depth-ease);
}
.portfolio-stage{background:linear-gradient(145deg,#f7f8f6,#ecf0f1);box-shadow:inset 0 1px 0 #fff,0 2px 2px #182c3b07,0 8px 19px -9px #182c3b15,0 20px 35px -20px #182c3b2a}
.action-focus{border:1px solid #ffffff0e;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff16,inset 0 -2px 0 #0000000c,0 4px 8px #172a3a10,0 17px 29px -15px #172a3a44;transition:transform 240ms var(--depth-ease),box-shadow 240ms var(--depth-ease)}
.depth-surface{position:relative}
.depth-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(340px circle at var(--depth-x,50%) var(--depth-y,30%),#ffffff18,transparent 72%);transition:opacity 220ms ease}
.panel:focus-within,.property-dossier:focus-within,.property-directory:focus-within{box-shadow:var(--depth-edge),var(--depth-raised);border-color:#cbd8df}
.mapped-unit{box-shadow:inset 0 1px 0 #fff,0 1px 2px #243e4e06,0 5px 9px -6px #243e4e20;transition:transform 180ms var(--depth-ease),box-shadow 180ms var(--depth-ease),border-color 180ms ease,background-color 180ms ease}
.mapped-unit.occupied{background:linear-gradient(145deg,#f5f8f3,#edf3ed)}
.mapped-unit.maintenance{background:linear-gradient(145deg,#fff9f0,#f8f0e3)}
.mapped-unit:focus-visible,.quick-actions>button:focus-visible{box-shadow:inset 0 1px 0 #fff,0 6px 16px -5px #243e4e23}
.property-directory-item.selected{box-shadow:inset 0 1px 0 #ffffffb0,inset 0 -1px 0 #263b4a05; background:linear-gradient(110deg,#f4f6f5,#eef2f2)}
.property-directory-item.selected .directory-icon{box-shadow:inset 0 1px 0 #ffffffa0,0 3px 5px -3px #7a604522}
.scene-property.selected{box-shadow:inset 0 1px 0 #ffffffd9,0 6px 15px -12px #253e4e26}
.scene-property .architecture{transition:transform 240ms var(--depth-ease),filter 240ms var(--depth-ease),opacity 200ms ease}
.button{box-shadow:inset 0 1px 0 #ffffffc9,0 2px 3px #243d4e05;transition:transform 150ms var(--depth-ease),box-shadow 180ms var(--depth-ease),background-color 180ms ease,border-color 180ms ease}
.button.primary{box-shadow:inset 0 1px 0 #ffffff16,0 3px 6px -2px #172a3a25,0 7px 12px -8px #172a3a30}
.focus-button{box-shadow:inset 0 1px 0 #fff5,0 3px 7px #00000012}
.quick-actions>button{box-shadow:var(--depth-edge),0 3px 8px #243d4e06;transition:transform 180ms var(--depth-ease),box-shadow 180ms var(--depth-ease),border-color 180ms ease}
.button:active,.mapped-unit:active,.quick-actions>button:active{transform:translateY(1px) scale(.992);box-shadow:inset 0 1px 3px #243d4e12}
nav a.active{box-shadow:inset 0 1px 0 #ffffff06,0 3px 7px #0000000a}
dialog[open]{animation:depth-dialog-in 200ms var(--depth-ease)}
@keyframes depth-dialog-in{from{opacity:.88;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .panel:hover,.property-directory:hover,.property-dossier:hover{box-shadow:var(--depth-edge),var(--depth-raised);border-color:#d3dee5}
  .metric-strip:hover,.stat:hover{transform:translateY(-2px);box-shadow:var(--depth-edge),var(--depth-raised)}
  .portfolio-stage:hover{transform:perspective(1400px) translateY(-3px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));box-shadow:inset 0 1px 0 #fff,0 2px 3px #182c3b06,0 13px 24px -12px #182c3b23,0 28px 40px -25px #182c3b30}
  .action-focus:hover{transform:perspective(1400px) translateY(-3px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));box-shadow:inset 0 1px 0 #ffffff20,0 7px 13px #172a3a12,0 23px 36px -18px #172a3a50}
  .depth-surface:hover::before{opacity:1}
  .mapped-unit:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 4px 8px -4px #243e4e18,0 10px 15px -8px #243e4e24}
  .quick-actions>button:hover{transform:translateY(-3px);box-shadow:var(--depth-edge),0 8px 18px -7px #243d4e22}
  .button:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #ffffffaa,0 4px 8px -4px #243d4e22}
  .button.primary:hover{box-shadow:inset 0 1px 0 #ffffff20,0 5px 12px -4px #172a3a35}
  .button:active,.mapped-unit:active,.quick-actions>button:active{transform:translateY(1px) scale(.992)}
  .scene-property:hover .architecture{filter:drop-shadow(0 10px 8px #324c5b12)}
}
@media(max-width:800px){.portfolio-stage,.panel,.property-directory,.property-dossier,.metric-strip,.stat{box-shadow:inset 0 1px 0 #fff,0 2px 4px #182c3b06,0 10px 20px -14px #182c3b22}.action-focus{box-shadow:inset 0 1px 0 #ffffff16,0 4px 8px #172a3a0c,0 13px 23px -15px #172a3a44}}
@media(prefers-reduced-motion:reduce){
  .portfolio-stage,.metric-strip,.panel,.property-directory,.property-dossier,.stat,.action-focus,.mapped-unit,.button,.quick-actions>button,.scene-property .architecture{transition:none!important;animation:none!important}
  .portfolio-stage:hover,.action-focus:hover,.metric-strip:hover,.stat:hover,.mapped-unit:hover,.button:hover,.quick-actions>button:hover,.button:active,.mapped-unit:active,.quick-actions>button:active,.scene-property:hover .architecture{transform:none!important}
  .depth-surface::before{display:none}
  dialog[open]{animation:none!important;transform:none!important}
}
@media print{.panel,.portfolio-stage,.metric-strip,.property-directory,.property-dossier,.stat,.action-focus,.mapped-unit,.button{box-shadow:none!important;transform:none!important}.depth-surface::before{display:none!important}dialog[open]{animation:none!important}}