/* Overrides for the vendored AppStack theme (static/appstack/css/*.css). */

/* Light palette at WCAG AA (1.4.3 text >= 4.5:1, 1.4.11 controls >= 3:1,
   #6779). Each failing AppStack colour is shaded towards black (Bootstrap's
   shade-color) just far enough to pass on every light background the app
   uses: #fff, #f7f9fc, #f6f7f9, #f8f9fa, #f4f7f9 and #eff2f6.
   AppStack writes many of these as literals inside component rules rather
   than through the root variables, so those component variables are set
   here too. trainer/tests/test_contrast_palette.py pins every ratio.
   Scoped to the app's light theme: the dark embed theme keeps Bootstrap's
   own palette (dark and high-contrast themes are #6782's), and a partner's
   embed (data-partner-theme) keeps the partner's colours. */
html:not([data-bs-theme="dark"]):not([data-partner-theme]) {
  --copient-text: #5c636a;
  --copient-muted: #676f77;
  --copient-primary: #356cc6;
  --copient-primary-hover: #2d5ca8;
  --copient-primary-active: #2a569e;
  --copient-success: #317c4b;
  --copient-success-hover: #2a6940;
  --copient-danger: #bc4845;
  --copient-danger-hover: #a03d3b;
  --copient-info: #18769e;
  --copient-info-hover: #146486;
  --copient-warning-text: #8f672f;
  --copient-warning-text-rgb: 143, 103, 47;
  --copient-code: #c42870;
  --copient-control-border: #8a8f94;
  --copient-focus: #0d6efd;
  --copient-focus-on-dark: #9ec5fe;

  --bs-body-color: var(--copient-text);
  --bs-body-color-rgb: 92, 99, 106;
  --bs-secondary-color: var(--copient-muted);
  --bs-tertiary-color: var(--copient-muted);
  --bs-highlight-color: var(--copient-text);

  --bs-blue: var(--copient-primary);
  --bs-primary: var(--copient-primary);
  --bs-primary-rgb: 53, 108, 198;
  --bs-link-color: var(--copient-primary);
  --bs-link-color-rgb: 53, 108, 198;
  --bs-link-hover-color: var(--copient-primary-hover);
  --bs-link-hover-color-rgb: 45, 92, 168;

  --bs-green: var(--copient-success);
  --bs-success: var(--copient-success);
  --bs-success-rgb: 49, 124, 75;
  --bs-form-valid-color: var(--copient-success);
  --bs-form-valid-border-color: var(--copient-success);

  --bs-red: var(--copient-danger);
  --bs-danger: var(--copient-danger);
  --bs-danger-rgb: 188, 72, 69;
  --bs-form-invalid-color: var(--copient-danger);
  --bs-form-invalid-border-color: var(--copient-danger);

  --bs-cyan: var(--copient-info);
  --bs-info: var(--copient-info);
  --bs-info-rgb: 24, 118, 158;

  --bs-code-color: var(--copient-code);
}

/* Dark palette at WCAG AA (#6782, Section 508 503.2). The app follows the
   OS colour scheme: layouts/includes/meta.html loads AppStack's dark build
   and marks <html data-bs-theme="dark">. Text tokens reach 4.5:1 and control
   tokens 3:1 on every dark background the app uses: #202634 (page),
   #293042 (cards, sidebar), #343a4b and #3e4555 (tinted panels, table rows).
   Filled controls keep white text on the light palette's fills (5:1), so a
   hue has two tokens here: --copient-<hue> for text on the page and
   --copient-<hue>-fill under white text. A partner's embed keeps the
   partner's colours.
   trainer/tests/test_contrast_palette.py pins every ratio. */
