/* ============================================================================
   Tower Support Design System — the one stylesheet.

   Layers, in this order (later layers may depend on earlier ones, never the reverse):
     0. Drapo template rule         (framework quirk, nothing visual)
     1. Tokens                      (@tokens-start … @tokens-end — the ONLY place a color literal may appear)
     2. Base                        (reset, document, type, links, focus)
     3. Layout                      (container, section, split, stack, hero)
     4. Components                  (navbar, buttons, badges, alerts, cards, tables, forms, tabs, kpi, thread …)
     5. Utilities                   (u-* spacing / flex / text helpers — they win, with !important, on purpose)
     6. Style guide                 (classes only /design uses)
     7. Media                       (breakpoints, print, reduced motion)

   Rules of the house (docs/design-system.md):
     - A component rule names a token, never a literal color or a theme. `tests/…/DesignSystemTests` fails the build otherwise.
     - Pages carry no inline style except `display:none` on data keys; spacing is a utility or a component rule.
     - Dark is the first theme; light follows the OS (`prefers-color-scheme`) or a person's choice
       (`data-theme` on <html>, or `.theme-light` / `.theme-dark` on the shell set by the navbar toggle).
   ============================================================================ */

/* 0. Drapo keeps a d-for's original element as its template and hides it in a <span style="display:none">.
      Inside <select>, <tr>, <tbody> or <ul> that span is not legal HTML, the parser discards it and the
      template would render as a real item reading "{{c.name}}". Drapo strips d-for from rendered items and
      leaves it on the template alone, so this one rule hides every such template. */
option[d-for], optgroup[d-for], tr[d-for], td[d-for], th[d-for], li[d-for] { display: none !important; }

/* ============================================================================ */
/* 1. TOKENS                                                                   */
/* @tokens-start */
/* Dark: the first theme. Navy surfaces with a blue bias, blue brand, amber accent. */
:root, :root[data-theme="dark"], .theme-dark {
    color-scheme: dark;

    /* Surfaces, darkest first */
    --bg-0: #0b1220;        /* page */
    --bg-1: #0f172a;        /* bands, drawer, wells */
    --bg-2: #162035;        /* inputs, code, nested zones */
    --bg-card: #131d33;     /* cards, panels, menus */
    --bg-card-h: #182440;   /* a card or row on hover */
    --hover-bg: rgba(255,255,255,.06);

    /* Lines */
    --border: #233150;      /* separates areas (decorative) */
    --border-sub: #1b2742;  /* hairlines inside a card or list */
    --border-strong: #56708f; /* the edge of a control: 3:1 on every surface */

    /* Text: every tier holds 4.5:1 on every surface above */
    --text-1: #eef2f8;
    --text-2: #b9c4d8;
    --text-3: #93a1ba;      /* muted: hints, meta, labels */
    --text-4: #7f8da8;      /* placeholders, timestamps */

    /* Brand (blue) has three jobs */
    --brand: #4f8cff;             /* marks, borders, outlines, large type; not small text on bg-card */
    --brand-strong: #2f6fe4;      /* a filled control, with --on-brand (4.5:1) */
    --brand-strong-hover: #2563eb;
    --brand-text: #8db4ff;        /* links, active navigation, numbers: 4.5:1 on every surface */
    --on-brand: #ffffff;
    --brand-bg: rgba(79,140,255,.16);   /* selected item, brand pill, staff message */
    --brand-dim: rgba(79,140,255,.10);  /* hover tint */

    /* Accent (amber): priorities, highlights, the landing's second hue */
    --accent: #f2b33d;
    --accent-text: #f6c468;
    --accent-bg: rgba(242,179,61,.14);

    /* Status: text, borders and fills; each pair holds 4.5:1; a status is always also a word */
    --success: #38d39f;  --success-bg: rgba(56,211,159,.14);
    --warn: #f0a04a;     --warn-bg: rgba(240,160,74,.14);
    --error: #ff6b6b;    --error-bg: rgba(255,107,107,.13);
    --neutral-bg: rgba(148,163,184,.16);
    --on-status: #0b1220;

    /* Overlays and depth */
    --overlay: rgba(2,6,18,.6);
    --scrim: rgba(2,6,18,.35);
    --nav-glass: rgba(11,16,32,.9);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
    --shadow-md: 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 40px -10px rgba(0,0,0,.7);
    --shadow-menu: 0 14px 36px rgba(0,0,0,.45);
    --focus-ring: #8db4ff;
}

