@import "lawesome/_tokens-Nkb0z6b.css";
@import "lawesome/_overrides-39mO-9q.css";
@import "board-nLf0eSr.css";
@import "site_map-aErrQ5f.css";

/* =======================================================
   HPIT Intelligence Architect — Design System v2.1
   Lawesome tokens (vendored) + HPIT compatibility aliases
   ======================================================= */

/* --- Token System ------------------------------------------------
   The values now live upstream. `./lawesome/_tokens.css` is a
   verbatim copy of Lawesome's token file (485 tokens: colour,
   spacing, type scale, radius, shadow, motion, z-index) and
   `./lawesome/_overrides.css` pins the handful of values where HPIT
   and Lawesome disagree, so adopting the names repaints nothing.

   The block below is the COMPATIBILITY LAYER: HPIT's 46 shipped
   custom properties, each one now an alias of its `--la-*`
   counterpart, so the ~1,300 `var(--accent)` / `var(--border)` /
   `var(--radius)` call sites across this sheet, board.css and the
   templates keep working untouched. Phase 2 retires these aliases
   component by component as each one is ported to `--la-*` directly;
   when the last call site is gone, so is this block.

   Tokens marked HPIT-LOCAL have no upstream counterpart (see
   docs/lawesome-design-adoption-plan.md §3) and keep their literal
   values, themed per tier exactly as before.

   ── `:root, body`, NOT `:root` ────────────────────────────────
   A custom property containing `var()` is substituted where it is
   DECLARED. Lawesome's theme tiers land on BODY (`body.dark-mode`,
   `body.theme-forest`...), so an alias declared only at `:root`
   would resolve against `:root`'s light palette and freeze there —
   dark mode would inherit light values through the alias. On `body`
   the alias sees whichever tier is on and inherits to the page.
   `:root`'s copy only ever paints <html> itself.
------------------------------------------------------------------ */
:root,
body {
    /* Neutral Tier — Layered depth without clutter */
    --bg-main:      var(--la-bg-page);           /* Soft canvas — primary surface */
    --sidebar:      var(--la-sidebar-bg);        /* Spine — slightly tinted white */
    --bg-deep:      var(--la-bg-card);           /* Cards — pure white foreground */
    --sidebar-hover:var(--la-sidebar-hover);     /* Hover/active tint */
    --border:       var(--la-border-color);      /* Subtle stroke */
    --border-strong:var(--la-border-color-input);/* Stronger strokes / dividers.
                       NOT --la-border-color-strong: upstream's "strong" is
                       slate-600, two steps darker than HPIT's; slate-300 is
                       the input-border token and is HPIT's exact value. */

    /* Typography Scale — Gracefully muted hierarchy */
    --text-main:    var(--la-text-primary);   /* anchor headings */
    --text-body:    var(--la-text-secondary); /* body data */
    --text-muted:   var(--la-text-faint);     /* metadata, context.
                       Upstream ranks three greys where HPIT has one;
                       --la-text-faint is the one HPIT's value matches. */
    --sidebar-text: var(--la-sidebar-icon);   /* Nav labels. --la-text-secondary
                       would collide with --text-body, which carries a
                       different value in dark mode. */

    /* ── Semantic Accent Aliases ───────────────────────────
       Map upstream accent steps to HPIT's intents — never use raw
       ramp tokens in components; always go through these aliases.
       The indigo ramp itself lives in ./lawesome/_overrides.css
       next to the accent pins written against it, because it is
       HPIT-local raw palette: upstream's is slate/blue/green/
       amber/red/cyan only.
    ──────────────────────────────────────────────────────── */
    --accent:         var(--la-accent);          /* Primary actions, brand identity */
    --accent-hover:   var(--la-accent-strong);   /* Interaction feedback — hover/active */
    --accent-light:   var(--la-accent-ink);      /* Links, secondary interactive text */
    --accent-bg:      var(--la-accent-soft);     /* Badge / pill fills */
    --accent-on:      var(--la-accent-contrast); /* Text color on accent-filled backgrounds */

    /* HPIT-LOCAL accent steps — upstream stops at accent/strong/ink/
       soft/ring, so these four have no counterpart. Themed per tier
       below (and derived from the live accent for the vendored
       atlantis/high-contrast tiers further down). */
    --accent-active:  var(--indigo-800); /* Pressed / focus-visible ring source */
    --accent-subtle:  var(--indigo-500); /* Mid-weight — icons, accented UI text */
    --accent-bg-soft: var(--indigo-50);  /* Very subtle tints — row highlights */
    --accent-border:  var(--indigo-300); /* Accent-tinted borders. NOT
                       --la-accent-ring: that token is a focus ring upstream,
                       and hijacking it to carry a border colour would
                       mis-paint every Phase 2 focus state. */

    /* Semantic States */
    --success:        var(--la-success);
    --success-bg:     var(--la-success-light);
    --danger:         var(--la-danger);
    --danger-bg:      var(--la-danger-light);
    --warning:        var(--la-warning);
    --warning-bg:     var(--la-warning-light);
    --info:           var(--la-info);
    --info-bg:        var(--la-info-light);

    /* HPIT-LOCAL state borders — upstream has no counterpart; its
       badges pair --la-badge-soft-*-bg with a -text ink instead. */
    --success-border: #6EE7B7;
    --danger-border:  #FCA5A5;
    --warning-border: #FCD34D;

    /* Elevation Shadows (light-aware) */
    --shadow-xs: var(--la-shadow-xs);
    --shadow-sm: var(--la-shadow-sm);
    --shadow-md: var(--la-shadow-md);
    --shadow-lg: var(--la-shadow-lg);
    /* HPIT-LOCAL — upstream's deepest step is --la-shadow-lg; its
       --la-shadow-md-up is an upward shadow for sticky footers, not
       a fifth elevation. */
    --shadow-xl: 0 20px 48px rgba(15,23,42,0.14), 0 8px 24px rgba(15,23,42,0.08);

    /* Base Radius — pinned to 2px in ./lawesome/_overrides.css */
    --radius: var(--la-radius-md);
}


