diff --git a/AGENTS.md b/AGENTS.md
index 1ac695e4..1e426e1b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -111,3 +111,6 @@ finding, and it lets somebody check you.
 | `templates/studio`                             | What a new studio is scaffolded from. Mirrored to its own repository on release.          |
 | `docs/`                                        | The published site. `docs/api.md` is **generated** — edit the JSDoc instead.              |
 | `docs/internal/`                               | Findings, decisions and open threads. Written to survive the conversation they came from. |
+
+Asked where things stand, start with `docs/internal/next.md`, and raise its **Raise
+these first** section before anything else.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a043f871..cd6a7313 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,49 @@ Every published package shares a version — `@single-studio/core`,
 `@single-studio/provider-supabase` and the four plugins go out as one release. The
 tag is checked against all six manifests, so they cannot drift apart.
 
+## Unreleased
+
+### Added
+
+- **A `Panel` header that does more.** `actions` puts anything -- a reset, a swap,
+  a status light -- at the right of the title, or a function given `{ open }` that
+  returns it. They stay in the header, and work, while the panel is folded, and
+  drop under the title in a dock too narrow for both. `collapsible` makes the title
+  a button that folds the panel away; a collapsible panel starts folded on every
+  load, and `defaultOpen` starts one open. The fold belongs to the page, not the
+  show, and is not remembered. A panel with no title keeps its actions and gets a
+  chevron of its own to fold by; one with nothing for a header to hold has none.
+  Panels that ask for neither keep their layout; the title now sits in a
+  `.ss-panel-header` line.
+- **`size="sm"` on `Confirm`, `ResetButton`, `SwapButton` and `Toggle`**, for a
+  button in a panel's header: smaller text and padding, off the Row's input line,
+  and never under the 24px pointer target WCAG 2.5.8 asks for, however its padding
+  is squeezed. It replaces overriding the line height away with
+  `min-h-0! px-2.5! py-1! text-xs!`, which had no floor at all.
+- **`useCollapsed` and `Chevron`**, from `@single-studio/core/control`: what a
+  collapsible panel folds with, for folding anything else on the board the same
+  way -- a team card inside a panel, say.
+
+### Changed
+
+- **A `Stepper` and a `Stopwatch` fill their cell.** A stepper's number field
+  stopped at 4rem and a stopwatch's readout at its minimum, so on a board with
+  breakpoints both sat in the corner of their cell: a stepper left 170px of 330
+  empty in a slim dock, and 121–201px in the demo below 1024px. The field and the
+  readout now grow between their buttons. `col-auto` still keeps one at its own
+  width -- a stepper is 160px, as before.
+- **Panels are striped.** Every other panel on the board is a shade lighter, so a
+  long board reads as blocks rather than one slab. Counted among sibling panels:
+  a panel wrapped in an element of its own (`<div><Panel /></div>`) stays the
+  darker shade. A `bg-*` class on a panel, or a studio's own rule, still wins. The
+  panel's background moved from a class on the element into the stylesheet to make
+  the count possible.
+- **The board declares `color-scheme: dark`.** Chrome draws a time input's clock
+  icon, its picker, the list behind a `<select>` and scrollbars in the page's
+  scheme; on the board they were black on slate, and the clock icon in
+  `CountdownTo` all but disappeared. On `.ss-control` alone, so graphics are
+  untouched.
+
 ## 0.12.0
 
 `Sequence`: a rotation of anything, each item on screen for as long as it says. A
diff --git a/apps/fixture/e2e/smoke.mjs b/apps/fixture/e2e/smoke.mjs
index d665aab7..77ca8db1 100644
--- a/apps/fixture/e2e/smoke.mjs
+++ b/apps/fixture/e2e/smoke.mjs
@@ -2656,6 +2656,194 @@ await becomes(control, () => !document.querySelector('.ss-plugins-dialog[open]')
   await rotation.close()
 }
 
