Make the back arrow and menu follow one rule

index.html

@@ -527,37 +527,37 @@
      cannot see the card move.
 
      Which of the two corner controls a screen gets is decided once, in
-     showPane(), rather than here as well: this rule used to hide #back on the
+     chromeFor(), rather than here as well: this rule used to hide #back on the
      card while showPane un-hid it, and two mechanisms for one fact is how they
      drift. */
-  /* On the two screens the menu owns, it loses its disc and grows to the size of
+  /* Wherever the menu shows, it loses its disc and grows to the size of
      the two verdicts on the card, so the set reads as one set. A bordered pill
      over a room reads as a control panel bolted to the picture, and the same
      button two sizes on two consecutive screens reads as two buttons: Enes,
      "in the 3rd picture the hamburger icon like the 3 lines is different, make
      image 3 match image 2". The drop shadow is what the disc was for, and it
-     works over a photograph and a night map alike. */
-  body.carding #menu, body.waying #menu, body.rooming #menu {
+     works over a photograph and a night map alike.
+     The arrow that takes the same corner on a phone is drawn the same way. As
+     a 44px disc at .6rem it sat 16px off the menu's centre, so going from the
+     card to a room moved the corner control and changed what it was. */
+  body #back, body #menu {
     border: 0; background: none; padding: 0;
     min-width: 60px; min-height: 60px; width: 60px; height: 60px;
     top: calc(var(--safe-t) + 1.1rem);
-    /* The column rule below is (1,0,0) and this is (1,1,1), so writing a bare
-       1.1rem here beat it on every window -- and these are the only two screens
-       the menu appears on, which made that rule dead. Measured at 1900px: the
-       hamburger sat at x=17 while the 512px column started at x=694. */
+    /* The column rule below is (1,0,0) and this is (1,0,1), so writing a bare
+       1.1rem here beat it on every window, which made that rule dead for the
+       menu. Measured at 1900px: the hamburger sat at x=17 while the 512px
+       column started at x=694. */
     left: max(1.1rem, env(safe-area-inset-left, 0px), calc(50% - var(--col) / 2 + .5rem));
   }
-  body.carding #menu .ico, body.waying #menu .ico, body.rooming #menu .ico {
+  #back .ico, #menu .ico {
     width: 40px; height: 40px; stroke-width: 2.1;
     filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(0,0,0,.55));
   }
-  body.carding .m-panel, body.waying .m-panel, body.rooming .m-panel {
+  body .m-panel {
     top: calc(var(--safe-t) + 4.6rem);
     left: max(1.1rem, env(safe-area-inset-left, 0px), calc(50% - var(--col) / 2 + .5rem));
   }
-  /* The room keeps the established fixed Back arrow on a phone. Its menu and
-     panel-local Back control are the desktop pair below. */
-  body.rooming #menu { display: none; }
 
   /* The way: the map with the room lit on it, one plate naming the room, and the
      ranking peeked underneath. Enes on the schedule, "the list of other classes
@@ -568,6 +568,17 @@
      pointer through: the map is meant to be panned, and the plate is a label
      rather than a control. */
   #way { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
+  /* The plate is a label and lets the map have the pointer; its Back is the one
+     control on it. Inset at both ends so the name stays centred on the plate. */
+  #way-plate { padding-inline: 3rem; }
+  #way-back {
+    position: absolute; top: 50%; left: .35rem; transform: translateY(-50%);
+    pointer-events: auto; appearance: none; border: 0; background: none;
+    color: var(--fg); width: 44px; height: 44px; padding: 0; border-radius: 999px;
+    display: flex; align-items: center; justify-content: center; cursor: pointer;
+  }
+  #way-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  #way-back .ico { width: 26px; height: 26px; stroke-width: 2.1; }
 
   /* --- the answer --- */
   /* The sheet carries the column width itself, rather than running the full
@@ -784,7 +795,6 @@
     margin: 0; padding: .1rem 0 0;
     font-size: 1.05rem; letter-spacing: -.01em;
   }
-  .room-back { display: none; }
   .claim { margin: 0; padding: 0 1.1rem .35rem; font-weight: 650; }
   .claim .sub { display: block; font-weight: 400; color: var(--dim); font-size: .86rem; }
   .facts {
@@ -948,9 +958,9 @@
     .b-row:hover, .pick-row:hover { background: rgba(255,255,255,.05); }
     .bar-btn:hover { background: var(--card-hi); border-color: var(--line-hi); }
     .dstep:hover { color: var(--fg); }
-    /* The arrow is already a translucent pill over the map. Hovering makes it
-       opaque rather than lighter, so it does not read as a second state. */
-    #back:hover { background: var(--bg); border-color: var(--line-hi); }
+    /* The arrow is a bare glyph like the menu beside it, so hovering dims the
+       glyph rather than growing a disc it does not otherwise have. */
+    #back:hover .ico, #menu:hover .ico { opacity: .75; }
   }
 
   /* --- the display cutout, in landscape --- */
