Remove 1 gutter size

static/panel.css

@@ -7,7 +7,6 @@
   --bg: #0a0d14;
   --card: #151a25;
   --edge: #232b3b;
-  --gutter: 16px;   /* from the screen's side to a card, and from one card to the next */
   --ink: #eef2f9;
   --ink-bright: #fff;
   --ink-bright-muted: rgba(255, 255, 255, .8);
@@ -20,9 +19,9 @@
   /* spacing scale for every gap/padding/margin in the sheet, smallest to
      largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */
   --space-xs: 4px;
-  --space-lg: 24px;
-  --space-md: 12px;
   --space-sm: 8px;
+  --space-md: 12px;   /* from the screen's side to a card, and from one card to the next */
+  --space-lg: 24px;
   --toast-bad-bg: #2b1f24;
   --toast-bad-edge: #52303a;
   --toast-bad-ink: #ffd9d4;
@@ -68,11 +67,11 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .app {
   max-width: 520px;
   margin: 0 auto;
-  padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
-           max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
+  padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right))
+           max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
   display: flex;
   flex-direction: column;
-  gap: var(--gutter);
+  gap: var(--space-md);
 }
 /* A playing card goes to the top. The rest stay in markup order (rooms as
    room_keys lists them, then the AVR), because items with the same order
@@ -83,17 +82,17 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 /* --- header ---------------------------------------------------------- */
 .top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-xs) 0; }
 .top h1 { margin: 0; line-height: 0; }
-.top .logo { height: 34px; width: auto; display: block; }
+.top .logo { height: 44px; width: auto; display: block; }
 
 /* --- cards ----------------------------------------------------------- */
 .card {
   background: var(--card);
   border: 1px solid var(--edge);
   border-radius: var(--radius);
-  padding: var(--gutter);
+  padding: var(--space-md);
   display: flex;
   flex-direction: column;
-  gap: var(--gutter);
+  gap: var(--space-md);
 }
 .card.offline { opacity: .5; }
 /* A tint, not a repaint -- it should read at a glance without competing
@@ -110,14 +109,14 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .card-head h2 {
   display: flex; align-items: center; gap: var(--space-md);
   margin: var(--space-sm); min-width: 0;
-  font-size: 17px; font-weight: 600;
+  font-size: 20px; font-weight: 600;
 }
 .card-head h2 .room-icon { flex: 0 0 auto; height: 20px; width: auto; fill: currentColor; }
 .card-head h2 .room-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* --- now playing, between the room's name and its volume --------------- */
 .now-playing {
-  display: flex; align-items: center; gap: var(--gutter); min-width: 0;
+  display: flex; align-items: center; gap: var(--space-md); min-width: 0;
 }
 .cover {
   flex: 0 0 auto;
@@ -172,7 +171,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 }
 .progress-time.elapsed { bottom: 9px; }
 .progress-time.remaining { top: 9px; }
-.progress.known { padding: var(--gutter) 0; }   /* room for the labels above and below the cursor */
+.progress.known { padding: var(--space-md) 0; }   /* room for the labels above and below the cursor */
 .progress.known .progress-cursor,
 .progress.known .progress-time,
 .progress.known .progress-total { display: block; }
@@ -183,14 +182,14 @@ svg { width: 22px; height: 22px; fill: currentColor; }
    it lights up and follows the finger without easing after it. */
 .progress.seekable .progress-cursor,
 .progress.seekable .progress-time { cursor: grab; touch-action: pan-y; }
-.progress.seekable .progress-cursor::before { content: ''; position: absolute; inset: calc(var(--gutter) * -1); }
+.progress.seekable .progress-cursor::before { content: ''; position: absolute; inset: calc(var(--space-md) * -1); }
 .progress.dragging .progress-cursor,
 .progress.dragging .progress-time { transition: none; cursor: grabbing; }
 .progress.dragging .progress-cursor { background: var(--ink); transform: translateY(-50%) scale(1.6); }
 .progress.dragging .progress-time { color: var(--ink); }
 
 /* --- volume ---------------------------------------------------------- */
-.volume { display: flex; align-items: center; gap: var(--gutter); }
+.volume { display: flex; align-items: center; gap: var(--space-md); }
 
 .control-btn {
   flex: 0 0 auto;
@@ -274,7 +273,7 @@ button.sources-btn.loading .icon { display: none; }
 .input-select {
   display: flex; align-items: center; gap: var(--space-md);
   width: 100%; min-height: 50px;
-  padding: var(--space-md) var(--gutter);
+  padding: var(--space-md) var(--space-md);
   border-radius: 16px;
   background: var(--raised);
   text-align: left;
@@ -286,13 +285,13 @@ button.sources-btn.loading .icon { display: none; }
 .input-select .chevron { color: var(--muted); }
 
 /* --- rooms merged into the AVR's card --------------------------------- */
-.joined { display: flex; flex-direction: column; gap: var(--gutter); }
+.joined { display: flex; flex-direction: column; gap: var(--space-md); }
 
 /* In here a room is an outline rather than a card: its border is what says
    it is playing with the AVR, and the fill -- a tint too, when it plays --
    belongs to the group's card instead. Same specificity as
    .card.room.playing, so being later is what wins. */
-.joined .card.room { background: none; border-color: var(--ink); border-radius: 18px; padding: var(--gutter); gap: var(--space-md); }
+.joined .card.room { background: none; border-color: var(--ink); border-radius: 18px; padding: var(--space-md); gap: var(--space-md); }
 .joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); }
 .joined .cover { width: 52px; height: 52px; border-radius: 10px; }
 .joined .song { font-size: 18px; }
@@ -321,7 +320,7 @@ button.sources-btn.loading .icon { display: none; }
   background: var(--card);
   border: 1px solid var(--edge);
   border-radius: 28px 28px 0 0;
-  padding: var(--space-md) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
+  padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
   max-height: 82vh;
   display: flex; flex-direction: column; gap: var(--space-md);
   animation: rise .22s cubic-bezier(.22, .68, .3, 1);
@@ -334,7 +333,7 @@ button.sources-btn.loading .icon { display: none; }
 .options { display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; -webkit-overflow-scrolling: touch; }
 .option {
   display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
-  min-height: 58px; padding: 0 var(--gutter);
+  min-height: 58px; padding: 0 var(--space-md);
   border-radius: 16px; background: var(--raised);
   font-size: 17px; text-align: left;
 }
@@ -352,7 +351,7 @@ button.sources-btn.loading .icon { display: none; }
   position: fixed; left: 50%; transform: translateX(-50%);
   bottom: calc(22px + env(safe-area-inset-bottom));
   z-index: 20; max-width: 90vw;
-  padding: var(--space-md) var(--gutter); border-radius: 14px;
+  padding: var(--space-md) var(--space-md); border-radius: 14px;
   background: var(--toast-bad-bg); border: 1px solid var(--toast-bad-edge); color: var(--toast-bad-ink);
   font-size: 14px; box-shadow: 0 10px 30px var(--shadow);
 }