html[data-bs-theme="dark"]:not([data-partner-theme]) {
  /* AppStack's dark build ships a [data-bs-theme=dark] block meant for a
     dark navbar inside a light page: it sets the navbar colours to the dark
     page colour (1.08:1 here). The app uses the attribute for the whole page,
     so the navbar takes the dark palette's text colours instead. */
  --bs-navbar-color: #c5c8ce;
  --bs-navbar-hover-color: #e3e5e8;
  --bs-navbar-active-color: #e3e5e8;
  --bs-navbar-disabled-color: rgba(197, 200, 206, 0.5);
  --bs-navbar-brand-color: #e3e5e8;
  --bs-navbar-brand-hover-color: #e3e5e8;
  --bs-navbar-toggler-border-color: rgba(197, 200, 206, 0.35);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(197, 200, 206, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  color-scheme: dark;

  --copient-text: #c5c8ce;
  --copient-muted: #b4b8c0;
  --copient-heading: #ffffff;
  --copient-primary: #93bbf9;
  --copient-primary-hover: #a8c7fa;
  --copient-primary-active: #a8c7fa;
  --copient-primary-fill: #356cc6;
  --copient-primary-fill-hover: #2d5ca8;
  --copient-primary-fill-active: #2a569e;
  --copient-success: #6fcf8f;
  --copient-success-hover: #8fdba8;
  --copient-success-fill: #317c4b;
  --copient-success-fill-hover: #2a6940;
  --copient-danger: #f6a29b;
  --copient-danger-hover: #f9bdb8;
  --copient-danger-fill: #bc4845;
  --copient-danger-fill-hover: #a03d3b;
  --copient-info: #6cc4e8;
  --copient-info-hover: #94d4ef;
  --copient-info-fill: #18769e;
  --copient-info-fill-hover: #146486;
  --copient-warning-text: #e5b567;
  --copient-control-border: #8a90a0;
  --copient-focus: #9ec5fe;
  --copient-focus-on-dark: #9ec5fe;

  /* --copient-dark-* exist only in this theme. Page CSS wraps a light-only
     literal as var(--copient-dark-<role>, <literal>), so the light theme and
     partner embeds draw the literal unchanged. */
  --copient-dark-page: #202634;
  --copient-dark-surface: #293042;
  --copient-dark-surface-alt: #343a4b;
  --copient-dark-surface-raised: #3e4555;
  --copient-dark-border: #545968;
  --copient-dark-ink: #e3e5e8;
  --copient-dark-ink-muted: #b4b8c0;
  --copient-dark-primary: #93bbf9;
  --copient-dark-success: #6fcf8f;
  --copient-dark-danger: #f6a29b;
  --copient-dark-warning: #e5b567;
  --copient-dark-info: #6cc4e8;
  --copient-dark-purple: #c4b5fd;
  --copient-dark-primary-rgb: 147, 187, 249;
  --copient-dark-success-rgb: 111, 207, 143;
  --copient-dark-danger-rgb: 246, 162, 155;
  --copient-dark-info-rgb: 108, 196, 232;
  --copient-dark-muted-rgb: 180, 184, 192;
  --copient-dark-ink-rgb: 227, 229, 232;
  --copient-warning-text-rgb: 229, 181, 103;
  --copient-dark-tint-primary: #1b2c4d;
  --copient-dark-tint-success: #193326;
  --copient-dark-tint-danger: #3f2023;
  --copient-dark-tint-warning: #3b301a;
  --copient-dark-tint-info: #173445;

  --bs-body-color: var(--copient-text);
  --bs-body-color-rgb: 197, 200, 206;
  --bs-secondary-color: var(--copient-muted);
  --bs-tertiary-color: var(--copient-muted);
  --bs-emphasis-color: var(--copient-heading);
  --bs-heading-color: var(--copient-heading);
  --bs-highlight-color: #ffffff;
  --bs-highlight-bg: #5c4813;

  /* Bootstrap's colour tokens are fills here (white text on them reaches
     4.5:1): .bg-*, badges and page CSS paint them under white text. Text on
     the dark page takes the foreground tokens below and the .text-*, .link-*
     and .border-* rules after this block. */
  --bs-blue: var(--copient-primary-fill);
  --bs-primary: var(--copient-primary-fill);
  --bs-primary-rgb: 53, 108, 198;
  --bs-link-color: var(--copient-primary);
  --bs-link-color-rgb: 147, 187, 249;
  --bs-link-hover-color: var(--copient-primary-hover);
  --bs-link-hover-color-rgb: 168, 199, 250;

  --bs-green: var(--copient-success-fill);
  --bs-success: var(--copient-success-fill);
  --bs-success-rgb: 49, 124, 75;
  --bs-form-valid-color: var(--copient-success);
  --bs-form-valid-border-color: var(--copient-success);

  --bs-red: var(--copient-danger-fill);
  --bs-danger: var(--copient-danger-fill);
  --bs-danger-rgb: 188, 72, 69;
  --bs-form-invalid-color: var(--copient-danger);
  --bs-form-invalid-border-color: var(--copient-danger);

  --bs-cyan: var(--copient-info-fill);
  --bs-info: var(--copient-info-fill);
  --bs-info-rgb: 24, 118, 158;

  --bs-warning: var(--copient-warning-text);
  --bs-code-color: #f49ac2;
  --bs-secondary: #5a6070;
  --bs-secondary-rgb: 90, 96, 112;
  --bs-dark: #3e4555;
  --bs-dark-rgb: 62, 69, 85;

  /* AppStack's dark build keeps the light theme's pale alert tints; these are
     Bootstrap 5.3's own dark-mode tints, with text at >= 4.5:1 on them. */
  --bs-primary-text-emphasis: #a8c7fa;
  --bs-primary-bg-subtle: #10213f;
  --bs-primary-border-subtle: #2d5ca8;
  --bs-secondary-text-emphasis: #c5c8ce;
  --bs-secondary-bg-subtle: #2b303b;
  --bs-secondary-border-subtle: #545968;
  --bs-success-text-emphasis: #8fdba8;
  --bs-success-bg-subtle: #0f2a19;
  --bs-success-border-subtle: #2a6940;
  --bs-info-text-emphasis: #94d4ef;
  --bs-info-bg-subtle: #0b2a38;
  --bs-info-border-subtle: #146486;
  --bs-warning-text-emphasis: #f0cc8e;
  --bs-warning-bg-subtle: #33260f;
  --bs-warning-border-subtle: #8f672f;
  --bs-danger-text-emphasis: #f9bdb8;
  --bs-danger-bg-subtle: #3a1513;
  --bs-danger-border-subtle: #a03d3b;
  --bs-light-text-emphasis: #c5c8ce;
  --bs-dark-text-emphasis: #c5c8ce;
}

/* Bootstrap's colour utilities in the dark theme. --bs-<hue>-rgb hold the
   fills (above), so .bg-* and .text-bg-* keep their own rules and every
   .bg-opacity-* still tints. Text, links and borders read the foreground
   triplets with Bootstrap's own opacity variables, so .text-opacity-*,
   .link-opacity-* and .border-opacity-* keep working; hover and focus are
   owned here too, since AppStack's link hover colours are light-theme shades. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-primary {
  color: rgba(var(--copient-dark-primary-rgb), var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-primary,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-primary:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-primary:focus {
  color: rgba(var(--copient-dark-primary-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-primary {
  border-color: rgba(var(--copient-dark-primary-rgb), var(--bs-border-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-success {
  color: rgba(var(--copient-dark-success-rgb), var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-success,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-success:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-success:focus {
  color: rgba(var(--copient-dark-success-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-success {
  border-color: rgba(var(--copient-dark-success-rgb), var(--bs-border-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-danger {
  color: rgba(var(--copient-dark-danger-rgb), var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-danger,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-danger:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-danger:focus {
  color: rgba(var(--copient-dark-danger-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-danger {
  border-color: rgba(var(--copient-dark-danger-rgb), var(--bs-border-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-info {
  color: rgba(var(--copient-dark-info-rgb), var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-info,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-info:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-info:focus {
  color: rgba(var(--copient-dark-info-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-info {
  border-color: rgba(var(--copient-dark-info-rgb), var(--bs-border-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-secondary {
  color: rgba(var(--copient-dark-muted-rgb), var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-secondary,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-secondary:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-secondary:focus {
  color: rgba(var(--copient-dark-muted-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-muted-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-secondary {
  border-color: rgba(var(--copient-dark-muted-rgb), var(--bs-border-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-dark {
  color: rgba(var(--copient-dark-ink-rgb), var(--bs-text-opacity)) !important;
}

/* .text-dark on an opaque fill keeps a foreground that pairs with that fill
   (the light ink above is for tints and the page): white on the dark-mode
   fills, near-black on the yellow warning fill. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) :is(.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-secondary, .bg-dark).text-dark:not([class*="bg-opacity-"]) {
  color: #fff !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .bg-warning.text-dark:not([class*="bg-opacity-"]) {
  color: #212529 !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-dark,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-dark:hover,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .link-dark:focus {
  color: rgba(var(--copient-dark-ink-rgb), var(--bs-link-opacity, 1)) !important;
  text-decoration-color: rgba(var(--copient-dark-ink-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .border-dark {
  border-color: rgba(var(--copient-dark-ink-rgb), var(--bs-border-opacity)) !important;
}

/* AppStack's dark build inverts .text-white (and .text-light) to its card
   colour; on a fill or a dark panel they mean white and light. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-white {
  color: rgba(255, 255, 255, var(--bs-text-opacity)) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-light {
  color: rgba(var(--copient-dark-ink-rgb), var(--bs-text-opacity)) !important;
}

/* .text-bg-* keep AppStack's background (fill at --bs-bg-opacity); the
   label on it is white, as in the light theme, not AppStack's #293042. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-primary,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-success,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-danger,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-info,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-secondary,
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .text-bg-dark {
  color: #fff !important;
}

/* AppStack's dark secondary buttons draw #7f838e: 3.3:1 as text on the page
   and under its own dark label. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5a6070;
  --bs-btn-border-color: #8a90a0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4b5162;
  --bs-btn-hover-border-color: #8a90a0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4b5162;
  --bs-btn-active-border-color: #8a90a0;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5a6070;
  --bs-btn-disabled-border-color: #8a90a0;
}

:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .btn-outline-secondary {
  --bs-btn-color: var(--copient-muted);
  --bs-btn-border-color: var(--copient-control-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5a6070;
  --bs-btn-hover-border-color: var(--copient-control-border);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5a6070;
  --bs-btn-active-border-color: var(--copient-control-border);
  --bs-btn-disabled-color: var(--copient-muted);
  --bs-btn-disabled-border-color: var(--copient-control-border);
}

/* The dark palette's link blue sits close to its body text in luminance
   (1.4.1 asks 3:1 between them), so a link set among text is underlined. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) :where(p, li, dd, td) > a[href]:where(:not(.btn, .nav-link, .dropdown-item, .list-group-item, .badge, .page-link, .sidebar-link, .sidebar-brand, [role="button"])):where(:not(:is(nav, .nav, .navbar, .sidebar, .dropdown-menu, .pagination, .breadcrumb, footer, .footer) a)) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* AppStack's dark build fills .btn-dark light grey, then its shared
   filled-button rule paints the label white over it in every state. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .btn-dark {
  color: #293042 !important;
}

/* On an alert's dark tint the button takes the alert's own text colour. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .alert .btn-outline-secondary {
  --bs-btn-color: var(--bs-alert-color);
  --bs-btn-border-color: var(--bs-alert-color);
}

/* Author-written HTML (case briefs, welcome text, support materials) that
   sets its own colours was written for a white page. In the dark theme it
   keeps that page, so the author's colours keep their contrast. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .authored-html:has([style*="color"], [style*="background"], font[color]) {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #212529;
  color-scheme: light;
  --bs-body-color: #212529;
  --bs-heading-color: #212529;
  --bs-emphasis-color: #000;
  --bs-secondary-color: #5c636a;
  --bs-link-color: #356cc6;
  --bs-link-color-rgb: 53, 108, 198;
  --bs-link-hover-color: #2d5ca8;
  --bs-link-hover-color-rgb: 45, 92, 168;
  /* Utilities and page CSS inside it read the light palette too. */
  --copient-text: #5c636a;
  --copient-muted: #676f77;
  --copient-primary: #356cc6;
  --copient-success: #317c4b;
  --copient-danger: #bc4845;
  --copient-info: #18769e;
  --copient-dark-primary-rgb: 53, 108, 198;
  --copient-dark-success-rgb: 49, 124, 75;
  --copient-dark-danger-rgb: 188, 72, 69;
  --copient-dark-info-rgb: 24, 118, 158;
  --copient-dark-muted-rgb: 103, 111, 119;
  --copient-dark-ink-rgb: 33, 37, 41;
}

