/* Línea de lectura: one focus treatment for every portal and Turbo surface.
   This accessibility layer owns only the indicator. Important declarations
   keep component-specific rings from overriding it or removing keyboard focus. */
@layer focus {
  :root {
    --focus-ink: var(--periwinkle);
    --focus-rule-width: 4px;
  }

  :is(.site-header, .patient-identity-banner, .care-header,
      .care-diagnosis-appointment, .care-stim-appointment,
      .history-context, .invitation-link-panel, .learn-search-dock,
      [data-focus-surface="dark"]) {
    --focus-ink: var(--lilac);
  }

  /* Light controls keep slate even when their surrounding surface is indigo. */
  :is(input, select, textarea, .button, .combobox-options,
      .calendar-tools button, .calendar-popover button,
      .date-picker, .patient-name-control) {
    --focus-ink: var(--periwinkle);
  }

  /* The lower rule must remain visible inside a solid action or selection. */
  :is(.button.primary, .calendar-apply, .calendar-occurrence.medication,
      .calendar-dose-entry, .learn-search-submit, .clinical-review-nav-finish,
      .care-mood-choice.is-selected, .date-picker-days button[aria-pressed="true"],
      .emb-days button[aria-pressed="true"]) {
    --focus-ink: var(--surface);
    --focus-perimeter: var(--periwinkle);
  }

  .learn-search-input input { --focus-ink: var(--lilac); }

  :is(.segmented-choice, .history-choice-row, .clinical-review-choice-row) input:checked + span {
    --focus-ink: var(--lilac);
    --focus-perimeter: var(--periwinkle);
  }

  :focus-visible,
  :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea, [contenteditable="true"]):focus,
  .patient-name-control:focus-within,
  .phone-input-pair:focus-within,
  :is(.segmented-choice, .history-choice-row, .clinical-review-choice-row) input:focus-visible + span,
  :is(.history-check-grid, .clinical-review-check-grid) label:has(input:focus-visible),
  :is(.laboratory-study-item, .privacy-notice-check, .treatment-publish-choice, .document-file-trigger):has(input:focus-visible),
  .care-row-action:focus-visible::after,
  .combobox:has(input:focus-visible) .combobox-options .is-active {
    outline: 1px solid var(--focus-perimeter, var(--focus-ink)) !important;
    outline-offset: -1px !important;
    box-shadow: inset 0 calc(-1 * var(--focus-rule-width)) 0 var(--focus-ink) !important;
  }

  /* Native small controls use a rule below the control, clear of its check. */
  input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
    outline-offset: 3px !important;
    box-shadow: 0 var(--focus-rule-width) 0 var(--focus-ink) !important;
  }

  /* Put a single indicator on the visible compound control, not its hidden
     input or the small native checkbox inside the already-highlighted label. */
  :is(.patient-name-control, .segmented-choice, .history-choice-row,
      .clinical-review-choice-row, .history-check-grid, .clinical-review-check-grid,
      .laboratory-study-item, .privacy-notice-check, .treatment-publish-choice,
      .document-file-trigger) input:focus,
  .care-row-action:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .phone-input-pair input:focus { outline: none !important; box-shadow: none !important; }
  .phone-input-pair:has(input[aria-invalid="true"]) { border-color: var(--coral-ink); --focus-perimeter: var(--coral-ink); }

  :is(input, select, textarea)[aria-invalid="true"] {
    --focus-perimeter: var(--coral-ink);
    border-color: var(--coral-ink) !important;
  }

  /* The input has the indicator; its dock does not need a second outer ring. */
  .learn-search-dock:focus-within { outline: none !important; }

  /* The name field's opaque child surfaces would cover a parent's inset
     shadow. Paint the shared lower rule above both halves of the field. */
  .patient-name-control { position: relative; }
  .patient-name-control:focus-within { box-shadow: none !important; }
  .patient-name-control:focus-within::after {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom: var(--focus-rule-width) solid var(--focus-ink);
    border-radius: inherit;
    pointer-events: none;
  }

  /* Shadows disappear in forced-colors mode. Keep a system-color outline,
     including on proxies, without replacing the native control appearance. */
  @media (forced-colors: active) {
    .patient-name-control:focus-within::after { display: none; }
    :focus-visible,
    :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea, [contenteditable="true"]):focus,
    .patient-name-control:focus-within,
    .phone-input-pair:focus-within,
    :is(.segmented-choice, .history-choice-row, .clinical-review-choice-row) input:focus-visible + span,
    :is(.history-check-grid, .clinical-review-check-grid) label:has(input:focus-visible),
    :is(.laboratory-study-item, .privacy-notice-check, .treatment-publish-choice, .document-file-trigger):has(input:focus-visible),
    .care-row-action:focus-visible::after,
    .combobox:has(input:focus-visible) .combobox-options .is-active {
      outline: 2px solid Highlight !important;
      outline-offset: -2px !important;
      box-shadow: none !important;
    }

    input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
      outline-offset: 3px !important;
    }

    :is(.patient-name-control, .segmented-choice, .history-choice-row,
        .clinical-review-choice-row, .history-check-grid, .clinical-review-check-grid,
        .laboratory-study-item, .privacy-notice-check, .treatment-publish-choice,
        .document-file-trigger) input:focus,
    .care-row-action:focus-visible { outline: none !important; }
  }
}