clio.css 0.2.0 → 0.9.0

package/dist/components.json

@@ -1,7 +1,7 @@
 {
   "name": "clio.css",
-  "version": "0.2.0",
-  "description": "CSS library for classic Mac OS interfaces: Macintosh System 6 and Mac OS 8/9 Platinum windows, menus, buttons, scroll bars and dialogs, with every value traced to measured pixels.",
+  "version": "0.9.0",
+  "description": "CSS library for classic Mac OS interfaces: Macintosh System 6, System 7, Mac OS 8.5 Drawing Board and Mac OS 8/9 Platinum windows, menus, buttons, scroll bars and dialogs, with every value traced to measured pixels.",
   "homepage": "https://surfine.github.io/clio.css/",
   "license": "MIT",
   "eras": [
@@ -12,6 +12,18 @@
       "default": true,
       "file": "dist/clio.system6.css"
     },
+    {
+      "id": "system7",
+      "name": "Macintosh System 7 (colour)",
+      "attribute": "data-era=\"system7\"",
+      "file": "dist/clio.system7.css"
+    },
+    {
+      "id": "drawingboard",
+      "name": "Mac OS 8.5 Drawing Board (beta theme)",
+      "attribute": "data-era=\"drawingboard\"",
+      "file": "dist/clio.drawingboard.css"
+    },
     {
       "id": "platinum",
       "name": "Mac OS 8/9 Platinum",
@@ -21,8 +33,8 @@
   ],
   "install": {
     "npm": "npm install clio.css",
-    "cdn": "https://unpkg.com/clio.css@0.2.0/dist/clio.css",
-    "jsdelivr": "https://cdn.jsdelivr.net/npm/clio.css@0.2.0/dist/clio.css"
+    "cdn": "https://unpkg.com/clio.css@0.9.0/dist/clio.css",
+    "jsdelivr": "https://cdn.jsdelivr.net/npm/clio.css@0.9.0/dist/clio.css"
   },
   "evidenceStatuses": {
     "measured": "read from real pixels of the era",
@@ -36,7 +48,7 @@
       "id": "window",
       "bare": true,
       "name": "Window",
-      "summary": "A document window: frame, title bar with close and zoom boxes (plus the WindowShade box in Platinum), an optional details bar and a scrolling pane.",
+      "summary": "A document window: frame, title bar with close and zoom boxes (plus the WindowShade box in Platinum), an optional details bar and a scrolling pane. System 7 adds colour to the frame and title bar.",
       "selectors": [
         ".window",
         ".window.inactive",
@@ -94,6 +106,27 @@
         }
       ],
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Title bar: System 6's rows on #eee with six #777 stripes, #ccf light on the top and left inside edges and #99c shade on the bottom and right (the shade owns the corners)",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame hd-window",
+          "upstream": "99.1% identical; agrees with AI System 6 internal/evidence/drafts/system-7-reference"
+        },
+        {
+          "era": "system7",
+          "claim": "Close and zoom boxes: 11px, sunk #336/#ccf outer ring, raised #ccf/#336 inner ring, #aaa centre, 1px #eee gap; zoom adds a 5px #336 square; held: black square, #99c face and the starburst",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames hd-window, held-close, held-zoom",
+          "upstream": "System 7.5.3 Finder window Infinite HD"
+        },
+        {
+          "era": "system7",
+          "claim": "Background window: #555 frame, plain white title bar, #888 title, black drop shadow",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window",
+          "upstream": "99.98% identical"
+        },
         {
           "era": "system6",
           "claim": "Title bar: 19 rows from the frame to the rule; 3 rows of paper, six 1px ink stripes on a 2px period, 3 rows of paper, the 1px rule",
@@ -191,6 +224,34 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css:1757 (N1, P26)",
           "upstream": "Mac OS 9 native capture 53; GUIdebook active/inactive"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Window frame: the theme's nine Doc Window pictures (6176-6184, active and inactive) round the outline, placed as Mac OS 8.5 places them, the edges tiled from their ends; content on the window paper (ppat 7120) from the content's top-left; the frame is 6px inside the outline on each side",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames date-time and appearance; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "every piece found 1:1 round the Appearance and Date & Time windows; paper origin agrees in Date & Time and Finder Preferences"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Title bar: 20px on the frame colour then the #555 rule; close and collapse boxes 11px, 4px below the bar's top, flush with the content line",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance",
+          "upstream": "close box 1:1 at (166,73), collapse box 1:1 at (621,73)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Close, zoom and collapse box art, normal and held",
+          "status": "measured",
+          "source": "the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "WindowLargeCloseBox, WindowLargeZoom, WindowLargeCollapse; each found 1:1 in the capture"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Mac OS sometimes starts a 128px pattern half a tile (64px) earlier, depending on where the window or control sits on screen (the Appearance window, the File menu, the Energy Saver alert, the first Date & Time field, the Themes list's scroll bar); clio.css starts it at the element and offers --clio-db-phase: 64px to match a given screen",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "the rule behind the shift was not found from these captures"
         }
       ]
     },
