clio.css 0.1.0 → 0.2.0

package/dist/clio.platinum.css

@@ -1,4 +1,4 @@
-/*! clio.css 0.1.0 (Platinum default) | MIT | https://surfine.github.io/clio.css/
+/*! clio.css 0.2.0 (Platinum default) | MIT | https://surfine.github.io/clio.css/
  * Classic Mac OS interface CSS: System 6 and Mac OS 9 Platinum.
  * Measured values traced to AI System 6; see EVIDENCE.md.
  * Includes art from system.css (MIT) and classic-stylesheets (MIT); see THIRD-PARTY.md. */
@@ -25,7 +25,9 @@
   font-display: swap;
 }
 
-/* Tokens: Macintosh System 6 is the default era.
+/* Tokens: Macintosh System 6 is the default era. Measured values come from
+   System 6.0.8 running in Infinite Mac, read from the emulator canvas 1:1
+   (tooling/capture-system6.mjs).
    Every value below is traceable in EVIDENCE.md. A value marked [M] there was
    measured from real pixels; [I] is inferred; [A] is a deliberate web
    adaptation (contrast, focus, touch). Platinum re-declares these tokens in
@@ -47,7 +49,8 @@
   --clio-font-text: Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
   --clio-font-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
   --clio-font-size: 12px;
-  --clio-font-size-small: 10px;
+  /* Geneva 9: the Finder info line and icon names. */
+  --clio-font-size-small: 9px;
   --clio-chrome-weight: 400;
   --clio-font-stretch-text: normal;
   --clio-font-stretch-title: normal;
@@ -97,7 +100,8 @@
   --clio-shade-display: none;
   --clio-box-size: 11px;
   --clio-box-inset: 7px;
-  --clio-box-isolation: 3px;
+  /* 1px of paper between a box and the stripes (HD window, 6.0.8). */
+  --clio-box-isolation: 1px;
 
   /* Menus */
   --clio-menubar-height: 20px;
@@ -105,29 +109,35 @@
   --clio-menubar-border: 1px solid var(--clio-ink);
   --clio-menubar-shadow: none;
   --clio-menubar-padding: 0 8px;
-  --clio-menu-title-padding: 0 8px;
+  /* "File" highlight is 41px wide: about 9px each side of the word. */
+  --clio-menu-title-padding: 0 9px;
+  /* The open title's highlight leaves the bar's top row white. */
+  --clio-menu-title-inset: 1px;
   --clio-menu-title-active-bg: var(--clio-ink);
   --clio-menu-title-active-fg: var(--clio-paper);
   --clio-menu-title-active-shadow: none;
   --clio-menu-bg: var(--clio-paper);
   --clio-menu-border: 1px solid var(--clio-ink);
-  --clio-menu-border-top-width: 1px;
+  /* A menu hangs from the bar's own rule; it draws no top line. */
+  --clio-menu-border-top-width: 0;
   --clio-menu-shadow: 1px 1px 0 var(--clio-ink);
   --clio-menu-item-height: 16px;
-  --clio-menu-item-padding: 0 12px 0 16px;
+  --clio-menu-item-padding: 0 12px 0 15px;
   --clio-menu-item-weight: 400;
   --clio-menu-item-active-bg: var(--clio-ink);
   --clio-menu-item-active-fg: var(--clio-paper);
   --clio-menu-item-active-shadow: none;
+  /* A full 16px row with a 1-on 1-off dotted rule on its ninth line. */
   --clio-menu-separator:
-    repeating-linear-gradient(to right, var(--clio-ink) 0 1px, transparent 1px 2px) 0 50% / 100% 1px no-repeat;
+    repeating-linear-gradient(to right, var(--clio-ink) 0 1px, transparent 1px 2px) 0 8px / 100% 1px no-repeat;
   --clio-menu-separator-height: 16px;
 
   /* Push buttons */
   --clio-button-bg: var(--clio-paper);
   --clio-button-fg: var(--clio-ink);
   --clio-button-border: 1px solid var(--clio-ink);
