/* Shared landscape shell for Home, RookX, Community and Profile.
   The existing elements retain their event handlers and accessible names. */
body.rx-landscape-shell {
  --rx-landscape-rail: calc(56px + var(--rx-safe-left));
  --rx-size-topbar: 0px;
  --topbarH: var(--rx-size-topbar);
  /* Anchor the stage in document coordinates. iOS Safari can paint a fixed
     body at the new toolbar height while retaining its old hit-test offset. */
  position: relative;
  inset: 0 0 auto;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  height: 100dvh;
}

body.rx-landscape-shell .topbar {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  width: var(--rx-landscape-rail);
  height: 100dvh;
  min-height: 0;
  padding: max(4px, var(--rx-safe-top)) 4px max(4px, var(--rx-safe-bottom)) max(4px, var(--rx-safe-left));
  border: 0;
  border-right: 1px solid var(--rx-color-border);
  background: var(--rx-color-page);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-y: auto;
}

body.rx-landscape-shell .topbar .brand {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  gap: 0;
}
body.rx-landscape-shell .topbar .brand-mark { width: 32px; height: 32px; }
body.rx-landscape-shell .topbar .brand-copy { display: none; }
body.rx-landscape-shell .topbar :is(.header-avatar, .btn) { max-width: 44px; }
body.rx-landscape-shell .topbar :is(.topbar-right, .topbar-actions) { flex-direction: column; gap: 2px; margin: 0; width: 44px; min-width: 0; align-items: center; }

/* The same available screen belongs to every standalone route. Long documents
   scroll naturally; route workspaces may give their columns separate scrolling. */
body.rx-landscape-content > .rx-landscape-page-stage {
  position: absolute;
  inset: var(--rx-visual-top, var(--rx-size-topbar)) 0 auto var(--rx-landscape-rail, 0px);
  width: auto;
  height: var(--rx-visual-height, calc(100dvh - var(--rx-size-topbar)));
  min-height: 0;
  margin: 0 auto;
  padding: 8px max(var(--rx-page-gutter), var(--rx-safe-right)) max(8px, var(--rx-safe-bottom)) max(var(--rx-page-gutter), var(--rx-safe-left));
  overflow: auto;
  overflow-anchor: none;
}
body.rx-landscape-content > .rx-landscape-page-stage > .main {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  padding-block: 0;
  overflow: auto;
}
body.rx-landscape-content > .rookx-workspace-shell {
  display: grid;
  grid-template-columns: minmax(160px, 25%) minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}
body.rx-landscape-content > .rookx-workspace-shell > .rookx-workspace-rail {
  display: block;
  position: static;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 8px;
  overflow: auto;
}
body.rx-landscape-content > .rookx-workspace-shell > .rookx-workspace-main { padding: 8px; height: 100%; overflow: auto; }
body.rx-landscape-shell :is(input, textarea, [contenteditable="true"]) { scroll-margin-block: 12px; }
html[data-rx-keyboard-open] body.rx-landscape-shell > .topbar { visibility: hidden; }
.rx-keyboard-done:not([hidden]) { position: fixed; top: calc(var(--rx-visual-top, 0px) + 4px); left: max(4px, var(--rx-safe-left)); width: 44px; height: 44px; z-index: var(--rx-layer-modal); padding: 4px; }

body.rx-landscape-content .rookx-legal-footer { display: none; }
body.rx-landscape-shell #mobileLandscapeQuickPlay { display: none; }

body.rx-landscape-shell #modalAuth:not(.hidden) { animation: none; }
/* A landscape keyboard can leave barely 120px. Put the close control beside
   the form so the header cannot consume the field's remaining height. */
body.rx-landscape-shell.rx-landscape-editing #modalAuth {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
body.rx-landscape-shell.rx-landscape-editing #modalAuth > .modal-header {
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 4px 0;
}
body.rx-landscape-shell.rx-landscape-editing #modalAuth > .modal-body { padding: 8px; }

/* Shared sheets stay beside the rail, including while editing. Existing
   focus/close handlers and keyboard measurements remain the owners. */
body.rx-landscape-shell :is(#mobileNavMenu, #notificationsMenu, #dmPanel.chat-overlay-panel, #modalAuth) {
  position: fixed;
  inset: max(8px, var(--rx-visual-top, 0px)) max(8px, var(--rx-safe-right)) max(8px, var(--rx-keyboard-bottom, 0px)) calc(var(--rx-landscape-rail) + 8px);
  width: auto;
  height: auto;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  transform: none;
}