/* =======================================================
   Dark Mode — HPIT-LOCAL token steps
   ======================================================= */
/* The neutral hierarchy, accent ramp, semantic states and shadows
   that used to live here are now `--la-*` pins in
   ./lawesome/_overrides.css under the same `body.dark-mode`
   selector — same values, upstream names. What is left here is only
   the HPIT-local steps that have no `--la-*` counterpart, so they
   cannot be pinned and must be themed directly. */
body.dark-mode {
    /* ── Brand Ramp Shift (300/400 primary on dark bg) ──────── */
    --accent-active:  var(--indigo-600);
    --accent-subtle:  var(--indigo-400);
    --accent-bg-soft: rgba(99,102,241, 0.08);
    --accent-border:  rgba(129,140,248, 0.30);

    /* ── Semantic State Borders (OKLCH-balanced: L=0.75 C=0.18) ──── */
    --success-border: oklch(0.75 0.18 155 / 0.30);
    --danger-border:  oklch(0.75 0.18 25 / 0.30);
    --warning-border: oklch(0.75 0.18 80 / 0.30);

    /* ── Elevation (edge-glow on dark) ──────────────── */
    --shadow-xl: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.6);
}

/* =======================================================
   HPIT-LOCAL THEME TIERS — Forest
   ======================================================= */
/* Forest is HPIT's own theme and stays here (owner decision,
   2026-11-03: Lawesome's nine themes do not include it, and its
   green is HPIT's). Rewritten in `--la-*` names and onto Lawesome's
   body-class mechanism, values unchanged to the hex.

   (0,2,1) in both modes — `:not(.dark-mode)` on the light tier and
   `.dark-mode.theme-forest` on the dark one — which is the same
   shape, and the same specificity, as the vendored atlantis and
   high-contrast tiers in ./lawesome/_tokens.css. */

/* ── Forest Theme (Light Mode) ── */
body.theme-forest:not(.dark-mode) {
    --la-bg-page:            #F4F9F5;
    --la-sidebar-bg:         #EAF2EC;
    --la-bg-card:            #FFFFFF;
    --la-bg-surface:         #FFFFFF;
    --la-sidebar-hover:      #DFEBE2;
    --la-border-color:       rgba(0, 0, 0, 0.12);
    --la-border-color-input: rgba(0, 0, 0, 0.22);

    --la-text-primary:   #0D2013;
    --la-text-secondary: #1F3A27;
    --la-text-faint:     #557A5F;
    --la-sidebar-icon:   #2D5037;

    /* Green brand scale */
    --la-accent:          #16A34A; /* Mid green */
    --la-accent-strong:   #15803D;
    --la-accent-ink:      #15803D;
    --la-accent-soft:     #DCFCE7;
    --la-accent-contrast: #FFFFFF;

    /* HPIT-local steps */
    --accent-active:  #166534;
    --accent-subtle:  #16A34A;
    --accent-bg-soft: #F0FDF4;
    --accent-border:  #86EFAC;
}