/* Light: the same names, values chosen for 4.5:1 on white and on the light wells. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg-0: #f5f7fb; --bg-1: #eceff5; --bg-2: #e2e7f0; --bg-card: #ffffff; --bg-card-h: #f3f6fb; --hover-bg: rgba(15,23,42,.05);
        --border: #d6dde9; --border-sub: #e6ebf3; --border-strong: #6b7a90;
        --text-1: #0f1a2e; --text-2: #334155; --text-3: #4a5a70; --text-4: #5b6b82;
        --brand: #2f6fe4; --brand-strong: #2563eb; --brand-strong-hover: #1d4ed8; --brand-text: #1d4ed8; --on-brand: #ffffff;
        --brand-bg: rgba(47,111,228,.12); --brand-dim: rgba(47,111,228,.08);
        --accent: #d4921a; --accent-text: #8a5a00; --accent-bg: rgba(212,146,26,.14);
        --success: #15803d; --success-bg: rgba(21,128,61,.12);
        --warn: #9a4d00;    --warn-bg: rgba(217,119,6,.14);
        --error: #b91c1c;   --error-bg: rgba(185,28,28,.10);
        --neutral-bg: rgba(100,116,139,.14); --on-status: #ffffff;
        --overlay: rgba(15,23,42,.45); --scrim: rgba(15,23,42,.3); --nav-glass: rgba(245,247,251,.9);
        --shadow-sm: 0 1px 3px rgba(15,23,42,.08); --shadow-md: 0 8px 24px rgba(15,23,42,.12); --shadow-lg: 0 20px 40px -10px rgba(15,23,42,.18); --shadow-menu: 0 14px 36px rgba(15,23,42,.16);
        --focus-ring: #1d4ed8;
    }
}
:root[data-theme="light"], .theme-light {
    color-scheme: light;
    --bg-0: #f5f7fb; --bg-1: #eceff5; --bg-2: #e2e7f0; --bg-card: #ffffff; --bg-card-h: #f3f6fb; --hover-bg: rgba(15,23,42,.05);
    --border: #d6dde9; --border-sub: #e6ebf3; --border-strong: #6b7a90;
    --text-1: #0f1a2e; --text-2: #334155; --text-3: #4a5a70; --text-4: #5b6b82;
    --brand: #2f6fe4; --brand-strong: #2563eb; --brand-strong-hover: #1d4ed8; --brand-text: #1d4ed8; --on-brand: #ffffff;
    --brand-bg: rgba(47,111,228,.12); --brand-dim: rgba(47,111,228,.08);
    --accent: #d4921a; --accent-text: #8a5a00; --accent-bg: rgba(212,146,26,.14);
    --success: #15803d; --success-bg: rgba(21,128,61,.12);
    --warn: #9a4d00;    --warn-bg: rgba(217,119,6,.14);
    --error: #b91c1c;   --error-bg: rgba(185,28,28,.10);
    --neutral-bg: rgba(100,116,139,.14); --on-status: #ffffff;
    --overlay: rgba(15,23,42,.45); --scrim: rgba(15,23,42,.3); --nav-glass: rgba(245,247,251,.9);
    --shadow-sm: 0 1px 3px rgba(15,23,42,.08); --shadow-md: 0 8px 24px rgba(15,23,42,.12); --shadow-lg: 0 20px 40px -10px rgba(15,23,42,.18); --shadow-menu: 0 14px 36px rgba(15,23,42,.16);
    --focus-ring: #1d4ed8;
}

/* Theme-independent tokens */
:root {
    /* Aliases kept for older rules and the sibling products' vocabulary */
    --brand-hover: var(--brand-strong-hover);
    --tint-brand: var(--brand-bg);
    --tint-brand-soft: var(--brand-dim);
    --tint-success: var(--success-bg);
    --tint-warn: var(--warn-bg);
    --tint-error: var(--error-bg);
    --focus-ring-color: var(--focus-ring);
    --focus-ring-offset: 2px;

    /* Type: Inter for the UI (loaded by index.html), the system mono for ids, protocols and code */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --fs-2xs: .7rem;    /* counters and drawer group labels only */
    --fs-xs: .78rem;    /* the floor for page text: labels, meta, pills */
    --fs-sm: .85rem;    /* dense UI: table cells, hints, buttons --sm */
    --fs-md: .95rem;    /* app body, buttons, inputs */
    --fs-base: 1rem;    /* reading text */
    --fs-lg: 1.1rem;    /* card titles */
    --fs-xl: 1.6rem;    /* page titles, KPI values */
    --fs-2xl: 2rem;     /* landing h2 */
    --fs-3xl: 2.75rem;  /* hero title */
    --fs-4xl: 3.1rem;   /* landing hero */
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
    --lh-tight: 1.2; --lh-normal: 1.5; --lh-reading: 1.7;

    /* Space: a 4px grid named by multiples */
    --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
    --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;

    /* Shape */
    --r-xs: 4px;   /* tags, uptime cells */
    --r-sm: 6px;   /* inputs, small buttons, code */
    --r: 10px;     /* buttons, KPI tiles, messages */
    --r-lg: 16px;  /* cards, tables, drawer */
    --r-pill: 999px;

    /* Motion: switched off under prefers-reduced-motion */
    --dur-fast: .15s; --dur: .2s;

    /* Layout */
    --nav-h: 64px; --max-w: 1120px; --reading-w: 72ch;

    /* Z layers */
    --z-nav: 50; --z-overlay: 60; --z-drawer: 61; --z-panel: 70;
}
/* @tokens-end */

