/* ==========================================================================
   Draisap — WBAMS client-area & storefront theme
   The same design language as the WBAMS admin: Manrope, soft canvas, rounded
   cards, pill controls, 44×24 switches, hero page headers, light + dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --dr-font: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --dr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --dr-canvas: #f7f5f0;
    --dr-panel: #fdfcfa;
    --dr-surface: #ffffff;
    --dr-surface-2: #f7f5f0;
    --dr-soft: #f4f2ec;
    --dr-line: #e6e3dc;
    --dr-line-soft: #f0eee9;
    --dr-line-card: #ebe8e1;
    --dr-ink: #2b2a33;
    --dr-ink-2: #6b6a75;
    --dr-ink-3: #9a99a3;
    --dr-control-line: #dad8d1;

    --dr-accent: #4f56d9;
    --dr-accent-rgb: 79, 86, 217;
    --dr-accent-hover: #3a40b3;
    --dr-accent-tint: #ecebff;
    --dr-on-accent: #ffffff;

    --dr-ok: #1f7a4f;   --dr-ok-tint: #dff5e8;
    --dr-warn: #9a5a12; --dr-warn-tint: #ffefd6;
    --dr-bad: #b3323a;  --dr-bad-tint: #ffe3e3;
    --dr-info: #4f56d9; --dr-info-tint: #ecebff;
    --dr-teal: #0f766e; --dr-teal-tint: #d9f4f0;
    --dr-violet: #6d28d9; --dr-violet-tint: #ede9fe;
    --dr-amber: #b45309; --dr-amber-tint: #fff1d6;

    --dr-shadow-card: 0 1px 2px rgba(43, 42, 51, .03), 0 8px 24px rgba(43, 42, 51, .04);
    --dr-shadow-pop: 0 12px 32px rgba(43, 42, 51, .14);
    --dr-shadow-knob: 0 1px 3px rgba(43, 42, 51, .25);

    --dr-radius-card: 16px;
    --dr-radius-control: 12px;
    --dr-radius-pill: 999px;
    --dr-header-h: 72px;
    --dr-container: 1440px;

    color-scheme: light;
}

html[data-theme="dark"] {
    --dr-canvas: #1c1b22;
    --dr-panel: #22212a;
    --dr-surface: #26252e;
    --dr-surface-2: #2e2d38;
    --dr-soft: #2a2933;
    --dr-line: #3a3944;
    --dr-line-soft: #34333d;
    --dr-line-card: #34333d;
    --dr-ink: #f0eef8;
    --dr-ink-2: #a09fac;
    --dr-ink-3: #8a8996;
    --dr-control-line: #4a4955;

    --dr-accent: #8b91ff;
    --dr-accent-rgb: 139, 145, 255;
    --dr-accent-hover: #b0b4ff;
    --dr-accent-tint: #33346a;
    --dr-on-accent: #1c1b22;

    --dr-ok: #7fe0ac;   --dr-ok-tint: #1f3d2e;
    --dr-warn: #ffc27a; --dr-warn-tint: #3f2f17;
    --dr-bad: #ff9a9f;  --dr-bad-tint: #3f2226;
    --dr-info: #8b91ff; --dr-info-tint: #33346a;
    --dr-teal: #6fd6c8; --dr-teal-tint: #173b37;
    --dr-violet: #c4b5fd; --dr-violet-tint: #2e2450;
    --dr-amber: #fbbf77; --dr-amber-tint: #3f2f17;

    --dr-shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .28);
    --dr-shadow-pop: 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--dr-font); font-size: 14px; line-height: 1.55; color: var(--dr-ink); background: var(--dr-canvas); -webkit-font-smoothing: antialiased; }
body.dr-menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--dr-accent); text-decoration: none; }
a:hover { color: var(--dr-accent-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 800; line-height: 1.25; color: var(--dr-ink); letter-spacing: -.01em; }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 13px; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--dr-line); margin: 20px 0; }
small, .small { font-size: 12.5px; }
strong, b { font-weight: 800; }
code, pre, kbd { font-family: var(--dr-mono); font-size: 12.5px; }
pre { padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); overflow: auto; }
code { padding: 2px 6px; border-radius: 6px; background: var(--dr-soft); }
pre code { padding: 0; background: transparent; }
label { display: inline-block; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--dr-ink); }
table { border-collapse: collapse; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(var(--dr-accent-rgb), .35); outline-offset: 2px; }
::selection { background: rgba(var(--dr-accent-rgb), .22); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hidden, [hidden] { display: none !important; }
/* w-hidden must stay overridable by jQuery show()/slideDown() (inline style), so no !important; the tripled class keeps it above component rules */
.w-hidden.w-hidden.w-hidden { display: none; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
@media print { .d-print-none { display: none !important; } }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--dr-container); margin: 0 auto; padding: 0 24px; }
.container-fluid { width: 100%; padding: 0 24px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.row > [class*="col"] { padding: 0 10px; min-width: 0; }
.col, [class^="col-"], [class*=" col-"] { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; }
.col { flex: 1 1 0; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: none; }
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .d-sm-block { display: block !important; } .d-sm-none { display: none !important; } .d-sm-flex { display: flex !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-inline-flex { display: inline-flex !important; } }
@media (min-width: 768px) { .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; } .d-md-inline { display: inline !important; } .d-md-inline-flex { display: inline-flex !important; } }
@media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-inline-flex { display: inline-flex !important; } }
@media (min-width: 1200px) { .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .d-xl-block { display: block !important; } .d-xl-none { display: none !important; } .d-xl-flex { display: flex !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-inline-flex { display: inline-flex !important; } }
.offset-md-3 { margin-left: 25%; } .offset-md-2 { margin-left: 16.6667%; } .offset-lg-3 { margin-left: 25%; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; }
.m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 40px !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; } .mt-5 { margin-top: 40px !important; } .my-3 { margin-top: 16px !important; margin-bottom: 16px !important; } .my-4 { margin-top: 24px !important; margin-bottom: 24px !important; } .ml-1 { margin-left: 4px !important; } .ml-2 { margin-left: 8px !important; } .ml-3 { margin-left: 16px !important; } .mr-1 { margin-right: 4px !important; } .mr-2 { margin-right: 8px !important; } .mr-3 { margin-right: 16px !important; }
.p-0 { padding: 0 !important; } .p-2 { padding: 8px !important; } .p-3 { padding: 16px !important; } .p-4 { padding: 24px !important; } .px-2 { padding-left: 8px !important; padding-right: 8px !important; } .px-3 { padding-left: 16px !important; padding-right: 16px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; }
.text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; }
.text-muted { color: var(--dr-ink-2) !important; } .text-danger { color: var(--dr-bad) !important; } .text-success { color: var(--dr-ok) !important; } .text-warning { color: var(--dr-warn) !important; } .text-info, .text-primary { color: var(--dr-accent) !important; }
.font-weight-bold, .fw-700, .fw-800 { font-weight: 800 !important; } .font-weight-normal { font-weight: 500 !important; }
.align-items-center { align-items: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-column { flex-direction: column !important; } .flex-grow-1 { flex-grow: 1 !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; }
.pull-left, .float-left { float: left !important; } .pull-right, .float-right { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.position-relative { position: relative !important; }
.list-unstyled { list-style: none; margin: 0; padding: 0; }
.img-fluid, .img-responsive { max-width: 100%; height: auto; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-margin { margin: 0 !important; }
.top-margin-5 { margin-top: 5px; } .top-margin-10 { margin-top: 10px; } .top-margin-20 { margin-top: 20px; } .bottom-margin-10 { margin-bottom: 10px; } .bottom-margin-20 { margin-bottom: 20px; }
.margin-bottom { margin-bottom: 16px; }
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .25s ease; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.embed-responsive { position: relative; display: block; width: 100%; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; padding-top: 56.25%; }
.embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
.dr-shell { display: flex; flex-direction: column; min-height: 100vh; }
.dr-main { flex: 1; padding: 28px 0 56px; }
.dr-main--flush { padding: 0 0 56px; }

/* Header */
.dr-header { position: sticky; top: 0; z-index: 900; background: rgba(253, 252, 250, .86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--dr-line); }
html[data-theme="dark"] .dr-header { background: rgba(34, 33, 42, .86); }
.dr-header__inner { display: flex; align-items: center; gap: 18px; min-height: var(--dr-header-h); }
.dr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dr-ink); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
/* 62px inside the 72px header: 5px clear above and below. The source is 1662x601, so it
   renders 62x171 and is never upscaled. Raise --dr-header-h before raising this again. */
.dr-brand img { display: block; max-height: 62px; width: auto; }
.dr-brand img.dr-brand__logo--dark, img.dr-brand__logo--dark { display: none; }
html[data-theme="dark"] .dr-brand img.dr-brand__logo--dark, html[data-theme="dark"] img.dr-brand__logo--dark { display: block; }
html[data-theme="dark"] .dr-brand img.dr-brand__logo--light, html[data-theme="dark"] img.dr-brand__logo--light { display: none; }
.dr-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 15px; font-weight: 900; }
.dr-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; list-style: none; padding: 0; }
.dr-nav > li { position: relative; }
.dr-nav__link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 13px; border-radius: var(--dr-radius-pill); color: var(--dr-ink-2); font-weight: 700; font-size: 13.5px; transition: background .15s ease, color .15s ease; }
.dr-nav__link:hover, .dr-nav > li.is-active > .dr-nav__link, .dr-nav > li.show > .dr-nav__link { color: var(--dr-accent); background: var(--dr-accent-tint); }
/* Hover and "you are here" must not look the same, or the menu stops telling the visitor
   anything. That distinction used to be an underline; it is the weight now. The active
   item keeps the accent tint and accent text when nothing is hovered, and carries a
   heavier weight than any other item, so the pill alone says where you are. */
.dr-nav > li.is-active > .dr-nav__link { font-weight: 800; }
.dr-nav__link .badge { margin-left: 2px; }
.dr-nav__caret { font-size: 10px; opacity: .7; }
.dr-header__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink-2); font-size: 15px; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.dr-iconbtn:hover { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); background: var(--dr-accent-tint); }
.dr-iconbtn .fa-sun { display: none; }
html[data-theme="dark"] .dr-iconbtn .fa-sun { display: inline; }
html[data-theme="dark"] .dr-iconbtn .fa-moon { display: none; }
.dr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.dr-account-btn { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink); font-weight: 700; }
.dr-account-btn:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-ink); }
.dr-account-btn__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.dr-menu-toggle { display: none; }
@media (max-width: 991px) {
    .dr-nav, .dr-header__end .dr-account-btn__name, .dr-header__end .dr-lang-btn span { display: none; }
    .dr-menu-toggle { display: inline-flex; }
}

/* Dropdown menus (Bootstrap-compatible: .dropdown > .dropdown-menu with .show) */
.dropdown, .dropup, .btn-group { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; display: none; min-width: 220px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); }
.dropdown-menu.show, .dropdown.show > .dropdown-menu, .btn-group.show > .dropdown-menu, .dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu > li > a, .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--dr-ink); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-item:hover, .dropdown-item.active, .dropdown-menu > li.active > a { color: var(--dr-accent); background: var(--dr-accent-tint); }
.dropdown-item i, .dropdown-menu > li > a i { width: 16px; text-align: center; color: var(--dr-ink-3); }
.dropdown-item:hover i { color: inherit; }
.dropdown-divider { height: 1px; margin: 6px 4px; background: var(--dr-line); }
.dropdown-header { padding: 8px 12px 4px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-menu-profile { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--dr-line); }
.dr-menu-profile strong { display: block; font-size: 13.5px; }
.dr-menu-profile small { display: block; color: var(--dr-ink-2); font-size: 12px; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* Mobile drawer */
.dr-drawer { position: fixed; inset: 0; z-index: 1200; display: none; }
.dr-drawer.is-open { display: block; }
.dr-drawer__backdrop { position: absolute; inset: 0; background: rgba(20, 19, 26, .5); }
.dr-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); padding: 18px; overflow: auto; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); animation: drSlideIn .22s ease; }
@keyframes drSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.dr-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dr-drawer__nav { list-style: none; margin: 0; padding: 0; }
.dr-drawer__nav > li > a, .dr-drawer__nav > li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--dr-ink); font-weight: 700; text-align: left; }
.dr-drawer__nav > li > a:hover, .dr-drawer__nav > li > a.is-current, .dr-drawer__nav > li > button.is-current { background: var(--dr-accent-tint); color: var(--dr-accent); }
/* The drawer is the same navigation on a phone, so it says where the visitor is in the
   same way the header does. */
.dr-drawer__nav > li > a.is-current, .dr-drawer__nav > li > button.is-current { box-shadow: inset 3px 0 0 var(--dr-accent); }
.dr-drawer__nav .badge { margin-left: auto; }
.dr-drawer__sub { list-style: none; margin: 0 0 6px 20px; padding: 0 0 0 10px; border-left: 2px solid var(--dr-line); }
.dr-drawer__sub a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--dr-ink-2); font-weight: 600; font-size: 13px; }
.dr-drawer__sub a:hover, .dr-drawer__sub a.is-current { color: var(--dr-accent); background: var(--dr-accent-tint); }
.dr-drawer__sub a.is-current { font-weight: 800; }
.dr-drawer__section { margin: 14px 0 6px; padding: 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Banners (email verification / user validation / network notices) */
.dr-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: var(--dr-warn-tint); color: var(--dr-warn); margin: 18px 0 0; }
.dr-banner i { font-size: 16px; }
.dr-banner .text { flex: 1; min-width: 200px; font-weight: 600; }
.dr-banner .btn { margin-left: auto; }
.dr-banner .close { background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; opacity: .6; }

/* Hero page header (matches admin .wbams-ui-hero) */
.dr-hero__stat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 700; }
.dr-hero__stat i { color: var(--dr-accent); }

/* Breadcrumb */
.dr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 600; }
.dr-crumbs a { color: var(--dr-ink-2); }
.dr-crumbs a:hover { color: var(--dr-accent); }
.dr-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--dr-line); }
.dr-crumbs li.is-current { color: var(--dr-ink); }

/* Two-column layout with sidebar */
.dr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.dr-layout--side { grid-template-columns: 280px minmax(0, 1fr); }
.dr-layout--side-right { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1023px) { .dr-layout--side, .dr-layout--side-right { grid-template-columns: minmax(0, 1fr); } }
.dr-side { display: grid; gap: 16px; align-content: start; min-width: 0; }

/* The sidebar follows the height of the page beside it, instead of setting it.
   The tag cloud grows with the number of tags in the library, and on a short page -- the
   knowledgebase index, say -- it ran well past the bottom of the content, leaving a column
   of tags beside empty space and a page twice as long as it had anything to say.
   The aside contributes nothing to the row (height:0) and then fills whatever height the
   content column decided (min-height:100%), so the row is sized by the content alone.
   Only the tag cloud gives way: every other card keeps its natural height, because a card
   that already fits should never gain a scrollbar. On an article page the content is long,
   so the cloud simply has more room and scrolls less -- or not at all. */
.dr-layout--side { align-items: stretch; }
/* A flex column rather than the grid above: a grid row takes its content's height, so the
   card would overflow the aside instead of giving way. */
.dr-side { display: flex; flex-direction: column; height: 0; min-height: 100%; }
.dr-side > * { flex: none; }
/* The cards that may give way: a tag cloud and a list of months are both long lists that
   read the same at any height. Everything else keeps the height it asks for.
   They shrink, and only shrink -- flex-grow stays 0. Growing was the wrong half of the
   rule: on a long page the months card was stretched to the height of the story grid
   beside it, and because its list is a grid of auto rows, the free space was shared out
   between the rows and twelve months stood a finger's width apart down an empty column.
   A card that already fits keeps the height it asks for and leaves the rest of the
   aside empty. */
.dr-side > [data-menu-item-name*="Tag Cloud"],
.dr-side > [data-menu-item-name*="Months"] {
  flex: 0 1 auto; min-height: 180px; overflow: hidden;
  display: flex; flex-direction: column;
}
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__head,
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__foot,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__head,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__foot { flex: none; }
/* The scrolling part is the card's body, or the list itself where the card has no body. */
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__body,
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__list,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__body,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__list {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  /* The list is a grid. Left to itself a grid hands its spare height to the rows, so
     pack the rows at the top and let any spare height stay spare. */
  align-content: start;
  /* They still scroll by wheel, trackpad and touch; only the bar is hidden, and the last
     line fades out so the card still reads as scrollable. The fade sits over the bottom
     of the frame, not of the content, so the padding below keeps it off the last line
     whenever there is nothing more to see -- at the end of the scroll, and on a card
     short enough not to scroll at all. Reach the bottom and the fade goes out with the
     reason for it. */
  padding-bottom: 28px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__body::-webkit-scrollbar,
.dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__list::-webkit-scrollbar,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__body::-webkit-scrollbar,
.dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__list::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* The height trick only works while something in the aside can give way. A sidebar whose
   cards all keep their own height - the updates list on its last page, where three stories
   leave the column short - would otherwise be held at the content's height and spill its
   last card over the footer. Such a sidebar keeps its natural height instead, and the row
   grows to fit it. */
.dr-side:not(:has(> [data-menu-item-name*="Tag Cloud"], > [data-menu-item-name*="Months"])) { height: auto; min-height: 0; }
@supports not (selector(:has(*))) { .dr-side { height: auto; min-height: 0; } }

/* Stacked on a phone there is no column to match, so it keeps its own height. */
@media (max-width: 1023.98px) {
  .dr-side { height: auto; min-height: 0; }
  .dr-side > [data-menu-item-name*="Tag Cloud"],
  .dr-side > [data-menu-item-name*="Months"] { overflow: visible; }
  .dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__body,
  .dr-side > [data-menu-item-name*="Tag Cloud"] > .dr-sidecard__list,
  .dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__body,
  .dr-side > [data-menu-item-name*="Months"] > .dr-sidecard__list { overflow-y: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
}
.dr-content { min-width: 0; }

/* --------------------------------------------------------------------------
   5. Cards, sections, sidebar cards
   -------------------------------------------------------------------------- */
.card, .panel { position: relative; margin: 0 0 18px; padding: 20px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.card-body, .panel-body { padding: 0; }
.card-header, .panel-heading { margin: -20px -20px 16px; padding: 14px 20px; border-bottom: 1px solid var(--dr-line); border-radius: var(--dr-radius-card) var(--dr-radius-card) 0 0; background: var(--dr-soft); font-weight: 800; }
.card-footer, .panel-footer { margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--dr-line); border-radius: 0 0 var(--dr-radius-card) var(--dr-radius-card); background: var(--dr-soft); }
.card-title, .panel-title { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.well { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); }

/* Sidebar cards (menu sections) */
.dr-sidecard__link:hover i, .dr-sidecard__link.active i { color: inherit; }
.dr-sidecard__link.active { color: var(--dr-accent); background: var(--dr-accent-tint); font-weight: 800; }
.dr-sidecard__link.disabled { opacity: .5; pointer-events: none; }
.dr-sidecard__body .list-group { margin: 0; }

/* Stats row */
.dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; }
.dr-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); color: inherit; }
a.dr-stat:hover { border-color: rgba(var(--dr-accent-rgb), .4); }
.dr-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 16px; }
.dr-stat--green .dr-stat__icon { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-stat--amber .dr-stat__icon { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-stat--red .dr-stat__icon { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-stat--teal .dr-stat__icon { background: var(--dr-teal-tint); color: var(--dr-teal); }
.dr-stat--violet .dr-stat__icon { background: var(--dr-violet-tint); color: var(--dr-violet); }
.dr-stat__copy strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.dr-stat__copy span { display: block; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }

/* Tiles / link grids */
.dr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dr-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: border-color .15s ease, transform .15s ease; }
.dr-tile:hover { border-color: rgba(var(--dr-accent-rgb), .45); transform: translateY(-1px); color: var(--dr-ink); }
.dr-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--dr-accent-tint); color: var(--dr-accent); }
.dr-tile strong { display: block; font-size: 13.5px; }
.dr-tile small { display: block; color: var(--dr-ink-2); font-size: 12px; }
.dr-tile__arrow { margin-left: auto; color: var(--dr-ink-3); font-size: 12px; }

/* Empty state */