/* ── Forest Theme (Dark Mode) ── */
body.dark-mode.theme-forest {
    --la-bg-page:            #0a150e;  /* L0: Deep dark Slack canvas */
    --la-sidebar-bg:         #122316;  /* L1: Channels sidebar background */
    --la-bg-card:            #111c15;  /* L2: Cards/containers — neutral dark, hint of green */
    --la-bg-surface:         #111c15;
    --la-sidebar-hover:      #182a1d;  /* Hover tint */
    --la-border-color:       rgba(255, 255, 255, 0.08);  /* Semi-transparent white to let gradient shine through */
    --la-border-color-input: rgba(255, 255, 255, 0.16);

    --la-text-primary:   #e8f7ed;  /* Soft light green headings */
    --la-text-secondary: #d1ebd9;  /* Soft green body */
    --la-text-faint:     #8aad96;  /* Brighter muted — ~5.5:1 on dark bg */
    --la-sidebar-icon:   #8aad96;

    /* Green brand ramp on dark background */
    --la-accent:          #8cee45;  /* Bright vibrant lime green */
    --la-accent-strong:   #a3f268;
    --la-accent-ink:      #6bcc3a;
    --la-accent-soft:     rgba(140, 238, 69, 0.20);
    --la-accent-contrast: #0a150e;  /* Dark text on bright lime */

    /* HPIT-local steps */
    --accent-active:  #b9f68c;
    --accent-subtle:  #5ab832;
    --accent-bg-soft: rgba(140, 238, 69, 0.10);
    --accent-border:  rgba(140, 238, 69, 0.30);
}

