/* ============================================================================
   Systamesh console IA v2 — design-system foundation (design kit port)
   ----------------------------------------------------------------------------
   Source: uploads/reputation-design-v2.html (React prototype, pure UI spec).
   Layer order (cascade):
     1. Webfonts + design tokens + base layer      (kit style block 1)
     2. Console chrome + pages (cs-* and ws-*)     (kit style block 2)
     3. Reputation layer (rp-*)                    (kit style block 3)
     4. Console IA layer (ia-*)                    (kit style block 4)
     5. sm-* component primitives                  (kit module: components)

   Fonts are self-hosted in assets/fonts/ (Geist + Geist Mono, OFL-licensed
   Vercel open-source fonts; subsets per Google Fonts unicode-range splits).

   SCOPE SAFETY: page-level selectors from the kit (body / html / * / #root /
   bare element defaults) are re-scoped under the app-shell root class
   .cs-app so this file can load alongside assets/sm-design.css without
   leaking into not-yet-migrated pages. :root token definitions are global
   by design (shared custom properties).
   ============================================================================ */

/* ============================ LAYER 1: webfonts + tokens + base ========== */

/* ============================================================
   Systamesh Design System — global stylesheet entry point.
   Consumers link THIS file. Import order matters:
   fonts → tokens → base utilities.
   ============================================================ */

/* ============================================================
   Systamesh — Webfonts
   ------------------------------------------------------------
   Geist + Geist Mono (open-source, by Vercel) served from the
   Google Fonts CDN. Consumers that link styles.css inherit these.
   To self-host, drop the .woff2 files in /assets/fonts and swap
   this @import for local @font-face rules.
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Systamesh — Color tokens
   Off-white paper, near-black ink, one restrained indigo accent.
   Warm "stone" neutrals keep the system soft, not clinical.
   ============================================================ */

:root {
  /* ---- Base neutral scale (warm stone) ---- */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F4F2;
  --stone-150: #EFEEEB;
  --stone-200: #E7E5E1;
  --stone-300: #D7D3CE;
  --stone-400: #B0ABA3;
  --stone-500: #847E75;
  --stone-600: #5F5A52;
  --stone-700: #45413B;
  --stone-800: #2A2723;
  --stone-900: #1A1815;
  --stone-950: #0E0D0B;

  /* ---- Accent — Indigo (single brand hue) ---- */
  --indigo-50:  #EEF1FD;
  --indigo-100: #DEE4FB;
  --indigo-200: #C2CDF7;
  --indigo-300: #9DAEF1;
  --indigo-400: #6E84E6;
  --indigo-500: #3D63DD;  /* primary */
  --indigo-600: #2E4FC6;
  --indigo-700: #2740A1;
  --indigo-800: #243a82;
  --indigo-900: #1F2F63;

  /* ---- Semantic hues (quiet, desaturated) ---- */
  --green-500:  #11936B;
  --green-50:   #E7F4EF;
  --amber-500:  #C77E1B;
  --amber-50:   #FAF0DD;
  --red-500:    #CE4A3A;
  --red-50:     #FAE9E6;

  /* ============================================================
     Semantic aliases — reference these in product code
     ============================================================ */

  /* Surfaces */
  --bg-base:     var(--stone-50);   /* page paper */
  --bg-subtle:   var(--stone-100);  /* recessed sections */
  --bg-inset:    var(--stone-150);  /* wells, code blocks */
  --surface-card: #FFFFFF;          /* raised cards float above paper */
  --surface-overlay: #FFFFFF;       /* dialogs, menus, popovers */
  --surface-inverse: var(--stone-950);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-tertiary:  var(--stone-500);
  --text-disabled:  var(--stone-400);
  --text-inverse:   var(--stone-50);
  --text-accent:    var(--indigo-600);
  --text-on-accent: #FFFFFF;

  /* Borders — hairlines, low contrast */
  --border-subtle:  rgba(14, 13, 11, 0.06);
  --border-default: rgba(14, 13, 11, 0.10);
  --border-strong:  rgba(14, 13, 11, 0.16);
  --border-accent:  var(--indigo-500);

  /* Accent roles */
  --accent:         var(--indigo-500);
  --accent-hover:   var(--indigo-600);
  --accent-active:  var(--indigo-700);
  --accent-subtle:  var(--indigo-50);
  --accent-muted:   var(--indigo-100);

  /* Status */
  --success:    var(--green-500);
  --success-bg: var(--green-50);
  --warning:    var(--amber-500);
  --warning-bg: var(--amber-50);
  --danger:     var(--red-500);
  --danger-bg:  var(--red-50);

  /* Focus ring */
  --focus-ring: rgba(61, 99, 221, 0.40);
}

/* ============================================================
   Systamesh — Typography tokens
   Geist for everything human-facing; Geist Mono for technical
   labels, metadata, code, and numeric/agent output.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono",
               Menlo, Consolas, monospace;

  /* ---- Type scale (1.20 ratio, rem on 16px base) ---- */
  --text-2xs:  0.6875rem;  /* 11px — mono micro-labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px — dense UI */
  --text-base: 0.9375rem;  /* 15px — body default */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.375rem;   /* 38px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.875rem;   /* 62px */
  --text-6xl:  4.75rem;    /* 76px — hero display */

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* display headlines */
  --leading-snug:    1.22;  /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;  /* long-form prose */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;  /* large display */
  --tracking-tight:   -0.015em; /* headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;   /* mono uppercase eyebrows */

  /* ---- Semantic roles ---- */
  --display-font:   var(--font-sans);
  --display-weight: var(--weight-semibold);
  --heading-font:   var(--font-sans);
  --body-font:      var(--font-sans);
  --label-font:     var(--font-mono);
  --code-font:      var(--font-mono);
}

/* ============================================================
   Systamesh — Spacing, radii, shadows, motion
   4px base grid. Soft, shallow elevation. Quiet motion.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;    /* default control / card */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hairline: 0.5px;

  /* ---- Elevation — soft, layered, low-opacity ---- */
  --shadow-xs: 0 1px 2px rgba(14, 13, 11, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 13, 11, 0.05),
               0 1px 1px rgba(14, 13, 11, 0.03);
  --shadow-md: 0 2px 4px rgba(14, 13, 11, 0.05),
               0 4px 12px rgba(14, 13, 11, 0.05);
  --shadow-lg: 0 8px 24px rgba(14, 13, 11, 0.08),
               0 2px 6px rgba(14, 13, 11, 0.04);
  --shadow-xl: 0 16px 48px rgba(14, 13, 11, 0.12),
               0 4px 12px rgba(14, 13, 11, 0.06);
  /* Inset hairline that reads as a crisp 1px ring on light surfaces */
  --ring-hairline: inset 0 0 0 1px var(--border-default);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ============================================================
   Systamesh — Base layer
   Light reset + element defaults + signature brand utilities
   (mesh grid, dot field, mono eyebrow, hairline rules).
   ============================================================ */

.cs-app, .cs-app *, .cs-app *::before, .cs-app *::after { box-sizing: border-box; }

.cs-app { -webkit-text-size-adjust: 100%; }

.cs-app {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "cv03";
}

.cs-app h1, .cs-app h2, .cs-app h3, .cs-app h4, .cs-app h5, .cs-app h6 {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.cs-app p { margin: 0; text-wrap: pretty; }
.cs-app a { color: inherit; text-decoration: none; }
.cs-app button { font-family: inherit; }

.cs-app code, .cs-app kbd, .cs-app pre, .cs-app samp {
  font-family: var(--font-mono);
  font-feature-settings: "zero" 1;
}

.cs-app ::selection { background: var(--accent-muted); color: var(--accent-active); }

/* ---- Mono eyebrow / technical label ---- */
.sm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Signature backgrounds: the "mesh" ---- */

/* Fine dot field */
.sm-dotfield {
  background-image: radial-gradient(circle at center,
                    var(--border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

/* Engineering grid */
.sm-grid {
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Mesh — two overlaid grids at scale for depth */
.sm-mesh {
  background-color: var(--bg-base);
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
}

/* Radial fade to paper — drop over any motif to soften edges */
.sm-fade-paper {
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 30%, transparent 100%);
}

/* Hairline rule */
.sm-rule { height: 1px; background: var(--border-default); border: 0; }


/* ============================ LAYER 2: console chrome + pages (cs + ws) = */

/* ============================================================
   Systamesh console — app styles
   Off-white paper, near-black ink, one restrained indigo accent.
   ============================================================ */

.cs-app, .cs-app * { box-sizing: border-box; }
.cs-app { margin: 0; height: 100%; }
.cs-app {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cs-app { height: 100vh; overflow: auto; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss01","cv01"; }
.cs-app button { font-family: inherit; }
.cs-app ::selection { background: var(--accent-muted); }

/* ---- App frame ------------------------------------------------------- */
.cs-app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; min-width: 1200px; overflow: hidden; }
.cs-app.is-collapsed { grid-template-columns: 66px 1fr; min-width: 1020px; }

/* ============================================================
   Sidebar
   ============================================================ */
.cs-sb { display: flex; flex-direction: column; background: var(--bg-subtle); border-right: 1px solid var(--border-subtle); padding: 12px 10px; gap: 3px; }
.cs-ws-wrap { position: relative; }
.cs-ws { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; margin-bottom: 4px; }
.cs-ws:hover { background: var(--bg-inset); }
.cs-ws__mark { width: 22px; height: 22px; flex: none; }
.cs-ws__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.cs-ws__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border-default); padding: 1px 5px; border-radius: 5px; }
.cs-ws__chev { margin-left: auto; color: var(--text-tertiary); }


.cs-sb__group { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cs-sb__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 12px 10px 5px; }
.cs-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-align: left; width: 100%; }
.cs-nav svg { color: var(--text-tertiary); flex: none; }
.cs-nav:hover { background: var(--bg-inset); color: var(--text-primary); }
.cs-nav.is-active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.cs-nav.is-active svg { color: var(--accent); }
.cs-nav__pill { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

.cs-sb__spacer { flex: 1; }

/* User chip + menu */
.cs-user { position: relative; margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.cs-user__btn { display: flex; align-items: center; gap: 9px; padding: 7px 8px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.cs-user__btn:hover { background: var(--bg-inset); }
.cs-user__ava { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--stone-700); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.cs-user__info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cs-user__name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-user__sub { font-size: 11px; color: var(--text-tertiary); }
.cs-user__chev { margin-left: auto; color: var(--text-tertiary); }
.cs-menu { position: absolute; left: 4px; right: 4px; bottom: calc(100% + 4px); background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 5px; z-index: 40; }
.cs-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer; text-align: left; }
.cs-menu__item svg { color: var(--text-tertiary); }
.cs-menu__item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.cs-menu__sep { height: 1px; background: var(--border-subtle); margin: 5px 4px; }

/* workspace menu (opens downward) */
.cs-menu--ws { top: calc(100% + 4px); bottom: auto; }
.cs-menu__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); padding: 6px 9px 4px; }
.cs-menu__item.is-current { font-weight: 500; color: var(--text-primary); }
.cs-ws__chip { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-subtle); color: var(--accent-active); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.cs-menu__env { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; font-size: 12px; color: var(--text-tertiary); }
.cs-menu__envtag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }

/* collapse toggle */
/* collapse toggle — an icon button at the right end of the brand row (owner
   2026-10-01; replaces the bottom "Collapse" button). Collapsed, the brand
   row wraps and it stacks centered under the mark. */
.cs-collapse { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; padding: 5px; background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer; color: var(--text-tertiary); }
.cs-collapse:hover { background: var(--bg-inset); color: var(--text-primary); }

/* ---- collapsed sidebar ---- */
.cs-sb--collapsed { padding: 12px 9px; }
.cs-sb--collapsed .cs-ws { justify-content: center; padding: 7px; }
/* Content planning is a Pro/Scale area, but its nav item stays CLICKABLE on
   PAYG — the page sells itself with a demo dataset + upgrade banner. So it
   is dimmed only; never pointer-events:none, and never .is-disabled. */
.cs-nav.is-locked { opacity: .55; }
.cs-sb--collapsed .cs-nav { justify-content: center; padding: 9px; }
.cs-sb--collapsed .cs-collapse { justify-content: center; padding: 9px; }
.cs-sb--collapsed .cs-user__btn { justify-content: center; padding: 7px; }
.cs-sb--collapsed .cs-sb__group { margin-top: 8px; }

/* ============================================================
   Main column
   ============================================================ */
.cs-main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-base); min-width: 0; }
.cs-topbar { display: flex; align-items: center; gap: 14px; padding: 0 24px; height: 56px; border-bottom: 1px solid var(--border-subtle); flex: none; }
.cs-topbar__title { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.cs-topbar__crumb { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); }
.cs-topbar__crumb a { color: var(--text-tertiary); text-decoration: none; cursor: pointer; }
.cs-topbar__crumb a:hover { color: var(--text-secondary); }
.cs-topbar__crumb .cur { color: var(--text-primary); font-weight: 600; }
.cs-topbar__spacer { flex: 1; }
.cs-credpill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-xs); }
.cs-credpill:hover { border-color: var(--border-strong); }
.cs-credpill svg { color: var(--accent); }
.cs-credpill b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* "~N reputation checks left" BESIDE the balance (/reputation/ only): one row,
   numbers enlarged out of the sentence, hairline divider between the two —
   stacking read as cramped inside the fixed 56px topbar (owner review) */
