/* State feedback only. Timings never gate a request, focus change or final state. */
button, .button, summary, input, select, textarea { touch-action: manipulation; }
:is(button, .button, summary, .primary-navigation a, .department-sidebar a, .management-section-nav a) {
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}
:is(button, .button, summary):not(:disabled):not(.disabled):active {
  filter: brightness(.94); transition-duration: var(--motion-press); transform: none;
}
:is(input, select, textarea) { transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast); }
:is(input, select, textarea):focus-visible { border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-focus-soft); outline: 2px solid var(--color-focus); outline-offset: 1px; }
:is(a, button, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.selection-viewer :is(a, button, summary):focus-visible { outline-color: var(--color-on-dark); }
dialog :is(a, button, summary):focus-visible { outline-color: var(--color-focus); }
:is(button, input, select, textarea):disabled { cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--color-surface-subtle); }
:is(input, select, textarea):disabled { background: var(--color-surface-subtle); color: var(--color-muted); opacity: .7; }
[aria-invalid="true"], .field:has(.errorlist) :is(input, select, textarea) { border-color: var(--color-danger); }
:is(.nav-toggle, .drawer-close, .account-trigger, .account-modal-close, .project-flow-button):hover { background: var(--color-surface-subtle); }
:is(.primary-navigation a, .department-sidebar a, .management-section-nav a):active { background: var(--color-surface-pressed); }
.management-table tbody tr, .roster-table tbody tr, .result-row, .photo-marker-card, .selection-product-choice { transition: background-color var(--motion-fast), border-color var(--motion-fast); }
@media (hover: hover) {
  .outdoor-project-lifecycle-trigger:hover, .student-search-results button:hover, .account-menu-item:hover { background: var(--color-surface-hover); }
  .photo-marker-card:has(button:hover), .selection-result-card:has(button:hover) { border-color: var(--color-border-strong); }
}
.selection-want-button { background: var(--color-on-dark); border-color: var(--color-on-dark); color: var(--color-photo); }
.selection-want-button.active { background: var(--color-success-soft); border-color: var(--color-success-soft); color: var(--color-success); }
.selection-quick-button:hover { background: color-mix(in srgb, var(--color-photo-toolbar) 85%, var(--color-on-dark)); }
.selection-save-feedback { grid-column: 1 / -1; min-height: 1.25em; margin: 0; color: var(--color-on-dark-muted); font: var(--text-caption)/1.25 var(--font-ui); }
.voice-switch i, [role="switch"] i { transition: transform var(--motion-normal) var(--ease-standard), background-color var(--motion-fast); }

/* Native dialog retains top-layer, focus, Escape and immediate .open semantics. */
@supports (transition-behavior: allow-discrete) {
  dialog {
    opacity: 0; translate: 0 var(--motion-reveal-offset);
    transition: opacity var(--motion-exit) var(--ease-standard), translate var(--motion-exit) var(--ease-standard), display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;
  }
  dialog[open] { opacity: 1; translate: 0 0; transition-duration: var(--motion-enter); transition-timing-function: var(--ease-enter); }
  dialog:not([open]) { pointer-events: none; }
  dialog.workspace-drawer { translate: var(--motion-drawer-offset) 0; }
  dialog.workspace-drawer[open] { translate: 0 0; }
  dialog::backdrop { background: var(--color-overlay); opacity: 0; transition: opacity var(--motion-exit) var(--ease-standard), display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete; }
  dialog[open]::backdrop { opacity: 1; transition-duration: var(--motion-enter); }
  @starting-style {
    dialog[open] { opacity: 0; translate: 0 var(--motion-reveal-offset); }
    dialog.workspace-drawer[open] { translate: var(--motion-drawer-offset) 0; }
    dialog[open]::backdrop { opacity: 0; }
  }
  .account-popover, .student-search-results, [data-customer-candidates], .ui-filter-extra {
    opacity: 1; translate: 0 0;
    transition: opacity var(--motion-fast), translate var(--motion-fast), display var(--motion-fast) allow-discrete;
  }
  .account-popover[hidden], .student-search-results[hidden], [data-customer-candidates][hidden] { opacity: 0; translate: 0 -4px; }
  .account-popover[hidden], .student-search-results[hidden], [data-customer-candidates][hidden] { pointer-events: none; }
  @starting-style {
    .account-popover:not([hidden]), .student-search-results:not([hidden]), [data-customer-candidates]:not([hidden]), .ui-filter-extra { opacity: 0; translate: 0 -4px; }
  }
}
@supports selector(details::details-content) {
  details::details-content { opacity: 0; transition: opacity var(--motion-normal), content-visibility var(--motion-normal) allow-discrete; }
  details[open]::details-content { opacity: 1; }
}
.business-content { animation: ui-content-ready var(--motion-content) var(--ease-enter); }
@keyframes ui-content-ready { from { opacity: .94; } to { opacity: 1; } }
.notice, [data-management-error] { animation: ui-feedback-ready var(--motion-normal) var(--ease-enter); }
@keyframes ui-feedback-ready { from { opacity: .5; } to { opacity: 1; } }

