/* Mission-specific layout overrides owned by the mission frontend slice. */

.page[data-page="mission"] .stack {
  padding-bottom: 8px;
}

.page[data-page="mission"] [data-mission-panel-toggle] {
  scroll-margin-top: 20px;
  scroll-margin-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 24px);
}

body.native-app .page[data-page="mission"] .stack,
body.compact-layout .page[data-page="mission"] .stack {
  padding-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 24px);
}

@media (max-width: 900px) {
  body:not(.native-app):not(.compact-layout) .page[data-page="mission"] .stack {
    padding-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 24px);
  }

  .page[data-page="mission"] .stack {
    gap: 10px;
  }

  .page[data-page="mission"] .page-title {
    margin-bottom: 10px;
    font-size: 1.02rem;
  }

  .page[data-page="mission"] .progress-card[data-tone="mission"] {
    gap: 8px;
    padding: 10px;
  }

  .page[data-page="mission"] .progress-card[data-tone="mission"] .ring-wrap {
    --ring-size: 132px;
  }

  .page[data-page="mission"] .progress-card[data-tone="mission"] .counter {
    font-size: 1.72rem;
  }

  .page[data-page="mission"] .progress-card[data-tone="mission"] .subtext {
    font-size: 0.72rem;
  }

  .page[data-page="mission"] #missionBtn {
    min-height: 40px;
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  .page[data-page="mission"] .mission-fold-toggle {
    padding: 10px 12px;
    font-size: 0.84rem;
  }

  .page[data-page="mission"] #missionPanelGoalsBody {
    padding: 10px 12px 12px;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-metric {
    padding: 8px 6px;
    gap: 6px;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-ring-wrap {
    max-width: 72px;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-ring-center p {
    font-size: 0.88rem;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-ring-center span {
    font-size: 0.62rem;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .metric-btn {
    width: 100%;
    min-height: 32px;
    padding: 7px 5px;
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .page[data-page="mission"] #missionPanelInventoryBody {
    padding-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 18px);
  }

  .page[data-page="mission"] #missionInventoryList {
    margin-top: -12px;
    padding-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 18px);
  }

  .page[data-page="mission"] #missionInventoryList .mission-book-item,
  .page[data-page="mission"] #missionInventoryList .mission-book-card-stats-btn {
    scroll-margin-bottom: calc(var(--app-bottom-nav-reserve, 88px) + 24px);
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel {
    gap: 6px;
    margin-bottom: 4px;
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-card {
    padding: 7px;
    gap: 6px;
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-head {
    gap: 8px;
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-head h5 {
    font-size: 0.8rem;
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-head p,
  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-meta,
  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-note,
  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-help {
    margin-top: 2px;
    font-size: 0.68rem;
    line-height: 1.24;
  }

  .page[data-page="mission"] #missionSupplyRequestsPanel .mission-supply-request-status {
    padding: 2px 7px;
    font-size: 0.64rem;
  }
}

@media (max-width: 430px) {
  .page[data-page="mission"] .progress-card[data-tone="mission"] .ring-wrap {
    --ring-size: 120px;
  }

  .page[data-page="mission"] #missionPanelGoalsBody .mini-ring-wrap {
    max-width: 68px;
  }
}