Shell 1.6.0: bars that tuck away, and every edge resizes

Three things about arranging a dashboard.

**Auto-hide bars.** A new button left of ⛶ folds every tile's title bar away
at once, for a windowed screen that should read like a wall display.
Fullscreen already did this for watching; this is the windowed equivalent,
asked for by hand. It starts off and saves with the layout, so a booth's
named layout loads with the bars already tucked away.

**A hidden bar is not a gone bar.** Folded away — by that switch or by a
tile's own notch — the bar leaves the flow and parks just above its tile, so
the module keeps the whole body and nothing reflows as the bar comes and
goes. Point at the tile's top edge and it slides back in over the content,
where its buttons click and its width drags the tile exactly as before. A
dashboard can now be arranged with every bar out of the way, which is the
point of hiding them.

**Every edge resizes.** The top, left and right edges join the bottom one:
each moves only itself, so the tile grows into the space beside it while the
opposite edge stays put, stopping at a neighbour or at the module's own
minimum. Where two tiles meet, that boundary already belongs to the seam
pill between them — it moves both edges and leaves no gap — so the two
tiles' side marks step aside there rather than offer a second, different
control on the same pixels.

One fix underneath: saving a named layout was dropping each tile's variant,
title, minimum size and hidden-bar state, so a saved "Now" tile came back as
the full Now/Next card and a solo timer came back with a full tile's
settings. The layout file now carries them — and the new switch with them.

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

public/style.css

@@ -126,6 +126,14 @@ body.menu-hidden #topbar {
   line-height: 1;
 }
 .tb-btn.icon svg { display: block; }
+/* A top-bar button that is a switch rather than an action lights up the same
+   way an open tile button does, so "on" reads the same everywhere. */
+.tb-btn.is-on,
+.tb-btn.is-on:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
 
 /* ── dropdown menus ────────────────────────────────────────────────── */
 
@@ -270,12 +278,37 @@ body.menu-hidden #topbar {
   transition: height 0.22s ease, border-bottom-width 0.22s ease;
 }
 .tile.dragging .tile-head { cursor: grabbing; }
-/* hidden = collapsed, not removed, so the notch toggle animates */
-.tile.head-hidden .tile-head {
-  height: 0;
-  border-bottom-width: 0;
-  overflow: hidden;
+
+/* Folded away: the bar leaves the flow and parks just above the tile, so the
+   module keeps the whole body and nothing reflows as the bar comes and goes.
+   Pointing at the tile's top edge slides it back in over the content
+   (shell.js adds .head-peek) — and because it is the same element, its
+   buttons click and its width drags the tile just as they always did. */
+body:not(.fullscreen) .tile.head-off > .tile-head {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 7;
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  -webkit-backdrop-filter: blur(7px);
+  backdrop-filter: blur(7px);
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.18s ease, opacity 0.18s ease;
 }
+body:not(.fullscreen) .tile.head-off.head-peek > .tile-head {
+  transform: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+body:not(.fullscreen) .tile.is-tinted.head-off > .tile-head {
+  background: color-mix(in srgb, var(--tile-tint) 20%, var(--panel));
+}
+/* Auto-hide already reveals on hover, so the notch would be a dead control;
+   a bar this tile hid by itself keeps its notch, which is how it comes back. */
+body.autohide-heads .tile-notch { display: none; }
 
 .tile-head .dot {
   flex: none;
@@ -395,7 +428,7 @@ body.menu-hidden #topbar {
 }
 .tile:hover .tile-notch { opacity: 0.6; }
 .tile .tile-notch:hover { opacity: 1; }
-.tile.head-hidden .tile-notch { top: 0; }
+body:not(.fullscreen) .tile.head-off .tile-notch { top: 0; }
 .tile-notch::after {
   content: "";
   display: block;
@@ -496,6 +529,72 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
   margin-bottom: 4px;
   border-bottom: 2px solid currentColor;
 }
+/* the other three edges: the same mark, turned to face its own side. Each
+   stops short of the corners so the corner grips keep their full 20px. */
+.tile-resize-top,
+.tile-resize-right,
+.tile-resize-side {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  color: var(--muted);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.tile-resize-top {
+  top: 0;
+  left: 24px;
+  right: 24px;
+  height: 10px;
+  align-items: flex-start;
+  cursor: ns-resize;
+  /* Above a revealed title bar: the bar slides in under the pointer here, and
+     this strip has to stay the top edge rather than become part of it. */
+  z-index: 8;
+}
+.tile-resize-right,
+.tile-resize-side {
+  top: 24px;
+  bottom: 24px;
+  width: 10px;
+  cursor: ew-resize;
+}
+.tile-resize-right { right: 0; justify-content: flex-end; }
+.tile-resize-side { left: 0; justify-content: flex-start; }
+.tile-resize-top::after,
+.tile-resize-right::after,
+.tile-resize-side::after {
+  content: "";
+  border-radius: 999px;
+}
+.tile-resize-top::after {
+  width: 44px;
+  max-width: 60%;
+  height: 0;
+  margin-top: 4px;
+  border-top: 2px solid currentColor;
+}
+.tile-resize-right::after,
+.tile-resize-side::after {
+  width: 0;
+  height: 44px;
+  max-height: 60%;
+}
+.tile-resize-right::after { margin-right: 4px; border-right: 2px solid currentColor; }
+.tile-resize-side::after { margin-left: 4px; border-left: 2px solid currentColor; }
+/* A side that meets another tile belongs to the seam pill between them. */
+.tile.seam-left .tile-resize-side,
+.tile.seam-right .tile-resize-right { display: none; }
+.tile:hover .tile-resize-top,
+.tile:hover .tile-resize-right,
+.tile:hover .tile-resize-side { opacity: 0.6; }
+.tile .tile-resize-top:hover,
+.tile .tile-resize-right:hover,
+.tile .tile-resize-side:hover { opacity: 1; color: var(--text); }
+
 .tile:hover .tile-resize-bottom { opacity: 0.6; }
 .tile .tile-resize-bottom:hover,
 .tile.resizing .tile-resize-bottom { opacity: 1; color: var(--text); }
@@ -543,7 +642,11 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
 body.fullscreen .tile-resize,
 body.fullscreen .tile-resize-left,
 body.fullscreen .tile-resize-bottom,
+body.fullscreen .tile-resize-top,
+body.fullscreen .tile-resize-right,
+body.fullscreen .tile-resize-side,
 body.fullscreen .tile-divider,
+body.fullscreen #autohide-btn,
 body.fullscreen #admin-link { display: none; }
 body.fullscreen #grid { padding-bottom: 0; }
 #gridwrap.no-scroll { overflow-y: hidden; }