/* =============================================================================
   Marketing Review design system - the Aira shell (icon rail, glass head, panels)
   in three palettes, each light or dark:
     Aira    deep navy, sky blue, gold for the CEO (support, decisions, pins)
     Indigo  indigo -> sky, amber highlights
     Plum    plum -> rose, saffron highlights
   html[data-x-palette="aira|indigo|plum"][data-x-mode="light|dark"], picked from the rail
   (mr-shell.js) and remembered per browser. Every colour below is a token: pages never hard-code one.
   Gold (CEO highlights) is always --x-accent-3; --x-gold-ink is its readable text colour.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens: what light / dark share */
:root, html[data-x-mode="light"] {
    color-scheme: light;
    --x-panel: rgba(255, 255, 255, .9); --x-solid: #ffffff; --x-input: #ffffff;
    --x-line: rgba(var(--x-accent-rgb), .12); --x-line-2: rgba(var(--x-accent-rgb), .24);
    --x-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 14px 34px -20px rgba(var(--x-accent-rgb), .45);
    --x-on-accent: #ffffff;
    --x-ok: #139a60; --x-ok-soft: #e3f6ec; --x-warn: #d9800f; --x-warn-soft: #fdf1df; --x-bad: #d14343; --x-bad-soft: #fcebeb;
    --x-rail-hi: rgba(255, 255, 255, .07); --x-rail-line: rgba(255, 255, 255, .08);
    --x-hero: radial-gradient(1100px 300px at 0% 0%, var(--x-hero-a) 0%, transparent 60%), radial-gradient(800px 260px at 100% 0%, var(--x-hero-b) 0%, transparent 55%), linear-gradient(180deg, #fff, var(--x-soft-2));
    --x-glow: none;
}
:root {
    --x-grad: linear-gradient(135deg, var(--x-accent), var(--x-accent-2));
    --x-grad-warm: linear-gradient(135deg, var(--x-warm-1), var(--x-warm-2));
    --x-mark-grad: conic-gradient(from 210deg, var(--x-mark), var(--x-accent-2), var(--x-accent-3), var(--x-mark));
}

/* ---------------------------------------------------------------- Aira (default) */
:root, html[data-x-palette="aira"] {
    --x-bg: #f4f6fa; --x-bg-2: #e9edf4; --x-soft: #e6edf8; --x-soft-2: #f8fafd;
    --x-ink: #182234; --x-ink-2: #45526a; --x-muted: #77839a;
    --x-accent: #1f4f8f; --x-accent-rgb: 31, 79, 143; --x-accent-2: #3d7bc4; --x-accent-2-rgb: 61, 123, 196; --x-accent-3: #c0901c; --x-accent-3-rgb: 192, 144, 28;
    --x-accent-3-hi: #f0d58a; --x-warm-1: #c0901c; --x-warm-2: #e0b54a; --x-on-warm: #2a1f00; --x-mark: #1f4f8f; --x-gold-ink: #6b4f06;
    --x-rail: #13213a; --x-rail-ink: #9aa9c4; --x-rail-on: #c0901c; --x-rail-on-ink: #1b1405;
    --x-hero-a: #dde6f5; --x-hero-b: #f7ecd0;
    --x-deep-1: #13213a; --x-deep-2: #0a1426; --x-on-deep: #e5ebf6; --x-on-deep-2: #a9b7d0; --x-on-deep-3: #8ea9d6;
    --x-bright: #6ea8ff; --x-bright-rgb: 110, 168, 255; --x-info: #9cc2ff; --x-info-rgb: 156, 194, 255;
}
html[data-x-palette="aira"][data-x-mode="dark"] {
    --x-bg: #0d121b; --x-bg-2: #111827; --x-panel: rgba(20, 27, 40, .85); --x-solid: #151c2a;
    --x-ink: #e6ebf3; --x-ink-2: #b4bfd0; --x-muted: #8190a8;
    --x-accent: #6ea8ff; --x-accent-rgb: 110, 168, 255; --x-accent-2: #9cc2ff; --x-accent-2-rgb: 156, 194, 255; --x-accent-3: #d9b452; --x-accent-3-rgb: 217, 180, 82;
    --x-warm-1: #d9b452; --x-warm-2: #efd58c; --x-on-accent: #0a1730; --x-rail: #0a1120; --x-rail-ink: #8291ad; --x-gold-ink: #efd58c;
}

/* ---------------------------------------------------------------- Indigo */
html[data-x-palette="indigo"] {
    --x-bg: #f4f5fb; --x-bg-2: #e9ebf7; --x-soft: #e8e7fd; --x-soft-2: #f8f8fe;
    --x-ink: #161632; --x-ink-2: #4b4d72; --x-muted: #8587aa;
    --x-accent: #4f46e5; --x-accent-rgb: 79, 70, 229; --x-accent-2: #0ea5e9; --x-accent-2-rgb: 14, 165, 233; --x-accent-3: #f59e0b; --x-accent-3-rgb: 245, 158, 11;
    --x-accent-3-hi: #fde68a; --x-warm-1: #f59e0b; --x-warm-2: #fbbf24; --x-on-warm: #1f1402; --x-mark: #4f46e5; --x-gold-ink: #92400e;
    --x-rail: #1e1b4b; --x-rail-ink: #a5a3d9; --x-rail-on: #f59e0b; --x-rail-on-ink: #1f1402;
    --x-hero-a: #e0defd; --x-hero-b: #fdf0cf;
    --x-deep-1: #24206a; --x-deep-2: #100e38; --x-on-deep: #e4e3ff; --x-on-deep-2: #b3b0ea; --x-on-deep-3: #9d98f0;
    --x-bright: #8b85ff; --x-bright-rgb: 139, 133, 255; --x-info: #38bdf8; --x-info-rgb: 56, 189, 248;
}
html[data-x-palette="indigo"][data-x-mode="dark"] {
    --x-bg: #0b0c18; --x-bg-2: #10112a; --x-panel: rgba(20, 21, 42, .85); --x-solid: #14152a;
    --x-ink: #e9e9fb; --x-ink-2: #b1b2d6; --x-muted: #74769c;
    --x-accent: #8b85ff; --x-accent-rgb: 139, 133, 255; --x-accent-2: #38bdf8; --x-accent-2-rgb: 56, 189, 248; --x-accent-3: #fbbf24; --x-accent-3-rgb: 251, 191, 36;
    --x-warm-1: #fbbf24; --x-warm-2: #fde68a; --x-on-accent: #0d0b2e; --x-rail: #07081a; --x-rail-ink: #7a7ca6; --x-gold-ink: #fde68a;
}

/* ---------------------------------------------------------------- Plum */
html[data-x-palette="plum"] {
    --x-bg: #f7f3f8; --x-bg-2: #eee6f0; --x-soft: #f3e5f6; --x-soft-2: #fbf8fc;
    --x-ink: #24142a; --x-ink-2: #5b4762; --x-muted: #9a8aa0;
    --x-accent: #7b2d8e; --x-accent-rgb: 123, 45, 142; --x-accent-2: #d0457a; --x-accent-2-rgb: 208, 69, 122; --x-accent-3: #e9a23b; --x-accent-3-rgb: 233, 162, 59;
    --x-accent-3-hi: #f8d9a4; --x-warm-1: #e9a23b; --x-warm-2: #f2c06a; --x-on-warm: #241503; --x-mark: #7b2d8e; --x-gold-ink: #8a5a0c;
    --x-rail: #2a1033; --x-rail-ink: #bba2c4; --x-rail-on: #e9a23b; --x-rail-on-ink: #241503;
    --x-hero-a: #efd9f4; --x-hero-b: #fbe9cd;
    --x-deep-1: #351340; --x-deep-2: #1a0820; --x-on-deep: #f3e4f7; --x-on-deep-2: #cfb3d8; --x-on-deep-3: #d08ae6;
    --x-bright: #d08ae6; --x-bright-rgb: 208, 138, 230; --x-info: #ff7aa8; --x-info-rgb: 255, 122, 168;
}
html[data-x-palette="plum"][data-x-mode="dark"] {
    --x-bg: #120b14; --x-bg-2: #19101c; --x-panel: rgba(30, 19, 34, .85); --x-solid: #1e1322;
    --x-ink: #f4eaf6; --x-ink-2: #c9b5cf; --x-muted: #8c7a92;
    --x-accent: #d08ae6; --x-accent-rgb: 208, 138, 230; --x-accent-2: #ff7aa8; --x-accent-2-rgb: 255, 122, 168; --x-accent-3: #ffc15e; --x-accent-3-rgb: 255, 193, 94;
    --x-warm-1: #ffc15e; --x-warm-2: #ffd99a; --x-on-accent: #250b2e; --x-rail: #0b060d; --x-rail-ink: #8f7c96; --x-gold-ink: #ffd99a;
}
/* ---------------------------------------------------------------- dark: shared values, after the palettes so they win over a palette's light ones */
html[data-x-mode="dark"] {
    color-scheme: dark;
    --x-input: rgba(255, 255, 255, .04);
    --x-line: rgba(255, 255, 255, .08); --x-line-2: rgba(255, 255, 255, .15);
    --x-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -24px rgba(0, 0, 0, .85);
    --x-soft: rgba(var(--x-accent-rgb), .13); --x-soft-2: rgba(255, 255, 255, .035);
    --x-ok: #3ddc97; --x-ok-soft: rgba(61, 220, 151, .13); --x-warn: #ffb35c; --x-warn-soft: rgba(255, 179, 92, .13); --x-bad: #ff6b6b; --x-bad-soft: rgba(255, 107, 107, .13);
    --x-rail-hi: rgba(var(--x-accent-rgb), .08); --x-rail-on: rgba(var(--x-accent-rgb), .16); --x-rail-on-ink: var(--x-accent); --x-rail-line: rgba(255, 255, 255, .06);
    --x-hero: radial-gradient(900px 320px at 8% -10%, rgba(var(--x-accent-rgb), .22), transparent 60%), radial-gradient(800px 300px at 95% 0%, rgba(var(--x-accent-2-rgb), .18), transparent 55%), radial-gradient(600px 240px at 60% 120%, rgba(var(--x-accent-3-rgb), .12), transparent 60%), var(--x-bg-2);
    --x-glow: 0 0 0 1px rgba(var(--x-accent-rgb), .35), 0 0 24px -4px rgba(var(--x-accent-rgb), .45);
}
html { --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "IBM Plex Sans", system-ui, sans-serif; color: var(--x-ink); background: var(--x-bg); -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; }
h1, h2, h3, h4, h5, h6 { color: var(--x-ink); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--x-accent); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .02em; font-size: .92em; }
.muted { color: var(--x-muted); }
::selection { background: rgba(var(--x-accent-rgb), .22); }
/* slim scrollbars everywhere, in the palette's colour */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--x-accent-rgb), .32) transparent; }
*:hover { scrollbar-color: rgba(var(--x-accent-rgb), .55) transparent; }
svg.feather { width: 1em; height: 1em; vertical-align: -.125em; }

