/* One registered map: detail tiles and labels share the same pan/zoom surface. */
.ramhan-map-detail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ramhan-map-detail img { position: absolute; max-width: none; opacity: 0; transition: opacity .25s; mask-composite: intersect; }
.ramhan-map-detail img.ready { opacity: 1; }
.ramhan-map-status { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; font-size: 12px; color: #fff; background: #0a2540ed; border-radius: 8px; padding: 8px 12px; }
.ramhan-map-status:empty { display: none; }
.ramhan-map-status button { color: inherit; font: inherit; border: 0; background: transparent; text-decoration: underline; cursor: pointer; }
body.ramhan-rendered #flat-surface { background: #096b7d; }
body.ramhan-rendered #carouselItem_0 { background: #096b7d; }
body.ramhan-scene-loading #flat-img { opacity: 1; }
body.ramhan-rendered #flat-img { transition: none; }
/* Blend the outer water when a wide community is framed between the panels. */
body.ramhan-map-focus #flat-inner { mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent); mask-composite:intersect; }
.ramhan-scene-previous { position: absolute; z-index: 2; max-width: none; pointer-events: none; object-fit: fill; }
body:is(.ramhan-detail-view, .ramhan-map-focus) #portfolio { display: none !important; }
#ramhan-scene-nav {
  display: none; position: fixed; left: 22px; top: 98px; z-index: 80;
  align-items: center; gap: 10px; padding: 8px; border-radius: 12px;
  background: #f3f7fbed; color: #152c43; border: 1px solid #fff9;
  box-shadow: 0 6px 24px #04152720; backdrop-filter: blur(16px);
}
body:is(.ramhan-detail-view, .ramhan-map-focus) #ramhan-scene-nav { display: flex; }
body.ui-hidden #ramhan-scene-nav { display: none; }
#ramhan-scene-nav button, #ramhan-scene-nav select {
  font: inherit; font-size: 12px; min-height: 34px; padding: 7px 10px;
  border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer;
}
#ramhan-scene-nav select { background: #e5eef6; min-width: 100px; max-width: 180px; }
#ramhan-scene-nav :focus-visible { outline: 2px solid #067397; outline-offset: 2px; }
.ramhan-render-status { color: #e4eeee; font-size: 12px; }
.ramhan-render-status:empty { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 641px) {
  body:is(.ramhan-detail-view, .ramhan-map-focus) #zoomrail { top: auto !important; bottom: 130px; transform: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  body.ramhan-rendered #rail:has(.ramhan-detail) {
    left: auto; right: 12px; top: 98px !important; width: 300px;
    max-height: calc(100dvh - 122px);
  }
}
@media (max-width: 640px) {
  #ramhan-scene-nav { top: 72px; left: 10px; right: 10px; justify-content: space-between; gap: 3px; padding: 5px; }
  #ramhan-scene-nav button, #ramhan-scene-nav select { min-height: 38px; padding: 7px; font-size: 11px; white-space: nowrap; }
  #ramhan-scene-nav select { min-width: 72px; max-width: 110px; flex: 1; width: 0; }
  body:is(.ramhan-detail-view, .ramhan-map-focus):not(.ui-hidden):has(#rail:not(:empty)) #flat-surface { right: 0; bottom: 42dvh; }
  body:is(.ramhan-detail-view, .ramhan-map-focus) #rail:has(.ramhan-detail) { max-height: 40dvh; }
  body:is(.ramhan-detail-view, .ramhan-map-focus) #rail:has(.ramhan-unit-detail) { max-height: 52dvh; }
  body:is(.ramhan-detail-view, .ramhan-map-focus):not(.ui-hidden):has(#rail:not(:empty) .ramhan-unit-detail) #flat-surface { bottom: 54dvh; }
  body:is(.ramhan-detail-view, .ramhan-map-focus) #rail .ramhan-detail>.ramhan-source-note { font-size: 12px; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ramhan-rendered #flat-img { transition: none; }
  .ramhan-map-detail img { transition: none; }
}

/* Numbers appear during free zoom; choosing a community limits them to that area. */
body.ramhan-rendered [data-code^="ramhan:community:"] { display:none !important; }
.ramhan-community-highlight { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.ramhan-community-highlight path { fill:#54dbff30; stroke:#54dbff; stroke-linejoin:round; pointer-events:none; }
.ramhan-community-highlight.unit-selected path { fill:#54dbff0b; stroke:#54dbff80; }
.ramhan-community-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ramhan-community-heading h2 { margin:0; }
.ramhan-community-heading button { padding:5px 7px; border:1px solid #91b9d455; border-radius:6px; font:500 10px/1.3 system-ui,sans-serif; color:#adc2d5; background:transparent; cursor:pointer; white-space:nowrap; }
.ramhan-community-heading button[aria-pressed="true"] { background:#e5eef6; color:#0a2540; }
.ramhan-community-list button small { font-size:10px; opacity:.65; }
.ramhan-community-list button[aria-pressed="true"] { background:#54dbff; border-color:#54dbff; color:#152c43; }
@media(min-width:1001px) {
  body.ramhan-rendered #leftpanels .ramhan-panel { width:240px; padding:16px; }
  body.ramhan-rendered #portfolio { display:block !important; }
  body.ramhan-rendered #ramhan-scene-nav { display:none; }
  body.ramhan-map-focus .ramhan-panel>.portfolio-link, body.ramhan-map-focus .ramhan-panel>.ramhan-guide { display:none; }
}
.ramhan-plot-layer { position:absolute; inset:0; z-index:30; pointer-events:none; }
.ramhan-plot-layer[hidden], .ramhan-plot-pin[hidden], .ramhan-source-plate[hidden] { display:none; }
.ramhan-source-plate { position:absolute; max-width:none; pointer-events:none; }
.ramhan-plot-shapes { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ramhan-plot-shapes polygon { pointer-events:all; fill:transparent; stroke:transparent; stroke-width:1.5; cursor:pointer; }
.ramhan-plot-shapes polygon:hover { fill:#54dbff40; stroke:#54dbff; }
.ramhan-plot-shapes polygon.selected { fill:#54dbff50; stroke:#54dbff; stroke-width:2; }
.ramhan-plot-pin { position:absolute; transform-origin:center; pointer-events:auto; border:0; min-width:26px; height:26px; padding:0 4px; display:grid; place-content:center; font:500 10px/1 "Suisse Int'l",sans-serif; font-variant-numeric:tabular-nums; color:#fff; background:transparent; text-shadow:0 1px 3px #000d,0 0 2px #000e; cursor:pointer; }
.ramhan-plot-pin.selected { color:#54dbff; font-weight:700; z-index:2; }
.ramhan-plot-pin:focus-visible { outline:3px solid #54dbff; outline-offset:2px; }
.ramhan-plot-count { margin:10px 0 4px; font-size:15px; font-weight:600; }
.ramhan-plot-help { margin:4px 0 12px; color:#adc2d5; font-size:12px; line-height:1.5; }
.ramhan-source-switch { width:100%; padding:10px 12px; border:1px solid #91b9d470; border-radius:8px; background:#123d5e; color:#edf5fc; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; line-height:1.3; }
.ramhan-source-switch[aria-pressed="true"] { background:#e5eef6; color:#152c43; }
.ramhan-plot-search { display:block; margin:14px 0 8px; color:#adc2d5; font-size:11px; }
.ramhan-plot-search input,.ramhan-plot-search select { box-sizing:border-box; display:block; width:100%; min-height:44px; margin-top:6px; padding:11px 12px; font:inherit; font-size:13px; background:#081c30; color:#fff; border:1px solid #7495ad; border-radius:8px; }
.ramhan-plot-list { display:flex; flex-direction:column; gap:4px; max-height:36dvh; overflow-y:auto; }
.ramhan-plot-list button { display:grid; grid-template-columns:70px 1fr 14px; align-items:center; gap:8px; padding:11px 12px; min-height:44px; text-align:left; border:1px solid #7196b260; border-radius:7px; color:#edf5fc; background:#0a2540; cursor:pointer; }
.ramhan-plot-list button:hover { background:#123d5e; border-color:#7495ad; }
.ramhan-plot-list strong { font-size:12px; font-weight:600; }
.ramhan-plot-list span { font-size:12px; color:#adc2d5; }
.ramhan-plot-list svg { width:14px; height:14px; }
.ramhan-unit-nav,.ramhan-plan-variants { display:flex; gap:8px; margin:12px 0; }
.ramhan-unit-nav button,.ramhan-plan-variants button { flex:1; min-height:40px; padding:9px; border:1px solid #7495ad; border-radius:7px; background:#0a2540; color:#edf5fc; font-size:12px; cursor:pointer; }
.ramhan-unit-nav button:disabled { opacity:.3; cursor:default; }
.ramhan-plot-source-preview { display:block; padding:0; margin:12px 0; overflow:hidden; border:1px solid #7495ad; border-radius:9px; background:#0a2540; color:#edf5fc; cursor:pointer; width:100%; }
.ramhan-plot-source-preview img { width:100%; max-height:235px; object-fit:cover; display:block; }
.ramhan-plot-source-preview span { display:block; padding:9px; font-size:11px; }
.ramhan-detail .ramhan-design-facts { margin:12px 0; color:#e1eae3; }
.ramhan-plot-empty { font-size:12px; color:#adc2d5; padding:10px; }
@media(max-width:640px) {
  .ramhan-plot-list { max-height:28dvh; }
  .ramhan-plot-source-preview img { max-height:185px; object-fit:contain; background:#e5eef6; }
  .ramhan-unit-nav button,.ramhan-plan-variants button { min-height:44px; }
}
.ramhan-source-reference { margin:14px 0; }
.ramhan-source-reference summary { cursor:pointer; font-size:12px; color:#adc2d5; padding:8px 0; }
@media(max-width:640px) {
  .ramhan-unit-detail>.ramhan-eyebrow { display:none; }
  .ramhan-unit-detail>h2 { display:inline-block; font-size:15px; margin:12px 12px 8px 0; }
  .ramhan-unit-detail>.ramhan-unit-type { display:inline-block; margin:0 0 8px; }
  .ramhan-unit-detail>.ramhan-back { display:block; }
  .ramhan-unit-nav { margin:6px 0 10px; }
}
.ramhan-reference-render { display:block; width:100%; padding:0; overflow:hidden; border:1px solid #7495ad; border-radius:9px; background:#0a2540; color:#edf5fc; cursor:pointer; }
.ramhan-reference-render img { display:block; width:100%; height:auto; }
.ramhan-reference-render span { display:block; padding:10px; font-size:12px; }