/* =====================================================================
   Blue Grid — Car Rental Management System
   The portal design layer. Light field, one blue, hard corners.

   SCOPING
   Every rule is scoped to html[data-theme="bluegrid"]. That does two jobs:

   1. It cannot leak. index.html and public-pay.html carry no data-theme,
      so even if someone links this file into them, nothing matches. The
      landing page keeps its vermillion identity by construction, not by
      the convention of "don't link this file".

   2. It wins the cascade. html[data-theme] .modal is (0,2,1); the
      page-local <style> blocks are (0,1,0) and load later. Without the
      attribute we would need !important on everything, or we would have
      to empty all 13 remaining <style> blocks before any theming worked.

   The failure mode is therefore all-or-nothing per page: forget the
   <link> or the attribute and the page is unstyled, never half themed.
   Check both with:  node tools/check-portals.js

   LIGHT ONLY
   There is one theme and it is light. An earlier draft was dark; it read
   as "dark mode" rather than as a product, and these are tools people use
   in daylight. The Swiss/technical character is carried by hard corners,
   wide-tracked uppercase micro-labels, hairline rules and a single blue —
   not by the background being black.

   THE CONTRAST RULE THAT SHAPES THE PALETTE
   --accent is #0063CC, not the #0080FF this started as. On white, #0080FF
   is 3.80:1 and fails both as text AND as a fill behind white text.
   #0063CC clears 5.74:1 in both directions, which is why one value can
   serve as link colour, focus ring and button fill.

   TYPOGRAPHY
   Deliberately no web font. These pages already blank until requireRole()
   round-trips to Supabase; a font swap on top of that is a second flash.
   The character comes from tracking, case, weight and rhythm, which the
   system stack does fine. If it ever reads too plain, IBM Plex Sans is the
   upgrade — not Inter, which belongs to the landing page.
   ===================================================================== */

html[data-theme="bluegrid"] {
    color-scheme: light;

    /* ---------- surfaces ---------- */
    --bg:              #F7F8FA;   /* the field */
    --bg-alt:          #F7F8FA;
    --bg-invert:       #0D0F12;
    --surface:         #FFFFFF;   /* cards, modals, table body */
    --surface-2:       #F0F2F6;   /* inputs, table headers, raised */
    --surface-3:       #E6E9EF;   /* hover, pressed */
    --surface-invert:  #0D0F12;
    --overlay:         rgba(13, 15, 18, 0.45);

    /* ---------- hairlines ---------- */
    --hairline:        #E2E5EA;   /* dividers, card edges, table rules */
    --hairline-soft:   #EDEFF3;   /* row separators */
    --hairline-strong: #8E949E;   /* input borders — 3.05:1, clears WCAG 1.4.11 */
    --hairline-invert: #2A2D33;
    --grid-line:       rgba(13, 15, 18, 0.045);

    /* ---------- text (ratios on --surface / --bg / --surface-3) ---------- */
    --text:            #0D0F12;   /* 19.19 / 18.06 / 15.78 */
    --text-muted:      #565C66;   /*  6.73 /  6.34 /  5.54 */
    --text-subtle:     #626973;   /*  5.54 /  5.22 /  4.56 */
    --text-on-dark:    #F7F8FA;
    --text-muted-dark: #A6ACB8;

    /* ---------- accent ---------- */
    --accent:          #0063CC;   /* 5.74 on white, and 5.74 under white text */
    --accent-bright:   #0058BD;   /* hover — darker, since we are on light */
    --accent-hover:    #0058BD;
    --accent-dim:      #004FB0;
    --accent-wash:     #E8F0FC;   /* selected row, active nav, badge fill */
    --accent-fg:       #FFFFFF;   /* text on a blue fill */

    /* ---------- semantic ---------- */
    --danger:  #C8102E;  --danger-bg:  #FDF2F3;  --danger-line:  #F2C7CE;
    --success: #1D7A3E;  --success-bg: #F1F8F3;  --success-line: #BFE0C9;
    --warning: #8A6D00;  --warning-bg: #FDF8E8;  --warning-line: #E8DCA8;
    --danger-solid: #C8102E;

    /* ---------- radius: Blue Grid is hard-cornered ---------- */
    --r-sm: 0px;  --r-md: 0px;  --r-lg: 0px;  --r-xl: 0px;  --r-pill: 0px;
    --r-round: 50%;               /* owns the one circular thing, the avatar */

    /* ---------- elevation is a rule, not a blur ---------- */
    --shadow-sm: none;
    --shadow-md: 0 1px 2px rgba(13, 15, 18, 0.05);
    --shadow-lg: 0 24px 60px -18px rgba(13, 15, 18, 0.22);
    --focus-ring: 0 0 0 3px rgba(0, 99, 204, 0.28);

    /* ---------- spacing scale (4px base) — did not exist before ---------- */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
    --s-6: 24px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px; --s-16: 64px;

    /* ---------- type scale — did not exist before ---------- */
    --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
    --fs-md: 16px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px;
    --track-label: 0.14em;   /* the Blue Grid signature: wide uppercase micro-labels */
    --track-caps:  0.06em;
    --track-tight: -0.015em;

    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono',
                 'Roboto Mono', Consolas, monospace;

    /* ---------- legacy aliases still live in page-local CSS ----------
       --dark-bg is the one to watch: all 25 uses are `color:` on headings
       and values. "dark" meant "the strong text colour", so it maps to
       --text, not to a background. */
    --border:         var(--hairline);
    --dark-bg:        var(--text);
    --light-bg:       var(--surface-2);
    --primary-green:  var(--accent);
    --primary-green-dark: var(--accent-dim);
    --highlight-yellow:   var(--warning);
}