/* ---------------------------------------------------------------- shell */
.vx-app { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }
.vx-rail { position: sticky; top: 0; height: 100vh; z-index: 1030; background: var(--x-rail); display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px; }
.vx-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; flex: none;
    background: var(--x-mark-grad); box-shadow: 0 8px 22px -8px rgba(var(--x-accent-2-rgb), .8); transition: transform .3s; }
.vx-mark svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vx-rail-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; overflow-y: auto; overflow-x: visible; scrollbar-width: none; width: 100%; }
.vx-rbtn { position: relative; width: 48px; height: 48px; flex: none; border-radius: 14px; border: 0; background: transparent; color: var(--x-rail-ink) !important; display: grid; place-items: center; transition: background .2s, color .2s, box-shadow .2s; text-decoration: none !important; cursor: pointer; }
.vx-rbtn svg { width: 20px; height: 20px; }
.vx-rbtn:hover { background: var(--x-rail-hi); color: #fff !important; }
.vx-rbtn.is-on { background: var(--x-rail-on); color: var(--x-rail-on-ink) !important; box-shadow: var(--x-glow); }
.vx-rbtn.is-soon { opacity: .55; }
.vx-rail-sep { width: 28px; height: 1px; background: var(--x-rail-line); margin: 6px 0; flex: none; }
.vx-rail-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.vx-ico-light { display: none; }
html[data-x-mode="dark"] .vx-ico-light { display: block; }
html[data-x-mode="dark"] .vx-ico-dark { display: none; }
.vx-me { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); background: var(--x-grad-warm); color: var(--x-on-warm); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.vx-me { cursor: pointer; }
.vx-me.lg { width: 44px; height: 44px; font-size: 15px; border: 0; cursor: default; }
.vx-me-wrap { position: relative; }
.x-pm { position: fixed; z-index: 2100; min-width: 240px; background: var(--x-solid); border: 1px solid var(--x-line); border-radius: 16px; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .35); overflow: hidden; }
.x-pm-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--x-line); background: var(--x-soft-2); }
.x-pm-head b { display: block; font-size: 14px; }
.x-pm-head small { color: var(--x-muted); font-size: 12px; }
.x-pm-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 16px; border: 0; background: none; color: var(--x-ink); font: 600 13px inherit; font-family: inherit; cursor: pointer; text-align: left; }
.x-pm-item:hover { background: var(--x-bad-soft); color: var(--x-bad); }
.x-pm-item svg { width: 16px; height: 16px; }
/* tooltip: fixed so the scrolling rail does not clip it (positioned by mr-shell.js) */
.vx-tipbox { position: fixed; z-index: 2000; white-space: nowrap; padding: 6px 11px; border-radius: 9px; background: var(--x-ink); color: var(--x-bg); font-size: 12px; font-weight: 700; pointer-events: none; opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; }
.vx-tipbox.on { opacity: 1; transform: none; }
.vx-tipbox small { display: block; font-weight: 600; opacity: .65; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }

