/*
 * Accessibility benchmark — interaction-level fixtures and missions.
 * Several rules below ARE the seeded defects (removed focus rings, hover-only
 * menus, low-contrast states, tiny targets). Each is named after its fixture
 * prefix so the oracle selectors stay stable; do not "fix" them.
 */

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

.a11y-btn {
  font: inherit;
  padding: 0.45rem 0.95rem;
  background: #1f2937;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.a11y-btn:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.a11y-btn[disabled] { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.a11y-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* ---------- keyboard-focus ---------- */

.kf-toolbar button {
  font: inherit;
  padding: 0.35rem 0.8rem;
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #6b7280;
  border-radius: 4px;
}

/* kf-01: a parent class wipes every focus indicator inside it. */
.kf-no-ring :focus,
.kf-no-ring :focus-visible { outline: none !important; box-shadow: none !important; }

/* kf-02: an indicator exists, but it is white on a white page. */
.kf-white-ring {
  font: inherit;
  padding: 0.45rem 0.95rem;
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 6px;
}

.kf-white-ring:focus,
.kf-white-ring:focus-visible { outline: 2px dotted #fff; outline-offset: 3px; }

/* kf-t1 (trap): outline removed BUT replaced by a strong custom ring. */
.kf-shadow-ring {
  font: inherit;
  padding: 0.45rem 0.95rem;
  background: #fff;
  color: #1e3a8a;
  border: 2px solid #1e3a8a;
  border-radius: 6px;
}

.kf-shadow-ring:focus,
.kf-shadow-ring:focus-visible { outline: none; box-shadow: 0 0 0 4px #1e3a8a; }

.kf-nav { display: flex; gap: 1.25rem; }
.kf-nav a { color: #1d4ed8; }

.kf-cta {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  background: #047857;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

.kf-recipes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kf-recipe { border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.75rem; }
.kf-edit { display: inline-flex; padding: 0.25rem; border-radius: 4px; cursor: pointer; }

/* kf-06: the dropdown is revealed on pointer hover only. */
.kf-menu { position: relative; display: inline-block; }
.kf-menu-trigger { display: inline-block; padding: 0.35rem 0.8rem; background: #f3f4f6; border-radius: 4px; cursor: default; }
.kf-menu-list {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 10rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  z-index: 5;
}

.kf-menu:hover .kf-menu-list { visibility: visible; }
.kf-menu-list a { display: block; padding: 0.3rem 0.9rem; color: #1d4ed8; }

.kf-acc-toggle { padding: 0.5rem 0; font-weight: 600; cursor: pointer; }
.kf-acc-panel[hidden] { display: none; }

/* kf-08: focusable controls that are never visible. */
.kf-offscreen { position: absolute; left: -2000px; }
.kf-invisible { opacity: 0; }

/* kf-t4 (trap): a skip link that IS revealed on focus. */
.kf-skip { position: absolute; left: -2000px; }
.kf-skip:focus { position: static; display: inline-block; padding: 0.3rem 0.6rem; background: #fef3c7; color: #111827; }

/* kf-09 / kf-t2: CSS order decoupled from DOM order. */
.kf-reorder,
.kf-promos { display: flex; flex-direction: column; gap: 0.25rem; }
.kf-promos { flex-direction: row; gap: 0.75rem; }
.kf-promo { flex: 1; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.6rem; }

/* ---------- dynamic-content ---------- */

.dc-carousel { position: relative; border: 1px solid #e5e7eb; border-radius: 6px; padding: 1rem 2.5rem; min-height: 4.5rem; }
.dc-slide[hidden] { display: none; }
.dc-prev,
.dc-next {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.dc-prev { left: 0.6rem; border-right: 14px solid #374151; }
.dc-next { right: 0.6rem; border-left: 14px solid #374151; }

.dc-toast { display: inline-block; margin-left: 0.75rem; padding: 0.2rem 0.6rem; background: #ecfdf5; color: #065f46; border-radius: 4px; }
.dc-toast[hidden] { display: none; }

.dc-tip-wrap,
.ci-tip-wrap { position: relative; display: inline-block; }
.dc-tip,
.ci-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 16rem;
  padding: 0.5rem 0.7rem;
  background: #111827;
  color: #fff;
  font-size: 0.85rem;
  border-radius: 6px;
  z-index: 5;
}

.dc-tip[hidden],
.ci-tip[hidden] { display: none; }

.dc-session input[disabled] { background: #f3f4f6; }

/* ---------- images-links ---------- */

.il-bg { width: 280px; height: 140px; background-size: cover; background-position: center; border-radius: 6px; }
.il-divider { display: block; margin: 0.5rem 0; }
.il-icon-link { display: inline-flex; padding: 0.3rem; color: #1d4ed8; }

/* ---------- targets-states ---------- */

/* ts-01: 16px targets packed edge to edge. */
.ts-stepper { display: inline-flex; gap: 0; align-items: center; }
.ts-stepper button {
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: #e5e7eb;
  color: #111827;
  border: none;
}

/* ts-t1 (trap): 20px targets with 8px spacing satisfy 2.5.8 AA. */
.ts-spaced { display: inline-flex; gap: 8px; }
.ts-spaced button { width: 20px; height: 20px; padding: 0; font-size: 12px; background: #e5e7eb; color: #111827; border: none; }

/* ts-02: the placeholder carries the essential hint at ~1.5:1. */
.ts-placeholder::placeholder { color: #d4d4d4; opacity: 1; }

/* ts-03: link text collapses to ~1.3:1 when focused (and loses its outline). */
.ts-menu { display: flex; gap: 0.25rem; padding: 0.4rem; background: #f1f5f9; border-radius: 6px; }
.ts-menu a { padding: 0.3rem 0.7rem; color: #334155; text-decoration: none; }
.ts-menu a:focus { color: #cbd5e1; outline: none; }

/* ts-04: hover state drops white-on-blue to ~1.9:1. */
.ts-hover-btn { font: inherit; padding: 0.45rem 0.95rem; background: #1d4ed8; color: #fff; border: none; border-radius: 6px; }
.ts-hover-btn:hover { background: #93c5fd; }

/* ts-05: white text over a light gradient (axe cannot compute a background-image). */
.ts-banner { padding: 1rem 1.25rem; color: #fff; font-weight: 600; background-image: linear-gradient(90deg, #fde68a, #fff7ed); border-radius: 6px; }

/* ---------- document-structure (bare layout) ---------- */

.ds-page { max-width: 960px; margin: 0 auto; padding: 1.5rem 2rem; }
.ds-h1 { font-size: 2rem; font-weight: 700; margin: 0.5rem 0; }
.ds-headline { font-size: 1.3rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.ds-nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; }
.ds-nav-links a { color: #1d4ed8; }
.ds-cols { display: flex; gap: 1rem; }
.ds-col { flex: 1; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.75rem; }
.ds-frame { width: 100%; height: 90px; border: 1px solid #e5e7eb; border-radius: 6px; }

/* ---------- missions ---------- */

.mission-brief {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #1d4ed8;
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
}

.mission-brief h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.mission-brief ol { margin: 0.35rem 0 0; padding-left: 1.25rem; }
.mission-step[hidden] { display: none; }
.mission-done { margin-top: 1rem; padding: 0.75rem 1rem; background: #ecfdf5; color: #065f46; border-radius: 6px; font-weight: 600; }
.mission-done[hidden] { display: none; }

.mb-clinics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.mb-clinic { border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.6rem 0.8rem; }
.mb-drawer { margin-top: 0.75rem; padding: 0.8rem; border: 1px solid #94a3b8; border-radius: 6px; background: #f8fafc; }
.mb-drawer[hidden] { display: none; }
.mb-slot { font: inherit; padding: 0.3rem 0.7rem; margin: 0 0.35rem 0.35rem 0; background: #fff; color: #111827; border: 1px solid #64748b; border-radius: 4px; }
.mb-slot[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.mb-confirm { display: inline-block; margin-top: 0.5rem; padding: 0.45rem 0.95rem; background: #047857; color: #fff; border-radius: 6px; cursor: pointer; }
.mb-rotator { padding: 0.5rem 0.75rem; background: #fef3c7; color: #78350f; border-radius: 6px; }

.pi-table { border-collapse: collapse; width: 100%; }
.pi-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #e5e7eb; }
.pi-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.pi-select { position: relative; display: inline-block; min-width: 16rem; }
.pi-select-trigger { font: inherit; width: 100%; padding: 0.45rem 0.7rem; text-align: left; background: #fff; color: #111827; border: 1px solid #64748b; border-radius: 6px; }
.pi-options { position: absolute; left: 0; right: 0; margin: 0.2rem 0 0; padding: 0.25rem 0; list-style: none; background: #fff; border: 1px solid #64748b; border-radius: 6px; z-index: 5; }
.pi-options[hidden] { display: none; }
.pi-options li { padding: 0.35rem 0.7rem; cursor: pointer; }
.pi-options li:hover { background: #eff6ff; }
.pi-caption { margin: 0.8rem 0 0.25rem; font-weight: 600; }
.pi-field { width: 100%; padding: 0.5rem 0.6rem; font: inherit; border: 1px solid #64748b; border-radius: 6px; }
.pi-field.pi-invalid { border: 2px solid #dc2626; }

/* pi-06: the payer-details container suppresses every focus indicator. */
.pi-no-ring :focus,
.pi-no-ring :focus-visible { outline: none !important; box-shadow: none !important; }

.co-stepper { display: inline-flex; gap: 0; vertical-align: middle; }
.co-stepper button { width: 14px; height: 14px; padding: 0; font-size: 11px; line-height: 1; background: #e5e7eb; color: #111827; border: none; }
.co-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.co-overlay[hidden] { display: none; }
.co-panel { width: min(28rem, 92vw); padding: 1.1rem 1.25rem; background: #fff; border-radius: 8px; }
.co-close { float: right; font-size: 1.3rem; line-height: 1; color: #374151; cursor: pointer; }
.co-ship { font: inherit; width: 40px; height: 40px; margin-right: 0.35rem; background: #f3f4f6; color: #111827; border: 1px solid #64748b; border-radius: 6px; }
.co-ship.co-picked { background: #1d4ed8; color: #fff; }
.co-pay { display: flex; flex-direction: column; }
.co-pay label { display: block; font-weight: 600; margin: 0.7rem 0 0.2rem; }
.co-terms { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem; cursor: pointer; }
.co-box { display: inline-block; width: 18px; height: 18px; border: 2px solid #374151; border-radius: 3px; text-align: center; line-height: 14px; font-size: 13px; }

.ap-mask { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.6); z-index: 50; }
.ap-mask[hidden] { display: none; }
.ap-modal { position: fixed; top: 12vh; left: 50%; width: min(32rem, 92vw); transform: translateX(-50%); padding: 1.25rem; background: #fff; border-radius: 8px; z-index: 51; }
.ap-modal[hidden] { display: none; }
.ap-x { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 1.2rem; cursor: pointer; }
.ap-required { color: #1d4ed8; }
.ap-majors label { display: inline-block; margin-right: 1rem; font-weight: 400; }
.ap-error { padding: 0.5rem 0.75rem; background: #fef2f2; color: #991b1b; border-radius: 6px; font-weight: 600; }
.ap-captcha { display: block; margin: 0.4rem 0; border: 1px solid #d1d5db; border-radius: 4px; }

.mc-error { color: #b91c1c; font-size: 0.9rem; }
.mc-seat { font: inherit; padding: 0.35rem 0.75rem; margin: 0 0.35rem 0.35rem 0; background: #fff; color: #111827; border: 1px solid #64748b; border-radius: 4px; }
.mc-seat[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.mc-seat:focus-visible,
.ci-focusable:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
dialog.mc-dialog,
dialog.ci-dialog { max-width: 28rem; padding: 1.1rem 1.25rem; border: 1px solid #64748b; border-radius: 8px; }
dialog.mc-dialog::backdrop,
dialog.ci-dialog::backdrop { background: rgba(17, 24, 39, 0.55); }

/* ---------- clean-interactive ---------- */

.ci-stepper { display: inline-flex; gap: 8px; align-items: center; }
.ci-stepper button { width: 28px; height: 28px; font: inherit; background: #e5e7eb; color: #111827; border: 1px solid #6b7280; border-radius: 4px; }
.ci-stepper button:focus-visible,
.ci-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px #1d4ed8; }
.ci-tool { font: inherit; padding: 0.35rem 0.8rem; background: #f3f4f6; color: #111827; border: 1px solid #6b7280; border-radius: 4px; }
.ci-acc-panel[hidden] { display: none; }