/* ============================================================================ */
/* 2. BASE                                                                     */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-md); background: var(--bg-0); color: var(--text-1); line-height: var(--lh-normal); }
/* The shell fills the viewport so a forced theme on <main> never shows the body behind it. */
main#main { min-height: calc(100vh - var(--nav-h)); background: var(--bg-0); color: var(--text-1); }
h1, h2, h3, h4 { color: var(--text-1); line-height: var(--lh-tight); text-wrap: balance; margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -.02em; }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--space-3); }
a { color: var(--brand-text); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
code, kbd, .u-mono { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--bg-2); padding: .05rem .35rem; border-radius: var(--r-xs); color: var(--text-1); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
img { max-width: 100%; }
::selection { background: var(--brand-bg); }
::placeholder { color: var(--text-4); }
/* Keyboard focus: one solid ring, 2px, offset 2px, 3:1 on every surface (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--r-sm); }

/* Skip link: off-screen until focused (WCAG 2.4.1) */
.skip-link { position: absolute; left: .5rem; top: -3rem; z-index: var(--z-drawer); background: var(--brand-strong); color: var(--on-brand); padding: .55rem 1rem; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: top var(--dur-fast) ease; }
.skip-link:focus { top: 0; }
/* Present for assistive tech, invisible otherwise */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Hidden until Drapo has compiled the sector, so raw {{tokens}} never flash */
.cloaked, .cloak-nav { visibility: hidden; }

/* ============================================================================ */
/* 3. LAYOUT                                                                   */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-10) 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.section-header h2 { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-5); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hero { padding: var(--space-16) 0 var(--space-12); }
.hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-black); margin: var(--space-2) 0; letter-spacing: -.02em; }
.hero__subtitle { font-size: 1.2rem; color: var(--text-2); max-width: 640px; }
.hero__cta { display: flex; gap: var(--space-3); margin: var(--space-6) 0 var(--space-10); flex-wrap: wrap; }
.hero__eyebrow { color: var(--text-3); font-size: var(--fs-md); margin: var(--space-4) 0 0; }
.hero--landing { padding: 5rem 0 var(--space-8); background: radial-gradient(1100px 380px at 15% -10%, var(--brand-bg), transparent 60%), radial-gradient(900px 340px at 100% 0%, var(--accent-bg), transparent 55%); }
.hero__title--xl { font-size: var(--fs-4xl); max-width: 880px; }
.hero__subtitle--wide { max-width: 720px; font-size: 1.25rem; }

/* ============================================================================ */
/* 4. COMPONENTS                                                               */

