/* Copied from reporting prototype src/index.css: tokens + type styles (lines 71-1200) and side nav + app layout (1203-1683). Image paths rewritten to assets/images. */
:root {

  /* ----------------------------------------------------------
     PRIMITIVE COLORS
  ---------------------------------------------------------- */

  /* Gray - mapped to stone for consistency with primary scale */
  --gray-50:  #fafafa;  /* stone-50 */
  --gray-100: #f4f4f5;  /* stone-100 */
  --gray-200: #e4e4e7;  /* stone-200 = quaternary */
  --gray-300: #d4d4d8;  /* stone-300 = tertiary */
  --gray-400: #a1a1aa;  /* stone-400 = secondary */
  --gray-500: #71717a;  /* stone-500 */
  --gray-600: #52525b;  /* stone-600 */
  --gray-700: #3f3f46;  /* stone-700 = primary */
  --gray-800: #27272a;  /* stone-800 */
  --gray-900: #18181b;  /* stone-900 */

  /* Stone */
  --stone-50:  #fafafa;
  --stone-100: #f4f4f5;
  --stone-200: #e4e4e7;
  --stone-300: #d4d4d8;
  --stone-400: #a1a1aa;
  --stone-500: #71717a;
  --stone-600: #52525b;
  --stone-700: #3f3f46;
  --stone-800: #27272a;
  --stone-900: #18181b;

  /* Pink */
  --pink-50:  #fffafa;
  --pink-100: #fff5f5;
  --pink-200: #ffe6e6;
  --pink-300: #ffd7d7;
  --pink-400: #ffb8b8;
  --pink-500: #ff9a9a;
  --pink-600: #e68b8b;
  --pink-700: #bf7474;
  --pink-800: #995c5c;
  --pink-900: #7d4b4b;

  /* Green */
  --green-50:  #f3faf9;
  --green-100: #e6f6f3;
  --green-200: #c2e7e1;
  --green-300: #9dd9cf;
  --green-400: #53bdaa;
  --green-500: #4ba098;
  --green-600: #3c8e84;
  --green-700: #327a72;
  --green-800: #296760;
  --green-900: #224543;

  /* Navy */
  --navy-50:  #f4f6f7;
  --navy-100: #eaedef;
  --navy-200: #c9d2d8;
  --navy-300: #a9b7c1;
  --navy-400: #698192;
  --navy-500: #284b63;
  --navy-600: #244459;
  --navy-700: #1e384a;
  --navy-800: #182d3b;
  --navy-900: #142531;

  /* Blue */
  --blue-50:  #f6f9fb;
  --blue-100: #e0f1fc;
  --blue-200: #bdddf9;
  --blue-300: #90bbef;
  --blue-400: #5c8ad6;
  --blue-500: #3b73ce;
  --blue-600: #2a5aa7;
  --blue-700: #234a8b;
  --blue-800: #1c3968;
  --blue-900: #12274a;

  /* Yellow */
  --yellow-50:  #fffcf6;
  --yellow-100: #fff8ec;
  --yellow-200: #ffeed0;
  --yellow-300: #ffe4b3;
  --yellow-400: #ffd07b;
  --yellow-500: #ffbc42;
  --yellow-600: #e6a93b;
  --yellow-700: #bf8d32;
  --yellow-800: #997128;
  --yellow-900: #7d5c20;

  /* Orange */
  --orange-50:  #fff7ef;
  --orange-100: #ffeedf;
  --orange-200: #f8cfa9;
  --orange-300: #f5ba84;
  --orange-400: #f2a55e;
  --orange-500: #ef9038;
  --orange-600: #db781f;
  --orange-700: #c16419;
  --orange-800: #a55013;
  --orange-900: #844a0f;

  /* Red */
  --red-50:  #fff4f4;
  --red-100: #feeded;
  --red-200: #fcc7c7;
  --red-300: #f9a0a0;
  --red-400: #f77a7a;
  --red-500: #f55353;
  --red-600: #dc4a4a;
  --red-700: #c34141;
  --red-800: #aa3838;
  --red-900: #7a2626;

  /* Purple */
  --purple-50:  #f8f8ff;
  --purple-100: #ededfd;
  --purple-200: #cac9f8;
  --purple-300: #a7a5f3;
  --purple-400: #8381ee;
  --purple-500: #676bd7;
  --purple-600: #5055b7;
  --purple-700: #394096;
  --purple-800: #232b76;
  --purple-900: #1f235a;

  /* Black Alpha */
  --black-alpha-100: rgba(0, 0, 0, 0.06);
  --black-alpha-200: rgba(0, 0, 0, 0.08);
  --black-alpha-500: rgba(0, 0, 0, 0.36);
  --black-alpha-600: rgba(0, 0, 0, 0.48);
  --black-alpha-700: rgba(0, 0, 0, 0.64);

  /* Main */
  --main-dark:  #18181b;

  /* ----------------------------------------------------------
     SEMANTIC — PRIMARY
  ---------------------------------------------------------- */
  --primary:    #3f3f46; /* stone-700 */
  --secondary:  #a1a1aa; /* stone-400 */
  --tertiary:   #d4d4d8; /* stone-300 */
  --quaternary: #e4e4e7; /* stone-200 */
  --hover:      #18181b; /* stone-900 */

  /* ----------------------------------------------------------
     SEMANTIC — BRAND
  ---------------------------------------------------------- */
  --brand-pink: #ff9a9a; /* pink-500 */

  /* ----------------------------------------------------------
     SEMANTIC — BODY
  ---------------------------------------------------------- */
  --body-dark:  #fafafa; /* stone-50 */
  --body-light: #ffffff; /* white */

  /* ----------------------------------------------------------
     SEMANTIC — BACKGROUND
  ---------------------------------------------------------- */
  --background-navy:   #f4f6f7; /* navy-50  */
  --background-green:  #e6f6f3; /* green-100 */
  --background-pink:   #ffe6e6; /* pink-200 */
  --background-blue:   #e0f1fc; /* blue-100 */
  --background-gray:   #e4e4e7; /* stone-200 */
  --background-yellow: #fff8ec; /* yellow-100 */

  /* ----------------------------------------------------------
     SEMANTIC — ACCENT (Navy)
  ---------------------------------------------------------- */
  --accent-navy-dark:  #1e384a; /* navy-700 */
  --accent-navy-mid:   #698192; /* navy-400 */
  --accent-navy-light: #a9b7c1; /* navy-300 */

  /* Accent (Green) */
  --accent-green-dark:  #327a72; /* green-700 */
  --accent-green-mid:   #4ba098; /* green-500 */
  --accent-green-light: #9dd9cf; /* green-300 */

  /* Accent (Blue) */
  --accent-blue-dark:  #2a5aa7; /* blue-600 */
  --accent-blue-mid:   #3b73ce; /* blue-500 */
  --accent-blue-light: #90bbef; /* blue-300 */

  /* Accent (Yellow) */
  --accent-yellow-dark:  #e6a93b; /* yellow-600 */
  --accent-yellow-mid:   #ffd07b; /* yellow-400 */
  --accent-yellow-light: #ffeed0; /* yellow-200 */

  /* Accent (Orange) */
  --accent-orange-dark:  #db781f; /* orange-600 */
  --accent-orange-mid:   #f2a55e; /* orange-400 */
  --accent-orange-light: #f8cfa9; /* orange-200 */

  /* Accent (Purple) */
  --accent-purple-dark:  #5055b7; /* purple-600 */
  --accent-purple-mid:   #676bd7; /* purple-500 */
  --accent-purple-light: #a7a5f3; /* purple-300 */

  /* Accent (Red) */
  --accent-red-dark:  #aa3838; /* red-800 */
  --accent-red-mid:   #dc4a4a; /* red-600 */
  --accent-red-light: #fcc7c7; /* red-200 */

  /* Accent (Pink) */
  --accent-pink-dark:  #e68b8b; /* pink-600 */
  --accent-pink-mid:   #ffb8b8; /* pink-400 */
  --accent-pink-light: #ffd7d7; /* pink-300 */

  /* Tag lite fills (semantic aliases — use for tag-green / tag-blue / tag-pink) */
  --green-lite: #e6f6f3; /* green-100 */
  --blue-lite:  #e0f1fc; /* blue-100 */
  --pink-lite:  #ffe6e6; /* pink-200 */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Fonts
  ---------------------------------------------------------- */
  --font-primary:   "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Quincy CF (@font-face above); also referenced as display / “Quincy” headlines */
  --font-quincy:    "Quincy CF", Georgia, serif;
  --font-secondary: var(--font-quincy);

  /* Font Sizes */
  --text-xxs: 10px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 40px;
  --text-6xl: 48px;
  --text-7xl: 60px;
  --text-8xl: 72px;
  --text-9xl: 96px;

  /* Font Weights */
  --font-book:   450;
  --font-medium: 500;
  --font-bold:   700;

  /* Line Heights */
  --leading-12:  12px;
  --leading-14:  14px;
  --leading-16:  16px;
  --leading-18:  18px;
  --leading-20:  20px;
  --leading-22:  22px;
  --leading-24:  24px;
  --leading-26:  26px;
  --leading-28:  28px;
  --leading-30:  30px;
  --leading-34:  34px;
  --leading-36:  36px;
  --leading-40:  40px;
  --leading-42:  42px;
  --leading-44:  44px;
  --leading-46:  46px;
  --leading-48:  48px;
  --leading-52:  52px;
  --leading-54:  54px;
  --leading-56:  56px;
  --leading-64:  64px;
  --leading-66:  66px;
  --leading-68:  68px;
  --leading-76:  76px;
  --leading-78:  78px;
  --leading-80:  80px;
  --leading-100: 100px;
  --leading-102: 102px;
  --leading-104: 104px;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --spacing-0:    0px;
  --spacing-0_5:  2px;
  --spacing-1:    4px;
  --spacing-2:    8px;
  --spacing-3:    12px;
  --spacing-4:    16px;
  --spacing-5:    20px;
  --spacing-6:    24px;
  --spacing-7:    28px;
  --spacing-8:    32px;
  --spacing-9:    36px;
  --spacing-10:   40px;
  --spacing-11:   44px;
  --spacing-12:   48px;
  --spacing-13:   52px;
  --spacing-14:   56px;
  --spacing-15:   60px;
  --spacing-16:   64px;
  --spacing-17:   68px;
  --spacing-18:   72px;
  --spacing-19:   76px;
  --spacing-20:   80px;
  --spacing-21:   84px;
  --spacing-22:   88px;
  --spacing-23:   92px;
  --spacing-24:   96px;
  --spacing-25:  100px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-0:  0px;
  --radius-1:  4px;
  --radius-2:  8px;
  --radius-3:  12px;
  --radius-4:  16px;
  --radius-5:  20px;
  --radius-6:  24px;
  --radius-7:  28px;
  --radius-8:  32px;

  /* ----------------------------------------------------------
     BORDER WIDTH / STROKE
  ---------------------------------------------------------- */
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --border-5: 5px;
  --border-6: 6px;
  --border-7: 7px;
  --border-8: 8px;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  /* ----------------------------------------------------------
     TEXT COLORS (merged with primary palette)
  ---------------------------------------------------------- */
  --text-primary:    var(--primary);    /* stone-700 #3F3F46 */
  --text-secondary:  var(--secondary);  /* stone-400 #A1A1AA */
  --text-tertiary:   var(--tertiary);   /* stone-300 #D4D4D8 */
  --text-hint:       var(--secondary);  /* stone-400 #A1A1AA */

  /* ----------------------------------------------------------
     LEGACY ALIASES (backward compatibility)
  ---------------------------------------------------------- */
  --font-family:          var(--font-primary);
  --radius-sm:            var(--radius-1);
  --radius-md:            var(--radius-2);
  --radius-lg:            var(--radius-3);
  --radius-xl:            var(--radius-4);
  --app-primary:          var(--primary);
  --app-secondary:        var(--secondary);
  --app-background-navy:  var(--background-navy);
  --background-sky:       #fbfbfb;

  /* Legacy teal aliases - map to green accent for backward compatibility */
  --teal-50:  var(--green-50);
  --teal-100: var(--green-100);
  --teal-200: var(--green-200);
  --teal-400: var(--green-400);
  --teal-600: var(--accent-green-mid);
  --teal-700: var(--accent-green-dark);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--background-sky);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   Typography — Type Styles (semantic-variables.json)
   ------------------------------------------
   Six families × 14 sizes (xxs 10 → 9xl 96). Each class sets only
   family / weight / size / line-height — colour is applied separately
   via the colour tokens. Circular Std: Book=400, Medium=500, Bold=700.
     header        — Circular Std Bold      (700)
     subheader     — Circular Std Medium    (500)
     label-text    — Circular Std Book      (400)
     tagline-serif — Quincy CF Bold         (700)
     tagline-sans  — Circular Std Medium    (500)
     body-copy     — Circular Std Book      (400)
   ========================================== */