/* =====================================================================
   Base
   ===================================================================== */
html[data-theme="bluegrid"] body {
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
}

/* The grid the product is named after. Fixed, so it does not scroll with
   content, and faded from the top-left so it never competes with a table. */
html[data-theme="bluegrid"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(120% 90% at 0% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 0% 0%, #000 0%, transparent 72%);
}
html[data-theme="bluegrid"] #app,
html[data-theme="bluegrid"] .login-card { position: relative; z-index: 1; }

html[data-theme="bluegrid"] ::selection { background: var(--accent-wash); color: var(--text); }
html[data-theme="bluegrid"] a { color: var(--accent); }

/* Hard corners everywhere, with the one exception that must stay round.
   Cheaper and more reliable than chasing 43 literal border-radius values
   through 13 page-local <style> blocks. Same trick landing.css:61 uses. */
html[data-theme="bluegrid"] *,
html[data-theme="bluegrid"] *::before,
html[data-theme="bluegrid"] *::after { border-radius: 0 !important; }
html[data-theme="bluegrid"] .avatar { border-radius: var(--r-round) !important; }

/* ---------- micro label: the signature ---------- */
html[data-theme="bluegrid"] .label-micro,
html[data-theme="bluegrid"] .kpi .label,
html[data-theme="bluegrid"] .info-box .label,
html[data-theme="bluegrid"] .summary-box .label,
html[data-theme="bluegrid"] .section-title,
html[data-theme="bluegrid"] .topbar-user .role {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--text-subtle);
    font-weight: 600;
}

/* Money, plates, IDs and dates line up. Misaligned currency is the
   loudest "this is not a real ops tool" tell in the whole app. */
html[data-theme="bluegrid"] table.data td,
html[data-theme="bluegrid"] .kpi .value,
html[data-theme="bluegrid"] .summary-box .value { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Shell
   ===================================================================== */
html[data-theme="bluegrid"] .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--hairline);
}

/* Two variants of the same block. Admin carries the product -- mark plus
   "Blue Grid". Driver carries the operator -- "GB Car Rental", no mark,
   because drivers are GB's customers and were never sold Blue Grid. Same
   styling either way, which is the point: one design system, two names. */
html[data-theme="bluegrid"] .sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--s-4);
}
html[data-theme="bluegrid"] .bg-mark {
    display: grid;
    grid-template-columns: repeat(2, 9px);
    grid-auto-rows: 9px;
    gap: 3px;
}
html[data-theme="bluegrid"] .bg-mark i { background: var(--accent); }
html[data-theme="bluegrid"] .bg-mark i:nth-child(2) { background: var(--text); }
html[data-theme="bluegrid"] .bg-word {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
}
html[data-theme="bluegrid"] .bg-portal {
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-size: var(--fs-micro);
    font-weight: 600;
}

