/* Two-column public card lists on phones. Keep the original single column
   below 360px, and leave desktop layouts, images and motion untouched. */
@media (min-width: 360px) and (max-width: 740px) {
  #members-list.members-grid,
  #fleet-list.fleet-stack-grid,
  #profile-content .profile-ship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  #members-list.members-grid,
  #profile-content .profile-ship-grid {
    row-gap: 12px;
  }

  #members-list > .blank,
  #fleet-list > :is(.blank, .filter-reset),
  #profile-content .profile-ship-grid > .blank {
    grid-column: 1 / -1;
  }

  /* Names get the full card width; ranks and departments wrap underneath. */
  #members-list > .member-card {
    --ax-card-pad-x: 12px;
    --ax-card-pad-y: 14px;
    min-height: 0;
  }

  #members-list .member-content {
    padding: 14px 12px 12px;
  }

  #members-list .member-card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #members-list .member-card-name {
    min-height: 2.6em;
    font-size: clamp(16px, 3.8vw, 19px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #members-list .member-rank {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px 6px;
    width: 100%;
    font-size: 11px;
    white-space: normal;
  }

  #members-list .member-rank-stars { gap: 1px; }
  #members-list .rank-star { width: 9px; height: 9px; }

  #members-list .member-company-tenure {
    flex-basis: 100%;
    font-size: 10px;
    line-height: 1.6;
  }

  #members-list .member-department-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    min-width: 0;
    margin: 13px 0 15px;
    overflow-wrap: anywhere;
  }

  #members-list .member-department-group {
    min-width: 0;
    gap: 3px;
    padding-left: 7px;
  }

  #members-list .member-department-group strong {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #members-list .member-department-group small,
  #members-list .member-department-line {
    font-size: 11px;
    line-height: 1.6;
  }

  #members-list .meta-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-top: 10px;
    font-size: 11px;
  }

  #members-list .meta-bottom b { font-size: 11px; }

  #members-list .ax-redaction {
    --ax-redaction-pad-x: 12px;
    --ax-redaction-pad-y: 14px;
  }

  #members-list .ax-redaction-word {
    font-size: clamp(18px, 5vw, 26px);
    letter-spacing: .07em;
  }

  #members-list .ax-redaction-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
  }

  /* Compact the visible stacks as well as their expanded registration rows. */
  #fleet-list.fleet-stack-grid { padding-top: 8px; }

  #fleet-list .fleet-stack-group {
    padding: 8px 8px 0 0;
    margin-bottom: 18px;
  }

  #fleet-list .fleet-stack-back.back-one { transform: translate(3px, -3px); }
  #fleet-list .fleet-stack-back.back-two { transform: translate(6px, -6px); }

  #fleet-list .fleet-stack-toggle {
    top: 14px;
    right: 14px;
    min-height: 44px;
  }

  #fleet-list .stack-quantity {
    min-width: 44px;
    justify-content: center;
    gap: 2px;
    padding: 6px;
  }

  #fleet-list .fleet-image > .stack-quantity { top: 6px; right: 6px; }
  #fleet-list .stack-quantity > span { font-size: 11px; }
  #fleet-list .stack-quantity strong { font-size: 20px; }
  #fleet-list .stack-quantity small { margin-left: 1px; font-size: 9px; }
  #fleet-list .stack-quantity-chevron { margin-left: 4px; width: 6px; height: 6px; }

  #fleet-list .fleet-stack-records li,
  #fleet-list .fleet-stack-more {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  #fleet-list .fleet-stack-records li > span { text-align: left; }

  /* Separate category and count/pin corners instead of squeezing one row. */
  #fleet-list .fleet-category,
  #profile-content .profile-ship-grid .fleet-category {
    top: auto;
    bottom: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 5px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  #profile-content .profile-ship-grid .profile-pin-badge {
    top: 6px;
    right: 6px;
    padding: 3px 5px;
    font-size: 10px;
  }

  #fleet-list .fleet-content,
  #profile-content .profile-ship-grid .fleet-content {
    min-width: 0;
    gap: 9px;
    padding: 13px 11px 12px;
  }

  #fleet-list .fleet-content > small,
  #profile-content .profile-ship-grid .fleet-content > small {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .025em;
    overflow-wrap: anywhere;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #fleet-list .fleet-content > h3,
  #profile-content .profile-ship-grid .fleet-content > h3 {
    margin: 7px 0 9px;
    font-size: clamp(17px, 4.4vw, 22px);
    line-height: 1.25;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
  }

  #fleet-list .ship-role-chips,
  #profile-content .profile-ship-grid .ship-role-chips {
    min-height: 0;
    gap: 4px;
    margin: 0 0 10px;
  }

  #fleet-list .ship-role-chip,
  #profile-content .profile-ship-grid .ship-role-chip {
    max-width: 100%;
    padding: 3px 5px;
    font-size: 10px;
    overflow-wrap: anywhere;
  }

  #fleet-list .ship-role-chip small,
  #profile-content .profile-ship-grid .ship-role-chip small { margin-right: 3px; }

  #profile-content .profile-ship-grid .ship-card-bio {
    min-height: 0;
    font-size: 11px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  #fleet-list .fleet-footer,
  #profile-content .profile-ship-grid .fleet-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 10px;
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  #fleet-list .fleet-footer b,
  #profile-content .profile-ship-grid .fleet-footer b {
    max-width: 100%;
    gap: 4px;
    font-size: 11px;
    white-space: normal;
  }

  #fleet-list .stack-price { font-size: 12px; }
  #fleet-list .stack-arrow { font-size: 15px; }
  #profile-content .profile-ship-grid .fleet-footer > span { max-width: 100%; }
}

/* role-platform.css wraps the phone navigation below the brand, whereas
   home.css still fixes the shared header to 72px. Give that second row room
   and keep both the measured indicator and its CSS fallback inside it. */
@media (max-width: 480px) {
  :root { --header-height: 92px; }

  .site-header {
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    gap: 0 8px;
    padding: 6px 16px 0;
  }

  .site-header .nav {
    position: relative;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-height: 44px;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    padding: 0;
    border-top: 0;
  }

  .site-header .nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px 4px;
    font-size: 12px;
  }

  .site-header .nav a.is-active::after {
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 2px;
    margin: 0;
  }

  .site-header .main-nav-indicator {
    top: auto;
    bottom: 0;
  }
}