@import "/css/core/_variables.css";
@import "/css/core/layout.css";
@import "/css/core/components.css";
@import "/css/modules/login.css";
@import "/css/modules/number-intelligence.css";
@import "/css/modules/msoc.css";
@import "/css/modules/flatpickr-theme.css";
@import "/css/modules/notifications.css";


/* =====================================================
   GUIDE MODAL LAYOUT FIX
===================================================== */

/* Make modal taller and scroll cleanly */
#knowledgeGuideModal .modal-dialog {
  max-width: 1100px;
}

#knowledgeGuideModal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

/* =====================================================
   MEDIA SECTION
===================================================== */

#guideMediaSection {
  margin-bottom: 20px;
}

/* Prevent media from overflowing modal */
#guideMediaSection img,
#guideMediaSection video {
  max-height: 450px;
  object-fit: contain;
}

/* =====================================================
   IMAGE STYLING
===================================================== */

.guide-image {
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.guide-image.expanded {
  transform: scale(1.4);
  cursor: zoom-out;
}

/* =====================================================
   VIDEO STYLING
===================================================== */

.guide-video {
  border-radius: 8px;
}

/* =====================================================
   PAGINATION FIX
===================================================== */

#imagePaginationContainer .pagination {
  margin-bottom: 0;
}

#imagePaginationContainer .page-item.active .page-link {
  background-color: var(--cbts-dark-blue);
  border-color: var(--cbts-dark-blue);
}

/* =====================================================
   TABS CLEANUP
===================================================== */

#guideMediaTabs {
  border-bottom: 1px solid var(--cbts-gray);
}

#guideMediaTabs .nav-link {
  font-weight: 500;
}

#guideMediaTabs .nav-link.active {
  border-color: var(--cbts-gray) var(--cbts-gray) var(--cbts-white);
  background-color: var(--cbts-white);
}

/* =====================================================
   MARKDOWN CONTENT BELOW MEDIA
===================================================== */

#guideModalContent {
  margin-top: 15px;
}

/* When sections are present, the container provides its own spacing */
#guideModalContent:has(.kc-md-sections) {
  margin-top: 0;
}

/* Make markdown images inside content behave */
#guideModalContent img {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   PAGE NAV MODAL — collapsible sections
===================================================== */

.kc-nav-section {
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--rp-dark-teal-tint-12);
}

.kc-nav-section-btn {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background-color: var(--cbts-dark-teal);
  color: var(--cbts-bright-teal);
  font-weight: 600;
  font-size: 0.85rem;
  border: none;
  border-left: 3px solid transparent;
  padding: 0.45rem calc(1rem - 3px);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.kc-nav-section-btn::after {
  content: '';
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: auto;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300FFD2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 200ms ease;
}

.kc-nav-section-btn.collapsed::after {
  transform: rotate(-90deg);
}

.kc-nav-section-btn:hover {
  background-color: var(--rp-dark-teal-hover);
  border-left-color: var(--rp-bright-teal-tint-50);
}

.kc-nav-section-btn:not(.collapsed) {
  border-left-color: var(--rp-accent);
}

/* Help drawer — section nav inherits standard teal/dark-blue palette */
#helpDrawer .kc-nav-section-btn {
  background-color: var(--cbts-dark-teal) !important;
  color: var(--cbts-bright-teal) !important;
}

#helpDrawer .kc-nav-section-btn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300FFD2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
}

#helpDrawer .kc-nav-section-btn:hover {
  background-color: var(--rp-dark-teal-hover) !important;
  border-left-color: var(--rp-bright-teal-tint-50) !important;
}

#helpDrawer .kc-nav-section-btn:not(.collapsed) {
  border-left-color: var(--rp-accent) !important;
}

#helpDrawer .kc-nav-section-body {
  background-color: var(--rp-teal-wash) !important;
  border-left-color: var(--rp-bright-teal-tint-35) !important;
}

