# HTML Report Design System

This is the CSS design system and component library for research reports. When generating a report, use these exact CSS variables, class names, and component patterns. The report should be a single self-contained HTML file.

## CSS Variables (Dark Theme)

```css
:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #334155;
  --border: #475569;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #38bdf8;
  --accent2: #818cf8;
  --green: #34d399;
  --orange: #fb923c;
  --red: #f87171;
  --pink: #f472b6;
  --yellow: #fbbf24;
}
```

## Base Styles

```css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
```

## Components

### Hero Section
```html
<div class="hero">
  <div class="container">
    <div style="margin-bottom: 1rem;">
      <span class="badge badge-blue">Research Report</span>
      <span class="badge badge-green">Month Year</span>
    </div>
    <h1>Report Title</h1>
    <p class="subtitle">Subtitle explaining the scope</p>
    <p class="date">Gemma Analytics &mdash; Internal Research &mdash; YYYY-MM-DD</p>
  </div>
</div>
```

```css
.hero { padding: 4rem 0 3rem; text-align: center; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); border-bottom: 1px solid var(--border); }
.hero h1 { font-size: 2.8rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.hero .subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 1rem; }
.hero .date { font-size: 0.9rem; color: var(--text-muted); opacity: 0.7; }
```

### Badges
```html
<span class="badge badge-blue">Label</span>
<span class="badge badge-green">Label</span>
<span class="badge badge-orange">Label</span>
<span class="badge badge-red">Label</span>
```

```css
.badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-blue { background: rgba(56,189,248,0.15); color: var(--accent); border: 1px solid rgba(56,189,248,0.3); }
.badge-green { background: rgba(52,211,153,0.15); color: var(--green); border: 1px solid rgba(52,211,153,0.3); }
.badge-orange { background: rgba(251,146,60,0.15); color: var(--orange); border: 1px solid rgba(251,146,60,0.3); }
.badge-red { background: rgba(248,113,113,0.15); color: var(--red); border: 1px solid rgba(248,113,113,0.3); }
```

### Table of Contents
```html
<div class="toc">
  <h2>Contents</h2>
  <div class="toc-grid">
    <a href="#section-id"><span class="num">01</span> Section Title</a>
  </div>
</div>
```

```css
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin: 2rem 0; }
.toc h2 { font-size: 1.1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; }
.toc a { color: var(--accent); text-decoration: none; padding: 0.5rem; border-radius: 6px; display: block; transition: background 0.2s; }
.toc a:hover { background: var(--surface2); }
.toc .num { color: var(--text-muted); margin-right: 0.5rem; }
```

### KPI Row
```html
<div class="kpi-row">
  <div class="kpi blue"><div class="value">18K+</div><div class="label">GitHub Stars</div></div>
  <div class="kpi green"><div class="value">$0</div><div class="label">Self-Hosted Cost</div></div>
</div>
```

```css
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; text-align: center; }
.kpi .value { font-size: 2rem; font-weight: 800; }
.kpi .label { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.kpi.blue .value { color: var(--accent); }
.kpi.green .value { color: var(--green); }
.kpi.orange .value { color: var(--orange); }
.kpi.pink .value { color: var(--pink); }
.kpi.purple .value { color: var(--accent2); }
```

### Cards
```html
<div class="card-grid">
  <div class="card">
    <h3>Card Title</h3>
    <p>Card description text.</p>
    <span class="badge badge-green">Tag</span>
  </div>
</div>
```

```css
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h3 { margin-top: 0; font-size: 1.2rem; }
```

### Comparison Tables
```html
<table>
  <thead><tr><th>Feature</th><th>Tool A</th><th>Tool B</th></tr></thead>
  <tbody>
    <tr><td>Feature X</td><td class="check">&#10003;</td><td class="cross">&#10007;</td></tr>
    <tr><td>Feature Y</td><td class="partial">Partial</td><td class="check">&#10003;</td></tr>
  </tbody>
</table>
```

```css
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
thead { background: var(--surface2); }
th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(71,85,105,0.3); color: var(--text-muted); }
tr:hover td { background: rgba(56,189,248,0.05); }
.check { color: var(--green); font-weight: bold; }
.cross { color: var(--red); font-weight: bold; }
.partial { color: var(--orange); font-weight: bold; }
```

### Score Cards (Dot Ratings)
```html
<div class="score-grid">
  <div class="score-card">
    <h3>Tool Name</h3>
    <div class="score-row">
      <span class="score-label">Documentation</span>
      <div class="score-dots">
        <span class="score-dot filled"></span>
        <span class="score-dot filled"></span>
        <span class="score-dot filled"></span>
        <span class="score-dot filled"></span>
        <span class="score-dot"></span>
      </div>
    </div>
  </div>
</div>
```

```css
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.score-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.score-card h3 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.score-card .score-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid rgba(71,85,105,0.2); }
.score-card .score-row:last-child { border-bottom: none; }
.score-card .score-label { font-size: 0.85rem; color: var(--text-muted); }
.score-dots { display: flex; gap: 3px; }
.score-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface2); }
.score-dot.filled { background: var(--accent); }
```

### Flow Diagrams (CSS)
```html
<div class="flow">
  <div class="flow-step"><div class="name">Step 1</div><div class="desc">Description</div></div>
  <div class="flow-arrow">&rarr;</div>
  <div class="flow-step highlight"><div class="name">Step 2</div><div class="desc">Highlighted</div></div>
</div>
```