/* Busy feedback preserves each control's text, dimensions and submitted value. */
[data-ui-busy] { cursor: progress !important; }
button[data-ui-busy], .button[data-ui-busy] { position: relative; color: transparent !important; opacity: .8; transition-property: background-color, border-color, opacity; }
button[data-ui-busy] > *, .button[data-ui-busy] > * { opacity: 0; }
button[data-ui-busy]::after, .button[data-ui-busy]::after {
  content: ''; position: absolute; width: 1rem; height: 1rem; inset: calc(50% - .5rem) auto auto calc(50% - .5rem);
  border: 1.5px solid var(--color-border-strong); border-top-color: var(--color-ink); border-radius: 50%;
  animation: ui-spin var(--motion-spin) linear infinite; pointer-events: none;
}
.button.primary[data-ui-busy]::after, .selection-quick-button[data-ui-busy]::after {
  border-color: color-mix(in srgb, var(--color-on-dark) 35%, transparent); border-top-color: var(--color-on-dark);
}
.selection-want-button[data-ui-busy]::after { border-color: var(--color-border-strong); border-top-color: var(--color-photo); }
.today-booking .button.primary[data-ui-busy]::after { border-color: var(--color-border-strong); border-top-color: var(--color-ink); }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-request-status { display: flex; align-items: center; gap: var(--space-2); position: fixed; z-index: 150; bottom: var(--space-4); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); padding: var(--space-2) var(--space-3); background: var(--color-ink); color: var(--color-on-dark); border-radius: var(--radius-control); box-shadow: var(--shadow-overlay); font: var(--text-caption)/1.6 var(--font-ui); pointer-events: none; }
.ui-request-status:empty { display: none; }
[data-management-content][aria-busy="true"] { opacity: .65; cursor: progress; }
[data-management-content] { transition: opacity var(--motion-fast); }
[data-management-nav] a[data-ui-busy], a[data-ui-navigation]:not(.button) { text-decoration: underline; text-underline-offset: .3em; }
[data-binding-control][aria-busy="true"] [data-current-student], [data-product-choice][data-ui-busy] { opacity: .65; }
[data-binding-control][data-ui-busy] [data-binding-feedback]::before { content: ''; display: inline-block; width: .75rem; height: .75rem; margin-right: var(--space-2); border: 1.5px solid var(--color-border); border-top-color: var(--color-ink); border-radius: 50%; animation: ui-spin var(--motion-spin) linear infinite; }
[data-upload-status][data-ui-busy]::before { content: ''; display: inline-block; width: .75rem; height: .75rem; margin-right: var(--space-2); border: 1.5px solid var(--color-border); border-top-color: var(--color-ink); border-radius: 50%; animation: ui-spin var(--motion-spin) linear infinite; }
input[data-ui-busy], textarea[data-ui-busy] { border-color: var(--color-focus); background-color: var(--color-surface-subtle); }
:is(.upload-progress-bar, .photo-upload-progress, .photo-upload-progress-bar, .photo-progress-track) :is(span, i), progress::-webkit-progress-value { transition: width var(--motion-progress) linear; }

/* A pending target must never show pixels belonging to its predecessor. */
.ui-image-frame { position: relative; background: var(--color-surface-subtle); }
.ui-image-frame:not(.ui-image-stage)[data-ui-image-state="error"]::after { content: '照片未载入，点击查看'; position: absolute; inset: 0; display: grid; place-content: center; padding: var(--space-3); color: var(--color-muted); font: var(--text-caption)/1.6 var(--font-ui); text-align: center; pointer-events: none; }
.ui-image-frame > img[data-ui-image-state="pending"], .ui-image-frame > img[data-ui-image-state="error"] { visibility: hidden; opacity: 0; transition: none; }
.ui-image-stage { background: var(--color-photo); }
.ui-image-feedback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--color-on-dark-muted); font: var(--text-caption)/1.6 var(--font-ui); text-align: center; pointer-events: none; }
.ui-image-feedback[hidden], .ui-image-feedback button[hidden] { display: none; }
.ui-image-feedback button { pointer-events: auto; }
.photo-lightbox-image-wrap { min-width: 0; min-height: 0; }
.photo-lightbox-image-wrap > img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; transition: transform var(--motion-content) var(--ease-enter); }
.selection-preview-dialog main { position: relative; }
.selection-preview-dialog main > img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
/* Fullscreen grids already reserve image space. Feedback is out of document flow. */
html[data-ui-input="keyboard"] :is(dialog, .account-popover, .student-search-results, .ui-filter-extra),
html[data-ui-input="keyboard"] dialog::backdrop,
html[data-ui-input="keyboard"] details::details-content { transition: none; }
@media (max-width: 767px) {
  .ui-filter-form.ui-filter-collapsed > .ui-filter-extra { opacity: 0; translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, details::details-content { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  dialog, dialog[open], dialog.workspace-drawer, dialog.workspace-drawer[open] { translate: none; }
}
@media print { .ui-request-status { display: none; } }