+// -- A panel's header: folding, and actions on its line ------------------------
+// Everything here is local to the page -- a fold, a counter, a plain input -- so the
+// show is left exactly as the checks after it expect.
+const fold = control.locator('.fixture-fold')
+const foldState = () =>
+  control.evaluate(() => {
+    const panel = document.querySelector('.fixture-fold')
+    const body = panel.querySelector('.ss-panel-body')
+
+    return {
+      expanded: panel.querySelector('.ss-panel-fold').getAttribute('aria-expanded'),
+      shown: body.getBoundingClientRect().height > 0,
+      says: panel.querySelector('.fixture-fold-says')?.textContent,
+      presses: panel.querySelector('.fixture-fold-press')?.textContent,
+    }
+  })
+
+let state = await foldState()
+check(state.expanded === 'false' && !state.shown, 'a collapsible panel starts folded, its controls off the board')
+check(state.says === 'folded', 'and actions given as a function are told it is folded')
+
+await fold.locator('.fixture-fold-press').click()
+state = await foldState()
+check(state.presses === 'Pressed 1' && !state.shown, 'an action in the header works while the panel is folded, and pressing it does not open it')
+
+await fold.locator('.ss-panel-fold').click()
+check(
+  await becomes(control, () => document.querySelector('.fixture-fold .fixture-fold-says')?.textContent === 'open'),
+  'pressing the title opens it, and the actions hear about it',
+)
+state = await foldState()
+check(state.expanded === 'true' && state.shown, 'with its controls back on the board')
+
+await fold.locator('.fixture-fold-input').fill('still here')
+await fold.locator('.ss-panel-fold').click()
+await fold.locator('.ss-panel-fold').click()
+check(
+  (await fold.locator('.fixture-fold-input').inputValue()) === 'still here',
+  'folding hides the controls without unmounting them, so what was typed survives',
+)
+
+check(
+  (await control.locator('.ss-panel-fold').count()) === 2,
+  'and only the panels that ask to be collapsible fold -- every other panel on the board is as it was',
+)
+
+// Not remembered: a page that loads now starts folded, though this one is open.
+const reloaded = await context.newPage()
+await reloaded.goto(`${BASE}/#/`)
+await reloaded.waitForSelector('.fixture-fold')
+check(
+  (await reloaded.locator('.fixture-fold .ss-panel-fold').getAttribute('aria-expanded')) === 'false',
+  'a fold is not remembered: another load of the board starts folded while this one is open',
+)
+await reloaded.close()
+
+// Back to folded, as the board loads, for whatever comes after.
+await fold.locator('.fixture-fold-input').fill('')
+await fold.locator('.ss-panel-fold').click()
+
+const headers = await control.evaluate(() => {
+  const untitled = document.querySelector('.fixture-untitled')
+  const bare = document.querySelector('.fixture-bare')
+
+  return {
+    untitledHeading: untitled.querySelector('h2') !== null,
+    untitledAction: untitled.querySelector('.ss-panel-actions .fixture-untitled-action') !== null,
+    untitledFold: untitled.querySelector('.ss-panel-fold')?.getAttribute('aria-label'),
+    untitledOpen: untitled.querySelector('.ss-panel-body').getBoundingClientRect().height > 0,
+    bareHeader: bare.querySelector('.ss-panel-header') !== null,
+  }
+})
+check(!headers.untitledHeading && headers.untitledAction, 'a panel without a title has no heading, and its actions still have their line')
+check(headers.untitledFold === 'Fold panel' && headers.untitledOpen, 'its fold is a chevron with a name of its own, and defaultOpen starts it open')
+check(!headers.bareHeader, 'a panel with nothing for a header to hold has no header at all')
+
+// The title line in both shapes of dock. Wide, the actions sit at the right of the
+// title; slim, they take a line of their own rather than squeezing it, and nothing
+// pokes out of the panel.
+const titleLine = () => {
+  const panel = document.querySelector('.fixture-fold')
+  const box = (el) => el.getBoundingClientRect()
+  const title = box(panel.querySelector('h2'))
+  const tools = box(panel.querySelector('.ss-panel-actions'))
+  const edge = box(panel)
+
+  return {
+    beside: tools.top < title.bottom && tools.left >= title.right,
+    under: tools.top >= title.bottom,
+    inside: tools.right <= edge.right && title.right <= edge.right,
+    titleLines: Math.round(title.height / parseFloat(getComputedStyle(panel.querySelector('h2')).lineHeight)),
+  }
+}
+const wideLine = await rowsAt(1280, titleLine)
+check(wideLine.beside && wideLine.inside, 'on a wide board the actions sit on the title line, at its right')
+const slimLine = await rowsAt(380, titleLine)
+check(
+  slimLine.under && slimLine.inside && slimLine.titleLines === 1,
+  'in a slim dock they drop under the title, which keeps its line, and stay inside the panel',
+)
+
+// -- The board's own look: stripes, a dark scheme, header-sized buttons ---------
+await control.locator('.fixture-small-mount').click()
+await control.waitForSelector('.fixture-small-md')
+const look = await control.evaluate(() => {
+  const board = document.querySelector('.ss-control')
+  const panels = [...board.querySelectorAll('.ss-panel')].filter((panel) => !panel.parentElement.closest('.ss-panel'))
+  const fill = (el) => getComputedStyle(el).backgroundColor
+  const box = (el) => el.getBoundingClientRect()
+  const small = [...document.querySelectorAll('.fixture-small .ss-panel-actions > *')]
+
+  return {
+    fills: panels.slice(0, 4).map(fill),
+    scheme: getComputedStyle(board).colorScheme,
+    smallHeights: small.map((el) => Math.round(box(el).height)),
+    smallText: small.map((el) => getComputedStyle(el).fontSize),
+    regular: Math.round(box(document.querySelector('.fixture-small-md')).height),
+  }
+})
+console.log(`  panel fills: ${look.fills.join(' | ')}`)
+check(
+  look.fills[0] !== look.fills[1] && look.fills[0] === look.fills[2] && look.fills[1] === look.fills[3],
+  'panels are striped, every other one a shade lighter, without the studio asking',
+)
+check(look.scheme === 'dark', 'the board tells the browser it is dark, so native pickers and scrollbars draw dark')
+
+const plain = await context.newPage()
+await plain.goto(`${BASE}/#/source/sequence`)
+await plain.waitForSelector('.ss-source')
+check((await plain.evaluate(() => getComputedStyle(document.documentElement.querySelector('.ss-source')).colorScheme)) === 'normal', 'and a graphic does not')
+await plain.close()
+
+console.log(`  header buttons: ${look.smallHeights.join(', ')}px tall, ${[...new Set(look.smallText)].join(', ')}; on a row ${look.regular}px`)
+check(
+  look.smallHeights.length === 7 && look.smallHeights.every((height) => height >= 24 && height < look.regular),
+  'a header button at size="sm" is smaller than its row-sized self, and never under the 24px a pointer needs, even squeezed',
+)
+check(
+  look.smallText.every((size) => size === '12px'),
+  'with smaller text, on every button that takes the size, whichever way it renders',
+)
+await control.locator('.fixture-small-mount').click()
+
+// A card folded with core's own hook and chevron, as a studio folds one.
+const card = control.locator('.fixture-card')
+const cardState = () =>
+  card.evaluate((el) => ({
+    expanded: el.querySelector('.fixture-card-fold').getAttribute('aria-expanded'),
+    shown: el.querySelector('.fixture-card-body').getBoundingClientRect().height > 0,
+    turned: el.querySelector('.ss-chevron').classList.contains('-rotate-90'),
+  }))
+let folded = await cardState()
+check(folded.expanded === 'false' && !folded.shown && folded.turned, 'useCollapsed starts a card folded, and Chevron turns to say so')
+await card.locator('.fixture-card-fold').click()
+folded = await cardState()
+check(folded.expanded === 'true' && folded.shown && !folded.turned, 'and one press opens it, the chevron pointing down')
+await card.locator('.fixture-card-fold').click()
+
+// -- A stepper fills its cell ---------------------------------------------------
+// A stepper's field used to stop at 4rem, so a stepper was 160px in any cell and the
+// rest of the cell sat empty -- 414px of 574 at 640px wide. Measured across the
+// widths a dock and a board take, for every stepper and stopwatch on a Row.
+const fills = () => {
+  const edge = (el) => el.getBoundingClientRect()
+  const short = (cell, last) => Math.round(edge(cell).right - edge(last).right)
+  const steppers = [...document.querySelectorAll('.ss-row > .ss-stepper:not(.col-auto)')]
+  const watches = [...document.querySelectorAll('.ss-row > .ss-stopwatch')]
+  const auto = document.querySelector('.fixture-auto .ss-stepper')
+
+  return {
+    steppers: steppers.map((cell) => short(cell, [...cell.querySelectorAll('button')].at(-1))),
+    watches: watches.map((cell) => short(cell, [...cell.querySelectorAll('button')].at(-1))),
+    auto: Math.round(edge(auto).width),
+  }
+}
+for (const width of [380, 800, 1280]) {
+  const measured = await rowsAt(width, fills)
+  console.log(
+    `  at ${width}px: steppers short of their cell by ${measured.steppers.join(', ')}px; stopwatch ${measured.watches.join(', ')}px; col-auto stepper ${measured.auto}px`,
+  )
+  check(
+    measured.steppers.length >= 4 && measured.steppers.every((gap) => Math.abs(gap) <= 1),
+    `at ${width}px every stepper on a Row reaches the edge of its cell, with nothing empty beside it`,
+  )
+  check(measured.watches.length >= 1 && measured.watches.every((gap) => Math.abs(gap) <= 1), `and so does a stopwatch, at ${width}px`)
+  check(Math.abs(measured.auto - 160) <= 1, `while a col-auto stepper keeps its own 160px, at ${width}px`)
+}
+
 // -- A graphic that crashes ---------------------------------------------------
 // On air it must paint nothing. A missing lower third reads as a cue that did not
 // fire; a red error box reads as the broadcast being broken. `?debug` -- which an
diff --git a/apps/fixture/src/control/Control.jsx b/apps/fixture/src/control/Control.jsx
index 35cca4e6..0fc54acf 100644
--- a/apps/fixture/src/control/Control.jsx
+++ b/apps/fixture/src/control/Control.jsx
@@ -1,7 +1,11 @@
+import { useId, useState } from 'react'
+
 import { useVelcroMutate } from '@single-studio/core'
 import {
   AssetLibrary,
+  Chevron,
   ColorPicker,
+  Confirm,
   Countdown,
   CountdownTo,
   Cycle,
@@ -17,6 +21,7 @@ import {
   SwapButton,
   TextArea,
   Toggle,
+  useCollapsed,
 } from '@single-studio/core/control'
 
 import { ARMY_SIZE, COMMANDERS, FACTIONS, MAPS, UNITS } from '../roster'
@@ -47,6 +52,118 @@ function Draft({ side, title }) {
   )
 }
 
