/* ============================================================================
   DohaPlus — design layer
   ============================================================================

   One stylesheet, injected into every page after Tailwind (see the injector in
   server.js), that restyles the whole product without touching the markup of
   53 hand-written pages.

   It works by remapping the utility classes the pages already use — the brand
   purples and blues, the greys, the gradients — onto a calmer palette, and by
   restyling the recurring shapes: nav bars, cards, buttons, tables, inputs.

   Direction: quiet and precise rather than loud. A deep pine primary instead of
   the saturated purple, warm paper instead of stark white, and a restrained
   sand accent used only where something needs to be singled out. Motion is
   short and small — 150-400ms, a few pixels — and never blocks reading.

   Everything here is deliberately scoped and marked !important where it has to
   beat a Tailwind utility. That is the cost of restyling markup you are not
   rewriting; it is contained to this file.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* Keep these in step with the ramps in scripts/build-palette.mjs - that script
   owns the utility classes, this block owns the components. */
:root {
    /* ground and surfaces - cool paper, never stark white */
    --dp-ground: #F6F8FA;
    --dp-surface: #FFFFFF;
    --dp-surface-sunk: #EFF3F6;
    --dp-surface-raised: #FFFFFF;

    /* ink - near-black with a blue cast so it sits with the primary */
    --dp-ink: #16212B;
    --dp-ink-soft: #47535E;
    --dp-ink-muted: #76828D;
    --dp-ink-faint: #A2ADB7;

    /* primary - a soft, light azure. calm and unsaturated, not a corporate blue */
    --dp-primary: #3E6D9A;
    --dp-primary-deep: #2A4A6A;
    --dp-primary-bright: #4A7EAE;
    --dp-primary-tint: #E4EDF5;
    --dp-primary-tint-strong: #C7DAEA;

    /* accent - warm sand, used sparingly and only for emphasis */
    --dp-accent: #B08A4A;
    --dp-accent-tint: #F6EFE2;

    /* semantic - the only colours on the site that are not the primary */
    --dp-good: #2F744A;
    --dp-good-tint: #E2EFE7;
    --dp-warn: #A5741C;
    --dp-warn-tint: #FAEFDD;
    --dp-bad: #A63231;
    --dp-bad-tint: #FAE7E7;

    /* lines */
    --dp-line: #E1E6EB;
    --dp-line-strong: #CDD5DC;

    /* elevation - soft, low-contrast, never a hard drop shadow */
    --dp-shadow-sm: 0 1px 2px rgba(22, 33, 43, .04), 0 1px 3px rgba(22, 33, 43, .03);
    --dp-shadow: 0 2px 4px rgba(22, 33, 43, .04), 0 6px 16px rgba(22, 33, 43, .05);
    --dp-shadow-lg: 0 4px 8px rgba(22, 33, 43, .05), 0 16px 40px rgba(22, 33, 43, .08);
    --dp-shadow-ring: 0 0 0 3px var(--dp-primary-tint-strong);

    /* every colour also as an rgb triple, so the rules below can go through
       rgba() and keep Tailwind's bg-opacity-* / border-opacity-* working */
    --dp-ground-rgb: 246, 248, 250;
    --dp-surface-rgb: 255, 255, 255;
    --dp-surface-sunk-rgb: 239, 243, 246;
    --dp-primary-rgb: 62, 109, 154;
    --dp-primary-deep-rgb: 42, 74, 106;
    --dp-primary-tint-rgb: 228, 237, 245;
    --dp-primary-tint-strong-rgb: 199, 218, 234;
    --dp-good-rgb: 47, 116, 74;
    --dp-good-tint-rgb: 226, 239, 231;
    --dp-warn-rgb: 165, 116, 28;
    --dp-warn-tint-rgb: 250, 239, 221;
    --dp-bad-rgb: 166, 50, 49;
    --dp-bad-tint-rgb: 250, 231, 231;
    --dp-line-rgb: 225, 230, 235;
    --dp-line-strong-rgb: 205, 213, 220;

    --dp-radius: 12px;
    --dp-radius-lg: 18px;
    --dp-radius-sm: 8px;

    --dp-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ------------------------------------------------------- base typography */
body {
    background: var(--dp-ground) !important;
    color: var(--dp-ink) !important;
    font-family: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-weight: 300;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    text-wrap: balance;
}
/* Deliberately no `color` above. Forcing one overrode the text-white a hero
   heading inherits from its section, and the text-transparent that makes a
   bg-clip-text gradient heading work - both went flat ink. Headings take their
   colour from the page's own utilities, or from body. */
h1:not([class*="text-"]), h2:not([class*="text-"]),
h3:not([class*="text-"]), h4:not([class*="text-"]) { color: inherit; }

/* Tailwind's own weight utilities still win where a page asks for them */
.font-bold { font-weight: 600 !important; }
.font-semibold { font-weight: 500 !important; }
.font-medium { font-weight: 500 !important; }

/* figures line up in tables and stat tiles */
td, th, .font-mono, [class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"] {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ palette remap */
/* Generated by scripts/build-palette.mjs - do not edit by hand.
   Every colour utility the pages use, in all three properties and their
   hover: variants, redefined onto the ramps in that script. Covers the
   extended-palette classes (orange, amber, teal, cyan, emerald) that
   Tailwind 2's default build never defines, and routes everything through
   rgba() so the opacity utilities keep working. */

/* white sits outside the ramps */
.bg-white { background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1)) !important; }
.border-white { border-color: rgba(255, 255, 255, var(--tw-border-opacity, 1)) !important; }