.vx-main { min-width: 0; display: flex; flex-direction: column; }

/* ---- the page head: one compact glass bar, sticky. Left: the page's own icon, title and one line of help.
        Right: breadcrumbs as a path of chips, then the page's actions. A slow light runs along its lower edge. ---- */
.vx-head { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 68px; padding: 12px 28px;
    background: color-mix(in srgb, var(--x-bg) 72%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--x-line); }
.vx-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--x-accent) 20%, var(--x-accent-2) 50%, var(--x-accent-3) 80%, transparent);
    background-size: 200% 100%; opacity: .7; animation: vxLine 8s linear infinite; }
@keyframes vxLine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.vx-head-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 22rem; }
.vx-head-ico { position: relative; width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--x-on-accent);
    background: var(--x-grad); box-shadow: 0 10px 22px -12px var(--x-accent); }
.vx-head-ico svg { width: 20px; height: 20px; }
/* a corner of the highlight colour: the board's mark on every page */
.vx-head-ico::after { content: ""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--x-accent-3); border: 2px solid var(--x-bg); }
.vx-head h1 { font-size: 1.22rem; line-height: 1.2; margin: 0; white-space: nowrap; }
.vx-head p { margin: 1px 0 0; font-size: 12.5px; color: var(--x-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-head-text { min-width: 0; }
.vx-head-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.vx-crumbs { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: var(--x-panel); border: 1px solid var(--x-line); box-shadow: var(--x-shadow);
    font-size: 12px; font-weight: 700; }
.vx-crumbs a, .vx-crumbs span, .vx-crumbs b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; color: var(--x-ink-2); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.vx-crumbs a svg { width: 13px; height: 13px; }
.vx-crumbs a:hover { background: var(--x-soft); color: var(--x-accent); }
.vx-crumbs i { width: 6px; height: 6px; border-right: 1.6px solid var(--x-muted); border-top: 1.6px solid var(--x-muted); transform: rotate(45deg); opacity: .6; margin: 0 2px; }
.vx-crumbs b { background: var(--x-soft); color: var(--x-accent); }
.vx-hero-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.vx-hero-acts:empty { display: none; }
.vx-page { padding: 22px 28px 48px; flex: 1; }

/* ---------------------------------------------------------------- buttons */
.x-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--x-line-2); background: var(--x-solid); color: var(--x-ink); font: 700 13px/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.x-btn:hover { border-color: var(--x-accent); color: var(--x-accent); }
.x-btn:active { transform: translateY(1px); }
.x-btn:disabled { opacity: .55; cursor: not-allowed; }
.x-btn svg { width: 16px; height: 16px; }
.x-btn.primary { background: var(--x-grad); color: var(--x-on-accent); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(var(--x-accent-rgb), .9); }
.x-btn.primary:hover { color: var(--x-on-accent); filter: brightness(1.06); }
.x-btn.ghost { background: transparent; border-color: transparent; }
.x-btn.ghost:hover { background: var(--x-soft); }
.x-btn.sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.x-icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--x-ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.x-icon-btn svg { width: 16px; height: 16px; }
.x-icon-btn:hover { background: var(--x-soft); color: var(--x-accent); }
.x-icon-btn.danger:hover { background: var(--x-bad-soft); color: var(--x-bad); }
.x-icon-btn.armed { background: var(--x-bad); color: #fff; width: auto; padding: 0 10px; font: 700 11.5px inherit; font-family: inherit; }

/* ---------------------------------------------------------------- panels & tiles */
.x-panel { background: var(--x-panel); border: 1px solid var(--x-line); border-radius: 20px; box-shadow: var(--x-shadow); backdrop-filter: blur(10px); }
.x-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--x-line); }
/* ---------------------------------------------------------------- form fields */
.x-field label { display: block; font-size: 12px; font-weight: 700; color: var(--x-ink-2); margin-bottom: 5px; }
.x-field label .req { color: var(--x-accent-3); }
.x-field input, .x-field select, .x-field textarea { width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--x-line-2); background: var(--x-input); color: var(--x-ink); font: 500 14px inherit; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.x-field textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.x-field input:focus, .x-field select:focus, .x-field textarea:focus { border-color: var(--x-accent); box-shadow: 0 0 0 3px rgba(var(--x-accent-rgb), .14); }
.x-field input:disabled { background: var(--x-soft-2); color: var(--x-ink-2); cursor: not-allowed; }
.x-field input.upper { text-transform: uppercase; font-family: "JetBrains Mono", ui-monospace, monospace; }
.x-field .hint { display: block; font-size: 11.5px; color: var(--x-muted); margin-top: 4px; }
.x-field.has-err input, .x-field.has-err select, .x-field.has-err textarea { border-color: var(--x-bad); box-shadow: 0 0 0 3px var(--x-bad-soft); }
.x-field .err { display: none; font-size: 11.5px; font-weight: 600; color: var(--x-bad); margin-top: 4px; }
.x-field.has-err .err { display: block; }
/* ---------------------------------------------------------------- master cells (the kit draws the rest) */
.mr-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; color: var(--x-accent); text-decoration: none; font-weight: 600; }
.mr-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-sla { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--x-soft); color: var(--x-accent); font-weight: 800; font-size: 12px; }
.mr-role { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--x-soft-2); color: var(--x-ink-2); border: 1px solid var(--x-line); }
.mr-role.is-admin { background: var(--x-warn-soft); color: var(--x-warn); border-color: transparent; }
.mr-role.is-supervisor { background: var(--x-soft); color: var(--x-accent); border-color: transparent; }
.mr-role.is-programmer { background: var(--x-ok-soft); color: var(--x-ok); border-color: transparent; }
.mr-pct { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mr-pct i { display: block; width: 56px; height: 6px; border-radius: 99px; background: var(--x-soft); overflow: hidden; }
.mr-pct i em { display: block; height: 100%; border-radius: 99px; background: var(--x-ok); }
.mr-pct.is-low i em { background: var(--x-warn); }

/* ---------------------------------------------------------------- toast */
.x-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.x-toast { display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 14px; border-radius: 14px; background: var(--x-ink); color: var(--x-bg); font-weight: 600; font-size: 13px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .4); animation: xtoast .25s ease; }
.x-toast svg { width: 18px; height: 18px; flex: none; }
.x-toast.ok svg { color: #4fe3a5; }
.x-toast.bad svg { color: #ff8a8a; }
.x-toast.is-msg { align-items: flex-start; text-decoration: none; color: var(--x-bg); cursor: pointer; min-width: 260px; }
.x-toast.is-msg:hover { filter: brightness(1.12); }
.x-toast.is-msg svg { color: #7cc4ff; margin-top: 2px; }
.x-toast.is-msg span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-toast.is-msg small { font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@keyframes xtoast { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- home + coming soon */
.x-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.x-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: var(--x-panel); border: 1px solid var(--x-line); box-shadow: var(--x-shadow); text-decoration: none; color: var(--x-ink); transition: transform .15s, border-color .2s; }
.x-tile:hover { transform: translateY(-2px); border-color: var(--x-accent); color: var(--x-ink); }
.x-tile .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--x-soft); color: var(--x-accent); flex: none; }
.x-tile .ic svg { width: 20px; height: 20px; }
.x-tile b { display: block; font-size: 15px; }
.x-tile small { color: var(--x-muted); font-size: 12.5px; }
.x-tile em { font-style: normal; font-weight: 800; font-size: 1.4rem; display: block; margin-top: 6px; color: var(--x-accent); }
.x-sec-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); margin: 26px 0 10px; }
.x-soon { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 28px; }
.x-soon .ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--x-grad-warm); color: var(--x-on-warm); }
.x-soon .ic svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------- appearance picker (rail) */
.x-theme-pm { width: 290px; padding: 14px; }
.x-theme-pm h6 { margin: 0 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--x-muted); }
.x-swatches { display: grid; gap: 8px; }
.x-swatch { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--x-line); background: var(--x-soft-2);
    color: var(--x-ink); font-family: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s, background .2s; }
