/* ============================================================================
   WhirlWindView shared shell + Ww* component foundation.
   Consumes ONLY the governed variables in ww-tokens.css (no literal colour, size or font here
   except 0/1px/transparent). Scope contract: every selector is a `.ww-*` class (plus `.ww-main.eh`
   for the legacy employee-home content wrapper), so /board, /cards, /preview and the WWI demo are
   untouched. Bootstrap 5.3 markup semantics without Bootstrap's global reboot — see track 03 §7
   for why option B (compatible components on the current foundation) was chosen.
   ========================================================================= */

/* ---- shell frame ----------------------------------------------------------- */
.ww-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
}
.ww-shell *, .ww-shell *::before, .ww-shell *::after { box-sizing: border-box; }
.ww-shell :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 0; box-shadow: var(--ww-focus-ring); border-radius: var(--bs-border-radius-sm); }
.ww-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ww-skip { position: absolute; left: var(--ww-space-2); top: -100px; z-index: 100; padding: var(--ww-space-2) var(--ww-space-3); background: var(--bs-primary); color: var(--ww-on-primary); border-radius: var(--bs-border-radius); font-weight: 700; }
.ww-skip:focus { top: var(--ww-space-2); }

/* ---- navbar (always dark, PDF) -------------------------------------------- */
.ww-navbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--ww-space-4);
  min-height: 64px;
  padding: var(--ww-space-2) var(--ww-container-pad);
  background: var(--ww-nav-bg);
  color: var(--ww-nav-color);
  border-bottom: 1px solid var(--ww-nav-border);
  color-scheme: dark;
}
.ww-navbar__spacer { flex: 1 1 auto; }
.ww-navbar__tag { font-size: var(--ww-font-size-small); color: var(--ww-nav-muted); white-space: nowrap; }
.ww-navbar__menu {
  display: none; align-items: center; gap: var(--ww-space-2);
  padding: var(--ww-space-2) var(--ww-space-3);
  background: transparent; color: var(--ww-nav-color);
  border: 1px solid var(--ww-nav-border); border-radius: var(--bs-border-radius);
  font: inherit; font-size: var(--ww-font-size-small); font-weight: 700; cursor: pointer;
}
.ww-navbar__menu:hover { background: var(--ww-nav-bg-2); }

/* ---- brand lockup ---------------------------------------------------------- */
.ww-lockup { display: inline-flex; align-items: center; gap: var(--ww-space-3); text-decoration: none; color: inherit; min-width: 0; }
.ww-lockup__plate {
  display: inline-block; background: var(--ww-white); border-radius: var(--bs-border-radius-sm);
  padding: var(--ww-space-2) var(--ww-space-3);   /* clear space ≥ ½ artwork height on every side */
}
.ww-lockup__logo { --ww-logo-scale: 0.5; display: block; width: calc(376px * var(--ww-logo-scale)); height: calc(62px * var(--ww-logo-scale)); overflow: hidden; }
.ww-lockup__logo img { display: block; width: calc(500px * var(--ww-logo-scale)); height: calc(500px * var(--ww-logo-scale)); margin: calc(-219px * var(--ww-logo-scale)) 0 0 calc(-62px * var(--ww-logo-scale)); max-width: none; }
.ww-lockup__product { font-weight: 700; font-size: var(--ww-h5); line-height: 1; letter-spacing: 0.02em; color: var(--ww-nav-color); }

