/* =============================================================================
   CNC Task Board design system — the Vendor Portal shell (icon rail, hero, bento glass panels)
   in three palettes, each light or dark:
     Lagoon  deep teal -> mint, marigold for what needs attention
     Cobalt  cobalt blue -> violet, lime highlights
     Copper  copper -> amber on graphite, ice-blue highlights
   html[data-x-palette="lagoon|cobalt|copper"][data-x-mode="light|dark"], picked from the rail
   (cnc-shell.js) and remembered per browser. Every colour below is a token: pages never hard-code one.
   ============================================================================= */

/* ---------------------------------------------------------------- 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));
}

/* ---------------------------------------------------------------- Lagoon */
:root, html[data-x-palette="lagoon"] {
    --x-bg: #f1f6f5; --x-bg-2: #e6efed; --x-soft: #e2f3ef; --x-soft-2: #f4faf9;
    --x-ink: #0f1f1e; --x-ink-2: #46605c; --x-muted: #86a09b;
    --x-accent: #0b6e69; --x-accent-rgb: 11, 110, 105; --x-accent-2: #17b39c; --x-accent-2-rgb: 23, 179, 156; --x-accent-3: #f4a52c; --x-accent-3-rgb: 244, 165, 44;
    --x-accent-3-hi: #ffd27a; --x-warm-1: #f4a52c; --x-warm-2: #f07b3f; --x-on-warm: #1b1206; --x-mark: #0b6e69;
    --x-rail: #0b3533; --x-rail-ink: #86b3ad; --x-rail-on: #f4a52c; --x-rail-on-ink: #10201f;
    --x-hero-a: #cdeee6; --x-hero-b: #fde9c7;
    /* the dark brand surfaces (sign-in pane) and what is drawn on them */
    --x-deep-1: #0a2f2d; --x-deep-2: #051a19; --x-on-deep: #d7efea; --x-on-deep-2: #a4d0c7; --x-on-deep-3: #74c2b5;
    --x-bright: #3ee0c5; --x-bright-rgb: 62, 224, 197; --x-info: #5fb8ff; --x-info-rgb: 95, 184, 255;
}
html[data-x-palette="lagoon"][data-x-mode="dark"] {
    --x-bg: #071211; --x-bg-2: #0a1716; --x-panel: rgba(16, 34, 32, .8); --x-solid: #0f201e;
    --x-ink: #e6f4f1; --x-ink-2: #a6c2bd; --x-muted: #6c8a85;
    --x-accent: #3ee0c5; --x-accent-rgb: 62, 224, 197; --x-accent-2: #5fb8ff; --x-accent-2-rgb: 95, 184, 255; --x-accent-3: #ffc15e; --x-accent-3-rgb: 255, 193, 94;
    --x-warm-1: #ffc15e; --x-warm-2: #ff8a5b; --x-on-accent: #03201b; --x-rail: #040c0b; --x-rail-ink: #6f918b;
}

/* ---------------------------------------------------------------- Cobalt */
html[data-x-palette="cobalt"] {
    --x-bg: #f2f4fb; --x-bg-2: #e7eaf6; --x-soft: #e6ebfd; --x-soft-2: #f6f7fd;
    --x-ink: #10142a; --x-ink-2: #4a5275; --x-muted: #8b92b3;
    --x-accent: #2747c9; --x-accent-rgb: 39, 71, 201; --x-accent-2: #6a5cf6; --x-accent-2-rgb: 106, 92, 246; --x-accent-3: #a3d82c; --x-accent-3-rgb: 163, 216, 44;
    --x-accent-3-hi: #dcf58c; --x-warm-1: #b4e33d; --x-warm-2: #4fd18b; --x-on-warm: #0c1a06; --x-mark: #2747c9;
    --x-rail: #121a45; --x-rail-ink: #8f9bd0; --x-rail-on: #b4e33d; --x-rail-on-ink: #10142a;
    --x-hero-a: #d9e2ff; --x-hero-b: #ebf8cc;
    --x-deep-1: #18225e; --x-deep-2: #0a1033; --x-on-deep: #dde3ff; --x-on-deep-2: #a9b4e6; --x-on-deep-3: #97a6ec;
    --x-bright: #8ea8ff; --x-bright-rgb: 142, 168, 255; --x-info: #c49bff; --x-info-rgb: 196, 155, 255;
}
html[data-x-palette="cobalt"][data-x-mode="dark"] {
    --x-bg: #080b18; --x-bg-2: #0d1124; --x-panel: rgba(18, 24, 50, .8); --x-solid: #111733;
    --x-ink: #e8ebfa; --x-ink-2: #aeb5d6; --x-muted: #6f779c;
    --x-accent: #7f9cff; --x-accent-rgb: 127, 156, 255; --x-accent-2: #b388ff; --x-accent-2-rgb: 179, 136, 255; --x-accent-3: #c6f05a; --x-accent-3-rgb: 198, 240, 90;
    --x-warm-1: #c6f05a; --x-warm-2: #5fe0a0; --x-on-accent: #0a0f2a; --x-rail: #050712; --x-rail-ink: #737ca3;
}

