/* Shared presentation-layout corrections. These do not alter scene geometry or engineering data. */
@media (min-width: 901px) {
  /* Project mode moves the metric strip to the left, where it collides with the detail
     card on tall-story chapters. Keep metrics in the bottom-right lane. */
  .metric-strip {
    left: auto;
    right: 30px;
  }

  /* The Engineering toggle used to straddle the 82px top bar (shell top 108px with
     a -42px toggle offset). Besides looking attached to the header divider, that left
     the visible control in an ambiguous hit-testing lane. Keep the entire toggle below
     the header while preserving the panel's existing lower boundary. */
  .engineering-shell {
    top: 130px;
  }

  /* Explore needs a separate vertical lane from the metric strip at wide desktop sizes;
     moving metrics from left to right alone just mirrors the same overlap. */
  .explore-nav {
    bottom: 84px;
  }

  .interaction-hint {
    bottom: 136px;
  }

  /* The Engineering HUD shares the right side. Bound its scrollable panel above both
     Explore and the metric lane, with a small safety gap for nav padding/borders. The
     22px reduction matches the shell's downward shift above so the panel bottom stays
     in the same proven lane. */
  .engineering-panel {
    max-height: calc(100vh - 266px);
  }
}

/* At narrow desktop widths the centered helper sentence reaches toward the story column.
   Explore already exposes the interaction affordance, so remove only the redundant hint. */
@media (max-width: 1200px) and (min-width: 901px) {
  .interaction-hint {
    display: none;
  }
}

/* The lower detail card needs a slightly wider handoff than the helper sentence. At
   1201x1000 its right edge still overlaps the centered Explore bar; keep it suppressed
   through 1240px so it returns with a real horizontal safety gap rather than at the exact
   collision boundary. */
@media (max-width: 1240px) and (min-width: 901px) {
  .detail-card {
    display: none;
  }
}

/* Compact desktop cannot fit five metrics in the right lane without crowding the model.
   Keep the three primary facility metrics visible; the full values remain in Engineering. */
@media (max-width: 1400px) and (min-width: 901px) {
  .metric-strip {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
  }

  .metric-strip > div:nth-child(4),
  .metric-strip > div:nth-child(5) {
    display: none;
  }
}

/* Below a 1000px-tall desktop, the long Building story plus the redundant detail card
   can exceed the viewport before the old 820px breakpoint ever activates. Preserve the
   story in a bounded scroll region and drop only the duplicate detail card; Engineering
   stays available and the <=900px mobile-width rules remain separate. */
@media (max-height: 999px) and (min-width: 901px) {
  .story-shell {
    top: 92px;
  }

  .story-card {
    max-height: calc(100vh - 240px);
    overflow: auto;
    scrollbar-width: thin;
  }

  .detail-card {
    display: none;
  }
}

/* The app viewport itself is intentionally locked, so long mobile story cards need their
   own scroll region. Keep the story above the docked Engineering toggle with an 8px gap:
   story top 82px + max-height (100vh - 212px) ends 130px above the viewport bottom, while
   the closed toggle starts 122px above the bottom. The same rule keeps every story line
   reachable instead of clipping it behind fixed mobile chrome. */
@media (max-width: 900px) {
  .story-card {
    max-height: calc(100vh - 212px);
    overflow: auto;
    scrollbar-width: thin;
  }

  /* Mobile Engineering is a bottom sheet. A zero-height parent alone does not remove the
     hidden panel's client rect because overflow remains visible by default. Remove only
     the closed panel from mobile layout so neither its 52vh box nor its border can overlap
     Explore; removing `.closed` restores the existing bottom-sheet behavior immediately. */
  .engineering-shell.closed {
    height: 0;
  }

  .engineering-shell.closed .engineering-panel {
    display: none;
  }
}

/* Phone-width top bars cannot fit the full brand subtitle, live dot, Focus control and
   GitHub pill at their desktop spacing. Preserve both actionable controls while trimming
   decorative/header-only chrome so the two flex groups never collide or clip. */
@media (max-width: 480px) {
  .topbar {
    padding: 0 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand-copy small,
  .status-dot {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  #focus-mode-toggle {
    padding: .42rem .5rem !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  .github-link {
    margin-left: 0;
    padding: 7px 9px;
    font-size: 9px;
  }
}