/* ============================================================================
   GENESIS-DS — the ONE shipping stylesheet
   ----------------------------------------------------------------------------
   Pure CSS. No Tailwind. No build step. No copy-paste.

   HOW APPS CONSUME THIS (single source of truth — cannot drift):
     <link rel="stylesheet" href="/shared/genesis-ds/genesis-ds.css">
   Change a token or a component here → every app that links it updates on
   next shared-frontend deploy. There is no second copy to keep in sync.

   NAMING: every class is prefixed  genesis-ds-  so it never collides with an app's
   existing legacy CSS during gradual adoption.

   CASCADE: everything lives in @layer, so app stylesheets loaded AFTER this
   file always win without needing !important. That is the specificity fix
   the Dec-2025 semantic-CSS attempt lacked.

   Palette is the client's own published palette — see ../brand/README.md for every
   value, its source, and how the three derived ones are derived. Do not invent colours.
   ========================================================================== */

/* app-reset is the FIRST (lowest-priority) layer: a consuming app wraps its own
   `* { margin:0; padding:0 }` reset in `@layer app-reset {}` so it can never
   clobber genesis-ds-base/genesis-ds-components. Declaring the slot here (the DS loads before
   the app CSS) fixes the layer order regardless of app load order. */
@layer app-reset, genesis-ds-reset, genesis-ds-tokens, genesis-ds-base, genesis-ds-components;

/* -------------------------------------------------------------- RESET -- */
/* Integration contract (fixes the whole class of "app reset crushed my
   component" bugs): a consuming app MUST NOT ship an UNLAYERED
   `* { margin:0; padding:0 }` reset — an unlayered rule beats every @layer-ed
   DS rule regardless of specificity and silently zeroes component box-models.
   Instead, adopt THIS reset, or wrap the app's own reset in `@layer app-reset`
   (the slot declared above, before the genesis-ds layers). With the contract in place,
   per-component reset-armor is unnecessary — RETIRED 2026-07-20 now that kd-chat
   (the only GENESIS-DS consumer using these classes) layers its reset. */