/* Definition / summary lists */

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn, .dr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink); font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; user-select: none; }
.btn:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); background: var(--dr-surface); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }
.btn-primary, .btn-success.dr-primary, .dr-btn--primary { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent); box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .25); }
.btn-primary:hover, .dr-btn--primary:hover { border-color: var(--dr-accent-hover); background: var(--dr-accent-hover); color: var(--dr-on-accent); }
.btn-success { border-color: var(--dr-ok); background: var(--dr-ok); color: #fff; }
.btn-success:hover { color: #fff; filter: brightness(1.08); background: var(--dr-ok); border-color: var(--dr-ok); }
.btn-danger { border-color: rgba(179, 50, 58, .3); background: var(--dr-bad-tint); color: var(--dr-bad); }
.btn-danger:hover { border-color: var(--dr-bad); background: var(--dr-bad); color: #fff; }
.btn-warning { border-color: rgba(154, 90, 18, .3); background: var(--dr-warn-tint); color: var(--dr-warn); }
.btn-warning:hover { background: var(--dr-warn); color: #fff; border-color: var(--dr-warn); }
.btn-info { border-color: rgba(var(--dr-accent-rgb), .3); background: var(--dr-accent-tint); color: var(--dr-accent); }
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary { border-color: var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); }
.btn-outline-primary { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); }
.btn-link { border-color: transparent; background: transparent; color: var(--dr-accent); box-shadow: none; padding-left: 8px; padding-right: 8px; }
.btn-link:hover { background: var(--dr-accent-tint); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm, .btn-xs { min-height: 32px; padding: 5px 13px; font-size: 12px; }
.btn-lg { min-height: 46px; padding: 10px 24px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.btn-group > .btn { flex: 0 0 auto; }
.btn .fa-spin { font-size: 12px; }
.btn i + span, .btn span + i { margin: 0; }
.close { float: right; padding: 0; border: 0; background: transparent; color: var(--dr-ink-3); font-size: 22px; font-weight: 700; line-height: 1; opacity: .7; }
.close:hover { color: var(--dr-ink); opacity: 1; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select, input[type="text"].dr-input, select.dr-input, textarea.dr-input { display: block; width: 100%; min-height: 42px; padding: 9px 14px; border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); background: var(--dr-surface); color: var(--dr-ink); font-size: 13.5px; line-height: 1.4; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; appearance: none; -webkit-appearance: none; }
.form-control::placeholder { color: var(--dr-ink-3); }
.form-control:focus { outline: 0; border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); }
.form-control:disabled, .form-control[readonly] { background: var(--dr-soft); color: var(--dr-ink-2); }
select.form-control:not([multiple]) { padding-right: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a99a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
select.form-control[multiple], select[size] { min-height: 120px; padding: 8px; }
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-control-sm, .input-sm { min-height: 34px; padding: 5px 12px; font-size: 12.5px; }
.form-control-lg, .input-lg { min-height: 48px; font-size: 15px; }
.form-group { margin-bottom: 16px; }
.form-group label, .control-label, .col-form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.form-text, .help-block, .form-help { display: block; margin-top: 6px; color: var(--dr-ink-2); font-size: 12px; }
.form-row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.form-row > .col, .form-row > [class*="col-"] { padding: 0 8px; }
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; min-width: 0; border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); }
.input-group-prepend, .input-group-append, .input-group-btn { display: flex; }
.input-group-prepend .input-group-text, .input-group-append .input-group-text, .input-group-addon { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--dr-control-line); background: var(--dr-soft); color: var(--dr-ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.input-group-prepend .input-group-text, .input-group-addon:first-child { border-right: 0; border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); }
.input-group-prepend + .form-control { border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; }
.input-group-append .input-group-text, .input-group-addon:last-child { border-left: 0; border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; }
.input-group-append .btn, .input-group-btn .btn { border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; min-height: 42px; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.has-error .form-control, .form-control.is-invalid, .form-control.error { border-color: var(--dr-bad); }
.has-error .help-block, .invalid-feedback, .field-error-msg { color: var(--dr-bad); font-size: 12px; }
.invalid-feedback { display: none; margin-top: 6px; }
.is-invalid ~ .invalid-feedback, .has-error .invalid-feedback { display: block; }
.has-success .form-control, .form-control.is-valid { border-color: var(--dr-ok); }
.form-control-feedback { display: none; }

/* Checkbox / radio: admin switch for standalone checkboxes, styled boxes otherwise */
input[type="checkbox"]:not(.dr-switch):not(.wbams-ui-slide), input[type="radio"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--dr-accent); cursor: pointer; }
.checkbox, .radio { position: relative; display: block; margin: 0 0 10px; }
.checkbox label, .radio label, .form-check-label, .checkbox-inline, .radio-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-left: 14px; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-check-input { margin: 0; }
/* the 44×24 switch */
.custom-control { display: flex; align-items: center; gap: 10px; }
.custom-control-label { margin: 0; font-weight: 600; }
.custom-control-label::before, .custom-control-label::after { display: none; }
/* choice cards (radio tiles) */
/* field grids like the admin */
.dr-field--wide { grid-column: 1 / -1; }
/* password strength meter */
.dr-pw { margin-top: 8px; }
.dr-pw .progress { height: 8px; }
.dr-pw__label { margin-top: 4px; font-size: 12px; color: var(--dr-ink-2); }
.progress { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--dr-soft); }
.progress-bar { display: flex; align-items: center; justify-content: center; background: var(--dr-accent); color: #fff; font-size: 10px; transition: width .3s ease; }
.progress-bar-danger, .progress-bar.bg-danger { background: var(--dr-bad); } .progress-bar-warning, .progress-bar.bg-warning { background: var(--dr-warn); } .progress-bar-success, .progress-bar.bg-success { background: var(--dr-ok); }
/* intl-tel-input tweaks */
.iti { width: 100%; }
.iti__flag-container, .iti .selected-flag { border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); }
/* selectize / select2 */
.selectize-input, .select2-container .select2-selection--single { min-height: 42px; padding: 8px 14px; border: 1px solid var(--dr-control-line) !important; border-radius: var(--dr-radius-control) !important; background: var(--dr-surface) !important; color: var(--dr-ink); box-shadow: none !important; }
.selectize-dropdown, .select2-dropdown { border: 1px solid var(--dr-line) !important; border-radius: 12px !important; background: var(--dr-surface) !important; color: var(--dr-ink); box-shadow: var(--dr-shadow-pop); overflow: hidden; }
.selectize-dropdown .option:hover, .selectize-dropdown .option.active, .select2-results__option--highlighted { background: var(--dr-accent-tint) !important; color: var(--dr-accent) !important; }
.select2-container .select2-selection--single .select2-selection__rendered { color: var(--dr-ink); line-height: 24px; padding: 0; }
.select2-container .select2-selection--single .select2-selection__arrow { top: 8px; right: 8px; }
.select2-results__option { padding: 8px 12px; }
/* generate password */
.dr-generate { display: flex; gap: 8px; align-items: flex-start; }
.dr-generate .form-control { flex: 1; }

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.dr-table-shell, .table-container, .table-responsive { width: 100%; overflow-x: auto; border-radius: 12px; }
.table, .dr-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table > thead > tr > th, .dr-table > thead > tr > th { padding: 10px 12px; border-bottom: 1px solid var(--dr-line); color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; background: transparent; }
.table > tbody > tr > td, .dr-table > tbody > tr > td { padding: 12px; border-bottom: 1px solid var(--dr-line-soft); vertical-align: middle; color: var(--dr-ink); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--dr-soft); }
.table > tbody > tr > td:first-child, .table > thead > tr > th:first-child { padding-left: 16px; }
.table > tbody > tr > td:last-child, .table > thead > tr > th:last-child { padding-right: 16px; }
.table td.text-right, .table th.text-right { text-align: right; }
.table td.text-center, .table th.text-center { text-align: center; }
.table .btn { min-height: 34px; padding: 5px 13px; font-size: 12px; }
.table-striped > tbody > tr:nth-child(odd) > td { background: transparent; }
.table-hover > tbody > tr:hover > td { background: var(--dr-soft); }
.dr-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.dr-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12.5px; }
/* datatables */
.dataTables_wrapper { width: 100%; }
.dataTables_wrapper .listtable { padding: 0 0 4px; }
.dataTables_filter { margin: 0 0 12px; }
.dataTables_filter label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dataTables_filter input { min-height: 40px; padding: 8px 14px; border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); background: var(--dr-surface); color: var(--dr-ink); }
.dataTables_info { padding: 12px 0 0; color: var(--dr-ink-2); font-size: 12.5px; }
.dataTables_length { float: right; padding-top: 12px; font-size: 12.5px; color: var(--dr-ink-2); }
.dataTables_length select { margin: 0 6px; min-height: 32px; padding: 3px 26px 3px 10px; border: 1px solid var(--dr-control-line); border-radius: 9px; background: var(--dr-surface); color: var(--dr-ink); }
.dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; }
/* DataTables (bootstrap4 build) renders li.paginate_button > a.page-link — only the anchor is the button; the li stays plain, otherwise it reads as a button inside a button */
.dataTables_paginate .paginate_button, .pagination > li { display: inline-flex; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.dataTables_paginate a.paginate_button, .dataTables_paginate span > a, .pagination .page-link, .pagination > li > a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--dr-line); border-radius: 10px; background: var(--dr-surface); color: var(--dr-ink-2) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dataTables_paginate a.paginate_button:hover, .pagination .page-link:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent) !important; background: var(--dr-surface); }
.dataTables_paginate a.paginate_button.current, .pagination .active .page-link, .pagination > li.active > a, .pagination > li.paginate_button.active > a { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent) !important; }
.dataTables_paginate a.paginate_button.disabled, .pagination .disabled .page-link, .pagination > li.disabled > a { opacity: .45; pointer-events: none; }
.dataTables_paginate .ellipsis { padding: 0 6px; align-self: center; }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; background-image: none !important; }
/* The arrow characters are not in the Roboto subset the theme loads, so the browser
   substituted a glyph that reads as a stray pipe next to the sorted column. Draw the
   caret instead of asking for a character. */
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 7px;
    vertical-align: middle;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}
table.dataTable thead .sorting_asc::after { border-bottom: 5px solid currentColor; }
table.dataTable thead .sorting_desc::after { border-top: 5px solid currentColor; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable > tbody > tr.child ul.dtr-details { margin: 0; }
tr.child td.child { background: var(--dr-soft); }
.dtr-details { list-style: none; padding: 0; }
.dtr-details li { padding: 4px 0; }
.dtr-title { font-weight: 700; margin-right: 6px; }
.table-list.table-list tr td:first-child { padding-left: 16px; }

/* --------------------------------------------------------------------------
   9. Badges, pills, alerts, labels
   -------------------------------------------------------------------------- */
.badge, .label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; vertical-align: middle; white-space: nowrap; }
.badge-primary, .label-primary, .badge-info, .label-info, .badge-secondary { background: var(--dr-accent-tint); color: var(--dr-accent); }
.badge-success, .label-success { background: var(--dr-ok-tint); color: var(--dr-ok); }
.badge-warning, .label-warning { background: var(--dr-warn-tint); color: var(--dr-warn); }
.badge-danger, .label-danger { background: var(--dr-bad-tint); color: var(--dr-bad); }
.badge-default, .label-default, .badge-light { background: var(--dr-soft); color: var(--dr-ink-2); }
/* Legacy status color classes emitted by the engine */
.status-active, .status-paid, .status-open, .status-completed { color: var(--dr-ok); }
.status-pending, .status-unpaid, .status-customer-reply { color: var(--dr-warn); }
.status-suspended, .status-canceled, .status-terminated, .status-overdue, .status-fraud, .status-expired { color: var(--dr-bad); }
.alert { position: relative; display: block; margin: 0 0 18px; padding: 13px 16px 13px 42px; border: 1px solid transparent; border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.5; background: var(--dr-info-tint); color: var(--dr-info); }
.alert::before { position: absolute; left: 16px; top: 14px; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro"; font-weight: 900; content: "\f05a"; }
.alert > .btn, .alert > a.btn { float: none; flex: none; margin: 0 0 0 auto; }
/* an alert that carries an action becomes a flex row: text shrinks, the button stays on the line (stacks only on phones) */
.alert:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.alert:has(> .btn) > div, .alert:has(> .btn) > span, .alert:has(> .btn) > p { flex: 1 1 280px; min-width: 0; }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--dr-ok-tint); color: var(--dr-ok); } .alert-success::before { content: "\f058"; }
.alert-warning { background: var(--dr-warn-tint); color: var(--dr-warn); } .alert-warning::before { content: "\f071"; }
.alert-danger, .alert-error { background: var(--dr-bad-tint); color: var(--dr-bad); } .alert-danger::before, .alert-error::before { content: "\f057"; }
.alert-info { background: var(--dr-info-tint); color: var(--dr-info); }
.alert > div, .alert > span, .alert > p { flex: 1; }
.alert h2, .alert h4, .alert strong { color: inherit; font-size: 14px; margin: 0 0 4px; }
.alert ul { margin: 6px 0 0 18px; padding: 0; }
.alert .close { margin-left: auto; color: inherit; }
.alert a { color: inherit; text-decoration: underline; }
.alert.alert-dismissible { padding-right: 40px; }
.dr-note { display: flex; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 13.5px; line-height: 1.6; }
.dr-note > :last-child { margin-bottom: 0; }
.dr-note i { color: var(--dr-accent); margin-top: 2px; }
.dr-note--ok { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-note--ok i { color: var(--dr-ok); }
.dr-note--bad { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-note--bad i { color: var(--dr-bad); }
.dr-note--info { background: var(--dr-accent-tint, var(--dr-soft)); color: var(--dr-ink-2); }
.dr-note strong { color: inherit; }

/* --------------------------------------------------------------------------
   10. Tabs, list groups, nav pills
   -------------------------------------------------------------------------- */
.nav-tabs, .dr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; border-bottom: 0; }
.nav-tabs > li > a, .nav-tabs .nav-link, .dr-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink-2); font-size: 13px; font-weight: 700; }
.nav-tabs > li.active > a, .nav-tabs .nav-link.active, .nav-tabs > li > a:hover, .dr-tabs a.active, .dr-tabs a:hover { border-color: var(--dr-accent); color: var(--dr-accent); background: var(--dr-accent-tint); }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.nav-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.nav-pills .nav-link, .nav-pills > li > a { padding: 8px 14px; border-radius: var(--dr-radius-pill); color: var(--dr-ink-2); font-weight: 700; }
.nav-pills .nav-link.active, .nav-pills > li.active > a { color: var(--dr-accent); background: var(--dr-accent-tint); }
.list-group { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.list-group-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 11px; background: var(--dr-surface); color: var(--dr-ink); font-size: 13px; font-weight: 600; }
a.list-group-item:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); }
.list-group-item.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); color: var(--dr-accent); }
.list-group-item .badge { margin-left: auto; }
.list-group-item-success { background: var(--dr-ok-tint); color: var(--dr-ok); border-color: transparent; }
.list-group-item-danger { background: var(--dr-bad-tint); color: var(--dr-bad); border-color: transparent; }
.list-group-item-warning { background: var(--dr-warn-tint); color: var(--dr-warn); border-color: transparent; }

/* --------------------------------------------------------------------------
   11. Modals (Bootstrap JS compatible)
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1400; display: none; overflow: auto; outline: 0; -webkit-overflow-scrolling: touch; }
.modal.show, .modal.in { display: block; }
.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1390; background: rgba(20, 19, 26, .55); backdrop-filter: blur(2px); }
.modal-backdrop.fade { opacity: 0; } .modal-backdrop.show, .modal-backdrop.in { opacity: 1; }
.modal-dialog { position: relative; width: auto; max-width: 560px; margin: 6vh auto; padding: 0 16px; }
.modal-lg { max-width: 860px; } .modal-sm { max-width: 400px; }
.modal.fade .modal-dialog { transform: translateY(-12px); transition: transform .2s ease; }
.modal.show .modal-dialog, .modal.in .modal-dialog { transform: none; }
.modal-content { position: relative; display: flex; flex-direction: column; border: 1px solid var(--dr-line); border-radius: 18px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--dr-line); }
.modal-title { margin: 0; font-size: 16px; font-weight: 800; }
.modal-body { padding: 20px 22px; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); }
.modal-footer .loader { margin-right: auto; color: var(--dr-ink-2); font-size: 12.5px; }
.modal-body .alert:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.dr-footer { border-top: 1px solid var(--dr-line); background: var(--dr-panel); padding: 34px 0 26px; color: var(--dr-ink-2); font-size: 13px; }
.dr-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(160px, .7fr); gap: 28px 32px; align-items: start; margin-bottom: 26px; }
.dr-footer__brand { flex: 1 1 260px; max-width: 380px; }
.dr-footer__col { flex: 1 1 140px; min-width: 0; }
.dr-footer__brand p { margin: 10px 0 0; max-width: 360px; }
/* The footer logo fills its column rather than sitting at the header's size. It reuses
   .dr-brand, so without this it inherits the header's max-height and reads as a small
   mark adrift in a wide column. Scoped to the footer: the header, auth, doc and oauth
   bars all use .dr-brand too and want their own sizes. */
.dr-footer__brand .dr-brand { display: block; width: 100%; }
.dr-footer__brand .dr-brand img { width: 100%; max-width: 100%; height: auto; max-height: none; }
.dr-footer__col strong { display: block; margin-bottom: 10px; color: var(--dr-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-footer__col a, .dr-footer__col span { display: block; padding: 4px 0; color: var(--dr-ink-2); font-weight: 600; }
.dr-footer__col a:hover { color: var(--dr-accent); }
.dr-footer__social { display: flex; gap: 8px; margin-top: 14px; }
.dr-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--dr-line); border-radius: 999px; color: var(--dr-ink-2); }
.dr-footer__social a:hover { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); }
.dr-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--dr-line); font-size: 12.5px; }
.dr-footer__bar a { color: var(--dr-ink-2); font-weight: 600; margin-left: 14px; }
.dr-footer__bar a:hover { color: var(--dr-accent); }
@media (max-width: 520px) { .dr-footer__brand { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   13. Auth pages (sign in / register / reset)
   -------------------------------------------------------------------------- */
.dr-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--dr-canvas); }
.dr-auth__frame { display: grid; grid-template-columns: minmax(0, 1fr); width: min(1080px, 100%); margin: auto; padding: 24px; }
.dr-auth__card { display: grid; grid-template-columns: 5fr 7fr; overflow: hidden; border: 1px solid var(--dr-line-card); border-radius: 24px; background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.dr-auth__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; padding: 34px; background: linear-gradient(160deg, var(--dr-accent-tint), var(--dr-surface) 75%); border-right: 1px solid var(--dr-line-soft); }
.dr-auth__brand { display: flex; align-items: center; gap: 10px; }
/* The sign-in panel is a brand panel, so the mark runs the width of it rather than
   sitting at header size in the corner. max-height has to go with it: .dr-brand img
   caps every logo at 62px for the site header, and that cap would otherwise decide
   the height here and leave the logo narrower than the panel. */
.dr-auth__brand { display: block; }
.dr-auth__brand img { width: 100%; height: auto; max-height: none; }
.dr-auth__aside-copy .dr-hero__eyebrow { color: var(--dr-accent); }
.dr-auth__aside-copy h2 { font-size: 24px; margin: 4px 0 8px; }
.dr-auth__aside-copy p { color: var(--dr-ink-2); font-size: 13.5px; max-width: 320px; }
.dr-auth__points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.dr-auth__points li { display: flex; align-items: flex-start; gap: 10px; color: var(--dr-ink-2); font-size: 13px; font-weight: 600; }
.dr-auth__points i { color: var(--dr-accent); margin-top: 3px; }
.dr-auth__main { padding: 38px 40px; }
.dr-auth__main h1 { font-size: 24px; margin: 4px 0 6px; }
.dr-auth__main > p.dr-auth__lead { color: var(--dr-ink-2); margin-bottom: 22px; }
.dr-auth__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.dr-auth__alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dr-line); color: var(--dr-ink-2); font-size: 13px; }
.dr-auth__providers { display: grid; gap: 8px; margin-top: 14px; }
.dr-auth__providers .btn { width: 100%; }

/* A field that shares its row with another field fills the card between them; one left alone
   in a 1700px card just leaves a hole beside it. So the address and its password go side by
   side, and dr-fields does the responsive part -- two columns, one below 760px.

   dr-field--end holds whatever shares the row with a field -- a switch, a line of help -- and
   puts it on the input's own midline. Two pieces do that, and neither guesses:

   The ::before is a hidden non-breaking space carrying the label's exact typography and margin,
   so the browser measures the label's height for us and the column starts where the input does.
   A label that changes size later takes this with it; a hard-coded offset would not.

   The content then centres inside one control's height, which is the 42px min-height every
   .form-control in this theme has. Centring on the whole column instead would land halfway down
   the input AND its help line, which is what left the switch sitting under the box. */