/* ── Navbar: sticky glass bar; the drawer drops from the hamburger ── */
.navbar { background: var(--nav-glass); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-nav); color: var(--text-1); }
.navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(8px); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--space-4); position: relative; }
.navbar__left { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; min-width: 0; }
.navbar__brand { display: flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.navbar__logo-img { height: 34px; width: auto; display: block; color: var(--text-1); }
.logo__frame { stroke: var(--brand); } .logo__lines { stroke: var(--accent); } .logo__word { fill: currentColor; } .logo__word--brand { fill: var(--brand-text); }
.navbar__actions { display: flex; gap: var(--space-2); align-items: center; flex: 0 0 auto; }
.nav-link { color: var(--text-2); cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-md); }
.nav-link:hover { color: var(--text-1); text-decoration: none; }
.nav-user { color: var(--text-2); font-size: .9rem; font-weight: var(--fw-medium); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-toggle, .theme-toggle { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); border-radius: var(--r-sm); padding: .3rem .6rem; cursor: pointer; font-size: var(--fs-xs); font-family: inherit; line-height: 1.4; }
.lang-toggle:hover, .theme-toggle:hover { color: var(--text-1); border-color: var(--brand); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-1); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .45rem; border-radius: var(--r-sm); }
.menu-toggle:hover { background: var(--hover-bg); }
.nav-drawer__overlay { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay); }
.nav-drawer { position: absolute; top: calc(100% + 8px); left: 0; width: 300px; max-width: calc(100vw - 2.5rem); max-height: calc(100vh - var(--nav-h) - 24px);
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); z-index: var(--z-drawer); overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-2);
    display: flex; flex-direction: column; box-shadow: var(--shadow-menu); transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98);
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast) ease; }
.nav-drawer--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.nav-drawer::-webkit-scrollbar { width: 14px; }
.nav-drawer::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.nav-drawer::-webkit-scrollbar-thumb { background: var(--brand); border-radius: var(--r-pill); border: 3px solid var(--bg-1); background-clip: padding-box; min-height: 44px; }
.nav-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: .85rem var(--space-5); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-1); z-index: 1; }
.nav-drawer__title { font-weight: var(--fw-bold); color: var(--text-1); letter-spacing: .02em; }
.nav-drawer__close { background: transparent; border: none; color: var(--text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.nav-drawer__close:hover { color: var(--text-1); }
.drawer-group { padding: var(--space-4) var(--space-5) .35rem; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: var(--fw-bold); }
.drawer-link { display: flex; align-items: center; gap: .6rem; padding: .55rem var(--space-5); color: var(--text-2); cursor: pointer; font-weight: var(--fw-medium); font-size: var(--fs-md); border-left: 3px solid transparent; }
.drawer-link:hover { background: var(--hover-bg); color: var(--text-1); border-left-color: var(--brand); text-decoration: none; }
.drawer-link__icon { flex: 0 0 1.25rem; width: 1.25rem; text-align: center; font-size: 1rem; line-height: 1; opacity: .85; }

/* ── Command bar (navbar search, Alt+K) ── */
.cmdbar { position: relative; }
.cmd-input { width: 13rem; max-width: 38vw; padding: .35rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); background: transparent; color: inherit; font-family: inherit; }
.cmd-results { position: absolute; top: calc(100% + .25rem); right: 0; min-width: 20rem; max-width: 90vw; max-height: 60vh; overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); z-index: var(--z-overlay); }
.cmd-item { display: flex; justify-content: space-between; gap: var(--space-4); padding: .5rem .75rem; cursor: pointer; text-decoration: none; color: inherit; }
.cmd-item:hover { background: var(--hover-bg); text-decoration: none; }
.cmd-item__hint { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }

/* ── Buttons: one primary per screen; ghost for the rest; danger confirms destruction ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: var(--r-sm); padding: .6rem 1.1rem; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit; text-decoration: none; line-height: 1.3; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-strong); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong-hover); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-1); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-dim); }
.btn--danger { background: var(--error); color: var(--on-brand); }
.btn--danger:hover { filter: brightness(1.08); }
.btn--lg { padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn--sm { padding: .4rem .8rem; font-size: var(--fs-sm); }
.btn--loading, .btn:disabled { opacity: .6; pointer-events: none; }

/* ── Badges, tags, SLA and priority marks: a state is always also a word ── */
.badge { display: inline-block; padding: .25rem .6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.3; white-space: nowrap; }
.badge--blue { background: var(--brand-bg); color: var(--brand-text); }
.badge--green { background: var(--success-bg); color: var(--success); }
.badge--red { background: var(--error-bg); color: var(--error); }
.badge--amber { background: var(--warn-bg); color: var(--warn); }
.badge--grey { background: var(--neutral-bg); color: var(--text-2); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); }
.tag-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.tag { font-size: var(--fs-xs); padding: .1rem .5rem; border-radius: var(--r-pill); background: var(--neutral-bg); color: var(--text-2); }
.sla { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: .15rem .5rem; border-radius: var(--r-pill); white-space: nowrap; }
.sla--OnTrack { background: var(--success-bg); color: var(--success); }
.sla--DueSoon { background: var(--warn-bg); color: var(--warn); }
.sla--Breached { background: var(--error-bg); color: var(--error); }
.sla--Paused, .sla--Met { background: var(--neutral-bg); color: var(--text-2); }
.prio--Urgent { color: var(--error); font-weight: var(--fw-bold); }
.prio--High { color: var(--accent-text); font-weight: var(--fw-semibold); }
.prio--Low { color: var(--text-3); }
.status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; background: var(--success); vertical-align: middle; }
.status-dot--down { background: var(--error); }
.status-dot--warn { background: var(--warn); }
.status-dot--maint { background: var(--brand); }