.cs-credpill.has-sub { padding: 5px 12px 5px 10px; }
.cs-credpill.has-sub b { font-size: 15px; }
.cs-credpill.has-sub .sm-credits-label { font-size: 11.5px; }
.cs-credpill__col { display: inline-flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.cs-credpill__row { display: inline-flex; align-items: baseline; gap: 4px; }
.cs-credpill__sub { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.cs-credpill__sub::before { content: ''; align-self: center; width: 1px; height: 13px; background: var(--border-default); }
.cs-credpill__sub[hidden] { display: none; }
.cs-credpill__subnum { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.cs-credpill__sub.is-low, .cs-credpill__sub.is-low .cs-credpill__subnum { color: var(--warning, #C77E1B); }
.cs-credpill.is-negative .cs-credpill__sub, .cs-credpill.is-negative .cs-credpill__subnum { color: var(--danger); }
/* long sub-labels (the /recommendation/ range) trade their full noun for room
   on narrower viewports rather than clipping mid-word */
.cs-credpill__subw--short { display: none; }
@media (max-width: 1400px) {
	.cs-credpill__subw--full { display: none; }
	.cs-credpill__subw--short { display: inline; }
}

.cs-scroll { flex: 1; overflow-y: auto; }
.cs-page { max-width: 920px; margin: 0 auto; padding: 36px 28px 80px; }
.cs-page--wide { max-width: 1080px; }
.cs-page__head { margin-bottom: 26px; }
.cs-page__title { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.cs-page__sub { margin-top: 7px; font-size: 14.5px; color: var(--text-secondary); max-width: 60ch; }

.cs-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cs-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--border-strong); }

.cs-section { margin-top: 40px; }
.cs-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cs-section__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cs-section__hint { font-size: 13px; color: var(--text-tertiary); }

/* ============================================================
   Generic primitives
   ============================================================ */
.cs-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cs-divider { height: 1px; background: var(--border-subtle); }
.cs-row { display: flex; align-items: center; gap: 10px; }
.cs-muted { color: var(--text-tertiary); }
.cs-link { color: var(--text-accent); text-decoration: none; cursor: pointer; font-weight: 500; }
.cs-link:hover { text-decoration: underline; }

/* engine tag */
.cs-eng { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cs-eng__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cs-eng__dot--perplexity { background: #11936B; }
.cs-eng__dot--anthropic { background: #C77E1B; }
.cs-eng__dot--openai { background: #5F5A52; }
.cs-eng__dot--gemini { background: #3D63DD; }
.cs-eng__dot--xai { background: #1A1815; }

/* ============================================================
   WORKSPACES — analytics dashboard
   ============================================================ */
.ws-switch { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.ws-switch__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ws-combo { position: relative; display: flex; align-items: center; gap: 8px; width: 340px; max-width: 100%; padding: 8px 11px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.ws-combo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.ws-combo__icon { color: var(--text-tertiary); display: inline-flex; flex: none; }
.ws-combo__in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text-primary); }
.ws-combo__in::placeholder { color: var(--text-tertiary); }
.ws-combo__clr { border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 4px; flex: none; }
.ws-combo__clr:hover { background: var(--bg-subtle); color: var(--text-primary); }
.ws-combo__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 5px; z-index: 50; }
.ws-combo__empty { padding: 12px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.ws-combo__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.ws-combo__opt:hover { background: var(--bg-subtle); }
.ws-combo__opt.is-current { background: var(--accent-subtle); }
.ws-combo__chip { width: 26px; height: 26px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; }
.ws-combo__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ws-combo__name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-combo__kind { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-switch__stat { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; }
.ws-switch__stat b { color: var(--text-primary); }

.ws-switch__pills { display: flex; flex-wrap: wrap; gap: 8px; max-height: 90px; overflow-y: auto; padding: 4px; margin: -4px; }
.ws-pill2 { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .12s; }
.ws-pill2:hover { border-color: var(--border-strong); }
.ws-pill2.is-on { border-color: var(--accent); background: var(--accent-subtle); }
.ws-pill2__chip { width: 22px; height: 22px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; }
.ws-pill2__name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.ws-pill2.is-on .ws-pill2__name { color: var(--accent-active); }

/* KPI strip */
.ws-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.ws-kpi { background: var(--surface-card); padding: 16px 18px; }
.ws-kpi__k { font-size: 12px; color: var(--text-tertiary); }
.ws-kpi__row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.ws-kpi__v { font-size: 28px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.ws-kpi__foot { font-size: 11px; margin-top: 8px; }

.ws-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.ws-delta--good { color: var(--success); background: var(--success-bg); }
.ws-delta--bad { color: var(--danger); background: var(--danger-bg); }
.ws-delta--flat { color: var(--text-tertiary); background: var(--bg-inset); }

/* generic analytics card */
.ws-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 20px 22px 22px; }
.ws-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.ws-card__title { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.ws-card__sub { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); max-width: 56ch; }
.ws-card__foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.ws-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-subtle); color: var(--text-secondary); }
.ws-pill--good svg { color: var(--success); }
.ws-pill--bad svg { color: var(--danger); }

/* segmented control */
.ws-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-inset); border-radius: var(--radius-md); flex: none; }
.ws-seg__btn { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); padding: 6px 13px; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.ws-seg__btn:hover { color: var(--text-primary); }
.ws-seg__btn.is-on { color: var(--text-primary); background: var(--surface-card); box-shadow: var(--shadow-xs); }

/* horizontal bars */
.ws-bars { display: flex; flex-direction: column; gap: 14px; }
.ws-bar { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 16px; }
.ws-bar__lead { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ws-bar__ava { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(14,13,11,.07); }
.ws-bar__qmark { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--bg-inset); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; }
.ws-bar__dot { width: 11px; height: 11px; flex: none; border-radius: 50%; margin: 0 6px; }
.ws-bar__label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-bar__track { height: 12px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.ws-bar__fill { height: 100%; border-radius: 999px; transition: width .4s var(--ease-out); }
.ws-bar__num { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ws-bar__pct { font-family: var(--font-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; width: 42px; text-align: right; }
.ws-bar__runs { font-size: 11px; width: 56px; text-align: right; }

/* trend chart */
.ws-trendnote { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 11px 14px; border-radius: var(--radius-md); margin-bottom: 16px; }
.ws-trendnote.is-good { background: var(--success-bg); color: var(--success); }
.ws-trendnote.is-bad { background: var(--danger-bg); color: var(--danger); }
.ws-trendnote b { color: var(--text-primary); }
.ws-chart { width: 100%; }

/* perception */
.ws-split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-inset); gap: 2px; }
.ws-split__seg { height: 100%; transition: width .4s var(--ease-out); }
.ws-split__legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.ws-split__leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.ws-split__leg b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ws-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ws-perc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.ws-perc__col { display: flex; flex-direction: column; gap: 12px; }
.ws-perc__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.ws-mention { display: flex; flex-direction: column; gap: 7px; }
.ws-mention__txt { font-size: 12.5px; line-height: 1.45; color: var(--text-primary); }
.ws-mention__bar { display: flex; align-items: center; gap: 8px; }
.ws-mention__fill { height: 5px; border-radius: 999px; min-width: 4px; opacity: .85; }
.ws-mention__n { font-size: 10.5px; color: var(--text-tertiary); }

/* fan-out queries */
.ws-qtools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ws-filter { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; flex: none; }
.ws-filter input { position: absolute; opacity: 0; width: 0; height: 0; }
.ws-filter__track { position: relative; width: 34px; height: 19px; flex: none; border-radius: 999px; background: var(--stone-300); transition: background .15s; }
.ws-filter__thumb { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.ws-filter input:checked + .ws-filter__track { background: var(--accent); }
.ws-filter input:checked + .ws-filter__track .ws-filter__thumb { transform: translateX(15px); }
.ws-filter__lbl { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.ws-qlist { display: flex; flex-direction: column; }
.ws-qrow { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); }
.ws-qrow:last-child { border-bottom: 0; }
.ws-qrow--head { padding: 8px 4px; border-bottom: 1px solid var(--border-subtle); }
.ws-qrow--head span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.ws-qrow__statcol { text-align: right; justify-self: end; }
.ws-qmain { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-imp { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.ws-imp__b { width: 4px; border-radius: 1px; background: var(--bg-inset); }
.ws-imp__b:nth-child(1) { height: 6px; } .ws-imp__b:nth-child(2) { height: 9px; } .ws-imp__b:nth-child(3) { height: 12px; } .ws-imp__b:nth-child(4) { height: 16px; }
.ws-imp__b.is-on { background: var(--accent); }
.ws-qtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-qtext__q { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.ws-qtext__q svg { color: var(--text-tertiary); flex: none; }
.ws-qtext__vol { font-size: 11px; }
.ws-qengines { display: inline-flex; gap: 5px; }
.ws-eng2 { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border-default); }
.ws-eng2.is-on { box-shadow: none; }
.ws-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ws-stat--ok { color: var(--success); background: var(--success-bg); }
.ws-stat--gap { color: var(--warning); background: var(--warning-bg); }
.ws-empty { padding: 30px 10px; text-align: center; font-size: 13px; }

@media (max-width: 920px) { .ws-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   RUNS — two-pane console
   ============================================================ */
.cs-runs { display: grid; grid-template-columns: 364px 1fr; height: 100%; overflow: hidden; }

/* batch list */
.cs-list { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); overflow: hidden; background: var(--bg-base); }
.cs-list__head { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; flex: none; }
.cs-list__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-list__title { font-size: 14px; font-weight: 600; }
.cs-list__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.cs-list__body { flex: 1; overflow-y: auto; padding: 0 10px 14px; display: flex; flex-direction: column; gap: 4px; }

.cs-batch { text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.cs-batch:hover { background: var(--bg-subtle); }
.cs-batch.is-selected { background: var(--surface-card); border-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.cs-batch.is-selected::after { content: ""; }
.cs-batch__top { display: flex; align-items: center; gap: 9px; }
.cs-batch__icon { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--accent-subtle); color: var(--accent-active); display: flex; align-items: center; justify-content: center; }
.cs-batch__head { flex: 1; min-width: 0; }
.cs-batch__name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cs-batch__id { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.cs-batch__q { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-batch__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cs-batch__foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-tertiary); }
.cs-batch__foot .mono { font-size: 11px; }
.cs-batch__dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

/* status dots */
.cs-sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cs-sdot--complete { background: var(--success); }
.cs-sdot--running { background: var(--accent); }
.cs-sdot--queued { background: var(--warning); }
.cs-sdot--failed { background: var(--danger); }
.cs-sdot--dry { background: var(--stone-400); }

/* ---- detail pane ---- */
.cs-detail { overflow-y: auto; background: var(--bg-base); min-width: 0; }
.cs-detail__inner { max-width: 880px; padding: 26px 32px 60px; }
.cs-detail--empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-tertiary); text-align: center; }
.cs-detail--empty .cs-emoji { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--text-tertiary); }

.cs-dhead { display: flex; align-items: flex-start; gap: 14px; }
.cs-dhead__main { flex: 1; min-width: 0; }
.cs-dhead__row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cs-dhead__name { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cs-dhead__q { margin-top: 11px; font-size: 17px; line-height: 1.5; color: var(--text-primary); font-weight: 450; max-width: 62ch; padding-left: 14px; border-left: 2px solid var(--accent-muted); }
.cs-dhead__title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cs-dhead__sub { margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-dhead__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* persona avatar — the configurable "photo box" that carries the buyer identity */
.cs-pava { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; letter-spacing: .01em; flex: none; box-shadow: inset 0 0 0 1px rgba(14,13,11,.07); }

.cs-tabbar { margin: 22px 0 0; border-bottom: 1px solid var(--border-subtle); }

/* stat grid */
.cs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; margin-top: 22px; }
.cs-stat { background: var(--surface-card); padding: 14px 16px; }
.cs-stat__k { font-size: 11.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.cs-stat__v { margin-top: 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-stat__v small { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }

/* meta strip */
.cs-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cs-meta__item { display: flex; flex-direction: column; gap: 3px; }
.cs-meta__k { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.cs-meta__v { font-size: 13px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; }

/* tables */
.cs-tablecard { margin-top: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-sm); }
.cs-tablecard__head { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-table th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); padding: 9px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); white-space: nowrap; }
.cs-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td.num, .cs-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.cs-table .cs-table__rowbtn { cursor: pointer; }
.cs-table .cs-table__rowbtn:hover td { background: var(--bg-subtle); }
.cs-table .strong { color: var(--text-primary); font-weight: 500; }
/* finished lots (/credits/ "Used up & expired" group) — visible but quiet */
.cs-table tr.is-spent td { opacity: .5; }
.cs-table tr.is-spent td .sm-badge { opacity: 1; }
.cs-table tr.cs-subhead td { padding: 10px 16px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-disabled); border-bottom: 1px solid var(--border-subtle); }
.cs-table tfoot .cs-total td { border-top: 2px solid var(--border-default); border-bottom: 0; font-size: 12px; color: var(--text-secondary); }

/* collapsible lot-history card (/credits/ bottom) */
.cs-collapsecard__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; }
.cs-collapsecard__head:hover { background: var(--bg-subtle); }
.cs-collapsecard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.cs-collapsecard__meta svg { transition: transform .15s ease; }
.cs-collapsecard__head.is-open .cs-collapsecard__meta svg { transform: rotate(180deg); }
.cs-collapsecard__body { border-top: 1px solid var(--border-subtle); }
.cs-spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-default); border-top-color: var(--accent); animation: sm-spinner-rot .65s linear infinite; vertical-align: -2px; }
.cs-recbar { display: inline-flex; align-items: center; gap: 8px; }
.cs-recbar__track { width: 54px; height: 5px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.cs-recbar__fill { height: 100%; background: var(--success); border-radius: 999px; }

/* ---- transcript ---- */
.cs-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; padding: 0; margin-bottom: 16px; }
.cs-back:hover { color: var(--text-primary); }
.cs-turn { margin-top: 18px; }
.cs-turn__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cs-turn__label::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.cs-msg { display: flex; gap: 12px; margin-bottom: 16px; }
.cs-msg__ava { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.cs-msg__ava--buyer { background: var(--stone-200); color: var(--text-secondary); }
.cs-msg__ava--engine { border-radius: 8px; background: var(--accent-subtle); color: var(--accent-active); }
.cs-msg__main { flex: 1; min-width: 0; }
.cs-msg__who { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.cs-msg__body { font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; max-width: 64ch; }
.cs-msg__body--engine { color: var(--text-secondary); }

.cs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-cls { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 12px; background: var(--surface-card); }
.cs-cls__brand { font-weight: 600; color: var(--text-primary); }
.cs-cls__tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.cs-citelist { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-cite { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); border: 1px solid var(--border-subtle); background: var(--bg-subtle); padding: 4px 9px; border-radius: var(--radius-sm); text-decoration: none; }
.cs-cite:hover { border-color: var(--border-strong); color: var(--text-primary); }
.cs-cite svg { color: var(--text-tertiary); }

/* ---- overview bottom row: engines + fan-out ---- */
.cs-ovbottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.cs-copybtn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; }
.cs-copybtn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); }
.cs-copybtn svg { color: var(--text-tertiary); }
.cs-fanout { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 16px; }
.cs-qtag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.cs-qtag:hover { border-color: var(--accent); color: var(--text-primary); background: var(--surface-card); }
.cs-qtag svg { color: var(--text-tertiary); }

/* ---- collapsible transcript turns ---- */
.cs-turncard { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); margin-top: 12px; overflow: hidden; box-shadow: var(--shadow-xs); }
.cs-turncard__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 14px; background: var(--bg-subtle); border: 0; cursor: pointer; text-align: left; }
.cs-turncard__head:hover { background: var(--bg-inset); }
.cs-turncard.is-open .cs-turncard__head { border-bottom: 1px solid var(--border-subtle); }
.cs-turncard__chev { color: var(--text-tertiary); transition: transform .15s var(--ease-out); flex: none; }
.cs-turncard.is-open .cs-turncard__chev { transform: rotate(90deg); }
.cs-turncard__label { font-size: 13px; font-weight: 600; }
.cs-turncard__hint { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.cs-turncard__body { padding: 16px 16px 4px; }
.cs-turncard__body .cs-msg:last-child { margin-bottom: 10px; }

.cs-table__rowbtn.is-disabled { cursor: default; }
.cs-table__rowbtn.is-disabled:hover td { background: transparent; }

/* ---- insights ---- */
.cs-ins__summary { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); max-width: 70ch; }
.cs-ins__group { margin-top: 30px; }
.cs-ins__grouphead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cs-ins__groupicon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.cs-ins__groupicon--onsite { background: var(--accent-subtle); color: var(--accent); }
.cs-ins__groupicon--offsite { background: var(--bg-inset); color: var(--text-secondary); }
.cs-ins__grouptitle { font-size: 15px; font-weight: 600; }
.cs-ins__groupsub { font-size: 12.5px; color: var(--text-tertiary); }

/* recommendations — generate-on-demand */
.cs-gen { max-width: 460px; margin: 34px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cs-gen__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cs-gen__t { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.cs-gen__d { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.cs-gen__warn { margin: 16px 0 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--warning); background: var(--warning-bg); border: 1px solid color-mix(in oklab, var(--warning) 22%, transparent); padding: 6px 12px; border-radius: 999px; }
.cs-gen__warn b { color: var(--text-primary); }

/* main recommendation (synthesis box) */
.cs-recsummary { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface-card); padding: 16px 18px; box-shadow: var(--shadow-xs); max-width: 80ch; }

/* recommendation card */
.cs-rec { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 12px; }
.cs-rec__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-rec__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle); padding: 3px 8px; border-radius: 5px; }
.cs-rec__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cs-rec__domain { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle); padding: 3px 9px; border-radius: 999px; }
.cs-rec__directive { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); margin-bottom: 14px; max-width: 80ch; }
.cs-rec__body { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); max-width: 80ch; margin-bottom: 12px; }
.cs-rec__field { display: flex; gap: 12px; margin-top: 10px; align-items: baseline; }
.cs-rec__flabel { flex: none; width: 84px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 3px; }
.cs-rec__fbody { flex: 1; min-width: 0; }
.cs-rec__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-qtag--plain { cursor: default; }
.cs-qtag--plain:hover { border-color: var(--border-subtle); color: var(--text-secondary); background: var(--bg-subtle); }
.cs-rec__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-accent); text-decoration: none; }
.cs-rec__link:hover { text-decoration: underline; }
.cs-rec__link svg { color: var(--text-tertiary); }
.cs-rec__why { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-default); }
.cs-rec__whytoggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.cs-rec__whytoggle:hover { color: var(--text-primary); }
.cs-rec__whytoggle svg { color: var(--text-tertiary); transition: transform .15s var(--ease-out); }
.cs-rec__whytoggle.is-open svg { transform: rotate(90deg); }
.cs-rec__why2 { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary); max-width: 80ch; }

