/* ==========================================================================
   DMD Docs — Expedition skin
   The dark design language of www.dmdnavigation.com (2026 "Expedition"
   redesign) applied to the whole docs site. Loaded LAST in head.php so it
   re-points the Silicon/Bootstrap variables and the shared .rm-* tokens
   (roadmap.css) at one palette instead of patching every page.

   Two surfaces, one language:
   - html.dx-site  the reading site (home, DMD2 manual, devices, apps, FAQ):
                   the dmdnavigation.com ink (#0b0d10) exactly.
   - html.dx-work  the places people WORK in — support tickets, the roadmap,
                   the string translator: the same palette lifted a few
                   steps ("dark but lighter", John 2026-10-18) so long
                   sessions with forms, lists and threads are easier on the
                   eyes and panels separate clearly.

   Tokens mirror dmdnavigation.com/home.php #xph and dmd2-app.php #xdn:
   ink / panel / bone / dim / faint, DMD blue #00a0f2 with ink text on it,
   the green / amber / coral / violet section hues, Apotek uppercase display,
   Saira Semi Condensed body (17px / 1.6), IBM Plex Mono for eyebrows.
   ========================================================================== */

@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/IBMPlexMono_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── TOKENS ───────────────────────────────────────────────────────────── */

:root {
  --x-ink:      #0b0d10;
  --x-ink-rgb:  11, 13, 16;
  --x-panel:    #14171b;
  --x-panel-2:  #191d22;
  --x-panel-3:  #20252b;
  --x-bone:     #ede8df;
  --x-text:     #d9d4ca;           /* running text: bone, a touch softer */
  --x-dim:      #a29b8e;
  --x-faint:    #6b665c;
  --x-line:     rgba(237, 232, 223, .11);
  --x-line-2:   rgba(237, 232, 223, .2);

  --x-accent:     #00a0f2;          /* DMD blue */
  --x-accent-rgb: 0, 160, 242;
  --x-accent-hi:  #4dbdf6;          /* hover / links on hover */
  --x-accent-ink: #04121e;          /* text on blue */
  --x-green:  #2bd576;
  --x-amber:  #ffb545;
  --x-coral:  #ff6a55;
  --x-violet: #9d8cff;

  --x-display: 'Apotek', 'Arial Narrow', sans-serif;
  --x-body:    'Saira Semi Condensed', 'Segoe UI', system-ui, sans-serif;
  --x-mono:    'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --x-radius:   6px;
  --x-radius-s: 4px;
}

/* Work areas: same language, lifted surfaces. */
:root.dx-work {
  --x-ink:     #16191e;
  --x-ink-rgb: 22, 25, 30;
  --x-panel:   #1e2228;
  --x-panel-2: #252a31;
  --x-panel-3: #2d333b;
  --x-text:    #e1dcd2;
  --x-dim:     #b3ac9f;
  --x-faint:   #7d776c;
  --x-line:    rgba(237, 232, 223, .13);
  --x-line-2:  rgba(237, 232, 223, .23);
}

/* ─── SILICON / BOOTSTRAP RE-POINT ─────────────────────────────────────── */
/* Same specificity as the theme's own [data-bs-theme=dark] blocks, loaded
   later, so these win everywhere the attribute is set (html, footer…). */

[data-bs-theme=dark] {
  color-scheme: dark;
  --si-body-color: var(--x-text);
  --si-body-bg: var(--x-ink);
  --si-body-bg-rgb: var(--x-ink-rgb);
  --si-emphasis-color: var(--x-bone);
  --si-secondary-color: var(--x-dim);
  --si-secondary-bg: var(--x-panel);
  --si-tertiary-color: var(--x-faint);
  --si-tertiary-bg: var(--x-panel-2);
  --si-heading-color: var(--x-bone);
  --si-heading-link-color: var(--x-bone);
  --si-heading-link-hover-color: var(--x-accent);
  --si-nav-link-color: var(--x-text);
  --si-link-color: var(--x-accent);
  --si-link-color-rgb: var(--x-accent-rgb);
  --si-link-hover-color: var(--x-accent-hi);
  --si-link-hover-color-rgb: 77, 189, 246;
  --si-border-color: var(--x-line);
  --si-border-color-translucent: var(--x-line);
  --si-gray-600: var(--x-dim);
  --si-gray-700: var(--x-text);
  --si-gray-800: var(--x-bone);
  --si-gray-900: var(--x-bone);
  --si-code-color: var(--x-amber);
  --si-highlight-color: var(--x-bone);
  --si-highlight-bg: rgba(255, 181, 69, .22);
  --si-user-selection-color: rgba(var(--x-accent-rgb), .32);

  --si-primary: var(--x-accent);
  --si-primary-rgb: var(--x-accent-rgb);
  --si-primary-text-emphasis: var(--x-accent-hi);
  --si-primary-bg-subtle: rgba(var(--x-accent-rgb), .1);
  --si-primary-border-subtle: rgba(var(--x-accent-rgb), .35);
  --si-success-text-emphasis: var(--x-green);
  --si-success-bg-subtle: rgba(43, 213, 118, .1);
  --si-success-border-subtle: rgba(43, 213, 118, .32);
  --si-info-text-emphasis: var(--x-accent-hi);
  --si-info-bg-subtle: rgba(var(--x-accent-rgb), .1);
  --si-info-border-subtle: rgba(var(--x-accent-rgb), .32);
  --si-warning-text-emphasis: var(--x-amber);
  --si-warning-bg-subtle: rgba(255, 181, 69, .1);
  --si-warning-border-subtle: rgba(255, 181, 69, .32);
  --si-danger-text-emphasis: var(--x-coral);
  --si-danger-bg-subtle: rgba(255, 106, 85, .1);
  --si-danger-border-subtle: rgba(255, 106, 85, .34);
  --si-light-bg-subtle: var(--x-panel);
  --si-secondary-bg-subtle: var(--x-panel-2);
  --si-secondary-text-emphasis: var(--x-bone);
  --si-light-text-emphasis: var(--x-bone);
  --si-form-valid-color: var(--x-green);
  --si-form-invalid-color: var(--x-coral);
}

html[data-bs-theme=dark],
html[data-bs-theme=dark] body { background-color: var(--x-ink); }

/* ─── BASE TYPE ────────────────────────────────────────────────────────── */

