/* RS-TH13 — Accessibility & Interaction Compliance */
:root {
  --herb-a11y-focus: #0b6b4d;
  --herb-a11y-focus-ring: rgba(11, 107, 77, .28);
  --herb-a11y-danger: #a51d2d;
  --herb-a11y-skip-bg: #ffffff;
  --herb-a11y-skip-text: #123226;
  --herb-a11y-skip-border: #0b6b4d;
}

html[data-theme="dark"] {
  --herb-a11y-focus: #70e0b0;
  --herb-a11y-focus-ring: rgba(112, 224, 176, .34);
  --herb-a11y-danger: #ff9ba6;
  --herb-a11y-skip-bg: #10251d;
  --herb-a11y-skip-text: #f0fff7;
  --herb-a11y-skip-border: #70e0b0;
}

.herb-visually-hidden,
.herb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.herb-skip-link,
.public-skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  max-inline-size: calc(100vw - 1.5rem);
  padding: .65rem 1rem;
  border: 2px solid var(--herb-a11y-skip-border);
  border-radius: .75rem;
  background: var(--herb-a11y-skip-bg);
  color: var(--herb-a11y-skip-text);
  box-shadow: 0 .6rem 1.5rem rgba(0, 0, 0, .22);
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transform: translateY(calc(-100% - 2rem));
  transition: transform .16s ease;
}

.herb-skip-link:focus,
.herb-skip-link:focus-visible,
.public-skip-link:focus,
.public-skip-link:focus-visible {
  color: var(--herb-a11y-skip-text);
  transform: translateY(0);
}

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="menuitem"], [role="tab"], [role="option"]):focus-visible {
  outline: 3px solid var(--herb-a11y-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--herb-a11y-focus-ring);
}

:where(main, [role="main"]):focus {
  outline: none;
}

:where(main, [role="main"]):focus-visible {
  outline: 3px solid var(--herb-a11y-focus);
  outline-offset: 4px;
}

[data-input-modality="keyboard"] :where(.card, .panel, .sys-page-hero, .ph-panel, .project-panel):focus-within {
  border-color: color-mix(in srgb, var(--herb-a11y-focus) 55%, transparent);
}

:where(.herb-has-table-region) {
  min-inline-size: 0;
}

.herb-table-region {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.herb-table-region:focus-visible {
  outline: 3px solid var(--herb-a11y-focus);
  outline-offset: 2px;
}

.herb-table-region[data-herb-overflow="true"] {
  padding-block-end: 2.35rem;
}

.herb-table-region[data-herb-overflow="true"]::after {
  content: "เลื่อนแนวนอนเพื่อดูข้อมูลเพิ่มเติม";
  position: sticky;
  inset-inline-start: .5rem;
  inset-block-end: .35rem;
  display: inline-block;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, Canvas 92%, transparent);
  color: CanvasText;
  font-size: .75rem;
  font-weight: 700;
  pointer-events: none;
}

.herb-field-error {
  display: block;
  margin-block-start: .35rem;
  color: var(--herb-a11y-danger);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.45;
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--herb-a11y-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--herb-a11y-danger) 20%, transparent);
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-disabled="true"] {
  cursor: not-allowed;
}

.herb-a11y-live-region {
  position: fixed;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.modal[aria-modal="true"]:focus,
.offcanvas[aria-modal="true"]:focus,
[role="dialog"][aria-modal="true"]:focus {
  outline: none;
}

/* Preserve native meaning and affordance for disabled controls in every theme. */
:where(button, input, select, textarea, .btn)[disabled],
:where(button, input, select, textarea, .btn)[aria-disabled="true"] {
  opacity: .68;
}

@media (pointer: coarse), (max-width: 768px) {
  :where(button, .btn, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, summary, [role="button"], .page-link, .dropdown-item, .nav-link) {
    min-block-size: 44px;
  }

  :where(button, .btn, summary, [role="button"], .page-link) {
    min-inline-size: 44px;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  :where(.form-check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
    min-block-size: 44px;
    display: flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: .001ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --herb-a11y-focus: #004b35;
    --herb-a11y-focus-ring: rgba(0, 75, 53, .38);
  }
  html[data-theme="dark"] {
    --herb-a11y-focus: #a8ffd7;
    --herb-a11y-focus-ring: rgba(168, 255, 215, .42);
  }
  :where(.card, .panel, .modal-content, .offcanvas, input, select, textarea, .btn) {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  .herb-skip-link,
  .public-skip-link,
  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    forced-color-adjust: none;
    border: 2px solid Highlight;
    outline: 3px solid Highlight;
    outline-offset: 3px;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  :where(input, select, textarea)[aria-invalid="true"], .herb-field-error {
    border-color: Mark;
    color: MarkText;
  }
}

@media print {
  .herb-skip-link,
  .public-skip-link,
  .herb-a11y-live-region,
  .herb-field-error[data-herb-generated="true"] {
    display: none;
  }
}