/* ============================================================================
   X-QR PLATFORM — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   One source of truth for the visual language. Every page consumes these
   tokens instead of hard-coding its own colours, fonts and spacing — which is
   how four different greens ended up on the site in the first place.

   Loaded globally and FIRST, so page-level stylesheets can still override
   anything locally without a specificity fight.

   Contents
     1. Tokens        — colour, type, space, radius, motion
     2. Primitives    — bracket corners, eyebrows, glass panels, rails
     3. Components    — pills, badges, readout strip, buttons, fields
     4. Utilities     — focus, reduced motion, scrollbars
   ========================================================================== */

:root {
    /* ---- 1. COLOUR ------------------------------------------------------ */
    /* Mint accent scale. --sl-c-accent is THE brand green; everything else is
       derived from it so tints stay in family. */
    --sl-c-accent:        #9bf6c4;   /* primary mint — the brand */
    --sl-c-accent-hi:     #b8ffd9;   /* highlight / hover lift */
    --sl-c-accent-2:      #7ff0b0;   /* secondary, gradient partner */
    --sl-c-accent-soft:   #6fd9a3;   /* muted mint for large fills */
    --sl-c-accent-deep:   #1f7a4d;   /* borders, dim strokes */

    /* Accent alphas — use these instead of inventing rgba() each time */
    --sl-a-04: rgba(155,246,196,0.04);
    --sl-a-08: rgba(155,246,196,0.08);
    --sl-a-12: rgba(155,246,196,0.12);
    --sl-a-22: rgba(155,246,196,0.22);
    --sl-a-35: rgba(155,246,196,0.35);
    --sl-a-55: rgba(155,246,196,0.55);
    --sl-a-glow: rgba(155,246,196,0.60);

    /* Neutrals — cool greys, never pure black/white */
    --sl-c-bg:        #0b0e12;
    --sl-c-surface:   #12181e;
    --sl-c-surface-2: #1a2129;
    --sl-c-surface-3: #1f2730;
    --sl-c-line:      #232c34;
    --sl-c-line-2:    #2f3a44;
    --sl-c-hair:      rgba(255,255,255,0.04);

    /* Text */
    --sl-c-text:  #c4cfd9;   /* body — cool silver */
    --sl-c-head:  #dde4ea;   /* headings — a touch brighter */
    --sl-c-dim:   #9aa7b4;   /* secondary */
    --sl-c-faint: #697682;   /* labels, captions */

    /* Semantic */
    --sl-c-gold:   #e8c46a;  /* Pro / warning / password */
    --sl-c-blue:   #5cc8ff;  /* informational / multi-user */
    --sl-c-danger: #ff5d5d;  /* destructive / burned */
    --sl-c-on-accent: #04140a; /* text ON a mint fill */

    /* ---- 2. TYPE -------------------------------------------------------- */
    --sl-f-display: 'Armstrong Oblique','Chakra Petch','Space Grotesk',system-ui,sans-serif;
    --sl-f-body:    'Space Grotesk',system-ui,-apple-system,sans-serif;
    --sl-f-mono:    'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

    /* Type scale — fluid where it matters */
    --sl-t-hero:    clamp(30px, 6vw, 52px);
    --sl-t-h1:      clamp(26px, 5vw, 42px);
    --sl-t-h2:      clamp(22px, 4vw, 30px);
    --sl-t-h3:      17px;
    --sl-t-body:    14px;
    --sl-t-small:   12.5px;
    --sl-t-label:   10.5px;   /* mono eyebrows / captions */
    --sl-t-micro:   9.5px;    /* badges */

    --sl-ls-tight:  -0.025em; /* display headings */
    --sl-ls-label:  0.14em;   /* mono labels */
    --sl-ls-eyebrow:0.22em;   /* eyebrows */

    /* ---- 3. SPACE + RADIUS ---------------------------------------------- */
    /* 4px base rhythm — every gap/padding should be one of these */
    --sl-s-1: 4px;  --sl-s-2: 8px;  --sl-s-3: 12px; --sl-s-4: 16px;
    --sl-s-5: 22px; --sl-s-6: 30px; --sl-s-7: 44px; --sl-s-8: 64px;

    --sl-r-sm: 7px; --sl-r-md: 10px; --sl-r-lg: 14px; --sl-r-xl: 18px;
    --sl-r-pill: 999px;

    /* Page widths — three tiers only, no more ad-hoc values */
    --sl-w-narrow: 620px;   /* focused reading / forms */
    --sl-w-page:   920px;   /* standard content page */
    --sl-w-wide:   1060px;  /* dashboards, grids */

    /* ---- 4. MOTION + ELEVATION ------------------------------------------ */
    --sl-e-out: cubic-bezier(.2,.7,.2,1);
    --sl-e-pop: cubic-bezier(.34,1.45,.55,1);
    --sl-d-fast: .15s; --sl-d-mid: .22s; --sl-d-slow: .5s;

    --sl-shadow-card: 0 18px 40px -26px rgba(0,0,0,0.95);
    --sl-shadow-lift: 0 22px 48px -28px rgba(0,0,0,0.95), 0 0 0 1px var(--sl-a-12);
    --sl-shadow-glow: 0 10px 26px -12px var(--sl-a-glow);
}

