/* Avatar-specific layout only. Colours, controls and cards inherit Thrive/Bootstrap tokens. */
.avatar-preview { width: 100%; }
.avatar-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1.5rem; margin-block: 1.5rem; }
.avatar-gallery__card { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; gap: 1rem; padding: 1rem; }
.avatar-gallery__choice { cursor: pointer; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.avatar-gallery__choice img { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--bs-tertiary-bg); }
.avatar-gallery__summary { color: var(--bs-secondary-color); font-size: .875rem; }
.avatar-gallery__card button { min-height: 3rem; white-space: normal; }
.avatar-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.avatar-preview > p { margin-block: .5rem; padding: .5rem; font-size: .875rem; color: var(--bs-secondary-color); }
.avatar-preview > p[role=alert] { color: var(--bs-danger-text-emphasis); }
.avatar-editor { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.6fr); gap: 2rem; }
.avatar-editor__portrait { text-align: center; }
.avatar-editor__circle { max-width: 300px; margin: auto; }
.avatar-editor__circle canvas { border-radius: 50%; background: var(--bs-tertiary-bg); }
.avatar-editor button, .avatar-editor__actions button { min-height: 3rem; white-space: normal; overflow-wrap: anywhere; }
.avatar-editor button[aria-pressed=true] { color: var(--bs-body-color); border-color: var(--thrive-feature-accent-dark); background: var(--thrive-feature-accent-light); box-shadow: inset 0 0 0 1px var(--thrive-feature-accent-dark); }
.avatar-editor button[aria-pressed=true]:focus-visible { box-shadow: inset 0 0 0 1px var(--thrive-feature-accent-dark), var(--thrive-feature-focus-ring); }
.avatar-editor__categories { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1rem; }
.avatar-editor__options { min-height: 255px; }
.avatar-editor fieldset { border: 0; padding: 0; margin: 1.5rem 0; min-width: 0; }
.avatar-editor legend { font-size: 1.125rem; font-weight: 600; margin-bottom: .75rem; }
.avatar-editor__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; }
.avatar-editor__choice { min-width: 0; }
.avatar-editor__choice button { display: flex; width: 100%; height: 100%; gap: .5rem; align-items: center; text-align: left; }
.avatar-editor__choice:has(small) button { height: auto; }
.avatar-editor__choice small { display: block; color: var(--bs-secondary-color); line-height: 1.5; padding-top: .5rem; }
.avatar-editor__swatch { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: 50%; border: 1px solid var(--bs-secondary-color); }
.avatar-editor__actions { border-top: 1px solid var(--bs-border-color); padding-top: 1.5rem; }
.avatar-preset-preview { max-width: 22rem; margin-block: 1.5rem; }
.avatar-preset-preview .avatar-preview { margin-bottom: 1rem; }
.avatar-preset-preview .avatar-preview canvas { border-radius: 50%; }
@media (max-width: 767.98px) {
    .avatar-editor { grid-template-columns: 1fr; gap: 1rem; }
    .avatar-editor__circle { max-width: 180px; }
    .avatar-editor__options { min-height: 0; }
}
@media (max-width: 575.98px) {
    .avatar-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .avatar-gallery__card { padding: .75rem; }
    .avatar-builder-dialog.modal-dialog { width: 100%; max-width: none; min-height: 100%; margin: 0; }
    .avatar-builder-dialog .modal-content { min-height: 100dvh; border-radius: 0; }
    .avatar-editor__actions { position: sticky; bottom: 0; background: var(--bs-body-bg); padding-bottom: 1rem; z-index: 1; }
}
@media (max-width: 359.98px) {
    .avatar-gallery { grid-template-columns: 1fr; }
}