:root {
  --ias-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Infigo brand palette. Literal brand hexes (--ias-navy, --ias-coral,
     --ias-purple, --ias-yellow, --ias-placid-blue, --ias-secondary-coral,
     --ias-light-blue, --ias-light-pink) are used directly wherever they land on a
     light tint background. Where a brand hue needs to serve as *text*, an *icon*,
     or a *border* directly against white (and so needs ~4.5:1 contrast), it's
     deepened into a dedicated "usable" token (--ias-accent, --ias-blue) instead of
     using the brand hex verbatim - the literal Coral/Blue are kept only for
     decorative fills and soft tints where contrast rules don't bind as tightly. */
  --ias-navy: #002e47;
  --ias-navy-strong: #001c2c;
  --ias-coral: #ff6867;
  --ias-purple: #4344a2;
  --ias-yellow: #ffe000;
  --ias-placid-blue: #98c1d9;
  --ias-secondary-coral: #ffa89b;
  --ias-light-blue: #cadfeb;
  --ias-light-pink: #ffd2cc;

  --ias-text: var(--ias-navy);
  --ias-muted: #3f5f73;
  --ias-border: var(--ias-light-blue);
  --ias-border-strong: var(--ias-placid-blue);
  --ias-surface: #ffffff;
  --ias-surface-soft: #f3f8fb;
  --ias-surface-tint: #fafbfc;
  --ias-accent: var(--ias-coral);
  --ias-accent-strong: #b53f3f;
  --ias-accent-soft: var(--ias-light-pink);
  --ias-blue: var(--ias-blue-bright);
  --ias-blue-bright: #3483ac;
  --ias-blue-soft: var(--ias-light-blue);
  --ias-purple-soft: #eeeeff;
  --ias-green: var(--ias-blue-bright);
  --ias-mark-underline: rgba(52, 131, 172, 0.42);
  --ias-focus: #3483ac;
  --ias-radius: 8px;
  --ias-radius-sm: 8px;
  --ias-radius-pill: 999px;
  --ias-shadow: 0 14px 40px rgba(18, 32, 51, 0.10);
  --ias-shadow-sm: 0 1px 2px rgba(18, 32, 51, 0.05), 0 2px 8px rgba(18, 32, 51, 0.05);
}

/* README/ENHANCEMENTS document dark mode via prefers-color-scheme with an
   ias-theme-light opt-out - the stylesheet previously had no such rules at
   all, so the widget rendered a bright white card on any dark host page.
   Every rule in this file already reads color through these custom
   properties, so overriding them here is sufficient - no rule below needs a
   dark-specific duplicate. */