@layer genesis-ds-reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, picture, svg { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* ---------------------------------------------------------------- TOKENS -- */
@layer genesis-ds-tokens {
  :root {
    /* Brand — Kreston Denmark. Values are the client's own published palette,
       read from the --kreston-* custom properties on kreston.dk (see
       apps/shared/frontend/brand/README.md for the table and the retrieval date).
       The token NAMES are role slots, not colour claims: -green is the primary
       action colour, -blue the secondary accent, -blue-dark the deep chrome.
       They kept their names because 278 references across two applications point
       at them; renaming them is a separate change with no visual effect. */
    --genesis-ds-green:        #189CD8;   /* kreston-blue — primary action */
    --genesis-ds-green-600:    #118ACE;   /* kreston-blue-shadow — hover */
    --genesis-ds-green-700:    #0F79B5;   /* derived, x0.88 of -600 — active */
    --genesis-ds-blue:         #43BBC7;   /* kreston-teal — secondary accent */
    --genesis-ds-blue-600:     #34ACBA;   /* kreston-teal-shadow */
    --genesis-ds-blue-700:     #2E97A4;   /* derived, x0.88 of -600 */
    --genesis-ds-blue-dark:    #243746;   /* kreston-dark-blue — headers / emphasis */
    --genesis-ds-blue-teal:    #1B2A37;   /* kreston-dark-blue-shadow */

    /* ONE DERIVATION RULE, 2026-09-24. The two -700 shades used different bases: the
       green was 88% of its own hover and the teal 75% of the base colour, so the same
       input produced inconsistent output and neither could be computed from a tenant's
       values without knowing which was which. The rule is now one: a -700 is 88% of the
       value directly above it in its ramp, which is what --genesis-ds-danger-600 already
       was. The teal moved from #328C95 to #2E97A4 in consequence - a slightly lighter,
       slightly cleaner dark teal, and the only visible change here. */

    /* The header's band. A picture, not a colour, and therefore a slot in its own right:
       the flat tone is the picture's own mean so the ends past the strip's width match
       it. They are tokens rather than literals in an application's stylesheet because a
       tenant under its own mark must not get the group's photograph - its brand file
       sets the image to none and the tone to its own deep chrome, and no markup and no
       application stylesheet changes. */
    --genesis-ds-header-band:      url('/shared/brand/kreston-header-band.png');
    --genesis-ds-header-band-tone: #3A4855;

    /* Neutrals — the client's grey scale, lightest to darkest */
    --genesis-ds-white:        #FFFFFF;   /* kreston-white */
    --genesis-ds-gray-50:      #F0F0F0;   /* kreston-milk — app background */
    --genesis-ds-gray-100:     #E6E6E6;   /* kreston-smoke — hover surface */
    --genesis-ds-gray-200:     #DCDCDC;   /* kreston-pearl — borders / dividers */
    --genesis-ds-gray-400:     #AAAAAA;   /* kreston-stone */
    --genesis-ds-gray-600:     #464646;   /* kreston-anthracite — secondary text */
    --genesis-ds-ink:          #323232;   /* kreston-black — primary text */

    /* Functional */
    --genesis-ds-success:      #00CE7C;   /* kreston-green */
    --genesis-ds-danger:       #E84339;   /* kreston-red */
    --genesis-ds-danger-600:   #CC3B32;   /* derived, x0.88 */
    --genesis-ds-warning:      #FFB71B;   /* kreston-yellow */
    --genesis-ds-info:         #189CD8;   /* = kreston-blue, as links are on their site */

    /* Semantic surfaces — tinted bg + border + readable fg for status / alert /
       toast / badge variants. Replaces the hardcoded pastels each app duplicates.
       Where the client publishes a *-highlight tint it is used verbatim as the
       background; the rest are derived from the functional colour by one rule:
       background = 12% over white, border = 30% over white, foreground = x0.6.
       Every foreground clears 4.5:1 against its own background. */
    --genesis-ds-info-bg:      #E3F3FA;  --genesis-ds-info-border:    #BAE1F3;  --genesis-ds-info-fg:    #0E5E82;
    --genesis-ds-success-bg:   #DDF9ED;  --genesis-ds-success-border: #B2F0D8;  --genesis-ds-success-fg: #007C4A;
    --genesis-ds-warning-bg:   #FFF5DE;  --genesis-ds-warning-border: #FFE9BB;  --genesis-ds-warning-fg: #996E10;
    --genesis-ds-danger-bg:    #FDEBEA;  --genesis-ds-danger-border:  #F8C7C4;  --genesis-ds-danger-fg:  #8B2822;
    --genesis-ds-neutral-bg:   #F0F0F0;  --genesis-ds-neutral-border: #DCDCDC;  --genesis-ds-neutral-fg: #464646;

    /* Chat message surfaces (from the live assistant) */
    /* The request is the neutral card and the response the tinted one. The
       predecessor had these the other way round; corrected here at the source
       2026-08-12, so every consumer inherits the correction. */
    /* deepened 2026-08-12: at 22% the request card read as barely tinted */
    --genesis-ds-chat-user-bg:      #B8E5EA;   /* kreston-teal 38% */
    --genesis-ds-chat-assistant-bg: #E3F3FA;   /* kreston-blue 12% - matches the KD avatar */

    /* File-type recognition colours. These are NOT brand colours and are not part of
       the palette above: they are the colours a user already associates with a file
       format, so a chip is recognised before it is read. That is why they sit outside
       the brand scale and why a red here does not mean danger.
       They live in the token layer for one reason: a colour decided in JavaScript
       cannot be themed, cannot be overridden per application, and cannot be found by
       anyone reading the stylesheet. A consumer keys on the file's extension and
       takes the value from here. */
    --genesis-ds-ft-doc:      #2B579A;   /* word-processor documents */
    --genesis-ds-ft-sheet:    #1D6F42;   /* spreadsheets, csv */
    --genesis-ds-ft-slides:   #C43E1C;   /* presentations */
    --genesis-ds-ft-pdf:      #D93025;
    --genesis-ds-ft-image:    #38BDF8;
    --genesis-ds-ft-archive:  #EAB308;
    --genesis-ds-ft-mail:     #FFFFFF;   /* the one light face — see the white modifier */
    --genesis-ds-ft-plain:    #6B7280;   /* text, markdown, and the fallback */

    /* Data provenance — distinguish an AI-produced value from a human-edited one
       (platform governance: disclosed AI / bounded judgment). Green = the AI did
       it (inferred/normalized/corrected), blue = a person did it. */
    --genesis-ds-prov-ai:   var(--genesis-ds-green-700);
    --genesis-ds-prov-user: var(--genesis-ds-blue);

    /* z-index scale (unify the 500/900/9000 chaos found across apps) */
    --genesis-ds-z-dropdown: 600;
    --genesis-ds-z-modal:    1000;
    --genesis-ds-z-toast:    9999;

    /* Typography — the UI ships Inter (see Fonts section for the brandbook story) */
    --genesis-ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --genesis-ds-font-web:    'Mulish', 'Muli', var(--genesis-ds-font);   /* brandbook: web (Google serves Muli as "Mulish") */
    --genesis-ds-font-design: 'Century Gothic', var(--genesis-ds-font);    /* brandbook: design materials */
    --genesis-ds-font-doc:    'Arial', 'Helvetica Neue', sans-serif; /* brandbook: official documents */
    --genesis-ds-font-mono:   'Courier New', monospace;
    --genesis-ds-fs-xs:   0.75rem;   /* 12 */
    --genesis-ds-fs-sm:   0.8125rem; /* 13 */
    --genesis-ds-fs-base: 0.875rem;  /* 14 */
    --genesis-ds-fs-md:   1rem;      /* 16 */
    --genesis-ds-fs-lg:   1.125rem;  /* 18 */
    --genesis-ds-fs-xl:   1.375rem;  /* 22 */
    --genesis-ds-fs-2xl:  1.75rem;   /* 28 */
    --genesis-ds-fw-normal: 400;
    --genesis-ds-fw-medium: 500;
    --genesis-ds-fw-semibold: 600;
    --genesis-ds-fw-bold: 700;

    /* SEMANTIC TYPE ROLES (improved system). One modular scale (~1.2 minor
       third, even px), weight used sparingly for hierarchy. Components consume
       a ROLE (size+weight+line-height together), never a raw fs or fw token, so the
       page reads homogeneously. Currently applied under html[data-genesis-ds-type=
       "improved"]; promoted to the component defaults once signed off. */
    --genesis-ds-text-caption-size: 0.6875rem; --genesis-ds-text-caption-weight: 400;  --genesis-ds-text-caption-lh: 1.4;   /* 11 — sub-meta microcopy: app-header tagline */
    --genesis-ds-text-meta-size:    0.75rem;   --genesis-ds-text-meta-weight:    400;  --genesis-ds-text-meta-lh:    1.4;   /* 12 — hints, footer, timestamps, chip */
    --genesis-ds-text-body-size:    0.875rem;  --genesis-ds-text-body-weight:    400;  --genesis-ds-text-body-lh:    1.5;   /* 14 — default text, inputs, messages */
    --genesis-ds-text-label-size:   0.875rem;  --genesis-ds-text-label-weight:   500;  --genesis-ds-text-label-lh:   1.2;   /* 14 — buttons, nav, tabs, controls */
    --genesis-ds-text-subhead-size: 1rem;      --genesis-ds-text-subhead-weight: 500;  --genesis-ds-text-subhead-lh: 1.3;   /* 16 — card titles, group headers */
    --genesis-ds-text-heading-size: 1.25rem;   --genesis-ds-text-heading-weight: 600;  --genesis-ds-text-heading-lh: 1.25;  /* 20 — section / modal titles */
    --genesis-ds-text-display-size: 1.875rem;  --genesis-ds-text-display-weight: 600;  --genesis-ds-text-display-lh: 1.2;   /* 30 — hero (rare) */

    /* Spacing scale (4px base) */
    --genesis-ds-sp-1: 0.25rem;
    --genesis-ds-sp-2: 0.5rem;
    --genesis-ds-sp-3: 0.75rem;
    --genesis-ds-sp-4: 1rem;
    --genesis-ds-sp-5: 1.5rem;
    --genesis-ds-sp-6: 2rem;
    --genesis-ds-sp-8: 3rem;

    /* Radius */
    --genesis-ds-radius-sm: 8px;   /* small chips (sort, tab, kebab hover) — softened to match */
    --genesis-ds-radius-md: 10px;  /* rows, pills, menus, surfaces — unified with controls */
    --genesis-ds-radius-lg: 10px;  /* controls (buttons, inputs, dropdown, segmented) */
    --genesis-ds-radius-pill: 999px;

    /* Chip pill box-model — single source (used by the layered rule AND the
       unlayered reset-armor at the foot of this file, so a naive app
       `* { padding:0 }` reset cannot crush the pill against its border). */
    --genesis-ds-chip-pad-y: 0.15rem;
    --genesis-ds-chip-pad-x: 0.85rem;

    /* Elevation */
    --genesis-ds-shadow-sm: 0 1px 2px rgba(36,55,70,.06);
    --genesis-ds-shadow-md: 0 2px 6px rgba(36,55,70,.08);
    --genesis-ds-shadow-lg: 0 6px 18px rgba(36,55,70,.10);
    --genesis-ds-shadow-xl: 0 12px 32px rgba(36,55,70,.14);

    /* Gradients (shading) — from the live Feedback button + brandbook */
    --genesis-ds-gradient-blue:  linear-gradient(135deg, #43BBC7, #243746);
    --genesis-ds-gradient-green: linear-gradient(135deg, #189CD8, #11ADE4);

    /* Motion */
    --genesis-ds-t-fast: .15s ease;
    --genesis-ds-t-base: .2s ease;

    /* Focus ring */
    --genesis-ds-ring: 0 0 0 3px color-mix(in srgb, var(--genesis-ds-green) 45%, transparent);

    /* Brand tints — derived from the brand colours (single source of truth) */
    --genesis-ds-green-t08: color-mix(in srgb, var(--genesis-ds-green) 8%, transparent);
    --genesis-ds-green-t12: color-mix(in srgb, var(--genesis-ds-green) 12%, transparent);
    --genesis-ds-green-t14: color-mix(in srgb, var(--genesis-ds-green) 14%, transparent);
    --genesis-ds-green-t16: color-mix(in srgb, var(--genesis-ds-green) 16%, transparent);
    --genesis-ds-green-t22: color-mix(in srgb, var(--genesis-ds-green) 22%, transparent);
    --genesis-ds-grey-t10:  color-mix(in srgb, var(--genesis-ds-gray-600) 10%, transparent);
    --genesis-ds-grey-t16:  color-mix(in srgb, var(--genesis-ds-gray-600) 16%, transparent);
    --genesis-ds-blue-dark-700: #182530;
  }
}

/* ------------------------------------------------------------------ BASE -- */
@layer genesis-ds-base {
  .genesis-ds { font-family: var(--genesis-ds-font); color: var(--genesis-ds-ink); }
  .genesis-ds *, .genesis-ds *::before, .genesis-ds *::after { box-sizing: border-box; }
}

/* ------------------------------------------------------------ COMPONENTS -- */
@layer genesis-ds-components {

  /* ---- Buttons -------------------------------------------------------- */
  .genesis-ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--genesis-ds-sp-2);
    padding: 0.625rem 1.25rem;
    font-family: var(--genesis-ds-font);
    font-size: var(--genesis-ds-fs-base);
    font-weight: var(--genesis-ds-fw-semibold);
    line-height: 1.15;
    border: 1px solid transparent;
    border-radius: var(--genesis-ds-radius-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--genesis-ds-t-base), border-color var(--genesis-ds-t-base),
                color var(--genesis-ds-t-base), box-shadow var(--genesis-ds-t-base),
                transform var(--genesis-ds-t-fast);
    -webkit-user-select: none; user-select: none;
  }
  .genesis-ds-btn:focus-visible { outline: none; box-shadow: var(--genesis-ds-ring); }
  .genesis-ds-btn:active { transform: translateY(1px); }
  .genesis-ds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

  .genesis-ds-btn--primary   { background: var(--genesis-ds-green); color: #fff; box-shadow: var(--genesis-ds-shadow-sm); }
  .genesis-ds-btn--primary:hover:not(:disabled)   { background: var(--genesis-ds-green-600); box-shadow: var(--genesis-ds-shadow-md); }
  .genesis-ds-btn--primary:active:not(:disabled)  { background: var(--genesis-ds-green-700); }

  .genesis-ds-btn--secondary { background: var(--genesis-ds-blue); color: #fff; box-shadow: var(--genesis-ds-shadow-sm); }
  .genesis-ds-btn--secondary:hover:not(:disabled) { background: var(--genesis-ds-blue-600); box-shadow: var(--genesis-ds-shadow-md); }

  .genesis-ds-btn--dark      { background: var(--genesis-ds-blue-dark); color: #fff; }
  .genesis-ds-btn--dark:hover:not(:disabled)      { background: var(--genesis-ds-blue-dark-700); }

  .genesis-ds-btn--danger    { background: var(--genesis-ds-danger); color: #fff; }
  .genesis-ds-btn--danger:hover:not(:disabled)    { background: var(--genesis-ds-danger-600); }

  .genesis-ds-btn--ghost     { background: transparent; color: var(--genesis-ds-green); border-color: var(--genesis-ds-green); }
  .genesis-ds-btn--ghost:hover:not(:disabled)     { background: var(--genesis-ds-green); color: #fff; }

  .genesis-ds-btn--subtle    { background: var(--genesis-ds-gray-100); color: var(--genesis-ds-gray-600); }
  .genesis-ds-btn--subtle:hover:not(:disabled)    { background: var(--genesis-ds-gray-200); color: var(--genesis-ds-green); }  /* icon/text greens on hover */

  /* Outline — white with neutral border, turns green on hover.
     This is the AUTHENTIC live send/attach button style from the KD-Assistant
     chat area (the surviving original element). */
  .genesis-ds-btn--outline   { background: #fff; color: var(--genesis-ds-gray-600); border-color: var(--genesis-ds-gray-200); box-shadow: var(--genesis-ds-shadow-sm); }
  .genesis-ds-btn--outline:hover:not(:disabled)   { background: var(--genesis-ds-gray-50); border-color: var(--genesis-ds-green); color: var(--genesis-ds-green); }

  .genesis-ds-btn--pill      { border-radius: var(--genesis-ds-radius-pill); }
  .genesis-ds-btn--sm        { padding: 0.375rem 0.875rem; font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-btn--lg        { padding: 0.875rem 1.75rem; font-size: var(--genesis-ds-fs-md); }
  .genesis-ds-btn--block     { display: flex; width: 100%; }

  /* Icon-only button (square or circular) */
  .genesis-ds-btn--icon {
    padding: 0; width: 40px; height: 40px; border-radius: var(--genesis-ds-radius-md);
  }
  .genesis-ds-btn--icon.genesis-ds-btn--pill { border-radius: var(--genesis-ds-radius-pill); }
  .genesis-ds-btn--icon.genesis-ds-btn--sm   { width: 32px; height: 32px; }

  /* Loading spinner (pure CSS) */
  .genesis-ds-spinner {
    width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: genesis-ds-spin .6s linear infinite; display: inline-block;
  }
  @keyframes genesis-ds-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-spinner { animation-duration: 1.5s; } }

  /* ---- Inputs --------------------------------------------------------- */
  .genesis-ds-input, .genesis-ds-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--genesis-ds-font);
    font-size: var(--genesis-ds-fs-base);
    color: var(--genesis-ds-ink);
    background: var(--genesis-ds-white);
    border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg);
    transition: border-color var(--genesis-ds-t-base), box-shadow var(--genesis-ds-t-base);
  }
  .genesis-ds-input::placeholder, .genesis-ds-textarea::placeholder { color: var(--genesis-ds-gray-400); }
  .genesis-ds-input:hover, .genesis-ds-textarea:hover, .genesis-ds-select:hover { border-color: var(--genesis-ds-green); }
  .genesis-ds-input:focus, .genesis-ds-textarea:focus {
    outline: none; border-color: var(--genesis-ds-green); box-shadow: none;   /* app standard: green frame, no ring */
  }
  .genesis-ds-textarea { resize: vertical; min-height: 44px; line-height: 1.5; }

  .genesis-ds-label {
    display: block; margin-bottom: var(--genesis-ds-sp-2);
    font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-semibold);
    color: var(--genesis-ds-gray-600);
  }

  /* Search field with leading styled magnifying-glass SVG (grey → green) */
  .genesis-ds-search { position: relative; }
  /* SLIM search field — the agreed design for EVERY search box (sidebar, panels, anywhere).
     Its vertical padding is deliberately tighter than a form .genesis-ds-input (and than nav/list
     rows) so the search bar reads as a compact control, not a full field. Explicit here BY
     DESIGN — it must NOT depend on a consuming app's reset zeroing the padding. */
  .genesis-ds-search .genesis-ds-input { padding: 0.1875rem 0.875rem 0.1875rem 2.4rem; background: var(--genesis-ds-white); }
  .genesis-ds-search .genesis-ds-input:focus { border-color: var(--genesis-ds-green); box-shadow: none; }
  .genesis-ds-search__icon {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--genesis-ds-gray-600); pointer-events: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: color var(--genesis-ds-t-base);
  }
  .genesis-ds-search:focus-within .genesis-ds-search__icon { color: var(--genesis-ds-green); }
  /* Trailing options/sort toggle — a caret pinned at the search's right edge that reveals the
     .genesis-ds-sortbar below (VISUAL ONLY; the consuming app wires the show/hide + the sorting). */
  .genesis-ds-search--with-toggle .genesis-ds-input { padding-right: 2.6rem; }
  .genesis-ds-search__toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border: none; background: transparent; border-radius: var(--genesis-ds-radius-md);
    color: var(--genesis-ds-gray-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--genesis-ds-t-fast), color var(--genesis-ds-t-fast);
  }
  .genesis-ds-search__toggle:hover { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green); }
  .genesis-ds-search__toggle > svg { transition: transform var(--genesis-ds-t-fast); }   /* .genesis-ds-tri supplies the filled triangle's size/fill */
  .genesis-ds-search__toggle.is-open { color: var(--genesis-ds-green); }
  .genesis-ds-search__toggle.is-open > svg { transform: rotate(90deg); }   /* ▶ closed → ▼ open, like the section-head carets */

  /* ---- Chat input trio (attach + textarea + send) -------------------- */
  /* AUTHENTIC spec extracted from the live assistant chat area:
     48px square buttons, 2px border, 8px radius (NOT the 44px from the retired
     Tailwind guide — the shipping originals are 48px). Icons are the real
     paperclip (attach) and rotated paper-plane (send) SVGs. */
  .genesis-ds-chat-input { display: flex; align-items: flex-start; gap: var(--genesis-ds-sp-3); }
  .genesis-ds-chat-input .genesis-ds-textarea {
    min-height: 48px; max-height: 150px;
    padding: 0.875rem 1rem;
    border-width: 2px; border-radius: 8px;
    font-size: 0.938rem; resize: none;
  }
  .genesis-ds-chat-input .genesis-ds-btn--icon {
    width: 48px; height: 48px; border-width: 2px; border-radius: 8px; flex-shrink: 0;
  }
  .genesis-ds-chat-input .genesis-ds-btn--icon svg { width: 20px; height: 20px; }

  /* ---- Card ----------------------------------------------------------- */
  .genesis-ds-card {
    background: var(--genesis-ds-white);
    border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg);
    box-shadow: var(--genesis-ds-shadow-sm);
    overflow: hidden;
  }
  .genesis-ds-card__header {
    padding: var(--genesis-ds-sp-4);
    border-bottom: 1px solid var(--genesis-ds-gray-200);
    font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark);
  }
  .genesis-ds-card__body { padding: var(--genesis-ds-sp-4); }
  .genesis-ds-card--hover { transition: box-shadow var(--genesis-ds-t-base), transform var(--genesis-ds-t-fast); }
  .genesis-ds-card--hover:hover { box-shadow: var(--genesis-ds-shadow-lg); transform: translateY(-2px); }

  /* ---- Badge ---------------------------------------------------------- */
  .genesis-ds-badge {
    display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-1);
    padding: 0.15rem 0.55rem; border-radius: var(--genesis-ds-radius-pill);
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-semibold);
    background: var(--genesis-ds-gray-100); color: var(--genesis-ds-gray-600);
  }
  .genesis-ds-badge--green  { background: var(--genesis-ds-green-t16); color: var(--genesis-ds-green-700); }
  .genesis-ds-badge--blue   { background: rgba(67,187,199,.16); color: var(--genesis-ds-blue-600); }
  .genesis-ds-badge--danger { background: rgba(231,76,60,.14); color: var(--genesis-ds-danger-600); }

  /* ---- Nav item (sidebar row) ---------------------------------------- */
  .genesis-ds-nav-item {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2);
    margin: 0 8px;   /* same side inset as .genesis-ds-side-head so row highlights line up with the section pill */
    padding: 0.5rem 0.4rem 0.5rem 0.75rem; border-radius: var(--genesis-ds-radius-md);
    font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
    cursor: pointer; position: relative;
    transition: background var(--genesis-ds-t-fast);
  }
  /* Hover = green tint, no band (same green as the selected item). */
  .genesis-ds-nav-item:hover { background: var(--genesis-ds-green-t12); }
  .genesis-ds-nav-item--active { background: var(--genesis-ds-green-t14); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark); }
  /* Drag & drop (move chat → private project): dim the dragged row; a VALID drop
     target gets a green tint + ring. (The no-drop cursor on invalid targets comes
     from the component only allowing the drop on a valid target.) */
  .genesis-ds-nav-item.genesis-ds-dragging { opacity: 0.45; }
  .genesis-ds-nav-item.genesis-ds-drop-target { background: var(--genesis-ds-green-t16); box-shadow: inset 0 0 0 2px var(--genesis-ds-green); border-radius: var(--genesis-ds-radius-sm); }
  /* Selection accent band — one shared rule for every "bar selector" (toast-style).
     The band marks the SELECTED item only; hover never shows the band. */
  .genesis-ds-nav-item--active::before,
  .genesis-ds-rail__item.is-active::before,
  .genesis-ds-file-row--active::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; border-radius: var(--genesis-ds-radius-md) 0 0 var(--genesis-ds-radius-md); background: var(--genesis-ds-green);
  }
  /* label truncates to available width (dynamic; e.g. "BOM expo…") */
  .genesis-ds-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .genesis-ds-nav-item .genesis-ds-caret { color: var(--genesis-ds-gray-600); flex-shrink: 0; transition: transform var(--genesis-ds-t-base); }
  .genesis-ds-nav-item.is-open > .genesis-ds-caret { transform: rotate(90deg); }
  .genesis-ds-nav-item__count { margin-left: auto; }
  .genesis-ds-nav-item--child { padding-left: 2.25rem; font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-nav-item--child2 { padding-left: 3.25rem; }
  /* chats belong to a project — indent guide line */
  .genesis-ds-subtree { margin-left: 1.25rem; border-left: 1.5px solid var(--genesis-ds-gray-200); }
  .genesis-ds-subtree .genesis-ds-nav-item--child { padding-left: 0.85rem; margin-left: 0; }  /* indent from the guide line, keep right 8px so it lines up with the section pill */

  /* Trailing controls — ONE shared 3-column grid: [clip] [ + ] [menu ⋮].
     Section header and every row use the same 22px tracks, so clip / + / caret(menu)
     line up across selectors and headers. Icon-only, tight. Cells are ALWAYS reserved
     (visibility, not display), so hover/select never reflows the row — no jumping. */
  .genesis-ds-nav-item__ctrls, .genesis-ds-side-head__ctrls {
    margin-left: auto; display: grid; grid-template-columns: repeat(3, 22px); align-items: center;
  }
  .genesis-ds-nav-item__clip, .genesis-ds-nav-item__new, .genesis-ds-nav-item__kebab,
  .genesis-ds-side-head__add, .genesis-ds-side-head__caret {
    grid-row: 1;   /* all cells on ONE row (columns 2/1/3 in DOM must not wrap) */
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; padding: 0; cursor: pointer; color: var(--genesis-ds-gray-600);
    border-radius: var(--genesis-ds-radius-sm);
  }
  /* Kebab INSIDE the primary "new" button (<genesis-ds-sidebar> d.addMenu). Positioned so its 22px cell
     lands in the SAME trailing column as .genesis-ds-nav-item__kebab below it: a row is inset 8px and
     padded 0.4rem (6.4px) on the right, and the kebab is the last 22px track — so measuring from the
     button's own right edge (also inset 8px), the cell starts 6.4px in. One kebab column, top to
     bottom; verified by an E2E geometry assertion, not by eye.

     The 1px subtraction below is not a fudge: .genesis-ds-btn has `border: 1px solid transparent`, and an
     absolutely-positioned child is offset from the PADDING box, so a plain right:6.4px lands 7.4px
     from the button's outer edge and the column sits 1px left of the rows (measured: Δ=1.00px). */
  .genesis-ds-btn--with-kebab { position: relative; padding-right: calc(6.4px + 22px + 4px); }
  .genesis-ds-btn__kebab {
    position: absolute; right: calc(6.4px - 1px); top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--genesis-ds-radius-sm); color: currentColor; cursor: pointer;
    transition: background var(--genesis-ds-t-fast);
  }
  .genesis-ds-btn__kebab:hover { background: rgba(255, 255, 255, 0.22); }
  .genesis-ds-btn__kebab:focus-visible { outline: 2px solid var(--genesis-ds-white); outline-offset: 1px; }
  /* Rail (collapsed) — the button shrinks to a 40px square; no room for a second affordance. */
  .genesis-ds-sidebar.is-rail .genesis-ds-btn__kebab { display: none; }
  .genesis-ds-sidebar.is-rail .genesis-ds-btn--with-kebab { padding-right: 0; }

  .genesis-ds-nav-item__clip { grid-column: 1; color: var(--genesis-ds-gray-400); }
  .genesis-ds-nav-item__clip > svg { width: 12px; height: 12px; }
  .genesis-ds-nav-item__clip:hover { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green); }
  .genesis-ds-nav-item__new, .genesis-ds-side-head__add { grid-column: 2; }
  .genesis-ds-nav-item__kebab, .genesis-ds-side-head__caret { grid-column: 3; }
  .genesis-ds-nav-item__new:hover, .genesis-ds-side-head__add:hover { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green); }
  .genesis-ds-nav-item__kebab:hover { background: var(--genesis-ds-grey-t10); color: var(--genesis-ds-ink); }
  /* menu (⋮) reserves its cell and only becomes visible on hover/active — reserving the
     space (not display:none) is what stops the row from jumping when you hover/select */
  .genesis-ds-nav-item__kebab { visibility: hidden; margin-left: auto; }
  .genesis-ds-nav-item:hover .genesis-ds-nav-item__kebab, .genesis-ds-nav-item--active .genesis-ds-nav-item__kebab { visibility: visible; }
  /* A leaf row (a chat, not a folder) keeps its label to the row's end: its controls lie
     over the label's end instead of reserving their cells beside it, so a hidden menu costs
     no text. The label gives way only to what shows - the menu on hover or selection, all
     three cells when a paperclip is there - and the row itself never moves. */
  .genesis-ds-nav-item:not([data-tree]) > .genesis-ds-nav-item__ctrls {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  }
  .genesis-ds-nav-item:not([data-tree]):hover > .genesis-ds-nav-item__label,
  .genesis-ds-nav-item--active:not([data-tree]) > .genesis-ds-nav-item__label {
    margin-right: 22px;
  }
  .genesis-ds-nav-item:not([data-tree]):has(.genesis-ds-nav-item__clip)
    > .genesis-ds-nav-item__label { margin-right: 66px; }

  /* ---- KD-Assistant sidebar collapsible section header (grey pill) ---- */
  .genesis-ds-side-head {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); margin: 0.5rem 8px 0.25rem;
    padding: 0.55rem 0.4rem 0.55rem 0.75rem; background: var(--genesis-ds-grey-t10); border-radius: var(--genesis-ds-radius-md);
    font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-gray-600);
    cursor: pointer; user-select: none; transition: background var(--genesis-ds-t-fast);
  }
  .genesis-ds-side-head:hover { background: var(--genesis-ds-grey-t16); }
  .genesis-ds-side-head > .genesis-ds-ico, .genesis-ds-side-head__ico > .genesis-ds-ico { color: var(--genesis-ds-green); width: 17px; height: 17px; }  /* bigger than inner item icons */
  /* count as a tiny white pill overlaid on the section icon's upper-right corner */
  .genesis-ds-side-head__ico, .genesis-ds-count-anchor { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
  .genesis-ds-side-head__count {
    position: absolute; top: -8px; right: -6px; min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; text-align: center; background: #fff;
    color: var(--genesis-ds-green-700); border: 1px solid var(--genesis-ds-green); border-radius: 999px;
    font-size: 7.5px; font-weight: 700; line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  }
  .genesis-ds-side-head__label { flex: 1; }
  /* + is a plain ghost button, 28px column so it lines up over a row's + */
  .genesis-ds-side-head__add {
    border: none; background: none; color: var(--genesis-ds-gray-600);
    cursor: pointer; line-height: 0; padding: 0; border-radius: var(--genesis-ds-radius-sm);
  }
  .genesis-ds-side-head__add > svg { width: 15px; height: 15px; }
  .genesis-ds-side-head__add:hover { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green); }
  /* caret is a 28px cell (aligns over a row's menu column) holding a 13px triangle */
  .genesis-ds-side-head__caret { color: var(--genesis-ds-gray-600); }
  /* The current section (it holds the selected row) is filled like the primary button.
     The rail keeps its own light marking (below). */
  .genesis-ds-sidebar:not(.is-rail) .genesis-ds-side-head.is-current {
    background: var(--genesis-ds-green); color: #fff;
  }
  .genesis-ds-sidebar:not(.is-rail) .genesis-ds-side-head.is-current:hover {
    background: var(--genesis-ds-green-600);
  }
  .genesis-ds-sidebar:not(.is-rail) .genesis-ds-side-head.is-current .genesis-ds-ico,
  .genesis-ds-sidebar:not(.is-rail) .genesis-ds-side-head.is-current .genesis-ds-side-head__add,
  .genesis-ds-sidebar:not(.is-rail) .genesis-ds-side-head.is-current .genesis-ds-side-head__caret {
    color: #fff;
  }
  .genesis-ds-sidebar:not(.is-rail) .is-current .genesis-ds-side-head__add:hover {
    background: rgba(255, 255, 255, .2); color: #fff;
  }
  .genesis-ds-step-num--muted { background: var(--genesis-ds-gray-400); }
  .genesis-ds-side-head__caret > .genesis-ds-tri { transition: transform var(--genesis-ds-t-base); }
  .genesis-ds-side-head:not(.is-collapsed) .genesis-ds-side-head__caret > .genesis-ds-tri { transform: rotate(90deg); }
  .genesis-ds-side-content.is-collapsed, .genesis-ds-subtree.is-collapsed { display: none; }

  /* ---- Full sidebar shell + collapse-to-rail (hamburger toggles) ----- */
  .genesis-ds-sidebar { width: 288px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; transition: width var(--genesis-ds-t-base); background: var(--genesis-ds-white); }
  /* sticky top block: add + search stay pinned; only the list below scrolls */
  .genesis-ds-sidebar__top { position: sticky; top: 0; z-index: 3; background: var(--genesis-ds-white); padding: 12px 8px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
  /* collapsed rail: section icons + top actions only; hide section CONTENTS (no leaking chat text) */
  .genesis-ds-sidebar.is-rail { width: 60px !important; }
  .genesis-ds-sidebar.is-rail .genesis-ds-side-content,
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head__label,
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head .genesis-ds-badge,
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head__ctrls,
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item__label,
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item__ctrls,
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item > .genesis-ds-caret,
  .genesis-ds-sidebar.is-rail .genesis-ds-btn__text,
  .genesis-ds-sidebar.is-rail .genesis-ds-search .genesis-ds-input { display: none; }
  /* rail items: simple icon on white; hover green; ONLY the selected one shows the band */
  /* no scrollbar gutter in the rail, so items centre in the full 60px like the add button */
  .genesis-ds-sidebar.is-rail .genesis-ds-side-scroll { scrollbar-gutter: auto; }
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head,
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item {
    background: transparent; border: none; box-shadow: none;
    width: 40px; height: 40px; margin: 2px auto; padding: 0; border-radius: var(--genesis-ds-radius-md);
    justify-content: center; color: var(--genesis-ds-gray-600); cursor: pointer; position: relative;
  }
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head:hover,
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item:hover { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green); }
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head > .genesis-ds-ico { width: 22px; height: 22px; color: inherit; }
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item > .genesis-ds-ico { width: 20px; height: 20px; color: inherit; }
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item--active,
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head.is-current { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green-700); }
  .genesis-ds-sidebar.is-rail .genesis-ds-nav-item--active::before,
  .genesis-ds-sidebar.is-rail .genesis-ds-side-head.is-current::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    border-radius: var(--genesis-ds-radius-md) 0 0 var(--genesis-ds-radius-md); background: var(--genesis-ds-green);
  }
  .genesis-ds-sidebar.is-rail .genesis-ds-sidebar__top { padding: 10px 0; align-items: center; }
  /* add button keeps its height (becomes a 40px icon button) */
  .genesis-ds-sidebar.is-rail .genesis-ds-btn--block { width: 40px; height: 40px; min-height: 40px; padding: 0; }
  /* search collapses to a plain magnifier icon in the rail (same style as other icons) */
  .genesis-ds-sidebar.is-rail .genesis-ds-search { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border-radius: var(--genesis-ds-radius-md); cursor: pointer; }
  .genesis-ds-sidebar.is-rail .genesis-ds-search:hover { background: var(--genesis-ds-green-t12); }
  .genesis-ds-sidebar.is-rail .genesis-ds-search__icon { position: static; transform: none; width: 20px; height: 20px; color: var(--genesis-ds-gray-600); }
  /* resize handle removed while collapsed */
  .genesis-ds-sidebar.is-rail + .genesis-ds-resizer { display: none; }

  /* ---- Sidebar resize handle (drag to set preferred width) ----------- */
  /* A two-pane splitter. Place after the panel;
     JS resizes the previous sibling. */
  .genesis-ds-resizer {
    align-self: stretch; width: 8px; flex-shrink: 0; cursor: col-resize;
    position: relative; background: transparent; touch-action: none;
  }
  /* dotted grip (distinct from a scrollbar), centred vertically */
  .genesis-ds-resizer::after {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 4px; height: 34px;
    background-image: radial-gradient(circle, var(--genesis-ds-gray-400) 1.4px, transparent 1.6px);
    background-size: 4px 7px; background-repeat: repeat-y; background-position: center;
    transition: background-image var(--genesis-ds-t-fast), height var(--genesis-ds-t-fast);
  }
  .genesis-ds-resizer:hover::after, .genesis-ds-resizer.is-dragging::after {
    height: 46px; background-image: radial-gradient(circle, var(--genesis-ds-green) 1.6px, transparent 1.8px);
  }
  /* Edge mode: pinned to the host's right edge for CSS-grid layouts (the host is a fixed
     grid track, not a flex sibling), so the handle straddles the column boundary. */
  .genesis-ds-resizer--edge {
    /* right:0 (not negative) — the host clips overflow, so the handle must sit fully inside
       its right edge to stay hittable. */
    position: absolute; top: 0; right: 0; bottom: 0; height: auto; width: 8px;
    align-self: auto; z-index: 6;
  }

  /* ---- Sidebar scroll area (styled scrollbar, as the live sidebars) --- */
  .genesis-ds-side-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
  .genesis-ds-side-scroll::-webkit-scrollbar { width: 8px; }
  .genesis-ds-side-scroll::-webkit-scrollbar-track { background: transparent; }
  .genesis-ds-side-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--genesis-ds-green) 75%, var(--genesis-ds-gray-200)); border-radius: 4px; }
  .genesis-ds-side-scroll::-webkit-scrollbar-thumb:hover { background: var(--genesis-ds-green); }
  .genesis-ds-side-scroll { scrollbar-color: color-mix(in srgb, var(--genesis-ds-green) 75%, var(--genesis-ds-gray-200)) transparent; }  /* Firefox */

  /* ---- Collapsible / accordion ---------------------------------------- */
  .genesis-ds-collapsible { border: 1px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-md); overflow: hidden; }
  .genesis-ds-collapsible + .genesis-ds-collapsible { margin-top: 0.5rem; }
  .genesis-ds-collapsible__head {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); padding: 0.65rem 0.875rem;
    background: var(--genesis-ds-gray-50); cursor: pointer; user-select: none;
    font-size: var(--genesis-ds-fs-base); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark);
    transition: background var(--genesis-ds-t-fast);
  }
  .genesis-ds-collapsible__head:hover { background: var(--genesis-ds-green-t12); }
  .genesis-ds-collapsible__head > .genesis-ds-ico:first-child { color: var(--genesis-ds-green); }
  .genesis-ds-collapsible__caret { margin-left: auto; color: var(--genesis-ds-gray-600); transition: transform var(--genesis-ds-t-base); }
  .genesis-ds-collapsible:not(.is-collapsed) .genesis-ds-collapsible__caret { transform: rotate(90deg); }
  .genesis-ds-collapsible__body { padding: 0.875rem; font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-gray-600); }
  .genesis-ds-collapsible.is-collapsed .genesis-ds-collapsible__body { display: none; }

  /* ---- Foldable section — one card per section of a page -------------
     A page of unrelated settings is a stack of these, each closed until needed. The head
     reads: caret, icon, title, a short summary of what is inside, an optional tag, and on
     the right the section's own actions, which act without opening or closing it.
     Markup: <section class="genesis-ds-fold [is-open]"><div class="genesis-ds-fold__head">
       <svg class="genesis-ds-fold__caret"/> <svg class="genesis-ds-ico"/>
       <span class="genesis-ds-fold__title"/> <span class="genesis-ds-fold__meta"/>
       <span class="genesis-ds-fold__tag"/> <span class="genesis-ds-fold__actions"/>
     </div><div class="genesis-ds-fold__body"/></section> */
  .genesis-ds-fold {
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg); box-shadow: var(--genesis-ds-shadow-sm);
  }
  .genesis-ds-fold + .genesis-ds-fold { margin-top: var(--genesis-ds-sp-4); }
  .genesis-ds-fold__head {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-3); min-height: 3.5rem;
    padding: 0.6rem 1.25rem; cursor: pointer; user-select: none;
  }
  .genesis-ds-fold__caret {
    width: 0.75rem; height: 0.75rem; flex-shrink: 0; color: var(--genesis-ds-gray-600);
    transition: transform var(--genesis-ds-t-base);
  }
  .genesis-ds-fold.is-open .genesis-ds-fold__caret { transform: rotate(90deg); }
  .genesis-ds-fold__head > .genesis-ds-ico { flex-shrink: 0; color: var(--genesis-ds-ink); }
  .genesis-ds-fold__title {
    font-size: var(--genesis-ds-fs-lg); font-weight: var(--genesis-ds-fw-semibold);
    color: var(--genesis-ds-ink); white-space: nowrap;
  }
  .genesis-ds-fold__meta {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--genesis-ds-fs-sm); color: var(--genesis-ds-gray-600);
  }
  .genesis-ds-fold__tag {
    padding: 0.15rem 0.5rem; border-radius: var(--genesis-ds-radius-sm);
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-semibold);
    text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--genesis-ds-gray-100); color: var(--genesis-ds-gray-600);
  }
  .genesis-ds-fold__tag--warning {
    background: var(--genesis-ds-warning); color: var(--genesis-ds-ink);
  }
  .genesis-ds-fold__actions {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); margin-left: auto;
    cursor: default;
  }
  .genesis-ds-fold__body { display: none; padding: 0 1.25rem 1.25rem; }
  .genesis-ds-fold.is-open .genesis-ds-fold__body { display: block; }

  /* ---- Button: link, group, chip ------------------------------------- */
  .genesis-ds-btn--link {
    background: none; border: none; box-shadow: none; padding: 0.25rem 0.25rem;
    color: var(--genesis-ds-blue); text-decoration: underline; font-weight: var(--genesis-ds-fw-medium);
  }
  .genesis-ds-btn--link:hover:not(:disabled) { color: var(--genesis-ds-blue-600); }

  .genesis-ds-btn-group { display: inline-flex; }
  .genesis-ds-btn-group > .genesis-ds-btn { border-radius: 0; margin-left: -1px; }
  .genesis-ds-btn-group > .genesis-ds-btn:first-child { border-top-left-radius: var(--genesis-ds-radius-lg); border-bottom-left-radius: var(--genesis-ds-radius-lg); margin-left: 0; }
  .genesis-ds-btn-group > .genesis-ds-btn:last-child  { border-top-right-radius: var(--genesis-ds-radius-lg); border-bottom-right-radius: var(--genesis-ds-radius-lg); }
  /* selected segment in a button-group */
  .genesis-ds-btn-group > .genesis-ds-btn.is-active { background: var(--genesis-ds-green); border-color: var(--genesis-ds-green); color: #fff; z-index: 1; }

  /* Chip button — small pill toggle/action (kd-chat "Compact/Continue").
     The optional leading icon may be a JS-driven SVG (e.g. context gauge). */
  .genesis-ds-btn--chip {
    display: inline-flex; align-items: center;   /* robust vertical centering of gauge + label */
    min-height: 1.5rem;                           /* slim (24px) — de-emphasised; still clears the content */
    padding: var(--genesis-ds-chip-pad-y) var(--genesis-ds-chip-pad-x); font-size: var(--genesis-ds-fs-xs); line-height: 1.2;
    border-radius: var(--genesis-ds-radius-pill);
    background: transparent; color: var(--genesis-ds-gray-600); border-color: var(--genesis-ds-gray-200);
    box-shadow: none;
    font-weight: var(--genesis-ds-fw-normal, 400);   /* chip pills are not bold (override .genesis-ds-btn semibold) */
  }
  .genesis-ds-btn--chip > svg { flex-shrink: 0; }     /* gauge keeps its size; stays centred, never clipped by the border */
  .genesis-ds-btn--chip:hover:not(:disabled) { color: var(--genesis-ds-green); border-color: var(--genesis-ds-green); background: var(--genesis-ds-green-t08); }
  .genesis-ds-btn--chip.is-active { color: var(--genesis-ds-green); border-color: var(--genesis-ds-green); }

  /* ---- Form: select, checkbox, radio, input-group -------------------- */
  .genesis-ds-select {
    width: 100%; padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-family: var(--genesis-ds-font); font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
    background-color: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2358595B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 16px;
    transition: border-color var(--genesis-ds-t-base), box-shadow var(--genesis-ds-t-base);
  }
  .genesis-ds-select:focus { outline: none; border-color: var(--genesis-ds-green); box-shadow: none; }
  /* best-effort brand for the native option list (Firefox honours; WebKit is OS-controlled) */
  .genesis-ds-select option { font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink); background: var(--genesis-ds-white); }
  .genesis-ds-select option:checked { background: var(--genesis-ds-green-t22); color: var(--genesis-ds-ink); }

  /* ---- Custom dropdown — branded list so the value and options are the
     SAME size/style (a native <select>'s option list is OS-rendered and
     cannot be size-matched; use this when that matters). ---------------- */
  .genesis-ds-dropdown { position: relative; display: inline-block; width: 100%; }
  .genesis-ds-dropdown__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--genesis-ds-sp-2);
    padding: 0.625rem 0.875rem; font-family: var(--genesis-ds-font); font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-lg);
    cursor: pointer; text-align: left;
  }
  .genesis-ds-dropdown__toggle:hover, .genesis-ds-dropdown.is-open .genesis-ds-dropdown__toggle { border-color: var(--genesis-ds-green); }
  .genesis-ds-dropdown__toggle > svg { width: 16px; height: 16px; color: var(--genesis-ds-gray-600); flex-shrink: 0; transition: transform var(--genesis-ds-t-base); }
  .genesis-ds-dropdown.is-open .genesis-ds-dropdown__toggle > svg { transform: rotate(180deg); }
  .genesis-ds-dropdown__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--genesis-ds-z-dropdown);
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-md);
    box-shadow: var(--genesis-ds-shadow-lg); padding: 4px 0; max-height: 260px; overflow-y: auto; display: none;
  }
  .genesis-ds-dropdown.is-open .genesis-ds-dropdown__list { display: block; }
  .genesis-ds-dropdown__opt {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); width: 100%;
    padding: 0.55rem 0.875rem; font-family: var(--genesis-ds-font); font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
    background: none; border: none; text-align: left; cursor: pointer;
  }
  .genesis-ds-dropdown__opt:hover { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green-700); }
  .genesis-ds-dropdown__opt.is-selected { background: var(--genesis-ds-green-t12); font-weight: var(--genesis-ds-fw-semibold); }
  .genesis-ds-dropdown__opt.is-selected::after { content: "✓"; margin-left: auto; color: var(--genesis-ds-green); }

  .genesis-ds-check { display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-2); cursor: pointer; font-size: var(--genesis-ds-fs-base); }
  .genesis-ds-check input {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0;
    border: 2px solid var(--genesis-ds-gray-200); background: #fff; cursor: pointer; position: relative;
    transition: border-color var(--genesis-ds-t-fast), background var(--genesis-ds-t-fast);
  }
  .genesis-ds-check input[type="checkbox"] { border-radius: 4px; }
  .genesis-ds-check input[type="radio"]    { border-radius: 50%; }
  .genesis-ds-check input:hover   { border-color: var(--genesis-ds-green); }
  .genesis-ds-check input:checked { background: var(--genesis-ds-green); border-color: var(--genesis-ds-green); }
  .genesis-ds-check input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .genesis-ds-check input[type="radio"]:checked::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    border-radius: 50%; background: #fff; transform: translate(-50%,-50%);
  }
  .genesis-ds-check input:focus-visible { outline: none; box-shadow: var(--genesis-ds-ring); }

  .genesis-ds-input-group { display: flex; align-items: stretch; }
  .genesis-ds-input-group > .genesis-ds-input { border-radius: 0; }
  .genesis-ds-input-group > .genesis-ds-input:not(:first-child) { margin-left: -1px; }
  .genesis-ds-input-group > .genesis-ds-input:first-child { border-top-left-radius: var(--genesis-ds-radius-md); border-bottom-left-radius: var(--genesis-ds-radius-md); }
  .genesis-ds-input-group > .genesis-ds-input:last-child  { border-top-right-radius: var(--genesis-ds-radius-md); border-bottom-right-radius: var(--genesis-ds-radius-md); }
  .genesis-ds-input-group__addon {
    display: inline-flex; align-items: center; padding: 0 0.75rem;
    background: var(--genesis-ds-gray-50); border: 1px solid var(--genesis-ds-gray-200);
    color: var(--genesis-ds-gray-600); font-size: var(--genesis-ds-fs-sm); white-space: nowrap;
  }
  .genesis-ds-input-group__addon:first-child { border-top-left-radius: var(--genesis-ds-radius-md); border-bottom-left-radius: var(--genesis-ds-radius-md); }
  .genesis-ds-input-group__addon:last-child  { border-top-right-radius: var(--genesis-ds-radius-md); border-bottom-right-radius: var(--genesis-ds-radius-md); margin-left: -1px; }

  /* ---- Toggle switch (iOS-style, optional centered label) ------------ */
  .genesis-ds-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
  .genesis-ds-toggle--labeled { width: 72px; height: 28px; }
  .genesis-ds-toggle input { opacity: 0; width: 0; height: 0; }
  .genesis-ds-toggle__slider {
    position: absolute; inset: 0; background: var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-pill); transition: background var(--genesis-ds-t-base);
    display: flex; align-items: center; justify-content: center;
  }
  .genesis-ds-toggle__slider::before {
    content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform var(--genesis-ds-t-base);
    box-shadow: var(--genesis-ds-shadow-sm);
  }
  .genesis-ds-toggle--labeled .genesis-ds-toggle__slider::before { height: 22px; width: 22px; }
  .genesis-ds-toggle__text { font-size: 11px; font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-gray-600); transition: color var(--genesis-ds-t-base); }
  .genesis-ds-toggle input:checked + .genesis-ds-toggle__slider { background: var(--genesis-ds-green); }
  .genesis-ds-toggle input:checked + .genesis-ds-toggle__slider::before { transform: translateX(20px); }
  .genesis-ds-toggle--labeled input:checked + .genesis-ds-toggle__slider::before { transform: translateX(44px); }
  .genesis-ds-toggle input:checked + .genesis-ds-toggle__slider .genesis-ds-toggle__text { color: #fff; }
  .genesis-ds-toggle input:focus-visible + .genesis-ds-toggle__slider { box-shadow: var(--genesis-ds-ring); }

  /* ---- Status pill + status dot -------------------------------------- */
  .genesis-ds-status {
    display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-1);
    padding: 0.15rem 0.6rem; border-radius: var(--genesis-ds-radius-pill);
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-semibold); white-space: nowrap;
    background: var(--genesis-ds-neutral-bg); color: var(--genesis-ds-neutral-fg);
  }
  .genesis-ds-status--info    { background: var(--genesis-ds-info-bg);    color: var(--genesis-ds-info-fg); }
  .genesis-ds-status--running { background: var(--genesis-ds-info-bg);    color: var(--genesis-ds-info-fg); }
  .genesis-ds-status--success,
  .genesis-ds-status--done    { background: var(--genesis-ds-success-bg); color: var(--genesis-ds-success-fg); }
  .genesis-ds-status--warning,
  .genesis-ds-status--pending { background: var(--genesis-ds-warning-bg); color: var(--genesis-ds-warning-fg); }
  .genesis-ds-status--danger,
  .genesis-ds-status--error   { background: var(--genesis-ds-danger-bg);  color: var(--genesis-ds-danger-fg); }

  .genesis-ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--genesis-ds-gray-400); display: inline-block; flex-shrink: 0; vertical-align: middle; position: relative; top: -1px; }
  .genesis-ds-dot--online, .genesis-ds-dot--success, .genesis-ds-dot--healthy { background: var(--genesis-ds-success); }
  .genesis-ds-dot--offline, .genesis-ds-dot--danger, .genesis-ds-dot--error   { background: var(--genesis-ds-danger); }
  .genesis-ds-dot--warning { background: var(--genesis-ds-warning); }

  /* ---- Alert / banner (inline, optional trailing action) ------------- */
  .genesis-ds-alert {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-3);
    padding: 0.75rem 1rem; border-radius: var(--genesis-ds-radius-lg);
    font-size: var(--genesis-ds-fs-base);
    background: var(--genesis-ds-info-bg); border: 1px solid var(--genesis-ds-info-border); color: var(--genesis-ds-info-fg);
  }
  .genesis-ds-alert--success { background: var(--genesis-ds-success-bg); border-color: var(--genesis-ds-success-border); color: var(--genesis-ds-success-fg); }
  .genesis-ds-alert--warning { background: var(--genesis-ds-warning-bg); border-color: var(--genesis-ds-warning-border); color: var(--genesis-ds-warning-fg); }
  .genesis-ds-alert--danger  { background: var(--genesis-ds-danger-bg);  border-color: var(--genesis-ds-danger-border);  color: var(--genesis-ds-danger-fg); }
  .genesis-ds-alert__action { margin-left: auto; flex-shrink: 0; }

  /* ---- Toast (stacked notifications) --------------------------------- */
  .genesis-ds-toast-container {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--genesis-ds-z-toast);
    display: flex; flex-direction: column; gap: var(--genesis-ds-sp-2); pointer-events: none;
  }
  .genesis-ds-toast {
    pointer-events: auto; display: flex; align-items: center; gap: var(--genesis-ds-sp-3);
    min-width: 220px; max-width: 380px; padding: 0.6rem 1rem;
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    border-left: 3px solid var(--genesis-ds-green); border-radius: var(--genesis-ds-radius-md);
    box-shadow: var(--genesis-ds-shadow-lg); font-size: var(--genesis-ds-fs-sm); color: var(--genesis-ds-ink);
    animation: genesis-ds-toast-in var(--genesis-ds-t-base);
  }
  /* Post-action confirmations: solid strong colour + white text (like our buttons).
     Auto-dismiss after a few seconds; the close button dismisses earlier. */
  .genesis-ds-toast--success, .genesis-ds-toast--warning, .genesis-ds-toast--danger, .genesis-ds-toast--info {
    color: #fff; border: none; border-left: none;
  }
  .genesis-ds-toast--success { background: var(--genesis-ds-success); }
  .genesis-ds-toast--warning { background: var(--genesis-ds-warning); }
  .genesis-ds-toast--danger  { background: var(--genesis-ds-danger); }
  .genesis-ds-toast--info    { background: var(--genesis-ds-info); }
  .genesis-ds-toast--success .genesis-ds-ico, .genesis-ds-toast--warning .genesis-ds-ico,
  .genesis-ds-toast--danger .genesis-ds-ico, .genesis-ds-toast--info .genesis-ds-ico { color: #fff; }
  .genesis-ds-toast__close { margin-left: auto; background: none; border: none; cursor: pointer; color: currentColor; opacity: .85; font-size: 1rem; line-height: 1; padding: 0; }
  .genesis-ds-toast__close:hover { opacity: 1; }
  @keyframes genesis-ds-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

  /* ---- Loading dots (typing indicator) ------------------------------- */
  .genesis-ds-loading-dots { display: inline-flex; gap: 4px; align-items: center; }
  .genesis-ds-loading-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--genesis-ds-blue);
    animation: genesis-ds-bounce 1.4s infinite ease-in-out both;
  }
  .genesis-ds-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
  .genesis-ds-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
  @keyframes genesis-ds-bounce { 0%,80%,100% { transform: scale(.4); opacity: .3; } 40% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-loading-dots span { animation: none; opacity: .6; } }

  /* ---- Thinkwave — KD-Assistant animated "thinking" sine ------------- */
  .genesis-ds-thinkwave { display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-2); color: var(--genesis-ds-green); font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-thinkwave__svg { width: 48px; height: 20px; overflow: hidden; }
  .genesis-ds-thinkwave__wave {
    fill: none; stroke: var(--genesis-ds-green); stroke-width: 2; stroke-linecap: round;
    animation: genesis-ds-thinkwave 1s linear infinite;
  }
  @keyframes genesis-ds-thinkwave { from { transform: translateX(0); } to { transform: translateX(-32px); } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-thinkwave__wave { animation: none; } }
  /* block form: wave on the left, text column (main + sub) on the right */
  .genesis-ds-thinkwave--block { flex-direction: row; align-items: center; gap: 0.6rem; }
  .genesis-ds-thinkwave__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .genesis-ds-thinkwave__main { font-size: var(--genesis-ds-fs-md); font-weight: 400; color: var(--genesis-ds-ink); }
  .genesis-ds-thinkwave__reason { font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600); font-style: italic; }

  /* ---- Mini action toolbar (timestamp + copy + excel above a data block) */
  .genesis-ds-toolbar { display: flex; align-items: center; gap: var(--genesis-ds-sp-1); }
  .genesis-ds-toolbar__time { font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-400); margin-right: 0.25rem; white-space: nowrap; }
  /* frameless (no border) — matches live section toolbars */
  .genesis-ds-toolbar__btn {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--genesis-ds-radius-sm);
    background: transparent; color: var(--genesis-ds-gray-600); cursor: pointer;
    transition: color var(--genesis-ds-t-fast), background var(--genesis-ds-t-fast);
  }
  .genesis-ds-toolbar__btn > svg { width: 15px; height: 15px; }
  .genesis-ds-toolbar__btn:hover { color: var(--genesis-ds-green); background: var(--genesis-ds-green-t12); }
  /* fixed-green attention variant (e.g. an export action) */
  .genesis-ds-toolbar__btn--green { color: var(--genesis-ds-green); }
  .genesis-ds-toolbar__btn--green:hover { background: var(--genesis-ds-green-t16); color: var(--genesis-ds-green-700); }

  /* ---- Modal (overlay + header/body/footer/close) -------------------- */
  .genesis-ds-modal-overlay {
    position: fixed; inset: 0; z-index: var(--genesis-ds-z-modal);
    background: rgba(36,55,70,.45); display: none;
    align-items: center; justify-content: center; padding: 1rem; overflow-y: auto;
  }
  .genesis-ds-modal-overlay.is-open { display: flex; }
  .genesis-ds-modal {
    background: var(--genesis-ds-white); border-radius: var(--genesis-ds-radius-lg);
    box-shadow: var(--genesis-ds-shadow-xl); width: 100%; max-width: 560px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
    animation: genesis-ds-modal-in var(--genesis-ds-t-base);
  }
  .genesis-ds-modal--wide { max-width: 760px; }
  @keyframes genesis-ds-modal-in { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-modal { animation: none; } }
  .genesis-ds-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--genesis-ds-gray-200); flex-shrink: 0;
    font-weight: var(--genesis-ds-fw-bold); color: var(--genesis-ds-green); font-size: var(--genesis-ds-fs-lg);
  }
  .genesis-ds-modal__close { background: none; border: none; cursor: pointer; color: var(--genesis-ds-gray-600); font-size: 1.5rem; line-height: 1; padding: 0 0.25rem; border-radius: var(--genesis-ds-radius-sm); }
  .genesis-ds-modal__close:hover { background: var(--genesis-ds-gray-100); color: var(--genesis-ds-ink); }
  .genesis-ds-modal__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
  .genesis-ds-modal__footer { display: flex; gap: var(--genesis-ds-sp-2); justify-content: flex-start; padding: 1rem 1.25rem; border-top: 1px solid var(--genesis-ds-gray-200); flex-shrink: 0; }

  /* ---- Menu / context menu (popover) --------------------------------- */
  .genesis-ds-menu {
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-md); box-shadow: var(--genesis-ds-shadow-lg);
    min-width: 180px; overflow: hidden; padding: 0.35rem; z-index: var(--genesis-ds-z-dropdown);
  }
  /* items are inset + rounded, so the highlight has a white gap around it like the sidebar */
  .genesis-ds-menu-item {
    position: relative;
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); width: 100%;
    padding: 0.5rem 0.75rem; border-radius: var(--genesis-ds-radius-sm); font-size: var(--genesis-ds-fs-base); font-family: var(--genesis-ds-font);
    color: var(--genesis-ds-ink); background: none; border: none; text-align: left; cursor: pointer;
  }
  /* hover = rounded green fill, no left band (band is for selected items only) */
  .genesis-ds-menu-item:hover { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green-700); }
  .genesis-ds-menu-item:hover > svg { color: var(--genesis-ds-green-700); }
  .genesis-ds-menu-item--danger { color: var(--genesis-ds-danger); }
  .genesis-ds-menu-item--danger:hover { background: var(--genesis-ds-danger-bg); color: var(--genesis-ds-danger); }
  .genesis-ds-menu-divider { height: 1px; background: var(--genesis-ds-gray-200); margin: 0.3rem 0.25rem; }
  /* <genesis-ds-sidebar> inline rename input + delete-confirm popover */
  .genesis-ds-nav-item__rename { height: 26px; padding: 0 6px; font-size: var(--genesis-ds-fs-sm); flex: 1; min-width: 0; }
  .genesis-ds-sidebar__confirm { min-width: 210px; padding: 10px 12px; }
  .genesis-ds-confirm__msg { font-size: var(--genesis-ds-fs-sm); color: var(--genesis-ds-ink); margin-bottom: 10px; }
  .genesis-ds-confirm__actions { display: flex; justify-content: flex-end; gap: 6px; }

  /* ---- Tabs / segmented control + filter pills ----------------------- */
  .genesis-ds-tabs {
    display: inline-flex; gap: 0.25rem; padding: 0.2rem;
    background: var(--genesis-ds-gray-50); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-md);
  }
  .genesis-ds-tab {
    padding: 0.45rem 0.9rem; border: none; background: transparent; border-radius: var(--genesis-ds-radius-sm);
    font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-medium); font-family: var(--genesis-ds-font);
    color: var(--genesis-ds-gray-600); cursor: pointer; transition: all var(--genesis-ds-t-fast);
  }
  .genesis-ds-tab:hover { color: var(--genesis-ds-ink); }
  .genesis-ds-tab.is-active { background: var(--genesis-ds-white); color: var(--genesis-ds-blue-dark); box-shadow: var(--genesis-ds-shadow-sm); font-weight: var(--genesis-ds-fw-semibold); }

  .genesis-ds-filter-pill {
    padding: 0.3rem 0.8rem; border: 1px solid var(--genesis-ds-gray-200); background: var(--genesis-ds-white);
    border-radius: var(--genesis-ds-radius-pill); font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-medium);
    font-family: var(--genesis-ds-font); color: var(--genesis-ds-gray-600); cursor: pointer; white-space: nowrap;
    transition: all var(--genesis-ds-t-fast);
  }
  .genesis-ds-filter-pill:hover { border-color: var(--genesis-ds-blue); color: var(--genesis-ds-blue); }
  .genesis-ds-filter-pill.is-active { background: var(--genesis-ds-blue-dark); border-color: var(--genesis-ds-blue-dark); color: #fff; }
  /* green variant — selects green (not blue) */
  .genesis-ds-filter-pill--green:hover:not(.is-active) { border-color: var(--genesis-ds-green); color: var(--genesis-ds-green); }
  .genesis-ds-filter-pill--green.is-active { background: var(--genesis-ds-green); border-color: var(--genesis-ds-green); color: #fff; }

  /* Segmented radio selector (e.g. a model picker) — solid green active.
     Options can be <button>s or <label> wrapping a hidden radio input. */
  .genesis-ds-segmented {
    display: inline-flex; gap: 2px; padding: 4px;
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-lg);
  }
  .genesis-ds-segmented__opt {
    display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-1);
    padding: 0.45rem 1.1rem; border: none; background: transparent; border-radius: 7px;
    font-family: var(--genesis-ds-font); font-size: var(--genesis-ds-fs-base); font-weight: var(--genesis-ds-fw-semibold);
    color: var(--genesis-ds-ink); cursor: pointer; transition: background var(--genesis-ds-t-fast), color var(--genesis-ds-t-fast);
  }
  .genesis-ds-segmented__opt:hover:not(.is-active) { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green-700); }
  .genesis-ds-segmented__opt.is-active { background: var(--genesis-ds-green); color: #fff; }
  .genesis-ds-segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }

  /* ---- Data table (sortable headers) --------------------------------- */
  .genesis-ds-table { width: 100%; border-collapse: collapse; font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-table th {
    background: var(--genesis-ds-gray-50); padding: 0.55rem 0.75rem; text-align: left;
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-gray-600);
    text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--genesis-ds-gray-200);
    white-space: nowrap;
  }
  .genesis-ds-table th[data-sort] { cursor: pointer; user-select: none; }
  .genesis-ds-table th[data-sort]:hover,
  .genesis-ds-table th[data-sort].is-asc,
  .genesis-ds-table th[data-sort].is-desc { color: var(--genesis-ds-green); }   /* green header text on hover + when sorted */
  .genesis-ds-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--genesis-ds-gray-200); }
  .genesis-ds-table tbody tr:hover td { background: var(--genesis-ds-gray-50); }

  /* ---- Stat card (KPI) ----------------------------------------------- */
  .genesis-ds-stat-card {
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg); padding: 1rem 1.25rem;
  }
  .genesis-ds-stat-card__value { font-size: var(--genesis-ds-fs-2xl); font-weight: var(--genesis-ds-fw-bold); line-height: 1; color: var(--genesis-ds-ink); }
  .genesis-ds-stat-card__value--blue  { color: var(--genesis-ds-blue); }
  .genesis-ds-stat-card__value--green { color: var(--genesis-ds-green-700); }
  .genesis-ds-stat-card__value--danger{ color: var(--genesis-ds-danger); }
  .genesis-ds-stat-card__label { margin-top: 0.35rem; font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-gray-600); text-transform: uppercase; letter-spacing: 0.05em; }

  /* ---- Progress (indeterminate) + meter (determinate) ---------------- */
  .genesis-ds-progress { height: 3px; background: var(--genesis-ds-gray-200); border-radius: 2px; overflow: hidden; }
  .genesis-ds-progress__bar { height: 100%; width: 40%; background: var(--genesis-ds-green); border-radius: 2px; animation: genesis-ds-progress-slide 1.6s ease-in-out infinite; }
  @keyframes genesis-ds-progress-slide { 0% { transform: translateX(-250%); } 100% { transform: translateX(400%); } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-progress__bar { animation: none; width: 100%; } }

  .genesis-ds-meter { height: 5px; background: var(--genesis-ds-gray-200); border-radius: 2px; overflow: hidden; }
  .genesis-ds-meter__fill { height: 100%; border-radius: 2px; background: var(--genesis-ds-green); }
  .genesis-ds-meter__fill--warning { background: var(--genesis-ds-warning); }
  .genesis-ds-meter__fill--danger  { background: var(--genesis-ds-danger); }

  /* ---- Step number marker -------------------------------------------- */
  .genesis-ds-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--genesis-ds-blue); color: #fff; font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-bold);
  }

  /* ---- Tag + removable chip ------------------------------------------ */
  .genesis-ds-tag {
    display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-1);
    padding: 0.1rem 0.45rem; border-radius: var(--genesis-ds-radius-sm);
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-medium);
    background: var(--genesis-ds-info-bg); color: var(--genesis-ds-info-fg);
  }
  .genesis-ds-chip {
    display: inline-flex; align-items: center; gap: var(--genesis-ds-sp-1);
    padding: 0.2rem 0.4rem 0.2rem 0.6rem; border-radius: var(--genesis-ds-radius-pill);
    background: var(--genesis-ds-gray-50); border: 1px solid var(--genesis-ds-gray-200);
    font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600);
  }
  .genesis-ds-chip__remove {
    width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: none; border: none; cursor: pointer;
    color: var(--genesis-ds-gray-600); line-height: 1; padding: 0;
  }
  .genesis-ds-chip__remove > svg { width: 13px; height: 13px; }
  .genesis-ds-chip__remove:hover { background: var(--genesis-ds-danger-bg); color: var(--genesis-ds-danger); }

  /* ---- Empty state --------------------------------------------------- */
  .genesis-ds-empty { text-align: center; padding: 3rem 1rem; color: var(--genesis-ds-gray-600); }
  .genesis-ds-empty__icon  { font-size: 2.5rem; margin-bottom: 0.5rem; color: var(--genesis-ds-green); }
  .genesis-ds-empty__title { font-size: var(--genesis-ds-fs-md); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-ink); margin-bottom: 0.25rem; }

  /* ---- Upload / drop zone -------------------------------------------- */
  .genesis-ds-upload {
    border: 2px dashed var(--genesis-ds-green); border-radius: var(--genesis-ds-radius-lg);
    padding: 1.5rem; text-align: center; color: var(--genesis-ds-gray-600);
    background: var(--genesis-ds-green-t08); cursor: pointer; transition: border-color var(--genesis-ds-t-base), background var(--genesis-ds-t-base);
  }
  .genesis-ds-upload__icon { color: var(--genesis-ds-green); }
  .genesis-ds-upload:hover, .genesis-ds-upload.is-dragover { border-color: var(--genesis-ds-green-600); background: var(--genesis-ds-green-t12); }

  /* ---- Disclosure caret ---------------------------------------------- */
  .genesis-ds-caret { display: inline-block; transition: transform var(--genesis-ds-t-base); font-size: 0.7em; }
  .genesis-ds-caret.is-open { transform: rotate(90deg); }

  /* ---- Gradient (shaded) button — the live Feedback pill ------------- */
  .genesis-ds-btn--gradient { background: var(--genesis-ds-gradient-blue); color: #fff; border: none; border-radius: var(--genesis-ds-radius-pill); box-shadow: 0 4px 12px rgba(67,187,199,.3); }
  .genesis-ds-btn--gradient:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(67,187,199,.4); transform: translateY(-2px); }
  .genesis-ds-btn--gradient:active:not(:disabled)  { transform: translateY(1px); box-shadow: 0 2px 6px rgba(67,187,199,.35); }  /* press animation */
  .genesis-ds-btn--gradient-green { background: var(--genesis-ds-gradient-green); }

  /* Frameless icon-only button (KD-Assistant style: bare icon, grey → green) */
  .genesis-ds-btn--plain { background: transparent; border: none; box-shadow: none; color: var(--genesis-ds-gray-600); }
  .genesis-ds-btn--plain:hover:not(:disabled) { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green); }
  .genesis-ds-btn--plain:active:not(:disabled) { transform: translateY(1px); }

  /* ---- Input hint (footer helper text under a form/composer) --------- */
  .genesis-ds-input-hint { margin-top: 0.75rem; font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600); text-align: center; line-height: 1.5; }

  /* ---- Readout box (bordered inline metric — e.g. "Context used 1%") - */
  .genesis-ds-readout {
    padding: 0.75rem 1rem; border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg); background: var(--genesis-ds-white);
    font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
  }
  .genesis-ds-readout__value { font-weight: var(--genesis-ds-fw-bold); color: var(--genesis-ds-green-700); }
  .genesis-ds-readout__muted { color: var(--genesis-ds-gray-600); }

  /* ---- App header / top bar (standard across all apps) --------------- */
  /* Redesign of the cramped per-app headers: fixed-height bar, brand mark +
     title/subtitle on the left, a cohesive action group on the right. */
  .genesis-ds-header {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-4);
    height: 64px; padding: 0 var(--genesis-ds-sp-5) 0 0;   /* no left pad — hamburger occupies the 60px rail slot */
    /* The page header is the ONE dark band, as their site header is. Everything else is
       white. Its contents are therefore light: see the block below.
       The band is the picture in --genesis-ds-header-band over its own mean tone, so the
       ends past the strip's width, and a request that fails, match it. Sized `auto 100%`:
       the strip takes the bar's height and its width follows from the picture's aspect,
       so nothing is squashed or cropped; it is drawn whole and centred. It was KD-chat's
       own rule until 2026-10-10 and moved here so every application has the same bar. */
    background-color: var(--genesis-ds-header-band-tone);
    background-image: var(--genesis-ds-header-band);
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--genesis-ds-blue-teal);
    box-shadow: var(--genesis-ds-shadow-sm);
  }
  .genesis-ds-header__brand { display: flex; align-items: center; gap: var(--genesis-ds-sp-3); min-width: 0; }
  /* The tenant's mark, an <img src="/brand/logo.svg"> placed immediately after the lead,
     which is one sidebar wide, so its left edge lands on the sidebar's right edge. The
     header's 1rem gap would push it past that edge, so the margin cancels exactly that. */
  .genesis-ds-header__mark {
    height: 38px; width: auto; display: block; flex-shrink: 0;
    margin-left: calc(-1 * var(--genesis-ds-sp-4));
  }
  /* Dark header: everything in it is light. Title full white, tagline at 78%, icons
     white with a white-tint hover, divider at 30%. */
  .genesis-ds-header .genesis-ds-header__title { color: var(--genesis-ds-white); }
  .genesis-ds-header .genesis-ds-header__tenant {
    color: color-mix(in srgb, var(--genesis-ds-white) 88%, transparent);
  }
  /* The accessed marker keeps its own foreground on the dark bar. */
  .genesis-ds-header .genesis-ds-header__tenant--accessed {
    color: var(--genesis-ds-warning-fg);
  }
  .genesis-ds-header .genesis-ds-header__subtitle {
    color: color-mix(in srgb, var(--genesis-ds-white) 78%, transparent);
  }
  .genesis-ds-header .genesis-ds-header__icon-btn { color: var(--genesis-ds-white); }
  .genesis-ds-header .genesis-ds-header__icon-btn:hover {
    background: color-mix(in srgb, var(--genesis-ds-white) 14%, transparent);
    color: var(--genesis-ds-white);
  }
  .genesis-ds-header .genesis-ds-header__divider {
    background: color-mix(in srgb, var(--genesis-ds-white) 30%, transparent);
  }

  .genesis-ds-header__logo {
    width: 34px; height: 34px; border-radius: var(--genesis-ds-radius-md); flex-shrink: 0;
    background: var(--genesis-ds-green); color: #fff; font-weight: var(--genesis-ds-fw-bold); font-size: 15px;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--genesis-ds-shadow-sm);
  }
  .genesis-ds-header__titles { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .genesis-ds-header__title { font-size: var(--genesis-ds-fs-md); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .genesis-ds-header__subtitle { font-size: 0.6875rem; color: var(--genesis-ds-gray-600); white-space: nowrap; overflow: hidden; max-width: 20ch; }  /* small; keep it short (no ellipsis — developer's responsibility) */
  /* hamburger occupies a 60px slot (centres over the rail); logo/name then start at the rail's right edge */
  /* Exactly one sidebar wide, so the element after it starts on the sidebar's edge. */
  .genesis-ds-header__lead {
    display: flex; align-items: center; gap: 0; flex-shrink: 0;
    width: 288px; box-sizing: border-box;
  }
  /* hamburger centres over the 60px rail via margins — the button stays 28px so its
     hover is a rounded square, not a 60px-wide ellipse */
  .genesis-ds-header__lead > .genesis-ds-header__icon-btn:first-child { margin: 0 16px; }
  .genesis-ds-header__lead > .genesis-ds-header__brand:first-child { margin-left: 60px; }  /* PICK A: no-hamburger apps reserve the 60px slot so logo aligns everywhere */
  .genesis-ds-header__lead .genesis-ds-header__brand { margin-right: var(--genesis-ds-sp-2); }
  .genesis-ds-header__right { display: flex; align-items: center; gap: var(--genesis-ds-sp-2); }
  /* fixed right cluster: divider + gear + bell + avatar sit in the same place in every header */
  .genesis-ds-header__cluster { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
  .genesis-ds-header__cluster .genesis-ds-header__divider { margin: 0 4px 0 2px; }
  .genesis-ds-header__cluster .genesis-ds-header__avatar { margin-left: 6px; }  /* symmetrical gap before avatar */
  /* slim, uniform 28px header controls — every control aligns (ticker/separator pattern) */
  .genesis-ds-header .genesis-ds-btn, .genesis-ds-header .genesis-ds-segmented, .genesis-ds-header .genesis-ds-dropdown__toggle,
  .genesis-ds-header .genesis-ds-filter-pill, .genesis-ds-header .genesis-ds-version-pill { height: 28px; font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-header .genesis-ds-btn { padding: 0 0.7rem; }
  /* dropdown/select: zero the vertical padding so the 28px height holds (aligns with buttons) */
  .genesis-ds-header .genesis-ds-dropdown__toggle, .genesis-ds-header .genesis-ds-select { height: 28px; padding-top: 0; padding-bottom: 0; }
  .genesis-ds-header .genesis-ds-filter-pill { padding: 0 0.7rem; }
  .genesis-ds-header .genesis-ds-version-pill { padding: 0 0.6rem; }
  .genesis-ds-header .genesis-ds-header__icon-btn, .genesis-ds-header .genesis-ds-btn--icon { width: 28px; height: 28px; padding: 0; }
  .genesis-ds-header .genesis-ds-header__avatar { width: 28px; height: 28px; font-size: 11px; }
  .genesis-ds-header .genesis-ds-header__divider { height: 20px; }
  .genesis-ds-header .genesis-ds-segmented { padding: 2px; }
  .genesis-ds-header .genesis-ds-segmented__opt { padding: 0 0.7rem; height: 22px; display: inline-flex; align-items: center; font-size: var(--genesis-ds-fs-sm); }
  .genesis-ds-header__spacer { flex: 1 1 auto; }
  .genesis-ds-header__actions { display: flex; align-items: center; gap: var(--genesis-ds-sp-2); flex-shrink: 0; }
  /* compact icon action for the bar (gear/bell); pairs with .genesis-ds-header__badge */
  .genesis-ds-header__icon-btn {
    position: relative; width: 36px; height: 36px; border-radius: 50%; border: none;
    background: transparent; color: var(--genesis-ds-gray-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background var(--genesis-ds-t-fast), color var(--genesis-ds-t-fast);
  }
  .genesis-ds-header__icon-btn:hover { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green); }
  .genesis-ds-header__badge {
    position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
    background: var(--genesis-ds-danger); color: #fff; font-size: 9px; font-weight: var(--genesis-ds-fw-bold);
    border-radius: var(--genesis-ds-radius-pill); display: flex; align-items: center; justify-content: center; line-height: 1;
  }
  .genesis-ds-header__avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--genesis-ds-blue); color: #fff; font-size: 12px; font-weight: var(--genesis-ds-fw-semibold);
    display: flex; align-items: center; justify-content: center; text-transform: uppercase; cursor: pointer;
  }
  .genesis-ds-header__divider { width: 1px; height: 24px; background: var(--genesis-ds-gray-200); margin: 0 0.25rem; }
  /* The company the signed-in person is acting in, beside the avatar. It is the fourth
     term of the identity contract rendered and not a lookup of its own, so it cannot
     disagree with the tenant the request was served under - which is what makes a wrong
     tenant something noticed rather than discovered. Empty until identity arrives, and
     hidden while empty rather than holding a blank gap. */
  .genesis-ds-header__tenant {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0;
    font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-semibold);
  }
  .genesis-ds-header__tenant[hidden] { display: none; }
  .genesis-ds-header__tenant .genesis-ds-ico { width: 18px; height: 18px; flex-shrink: 0; }
  /* A firm's own mark, in place of the house and the name. On a white plate, because a
     mark is drawn for paper and the header is dark - a grey wordmark straight on the bar
     would all but disappear. */
  .genesis-ds-header__tenant-logo {
    display: block; height: 30px; width: auto; max-width: 220px;
    padding: 4px 10px; background: var(--genesis-ds-white);
    border-radius: var(--genesis-ds-radius-md);
  }
  .genesis-ds-header__tenant-logo[hidden], .genesis-ds-header__tenant .genesis-ds-ico[hidden],
  .genesis-ds-header__tenant-name[hidden] { display: none; }
  .genesis-ds-header__tenant-name {
    max-width: 28ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* A platform administrator acting in somebody's context. Marked in the warning colour
     rather than the brand's, because it is a state and not a decoration - and the
     functional colours are platform-fixed, so a tenant cannot recolour it away. */
  .genesis-ds-header__tenant--accessed {
    padding: 2px 8px; border-radius: var(--genesis-ds-radius-pill);
    background: var(--genesis-ds-warning-bg); color: var(--genesis-ds-warning-fg);
    max-width: 44ch;
  }
  /* Back-to-Dashboard chevron (plain, bigger, after the app name) */
  .genesis-ds-header__back {
    margin-left: 0.6rem; flex-shrink: 0; padding: 0 6px;
    border: none; background: transparent; color: var(--genesis-ds-gray-600); cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: var(--genesis-ds-radius-md);
    transition: color var(--genesis-ds-t-fast), background var(--genesis-ds-t-fast);
  }
  /* tall, slim chevron — height matches the title + subtitle stack */
  .genesis-ds-header__back > svg { width: 20px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .genesis-ds-header__back:hover { color: var(--genesis-ds-green); background: var(--genesis-ds-green-t12); }

  /* ---- App logo marks — two treatments -------------------------------- */
  /* Button treatment = .genesis-ds-header__logo (white icon on brand-green square).
     Card treatment = green icon on white, larger, refined thin stroke. */
  .genesis-ds-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .genesis-ds-logo--card {
    width: 64px; height: 64px; border-radius: var(--genesis-ds-radius-lg);
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200); box-shadow: var(--genesis-ds-shadow-sm);
    color: var(--genesis-ds-green);
  }
  .genesis-ds-logo--card > svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

  /* ---- Version pill (app + version ticker) --------------------------- */
  .genesis-ds-version-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.7rem; border-radius: var(--genesis-ds-radius-pill);
    background: var(--genesis-ds-white); border: 1px solid var(--genesis-ds-gray-200);
    box-shadow: var(--genesis-ds-shadow-sm);
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-gray-600);
    white-space: nowrap;
  }
  .genesis-ds-version-pill__ver { color: var(--genesis-ds-green-700); font-weight: var(--genesis-ds-fw-semibold); }
  .genesis-ds-version-pill--fixed { position: fixed; bottom: 1rem; left: 1rem; z-index: var(--genesis-ds-z-dropdown); }

  /* ---- Data / entity card -------------------------------------------- */
  /* Selectable card: title + status line (dot + text) + muted meta footer.
     Hover lifts + green border; --active green tint; --error red tint. */
  .genesis-ds-data-card {
    padding: 0.75rem 1rem; border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-md); background: var(--genesis-ds-white); cursor: pointer;
    transition: border-color var(--genesis-ds-t-base), box-shadow var(--genesis-ds-t-base), transform var(--genesis-ds-t-fast);
  }
  .genesis-ds-data-card:hover { border-color: var(--genesis-ds-green); transform: translateY(-1px); box-shadow: var(--genesis-ds-shadow-md); }
  .genesis-ds-data-card--active { border-color: var(--genesis-ds-green); background: var(--genesis-ds-green-t12); }
  .genesis-ds-data-card--error  { border-color: var(--genesis-ds-danger); background: rgba(231,76,60,.05); }
  .genesis-ds-data-card__title  { font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-ink); display: block; margin-bottom: 0.25rem; }
  .genesis-ds-data-card__status { font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600); display: flex; align-items: center; gap: 0.35rem; }
  .genesis-ds-data-card__meta   { font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-400); text-align: right; margin-top: 0.4rem; }

  /* ---- Hint / suggestion card — hover-reveal copy --------------- */
  .genesis-ds-hint-card {
    position: relative; padding: 0.75rem 0.95rem;
    background: var(--genesis-ds-gray-50); border: 1px solid var(--genesis-ds-gray-200);
    border-radius: var(--genesis-ds-radius-lg); cursor: pointer;
    transition: border-color var(--genesis-ds-t-base), background var(--genesis-ds-t-base);
  }
  .genesis-ds-hint-card:hover { background: var(--genesis-ds-white); border-color: var(--genesis-ds-green); }
  .genesis-ds-hint-card__title { font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-ink); margin-bottom: 0.5rem; padding-right: 1.6rem; }
  .genesis-ds-hint-card__desc  { font-size: var(--genesis-ds-fs-sm); color: var(--genesis-ds-gray-600); line-height: 1.5; }
  .genesis-ds-hint-card__copy {
    position: absolute; top: 0.5rem; right: 0.5rem; width: 1.6rem; height: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--genesis-ds-radius-md);
    background: transparent; color: var(--genesis-ds-gray-600); cursor: pointer; opacity: 0;
    transition: opacity var(--genesis-ds-t-base), background var(--genesis-ds-t-base), color var(--genesis-ds-t-base);
  }
  .genesis-ds-hint-card:hover .genesis-ds-hint-card__copy, .genesis-ds-hint-card__copy:focus-visible { opacity: 0.65; }
  .genesis-ds-hint-card__copy:hover { opacity: 1; background: var(--genesis-ds-white); border-color: var(--genesis-ds-gray-200); color: var(--genesis-ds-green); }
  .genesis-ds-hint-card__copy.is-copied { opacity: 1; color: var(--genesis-ds-green); }

  /* ---- Panel section header (uppercase label + add) ------------------ */
  .genesis-ds-panel-head {
    display: flex; align-items: center; gap: var(--genesis-ds-sp-2); padding: 0.6rem 1rem;
    background: var(--genesis-ds-gray-50); border-bottom: 1px solid var(--genesis-ds-gray-200);
    font-size: 11px; font-weight: var(--genesis-ds-fw-semibold); letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--genesis-ds-gray-600);
  }
  .genesis-ds-panel-head__add {
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--genesis-ds-gray-200); background: var(--genesis-ds-white); color: var(--genesis-ds-gray-600);
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0;
  }
  .genesis-ds-panel-head__add > svg { width: 15px; height: 15px; display: block; }
  .genesis-ds-panel-head__add:hover { background: var(--genesis-ds-green); border-color: var(--genesis-ds-green); color: #fff; }

  .genesis-ds-subhead { font-size: var(--genesis-ds-fs-base); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-ink); margin: 0.5rem 0; }

  /* ---- File / folder row (leading icon + name + trailing status) ----- */
  .genesis-ds-file-row {
    position: relative;
    display: flex; align-items: center; gap: var(--genesis-ds-sp-3);
    padding: 0.5rem 0.75rem; border-radius: var(--genesis-ds-radius-md);
    background: var(--genesis-ds-gray-50); font-size: var(--genesis-ds-fs-base); color: var(--genesis-ds-ink);
    cursor: pointer; transition: background var(--genesis-ds-t-fast);
  }
  .genesis-ds-file-row:hover { background: var(--genesis-ds-green-t12); }
  /* same green rounded band selector as the sidebar */
  .genesis-ds-file-row--active { background: var(--genesis-ds-green-t12); font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark); }
  /* file-row active band: see shared selection-accent rule above */
  .genesis-ds-file-row__icon { color: var(--genesis-ds-green); flex-shrink: 0; display: flex; align-items: center; }
  .genesis-ds-file-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .genesis-ds-file-row__check { color: var(--genesis-ds-green); flex-shrink: 0; }

  /* ---- Collapsed sidebar rail ---------------------------------------- */
  .genesis-ds-rail {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 60px; padding: 10px 0; background: var(--genesis-ds-white); border-right: 1px solid var(--genesis-ds-gray-200);
  }
  .genesis-ds-rail__add {
    width: 40px; height: 40px; border-radius: var(--genesis-ds-radius-md); flex-shrink: 0;
    background: var(--genesis-ds-green); color: #fff; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--genesis-ds-shadow-sm); transition: background var(--genesis-ds-t-base);
  }
  .genesis-ds-rail__add:hover { background: var(--genesis-ds-green-600); }
  .genesis-ds-rail__item {
    width: 40px; height: 40px; border-radius: var(--genesis-ds-radius-md); position: relative; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: var(--genesis-ds-gray-600); cursor: pointer;
    transition: background var(--genesis-ds-t-fast), color var(--genesis-ds-t-fast);
  }
  .genesis-ds-rail__item:hover { background: var(--genesis-ds-green-t12); color: var(--genesis-ds-green); }
  .genesis-ds-rail__item.is-active { background: var(--genesis-ds-green-t14); color: var(--genesis-ds-green-700); }
  /* rail active band: see shared selection-accent rule above */

  /* ---- Sort chip (Date ↓ / Name ↕) ----------------------------------- */
  .genesis-ds-sort {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.55rem; border: 1px solid var(--genesis-ds-gray-200); background: var(--genesis-ds-white);
    border-radius: var(--genesis-ds-radius-sm); font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-medium);
    font-family: var(--genesis-ds-font); color: var(--genesis-ds-gray-600); cursor: pointer; transition: all var(--genesis-ds-t-fast);
  }
  .genesis-ds-sort:hover { border-color: var(--genesis-ds-blue); color: var(--genesis-ds-blue); }
  .genesis-ds-sort.is-asc, .genesis-ds-sort.is-desc { background: var(--genesis-ds-blue-dark); border-color: var(--genesis-ds-blue-dark); color: #fff; }
  /* SVG sort indicator — one uniform size, vertically centred for single & dual */
  .genesis-ds-sortind { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px; color: var(--genesis-ds-gray-400); }
  .genesis-ds-sortind > svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }  /* scales with header font */
  .genesis-ds-sortind.is-sorted { color: var(--genesis-ds-green); }
  .genesis-ds-sortind.is-sorted > svg { stroke-width: 3.2; }  /* selected direction bold */
  .genesis-ds-sort.is-asc .genesis-ds-sortind, .genesis-ds-sort.is-desc .genesis-ds-sortind { color: #fff; }
  /* Collapsible sort bar — a row of .genesis-ds-sort pills the search caret shows/hides. Applies to
     ANY open section (chat tree, sessions, …). `.is-collapsed` hides it; the app toggles it. */
  .genesis-ds-sortbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }   /* horizontal inset from the container (like .genesis-ds-search), top gap below it */
  .genesis-ds-sortbar.is-collapsed { display: none; }

  /* ---- List item (session row) --------------------------------------- */
  /* Status dot + title, hover-reveal action icons, split meta line. */
  /* Dense session list — flat full-width rows with a divider + green left band on
     the selected row (a full-width band, not a rounded card). */
  .genesis-ds-list-item { position: relative; padding: 0.5rem 0.75rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--genesis-ds-gray-200); cursor: pointer; transition: background var(--genesis-ds-t-fast), border-color var(--genesis-ds-t-fast); }
  .genesis-ds-list-item:last-child { border-bottom: none; }
  .genesis-ds-list-item:hover { background: var(--genesis-ds-green-t12); }
  .genesis-ds-list-item--active { background: var(--genesis-ds-green-t14); border-left-color: var(--genesis-ds-green); }
  .genesis-ds-list-item__title { display: flex; align-items: center; gap: 0.4rem; font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-ink); font-size: var(--genesis-ds-fs-sm); }  /* dense session list — 13px/500 like the app */
  .genesis-ds-list-item__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .genesis-ds-list-item__actions { display: flex; gap: 0.5rem; margin-left: auto; padding-left: 0.4rem; flex-shrink: 0; color: var(--genesis-ds-gray-400); }
  .genesis-ds-list-item__actions button { background: none; border: none; cursor: pointer; color: inherit; padding: 0; font-size: 0.9rem; line-height: 1; }
  .genesis-ds-list-item__actions button:hover { color: var(--genesis-ds-ink); }
  .genesis-ds-list-item__meta { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.2rem; font-size: var(--genesis-ds-text-caption-size); color: var(--genesis-ds-gray-600); }  /* dense meta — 11px like the app */
  .genesis-ds-list-item__meta > span:last-child { flex-shrink: 0; }        /* metrics/perf column never wraps */
  .genesis-ds-list-item__meta--sub { margin-top: 0.05rem; color: var(--genesis-ds-gray-400); }  /* row 2 (date ┆ perf) dimmer, like the original */
  /* session-row extras */
  .genesis-ds-list-item__owner { font-weight: 700; color: var(--genesis-ds-blue); }
  .genesis-ds-list-item__req { color: var(--genesis-ds-gray-400); }
  .genesis-ds-dot--muted { background: var(--genesis-ds-gray-400); }
  @keyframes genesis-ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .genesis-ds-dot.is-pulse { animation: genesis-ds-pulse 1.2s ease-in-out infinite; }
  .genesis-ds-list-empty { padding: 16px 4px; color: var(--genesis-ds-gray-500); font-size: var(--genesis-ds-fs-sm); display: flex; align-items: center; gap: 8px; }
  .genesis-ds-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
  /* View-switcher nav items sit inside .genesis-ds-sidebar__top (already padded 8px), so drop their
     own 8px side margin to avoid a doubled 16px inset — align them to the 8px standard. */
  .genesis-ds-sidebar__nav .genesis-ds-nav-item { margin: 0; }
  /* Sessions block: inset the content 8px so search / sort / filter / rows share the SAME
     left/right edge as the New button, section-head and nav — matching the kd-chat standard. */
  .genesis-ds-side-content--sess { padding: 0 8px; }
  /* disabled (protected) menu item */
  .genesis-ds-menu-item[disabled] { opacity: 0.45; pointer-events: none; }
  .genesis-ds-menu-item__note { color: var(--genesis-ds-gray-400); font-size: 11px; margin-left: 4px; }

  /* ---- Chat message (user / assistant / error) ----------------------- */
  /* Faithful to the live KD-Assistant bubble: 40px avatar, name + timestamp +
     copy header, content band with a 3px left accent on a tinted surface. */
  .genesis-ds-message { margin-bottom: 1.5rem; }
  .genesis-ds-message__header { display: flex; align-items: center; gap: var(--genesis-ds-sp-2); margin-bottom: var(--genesis-ds-sp-2); }
  .genesis-ds-message__header-right { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
  .genesis-ds-message__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: var(--genesis-ds-fw-bold); font-size: 20px;
    text-transform: uppercase; box-shadow: var(--genesis-ds-shadow-sm);
  }
  .genesis-ds-message__avatar--initials { font-size: 13px; font-weight: var(--genesis-ds-fw-semibold); }
  .genesis-ds-message__role { font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-gray-600); font-size: var(--genesis-ds-fs-base); }
  .genesis-ds-message__timestamp { font-size: 0.7rem; color: var(--genesis-ds-gray-400); white-space: nowrap; }
  .genesis-ds-message__copy {
    background: transparent; border: none; color: var(--genesis-ds-gray-600); cursor: pointer;
    padding: 0.25rem; border-radius: var(--genesis-ds-radius-sm);
    display: flex; align-items: center; justify-content: center; opacity: .6;
    transition: background var(--genesis-ds-t-base), opacity var(--genesis-ds-t-base);
  }
  .genesis-ds-message__copy:hover { background: var(--genesis-ds-gray-100); opacity: 1; }
  .genesis-ds-message__content { padding: 1rem 1.25rem; font-size: 15px; line-height: 1.6; border-radius: var(--genesis-ds-radius-lg); }
  .genesis-ds-message--user      .genesis-ds-message__avatar  { background: var(--genesis-ds-blue); }
  /* The user edge is the dark teal, not the avatar's: against a card this deep the
     avatar tone all but vanished into it. */
  .genesis-ds-message--user      .genesis-ds-message__content { background: var(--genesis-ds-chat-user-bg); border-left: 3px solid var(--genesis-ds-blue-700); }
  .genesis-ds-message--assistant .genesis-ds-message__avatar  { background: var(--genesis-ds-green); }
  .genesis-ds-message--assistant .genesis-ds-message__content { background: var(--genesis-ds-chat-assistant-bg); border-left: 3px solid var(--genesis-ds-green); }
  .genesis-ds-message--error     .genesis-ds-message__avatar  { background: var(--genesis-ds-danger); }
  .genesis-ds-message--error     .genesis-ds-message__content { background: var(--genesis-ds-danger-bg); border-left: 3px solid var(--genesis-ds-danger); color: var(--genesis-ds-danger-fg); }

  /* ==================================================================
     ICONS — one styled stroke set (black/dark-grey, currentColor).
     NO emoji, NO multicolour OS glyphs. Grey by default, green on hover
     when interactive. Size via width/height or font-size (1em-relative).
     ================================================================== */
  .genesis-ds-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .genesis-ds-ico--sm { width: 1em; height: 1em; }
  .genesis-ds-tri { width: 13px; height: 13px; display: inline-block; fill: currentColor; stroke: none; flex-shrink: 0; }
  .genesis-ds-btn--icon > svg, .genesis-ds-panel-head__add > svg, .genesis-ds-header__icon-btn > svg { display: block; }
  /* +/kebab glyph centering fix: rely on SVG (perfect centring) not font glyphs */
  .genesis-ds-rail__add { line-height: 0; font-size: 0; }
  .genesis-ds-rail__add > svg { width: 22px; height: 22px; display: block; }

  /* ---- Application card (UX Dashboard) — grid + list, states, type ---- */
  .genesis-ds-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
  .genesis-ds-app-card {
    position: relative; display: block; text-align: center; text-decoration: none; color: inherit;
    background: var(--genesis-ds-white); border: 2px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-lg);
    padding: 1.25rem 1rem 1.75rem; cursor: pointer; overflow: hidden;
    transition: transform var(--genesis-ds-t-fast), box-shadow var(--genesis-ds-t-base), border-color var(--genesis-ds-t-base);
  }
  .genesis-ds-app-card:hover { transform: translateY(-2px); box-shadow: var(--genesis-ds-shadow-lg); border-color: var(--genesis-ds-green); }
  .genesis-ds-app-card--disabled { opacity: .65; cursor: not-allowed; }
  .genesis-ds-app-card--disabled:hover { transform: none; box-shadow: none; border-color: var(--genesis-ds-gray-200); }
  .genesis-ds-app-card__icon { color: var(--genesis-ds-green); margin-bottom: 0.5rem; display: flex; justify-content: center; }
  .genesis-ds-app-card__icon > svg { width: 42px; height: 42px; stroke-width: 1.25; }  /* matches the balanced logo-card stroke */
  .genesis-ds-app-card__name { font-weight: var(--genesis-ds-fw-semibold); font-size: 0.95rem; color: var(--genesis-ds-ink); margin-bottom: 0.25rem; }
  .genesis-ds-app-card__desc { font-size: var(--genesis-ds-fs-sm); color: var(--genesis-ds-gray-600); line-height: 1.35; margin-bottom: 0.6rem; }
  .genesis-ds-app-card__creator { display: inline-block; font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-green-700); background: var(--genesis-ds-green-t14); padding: 0.15rem 0.5rem; border-radius: var(--genesis-ds-radius-sm); }
  .genesis-ds-app-card__score { display: inline-block; font-size: 0.78rem; font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-green-700); background: var(--genesis-ds-gray-50); padding: 0.15rem 0.5rem; border-radius: var(--genesis-ds-radius-sm); margin-left: 0.25rem; }
  .genesis-ds-app-card__type {
    position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    font-size: var(--genesis-ds-fs-xs); font-weight: var(--genesis-ds-fw-semibold);
    border-radius: 0 0 8px 8px; background: var(--genesis-ds-gray-400);
  }
  .genesis-ds-app-card__type--mockup     { background: var(--genesis-ds-gray-600); }
  .genesis-ds-app-card__type--production { background: var(--genesis-ds-blue); }   /* was off-brand #3498DB */
  .genesis-ds-app-card__type--example    { background: var(--genesis-ds-gray-400); }
  .genesis-ds-app-card__type--prototype  { background: var(--genesis-ds-warning); }
  .genesis-ds-app-card__ribbon {
    position: absolute; top: 11px; right: -34px; transform: rotate(45deg);
    background: var(--genesis-ds-green); color: #fff; font-size: 10px; font-weight: var(--genesis-ds-fw-semibold);
    padding: 3px 40px; box-shadow: var(--genesis-ds-shadow-sm);
  }
  /* list layout */
  .genesis-ds-app-list { display: flex; flex-direction: column; gap: 0.6rem; }
  .genesis-ds-app-list .genesis-ds-app-card { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 0.85rem 1rem; }
  .genesis-ds-app-list .genesis-ds-app-card__icon { margin: 0; flex-shrink: 0; }
  .genesis-ds-app-list .genesis-ds-app-card__name { min-width: 160px; margin: 0; }
  .genesis-ds-app-list .genesis-ds-app-card__desc { flex: 1; margin: 0; }
  .genesis-ds-app-list .genesis-ds-app-card__type { position: static; width: auto; height: auto; padding: 0.15rem 0.6rem; border-radius: var(--genesis-ds-radius-pill); margin-left: auto; }

  /* ---- Parallel upload list (per-item progress + status) ------------- */
  .genesis-ds-upload-list { display: flex; flex-direction: column; gap: 0.6rem; }
  .genesis-ds-upload-item { border: 1px solid var(--genesis-ds-gray-200); border-radius: var(--genesis-ds-radius-md); padding: 0.6rem 0.8rem; }
  .genesis-ds-upload-item__head { display: flex; align-items: center; gap: var(--genesis-ds-sp-2); margin-bottom: 0.45rem; }
  .genesis-ds-upload-item__name { flex: 1; min-width: 0; font-size: var(--genesis-ds-fs-sm); font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .genesis-ds-upload-item__status { font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600); white-space: nowrap; }

  /* ---- Gradient / animated progress bar ------------------------------ */
  .genesis-ds-progress--gradient .genesis-ds-progress__bar { background: linear-gradient(90deg, var(--genesis-ds-blue), var(--genesis-ds-green)); }
  .genesis-ds-progress__bar--shimmer { position: relative; overflow: hidden; animation: none; }
  .genesis-ds-progress__bar--shimmer::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: genesis-ds-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes genesis-ds-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
  @media (prefers-reduced-motion: reduce) { .genesis-ds-progress__bar--shimmer::after { animation: none; } }

  /* ---- Table variants: dense + BOM (blue-dark header) ---------------- */
  .genesis-ds-table--dense th { padding: 0.35rem 0.5rem; font-size: 10px; }
  .genesis-ds-table--dense td { padding: 0.35rem 0.5rem; }
  .genesis-ds-table--bom th {
    background: var(--genesis-ds-blue-dark); color: #fff; text-transform: none; letter-spacing: normal;
    border-bottom: none; position: sticky; top: 0;
  }
  .genesis-ds-table--bom th[data-sort]:hover { color: var(--genesis-ds-green); }
  .genesis-ds-table--bom th[data-sort].is-asc::after, .genesis-ds-table--bom th[data-sort].is-desc::after { color: var(--genesis-ds-green); }

  /* ---- Data provenance: AI-produced vs human-edited values ----------- */
  /* Apply the utility to any value/cell to disclose who produced it. */
  .genesis-ds-prov-ai   { color: var(--genesis-ds-prov-ai); }
  .genesis-ds-prov-user { color: var(--genesis-ds-prov-user); }
  /* Legend that explains the coding (pair it with any provenance-coloured view). */
  .genesis-ds-prov-legend { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--genesis-ds-fs-xs); }
  .genesis-ds-prov-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
  .genesis-ds-prov-legend__swatch { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; }
  .genesis-ds-prov-legend__item--ai   .genesis-ds-prov-legend__swatch { background: var(--genesis-ds-prov-ai); }
  .genesis-ds-prov-legend__item--user .genesis-ds-prov-legend__swatch { background: var(--genesis-ds-prov-user); }
  .genesis-ds-prov-legend__item--ai   { color: var(--genesis-ds-prov-ai); font-weight: var(--genesis-ds-fw-semibold); }
  .genesis-ds-prov-legend__item--user { color: var(--genesis-ds-prov-user); font-weight: var(--genesis-ds-fw-semibold); }

  /* ---- Meta bar: a record's provenance strip (who · when · version · context) */
  /* Inline icon·label segments separated by a thin divider. Any number of items. */
  .genesis-ds-meta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.75rem; font-size: var(--genesis-ds-fs-xs); color: var(--genesis-ds-gray-600); }
  .genesis-ds-meta-bar__item { display: inline-flex; align-items: center; gap: 0.3rem; position: relative; }
  .genesis-ds-meta-bar__item + .genesis-ds-meta-bar__item::before { content: "·"; position: absolute; left: -0.42rem; color: var(--genesis-ds-gray-400); }
  .genesis-ds-meta-bar__item > svg, .genesis-ds-meta-bar__item > .genesis-ds-ico { width: 14px; height: 14px; color: var(--genesis-ds-gray-400); flex-shrink: 0; }
  .genesis-ds-meta-bar__item b { font-weight: var(--genesis-ds-fw-medium); color: var(--genesis-ds-ink); }

  /* ---- Branded focus ring for the remaining interactive primitives --- */
  .genesis-ds-tab:focus-visible, .genesis-ds-filter-pill:focus-visible, .genesis-ds-segmented__opt:focus-visible,
  .genesis-ds-nav-item:focus-visible, .genesis-ds-menu-item:focus-visible, .genesis-ds-sort:focus-visible,
  .genesis-ds-header__icon-btn:focus-visible, .genesis-ds-header__back:focus-visible, .genesis-ds-toolbar__btn:focus-visible,
  .genesis-ds-chip__remove:focus-visible, .genesis-ds-nav-item__ctrl:focus-visible, .genesis-ds-collapsible__head:focus-visible,
  .genesis-ds-fold__head:focus-visible {
    outline: none; box-shadow: var(--genesis-ds-ring);
  }

  /* ---- Reduced-motion: also disable toast slide + hover lifts -------- */
  @media (prefers-reduced-motion: reduce) {
    .genesis-ds-toast { animation: none; }
    .genesis-ds-card--hover:hover, .genesis-ds-btn--gradient:hover:not(:disabled),
    .genesis-ds-data-card:hover, .genesis-ds-app-card:hover { transform: none; }
  }
}

