/* One focus boundary per editable field. Layered important declarations beat
   the legacy page/ID focus rings without changing field sizing or typography.
   Layout templates reserve this layer before other stylesheets so these
   important states also outrank page-owned layers. Search layout stays in
   search-controls.css. */
@layer editable-controls {
  :root {
    --editable-hover: #9aafc8;
    --editable-focus: #527bb9;
  }
  html.site-dark {
    --editable-hover: #637f9b;
    --editable-focus: #8ab7df;
  }

  /* Keep the focus indicator inside the existing radius: no outer blue frame,
     glow, or layout shift. Buttons and non-text controls keep their own rings. */
  body :where(
    input:where(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image])),
    textarea, select,
    [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]
  ):is(:focus, :focus-visible) {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: var(--editable-focus) !important;
    box-shadow: inset 0 0 0 1px var(--editable-focus) !important;
  }

  /* Only these actual field shells own a border. Form rows, labels and cards
     are deliberately excluded, so their children remain standalone fields. */
  body :where(
    .topup-input-wrap, .auth-input-wrap, .tc-input-group, .ml-search,
    .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
    .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
    .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
    .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
    .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
    .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
    .ao-search-wrap, .dlv-search, .lcx-search
  ):focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    border-color: var(--editable-focus) !important;
    box-shadow: inset 0 0 0 1px var(--editable-focus) !important;
  }

  /* Keep this shell selector stronger than the standalone focus rule above.
     :where() on both rules let the focus shadow win and draw square side rails
     inside rounded search/amount shells. Only the outer shell owns its frame. */
  body :is(
    .topup-input-wrap, .auth-input-wrap, .tc-input-group, .ml-search,
    .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
    .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
    .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
    .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
    .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
    .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
    .ao-search-wrap, .dlv-search, .lcx-search
  ) :is(input:where(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image])), textarea, select) {
    border: 0 !important;
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body :is(
      input:where(:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image])),
      textarea, select,
      [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]
    ):hover:not(:focus):not(:disabled):not([readonly]):not([aria-disabled=true]):not([aria-invalid=true]):not(.is-invalid):not(:user-invalid) {
      border-color: var(--editable-hover) !important;
    }
    body :where(
      .topup-input-wrap, .auth-input-wrap, .tc-input-group,
      .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
      .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
      .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
      .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
      .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
      .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
      .ao-search-wrap, .dlv-search, .lcx-search
    ):hover:not(:focus-within):has(:is(input,textarea,select):enabled:not([readonly]):not([aria-disabled=true])) {
      border-color: var(--editable-hover) !important;
    }
  }

  /* Preserve a clear error state during editing as well as at rest. */
  body :is(input, textarea, select):is([aria-invalid=true], .is-invalid, :user-invalid),
  body :where(
    .topup-input-wrap, .auth-input-wrap, .tc-input-group,
    .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
    .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
    .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
    .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
    .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
    .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
    .ao-search-wrap, .dlv-search, .lcx-search
  ):has(:is(input,textarea,select):is([aria-invalid=true], .is-invalid, :user-invalid)) {
    --editable-focus: #b43f52;
    --editable-hover: #b43f52;
  }
  html.site-dark body :is(input, textarea, select):is([aria-invalid=true], .is-invalid, :user-invalid),
  html.site-dark body :where(
    .topup-input-wrap, .auth-input-wrap, .tc-input-group,
    .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
    .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
    .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
    .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
    .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
    .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
    .ao-search-wrap, .dlv-search, .lcx-search
  ):has(:is(input,textarea,select):is([aria-invalid=true], .is-invalid, :user-invalid)) {
    --editable-focus: #ffabb7;
    --editable-hover: #ffabb7;
  }

  /* High contrast mode may suppress box shadows; retain a system-color outline. */
  @media (forced-colors: active) {
    body :where(input, textarea, select, [contenteditable]):focus-visible {
      outline: 2px solid Highlight !important;
      outline-offset: -2px !important;
    }
    body :where(
    .topup-input-wrap, .auth-input-wrap, .tc-input-group,
    .blog-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor,
    .tpc-voucher-input-shell, .tpc-bank-amount-shell, .tpc-amount-field, .lcx-input-wrap,
    .account-field-v52, .pc-field, .rf-link-box, .vct-picker-controls, .ann-search-wrap,
    .nw-search, .cm-social-search, .orders-search, .wt-search, .ah-search,
    .af-search-field, .tpc-history-tools>label, .nex-search, .gcf-support-search,
    .sf3-search, .topbar-search-wrap, .adm-search-wrap, .adm-toolbar-search,
    .ao-search-wrap, .dlv-search, .lcx-search
    ):focus-within {
      outline: 2px solid Highlight !important;
      outline-offset: -2px !important;
    }
  }
}