/* ---- theme toggle ------------------------------------------------------------ */
.ww-theme-toggle {
  display: inline-flex; align-items: center; gap: var(--ww-space-2);
  padding: var(--ww-space-2) var(--ww-space-3);
  background: transparent; color: var(--ww-nav-color);
  border: 1px solid var(--ww-nav-border); border-radius: var(--bs-border-radius);
  font: inherit; font-size: var(--ww-font-size-small); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ww-theme-toggle:hover { background: var(--ww-nav-bg-2); }

/* ---- frame: persistent side navigation + main ------------------------------- */
.ww-frame { flex: 1 1 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.ww-sidenav {
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow: auto;
  padding: var(--ww-space-4) var(--ww-space-3);
  background: var(--ww-nav-bg); color: var(--ww-nav-color);
  border-right: 1px solid var(--ww-nav-border);
  color-scheme: dark;
}
.ww-sidenav__label { margin: var(--ww-space-4) var(--ww-space-3) var(--ww-space-1); font-size: var(--ww-font-size-small); font-weight: 700; color: var(--ww-nav-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ww-sidenav__link {
  display: flex; align-items: center; gap: var(--ww-space-3);
  padding: var(--ww-space-2) var(--ww-space-3);
  margin: 2px 0;
  border-radius: var(--bs-border-radius);
  border-left: 4px solid transparent;
  color: var(--ww-nav-color); text-decoration: none; font-weight: 400;
}
.ww-sidenav__link:hover { background: var(--ww-nav-bg-2); color: var(--ww-nav-link-hover); }
.ww-sidenav__link--current { background: var(--ww-nav-active-bg); color: var(--ww-nav-active-fg); border-left-color: var(--bs-primary); font-weight: 700; }
.ww-sidenav__text { flex: 1 1 auto; min-width: 0; }
.ww-main { min-width: 0; padding: var(--ww-container-pad); }
.ww-main:focus { outline: 0; }
/* Legacy employee-home content keeps its `.eh-*` variables but inherits the governed type + ground. */
.ww-main.eh { font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); color: var(--bs-body-color); background: transparent; min-height: 0; }

/* ---- offcanvas (always dark, PDF) ------------------------------------------- */
.ww-offcanvas-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--ww-overlay); }
.ww-offcanvas {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
  width: min(var(--ww-offcanvas-width), calc(100% - var(--ww-offcanvas-gap)));
  display: flex; flex-direction: column;
  background: var(--ww-nav-bg); color: var(--ww-nav-color);
  border-right: 1px solid var(--ww-nav-border);
  box-shadow: var(--bs-box-shadow-lg);
  transform: translateX(-100%); transition: transform .2s ease-out;
  color-scheme: dark;
}
.ww-offcanvas--open { transform: none; }
.ww-offcanvas[hidden] { display: none; }
.ww-offcanvas__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ww-space-3); padding: var(--ww-space-4); border-bottom: 1px solid var(--ww-nav-border); }
.ww-offcanvas__title { font-weight: 700; font-size: var(--ww-h5); line-height: var(--bs-body-line-height); }
.ww-offcanvas__close { display: inline-flex; padding: var(--ww-space-2); background: transparent; color: var(--ww-nav-color); border: 1px solid transparent; border-radius: var(--bs-border-radius); cursor: pointer; }
.ww-offcanvas__close:hover { background: var(--ww-nav-bg-2); }
.ww-offcanvas__body { overflow: auto; padding: var(--ww-space-3); }
html.ww-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ww-offcanvas { transition: none; } }

/* Below the desktop tier (Bootstrap lg = 992px) the persistent nav becomes the drawer. */
@media (max-width: 991.98px) {
  .ww-frame { grid-template-columns: minmax(0, 1fr); }
  .ww-sidenav { display: none; }
  .ww-navbar__menu { display: inline-flex; }
}
@media (max-width: 575.98px) {
  .ww-navbar { gap: var(--ww-space-2); }
  .ww-navbar__tag { display: none; }                 /* the internal-home context moves into the drawer title on phones */
  .ww-navbar__menu-label, .ww-theme-toggle__label { display: none; }
  .ww-lockup__logo { --ww-logo-scale: 0.4; }
  .ww-lockup__product { font-size: var(--ww-h6); }
}

/* ---- icons (PDF: Icons — wrapper with fixed size, currentColor) ------------------ */
.ww-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--ww-icon-size); height: var(--ww-icon-size); vertical-align: middle; }
.ww-icon svg { width: 100%; height: 100%; fill: currentColor; }
.ww-icon--16 { --ww-icon-size: 16px; }
.ww-icon--20 { --ww-icon-size: 20px; }
.ww-icon--24 { --ww-icon-size: 24px; }
.ww-icon--32 { --ww-icon-size: 32px; }

/* ---- typography utilities (PDF: Typography; RFS scaling on smaller screens) ------ */
.ww-h1, .ww-h2, .ww-h3, .ww-h4, .ww-h5, .ww-h6 { font-family: var(--bs-body-font-family); font-weight: var(--ww-heading-weight); line-height: var(--ww-line-height-heading); margin: 0 0 var(--ww-space-2); color: var(--bs-body-color); }
.ww-h1 { font-size: var(--ww-h1); } .ww-h2 { font-size: var(--ww-h2); } .ww-h3 { font-size: var(--ww-h3); }
.ww-h4 { font-size: var(--ww-h4); } .ww-h5 { font-size: var(--ww-h5); } .ww-h6 { font-size: var(--ww-h6); }
@media (max-width: 1199.98px) {
  .ww-h1 { font-size: calc(22px + 1.5vw); }     /* Bootstrap RFS at a 16px root: 1.375rem + 1.5vw */
  .ww-h2 { font-size: calc(21.2px + 0.9vw); }
  .ww-h3 { font-size: calc(20.8px + 0.6vw); }
  .ww-h4 { font-size: calc(20.4px + 0.3vw); }
}
.ww-small { font-size: var(--ww-font-size-small); line-height: var(--bs-body-line-height); }
.ww-muted { color: var(--bs-secondary-color); }
.ww-code, .ww-mono { font-family: var(--bs-font-monospace); font-size: var(--ww-font-size-code); line-height: var(--bs-body-line-height); }
.ww-link { color: var(--bs-link-color); text-decoration: underline; }
.ww-link:hover { color: var(--bs-link-hover-color); }