-  --clio-button-radius: 7px;
+  /* 20px tall; corners turn over about 4px (alert OK button, 6.0.8). */
+  --clio-button-radius: 4px;
   --clio-button-shadow: 0 0 0 0 transparent;
   --clio-button-padding: 0 12px;
   --clio-button-min-width: 59px;
@@ -160,7 +170,8 @@
   --clio-field-bg: var(--clio-paper);
   --clio-field-border: 1px solid var(--clio-ink);
   --clio-field-shadow: none;
-  --clio-field-padding: 2px 3px;
+  /* Edit text: 1px frame, text inset 3px (Control Panel RAM cache field). */
+  --clio-field-padding: 3px;
   --clio-field-focus-shadow: none;
 
   /* Pop-up menus */
@@ -173,8 +184,10 @@
   --clio-popup-weight: 400;
 
   /* Scroll bars */
-  --clio-scrollbar-size: 16px;
-  --clio-scrollbar-track: var(--clio-art-s6-desktop) 0 0 / 2px 2px repeat, #808080;
+  /* The lane line plus 14px; the window frame is the 16th line. The lane is
+     QuickDraw's ltGray, one dot in four. */
+  --clio-scrollbar-size: 15px;
+  --clio-scrollbar-track: var(--clio-art-s6-ltgray) 0 0 / 4px 2px repeat, #ffffff;
   --clio-scrollbar-track-shadow: none;
   --clio-scrollbar-thumb-bg: var(--clio-paper);
   --clio-scrollbar-thumb-border: 1px solid var(--clio-ink);
@@ -192,17 +205,22 @@
 
   /* Dialogs */
   --clio-dialog-bg: var(--clio-paper);
-  /* [I] dBoxProc: a 1px frame, a 1px paper gap, then a 2px ink border. */
+  /* Modal frame (stop alert, 6.0.8): 1px ink, 2px paper, 2px ink; no shadow. */
   --clio-modal-border: 1px solid var(--clio-ink);
-  --clio-modal-frame: inset 0 0 0 1px var(--clio-paper), inset 0 0 0 3px var(--clio-ink);
-  --clio-modal-padding: 16px 18px;
+  --clio-modal-frame: inset 0 0 0 2px var(--clio-paper), inset 0 0 0 4px var(--clio-ink);
+  --clio-modal-padding: 18px 20px;
   --clio-plain-dialog-border: 1px solid var(--clio-ink);
   --clio-plain-dialog-shadow: 2px 2px 0 var(--clio-ink);
 
   /* Bars, lists, groups, progress, tabs */
   --clio-details-bg: var(--clio-paper);
-  /* [I] Finder's info line closes with two 1px rules. */
+  /* Finder's info line: 17 rows of Geneva 9, closed by 1px ink, 1px paper,
+     1px ink. */
   --clio-details-border: 3px double var(--clio-ink);
+  --clio-details-font-size: 9px;
+  --clio-details-height: 17px;
+  --clio-details-padding: 0 15px;
+  --clio-scrollbar-corner: var(--clio-art-s6-grow) 0 0 / 14px 14px no-repeat, var(--clio-paper);
   --clio-list-bg: var(--clio-paper);
   --clio-list-border: 1px solid var(--clio-ink);
   --clio-list-shadow: none;
@@ -235,20 +253,24 @@
   --clio-art-s6-radio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1H4zM0 4h1v4H0zM11 4h1v4h-1zM2 1h2v1H2zM8 1h2v1H8zM10 2h1v2h-1zM1 2h1v2H1zM4 11h4v1H4zM2 10h2v1H2zM8 10h2v1H8zM10 8h1v2h-1zM1 8h1v2H1z'/%3E%3C/svg%3E");
   --clio-art-s6-radio-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 1h2v2H2zM8 1h2v2H8zM9 2h2v2H9zM1 2h2v2H1zM4 10h4v2H4zM2 9h2v2H2zM8 9h2v2H8zM9 8h2v2H9zM1 8h2v2H1z'/%3E%3C/svg%3E");
   --clio-art-s6-radio-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1H1zM1 5h4v1H1zM0 1h6v4H0z'/%3E%3C/svg%3E");