@@ -230,6 +291,13 @@
       "html": "<ul class=\"menu-bar\" role=\"menubar\" aria-label=\"Menu bar\">\n  <li role=\"none\" class=\"open\">\n    <button role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"true\">File</button>\n    <ul class=\"menu\" role=\"menu\">\n      <li role=\"none\"><button role=\"menuitem\">New Folder <kbd>⌘N</kbd></button></li>\n      <li role=\"none\"><button role=\"menuitem\">Open <kbd>⌘O</kbd></button></li>\n      <li role=\"none\"><button role=\"menuitem\" aria-disabled=\"true\">Print</button></li>\n      <li role=\"none\"><button role=\"menuitem\">Close <kbd>⌘W</kbd></button></li>\n      <li role=\"separator\"></li>\n      <li role=\"none\"><button role=\"menuitemcheckbox\" aria-checked=\"true\">Show Clipboard</button></li>\n    </ul>\n  </li>\n  <li role=\"none\"><button role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\">Edit</button></li>\n  <li role=\"none\"><button role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\">View</button></li>\n  <li role=\"none\"><button role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\">Special</button></li>\n</ul>",
       "reserveHeight": 150,
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Menus keep System 6's rows and black highlight; disabled items and the separator are solid #888 instead of a dither",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame file-menu",
+          "upstream": "separator row 100% identical"
+        },
         {
           "era": "system6",
           "claim": "Menu bar: 20 rows with the rule on the last; an open title inverts rows 1–18, about 9px either side of the word",
@@ -239,7 +307,7 @@
         },
         {
           "era": "system6",
-          "claim": "Menu: hangs from the bar's rule with no top line; 1px ink frame and 1px drop shadow; 16px rows; text 15px in; the highlighted row inverts",
+          "claim": "Menu: hangs from the bar's rule with no top line; 1px ink frame and 1px drop shadow; 16px rows; text 13px in; the highlighted row inverts",
           "status": "measured",
           "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu",
           "upstream": "System 6.0.8 Finder File menu"
@@ -260,10 +328,10 @@
         },
         {
           "era": "system6",
-          "claim": "Disabled items are drawn through a 50% grey dither; clio.css uses solid #696969",
-          "status": "adapted",
+          "claim": "Disabled items are drawn through QuickDraw's 50% gray pattern, aligned to the screen (ink kept where x + y is odd); clio.css clips the same 2px pattern, fixed to the viewport, to the text (solid #696969 only where background-clip: text is missing)",
+          "status": "measured",
           "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu",
-          "upstream": "a dither blurs under browser scaling; solid grey keeps 5.6:1"
+          "upstream": "\"Print\" 100% identical (s6-menu-disabled); set --clio-disabled-dither: none for solid #696969"
         },
         {
           "era": "platinum",
@@ -281,17 +349,38 @@
         },
         {
           "era": "platinum",
-          "claim": "Separator: #888 over white, in an 8px row",
-          "status": "inferred",
-          "source": "apps/desktop/styles/65-appearance-themes.css (separator #888/white)",
-          "upstream": "the line pair is measured; the 8px row height is not"
+          "claim": "Separator: a 6px row with #888 on its third line and white on its fourth, the full width of the menu",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame file-menu",
+          "upstream": "between Close Window and Get Info"
         },
         {
           "era": "platinum",
-          "claim": "Check mark and submenu arrow art",
-          "status": "third-party",
-          "source": "classic-stylesheets macos9/checkmark.svg, menu-right.svg (MIT)",
-          "upstream": "nielssp/classic-stylesheets @9ebd2d8"
+          "claim": "Menu check mark (9x8, antialiased, recovered from the white-on-#339 chosen item) and the 6x11 submenu arrow, redrawn from Mac OS 9.0",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames popup-open and file-menu; tooling/p9-art.py",
+          "upstream": "replaces the classic-stylesheets art used before 0.8.0"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Menu bar: the theme's 630x27 picture (pxm 6104) tiled from the screen's left, 22 rows shown; menus: paper (ppat 7125) from the inside top-left in a frame of pattern pens (ppat 129-133) tiled from the menu's corner, a 2px pencil shade, fixed pencil pixels where the pens meet; 18px items; the separator is ppat 133",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames file-menu, edit-menu and control-panels-menu; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "File, Edit, Apple and Control Panels menus agree"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The chosen menu title and item are underlined in pencil instead of inverted",
+          "status": "measured",
+          "source": "the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "Menu_Title_Underline_Center, Menu_Item_underline_center; the title underline is visible under File in the capture"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Menu item underline: left 16px in, right 15px in, its middle piece tiled (the Appearance pop-up's ends 16px from both sides)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames control-panels-menu and popup-open",
+          "upstream": "Energy Saver in the Control Panels menu"
         }
       ]
     },
@@ -325,12 +414,20 @@
         "--clio-button-radius",
         "--clio-button-shadow",
         "--clio-button-active-bg",
-        "--clio-button-default-ring",
+        "--clio-button-default-width",
+        "--clio-button-default-radius",
         "--clio-control-height"
       ],
       "accessibility": "Hover never changes a button: it is pressed only by pointer-down, Space or Enter. Keyboard focus draws a dotted frame (System 6) or a 2px #6666cc ring (Platinum), separate from the default ring.",
       "html": "<div class=\"field-row\" style=\"gap: 16px\">\n  <button>Cancel</button>\n  <button class=\"default\">OK</button>\n  <button class=\"active\">Pressed</button>\n  <button disabled>Eject</button>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Push buttons and the default ring stay black and white, as in System 6",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup (OK)",