+/**
+ * The three shapes a Panel's header takes. Kept to plain inputs and local state,
+ * nothing bound to the show, so folding and pressing here leave the show exactly
+ * as the checks around them expect it.
+ */
+/** A card folded the way a Panel folds, with core's own hook and chevron. */
+function Card() {
+  const [collapsed, toggle] = useCollapsed()
+  const body = useId()
+
+  return (
+    <div className="fixture-card rounded-md border border-slate-800 p-2">
+      <button type="button" onClick={toggle} aria-expanded={!collapsed} aria-controls={body} className="fixture-card-fold flex items-center gap-2 text-sm">
+        <Chevron collapsed={collapsed} />
+        Card
+      </button>
+      <p id={body} hidden={collapsed} className="fixture-card-body mt-2 text-sm text-slate-400">
+        Folded by useCollapsed.
+      </p>
+    </div>
+  )
+}
+
+function Folding() {
+  const [presses, setPresses] = useState(0)
+  const [small, setSmall] = useState(false)
+  const press = 'rounded-md border border-slate-700 bg-slate-900 px-2.5 py-1 text-xs text-slate-200'
+
+  return (
+    <>
+      {/* Folded on load, with actions that read the fold and one that counts its
+          presses, folded or not. The title is long enough that a slim dock has to
+          put the actions on a line of their own; the e2e suite measures that. */}
+      <Panel
+        title="Folding, with actions on its line"
+        collapsible
+        className="fixture-fold"
+        actions={({ open }) => (
+          <>
+            <span className="fixture-fold-says text-xs text-slate-500">{open ? 'open' : 'folded'}</span>
+            <button type="button" onClick={() => setPresses((n) => n + 1)} className={`fixture-fold-press ${press}`}>
+              Pressed {presses}
+            </button>
+          </>
+        )}
+      >
+        <input aria-label="Kept while folded" className="fixture-fold-input rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-sm" />
+      </Panel>
+
+      {/* No title: actions keep their line, and the fold is a chevron of its own. */}
+      <Panel
+        collapsible
+        defaultOpen
+        className="fixture-untitled"
+        actions={
+          <button type="button" className={`fixture-untitled-action ${press}`}>
+            Untitled action
+          </button>
+        }
+      >
+        <p className="text-sm text-slate-400">No title; starts open.</p>
+        <Card />
+        {/* A stepper at its own width beside a field taking the rest: `col-auto` still
+            means 160px now that a stepper grows into any other cell. Measured, never
+            pressed or typed into. */}
+        <Row className="fixture-auto">
+          <Stepper name="fixture.auto" label="At its own width" className="col-auto" />
+          <Field name="fixture.beside" label="The rest" />
+        </Row>
+      </Panel>
+
+      {/* Every header button at size="sm", both ways a reset and a swap render, beside
+          the same reset at its own size on a Row. Mounted only when the e2e suite asks,
+          because checks long before it find the board's one swap and one reset by
+          class. Bound to paths nothing else reads, and only measured, never pressed. */}
+      <Panel
+        title="Header buttons"
+        className="fixture-small"
+        actions={
+          small ? (
+            <>
+              <Confirm size="sm" label="Confirm" onConfirm={() => {}} />
+              <ResetButton size="sm" label="nothing" names={['fixture.nothing']} />
+              <ResetButton size="sm" label="at once" names={['fixture.nothing']} confirm={false} />
+              <SwapButton size="sm" label="nothing" names={['fixture.left', 'fixture.right']} />
+              <SwapButton size="sm" label="at once" names={['fixture.left', 'fixture.right']} confirm={false} />
+              <Toggle size="sm" name="fixture-small" label="small" />
+              {/* Squeezed the way a studio might, to fit one more in: the size keeps a
+                  floor under it however its padding is cut. */}
+              <Toggle size="sm" name="fixture-small" label="squeezed" style={{ paddingBlock: 0 }} />
+            </>
+          ) : null
+        }
+      >
+        <button type="button" onClick={() => setSmall((was) => !was)} className={`fixture-small-mount ${press}`}>
+          {small ? 'Unmount' : 'Mount'} header buttons
+        </button>
+        {small ? (
+          <Row>
+            <ResetButton label="nothing" names={['fixture.nothing']} className="fixture-small-md" />
+          </Row>
+        ) : null}
+      </Panel>
+
+      {/* Nothing for a header to hold, so no header. */}
+      <Panel className="fixture-bare">
+        <p className="text-sm text-slate-400">No title, no actions.</p>
+      </Panel>
+    </>
+  )
+}
+
 export default function Control() {
   const mutate = useVelcroMutate()
 
@@ -172,6 +289,8 @@ export default function Control() {
         <Toggle name="intro" label="intro" />
       </Panel>
 
+      <Folding />
+
       <Panel title="Images">
         {/* The manager, inline. The same component opens as a modal from any picker. */}
         <AssetLibrary />
diff --git a/demo/src/control/Control.jsx b/demo/src/control/Control.jsx
index a2f03b19..128b198c 100644
--- a/demo/src/control/Control.jsx
+++ b/demo/src/control/Control.jsx
@@ -11,6 +11,9 @@ import Twitch from './panels/Twitch'
  * scoreboard is touched every round, the lower thirds a few times an hour, the
  * static card at the start and the breaks, the clock once, and Twitch looks after
  * itself. Panels live in ./panels, one per file.
+ *
+ * Every panel folds, and all but the scoreboard start folded: the board opens on the
+ * one panel a round needs and a list of headers for the rest.
  */
 export default function Control() {
   return (
diff --git a/demo/src/control/panels/Clock.jsx b/demo/src/control/panels/Clock.jsx
index 57b93a0f..0b6803ac 100644
--- a/demo/src/control/panels/Clock.jsx
+++ b/demo/src/control/panels/Clock.jsx
@@ -9,7 +9,7 @@ import { Cycle, Panel, Row, Toggle } from '@single-studio/core/control'
  */
 export default function Clock() {
   return (
-    <Panel title="Clock">
+    <Panel title="Clock" collapsible>
       {/* The switch at its own width beside the format, from 640px. */}
       <Row className="sm:row-cols-2">
         <Toggle name="clock" label="clock" className="sm:col-auto" />
diff --git a/demo/src/control/panels/LowerThirds.jsx b/demo/src/control/panels/LowerThirds.jsx
index 345bca52..3b6b17de 100644
--- a/demo/src/control/panels/LowerThirds.jsx
+++ b/demo/src/control/panels/LowerThirds.jsx
@@ -29,7 +29,7 @@ function Third({ which, label, name, tag }) {
  */
 export default function LowerThirds() {
   return (
-    <Panel title="Lower thirds">
+    <Panel title="Lower thirds" collapsible>
       <Third which="one" label="Host" name="Alex Morgan" tag="@morgs" />
       {/* Below 1024px each strap is two or three lines, and the two run together
           without a line between them. */}
diff --git a/demo/src/control/panels/Scoreboard.jsx b/demo/src/control/panels/Scoreboard.jsx
index 08a8e2a9..b81dee7e 100644
--- a/demo/src/control/panels/Scoreboard.jsx
+++ b/demo/src/control/panels/Scoreboard.jsx
@@ -36,7 +36,21 @@ export default function Scoreboard() {
   const mutate = useVelcroMutate()
 
   return (
-    <Panel title="Scoreboard">
+    // Open on load, where every other panel starts folded: it is the one touched every
+    // round. The swap is in the header, so it can be pressed with the panel folded.
+    <Panel
+      title="Scoreboard"
+      collapsible
+      defaultOpen
+      actions={
+        // One button, every path a side owns: half a swap is a scoreboard that lies.
+        <SwapButton
+          size="sm"
+          label="Swap sides"
+          names={['home.name', 'home.logo', 'home.score', 'home.color', 'away.name', 'away.logo', 'away.score', 'away.color']}
+        />
+      }
+    >
       <Team side="home" label="Home" fallback="#0284c7" presets={['#0284c7', '#16a34a', '#ca8a04', '#7c3aed']} />
       {/* Below 1024px a side is four or two lines of controls, and two sides of
           identical controls run together without a line between them. From there
@@ -45,17 +59,8 @@ export default function Scoreboard() {
       <Team side="away" label="Away" fallback="#e11d48" presets={['#e11d48', '#ea580c', '#0891b2', '#4b5563']} />
       <hr className="border-slate-800 lg:hidden" />
 
-      {/* The round takes the line and the swap only the room its words need, from 640px. */}
-      <Row className="sm:row-cols-2">
-        {/* A field, not a stepper: empty, its placeholder says what the scoreboard shows. */}
-        <Field name="round" label="Round" placeholder="1" />
-        {/* One button, every path a side owns: half a swap is a scoreboard that lies. */}
-        <SwapButton
-          className="sm:col-auto"
-          label="Swap sides"
-          names={['home.name', 'home.logo', 'home.score', 'home.color', 'away.name', 'away.logo', 'away.score', 'away.color']}
-        />
-      </Row>
+      {/* A field, not a stepper: empty, its placeholder says what the scoreboard shows. */}
+      <Field name="round" label="Round" placeholder="1" />
 
       <Row className="sm:row-cols-3">
         <button type="button" onClick={() => mutate('demo:round', { team: 'home' })} className={button}>
diff --git a/demo/src/control/panels/Static.jsx b/demo/src/control/panels/Static.jsx
index d5e2f1ad..3e5b9a5a 100644
--- a/demo/src/control/panels/Static.jsx
+++ b/demo/src/control/panels/Static.jsx
@@ -28,7 +28,7 @@ function Clock({ name, label, children }) {
  */
 export default function Static() {
   return (
-    <Panel title="Static">
+    <Panel title="Static" collapsible>
       {/* The ticker is the long one: a third and two thirds once there is room. */}
       <Row>
         <Field name="static.message" label="Message" placeholder="Back shortly" className="lg:col-span-4" />
diff --git a/demo/src/control/panels/Twitch.jsx b/demo/src/control/panels/Twitch.jsx
index c4d9b074..6e6f0827 100644
--- a/demo/src/control/panels/Twitch.jsx
+++ b/demo/src/control/panels/Twitch.jsx
@@ -53,7 +53,7 @@ export default function TwitchPanel() {
   ]
 
   return (
-    <Panel title="Twitch">
+    <Panel title="Twitch" collapsible>
       <p className="text-xs text-slate-400">Try the overlay without a channel. Your own: Settings → Plugins → Twitch → Sign in with Twitch.</p>
       {/* Eight buttons: two to a line in a dock, four from 640px, all eight from 1280px. */}
       <Row className="row-cols-2 sm:row-cols-4 xl:row-cols-8">
diff --git a/docs/api.md b/docs/api.md
index 472a6106..a19feaf0 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -64,6 +64,8 @@ piece of it you can also put on the board yourself.
 - [`Leaderboard`](#control-leaderboard)
 - [`Panel`](#control-panel)
 - [`Row`](#control-row)
+- [`useCollapsed`](#control-usecollapsed)
+- [`Chevron`](#control-chevron)
 - [`Break`](#control-break)
 - [`Confirm`](#control-confirm)
 - [`Hotkeys`](#control-hotkeys)
@@ -128,7 +130,7 @@ Several lines of text an operator types, bound to a path. Staged until saved.
 
 `import { Stepper } from '@single-studio/core/control'`
 
-A number with minus and plus buttons, and a field to type into. The buttons add and subtract, so two operators pressing +1 at once come to +2 rather than +1. Writes immediately.
+A number with minus and plus buttons, and a field to type into. The buttons add and subtract, so two operators pressing +1 at once come to +2 rather than +1. Writes immediately. The field fills whatever width its cell has; `col-auto` keeps the stepper at its own 160px.
 
 ```jsx
 <Stepper name="home.score" label="Home score" />
@@ -366,6 +368,7 @@ An on/off button for a path under `toggles`, which is what a graphic watches to
 | `group` | `string` |  | A group's name. Buttons sharing one behave as radio buttons. |
 | `label` | `string` |  | Names what is toggled: the button reads "Show `<label>`". |
 | `name` | `string` | Yes | Names a value under `toggles` — e.g. `lowerthird`. |
+| `size` | `'md' \| 'sm'` |  | `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`. |
 
 <a id="control-swapbutton"></a>
 
@@ -402,6 +405,7 @@ Trade two sides of the board — teams changing ends. Asks first.
 | `label` | `string` |  | Names what gets traded, on the button. Defaults to `"Swap"`. |
 | `names` | `string[]` |  | One side, then the other, spelled the same way. Cut in half and traded. |
 | `paths` | `string[]` |  | Full paths, for trading values outside `variables`. |
+| `size` | `'md' \| 'sm'` |  | `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`. |
 
 <a id="control-resetbutton"></a>
 
@@ -430,6 +434,7 @@ Clear a set of values back to each source's own fallback. It unsets rather than
 | `label` | `string` |  | Names what gets cleared: the button reads "Reset `<label>`". Defaults to `"Reset"`. |
 | `names` | `string[]` |  | Cleared back to each source's own fallback. |
 | `paths` | `string[]` |  | Full paths, for clearing `toggles` or `timers` in the same press. |
+| `size` | `'md' \| 'sm'` |  | `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`. |
 
 <a id="control-countdown"></a>
 
@@ -492,7 +497,7 @@ Counts down to a time of day rather than a length — "we go live at 19:30". Rol
 
 `import { Stopwatch } from '@single-studio/core/control'`
 
-Counts up from when it was started, with pause and reset. Stores an origin rather than a running total, so every machine derives the same number. Writes immediately.
+Counts up from when it was started, with pause and reset. Stores an origin rather than a running total, so every machine derives the same number. Writes immediately. The readout fills whatever width its cell has, with the buttons at the end.
 
 ```jsx
 <Stopwatch name="match" label="Show elapsed" />
@@ -552,10 +557,28 @@ A titled group of controls, one row per child, top to bottom.
 </Panel>
 ```
 
+```jsx
+// Folded until the operator opens it, with its reset reachable either way
+<Panel title="Slate" collapsible actions={<ResetButton label="slate" names={['slate.title', 'slate.subtitle']} size="sm" />}>
+  <Field name="slate.title" label="Title" />
+  <Field name="slate.subtitle" label="Subtitle" />
+</Panel>
+```
+
+```jsx
+// Actions that change with the fold: the swap only while the names are in view
+<Panel title="Teams" collapsible actions={({ open }) => open && <SwapButton label="sides" names={['home.name', 'away.name']} size="sm" />}>
+  …
+</Panel>
+```
+
 | Prop | Type | Required | Description |
 | --- | --- | --- | --- |
+| `actions` | `ReactNode \| ((state: { open: boolean }) => ReactNode)` |  | Anything at all, right-aligned on the title line: a reset, a swap, a status light. Or a function that returns it, given whether the panel is open. |
 | `children` | `ReactNode` |  | Controls, one row each. Put several in a `Row` to share a line. |
 | `className` | `string` |  | Added to the component's own classes. |
+| `collapsible` | `boolean` |  | The title folds the panel away and opens it again. Defaults to `false`. |
+| `defaultOpen` | `boolean` |  | A collapsible panel starts folded on every load; `true` starts this one open. Defaults to `false`. |
 | `title` | `string` |  | Heading for the group. |
 
 <a id="control-row"></a>
@@ -592,6 +615,51 @@ A line of controls inside a `Panel`: stacked one above the other in a slim OBS d
 | `children` | `ReactNode` |  | Controls. Each takes the whole row in a narrow dock and an equal share of it once there is room; size them with `row-cols-*` on the Row or `col-*` on a control. |
 | `className` | `string` |  | Added to the component's own classes. `row-cols-*` goes here. |
 
+<a id="control-usecollapsed"></a>
+
+### useCollapsed
+
+---
+
+`import { useCollapsed } from '@single-studio/core/control'`
+
+Whether something on the board is folded away, and a function that flips it: `const [collapsed, toggle] = useCollapsed()`. Folded to begin with; `useCollapsed(false)` starts it open. What a collapsible `Panel` folds with, for folding anything else the same way -- a team card inside a panel, a row of advanced settings.
+
+```jsx
+function TeamCard({ team }) {
+  const [collapsed, toggle] = useCollapsed()
+  const body = useId()
+
+  return (
+    <div>
+      <button type="button" onClick={toggle} aria-expanded={!collapsed} aria-controls={body}>
+        <Chevron collapsed={collapsed} /> {team}
+      </button>
+      <div id={body} hidden={collapsed}>…</div>
+    </div>
+  )
+}
+```
+
+<a id="control-chevron"></a>
+
+### Chevron
+
+---
+
+`import { Chevron } from '@single-studio/core/control'`
+
+The fold's chevron: pointing down when open, turned a quarter when folded, as a `Panel`'s is. Decoration -- the button it sits in says what it does, with `aria-expanded` saying which way it is.
+
+```jsx
+<Chevron collapsed={collapsed} />
+```
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `className` | `string` |  | Added to the component's own classes. |
+| `collapsed` | `boolean` |  | Folded: turned a quarter to point at what it belongs to. |
+
 <a id="control-break"></a>
 
 ### Break
@@ -664,6 +732,7 @@ A destructive button that asks first, without a dialog: one click arms it, a sec
 | `disabled` | `boolean` |  | Nothing happens on click. |
 | `label` | `string` |  | What the button says when idle. |
 | `onConfirm` | `() => void` | Yes | Called on the second click. |
+| `size` | `'md' \| 'sm'` |  | `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`. |
 | `tone` | `'danger' \| 'warn' \| 'go' \| 'primary' \| 'quiet'` |  | What the button means. Defaults to `"danger"`. |
 
 <a id="control-hotkeys"></a>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 51940ec3..cdcb55ec 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -279,10 +279,29 @@ instead, over `--ss-fade`; anything beyond that is a rule of your own on
 | `Stopwatch`    | `timers.<name>`    | Counts up. Start, pause, reset.                                                  |
 | `Leaderboard`  | `variables.<name>` | One delimited string; paste view and table view. Staged.                         |
 | `SaveButton`   | —                  | Commits every staged edit. Hosts the save and discard shortcuts.                 |
-| `Panel`        | —                  | Titled group. One row per child.                                                 |
+| `Panel`        | —                  | Titled group, one row per child. `actions` on the title line; `collapsible`.     |
 | `Row`          | —                  | Side by side when there is room, stacked in a dock. Widths in twelfths.          |
 | `Break`        | —                  | Deprecated: draws nothing. Use `Row`.                                            |
 
+A `Panel`'s `actions` go at the right of its title, and work while it is folded:
+anything at all, or a function given `{ open }` that returns it. `collapsible`
+makes the title fold the panel away. A collapsible panel starts folded on every
+load, so a fresh board is a short list of headers; `defaultOpen` starts one open.
+The fold is that page's alone, never the show's, so folding a panel on your board
+folds nobody else's. A button in the header takes `size="sm"` — `Confirm`,
+`ResetButton`, `SwapButton` and `Toggle` all have it — and `useCollapsed` and
+`Chevron` fold anything else, such as a card inside a panel, the same way.
+
+Every other panel is a shade lighter, so a long board reads as blocks. The stripes
+count sibling panels, so render panels directly or in a fragment rather than each
+inside a `<div>` of its own.
+
+```jsx
+<Panel title="Slate" collapsible actions={<ResetButton label="slate" names={['slate.title']} size="sm" />}>
+  <Field name="slate.title" label="Title" />
+</Panel>
+```
+
 ## Working with other people
 
 A studio is one operator by default and needs nothing. To bring in others, press
@@ -830,6 +849,11 @@ With a breakpoint a class holds from there up; without one, at every width, so
 `row-cols-2` keeps buttons in pairs even in a slim dock. A line that does not fill
 has no hole at the end: the last control on it takes the room.
 
+Every control fills the cell it is given, a `Stepper` and a `Stopwatch` included:
+the number field and the readout grow between their buttons. To keep one at its own
+width and give the rest of the line to its neighbours, that is what `col-auto` is
+for — a stepper is 160px.
+
 Side by side, controls line up along their inputs. Every control is a label, then one
 input line of the same height, then anything extra — colour presets, a warning —
 below, where it cannot push its neighbours out of line. A switch or button beside a
diff --git a/docs/internal/next.md b/docs/internal/next.md
index a523cf9b..9e3b4fac 100644
--- a/docs/internal/next.md
+++ b/docs/internal/next.md
@@ -2,6 +2,106 @@
 
 Left here rather than in a chat, so it survives.
 
+## Raise these first
+
+Asked for at the top of any "where are we at": the owner wants reminding of these
+before anything else.
+
+- **The Panel work and `color-scheme: dark` -- built, not released.** `actions`,
+  `collapsible`, `defaultOpen`, `size="sm"` on the header buttons, `useCollapsed`
+  and `Chevron`, striped panels and a dark scheme on the board are in core, under
+  Unreleased in the changelog, as are steppers and stopwatches that fill their
+  cell and a demo whose panels fold. Next: release them, then move
+  SS-Mercy-Riftbound-2v2 off its own `Panel.jsx`, `collapse.jsx`, `FillStepper.jsx`,
+  `HEADER_BUTTON` and the two rules in its `index.css`. See [the section below](#panel-header-actions-and-folding).
+- **`Sequence` in a real OBS.** 0.12.0 shipped it tested only in Chromium. The check
+  that matters: a browser source with _Refresh browser when scene becomes active_
+  ticked starts the sequence again from its first item every time the scene is
+  taken.
+
+## Panel: header actions, and folding
+
+From the SS-Mercy-Riftbound-2v2 studio, which built all of it locally
+(`src/control/collapse.jsx` and its own `Panel.jsx`) because core's `Panel` has
+nothing beside its title. What it does, and what it learned, so core can take it
+over rather than rediscover it.
+
+**Behaviour.**
+
+- The title is a button -- chevron and title -- that folds the panel body away.
+- **Everything starts folded, on every load**, panels and the cards inside them
+  alike. A fresh board is a short list of headers, and the operator opens what the
+  next segment needs.
+- The fold is component state and nothing else. Not the show, which would fold the
+  panel on every operator's board; and not `localStorage`, so that a reload is
+  always the same board.
+- Header `actions` (Reset, Swap, Seed…) stay in the header and keep working while
+  folded.
+- A folded team card keeps a one-line summary -- "A1 · Comet Crew · 2–0 · 6 pts" --
+  so a folded group still reads at a glance. Folding hides the controls, not the
+  state of the show.
+
+**How the studio built it.**
+
+- `useCollapsed(initial = true)` returns `[collapsed, toggle]`: a plain `useState`,
+  no keys and no storage. `false` starts one open.
+- `<Chevron collapsed>` points down when open and turns −90° when folded.
+- Markup is `<h2><button aria-expanded aria-controls={bodyId}>…</button></h2>`, with
+  `id={bodyId}` from `useId` on the body. The button goes inside the heading: a
+  heading inside a button is invalid HTML.
+- The wrapper copies core's markup -- `.ss-panel`, `.ss-panel-body`, same classes
+  and spacing -- so board CSS aimed at those still applies. The header's bottom
+  margin goes while folded.
+
+**What bit.**
+
+- The studio's notes say `.ss-panel-body { display: flex }` beats the `hidden`
+  attribute, so it sets Tailwind's `hidden` class as well. That does not reproduce
+  in core: Tailwind's preflight, which every studio imports, has
+  `[hidden] { display: none !important }`. A `[hidden]` rule written into `base.css`
+  for it changed nothing -- with it removed, the folded body still measured 0px tall
+  -- so core relies on the attribute alone.
+- A grid of panels or cards needs `items-start`, or a folded one stretches to its
+  neighbours' height.
+- A folded summary reads saved values (`useVelcroValue`), not the staged draft, so
+  it changes when the operator saves, not as they type.
+
+**The shape asked for in core.**
+
+```jsx
+<Panel title="Slate" actions={<ResetButton … size="sm" />} collapsible defaultOpen={false}>
+```
+
+- `collapsible` turns folding on; `defaultOpen` starts one open. Folded is the
+  default.
+- `useCollapsed` and `Chevron` exported from `@single-studio/core/control`, so a
+  studio folds its own cards the same way.
+- It pairs with the other asks from the same studio:
+  - `actions` on `Panel`, rendered right-aligned on the title line;
+  - `size="sm"` on `Confirm`, `ResetButton`, `SwapButton` and `Toggle`, so a
+    header button needs no overrides -- today it takes
+    `min-h-0! px-2.5! py-1! text-xs!`. None of the four has a size yet;
+  - `color-scheme: dark` on the board, above.
+
+**What core has now** (on the branch, not released). `actions`, as anything or as
+a function given `{ open }`; `collapsible`, off by default, so existing boards are
+unchanged; `defaultOpen`. Settled on the way:
+
+- No title, but actions: the header holds just the actions. No title and
+  collapsible: a chevron of its own, named "Fold panel" or "Open panel". Neither,
+  and no actions: no header at all.
+- In a slim dock the actions take a line of their own under the title, still at the
+  right, and the title keeps one line. Measured at 380px and 1280px.
+- Folding hides the body without unmounting it, so a draft typed into a folded
+  panel survives.
+
+**Since then**, also in core: `size="sm"` on `Confirm`, `ResetButton`,
+`SwapButton` and `Toggle`, with a 24px floor that holds when a studio squeezes the
+padding; `useCollapsed` and `Chevron` exported from `@single-studio/core/control`;
+every other panel a shade lighter, by default; and `color-scheme: dark` on
+`.ss-control`. The stripes count sibling panels, so a panel wrapped in a `<div>` of
+its own stays the darker shade -- written into the docs rather than worked around.
+
 ## Rocket League
 
 - **A test suite with the real game.** `dev/replay.mjs` proves the plugin and
diff --git a/packages/core/src/components/common/Icon.jsx b/packages/core/src/components/common/Icon.jsx
index 056ac10b..99ab5823 100644
--- a/packages/core/src/components/common/Icon.jsx
+++ b/packages/core/src/components/common/Icon.jsx
@@ -109,6 +109,8 @@ const shapes = {
       <path d="M6.3 16a8 8 0 1 0 .5-8" />
     </>
   ),
+  /* Pointing down: open. A folded Panel turns it a quarter to point at its title. */
+  chevron: <path d="M6 9l6 6 6-6" />,
   /* Two figures: one nearer, one behind. Collaboration, without a metaphor. */
   people: (
     <>
diff --git a/packages/core/src/components/control/Collapse.jsx b/packages/core/src/components/control/Collapse.jsx
new file mode 100644
index 00000000..d0750732
--- /dev/null
+++ b/packages/core/src/components/control/Collapse.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+
+import { cx } from '../../toolkits/cx'
+import { Icon } from '../common/Icon'
+
+/**
+ * Whether something on the board is folded away, and a function that flips it:
+ * `const [collapsed, toggle] = useCollapsed()`. Folded to begin with;
+ * `useCollapsed(false)` starts it open. What a collapsible `Panel` folds with, for
+ * folding anything else the same way -- a team card inside a panel, a row of
+ * advanced settings.
+ *
+ * Starts folded unless told otherwise, on every load, as a panel does. Component
+ * state and nothing else: not the show, which would fold the same thing on every
+ * operator's board, and not browser storage, so a reload is always the same board.
+ *
+ * @example
+ * function TeamCard({ team }) {
+ *   const [collapsed, toggle] = useCollapsed()
+ *   const body = useId()
+ *
+ *   return (
+ *     <div>
+ *       <button type="button" onClick={toggle} aria-expanded={!collapsed} aria-controls={body}>
+ *         <Chevron collapsed={collapsed} /> {team}
+ *       </button>
+ *       <div id={body} hidden={collapsed}>…</div>
+ *     </div>
+ *   )
+ * }
+ *
+ * @param {boolean} [initial] - Start folded. Defaults to `true`; `false` starts it open.
+ * @returns {[boolean, () => void]} Whether it is folded, and a function that folds or opens it.
+ */
+export function useCollapsed(initial = true) {
+  const [collapsed, setCollapsed] = useState(Boolean(initial))
+
+  return [collapsed, () => setCollapsed((was) => !was)]
+}
+
+/**
+ * @typedef {object} ChevronProps
+ * @property {boolean} [collapsed] - Folded: turned a quarter to point at what it belongs to.
+ * @property {string} [className] - Added to the component's own classes.
+ */
+/**
+ * The fold's chevron: pointing down when open, turned a quarter when folded, as a
+ * `Panel`'s is. Decoration -- the button it sits in says what it does, with
+ * `aria-expanded` saying which way it is.
+ *
+ * @example
+ * <Chevron collapsed={collapsed} />
+ *
+ * @param {ChevronProps & import("react").SVGAttributes<SVGElement>} props
+ */
+export function Chevron({ collapsed = false, className, ...rest }) {
+  return <Icon name="chevron" className={cx('ss-chevron transition-transform motion-reduce:transition-none', collapsed && '-rotate-90', className)} {...rest} />
+}
diff --git a/packages/core/src/components/control/Confirm.jsx b/packages/core/src/components/control/Confirm.jsx
index 93ff3f6e..b175e21f 100644
--- a/packages/core/src/components/control/Confirm.jsx
+++ b/packages/core/src/components/control/Confirm.jsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import { cx } from '../../toolkits/cx'
 import { ARMED_TONE, toneClass } from '../../toolkits/tone'
+import { SMALL } from './Label'
 
 const ARMED = 4000
 
@@ -12,6 +13,7 @@ const ARMED = 4000
  * @property {string} [ask] - What it says once armed. Defaults to `"Click to confirm"`.
  * @property {'danger'|'warn'|'go'|'primary'|'quiet'} [tone] - What the button means. Defaults to `"danger"`.
  * @property {boolean} [disabled] - Nothing happens on click.
+ * @property {'md'|'sm'} [size] - `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`.
  * @property {import("react").ReactNode} [children] - Replaces `label` when idle.
  * @property {string} [className] - Added to the component's own classes.
  */
@@ -77,7 +79,7 @@ const ASK = 'Click to confirm'
  *
  * @param {ConfirmProps & import("react").ButtonHTMLAttributes<HTMLElement>} props
  */
-export function Confirm({ onConfirm, label, ask = ASK, tone = 'danger', disabled, className, children, ...rest }) {
+export function Confirm({ onConfirm, label, ask = ASK, tone = 'danger', size = 'md', disabled, className, children, ...rest }) {
   const [armed, setArmed] = useState(false)
   const timer = useRef(null)
 
@@ -118,7 +120,8 @@ export function Confirm({ onConfirm, label, ask = ASK, tone = 'danger', disabled
       disabled={disabled}
       data-armed={armed ? '' : undefined}
       className={cx(
-        'ss-confirm rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40',
+        'ss-confirm rounded-md font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40',
+        size === 'sm' ? SMALL : 'px-3 py-1.5 text-sm',
         armed ? ARMED_TONE : looks,
         className,
       )}
diff --git a/packages/core/src/components/control/Label.jsx b/packages/core/src/components/control/Label.jsx
index b8ec16c4..219f3cb9 100644
--- a/packages/core/src/components/control/Label.jsx
+++ b/packages/core/src/components/control/Label.jsx
@@ -15,6 +15,17 @@ import { useRowLabel } from './Row'
 export const LINE = 'h-[var(--ss-input-h,2.5rem)]'
 export const MIN_LINE = 'min-h-[var(--ss-input-h,2.5rem)]'
 
+/**
+ * A button sized for a Panel's header rather than for a Row: `size="sm"` on
+ * Confirm, ResetButton, SwapButton and Toggle.
+ *
+ * Off the input line on purpose -- nothing in a header lines up with a field -- but
+ * never under 24px tall, the smallest pointer target WCAG 2.5.8 allows. Before
+ * this, a studio got a header-sized button by overriding the line height away with
+ * `min-h-0! px-2.5! py-1! text-xs!`, and `min-h-0` has no floor at all.
+ */
+export const SMALL = 'min-h-6 px-2.5 py-1 text-xs'
+
 /**
  * A control's label line. One component so every control's line is the same height:
  * a Row lines its controls up by assuming it, and a label one pixel taller than its
diff --git a/packages/core/src/components/control/Panel.jsx b/packages/core/src/components/control/Panel.jsx
index cd8846f8..6c9b7573 100644
--- a/packages/core/src/components/control/Panel.jsx
+++ b/packages/core/src/components/control/Panel.jsx
@@ -1,8 +1,14 @@
+import { useId } from 'react'
+
 import { cx } from '../../toolkits/cx'
+import { Chevron, useCollapsed } from './Collapse'
 
 /**
  * @typedef {object} PanelProps
  * @property {string} [title] - Heading for the group.
+ * @property {import("react").ReactNode | ((state: { open: boolean }) => import("react").ReactNode)} [actions] - Anything at all, right-aligned on the title line: a reset, a swap, a status light. Or a function that returns it, given whether the panel is open.
+ * @property {boolean} [collapsible] - The title folds the panel away and opens it again. Defaults to `false`.
+ * @property {boolean} [defaultOpen] - A collapsible panel starts folded on every load; `true` starts this one open. Defaults to `false`.
  * @property {import("react").ReactNode} [children] - Controls, one row each. Put several in a `Row` to share a line.
  * @property {string} [className] - Added to the component's own classes.
  */
@@ -16,8 +22,32 @@ import { cx } from '../../toolkits/cx'
  * at every width. To put controls side by side when there is room, put them in a
  * `Row`, which stacks them again when there is not.
  *
+ * **`actions`** go on the title line, at the right: anything, not only buttons. They
+ * stay in the header, and keep working, while the panel is folded. In a dock too
+ * narrow for both, they drop under the title rather than squeezing it.
+ *
+ * **`collapsible`** makes the title a button that folds the body away. Folded is
+ * where every collapsible panel starts, on every load: a fresh board is a short
+ * list of headers, and the operator opens what the next segment needs. The fold is
+ * this page's alone -- not the show's, which would fold the panel on every
+ * operator's board, and not remembered, so a reload is always the same board.
+ * Folding hides the controls without unmounting them, so a draft typed into a
+ * folded panel is still there when it opens.
+ *
+ * Without a `title`, `actions` or `collapsible`, there is no header at all. Actions
+ * without a title still get their line; a collapsible panel without one gets a
+ * chevron on its own to fold it by.
+ *
+ * A button in `actions` takes `size="sm"` -- Confirm, ResetButton, SwapButton and
+ * Toggle all have it -- to sit in the header rather than on a Row's input line.
+ * `useCollapsed` and `Chevron` fold anything else on the board the same way.
+ *
+ * Every other panel is a shade lighter, so a long board reads as blocks. The stripes
+ * count sibling panels: render panels directly, or in a fragment, rather than each in
+ * an element of its own.
+ *
  * The panel's own box is `.ss-panel-body` in the stylesheet if you want to take it
- * further.
+ * further; the title line is `.ss-panel-header`, the actions `.ss-panel-actions`.
  *
  * @example
  * <Panel title="Scores">
@@ -28,13 +58,71 @@ import { cx } from '../../toolkits/cx'
  *   <Toggle name="scores" label="scores" />
  * </Panel>
  *
+ * @example
+ * // Folded until the operator opens it, with its reset reachable either way
+ * <Panel title="Slate" collapsible actions={<ResetButton label="slate" names={['slate.title', 'slate.subtitle']} size="sm" />}>
+ *   <Field name="slate.title" label="Title" />
+ *   <Field name="slate.subtitle" label="Subtitle" />
+ * </Panel>
+ *
+ * @example
+ * // Actions that change with the fold: the swap only while the names are in view
+ * <Panel title="Teams" collapsible actions={({ open }) => open && <SwapButton label="sides" names={['home.name', 'away.name']} size="sm" />}>
+ *   …
+ * </Panel>
+ *
  * @param {PanelProps & import("react").HTMLAttributes<HTMLElement>} props
  */
-export function Panel({ title, children, className, ...rest }) {
+export function Panel({ title, actions, collapsible = false, defaultOpen = false, children, className, ...rest }) {
+  const [collapsed, toggle] = useCollapsed(!defaultOpen)
+  const body = useId()
+
+  // Read every render rather than stored, so a panel that stops being collapsible
+  // is simply open, whatever it was folded to.
+  const folded = collapsible && collapsed
+  const tools = typeof actions === 'function' ? actions({ open: !folded }) : actions
+  const hasTools = tools !== undefined && tools !== null && tools !== false && tools !== ''
+
+  // The button goes inside the heading, never the other way round: a heading inside
+  // a button is invalid HTML, and a screen reader's list of headings loses it. The
+  // negative margin and padding give it a bigger target without moving the title.
+  const fold = (label) => (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-expanded={!folded}
+      aria-controls={body}
+      aria-label={label ? undefined : folded ? 'Open panel' : 'Fold panel'}
+      className="ss-panel-fold -m-1 flex items-center gap-2 rounded p-1 text-left uppercase tracking-wide transition-colors hover:text-slate-200"
+    >
+      <Chevron collapsed={folded} />
+      {label}
+    </button>
+  )
+
+  const heading = title ? (
+    <h2 className="min-w-0 text-sm font-semibold uppercase tracking-wide text-slate-400">{collapsible ? fold(title) : title}</h2>
+  ) : collapsible ? (
+    <span className="text-slate-400">{fold(null)}</span>
+  ) : null
+
   return (
-    <section className={cx('ss-panel rounded-lg border border-slate-800 bg-slate-900/40 p-3 sm:p-4', className)} {...rest}>
-      {title ? <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-400">{title}</h2> : null}
-      <div className="ss-panel-body">{children}</div>
+    <section
+      className={cx('ss-panel rounded-lg border border-slate-800 p-3 sm:p-4', className)}
+      data-open={collapsible ? String(!folded) : undefined}
+      {...rest}
+    >
+      {heading || hasTools ? (
+        // Wraps rather than shrinking the title: in a slim dock the actions take the
+        // next line, still at the right, and the title keeps its words.
+        <header className={cx('ss-panel-header flex flex-wrap items-center gap-x-3 gap-y-2', !folded && 'mb-3')}>
+          {heading}
+          {hasTools ? <div className="ss-panel-actions ml-auto flex flex-wrap items-center justify-end gap-2">{tools}</div> : null}
+        </header>
+      ) : null}
+      <div id={body} className="ss-panel-body" hidden={folded}>
+        {children}
+      </div>
     </section>
   )
 }
diff --git a/packages/core/src/components/control/ResetButton.jsx b/packages/core/src/components/control/ResetButton.jsx
index 2820566d..2e3db481 100644
--- a/packages/core/src/components/control/ResetButton.jsx
+++ b/packages/core/src/components/control/ResetButton.jsx
@@ -1,7 +1,7 @@
 import { useVelcroMutate } from '../../hooks/useVelcroMutate'
 import { qualify } from '../../toolkits/address'
 import { cx } from '../../toolkits/cx'
-import { MIN_LINE } from './Label'
+import { MIN_LINE, SMALL } from './Label'
 import { Confirm } from './Confirm'
 
 /** Where this component's values live. Not a prop: a studio never needs another. */
@@ -14,6 +14,7 @@ const NAMESPACE = 'variables'
  * @property {string} [label] - Names what gets cleared: the button reads "Reset `<label>`". Defaults to `"Reset"`.
  * @property {boolean} [confirm] - Ask before clearing. Defaults to `true`; pass `confirm={false}` for a button that fires on one press.
  * @property {import("react").ReactNode} [children] - Replaces the generated "Reset `<label>`" text.
+ * @property {'md'|'sm'} [size] - `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`.
  * @property {string} [className] - Added to the component's own classes.
  */
 /**
@@ -54,7 +55,7 @@ const NAMESPACE = 'variables'
  *
  * @param {ResetButtonProps & import("react").ButtonHTMLAttributes<HTMLElement>} props
  */
-export function ResetButton({ names = [], paths = [], label = 'Reset', confirm = true, className, children, ...rest }) {
+export function ResetButton({ names = [], paths = [], label = 'Reset', confirm = true, size = 'md', className, children, ...rest }) {
   const mutate = useVelcroMutate()
   const targets = qualify({ names, paths, namespace: NAMESPACE })
 
@@ -78,7 +79,14 @@ export function ResetButton({ names = [], paths = [], label = 'Reset', confirm =
    */
   if (confirm) {
     return (
-      <Confirm className={cx('ss-reset ss-unlabelled', MIN_LINE, className)} label={text} onConfirm={clear} title={text} {...rest}>
+      <Confirm
+        className={cx('ss-reset ss-unlabelled', size === 'sm' ? null : MIN_LINE, className)}
+        size={size}
+        label={text}
+        onConfirm={clear}
+        title={text}
+        {...rest}
+      >
         {children}
       </Confirm>
     )
@@ -90,8 +98,8 @@ export function ResetButton({ names = [], paths = [], label = 'Reset', confirm =
       onClick={clear}
       title={text}
       className={cx(
-        'ss-reset ss-unlabelled rounded-md bg-rose-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-rose-500',
-        MIN_LINE,
+        'ss-reset ss-unlabelled rounded-md bg-rose-600 font-medium text-white transition-colors hover:bg-rose-500',
+        size === 'sm' ? SMALL : cx('px-3 py-2 text-sm', MIN_LINE),
         className,
       )}
       {...rest}
diff --git a/packages/core/src/components/control/Stepper.jsx b/packages/core/src/components/control/Stepper.jsx
index 59cc3cfb..8c05d1fb 100644
--- a/packages/core/src/components/control/Stepper.jsx
+++ b/packages/core/src/components/control/Stepper.jsx
@@ -18,6 +18,8 @@ const NAMESPACE = 'variables'
 /**
  * A number with minus and plus buttons, and a field to type into. The buttons add
  * and subtract, so two operators pressing +1 at once come to +2 rather than +1. Writes immediately.
+ * The field fills whatever width its cell has; `col-auto` keeps the stepper at its
+ * own 160px.
  *
  * The buttons use the `increment`/`decrement` mutations rather than writing an
  * absolute value, which is what makes two operators tapping +1 at the same moment
@@ -136,9 +138,15 @@ export function Stepper({ name, label, step = 1, className, ...rest }) {
           /* The native spinners are hidden rather than styled. They would sit beside
              the -/+ buttons doing the same job by a different rule -- an absolute
              write where the buttons add -- and two controls a pixel apart that
-             disagree about what they mean is worse than one control fewer. */
+             disagree about what they mean is worse than one control fewer.
+
+             It grows into whatever room its cell has, between the two buttons. At
+             4rem and no more it left a stepper 160px wide in any cell, and on a
+             board with breakpoints that was the empty space beside every stepper:
+             170px of 330 in a slim dock, 414px of 574 at 640px wide. `w-16` is
+             still where it starts, so a `col-auto` stepper is 160px as before. */
           className={cx(
-            'ss-stepper-value w-16 min-w-0 rounded-md border bg-slate-950 px-2 text-center text-xl font-semibold tabular-nums text-slate-100 outline-none transition-colors',
+            'ss-stepper-value w-16 min-w-0 grow rounded-md border bg-slate-950 px-2 text-center text-xl font-semibold tabular-nums text-slate-100 outline-none transition-colors',
             LINE,
             '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
             dirty ? 'border-amber-500/70 focus:border-amber-400' : 'border-transparent focus:border-sky-500',
diff --git a/packages/core/src/components/control/Stopwatch.jsx b/packages/core/src/components/control/Stopwatch.jsx
index 3fbbf921..88e85289 100644
--- a/packages/core/src/components/control/Stopwatch.jsx
+++ b/packages/core/src/components/control/Stopwatch.jsx
@@ -15,6 +15,7 @@ const NAMESPACE = 'timers'
 /**
  * Counts up from when it was started, with pause and reset. Stores an origin
  * rather than a running total, so every machine derives the same number. Writes immediately.
+ * The readout fills whatever width its cell has, with the buttons at the end.
  *
  * The third of the three clocks. <Countdown> counts down a duration, <CountdownTo>
  * counts down to a wall-clock time, and this one counts up from the moment it was
@@ -42,11 +43,15 @@ export function Stopwatch({ name, label = 'Stopwatch', className, ...rest }) {
       {/* Wraps rather than overflows. Three controls have a natural width the panel
           knows nothing about, and at the one width where three clocks fit in a row
           and each is barely wide enough, Reset used to hang out past the panel's
-          edge. A control that runs out of room should fold, not escape. */}
+          edge. A control that runs out of room should fold, not escape.
+
+          The readout grows into the rest of the line, as a stepper's field does, so
+          the buttons end at the cell's edge instead of leaving up to 295px empty
+          beside them on a wide board. */}
       <div className="flex flex-wrap items-start gap-2">
         <output
           className={cx(
-            'flex min-w-[4.5rem] items-center justify-center rounded-md border border-slate-700 bg-slate-950 px-3 text-sm tabular-nums text-slate-100',
+            'flex min-w-[4.5rem] grow items-center justify-center rounded-md border border-slate-700 bg-slate-950 px-3 text-sm tabular-nums text-slate-100',
             LINE,
           )}
         >
diff --git a/packages/core/src/components/control/SwapButton.jsx b/packages/core/src/components/control/SwapButton.jsx
index 0e7a3dfb..6ecb572f 100644
--- a/packages/core/src/components/control/SwapButton.jsx
+++ b/packages/core/src/components/control/SwapButton.jsx
@@ -1,7 +1,7 @@
 import { useVelcroMutate } from '../../hooks/useVelcroMutate'
 import { qualify } from '../../toolkits/address'
 import { cx } from '../../toolkits/cx'
-import { MIN_LINE } from './Label'
+import { MIN_LINE, SMALL } from './Label'
 import { Confirm } from './Confirm'
 
 /** Where this component's values live. Not a prop: a studio never needs another. */
@@ -14,6 +14,7 @@ const NAMESPACE = 'variables'
  * @property {string} [label] - Names what gets traded, on the button. Defaults to `"Swap"`.
  * @property {boolean} [confirm] - Ask before trading. Defaults to `true`; pass `confirm={false}` to trade on one press.
  * @property {import("react").ReactNode} [children] - Replaces the generated text.
+ * @property {'md'|'sm'} [size] - `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`.
  * @property {string} [className] - Added to the component's own classes.
  */
 /**
@@ -56,7 +57,7 @@ const NAMESPACE = 'variables'
  *
  * @param {SwapButtonProps & import("react").ButtonHTMLAttributes<HTMLElement>} props
  */
-export function SwapButton({ names = [], paths = [], label = 'Swap', confirm = true, className, children, ...rest }) {
+export function SwapButton({ names = [], paths = [], label = 'Swap', confirm = true, size = 'md', className, children, ...rest }) {
   const mutate = useVelcroMutate()
   const targets = qualify({ names, paths, namespace: NAMESPACE })
 
@@ -64,7 +65,15 @@ export function SwapButton({ names = [], paths = [], label = 'Swap', confirm = t
 
   if (confirm) {
     return (
-      <Confirm className={cx('ss-swap ss-unlabelled', MIN_LINE, className)} label={label} onConfirm={swap} tone="warn" title={label} {...rest}>
+      <Confirm
+        className={cx('ss-swap ss-unlabelled', size === 'sm' ? null : MIN_LINE, className)}
+        size={size}
+        label={label}
+        onConfirm={swap}
+        tone="warn"
+        title={label}
+        {...rest}
+      >
         {children}
       </Confirm>
     )
@@ -75,8 +84,8 @@ export function SwapButton({ names = [], paths = [], label = 'Swap', confirm = t
       type="button"
       onClick={swap}
       className={cx(
-        'ss-swap ss-unlabelled rounded-md bg-amber-500 px-3 py-2 text-sm font-medium text-slate-950 transition-colors hover:bg-amber-400',
-        MIN_LINE,
+        'ss-swap ss-unlabelled rounded-md bg-amber-500 font-medium text-slate-950 transition-colors hover:bg-amber-400',
+        size === 'sm' ? SMALL : cx('px-3 py-2 text-sm', MIN_LINE),
         className,
       )}
       {...rest}
diff --git a/packages/core/src/components/control/Toggle.jsx b/packages/core/src/components/control/Toggle.jsx
index 1b16122b..4f180a06 100644
--- a/packages/core/src/components/control/Toggle.jsx
+++ b/packages/core/src/components/control/Toggle.jsx
@@ -2,7 +2,7 @@ import { useToggleGroup } from '../../hooks/useToggleGroup'
 import { useVelcroMutate } from '../../hooks/useVelcroMutate'
 import { useVelcroValue } from '../../hooks/useVelcroValue'
 import { cx } from '../../toolkits/cx'
-import { MIN_LINE } from './Label'
+import { MIN_LINE, SMALL } from './Label'
 
 /** Where this component's values live. Not a prop: a studio never needs another. */
 const NAMESPACE = 'toggles'
@@ -13,6 +13,7 @@ const NAMESPACE = 'toggles'
  * @property {string} [label] - Names what is toggled: the button reads "Show `<label>`".
  * @property {string} [group] - A group's name. Buttons sharing one behave as radio buttons.
  * @property {import("react").ReactNode} [children] - Replaces the generated "Show `<label>`" text.
+ * @property {'md'|'sm'} [size] - `"sm"` for a Panel's header: smaller, off the input line, never under a 24px target. Defaults to `"md"`.
  * @property {string} [className] - Added to the component's own classes.
  */
 /**
@@ -36,7 +37,7 @@ const NAMESPACE = 'toggles'
  *
  * @param {ToggleProps & import("react").ButtonHTMLAttributes<HTMLElement>} props
  */
-export function Toggle({ name, label, group, className, children, ...rest }) {
+export function Toggle({ name, label, group, size = 'md', className, children, ...rest }) {
   const path = `${NAMESPACE}.${name}`
   const active = Boolean(useVelcroValue(path, false))
   const mutate = useVelcroMutate()
@@ -57,8 +58,8 @@ export function Toggle({ name, label, group, className, children, ...rest }) {
       onClick={onClick}
       aria-pressed={active}
       className={cx(
-        'ss-toggle-button ss-unlabelled rounded-md px-3 py-2 text-sm font-medium transition-colors',
-        MIN_LINE,
+        'ss-toggle-button ss-unlabelled rounded-md font-medium transition-colors',
+        size === 'sm' ? SMALL : cx('px-3 py-2 text-sm', MIN_LINE),
         active ? 'bg-sky-600 text-white hover:bg-sky-500' : 'border border-slate-700 bg-slate-900 text-slate-300 hover:border-slate-500',
         className,
       )}
diff --git a/packages/core/src/components/control/index.js b/packages/core/src/components/control/index.js
index ab23f3ab..761b8bfe 100644
--- a/packages/core/src/components/control/index.js
+++ b/packages/core/src/components/control/index.js
@@ -16,6 +16,7 @@ export { Menu } from './Menu'
 export { MutationTrouble } from './MutationTrouble'
 export { Operator } from './Operator'
 export { Panel } from './Panel'
+export { Chevron, useCollapsed } from './Collapse'
 export { Plugins, PluginsDialog } from './Plugins'
 export { RelayAdmin } from './RelayAdmin'
 export { Row } from './Row'
diff --git a/packages/core/src/styles/base.css b/packages/core/src/styles/base.css
index a3764604..bfcbd217 100644
--- a/packages/core/src/styles/base.css
+++ b/packages/core/src/styles/base.css
@@ -331,6 +331,18 @@
     --ss-ease: linear;
   }
 
+  /*
+   * The board is dark, so it says so. Chrome draws a native control's own pieces --
+   * a time input's clock icon, its picker, the list behind a <select>, scrollbars --
+   * in the page's colour scheme, and without this they came out black on the
+   * board's slate: the clock icon in CountdownTo all but disappeared. Found in a
+   * studio, which set it in its own index.css. On `.ss-control` alone, so a graphic,
+   * which has a scene behind it rather than a board, never gets it.
+   */
+  .ss-control {
+    color-scheme: dark;
+  }
+
   /*
    * Cursors on the board.
    *
@@ -438,6 +450,26 @@
    * pushing the panel wider than the dock and giving the whole board a horizontal
    * scrollbar; they are easy to leave out and painful to find.
    */
+  /*
+   * Every other panel a shade lighter, so a long board reads as separate blocks
+   * rather than one slab of slate. Taken from a studio that did it for itself, as
+   * the default because every board is expected to want it.
+   *
+   * Counted among sibling panels, so panels nested inside a panel alternate among
+   * themselves. A panel wrapped in an element of its own -- `<div><Panel /></div>` --
+   * is the only one of its kind in there and never counts as even; render panels
+   * directly, or in a fragment, to keep the stripes. Here rather than as a class on
+   * the element so the count can be made at all, and in this layer so a studio's
+   * `bg-*` on one panel, or its own rule, still wins.
+   */
+  .ss-panel {
+    background-color: rgb(15 23 42 / 0.4);
+  }
+
+  .ss-panel:nth-of-type(even) {
+    background-color: rgb(30 41 59 / 0.7);
+  }
+
   .ss-panel-body {
     display: flex;
     flex-direction: column;
diff --git a/scripts/api-reference.mjs b/scripts/api-reference.mjs
index 86e6f6a5..1ee83bda 100644
--- a/scripts/api-reference.mjs
+++ b/scripts/api-reference.mjs
@@ -57,6 +57,8 @@ const AUTHORED = {
     'Leaderboard',
     'Panel',
     'Row',
+    'useCollapsed',
+    'Chevron',
     'Break',
     'Confirm',
     'Hotkeys',