/* RG COMPANY — soft, low-contrast focus states for light and dark themes.
   Removes the harsh black/white double outline while preserving clear keyboard focus. */

body.cabinet-body {
  /* Deliberately low-contrast in both themes. */
  --rg-md-outline: color-mix(in srgb, var(--cab-text) 24%, var(--cab-line));
  --rg-md-outline-hover: color-mix(in srgb, var(--cab-text) 32%, var(--cab-line));
  --rg-md-outline-focus: color-mix(in srgb, var(--cab-text) 28%, var(--cab-line));
  --rg-focus-halo: color-mix(in srgb, var(--cab-text) 4%, transparent);

  /* Compatibility with controls created by the earlier Material enhancer. */
  --mdx-outline: color-mix(in srgb, var(--cab-text) 24%, var(--cab-line));
  --mdx-outline-hover: color-mix(in srgb, var(--cab-text) 32%, var(--cab-line));
  --mdx-outline-focus: color-mix(in srgb, var(--cab-text) 28%, var(--cab-line));
}

/* Use one soft 1px stroke instead of stacking a bright 2px overlay over the field border. */
body.cabinet-body .rg-md-field.rg-md-outlined::after,
body.cabinet-body .md-control-field.md-variant-outlined::after {
  display: none !important;
}

body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > input.rg-md-control:not([type="file"]),
body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > .rg-md-select .custom-select-button,
body.cabinet-body .md-control-field.md-variant-outlined:is(.is-focused, .is-open) > input.md-control-input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body .md-control-field.md-variant-outlined:is(.is-focused, .is-open) > textarea.md-control-input,
body.cabinet-body .md-control-field.md-variant-outlined:is(.is-focused, .is-open) .custom-select-button {
  border-color: var(--rg-md-outline-focus) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px var(--rg-focus-halo) !important;
}

/* A one-pixel filled-control indicator is enough; the previous two-pixel line was too stark. */
body.cabinet-body .rg-md-field.rg-md-filled::after,
body.cabinet-body .md-control-field.md-variant-filled::after {
  height: 1px !important;
  background: var(--rg-md-outline-focus) !important;
  opacity: .72 !important;
}

/* Prevent old/native focus rules from adding a second black or white ring. */
body.cabinet-body input:focus,
body.cabinet-body input:focus-visible,
body.cabinet-body textarea:focus,
body.cabinet-body textarea:focus-visible,
body.cabinet-body select:focus,
body.cabinet-body select:focus-visible,
body.cabinet-body .custom-select-button:focus,
body.cabinet-body .custom-select-button:focus-visible {
  outline: none !important;
}

/* Keep keyboard navigation visible, but make menu/button focus much quieter. */
body.cabinet-body .custom-select-list.rg-md-menu button:focus-visible,
body.cabinet-body .custom-select-list.md-material-menu button:focus-visible,
body.cabinet-body .custom-select-list button:focus-visible,
body.cabinet-body .modal button:focus-visible,
body.cabinet-body .dialog button:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cab-text) 16%, transparent) !important;
}

/* Slightly soften corners so the thin stroke does not look sharp. */
body.cabinet-body .rg-md-field.rg-md-outlined > input.rg-md-control:not([type="file"]),
body.cabinet-body .rg-md-field.rg-md-outlined > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined > .rg-md-select .custom-select-button,
body.cabinet-body .md-control-field.md-variant-outlined > input.md-control-input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body.cabinet-body .md-control-field.md-variant-outlined > textarea.md-control-input,
body.cabinet-body .md-control-field.md-variant-outlined .custom-select-button {
  border-radius: 14px !important;
}

/* Touch devices can retain :hover after a tap; do not let that state become darker than focus. */
@media (hover: none) and (pointer: coarse) {
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > input.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > textarea.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .custom-select .custom-select-button,
  body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .rg-md-select .custom-select-button {
    border-color: var(--rg-md-outline) !important;
  }
  body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > input.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > textarea.rg-md-control,
  body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > .custom-select .custom-select-button,
  body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > .rg-md-select .custom-select-button {
    border-color: var(--rg-md-outline-focus) !important;
  }
}