/* header — Circular Std 700/Bold */
.header-xxs { font-family: var(--font-primary); font-weight: 700; font-size: 10px; line-height: 14px; }
.header-xs { font-family: var(--font-primary); font-weight: 700; font-size: 12px; line-height: 16px; }
.header-sm { font-family: var(--font-primary); font-weight: 700; font-size: 14px; line-height: 18px; }
.header-md { font-family: var(--font-primary); font-weight: 700; font-size: 16px; line-height: 20px; }
.header-lg { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 22px; }
.header-xl { font-family: var(--font-primary); font-weight: 700; font-size: 20px; line-height: 24px; }
.header-2xl { font-family: var(--font-primary); font-weight: 700; font-size: 24px; line-height: 28px; }
.header-3xl { font-family: var(--font-primary); font-weight: 700; font-size: 30px; line-height: 34px; }
.header-4xl { font-family: var(--font-primary); font-weight: 700; font-size: 36px; line-height: 40px; }
.header-5xl { font-family: var(--font-primary); font-weight: 700; font-size: 40px; line-height: 44px; }
.header-6xl { font-family: var(--font-primary); font-weight: 700; font-size: 48px; line-height: 52px; }
.header-7xl { font-family: var(--font-primary); font-weight: 700; font-size: 60px; line-height: 64px; }
.header-8xl { font-family: var(--font-primary); font-weight: 700; font-size: 72px; line-height: 76px; }
.header-9xl { font-family: var(--font-primary); font-weight: 700; font-size: 96px; line-height: 100px; }