@@ -1028,21 +1038,12 @@
     }
     body:is(.has-bar) #sheet { bottom: calc(var(--bar-h, 0px) + 1rem); }
     #sheet .handle { display: none; }
-    #back, #menu, body.carding #menu, body.waying #menu, body.rooming #menu { left: 1.5rem; }
-    /* The menu owns a 60px target while Back owns a 44px target. Offset Back
-       by half that 16px difference so their glyphs keep the same corner centre
-       when moving between desktop screens. */
-    #back {
-      left: calc(1.5rem + 8px);
-      top: calc(var(--safe-t) + 1.1rem + 8px);
-    }
-    .m-panel, body.carding .m-panel, body.waying .m-panel, body.rooming .m-panel { left: 1.5rem; }
+    body #back, body #menu { left: 1.5rem; }
+    body .m-panel { left: 1.5rem; }
     #way-plate {
       left: 1.5rem; transform: none;
       width: min(30rem, calc(60vw - 3rem)); max-width: none;
     }
-    body.rooming #back { display: none; }
-    body.rooming #menu { display: flex; }
     #room .room-head {
       position: sticky; top: 0; z-index: 2;
       display: flex; align-items: center; gap: .75rem;
@@ -1055,6 +1056,10 @@
       width: 44px; padding: 0; justify-content: center;
     }
     #room .claim { padding-top: .75rem; }
+    /* The same control and the same inset as the room's header, so Back sits
+       in one place in the panel whichever pane is under it. */
+    #sheet-head { display: flex; flex: none; padding: 1rem 1.1rem .25rem; }
+    #sheet-back { display: flex; width: 44px; padding: 0; justify-content: center; }
 
     body.carding #sheet {
       left: 0; right: 0; top: 1.5rem; bottom: 1.5rem;
@@ -1145,7 +1150,7 @@
 <button id="back" hidden aria-label="Back to the question">
   <svg class="ico ico-mirror" aria-hidden="true"><use href="#i-back"/></svg>
 </button>
-<!-- The menu, on the two screens that have no back arrow. Enes: "the top left
+<!-- The menu, on the screens whose corner has no back arrow (chromeFor()). Enes: "the top left
      should have the 3 lines thing, and when pressed it should have choices like
      to go back or other stuff". A disclosure and not a menu ROLE: that role
      promises arrow-key navigation between the items, and announcing a keyboard
@@ -1173,6 +1178,12 @@
      plate over it. -->
 <section id="way" hidden>
   <div class="c-plate" id="way-plate">
+    <!-- The way is a step down from the card it was taken from, and its one
+         visible way back. It was Back inside the menu, under a grip only a
+         phone has. -->
+    <button type="button" id="way-back" hidden>
+      <svg class="ico ico-mirror" aria-hidden="true"><use href="#i-back"/></svg>
+    </button>
     <h2 class="c-b" id="way-name"></h2>
     <p class="c-facts" id="way-facts"></p>
   </div>
@@ -1215,6 +1226,13 @@ <h2 id="gate-h" tabindex="-1"></h2>
 
 <section id="sheet" hidden>
   <div class="handle" id="handle"><span class="grip"></span></div>
+  <!-- Back, in the panel, on a desktop: the corner keeps the menu there, and
+       the room has its own in its sticky header (chromeFor()). -->
+  <div id="sheet-head" hidden>
+    <button type="button" class="bar-btn room-back" id="sheet-back">
+      <svg class="ico ico-mirror" aria-hidden="true"><use href="#i-back"/></svg>
+    </button>
+  </div>
   <div id="origin" hidden>
     <button id="origin-where" class="bar-btn" type="button">
       <svg class="ico" aria-hidden="true"><use href="#i-pin"/></svg><span></span>