/* Shared intrinsic sizing: let card content wrap instead of widening the viewport. */
.page-content, .section-card, .section-card-body { min-width: 0; }
.section-card-header { flex-wrap: wrap; }
.section-card-header > *, .info-item { min-width: 0; }
.info-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.info-value { overflow-wrap: anywhere; }
.settings-page { width: 100%; min-width: 0; }
.settings-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 16px; }
.settings-tabs .tab-btn { min-width: 0; min-height: 44px; padding: 10px 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.settings-tabs .tab-btn:focus-visible, .settings-page label:has(input[type=file]:focus-visible) { outline: 2px solid #b71c1c; outline-offset: 3px; }
.settings-identity { display: flex; align-items: center; gap: 20px; }
.settings-identity > :first-child { flex-shrink: 0; }
.settings-identity > :last-child { min-width: 0; overflow-wrap: anywhere; }
.settings-checkbox { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: #b71c1c; }
.settings-page [role=tabpanel] { min-width: 0; }
.settings-page .section-card:has(.filterable-select) { overflow: visible; }
/* A desktop flex-basis becomes a forced 16rem HEIGHT when headers stack. */
@media (max-width: 767px) {
  .if-ux-page-header > .min-w-0 { flex-basis: auto; }
}
@media (max-width: 639px) {
  .section-card-header, .section-card-body { padding: 16px; }
  .section-card-body.p-0 { padding: 0; }
  .settings-tabs .tab-btn { flex-direction: column; gap: 5px; font-size: 12px; }
  .settings-identity { align-items: flex-start; gap: 12px; }
  .settings-page .form-input { font-size: 16px; }
  .settings-page .btn { max-width: 100%; white-space: normal; }
  .settings-page .section-card-header > span { width: 100%; }
}