/* Sidebar Gradients for Forest Theme */
body.theme-forest nav.sidebar {
    background: linear-gradient(180deg, #e2f2e5 0%, #e0e9f5 100%) !important;
}
body.theme-forest .chat-sidebar {
    background: linear-gradient(180deg, #d3ebd8 0%, #cbdcf0 100%) !important; /* Slightly darker */
}

body.dark-mode.theme-forest nav.sidebar {
    background: linear-gradient(180deg, #122a04 0%, #020e26 100%) !important;
}
body.dark-mode.theme-forest .chat-sidebar {
    background: linear-gradient(180deg, #0d2003 0%, #010a1b 100%) !important; /* Slightly darker */
}
/* Custom Sidebar Nav Styling for Forest Theme */
body.theme-forest .chat-sidebar .sidebar-nav-item,
body.theme-forest .chat-sidebar .thread-btn {
    color: var(--accent) !important; /* Accent green text color by default */
}
body.theme-forest .chat-sidebar .sidebar-nav-item .material-symbols-rounded {
    color: var(--accent) !important;
}
body.theme-forest .chat-sidebar .thread-btn-wrapper .thread-more-btn {
    color: var(--accent) !important;
}
body.theme-forest .chat-sidebar .thread-btn-wrapper:hover:not([data-active="true"]) {
    background: rgba(0, 0, 0, 0.05) !important; /* Soft dark overlay for light mode hover */
}
body.dark-mode.theme-forest .chat-sidebar .thread-btn-wrapper:hover:not([data-active="true"]) {
    background: rgba(255, 255, 255, 0.05) !important; /* Soft light overlay for dark mode hover */
}

/* Selected active thread styling for Forest theme — matches rail-item.active density */
body.theme-forest .chat-sidebar .thread-btn-wrapper[data-active="true"] {
    background: var(--accent-bg) !important;
}
body.dark-mode.theme-forest .chat-sidebar .thread-btn-wrapper[data-active="true"] {
    background: var(--accent-bg) !important;
}
body.theme-forest .chat-sidebar .thread-btn-wrapper[data-active="true"] .thread-btn,
body.theme-forest .chat-sidebar .thread-btn-wrapper[data-active="true"] .thread-more-btn {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* Forest Dark — dark text on bright lime accent backgrounds (white on #8cee45 = ~1.8:1, FAILS WCAG) */
body.dark-mode.theme-forest .btn-action.primary,
body.dark-mode.theme-forest .auth-btn,
body.dark-mode.theme-forest button[data-action="click->chat#sendMessage"],
body.dark-mode.theme-forest button[style*="background: var(--accent)"],
body.dark-mode.theme-forest button[style*="background:var(--accent)"],
body.dark-mode.theme-forest a[style*="background: var(--accent)"],
body.dark-mode.theme-forest a[style*="background:var(--accent)"],
body.dark-mode.theme-forest .dt-container .dt-paging .dt-paging-button.current {
    color: var(--accent-on) !important;
}

/* =======================================================
   VENDORED THEME TIERS — Atlantis & High Contrast
   =======================================================
   HPIT's own token blocks for these two are GONE. Both tiers now
   come from ./lawesome/_tokens.css verbatim —
   `body.theme-atlantis:not(.dark-mode)` / `body.dark-mode.theme-atlantis`
   and `body.high-contrast:not(.dark-mode)` / `body.dark-mode.high-contrast`.

   Owner decision, 2026-11-03: both repos had grown an independent
   Atlantis (HPIT's #0F766E light / #33E2D6 dark against upstream's
   teal-600 / teal-dk-fill — the same two accents, different washes)
   and an independent high-contrast tier. Upstream's won, so these
   are the two themes Phase 1 DOES repaint. Classic and forest are
   pinned to the pixel; atlantis and high contrast change.

   What follows is only the HPIT-local steps those vendored tiers
   carry no token for. They are derived from the live accent rather
   than hardcoded, so they follow whichever tier is on instead of
   leaking indigo into a teal page.
   ======================================================= */
body.theme-atlantis:not(.dark-mode),
body.dark-mode.theme-atlantis,
body.high-contrast {
    --accent-active:  var(--la-accent-strong);
    --accent-subtle:  var(--la-accent);
    --accent-bg-soft: color-mix(in srgb, var(--la-accent-soft) 50%, transparent);
    --accent-border:  var(--la-accent-ring);
}

/* High contrast only: upstream's `--la-accent-soft` is the SOLID fill
   there (`--la-hc-fill` — black in light, the accent itself in dark),
   meant to carry `--la-accent-contrast` ink. HPIT pairs `--accent-bg`
   with `--accent` ink (badge/pill fills, the What's New icon tiles),
   so the plain alias paints black glyphs on black tiles. Derive the
   two tint steps from the live accent instead — the same shape as
   HPIT's own high-contrast tier (#E5E5E5 / #F5F5F5 on white). */
body.high-contrast {
    --accent-bg:      color-mix(in srgb, var(--la-accent) 12%, transparent);
    --accent-bg-soft: color-mix(in srgb, var(--la-accent) 6%, transparent);
}

/* High contrast stays FLAT. Upstream's high-contrast tier restates
   ink, edges and accents but has no opinion on elevation, so without
   this the overlay would grow the shadows HPIT deliberately removed
   from it. Four `--la-*` pins plus HPIT's local fifth step. */
body.high-contrast {
    --la-shadow-xs: none;
    --la-shadow-sm: none;
    --la-shadow-md: none;
    --la-shadow-lg: none;
    --shadow-xl: none;
}

/* Atlantis Dark — dark text on bright teal accent backgrounds */
body.dark-mode.theme-atlantis .btn-action.primary,
body.dark-mode.theme-atlantis .auth-btn,
body.dark-mode.theme-atlantis button[data-action="click->chat#sendMessage"],
body.dark-mode.theme-atlantis button[style*="background: var(--accent)"],
body.dark-mode.theme-atlantis button[style*="background:var(--accent)"],
body.dark-mode.theme-atlantis a[style*="background: var(--accent)"],
body.dark-mode.theme-atlantis a[style*="background:var(--accent)"],
body.dark-mode.theme-atlantis .dt-container .dt-paging .dt-paging-button.current {
    color: var(--accent-on) !important;
}

/* High Contrast Button Text Color Overrides for Proper Contrast */
body.high-contrast:not(.dark-mode) button[style*="background:var(--accent)"],
body.high-contrast:not(.dark-mode) button[style*="background: var(--accent)"],
body.high-contrast:not(.dark-mode) a[style*="background:var(--accent)"],
body.high-contrast:not(.dark-mode) a[style*="background: var(--accent)"],
body.high-contrast:not(.dark-mode) .btn-action.primary,
body.high-contrast:not(.dark-mode) .action-button.primary,
body.high-contrast:not(.dark-mode) .auth-btn,
body.high-contrast:not(.dark-mode) .dt-container .dt-paging .dt-paging-button.current {
    color: #FFFFFF !important;
}

body.dark-mode.high-contrast button[style*="background:var(--accent)"],
body.dark-mode.high-contrast button[style*="background: var(--accent)"],
body.dark-mode.high-contrast a[style*="background:var(--accent)"],
body.dark-mode.high-contrast a[style*="background: var(--accent)"],
body.dark-mode.high-contrast .btn-action.primary,
body.dark-mode.high-contrast .action-button.primary,
body.dark-mode.high-contrast .auth-btn,
body.dark-mode.high-contrast .dt-container .dt-paging .dt-paging-button.current {
    color: #000000 !important;
}



/* ── Dark scrollbar ──
   `body.dark-mode ::-webkit-scrollbar-thumb` reaches everything
   inside <body>; the extra `body.dark-mode::-webkit-scrollbar-thumb`
   keeps <body>'s own scroller, which the old
   `[data-theme="dark"] ::-webkit-scrollbar-thumb` matched as a
   descendant of <html>. */
body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--border-strong); }
body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Dark auth page ──
   `.auth-body` IS the <body> of templates/auth.html.twig, so the
   mode class and the page class are the same subject. */
body.dark-mode.auth-body {
    background: #0B0E17;
    animation: none;
}

body.dark-mode.auth-body::before {
    background: radial-gradient(ellipse, rgba(129,140,248,0.18) 0%, transparent 70%);
    filter: blur(100px);
}

body.dark-mode.auth-body::after {
    background: radial-gradient(ellipse, rgba(99,102,241,0.14) 0%, transparent 70%);
    filter: blur(120px);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-body);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4 { margin-top: 0; font-weight: 700; color: var(--text-main); }

h1 {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h1 .material-symbols-rounded {
    font-size: 1.15em;
    flex-shrink: 0;
}

h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}

p { line-height: 1.6; margin-top: 0; }

a { color: var(--accent-light); text-decoration: none; transition: color 0.12s; }
a:hover { color: var(--accent); }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

/* Links that are secondary/lower-priority stop at 400 by default,
   stepping up to 600 (--accent) only on deliberate hover interaction. */
.link-secondary { color: var(--accent-light); }
.link-secondary:hover { color: var(--accent-subtle); }

.gradient-text {
    /* 600 → 400: brand gradient reads light-to-lighter, not dark-to-light */
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; transition: background 0.15s; }
/* Subtle brand moment — scrollbar steps to 400 on hover, not just grey */
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

/* --- Animations --- */
@keyframes spin {
    100% { transform: rotate(360deg); }
}
@keyframes bellPulse {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(12deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(6deg); }
    40% { transform: rotate(0deg); }
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInDown {
    from { transform: translateY(-120%) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes letterDrop {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
/* --- Global Icon Standards --- */
/* Enforce that icons seamlessly match their surrounding typography, stripping scattered color treatments */
.material-symbols-rounded, .material-symbols-outlined {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 0.85; /* Soften geometry to retain focus on typography */
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(12px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* panic / scream — triggered by "!!!" phrases in the typing controller */
@keyframes panicShake {
    0%   { transform: translateX(0)     scale(1);    color: inherit; }
    4%   { transform: translateX(-8px)  scale(1.04); color: #D946EF; }
    8%   { transform: translateX(8px)   scale(1.02); color: #A855F7; }
    12%  { transform: translateX(-7px)  scale(1.04); color: #D946EF; }
    16%  { transform: translateX(7px)   scale(1.02); color: #A855F7; }
    20%  { transform: translateX(-6px)  scale(1.03); color: #D946EF; }
    24%  { transform: translateX(6px)   scale(1);    color: #A855F7; }
    28%  { transform: translateX(-5px)  scale(1.02); color: #D946EF; }
    32%  { transform: translateX(5px)   scale(1);    color: #A855F7; }
    36%  { transform: translateX(-4px)  scale(1.01); color: #D946EF; }
    40%  { transform: translateX(4px)   scale(1);    color: #A855F7; }
    44%  { transform: translateX(-3px)  scale(1);    color: #D946EF; }
    48%  { transform: translateX(3px)   scale(1);    color: #A855F7; }
    52%  { transform: translateX(-2px)  scale(1);    color: #D946EF; }
    56%  { transform: translateX(2px)   scale(1);    color: inherit; }
    60%  { transform: translateX(-1px)  scale(1);    color: inherit; }
    65%  { transform: translateX(1px);               color: inherit; }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0)     scale(1);    color: inherit; }
}

.animate-panic {
    display: inline-block;
    animation: panicShake 1.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    transform-origin: center;
}

/* View Transitions */
::view-transition-old(root) { animation: 0.2s ease-out fadeOut; }
::view-transition-new(root) { animation: 0.25s ease-out fadeInUp; }

/* Reduced motion / disabled animations */
[data-animations="disabled"] * {
    transition: none !important;
    animation: none !important;
}

/* --- Icon Rail Sidebar --- */
nav.sidebar {
    width: 72px;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logo */
.rail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
}

.rail-logo-svg {
    width: 32px;
    height: auto;
    color: var(--sidebar-logo, var(--accent-light));
    transition: color 0.15s;
}

.rail-logo:hover .rail-logo-svg {
    color: var(--sidebar-logo-hover, var(--accent));
}

/* Nav container */
.rail-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    width: 100%;
    padding: 0 6px;
}

/* Spacer between groups */
.rail-spacer {
    height: 12px;
    flex-shrink: 0;
}

/* Individual rail item (link or button) */
.rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 6px 0;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--sidebar-text);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}

.rail-item .material-symbols-rounded {
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.12s ease;
}

.rail-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hover */
.rail-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-active-text, var(--text-main));
}

/* Active — accent background pill */
.rail-item.active {
    background: var(--sidebar-active-bg, var(--accent-bg));
    color: var(--sidebar-active-text, var(--accent));
}

.rail-item.active .material-symbols-rounded {
    color: var(--sidebar-active-text, var(--accent));
}

/* Rail footer */
.rail-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 6px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Avatar at bottom */
.rail-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    flex-shrink: 0;
}

.rail-avatar img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--border);
    transition: box-shadow 0.15s;
}

.rail-avatar:hover img {
    box-shadow: 0 0 0 2px var(--accent);
}

/* Keyboard shortcut label */
.rail-label-kbd {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.5;
}

/* --- Main Content --- */
main.content {
    flex-grow: 1;
    padding: 5rem 3.5rem 3rem;
    overflow-y: scroll;
    background: var(--bg-main);
    min-width: 0;
    min-height: 0;
}

.container { max-width: 1280px; margin: 0 auto; }

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    font-weight: 400;
}

/* --- Cards --- */
.card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.card-body { padding: 24px; }

/* --- Detail Panel (Entity Profile Pages) --- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px; /* 8pt × 6 — generous horizontal gutter */
}
.detail-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
}
.detail-grid > .detail-section {
    padding: 24px 0; /* 8pt × 3 vertical rhythm */
}
.detail-grid > .detail-section:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}
.detail-grid > .detail-section + .detail-section {
    padding-left: 24px;
}
/* For 3-col grids, only the non-last columns get the divider */
.detail-grid--3col > .detail-section:nth-child(2) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}

.detail-section-title {
    font-size: 0.75rem; /* 12px — modular scale stop */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 16px 0; /* 8pt × 2 */
}

.detail-field {
    margin-bottom: 16px; /* 8pt × 2 */
}
.detail-field:last-child {
    margin-bottom: 0;
}
.detail-field-label {
    font-size: 0.75rem; /* 12px — modular scale */
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px; /* 8pt × 0.5 — tight internal relationship */
}
.detail-field-value {
    font-size: 0.875rem;
    color: var(--text-body);
}
.detail-field-value--emphasis {
    font-weight: 600;
    color: var(--text-main);
}
.detail-field-value--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.detail-field-value--link:hover {
    color: var(--accent);
}

/* --- 3D Card Flip (People Grid) --- */
.person-card {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.person-card__inner {
    width: 100%;
    height: 100%;
}
.person-card__front {
    border-radius: 0;
    background: var(--bg-deep);
    border: none;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
    transition: background-color 0.15s;
    height: 100%;
}
.person-card:hover .person-card__front {
    background-color: var(--sidebar-hover);
}

/* --- Chat Attachments --- */
.chat-thumbnail {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-thumbnail:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-sm);
}
.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--accent-light);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color 0.12s, background 0.12s;
}
.chat-file-chip:hover {
    border-color: var(--accent-border);
    background: var(--accent-bg-soft);
}

/* --- Buttons --- */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 8px 16px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-body);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.12s ease;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.btn-action:hover {
    /* Default ghost btn hover nudges toward brand without fully committing */
    background: var(--accent-bg-soft);
    border-color: var(--accent-border);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.btn-action.primary {
    background: var(--accent);       /* 600 — clear primary CTA */
    border-color: var(--accent);
    color: var(--accent-on);
}

.btn-action.primary:hover {
    background: var(--accent-hover); /* 700 — steps darker, confirms intent */
    border-color: var(--accent-hover);
}

.btn-action.primary:active {
    background: var(--accent-active); /* 800 — pressed state, maximum feedback */
    border-color: var(--accent-active);
}

.btn-action.danger {
    color: var(--danger);
    border-color: rgba(220,38,38,0.25);
}
.btn-action.danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-action.success {
    color: var(--success);
    border-color: rgba(40,167,69,0.25);
}
.btn-action.success:hover {
    background: var(--success-bg);
    border-color: var(--success);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.btn-action .material-symbols-rounded { font-size: 1rem; }

/* --- Status Badges --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.status-badge.active, .status-badge.status-active               { background: var(--success-bg); color: var(--success); }
.status-badge.inactive, .status-badge.status-inactive           { background: var(--sidebar-hover); color: var(--text-muted); }
.status-badge.pending, .status-badge.status-pending             { background: var(--warning-bg); color: var(--warning); }
.status-badge.leased, .status-badge.status-leased               { background: var(--info-bg); color: var(--info); }
.status-badge.retired, .status-badge.status-retired             { background: var(--danger-bg); color: var(--danger); }
.status-badge.purple                                            { background: var(--accent-bg); color: var(--accent); }
/* Asset statuses */
.status-badge.status-deployed                                   { background: var(--info-bg); color: var(--info); }
.status-badge.status-available                                  { background: var(--success-bg); color: var(--success); }
.status-badge.status-maintenance                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-decommissioned, .status-badge.status-retired { background: var(--sidebar-hover); color: var(--text-muted); }
/* Ticket statuses */
.status-badge.status-Open                                       { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-InProgress                                 { background: var(--info-bg); color: var(--info); }
.status-badge.status-Resolved                                   { background: var(--success-bg); color: var(--success); }
/* Person/admin statuses */
.status-badge.status-invited                                    { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-offboarding                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-terminated                                 { background: var(--danger-bg); color: var(--danger); }

/* Card header h1/h2/h3 size constraint */
.card-header h1 { font-size: 1.125rem; margin: 0; }
.card-header h2 { margin: 0; }
.card-header h3 { margin: 0; }

/* --- Form Controls --- */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.12s, box-shadow 0.12s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);                         /* 600 border */
    box-shadow: 0 0 0 3px var(--accent-bg);              /* 100 ring — soft, branded */
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

/* --- Searchable Select --- */
.ss-wrapper {
    position: relative;
}
.ss-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.ss-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    line-height: 1.4;
    white-space: nowrap;
}
.ss-tag-remove {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.ss-tag-remove:hover { opacity: 1; }
.ss-search {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    background: var(--input-bg, var(--bg-deep));
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
.ss-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.ss-search::placeholder { color: var(--text-muted); }
.ss-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ss-option {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text-body);
    transition: background 0.1s;
}
.ss-option:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}
.ss-option--selected {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}
.ss-option--selected:hover {
    background: var(--accent-bg);
}
.ss-no-results {
    padding: 0.75rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Auth Pages --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #F8FAFC, #EEF2FF, #E0E7FF, #F1F5F9);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Atmospheric glow orbs — instant ambiance before JS loads */
.auth-body::before,
.auth-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-body::before {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(129,140,248,0.1) 0%, transparent 70%);
    top: -5%;
    right: -5%;
    filter: blur(80px);
}

.auth-body::after {
    width: 500px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.08) 0%, transparent 70%);
    bottom: -10%;
    left: -5%;
    filter: blur(100px);
}

.auth-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-xl);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-input-group label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-input {
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1.125rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
}

.auth-input:focus {
    border-color: var(--accent);          /* 600 */
    box-shadow: 0 0 0 3px var(--accent-bg); /* 100 ring */
}

.auth-btn {
    background: var(--accent);  /* 600 — primary identity moment */
    color: #fff;
    border: none;
    padding: 1.125rem 1.5rem;
    border-radius: var(--radius);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-top: 0.5rem;
}

.auth-btn:hover {
    background: var(--accent-hover);  /* 700 — deliberate step darker */
}

.auth-btn:active {
    background: var(--accent-active); /* 800 — maximum confirmation */
}

.auth-alert {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

/* --- Reveal Utility --- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- DataTables Light Override --- */
.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-main) !important;
    padding: 0.55rem 1rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important; /* 100 ring */
}
table.dataTable thead tr {
    background: var(--sidebar) !important;
}
table.dataTable thead th {
    background: var(--sidebar) !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 0.875rem 1rem !important;
}
table.dataTable tbody tr {
    background: var(--bg-deep) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background 0.1s !important;
}
/* Table row hover: purple-50 instead of grey — "this is clickable" in brand language */
table.dataTable tbody tr:hover {
    background: var(--accent-bg-soft) !important;
}
table.dataTable tbody td {
    color: var(--text-body) !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    border-top: none !important;
}
table.dataTable.no-footer { border-bottom: 1px solid var(--border) !important; }
.dt-container .dt-paging .dt-paging-button {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    transition: all 0.12s !important;
}
/* Current page: full 600 — you are on this page */
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
/* Pagination hover: 50 bg + 400 text — exploring, not committed */
.dt-container .dt-paging .dt-paging-button:hover:not(.current) {
    background: var(--accent-bg-soft) !important;
    border-color: var(--accent-border) !important;
    color: var(--accent-light) !important;
}

/* --- Prevent DataTables Flash of Unstyled Content --- */
table.display:not(.dataTable) { opacity: 0; }
.dt-container table.display { opacity: 1; transition: opacity 0.2s ease-in; }

/* --- Glass Table (admin pages) --- */
.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-deep);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}
.glass-table th {
    background: var(--sidebar);
    text-align: left;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.glass-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-body);
}
.glass-table tbody tr:last-child td { border-bottom: none; }
.glass-table tbody tr { transition: background 0.1s; }
/* glass-table row hover also uses purple-50 — consistent brand signal */
.glass-table tbody tr:hover { background: var(--accent-bg-soft); }