/* ============================================================
   LIBRARY
   ============================================================ */
.cs-lib { display: grid; gap: 18px; }
.cs-libcard { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.cs-libcard__head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.cs-libcard__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-inset); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex: none; }
.cs-libcard__t { font-size: 15px; font-weight: 600; }
.cs-libcard__s { font-size: 12.5px; color: var(--text-tertiary); }
.cs-libcard__count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 2px 8px; border-radius: 999px; }
.cs-libitem { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-subtle); }
.cs-libitem:last-child { border-bottom: 0; }
.cs-libitem__main { flex: 1; min-width: 0; }
.cs-libitem__name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.cs-libitem__desc { font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px; }
.cs-libitem__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cs-libitem__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.cs-libfoot { padding: 12px 18px; background: var(--bg-subtle); display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.cs-avpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-avpick__box { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex: none; }
.cs-avpick__label { font-size: 12px; color: var(--text-tertiary); }
.cs-avpick__opts { display: flex; gap: 5px; }
.cs-avpick__sw { width: 26px; height: 26px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(14,13,11,.07); }
.cs-avpick__sw.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }

/* mini tag */
.cs-tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 2px 7px; border-radius: var(--radius-sm); }
.cs-tag--neg { color: var(--danger); background: var(--danger-bg); border-color: transparent; }

/* ============================================================
   CREDITS
   ============================================================ */
.cs-balance { display: flex; align-items: center; gap: 22px; padding: 24px 26px; }
.cs-balance__v { font-size: 44px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-balance__k { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.cs-balance__spacer { flex: 1; }

.cs-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cs-pack { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.cs-pack.is-best { border-color: var(--accent-muted); box-shadow: 0 0 0 1px var(--accent-muted), var(--shadow-sm); }
.cs-pack__badge { position: absolute; top: -9px; left: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.cs-pack__name { font-size: 14px; font-weight: 600; }
.cs-pack__credits { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cs-pack__credits small { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.cs-pack__note { font-size: 12px; color: var(--text-tertiary); }
.cs-pack__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cs-pack__price { font-size: 16px; font-weight: 600; }

.cs-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-delta--pos { color: var(--success); }
.cs-delta--neg { color: var(--text-secondary); }
.cs-delta--zero { color: var(--text-tertiary); }

.cs-typebadge { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; }
.cs-typebadge--capture { background: var(--bg-inset); color: var(--text-secondary); }
.cs-typebadge--hold { background: var(--warning-bg); color: var(--warning); }
.cs-typebadge--bonus { background: var(--success-bg); color: var(--success); }

.cs-refill { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field__label { font-size: 13px; font-weight: 500; }
.cs-field__hint { font-size: 12px; color: var(--text-tertiary); }
.cs-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   ACCOUNT
   ============================================================ */
.cs-acct { display: grid; gap: 18px; }
.cs-acctcard { padding: 20px 22px; }
.cs-acctcard__t { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.cs-acctcard__t svg { color: var(--text-tertiary); }
.cs-deflist { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; font-size: 13.5px; }
.cs-deflist dt { color: var(--text-tertiary); }
.cs-deflist dd { margin: 0; color: var(--text-primary); }
.cs-cardrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.cs-cardrow:last-of-type { border-bottom: 0; }
.cs-cardchip { width: 38px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--stone-700), var(--stone-900)); flex: none; display: flex; align-items: center; justify-content: center; }
.cs-cardchip::after { content: ""; width: 14px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.22); }
.cs-cardnum { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-primary); }
.cs-cardexp { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }

/* ============================================================
   Dialog (New run)
   ============================================================ */
.cs-overlay { position: fixed; inset: 0; background: rgba(14,13,11,.42); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; z-index: 60; overflow-y: auto; }
.cs-dialog { width: 100%; max-width: 580px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: no-preference) {
  .cs-overlay { animation: cs-fade .14s ease-out both; }
  .cs-dialog { animation: cs-pop .16s var(--ease-out) both; }
}
@keyframes cs-fade { from { background: rgba(14,13,11,0); } }
@keyframes cs-pop { from { transform: translateY(8px); } }
.cs-dialog__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); }
.cs-dialog__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-subtle); color: var(--accent-active); display: flex; align-items: center; justify-content: center; flex: none; }
.cs-dialog__t { font-size: 16px; font-weight: 600; }
.cs-dialog__s { font-size: 12.5px; color: var(--text-tertiary); }
.cs-dialog__body { padding: 20px; display: flex; flex-direction: column; gap: 18px; max-height: 64vh; overflow-y: auto; }
.cs-dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* engine multiselect */
.cs-engsel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-engopt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; background: var(--surface-card); font-size: 13.5px; font-weight: 500; transition: border-color .12s, background .12s; }
.cs-engopt:hover { border-color: var(--border-strong); }
.cs-engopt.is-on { border-color: var(--accent); background: var(--accent-subtle); }
.cs-engopt__check { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.cs-engopt.is-on .cs-engopt__check { background: var(--accent); border-color: var(--accent); }

/* stepper */
.cs-step { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); }
.cs-step button { width: 34px; height: 36px; border: 0; background: transparent; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.cs-step button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.cs-step__val { width: 46px; text-align: center; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); height: 36px; line-height: 36px; }

.cs-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border-subtle); }
.cs-toggle-row__main { flex: 1; }
.cs-toggle-row__t { font-size: 13.5px; font-weight: 500; }
.cs-toggle-row__d { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.cs-estimate { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; }
.cs-estimate b { color: var(--text-primary); }

/* empty states */
.cs-empty { text-align: center; padding: 60px 20px; color: var(--text-tertiary); }

/* misc focus */
.cs-iconbtn { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cs-iconbtn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-subtle); }
.cs-textbtn { font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.cs-textbtn:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); }
.cs-textbtn--danger:hover { color: var(--danger); border-color: var(--danger); }

/* ============================================================
   PLAN + CREDITS (subscriptions, flexible refill)
   ============================================================ */

