/*
 * Page-specific accessibility overrides for /demo/qms-os-tour and
 * /methodology. Two purposes:
 *
 *   1. Light-mode rescue for content sitting on always-dark Bootstrap
 *      utility surfaces (.bg-dark, .bg-black, the demo stage). Bootstrap
 *      5.3's .text-muted / .text-secondary follow data-bs-theme, which
 *      means in light mode those tokens become dark gray — unreadable
 *      on a dark card background. We force a light-on-dark palette
 *      inside these two pages without touching global theme tokens.
 *
 *   2. Forced-colors (Windows / macOS high-contrast) overrides using
 *      the standardized system color keywords (Canvas, CanvasText,
 *      LinkText, ButtonFace, ButtonText, Highlight, HighlightText).
 *      Per WCAG SC 1.4.3 and the W3C CSS Color Module 4 forced-colors
 *      guidance, we let the OS theme drive everything and only ensure
 *      borders + role hints are present.
 *
 * Hard rule: every selector in this file is scoped to either
 * .demo-tour-container or .methodology-container — never global.
 */

/* ----------------------------------------------------------------- *
 * 1. Light-mode rescue for always-dark Bootstrap utility surfaces.
 * ----------------------------------------------------------------- */

[data-bs-theme="light"] .methodology-container .card.bg-dark,
[data-bs-theme="light"] .methodology-container .card.bg-black,
[data-bs-theme="light"] .methodology-container .bg-dark,
[data-bs-theme="light"] .methodology-container .bg-black {
  /* Body text inside a forced-dark card — needs to be near-white,
   * not the light theme's dark gray. */
  color: #f1f3f5;
}

[data-bs-theme="light"] .methodology-container .card.bg-dark .text-muted,
[data-bs-theme="light"] .methodology-container .card.bg-black .text-muted,
[data-bs-theme="light"] .methodology-container .bg-dark .text-muted,
[data-bs-theme="light"] .methodology-container .bg-black .text-muted,
[data-bs-theme="light"] .methodology-container .card.bg-dark .text-secondary,
[data-bs-theme="light"] .methodology-container .card.bg-black .text-secondary,
[data-bs-theme="light"] .methodology-container .bg-dark .text-secondary,
[data-bs-theme="light"] .methodology-container .bg-black .text-secondary {
  /* rgba(248,249,250,0.85) on #212529 ≈ 11.6:1 (passes AA + AAA). */
  color: rgba(248, 249, 250, 0.85) !important;
}

[data-bs-theme="light"] .methodology-container .card.bg-dark .text-light,
[data-bs-theme="light"] .methodology-container .bg-dark .text-light,
[data-bs-theme="light"] .methodology-container .card.bg-black .text-light,
[data-bs-theme="light"] .methodology-container .bg-black .text-light {
  color: #f8f9fa !important;
}

/* Code spans inside dark cards need a darker chip background and a
 * light foreground in light mode (Bootstrap inverts these poorly). */
[data-bs-theme="light"] .methodology-container .card.bg-dark code,
[data-bs-theme="light"] .methodology-container .card.bg-black code,
[data-bs-theme="light"] .methodology-container .bg-dark code,
[data-bs-theme="light"] .methodology-container .bg-black code {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffd6a5;
  padding: 0.05rem 0.35rem;
  border-radius: 0.2rem;
}

/* The dark-themed table inside the methodology cards inherits weird
 * colors from the light theme. Re-anchor it. */
[data-bs-theme="light"] .methodology-container .card.bg-dark .table-dark th,
[data-bs-theme="light"] .methodology-container .card.bg-dark .table-dark td {
  color: #f8f9fa;
  border-color: rgba(255, 255, 255, 0.18);
}

/* ----------------------------------------------------------------- *
 * 2. Forced-colors mode (Windows High Contrast / macOS Increase
 *    Contrast). Use system color keywords so the OS theme always wins.
 * ----------------------------------------------------------------- */

@media (forced-colors: active) {
  .demo-tour-container,
  .methodology-container {
    border: 1px solid CanvasText;
  }

  .demo-tour-container .demo-stage,
  .demo-tour-container .demo-card,
  .methodology-container .card,
  .methodology-container .alert {
    background: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
    forced-color-adjust: none;
  }

  .demo-tour-container p,
  .demo-tour-container li,
  .demo-tour-container small,
  .demo-tour-container code,
  .demo-tour-container .text-muted,
  .demo-tour-container .text-secondary,
  .methodology-container p,
  .methodology-container li,
  .methodology-container dt,
  .methodology-container dd,
  .methodology-container small,
  .methodology-container .text-muted,
  .methodology-container .text-secondary,
  .methodology-container .text-light {
    color: CanvasText !important;
    background: Canvas !important;
  }

  .demo-tour-container .demo-step-pill,
  .demo-tour-container .badge,
  .methodology-container .badge {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .demo-tour-container .demo-step-pill.active,
  .demo-tour-container .demo-step-pill.done {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }

  .demo-tour-container .btn,
  .methodology-container .btn {
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  .demo-tour-container a,
  .methodology-container a {
    color: LinkText;
    background: Canvas;
  }

  .demo-tour-container a:focus-visible,
  .methodology-container a:focus-visible,
  .demo-tour-container button:focus-visible,
  .methodology-container button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  /* The sparkline + progress bar are decorative and disappear in
   * forced-colors mode; replace with a bordered placeholder so layout
   * does not collapse. */
  .demo-tour-container .demo-progress,
  .demo-tour-container .demo-spark {
    background: Canvas;
    border: 1px solid CanvasText;
  }

  .demo-tour-container .demo-progress > .bar,
  .demo-tour-container .demo-spark > span {
    background: Highlight;
  }
}