@media (prefers-color-scheme: dark) {
  .ias-widget:not(.ias-theme-light) {
    --ias-navy: #dce9f2;
    --ias-navy-strong: #f2f8fc;
    --ias-placid-blue: #3f6b82;
    --ias-light-blue: #234b5e;
    --ias-light-pink: #4a2c30;

    --ias-text: #eaf2f7;
    --ias-muted: #9db3c2;
    --ias-border: #2c4a5c;
    --ias-border-strong: #3f6b82;
    --ias-surface: #0f2532;
    --ias-surface-soft: #16303f;
    --ias-surface-tint: #122a37;
    --ias-accent-soft: #4a2c30;
    --ias-blue-bright: #7fc4e8;
    --ias-blue-soft: #234b5e;
    --ias-purple-soft: #2a2a4a;
    --ias-mark-underline: rgba(127, 196, 232, 0.5);
    --ias-focus: #7fc4e8;
    --ias-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    --ias-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

.ias-widget {
  color: var(--ias-text);
  font-family: var(--ias-font);
  max-width: 1120px;
  width: 100%;
}

.ias-widget *,
.ias-widget *::before,
.ias-widget *::after {
  box-sizing: border-box;
}

.ias-widget [hidden] {
  display: none !important;
}

.ias-shell {
  background: var(--ias-surface);
  border: 1px solid var(--ias-border);
  border-radius: var(--ias-radius);
  box-shadow: var(--ias-shadow);
  overflow: hidden;
}

.ias-header-row {
  align-items: flex-start;
  background: var(--ias-surface-tint);
  border-bottom: 1px solid var(--ias-border);
  display: flex;
  position: relative;
}

.ias-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px 0;
}

.ias-tab {
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  border-radius: var(--ias-radius-sm) var(--ias-radius-sm) 0 0;
  color: var(--ias-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  min-height: 40px;
  padding: 9px 14px 11px;
  transition: color 0.15s ease, background 0.15s ease;
}

.ias-tab:hover {
  background: rgba(20, 33, 51, 0.04);
  color: var(--ias-text);
}

.ias-tab[aria-selected="true"] {
  border-bottom-color: var(--ias-accent);
  color: var(--ias-text);
}

.ias-dyk-button {
  align-items: center;
  background: var(--ias-surface);
  border: 1px solid var(--ias-border-strong);
  border-radius: var(--ias-radius-pill);
  color: var(--ias-text);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 6px;
  margin: 8px 12px 0 0;
  padding: 7px 14px;
  white-space: nowrap;
}

.ias-dyk-button:hover {
  border-color: var(--ias-blue-bright);
  color: var(--ias-blue-bright);
}

.ias-dyk-button:focus-visible {
  outline: 2px solid var(--ias-focus);
  outline-offset: 2px;
}

/* A lighter-weight sibling of .ias-loading-overlay: the same astronaut+bubble
   scene (see .ias-astronaut / .ias-astronaut-bubble further down), but as a
   small anchored popover rather than a panel-covering overlay - no pinwheel,
   no "Searching..." label, no full starfield backdrop. It still needs its
   own compact dark backdrop behind the astronaut, since his suit colors are
   tuned for contrast against the loading overlay's dark background, not
   against the widget's own (often light) surface. */
.ias-dyk-popover {
  background:
    radial-gradient(1.4px 1.4px at 18% 28%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 75% 55%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 40% 82%, rgba(255, 255, 255, 0.5), transparent 60%),
    linear-gradient(165deg, #0a3654 0%, #05213a 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 14, 28, 0.22), 0 2px 8px rgba(0, 14, 28, 0.14);
  margin-top: 8px;
  max-width: calc(100% - 24px);
  padding: 14px 14px 0;
  position: absolute;
  right: 12px;
  top: 100%;
  width: 300px;
  z-index: 20;
}

.ias-dyk-popover .ias-astronaut-scene {
  align-items: center;
  margin-top: 0;
}

.ias-dyk-popover .ias-astronaut {
  height: 64px;
  width: 50px;
}

.ias-dyk-popover .ias-astronaut-bubble {
  margin-bottom: 8px;
  max-width: 210px;
}

@media (prefers-reduced-motion: no-preference) {
  .ias-dyk-popover:not([hidden]) {
    animation: ias-dyk-pop-in 0.18s ease-out;
  }

  .ias-dyk-popover.ias-dyk-popover--leaving {
    animation: ias-dyk-pop-out 0.2s ease-in forwards;
  }
}

@keyframes ias-dyk-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ias-dyk-pop-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 560px) {
  .ias-dyk-popover {
    right: 8px;
    width: auto;
  }

  /* Below ~560px there isn't room for every tab label plus the "Did you
     know?" button on one row - left as a plain flex row, the tabs get
     squeezed into a narrow column beside it and wrap into a tall stack.
     Letting the header wrap moves the button to its own full-width row,
     and letting the tabs scroll horizontally instead of wrapping keeps
     them a single compact strip rather than a multi-row stack. */
  .ias-header-row {
    flex-wrap: wrap;
  }

  .ias-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ias-tabs::-webkit-scrollbar {
    display: none;
  }

  .ias-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .ias-dyk-button {
    margin: 0 12px 8px;
  }
}

.ias-form {
  display: grid;
  gap: 10px;
  padding: 16px;
  position: relative;
}

.ias-label {
  color: var(--ias-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.ias-search-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ias-input {
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234f6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 18px 18px;
  border: 1px solid var(--ias-border-strong);
  border-radius: var(--ias-radius-sm);
  color: var(--ias-text);
  font: inherit;
  font-size: 1rem;
  min-height: 46px;
  min-width: 0;
  padding: 10px 14px 10px 40px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.ias-input::placeholder {
  color: var(--ias-muted);
}

.ias-input:focus {
  border-color: var(--ias-focus);
  box-shadow: 0 0 0 3px rgba(31, 127, 191, 0.16);
  outline: none;
}

.ias-settings-tools {
  background: var(--ias-surface-soft);
  border-top: 1px solid var(--ias-border);
  display: grid;
  gap: 6px;
  padding: 12px 16px;
}

.ias-admin-base-label {
  color: var(--ias-text);
  display: grid;
  font-size: 0.88rem;
  font-weight: 750;
  gap: 6px;
}

.ias-admin-base-input {
  appearance: none;
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 6px;
  color: var(--ias-text);
  font: inherit;
  min-height: 38px;
  padding: 8px 10px;
  width: min(100%, 520px);
}

.ias-admin-base-input:focus {
  border-color: var(--ias-focus);
  box-shadow: 0 0 0 3px rgba(31, 127, 191, 0.15);
  outline: none;
}

.ias-settings-tools p {
  color: var(--ias-muted);
  font-size: 0.82rem;
  margin: 0;
}

.ias-release-notes-tools,
.ias-whats-new-tools {
  align-items: center;
  background: var(--ias-surface-soft);
  border-top: 1px solid var(--ias-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
}

.ias-submit {
  align-items: center;
  background: var(--ias-navy);
  border: 1px solid var(--ias-navy);
  border-radius: var(--ias-radius-sm);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 700;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.ias-submit:hover {
  background: var(--ias-navy-strong);
  border-color: var(--ias-navy-strong);
}

.ias-submit:active {
  transform: translateY(1px);
}

.ias-submit:focus-visible,
.ias-result-link:focus-visible,
.ias-tab:focus-visible,
.ias-browse-card:focus-visible,
.ias-browse-toggle:focus-visible,
.ias-browse-tree-name:focus-visible,
.ias-browse-tree-scope:focus-visible,
.ias-scope-button:focus-visible,
.ias-watch-video-button:focus-visible,
.ias-result-actions button:focus-visible,
.ias-reference-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 127, 191, 0.2);
  outline: 2px solid transparent;
}

.ias-select-label,
.ias-toggle {
  align-items: center;
  color: var(--ias-muted);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 650;
  gap: 7px;
}

.ias-select-control {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 6px;
  color: var(--ias-text);
  font: inherit;
  min-height: 34px;
  padding: 5px 8px;
}

.ias-category-combobox {
  position: relative;
}

.ias-combobox {
  display: inline-flex;
  position: relative;
}

.ias-category-search {
  min-width: 220px;
}

.ias-category-listbox {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(28, 41, 58, 0.14);
  display: grid;
  left: 0;
  max-height: 320px;
  min-width: 260px;
  overflow-y: auto;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 3;
}

.ias-category-listbox-group {
  color: var(--ias-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

.ias-category-option {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--ias-border);
  color: var(--ias-text);
  cursor: pointer;
  font: inherit;
  padding: 8px 12px;
  text-align: left;
}

.ias-category-option:hover,
.ias-category-option-active {
  background: var(--ias-surface-soft);
}

.ias-toggle input {
  accent-color: var(--ias-accent);
  inline-size: 16px;
}

.ias-advanced {
  border-top: 1px solid var(--ias-border);
  padding: 10px 16px;
}

.ias-advanced-toggle,
.ias-advanced-clear {
  font: inherit;
}

.ias-advanced-toggle {
  align-items: center;
  background: var(--ias-surface);
  border: 1px solid var(--ias-border);
  border-radius: var(--ias-radius-pill);
  color: var(--ias-navy);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 750;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
}

.ias-advanced-toggle[aria-expanded="true"] {
  background: var(--ias-light-blue);
}

.ias-advanced-panel {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: var(--ias-radius-sm);
  display: grid;
  gap: 14px;
  margin-top: 10px;
  padding: 14px;
}

.ias-advanced-group {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ias-advanced-group + .ias-advanced-group {
  border-top: 1px solid var(--ias-border);
  padding-top: 14px;
}

.ias-advanced-hint {
  color: var(--ias-muted);
  font-size: 0.8rem;
  grid-column: 1 / -1;
  margin: 0;
}

.ias-advanced-panel .ias-select-label,
.ias-advanced-panel .ias-field-label {
  align-items: stretch;
  display: grid;
  gap: 5px;
}

.ias-advanced-panel .ias-select-control,
.ias-advanced-panel .ias-field-control {
  width: 100%;
}

.ias-advanced-toggle-row {
  min-height: 36px;
}

.ias-field-label {
  color: var(--ias-muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
}

.ias-field-label span {
  color: var(--ias-muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.ias-field-control {
  background: var(--ias-surface);
  border: 1px solid var(--ias-border);
  border-radius: 7px;
  color: var(--ias-text);
  font: 400 0.95rem var(--ias-font);
  min-height: 36px;
  padding: 7px 10px;
}

.ias-advanced-clear {
  background: transparent;
  border: 1px solid var(--ias-border);
  border-radius: 7px;
  color: var(--ias-blue);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 750;
  justify-self: start;
  min-height: 36px;
  padding: 7px 10px;
}

.ias-scope {
  align-items: center;
  background: var(--ias-light-pink);
  border-top: 1px solid var(--ias-secondary-coral);
  color: var(--ias-navy);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 16px;
}

.ias-scope button,
.ias-did-you-mean button,
.ias-result-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 6px;
  color: var(--ias-blue);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
}

.ias-scope button:hover,
.ias-did-you-mean button:hover,
.ias-result-actions button:hover {
  background: var(--ias-surface-soft);
  border-color: var(--ias-blue);
}

/* "Watch here" - the primary CTA on a search result. Solid navy fill so it reads
   as the single most important action on the card, with a play icon for
   at-a-glance scanning. */
button.ias-watch-video-button {
  align-items: center;
  background: var(--ias-navy);
  border: 1px solid var(--ias-navy);
  border-radius: 6px;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
}

button.ias-watch-video-button:hover {
  background: var(--ias-navy-strong);
  border-color: var(--ias-navy-strong);
}

/* "Search this category" / "Search within this category" / browse tree "Search" -
   the secondary CTA: an outlined blue pill with a search icon, filled on hover. */
button.ias-scope-button,
button.ias-browse-tree-scope {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ias-blue);
  border-radius: 6px;
  color: var(--ias-blue);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  gap: 5px;
  min-height: 30px;
  padding: 5px 10px;
}

button.ias-scope-button:hover,
button.ias-browse-tree-scope:hover {
  background: var(--ias-navy);
  border-color: var(--ias-navy);
  color: #fff;
}

.ias-status {
  align-items: center;
  background: var(--ias-surface-soft);
  border-top: 1px solid var(--ias-border);
  color: var(--ias-muted);
  display: flex;
  font-size: 0.9rem;
  justify-content: space-between;
  min-height: 40px;
  padding: 10px 16px;
}

.ias-did-you-mean {
  align-items: center;
  background: var(--ias-light-blue);
  border-top: 1px solid var(--ias-placid-blue);
  color: var(--ias-text);
  display: flex;
  gap: 8px;
  padding: 9px 16px;
}

.ias-main {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 280px;
}

.ias-mode-browse .ias-main,
.ias-mode-specialist .ias-main,
.ias-mode-search .ias-main {
  grid-template-columns: minmax(0, 1fr);
}

.ias-mode-search .ias-reference-panel {
  /* In the two-column layouts (browse/specialist), this panel is a right-hand
     aside. Search mode collapses .ias-main to a single column, which left the
     panel as the SECOND grid item - rendered below the entire results list
     and "Load more" button, ~2000px down, where no one scrolls to find it.
     Reordering it first puts it between the facet chips and the first
     result; laying its cards out horizontally keeps that repositioning from
     pushing results down by a full vertical stack's height instead. */
  border-left: 0;
  border-top: 0;
  order: -1;
  padding: 0 0 12px;
}

.ias-mode-search .ias-reference-panel[hidden] {
  display: none;
}

.ias-mode-search .ias-reference-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ias-mode-search .ias-reference-panel h2 {
  flex-basis: 100%;
}

.ias-mode-search .ias-reference-card {
  flex: 1 1 220px;
  max-width: 320px;
}

.ias-search-panel {
  min-width: 0;
  position: relative;
}

.ias-status strong {
  color: var(--ias-text);
  font-weight: 750;
}

.ias-results {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 16px;
}

.ias-empty {
  color: var(--ias-muted);
  margin: 0;
  padding: 16px;
}

.ias-load-more {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 18px;
}

.ias-load-more-button {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border-strong);
  border-radius: var(--ias-radius-pill);
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  min-height: 40px;
  padding: 8px 20px;
}

.ias-load-more-button:hover {
  background: #fff;
  border-color: var(--ias-blue);
}

.ias-load-more-button:disabled {
  cursor: default;
  opacity: 0.65;
}

.ias-load-more-total {
  color: var(--ias-muted);
  font-size: 0.8rem;
}

.ias-result {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-left: 3px solid transparent;
  border-radius: var(--ias-radius-sm);
  box-shadow: var(--ias-shadow-sm);
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr);
  padding: 16px 17px;
}

.ias-result:hover {
  border-color: var(--ias-border-strong);
  border-left-color: var(--ias-placid-blue);
}

.ias-result[data-card-link] {
  cursor: pointer;
}

.ias-result-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 240px);
}

.ias-result-content {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.ias-result-topline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ias-badge {
  align-items: center;
  border-radius: var(--ias-radius-pill);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  gap: 4px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 5px 9px;
  text-transform: uppercase;
}

.ias-badge-article {
  background: var(--ias-purple-soft);
  color: var(--ias-purple);
}

.ias-badge-category {
  background: var(--ias-placid-blue);
  color: var(--ias-navy);
}

.ias-badge-soft {
  background: var(--ias-light-blue);
  color: var(--ias-navy);
}

.ias-icon {
  color: currentColor;
  flex-shrink: 0;
}

.ias-module {
  color: var(--ias-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ias-result-title {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
}

.ias-result-title-link {
  color: inherit;
  text-decoration: none;
}

.ias-result-title-link:hover,
.ias-result-title-link:focus-visible {
  text-decoration: underline;
}

.ias-result-category-action,
.ias-glossary-title-button {
  background: transparent;
  border: 0;
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.ias-result-category-action:hover,
.ias-glossary-title-button:hover {
  color: var(--ias-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ias-result-link {
  color: var(--ias-blue);
  text-decoration: none;
}

.ias-result-link:hover {
  color: var(--ias-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ias-setting-link {
  background: var(--ias-blue);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 750;
  min-height: 32px;
  padding: 7px 10px;
  text-decoration: none;
}

.ias-setting-link:hover {
  background: var(--ias-navy-strong);
}

.ias-setting-link-disabled,
.ias-setting-link-disabled:hover {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  color: var(--ias-muted);
  cursor: default;
}

.ias-setting-card,
.ias-glossary-card {
  width: 100%;
}

.ias-setting-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
}

.ias-setting-main,
.ias-setting-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ias-setting-breadcrumbs {
  align-items: center;
  color: var(--ias-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 5px;
}

.ias-setting-breadcrumbs a,
.ias-setting-breadcrumbs span {
  min-width: 0;
}

.ias-setting-breadcrumbs a {
  color: var(--ias-blue);
  font-weight: 700;
  text-decoration: none;
}

.ias-setting-breadcrumbs a:hover {
  text-decoration: underline;
}

.ias-setting-breadcrumbs a[aria-disabled="true"] {
  color: var(--ias-muted);
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.ias-setting-breadcrumbs b {
  color: var(--ias-border-strong);
  font-weight: 500;
}

.ias-setting-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 2px 0 0;
}

.ias-setting-meta div {
  border-left: 3px solid var(--ias-light-blue);
  padding-left: 9px;
}

.ias-setting-meta dt {
  color: var(--ias-muted);
  font-size: 0.72rem;
  font-weight: 750;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.ias-setting-meta dd {
  color: var(--ias-text);
  font-size: 0.86rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.ias-setting-meta small {
  color: var(--ias-muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 650;
  margin-top: 2px;
}

.ias-setting-options {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ias-setting-options span,
.ias-setting-related span,
.ias-glossary-alternates span {
  color: var(--ias-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ias-setting-options ul {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ias-setting-options li {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 6px;
  color: var(--ias-text);
  font-size: 0.82rem;
  padding: 6px 8px;
}

.ias-setting-options p,
.ias-setting-related p {
  color: var(--ias-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

.ias-setting-options-empty {
  background: #fff;
}

.ias-setting-related {
  /* Related wording still drives matching via item.searchTerms (see
     buildSettingLearnMoreQuery) - this only hides the visible list from the
     card so it stops reading as raw keyword-stuffing to users. */
  display: none;
}

.ias-glossary-alternates {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ias-glossary-alternates ul {
  columns: 2;
  column-gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ias-glossary-alternates li {
  break-inside: avoid;
  color: var(--ias-text);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0 0 5px;
  padding-left: 14px;
  position: relative;
}

.ias-glossary-alternates li::before {
  background: var(--ias-blue);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0.55em;
  width: 5px;
}

.ias-glossary-card .ias-result-actions {
  justify-content: flex-start;
}

.ias-release-ticket {
  color: var(--ias-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 650;
}

.ias-release-notes-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ias-release-notes-list li {
  color: var(--ias-navy);
  font-size: 0.9rem;
  line-height: 1.48;
  padding-left: 14px;
  position: relative;
}

.ias-release-notes-list li::before {
  color: var(--ias-border-strong);
  content: "\2013";
  left: 0;
  position: absolute;
}

.ias-whats-new-card .ias-result-actions {
  justify-content: flex-start;
}

.ias-whats-new-body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ias-whats-new-screenshot-button {
  background: none;
  border: 0;
  cursor: zoom-in;
  display: block;
  flex: 0 0 auto;
  padding: 0;
}

.ias-whats-new-screenshot {
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  display: block;
  height: auto;
  max-width: 220px;
  object-fit: cover;
}

.ias-image-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.ias-image-modal-backdrop {
  background: rgba(11, 17, 28, 0.78);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.ias-image-modal-content {
  max-height: 92vh;
  max-width: 92vw;
  position: relative;
}

.ias-image-modal-img {
  border-radius: 8px;
  display: block;
  max-height: 92vh;
  max-width: 92vw;
  object-fit: contain;
}

.ias-image-modal-close {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  font-size: 1.3rem;
  height: 36px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 36px;
}

.ias-image-modal-close:hover {
  background: var(--ias-surface-soft);
}

.ias-whats-new-body .ias-snippet {
  flex: 1 1 260px;
}

.ias-whats-new-roundup-link {
  color: var(--ias-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.ias-breadcrumb-info {
  position: relative;
}

.ias-breadcrumb-info summary {
  align-items: center;
  border-radius: 50%;
  color: var(--ias-muted);
  cursor: pointer;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  list-style: none;
  width: 22px;
}

.ias-breadcrumb-info summary::-webkit-details-marker {
  display: none;
}

.ias-breadcrumb-info summary:hover,
.ias-breadcrumb-info[open] summary {
  background: var(--ias-surface-soft);
  color: var(--ias-blue);
}

.ias-breadcrumb-info-panel {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(28, 41, 58, 0.14);
  color: var(--ias-muted);
  font-size: 0.82rem;
  left: 0;
  line-height: 1.35;
  min-width: 200px;
  padding: 8px 10px;
  position: absolute;
  top: calc(100% + 4px);
  z-index: 3;
}

.ias-matched-heading {
  color: var(--ias-blue);
  font-size: 0.83rem;
  font-weight: 700;
}

.ias-snippet {
  color: var(--ias-navy);
  font-size: 0.92rem;
  line-height: 1.48;
  margin: 0;
}

.ias-snippet mark {
  background: transparent;
  color: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--ias-mark-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.ias-result-actions {
  align-content: start;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

.ias-card-action,
.ias-setting-link,
.ias-browse-view-button,
.ias-browse-tree-view,
.ias-browse-card-view {
  align-items: center;
  border: 1px solid var(--ias-border-strong);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 8px 11px;
  text-decoration: none;
}

.ias-card-action,
.ias-browse-view-button,
.ias-browse-tree-view,
.ias-browse-card-view {
  background: var(--ias-surface);
  color: var(--ias-blue);
}

.ias-card-action-primary {
  background: var(--ias-navy);
  border-color: var(--ias-navy);
  color: #fff;
}

.ias-card-action-secondary {
  background: var(--ias-light-blue);
  color: var(--ias-navy);
}

.ias-card-action:hover,
.ias-browse-view-button:hover,
.ias-browse-tree-view:hover,
.ias-browse-card-view:hover {
  border-color: var(--ias-blue);
  box-shadow: var(--ias-shadow-sm);
  text-decoration: none;
}

.ias-debug {
  border-top: 1px solid var(--ias-border);
  color: var(--ias-muted);
  font-size: 0.8rem;
  padding-top: 6px;
}

.ias-debug pre {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 6px;
  margin: 6px 0 0;
  overflow-x: auto;
  padding: 8px;
}

.ias-reference-panel {
  border-left: 1px solid var(--ias-border);
  display: grid;
  gap: 9px;
  padding: 14px 16px 16px 0;
}

.ias-reference-panel h2 {
  font-size: 0.95rem;
  margin: 0;
}

.ias-reference-card {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  color: var(--ias-text);
  display: grid;
  gap: 5px;
  padding: 10px;
  text-decoration: none;
}

.ias-reference-card:hover {
  border-color: var(--ias-border-strong);
}

.ias-reference-card span,
.ias-reference-card small {
  color: var(--ias-muted);
  font-size: 0.75rem;
}

.ias-browse {
  padding: 16px;
}

.ias-browse-head {
  display: grid;
  gap: 10px;
}

.ias-browse-content {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.ias-browse-loading {
  align-items: center;
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  color: var(--ias-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

.ias-browse-loading strong {
  color: var(--ias-navy);
}

.ias-browse-search-label {
  align-items: center;
  background: var(--ias-surface);
  border: 1px solid var(--ias-border-strong);
  border-radius: var(--ias-radius-sm);
  color: var(--ias-muted);
  display: grid;
  gap: 8px;
  grid-template-columns: auto auto minmax(0, 1fr);
  padding: 8px 10px;
}

.ias-browse-search-label span {
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.ias-browse-search {
  border: 0;
  color: var(--ias-text);
  font: inherit;
  min-width: 0;
  outline: 0;
}

.ias-browse-section h3 {
  align-items: center;
  color: var(--ias-navy);
  display: flex;
  font-size: 0.95rem;
  gap: 7px;
  line-height: 1.25;
  margin: 0;
}

.ias-browse-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.ias-browse-tree-panel {
  margin-top: 0;
  min-width: 0;
}

.ias-browse-card {
  background: #fff;
  border: 1px solid var(--ias-border);
  border-radius: 8px;
  color: var(--ias-text);
  display: grid;
  gap: 8px;
  padding: 12px;
}

.ias-browse-card-main {
  background: transparent;
  border: 0;
  color: var(--ias-text);
  column-gap: 10px;
  cursor: pointer;
  display: grid;
  font: inherit;
  grid-template-columns: 22px 1fr;
  min-height: 94px;
  padding: 0;
  row-gap: 4px;
  text-align: left;
}

.ias-browse-card:hover {
  border-color: var(--ias-border-strong);
  box-shadow: var(--ias-shadow-sm);
}

.ias-browse-card-icon {
  color: var(--ias-purple);
  grid-column: 1;
  grid-row: 1 / span 3;
  margin-top: 2px;
}

.ias-browse-card strong,
.ias-browse-card span,
.ias-browse-card small {
  grid-column: 2;
}

.ias-browse-card span,
.ias-browse-card small {
  color: var(--ias-muted);
  font-size: 0.78rem;
}

.ias-browse-tree {
  background: transparent;
  border: 0;
  border-radius: 8px;
  display: grid;
  gap: 1px;
  padding: 0;
}

.ias-browse-tree-node {
  display: grid;
  gap: 2px;
}

.ias-browse-tree-children {
  border-left: 1px solid var(--ias-border);
  display: grid;
  gap: 1px;
  margin-left: 12px;
  padding-left: 8px;
}

.ias-browse-tree-leaf {
  align-items: center;
  border-radius: 6px;
  color: var(--ias-text);
  display: flex;
  gap: 7px;
  min-height: 32px;
  padding: 3px 4px 3px 32px;
  text-decoration: none;
}

.ias-browse-tree-leaf:hover {
  background: var(--ias-surface-soft);
}

.ias-browse-tree-leaf strong {
  font-weight: 650;
}

.ias-browse-tree-row {
  align-items: center;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  grid-template-columns: 24px minmax(150px, 1fr) auto 32px 32px;
  min-height: 38px;
  padding: 3px 4px;
}

.ias-browse-tree-current > .ias-browse-tree-row {
  background: var(--ias-blue-soft);
}

.ias-browse-toggle,
.ias-browse-tree-spacer {
  align-items: center;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.ias-browse-toggle {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 6px;
  color: var(--ias-text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.ias-browse-tree-name {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ias-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 7px;
  min-width: 0;
  padding: 2px 0;
  text-align: left;
}

.ias-browse-tree-icon {
  color: var(--ias-blue);
}

.ias-browse-tree-name-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ias-browse-tree-name strong,
.ias-browse-tree-name small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ias-browse-tree-name strong {
  display: -webkit-box;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ias-browse-tree-name small {
  white-space: nowrap;
}

.ias-browse-tree-name small,
.ias-browse-tree-count {
  color: var(--ias-muted);
  font-size: 0.76rem;
}

.ias-browse-tree-count {
  background: var(--ias-surface-soft);
  border-radius: 999px;
  min-width: 28px;
  padding: 2px 7px;
  text-align: center;
}

.ias-browse-tree-scope,
.ias-browse-tree-view {
  font-size: 0;
  inline-size: 32px;
  min-height: 32px;
  overflow: hidden;
  padding: 0;
}

.ias-browse-tree-scope .ias-icon,
.ias-browse-tree-view .ias-icon {
  height: 15px;
  width: 15px;
}

.ias-error {
  color: var(--ias-accent-strong);
}

.ias-input-wrap {
  min-width: 0;
  position: relative;
}

.ias-input-wrap .ias-input {
  padding-right: 38px;
}

.ias-clear {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ias-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.35rem;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
}

.ias-clear:hover {
  background: var(--ias-surface-soft);
  color: var(--ias-text);
}

.ias-report-confirmation {
  color: var(--ias-blue);
  font-size: 0.85rem;
  font-weight: 700;
}

.ias-sort-toggle {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.ias-sort-toggle select {
  border: 1px solid var(--ias-border-strong);
  border-radius: 999px;
  color: var(--ias-blue);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 8px;
}

.ias-concepts {
  align-items: center;
  background: var(--ias-purple-soft);
  border-top: 1px solid var(--ias-light-blue);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
}

.ias-concepts-label {
  color: var(--ias-purple);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ias-concept-chip {
  background: #fff;
  border: 1px solid var(--ias-placid-blue);
  border-radius: 999px;
  color: var(--ias-purple);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 5px 12px;
}

.ias-concept-chip:hover {
  background: var(--ias-light-blue);
  border-color: var(--ias-blue);
}

/* "Also found: N Settings, N Glossary terms" - Search-tab discovery chips
   pointing at the specialist tabs (see renderSpecialistHint). */
.ias-specialist-hint {
  align-items: center;
  background: var(--ias-surface-tint);
  border-top: 1px solid var(--ias-border);
  color: var(--ias-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.84rem;
  gap: 8px;
  padding: 9px 16px;
}

.ias-specialist-hint span {
  font-weight: 700;
}

.ias-specialist-hint button {
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 999px;
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 11px;
}

.ias-specialist-hint button:hover {
  background: var(--ias-light-blue);
  border-color: var(--ias-blue);
}

/* Inline glossary definition card: an exact-term glossary match answers a
   jargon lookup right in the hint row instead of requiring a tab switch. */
.ias-inline-glossary-card {
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 10px;
  flex-basis: 100%;
  padding: 10px 14px;
}

.ias-inline-glossary-card strong {
  color: var(--ias-blue);
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.ias-inline-glossary-card p {
  color: var(--ias-muted);
  font-size: 0.86rem;
  margin: 0 0 8px;
}

.ias-inline-glossary-card button {
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 999px;
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 11px;
}

.ias-inline-glossary-card button:hover {
  background: var(--ias-light-blue);
  border-color: var(--ias-blue);
}

/* Type/module refinement facets, e.g. "Guides (14) - Videos (6)" - counted
   over every match, not just the visible page (see renderFacets). */
.ias-field-control:focus {
  border-color: var(--ias-focus);
  box-shadow: 0 0 0 3px rgba(31, 127, 191, 0.16);
  outline: none;
}

/* "Also appears in N other places" - same-title pages folded onto one card
   (see foldDuplicateResults) instead of competing as separate results. */
.ias-duplicates {
  color: var(--ias-muted);
  font-size: 0.83rem;
  margin: 2px 0 0;
}

.ias-duplicates summary {
  cursor: pointer;
  font-weight: 700;
}

.ias-duplicates ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 4px;
}

.ias-duplicates li {
  padding: 2px 0;
}

.ias-duplicates a {
  color: var(--ias-blue);
}

.ias-role-tag {
  align-items: center;
  background: var(--ias-blue-soft);
  border-radius: 999px;
  color: var(--ias-blue);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-right: 6px;
  padding: 4px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.ias-result-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ias-meta-badge {
  align-items: center;
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 6px;
  color: var(--ias-muted);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 4px;
  padding: 3px 7px;
}

.ias-meta-video {
  background: var(--ias-light-pink);
  border-color: var(--ias-secondary-coral);
  color: var(--ias-accent-strong);
}

.ias-meta-steps {
  background: var(--ias-light-blue);
  border-color: var(--ias-placid-blue);
  color: var(--ias-navy);
}

.ias-updated {
  color: var(--ias-muted);
  font-size: 0.76rem;
  font-weight: 650;
  margin-left: auto;
}

.ias-jump-link {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  text-decoration: none;
  width: fit-content;
}

.ias-jump-link:hover {
  text-decoration: underline;
}

.ias-no-results {
  display: grid;
  gap: 10px;
}

.ias-no-results p {
  margin: 0;
}

.ias-no-results-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ias-suggestion-chip {
  background: var(--ias-surface-soft);
  border: 1px solid var(--ias-border);
  border-radius: 999px;
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 12px;
}

.ias-suggestion-chip:hover {
  background: #fff;
  border-color: var(--ias-border-strong);
}

.ias-link-button {
  background: none;
  border: 0;
  color: var(--ias-blue);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
}

.ias-result-title mark {
  background: transparent;
  color: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--ias-mark-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.ias-inline-video {
  margin-top: 12px;
}

.ias-inline-video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.ias-inline-video-frame iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.ias-video-feedback {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ias-video-feedback-label {
  color: var(--ias-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.ias-video-feedback-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 8px;
  color: var(--ias-text);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
}

.ias-video-feedback-button:hover:not(:disabled) {
  border-color: var(--ias-focus);
}

.ias-video-feedback-button[aria-pressed="true"] {
  background: var(--ias-accent);
  border-color: var(--ias-accent);
  color: #fff;
}

.ias-video-feedback-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.ias-video-feedback-thanks {
  color: var(--ias-blue);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .ias-search-row {
    grid-template-columns: 1fr;
  }

  .ias-submit {
    width: 100%;
  }

  .ias-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ias-main {
    grid-template-columns: 1fr;
  }

  .ias-setting-layout {
    grid-template-columns: 1fr;
  }

  .ias-result-layout {
    grid-template-columns: 1fr;
  }

  .ias-result-actions {
    align-items: stretch;
  }

  .ias-browse-search-label {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ias-browse-search-label span {
    display: none;
  }

  .ias-glossary-alternates ul {
    columns: 1;
  }

  .ias-reference-panel {
    border-left: 0;
    border-top: 1px solid var(--ias-border);
    padding: 0 16px 16px;
  }

  .ias-browse-tree-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ias-browse-tree-count,
  .ias-browse-tree-scope,
  .ias-browse-tree-view {
    justify-self: start;
    margin-left: 36px;
  }

  .ias-updated {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ias-result,
  .ias-browse-card,
  .ias-reference-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }

  .ias-result:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(28, 41, 58, 0.08);
  }
}

.ias-feedback-panel {
  display: grid;
  gap: 14px;
  padding: 16px 0 4px;
}

.ias-feedback-title {
  color: var(--ias-text);
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.ias-feedback-hint {
  color: var(--ias-muted);
  font-size: 0.82rem;
  margin: 0;
}

.ias-feedback-rating {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.ias-feedback-rating legend {
  color: var(--ias-muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0 0 6px;
  width: 100%;
}

.ias-feedback-rating-button {
  background: #fff;
  border: 1px solid var(--ias-border-strong);
  border-radius: 8px;
  color: var(--ias-text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 38px;
  min-width: 38px;
}

.ias-feedback-rating-button:hover {
  border-color: var(--ias-focus);
}

.ias-feedback-rating-button[aria-pressed="true"] {
  background: var(--ias-accent);
  border-color: var(--ias-accent);
  color: #fff;
}

.ias-feedback-comment {
  appearance: none;
  border: 1px solid var(--ias-border-strong);
  border-radius: 6px;
  color: var(--ias-text);
  min-height: 96px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

.ias-feedback-comment:focus {
  border-color: var(--ias-focus);
  box-shadow: 0 0 0 3px rgba(31, 127, 191, 0.15);
  outline: none;
}

.ias-feedback-actions {
  display: flex;
}

.ias-feedback-submit {
  background: var(--ias-accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 16px;
}

.ias-feedback-submit:hover {
  filter: brightness(1.05);
}

.ias-feedback-error {
  color: var(--ias-accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}

.ias-feedback-confirmation {
  color: var(--ias-blue);
  font-size: 0.9rem;
  font-weight: 700;
}

.ias-feedback-again {
  background: none;
  border: 1px solid var(--ias-border-strong);
  border-radius: 8px;
  color: var(--ias-text);
  cursor: pointer;
  font: inherit;
  padding: 8px 14px;
  width: fit-content;
}

/* Loading overlay: shown over .ias-search-panel (see showLoadingOverlay in
   academy-search-widget.js) while a search is actually in flight. Deliberately
   NOT stretched with bottom: 0 to the panel's full height - .ias-search-panel
   can already be several thousand pixels tall once a previous search's
   results are in the DOM, and centering inside that whole span would put the
   astronaut hundreds of pixels below the viewport instead of right where the
   user is looking (found by measuring its rendered position while testing
   against a real result set, not by inspection alone). Anchoring to the top
   with an intrinsic (content-sized) height instead keeps it pinned next to
   the search input regardless of how long the previous results list was.
   The starfield background is a fixed dark navy in BOTH light and dark host
   themes - it's a deliberate "space" moment, not themed chrome, so the text
   and astronaut colors below are hardcoded light tones rather than the usual
   --ias-text token (which would go dark-on-dark in the light theme). */
.ias-loading-overlay {
  align-items: center;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 72%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 58%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 82%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 32%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 88%, rgba(255, 255, 255, 0.45), transparent 60%),
    linear-gradient(180deg, #002e47 0%, #001527 100%);
  border-radius: var(--ias-radius-sm);
  box-shadow: 0 14px 32px rgba(0, 10, 20, 0.35);
  display: flex;
  justify-content: center;
  left: 0;
  min-height: 260px;
  padding: 24px 16px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.ias-loading-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.ias-pinwheel {
  background: conic-gradient(
    var(--ias-coral) 0deg 90deg,
    var(--ias-yellow) 90deg 180deg,
    var(--ias-purple) 180deg 270deg,
    var(--ias-blue-bright) 270deg 360deg
  );
  border-radius: 50%;
  height: 34px;
  position: relative;
  width: 34px;
}

.ias-pinwheel::after {
  background: #001527;
  border-radius: 50%;
  content: "";
  inset: 38%;
  position: absolute;
}

.ias-loading-label {
  color: #b9d4e4;
  font-size: 0.82rem;
  font-weight: 650;
  margin: 0;
}

.ias-astronaut-scene {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.ias-astronaut {
  filter: drop-shadow(0 6px 10px rgba(0, 8, 16, 0.45));
  height: 90px;
  width: 70px;
}

.ias-astronaut-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.ias-astronaut-bubble {
  background: #f3f8fb;
  border: 3px solid #001c2c;
  clip-path: polygon(
    0% 8px, 8px 8px, 8px 0%,
    calc(100% - 8px) 0%, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0% calc(100% - 8px)
  );
  color: #001c2c;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 3px;
  margin-bottom: 34px;
  max-width: 230px;
  padding: 10px 12px;
  position: relative;
  text-align: left;
}

.ias-astronaut-bubble:hover,
.ias-astronaut-bubble:focus-visible {
  background: #ffffff;
}

.ias-astronaut-bubble:focus-visible {
  outline: 2px solid var(--ias-blue-bright);
  outline-offset: 2px;
}

.ias-astronaut-bubble::after {
  background: #f3f8fb;
  border-bottom: 3px solid #001c2c;
  border-right: 3px solid #001c2c;
  bottom: -11px;
  content: "";
  height: 12px;
  left: 22px;
  position: absolute;
  transform: rotate(45deg);
  width: 12px;
}

.ias-astronaut-bubble-kicker {
  color: var(--ias-accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ias-astronaut-bubble-text {
  font-size: 0.82rem;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .ias-pinwheel {
    animation: ias-pinwheel-spin 1.1s linear infinite;
  }

  .ias-astronaut {
    animation: ias-astronaut-float 2.4s ease-in-out infinite;
  }
}

@keyframes ias-pinwheel-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ias-astronaut-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 560px) {
  .ias-astronaut-scene {
    flex-direction: column-reverse;
    align-items: center;
  }

  .ias-astronaut-bubble {
    margin-bottom: 0;
    text-align: center;
  }

  .ias-astronaut-bubble::after {
    display: none;
  }
}