/* Load last, after the existing styles, i18n and product-redesign sheets.
   Layout only: no hidden content, language overrides or billing-state changes. */
html, body { min-width: 0; }

:is(#app, #modal-root) :is(.page-wrap, .page-header, .page-header > div,
  .card, .card__head, .card__head-copy, .card__body, .stat-card,
  .model-card, .model-card__head, .model-profile-card, .model-profile-card__top,
  .field, .field-row, .toolbar, .toolbar__filters, .health-row, .health-row > *,
  .notice > span, .policy-option > span, .modal__head > div) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Keep hierarchy while making long translated titles readable, not clipped. */
#app .page-header h1 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
#app .hero h1 { font-size: clamp(2rem, 1.5rem + 3vw, 3.25rem); line-height: 1.25; }
#app .auth-card h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
#app :is(.section-heading h2, .integration-panel h2, .cta-panel h2, .product-spotlight h2) {
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  line-height: 1.35;
}
:is(#app, #modal-root) :is(.page-header h1, .card__head h2, .card__head h3,
  .modal__head h2, .hero h1, .auth-card h1, .section-heading h2,
  .product-spotlight h2, .integration-panel h2, .cta-panel h2) {
  letter-spacing: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
#app .page-header { flex-wrap: wrap; gap: 1rem; margin-block-end: 1.25rem; }
#app .page-header > div:first-child { flex: 1 1 18rem; }
#app .page-header__actions { flex: 0 1 auto; max-inline-size: 100%; }
#app .stat-card { padding: 1rem; overflow: visible; }
#app .stat-card__value {
  margin-block: .75rem .5rem;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
#app .stat-card__meta { flex-wrap: wrap; }
#app .balance-card { min-inline-size: 0; }
#app .balance-card__value {
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  letter-spacing: normal;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
#app .balance-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  font-size: .8125rem;
  line-height: 1.6;
}
#app .balance-card__foot > * { min-inline-size: 0; max-inline-size: 100%; }
#app .balance-card__foot :is(span, p, small) {
  font-size: .8125rem;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
:is(#app, #modal-root) :is(.page-header p, .card__head-copy p, .modal__head p,
  .stat-card__label, .stat-card__meta, .health-row, .field__hint, .table-secondary,
  .model-card__description, .model-card__copy span, .model-card__stat span,
  .model-card__stat strong, .model-profile-card__id, .policy-option small) {
  font-size: .8125rem;
  line-height: 1.6;
}
:is(#app, #modal-root) :is(.table-primary, .table-secondary, .stat-card__label,
  .stat-card__meta, .health-row, .model-card__copy strong, .model-card__copy span,
  .model-card__stat span, .model-card__stat strong, .model-card__description,
  .model-profile-card__id, .model-profile-card p, .policy-option small,
  .model-permission-option small, .notice, .badge) {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}
:is(#app, #modal-root) :is(.health-row, .card__head, .modal-inline-actions,
  .modal__foot, .toolbar__filters, .table-actions) { flex-wrap: wrap; }