.kc-nav-section-body {
  background-color: var(--rp-teal-wash);
  border-left: 3px solid var(--rp-bright-teal-tint-35);
  padding: 0.75rem calc(1rem - 3px);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cbts-dark-blue);
}

/* Breathe and visually separate the actions accordion from its parent section.
   Padding lives on the collapse element (not margin on the child) so Bootstrap's
   height transition includes it — no snap when the section opens. */
.kc-nav-section .collapse:has(.kc-actions-accordion),
.kc-nav-section .collapsing:has(.kc-actions-accordion) {
  padding: 0.4rem 0.5rem;
}

.kc-nav-section .collapse .kc-actions-accordion {
  box-shadow: 0 2px 8px rgba(0, 77, 62,0.18), 0 1px 3px var(--rp-dark-teal-tint-12);
}

/* =====================================================
   FAQ ACCORDION — branded rp style
===================================================== */

#faqAccordion,
.kc-actions-accordion {
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--rp-shadow-12);
  box-shadow:
    0 2px 8px var(--rp-shadow-07),
    0 1px 2px var(--rp-shadow-05);
}

#faqAccordion .accordion-item,
.kc-actions-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--rp-shadow-08);
}

#faqAccordion .accordion-item:last-child,
.kc-actions-accordion .accordion-item:last-child {
  border-bottom: none;
}

#faqAccordion .accordion-button,
.kc-actions-accordion .accordion-button {
  background-color: var(--cbts-dark-teal);
  color: var(--rp-accent);
  font-weight: 600;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
  padding: 0.4rem calc(1rem - 3px);
  box-shadow: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

#faqAccordion .accordion-button:hover,
.kc-actions-accordion .accordion-button:hover {
  background-color: var(--rp-dark-teal-accent);
  border-left-color: var(--rp-bright-teal-tint-55);
}

#faqAccordion .accordion-button:not(.collapsed),
.kc-actions-accordion .accordion-button:not(.collapsed) {
  background-color: var(--cbts-dark-teal);
  color: var(--rp-accent);
  border-left-color: var(--rp-accent);
  box-shadow: none;
}

/* Chevron — teal always */
#faqAccordion .accordion-button::after,
.kc-actions-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300FFD2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 200ms ease;
}

#faqAccordion .accordion-body,
.kc-actions-accordion .accordion-body {
  background-color: var(--rp-teal-wash);
  border-left: 3px solid var(--rp-bright-teal-tint-35);
  padding: 0.5rem calc(1rem - 3px);
  color: var(--cbts-dark-blue);
  font-size: 0.85rem;
  line-height: 1.65;
}

/* =====================================================
   ACTIONS ACCORDION — slate + brass palette
   Overrides the shared FAQ/actions rules above so that
   action cards feel distinct from the help nav sections.
===================================================== */
.kc-actions-accordion .accordion-button {
  background-color: var(--cbts-dark-blue);
  color: var(--cbts-bright-teal);
  border-left-color: transparent;
}

.kc-actions-accordion .accordion-button:hover {
  background-color: var(--rp-dark-teal-hover);
  border-left-color: var(--rp-bright-teal-tint-55);
}

.kc-actions-accordion .accordion-button:not(.collapsed) {
  background-color: var(--cbts-dark-blue);
  color: var(--cbts-bright-teal);
  border-left-color: var(--rp-accent);
}

.kc-actions-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300FFD2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Help drawer — action items inside the drawer's "Find It" panel.
   Migrated from Brass/Orange chrome to Bright Teal so this panel reads
   as part of the same chrome family as the Navigator tab + topnav pill.
   (Brand-departure #7 removed.) The orange pulse animation that fires
   when the user clicks "Find It" is *separate* — that's the attention-
   grabbing alert gesture, not chrome. */
#helpDrawer .kc-actions-accordion .accordion-button {
  background-color: var(--rp-bright-teal-tint-10);
  color: var(--cbts-dark-blue);
}