body {
  font-family: var(--x-body);
  font-size: 1.0625rem;      /* 17px — same as dmdnavigation.com */
  line-height: 1.6;
  color: var(--x-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--x-display);
  font-weight: 700;
  color: var(--x-bone);
  letter-spacing: .01em;
}

/* The reading site speaks in the uppercase display voice; the work areas keep
   user-written titles (tickets, reports, strings) in their own case. */
.dx-site h1, .dx-site .h1,
.dx-site h2, .dx-site .h2,
.dx-site h3, .dx-site .h3,
.dx-site h4, .dx-site .h4 {
  text-transform: uppercase;
  line-height: 1;
  text-wrap: balance;
}
.dx-site h5, .dx-site .h5,
.dx-site h6, .dx-site .h6 { line-height: 1.2; }

strong, b { font-weight: 700; color: var(--x-bone); }
sup { font-size: .55em; top: -.75em; }

.text-muted,
.text-body-secondary,
.text-secondary { color: var(--x-dim) !important; }
[data-bs-theme=dark] .text-body { color: var(--x-text) !important; }
[data-bs-theme=dark] .text-dark:not(.badge),
[data-bs-theme=dark] .text-black,
[data-bs-theme=dark] .text-white:not(.badge):not(.btn) { color: var(--x-bone) !important; }
.text-primary,
.text-info { color: var(--x-accent) !important; }
.text-success { color: var(--x-green) !important; }
.text-warning { color: var(--x-amber) !important; }
.text-danger  { color: var(--x-coral) !important; }
.text-gradient-primary {
  background: linear-gradient(90deg, var(--x-accent), var(--x-accent-hi));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a { color: var(--x-accent); }
a:hover { color: var(--x-accent-hi); }
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--x-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

hr { border-color: var(--x-line); opacity: 1; }

code {
  color: var(--x-amber);
  font-family: var(--x-mono);
  font-size: .86em;
  background: rgba(255, 181, 69, .08);
  border: 1px solid rgba(255, 181, 69, .16);
  border-radius: 3px;
  padding: .08em .35em;
  word-break: break-word;
}
pre {
  font-family: var(--x-mono);
  color: var(--x-text);
  background: var(--x-panel);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  padding: 1rem 1.15rem;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }
kbd {
  font-family: var(--x-mono);
  font-size: .78em;
  color: var(--x-bone);
  background: var(--x-panel-2);
  border: 1px solid var(--x-line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: .12em .4em;
  box-shadow: none;
}
mark, .mark { background: rgba(255, 181, 69, .22); color: var(--x-bone); border-radius: 2px; }

.lead { color: var(--x-dim); font-size: 1.1875rem; line-height: 1.55; }

/* The mono "eyebrow" from dmdnavigation.com — reusable anywhere. */
.x-eyebrow {
  font-family: var(--x-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--x-accent);
  display: block;
  margin: 0 0 .9rem;
}
.x-eyebrow::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-right: 12px;
  vertical-align: .32em;
  background: currentColor;
}

/* Section header: eyebrow + big display title + one dim line (dmdnavigation .sect-head) */
.x-sect-head { padding-top: 2.25rem; }
.x-sect-head h2,
.x-sect-head h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: .96;
  margin: 0 0 .55rem !important;
}
.x-sect-head .text-muted { font-size: 1.02rem; }

/* ─── PAGE LOADER (dark compass, same as dmdnavigation.com) ────────────── */

.page-loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: all .4s .2s ease-in-out;
  background-color: var(--x-ink);
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
.page-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 40% at 84% 6%, rgba(var(--x-accent-rgb), .16), transparent 62%);
  pointer-events: none;
}
.page-loading.active { opacity: 1; visibility: visible; }
.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  transition: opacity .2s ease-in-out;
  opacity: 0;
}
.page-loading.active > .page-loading-inner { opacity: 1; }
.page-loading-inner > span {
  display: block;
  margin-top: 14px;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(237, 232, 223, .45);
}
.ldr-compass { display: inline-block; width: 86px; height: 86px; }
.ldr-compass svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ldr-ring { fill: none; stroke: rgba(237, 232, 223, .22); stroke-width: 1.5; stroke-dasharray: 4 7; stroke-linecap: round;
  transform-origin: 50% 50%; animation: ldrSpin 16s linear infinite; }
.ldr-card { font-family: var(--x-mono); font-size: 9px; fill: rgba(237, 232, 223, .38); }
.ldr-card.n { fill: var(--x-accent); }
.ldr-needle { transform-origin: 50% 50%; animation: ldrSeek 3.4s cubic-bezier(.45, .05, .35, 1) infinite; }
.ldr-needle .nn { fill: var(--x-accent); }
.ldr-needle .ns { fill: rgba(237, 232, 223, .42); }
.ldr-hub { fill: var(--x-bone); }
@keyframes ldrSpin { to { transform: rotate(360deg); } }
@keyframes ldrSeek {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(150deg); }
  55% { transform: rotate(95deg); }
  80% { transform: rotate(330deg); }
  100% { transform: rotate(360deg); }
}

/* ─── TOP NAVIGATION ───────────────────────────────────────────────────── */

/* [data-bs-theme=dark] in the selector: the theme's own dark-navbar block
   ([data-bs-theme=dark] .navbar:not(...)) sets the hover colour to its violet
   and would otherwise outrank this. */
[data-bs-theme=dark] header.navbar.dx-nav,
header.navbar.dx-nav {
  --si-navbar-stuck-bg: rgba(var(--x-ink-rgb), .9);
  --si-navbar-color: rgba(237, 232, 223, .86);
  --si-navbar-hover-color: var(--x-accent);
  --si-navbar-active-color: var(--x-accent);
  --si-navbar-brand-color: var(--x-bone);
  --si-navbar-toggler-color: var(--x-bone);
  background: var(--x-ink);
  border-bottom: 1px solid var(--x-line);
  min-height: 74px;
}
header.navbar.dx-nav.navbar-stuck {
  background: rgba(var(--x-ink-rgb), .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}
.dx-nav .navbar-nav .nav-link {
  font-family: var(--x-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--si-navbar-color);
}
.dx-nav .navbar-nav .nav-link.active,
.dx-nav .navbar-nav .nav-link.show,
.dx-nav .navbar-nav .nav-item.active > .nav-link { color: var(--x-accent); }
.dx-nav .navbar-nav .nav-link sup { font-size: .55em; }

.dx-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--x-bone) !important;
  font-weight: 400;
}
.dx-brand img { width: 47px; height: auto; display: block; }
.dx-brand-tag {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--x-dim);
  padding-left: 14px;
  border-left: 1px solid var(--x-line-2);
  line-height: 1.4;
  transition: color .2s;
}
.dx-brand:hover .dx-brand-tag { color: var(--x-accent); }