/* RESET-ARMOR — RETIRED 2026-07-20.
   The unlayered box-model armor that used to live here re-applied @layer
   genesis-ds-components values so they survived a consuming app's unlayered
   `* {margin:0;padding:0}` reset. kd-chat — the only GENESIS-DS consumer using these
   classes — now wraps its reset in `@layer app-reset` (the lowest layer, slot
   declared at the top of this file), so genesis-ds-components wins by layer order and
   the armor is redundant. Every armored selector (buttons, inputs, modals, menu,
   sidebar rows/heads, chip) is defined in @layer genesis-ds-components above; do NOT
   reintroduce unlayered copies. If a NEW app ships an unlayered `*` reset, fix
   it at the source (wrap it in @layer app-reset) — never re-add armor here. */

/* ======================================================================
   CORNER-RADIUS TRY-OUT — set html[data-genesis-ds-radius] to compare rounding.
   "current" (attr absent) = the shipped scale; "less" = tighter; "square" =
   near-square. Indicator pills stay fully round. Flip it in a reference page
   toolbar, or set the attribute on <html> in an app to trial it.
   ====================================================================== */
html[data-genesis-ds-radius="less"]   { --genesis-ds-radius-sm: 4px; --genesis-ds-radius-md: 5px;  --genesis-ds-radius-lg: 5px; }
html[data-genesis-ds-radius="square"] { --genesis-ds-radius-sm: 2px; --genesis-ds-radius-md: 2px;  --genesis-ds-radius-lg: 2px; }

