/* ========================================================================
   SIENNA ACCESSIBILITY WIDGET: brand colors
   Widget: /js/sienna-accessibility.umd.js (Sienna 2.1.0, MIT, Clue-patched
   by scripts/patch-sienna-2.1.0.js; origin raffi_6, back-ported 2026-10-09).
   This file is identical on every Clue site. Never put a client's colors
   here: a site brands the widget through ONE token in client.css :root,

     --sienna-color: <a deep brand color>;

   which defaults to --primary-color-dark. It must pass 4.5:1 under white
   text and as text on #ffffff and #eff1f5 (the panel's surfaces). Declare
   it on :root: Sienna puts its widget in a direct child of <body>, outside
   any wrapper, so a token declared lower never reaches it.

   Colors only: Sienna's fonts and its highlight features (Highlight Links
   and Highlight Titles outline in Sienna's own #0048ff) stay Sienna's. The
   launcher's size and corner stay the template's (scale and right-to-left
   swap in clue.css).

   Sienna injects its own <style> with !important rules at runtime, after
   every stylesheet, so each selector here carries one extra class or
   element to outrank it. Check with computed styles after Sienna loads;
   source order proves nothing.
   ======================================================================== */

:root {
  --asw-brand: var(--sienna-color, var(--primary-color-dark, #0848ca));
  --asw-brand-dark: color-mix(in srgb, var(--asw-brand) 75%, #000);
  --asw-brand-tint: color-mix(in srgb, var(--asw-brand) 8%, #fff);
  --asw-brand-line: color-mix(in srgb, var(--asw-brand) 20%, transparent);
  --asw-brand-faint: color-mix(in srgb, var(--asw-brand) 10%, transparent);
}

/* Launcher button. The shadow is neutral in place of Sienna's navy tint. */
.asw-container .asw-menu-btn {
  background: var(--asw-brand) !important;
  outline-color: var(--asw-brand) !important;
  box-shadow: 0 5px 15px rgb(0 0 0 / 0.15), 0 2px 4px rgb(0 0 0 / 0.2) !important;
  padding: 0 !important;
}

/* The launcher's decorative outline is permanent, so keyboard focus gets
   an extra white-and-dark ring outside it. */
.asw-container .asw-menu-btn:focus-visible {
  box-shadow: 0 0 0 9px #fff, 0 0 0 13px #1a1a1a !important;
}

/* Menu header */
.asw-container .asw-menu-header {
  background: linear-gradient(135deg, var(--asw-brand), var(--asw-brand-dark)) !important;
}
.asw-container .asw-menu-header svg {
  fill: var(--asw-brand) !important;
}

/* Cards and section titles. Sienna fades the titles to 80%, which would
   take the token under 4.5:1; they stay at full strength. */
.asw-container .asw-card {
  border-color: var(--asw-brand-line) !important;
  box-shadow: 0 8px 32px var(--asw-brand-faint) !important;
}
.asw-container .asw-card-title {
  color: var(--asw-brand) !important;
  opacity: 1 !important;
}

/* Feature buttons */
.asw-container .asw-btn:hover {
  border-color: var(--asw-brand-line) !important;
  box-shadow: 0 8px 24px var(--asw-brand-faint) !important;
}
.asw-container .asw-btn.asw-selected {
  border-color: var(--asw-brand) !important;
  background: var(--asw-brand-tint) !important;
}
.asw-container .asw-btn.asw-selected svg,
.asw-container .asw-btn.asw-selected span {
  fill: var(--asw-brand) !important;
  color: var(--asw-brand) !important;
}
.asw-container .asw-btn.asw-selected::after {
  background: linear-gradient(135deg, var(--asw-brand), var(--asw-brand-dark)) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--asw-brand) 30%, transparent) !important;
}
.asw-container .asw-plus:hover,
.asw-container .asw-minus:hover {
  border-color: var(--asw-brand) !important;
}

/* Profiles */
.asw-container .asw-profile-btn {
  border-color: var(--asw-brand-faint) !important;
}
.asw-container .asw-profile-btn.asw-selected {
  box-shadow: 0 4px 12px var(--asw-brand-faint) !important;
}
.asw-container .asw-profile-btn:hover,
.asw-container .asw-profile-btn.asw-selected {
  border-color: var(--asw-brand) !important;
}
.asw-container .asw-profile-icon {
  color: var(--asw-brand) !important;
  background: var(--asw-brand-tint) !important;
  box-shadow: inset 0 2px 4px var(--asw-brand-faint) !important;
}
.asw-container .asw-profile-btn.asw-selected .asw-profile-toggle {
  background: var(--asw-brand) !important;
}

/* Reset button at the bottom of the menu */
.asw-container .asw-menu-reset-footer-btn {
  background: var(--asw-brand) !important;
}

/* Page Structure dialog (appended to <body>, outside the widget container) */
html body .asw-structure-header {
  background: linear-gradient(135deg, var(--asw-brand), var(--asw-brand-dark)) !important;
}
html body .asw-tab-btn:hover,
html body .asw-tab-btn.asw-active,
html body .asw-action-btn:hover {
  color: var(--asw-brand) !important;
}
html body .asw-tab-btn.asw-active::after {
  background: var(--asw-brand) !important;
}
html body .asw-structure-item:hover,
html body .asw-structure-item:focus-within {
  background: var(--asw-brand-tint) !important;
  border-color: var(--asw-brand-line) !important;
}
html body .asw-structure-nested-wrapper {
  border-left-color: var(--asw-brand-line) !important;
}
/* Sienna fades "Visit link" to 40%, which fails text contrast. */
html body .asw-structure-actions {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .asw-container .asw-btn:hover {
    transform: none !important;
  }
  .asw-container *,
  .asw-structure-modal,
  .asw-structure-overlay,
  .asw-super-focus-highlight {
    transition: none !important;
    animation: none !important;
  }
}