-  --clio-art-s6-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,3.5 14.5,9.5 11.5,9.5 11.5,13.5 5.5,13.5 5.5,9.5 2.5,9.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-up-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,3.5 14.5,9.5 11.5,9.5 11.5,13.5 5.5,13.5 5.5,9.5 2.5,9.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,13.5 14.5,7.5 11.5,7.5 11.5,3.5 5.5,3.5 5.5,7.5 2.5,7.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8.5,13.5 14.5,7.5 11.5,7.5 11.5,3.5 5.5,3.5 5.5,7.5 2.5,7.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3.5,8.5 9.5,14.5 9.5,11.5 13.5,11.5 13.5,5.5 9.5,5.5 9.5,2.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-left-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='3.5,8.5 9.5,14.5 9.5,11.5 13.5,11.5 13.5,5.5 9.5,5.5 9.5,2.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='13.5,8.5 7.5,14.5 7.5,11.5 3.5,11.5 3.5,5.5 7.5,5.5 7.5,2.5' fill='%23fff' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
-  --clio-art-s6-right-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='13.5,8.5 7.5,14.5 7.5,11.5 3.5,11.5 3.5,5.5 7.5,5.5 7.5,2.5' fill='%23000' stroke='%23000' stroke-width='1' shape-rendering='crispEdges'/%3E%3C/svg%3E");
   --clio-art-s6-popup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11v1H0zM1 1h9v1H1zM2 2h7v1H2zM3 3h5v1H3zM4 4h3v1H4zM5 5h1v1H5z'/%3E%3C/svg%3E");
   --clio-art-s6-submenu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
   --clio-art-s6-submenu-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='11'%3E%3Cpath fill='%23fff' d='m0 0 6 5.5L0 11Z'/%3E%3C/svg%3E");
-  --clio-art-s6-menucheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M9 0h1v2H9zM8 2h1v2H8zM7 4h1v2H7zM6 5h1v2H6zM5 6h1v3H5zM4 7h1v3H4zM3 6h1v3H3zM2 5h1v2H2zM1 4h1v2H1zM0 4h1v1H0z'/%3E%3C/svg%3E");
-  --clio-art-s6-menucheck-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M9 0h1v2H9zM8 2h1v2H8zM7 4h1v2H7zM6 5h1v2H6zM5 6h1v3H5zM4 7h1v3H4zM3 6h1v3H3zM2 5h1v2H2zM1 4h1v2H1zM0 4h1v1H0z'/%3E%3C/svg%3E");
   --clio-art-s6-desktop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3Cpath fill='%23fff' d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3C/svg%3E");