.x-swatch:hover { transform: translateY(-1px); border-color: var(--x-line-2); }
.x-swatch.is-on { border-color: var(--x-accent); background: var(--x-soft); }
.x-swatch .pv { position: relative; flex: none; width: 54px; height: 38px; border-radius: 10px; overflow: hidden; background: var(--pv-bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.x-swatch .pv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--pv-rail); }
.x-swatch .pv::after { content: ""; position: absolute; left: 18px; right: 6px; top: 8px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--pv-a), var(--pv-b)); }
.x-swatch .pv i { position: absolute; left: 18px; bottom: 7px; width: 14px; height: 8px; border-radius: 4px; background: var(--pv-c); }
.x-swatch .pv i + i { left: 36px; width: 10px; background: var(--pv-a); opacity: .35; }
.x-swatch b { display: block; font-size: 13px; }
.x-swatch small { display: block; font-size: 11.5px; color: var(--x-muted); }
.x-swatch .ok { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--x-accent); color: var(--x-on-accent); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.x-swatch .ok svg { width: 12px; height: 12px; }
.x-swatch.is-on .ok { transform: scale(1); }
.x-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; border-radius: 12px; background: var(--x-soft-2); border: 1px solid var(--x-line); }
.x-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--x-ink-2); font: 700 12.5px inherit; font-family: inherit; cursor: pointer; transition: background .2s, color .2s; }
.x-modes button svg { width: 14px; height: 14px; }
.x-modes button.is-on { background: var(--x-solid); color: var(--x-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

/* ---------------------------------------------------------------- motion (with lnx-motion.js from the Vendor Portal kit) */
/* changing palette or light/dark: the new look opens as a circle from the button (View Transitions), else a soft blend */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: xReveal .6s cubic-bezier(.4, 0, .2, 1); }
@keyframes xReveal { from { clip-path: circle(0 at var(--vt-x, 40px) var(--vt-y, 90%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 40px) var(--vt-y, 90%)); } }
html.x-theming *, html.x-theming *::before, html.x-theming *::after { transition: background-color .45s, color .45s, border-color .45s, box-shadow .45s, fill .45s, stroke .45s !important; }

/* the page head settles in, then the content (lnx-motion staggers the blocks) */
html:not(.lnx-still) .vx-head-id { animation: xIn .45s cubic-bezier(.2, .8, .2, 1) both; }
html:not(.lnx-still) .vx-head-right { animation: xIn .45s .08s cubic-bezier(.2, .8, .2, 1) both; }
html:not(.lnx-still) .vx-head-ico { animation: xPop .55s .05s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes xIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes xPop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
html.lnx-leaving .vx-head-id, html.lnx-leaving .vx-head-right { opacity: 0; transform: translateY(-4px); transition: opacity .17s, transform .17s; }

/* the rail: the active page's button grows in; hovering lifts, the mark turns */
.vx-rbtn { transition: background .25s, color .25s, box-shadow .25s, transform .2s; }
.vx-rbtn:hover { transform: translateX(2px); }
html:not(.lnx-still) .vx-rbtn.is-on { animation: xPop .5s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
.vx-mark:hover { transform: rotate(-12deg) scale(1.05); }
.vx-me { transition: transform .2s, box-shadow .2s; }
.vx-me:hover { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(var(--x-accent-3-rgb), .25); }

/* menus and popups */
.x-pm:not([hidden]) { animation: xMenu .22s cubic-bezier(.2, .8, .2, 1); transform-origin: left bottom; }
@keyframes xMenu { from { opacity: 0; transform: translateX(-6px) scale(.97); } }
.modal.fade .modal-dialog { transform: translateY(18px) scale(.97); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.modal.show .modal-dialog { transform: none; }

/* tiles and cards answer the pointer */
.x-tile { transition: transform .2s, border-color .2s, box-shadow .2s; }
.x-tile:hover { box-shadow: 0 18px 36px -22px rgba(var(--x-accent-rgb), .6); }
html:not(.lnx-still) .x-tiles .x-tile { animation: xIn .45s cubic-bezier(.2, .8, .2, 1) both; }
html:not(.lnx-still) .x-tiles .x-tile:nth-child(2) { animation-delay: .05s; }
html:not(.lnx-still) .x-tiles .x-tile:nth-child(3) { animation-delay: .1s; }
html:not(.lnx-still) .x-tiles .x-tile:nth-child(4) { animation-delay: .15s; }
html:not(.lnx-still) .x-tiles .x-tile:nth-child(n+5) { animation-delay: .2s; }
a, button { transition: color .2s, background-color .2s, border-color .2s; }

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

/* ---------------------------------------------------------------- the menu opens wide: labels, groups, who is signed in */
.vx-app { transition: grid-template-columns .32s cubic-bezier(.2, .8, .2, 1); }
.vx-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.vx-brand .vx-mark { margin-bottom: 0; }
.vx-brand-name, .vx-rlabel, .vx-rgroup, .vx-me-row { display: none; }
.vx-brand-name small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--x-rail-ink); }
.vx-rail-toggle { position: absolute; top: 72px; right: -12px; z-index: 3; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--x-line-2);
    background: var(--x-solid); color: var(--x-ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--x-shadow); opacity: 0; transition: opacity .2s, transform .2s, color .2s; }
.vx-rail-toggle svg { width: 14px; height: 14px; transition: transform .32s; }
.vx-rail:hover .vx-rail-toggle, .vx-rail-toggle:focus-visible, html.x-rail-open .vx-rail-toggle { opacity: 1; }
.vx-rail-toggle:hover { color: var(--x-accent); transform: scale(1.1); }
html.x-rail-open .vx-rail-toggle svg { transform: rotate(180deg); }

html.x-rail-open .vx-app { grid-template-columns: 248px minmax(0, 1fr); }
html.x-rail-open .vx-rail { align-items: stretch; padding: 16px 12px 14px; }
html.x-rail-open .vx-brand { padding: 0 4px; }
html.x-rail-open .vx-brand-name { display: block; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.15; white-space: nowrap; animation: xFade .3s .05s both; }
html.x-rail-open .vx-rail-nav { align-items: stretch; }
html.x-rail-open .vx-rbtn { width: 100%; height: 42px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 12px; }
html.x-rail-open .vx-rbtn > svg { flex: none; }
html.x-rail-open .vx-rbtn:hover { transform: translateX(3px); }
html.x-rail-open .vx-rlabel { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; animation: xFade .3s .08s both; }
.vx-rlabel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vx-rlabel em { flex: none; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; background: var(--x-rail-hi); }
html.x-rail-open .vx-rgroup { display: block; padding: 10px 12px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--x-rail-ink); opacity: .75; animation: xFade .3s both; }
html.x-rail-open .vx-rgroup:first-child { padding-top: 0; }
html.x-rail-open .vx-rail-sep { display: none; }
html.x-rail-open .vx-rail-foot { align-items: stretch; }
html.x-rail-open .vx-me-wrap { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: var(--x-rail-hi); }
html.x-rail-open .vx-me-row { display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; animation: xFade .3s .08s both; }
.vx-me-row b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-me-row small { display: block; color: var(--x-rail-ink); font-size: 11px; }
@keyframes xFade { from { opacity: 0; transform: translateX(-4px); } }