/* subheader — Circular Std 500/Medium */
.subheader-xxs { font-family: var(--font-primary); font-weight: 500; font-size: 10px; line-height: 14px; }
.subheader-xs { font-family: var(--font-primary); font-weight: 500; font-size: 12px; line-height: 16px; }
.subheader-sm { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 18px; }
.subheader-md { font-family: var(--font-primary); font-weight: 500; font-size: 16px; line-height: 20px; }
.subheader-lg { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 22px; }
.subheader-xl { font-family: var(--font-primary); font-weight: 500; font-size: 20px; line-height: 24px; }
.subheader-2xl { font-family: var(--font-primary); font-weight: 500; font-size: 24px; line-height: 28px; }
.subheader-3xl { font-family: var(--font-primary); font-weight: 500; font-size: 30px; line-height: 34px; }
.subheader-4xl { font-family: var(--font-primary); font-weight: 500; font-size: 36px; line-height: 40px; }
.subheader-5xl { font-family: var(--font-primary); font-weight: 500; font-size: 40px; line-height: 44px; }
.subheader-6xl { font-family: var(--font-primary); font-weight: 500; font-size: 48px; line-height: 52px; }
.subheader-7xl { font-family: var(--font-primary); font-weight: 500; font-size: 60px; line-height: 64px; }
.subheader-8xl { font-family: var(--font-primary); font-weight: 500; font-size: 72px; line-height: 76px; }
.subheader-9xl { font-family: var(--font-primary); font-weight: 500; font-size: 96px; line-height: 100px; }