+          "upstream": "93.8% identical; a few ring corner pixels differ"
+        },
         {
           "era": "system6",
           "claim": "Push button: 20px tall, 1px ink round rectangle with corners of about 4px, paper face, Chicago 12 (AI System 6 uses 7px corners)",
@@ -340,10 +437,17 @@
         },
         {
           "era": "system6",
-          "claim": "Pressed: the button inverts to ink with paper text",
-          "status": "inferred",
-          "source": "not captured",
-          "upstream": "System 6 button tracking"
+          "claim": "Pressed: the whole button inverts to ink with paper text",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame button-pressed (Cancel held in a TeachText alert)",
+          "upstream": "System 6.0.8"
+        },
+        {
+          "era": "system6",
+          "claim": "Disabled: the frame stays solid ink and the label is drawn through the 50% gray pattern (the menu's pattern, clipped to the label)",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame save-dialog (Eject)",
+          "upstream": "Eject; at fractional zoom the pattern can blur, set --clio-disabled-dither: none for solid grey"
         },
         {
           "era": "system6",
@@ -353,11 +457,18 @@
           "upstream": "agrees with Inside Macintosh, Dialog Manager: PenSize(3,3), InsetRect(-4,-4), FrameRoundRect(16,16)"
         },
         {
-          "era": "both",
+          "era": "system6",
+          "claim": "Hovering over a button changes nothing; only a press inverts it",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames locked-alert and button-hover",
+          "upstream": "agrees with docs/design/CLASSIC_PLATINUM_FIDELITY.md:210"
+        },
+        {
+          "era": "platinum",
           "claim": "Hover never changes a push button; pressed only on pointer-down, Space or Enter",
           "status": "inferred",
           "source": "docs/design/CLASSIC_PLATINUM_FIDELITY.md:210",
-          "upstream": "a 1987–1999 Mac had no hover state"
+          "upstream": "AI System 6 owner ruling: Platinum carries no hover state"
         },
         {
           "era": "system6",
@@ -393,6 +504,41 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css (N5)",
           "upstream": "GUIdebook Open dialog Eject button (button-disabled specimen)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Push buttons: four pattern pens (ppat 7070-7072, 7079) tiled so their pixel 0 is on the last column and row, the corner pixels they leave, the hatched ButtonFaceCorner (image 0) flush in the lower right of the #cec6b5 face, and a 1px pencil shade right and below; the label 1px lower than Platinum's",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames themes-tab and energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "\"Save Theme…\" and \"Specify Settings\" agree"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Default button: a 3px band of pattern pens (ppat 7085 rows, 7086 columns) whose inner line is the box's edge, plus its corner pixels",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "\"Close Message\""
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Held buttons lose the hatch; the foot and right side take other pens (ppat 7126, 7127) tiled from the second column and row",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame button-held; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "\"Save Theme…\" held"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Disabled buttons: #8c8c8c label on the same face",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame date-time",
+          "upstream": "\"Server Options…\""
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The pencil overruns at a button's corners: ButtonTopLeft, ButtonTopRight, Button_BotRight, ButtonBotLeft round a plain button and the four *Default pieces round the default one, drawn outside the box",
+          "status": "measured",
+          "source": "the theme's pxm# pixmaps (tooling/db-art.py); positions from frames themes-tab and energy-saver-alert",
+          "upstream": "each piece found 1:1 round \"Save Theme…\" and \"Close Message\""
         }
       ]
     },
@@ -415,6 +561,13 @@
       "accessibility": "Native input, so keyboard, form and screen-reader behaviour are the browser's. In forced-colours mode the control returns to the system's own drawing.",
       "html": "<div class=\"field-row-stacked\">\n  <label><input type=\"checkbox\" checked> Show warnings</label>\n  <label><input type=\"checkbox\"> Use small icons</label>\n  <label><input type=\"checkbox\" checked disabled> Locked</label>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Identical to System 6: 12px, X when checked",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame general-controls",
+          "upstream": "100% identical, on and off"
+        },
         {
           "era": "system6",
           "claim": "A 12px box with a 1px frame; held, the frame thickens to 2px",
@@ -424,10 +577,10 @@
         },
         {
           "era": "system6",
-          "claim": "Checked draws an X from corner to corner",
-          "status": "inferred",
-          "source": "not captured (the Locked box was unchecked)",
-          "upstream": "System 6 check box"
+          "claim": "Checked draws an X from corner to corner of the box",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame get-info-checked (Locked)",
+          "upstream": "the art is system.css's checkmark.svg (MIT), which matches"
         },
         {
           "era": "system6",
@@ -445,10 +598,17 @@
         },
         {
           "era": "platinum",
-          "claim": "Check mark art",
-          "status": "third-party",
-          "source": "classic-stylesheets macos9/checkmark.svg (MIT)",
-          "upstream": "nielssp/classic-stylesheets @9ebd2d8"
+          "claim": "Check mark: Mac OS 9's grey-shaded mark inside the frame, overhanging its right edge by two pixels",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame general-controls; redrawn by tooling/p9-art.py",
+          "upstream": "Show Desktop when in background; 96.4% identical (the frame 98.6%)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Check box: the theme's 14x11 pictures; image 0 off, 1 on, 3 mixed, 4/5 pressed, 8/9 disabled",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames general-controls and date-time; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "off, on and disabled found 1:1 (Show Desktop, Show Launcher, Daylight-Saving Time is in effect)"
         }
       ]
     },
@@ -467,6 +627,13 @@
       "accessibility": "Native input; group radios with the same name inside a fieldset with a legend.",
       "html": "<fieldset>\n  <legend>Highlight</legend>\n  <div class=\"field-row-stacked\">\n    <label><input type=\"radio\" name=\"hl\" checked> Lavender</label>\n    <label><input type=\"radio\" name=\"hl\"> Graphite</label>\n    <label><input type=\"radio\" name=\"hl\" disabled> Other</label>\n  </div>\n</fieldset>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Identical to System 6",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame general-controls",
+          "upstream": "100% identical, on and off"
+        },
         {
           "era": "system6",
           "claim": "12px ring and 6px dot: the real pixels match system.css's art exactly",
@@ -476,10 +643,17 @@
         },
         {
           "era": "platinum",
-          "claim": "Radio drawn with CSS gradients: black ring, white to #888 well, 6px black dot",
-          "status": "adapted",
-          "source": "apps/desktop/styles/65-appearance-themes.css:291",
-          "upstream": "AI System 6 later replaced this with art cut from a capture (P19); clio.css ships no cut art"
+          "claim": "Radio button: Mac OS 9's shaded 12px ball, off and on; the held states are still drawn with CSS gradients",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame general-controls; redrawn by tooling/p9-art.py",
+          "upstream": "Documents group; off and on 100% identical"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Radio button: the theme's 16x12 pictures; image 0 off, 1 on, 2 pressed, 3/4 disabled",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames general-controls and date-time; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "off and on found 1:1 (Documents, Menu Bar Clock)"
         }
       ]
     },