/* ---- buttons (PDF: Buttons) ----------------------------------------------------- */
.ww-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ww-space-2);
  padding: var(--ww-space-2) var(--ww-space-3);           /* 8 / 12 (PDF spacing example) */
  min-height: 40px;
  font-family: inherit; font-size: var(--bs-body-font-size); font-weight: 700; line-height: 1.5;
  border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s, border-color .12s;
}
.ww-btn--sm { padding: var(--ww-space-1) var(--ww-space-2); min-height: 32px; font-size: var(--ww-font-size-small); }
.ww-btn:disabled { opacity: .65; cursor: not-allowed; }
/* Solid */
.ww-btn--primary   { background: var(--bs-primary);   color: var(--ww-on-primary); border-color: var(--bs-primary); }      /* dark text on Primary — contrast rule */
.ww-btn--secondary { background: var(--bs-secondary); color: var(--ww-white); border-color: var(--bs-secondary); }
.ww-btn--success   { background: var(--bs-success);   color: var(--ww-white); border-color: var(--bs-success); }
.ww-btn--danger    { background: var(--bs-danger);    color: var(--ww-white); border-color: var(--bs-danger); }
.ww-btn--warning   { background: var(--bs-warning);   color: var(--ww-on-primary); border-color: var(--bs-warning); }
.ww-btn--info      { background: var(--bs-info);      color: var(--ww-white); border-color: var(--bs-info); }
.ww-btn--urgent    { background: var(--ww-urgent);    color: var(--ww-white); border-color: var(--ww-urgent); }
.ww-btn--attention { background: var(--ww-attention); color: var(--ww-on-primary); border-color: var(--ww-attention); }
.ww-btn--completion{ background: var(--ww-completion);color: var(--ww-on-primary); border-color: var(--ww-completion); }
.ww-btn--misc      { background: var(--ww-misc);      color: var(--ww-white); border-color: var(--ww-misc); }
.ww-btn--identity  { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ww-btn:not(:disabled):hover { filter: brightness(0.92); }
/* Outline = secondary CTA */
.ww-btn--outline { background: transparent; }
.ww-btn--outline.ww-btn--primary   { color: var(--bs-primary-text-emphasis);   border-color: var(--bs-primary); }
.ww-btn--outline.ww-btn--secondary { color: var(--bs-body-color);              border-color: var(--bs-border-color); }
.ww-btn--outline.ww-btn--success   { color: var(--bs-success-text-emphasis);   border-color: var(--bs-success); }
.ww-btn--outline.ww-btn--danger    { color: var(--bs-danger-text-emphasis);    border-color: var(--bs-danger); }
.ww-btn--outline.ww-btn--warning   { color: var(--bs-warning-text-emphasis);   border-color: var(--bs-warning); }
.ww-btn--outline.ww-btn--info      { color: var(--bs-info-text-emphasis);      border-color: var(--bs-info); }
.ww-btn--outline.ww-btn--urgent    { color: var(--ww-urgent);    border-color: var(--ww-urgent); }
.ww-btn--outline.ww-btn--attention { color: var(--bs-body-color); border-color: var(--ww-attention); }
.ww-btn--outline.ww-btn--completion{ color: var(--bs-body-color); border-color: var(--ww-completion); }
.ww-btn--outline.ww-btn--misc      { color: var(--ww-misc);      border-color: var(--ww-misc); }
.ww-btn--outline.ww-btn--identity  { color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ww-btn--outline:not(:disabled):hover { filter: none; background: var(--bs-tertiary-bg); }
/* Selected state for chip-like toggles (filters, verdicts): solid Primary + dark text + aria-checked */
.ww-btn[aria-checked="true"], .ww-btn[aria-pressed="true"] { background: var(--bs-primary); color: var(--ww-on-primary); border-color: var(--bs-primary); }

/* ---- badges (PDF: Badge — 0.75× heading size, 100% line height) ------------------ */
.ww-badge {
  display: inline-flex; align-items: center; gap: var(--ww-space-1);
  padding: 0.35em 0.6em;
  font-family: inherit; font-size: var(--ww-badge-font-size); font-weight: 700; line-height: var(--ww-badge-line-height);
  border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius-pill);
  white-space: nowrap; vertical-align: middle;
}
.ww-badge--h5 { font-size: var(--ww-badge-font-size-lg); }
/* Solid (Default) — contrast-safe text per role */
.ww-badge--primary   { background: var(--bs-primary);   color: var(--ww-on-primary); }
.ww-badge--secondary { background: var(--bs-secondary); color: var(--ww-white); }
.ww-badge--success   { background: var(--bs-success);   color: var(--ww-white); }
.ww-badge--danger    { background: var(--bs-danger);    color: var(--ww-white); }
.ww-badge--warning   { background: var(--bs-warning);   color: var(--ww-on-primary); }
.ww-badge--info      { background: var(--bs-info);      color: var(--ww-white); }
.ww-badge--urgent    { background: var(--ww-urgent);    color: var(--ww-white); }
.ww-badge--attention { background: var(--ww-attention); color: var(--ww-on-primary); }
.ww-badge--completion{ background: var(--ww-completion);color: var(--ww-on-primary); }
.ww-badge--misc      { background: var(--ww-misc);      color: var(--ww-white); }
/* Outline ("Contrast" variant) — Text/Emphasis on Background/Subtle with Border/Subtle; extended roles: Text/Default on the Light tint */
.ww-badge--outline.ww-badge--primary   { background: var(--bs-primary-bg-subtle);   color: var(--bs-primary-text-emphasis);   border-color: var(--bs-primary-border-subtle); }
.ww-badge--outline.ww-badge--secondary { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border-color: var(--bs-secondary-border-subtle); }
.ww-badge--outline.ww-badge--success   { background: var(--bs-success-bg-subtle);   color: var(--bs-success-text-emphasis);   border-color: var(--bs-success-border-subtle); }
.ww-badge--outline.ww-badge--danger    { background: var(--bs-danger-bg-subtle);    color: var(--bs-danger-text-emphasis);    border-color: var(--bs-danger-border-subtle); }
.ww-badge--outline.ww-badge--warning   { background: var(--bs-warning-bg-subtle);   color: var(--bs-warning-text-emphasis);   border-color: var(--bs-warning-border-subtle); }
.ww-badge--outline.ww-badge--info      { background: var(--bs-info-bg-subtle);      color: var(--bs-info-text-emphasis);      border-color: var(--bs-info-border-subtle); }
.ww-badge--outline.ww-badge--urgent    { background: var(--ww-urgent-light);    color: var(--bs-body-color); border-color: var(--ww-urgent); }
.ww-badge--outline.ww-badge--attention { background: var(--ww-attention-light); color: var(--bs-body-color); border-color: var(--ww-attention); }
.ww-badge--outline.ww-badge--completion{ background: var(--ww-completion-light);color: var(--bs-body-color); border-color: var(--ww-completion); }
.ww-badge--outline.ww-badge--misc      { background: var(--ww-misc-light);      color: var(--bs-body-color); border-color: var(--ww-misc); }
/* Identity: neutral outlined, label only — categories are not health */
.ww-badge--identity { background: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* ---- alerts (PDF: Alerts) ------------------------------------------------------- */
.ww-alert {
  display: flex; gap: var(--ww-space-3); align-items: flex-start;
  padding: var(--ww-space-4);
  margin: 0 0 var(--ww-space-4);
  border: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius);
  font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height);
}
.ww-alert__body { flex: 1 1 auto; min-width: 0; color: var(--ww-tint-text, currentcolor); }   /* dark: near-white body copy; title + icon keep the role colour */
.ww-alert__body > :last-child { margin-bottom: 0; }
.ww-alert__title { font-weight: 700; margin-bottom: var(--ww-space-1); }
.ww-alert .ww-icon { margin-top: 2px; }
.ww-alert--primary   { background: var(--bs-primary-bg-subtle);   color: var(--bs-primary-text-emphasis);   border-color: var(--bs-primary-border-subtle); }
.ww-alert--secondary { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border-color: var(--bs-secondary-border-subtle); }
.ww-alert--success   { background: var(--bs-success-bg-subtle);   color: var(--bs-success-text-emphasis);   border-color: var(--bs-success-border-subtle); }
.ww-alert--warning   { background: var(--bs-warning-bg-subtle);   color: var(--bs-warning-text-emphasis);   border-color: var(--bs-warning-border-subtle); }
.ww-alert--danger    { background: var(--bs-danger-bg-subtle);    color: var(--bs-danger-text-emphasis);    border-color: var(--bs-danger-border-subtle); }
.ww-alert--info      { background: var(--bs-info-bg-subtle);      color: var(--bs-info-text-emphasis);      border-color: var(--bs-info-border-subtle); }
.ww-alert--urgent    { background: var(--ww-urgent-light);    color: var(--bs-body-color); border-color: var(--ww-urgent); }
.ww-alert--attention { background: var(--ww-attention-light); color: var(--bs-body-color); border-color: var(--ww-attention); }
.ww-alert--completion{ background: var(--ww-completion-light);color: var(--bs-body-color); border-color: var(--ww-completion); }
.ww-alert--misc      { background: var(--ww-misc-light);      color: var(--bs-body-color); border-color: var(--ww-misc); }
.ww-alert--identity  { background: var(--bs-tertiary-bg);     color: var(--bs-body-color); border-color: var(--bs-border-color); }
.ww-alert a { color: inherit; font-weight: 700; }

