# Repository Guidelines

## Project Structure & Module Organization

This repository is a small Coffee Mocktail Builder prototype. `menu.html` selects a base, `flavors.html` selects a flavor, and `receipt.html` displays the result. Options are defined in `data/options.json`; page logic and shared card rendering live in `js/`. `src/input.css` defines Tailwind components, and `dist/styles.css` is generated. Keep locally owned images in `assets/`.

## Build, Test, and Development Commands

Install dependencies once, then build or watch the Tailwind stylesheet:

```powershell
npm install
npm run build
npm run dev
```

`npm run build` produces minified CSS; `npm run dev` rebuilds it as files change. In another terminal, run `python -m http.server 8000`, then visit `http://localhost:8000/menu.html`. Before submitting changes, confirm there are no console or network errors.

## Coding Style & Naming Conventions

Use two-space indentation in HTML, CSS, and JavaScript. Prefer semantic HTML and accessible controls. CSS component classes use lowercase kebab-case (`base-card`); JavaScript variables use camelCase (`selectedBase`, `nextBtn`). Keep brand tokens in the `@theme` block and prefer Tailwind utilities in markup. Use `const` by default and `let` only for reassigned state.

## Testing Guidelines

There is no automated test framework or coverage target yet. Manually verify card selection, selected-state replacement, button enablement, `localStorage` persistence, and responsive layout at narrow and wide viewport sizes. Check keyboard navigation and meaningful image alternative text when changing interactions or content. If logic becomes substantial, add a test runner and place tests under `tests/` with names such as `menu.test.js`.

## Commit & Pull Request Guidelines

Git history is not available in this working copy, so no established commit convention can be inferred. Use short, imperative commit subjects, for example `Add mixer selection page`. Keep each commit focused. Pull requests should explain the user-visible change, list manual verification steps, link relevant issues, and include before/after screenshots for visual updates. Call out new external assets, storage keys, or browser compatibility considerations.

## Security & Asset Considerations

Do not commit secrets or credentials. Treat values read from browser storage as untrusted. Prefer stable, licensed assets; document remote image dependencies and provide local fallbacks when reliability matters.