.bg-amber-50 { background-color: rgba(253, 247, 236, var(--tw-bg-opacity, 1)) !important; }
.bg-amber-500 { background-color: rgba(185, 132, 34, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-50 { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-100 { background-color: rgba(228, 237, 245, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-400 { background-color: rgba(94, 147, 192, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-500 { background-color: rgba(74, 126, 174, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-600 { background-color: rgba(62, 109, 154, var(--tw-bg-opacity, 1)) !important; }
.bg-blue-700 { background-color: rgba(52, 92, 131, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-50 { background-color: rgba(245, 247, 249, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-100 { background-color: rgba(237, 240, 243, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-200 { background-color: rgba(225, 230, 235, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-300 { background-color: rgba(205, 213, 220, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-400 { background-color: rgba(162, 173, 183, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-500 { background-color: rgba(118, 130, 141, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-600 { background-color: rgba(71, 83, 94, var(--tw-bg-opacity, 1)) !important; }
.bg-gray-800 { background-color: rgba(33, 42, 49, var(--tw-bg-opacity, 1)) !important; }
.bg-green-50 { background-color: rgba(240, 247, 242, var(--tw-bg-opacity, 1)) !important; }
.bg-green-100 { background-color: rgba(226, 239, 231, var(--tw-bg-opacity, 1)) !important; }
.bg-green-500 { background-color: rgba(59, 138, 88, var(--tw-bg-opacity, 1)) !important; }
.bg-green-600 { background-color: rgba(47, 116, 74, var(--tw-bg-opacity, 1)) !important; }
.bg-indigo-50 { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.bg-indigo-100 { background-color: rgba(228, 237, 245, var(--tw-bg-opacity, 1)) !important; }
.bg-indigo-500 { background-color: rgba(74, 126, 174, var(--tw-bg-opacity, 1)) !important; }
.bg-indigo-600 { background-color: rgba(62, 109, 154, var(--tw-bg-opacity, 1)) !important; }
.bg-orange-50 { background-color: rgba(253, 247, 236, var(--tw-bg-opacity, 1)) !important; }
.bg-orange-100 { background-color: rgba(250, 239, 221, var(--tw-bg-opacity, 1)) !important; }
.bg-orange-500 { background-color: rgba(185, 132, 34, var(--tw-bg-opacity, 1)) !important; }
.bg-orange-600 { background-color: rgba(165, 116, 28, var(--tw-bg-opacity, 1)) !important; }
.bg-purple-50 { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.bg-purple-100 { background-color: rgba(228, 237, 245, var(--tw-bg-opacity, 1)) !important; }
.bg-purple-600 { background-color: rgba(62, 109, 154, var(--tw-bg-opacity, 1)) !important; }
.bg-red-50 { background-color: rgba(253, 242, 242, var(--tw-bg-opacity, 1)) !important; }
.bg-red-100 { background-color: rgba(250, 231, 231, var(--tw-bg-opacity, 1)) !important; }
.bg-red-500 { background-color: rgba(188, 62, 61, var(--tw-bg-opacity, 1)) !important; }
.bg-red-600 { background-color: rgba(166, 50, 49, var(--tw-bg-opacity, 1)) !important; }
.bg-yellow-50 { background-color: rgba(253, 247, 236, var(--tw-bg-opacity, 1)) !important; }
.bg-yellow-100 { background-color: rgba(250, 239, 221, var(--tw-bg-opacity, 1)) !important; }
.bg-yellow-400 { background-color: rgba(200, 147, 47, var(--tw-bg-opacity, 1)) !important; }
.bg-yellow-500 { background-color: rgba(185, 132, 34, var(--tw-bg-opacity, 1)) !important; }
.border-amber-200 { border-color: rgba(242, 223, 188, var(--tw-border-opacity, 1)) !important; }
.border-amber-500 { border-color: rgba(185, 132, 34, var(--tw-border-opacity, 1)) !important; }
.border-blue-100 { border-color: rgba(228, 237, 245, var(--tw-border-opacity, 1)) !important; }
.border-blue-200 { border-color: rgba(199, 218, 234, var(--tw-border-opacity, 1)) !important; }
.border-blue-300 { border-color: rgba(163, 194, 220, var(--tw-border-opacity, 1)) !important; }
.border-blue-400 { border-color: rgba(94, 147, 192, var(--tw-border-opacity, 1)) !important; }
.border-blue-500 { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.border-blue-600 { border-color: rgba(62, 109, 154, var(--tw-border-opacity, 1)) !important; }
.border-gray-100 { border-color: rgba(237, 240, 243, var(--tw-border-opacity, 1)) !important; }
.border-gray-200 { border-color: rgba(225, 230, 235, var(--tw-border-opacity, 1)) !important; }
.border-gray-300 { border-color: rgba(205, 213, 220, var(--tw-border-opacity, 1)) !important; }
.border-gray-400 { border-color: rgba(162, 173, 183, var(--tw-border-opacity, 1)) !important; }
.border-gray-500 { border-color: rgba(118, 130, 141, var(--tw-border-opacity, 1)) !important; }
.border-gray-600 { border-color: rgba(71, 83, 94, var(--tw-border-opacity, 1)) !important; }
.border-gray-700 { border-color: rgba(48, 58, 67, var(--tw-border-opacity, 1)) !important; }
.border-gray-800 { border-color: rgba(33, 42, 49, var(--tw-border-opacity, 1)) !important; }
.border-green-200 { border-color: rgba(196, 223, 206, var(--tw-border-opacity, 1)) !important; }
.border-green-300 { border-color: rgba(162, 204, 177, var(--tw-border-opacity, 1)) !important; }
.border-green-500 { border-color: rgba(59, 138, 88, var(--tw-border-opacity, 1)) !important; }
.border-indigo-200 { border-color: rgba(199, 218, 234, var(--tw-border-opacity, 1)) !important; }
.border-indigo-300 { border-color: rgba(163, 194, 220, var(--tw-border-opacity, 1)) !important; }
.border-indigo-500 { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.border-orange-300 { border-color: rgba(231, 203, 151, var(--tw-border-opacity, 1)) !important; }
.border-orange-500 { border-color: rgba(185, 132, 34, var(--tw-border-opacity, 1)) !important; }
.border-pink-200 { border-color: rgba(199, 218, 234, var(--tw-border-opacity, 1)) !important; }
.border-pink-300 { border-color: rgba(163, 194, 220, var(--tw-border-opacity, 1)) !important; }
.border-pink-500 { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.border-purple-200 { border-color: rgba(199, 218, 234, var(--tw-border-opacity, 1)) !important; }
.border-purple-300 { border-color: rgba(163, 194, 220, var(--tw-border-opacity, 1)) !important; }
.border-purple-400 { border-color: rgba(94, 147, 192, var(--tw-border-opacity, 1)) !important; }
.border-purple-500 { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.border-purple-600 { border-color: rgba(62, 109, 154, var(--tw-border-opacity, 1)) !important; }
.border-red-200 { border-color: rgba(243, 207, 207, var(--tw-border-opacity, 1)) !important; }
.border-red-300 { border-color: rgba(233, 178, 178, var(--tw-border-opacity, 1)) !important; }
.border-red-400 { border-color: rgba(206, 81, 80, var(--tw-border-opacity, 1)) !important; }
.border-red-500 { border-color: rgba(188, 62, 61, var(--tw-border-opacity, 1)) !important; }
.border-red-600 { border-color: rgba(166, 50, 49, var(--tw-border-opacity, 1)) !important; }
.border-teal-500 { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.border-yellow-200 { border-color: rgba(242, 223, 188, var(--tw-border-opacity, 1)) !important; }
.border-yellow-300 { border-color: rgba(231, 203, 151, var(--tw-border-opacity, 1)) !important; }
.border-yellow-400 { border-color: rgba(200, 147, 47, var(--tw-border-opacity, 1)) !important; }
.border-yellow-500 { border-color: rgba(185, 132, 34, var(--tw-border-opacity, 1)) !important; }
.text-amber-700 { color: rgba(138, 97, 23, var(--tw-text-opacity, 1)) !important; }
.text-amber-800 { color: rgba(110, 77, 18, var(--tw-text-opacity, 1)) !important; }
.text-amber-900 { color: rgba(84, 59, 14, var(--tw-text-opacity, 1)) !important; }
.text-blue-100 { color: rgba(228, 237, 245, var(--tw-text-opacity, 1)) !important; }
.text-blue-300 { color: rgba(163, 194, 220, var(--tw-text-opacity, 1)) !important; }
.text-blue-400 { color: rgba(94, 147, 192, var(--tw-text-opacity, 1)) !important; }
.text-blue-500 { color: rgba(74, 126, 174, var(--tw-text-opacity, 1)) !important; }
.text-blue-600 { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.text-blue-700 { color: rgba(52, 92, 131, var(--tw-text-opacity, 1)) !important; }
.text-blue-800 { color: rgba(42, 74, 106, var(--tw-text-opacity, 1)) !important; }
.text-blue-900 { color: rgba(31, 55, 80, var(--tw-text-opacity, 1)) !important; }
.text-gray-300 { color: rgba(205, 213, 220, var(--tw-text-opacity, 1)) !important; }
.text-gray-400 { color: rgba(162, 173, 183, var(--tw-text-opacity, 1)) !important; }
.text-gray-500 { color: rgba(118, 130, 141, var(--tw-text-opacity, 1)) !important; }
.text-gray-600 { color: rgba(71, 83, 94, var(--tw-text-opacity, 1)) !important; }
.text-gray-700 { color: rgba(48, 58, 67, var(--tw-text-opacity, 1)) !important; }
.text-gray-800 { color: rgba(33, 42, 49, var(--tw-text-opacity, 1)) !important; }
.text-gray-900 { color: rgba(22, 33, 43, var(--tw-text-opacity, 1)) !important; }
.text-green-500 { color: rgba(59, 138, 88, var(--tw-text-opacity, 1)) !important; }
.text-green-600 { color: rgba(47, 116, 74, var(--tw-text-opacity, 1)) !important; }
.text-green-700 { color: rgba(39, 95, 62, var(--tw-text-opacity, 1)) !important; }
.text-green-800 { color: rgba(31, 76, 50, var(--tw-text-opacity, 1)) !important; }
.text-indigo-600 { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.text-indigo-700 { color: rgba(52, 92, 131, var(--tw-text-opacity, 1)) !important; }
.text-indigo-800 { color: rgba(42, 74, 106, var(--tw-text-opacity, 1)) !important; }
.text-indigo-900 { color: rgba(31, 55, 80, var(--tw-text-opacity, 1)) !important; }
.text-orange-500 { color: rgba(185, 132, 34, var(--tw-text-opacity, 1)) !important; }
.text-orange-600 { color: rgba(165, 116, 28, var(--tw-text-opacity, 1)) !important; }
.text-orange-800 { color: rgba(110, 77, 18, var(--tw-text-opacity, 1)) !important; }
.text-pink-600 { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.text-pink-700 { color: rgba(52, 92, 131, var(--tw-text-opacity, 1)) !important; }
.text-purple-400 { color: rgba(94, 147, 192, var(--tw-text-opacity, 1)) !important; }
.text-purple-500 { color: rgba(74, 126, 174, var(--tw-text-opacity, 1)) !important; }
.text-purple-600 { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.text-purple-700 { color: rgba(52, 92, 131, var(--tw-text-opacity, 1)) !important; }
.text-purple-800 { color: rgba(42, 74, 106, var(--tw-text-opacity, 1)) !important; }
.text-red-500 { color: rgba(188, 62, 61, var(--tw-text-opacity, 1)) !important; }
.text-red-600 { color: rgba(166, 50, 49, var(--tw-text-opacity, 1)) !important; }
.text-red-700 { color: rgba(140, 41, 40, var(--tw-text-opacity, 1)) !important; }
.text-red-800 { color: rgba(115, 33, 33, var(--tw-text-opacity, 1)) !important; }
.text-teal-600 { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.text-yellow-300 { color: rgba(231, 203, 151, var(--tw-text-opacity, 1)) !important; }
.text-yellow-500 { color: rgba(185, 132, 34, var(--tw-text-opacity, 1)) !important; }
.text-yellow-600 { color: rgba(165, 116, 28, var(--tw-text-opacity, 1)) !important; }
.text-yellow-700 { color: rgba(138, 97, 23, var(--tw-text-opacity, 1)) !important; }
.text-yellow-800 { color: rgba(110, 77, 18, var(--tw-text-opacity, 1)) !important; }
.hover\:bg-amber-600:hover { background-color: rgba(165, 116, 28, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-blue-50:hover { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-blue-100:hover { background-color: rgba(228, 237, 245, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-blue-300:hover { background-color: rgba(163, 194, 220, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-blue-600:hover { background-color: rgba(62, 109, 154, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-blue-700:hover { background-color: rgba(52, 92, 131, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-50:hover { background-color: rgba(245, 247, 249, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-100:hover { background-color: rgba(237, 240, 243, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-300:hover { background-color: rgba(205, 213, 220, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-400:hover { background-color: rgba(162, 173, 183, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-500:hover { background-color: rgba(118, 130, 141, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-600:hover { background-color: rgba(71, 83, 94, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-gray-700:hover { background-color: rgba(48, 58, 67, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-green-50:hover { background-color: rgba(240, 247, 242, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-green-600:hover { background-color: rgba(47, 116, 74, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-green-700:hover { background-color: rgba(39, 95, 62, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-indigo-50:hover { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-indigo-700:hover { background-color: rgba(52, 92, 131, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-orange-50:hover { background-color: rgba(253, 247, 236, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-orange-700:hover { background-color: rgba(138, 97, 23, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-purple-50:hover { background-color: rgba(242, 246, 250, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-purple-100:hover { background-color: rgba(228, 237, 245, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-purple-700:hover { background-color: rgba(52, 92, 131, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-red-50:hover { background-color: rgba(253, 242, 242, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-red-600:hover { background-color: rgba(166, 50, 49, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-red-700:hover { background-color: rgba(140, 41, 40, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-yellow-50:hover { background-color: rgba(253, 247, 236, var(--tw-bg-opacity, 1)) !important; }
.hover\:bg-yellow-300:hover { background-color: rgba(231, 203, 151, var(--tw-bg-opacity, 1)) !important; }
.hover\:border-blue-300:hover { border-color: rgba(163, 194, 220, var(--tw-border-opacity, 1)) !important; }
.hover\:border-blue-400:hover { border-color: rgba(94, 147, 192, var(--tw-border-opacity, 1)) !important; }
.hover\:border-blue-500:hover { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.hover\:border-gray-500:hover { border-color: rgba(118, 130, 141, var(--tw-border-opacity, 1)) !important; }
.hover\:border-indigo-500:hover { border-color: rgba(74, 126, 174, var(--tw-border-opacity, 1)) !important; }
.hover\:border-purple-400:hover { border-color: rgba(94, 147, 192, var(--tw-border-opacity, 1)) !important; }
.hover\:text-blue-600:hover { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.hover\:text-blue-800:hover { color: rgba(42, 74, 106, var(--tw-text-opacity, 1)) !important; }
.hover\:text-gray-200:hover { color: rgba(225, 230, 235, var(--tw-text-opacity, 1)) !important; }
.hover\:text-gray-800:hover { color: rgba(33, 42, 49, var(--tw-text-opacity, 1)) !important; }
.hover\:text-green-600:hover { color: rgba(47, 116, 74, var(--tw-text-opacity, 1)) !important; }
.hover\:text-indigo-600:hover { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.hover\:text-orange-600:hover { color: rgba(165, 116, 28, var(--tw-text-opacity, 1)) !important; }
.hover\:text-purple-600:hover { color: rgba(62, 109, 154, var(--tw-text-opacity, 1)) !important; }
.hover\:text-purple-800:hover { color: rgba(42, 74, 106, var(--tw-text-opacity, 1)) !important; }
.hover\:text-red-600:hover { color: rgba(166, 50, 49, var(--tw-text-opacity, 1)) !important; }
.hover\:text-red-800:hover { color: rgba(115, 33, 33, var(--tw-text-opacity, 1)) !important; }
.hover\:text-yellow-600:hover { color: rgba(165, 116, 28, var(--tw-text-opacity, 1)) !important; }

/* ------------------------------------------------------------ gradients */
/* Tailwind 2 assembles a gradient out of --tw-gradient-from/-stops/-to, so
   redefining the stop utilities recolours every gradient on the site while
   leaving the gradients themselves intact. Flattening them instead would strip
   the background off icon circles and badges, which have no other fill. */
.from-amber-50 { --tw-gradient-from: #FDF7EC; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 247, 236, 0)); }
.from-blue-50 { --tw-gradient-from: #F2F6FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 246, 250, 0)); }
.from-blue-100 { --tw-gradient-from: #E4EDF5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(228, 237, 245, 0)); }
.from-blue-400 { --tw-gradient-from: #5E93C0; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(94, 147, 192, 0)); }
.from-blue-500 { --tw-gradient-from: #4A7EAE; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 126, 174, 0)); }
.from-blue-600 { --tw-gradient-from: #3E6D9A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(62, 109, 154, 0)); }
.from-blue-700 { --tw-gradient-from: #345C83; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 92, 131, 0)); }
.from-gray-50 { --tw-gradient-from: #F5F7F9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 247, 249, 0)); }
.from-gray-100 { --tw-gradient-from: #EDF0F3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(237, 240, 243, 0)); }
.from-gray-500 { --tw-gradient-from: #76828D; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(118, 130, 141, 0)); }
.from-gray-600 { --tw-gradient-from: #47535E; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(71, 83, 94, 0)); }
.from-gray-700 { --tw-gradient-from: #303A43; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(48, 58, 67, 0)); }
.from-gray-800 { --tw-gradient-from: #212A31; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(33, 42, 49, 0)); }
.from-gray-900 { --tw-gradient-from: #16212B; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 33, 43, 0)); }
.from-green-50 { --tw-gradient-from: #F0F7F2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 247, 242, 0)); }
.from-green-100 { --tw-gradient-from: #E2EFE7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(226, 239, 231, 0)); }
.from-green-500 { --tw-gradient-from: #3B8A58; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 138, 88, 0)); }
.from-green-600 { --tw-gradient-from: #2F744A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(47, 116, 74, 0)); }
.from-green-700 { --tw-gradient-from: #275F3E; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(39, 95, 62, 0)); }
.from-indigo-50 { --tw-gradient-from: #F2F6FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 246, 250, 0)); }
.from-indigo-500 { --tw-gradient-from: #4A7EAE; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 126, 174, 0)); }
.from-indigo-600 { --tw-gradient-from: #3E6D9A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(62, 109, 154, 0)); }
.from-indigo-700 { --tw-gradient-from: #345C83; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 92, 131, 0)); }
.from-orange-50 { --tw-gradient-from: #FDF7EC; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 247, 236, 0)); }
.from-pink-50 { --tw-gradient-from: #F2F6FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 246, 250, 0)); }
.from-pink-100 { --tw-gradient-from: #E4EDF5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(228, 237, 245, 0)); }
.from-pink-500 { --tw-gradient-from: #4A7EAE; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 126, 174, 0)); }
.from-pink-600 { --tw-gradient-from: #3E6D9A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(62, 109, 154, 0)); }
.from-purple-50 { --tw-gradient-from: #F2F6FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 246, 250, 0)); }
.from-purple-400 { --tw-gradient-from: #5E93C0; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(94, 147, 192, 0)); }
.from-purple-500 { --tw-gradient-from: #4A7EAE; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(74, 126, 174, 0)); }
.from-purple-600 { --tw-gradient-from: #3E6D9A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(62, 109, 154, 0)); }
.from-purple-700 { --tw-gradient-from: #345C83; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 92, 131, 0)); }
.from-red-50 { --tw-gradient-from: #FDF2F2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 242, 242, 0)); }
.from-red-500 { --tw-gradient-from: #BC3E3D; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(188, 62, 61, 0)); }
.from-red-600 { --tw-gradient-from: #A63231; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(166, 50, 49, 0)); }
.from-teal-50 { --tw-gradient-from: #F2F6FA; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 246, 250, 0)); }
.from-yellow-50 { --tw-gradient-from: #FDF7EC; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 247, 236, 0)); }
.from-yellow-400 { --tw-gradient-from: #C8932F; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(200, 147, 47, 0)); }
.from-yellow-500 { --tw-gradient-from: #B98422; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 132, 34, 0)); }
.to-amber-50 { --tw-gradient-to: #FDF7EC; }
.to-blue-50 { --tw-gradient-to: #F2F6FA; }
.to-blue-100 { --tw-gradient-to: #E4EDF5; }
.to-blue-200 { --tw-gradient-to: #C7DAEA; }
.to-blue-400 { --tw-gradient-to: #5E93C0; }
.to-blue-500 { --tw-gradient-to: #4A7EAE; }
.to-blue-600 { --tw-gradient-to: #3E6D9A; }
.to-blue-700 { --tw-gradient-to: #345C83; }
.to-blue-800 { --tw-gradient-to: #2A4A6A; }
.to-blue-900 { --tw-gradient-to: #1F3750; }
.to-cyan-50 { --tw-gradient-to: #F2F6FA; }
.to-emerald-50 { --tw-gradient-to: #F0F7F2; }
.to-emerald-100 { --tw-gradient-to: #E2EFE7; }
.to-fuchsia-50 { --tw-gradient-to: #F2F6FA; }
.to-gray-50 { --tw-gradient-to: #F5F7F9; }
.to-gray-100 { --tw-gradient-to: #EDF0F3; }
.to-gray-200 { --tw-gradient-to: #E1E6EB; }
.to-gray-600 { --tw-gradient-to: #47535E; }
.to-gray-800 { --tw-gradient-to: #212A31; }
.to-gray-900 { --tw-gradient-to: #16212B; }
.to-green-100 { --tw-gradient-to: #E2EFE7; }
.to-green-600 { --tw-gradient-to: #2F744A; }
.to-green-700 { --tw-gradient-to: #275F3E; }
.to-green-800 { --tw-gradient-to: #1F4C32; }
.to-indigo-50 { --tw-gradient-to: #F2F6FA; }
.to-indigo-100 { --tw-gradient-to: #E4EDF5; }
.to-indigo-600 { --tw-gradient-to: #3E6D9A; }
.to-orange-50 { --tw-gradient-to: #FDF7EC; }
.to-orange-100 { --tw-gradient-to: #FAEFDD; }
.to-orange-500 { --tw-gradient-to: #B98422; }
.to-pink-100 { --tw-gradient-to: #E4EDF5; }
.to-pink-500 { --tw-gradient-to: #4A7EAE; }
.to-pink-600 { --tw-gradient-to: #3E6D9A; }
.to-pink-700 { --tw-gradient-to: #345C83; }
.to-purple-50 { --tw-gradient-to: #F2F6FA; }
.to-purple-100 { --tw-gradient-to: #E4EDF5; }
.to-purple-500 { --tw-gradient-to: #4A7EAE; }
.to-purple-600 { --tw-gradient-to: #3E6D9A; }
.to-purple-700 { --tw-gradient-to: #345C83; }
.to-red-100 { --tw-gradient-to: #FAE7E7; }
.to-red-600 { --tw-gradient-to: #A63231; }
.to-red-700 { --tw-gradient-to: #8C2928; }
.to-red-800 { --tw-gradient-to: #732121; }
.to-slate-50 { --tw-gradient-to: #F5F7F9; }
.to-teal-100 { --tw-gradient-to: #E4EDF5; }
.to-teal-500 { --tw-gradient-to: #4A7EAE; }
.to-teal-600 { --tw-gradient-to: #3E6D9A; }
.to-yellow-100 { --tw-gradient-to: #FAEFDD; }
.to-yellow-600 { --tw-gradient-to: #A5741C; }
.via-blue-500 { --tw-gradient-stops: var(--tw-gradient-from), #4A7EAE, var(--tw-gradient-to, rgba(74, 126, 174, 0)); }
.via-gray-800 { --tw-gradient-stops: var(--tw-gradient-from), #212A31, var(--tw-gradient-to, rgba(33, 42, 49, 0)); }
.via-purple-700 { --tw-gradient-stops: var(--tw-gradient-from), #345C83, var(--tw-gradient-to, rgba(52, 92, 131, 0)); }
.via-purple-800 { --tw-gradient-stops: var(--tw-gradient-from), #2A4A6A, var(--tw-gradient-to, rgba(42, 74, 106, 0)); }

/* the 404 page's animated hero settles into a still field */
.animated-gradient { background: var(--dp-primary) !important; animation: none !important; }

/* ------------------------------------------------------------------ nav */
/* Two headers, deliberately.
   The public and sign-in pages carry `bg-white` on their nav; the admin and
   vendor pages carry a gradient. That split already existed in the markup, so
   it becomes the system: marketing and entry pages get a light paper header,
   the signed-in application gets the pine one. Painting all of them pine is not
   possible anyway - `.bg-white` is a single class and outranks `body > nav`.

   Everything is scoped to `body > nav`, because <nav> is also used for in-page
   tab bars (the vendor filter tabs in the admin panel); styling those as a
   header left their active tab as white text on a white chip. */

/* the application header */
body > nav:not(.bg-white) {
    background-color: var(--dp-primary) !important;
    background-image: none !important;
    box-shadow: var(--dp-shadow-sm) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    position: sticky;
    top: 0;
    z-index: 30;
}
body > nav:not(.bg-white) a, body > nav:not(.bg-white) span,
body > nav:not(.bg-white) i, body > nav:not(.bg-white) button,
body > nav:not(.bg-white) h1, body > nav:not(.bg-white) h2,
body > nav:not(.bg-white) p { color: #F2F5F4 !important; }
body > nav:not(.bg-white) a {
    border-radius: var(--dp-radius-sm);
    transition: background-color .2s var(--dp-ease), transform .2s var(--dp-ease);
}
body > nav:not(.bg-white) a:hover {
    background-color: rgba(255, 255, 255, .1) !important;
    transform: translateY(-1px);
}
/* a destructive control in the header keeps its meaning without shouting */
body > nav:not(.bg-white) .bg-red-500,
body > nav:not(.bg-white) .bg-red-600 { background-color: rgba(255, 255, 255, .14) !important; }
body > nav:not(.bg-white) .bg-red-500:hover,
body > nav:not(.bg-white) .bg-red-600:hover { background-color: var(--dp-bad) !important; }

/* the public header: paper, hairline, no shadow slab */
body > nav.bg-white {
    box-shadow: none !important;
    border-bottom: 1px solid var(--dp-line);
    position: sticky;
    top: 0;
    z-index: 30;
}
body > nav.bg-white a {
    border-radius: var(--dp-radius-sm);
    transition: color .2s var(--dp-ease), background-color .2s var(--dp-ease);
}

/* in-page tab bars are not headers */
nav:not(body > nav) { background-color: transparent !important; }

/* --------------------------------------------------------------- cards */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: var(--dp-shadow) !important;
}
.rounded-lg { border-radius: var(--dp-radius) !important; }
.rounded-xl, .rounded-2xl, .rounded-3xl { border-radius: var(--dp-radius-lg) !important; }

/* a white panel reads as a sheet of paper, not a floating box */
.bg-white.shadow, .bg-white.shadow-md, .bg-white.shadow-lg,
.bg-white.shadow-xl, .bg-white.shadow-2xl {
    border: 1px solid var(--dp-line);
    transition: box-shadow .3s var(--dp-ease), transform .3s var(--dp-ease);
}

/* lift only what is actually interactive */
a > .bg-white.shadow, button > .bg-white.shadow,
.cursor-pointer.bg-white, .bg-white.cursor-pointer,
[onclick].bg-white, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover {
    box-shadow: var(--dp-shadow-lg) !important;
    transform: translateY(-2px);
}

/* Tailwind's scale-up hovers are too eager for this design */
.hover\:scale-105:hover, .transform.hover\:scale-105:hover { transform: translateY(-2px) !important; }
.hover\:scale-110:hover { transform: translateY(-2px) !important; }

/* ------------------------------------------------------------- buttons */
button, .btn, a[class*="bg-"][class*="px-"], input[type="submit"] {
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--dp-radius-sm) !important;
    transition: background-color .2s var(--dp-ease), box-shadow .2s var(--dp-ease),
                transform .12s var(--dp-ease), opacity .2s var(--dp-ease);
}
button:not(:disabled):hover, input[type="submit"]:not(:disabled):hover {
    box-shadow: var(--dp-shadow);
}
button:not(:disabled):active, input[type="submit"]:not(:disabled):active {
    transform: translateY(1px);
    box-shadow: var(--dp-shadow-sm);
}
button:disabled, .disabled\:bg-gray-400:disabled {
    background-color: rgba(var(--dp-line-rgb), var(--tw-bg-opacity, 1)) !important;
    color: var(--dp-ink-faint) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--dp-primary-bright);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- inputs */
input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], input[type="url"],
select, textarea {
    background-color: rgba(var(--dp-surface-rgb), var(--tw-bg-opacity, 1)) !important;
    border: 1px solid var(--dp-line-strong) !important;
    border-radius: var(--dp-radius-sm) !important;
    color: var(--dp-ink) !important;
    font-family: inherit !important;
    font-weight: 400;
    transition: border-color .2s var(--dp-ease), box-shadow .2s var(--dp-ease);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--dp-primary) !important;
    box-shadow: var(--dp-shadow-ring) !important;
    outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--dp-ink-faint) !important; }
input:disabled, select:disabled, textarea:disabled {
    background-color: rgba(var(--dp-surface-sunk-rgb), var(--tw-bg-opacity, 1)) !important;
    color: var(--dp-ink-muted) !important;
}
label { color: var(--dp-ink-soft) !important; font-weight: 500; }

/* -------------------------------------------------------------- tables */
table { border-collapse: collapse !important; }
thead tr, thead {
    background-color: rgba(var(--dp-surface-sunk-rgb), var(--tw-bg-opacity, 1)) !important;
    background-image: none !important;
}
th {
    color: var(--dp-ink-muted) !important;
    font-weight: 500 !important;
    font-size: .78rem !important;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--dp-line-strong) !important;
    white-space: nowrap;
}
td { border-bottom: 1px solid var(--dp-line) !important; color: var(--dp-ink-soft) !important; }
tbody tr { transition: background-color .18s var(--dp-ease); }
tbody tr:hover { background-color: rgba(var(--dp-primary-tint-rgb), var(--tw-bg-opacity, 1)) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }

/* wide tables scroll inside their own container, never the page */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------- pills */
/* status chips: quieter fills, clear enough to scan */
.rounded-full[class*="bg-"] {
    font-weight: 500 !important;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------- links */
a { transition: color .2s var(--dp-ease), opacity .2s var(--dp-ease); }

/* ------------------------------------------------------------- motion */
@keyframes dp-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
/* transform only - an opacity keyframe with a forwards fill would overwrite
   whatever opacity utility the element carries once the animation ends */
@keyframes dp-drift {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* The page arrives settled, then its sections resolve. Everything starts
   visible so a thumbnail or a reader who never scrolls still sees the page. */
main > *, .container > * {
    animation: dp-rise .5s var(--dp-ease) backwards;
}
.container > *:nth-child(1) { animation-delay: .02s; }
.container > *:nth-child(2) { animation-delay: .06s; }
.container > *:nth-child(3) { animation-delay: .1s; }
.container > *:nth-child(4) { animation-delay: .14s; }
.container > *:nth-child(n+5) { animation-delay: .18s; }

/* the pages' own fade-in class, retuned */
.fade-in { animation: dp-rise .55s var(--dp-ease) backwards !important; }

/* stat tiles settle in sequence */
.grid > .bg-white { animation: dp-rise .45s var(--dp-ease) backwards; }
.grid > .bg-white:nth-child(2) { animation-delay: .05s; }
.grid > .bg-white:nth-child(3) { animation-delay: .1s; }
.grid > .bg-white:nth-child(4) { animation-delay: .15s; }

/* decorative floating shapes keep a slow, shallow drift - and only a drift,
   so the opacity-10 that makes them subtle survives */
.floating { animation: dp-drift 7s ease-in-out infinite !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------- layout */
/* Arrangement, not content. Everything here is spacing, alignment and
   stacking - no element is moved out of its section and nothing is hidden,
   so every field, table and control each page renders is still there. */

/* The header follows you down the long admin and vendor pages; its sticky
   positioning is set with the rest of the nav rules above, below the z-index
   the modals use so a dialog still covers it. */

/* One rhythm for the whole site instead of each page picking its own. */
.container {
    max-width: 1240px !important;
    padding-left: clamp(16px, 3vw, 32px) !important;
    padding-right: clamp(16px, 3vw, 32px) !important;
}

/* Consistent breathing room between the stacked panels that make up a page.
   Pages set their own margins; this only raises the floor. */
main > .container > * + *,
body > .container > * + * { margin-top: 1.5rem; }

/* Section headings sit on the panel edge rather than floating mid-air. */
.bg-white > h2:first-child, .bg-white > h3:first-child { margin-top: 0; }

/* Wide tables scroll inside their own container so the page never does. */
.overflow-x-auto, .overflow-auto { max-width: 100%; }

/* Dense grids get an even gutter so tiles line up across sections. */
.grid { gap: 1rem; }
.grid.gap-2 { gap: .5rem; }
.grid.gap-3 { gap: .75rem; }
.grid.gap-6 { gap: 1.5rem; }
.grid.gap-8 { gap: 2rem; }

/* Toolbars - search boxes, filters, per-page selects - wrap instead of
   overflowing on narrow screens. */
.flex.items-center.gap-2, .flex.items-center.gap-4, .flex.justify-between {
    flex-wrap: wrap;
}

/* Modals stay above the sticky nav and centre properly on small screens. */
.fixed.inset-0 { z-index: 50; }

/* On phones the multi-column admin grids collapse rather than squeeze. */
@media (max-width: 640px) {
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    .grid { gap: .75rem; }
    table { font-size: .82rem; }
}

/* --------------------------------------------------------- scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--dp-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--dp-line-strong);
    border-radius: 999px;
    border: 3px solid var(--dp-ground);
}
*::-webkit-scrollbar-thumb:hover { background: var(--dp-ink-faint); }

/* ------------------------------------------------------------ details */
::selection { background: var(--dp-primary-tint-strong); color: var(--dp-ink); }
hr, .border-t, .border-b { border-color: rgba(var(--dp-line-rgb), var(--tw-border-opacity, 1)) !important; }
i.fas, i.far, i.fab { line-height: 1; }

/* the page never scrolls sideways */
html, body { max-width: 100%; overflow-x: hidden; }