html[data-theme="bluegrid"] .sidebar-nav a {
    color: var(--text-muted);
    border-left: 2px solid transparent;
    letter-spacing: 0.01em;
}
html[data-theme="bluegrid"] .sidebar-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
}
html[data-theme="bluegrid"] .sidebar-nav a.active {
    background: var(--accent-wash);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

html[data-theme="bluegrid"] .topbar {
    background: rgba(247, 248, 250, 0.82);
    border-bottom: 1px solid var(--hairline);
}
html[data-theme="bluegrid"] .topbar h1 {
    letter-spacing: var(--track-tight);
    color: var(--text);
}
html[data-theme="bluegrid"] .content { background: transparent; }

/* The user menu is injected at runtime by js/auth.js:151-246. Its class
   names are a contract with that file and must not be renamed here. */
html[data-theme="bluegrid"] .avatar { background: var(--accent); color: var(--accent-fg); }
html[data-theme="bluegrid"] .topbar-user .name { color: var(--text); }
html[data-theme="bluegrid"] .signout {
    background: var(--surface);
    border-color: var(--hairline-strong);
    color: var(--text-muted);
}
html[data-theme="bluegrid"] .signout:hover {
    background: var(--surface-3);
    color: var(--text);
}

/* =====================================================================
   Controls
   ===================================================================== */
html[data-theme="bluegrid"] .btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
    font-weight: 600;
    letter-spacing: var(--track-caps);
}
html[data-theme="bluegrid"] .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

html[data-theme="bluegrid"] .btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--hairline-strong);
}
html[data-theme="bluegrid"] .btn-secondary:hover { background: var(--surface-3); }

html[data-theme="bluegrid"] .btn-danger {
    background: var(--danger-solid);
    color: #ffffff;
    border-color: var(--danger-solid);
}
html[data-theme="bluegrid"] .btn-danger:hover { background: #A60D26; border-color: #A60D26; }

html[data-theme="bluegrid"] .btn:focus-visible { box-shadow: var(--focus-ring); }

html[data-theme="bluegrid"] .form-group label {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-weight: 600;
}
html[data-theme="bluegrid"] .form-group input,
html[data-theme="bluegrid"] .form-group select,
html[data-theme="bluegrid"] .form-group textarea,
html[data-theme="bluegrid"] input[type="search"] {
    background: var(--surface);
    border-color: var(--hairline-strong);
    color: var(--text);
}
html[data-theme="bluegrid"] .form-group input::placeholder,
html[data-theme="bluegrid"] .form-group textarea::placeholder { color: var(--text-subtle); }
html[data-theme="bluegrid"] .form-group input:focus,
html[data-theme="bluegrid"] .form-group select:focus,
html[data-theme="bluegrid"] .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
}
html[data-theme="bluegrid"] ::-webkit-file-upload-button {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--hairline-strong);
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
}

/* =====================================================================
   Surfaces and data
   ===================================================================== */
html[data-theme="bluegrid"] .card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: none;
}
html[data-theme="bluegrid"] .card-header { border-bottom-color: var(--hairline); }
html[data-theme="bluegrid"] .card-header h2 {
    color: var(--text);
    letter-spacing: var(--track-tight);
}

html[data-theme="bluegrid"] table.data { background: transparent; }
html[data-theme="bluegrid"] table.data thead th {
    background: var(--surface-2);
    color: var(--text-subtle);
    text-transform: uppercase;
    font-size: var(--fs-micro);
    letter-spacing: var(--track-label);
    border-bottom-color: var(--hairline);
}
html[data-theme="bluegrid"] table.data td { border-bottom-color: var(--hairline-soft); }
html[data-theme="bluegrid"] table.data tbody tr:hover { background: var(--accent-wash); }

html[data-theme="bluegrid"] .kpi,
html[data-theme="bluegrid"] .summary-box,
html[data-theme="bluegrid"] .info-box {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: none;
}
html[data-theme="bluegrid"] .kpi .value,
html[data-theme="bluegrid"] .summary-box .value,
html[data-theme="bluegrid"] .info-box .value { color: var(--text); }
html[data-theme="bluegrid"] .kpi .value { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); }
html[data-theme="bluegrid"] a.kpi-link:hover { border-color: var(--accent); }