/* Muted text inside a filled element reads in the fill's own white. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) :is(.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-secondary, .bg-dark, .text-bg-primary, .text-bg-success, .text-bg-danger, .text-bg-info, .text-bg-secondary, .text-bg-dark) :is(.text-muted, .text-secondary, .text-body-secondary) {
  color: #fff !important;
}

/* AppStack's dark build draws the close icon in white at half opacity. */
:where(html[data-bs-theme="dark"]:not([data-partner-theme])) .btn-close {
  --bs-btn-close-opacity: 0.85;
}

:where(html:not([data-partner-theme])) .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-border-color: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-hover-bg: var(--copient-primary-fill-hover, var(--copient-primary-hover));
  --bs-btn-hover-border-color: var(--copient-primary-fill-hover, var(--copient-primary-hover));
  --bs-btn-active-bg: var(--copient-primary-fill-active, var(--copient-primary-active));
  --bs-btn-active-border-color: var(--copient-primary-fill-active, var(--copient-primary-active));
  --bs-btn-disabled-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-disabled-border-color: var(--copient-primary);
}

:where(html:not([data-partner-theme])) .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--copient-success-fill, var(--copient-success));
  --bs-btn-border-color: var(--copient-success-fill, var(--copient-success));
  --bs-btn-hover-bg: var(--copient-success-fill-hover, var(--copient-success-hover));
  --bs-btn-hover-border-color: var(--copient-success-fill-hover, var(--copient-success-hover));
  --bs-btn-active-bg: var(--copient-success-fill-hover, var(--copient-success-hover));
  --bs-btn-active-border-color: var(--copient-success-fill-hover, var(--copient-success-hover));
  --bs-btn-disabled-bg: var(--copient-success-fill, var(--copient-success));
  --bs-btn-disabled-border-color: var(--copient-success);
}

