/* Portrait mobile workbench — intentionally isolated from landscape and desktop. */
@media (max-width: 980px) and (orientation: portrait) {
  :root {
    --mp-header: 64px;
    --mp-nav: 68px;
    --mp-gap: 10px;
    --mp-pad: 10px;
    --mp-map: 440px;
    --mp-profile: 286px;
    --mp-scene: 286px;
    --wb-header: var(--mp-header);
    --wb-mobile-nav: var(--mp-nav);
  }

  html {
    height: 100%;
    background: #061019;
    overscroll-behavior: none;
  }

  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  html[data-active-view][data-viewport-tier] .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--mp-header) minmax(0, 1fr) !important;
    width: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 0 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  html[data-active-view][data-viewport-tier] .topbar {
    position: relative !important;
    inset: auto !important;
    z-index: 42 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-width: 0 !important;
    height: var(--mp-header) !important;
    min-height: var(--mp-header) !important;
    padding: 8px max(var(--mp-pad), env(safe-area-inset-right, 0px)) 8px max(var(--mp-pad), env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(99, 190, 214, 0.2) !important;
    border-radius: 0 !important;
    background: rgba(5, 18, 29, 0.97) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(18px) saturate(1.15);
  }

  html[data-active-view] .topbar::before,
  html[data-active-view] .topbar::after,
  .topbar-context,
  .view-tabs {
    display: none !important;
  }

  .brand {
    display: flex !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .brand-mark {
    display: none !important;
  }

  .brand-copy {
    min-width: 0 !important;
  }

  .brand-copy .brand-eyebrow {
    display: block !important;
    margin: 0 0 3px !important;
    color: #63d5e9 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-copy h1 {
    max-width: 100% !important;
    margin: 0 !important;
    color: #f1fbff !important;
    font-size: clamp(14px, 4.2vw, 19px) !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-copy p {
    display: none !important;
  }

  .status-strip {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .status-strip > span:not(.system-live) {
    display: none !important;
  }

  .status-strip .system-live {
    display: inline-flex !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(91, 226, 186, 0.26) !important;
    border-radius: 999px !important;
    background: rgba(45, 175, 137, 0.09) !important;
    color: #8df3ce !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .mission-rail {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px)) !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(99, 190, 214, 0.24) !important;
    border-radius: 0 !important;
    background: rgba(5, 17, 27, 0.98) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(20px) saturate(1.2);
  }

  .mission-rail::after,
  .rail-emblem,
  .rail-footer {
    display: none !important;
  }

  .rail-nav,
  .rail-actions {
    display: contents !important;
  }

  .rail-command,
  .rail-tool {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--mp-nav) !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 7px 2px 5px !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #86a4b2 !important;
    box-shadow: none !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent;
  }

  .rail-command > span:last-child,
  .rail-tool > span:last-child {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rail-icon {
    width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    opacity: 0.9 !important;
  }

  .rail-command.active,
  .rail-tool.active {
    color: #b9f5ff !important;
    background: linear-gradient(180deg, rgba(36, 186, 211, 0.16), rgba(36, 186, 211, 0.02)) !important;
  }

  .rail-command.active::before,
  .rail-tool.active::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 22% auto !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    background: #55d6ed !important;
    box-shadow: 0 0 12px rgba(85, 214, 237, 0.7) !important;
  }

  html[data-active-view][data-viewport-tier] .workspace {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: var(--mp-pad) !important;
    padding-bottom: calc(var(--mp-pad) + 16px) !important;
    gap: var(--mp-gap) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-padding-top: var(--mp-pad);
    -webkit-overflow-scrolling: touch;
  }

  html[data-active-view][data-viewport-tier] .workspace.hidden {
    display: none !important;
  }

  html[data-active-view][data-viewport-tier] #modelWorkspace.workspace,
  html[data-active-view][data-viewport-tier] #wrfWorkspace.workspace,
  html[data-active-view][data-viewport-tier] #observationWorkspace.workspace,
  html[data-active-view][data-viewport-tier] #ranchWorkspace.workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-content: start !important;
  }

  .science-ribbon {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border: 1px solid rgba(95, 183, 208, 0.16) !important;
    border-radius: 12px !important;
    background: rgba(7, 25, 38, 0.82) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14) !important;
  }

  .science-ribbon::-webkit-scrollbar {
    display: none;
  }

  .science-ribbon::before {
    display: none !important;
  }

  .science-ribbon article {
    flex: 0 0 50% !important;
    min-width: 50% !important;
    height: 100% !important;
    padding: 8px 10px !important;
    scroll-snap-align: start;
    border-right: 1px solid rgba(95, 183, 208, 0.12) !important;
    background: transparent !important;
  }

  .science-ribbon article > span {
    margin-bottom: 3px !important;
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
  }

  .science-ribbon article > strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .science-ribbon article > small {
    margin-top: 2px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-active-view] .map-stage,
  html[data-active-view] .profile-stage,
  html[data-active-view] .scene-stage,
  html[data-active-view] .observation-chart-stage,
  html[data-active-view] .observation-lists-stage,
  html[data-active-view] .ranch-dashboard-stage,
  html[data-active-view] .ranch-zone-stage,
  html[data-active-view] .ranch-alert-stage,
  html[data-active-view] .ranch-data-stage,
  html[data-active-view] .metrics {
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(95, 183, 208, 0.18) !important;
    border-radius: 14px !important;
    background: rgba(6, 22, 34, 0.86) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
  }

  html[data-active-view] .map-stage,
  html[data-active-view] .observation-map-stage,
  html[data-active-view] .ranch-map-stage {
    width: 100% !important;
    height: var(--mp-map) !important;
    min-height: var(--mp-map) !important;
  }

  html[data-active-view] .profile-stage,
  html[data-active-view] .scene-stage,
  html[data-active-view] .observation-chart-stage {
    height: var(--mp-profile) !important;
    min-height: var(--mp-profile) !important;
  }

  html[data-active-view] .scene-stage {
    height: var(--mp-scene) !important;
    min-height: var(--mp-scene) !important;
  }

  html[data-active-view] .map-stage::before,
  html[data-active-view] .map-stage::after,
  .sandbox-surface-glow,
  .sandbox-scanline {
    display: none !important;
  }

  .stage-title,
  .stage-title.tight {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(95, 183, 208, 0.14) !important;
    background: linear-gradient(180deg, rgba(14, 40, 54, 0.94), rgba(7, 25, 37, 0.88)) !important;
  }

  .stage-title::before,
  .stage-title::after {
    display: none !important;
  }

  .stage-title > div:first-child {
    min-width: 0 !important;
  }

  .stage-title h2 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stage-title p {
    max-width: 100% !important;
    margin: 3px 0 0 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stage-tools {
    display: flex !important;
    max-width: min(46%, 190px) !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }

  .forecast-tool-group {
    display: contents !important;
  }

  .forecast-tool-label {
    display: none !important;
  }

  .source-chip,
  .forecast-time-chip,
  .ranch-stage-badge {
    max-width: 112px !important;
    min-height: 26px !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mitgcmTimeChip.forecast-time-chip {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 112px !important;
  }

  .legend,
  .typhoon-dot-legend,
  .obs-legend {
    max-width: 100% !important;
    font-size: 8px !important;
  }

  .geo-map-frame,
  .map-stage > canvas,
  .ranch-map-stage > canvas {
    height: calc(100% - 50px) !important;
    min-height: 0 !important;
  }

  .geo-map-hint {
    right: 8px !important;
    bottom: 8px !important;
    max-width: calc(100% - 16px) !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .maplibregl-ctrl-top-right {
    top: 7px !important;
    right: 7px !important;
  }

  .maplibregl-ctrl-group button {
    width: 40px !important;
    height: 40px !important;
  }

  html[data-active-view] .metrics,
  .ranch-data-row,
  .ranch-dashboard-grid,
  .ranch-zone-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 1px !important;
    background: rgba(95, 183, 208, 0.16) !important;
  }

  .metrics article,
  .ranch-data-row article,
  .ranch-dashboard-grid > *,
  .ranch-zone-grid > * {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 12px !important;
    background: rgba(6, 22, 34, 0.96) !important;
  }

  .observation-lists-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--mp-gap) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .observation-list,
  .ranch-alert-stage,
  .ranch-dashboard-stage,
  .ranch-zone-stage,
  .ranch-data-stage {
    min-width: 0 !important;
    height: auto !important;
    min-height: 220px !important;
    overflow: hidden !important;
  }

  .obs-table {
    max-height: 340px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  html[data-active-view][data-viewport-tier] #modelControls.control-panel,
  html[data-active-view][data-viewport-tier] #observationControls.control-panel,
  html[data-active-view][data-viewport-tier] #ranchControls.control-panel {
    position: fixed !important;
    inset: var(--mp-header) 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px)) auto !important;
    z-index: 60 !important;
    display: block !important;
    width: min(420px, calc(100vw - 12px)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 10px 22px !important;
    border: 0 !important;
    border-left: 1px solid rgba(99, 190, 214, 0.24) !important;
    border-radius: 16px 0 0 0 !important;
    background: rgba(5, 18, 29, 0.985) !important;
    box-shadow: -18px 0 42px rgba(0, 0, 0, 0.46) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 220ms ease, visibility 220ms ease !important;
  }

  html[data-panel-collapsed="true"][data-active-view][data-viewport-tier] #modelControls.control-panel,
  html[data-panel-collapsed="true"][data-active-view][data-viewport-tier] #observationControls.control-panel,
  html[data-panel-collapsed="true"][data-active-view][data-viewport-tier] #ranchControls.control-panel {
    display: block !important;
    transform: translateX(104%) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-active-view][data-viewport-tier] #modelControls.control-panel.hidden,
  html[data-active-view][data-viewport-tier] #observationControls.control-panel.hidden,
  html[data-active-view][data-viewport-tier] #ranchControls.control-panel.hidden {
    display: none !important;
  }

  html:not([data-panel-collapsed="true"])[data-active-view] body::before {
    content: "";
    position: fixed;
    inset: var(--mp-header) 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    background: rgba(0, 7, 12, 0.56);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  .panel-intro {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 68px !important;
    margin: 0 -10px 10px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(99, 190, 214, 0.18) !important;
    background: rgba(5, 18, 29, 0.97) !important;
    backdrop-filter: blur(16px);
  }

  .control-section,
  html[data-active-view] .control-panel details {
    margin: 0 0 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(10, 31, 44, 0.82) !important;
  }

  button,
  select,
  input[type="number"],
  .segmented label > span,
  .toggle {
    min-height: 44px;
  }

  .segmented label > span,
  .toggle,
  .mini-actions button,
  .transport .icon-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  select,
  input[type="number"] {
    font-size: 16px !important;
  }

  .range {
    min-height: 34px !important;
  }

  .layer-control-grid,
  .observation-layer-grid,
  .select-grid,
  .number-grid,
  .obs-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .interaction-ripple {
    display: none !important;
  }

  .mission-toast {
    right: var(--mp-pad) !important;
    bottom: calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px) + var(--mp-pad)) !important;
    left: var(--mp-pad) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  @media (min-width: 600px) {
    :root {
      --mp-header: 72px;
      --mp-nav: 72px;
      --mp-gap: 12px;
      --mp-pad: 12px;
      --mp-map: 470px;
      --mp-profile: 310px;
      --mp-scene: 310px;
    }

    .brand-mark {
      display: block !important;
      flex: 0 0 40px !important;
      width: 40px !important;
      height: 40px !important;
    }

    .brand-copy p {
      display: block !important;
      margin: 3px 0 0 !important;
      font-size: 8px !important;
      white-space: nowrap !important;
    }

    .status-strip > #clockLabel {
      display: inline-flex !important;
      min-height: 30px !important;
      padding: 0 9px !important;
      border-radius: 999px !important;
      background: rgba(74, 146, 169, 0.1) !important;
      font-size: 10px !important;
    }

    .science-ribbon article {
      flex-basis: 33.333% !important;
      min-width: 33.333% !important;
    }

    html[data-active-view][data-viewport-tier] #modelWorkspace.workspace,
    html[data-active-view][data-viewport-tier] #wrfWorkspace.workspace {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #modelWorkspace .science-ribbon,
    #modelWorkspace .map-stage,
    #modelWorkspace .metrics,
    #wrfWorkspace .science-ribbon,
    #wrfWorkspace .map-stage,
    #wrfWorkspace .metrics {
      grid-column: 1 / -1 !important;
    }

    html[data-active-view][data-viewport-tier] #observationWorkspace.workspace,
    html[data-active-view][data-viewport-tier] #ranchWorkspace.workspace {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #observationWorkspace .science-ribbon,
    #observationWorkspace .map-stage,
    #observationWorkspace .observation-lists-stage,
    #observationWorkspace .metrics,
    #ranchWorkspace .science-ribbon,
    #ranchWorkspace .map-stage,
    #ranchWorkspace .ranch-data-stage {
      grid-column: 1 / -1 !important;
    }
  }

  @media (max-width: 599px) and (min-height: 880px) {
    :root {
      --mp-map: 466px;
      --mp-profile: 300px;
      --mp-scene: 300px;
    }
  }

  @media (max-width: 599px) and (max-height: 740px) {
    :root {
      --mp-header: 58px;
      --mp-nav: 66px;
      --mp-gap: 8px;
      --mp-pad: 8px;
      --mp-map: 390px;
      --mp-profile: 266px;
      --mp-scene: 266px;
    }

    .science-ribbon {
      height: 56px !important;
      min-height: 56px !important;
    }

    .stage-title,
    .stage-title.tight {
      min-height: 48px !important;
      padding: 7px 9px !important;
    }

    .geo-map-frame,
    .map-stage > canvas,
    .ranch-map-stage > canvas {
      height: calc(100% - 48px) !important;
    }
  }

  @media (max-width: 360px) and (max-height: 600px) {
    :root {
      --mp-header: 56px;
      --mp-nav: 64px;
      --mp-gap: 7px;
      --mp-pad: 7px;
      --mp-map: 352px;
      --mp-profile: 248px;
      --mp-scene: 248px;
    }

    .brand-copy .brand-eyebrow {
      font-size: 7px !important;
    }

    .brand-copy h1 {
      font-size: 13px !important;
    }

    .status-strip .system-live {
      min-height: 26px !important;
      padding: 0 6px !important;
      font-size: 8px !important;
    }

    .science-ribbon {
      height: 52px !important;
      min-height: 52px !important;
    }

    .science-ribbon article {
      padding: 6px 8px !important;
    }

    .stage-title p {
      font-size: 8px !important;
    }

    .stage-tools {
      max-width: 42% !important;
    }

    .legend {
      display: none !important;
    }

    .rail-command,
    .rail-tool {
      padding-inline: 1px !important;
      font-size: 9px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html[data-active-view][data-viewport-tier] .workspace {
      scroll-behavior: auto;
    }

    html[data-active-view][data-viewport-tier] .control-panel {
      transition: none !important;
    }
  }
}