#helpDrawer .kc-actions-accordion .accordion-button:hover {
  background-color: var(--rp-bright-teal-tint-18);
  border-left-color: var(--rp-bright-teal-tint-55);
}

#helpDrawer .kc-actions-accordion .accordion-button:not(.collapsed) {
  background-color: var(--rp-bright-teal-tint-10);
  color: var(--cbts-dark-blue);
  border-left-color: var(--rp-accent);
}

#helpDrawer .kc-actions-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23004D3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

#helpDrawer .kc-actions-accordion .accordion-item {
  border-bottom-color: var(--rp-shadow-12);
}

#helpDrawer .kc-actions-accordion .accordion-body {
  background-color: var(--rp-bright-teal-tint-06);
  border-left-color: var(--rp-bright-teal-tint-35);
}

/* "Find It" highlight button — Bright Teal CTA on chalk drawer.
   Same gesture as the topnav Navigator pill. The element it targets
   gets the orange-glow pulse animation (separate alert gesture). */
.kc-actions-accordion .help-highlight-btn {
  background-color: var(--cbts-bright-teal) !important;
  color: var(--cbts-dark-blue) !important;
}

.kc-actions-accordion .help-highlight-btn:hover,
.kc-actions-accordion .help-highlight-btn:focus {
  background-color: var(--cbts-bright-teal) !important;
  color: var(--cbts-dark-blue) !important;
  filter: brightness(1.08);
}

.kc-actions-accordion .help-highlight-btn:active {
  background-color: var(--cbts-bright-teal) !important;
  filter: brightness(0.92);
}

.kc-actions-accordion .help-find-it-label {
  color: var(--cbts-dark-blue);
  opacity: 1;
}

/* =====================================================
   KNOWLEDGE CENTER — SECTION NAV
===================================================== */
#kcSectionNav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cbts-chalk);
  border-bottom: 1px solid var(--rp-shadow-08);
  padding: 0.5rem 0 0.5rem 0;
  margin-bottom: 1.25rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  box-shadow: 0 2px 6px var(--rp-shadow-06);
  transition: box-shadow 150ms ease;
}

#kcSectionNav.d-none { display: none !important; }

.kc-section-nav-btn {
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--rp-shadow-15);
  background: transparent;
  color: var(--cbts-charcoal);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
  line-height: 1.6;
}

.kc-section-nav-btn:hover {
  background: var(--rp-bright-teal-tint-10);
  border-color: var(--rp-bright-teal-tint-45);
  color: var(--cbts-dark-blue);
}

.kc-section-nav-btn.active {
  background: var(--cbts-dark-blue);
  border-color: var(--cbts-dark-blue);
  color: var(--rp-accent);
}

/* =====================================================
   MARKDOWN ARTICLE SECTIONS — non-page_nav articles
   Provides collapsible-section structure driven by h2
   headings in the article markdown content.
===================================================== */

/* Container for the section-ised markdown */
.kc-md-sections {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Preamble — intro text before the first heading */
.kc-md-preamble {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cbts-charcoal);
  padding: 0.5rem 0 0.25rem;
}

.kc-md-preamble p:last-child { margin-bottom: 0; }

/* Markdown content typography (inside section bodies + flat articles) */
.kc-md-content {
  font-size: 0.875rem;
  line-height: 1.7;
}

.kc-md-content h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cbts-dark-blue);
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--rp-shadow-08);
}

.kc-md-content h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cbts-dark-blue);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.kc-md-content p {
  margin-bottom: 0.5rem;
}

.kc-md-content ul,
.kc-md-content ol {
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
}

.kc-md-content li {
  margin-bottom: 0.25rem;
}

.kc-md-content li::marker {
  color: var(--rp-accent);
}

.kc-md-content blockquote {
  border-left: 3px solid var(--rp-accent);
  padding: 0.4rem 0.75rem;
  margin: 0.5rem 0;
  background: var(--rp-bright-teal-tint-04);
  border-radius: 0 0.25rem 0.25rem 0;
  font-size: 0.84rem;
  color: var(--rp-blue-steel);
}