/* plan reference strip (Credits page) + usage strip (Plan page) */
.cs-strip { display: flex; align-items: center; gap: 26px; padding: 16px 22px; flex-wrap: wrap; }
.cs-strip__plan { display: flex; align-items: baseline; gap: 10px; }
.cs-strip__name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cs-strip__price { font-size: 13px; color: var(--text-tertiary); font-family: var(--font-mono); }
.cs-strip__divider { width: 1px; align-self: stretch; background: var(--border-subtle); }
.cs-strip__facts { display: flex; gap: 28px; flex: 1; flex-wrap: wrap; }
.cs-fact__k { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.cs-fact__v { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-fact__v em { font-style: normal; color: var(--accent); }
.cs-usage { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.cs-meter { width: 120px; height: 6px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.cs-meter__fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* flexible refill control */
.cs-refillctl { display: flex; gap: 34px; padding: 24px 26px; align-items: stretch; flex-wrap: wrap; }
.cs-refillctl__main { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.cs-amt { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 16px; width: fit-content; background: var(--surface-card); }
.cs-amt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.cs-amt__cur { font-size: 30px; font-weight: 600; color: var(--text-tertiary); letter-spacing: -.02em; }
.cs-amt__in { font: inherit; font-size: 36px; font-weight: 600; letter-spacing: -.03em; border: 0; outline: 0; width: 140px; background: transparent; color: var(--text-primary); font-variant-numeric: tabular-nums; padding: 0; }
.cs-amt__in::-webkit-outer-spin-button, .cs-amt__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-chip { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; font-variant-numeric: tabular-nums; }
.cs-chip.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); }
.cs-minnote { font-size: 12px; color: var(--text-tertiary); }
.cs-minnote.is-err { color: var(--danger); }
.cs-refillctl__side { width: 280px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; border-left: 1px solid var(--border-subtle); padding-left: 30px; }
.cs-get__v { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.cs-get__v small { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.cs-get__rate { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; }
.cs-get__rate em { font-style: normal; color: var(--accent); font-weight: 500; }

/* plan tiers */
.cs-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.cs-plan { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.cs-plan.is-current { border-color: var(--accent-muted); box-shadow: 0 0 0 1px var(--accent-muted), var(--shadow-sm); }
.cs-plan__badge { position: absolute; top: -9px; left: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); border-radius: 6px; padding: 3px 8px; }
.cs-plan__cur { position: absolute; top: -9px; right: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--surface-card); border: 1px solid var(--accent-muted); border-radius: 6px; padding: 3px 8px; }
.cs-plan__name { font-size: 15px; font-weight: 600; }
.cs-plan__priceline { display: flex; align-items: baseline; gap: 4px; }
.cs-plan__price { font-size: 36px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-plan__per { font-size: 14px; color: var(--text-tertiary); font-weight: 500; }
.cs-plan__tag { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; min-height: 36px; }
.cs-feats { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 11px; }
.cs-feat { display: flex; gap: 10px; font-size: 13px; align-items: flex-start; line-height: 1.4; }
.cs-feat svg { color: var(--accent); margin-top: 1px; flex: none; }
.cs-feat strong { font-weight: 600; }
.cs-feat__sub { color: var(--text-tertiary); }
.cs-plan__cta { margin-top: auto; }
.cs-plan__cta button { width: 100%; justify-content: center; }

@media (max-width: 920px) { .cs-plans { grid-template-columns: 1fr; } }

/* ============================ LAYER 3: reputation (rp-*) =================== */

/* Reputation redesign — styles layered on console.css tokens. Prefix rp- */

/* (the kit's .rp-banner context strip is unused — our shell puts that context
   in the chrome topbar instead) */

.rp-context { padding: 18px 0 0; }

/* workspace group: switcher + nested targets, visually one unit */
.rp-wsgroup { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-xs); overflow: visible; }
.rp-wsline { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.rp-wsswitch { position: relative; }
.rp-wsbtn { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px 6px 7px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.rp-wsbtn:hover { border-color: var(--border-strong); }
.rp-wsbtn.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.rp-wscount { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.rp-wsmenu { position: absolute; top: calc(100% + 6px); left: 0; width: 340px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden; }
.rp-wsmenu__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-tertiary); }
.rp-wsmenu__search input { flex: 1; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--text-primary); font-family: var(--font-sans); }
.rp-wsmenu__list { max-height: 300px; overflow-y: auto; padding: 5px; }
.rp-wsmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; text-align: left; }
.rp-wsmenu__item:hover { background: var(--bg-inset); }
.rp-wsmenu__item.is-current { background: var(--accent-subtle); }
.rp-wsmenu__txt { display: flex; flex-direction: column; min-width: 0; }
.rp-wsmenu__txt b { font-size: 13.5px; font-weight: 600; }
.rp-wsmenu__txt span { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-wsmenu__item .rp-brand__chip { margin-left: 0; }
.rp-wsmenu__item > svg { margin-left: auto; flex: none; }
.rp-wsmenu__empty { padding: 16px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
.rp-wsmenu__foot { border-top: 1px solid var(--border-subtle); padding: 5px; }
.rp-wsmenu__new { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.rp-wsmenu__new:hover { background: var(--bg-inset); color: var(--text-primary); }
.rp-targets { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }
.rp-targets__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); flex: none; }
.rp-targets__label svg { color: var(--border-strong); }
.rp-targets__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-brand__chip { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; flex: none; }
.rp-tracker { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; background: transparent; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.rp-tracker:hover { border-color: var(--border-strong); background: var(--surface-card); }
.rp-tracker.is-active { border-color: var(--accent); background: var(--surface-card); color: var(--accent-active); font-weight: 600; box-shadow: var(--shadow-xs); }
.rp-tracker__def { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; color: var(--text-tertiary); background: var(--bg-inset); padding: 1px 6px; border-radius: 999px; }
.rp-tracker--add { border-style: dashed; color: var(--text-tertiary); }
.rp-tracker--add:hover { color: var(--text-secondary); }

/* profile summary line */
.rp-profile { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); min-height: 28px; flex-wrap: wrap; }
.rp-profile__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 2px; }
.rp-profile__item { display: inline-flex; align-items: center; gap: 5px; }
.rp-profile__item b { font-weight: 500; color: var(--text-primary); }
.rp-profile__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.rp-profile__edited { width: 5px; height: 5px; border-radius: 50%; background: var(--warning); display: inline-block; }
.rp-profile__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--text-tertiary); font-size: 12px; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); }
.rp-profile__edit:hover { background: var(--bg-inset); color: var(--text-primary); }

/* ---- hero ---- */
.rp-hero { display: grid; grid-template-columns: 176px 1fr 264px; align-items: stretch; margin-top: 16px; overflow: hidden; }
.rp-hero__ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px; border-right: 1px solid var(--border-subtle); }
.rp-ring { position: relative; width: 108px; height: 108px; }
.rp-ring svg { transform: rotate(-90deg); }
.rp-ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rp-ring__band { font-size: 13px; font-weight: 600; color: var(--success); }
.rp-ring__delta { font-family: var(--font-mono); font-size: 10.5px; color: var(--success); background: var(--success-bg); padding: 2px 8px; border-radius: 999px; }
.rp-hero__subs { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 20px 24px; min-width: 0; }
.rp-sub { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.rp-sub__k { font-size: 12.5px; color: var(--text-secondary); }
.rp-sub__track { height: 6px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.rp-sub__fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s var(--ease-out); }
.rp-sub__fill.is-soft { background: var(--warning); }
.rp-sub__v { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rp-hero__meta { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); margin-top: 4px; }
.rp-hero__meta .rp-score__meta, .rp-hero__meta .rp-scorehow { font-size: 11.5px; line-height: 1.5; }
.rp-hero__meta .rp-scorehow { margin-top: 0; }
.rp-hero__meta a { color: var(--accent); text-decoration: none; }
.rp-hero__meta a:hover { text-decoration: underline; }
.rp-hero__act { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 18px; border-left: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.rp-hero__actrow { display: flex; align-items: center; gap: 8px; }
.rp-config__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.rp-config__row { display: flex; align-items: center; gap: 8px; }
.rp-config__inline { font-size: 12px; color: var(--text-secondary); flex: none; }
.rp-seg--full { width: 100%; }
.rp-seg--full button { flex: 1; }
.rp-engtoggle { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.rp-engtoggle:hover { border-color: var(--border-strong); }
.rp-engtoggle svg:last-child { margin-left: auto; color: var(--text-tertiary); transition: transform .15s var(--ease-out); }
.rp-engtoggle.is-open svg:last-child { transform: rotate(180deg); }
.rp-engdots { display: inline-flex; gap: 3px; }
.rp-engdots .dot { width: 6px; height: 6px; border-radius: 50%; }
.rp-hero__est { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); line-height: 1.5; }
.rp-hero__est svg { color: var(--accent); vertical-align: -2px; margin-right: 5px; }
.rp-cfgbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); }
.rp-cfgbtn:hover { color: var(--text-primary); }
.rp-cfgbtn svg { transition: transform .15s var(--ease-out); color: var(--text-tertiary); }
.rp-cfgbtn.is-open svg { transform: rotate(90deg); }

/* config strip */
.rp-config { border-top: 1px solid var(--border-subtle); grid-column: 1 / -1; padding: 16px 20px; display: flex; align-items: flex-start; gap: 22px; background: var(--surface-card); flex-wrap: wrap; }
.rp-config__field { display: flex; flex-direction: column; gap: 7px; }
.rp-config__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.rp-seg { display: inline-flex; background: var(--bg-inset); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.rp-seg button { border: 0; background: transparent; padding: 5px 13px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.rp-seg button.is-active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); font-weight: 600; }
.rp-engines { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-engine { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.rp-engine .dot { width: 6px; height: 6px; border-radius: 50%; }
.rp-engine.is-on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-active); }
.rp-confnote { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--warning); background: var(--warning-bg); border: 1px solid rgba(199,126,27,.25); border-radius: var(--radius-md); padding: 8px 12px; max-width: 420px; }
.rp-confnote svg { flex: none; margin-top: 1px; }

/* hero: ready (no check yet) */
.rp-hero--ready .rp-ring__dash { width: 108px; height: 108px; border-radius: 50%; border: 2px dashed var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 22px; }
.rp-ready__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.rp-ready__sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; max-width: 480px; }

/* hero: checking / progress */
.rp-progress { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.rp-progress__bar { height: 6px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.rp-progress__fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .8s linear; }
.rp-progress__msg { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; min-height: 20px; }
.rp-progress__msg .rp-fade { animation: rpFade .45s var(--ease-out); }
@keyframes rpFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.rp-progress__pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rp-spinring { width: 108px; height: 108px; border-radius: 50%; border: 3px solid var(--bg-inset); border-top-color: var(--accent); animation: rpSpin 1s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-spinring { animation: none; } }
.rp-skel { border-radius: 999px; background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-subtle) 50%, var(--bg-inset) 75%); background-size: 200% 100%; animation: rpShimmer 1.4s linear infinite; }
@keyframes rpShimmer { to { background-position: -200% 0; } }

/* ---- setup / generating state ---- */
.rp-setup { max-width: 560px; margin: 40px auto 0; text-align: center; padding: 40px 44px 36px; }
.rp-setup__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-subtle); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.rp-setup__title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.rp-setup__sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin: 8px auto 20px; max-width: 400px; }
.rp-setup__form { display: flex; gap: 8px; }
.rp-setup__form .sm-input, .rp-setup__form input { flex: 1; }
.rp-setup__alt { display: inline-block; margin-top: 14px; font-size: 12.5px; color: var(--text-tertiary); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rp-setup__alt:hover { color: var(--text-primary); }
.rp-setup__steps { display: flex; flex-direction: column; gap: 0; margin-top: 26px; text-align: left; }
.rp-setupstep { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.rp-setupstep__n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-inset); color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.rp-setupstep.is-done .rp-setupstep__n { background: var(--success-bg); color: var(--success); }
.rp-setupstep.is-current .rp-setupstep__n { background: var(--accent-subtle); color: var(--accent); }
.rp-setupstep b { font-size: 13px; font-weight: 600; display: block; }
.rp-setupstep span { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.45; }
.rp-ghostq { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--border-subtle); }
.rp-ghostq:first-child { border-top: 0; }

/* ---- sticky tabbar ---- */
.rp-tabwrap { position: sticky; top: 0; z-index: 30; margin-top: 26px; background: rgba(250,250,249,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.rp-tabwrap__in { display: flex; align-items: flex-end; gap: 4px; max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.rp-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 12px 11px; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.rp-tab:hover { color: var(--text-primary); }
.rp-tab.is-active { color: var(--text-primary); font-weight: 600; }
.rp-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.rp-tab__count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); background: var(--bg-inset); padding: 1px 6px; border-radius: 999px; }
.rp-tab.is-active .rp-tab__count { background: var(--accent-subtle); color: var(--accent); }
.rp-tabctx { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-bottom: 7px; opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.rp-tabwrap.is-stuck .rp-tabctx { opacity: 1; transform: none; pointer-events: auto; }
.rp-tabctx__ws { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.rp-tabctx__score { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--success); }
.rp-tabctx__score .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ---- panels shared ---- */
.rp-panel { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.rp-card__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 0; }
.rp-card__title { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.rp-card__sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5; }
.rp-card__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.rp-card__body { padding: 14px 20px 18px; }

/* overview */
.rp-summary { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.rp-summary b { color: var(--text-primary); font-weight: 600; }
.rp-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-mention { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.rp-mention:first-child { border-top: 0; }
.rp-mention__n { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); flex: none; display: inline-flex; align-items: center; gap: 4px; }
.rp-mention__n .dot { width: 5px; height: 5px; border-radius: 50%; }
.rp-verdict { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* values coverage */
.rp-values__stat { display: flex; align-items: center; gap: 14px; }
.rp-values__legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); margin-left: auto; }
.rp-values__legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rp-val { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.rp-val svg { flex: none; }
.rp-val--yes { background: var(--accent-subtle); color: var(--accent-active); }
.rp-val--part { background: var(--warning-bg); color: var(--warning); }
.rp-val--no { background: var(--bg-subtle); color: var(--text-tertiary); border-color: var(--border-subtle); }
.rp-covbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; flex: 1; max-width: 320px; background: var(--bg-inset); }
.rp-covbar span { height: 100%; }

/* aliases */
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { font-size: 12px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 3px 10px; border-radius: 999px; }
.rp-chip--add { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-card); border: 1px solid var(--accent-muted); color: var(--accent-active); cursor: pointer; }
.rp-chip--add.is-off { border-style: dashed; color: var(--text-tertiary); background: transparent; }

/* competitors */
.rp-compgroup { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding: 16px 20px 4px; display: flex; align-items: center; gap: 8px; }
.rp-compgroup span.hint { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 11.5px; }
.rp-comp { display: grid; grid-template-columns: 18px 1fr auto; gap: 4px 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); align-items: start; }
.rp-comp__name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rp-comp__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }
.rp-comp__d { grid-column: 2 / -1; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; max-width: 720px; }
.rp-comp__acts { display: flex; gap: 6px; }
.rp-minibtn { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.rp-minibtn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rp-selectbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 12.5px; color: var(--text-tertiary); }

/* questions */
.rp-q { display: grid; grid-template-columns: 86px 1fr auto; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); align-items: start; }
.rp-q:hover { background: var(--bg-subtle); }
.rp-q__text { font-size: 13.5px; line-height: 1.55; }
.rp-q__persona { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; color: var(--text-tertiary); }
.rp-q__acts { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .12s; }
.rp-q:hover .rp-q__acts { opacity: 1; }
.rp-q__won { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 2px 7px; border-radius: 999px; flex: none; }
.rp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer; }
.rp-iconbtn:hover { background: var(--bg-inset); color: var(--text-primary); }
.rp-qfoot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }

