/* Window-size adaptation, not device detection. Keep the approved phone layout,
   with a bounded reading width for inner displays and desktop split windows. */
.growth-shell.portal-chrome-shell {
  width: 100%;
  min-width: 0;
  height: 100dvh;
  container: portal-content / inline-size;
  --portal-gutter: 20px;
}

.growth-shell.portal-chrome-shell > main.growth-main {
  min-width: 0;
  scroll-padding-block: 16px;
  padding-left: max(var(--portal-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--portal-gutter), env(safe-area-inset-right, 0px));
}

/* These approved reference pages already own their content gutters. */
.growth-shell.portal-chrome-shell:is(.invite-reference-shell, .me-reference-shell) > main.growth-main {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.growth-shell.portal-chrome-shell > .growth-header.portal-header {
  flex-wrap: wrap;
  padding-left: max(var(--portal-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--portal-gutter), env(safe-area-inset-right, 0px));
}

/* A zoomed detail title can use a full row instead of becoming one character wide. */
.growth-shell.portal-chrome-shell > .growth-header.portal-header .portal-header-title { flex: 1 1 9rem; }
.growth-shell.portal-chrome-shell > .growth-header.portal-header .growth-wallet { margin-left: auto; }

.growth-shell.portal-chrome-shell > .growth-nav {
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
}

.growth-shell.portal-chrome-shell > .growth-nav a {
  min-height: 48px;
  min-width: 0;
  padding: 4px 2px;
}

.growth-shell.portal-chrome-shell :is(.growth-page, .growth-page > *, .purchase-row > *, .growth-settings > *) {
  min-width: 0;
}

/* Text remains selectable; only controls suppress long-press selection. */
.growth-shell.portal-chrome-shell :is(button, summary, .growth-nav a) {
  -webkit-user-select: none;
  user-select: none;
}

/* Match the shared dark canvas. The light reference and its artwork are intact. */
.dark .growth-shell.portal-chrome-shell.invite-reference-shell > main.growth-main,
.dark .growth-shell.portal-chrome-shell.invite-reference-shell .referral-growth.invite-reference {
  background: var(--portal-canvas);
}

/* Narrow cover displays and narrow multi-window panes retain readable controls. */
@media (max-width: 359px) {
  .growth-shell.portal-chrome-shell { --portal-gutter: 14px; }

  .growth-shell.portal-chrome-shell > .growth-header.portal-header { gap: 8px; }
  .growth-shell.portal-chrome-shell > .growth-header.portal-header .portal-header-title { gap: 4px; }
  .growth-shell.portal-chrome-shell > .growth-header.portal-header .growth-wallet { padding-inline: 8px; }
}

/* Container units follow the actual pane, including when browser text is enlarged.
   Financial target / payment / gap values retain their labels and DOM order. */
@container portal-content (max-width: 24rem) {
  /* Status text must not squeeze the referrer name/address into a few letters. */
  .growth-shell.portal-chrome-shell .my-referrer summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 16px;
    gap: 6px 10px;
  }
  .growth-shell.portal-chrome-shell .my-referrer-icon { grid-column: 1; grid-row: 1 / 3; }
  .growth-shell.portal-chrome-shell .my-referrer-heading { grid-column: 2; grid-row: 1; }
  .growth-shell.portal-chrome-shell .my-referrer-status { grid-column: 2; grid-row: 2; max-width: none; }
  .growth-shell.portal-chrome-shell .my-referrer summary > svg { grid-column: 3; grid-row: 1 / 3; }
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-topup-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-topup-metrics > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
  }
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-topup-metrics dt { min-height: 0; }
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-topup-metrics dd { text-align: end; margin: 0; }
}