/* Mega menus: dmdnavigation's dark dropdowns, headings as mono eyebrows. */
.dx-nav .dropdown-menu {
  --si-dropdown-bg: var(--x-panel);
  --si-dropdown-color: var(--x-text);
  --si-dropdown-border-color: var(--x-line);
  --si-dropdown-link-color: var(--x-text);
  --si-dropdown-link-hover-color: var(--x-accent);
  --si-dropdown-link-hover-bg: transparent;
  --si-dropdown-link-active-color: var(--x-accent);
  --si-dropdown-link-active-bg: transparent;
  --si-dropdown-header-color: var(--x-bone);
  background: var(--x-panel);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
}
.dx-nav .dropdown-menu h6 {
  font-family: var(--x-mono) !important;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--x-faint) !important;
}
.dx-nav .dropdown-menu .dropdown-item { color: var(--x-text); }
.dx-nav .dropdown-menu .dropdown-item:hover,
.dx-nav .dropdown-menu .dropdown-item:focus { color: var(--x-accent); background: transparent; }
.dx-nav .dropdown-menu .dropdown-item .bx { color: var(--x-accent) !important; }
.dx-nav .mega-dropdown-column { border-color: var(--x-line) !important; }

/* Hairline between this site's pages and its sister sites — as on dmdnavigation.com */
.dx-nav .navbar-nav .nav-sep {
  align-self: center;
  flex: none;
  width: 1px;
  height: 1.15rem;
  margin: 0 .55rem;
  background: rgba(255, 255, 255, .22);
}

.dx-nav .btn-main-site {
  --si-btn-padding-x: 1.35rem;
  --si-btn-padding-y: .55rem;
  --si-btn-font-size: .95rem;
  font-family: var(--x-display);
  letter-spacing: .02em;
}

.dx-nav .offcanvas {
  --si-offcanvas-bg: var(--x-ink);
  color: var(--x-text);
}
@media (min-width: 992px) {
  .dx-nav .offcanvas { background: transparent !important; }
}
@media (max-width: 991.98px) {
  .dx-nav .offcanvas { background: var(--x-ink) !important; border-left: 1px solid var(--x-line); }
}
.dx-nav .offcanvas-header { border-color: var(--x-line) !important; }
.dx-nav .offcanvas-title { font-family: var(--x-mono); font-weight: 400; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--x-dim); }

@media (max-width: 991.98px) {
  .dx-nav .navbar-nav .nav-link { font-size: 1.15rem; padding: .7rem 0; }
  .dx-nav .navbar-nav .nav-sep {
    align-self: stretch;
    width: auto;
    height: 1px;
    margin: .5rem 0;
    background: rgba(255, 255, 255, .14);
  }
  .dx-nav .dropdown-menu { background: transparent; border: 0; box-shadow: none; padding-left: .5rem; }
}

/* External-link marker — the quiet ↗ used by dmdnavigation.com for any link
   that leaves this site (always with target="_blank" rel="noopener"). */
a.ext::after {
  content: '';
  display: inline-block;
  flex: none;
  width: .6em;
  height: .6em;
  margin-left: .35em;
  vertical-align: .1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1.5h7v7M10 2 1.75 10.25' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1.5h7v7M10 2 1.75 10.25' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .6;
  transition: transform .2s, opacity .2s;
}
a.ext:hover::after,
a.ext:focus-visible::after { opacity: 1; transform: translate(1px, -1px); }
a.btn.ext::after { width: .68em; height: .68em; margin-left: .5em; opacity: .85; }

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */

.btn {
  --si-btn-font-family: var(--x-body);
  --si-btn-border-radius: var(--x-radius-s);
  letter-spacing: .01em;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s, filter .2s;
}
.btn-sm { --si-btn-border-radius: 3px; }

