/* Forecast-specific portrait layout, loaded after the shared mobile workbench. */

.panel-sheet-close,
.panel-scrim {
  display: none;
}

@media (max-width: 980px) and (orientation: portrait) {
  html[data-active-view="model"][data-viewport-tier] {
    --fm-map-head: 122px;
    --fm-map-growth: 72px;
    --fm-sheet-radius: 20px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage {
    height: calc(var(--mp-map) + var(--fm-map-growth)) !important;
    min-height: calc(var(--mp-map) + var(--fm-map-growth)) !important;
    border-color: rgba(74, 197, 218, 0.24) !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage > .stage-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    align-items: stretch !important;
    min-height: var(--fm-map-head) !important;
    padding: 10px !important;
    gap: 9px !important;
    background:
      linear-gradient(90deg, rgba(83, 213, 224, 0.08), transparent 48%),
      linear-gradient(180deg, rgba(13, 41, 54, 0.98), rgba(7, 24, 36, 0.96)) !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage > .stage-title > div:first-child {
    min-width: 0 !important;
    padding: 0 !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage > .stage-title h2 {
    color: #dffaff !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage > .stage-title p {
    margin-top: 3px !important;
    color: #8eabb5 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-stage-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 8px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-tool-group {
    display: grid !important;
    grid-template-rows: auto 38px !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-tool-label {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    color: #86a5b1;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 6.5px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace #mitgcmTimeChip.forecast-time-chip {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    gap: 6px;
    justify-content: flex-start !important;
    overflow: hidden !important;
    border: 1px solid rgba(246, 211, 101, 0.4) !important;
    border-radius: 8px !important;
    color: #ffe79b !important;
    background: linear-gradient(180deg, rgba(246, 211, 101, 0.13), rgba(246, 211, 101, 0.055)) !important;
    box-shadow: inset 3px 0 0 rgba(246, 211, 101, 0.84) !important;
    font-family: "Cascadia Mono", "Consolas", monospace;
    line-height: 1 !important;
    text-align: left !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-time-system {
    flex: 0 0 auto;
    color: rgba(255, 231, 155, 0.58);
    font-size: 6px;
    font-weight: 760;
    letter-spacing: 0.07em;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace #mitgcmTimeValue {
    min-width: 0;
    overflow: hidden;
    color: #ffe79b;
    font: 760 8.7px/1 "Cascadia Mono", "Consolas", monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-legend-block .legend {
    display: grid !important;
    grid-template-columns: minmax(34px, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(112, 179, 204, 0.24);
    border-radius: 8px;
    color: #c5d8df !important;
    background: rgba(5, 17, 27, 0.72);
    font-family: "Cascadia Mono", "Consolas", monospace;
    line-height: 1 !important;
    white-space: nowrap;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-legend-block .legend::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    min-width: 34px !important;
    height: 8px !important;
    border: 1px solid rgba(224, 241, 247, 0.16);
    border-radius: 999px;
    background: linear-gradient(90deg, #2539a7 0%, #21b7d4 26%, #6dd36f 52%, #f2c14e 76%, #e64b4b 100%) !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace #legendScaleText {
    min-width: 0;
    overflow: hidden;
    font-size: 7.5px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .geo-map-frame {
    height: calc(100% - var(--fm-map-head)) !important;
    min-height: 0 !important;
  }

  /* A real scrim can be tapped to close the active drawer. */
  html[data-active-view][data-viewport-tier] body::before {
    display: none !important;
  }

  html:not([data-panel-collapsed="true"])[data-active-view][data-viewport-tier] .panel-scrim {
    position: fixed;
    inset: var(--mp-header) 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    display: block;
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(0, 7, 12, 0.6);
    backdrop-filter: blur(2px);
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-intro {
    padding-right: 58px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-state {
    display: none !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid rgba(111, 188, 208, 0.26);
    border-radius: 10px;
    color: #c9edf3;
    background: rgba(15, 47, 61, 0.9);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-sheet-close:focus-visible,
  html[data-active-view="model"][data-viewport-tier] #modelControls button:focus-visible,
  html[data-active-view="model"][data-viewport-tier] #modelControls select:focus-visible,
  html[data-active-view="model"][data-viewport-tier] #modelControls input:focus-visible {
    outline: 2px solid #55d6ed;
    outline-offset: 2px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .transport {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .transport .icon-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .mini-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .mini-actions button {
    width: 100%;
    min-width: 0;
  }
}

/* Phones use a bottom sheet: it leaves the header and persistent navigation stable. */
@media (max-width: 599px) and (orientation: portrait) {
  html[data-active-view="model"][data-viewport-tier] {
    --fm-sheet-height: min(72dvh, calc(var(--app-viewport-height, 100dvh) - var(--mp-header) - var(--mp-nav) - 8px));
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls.control-panel {
    position: fixed !important;
    inset: auto 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100% !important;
    height: var(--fm-sheet-height) !important;
    max-height: calc(var(--app-viewport-height, 100dvh) - var(--mp-header) - var(--mp-nav) - 8px) !important;
    padding: 0 10px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(99, 190, 214, 0.3) !important;
    border-radius: var(--fm-sheet-radius) var(--fm-sheet-radius) 0 0 !important;
    box-shadow: 0 -20px 48px rgba(0, 0, 0, 0.48) !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html:not([data-panel-collapsed="true"])[data-active-view="model"][data-viewport-tier] .panel-scrim {
    bottom: calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px) + var(--fm-sheet-height));
  }

  html[data-panel-collapsed="true"][data-active-view="model"][data-viewport-tier] #modelControls.control-panel {
    transform: translateY(calc(100% + 20px)) !important;
    visibility: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-intro {
    min-height: 72px !important;
    border-radius: var(--fm-sheet-radius) var(--fm-sheet-radius) 0 0;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls .panel-intro::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(150, 195, 207, 0.34);
    transform: translateX(-50%);
  }
}

/* Portrait tablets retain a side sheet and visible map context. */
@media (min-width: 600px) and (max-width: 980px) and (orientation: portrait) {
  html[data-active-view="model"][data-viewport-tier] {
    --fm-map-head: 86px;
    --fm-map-growth: 36px;
    --fm-side-width: min(440px, 78vw);
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .map-stage > .stage-title {
    grid-template-columns: minmax(190px, 1fr) minmax(350px, 0.92fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 14px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelControls.control-panel {
    position: fixed !important;
    inset: var(--mp-header) 0 calc(var(--mp-nav) + env(safe-area-inset-bottom, 0px)) auto !important;
    width: var(--fm-side-width) !important;
    height: auto !important;
    max-height: none !important;
    border: 0 !important;
    border-left: 1px solid rgba(99, 190, 214, 0.28) !important;
    border-radius: var(--fm-sheet-radius) 0 0 var(--fm-sheet-radius) !important;
    transform: translateX(0) !important;
  }

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

  html:not([data-panel-collapsed="true"])[data-active-view="model"][data-viewport-tier] .panel-scrim {
    right: var(--fm-side-width);
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  html[data-active-view="model"][data-viewport-tier] {
    --fm-map-head: 116px;
    --fm-map-growth: 66px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-stage-tools {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    gap: 6px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-tool-label {
    font-size: 6px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-time-system {
    display: none;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace #mitgcmTimeValue {
    font-size: 8px;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace .forecast-legend-block .legend {
    display: grid !important;
    padding-inline: 6px !important;
    gap: 4px !important;
  }

  html[data-active-view="model"][data-viewport-tier] #modelWorkspace #legendScaleText {
    font-size: 7px;
  }
}

@media (max-width: 360px) and (max-height: 600px) and (orientation: portrait) {
  html[data-active-view="model"][data-viewport-tier] {
    --fm-sheet-height: min(66dvh, calc(var(--app-viewport-height, 100dvh) - var(--mp-header) - var(--mp-nav) - 8px));
  }
}

@media (max-width: 980px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  html[data-active-view="model"][data-viewport-tier] #modelControls.control-panel {
    transition: none !important;
  }
}