/* Continuum mobile system
 * One responsive contract for the Web workspace, public pages and demo overlays.
 * Portrait phones use a compact five-action dock and bottom sheets. Short
 * landscape phones use a side rail and right-hand inspectors so the working
 * canvas keeps its height. Route CSS owns content; this file owns the viewport.
 */

:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-height: 58px;
  --mobile-nav-gap: 8px;
  --mobile-nav-reserve: calc(var(--mobile-nav-height) + var(--mobile-nav-gap) * 2 + var(--mobile-safe-bottom));
  --mobile-sheet-radius: 20px;
  --mobile-layer-sticky: 100;
  --mobile-layer-dock: 1300;
  --mobile-layer-sheet: 1500;
  --mobile-layer-modal: 1700;
  --mobile-layer-tour: 1900;
  --mobile-layer-toast: 2100;
}

:where(.toast, [role="status"].toast) {
  pointer-events: none !important;
}

html {
  min-width: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0 !important;
  overscroll-behavior-x: none;
}

img,
video,
iframe {
  max-width: 100%;
}

button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

.mobile-more-trigger {
  display: none;
}

body > .mobile-more-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--mobile-layer-modal) !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px max(8px, var(--mobile-safe-right)) max(8px, var(--mobile-safe-bottom)) max(8px, var(--mobile-safe-left));
  border: 0;
  background: rgba(2, 5, 10, 0.72);
  color: #f5f7fb;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
}

.mobile-more-dialog:not([open]) {
  display: none !important;
}

.mobile-more-dialog[open] {
  display: grid;
  align-items: end;
}

.mobile-more-dialog::backdrop {
  background: rgba(2, 5, 10, 0.72);
  backdrop-filter: blur(12px);
}

.mobile-more-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-height: min(82dvh, calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px));
  overflow: hidden;
  border: 1px solid rgba(151, 166, 191, 0.24);
  border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 14px 14px;
  background: linear-gradient(180deg, rgba(23, 29, 40, 0.995), rgba(7, 10, 16, 0.995));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.mobile-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid rgba(151, 166, 191, 0.16);
}

.mobile-more-header > div {
  display: grid;
  gap: 4px;
}

.mobile-more-header span {
  color: #9fe9f2;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-more-header h2 {
  margin: 0;
  color: #f5f7fb;
  font-size: 1rem;
}

.mobile-more-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(151, 166, 191, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #f5f7fb;
  font: 700 1.35rem/1 system-ui, sans-serif;
}

.mobile-more-links {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px calc(12px + var(--mobile-safe-bottom));
  scrollbar-gutter: stable;
}

.mobile-more-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(151, 166, 191, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(242, 247, 253, 0.82);
  font-size: 0.84rem;
  font-weight: 760;
  text-decoration: none;
}

.mobile-more-link.is-active {
  border-color: rgba(82, 215, 239, 0.46);
  background: rgba(82, 215, 239, 0.12);
  color: #c7f7ff;
}

body.mobile-overlay-open {
  overflow: hidden !important;
}

body.auth-password-open {
  overflow: hidden !important;
}

body.mobile-ticket-drawer-open {
  overflow: hidden !important;
}

body.project-chat-modal-open {
  overflow: hidden !important;
}

body.gantt-drawer-modal-open {
  overflow: hidden !important;
}

.detail-drawer[aria-modal="true"] {
  box-shadow: 0 0 0 100vmax rgba(3, 6, 10, 0.62), 0 24px 80px rgba(0, 0, 0, 0.56) !important;
}

body > .auth-password-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--mobile-layer-modal) !important;
  display: grid;
  place-items: center;
  padding: max(12px, var(--mobile-safe-top)) max(12px, var(--mobile-safe-right)) max(12px, var(--mobile-safe-bottom)) max(12px, var(--mobile-safe-left));
  background: rgba(2, 5, 10, 0.74);
  box-sizing: border-box;
  backdrop-filter: blur(12px);
}

body > .auth-password-modal[hidden] {
  display: none !important;
}

.auth-password-panel {
  width: min(430px, 100%);
  max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border: 1px solid rgba(151, 166, 191, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 29, 40, 0.995), rgba(7, 10, 16, 0.995));
  color: #f5f7fb;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.auth-password-icon-btn,
.auth-password-secondary-btn,
.auth-password-primary-btn {
  min-height: 44px;
}

body > .command-palette {
  z-index: var(--mobile-layer-modal) !important;
}

