/* ============================================================================
   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 — active */
    --genesis-ds-blue:         #43BBC7;   /* kreston-teal — secondary accent */
    --genesis-ds-blue-600:     #34ACBA;   /* kreston-teal-shadow */
    /* derived, x0.75 — the teal where it must read dark */
    --genesis-ds-blue-700:     #328C95;
    --genesis-ds-blue-dark:    #243746;   /* kreston-dark-blue — headers / emphasis */
    --genesis-ds-blue-teal:    #1B2A37;   /* kreston-dark-blue-shadow */

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

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

  /* ---- 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, kreston-dark-blue, as their site header is.
       Everything else is white. Its contents are therefore light: see the block below. */
    background: var(--genesis-ds-blue-dark); 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; }
  /* 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__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; }
  /* 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 {
    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);
}