Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/components/ModalShell.module.css

@@ -20,6 +20,9 @@
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
   box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
+  /* Modal chrome sits on --layer-01, so ghost/secondary controls in the header
+     step their hover fill up (arch 09 §4). The body resets to --bg below. */
+  --control-hover-fill: var(--layer-02);
 }
 
 /* Large: the two-pane managers (Datasets). Definite height so inner panes scroll. */
@@ -66,32 +69,7 @@
   outline: none;
 }
 
-.close {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  font-size: 22px;
-  line-height: 1;
-  cursor: pointer;
-  border-radius: var(--radius);
-  transition: background var(--dur-fast) var(--ease);
-}
-
-.close:hover {
-  background: var(--layer-02);
-  color: var(--text);
-}
-
-.close:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: 2px;
-}
+/* The close affordance is the shared IconButton. */
 
 /* The modal body. Background steps to --bg so the panes read as the work surface
    against the --layer-01 chrome. Fills the remaining height; inner content scrolls. */
@@ -100,4 +78,5 @@
   min-height: 0;
   overflow: auto;
   background: var(--bg);
+  --control-hover-fill: var(--layer-01);
 }