Companion Buttons 1.2.0: back to picking any buttons from any pages, without the header row

1.1.0 made each tile one page, so buttons picked on a second page never
showed, choosing ended on every settings change, and a tile could go blank
after a remount. This goes back to 1.0's model and keeps only the changes
asked for:

- Pick buttons from any pages; each gets a ring and its order number.
- No Page / Clear / Done row: Page is in the gear, the grid icon starts and
  ends choosing, a second click on a button takes it out.
- Choosing survives the remount a gear change causes, so switching Page
  carries straight on.
- A tile joining a stream its dashboard already has open (another tile with
  the same buttons, or itself after a settings change) asks GET /state for
  the snapshot instead of waiting blank.
- Gear: Captions and Page. The per-page ＋ entries are gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

style.css

@@ -11,18 +11,25 @@
   overflow: hidden;
 }
 
+/* ── the chosen buttons ─────────────────────────────────────────────── */
+
 [data-module="companion-buttons"] .cb-grid {
   flex: 1;
   min-height: 0;
   display: grid;
   grid-template-columns: repeat(var(--cb-cols, 1), var(--cb-size, 64px));
-  grid-auto-rows: var(--cb-size, 64px);
+  grid-auto-rows: max-content;
   gap: 6px;
   align-content: center;
   justify-content: center;
 }
 
-[data-module="companion-buttons"] .cb-grid[hidden] { display: none; }
+[data-module="companion-buttons"] .cb-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+}
 
 [data-module="companion-buttons"] .cb-face {
   position: relative;
@@ -50,15 +57,45 @@
   to { opacity: 0.8; }
 }
 
-/* A ticked place with no button on it any more. */
-[data-module="companion-buttons"] .cb-face.is-empty {
+[data-module="companion-buttons"] .cb-face.is-missing {
   background: transparent;
   outline: 1px dashed var(--border);
   outline-offset: -1px;
 }
 
+[data-module="companion-buttons"] .cb-note {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8%;
+  color: var(--muted);
+  font-size: clamp(0.6rem, calc(var(--cb-size, 64px) * 0.12), 0.9rem);
+  line-height: 1.15;
+  text-align: center;
+}
+
+[data-module="companion-buttons"] .cb-note:empty { display: none; }
+
+[data-module="companion-buttons"] .cb-caption {
+  display: none;
+  width: var(--cb-size, 64px);
+  height: 18px;
+  padding-top: 3px;
+  color: var(--muted);
+  font-size: 0.72rem;
+  line-height: 15px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-module="companion-buttons"] .cb-grid.has-captions .cb-caption { display: block; }
+
 /* Companion gone: the last pictures stay, faded, so nobody reads them as live. */
-[data-module="companion-buttons"] .cb-root.is-offline .cb-face {
+[data-module="companion-buttons"] .cb-grid.is-offline .cb-face {
   opacity: 0.3;
   filter: grayscale(1);
 }
@@ -79,29 +116,78 @@
 
 [data-module="companion-buttons"] .cb-banner[hidden] { display: none; }
 
+/* ── nothing chosen ─────────────────────────────────────────────────── */
+
 [data-module="companion-buttons"] .cb-empty {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 12px;
   color: var(--muted);
   font-size: 0.85rem;
   text-align: center;
 }
 
-[data-module="companion-buttons"] .cb-empty[hidden] { display: none; }
+/* ── choosing: one Companion page, laid out as Companion has it ─────── */
 
-/* Choosing: the whole page is shown and clickable; buttons this tile leaves out are faded. */
-[data-module="companion-buttons"] .cb-root.is-choosing .cb-face {
+[data-module="companion-buttons"] .cb-chooser {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 6px;
+}
+
+[data-module="companion-buttons"] .cb-pick-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--cb-pick-cols, 8), minmax(36px, 1fr));
+  gap: 4px;
+}
+
+[data-module="companion-buttons"] .cb-pick-key {
+  position: relative;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 8%;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--text) 6%, transparent);
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
-[data-module="companion-buttons"] .cb-root.is-choosing .cb-face:hover {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
+[data-module="companion-buttons"] .cb-pick-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
 }
 
-[data-module="companion-buttons"] .cb-root.is-choosing .cb-face.is-off {
-  opacity: 0.25;
-  filter: grayscale(1);
+[data-module="companion-buttons"] .cb-pick-img.is-broken { visibility: hidden; }
+
+/* Chosen: a ring and the place it shows in. Nothing else is ever marked. */
+[data-module="companion-buttons"] .cb-pick-key.is-picked {
+  outline: 3px solid var(--accent);
+  outline-offset: -3px;
 }
+
+[data-module="companion-buttons"] .cb-pick-badge {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 0.65rem;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+}
+
+[data-module="companion-buttons"] .cb-pick-badge:empty { display: none; }