@@ -505,6 +679,13 @@
       "accessibility": "Keyboard focus draws a ring around the field in addition to the caret.",
       "html": "<div class=\"field-row-stacked\" style=\"width: 240px\">\n  <label for=\"clio-name\">Name:</label>\n  <input id=\"clio-name\" type=\"text\" value=\"Untitled\" style=\"width: 100%\">\n  <label for=\"clio-notes\">Notes:</label>\n  <textarea id=\"clio-notes\" rows=\"3\" style=\"width: 100%\">Text areas scroll with the era's scroll bar.</textarea>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "As System 6: a 1px black frame with the text 3px in",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Currency Symbol)",
+          "upstream": "System 7.5.3"
+        },
         {
           "era": "system6",
           "claim": "1px ink frame, white, text inset 3px",
@@ -525,6 +706,13 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-platinum-utility.css:38",
           "upstream": "Mac OS 9 capture platinum-native/10b-fonts-tab"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Edit text: a 1px line of pattern pens (ppat 7003-7006), the rows tiled from the white's left edge, the left column from its top and the right column from 1px higher; 1px of whatever is behind inside it, then white",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame date-time; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "both Date & Time fields agree"
         }
       ]
     },
@@ -547,18 +735,18 @@
       "html": "<div class=\"field-row\">\n  <label for=\"clio-font\">Font:</label>\n  <select id=\"clio-font\">\n    <option>Chicago</option>\n    <option selected>Geneva</option>\n    <option>New York</option>\n  </select>\n</div>",
       "evidence": [
         {
-          "era": "system6",
-          "claim": "A box with a 1px drop shadow",
-          "status": "inferred",
-          "source": "not measured",
-          "upstream": "System 6 pop-up menu CDEF"
+          "era": "system7",
+          "claim": "An 18px box with an 11×6 black triangle 5px from the right edge, label 15px in, and a 1px shadow that starts 3px in from the corner",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Number Format)",
+          "upstream": "100% identical; the triangle is System 7's addition"
         },
         {
           "era": "system6",
-          "claim": "The down triangle",
-          "status": "adapted",
-          "source": "drawn for clio.css",
-          "upstream": "a System 7 convention, kept so the control reads as a menu"
+          "claim": "An 18px rectangle with a 1px frame and a 1px drop shadow and no arrow; the shadow is what marks it as a menu; held, it inverts",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and popup-held (Standard File folder menu)",
+          "upstream": "the down triangle arrived with System 7"
         },
         {
           "era": "platinum",
@@ -569,17 +757,24 @@
         },
         {
           "era": "platinum",
-          "claim": "The arrow part is drawn with background layers, approximating the measured bevel",
-          "status": "inferred",
-          "source": "clio.css",
-          "upstream": "select has no ::after in CSS"
+          "claim": "The arrow part, drawn with background layers: a #aaa divider 20px from the right, a raised box with a white left and top edge and a #aaa then #777 shade, the arrows 7px from the right and 4px down; the field has a white top line and #aaa foot",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame appearance-tab",
+          "upstream": "\"Apple platinum\" pop-up, 96.7% identical (p9-popup-end)"
         },
         {
           "era": "platinum",
-          "claim": "Arrow art",
-          "status": "third-party",
-          "source": "classic-stylesheets macos9/dropdown.svg (MIT)",
-          "upstream": "nielssp/classic-stylesheets @9ebd2d8"
+          "claim": "Arrow art (7x10), black, and #888 when disabled",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames appearance-tab and appearance; tooling/p9-art.py",
+          "upstream": "replaces classic-stylesheets dropdown.svg"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Pop-up menu: 20px, four pattern pens (ppat 7095-7098; disabled: their other rows) tiled from the last column and row, the corner pixels they leave, #cec6b5 face; the 7x9 double arrow 5px from the right and 4px down; the hatched ButtonFaceCorner (image 2, disabled image 3) ends 19px from the right",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "Appearance, Highlight Color and Variation pop-ups"
         }
       ]
     },
@@ -607,11 +802,18 @@
       "html": "<ul class=\"listbox\" role=\"listbox\" aria-label=\"Documents\" style=\"width: 220px; height: 82px\">\n  <li role=\"option\" aria-selected=\"true\">Apple DVD Player</li>\n  <li role=\"option\">Apple Video Player</li>\n  <li role=\"option\">AppleCD Audio Player</li>\n  <li role=\"option\">QuickTime</li>\n  <li role=\"option\">Security</li>\n  <li role=\"option\">SimpleText</li>\n</ul>",
       "evidence": [
         {
-          "era": "system6",
-          "claim": "White list, 1px ink frame, 16px rows, selection inverts",
+          "era": "system7",
+          "claim": "As System 6: a selected row inverts across the list",
           "status": "inferred",
-          "source": "not measured",
-          "upstream": "System 6 Standard File dialog"
+          "source": "seen in the Keyboard control panel during capture; not pixel-checked",
+          "upstream": "System 7.5.3"
+        },
+        {
+          "era": "system6",
+          "claim": "White list, 1px ink frame, 16px rows; a selected row inverts across the whole list width",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and list-selected (Standard File)",
+          "upstream": "System 6.0.8 TeachText Save As"
         },
         {
           "era": "platinum",
@@ -626,6 +828,13 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css:860 (P10)",
           "upstream": "Mac OS 9 native list capture 21"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "List boxes: a 2px olive #9c9c63 line, 1px of whatever is behind inside it (the pane's paper), white rows, the chosen row #ccf with black text",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame desktop-tab",
+          "upstream": "pattern list, lower-left corner"
         }
       ]
     },