/* ── Alerts: one strip, four moods; .auth-error and .upgrade-banner are aliases ── */
.alert { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-1); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: var(--space-5); font-size: .92rem; }
.alert a { cursor: pointer; font-weight: var(--fw-semibold); }
.alert--info, .upgrade-banner { background: var(--brand-dim); border-color: var(--brand); color: var(--text-1); }
.alert--info a, .upgrade-banner a { color: var(--brand-text); }
.alert--success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert--warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.alert--error, .auth-error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.upgrade-banner { border: 1px solid var(--brand); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: var(--space-5); font-size: .92rem; }
.auth-error { border: 0; border-radius: var(--r-sm); padding: .55rem .7rem; font-size: var(--fs-sm); margin-bottom: var(--space-2); }

/* ── Cards and panels ── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }
.card h3 { margin: 0 0 var(--space-4); }
.card .card { box-shadow: none; background: var(--bg-1); margin-bottom: var(--space-4); }
.panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-4); }
.empty { color: var(--text-3); padding: var(--space-6) var(--space-4); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--r); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: .9rem 1rem; }
.kpi__label { display: block; font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.kpi__value { display: block; font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--text-1); line-height: var(--lh-tight); margin-top: .2rem; font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; }
.stat-card--link { cursor: pointer; transition: border-color var(--dur-fast); }
.stat-card--link:hover, .stat-card--on { border-color: var(--brand); }
.stat-card--on { box-shadow: inset 0 0 0 1px var(--brand); }
.stat-label { color: var(--text-3); font-size: var(--fs-xs); }
.stat-value { color: var(--accent-text); font-size: 1.5rem; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.code-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .75rem 1rem; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-x: auto; white-space: pre; color: var(--text-1); }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; }
.bar__fill { height: 100%; background: var(--brand); }

/* ── Tables: rows are display-only loops; a clickable row says so on hover ── */
.table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.table th, .table td { text-align: left; padding: .75rem 1rem; font-size: .92rem; vertical-align: top; }
.table th { color: var(--text-3); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.table td { border-top: 1px solid var(--border-sub); color: var(--text-2); }
.table td strong { color: var(--text-1); }
.row-link { cursor: pointer; }
.row-link:hover td, .bi-row--link:hover td { background: var(--hover-bg); color: var(--text-1); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); }
.pager__info { color: var(--text-3); font-size: .9rem; }

/* ── Forms: label above control; .form-row lays controls out in a responsive grid ── */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-medium); }
.form-group input, .form-group select, .form-group textarea, .input { background: var(--bg-2); border: 1px solid var(--border-strong); color: var(--text-1); border-radius: var(--r-sm); padding: .6rem .7rem; font-size: var(--fs-md); font-family: inherit; width: 100%; }
.form-group textarea { resize: vertical; min-height: 120px; line-height: var(--lh-normal); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.form-group input[readonly] { color: var(--text-2); }
.form-hint { font-size: var(--fs-xs); color: var(--text-3); }
.upload-frame { display: block; width: 100%; height: 2.4rem; border: 0; margin-top: var(--space-2); background: transparent; }

/* ── Tabs ── */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 var(--space-4); }
.tab { border: 1px solid var(--border-strong); background: var(--bg-1); color: var(--text-2); border-radius: var(--r-pill); padding: .35rem .85rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; font-family: inherit; }
.tab:hover { color: var(--text-1); border-color: var(--brand); }
.tab--on { background: var(--brand-bg); color: var(--text-1); border-color: var(--brand); }
.tab__count { margin-left: .4rem; opacity: .75; }

