/* Shared app/website control affordances, approved in DESIGN.md.
   Styling never changes disabled semantics or permission checks. */
:root {
  --control-outline: var(--border, #84818B);
  --control-depth: 0 2px 4px rgba(41, 49, 73, 0.14);
  --control-disabled-surface: #E4E4E1;
  --control-disabled-ink: #5F6474;
}

.dark {
  --control-outline: var(--border, #8F88A0);
  --control-depth: 0 2px 4px rgba(0, 0, 0, 0.24);
  --control-disabled-surface: #3A3E4A;
  --control-disabled-ink: #C6C6CB;
}

/* Keep plain links, native compact inputs and cut-out mascot targets intact.
   Tailwind ring layers are composed with the small casting shadow, not lost. */
:is(
  button,
  [role="button"],
  [role="switch"],
  input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
  select,
  textarea,
  summary[class*="rounded"],
  a.button,
  a.teacher-link,
  a[data-slot="button"],
  a[class*="rounded"]:is([class^="bg-"], [class*=" bg-"]),
  label:has(> input.sr-only:is([type="radio"], [type="checkbox"])) > span[class*="rounded"]
):not(.sr-only, .spellito-mascot-button, [aria-label="Hear Spellito"], [data-variant="link"], [data-control-chrome="none"]) {
  border: 1px solid var(--control-outline);
  --tw-shadow: var(--control-depth);
  box-shadow:
    var(--tw-inset-shadow, 0 0 transparent),
    var(--tw-inset-ring-shadow, 0 0 transparent),
    var(--tw-ring-offset-shadow, 0 0 transparent),
    var(--tw-ring-shadow, 0 0 transparent),
    var(--control-depth);

  &:focus-visible {
    outline: 3px solid var(--ring, var(--primary, #5B477C));
    outline-offset: 3px;
  }

  &:is([aria-invalid="true"], :user-invalid) {
    border-color: var(--destructive, #A52B40);
  }

  &:is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"])) {
    border-color: transparent;
    background: var(--control-disabled-surface);
    color: var(--control-disabled-ink);
    --tw-shadow: 0 0 transparent;
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
    scale: 1;
  }

  /* Provider assets and surfaces keep their official treatment. */
  &[class~="bg-provider-apple"]:is(:disabled, [aria-disabled="true"], [data-disabled]:not([data-disabled="false"])) {
    background: var(--provider-apple);
    color: var(--provider-apple-foreground);
  }
}

/* The visible tile, rather than its hidden native input, carries this state.
   Keep its existing peer-focus ring for keyboard users. */
label:has(> input.sr-only:is([type="radio"], [type="checkbox"]):disabled) > span[class*="rounded"] {
  border-color: transparent;
  background: var(--control-disabled-surface);
  color: var(--control-disabled-ink);
  box-shadow: none;
  opacity: 1;
  filter: none;
}

@media (forced-colors: active) {
  :root, .dark {
    --control-outline: ButtonText;
    --control-depth: 0 0 transparent;
    --control-disabled-surface: Canvas;
    --control-disabled-ink: GrayText;
  }
}