/* --- Search Input Utility --- */
.search-input {
    padding: 0.55rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
    max-width: 340px;
    appearance: none;
    -webkit-appearance: none;
}
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.search-input::placeholder { color: var(--text-muted); }

/* --- Dash Tabs Structure --- */
.dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}
.dash-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    z-index: 2;
}
.dash-tab {
    background: none; border: none; cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    color: var(--text-muted);
    transition: color 0.15s;
    display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.dash-tab:hover, .dash-tab.active {
    color: var(--text-main);
}
.dash-tab__count {
    background: var(--border); color: var(--text-body);
    font-size: 0.6875rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: var(--radius);
    min-width: 18px; text-align: center; line-height: 1.4;
}

/* =======================================================
   Login Layout - Glow Background
   ======================================================= */
.login-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Rendering handled by WebGL canvas / Three.js via stimulus controller */
}

@keyframes loginBreathe { 
    0%   { opacity: 0.7; }
    100% { opacity: 1.0; }
}

/* --- Dialog Modals --- */
dialog::backdrop {
    background: rgba(0,0,0,0.3) !important;
}

/* --- Command Palette (⌘K Search) --- */
.cmd-palette {
    border: none;
    background: transparent;
    padding: 0;
    max-width: 640px;
    width: calc(100% - 2rem);
    margin: 12vh auto auto;
    border-radius: var(--radius);
    overflow: visible;
}