/* ── Conversation thread ── */
.thread { display: flex; flex-direction: column; gap: var(--space-3); }
.msg { border: 1px solid var(--border); border-radius: var(--r); padding: .85rem 1rem; background: var(--bg-1); }
.msg--staff { border-color: var(--brand); background: var(--brand-dim); }
.msg--internal { border-style: dashed; border-color: var(--accent); background: var(--accent-bg); }
.msg--system { border: 0; background: transparent; color: var(--text-3); font-size: var(--fs-sm); padding: .25rem 0; }
.msg__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: .4rem; flex-wrap: wrap; }
.msg__body { white-space: pre-wrap; word-break: break-word; }
.rating { display: inline-flex; gap: .25rem; }
.rating .btn { min-width: 2.4rem; }
.mention-chips, .inc-comp-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .35rem 0 .5rem; }
.ticket-presence, .ticket-snoozed { margin: var(--space-2) 0; }
.snooze-bar { margin-top: var(--space-3); flex-wrap: wrap; }
.bulk-bar { margin-top: var(--space-4); }
.inbox-select { padding: 0 .4rem; font-size: 1rem; line-height: 1; }

/* ── Article body (Markdown rendered by the server) ── */
.article-body { white-space: normal; line-height: var(--lh-reading); max-width: var(--reading-w); }
.article-body img { height: auto; border-radius: var(--r-sm); }
.article-body pre { overflow: auto; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--bg-2); }
.article-body code { font-size: .92em; }
.article-body table { border-collapse: collapse; margin: var(--space-4) 0; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: .35rem .6rem; }
.article-body blockquote { border-left: 3px solid var(--border-strong); margin: var(--space-4) 0; padding: .25rem 1rem; color: var(--text-2); }
.ae-preview-body { margin-top: var(--space-2); }

/* ── Status page: components, uptime bars, maintenances ── */
.sp-component { padding: var(--space-3) 0; border-top: 1px solid var(--border-sub); }
.sp-component:first-of-type { border-top: 0; padding-top: 0; }
.up-bar { display: flex; gap: 2px; margin: .4rem 0 .25rem; }
.up-day { flex: 1 1 0; height: 1.6rem; border-radius: 2px; background: var(--success); opacity: .85; min-width: 2px; }
.up-day--degraded { background: var(--warn); }
.up-day--major { background: var(--error); }
.up-day--maintenance { background: var(--brand); }
.sp-maint-item { padding: .6rem 0; border-top: 1px solid var(--border-sub); }
.sp-maint-item:first-of-type { border-top: 0; }
.sp-subscribe .form-row { margin-bottom: var(--space-2); }

/* ── Auth cards ── */
.auth-page { display: flex; align-items: center; justify-content: center; width: 100%; min-height: calc(100vh - var(--nav-h)); padding: 3.5rem var(--space-5); }
.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-8); width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.auth-card h2 { margin: 0 0 var(--space-5); }
.auth-card .form-group { margin-bottom: var(--space-4); }
.auth-ok { text-align: center; }
.auth-ok p { margin-bottom: var(--space-4); color: var(--text-2); }
.auth-alt { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-3); text-align: center; }

/* ── Landing: steps, features, pricing, bands ── */
.pillars, .quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.pillar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-5); }
.pillar h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--accent-text); }
.pillar p { margin: 0; color: var(--text-3); font-size: .92rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); transition: border-color var(--dur-fast), transform var(--dur-fast); }
.feature-card:hover, .quick-card:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.feature-card__icon, .quick-card__icon { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--accent-bg); color: var(--accent-text); font-size: 1.3rem; }
.feature-card__icon { margin-bottom: .9rem; }
.feature-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.feature-card p, .quick-card p, .step p { margin: 0; color: var(--text-3); font-size: .92rem; }
.quick-card { display: flex; gap: .9rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); text-decoration: none; color: inherit; }
.quick-card h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.step { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem; }
.step__num { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--brand-strong); color: var(--on-brand); font-weight: var(--fw-black); font-size: var(--fs-md); margin-bottom: .8rem; }
.step h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.pricing { padding: var(--space-10) 0 var(--space-4); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-7); }
.plan-card--pro { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.plan-card h3 { margin: .35rem 0; font-size: 1.4rem; }
.plan-price { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--accent-text); margin-bottom: var(--space-4); }
.plan-feats { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.plan-feats li { color: var(--text-2); font-size: .92rem; }
.pricing-note { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--space-4); text-align: center; }
.security-band { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; background: var(--brand-dim); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-7); }
.security-band__body { flex: 1 1 320px; }
.security-band h2 { margin: .2rem 0 .5rem; font-size: 1.5rem; }
.security-band p { margin: 0; color: var(--text-2); max-width: 620px; }
.cta-band { text-align: center; background: radial-gradient(700px 260px at 50% 0%, var(--brand-bg), transparent 60%); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-10) var(--space-6); margin: var(--space-10) 0; }
.cta-band h2 { margin: 0 0 .5rem; font-size: 1.9rem; }
.cta-band p { margin: 0 0 var(--space-6); color: var(--text-2); }
.landing-footer { border-top: 1px solid var(--border); margin-top: var(--space-8); padding: var(--space-8) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.landing-footer__brand { display: flex; flex-direction: column; gap: .2rem; }
.landing-footer__brand strong { font-size: 1.05rem; }
.landing-footer p { margin: 0; color: var(--text-3); font-size: .88rem; }
.drill-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--bg-card); border: 1px solid var(--brand); border-radius: var(--r); padding: .6rem 1rem; margin-bottom: var(--space-4); color: var(--text-2); }
.bi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.bi-row--link { cursor: pointer; }

