/* ============================================================
       CSS Custom Properties — Cisgenics Brand Tokens
       Palette: Cisgenics Brand Identity 1.7 (Pantone sources)
       ============================================================ */
    :root {
      /* Brand colours */
      --brand-teal:       #004744;   /* Pantone 7476 C — primary surface, headings */
      --brand-dark:       #002031;   /* Pantone 303 C  — deepest bg, nav */
      --brand-green:      #66F0A0;   /* Pantone 353 C  — accent, active state */
      --brand-orange:     #FF783C;   /* Pantone Orange 021 C — execute */
      --brand-blue:       #29AAE1;   /* Pantone 299 C  — retrieve, info */
      --brand-grey:       #EBEDEC;   /* Pantone 427 C  — neutral bg */

      /* Tints (white base) */
      --teal-40:  #99bfbe;
      --teal-20:  #cce7e6;
      --teal-10:  #e6f3f3;
      --dark-10:  #e6eaed;
      --dark-20:  #ccd5db;
      --dark-60:  #667a88;
      --green-10: #ecfdf4;
      --green-20: #d9fce9;
      --blue-10:  #e4f4fc;
      --blue-20:  #c8eaf8;
      --orange-10:#fff0e9;
      --orange-20:#ffe0d2;

      /* Semantic text — teal on white: 10.7:1 WCAG AA */
      --text-primary:   #002031;
      --text-secondary: #334d5e;
      --text-muted:     #667a88;
      --text-on-dark:   #f0f4f6;

      /* Surfaces */
      --bg-page:        #f4f7f8;
      --bg-card:        #ffffff;
      --divider:        #d4dadd;
      --divider-subtle: #EBEDEC;

      /* Typography */
      --font-sans: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'SF Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;

      /* Scale (ratio ~1.25) */
      --text-xs:   0.75rem;
      --text-sm:   0.875rem;
      --text-base: 1rem;
      --text-lg:   1.125rem;
      --text-xl:   1.25rem;
      --text-2xl:  1.5rem;
      --text-3xl:  1.875rem;
      --text-4xl:  2.25rem;

      /* Spacing (8px grid) */
      --sp-1:  0.25rem;
      --sp-2:  0.5rem;
      --sp-3:  0.75rem;
      --sp-4:  1rem;
      --sp-5:  1.25rem;
      --sp-6:  1.5rem;
      --sp-8:  2rem;
      --sp-10: 2.5rem;
      --sp-12: 3rem;
      --sp-16: 4rem;
      --sp-20: 5rem;

      /* Radius — 0.4rem per Cisgenics brand layout spec */
      --radius-sm:   0.25rem;
      --radius:      0.4rem;
      --radius-md:   0.5rem;
      --radius-lg:   0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0,32,49,0.06);
      --shadow:    0 2px 8px rgba(0,32,49,0.08), 0 1px 2px rgba(0,32,49,0.04);
      --shadow-md: 0 4px 16px rgba(0,32,49,0.10), 0 2px 4px rgba(0,32,49,0.06);

      /* Transitions */
      --t-fast: 150ms ease;
      --t-base: 200ms ease-out;
    }

    /* ============================================================
       Reset
       ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-sans);
      font-size: var(--text-base);
      font-weight: 400;
      line-height: 1.6;
      color: var(--text-primary);
      background: var(--bg-page);
      min-height: 100vh;
    }

    /* ============================================================
       Layout
       ============================================================ */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--sp-6);
    }

    @media (max-width: 768px) {
      .container { padding: 0 var(--sp-4); }
    }

    /* ============================================================
       Header / Hero
       ============================================================ */
    .site-header {
      background: var(--brand-dark);
      color: var(--text-on-dark);
      padding: var(--sp-12) 0 var(--sp-10);
    }

    .header-inner {
      display: flex;
      flex-direction: column;
      gap: var(--sp-5);
    }

    /* Wordmark */
    .wordmark {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .wordmark-brand {
      font-size: var(--text-xl);
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--text-on-dark);
    }

    .wordmark-accent {
      color: var(--brand-green);
    }

    .wordmark-sep {
      width: 1px;
      height: 1.1em;
      background: rgba(255,255,255,0.18);
      display: inline-block;
      vertical-align: middle;
      margin: 0 var(--sp-2);
    }

    .wordmark-sub {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(240,244,246,0.45);
    }

    /* Headline */
    .header-h1 {
      font-size: var(--text-4xl);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--text-on-dark);
    }

    .header-h1 .hl {
      color: var(--brand-green);
    }

    .header-desc {
      font-size: var(--text-lg);
      font-weight: 300;
      color: rgba(240,244,246,0.7);
      max-width: 640px;
      line-height: 1.55;
    }

    /* Stats */
    .header-stats {
      display: flex;
      align-items: center;
      gap: var(--sp-6);
      flex-wrap: wrap;
    }

    .stat-pair {
      display: flex;
      align-items: baseline;
      gap: var(--sp-2);
    }

    .stat-num {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--brand-green);
      line-height: 1;
    }

    .stat-lbl {
      font-size: var(--text-sm);
      color: rgba(240,244,246,0.55);
    }

    .stat-sep {
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.1);
    }

    /* Build note */
    .build-note {
      display: inline-block;
      padding: var(--sp-2) var(--sp-4);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      font-size: var(--text-xs);
      color: rgba(240,244,246,0.35);
      font-family: var(--font-mono);
    }

    @media (max-width: 640px) {
      .header-h1 { font-size: var(--text-3xl); }
      .stat-sep  { display: none; }
    }

    /* ============================================================
       Sticky Controls Bar
       ============================================================ */
    .controls-bar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--divider);
      padding: var(--sp-4) 0;
      box-shadow: var(--shadow-sm);
    }

    .controls-inner {
      display: flex;
      align-items: center;
      gap: var(--sp-5);
      flex-wrap: wrap;
    }

    /* Suite tabs */
    .suite-tabs {
      display: flex;
      border: 1px solid var(--divider);
      border-radius: var(--radius-md);
      overflow: hidden;
      flex-shrink: 0;
    }

    .suite-tab {
      padding: var(--sp-2) var(--sp-4);
      font-size: var(--text-sm);
      font-weight: 500;
      font-family: var(--font-sans);
      border: none;
      background: var(--bg-card);
      color: var(--text-muted);
      cursor: pointer;
      transition: background var(--t-fast), color var(--t-fast);
      border-right: 1px solid var(--divider);
      white-space: nowrap;
    }

    .suite-tab:last-child { border-right: none; }

    .suite-tab:hover {
      background: var(--teal-10);
      color: var(--brand-teal);
    }

    .suite-tab.active {
      background: var(--brand-teal);
      color: #fff;
    }

    .suite-tab:focus-visible {
      outline: 2px solid var(--brand-blue);
      outline-offset: 2px;
      position: relative;
      z-index: 1;
    }

    /* Category pills */
    .filter-group {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      flex-wrap: wrap;
      flex: 1;
    }

    .filter-lbl {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .filter-pills {
      display: flex;
      gap: var(--sp-1);
      flex-wrap: wrap;
    }

    .filter-pill {
      padding: 3px var(--sp-3);
      font-size: var(--text-xs);
      font-weight: 500;
      font-family: var(--font-sans);
      border: 1px solid var(--divider);
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: all var(--t-fast);
      background: transparent;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .filter-pill:hover {
      border-color: var(--brand-teal);
      color: var(--brand-teal);
    }

    .filter-pill.active {
      background: var(--brand-teal);
      border-color: var(--brand-teal);
      color: #fff;
    }

    /* Per-category active colour */
    .filter-pill[data-cat="retrieve"].active   { background: var(--brand-blue);   border-color: var(--brand-blue); }
    .filter-pill[data-cat="analyze"].active    { background: #004744;             border-color: #004744; }
    .filter-pill[data-cat="recommend"].active  { background: #7c5fb0;             border-color: #7c5fb0; }
    .filter-pill[data-cat="execute"].active    { background: #c04b10;             border-color: #c04b10; }
    .filter-pill[data-cat="configure"].active  { background: #4d6e2e;             border-color: #4d6e2e; }
    .filter-pill[data-cat="export"].active     { background: #1f6b80;             border-color: #1f6b80; }
    .filter-pill[data-cat="guardrail"].active  { background: #7a1a1a;             border-color: #7a1a1a; }

    .filter-pill:focus-visible {
      outline: 2px solid var(--brand-blue);
      outline-offset: 2px;
    }

    /* Result count */
    .result-count {
      font-size: var(--text-xs);
      color: var(--text-muted);
      margin-left: auto;
      white-space: nowrap;
      flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .controls-inner { gap: var(--sp-3); }
      .result-count   { margin-left: 0; width: 100%; }
    }

    /* ============================================================
       Main Content
       ============================================================ */
    .main-content {
      padding: var(--sp-10) 0 var(--sp-20);
    }

    /* ============================================================
       Stats Summary Bar
       ============================================================ */
    .stats-summary {
      background: var(--bg-card);
      border: 1px solid var(--divider-subtle);
      border-radius: var(--radius-lg);
      padding: var(--sp-6);
      margin-bottom: var(--sp-8);
      box-shadow: var(--shadow-sm);
    }

    .stats-heading {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--sp-4);
    }

    .stats-cats {
      display: flex;
      gap: var(--sp-5);
      flex-wrap: wrap;
    }

    .stats-cat-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 68px;
    }

    .stats-cat-num {
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--brand-teal);
      line-height: 1;
    }

    .stats-cat-lbl {
      font-size: var(--text-xs);
      color: var(--text-muted);
    }

    .stats-suite-row {
      display: flex;
      gap: var(--sp-8);
      flex-wrap: wrap;
      margin-top: var(--sp-5);
      padding-top: var(--sp-5);
      border-top: 1px solid var(--divider-subtle);
    }

    .suite-stat {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-3);
    }

    .suite-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-top: 5px;
      flex-shrink: 0;
    }

    .suite-dot.dot-baseline { background: var(--brand-teal); }
    .suite-dot.dot-waterpro { background: var(--brand-blue); }

    .suite-stat-name  { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
    .suite-stat-desc  { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

    /* ============================================================
       Chain Groups
       ============================================================ */
    .chain-group {
      margin-bottom: var(--sp-12);
    }

    .chain-group-header {
      display: flex;
      align-items: center;
      gap: var(--sp-4);
      margin-bottom: var(--sp-5);
      padding-bottom: var(--sp-4);
      border-bottom: 1px solid var(--divider);
      flex-wrap: wrap;
    }

    .chain-sig {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .ch-step {
      display: inline-flex;
      align-items: center;
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 3px var(--sp-3);
      border-radius: var(--radius);
      white-space: nowrap;
    }

    .ch-arrow {
      display: inline-block;
      padding: 0 var(--sp-2);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
    }

    /* Step colours — chain group level (larger display) */
    .ch-step.s-retrieve   { background: var(--blue-10);  color: #1a5f8b; }
    .ch-step.s-analyze    { background: var(--teal-10);  color: #004744; }
    .ch-step.s-recommend  { background: #f0ecf9;         color: #5a3f8a; }
    .ch-step.s-execute    { background: var(--orange-10);color: #a03c0a; }
    .ch-step.s-configure  { background: #eef5e8;         color: #3d5828; }
    .ch-step.s-export     { background: #e8f5f7;         color: #1d5a66; }
    .ch-step.s-guardrail  { background: #fce8e8;         color: #7a1a1a; }
    .ch-step.s-clarify    { background: #fef7e6;         color: #8b5e10; }

    .group-count {
      margin-left: auto;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--text-muted);
      background: var(--bg-page);
      border: 1px solid var(--divider);
      border-radius: var(--radius-full);
      padding: 2px var(--sp-3);
      white-space: nowrap;
    }

    /* ============================================================
       Prompt Cards
       ============================================================ */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
      gap: var(--sp-4);
    }

    .prompt-card {
      background: var(--bg-card);
      border: 1px solid var(--divider-subtle);
      border-radius: var(--radius-lg);
      padding: var(--sp-5) var(--sp-6);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
    }

    /* Left-border accent per category */
    .prompt-card[data-category="retrieve"]  { border-left: 3px solid var(--brand-blue); }
    .prompt-card[data-category="analyze"]   { border-left: 3px solid var(--brand-teal); }
    .prompt-card[data-category="recommend"] { border-left: 3px solid #7c5fb0; }
    .prompt-card[data-category="execute"]   { border-left: 3px solid var(--brand-orange); }
    .prompt-card[data-category="configure"] { border-left: 3px solid #5b7b3a; }
    .prompt-card[data-category="export"]    { border-left: 3px solid #2a7a8c; }
    .prompt-card[data-category="guardrail"] { border-left: 3px solid #8b2020; }

    .prompt-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--teal-40);
      transform: translateY(-1px);
    }

    /* Card header */
    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--sp-3);
      flex-wrap: wrap;
    }

    .card-badges {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      flex-wrap: wrap;
    }

    /* ID chip */
    .prompt-id {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      background: var(--bg-page);
      border: 1px solid var(--divider);
      border-radius: var(--radius-sm);
      padding: 2px var(--sp-2);
      white-space: nowrap;
    }

    /* Category badge */
    .cat-badge {
      display: inline-flex;
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 2px var(--sp-2);
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .cat-badge.cat-retrieve   { background: var(--blue-20);  color: #1a5f8b; }
    .cat-badge.cat-analyze    { background: var(--teal-20);  color: #004744; }
    .cat-badge.cat-recommend  { background: #e8e0f5;         color: #4e2d7a; }
    .cat-badge.cat-execute    { background: var(--orange-20);color: #a03c0a; }
    .cat-badge.cat-configure  { background: #ddeece;         color: #2d4a18; }
    .cat-badge.cat-export     { background: #d2ecf0;         color: #164e5a; }
    .cat-badge.cat-guardrail  { background: #f5d5d5;         color: #6b1212; }

    /* Suite tag */
    .suite-tag {
      font-size: var(--text-xs);
      font-weight: 500;
      border: 1px solid var(--divider);
      border-radius: var(--radius-sm);
      padding: 2px var(--sp-2);
      white-space: nowrap;
    }

    .suite-tag.tag-baseline { color: #667a88; border-color: var(--dark-20); }
    .suite-tag.tag-waterpro { color: #1a6fa0; border-color: var(--blue-20); background: var(--blue-10); }

    /* Mini chain on card */
    .card-chain {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .cc-step {
      font-size: var(--text-xs);
      font-weight: 600;
      padding: 1px var(--sp-2);
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .cc-arrow {
      color: var(--text-muted);
      font-size: 9px;
      padding: 0 3px;
      font-weight: 700;
    }

    .cc-step.s-retrieve   { color: #1a5f8b; background: var(--blue-10); }
    .cc-step.s-analyze    { color: #004744; background: var(--teal-10); }
    .cc-step.s-recommend  { color: #5a3f8a; background: #f0ecf9; }
    .cc-step.s-execute    { color: #a03c0a; background: var(--orange-10); }
    .cc-step.s-configure  { color: #3d5828; background: #eef5e8; }
    .cc-step.s-export     { color: #1d5a66; background: #e8f5f7; }
    .cc-step.s-guardrail  { color: #7a1a1a; background: #fce8e8; }
    .cc-step.s-clarify    { color: #8b5e10; background: #fef7e6; }

    /* Prompt text */
    .prompt-text {
      font-size: var(--text-base);
      font-weight: 400;
      line-height: 1.55;
      color: var(--text-primary);
      border-left: 3px solid var(--teal-20);
      padding-left: var(--sp-4);
      font-style: italic;
    }

    /* Expected */
    .expected-lbl {
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--sp-1);
    }

    .expected-text {
      font-size: var(--text-sm);
      line-height: 1.55;
      color: var(--text-secondary);
    }

    /* ============================================================
       Empty state
       ============================================================ */
    .empty-state {
      text-align: center;
      padding: var(--sp-16) var(--sp-8);
      color: var(--text-muted);
    }

    .empty-state p:first-child {
      font-size: var(--text-lg);
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: var(--sp-2);
    }

    /* ============================================================
       Footer
       ============================================================ */
    .site-footer {
      background: var(--brand-dark);
      color: rgba(240,244,246,0.4);
      padding: var(--sp-8) 0;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }

    .footer-primary { font-size: var(--text-sm); color: rgba(240,244,246,0.6); }
    .footer-meta    { font-size: var(--text-xs); font-family: var(--font-mono); }

    /* ============================================================
       Accessibility
       ============================================================ */
    :focus-visible {
      outline: 2px solid var(--brand-blue);
      outline-offset: 2px;
    }

    /* ============================================================
       Reduced motion
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .prompt-card, .suite-tab, .filter-pill { transition: none; }
      .prompt-card:hover { transform: none; }
    }

    /* ============================================================
       Responsive
       ============================================================ */
    @media (max-width: 640px) {
      .cards-grid        { grid-template-columns: 1fr; }
      .chain-group-header { flex-wrap: wrap; }
      .group-count       { margin-left: 0; }
    }