/* comparables */
.rp-cmphead, .rp-cmp { display: grid; grid-template-columns: 200px 72px 110px 1fr 90px; gap: 14px; padding: 11px 20px; align-items: start; }
.rp-cmphead { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding-bottom: 6px; }
.rp-cmp { border-top: 1px solid var(--border-subtle); font-size: 13px; }
.rp-cmp__name { font-weight: 600; font-size: 13px; line-height: 1.4; }
.rp-cmp__n { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-sent { height: 6px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; margin-top: 6px; }
.rp-sent span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rp-claims { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-claim { font-size: 12.5px; line-height: 1.45; display: flex; gap: 6px; }
.rp-claim .sig { font-family: var(--font-mono); flex: none; }
.rp-claim--pro { color: var(--accent-active); }
.rp-claim--con { color: var(--warning); }
.rp-claim--none { color: var(--text-tertiary); }
.rp-cmp__more { align-self: start; background: none; border: 0; padding: 0; font-size: 11.5px; color: var(--text-tertiary); cursor: pointer; text-align: left; }
.rp-cmp__more:hover { color: var(--accent); }
.rp-cmp__over { font-family: var(--font-mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }

/* sources */
.rp-srcgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.rp-page { display: grid; grid-template-columns: minmax(0, 1fr) 72px 30px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border-subtle); }
.rp-page:first-child { border-top: 0; }
.rp-page__path { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-page__path .ext { color: var(--text-tertiary); }
.rp-page__bar { height: 5px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.rp-page__bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rp-page__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.rp-qgroup { border-top: 1px solid var(--border-subtle); }
.rp-qgroup:first-child { border-top: 0; }
.rp-qgroup__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.rp-qgroup__head svg { color: var(--text-tertiary); transition: transform .15s var(--ease-out); flex: none; }
.rp-qgroup.is-open .rp-qgroup__head svg { transform: rotate(90deg); }
.rp-qgroup__name { font-size: 13px; font-weight: 600; }
.rp-qgroup__hint { font-size: 12px; color: var(--text-tertiary); }
.rp-qgroup__count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); background: var(--bg-inset); padding: 1px 7px; border-radius: 999px; flex: none; }
.rp-qgroup__list { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 14px 23px; }
.rp-qtag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); padding: 3px 9px; border-radius: 999px; max-width: 100%; }
.rp-qtag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rp-qtag svg { flex: none; color: var(--text-tertiary); }

/* alerts */
.rp-okline { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--success); font-weight: 500; }

/* empty overview (ready state) */
.rp-empty { padding: 36px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }
.rp-empty b { color: var(--text-secondary); }

/* state jumper (prototype chrome) */
.rp-jumper { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 2px; background: var(--ink-900, #1A1815); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-lg); }
.rp-jumper__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 0 8px 0 10px; }
.rp-jumper button { border: 0; background: transparent; color: rgba(255,255,255,.65); font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.rp-jumper button:hover { color: #fff; }
.rp-jumper button.is-active { background: rgba(255,255,255,.16); color: #fff; }

/* misc */
.rp-a, .rp-panel a { color: var(--accent); text-decoration: none; }
.rp-panel a:hover { text-decoration: underline; }
.rp-savechanges { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; margin-top: 4px; pointer-events: none; }
.rp-savechanges > * { pointer-events: auto; box-shadow: var(--shadow-lg); }

/* ============================ LAYER 4: console IA (ia-*) =================== */

/* Console IA redesign — styles layered on console.css + rep.css. Prefix ia- */

/* ---- journey strip (Home + shared) ---- */
.ia-journey { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; align-items: stretch; gap: 0; }
.ia-jstep { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); cursor: pointer; text-align: left; transition: border-color .12s; position: relative; }
.ia-jstep:hover { border-color: var(--border-strong); }
.ia-jstep.is-attn { border-color: rgba(199,126,27,.45); }
.ia-jstep__top { display: flex; align-items: center; gap: 8px; }
.ia-jstep__n { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.ia-jstep__badge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.ia-jstep__badge.is-ok { color: var(--success); background: var(--success-bg); }
.ia-jstep__badge.is-warn { color: var(--warning); background: var(--warning-bg); }
.ia-jstep__badge.is-mute { color: var(--text-tertiary); background: var(--bg-inset); }
.ia-jstep__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.ia-jstep__name svg { color: var(--text-tertiary); }
.ia-jstep__d { font-size: 12px; color: var(--text-tertiary); line-height: 1.45; }
.ia-jarrow { display: flex; align-items: center; justify-content: center; color: var(--border-strong); }

/* ---- KPI row ---- */
.ia-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ia-kpi { padding: 15px 17px; display: flex; flex-direction: column; gap: 3px; }
.ia-kpi__k { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.ia-kpi__v { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; display: flex; align-items: baseline; gap: 8px; }
.ia-kpi__delta { font-family: var(--font-mono); font-size: 10px; padding: 1px 7px; border-radius: 999px; }
.ia-kpi__delta.is-up { color: var(--success); background: var(--success-bg); }
.ia-kpi__delta.is-warn { color: var(--warning); background: var(--warning-bg); }
.ia-kpi__delta.is-mute { color: var(--text-tertiary); background: var(--bg-inset); }
.ia-kpi__sub { font-size: 11.5px; color: var(--text-tertiary); }

/* ---- action queue ---- */
.ia-act { display: grid; grid-template-columns: 132px 1fr auto; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); align-items: start; }
.ia-act:hover { background: var(--bg-subtle); }
.ia-act__src { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; justify-self: start; margin-top: 1px; white-space: nowrap; }
.ia-act__src.is-align { color: var(--warning); background: var(--warning-bg); }
.ia-act__src.is-rep { color: var(--accent-active); background: var(--accent-subtle); }
.ia-act__src.is-alert { color: #B0473A; background: #F7E7E6; }
.ia-act__t { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ia-act__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; max-width: 640px; }

/* ---- checklist (new workspace) ---- */
.ia-check { display: flex; gap: 13px; padding: 13px 20px; border-top: 1px solid var(--border-subtle); align-items: flex-start; }
.ia-check:first-child { border-top: 0; }
.ia-check__n { width: 23px; height: 23px; border-radius: 50%; background: var(--bg-inset); color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.ia-check.is-done .ia-check__n { background: var(--success-bg); color: var(--success); }
.ia-check.is-current .ia-check__n { background: var(--accent-subtle); color: var(--accent); }
.ia-check__t { font-size: 13.5px; font-weight: 600; }
.ia-check.is-done .ia-check__t { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.ia-check__d { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; margin-top: 2px; max-width: 560px; }
.ia-check__cta { margin-left: auto; flex: none; margin-top: 2px; }

/* ---- input pipeline (Reputation) ---- */
.ia-pipe { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr 24px 1.35fr; align-items: stretch; padding: 0; overflow: visible; }
/* two-cell variant (owner UAT 2026-09-14): ONE info cell -> the run cell, used
   by /reputation/ and by /discovery/'s run bar. */
.ia-pipe--solo { grid-template-columns: 1fr 24px 1.35fr; }
@media (max-width: 760px) { .ia-pipe--solo { grid-template-columns: 1fr; } .ia-pipe--solo .ia-pipe__join { display: none; } .ia-pipe--solo .ia-pipe__run { border-left: 0; border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }
.ia-pipe__cell { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia-pipe__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.ia-pipe__label b { color: var(--accent); font-weight: 600; }
.ia-pipe__v { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ia-pipe__meta { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.45; }
.ia-pipe__meta a, .ia-pipe__meta button.lnk { color: var(--accent); background: none; border: 0; padding: 0; font-size: 11.5px; cursor: pointer; text-decoration: none; font-family: var(--font-sans); }
.ia-pipe__meta a:hover, .ia-pipe__meta button.lnk:hover { text-decoration: underline; }
.ia-pipe__join { display: flex; align-items: center; justify-content: center; color: var(--border-strong); }
.ia-pipe__run { border-left: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ia-pipe__targets { display: flex; gap: 5px; flex-wrap: wrap; }
.ia-pipe__target { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--surface-card); cursor: pointer; }
.ia-pipe__target.is-active { border-color: var(--accent); color: var(--accent-active); font-weight: 600; box-shadow: var(--shadow-xs); }
.ia-pipe__ok { color: var(--success); }
.ia-pipe__warn { color: var(--warning); }

/* ---- alignment page ---- */
.ia-alhero { display: grid; grid-template-columns: 176px 1fr 250px; align-items: stretch; overflow: hidden; }
.ia-alhero__ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 16px; border-right: 1px solid var(--border-subtle); }
.ia-alhero__mid { padding: 18px 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ia-alhero__act { display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 18px; border-left: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.ia-alstat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.ia-alstat b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }
.ia-alstat .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.ia-alitem { display: grid; grid-template-columns: 86px 1fr auto; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--border-subtle); align-items: start; }
.ia-alitem__kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); background: var(--bg-inset); padding: 2px 8px; border-radius: 999px; justify-self: start; margin-top: 2px; }
.ia-alitem__t { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ia-alitem__where { font-family: var(--font-mono); font-size: 9.5px; color: var(--warning); background: var(--warning-bg); padding: 1px 7px; border-radius: 999px; font-weight: 400; }
.ia-alitem__q { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; margin-top: 3px; max-width: 680px; }
.ia-alitem__acts { display: flex; gap: 6px; margin-top: 2px; }
.ia-strat { padding: 13px 20px; border-top: 1px solid var(--border-subtle); }
.ia-strat__t { font-size: 13.5px; font-weight: 600; }
.ia-strat__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 3px; max-width: 720px; }

/* ---- history ---- */
.ia-hfilters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.ia-hrow { display: grid; grid-template-columns: 76px 150px 1fr 90px 70px 90px 110px; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border-subtle); align-items: center; font-size: 13px; }
.ia-hrow--head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); border-top: 0; padding-bottom: 7px; }
.ia-hrow__when { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.ia-htype { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; justify-self: start; }
.ia-htype.is-rep { color: var(--accent-active); background: var(--accent-subtle); }
.ia-htype.is-align { color: var(--warning); background: var(--warning-bg); }
.ia-htype.is-probe { color: var(--success); background: var(--success-bg); }
.ia-htype.is-api { color: var(--text-tertiary); background: var(--bg-inset); }
.ia-hrow__cr { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }
.ia-hrow__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); }
.ia-hrow__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ia-hrow__go { text-align: right; }
.ia-hrow__go a { font-size: 12px; color: var(--accent); text-decoration: none; }
.ia-hrow__go a:hover { text-decoration: underline; }

/* ---- library page ---- */
.ia-libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ia-librow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-subtle); font-size: 13px; }
.ia-librow:first-child { border-top: 0; }
.ia-libnote { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); background: var(--accent-subtle); border: 1px solid var(--accent-muted); border-radius: var(--radius-md); padding: 10px 14px; line-height: 1.5; }
.ia-libnote svg { color: var(--accent); flex: none; margin-top: 1px; }

/* ---- shared ---- */
.ia-sechead { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; }
.ia-sechead__t { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.ia-sechead__hint { font-size: 12px; color: var(--text-tertiary); }
.ia-sechead__right { margin-left: auto; }
.ia-wspills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 22px; }
.ia-wspill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 7px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.ia-wspill.is-active { border-color: var(--accent); color: var(--accent-active); font-weight: 600; box-shadow: var(--shadow-xs); }
.ia-newbadge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; color: var(--text-tertiary); background: var(--bg-inset); padding: 1px 6px; border-radius: 999px; }
.ia-empty { padding: 30px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }
.ia-empty b { color: var(--text-secondary); }
a.ia-a { color: var(--accent); text-decoration: none; }
a.ia-a:hover { text-decoration: underline; }

/* ============================================================
   AREA IDENTITY — each measurement area gets its own accent.
   Reputation = indigo · Recommendation = teal · Alignment = amber · Define = indigo
   ============================================================ */
.ia-area--rep, .ia-area--def { --area: var(--indigo-500, #3D63DD); --area-fg: var(--indigo-700, #2740A1); --area-bg: var(--indigo-50, #EEF1FD); }
.ia-area--rec { --area: #0F766E; --area-fg: #0B5C55; --area-bg: #E4F3F0; }
.ia-area--align { --area: var(--warning, #C77E1B); --area-fg: #9A6212; --area-bg: var(--warning-bg, #FAF0DD); }

/* sidebar step badges + sublabel + per-area active icon */
.cs-sb__sublabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); padding: 8px 10px 3px; }
.ia-nav--reputation.is-active svg { color: var(--indigo-500); }
.ia-nav--recommendation.is-active svg { color: #0F766E; }
.ia-nav--align.is-active svg { color: var(--warning); }
.ia-nav--recommendation.is-active { --area-bg: #E4F3F0; --area-fg: #0B5C55; }
.ia-nav--align.is-active { --area-bg: var(--warning-bg); --area-fg: #9A6212; }

/* ===== shared context header (ws switcher + targets + profile) ===== */
.ia-ctx { background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--area, var(--accent)); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 14px 18px 15px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 11px; }
.ia-ctx__eyebrow { display: flex; align-items: center; gap: 8px; }
.ia-ctx__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--area-fg, var(--accent-active)); background: var(--area-bg, var(--accent-subtle)); padding: 3px 10px 3px 8px; border-radius: 999px; }
.ia-ctx__step { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.ia-ctx__row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ia-ctx__label, .ia-ctx__tlabel, .ia-ctx__plabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); }
.ia-ctx__count { font-size: 11.5px; color: var(--text-tertiary); }
.ia-wsswitch { position: relative; }
.ia-wsbtn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 8px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.ia-wsbtn:hover, .ia-wsbtn.is-open { border-color: var(--border-strong); }
.ia-wsmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 340px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.ia-wsmenu__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-tertiary); }
.ia-wsmenu__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text-primary); }
.ia-wsmenu__list { max-height: 320px; overflow-y: auto; padding: 5px; }
.ia-wsmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.ia-wsmenu__item:hover { background: var(--bg-subtle); }
.ia-wsmenu__item.is-current { background: var(--area-bg, var(--accent-subtle)); }
.ia-wsmenu__txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.ia-wsmenu__txt b { font-size: 13px; font-weight: 600; }
.ia-wsmenu__txt span { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-wsmenu__empty { padding: 18px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); }
.ia-wsmenu__foot { border-top: 1px solid var(--border-subtle); padding: 6px; }
.ia-wsmenu__new { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--area-fg, var(--accent)); cursor: pointer; }
.ia-wsmenu__new:hover { background: var(--bg-subtle); }
.ia-ctx__targets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ia-ctx__tlabel { display: inline-flex; align-items: center; gap: 5px; }
.ia-ctx__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ia-tgt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: var(--surface-card); cursor: pointer; }
.ia-tgt:hover { border-color: var(--border-strong); }
.ia-tgt.is-active { border-color: var(--area); color: var(--area-fg); background: var(--area-bg); font-weight: 600; }
.ia-tgt__def { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; color: var(--text-tertiary); }
.ia-tgt.is-active .ia-tgt__def { color: var(--area-fg); opacity: .7; }
.ia-tgt--add { border-style: dashed; color: var(--text-tertiary); }
.ia-tgt__cap { font-family: var(--font-mono); font-size: 8.5px; color: var(--text-tertiary); }
.ia-ctx__profile { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.ia-ctx__pitem { font-size: 12.5px; color: var(--text-secondary); }
.ia-ctx__pitem b { color: var(--text-primary); font-weight: 600; }
.ia-ctx__pdot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.ia-ctx__edited { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); margin-left: 5px; vertical-align: 1px; }
.ia-ctx__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.ia-ctx__edit:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ia-wsmore { font-size: 12px; color: var(--text-tertiary); }