@@ -649,6 +858,20 @@
       "accessibility": "Native scrolling is untouched: wheel, keyboard and touch scroll as usual.",
       "html": "<div class=\"clio clio-scroll\" style=\"width: 220px; height: 96px; overflow: scroll; border: 1px solid; background: var(--clio-pane-bg); font-family: var(--clio-font-text)\">\n  <p style=\"width: 360px; margin: 8px\">The lane, the scroll box and both arrow boxes come from the era. Firefox has no scroll-bar parts, so it gets the era's colours only.</p>\n  <p style=\"margin: 8px\">Scroll me.</p>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Arrow boxes and grow box redrawn from the captured pixels (#ddd face, white light, #777 shade, #99c arrows outlined #336)",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window → tooling/s7-art.py",
+          "upstream": "100% identical"
+        },
+        {
+          "era": "system7",
+          "claim": "Lane: ltGray pattern in #ddd and #777; scroll box #aaa with #ccf/#336 bevel, a #555 leading edge and a 6×10 grip 3px from it",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window",
+          "upstream": "the real box is a fixed 16 rows; the browser sizes it to the content, so only its first 16 rows match"
+        },
         {
           "era": "system6",
           "claim": "Lane: a 1px line and 14px inside; the window frame closes it, so the bar is 15px in CSS",
@@ -679,10 +902,10 @@
         },
         {
           "era": "system6",
-          "claim": "Left and right arrows are the up and down arrows turned",
-          "status": "inferred",
-          "source": "tooling/s6-art.py",
-          "upstream": "the horizontal arrows were captured only partly"
+          "claim": "Left and right arrows: the up arrow turned, apex in the box's first column, tip in its last",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window (horizontal scroll bar)",
+          "upstream": "redrawn as pixels in tooling/s6-art.py"
         },
         {
           "era": "system6",
@@ -704,6 +927,20 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css:336 (P16), :351 (P17), :364 (P27)",
           "upstream": "Mac OS 9 native capture 16; GUIdebook Open dialog"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Scroll arrows: the theme's 16x16 boxes, normal, held and disabled, flush with the bar; the grow box is NoGrowBoxRight",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame themes-tab; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "left and right arrows found 1:1 at (192,297) and (570,297)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Track: #ece6e4 ruled by pattern pens (ppat 7045-7049: the edges and a double centre line) tiled from the track's start; scroll box from the theme's ends, stretch and grip, whose colours Mac OS passes through 16 bits (5 per channel)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frames themes-tab and desktop-tab; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "the Themes list's horizontal bar and the pattern list's vertical bar"
         }
       ]
     },
@@ -746,6 +983,13 @@
         }
       ],
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Alert frame: 1px black, a raised #ccf/#669 ring, #bbb, a sunken #669/#ccf ring, 1px black (5px, as in System 6)",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup",
+          "upstream": "100% identical. An alert without a colour table keeps System 6's black frame (Monitors & Sound alert); clio.css draws the colour one"
+        },
         {
           "era": "system6",
           "claim": "Modal frame: 1px ink, 2px paper, 2px ink, and no drop shadow",
@@ -758,7 +1002,7 @@
           "claim": "Plain box: 1px ink frame and a 2px drop shadow",
           "status": "inferred",
           "source": "not measured",
-          "upstream": "altDBoxProc"
+          "upstream": "altDBoxProc; none of the 6.0.8 Finder and TeachText dialogs opened for capture (alerts, Standard File, About the Finder) uses it"
         },
         {
           "era": "both",
@@ -773,6 +1017,27 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css:840 (P06)",
           "upstream": "GUIdebook Mac OS 9.0 About application (about-alert specimen)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Alerts: the theme's eight Alert pictures (6127-6134) round the outline, edges tiled from their ends, on the window paper from 4px inside",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame energy-saver-alert; the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "every piece found 1:1 round Energy Saver's start-up notice"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Movable modal dialogs (.modeless-dialog, which is a .window) draw the document window's frame: #222 outline, 4px #cdc6bd frame, #777 inner line, 20px title bar over a #555 rule, the #777 band right and below",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame copy-progress-5",
+          "upstream": "Finder copy window; Movable_Modal pixmaps found 1:1"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Modal dialogs: the Modal pictures (6135-6142), which have the alert's sizes, placed the same way",
+          "status": "inferred",
+          "source": "the theme file's ppat and pxm# resources, decoded by tooling/theme-resources.py, written by tooling/db-art.py and tooling/db-pens.py",
+          "upstream": "no modal dialog was on screen in the captures"
         }
       ]
     },
@@ -791,12 +1056,19 @@
       "accessibility": "A fieldset's legend names the group for screen readers.",
       "html": "<fieldset style=\"width: 260px\">\n  <legend>Sound</legend>\n  <div class=\"field-row\"><label><input type=\"checkbox\" checked> Play system alerts</label></div>\n</fieldset>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "Native group box: a 1px grey line with the legend on it; the original alternates #777 and #888, drawn #777 here",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames general-controls and numbers",
+          "upstream": "System 7.5.3 control panels"
+        },
         {
           "era": "system6",
-          "claim": "1px ink frame with the legend on paper",
-          "status": "inferred",
-          "source": "not measured",
-          "upstream": "System 6 control panels"
+          "claim": "System 6 had no group box; clio.css draws a 1px ink frame with the legend on paper",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Control Panel divides its panes with plain 1px rules (clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel)"
         },
         {
           "era": "platinum",
@@ -804,6 +1076,13 @@
           "status": "measured",
           "source": "apps/desktop/styles/65-appearance-themes.css:909 (P20)",
           "upstream": "Mac OS 9 native group box"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Group boxes: a 1px #777 line (#888 on the bottom and right edge), no bevel",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame general-controls",
+          "upstream": "Desktop group"
         }
       ]
     },
