/* Shared UI line system. Load after page styles; preserve borderless controls,
   illustration strokes and soft elevation shadows. */
html[data-theme] body.tianji-orchid.tianji-mystic,
html body.tianji-mystic {
  --ui-line-width: 1px;
  --ui-focus-offset: 2px;
  /* Legacy focus shadows must not stack underneath the single outline below. */
  --focus-ring: none;
}

/* These upload targets and result panels were the remaining thick UI borders. */
html body.tianji-mystic :is(.dropzone, .image-dropzone) {
  border-width: var(--ui-line-width) !important;
}
html body.tianji-mystic :is(.action-panel, .risk-panel) {
  border-top-width: var(--ui-line-width) !important;
}

/* A card already has a 1px border: don't paint a second band on top of it. */
html body.tianji-mystic #visionForm > :is(.vision-entry-card, .vision-submit-actions)::before {
  display: none;
}

/* Selection is expressed by the existing surface and border colors. */
html body.tianji-mystic :is(
  .mode-tabs button.active, .seg button.active, .segment button.active,
  .time-mode-seg button.active, .calendar-picker-option.selected,
  .dayun-chip.current, .dayun-chip.selected, .dayun-year-card.selected,
  .flow-month-card.selected, .report-image-card.is-current,
  .palace:hover, .palace.is-expanded,
  .kind-options input:checked + span, .focus-options input:checked + span,
  .seg-options input:checked + span, .emotion-grid input:checked + span,
  .share-button:hover, .shared-reading-toggle:hover
) {
  box-shadow: none !important;
}

/* One focus treatment across forms, tabs, dialogs, navigation and account pages.
   Important is deliberate: older page rules include IDs and mixed specificity. */
html body.tianji-mystic :where(
  a, button, input, select, textarea, summary, [role='button'], [tabindex]
):focus {
  outline: none !important;
}
html body.tianji-mystic :where(
  a, button, input, select, textarea, summary, [role='button'], [tabindex]
):focus:not(:-webkit-autofill),
html body.tianji-mystic :is(input, select, textarea, button)[aria-invalid='true'] {
  box-shadow: none !important;
}
html body.tianji-mystic :where(
  a, button, input, select, textarea, summary, [role='button'],
  [tabindex]:not([tabindex='-1'])
):focus-visible {
  outline: var(--ui-line-width) solid var(--gold, #e8cfa0) !important;
  outline-offset: var(--ui-focus-offset) !important;
}

/* Radio/checkbox inputs use the visible label as their focus target. */
html body.tianji-mystic :is(
  .kind-options, .focus-options, .seg-options, .emotion-grid, .relationship-modes
) input:focus-visible + span {
  outline: var(--ui-line-width) solid var(--gold, #e8cfa0) !important;
  outline-offset: var(--ui-focus-offset) !important;
  box-shadow: none !important;
}

/* Avoid a second ring around the surrounding card or search-field wrapper. */
html body.tianji-mystic .profile-card:focus-within:not(:focus-visible),
html body.tianji-mystic .dialog-checks label:focus-within,
html body.tianji-mystic #homeDailyDetails:has(> summary:focus-visible),
html body.tianji-mystic :is(
  .records-search, .profile-search, .dialog-search, .home-search-field
):has(input):focus-within {
  outline: none !important;
  box-shadow: none !important;
}
html body.tianji-mystic :is(
  .records-search, .profile-search, .dialog-search, .home-search-field
):has(input:focus-visible) {
  outline: var(--ui-line-width) solid var(--gold, #e8cfa0) !important;
  outline-offset: var(--ui-focus-offset) !important;
}
html body.tianji-mystic :is(
  .records-search, .profile-search, .dialog-search, .home-search-field
) input:focus-visible {
  outline: none !important;
}

/* The follow-up composer uses its existing border to show input focus. */
html body.tianji-mystic .followup-composer:focus-within {
  border-color: var(--line);
  box-shadow: none !important;
}
html body.tianji-mystic .followup-composer:has(#followupInput:focus-visible) {
  border-color: var(--gold);
  outline: none !important;
}
html body.tianji-mystic #followupInput:focus-visible {
  outline: none !important;
}

@media (forced-colors: active) {
  html body.tianji-mystic :focus-visible,
  html body.tianji-mystic input:focus-visible + span,
  html body.tianji-mystic :has(> input:focus-visible) {
    outline-color: Highlight !important;
  }
  html body.tianji-mystic .followup-composer:has(#followupInput:focus-visible) {
    border-color: Highlight !important;
  }
}