# Accordion with media swap > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The features section for "Passline", an invented rota tool for restaurant kitchens. A 420px accordion of four features sits on the left; the right holds a 500px-tall panel showing the product screen for whichever feature is open: a week planner, a shift-swap inbox, a labour chart and a payroll export. Opening a feature crossfades the screen. The open item carries a 2px teal bar that fills over 7 seconds and then opens the next item, so the section gives itself a guided tour; hovering or focusing anywhere in the section holds it, and a Pause tour button stops it. The thing to copy: the timer is a CSS animation whose `animationend` advances the accordion, so pausing is just `animation-play-state`. ## Reference behaviour 1. Initial state: item 1 "Build the week from last year's covers" is open, its bar filling; the week planner is on the right. Items 2–4 are closed, titles in `--ink-3`. 2. After 7000ms the bar reaches the end; item 1 closes, item 2 opens, the swap inbox crossfades in, and item 2's bar starts from zero. After item 4 it wraps to item 1. 3. Hover anywhere over the section (accordion or screen), or move focus into it: the bar freezes where it is. Leaving resumes from the same point. 4. Click any closed title: it opens (rows grow over 320ms), the previous one closes, the screen swaps, the bar restarts. 5. Clicking the open title keeps it open (one item is always open). 6. Keyboard on a title: Down and Up move to the next or previous title and open it; Home and End jump to the first and last. Enter and Space open the focused title. 7. Pause tour toggles `aria-pressed`, swaps the icon (two bars, triangle), the label (Pause tour, Play tour) and the hint text ("Tour paused. Open any feature."). 8. The plus icon in each title rotates 45° into a close mark when open. 9. Screen contents: week planner (7 days × 4 roles with covers bars and an open Saturday pastry slot outlined in amber, plus an amber alert); swaps (one request card with Approve swap and Decline, a three-message thread, a queue of two more swaps); labour (three KPI tiles and a bar plus line chart with a target band); payroll (five staff rows, a totals row and a CSV file row with Send to payroll). ## Structure ``` 1280 × 800 ┌────────────────────────── wrap 1200 max, padding 48 / 44 ────────────────────────────┐ │ A rota that already Passline plans kitchen and… │ │ knows Friday is busy. (56px, 800) (34ch, 16px) │ │ │ │ ┌── accordion 420 ─────────────┐ gap 48 ┌──── media 1fr × 500, radius 14 ───────┐ │ │ │ Build the week from last… × │ │ Week 44, The Larder, Ancoats [Draft] │ │ │ │ paragraph │ │ ───────────────────────────────────── │ │ │ │ 11 min median time… │ │ Mon Tue Wed Thu Fri Sat Sun │ │ │ │ ████████░░░░░░░ 2px bar │ │ covers bars │ │ │ │ Swaps the team sorts out… + │ │ Grill / Pastry / Floor / Pot wash │ │ │ │ Labour cost against covers + │ │ [ alert: Saturday pastry is open ] │ │ │ │ Hours straight to payroll + │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ (Pause tour) Moves on every 7 seconds… └─────────────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────────────────────────────┘ ``` - `
` with a `.head` (`

` and a `

`) and a `.grid` (`420px 1fr`, gap 48). - `.acc`: four `.item`s. Each is `