/* ===== journey per-area accent + insight ===== */
.ia-jstep--def:hover, .ia-jstep--improve:hover { border-color: var(--indigo-300, #9DAEF1); }
.ia-jstep--align:hover { border-color: #E1B871; }
.ia-jstep--rep:hover { border-color: var(--indigo-300, #9DAEF1); }
.ia-jstep__name svg { color: var(--text-tertiary); }
.ia-jstep--def .ia-jstep__name svg { color: var(--indigo-500); }
.ia-jstep--align .ia-jstep__name svg { color: var(--warning); }
.ia-jstep--rep .ia-jstep__name svg { color: var(--indigo-500); }
.ia-jstep--improve .ia-jstep__name svg { color: #0F766E; }
.ia-insight { display: flex; gap: 15px; padding: 18px 20px; align-items: flex-start; border-left: 3px solid var(--accent); }
.ia-insight__ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ia-insight__t { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.ia-insight__d { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-top: 6px; max-width: 78ch; }
.ia-insight__links { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; }

/* ===== colored KPIs (Home scoreboard) ===== */
.ia-kpi { border-top: 2px solid transparent; }
.ia-kpi--rep { border-top-color: var(--indigo-500); }
.ia-kpi--rec { border-top-color: #0F766E; }
.ia-kpi--align { border-top-color: var(--warning); }
.ia-kpi--rep .ia-kpi__k svg { color: var(--indigo-500); }
.ia-kpi--rec .ia-kpi__k svg { color: #0F766E; }
.ia-kpi--align .ia-kpi__k svg { color: var(--warning); }

/* ===== action source pills ===== */
.ia-act__src.is-rec { color: #0B5C55; background: #E4F3F0; }

/* ===== recommendation launcher + probes + goal bank ===== */
.ia-launch { display: grid; grid-template-columns: 1fr 280px; padding: 0; overflow: hidden; }
.ia-launch__main { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ia-launch__q { font-size: 15px; font-weight: 500; color: var(--text-primary); line-height: 1.45; padding-left: 12px; border-left: 2px solid var(--area-bg); }
.ia-launch__ctrls { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 2px; }
.ia-launch__ctl { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.ia-launch__ctl > span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.ia-launch__persona { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); padding: 6px 0; }
.ia-launch__run { border-left: 1px solid var(--border-subtle); background: var(--bg-subtle); padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.ia-engrow { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-engchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 8px; }
.ia-engchip .dot { width: 7px; height: 7px; border-radius: 50%; }
.ia-probe { display: grid; grid-template-columns: 30px 1fr auto auto auto auto; gap: 13px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--border-subtle); }
.ia-probe:first-child { border-top: 0; }
.ia-probe__ico { width: 30px; height: 30px; border-radius: 8px; background: #E4F3F0; color: #0F766E; display: flex; align-items: center; justify-content: center; }
.ia-probe__t { font-size: 13.5px; font-weight: 600; }
.ia-probe__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.ia-probe__engs { display: flex; gap: 3px; }
.ia-probe__eng { width: 9px; height: 9px; border-radius: 50%; }
.ia-probe__rate { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.ia-probe__rate b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ia-probe__rate span { font-size: 10px; color: var(--text-tertiary); }
.ia-probe__cr { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); width: 46px; text-align: right; }
.ia-probe__go { font-size: 12px; color: var(--area-fg, var(--accent)); text-decoration: none; white-space: nowrap; }
.ia-probe__go:hover { text-decoration: underline; }
.ia-goalrow { display: grid; grid-template-columns: 1fr 240px 80px auto; gap: 14px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--border-subtle); }
.ia-goalrow:first-child { border-top: 0; }
.ia-goalrow__t { font-size: 13.5px; font-weight: 600; }
.ia-goalrow__q { font-size: 12px; color: var(--text-tertiary); line-height: 1.45; margin-top: 3px; max-width: 60ch; }
.ia-goalrow__persona { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.ia-goalrow__rate { font-size: 12.5px; color: var(--text-tertiary); text-align: right; }
.ia-goalrow__rate b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ===== reputation std/comp config ===== */
.ia-engtoggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 11px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.ia-engtoggle svg { margin-left: auto; }
.ia-engtoggle__dots { display: inline-flex; gap: 3px; }
.ia-engtoggle__dots .dot { width: 8px; height: 8px; border-radius: 50%; }
.ia-engines { display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.ia-engine { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; text-align: left; }
.ia-engine:hover { background: var(--bg-subtle); }
.ia-engine.is-on { color: var(--text-primary); }
.ia-engine .dot { width: 9px; height: 9px; border-radius: 50%; }
.ia-engine svg { margin-left: auto; color: var(--accent); }
.ia-confnote { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; color: var(--text-secondary); line-height: 1.45; }
.ia-confnote svg { color: var(--accent); flex: none; margin-top: 1px; }
.ia-imported { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #0B5C55; background: #E4F3F0; padding: 1px 7px; border-radius: 999px; margin-left: 8px; }
.ia-backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; padding: 0 0 12px; }
.ia-backlink:hover { color: var(--text-primary); }

/* ===== alignment coverage hero (distinct from reputation ring) ===== */
.ia-covhero { padding: 20px 22px; }
.ia-covhero__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.ia-covhero__pctwrap { display: flex; align-items: baseline; gap: 12px; }
.ia-covhero__pct { font-size: 58px; font-weight: 650; letter-spacing: -.04em; line-height: .9; color: var(--warning); font-variant-numeric: tabular-nums; }
.ia-covhero__pctsign { font-size: 26px; color: var(--text-tertiary); font-weight: 500; }
.ia-covhero__label { font-size: 14px; color: var(--text-secondary); max-width: 20ch; line-height: 1.35; }
.ia-covhero__act { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.ia-covbar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--bg-inset); }
.ia-covbar__seg.is-strong { background: var(--success); }
.ia-covbar__seg.is-weak { background: var(--warning); }
.ia-covbar__seg.is-gap { background: repeating-linear-gradient(45deg, var(--stone-300, #D7D3CE) 0 5px, var(--bg-inset) 5px 10px); }
.ia-covbar__legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--text-secondary); }
.ia-covbar__legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ia-covbar__legend a { color: var(--warning); text-decoration: none; }
.ia-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.ia-dot.is-strong { background: var(--success); }
.ia-dot.is-weak { background: var(--warning); }
.ia-dot.is-gap { background: var(--stone-300, #D7D3CE); }
.ia-areatag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; font-weight: 500; }
.ia-areatag--rec { color: #0B5C55; background: #E4F3F0; }
.ia-areatag--def { color: var(--indigo-700); background: var(--indigo-50); }
.ia-alitem__kind.is-gap { color: var(--warning); background: var(--warning-bg); }
.ia-alitem__kind.is-sug { color: var(--indigo-700); background: var(--indigo-50); }

/* ===== tab underline per area ===== */
.ia-tab--rec.is-active { color: #0B5C55; }
.ia-tab--rec.is-active::after { background: #0F766E; }
.ia-tab--rep.is-active { color: var(--indigo-700); }

/* ===== history filters + detail ===== */
.ia-hfilter { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); padding: 5px 13px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); cursor: pointer; }
.ia-hfilter:hover { border-color: var(--border-strong); }
.ia-hfilter.is-active { border-color: var(--accent); color: var(--accent-active); background: var(--accent-subtle); font-weight: 600; }
.ia-hrow--click { cursor: pointer; }
.ia-hrow--click:hover { background: var(--bg-subtle); }
.ia-hdetail { display: flex; align-items: center; gap: 9px; padding: 10px 20px 12px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); }
.ia-hdetail svg { color: var(--text-tertiary); flex: none; }
.ia-htype.is-probe { color: #0B5C55; background: #E4F3F0; }
.ia-htype.is-disc { color: #0B5C55; background: #E4F3F0; }

/* ===== coverage hero label fix ===== */
.ia-covhero__pctwrap { align-items: center; }
.ia-covhero__label { align-self: center; }

/* ===== sidebar workspace switcher ===== */
.ia-sbws { position: relative; margin: 2px 10px 6px; }
.ia-sbws__head { width: 100%; }
.ia-sbws__current { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 1px; padding: 7px 10px 7px 30px; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: left; }
.ia-sbws__current:hover, .ia-sbws__current.is-open { background: var(--bg-subtle); }
.ia-sbws__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ia-wsmenu--sb { position: absolute; top: calc(100% + 2px); left: 0; right: 0; width: auto; z-index: 60; }

/* ===== shared modal (New run + Wizard) ===== */
.ia-modalwrap { position: fixed; inset: 0; z-index: 100; background: rgba(26,24,21,.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ia-modal { width: 580px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.ia-modal__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); }
.ia-modal__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--area-bg, var(--accent-subtle)); color: var(--area-fg, var(--accent)); display: flex; align-items: center; justify-content: center; flex: none; }
.ia-modal__t { font-size: 16px; font-weight: 600; }
.ia-modal__s { font-size: 12.5px; color: var(--text-tertiary); }
.ia-modal__x { margin-left: auto; background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; padding: 4px; border-radius: 6px; }
.ia-modal__x:hover { background: var(--bg-subtle); }
.ia-modal__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.ia-modal__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-field { display: flex; flex-direction: column; gap: 6px; }
.ia-field > span { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.ia-modelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ia-modelopt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; }
.ia-modelopt:hover { border-color: var(--border-strong); }
.ia-modelopt.is-on { border-color: var(--accent); background: var(--accent-subtle); }
.ia-modelopt__box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.ia-modelopt.is-on .ia-modelopt__box { background: var(--accent); border-color: var(--accent); }
.ia-modelopt .dot { width: 8px; height: 8px; border-radius: 50%; }
.ia-modeltoggle { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); }
.ia-modeltoggle > div { flex: 1; }
.ia-modeltoggle__t { font-size: 13px; font-weight: 600; }
.ia-modeltoggle__d { font-size: 12px; color: var(--text-tertiary); }
.ia-modal__note { padding: 12px 20px; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5; background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); }
.ia-modal__foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); }
.ia-modal__warn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent-active); background: var(--accent-subtle); padding: 5px 12px; border-radius: 999px; }
.ia-input { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text-primary); background: var(--surface-card); outline: none; }
.ia-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.ia-input--sm { padding: 6px 10px; font-size: 13px; width: 220px; }

/* wizard */
.ia-wizrun { display: flex; flex-direction: column; gap: 10px; }
.ia-wizstep { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-tertiary); }
.ia-wizstep.is-now { color: var(--text-primary); font-weight: 500; }
.ia-wizstep.is-done { color: var(--text-secondary); }
.ia-wizstep__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-inset); color: var(--success); display: flex; align-items: center; justify-content: center; flex: none; }
.ia-wizstep.is-done .ia-wizstep__dot { background: var(--success-bg); }
.ia-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-muted); border-top-color: var(--accent); animation: ia-spin .7s linear infinite; }
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-wizdone { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.ia-wizdone__ico { color: var(--success); flex: none; }

/* ===== recommendation launch bar ===== */
.ia-launchbar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.ia-launchbar__ico { width: 38px; height: 38px; border-radius: 10px; background: #E4F3F0; color: #0F766E; display: flex; align-items: center; justify-content: center; flex: none; }
.ia-launchbar__txt { flex: 1; min-width: 0; }
.ia-launchbar__t { font-size: 14.5px; font-weight: 600; }
.ia-launchbar__d { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; max-width: 72ch; }
.ia-linkbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--area-fg, var(--accent)); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.ia-linkbtn:hover { text-decoration: underline; }

/* ===== alignment: item src link, kind colors, strategy groups ===== */
.ia-alitem__src { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11.5px; font-family: var(--font-mono); color: var(--accent); text-decoration: none; max-width: 100%; }
.ia-alitem__src:hover { text-decoration: underline; }
.ia-alitem__kind.is-ok { color: var(--success); background: var(--success-bg); }
.ia-alitem__kind.is-weak { color: var(--indigo-700); background: var(--indigo-50); }
.ia-alitem__where.is-blue { color: var(--indigo-700); background: var(--indigo-50); }
.ia-stratgroups { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; } /* owner UAT 2026-07-21: one column, not three */
.ia-stratgroup { padding: 0; overflow: hidden; }
.ia-stratgroup__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.ia-stratgroup__ico { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.ia-stratgroup__t { font-size: 13.5px; font-weight: 600; }
.ia-stratgroup__d { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.ia-stratgroup__n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); background: var(--bg-inset); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.ia-stratgroup .ia-strat { padding: 13px 16px; border-top: 1px solid var(--border-subtle); }
.ia-stratgroup .ia-strat:first-of-type { border-top: 0; }
.ia-stratgroup--site { border-top: 2px solid var(--warning); }
.ia-stratgroup--site .ia-stratgroup__ico { background: var(--warning-bg); color: var(--warning); }
.ia-stratgroup--score { border-top: 2px solid var(--indigo-500); }
.ia-stratgroup--score .ia-stratgroup__ico { background: var(--indigo-50); color: var(--indigo-700); }
.ia-stratgroup--offsite { border-top: 2px solid #0F766E; }
.ia-stratgroup--offsite .ia-stratgroup__ico { background: #E4F3F0; color: #0F766E; }

/* ===== rich library ===== */
.ia-wsmanage { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 16px; }
.ia-libbanner { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; background: var(--accent-subtle); border: 1px solid var(--accent-muted); border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 18px; }
.ia-libbanner svg { color: var(--accent); flex: none; margin-top: 1px; }
.ia-libbanner > div { flex: 1; }
.ia-libbanner__x { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; flex: none; }
.ia-libsec { padding: 0; margin-bottom: 16px; overflow: hidden; }
.ia-libsec__head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.ia-libsec__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex: none; }
.ia-libsec__t { font-size: 14.5px; font-weight: 600; }
.ia-libsec__sub { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; max-width: 74ch; }
.ia-libsec__n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-subtle); min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; padding: 0 6px; }
.ia-targetrow { display: flex; align-items: center; gap: 13px; padding: 14px 18px; }
.ia-targetrow__logo { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; flex: none; }
.ia-targetrow__main { flex: 1; min-width: 0; }
.ia-targetrow__name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ia-targetrow__tag { display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); background: var(--bg-inset); padding: 2px 8px; border-radius: 5px; }
.ia-primary { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; color: var(--accent-active); background: var(--accent-subtle); padding: 2px 7px; border-radius: 999px; }
.ia-catgroup { display: flex; align-items: center; gap: 10px; padding: 13px 18px 4px; }
.ia-catgroup__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: 7px; }
.ia-catgroup__hint { font-size: 11.5px; color: var(--text-tertiary); }
.ia-tag { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; }
.ia-tag.is-you { color: var(--indigo-700); background: var(--indigo-50); }
.ia-tag.is-not { color: var(--danger); background: var(--danger-bg); }
.ia-catrow { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--border-subtle); }
.ia-catrow.is-primary { background: var(--accent-subtle); border-left: 3px solid var(--accent); }
.ia-catrow__main { flex: 1; min-width: 0; }
.ia-catrow__name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ia-catrow__desc { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-top: 3px; max-width: 82ch; }
.ia-rowacts { display: flex; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
.ia-rowbtn { font-size: 11.5px; color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.ia-rowbtn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ia-rowbtn.is-danger { color: var(--danger); }
.ia-rowbtn.is-danger:hover { border-color: var(--danger); }
.ia-persrow { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-top: 1px solid var(--border-subtle); }
.ia-persrow__ava { width: 38px; height: 38px; font-size: 13px; }
.ia-persrow__main { flex: 1; min-width: 0; }
.ia-persrow__name { font-size: 13.5px; font-weight: 600; }
.ia-persrow__disp { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.ia-goalrow2 { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); }
.ia-goalrow2__main { flex: 1; min-width: 0; }
.ia-goalrow2__t { font-size: 13.5px; font-weight: 600; }
.ia-goalrow2__q { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; max-width: 82ch; }
.ia-goalrow2__persona { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.ia-addrow { display: flex; gap: 8px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.ia-addbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; }
.ia-addbtn:hover { border-color: var(--accent); color: var(--accent); }
.ia-syncnote { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.ia-wizfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }

/* ===== history = runs two-pane ===== */
.ia-runs { padding: 0; overflow: hidden; display: grid; grid-template-columns: 340px 1fr; height: 68vh; min-height: 460px; }
.ia-runs__list { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); min-height: 0; }
.ia-runs__lhead { padding: 14px 14px 12px; border-bottom: 1px solid var(--border-subtle); }
.ia-runs__ltop { display: flex; align-items: baseline; justify-content: space-between; }
.ia-runs__ltitle { font-size: 14px; font-weight: 600; }
.ia-runs__lcount { font-size: 11.5px; color: var(--text-tertiary); }
.ia-runs__toggles { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.ia-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.ia-runs__lbody { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.ia-runs__detail { overflow-y: auto; background: var(--bg-base); min-width: 0; }
.ia-runs__detail .cs-detail__inner { max-width: none; padding: 24px 28px 40px; }
.ia-runs__detail.cs-detail--empty { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.ia-tier { font-family: var(--font-mono); font-size: 10px; color: var(--success); background: var(--success-bg); padding: 2px 8px; border-radius: 999px; }
.ia-roletag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--text-tertiary); background: var(--bg-inset); padding: 1px 6px; border-radius: 4px; font-weight: 400; }
.ia-enginebody { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.ia-enginebody p { margin: 0 0 10px; }
.ia-enginebody p:last-child { margin-bottom: 0; }
.ia-enginebody strong { color: var(--text-primary); font-weight: 600; }

/* ===== topbar workspace + target control ===== */
.ia-tbctx { display: flex; align-items: center; gap: 8px; }
.ia-tbctx__ws, .ia-tbctx__tgt { position: relative; }
.ia-tbbtn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-card); font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.ia-tbbtn:hover { border-color: var(--border-strong); }
.ia-tbctx__sep { color: var(--border-strong); display: inline-flex; }
.ia-tbctx__tgt .ia-tbbtn { font-weight: 500; color: var(--text-secondary); }
.ia-tbctx__tgt .ia-tbbtn > svg:first-child { color: var(--accent); }
.ia-ddmenu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 5px; z-index: 60; min-width: 200px; }
.ia-ddmenu__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); padding: 5px 9px 6px; }
.ia-ddopt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-primary); cursor: pointer; text-align: left; }
.ia-ddopt:hover { background: var(--bg-subtle); }
.ia-ddopt.is-on { color: var(--accent-active); }
.ia-ddopt > svg:first-child { color: var(--text-tertiary); }
.ia-ddopt > span { flex: 1; }
/* not-yet-defined options (owner UAT 2026-08-31): a category without its
   question set, a region nothing tracks yet — dimmed text + muted icon so
   defined vs undefined reads at a glance; the ia-ddtag pill carries why */