/* label-text — Circular Std 450/Book */
.label-text-xxs { font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 12px; }
.label-text-xs { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 14px; }
.label-text-sm { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 18px; }
.label-text-md { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 20px; }
.label-text-lg { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 22px; }
.label-text-xl { font-family: var(--font-primary); font-weight: 400; font-size: 20px; line-height: 24px; }
.label-text-2xl { font-family: var(--font-primary); font-weight: 400; font-size: 24px; line-height: 28px; }
.label-text-3xl { font-family: var(--font-primary); font-weight: 400; font-size: 30px; line-height: 34px; }
.label-text-4xl { font-family: var(--font-primary); font-weight: 400; font-size: 36px; line-height: 40px; }
.label-text-5xl { font-family: var(--font-primary); font-weight: 400; font-size: 40px; line-height: 44px; }
.label-text-6xl { font-family: var(--font-primary); font-weight: 400; font-size: 48px; line-height: 52px; }
.label-text-7xl { font-family: var(--font-primary); font-weight: 400; font-size: 60px; line-height: 64px; }
.label-text-8xl { font-family: var(--font-primary); font-weight: 400; font-size: 72px; line-height: 76px; }
.label-text-9xl { font-family: var(--font-primary); font-weight: 400; font-size: 96px; line-height: 100px; }

