Appendix

# Inbox Processing Instructions

This folder is an inbox for transcripts. Whenever a new file appears in `inbox/`, process it as described below.

## What counts as a new file
- Any file sitting directly in `inbox/` (e.g. `.txt`, `.md`, `.vtt`, `.srt`, `.docx`, `.pdf`)
- Ignore: this `CLAUDE.md`, `styles.md`, hidden files (e.g. `.DS_Store`), and anything inside `processed/`

## Styling

**Before generating any pages, read [`styles.md`](styles.md)** and follow it for colors, typography, layout, components, and slide navigation. It also names reference pages you can copy the structure and CSS from. Where `styles.md` and the steps below overlap, `styles.md` wins on look and feel.

## Processing steps (for each new file)

1. **Read and analyze the transcript.** Identify:
   - The overall topic and purpose of the conversation/session
   - Participants or speakers (if named)
   - Key topics covered, in the order they came up
   - Important decisions, insights, or takeaways
   - Action items / next steps (with owners, if stated)
   - Notable quotes worth highlighting

2. **Create a results folder** at `processed/<transcript-name>/`, where `<transcript-name>` is the original file name without its extension (lowercase, spaces replaced with hyphens).

3. **Generate `overview.html`** in that folder — a single-page summary built with **React**:
   - Self-contained single HTML file; load React, ReactDOM, and Babel standalone from a CDN (e.g. unpkg or cdnjs) so it opens directly in a browser with no build step
   - Build the page from React components (e.g. `Header`, `Summary`, `TopicList`, `KeyTakeaways`, `ActionItems`, `Quotes`)
   - Keep the transcript analysis as a data object at the top of the script, and have components render from it
   - Clean, modern styling; readable on desktop and mobile
   - Include the source file name and processing date

4. **Generate `slides.html`** in that folder — a presentation (think "PowerPoint in HTML"):
   - Self-contained single HTML file (plain HTML/CSS/JS is fine)
   - One idea per slide; suggested flow: title slide → agenda → one slide per key topic → key takeaways → action items → closing slide
   - Navigation: **Next / Previous buttons**, **left/right arrow keys**, and a **slide counter** (e.g. "3 / 10")
   - Full-screen-style 16:9 slides with large, presentation-friendly text — short bullet points, not paragraphs

5. **Move the original transcript** into `processed/<transcript-name>/` alongside the two HTML files, so the inbox is empty again.

6. **Report back** with a short summary of the transcript and the paths to both generated files.

## Resulting structure

```
inbox/
├── CLAUDE.md
├── styles.md
└── processed/
    └── <transcript-name>/
        ├── <original transcript file>
        ├── overview.html
        └── slides.html
```

# Style Guide — Transcript Pages

Preferred look and feel for the pages generated from inbox transcripts. Follow this for every new transcript so all outputs look like one consistent set.

---

## Overall direction
- **Clean, modern, light.** White surfaces on a soft **white-to-gray gradient** background.
- **No burgundy or team colors.** Use a neutral slate palette and one indigo accent, whatever the topic.
- Card-based layouts: white cards, thin borders, soft shadows, rounded corners.
- Generous whitespace. Content should breathe.

## Color tokens
Define these as CSS variables on `:root`:

| Token | Value | Use |
|---|---|---|
| `--text` | `#0f172a` | Primary text |
| `--muted` | `#64748b` | Secondary text, labels |
| `--faint` | `#94a3b8` | Timestamps, footers, hints |
| `--border` | `#e2e8f0` | Card borders, dividers |
| `--subtle` | `#f8fafc` | Quote boxes, bar tracks |
| `--accent` | `#4f46e5` | Eyebrows, numbers, buttons (indigo) |
| `--accent-soft` | `#eef2ff` | Badge/pill backgrounds |

**Status colors** (likelihood meters, good/bad steps): green `#10b981`, amber `#f59e0b`, red `#ef4444`.
**"Tie"/neutral highlight pill:** text `#b45309` on `#fef3c7`.
**Avatar colors** (one per person, in order): `#6366f1`, `#0ea5e9`, `#10b981`, `#f59e0b`.
**Accent gradient** (progress bars, stat bars, big numbers as gradient text): `linear-gradient(90deg, #4f46e5, #06b6d4)`. Older pages also use `#6366f1 → #22d3ee` for stat bars.

## Backgrounds
- **Overview page body:** `linear-gradient(180deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%) fixed;` with `min-height: 100vh`.
- **Slides page body:** `linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%)`.
- **Slide surface:** `linear-gradient(160deg, #ffffff 0%, #ffffff 45%, #eef1f5 100%)`.
- **Centered slides** (title, section break, quote, closing): add faint radial glows, indigo-soft top-left and cyan-soft bottom-right, e.g. `radial-gradient(circle at 15% 10%, #eef2ff 0, transparent 40%), radial-gradient(circle at 85% 90%, #ecfeff 0, transparent 40%)`.