@@ -823,12 +1102,19 @@
       "accessibility": "Native <progress>; give it a label or aria-label.",
       "html": "<div class=\"field-row-stacked\" style=\"width: 260px\">\n  <label for=\"clio-copy\">Copying “System Folder”…</label>\n  <progress id=\"clio-copy\" max=\"100\" value=\"62\">62%</progress>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "11px, 1px black frame, #ccf track, #444 fill",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame copy-progress",
+          "upstream": "100% identical"
+        },
         {
           "era": "system6",
-          "claim": "1px ink frame, ink fill",
-          "status": "inferred",
-          "source": "not measured",
-          "upstream": "System 6 Finder copy progress"
+          "claim": "12px tall, 1px ink frame, white track, fill in QuickDraw dkGray (one white dot in four)",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame copy-progress (Finder duplicating System Folder)",
+          "upstream": "redrawn as a pattern tile in tooling/s6-art.py"
         },
         {
           "era": "platinum",
@@ -839,10 +1125,31 @@
         },
         {
           "era": "platinum",
-          "claim": "#bbb track with white/#aaa outer and #888/#ddd inner bevel",
+          "claim": "Frame: 1px black, #aaa outside on the top and left and white on the bottom and right, 10px inside; an indeterminate bar repeats a 16px period of blue and grey stripes",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame copy-progress-5; tooling/p9-art.py",
+          "upstream": "Finder copy window, Preparing to copy…"
+        },
+        {
+          "era": "platinum",
+          "claim": "The unfilled track, #bbb with an #888/#ddd inner bevel",
           "status": "inferred",
           "source": "apps/desktop/styles/65-appearance-themes.css:592",
           "upstream": "AI System 6 token, not tagged as measured"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "12px, a #756f66 pencil line with #333 on the left, #ddd6c5 inside; indeterminate bars carry the theme's Indeterminate_Progress_Arrows",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame copy-progress-5; the theme's pxm#",
+          "upstream": "Finder copy window, \"Preparing to copy…\"; the arrows found 1:1"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The determinate fill stays Platinum's",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "the copy ran too fast to show a determinate bar"
         }
       ]
     },
@@ -866,6 +1173,13 @@
       "accessibility": "Use role=tablist, role=tab with aria-selected and aria-controls, and role=tabpanel; arrow keys between tabs are up to your script.",
       "html": "<div style=\"width: 320px\">\n  <div role=\"tablist\" aria-label=\"Appearance\">\n    <button role=\"tab\" aria-selected=\"true\">Appearance</button>\n    <button role=\"tab\" aria-selected=\"false\">Fonts</button>\n    <button role=\"tab\" aria-selected=\"false\">Sound</button>\n  </div>\n  <div role=\"tabpanel\">\n    <div class=\"field-row\"><label for=\"clio-theme\">Theme:</label>\n      <select id=\"clio-theme\"><option>Mac OS Default</option></select>\n    </div>\n  </div>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "System 7 had no tab control; the System 6 adaptation is used",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "System 7.5.3"