/* ============================================================================
   2. PRIMITIVES
   ========================================================================== */

/* ---- Bracket corners: the [ ] scanner motif, the brand's core device ----
   Usage: <div class="sl-brackets"> … </div>  (needs position:relative)
   Modifier .sl-brackets-hover reveals them only on hover (pointer devices). */
.sl-brackets { position: relative; }
.sl-brackets > .sl-bk {
    position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3;
    transition: opacity var(--sl-d-mid), transform var(--sl-d-mid);
}
.sl-bk-tl { top: 6px; left: 6px;
    border-top: 2px solid var(--sl-c-accent); border-left: 2px solid var(--sl-c-accent);
    border-top-left-radius: 3px; }
.sl-bk-tr { top: 6px; right: 6px;
    border-top: 2px solid var(--sl-c-accent); border-right: 2px solid var(--sl-c-accent);
    border-top-right-radius: 3px; }
.sl-bk-bl { bottom: 6px; left: 6px;
    border-bottom: 2px solid var(--sl-c-accent); border-left: 2px solid var(--sl-c-accent);
    border-bottom-left-radius: 3px; }
.sl-bk-br { bottom: 6px; right: 6px;
    border-bottom: 2px solid var(--sl-c-accent); border-right: 2px solid var(--sl-c-accent);
    border-bottom-right-radius: 3px; }
/* NOTE: colour lives IN each border shorthand on purpose — a bare
   "border-top:2px solid" silently resolves to currentColor and overrides any
   separate border-color rule. */

.sl-brackets-hover > .sl-bk { opacity: 0; }
.sl-bk-tl { transform: translate(3px,3px); }
.sl-bk-tr { transform: translate(-3px,3px); }
.sl-bk-bl { transform: translate(3px,-3px); }
.sl-bk-br { transform: translate(-3px,-3px); }
@media (hover:hover) {
    .sl-brackets-hover:hover > .sl-bk { opacity: .8; transform: translate(0,0); }
}

/* ---- Mono eyebrow: "// SECTION LABEL" ---- */
.sl-eyebrow-x {
    font-family: var(--sl-f-mono); font-size: var(--sl-t-label);
    letter-spacing: var(--sl-ls-eyebrow); text-transform: uppercase;
    color: var(--sl-c-faint); display: block;
}
.sl-eyebrow-x::before { content: "// "; color: var(--sl-c-accent); }

/* ---- Glass panel: the standard surface for every page section ---- */
.sl-panel {
    position: relative; overflow: hidden;
    border: 1px solid var(--sl-c-line); border-radius: var(--sl-r-xl);
    padding: var(--sl-s-5);
    background:
        radial-gradient(700px 240px at 80% -20%, var(--sl-a-08), transparent 70%),
        repeating-linear-gradient(180deg, var(--sl-c-hair) 0 1px, transparent 1px 3px),
        rgba(18,24,30,0.86);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    box-shadow: var(--sl-shadow-card);
}
.sl-panel-quiet {
    border: 1px solid var(--sl-c-line); border-radius: var(--sl-r-lg);
    background: rgba(11,14,18,0.62);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}

/* ---- Status rail: colour-coded left edge on a card ---- */
.sl-rail { position: absolute; top: 0; left: 0; bottom: 0; width: 3px; opacity: .75;
    background: linear-gradient(180deg, var(--sl-c-accent), var(--sl-a-04) 85%); }