.dr-field--end { display: flex; flex-direction: column; }
.dr-field--end::before {
    content: "\00a0";
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    visibility: hidden;
}
.dr-field--end > .dr-switch-row,
.dr-field--end > small {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 0;
}
.dr-field--end > small { color: var(--dr-ink-2); font-size: 12px; }
/* Stacked, there is no input beside it to line up with, so the spacer only adds a gap. */
@media (max-width: 760px) {
    .dr-field--end::before { display: none; }
    .dr-field--end > .dr-switch-row,
    .dr-field--end > small { min-height: 0; }
}

/* Google renders its own button into .wbams-gsi, so nothing here paints a border or a
   background: a box drawn around a button that already has one is the control-in-control
   the rest of this stylesheet avoids, and it was what left Google's pill stranded in the
   middle of an empty frame. The colour, the logo and the wording stay Google's.

   Width and height are ours. Google's own width option stops at 400px, which is narrower
   than this card, so the button sat short of the Login button above it; these rules carry
   it the rest of the way and match the Login button's height and radius, so the two read
   as one stack rather than two sizes. !important is needed because Google writes the
   400px as an inline style on the element it renders. */
.wbams-gsi { display: flex; justify-content: center; width: 100%; max-width: 100%; }
.wbams-gsi > div,
.wbams-gsi > div > div,
.wbams-gsi [role="button"] { width: 100% !important; max-width: 100% !important; }
.wbams-gsi [role="button"] { height: 46px !important; border-radius: 999px !important; }
/* Once Google's script loads, the button is drawn inside an iframe (420 x 44, fixed by Google).
   The iframe's document is light, so on a dark page the browser painted its canvas white and
   the pill sat in a white box. Declaring the frame light lets its own transparent background
   show through; auto side margins center the fixed-width frame under the Login button. */
.wbams-gsi iframe { color-scheme: light !important; background: transparent !important; margin: -2px auto !important; }
.dr-auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--dr-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dr-auth__or::before, .dr-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--dr-line); }
.dr-auth--narrow .dr-auth__card { grid-template-columns: minmax(0, 1fr); width: min(520px, 100%); margin: 0 auto; }
.dr-auth--narrow .dr-auth__card--wide { width: min(760px, 100%); }
@media (max-width: 860px) { .dr-auth__card { grid-template-columns: minmax(0, 1fr); } .dr-auth__aside { border-right: 0; border-bottom: 1px solid var(--dr-line-soft); padding: 26px; } .dr-auth__main { padding: 26px; } }

/* --------------------------------------------------------------------------
   14. Client-area specifics
   -------------------------------------------------------------------------- */
.dr-list { display: grid; gap: 10px; }
/* Invoice / quote document view */
.dr-doc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; margin-bottom: 20px; }
.dr-doc__title { font-size: 26px; margin: 0; }
.dr-doc__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dr-doc__amount { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dr-doc__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dr-line-soft); }
.dr-doc__party strong { display: block; margin-bottom: 6px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-doc__party address { font-style: normal; line-height: 1.6; color: var(--dr-ink-2); }
.dr-doc__party address b { color: var(--dr-ink); }
.dr-doc__totals { margin-left: auto; width: min(360px, 100%); }
.dr-doc__totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 16px; /* same side padding as the table cells above so amounts line up */ border-bottom: 1px solid var(--dr-line-soft); font-size: 13.5px; }
.dr-doc__totals > div.is-total { border-top: 2px solid var(--dr-ink); border-bottom: 0; margin-top: 4px; padding-top: 12px; font-size: 16px; font-weight: 800; }
.dr-doc__totals > div:has(+ .is-total) { border-bottom: 0; } /* one rule above the total, not two */
.dr-doc__totals span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Ticket thread */
.dr-thread { display: grid; gap: 14px; }
.dr-msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--dr-line-card); border-radius: 16px; background: var(--dr-surface); }
.dr-msg--staff { background: var(--dr-accent-tint); border-color: rgba(var(--dr-accent-rgb), .25); }
.dr-msg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--dr-surface); color: var(--dr-accent); font-weight: 800; border: 1px solid var(--dr-line); }
.dr-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; }
.dr-msg__head strong { font-size: 14px; }
.dr-msg__head small { color: var(--dr-ink-2); font-size: 12px; }
.dr-msg__body { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.dr-msg__body p:last-child { margin-bottom: 0; }
.dr-msg__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dr-msg__attachments a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--dr-line); border-radius: 999px; font-size: 12px; font-weight: 700; }
.dr-attach { display: grid; gap: 8px; }
.dr-attach input[type="file"] { padding: 8px 10px; }
/* Product / service cards */
.dr-service { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
/* KB */
.dr-search { display: flex; gap: 8px; }
.dr-search .form-control { flex: 1; }
/* Homepage */
.dr-home-hero { padding: 64px 0 40px; text-align: center; }
.dr-home-hero h1 { font-size: clamp(30px, 4.5vw, 46px); margin: 0 0 12px; letter-spacing: -.02em; }
.dr-home-hero p { max-width: 640px; margin: 0 auto 22px; color: var(--dr-ink-2); font-size: 16px; }
.dr-home-hero .dr-actions { justify-content: center; }
.dr-section { padding: 26px 0; }
.dr-section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dr-section__head h2 { margin: 0; font-size: 22px; }
.dr-section__head p { margin: 4px 0 0; color: var(--dr-ink-2); }
.dr-feature { text-align: left; }
.dr-feature .dr-card__icon { width: 44px; height: 44px; margin-bottom: 12px; }
.dr-feature h3 { font-size: 16px; }
.dr-feature p { color: var(--dr-ink-2); margin: 0; font-size: 13.5px; }
/* Checkout wrappers */
.dr-cart { --dr-container: 1440px; }
.dr-cart .sidebar, .dr-cart .cart-sidebar { position: sticky; top: calc(var(--dr-header-h) + 18px); }
/* Steps */
.dr-steps { display: flex; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.dr-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 700; }
.dr-steps li.is-active { background: var(--dr-accent-tint); color: var(--dr-accent); }
.dr-steps li.is-done { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: currentColor; color: var(--dr-surface); font-size: 11px; }
.dr-steps li span b { color: var(--dr-surface); }

/* --------------------------------------------------------------------------
   15. Misc legacy compat (engine-generated markup & fallback templates)
   -------------------------------------------------------------------------- */
.header-lined h1 { font-size: 24px; }
.header-lined { margin-bottom: 18px; }
.tiles .tile { padding: 14px; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); }
.item-selector .item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 12px; color: var(--dr-ink); font-weight: 600; margin-bottom: 8px; }
.item-selector .item.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); color: var(--dr-accent); }
.item-selector .item img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; }
.loader.w-hidden { display: none; }
.spanner { display: none; }
.text-white { color: #fff !important; }
.bg-primary { background: var(--dr-accent) !important; color: var(--dr-on-accent) !important; }
.bg-light { background: var(--dr-soft) !important; }
.border-top { border-top: 1px solid var(--dr-line) !important; }
.rounded { border-radius: var(--dr-radius-control) !important; }
.shadow-sm { box-shadow: var(--dr-shadow-card) !important; }
.disable-on-click.disabled { opacity: .6; }
.tooltip { position: absolute; z-index: 1500; padding: 6px 10px; border-radius: 8px; background: var(--dr-ink); color: var(--dr-canvas); font-size: 12px; font-weight: 600; opacity: 0; }
.tooltip.show, .tooltip.in { opacity: 1; }
.tooltip .arrow { display: none; }
.popover { position: absolute; z-index: 1500; max-width: 300px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); font-size: 12.5px; }
.growl, .jGrowl { font-family: var(--dr-font); }
#growls { z-index: 2000; }
.growl { border-radius: 14px !important; box-shadow: var(--dr-shadow-pop) !important; }
.swal2-popup { font-family: var(--dr-font) !important; border-radius: 18px !important; background: var(--dr-surface) !important; color: var(--dr-ink) !important; }
.swal2-styled { border-radius: 999px !important; font-weight: 800 !important; }
.markdown-editor .btn-toolbar .btn { min-height: 30px; padding: 3px 9px; }
.md-editor { border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); overflow: hidden; }
.md-editor > .md-header { background: var(--dr-soft); padding: 6px; }
.md-editor > textarea { border: 0; border-top: 1px solid var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); padding: 12px 14px; }
.md-editor.active { border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); }
.md-editor .btn-group { gap: 2px; }
.md-editor .btn-default { min-height: 30px; padding: 2px 8px; border-radius: 8px; font-size: 12px; }
.attachments-container, .attachment-list { display: grid; gap: 8px; }
img.captcha { border-radius: 8px; }
.grecaptcha-badge { visibility: hidden; }
/* print */
@media print { body { background: #fff; } .dr-header, .dr-footer, .dr-side, .dr-hero__tools, .dr-crumbs, .wbams-powered-by, .dr-partners, .cc-window, .dr-admin-bar, .dr-kb-section, .dr-article__foot, .dr-kb-toc, .dr-kb-helpful, .dr-kb-article__tools, .dr-newsroom__bar, #disqus_thread { display: none !important; } .dr-article, .dr-kb-article-card { break-inside: auto; } .dr-article__media img { max-height: 300px; } .dr-kb-article__layout { display: block; } .dr-card { box-shadow: none; border-color: #ddd; } .dr-layout { display: block; } .dr-layout--side-right > div:first-child, .dr-doc { width: 100%; }
  /* document pages (invoice, quote, billing note) carry their own title — the page hero is redundant on paper and its tinted icon prints badly */
  body[data-templatefile="invoice"] .dr-hero, body[data-templatefile="quote"] .dr-hero, body[data-templatefile="billing-note"] .dr-hero { display: none !important; }
  .dr-hero .dr-hero__icon { display: none !important; }
  .dr-pill, .dr-doc__status .dr-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1.5px solid currentColor; }
  .dr-doc__status .dr-pill--lg { font-size: 15px; padding: 7px 16px; } }

/* --------------------------------------------------------------------------
   14. Page-level additions (client area, documents, KB, news, donations)
   -------------------------------------------------------------------------- */
.dr-form-section { margin: 22px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-ink-3); }
.dr-form-section:first-child { margin-top: 0; }
.dr-subheader { margin: 0 0 12px; font-size: 16px; }
.dr-lead { margin: 0 0 18px; color: var(--dr-ink-2); font-size: 14.5px; }
.dr-stat__copy small { display: block; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-auth__card--wide { grid-template-columns: 4fr 8fr; }
.dr-auth__card--wide .dr-auth__main { padding: 34px 36px; }
.dr-code { margin: 12px 0 16px; padding: 16px; border: 1px dashed rgba(var(--dr-accent-rgb), .5); border-radius: var(--dr-radius-control); background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 26px; font-weight: 800; letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; }
.dr-twofa-challenge { margin-bottom: 10px; }
.dr-twofa-challenge .form-control { min-height: 46px; font-size: 16px; }
.dr-card__icon--lg { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.dr-service__name { font-size: 20px; }
.dr-service__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 640px) { .dr-service { grid-template-columns: 44px minmax(0, 1fr); } .dr-service__side { grid-column: 1 / -1; flex-direction: row; align-items: center; } }
.dr-facts--bordered { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); }
.dr-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.dr-home-grid__wide { grid-column: 1 / -1; }
.dr-home-grid__col { min-width: 0; }
@media (max-width: 900px) { .dr-home-grid { grid-template-columns: minmax(0, 1fr); } }
.dr-home-panel__body { font-size: 13.5px; color: var(--dr-ink-2); }
.dr-home-panel__body p:last-child { margin-bottom: 0; }
.dr-home-panel__body form .form-control { margin-bottom: 8px; }
.dr-home-list { display: grid; gap: 4px; }
.dr-home-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--dr-ink); font-size: 13.5px; }
.dr-home-list__item > i:first-child { width: 18px; text-align: center; color: var(--dr-ink-3); }
a.dr-home-list__item:hover { background: var(--dr-accent-tint); color: var(--dr-accent); }
.dr-home-list__label { flex: 1; min-width: 0; }
.dr-home-list__label .list-group-item-content, .dr-home-list__label .div-service-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dr-home-list__label .list-group-item-name, .dr-home-list__label .div-service-name { flex: 1 1 200px; min-width: 0; }
.dr-home-list__label .list-group-item-group, .dr-home-list__label .service-group-name { display: block; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dr-home-list__label .list-group-item-fullname, .dr-home-list__label .service-name { font-weight: 700; }
.dr-home-list__label .list-group-item-status, .dr-home-list__label .div-service-status, .dr-home-list__label .div-service-expiry { color: var(--dr-ink-2); font-size: 12px; }
.dr-home-list__label .list-group-item-actions .btn, .dr-home-list__label .div-service-buttons .btn { min-height: 30px; padding: 3px 10px; font-size: 11.5px; }
.dr-home-list__label .label, .dr-home-list__label .status { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--dr-soft); color: inherit; font-size: 11px; font-weight: 800; }
.dr-home-list__label .text-last-updated, .dr-home-list__label small { color: var(--dr-ink-2); font-size: 12px; }
.dr-home-list__arrow { color: var(--dr-ink-3); font-size: 11px; }
.dr-table__actions { width: 1%; white-space: nowrap; text-align: right; }
.dr-table__actions .dr-iconbtn { width: 34px; height: 34px; }
.dr-table tbody tr[onclick] { cursor: pointer; }
.dr-table tfoot th { padding: 12px; border-top: 2px solid var(--dr-line); font-size: 13px; }
.dr-table > tfoot > tr > th:first-child { padding-left: 16px; }
.dr-table > tfoot > tr > th:last-child { padding-right: 16px; }
.dr-pill--lg { padding: 8px 16px; font-size: 14px; }
.dr-doc__brand { display: inline-flex; margin-bottom: 14px; }
.dr-doc__brand img { max-height: 36px; }
.dr-pay-card__amount { margin: 4px 0 14px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.dr-pay-card__amount--sm { font-size: 22px; }
.dr-pay-card__label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; }
.dr-pay-card .payment-form { margin-top: 10px; }
.dr-pay-card .payment-form form { margin: 0; }
.dr-pay-card .payment-form .btn, .dr-pay-card .payment-form input[type="submit"], .dr-pay-card .payment-form button { width: 100%; }
.dr-requestor { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); }
.dr-tile__copy { flex: 1; min-width: 0; }
.dr-tiles--depts .dr-tile { padding: 16px 18px; }
.dr-tile--stack { flex-direction: column; align-items: flex-start; padding: 20px; }
.dr-tile--stack .dr-tile__copy small { margin-top: 4px; }
.dr-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dr-kb-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dr-line-soft); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-kb-article__meta a { color: var(--dr-ink-2); }
.dr-kb-article__meta .dr-iconbtn { width: 34px; height: 34px; }
.dr-kb-article h1, .dr-kb-article h2, .dr-kb-article h3 { margin-top: 1.4em; }
.dr-kb-article > :first-child { margin-top: 0; }
/* Updates as a newsroom. The newest update is the lead story - picture beside a large
   title - and the rest are cover cards in a grid. An update without a picture gets a
   generated cover: a toned panel with a big faded icon and the month, so the room
   never shows a grey box. */
.dr-newsroom { display: grid; gap: 18px; margin-bottom: 18px; }
.dr-newsroom__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; }
.dr-newsroom__count i { margin-right: 4px; color: var(--dr-accent); }
.dr-newsroom__rss { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12px; }
.dr-newsroom__rss:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); text-decoration: none; }
.dr-newsroom__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.dr-news__item { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dr-news__item:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); }
.dr-news__media { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dr-soft); }
.dr-news__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dr-news__item:hover .dr-news__media img { transform: scale(1.04); }
.dr-news__flag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .3); }
/* generated covers */
.dr-news__media--cover { --cover-a: var(--dr-accent-tint); --cover-b: var(--dr-violet-tint); --cover-ink: var(--dr-accent); background: linear-gradient(135deg, var(--cover-a), var(--cover-b)); }
.dr-news__item--tone-1 .dr-news__media--cover { --cover-a: var(--dr-teal-tint); --cover-b: var(--dr-info-tint); --cover-ink: var(--dr-teal); }
.dr-news__item--tone-2 .dr-news__media--cover { --cover-a: var(--dr-violet-tint); --cover-b: var(--dr-accent-tint); --cover-ink: var(--dr-violet); }
.dr-news__item--tone-3 .dr-news__media--cover { --cover-a: var(--dr-ok-tint); --cover-b: var(--dr-teal-tint); --cover-ink: var(--dr-ok); }
.dr-news__item--tone-4 .dr-news__media--cover { --cover-a: var(--dr-info-tint); --cover-b: var(--dr-accent-tint); --cover-ink: var(--dr-info); }
.dr-news__item--notice .dr-news__media--cover, .dr-news__item--status .dr-news__media--cover, .dr-news__item--maintenance .dr-news__media--cover { --cover-a: var(--dr-amber-tint); --cover-b: var(--dr-warn-tint); --cover-ink: var(--dr-amber); }
.dr-news__media--cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .55), transparent 45%), radial-gradient(circle at 15% 90%, rgba(255, 255, 255, .35), transparent 40%); }
html[data-theme="dark"] .dr-news__media--cover::before { background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .08), transparent 45%); }
.dr-news__cover-art { position: absolute; right: -6%; bottom: -14%; color: var(--cover-ink); font-size: clamp(120px, 26vw, 220px); line-height: 1; opacity: .16; transform: rotate(-10deg); pointer-events: none; }
.dr-news__cover-date { position: absolute; left: 20px; bottom: 16px; display: flex; flex-direction: column; color: var(--cover-ink); line-height: 1; }
.dr-news__cover-month { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.dr-news__cover-year { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .75; }
/* card body */
.dr-news__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 18px 20px 18px; }
.dr-news__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
/* A featured update that is not the lead keeps its place in the grid by date and says why
   it is worth a second look. Amber, like the notice templates: it is a state the newsroom
   has given the story, not another category to filter by. */