/* ── Side panel: a form or tool that opens OVER the content from the right edge, never inside the flow.
      Rendered with d-if (or toggled with u-hidden when it hosts a sector); the scrim closes it. Full width on phones. ── */
.side-panel__scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay); }
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: var(--z-panel); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-card); color: var(--text-1); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-6) var(--space-8);
    animation: side-panel-in var(--dur) ease; }
.side-panel--wide { width: min(760px, 100vw); }
.side-panel > h3:first-of-type { margin-right: 2.5rem; }
.side-panel__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 2rem; height: 2rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.side-panel__close:hover { color: var(--text-1); border-color: var(--brand); }
.side-panel .card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.side-panel .form-row { grid-template-columns: 1fr; }
.side-panel--static { position: static; width: auto; box-shadow: var(--shadow-sm); border: 1px solid var(--border); border-radius: var(--r-lg); animation: none; }
@keyframes side-panel-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tool-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Widget (framed inside a product; the navbar is hidden by shellMode) ── */
.wg { max-width: 480px; margin: 0 auto; padding: var(--space-3) var(--space-4) var(--space-4); font-size: var(--fs-md); }
.wg-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.wg-tabs { margin: 0 0 var(--space-3); }
.wg-pane { min-height: 12rem; }
.wg-articles, .wg-tickets { list-style: none; margin: 0; padding: 0; }
.wg-article, .wg-ticket { padding: var(--space-2) 0; border-top: 1px solid var(--border-sub); }
.wg-article:first-of-type, .wg-ticket:first-of-type { border-top: 0; }
.wg-ticket { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; }
.wg-ticket a { cursor: pointer; }
.wg-msg { margin-bottom: var(--space-2); }
.wg-footer { margin-top: var(--space-4); text-align: center; }
.wg-search-row { align-items: flex-end; margin-bottom: var(--space-2); }