+        },
         {
           "era": "system6",
           "claim": "Boxed labels that join the panel",
@@ -875,10 +1189,104 @@
         },
         {
           "era": "platinum",
-          "claim": "Tab art: sloped caps, #ccc tabs, the front tab #eee and 2px taller",
-          "status": "third-party",
-          "source": "classic-stylesheets macos9/tab*.svg (MIT)",
-          "upstream": "nielssp/classic-stylesheets @9ebd2d8; AI System 6 measured a 21-row tab (P01, 65-appearance-themes.css:742)"
+          "claim": "Tab art: sloped caps, #ccc tabs, the front tab #eee and 2px taller, drawn by tooling/tab-art.py from the measured geometry",
+          "status": "measured",
+          "source": "tooling/tab-art.py, from AI System 6 specimen selected-tab (GUIdebook Mac OS 9.0 Appearance)",
+          "upstream": "95.7% identical against GUIdebook (selected-tab)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Tabs: the theme's left end (6px) and right end (17px, 2px taller) with the right end's first column stretched between; the front tab is the content colour and opens into the panel",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance; the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py",
+          "upstream": "NTabLeft and NTabRight found 1:1 at (244,96) and (327,94)"
+        }
+      ]
+    },
+    {
+      "id": "control-strip",
+      "name": "Control Strip",
+      "summary": "The Control Strip of System 7.5 to Mac OS 9: module buttons with menu triangles, scroll arrows and a tab that folds it away. Markup matches AI System 6's.",
+      "selectors": [
+        ".control-strip",
+        ".control-strip.is-collapsed",
+        ".control-strip-scroll",
+        ".control-strip-scroll-back",
+        ".control-strip-scroll-forward",
+        ".control-strip-modules",
+        ".control-strip-module-track",
+        ".control-strip-module",
+        ".control-strip-handle"
+      ],
+      "tokens": [
+        "--clio-strip-height",
+        "--clio-strip-bg",
+        "--clio-strip-line",
+        "--clio-strip-cell-shadow",
+        "--clio-strip-sunken-shadow",
+        "--clio-strip-pressed-bg",
+        "--clio-strip-pressed-shadow",
+        "--clio-strip-module-width",
+        "--clio-strip-handle"
+      ],
+      "accessibility": "role=toolbar on .control-strip-modules with an aria-label; every module and arrow is a <button> with an aria-label; a module that opens a menu carries aria-haspopup=\"menu\" and aria-expanded. Disable the scroll arrows when there is nothing to scroll. Folding (.is-collapsed) and positioning are up to your script.",
+      "html": "<div class=\"control-strip\">\n  <button class=\"control-strip-scroll control-strip-scroll-back\" disabled aria-label=\"Scroll back\"></button>\n  <div class=\"control-strip-modules\" role=\"toolbar\" aria-label=\"Control Strip\">\n    <div class=\"control-strip-module-track\">\n      <button class=\"control-strip-module\" aria-haspopup=\"menu\" aria-expanded=\"false\" aria-label=\"Monitor bit depth\"><svg viewBox='0 0 16 16' aria-hidden='true'><rect x='2' y='3' width='12' height='9' fill='none' stroke='currentColor'/><rect x='4' y='5' width='8' height='5' fill='#ff0000'/><rect x='6' y='12' width='4' height='2' fill='currentColor'/></svg></button>\n      <button class=\"control-strip-module\" aria-haspopup=\"menu\" aria-expanded=\"false\" aria-label=\"Sound volume\"><svg viewBox='0 0 16 16' aria-hidden='true'><rect x='2' y='3' width='12' height='9' fill='none' stroke='currentColor'/><rect x='4' y='5' width='8' height='5' fill='currentColor'/><rect x='6' y='12' width='4' height='2' fill='currentColor'/></svg></button>\n      <button class=\"control-strip-module\" aria-haspopup=\"menu\" aria-expanded=\"false\" aria-label=\"File sharing\"><svg viewBox='0 0 16 16' aria-hidden='true'><rect x='2' y='3' width='12' height='9' fill='none' stroke='currentColor'/><rect x='4' y='5' width='8' height='5' fill='#3366cc'/><rect x='6' y='12' width='4' height='2' fill='currentColor'/></svg></button>\n    </div>\n  </div>\n  <button class=\"control-strip-scroll control-strip-scroll-forward\" disabled aria-label=\"Scroll forward\"></button>\n  <button class=\"control-strip-handle\" aria-label=\"Collapse Control Strip\"></button>\n</div>",
+      "variants": [
+        {
+          "name": "Folded",
+          "note": "With .is-collapsed only the tab shows.",
+          "html": "<div class=\"control-strip is-collapsed\"><button class=\"control-strip-handle\" aria-label=\"Expand Control Strip\"></button></div>"
+        }
+      ],
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "24px: 1px black lines round every cell; #c0c0c0 cells with a #c0c0c0 then white light and a #a0a0a0 then #808080 shade; an end cap, 13px scroll cells (sunken while there is nothing to scroll), 30px modules with the 16px icon 2px in and a 4x7 menu triangle 4px from the right, then 2px of black and the tab",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame strip-expanded",
+          "upstream": "Finder desktop; start of the strip 89.5% identical"
+        },
+        {
+          "era": "platinum",
+          "claim": "Held module: #808080 face, 2px #404040 light and 2px #c0c0c0 shade",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame strip-slider",
+          "upstream": "Sound module held"
+        },
+        {
+          "era": "platinum",
+          "claim": "End-cap icon, scroll arrows, menu triangle, the tab and the folded tab",
+          "status": "measured",
+          "source": "tooling/p9-art.py, redrawn from frames strip-expanded and strip-collapsed",
+          "upstream": "tab and folded tab 100% identical"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The Control Strip is not themed: Mac OS 8.5 under Drawing Board draws it exactly as Mac OS 9 does",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame finder",
+          "upstream": "same cells, bevels and tab, other modules"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had no Control Strip: drawn at the Mac OS 9 geometry in ink and paper, with 1-bit arrows, triangle and tab drawn for clio.css",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "AI System 6 shows its Control Strip in every era"
+        },
+        {
+          "era": "system7",
+          "claim": "System 7.5.3 draws the Mac OS 9 strip in System 7 greys: #ccc cells, white light, #aaa then #888 shade, idle scroll cells sunken #888/white; end cap, arrows, triangle and tab identical pixel for pixel",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window",
+          "upstream": "Finder desktop"
+        },
+        {
+          "era": "system7",
+          "claim": "Held module in System 7 greys (#888 face, #555 light, #ccc shade)",
+          "status": "inferred",
+          "source": "clio.css, from Mac OS 9's held module",
+          "upstream": "not captured in 7.5.3"
         }
       ]
     },
@@ -903,6 +1311,13 @@
       "accessibility": "Make each icon a <button> (or give it role=button and tabindex=0) with its name as the label.",
       "html": "<div class=\"desktop\" style=\"min-height: 0; padding: 16px; display: flex; gap: 12px\">\n  <button class=\"icon\" aria-pressed=\"false\">\n    <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><rect x=\"4\" y=\"6\" width=\"24\" height=\"20\" fill=\"#fff\" stroke=\"#000\"/><rect x=\"7\" y=\"9\" width=\"18\" height=\"11\" fill=\"#000\"/></svg>\n    <span>Macintosh HD</span>\n  </button>\n  <button class=\"icon selected\" aria-pressed=\"true\">\n    <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\"><path d=\"M5 9h9l2 2h11v15H5z\" fill=\"#fff\" stroke=\"#000\"/></svg>\n    <span>Documents</span>\n  </button>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "The desktop is a 1px #666/#aaa checker",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), every frame",
+          "upstream": "agrees with AI System 6 system-7-reference"
+        },
         {
           "era": "system6",
           "claim": "The desktop is a 1px 50% checker",
@@ -930,6 +1345,13 @@
           "status": "inferred",
           "source": "apps/desktop/styles/65-appearance-themes.css:85",
           "upstream": "base colour of AI System 6's azul tile, generated from a 512 Pixels capture; the tile is not shipped"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Desktop and icons are unchanged from Platinum; the theme's desktop pictures are not reproduced",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "scen 'Drawing Board on a Grid' / 'on Parchment' are Apple artwork"
         }
       ]
     },
@@ -941,6 +1363,7 @@
         ".clio",
         ".text",
         ".heading",