body > .command-palette .command-panel {
  max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body > .card-archive-confirm {
  position: fixed !important;
  z-index: var(--mobile-layer-modal) !important;
}

@media (max-width: 900px) {
  body[data-background="space"]:not([data-view="map"]) {
    padding-right: max(8px, var(--mobile-safe-right)) !important;
    padding-left: max(8px, var(--mobile-safe-left)) !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  :where(.btn, .control-button, .icon-button, .workspace-surface-link, .workspace-scope-select,
    .auth-settings-btn, .auth-password-btn, .auth-logout-btn, .project-tab,
    .map-launcher-button, .map-flyout-close, .notes-mobile-dock-main,
    .notes-mobile-parent-btn, .repository-tab, .requirements-view-tab,
    .continuity-button, .operator-button, .site-button, .project-chat-icon-btn,
    .segmented-control button, .time-graph-viewport-tools button,
    .continuum-demo-assistant-header button, .continuum-demo-button) {
    min-height: 44px;
  }

  :where(.project-chat-icon-btn, .map-flyout-close, .continuum-demo-assistant-header button) {
    min-width: 44px;
  }

  .time-graph-viewport-tools input[type="date"] {
    min-height: 44px !important;
  }

  dialog[open]:not(.mobile-more-dialog) {
    max-width: calc(100vw - var(--mobile-safe-left) - var(--mobile-safe-right) - 16px);
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  dialog[open]:not(.mobile-more-dialog) > :where(form, section, article, div):first-child {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(.table-wrap, .settings-table-wrap, .inventory-table-wrap, .repository-code-viewport,
    .requirements-table-wrap, .operator-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-strip-shell {
    padding-top: var(--mobile-safe-top) !important;
  }

  .site-header,
  .operator-bar,
  body > .app-header {
    padding-top: max(10px, var(--mobile-safe-top)) !important;
    padding-right: max(12px, var(--mobile-safe-right)) !important;
    padding-left: max(12px, var(--mobile-safe-left)) !important;
  }

  .workspace-strip {
    max-width: 100%;
  }

  .workspace-app-mark {
    flex: 0 0 auto;
  }

  .workspace-scope-group,
  .workspace-surface-nav,
  .workspace-strip-actions {
    scrollbar-width: none;
  }

  .workspace-scope-group::-webkit-scrollbar,
  .workspace-surface-nav::-webkit-scrollbar,
  .workspace-strip-actions::-webkit-scrollbar {
    display: none;
  }

  /* Remove portrait-sized minimums from full-height workspaces. */
  .requirements-workspace,
  .project-chat-workspace,
  .project-chat-conversation {
    min-height: 0 !important;
  }

  .requirements-index {
    max-height: min(44dvh, 430px) !important;
  }

  .repositories-rail {
    max-height: min(40dvh, 360px) !important;
    overflow-y: auto;
  }

  .continuity-index {
    grid-row: 1 !important;
    order: 1;
  }

  .continuity-editor {
    grid-row: 2 !important;
    order: 2;
  }

  .continuity-inspector {
    grid-row: 3 !important;
    order: 3;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .ticket-drawer.ticket-drawer-docked {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--mobile-layer-sheet) !important;
    display: none;
    width: auto !important;
    padding: 10px !important;
    overflow: auto !important;
    background: rgba(3, 6, 12, 0.62) !important;
    pointer-events: auto !important;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .ticket-drawer.ticket-drawer-docked[data-open="true"] {
    display: block !important;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .ticket-drawer.ticket-drawer-docked .ticket-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .ticket-drawer.ticket-drawer-docked .ticket-drawer-panel {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: min(100%, 620px) !important;
    height: auto !important;
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 20px) !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    pointer-events: auto !important;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .drawer-window-grip,
  body:is([data-view="board"], [data-view="time-graph"]) .drawer-window-resize {
    display: none !important;
  }

  body:is([data-view="board"], [data-view="time-graph"]) .ticket-drawer .drawer-header {
    top: auto !important;
    margin: 0 0 10px !important;
    padding: 10px 0 !important;
    cursor: default !important;
    touch-action: auto !important;
  }

  .settings-sidebar,
  .access-rail,
  .shell-rail {
    max-height: min(42dvh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body[data-view="notes"] .notes-toolbar-shell {
    display: block;
  }

  body[data-view="notes"] .notes-toolbar-shell .workspace-toolbar-copy {
    display: none !important;
  }

  body[data-view="notes"] .notes-toolbar-search {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    flex: none;
  }

  body[data-view="notes"] .notes-vault-head {
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
  }

  body[data-view="board"] .board-command-actions {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  body[data-view="board"] .board-command-actions > * {
    min-width: 0;
    max-width: none;
  }

  .inventory-item-dialog,
  .inventory-location-dialog,
  .inventory-label-dialog,
  .repository-dialog,
  .continuity-dialog,
  .notes-create-dialog,
  .operator-dialog {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px) !important;
  }

  .login-page {
    min-height: var(--mobile-visual-height, 100dvh) !important;
    padding: max(16px, var(--mobile-safe-top)) max(14px, var(--mobile-safe-right)) max(16px, var(--mobile-safe-bottom)) max(14px, var(--mobile-safe-left)) !important;
  }

  .login-shell {
    width: min(100%, 520px);
    margin: auto;
  }

  .site-nav[aria-expanded="true"],
  .site-nav.is-open {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(16px, var(--mobile-safe-bottom));
  }

  .operator-dialog :where(button, input, select),
  .operator-account-actions button {
    min-height: 44px;
  }

  .toast,
  [role="status"].toast {
    z-index: var(--mobile-layer-toast) !important;
  }
}

@media (max-width: 980px), (pointer: coarse) {
  body[data-view="time-graph"] .mobile-rank-actions {
    display: inline-flex !important;
    flex: 0 0 auto;
    gap: 4px;
  }

  body[data-view="time-graph"] .mobile-rank-actions button {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(103, 121, 136, 0.3);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.86);
    color: #243340;
    font-weight: 850;
  }

  body[data-view="time-graph"] .row-move {
    display: none !important;
  }

  body[data-view="time-graph"] .ranked-queue-list {
    overflow-x: visible !important;
  }

  body[data-view="time-graph"] .ranked-queue-item {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 62px;
    gap: 6px 8px;
    padding: 6px 8px;
    cursor: default;
  }

  body[data-view="time-graph"] .ranked-queue-item > .mobile-rank-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  body[data-view="time-graph"] .ranked-queue-item > .queue-meta,
  body[data-view="time-graph"] .ranked-queue-item > .queue-badge.is-actor,
  body[data-view="time-graph"] .ranked-queue-item > .queue-badge.is-plan {
    display: none !important;
  }

  body[data-view="time-graph"] .ranked-queue-item > .queue-badge:not(.is-actor):not(.is-plan) {
    grid-column: 2;
    justify-self: start;
  }
}

/* Phone portrait: five predictable actions, one row, one scroll owner. */
@media (max-width: 640px) and (orientation: portrait) {
  body.mobile-shell-page {
    padding-bottom: var(--mobile-nav-reserve) !important;
    scroll-padding-bottom: var(--mobile-nav-reserve);
  }

  .workspace-strip-shell {
    position: relative !important;
    z-index: var(--mobile-layer-sticky) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .workspace-strip {
    gap: 7px !important;
    padding: 8px 10px 9px !important;
  }

  .workspace-app-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .workspace-app-copy small,
  .workspace-context-trail,
  .workspace-view-label,
  .workspace-status-pill,
  .workspace-command-key,
  .workspace-strip-actions > .auth-shell {
    display: none !important;
  }

  .workspace-scope-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .workspace-scope-picker {
    display: block !important;
    min-width: 0;
    padding: 0 !important;
  }

  .workspace-scope-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .workspace-scope-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding-inline: 10px !important;
  }

  .workspace-strip-actions {
    display: block !important;
    min-height: 0;
  }

  /* A filtered ancestor becomes the containing block for fixed descendants in
     WebKit and Chromium. Keep the shared navigation rail viewport-anchored. */
  body:not([data-view="map"]) .workspace-strip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not([data-view="map"]) .workspace-surface-nav.mobile-system-nav {
    position: fixed !important;
    right: max(var(--mobile-nav-gap), var(--mobile-safe-right)) !important;
    bottom: max(var(--mobile-nav-gap), var(--mobile-safe-bottom)) !important;
    left: max(var(--mobile-nav-gap), var(--mobile-safe-left)) !important;
    z-index: var(--mobile-layer-dock) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: auto !important;
    height: var(--mobile-nav-height) !important;
    padding: 6px !important;
    border: 1px solid rgba(151, 166, 191, 0.22) !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg, rgba(22, 27, 37, 0.985), rgba(7, 10, 16, 0.985)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48) !important;
    overflow: hidden !important;
    isolation: isolate;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-system-nav > .workspace-surface-link {
    order: var(--mobile-nav-order, 20);
  }

  .mobile-system-nav > .workspace-surface-link:not([data-mobile-primary="true"]):not(.mobile-more-trigger) {
    display: none !important;
  }

  .mobile-system-nav > .workspace-surface-link[data-mobile-primary="true"],
  .mobile-system-nav > .mobile-more-trigger:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent;
    color: rgba(242, 247, 253, 0.68);
    font: 800 clamp(0.57rem, 2.35vw, 0.68rem)/1.05 "Sora", system-ui, sans-serif !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    overflow: hidden;
  }

  .mobile-system-nav > .workspace-surface-link.is-active,
  .mobile-system-nav > .mobile-more-trigger.is-active {
    background: rgba(82, 215, 239, 0.13) !important;
    color: #c7f7ff !important;
  }

  .mobile-system-nav > .workspace-surface-link.is-active::after,
  .mobile-system-nav > .mobile-more-trigger.is-active::after {
    display: none !important;
  }

  body[data-view="map"] .workspace-surface-nav {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-view="board"] .board-command-card {
    order: -4 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="board"] .board-command-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="board"] .board-command-actions > *,
  body[data-view="board"] .board-command-actions #refreshBoardBtn {
    grid-column: auto !important;
    width: 100% !important;
  }

  body[data-view="board"] .board-mobile-lane-switcher {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body[data-view="board"] .board-mobile-lane-switcher::-webkit-scrollbar {
    display: none;
  }

  body[data-view="board"] .board-mobile-lane-tab {
    flex: 0 0 min(142px, 42vw);
    min-height: 44px !important;
    scroll-snap-align: start;
  }

  body[data-view="board"] .ticket-drawer.ticket-drawer-docked .ticket-drawer-panel {
    position: absolute !important;
    top: auto !important;
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: max(8px, var(--mobile-safe-left)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(86dvh, calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px)) !important;
    margin: 0 !important;
    border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 14px 14px !important;
    overscroll-behavior: contain;
  }

  body[data-view="board"]:has(.ticket-drawer[data-open="true"]) .mobile-system-nav,
  body:has(.detail-drawer:not([hidden])) .mobile-system-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  body[data-view="notes"] .notes-mobile-dock {
    bottom: calc(var(--mobile-nav-reserve) + 4px) !important;
    left: max(10px, var(--mobile-safe-left)) !important;
  }

  body[data-view="notes"] .notes-rail {
    top: max(8px, var(--mobile-safe-top)) !important;
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: max(8px, var(--mobile-safe-left)) !important;
    height: auto !important;
    max-height: none !important;
  }

  .detail-drawer:not([hidden]) {
    top: auto !important;
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: max(8px, var(--mobile-safe-left)) !important;
    width: auto !important;
    max-height: min(86dvh, calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px)) !important;
    margin: 0 !important;
    border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 14px 14px !important;
    z-index: var(--mobile-layer-sheet) !important;
    overscroll-behavior: contain;
  }

  body[data-view="time-graph"] {
    --left-width: min(54vw, 216px);
    --timeline-width: 900px;
  }

  body[data-view="time-graph"] .workbench {
    min-height: 0 !important;
  }

  body[data-view="time-graph"] .workbench-header {
    gap: 6px !important;
    padding: 10px 8px 0 !important;
  }

  body[data-view="time-graph"] .title-block {
    padding-bottom: 4px;
  }

  body[data-view="time-graph"] .context-line,
  body[data-view="time-graph"] .state-pill {
    display: none !important;
  }

  body[data-view="time-graph"] .project-tabs,
  body[data-view="time-graph"] .toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-view="time-graph"] .toolbar {
    padding: 6px 8px !important;
  }

  body[data-view="time-graph"] .gantt-card {
    height: min(54dvh, 500px);
    margin: 8px 8px 0 !important;
  }

  body[data-view="time-graph"] .gantt-scroll {
    height: 100%;
    max-height: 100%;
    overscroll-behavior: contain;
  }

  body[data-view="time-graph"] .unscheduled-tray,
  body[data-view="time-graph"] .ranked-queue {
    margin-right: 8px !important;
    margin-left: 8px !important;
  }

  .map-launcher,
  .map-actions-dock {
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: max(8px, var(--mobile-safe-left)) !important;
    transform: none !important;
  }

  .map-launcher-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .toast,
  [role="status"].toast {
    right: max(10px, var(--mobile-safe-right)) !important;
    bottom: calc(var(--mobile-nav-reserve) + 10px) !important;
    left: max(10px, var(--mobile-safe-left)) !important;
    max-width: none !important;
    visibility: hidden;
    transform: translateY(120%) !important;
  }

  .toast[data-show="true"],
  [role="status"].toast[data-show="true"],
  .toast.is-visible,
  [role="status"].toast.is-visible {
    visibility: visible;
    transform: translateY(0) !important;
  }

  body[data-view="map"] .toast,
  body:not(.mobile-shell-page) .toast {
    bottom: calc(66px + var(--mobile-safe-bottom)) !important;
  }

  .requirements-workspace {
    min-height: 0 !important;
  }

  .requirements-index {
    height: min(42dvh, 390px) !important;
  }

  .project-chat-shell {
    padding-bottom: 0 !important;
  }

  .project-chat-workspace,
  .project-chat-conversation {
    min-height: min(620px, calc(var(--mobile-visual-height, 100dvh) - 128px)) !important;
  }

  .project-chat-rail {
    bottom: var(--mobile-nav-reserve) !important;
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-nav-reserve) - var(--mobile-safe-top) - 8px) !important;
  }

  .repository-dialog-panel,
  .inventory-item-dialog-panel,
  .inventory-location-dialog-panel,
  .inventory-label-dialog-panel {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 18px) !important;
    overflow-y: auto !important;
  }

  .site-hero-visual,
  .site-workflow-visual,
  .site-benchmark-visual,
  .logo-stage {
    min-height: min(72vw, 430px) !important;
  }

  main.poc-shell > .canvas-panel {
    height: min(62dvh, 540px) !important;
    min-height: min(62dvh, 540px) !important;
    max-height: 540px !important;
    overflow: auto;
  }
}

/* Short phone landscape: a five-action side rail and width-aware side sheets. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  :root {
    --mobile-nav-height: 64px;
    --mobile-nav-reserve: calc(72px + var(--mobile-safe-left));
  }

  body.mobile-shell-page:not([data-view="map"]) {
    padding-top: max(6px, var(--mobile-safe-top)) !important;
    padding-right: max(8px, var(--mobile-safe-right)) !important;
    padding-bottom: max(6px, var(--mobile-safe-bottom)) !important;
    padding-left: calc(76px + var(--mobile-safe-left)) !important;
    scroll-padding-left: calc(76px + var(--mobile-safe-left));
  }

  .workspace-strip-shell {
    padding: 0 !important;
  }

  .workspace-strip {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "brand scope" "actions actions" !important;
    gap: 6px 10px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
  }

  .workspace-app-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .workspace-app-copy small,
  .workspace-context-trail,
  .workspace-view-label,
  .workspace-status-pill,
  .workspace-command-key,
  .workspace-strip-actions > .auth-shell {
    display: none !important;
  }

  .workspace-shell-center {
    width: 100% !important;
  }

  .workspace-scope-group {
    display: flex !important;
    gap: 6px !important;
    width: 100%;
    overflow-x: auto;
  }

  .workspace-scope-picker {
    flex: 1 1 150px;
    padding: 0 !important;
  }

  .workspace-scope-label {
    display: none;
  }

  .workspace-scope-select {
    width: 100% !important;
    min-width: 120px !important;
    min-height: 38px !important;
    max-width: none !important;
  }

  .workspace-strip-actions {
    display: block !important;
    min-height: 0;
  }

  body:not([data-view="map"]) .workspace-strip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body:not([data-view="map"]) .workspace-surface-nav.mobile-system-nav {
    position: fixed !important;
    top: max(8px, var(--mobile-safe-top)) !important;
    right: auto !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: max(8px, var(--mobile-safe-left)) !important;
    z-index: var(--mobile-layer-dock) !important;
    display: grid !important;
    grid-template-rows: repeat(5, minmax(44px, 1fr)) !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    width: 60px !important;
    height: auto !important;
    padding: 6px !important;
    border: 1px solid rgba(151, 166, 191, 0.22) !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg, rgba(22, 27, 37, 0.985), rgba(7, 10, 16, 0.985)) !important;
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.42) !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
  }

  .mobile-system-nav > .workspace-surface-link {
    order: var(--mobile-nav-order, 20);
  }

  .mobile-system-nav > .workspace-surface-link:not([data-mobile-primary="true"]):not(.mobile-more-trigger) {
    display: none !important;
  }

  .mobile-system-nav > .workspace-surface-link[data-mobile-primary="true"],
  .mobile-system-nav > .mobile-more-trigger:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 2px !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: rgba(242, 247, 253, 0.7);
    font: 820 0.58rem/1.05 "Sora", system-ui, sans-serif !important;
    text-align: center;
    white-space: normal !important;
  }

  .mobile-system-nav > .workspace-surface-link.is-active,
  .mobile-system-nav > .mobile-more-trigger.is-active {
    background: rgba(82, 215, 239, 0.13) !important;
    color: #c7f7ff !important;
  }

  .mobile-system-nav > .workspace-surface-link.is-active::after,
  .mobile-system-nav > .mobile-more-trigger.is-active::after {
    display: none !important;
  }

  .mobile-more-dialog[open] {
    align-items: stretch;
    justify-items: end;
    padding-top: max(8px, var(--mobile-safe-top));
  }

  .mobile-more-sheet {
    width: min(430px, calc(100vw - 88px - var(--mobile-safe-left) - var(--mobile-safe-right)));
    height: 100%;
    max-height: none;
    border-radius: var(--mobile-sheet-radius) 14px 14px var(--mobile-sheet-radius);
  }

  .mobile-more-header {
    min-height: 58px;
    padding-block: 7px;
  }

  body[data-view="board"] .board-command-card {
    order: -4 !important;
  }

  body[data-view="board"] .board-mobile-lane-switcher {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    padding: 4px !important;
  }

  body[data-view="board"] .board-mobile-lane-tab {
    flex: 0 0 132px;
    min-height: 40px !important;
  }

  body[data-view="board"] .ticket-drawer.ticket-drawer-docked .ticket-drawer-panel,
  .detail-drawer:not([hidden]) {
    position: fixed !important;
    top: max(8px, var(--mobile-safe-top)) !important;
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: auto !important;
    width: min(46vw, 520px) !important;
    max-width: calc(100vw - 96px - var(--mobile-safe-left) - var(--mobile-safe-right)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    border-radius: var(--mobile-sheet-radius) !important;
    z-index: var(--mobile-layer-sheet) !important;
    overscroll-behavior: contain;
  }

  .detail-drawer .drawer-grip,
  .detail-drawer .drawer-resize-handle {
    display: none !important;
  }

  body[data-view="time-graph"] {
    --left-width: min(28vw, 210px);
    --timeline-width: 1100px;
  }

  body[data-view="time-graph"] .workbench {
    min-height: 0 !important;
  }

  body[data-view="time-graph"] .workbench-header,
  body[data-view="time-graph"] .sticky-chart-header {
    display: none !important;
  }

  body[data-view="time-graph"] .planning-header {
    position: sticky !important;
    top: 0;
    max-height: 54px;
    overflow: hidden;
  }

  body[data-view="time-graph"] .toolbar {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-height: 48px;
    padding: 5px 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-view="time-graph"] .toolbar-group {
    flex-wrap: nowrap !important;
  }

  body[data-view="time-graph"] .gantt-card {
    height: calc(var(--mobile-visual-height, 100dvh) - 118px);
    min-height: 210px;
    margin: 6px 6px 0 !important;
  }

  body[data-view="time-graph"] .gantt-scroll {
    height: 100%;
    max-height: 100%;
    overscroll-behavior: contain;
  }

  body[data-view="time-graph"] .unscheduled-tray,
  body[data-view="time-graph"] .ranked-queue {
    margin-right: 6px !important;
    margin-left: 6px !important;
  }

  body[data-view="notes"] .notes-rail {
    top: max(8px, var(--mobile-safe-top)) !important;
    right: auto !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: calc(76px + var(--mobile-safe-left)) !important;
    width: min(330px, 40vw) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: var(--mobile-sheet-radius) !important;
  }

  body[data-view="notes"] .notes-mobile-dock {
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: calc(84px + var(--mobile-safe-left)) !important;
  }

  .requirements-workspace {
    display: grid !important;
    grid-template-columns: minmax(230px, 34vw) minmax(0, 1fr) !important;
    min-height: calc(var(--mobile-visual-height, 100dvh) - 86px) !important;
    max-height: calc(var(--mobile-visual-height, 100dvh) - 86px);
    overflow: hidden !important;
  }

  .requirements-workspace:has(.requirements-workspace-splitter) {
    grid-template-columns: minmax(230px, 34vw) minmax(0, 1fr) !important;
  }

  .requirements-workspace-splitter {
    display: none !important;
  }

  .requirements-index,
  .requirements-detail {
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .requirements-index {
    border-right: 1px solid rgba(135, 159, 190, 0.16) !important;
    border-bottom: 0 !important;
  }

  .project-chat-workspace {
    display: grid !important;
    grid-template-columns: minmax(190px, 27vw) minmax(0, 1fr) !important;
    min-height: calc(var(--mobile-visual-height, 100dvh) - 88px) !important;
    height: calc(var(--mobile-visual-height, 100dvh) - 88px) !important;
  }

  .project-chat-conversation {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .project-chat-conversation-head {
    min-height: 0 !important;
    padding: 7px 10px !important;
  }

  .project-chat-conversation-head .muted,
  .project-chat-composer > label,
  .project-chat-composer footer > span,
  .project-chat-attachment-tools > span {
    display: none !important;
  }

  .project-chat-message-log {
    min-height: 0 !important;
    padding: 2px 10px 8px !important;
  }

  .project-chat-composer {
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  .project-chat-composer textarea {
    min-height: 44px !important;
    max-height: 76px !important;
    resize: none !important;
  }

  .project-chat-composer footer {
    justify-content: flex-end !important;
  }

  #chatCloseChannels {
    display: none !important;
  }

  #chatChannelRail.project-chat-rail {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #chatContextRail.project-chat-rail {
    top: max(8px, var(--mobile-safe-top)) !important;
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: auto !important;
    width: min(390px, 44vw) !important;
    max-height: none !important;
    border-radius: var(--mobile-sheet-radius) !important;
  }

  .repositories-layout {
    grid-template-columns: minmax(190px, 28vw) minmax(0, 1fr) !important;
  }

  .repositories-rail {
    max-height: calc(var(--mobile-visual-height, 100dvh) - 92px) !important;
  }

  .continuity-workspace {
    grid-template-columns: minmax(210px, 30vw) minmax(0, 1fr) !important;
  }

  .continuity-index {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    max-height: calc(var(--mobile-visual-height, 100dvh) - 92px);
  }

  .continuity-editor {
    grid-row: 1 !important;
    grid-column: 2 !important;
  }

  .continuity-inspector {
    grid-row: 2 !important;
    grid-column: 2 !important;
  }

  .settings-shell,
  .access-shell {
    grid-template-columns: minmax(190px, 28vw) minmax(0, 1fr) !important;
    align-items: start;
  }

  .settings-sidebar,
  .access-rail,
  .shell-rail {
    max-height: calc(var(--mobile-visual-height, 100dvh) - 92px) !important;
  }

  body > .app-header {
    position: sticky !important;
    top: 0;
    z-index: var(--mobile-layer-sticky) !important;
    min-height: 60px !important;
    max-height: 64px;
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    padding-top: max(6px, var(--mobile-safe-top)) !important;
    padding-right: max(10px, var(--mobile-safe-right)) !important;
    padding-left: max(10px, var(--mobile-safe-left)) !important;
  }

  body > .app-header .brand-block {
    gap: 9px;
  }

  body > .app-header .brand-block h1 {
    font-size: 0.94rem;
  }

  body > .app-header .brand-block p,
  body > .app-header .inventory-context small {
    display: none;
  }

  body > .app-header .header-actions {
    width: auto !important;
    flex-wrap: nowrap !important;
    margin-left: auto;
  }

  body > .app-header .status-chip,
  body > .app-header .inventory-context {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  main.poc-shell {
    grid-template-columns: 64px minmax(180px, 22vw) minmax(300px, 1fr) minmax(190px, 23vw) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: calc(var(--mobile-visual-height, 100dvh) - 64px) !important;
    min-height: 0 !important;
    align-items: stretch;
    overflow: hidden;
  }

  main.poc-shell .pane-resizer {
    display: none !important;
  }

  main.poc-shell[data-mode="preview"] {
    grid-template-columns: 64px minmax(300px, 1fr) minmax(190px, 23vw) !important;
  }

  main.poc-shell[data-mode="preview"] > .canvas-panel {
    grid-column: 2 !important;
  }

  main.poc-shell[data-mode="preview"] > .right-panel {
    grid-column: 3 !important;
  }

  main.poc-shell[data-mode="storage"] {
    grid-template-columns: 64px minmax(180px, 25vw) minmax(300px, 1fr) !important;
  }

  main.poc-shell[data-mode="storage"] > .canvas-panel {
    grid-column: 3 !important;
  }

  main.poc-shell > .mode-rail {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0 !important;
  }

  main.poc-shell > .mode-rail .mode-button {
    width: 100% !important;
    min-height: 54px !important;
  }

  main.poc-shell > .left-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100%;
    overflow-y: auto;
  }

  main.poc-shell > .canvas-panel {
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto;
  }

  main.poc-shell > .right-panel {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: grid;
    height: 100%;
    overflow-y: auto;
  }

  .map-flyout {
    top: max(8px, var(--mobile-safe-top)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    max-height: none !important;
  }

  .map-launcher,
  .map-actions-dock {
    right: max(8px, var(--mobile-safe-right)) !important;
    bottom: max(8px, var(--mobile-safe-bottom)) !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
  }

  .toast,
  [role="status"].toast {
    right: max(10px, var(--mobile-safe-right)) !important;
    bottom: max(10px, var(--mobile-safe-bottom)) !important;
    left: calc(84px + var(--mobile-safe-left)) !important;
    max-width: min(520px, calc(100vw - 104px - var(--mobile-safe-left) - var(--mobile-safe-right))) !important;
    transform: translateY(120%) !important;
  }

  .toast[data-show="true"],
  [role="status"].toast[data-show="true"],
  .toast.is-visible,
  [role="status"].toast.is-visible {
    transform: translateY(0) !important;
  }

  .login-page {
    align-items: start !important;
    overflow-y: auto;
    padding-block: max(8px, var(--mobile-safe-top)) max(8px, var(--mobile-safe-bottom)) !important;
  }

  .login-shell {
    margin-block: auto;
  }

  .login-panel {
    max-height: calc(var(--mobile-visual-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-hero,
  .hero,
  .site-section,
  .download-grid {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .site-hero,
  .hero {
    min-height: 0 !important;
  }

  .site-hero-copy,
  .hero-copy {
    gap: 12px !important;
  }

  .site-hero h1,
  .home-hero h1,
  .page-hero h1 {
    font-size: clamp(2.4rem, 12vh, 3.2rem) !important;
    line-height: 0.94 !important;
  }

  .site-hero .lede,
  .home-hero .lede,
  .page-hero .lede {
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
  }

  .site-hero-status,
  .home-hero .status-line {
    display: none !important;
  }

  .site-hero-visual,
  .site-workflow-visual,
  .site-benchmark-visual,
  .logo-stage {
    min-height: min(68vh, 320px) !important;
    max-height: 320px;
  }

  .continuum-demo-banner-copy span:not(.continuum-demo-badge) {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 760px) {
  main.poc-shell,
  main.poc-shell[data-mode="preview"],
  main.poc-shell[data-mode="storage"] {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: minmax(220px, calc(var(--mobile-visual-height, 100dvh) - 64px)) auto auto !important;
    height: auto !important;
    min-height: calc(var(--mobile-visual-height, 100dvh) - 64px) !important;
    overflow: visible !important;
  }

  main.poc-shell > .mode-rail {
    position: sticky !important;
    top: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: start;
    height: calc(var(--mobile-visual-height, 100dvh) - 64px) !important;
  }

  main.poc-shell > .canvas-panel,
  main.poc-shell[data-mode="preview"] > .canvas-panel,
  main.poc-shell[data-mode="storage"] > .canvas-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  main.poc-shell > .left-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: auto !important;
    max-height: 76dvh;
  }

  main.poc-shell > .right-panel,
  main.poc-shell[data-mode="preview"] > .right-panel {
    grid-column: 2 !important;
    grid-row: 3 !important;
    height: auto !important;
    max-height: 76dvh;
  }

  main.poc-shell[data-mode="preview"] > .right-panel {
    grid-row: 2 !important;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  :root {
    --mobile-nav-gap: 6px;
  }

  .mobile-system-nav > .workspace-surface-link[data-mobile-primary="true"],
  .mobile-system-nav > .mobile-more-trigger:not([hidden]) {
    font-size: 0.55rem !important;
  }

  .workspace-scope-select {
    padding-inline: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-more-dialog,
  .mobile-more-sheet,
  .mobile-system-nav,
  .detail-drawer,
  .ticket-drawer-panel {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}