+  /* Measured from System 6.0.8 (tooling/s6-art.py). */
+  --clio-art-s6-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h3v1h-3zM4 4h5v1h-5zM3 5h7v1h-7zM2 6h9v1h-9zM4 7h5v1h-5zM4 8h5v1h-5zM4 9h5v1h-5zM4 10h5v1h-5z'/%3E%3Cpath fill='%23000' d='M6 1h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM8 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM2 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM0 7h4v1h-4zM9 7h4v1h-4zM3 8h1v1h-1zM9 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM3 10h1v1h-1zM9 10h1v1h-1zM3 11h7v1h-7z'/%3E%3C/svg%3E");
+  --clio-art-s6-up-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 2h3v1h-3zM4 3h5v1h-5zM3 4h7v1h-7zM2 5h9v1h-9zM1 6h11v1h-11zM0 7h13v1h-13zM3 8h7v1h-7zM3 9h7v1h-7zM3 10h7v1h-7zM3 11h7v1h-7z'/%3E%3C/svg%3E");
+  --clio-art-s6-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M4 3h5v1h-5zM4 4h5v1h-5zM4 5h5v1h-5zM4 6h5v1h-5zM2 7h9v1h-9zM3 8h7v1h-7zM4 9h5v1h-5zM5 10h3v1h-3zM6 11h1v1h-1z'/%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM9 4h1v1h-1zM3 5h1v1h-1zM9 5h1v1h-1zM0 6h4v1h-4zM9 6h4v1h-4zM1 7h1v1h-1zM11 7h1v1h-1zM2 8h1v1h-1zM10 8h1v1h-1zM3 9h1v1h-1zM9 9h1v1h-1zM4 10h1v1h-1zM8 10h1v1h-1zM5 11h1v1h-1zM7 11h1v1h-1zM6 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-down-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 2h7v1h-7zM3 3h7v1h-7zM3 4h7v1h-7zM3 5h7v1h-7zM0 6h13v1h-13zM1 7h11v1h-11zM2 8h9v1h-9zM3 9h7v1h-7zM4 10h5v1h-5zM5 11h3v1h-3z'/%3E%3C/svg%3E");
+  --clio-art-s6-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h2v1h-2zM4 4h7v1h-7zM3 5h8v1h-8zM2 6h9v1h-9zM3 7h8v1h-8zM4 8h7v1h-7zM5 9h2v1h-2zM6 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h5v1h-5zM3 4h1v1h-1zM11 4h1v1h-1zM2 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM2 7h1v1h-1zM11 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM4 9h1v1h-1zM7 9h5v1h-5zM5 10h1v1h-1zM7 10h1v1h-1zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-left-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h3v1h-3zM4 3h8v1h-8zM3 4h9v1h-9zM2 5h10v1h-10zM2 6h10v1h-10zM2 7h10v1h-10zM3 8h9v1h-9zM4 9h8v1h-8zM5 10h3v1h-3zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 2h1v1h-1zM5 3h2v1h-2zM4 4h7v1h-7zM3 5h8v1h-8zM2 6h9v1h-9zM3 7h8v1h-8zM4 8h7v1h-7zM5 9h2v1h-2zM6 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h5v1h-5zM3 4h1v1h-1zM11 4h1v1h-1zM2 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM2 7h1v1h-1zM11 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM4 9h1v1h-1zM7 9h5v1h-5zM5 10h1v1h-1zM7 10h1v1h-1zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-right-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM6 1h2v1h-2zM5 2h3v1h-3zM4 3h8v1h-8zM3 4h9v1h-9zM2 5h10v1h-10zM2 6h10v1h-10zM2 7h10v1h-10zM3 8h9v1h-9zM4 9h8v1h-8zM5 10h3v1h-3zM6 11h2v1h-2zM7 12h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM1 5h3v1h-3zM5 5h1v1h-1zM7 5h3v1h-3zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM2 8h1v1h-1zM5 8h1v1h-1zM8 8h1v1h-1zM5 9h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-ltgray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1zM2 1h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M1 0h3v1h-3zM0 1h2v1h-2zM3 1h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-grow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M2 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM2 4h1v1h-1zM8 4h5v1h-5zM2 5h1v1h-1zM8 5h1v1h-1zM12 5h1v1h-1zM2 6h1v1h-1zM8 6h1v1h-1zM12 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM2 8h7v1h-7zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM4 10h1v1h-1zM12 10h1v1h-1zM4 11h1v1h-1zM12 11h1v1h-1zM4 12h9v1h-9z'/%3E%3C/svg%3E");
+  --clio-art-s6-menucheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-menucheck-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z'/%3E%3C/svg%3E");
 }
 
 /* Base. clio.css styles elements only inside its own components, plus bare
@@ -460,17 +482,10 @@
   justify-self: end;
 }
 
-/* Pressed close box: the starburst System 6 draws while the mouse is held. */
-.title-bar > :is(.close, .close-box)::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M1 5h3v1H1zM7 5h3v1H7zM5 1h1v3H5zM5 7h1v3H5zM2 2h1v1H2zM3 3h1v1H3zM7 7h1v1H7zM8 8h1v1H8zM8 2h1v1H8zM7 3h1v1H7zM2 8h1v1H2zM3 7h1v1H3z'/%3E%3C/svg%3E") 0 0 / 11px 11px no-repeat;
-  opacity: 0;
-}
-
-.title-bar > :is(.close, .close-box):is(:active, .active)::before {
-  opacity: 1;
+/* Held close or zoom box: System 6 draws the same starburst in both
+   (measured, 6.0.8); the zoom box's inner square goes while it is held. */
+.title-bar > :is(.close, .close-box, .resize, .resize-box, .zoom):is(:active, .active) {
+  background: var(--clio-art-s6-burst) 0 0 / 11px 11px no-repeat border-box, var(--clio-paper);
 }
 
 /* Zoom box: an inner square sharing the outer frame's top-left corner,
@@ -531,13 +546,14 @@
   flex: none;
   justify-content: space-between;
   gap: 16px;
-  padding: 2px 8px 1px;
+  min-height: var(--clio-details-height);
+  padding: var(--clio-details-padding);
   border-bottom: var(--clio-details-border);
   background: var(--clio-details-bg);
   box-shadow: var(--clio-details-shadow, none);
   font-family: var(--clio-font-text);
-  font-size: var(--clio-font-size);
-  line-height: 16px;
+  font-size: var(--clio-details-font-size);
+  line-height: var(--clio-details-height);
   white-space: nowrap;
 }
 
@@ -646,7 +662,7 @@
 /* Inside a menu bar or a parent item, a menu is a drop-down. */
 :where(.menu-bar, [role="menubar"], [role="menu-bar"], .menu, [role="menu"]) li > :is(.menu, ul[role="menu"]) {
   position: absolute;
-  top: 100%;
+  top: calc(100% + 1px);
   left: 0;
   display: none;
 }
@@ -727,10 +743,10 @@
   position: absolute;
   top: 50%;
   left: 3px;
-  width: 10px;
-  height: 10px;
-  margin-top: -5px;
-  background: var(--clio-art-s6-menucheck) 0 0 / 10px 10px no-repeat;
+  width: 9px;
+  height: 8px;
+  margin-top: -4px;
+  background: var(--clio-art-s6-menucheck) 0 0 / 9px 8px no-repeat;
 }
 
 :where(.menu, [role="menu"]) > li:is(.checked, [aria-checked="true"]):is(:hover, :focus-within, .active)::before,
