/* stage-74-interaction-accessibility-polish: final interactive states for Warm Glass OS. */

:root {
  --focus-interaction-ring: 0 0 0 4px color-mix(in srgb, var(--primary, #5678f5) 18%, transparent);
  --focus-interaction-glow: 0 0.72rem 1.5rem color-mix(in srgb, var(--primary, #5678f5) 12%, transparent);
  --focus-interaction-lift: translateY(-1px);
  --focus-interaction-press: translateY(0);
  --focus-tooltip-bg:
    radial-gradient(circle at 30% 0%, color-mix(in srgb, #fff 28%, transparent), transparent 4rem),
    color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 86%, transparent);
  --focus-tooltip-border: 1px solid color-mix(in srgb, var(--surface-border-strong, rgba(255,255,255,.32)) 82%, var(--primary, #5678f5) 10%);
}

:where(
  button,
  [role="button"],
  input,
  select,
  textarea,
  .focus-calendar-cell,
  .calendar-day,
  .schedule-entry-card,
  .wizard-choice,
  .wizard-chip,
  .color-choice
):focus {
  outline: none;
}

:where(
  button,
  [role="button"],
  input,
  select,
  textarea,
  .focus-calendar-cell,
  .calendar-day,
  .schedule-entry-card,
  .wizard-choice,
  .wizard-chip,
  .color-choice
):focus-visible {
  border-color: color-mix(in srgb, var(--primary, #5678f5) 34%, var(--surface-border-strong, rgba(255,255,255,.32))) !important;
  box-shadow:
    var(--focus-interaction-ring),
    var(--focus-interaction-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent) !important;
  outline: none !important;
}

.focus-icon-button:hover,
:where(.icon-button, .round-control, .quote-nav, .icon-action, .action-image-button, .sport-add-more):hover {
  transform: var(--focus-interaction-lift) !important;
}

:where(.icon-button, .round-control, .quote-nav, .icon-action, .action-image-button, .sport-add-more):is(:hover, :focus-visible) {
  overflow: visible !important;
}

:where(.icon-button, .round-control, .quote-nav, .icon-action, .action-image-button, .sport-add-more):is(:hover, :focus-visible)::before,
:where(.icon-button, .round-control, .quote-nav, .icon-action, .action-image-button, .sport-add-more):is(:hover, :focus-visible) .icon,
:where(.icon-button, .round-control, .quote-nav, .icon-action, .action-image-button, .sport-add-more):is(:hover, :focus-visible) .add-menu-icon {
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
}

:where(button, [role="button"], .focus-calendar-cell, .calendar-day, .wizard-choice, .wizard-chip, .schedule-entry-card):active {
  transform: var(--focus-interaction-press) !important;
  transition-duration: 90ms !important;
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"], .is-disabled) {
  cursor: not-allowed !important;
  filter: saturate(0.82) !important;
  opacity: 0.56 !important;
  pointer-events: none !important;
  transform: none !important;
}

:where(button, [role="button"], .focus-card, .day-summary, .plan-panel, .calendar-sheet, .schedule-entry-card, .wizard-choice, .wizard-chip, .color-choice) {
  transition:
    transform 180ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms cubic-bezier(.2,.8,.2,1),
    background 220ms cubic-bezier(.2,.8,.2,1),
    color 180ms cubic-bezier(.2,.8,.2,1) !important;
}

:where(.focus-card, .day-summary, .plan-panel, .schedule-entry-card, .wizard-choice):hover {
  box-shadow:
    var(--focus-interaction-glow),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent) !important;
}

.sidebar-nav-item:focus-visible,
.side-button:focus-visible {
  box-shadow:
    var(--focus-interaction-ring),
    0 0.7rem 1.35rem color-mix(in srgb, var(--focus-nav-action-color, var(--primary, #5678f5)) 13%, transparent) !important;
}

.calendar-day:focus-visible,
.focus-calendar-cell:focus-visible {
  z-index: 4 !important;
  box-shadow:
    var(--focus-interaction-ring),
    0 1rem 2rem color-mix(in srgb, var(--primary, #5678f5) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent) !important;
}

.modal-close:focus-visible,
dialog .round-control:focus-visible,
.entry-modal .round-control:focus-visible,
.day-card-modal .round-control:focus-visible {
  box-shadow:
    var(--focus-interaction-ring),
    0 0.9rem 1.6rem color-mix(in srgb, var(--primary, #5678f5) 14%, transparent) !important;
}

.floating-tooltip,
[data-tooltip]::after {
  pointer-events: none;
}

.floating-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: min(18rem, calc(100vw - 1.5rem));
  border: var(--focus-tooltip-border);
  border-radius: 14px;
  background: var(--focus-tooltip-bg);
  box-shadow:
    0 1rem 2.2rem color-mix(in srgb, #000 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
  color: var(--text-primary, #2f2a26);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
  opacity: 0;
  padding: 0.48rem 0.64rem;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms cubic-bezier(.2,.8,.2,1),
    transform 140ms cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.floating-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

:root[data-theme="dark"] {
  --focus-tooltip-bg:
    radial-gradient(circle at 30% 0%, color-mix(in srgb, #fff 11%, transparent), transparent 4rem),
    color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.08)) 72%, rgba(19,23,34,.92));
  --focus-tooltip-border: 1px solid color-mix(in srgb, var(--surface-border-strong, rgba(255,255,255,.16)) 82%, var(--primary, #6f8cff) 12%);
}

@media (hover: none) {
  :where(.focus-card, .day-summary, .plan-panel, .schedule-entry-card, .wizard-choice):hover {
    box-shadow: inherit !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  :where(button, [role="button"], .focus-calendar-cell, .calendar-day, .wizard-choice, .wizard-chip, .schedule-entry-card):is(:hover, :active, :focus-visible) {
    transform: none !important;
  }
}