.ia-ddopt.is-pending { color: var(--text-tertiary); }
.ia-ddopt.is-pending > svg:first-child { opacity: .6; }
.ia-ddopt.is-pending:hover { color: var(--text-secondary); }
.ia-ddopt > span.ia-ddtag { flex: none; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.ia-ddopt--add { color: var(--text-secondary); border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 9px; }
/* per-row measured-category hint (topbar target menu, IA v3 make-it-real):
   dim, no-grow, ellipsized so long category names never blow the menu width */
.ia-ddopt > span.ia-ddcat { flex: 0 1 auto; font-size: 11px; color: var(--text-tertiary); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dropdown row with an inline edit affordance (topbar tracker menu, round-3):
   the row is a flex container so the select button can sit beside a small
   pencil button; the pencil dims until the row is hovered/focused. */
.ia-ddrow { display: flex; align-items: center; gap: 2px; }
.ia-ddrow .ia-ddopt { flex: 1; min-width: 0; }
.ia-ddedit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-tertiary); cursor: pointer; opacity: .55; }
.ia-ddrow:hover .ia-ddedit, .ia-ddedit:focus-visible { opacity: 1; }
.ia-ddedit:hover { background: var(--bg-subtle); color: var(--accent-active); }
.ia-tbctx .ia-wsmenu { top: calc(100% + 6px); }

/* ===== area eyebrow ===== */
.ia-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ===== reputation colored question categories ===== */
.ia-qcat { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; align-self: flex-start; }
.ia-qcat.is-success { color: var(--success); background: var(--success-bg); }
.ia-qcat.is-warning { color: var(--warning); background: var(--warning-bg); }
.ia-qcat.is-accent { color: var(--indigo-700); background: var(--indigo-50); }
.ia-qcat.is-neutral { color: var(--text-secondary); background: var(--bg-inset); }
.ia-qcat.is-outline { color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); }
.ia-qcat.is-danger { color: var(--danger); background: var(--danger-bg); }

/* ===== recommendation strategy action items ===== */
.ia-ract { display: grid; grid-template-columns: 100px 1fr auto; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); align-items: start; }
.ia-ract:first-child { border-top: 0; }
.ia-ract__scope { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; justify-self: start; white-space: nowrap; margin-top: 1px; }
.ia-ract__scope.is-site { color: var(--warning); background: var(--warning-bg); }
.ia-ract__scope.is-offsite { color: #0B5C55; background: #E4F3F0; }
.ia-ract__t { font-size: 13.5px; font-weight: 600; }
.ia-ract__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; max-width: 74ch; }
.ia-ract__from { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); margin-top: 7px; }

/* ===== history full-bleed runs page ===== */
.ia-runspage { height: 100%; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.ia-runspage .ia-runs__list { border-right: 1px solid var(--border-subtle); border-left: 0; }
.ia-runs__empty { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.6; }
.ia-runs__empty b { color: var(--text-secondary); }

/* ============================ LAYER 5: sm-* component primitives ========= */

/* ---- sm-* primitive: data-display/Avatar ---- */
.sm-avatar{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none; font-family:var(--font-mono);
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  color:var(--text-secondary); background:var(--bg-inset);
  border:1px solid var(--border-subtle); overflow:hidden; user-select:none;
}
.sm-avatar--human{ border-radius:var(--radius-full); }
.sm-avatar--agent{ border-radius:var(--radius-md); background:var(--accent-subtle); color:var(--accent-active); border-color:transparent; }
.sm-avatar img{ width:100%; height:100%; object-fit:cover; }
.sm-avatar--xs{ width:22px; height:22px; font-size:9px; }
.sm-avatar--sm{ width:26px; height:26px; font-size:10px; }
.sm-avatar--lg{ width:40px; height:40px; font-size:var(--text-sm); }
.sm-avatar--xl{ width:56px; height:56px; font-size:var(--text-md); }
.sm-avatar__status{
  position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--bg-base); box-sizing:content-box;
}
.sm-avatar__status--online{ background:var(--success); }
.sm-avatar__status--busy{ background:var(--warning); }
.sm-avatar__status--offline{ background:var(--stone-400); }
.sm-avatar svg{ width:58%; height:58%; }

/* ---- sm-* primitive: data-display/Badge ---- */
.sm-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1;
  padding:3px 8px; border-radius:var(--radius-full); border:1px solid transparent;
  white-space:nowrap;
}
.sm-badge--sm{ font-size:var(--text-2xs); padding:2px 6px; }
.sm-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.sm-badge svg{ width:12px; height:12px; }

.sm-badge--neutral{ background:var(--bg-inset); color:var(--text-secondary); border-color:var(--border-subtle); }
.sm-badge--accent{ background:var(--accent-subtle); color:var(--accent-active); }
.sm-badge--success{ background:var(--success-bg); color:var(--success); }
.sm-badge--warning{ background:var(--warning-bg); color:var(--warning); }
.sm-badge--danger{ background:var(--danger-bg); color:var(--danger); }
.sm-badge--solid{ background:var(--surface-inverse); color:var(--stone-50); }
.sm-badge--outline{ background:transparent; color:var(--text-secondary); border-color:var(--border-default); }