+        ".display",
         "[data-era=system6]",
         "[data-era=platinum]"
       ],
@@ -949,27 +1372,63 @@
         "--clio-paper",
         "--clio-font-chrome",
         "--clio-font-text",
+        "--clio-font-display",
         "--clio-font-size",
         "--clio-selection-bg",
         "--clio-focus-outline"
       ],
       "accessibility": "Text colours keep at least 4.5:1 on their grounds; disabled text keeps 3:1 or more.",
-      "html": "<div class=\"clio\" style=\"padding: 12px; background: var(--clio-pane-bg)\">\n  <h2 class=\"heading\">Chicago is the system font</h2>\n  <p class=\"text\">Geneva is the application font. Every value is a --clio-* custom property you can override on any element.</p>\n</div>",
+      "html": "<div class=\"clio\" style=\"padding: 12px; background: var(--clio-pane-bg)\">\n  <h2 class=\"heading\">Clio Sans '84 is the system font</h2>\n  <p class=\"text\">Clio Text '84 (Geneva) is the application font. Every value is a --clio-* custom property you can override on any element.</p>\n  <p class=\"display\" style=\"font-size: 28px; line-height: 34px; margin: 0\">Display: any other size</p>\n</div>",
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "System 7 keeps System 6's fonts: Clio Sans '84 for chrome, Clio Text '84 for text",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), title bar text",
+          "upstream": "the title Infinite HD matches pixel for pixel"
+        },
+        {
+          "era": "system6",
+          "claim": "Chrome text is Clio Sans '84: Chicago 12 rebuilt pixel for pixel (104 Key Caps characters, space, |, ⌘ and ✓), ascent 11, descent 3, drawn without antialiasing",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 Key Caps (npm run capture:keycaps → tooling/extract-glyphs.py → fonts-src/clio-sans-84.txt)",
+          "upstream": "title bar 100% and default OK button 99.7% identical to the real screen"
+        },
+        {
+          "era": "system6",
+          "claim": "Application text is Clio Text '84 (Geneva 12) and small text Clio Text '84 9 (Geneva 9: info line, icon names, status), rebuilt the same way and drawn without antialiasing",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 Key Caps (Geneva 12) and Get Info comments (Geneva 9) → fonts-src/clio-text-84.txt, clio-text-84-9.txt",
+          "upstream": "TeachText's first line and the Finder info line are 100% identical to the real screen"
+        },
         {
           "era": "system6",
-          "claim": "ChicagoFLF, a public-domain revival of Chicago, for chrome",
+          "claim": "ChicagoFLF stays in the stack as the outline fallback for sizes that are not multiples of 12px",
           "status": "third-party",
           "source": "vendor/system.css-reference/fonts/ChicagoFLF.woff2",
           "upstream": "Robin Casady's ChicagoFLF (public domain), as shipped by system.css"
         },
         {
           "era": "platinum",
-          "claim": "Charcoal when installed; otherwise Asap (OFL) at width 113 for text and 123 for titles, weights 400/600/700",
+          "claim": "Charcoal when installed; Asap (OFL) as the last fallback at width 113 for text and 123 for titles, weights 400/600/700",
           "status": "measured",
           "source": "apps/desktop/assets/fonts/platinum/README.md; 65-appearance-themes.css:25",
           "upstream": "Asap matched to a measured Charcoal sample's x-height and advance width"
         },
+        {
+          "era": "platinum",
+          "claim": "Clio Sans '97 Display (.display, --clio-font-display): Charcoal's outlines traced with potrace from Mac OS 9.0 drawing every character at 72 points in Stickies, for sizes other than 12px and its multiples",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:charcoal-large → tooling/trace-outline.py)",
+          "upstream": "at 72px the ink overlaps the capture's by 90.3% (the rest is antialiased edge)"
+        },
+        {
+          "era": "platinum",
+          "claim": "Clio Sans '97: Charcoal 12 rebuilt pixel for pixel from Mac OS 9.0 Key Caps (107 glyphs, 3px space from the Finder title and the Apple menu, command key from the File menu), used when Charcoal is not installed, drawn unsmoothed",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:keycaps -- charcoal), fonts-src/clio-sans-97.txt",
+          "upstream": "GUIdebook selected tab 80.5% to 95.7%, disabled button 88.2% to 96.9%"
+        },
         {
           "era": "platinum",
           "claim": "Palette #fff #ddd #ccc #999 #777 #000, accent #333399, lavender #ccccff",
@@ -979,10 +1438,24 @@
         },
         {
           "era": "system6",
-          "claim": "Disabled text #696969 instead of a 50% dither",
-          "status": "adapted",
-          "source": "apps/desktop/styles/00-foundation.css (shade-dark)",
-          "upstream": "5.6:1 on white; a dither blurs under browser scaling"
+          "claim": "Disabled text (menu items, button and control labels) through the screen-aligned 50% gray pattern",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu",
+          "upstream": "--clio-disabled-dither: none gives solid #696969 (5.6:1 on white)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Chrome text is #313131; titles and labels are Charcoal, as in Platinum",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance",
+          "upstream": "tab and title text ink"
+        },
+        {
+          "era": "both",
+          "claim": "Window titles and push button labels: each of Charcoal's 16 antialiasing levels takes the exact colour the real screen shows for that text colour on that background (Platinum titles on #ccc, buttons on #ddd, held buttons white on #666, disabled; Drawing Board buttons #333 on #cec6b5 with #313131 solid pixels), via Clio Sans '97 Exact palettes",
+          "status": "measured",
+          "source": "clio.css captures of Mac OS 9.0 and Mac OS 8.5 in Infinite Mac; tooling/aa-palettes.py",
+          "upstream": "Appearance title bar, Set Desktop normal and held, Save Theme…"
         }
       ]
     }