.sl-rail-off    { background: linear-gradient(180deg, #4a5661, rgba(74,86,97,0.05) 85%); }
.sl-rail-danger { background: linear-gradient(180deg, var(--sl-c-danger), rgba(255,93,93,0.05) 85%); }
.sl-rail-warn   { background: linear-gradient(180deg, var(--sl-c-gold), rgba(232,196,106,0.05) 85%); }

/* ---- Sweep bar: the animated hairline at the top of a header panel ---- */
.sl-sweep {
    position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .7;
    background: linear-gradient(90deg, transparent, var(--sl-c-accent), transparent);
    animation: slSweep 5s ease-in-out infinite; will-change: transform;
}
@keyframes slSweep {
    0%,100% { transform: translateX(-30%); opacity: .3; }
    50%     { transform: translateX(30%);  opacity: .8; }
}

/* ============================================================================
   3. COMPONENTS
   ========================================================================== */

/* ---- Status pill ---- */
.sl-pill-x {
    display: inline-flex; align-items: center;
    font-family: var(--sl-f-mono); font-size: 9px; letter-spacing: .1em;
    padding: 3px 8px; border-radius: var(--sl-r-pill);
    border: 1px solid var(--sl-c-line); background: var(--sl-c-surface-3); color: var(--sl-c-dim);
}
.sl-pill-x.is-on     { color: var(--sl-c-accent); border-color: var(--sl-c-accent-deep); background: var(--sl-a-08); }
.sl-pill-x.is-off    { color: var(--sl-c-dim);    border-color: #3a4550; background: rgba(154,167,180,0.10); }
.sl-pill-x.is-danger { color: var(--sl-c-danger); border-color: #7a2626; background: rgba(255,93,93,0.08); }
.sl-pill-x.is-warn   { color: var(--sl-c-gold);   border-color: #7a6326; background: rgba(232,196,106,0.08); }

/* ---- Capability badge (icon + label) ---- */
.sl-badge-x {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--sl-f-mono); font-size: var(--sl-t-micro); letter-spacing: .04em;
    padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--sl-c-line); background: var(--sl-c-surface-3); color: var(--sl-c-dim);
}
.sl-badge-x svg { width: 10px; height: 10px; }
.sl-badge-x.is-mint { color: var(--sl-c-accent); border-color: var(--sl-c-accent-deep); background: var(--sl-a-08); }
.sl-badge-x.is-gold { color: var(--sl-c-gold);   border-color: #7a6326; background: rgba(232,196,106,0.07); }
.sl-badge-x.is-blue { color: var(--sl-c-blue);   border-color: #2f5d72; background: rgba(92,200,255,0.07); }

/* ---- Readout strip: fused stat cells with hairline dividers ---- */
.sl-readout-x {
    display: flex; align-items: stretch;
    border: 1px solid var(--sl-c-line); border-radius: var(--sl-r-lg);
    background: rgba(11,14,18,0.62); overflow: hidden;
}
.sl-readout-x > .sl-ro {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--sl-s-1); padding: 15px var(--sl-s-2) 13px;
}
.sl-readout-x > .sl-ro + .sl-ro::before {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
    background: linear-gradient(180deg, transparent, var(--sl-c-line), transparent);
}
.sl-ro-num {
    font-family: var(--sl-f-display); font-size: 24px; font-weight: 700;
    color: var(--sl-c-text); line-height: 1; letter-spacing: -0.02em; margin-top: var(--sl-s-1);
}
.sl-ro-label {
    font-family: var(--sl-f-mono); font-size: 9px; letter-spacing: var(--sl-ls-label);
    text-transform: uppercase; color: var(--sl-c-faint);
}
.sl-ro-icon {
    width: 26px; height: 26px; border-radius: var(--sl-r-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--sl-a-08); border: 1px solid var(--sl-a-22);
}
.sl-ro-icon svg { width: 14px; height: 14px; stroke: var(--sl-c-accent); display: block; }

/* ---- Buttons ---- */
.sl-btn-x {
    font-family: var(--sl-f-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em;
    padding: 9px 16px; border-radius: var(--sl-r-sm);
    border: 1px solid var(--sl-c-line); background: var(--sl-c-surface-3); color: var(--sl-c-dim);
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
    justify-content: center; gap: 6px;
    transition: border-color var(--sl-d-fast), color var(--sl-d-fast), background var(--sl-d-fast);
    -webkit-tap-highlight-color: transparent;
}
@media (hover:hover) {
    .sl-btn-x:hover { border-color: var(--sl-c-accent-deep); color: var(--sl-c-accent); }
}
.sl-btn-x.is-primary {
    font-weight: 700; color: var(--sl-c-on-accent);
    background: linear-gradient(180deg, var(--sl-c-accent-2), var(--sl-c-accent) 55%, var(--sl-c-accent-2));
    border-color: var(--sl-c-accent); box-shadow: var(--sl-shadow-glow);
    transition: transform .12s, box-shadow var(--sl-d-mid);
}
/* Lock the text colour across every link state — browsers tint <a> on
   :visited/:active, which is how "Upgrade to Pro" once turned blue. */
a.sl-btn-x.is-primary, a.sl-btn-x.is-primary:link, a.sl-btn-x.is-primary:visited,
a.sl-btn-x.is-primary:hover, a.sl-btn-x.is-primary:active, a.sl-btn-x.is-primary:focus {
    color: var(--sl-c-on-accent);
}
@media (hover:hover) {
    .sl-btn-x.is-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--sl-a-glow); }
}
.sl-btn-x.is-danger { color: var(--sl-c-dim); }
@media (hover:hover) {
    .sl-btn-x.is-danger:hover { border-color: #7a2626; color: var(--sl-c-danger); background: rgba(255,93,93,0.06); }
}
.sl-btn-x:disabled { opacity: .4; cursor: not-allowed; border-color: var(--sl-c-line);
    color: var(--sl-c-faint); background: var(--sl-c-surface-3); }

/* ---- Checkbox: grey at rest, mint when checked ----
   Hover is gated to pointer devices and unchecked+focus is reset, because on
   touch a sticky :hover/:focus left a coloured border after untapping. */
.sl-check-x {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle;
    border: 1px solid var(--sl-c-line); border-radius: 6px;
    background: var(--sl-c-surface-3); cursor: pointer; position: relative;
    transition: border-color var(--sl-d-fast), background var(--sl-d-fast), box-shadow var(--sl-d-fast);
}
@media (hover:hover) { .sl-check-x:hover { border-color: var(--sl-c-accent-deep); } }
.sl-check-x:not(:checked):focus,
.sl-check-x:not(:checked):focus-visible { border-color: var(--sl-c-line); outline: none; box-shadow: none; }
.sl-check-x:checked {
    border-color: var(--sl-c-accent); background: var(--sl-a-12);
    box-shadow: 0 0 0 3px var(--sl-a-12);
}
.sl-check-x:checked::after {
    content: ""; position: absolute; left: 50%; top: 47%;
    width: 4px; height: 8px; border: solid var(--sl-c-accent); border-width: 0 2px 2px 0;
    transform: translate(-50%,-50%) rotate(45deg);
}

/* ---- Field ---- */
.sl-field-x {
    display: flex; align-items: center; gap: 7px;
    background: var(--sl-c-bg); border: 1px solid var(--sl-c-line);
    border-radius: var(--sl-r-sm); padding: 7px 10px;
    transition: border-color var(--sl-d-fast), box-shadow var(--sl-d-fast);
}
.sl-field-x:focus-within { border-color: var(--sl-c-accent); box-shadow: 0 0 0 1px var(--sl-a-35); }
.sl-field-x input {
    flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--sl-c-text); font-family: var(--sl-f-mono); font-size: var(--sl-t-small);
}
.sl-field-x input::placeholder { color: var(--sl-c-faint); }

/* ---- Filter chip ---- */
.sl-chip-x {
    font-family: var(--sl-f-mono); font-size: var(--sl-t-label); font-weight: 600; letter-spacing: .05em;
    padding: 6px 11px; border-radius: var(--sl-r-pill);
    border: 1px solid var(--sl-c-line); background: var(--sl-c-surface-2); color: var(--sl-c-dim);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color var(--sl-d-fast), color var(--sl-d-fast), background var(--sl-d-fast);
}
@media (hover:hover) { .sl-chip-x:hover { color: var(--sl-c-text); border-color: var(--sl-c-line-2); } }
.sl-chip-x.is-active { color: var(--sl-c-accent); border-color: var(--sl-c-accent-deep); background: var(--sl-a-12); }

/* ---- Section divider with a centred mono label ---- */
.sl-divider-x { display: flex; align-items: center; gap: var(--sl-s-3); margin: var(--sl-s-6) 0 var(--sl-s-4); }
.sl-divider-x::before, .sl-divider-x::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sl-c-line), transparent);
}
.sl-divider-x > span {
    font-family: var(--sl-f-mono); font-size: var(--sl-t-micro); letter-spacing: var(--sl-ls-label);
    text-transform: uppercase; color: var(--sl-c-faint); flex: 0 0 auto;
}

/* ============================================================================
   4. UTILITIES
   ========================================================================== */

/* Visible keyboard focus everywhere, without showing rings on mouse click */
.sl-btn-x:focus-visible, .sl-chip-x:focus-visible, .sl-check-x:focus-visible,
.sl-pill-x:focus-visible, a.sl-btn-x:focus-visible {
    outline: 2px solid var(--sl-a-glow); outline-offset: 2px;
}

/* Screen-reader-only text */
.sl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .sl-sweep { animation: none; }
    .sl-brackets > .sl-bk,
    .sl-btn-x, .sl-btn-x.is-primary, .sl-chip-x, .sl-check-x, .sl-field-x { transition: none; }
}