/* ---- sm-* primitive: data-display/Card ---- */
.sm-card{
  display:flex; flex-direction:column; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.sm-card--flat{ box-shadow:none; }
.sm-card--inset{ background:var(--bg-subtle); box-shadow:none; }
.sm-card--interactive{ cursor:pointer; }
.sm-card--interactive:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.sm-card__head{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--border-subtle);
}
.sm-card__title{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.sm-card__sub{ font-size:var(--text-xs); color:var(--text-tertiary); }
.sm-card__head-actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.sm-card__body--p0{ padding:0; }
.sm-card__body--p{ padding:16px; }
.sm-card__body--plg{ padding:24px; }

/* ---- sm-* primitive: data-display/Kbd ---- */
.sm-kbd{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  min-width:20px; height:20px; padding:0 5px; font-family:var(--font-mono);
  font-size:var(--text-2xs); font-weight:var(--weight-medium); color:var(--text-secondary);
  background:var(--surface-card); border:1px solid var(--border-default);
  border-bottom-width:2px; border-radius:5px; line-height:1; white-space:nowrap;
}

/* ---- sm-* primitive: data-display/Tag ---- */
.sm-tag{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:1;
  padding:4px 8px; border-radius:var(--radius-sm);
  background:var(--bg-inset); color:var(--text-secondary);
  border:1px solid var(--border-subtle); white-space:nowrap;
}
.sm-tag--accent{ background:var(--accent-subtle); color:var(--accent-active); border-color:transparent; }
.sm-tag svg{ width:12px; height:12px; }
.sm-tag__x{
  display:inline-flex; align-items:center; justify-content:center;
  margin:-2px -3px -2px 1px; padding:2px; border-radius:4px; cursor:pointer;
  color:var(--text-tertiary); transition:background var(--dur-fast), color var(--dur-fast);
}
.sm-tag__x:hover{ background:var(--border-default); color:var(--text-primary); }

/* ---- sm-* primitive: feedback/Spinner ---- */
.sm-spinner{ display:inline-block; border-radius:50%; border:2px solid var(--border-default); border-top-color:var(--accent); animation:sm-spinner-rot 0.65s linear infinite; vertical-align:middle; }
.sm-spinner--onaccent{ border-color:rgba(255,255,255,0.35); border-top-color:#fff; }
@keyframes sm-spinner-rot{ to{ transform:rotate(360deg); } }

/* ---- sm-* primitive: feedback/Toast ---- */
.sm-toast{
  display:flex; align-items:flex-start; gap:11px; width:340px; max-width:100%;
  padding:13px 14px; font-family:var(--font-sans);
  background:var(--surface-overlay); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
}
.sm-toast__icon{ flex:none; width:18px; height:18px; margin-top:1px; display:inline-flex; }
.sm-toast__icon svg{ width:18px; height:18px; }
.sm-toast--success .sm-toast__icon{ color:var(--success); }
.sm-toast--warning .sm-toast__icon{ color:var(--warning); }
.sm-toast--danger .sm-toast__icon{ color:var(--danger); }
.sm-toast--info .sm-toast__icon{ color:var(--accent); }
.sm-toast__body{ flex:1; min-width:0; }
.sm-toast__title{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-primary); }
.sm-toast__desc{ font-size:var(--text-xs); color:var(--text-secondary); margin-top:2px; line-height:1.45; }
.sm-toast__action{ margin-top:8px; font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--accent); background:none; border:0; padding:0; cursor:pointer; }
.sm-toast__close{ flex:none; margin:-3px -3px 0 0; padding:4px; border-radius:5px; color:var(--text-tertiary); background:none; border:0; cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.sm-toast__close:hover{ background:var(--bg-subtle); color:var(--text-primary); }
.sm-toast__close svg{ width:14px; height:14px; }

/* ---- sm-* primitive: feedback/Tooltip ---- */
.sm-tip-wrap{ position:relative; display:inline-flex; }
.sm-tip{
  position:absolute; z-index:50; pointer-events:none; opacity:0;
  background:var(--surface-inverse); color:var(--stone-50);
  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:var(--weight-medium);
  line-height:1.3; padding:5px 8px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sm-tip__kbd{ font-family:var(--font-mono); color:var(--stone-400); margin-left:6px; }
.sm-tip-wrap:hover .sm-tip, .sm-tip-wrap:focus-within .sm-tip{ opacity:1; }
.sm-tip--top{ bottom:100%; left:50%; transform:translate(-50%, 2px); margin-bottom:7px; }
.sm-tip-wrap:hover .sm-tip--top{ transform:translate(-50%, 0); }
.sm-tip--bottom{ top:100%; left:50%; transform:translate(-50%, -2px); margin-top:7px; }
.sm-tip-wrap:hover .sm-tip--bottom{ transform:translate(-50%, 0); }
.sm-tip--left{ right:100%; top:50%; transform:translate(2px, -50%); margin-right:7px; }
.sm-tip-wrap:hover .sm-tip--left{ transform:translate(0, -50%); }
.sm-tip--right{ left:100%; top:50%; transform:translate(-2px, -50%); margin-left:7px; }
.sm-tip-wrap:hover .sm-tip--right{ transform:translate(0, -50%); }

/* ---- sm-* primitive: forms/Button ---- */
.sm-btn{
  --_h:36px; --_px:14px; --_fs:var(--text-base);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--_h); padding:0 var(--_px); font-family:var(--font-sans);
  font-size:var(--_fs); font-weight:var(--weight-medium); line-height:1;
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  white-space:nowrap; text-decoration:none; letter-spacing:-0.005em;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.sm-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.sm-btn:active{ transform:translateY(0.5px); }
.sm-btn[disabled],.sm-btn[aria-disabled="true"]{ opacity:0.5; pointer-events:none; }
.sm-btn--sm{ --_h:28px; --_px:10px; --_fs:var(--text-sm); border-radius:var(--radius-sm); }
.sm-btn--lg{ --_h:44px; --_px:20px; --_fs:var(--text-md); }
.sm-btn--full{ width:100%; }

.sm-btn--primary{ background:var(--accent); color:var(--text-on-accent); box-shadow:var(--shadow-xs); }
.sm-btn--primary:hover{ background:var(--accent-hover); }
.sm-btn--primary:active{ background:var(--accent-active); }

.sm-btn--secondary{ background:var(--surface-card); color:var(--text-primary); border-color:var(--border-default); box-shadow:var(--shadow-xs); }
.sm-btn--secondary:hover{ background:var(--bg-subtle); border-color:var(--border-strong); }

.sm-btn--ghost{ background:transparent; color:var(--text-secondary); }
.sm-btn--ghost:hover{ background:var(--bg-subtle); color:var(--text-primary); }

.sm-btn--danger{ background:var(--danger); color:#fff; box-shadow:var(--shadow-xs); }
.sm-btn--danger:hover{ filter:brightness(0.94); }

.sm-btn__spin{ width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor; border-top-color:transparent; animation:sm-btn-spin 0.6s linear infinite; }
@keyframes sm-btn-spin{ to{ transform:rotate(360deg); } }
.sm-btn__ico{ display:inline-flex; width:1em; height:1em; font-size:calc(var(--_fs) + 2px); }
.sm-btn__ico svg{ width:100%; height:100%; }

/* ---- sm-* primitive: forms/Checkbox ---- */
.sm-check{ display:inline-flex; align-items:flex-start; gap:9px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); user-select:none; line-height:1.3; }
.sm-check--disabled{ opacity:0.5; pointer-events:none; }
.sm-check input{ position:absolute; opacity:0; width:0; height:0; }
.sm-check__box{
  width:17px; height:17px; flex:none; margin-top:1px; border-radius:5px;
  border:1px solid var(--border-strong); background:var(--surface-card);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sm-check__box svg{ width:12px; height:12px; opacity:0; transform:scale(0.6); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.sm-check input:checked + .sm-check__box{ background:var(--accent); border-color:var(--accent); }
.sm-check input:checked + .sm-check__box svg{ opacity:1; transform:scale(1); }
.sm-check input:indeterminate + .sm-check__box{ background:var(--accent); border-color:var(--accent); }
.sm-check input:focus-visible + .sm-check__box{ box-shadow:0 0 0 3px var(--focus-ring); }
.sm-check__hint{ display:block; color:var(--text-tertiary); font-size:var(--text-xs); margin-top:2px; }

/* ---- sm-* primitive: forms/IconButton ---- */
.sm-iconbtn{
  --_s:36px;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--_s); height:var(--_s); padding:0; cursor:pointer;
  border-radius:var(--radius-md); border:1px solid transparent;
  color:var(--text-secondary); background:transparent;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.sm-iconbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.sm-iconbtn[disabled]{ opacity:0.45; pointer-events:none; }
.sm-iconbtn--sm{ --_s:28px; border-radius:var(--radius-sm); }
.sm-iconbtn--lg{ --_s:44px; }
.sm-iconbtn svg{ width:18px; height:18px; }
.sm-iconbtn--sm svg{ width:16px; height:16px; }

.sm-iconbtn--ghost:hover{ background:var(--bg-subtle); color:var(--text-primary); }
.sm-iconbtn--outline{ border-color:var(--border-default); background:var(--surface-card); box-shadow:var(--shadow-xs); }
.sm-iconbtn--outline:hover{ background:var(--bg-subtle); border-color:var(--border-strong); color:var(--text-primary); }
.sm-iconbtn--solid{ background:var(--accent); color:var(--text-on-accent); }
.sm-iconbtn--solid:hover{ background:var(--accent-hover); }
.sm-iconbtn--active{ background:var(--accent-subtle); color:var(--accent); }

/* ---- sm-* primitive: forms/Input ---- */
.sm-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.sm-field__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.sm-field__req{ color:var(--accent); margin-left:2px; }
.sm-field__hint{ font-size:var(--text-xs); color:var(--text-tertiary); }
.sm-field__hint--error{ color:var(--danger); }

.sm-input{
  --_h:36px;
  display:flex; align-items:center; gap:8px; height:var(--_h);
  padding:0 12px; background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.sm-input:hover{ border-color:var(--border-strong); }
.sm-input:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.sm-input--sm{ --_h:28px; padding:0 9px; border-radius:var(--radius-sm); }
.sm-input--lg{ --_h:44px; padding:0 14px; }
.sm-input--error{ border-color:var(--danger); }
.sm-input--error:focus-within{ box-shadow:0 0 0 3px var(--danger-bg); }
.sm-input--disabled{ background:var(--bg-inset); opacity:0.7; pointer-events:none; }

.sm-input input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:var(--text-base); color:var(--text-primary);
}
.sm-input--sm input{ font-size:var(--text-sm); }
.sm-input input::placeholder{ color:var(--text-tertiary); }
.sm-input__ico{ display:inline-flex; color:var(--text-tertiary); flex:none; }
.sm-input__ico svg{ width:16px; height:16px; }

/* ---- sm-* primitive: forms/Select ---- */
.sm-select{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.sm-select__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-primary); }
.sm-select__wrap{ position:relative; display:flex; align-items:center; }
.sm-select__wrap select{
  appearance:none; -webkit-appearance:none; width:100%; height:36px;
  padding:0 34px 0 12px; font-family:inherit; font-size:var(--text-base);
  color:var(--text-primary); background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sm-select__wrap--sm select{ height:28px; font-size:var(--text-sm); border-radius:var(--radius-sm); padding-left:9px; }
.sm-select__wrap select:hover{ border-color:var(--border-strong); }
.sm-select__wrap select:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.sm-select__wrap select:disabled{ background:var(--bg-inset); opacity:0.7; cursor:not-allowed; }
.sm-select__chev{ position:absolute; right:11px; pointer-events:none; color:var(--text-tertiary); display:inline-flex; }
.sm-select__chev svg{ width:15px; height:15px; }

/* ---- sm-* primitive: forms/Switch ---- */
.sm-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary); user-select:none; }
.sm-switch--disabled{ opacity:0.5; pointer-events:none; }
.sm-switch__track{
  position:relative; width:36px; height:20px; flex:none; border-radius:999px;
  background:var(--stone-300); transition:background var(--dur-base) var(--ease-out);
}
.sm-switch__track--sm{ width:30px; height:17px; }
.sm-switch__thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out);
}
.sm-switch__track--sm .sm-switch__thumb{ width:13px; height:13px; }
.sm-switch input{ position:absolute; opacity:0; width:0; height:0; }
.sm-switch input:checked + .sm-switch__track{ background:var(--accent); }
.sm-switch input:checked + .sm-switch__track .sm-switch__thumb{ transform:translateX(16px); }
.sm-switch__track--sm input:checked + .sm-switch__track .sm-switch__thumb,
.sm-switch input:checked + .sm-switch__track--sm .sm-switch__thumb{ transform:translateX(13px); }
.sm-switch input:focus-visible + .sm-switch__track{ box-shadow:0 0 0 3px var(--focus-ring); }

/* ---- sm-* primitive: navigation/Tabs ---- */
.sm-tabs{ display:inline-flex; align-items:center; gap:2px; font-family:var(--font-sans); }
.sm-tabs--line{ gap:18px; border-bottom:1px solid var(--border-subtle); }
.sm-tabs--pill{ gap:2px; padding:3px; background:var(--bg-inset); border-radius:var(--radius-md); }

.sm-tab{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-secondary);
  cursor:pointer; border:0; background:transparent; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sm-tab svg{ width:15px; height:15px; }
.sm-tab__count{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-tertiary); background:var(--bg-inset); padding:1px 5px; border-radius:999px; }

.sm-tabs--line .sm-tab{ padding:10px 0; }
.sm-tabs--line .sm-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px 2px 0 0; opacity:0; transition:opacity var(--dur-fast) var(--ease-out); }
.sm-tabs--line .sm-tab:hover{ color:var(--text-primary); }
.sm-tabs--line .sm-tab[aria-selected="true"]{ color:var(--text-primary); }
.sm-tabs--line .sm-tab[aria-selected="true"]::after{ opacity:1; }

.sm-tabs--pill .sm-tab{ padding:6px 12px; border-radius:var(--radius-sm); }
.sm-tabs--pill .sm-tab:hover{ color:var(--text-primary); }
.sm-tabs--pill .sm-tab[aria-selected="true"]{ color:var(--text-primary); background:var(--surface-card); box-shadow:var(--shadow-xs); }
.sm-tab:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); border-radius:var(--radius-sm); }

/* ── billing-cadence toggle (Monthly / Annual) ─────────────────────────────
   Both cadences are rendered into the page and swapped by [data-billing] on
   the page root, so the toggle is instant, survives full-page caching, and
   degrades to "whatever the page opened on" with JS off. The attribute pair
   is specific enough (0,2,0) to beat the element's own display rule without
   !important. */
[data-billing="month"] [data-when="year"],
[data-billing="year"] [data-when="month"] { display: none; }

/* The toggle belongs to the TIER GRID, not to the current-plan strip above it.
   .cs-plans carries a 26px margin-top from sm-design.css, which put all the
   space on the wrong side: the toggle sat flush against the strip and 26px
   clear of the cards it controls. Move that space above the bar and collapse
   it below, so the control reads as the header of the grid. */
.cs-billbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* 16px, not 6: .cs-plan__badge / .cs-plan__cur are absolutely positioned at
   top:-9px, so the VISUAL top of the grid is 9px above .cs-plans itself. A 6px
   margin here measured fine against the cards while overlapping the "Current
   plan" pill by 2px. This leaves ~8px of real clearance to the pills while the
   toggle still reads as the grid's header. */
.cs-billbar + .cs-plans { margin-top: 16px; }
.sm-billtoggle__btn { display: inline-flex; align-items: center; gap: 7px; }
.cs-billsave { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-on-accent); background: var(--accent); border-radius: 5px; padding: 2px 6px; }
.cs-billnote { font-size: 13px; color: var(--text-tertiary); margin: 0; min-height: 1.4em; }
/* min-height holds the line on the cadence with no note, so a card is the same
   height in both views and the tier grid never jumps when the toggle flips. */
.cs-plan__billnote { font-size: 12.5px; color: var(--text-tertiary); margin-top: 7px; min-height: 19px; white-space: nowrap; }
.cs-plan__save { color: var(--accent); font-weight: 600; }
.cs-plan__ctaslot { display: block; }
/* The "most efficient" badge and the "current plan" pill sit in the same corner
   region; the pill wins on whichever card is the held term in the active view. */
.cs-plan.is-current .cs-plan__badge { display: none; }
@media (max-width: 560px) { .cs-billbar { gap: 10px; } .cs-billnote { font-size: 12.5px; } }