.dr-news__featured { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-amber-tint); color: var(--dr-amber); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-news__featured i { font-size: 10px; }
.dr-news__kind { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-news__category { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.dr-news__category:hover, .dr-news__category:focus { color: var(--dr-accent); text-decoration: none; filter: brightness(.95); }
.dr-news__category i { font-size: 10px; }
.dr-newsroom__categories { margin: 0 0 18px; }
.dr-news__item--notice .dr-news__kind, .dr-news__item--status .dr-news__kind, .dr-news__item--maintenance .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-news__item--feature .dr-news__kind, .dr-news__item--event .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); }
.dr-news__date { color: var(--dr-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-news__title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.dr-news__title a { color: var(--dr-ink); }
.dr-news__title a:hover { color: var(--dr-accent); text-decoration: none; }
.dr-news__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 14px; color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; }
.dr-news__actions { margin-top: auto; }
/* lead story */
.dr-news__item--lead { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); }
.dr-news__item--lead .dr-news__media { aspect-ratio: auto; min-height: 320px; height: 100%; }
.dr-news__item--lead .dr-news__body { padding: 28px 30px; justify-content: center; }
.dr-news__item--lead .dr-news__title { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.dr-news__item--lead .dr-news__summary { -webkit-line-clamp: 5; font-size: 15px; }
.dr-news__item--lead .dr-news__cover-month { font-size: 56px; }
.dr-news__item--lead .dr-news__cover-year { font-size: 14px; }
@media (max-width: 991.98px) {
  .dr-news__item--lead { grid-template-columns: minmax(0, 1fr); }
  .dr-news__item--lead .dr-news__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .dr-news__item--lead .dr-news__body { padding: 20px 22px; }
}
@media (max-width: 575.98px) {
  .dr-newsroom__grid { grid-template-columns: minmax(0, 1fr); }
  .dr-news__body { padding: 16px 18px; }
}
/* Events. A date tile sits on every card so the calendar can be scanned without
   reading; a card without a picture keeps the tile on a toned cover. The event page
   is the story on the left and a sticky details card on the right. */
.dr-events { display: grid; gap: 18px; margin-bottom: 18px; }
.dr-events__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dr-events__tabs { margin: 0; }
.dr-events__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; }
.dr-tabs a.active .dr-events__count { background: var(--dr-accent); color: var(--dr-on-accent); }
.dr-events__filter { display: flex; align-items: center; gap: 8px; }
.dr-events__filter select { min-width: 200px; border-radius: var(--dr-radius-pill); }
.dr-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.dr-event-card { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dr-event-card:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); }
.dr-event-card.is-past { opacity: .86; }
.dr-event-card.is-past .dr-event-card__media img { filter: saturate(.6); }
.dr-event-card__media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dr-soft); }
.dr-event-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dr-event-card:hover .dr-event-card__media img { transform: scale(1.04); }
.dr-event-card__media--cover { background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-teal-tint)); }
.dr-event-card__art { position: absolute; right: -4%; bottom: -16%; color: var(--dr-accent); font-size: 170px; line-height: 1; opacity: .14; transform: rotate(-10deg); }
.dr-event-date { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px 9px; border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.dr-event-date__month { color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dr-event-date__day { margin-top: 3px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.dr-event-date__year { margin-top: 3px; color: var(--dr-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.dr-event-date--static { position: static; box-shadow: none; border: 1px solid var(--dr-line-card); }
.dr-event-card__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 18px 20px; }
.dr-event-card__facts { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--dr-ink-2); font-size: 13px; }
.dr-event-card__facts li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dr-event-card__facts i { flex: 0 0 14px; color: var(--dr-accent); text-align: center; }
.dr-event-card__facts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-event__notice { margin-bottom: 16px; border-radius: var(--dr-radius-card); }
.dr-event__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; }
.dr-event__story { margin: 0; }
.dr-event__side { position: sticky; top: calc(var(--dr-header-h) + 18px); }
.dr-event-info { margin: 0; padding: 20px; }
.dr-event-info__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dr-event-info__title { margin: 0; font-size: 17px; }
.dr-event-info__list { display: grid; gap: 0; margin: 0 0 16px; }
.dr-event-info__list > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--dr-line-soft); }
.dr-event-info__list dt { color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-event-info__list dt i { width: 16px; margin-right: 4px; color: var(--dr-accent); text-align: center; }
.dr-event-info__list dd { margin: 0; color: var(--dr-ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.dr-event-info__list dd span { color: var(--dr-ink-2); }
.dr-event-info__list dd small { color: var(--dr-ink-3); }
.dr-event-info__list address { display: inline; margin: 0; font-style: normal; color: var(--dr-ink-2); }
.dr-event-info__actions { display: grid; gap: 8px; }
.dr-event-info__actions .btn { margin: 0; }
.dr-event-mini { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px; color: var(--dr-ink); transition: border-color .15s ease, transform .15s ease; }
.dr-event-mini:hover { border-color: rgba(var(--dr-accent-rgb), .45); transform: translateY(-2px); color: var(--dr-ink); text-decoration: none; }
.dr-event-mini .dr-event-date { position: static; min-width: 56px; box-shadow: none; border: 1px solid var(--dr-line-card); }
.dr-event-mini__copy { display: grid; gap: 3px; min-width: 0; }
.dr-event-mini__copy strong { font-size: 15px; line-height: 1.3; }
.dr-event-mini__copy small { color: var(--dr-ink-2); font-size: 12.5px; }
@media (max-width: 991.98px) {
  .dr-event__layout { grid-template-columns: minmax(0, 1fr); }
  .dr-event__side { position: static; }
}
@media (max-width: 575.98px) {
  .dr-events__grid { grid-template-columns: minmax(0, 1fr); }
  .dr-events__filter, .dr-events__filter select { width: 100%; }
}
.dr-contact-info { display: grid; gap: 10px; }
.dr-contact-info address { margin: 0; font-style: normal; line-height: 1.6; }
.dr-contact-info a { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-ink); font-weight: 600; }
.dr-contact-map iframe { display: block; width: 100%; height: 210px; border: 0; }
/* The address always shows, so a blank embed still leaves a card worth reading. */
.dr-contact-map__caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 16px; border-top: 1px solid var(--dr-line, #e6e6ee); }
.dr-contact-map__caption i { grid-row: 1 / span 2; align-self: center; color: var(--dr-muted, #8a8a99); font-size: 15px; }
.dr-contact-map__caption address { margin: 0; color: var(--dr-ink, #26252e); font-size: 12.5px; font-style: normal; line-height: 1.45; }
.dr-contact-map__caption a { color: var(--dr-accent, #4f46e5); font-size: 12px; font-weight: 700; }
.dr-side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dr-line-soft); }
.dr-side-row:last-of-type { border-bottom: 0; }
.dr-error { max-width: 720px; margin: 30px auto; }
.dr-empty--lg { padding: 50px 24px; }
.dr-empty--lg > i { width: 64px; height: 64px; font-size: 26px; border-radius: 20px; }
.dr-error__code { font-size: clamp(56px, 12vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--dr-accent); }
.dr-error__title { margin: 8px 0 6px; font-size: 22px; }
.dr-switch-list { display: grid; }
.dr-switch-list .dr-switch-row { border-bottom: 1px solid var(--dr-line-soft); }
.dr-switch-list .dr-switch-row:last-child { border-bottom: 0; }
.dr-switch-row--top { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); }
.dr-tabs { margin: -6px 0 18px; }
.dr-row--block { align-items: flex-start; }
.dr-row--block .dr-row__copy { flex: 1; min-width: 0; }
.dr-card--danger { border-color: rgba(220, 76, 76, .35); }
.dr-card__foot--center { justify-content: center; }
.ssl-inactive { color: var(--dr-ink-3); }
.dr-body .dr-main > .container > .alert:first-child { margin-top: 18px; }
.rating, .rating-done { display: inline-flex; gap: 2px; direction: rtl; }
.rating .star, .rating-done .star { width: 16px; height: 16px; cursor: pointer; color: var(--dr-line); }
.rating .star::before, .rating-done .star::before { content: "★"; font-size: 15px; line-height: 1; }
.rating .star:hover, .rating .star:hover ~ .star, .rating-done .star.active { color: var(--dr-amber); }
.rating-done { cursor: default; }

/* Licensing "Powered by" line the engine appends after the page body */
.dr-content > p[style*="text-align:center"] { margin: 6px 0 0; color: var(--dr-ink-3); font-size: 11.5px; }
.dr-content > p[style*="text-align:center"] a { color: var(--dr-ink-3); }

/* Client-area dashboard stats: four across, two on small screens */
.dr-home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dr-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dr-home-stats .dr-stat { padding: 14px 16px; }
.dr-side .btn-success, .dr-side .btn-info, .dr-sidecard .btn-success, .dr-sidecard .btn-info { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent); box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .25); }
.dr-side .btn-success:hover, .dr-sidecard .btn-success:hover { background: var(--dr-accent); filter: brightness(1.08); }
.dr-sidecard__body .col-button-left, .dr-sidecard__body .col-sm-12 { float: none; padding: 0; width: auto; }
.dr-card__head .dr-card__tools .btn-sm { white-space: nowrap; }

/* Pill colors by data-status (no JS needed) */

/* DataTables chrome inside flush cards */
.dr-dt-filter { display: none; }
.dr-dt-foot { margin-top: 0; }
.dr-dt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.dr-dt-foot .dataTables_info { padding: 0; }
.dr-dt-foot .dataTables_length { float: none; padding: 0; }
.dr-dt-foot .dataTables_length label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-weight: 600; }
.dr-dt-foot .dataTables_paginate { padding: 0; }
.dr-dt-foot .pagination { margin: 0; }
.dr-table-shell > .dataTables_wrapper > .dr-table-foot { border-radius: 0; }

.dr-auth__aside-foot { margin-top: auto; color: var(--dr-ink-3); font-size: 12px; font-weight: 600; }
/* phone field (intl-tel-input) inside draisap controls */
.intl-tel-input { width: 100%; }
.intl-tel-input .country-list { border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); }
.intl-tel-input .country-list .country.highlight { background: var(--dr-accent-tint); }
.intl-tel-input .country-list .dial-code { color: var(--dr-ink-3); }
.intl-tel-input .selected-dial-code { color: var(--dr-ink-2); }
.intl-tel-input.separate-dial-code .selected-flag { background: transparent; }

.md-editor > .md-footer { padding: 6px 12px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12px; }
.md-editor > .md-preview { background: var(--dr-surface); color: var(--dr-ink); padding: 12px 14px; }
.md-editor > textarea.form-control, .md-editor > textarea.md-input { background: var(--dr-surface) !important; color: var(--dr-ink) !important; }
.md-editor .btn-toolbar .btn-primary, .md-editor .btn-toolbar .btn-primary:hover { background: var(--dr-accent); color: var(--dr-on-accent); }
.dr-sidecard .label, .dr-sidecard .status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.dr-sidecard .label[style*="background"] { color: #fff; }
.dr-sidecard .label[class*="requestor-type"] { background: var(--dr-accent-tint); color: var(--dr-accent); margin-left: 4px; }
.hidden { display: none !important; }
.dr-switch-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
@media (max-width: 640px) { .dr-switch-list--2 { grid-template-columns: minmax(0, 1fr); } }
.dr-card--flush > .dr-list--flush { display: block; margin: 0; border-top: 1px solid var(--dr-line-soft); }
.dr-card--flush > .dr-list--flush .dr-row { border: 0; border-bottom: 1px solid var(--dr-line-soft); border-radius: 0; padding: 14px 20px; box-shadow: none; }
.dr-card--flush > .dr-list--flush .dr-row:last-child { border-bottom: 0; }
.dr-row__icon.dr-avatar { width: 38px; height: 38px; font-size: 12px; font-weight: 800; }

/* Powered-by line injected by framework/portal-functions.php */
.wbams-powered-by { margin: 8px 0 24px; text-align: center; color: var(--dr-ink-3, #8a8f9c); font-size: 12px; }
.wbams-powered-by a { color: inherit; text-decoration: none; font-weight: 600; }
.wbams-powered-by a:hover { color: var(--dr-accent, #4f46e5); }
/* DataTables empty row → empty-state look */
.dr-table td.dataTables_empty, table.dataTable td.dataTables_empty { padding: 34px 20px !important; text-align: center; color: var(--dr-ink-2); font-weight: 600; }
.field-error-msg { display: none; }
/* ---- Responsive pass ---- */
@media (max-width: 860px) { .dr-auth__card, .dr-auth__card--wide { grid-template-columns: minmax(0, 1fr); } .dr-auth__card--wide .dr-auth__main { padding: 26px; } }
@media (max-width: 640px) { .dr-auth__points, .dr-auth__aside-copy p { display: none; } .dr-auth__aside { gap: 14px; padding: 22px 22px 18px; } .dr-auth__aside-copy h2 { font-size: 20px; margin-bottom: 0; } .dr-auth__frame { padding: 12px; } }
/* phone header: keep the logo, tighten the icon row */
@media (max-width: 640px) {
  .dr-header__inner { gap: 10px; }
  .dr-brand { flex: 0 0 auto; }
  .dr-brand img { max-height: 40px; max-width: 150px; object-fit: contain; object-position: left center; }
  .dr-header__end { flex: 1 1 auto; justify-content: flex-end; gap: 6px; min-width: 0; }
  .dr-header__end .dr-iconbtn, .dr-header__end .dr-account-btn, .dr-header__end .dr-lang-btn { width: 36px; height: 36px; padding: 0; }
  .dr-header__end .dr-account-btn { width: auto; padding: 0 6px; }
  .dr-header__end [data-dr-theme-toggle], .dr-header__end .dr-lang-btn { display: none; }
  /* phone layout: main content first, sidebar cards after it */
  .dr-layout--side .dr-side, .dr-layout--side-right .dr-side { order: 2; }
  .dr-layout--side .dr-content, .dr-layout--side-right .dr-content { order: 1; }
      .dr-crumbs { font-size: 12px; }
}
@media (max-width: 640px) {
  .alert > .btn, .alert > a.btn, .alert .pull-right, .alert .float-right { float: none !important; display: flex; margin: 10px 0 0; width: 100%; justify-content: center; }
  .dr-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dr-home-stats .dr-stat { padding: 12px; gap: 10px; }
  .dr-home-stats .dr-stat__icon { width: 36px; height: 36px; font-size: 14px; }
  .dr-home-stats .dr-stat__copy strong { font-size: 19px; }
  .dr-home-stats .dr-stat__copy span { font-size: 11.5px; }
}
@media (max-width: 640px) {
  .dr-doc__head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dr-doc__status { flex-direction: row; align-items: center; justify-content: space-between; }
  .dr-doc__amount { font-size: 24px; }
  .dr-doc__title { font-size: 22px; }
    .dr-doc__parties { gap: 16px; margin-top: 16px; }
    }
/* mass payment */
.dr-masspay__invoice td { background: var(--dr-soft); font-weight: 800; }
.dr-masspay__invoice a { color: var(--dr-ink); text-decoration: none; }
.dr-masspay__invoice a i { margin-right: 6px; color: var(--dr-accent); }
.dr-masspay__table td { padding: 12px 16px; }
.dr-masspay__table .dr-masspay__invoice td { padding: 12px 16px; }
.dr-masspay__totals td { padding: 10px 16px; color: var(--dr-ink-2); font-weight: 600; border-top: 1px solid var(--dr-line-soft); line-height: 1.4; }
.dr-masspay__totals tr:first-child td { padding-top: 14px; border-top: 2px solid var(--dr-line); }
.dr-masspay__due td { padding: 14px 16px 18px; color: var(--dr-ink); font-size: 15px; background: var(--dr-soft); }
.dr-masspay__amount { font-size: 24px !important; letter-spacing: -.02em; }
.dr-facts--1 { grid-template-columns: minmax(0, 1fr); }
/* affiliates */
.dr-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 760px) { .dr-stats--3 { grid-template-columns: minmax(0, 1fr); } }
.dr-copy-row { display: flex; gap: 10px; }
.dr-copy-row .form-control { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.dr-copy-row .btn { flex: 0 0 auto; white-space: nowrap; }
.dr-checklist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.dr-checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--dr-ink-2); font-size: 13.5px; }
.dr-checklist li i { margin-top: 2px; color: var(--dr-ok); }
.dr-affiliate-code textarea, .dr-affiliate-code .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
@media (max-width: 480px) { .dr-copy-row { flex-wrap: wrap; } .dr-copy-row .btn { width: 100%; } }
/* two-factor setup modal (core markup) */
.twofa-module { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); align-items: center; gap: 14px; margin: 10px 0; padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-surface); cursor: pointer; }
.twofa-module.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); }
.twofa-module .col-radio input { margin: 0; }
.twofa-module .col-logo img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; }
.twofa-module .col-description { color: var(--dr-ink-2); font-size: 13px; }
.twofa-module .col-description strong { display: block; color: var(--dr-ink); font-size: 14px; }
.twofa-setup p[align="center"] { margin: 16px 0 0; text-align: right; }
/* payment method form */
.dr-billing-contacts .dr-choice { padding: 10px 14px; }
.dr-paymethod__types { margin-bottom: 18px; }
.dr-paymethod__card .dr-paymethod__number { grid-column: 1 / -1; }
.dr-paymethod .cc-details { margin-top: 4px; }
.dr-paymethod .fieldgroup-bankaccount .dr-field + .dr-fields { margin-top: 12px; }
.dr-paymethod .dr-card__foot { margin-top: 20px; }
.dr-field__optional { margin-left: 6px; color: var(--dr-ink-3); font-weight: 500; font-size: 12px; }
.dr-field__hint-link { margin-left: 8px; padding: 0; border: 0; background: transparent; color: var(--dr-accent); font-size: 12px; font-weight: 700; cursor: pointer; }
.dr-paymethod .field-error-msg { margin-top: 4px; }
.dr-paymethod .cc-number-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
#modalBillingAddress .dr-fields--2 { align-items: start; }

/* ---- Utility pages (access, switch account, invites, forwarding) ---- */
.dr-card--narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.dr-newsletter-result__email { margin-top: 6px; color: var(--dr-ink); font-weight: 700; }
.dr-card--center { text-align: center; }
.dr-card--center .dr-card__head { justify-content: center; text-align: left; }
.dr-frame { display: block; width: 100%; min-height: 500px; margin: 0; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-surface); }
.dr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dr-progress { position: relative; width: 220px; max-width: 100%; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--dr-soft); overflow: hidden; }
.dr-progress > span { position: absolute; inset: 0; width: 45%; border-radius: 999px; background: linear-gradient(90deg, var(--dr-teal, var(--dr-accent)), var(--dr-accent)); animation: dr-progress-slide 1.4s ease-in-out infinite; }
@keyframes dr-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } }
.dr-records-limit { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.dr-records-limit label { margin: 0; color: var(--dr-ink-2); font-size: 13px; font-weight: 700; }
.dr-records-limit .form-control { width: auto; min-width: 90px; }
@media (max-width: 767px) { .dr-grid-2 { grid-template-columns: minmax(0, 1fr); }   }

/* ---- Invoice payment ---- */
.dr-pay__methods { margin-bottom: 0; }
.dr-pay__newcard, .dr-pay__newbank, .dr-pay__cvv, .dr-pay__billing, .dr-pay__newaddress { margin-top: 18px; }
.dr-pay__cvv .dr-field { max-width: 240px; }
.dr-pay__cvv .dr-field__hint-link { float: right; margin-left: 0; }
.dr-pay .cc-details + .cc-details, .dr-pay .cc-details .dr-switch-row { margin-top: 0; }
.dr-pay .dr-switch-row { margin-top: 18px; }
.dr-pay #inputDescriptionContainer { margin-top: 18px; }
.dr-pay .field-error-msg { display: none; margin-top: 4px; color: var(--dr-bad); font-size: 12px; font-weight: 600; }
.dr-pay .dr-field.has-error .form-control { border-color: var(--dr-bad); }
.dr-pay .cc-details.form-group, .dr-pay .dr-fields.form-group { margin-bottom: 0; }
/* fields a remote-input gateway (Stripe Elements) mounts into the payment form, restyled from its bootstrap grid to Draisap fields */
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements { margin-top: 18px; }
#frmManagePaymentMethod #stripeElements { margin-bottom: 18px; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 0 12px; align-items: center; margin: 0 0 16px; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row:last-child { margin-bottom: 0; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row > .control-label { grid-column: 1 / -1; flex: none; max-width: none; padding: 0; margin: 0 0 6px; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row > [class*="col-sm"] { flex: none; max-width: none; padding: 0; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row > .col-sm-7 { grid-column: 1 / -1; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .form-group.row > div:empty { display: none; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements #stripeCvcWhere .dr-field__hint-link { margin: 0; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .StripeElement { display: flex; align-items: center; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .StripeElement > div { width: 100%; }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .StripeElement--focus { border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); }
:is(.dr-pay, #frmManagePaymentMethod) #stripeElements .StripeElement--invalid { border-color: var(--dr-bad); }
.dr-pay__summary .dr-card__head { padding: 18px 20px 14px; }
.dr-pay__lines { list-style: none; margin: 0; padding: 12px 20px; display: grid; gap: 8px; border-top: 1px solid var(--dr-line-soft); font-size: 13px; }
.dr-pay__lines li { display: flex; justify-content: space-between; gap: 12px; }
.dr-pay__lines li > span:first-child { color: var(--dr-ink-2); min-width: 0; }
.dr-pay__lines li > span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dr-pay__lines--totals { background: var(--dr-soft); }
.dr-pay__lines--totals li:last-child { padding-top: 8px; border-top: 1px solid var(--dr-line); }
.dr-pay__due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--dr-line); }
.dr-pay__due small { color: var(--dr-ink-2); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dr-pay__due strong { font-size: 22px; font-weight: 850; letter-spacing: -.02em; }
.dr-pay .gateway-errors { margin-bottom: 20px; }
#frmRemoteCardProcess { display: grid; gap: 12px; }

/* ---- Captcha ---- */
.dr-captcha { margin: 18px 0 0; }
.dr-captcha__recaptcha { display: flex; justify-content: center; min-height: 78px; }
/* No frame: this sits inside a card already, and a bordered, filled box within one is a
   card inside a card. The group is set off by the rule above it and its own spacing. */
.dr-captcha__image-box { display: grid; justify-items: center; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--dr-line-soft); text-align: center; }
.dr-captcha__label { margin: 0; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-captcha__image img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.dr-captcha__input { width: 100%; max-width: 200px; }
.dr-captcha__input .form-control { text-align: center; letter-spacing: .2em; font-weight: 700; }

/* ---- Popup windows (email viewer) ---- */
body.dr-popup { min-height: 100vh; margin: 0; padding: 20px; background: var(--dr-bg); }
.dr-popup__shell { max-width: 960px; margin: 0 auto; }
.dr-popup__card .dr-card__title { font-size: 18px; }
.dr-popup__attachments { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dr-popup__attachments i { margin-right: 4px; color: var(--dr-accent); }
.dr-popup__body { border-top: 1px solid var(--dr-line-soft); }
.dr-popup__frame { display: block; width: 100%; height: 480px; min-height: 320px; border: 0; background: #fff; overflow: hidden; }

/* ---- Markdown guide (editor help modal) ---- */
.dr-md-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dr-md-guide__item { min-width: 0; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-soft); }
.dr-md-guide__item--wide { grid-column: 1 / -1; }
.dr-md-guide__item h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.dr-md-guide__item pre { margin: 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--dr-surface); color: var(--dr-ink); font-size: 12px; line-height: 1.55; white-space: pre; }
.dr-md-guide__item pre em { color: var(--dr-ink-2); font-style: italic; }
@media (max-width: 600px) { .dr-md-guide { grid-template-columns: minmax(0, 1fr); } }

/* ---- Knowledgebase suggestions (while writing a ticket) ---- */
.dr-kb-suggest { margin-bottom: 20px; padding: 16px 18px; border: 1px solid rgba(var(--dr-accent-rgb), .3); border-radius: 14px; background: var(--dr-accent-tint); }
.dr-kb-suggest__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dr-kb-suggest__head strong { display: block; font-size: 14px; }
.dr-kb-suggest__head small { display: block; color: var(--dr-ink-2); font-size: 12.5px; }
.dr-kb-suggest__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--dr-surface); color: var(--dr-accent); flex: none; }
.dr-kb-suggest__list { display: grid; gap: 8px; }
.dr-kb-suggest__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); color: var(--dr-ink); }
.dr-kb-suggest__item:hover { border-color: rgba(var(--dr-accent-rgb), .45); text-decoration: none; color: var(--dr-ink); }
.dr-kb-suggest__item > i { margin-top: 2px; color: var(--dr-accent); }
.dr-kb-suggest__item strong { display: block; font-size: 13.5px; }
.dr-kb-suggest__item small { display: block; color: var(--dr-ink-2); font-size: 12.5px; line-height: 1.5; }

