/* Interaction details only: retain the existing palette, dimensions and layout. */
:root { --ui-reveal-ease: cubic-bezier(.23, 1, .32, 1); }

:is(button, a, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #a63a24;
  outline-offset: 3px;
}
:is(.menu-button, .profile-avatar, .app-notification-button, .client-influx-tab,
    .workspace-tab, .closer-tabs button, .closer-lead, .billing-text-button,
    .builder-industry-picker summary, .choice-dropdown summary):focus-visible {
  outline: 2px solid #a63a24;
  outline-offset: 3px;
}
.menu-button, .profile-avatar, .app-notification-button,
.client-influx-tab, .closer-tabs button, .closer-lead,
.builder-industry-picker summary, .choice-dropdown summary {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.profile-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-tint, #fff0e9); }
.builder-industry-choice:has(input:checked) { background: var(--accent-tint, #fff0e9); }
@media (hover: hover) and (pointer: fine) {
  .menu-button:hover, .closer-lead:not(.selected):hover { background: var(--surface-soft, #f5f5ef); }
  .app-notification-button:hover { border-color: var(--accent, #ff5a36); }
}
@media (hover: none), (pointer: coarse) {
  .menu-button:hover { background: transparent; }
  .menu-button:focus-visible { background: var(--surface-soft, #f5f5ef); }
  .choice-option:hover { background: transparent; }
  .choice-option:focus-within { background: var(--accent-tint, #fff0e9); }
}

/* The account menu grows from its avatar; form choices grow from their summary. */
.profile-menu-panel {
  transform-origin: top right;
  opacity: 1;
  transform: none;
  transition: opacity 140ms var(--ui-reveal-ease), transform 180ms var(--ui-reveal-ease),
    display 180ms allow-discrete;
}
.profile-menu-panel[hidden] {
  opacity: 0;
  transform: translateY(-4px) scale(.97);
  pointer-events: none;
}
.choice-dropdown[open] > .choice-options,
.builder-industry-picker details[open] > .builder-industry-panel {
  transform-origin: top left;
  opacity: 1;
  transform: none;
  transition: opacity 140ms var(--ui-reveal-ease), transform 180ms var(--ui-reveal-ease);
}

/* Occasional dialogs share a restrained entrance. Closing releases control immediately. */
:is(.modal-backdrop:not([hidden]) > .modal, .closer-panel,
    .verification-modal, dialog.billing-dialog[open], dialog.location-dialog[open]) {
  transform-origin: center;
  opacity: 1;
  transform: none;
  transition: opacity 160ms var(--ui-reveal-ease), transform 200ms var(--ui-reveal-ease);
}
@starting-style {
  .profile-menu-panel:not([hidden]),
  .choice-dropdown[open] > .choice-options,
  .builder-industry-picker details[open] > .builder-industry-panel {
    opacity: 0;
    transform: translateY(-4px) scale(.97);
  }
  :is(.modal-backdrop:not([hidden]) > .modal, .closer-panel,
      .verification-modal, dialog.billing-dialog[open], dialog.location-dialog[open]) {
    opacity: 0;
    transform: translateY(5px) scale(.985);
  }
}

/* Top-layer hints avoid being clipped by a scrolling panel or covered by a dialog. */
.byndro-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 300;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid #35373b;
  border-radius: 6px;
  background: #202226;
  color: #fffffc;
  box-shadow: 0 4px 12px #00000018;
  font: 12px/1.45 var(--font-main, system-ui, sans-serif);
  text-align: left;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(2px) scale(.97);
  transform-origin: bottom center;
  transition: opacity 125ms var(--ui-reveal-ease), transform 125ms var(--ui-reveal-ease);
}
.byndro-tooltip[data-side="bottom"] { transform-origin: top center; transform: translateY(-2px) scale(.97); }
.byndro-tooltip[data-visible="true"] { opacity: 1; transform: none; }
.byndro-tooltip[data-instant="true"] { transition: none; }

/* Keyboard navigation is immediate, with a visible ring instead of movement. */
html[data-ui-input="keyboard"] :is(.profile-menu-panel, .choice-options,
    .builder-industry-panel, .modal, .closer-panel, .verification-modal,
    dialog.billing-dialog, dialog.location-dialog, .byndro-tooltip, button, .button) {
  transition: none !important;
  animation: none !important;
}
html[data-ui-input="keyboard"] :is(button, .button):active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.profile-menu-panel, .choice-options, .builder-industry-panel, .modal,
      .closer-panel, .verification-modal, dialog.billing-dialog,
      dialog.location-dialog, .byndro-tooltip, button, .button) {
    transition: none !important;
    animation: none !important;
  }
  :is(button, .button):is(:active, :hover) { transform: none; }
}