.kc-md-content blockquote p:last-child { margin-bottom: 0; }

.kc-md-content table {
  width: 100%;
  font-size: 0.82rem;
  border-collapse: collapse;
  margin: 0.5rem 0;
}

.kc-md-content th {
  background: var(--cbts-dark-blue);
  color: var(--rp-accent);
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kc-md-content td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--rp-shadow-08);
  vertical-align: top;
}

.kc-md-content tr:last-child td {
  border-bottom: none;
}

.kc-md-content code {
  background: var(--rp-shadow-06);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.82em;
}

.kc-md-content pre {
  background: var(--cbts-dark-teal);
  color: var(--cbts-bright-teal);
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

.kc-md-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.kc-md-content hr {
  border: none;
  border-top: 1px solid var(--rp-shadow-08);
  margin: 0.75rem 0;
}

.kc-md-content strong {
  color: var(--cbts-dark-blue);
}

/* =====================================================
   KNOWLEDGE CENTER — SKELETON LOADING
===================================================== */
@keyframes kc-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.kc-skeleton-card {
  background: var(--rp-teal-wash);
  border-radius: var(--rp-border-radius);
  border: 1px solid var(--rp-shadow-08);
  padding: 1rem;
  min-height: 90px;
}

.kc-skeleton-line {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--rp-shadow-06) 25%,
    rgba(1, 38, 57,0.13) 50%,
    var(--rp-shadow-06) 75%
  );
  background-size: 600px 100%;
  animation: kc-shimmer 1.4s infinite linear;
}

.kc-skeleton-line--title { height: 14px; width: 55%; margin-bottom: 0.6rem; }
.kc-skeleton-line--text  { height: 11px; width: 85%; margin-bottom: 0.4rem; }
.kc-skeleton-line--text2 { height: 11px; width: 60%; }

/* =====================================================
   KNOWLEDGE CENTER — SEARCH COUNT + HIGHLIGHT
===================================================== */
#kcSearchCount {
  font-size: 0.8rem;
  color: var(--rp-blue-steel);
}

.kc-article-card mark {
  background: var(--rp-bright-teal-tint-30);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* =====================================================
   KNOWLEDGE CENTER — CARD TYPE ICON
===================================================== */
.kc-type-icon {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  color: var(--cbts-teal);
  display: block;
}

/* =====================================================
   KNOWLEDGE CENTER — MODAL PREV/NEXT NAV
===================================================== */
.kc-modal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kc-modal-nav-count {
  font-size: 0.8rem;
  color: var(--rp-blue-steel);
  white-space: nowrap;
  min-width: 3.5rem;
  text-align: center;
}

/* =====================================================
   KNOWLEDGE CENTER — SECTION NAV RIGHT-SIDE BUTTONS
===================================================== */
.kc-manage-btn {
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--rp-shadow-15);
  background: transparent;
  color: var(--cbts-charcoal);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.6;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.kc-manage-btn:hover {
  background: var(--cbts-dark-blue);
  border-color: var(--cbts-dark-blue);
  color: var(--rp-accent);
}


/* =====================================================
   KNOWLEDGE CENTER — SECTION NAV FEEDBACK BUTTON
===================================================== */
.kc-feedback-nav-btn {
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--rp-bright-teal-tint-45);
  background: transparent;
  /* dark-teal #004D3E on chalk #F3FBFA = 12.3:1 AAA (brand p.37: Teal/mid-teal
     on light surfaces below 24pt fails AA; dark-teal clears it). */
  color: var(--cbts-dark-teal);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
  line-height: 1.6;
}

.kc-feedback-nav-btn:hover {
  background: var(--cbts-dark-blue);
  border-color: var(--cbts-dark-blue);
  color: var(--rp-accent);
}