/* ---- Usage billing ---- */
.dr-usage__pricing-btn { display: inline-flex; margin-top: 6px; }
.dr-usage__included { display: block; color: var(--dr-ink-2); }
.dr-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dr-soft); color: var(--dr-ink-2); }
.dr-social:hover { color: var(--dr-accent); text-decoration: none; }

/* ---- Ticket feedback ---- */
.dr-feedback { display: grid; gap: 20px; }
.dr-rating { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.dr-rating__item { position: relative; margin: 0; cursor: pointer; }
.dr-rating__item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.dr-rating__item span { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--dr-line); border-radius: 10px; background: var(--dr-surface); font-weight: 800; font-size: 13.5px; color: var(--dr-ink-2); transition: border-color .15s ease, background .15s ease, color .15s ease; }
.dr-rating__item:hover span { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-ink); }
.dr-rating__item input:checked + span { border-color: var(--dr-accent); background: var(--dr-accent); color: #fff; }
.dr-rating__item input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .25); }
@media (max-width: 600px) { .dr-rating { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- Plan change (upgrade / downgrade) ---- */
.dr-card__eyebrow { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.dr-plans__empty { grid-column: 1 / -1; }
.dr-plan { display: flex; flex-direction: column; margin: 0; }
.dr-plan.is-recommended { border-color: rgba(var(--dr-accent-rgb), .55); box-shadow: 0 10px 30px rgba(var(--dr-accent-rgb), .12); }
.dr-plan.is-current { border-color: var(--dr-teal); }
.dr-plan__body { flex: 1; padding: 20px; }
.dr-plan__flag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--dr-teal-tint); color: var(--dr-teal); font-size: 11.5px; font-weight: 800; }
.dr-plan__flag--rec { background: var(--dr-accent-tint); color: var(--dr-accent); }
.dr-plan__group { display: block; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-plan__name { margin: 4px 0 10px; font-size: 18px; font-weight: 850; letter-spacing: -.01em; }
.dr-plan__desc { color: var(--dr-ink-2); font-size: 13px; line-height: 1.6; }
.dr-plan__desc ul { padding-left: 18px; margin: 0; }
.dr-plan__desc ul.custom-features, .dr-plan__desc .product-features { list-style: none; padding: 0; }
.dr-plan__desc p:last-child { margin-bottom: 0; }
.dr-plan__features { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--dr-line-soft); display: grid; gap: 8px; font-size: 13px; }
.dr-plan__features li { display: flex; justify-content: space-between; gap: 12px; }
.dr-plan__features li > span { color: var(--dr-ink-2); }
.dr-plan__yes { color: var(--dr-ok); } .dr-plan__no { color: var(--dr-bad); }
.dr-plan__foot { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); border-radius: 0 0 var(--dr-radius-card, 16px) var(--dr-radius-card, 16px); }
.dr-plan__foot form { display: grid; gap: 10px; }
.dr-plan__price { font-size: 18px; font-weight: 850; }
.dr-plan__price small { color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-plan__qty { align-items: center; }
.dr-plan__qty > span { color: var(--dr-ink-2); font-size: 13px; font-weight: 700; }
.dr-plan__qty .form-control { max-width: 110px; }
.dr-plan .btn-block { width: 100%; }
.dr-configopts { display: grid; gap: 12px; }
.dr-configopt { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-soft); }
.dr-configopt__name { grid-column: 1 / -1; font-size: 14px; font-weight: 800; }
.dr-configopt__current small, .dr-configopt__new small { display: block; margin-bottom: 6px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-configopt__current > span { display: block; padding: 9px 12px; border: 1px dashed var(--dr-line); border-radius: 10px; color: var(--dr-ink-2); font-weight: 600; font-size: 13.5px; background: var(--dr-surface); }
.dr-configopt__arrow { color: var(--dr-ink-3); }
.dr-configopt__qty { align-items: center; }
.dr-configopt__qty .form-control { max-width: 110px; }
.dr-configopt__qty > span { color: var(--dr-ink-2); font-size: 13px; font-weight: 700; }
.dr-configopt .dr-switch-row { margin: 0; }
.dr-upgrade__arrow { margin: 0 6px; color: var(--dr-ink-3); font-size: 11px; }
.dr-card--flush > .dr-upgrade__note { margin: 16px 20px 20px; }
.dr-promo-applied { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-promo-applied strong { display: block; color: var(--dr-ink); font-size: 13px; }
.dr-promo-applied small { display: block; color: var(--dr-ink-2); font-size: 12px; }
@media (max-width: 767px) { .dr-configopt { grid-template-columns: minmax(0, 1fr); } .dr-configopt__arrow { transform: rotate(90deg); justify-self: center; } }
.dr-tweets { display: grid; gap: 10px; }
.dr-tweet { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); }
.dr-tweet__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dr-accent-tint); color: var(--dr-accent); flex: none; }
.dr-tweet__text { margin: 0 0 2px; font-size: 13.5px; }
.dr-tweet__date { color: var(--dr-ink-3); font-size: 12px; }
.dr-tweets__follow { margin: 4px 0 0; color: var(--dr-ink-2); font-size: 13px; }

/* ---- OAuth / SSO ---- */
.dr-oauth__frame { width: min(560px, 100%); gap: 16px; align-content: center; }
.dr-oauth__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dr-oauth__bar .dr-brand img { max-height: 36px; }
.dr-oauth__bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dr-oauth__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--dr-ink-2); font-size: 12.5px; }
.dr-oauth__link { padding: 0; border: 0; background: transparent; color: var(--dr-accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dr-oauth__card { padding: 30px; }
.dr-oauth__applogo { margin-bottom: 18px; text-align: center; }
.dr-oauth__applogo img { max-height: 64px; max-width: 200px; }
.dr-oauth__title { margin: 0 0 8px; font-size: 22px; font-weight: 850; letter-spacing: -.01em; }
.dr-oauth__lead { margin: 0 0 14px; color: var(--dr-ink-2); font-size: 13.5px; }
.dr-oauth__grants { margin-bottom: 22px; }
.dr-oauth__actions { justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dr-line-soft); }
.dr-oauth__challenge { margin-top: 12px; }
.dr-oauth__foot { color: var(--dr-ink-3); font-size: 12.5px; text-align: center; }
.dr-providers { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-providers .btn { display: inline-flex; align-items: center; gap: 8px; }
.dr-providers__hint { margin: -8px 0 12px; color: var(--dr-ink-2); font-size: 12.5px; text-align: center; }
.providerLinkingFeedback:empty { display: none; }
.providerLinkingFeedback { margin-bottom: 12px; }
.dr-kb-article__tools { display: inline-flex; align-items: center; gap: 8px; }
.dr-kb-article__tools .btn { min-height: 34px; }

/* ---- Header dropdown panes point at their trigger (same caret as the admin) ---- */
.dr-header .dropdown-menu { overflow: visible; margin-top: 4px; }
.dr-header .dropdown-menu::before { content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; border-left: 1px solid var(--dr-line); border-top: 1px solid var(--dr-line); border-radius: 3px 0 0 0; background: var(--dr-surface); transform: rotate(45deg); }
.dr-header .dropdown-menu-right::before { left: auto; right: 22px; }
/* Client service: store extras, delivery & tracking */
.dr-service__img { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--dr-surface-2, var(--dr-accent-tint)); flex: none; }
.dr-service__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-address { line-height: 1.45; font-weight: 600; }
.dr-shipments { margin-top: 16px; }
.dr-shipments .dr-row__copy strong { white-space: normal; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-shipments .dr-row__copy small + small { margin-top: 2px; }
.dr-row__action { flex: none; align-self: center; }
.dr-muted { color: var(--dr-ink-2); font-size: 13.5px; }
@media (max-width: 640px) { .dr-shipments .dr-row { flex-wrap: wrap; } .dr-row__action { width: 100%; text-align: center; } }
.dr-code--inline { display: inline-block; margin: 0; padding: 2px 8px; font-size: 13px; letter-spacing: .04em; border-radius: 8px; font-weight: 700; }

/* ------------------------------------------------------------------ *
 * Client email (mailboxes.tpl)
 * ------------------------------------------------------------------ */
.dr-mailbox__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dr-mailbox__actions .btn { border-radius: var(--dr-radius-pill); }

.dr-mailbox__panel {
    margin: 0 0 10px;
    padding: 16px 18px;
    border: 1px solid var(--dr-line-card);
    border-radius: var(--dr-radius-control);
    background: var(--dr-surface-2);
}
.dr-mailbox__panel[hidden] { display: none; }
.dr-mailbox__panel--danger { border-color: var(--dr-bad); background: var(--dr-bad-tint); }
.dr-mailbox__panel > label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--dr-ink); }
.dr-mailbox__panel > small { display: block; margin-top: 6px; color: var(--dr-ink-2); }
.dr-mailbox__panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.dr-mailbox__panel-actions .dr-check { margin: 0; margin-right: auto; }

/* The generated password is shown once and never again, so it is set apart from the
   page rather than being one more line of body text a client might scroll past. */
.dr-mailbox-secret__value {
    padding: 14px 16px;
    border: 1px dashed var(--dr-control-line);
    border-radius: var(--dr-radius-control);
    background: var(--dr-surface);
    text-align: center;
}
.dr-mailbox-secret__value code {
    font-family: var(--dr-mono);
    font-size: 18px;
    letter-spacing: .04em;
    color: var(--dr-ink);
    background: none;
    user-select: all;
}

.dr-input-group { display: flex; align-items: stretch; }
.dr-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.dr-input-group__suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--dr-control-line);
    border-left: 0;
    border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0;
    background: var(--dr-soft);
    color: var(--dr-ink-2);
    white-space: nowrap;
}
.dr-input--compact { max-width: 160px; }
.dr-form__actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* ===== Tables become cards on phones =====
   Below 640px a row is stacked as "caption / value" pairs inside its own card, so nothing is
   clipped and nothing has to be scrolled sideways. draisap.js supplies the captions. */
@media (max-width: 640px) {
    .dr-table-shell { overflow-x: visible; }
    table.dr-table { display: block; }
    table.dr-table > thead { display: none; }
    table.dr-table > tbody { display: grid; gap: 10px; }
    table.dr-table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface, #fff); }
    table.dr-table > tbody > tr > td { display: flex; flex-wrap: wrap; min-height: 42px; align-items: baseline; column-gap: 10px; row-gap: 3px; width: auto !important; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--dr-line-soft); overflow-wrap: break-word; text-align: left !important; white-space: normal !important; }
    table.dr-table > tbody > tr > td:last-child { border-bottom: 0; }
    table.dr-table > tbody > tr > td::before { content: attr(data-label); flex: 0 0 34%; max-width: 34%; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
    table.dr-table > tbody > tr > td:not([data-label])::before, table.dr-table > tbody > tr > td.dr-table__actions::before { content: none; }
    table.dr-table > tbody > tr > td.dr-table__actions { justify-content: flex-end; }
    table.dr-table > tbody > tr > td:not([data-label]):empty { display: none; }
    table.dr-table > tbody > tr > td.dataTables_empty { display: block; }
    table.dr-table > tfoot > tr > th { display: block; text-align: left; }
}

/* ---------------------------------------------------------------- knowledgebase
   A help centre: a search band, a catalog of category tiles, article cards with an
   excerpt and views, and an article page with a reading column, an automatic table
   of contents, tag chips and a "was this helpful" block. */
