/* Mars47 compact desktop command surfaces.
   Phone layouts keep their larger touch targets in mobile.css. */
@media (min-width: 721px) {
  :root {
    --m47-topbar-height-compact: 54px;
    --m47-buildbar-height-compact: 56px;
    --m47-context-top-compact: 86px;
    --m47-side-panel-width-compact: 293px;
    --m47-mission-cover-width-compact: 224px;
    --m47-mission-cover-height-compact: 264px;
  }

  /* 25% less vertical HUD chrome, with the existing type and content sizes. */
  .topbar {
    height: var(--m47-topbar-height-compact);
    padding-block: 4px;
  }

  .buildbar {
    height: var(--m47-buildbar-height-compact);
    padding: 4px;
    border-radius: 13px;
  }

  .buildbar .menu-launch {
    height: 48px;
    padding-block: 2px;
  }

  /* Inline SVGs stay at their authored size. Removing the glow and using an
     integral stroke makes their edges resolve cleanly on Retina displays. */
  .buildbar .menu-launch > svg {
    filter: none;
    shape-rendering: geometricPrecision;
    stroke-width: 2;
  }

  .buildbar .menu-launch > svg * {
    vector-effect: non-scaling-stroke;
  }

  /* Keep the contextual HUD stack aligned with the shorter top navigation. */
  .mission,
  .inspector,
  .side-panel,
  .message-panel,
  .progress-queue-panel,
  .save-game-panel,
  .cash-breakdown,
  .message-preview,
  .welcome-notice,
  .placement-hint,
  #toast {
    top: var(--m47-context-top-compact);
  }

  html[data-notice-visible="true"] .side-panel:not(.hidden),
  html[data-notice-visible="true"] .message-panel:not(.hidden),
  html[data-notice-visible="true"] .progress-queue-panel:not(.hidden),
  html[data-notice-visible="true"] .cash-breakdown:not(.hidden) {
    top: 156px;
  }

  .message-preview:not(.hidden) + .mission {
    top: 146px;
  }

  #app:has(#toast.show) .mission {
    top: 136px;
  }

  #app:has(.welcome-notice:not(.hidden)) .mission {
    top: 178px;
  }

  #app:has(.placement-hint:not(.intro-dismissed)) .mission {
    top: 166px;
  }

  /* Build and Research lose 25% of their outer width only. Typography,
     thumbnails, card heights and controls deliberately retain their size. */
  #buildPanel,
  #researchPanel {
    width: var(--m47-side-panel-width-compact);
  }

  /* The covered Mission Control book is one-third smaller in both axes.
     Its 156px program image and all type sizes remain unchanged; the cover
     copy becomes a legible plaque over the lower portion of the image. */
  .mission.mission-covered {
    width: var(--m47-mission-cover-width-compact);
    height: var(--m47-mission-cover-height-compact);
    min-height: var(--m47-mission-cover-height-compact);
  }

  .mission.mission-covered .mission-cover {
    width: calc(var(--m47-mission-cover-width-compact) - 2px);
    height: calc(var(--m47-mission-cover-height-compact) - 2px);
    min-height: calc(var(--m47-mission-cover-height-compact) - 2px);
    display: grid;
    grid-template-rows: auto 156px 49px;
    align-content: start;
    row-gap: 5px;
    padding: 10px 8px 8px 32px;
  }

  .mission.mission-covered .mission-cover-kicker {
    align-self: center;
  }

  .mission.mission-covered .mission-patch {
    width: 156px;
    height: 156px;
    margin: 0 auto;
  }

  .mission.mission-covered .mission-cover-copy {
    position: absolute;
    z-index: 2;
    top: 100px;
    left: calc(50% + 12px);
    width: 182px;
    gap: 2px;
    padding: 5px 4px;
    border: 1px solid rgba(118, 86, 48, .15);
    border-radius: 8px;
    background: rgba(247, 243, 234, .94);
    box-shadow: 0 5px 14px rgba(48, 39, 28, .13);
    transform: translateX(-50%);
  }

  .mission.mission-covered .mission-cover-copy strong {
    white-space: nowrap;
  }

  .mission.mission-covered .mission-open {
    width: 182px;
    min-height: 49px;
    margin: 0 auto;
    padding-inline: 11px;
  }

  .mission.mission-covered .mission-binder-spine {
    height: 262px;
  }

  .mission.mission-covered .mission-binder-spine i:nth-child(1) { top: 30px; }
  .mission.mission-covered .mission-binder-spine i:nth-child(2) { top: 88px; }
  .mission.mission-covered .mission-binder-spine i:nth-child(3) { top: 146px; }
  .mission.mission-covered .mission-binder-spine i:nth-child(4) { top: 204px; }
}

/* Research navigation uses the same violet as the research category and AI
   program accents. Keep the hue stable while the button's own state controls
   opacity, background and selection feedback. */
#researchMenuBtn {
  --m47-research-nav-purple: #a7a2ff;
}

#researchMenuBtn > svg,
#researchMenuBtn:hover > svg,
#researchMenuBtn:focus-visible > svg,
#researchMenuBtn.active > svg,
#researchMenuBtn.locked > svg,
#researchMenuBtn[aria-disabled="true"] > svg {
  color: var(--m47-research-nav-purple);
  stroke: var(--m47-research-nav-purple);
}

#researchMenuBtn.active > svg {
  filter: drop-shadow(0 0 8px rgba(167, 162, 255, .28));
}