information-diagnostics/design-system.html at main · vmedium/information-diagnostics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <title>Design System — Information Diagnostics</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main class="page-content" style="padding-top: var(--nav-height);">
    <div class="ds-layout">
      <aside class="ds-sidebar" id="ds-sidebar"></aside>
      <div class="ds-main" id="ds-main"></div>
    </div>
  </main>

  <script src="js/app.js"></script>
  <script>
    const DS_SECTIONS = [
      {
        group: 'Foundation',
        items: [
          { id: 'colors', label: 'Colors' },
          { id: 'typography', label: 'Typography' },
          { id: 'spacing', label: 'Spacing' },
          { id: 'shadows', label: 'Shadows & Radii' },
          { id: 'motion', label: 'Motion' }
        ]
      },
      {
        group: 'Components',
        items: [
          { id: 'buttons', label: 'Buttons' },
          { id: 'badges', label: 'Badges' },
          { id: 'tags', label: 'Tags' },
          { id: 'cards', label: 'Cards' },
          { id: 'filter-bar', label: 'Filter Bar' },
          { id: 'search', label: 'Search Input' },
          { id: 'disclaimer', label: 'Disclaimer Cards' },
          { id: 'toggle', label: 'Toggle Switch' }
        ]
      },
      {
        group: 'Data Display',
        items: [
          { id: 'body-system-tags', label: 'Body System Tags' },
          { id: 'strength-bar', label: 'Strength Bar' },
          { id: 'symptom-chips', label: 'Symptom Chips' },
          { id: 'expandable', label: 'Expandable Sections' },
          { id: 'treatment-cards', label: 'Treatment Cards' },
          { id: 'source-cards', label: 'Source Cards' },
          { id: 'result-cards', label: 'Result Cards' }
        ]
      },
      {
        group: 'Layout',
        items: [
          { id: 'grid', label: 'Grid System' },
          { id: 'page-header', label: 'Page Headers' },
          { id: 'section-header', label: 'Section Headers' },
          { id: 'hero', label: 'Hero' },
          { id: 'navigation', label: 'Navigation' },
          { id: 'footer-section', label: 'Footer' }
        ]
      },
      {
        group: 'Patterns',
        items: [
          { id: 'questionnaire', label: 'Questionnaire Steps' },
          { id: 'skeleton', label: 'Skeleton Loading' },
          { id: 'context-bar', label: 'Context Bar' },
          { id: 'comorbidity', label: 'Comorbidity Links' },
          { id: 'qualifier', label: 'Qualifier Checkboxes' }
        ]
      }
    ];

    function buildSidebar() {
      const sidebar = document.getElementById('ds-sidebar');
      sidebar.innerHTML = `
        <div style="margin-bottom: var(--space-6);">
          <a href="index.html" class="btn btn--ghost btn--sm" style="margin-bottom: var(--space-4);">← Back to Site</a>
          <h2 style="font-size: var(--text-lg); font-weight: 700;">Design System</h2>
          <p class="text-xs text-muted mt-1">v1.0 — Information Diagnostics</p>
        </div>
        ${DS_SECTIONS.map(group => `
          <div class="ds-sidebar__group">
            <div class="ds-sidebar__group-label">${group.group}</div>
            ${group.items.map(item => `<a href="#${item.id}" class="ds-sidebar__link" data-target="${item.id}">${item.label}</a>`).join('')}
          </div>
        `).join('')}`;

      sidebar.addEventListener('click', e => {
        const link = e.target.closest('.ds-sidebar__link');
        if (!link) return;
        sidebar.querySelectorAll('.ds-sidebar__link').forEach(l => l.classList.remove('active'));
        link.classList.add('active');
      });

      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            sidebar.querySelectorAll('.ds-sidebar__link').forEach(l => l.classList.remove('active'));
            const link = sidebar.querySelector(`[data-target="${entry.target.id}"]`);
            if (link) link.classList.add('active');
          }
        });
      }, { rootMargin: '-20% 0px -70% 0px' });

      document.querySelectorAll('.ds-section').forEach(section => observer.observe(section));
    }

    function buildContent() {
      const main = document.getElementById('ds-main');
      main.innerHTML = `
        ${sectionColors()}
        ${sectionTypography()}
        ${sectionSpacing()}
        ${sectionShadows()}
        ${sectionMotion()}
        ${sectionButtons()}
        ${sectionBadges()}
        ${sectionTags()}
        ${sectionCards()}
        ${sectionFilterBar()}
        ${sectionSearch()}
        ${sectionDisclaimer()}
        ${sectionToggle()}
        ${sectionBodySystemTags()}
        ${sectionStrengthBar()}
        ${sectionSymptomChips()}
        ${sectionExpandable()}
        ${sectionTreatmentCards()}
        ${sectionSourceCards()}
        ${sectionResultCards()}
        ${sectionGrid()}
        ${sectionPageHeader()}
        ${sectionSectionHeader()}
        ${sectionHero()}
        ${sectionNavigation()}
        ${sectionFooter()}
        ${sectionQuestionnaire()}
        ${sectionSkeleton()}
        ${sectionContextBar()}
        ${sectionComorbidity()}
        ${sectionQualifier()}
      `;

      document.querySelectorAll('.ds-expandable-demo').forEach(el => {
        el.querySelector('.expandable__header').addEventListener('click', () => el.classList.toggle('open'));
      });

      document.querySelectorAll('.ds-treatment-demo').forEach(el => {
        el.querySelector('.treatment-card__header').addEventListener('click', () => el.classList.toggle('open'));
      });

      document.querySelectorAll('.ds-toggle-demo').forEach(el => {
        el.addEventListener('click', () => el.classList.toggle('active'));
      });

      document.querySelectorAll('.ds-chip-interactive').forEach(el => {
        el.addEventListener('click', () => el.classList.toggle('selected'));
      });

      document.querySelectorAll('.ds-qualifier-demo').forEach(el => {
        el.addEventListener('click', () => {
          el.classList.toggle('selected');
          const cb = el.querySelector('.qualifier-option__checkbox');
          cb.innerHTML = el.classList.contains('selected') ? Components.checkSvg() : '';
        });
      });

      document.querySelectorAll('.ds-filter-demo .filter-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          btn.closest('.ds-filter-demo').querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
        });
      });

      document.querySelectorAll('.ds-system-card-demo').forEach(el => {
        el.addEventListener('click', () => el.classList.toggle('selected'));
      });
    }

    /* ========== SECTION BUILDERS ========== */

    function sectionColors() {
      const palettes = [
        { label: 'Primary', colors: [
          { name: '--color-primary', value: '#5B7F6E' },
          { name: '--color-primary-light', value: '#8BA89A' },
          { name: '--color-primary-dark', value: '#3F5C4E' },
          { name: '--color-primary-bg', value: '#EEF4F0' }
        ]},
        { label: 'Secondary', colors: [
          { name: '--color-secondary', value: '#8B6F5C' },
          { name: '--color-secondary-light', value: '#B09580' },
          { name: '--color-secondary-bg', value: '#F5F0EC' }
        ]},
        { label: 'Accent', colors: [
          { name: '--color-accent', value: '#C4956A' },
          { name: '--color-accent-light', value: '#D4AD8A' },
          { name: '--color-accent-bg', value: '#FDF6EF' }
        ]},
        { label: 'Surface', colors: [
          { name: '--color-surface', value: '#FAF8F5' },
          { name: '--color-surface-raised', value: '#FFFFFF' },
          { name: '--color-surface-muted', value: '#F3F0EB' },
          { name: '--color-surface-sunken', value: '#EDEAE4' }
        ]},
        { label: 'Text', colors: [
          { name: '--color-text', value: '#2C2926' },
          { name: '--color-text-muted', value: '#7A746D' },
          { name: '--color-text-light', value: '#A09A93' },
          { name: '--color-text-inverse', value: '#FFFFFF' }
        ]},
        { label: 'Borders', colors: [
          { name: '--color-border', value: '#E8E4DE' },
          { name: '--color-border-strong', value: '#D5CFC7' }
        ]},
        { label: 'Evidence Levels', colors: [
          { name: '--color-evidence-a', value: '#5B7F6E' },
          { name: '--color-evidence-b', value: '#8B6F5C' },
          { name: '--color-evidence-c', value: '#C4956A' },
          { name: '--color-evidence-d', value: '#A0978E' },
          { name: '--color-evidence-e', value: '#C47A6A' }
        ]},
        { label: 'Tiers', colors: [
          { name: '--color-tier-strong', value: '#5B7F6E' },
          { name: '--color-tier-moderate', value: '#C4956A' },
          { name: '--color-tier-possible', value: '#A0978E' }
        ]}
      ];

      return `
        <div class="ds-section" id="colors">
          <h2 class="ds-section__title">Colors</h2>
          <p class="ds-section__desc">The warm, calm palette. Beige surfaces, muted greens for trust, warm taupes for secondary content, soft accent golds.</p>
          ${palettes.map(p => `
            <div class="ds-specimen">
              <div class="ds-specimen__label">${p.label}</div>
              <div class="ds-color-grid">
                ${p.colors.map(c => `
                  <div class="ds-color-swatch">
                    <div class="ds-color-swatch__fill" style="background: ${c.value};${c.value === '#FFFFFF' ? ' border-bottom: 1px solid var(--color-border);' : ''}"></div>
                    <div class="ds-color-swatch__info">
                      <div class="ds-color-swatch__name">${c.name.replace('--color-', '')}</div>
                      <div class="ds-color-swatch__value">${c.value}</div>
                    </div>
                  </div>
                `).join('')}
              </div>
            </div>
          `).join('')}
        </div>`;
    }

    function sectionTypography() {
      return `
        <div class="ds-section" id="typography">
          <h2 class="ds-section__title">Typography</h2>
          <p class="ds-section__desc">Inter for UI, Lora for body prose. Clean hierarchy with tight headings and relaxed body text.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Headings (Inter)</div>
            <h1 style="margin-bottom: var(--space-4);">Heading 1 — text-4xl / 2.25rem</h1>
            <h2 style="margin-bottom: var(--space-4);">Heading 2 — text-2xl / 1.5rem</h2>
            <h3 style="margin-bottom: var(--space-4);">Heading 3 — text-xl / 1.25rem</h3>
            <h4 style="margin-bottom: var(--space-4);">Heading 4 — text-lg / 1.125rem</h4>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Body Text</div>
            <p style="margin-bottom: var(--space-3);">Base text — text-base / 1rem. The quick brown fox jumps over the lazy dog.</p>
            <p class="text-sm" style="margin-bottom: var(--space-3);">Small text — text-sm / 0.875rem. Supporting information and metadata.</p>
            <p class="text-xs" style="margin-bottom: var(--space-3);">Extra small — text-xs / 0.75rem. Labels and fine print.</p>
            <p class="text-muted" style="margin-bottom: var(--space-3);">Muted text — color-text-muted. Secondary content.</p>
            <p class="body-text">Serif body text — Lora. Used for long-form descriptions and condition content. This feels more literary, warm, and human.</p>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Special Patterns</div>
            <div class="section-label mb-3">Section Label — uppercase, xs, 600 weight</div>
            <div class="stat-number mb-3">42</div>
            <p class="text-xs text-muted">Stat number — text-2xl, bold, used for data callouts</p>
          </div>
        </div>`;
    }

    function sectionSpacing() {
      const spaces = [
        { name: '--space-1', value: '0.25rem' }, { name: '--space-2', value: '0.5rem' },
        { name: '--space-3', value: '0.75rem' }, { name: '--space-4', value: '1rem' },
        { name: '--space-5', value: '1.25rem' }, { name: '--space-6', value: '1.5rem' },
        { name: '--space-8', value: '2rem' }, { name: '--space-10', value: '2.5rem' },
        { name: '--space-12', value: '3rem' }, { name: '--space-16', value: '4rem' },
        { name: '--space-20', value: '5rem' }, { name: '--space-24', value: '6rem' }
      ];
      return `
        <div class="ds-section" id="spacing">
          <h2 class="ds-section__title">Spacing</h2>
          <p class="ds-section__desc">Consistent spacing tokens from 4px to 96px. Use CSS variables, never raw pixel values.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Scale</div>
            ${spaces.map(s => `
              <div class="flex items-center gap-4 mb-3">
                <code style="min-width: 120px;">${s.name}</code>
                <div style="width: ${s.value}; height: 16px; background: var(--color-primary-bg); border: 1px solid var(--color-primary-light); border-radius: 2px;"></div>
                <span class="text-xs text-muted">${s.value}</span>
              </div>
            `).join('')}
          </div>
        </div>`;
    }

    function sectionShadows() {
      return `
        <div class="ds-section" id="shadows">
          <h2 class="ds-section__title">Shadows & Radii</h2>
          <p class="ds-section__desc">Soft, warm shadows. Generous radii for a friendly feel.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Shadows</div>
            <div class="flex flex-wrap gap-6">
              ${['xs', 'sm', 'md', 'lg'].map(size => `
                <div style="width: 120px; height: 80px; background: var(--color-surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-${size}); display: flex; align-items: center; justify-content: center;">
                  <span class="text-xs text-muted">${size}</span>
                </div>
              `).join('')}
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Border Radii</div>
            <div class="flex flex-wrap gap-4 items-end">
              ${[
                { name: 'xs', val: '4px' }, { name: 'sm', val: '6px' }, { name: 'md', val: '10px' },
                { name: 'lg', val: '16px' }, { name: 'xl', val: '24px' }, { name: 'full', val: '9999px' }
              ].map(r => `
                <div class="text-center">
                  <div style="width: 60px; height: 60px; background: var(--color-primary-bg); border: 2px solid var(--color-primary-light); border-radius: var(--radius-${r.name});"></div>
                  <div class="text-xs text-muted mt-2">${r.name}<br>${r.val}</div>
                </div>
              `).join('')}
            </div>
          </div>
        </div>`;
    }

    function sectionMotion() {
      return `
        <div class="ds-section" id="motion">
          <h2 class="ds-section__title">Motion</h2>
          <p class="ds-section__desc">Calm, never abrupt. ease-out-soft for page transitions, ease-out for micro-interactions. Duration range: 150ms–600ms.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Timing Functions</div>
            <div class="flex flex-col gap-4">
              <div><code>--ease-out</code> <span class="text-sm text-muted ml-2">cubic-bezier(0.25, 0.1, 0.25, 1) — Standard</span></div>
              <div><code>--ease-out-soft</code> <span class="text-sm text-muted ml-2">cubic-bezier(0.22, 0.61, 0.36, 1) — Page transitions</span></div>
              <div><code>--ease-spring</code> <span class="text-sm text-muted ml-2">cubic-bezier(0.34, 1.56, 0.64, 1) — Playful emphasis</span></div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Durations</div>
            <div class="flex flex-col gap-3">
              <div><code>--duration-fast</code> <span class="text-sm text-muted">150ms — Hover, focus</span></div>
              <div><code>--duration-normal</code> <span class="text-sm text-muted">250ms — Toggles, color changes</span></div>
              <div><code>--duration-slow</code> <span class="text-sm text-muted">400ms — Page fade-in, cards</span></div>
              <div><code>--duration-slower</code> <span class="text-sm text-muted">600ms — Complex sequences</span></div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Animations (hover to trigger)</div>
            <div class="flex flex-wrap gap-4">
              <div class="card" style="width: 140px; text-align: center; padding: var(--space-4);">
                <div class="text-xs text-muted">Card Hover</div>
                <div class="text-sm mt-1">↑ lift + shadow</div>
              </div>
              <button class="btn btn--primary">Button Hover</button>
              <button class="btn btn--secondary">Secondary</button>
              <div class="symptom-chip ds-chip-interactive">Click me</div>
            </div>
          </div>
        </div>`;
    }

    function sectionButtons() {
      return `
        <div class="ds-section" id="buttons">
          <h2 class="ds-section__title">Buttons</h2>
          <p class="ds-section__desc">Three variants (primary, secondary, ghost) with size modifiers (sm, default, lg). Primary for main actions, secondary for alternatives, ghost for tertiary.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Variants</div>
            <div class="flex flex-wrap gap-3 items-center">
              <button class="btn btn--primary">Primary</button>
              <button class="btn btn--secondary">Secondary</button>
              <button class="btn btn--ghost">Ghost</button>
              <button class="btn btn--danger">Danger</button>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Sizes</div>
            <div class="flex flex-wrap gap-3 items-center">
              <button class="btn btn--primary btn--sm">Small</button>
              <button class="btn btn--primary">Default</button>
              <button class="btn btn--primary btn--lg">Large</button>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">States</div>
            <div class="flex flex-wrap gap-3 items-center">
              <button class="btn btn--primary">Normal</button>
              <button class="btn btn--primary" disabled>Disabled</button>
              <button class="btn btn--secondary">Normal</button>
              <button class="btn btn--ghost">Normal</button>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">With Icons / Links</div>
            <div class="flex flex-wrap gap-3 items-center">
              <a href="#" class="btn btn--ghost" onclick="event.preventDefault()">← Back</a>
              <a href="#" class="btn btn--primary" onclick="event.preventDefault()">Continue →</a>
              <a href="#" class="btn btn--secondary btn--sm" onclick="event.preventDefault()">Learn More</a>
            </div>
          </div>
        </div>`;
    }

    function sectionBadges() {
      return `
        <div class="ds-section" id="badges">
          <h2 class="ds-section__title">Badges</h2>
          <p class="ds-section__desc">Pill-shaped labels for categorization. Uppercase, xs text, color-coded by semantic meaning.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Evidence Level</div>
            <div class="flex flex-wrap gap-2">
              ${['A', 'B', 'C', 'D', 'E'].map(l => Components.evidenceBadge(l)).join('')}
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Recognition Status</div>
            <div class="flex flex-wrap gap-2">
              ${['mainstream', 'emerging', 'contested'].map(s => Components.recognitionBadge(s)).join('')}
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Match Tiers</div>
            <div class="flex flex-wrap gap-2">
              ${['strong', 'moderate', 'possible'].map(t => Components.tierBadge(t)).join('')}
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Treatment Type</div>
            <div class="flex flex-wrap gap-2">
              ${['pharmaceutical', 'supplement', 'dietary', 'physical-therapy', 'manual-therapy', 'lifestyle', 'mind-body'].map(t => Components.typeBadge(t)).join('')}
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Treatment Role</div>
            <div class="flex flex-wrap gap-2">
              ${['first-line', 'second-line', 'adjunct', 'investigational'].map(r => Components.roleBadge(r)).join('')}
            </div>
          </div>
        </div>`;
    }

    function sectionTags() {
      return `
        <div class="ds-section" id="tags">
          <h2 class="ds-section__title">Tags</h2>
          <p class="ds-section__desc">Small metadata labels. Default (muted) and active (highlighted) states. Used for ICD-10 codes, counts, and category labels.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">States</div>
            <div class="flex flex-wrap gap-2">
              <span class="tag">Default Tag</span>
              <span class="tag tag--active">Active Tag</span>
              <span class="tag">ICD-10: D89.40</span>
              <span class="tag">9 symptoms</span>
              <span class="tag">4 comorbidities</span>
            </div>
          </div>
        </div>`;
    }

    function sectionCards() {
      return `
        <div class="ds-section" id="cards">
          <h2 class="ds-section__title">Cards</h2>
          <p class="ds-section__desc">Primary container for content. Variants: default (hover lifts), flat (no lift), muted (subtle bg), compact (tighter padding), clickable (cursor pointer).</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Default Card (hover for lift effect)</div>
            <div style="max-width: 360px;">
              <div class="card">
                <div class="card__meta mb-3">
                  ${Components.recognitionBadge('mainstream')}
                  ${Components.evidenceBadge('A')}
                </div>
                <h3 class="card__title">Condition Name</h3>
                <p class="card__description">A brief description of the condition with evidence-graded information and research backing.</p>
                <div class="card__meta">
                  <span class="tag">ICD-10: D89.40</span>
                  <span class="tag">9 symptoms</span>
                </div>
              </div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Variants</div>
            <div class="grid grid--3" style="max-width: 800px;">
              <div class="card card--flat">
                <h4 class="card__title">Flat Card</h4>
                <p class="card__description">No hover lift or shadow change.</p>
              </div>
              <div class="card card--muted card--compact">
                <h4 class="card__title">Muted + Compact</h4>
                <p class="card__description">Subtle background, tighter padding.</p>
              </div>
              <a href="#" class="card card--clickable" onclick="event.preventDefault()">
                <h4 class="card__title">Clickable Card</h4>
                <p class="card__description">Whole card is a link target.</p>
              </a>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Card Footer</div>
            <div style="max-width: 400px;">
              <div class="card">
                <h4 class="card__title">With Actions</h4>
                <p class="card__description">Cards can have a separated footer for actions.</p>
                <div class="card__footer">
                  <a href="#" class="btn btn--secondary btn--sm" onclick="event.preventDefault()">Learn More</a>
                  <a href="#" class="btn btn--ghost btn--sm" onclick="event.preventDefault()">View Treatments</a>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionFilterBar() {
      return `
        <div class="ds-section" id="filter-bar">
          <h2 class="ds-section__title">Filter Bar</h2>
          <p class="ds-section__desc">Horizontal pill-button group for filtering lists. Active state uses primary color fill. Optional label prefix.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">With Label</div>
            <div class="filter-bar ds-filter-demo">
              <span class="filter-bar__label">Type:</span>
              <button class="filter-btn active" data-filter="all">All</button>
              <button class="filter-btn">Pharmaceutical</button>
              <button class="filter-btn">Supplement</button>
              <button class="filter-btn">Dietary</button>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Without Label</div>
            <div class="filter-bar ds-filter-demo">
              <button class="filter-btn active">All</button>
              <button class="filter-btn">Mainstream</button>
              <button class="filter-btn">Emerging</button>
              <button class="filter-btn">Contested</button>
            </div>
          </div>
        </div>`;
    }

    function sectionSearch() {
      return `
        <div class="ds-section" id="search">
          <h2 class="ds-section__title">Search Input</h2>
          <p class="ds-section__desc">Full-width input with search icon. Focus ring uses primary-bg glow. Rounded-lg with 1.5px border.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Default</div>
            <div class="search-wrapper" style="max-width: 500px;">
              <input type="text" class="search-input" placeholder="Search conditions by name, symptom, or keyword…" autocomplete="off">
            </div>
          </div>
        </div>`;
    }

    function sectionDisclaimer() {
      return `
        <div class="ds-section" id="disclaimer">
          <h2 class="ds-section__title">Disclaimer Cards</h2>
          <p class="ds-section__desc">Prominent callout boxes for medical/legal disclaimers. Default (warm accent bg) and contested (reddish) variants.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Default</div>
            <div class="disclaimer-card">
              <strong>Important:</strong> This information is for educational purposes only. Evidence levels indicate the strength of research support, not personal effectiveness.
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Contested Variant</div>
            <div class="disclaimer-card disclaimer-card--contested">
              <strong>Evidence note:</strong> This condition's recognition status is actively debated in the medical community. Research is ongoing.
            </div>
          </div>
        </div>`;
    }

    function sectionToggle() {
      return `
        <div class="ds-section" id="toggle">
          <h2 class="ds-section__title">Toggle Switch</h2>
          <p class="ds-section__desc">Binary on/off switch. 44×24px pill with sliding circle indicator. Used in the debug panel for admin mode.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">States (click to toggle)</div>
            <div class="flex gap-6 items-center">
              <div>
                <div class="toggle ds-toggle-demo" role="switch" tabindex="0"></div>
                <span class="text-xs text-muted mt-2" style="display: block;">Off</span>
              </div>
              <div>
                <div class="toggle active ds-toggle-demo" role="switch" tabindex="0"></div>
                <span class="text-xs text-muted mt-2" style="display: block;">On</span>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionBodySystemTags() {
      return `
        <div class="ds-section" id="body-system-tags">
          <h2 class="ds-section__title">Body System Tags</h2>
          <p class="ds-section__desc">Color-coded tags per body system. Each has a unique bg/text color pair. Used alongside symptoms to show system association.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">All Systems</div>
            <div class="flex flex-wrap gap-2">
              ${['neurological', 'cardiovascular', 'gastrointestinal', 'musculoskeletal', 'skin-integumentary', 'systemic', 'respiratory', 'autonomic'].map(s => Components.bodySystemTag(s)).join('')}
            </div>
          </div>
        </div>`;
    }

    function sectionStrengthBar() {
      return `
        <div class="ds-section" id="strength-bar">
          <h2 class="ds-section__title">Strength Bar</h2>
          <p class="ds-section__desc">5-segment mini bar chart showing association weight (0–1). Primary fill for strong (>=0.7), accent for moderate. Used in symptom-condition associations.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Weights</div>
            <div class="flex flex-col gap-3">
              ${[1.0, 0.9, 0.7, 0.5, 0.3, 0.1].map(w => `
                <div class="flex items-center gap-4">
                  ${Components.strengthBar(w)}
                  <span class="text-sm text-muted">${w.toFixed(1)} weight</span>
                </div>
              `).join('')}
            </div>
          </div>
        </div>`;
    }

    function sectionSymptomChips() {
      return `
        <div class="ds-section" id="symptom-chips">
          <h2 class="ds-section__title">Symptom Chips</h2>
          <p class="ds-section__desc">Selectable pill buttons. Default, hover, selected states. Static variant (no pointer, no hover change) for read-only display.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Interactive (click to toggle)</div>
            <div class="flex flex-wrap gap-2">
              <div class="symptom-chip ds-chip-interactive">Chronic Fatigue</div>
              <div class="symptom-chip ds-chip-interactive selected">Brain Fog</div>
              <div class="symptom-chip ds-chip-interactive">Joint Hypermobility</div>
              <div class="symptom-chip ds-chip-interactive">Skin Flushing</div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">With Body System Tag</div>
            <div class="flex flex-wrap gap-2">
              <div class="symptom-chip">${Components.bodySystemTag('neurological')} Brain Fog</div>
              <div class="symptom-chip">${Components.bodySystemTag('cardiovascular')} Tachycardia</div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Static (read-only)</div>
            <div class="flex flex-wrap gap-2">
              <span class="symptom-chip symptom-chip--static">Chronic Fatigue</span>
              <span class="symptom-chip symptom-chip--static">Brain Fog</span>
            </div>
          </div>
        </div>`;
    }

    function sectionExpandable() {
      return `
        <div class="ds-section" id="expandable">
          <h2 class="ds-section__title">Expandable Sections</h2>
          <p class="ds-section__desc">Accordion-style collapsible panels. Header with chevron rotates 180° on open. Used for body system groups in symptom index.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Interactive</div>
            <div class="expandable open ds-expandable-demo">
              <div class="expandable__header">
                <div class="flex items-center gap-4">
                  <span style="font-size: 20px;">🧠</span>
                  <div>
                    <h3>Neurological</h3>
                    <span class="text-sm text-muted">8 symptoms</span>
                  </div>
                </div>
                ${Components.chevronSvg()}
              </div>
              <div class="expandable__body">
                <div class="expandable__content">
                  <div class="card card--flat card--compact mb-2">
                    <h4>Brain Fog</h4>
                    <p class="text-sm text-muted mt-1">Difficulty concentrating, word-finding trouble, mental fatigue</p>
                  </div>
                  <div class="card card--flat card--compact mb-2">
                    <h4>Chronic Headaches</h4>
                    <p class="text-sm text-muted mt-1">Recurring headaches, often migrainous, that resist typical treatment</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="expandable ds-expandable-demo">
              <div class="expandable__header">
                <div class="flex items-center gap-4">
                  <span style="font-size: 20px;">❤️</span>
                  <div>
                    <h3>Cardiovascular</h3>
                    <span class="text-sm text-muted">5 symptoms</span>
                  </div>
                </div>
                ${Components.chevronSvg()}
              </div>
              <div class="expandable__body">
                <div class="expandable__content">
                  <div class="card card--flat card--compact">
                    <h4>Tachycardia</h4>
                    <p class="text-sm text-muted mt-1">Abnormally rapid heart rate upon standing</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionTreatmentCards() {
      return `
        <div class="ds-section" id="treatment-cards">
          <h2 class="ds-section__title">Treatment Cards</h2>
          <p class="ds-section__desc">Expandable cards with header badges, description, and collapsible detail section with definition-list content. Click header to expand.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Interactive</div>
            <div class="treatment-card ds-treatment-demo">
              <div class="treatment-card__header">
                <div class="treatment-card__header-content">
                  <div class="flex flex-wrap gap-2 mb-2">
                    ${Components.evidenceBadge('A')}
                    ${Components.roleBadge('first-line')}
                  </div>
                  <h4>H1/H2 Antihistamine Combination</h4>
                  <p class="text-sm text-muted mt-1">Blocks histamine receptors to reduce systemic mast cell activation symptoms</p>
                </div>
                ${Components.chevronSvg()}
              </div>
              <div class="treatment-card__body">
                <div class="treatment-card__detail">
                  <dt>Description</dt>
                  <dd>Daily combination of H1 and H2 receptor blockers to manage chronic histamine-mediated symptoms.</dd>
                  <dt>Typical Use</dt>
                  <dd>Second-generation H1 blocker (cetirizine, fexofenadine) + H2 blocker (famotidine)</dd>
                  <dt>Cautions</dt>
                  <dd>May cause drowsiness with first-generation H1 blockers. Monitor for drug interactions.</dd>
                </div>
              </div>
            </div>
            <div class="treatment-card open ds-treatment-demo">
              <div class="treatment-card__header">
                <div class="treatment-card__header-content">
                  <div class="flex flex-wrap gap-2 mb-2">
                    ${Components.evidenceBadge('B')}
                    ${Components.roleBadge('adjunct')}
                    <span class="badge badge--type">Rx / Medical Guidance</span>
                  </div>
                  <h4>Low-Dose Naltrexone (LDN)</h4>
                  <p class="text-sm text-muted mt-1">Modulates immune function and reduces neuroinflammation at sub-therapeutic doses</p>
                  <div class="flex flex-wrap gap-1 mt-2"><span class="tag">MCAS</span><span class="tag">Fibromyalgia</span></div>
                </div>
                ${Components.chevronSvg()}
              </div>
              <div class="treatment-card__body">
                <div class="treatment-card__detail">
                  <dt>Description</dt>
                  <dd>An opioid antagonist used at very low doses to modulate immune system function.</dd>
                  <dt>Evidence Note</dt>
                  <dd>Growing body of case series and small RCTs. Not yet mainstream-endorsed for these conditions.</dd>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionSourceCards() {
      return `
        <div class="ds-section" id="source-cards">
          <h2 class="ds-section__title">Source Cards</h2>
          <p class="ds-section__desc">Cards displaying curated research sources with type badge, condition tags, description, credibility note, and external link.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Example</div>
            <div style="max-width: 480px;">
              <div class="source-card">
                <div class="flex flex-wrap gap-2 mb-3">
                  <span class="badge badge--type">Organization</span>
                  <span class="tag">MCAS</span>
                  <span class="tag">hEDS</span>
                </div>
                <div class="source-card__title">The Mast Cell Disease Society</div>
                <p class="text-sm mt-2">Leading patient advocacy and education organization for mast cell diseases.</p>
                <p class="text-sm text-muted mt-2"><em>Established, well-regarded source</em></p>
                <div class="source-card__url mt-3">
                  <a href="#" onclick="event.preventDefault()">https://tmsforacure.org</a>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionResultCards() {
      return `
        <div class="ds-section" id="result-cards">
          <h2 class="ds-section__title">Result Cards</h2>
          <p class="ds-section__desc">Questionnaire results with staggered fade-in animation, match count callout, matched symptom tags, and action buttons.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Example</div>
            <div class="result-card">
              <div class="result-card__header">
                <div class="flex-1">
                  <div class="flex flex-wrap gap-2 mb-2">
                    ${Components.recognitionBadge('emerging')}
                    ${Components.evidenceBadge('B')}
                  </div>
                  <h3>Mast Cell Activation Syndrome</h3>
                  <p class="text-sm text-muted mt-2">A condition where mast cells release excessive chemical mediators, causing multi-system symptoms…</p>
                </div>
                <div class="text-center" style="min-width: 70px;">
                  <div class="stat-number" style="color: var(--color-tier-strong);">7</div>
                  <div class="text-sm text-muted">matched</div>
                </div>
              </div>
              <div class="result-card__matched mt-3">
                ${Components.sectionLabel('Your matching symptoms')}
                <div class="flex flex-wrap gap-1 mt-2">
                  <span class="tag tag--active">Skin Flushing</span>
                  <span class="tag tag--active">GI Issues</span>
                  <span class="tag tag--active">Fatigue</span>
                  <span class="tag tag--active">Brain Fog</span>
                </div>
              </div>
              <div class="result-card__actions">
                <a href="#" class="btn btn--secondary btn--sm" onclick="event.preventDefault()">Learn More</a>
                <a href="#" class="btn btn--ghost btn--sm" onclick="event.preventDefault()">View Treatments (8)</a>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionGrid() {
      return `
        <div class="ds-section" id="grid">
          <h2 class="ds-section__title">Grid System</h2>
          <p class="ds-section__desc">CSS Grid layouts: 2, 3, or 4 columns. Responsive: collapses to 1 column on mobile, 2 on tablet. Gap: var(--space-6).</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">3-Column Grid</div>
            <div class="grid grid--3">
              <div class="card card--flat card--compact text-center"><span class="text-sm text-muted">Column 1</span></div>
              <div class="card card--flat card--compact text-center"><span class="text-sm text-muted">Column 2</span></div>
              <div class="card card--flat card--compact text-center"><span class="text-sm text-muted">Column 3</span></div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">2-Column Grid</div>
            <div class="grid grid--2">
              <div class="card card--flat card--compact text-center"><span class="text-sm text-muted">Column 1</span></div>
              <div class="card card--flat card--compact text-center"><span class="text-sm text-muted">Column 2</span></div>
            </div>
          </div>
        </div>`;
    }

    function sectionPageHeader() {
      return `
        <div class="ds-section" id="page-header">
          <h2 class="ds-section__title">Page Headers</h2>
          <p class="ds-section__desc">Top-of-page title + subtitle. Enters with fadeInUp animation. mb-8 bottom spacing.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Example</div>
            <div class="page-header" style="animation: none; margin-bottom: 0;">
              <h1>Condition Library</h1>
              <p>Evidence-graded information about complex, often co-occurring health conditions</p>
            </div>
          </div>
        </div>`;
    }

    function sectionSectionHeader() {
      return `
        <div class="ds-section" id="section-header">
          <h2 class="ds-section__title">Section Headers</h2>
          <p class="ds-section__desc">Centered heading + subtitle for homepage sections. Max-width constrained.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Example</div>
            <div class="section-header" style="margin-bottom: 0;">
              <h2>Conditions we cover</h2>
              <p>Evidence-graded information about conditions that frequently co-occur</p>
            </div>
          </div>
        </div>`;
    }

    function sectionHero() {
      return `
        <div class="ds-section" id="hero">
          <h2 class="ds-section__title">Hero</h2>
          <p class="ds-section__desc">Full-width centered hero with large title, subtitle, and action buttons. Generous vertical padding.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Example (scaled)</div>
            <div style="padding: var(--space-8) 0; text-align: center;">
              <h1 class="hero__title" style="font-size: var(--text-3xl);">Understanding your body shouldn't be this hard</h1>
              <p class="hero__subtitle" style="font-size: var(--text-base);">Research-backed information about complex conditions.</p>
              <div class="hero__actions">
                <a href="#" class="btn btn--primary" onclick="event.preventDefault()">Primary Action</a>
                <a href="#" class="btn btn--secondary" onclick="event.preventDefault()">Secondary Action</a>
              </div>
            </div>
          </div>
        </div>`;
    }

    function sectionNavigation() {
      return `
        <div class="ds-section" id="navigation">
          <h2 class="ds-section__title">Navigation</h2>
          <p class="ds-section__desc">Fixed top nav with frosted-glass effect. Brand icon (click opens debug panel), page links with active state, mobile hamburger. Adds shadow on scroll.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Features</div>
            <ul style="list-style: disc; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);">
              <li class="text-sm">Frosted glass: <code>backdrop-filter: blur(12px)</code></li>
              <li class="text-sm">Scroll shadow: <code>.nav.scrolled</code> adds <code>box-shadow: var(--shadow-sm)</code></li>
              <li class="text-sm">Brand icon: Click to open debug panel</li>
              <li class="text-sm">Active link: <code>.nav__link.active</code> highlighted bg</li>
              <li class="text-sm">Mobile: Hamburger toggle, full-width dropdown with <code>slideDown</code> animation</li>
            </ul>
          </div>
        </div>`;
    }

    function sectionFooter() {
      return `
        <div class="ds-section" id="footer-section">
          <h2 class="ds-section__title">Footer</h2>
          <p class="ds-section__desc">Muted background footer with disclaimer text, copyright, and page links. Max-width constrained.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Structure</div>
            <ul style="list-style: disc; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);">
              <li class="text-sm">Disclaimer paragraph with border-bottom separator</li>
              <li class="text-sm">Copyright + link row with space-between layout</li>
              <li class="text-sm">Padding: <code>space-12</code> top, <code>space-8</code> bottom</li>
            </ul>
          </div>
        </div>`;
    }

    function sectionQuestionnaire() {
      return `
        <div class="ds-section" id="questionnaire">
          <h2 class="ds-section__title">Questionnaire Steps</h2>
          <p class="ds-section__desc">5-step wizard with dot indicators, connected lines, and a body system card selector.</p>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Step Indicator</div>
            <div class="step-indicator">
              <div class="step-dot completed"></div>
              <div class="step-connector completed"></div>
              <div class="step-dot completed"></div>
              <div class="step-connector completed"></div>
              <div class="step-dot active"></div>
              <div class="step-connector"></div>
              <div class="step-dot"></div>
              <div class="step-connector"></div>
              <div class="step-dot"></div>
            </div>
          </div>
          <div class="ds-specimen">
            <div class="ds-specimen__label">Body System Cards (click to select)</div>
            <div class="grid grid--3" style="max-width: 600px;">
              <div class="body-system-card ds-system-card-demo selected">
                <div class="body-system-card__icon">🧠</div>
                <div class="body-system-card__label">Neurological</div>
                <span class="text-sm text-muted">8 symptoms</span>
              </div>
              <div class="body-system-card ds-system-card-demo">
                <div class="body-system-card__icon">❤️</div>
                <div class="body-system-card__label">Cardiovascular</div>
                <span class="text-sm text-muted">5 symptoms</span>
              </div>