/* tagline-serif — Quincy CF 700/Bold */
.tagline-serif-xxs { font-family: var(--font-quincy); font-weight: 700; font-size: 10px; line-height: 14px; }
.tagline-serif-xs { font-family: var(--font-quincy); font-weight: 700; font-size: 12px; line-height: 16px; }
.tagline-serif-sm { font-family: var(--font-quincy); font-weight: 700; font-size: 14px; line-height: 20px; }
.tagline-serif-md { font-family: var(--font-quincy); font-weight: 700; font-size: 16px; line-height: 22px; }
.tagline-serif-lg { font-family: var(--font-quincy); font-weight: 700; font-size: 18px; line-height: 24px; }
.tagline-serif-xl { font-family: var(--font-quincy); font-weight: 700; font-size: 20px; line-height: 26px; }
.tagline-serif-2xl { font-family: var(--font-quincy); font-weight: 700; font-size: 24px; line-height: 30px; }
.tagline-serif-3xl { font-family: var(--font-quincy); font-weight: 700; font-size: 30px; line-height: 36px; }
.tagline-serif-4xl { font-family: var(--font-quincy); font-weight: 700; font-size: 36px; line-height: 42px; }
/* Unit suffix (K / M / % ) inside a headline metric — smaller, shared baseline. */
.metric-unit { font-size: 0.5em; vertical-align: baseline; margin-left: 1px; }
/* Fixed metric slot + tabular figures so stat groups don't shift as values change. */
.metric-num { display: inline-block; width: 120px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Narrower slot for short metrics (e.g. "97%") so they don't reserve dollar-width. */
.metric-num--narrow { width: 72px; }
/* Intermediate slot — tighter than dollar-width but fits a 1-decimal percent (e.g. "89.9%"). */
.metric-num--snug { width: 96px; }
.tagline-serif-5xl { font-family: var(--font-quincy); font-weight: 700; font-size: 40px; line-height: 46px; }
.tagline-serif-6xl { font-family: var(--font-quincy); font-weight: 700; font-size: 48px; line-height: 54px; }
.tagline-serif-7xl { font-family: var(--font-quincy); font-weight: 700; font-size: 60px; line-height: 66px; }
.tagline-serif-8xl { font-family: var(--font-quincy); font-weight: 700; font-size: 72px; line-height: 78px; }
.tagline-serif-9xl { font-family: var(--font-quincy); font-weight: 700; font-size: 96px; line-height: 102px; }

/* tagline-sans — Circular Std 500/Medium */
.tagline-sans-xxs { font-family: var(--font-primary); font-weight: 500; font-size: 10px; line-height: 14px; }
.tagline-sans-xs { font-family: var(--font-primary); font-weight: 500; font-size: 12px; line-height: 16px; }
.tagline-sans-sm { font-family: var(--font-primary); font-weight: 500; font-size: 14px; line-height: 20px; }
.tagline-sans-md { font-family: var(--font-primary); font-weight: 500; font-size: 16px; line-height: 22px; }
.tagline-sans-lg { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 24px; }
.tagline-sans-xl { font-family: var(--font-primary); font-weight: 500; font-size: 20px; line-height: 26px; }
.tagline-sans-2xl { font-family: var(--font-primary); font-weight: 500; font-size: 24px; line-height: 30px; }
.tagline-sans-3xl { font-family: var(--font-primary); font-weight: 500; font-size: 30px; line-height: 36px; }
.tagline-sans-4xl { font-family: var(--font-primary); font-weight: 500; font-size: 36px; line-height: 44px; }
.tagline-sans-5xl { font-family: var(--font-primary); font-weight: 500; font-size: 40px; line-height: 48px; }
.tagline-sans-6xl { font-family: var(--font-primary); font-weight: 500; font-size: 48px; line-height: 56px; }
.tagline-sans-7xl { font-family: var(--font-primary); font-weight: 500; font-size: 60px; line-height: 68px; }
.tagline-sans-8xl { font-family: var(--font-primary); font-weight: 500; font-size: 72px; line-height: 80px; }
.tagline-sans-9xl { font-family: var(--font-primary); font-weight: 500; font-size: 96px; line-height: 104px; }

/* body-copy — Circular Std 450/Book */
.body-copy-xxs { font-family: var(--font-primary); font-weight: 400; font-size: 10px; line-height: 14px; }
.body-copy-xs { font-family: var(--font-primary); font-weight: 400; font-size: 12px; line-height: 16px; }
.body-copy-sm { font-family: var(--font-primary); font-weight: 400; font-size: 14px; line-height: 20px; }
.body-copy-md { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 22px; }
.body-copy-lg { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 24px; }
.body-copy-xl { font-family: var(--font-primary); font-weight: 400; font-size: 20px; line-height: 26px; }
.body-copy-2xl { font-family: var(--font-primary); font-weight: 400; font-size: 24px; line-height: 30px; }
.body-copy-3xl { font-family: var(--font-primary); font-weight: 400; font-size: 30px; line-height: 36px; }
.body-copy-4xl { font-family: var(--font-primary); font-weight: 400; font-size: 36px; line-height: 44px; }
.body-copy-5xl { font-family: var(--font-primary); font-weight: 400; font-size: 40px; line-height: 48px; }
.body-copy-6xl { font-family: var(--font-primary); font-weight: 400; font-size: 48px; line-height: 56px; }
.body-copy-7xl { font-family: var(--font-primary); font-weight: 400; font-size: 60px; line-height: 68px; }
.body-copy-8xl { font-family: var(--font-primary); font-weight: 400; font-size: 72px; line-height: 80px; }
.body-copy-9xl { font-family: var(--font-primary); font-weight: 400; font-size: 96px; line-height: 104px; }

/* ==========================================
   Global Scrollbar Styles
   ========================================== */

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-300);
}