```css
.flow { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 2rem 0; flex-wrap: wrap; }
.flow-step { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1.25rem; text-align: center; min-width: 120px; }
.flow-step .name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.flow-step .desc { font-size: 0.75rem; color: var(--text-muted); }
.flow-arrow { font-size: 1.5rem; color: var(--accent); }
.flow-step.highlight { border-color: var(--accent); background: rgba(56,189,248,0.1); }
```

### Bar Charts (CSS)
```html
<div class="bar-chart">
  <div class="bar-row">
    <div class="bar-label">Tool A</div>
    <div class="bar-track">
      <div class="bar-fill blue" style="width: 85%">85%</div>
    </div>
  </div>
</div>
```

```css
.bar-chart { margin: 1.5rem 0; }
.bar-row { display: flex; align-items: center; margin: 0.5rem 0; }
.bar-label { width: 140px; font-size: 0.85rem; color: var(--text-muted); flex-shrink: 0; }
.bar-track { flex: 1; height: 28px; background: var(--surface); border-radius: 6px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 0.75rem; font-size: 0.8rem; font-weight: 600; color: white; transition: width 0.8s ease; }
.bar-fill.blue { background: linear-gradient(90deg, var(--accent), #0ea5e9); }
.bar-fill.green { background: linear-gradient(90deg, var(--green), #10b981); }
.bar-fill.orange { background: linear-gradient(90deg, var(--orange), #f59e0b); }
.bar-fill.purple { background: linear-gradient(90deg, var(--accent2), #6366f1); }
```

### Callout Boxes
```html
<div class="callout">
  <h3>Key Recommendation</h3>
  <p>The important takeaway text.</p>
</div>
```

```css
.callout { background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(129,140,248,0.1)); border: 1px solid rgba(56,189,248,0.3); border-radius: 12px; padding: 1.5rem 2rem; margin: 1.5rem 0; }
.callout h3 { color: var(--accent); margin-top: 0; }
.callout p { color: var(--text); }
```

### Blockquotes
```html
<blockquote>
  <p>"Quote text here."</p>
  <cite>&mdash; Author, Source</cite>
</blockquote>
```

```css
blockquote { border-left: 3px solid var(--accent); padding: 1rem 1.5rem; margin: 1rem 0; background: rgba(56,189,248,0.05); border-radius: 0 8px 8px 0; }
blockquote p { color: var(--text); margin: 0; font-style: italic; }
blockquote cite { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); font-style: normal; }
```

### Timeline
```html
<div class="timeline">
  <div class="timeline-item">
    <h4>Event Title</h4>
    <p>Description of what happened or will happen.</p>
  </div>
</div>
```

```css
.timeline { margin: 2rem 0; padding-left: 2rem; border-left: 2px solid var(--border); }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-item::before { content: ''; position: absolute; left: -2.35rem; top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.timeline-item h4 { margin: 0; color: var(--text); }
.timeline-item p { margin: 0.25rem 0 0; font-size: 0.9rem; }
```

### Mermaid Diagrams
```html
<div style="background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin: 1.5rem 0;">
  <pre class="mermaid">
    graph LR
      A[Source] --> B[Transform]
      B --> C[Serve]
  </pre>
</div>
```

Include in `<head>`:
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({theme: 'dark', themeVariables: {primaryColor: '#38bdf8', primaryTextColor: '#e2e8f0', lineColor: '#475569', secondaryColor: '#1e293b', nodeBorder: '#475569', nodeTextColor: '#e2e8f0'}});</script>
```

**Node styling rule:** When highlighting nodes, use a **dark fill with a colored border** — never bright fills. Mermaid's dark theme ignores the `color` property in inline `style` directives, so text on bright backgrounds becomes invisible. Use `fill:#1e293b` (the surface color) with a thick colored `stroke`:
```
    style MyNode fill:#1e293b,stroke:#38bdf8,stroke-width:3px,color:#38bdf8
    style MyNode fill:#1e293b,stroke:#818cf8,stroke-width:3px,color:#818cf8
    style MyNode fill:#1e293b,stroke:#34d399,stroke-width:3px,color:#34d399
    style MyNode fill:#1e293b,stroke:#fb923c,stroke-width:3px,color:#fb923c
```
**Never** use bright fill patterns like `fill:#38bdf8,color:#fff` — the `color` is ignored by Mermaid, making node text unreadable.

### Sections
```css
section { padding: 3rem 0; border-bottom: 1px solid rgba(71,85,105,0.3); }
section:last-child { border-bottom: none; }
h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
h2 .section-num { color: var(--accent); margin-right: 0.5rem; font-size: 1.5rem; }
h3 { font-size: 1.3rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--text); }
p { margin-bottom: 1rem; color: var(--text-muted); }
p.lead { font-size: 1.15rem; color: var(--text); }
ul, ol { margin: 0.5rem 0 1rem 1.5rem; color: var(--text-muted); }
li { margin: 0.3rem 0; }
li strong { color: var(--text); }
```

### Footer
```html
<footer>
  <div class="container">
    <p>Gemma Analytics &mdash; Internal Research &mdash; YYYY-MM-DD</p>
    <p style="margin-top: 0.5rem; font-size: 0.8rem;">Generated with Claude Code tech-research skill</p>
  </div>
</footer>
```

```css
footer { padding: 2rem 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border); }
```

### Responsive
```css
@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }
  .container { padding: 0 1rem; }
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
}
```