:root { --sr-mobile-fit-release: 20260917; }
/* Additive sixth dock entry. Existing modal and Theater visibility rules win. */
#sr-mobile-dock > .sr-mobile-immersive {
  display: none;
}

@media (max-width: 900px) {
  /* The observatory skin is reordered after this stylesheet during bootstrap.
     Scope through the owning shell so its five-column rule cannot win by order. */
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock {
    --sr-immersive-dock-height: 70px;
    grid-template-columns: repeat(6, minmax(44px, 1fr)) !important;
    column-gap: 2px !important;
    padding-inline: 4px !important;
    left: max(4px, var(--sr-safe-left, env(safe-area-inset-left, 0px)), calc((100vw - 560px) / 2)) !important;
    right: auto !important;
    width: min(560px, calc(100vw - max(4px, var(--sr-safe-left, env(safe-area-inset-left, 0px))) - max(4px, var(--sr-safe-right, env(safe-area-inset-right, 0px))))) !important;
    margin-inline: 0 !important;
    height: var(--sr-immersive-dock-height) !important;
    min-height: var(--sr-immersive-dock-height) !important;
    /* Use the shell's visualViewport height. A legacy overflowing subtree can
       expand mobile innerHeight without changing the visible screen. */
    top: calc(var(--sr-mobile-v9-vh, var(--sr-mobile-vh, 100dvh)) - var(--sr-immersive-dock-height) - 4px - var(--sr-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    bottom: auto !important;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 1px !important;
    touch-action: manipulation;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive {
    display: grid;
    color: #98e0ff !important;
    background: linear-gradient(155deg, rgba(74, 173, 226, .13), rgba(87, 91, 186, .04));
    isolation: isolate;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive:focus-visible {
    outline: 2px solid #b4ebff;
    outline-offset: -2px;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive.is-immersive-open {
    color: #ddf6ff !important;
    background: rgba(91, 179, 237, .2);
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock .sr-mobile-immersive__icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    pointer-events: none;
    transition: transform .16s ease;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock .sr-mobile-immersive__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock .sr-mobile-immersive__star {
    fill: #e1f7ff;
    stroke: #e1f7ff;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive:active .sr-mobile-immersive__icon {
    transform: scale(.92);
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive > small {
    color: inherit;
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: .04em;
    pointer-events: none;
  }
}

@media (max-width: 345px) {
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock {
    column-gap: 1px !important;
  }

  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > button > small {
    font-size: 8px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > .sr-mobile-immersive .sr-mobile-immersive__icon {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock .sr-mobile-immersive__icon {
    transition: none;
  }
}

/* Mobile fit v1. The navigation owner opts into structural layout only after
   this exact stylesheet loads. Native XR retains its existing transparent UI. */
@media (max-width: 900px) {
  body.sr-mobile-space-open { overflow: hidden !important; }
  body.sr-mobile-space-open #sr-mobile-app { visibility: hidden !important; }
  #radar-immersive[data-presentation="mobile"] {
    position: fixed; inset: 0; margin: 0; border: 0; border-radius: 0;
    width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    min-height: 0; z-index: 2147483000;
  }
  #radar-immersive[data-mobile-layout="true"]:not([data-xr="true"]) .ri-shell {
    display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    height: 100%; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  }
  #radar-immersive[data-mobile-layout="true"][data-presentation="docked"] {
    height: auto; min-height: 0; max-height: none;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-header {
    padding: 8px; min-height: 60px; gap: 8px; align-items: center;
    position: sticky; top: 0; z-index: 7;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-header h2 {
    font-size: 15px; line-height: 1.3; white-space: normal;
    overflow: visible; text-overflow: clip; overflow-wrap: anywhere; margin: 0;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-header .ri-eyebrow,
  #radar-immersive[data-mobile-layout="true"] .ri-orbit { display: none; }
  #radar-immersive[data-mobile-layout="true"] .ri-header-actions { gap: 4px; }
  #radar-immersive[data-mobile-layout="true"] .ri-header-actions button {
    width: 44px; min-width: 44px; min-height: 44px; padding: 5px;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-header [data-action="options"] { font-size: 0; }
  #radar-immersive[data-mobile-layout="true"] .ri-header [data-action="options"]::after { content: '⚙'; font-size: 20px; }
  #radar-immersive[data-mobile-layout="true"] .ri-metrics {
    display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 7px 10px;
    overflow: visible; white-space: normal; font-size: 11px; visibility: visible;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-metrics > span:last-child { margin-left: 0; }
  #radar-immersive[data-mobile-layout="true"] .ri-workspace-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px; gap: 4px; overflow: visible;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-workspace-tabs button {
    min-height: 44px; min-width: 0; font-size: 11px; padding: 6px 3px;
    white-space: normal; overflow-wrap: anywhere;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-content {
    display: block; overflow: visible; min-height: 0;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-visual {
    display: grid; height: auto; overflow: visible;
    grid-template-rows: auto clamp(240px, 44dvh, 520px) auto auto 0;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px; padding: 6px; overflow: visible; visibility: visible;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-tabs button {
    min-width: 0; min-height: 44px; white-space: normal;
    overflow-wrap: anywhere; font-size: 12px; padding: 6px 3px;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-stage-heading {
    display: block; max-width: calc(100% - 24px); top: 8px; left: 12px;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-stage-heading h3 {
    font-size: 18px; line-height: 1.3; margin: 4px 0;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-stage-heading p,
  #radar-immersive[data-mobile-layout="true"] .ri-stage-heading > .ri-eyebrow { display: none; }
  #radar-immersive[data-mobile-layout="true"] .ri-status {
    top: 56px; left: 12px; right: 12px; max-width: none; font-size: 11px; text-align: left;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-status[data-help="true"] { display: none; }
  #radar-immersive[data-mobile-layout="true"] .ri-camera {
    position: static; display: flex; flex-wrap: wrap; justify-content: center;
    padding: 6px; gap: 5px; overflow: visible; background: #080f20;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-camera button {
    min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 12px;
    white-space: normal; max-width: 100%;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px 64px minmax(0, 1fr);
    gap: 5px; padding: 6px; overflow: visible; visibility: visible;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline > * { min-width: 0; max-width: 100%; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline [data-action="replay"] { grid-column: 1 / 3; grid-row: 1; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline [data-action="play"] { grid-column: 3; grid-row: 1; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline [data-action="live"] { grid-column: 4; grid-row: 1; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline input { grid-column: 1 / 3; grid-row: 2; width: 100%; height: 44px; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline output { grid-column: 3; grid-row: 2; width: 100%; font-size: 11px; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline select { grid-column: 4; grid-row: 2; width: 100%; }
  #radar-immersive[data-mobile-layout="true"] .ri-timeline :is(button,select) { min-height: 44px; padding: 6px 3px; white-space: normal; font-size: 11px; }
  #radar-immersive[data-mobile-layout="true"] .ri-history-note { display: none; }
  #radar-immersive[data-mobile-layout="true"] .ri-detail {
    height: auto; max-height: none; overflow: visible; padding: 10px;
    border-left: 0; border-top: 1px solid #324964;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-sheet-controls { display: flex; position: static; }
  #radar-immersive[data-mobile-layout="true"] .ri-sheet-controls button { min-width: 0; min-height: 44px; }
  #radar-immersive[data-mobile-layout="true"] .ri-pair-select select { min-width: 0; font-size: 14px; }
  #radar-immersive[data-mobile-layout="true"] .ri-pair-arrows button { min-width: 44px; min-height: 44px; }
  #radar-immersive[data-mobile-layout="true"][data-sheet="summary"] .ri-detail :is(.ri-levels,.ri-evidence,.ri-layers,.ri-semantic) { display: none; }
  #radar-immersive[data-mobile-layout="true"][data-sheet="full"] .ri-pair-select { padding: 10px 0; border-block: 1px solid #334965; }
  #radar-immersive[data-mobile-layout="true"] .ri-footer {
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-footer nav {
    display: flex; flex-wrap: wrap; justify-content: center; width: 100%; overflow: visible;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-footer nav button { min-height: 44px; font-size: 12px; }
  #radar-immersive[data-mobile-layout="true"] .ri-ar-controls { width: 100%; flex-wrap: wrap; overflow: visible; }
  #radar-immersive[data-mobile-layout="true"] .ri-ar-button { min-height: 44px; white-space: normal; }
  #radar-immersive[data-mobile-layout="true"] :is(.ri-options,.ri-tool-panel,.ri-comparison,.ri-journal,.ri-terminal-dock) {
    position: fixed; top: calc(64px + env(safe-area-inset-top, 0px));
    bottom: auto; left: 10px; right: 10px; width: auto;
    max-width: none; max-height: calc(100dvh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: auto; overscroll-behavior: contain;
  }
  #radar-immersive[data-mobile-layout="true"] .ri-options :is(button,select) { min-height: 44px; }
  #radar-immersive[data-mobile-layout="true"] .ri-ar-diagnostics { scroll-margin-top: 8px; }

  /* These selectors deliberately beat the late-loaded observatory skin. */
  html[data-signal-visual] body #sr-mobile-app #sr-mobile-top {
    gap: 4px !important; padding: calc(5px + env(safe-area-inset-top)) 10px 5px !important;
  }
  html[data-signal-visual] body #sr-mobile-app #sr-mobile-top .sr-mobile-top__brand-row {
    min-height: 34px !important; height: auto !important; gap: 6px !important;
  }
  html[data-signal-visual] body #sr-mobile-top .sr-mobile-brand strong { font-size: 15px !important; line-height: 1.2 !important; }
  html[data-signal-visual] body #sr-mobile-top .sr-mobile-brand small { font-size: 10px !important; white-space: normal !important; }
  html[data-signal-visual] body #sr-mobile-top .sr-mobile-brand__mark { width: 28px !important; height: 28px !important; min-width: 28px !important; }
  html[data-signal-visual] body #sr-mobile-top .sr-mobile-plan { min-width: 68px !important; min-height: 32px !important; padding: 3px 6px !important; }
  html[data-signal-visual] body #sr-mobile-top .sr-mobile-top__metrics > :is(span,button) { min-height: 32px !important; padding-inline: 5px !important; }
  html[data-signal-visual] body #insights-panel.insights {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important; padding: 8px !important; margin: 0 10px !important;
  }
  html[data-signal-visual] body #insights-panel .insight-card { min-width: 0 !important; padding: 7px !important; gap: 4px !important; }
  html[data-signal-visual] body #insights-panel .insight-card :is(strong,.label) {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important;
  }
  html[data-signal-visual] body #insights-panel .insight-card strong { font-size: 15px !important; line-height: 1.35 !important; }
  html[data-signal-visual] body #insights-panel .insight-card .label { font-size: 10px !important; line-height: 1.3 !important; }
  html[data-signal-visual] body .focus-mode { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  html[data-signal-visual] body .focus-mode button {
    min-width: 0 !important; min-height: 44px !important; white-space: normal !important;
    overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; font-size: 11px !important;
  }
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > button > small {
    font-size: 10px !important; line-height: 1.3 !important; letter-spacing: 0 !important;
  }
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock {
    border-radius: 22px !important;
    background: linear-gradient(125deg, #112e3bf2, #171f37f2 58%, #292046f2) !important;
  }
  html[data-mobile-space-motion="on"] #sr-mobile-app #sr-mobile-dock.sr-immersive-dock > button.is-active .sr-mobile-dock__icon svg {
    animation: sr-space-icon-breathe 4s ease-in-out infinite !important;
  }
  html[data-mobile-space-motion="on"] #sr-mobile-app #sr-mobile-dock.sr-immersive-dock .sr-mobile-immersive__icon svg {
    animation: sr-space-orbit-sway 6s ease-in-out infinite;
    transform-origin: center;
  }
  html[data-mobile-space-motion="on"] #sr-mobile-app.is-scanning #sr-mobile-dock.sr-immersive-dock .sr-mobile-scan__orb svg {
    animation: sr-space-scan 4s linear infinite !important;
    transform-origin: center;
  }
  html[data-mobile-space-motion="off"] #sr-mobile-app #sr-mobile-dock.sr-immersive-dock svg { animation: none !important; }
}
@keyframes sr-space-icon-breathe { 0%,100% { transform: translateY(0); opacity: .82; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes sr-space-orbit-sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes sr-space-scan { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #sr-mobile-app #sr-mobile-dock.sr-immersive-dock svg { animation: none !important; transition: none !important; }
}