{"type":"thinking_level_change","id":"4f603626","parentId":null,"timestamp":"2026-03-31T08:38:39.886Z","thinkingLevel":"medium"}
{"type":"model_change","id":"0e2cf4f8","parentId":"4f603626","timestamp":"2026-03-31T08:38:39.887Z","provider":"anthropic","modelId":"claude-opus-4-6"}
{"type":"custom_message","customType":"gsd-auto","content":"You are executing GSD auto-mode.\n\n## Working Directory\n\nYour working directory is `/home/aux/projects/content-to-kb-automator`. All file reads, writes, and shell commands MUST operate relative to this directory. Do NOT `cd` to any other directory.\n\nAll relevant context has been preloaded below — start working immediately without re-reading these files.\n\n## Executor Context Constraints\n\nThe agent that executes each task has a **200K token** context window.\n- Recommended task count for this slice: **2–6 tasks**\n- Each task gets ~320K chars of inline context (plans, code, decisions)\n- Keep individual tasks completable within a single context window — if a task needs more context than fits, split it\n\nThen:\n0. If `REQUIREMENTS.md` was preloaded above, identify which Active requirements the roadmap says this slice owns or supports. These are the requirements this plan must deliver — every owned requirement needs at least one task that directly advances it, and verification must prove the requirement is met.\n1. Read the templates:\n   - `~/.gsd/agent/extensions/gsd/templates/plan.md`\n   - `~/.gsd/agent/extensions/gsd/templates/task-plan.md`\n2.  Record the installed skills you expect executors to use in each task plan's `skills_used` frontmatter.\n3. Define slice-level verification — the objective stopping condition for this slice:\n   - For non-trivial slices: plan actual test files with real assertions. Name the files.\n   - For simple slices: executable commands or script assertions are fine.\n   - If the project is non-trivial and has no test framework, the first task should set one up.\n   - If this slice establishes a boundary contract, verification must exercise that contract.\n4. **For non-trivial slices only** — plan observability, proof level, and integration closure:\n   - Include `Observability / Diagnostics` for backend, integration, async, stateful, or UI slices where failure diagnosis matters.\n   - Fill `Proof Level` and `Integration Closure` when the slice crosses runtime boundaries or has meaningful integration concerns.\n   - **Omit these sections entirely for simple slices** where they would all be \"none\" or trivially obvious.\n5. **Quality gates** — for non-trivial slices, fill the Threat Surface (Q3) and Requirement Impact (Q4) sections in the slice plan:\n   - **Threat Surface:** Identify abuse scenarios, data exposure risks, and input trust boundaries. Required when the slice handles user input, authentication, authorization, or sensitive data. Omit entirely for internal refactoring or simple changes.\n   - **Requirement Impact:** List which existing requirements this slice touches, what must be re-verified after shipping, and which prior decisions should be reconsidered. Omit entirely if no existing requirements are affected.\n   - For each task in a non-trivial slice, fill Failure Modes (Q5), Load Profile (Q6), and Negative Tests (Q7) in the task plan when the task has external dependencies, shared resources, or non-trivial input handling. Omit for simple tasks.\n6. Decompose the slice into tasks, each fitting one context window. Each task needs:\n   - a concrete, action-oriented title\n   - the inline task entry fields defined in the plan.md template (Why / Files / Do / Verify / Done when)\n   - a matching task plan file with description, steps, must-haves, verification, inputs, and expected output\n   - **Inputs and Expected Output must list concrete backtick-wrapped file paths** (e.g. `` `src/types.ts` ``). These are machine-parsed to derive task dependencies — vague prose without paths breaks parallel execution. Every task must have at least one output file path.\n   - Observability Impact section **only if the task touches runtime boundaries, async flows, or error paths** — omit it otherwise\n7. **Persist planning state through `gsd_plan_slice`.** Call it with the full slice planning payload (goal, demo, must-haves, verification, tasks, and metadata). The tool inserts all tasks in the same transaction, writes to the DB, and renders `/home/aux/projects/content-to-kb-automator/.gsd/milestones/M011/slices/S03/S03-PLAN.md` and `.gsd/milestones/M011/slices/S03/tasks/T##-PLAN.md` files automatically. Do **not** call `gsd_plan_task` separately — `gsd_plan_slice` handles task persistence. Do **not** rely on direct `PLAN.md` writes as the source of truth; the DB-backed tool is the canonical write path for slice and task planning state.\n8. **Self-audit the plan.** Walk through each check — if any fail, fix the plan files before moving on:\n    - **Completion semantics:** If every task were completed exactly as written, the slice goal/demo should actually be true.\n    - **Requirement coverage:** Every must-have in the slice maps to at least one task. No must-have is orphaned. If `REQUIREMENTS.md` exists, every Active requirement this slice owns maps to at least one task.\n    - **Task completeness:** Every task has steps, must-haves, verification, inputs, and expected output — none are blank or vague. Inputs and Expected Output list backtick-wrapped file paths, not prose descriptions.\n    - **Dependency correctness:** Task ordering is consistent. No task references work from a later task.\n    - **Key links planned:** For every pair of artifacts that must connect, there is an explicit step that wires them.\n    - **Scope sanity:** Target 2–5 steps and 3–8 files per task. 10+ steps or 12+ files — must split. Each task must be completable in a single fresh context window.\n    - **Feature completeness:** Every task produces real, user-facing progress — not just internal scaffolding.\n    - **Quality gate coverage:** For non-trivial slices, Threat Surface and Requirement Impact sections are present and specific (not placeholder text). For non-trivial tasks, Failure Modes, Load Profile, and Negative Tests are addressed in the task plan.\n10. If planning produced structural decisions, append them to `.gsd/DECISIONS.md`\n11. Do not commit — .gsd/ planning docs are managed externally and not tracked in git.\n\nThe slice directory and tasks/ subdirectory already exist. Do NOT mkdir. All work stays in your working directory: `/home/aux/projects/content-to-kb-automator`.\n\n**You MUST call `gsd_plan_slice` to persist the planning state before finishing.**\n\nWhen done, say: \"Slice S03 planned.\"\n## UNIT: Plan Slice S03 (\"Global Search & Mobile Navigation\") — Milestone M011\n\n## Inlined Context (preloaded — do not re-read these files)\n\n### Milestone Roadmap\nSource: `.gsd/milestones/M011/M011-ROADMAP.md`\n\n# M011: \n\n## Vision\nTransform Chrysopedia from functionally adequate to engaging and accessible. Add interaction delight (hover animations, staggered entrances, featured technique glow, random discovery), navigation improvements (collapsed topics, global search, mobile hamburger, creator stats pills, tag overflow, empty subtopics), and WCAG accessibility fixes (heading hierarchy, skip link, contrast, page titles).\n\n## Slice Overview\n| ID | Slice | Risk | Depends | Done | After this |\n|----|-------|------|---------|------|------------|\n| S01 | Interaction Delight & Discovery | medium | — | ✅ | Cards animate on hover with scale+shadow. Card grids stagger entrance. Featured technique has glow treatment. Random Technique button navigates to a random page. |\n| S02 | Topics, Creator Stats & Card Polish | medium | — | ✅ | Topics page loads collapsed, expands with animation. Creator stats show colored topic pills. Cards limit tags to 4 with +N more. Empty subtopics show Coming soon. |\n| S03 | Global Search & Mobile Navigation | medium | — | ⬜ | Compact search bar in nav on all pages. Cmd+K focuses it. Mobile viewport shows hamburger menu. |\n| S04 | Accessibility & SEO Fixes | low | — | ⬜ | Every page has single H1, skip-to-content link, AA contrast text, and descriptive browser tab title. |\n\n---\n\n### Slice Research\nSource: `.gsd/milestones/M011/slices/S03/S03-RESEARCH.md`\n\n# S03 Research: Global Search & Mobile Navigation\n\n## Summary\n\nThis slice adds two features to the app shell in `App.tsx`: (1) a compact search bar in the nav on all non-home pages with Cmd+K focus, and (2) a hamburger menu for mobile viewports (<768px). Both are well-understood patterns. The existing `SearchAutocomplete` component already supports `heroSize` toggling — a new compact/nav mode is a straightforward addition. No mobile nav exists yet; it's greenfield.\n\n**Requirements owned:** R020 (Global Search in Navigation), R021 (Mobile Hamburger Menu)\n\n## Recommendation\n\nStraightforward implementation — no novel tech, no risky integration. Build the nav search first (it affects desktop and mobile layout), then add the hamburger menu. Both modify `App.tsx` and `App.css` primarily.\n\n## Implementation Landscape\n\n### Current App Shell Structure (`App.tsx`)\n\n```\n<header className=\"app-header\">\n  <Link className=\"app-header__brand\"><h1>Chrysopedia</h1></Link>\n  <div className=\"app-header__right\">\n    <nav className=\"app-nav\">\n      <Link>Home</Link>\n      <Link>Topics</Link>\n      <Link>Creators</Link>\n      <AdminDropdown />\n    </nav>\n  </div>\n</header>\n```\n\n- No `useLocation` imported yet — will need it to conditionally render nav search (hide on `/`)\n- `app-header` is `display: flex; justify-content: space-between; padding: 0.75rem 1.5rem`\n- `app-header__right` is `display: flex; align-items: center; gap: 1.5rem`\n- At `max-width: 640px`: header becomes `flex-direction: column` and right section wraps\n- At `max-width: 768px`: no header changes currently (only technique columns go single-col)\n\n### Existing SearchAutocomplete Component\n\nFile: `frontend/src/components/SearchAutocomplete.tsx`\n\n- Props: `onSearch`, `placeholder`, `heroSize`, `initialQuery`, `autoFocus`\n- `heroSize` boolean toggles between `search-form--hero` and `search-form--inline` CSS classes\n- Input class toggles between `search-input--hero` and `search-input--inline`\n- Typeahead dropdown is absolutely positioned from `.search-container`\n- Has popular suggestions on empty focus + debounced search on 2+ chars\n- The component is self-contained with outside-click close and Escape handling\n\n**For nav mode:** Need a third variant (beyond hero/inline). Options:\n1. Add a `navCompact` boolean prop that applies `search-form--nav` and `search-input--nav` classes\n2. Change `heroSize` to a `variant: 'hero' | 'inline' | 'nav'` string prop\n\nOption 2 is cleaner. The nav variant needs: smaller padding, no submit button (Enter submits), narrower max-width (~16rem), and the typeahead dropdown needs `z-index` high enough to overlay page content.\n\n### Nav Search Layout Plan\n\n- Add `SearchAutocomplete` between brand and nav links in `app-header__right`\n- Conditionally render: show when `location.pathname !== '/'` (home has its own hero search)\n- Cmd+K handler: global `keydown` listener in App.tsx, calls `inputRef.current?.focus()`. Need to expose a ref or imperative handle from SearchAutocomplete — or add the listener inside SearchAutocomplete when variant is 'nav'.\n\n**Cmd+K implementation:** The simplest approach is a `useEffect` in `App.tsx` that listens for `Cmd+K` (or `Ctrl+K` on non-Mac) and focuses a ref. SearchAutocomplete already has an internal `inputRef` — need to either:\n- Forward the ref via `React.forwardRef` so App.tsx can call `.focus()`\n- Or put the global keydown listener inside SearchAutocomplete when `variant === 'nav'`\n\nThe second is simpler — the component already manages its own input ref. Add `globalShortcut?: boolean` prop, and when true, register `keydown` listener for Cmd+K/Ctrl+K that focuses the input and prevents default browser behavior.\n\n### Mobile Hamburger Menu Plan\n\nNo mobile nav exists. Current behavior at 640px: header stacks vertically, nav links wrap. At 768px: no header changes.\n\n**Implementation:**\n- Add a hamburger button (☰) visible only below 768px via CSS `display: none` / media query\n- Hide `.app-nav` links below 768px by default, show in an overlay/dropdown when hamburger is active\n- State: `menuOpen` boolean in App.tsx\n- Close on: route change (watch `location` with useEffect), outside click, Escape key\n- Touch targets: 44×44px minimum per R021\n- The nav search bar should move inside the mobile menu panel on small screens\n\n**CSS approach:**\n- `.hamburger-btn` — hidden on desktop, visible below 768px\n- `.app-nav` — hidden below 768px when menu closed\n- `.app-nav--open` — full-width dropdown below header with stacked links\n- Transition: `max-height` or `transform: translateX` for slide-in\n\n**AdminDropdown in mobile:** It's already a dropdown component. In the mobile menu, it should render inline (expanded) rather than as a nested dropdown. Simplest: just let it render as-is inside the mobile panel — it works fine as a sub-dropdown.\n\n### Existing CSS Custom Properties (relevant)\n\n```css\n--color-bg-header        (header background)\n--color-text-on-header   (nav link color)\n--color-text-on-header-hover\n--color-bg-input         (search input background)\n--color-border           (input border)\n--color-accent           (focus ring)\n--color-bg-surface       (dropdown background)\n--color-shadow-heavy     (dropdown shadow)\n```\n\nAll needed colors already exist as custom properties.\n\n### Existing Responsive Breakpoints\n\n- `max-width: 640px` — header columns, action bar stacking, small card adjustments\n- `max-width: 768px` — technique columns single-col\n- `min-width: 600px` — key moment grid\n\nThe 768px breakpoint for hamburger aligns with the existing 768px media query. The 640px breakpoint can handle further compacting if needed.\n\n## Natural Task Decomposition\n\n### T01: Nav Search Bar with Cmd+K (~45 min)\n1. Refactor `SearchAutocomplete` to accept `variant: 'hero' | 'inline' | 'nav'` (backward-compatible — default to hero/inline based on existing heroSize for now, or deprecate heroSize)\n2. Add nav-variant CSS: compact sizing, no submit button, appropriate z-index\n3. Add `globalShortcut` behavior inside SearchAutocomplete\n4. In `App.tsx`: import `useLocation`, conditionally render `<SearchAutocomplete variant=\"nav\" ... />` when not on homepage\n5. Wire `onSearch` to `useNavigate` for `/search?q=...`\n\n**Files:** `SearchAutocomplete.tsx`, `App.tsx`, `App.css`\n**Verify:** Build succeeds; search bar appears in nav on `/topics`, `/creators`, `/techniques/*`; hidden on `/`; Cmd+K focuses input; typing + Enter navigates to search results\n\n### T02: Mobile Hamburger Menu (~45 min)\n1. Add hamburger button markup in `App.tsx` header\n2. Add `menuOpen` state with close-on-navigate (useEffect watching location), close-on-escape, close-on-outside-click\n3. CSS: hide hamburger above 768px, hide nav links below 768px unless open\n4. Mobile menu panel: stacked links with 44×44px touch targets\n5. Nav search bar repositioned inside mobile menu panel\n\n**Files:** `App.tsx`, `App.css`\n**Verify:** Build succeeds; at viewport <768px, nav links hidden, hamburger visible; tapping hamburger shows nav; navigating closes menu; touch targets ≥44×44px\n\n## Risks\n\n- **Typeahead z-index in nav:** The dropdown positions absolutely from `.search-container`. In the nav, this needs to overlay page content below the header. Setting `z-index: 100` on the typeahead dropdown (already at 50) should handle it, but verify against sticky elements.\n- **SearchAutocomplete prop refactor:** Changing from `heroSize` boolean to `variant` string is a breaking change for Home.tsx and SearchResults.tsx callers. Need to update both call sites. Low risk but must be thorough.\n- **Mobile menu + search interaction:** When the mobile menu is open and the user focuses the search input, the typeahead dropdown needs to render within the mobile panel, not escape it. Verify positioning.\n\n## Verification Strategy\n\n```bash\n# Build check\ncd frontend && npm run build\n\n# Browser verification (manual)\n# Desktop: visit /topics, /creators — search bar in nav, Cmd+K focuses\n# Homepage: no nav search bar\n# Mobile viewport (<768px): hamburger visible, nav hidden, tap shows menu\n# Navigate from mobile menu: menu closes\n```\n\n---\n\n### Decisions\nSource: `.gsd/DECISIONS.md`\n\n# Decisions (compact)\nFields: id | when | scope | decision | choice | rationale | revisable | made_by\n\nD021 | M011 | scope | Which UI/UX assessment findings to implement in M011 | 12 of 16 findings approved; F01 (beginner paths), F02 (YouTube links), F03 (hide admin), F15 (CTA label) denied | User triaged each finding individually. Denied F01 because audience knows what they want. Denied F02 because no video URLs / don't want to link out. Denied F03 because admin dropdown is fine as-is. Denied F15 as low-value. | Yes | human\n\n---\n\n### Requirements\nSource: `.gsd/REQUIREMENTS.md`\n\n# Requirements\n\n## R001 — Whisper Transcription Pipeline\n**Status:** validated\n**Description:** Desktop Python script that accepts video files (MP4/MKV), extracts audio via ffmpeg, runs Whisper large-v3 on RTX 4090, and outputs timestamped transcript JSON with segment-level timestamps and word-level timing. Must be resumable.\n**Validation:** Script processes a sample video and produces valid JSON with timestamped segments.\n**Primary Owner:** M001/S01\n\n## R002 — Transcript Ingestion API\n**Status:** validated\n**Description:** FastAPI endpoint that accepts transcript JSON uploads, creates/updates Creator and Source Video records, and stores transcript data in PostgreSQL. Handles new creator detection from folder names.\n**Validation:** POST transcript JSON → 200 OK, records created in DB, file stored on filesystem.\n**Primary Owner:** M001/S02\n\n## R003 — LLM-Powered Extraction Pipeline (Stages 2-5)\n**Status:** validated\n**Description:** Background worker pipeline: transcript segmentation → key moment extraction → classification/tagging → technique page synthesis. Uses OpenAI-compatible API with primary (DGX Sparks Qwen) and fallback (local Ollama) endpoints. Pipeline must be resumable per-video per-stage.\n**Validation:** End-to-end: transcript JSON in → technique pages with key moments, tags, and cross-references out.\n**Primary Owner:** M001/S03\n\n## R004 — Review Queue UI\n**Status:** validated\n**Description:** Admin interface for reviewing extracted key moments: approve, edit+approve, split, merge, reject. Organized by source video for contextual review. Includes mode toggle (review vs auto-publish).\n**Validation:** Admin can review, edit, and approve/reject moments; mode toggle controls whether new moments require review.\n**Primary Owner:** M001/S04\n\n## R005 — Search-First Web UI\n**Status:** validated\n**Description:** Landing page with prominent search bar, live typeahead (results after 2-3 chars), scope toggle (All/Topics/Creators), and two navigation cards (Topics, Creators). Recently added section. Search powered by Qdrant semantic search with keyword fallback.\n**Validation:** User types query → results appear within 500ms, grouped by type, with clickable navigation.\n**Primary Owner:** M001/S05\n\n## R006 — Technique Page Display\n**Status:** validated\n**Description:** Core content unit: header (tags, title, creator, meta), study guide prose (organized by sub-aspects with signal chain blocks and quotes), key moments index (timestamped list), related techniques, plugins referenced. Amber banner for livestream-sourced content.\n**Validation:** Technique page renders with all sections populated from synthesized data.\n**Primary Owner:** M001/S05\n\n## R007 — Creators Browse Page\n**Status:** validated\n**Description:** Filterable creator list with genre filter pills, type-to-narrow, sort options (randomized default, alphabetical, view count). Each row: name, genre tags, technique count, video count, view count. Links to creator detail page.\n**Validation:** Page loads with randomized order, genre filtering works, clicking row navigates to creator detail.\n**Primary Owner:** M001/S05\n\n## R008 — Topics Browse Page\n**Status:** validated\n**Description:** Two-level topic hierarchy (7 top-level categories → sub-topics). Filter input, genre filter pills. Each sub-topic shows technique count and creator count. Clicking sub-topic loads a dedicated page with creator-grouped techniques and breadcrumbs.\n**Validation:** Hierarchy renders, filtering works, sub-topics have dedicated pages at /topics/:category/:subtopic with backend filtering and creator grouping. Verified: M010/S01.\n**Primary Owner:** M001/S05\n\n## R009 — Qdrant Vector Search Integration\n**Status:** validated\n**Description:** Embed key moment summaries, technique page content, and transcript segments in Qdrant using configurable embedding model (nomic-embed-text default). Power semantic search with metadata filtering.\n**Validation:** Semantic search returns relevant results for natural language queries; embeddings update when content changes.\n**Primary Owner:** M001/S03\n\n## R010 — Docker Compose Deployment\n**Status:** validated\n**Description:** Single docker-compose.yml packaging API, web UI, PostgreSQL, and worker services. Follows XPLTD conventions: bind mounts at /vmPool/r/services/, compose at /vmPool/r/compose/chrysopedia/, xpltd_chrysopedia project name, dedicated Docker network.\n**Validation:** `docker compose up -d` brings up all services; data persists across restarts.\n**Primary Owner:** M001/S01\n\n## R011 — Canonical Tag System\n**Status:** validated\n**Description:** Editable canonical tag list (config file) with aliases. Pipeline references tags during classification. New tags can be proposed by LLM and queued for admin approval or auto-added within existing categories.\n**Validation:** Tag list is editable; pipeline uses canonical tags consistently; alias normalization works.\n**Primary Owner:** M001/S03\n\n## R012 — Incremental Content Addition\n**Status:** validated\n**Description:** System handles ongoing content: new videos processed through pipeline, new creators auto-detected, existing technique pages updated when new moments are added for same creator+topic.\n**Validation:** Adding a new video for an existing creator updates their technique pages; new creator folder creates new Creator record.\n**Primary Owner:** M001/S03\n\n## R013 — Prompt Template System\n**Status:** validated\n**Description:** Extraction prompts (stages 2-5) stored as editable configuration files, not hardcoded. Admin can edit prompts and re-run extraction on specific or all videos for calibration.\n**Validation:** Prompt files are editable; re-processing a video with updated prompts produces different output.\n**Primary Owner:** M001/S03\n\n## R014 — Creator Equity\n**Status:** validated\n**Description:** No creator is privileged in the UI. Default sort on Creators page is randomized on every page load. All creators get equal visual weight.\n**Validation:** Refreshing Creators page shows different order each time; no creator gets larger/bolder display.\n**Primary Owner:** M001/S05\n\n## R015 — 30-Second Retrieval Target\n**Status:** active\n**Description:** A producer mid-session can find a specific technique in under 30 seconds from Alt+Tab to reading the key insight.\n**Validation:** Timed test: Alt+Tab → search → read technique → under 30 seconds.\n**Primary Owner:** M001/S05\n\n## R016 — Card Hover Animations & Staggered Entrance\n**Status:** active\n**Description:** All technique/content cards animate on hover (scale + shadow transition). Card grids use staggered fade-in-up entrance animations on page load.\n**Validation:** Cards visually respond to hover with smooth 200ms transition. Grid cards appear sequentially on page load.\n**Primary Owner:** M011/S01\n\n## R017 — Featured Technique Visual Redesign\n**Status:** active\n**Description:** Featured Technique section on homepage has a visually distinct treatment (gradient border, glow, or full-bleed) that differentiates it from ordinary cards.\n**Validation:** Featured technique is visually prominent and clearly distinct from regular technique cards.\n**Primary Owner:** M011/S01\n\n## R018 — Random Technique Discovery\n**Status:** active\n**Description:** A \"Random Technique\" button exists that navigates to a randomly selected technique page.\n**Validation:** Clicking the button loads a different technique each time.\n**Primary Owner:** M011/S01\n\n## R019 — Topics Page Default-Collapsed\n**Status:** active\n**Description:** Topics page loads with all categories collapsed, showing only category cards. Clicking a category expands its sub-topics with a smooth slide animation.\n**Validation:** Page loads collapsed. Click expands with animation. Click again collapses.\n**Primary Owner:** M011/S02\n\n## R020 — Global Search in Navigation\n**Status:** active\n**Description:** A compact search input in the navigation bar is available on all pages except the homepage. Cmd+K (or /) keyboard shortcut focuses it from any page.\n**Validation:** Search bar visible in nav on Topics, Creators, Technique, About pages. Cmd+K focuses it.\n**Primary Owner:** M011/S03\n\n## R021 — Mobile Hamburger Menu\n**Status:** active\n**Description:** Navigation uses a hamburger menu on viewports below 768px with generous touch targets (44×44px minimum).\n**Validation:** Mobile viewport shows hamburger icon. Tapping reveals nav items. Touch targets meet minimum size.\n**Primary Owner:** M011/S03\n\n## R022 — Heading Hierarchy Fix\n**Status:** active\n**Description:** Every page has exactly one H1 element. Heading levels are sequential (no skips from H1 to H3).\n**Validation:** DOM inspection confirms single H1 per page and sequential heading levels.\n**Primary Owner:** M011/S04\n\n## R023 — Skip-to-Content Link\n**Status:** active\n**Description:** A visually hidden skip link is the first focusable element on every page, visible on keyboard focus.\n**Validation:** Tab from page load shows \"Skip to content\" link. Clicking it jumps to main content area.\n**Primary Owner:** M011/S04\n\n## R024 — Text Contrast AA Compliance\n**Status:** active\n**Description:** All text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text) against the dark background.\n**Validation:** Secondary text color passes 4.5:1 contrast check against page background.\n**Primary Owner:** M011/S04\n\n## R025 — Page-Specific Document Titles\n**Status:** active\n**Description:** Each route sets a descriptive document title (e.g., \"Bass — Sound Design — Chrysopedia\", \"COPYCATT — Chrysopedia\").\n**Validation:** Browser tab shows distinct title per page. Navigating between pages updates the title.\n**Primary Owner:** M011/S04\n\n## R026 — Creator Stats Topic-Colored Pills\n**Status:** active\n**Description:** Creator detail page stats line rendered as topic-colored pill badges instead of run-on text.\n**Validation:** Stats show as visually distinct colored pills grouped by topic category.\n**Primary Owner:** M011/S02\n\n## R027 — Tag Overflow Limit on Cards\n**Status:** active\n**Description:** Technique cards show a maximum of 4 tags, with a \"+N more\" indicator for additional tags.\n**Validation:** Cards with >4 tags show exactly 4 plus a \"+N more\" badge.\n**Primary Owner:** M011/S02\n\n## R028 — Empty Subtopic Handling\n**Status:** active\n**Description:** Sub-topics with 0 techniques either hidden by default or display a \"Coming soon\" badge.\n**Validation:** Empty subtopics are visually distinguished or hidden. No dead-end clicks.\n**Primary Owner:** M011/S02\n\n## Denied / Out of Scope\n\n## R029 — Beginner Learning Paths\n**Status:** out-of-scope\n**Description:** Curated beginner learning paths with skill-level tags and \"New to Production?\" section.\n**Validation:** n/a\n**Notes:** Denied — audience knows what they're looking for. Assessment F01.\n\n## R030 — YouTube Deep Links on Key Moments\n**Status:** out-of-scope\n**Description:** Key moment timestamps link to source YouTube videos at the correct time.\n**Validation:** n/a\n**Notes:** Denied — no video URLs in data model / don't want to link out. Assessment F02.\n\n## R031 — Hide Admin Dropdown\n**Status:** out-of-scope\n**Description:** Admin dropdown hidden from public visitors behind auth or flag.\n**Validation:** n/a\n**Notes:** Denied — fine as-is. Assessment F03.\n\n## R032 — CTA Label Changes\n**Status:** out-of-scope\n**Description:** Change \"Start Exploring\" to more descriptive CTA text.\n**Validation:** n/a\n**Notes:** Denied — skipped. Assessment F15.\n\n---\n\n[...truncated 3 sections]\n\n### Dependency Slice Summaries\n\nPay particular attention to **Forward Intelligence** sections — they contain hard-won knowledge about what's fragile, what assumptions changed, and what this slice should watch out for.\n\n- (no dependencies)\n\n## Your Role in the Pipeline\n\nYou have full tool access. Before decomposing, explore the relevant code to ground your plan in reality.\n\n### Verify Roadmap Assumptions\n\nCheck prior slice summaries (inlined above as dependency summaries, if present). If prior slices discovered constraints, changed approaches, or flagged fragility, adjust your plan accordingly. The roadmap description may be stale — verify it against the current codebase state.\n\n### Explore Slice Scope\n\nRead the code files relevant to this slice. Confirm the roadmap's description of what exists, what needs to change, and what boundaries apply. Use `rg`, `find`, and targeted reads.\n\n### Source Files\n\n- **Project**: `.gsd/PROJECT.md`\n- **Requirements**: `.gsd/REQUIREMENTS.md`\n- **Decisions**: `.gsd/DECISIONS.md`\n- **Milestone Context**: `.gsd/milestones/M011/M011-CONTEXT.md`\n- **Roadmap**: `.gsd/milestones/M011/M011-ROADMAP.md`\n- **Slice Research**: `.gsd/milestones/M011/slices/S03/S03-RESEARCH.md`\n\nIf slice research exists (inlined above), trust those findings and skip redundant exploration.\n\nAfter you finish, **executor agents** implement each task in isolated fresh context windows. They see only their task plan, the slice plan excerpt (goal/demo/verification), and compressed summaries of prior tasks. They do not see the research doc, the roadmap, or REQUIREMENTS.md. Everything an executor needs must be in the task plan itself — file paths, specific steps, expected inputs and outputs.\n\nNarrate your decomposition reasoning — why you're grouping work this way, what risks are driving the order, what verification strategy you're choosing and why. Keep the narration proportional to the work — a simple slice doesn't need a long justification — but write in complete sentences, not planner shorthand.\n\n**Right-size the plan.** If the slice is simple enough to be 1 task, plan 1 task. Don't split into multiple tasks just because you can identify sub-steps. Don't fill in sections with \"None\" when the section doesn't apply — omit them entirely. The plan's job is to guide execution, not to fill a template.\n","display":false,"id":"58ab41d3","parentId":"0e2cf4f8","timestamp":"2026-03-31T08:38:39.888Z"}
{"type":"message","id":"2b266fb2","parentId":"58ab41d3","timestamp":"2026-03-31T08:38:47.114Z","message":{"role":"assistant","content":[{"type":"thinking","thinking":"Let me explore the current codebase to ground the plan in reality before decomposing tasks.","thinkingSignature":"EpYCClkIDBgCKkBniY5vcDQhGv/k/TqQN7qQWR8KVK+O4D1qzoQt9rDluiDxxeTzZ6QjdBtcExjk6BACiV+ifu7UyrmJXHr9TWfJMg9jbGF1ZGUtb3B1cy00LTY4ABIMwL0A2mmpgE053itcGgz7ywPCLMfmi0w87cQiMFIGri3/ZdIYcUwKmgKN190UDpg9Dq57Nc95bOJIresrRhmJ6fK+U7Oz6+TLyK3pmyprN0TdjTXtcvgSJm/iXMeesvqHc4MT6klf5sefA2Wx5JkWrecQEBV1EOjRDIFQdP1UcfECEV8UNoweCVMhMLeJs4xF0OydosLNQicVxZwqrfgtV7LTt1O51+xMGL1sA00Qb05XTbKdMGQR8MAYAQ=="},{"type":"text","text":"Let me explore the relevant code files to ground the plan."},{"type":"toolCall","id":"toolu_01XRrtsNupuf8upF7a8nH46R","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && find frontend/src -name \"App.tsx\" -o -name \"App.css\" -o -name \"SearchAutocomplete.tsx\" -o -name \"SearchAutocomplete.css\" | head -20"}},{"type":"toolCall","id":"toolu_01HXXAqQePtEY6stfBGqetZE","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && rg -l \"SearchAutocomplete\" frontend/src/ 2>/dev/null"}}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":2,"output":236,"cacheRead":58940,"cacheWrite":8206,"totalTokens":67384,"cost":{"input":0.00001,"output":0.0059,"cacheRead":0.02947,"cacheWrite":0.0512875,"total":0.08666750000000001}},"stopReason":"toolUse","timestamp":1774946319887}}
{"type":"message","id":"20ba4b6c","parentId":"2b266fb2","timestamp":"2026-03-31T08:38:47.128Z","message":{"role":"toolResult","toolCallId":"toolu_01XRrtsNupuf8upF7a8nH46R","toolName":"bash","content":[{"type":"text","text":"frontend/src/App.tsx\nfrontend/src/App.css\nfrontend/src/components/SearchAutocomplete.tsx\n"}],"isError":false,"timestamp":1774946327127}}
{"type":"message","id":"abe14fb9","parentId":"20ba4b6c","timestamp":"2026-03-31T08:38:47.135Z","message":{"role":"toolResult","toolCallId":"toolu_01HXXAqQePtEY6stfBGqetZE","toolName":"bash","content":[{"type":"text","text":"frontend/src/components/SearchAutocomplete.tsx\nfrontend/src/pages/SearchResults.tsx\nfrontend/src/pages/Home.tsx\n"}],"isError":false,"timestamp":1774946327134}}
{"type":"message","id":"e7bb3636","parentId":"abe14fb9","timestamp":"2026-03-31T08:38:50.734Z","message":{"role":"assistant","content":[{"type":"toolCall","id":"toolu_013U7Z5wnP4EpBZ2Cs2jJJsx","name":"read","arguments":{"path":"frontend/src/App.tsx"}},{"type":"toolCall","id":"toolu_01RsxRH7Z3TAiL1ggPJEEXvr","name":"read","arguments":{"path":"frontend/src/components/SearchAutocomplete.tsx"}}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":1,"output":102,"cacheRead":67146,"cacheWrite":325,"totalTokens":67574,"cost":{"input":0.000005,"output":0.00255,"cacheRead":0.033573,"cacheWrite":0.00203125,"total":0.03815925}},"stopReason":"toolUse","timestamp":1774946327134}}
{"type":"message","id":"5ed00efd","parentId":"e7bb3636","timestamp":"2026-03-31T08:38:50.736Z","message":{"role":"toolResult","toolCallId":"toolu_013U7Z5wnP4EpBZ2Cs2jJJsx","toolName":"read","content":[{"type":"text","text":"import { Link, Navigate, Route, Routes } from \"react-router-dom\";\nimport Home from \"./pages/Home\";\nimport SearchResults from \"./pages/SearchResults\";\nimport TechniquePage from \"./pages/TechniquePage\";\nimport CreatorsBrowse from \"./pages/CreatorsBrowse\";\nimport CreatorDetail from \"./pages/CreatorDetail\";\nimport TopicsBrowse from \"./pages/TopicsBrowse\";\nimport SubTopicPage from \"./pages/SubTopicPage\";\nimport AdminReports from \"./pages/AdminReports\";\nimport AdminPipeline from \"./pages/AdminPipeline\";\nimport About from \"./pages/About\";\nimport AdminDropdown from \"./components/AdminDropdown\";\nimport AppFooter from \"./components/AppFooter\";\n\nexport default function App() {\n  return (\n    <div className=\"app\">\n      <header className=\"app-header\">\n        <Link to=\"/\" className=\"app-header__brand\">\n          <h1>Chrysopedia</h1>\n        </Link>\n        <div className=\"app-header__right\">\n          <nav className=\"app-nav\">\n            <Link to=\"/\">Home</Link>\n            <Link to=\"/topics\">Topics</Link>\n            <Link to=\"/creators\">Creators</Link>\n            <AdminDropdown />\n          </nav>\n        </div>\n      </header>\n\n      <main className=\"app-main\">\n        <Routes>\n          {/* Public routes */}\n          <Route path=\"/\" element={<Home />} />\n          <Route path=\"/search\" element={<SearchResults />} />\n          <Route path=\"/techniques/:slug\" element={<TechniquePage />} />\n\n          {/* Browse routes */}\n          <Route path=\"/creators\" element={<CreatorsBrowse />} />\n          <Route path=\"/creators/:slug\" element={<CreatorDetail />} />\n          <Route path=\"/topics/:category/:subtopic\" element={<SubTopicPage />} />\n          <Route path=\"/topics\" element={<TopicsBrowse />} />\n\n          {/* Admin routes */}\n          <Route path=\"/admin/reports\" element={<AdminReports />} />\n          <Route path=\"/admin/pipeline\" element={<AdminPipeline />} />\n\n          {/* Info routes */}\n          <Route path=\"/about\" element={<About />} />\n\n          {/* Fallback */}\n          <Route path=\"*\" element={<Navigate to=\"/\" replace />} />\n        </Routes>\n      </main>\n\n      <AppFooter />\n    </div>\n  );\n}\n"}],"isError":false,"timestamp":1774946330736}}
{"type":"message","id":"62a9799b","parentId":"5ed00efd","timestamp":"2026-03-31T08:38:50.739Z","message":{"role":"toolResult","toolCallId":"toolu_01RsxRH7Z3TAiL1ggPJEEXvr","toolName":"read","content":[{"type":"text","text":"/**\n * Shared search autocomplete component.\n *\n * - On focus with empty input: shows popular suggestions from /api/v1/search/suggestions\n * - On 2+ chars: shows debounced typeahead search results (top 5)\n * - Escape / outside-click closes dropdown\n * - Enter submits via onSearch callback\n */\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n  searchApi,\n  fetchSuggestions,\n  type SearchResultItem,\n  type SuggestionItem,\n} from \"../api/public-client\";\n\ninterface SearchAutocompleteProps {\n  onSearch: (query: string) => void;\n  placeholder?: string;\n  heroSize?: boolean;\n  initialQuery?: string;\n  autoFocus?: boolean;\n}\n\nexport default function SearchAutocomplete({\n  onSearch,\n  placeholder = \"Search techniques…\",\n  heroSize = false,\n  initialQuery = \"\",\n  autoFocus = false,\n}: SearchAutocompleteProps) {\n  const [query, setQuery] = useState(initialQuery);\n  const [searchResults, setSearchResults] = useState<SearchResultItem[]>([]);\n  const [popularSuggestions, setPopularSuggestions] = useState<SuggestionItem[]>([]);\n  const [showDropdown, setShowDropdown] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const suggestionsLoadedRef = useRef(false);\n\n  // Sync initialQuery when URL changes (e.g. SearchResults page)\n  useEffect(() => {\n    setQuery(initialQuery);\n  }, [initialQuery]);\n\n  // Fetch popular suggestions once on mount\n  useEffect(() => {\n    if (suggestionsLoadedRef.current) return;\n    suggestionsLoadedRef.current = true;\n    void (async () => {\n      try {\n        const res = await fetchSuggestions();\n        setPopularSuggestions(res.suggestions);\n      } catch {\n        // Non-critical — autocomplete still works without popular suggestions\n      }\n    })();\n  }, []);\n\n  // Auto-focus\n  useEffect(() => {\n    if (autoFocus) inputRef.current?.focus();\n  }, [autoFocus]);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    function handleClick(e: MouseEvent) {\n      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n        setShowDropdown(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, []);\n\n  // Debounced typeahead search\n  const handleInputChange = useCallback((value: string) => {\n    setQuery(value);\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n\n    if (value.length < 2) {\n      setSearchResults([]);\n      // Show popular suggestions if input is empty and we have them\n      if (value.length === 0 && popularSuggestions.length > 0) {\n        setShowDropdown(true);\n      } else {\n        setShowDropdown(false);\n      }\n      return;\n    }\n\n    debounceRef.current = setTimeout(() => {\n      void (async () => {\n        try {\n          const res = await searchApi(value, undefined, 5);\n          setSearchResults(res.items);\n          setShowDropdown(res.items.length > 0);\n        } catch {\n          setSearchResults([]);\n          setShowDropdown(false);\n        }\n      })();\n    }, 300);\n  }, [popularSuggestions.length]);\n\n  function handleFocus() {\n    if (query.length === 0 && popularSuggestions.length > 0) {\n      setShowDropdown(true);\n    } else if (query.length >= 2 && searchResults.length > 0) {\n      setShowDropdown(true);\n    }\n  }\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (query.trim()) {\n      setShowDropdown(false);\n      onSearch(query.trim());\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === \"Escape\") {\n      setShowDropdown(false);\n    }\n  }\n\n  function handleSuggestionClick(text: string) {\n    setShowDropdown(false);\n    setQuery(text);\n    onSearch(text);\n  }\n\n  const showPopular = query.length < 2 && popularSuggestions.length > 0;\n  const showSearch = query.length >= 2 && searchResults.length > 0;\n\n  const typeLabel: Record<string, string> = {\n    technique: \"Technique\",\n    topic: \"Topic\",\n    creator: \"Creator\",\n    technique_page: \"Technique\",\n    key_moment: \"Key Moment\",\n  };\n\n  return (\n    <div className=\"search-container\" ref={dropdownRef}>\n      <form\n        onSubmit={handleSubmit}\n        className={`search-form ${heroSize ? \"search-form--hero\" : \"search-form--inline\"}`}\n      >\n        <input\n          ref={inputRef}\n          type=\"search\"\n          className={`search-input ${heroSize ? \"search-input--hero\" : \"search-input--inline\"}`}\n          placeholder={placeholder}\n          value={query}\n          onChange={(e) => handleInputChange(e.target.value)}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          aria-label=\"Search techniques\"\n        />\n        <button type=\"submit\" className=\"btn btn--search\">\n          Search\n        </button>\n      </form>\n\n      {showDropdown && (showPopular || showSearch) && (\n        <div className=\"typeahead-dropdown\">\n          {showPopular && (\n            <>\n              <div className=\"typeahead-suggestions-header\">Popular</div>\n              {popularSuggestions.map((item) => (\n                <button\n                  key={`${item.type}-${item.text}`}\n                  className=\"typeahead-suggestion\"\n                  onClick={() => handleSuggestionClick(item.text)}\n                  type=\"button\"\n                >\n                  <span className=\"typeahead-suggestion__text\">{item.text}</span>\n                  <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>\n                    {typeLabel[item.type] ?? item.type}\n                  </span>\n                </button>\n              ))}\n            </>\n          )}\n\n          {showSearch && (\n            <>\n              {searchResults.map((item) => (\n                <Link\n                  key={`${item.type}-${item.slug}`}\n                  to={`/techniques/${item.slug}`}\n                  className=\"typeahead-item\"\n                  onClick={() => setShowDropdown(false)}\n                >\n                  <span className=\"typeahead-item__title\">{item.title}</span>\n                  <span className=\"typeahead-item__meta\">\n                    <span className={`typeahead-item__type typeahead-item__type--${item.type}`}>\n                      {typeLabel[item.type] ?? item.type}\n                    </span>\n                    {item.creator_name && (\n                      <span className=\"typeahead-item__creator\">\n                        {item.creator_name}\n                      </span>\n                    )}\n                  </span>\n                </Link>\n              ))}\n              <Link\n                to={`/search?q=${encodeURIComponent(query)}`}\n                className=\"typeahead-see-all\"\n                onClick={() => setShowDropdown(false)}\n              >\n                See all results for &ldquo;{query}&rdquo;\n              </Link>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"}],"isError":false,"timestamp":1774946330737}}
{"type":"message","id":"e0ce26d5","parentId":"62a9799b","timestamp":"2026-03-31T08:38:54.212Z","message":{"role":"assistant","content":[{"type":"toolCall","id":"toolu_016kgs8eofi4iAKdr47j2FsU","name":"read","arguments":{"path":"frontend/src/App.css"}},{"type":"toolCall","id":"toolu_01CoB4FSYcf5ETvgF9fNCiia","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && rg \"heroSize\" frontend/src/pages/Home.tsx frontend/src/pages/SearchResults.tsx"}}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":1,"output":133,"cacheRead":67471,"cacheWrite":2821,"totalTokens":70426,"cost":{"input":0.000005,"output":0.0033250000000000003,"cacheRead":0.0337355,"cacheWrite":0.01763125,"total":0.05469675}},"stopReason":"toolUse","timestamp":1774946330738}}
{"type":"message","id":"172839c0","parentId":"e0ce26d5","timestamp":"2026-03-31T08:38:54.226Z","message":{"role":"toolResult","toolCallId":"toolu_016kgs8eofi4iAKdr47j2FsU","toolName":"read","content":[{"type":"text","text":"/* ── Theme tokens ──────────────────────────────────────────────────────────── */\n\n:root {\n  /* Backgrounds */\n  --color-bg-page: #0f0f14;\n  --color-bg-surface: #1a1a24;\n  --color-bg-surface-hover: #22222e;\n  --color-bg-input: #1a1a24;\n  --color-bg-header: #0a0a12;\n  --color-bg-header-alt: #14141e;\n  --color-bg-transcript: #12121a;\n\n  /* Text */\n  --color-text-primary: #e2e2ea;\n  --color-text-secondary: #8b8b9a;\n  --color-text-muted: #6b6b7a;\n  --color-text-active: #e2e2ea;\n  --color-text-on-header: rgba(255, 255, 255, 0.8);\n  --color-text-on-header-hover: #fff;\n  --color-text-on-header-label: rgba(255, 255, 255, 0.9);\n\n  /* Borders */\n  --color-border: #2a2a38;\n  --color-border-active: #22d3ee;\n\n  /* Accent (cyan) */\n  --color-accent: #22d3ee;\n  --color-accent-hover: #67e8f9;\n  --color-accent-subtle: rgba(34, 211, 238, 0.1);\n  --color-accent-focus: rgba(34, 211, 238, 0.15);\n\n  /* Shadows / overlays */\n  --color-shadow: rgba(0, 0, 0, 0.2);\n  --color-shadow-heavy: rgba(0, 0, 0, 0.4);\n  --color-overlay: rgba(0, 0, 0, 0.6);\n\n  /* Status badges */\n  --color-badge-pending-bg: #422006;\n  --color-badge-pending-text: #fcd34d;\n  --color-badge-approved-bg: #052e16;\n  --color-badge-approved-text: #6ee7b7;\n  --color-badge-edited-bg: #1e1b4b;\n  --color-badge-edited-text: #93c5fd;\n  --color-badge-rejected-bg: #450a0a;\n  --color-badge-rejected-text: #fca5a5;\n\n  /* Semantic buttons */\n  --color-btn-approve: #059669;\n  --color-btn-approve-hover: #047857;\n  --color-btn-reject: #dc2626;\n  --color-btn-reject-hover: #b91c1c;\n\n  /* Toggle colors */\n  --color-toggle-track: #6b7280;\n  --color-toggle-track-active: #059669;\n  --color-toggle-thumb: #fff;\n\n  /* Error */\n  --color-error: #f87171;\n  --color-error-bg: #450a0a;\n  --color-error-border: #7f1d1d;\n\n  /* Fallback / warning banners */\n  --color-banner-amber-bg: #422006;\n  --color-banner-amber-border: #854d0e;\n  --color-banner-amber-text: #fcd34d;\n\n  /* Pills / special badges */\n  --color-pill-bg: #22222e;\n  --color-pill-text: #e2e2ea;\n  --color-pill-plugin-bg: #3b1f06;\n  --color-pill-plugin-text: #f6ad55;\n  --color-badge-category-bg: #1e1b4b;\n  --color-badge-category-text: #93c5fd;\n  --color-badge-type-technique-bg: #1e1b4b;\n  --color-badge-type-technique-text: #93c5fd;\n  --color-badge-type-moment-bg: #422006;\n  --color-badge-type-moment-text: #fcd34d;\n  --color-badge-content-type-bg: #22222e;\n  --color-badge-content-type-text: #e2e2ea;\n  --color-badge-quality-structured-bg: #052e16;\n  --color-badge-quality-structured-text: #6ee7b7;\n  --color-badge-quality-unstructured-bg: #422006;\n  --color-badge-quality-unstructured-text: #fcd34d;\n\n  /* Per-category badge colors */\n  --color-badge-cat-sound-design-bg: #0d3b3b;\n  --color-badge-cat-sound-design-text: #5eead4;\n  --color-badge-cat-mixing-bg: #0f2942;\n  --color-badge-cat-mixing-text: #7dd3fc;\n  --color-badge-cat-synthesis-bg: #0c2461;\n  --color-badge-cat-synthesis-text: #93c5fd;\n  --color-badge-cat-arrangement-bg: #422006;\n  --color-badge-cat-arrangement-text: #fcd34d;\n  --color-badge-cat-workflow-bg: #052e16;\n  --color-badge-cat-workflow-text: #6ee7b7;\n  --color-badge-cat-mastering-bg: #4a1035;\n  --color-badge-cat-mastering-text: #f9a8d4;\n  --color-badge-cat-music-theory-bg: #3b2506;\n  --color-badge-cat-music-theory-text: #fdba74;\n\n  /* Genre pills */\n  --color-genre-pill-bg: #1a1a24;\n  --color-genre-pill-text: #e2e2ea;\n  --color-genre-pill-border: #2a2a38;\n  --color-genre-pill-hover-bg: #22222e;\n  --color-genre-pill-hover-border: #67e8f9;\n  --color-genre-pill-active-bg: #22d3ee;\n  --color-genre-pill-active-text: #0f0f14;\n  --color-genre-pill-active-border: #22d3ee;\n  --color-genre-pill-active-hover-bg: #67e8f9;\n\n  /* Sort toggle */\n  --color-sort-btn-bg: #1a1a24;\n  --color-sort-btn-text: #8b8b9a;\n  --color-sort-btn-border: #2a2a38;\n  --color-sort-btn-hover-bg: #22222e;\n  --color-sort-btn-hover-text: #e2e2ea;\n  --color-sort-btn-active-bg: #22d3ee;\n  --color-sort-btn-active-text: #0f0f14;\n  --color-sort-btn-active-hover-bg: #67e8f9;\n\n  /* Technique page creator link */\n  --color-link-accent: #22d3ee;\n\n  /* Search btn (dark variant) */\n  --color-btn-search-bg: #22d3ee;\n  --color-btn-search-text: #0f0f14;\n  --color-btn-search-hover-bg: #67e8f9;\n\n  /* Typeahead see-all link */\n  --color-typeahead-see-all: #22d3ee;\n}\n\n/* ── Base ─────────────────────────────────────────────────────────────────── */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml,\nbody {\n  overflow-x: hidden;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  line-height: 1.5;\n  color: var(--color-text-primary);\n  background: var(--color-bg-page);\n}\n\n/* ── App shell ────────────────────────────────────────────────────────────── */\n\n.app {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.app-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1.5rem;\n  background: var(--color-bg-header);\n  color: var(--color-text-on-header-hover);\n}\n\n.app-header h1 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.app-header__right {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n}\n\n.app-header nav a {\n  color: var(--color-text-on-header);\n  text-decoration: none;\n  font-size: 0.875rem;\n}\n\n.app-header nav a:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n.app-main {\n  flex: 1;\n  width: 100%;\n  max-width: 72rem;\n  margin: 1.5rem auto;\n  padding: 0 1.5rem;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  overflow-x: hidden;\n}\n\n/* ── App footer ───────────────────────────────────────────────────────────── */\n\n.app-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 1rem 1.5rem;\n  font-size: 0.6875rem;\n  color: var(--color-text-muted);\n  border-top: 1px solid var(--color-border);\n}\n\n.app-footer__sep {\n  opacity: 0.4;\n}\n\n.app-footer__commit,\n.app-footer__repo {\n  color: var(--color-text-muted);\n  text-decoration: none;\n  transition: color 0.15s;\n}\n\na.app-footer__commit:hover,\na.app-footer__repo:hover {\n  color: var(--color-accent);\n}\n\n/* ── Queue header ─────────────────────────────────────────────────────────── */\n\n.queue-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n.queue-header h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n/* ── Stats bar ────────────────────────────────────────────────────────────── */\n\n.stats-bar {\n  display: flex;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n.stats-card {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.75rem;\n  border-radius: 0.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  box-shadow: 0 1px 3px var(--color-shadow);\n}\n\n.stats-card__count {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.stats-card__label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--color-text-secondary);\n  margin-top: 0.25rem;\n}\n\n.stats-card--pending .stats-card__count { color: var(--color-badge-pending-text); }\n.stats-card--approved .stats-card__count { color: var(--color-badge-approved-text); }\n.stats-card--edited .stats-card__count { color: var(--color-badge-edited-text); }\n.stats-card--rejected .stats-card__count { color: var(--color-badge-rejected-text); }\n\n/* ── Filter tabs ──────────────────────────────────────────────────────────── */\n\n.filter-tabs {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--color-border);\n  margin-bottom: 1rem;\n}\n\n.filter-tab {\n  padding: 0.5rem 1rem;\n  border: none;\n  background: none;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 0.15s, border-color 0.15s;\n}\n\n.filter-tab:hover {\n  color: var(--color-text-primary);\n}\n\n.filter-tab--active {\n  color: var(--color-text-active);\n  border-bottom-color: var(--color-border-active);\n}\n\n/* ── Cards ────────────────────────────────────────────────────────────────── */\n\n.card {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  margin-bottom: 1rem;\n  box-shadow: 0 1px 3px var(--color-shadow);\n}\n\n.card h2 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.card p {\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n}\n\n/* ── Queue cards ──────────────────────────────────────────────────────────── */\n\n.queue-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.queue-card {\n  display: block;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 1rem 1.25rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.queue-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.queue-card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.375rem;\n}\n\n.queue-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.queue-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 0.375rem;\n  line-height: 1.4;\n}\n\n.queue-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n}\n\n.queue-card__separator {\n  color: var(--color-border);\n}\n\n/* ── Status badges ────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: capitalize;\n}\n\n.badge--pending {\n  background: var(--color-badge-pending-bg);\n  color: var(--color-badge-pending-text);\n}\n\n.badge--approved {\n  background: var(--color-badge-approved-bg);\n  color: var(--color-badge-approved-text);\n}\n\n.badge--edited {\n  background: var(--color-badge-edited-bg);\n  color: var(--color-badge-edited-text);\n}\n\n.badge--rejected {\n  background: var(--color-badge-rejected-bg);\n  color: var(--color-badge-rejected-text);\n}\n\n/* ── Buttons ──────────────────────────────────────────────────────────────── */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  transition: background 0.15s, border-color 0.15s, opacity 0.15s;\n}\n\n.btn:hover {\n  background: var(--color-bg-surface-hover);\n  border-color: var(--color-text-muted);\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn--approve {\n  background: var(--color-btn-approve);\n  color: var(--color-text-on-header-hover);\n  border-color: var(--color-btn-approve);\n}\n\n.btn--approve:hover {\n  background: var(--color-btn-approve-hover);\n}\n\n.btn--reject {\n  background: var(--color-btn-reject);\n  color: var(--color-text-on-header-hover);\n  border-color: var(--color-btn-reject);\n}\n\n.btn--reject:hover {\n  background: var(--color-btn-reject-hover);\n}\n\n/* ── Mode toggle ──────────────────────────────────────────────────────────── */\n\n/* ── Debug Mode Toggle ────────────────────────────────────────────────────── */\n\n.debug-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n}\n\n.debug-toggle__label {\n  color: var(--color-text-on-header-label);\n  white-space: nowrap;\n}\n\n.debug-toggle__switch {\n  position: relative;\n  width: 2.5rem;\n  height: 1.25rem;\n  background: var(--color-toggle-track);\n  border: none;\n  border-radius: 9999px;\n  cursor: pointer;\n  transition: background 0.2s;\n  flex-shrink: 0;\n}\n\n.debug-toggle__switch--active {\n  background: #10b981;\n}\n\n.debug-toggle__switch::after {\n  content: \"\";\n  position: absolute;\n  top: 0.125rem;\n  left: 0.125rem;\n  width: 1rem;\n  height: 1rem;\n  background: var(--color-toggle-thumb);\n  border-radius: 50%;\n  transition: transform 0.2s;\n}\n\n.debug-toggle__switch--active::after {\n  transform: translateX(1.25rem);\n}\n\n.debug-toggle__switch:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ── Pagination ───────────────────────────────────────────────────────────── */\n\n.pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  margin-top: 1.25rem;\n  padding: 0.75rem 0;\n}\n\n.pagination__info {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n}\n\n/* ── Detail page ──────────────────────────────────────────────────────────── */\n\n.back-link {\n  display: inline-block;\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n  text-decoration: none;\n  margin-bottom: 0.5rem;\n}\n\n.back-link:hover {\n  color: var(--color-text-primary);\n}\n\n.detail-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n.detail-header h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n.detail-card {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.detail-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n.detail-field label {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--color-text-muted);\n}\n\n.detail-field span,\n.detail-field p {\n  font-size: 0.875rem;\n  color: var(--color-text-primary);\n}\n\n.detail-field--full {\n  grid-column: 1 / -1;\n}\n\n.detail-transcript {\n  background: var(--color-bg-transcript);\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  white-space: pre-wrap;\n  max-height: 20rem;\n  overflow-y: auto;\n}\n\n/* ── Action bar ───────────────────────────────────────────────────────────── */\n\n.action-bar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n.action-error {\n  background: var(--color-error-bg);\n  border: 1px solid var(--color-error-border);\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-badge-rejected-text);\n  font-size: 0.8125rem;\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n/* ── Edit form ────────────────────────────────────────────────────────────── */\n\n.edit-form {\n  margin-top: 1rem;\n}\n\n.edit-form h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n}\n\n.edit-field {\n  margin-bottom: 0.75rem;\n}\n\n.edit-field label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-text-secondary);\n  margin-bottom: 0.25rem;\n}\n\n.edit-field input,\n.edit-field textarea,\n.edit-field select {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  line-height: 1.5;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s;\n}\n\n.edit-field input:focus,\n.edit-field textarea:focus,\n.edit-field select:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 2px var(--color-accent-focus);\n}\n\n.edit-actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* ── Dialogs (modal overlays) ─────────────────────────────────────────────── */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--color-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n\n.dialog {\n  background: var(--color-bg-surface);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  width: 90%;\n  max-width: 28rem;\n  box-shadow: 0 10px 40px var(--color-shadow-heavy);\n}\n\n.dialog h3 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.dialog__hint {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1rem;\n}\n\n.dialog__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* ── Loading / empty states ───────────────────────────────────────────────── */\n\n.loading {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: var(--color-text-secondary);\n  font-size: 0.875rem;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: var(--color-text-muted);\n  font-size: 0.875rem;\n}\n\n.error-text {\n  color: var(--color-error);\n}\n\n/* ── Responsive ───────────────────────────────────────────────────────────── */\n\n@media (max-width: 640px) {\n  .stats-bar {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .stats-card {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n\n  .detail-card {\n    grid-template-columns: 1fr;\n  }\n\n  .queue-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.5rem;\n  }\n\n  .action-bar {\n    flex-direction: column;\n  }\n\n  .action-bar .btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .app-header {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .app-header__right {\n    width: 100%;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   PUBLIC PAGES\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n/* ── Header brand link ────────────────────────────────────────────────────── */\n\n.app-header__brand {\n  text-decoration: none;\n  color: inherit;\n}\n\n.app-nav {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.app-nav a {\n  color: var(--color-text-on-header);\n  text-decoration: none;\n  font-size: 0.875rem;\n  transition: color 0.15s;\n}\n\n.app-nav a:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n/* ── Admin dropdown ───────────────────────────────────────────────────────── */\n\n.admin-dropdown {\n  position: relative;\n}\n\n.admin-dropdown__trigger {\n  font-family: inherit;\n  font-size: 0.875rem;\n  color: var(--color-text-on-header);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 0.15s;\n}\n\n.admin-dropdown__trigger:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n.admin-dropdown__menu {\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  right: 0;\n  min-width: 10rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 16px var(--color-shadow-heavy);\n  z-index: 100;\n  padding: 0.375rem 0;\n}\n\n.admin-dropdown__item {\n  display: block;\n  padding: 0.5rem 1rem;\n  color: var(--color-text-primary);\n  text-decoration: none;\n  font-size: 0.875rem;\n  transition: background 0.12s;\n}\n\n.admin-dropdown__item:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n/* ── Home / Hero ──────────────────────────────────────────────────────────── */\n\n.home-hero {\n  text-align: center;\n  padding: 2rem 1rem 2.5rem;\n}\n\n.home-hero__title {\n  font-size: 2.25rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.375rem;\n}\n\n.home-hero__subtitle {\n  font-size: 1rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1.5rem;\n}\n\n.home-hero__value-prop {\n  max-width: 32rem;\n  margin: 1.5rem auto 0;\n  font-size: 1.0625rem;\n  line-height: 1.6;\n  color: var(--color-text-secondary);\n}\n\n/* ── How It Works ─────────────────────────────────────────────────────────── */\n\n.home-how-it-works {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n  max-width: 42rem;\n  margin: 2rem auto 0;\n}\n\n.home-how-it-works__step {\n  padding: 1.25rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.625rem;\n  text-align: center;\n}\n\n.home-how-it-works__number {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  background: var(--color-accent);\n  color: var(--color-bg-page);\n  font-weight: 700;\n  font-size: 0.875rem;\n  margin-bottom: 0.75rem;\n}\n\n.home-how-it-works__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin-bottom: 0.375rem;\n}\n\n.home-how-it-works__desc {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n}\n\n/* ── CTA Button ───────────────────────────────────────────────────────────── */\n\n.home-cta {\n  display: inline-block;\n  margin-top: 2rem;\n  padding: 0.75rem 2rem;\n  background: var(--color-accent);\n  color: var(--color-bg-page);\n  font-weight: 700;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  text-decoration: none;\n  transition: background 0.15s, transform 0.15s;\n}\n\n.home-cta:hover {\n  background: var(--color-accent-hover);\n  transform: translateY(-1px);\n}\n\n/* ── Popular topics quick-links ───────────────────────────────────────────── */\n\n.home-popular-topics {\n  margin-top: 2.5rem;\n  text-align: center;\n}\n\n.home-popular-topics__title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--color-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.75rem;\n}\n\n.home-popular-topics__list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.5rem;\n  max-width: 36rem;\n  margin: 0 auto;\n}\n\n.pill--topic-quick {\n  display: inline-block;\n  padding: 0.375rem 0.875rem;\n  border-radius: 9999px;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  background: var(--color-pill-bg);\n  color: var(--color-pill-text);\n  border: 1px solid var(--color-border);\n  text-decoration: none;\n  transition: border-color 0.15s, background 0.15s, color 0.15s;\n}\n\n.pill--topic-quick:hover {\n  border-color: var(--color-accent);\n  background: var(--color-accent-subtle);\n  color: var(--color-accent);\n}\n\n/* ── Search form ──────────────────────────────────────────────────────────── */\n\n.search-container {\n  position: relative;\n  max-width: 36rem;\n  margin: 0 auto;\n}\n\n.search-form {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.search-form--hero {\n  justify-content: center;\n}\n\n.search-form--inline {\n  margin-bottom: 1.25rem;\n}\n\n.search-input {\n  flex: 1;\n  padding: 0.625rem 1rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  font-size: 0.9375rem;\n  font-family: inherit;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 3px var(--color-accent-focus);\n}\n\n.search-input--hero {\n  padding: 0.75rem 1.25rem;\n  font-size: 1.0625rem;\n  border-radius: 0.625rem;\n}\n\n.btn--search {\n  background: var(--color-btn-search-bg);\n  color: var(--color-btn-search-text);\n  border-color: var(--color-btn-search-bg);\n  border-radius: 0.5rem;\n  padding: 0.625rem 1.25rem;\n  font-weight: 600;\n}\n\n.btn--search:hover {\n  background: var(--color-btn-search-hover-bg);\n}\n\n/* ── Typeahead dropdown ───────────────────────────────────────────────────── */\n\n.typeahead-dropdown {\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  left: 0;\n  right: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 8px 24px var(--color-shadow-heavy);\n  z-index: 50;\n  overflow: hidden;\n}\n\n.typeahead-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.625rem 1rem;\n  text-decoration: none;\n  color: inherit;\n  transition: background 0.1s;\n}\n\n.typeahead-item:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n.typeahead-item__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.typeahead-item__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--color-text-secondary);\n}\n\n.typeahead-item__type {\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.typeahead-item__type--technique_page {\n  background: var(--color-badge-type-technique-bg);\n  color: var(--color-badge-type-technique-text);\n}\n\n.typeahead-item__type--key_moment {\n  background: var(--color-badge-type-moment-bg);\n  color: var(--color-badge-type-moment-text);\n}\n\n.typeahead-see-all {\n  display: block;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  color: var(--color-typeahead-see-all);\n  text-decoration: none;\n  border-top: 1px solid var(--color-border);\n  transition: background 0.1s;\n}\n\n.typeahead-see-all:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n/* Popular suggestions (shown on empty focus) */\n.typeahead-suggestions-header {\n  padding: 0.5rem 1rem 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted);\n}\n\n.typeahead-suggestion {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  font-size: 0.875rem;\n  color: var(--color-text);\n  transition: background 0.1s;\n}\n\n.typeahead-suggestion:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n.typeahead-suggestion__text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.typeahead-item__type--technique {\n  background: var(--color-badge-technique-bg, rgba(34, 211, 238, 0.15));\n  color: var(--color-badge-technique-text, #22d3ee);\n}\n\n.typeahead-item__type--topic {\n  background: var(--color-badge-topic-bg, rgba(168, 85, 247, 0.15));\n  color: var(--color-badge-topic-text, #a855f7);\n}\n\n.typeahead-item__type--creator {\n  background: var(--color-badge-creator-bg, rgba(251, 146, 60, 0.15));\n  color: var(--color-badge-creator-text, #fb923c);\n}\n\n/* ── Navigation cards ─────────────────────────────────────────────────────── */\n\n.nav-cards {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1rem;\n  max-width: 36rem;\n  margin: 0 auto 2rem;\n}\n\n.nav-card {\n  display: block;\n  padding: 1.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.625rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;\n}\n\n.nav-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 4px 12px var(--color-accent-subtle);\n  transform: translateY(-1px);\n}\n\n.nav-card__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  margin-bottom: 0.25rem;\n}\n\n.nav-card__desc {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n}\n\n/* ── Recently Added section ───────────────────────────────────────────────── */\n\n/* ── Featured technique spotlight ──────────────────────────────────────── */\n\n.home-featured {\n  max-width: 42rem;\n  margin: 0 auto 1.5rem;\n  padding: 1.25rem 1.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-align: left;\n  position: relative;\n  border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;\n  border-image-slice: 1;\n  box-shadow:\n    0 0 20px rgba(34, 211, 238, 0.15),\n    0 0 40px rgba(34, 211, 238, 0.05);\n}\n\n.home-featured__label {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-accent);\n  margin-bottom: 0.5rem;\n}\n\n.home-featured__title {\n  display: block;\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: var(--color-text);\n  text-decoration: none;\n  margin-bottom: 0.5rem;\n  line-height: 1.3;\n}\n\n.home-featured__title:hover {\n  color: var(--color-accent-hover);\n}\n\n.home-featured__summary {\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n  margin-bottom: 0.75rem;\n}\n\n.home-featured__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.5rem;\n}\n\n.home-featured__moments {\n  font-size: 0.75rem;\n  color: var(--color-text-tertiary);\n  white-space: nowrap;\n}\n\n.home-featured__creator {\n  display: block;\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  text-decoration: none;\n}\n\n.home-featured__creator:hover {\n  color: var(--color-accent-hover);\n}\n\n/* ── Recently added ───────────────────────────────────────────────────── */\n\n.recent-section {\n  max-width: 42rem;\n  margin: 0 auto 2rem;\n}\n\n.recent-section__title {\n  font-size: 1.125rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.recent-list {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n}\n\n.recent-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.875rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-decoration: none;\n  color: inherit;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.recent-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.recent-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.recent-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.recent-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n}\n\n.recent-card__moments {\n  font-size: 0.75rem;\n  color: var(--color-text-tertiary);\n  white-space: nowrap;\n}\n\n.pill--tag {\n  font-size: 0.625rem;\n  padding: 0 0.375rem;\n}\n\n/* ── Search results page ──────────────────────────────────────────────────── */\n\n.search-results-page {\n  max-width: 64rem;\n}\n\n.search-group {\n  margin-bottom: 1.5rem;\n}\n\n.search-group__title {\n  font-size: 1rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  color: var(--color-text-primary);\n}\n\n.search-group__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.search-result-card {\n  display: block;\n  padding: 1rem 1.25rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.search-result-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.search-result-card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.25rem;\n}\n\n.search-result-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.search-result-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n  margin-bottom: 0.375rem;\n}\n\n.search-result-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n  flex-wrap: wrap;\n}\n\n.search-result-card__tags {\n  display: inline-flex;\n  gap: 0.25rem;\n  margin-left: 0.25rem;\n}\n\n/* ── Pills / tags ─────────────────────────────────────────────────────────── */\n\n.pill {\n  display: inline-block;\n  padding: 0.0625rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: var(--color-pill-bg);\n  color: var(--color-pill-text);\n}\n\n.pill--plugin {\n  background: var(--color-pill-plugin-bg);\n  color: var(--color-pill-plugin-text);\n}\n\n.pill--overflow {\n  background: var(--color-surface-2);\n  color: var(--color-text-secondary);\n  font-style: italic;\n}\n\n.pill--coming-soon {\n  font-size: 0.65rem;\n  background: var(--color-surface-2);\n  color: var(--color-text-secondary);\n  font-style: italic;\n}\n\n.pill-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.375rem;\n}\n\n.badge--category {\n  background: var(--color-badge-category-bg);\n  color: var(--color-badge-category-text);\n}\n\n.badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }\n.badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }\n.badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }\n.badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }\n.badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }\n.badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }\n.badge--cat-music-theory { background: var(--color-badge-cat-music-theory-bg); color: var(--color-badge-cat-music-theory-text); }\n\n.badge--type {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.badge--type-technique_page {\n  background: var(--color-badge-type-technique-bg);\n  color: var(--color-badge-type-technique-text);\n}\n\n.badge--type-key_moment {\n  background: var(--color-badge-type-moment-bg);\n  color: var(--color-badge-type-moment-text);\n}\n\n.badge--content-type {\n  background: var(--color-badge-content-type-bg);\n  color: var(--color-badge-content-type-text);\n  font-size: 0.6875rem;\n}\n\n.badge--quality {\n  font-size: 0.6875rem;\n  text-transform: capitalize;\n}\n\n.badge--quality-structured {\n  background: var(--color-badge-quality-structured-bg);\n  color: var(--color-badge-quality-structured-text);\n}\n\n.badge--quality-unstructured {\n  background: var(--color-badge-quality-unstructured-bg);\n  color: var(--color-badge-quality-unstructured-text);\n}\n\n/* ── Technique page ───────────────────────────────────────────────────────── */\n\n.technique-page {\n  max-width: 64rem;\n  width: 100%;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n\n.technique-columns {\n  display: grid;\n  grid-template-columns: 1fr 22rem;\n  gap: 2rem;\n  align-items: start;\n}\n\n.technique-columns__main {\n  min-width: 0; /* prevent grid blowout */\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n\n.technique-columns__sidebar {\n  position: sticky;\n  top: 1.5rem;\n}\n\n@media (max-width: 768px) {\n  .technique-columns {\n    grid-template-columns: 1fr;\n  }\n  .technique-columns__sidebar {\n    position: static;\n  }\n}\n\n.technique-404 {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n.technique-404 h2 {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-404 p {\n  color: var(--color-text-secondary);\n  margin-bottom: 1.5rem;\n}\n\n.technique-banner {\n  padding: 0.625rem 1rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  margin-bottom: 1rem;\n}\n\n.technique-banner--amber {\n  background: var(--color-banner-amber-bg);\n  border: 1px solid var(--color-banner-amber-border);\n  color: var(--color-banner-amber-text);\n}\n\n\n\n.technique-header__title-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.5rem;\n}\n\n.technique-header__title-row .badge--category {\n  flex-shrink: 0;\n  margin-top: 0.35rem;\n}\n\n.technique-header__title {\n  font-size: 1.75rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0;\n  line-height: 1.2;\n}\n\n.technique-header__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.technique-header__tags {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  max-width: 100%;\n}\n\n.technique-header__creator-genres {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n.technique-header__creator-block {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.5rem;\n}\n\n.technique-header__creator-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--color-link-accent);\n  text-decoration: none;\n}\n\n.technique-header__creator-link:hover {\n  text-decoration: underline;\n  color: var(--color-accent-hover);\n}\n\n.pill--genre-small {\n  font-size: 0.625rem;\n  padding: 0.0625rem 0.375rem;\n  background: var(--color-pill-bg);\n  color: var(--color-text-secondary);\n}\n\n.technique-header__stats {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-top: 0.5rem;\n}\n\n/* ── Technique prose / sections ───────────────────────────────────────────── */\n\n.technique-main__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n.technique-summary {\n  margin-bottom: 1.5rem;\n}\n\n.technique-summary p {\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  line-height: 1.6;\n}\n\n.technique-prose {\n  margin-bottom: 2rem;\n}\n\n.technique-prose__section {\n  margin-bottom: 1.5rem;\n}\n\n.technique-prose__section h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-prose__section p {\n  font-size: 0.9375rem;\n  color: var(--color-text-primary);\n  line-height: 1.7;\n}\n\n.technique-prose__json {\n  background: var(--color-bg-transcript);\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  overflow-x: auto;\n  line-height: 1.5;\n}\n\n/* ── Key moments list ─────────────────────────────────────────────────────── */\n\n.technique-moments {\n  margin-bottom: 2rem;\n}\n\n.technique-moments h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.technique-moments__list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.technique-moment {\n  padding: 0.875rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n}\n\n.technique-moment__title {\n  display: block;\n  margin: 0 0 0.25rem 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.technique-moment__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n  flex-wrap: wrap;\n}\n\n.technique-moment__time {\n  font-size: 0.75rem;\n  color: var(--color-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.technique-moment__source {\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n  font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n  max-width: 20rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.technique-moment__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n}\n\n/* ── Signal chains ────────────────────────────────────────────────────────── */\n\n.technique-chains {\n  margin-bottom: 2rem;\n}\n\n.technique-chains h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.technique-chain {\n  margin-bottom: 1rem;\n  padding: 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n}\n\n.technique-chain h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.technique-chain__flow {\n  font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n  font-size: 0.875rem;\n  line-height: 1.8;\n  color: var(--color-text-primary);\n  background: var(--color-bg-transcript);\n  padding: 0.75rem 1rem;\n  border-radius: 0.375rem;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.technique-chain__arrow {\n  color: var(--color-accent);\n}\n\n.technique-chain__step {\n  display: inline;\n}\n\n/* ── Plugins ──────────────────────────────────────────────────────────────── */\n\n.technique-plugins {\n  margin-bottom: 2rem;\n}\n\n.technique-plugins h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n/* ── Related techniques ───────────────────────────────────────────────────── */\n\n.technique-related {\n  margin-bottom: 2rem;\n}\n\n.technique-related h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-related__grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.75rem;\n}\n\n@media (min-width: 600px) {\n  .technique-related__grid {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.related-card {\n  background: var(--color-surface-card);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 0.875rem 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.related-card__title {\n  color: var(--color-link-accent);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n.related-card__title:hover {\n  text-decoration: underline;\n}\n\n.related-card__creator {\n  font-size: 0.8125rem;\n  color: var(--color-text-muted);\n}\n\n.related-card__badge {\n  display: inline-block;\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  padding: 0.125rem 0.5rem;\n  border-radius: 999px;\n  background: var(--color-badge-bg, rgba(255, 255, 255, 0.08));\n  color: var(--color-badge-text, var(--color-text-muted));\n}\n\n.related-card__reason {\n  font-size: 0.75rem;\n  font-style: italic;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   CREATORS BROWSE\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n.creators-browse {\n  max-width: 56rem;\n}\n\n.creators-browse__title {\n  font-size: 1.75rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.25rem;\n}\n\n.creators-browse__subtitle {\n  font-size: 0.9375rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1.25rem;\n}\n\n/* ── Controls row ─────────────────────────────────────────────────────────── */\n\n.creators-controls {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-bottom: 1rem;\n  flex-wrap: wrap;\n}\n\n.sort-toggle {\n  display: inline-flex;\n  border: 1px solid var(--color-sort-btn-border);\n  border-radius: 0.375rem;\n  overflow: hidden;\n}\n\n.sort-toggle__btn {\n  padding: 0.375rem 0.75rem;\n  border: none;\n  background: var(--color-sort-btn-bg);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-sort-btn-text);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.sort-toggle__btn + .sort-toggle__btn {\n  border-left: 1px solid var(--color-sort-btn-border);\n}\n\n.sort-toggle__btn:hover {\n  background: var(--color-sort-btn-hover-bg);\n  color: var(--color-sort-btn-hover-text);\n}\n\n.sort-toggle__btn--active {\n  background: var(--color-sort-btn-active-bg);\n  color: var(--color-sort-btn-active-text);\n}\n\n.sort-toggle__btn--active:hover {\n  background: var(--color-sort-btn-active-hover-bg);\n}\n\n.creators-filter-input {\n  flex: 1;\n  min-width: 12rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.creators-filter-input:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 2px var(--color-accent-focus);\n}\n\n/* ── Genre pills ──────────────────────────────────────────────────────────── */\n\n\n[Showing lines 1-2000 of 3907. Use offset=2001 to continue.]"}],"details":{"truncation":{"content":"/* ── Theme tokens ──────────────────────────────────────────────────────────── */\n\n:root {\n  /* Backgrounds */\n  --color-bg-page: #0f0f14;\n  --color-bg-surface: #1a1a24;\n  --color-bg-surface-hover: #22222e;\n  --color-bg-input: #1a1a24;\n  --color-bg-header: #0a0a12;\n  --color-bg-header-alt: #14141e;\n  --color-bg-transcript: #12121a;\n\n  /* Text */\n  --color-text-primary: #e2e2ea;\n  --color-text-secondary: #8b8b9a;\n  --color-text-muted: #6b6b7a;\n  --color-text-active: #e2e2ea;\n  --color-text-on-header: rgba(255, 255, 255, 0.8);\n  --color-text-on-header-hover: #fff;\n  --color-text-on-header-label: rgba(255, 255, 255, 0.9);\n\n  /* Borders */\n  --color-border: #2a2a38;\n  --color-border-active: #22d3ee;\n\n  /* Accent (cyan) */\n  --color-accent: #22d3ee;\n  --color-accent-hover: #67e8f9;\n  --color-accent-subtle: rgba(34, 211, 238, 0.1);\n  --color-accent-focus: rgba(34, 211, 238, 0.15);\n\n  /* Shadows / overlays */\n  --color-shadow: rgba(0, 0, 0, 0.2);\n  --color-shadow-heavy: rgba(0, 0, 0, 0.4);\n  --color-overlay: rgba(0, 0, 0, 0.6);\n\n  /* Status badges */\n  --color-badge-pending-bg: #422006;\n  --color-badge-pending-text: #fcd34d;\n  --color-badge-approved-bg: #052e16;\n  --color-badge-approved-text: #6ee7b7;\n  --color-badge-edited-bg: #1e1b4b;\n  --color-badge-edited-text: #93c5fd;\n  --color-badge-rejected-bg: #450a0a;\n  --color-badge-rejected-text: #fca5a5;\n\n  /* Semantic buttons */\n  --color-btn-approve: #059669;\n  --color-btn-approve-hover: #047857;\n  --color-btn-reject: #dc2626;\n  --color-btn-reject-hover: #b91c1c;\n\n  /* Toggle colors */\n  --color-toggle-track: #6b7280;\n  --color-toggle-track-active: #059669;\n  --color-toggle-thumb: #fff;\n\n  /* Error */\n  --color-error: #f87171;\n  --color-error-bg: #450a0a;\n  --color-error-border: #7f1d1d;\n\n  /* Fallback / warning banners */\n  --color-banner-amber-bg: #422006;\n  --color-banner-amber-border: #854d0e;\n  --color-banner-amber-text: #fcd34d;\n\n  /* Pills / special badges */\n  --color-pill-bg: #22222e;\n  --color-pill-text: #e2e2ea;\n  --color-pill-plugin-bg: #3b1f06;\n  --color-pill-plugin-text: #f6ad55;\n  --color-badge-category-bg: #1e1b4b;\n  --color-badge-category-text: #93c5fd;\n  --color-badge-type-technique-bg: #1e1b4b;\n  --color-badge-type-technique-text: #93c5fd;\n  --color-badge-type-moment-bg: #422006;\n  --color-badge-type-moment-text: #fcd34d;\n  --color-badge-content-type-bg: #22222e;\n  --color-badge-content-type-text: #e2e2ea;\n  --color-badge-quality-structured-bg: #052e16;\n  --color-badge-quality-structured-text: #6ee7b7;\n  --color-badge-quality-unstructured-bg: #422006;\n  --color-badge-quality-unstructured-text: #fcd34d;\n\n  /* Per-category badge colors */\n  --color-badge-cat-sound-design-bg: #0d3b3b;\n  --color-badge-cat-sound-design-text: #5eead4;\n  --color-badge-cat-mixing-bg: #0f2942;\n  --color-badge-cat-mixing-text: #7dd3fc;\n  --color-badge-cat-synthesis-bg: #0c2461;\n  --color-badge-cat-synthesis-text: #93c5fd;\n  --color-badge-cat-arrangement-bg: #422006;\n  --color-badge-cat-arrangement-text: #fcd34d;\n  --color-badge-cat-workflow-bg: #052e16;\n  --color-badge-cat-workflow-text: #6ee7b7;\n  --color-badge-cat-mastering-bg: #4a1035;\n  --color-badge-cat-mastering-text: #f9a8d4;\n  --color-badge-cat-music-theory-bg: #3b2506;\n  --color-badge-cat-music-theory-text: #fdba74;\n\n  /* Genre pills */\n  --color-genre-pill-bg: #1a1a24;\n  --color-genre-pill-text: #e2e2ea;\n  --color-genre-pill-border: #2a2a38;\n  --color-genre-pill-hover-bg: #22222e;\n  --color-genre-pill-hover-border: #67e8f9;\n  --color-genre-pill-active-bg: #22d3ee;\n  --color-genre-pill-active-text: #0f0f14;\n  --color-genre-pill-active-border: #22d3ee;\n  --color-genre-pill-active-hover-bg: #67e8f9;\n\n  /* Sort toggle */\n  --color-sort-btn-bg: #1a1a24;\n  --color-sort-btn-text: #8b8b9a;\n  --color-sort-btn-border: #2a2a38;\n  --color-sort-btn-hover-bg: #22222e;\n  --color-sort-btn-hover-text: #e2e2ea;\n  --color-sort-btn-active-bg: #22d3ee;\n  --color-sort-btn-active-text: #0f0f14;\n  --color-sort-btn-active-hover-bg: #67e8f9;\n\n  /* Technique page creator link */\n  --color-link-accent: #22d3ee;\n\n  /* Search btn (dark variant) */\n  --color-btn-search-bg: #22d3ee;\n  --color-btn-search-text: #0f0f14;\n  --color-btn-search-hover-bg: #67e8f9;\n\n  /* Typeahead see-all link */\n  --color-typeahead-see-all: #22d3ee;\n}\n\n/* ── Base ─────────────────────────────────────────────────────────────────── */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml,\nbody {\n  overflow-x: hidden;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  line-height: 1.5;\n  color: var(--color-text-primary);\n  background: var(--color-bg-page);\n}\n\n/* ── App shell ────────────────────────────────────────────────────────────── */\n\n.app {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.app-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem 1.5rem;\n  background: var(--color-bg-header);\n  color: var(--color-text-on-header-hover);\n}\n\n.app-header h1 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.app-header__right {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n}\n\n.app-header nav a {\n  color: var(--color-text-on-header);\n  text-decoration: none;\n  font-size: 0.875rem;\n}\n\n.app-header nav a:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n.app-main {\n  flex: 1;\n  width: 100%;\n  max-width: 72rem;\n  margin: 1.5rem auto;\n  padding: 0 1.5rem;\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n  overflow-x: hidden;\n}\n\n/* ── App footer ───────────────────────────────────────────────────────────── */\n\n.app-footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 1rem 1.5rem;\n  font-size: 0.6875rem;\n  color: var(--color-text-muted);\n  border-top: 1px solid var(--color-border);\n}\n\n.app-footer__sep {\n  opacity: 0.4;\n}\n\n.app-footer__commit,\n.app-footer__repo {\n  color: var(--color-text-muted);\n  text-decoration: none;\n  transition: color 0.15s;\n}\n\na.app-footer__commit:hover,\na.app-footer__repo:hover {\n  color: var(--color-accent);\n}\n\n/* ── Queue header ─────────────────────────────────────────────────────────── */\n\n.queue-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n\n.queue-header h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n/* ── Stats bar ────────────────────────────────────────────────────────────── */\n\n.stats-bar {\n  display: flex;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n.stats-card {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0.75rem;\n  border-radius: 0.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  box-shadow: 0 1px 3px var(--color-shadow);\n}\n\n.stats-card__count {\n  font-size: 1.5rem;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.stats-card__label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--color-text-secondary);\n  margin-top: 0.25rem;\n}\n\n.stats-card--pending .stats-card__count { color: var(--color-badge-pending-text); }\n.stats-card--approved .stats-card__count { color: var(--color-badge-approved-text); }\n.stats-card--edited .stats-card__count { color: var(--color-badge-edited-text); }\n.stats-card--rejected .stats-card__count { color: var(--color-badge-rejected-text); }\n\n/* ── Filter tabs ──────────────────────────────────────────────────────────── */\n\n.filter-tabs {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--color-border);\n  margin-bottom: 1rem;\n}\n\n.filter-tab {\n  padding: 0.5rem 1rem;\n  border: none;\n  background: none;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  transition: color 0.15s, border-color 0.15s;\n}\n\n.filter-tab:hover {\n  color: var(--color-text-primary);\n}\n\n.filter-tab--active {\n  color: var(--color-text-active);\n  border-bottom-color: var(--color-border-active);\n}\n\n/* ── Cards ────────────────────────────────────────────────────────────────── */\n\n.card {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 1.25rem;\n  margin-bottom: 1rem;\n  box-shadow: 0 1px 3px var(--color-shadow);\n}\n\n.card h2 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.card p {\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n}\n\n/* ── Queue cards ──────────────────────────────────────────────────────────── */\n\n.queue-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.queue-card {\n  display: block;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 1rem 1.25rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.queue-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.queue-card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.375rem;\n}\n\n.queue-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.queue-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 0.375rem;\n  line-height: 1.4;\n}\n\n.queue-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n}\n\n.queue-card__separator {\n  color: var(--color-border);\n}\n\n/* ── Status badges ────────────────────────────────────────────────────────── */\n\n.badge {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: capitalize;\n}\n\n.badge--pending {\n  background: var(--color-badge-pending-bg);\n  color: var(--color-badge-pending-text);\n}\n\n.badge--approved {\n  background: var(--color-badge-approved-bg);\n  color: var(--color-badge-approved-text);\n}\n\n.badge--edited {\n  background: var(--color-badge-edited-bg);\n  color: var(--color-badge-edited-text);\n}\n\n.badge--rejected {\n  background: var(--color-badge-rejected-bg);\n  color: var(--color-badge-rejected-text);\n}\n\n/* ── Buttons ──────────────────────────────────────────────────────────────── */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  transition: background 0.15s, border-color 0.15s, opacity 0.15s;\n}\n\n.btn:hover {\n  background: var(--color-bg-surface-hover);\n  border-color: var(--color-text-muted);\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn--approve {\n  background: var(--color-btn-approve);\n  color: var(--color-text-on-header-hover);\n  border-color: var(--color-btn-approve);\n}\n\n.btn--approve:hover {\n  background: var(--color-btn-approve-hover);\n}\n\n.btn--reject {\n  background: var(--color-btn-reject);\n  color: var(--color-text-on-header-hover);\n  border-color: var(--color-btn-reject);\n}\n\n.btn--reject:hover {\n  background: var(--color-btn-reject-hover);\n}\n\n/* ── Mode toggle ──────────────────────────────────────────────────────────── */\n\n/* ── Debug Mode Toggle ────────────────────────────────────────────────────── */\n\n.debug-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n}\n\n.debug-toggle__label {\n  color: var(--color-text-on-header-label);\n  white-space: nowrap;\n}\n\n.debug-toggle__switch {\n  position: relative;\n  width: 2.5rem;\n  height: 1.25rem;\n  background: var(--color-toggle-track);\n  border: none;\n  border-radius: 9999px;\n  cursor: pointer;\n  transition: background 0.2s;\n  flex-shrink: 0;\n}\n\n.debug-toggle__switch--active {\n  background: #10b981;\n}\n\n.debug-toggle__switch::after {\n  content: \"\";\n  position: absolute;\n  top: 0.125rem;\n  left: 0.125rem;\n  width: 1rem;\n  height: 1rem;\n  background: var(--color-toggle-thumb);\n  border-radius: 50%;\n  transition: transform 0.2s;\n}\n\n.debug-toggle__switch--active::after {\n  transform: translateX(1.25rem);\n}\n\n.debug-toggle__switch:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ── Pagination ───────────────────────────────────────────────────────────── */\n\n.pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  margin-top: 1.25rem;\n  padding: 0.75rem 0;\n}\n\n.pagination__info {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n}\n\n/* ── Detail page ──────────────────────────────────────────────────────────── */\n\n.back-link {\n  display: inline-block;\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n  text-decoration: none;\n  margin-bottom: 0.5rem;\n}\n\n.back-link:hover {\n  color: var(--color-text-primary);\n}\n\n.detail-header {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n.detail-header h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n}\n\n.detail-card {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1rem;\n}\n\n.detail-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n.detail-field label {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--color-text-muted);\n}\n\n.detail-field span,\n.detail-field p {\n  font-size: 0.875rem;\n  color: var(--color-text-primary);\n}\n\n.detail-field--full {\n  grid-column: 1 / -1;\n}\n\n.detail-transcript {\n  background: var(--color-bg-transcript);\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  white-space: pre-wrap;\n  max-height: 20rem;\n  overflow-y: auto;\n}\n\n/* ── Action bar ───────────────────────────────────────────────────────────── */\n\n.action-bar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n.action-error {\n  background: var(--color-error-bg);\n  border: 1px solid var(--color-error-border);\n  border-radius: 0.375rem;\n  padding: 0.5rem 0.75rem;\n  color: var(--color-badge-rejected-text);\n  font-size: 0.8125rem;\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n/* ── Edit form ────────────────────────────────────────────────────────────── */\n\n.edit-form {\n  margin-top: 1rem;\n}\n\n.edit-form h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n}\n\n.edit-field {\n  margin-bottom: 0.75rem;\n}\n\n.edit-field label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-text-secondary);\n  margin-bottom: 0.25rem;\n}\n\n.edit-field input,\n.edit-field textarea,\n.edit-field select {\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  line-height: 1.5;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s;\n}\n\n.edit-field input:focus,\n.edit-field textarea:focus,\n.edit-field select:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 2px var(--color-accent-focus);\n}\n\n.edit-actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* ── Dialogs (modal overlays) ─────────────────────────────────────────────── */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  background: var(--color-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n\n.dialog {\n  background: var(--color-bg-surface);\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  width: 90%;\n  max-width: 28rem;\n  box-shadow: 0 10px 40px var(--color-shadow-heavy);\n}\n\n.dialog h3 {\n  font-size: 1.125rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.dialog__hint {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1rem;\n}\n\n.dialog__actions {\n  display: flex;\n  gap: 0.5rem;\n  margin-top: 1rem;\n}\n\n/* ── Loading / empty states ───────────────────────────────────────────────── */\n\n.loading {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: var(--color-text-secondary);\n  font-size: 0.875rem;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: var(--color-text-muted);\n  font-size: 0.875rem;\n}\n\n.error-text {\n  color: var(--color-error);\n}\n\n/* ── Responsive ───────────────────────────────────────────────────────────── */\n\n@media (max-width: 640px) {\n  .stats-bar {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .stats-card {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n\n  .detail-card {\n    grid-template-columns: 1fr;\n  }\n\n  .queue-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.5rem;\n  }\n\n  .action-bar {\n    flex-direction: column;\n  }\n\n  .action-bar .btn {\n    width: 100%;\n    justify-content: center;\n  }\n\n  .app-header {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  .app-header__right {\n    width: 100%;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   PUBLIC PAGES\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n/* ── Header brand link ────────────────────────────────────────────────────── */\n\n.app-header__brand {\n  text-decoration: none;\n  color: inherit;\n}\n\n.app-nav {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.app-nav a {\n  color: var(--color-text-on-header);\n  text-decoration: none;\n  font-size: 0.875rem;\n  transition: color 0.15s;\n}\n\n.app-nav a:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n/* ── Admin dropdown ───────────────────────────────────────────────────────── */\n\n.admin-dropdown {\n  position: relative;\n}\n\n.admin-dropdown__trigger {\n  font-family: inherit;\n  font-size: 0.875rem;\n  color: var(--color-text-on-header);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 0.15s;\n}\n\n.admin-dropdown__trigger:hover {\n  color: var(--color-text-on-header-hover);\n}\n\n.admin-dropdown__menu {\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  right: 0;\n  min-width: 10rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 16px var(--color-shadow-heavy);\n  z-index: 100;\n  padding: 0.375rem 0;\n}\n\n.admin-dropdown__item {\n  display: block;\n  padding: 0.5rem 1rem;\n  color: var(--color-text-primary);\n  text-decoration: none;\n  font-size: 0.875rem;\n  transition: background 0.12s;\n}\n\n.admin-dropdown__item:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n/* ── Home / Hero ──────────────────────────────────────────────────────────── */\n\n.home-hero {\n  text-align: center;\n  padding: 2rem 1rem 2.5rem;\n}\n\n.home-hero__title {\n  font-size: 2.25rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.375rem;\n}\n\n.home-hero__subtitle {\n  font-size: 1rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1.5rem;\n}\n\n.home-hero__value-prop {\n  max-width: 32rem;\n  margin: 1.5rem auto 0;\n  font-size: 1.0625rem;\n  line-height: 1.6;\n  color: var(--color-text-secondary);\n}\n\n/* ── How It Works ─────────────────────────────────────────────────────────── */\n\n.home-how-it-works {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n  max-width: 42rem;\n  margin: 2rem auto 0;\n}\n\n.home-how-it-works__step {\n  padding: 1.25rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.625rem;\n  text-align: center;\n}\n\n.home-how-it-works__number {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  background: var(--color-accent);\n  color: var(--color-bg-page);\n  font-weight: 700;\n  font-size: 0.875rem;\n  margin-bottom: 0.75rem;\n}\n\n.home-how-it-works__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  margin-bottom: 0.375rem;\n}\n\n.home-how-it-works__desc {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n}\n\n/* ── CTA Button ───────────────────────────────────────────────────────────── */\n\n.home-cta {\n  display: inline-block;\n  margin-top: 2rem;\n  padding: 0.75rem 2rem;\n  background: var(--color-accent);\n  color: var(--color-bg-page);\n  font-weight: 700;\n  font-size: 1rem;\n  border-radius: 0.5rem;\n  text-decoration: none;\n  transition: background 0.15s, transform 0.15s;\n}\n\n.home-cta:hover {\n  background: var(--color-accent-hover);\n  transform: translateY(-1px);\n}\n\n/* ── Popular topics quick-links ───────────────────────────────────────────── */\n\n.home-popular-topics {\n  margin-top: 2.5rem;\n  text-align: center;\n}\n\n.home-popular-topics__title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--color-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.75rem;\n}\n\n.home-popular-topics__list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.5rem;\n  max-width: 36rem;\n  margin: 0 auto;\n}\n\n.pill--topic-quick {\n  display: inline-block;\n  padding: 0.375rem 0.875rem;\n  border-radius: 9999px;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  background: var(--color-pill-bg);\n  color: var(--color-pill-text);\n  border: 1px solid var(--color-border);\n  text-decoration: none;\n  transition: border-color 0.15s, background 0.15s, color 0.15s;\n}\n\n.pill--topic-quick:hover {\n  border-color: var(--color-accent);\n  background: var(--color-accent-subtle);\n  color: var(--color-accent);\n}\n\n/* ── Search form ──────────────────────────────────────────────────────────── */\n\n.search-container {\n  position: relative;\n  max-width: 36rem;\n  margin: 0 auto;\n}\n\n.search-form {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.search-form--hero {\n  justify-content: center;\n}\n\n.search-form--inline {\n  margin-bottom: 1.25rem;\n}\n\n.search-input {\n  flex: 1;\n  padding: 0.625rem 1rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  font-size: 0.9375rem;\n  font-family: inherit;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 3px var(--color-accent-focus);\n}\n\n.search-input--hero {\n  padding: 0.75rem 1.25rem;\n  font-size: 1.0625rem;\n  border-radius: 0.625rem;\n}\n\n.btn--search {\n  background: var(--color-btn-search-bg);\n  color: var(--color-btn-search-text);\n  border-color: var(--color-btn-search-bg);\n  border-radius: 0.5rem;\n  padding: 0.625rem 1.25rem;\n  font-weight: 600;\n}\n\n.btn--search:hover {\n  background: var(--color-btn-search-hover-bg);\n}\n\n/* ── Typeahead dropdown ───────────────────────────────────────────────────── */\n\n.typeahead-dropdown {\n  position: absolute;\n  top: calc(100% + 0.25rem);\n  left: 0;\n  right: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  box-shadow: 0 8px 24px var(--color-shadow-heavy);\n  z-index: 50;\n  overflow: hidden;\n}\n\n.typeahead-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.625rem 1rem;\n  text-decoration: none;\n  color: inherit;\n  transition: background 0.1s;\n}\n\n.typeahead-item:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n.typeahead-item__title {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.typeahead-item__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  color: var(--color-text-secondary);\n}\n\n.typeahead-item__type {\n  padding: 0.0625rem 0.375rem;\n  border-radius: 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.typeahead-item__type--technique_page {\n  background: var(--color-badge-type-technique-bg);\n  color: var(--color-badge-type-technique-text);\n}\n\n.typeahead-item__type--key_moment {\n  background: var(--color-badge-type-moment-bg);\n  color: var(--color-badge-type-moment-text);\n}\n\n.typeahead-see-all {\n  display: block;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  color: var(--color-typeahead-see-all);\n  text-decoration: none;\n  border-top: 1px solid var(--color-border);\n  transition: background 0.1s;\n}\n\n.typeahead-see-all:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n/* Popular suggestions (shown on empty focus) */\n.typeahead-suggestions-header {\n  padding: 0.5rem 1rem 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted);\n}\n\n.typeahead-suggestion {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  font-size: 0.875rem;\n  color: var(--color-text);\n  transition: background 0.1s;\n}\n\n.typeahead-suggestion:hover {\n  background: var(--color-bg-surface-hover);\n}\n\n.typeahead-suggestion__text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.typeahead-item__type--technique {\n  background: var(--color-badge-technique-bg, rgba(34, 211, 238, 0.15));\n  color: var(--color-badge-technique-text, #22d3ee);\n}\n\n.typeahead-item__type--topic {\n  background: var(--color-badge-topic-bg, rgba(168, 85, 247, 0.15));\n  color: var(--color-badge-topic-text, #a855f7);\n}\n\n.typeahead-item__type--creator {\n  background: var(--color-badge-creator-bg, rgba(251, 146, 60, 0.15));\n  color: var(--color-badge-creator-text, #fb923c);\n}\n\n/* ── Navigation cards ─────────────────────────────────────────────────────── */\n\n.nav-cards {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 1rem;\n  max-width: 36rem;\n  margin: 0 auto 2rem;\n}\n\n.nav-card {\n  display: block;\n  padding: 1.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.625rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;\n}\n\n.nav-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 4px 12px var(--color-accent-subtle);\n  transform: translateY(-1px);\n}\n\n.nav-card__title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  margin-bottom: 0.25rem;\n}\n\n.nav-card__desc {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n}\n\n/* ── Recently Added section ───────────────────────────────────────────────── */\n\n/* ── Featured technique spotlight ──────────────────────────────────────── */\n\n.home-featured {\n  max-width: 42rem;\n  margin: 0 auto 1.5rem;\n  padding: 1.25rem 1.5rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-align: left;\n  position: relative;\n  border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;\n  border-image-slice: 1;\n  box-shadow:\n    0 0 20px rgba(34, 211, 238, 0.15),\n    0 0 40px rgba(34, 211, 238, 0.05);\n}\n\n.home-featured__label {\n  font-size: 0.6875rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-accent);\n  margin-bottom: 0.5rem;\n}\n\n.home-featured__title {\n  display: block;\n  font-size: 1.25rem;\n  font-weight: 700;\n  color: var(--color-text);\n  text-decoration: none;\n  margin-bottom: 0.5rem;\n  line-height: 1.3;\n}\n\n.home-featured__title:hover {\n  color: var(--color-accent-hover);\n}\n\n.home-featured__summary {\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n  margin-bottom: 0.75rem;\n}\n\n.home-featured__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.5rem;\n}\n\n.home-featured__moments {\n  font-size: 0.75rem;\n  color: var(--color-text-tertiary);\n  white-space: nowrap;\n}\n\n.home-featured__creator {\n  display: block;\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  text-decoration: none;\n}\n\n.home-featured__creator:hover {\n  color: var(--color-accent-hover);\n}\n\n/* ── Recently added ───────────────────────────────────────────────────── */\n\n.recent-section {\n  max-width: 42rem;\n  margin: 0 auto 2rem;\n}\n\n.recent-section__title {\n  font-size: 1.125rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.recent-list {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 0.5rem;\n}\n\n.recent-card {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.875rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-decoration: none;\n  color: inherit;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.recent-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.recent-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.recent-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.recent-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n}\n\n.recent-card__moments {\n  font-size: 0.75rem;\n  color: var(--color-text-tertiary);\n  white-space: nowrap;\n}\n\n.pill--tag {\n  font-size: 0.625rem;\n  padding: 0 0.375rem;\n}\n\n/* ── Search results page ──────────────────────────────────────────────────── */\n\n.search-results-page {\n  max-width: 64rem;\n}\n\n.search-group {\n  margin-bottom: 1.5rem;\n}\n\n.search-group__title {\n  font-size: 1rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  color: var(--color-text-primary);\n}\n\n.search-group__list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.search-result-card {\n  display: block;\n  padding: 1rem 1.25rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  text-decoration: none;\n  color: inherit;\n  box-shadow: 0 1px 3px var(--color-shadow);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.search-result-card:hover {\n  border-color: var(--color-accent-hover);\n  box-shadow: 0 2px 8px var(--color-accent-subtle);\n}\n\n.search-result-card__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.25rem;\n}\n\n.search-result-card__title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n}\n\n.search-result-card__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.4;\n  margin-bottom: 0.375rem;\n}\n\n.search-result-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n  flex-wrap: wrap;\n}\n\n.search-result-card__tags {\n  display: inline-flex;\n  gap: 0.25rem;\n  margin-left: 0.25rem;\n}\n\n/* ── Pills / tags ─────────────────────────────────────────────────────────── */\n\n.pill {\n  display: inline-block;\n  padding: 0.0625rem 0.5rem;\n  border-radius: 9999px;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  background: var(--color-pill-bg);\n  color: var(--color-pill-text);\n}\n\n.pill--plugin {\n  background: var(--color-pill-plugin-bg);\n  color: var(--color-pill-plugin-text);\n}\n\n.pill--overflow {\n  background: var(--color-surface-2);\n  color: var(--color-text-secondary);\n  font-style: italic;\n}\n\n.pill--coming-soon {\n  font-size: 0.65rem;\n  background: var(--color-surface-2);\n  color: var(--color-text-secondary);\n  font-style: italic;\n}\n\n.pill-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.375rem;\n}\n\n.badge--category {\n  background: var(--color-badge-category-bg);\n  color: var(--color-badge-category-text);\n}\n\n.badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }\n.badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }\n.badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }\n.badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }\n.badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }\n.badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }\n.badge--cat-music-theory { background: var(--color-badge-cat-music-theory-bg); color: var(--color-badge-cat-music-theory-text); }\n\n.badge--type {\n  font-size: 0.6875rem;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.badge--type-technique_page {\n  background: var(--color-badge-type-technique-bg);\n  color: var(--color-badge-type-technique-text);\n}\n\n.badge--type-key_moment {\n  background: var(--color-badge-type-moment-bg);\n  color: var(--color-badge-type-moment-text);\n}\n\n.badge--content-type {\n  background: var(--color-badge-content-type-bg);\n  color: var(--color-badge-content-type-text);\n  font-size: 0.6875rem;\n}\n\n.badge--quality {\n  font-size: 0.6875rem;\n  text-transform: capitalize;\n}\n\n.badge--quality-structured {\n  background: var(--color-badge-quality-structured-bg);\n  color: var(--color-badge-quality-structured-text);\n}\n\n.badge--quality-unstructured {\n  background: var(--color-badge-quality-unstructured-bg);\n  color: var(--color-badge-quality-unstructured-text);\n}\n\n/* ── Technique page ───────────────────────────────────────────────────────── */\n\n.technique-page {\n  max-width: 64rem;\n  width: 100%;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n\n.technique-columns {\n  display: grid;\n  grid-template-columns: 1fr 22rem;\n  gap: 2rem;\n  align-items: start;\n}\n\n.technique-columns__main {\n  min-width: 0; /* prevent grid blowout */\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n}\n\n.technique-columns__sidebar {\n  position: sticky;\n  top: 1.5rem;\n}\n\n@media (max-width: 768px) {\n  .technique-columns {\n    grid-template-columns: 1fr;\n  }\n  .technique-columns__sidebar {\n    position: static;\n  }\n}\n\n.technique-404 {\n  text-align: center;\n  padding: 3rem 1rem;\n}\n\n.technique-404 h2 {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-404 p {\n  color: var(--color-text-secondary);\n  margin-bottom: 1.5rem;\n}\n\n.technique-banner {\n  padding: 0.625rem 1rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  margin-bottom: 1rem;\n}\n\n.technique-banner--amber {\n  background: var(--color-banner-amber-bg);\n  border: 1px solid var(--color-banner-amber-border);\n  color: var(--color-banner-amber-text);\n}\n\n\n\n.technique-header__title-row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-bottom: 0.5rem;\n}\n\n.technique-header__title-row .badge--category {\n  flex-shrink: 0;\n  margin-top: 0.35rem;\n}\n\n.technique-header__title {\n  font-size: 1.75rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0;\n  line-height: 1.2;\n}\n\n.technique-header__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.technique-header__tags {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  max-width: 100%;\n}\n\n.technique-header__creator-genres {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n.technique-header__creator-block {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n  margin-bottom: 0.5rem;\n}\n\n.technique-header__creator-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--color-link-accent);\n  text-decoration: none;\n}\n\n.technique-header__creator-link:hover {\n  text-decoration: underline;\n  color: var(--color-accent-hover);\n}\n\n.pill--genre-small {\n  font-size: 0.625rem;\n  padding: 0.0625rem 0.375rem;\n  background: var(--color-pill-bg);\n  color: var(--color-text-secondary);\n}\n\n.technique-header__stats {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  margin-top: 0.5rem;\n}\n\n/* ── Technique prose / sections ───────────────────────────────────────────── */\n\n.technique-main__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  margin-bottom: 1rem;\n}\n\n.technique-summary {\n  margin-bottom: 1.5rem;\n}\n\n.technique-summary p {\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  line-height: 1.6;\n}\n\n.technique-prose {\n  margin-bottom: 2rem;\n}\n\n.technique-prose__section {\n  margin-bottom: 1.5rem;\n}\n\n.technique-prose__section h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-prose__section p {\n  font-size: 0.9375rem;\n  color: var(--color-text-primary);\n  line-height: 1.7;\n}\n\n.technique-prose__json {\n  background: var(--color-bg-transcript);\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  font-size: 0.8125rem;\n  overflow-x: auto;\n  line-height: 1.5;\n}\n\n/* ── Key moments list ─────────────────────────────────────────────────────── */\n\n.technique-moments {\n  margin-bottom: 2rem;\n}\n\n.technique-moments h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.technique-moments__list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.technique-moment {\n  padding: 0.875rem 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n}\n\n.technique-moment__title {\n  display: block;\n  margin: 0 0 0.25rem 0;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  line-height: 1.3;\n}\n\n.technique-moment__meta {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n  flex-wrap: wrap;\n}\n\n.technique-moment__time {\n  font-size: 0.75rem;\n  color: var(--color-text-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.technique-moment__source {\n  font-size: 0.75rem;\n  color: var(--color-text-muted);\n  font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n  max-width: 20rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.technique-moment__summary {\n  font-size: 0.8125rem;\n  color: var(--color-text-secondary);\n  line-height: 1.5;\n}\n\n/* ── Signal chains ────────────────────────────────────────────────────────── */\n\n.technique-chains {\n  margin-bottom: 2rem;\n}\n\n.technique-chains h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.technique-chain {\n  margin-bottom: 1rem;\n  padding: 1rem;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n}\n\n.technique-chain h3 {\n  font-size: 1rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.technique-chain__flow {\n  font-family: \"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", monospace;\n  font-size: 0.875rem;\n  line-height: 1.8;\n  color: var(--color-text-primary);\n  background: var(--color-bg-transcript);\n  padding: 0.75rem 1rem;\n  border-radius: 0.375rem;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.technique-chain__arrow {\n  color: var(--color-accent);\n}\n\n.technique-chain__step {\n  display: inline;\n}\n\n/* ── Plugins ──────────────────────────────────────────────────────────────── */\n\n.technique-plugins {\n  margin-bottom: 2rem;\n}\n\n.technique-plugins h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n/* ── Related techniques ───────────────────────────────────────────────────── */\n\n.technique-related {\n  margin-bottom: 2rem;\n}\n\n.technique-related h2 {\n  font-size: 1.25rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.technique-related__grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.75rem;\n}\n\n@media (min-width: 600px) {\n  .technique-related__grid {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n.related-card {\n  background: var(--color-surface-card);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  padding: 0.875rem 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.related-card__title {\n  color: var(--color-link-accent);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.9375rem;\n}\n\n.related-card__title:hover {\n  text-decoration: underline;\n}\n\n.related-card__creator {\n  font-size: 0.8125rem;\n  color: var(--color-text-muted);\n}\n\n.related-card__badge {\n  display: inline-block;\n  align-self: flex-start;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  padding: 0.125rem 0.5rem;\n  border-radius: 999px;\n  background: var(--color-badge-bg, rgba(255, 255, 255, 0.08));\n  color: var(--color-badge-text, var(--color-text-muted));\n}\n\n.related-card__reason {\n  font-size: 0.75rem;\n  font-style: italic;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n/* ══════════════════════════════════════════════════════════════════════════════\n   CREATORS BROWSE\n   ══════════════════════════════════════════════════════════════════════════════ */\n\n.creators-browse {\n  max-width: 56rem;\n}\n\n.creators-browse__title {\n  font-size: 1.75rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.25rem;\n}\n\n.creators-browse__subtitle {\n  font-size: 0.9375rem;\n  color: var(--color-text-secondary);\n  margin-bottom: 1.25rem;\n}\n\n/* ── Controls row ─────────────────────────────────────────────────────────── */\n\n.creators-controls {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-bottom: 1rem;\n  flex-wrap: wrap;\n}\n\n.sort-toggle {\n  display: inline-flex;\n  border: 1px solid var(--color-sort-btn-border);\n  border-radius: 0.375rem;\n  overflow: hidden;\n}\n\n.sort-toggle__btn {\n  padding: 0.375rem 0.75rem;\n  border: none;\n  background: var(--color-sort-btn-bg);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-sort-btn-text);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.sort-toggle__btn + .sort-toggle__btn {\n  border-left: 1px solid var(--color-sort-btn-border);\n}\n\n.sort-toggle__btn:hover {\n  background: var(--color-sort-btn-hover-bg);\n  color: var(--color-sort-btn-hover-text);\n}\n\n.sort-toggle__btn--active {\n  background: var(--color-sort-btn-active-bg);\n  color: var(--color-sort-btn-active-text);\n}\n\n.sort-toggle__btn--active:hover {\n  background: var(--color-sort-btn-active-hover-bg);\n}\n\n.creators-filter-input {\n  flex: 1;\n  min-width: 12rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  color: var(--color-text-primary);\n  background: var(--color-bg-input);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n\n.creators-filter-input:focus {\n  outline: none;\n  border-color: var(--color-accent);\n  box-shadow: 0 0 0 2px var(--color-accent-focus);\n}\n\n/* ── Genre pills ──────────────────────────────────────────────────────────── */\n","truncated":true,"truncatedBy":"lines","totalLines":3907,"totalBytes":88627,"outputLines":2000,"outputBytes":48017,"lastLinePartial":false,"firstLineExceedsLimit":false,"maxLines":2000,"maxBytes":51200}},"isError":false,"timestamp":1774946334222}}
{"type":"message","id":"41952420","parentId":"172839c0","timestamp":"2026-03-31T08:38:54.231Z","message":{"role":"toolResult","toolCallId":"toolu_01CoB4FSYcf5ETvgF9fNCiia","toolName":"bash","content":[{"type":"text","text":"frontend/src/pages/Home.tsx:          heroSize\n"}],"isError":false,"timestamp":1774946334229}}
{"type":"message","id":"2c8c3f82","parentId":"41952420","timestamp":"2026-03-31T08:39:00.406Z","message":{"role":"assistant","content":[{"type":"thinking","thinking":"Let me check the Home.tsx and SearchResults.tsx usage of SearchAutocomplete to understand the current prop usage.","thinkingSignature":"Eq0CClkIDBgCKkAZsbLjvGOoaQlOM5Yw0C7/Oh28HQ1cdqRnv8tPQt/fwvY6OYKeaC827jTVBX3e7hWlhRPyrJ+PSD5HUSUhRvEPMg9jbGF1ZGUtb3B1cy00LTY4ABIMhY68/yi5aGNEyK4mGgzYa3rit/C34vNxovoiMKnzuID2jidxJSsqYutpr2W91T8UJgPGq+4nLSAfUpMAPZzq02jhtHvc4o34hhvQdiqBAcdQyXfIkz7OG8PkoRjxYXzOwOhHafanMzzUahI/PhLImdElp+bsfnt0LVmtOzAvGR/hkKt+vPIayyKWUnYu+SigLe8XS/hbcXXrQx9AW5WYYJty4ocUr4vbSoBSezhM6tt2mUPWfH9AgB34FKo5GZhUhQam/edGh5/B3VpKGSiJmBgB"},{"type":"toolCall","id":"toolu_01AXhezWgPmBKg5QHKh4Gth3","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && rg -A5 \"SearchAutocomplete\" frontend/src/pages/Home.tsx frontend/src/pages/SearchResults.tsx"}},{"type":"toolCall","id":"toolu_01XNVW3vXXBgdgw8iynNgce6","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && cat ~/.gsd/agent/extensions/gsd/templates/plan.md"}},{"type":"toolCall","id":"toolu_01YAzksqEKdRbscVH23QesAh","name":"bash","arguments":{"command":"cd /home/aux/projects/content-to-kb-automator && cat ~/.gsd/agent/extensions/gsd/templates/task-plan.md"}}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":1,"output":277,"cacheRead":70292,"cacheWrite":17250,"totalTokens":87820,"cost":{"input":0.000005,"output":0.006925000000000001,"cacheRead":0.035146,"cacheWrite":0.1078125,"total":0.1498885}},"stopReason":"toolUse","timestamp":1774946334230}}
{"type":"message","id":"040fa6b5","parentId":"2c8c3f82","timestamp":"2026-03-31T08:39:00.428Z","message":{"role":"toolResult","toolCallId":"toolu_01AXhezWgPmBKg5QHKh4Gth3","toolName":"bash","content":[{"type":"text","text":"frontend/src/pages/Home.tsx:import SearchAutocomplete from \"../components/SearchAutocomplete\";\nfrontend/src/pages/Home.tsx-import TagList from \"../components/TagList\";\nfrontend/src/pages/Home.tsx-import { useEffect, useState } from \"react\";\nfrontend/src/pages/Home.tsx-import { Link, useNavigate } from \"react-router-dom\";\nfrontend/src/pages/Home.tsx-import {\nfrontend/src/pages/Home.tsx-  fetchTechniques,\n--\nfrontend/src/pages/Home.tsx:        <SearchAutocomplete\nfrontend/src/pages/Home.tsx-          heroSize\nfrontend/src/pages/Home.tsx-          autoFocus\nfrontend/src/pages/Home.tsx-          onSearch={(q) => navigate(`/search?q=${encodeURIComponent(q)}`)}\nfrontend/src/pages/Home.tsx-        />\nfrontend/src/pages/Home.tsx-\n--\nfrontend/src/pages/SearchResults.tsx:import SearchAutocomplete from \"../components/SearchAutocomplete\";\nfrontend/src/pages/SearchResults.tsx-import TagList from \"../components/TagList\";\nfrontend/src/pages/SearchResults.tsx-\nfrontend/src/pages/SearchResults.tsx-export default function SearchResults() {\nfrontend/src/pages/SearchResults.tsx-  const [searchParams] = useSearchParams();\nfrontend/src/pages/SearchResults.tsx-  const navigate = useNavigate();\n--\nfrontend/src/pages/SearchResults.tsx:      <SearchAutocomplete\nfrontend/src/pages/SearchResults.tsx-        initialQuery={q}\nfrontend/src/pages/SearchResults.tsx-        onSearch={(newQ) =>\nfrontend/src/pages/SearchResults.tsx-          navigate(`/search?q=${encodeURIComponent(newQ)}`, { replace: true })\nfrontend/src/pages/SearchResults.tsx-        }\nfrontend/src/pages/SearchResults.tsx-      />\n"}],"isError":false,"timestamp":1774946340428}}
{"type":"message","id":"c823cc4b","parentId":"040fa6b5","timestamp":"2026-03-31T08:39:00.429Z","message":{"role":"toolResult","toolCallId":"toolu_01XNVW3vXXBgdgw8iynNgce6","toolName":"bash","content":[{"type":"text","text":"# {{sliceId}}: {{sliceTitle}}\n\n**Goal:** {{goal}}\n**Demo:** {{demo}}\n\n## Must-Haves\n\n- {{mustHave}}\n- {{mustHave}}\n\n## Threat Surface\n\n<!-- Q3: How can this be exploited? OMIT ENTIRELY for simple slices with no auth, user input, or data exposure. -->\n\n- **Abuse**: {{abuseScenarios — parameter tampering, replay, privilege escalation, or N/A}}\n- **Data exposure**: {{sensitiveDataAccessible — PII, tokens, secrets, or none}}\n- **Input trust**: {{untrustedInput — user input reaching DB/API/filesystem, or none}}\n\n## Requirement Impact\n\n<!-- Q4: What existing promises does this break? OMIT ENTIRELY if no existing requirements are affected. -->\n\n- **Requirements touched**: {{requirementIds — e.g. R001, R003, or none}}\n- **Re-verify**: {{whatMustBeRetested — e.g. login flow, API contract, or N/A}}\n- **Decisions revisited**: {{decisionIds — e.g. D002, or none}}\n\n## Proof Level\n\n<!-- Omit this section entirely for simple slices where the answer is trivially obvious. -->\n\n- This slice proves: {{contract | integration | operational | final-assembly}}\n- Real runtime required: {{yes/no}}\n- Human/UAT required: {{yes/no}}\n\n## Verification\n\n<!-- Define what \"done\" looks like BEFORE detailing tasks.\n     This section is the slice's objective stopping condition — execution isn't done\n     until everything here passes.\n\n     For non-trivial projects:\n     - Write actual test files into the codebase during the first task\n     - Tests should assert on the slice's demo outcome and boundary contracts\n     - Name the test files here so execution has an unambiguous target\n\n     For simple projects or scripts:\n     - Executable verification commands (bash assertions, curl checks, etc.) are sufficient\n\n     If the project has no test framework and the work is non-trivial,\n     the first task should set one up. A test runner costs 2 minutes\n     and pays for itself immediately.\n\n     For non-trivial backend, integration, async, stateful, or UI work:\n     - Include at least one verification check for an observability or failure-path signal\n     - Verify not just that the feature works, but that a future agent can inspect its state when it fails -->\n\n- {{testFileOrCommand — e.g. `npm test -- --grep \"auth flow\"` or `bash scripts/verify-s01.sh`}}\n- {{testFileOrCommand}}\n\n## Observability / Diagnostics\n\n<!-- Include this section for non-trivial backend, integration, async, stateful, or UI slices.\n     OMIT ENTIRELY for simple slices where all fields would be \"none\".\n\n     When included, describe how a future agent will inspect current state, detect failure,\n     and localize the problem with minimal ambiguity. Keep it concise and high-signal. -->\n\n- Runtime signals: {{structured log/event, state transition, metric, or none}}\n- Inspection surfaces: {{status endpoint, CLI command, script, UI state, DB table, or none}}\n- Failure visibility: {{last error, retry count, phase, timestamp, correlation id, or none}}\n- Redaction constraints: {{secret/PII boundary or none}}\n\n## Integration Closure\n\n<!-- Omit this section entirely for simple slices with no meaningful integration concerns. -->\n\n- Upstream surfaces consumed: {{specific files / modules / contracts}}\n- New wiring introduced in this slice: {{entrypoint / composition / runtime hookup, or none}}\n- What remains before the milestone is truly usable end-to-end: {{list or \"nothing\"}}\n\n## Tasks\n\n<!--\n  If every task below is completed exactly as written, the Goal and Demo above\n  should be true at the stated proof level. Tasks should close the loop on the\n  slice, not merely prepare for later work unless the Demo truthfully says the\n  slice only proves fixture/contract-level behavior.\n\n  Write each task as an executable increment, not a vague intention.\n\n  Prefer action-oriented titles:\n  - \"Wire real auth middleware into dashboard routes\"\n  - \"Persist job status and expose failure diagnostics\"\n  - \"Add browser test covering empty-state recovery\"\n\n  Avoid vague titles:\n  - \"Set up auth\"\n  - \"Handle errors\"\n  - \"Improve UI\"\n\n  Each task should usually include:\n  - Why: why this task exists / what part of the slice it closes\n  - Files: the main files likely touched\n  - Do: concrete implementation steps and important constraints\n  - Verify: the command, test, or runtime check that proves it worked\n  - Done when: a measurable acceptance condition\n\n  Keep the checkbox line format exactly:\n  - [ ] **T01: Title** `est:30m`\n-->\n\n- [ ] **T01: {{taskTitle}}** `est:{{estimate}}`\n  - Why: {{whyThisTaskExists}}\n  - Files: `{{filePath}}`, `{{filePath}}`\n  - Do: {{specificImplementationStepsAndConstraints}}\n  - Verify: {{testCommandOrRuntimeCheck}}\n  - Done when: {{measurableAcceptanceCondition}}\n- [ ] **T02: {{taskTitle}}** `est:{{estimate}}`\n  - Why: {{whyThisTaskExists}}\n  - Files: `{{filePath}}`, `{{filePath}}`\n  - Do: {{specificImplementationStepsAndConstraints}}\n  - Verify: {{testCommandOrRuntimeCheck}}\n  - Done when: {{measurableAcceptanceCondition}}\n<!--\n  Format rules (parsers depend on this exact structure):\n  - Checkbox line: - [ ] **T01: Title** `est:30m`\n  - Description:   indented text on the next line(s)\n  - Mark done:     change [ ] to [x]\n  - Tasks execute sequentially in order (T01, T02, T03, ...)\n  - est: is informational (e.g. 30m, 1h, 2h) and optional\n\n  Verify field rules:\n  - MUST be a mechanically executable command: `npm test`, `grep -q \"pattern\" file`, `test -f path`\n  - For content/document tasks: verify file existence, section count, YAML validity, or word count\n    NOT exact phrasing, specific formulas, or \"zero TBD\" aspirational criteria\n  - If no command can verify the output, write: \"Manual review — file exists and is non-empty\"\n  - BAD: \"Sections 3.1 and 3.2 exist with exact formulas. Zero TBD/TODO.\"\n  - GOOD: `grep -c \"^## \" doc.md` returns >= 4 (4+ sections), `! grep -q \"TBD\\|TODO\" doc.md`\n\n  Integration closure rule:\n  - At least one slice in any multi-boundary milestone should perform real composition/wiring, not just contract hardening\n  - For the final assembly slice, verification must exercise the real entrypoint or runtime path\n-->\n\n## Files Likely Touched\n\n- `{{filePath}}`\n- `{{filePath}}`\n"}],"isError":false,"timestamp":1774946340428}}
{"type":"message","id":"285254f4","parentId":"c823cc4b","timestamp":"2026-03-31T08:39:00.433Z","message":{"role":"toolResult","toolCallId":"toolu_01YAzksqEKdRbscVH23QesAh","toolName":"bash","content":[{"type":"text","text":"---\n# Optional scope estimate — helps the plan quality validator detect over-scoped tasks.\n# Tasks with 10+ estimated steps or 12+ estimated files trigger a warning to consider splitting.\nestimated_steps: {{estimatedSteps}}\nestimated_files: {{estimatedFiles}}\n# Installed skills the planner expects the executor to load before coding.\nskills_used:\n  - {{skillName}}\n---\n\n# {{taskId}}: {{taskTitle}}\n\n**Slice:** {{sliceId}} — {{sliceTitle}}\n**Milestone:** {{milestoneId}}\n\n## Description\n\n{{description}}\n\n## Failure Modes\n\n<!-- Q5: What breaks when dependencies fail? OMIT ENTIRELY for tasks with no external dependencies. -->\n\n| Dependency | On error | On timeout | On malformed response |\n|------------|----------|-----------|----------------------|\n| {{dependency}} | {{errorStrategy}} | {{timeoutStrategy}} | {{malformedStrategy}} |\n\n## Load Profile\n\n<!-- Q6: What breaks at 10x load? OMIT ENTIRELY for tasks with no shared resources or scaling concerns. -->\n\n- **Shared resources**: {{sharedResources — DB connections, caches, rate limiters, or none}}\n- **Per-operation cost**: {{perOpCost — N API calls, M DB queries, K bytes, or trivial}}\n- **10x breakpoint**: {{whatBreaksFirst — pool exhaustion, rate limit, memory, or N/A}}\n\n## Negative Tests\n\n<!-- Q7: What negative tests prove robustness? OMIT ENTIRELY for trivial tasks. -->\n\n- **Malformed inputs**: {{malformedInputTests — empty string, null, oversized, wrong type}}\n- **Error paths**: {{errorPathTests — network timeout, auth failure, 5xx, invalid JSON}}\n- **Boundary conditions**: {{boundaryTests — empty list, max length, zero, off-by-one}}\n\n## Steps\n\n1. {{step}}\n2. {{step}}\n3. {{step}}\n\n## Must-Haves\n\n- [ ] {{mustHave}}\n- [ ] {{mustHave}}\n\n## Verification\n\n- {{howToVerifyThisTaskIsActuallyDone}}\n- {{commandToRun_OR_behaviorToCheck}}\n\n## Observability Impact\n\n<!-- OMIT THIS SECTION ENTIRELY for simple tasks that don't touch runtime boundaries,\n     async flows, APIs, background processes, or error paths.\n     Include it only when the task meaningfully changes how failures are detected or diagnosed. -->\n\n- Signals added/changed: {{structured logs, statuses, errors, metrics}}\n- How a future agent inspects this: {{command, endpoint, file, UI state}}\n- Failure state exposed: {{what becomes visible on failure}}\n\n## Inputs\n\n<!-- Every input MUST be a backtick-wrapped file path. These paths are machine-parsed to\n     derive task dependencies — vague descriptions without paths break dependency detection.\n     For the first task in a slice with no prior task outputs, list the existing source files\n     this task reads or modifies. -->\n\n- `{{filePath}}` — {{whatThisTaskNeedsFromPriorWork}}\n\n## Expected Output\n\n<!-- Every output MUST be a backtick-wrapped file path — the specific files this task creates\n     or modifies. These paths are machine-parsed to derive task dependencies.\n     This task should produce a real increment toward making the slice goal/demo true. A full\n     slice plan should not be able to mark every task complete while the claimed slice behavior\n     still does not work at the stated proof level. -->\n\n- `{{filePath}}` — {{whatThisTaskCreatesOrModifies}}\n"}],"isError":false,"timestamp":1774946340431}}
{"type":"message","id":"60e6d60b","parentId":"285254f4","timestamp":"2026-03-31T08:40:03.645Z","message":{"role":"assistant","content":[{"type":"thinking","thinking":"Now I have a clear picture of the codebase. Let me plan this slice.\n\nKey observations:\n1. `SearchAutocomplete` uses `heroSize` boolean prop — needs refactoring to `variant` string\n2. Two callers: Home.tsx (heroSize, autoFocus), SearchResults.tsx (no heroSize)\n3. App.tsx has no `useLocation` — needs it for conditional rendering\n4. No mobile nav exists — the 640px breakpoint just stacks the header\n5. CSS custom properties all exist for theming\n\nThe research doc's decomposition into T01 (nav search + Cmd+K) and T02 (hamburger menu) is clean and natural. Both tasks are ~45min and touch overlapping files (App.tsx, App.css) but in distinct areas.\n\n\nI'll split this into two tasks: refactoring the SearchAutocomplete component to use a variant prop while adding the nav search bar with Cmd+K support, then building the mobile hamburger menu. Both tasks cover requirements R020 and R021, and since this is frontend-only with no backend or auth concerns, I'll skip the threat surface and observability sections.","thinkingSignature":"EpgJClkIDBgCKkCvzi4xo3gH1uXeg0jON0KWXmINnU6aamexTJfe24c5zjIwmh5lJBaSek7QdlzH0l9KncEruYxxtQLRIIuyskp/Mg9jbGF1ZGUtb3B1cy00LTY4ABIMk1kfmr7jqeZcfWf4Ggw6w7wctR6OWA9Bf74iMIBKxE2b3ctRPVlN0ROZT0fzIBq9qSrO3N9gjhUvhOqBo1sMkauUPta7NjhNkwhhMSrsB3/74Bb9f7SZQvnBkdFN6nuuIdCcIZOdv3SBWb1T9VtXdtOFjIqD75Rh2MetNLIa5LjX0EVp0cOZf+yoZb2YVrBXTow8BTBIhwglUk26iJMTbSnr62MttX1qhC9UKUzJH2yPA9zm9UQXCZqnGAPJoqdCuQJh+LIrHI1iMweITOCG/HGJxj9tJFZOg98FKUaGNYFnBly6CY11c+vewbHseLVT8iDxgTmTnkyj8yixx/7IUQzUoGU/V80M0Y/bx4UZG5OeJIO3fJUDrv3jpKrP6whZ26/B+BNVtQ4VQVosH/g75G+RD16rL8+ZKs5TTMH5sHHA6nCsmMuSD/NEPY0ogU3yMVvBLghntT1esg61HcA8iKq3D+i0kwXBlAwV7zXxuoR5ZxHAUfua6mMkAyfOGVe4C5r5uaILCJ42b34M23lpscrrhAKrFQU0oLYunFSnJOlhFOIINV1KUFTDCIwb4nwKEeYs03Ad7OpBoLqJvCjfYm6rZZLJWQMXJKMGqq1gGZwyGEYhaslX47QN0azboAvgTHH75cqwgI/0pMf2wSICRXn5wPLJ0wfyMfvED7YHbzKrtJ3m5L+vuFo0+Ib7tRTUtEXBPryIOabRocPVTLLFlbsh0eocRWRUxz8eRhkx1Nb5maet7ahRkQIEC3j1UcqMgac1f1Vb3dw1M32pBNfK1SzmRciDkb+aJIssXS3Jx6emvaEsp160xj5xj4FBl2chqnbNLd/uVXZWL3J72reFpLb9vpV4rrU/PvZ0qJO/HNFb47XKFrnwSatVyYZBFOa+veu2eeoLdG+OF0j1klcz3CDrdWwJcvffkgHcCai5oy+bkI0PtWXZWmMS7RNilXcKSa6T4F2zS9jzS2DoQ25oDKfyt7psBwa6AC70O/dvyaWpRUg7Iq9sGw2Zt1Fef/fURUQm+534jQVUBQrQqZiHw8FolEq1CWUZtGVUrm8pYq+gA2tIewuYEx4sgN5ChQdV770g8cyuxyB3lmtzy0syLuGu7o22SS3pGEznGBqNasGHy+l4Lw03bPD3r6QF1bcWpLn6myRZhVeRnCqUJYZn5YZp6XljruV/8w38Oym9+OnyQdVOvxMxgkcxu8/IGGKH1VZ+nMFw+I5zPGaYLG4U5af1rXIpk6T6dIJOTSyBA0PJ3oEOE0p8bJ+f7i1zvRbC139VzazVL6joG2NDrrcF0LjdvqKuY1+0Le+o81zjoEZv7DXD2arV3Gn/IxSnfz7UHfsXWd8z6NAWmwuaGy3ptsKy0CrbWtJLLQmDFV+YSc+4iLU+vnHUciEUrdPpSIj8zQg4RDcpkxFJr3Z7ZfO+Gkmkbg2WrVHNwZ8bGAE="},{"type":"text","text":"Good — I've confirmed the codebase state matches the research. `SearchAutocomplete` uses a `heroSize` boolean prop with two callers (Home.tsx, SearchResults.tsx). App.tsx has no `useLocation`, no mobile nav, and the existing 640px breakpoint just stacks the header vertically. The two-task decomposition from research is the right split.\n\nBoth tasks modify `App.tsx` and `App.css`, but T01 focuses on the search component refactor + nav wiring, while T02 adds the hamburger menu. T02 depends on T01 because the mobile menu panel needs to include the nav search bar that T01 creates.\n\nThis is a purely frontend slice — no backend, no auth, no sensitive data. I'll omit Threat Surface, Requirement Impact, Observability, and Load Profile sections since they'd all be \"none.\""},{"type":"toolCall","id":"toolu_016Tb6pgCZ8z2w3WuZEXScdG","name":"gsd_plan_slice","arguments":{"goal":"Compact search bar in nav on all non-home pages with Cmd+K focus. Mobile viewport (<768px) shows hamburger menu with stacked nav links and generous touch targets.","integrationClosure":"- Upstream: `SearchAutocomplete.tsx` (refactored from heroSize boolean to variant string), `App.tsx` app shell, `App.css` global styles\n- New wiring: SearchAutocomplete gains `variant` prop and `globalShortcut` behavior; App.tsx gains useLocation, conditional nav search rendering, hamburger state management\n- What remains: S04 (accessibility fixes) is independent — no integration dependency","milestoneId":"M011","observabilityImpact":"n/a — pure frontend UI slice with no runtime boundaries or async state","proofLevel":"Integration — real browser viewport testing required to verify responsive breakpoints and keyboard shortcuts","sliceId":"S03","successCriteria":"- Search bar visible in nav on /topics, /creators, /techniques/*, /about — hidden on /\n- Cmd+K (Mac) / Ctrl+K (non-Mac) focuses the nav search input from any page\n- Typing in nav search + Enter navigates to /search?q=...\n- Typeahead dropdown works in nav position with correct z-index\n- At viewport <768px: hamburger button visible, nav links hidden\n- Tapping hamburger shows nav panel with stacked links\n- All mobile nav touch targets ≥ 44×44px\n- Route change closes mobile menu\n- Escape key closes mobile menu\n- `npm run build` succeeds with zero errors","tasks":[{"description":"Refactor SearchAutocomplete from heroSize boolean to variant string prop ('hero' | 'inline' | 'nav'), add nav-variant CSS (compact sizing, hidden submit button, high z-index dropdown), add globalShortcut prop for Cmd+K/Ctrl+K focus, wire nav search into App.tsx conditionally on non-home routes, update existing callers in Home.tsx and SearchResults.tsx.\n\nThis task delivers R020 (Global Search in Navigation).\n\n## Steps\n\n1. In `SearchAutocomplete.tsx`: replace `heroSize?: boolean` with `variant?: 'hero' | 'inline' | 'nav'` (default `'inline'`). Update the className logic: `search-form--hero` when variant=hero, `search-form--inline` when variant=inline, `search-form--nav` when variant=nav. Same pattern for `search-input--*`.\n2. When `variant === 'nav'`: hide the submit button (don't render `<button>` — Enter submits the form). Add `search-container--nav` class to the container div for positioning context.\n3. Add `globalShortcut?: boolean` prop. When true, register a `useEffect` with a `keydown` listener for Cmd+K (metaKey) / Ctrl+K (ctrlKey) that calls `e.preventDefault()` and focuses `inputRef.current`. Clean up on unmount.\n4. In `App.css`: add `.search-form--nav` styles (max-width: 16rem, compact padding), `.search-input--nav` (smaller font, reduced padding), `.search-container--nav .typeahead-dropdown` (z-index: 200 to overlay page content). Add a Cmd+K hint badge (`.search-nav__shortcut`) styled as a subtle kbd element inside the input area.\n5. In `App.tsx`: import `useLocation` and `useNavigate` from react-router-dom, import `SearchAutocomplete`. Render `<SearchAutocomplete variant=\"nav\" globalShortcut onSearch={...} placeholder=\"Search… ⌘K\" />` between brand and right section, conditionally when `location.pathname !== '/'`.\n6. Update `Home.tsx` caller: change `heroSize` to `variant=\"hero\"`.\n7. Update `SearchResults.tsx` caller: remove heroSize (already falsy, so `variant=\"inline\"` default works, but be explicit: add `variant=\"inline\"`).\n8. Verify: `cd frontend && npm run build` succeeds. Visually confirm in browser at desktop width.\n\n## Must-Haves\n\n- [ ] SearchAutocomplete accepts variant prop ('hero' | 'inline' | 'nav')\n- [ ] Nav variant: compact input, no submit button, high z-index dropdown\n- [ ] Cmd+K / Ctrl+K focuses nav search input (globalShortcut prop)\n- [ ] Nav search bar appears on all pages except homepage\n- [ ] Existing callers (Home.tsx, SearchResults.tsx) updated and unbroken\n- [ ] Build succeeds with zero errors","estimate":"45m","expectedOutput":["`frontend/src/components/SearchAutocomplete.tsx` — refactored with variant prop and globalShortcut behavior","`frontend/src/App.tsx` — nav search bar rendered conditionally on non-home routes","`frontend/src/App.css` — nav search variant styles added","`frontend/src/pages/Home.tsx` — updated to use variant='hero'","`frontend/src/pages/SearchResults.tsx` — updated to use variant='inline'"],"files":["frontend/src/components/SearchAutocomplete.tsx","frontend/src/App.tsx","frontend/src/App.css","frontend/src/pages/Home.tsx","frontend/src/pages/SearchResults.tsx"],"inputs":["`frontend/src/components/SearchAutocomplete.tsx` — existing search component to refactor","`frontend/src/App.tsx` — app shell to add nav search bar into","`frontend/src/App.css` — global styles for nav search variant","`frontend/src/pages/Home.tsx` — existing caller using heroSize prop","`frontend/src/pages/SearchResults.tsx` — existing caller using default props"],"taskId":"T01","title":"Refactor SearchAutocomplete variant prop and add nav search bar with Cmd+K","verify":"cd frontend && npm run build 2>&1 | tail -5"},{"description":"Add a hamburger menu button visible below 768px that toggles a mobile nav panel. Nav links stack vertically with 44×44px minimum touch targets. Menu closes on route change, Escape, and outside click. The nav search bar (from T01) repositions inside the mobile panel on small screens.\n\nThis task delivers R021 (Mobile Hamburger Menu).\n\n## Steps\n\n1. In `App.tsx`: add `menuOpen` state via `useState(false)`. Add a `<button className=\"hamburger-btn\" onClick={() => setMenuOpen(v => !v)} aria-label=\"Toggle navigation\" aria-expanded={menuOpen}>` inside `app-header__right`, before the nav element. Use a hamburger icon (three-line SVG or unicode ☰).\n2. Add `className` toggle on `app-nav`: when `menuOpen` is true, add `app-nav--open` class.\n3. Add `useEffect` watching `location.pathname` to close menu on navigation: `setMenuOpen(false)` when pathname changes.\n4. Add `useEffect` for Escape key: listen for `keydown` event, close menu when key is 'Escape' and menuOpen is true.\n5. Add outside-click close: `useRef` on the header element, check if click target is outside header when menuOpen, close if so.\n6. In `App.css`: add `.hamburger-btn` styles — hidden above 768px (`display: none`), visible below as a 44×44px button with no border/background, color matching nav text. Add `@media (max-width: 768px)` block: hide `.app-nav` by default, show `.app-nav--open` as a full-width column below the header row (position: absolute or flex column, stacked links). Each nav link gets `min-height: 44px; display: flex; align-items: center; padding: 0.75rem 1.5rem` for touch targets. The `.search-container--nav` inside the mobile panel gets `max-width: 100%` and appropriate positioning.\n7. Add open/close transition: `max-height` transition or `transform: scaleY` for smooth reveal.\n8. Verify: `cd frontend && npm run build` succeeds. Test at mobile viewport in browser.\n\n## Must-Haves\n\n- [ ] Hamburger button visible only below 768px\n- [ ] Tapping hamburger toggles nav panel with stacked links\n- [ ] All mobile nav touch targets ≥ 44×44px\n- [ ] Menu closes on route change\n- [ ] Menu closes on Escape key\n- [ ] Menu closes on outside click\n- [ ] Nav search bar accessible in mobile menu\n- [ ] Build succeeds with zero errors","estimate":"45m","expectedOutput":["`frontend/src/App.tsx` — hamburger button, menuOpen state, auto-close behavior added","`frontend/src/App.css` — mobile nav styles with hamburger, panel, touch targets, transitions"],"files":["frontend/src/App.tsx","frontend/src/App.css"],"inputs":["`frontend/src/App.tsx` — app shell with nav search bar from T01","`frontend/src/App.css` — global styles to extend with mobile nav rules"],"taskId":"T02","title":"Add mobile hamburger menu with touch targets and auto-close behavior","verify":"cd frontend && npm run build 2>&1 | tail -5"}]}}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":1,"output":3027,"cacheRead":87542,"cacheWrite":3348,"totalTokens":93918,"cost":{"input":0.000005,"output":0.075675,"cacheRead":0.043771,"cacheWrite":0.020925000000000003,"total":0.140376}},"stopReason":"toolUse","timestamp":1774946340432}}
{"type":"message","id":"9c32417f","parentId":"60e6d60b","timestamp":"2026-03-31T08:40:03.693Z","message":{"role":"toolResult","toolCallId":"toolu_016Tb6pgCZ8z2w3WuZEXScdG","toolName":"gsd_plan_slice","content":[{"type":"text","text":"Planned slice S03 (M011)"}],"details":{"operation":"plan_slice","milestoneId":"M011","sliceId":"S03","planPath":"/home/aux/projects/content-to-kb-automator/.gsd/milestones/M011/slices/S03/S03-PLAN.md","taskPlanPaths":["/home/aux/projects/content-to-kb-automator/.gsd/milestones/M011/slices/S03/tasks/T01-PLAN.md","/home/aux/projects/content-to-kb-automator/.gsd/milestones/M011/slices/S03/tasks/T02-PLAN.md"]},"isError":false,"timestamp":1774946403691}}
{"type":"message","id":"2cc75c24","parentId":"9c32417f","timestamp":"2026-03-31T08:40:09.191Z","message":{"role":"assistant","content":[{"type":"text","text":"Slice S03 planned.\n\nTwo tasks, ordered by dependency: T01 refactors SearchAutocomplete's prop interface and wires the nav search bar (delivering R020), then T02 builds the mobile hamburger menu on top of that layout (delivering R021). Both are scoped to ~45 minutes with 3–5 files each. Build success is the verification gate for both — browser-level validation happens at slice completion."}],"api":"anthropic-messages","provider":"anthropic","model":"claude-opus-4-6","usage":{"input":1,"output":99,"cacheRead":90890,"cacheWrite":2728,"totalTokens":93718,"cost":{"input":0.000005,"output":0.002475,"cacheRead":0.045445,"cacheWrite":0.01705,"total":0.064975}},"stopReason":"stop","timestamp":1774946403692}}
