/**
 * Base document styles for DGA Angular apps.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--dga-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Optional document fonts via DgaFontService (`data-font` on <html>).
   Default (no attr / ibm-plex) keeps --dga-font-sans from primitives.css. */
:root[data-font='noto-sans'] {
  --dga-font-sans: 'Noto Sans Arabic', system-ui, sans-serif;
}
:root[data-font='cairo'] {
  --dga-font-sans: 'Cairo', system-ui, sans-serif;
}
:root[data-font='tajawal'] {
  --dga-font-sans: 'Tajawal', system-ui, sans-serif;
}
:root[data-font='almarai'] {
  --dga-font-sans: 'Almarai', system-ui, sans-serif;
}
:root[data-font='changa'] {
  --dga-font-sans: 'Changa', system-ui, sans-serif;
}
:root[data-font='readex-pro'] {
  --dga-font-sans: 'Readex Pro', system-ui, sans-serif;
}
:root[data-font='amiri'] {
  --dga-font-sans: 'Amiri', 'Times New Roman', serif;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--dga-bg-body);
  color: var(--dga-text-default);
  font-size: var(--dga-font-text-md);
  line-height: var(--dga-leading-text-md);
}

/* Half viewport padding below 600px */
@media (max-width: 600px) {
  :root {
    --dga-viewport-padding: calc(var(--dga-viewport-base-padding) / 2);
  }
}

html.dga-nav-locked,
html.dga-nav-locked body {
  overflow: hidden;
}

/* Mobile nav / header overlays lock the page — park FAB docks so they
   cannot sit on top of the sheet (a11y uses a max z-index stacking context). */
html.dga-nav-locked .a11y-root,
html.dga-nav-locked dga-chatbot,
html.dga-nav-locked dga-scroll-top {
  visibility: hidden !important;
  pointer-events: none !important;
}

:focus-visible {
  outline: 2px solid var(--dga-focus-ring);
  outline-offset: 2px;
}

/**
 * Checkbox and radio tiles. Native controls ignore author colors, so these
 * are painted from tokens: 16 / 20 / 24px, a 1px ring, and a checked mark.
 */
input[type='checkbox'].dga-choice,
input[type='radio'].dga-choice {
  --dga-choice-size: 20px;
  --dga-choice-ring: var(--dga-color-neutral-400, var(--dga-border-neutral));
  --dga-choice-ripple: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--dga-choice-size);
  height: var(--dga-choice-size);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--dga-radius-xs, 2px);
  background-color: var(--dga-bg-default);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  box-shadow:
    0 0 0 1px var(--dga-choice-ring),
    0 0 0 calc(var(--dga-choice-size) / 2) var(--dga-choice-ripple);
  vertical-align: middle;
  cursor: pointer;
  print-color-adjust: exact;
  color-scheme: only light;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

input.dga-choice[data-size='sm'] {
  --dga-choice-size: 16px;
}

input.dga-choice[data-size='lg'] {
  --dga-choice-size: 24px;
}

input[type='radio'].dga-choice {
  border-radius: 50%;
}

:root[data-theme~='dark'] input[type='checkbox'].dga-choice,
:root[data-theme~='dark'] input[type='radio'].dga-choice {
  color-scheme: only dark;
}