/* ======================================================================
   IMPROVED TYPOGRAPHY — opt-in via html[data-genesis-ds-type="improved"].

   Every component reads ONE semantic ROLE (size+weight+line-height together)
   from the role tokens in genesis-ds-tokens, so the whole page reads as a single
   homogeneous type system on a modular ~1.2 scale — instead of ~15 arbitrary
   literal sizes. Weight is used sparingly (body 400, labels/controls 500,
   only headings 600; bold removed from UI chrome) to fix the "everything is
   bold / too prominent" impression.

   UNLAYERED + attribute-scoped ON PURPOSE: it must override the layered
   component defaults, but ONLY when the toggle is on, so "current" (attribute
   absent) is byte-for-byte today's look and the two are directly comparable.
   Once signed off, these values fold into the component rules and this whole
   block + the toggle are deleted.

   Excluded by design (icon glyphs / avatar / micro corner-count — not reader
   text): .genesis-ds-empty__icon, .genesis-ds-rail__add, .genesis-ds-message__avatar--initials,
   .genesis-ds-side-head__count.
   ====================================================================== */
/* meta — 12 / 400 / 1.4 */
[data-genesis-ds-type="improved"] .genesis-ds-badge,
[data-genesis-ds-type="improved"] .genesis-ds-status,
[data-genesis-ds-type="improved"] .genesis-ds-tag,
[data-genesis-ds-type="improved"] .genesis-ds-chip,
[data-genesis-ds-type="improved"] .genesis-ds-version-pill,
[data-genesis-ds-type="improved"] .genesis-ds-table th,
[data-genesis-ds-type="improved"] .genesis-ds-thinkwave__reason,
[data-genesis-ds-type="improved"] .genesis-ds-toolbar__time,
[data-genesis-ds-type="improved"] .genesis-ds-data-card__status,
[data-genesis-ds-type="improved"] .genesis-ds-data-card__meta,
[data-genesis-ds-type="improved"] .genesis-ds-message__timestamp,
[data-genesis-ds-type="improved"] .genesis-ds-app-card__type,
[data-genesis-ds-type="improved"] .genesis-ds-upload-item__status,
[data-genesis-ds-type="improved"] .genesis-ds-toggle__text,
[data-genesis-ds-type="improved"] .genesis-ds-btn--chip {
  font-size: var(--genesis-ds-text-meta-size); font-weight: var(--genesis-ds-text-meta-weight); line-height: var(--genesis-ds-text-meta-lh);
}
/* caption — 11 / 400 (sub-meta microcopy: app-header tagline + app-card tagline,
   which mirrors the header: card name = header title, so card desc = header tagline) */
