/* 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-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))}
/* The two zones as bullets, each led by its name in bold (Ben, 27 Oct). */
.map-intro-zones{margin:4px 0 0;padding-inline-start:1.2em}
.map-intro-zones li+li{margin-top:2px}
.map-intro-zones+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}

/* 27 Oct 2026 (round 9): the portrait map. The drawing is never wider than MAX_W (app.js) and
   centres in a wider frame. Its labels are laid out by measured x positions, so the SVG stays
   left-to-right in Arabic: `direction:rtl` would flip every `text-anchor`. */
#map{margin:0 auto;direction:ltr}
/* The phone key under the plan: Exhibitors, then the numbered areas, then the logo. It takes
   the page's direction, so in Arabic the numbers sit on the right. */
.map-key-list{font:400 15px/1.3 var(--body);color:var(--midnight);padding:8px 16px 28px;background:var(--salt)}
.map-key-list ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px 14px}
.map-key-list li{display:flex;gap:9px;align-items:flex-start}
.map-key-list li.key-exhibitors{align-items:center}
.map-key-list li>span:last-child{padding-top:1px}
.map-key-list li.key-exhibitors>span:last-child{padding-top:0}
.map-key-list .key-swatch{flex:none;width:22px;height:15px;background:var(--sunrise);border:1px solid var(--dam)}
.map-key-list .key-dot{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--dam);color:var(--salt);font:800 11px var(--body)}
/* A tablet-width frame has room for two columns, read down each one in turn. */
/* Its start edge follows the intro text's: 16px on a phone, 22px from 641px (.map-intro). */
@media(min-width:641px){.map-key-list{padding-inline:22px}}
@media(min-width:560px){.map-key-list ol{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(7,auto)}}
.map-key-list .key-logo{display:block;max-width:100%;height:auto;margin-top:32px}
/* A wide frame: the key is a column on the start side of the plan, and the two are centred
   together, so the space before the key matches the space after the plan (Ben, 27 Oct). The
   swatches, the dots and the logo (cropped to its artwork) all start on one line. */
.map-panel.key-beside{display:flex;align-items:center;justify-content:center;column-gap:56px;padding-inline:22px}
.map-panel.key-beside #map{flex:none;margin-inline:0}
.map-panel.key-beside .map-key-list{order:-1;flex:none;padding-block:24px;padding-inline:0;background:none}
.map-panel.key-beside .map-key-list ol{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}