@container portal-content (max-width: 20rem) {
  .growth-shell.portal-chrome-shell .team-r15 .r15-team-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .growth-shell.portal-chrome-shell .invite-reference .referral-pass {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .growth-shell.portal-chrome-shell .invite-reference .referral-pass > * {
    grid-column: 1;
    grid-row: auto;
  }
  .growth-shell.portal-chrome-shell .invite-reference .referral-link-row { width: 100%; }
  .growth-shell.portal-chrome-shell .invite-reference .referral-code { width: 100%; }
  .growth-shell.portal-chrome-shell .invite-reference .referral-code-value { flex-wrap: wrap; }
  .growth-shell.portal-chrome-shell .invite-reference .referral-intro { grid-template-columns: minmax(0, 1fr); }
  .growth-shell.portal-chrome-shell .invite-reference .invite-gift { display: none; }
  .growth-shell.portal-chrome-shell .me-reference .growth-menu-link { flex-wrap: wrap; }
  .growth-shell.portal-chrome-shell .me-reference .growth-menu-link > strong { flex-basis: 45%; }
}

/* At a large default font, two financial summaries need their own full rows. */
@container portal-content (max-width: 14rem) {
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-current-tier { grid-template-columns: minmax(0, 1fr); }
  .growth-shell.portal-chrome-shell .purchase-reference .purchase-current-total {
    border-left: 0;
    border-top: 1px solid var(--growth-line);
    padding: 12px 0 0;
  }
  .growth-shell.portal-chrome-shell .purchase-tier-option { grid-template-columns: 32px minmax(0, 1fr) 20px; }
  .growth-shell.portal-chrome-shell .purchase-tier-option > .node-badge { grid-column: 1; grid-row: 1 / 3; }
  .growth-shell.portal-chrome-shell .purchase-tier-description { grid-column: 2; grid-row: 1; }
  .growth-shell.portal-chrome-shell .purchase-tier-gap { grid-column: 2; grid-row: 2; text-align: start; }
  .growth-shell.portal-chrome-shell .purchase-tier-option > input { grid-column: 3; grid-row: 1 / 3; }
}
@container portal-content (max-width: 12rem) {
  .growth-shell.portal-chrome-shell > .growth-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Expanded foldables: use extra room for existing data, not stretched typography. */
@media (min-width: 600px) {
  .growth-shell.portal-chrome-shell { max-width: 720px; --portal-gutter: 28px; }
  .growth-shell.portal-chrome-shell > .growth-nav {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .growth-shell.portal-chrome-shell .referral-growth.invite-reference { padding-inline: 28px; }
  .growth-shell.portal-chrome-shell .growth-page.me-reference { padding-inline: 28px; }
}

@container portal-content (min-width: 34rem) {
  .growth-shell.portal-chrome-shell .r3-network-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .growth-shell.portal-chrome-shell .r3-network-stats > .r3-network-volume {
    grid-column: auto;
    border-top: 0;
    border-left: 1px solid var(--growth-line);
    padding-top: 0;
    padding-left: 16px;
  }
}

/* Low-height landscape / split views give content room without removing navigation. */
@media (max-height: 500px) and (min-width: 480px) {
  .growth-shell.portal-chrome-shell > .growth-header.portal-header {
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }
  .growth-shell.portal-chrome-shell > .growth-nav { padding-top: 4px; }
  .growth-shell.portal-chrome-shell > .growth-nav a { flex-direction: row; gap: 6px; }
}

/* Sheets remain reachable with the keyboard open and beside a landscape cutout. */
.growth-shell.portal-chrome-shell :is(.purchase-dialog, .purchase-tier-dialog, .purchase-upgrade-dialog) {
  max-width: min(560px, calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overscroll-behavior: contain;
}
.growth-shell.portal-chrome-shell .r15-team-dialog {
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.growth-shell.portal-chrome-shell .r15-team-dialog > [role="dialog"] { max-height: 100%; }

/* Progressive enhancement for a viewport spanning a physical hinge. Choose one
   complete segment; unsupported browsers retain the window-sized layout above. */
@media (horizontal-viewport-segments: 2), (vertical-viewport-segments: 2) {
  .growth-shell.portal-chrome-shell {
    --portal-segment-left: env(viewport-segment-left 0 0, 0px);
    --portal-segment-top: env(viewport-segment-top 0 0, 0px);
    --portal-segment-width: env(viewport-segment-width 0 0, 100vw);
    --portal-segment-height: env(viewport-segment-height 0 0, 100dvh);
    width: min(720px, var(--portal-segment-width));
    height: var(--portal-segment-height);
    margin-top: var(--portal-segment-top);
    margin-left: calc(var(--portal-segment-left) + max(0px, (var(--portal-segment-width) - 720px) / 2));
    margin-right: 0;
  }

  .growth-shell.portal-chrome-shell .r15-team-dialog {
    inset: auto;
    left: var(--portal-segment-left);
    top: var(--portal-segment-top);
    width: var(--portal-segment-width);
    height: var(--portal-segment-height);
    box-sizing: border-box;
  }

  /* Native dialogs live in the top layer, so they need the segment bounds too. */
  .growth-shell.portal-chrome-shell :is(.purchase-dialog, .purchase-tier-dialog, .purchase-upgrade-dialog) {
    inset: auto;
    left: calc(var(--portal-segment-left) + max(12px, (var(--portal-segment-width) - 560px) / 2));
    top: calc(var(--portal-segment-top) + max(12px, env(safe-area-inset-top, 0px)));
    width: min(560px, calc(var(--portal-segment-width) - 24px));
    max-width: calc(var(--portal-segment-width) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px);
    max-height: calc(var(--portal-segment-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    margin: 0;
  }
}