/* Position scrollbar closer to edge */
* {
  scrollbar-gutter: stable;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

/* ==========================================
   Pill / Tag Component System

   Styles: lite-gray, green, dark-gray, stroke
   Sizes: sm (12px), md (14px), lg (16px)
   Variants: counter, text, icon
   ========================================== */

/* Base tag - shared styles across all variants */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 100px;
  font-family: var(--font-primary);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Buttons that use .tag-* variants (e.g. V2 connection chat actions) */
button.tag {
  font-family: inherit;
  font-weight: inherit;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

button.tag:not(.tag-stroke) {
  border: none;
}

button.tag:not(:disabled) {
  cursor: pointer;
}

button.tag:disabled {
  cursor: not-allowed;
  opacity: 1;
}

button.tag.tag-blue:not(:disabled):hover {
  filter: brightness(0.96);
}

/* ── Tag Sizes ─────────────────────────────── */

/* XSmall: 10px font */
.tag-xs {
  font-size: 10px;
  line-height: 12px;
  padding: 3px 6px;
  gap: 3px;
}

.tag-xs .tag-icon {
  width: 12px;
  height: 12px;
}

.tag-xs .tag-icon svg {
  width: 12px;
  height: 12px;
}

.tag-xs .tag-counter {
  font-size: 9px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
}

/* Small: 12px font */
.tag-sm {
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
  gap: 4px;
}

.tag-sm .tag-icon {
  width: 14px;
  height: 14px;
}

.tag-sm .tag-icon svg {
  width: 14px;
  height: 14px;
}

.tag-sm .tag-counter {
  font-size: 11px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
}

/* Medium: 14px font (default) */
.tag-md {
  font-size: 14px;
  line-height: 20px;
  padding: 4px 12px;
  gap: 4px;
}

.tag-md .tag-icon {
  width: 16px;
  height: 16px;
}

.tag-md .tag-icon svg {
  width: 16px;
  height: 16px;
}

.tag-md .tag-counter {
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

/* Large: 16px font */
.tag-lg {
  font-size: 16px;
  line-height: 22px;
  padding: 6px 12px;
  gap: 6px;
}

.tag-lg .tag-icon {
  width: 18px;
  height: 18px;
}

.tag-lg .tag-icon svg {
  width: 18px;
  height: 18px;
}

.tag-lg .tag-counter {
  font-size: 13px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
}

/* ── Tag Styles ────────────────────────────── */

/* Lite Gray - gray-200 background, primary text */
.tag-lite-gray {
  background: var(--gray-200);
  color: var(--text-primary);
  border: none;
}

.tag-lite-gray .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-lite-gray .tag-icon {
  color: var(--text-primary);
}

/* tag-green — accent-green-light background, primary text */
.tag-green {
  background: var(--accent-green-light);
  color: var(--text-primary);
  border: none;
}

.tag-green .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-green .tag-icon {
  color: var(--text-primary);
}

/* Green Light - lighter green background for secondary achievement chips */
.tag-green-light {
  background: var(--background-green);
  color: var(--text-primary);
  border: none;
}

.tag-green-light .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-green-light .tag-icon {
  color: var(--text-primary);
}

/* Dark Gray - dark background, light text */
.tag-dark-gray {
  background: var(--stone-700);
  color: #ffffff;
  border: none;
}

.tag-dark-gray .tag-counter {
  background: var(--gray-100);
  color: var(--text-primary);
}

.tag-dark-gray .tag-icon {
  color: rgba(255, 255, 255, 0.8);
}

/* Stroke - white background, border, primary text */
.tag-stroke {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--quaternary);
}

.tag-stroke .tag-counter {
  background: var(--blue-100);
  color: var(--text-primary);
}

.tag-stroke .tag-icon {
  color: var(--text-primary);
}

.tag-pink-stroke {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--accent-pink-light, #f8bbd0);
}

.tag-pink-stroke .tag-icon {
  color: var(--accent-pink-light, #f8bbd0);
}

/* Gray - light gray background for declined/neutral states */
.tag-gray {
  background: var(--gray-100);
  color: var(--secondary);
  border: none;
}

.tag-gray .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-gray .tag-icon {
  color: var(--secondary);
}

/* Blue Light - light blue background */
.tag-blue-light {
  background: var(--background-blue);
  color: var(--text-primary);
  border: none;
}

.tag-blue-light .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-blue-light .tag-icon {
  color: var(--text-primary);
}

/* Pink Light - pale pink background (mirrors tag-blue-light → blue-100) */
.tag-pink-light {
  background: var(--pink-100);
  color: var(--text-primary);
  border: none;
}

.tag-pink-light .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-pink-light .tag-icon {
  color: var(--text-primary);
}

/* ── Tag Variant Elements ──────────────────── */

/* Counter - always left of text */
.tag-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  font-weight: var(--font-bold);
}

/* Icon container - always left of text */
.tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Text */
.tag-text {
  display: inline;
}

/* ── Additional Tag Color Variants ─────────── */

/* Blue — saturated fill (Actively Looking, etc.) */
.tag-blue {
  background: var(--accent-blue-light);
  color: var(--text-primary);
  border: none;
}

.tag-blue .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-blue .tag-icon {
  color: var(--text-primary);
}

/* Pink */
.tag-pink {
  background: var(--accent-pink-light);
  color: var(--text-primary);
  border: none;
}

.tag-pink .tag-counter {
  background: #ffffff;
  color: var(--text-primary);
}

.tag-pink .tag-icon {
  color: var(--text-primary);
}

/* ── Tag Logo Variant ─────────────────────────
   Displays a logo image instead of text.
   Default: 88px square (same as tag-md). Sizes: sm 72, md 88, lg 104, xl 128
   box-sizing: content-box so stated size = exact image area (border adds outside)
   Usage: <span class="tag-logo"><img src="..." /></span>
   ───────────────────────────────────────────── */

.tag-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 88px;
  height: 88px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--quaternary);
  flex-shrink: 0;
}