/* =====================================================
   KNOWLEDGE CENTER — FEEDBACK TYPE PICKER
===================================================== */
.kc-feedback-type-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kc-feedback-type-btn {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--rp-border-radius);
  border: 1px solid var(--rp-shadow-15);
  background: var(--rp-teal-wash);
  color: var(--cbts-dark-blue);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.kc-feedback-type-btn i {
  font-size: 1.3rem;
  color: var(--rp-blue-steel);
  transition: color 150ms ease;
}

.kc-feedback-type-btn:hover {
  background: var(--rp-bright-teal-tint-12);
  border-color: var(--rp-bright-teal-tint-40);
}

.kc-feedback-type-btn.active {
  background: var(--cbts-dark-blue);
  border-color: var(--cbts-dark-blue);
  color: var(--rp-accent);
}

.kc-feedback-type-btn.active i {
  color: var(--rp-accent);
}

/* =====================================================
   KNOWLEDGE CENTER — CONTACT STRIP
===================================================== */
.kc-contact-strip {
  border-top: 1px solid var(--rp-shadow-08);
  padding: 0.85rem 0 1rem;
  margin-top: 2rem;
}

.kc-contact-strip-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.kc-contact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  /* `--rp-blue-steel` #5C7E92 on Light Gray #F2F1ED was 3.82:1
     (fails AA). Use the muted text token — same hierarchy intent, AA-clean. */
  color: var(--rp-text-muted);
}

.kc-contact-item i { font-size: 0.9rem; }
.kc-contact-item strong { color: var(--cbts-charcoal); }

.kc-contact-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--rp-shadow-15);
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .kc-contact-divider { display: none; }
  .kc-contact-strip-inner { flex-direction: column; align-items: flex-start; }
}



/* ============================================================================
 * SKIP-TO-CONTENT LINK
 * First focusable element on every authenticated page. Visually hidden until
 * it receives focus, at which point it slides into view at the top-left of
 * the viewport. Activating it (Enter / Space) moves focus to <main id="content">,
 * which carries tabindex="-1" so it's focusable as a landmark target.
 * ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;            /* above topnav + offcanvas backdrop */
  padding: 0.625rem 1rem;
  background: var(--cbts-bright-teal);
  color: var(--cbts-dark-blue);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--cbts-dark-teal);
  border-radius: 0 0 var(--rp-radius-sm, 0.25rem) 0;
  /* Hide off-screen until focused. Using transform-translateY (rather than
   * clip-path / clip) keeps the element in the document flow so screen
   * readers still find it as the first focusable target. */
  transform: translateY(-110%);
  transition: transform var(--rp-duration-medium, 200ms) var(--rp-ease-standard, ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--cbts-bright-teal);
  outline-offset: 2px;
}

/* Keep <main> from showing a focus ring when the skip-link drops focus on it. */
main#content:focus {
  outline: none;
}


/* ============================================================================
 * REDUCED MOTION (WCAG 2.3.3)
 * Users with `prefers-reduced-motion: reduce` set in their OS get
 * vestibular-safe defaults: animations + transitions are clamped to ~0ms.
 * 0.01ms (not 0) keeps any animation/transitionend handlers intact, since
 * some app code relies on them firing.
 *
 * Scoped to `*` so all of Bootstrap, our design system, and any third-party
 * widget JS that uses CSS transitions for state changes (Tabulator,
 * flatpickr, Chart.js's CSS-driven legends) honor the user preference.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Specificity note: we use `html[lang]` (always present on <html>) plus
   * the descendant universal to push specificity to (0,1,0,1) — beats any
   * single-class `transition: ... !important` shorthand rule (e.g.
   * .topnav-navigator, .rp-card) at (0,1,0,0). A bare `*` (0,0,0,0) or
   * `[data-theme] *` (0,1,0,0) would tie or lose. */
  html[lang] *,
  html[lang] *::before,
  html[lang] *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay:           0ms !important;
    transition-duration:       0.01ms !important;
    transition-delay:          0ms !important;
    scroll-behavior:           auto !important;
  }
}