/* Map first, details below. The same page layout serves local and shared editors. */
:root { --header: 76px; --rail: 68px; }
html { scroll-padding-top: calc(var(--header) + 18px); }
body.maproom-flow { overflow: auto; overflow-x: hidden; }
.maproom-flow .app-header { position: sticky; top: 0; z-index: 22; height: var(--header); gap: 22px; }
.maproom-flow .brand { width: auto; font-size: 15px; letter-spacing: .5px; }
.maproom-flow .brand-sub { letter-spacing: 1.5px; }
.maproom-flow .brand { gap: 10px; letter-spacing: 0; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.brand-server { font-size: 15px; font-weight: 750; color: #eef3f7; }
.brand-product { font-size: 13px; font-weight: 500; color: #b7cbd8; letter-spacing: .3px; }
.brand-credit { font-size: 8px; font-weight: 450; color: #7795a7; letter-spacing: .2px; margin-top: 2px; white-space: nowrap; }
.maproom-flow .document-heading { flex: 1; }
.section-nav { display: flex; align-items: center; gap: 4px; }
.section-nav button { color: #91a5b4; padding: 10px 12px; border-radius: 5px; font-size: 11px; }
.section-nav button:hover, .section-nav button[aria-current] { background: #26323d; color: #e5edf3; }
.maproom-flow .workspace { display: block; height: auto; min-width: 0; }
.maproom-flow .viewport-panel { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 28px; height: max(560px, calc(100svh - var(--header) - 42px)); }
.maproom-flow .viewport-toolbar { grid-row: 1 / 3; height: auto; min-height: 0; padding: 12px 6px; flex-direction: column; justify-content: flex-start; gap: 15px; border-right: 1px solid var(--line); border-bottom: 0; overflow-y: auto; overflow-x: hidden; }
.maproom-flow .toolbar-group { width: 100%; flex-direction: column; gap: 5px; }
.maproom-flow .segmented { flex-direction: column; width: 100%; gap: 4px; padding: 3px; }
.maproom-flow .tool { width: 100%; min-height: 34px; justify-content: center; padding: 8px 4px; }
.maproom-flow .tool span { display: none; }
.maproom-flow .tool svg { width: 18px; height: 18px; }
.maproom-flow .toolbar-group .icon-button, .maproom-flow .panel-toggle { display: inline-flex; width: 36px; height: 34px; }
.maproom-flow .toolbar-group .noclip-button { width: 42px; height: 49px; padding: 5px 0; flex-direction: column; gap: 2px; color: #dce8ee; border: 1px solid #4b5e69; background: #26343e; }
.noclip-letter { font-size: 29px; font-weight: 850; line-height: 1; }
.noclip-label { font-size: 6px; letter-spacing: 1px; line-height: 1; }
.maproom-flow .noclip-button.active { color: #231c15; border-color: #ffb384; background: var(--orange); box-shadow: 0 0 0 3px #ff9a6114; }
.noclip-hud { position: absolute; z-index: 3; bottom: 47px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); background: #182a32ed; border: 1px solid #ff9a614d; border-radius: 7px; padding: 11px 14px; pointer-events: none; box-shadow: 0 4px 20px #0002; }
.noclip-hud-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 7px; }
.noclip-hud-heading b { color: var(--orange); font-size: 11px; font-weight: 600; }
.noclip-hud-heading span { font-size: 9px; color: #9eb6c4; font-variant-numeric: tabular-nums; }
.noclip-hud p { font-size: 9px; color: #a5bac7; line-height: 1.8; }
.noclip-hud kbd { font-size: 8px; min-width: 14px; height: 15px; padding: 0 3px; margin: 0 1px; vertical-align: middle; }
.noclip-crosshair { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%); z-index: 2; opacity: .7; pointer-events: none; }
.noclip-crosshair:before, .noclip-crosshair:after { content: ''; position: absolute; background: #cce4e7; box-shadow: 0 0 2px #000; }
.noclip-crosshair:before { top: 6px; left: 0; width: 13px; height: 1px; }
.noclip-crosshair:after { top: 0; left: 6px; height: 13px; width: 1px; }
.noclip-active .navigation-hint { display: none; }
.noclip-active #viewport canvas { cursor: crosshair; }
.maproom-flow #viewport canvas:focus { outline: none; }
.maproom-flow .toolbar-divider { width: 28px; height: 1px; margin: 5px 0; }
.maproom-flow .transform-tools .text-button { justify-content: center; font-size: 10px; min-height: 24px; }
.maproom-flow .snap-group { display: flex; padding-top: 8px; border-top: 1px solid #35414c; }
.maproom-flow .snap-switch { font-size: 9px; gap: 4px; }
.maproom-flow .snap-group select { width: 54px; padding: 5px 13px 5px 3px; font-size: 9px; }
.maproom-flow .history-tools { margin: 0; padding: 9px 0 0; border: 0; border-top: 1px solid #35414c; }
.maproom-flow #collision-toggle { font-size: 8px; line-height: 1.6; padding: 6px 0; max-width: 54px; text-align: center; white-space: normal; }
.maproom-flow .viewport { grid-column: 2; grid-row: 1; min-width: 0; }
.maproom-flow .viewport-status { grid-column: 2; grid-row: 2; height: 28px; min-width: 0; }
.details-jump { min-height: 42px; padding: 8px 22px; display: flex; align-items: center; gap: 22px; border-top: 1px solid #2a3944; border-bottom: 1px solid #2a3944; background: #18232b; }
.details-jump > span { color: #7894a4; font-size: 10px; margin-right: auto; }
.details-jump button { display: inline-flex; align-items: center; gap: 10px; color: #b4c6d2; font-size: 11px; }
.details-jump button:hover { color: var(--orange); }
.details-jump svg { width: 13px; height: 13px; }
.details-deck { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.maproom-flow .outline-panel, .maproom-flow .inspector-panel, .maproom-flow .workspace-panel { position: relative; inset: auto; width: auto; display: flex; min-width: 0; border: 1px solid #303e49; border-radius: 9px; box-shadow: none; z-index: auto; overflow: hidden; scroll-margin-top: calc(var(--header) + 18px); }
.maproom-flow .outline-panel { height: 680px; }
.maproom-flow .inspector-panel { min-height: 680px; }
.maproom-flow .inspector-content { overflow: visible; flex: initial; }
.maproom-flow .inspector-panel:before { display: none; }
.maproom-flow .panel-heading { height: 65px; min-height: 65px; padding: 0 20px; background: #1d2831; }
.panel-title { display: grid; gap: 5px; }
.panel-eyebrow { font-size: 8px; color: #698b9d; letter-spacing: 1.7px; }
.maproom-flow .panel-heading h1, .maproom-flow .panel-heading h2 { font-size: 14px; }
.maproom-flow .search-box { margin: 16px 16px 12px; height: 38px; }
.maproom-flow .search-box input { font-size: 12px; }
.maproom-flow .outline-filters { padding: 0 16px 16px; gap: 6px; }
.maproom-flow .filter { font-size: 11px; padding: 6px 9px; }
.maproom-flow .outline-row { min-height: 39px; padding-left: 12px; }
.maproom-flow .outline-row .row-name { font-size: 12px; line-height: 17px; }
.maproom-flow .outline-row .row-class { font-size: 10px; line-height: 14px; }
.maproom-flow .outline-footer { height: auto; min-height: 44px; flex-wrap: wrap; padding: 8px 16px; gap: 7px; }
.return-map { margin-right: auto; font-size: 11px; color: #bacbd6; padding: 6px 0; }
.panel-return { padding: 10px 20px; border-top: 1px solid var(--line); }
.maproom-flow .inspector-empty { padding: 65px 24px; }
.maproom-flow .inspector-empty p { max-width: 350px; margin: 12px auto 0; font-size: 12px; }
.maproom-flow .selection-heading, .maproom-flow .inspector-section { padding: 20px; }
.maproom-flow .selection-heading h3 { font-size: 16px; }
.maproom-flow .property-field label, .maproom-flow .transform-label { font-size: 11px; }
.maproom-flow .property-field input, .maproom-flow .property-field textarea, .maproom-flow .vector-input input { font-size: 12px; padding: 9px 8px; }
.maproom-flow .properties-section { border-bottom: 0; }
.maproom-flow .app-status { min-height: 32px; height: auto; padding: 10px 22px; }
.maproom-flow .workspace-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0 24px 24px; }
.maproom-flow .workspace-panel > .panel-heading, .maproom-flow .workspace-connection-line { grid-column: 1 / -1; }
.maproom-flow .workspace-panel > .panel-heading { height: 65px; min-height: 65px; }
.maproom-flow .workspace-panel #workspace-close { display: inline-flex; }
.maproom-flow .workspace-people { padding: 24px; border-bottom: 0; border-right: 1px solid #303e49; }
.maproom-flow .workspace-users { max-height: 300px; gap: 15px; }
.maproom-flow .workspace-people h3, .maproom-flow .chat-heading h3 { font-size: 13px; }
.maproom-flow .user-name { font-size: 12px; }
.maproom-flow .user-activity { font-size: 10px; }
.maproom-flow .workspace-chat { height: 460px; }
.maproom-flow .chat-heading { padding: 24px 20px 12px; }
.maproom-flow .chat-text { font-size: 12px; }
.maproom-flow .chat-form { margin: 0 16px 16px; }
.maproom-flow .workspace-scrim { display: none !important; }
@media (max-width: 1100px) {
  .maproom-flow .app-header { gap: 13px; padding: 0 14px; }
  .maproom-flow .brand { font-size: 13px; }
  .maproom-flow .brand-sub { font-size: 7px; }
  .maproom-flow .state-chip, .maproom-flow .file-extension { display: none; }
  .maproom-flow .document-heading #map-name { max-width: 150px; }
  .section-nav button { padding: 10px 8px; font-size: 10px; }
  .maproom-flow .workspace-avatars { display: none; }
}
@media (max-width: 760px) {
  :root { --header: 100px; --rail: 56px; }
  .maproom-flow .app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 55px 45px; gap: 0 12px; padding: 0 12px; }
  .maproom-flow .brand { font-size: 12px; gap: 5px; }
  .maproom-flow .brand-sub { display: none; }
  .brand-copy { gap: 2px; }
  .brand-server { font-size: 13px; }
  .brand-product { font-size: 11px; }
  .brand-credit { font-size: 7px; margin-top: 1px; letter-spacing: 0; }
  .maproom-flow .brand-mark { width: 25px; }
  .maproom-flow .document-heading { margin: 0; font-size: 10px; gap: 5px; }
  .maproom-flow .document-heading #map-name { max-width: 130px; }
  .maproom-flow .header-actions { grid-column: 3; grid-row: 1; }
  .maproom-flow .header-actions .button { width: 34px; min-width: 34px; padding: 7px; }
  .maproom-flow .header-actions .button > span { display: none; }
  .maproom-flow .header-actions .workspace-toggle { width: auto; }
  .maproom-flow .section-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; border-top: 1px solid #2b3943; align-self: stretch; }
  .maproom-flow .section-nav button { font-size: 11px; padding: 7px 22px; }
  .details-deck { padding: 16px; gap: 16px; }
  .maproom-flow .workspace-panel { margin: 0 16px 16px; }
  .maproom-flow .viewport-toolbar { padding: 10px 3px; gap: 12px; }
  .maproom-flow .snap-group select { width: 48px; }
  .details-jump { gap: 15px; padding: 10px 16px; }
  .details-jump > span { display: none; }
  .details-jump button { margin-right: auto; font-size: 10px; }
}
@media (max-width: 620px) {
  .details-deck { grid-template-columns: minmax(0, 1fr); }
  .maproom-flow .outline-panel { height: 540px; }
  .maproom-flow .inspector-panel { min-height: 460px; }
  .maproom-flow .workspace-panel { grid-template-columns: minmax(0, 1fr); }
  .maproom-flow .workspace-people { border-right: 0; border-bottom: 1px solid #303e49; }
  .maproom-flow .workspace-chat { height: 430px; }
  .maproom-flow .viewport-topline { align-items: flex-start; gap: 9px; flex-direction: column; }
  .maproom-flow .viewport-actions { align-self: flex-end; }
  .maproom-flow .viewport-status #camera-status { display: none; }
  .maproom-flow .coordinate-note { display: none; }
  .maproom-flow .header-actions #help-button { display: none; }
  .maproom-flow .document-heading #map-name { max-width: 80px; }
  .maproom-flow .panel-heading { padding: 0 16px; }
  .noclip-hud { bottom: 42px; padding: 10px; }
  .noclip-hud p { font-size: 8px; }
}
@media (max-width: 480px) {
  .maproom-flow .app-header > .brand { grid-column: 1 / 3; }
  .maproom-flow .document-heading { display: none; }
}