input[type='checkbox'].dga-choice:is(:checked, :indeterminate) {
  --dga-choice-ring: var(--dga-bg-primary);
  background-color: var(--dga-bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.5 4.7' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type='checkbox'].dga-choice:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type='radio'].dga-choice:checked {
  --dga-choice-ring: var(--dga-bg-primary);
  border: 4px solid var(--dga-bg-default);
  background-color: var(--dga-bg-primary);
  background-image: none;
}

input[type='radio'].dga-choice[data-size='sm']:checked {
  border-width: 3px;
}

input[type='radio'].dga-choice[data-size='lg']:checked {
  border-width: 5px;
}

input.dga-choice:not(:disabled):hover {
  --dga-choice-ring: var(--dga-color-neutral-700, var(--dga-border-neutral));
  --dga-choice-ripple: color-mix(in srgb, var(--dga-choice-ring) 14%, transparent);
}

input.dga-choice:is(:checked, :indeterminate):not(:disabled):hover {
  --dga-choice-ring: var(--dga-color-primary-700, var(--dga-bg-primary));
  background-color: var(--dga-choice-ring);
  --dga-choice-ripple: color-mix(in srgb, var(--dga-choice-ring) 16%, transparent);
}

input.dga-choice:is(:checked, :indeterminate):not(:disabled):active {
  --dga-choice-ring: var(--dga-color-primary-900, var(--dga-bg-primary));
  background-color: var(--dga-choice-ring);
}

input.dga-choice[aria-invalid='true'] {
  --dga-choice-ring: var(--dga-border-error);
}

input.dga-choice:disabled {
  --dga-choice-ring: var(--dga-border-disabled, var(--dga-border-neutral));
  cursor: not-allowed;
}

input[type='checkbox'].dga-choice:is(:checked, :indeterminate):disabled {
  background-color: var(--dga-bg-disabled);
  --dga-choice-ring: var(--dga-bg-disabled);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2 6.6 11.3 12.5 4.7' stroke='%236C737F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type='checkbox'].dga-choice:indeterminate:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%236C737F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

input[type='radio'].dga-choice:checked:disabled {
  background-color: var(--dga-bg-disabled);
  --dga-choice-ring: var(--dga-border-disabled, var(--dga-border-neutral));
}

/**
 * Checkbox and radio groups. Column is the default. A row wraps, and
 * `columns` builds a grid. Viewports under 600px always use one column.
 */
.dga-choice-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dga-spacing-md, 0.75rem);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.dga-choice-group > legend {
  flex-basis: 100%;
  width: 100%;
  grid-column: 1 / -1;
  margin: 0 0 var(--dga-spacing-xs, 0.25rem);
  padding: 0;
}

.dga-choice-group > :not(legend) {
  min-width: 0;
  max-width: 100%;
}

.dga-choice-group[data-layout='row']:not([data-columns]) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.dga-choice-group[data-layout='row']:not([data-columns]) > :not(legend) {
  flex: 1 1 auto;
}

.dga-choice-group[data-columns] {
  display: grid;
  grid-template-columns: repeat(var(--dga-choice-columns, 1), minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 599px) {
  .dga-choice-group[data-layout='row']:not([data-columns]),
  .dga-choice-group[data-columns] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
}

/**
 * Range slider. Native tracks ignore most author colors, so the track and
 * thumb are painted here. `--dga-slider-fill` is the filled portion.
 */
input[type='range'].dga-slider {
  --dga-slider-track: 4px;
  --dga-slider-thumb: 20px;
  --dga-slider-fill: 0%;
  --dga-slider-track-bg: var(--dga-bg-disabled, var(--dga-color-neutral-200));
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--dga-slider-thumb);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color-scheme: only light;
}

input[type='range'].dga-slider[data-size='sm'] {
  --dga-slider-track: 2px;
  --dga-slider-thumb: 16px;
}

input[type='range'].dga-slider[data-size='lg'] {
  --dga-slider-track: 6px;
  --dga-slider-thumb: 24px;
}

:root[data-theme~='dark'] input[type='range'].dga-slider {
  color-scheme: only dark;
}

input[type='range'].dga-slider::-webkit-slider-runnable-track {
  height: var(--dga-slider-track);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--dga-bg-primary) var(--dga-slider-fill),
    var(--dga-slider-track-bg) var(--dga-slider-fill)
  );
}

:root[dir='rtl'] input[type='range'].dga-slider::-webkit-slider-runnable-track,
[dir='rtl'] input[type='range'].dga-slider::-webkit-slider-runnable-track {
  background: linear-gradient(
    to left,
    var(--dga-bg-primary) var(--dga-slider-fill),
    var(--dga-slider-track-bg) var(--dga-slider-fill)
  );
}

input[type='range'].dga-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--dga-slider-thumb);
  height: var(--dga-slider-thumb);
  margin-top: calc((var(--dga-slider-track) - var(--dga-slider-thumb)) / 2);
  border: 2px solid var(--dga-bg-primary);
  border-radius: 50%;
  background: var(--dga-bg-default);
  box-shadow: var(--dga-shadow-xs, 0 1px 2px rgb(0 0 0 / 8%));
}

input[type='range'].dga-slider::-moz-range-track {
  height: var(--dga-slider-track);
  border: 0;
  border-radius: 999px;
  background: var(--dga-slider-track-bg);
}

input[type='range'].dga-slider::-moz-range-progress {
  height: var(--dga-slider-track);
  border: 0;
  border-radius: 999px;
  background: var(--dga-bg-primary);
}