/* ---- cards (PDF: Card) ------------------------------------------------------------ */
.ww-card { background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); min-width: 0; }
.ww-card__header { padding: var(--ww-space-3) var(--ww-space-4); border-bottom: var(--bs-border-width) solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; font-weight: 700; }
.ww-card__body { padding: var(--ww-space-4); }
.ww-card__footer { padding: var(--ww-space-3) var(--ww-space-4); border-top: var(--bs-border-width) solid var(--bs-border-color); background: var(--bs-tertiary-bg); border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg); }

/* ---- document bar (page title strip used by the WorkCards routes) ------------------- */
.ww-docbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ww-space-3); padding: var(--ww-space-3) var(--ww-space-4); background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; }
.ww-docbar__title { font-weight: 700; font-size: var(--ww-h5); line-height: var(--ww-line-height-heading); color: var(--bs-body-color); }
.ww-docbar__end { margin-left: auto; display: flex; gap: var(--ww-space-2); align-items: center; flex-wrap: wrap; }

/* ---- form controls used by the review routes -------------------------------------- */
.ww-select, .ww-textarea {
  font: inherit; font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height);
  color: var(--bs-body-color); background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  padding: var(--ww-space-2) var(--ww-space-3);
}
.ww-textarea { width: 100%; display: block; field-sizing: content; min-height: 4.5em; }
.ww-label { display: block; font-size: var(--ww-font-size-small); font-weight: 700; margin-bottom: var(--ww-space-1); color: var(--bs-body-color); }
.ww-table { width: 100%; border-collapse: collapse; font-size: var(--ww-font-size-small); table-layout: fixed; }
.ww-table th { text-align: left; font-weight: 700; color: var(--bs-secondary-color); padding: var(--ww-space-2) var(--ww-space-2) var(--ww-space-2) 0; vertical-align: top; width: 34%; overflow-wrap: anywhere; }
.ww-table td { padding: var(--ww-space-2) 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); vertical-align: top; overflow-wrap: anywhere; }
.ww-table-wrap { overflow-x: auto; }

/* Long, sentence-length badges (the review-only banner) wrap instead of overflowing the viewport. */
.ww-badge--wrap { white-space: normal; text-align: left; line-height: 1.25; }
@media (max-width: 575.98px) { .ww-docbar__end { margin-left: 0; flex-basis: 100%; } }
.ww-offcanvas__context { margin-top: 0; }

/* Alert titles keep their role colour in both modes (the body copy goes near-white in dark, D14). */
.ww-alert--primary .ww-alert__title   { color: var(--bs-primary-text-emphasis); }
.ww-alert--secondary .ww-alert__title { color: var(--bs-secondary-text-emphasis); }
.ww-alert--success .ww-alert__title   { color: var(--bs-success-text-emphasis); }
.ww-alert--warning .ww-alert__title   { color: var(--bs-warning-text-emphasis); }
.ww-alert--danger .ww-alert__title    { color: var(--bs-danger-text-emphasis); }
.ww-alert--info .ww-alert__title      { color: var(--bs-info-text-emphasis); }
.ww-alert--urgent .ww-alert__title, .ww-alert--attention .ww-alert__title, .ww-alert--completion .ww-alert__title, .ww-alert--misc .ww-alert__title, .ww-alert--identity .ww-alert__title { color: var(--bs-body-color); }