.cmd-palette::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cmd-palette-inner {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(80vh - 12vh);
}

/* Search input row */
.cmd-palette-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.cmd-palette-input-row .material-symbols-rounded {
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
}

.cmd-palette-input::placeholder {
    color: var(--text-muted);
}

.cmd-palette-kbd {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px 6px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Results area */
.cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(80vh - 12vh - 60px);
    padding: 0.5rem 0;
}

/* Category group */
.cmd-palette-group {
    padding: 0;
}

.cmd-palette-group + .cmd-palette-group {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.cmd-palette-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Individual result item */
.cmd-palette-item {
    display: block;
    padding: 0.5rem 1.25rem 0.5rem 2.75rem;
    text-decoration: none;
    color: var(--text-main);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.08s ease;
}

.cmd-palette-item:hover,
.cmd-palette-item.cmd-palette-active {
    background: var(--sidebar-hover);
}

.cmd-palette-item.cmd-palette-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
    margin: 0 0.5rem;
    padding-left: 2.25rem;
}

.cmd-palette-item-primary {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-secondary {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight matched text */
.cmd-palette-item mark {
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 0 1px;
}

/* Hint / empty / loading states */
.cmd-palette-hint,
.cmd-palette-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Loading spinner */
.cmd-palette-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: cmdSpin 0.6s linear infinite;
}

@keyframes cmdSpin {
    to { transform: rotate(360deg); }
}

/* Footer hint bar */
.cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.cmd-palette-footer kbd {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1px 5px;
    margin: 0 2px;
}

/* ─────────────────────────────────────────────
   What's New Modal
───────────────────────────────────────────── */
.whats-new-dialog {
    border: none;
    padding: 0;
    border-radius: calc(var(--radius) * 2);
    background: var(--bg-deep);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    max-width: 460px;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow: hidden;
    animation: wnFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.whats-new-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: wnFadeIn 0.2s ease forwards;
}

@keyframes wnFadeUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wnFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.whats-new-header {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.whats-new-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.whats-new-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

.whats-new-title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 0;
}

.whats-new-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    margin-top: 2px;
}