/* ============================================================================ */
/* 5. UTILITIES — small, composable, and they win (!important) so a page never needs an inline style */
.u-m0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }   .u-mb-0 { margin-bottom: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; } .u-mt-2 { margin-top: var(--space-2) !important; } .u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4, .u-mt { margin-top: var(--space-4) !important; } .u-mt-6, .u-mt-lg { margin-top: var(--space-6) !important; } .u-mt-8 { margin-top: var(--space-8) !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; } .u-mb-2 { margin-bottom: var(--space-2) !important; } .u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4, .u-mb { margin-bottom: var(--space-4) !important; } .u-mb-6 { margin-bottom: var(--space-6) !important; } .u-mb-7 { margin-bottom: var(--space-7) !important; }
.u-my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.u-pl-0 { padding-left: 0 !important; }
.u-full { width: 100%; }
.u-flex-1 { flex: 1 1 0; min-width: 0; }
.u-row, .u-gap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.u-between { justify-content: space-between; }
.u-end { justify-content: flex-end; }
.u-items-end { align-items: flex-end !important; }
.u-items-start { align-items: flex-start !important; }
.u-minh-40 { min-height: 40vh; }
.u-muted { color: var(--text-3); }
.u-small { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-text-left { text-align: left; }
.u-nowrap { white-space: nowrap; }
.u-wrap { white-space: pre-wrap; word-break: break-word; }
.u-mono { word-break: break-all; }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-hidden { display: none !important; }

/* ============================================================================ */
/* 6. STYLE GUIDE (/design) */
.sg-section { margin-bottom: var(--space-8); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.sg-swatch__chip { height: 56px; border-bottom: 1px solid var(--border-sub); }
.sg-swatch__meta { padding: .5rem .6rem; }
.sg-swatch__name { display: block; color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.sg-swatch__val { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.sg-note { color: var(--text-3); font-size: var(--fs-sm); font-family: var(--font-mono); }
.sg-type { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; }
.sg-space { height: 12px; background: var(--brand); border-radius: var(--r-xs); display: inline-block; vertical-align: middle; }
.sg-radius { width: 56px; height: 40px; background: var(--brand-bg); border: 1px solid var(--brand); display: inline-block; vertical-align: middle; }
.sw-bg-0 { background: var(--bg-0); } .sw-bg-1 { background: var(--bg-1); } .sw-bg-2 { background: var(--bg-2); } .sw-bg-card { background: var(--bg-card); } .sw-bg-card-h { background: var(--bg-card-h); }
.sw-border { background: var(--border); } .sw-border-sub { background: var(--border-sub); } .sw-border-strong { background: var(--border-strong); }
.sw-text-1 { background: var(--text-1); } .sw-text-2 { background: var(--text-2); } .sw-text-3 { background: var(--text-3); } .sw-text-4 { background: var(--text-4); }
.sw-brand { background: var(--brand); } .sw-brand-strong { background: var(--brand-strong); } .sw-brand-text { background: var(--brand-text); } .sw-brand-bg { background: var(--brand-bg); }
.sw-accent { background: var(--accent); } .sw-accent-text { background: var(--accent-text); } .sw-accent-bg { background: var(--accent-bg); }
.sw-success { background: var(--success); } .sw-success-bg { background: var(--success-bg); } .sw-warn { background: var(--warn); } .sw-warn-bg { background: var(--warn-bg); }
.sw-error { background: var(--error); } .sw-error-bg { background: var(--error-bg); } .sw-neutral-bg { background: var(--neutral-bg); } .sw-focus { background: var(--focus-ring); }
.sp-1 { width: var(--space-1); } .sp-2 { width: var(--space-2); } .sp-3 { width: var(--space-3); } .sp-4 { width: var(--space-4); } .sp-6 { width: var(--space-6); } .sp-8 { width: var(--space-8); } .sp-12 { width: var(--space-12); }
.rd-xs { border-radius: var(--r-xs); } .rd-sm { border-radius: var(--r-sm); } .rd { border-radius: var(--r); } .rd-lg { border-radius: var(--r-lg); } .rd-pill { border-radius: var(--r-pill); }
.fs-2xs { font-size: var(--fs-2xs); } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-md { font-size: var(--fs-md); } .fs-base { font-size: var(--fs-base); }
.fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fs-2xl { font-size: var(--fs-2xl); } .fs-3xl { font-size: var(--fs-3xl); }

/* ============================================================================ */
/* 7. MEDIA */
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .sg-type { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .nav-user { max-width: 7rem; }
    .hero { padding: var(--space-10) 0 var(--space-8); }
    .hero__title { font-size: var(--fs-2xl); }
    .hero__title--xl { font-size: 2.1rem; }
    .hero__subtitle--wide { font-size: 1.1rem; }
    .cta-band h2 { font-size: 1.5rem; }
    .landing-footer { flex-direction: column; align-items: flex-start; }
    .card { padding: var(--space-4); }
    .table th, .table td { padding: .55rem .6rem; }
}
@media (max-width: 480px) {
    .navbar__logo-img { height: 26px; }
    .navbar__actions { gap: .35rem; }
    .lang-toggle, .theme-toggle { padding: .25rem .45rem; }
    .navbar__actions .btn--sm { padding: .35rem .6rem; font-size: .8rem; }
    .nav-user, .cmdbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .feature-card:hover, .quick-card:hover { transform: none; }
    .side-panel { animation: none; }
}
@media print {
    .navbar, .nav-drawer, .nav-drawer__overlay, .no-print, .skip-link, .theme-toggle { display: none !important; }
    body, main#main { background: #fff !important; color: #000 !important; }
    .card, .stat-card, .table, .kpi { box-shadow: none !important; border-color: #bbb !important; background: #fff !important; color: #000 !important; }
    .table th, .table td { color: #000 !important; }
    .badge { border: 1px solid #888; color: #000 !important; background: #fff !important; }
}