/* One focus indicator per control. Loaded after page and imported styles. */
:root {
  --aantc-focus: #003366;
  --aantc-focus-width: 2px;
  --aantc-focus-offset: 2px;
}

html[data-theme="dark"] {
  --aantc-focus: #ffffff;
}

.site-footer,
.nav-dropdown-panel,
.internal-workspace-nav,
.hero-stage,
.ranking-panel,
.collaboration,
.media-toggle,
.skip-link,
#header,
.breadcrumbs,
#container .module h2,
#container .module caption {
  --aantc-focus: #ffffff;
}

.footer-wechat-popover,
#teaching-content .physical-rig,
.internal-workspace-nav__booking .section-category-nav__panel {
  --aantc-focus: #003366;
}

html[data-theme="dark"] .nav-dropdown-panel {
  --aantc-focus: #000000;
}

html[data-theme="dark"] .internal-workspace-nav__booking .section-category-nav__panel {
  --aantc-focus: #ffffff;
}

:focus-visible,
#teaching-content :focus-visible,
#teaching-content .physical-rig button:focus-visible,
.internal-site-main .fc-button:focus-visible {
  outline: var(--aantc-focus-width) solid var(--aantc-focus);
  outline-offset: var(--aantc-focus-offset);
}

/* Imported teaching/calendar focus shadows must not add a second ring. */
#teaching-content :focus-visible,
.internal-site-main .fc-button:focus-visible {
  box-shadow: none;
}

/* The header search clips its expanding contents, so keep its ring inside. */
.header-search-form :focus-visible,
.media-toggle:focus-visible {
  outline-offset: -4px;
}

.header-search-form button:focus-visible {
  outline-color: #ffffff;
}

html[data-theme="dark"] .header-search-form button:focus-visible {
  outline-color: #000000;
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight !important;
  }

  .raise-chat__composer:has(textarea:focus),
  .calc-input-wrap:focus-within,
  .calc-mode label:focus-within,
  .video-file-picker input:focus-visible + .button,
  .ground-option input:focus-visible + .ground-swatch {
    outline-color: Highlight;
  }
}