clio.css 0.2.0 → 0.9.0

package/dist/clio.system6.css

@@ -1,12 +1,227 @@
-/*! clio.css 0.2.0 (System 6 only) | MIT | https://surfine.github.io/clio.css/
- * Classic Mac OS interface CSS: System 6 and Mac OS 9 Platinum.
+/*! clio.css 0.9.0 (System 6 only) | MIT | https://surfine.github.io/clio.css/
+ * Classic Mac OS interface CSS: System 6, System 7, Mac OS 8.5 Drawing Board 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. */
-/* Fonts. Only two faces ship, both with a licence that allows it:
+ * Includes art from system.css (MIT) and pixel reconstructions of Apple control art; see THIRD-PARTY.md. */
+/* Clio Sans '84: Chicago 12 rebuilt pixel for pixel from System 6.0.8
+   (fonts-src/clio-sans-84.txt). Every pixel is a square on a 1200-unit em, so
+   at 12px and its multiples it draws exactly the original bitmap. */
+@font-face {
+  font-family: "Clio Sans '84";
+  src: url("fonts/ClioSans84.woff2") format("woff2");
+  font-display: swap;
+}
+
+/* Clio Text '84: Geneva 12, and Clio Text '84 9: Geneva 9, rebuilt the same
+   way (fonts-src/clio-text-84*.txt). */
+@font-face {
+  font-family: "Clio Text '84";
+  src: url("fonts/ClioText84.woff2") format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Text '84 9";
+  src: url("fonts/ClioText84-9.woff2") format("woff2");
+  font-display: swap;
+}
+
+/* Clio Sans '97: Charcoal 12 rebuilt the same way from Mac OS 9.0's Key Caps
+   (fonts-src/clio-sans-97.txt). Charcoal has one weight, so the face covers
+   every weight and the browser never thickens it. */
+@font-face {
+  font-family: "Clio Sans '97";
+  src: url("fonts/ClioSans97.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Clio Sans '97 Title: the same face as window titles draw it (a few faint
+   pixels fewer than menus and buttons), for title bars only. */
+@font-face {
+  font-family: "Clio Sans '97 Title";
+  src: url("fonts/ClioSans97Title.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Clio Sans '97 Exact and Clio Sans '97 Title Exact: the same glyphs with
+   each antialiasing level painted from a palette entry, so the palettes below
+   give, for clio.css's own title and button colours, the very pixels Mac OS
+   blends ((fg * a + bg * (255 - a)) >> 8). They ignore the text colour: a
+   page that recolours a title or a button label also sets --clio-font-window-title
+   or --clio-font-button back to a stack without "Exact", and gets Clio Sans
+   '97 in its colour, within one level of the real screen. */
+@font-face {
+  font-family: "Clio Sans '97 Exact";
+  src: url("fonts/ClioSans97Exact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clio Sans '97 Title Exact";
+  src: url("fonts/ClioSans97TitleExact.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Written by tooling/aa-palettes.py. */
+@font-palette-values --clio-aa-p9-title {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #bebebe,
+    1 #b0b0b0,
+    2 #a2a2a2,
+    3 #959595,
+    4 #878787,
+    5 #7a7a7a,
+    6 #6c6c6c,
+    7 #5f5f5f,
+    8 #515151,
+    9 #444444,
+    10 #363636,
+    11 #282828,
+    12 #1b1b1b,
+    13 #0d0d0d,
+    14 #000000;
+}
+
+@font-palette-values --clio-aa-p9-title-inactive {
+  font-family: "Clio Sans '97 Title Exact";
+  override-colors:
+    0 #c5c5c5,
+    1 #bfbfbf,
+    2 #bababa,
+    3 #b4b4b4,
+    4 #aeaeae,
+    5 #a9a9a9,
+    6 #a3a3a3,
+    7 #9e9e9e,
+    8 #989898,
+    9 #929292,
+    10 #8d8d8d,
+    11 #878787,
+    12 #818181,
+    13 #7c7c7c,
+    14 #777777;
+}
+
+@font-palette-values --clio-aa-p9-button {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #cecece,
+    1 #bfbfbf,
+    2 #b0b0b0,
+    3 #a2a2a2,
+    4 #939393,
+    5 #848484,
+    6 #757575,
+    7 #676767,
+    8 #585858,
+    9 #494949,
+    10 #3a3a3a,
+    11 #2c2c2c,
+    12 #1d1d1d,
+    13 #0e0e0e,
+    14 #000000;
+}
+
+@font-palette-values --clio-aa-p9-button-held {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #707070,
+    1 #7a7a7a,
+    2 #848484,
+    3 #8e8e8e,
+    4 #999999,
+    5 #a3a3a3,
+    6 #adadad,
+    7 #b7b7b7,
+    8 #c1c1c1,
+    9 #cbcbcb,
+    10 #d6d6d6,
+    11 #e0e0e0,
+    12 #eaeaea,
+    13 #f4f4f4,
+    14 #ffffff;
+}
+
+@font-palette-values --clio-aa-p9-button-disabled {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #d5d5d5,
+    1 #cecece,
+    2 #c7c7c7,
+    3 #c1c1c1,
+    4 #bababa,
+    5 #b3b3b3,
+    6 #acacac,
+    7 #a5a5a5,
+    8 #9f9f9f,
+    9 #989898,
+    10 #919191,
+    11 #8a8a8a,
+    12 #848484,
+    13 #7d7d7d,
+    14 #777777;
+}
+
+@font-palette-values --clio-aa-db-button {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #c3bcac,
+    1 #b9b2a3,
+    2 #aea89a,
+    3 #a49e91,
+    4 #999488,
+    5 #8f8a80,
+    6 #848077,
+    7 #7a766e,
+    8 #6f6c65,
+    9 #65625d,
+    10 #5a5854,
+    11 #504e4b,
+    12 #454442,
+    13 #3b3a39,
+    14 #313131;
+}
+
+@font-palette-values --clio-aa-db-button-disabled {
+  font-family: "Clio Sans '97 Exact";
+  override-colors:
+    0 #cac2b2,
+    1 #c6bfaf,
+    2 #c3bcad,
+    3 #c0b9ab,
+    4 #bdb6a9,
+    5 #bab3a7,
+    6 #b7b0a4,
+    7 #b4ada2,
+    8 #b1aaa0,
+    9 #ada89e,
+    10 #aaa59c,
+    11 #a7a299,
+    12 #a49f97,
+    13 #a19c95,
+    14 #9c9c94;
+}
+
+/* Clio Sans '97 Display: Charcoal's outlines, traced from Mac OS 9.0 drawing it
+   at 72 points (fonts/ClioSans97Display.woff2, tooling/trace-outline.py), for
+   every size that is not 12px or a multiple of it. */
+@font-face {
+  font-family: "Clio Sans '97 Display";
+  src: url("fonts/ClioSans97Display.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Other fonts, each with a licence that allows it:
    - ChicagoFLF: a public-domain outline revival of Chicago (Robin Casady).
    - Asap (variable, wdth + wght): SIL OFL 1.1, Omnibus-Type. The legal
      stand-in for Charcoal that AI System 6 measured its Platinum title bar
-     against (width axis 113 for text, 123 for titles).
+     against (width axis 113 for text, 123 for titles); now the fallback
+     behind Clio Sans '97.
    Apple's own faces (Chicago, Geneva, Charcoal, Monaco) are never shipped;
    the stacks below reach them only when the visitor already has them. */
 @font-face {
@@ -41,14 +256,28 @@
   /* [A] Disabled text: System 6 drew it through a 50% grey pattern; a solid
      grey keeps 5.6:1 on white instead of a dither the browser would blur. */
   --clio-disabled: #696969;
+  /* Dimmed text is drawn through QuickDraw's 50% gray pattern, aligned to the
+     screen: the ink where x + y is odd survives (measured, File menu). The
+     pattern is fixed to the viewport the same way; #696969 is only the
+     fallback colour where background-clip: text is missing. */
+  --clio-disabled-dither: var(--clio-art-s6-gray50);
+  --clio-disabled-fill: transparent;
   --clio-selection-bg: #000000;
   --clio-selection-fg: #ffffff;
 
   /* Type. Chicago 12 is the system font; Geneva is the application font. */
-  --clio-font-chrome: Chicago, "ChicagoFLF", Charcoal, Geneva, "Helvetica Neue", Arial, sans-serif;
-  --clio-font-text: Geneva, "Clio Asap", "Helvetica Neue", Arial, sans-serif;
+  --clio-font-chrome: "Clio Sans '84", Chicago, "ChicagoFLF", Charcoal, Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-font-text: "Clio Text '84", Geneva, "Helvetica Neue", Arial, sans-serif;
+  /* Geneva 9: the Finder info line, icon names, status lines. */
+  --clio-font-small: "Clio Text '84 9", Geneva, "Helvetica Neue", Arial, sans-serif;
+  --clio-text-smoothing: none;
   --clio-font-mono: Monaco, Menlo, Consolas, "Courier New", monospace;
+  /* Chrome type at sizes other than 12px and its multiples (.display): an
+     outline face, smoothed. */
+  --clio-font-display: Chicago, "ChicagoFLF", Charcoal, "Helvetica Neue", Arial, sans-serif;
   --clio-font-size: 12px;
+  /* A bitmap face: no antialiasing, so a glyph on a half pixel stays 1-bit. */
+  --clio-font-smoothing: none;
   /* Geneva 9: the Finder info line and icon names. */
   --clio-font-size-small: 9px;
   --clio-chrome-weight: 400;
@@ -122,7 +351,7 @@
   --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 15px;
+  --clio-menu-item-padding: 0 12px 0 13px;
   --clio-menu-item-weight: 400;
   --clio-menu-item-active-bg: var(--clio-ink);
   --clio-menu-item-active-fg: var(--clio-paper);
@@ -136,18 +365,30 @@
   --clio-button-bg: var(--clio-paper);
   --clio-button-fg: var(--clio-ink);
   --clio-button-border: 1px solid var(--clio-ink);
-  /* 20px tall; corners turn over about 4px (alert OK button, 6.0.8). */
-  --clio-button-radius: 4px;
+  /* 20px tall; the corner steps in 3, 1, 1 pixels on its first three rows
+     (OK and Cancel, 6.0.8), which a 4.5px radius reproduces exactly. */
+  /* The frame and the default ring are the real pixel staircases, cut from
+     System 6.0.8's Alert and Save dialog (tooling/frame-art.py) and drawn with
+     border-image; border-radius would antialias an arc. */
+  --clio-button-radius: 0;
+  --clio-button-frame: var(--clio-art-frame-s6-button);
+  --clio-button-frame-held: var(--clio-art-frame-s6-button-held);
+  --clio-button-frame-slice: 4;
+  --clio-ring-frame: var(--clio-art-frame-s6-ring);
+  --clio-ring-frame-slice: 7;
+  --clio-popup-frame: none;
+  --clio-popup-frame-slice: 3;
   --clio-button-shadow: 0 0 0 0 transparent;
   --clio-button-padding: 0 12px;
   --clio-button-min-width: 59px;
   --clio-button-weight: 400;
-  --clio-button-active-bg: var(--clio-ink);
+  --clio-button-active-bg: transparent;   /* the held frame carries the ink face */
   --clio-button-active-fg: var(--clio-paper);
   --clio-button-active-shadow: 0 0 0 0 transparent;
   /* Default button: Inside Macintosh's recipe is PenSize(3,3) around the
      button inset by -4, so a 1px gap then a 3px ring. */
-  --clio-button-default-ring: 0 0 0 1px var(--clio-paper), 0 0 0 4px var(--clio-ink);
+  --clio-button-default-gap: 1px;
+  --clio-button-default-width: 3px;
   --clio-button-default-radius: 8px;
   --clio-button-disabled-fg: var(--clio-disabled);
   --clio-button-disabled-border: 1px solid var(--clio-ink);
@@ -179,8 +420,11 @@
   --clio-popup-border: 1px solid var(--clio-ink);
   --clio-popup-radius: 0;
   --clio-popup-shadow: 1px 1px 0 var(--clio-ink);
-  --clio-popup-padding: 0 24px 0 6px;
-  --clio-popup-arrow: var(--clio-art-s6-popup) right 6px center / 11px 6px no-repeat;
+  /* System 6 pop-up (Standard File folder menu, 6.0.8): an 18px box, 1px
+     frame, 1px shadow, no arrow; held, it inverts. */
+  --clio-popup-height: 18px;
+  --clio-popup-padding: 0 8px;
+  --clio-popup-arrow: none;
   --clio-popup-weight: 400;
 
   /* Scroll bars */
@@ -232,7 +476,8 @@
   --clio-progress-bg: var(--clio-paper);
   --clio-progress-border: 1px solid var(--clio-ink);
   --clio-progress-shadow: none;
-  --clio-progress-fill: var(--clio-ink);
+  /* Finder copy progress (6.0.8): 12px, 1px frame, dkGray fill. */
+  --clio-progress-fill: var(--clio-art-s6-dkgray) 0 0 / 4px 2px repeat, var(--clio-ink);
   --clio-tab-height: 20px;
   --clio-tab-bg: var(--clio-paper);
   --clio-tab-active-bg: var(--clio-paper);
@@ -242,6 +487,31 @@
   --clio-label-fg: var(--clio-ink);
   --clio-label-selected-bg: var(--clio-ink);
   --clio-label-selected-fg: var(--clio-paper);
+
+  /* Control Strip: System 6 had none; drawn here in its ink and paper, at the
+     Mac OS 9 geometry (adapted). */
+  --clio-strip-height: 24px;
+  --clio-strip-bg: var(--clio-paper);
+  --clio-strip-line: 1px solid var(--clio-ink);
+  --clio-strip-cell-shadow: none;
+  --clio-strip-sunken-shadow: none;
+  --clio-strip-sunken-lines: linear-gradient(transparent, transparent);
+  --clio-strip-pressed-bg: var(--clio-ink);
+  --clio-strip-pressed-shadow: inset 0 0 0 2px var(--clio-paper);
+  --clio-strip-cap-width: 13px;
+  --clio-strip-scroll-width: 13px;
+  --clio-strip-module-width: 30px;
+  --clio-strip-icon-inset: 2px;
+  --clio-strip-menu-top: 7px;
+  --clio-strip-menu-inset: 4px;
+  --clio-strip-handle-width: 18px;
+  --clio-strip-tab-width: 18px;
+  --clio-strip-cap: var(--clio-art-s6-strip-cap);
+  --clio-strip-back: var(--clio-art-s6-strip-back);
+  --clio-strip-forward: var(--clio-art-s6-strip-forward);
+  --clio-strip-menu: var(--clio-art-s6-strip-menu);
+  --clio-strip-handle: var(--clio-art-s6-strip-handle);
+  --clio-strip-tab: var(--clio-art-s6-strip-tab);
 }
 
 /* Inline art. Pixel-grid SVGs, never Apple bitmaps: the System 6 check, radio
@@ -253,7 +523,6 @@
   --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-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-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");
@@ -262,15 +531,33 @@
   --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-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='M5 2h1v1h-1zM4 3h2v1h-2zM3 4h7v1h-7zM2 5h8v1h-8zM1 6h9v1h-9zM2 7h8v1h-8zM3 8h7v1h-7zM4 9h2v1h-2zM5 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M6 0h1v1h-1zM5 1h2v1h-2zM4 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM6 3h5v1h-5zM2 4h1v1h-1zM10 4h1v1h-1zM1 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM10 7h1v1h-1zM2 8h1v1h-1zM10 8h1v1h-1zM3 9h1v1h-1zM6 9h5v1h-5zM4 10h1v1h-1zM6 10h1v1h-1zM5 11h2v1h-2zM6 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='M6 0h1v1h-1zM5 1h2v1h-2zM4 2h3v1h-3zM3 3h8v1h-8zM2 4h9v1h-9zM1 5h10v1h-10zM1 6h10v1h-10zM1 7h10v1h-10zM2 8h9v1h-9zM3 9h8v1h-8zM4 10h3v1h-3zM5 11h2v1h-2zM6 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='M8 2h1v1h-1zM8 3h2v1h-2zM4 4h7v1h-7zM4 5h8v1h-8zM4 6h9v1h-9zM4 7h8v1h-8zM4 8h7v1h-7zM8 9h2v1h-2zM8 10h1v1h-1z'/%3E%3Cpath fill='%23000' d='M7 0h1v1h-1zM7 1h2v1h-2zM7 2h1v1h-1zM9 2h1v1h-1zM3 3h5v1h-5zM10 3h1v1h-1zM3 4h1v1h-1zM11 4h1v1h-1zM3 5h1v1h-1zM12 5h1v1h-1zM3 6h1v1h-1zM13 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM11 8h1v1h-1zM3 9h5v1h-5zM10 9h1v1h-1zM7 10h1v1h-1zM9 10h1v1h-1zM7 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-1zM7 1h2v1h-2zM7 2h3v1h-3zM3 3h8v1h-8zM3 4h9v1h-9zM3 5h10v1h-10zM3 6h10v1h-10zM3 7h10v1h-10zM3 8h9v1h-9zM3 9h8v1h-8zM7 10h3v1h-3zM7 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-dkgray: 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 0h2v1h-2zM0 1h3v1h-3z'/%3E%3Cpath fill='%23fff' d='M1 0h1v1h-1zM3 1h1v1h-1z'/%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");
+  /* Frames cut from captures by tooling/frame-art.py. */
+  --clio-art-frame-s6-button: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEUAAAAAAAD///+D3c/SAAAAAXRSTlMAQObYZgAAACpJREFUeJxjYAxgYBINZWBiYWFgCmB0YGJgYABhBqmVDEx//jAwMAYwAAA66QRtNyAoFwAAAABJRU5ErkJggg==");
+  --clio-art-frame-s6-button-held: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB1JREFUeJxjkGFgSmZgYmBg/N/IxABiMNSDSRkGACm1Aqb7EOVpAAAAAElFTkSuQmCC");
+  --clio-art-frame-s6-ring: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPAQMAAAABGAcJAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAADRJREFUeJxjYD/AIP+BSYGDsYaB5csahg9yTB8+MDEwgJCAAFPDPyaeBAb7H0wPfjCwHwAAEpMM/gNXK+MAAAAASUVORK5CYII=");
+  --clio-art-frame-p9-button: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAGFBMVEUAAAAAAAB3d3fd3d27u7uqqqoiIiL///+EaqngAAAAAXRSTlMAQObYZgAAADxJREFUeJxjYEgUTGBgYnyk9JCBMUWYYa8O03qGPXIbmBj+MDAwMIERY8pFhbN2jIyOD/7fZ/ov/96eAQBghg8JraaOFgAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-button-held: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJBAMAAAASvxsjAAAAGFBMVEUAAAAAAAB3d3dVVVVmZmYiIiKIiIhEREQ39d/AAAAAAXRSTlMAQObYZgAAAD9JREFUeJxjYAgUDGBgYVRT+8XAGC5zgJ+PUVxG8NErJgZGBgYGJgaGfwwMLA6vH7i8YmRUdfg9n+m/9ur3DAAxwg5nPuolSwAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-ring: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANBAMAAACAxflPAAAAG1BMVEUAAAAAAAB3d3fd3d3MzMy7u7uqqqoiIiKIiIhznn7oAAAAAXRSTlMAQObYZgAAAFpJREFUeJxjZGDnYmB7ycDCwKPAwPjzAwujgjEDg+x6xuLDrx6oOXEwCCcxMDAlCTAx/GMAISYGCEDQTGAOUyKLAoOKQgIjY6gAA9PO+4wMElwMDO8+MELNBwCaGBDQEM8mggAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-button-disabled: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEUAAACIiIjd3d2RXqmqAAAAAXRSTlMAQObYZgAAACFJREFUeJxjYA1hYBINZWAKYHRgYmBgQMYMUisZGFhDGAAtsQJ9dgAT/gAAAABJRU5ErkJggg==");
+  --clio-art-frame-p9-popup: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAGFBMVEUAAAAAAAB3d3fd3d27u7uqqqoiIiL///+EaqngAAAAAXRSTlMAQObYZgAAACtJREFUeJxjYEhMYGBi5H/IwJh+klWbQYCBQYAl/OQnOwbGAEUGpv+C9gwAea0HTcaLsPwAAAAASUVORK5CYII=");
+  --clio-art-frame-p9-popup-disabled: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAgMAAAC5PL9AAAAACVBMVEUAAACIiIjd3d2RXqmqAAAAAXRSTlMAQObYZgAAAB1JREFUeJxjZLVmEg5gChBhcGBh0ljAtOENI6s1ACDmA/qjrWTUAAAAAElFTkSuQmCC");
+  --clio-art-s6-gray50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1H1zM0 1h1v1H0z'/%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");
+  --clio-art-s6-strip-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 1h13v22H1z'/%3E%3Cpath d='M0 0h15v1H0zM0 23h15v1H0zM0 1h1v22H0zM14 1h1v22h-1zM3 8h8v1H3zM3 15h8v1H3zM3 9h1v6H3zM10 9h1v6h-1z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M4 1h1v8H4zM3 2h1v6H3zM2 3h1v4H2zM1 4h1v2H1z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v8H5zM6 2h1v6H6zM7 3h1v4H7zM8 4h1v2H8z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-handle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 1h9l8 8v6l-8 8H0z'/%3E%3Cpath d='M0 0h10v1H0zM10 1h1v1h-1zM11 2h1v1h-1zM12 3h1v1h-1zM13 4h1v1h-1zM14 5h1v1h-1zM15 6h1v1h-1zM16 7h1v1h-1zM17 8h1v8h-1zM16 16h1v1h-1zM15 17h1v1h-1zM14 18h1v1h-1zM13 19h1v1h-1zM12 20h1v1h-1zM11 21h1v1h-1zM10 22h1v1h-1zM0 23h10v1H0zM5 6h1v1H5zM5 9h1v1H5zM5 12h1v1H5zM5 15h1v1H5zM5 18h1v1H5z'/%3E%3C/svg%3E");
+  --clio-art-s6-strip-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 1h9l8 8v6l-8 8H0z'/%3E%3Cpath d='M0 0h10v1H0zM10 1h1v1h-1zM11 2h1v1h-1zM12 3h1v1h-1zM13 4h1v1h-1zM14 5h1v1h-1zM15 6h1v1h-1zM16 7h1v1h-1zM17 8h1v8h-1zM16 16h1v1h-1zM15 17h1v1h-1zM14 18h1v1h-1zM13 19h1v1h-1zM12 20h1v1h-1zM11 21h1v1h-1zM10 22h1v1h-1zM0 23h10v1H0zM5 6h1v1H5zM5 9h1v1H5zM5 12h1v1H5zM5 15h1v1H5zM5 18h1v1H5z'/%3E%3C/svg%3E");
 }
 
 /* Base. clio.css styles elements only inside its own components, plus bare
@@ -294,7 +581,7 @@
   font-stretch: var(--clio-font-stretch-text);
   font-synthesis: none;
   line-height: 16px;
-  -webkit-font-smoothing: auto;
+  -webkit-font-smoothing: var(--clio-font-smoothing);
 }
 
 :where(.window, .modal-dialog, .alert-box, .standard-dialog, .modeless-dialog, .clio) *,
@@ -304,9 +591,10 @@
 }
 
 /* Application text (Geneva role) for content areas. */
-:where(.window-pane, .modal-contents, .alert-contents, .text) {
+:where(.window-pane, .modal-contents, .alert-contents, .text, .details-bar, .listbox, [role="listbox"], .status-bar, .icon, input, textarea) {
   font-family: var(--clio-font-text);
   font-stretch: var(--clio-font-stretch-text);
+  -webkit-font-smoothing: var(--clio-text-smoothing);
 }
 
 :where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(h1, h2, h3, h4, .heading) {
@@ -317,6 +605,11 @@
   line-height: 16px;
 }
 
+:where(.display) {
+  font-family: var(--clio-font-display);
+  -webkit-font-smoothing: auto;
+}
+
 :where(.window, .modal-dialog, .alert-box, .standard-dialog, .clio) :where(p) {
   margin: 0 0 8px;
 }
@@ -431,7 +724,7 @@
   overflow: hidden;
   background: var(--clio-title-bg);
   color: var(--clio-title-fg);
-  font-family: var(--clio-font-chrome);
+  font-family: var(--clio-font-window-title, var(--clio-font-chrome));
   font-size: var(--clio-title-font-size);
   font-stretch: var(--clio-font-stretch-title);
   font-weight: var(--clio-chrome-weight);
@@ -551,7 +844,7 @@
   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-family: var(--clio-font-small);
   font-size: var(--clio-details-font-size);
   line-height: var(--clio-details-height);
   white-space: nowrap;
@@ -570,7 +863,7 @@
   padding: 1px 8px;
   border-top: var(--clio-border);
   background: var(--clio-details-bg);
-  font-family: var(--clio-font-text);
+  font-family: var(--clio-font-small);
   font-size: var(--clio-font-size-small);
   line-height: 14px;
 }
@@ -727,6 +1020,12 @@
 :where(.menu, [role="menu"]) > li:is(.disabled, [aria-disabled="true"]),
 :where(.menu, [role="menu"]) > li > :is(a, button):is(:disabled, [aria-disabled="true"]) {
   color: var(--clio-disabled);
+  background-image: var(--clio-disabled-dither);
+  background-size: 2px 2px;
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
 }
 
 /* Keyboard shortcut column, right-aligned. */
@@ -806,11 +1105,13 @@
   border-radius: var(--clio-button-radius);
   background: var(--clio-button-bg);
   box-shadow: var(--clio-button-shadow);
+  border-image: var(--clio-button-frame) var(--clio-button-frame-slice) fill / calc(var(--clio-button-frame-slice) * 1px) stretch;
   color: var(--clio-button-fg);
   font-family: var(--clio-font-chrome);
   font-size: var(--clio-font-size);
   font-stretch: var(--clio-font-stretch-text);
   font-weight: var(--clio-button-weight);
+  -webkit-font-smoothing: var(--clio-font-smoothing);
   line-height: 14px;
   text-align: center;
   text-decoration: none;
@@ -825,22 +1126,41 @@
 :where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):not(:disabled, .disabled):is(:active, .active) {
   background: var(--clio-button-active-bg);
   box-shadow: var(--clio-button-active-shadow);
+  border-image-source: var(--clio-button-frame-held);
   color: var(--clio-button-active-fg);
 }
 
-/* Default button: the ring that says Return will press it. */
+/* Default button: the ring that says Return will press it. Drawn as its own
+   rounded rectangle (Inside Macintosh: PenSize(3,3), InsetRect(-4,-4),
+   FrameRoundRect(16,16)), so its corners do not follow the button's. */
 :where(.default, .btn-default, button[type="submit"].default) {
+  position: relative;
   border-radius: var(--clio-button-radius);
-  box-shadow: var(--clio-button-shadow), var(--clio-button-default-ring);
 }
 
-:where(.default, .btn-default):not(:disabled, .disabled):is(:active, .active) {
-  box-shadow: var(--clio-button-active-shadow), var(--clio-button-default-ring);
+:where(.default, .btn-default)::before {
+  content: "";
+  position: absolute;
+  inset: calc(-1px - var(--clio-button-default-gap) - var(--clio-button-default-width));
+  border: var(--clio-button-default-width) solid var(--clio-ink);
+  border-radius: var(--clio-button-default-radius);
+  border-image: var(--clio-ring-frame) var(--clio-ring-frame-slice) / calc(var(--clio-ring-frame-slice) * 1px) stretch;
+  pointer-events: none;
 }
 
 :where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):is(:disabled, .disabled) {
   border: var(--clio-button-disabled-border);
   color: var(--clio-button-disabled-fg);
+  /* System 6: the label through the 50% pattern, the frame left solid. */
+  background-image: var(--clio-disabled-dither), linear-gradient(var(--clio-button-bg), var(--clio-button-bg));
+  background-size: 2px 2px, auto;
+  background-attachment: fixed, scroll;
+  -webkit-background-clip: text, border-box;
+  background-clip: text, border-box;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
+  /* The frame without its face, so the dimmed label shows through. */
+  border-image-source: var(--clio-button-frame-disabled, var(--clio-button-frame));
+  border-image-slice: var(--clio-button-frame-slice);
 }
 
 :where(button, .btn, .btn-default, .standard-button, input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
@@ -936,6 +1256,12 @@
 :where(input[type="checkbox"], input[type="radio"]):disabled + label,
 :where(label):has(> :is(input[type="checkbox"], input[type="radio"]):disabled) {
   color: var(--clio-disabled);
+  background-image: var(--clio-disabled-dither);
+  background-size: 2px 2px;
+  background-attachment: fixed;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--clio-disabled-fill);
 }
 
 /* ---- Text fields ---------------------------------------------------------- */
@@ -988,18 +1314,20 @@
 /* ---- Pop-up menus (select) ------------------------------------------------ */
 :where(select) {
   box-sizing: border-box;
-  min-height: var(--clio-control-height);
+  min-height: var(--clio-popup-height, var(--clio-control-height));
   margin: 0;
   padding: var(--clio-popup-padding);
   border: var(--clio-popup-border);
   border-radius: var(--clio-popup-radius);
   background: var(--clio-popup-arrow), var(--clio-popup-bg);
   box-shadow: var(--clio-popup-shadow);
+  border-image: var(--clio-popup-frame) var(--clio-popup-frame-slice) / calc(var(--clio-popup-frame-slice) * 1px) stretch;
   color: var(--clio-ink);
   font-family: var(--clio-font-chrome);
   font-size: var(--clio-font-size);
   font-stretch: var(--clio-font-stretch-text);
   font-weight: var(--clio-popup-weight);
+  -webkit-font-smoothing: var(--clio-font-smoothing);
   line-height: 16px;
   appearance: none;
   -webkit-appearance: none;
@@ -1174,7 +1502,7 @@
   background: none;
   box-shadow: none;
   color: var(--clio-ink);
-  font-family: var(--clio-font-text);
+  font-family: var(--clio-font-small);
   font-size: var(--clio-font-size-small);
   text-align: center;
   cursor: default;
@@ -1280,7 +1608,7 @@
   border-radius: 6px;
   background: var(--clio-paper);
   color: var(--clio-ink);
-  font: 700 22px/28px var(--clio-font-chrome);
+  font: 700 22px/28px var(--clio-font-display);
   text-align: center;
 }
 
@@ -1418,6 +1746,189 @@
   }
 }
 
+/* Control Strip (System 7.5 to Mac OS 9): a row of module buttons with scroll
+   arrows and a tab that folds the strip away. Markup follows AI System 6:
+   .control-strip > button.control-strip-scroll.control-strip-scroll-back,
+   .control-strip-modules[role=toolbar] > .control-strip-module-track >
+   button.control-strip-module (an icon inside; aria-haspopup="menu" draws the
+   menu triangle), button.control-strip-scroll.control-strip-scroll-forward,
+   button.control-strip-handle. Add .is-collapsed to fold it to the tab, and
+   data-edge="right" for a strip on the right edge. Placement is yours
+   (AI System 6 fixes it to the screen's lower left). */
+/* The strip's art is the same in System 7.5.3, Mac OS 8.5 and Mac OS 9.0
+   (compared pixel for pixel with the backdrop removed); only the cell colours
+   differ, so it lives here for every era. Redrawn by tooling/p9-art.py. */
+:root {
+  --clio-art-p9-strip-cap: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYBAMAAADXK7paAAAAHlBMVEUAAAAAAABERERVVVWAgICIiIigoKDAwMDMzP/////+VYXkAAAAAXRSTlMAQObYZgAAAGlJREFUeJxjFGQAg/8sbAlgxkwWBiUQfZuBheHfAwYGhg8MTBAlDPgYLAx/9jAwsOgysDAwhDIw/L8LYvy98NcVry4mBoa/Zy+AtTOwlzP8AzFY3r0jYBfC0l/3P4AZjILMBiD6DCPMOwBKOxgiile5lQAAAABJRU5ErkJggg==");
+  --clio-art-s7-strip-cap: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYBAMAAADXK7paAAAAG1BMVEUAAAAAAABERERVVVWIiIiqqqrMzMzMzP/////JRvoVAAAAAXRSTlMAQObYZgAAAGVJREFUeJxjFGQAg/8srAFgxioWBiUQfYeBheHfAwYGhg8MTBAlDPgYLAx/zzIwMMsxsDAwuDAw/L8HYvy98M+FgC6Gf/egDLY0hn8gBvO7dwTsQmj/ff8DmMEoyGwAos8wwrwDAP+1F0dci98qAAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-back: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAACVBMVEUAAABVVVXd3d2apXz3AAAAAXRSTlMAQObYZgAAACxJREFUeJwFwaERwCAABLD0j3oE7IPBs/8KrcBjSKhiKM/cebs0gvzkfFioLlg9BPcTGNP4AAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-forward: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAgMAAADwXCcuAAAACVBMVEUAAABVVVXd3d2apXz3AAAAAXRSTlMAQObYZgAAAC1JREFUeJwFwSESABAUQMHnzegC9/nFqRX3IegCuxBIwVYxdySFgLzpHbg2cvhWkAdTrBZiqwAAAABJRU5ErkJggg==");
+  --clio-art-p9-strip-menu: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHAQMAAAAVq36TAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABZJREFUeJxjaGA4wPCA4QMTA9MHpgcAIQYE58W2/JQAAAAASUVORK5CYII=");
+  --clio-art-p9-strip-handle: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYBAMAAAAFe7ACAAAAFVBMVEUAAAAAAABERERVVVWIiIjMzMz///8V67gPAAAAAXRSTlMAQObYZgAAAINJREFUeJxVz7ENAjEMheE/IbQokRiAUVJQUjAs5RXZhJvgkp6LjGwfBU309PzFkkMBZAApVVgAIqWUZ9bORsE6fWvWJCukoIlbtjICG0sK5iLnVrM7Hqefsy3qPKnzZM6n/+41D/epbbi772IOaOPYsIv/sIrEG6YA4XqB3vWO2UErvmVcJ4BylohjAAAAAElFTkSuQmCC");
+  --clio-art-p9-strip-tab: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYBAMAAAAFe7ACAAAAFVBMVEUAAAAAAABERERVVVWIiIjMzMz///8V67gPAAAAAXRSTlMAQObYZgAAAIFJREFUeJxVz7ENAjEMQNHvKPS+DRiBEVJQMi49WeAkRrgJSHoijOyEgipf1pPlyAbQgMwVxqN7iYIACVprRaMUskS9gKJeSWKYADtGLRruzC3Lcqd6WW7uw45V7ma5m/Xv3uW53H3YdLnU7g4YFg9Q+6phfv2nw95BNlGsRf1++QW6eCj9rQPMHAAAAABJRU5ErkJggg==");
+}
+
+:where(.control-strip) {
+  display: inline-flex;
+  align-items: stretch;
+  height: var(--clio-strip-height);
+  max-width: 100%;
+  vertical-align: bottom;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The end cap, then every cell: one bevelled box between 1px lines. */
+:where(.control-strip)::before,
+:where(.control-strip) > :is(.control-strip-scroll, .control-strip-modules),
+:where(.control-strip-module) {
+  box-sizing: border-box;
+  border: var(--clio-strip-line);
+  border-left: 0;
+  background: var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-cell-shadow);
+}
+
+/* The end cap is one picture: frame, bevel, icon and the rounded lower-left corner. */
+:where(.control-strip)::before {
+  content: "";
+  flex: none;
+  width: calc(var(--clio-strip-cap-width) + 2px);
+  border: 0;
+  background: var(--clio-strip-cap) 0 0 / 100% 100% no-repeat;
+  box-shadow: none;
+}
+
+:where(.control-strip) > :is(.control-strip-scroll, .control-strip-handle) {
+  flex: none;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+/* Scroll arrows: 13px cells, sunken and hollow while there is nothing to scroll. */
+:where(.control-strip) > .control-strip-scroll {
+  width: calc(var(--clio-strip-scroll-width) + 1px);
+  min-width: 0;
+  height: auto;
+  min-height: 0;
+  background: var(--clio-strip-back) 1px 6px / 10px 10px no-repeat, var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-cell-shadow);
+}
+
+:where(.control-strip) > .control-strip-scroll-forward {
+  background-image: var(--clio-strip-forward);
+}
+
+:where(.control-strip) > .control-strip-scroll:disabled {
+  background:
+    var(--clio-strip-back) 1px 6px / 10px 10px no-repeat,
+    var(--clio-strip-sunken-lines),
+    var(--clio-strip-bg);
+  box-shadow: var(--clio-strip-sunken-shadow);
+}
+
+:where(.control-strip) > .control-strip-scroll-forward:disabled {
+  background-image: var(--clio-strip-forward);
+}
+
+:where(.control-strip) > .control-strip-scroll:not(:disabled):active,
+:where(.control-strip-module):not(:disabled):is(:active, [aria-expanded="true"]) {
+  background-color: var(--clio-strip-pressed-bg);
+  box-shadow: var(--clio-strip-pressed-shadow);
+}
+
+:where(.control-strip-modules) {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+
+:where(.control-strip-module-track) {
+  display: flex;
+}
+
+/* A module: the 16px icon 2px in, the menu triangle 3px from the right. */
+:where(.control-strip-module) {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-items: center;
+  width: calc(var(--clio-strip-module-width) + 1px);
+  min-width: 0;
+  height: var(--clio-strip-height);
+  min-height: 0;
+  margin: 0;
+  padding: 0 0 0 var(--clio-strip-icon-inset);
+  border-radius: 0;
+  color: var(--clio-ink);
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: default;
+}
+
+:where(.control-strip-module) > :is(svg, img, .sys-icon) {
+  width: 16px;
+  height: 16px;
+}
+
+:where(.control-strip-module)[aria-haspopup]::after {
+  content: "";
+  position: absolute;
+  top: var(--clio-strip-menu-top);
+  right: calc(var(--clio-strip-menu-inset) + 1px);
+  width: 4px;
+  height: 7px;
+  background: var(--clio-strip-menu) 0 0 / 4px 7px no-repeat;
+}
+
+:where(.control-strip-module):disabled {
+  color: var(--clio-disabled);
+  opacity: 0.5;
+}
+
+/* The tab: open, a slanted end with a grip; folded, the strip shrinks to it. */
+:where(.control-strip) > .control-strip-handle {
+  width: var(--clio-strip-handle-width);
+  min-width: 0;
+  height: var(--clio-strip-height);
+  min-height: 0;
+  border: 0;
+  background: var(--clio-strip-handle) 0 0 / 100% 100% no-repeat;
+  box-shadow: none;
+}
+
+:where(.control-strip.is-collapsed)::before,
+:where(.control-strip.is-collapsed) > :not(.control-strip-handle) {
+  display: none;
+}
+
+:where(.control-strip.is-collapsed) > .control-strip-handle {
+  width: var(--clio-strip-tab-width);
+  background-image: var(--clio-strip-tab);
+}
+
+:where(.control-strip)[data-edge="right"] {
+  flex-direction: row-reverse;
+}
+
+:where(.control-strip)[data-edge="right"]::before,
+:where(.control-strip)[data-edge="right"] > .control-strip-handle {
+  transform: scaleX(-1);
+}
+
+:where(.control-strip) > :focus-visible,
+:where(.control-strip-module):focus-visible {
+  outline: var(--clio-focus-outline);
+  outline-offset: -3px;
+}
+
 /* Adaptations the historical machines never needed. Historical sizes are
    calibration, not a cage: on a touch screen the controls grow to the
    "coarse pointer" sizes from AI System 6's fidelity contract, without any
@@ -1426,6 +1937,7 @@
   :root,
   [data-era] {
     --clio-control-height: 36px;
+    --clio-popup-height: 36px;
     --clio-field-height: 40px;
     --clio-menubar-height: 32px;
     --clio-menu-item-height: 32px;