.dr-kb-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 46%); align-items: center; gap: 22px; margin-bottom: 22px; padding: 26px 28px; overflow: hidden; background: linear-gradient(120deg, var(--dr-accent-tint), var(--dr-surface) 70%); }
.dr-kb-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--dr-accent-rgb), .16), transparent 70%); pointer-events: none; }
.dr-kb-hero__copy { position: relative; z-index: 1; min-width: 0; }
.dr-kb-hero__copy .dr-hero__eyebrow { color: var(--dr-accent); }
.dr-kb-hero__title { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.dr-kb-hero__lead { margin: 0; color: var(--dr-ink-2); font-size: 13.5px; }
.dr-kb-hero__lead a { color: var(--dr-ink-2); font-weight: 600; }
.dr-kb-hero__form { position: relative; z-index: 1; }
.dr-kb-hero__field { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.dr-kb-hero__field .form-control { width: 100%; }
.dr-kb-hero__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--dr-ink-3); font-size: 14px; pointer-events: none; }
.dr-kb-hero__search .form-control { padding-left: 42px; }
.dr-kb-section { margin-bottom: 26px; }
.dr-kb-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.dr-kb-section__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.dr-kb-section__flame { margin-right: 4px; color: var(--dr-amber); }
.dr-kb-section__lead { margin: 2px 0 0; color: var(--dr-ink-3); font-size: 12.5px; }
.dr-kb-cat-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: -8px 0 22px; padding: 0 4px; color: var(--dr-ink-2); font-size: 14px; }
.dr-kb-cat-intro p { margin: 0; max-width: 720px; }
/* category tiles */
.dr-kb-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dr-kb-cat { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dr-kb-cat:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; }
.dr-kb-cat__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; }
.dr-kb-cat--1 .dr-kb-cat__icon { background: var(--dr-teal-tint); color: var(--dr-teal); }
.dr-kb-cat--2 .dr-kb-cat__icon { background: var(--dr-violet-tint); color: var(--dr-violet); }
.dr-kb-cat--3 .dr-kb-cat__icon { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-kb-cat--4 .dr-kb-cat__icon { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-kb-cat--5 .dr-kb-cat__icon { background: var(--dr-info-tint); color: var(--dr-info); }
.dr-kb-cat__copy { display: block; flex: 1 1 auto; min-width: 0; }
.dr-kb-cat__name { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.dr-kb-cat__desc { display: block; margin-top: 4px; color: var(--dr-ink-2); font-size: 13px; line-height: 1.5; }
.dr-kb-cat__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; }
.dr-kb-cat__meta i { color: var(--dr-accent); transition: transform .18s ease; }
.dr-kb-cat:hover .dr-kb-cat__meta i { transform: translateX(3px); }
/* article cards */
.dr-kb-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dr-kb-art { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dr-kb-art:hover { transform: translateY(-2px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; }
.dr-kb-art__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dr-soft); color: var(--dr-accent); font-size: 15px; }
.dr-kb-art__copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dr-kb-art__title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.dr-kb-art__summary { display: block; margin-top: 5px; color: var(--dr-ink-2); font-size: 13px; line-height: 1.55; }
.dr-kb-art__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; color: var(--dr-ink-3); font-size: 12px; font-weight: 600; }
.dr-kb-art__read { color: var(--dr-accent); font-weight: 700; }
.dr-kb-art__read i { transition: transform .18s ease; }
.dr-kb-art:hover .dr-kb-art__read i { transform: translateX(3px); }
/* article page */
.dr-kb-article-card { padding: 24px 28px; }
.dr-kb-article__cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent) !important; font-size: 12px; font-weight: 700; }
.dr-kb-article__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch; }
.dr-kb-article__layout:has(.dr-kb-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr) 220px; }
/* the reading column sits centred in its card; left-aligned it left a blank third of the card on wide screens */
.dr-kb-article { max-width: 800px; margin-inline: auto; font-size: 16px; line-height: 1.75; color: var(--dr-ink); }
.dr-kb-article p { margin: 0 0 1em; }
.dr-kb-article h1, .dr-kb-article h2, .dr-kb-article h3, .dr-kb-article h4 { margin: 1.6em 0 .5em; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; scroll-margin-top: 90px; }
.dr-kb-article h1 { font-size: 26px; } .dr-kb-article h2 { font-size: 21px; } .dr-kb-article h3 { font-size: 17px; } .dr-kb-article h4 { font-size: 15px; }
.dr-kb-article ul, .dr-kb-article ol { padding-left: 1.4em; margin: 0 0 1em; }
.dr-kb-article li { margin-bottom: .35em; }
.dr-kb-article blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink-2); }
.dr-kb-article pre { margin: 1.2em 0; padding: 14px 16px; border-radius: 12px; background: var(--dr-surface-2); font-size: 13px; overflow: auto; }
.dr-kb-article code { padding: 2px 6px; border-radius: 6px; background: var(--dr-surface-2); font-family: var(--dr-mono); font-size: .92em; }
.dr-kb-article pre code { padding: 0; background: transparent; }
.dr-kb-article table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14px; }
.dr-kb-article th, .dr-kb-article td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; }
.dr-kb-article th { background: var(--dr-soft); font-weight: 700; }
.dr-kb-article img { max-width: 100%; height: auto; border-radius: 12px; }
.dr-kb-article .callout { margin: 1.2em 0; padding: 14px 16px; border: 1px solid rgba(var(--dr-accent-rgb), .3); border-radius: 12px; background: var(--dr-accent-tint); }
.dr-kb-toc { position: sticky; top: 90px; align-self: start; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-soft); }
.dr-kb-toc__title { display: block; margin-bottom: 8px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dr-kb-toc__list { margin: 0; padding: 0; list-style: none; }
.dr-kb-toc__list li { margin: 0; }
.dr-kb-toc__list a { display: block; padding: 5px 0 5px 10px; border-left: 2px solid transparent; color: var(--dr-ink-2); font-size: 13px; line-height: 1.4; }
.dr-kb-toc__list a:hover, .dr-kb-toc__list a.is-active { border-left-color: var(--dr-accent); color: var(--dr-accent); text-decoration: none; }
.dr-kb-toc__list li.is-sub a { padding-left: 22px; font-size: 12.5px; }
.dr-kb-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; }
.dr-kb-tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12px; font-weight: 600; }
.dr-kb-tag:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); text-decoration: none; }
.dr-kb-helpful { margin: 22px -28px -24px; padding: 16px 28px; border-top: 1px solid var(--dr-line); border-radius: 0 0 var(--dr-radius-card) var(--dr-radius-card); background: var(--dr-soft); }
.dr-kb-helpful__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dr-kb-helpful__copy { display: flex; flex-direction: column; gap: 2px; }
.dr-kb-helpful__copy strong { font-size: 14px; }
.dr-kb-helpful__copy span { color: var(--dr-ink-2); font-size: 12.5px; }
.dr-kb-helpful__buttons { display: flex; gap: 8px; }
@media (max-width: 991.98px) {
  .dr-kb-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .dr-kb-article__layout:has(.dr-kb-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .dr-kb-toc { position: static; order: -1; }
}
@media (max-width: 575.98px) {
  .dr-kb-hero__search { flex-wrap: wrap; }
  .dr-kb-hero__search .btn { width: 100%; }
  .dr-kb-article-card { padding: 20px 18px; }
  .dr-kb-helpful { margin: 18px -18px -20px; padding: 14px 18px; }
  .dr-kb-articles { grid-template-columns: minmax(0, 1fr); }
  .dr-kb-cat-intro { flex-direction: column; }
}

/* Contact page: on wide screens the aside stretches to the form's height and the map
   takes whatever is left under the address card, so the map's bottom edge sits flush
   with the form's. On narrow screens the map keeps its fixed height. */
@media (min-width: 1024px) {
  .dr-contact-layout { align-items: stretch; margin-bottom: 18px; }
  .dr-contact-layout > .dr-card, .dr-contact-layout .dr-side > .dr-card:last-child { margin-bottom: 0; }
  .dr-contact-layout .dr-side { display: flex; flex-direction: column; align-content: stretch; }
  .dr-contact-layout .dr-contact-map { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 260px; }
  .dr-contact-layout .dr-contact-map iframe { flex: 1 1 auto; height: auto; min-height: 210px; }
  .dr-contact-layout .dr-contact-map > div:not(.dr-contact-map__caption) { flex: 1 1 auto; min-height: 0; }
}

/* ---------------------------------------------------------------- article shell
   The card an update or a knowledgebase article is read in: media, kicker, body
   column, table of contents, share row. The two systems share only this shell;
   their content blocks and template treatments are separate (below). */
.dr-article { padding: 0; overflow: hidden; overflow: clip; } /* clip, not hidden: a hidden overflow would stop the table of contents sticking */
.dr-article__media { margin: 0; overflow: hidden; background: var(--dr-soft); }
.dr-article__media img { display: block; width: 100%; aspect-ratio: 21 / 9; max-height: 460px; object-fit: cover; }
.dr-article__inner { padding: 22px 28px 0; }
.dr-article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dr-line-soft); }
.dr-article__kicker .dr-news__kind i { margin-right: 5px; font-size: 10px; }
.dr-article__readtime { color: var(--dr-ink-3); font-size: 12.5px; font-weight: 600; }
.dr-article__layout { padding-bottom: 6px; }
.dr-article__body { max-width: 800px; margin-inline: auto; }
.dr-article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px -28px 0; padding: 14px 28px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); }
.dr-article__share { display: inline-flex; align-items: center; gap: 8px; }
.dr-article__share-label { margin-right: 4px; color: var(--dr-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-article__share .dr-iconbtn { width: 34px; height: 34px; }
.dr-article__share .dr-iconbtn.is-done { border-color: var(--dr-ok); color: var(--dr-ok); }
.dr-article__notice { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--dr-amber-tint); color: var(--dr-amber); font-size: 13.5px; font-weight: 700; }
.dr-article__notice i { font-size: 18px; }
@media (max-width: 767.98px) {
  .dr-article__inner { padding: 18px 18px 0; }
  .dr-article__foot { margin: 18px -18px 0; padding: 12px 18px; }
  .dr-article__notice { padding: 10px 18px; }
  .dr-article__media img { aspect-ratio: 16 / 9; }
}

/* Previous / next update: the newsroom read in order rather than one article at a time.
   Two equal tiles, the second pushed right so a missing neighbour leaves a gap on its
   own side instead of sliding the other one across the page. */
.dr-update-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; }
.dr-update-nav__link { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card); background: var(--dr-panel); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dr-update-nav__link--next { text-align: right; }
.dr-update-nav__link.is-empty { border: 1px dashed var(--dr-line-soft); background: none; }
a.dr-update-nav__link:hover, a.dr-update-nav__link:focus-visible { border-color: var(--dr-accent); transform: translateY(-1px); text-decoration: none; }
.dr-update-nav__label { color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-update-nav__title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.dr-update-nav__date { color: var(--dr-ink-3); font-size: 12.5px; }
@media (max-width: 575.98px) {
  .dr-update-nav { grid-template-columns: 1fr; }
  .dr-update-nav__link--next { text-align: left; }
  .dr-update-nav__link.is-empty { display: none; }
}

/* ================================================================ UPDATES · the newsroom
   Updates are news: announcements, releases, launches, service status. The body
   is set larger and looser than documentation, with bold accent blocks. The blocks
   the Updates editor inserts carry news-* classes and are styled only here. */
.dr-update__body { font-size: 16px; line-height: 1.75; }
.dr-update__body h2 { margin: 1.5em 0 .5em; font-size: 22px; letter-spacing: -.015em; scroll-margin-top: 90px; }
.dr-update__body h3 { margin: 1.3em 0 .4em; font-size: 17px; scroll-margin-top: 90px; }
.dr-update__body p, .dr-update__body ul, .dr-update__body ol { margin: 0 0 1.05em; }
.dr-update__body img { max-width: 100%; height: auto; border-radius: 12px; }
.dr-update__body blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--dr-accent); color: var(--dr-ink); font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.dr-update__body blockquote p { margin: 0 0 6px; }
.dr-update__body blockquote footer { margin-top: 6px; color: var(--dr-ink-3); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dr-update__body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14.5px; }
.dr-update__body th, .dr-update__body td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; }
.dr-update__body th { background: var(--dr-soft); font-weight: 700; }
/* lead */
.dr-update__body .news-deck { margin: 0 0 24px; color: var(--dr-ink-2); font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
/* dateline facts */
.dr-update__body .news-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.dr-update__body .news-facts p { display: inline-flex; flex-direction: column; gap: 2px; min-width: 140px; margin: 0; padding: 10px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-soft); font-size: 14.5px; line-height: 1.4; }
.dr-update__body .news-facts strong { color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* heads-up, action required, good news */
.dr-update__body .news-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 1.4em 0; padding: 16px 20px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-ink); }
.dr-update__body .news-notice::before { content: "\f05a"; grid-row: 1 / span 9; align-self: start; margin-top: 2px; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 20px; font-weight: 900; }
.dr-update__body .news-notice > p { grid-column: 2; margin: 0 0 4px; font-size: 15px; }
.dr-update__body .news-notice > p:last-child { margin-bottom: 0; }
.dr-update__body .news-notice > p:first-child strong { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-accent); }
.dr-update__body .news-notice--urgent { background: var(--dr-amber-tint); box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .3); }
.dr-update__body .news-notice--urgent::before { content: "\f071"; color: var(--dr-amber); }
.dr-update__body .news-notice--urgent > p:first-child strong { color: var(--dr-amber); }
.dr-update__body .news-notice--good { background: var(--dr-ok-tint); }
.dr-update__body .news-notice--good::before { content: "\f058"; color: var(--dr-ok); }
.dr-update__body .news-notice--good > p:first-child strong { color: var(--dr-ok); }
/* pull quote */
.dr-update__body .news-quote { position: relative; margin: 1.6em 0; padding: 22px 24px 18px 30px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); font-size: 20px; }
.dr-update__body .news-quote::before { content: "\f10d"; position: absolute; left: 18px; top: -12px; padding: 0 6px; background: var(--dr-surface); color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 18px; font-weight: 900; }
/* highlights */
.dr-update__body .news-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 1.2em 0; padding: 0; list-style: none; }
.dr-update__body .news-highlights > li { margin: 0; padding: 16px 18px; border-radius: 14px; background: linear-gradient(160deg, var(--dr-accent-tint), var(--dr-surface)); border: 1px solid var(--dr-line-card); font-size: 14.5px; line-height: 1.55; }
.dr-update__body .news-highlights > li strong { display: block; margin-bottom: 4px; color: var(--dr-ink); font-size: 15.5px; }
/* change list & roadmap */
.dr-update__body .news-changes, .dr-update__body .news-roadmap { margin: 1em 0 1.6em; padding: 0; list-style: none; }
.dr-update__body .news-changes li, .dr-update__body .news-roadmap li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--dr-line-soft); font-size: 15px; }
.dr-update__body .news-tag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 74px; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-update__body .news-tag.is-added, .dr-update__body .news-tag.is-shipping { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-update__body .news-tag.is-changed, .dr-update__body .news-tag.is-planned { background: var(--dr-info-tint); color: var(--dr-info); }
.dr-update__body .news-tag.is-fixed, .dr-update__body .news-tag.is-exploring { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-update__body .news-tag.is-removed { background: var(--dr-bad-tint); color: var(--dr-bad); }
/* version */
.dr-update__body .news-version { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.dr-update__body .news-version__number { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent); font-family: var(--dr-mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.dr-update__body .news-version__date { color: var(--dr-ink-3); font-size: 13px; font-weight: 700; }
/* image */
.dr-update__body .news-figure { margin: 1.6em 0; }
.dr-update__body .news-figure img { display: block; width: 100%; border-radius: 16px; box-shadow: var(--dr-shadow-card); }
.dr-update__body .news-figure figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; font-style: italic; text-align: center; }
/* video: a poster and a play button; the player is loaded when the reader presses play */
.dr-update__body .news-video { margin: 1.6em 0; }
.dr-update__body .news-video__poster, .dr-update__body .news-video__file, .dr-update__body .news-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #14131a; box-shadow: var(--dr-shadow-card); }
.dr-update__body .news-video--4x3 .news-video__poster, .dr-update__body .news-video--4x3 .news-video__file, .dr-update__body .news-video--4x3 .news-video__frame { aspect-ratio: 4 / 3; }
.dr-update__body .news-video--1x1 .news-video__poster, .dr-update__body .news-video--1x1 .news-video__file, .dr-update__body .news-video--1x1 .news-video__frame { aspect-ratio: 1 / 1; }
.dr-update__body .news-video--9x16 .news-video__poster, .dr-update__body .news-video--9x16 .news-video__file, .dr-update__body .news-video--9x16 .news-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
.dr-update__body .news-video__poster img, .dr-update__body .news-video__file, .dr-update__body .news-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.dr-update__body .news-video__poster img { opacity: .94; transition: transform .5s ease, opacity .3s ease; }
.dr-update__body .news-video__poster:hover img { transform: scale(1.03); opacity: 1; }
.dr-update__body .news-video__poster--blank { background: linear-gradient(135deg, var(--dr-accent), var(--dr-violet)); }
.dr-update__body .news-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.dr-update__body .news-video__frame video { object-fit: contain; background: #14131a; }
.dr-update__body .news-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--dr-accent); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease, background .18s ease; }
.dr-update__body 
.dr-update__body .news-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.dr-update__body .news-video figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; text-align: center; }
/* timeline & agenda */
.dr-update__body .news-timeline { margin: 1.2em 0 1.6em; padding: 4px 0 4px 26px; list-style: none; border-left: 2px solid rgba(var(--dr-accent-rgb), .35); }
.dr-update__body .news-timeline li { position: relative; margin: 0 0 18px; padding-left: 8px; }
.dr-update__body .news-timeline li:last-child { margin-bottom: 0; }
.dr-update__body .news-timeline li::before { content: ""; position: absolute; left: -34px; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--dr-surface); background: var(--dr-accent); box-shadow: 0 0 0 2px rgba(var(--dr-accent-rgb), .3); }
.dr-update__body .news-timeline li:last-child::before { background: var(--dr-ok); box-shadow: 0 0 0 2px rgba(30, 120, 70, .3); }
.dr-update__body .news-timeline time { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-update__body .news-timeline strong { display: block; color: var(--dr-ink); }
.dr-update__body .news-timeline p { margin: 2px 0 0; font-size: 14.5px; }
/* status line */
.dr-update__body .news-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--dr-ink); font-weight: 600; }
.dr-update__body .news-status__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-update__body .news-status__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dr-update__body .news-status__pill.is-resolved { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-update__body .news-status__pill.is-investigating { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-update__body .news-status__pill.is-monitoring, .dr-update__body .news-status__pill.is-identified, .dr-update__body .news-status__pill.is-scheduled { background: var(--dr-amber-tint); color: var(--dr-amber); }
/* call to action */
.dr-update__body .news-cta { margin: 1.6em 0; }
.dr-update__body .news-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent) !important; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(var(--dr-accent-rgb), .28); transition: transform .15s ease, box-shadow .15s ease; }
.dr-update__body .news-cta a::after { content: "\f061"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; }
.dr-update__body .news-cta a:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--dr-accent-rgb), .36); }
/* related links, Q&A carried over, revision line */
.dr-update__body .news-links { margin: 1.2em 0; padding: 0; list-style: none; }
.dr-update__body .news-links li { margin: 0 0 8px; padding: 12px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); font-size: 14.5px; }
.dr-update__body .news-links a { font-weight: 700; }
.dr-update__body .news-qa { margin: 12px 0; padding: 16px 20px; border-radius: 14px; background: var(--dr-soft); }
.dr-update__body .news-qa h3 { margin: 0 0 6px; font-size: 16px; }
.dr-update__body .news-qa p { margin: 0 0 6px; font-size: 15px; }
.dr-update__body .news-revision { margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 13px; }
@media (max-width: 575.98px) {
  .dr-update__body { font-size: 15.5px; }
  .dr-update__body .news-highlights { grid-template-columns: minmax(0, 1fr); }
  .dr-update__body .news-facts p { flex: 1 1 100%; }
  .dr-update__body blockquote, .dr-update__body .news-quote { font-size: 17px; }
}
/* -- newsroom treatments, one per template -- */
/* feature: a story - wide picture, drop cap, big quotes */
.dr-update--feature .dr-article__media img { aspect-ratio: 2 / 1; max-height: 520px; }
.dr-update--feature .dr-update__body { max-width: 720px; font-size: 17px; line-height: 1.8; }
.dr-update--feature .dr-update__body .news-deck { font-size: 22px; }
.dr-update--feature .dr-update__body .news-deck + p::first-letter { float: left; margin: 6px 10px 0 0; color: var(--dr-accent); font-size: 58px; font-weight: 800; line-height: .8; }
.dr-update--feature .dr-update__body h2 { font-size: 24px; }
.dr-update--feature .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); }
/* brief: compact, numbered sections */
.dr-update--brief .dr-update__body { font-size: 15px; line-height: 1.65; counter-reset: brief; }
.dr-update--brief .dr-update__body h2 { display: flex; align-items: center; gap: 12px; margin-top: 1.5em; font-size: 18px; counter-increment: brief; }
.dr-update--brief .dr-update__body h2::before { content: counter(brief, decimal-leading-zero); display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--dr-accent-tint); color: var(--dr-accent); font-family: var(--dr-mono); font-size: 12px; font-weight: 700; }
.dr-update--brief .dr-update__body .news-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dr-update--brief .dr-update__body ul { padding-left: 0; list-style: none; }
.dr-update--brief .dr-update__body ul > li { position: relative; margin: 0 0 6px; padding-left: 22px; }
.dr-update--brief .dr-update__body ul > li::before { content: "\f054"; position: absolute; left: 2px; top: 6px; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; }
.dr-update--brief .dr-article__media img { aspect-ratio: 21 / 7; }
/* community: warm */
.dr-update--community .dr-article__media { padding: 18px 18px 0; background: linear-gradient(180deg, var(--dr-amber-tint), transparent); }
.dr-update--community .dr-article__media img { border-radius: 14px; aspect-ratio: 16 / 8; }
.dr-update--community .dr-update__body { max-width: 720px; font-size: 16.5px; line-height: 1.8; }
.dr-update--community .dr-update__body .news-deck { color: var(--dr-ink); }
.dr-update--community .dr-update__body h2 { padding-bottom: 8px; border-bottom: 2px solid var(--dr-amber-tint); }
.dr-update--community .dr-update__body h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 8px; margin-bottom: -10px; background: var(--dr-amber); }
.dr-update--community .dr-update__body .news-quote { background: var(--dr-amber-tint); }
.dr-update--community .dr-update__body .news-quote::before { color: var(--dr-amber); }
.dr-update--community .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); }
/* notice: amber, checklists */
.dr-update--notice .dr-article__media img { aspect-ratio: 21 / 8; }
.dr-update--notice .dr-update__body h2 { color: var(--dr-amber); }
.dr-update--notice .dr-update__body ol { padding-left: 0; list-style: none; counter-reset: todo; }
.dr-update--notice .dr-update__body ol > li { position: relative; margin: 0 0 8px; padding: 10px 14px 10px 46px; border: 1px solid rgba(180, 83, 9, .25); border-radius: 12px; background: var(--dr-surface); counter-increment: todo; }
.dr-update--notice .dr-update__body ol > li::before { content: counter(todo); position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--dr-amber); color: #fff; font-size: 12px; font-weight: 800; }
.dr-update--notice .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); }
/* release notes: quiet uppercase sections, version first */
.dr-update--release-notes .dr-update__body h2 { margin-top: 1.8em; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-ink-3); }
.dr-update--release-notes .dr-update__body .news-deck { font-size: 17px; }
.dr-update--release-notes .dr-article__media img { aspect-ratio: 21 / 8; }
.dr-update--release-notes .dr-news__kind { background: var(--dr-info-tint); color: var(--dr-info); }
/* launch: big, gradient lead */
.dr-update--launch .dr-article__media img { aspect-ratio: 2 / 1; max-height: 520px; }
.dr-update--launch .dr-update__body h2 { font-size: 24px; letter-spacing: -.02em; }
.dr-update--launch .dr-update__body .news-deck { margin-bottom: 26px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); color: var(--dr-ink); font-size: 21px; }
.dr-update--launch .dr-news__kind { background: var(--dr-accent); color: var(--dr-on-accent); }
/* status & maintenance: amber headings, amber dateline */
.dr-update--status .dr-update__body h2, .dr-update--maintenance .dr-update__body h2 { color: var(--dr-amber); }
.dr-update--status .dr-update__body .news-facts p, .dr-update--maintenance .dr-update__body .news-facts p { border-color: rgba(180, 83, 9, .3); background: var(--dr-amber-tint); }
.dr-update--status .dr-news__kind, .dr-update--maintenance .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-update--status .dr-article__media img, .dr-update--maintenance .dr-article__media img { aspect-ratio: 21 / 8; }
.dr-update--maintenance .dr-update__body ul { padding-left: 0; list-style: none; }
.dr-update--maintenance .dr-update__body ul > li { position: relative; margin: 0 0 8px; padding-left: 30px; }
.dr-update--maintenance .dr-update__body ul > li::before { content: "\f017"; position: absolute; left: 0; top: 3px; color: var(--dr-amber); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; }
/* event: warm, agenda as timeline */
.dr-update--event .dr-article__media { padding: 18px 18px 0; background: linear-gradient(180deg, var(--dr-violet-tint), transparent); }
.dr-update--event .dr-article__media img { border-radius: 14px; aspect-ratio: 16 / 7; }
.dr-update--event .dr-update__body .news-facts p { background: var(--dr-violet-tint); border-color: transparent; }
.dr-update--event .dr-update__body .news-facts strong { color: var(--dr-violet); }
.dr-update--event .dr-update__body .news-timeline li::before, .dr-update--event .dr-update__body .news-timeline li:last-child::before { background: var(--dr-violet); box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); }
.dr-update--event .dr-update__body .news-cta a { background: var(--dr-violet); box-shadow: 0 8px 20px rgba(124, 58, 237, .28); }
.dr-update--event .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); }
/* roadmap: sections as lanes */
.dr-update--roadmap .dr-update__body h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-ink-3); }
.dr-update--roadmap .dr-update__body h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dr-accent); }
.dr-update__body .news-roadmap li { display: block; }
.dr-update__body .news-roadmap li .news-tag { float: left; margin: 2px 10px 0 0; }
.dr-update__body .news-roadmap li::after { content: ""; display: block; clear: both; }
.dr-update--roadmap .dr-update__body .news-roadmap li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); }
.dr-update--roadmap .dr-article__media img { aspect-ratio: 21 / 7; }
@media (max-width: 767.98px) {
  .dr-update--feature .dr-update__body { font-size: 16px; }
}

/* ================================================================ KNOWLEDGEBASE · the resource centre
   Articles are documentation: tighter type, quiet surfaces, numbered steps, key
   facts, notes. The blocks the Knowledgebase editor inserts carry doc-* classes and
   are styled only here. */
