:root {
  color-scheme: dark;
  --ground:#080808; --surface:#131313; --raised:#202020; --line:#292929;
  --text:#ece9e2; --muted:#aaa9a5; --faint:#94938f; --accent:#c6b69c;
  --positive:#55d6a0; --negative:#f0a0a0; --font-scale:1; --divider-opacity:.16;
  --pixel-shift-x:0px; --pixel-shift-y:0px; --dim:.04;
  font-family:Cairo, Arial, sans-serif; font-size:14px; font-synthesis:none;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ground); color:var(--text); }
body { -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,select,input[type=checkbox],input[type=range],summary { cursor:pointer; }
button { border:1px solid #42413f; background:#1c1c1c; border-radius:6px; padding:7px 13px; line-height:1.5; transition:background-color .15s,border-color .15s; }
button:hover { background:#2b2b2b; border-color:#77736c; }
button:disabled { opacity:.6; cursor:wait; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button.primary { background:var(--text); color:#111; border-color:var(--text); }
button.primary:hover { background:#fff; }
button.text-button { padding:4px 0; background:transparent; border-color:transparent; }
.danger { color:var(--negative); }
[hidden] { display:none !important; }
h1,h2,h3,h4,p { margin:0; }
h1 { font-size:calc(clamp(17px,1.5vw,27px) * var(--directory-type-scale,1)); line-height:1.55; font-weight:700; }
h2 { font-size:18px; line-height:1.4; font-weight:600; }
h3 { font-size:22px; line-height:1.5; font-weight:600; }
h4 { font-size:16px; font-weight:600; }
.muted { color:var(--muted); font-size:12px; line-height:1.7; }
.wallpaper { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; opacity:.6; }
.ambient { position:fixed; inset:0; pointer-events:none; background:#c6b69c; opacity:.012; }
.oled-dimmer { position:fixed; inset:0; z-index:5; background:rgb(0 0 0 / var(--dim)); pointer-events:none; transition:background-color .5s; }
.signage-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,33.3333%); direction:ltr; height:100dvh; min-height:640px; transform:translate(var(--pixel-shift-x),var(--pixel-shift-y)); transition:transform 2.8s; }
.signage-stage.sidebar-left { grid-template-columns:minmax(300px,33.3333%) minmax(0,1fr); }
.brand-sidebar { grid-column:2; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(min-content,1fr) auto auto auto; align-items:center; min-width:0; container-type:inline-size; border-inline-start:1px solid var(--line); padding:24px 24px 0; gap:24px; }
.sidebar-left .brand-sidebar { grid-column:1; border-inline-start:0; border-inline-end:1px solid var(--line); }
.brand-identity { grid-column:1; grid-row:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.tower-mark { width:clamp(150px,42cqi,280px); height:auto; max-width:100%; max-height:25vh; object-fit:contain; }
.brand-name { font-size:16px; font-weight:600; }
.brand-sidebar, .directory-panel { direction:rtl; }
html[dir=ltr] .brand-sidebar,html[dir=ltr] .directory-panel { direction:ltr; }
.local-information { grid-column:1; grid-row:2; width:100%; min-width:0; padding:0; background:transparent; }
.location { font-size:clamp(14px,2.8cqi,20px); color:var(--accent); margin-block-end:16px; text-align:center; }
.clock-weather { display:grid; grid-template-columns:auto minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(10px,2.6cqi,24px); }
.analog-clock { display:block; width:clamp(80px,19cqi,136px); height:auto; overflow:visible; }
.clock-face { fill:none; stroke:var(--accent); stroke-width:1; }
.clock-ticks { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; }
.clock-ticks path:last-child { stroke:var(--faint); stroke-width:1; }
.clock-hand { stroke:var(--text); stroke-linecap:round; transform-origin:54px 54px; }
.analog-clock.is-ticking .clock-hand { transition:transform .96s linear; }
.hour-hand { stroke-width:3; }
.minute-hand { stroke-width:2; }
.second-hand { stroke:var(--accent); stroke-width:1; }
.clock-pin { fill:var(--accent); }
.clock-details { min-width:0; text-align:center; }
.clock { display:flex; align-items:baseline; justify-content:center; font-size:clamp(28px,7cqi,52px); font-weight:600; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums; }
#ksaClockSeconds,.clock small { font-size:clamp(12px,2.8cqi,20px); margin-inline-start:3px; color:var(--muted); font-weight:400; }
#ksaClockDate { font-size:clamp(12px,2.6cqi,18px); line-height:1.7; margin-block-start:4px; }
.weather { display:flex; align-items:center; justify-content:center; gap:clamp(8px,2cqi,16px); min-width:0; text-align:start; }
.weather-reading { display:flex; flex-direction:column; min-width:0; gap:4px; }
#alAhsaCondition { font-size:clamp(13px,2.6cqi,18px); line-height:1.5; }
#weatherIcon { flex:none; }
#weatherIcon svg { display:block; width:clamp(28px,6.5cqi,48px); height:auto; color:var(--accent); }
.weather-meta { display:flex; align-items:center; justify-content:center; gap:6px 16px; flex-wrap:wrap; margin-block-start:12px; color:var(--muted); }
.weather-meta p,.weather-meta a { font-size:clamp(11px,2.2cqi,15px); line-height:1.6; }
.weather-meta a { color:var(--muted); text-decoration:none; }
.weather-meta a:hover { color:var(--text); text-decoration:underline; }
#weatherAttribution { display:flex; gap:6px; }
.temperature { font-size:clamp(30px,7cqi,52px); font-weight:600; line-height:1.35; font-variant-numeric:tabular-nums; }
.contact-list { grid-column:1; grid-row:3; display:flex; flex-direction:column; gap:18px; padding-block:4px 8px; }
.contact-list>div { display:grid; grid-template-columns:clamp(32px,7cqi,48px) minmax(0,1fr); column-gap:16px; row-gap:2px; align-items:center; min-width:0; }
.contact-icon { width:20px; height:20px; flex:none; color:var(--accent); }
.contact-list .contact-icon { grid-column:1; grid-row:1/span 2; display:block; width:100%; height:auto; }
.contact-list>div>.muted { grid-column:2; grid-row:1; font-size:clamp(14px,2.8cqi,20px); line-height:1.5; }
#contactEmail,#contactWebsite { grid-column:2; grid-row:2; min-width:0; font-size:clamp(16px,4.2cqi,32px); font-weight:500; line-height:1.65; overflow-wrap:anywhere; text-align:right; unicode-bidi:isolate; }
html[dir=ltr] #contactEmail,html[dir=ltr] #contactWebsite { text-align:left; }
.ad-phone>.contact-icon { width:44px; height:44px; }
.contact-value-part { display:inline-block; min-width:0; max-width:100%; }
.ad-player { grid-column:1; grid-row:4; position:relative; isolation:isolate; background:#101010; height:28vh; min-height:250px; margin-inline:-24px; overflow:hidden; }
.ad-player canvas,.ad-player video { position:absolute; width:100%; height:100%; object-fit:cover; inset:0; }
.ad-overlay { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; }
.ad-overlay p { font-size:clamp(17px,1.7vw,27px); font-weight:700; }
#adOverlayPhone { max-width:100%; font-size:clamp(40px,11cqi,90px); font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; letter-spacing:-.03em; overflow-wrap:anywhere; }
.ad-phone { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.ad-player video { pointer-events:none; }
.language-flipping { backface-visibility:hidden; will-change:transform,opacity; pointer-events:none; }
.ad-manage { position:absolute; inset-inline-end:10px; bottom:10px; z-index:2; opacity:0; font-size:12px; }
.ad-player:hover .ad-manage,.ad-manage:focus-visible { opacity:1; }
.video-error { position:absolute; bottom:10px; inset-inline:10px; background:#151515; padding:8px; font-size:12px; color:var(--negative); }
.directory-panel { --directory-type-scale:1.25; grid-column:1; grid-row:1; display:flex; flex-direction:column; min-width:0; padding:24px 32px 20px; }
.sidebar-left .directory-panel { grid-column:2; }
.directory-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block-end:14px; }
.directory-header .muted { font-size:calc(11px * var(--directory-type-scale)); }
.language-toggle { flex:none; background:transparent; font-size:calc(12px * var(--directory-type-scale)); padding:6px 14px; }
.floors-container { flex:1; min-height:0; display:grid; grid-template-rows:repeat(var(--floor-count,8),minmax(min-content,1fr)); gap:3px; }
.floor-block { display:flex; flex-direction:column; justify-content:center; border-block-end:1px solid rgba(198,182,156,var(--divider-opacity)); padding-block:2px; min-width:0; }
.floor-block:last-child { border:0; }
.floor-header { margin-block-end:4px; display:flex; align-items:center; justify-content:space-between; }
.floor-title { font-size:calc(clamp(13px,1.15vw,22px) * var(--font-scale) * var(--directory-type-scale)); line-height:1.35; font-weight:600; }
.floor-columns { display:grid; grid-template-columns:1fr 1fr; direction:ltr; column-gap:28px; }
.office-list { display:flex; flex-direction:column; gap:1px; min-width:0; }
.office-row { display:grid; width:100%; grid-template-columns:48px minmax(0,1fr) 56px; align-items:center; direction:ltr; border:0; padding:0; border-radius:2px; background:transparent; text-align:inherit; min-height:20px; }
.office-row:hover { background:rgba(255,255,255,.045); }
.office-num { font:600 calc(clamp(13px,1.08vw,20px) * var(--font-scale) * var(--directory-type-scale))/1.2 Cairo,Arial,sans-serif; font-variant-numeric:tabular-nums; color:var(--accent); text-align:center; }
.office-name { font-size:calc(clamp(11px,.9vw,18px) * var(--font-scale) * var(--directory-type-scale)); line-height:1.35; text-align:right; padding-inline:8px; overflow-wrap:anywhere; white-space:pre-line; }
.office-row[data-status=available] .office-name { color:var(--positive); font-weight:600; }
.office-editor-row select[data-edit=status][data-status=available] { color:var(--positive); font-weight:600; }
#kpiAvailableOffices { color:var(--positive); }
html[dir=ltr] .office-name { text-align:left; }
html[dir=ltr] .office-name { grid-column:2; grid-row:1; }
html[dir=ltr] .office-num { grid-column:1; grid-row:1; }
html[dir=ltr] .office-emblem { grid-column:3; grid-row:1; }
.office-emblem { width:42px; height:min(20px,2.1vh); display:flex; align-items:center; justify-content:center; }
.office-emblem img { max-width:100%; max-height:100%; object-fit:contain; }
.office-badge { font-size:calc(11px * var(--directory-type-scale)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.signage-hud { position:fixed; top:8px; right:12px; display:flex; flex-wrap:wrap; gap:6px; z-index:10; opacity:0; pointer-events:none; transition:opacity .18s; max-width:calc(33.3333% - 24px); padding:8px; background:#111; border-radius:6px; }
.sidebar-is-left .signage-hud { left:12px; right:auto; }
.signage-hud button { font-size:12px; padding:5px 10px; }
body.hud-visible .signage-hud,.signage-hud:focus-within,.signage-hud:hover { opacity:1; pointer-events:auto; }
.guard-status { display:flex; align-items:center; font-size:11px; padding:0 6px; color:var(--muted); }
:fullscreen .signage-hud { display:none; }
.kiosk-hotspot { position:fixed; top:0; right:0; width:24px; height:24px; padding:0; background:transparent; border:0; opacity:0; z-index:6; }
dialog { color:var(--text); background:var(--ground); padding:0; border:1px solid #333; border-radius:10px; width:min(1320px,calc(100% - 40px)); max-width:none; max-height:none; height:min(900px,calc(100dvh - 40px)); overflow:hidden; }
dialog::backdrop { background:rgba(0,0,0,.76); }
.admin-shell { display:flex; flex-direction:column; height:100%; direction:inherit; }
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; border-block-end:1px solid var(--line); }
.admin-identity { display:flex; align-items:center; gap:12px; }
.admin-identity p { color:var(--muted); font-size:12px; }
.admin-header-actions { display:flex; gap:8px; align-items:center; }
.admin-header-actions button { font-size:12px; }
.icon-button { font-size:23px !important; width:36px; height:36px; padding:0; }
/* At 1280px: 210px navigation + 2 × 24px gutters + 1022px workspace = 1280px. */
.admin-body { flex:1; min-height:0; display:grid; grid-template-columns:210px minmax(0,1fr); }
.admin-nav { display:flex; flex-direction:column; padding:24px 12px; border-inline-end:1px solid var(--line); gap:8px; min-width:0; }
.admin-nav button { text-align:start; border:0; background:transparent; color:var(--muted); font-size:13px; padding:10px 12px; }
.admin-nav button[aria-current=page] { color:#fff; background:#191919; }
.nav-tip { margin-block-start:auto; padding:20px 12px 0; color:var(--faint); font-size:12px; line-height:1.8; }
.admin-workspace { overflow:auto; padding:24px; scrollbar-color:#555 #111; scrollbar-width:thin; }
.view-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:22px; }
.occupancy-strip { display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-radius:6px; margin-block-end:20px; }
.occupancy-strip>div { padding:12px 16px; display:flex; flex-direction:column; gap:2px; }
.occupancy-strip span { color:var(--muted); font-size:12px; }
.occupancy-strip strong { font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; }
.directory-toolbar { display:grid; grid-template-columns:minmax(150px,1fr) minmax(120px,180px) minmax(110px,160px); gap:10px; align-items:center; }
input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea { width:100%; min-width:0; background:#191919; border:1px solid #444; border-radius:6px; padding:8px 10px; font-size:13px; min-height:38px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type=checkbox] { accent-color:var(--accent); width:18px; height:18px; flex:none; }
input[type=range] { width:100%; accent-color:var(--accent); min-height:28px; }
input[type=file] { width:100%; font-size:12px; }
textarea { resize:vertical; min-height:65px; }
.results-summary { margin-block:12px 8px; }
.editor-floor { margin-block:12px 24px; }
.editor-floor-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:12px; flex-wrap:wrap; }
.editor-floor-heading h4 { font-size:16px; }
.floor-actions { display:flex; flex-wrap:wrap; gap:6px; }
.floor-actions button { font-size:12px; padding:5px 9px; }
.floor-settings { margin-block-end:16px; padding:12px 0; }
.office-editor { border-block-start:1px solid var(--line); padding:12px 0; }
.office-editor-row { display:grid; grid-template-columns:58px minmax(100px,1fr) 125px 36px; align-items:center; gap:12px; }
.office-editor-row .office-id { font-size:16px; font-variant-numeric:tabular-nums; color:var(--accent); }
.office-editor-row .edit-toggle { padding:0; width:36px; height:36px; }
.office-extra { margin-block-start:14px; padding:16px; border-radius:6px; background:var(--surface); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.office-extra label,.floor-settings label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.office-extra .extra-actions { display:flex; justify-content:flex-end; align-items:flex-end; gap:8px; }
.office-extra small { font-size:12px; line-height:1.7; }
.wide-field { grid-column:1/-1; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.settings-panel { background:var(--surface); padding:20px; border-radius:6px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.settings-panel>label:not(.switch):not(.upload-control) { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); }
.settings-panel output { font-variant-numeric:tabular-nums; color:var(--text); }
.switch { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-block:8px; font-size:13px; }
.switch small { display:block; font-size:12px; color:var(--muted); margin-block-start:5px; line-height:1.8; }
.theme-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.theme-presets button { font-size:12px; text-align:start; }
.theme-presets button[aria-pressed=true] { background:#333; border-color:var(--text); }
.input-action { display:flex; gap:8px; min-width:0; }
.input-action button { font-size:12px; }
.upload-control { position:relative; border:1px solid #484848; border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.upload-control input { font-size:12px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-block-start:6px; }
.playlist-item { display:flex; align-items:center; gap:10px; padding-block:12px; border-block-end:1px solid var(--line); }
.playlist-item .video-info { min-width:0; flex:1; }
.playlist-item .video-name { display:block; font-size:13px; overflow-wrap:anywhere; }
.playlist-item button { padding:5px 9px; font-size:12px; flex:none; }
.reset-section { border-block-start:1px solid var(--line); padding-block-start:18px; margin-block-start:12px; display:flex; flex-direction:column; gap:12px; }
.admin-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; border-block-start:1px solid var(--line); }
.admin-footer p { font-size:12px; color:var(--muted); line-height:1.6; }
.notice { padding:14px; margin-block-end:20px; background:#211b16; color:#e0c9ab; border-radius:6px; font-size:13px; }
.notice button { margin-block-start:10px; }
.empty-state { padding:24px 0; color:var(--muted); font-size:14px; }
.global-notice { position:fixed; bottom:20px; inset-inline:20px; z-index:15; background:#202020; border:1px solid #777; padding:14px; border-radius:6px; font-size:13px; }
dialog.docked { width:min(680px,calc(100% - 24px)); margin-inline-start:auto; margin-inline-end:12px; }
dialog.docked::backdrop { background:transparent; }
dialog.docked .admin-body { grid-template-columns:1fr; }
dialog.docked .admin-nav { flex-direction:row; overflow:auto; padding:8px; border-inline-end:0; border-block-end:1px solid var(--line); }
dialog.docked .admin-nav button { white-space:nowrap; }
dialog.docked .nav-tip { display:none; }
dialog.docked .settings-grid { grid-template-columns:1fr; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Keep OLED pixel shifts inside the fixed display, including at its bottom edge. */
@media (min-width:901px) {
  html,body { overflow:clip; }
  /* Use the floor spacing for larger type while keeping all eight floors visible. */
  .floors-container { gap:2px; }
  .floor-block { padding-block:1px; }
  .floor-header { margin-block-end:2px; }
  .floor-title { line-height:1.15; }
  .office-num { line-height:1; }
  .office-name { line-height:1.2; }
}
@media (min-width:901px) and (max-height:720px) {
  .signage-stage { min-height:0; }
  .directory-panel { padding:14px 24px 10px; }
  .directory-header { padding-block-end:6px; }
  .directory-header .muted { display:none; }
  .floors-container { gap:0; }
  .floor-block { padding-block:1px; }
  .floor-header { margin-block-end:2px; }
  .floor-title { font-size:calc(13px * var(--font-scale) * var(--directory-type-scale)); line-height:1.15; }
  .office-row { min-height:18px; }
  .office-emblem { height:14px; }
  .office-name { font-size:calc(11px * var(--font-scale) * var(--directory-type-scale)); }
  .brand-sidebar { gap:12px; padding-block-start:16px; }
  .tower-mark { max-height:22vh; }
  .brand-name { font-size:14px; }
  .location { margin-block-end:8px; }
  .clock-weather { gap:8px; }
  .analog-clock { width:64px; }
  .clock,.temperature { font-size:28px; }
  #ksaClockSeconds,.clock small { font-size:12px; }
  #ksaClockDate,#alAhsaCondition { font-size:12px; }
  #weatherIcon svg { width:28px; }
  .weather-meta { margin-block-start:6px; }
  .contact-list { gap:10px; }
  .contact-list>div { grid-template-columns:32px minmax(0,1fr); column-gap:12px; }
  .ad-phone>.contact-icon { width:32px; height:32px; }
  #adOverlayPhone { font-size:clamp(32px,10cqi,56px); }
  .ad-phone { flex-direction:row; gap:12px; }
  .ad-player { height:24vh; min-height:175px; }
}
@media (min-width:901px) and (max-width:1200px) {
  .brand-sidebar { padding-inline:16px; gap:16px; }
  .clock-weather { grid-template-columns:56px minmax(0,1.1fr) minmax(0,.9fr); gap:8px; }
  .analog-clock { width:56px; }
  .clock,.temperature { font-size:26px; }
  #ksaClockSeconds,.clock small { font-size:11px; }
  .weather { flex-direction:column; gap:2px; text-align:center; }
  #weatherIcon svg { width:26px; }
  #ksaClockDate,#alAhsaCondition { font-size:12px; }
  .contact-list>div { grid-template-columns:28px minmax(0,1fr); column-gap:10px; }
  #contactEmail,#contactWebsite { font-size:16px; }
  .ad-player { margin-inline:-16px; }
}
@media (max-width:1100px) {
  .admin-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .admin-nav { flex-direction:row; overflow:auto; padding:8px 16px; border-inline-end:0; border-block-end:1px solid var(--line); gap:4px; }
  .admin-nav button { white-space:nowrap; padding:8px 12px; }
  .nav-tip { display:none; }
}
@media (max-width:900px) {
  .signage-stage,.signage-stage.sidebar-left { display:flex; flex-direction:column; height:auto; min-height:100dvh; transform:none; }
  .brand-sidebar,.sidebar-left .brand-sidebar { border:0; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(4,auto); padding:56px 24px 20px; gap:28px; }
  .brand-identity { grid-column:1; grid-row:1; }
  .tower-mark { width:190px; max-height:none; }
  .brand-name { font-size:15px; }
  .local-information { grid-column:1; grid-row:2; max-width:580px; justify-self:center; }
  .contact-list { grid-column:1; grid-row:3; width:100%; max-width:580px; justify-self:center; }
  #contactEmail,#contactWebsite { font-size:clamp(16px,3.6cqi,26px); }
  .ad-player { grid-column:1; grid-row:4; height:300px; min-height:0; margin:0; border-radius:6px; }
  .ad-overlay p { font-size:24px; }
  .directory-panel { padding:16px 20px 32px; }
  .directory-header { padding-block-end:20px; align-items:flex-start; }
  h1 { font-size:calc(22px * var(--directory-type-scale,1)); }
  .floors-container { display:block; }
  .floor-block { padding-block:16px; }
  .floor-title { font-size:calc(18px * var(--font-scale) * var(--directory-type-scale)); }
  .floor-columns { gap:20px; }
  .office-row { min-height:40px; grid-template-columns:38px minmax(0,1fr) 40px; }
  .office-emblem { width:32px; }
  .office-name { font-size:calc(13px * var(--font-scale) * var(--directory-type-scale)); }
  .office-num { font-size:calc(15px * var(--font-scale) * var(--directory-type-scale)); }
  .signage-hud,.sidebar-is-left .signage-hud { left:12px; right:12px; max-width:calc(100% - 24px); top:8px; }
  .guard-status { display:none; }
  .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  button { min-height:44px; }
  .brand-sidebar,.sidebar-left .brand-sidebar { padding:56px 20px 20px; }
  .tower-mark { width:170px; }
  .clock-weather { grid-template-columns:64px minmax(0,1.1fr) minmax(0,.9fr); gap:10px; }
  .analog-clock { width:64px; }
  .clock,.temperature { font-size:28px; }
  #ksaClockSeconds,.clock small { font-size:11px; }
  #ksaClockDate,#alAhsaCondition { font-size:12px; }
  .weather { flex-direction:column; gap:4px; text-align:center; }
  #weatherIcon svg { width:28px; }
  .contact-list { gap:18px; }
  .contact-list>div { grid-template-columns:32px minmax(0,1fr); column-gap:12px; }
  #contactEmail,#contactWebsite { font-size:clamp(15px,4.6cqi,22px); }
  .ad-player { grid-column:1; grid-row:4; height:340px; }
  .floor-columns { grid-template-columns:1fr; gap:0; }
  .office-list { gap:4px; }
  .office-list:first-child { order:2; }
  .office-row { min-height:44px; grid-template-columns:48px minmax(0,1fr) 44px; }
  .office-name { font-size:calc(14px * var(--font-scale) * var(--directory-type-scale)); }
  .office-num { font-size:calc(16px * var(--font-scale) * var(--directory-type-scale)); }
  .office-emblem { width:38px; height:28px; }
  .directory-header { gap:12px; }
  h1 { font-size:calc(21px * var(--directory-type-scale,1)); }
  .signage-hud { gap:4px; padding:6px; }
  .signage-hud button { font-size:11px; min-height:36px; padding:4px 7px; }
  dialog,dialog.docked { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .admin-header { padding:12px 16px; align-items:flex-start; }
  .admin-identity img { width:28px; height:28px; }
  .admin-identity { gap:8px; }
  .admin-identity p { font-size:11px; }
  h2 { font-size:16px; }
  .admin-header-actions { gap:6px; }
  .admin-header-actions button { font-size:11px; padding:6px 8px; }
  #toggleDockPreviewBtn { display:none; }
  .admin-header-actions .icon-button { width:36px; }
  .admin-nav { padding:6px 12px; }
  .admin-nav button { font-size:12px; }
  .admin-workspace { padding:16px; }
  .view-heading { margin-block-end:14px; }
  h3 { font-size:20px; }
  .view-heading .muted { display:none; }
  .occupancy-strip { grid-template-columns:1fr 1fr; margin-block-end:14px; }
  .occupancy-strip>div { flex-direction:row; align-items:center; justify-content:space-between; padding:8px 12px; }
  .occupancy-strip strong { font-size:21px; }
  .directory-toolbar { grid-template-columns:1fr 1fr; gap:8px; }
  .directory-toolbar>label:first-child { grid-column:1/-1; }
  input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea { font-size:16px; min-height:44px; }
  .office-editor-row { grid-template-columns:38px minmax(0,1fr) 100px 36px; gap:7px; }
  .office-editor-row input,.office-editor-row select { font-size:13px !important; padding:6px !important; }
  .office-editor-row .office-id { font-size:14px; }
  .office-extra { grid-template-columns:1fr; padding:14px; }
  .floor-actions { width:100%; }
  .floor-actions button { padding:6px 9px; }
  .settings-panel { padding:16px; }
  .admin-footer { padding:10px 16px; gap:12px; }
  .admin-footer button { font-size:12px; padding:8px 12px; flex:none; }
  .theme-presets { grid-template-columns:1fr 1fr; }
  .theme-presets button { font-size:12px; }
  .input-action { flex-wrap:wrap; }
  .input-action input { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; }
}