html[data-theme="bluegrid"] .doc-list li {
    background: var(--surface);
    border-color: var(--hairline);
}
html[data-theme="bluegrid"] .doc-list .doc-info strong,
html[data-theme="bluegrid"] .doc-list li .meta strong { color: var(--text); }

html[data-theme="bluegrid"] .empty-state { color: var(--text-muted); }
html[data-theme="bluegrid"] .empty-state h3 { color: var(--text); }

/* =====================================================================
   State: badges, alerts
   ===================================================================== */
html[data-theme="bluegrid"] .badge {
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-size: var(--fs-micro);
    font-weight: 600;
}
html[data-theme="bluegrid"] .badge-active,
html[data-theme="bluegrid"] .badge-rented,
html[data-theme="bluegrid"] .badge-converted,
html[data-theme="bluegrid"] .badge-paid,
html[data-theme="bluegrid"] .badge-approved {
    background: var(--success-bg); color: var(--success); border-color: var(--success-line);
}
html[data-theme="bluegrid"] .badge-new,
html[data-theme="bluegrid"] .badge-available,
html[data-theme="bluegrid"] .badge-contacted,
html[data-theme="bluegrid"] .badge-submitted {
    background: var(--accent-wash); color: var(--accent); border-color: #BBD4F5;
}
html[data-theme="bluegrid"] .badge-unpaid,
html[data-theme="bluegrid"] .badge-rejected,
html[data-theme="bluegrid"] .badge-disputed {
    background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line);
}
html[data-theme="bluegrid"] .badge-maintenance,
html[data-theme="bluegrid"] .badge-pending {
    background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line);
}
html[data-theme="bluegrid"] .badge-inactive,
html[data-theme="bluegrid"] .badge-ended {
    background: var(--surface-2); color: var(--text-subtle); border-color: var(--hairline);
}