input[type='range'].dga-slider::-moz-range-thumb {
  width: var(--dga-slider-thumb);
  height: var(--dga-slider-thumb);
  border: 2px solid var(--dga-bg-primary);
  border-radius: 50%;
  background: var(--dga-bg-default);
  box-shadow: var(--dga-shadow-xs, 0 1px 2px rgb(0 0 0 / 8%));
}

input[type='range'].dga-slider:hover::-webkit-slider-thumb,
input[type='range'].dga-slider:hover::-moz-range-thumb {
  border-color: var(--dga-color-primary-700, var(--dga-bg-primary));
}

input[type='range'].dga-slider:focus-visible::-webkit-slider-thumb,
input[type='range'].dga-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--dga-focus-ring);
  outline-offset: 2px;
}

input[type='range'].dga-slider:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/**
 * Form fields use a soft primary glow instead of the global black focus ring.
 * Keep the high-contrast black ring for buttons, links, and chrome.
 */
.dga-form-field:focus,
.dga-form-field:focus-visible,
input[dgainput]:focus,
input[dgainput]:focus-visible,
textarea[dgainput]:focus,
textarea[dgainput]:focus-visible,
select[dgaselect]:focus,
select[dgaselect]:focus-visible,
dga-form-control.dga-form-control:focus-within,
dga-form-control.dga-form-control input:focus,
dga-form-control.dga-form-control input:focus-visible,
dga-form-control.dga-form-control textarea:focus,
dga-form-control.dga-form-control textarea:focus-visible,
dga-form-control.dga-form-control select:focus,
dga-form-control.dga-form-control select:focus-visible,
dga-number-input input:focus,
dga-number-input input:focus-visible,
dga-phone-input input:focus,
dga-phone-input input:focus-visible,
dga-chip-input input:focus,
dga-chip-input input:focus-visible,
dga-otp input:focus,
dga-otp input:focus-visible,
dga-date-picker input:focus,
dga-date-picker input:focus-visible,
dga-select input:focus,
dga-select input:focus-visible,
dga-multiselect input:focus,
dga-multiselect input:focus-visible,
dga-time-picker input:focus,
dga-time-picker input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Status-tinted focus glow for standalone fields */
.dga-form-field[data-status='error']:focus-visible {
  --dga-form-field-accent: var(--dga-border-error);
  --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-red-500) 22%, transparent);
}
.dga-form-field[data-status='success']:focus-visible {
  --dga-form-field-accent: var(--dga-border-success);
  --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-green-500) 22%, transparent);
}
.dga-form-field[data-status='warning']:focus-visible {
  --dga-form-field-accent: var(--dga-border-warning);
  --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-yellow-500) 28%, transparent);
}
.dga-form-field[data-status='info']:focus-visible {
  --dga-form-field-accent: var(--dga-border-info);
  --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-blue-500) 22%, transparent);
}

/* Form field status accent (standalone inputs + form-control underline) */
[data-status='error'] {
  --dga-form-field-accent: var(--dga-border-error);
}
[data-status='success'] {
  --dga-form-field-accent: var(--dga-border-success);
}
[data-status='warning'] {
  --dga-form-field-accent: var(--dga-border-warning);
}
[data-status='info'] {
  --dga-form-field-accent: var(--dga-border-info);
}

/**
 * Theme / locale View Transitions.
 * Default snapshot animation is disabled; services drive motion via WAAPI:
 * - theme → circular clip-path reveal from the control (no horizontal slide)
 * - locale → translateX wipe
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
  width: 100%;
}

/* Keep the incoming surface above while theme circle / locale wipe runs.
   Theme VT uses fill:'both' so the new root starts clipped to circle(0). */
::view-transition-new(root) {
  z-index: 1;
}

::view-transition-old(root) {
  z-index: 0;
}

/**
 * Lightweight theme reveal (preferred over View Transitions):
 * Circular surface reveal (light/dark theme + brand/color packs).
 * old surface color covers the viewport; a radial mask hole expands from the
 * control so the already-painted new theme shows through — no page bitmaps.
 */
@property --dga-theme-reveal-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