:where(html:not([data-partner-theme])) .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-border-color: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-hover-bg: var(--copient-danger-fill-hover, var(--copient-danger-hover));
  --bs-btn-hover-border-color: var(--copient-danger-fill-hover, var(--copient-danger-hover));
  --bs-btn-active-bg: var(--copient-danger-fill-hover, var(--copient-danger-hover));
  --bs-btn-active-border-color: var(--copient-danger-fill-hover, var(--copient-danger-hover));
  --bs-btn-disabled-bg: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-disabled-border-color: var(--copient-danger);
}

:where(html:not([data-partner-theme])) .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--copient-info-fill, var(--copient-info));
  --bs-btn-border-color: var(--copient-info-fill, var(--copient-info));
  --bs-btn-hover-bg: var(--copient-info-fill-hover, var(--copient-info-hover));
  --bs-btn-hover-border-color: var(--copient-info-fill-hover, var(--copient-info-hover));
  --bs-btn-active-bg: var(--copient-info-fill-hover, var(--copient-info-hover));
  --bs-btn-active-border-color: var(--copient-info-fill-hover, var(--copient-info-hover));
  --bs-btn-disabled-bg: var(--copient-info-fill, var(--copient-info));
  --bs-btn-disabled-border-color: var(--copient-info);
}