/* ---------------------------------------------------------------- Copper */
html[data-x-palette="copper"] {
    --x-bg: #f6f3f0; --x-bg-2: #ece6e1; --x-soft: #f8e9e1; --x-soft-2: #fbf8f6;
    --x-ink: #1d1714; --x-ink-2: #5c4f48; --x-muted: #9a8b83;
    --x-accent: #b4532a; --x-accent-rgb: 180, 83, 42; --x-accent-2: #e0843f; --x-accent-2-rgb: 224, 132, 63; --x-accent-3: #3fa9c0; --x-accent-3-rgb: 63, 169, 192;
    --x-accent-3-hi: #9fe3f0; --x-warm-1: #4fb3c8; --x-warm-2: #7bd6c4; --x-on-warm: #06191d; --x-mark: #b4532a;
    --x-rail: #1f1b19; --x-rail-ink: #a8988f; --x-rail-on: #5ec3d6; --x-rail-on-ink: #10181a;
    --x-hero-a: #f8dccd; --x-hero-b: #d6eef3;
    --x-deep-1: #2b2421; --x-deep-2: #15100e; --x-on-deep: #f2e6df; --x-on-deep-2: #c9b6ab; --x-on-deep-3: #e0a483;
    --x-bright: #ff9a66; --x-bright-rgb: 255, 154, 102; --x-info: #6fd3e6; --x-info-rgb: 111, 211, 230;
}
html[data-x-palette="copper"][data-x-mode="dark"] {
    --x-bg: #110d0b; --x-bg-2: #18120f; --x-panel: rgba(38, 29, 25, .8); --x-solid: #1d1714;
    --x-ink: #f4ece7; --x-ink-2: #c8b8af; --x-muted: #8a7a71;
    --x-accent: #ff9a66; --x-accent-rgb: 255, 154, 102; --x-accent-2: #ffc371; --x-accent-2-rgb: 255, 195, 113; --x-accent-3: #6fd3e6; --x-accent-3-rgb: 111, 211, 230;
    --x-warm-1: #6fd3e6; --x-warm-2: #8ee8c8; --x-on-accent: #2a1206; --x-rail: #0a0807; --x-rail-ink: #8d7c73;
}
/* ---------------------------------------------------------------- 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: "Plus Jakarta Sans", system-ui, sans-serif; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Plus Jakarta 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 cnc-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) */
.cnc-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; color: var(--x-accent); text-decoration: none; font-weight: 600; }
.cnc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnc-sla { display: inline-block; padding: 2px 9px; border-radius: 99px; background: var(--x-soft); color: var(--x-accent); font-weight: 800; font-size: 12px; }
.cnc-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); }
.cnc-role.is-admin { background: var(--x-warn-soft); color: var(--x-warn); border-color: transparent; }
.cnc-role.is-supervisor { background: var(--x-soft); color: var(--x-accent); border-color: transparent; }
.cnc-role.is-programmer { background: var(--x-ok-soft); color: var(--x-ok); border-color: transparent; }
.cnc-pct { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnc-pct i { display: block; width: 56px; height: 6px; border-radius: 99px; background: var(--x-soft); overflow: hidden; }
.cnc-pct i em { display: block; height: 100%; border-radius: 99px; background: var(--x-ok); }
.cnc-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; }
@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; }