/* ---------------------------------------------------------------- small screens: rail becomes a bottom bar */
@media (max-width: 767.98px) {
    .vx-app { grid-template-columns: minmax(0, 1fr); padding-bottom: 68px; }
    .vx-rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 64px; flex-direction: row; padding: 8px; }
    .vx-mark, .vx-rail-sep, .vx-rail-foot .vx-me, .vx-rail-toggle, .vx-brand-name { display: none; }
    .vx-brand { margin: 0; }
    .vx-rail-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
    .vx-rail-foot { flex-direction: row; padding: 0 0 0 6px; }
    .vx-head { padding: 10px 16px; min-height: 0; }
    .vx-head p, .vx-crumbs { display: none; }
    .vx-page { padding: 16px; }
}

/* chart / stage series colours (validated with the dataviz checker on the light and dark surfaces): reports + the task drawer */
:root { --cv-1: #2a78d6; --cv-2: #eb6834; --cv-3: #1baf7a; }
html[data-x-mode="dark"] { --cv-1: #3987e5; --cv-2: #d95926; --cv-3: #199e70; }

/* open menu: a sign-out icon at the right end of the profile row (the icon rail keeps it in the account menu) */
.vx-out { display: none; }
html.x-rail-open .vx-out { display: grid; place-items: center; flex: none; order: -1; margin-left: auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
    background: none; color: var(--x-rail-ink); cursor: pointer; transition: background .15s, color .15s; }
html.x-rail-open .vx-out svg { width: 16px; height: 16px; }
html.x-rail-open .vx-out:hover { background: rgba(255, 255, 255, .1); color: #fff; }
html.x-rail-open .vx-me-row { flex: 1; }