/* Generated by tools/sync-interactions.mjs; edit shared/interaction.css. */
/* Shared interaction layer. Keep motion on the control, not on page layout. */
:root { --focus-light: 226 235 239; --interaction-ease: cubic-bezier(.16, 1, .3, 1); }
* { -webkit-tap-highlight-color: transparent; }
html body :is(a, button, summary, [role='button']) {
  transition: color 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out,
    box-shadow 260ms var(--interaction-ease), opacity 180ms ease-out, translate 180ms var(--interaction-ease), text-shadow 260ms ease-out;
}
html body :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 1px solid rgb(var(--focus-light) / 65%);
  outline-offset: 3px;
  box-shadow: 0 0 16px rgb(var(--focus-light) / 12%), 0 0 30px rgb(var(--focus-light) / 6%);
}
html body :is(a, button, summary, [role='button']):focus:not(:focus-visible) { outline: none; }
html body :is(button, summary, [role='button']):active:not(:disabled) { translate: 0 1px; }
html body a:active { opacity: .8; text-shadow: 0 0 16px rgb(var(--focus-light) / 25%); }
html body :is(input, textarea, select) { accent-color: #d6e0e4; caret-color: #e2ebef; }
html body :is(input[type='text'], input[type='email'], input[type='password'], input[type='url'], input[type='number'], textarea):focus {
  border-color: #aeb9be;
  box-shadow: 0 0 18px rgb(var(--focus-light) / 13%), 0 0 38px rgb(var(--focus-light) / 7%);
}
html body .input-field-row input:focus { box-shadow: none; }
html body input[type='range'] { accent-color: #d6e0e4; }
.segments label:has(input:focus-visible) { outline: 1px solid rgb(var(--focus-light) / 65%); outline-offset: 3px; box-shadow: 0 0 18px rgb(var(--focus-light) / 12%); }
.segments label { transition: background-color 200ms ease-out, color 180ms ease-out, translate 180ms var(--interaction-ease), box-shadow 260ms ease-out; }
.segments label:active:not(:has(input:disabled)) { translate: 0 1px; }
.file-picker:active:not(:has(input:disabled)) { background: rgb(255 255 255 / 6%); border-color: #aeb9be; }
.file-picker:active:not(:has(input:disabled)) .picker-icon { transform: translateY(-2px); }
.am-command:hover svg, .am-command:focus-visible svg { translate: 2px 0; }
.am-popover svg { transition: translate 220ms var(--interaction-ease), opacity 180ms ease-out; }
.am-close:hover svg { opacity: .75; }
:is(.custom-row, .qr-panel).show { animation: form-reveal 240ms var(--interaction-ease); }

/* Native top-layer exits remain visible without delaying close/focus behavior. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  .am-popover {
    opacity: 0; translate: 0 -6px; scale: .992; transform-origin: top right;
    transition: opacity 180ms ease-out, translate 220ms var(--interaction-ease), scale 220ms var(--interaction-ease),
      display 220ms allow-discrete, overlay 220ms allow-discrete;
  }
  .am-popover:popover-open { opacity: 1; translate: 0 0; scale: 1; animation: none; }
  .am-popover:not(:popover-open) { pointer-events: none; }
  dialog {
    opacity: 0; translate: 0 6px; scale: .992;
    transition: opacity 180ms ease-out, translate 240ms var(--interaction-ease), scale 240ms var(--interaction-ease),
      display 240ms allow-discrete, overlay 240ms allow-discrete;
  }
  dialog[open] { opacity: 1; translate: 0 0; scale: 1; animation: none; }
  dialog:not([open]) { pointer-events: none; }
  dialog:not([open])::backdrop { pointer-events: none; }
  dialog::backdrop {
    background: rgb(0 0 0 / 0%);
    transition: background-color 240ms ease-out, display 240ms allow-discrete, overlay 240ms allow-discrete;
  }
  dialog[open]::backdrop { background: rgb(0 0 0 / 65%); }
  @starting-style {
    .am-popover:popover-open { opacity: 0; translate: 0 -6px; scale: .992; }
    dialog[open] { opacity: 0; translate: 0 6px; scale: .992; }
    dialog[open]::backdrop { background: rgb(0 0 0 / 0%); }
  }
}

@supports (transition-behavior: allow-discrete) {
  .mobile-nav-overlay {
    opacity: 0;
    transition: opacity 220ms ease-out, display 220ms allow-discrete;
  }
  .mobile-nav-overlay.active { opacity: 1; animation: none; }
  .mobile-nav-overlay:not(.active) { pointer-events: none; }
  .mobile-nav { translate: 0 8px; transition: translate 260ms var(--interaction-ease); }
  .mobile-nav-overlay.active .mobile-nav { translate: 0 0; }
  @starting-style {
    .mobile-nav-overlay.active { opacity: 0; }
    .mobile-nav-overlay.active .mobile-nav { translate: 0 8px; }
  }
  :is(.custom-row, .qr-panel) {
    opacity: 0; translate: 0 -4px;
    transition: opacity 180ms ease-out, translate 220ms var(--interaction-ease), display 220ms allow-discrete;
  }
  :is(.custom-row, .qr-panel).show { opacity: 1; translate: 0 0; animation: none; }
  :is(.custom-row, .qr-panel):not(.show) { pointer-events: none; }
  @starting-style { :is(.custom-row, .qr-panel).show { opacity: 0; translate: 0 -4px; } }
}
@supports (interpolate-size: allow-keywords) {
  :is(.custom-row, .qr-panel) {
    interpolate-size: allow-keywords; block-size: 0; overflow: clip;
    transition: block-size 240ms var(--interaction-ease), opacity 180ms ease-out,
      translate 220ms var(--interaction-ease), display 240ms allow-discrete;
  }
  :is(.custom-row, .qr-panel).show { block-size: auto; }
  @starting-style { :is(.custom-row, .qr-panel).show { block-size: 0; } }
}
#loginForm:not(.hidden), #registerForm:not(.hidden), #registrationDetails:not(.hidden) { animation: form-reveal 240ms var(--interaction-ease); }
@keyframes form-reveal { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (forced-colors: active) {
  html body :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible,
  .segments label:has(input:focus-visible) { outline: 2px solid Highlight; box-shadow: none; }
}