:where(html:not([data-partner-theme])) .btn-outline-primary {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-color: var(--copient-primary);
  --bs-btn-border-color: var(--copient-primary);
  --bs-btn-hover-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-hover-border-color: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-active-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-active-border-color: var(--copient-primary-fill, var(--copient-primary));
  --bs-btn-disabled-color: var(--copient-primary);
  --bs-btn-disabled-border-color: var(--copient-primary);
}

:where(html:not([data-partner-theme])) .btn-outline-success {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-color: var(--copient-success);
  --bs-btn-border-color: var(--copient-success);
  --bs-btn-hover-bg: var(--copient-success-fill, var(--copient-success));
  --bs-btn-hover-border-color: var(--copient-success-fill, var(--copient-success));
  --bs-btn-active-bg: var(--copient-success-fill, var(--copient-success));
  --bs-btn-active-border-color: var(--copient-success-fill, var(--copient-success));
  --bs-btn-disabled-color: var(--copient-success);
  --bs-btn-disabled-border-color: var(--copient-success);
}

:where(html:not([data-partner-theme])) .btn-outline-danger {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-color: var(--copient-danger);
  --bs-btn-border-color: var(--copient-danger);
  --bs-btn-hover-bg: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-hover-border-color: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-active-bg: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-active-border-color: var(--copient-danger-fill, var(--copient-danger));
  --bs-btn-disabled-color: var(--copient-danger);
  --bs-btn-disabled-border-color: var(--copient-danger);
}