.btn-primary {
  --si-btn-color: var(--x-accent-ink) !important;
  --si-btn-bg: var(--x-accent);
  --si-btn-border-color: var(--x-accent);
  --si-btn-hover-color: var(--x-accent-ink);
  --si-btn-hover-bg: var(--x-accent-hi);
  --si-btn-hover-border-color: var(--x-accent-hi);
  --si-btn-active-color: var(--x-accent-ink);
  --si-btn-active-bg: var(--x-accent-hi);
  --si-btn-active-border-color: var(--x-accent-hi);
  --si-btn-disabled-color: var(--x-accent-ink);
  --si-btn-disabled-bg: var(--x-accent);
  --si-btn-disabled-border-color: var(--x-accent);
  --si-btn-focus-shadow-rgb: var(--x-accent-rgb);
}
.btn-primary.bg-gradient-primary,
.bg-gradient-primary { background: linear-gradient(90deg, #0091d7, #0097e8 50%, #00a2f5) !important; }
.btn-primary.bg-gradient-primary { --si-btn-color: #fff !important; --si-btn-hover-color: #fff; color: #fff; }
.btn-primary.bg-gradient-primary:hover { filter: brightness(1.1); }

.btn-outline-primary {
  --si-btn-color: var(--x-accent);
  --si-btn-border-color: rgba(var(--x-accent-rgb), .55);
  --si-btn-hover-color: var(--x-accent-ink);
  --si-btn-hover-bg: var(--x-accent);
  --si-btn-hover-border-color: var(--x-accent);
  --si-btn-active-color: var(--x-accent-ink);
  --si-btn-active-bg: var(--x-accent);
  --si-btn-active-border-color: var(--x-accent);
  --si-btn-disabled-color: var(--x-accent);
  --si-btn-disabled-border-color: rgba(var(--x-accent-rgb), .4);
  --si-btn-focus-shadow-rgb: var(--x-accent-rgb);
}
[data-bs-theme=dark] .btn-outline-secondary,
[data-bs-theme=dark] .btn-outline-light {
  --si-btn-color: var(--x-bone);
  --si-btn-border-color: var(--x-line-2);
  --si-btn-hover-color: var(--x-bone);
  --si-btn-hover-bg: var(--x-panel-2);
  --si-btn-hover-border-color: rgba(237, 232, 223, .5);
  --si-btn-active-color: var(--x-bone);
  --si-btn-active-bg: var(--x-panel-3);
  --si-btn-active-border-color: rgba(237, 232, 223, .5);
}
[data-bs-theme=dark] .btn-secondary:not(.bg-white),
[data-bs-theme=dark] .btn-light {
  --si-btn-color: var(--x-bone);
  --si-btn-bg: var(--x-panel-2);
  --si-btn-border-color: var(--x-line);
  --si-btn-hover-color: var(--x-bone);
  --si-btn-hover-bg: var(--x-panel-3);
  --si-btn-hover-border-color: var(--x-line-2);
  --si-btn-active-color: var(--x-bone);
  --si-btn-active-bg: var(--x-panel-3);
  --si-btn-active-border-color: var(--x-line-2);
}
.btn-success {
  --si-btn-bg: #1fb862; --si-btn-border-color: #1fb862;
  --si-btn-hover-bg: var(--x-green); --si-btn-hover-border-color: var(--x-green);
  --si-btn-active-bg: var(--x-green); --si-btn-active-border-color: var(--x-green);
}
.btn-danger {
  --si-btn-bg: #e5503c; --si-btn-border-color: #e5503c;
  --si-btn-hover-bg: var(--x-coral); --si-btn-hover-border-color: var(--x-coral);
  --si-btn-active-bg: var(--x-coral); --si-btn-active-border-color: var(--x-coral);
}
.btn-outline-danger {
  --si-btn-color: var(--x-coral);
  --si-btn-border-color: rgba(255, 106, 85, .5);
  --si-btn-hover-bg: var(--x-coral); --si-btn-hover-border-color: var(--x-coral); --si-btn-hover-color: #1d0703;
  --si-btn-active-bg: var(--x-coral); --si-btn-active-border-color: var(--x-coral);
}
.btn-outline-success {
  --si-btn-color: var(--x-green);
  --si-btn-border-color: rgba(43, 213, 118, .5);
  --si-btn-hover-bg: var(--x-green); --si-btn-hover-border-color: var(--x-green); --si-btn-hover-color: #04160b;
  --si-btn-active-bg: var(--x-green); --si-btn-active-border-color: var(--x-green);
}
.btn-warning {
  --si-btn-color: #241500 !important;
  --si-btn-bg: var(--x-amber); --si-btn-border-color: var(--x-amber);
  --si-btn-hover-color: #241500; --si-btn-hover-bg: #ffc56b; --si-btn-hover-border-color: #ffc56b;
}
.btn-link {
  --si-btn-color: var(--x-accent);
  --si-btn-hover-color: var(--x-accent-hi);
  --si-btn-active-color: var(--x-accent);
}

/* ─── CARDS / PANELS ───────────────────────────────────────────────────── */

[data-bs-theme=dark] .card {
  --si-card-bg: var(--x-panel);
  --si-card-border-color: var(--x-line);
  --si-card-border-radius: var(--x-radius);
  --si-card-inner-border-radius: calc(var(--x-radius) - 1px);
  --si-card-cap-bg: transparent;
  --si-card-title-color: var(--x-bone);
}
[data-bs-theme=dark] .card:not([data-bs-theme=light]).shadow-sm,
[data-bs-theme=dark] .card:not([data-bs-theme=light]).shadow,
[data-bs-theme=dark] .card:not([data-bs-theme=light]).shadow-lg,
[data-bs-theme=dark] .card:not([data-bs-theme=light]).border-0 {
  background-color: var(--x-panel);
  border: 1px solid var(--x-line) !important;
  box-shadow: none !important;
}
[data-bs-theme=dark] .card-hover:not([data-bs-theme=light]):hover {
  background-color: var(--x-panel-2);
  border-color: rgba(var(--x-accent-rgb), .45) !important;
}
.card-header, .card-footer { border-color: var(--x-line); }

[data-bs-theme=dark] .bg-light:not(.badge),
[data-bs-theme=dark] .card.card-hover.bg-light,
[data-bs-theme=dark] .bg-body-tertiary { background-color: var(--x-panel) !important; }
[data-bs-theme=dark] .bg-secondary:not(.badge),
[data-bs-theme=dark] .card.bg-light,
[data-bs-theme=dark] .bg-body-secondary { background-color: var(--x-panel-2) !important; }
[data-bs-theme=dark] .bg-body { background-color: var(--x-ink) !important; }
[data-bs-theme=dark] .bg-dark:not(.badge):not(.footer):not(.offcanvas) { background-color: var(--x-panel-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--x-line) !important; }
.border-primary { border-color: rgba(var(--x-accent-rgb), .55) !important; }
.border-light { border-color: var(--x-line) !important; }
.shadow-sm, .shadow, .shadow-lg { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9) !important; }
.bg-primary:not(.btn) { background-color: var(--x-accent) !important; }
.bg-faded-primary { background-color: rgba(var(--x-accent-rgb), .12) !important; }
.bg-faded-success { background-color: rgba(43, 213, 118, .12) !important; }
.bg-faded-warning { background-color: rgba(255, 181, 69, .12) !important; }
.bg-faded-danger  { background-color: rgba(255, 106, 85, .12) !important; }
.bg-faded-info    { background-color: rgba(var(--x-accent-rgb), .12) !important; }

/* ─── ALERTS (callouts) ────────────────────────────────────────────────── */

[data-bs-theme=dark] .alert {
  --si-alert-bg: var(--x-panel);
  --si-alert-color: var(--x-text);
  --si-alert-border-color: var(--x-line);
  --si-alert-link-color: var(--x-bone);
  position: relative;
  border-radius: var(--x-radius);
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-callout, var(--x-dim));
  background: linear-gradient(90deg, color-mix(in srgb, var(--x-callout, var(--x-dim)) 9%, transparent), transparent 70%), var(--x-panel);
  color: var(--x-text);
}
[data-bs-theme=dark] .alert .alert-link,
[data-bs-theme=dark] .alert a:not(.btn) { color: var(--x-callout, var(--x-accent)); }
[data-bs-theme=dark] .alert > .bx:first-child,
[data-bs-theme=dark] .alert .bx-info-circle,
[data-bs-theme=dark] .alert .bx-error,
[data-bs-theme=dark] .alert .bx-bulb,
[data-bs-theme=dark] .alert .bx-check-circle { color: var(--x-callout, var(--x-dim)); }
[data-bs-theme=dark] .alert-info,
[data-bs-theme=dark] .alert-primary   { --x-callout: var(--x-accent); }
[data-bs-theme=dark] .alert-success   { --x-callout: var(--x-green); }
[data-bs-theme=dark] .alert-warning   { --x-callout: var(--x-amber); }
[data-bs-theme=dark] .alert-danger    { --x-callout: var(--x-coral); }
[data-bs-theme=dark] .alert-secondary,
[data-bs-theme=dark] .alert-light,
[data-bs-theme=dark] .alert-dark      { --x-callout: var(--x-dim); }

/* ─── BADGES / PILLS ───────────────────────────────────────────────────── */

.badge { font-family: var(--x-body); font-weight: 600; letter-spacing: .02em; border-radius: 3px; }
.badge.bg-primary { color: var(--x-accent-ink) !important; }
.badge.bg-warning { color: #241500 !important; background-color: var(--x-amber) !important; }
.badge.bg-success { background-color: #1fb862 !important; }
.badge.bg-danger  { background-color: #e5503c !important; }
.badge.bg-info    { background-color: var(--x-accent) !important; color: var(--x-accent-ink) !important; }
.badge.bg-secondary,
.badge.bg-light   { background-color: var(--x-panel-3) !important; color: var(--x-bone) !important; }
.badge.bg-dark    { background-color: var(--x-panel-3) !important; color: var(--x-bone) !important; }

/* ─── FORMS ────────────────────────────────────────────────────────────── */

[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
  --si-form-control-bg: var(--x-panel-2);
  color: var(--x-bone);
  background-color: var(--x-panel-2);
  border-color: var(--x-line-2);
  border-radius: var(--x-radius-s);
}
[data-bs-theme=dark] .form-control::placeholder { color: var(--x-faint); opacity: 1; }
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  color: var(--x-bone);
  background-color: var(--x-panel-2);
  border-color: var(--x-accent);
  box-shadow: 0 0 0 3px rgba(var(--x-accent-rgb), .2);
}
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-control[readonly] { background-color: var(--x-panel); color: var(--x-dim); }
[data-bs-theme=dark] .input-group-text { background: var(--x-panel); border-color: var(--x-line-2); color: var(--x-dim); }
.form-label, .col-form-label { color: var(--x-bone); font-weight: 600; }
.form-text { color: var(--x-dim); }
[data-bs-theme=dark] .form-check-input {
  background-color: var(--x-panel-2);
  border-color: var(--x-line-2);
}
[data-bs-theme=dark] .form-check-input:checked,
[data-bs-theme=dark] .form-check:not([data-bs-theme=light]) .form-check-input:checked:not(.is-invalid):not(:invalid),
[data-bs-theme=dark] .form-switch:not([data-bs-theme=light]) .form-check-input:checked {
  background-color: var(--x-accent);
  border-color: var(--x-accent);
}
[data-bs-theme=dark] .form-check-input:focus { border-color: var(--x-accent); box-shadow: 0 0 0 3px rgba(var(--x-accent-rgb), .2); }
.form-range::-webkit-slider-thumb { background: var(--x-accent); }
.form-range::-moz-range-thumb { background: var(--x-accent); }

/* ─── TABLES ───────────────────────────────────────────────────────────── */

[data-bs-theme=dark] .table {
  --si-table-color: var(--x-text);
  --si-table-bg: transparent;
  --si-table-border-color: var(--x-line);
  --si-table-striped-bg: rgba(237, 232, 223, .025);
  --si-table-striped-color: var(--x-text);
  --si-table-hover-bg: rgba(var(--x-accent-rgb), .06);
  --si-table-hover-color: var(--x-bone);
  --si-table-active-bg: rgba(var(--x-accent-rgb), .1);
  color: var(--x-text);
  border-color: var(--x-line);
}
[data-bs-theme=dark] .table > thead,
[data-bs-theme=dark] .table .table-light,
[data-bs-theme=dark] .table thead.table-light th {
  --si-table-bg: var(--x-panel-2);
  --si-table-color: var(--x-dim);
  background: var(--x-panel-2);
  color: var(--x-dim);
}
[data-bs-theme=dark] .table > thead th,
[data-bs-theme=dark] .table > thead td {
  font-family: var(--x-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--x-dim);
  background: var(--x-panel-2);
  border-color: var(--x-line);
  vertical-align: middle;
}
[data-bs-theme=dark] .table > :not(caption) > * > * { border-color: var(--x-line); }
[data-bs-theme=dark] .table-bordered > :not(caption) > * { border-color: var(--x-line); }

/* ─── NAV / TABS / PAGINATION / LIST GROUP / ACCORDION / DROPDOWNS ─────── */

[data-bs-theme=dark] .nav:not([data-bs-theme=light]) {
  --si-nav-link-color: var(--x-text);
  --si-nav-link-hover-color: var(--x-accent);
  --si-nav-link-active-color: var(--x-accent);
}
.nav-pills {
  --si-nav-pills-link-active-color: var(--x-accent-ink);
  --si-nav-pills-link-active-bg: var(--x-accent);
}
[data-bs-theme=dark] .nav-tabs:not([data-bs-theme=light]) {
  --si-nav-tabs-border-color: var(--x-line);
  --si-nav-tabs-link-active-color: var(--x-accent-ink);
  --si-nav-tabs-link-active-bg: var(--x-accent);
  --si-nav-tabs-link-hover-color: var(--x-accent);
}
[data-bs-theme=dark] .pagination:not([data-bs-theme=light]),
.pagination {
  --si-pagination-color: var(--x-text);
  --si-pagination-bg: transparent;
  --si-pagination-hover-color: var(--x-accent);
  --si-pagination-hover-bg: var(--x-panel-2);
  --si-pagination-active-color: var(--x-accent-ink);
  --si-pagination-active-bg: var(--x-accent);
  --si-pagination-active-border-color: var(--x-accent);
  --si-pagination-border-color: var(--x-line);
}
[data-bs-theme=dark] .list-group,
.list-group {
  --si-list-group-bg: var(--x-panel);
  --si-list-group-color: var(--x-text);
  --si-list-group-border-color: var(--x-line);
  --si-list-group-action-hover-bg: var(--x-panel-2);
  --si-list-group-action-hover-color: var(--x-bone);
  --si-list-group-action-active-bg: var(--x-panel-3);
  --si-list-group-active-bg: var(--x-accent);
  --si-list-group-active-border-color: var(--x-accent);
  --si-list-group-active-color: var(--x-accent-ink);
}
[data-bs-theme=dark] .accordion:not([data-bs-theme=light]),
.accordion {
  --si-accordion-btn-icon-box-bg: rgba(237, 232, 223, .06);
  --si-accordion-btn-icon-box-active-bg: var(--x-accent);
  --si-accordion-btn-icon-box-active-shadow: none;
  --si-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2304121e'%3e%3cpath d='M225.813 48.907L128 146.72 30.187 48.907 0 79.093l128 128 128-128z'/%3e%3c/svg%3e");
  --si-accordion-bg: var(--x-panel);
  --si-accordion-color: var(--x-text);
  --si-accordion-border-color: var(--x-line);
  --si-accordion-btn-color: var(--x-bone);
  --si-accordion-active-color: var(--x-accent);
  --si-accordion-active-bg: var(--x-panel-2);
  --si-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--x-accent-rgb), .2);
}
.accordion-button { font-family: var(--x-body); font-weight: 600; }

[data-bs-theme=dark] .dropdown-menu:not([data-bs-theme=light]) {
  --si-dropdown-bg: var(--x-panel);
  --si-dropdown-color: var(--x-text);
  --si-dropdown-border-color: var(--x-line);
  --si-dropdown-link-color: var(--x-text);
  --si-dropdown-link-hover-color: var(--x-accent);
  --si-dropdown-link-active-color: var(--x-accent);
  --si-dropdown-divider-bg: var(--x-line);
  --si-dropdown-header-color: var(--x-bone);
  background: var(--x-panel);
}

[data-bs-theme=dark] .modal {
  --si-modal-bg: var(--x-panel);
  --si-modal-color: var(--x-text);
  --si-modal-border-color: var(--x-line);
  --si-modal-header-border-color: var(--x-line);
  --si-modal-footer-border-color: var(--x-line);
}
.modal-backdrop.show { opacity: .7; }
[data-bs-theme=dark] .offcanvas { --si-offcanvas-bg: var(--x-ink); }
[data-bs-theme=dark] .toast { --si-toast-bg: var(--x-panel-2); --si-toast-border-color: var(--x-line); --si-toast-color: var(--x-text); }
[data-bs-theme=dark] .popover { --si-popover-bg: var(--x-panel-2); --si-popover-border-color: var(--x-line); --si-popover-body-color: var(--x-text); }
.tooltip { --si-tooltip-bg: var(--x-panel-3); --si-tooltip-color: var(--x-bone); font-family: var(--x-body); }
.progress, .progress-stacked { --si-progress-bg: var(--x-panel-3); --si-progress-bar-bg: var(--x-accent); }

/* ─── BREADCRUMB ───────────────────────────────────────────────────────── */

.breadcrumb {
  --si-breadcrumb-item-active-color: var(--x-bone);
  --si-breadcrumb-divider-color: var(--x-faint);
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.breadcrumb-item a { color: var(--x-dim); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--x-accent); }
.breadcrumb-item.active { color: var(--x-bone); }
.breadcrumb .bx { font-size: 1.05em !important; vertical-align: -.12em; }

/* ─── SHARED .rm-* DESIGN SYSTEM → EXPEDITION ──────────────────────────── */
/* roadmap.css builds every docs component on these tokens. */

:root,
[data-bs-theme="dark"] {
  --rm-indigo:      var(--x-accent);
  --rm-indigo-dark: var(--x-accent);
  --rm-violet:      var(--x-accent-hi);
  --rm-bg-grad-1:   var(--x-panel);
  --rm-bg-grad-2:   var(--x-panel);
  --rm-bg-grad-3:   var(--x-ink);
  --rm-surface:     var(--x-panel);
  --rm-surface-2:   var(--x-panel-2);
  --rm-border:      var(--x-line);
  --rm-text:        var(--x-bone);
  --rm-text-muted:  var(--x-dim);
  --rm-shadow-sm:   none;
  --rm-shadow:      0 18px 40px -26px rgba(0, 0, 0, .9);
  --rm-shadow-lg:   0 30px 70px -30px rgba(0, 0, 0, .95);
}

/* ─── HERO ─────────────────────────────────────────────────────────────── */
/* Every page's coloured gradient hero becomes an ink panel lit by its hue:
   DMD blue by default, the page's own section hue inside the DMD2 manual
   (--dnx-hue, set by the manual shell). The page markup keeps its inline
   gradient; this wins over it. */

.rm-hero {
  --hero-hue: var(--dnx-hue, var(--x-accent));
  border-radius: var(--x-radius) !important;
  border: 1px solid var(--x-line);
  box-shadow: none !important;
  color: var(--x-bone);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.35rem, 3.6vw, 2.9rem);
  isolation: isolate;
}
.rm-hero:not([style*="url("]) {
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--hero-hue) 20%, transparent), transparent 62%),
    radial-gradient(60% 90% at 0% 110%, color-mix(in srgb, var(--hero-hue) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--x-panel) 0%, var(--x-ink) 100%) !important;
}
/* Topographic contour lines — the map texture behind every hero. */
.rm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 360' fill='none' stroke='%23ede8df' stroke-width='1'%3E%3Cpath d='M380 180c0-62 58-118 132-118s128 50 128 112-50 126-126 126-134-58-134-120z' opacity='.5'/%3E%3Cpath d='M412 182c0-44 42-86 98-86s94 36 94 80-38 92-94 92-98-42-98-86z' opacity='.6'/%3E%3Cpath d='M444 184c0-28 28-56 66-56s62 24 62 52-26 60-62 60-66-28-66-56z' opacity='.7'/%3E%3Cpath d='M476 184c0-12 14-26 34-26s30 12 30 24-12 28-30 28-34-14-34-26z' opacity='.8'/%3E%3Cpath d='M340 176c4-86 82-160 182-160 72 0 130 28 160 74' opacity='.4'/%3E%3Cpath d='M300 184c8-112 104-206 230-206' opacity='.3'/%3E%3Cpath d='M346 300c-26-30-40-70-38-118' opacity='.35'/%3E%3Cpath d='M640 300c-40 44-98 70-160 66-50-4-94-26-126-60' opacity='.4'/%3E%3Cpath d='M260 360c-10-40-6-84 12-124' opacity='.22'/%3E%3C/svg%3E")
    right -40px center / auto 135% no-repeat;
  opacity: .085;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 20%, #000 70%);
}
/* A hairline of the hue along the top edge, like the pillars on dmdnavigation.com */
.rm-hero::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: auto;
  bottom: auto;
  width: 46%;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--hero-hue), transparent);
  filter: none;
  opacity: .9;
  pointer-events: none;
}
/* Banner heroes (device manuals, documents) keep their photo under the same
   ink scrim dmdnavigation.com lays over its hero photography. */