.whats-new-close:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.whats-new-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.whats-new-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
}

.whats-new-item:last-child {
    border-bottom: none;
}

.whats-new-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.whats-new-icon .material-symbols-rounded {
    font-size: 1.125rem;
    color: var(--accent);
}

.whats-new-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.whats-new-item-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.whats-new-item-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.whats-new-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* ── Checklist Component ── */
.cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cl-counter-pill {
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.cl-counter-pill.is-complete {
    color: var(--success);
}

.cl-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s, opacity 0.2s;
}
.cl-step:last-child {
    border-bottom: none;
}
.cl-step:hover {
    background: var(--sidebar-hover);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}
.cl-step.is-done {
    opacity: 0.4;
}
.cl-step.is-done:hover {
    opacity: 0.55;
}

/* Custom Toggle */
.cl-step input[type="checkbox"] {
    display: none;
}
.cl-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
    background: var(--border);
    border-radius: var(--radius);
    transition: background 0.2s;
    cursor: pointer;
}
.cl-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--bg-deep);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.cl-step input:checked + .cl-toggle {
    background: var(--accent);
}
.cl-step input:checked + .cl-toggle::after {
    transform: translateX(14px);
    background: #fff;
}

.cl-text {
    flex: 1;
    min-width: 0;
}
.cl-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-main);
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.12s;
}
.cl-step.is-done .cl-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
a.cl-title:hover {
    color: var(--accent);
}
.cl-step.is-done a.cl-title {
    pointer-events: none;
}
.cl-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 1px;
}
.cl-step.is-done .cl-desc {
    text-decoration: line-through;
}
.cl-desc a {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 600;
}
.cl-desc a:hover {
    text-decoration: underline;
}