/* Focused mobile layout polish for compact Pulse rows and the primary dock. */
@media (max-width: 767px) {
  /*
   * The final Pulse metrics column is intentionally dense. Give the retained-
   * peak visual a small internal gutter so its endpoint/label never clips at
   * the card edge, while keeping the rest of the row geometry unchanged.
   */
  article div:has(> [title="Peak retained"]) {
    min-width: 0;
    padding-right: 8px;
    transform: translateX(-6px);
  }

  article [title="Peak retained"] {
    width: 100%;
    max-width: 100%;
  }

  /* Slimmer floating mobile navigation dock. */
  nav[aria-label="Primary navigation"] {
    inset-inline: 14px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
    padding: 4px !important;
  }

  nav[aria-label="Primary navigation"] > div {
    height: 58px !important;
    gap: 2px !important;
  }

  nav[aria-label="Primary navigation"] a {
    gap: 2px !important;
    border-radius: 14px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  nav[aria-label="Primary navigation"] a > span:first-child {
    width: 24px !important;
    height: 24px !important;
    border-radius: 10px !important;
  }

  nav[aria-label="Primary navigation"] a svg {
    width: 17px !important;
    height: 17px !important;
  }

  nav[aria-label="Primary navigation"] a > span:last-child:not(:only-child) {
    line-height: 1 !important;
  }
}