---
alwaysApply: false
globs: ["**/*"]
description: "Per-breakpoint layout and per-modality input specified up front. Use when a surface must work across widths, touch, pointer or keyboard."
---

# Responsive And Input Modality

**Scope.** Layout per width and behaviour per input device, specified
before the first layout is written. Target sizes and zoom thresholds
belong to `ui-accessibility`. Spacing and grid tokens belong to
`ui-visual-values`.

**Named breakpoints, declared up front.** Produce a closed set with
numeric bounds: compact below 600px, medium 600 to 904px, expanded 905 to
1239px, large 1240px and above `[ASSUMPTION]`. A reviewer names the set
and finds no media query outside it.

**Break on content, not on device names.** Produce each breakpoint with
the content reason that forced it: a wrapped label, a table losing a
column, a measure over its cap. A reviewer reads the reason and reproduces
the break by resizing.

**Per-breakpoint specification.** Produce, for each named breakpoint, the
column count, the gutter token, the page-margin token, the maximum text
measure, and the fate of every block: kept, moved, stacked, collapsed or
removed. A reviewer checks that every block appears in every breakpoint's
list.

**Removal states its replacement.** Produce, for any element hidden at a
width, where its content is reached instead. A reviewer finds no content
that is available at one width and unreachable at another.

**Text measure.** Produce a maximum line length of 65 characters, capped
at 75 `[ASSUMPTION]`. A reviewer measures the longest rendered line.

**Lower bound.** Produce a layout usable at 320 CSS px wide with no
horizontal scrolling. A reviewer resizes continuously from 320px to the
largest supported width and finds no overlap, no clipped text and no
horizontal scrollbar anywhere in between, not only at the named
breakpoints.

**Modality matrix.** Produce one row per modality: fine pointer with
hover, coarse pointer without hover, keyboard only, screen reader, and
stylus. Each row states how the surface's actions are reached. Handle
mouse, touch and pen through one pointer-event path, and never make a
double-click or a right-click the only way to act. A reviewer checks that
every action appears in every row, and performs each one with a single tap.

**Hover is never the only path.** Produce a persistent or focus-triggered
path to every action that hover reveals. A reviewer emulates
`@media (hover: none)` and reaches every action.

**Coarse-pointer reach.** Produce primary actions within the lower half
of a handheld viewport `[ASSUMPTION]`, and keep destructive actions away
from the thumb-rest edges. A reviewer locates each primary action on a
390x844 viewport.

**Orientation.** Produce both portrait and landscape layouts unless the
surface's function requires one orientation (SC 1.3.4). A reviewer rotates
the device and completes the primary task.

**Device insets.** Produce padding from `env(safe-area-inset-*)` for
edge-anchored bars. A reviewer checks that no control sits under a notch,
a rounded corner or a home indicator.

**Test matrix.** Produce the smallest and largest supported viewport, one
device per modality, and a screenshot at each named breakpoint. A reviewer
compares each screenshot against that breakpoint's specification.