.rm-hero[style*="url("]::before {
  z-index: 0;
  background: linear-gradient(78deg, rgba(var(--x-ink-rgb), .95) 22%, rgba(var(--x-ink-rgb), .7) 55%, rgba(var(--x-ink-rgb), .35) 100%);
  opacity: 1;
  -webkit-mask-image: none;
          mask-image: none;
  -webkit-backdrop-filter: saturate(.15);
          backdrop-filter: saturate(.15);
}
.rm-hero-inner { position: relative; z-index: 1; }

.rm-hero h1,
.rm-hero .h1 {
  font-family: var(--x-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.05rem, 4.3vw, 3.5rem);
  line-height: .96;
  letter-spacing: .01em;
  color: var(--x-bone) !important;
  text-wrap: balance;
  margin-bottom: .9rem;
}
.rm-hero h1 sup { font-size: .5em; top: -.85em; color: var(--hero-hue); }
.rm-hero p,
.rm-hero p.lead {
  color: var(--x-dim) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  max-width: 62ch;
  opacity: 1;
}
.rm-hero p strong,
.rm-hero p.lead strong { color: var(--x-bone); }
.rm-hero a:not(.btn):not(.btn-cta):not(.btn-ghost) { color: var(--x-accent); }

/* Eyebrow above the title ("DMD² · MAP") */
.rm-hero .text-uppercase:not(.rm-status-pill):not(.badge):not(.lbl),
.rm-hero .rm-eyebrow {
  font-family: var(--x-mono) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  color: var(--hero-hue) !important;
  opacity: 1 !important;
  display: block;
  margin-bottom: .55rem;
}
.rm-hero .text-uppercase:not(.rm-status-pill):not(.badge):not(.lbl)::before,
.rm-hero .rm-eyebrow::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-right: 12px;
  vertical-align: .32em;
  background: currentColor;
}
.rm-hero .text-uppercase sup { font-size: .7em; top: -.5em; }

