/* My profile: full width like every other page, so its cards line up with the page gutters */
.profile-header { display: flex; align-items: center; gap: 18px; padding: 22px 24px; flex-wrap: wrap; }
.profile-avatar { width: 64px; height: 64px; font-size: 22px; }
.profile-identity { flex: 1; min-width: 200px; }
.profile-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
.profile-meta { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
/* Each card's head and body share the grid's rows, so headers and Save buttons line up across a row */
.profile-grid > .card { margin-bottom: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.profile-grid .card-head { align-items: flex-start; }
.profile-grid .form-actions { margin-top: auto; }
.profile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.profile-facts dt { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.profile-facts dd { margin: 2px 0 0; color: var(--text); }
.check-row { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check-row input { width: 16px; height: 16px; }
.form-actions { justify-content: flex-end; }

/* VAT spans the row: the form beside its history, stacked when the card is narrow. The history
   scrolls inside the card so a long timeline never stretches the page. */
.profile-grid > .profile-vat { grid-column: 1 / -1; container-type: inline-size; }
.profile-vat .card-head { gap: 8px 12px; flex-wrap: wrap; }
.profile-vat .card-head > .badge { margin-left: auto; }
.vat-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.vat-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.vat-history { min-width: 0; }
.vat-history .drawer-heading { margin-top: 0; }
.vat-history .rate-timeline { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
@container (max-width: 720px) {
  .vat-layout { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .vat-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .form-actions .btn { width: 100%; }
}