.dr-doc__kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--dr-line-card); border-radius: 8px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-doc__kind i { font-size: 10px; color: var(--dr-accent); }
.dr-kb-art__kind { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-doc__notice { display: flex; align-items: center; gap: 12px; margin: -24px -28px 18px; padding: 12px 28px; border-radius: var(--dr-radius-card) var(--dr-radius-card) 0 0; background: var(--dr-bad-tint); color: var(--dr-bad); font-size: 13.5px; font-weight: 700; }
.dr-doc__notice i { font-size: 18px; }
.dr-doc__body { max-width: 760px; font-size: 15px; line-height: 1.7; }
.dr-doc__body h2 { margin: 1.6em 0 .5em; font-size: 20px; letter-spacing: -.01em; scroll-margin-top: 90px; }
.dr-doc__body h3 { margin: 1.3em 0 .4em; font-size: 16px; scroll-margin-top: 90px; }
.dr-doc__body p, .dr-doc__body ul, .dr-doc__body ol, .dr-doc__body dl { margin: 0 0 1em; }
.dr-doc__body img { max-width: 100%; height: auto; border-radius: 10px; }
.dr-doc__body code { padding: 2px 6px; border-radius: 6px; background: var(--dr-surface-2); font-family: var(--dr-mono); font-size: .92em; }
.dr-doc__body pre { margin: 1.2em 0; padding: 14px 16px; border-radius: 12px; background: var(--dr-surface-2); font-size: 13px; overflow: auto; }
.dr-doc__body pre code { padding: 0; background: transparent; }
.dr-doc__body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14px; }
.dr-doc__body th, .dr-doc__body td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; vertical-align: top; }
.dr-doc__body th { background: var(--dr-soft); font-weight: 700; }
.dr-doc__body blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink-2); }
/* summary */
.dr-doc__body .doc-summary { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink); font-size: 16px; line-height: 1.6; }
/* key facts */
.dr-doc__body .doc-meta { display: grid; gap: 0; margin: 0 0 22px; border: 1px solid var(--dr-line-card); border-radius: 12px; overflow: hidden; font-size: 14px; }
.dr-doc__body .doc-meta p { display: flow-root; margin: 0; padding: 9px 14px 9px 164px; line-height: 1.6; border-bottom: 1px solid var(--dr-line-soft); } /* not a grid: a grid turns every <em> or <a> in the value into its own cell */
.dr-doc__body .doc-meta p:last-child { border-bottom: 0; }
.dr-doc__body .doc-meta p:nth-child(odd) { background: var(--dr-soft); }
.dr-doc__body .doc-meta p > strong:first-child { float: left; width: 140px; margin-left: -150px; line-height: 22.4px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* notes */
.dr-doc__body .doc-note { margin: 1.3em 0; padding: 14px 18px 14px 20px; border: 1px solid var(--dr-line-card); border-left: 4px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-surface); }
.dr-doc__body .doc-note > p { margin: 0 0 6px; font-size: 14.5px; }
.dr-doc__body .doc-note > p:last-child { margin-bottom: 0; }
.dr-doc__body .doc-note > p:first-child strong { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-accent); }
.dr-doc__body .doc-note > p:first-child strong::before { content: "\f05a"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; }
.dr-doc__body .doc-note--warning { border-left-color: var(--dr-amber); background: var(--dr-amber-tint); border-color: rgba(180, 83, 9, .25); }
.dr-doc__body .doc-note--warning > p:first-child strong { color: var(--dr-amber); }
.dr-doc__body .doc-note--warning > p:first-child strong::before { content: "\f071"; }
.dr-doc__body .doc-note--safety { border-left-color: var(--dr-bad); background: var(--dr-bad-tint); border-color: rgba(190, 40, 40, .25); }
.dr-doc__body .doc-note--safety > p:first-child strong { color: var(--dr-bad); }
.dr-doc__body .doc-note--safety > p:first-child strong::before { content: "\f3ed"; }
.dr-doc__body .doc-note--result { border-left-color: var(--dr-ok); background: var(--dr-ok-tint); border-color: rgba(30, 120, 70, .25); }
.dr-doc__body .doc-note--result > p:first-child strong { color: var(--dr-ok); }
.dr-doc__body .doc-note--result > p:first-child strong::before { content: "\f058"; }
/* before you start */
.dr-doc__body .doc-requirements { margin: 1.2em 0; padding: 14px 18px; border: 1px dashed rgba(var(--dr-accent-rgb), .45); border-radius: 12px; background: var(--dr-accent-tint); }
.dr-doc__body .doc-requirements > p:first-child { margin: 0 0 8px; }
.dr-doc__body .doc-requirements > p:first-child strong { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-accent); }
.dr-doc__body .doc-requirements ul { margin: 0; padding-left: 20px; }
.dr-doc__body .doc-requirements li { margin-bottom: 4px; }
/* steps */
.dr-doc__body .doc-steps { margin: 1.2em 0 1.6em; padding: 0; list-style: none; counter-reset: docstep; }
.dr-doc__body .doc-steps > li { position: relative; margin: 0 0 10px; padding: 14px 16px 14px 60px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); counter-increment: docstep; }
.dr-doc__body .doc-steps > li::before { content: counter(docstep); position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 13px; font-weight: 800; }
.dr-doc__body .doc-steps > li strong { display: block; margin-bottom: 4px; color: var(--dr-ink); font-size: 15px; }
.dr-doc__body .doc-steps > li p { margin: 0 0 6px; font-size: 14.5px; }
.dr-doc__body .doc-steps > li p:last-child { margin-bottom: 0; }
.dr-doc__body .doc-steps > li time { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* checklist */
.dr-doc__body .doc-checklist { margin: 1em 0 1.4em; padding: 0; list-style: none; }
.dr-doc__body .doc-checklist > li { position: relative; margin: 0 0 8px; padding: 8px 12px 8px 40px; border-radius: 10px; background: var(--dr-soft); }
.dr-doc__body .doc-checklist > li::before { content: "\f00c"; position: absolute; left: 12px; top: 9px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--dr-ok-tint); color: var(--dr-ok); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; }
/* definitions & fact tiles */
.dr-doc__body .doc-terms { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 0; margin: 1.2em 0; border: 1px solid var(--dr-line-card); border-radius: 12px; overflow: hidden; }
.dr-doc__body .doc-terms dt { padding: 10px 14px; background: var(--dr-soft); border-bottom: 1px solid var(--dr-line-soft); font-weight: 800; font-size: 14px; }
.dr-doc__body .doc-terms dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--dr-line-soft); font-size: 14.5px; }
.dr-doc__body .doc-terms dt:last-of-type, .dr-doc__body .doc-terms dd:last-of-type { border-bottom: 0; }
.dr-doc__body .doc-glossary { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 0; margin: 1.2em 0; border: 1px solid var(--dr-line-card); border-radius: 12px; overflow: hidden; }
.dr-doc__body .doc-glossary dt { padding: 10px 14px; background: var(--dr-soft); border-bottom: 1px solid var(--dr-line-soft); font-weight: 800; font-size: 14px; }
.dr-doc__body .doc-glossary dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--dr-line-soft); font-size: 14.5px; }
.dr-doc__body .doc-glossary dt:last-of-type, .dr-doc__body .doc-glossary dd:last-of-type { border-bottom: 0; }
.dr-doc__body .doc-term-alt { display: block; margin-top: 2px; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 500; font-style: italic; }
.dr-doc__body .doc-timeline { position: relative; margin: 1em 0 1.4em; padding: 0 0 0 22px; list-style: none; }
.dr-doc__body .doc-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; border-radius: 2px; background: var(--dr-line-card); }
.dr-doc__body .doc-timeline li { position: relative; margin: 0; padding: 6px 0 10px; font-size: 14.5px; }
.dr-doc__body .doc-timeline li::before { content: ""; position: absolute; top: 12px; left: -21px; width: 10px; height: 10px; border-radius: 50%; background: var(--dr-accent); box-shadow: 0 0 0 3px var(--dr-surface); }
.dr-doc__body .doc-timeline li > strong:first-child { color: var(--dr-accent); font-weight: 800; }
.dr-doc__body .doc-credit { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.dr-doc__body .doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 1.2em 0; padding: 0; list-style: none; }
.dr-doc__body .doc-grid > li { margin: 0; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 10px; background: var(--dr-surface); font-size: 14px; line-height: 1.55; }
.dr-doc__body .doc-grid > li strong { display: block; margin-bottom: 2px; color: var(--dr-ink); }
/* question & answer */
.dr-doc__body .doc-qa { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); }
.dr-doc__body .doc-qa h3 { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-size: 15.5px; line-height: 1.4; }
.dr-doc__body .doc-qa h3::before { content: "Q"; flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 12px; font-weight: 800; }
.dr-doc__body .doc-qa p { margin: 0 0 8px; padding-left: 34px; font-size: 14.5px; }
.dr-doc__body .doc-qa p:last-child { margin-bottom: 0; }
/* comparison table */
.dr-doc__body .doc-compare { font-size: 14px; }
.dr-doc__body .doc-compare thead th { background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.dr-doc__body .doc-compare tbody th { background: var(--dr-soft); width: 28%; }
.dr-doc__body .doc-compare td.is-yes { color: var(--dr-ok); }
.dr-doc__body .doc-compare td.is-no { color: var(--dr-ink-3); }
/* change list */
.dr-doc__body .doc-changes { margin: 1em 0 1.4em; padding: 0; list-style: none; }
.dr-doc__body .doc-changes li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--dr-line-soft); font-size: 14.5px; }
.dr-doc__body .doc-tag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 66px; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-doc__body .doc-tag.is-added, .dr-doc__body .doc-tag.is-resolved { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-doc__body .doc-tag.is-changed { background: var(--dr-info-tint); color: var(--dr-info); }
.dr-doc__body .doc-tag.is-fixed, .dr-doc__body .doc-tag.is-monitoring { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-doc__body .doc-tag.is-removed, .dr-doc__body .doc-tag.is-investigating { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-doc__body .doc-status { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 600; }
/* version */
.dr-doc__body .doc-version { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 1.6em 0 .6em; padding-bottom: 6px; border-bottom: 2px solid var(--dr-line-soft); }
.dr-doc__body .doc-version:first-child { margin-top: 0; }
.dr-doc__body .doc-version__number { font-family: var(--dr-mono); font-size: 16px; font-weight: 700; color: var(--dr-ink); }
.dr-doc__body .doc-version__date { color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; }
/* screenshot */
.dr-doc__body .doc-figure { margin: 1.4em 0; }
.dr-doc__body .doc-figure img { display: block; width: 100%; border: 1px solid var(--dr-line-card); border-radius: 12px; }
.dr-doc__body .doc-figure figcaption { margin-top: 8px; color: var(--dr-ink-3); font-size: 13px; text-align: center; }
/* video: a poster and a play button; the player is loaded when the reader presses play */
.dr-doc__body .doc-video { margin: 1.6em 0; }
.dr-doc__body .doc-video__poster, .dr-doc__body .doc-video__file, .dr-doc__body .doc-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #14131a; box-shadow: var(--dr-shadow-card); }
.dr-doc__body .doc-video--4x3 .doc-video__poster, .dr-doc__body .doc-video--4x3 .doc-video__file, .dr-doc__body .doc-video--4x3 .doc-video__frame { aspect-ratio: 4 / 3; }
.dr-doc__body .doc-video--1x1 .doc-video__poster, .dr-doc__body .doc-video--1x1 .doc-video__file, .dr-doc__body .doc-video--1x1 .doc-video__frame { aspect-ratio: 1 / 1; }
.dr-doc__body .doc-video--9x16 .doc-video__poster, .dr-doc__body .doc-video--9x16 .doc-video__file, .dr-doc__body .doc-video--9x16 .doc-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
.dr-doc__body .doc-video__poster img, .dr-doc__body .doc-video__file, .dr-doc__body .doc-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; }
.dr-doc__body .doc-video__poster img { opacity: .94; transition: transform .5s ease, opacity .3s ease; }
.dr-doc__body .doc-video__poster:hover img { transform: scale(1.03); opacity: 1; }
.dr-doc__body .doc-video__poster--blank { background: linear-gradient(135deg, var(--dr-accent), var(--dr-violet)); }
.dr-doc__body .doc-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
.dr-doc__body .doc-video__frame video { object-fit: contain; background: #14131a; }
.dr-doc__body .doc-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--dr-accent); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease, background .18s ease; }
.dr-doc__body 
.dr-doc__body .doc-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.dr-doc__body .doc-video figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; text-align: center; }
/* related, revision, link */
.dr-doc__body .doc-sources { margin: 1.2em 0; padding: 0; list-style: none; border-top: 1px solid var(--dr-line-soft); }
.dr-doc__body .doc-sources li { margin: 0; padding: 9px 2px; border-bottom: 1px solid var(--dr-line-soft); font-size: 14px; }
.dr-doc__body .doc-sources a { font-weight: 700; }
.dr-doc__body .doc-revision { margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; }
.dr-doc__body .doc-cta { margin: 1.4em 0; }
.dr-doc__body .doc-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--dr-line-card); border-radius: 10px; background: var(--dr-surface); color: var(--dr-accent); font-weight: 700; text-decoration: none; }
@media (max-width: 575.98px) {
  .dr-doc__body table, .dr-update__body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* a wide table scrolls inside the card, never the page */
  .dr-doc__notice { margin: -20px -18px 16px; padding: 10px 18px; }
  .dr-doc__body .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .dr-doc__body .doc-terms, .dr-doc__body .doc-glossary { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dr-doc__body .doc-meta p { padding-left: 14px; }
  .dr-doc__body .doc-meta p > strong:first-child { float: none; display: block; width: auto; margin: 0 0 2px; }
  .dr-doc__body .doc-terms dt, .dr-doc__body .doc-glossary dt { border-bottom: 0; padding-bottom: 4px; }
  .dr-doc__body .doc-steps > li { padding-left: 52px; }
}
/* -- resource treatments, one per template -- */
/* reference: default */
/* explainer: roomier, essay-like */
.dr-doc--explainer .dr-doc__body { font-size: 16px; line-height: 1.8; max-width: 720px; }
.dr-doc--explainer .dr-doc__body .doc-summary { border: 0; padding: 0; background: transparent; color: var(--dr-ink-2); font-size: 18px; }
.dr-doc--explainer .dr-doc__body h2 { font-size: 22px; }
/* procedure: numbered sections lead into numbered steps */
.dr-doc--procedure .dr-doc__body h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.dr-doc--procedure .dr-doc__body h2::before { content: "\f0ae"; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 14px; font-weight: 900; }
/* tutorial: numbered lessons */
.dr-doc--tutorial .dr-doc__body { counter-reset: lesson; }
.dr-doc--tutorial .dr-doc__body h2 { display: flex; align-items: center; gap: 14px; counter-increment: lesson; }
.dr-doc--tutorial .dr-doc__body h2::before { content: counter(lesson); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 14px; font-weight: 800; }
.dr-doc--tutorial .dr-doc__body h2 + p { padding-left: 48px; }
.dr-doc--tutorial .dr-doc__body .doc-figure { margin-left: 48px; }
/* faq: quiet section labels */
.dr-doc--faq .dr-doc__body h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); }
/* troubleshooting: amber headings, red symptoms */
.dr-doc--troubleshooting .dr-doc__body h2 { color: var(--dr-amber); }
.dr-doc--troubleshooting .dr-doc__body .doc-checklist > li::before { content: "\f00d"; background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-doc--troubleshooting .dr-doc__body .doc-steps > li::before { background: var(--dr-amber); color: #fff; }
/* changelog: versions as sections */
.dr-doc--changelog .dr-doc__body .doc-summary { border-left-color: var(--dr-info); }
.dr-doc--changelog .dr-doc__body .doc-version__number { color: var(--dr-info); }
/* spotlight: accent frame on the figure, tips as tiles */
.dr-doc--spotlight .dr-doc__body .doc-summary { border: 0; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); }
.dr-doc--spotlight .dr-doc__body .doc-figure img { border-color: rgba(var(--dr-accent-rgb), .4); box-shadow: var(--dr-shadow-card); }
.dr-doc--spotlight .dr-doc__body .doc-checklist > li::before { content: "\f0eb"; background: var(--dr-accent-tint); color: var(--dr-accent); }
/* security: red band, headings */
.dr-doc--security .dr-doc__body h2 { color: var(--dr-bad); }
.dr-doc--security .dr-doc__body .doc-checklist > li::before { content: "\f071"; background: var(--dr-amber-tint); color: var(--dr-amber); }
/* policy: formal - numbered clauses, serif-ish spacing */
.dr-doc--policy .dr-doc__body { counter-reset: clause; }
.dr-doc--policy .dr-doc__body h2 { display: flex; gap: 12px; font-size: 17px; counter-increment: clause; }
.dr-doc--policy .dr-doc__body h2::before { content: counter(clause) "."; color: var(--dr-ink-3); font-family: var(--dr-mono); }
.dr-doc--policy .dr-doc__body .doc-summary { border-left-color: var(--dr-ink-3); }
/* glossary: letter headings */
.dr-doc--glossary .dr-doc__body h2 { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; }
.dr-doc--glossary .dr-doc__body .doc-terms { border: 0; border-radius: 0; }
.dr-doc--glossary .dr-doc__body .doc-terms dt { background: transparent; padding-left: 0; }
/* checklist: everything is a checkbox */
.dr-doc--checklist .dr-doc__body h2 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); }
.dr-doc--checklist .dr-doc__body .doc-checklist > li { background: var(--dr-surface); border: 1px solid var(--dr-line-card); }
.dr-doc--checklist .dr-doc__body .doc-checklist > li::before { content: ""; width: 18px; height: 18px; border: 2px solid rgba(var(--dr-accent-rgb), .5); border-radius: 5px; background: var(--dr-surface); }
/* comparison: table leads */
.dr-doc--comparison .dr-doc__body .doc-compare thead th:not(:first-child) { text-align: center; }
.dr-doc--comparison .dr-doc__body .doc-compare td { text-align: center; }
@media (max-width: 575.98px) { .dr-doc--tutorial .dr-doc__body h2 + p, .dr-doc--tutorial .dr-doc__body .doc-figure { padding-left: 0; margin-left: 0; } }

/* ------------------------------------------------------------------ *
 * Mega menu
 *
 * The CMS's Mega Menu builder could be switched on and Draisap had nothing to draw
 * with it: a top-level item marked "dropdown-megamenu" fell through to the ordinary
 * dropdown, and the column HTML the CMS generates for it was printed inside a badge.
 * This is the panel. It spans the header's own container rather than hanging off the
 * trigger, so a menu with four columns is not a tall narrow list, and it carries the
 * same caret, radius, border and shadow as every other pane in the theme.
 * ------------------------------------------------------------------ */
/* The panel hangs off the header itself, not off the header's inner container: the container
   is capped at --dr-container and padded, and a sheet positioned inside it would stop short of
   the window edges. The header is sticky, so it is already the positioned ancestor. */
.dr-nav > li.dr-has-mega { position: static; }

/* Every mega menu is a full-bleed sheet: it spans the window under the header and lays its
   content out on the same container the header uses, so the panel lines up with the brand on
   the left and the account tools on the right however wide the window is. --dr-mega-top is the
   bottom edge of the header, which the script keeps current while a panel is open (the header
   is sticky and its height changes with the admin bar and pre-header). */
.dr-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--dr-mega-top, 72px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1000;
    display: none;
    padding: 30px 0 34px;
    border: 0;
    border-bottom: 1px solid var(--dr-line);
    border-radius: 0;
    background: var(--dr-surface);
    box-shadow: var(--dr-shadow-pop);
}
.dr-nav > li.show > .dr-mega { display: block; }
.dr-mega__inner {
    width: 100%;
    max-width: var(--dr-container, 1440px);
    margin: 0 auto;
    padding: 0 24px;
}

.dr-mega__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px; }
.dr-mega__cell { grid-column: span var(--dr-mega-span, 3); min-width: 0; }
.dr-mega--cards .dr-mega__cell { grid-column: span var(--dr-mega-span, 4); }

