/* [project]/app/accessibility.css [app-client] (css) */
.keytips-layer {
  z-index: 2147483647;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.keytip-badge {
  border: 1px solid hsl(var(--foreground));
  background: hsl(var(--background));
  min-width: 32px;
  height: 26px;
  color: hsl(var(--foreground));
  letter-spacing: .04em;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font: 700 14px / 1 ui-monospace, monospace;
  display: inline-flex;
  position: fixed;
  box-shadow: 0 2px 6px #00000038;
}

.keytips-help {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  width: max-content;
  max-width: calc(100vw - 24px);
  color: hsl(var(--foreground));
  pointer-events: auto;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px #00000026;
}

.keytips-help p {
  margin: 0;
}

.keytips-close {
  border-radius: 4px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

@media (forced-colors: active) {
  .keytip-badge, .keytips-help {
    color: canvastext;
    box-shadow: none;
    background: canvas;
    border-color: canvastext;
  }
}

@media print {
  .keytips-layer {
    display: none;
  }
}

@media screen {
  :where(button[data-a11y-action]:not([role="checkbox"])) {
    text-align: left;
    width: 100%;
  }

  :root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  :root.dark {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  :where(a[href], button, input, textarea, select, summary, [tabindex], [contenteditable="true"]):focus-visible {
    scroll-margin-block: 5rem;
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: var(--a11y-focus-offset, 2px) !important;
  }

  :where(:root[data-focus-modality="pointer"]) :where(a[href], button, input, textarea, select, summary, [tabindex], [contenteditable="true"]):focus {
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    outline: none !important;
  }

  :where(input, textarea, [contenteditable="true"]):focus-visible {
    box-shadow: none !important;
    outline: none !important;
  }

  :is(button, a[href], [role="button"]):focus-visible, [class*="opacity-0"]:focus-within {
    opacity: 1 !important;
  }

  :where([role="dialog"]:not([data-fullscreen="true"])) {
    max-height: 100dvh;
  }
}

@media screen and (prefers-contrast: more) {
  :is(input, textarea, select, [contenteditable="true"]) {
    border-color: currentColor;
  }

  :where(input, textarea, [contenteditable="true"]):focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: -2px !important;
  }
}

@media (forced-colors: active) {
  :is(button, input, textarea, select, [role="button"], [role="combobox"], [role="checkbox"], [role="radio"], [role="switch"], [role="slider"], [role="tab"]) {
    forced-color-adjust: auto;
    border: 1px solid buttontext !important;
  }

  :is([role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]) {
    color: canvastext !important;
    background: canvas !important;
    border: 1px solid canvastext !important;
  }

  :focus-visible {
    outline-offset: -2px !important;
    outline: 2px solid highlight !important;
  }

  :is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], [data-state="checked"], [role="tab"][data-state="active"]) {
    outline-offset: -3px;
    outline: 2px solid highlight;
  }

  [role="progressbar"] {
    border: 1px solid canvastext;
  }

  [role="progressbar"] > div {
    background: highlight !important;
  }

  [role="switch"] > span {
    background: buttontext !important;
  }

  [class*="text-transparent"], [style*="text-fill-color"] {
    -webkit-text-fill-color: CanvasText !important;
    color: canvastext !important;
  }
}

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

@media (forced-colors: active) {
  :is(button, a[href], [role="button"], [role="checkbox"], [role="radio"]) svg {
    color: buttontext !important;
  }

  [role="progressbar"] > div {
    forced-color-adjust: none !important;
    background-color: highlight !important;
  }
}

@media screen {
  .press-carousel :is(span, a)[style*="color"], .press-carousel div[style*="color"] {
    color: hsl(var(--foreground)) !important;
  }

  :where(:root:not([data-focus-modality="pointer"])) :is(label, div):has( > :is(input.sr-only, button.sr-only, input[type="range"].opacity-0):focus-visible) {
    outline-offset: var(--a11y-focus-offset, 2px);
    outline: 2px solid hsl(var(--ring)) !important;
  }
}