/* 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-builder-dialog.modal-dialog { height: calc(100dvh - 2rem); max-height: calc(100dvh - 2rem); margin-block: 1rem; }
.avatar-builder-dialog .modal-content { height: 100%; min-height: 0; max-height: 100%; }
.avatar-builder-dialog .modal-header { flex: 0 0 auto; }
.avatar-builder-dialog .modal-title { overflow-wrap: anywhere; }
.avatar-builder-dialog .modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; container: avatar-body / size; }
.avatar-editor-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.avatar-editor { display: grid; grid-template-columns: minmax(11.25rem, .8fr) minmax(0, 1.6fr); grid-template-rows: auto minmax(0, 1fr); gap: 1rem 2rem; flex: 1 1 auto; min-height: 0; }
.avatar-editor__portrait { grid-column: 1; grid-row: 1 / span 2; min-width: 0; text-align: center; }
.avatar-editor__circle { width: min(100%, 300px, calc(100cqh - 12rem)); max-width: 300px; margin: auto; }
.avatar-editor__circle canvas { border-radius: 50%; background: var(--bs-tertiary-bg); }
.avatar-editor__preview-status { min-height: 3em; margin-block: .5rem; color: var(--bs-secondary-color); font-size: .875rem; }
.avatar-editor__mobile-controls { display: none; }
.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 { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1rem; }
.avatar-editor__options { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: .25rem .5rem 1rem .25rem; }
.avatar-editor__options:focus-visible { outline: 2px solid var(--thrive-feature-accent-dark); outline-offset: -2px; }
.avatar-editor fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; 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 .avatar-choice { display: grid; grid-template-columns: 24px minmax(0, 1fr) 1.25em; width: 100%; height: 100%; min-height: 48px; column-gap: .5rem; align-items: center; justify-content: start; text-align: left; font-weight: 600; }
.avatar-editor .avatar-choice--text { grid-template-columns: minmax(0, 1fr) 1.25em; }
.avatar-choice__label { min-width: 0; }
.avatar-choice__tick { visibility: hidden; justify-self: end; }
.avatar-choice[aria-pressed=true] .avatar-choice__tick { visibility: visible; }
.avatar-editor__original { width: min(100%, 18rem); margin-bottom: 1rem; }
.avatar-editor__eye-status { min-height: 3em; margin-bottom: .5rem; }
.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 { display: block; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bs-secondary-color); }
.avatar-editor__actions { flex: 0 0 auto; border-top: 1px solid var(--bs-border-color); margin-top: .75rem; padding-top: .75rem; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bs-body-bg); }
.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-builder-dialog.modal-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; min-height: 0; margin: 0; }
    .avatar-builder-dialog .modal-content { border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
    .avatar-builder-dialog .modal-body { padding: .75rem 1rem; }
    .avatar-editor { grid-template-columns: 112px minmax(0, 1fr); gap: .75rem; }
    .avatar-editor__portrait { grid-column: 1; grid-row: 1; align-self: center; }
    .avatar-editor__circle { width: 112px; max-width: 100%; }
    .avatar-editor__preview-status { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .avatar-editor__reset--desktop, .avatar-editor__categories { display: none; }
    .avatar-editor__mobile-controls { display: flex; flex-direction: column; gap: .375rem; grid-column: 2; grid-row: 1; min-width: 0; }
    .avatar-editor__mobile-controls label { margin: 0; }
    .avatar-editor__mobile-controls select { min-width: 0; }
    .avatar-editor__options { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
}
@media (max-width: 575.98px) {
    .avatar-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .avatar-gallery__card { padding: .75rem; }
}
/* When zoom/landscape leaves too little room, keep every control reachable in one scroll area. */
@container avatar-body (max-height: 26rem) {
    .avatar-editor-shell { overflow: auto; overscroll-behavior: contain; }
    .avatar-editor { flex: 0 0 auto; grid-template-rows: auto auto; }
    .avatar-editor__options { overflow: visible; scrollbar-gutter: auto; }
    .avatar-editor__circle { width: min(100%, 180px); }
}
@media (max-width: 359.98px) {
    .avatar-gallery { grid-template-columns: 1fr; }
}