:where(html:not([data-partner-theme])) .btn-outline-info {
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-color: var(--copient-info);
  --bs-btn-border-color: var(--copient-info);
  --bs-btn-hover-bg: var(--copient-info-fill, var(--copient-info));
  --bs-btn-hover-border-color: var(--copient-info-fill, var(--copient-info));
  --bs-btn-active-bg: var(--copient-info-fill, var(--copient-info));
  --bs-btn-active-border-color: var(--copient-info-fill, var(--copient-info));
  --bs-btn-disabled-color: var(--copient-info);
  --bs-btn-disabled-border-color: var(--copient-info);
}

:where(html:not([data-partner-theme])) .btn-outline-warning {
  --bs-btn-color: var(--copient-warning-text);
}

/* On an alert's tinted background the plain hue falls short; take the
   alert's own darker text colour. */
:where(html:not([data-partner-theme])) .alert-primary .btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
}

:where(html:not([data-partner-theme])) .alert-success .btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
}

:where(html:not([data-partner-theme])) .alert-danger .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
}

:where(html:not([data-partner-theme])) .alert-info .btn-outline-info {
  --bs-btn-color: var(--bs-info-text-emphasis);
}

/* AppStack draws black on its light green; the darkened fill needs white. */
:where(html:not([data-partner-theme])) .text-bg-success {
  color: #fff !important;
}

/* Yellow stays a background; text on it is dark, and yellow text is amber. */
:where(html:not([data-partner-theme])) .btn-warning,
:where(html:not([data-partner-theme])) .btn-warning:hover,
:where(html:not([data-partner-theme])) .btn-warning:focus,
:where(html:not([data-partner-theme])) .btn-warning:active,
:where(html:not([data-partner-theme])) .badge.bg-warning,
:where(html:not([data-partner-theme])) .text-bg-warning {
  color: #212529 !important;
}

:where(html:not([data-partner-theme])) .text-warning {
  color: rgba(var(--copient-warning-text-rgb), var(--bs-text-opacity)) !important;
}

:where(html:not([data-partner-theme])) .table {
  --bs-table-color: var(--copient-text);
  --bs-table-striped-color: var(--copient-text);
  --bs-table-active-color: var(--copient-text);
  --bs-table-hover-color: var(--copient-text);
}

:where(html:not([data-partner-theme])) .pagination {
  --bs-pagination-color: var(--copient-text);
  --bs-pagination-active-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-border-color: var(--copient-primary-fill, var(--copient-primary));
}

:where(html:not([data-partner-theme])) .dropdown-menu {
  --bs-dropdown-header-color: var(--copient-muted);
  --bs-dropdown-link-active-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-dropdown-link-active-color: #fff;
}

:where(html:not([data-partner-theme])) .nav-pills {
  --bs-nav-pills-link-active-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-nav-pills-link-active-color: #fff;
}

:where(html:not([data-partner-theme])) .list-group {
  --bs-list-group-active-bg: var(--copient-primary-fill, var(--copient-primary));
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-border-color: var(--copient-primary-fill, var(--copient-primary));
}

:where(html:not([data-partner-theme])) .progress,
:where(html:not([data-partner-theme])) .progress-stacked {
  --bs-progress-bar-bg: var(--copient-primary-fill, var(--copient-primary));
}

:where(html:not([data-partner-theme])) .blockquote-footer,
:where(html:not([data-partner-theme])) .card-actions a,
:where(html:not([data-partner-theme])) .table-action a {
  color: var(--copient-muted);
}

/* A control's boundary is what identifies it (1.4.11): >= 3:1 on white. */
:where(html:not([data-partner-theme])) .form-control,
:where(html:not([data-partner-theme])) .form-select,
:where(html:not([data-partner-theme])) .form-check-input,
:where(html:not([data-partner-theme])) .input-group-text {
  border-color: var(--copient-control-border);
}

:where(html:not([data-partner-theme])) .form-check-input:checked,
:where(html:not([data-partner-theme])) .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--copient-primary-fill, var(--copient-primary));
  border-color: var(--copient-primary);
}

:where(html:not([data-partner-theme])) .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%238a8f94'/%3E%3C/svg%3E");
}