/* A column: the 2nd-level item is the heading, its own children are the links. */
.dr-mega__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--dr-line-soft);
    color: var(--dr-ink);
}
a.dr-mega__head:hover { color: var(--dr-accent); }
.dr-mega__head-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--dr-accent-tint);
    color: var(--dr-accent);
    font-size: 13px;
}
.dr-mega__head-copy { min-width: 0; }
.dr-mega__head-copy strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-mega__head-copy span { display: block; margin-top: 2px; color: var(--dr-ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.dr-mega__links { list-style: none; margin: 0; padding: 0; }
.dr-mega__links > li > a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    color: var(--dr-ink);
    font-size: 13.5px;
    font-weight: 600;
}
.dr-mega__links > li > a:hover, .dr-mega__links > li > a.is-current { color: var(--dr-accent); background: var(--dr-accent-tint); }
.dr-mega__links > li > a > i { flex: none; width: 16px; margin-top: 3px; text-align: center; color: var(--dr-ink-3); font-size: 12px; }
.dr-mega__links > li > a:hover > i, .dr-mega__links > li > a.is-current > i { color: inherit; }
/* The article's own picture, standing where the icon would be. Fixed box with object-fit
   so 1672x941 and 1920x1280 sources line up on the same left edge instead of stepping in
   and out; the row height is set by the two lines of text, and 34px sits inside that. */
.dr-mega__links > li > a > .dr-mega__thumb {
  flex: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 8px;
  object-fit: cover; background: var(--dr-panel); border: 1px solid var(--dr-line);
}
.dr-mega__links > li > a:hover > .dr-mega__thumb,
.dr-mega__links > li > a.is-current > .dr-mega__thumb { border-color: rgba(var(--dr-accent-rgb), .45); }
@media (max-width: 1023.98px) { .dr-mega__links > li > a > .dr-mega__thumb { width: 28px; height: 28px; } }
.dr-mega__links small { display: block; margin-top: 2px; color: var(--dr-ink-3); font-size: 12px; font-weight: 500; }

/* A card: a 2nd-level item with nothing under it is a destination in its own right. */
.dr-mega__card {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 12px;
    border-radius: 12px;
    color: var(--dr-ink);
    transition: background .15s ease, color .15s ease;
}
a.dr-mega__card:hover, .dr-mega__card.is-current { background: var(--dr-accent-tint); color: var(--dr-accent); }
.dr-mega__card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--dr-soft);
    color: var(--dr-accent);
    font-size: 15px;
}
a.dr-mega__card:hover .dr-mega__card-icon, .dr-mega__card.is-current .dr-mega__card-icon { background: var(--dr-surface); }
.dr-mega__card-copy { min-width: 0; flex: 1; }
.dr-mega__card-copy strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.dr-mega__card-copy span { display: block; margin-top: 2px; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
a.dr-mega__card:hover .dr-mega__card-copy span { color: inherit; opacity: .8; }
.dr-mega__card-arrow { flex: none; font-size: 11px; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
a.dr-mega__card:hover .dr-mega__card-arrow { opacity: .8; transform: translateX(0); }

/* A banner: the operator's promo block. */
.dr-mega__banner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 16px;
    border-radius: 14px;
    background: var(--dr-accent-tint);
    color: var(--dr-ink);
}
a.dr-mega__banner:hover { color: var(--dr-accent); }
.dr-mega__banner-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--dr-accent);
    color: var(--dr-on-accent);
    font-size: 16px;
}
.dr-mega__banner-copy { min-width: 0; flex: 1; }
.dr-mega__banner-copy strong { display: block; font-size: 14px; font-weight: 800; }
.dr-mega__banner-copy span { display: block; margin-top: 2px; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 500; }
.dr-mega__banner > i { flex: none; font-size: 12px; color: var(--dr-accent); }
.dr-mega__html { margin-top: 8px; color: var(--dr-ink-2); font-size: 13px; }
.dr-mega__html img { max-width: 100%; height: auto; border-radius: 10px; }
.dr-mega__html--banner { margin: 0; }

.dr-mega__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dr-line-soft); }
.dr-mega__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-accent); font-size: 13px; font-weight: 700; }
.dr-mega__foot a:hover { gap: 11px; }
.dr-mega__foot i { font-size: 11px; }

@media (max-width: 1199px) {
    .dr-mega__cell { grid-column: span 4; }
    .dr-mega--cards .dr-mega__cell { grid-column: span 6; }
}

/* The drawer's mega grouping on a phone. */
.dr-drawer__group { margin: 10px 0 2px; padding: 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dr-drawer__group a { color: inherit; }
.dr-drawer__group a:hover, .dr-drawer__group a.is-current { color: var(--dr-accent); }

/* A flat menu - one with no second-level columns - is still a mega menu, not a dropdown.
   It hangs off its own trigger rather than the header, but it is a panel: the section
   introduces itself on the left and its destinations sit in a multi-column grid beside it. */
.dr-mega--panel .dr-mega__inner {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 40px;
}

.dr-mega__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-right: 24px;
    border-right: 1px solid var(--dr-line-soft);
}
.dr-mega__intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border-radius: 12px;
    background: var(--dr-accent-tint);
    color: var(--dr-accent);
    font-size: 15px;
}
.dr-mega__intro > strong { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.dr-mega__intro > p { margin: 0; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.dr-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--dr-accent);
    font-size: 13px;
    font-weight: 700;
}
.dr-mega__cta:hover { gap: 11px; }
.dr-mega__cta i { font-size: 11px; }
/* With no description and no destination of its own, the section is just its name: centre it
   rather than leaving it stranded at the top of a tall, empty column. */
.dr-mega__intro:not(:has(.dr-mega__cta)):not(:has(p)) { justify-content: center; }

.dr-mega--panel .dr-mega__grid {
    align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px 14px;
}
.dr-mega--panel .dr-mega__cell { grid-column: auto; }
.dr-mega--panel .dr-mega__card { padding: 12px 14px; height: 100%; align-items: center; }

/* A card with no icon of its own is a clean row, not an empty circle in a big tile. */
.dr-mega__card:not(:has(.dr-mega__card-icon)) { padding-left: 14px; }
.dr-mega__head:not(:has(.dr-mega__head-icon)) { padding-left: 10px; }

@media (max-width: 991px) {
    .dr-mega { padding: 22px 0 26px; }
    .dr-mega__inner { padding: 0 16px; }
    .dr-mega--panel .dr-mega__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dr-mega__intro { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--dr-line-soft); }
    .dr-mega__intro:not(:has(.dr-mega__cta)):not(:has(p)) { justify-content: flex-start; }
    .dr-mega__cta { margin-top: 4px; }
    .dr-mega--panel .dr-mega__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── The management-level areas: the chooser page and the in-page switcher ────
   Rows, not tiles. These sit inside a card already, and a boxed tile inside a
   card is the card-in-card the rest of this theme avoids. The chooser reads as
   a list you pick from; the switcher reads as a row of links you step across. */
.dr-people-areas { display: flex; flex-direction: column; }

.dr-people-area {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 4px;
    border-top: 1px solid var(--dr-line-soft);
    color: var(--dr-ink);
    text-decoration: none;
    transition: background-color .15s ease, padding-left .15s ease;
}
.dr-people-areas > .dr-people-area:first-child { border-top: 0; }
.dr-people-area:hover,
.dr-people-area:focus-visible { background: var(--dr-soft); padding-left: 10px; color: var(--dr-ink); text-decoration: none; }
.dr-people-area:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }

.dr-people-area > strong { font-weight: 700; }
.dr-people-area > span { color: var(--dr-ink-2); font-size: 14px; }

/* The chevron marks these as somewhere to go, and keeps the right edge even. */
.dr-people-area::after {
    content: "\f054";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: var(--dr-ink-3);
}

/* Inline: the switcher on a level's own page. Pills, wrapping on narrow screens. */
.dr-people-areas--inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.dr-people-areas--inline > .dr-people-area {
    border-top: 0;
    padding: 8px 14px;
    border-radius: var(--dr-radius-pill);
    background: var(--dr-soft);
    font-size: 14px;
}
.dr-people-areas--inline > .dr-people-area:hover,
.dr-people-areas--inline > .dr-people-area:focus-visible { background: var(--dr-accent-tint); color: var(--dr-accent); padding-left: 14px; }
.dr-people-areas--inline > .dr-people-area::after { margin-left: 4px; }

.dr-people-switch .dr-people-areas--inline { margin-top: 4px; }

@media (max-width: 575px) {
    .dr-people-area > span { display: block; }
    .dr-people-area { flex-wrap: wrap; }
    .dr-people-areas--inline > .dr-people-area { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Ways to give — the giving index groups its causes, so each group needs a
   heading row of its own.
   -------------------------------------------------------------------------- */
.dr-give-group { margin-bottom: 34px; }
.dr-give-group:last-child { margin-bottom: 0; }
.dr-give-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.dr-give-group__head h2 { margin: 0; font-size: 21px; font-weight: 800; }
.dr-give-group__head p { margin: 4px 0 0; color: var(--dr-ink-2); font-size: 14.5px; max-width: 70ch; }


/* ── Giving: the amount control ───────────────────────────────────────────
   An amount is a short value. It was a full-width Bootstrap input group, which
   left a field the width of the card for four characters and put the currency
   in two grey slabs the legacy sheet painted. It is one field now, carrying its
   own affixes, no wider than the value it holds. */
.dr-amounts {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    margin-bottom: 12px;
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-card, 12px);
    background: var(--dr-surface);
    overflow: hidden;
}
.dr-amounts__pick {
    min-width: 96px;
    padding: 10px 18px;
    border: 0;
    border-left: 1px solid var(--dr-line);
    background: none;
    color: var(--dr-ink);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.dr-amounts__pick:first-child { border-left: 0; }
.dr-amounts__pick:hover { background: var(--dr-soft); }
.dr-amounts__pick:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: -2px; }
.dr-amounts__pick.is-chosen { background: var(--dr-accent); color: var(--dr-on-accent); }

.dr-amount {
    display: flex;
    align-items: stretch;
    width: 220px;
    max-width: 100%;
    border: 1px solid var(--dr-line);
    border-radius: var(--dr-radius-card, 12px);
    background: var(--dr-surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.dr-amount:focus-within {
    border-color: var(--dr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-accent) 16%, transparent);
}
.dr-amount__affix {
    display: flex;
    align-items: center;
    padding-left: 14px;
    color: var(--dr-ink-3);
    font-weight: 600;
    user-select: none;
}
.dr-amount__affix--end { padding: 0 14px 0 8px; }
.dr-amount__field {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 0;
    padding: 0 10px;
    border: 0;
    border-radius: inherit;
    background: none;
    box-shadow: none;
    color: var(--dr-ink);
    font-weight: 600;
    appearance: textfield;
    -moz-appearance: textfield;
}
.dr-amount__field:focus { outline: 0; box-shadow: none; }
.dr-amount__field::placeholder { color: var(--dr-ink-3); font-weight: 400; }
.dr-amount__field::-webkit-outer-spin-button,
.dr-amount__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dr-field__hint { display: block; margin-top: 6px; color: var(--dr-ink-3); font-size: 12.5px; }

.dr-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dr-side-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.dr-side-list li > i { flex: none; margin-top: 3px; color: var(--dr-ok); font-size: 11px; }
.dr-side-note { margin: 12px 0 0; color: var(--dr-ink-3); font-size: 12.5px; line-height: 1.55; }
.dr-side-note:first-child { margin-top: 0; }
.dr-sidecard__body > p { margin: 0 0 10px; }
.dr-sidecard__body > p:last-child { margin-bottom: 0; }

@media (max-width: 575px) {
    .dr-amounts { width: 100%; }
    .dr-amounts__pick { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
}

/* ── The lamp ─────────────────────────────────────────────────────────────
   A warm glow around the edges of the screen for anyone who finds a flat dark
   screen too stark. It is an overlay that catches no clicks, and it only exists
   in dark mode - the button is hidden in light mode and the glow is scoped to
   the dark scheme, so switching back to light never leaves a stray halo. */
html:not([data-theme="dark"]) .dr-lamp { display: none; }
html[data-lamp="on"] .dr-lamp { color: #ffb84d; }
html[data-lamp="on"] .dr-lamp > i { text-shadow: 0 0 10px rgba(255, 170, 60, .55); }

html[data-theme="dark"][data-lamp="on"]::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    pointer-events: none;
    z-index: 2147483000;
    /* A lamp throws light at the edge and falls away quickly; a wide, slow gradient
       reads as a tint over the whole screen instead. Short blur, no spread. */
    box-shadow:
        inset 0 0 34px 0 rgba(255, 150, 40, .34),
        inset 0 0 72px 4px rgba(255, 168, 60, .15),
        inset 0 0 0 1px rgba(255, 180, 90, .32);
}

/* Giving: cause cards with a picture and progress towards the goal. */
.dr-give-causes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.dr-give-cause { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; color: var(--dr-ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dr-give-cause:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; }
.dr-give-cause__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 42px; }
.dr-give-cause__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dr-give-cause:hover .dr-give-cause__media img { transform: scale(1.04); }
.dr-give-cause__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.dr-give-cause__title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.dr-give-cause__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; }
.dr-give-cause__button { align-self: flex-start; margin-top: auto; }
.dr-give-progress { display: grid; gap: 8px; }
.dr-give-progress__bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--dr-soft); }
.dr-give-progress__bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--dr-accent), var(--dr-teal)); }
.dr-give-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--dr-ink-2); }
.dr-give-progress__meta strong { color: var(--dr-ink); }
.dr-give-fee { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--dr-line-soft); border-radius: 14px; background: var(--dr-soft); }
.dr-give-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 2px 0; font-size: 14px; color: var(--dr-ink-2); }
.dr-give-total[hidden] { display: none; }
.dr-give-total strong { color: var(--dr-ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dr-give-dedication { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 10px; }
.dr-give-dedication [hidden] { display: none; }
@media (max-width: 575px) { .dr-give-dedication { grid-template-columns: minmax(0, 1fr); } }
.dr-give-supporters { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dr-give-supporters li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dr-line-soft); }
.dr-give-supporters li:last-child { border-bottom: 0; }
.dr-give-supporters__avatar { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.dr-give-supporters__avatar.is-anonymous { background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12px; }
.dr-give-supporters__who { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.dr-give-supporters__who strong { overflow: hidden; color: var(--dr-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dr-give-supporters__who small { color: var(--dr-ink-2); font-size: 12px; }
.dr-give-supporters__tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; }
.dr-give-story { margin-bottom: 18px; }
.dr-give-story .dr-article__inner { padding-bottom: 24px; }
.dr-give-story .dr-article__body { max-width: none; margin: 10px 0 0; }
.dr-give-story .dr-article__media img { max-height: 420px; width: 100%; object-fit: cover; }


/* ==========================================================================
   Legal pages (privacy policy,
terms of use)
   A CMS rich-text block is a single slab of prose,
which is the wrong shape for
   a document people scan for one clause. These components give a legal page a
   lede,
a contents list,
numbered sections and callouts,
using the theme's own
   tokens so the page reads correctly in both colour schemes.
   Wrap the page body in .dr-legal to opt in.
   ========================================================================== */
.dr-legal { color: var(--dr-ink-2); font-size: 16px; line-height: 1.72; }
.dr-legal > *:first-child { margin-top: 0; }
.dr-legal > *:last-child { margin-bottom: 0; }
.dr-legal p { margin: 0 0 1.05em; }
.dr-legal a { color: var(--dr-accent); text-decoration: none; border-bottom: 1px solid rgba(var(--dr-accent-rgb), .35); }
.dr-legal a:hover { border-bottom-color: var(--dr-accent); }
.dr-legal strong,
.dr-legal b { color: var(--dr-ink); font-weight: 700; }

/* The opening statement: what this document is, before any clause. */
.dr-legal__lede { margin: 0 0 32px; padding: 22px 24px; border: 1px solid var(--dr-line-card); border-left: 3px solid var(--dr-accent); border-radius: 0 var(--dr-radius-card) var(--dr-radius-card) 0; background: var(--dr-soft); color: var(--dr-ink); font-size: 17px; line-height: 1.66; }
.dr-legal .dr-legal__lede p:last-child { margin-bottom: 0; }

/* Contents. A legal page is read by somebody looking for one clause. */
.dr-legal__toc { margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.dr-legal.dr-legal .dr-legal__toc h2 { margin: 0 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-legal .dr-legal__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; counter-reset: dr-legal-toc; }
.dr-legal .dr-legal__toc li { counter-increment: dr-legal-toc; }
.dr-legal .dr-legal__toc a { display: block; padding: 5px 0; border: 0; color: var(--dr-ink-2); font-size: 14px; line-height: 1.45; }
.dr-legal .dr-legal__toc a::before { content: counter(dr-legal-toc) ". "; color: var(--dr-ink-3); font-variant-numeric: tabular-nums; }
.dr-legal .dr-legal__toc a:hover { color: var(--dr-accent); }

/* Sections, numbered so a clause can be cited. */
.dr-legal__section { margin: 0 0 40px; scroll-margin-top: 96px; }
.dr-legal.dr-legal .dr-legal__section > h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--dr-line); color: var(--dr-ink); font-size: 22px; font-weight: 800; line-height: 1.3; }
.dr-legal.dr-legal .dr-legal__section > h2 .dr-legal__num { flex: none; min-width: 32px; color: var(--dr-accent); font-size: 13px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dr-legal.dr-legal .dr-legal__section h3 { margin: 26px 0 10px; color: var(--dr-ink); font-size: 16px; font-weight: 700; }
.dr-legal .dr-legal__section ul,
.dr-legal .dr-legal__section ol { margin: 0 0 1.05em; padding-left: 22px; }
.dr-legal .dr-legal__section li { margin-bottom: 8px; }

/* A commitment the reader should not miss. */
.dr-legal__callout { margin: 22px 0; padding: 18px 20px; border: 1px solid rgba(var(--dr-accent-rgb), .35); border-radius: var(--dr-radius-card); background: var(--dr-accent-tint); color: var(--dr-ink); }
.dr-legal .dr-legal__callout p:last-child { margin-bottom: 0; }
.dr-legal .dr-legal__callout--warn { border-color: rgba(154, 90, 18, .3); background: var(--dr-warn-tint); }
:root[data-theme="dark"] .dr-legal__callout--warn { border-color: rgba(255, 194, 122, .28); }

/* Short definitions and retention periods read better as rows than as prose. */
.dr-legal__rows { margin: 0 0 1.05em; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); overflow: hidden; }
.dr-legal .dr-legal__row { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 0 20px; padding: 14px 18px; border-bottom: 1px solid var(--dr-line-card); }
.dr-legal .dr-legal__row:last-child { border-bottom: 0; }
.dr-legal .dr-legal__row > span:first-child { color: var(--dr-ink); font-weight: 700; font-size: 14px; }
.dr-legal .dr-legal__row > span:last-child { font-size: 15px; }

/* Closing contact card. */
.dr-legal__contact { margin: 40px 0 0; padding: 24px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-soft); }
.dr-legal.dr-legal .dr-legal__contact h2 { margin: 0 0 10px; color: var(--dr-ink); font-size: 18px; font-weight: 800; }
.dr-legal .dr-legal__contact p:last-child { margin-bottom: 0; }

.dr-legal .dr-legal__updated { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--dr-line); color: var(--dr-ink-3); font-size: 13px; }

@media (max-width: 767.98px) {
.dr-legal .dr-legal__toc ol { grid-template-columns: 1fr; }
.dr-legal .dr-legal__row { grid-template-columns: 1fr; gap: 4px; }
.dr-legal.dr-legal .dr-legal__section > h2 { font-size: 19px; gap: 8px; }
}

/* One corner rule, shared with the administration area: a pill radius is for single-line
   controls only. draisap.js marks any pill-shaped element that has grown past one line and it
   takes the control radius instead, so nothing renders as an oval. */
.at-tall-pill { border-radius: var(--dr-radius-control) !important; }

/* One button shape, shared with the administration area: buttons, dropdown triggers and tab
   strips take the 12px control radius of the fields beside them. Round icon buttons and avatars
   keep their circles; status labels and tag chips keep their pill. Google's own sign-in button
   is drawn by Google and keeps its shape. */
:is(.btn, button, input[type="submit"], input[type="button"], input[type="reset"], a.button, [class*="__btn"], .dr-btn, .dropdown-toggle, .nav-tabs, .nav-tabs > li > a, .nav-pills > li > a, [role="tab"]) { --dr-radius-pill: var(--dr-radius-control); }
/* The same corner for the rest of the clickable controls: menu links, the account button, tab and
   switcher links, the events filter, dialog buttons, the RSS link and call-to-action buttons. */
:is(.dr-nav__link, .dr-account-btn, .dr-tabs a, .nav-tabs .nav-link, .nav-pills .nav-link, .dr-events__filter select, .dr-people-areas--inline > .dr-people-area) { --dr-radius-pill: var(--dr-radius-control); }
.swal2-styled, .dr-newsroom__rss, .dr-update__body .news-cta a { border-radius: var(--dr-radius-control) !important; }