html[data-theme="bluegrid"] .alert { border-width: 1px; border-style: solid; }
html[data-theme="bluegrid"] .alert-error   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-line); }
html[data-theme="bluegrid"] .alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
html[data-theme="bluegrid"] .alert-info    { background: var(--accent-wash); color: var(--accent); border-color: #BBD4F5; }

/* =====================================================================
   Modal, filters, tabs, stepper
   ===================================================================== */
html[data-theme="bluegrid"] .modal-backdrop {
    background: var(--overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
html[data-theme="bluegrid"] .modal {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
}
html[data-theme="bluegrid"] .modal h2,
html[data-theme="bluegrid"] .modal h3 { color: var(--text); letter-spacing: var(--track-tight); }

html[data-theme="bluegrid"] .filter-bar button {
    background: var(--surface);
    border-color: var(--hairline-strong);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-size: var(--fs-xs);
}
html[data-theme="bluegrid"] .filter-bar button:hover { background: var(--surface-3); color: var(--text); }
html[data-theme="bluegrid"] .filter-bar button.active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}

html[data-theme="bluegrid"] .tab-bar { border-bottom-color: var(--hairline); }
html[data-theme="bluegrid"] .tab-bar button {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-size: var(--fs-sm);
}
html[data-theme="bluegrid"] .tab-bar button:hover { color: var(--text); }
html[data-theme="bluegrid"] .tab-bar button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

html[data-theme="bluegrid"] .stepper { background: var(--surface); border-color: var(--hairline); }
html[data-theme="bluegrid"] .stepper .step .circle {
    background: var(--surface-2);
    border-color: var(--hairline-strong);
    color: var(--text-muted);
}
html[data-theme="bluegrid"] .stepper .step.done .circle {
    background: var(--success); color: #ffffff; border-color: var(--success);
}
html[data-theme="bluegrid"] .stepper .step.current .circle {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}

/* =====================================================================
   Page-local components that survived consolidation
   ===================================================================== */
html[data-theme="bluegrid"] .car-header,
html[data-theme="bluegrid"] .doc-slot,
html[data-theme="bluegrid"] .pending-list li,
html[data-theme="bluegrid"] .toc {
    background: var(--surface);
    border-color: var(--hairline);
}
html[data-theme="bluegrid"] .photo {
    background: var(--surface-2);
    border-color: var(--hairline-strong);
}
html[data-theme="bluegrid"] .photo .cap { background: var(--overlay); color: #ffffff; }
html[data-theme="bluegrid"] .progress { background: var(--surface-3); }
html[data-theme="bluegrid"] .due-banner.ok      { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
html[data-theme="bluegrid"] .due-banner.overdue { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-line); }

html[data-theme="bluegrid"] .guide h2 { color: var(--text); border-bottom-color: var(--hairline); }
html[data-theme="bluegrid"] .guide h3 { color: var(--text); }
html[data-theme="bluegrid"] .guide kbd,
html[data-theme="bluegrid"] .guide code { background: var(--surface-2); color: var(--accent); }
html[data-theme="bluegrid"] .toc a { color: var(--accent); }

/* =====================================================================
   Sign-in
   Blue Grid's front door. One of our own car drawings, large and faint,
   bleeding off the right edge -- it is a car rental system, and the
   drawing is ours, unlike the photographs this project started with.
   ===================================================================== */
html[data-theme="bluegrid"] body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--s-6);
    overflow: hidden;
}
html[data-theme="bluegrid"] .login-alert-note { font-size: var(--fs-micro); opacity: 0.75; }
html[data-theme="bluegrid"] body.login-page::after {
    content: "";
    position: fixed;
    right: -8vw;
    bottom: 12vh;
    width: min(76vw, 1180px);
    aspect-ratio: 2 / 1;
    background: url("../img/bluegrid-car.svg") no-repeat right center / contain;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
/* The card sits left of the drawing rather than on top of it, so nothing
   has to be dimmed to keep the form legible. */
html[data-theme="bluegrid"] .login-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    padding: var(--s-10) var(--s-8);
    margin-left: min(9vw, 140px);
    width: 100%;
    max-width: 380px;
}

/* The mark, built from four divs rather than an <img> so it inherits the
   theme colours and stays crisp at any zoom. Same four cells as
   favicon-bluegrid.svg, one lit. */
html[data-theme="bluegrid"] .login-mark {
    display: grid;
    grid-template-columns: repeat(2, 13px);
    grid-auto-rows: 13px;
    gap: 4px;
    margin-bottom: var(--s-6);
}
html[data-theme="bluegrid"] .login-mark i { background: var(--accent); }
html[data-theme="bluegrid"] .login-mark i:nth-child(2) { background: var(--text); }

html[data-theme="bluegrid"] .login-brand {
    color: var(--text);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-weight: 700;
    font-size: var(--fs-lg);
    margin-bottom: var(--s-1);
}
html[data-theme="bluegrid"] .login-tagline {
    color: var(--text-subtle);
    text-align: left;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    margin-bottom: var(--s-10);
}
/* "Sign in" is a section marker here, not a heading competing with the
   wordmark -- the card only does one thing, so the label can recede. */
html[data-theme="bluegrid"] .login-card h2 {
    color: var(--text-subtle);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-weight: 600;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--s-6);
}
html[data-theme="bluegrid"] .login-card .btn { margin-top: var(--s-4); }
html[data-theme="bluegrid"] .login-hint,
html[data-theme="bluegrid"] .login-back {
    color: var(--text-subtle);
    text-align: left;
    font-size: var(--fs-xs);
    line-height: 1.6;
}
html[data-theme="bluegrid"] .login-hint { margin-top: var(--s-5); }
html[data-theme="bluegrid"] .login-back {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
}
html[data-theme="bluegrid"] .login-back:hover { color: var(--accent); }

/* On a phone there is no room beside the card, so the drawing drops
   behind it at a lower opacity and the card centres. */
@media (max-width: 720px) {
    html[data-theme="bluegrid"] body.login-page { justify-content: center; }
    html[data-theme="bluegrid"] .login-card { margin-left: 0; }
    html[data-theme="bluegrid"] body.login-page::after {
        right: -20vw; bottom: 6vh; width: 130vw; opacity: 0.08;
    }
}

/* =====================================================================
   Print
   The user guide is the one thing here that gets printed.
   ===================================================================== */
@media print {
    html[data-theme="bluegrid"] body::before,
    html[data-theme="bluegrid"] body.login-page::after { display: none !important; }
    html[data-theme="bluegrid"] body { background: #ffffff !important; }
}

/* Respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
    html[data-theme="bluegrid"] * { transition-duration: 0.01ms !important; animation: none !important; }
}