[data-genesis-ds-type="improved"] .genesis-ds-header__subtitle,
[data-genesis-ds-type="improved"] .genesis-ds-app-card__desc {
  font-size: var(--genesis-ds-text-caption-size); font-weight: var(--genesis-ds-text-caption-weight); line-height: var(--genesis-ds-text-caption-lh);
}
/* body — 14 / 400 / 1.5 */
[data-genesis-ds-type="improved"] .genesis-ds-input,
[data-genesis-ds-type="improved"] .genesis-ds-textarea,
[data-genesis-ds-type="improved"] .genesis-ds-chat-input .genesis-ds-textarea,
[data-genesis-ds-type="improved"] .genesis-ds-select,
[data-genesis-ds-type="improved"] .genesis-ds-select option,
[data-genesis-ds-type="improved"] .genesis-ds-alert,
[data-genesis-ds-type="improved"] .genesis-ds-readout,
[data-genesis-ds-type="improved"] .genesis-ds-confirm__msg,
[data-genesis-ds-type="improved"] .genesis-ds-hint-card__desc {
  font-size: var(--genesis-ds-text-body-size); font-weight: var(--genesis-ds-text-body-weight); line-height: var(--genesis-ds-text-body-lh);
}
/* label — 14 / 500 / 1.2 (interactive / controls) */
[data-genesis-ds-type="improved"] .genesis-ds-btn,
[data-genesis-ds-type="improved"] .genesis-ds-label,
[data-genesis-ds-type="improved"] .genesis-ds-tab,
[data-genesis-ds-type="improved"] .genesis-ds-collapsible__head,
[data-genesis-ds-type="improved"] .genesis-ds-side-head,
[data-genesis-ds-type="improved"] .genesis-ds-subhead,
[data-genesis-ds-type="improved"] .genesis-ds-panel-head {
  font-size: var(--genesis-ds-text-label-size); font-weight: var(--genesis-ds-text-label-weight); line-height: var(--genesis-ds-text-label-lh);
}
/* Nav / chat list items: non-selected RECEDE (normal weight) so the selected
   one reads as selected. Only the active row carries emphasis (semibold). */