:is(#app, #modal-root) .health-row { align-items: baseline; gap: .5rem 1rem; }
:is(#app, #modal-root) .health-row > :first-child { flex: 1 1 10rem; }

/* A translated button can grow vertically; icon-only controls remain 44x44. */
:is(#app, #modal-root) :is(.btn, .nav-item, .dropdown-action) {
  min-width: 0;
  min-inline-size: 44px;
  min-block-size: 44px;
  max-inline-size: 100%;
  block-size: auto;
  padding-block: .625rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
  text-align: center;
}
:is(#app, #modal-root) :is(.btn, .nav-item) > .icon { flex-shrink: 0; }
:is(#app, #modal-root) :is(.btn--icon, .modal__close, .input-action) {
  inline-size: 44px;
  min-inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
}
#app .user-button { min-inline-size: 44px; min-block-size: 44px; }
:is(#app, #modal-root) :is(.input, .select, textarea, .language-picker select) {
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 44px;
  font-size: 1rem;
  line-height: 1.5;
}
:is(#app, #modal-root) .input-wrap .input { padding-inline-end: 3.5rem; }
html[dir="rtl"] :is(#app, #modal-root) .input-wrap :is(input[type="email"], input[type="url"], input[autocomplete="username"], input[dir="ltr"]) {
  padding-inline-start: 3.5rem;
  padding-inline-end: .8125rem;
}
:is(#app, #modal-root) :is(.policy-option, .model-permission-option, .checkbox) {
  min-inline-size: 44px;
  min-block-size: 44px;
  overflow-wrap: anywhere;
}
:is(#app, #modal-root) :is(.policy-option, .model-permission-option) input { flex: 0 0 auto; }
:is(#app, #modal-root) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary-700, #2255d7);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
  scroll-margin-block: 1rem;
}
@media (forced-colors: active) {
  :is(#app, #modal-root) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}

/* Scroll the table/code region, never make the whole page horizontally scroll. */
:is(#app, #modal-root) .table-wrap {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
:is(#app, #modal-root) :is(.data-table th, .data-table td) { line-height: 1.55; }
:is(#app, #modal-root) .data-table th { white-space: normal; overflow-wrap: anywhere; }
:is(#app, #modal-root) :is(pre, .secret-box code, .endpoint-box code, .snippet-box code) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
:is(#app, #modal-root) .secret-box code { font-size: .8125rem; }

/* Entire dialogs can scroll, including their final action and close controls. */
#modal-root .modal-backdrop { padding: .5rem; overscroll-behavior: contain; }
#modal-root .modal {
  min-inline-size: 0;
  max-inline-size: 100%;
  max-height: calc(100vh - 1rem);
  max-block-size: calc(100dvh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 1rem;
}
#modal-root .modal--lg:has(.subscription-plans-modal) { width: min(54rem, 100%); }
#modal-root :is(.modal__head, .modal__body, .modal__foot) { padding: 1rem; }
#modal-root .modal__head h2 { font-size: 1.125rem; line-height: 1.5; }
#modal-root .modal__foot { display: flex; flex-wrap: wrap; }
#modal-root .modal__foot .btn { flex: 1 1 10rem; width: auto; }

/* Wallet keeps a small summary. The full offer list lives only in its dialog. */
#app .billing-summary { display: grid; gap: .75rem; min-inline-size: 0; }
#app .billing-summary__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .375rem 1rem;
  min-inline-size: 0;
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#app .billing-summary__item > * { min-inline-size: 0; max-inline-size: 100%; }
#app .billing-settings { margin-block-start: 1rem; min-inline-size: 0; }
#app .billing-settings__toggle {
  min-block-size: 44px;
  padding-block: .75rem;
  color: var(--ink-800, #1d2a40);
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#modal-root .subscription-plans-modal { min-inline-size: 0; font-size: .875rem; line-height: 1.65; }
#modal-root .subscription-plans-notice { margin-block: 1rem 0; overflow-wrap: anywhere; }
#modal-root .subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  align-items: stretch;
  min-inline-size: 0;
}
#modal-root .subscription-plan-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--border-strong, #c4cfdf);
  border-radius: .625rem;
  background: var(--surface, #fff);
  overflow-wrap: anywhere;
  word-break: normal;
}
#modal-root .subscription-plan-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
#modal-root .subscription-plan-card__head > * { min-inline-size: 0; margin: 0; font-size: 1rem; line-height: 1.5; }
#modal-root .subscription-plan-price { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.4; }
#modal-root .subscription-plan-quota { margin: 0; font-size: 1rem; line-height: 1.6; }
#modal-root .subscription-plan-rules { margin: 0; color: var(--ink-600, #53647a); font-size: .875rem; line-height: 1.7; }
#modal-root .subscription-plan-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: auto; }
#modal-root .subscription-plan-actions .btn { flex: 1 1 10rem; }
:is(#app, #modal-root) :is(.billing-amount, .subscription-plan-price bdi, .subscription-plan-quota bdi) {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
:is(#app, #modal-root) bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 760px) {
  /* A wrapping translated toolbar must take up space, not cover page content. */
  #app .topbar {
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;
    inline-size: 100%;
    height: auto;
    min-block-size: 64px;
    flex-wrap: wrap;
    padding: .625rem .875rem;
  }
  #app :is(.topbar__left, .topbar__right) { min-inline-size: 0; max-inline-size: 100%; flex-wrap: wrap; }
  #app .topbar__right { margin-inline-start: auto; }
  #app .portal-main { margin-inline: 0; padding-block-start: 1.25rem; }
  #app .page-header > div:first-child { flex-basis: auto; }
  :is(#app, #modal-root) .policy-options { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #app :is(.page-header__actions, .modal-inline-actions) { display: flex; flex-wrap: wrap; inline-size: 100%; }
  #app :is(.page-header__actions, .modal-inline-actions) .btn { flex: 1 1 10rem; width: auto; }
  #app :is(.stats-grid, .model-card__stats) { grid-template-columns: 1fr; }
  :is(#app, #modal-root) .data-table--stack td {
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem .75rem;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
  }
  :is(#app, #modal-root) .data-table--stack td::before {
    min-inline-size: 0;
    flex: 1 1 8rem;
    font-size: .8125rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-align: start;
  }
  :is(#app, #modal-root) .data-table--stack td > * { min-inline-size: 0; max-inline-size: 100%; }
  #app .admin-table-actions { min-width: 0; min-inline-size: 0; }
}