/* Shared glyph geometry. The drawing is smaller than its touch target. */
:root { --icon-size: 1.25rem; --icon-small: 1rem; --icon-surface: rgb(243 243 245 / .94); }
.ui-icon { display: block; flex: none; width: var(--icon-size); height: var(--icon-size); pointer-events: none; }
.close-x, .modal__heart-btn, .modal__image-nav { display: grid; place-items: center; width: var(--touch); height: var(--touch); min-width: var(--touch); min-height: var(--touch); padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--icon-surface); color: var(--fg); box-shadow: none; cursor: pointer; }
.close-x:hover, .modal__heart-btn:hover, .modal__image-nav:hover { background: var(--surface); color: var(--fg); transform: none; }
.close-x .ui-icon, .modal__heart-btn .ui-icon, .modal__image-nav .ui-icon { width: var(--icon-size); height: var(--icon-size); }
.close-x:focus-visible, .modal__heart-btn:focus-visible, .modal__image-nav:focus-visible, .page-header__nav-toggle:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }
.upload-form .close-x { background: transparent; border-color: transparent; }
.upload-form .close-x:hover { background: var(--bg-overlay); }
.modal__heart-btn .modal__heart-icon, .modal__heart-btn:hover .modal__heart-icon { fill: none; stroke: currentColor; }
.modal__heart-btn--active, .modal__heart-btn--active:hover { color: var(--focus-color); }
.modal__heart-btn--active .modal__heart-icon, .modal__heart-btn--active:hover .modal__heart-icon { fill: currentColor; }
.modal__image-nav { margin-top: calc(var(--touch) / -2); }
.gallery__upload-fab-btn .ui-icon { width: var(--icon-small); height: var(--icon-small); }
.gallery__search-clear { display: grid; place-items: center; }
.gallery__search-clear .ui-icon { width: var(--icon-small); height: var(--icon-small); }

/* Menu and close occupy the same fixed-size control. */
.page-header__nav-toggle { width: var(--touch); height: var(--touch); place-items: center; }
.page-header__nav-toggle::after { content: none; }
.page-header__nav-toggle .ui-icon--close { display: none; }
.page-header__nav--open .page-header__nav-toggle .ui-icon--menu { display: none; }
.page-header__nav--open .page-header__nav-toggle .ui-icon--close { display: block; }
@media (max-width: 768px) { .page-header__nav-toggle { display: grid; } }

/* Native disclosures share one state symbol, independent of the font. */
.user-form__recovery > summary, .user-form__disclosure > summary,
.upload-form__photo-tips > summary, .upload-form__pickup > summary,
.modal__description > summary, .page-footer__more > summary { display: flex; align-items: center; gap: .5rem; list-style: none; min-height: var(--touch); }
.upload-form__photo-tips > summary, .upload-form__pickup > summary,
.modal__description > summary { justify-content: space-between; }
.user-form__recovery > summary::-webkit-details-marker, .user-form__disclosure > summary::-webkit-details-marker,
.upload-form__photo-tips > summary::-webkit-details-marker, .upload-form__pickup > summary::-webkit-details-marker,
.modal__description > summary::-webkit-details-marker, .page-footer__more > summary::-webkit-details-marker { display: none; }
.upload-form__pickup > summary::before, .modal__description > summary::before { content: none; }
.user-form__recovery > summary::after, .user-form__disclosure > summary::after,
.upload-form__photo-tips > summary::after, .upload-form__pickup > summary::after,
.modal__description > summary::after, .page-footer__more > summary::after {
  content: ''; display: block; flex: 0 0 var(--icon-small); width: var(--icon-small); height: var(--icon-small); margin: 0; border: 0;
  background: currentColor; -webkit-mask: url('../icons/chevron-down.svg') center / contain no-repeat; mask: url('../icons/chevron-down.svg') center / contain no-repeat; transform: none; transition: transform var(--motion-fast);
}
.user-form__recovery[open] > summary::after, .user-form__disclosure[open] > summary::after,
.upload-form__photo-tips[open] > summary::after, .upload-form__pickup[open] > summary::after,
.modal__description[open] > summary::after, .page-footer__more[open] > summary::after { transform: rotate(180deg); }
.user-form__email-state:not(.user-form__email-state--pending)::before { content: ''; width: var(--icon-small); height: var(--icon-small); background: var(--focus-color); -webkit-mask: url('../icons/check.svg') center / contain no-repeat; mask: url('../icons/check.svg') center / contain no-repeat; }
.admin-panel__toggle .admin-panel__arrow { width: var(--icon-small); height: var(--icon-small); }
.info-btn { display: inline-grid; place-items: center; color: var(--fg); background: transparent; }
.info-btn .ui-icon { width: var(--icon-size); height: var(--icon-size); }
.chat-header__back .ui-icon, .chat-composer__send .ui-icon { width: var(--icon-size); height: var(--icon-size); }
.modal__inquiry-link { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: var(--touch); padding: .5rem 1rem; border-radius: var(--radius-control); background: var(--fg); color: var(--fg-inverse); text-decoration: none; }
.modal__inquiry-link:hover { background: var(--fg-strong); }

/* Native select remains native; the closed arrow uses the same glyph. */
.gallery__sort { position: relative; }
.gallery__sort select { appearance: none; padding-inline-end: 2rem; }
.gallery__sort::after { content: ''; position: absolute; right: .65rem; top: 50%; width: var(--icon-small); height: var(--icon-small); background: var(--fg); -webkit-mask: url('../icons/chevron-down.svg') center / contain no-repeat; mask: url('../icons/chevron-down.svg') center / contain no-repeat; transform: translateY(-50%); pointer-events: none; }