.tag-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo tag sizes */
.tag-logo.tag-sm {
  width: 72px;
  height: 72px;
  border-radius: 8px;
}

.tag-logo.tag-md {
  width: 88px;
  height: 88px;
  border-radius: 8px;
}

.tag-logo.tag-lg {
  width: 104px;
  height: 104px;
  border-radius: 10px;
}

.tag-logo.tag-xl {
  width: 128px;
  height: 128px;
  border-radius: 12px;
}

/* Custom size support via inline style --logo-size */
.tag-logo[style*="--logo-size"] {
  width: var(--logo-size);
  height: var(--logo-size);
}


/* ==========================================
   Design System Panel - Shared styles
   ========================================== */

.ds-pill-with-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ds-spec-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ds-spec-text {
  font-size: 10px;
  color: var(--primary);
  font-family: monospace;
}

.ds-pills-styles-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

/* 3-column grid for Sizes and Styles sections */
.ds-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 0.8fr);
  gap: 24px;
}

.ds-tag-variant-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-tag-variant-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-variant-row-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--secondary);
}

.ds-pills-tags-only {
  align-items: center;
}

/* Chip Logic Box - horizontal spanning container */
.ds-chip-logic-box {
  margin-top: 24px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--quaternary);
  border-radius: 8px;
}

.ds-chip-logic-box h5 {
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--secondary);
}

.ds-logic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ds-logic-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-logic-rule {
  font-size: 11px;
  font-family: monospace;
  color: var(--secondary);
}

/* Logic Table - for chip display logic */
.ds-logic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ds-logic-table th,
.ds-logic-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--quaternary);
}

.ds-logic-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--secondary);
  background: var(--gray-100);
}

.ds-logic-table td {
  vertical-align: middle;
}

.ds-logic-table td code {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  background: var(--gray-200);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-primary);
  border: 1px solid var(--quaternary);
}

.ds-logic-table tbody tr:hover {
  background: var(--gray-50);
}

/* ==========================================
   Page Tabs - Shared across variants
   ========================================== */

.page-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 0px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--quaternary);
}

.page-tabs .tab {
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--app-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.page-tabs .tab:hover {
  color: var(--app-primary);
}

.page-tabs .tab.active {
  color: var(--app-primary);
  font-weight: 600;
  border-bottom-color: var(--app-primary);
}



/* ===== BASE RESET (was index.css) ===== */
/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#root {
  min-height: 100vh;
  font-size: 18px;
}
/* ===== SIDE NAV (was components/Layout/SideNav.css) ===== */
/* Fills .nav-area (100vh); scroll when items + reviews + footer exceed viewport */
.side-nav {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: url('images/nav-background.svg') no-repeat center center;
  background-size: cover;
}

.side-nav > .logo {
  display: block;
  margin: 0 0 8px 0;
  padding: 0;
  color: var(--pink-400);
}

.side-nav > .logo .logo-img {
  height: 32px;
  width: auto;
  display: block;
}

.side-nav-card {
  width: 192px;
  max-width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding: 8px;
  text-decoration: none;
  color: var(--app-primary);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}

.nav-item:hover {
  background: var(--quaternary);
  color: var(--app-primary);
}

.nav-item.active {
  background: var(--navy-100);
  color: var(--app-primary);
}