[data-genesis-ds-type="improved"] .genesis-ds-nav-item { font-weight: var(--genesis-ds-text-body-weight); }
[data-genesis-ds-type="improved"] .genesis-ds-nav-item--active { font-weight: var(--genesis-ds-fw-semibold); color: var(--genesis-ds-blue-dark); }
/* subhead — 16 / 500 / 1.3 (card titles, group headers) */
[data-genesis-ds-type="improved"] .genesis-ds-card__header,
[data-genesis-ds-type="improved"] .genesis-ds-data-card__title,
[data-genesis-ds-type="improved"] .genesis-ds-hint-card__title,
[data-genesis-ds-type="improved"] .genesis-ds-app-card__name,
[data-genesis-ds-type="improved"] .genesis-ds-message__role,
[data-genesis-ds-type="improved"] .genesis-ds-empty__title,
[data-genesis-ds-type="improved"] .genesis-ds-thinkwave__main,
[data-genesis-ds-type="improved"] .genesis-ds-header__title {
  font-size: var(--genesis-ds-text-subhead-size); font-weight: var(--genesis-ds-text-subhead-weight); line-height: var(--genesis-ds-text-subhead-lh);
}
/* heading — 20 / 600 / 1.25 (section / modal titles; was bold 700) */
[data-genesis-ds-type="improved"] .genesis-ds-modal__header {
  font-size: var(--genesis-ds-text-heading-size); font-weight: var(--genesis-ds-text-heading-weight); line-height: var(--genesis-ds-text-heading-lh);
}
/* display — 30 / 600 / 1.2 (big values) */
[data-genesis-ds-type="improved"] .genesis-ds-stat-card__value {
  font-size: var(--genesis-ds-text-display-size); font-weight: var(--genesis-ds-text-display-weight); line-height: var(--genesis-ds-text-display-lh);
}
/* demote stray bold (700 → 500) not covered by a size group */
[data-genesis-ds-type="improved"] .genesis-ds-readout__value,
[data-genesis-ds-type="improved"] .genesis-ds-list-item__owner {
  font-weight: var(--genesis-ds-text-label-weight);
}