/* UNWC supplied brand palette. Pro fonts take precedence when installed;
   the bundled open-source Bebas Neue is the current display fallback. */
@font-face{font-family:Cairo;src:url('fonts/cairo-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cairo;src:url('fonts/cairo-extra-bold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('fonts/bebas-neue.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Bebas Neue Pro Bold';src:local('Bebas Neue Pro Bold'),local('BebasNeuePro-Bold');font-weight:400;font-display:swap}
@font-face{font-family:'Bebas Neue Pro Book';src:local('Bebas Neue Pro Book'),local('BebasNeuePro-Book');font-weight:400;font-display:swap}
:root{--dam:#253A49;--palm:#526352;--tidal:#91ABBA;--al-ain:#A3BDB4;--stone:#DDD3CB;--salt:#F7F7F7;--midnight:#071E2B;--gray-water:#96A5B3;--sunrise:#F6F0B6;--bedrock:#BEAA91;--body:Cairo,Arial,sans-serif;--display:'Bebas Neue Pro Bold','Bebas Neue','Arial Narrow',sans-serif;--subheading:'Bebas Neue Pro Book','Bebas Neue','Arial Narrow',sans-serif;--line:color-mix(in srgb,var(--gray-water) 32%,var(--salt));font-family:var(--body);color:var(--midnight);background:var(--salt);font-synthesis:none}
header{background:var(--dam);border-color:var(--dam);height:78px;color:var(--salt)}
.brand{color:var(--salt);font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:.5px}.brand-icon{background:var(--salt);color:var(--dam);border-radius:2px}.brand-light{font-family:var(--subheading);font-weight:400}.divider{color:var(--tidal);font-weight:400}.draft{color:var(--salt);font-size:13px}.draft i,.status-dot{background:var(--al-ain)}.view-tag{background:var(--midnight);color:var(--salt);font-weight:800;border-radius:2px;font-size:12px}
aside{background:var(--salt);border-color:var(--line);padding-top:26px;gap:20px}.eyebrow{font-family:var(--body);font-weight:800;font-size:12px!important;color:var(--palm);letter-spacing:1.2px;line-height:1.5}h1{font-family:var(--display);font-weight:400;font-size:44px;letter-spacing:.4px;text-transform:uppercase;line-height:1.02;margin:0 0 10px}h2{font-family:var(--subheading);font-size:24px;font-weight:400;letter-spacing:.4px;line-height:1.1}p{color:var(--dam);font-size:14px;line-height:1.6}.aside-heading>p:last-child{font-size:14px}.text-button{font-family:var(--body);color:var(--dam);font-size:13px}
.arrival-section{background:var(--sunrise);border:1px solid color-mix(in srgb,var(--bedrock) 55%,var(--sunrise));border-left:4px solid var(--palm);border-radius:3px;padding:16px}.arrival-section .eyebrow{color:var(--palm);font-size:11px!important}.arrival-section h2{color:var(--midnight);font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:.5px}.arrival-section>p:not(.eyebrow){font-size:13px;color:var(--dam)}.arrival-buttons button{background:var(--salt);border-color:var(--bedrock);border-radius:3px;color:var(--midnight)}.arrival-buttons button>span{background:var(--dam);color:var(--salt);font-weight:800}.arrival-buttons strong{font-weight:800;font-size:14px}.arrival-buttons small{color:var(--dam);font-size:11px}.arrival-buttons button:hover,.arrival-buttons button[aria-pressed=true]{background:var(--dam);border-color:var(--dam);color:var(--salt)}.arrival-buttons button:hover small,.arrival-buttons button[aria-pressed=true] small{color:var(--salt)}.arrival-buttons button:hover>span,.arrival-buttons button[aria-pressed=true]>span{background:var(--sunrise);color:var(--midnight)}
.filter{font-family:var(--body);background:var(--salt);border-color:var(--line);color:var(--dam);font-size:13px;line-height:1.35;min-height:38px;border-radius:3px;font-weight:400;padding:8px}.filter i{border-radius:1px;outline:1px solid #071E2B15}.filter:hover{background:color-mix(in srgb,var(--tidal) 16%,var(--salt))}.filter[aria-pressed=true]{color:var(--salt);background:var(--dam);border-color:var(--dam);box-shadow:none}.filter[aria-pressed=true] i{outline:1px solid #F7F7F755}
.layer-section{border-color:var(--line)}.layer-section label{color:var(--dam);font-size:14px;line-height:1.5;padding:5px 0}input{accent-color:var(--dam)}.selection{background:color-mix(in srgb,var(--tidal) 16%,var(--salt));border-color:var(--line);border-radius:3px}.selection h2{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.05;letter-spacing:.3px}.selection p{font-size:13px;color:var(--dam)}.selection button{background:var(--dam);color:var(--salt);border-radius:3px;font-family:var(--body);font-weight:800;font-size:13px}.selection button:hover{background:var(--midnight)}.source-note{color:var(--dam)}.source-note strong{font-weight:800;color:var(--dam)}.source-note p{color:var(--dam);font-size:12px}.source-note a{color:var(--dam);text-decoration:underline;text-underline-offset:3px}
.map-panel{background:var(--salt)}.map-caption{color:var(--dam);background:#F7F7F7ed;font-family:var(--body);font-size:13px}.map-caption span:last-child{color:var(--dam)}.map-caption .caption-separator{color:var(--gray-water)}.map-caption .status-dot{background:var(--palm)}.shell{fill:var(--salt);stroke:var(--dam);stroke-width:2.6}.region{stroke:var(--salt)}.region:hover,.region.selected,.region:focus-visible{stroke:var(--midnight)}.region-label{font-family:var(--body);font-weight:800;fill:var(--midnight);stroke:none;font-size:14px;letter-spacing:0}.region-label.small{font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:0}.region-label.large{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:.7px}.region-label.on-dark{fill:var(--salt)}.region-label.muted{fill:var(--dam);font-weight:400}.hall-line{stroke:var(--dam);opacity:.4}.hall-label{font-family:var(--subheading);font-size:16px;letter-spacing:.8px;fill:var(--dam)}.entry circle{stroke:var(--salt)}.entry text{font-family:var(--body);font-weight:800;fill:var(--salt)}.entry[id*="vip"] text{fill:var(--midnight)}.entry:hover circle,.entry:focus-visible circle{stroke:var(--midnight)}
.registration-area{fill:var(--sunrise);stroke:var(--palm);stroke-width:3}.registration-leader{stroke:var(--palm);stroke-width:1.5}.registration-label-bg{fill:var(--sunrise);stroke:var(--palm);stroke-width:1.2;rx:3}.registration-label{font-family:var(--display);font-size:20px;font-weight:400;fill:var(--midnight);letter-spacing:.4px;stroke:none}.vip-area{fill-opacity:.55}.poi{color:var(--dam)}.poi-disc{fill:var(--salt);stroke:var(--dam);filter:drop-shadow(0 1px 2px #071E2B18)}.poi.operations{color:var(--dam)}.poi.operations .poi-disc{fill:var(--salt);stroke:var(--gray-water)}.poi.vip{color:var(--dam)}.poi.vip .poi-disc{fill:var(--stone);stroke:var(--bedrock)}.poi:hover .poi-disc,.poi:focus-visible .poi-disc,.poi.selected .poi-disc{stroke:var(--midnight);fill:var(--sunrise)}.poi-wc{font-family:var(--body);font-weight:800;font-size:7px}.poi-leader{stroke:var(--gray-water)}#poi-tooltip{background:var(--midnight);color:var(--salt);font-family:var(--body);font-size:13px;border-radius:3px}
.map-hint{background:#F7F7F7ed;color:var(--dam)}.controls{background:var(--salt);border-color:var(--line);border-radius:3px;box-shadow:0 4px 16px #071E2B0b}.controls button{color:var(--dam);background:var(--salt);border-radius:2px}.controls button:hover{background:var(--stone)}.controls output{color:var(--dam);font-size:12px}.controls>span{border-color:var(--line)}.map-key{color:var(--dam)}.map-key i{border-color:var(--dam);background:var(--salt)}button:focus-visible,a:focus-visible,input:focus-visible,svg:focus-visible{outline-color:var(--palm)}#error{background:var(--salt);color:var(--midnight);border:1px solid var(--bedrock)}
@media(max-width:850px){header{height:64px}.brand{font-size:26px}aside{padding:24px}.arrival-section h2{font-size:30px}.filter{font-size:13px}.map-caption{font-size:11px}.selection h2{font-size:26px}}@media(max-width:480px){.filter{font-size:12px;padding:7px}.draft{font-size:11px}.brand{font-size:24px}}

/* Fill stays below the plan; the perimeter is the final, non-interactive layer. */
.shell.shell-base{stroke:none}.building-outline{fill:none;stroke:var(--dam);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.hall-label{dominant-baseline:middle}

.service-room-band{fill:color-mix(in srgb,var(--stone) 72%,var(--salt));stroke:var(--gray-water);stroke-width:1;stroke-linejoin:round;pointer-events:none}.map-key i.service-key{margin-left:14px;background:color-mix(in srgb,var(--stone) 72%,var(--salt));border-color:var(--gray-water)}

/* Continuous internal building footprint, distinct from the open concourse. */
.service-room-band{fill:#E5E5E5;stroke:#171717;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.map-key i.service-key{background:#E5E5E5;border-color:#171717}

#label-mbzwi .region-label.large{font-size:22px;letter-spacing:.4px}

.view-switch{display:flex;border:1px solid #91ABBA66;padding:3px;gap:3px}.view-switch button{background:transparent;border:0;color:#F7F7F7;padding:10px 14px;font:800 12px var(--body);letter-spacing:1px}.view-switch button[aria-pressed=true]{background:#F7F7F7;color:#071E2B}.angle-controls{position:absolute;top:22px;right:24px;display:flex;align-items:center;gap:9px;background:#F7F7F7ef;border:1px solid #DDD3CB;padding:6px 9px;color:#253A49;font:12px var(--body);z-index:3}.angle-controls[hidden]{display:none}.angle-controls button{border:0;background:transparent;color:#253A49;font-size:23px;width:30px;height:30px}.angle-controls input[type=range]{width:105px;height:22px;margin:0;accent-color:#526352}.depth-control{display:flex;align-items:center;gap:5px;border-left:1px solid #DDD3CB;padding-left:9px}.depth-faces{pointer-events:none}.isometric .region{stroke-width:1}.isometric .building-outline{stroke-width:1}.isometric .region-label.large{font-size:24px}.isometric #label-mbzwi .region-label.large{font-size:20px}
@media(max-width:1000px){.angle-controls{top:60px;right:12px}.view-switch button{padding:8px}.header-right .draft{display:none}}@media(max-width:480px){.angle-controls{gap:4px}.angle-controls input[type=range]{width:80px}.angle-controls>label[for]{display:none}}

/* Clean top faces; shading alone defines the shallow blocks. */
.isometric .region{stroke:none}.isometric .region:focus-visible{stroke:var(--midnight);stroke-width:2}

/* Pale exterior ground with a white interior floor. */
.map-panel{background:#F4F0EA}.shell.shell-base{fill:#FFFFFF}.map-caption,.map-hint{background:#F4F0EAed}.angle-controls output{min-width:34px;text-align:right;font-variant-numeric:tabular-nums;color:#253A49}

/* Compact single-column sidebar. */
main{grid-template-columns:244px minmax(0,1fr)}
aside{padding:24px 18px 18px;gap:20px}
.filters{grid-template-columns:minmax(0,1fr);gap:5px}
.filter{min-height:30px;padding:5px 9px;font-size:13px}
.selection{padding:12px}
.selection h2{font-size:22px;line-height:1.1;margin:0 0 5px}
.selection p{font-size:12px;line-height:1.4}
.selection .eyebrow{font-size:10px!important;margin-bottom:6px!important}
.selection button{margin-top:9px;padding:6px 10px;font-size:12px}
@media(max-width:850px){aside{display:flex;padding:20px;gap:18px}.filters{grid-template-columns:minmax(0,1fr)}}
.aside-heading h1{font-size:32px}.aside-heading>p:last-child{font-size:12px}
.arrival-section{padding:12px}.arrival-section h2{font-size:28px}
.arrival-buttons button{padding:7px 6px;grid-template-columns:21px 1fr;gap:3px}
.arrival-buttons button>span{grid-row:auto}.arrival-buttons small{grid-column:1/-1;white-space:nowrap;font-size:10px}

.ground-zone-label{font-family:var(--display);font-size:64px;font-weight:400;letter-spacing:6px;text-anchor:middle;dominant-baseline:central;stroke:none;opacity:.85;pointer-events:none}

/* Full-canvas map with a floating, dismissible key. */
header[hidden]{display:none}
main{position:relative;display:block;height:100dvh;min-height:0;overflow:hidden}
main>.map-panel{width:100%;height:100%;min-height:0}
#map-key-card{position:absolute;z-index:6;top:12px;right:12px;left:auto;width:244px;max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:14px;background:#FFFFFFf5;border:1px solid #253A4910;border-radius:14px;box-shadow:0 3px 16px #071E2B0d;overflow:auto}
#map-key-card[hidden],.open-key[hidden],.selection[hidden]{display:none}
.key-card-heading{display:flex;justify-content:space-between;align-items:center;color:var(--dam);font:800 12px var(--body);letter-spacing:.3px}
.key-card-heading button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dam);font-size:24px;line-height:1}
.key-card-heading button:hover{background:#F4F0EA}
.open-key{position:absolute;top:12px;right:12px;z-index:5;padding:10px 16px;border:1px solid #253A4918;border-radius:14px;background:#fff;color:var(--dam);box-shadow:0 3px 16px #071E2B0d;font:800 13px var(--body)}
.map-panel>.view-switch{position:absolute;left:12px;top:12px;z-index:4;background:#fff;border:1px solid #253A4918;border-radius:10px;box-shadow:0 2px 10px #071E2B08}
.map-panel>.view-switch button{color:var(--dam);border-radius:6px;padding:8px 12px}
.map-panel>.view-switch button[aria-pressed=true]{background:var(--dam);color:#fff}
.angle-controls{top:66px;left:12px;right:auto;border-radius:10px;background:#FFFFFFed;max-width:calc(100% - 24px);box-sizing:border-box}
.angle-controls button{font:800 12px var(--body);width:40px}
.map-caption{top:116px;left:12px;font-size:11px}
@media(max-width:600px){#map-key-card{width:220px;max-height:calc(100dvh - 24px)}.angle-controls{top:auto;bottom:116px;left:12px;gap:4px}.angle-controls input[type=range]{width:78px}.map-caption{top:66px;max-width:calc(100% - 270px)}.map-caption span:last-child,.map-caption .caption-separator{display:none}.map-key span{display:none}}

/* Quiet registration beneath the areas; key returns to the left. */
#map-key-card{left:12px;right:auto}
.open-key{left:12px;right:auto}
.map-panel>.view-switch{left:auto;right:12px}
.angle-controls{left:auto;right:12px}
.map-caption{left:auto;right:12px}
#map-key-card .arrival-section{background:transparent;border:0;border-top:1px solid #253A4914;border-radius:0;padding:14px 0 0}
#map-key-card .arrival-section h2{font-size:22px;margin-bottom:9px}
#map-key-card .arrival-buttons{display:flex;flex-direction:column;gap:7px}
#map-key-card .arrival-buttons button{display:flex;align-items:center;gap:8px;min-height:36px;flex:none;padding:7px 10px;background:#F6F0B6;border:1px solid #E9E3AD;border-radius:7px;white-space:nowrap}
#map-key-card .arrival-buttons button>span{width:18px;height:18px;font-size:10px;background:#FFFFFF99;color:#253A49;flex-shrink:0}
#map-key-card .arrival-buttons strong{font-size:12px}
#map-key-card .arrival-buttons small{font-size:11px;margin-left:auto;color:#253A49}
#map-key-card .arrival-buttons button:hover,#map-key-card .arrival-buttons button[aria-pressed=true]{background:#ECE49D;border-color:#BEAA91;color:#071E2B}
@media(max-width:600px){.map-panel>.view-switch{top:auto;bottom:174px;right:12px}.map-caption{top:auto;bottom:232px;right:12px;max-width:none}.angle-controls{left:auto;right:12px}}

#map-key-card .arrival-buttons button{background:#F0F1F1;border-color:#DFE2E3}
#map-key-card .arrival-buttons button>span{background:#F6F0B6;color:#253A49}
#map-key-card .arrival-buttons button:hover,#map-key-card .arrival-buttons button[aria-pressed=true]{background:#E3E7E8;border-color:#96A5B3}
#map-key-card .arrival-buttons button:hover>span,#map-key-card .arrival-buttons button[aria-pressed=true]>span{background:#F6F0B6;color:#253A49}

/* One bottom row for view, rotation, depth and navigation. */
.bottom-toolbar{position:absolute;z-index:7;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;overflow-x:auto;white-space:nowrap;padding:7px;background:#FFFFFFf5;border:1px solid #253A4914;border-radius:14px;box-shadow:0 3px 16px #071E2B0d}
.bottom-toolbar .view-switch{position:static;display:flex;flex:none;border:0;padding:0;gap:3px;background:none;border-radius:0;box-shadow:none}
.bottom-toolbar .view-switch button{padding:9px 12px;border-radius:7px;color:var(--dam);font-size:11px}
.bottom-toolbar .view-switch button[aria-pressed=true]{background:var(--dam);color:#fff}
.bottom-toolbar .angle-controls{position:static;display:flex;flex:none;border:0;border-radius:0;box-shadow:none;background:none;padding:0;max-width:none;gap:6px}
.bottom-toolbar .angle-controls[hidden]{display:none}
.bottom-toolbar .angle-controls button{width:38px;font:800 11px var(--body)}
.bottom-toolbar .angle-controls input[type=range]{width:100px}
.bottom-toolbar .controls{position:static;display:flex;flex:none;margin:0;border:0;border-left:1px solid #253A4920;border-radius:0;box-shadow:none;background:none;padding:0 0 0 9px}
.bottom-toolbar .controls button{background:none;width:32px;height:34px}
.bottom-toolbar .controls output{min-width:42px}
#map-key-card{max-height:calc(100dvh - 100px)}
.map-key{bottom:78px;left:18px;right:18px}
.map-caption{top:12px;bottom:auto;right:12px}
@media(max-width:850px){.bottom-toolbar{gap:6px}.bottom-toolbar .view-switch button{padding:8px}.bottom-toolbar .angle-controls{gap:4px}.bottom-toolbar .angle-controls input[type=range]{width:72px}.bottom-toolbar .angle-controls>label[for]{display:none}.map-caption{max-width:none}}

/* Website-sized map; all overlays stay inside the component. */
main{width:100%;height:750px;min-height:0;display:flex;flex-direction:column}
main>.map-panel{flex:1 1 auto;height:auto;min-height:0;order:0}  /* order beats styles.css's @media(max-width:850px){.map-panel{order:-1}}, which put the
     plan above the key card when the key stacked. The preamble reads first now. */
#map.pannable{touch-action:none;cursor:grab}
#map.dragging{cursor:grabbing}
/* 6 Oct 2026: bottom left (was bottom right). */
.map-zoom{position:absolute;z-index:5;left:16px;bottom:16px;display:flex;flex-direction:column;background:var(--salt);border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:0 2px 10px #071E2B14}
.map-zoom button{width:40px;height:40px;border:0;background:transparent;color:var(--dam);font:400 24px/1 var(--body);cursor:pointer}
.map-zoom button+button{border-top:1px solid var(--line)}
.map-zoom button:hover:not(:disabled){background:color-mix(in srgb,var(--tidal) 24%,var(--salt))}
.map-zoom button:disabled{color:color-mix(in srgb,var(--dam) 32%,var(--salt));cursor:default}
.map-intro{flex:0 0 auto;padding:18px 22px 14px;background:var(--salt);border-bottom:1px solid var(--line);color:var(--dam);font:15px/1.5 var(--body)}
.map-intro p{margin:0}
.map-intro p+p{margin-top:7px;color:color-mix(in srgb,var(--dam) 78%,var(--salt))}
.map-intro b{font-weight:700}
@media (max-width:640px){.map-intro{padding:14px 16px 12px;font-size:14px}
 /* A wide plan in a narrow, tall box letterboxes badly. Shorter frame, less dead space. */
 main{height:670px}}
#map-key-card{max-height:calc(100% - 100px)}

/* 22 Sep 2026: the 2D/3D switch is hidden, not removed — app.js looks the buttons up by
   id and would throw without them. The map stays on its default 3D view. */
.view-switch{display:none!important}

/* 22 Sep 2026: centre the zoom − and +. Cairo's line box for a 24px glyph is 45px (room for Arabic ascenders and descenders), which is taller than the 34px button, so the glyphs sat 9px below centre. Flex-centring at line-height 1 leaves the ink 2.5px low; 5px of bottom padding closes that. Measured to 0px, then lifted 2px (9px padding) because the exact centre still read low. The fit-to-screen icon renders from a fallback font and was already centred, so it is left alone. */
.bottom-toolbar .controls #zoom-in,.bottom-toolbar .controls #zoom-out{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 0 9px}

/* 23 Sep 2026: the Depth toggle is hidden, not removed — app.js binds its
   onchange by id. The checkbox ships checked, so the 3D view keeps its extruded blocks. */
.depth-control{display:none!important}

/* 23 Sep 2026: the rest of the toolbar row, centred the same way as the zoom − and +.
   ⛶ sat 7.1px below centre — it renders from a fallback font, not Cairo, so it needed its
   own padding rather than the 9px those two take; measured to −1.9px, matching them. The
   View angle label was 1.6px low, which is small but visible beside a slider. */
.bottom-toolbar .controls #reset{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 0 5px}
.bottom-toolbar .angle-controls>label[for]{position:relative;top:-1.5px}

/* 28 Sep 2026 (client round 1).
   Tones: two keyed categories, everything else neutral context. Each tone sets --tone so
   the extruded side faces and the key swatch take the same colour as the area's top.
   Pavilions are Al Ain; the Blue Zone and Oasis convening tones are set below (round 5). */
.tone-pavilions{--tone:var(--al-ain);fill:var(--tone)}
/* 30 Sep 2026 (client round 5): blue now means the Blue Zone. Every area in it takes --tidal
   (the blue convening already used, round 2), and convening in The Oasis moves to --bedrock,
   a warm sand, so it cannot be read as part of the Blue Zone. Midnight labels hold on both
   (7.1:1 on Tidal, 7.6:1 on Bedrock). */
.tone-blue-zone{--tone:var(--tidal);fill:var(--tone)}
/* 2 Oct 2026 (client round 7): every named room in The Oasis is green, one tone with the
   pavilions. Its four convening rooms (CONV 1-2, FLEX 1-2) are not confirmed as open to
   attendees, so they are greyed out rather than sand; they carry no label to contrast with. */
.tone-oasis{--tone:var(--al-ain);fill:var(--tone)}
.tone-convening{--tone:color-mix(in srgb,var(--midnight) 16%,var(--salt));fill:var(--tone)}
/* The VIP Lounge and the VIP Majlis carry vipDetail, whose 55% fade (.vip-area) would make
   each the one pale room in an otherwise even zone. */
.tone-blue-zone.vip-area,.tone-oasis.vip-area{fill-opacity:1}
.tone-context{--tone:color-mix(in srgb,var(--stone) 55%,var(--salt));fill:var(--tone)}
.tone-parking{--tone:color-mix(in srgb,var(--gray-water) 40%,var(--salt));fill:var(--tone)}
.tone-circulation{--tone:#FFFFFF;fill:var(--tone)}
.face-base{stroke:var(--tone);stroke-width:.5}
.registration-area{fill:var(--tone);stroke:var(--gray-water);stroke-width:1.5}
.registration-leader{stroke:var(--dam)}
.registration-label-bg{fill:var(--salt);stroke:var(--dam)}
.filter i{background:var(--tone);outline:1px solid var(--dam)}
.filter[aria-pressed=true] i{outline:1px solid var(--salt)}

/* One case for every area name, whatever the data or a translation supplies. */
.region-label,.registration-label,.filter{text-transform:uppercase}
.filter{letter-spacing:.3px}

/* Selecting an area is non-destructive: the rest of the plan dims, it does not vanish. */
.faded{opacity:.45}
.isometric .region.selected{stroke:var(--midnight);stroke-width:3}

/* The selection card lives on the plan, not inside the (closed-by-default) key, so a
   click always shows what was selected and how to undo it. Logical insets mirror it
   for Arabic along with the key. */
.map-panel>.selection{position:absolute;z-index:6;top:12px;left:auto;right:auto;inset-inline-end:12px;width:240px;max-width:calc(100% - 24px);box-sizing:border-box;background:#FFFFFFf5;border:1px solid #253A4914;border-radius:14px;box-shadow:0 3px 16px #071E2B0d;padding:14px}
.selection .eyebrow[hidden]{display:none}
.selection-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.selection-actions button{margin:0}
.selection .clear-selection{background:transparent;color:var(--dam);border:1px solid var(--dam)}
.selection .clear-selection:hover{background:var(--stone);color:var(--midnight)}
#map-key-card,.open-key{left:auto;right:auto;inset-inline-start:12px}

/* Reset is a labelled button, not a lone glyph. */
.bottom-toolbar .controls #reset{width:auto;padding:0 12px;font:800 12px var(--body);color:var(--dam);border-radius:7px;white-space:nowrap}
.bottom-toolbar .controls #reset:hover{background:var(--stone)}
.bottom-toolbar button:focus-visible,.selection button:focus-visible,.filter:focus-visible,.open-key:focus-visible{outline:2px solid var(--midnight);outline-offset:2px}
/* Focus on an area is its own outline, not the browser's box around the polygon's bounds. */
.region:focus{outline:none}
.region:focus-visible,.isometric .region:focus-visible{stroke:var(--midnight);stroke-width:3}

/* 28 Sep 2026: the key's close control says what it does, not just "×". */
.key-card-heading button{width:auto;display:inline-flex;align-items:center;gap:6px;padding:0 8px;font:800 12px var(--body);letter-spacing:.3px}
.key-card-heading button [aria-hidden]{font-size:20px;line-height:1}
.key-card-heading button:focus-visible{outline:2px solid var(--midnight);outline-offset:2px}

/* Room callouts (1 Oct 2026, client round 6): a label that cannot fit its room sits in open
   ground on a leader line. Lighter than the registration callouts, which mark arrival and
   should stay the loudest labels on the plan. */
.callout-leader{stroke:var(--dam);stroke-width:1;vector-effect:non-scaling-stroke}
.callout-dot{fill:var(--dam)}
.callout-label-bg{fill:var(--salt);stroke:var(--dam);stroke-width:.8;vector-effect:non-scaling-stroke}
.region-label.callout-label{font-size:11px}

/* 5 Oct 2026: "Every Future Flows from Water" watermark. Fixed to the frame, not the drawing,
   so zooming never carries it off; never takes a click. 6 Oct 2026: top right (was bottom
   left), where the zoom buttons now sit; set further in from the corner the same day. */
.map-watermark{position:absolute;z-index:4;right:30px;top:28px;width:clamp(150px,20%,260px);height:auto;opacity:.55;pointer-events:none;user-select:none}
@media(max-width:480px){.map-watermark{right:18px;top:18px;width:120px}}