## Typography
- **Font:** Inter from Google Fonts (weights 400–800), falling back to the system sans-serif stack. Use `-webkit-font-smoothing: antialiased`.
- **Headlines:** weight 800 with tight letter-spacing (`-0.02em` to `-0.035em`).
- **Eyebrows** (small label above each heading): 12px, weight 700, uppercase, `letter-spacing: .12em`, accent color.
- **Timestamps / clock values:** monospace (`ui-monospace, Menlo`).

## Shared components
- **Card:** white, `1px solid var(--border)`, radius 16px (about 1.2cqw on slides), shadow `0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06)`.
- **Badge / pill:** accent text on `--accent-soft`, fully rounded, weight 600.
- **Avatar:** colored circle with white initials.
- **Likelihood meter:** a thin rounded track with a colored fill (green = Likely, amber = Possible, red = Doubtful), with the label next to it.
- **Numbered takeaway:** a small rounded square (accent on accent-soft) holding the number, with the text beside it.
- **Quote card:** a large faded opening quote mark (`#c7d2fe`) in the top-left, quote text weight 600, attribution in muted text.
- **Step sequence:** horizontal steps with a colored top border. Steps that go wrong use red for both the border and the clock text.

---

## Page 1 — `overview.html` (React)
- A single self-contained file. Load React 18, ReactDOM and Babel standalone from **cdnjs**, so there's no build step.
- Keep **all content in one `data` object** at the top of the script, and have the components render from it.
- Max content width about 1040px, with a 16px side gutter. Grids use `repeat(auto-fit, minmax(220px, 1fr))` so they reflow on mobile.
- **Section order:**
  1. **Hero:** centered pill badge (show/episode) → large headline title → muted one-line subtitle → a **scoreboard-style summary card** (or the topic's equivalent key-facts card) → a small meta row (date, recorded, source file)
  2. **Summary:** one card holding a single paragraph
  3. **Key sequence:** a step-by-step breakdown of the pivotal moment (if the transcript has one)
  4. **By the numbers:** stat cards with a big number, a label and a thin gradient bar
  5. **Participants:** avatar cards with name and role
  6. **What was covered:** a timeline list with a timestamp column on the left and title + description on the right
  7. **Key statements:** cards per person, quotes in subtle boxes, a "→ verdict" line at the bottom
  8. **Theories / options:** cards with likelihood meters
  9. **Takeaways:** numbered list in one card
  10. **Action items:** cards showing owner (eyebrow), item (bold) and "Proposed by", then a "What to watch" row of icon cards
  11. **Notable quotes:** quote cards
  12. **Footer:** source file, processing date and any disclaimers
- Each section has an **eyebrow + h2** heading pair (e.g. eyebrow "By the numbers", heading "What was left on the field").

## Page 2 — `slides.html` (HTML slideshow)
- A single self-contained file in plain HTML/CSS/JS (no framework needed).
- **16:9 stage** that scales to fit the window: `width: min(94vw, calc((100vh - 96px) * 16 / 9))`, with `container-type: inline-size`. Size all text in **`cqw` units** so it scales with the slide.
- Stage has radius 14px and a soft drop shadow.
- **Slide types:**
  - **Centered:** title, section break, big quote, closing. Pill badge → large headline (about 6.6cqw) → muted subtitle, plus a footnote along the bottom.
  - **Content:** eyebrow → h2 (about 3.8cqw) → bullets or a card grid (`.c2`, `.c3` or `.c4` columns).
- **Bullets:** no default dots. Use small rounded indigo squares instead.
- **Suggested flow:** title → agenda (two-column bullets) → key sequence → numbers → details → section break → statements → big quote → theories → insider read → why it matters → takeaways → action items → what to watch → closing.
- **Navigation:**
  - Previous / Next buttons as white pills that turn the accent color on hover
  - Left/right arrow keys and the space bar
  - A "3 / 15" counter
  - A gradient progress bar along the bottom edge
- Slide transition: a short fade-up (`.35s`).
- **URL parameters** (must be supported):
  - `?slide=N` opens on slide N
  - `&embed=1` hides the controls and progress bar and makes the slide fill the frame, so other pages can embed single slides

## Optional — `print-preview.html`
- A sticky blurred-white toolbar holding chips (slide count, paper size, layout) plus "Open full deck" and a primary "Print" button.
- A Letter-landscape paper sheet (`aspect-ratio: 11 / 8.5`) on a gray gradient, with a header and footer.
- Selected slides appear in a 2 × 2 grid of mini cards. Each card is an `<iframe>` of `slides.html?slide=N&embed=1` rendered at 1280×720 and scaled down with JS to fit the card.
- Include `@page { size: letter landscape }` and print styles that hide the toolbar.

---

## Content preferences
- **Don't invent specific facts or stats** (yardages, percentages, records) that aren't in the transcript. If a number isn't in the source, leave it out or keep it general.
- When real, named people are quoted in a fictional or demo transcript, add a disclaimer saying the quotes are invented.
- Titles should be short and punchy. A conversational question works well as a subtitle (e.g. *"What in the world was the Commanders offense thinking?"*).