/* Icon tile beside the title */
.rm-hero-inner > .d-flex > span:first-child:not(.rm-status-pill) {
  background: color-mix(in srgb, var(--hero-hue) 12%, transparent) !important;
  color: var(--hero-hue) !important;
  border: 1px solid color-mix(in srgb, var(--hero-hue) 38%, transparent);
  border-radius: var(--x-radius) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Chips under the lead */
.rm-hero .rm-status-pill,
.rm-hero .badge {
  font-family: var(--x-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--x-bone) !important;
  background: rgba(var(--x-ink-rgb), .45) !important;
  border: 1px solid var(--x-line-2);
  border-radius: 100px;
  padding: .42rem .8rem;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* A status pill that was solid green ("STABLE RELEASE") keeps its meaning. */
.rm-hero .rm-status-pill[style*="#22c55e"] {
  color: var(--x-green) !important;
  border-color: rgba(43, 213, 118, .45);
  background: rgba(43, 213, 118, .08) !important;
}
.rm-hero .rm-status-pill[style*="#22c55e"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: .12em;
  border-radius: 50%;
  background: var(--x-green);
  box-shadow: 0 0 8px var(--x-green);
}

/* CTA buttons — the uppercase Apotek "xbtn" pair */
.rm-hero .btn-cta,
.rm-hero .btn-ghost,
.x-btn {
  font-family: var(--x-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  line-height: 1.1;
  padding: .95rem 1.5rem .8rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform .2s, filter .2s, border-color .2s, background-color .2s;
}
.rm-hero .btn-cta,
.x-btn-solid {
  background: var(--x-accent);
  color: var(--x-accent-ink);
}
.rm-hero .btn-cta:hover,
.x-btn-solid:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  color: var(--x-accent-ink);
}
.rm-hero .btn-ghost,
.x-btn-ghost {
  background: rgba(var(--x-ink-rgb), .3);
  color: var(--x-bone);
  border-color: rgba(237, 232, 223, .34);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.rm-hero .btn-ghost:hover,
.x-btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(var(--x-ink-rgb), .45);
  border-color: var(--x-bone);
  color: var(--x-bone);
}
.rm-hero .btn-cta .bx,
.rm-hero .btn-ghost .bx { font-size: 1.15em; }

/* Stats row */
.rm-hero-stat .num {
  font-family: var(--x-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  color: var(--x-bone);
  font-variant-numeric: tabular-nums;
}
.rm-hero-stat .lbl {
  font-family: var(--x-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--x-faint);
  opacity: 1;
  margin-top: .4rem;
}
.rm-hero-video { border-color: var(--x-line-2); border-radius: var(--x-radius); }

/* ─── WORK-AREA COMPONENTS (roadmap.css / translate.css) ───────────── */
/* Ink text on every DMD-blue fill, as on dmdnavigation.com's solid buttons. */
.rm-filter-chip.active,
.rm-btn-follow.active,
.rm-tab.active .count,
.rm-vote.voted { color: var(--x-accent-ink) !important; }
.rm-vote.voted { background: var(--x-accent); box-shadow: none; }
.rm-filter-chip.active { box-shadow: none; }
.rm-comment.is-admin .rm-comment-avatar { background: var(--x-accent); color: var(--x-accent-ink); }
.rm-comment.is-admin .rm-comment-name::after {
  background: var(--x-accent);
  color: var(--x-accent-ink);
  font-family: var(--x-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
  border-radius: 3px;
}
.rm-comment.is-internal .rm-comment-name::after { background: var(--x-amber); color: #241500; }
.rm-tab.active { color: var(--x-accent); }
.rm-rejected-banner .lbl { color: var(--x-dim); }
.rm-dup-list-head { color: var(--x-amber); }
.rm-admin-banner .lbl { color: var(--x-accent); }
.rm-filters,
.rm-search { border-radius: var(--x-radius); }
.rm-status-pill { font-family: var(--x-mono); font-weight: 400; letter-spacing: .1em; }
.tr-save-btn,
.tr-vote.voted {
  background: var(--x-accent);
  color: var(--x-accent-ink);
  border-radius: var(--x-radius-s);
}
.tr-save-btn:hover { color: var(--x-accent-ink); filter: brightness(1.1); box-shadow: none; }
.rm-detail-header::before { height: 2px; background: linear-gradient(90deg, var(--x-accent), transparent 70%); }

/* ─── CMS RICH TEXT FROM THE OLD LIGHT SITE ─────────────────────────── */
/* FAQ answers, device manuals and changelogs were written in the CMS editor
   while the site was light, and pasted text kept the old theme's greys as
   inline colours (rgb(86, 89, 115) = Silicon's #565973 body text, rgb(71,
   71, 71), black…). On the dark page those read as dark grey on ink, so they
   fall back to the surrounding text colour. Brighter inline colours are kept. */
[style*="rgb(86, 89, 115)"],
[style*="rgb(86,89,115)"],
[style*="rgb(71, 71, 71)"],
[style*="rgb(71,71,71)"],
[style*="rgb(51, 53, 77)"],
[style*="rgb(51,53,77)"],
[style*="rgb(33, 37, 41)"],
[style*="rgb(33,37,41)"],
[style*="rgb(11, 15, 25)"],
[style*="rgb(11,15,25)"],
[style*="color: rgb(0, 0, 0)"],
[style*="color:rgb(0,0,0)"],
[style*="color: #565973"],
[style*="color:#565973"],
[style*="color: #33354d"],
[style*="color:#33354d"],
[style*="color: #000000"],
[style*="color:#000000"],
[style*="color: #000;"],
[style*="color:#000;"] {
  color: inherit !important;
}

/* ─── SUPPORT DESK: EMAIL BODIES + RICH EDITOR ─────────────────────── */
/* Customer emails arrive as their own HTML, usually written for a white page
   (dark inline text colours, white table cells). Like a mail client in dark
   mode, the desk shows each one on a light "paper" card so it reads exactly as
   it was sent; everything around it stays dark. */
.email-body {
  background: #f4f2ee;
  color: #1e2125;
  border: 1px solid rgba(237, 232, 223, .2);
  border-radius: var(--x-radius);
  padding: .9rem 1.1rem;
  font-size: .98rem;
  line-height: 1.6;
}
.email-body a { color: #0072b5; }
.email-body strong, .email-body b { color: inherit; }
.email-body blockquote { border-left: 3px solid #cfcac1; padding-left: .8rem; color: #555; }
.email-body .btn-link,
.email-body .quoted-collapsed + .btn-link { color: #5a6270 !important; }

.rich-editor { border-color: var(--x-line-2) !important; border-radius: var(--x-radius-s) !important; background: var(--x-panel-2); }
.rich-editor [contenteditable] { color: var(--x-bone); background: var(--x-panel-2); }
.rich-editor [contenteditable]:empty:before { color: var(--x-faint) !important; }
.rich-editor [contenteditable] a { color: var(--x-accent) !important; }
.rich-editor > div:first-child { border-color: var(--x-line) !important; background: var(--x-panel); }

/* ─── INLINE COLOURS WRITTEN FOR WHITE PAPER ───────────────────────── */
/* Pages carry a few inline text colours picked for a white page (dark green
   "OK" pills, amber "info", red counts). Lift them to the Expedition hues. */
[style*="color:#15803d"],
[style*="color: #15803d"],
[style*="color:#166534"],
[style*="color: #166534"],
[style*="color:#16a34a"],
[style*="color: #16a34a"] { color: var(--x-green) !important; }
[style*="color:#b45309"],
[style*="color: #b45309"],
[style*="color:#92400e"],
[style*="color: #92400e"],
[style*="color:#9a5b00"],
[style*="color: #9a5b00"] { color: var(--x-amber) !important; }
[style*="color:#dc2626"],
[style*="color: #dc2626"],
[style*="color:#b91c1c"],
[style*="color: #b91c1c"],
[style*="color:#991b1b"],
[style*="color: #991b1b"] { color: var(--x-coral) !important; }
[style*="color:#0f172a"],
[style*="color: #0f172a"],
[style*="color:#0b0f19"],
[style*="color: #0b0f19"],
[style*="color:#1e293b"],
[style*="color: #1e293b"] { color: var(--x-bone) !important; }
[style*="color:#64748b"],
[style*="color: #64748b"],
[style*="color:#475569"],
[style*="color: #475569"] { color: var(--x-dim) !important; }
[style*="background:#fff; color:#4338ca"] { background: rgba(var(--x-accent-rgb), .14) !important; color: var(--x-accent) !important; }

/* ─── FOOTER ───────────────────────────────────────────────────────────── */

.footer.dx-foot {
  background: var(--x-ink) !important;
  border-top: 1px solid var(--x-line);
  position: relative;
}
.dx-work .footer.dx-foot { background: #0f1115 !important; }
.footer.dx-foot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 60% at 12% 0%, rgba(var(--x-accent-rgb), .07), transparent 70%);
  pointer-events: none;
}
.dx-foot .container { position: relative; }
.dx-foot-brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 1.4rem; }
.dx-foot-brand img { width: 52px; height: auto; display: block; }
.dx-foot-brand span {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--x-dim);
  padding-left: 14px;
  border-left: 1px solid var(--x-line-2);
}
.dx-foot p { color: var(--x-dim) !important; font-size: .95rem; max-width: 36ch; }
.dx-foot-h {
  font-family: var(--x-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--x-faint);
  margin: 0 0 .7rem;
}
.dx-foot .nav-link {
  color: var(--x-text) !important;
  font-size: .98rem;
}
.dx-foot .nav-link:hover { color: var(--x-accent) !important; }
.dx-foot-legal {
  max-width: none !important;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--x-faint);
  border-top: 1px solid var(--x-line);
  padding-top: 1.25rem;
}
.dx-foot-legal a { color: var(--x-dim); text-decoration: none; }
.dx-foot-legal a:hover { color: var(--x-accent); }

/* Back-to-top */
[data-bs-theme=dark] .btn-scroll-top {
  --si-btn-scroll-top-color: var(--x-bone);
  --si-btn-scroll-top-hover-color: var(--x-accent-ink);
  --si-btn-scroll-top-bg: var(--x-panel-2);
  --si-btn-scroll-top-hover-bg: var(--x-accent);
}
.btn-scroll-top-tooltip { font-family: var(--x-mono); font-size: 10px !important; letter-spacing: .2em; text-transform: uppercase; }

/* ─── MOTION ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ldr-ring, .ldr-needle { animation: none; }
  a.ext::after { transition: none; }
  a.ext:hover::after, a.ext:focus-visible::after { transform: none; }
  .rm-hero .btn-cta:hover, .rm-hero .btn-ghost:hover, .x-btn:hover { transform: none; }
}