/* Profile-only responsive repair.
   Preserve the original Codex desktop presentation and color system.
   The center column can become narrow before the viewport reaches phone size;
   use its own inline size rather than viewport breakpoints. */
.pmo-profile { container: pmo-profile / inline-size; }
.pmo-profile-detail,
.pmo-profile-title,
.pmo-profile-head > .pmo-profile-actions { min-width: 0; }
.pmo-profile-detail > p { overflow-wrap: break-word; word-break: normal; }

@media (max-width: 1360px) {
@container pmo-profile (max-width: 850px) {
  .pmo-profile-head {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
  }
  .pmo-profile-head > .pmo-profile-picture {
    grid-column: 1;
    grid-row: 1 / span 2;
    float: none;
    margin-right: 0;
  }
  .pmo-profile-head > .pmo-profile-detail {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }
  .pmo-profile-head > .pmo-profile-actions {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin-top: 13px;
    padding-top: 0;
    clear: none;
    align-content: start;
  }
  .pmo-profile-head > .pmo-profile-actions > button,
  .pmo-profile-head > .pmo-profile-actions > a {
    max-width: 100%;
    white-space: normal;
  }
}

@container pmo-profile (max-width: 520px) {
  .pmo-profile-head {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px !important;
  }
  .pmo-profile-head > .pmo-profile-picture {
    margin-top: -57px;
  }
  .pmo-profile-head > .pmo-profile-picture .pmo-face,
  .pmo-profile-head > .pmo-profile-picture .pmo-demo-profile-avatar {
    width: 96px;
    height: 96px;
  }
  .pmo-profile-head > .pmo-profile-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
  }
  .pmo-profile-head > .pmo-profile-actions > button,
  .pmo-profile-head > .pmo-profile-actions > a {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pmo-profile-head .pmo-profile-title h1 {
    font-size: 23px;
    line-height: 1.15;
  }
  .pmo-profile-head .pmo-profile-detail > p {
    margin: 7px 0;
  }
  .pmo-profile-head .pmo-profile-stats {
    gap: 8px 13px;
  }
}
@container pmo-profile (max-width: 345px) {
  .pmo-profile-head > .pmo-profile-detail {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

} /* viewport gate: desktop layout is untouched above 1360px */