@@ -1393,7 +1409,7 @@
 :where(html.clio-scrollbars)::-webkit-scrollbar-corner {
   border-top: 1px solid var(--clio-ink);
   border-left: 1px solid var(--clio-ink);
-  background: var(--clio-scrollbar-button-bg);
+  background: var(--clio-scrollbar-corner);
 }
 
 @supports not selector(::-webkit-scrollbar) {
@@ -1474,6 +1490,7 @@
   --clio-menubar-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #999999;
   --clio-menubar-padding: 0 8px;
   --clio-menu-title-padding: 0 10px;
+  --clio-menu-title-inset: 0px;
   --clio-menu-title-active-bg: #333399;
   --clio-menu-title-active-fg: #ffffff;
   --clio-menu-title-active-shadow: inset 0 1px 0 #6666cc, inset 0 -1px 0 #000088;
@@ -1583,6 +1600,10 @@
   --clio-details-bg: #dddddd;
   --clio-details-border: 1px solid #000000;
   --clio-details-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #aaaaaa;
+  --clio-details-font-size: 12px;
+  --clio-details-height: 20px;
+  --clio-details-padding: 0 8px;
+  --clio-scrollbar-corner: #dddddd;
   --clio-list-bg: #ffffff;
   --clio-list-border: 1px solid #000000;
   --clio-list-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff;
@@ -1697,10 +1718,6 @@
   box-shadow: -1px -1px 0 #888888, 1px 1px 0 #ffffff, inset -1px -1px 0 #999999;
 }
 
-:root .title-bar > :is(.close, .close-box)::before {
-  display: none;
-}
-
 /* Zoom: a six-pixel lower-left corner inside the frame. */
 :root .title-bar > :is(.resize, .resize-box, .zoom)::before {
   top: 0;