/* Our Office. Apex glass look: 16px radius, glass tokens, glow, lime accent. Light and dark themes via the site tokens. */
.office-status,.office-seen,.office-checked,.office-partner{color:var(--muted)}
.office-toolbar{margin:18px 0 0}
[id^=office][hidden],.office-roster [hidden]{display:none!important}
.office-motion-note{color:var(--muted);font-size:.9rem;margin:0}
.office-toolbar button,#officeClose{background:var(--glass,var(--panel));color:var(--ink);border:1px solid var(--glass-line,var(--line));border-radius:16px;min-height:44px;padding:10px 18px;cursor:pointer;font:inherit;font-weight:600}
.office-toolbar button:hover,#officeClose:hover{border-color:var(--lime)}
.office-stats{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 28px}
.office-stats:empty{display:none}
.office-stats li{padding:8px 14px;border:1px solid var(--glass-line,var(--line));border-radius:16px;background:var(--glass,var(--panel));font-size:.92rem}
.office-stats .office-pause{border-color:color-mix(in srgb,var(--lime) 45%,transparent)}

/* roster */
.office-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.office-cards>li{min-width:0;display:grid;gap:10px}
.office-pair{padding:8px;border:1px dashed color-mix(in srgb,var(--lime) 35%,transparent);border-radius:22px}
.office-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:2px;align-content:start;width:100%;min-height:44px;padding:16px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-weight:400;overflow-wrap:anywhere;box-shadow:0 18px 40px -28px rgba(0,0,0,.7)}
.office-card .seat-sprite{grid-row:1 / 3;align-self:start}
.office-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.office-card h3{font-size:1.1rem;margin:0}
.office-chip{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);border-radius:10px;padding:1px 8px;color:var(--muted)}
.office-card p{margin:0;font-size:.9rem;line-height:1.45}
.office-card .office-seen,.office-card .office-checked,.office-card .office-partner{grid-column:1 / -1}
.office-card .office-seen{margin-top:10px}
.office-state{display:flex;align-items:baseline;gap:8px}
.office-toolbar button:focus-visible,#officeClose:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* office1240: the card is a div; the seat button sits in the h3 and its ::after covers the card (click anywhere, one focus stop, ring on the card) */
.office-card-open{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;min-height:24px;overflow-wrap:anywhere}
.office-card-open::after{content:'';position:absolute;inset:0;border-radius:16px}
.office-card-open:focus{outline:none}.office-card-open:focus-visible::after{outline:2px solid var(--lime);outline-offset:2px}
.office-card:hover{border-color:color-mix(in srgb,var(--lime) 40%,var(--glass-line,var(--line)))}
.office-card[data-state=stale],.office-card[data-state=offline],.office-card[data-state=unknown]{box-shadow:none} /* office1240: no opacity on text (4.5:1 in both themes); the greyed sprite carries the state */
.office-card[data-state=stale] .seat-sprite,.office-card[data-state=offline] .seat-sprite,.office-card[data-state=unknown] .seat-sprite,#officeDialogContent[data-state=offline] .seat-sprite,#officeDialogContent[data-state=stale] .seat-sprite,#officeDialogContent[data-state=unknown] .seat-sprite{filter:grayscale(1);opacity:.6}
/* state icon: shape + text, never colour alone */
.state-icon{display:inline-block;flex:0 0 14px;width:14px;height:14px;vertical-align:-2px;color:var(--muted)}
@media(min-width:620px){.office-pair{grid-column:span 2;grid-template-columns:1fr 1fr}.office-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.office-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* floor */
.office-floor{padding:22px;margin:40px 0;min-width:0}
.office-floor.glass:hover{transform:none}
.office-floor h2{margin:0 0 4px}
.office-floor>p{color:var(--muted);font-size:.9rem;margin:0 0 14px}
.office-floor svg{display:block;width:100%;height:auto}
.office-floor>p.office-footnote{font-size:.8rem;margin:8px 0 0}
.office-floor.is-wide>p.office-footnote{margin-left:60%}
.office-break-note{color:var(--muted);font-size:.85rem}
.office-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.scene-label{font:600 13px 'DM Sans',system-ui,sans-serif;fill:var(--muted)}
.room-title{font-size:15px;fill:var(--ink);letter-spacing:.06em}
.plate{font-size:12px;fill:var(--ink)}
.room{fill:color-mix(in srgb,var(--panel) 90%,var(--lime) 3%);stroke:var(--glass-line,var(--line));stroke-width:2}
.tiles{fill:url(#ofTiles);pointer-events:none}
.floor-grid{fill:none;stroke:var(--line);stroke-width:1;opacity:.35}
.prop,.desk,.bar{fill:color-mix(in srgb,var(--panel) 50%,#a07a4f);stroke:color-mix(in srgb,var(--line) 70%,#000)}
.games-table{fill:color-mix(in srgb,var(--panel) 45%,#7a5a3a);stroke:var(--line)}
.board,.paper{fill:color-mix(in srgb,var(--panel) 12%,#f2f5ea);stroke:#8a9480}
.scribble{fill:none;stroke:#3f8f80;stroke-width:2.5;stroke-linecap:round}
.grid-lines{fill:none;stroke:#7f8c99}
.deploy-pad{fill:color-mix(in srgb,var(--lime) 22%,var(--panel));stroke:var(--lime);stroke-width:3;filter:drop-shadow(0 0 8px var(--glow))}
.rocket{fill:var(--lime)}
.screen,.monitor{fill:#2c4a53;stroke:#73808c;stroke-width:3}
.furniture-line{stroke:#8a9480;stroke-width:5}
.chair,.armchair,.couch{fill:#456a70;stroke:#6f8a8f;stroke-width:2}
.cushion{fill:#7e9b89;stroke:#a9c0a9}
.machine{fill:#3a3f44;stroke:#73808c}
.ping-table{fill:#23776b;stroke:#c0dcc8;stroke-width:2}
.table-net{fill:none;stroke:#e8ecdb;stroke-width:2}
.ping-ball{fill:#f6efdc;animation:of-bounce 1.8s ease-in-out infinite}
.chess-dark{fill:#4c5c58}.chess-light{fill:#ded6b9}
.jenga{fill:#d9b98c;stroke:#926c43}
.puzzle{fill:#d9961a;stroke:#f2f5ea}
.dart{fill:#ad5862;stroke:#c7cbbb;stroke-width:4}.dart-inner{fill:#477768;stroke:#ddd9c7;stroke-width:2}
.arcade{fill:#56516c;stroke:#a399c7;stroke-width:2}.arcade-screen{fill:#1aa39a;animation:of-flicker 4s steps(2,end) infinite}
.mug{fill:#f2f5ea}.steam{fill:none;stroke:#c1ccc3;stroke-width:2;animation:of-steam 3s ease-in-out infinite}
.plane{fill:#e8e4d6;stroke:#7f8c99}
.door-gap{stroke:color-mix(in srgb,var(--panel) 90%,var(--lime) 3%);stroke-width:8}
.pair-link{stroke:var(--lime);stroke-width:2;stroke-dasharray:4 4;opacity:.55}
.is-working{fill:#3d6f6a;animation:of-glow 3s ease-in-out infinite}
[data-state=offline] .plate{fill:var(--muted);opacity:1} /* ognav: no opacity on desk-name text (contrast); the Offline floor tag (icon + label) carries the cue */
.platform-badge{fill:var(--panel);stroke:var(--trim);stroke-width:1.2}
.platform-letter{font:700 7px system-ui,sans-serif;fill:var(--ink)}

/* figures: positioned by --x/--y (set from data), walk only via the transition when a real move arrives */
.fig,.seat-sprite{--outline:color-mix(in srgb,var(--ink) 55%,transparent)}
.fig{transform:translate(calc(var(--x,0) * 1px),calc(var(--y,0) * 1px));transition:transform var(--dur,0s) ease-in-out}
.fig.lying .pose{transform:translate(2px,8px) rotate(-90deg);transform-origin:20px 24px}
.fig[data-state=stale] .pose,.fig[data-state=unknown] .pose{filter:grayscale(1);opacity:.5}
.fig.ghost .pose{filter:grayscale(1);opacity:.22}
.sign text{font:700 12px system-ui,sans-serif;fill:var(--ink)}
.off-tag{fill:var(--panel);stroke:var(--muted);stroke-width:1}
.off-icon{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round}
.sign .off-text{font-size:10px;font-weight:700}
.bubble{fill:var(--panel);stroke:var(--muted);stroke-dasharray:2 2}
.attention{fill:#e8a317}.sign .attention-mark{fill:#111;font-size:11px}
.battery{fill:var(--panel);stroke:var(--ink);stroke-width:1.2}.battery-tip{fill:var(--ink)}.battery-fill{fill:var(--lime)}
.sign .zz{font-size:11px;fill:var(--muted)}
.walking .pose{animation:of-step .32s ease-in-out infinite alternate}
.office-floor.is-unknown .room{opacity:.8}

/* dialog */
#officeDialog{box-sizing:border-box;width:calc(100% - 32px);max-width:520px;max-height:90vh;overflow:auto;background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:var(--ink);border:1px solid var(--glass-line,var(--line));border-radius:16px;padding:22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 40px var(--glow)}
#officeDialog::backdrop{background:rgb(0 0 0 / .6);backdrop-filter:blur(4px)}
#officeClose{float:right}
#officeDialogContent{clear:both}
#officeDialogContent h2{margin:8px 0 6px}
#officeDialogContent p{margin:6px 0}
.office-dlg-state{font-weight:600}
.office-where{color:var(--muted)}
.office-how dt{font-weight:600;margin-top:10px}.office-how dd{margin:0 0 4px;color:var(--muted)}

@keyframes of-bounce{50%{transform:translateY(-14px)}}
@keyframes of-steam{50%{opacity:.3;transform:translateY(-5px)}}
@keyframes of-flicker{50%{opacity:.65}}
@keyframes of-glow{50%{fill:#5f9d8f}}
@keyframes of-step{to{transform:translateY(-2px) rotate(2deg)}}
@keyframes of-led{50%{opacity:.25}}
.office-motion-off .office-floor *,.office-floor.is-unknown *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html:not(.office-motion-on) .office-floor *{animation:none!important;transition:none!important}}
.fig,[data-seat]>.desk,[data-seat]>.chair,[data-seat]>.monitor{cursor:pointer}
.office-floor:not(.is-wide) .plate{font-size:18px}
.office-partner-link{background:none;border:0;padding:0 2px;min-height:24px;color:var(--lime);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.office-partner-link:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}
.office-floor:not(.is-wide) .scene-label{font-size:17px}.office-floor:not(.is-wide) .plate{font-size:18px}.office-floor:not(.is-wide) .room-title{font-size:20px}

/* office1240: floor legend (same marks as the floor signs) */
.office-legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0 0 14px;font-size:.85rem;color:var(--muted)}
.office-legend li{display:inline-flex;align-items:center;gap:6px}
.office-floor .office-legend svg{flex:none;display:inline-block;width:20px;height:20px}.office-floor .office-legend svg.legend-wide{width:24px}
.office-legend .legend-mark{font:700 12px system-ui,sans-serif;fill:var(--ink)}.office-legend .attention-mark{fill:#111;font-size:11px}
.off-tag.new-tag{stroke-dasharray:3 2}
/* office1240: light appearance (site tokens switch via theme.js); softer shadows and backdrop, same glass look, 16px radius, glow, lime accent */
:root[data-theme=light] .office-card{box-shadow:0 18px 40px -30px rgba(24,42,64,.35)}
:root[data-theme=light] .office-card[data-state=stale],:root[data-theme=light] .office-card[data-state=offline],:root[data-theme=light] .office-card[data-state=unknown]{box-shadow:none}
:root[data-theme=light] #officeDialog{box-shadow:0 30px 70px -30px rgba(24,42,64,.45),0 0 40px var(--glow)}
:root[data-theme=light] #officeDialog::backdrop{background:rgb(24 42 64 / .35)}
:root[data-theme=light] .room{fill:color-mix(in srgb,var(--panel) 92%,var(--lime) 4%)}
:root[data-theme=light] .floor-grid{opacity:.5}
:root[data-theme=light] .prop,:root[data-theme=light] .desk,:root[data-theme=light] .bar{fill:color-mix(in srgb,var(--panel) 35%,#a07a4f);stroke:#8a6a45}
:root[data-theme=light] .door-gap{stroke:color-mix(in srgb,var(--panel) 92%,var(--lime) 4%)}