[data-dga-theme-reveal] {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: var(--dga-theme-reveal-fill, var(--dga-bg-body, #f9fafb));
  /* Ensure the cover paints in the first frame before the hole expands. */
  opacity: 1;
  -webkit-mask-image: radial-gradient(
    circle at var(--dga-theme-reveal-x, 50%) var(--dga-theme-reveal-y, 50%),
    transparent 0,
    transparent var(--dga-theme-reveal-r, 0px),
    #000 var(--dga-theme-reveal-r, 0px)
  );
  mask-image: radial-gradient(
    circle at var(--dga-theme-reveal-x, 50%) var(--dga-theme-reveal-y, 50%),
    transparent 0,
    transparent var(--dga-theme-reveal-r, 0px),
    #000 var(--dga-theme-reveal-r, 0px)
  );
  transition: --dga-theme-reveal-r 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: --dga-theme-reveal-r;
}

/* Freeze incidental CSS transitions while the reveal paints the new theme.
   Exclude the reveal overlay so its mask radius can still animate. */
html[data-theme-reveal] *:not([data-dga-theme-reveal]) {
  transition: none !important;
  animation-duration: 0s !important;
}

/* Prevent horizontal jump when scrollbars appear/disappear (esp. RTL). */
html {
  scrollbar-gutter: stable;
}

/* Avoid layout jank while the locale transform fallback animates <html>. */
html[data-locale-wipe] {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/**
 * Visibility utilities
 * - `hidden` attribute wins over any display utility
 * - `data-hidden` hides inside named viewport bands: mobile / tablet / desktop
 * - add `sr` token to keep the node in the accessibility tree
 */
[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  [data-hidden~='mobile']:not([data-hidden~='sr']) {
    display: none !important;
  }
  [data-hidden~='mobile'][data-hidden~='sr'] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (min-width: 601px) and (max-width: 960px) {
  [data-hidden~='tablet']:not([data-hidden~='sr']) {
    display: none !important;
  }
  [data-hidden~='tablet'][data-hidden~='sr'] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (min-width: 961px) {
  [data-hidden~='desktop']:not([data-hidden~='sr']) {
    display: none !important;
  }
  [data-hidden~='desktop'][data-hidden~='sr'] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Accessibility widget hooks (DgaAccessibilityService) */
[data-a11y~='reduce-motion'] *,
[data-a11y~='reduce-motion'] *::before,
[data-a11y~='reduce-motion'] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

[data-a11y~='highlight-links'] a:not([dgaButton]) {
  text-decoration: underline;
  outline: 1px dashed var(--dga-border-warning);
  outline-offset: 2px;
}

[data-a11y~='highlight-titles'] h1,
[data-a11y~='highlight-titles'] h2,
[data-a11y~='highlight-titles'] h3,
[data-a11y~='highlight-titles'] h4,
[data-a11y~='highlight-titles'] h5,
[data-a11y~='highlight-titles'] h6 {
  outline: 2px solid var(--dga-border-warning);
  outline-offset: 2px;
}

[data-a11y~='high-contrast'] {
  --dga-bg-body: #ffffff;
  --dga-bg-surface: #ffffff;
  --dga-bg-card: #ffffff;
  --dga-text-default: #000000;
  --dga-text-display: #000000;
  --dga-text-paragraph: #000000;
  --dga-text-muted: #1a1a1a;
  --dga-text-primary: #000000;
  --dga-border: #000000;
  --dga-border-primary: #000000;
}

[data-a11y~='dyslexia'] {
  /*
   * OpenDyslexic (Latin) + Readex Pro (Arabic, already in demo fonts).
   * Override the design-token var so Tailwind `font-sans` picks it up —
   * setting only `font-family` on html/body left components on IBM Plex.
   */
  --dga-font-sans: OpenDyslexic, 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-family: var(--dga-font-sans);
  font-weight: 500;
}

[data-a11y~='dyslexia'] body,
[data-a11y~='dyslexia'] p,
[data-a11y~='dyslexia'] li,
[data-a11y~='dyslexia'] h1,
[data-a11y~='dyslexia'] h2,
[data-a11y~='dyslexia'] h3,
[data-a11y~='dyslexia'] h4,
[data-a11y~='dyslexia'] h5,
[data-a11y~='dyslexia'] h6,
[data-a11y~='dyslexia'] label,
[data-a11y~='dyslexia'] input,
[data-a11y~='dyslexia'] textarea,
[data-a11y~='dyslexia'] select,
[data-a11y~='dyslexia'] button,
[data-a11y~='dyslexia'] a {
  font-family: var(--dga-font-sans) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.16em !important;
}

/**
 * Motor impaired mode — visibly larger controls + easier click / keyboard focus.
 * Tiny indicators (hero dots / role=tab pills) keep their look; hit area expands
 * via ::after. `:where()` keeps specificity at 0 so `absolute` / `fixed` win.
 */
[data-a11y~='motor-targets'] {
  --dga-motor-target: 56px;
}

/* Larger pointer so the mode is obvious while moving the mouse */
[data-a11y~='motor-targets'],
[data-a11y~='motor-targets'] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='2' d='M6 3v26l7-6 4 9 4-2-4-9h10z'/%3E%3C/svg%3E")
      6 3,
    auto !important;
}

[data-a11y~='motor-targets'] :where(a, button, [role='button'], [role='tab'], [role='switch'], summary) {
  position: relative;
  touch-action: manipulation;
}

/* Design-system buttons / links — visibly larger */
[data-a11y~='motor-targets'] :where(button[dgaButton], a[dgaButton]) {
  min-height: var(--dga-motor-target) !important;
  padding-inline: 1.5rem !important;
  padding-block: 0.75rem !important;
}

[data-a11y~='motor-targets'] :where(
  button[dgaButton][data-icon-only],
  a[dgaButton][data-icon-only]
) {
  min-width: var(--dga-motor-target) !important;
  min-height: var(--dga-motor-target) !important;
  padding-inline: 0 !important;
}

/* Other chrome buttons (header, footer, arrows) — grow height, keep layout */
[data-a11y~='motor-targets'] :where(
  button:not([role='tab']):not([role='switch']):not([dgaButton]):not(.dga-a11y-fab):not(.dga-scroll-top),
  [role='button']:not([role='tab'])
) {
  min-height: var(--dga-motor-target);
  padding-inline: max(0.75rem, 0.5em);
}

/* Switches — scale up without breaking the thumb track */
[data-a11y~='motor-targets'] :where([role='switch']) {
  transform: scale(1.35);
  transform-origin: center;
}

/* Text links — thicker underline + padded hit */
[data-a11y~='motor-targets'] a:not([dgaButton]) {
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
  padding-block: 0.2em;
  padding-inline: 0.15em;
}

/* Tiny controls (carousel / hero dots): expand hit only, keep painted size */
[data-a11y~='motor-targets'] :where([role='tab'], button, a, [role='button'], [role='switch'], summary)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--dga-motor-target));
  height: max(100%, var(--dga-motor-target));
  transform: translate(-50%, -50%);
}

[data-a11y~='motor-targets'] input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']),
[data-a11y~='motor-targets'] select,
[data-a11y~='motor-targets'] textarea {
  min-height: var(--dga-motor-target) !important;
  padding-block: 0.65rem !important;
  padding-inline: 0.85rem !important;
}

[data-a11y~='motor-targets'] input[type='checkbox'],
[data-a11y~='motor-targets'] input[type='radio'] {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
}

/* Thick, high-contrast focus ring (Tab / keyboard) */
[data-a11y~='motor-targets'] :focus-visible {
  outline: 4px solid var(--dga-focus-ring) !important;
  outline-offset: 4px !important;
}

[data-a11y~='has-line-height'] body,
[data-a11y~='has-line-height'] p,
[data-a11y~='has-line-height'] li {
  line-height: var(--user-line-height, 1.6) !important;
}

[data-a11y~='has-letter-spacing'] body,
[data-a11y~='has-letter-spacing'] p,
[data-a11y~='has-letter-spacing'] li {
  letter-spacing: var(--user-letter-spacing, 0) !important;
}

[data-a11y~='has-word-spacing'] body,
[data-a11y~='has-word-spacing'] p,
[data-a11y~='has-word-spacing'] li {
  word-spacing: var(--user-word-spacing, 0) !important;
}

[data-a11y~='text-align-start'] body,
[data-a11y~='text-align-start'] p,
[data-a11y~='text-align-start'] li {
  text-align: start !important;
}

[data-a11y~='text-align-end'] body,
[data-a11y~='text-align-end'] p,
[data-a11y~='text-align-end'] li {
  text-align: end !important;
}

[data-a11y~='text-align-justify'] body,
[data-a11y~='text-align-justify'] p,
[data-a11y~='text-align-justify'] li {
  text-align: justify !important;
}

@media not (forced-colors: active) {
  html[data-a11y-filter='monochrome'] {
    filter: grayscale(1);
  }

  html[data-a11y-filter='boost-contrast'] {
    filter: contrast(1.15);
  }

  html[data-a11y-filter='high-contrast'] {
    filter: contrast(1.35);
  }

  html[data-a11y-filter='high-saturation'] {
    filter: saturate(2);
  }

  html[data-a11y-filter='low-saturation'] {
    filter: saturate(0.5);
  }

  html[data-a11y-filter='deuteranopia'] {
    filter: url('#dga-a11y-deuteranopia');
  }
}