.nav-item.active:hover {
  color: var(--app-primary);
}

/* Settings: light gray default, transparent when active, lighter gray on hover (spec) */
.nav-item.nav-item--settings {
  background: var(--gray-100);
  color: var(--gray-700);
}

.nav-item.nav-item--settings:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}

.nav-item.nav-item--settings.active {
  background: transparent;
  color: var(--gray-700);
}

.nav-item.nav-item--settings.active:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}

.nav-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 0;
}

/* Reviews Alert Card */
.reviews-alert {
  align-self: flex-start;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: 0 3px 10px rgba(38, 38, 38, 0.2);
  border: 1px solid var(--quaternary);
  width: 192px;
  min-width: 192px;
  max-width: 192px;
  margin: 4px 0 0 0;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.reviews-alert-header {
  font-weight: 700;
  font-size: 18px;
  color: var(--app-primary);
  margin-bottom: 0px;
}

.reviews-alert-sub {
  font-size: 16px;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: 8px;
}

.reviews-alert-avatars {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 12px;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: -20px;
  box-sizing: border-box;
}

.avatar-img:last-of-type {
  margin-right: 0;
}

.reviews-alert-more {
  font-size: 13px;
  color: var(--text-hint);
  margin-left: 8px;
}

.reviews-alert-btn {
  padding: 10px 20px;
  background: var(--app-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.reviews-alert-btn:hover {
  background: var(--app-secondary);
}

/* Start Chat Button (dev trigger) */
.start-chat-btn {
  padding: 8px 16px;
  background: #ffffff;
  color: var(--primary);
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  margin-top: 8px;
}

.start-chat-btn:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

/* Spacer */
.side-nav-spacer {
}

/* User footer */
.nav-footer {
  margin-top: auto;
  align-self: flex-start;
  flex-shrink: 0;
  width: 192px;
  min-width: 192px;
  max-width: 192px;
  box-sizing: border-box;
}

.user-section {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  box-sizing: border-box;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--app-primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}

.user-name {
  font-weight: 500;
  font-size: 18px;
  color: var(--app-primary);
}

.logout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logout-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  color: var(--app-primary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.logout-btn:hover {
  text-decoration: underline;
  color: var(--app-primary);
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--gray-900);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  font-family: inherit;
}

.collapse-toggle:hover {
  background: var(--gray-100);
}

.collapse-toggle:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}

.collapse-toggle svg {
  flex-shrink: 0;
}

.expand-row {
  display: flex;
  justify-content: center;
}

/* Collapsed state */
.side-nav.collapsed {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  align-items: center;
  padding: 24px 16px 32px;
}

.side-nav.collapsed > .logo {
  margin: 0 0 16px 0;
}

.side-nav.collapsed > .logo .logo-img {
  height: 22px;
}

.side-nav.collapsed .side-nav-card {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.side-nav.collapsed .nav-item {
  width: auto;
  justify-content: center;
}

.side-nav.collapsed .nav-footer {
  width: auto;
  min-width: 0;
  max-width: none;
  align-self: center;
}

.side-nav.collapsed .user-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Mobile bottom nav - hidden by default, shown below 768px */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: #ffffff;
  border-top: 1px solid var(--quaternary);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  text-decoration: none;
  color: var(--text-hint);
  font-size: 11px;
  font-weight: 500;
  transition: color 0.15s;
}

.mobile-nav-item svg {
  width: 24px;
  height: 24px;
}

.mobile-nav-item:hover {
  color: var(--app-secondary);
}

.mobile-nav-item.active {
  color: var(--app-primary);
}

.mobile-nav-item.active svg {
  stroke-width: 2;
}

/* Show mobile nav below 768px */
@media (max-width: 767px) {
  .side-nav {
    display: none;
  }

  .mobile-bottom-nav {
    display: flex;
  }
}


/* ===== APP LAYOUT (was components/Layout/AppLayout.css) ===== */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.nav-area {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  background-color: var(--navy-50);
  background-image: url('images/nav-background.svg');
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  position: relative;
  /* Above everything in .main-content — including the reports sticky bar (50) and
     its dropdown menus — so the nav is never overlapped by page chrome. */
  z-index: 200;
  box-shadow: 0 0 20px rgba(38, 38, 38, 0.1);
}

.main-content {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
  background: #ffffff;
}

@media (max-width: 1024px) {
  .nav-area:not(.collapsed) {
    flex: 0 0 auto;
  }
}

.nav-area.collapsed {
  flex: 0 0 88px;
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  align-items: center;
}

@media (max-width: 767px) {
  .nav-area {
    display: none;
  }

  .main-content {
    padding-bottom: 88px; /* Space for mobile bottom nav */
  }
}