:where(html:not([data-partner-theme])) .sidebar-link,
:where(html:not([data-partner-theme])) a.sidebar-link,
:where(html:not([data-partner-theme])) .sidebar-link i,
:where(html:not([data-partner-theme])) .sidebar-link svg,
:where(html:not([data-partner-theme])) a.sidebar-link i,
:where(html:not([data-partner-theme])) a.sidebar-link svg {
  color: rgba(233, 236, 239, 0.55);
}

/* AppStack sets `.alert { display: flex; padding: 0 }`, which strips the
   default Bootstrap alert padding. Restore Bootstrap's variable-driven
   padding and default block layout. */
.alert {
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 0.65rem;
  display: block;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
}

.skip-to-content {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  background-color: var(--copient-dark-surface, #fff);
  color: var(--copient-focus, #0d6efd);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
}

/* AppStack sets `a { text-decoration: none }`, so a link inside running text
   differs from it only by colour, which fails WCAG 1.4.1 (#6778). Underline
   links in text blocks. Navigation, buttons, menus and link lists are
   recognisable by their place, so they keep their look. The :where() keeps
   the rule's specificity at that of `a[href]`, so any component that styles
   its own links still wins. */
:where(p, li, dd, blockquote, figcaption, label, .form-text, .alert, .card-text, .invalid-feedback)
  a[href]:where(:not(.btn, .nav-link, .dropdown-item, .list-group-item, .badge, .page-link, .sidebar-link, [role="button"])):where(:not(:is(nav, .nav, .navbar, .sidebar, .dropdown-menu, .pagination, .breadcrumb, .list-group, .list-unstyled, footer, .footer) a)) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a[href]:focus-visible,
button:focus-visible,
input:not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--copient-focus, #0d6efd);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
  outline: 3px solid var(--copient-focus, #0d6efd);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.form-control.is-valid:focus-visible,
.form-select.is-valid:focus-visible,
.form-check-input.is-valid:focus-visible,
.form-control.is-invalid:focus-visible,
.form-select.is-invalid:focus-visible,
.form-check-input.is-invalid:focus-visible,
.was-validated .form-control:valid:focus-visible,
.was-validated .form-select:valid:focus-visible,
.was-validated .form-check-input:valid:focus-visible,
.was-validated .form-control:invalid:focus-visible,
.was-validated .form-select:invalid:focus-visible,
.was-validated .form-check-input:invalid:focus-visible {
  box-shadow: none;
}

.sidebar .sidebar-link:focus-visible {
  outline-color: var(--copient-focus-on-dark, #9ec5fe);
  outline-offset: -6px;
}

.sidebar .sidebar-brand:focus-visible {
  outline-color: var(--copient-focus-on-dark, #9ec5fe);
  outline-offset: -6px;
}

/* #content is the skip link's target: focused by script (tabindex="-1"),
   never a control, so it draws no ring. */
#content:focus {
  outline: none;
}

/* WCAG 2.5.8: buttons, pagination links and close buttons are at least
   24 x 24 CSS px. Text-style buttons set inside a sentence (.align-baseline,
   #6777) are exempt, as inline links are. :where() keeps this at zero
   specificity, so any component that sizes its own buttons still wins. */
:where(.btn:not(.align-baseline), .page-link) {
  min-width: 24px;
  min-height: 24px;
}

/* Bootstrap's close button is a 1em icon with 0.25em padding: 21px on the
   14px phone root. Pad it out to 24px without changing the icon. */
.btn-close {
  padding: max(0.25em, calc(12px - 0.5em));
}

/* AppStack turns on smooth scrolling for everyone; honour reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Real <button>s that replaced pointer-only controls (#6777) keep the look of
   the element they replaced: the sidebar hamburger, sortable column headers,
   collapsible card headers and drag handles. */
.sidebar-toggle,
.sort-header-button,
.collapse-header-button,
.drag-handle-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
}

.sort-header-button {
  cursor: pointer;
}

.collapse-header-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: start;
  cursor: pointer;
}

.collapse-header-button[aria-expanded="true"] .collapse-header-chevron {
  transform: rotate(180deg);
}

.drag-handle-button {
  padding: 0 0.25rem;
  cursor: grab;
}

/* Text-style action buttons (copy links and the like, #6777) read at the size
   of the text around them, as the links they replaced did. */
.btn.btn-link.p-0.align-baseline {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

/* Higher contrast (#6782, Section 508 503.2): the OS "increase contrast"
   setting. Muted text moves to body strength, control and card boundaries
   darken (lighten, in the dark theme), translucent text turns solid and the
   focus ring thickens. Partner embeds keep the partner's colours. */
@media (prefers-contrast: more) {
  html:not([data-bs-theme="dark"]):not([data-partner-theme]) {
    --copient-text: #212529;
    --copient-muted: #3d434a;
    --copient-control-border: #5c636a;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-border-color: #8a8f94;
  }

  html[data-bs-theme="dark"]:not([data-partner-theme]) {
    --copient-text: #eceef1;
    --copient-muted: #e3e5e8;
    --copient-control-border: #b4b8c0;
    --copient-dark-ink-muted: #e3e5e8;
    --copient-dark-muted-rgb: 227, 229, 232;
    --bs-body-color-rgb: 236, 238, 241;
    --bs-border-color: #8a90a0;
  }

  :where(html:not([data-partner-theme])) .card,
  :where(html:not([data-partner-theme])) .toast,
  :where(html:not([data-partner-theme])) .dropdown-menu,
  :where(html:not([data-partner-theme])) .modal-content {
    border: 1px solid var(--copient-control-border);
  }

  :where(html:not([data-partner-theme])) .sidebar-link,
  :where(html:not([data-partner-theme])) a.sidebar-link,
  :where(html:not([data-partner-theme])) .sidebar-link i,
  :where(html:not([data-partner-theme])) .sidebar-link svg {
    color: #e9ecef;
  }

  :where(html:not([data-partner-theme])) ::placeholder {
    color: var(--copient-muted);
    opacity: 1;
  }

  :where(html:not([data-partner-theme])) .opacity-25,
  :where(html:not([data-partner-theme])) .opacity-50,
  :where(html:not([data-partner-theme])) .opacity-75 {
    opacity: 1 !important;
  }

  :where(html:not([data-partner-theme])) :focus-visible {
    outline-width: 4px;
    outline-style: solid;
  }

  :where(html:not([data-partner-theme])) :where(p, li, dd, td, .card-text) a[href]:not(.btn) {
    text-decoration: underline;
  }
}

/* Forced colours (Windows High Contrast and similar): the browser replaces
   the palette with the user's system colours, so nothing here sets a hue.
   It keeps what a background or shadow alone would have shown: control and
   panel boundaries, the selected state, focus, and icons drawn in a fixed
   stroke colour. */
@media (forced-colors: active) {
  .btn,
  .card,
  .toast,
  .alert,
  .badge,
  .dropdown-menu,
  .modal-content,
  .chat-message,
  .page-link,
  .nav-link,
  .list-group-item {
    border: 1px solid CanvasText;
  }

  .btn {
    border-color: ButtonText;
  }

  .btn.active,
  .dropdown-item.active,
  .filter-btn.active,
  .page-item.active .page-link,
  .nav-link.active,
  .list-group-item.active,
  [aria-current="page"],
  [aria-pressed="true"],
  [aria-selected="true"] {
    forced-color-adjust: none;
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }

  a[href]:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  svg.feather,
  .feather,
  .score-band__icon {
    stroke: currentColor;
  }

  /* The checkbox and switch knobs are background images in Bootstrap's own
     colours; the native control follows the system colours. */
  .form-check-input {
    appearance: auto;
  }

  .btn-close {
    background-image: none;
    color: ButtonText;
  }

  .btn-close::before {
    content: "\00d7";
    display: block;
    font-size: 1.5em;
    line-height: 0.5;
  }

  .skip-to-content {
    border: 2px solid CanvasText;
  }

  /* The sidebar's logo and icons are light images drawn for its dark panel,
     which the system canvas replaces; they keep a panel of their own. */
  .sidebar-brand,
  .sidebar-link img {
    forced-color-adjust: none;
    background-color: #293042;
  }

  .sidebar-link img {
    border-radius: 0.25rem;
  }
}

/* Score-band filter buttons name the band with the score card's icon
   (progress/partials/_band_label.html, WCAG 1.4.1, #6979). */
.filter-btn .score-band-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  vertical-align: -0.125em;
}