clio.css 0.9.1 → 0.12.0

package/dist/components.json

@@ -1,6 +1,6 @@
 {
   "name": "clio.css",
-  "version": "0.9.1",
+  "version": "0.12.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",
@@ -33,8 +33,8 @@
   ],
   "install": {
     "npm": "npm install clio.css",
-    "cdn": "https://unpkg.com/clio.css@0.9.1/dist/clio.css",
-    "jsdelivr": "https://cdn.jsdelivr.net/npm/clio.css@0.9.1/dist/clio.css"
+    "cdn": "https://unpkg.com/clio.css@0.12.0/dist/clio.css",
+    "jsdelivr": "https://cdn.jsdelivr.net/npm/clio.css@0.12.0/dist/clio.css"
   },
   "evidenceStatuses": {
     "measured": "read from real pixels of the era",
@@ -106,6 +106,104 @@
         }
       ],
       "evidence": [
+        {
+          "era": "system7",
+          "claim": "clio.js: dragging the title bar moves a 1px grey outline around the window and its 1px shadow (the structure region); the gray inverts the pixels whose x + y is odd, kept to the page as QuickDraw kept it to the screen, and the window follows on release",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, Infinite HD dragged by 80,116 (frames before and during, diffed); tooling/outline-check.mjs: the same 614 pixels inverted in Chromium, WebKit and Firefox",
+          "upstream": "QuickDraw DragGrayRgn of the window's structure region"
+        },
+        {
+          "era": "system6",
+          "claim": "clio.js: as System 7: a 1px grey outline around the window and its shadow, the gray on the odd pixels",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac, Macintosh HD dragged by 80,113 (frames before and during, diffed); tooling/outline-check.mjs: the same 365 pixels in all three engines",
+          "upstream": "QuickDraw DragGrayRgn"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js: the dragged outline is a 2px band of the grey pattern (the odd pixels) round the window and its shadow; the shadow starts 2px in from the top-right and bottom-left corners, so the band steps in there",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Infinite HD dragged by 80,116 (frames before and during, diffed); tooling/outline-check.mjs: the same 1260 pixels in Chromium, WebKit and Firefox",
+          "upstream": "Drawing Board assumed the same (inferred)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "clio.js: the dragged outline is the same 2px band of the gray, round the frame and its shadow (7px across, 8px down), following the structure region's overrun near the corners (patches written by tooling/db-outline.py from the theme's pieces; the region's top-left and bottom-left pieces lie 1px right of the drawn ones, and the grey outer column's last row is region)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac, Infinite HD dragged by 80,116 (frames before and during, diffed); tooling/outline-check.mjs: all 1349 of the Mac's pixels and no others in Chromium and WebKit",
+          "upstream": "the 1px offset of the region pieces is fitted to this one frame (the inverted gray shows only every other pixel of the region), not read from the theme's region data"
+        },
+        {
+          "era": "system7",
+          "claim": "clio.zoomRects(): 8 outlines, one per tick, each edge eased by 1.6^k, the last four on screen at once",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, the Finder opening the Infinite HD icon, every animation frame recorded (rectangle edges per frame)",
+          "upstream": "opacity only; none under prefers-reduced-motion"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.zoomRects(): 6 outlines in the 2px gray band, one per tick, at 1.4^(k-7) of the way from the icon to the window, all kept until the window draws",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Games opened from Infinite HD, every changed frame recorded (outlines at 393-477 ms, the window at 493 ms)",
+          "upstream": "each edge within a pixel of the fit (the Finder's rounding is not known); opacity only, none under prefers-reduced-motion"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "clio.zoomRects(): as Mac OS 9: 6 outlines in the 2px band, one per tick, at about 1.4^(k-7) of the way",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Developer opened, every changed frame recorded (outlines at 530-613 ms, the window at 646 ms)",
+          "upstream": "the Finder of 8.5 and 9.0 agree"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: on a touch screen a finger on a movable window's title bar drags the window (touch-action: none there), and a tapped menu item runs once",
+          "status": "adapted",
+          "source": "iOS Simulator (iPhone 18 Pro, Safari), driven by touch events",
+          "upstream": "not checked on a physical iPhone"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: a movable window can be moved without dragging: a move button at the start of the title bar (hidden until it has keyboard focus, the title bar then ringed) takes arrow keys (16px, Shift 1px) and opens a menu of moves, as does a right click on the title bar; moves stay inside the page and a polite live region names them",
+          "status": "adapted",
+          "source": "modern-web-guidance drag guide; WCAG 2.5.7 Dragging Movements",
+          "upstream": "the Mac moved windows only by dragging"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js: the collapse box folds the window to its title bar; a double click on the title bar does only with data-clio-shade=\"dblclick\"",
+          "status": "measured",
+          "source": "Mac OS 9.0 in Infinite Mac, Appearance > Options: \"Double-click title bar to collapse windows\" off",
+          "upstream": "the collapsed look: the title bar, then the frame's #999 shade and black line across the whole width (frame collapsed; specimen p9-collapsed 100% identical in all three engines, the title and the desktop beside the shadow masked)"
+        },
+        {
+          "era": "system7",
+          "claim": "clio.js, data-clio-shade=\"dblclick\": WindowShade folds the window to its title bar, closed by the frame and shadow; there is no collapse box",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac: WindowShade control panel set to 2 clicks, Infinite HD double-clicked (frame shaded); specimen s7-collapsed 100% identical in Chromium, WebKit and Firefox",
+          "upstream": "Infinite Mac's WindowShade is set to Off clicks with sounds off, so the double click stays opt-in; the control panel's factory setting was not checked"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Collapsed: the box is the title bar and the foot's black line; the bottom corners and the shadow lie under the title bar, which is drawn last",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Infinite HD's collapse box clicked (frame collapsed)",
+          "upstream": "specimens db-collapsed-left and db-collapsed-right 100% identical in all three engines (the box and its shadow; a window behind is masked)"
+        },
+        {
+          "era": "both",
+          "claim": "Cursors: the arrow (11x16, white outline, hot spot 1,1) and the I-beam (7x16, black, no cross bar, hot spot 3,4), redrawn at 1x, 2x and 3x; links and buttons in clio.css windows keep the arrow (the Mac had no pointing hand)",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 and Mac OS 9.0 in Infinite Mac (identical arrows), Mac OS 9.0 Stickies (I-beam), System 6.0.8 (the same arrow on the desktop and the same I-beam in Find File); tooling/cursor-art.py",
+          "upstream": "System 6 and Drawing Board assumed the same (inferred); the watch was not captured"
+        },
+        {
+          "era": "both",
+          "claim": "Cursors: the watch (11x16, first frame of the spinning watch, hot spot 8,8) for aria-busy=\"true\", redrawn at 1x, 2x and 3x; its crown's two inverting pixels drawn black",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 and Mac OS 9.0 in Infinite Mac opening a Finder folder (identical frames; four of eight hand positions seen); tooling/cursor-art.py",
+          "upstream": "the animation is not drawn; System 6's watch not captured"
+        },
         {
           "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)",
@@ -127,6 +225,20 @@
           "source": "clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window",
           "upstream": "99.98% identical"
         },
+        {
+          "era": "platinum",
+          "claim": "Drop shadow: a 1px black line down the right from the frame's third row and along the foot from its third column (a notch at both corners); behind another window the same line in #555",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames appearance, collapsed; GUIdebook Appearance and Web Sharing)",
+          "upstream": "specimens active-titlebar, inactive-titlebar, p9-titlebar and p9-collapsed 100% identical without a mask; drawn with border lines on ::after, as a box-shadow could only start 1px in"
+        },
+        {
+          "era": "system7",
+          "claim": "Shaded (WindowShade) window: 19px, the title bar's bottom line serving as the frame's foot, the shadow 1px in under it",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frame shaded)",
+          "upstream": "specimen s7-collapsed 100% 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",
@@ -252,6 +364,34 @@
           "status": "adapted",
           "source": "clio.css",
           "upstream": "the rule behind the shift was not found from these captures"
+        },
+        {
+          "era": "platinum",
+          "claim": "Utility window (.window.utility): 1px black outline and drop from the second row, white light, #999 shade, a 13-row title bar with a 3px dot pattern (the run right of the title from the right end), 10x10 boxes, a #999 rule",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame switcher (Application Switcher)",
+          "upstream": "both ends of the title bar 100% identical"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Utility windows take Platinum's drawing; the theme's floating-window pieces (boxes 201/211/221, frame 6195-6214) were found but its title bar pieces were not matched",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "Application Switcher, Mac OS 8.5"
+        },
+        {
+          "era": "system7",
+          "claim": "Utility windows are the document window's parts at a 13px title bar",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "Macintosh Human Interface Guidelines (1992), ch. 5: floating windows; none on the captured screens"
+        },
+        {
+          "era": "platinum",
+          "claim": "Movable modal window (.window.movable-modal): no close box, ridges from the fourth column, a black rule across the whole width, a dialog body (white light, #999/#555 shade) with no frame band",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame nav (Navigation Services Open)",
+          "upstream": "left end 100% identical; the right end not compared"
         }
       ]
     },
@@ -291,6 +431,62 @@
       "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": "platinum",
+          "claim": "clio.js: a chosen item blinks 3 times, 3 ticks dark and 3 lit, before the menu closes and the command runs",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Apple menu, each animation frame of the emulator's canvas recorded (release at 30 ms; dark at 59, 159, 276 ms; gone at 375 ms)",
+          "upstream": "General Controls' default Menu Blinking"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "clio.js: as Mac OS 9: 3 blinks of about 3 ticks; a menu opened with a click stays open",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Edit > Show Clipboard released (changes at 59, 126, 177, 227, 277, 327 ms; gone at 376 ms)",
+          "upstream": "Appearance > Options in 8.5: Smart Scrolling and double-click collapse both off"
+        },
+        {
+          "era": "system6",
+          "claim": "clio.js: as Mac OS 9: the chosen item blinks 3 times, about 3 ticks dark and 3 lit",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac, File > Get Info released, each animation frame recorded (dark at 109, 193, 293 ms; gone at 392 ms)",
+          "upstream": "MenuFlash 3"
+        },
+        {
+          "era": "system7",
+          "claim": "clio.js: as Mac OS 9: 3 blinks of about 3 ticks",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, Edit > Show Clipboard released (dark at 63, 147, 246 ms; gone at 346 ms)",
+          "upstream": "MenuFlash 3"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: a submenu opens 9 ticks after its item lights (MenuDelay 8 ticks, polled)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Apple menu > Control Panels (150 ms in two runs); MenuDelay's default read from the Menu Manager in the Mac IIx, Quadra 650 and New World ROMs (extended PRAM $7E, 8 ticks when zero)",
+          "upstream": "the same code in System 6, System 7 and Mac OS 9"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: leaving a parent item keeps its submenu while the pointer stays in the wedge from the last point inside the item to the submenu's two near corners (whole degrees) and does not move back away from it, for 60 ticks from leaving the item, not extended by further moves; outside the wedge the item under the pointer lights at once",
+          "status": "measured",
+          "source": "the Menu Manager's MenuSelect in the Mac IIx, Quadra 650 and New World ROMs (MenuDrag: extended PRAM $7F, 60 ticks when zero; DeltaPoint, FixRatio, AngleFromSlope); clio.css capture, System 7.5.3 in Infinite Mac (into the wedge: held 1.18-1.53 s; down or left: switched in 0.19-0.27 s, the emulator's input lag) and Mac OS 9.0 (held 1.42-1.46 s; outside 0.14-0.52 s)",
+          "upstream": "replaces the cone from the previous pointer position, re-armed on every move (0.11.0)"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js: a menu opened with a click stays open until the next click (Mac OS 8 and 9); in System 6 and 7 it closes when the button comes up",
+          "status": "measured",
+          "source": "clio.css capture scripts for Mac OS 9.0 (click opens the Apple menu) and System 7.5.3 (menus must be held); System 6.0.8 in Infinite Mac: a click on File leaves no menu open",
+          "upstream": "--clio-menu-sticky"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: from the keyboard the bar is an application menu bar: one Tab stop (roving tabindex), a title's menu previewed on focus, Left/Right between menus, Down/Home/End into a menu, Esc one level at a time, Tab out closes all; Command-key equivalents from <kbd>⌘N</kbd> on menu bars marked data-clio-shortcuts, the title lit for 8 ticks",
+          "status": "adapted",
+          "source": "WAI-ARIA Authoring Practices, menubar pattern (via modern-web-guidance app-menus and menu)",
+          "upstream": "Mac OS 8 and 9 had no keyboard menu navigation; Command keys are opt-in so a page's demo menus never take the browser's shortcuts"
+        },
         {
           "era": "system7",
           "claim": "Menus keep System 6's rows and black highlight; disabled items and the separator are solid #888 instead of a dither",
@@ -356,7 +552,7 @@
         },
         {
           "era": "platinum",
-          "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",
+          "claim": "Menu check mark (10x8, antialiased, read black on #ddd from an open pop-up menu; the 9x8 recovered before from the white-on-#339 chosen item had lost the tip's last column) 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"
@@ -381,6 +577,27 @@
           "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"
+        },
+        {
+          "era": "system7",
+          "claim": "A menu longer than the screen ends in a scroll arrow row (11x6, black, 5px in); the up arrow is the down arrow turned over",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, frame hig/system7/cp",
+          "upstream": "Control Panels submenu; the up arrow inferred"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Menu scroll arrows are the theme's 364 (down) and 389 (up)",
+          "status": "measured",
+          "source": "the theme file's pxm#",
+          "upstream": "the down arrow found in the Control Panels submenu"
+        },
+        {
+          "era": "both",
+          "claim": "Menu bar extras (li.menu-extras: the Help and Application menus) sit at the right; a 16px icon can lead a title or an item",
+          "status": "measured",
+          "source": "clio.css captures, frames hig/*/app-menu, help-menu, apple-menu, cp",
+          "upstream": "positions not compared pixel by pixel"
         }
       ]
     },
@@ -421,6 +638,20 @@
       "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": "both",
+          "claim": "clio.js: a held button draws pressed only while the pointer is on it; released elsewhere it does nothing",
+          "status": "inferred",
+          "source": "Inside Macintosh: Macintosh Toolbox Essentials (1992), TrackControl",
+          "upstream": "data-clio-off turns the held look off; browsers already click only on release over the button"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: Return or Enter presses the default button, Esc or Cmd-. the Cancel button, after showing it pressed for 8 ticks",
+          "status": "measured",
+          "source": "the Dialog Manager in the Mac IIx, Quadra 650 and New World ROMs (HiliteControl, Delay(8), HiliteControl); clio.css capture, System 7.5.3 in Infinite Mac, Find File's Find button after Return (dark at 76 ms, back at 211 ms)",
+          "upstream": "Esc and Cmd-. from the Macintosh Human Interface Guidelines (1992), ch. 6"
+        },
         {
           "era": "system7",
           "claim": "Push buttons and the default ring stay black and white, as in System 6",
@@ -674,7 +905,8 @@
         "--clio-field-border",
         "--clio-field-shadow",
         "--clio-field-padding",
-        "--clio-field-height"
+        "--clio-field-height",
+        "--clio-caret-height"
       ],
       "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>",
@@ -693,6 +925,20 @@
           "source": "clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (RAM Cache field), get-info (comments)",
           "upstream": "System 6.0.8"
         },
+        {
+          "era": "system7",
+          "claim": "clio.js: the insertion point in a field inside a window is TextEdit's: a 1px XOR line 16px tall (--clio-caret-height), in the pixel left of the character, shown at once after each move; the browser's caret while text is selected or an input method composes; lit and still under reduced motion; none in forced colours; data-clio-caret=\"off\" opts out",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, Find File's field (frame caret: 1px at the field's third column, rows 2-17 of a 20px field)",
+          "upstream": "specimen s7-js-caret 100% identical in all three engines; npm run behaviour checks the blink, the hand-over and the opt-out"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: the same insertion point shape in every era (System 6, Mac OS 8 and 9 use TextEdit's)",
+          "status": "inferred",
+          "source": "the System 7 measurement",
+          "upstream": "the shape not measured outside System 7.5.3; the blink is (row below)"
+        },
         {
           "era": "platinum",
           "claim": "White field, 1px black frame, #888 shadow above-left and white etch below-right",
@@ -713,6 +959,20 @@
           "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"
+        },
+        {
+          "era": "platinum",
+          "claim": "Keyboard focus: a 2px ring of #6666cc (Purple highlight) round the field, its outer corners left out; list boxes take it too",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame date-time-edit",
+          "upstream": "100% identical"
+        },
+        {
+          "era": "both",
+          "claim": "The insertion point blinks every 32 ticks (CaretTime) in System 6 and 7; Mac OS 9's General Controls default blinks about every 48 ticks",
+          "status": "measured",
+          "source": "clio.css capture in Infinite Mac: System 6.0.8 Find File (mean 533 ms over 15 changes), System 7.5.3 Find File (516-634 ms), Mac OS 9.0 General Controls' preview at its middle setting (731-867 ms, mean 795 ms); CaretTime = (PRAM misc & 15) x 4 with factory misc $88, Mac IIx and Quadra 650 ROMs",
+          "upstream": "clio.js blinks its insertion point at --clio-caret-ticks: 32 in System 6 and 7, 48 in Mac OS 8 and 9 (Drawing Board inferred from Mac OS 9)"
         }
       ]
     },
@@ -734,6 +994,27 @@
       "accessibility": "Native <select>, so the open list is the browser's own and works everywhere.",
       "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": "both",
+          "claim": "Open pop-up menu: the era's menu laid over the button, the current item on the button's row, checked",
+          "status": "inferred",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, SimpleText Text Style (frame platinum9/cl-size-popup)",
+          "upstream": "drawn with appearance: base-select where supported (Chrome 135, Safari 27; clio.js lines it up), by clio.js elsewhere; the row alignment is checked by npm run behaviour, not against pixels"
+        },
+        {
+          "era": "platinum",
+          "claim": "Open pop-up menu: its top on the button's top (the current item there), as wide as the button less its 20px of arrows, framed all round in black with the white and #999 bevel, the shadow starting 2px in; check mark 3px in, text 20px, each antialiasing level as the screen shows it",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Appearance > Fonts, Large System Font held with the pointer off the menu (frame fonts-popup-open)",
+          "upstream": "specimens p9-js-popup-open (clio.js, all three engines) and p9-popup-open (base-select, Chromium and WebKit) 100% identical"
+        },
+        {
+          "era": "platinum",
+          "claim": "While its menu is open the pop-up button's arrows are drawn pressed: #444 top row, #555 then a #666 face, white arrows, #777 and #888 below and right, the frame's corners to match",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frame fonts-popup-open); tooling/p9-art.py and frame-art.py",
+          "upstream": "specimens p9-js-popup-open-arrows and p9-popup-open-arrows (select:open) 100% identical"
+        },
         {
           "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",
@@ -748,6 +1029,20 @@
           "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": "system7",
+          "claim": "Dimmed: the whole control (frame, shadow, title, arrow) drawn through the 50% gray, ink kept where x + y is odd, the pattern from the control's corner (QuickDraw kept it to the screen); browsers do not fade it; the arrow centred at floor(spare / 2)",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, Memory control panel with virtual memory off (Select Hard Disk; frame memory)",
+          "upstream": "specimen s7-popup-disabled 100% identical in Chromium and Firefox; WebKit ignores mask-clip: no-clip, so the dimmed shadow is not drawn there"
+        },
+        {
+          "era": "system6",
+          "claim": "Dimmed: as System 7, the control through the 50% gray",
+          "status": "inferred",
+          "source": "the System 7 measurement; no dimmed pop-up menu found in System 6.0.8's control panels and Finder",
+          "upstream": "dimmed buttons and items use the same pattern there (measured)"
+        },
         {
           "era": "platinum",
           "claim": "#ddd, 3px corners, white/#aaa bevel, bold label, a separate bevelled arrow part with the 7x10 arrow",
@@ -775,6 +1070,13 @@
           "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"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Open pop-up menu: drawn by clio.js wherever it runs (the browser's picker cannot carry the theme's shade and corner pixels; without clio.js, base-select draws it plain): its top on the button's, as wide as the button less 20px of arrows, the top pen shifted with the button's phase, text 18px in and a pixel higher than in pull-down menus, the check 1px in, the underline on the item's last rows",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Appearance > Appearance held (frame popup-open)",
+          "upstream": "specimens db-js-popup-open and db-popup-open 96.2% same, 98.9% within 8/255: the text's edge levels over the paper differ by a step"
         }
       ]
     },
@@ -805,7 +1107,7 @@
           "era": "system7",
           "claim": "As System 6: a selected row inverts across the list",
           "status": "inferred",
-          "source": "seen in the Keyboard control panel during capture; not pixel-checked",
+          "source": "seen in the Keyboard control panel during capture; the Color control panel's highlight colour is Black & White (System 7.5.3 in Infinite Mac); the row itself not pixel-checked",
           "upstream": "System 7.5.3"
         },
         {
@@ -916,10 +1218,80 @@
         },
         {
           "era": "both",
-          "claim": "The scroll box grows with the visible fraction instead of a fixed 16px square",
+          "claim": "Without clio.js the scroll box grows with the visible fraction instead of keeping its fixed length",
           "status": "adapted",
           "source": "clio.css",
-          "upstream": "browsers size ::-webkit-scrollbar-thumb themselves"
+          "upstream": "browsers size ::-webkit-scrollbar-thumb themselves; load dist/clio.js for the fixed box"
+        },
+        {
+          "era": "system7",
+          "claim": "clio.js: the scroll box is the #555 line and 15 rows, 16 in all, right after the arrow's black line; dragged, it leaves a 14x16 outline in which the lane's #ddd turns black and its #777 dots stay, and the content scrolls on release",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames hig/system7/finder-scroll and finder-thumb-drag)",
+          "upstream": "specimen s7-js-scroll-top 100% identical"
+        },
+        {
+          "era": "system6",
+          "claim": "clio.js: the scroll box is 14x16 inside the bar's line; dragged, it leaves its frame XORed with dkGray, which over the ltGray lane comes out solid black, and the content scrolls on release",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac, System Folder list, the box pressed and held 56px lower (frame scroll-box-drag)",
+          "upstream": "specimen s6-js-scroll-drag 100% identical in Chromium, WebKit and Firefox (the pointer masked)"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: the lane's pattern is kept to the page, as QuickDraw kept it to the screen; the browser's own bar starts it at the lane",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 (System Folder) and System 7.5.3 (Infinite HD narrowed): the lane's dots fall on the same screen columns wherever the bar is",
+          "upstream": "specimen s7-js-hscroll-lane 100% identical; without clio.js the dots may sit one step along (adapted)"
+        },
+        {
+          "era": "system7",
+          "claim": "Horizontal bar: the vertical bar turned, its box the #555 line and 15 columns after the left arrow's black line",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, Infinite HD narrowed until it scrolls sideways (frame hbar)",
+          "upstream": "specimens s7-scroll-left, s7-scroll-right, s7-hscroll-thumb 100% identical"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js: a 15-row box between black lines that it shares with the arrows; the bar is a black line and 14px, the window's frame closing it; lane shaded #777/#888 along the top and left and #bbb/#ccc down the right, and again just past the box; arrow and box bevels stop a pixel short of the far corners; dragged live",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac with Smart Scrolling off (frames hig/platinum9/finder-scroll-fixed, finder-thumb-drag)",
+          "upstream": "specimen p9-js-scroll-fixed 100% identical; the 16px bar before 0.11 was a pixel too wide and tall"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js, data-clio-scrolling=\"smart\": both arrows at the far end, the up arrow first with its black line on the lane's side; the box sized to the visible share",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Appearance > Options > Smart Scrolling on (frame hig/platinum9/finder-scroll-smart)",
+          "upstream": "specimen p9-js-scroll-smart 100% identical; off by default, as in Apple's own Mac OS 9.0 screenshots"
+        },
+        {
+          "era": "platinum",
+          "claim": "clio.js: with nothing to scroll the lane is flat #eee, the arrows dimmed, the lines beside them #555",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frame hig/platinum9/finder-scroll-fixed, horizontal bar)",
+          "upstream": "specimen p9-js-scroll-off-h 100% identical"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: a held arrow or lane steps at once and keeps stepping while held, with no pause in System 6 and 7 and a pause of about 0.2 s after the first step in Mac OS 8 and 9 (--clio-scrollbar-repeat-delay)",
+          "status": "measured",
+          "source": "TrackControl in the Mac IIx and Quadra 650 ROMs calls the action procedure on every pass while the button is down; clio.css capture, Mac OS 9.0 Finder in Infinite Mac (held down arrow)",
+          "upstream": "Drawing Board assumed as Mac OS 9 (inferred)"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js: an arrow step is 16px and a lane step the visible height less 16px; repeats every 50 ms",
+          "status": "adapted",
+          "source": "clio.css capture, System 6.0.8 Finder list in Infinite Mac: one click scrolled one 16px row; the Mac stepped as fast as the application could scroll (no fixed rate in the Toolbox), so the rate is chosen",
+          "upstream": "applications chose their own step and page"
+        },
+        {
+          "era": "platinum",
+          "claim": "A held scroll arrow: #777 face, #555 along the top and left, #999 along the bottom and right, the other two corners #777",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, Finder, the down arrow held at its corner (frame arrow-held)",
+          "upstream": "specimen p9-js-scroll-arrow-held 100% identical in all three engines (the pointer masked)"
         },
         {
           "era": "platinum",
@@ -937,10 +1309,24 @@
         },
         {
           "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)",
+          "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); the grip lies over the ends at (length − 2) / 2 rounded down, so the 15px box shows 6px of its start, the grip and 7px of its end",
           "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"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "clio.js: the scroll box keeps the theme's 15px whatever share of the content shows (Smart Scrolling off, the 8.5 default)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Infinite HD at three sizes: the horizontal box 15px in each",
+          "upstream": "the browser's own bar sizes it by the share (adapted)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "clio.js, data-clio-scrolling=\"smart\": both arrows at the far end are one theme picture (ScrollArrowsDbl, pxm# 334 and 324), each button showing its half; held, only that arrow lights (state 4 for the first, 1 for the second); dimmed from the same resource",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the theme, Smart Scrolling on (frames smart-scroll, smart-held-left, smart-held-right); the theme file's pxm#",
+          "upstream": "specimens db-js-smart-arrows, db-js-smart-held-left and -right 100% identical in all three engines (the pointer on the held arrow masked); the vertical pair held matches the same way (frames only, no specimen); the dimmed state is still read from the resource order"
         }
       ]
     },
@@ -1038,6 +1424,27 @@
           "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"
+        },
+        {
+          "era": "platinum",
+          "claim": "Separator line (.separator, <hr class=separator>): etched, #888 then white one row lower and one column further right",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac, frame hig/platinum9/mouse",
+          "upstream": "100% identical"
+        },
+        {
+          "era": "system7",
+          "claim": "Separator line: a 3px band of QuickDraw's 50% grey, aligned to the screen",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac, frame hig/system7/memory",
+          "upstream": "—"
+        },
+        {
+          "era": "system6",
+          "claim": "Separator line: 1px of ink",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "—"
         }
       ]
     },
@@ -1083,6 +1490,20 @@
           "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"
+        },
+        {
+          "era": "platinum",
+          "claim": "Secondary group box (fieldset.secondary): one #888 line, no light",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame sound (Settings for selected device)",
+          "upstream": "—"
+        },
+        {
+          "era": "both",
+          "claim": "A check box or pop-up menu can title a group box from inside the legend",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/platinum9), frame date-time (Use a Network Time Server)",
+          "upstream": "—"
         }
       ]
     },
@@ -1356,29 +1777,640 @@
       ]
     },
     {
-      "id": "typography",
-      "name": "Type and tokens",
-      "summary": "The fonts, the palette and every --clio-* custom property you can override.",
+      "id": "disclosure",
+      "name": "Disclosure triangle",
+      "summary": "The triangle that shows and hides a list's or a dialog's details. A <details> summary gets it too.",
       "selectors": [
-        ".clio",
-        ".text",
-        ".heading",
-        ".display",
-        "[data-era=system6]",
-        "[data-era=platinum]"
+        ".disclosure",
+        ".disclosure[aria-expanded=true]",
+        "details > summary",
+        "details[open] > summary"
       ],
       "tokens": [
-        "--clio-ink",
-        "--clio-paper",
+        "--clio-disclosure-size",
+        "--clio-art-disclosure",
+        "--clio-art-disclosure-open"
+      ],
+      "accessibility": "Use a <button> with aria-expanded and aria-controls, or <details>/<summary>, which keyboards and screen readers already understand.",
+      "html": "<details open>\n  <summary>Control Panels &amp; Extensions</summary>\n  <p style=\"margin: 4px 0 0 17px\">Appearance</p>\n</details>\n<button class=\"disclosure\" aria-expanded=\"false\" aria-label=\"Show Developer\"></button> Developer",
+      "evidence": [
+        {
+          "era": "system7",
+          "claim": "11px, a black outline with a blue and white checker inside, closed and open",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frames list and list-open (Finder, View by Name)",
+          "upstream": "Control Panels & Extensions"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had no disclosure triangle; it uses System 7's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Macintosh Human Interface Guidelines (1992), ch. 7 (outline triangles)"
+        },
+        {
+          "era": "platinum",
+          "claim": "13px with its shadow, closed and open (the Finder list view)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frames list and list-open; tooling/hig-art.py",
+          "upstream": "100% identical, both states"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The theme's 11px pictures, closed (340) and open (343, drawn through 16 bits)",
+          "status": "measured",
+          "source": "the theme file's pxm# and ppat resources (tooling/db-art.py)",
+          "upstream": "both found 1:1 in the Finder list view"
+        }
+      ]
+    },
+    {
+      "id": "list-view",
+      "name": "List view",
+      "summary": "The Finder's list view: column headers with the sorted column marked, and rows of names and details.",
+      "selectors": [
+        ".list-view",
+        ".list-view th[aria-sort]",
+        ".list-view th.sort-direction",
+        ".list-view td.sorted"
+      ],
+      "tokens": [
+        "--clio-list-view-row",
+        "--clio-list-view-header-height",
+        "--clio-list-view-sorted-bg"
+      ],
+      "accessibility": "A real <table>: give the sorted header aria-sort, keep scope on headers; the disclosure buttons need labels.",
+      "html": "<table class=\"list-view\" style=\"width: 340px\">\n  <thead><tr><th aria-sort=\"ascending\">Name</th><th>Date Modified</th><th class=\"sort-direction\" aria-label=\"Sort direction\"></th></tr></thead>\n  <tbody>\n    <tr><td class=\"sorted\"><button class=\"disclosure\" aria-expanded=\"false\" aria-label=\"Show\"></button> Developer</td><td colspan=\"2\">Thu, Apr 14, 2022</td></tr>\n    <tr><td class=\"sorted\"><button class=\"disclosure\" aria-expanded=\"false\" aria-label=\"Show\"></button> Games</td><td colspan=\"2\">Thu, Apr 14, 2022</td></tr>\n  </tbody>\n</table>",
+      "evidence": [
+        {
+          "era": "system7",
+          "claim": "Headers in the small font on the window's white, the sorted one underlined, a double rule (black, white, black) below",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frame list",
+          "upstream": "Finder, View by Name"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6's list views have System 7's headers",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "not captured"
+        },
+        {
+          "era": "platinum",
+          "claim": "21px bevelled headers: #666 above, white light, #ccc, #888 shade, a #333 rule; the sorted header sunk dark (#111/#444 frame, #555/#aaa bevel, #888); #666 dividers; a sort-direction cell with its mark; rows #eee, the sorted column #ddd, 19px",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame list",
+          "upstream": "100% identical (labels left out: Geneva 10 is not among clio.css's fonts)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "#cdc6bd headers and a #9f9a94 sorted one, each line in its dominant colour; the theme draws these lines with pattern pens, not reproduced",
+          "status": "adapted",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame list-open",
+          "upstream": "Finder list view"
+        }
+      ]
+    },
+    {
+      "id": "slider",
+      "name": "Slider",
+      "summary": "<input type=range> as the Appearance slider, with optional tick marks.",
+      "selectors": [
+        "input[type=range]",
+        "input[type=range].ticks"
+      ],
+      "tokens": [
+        "--clio-slider-height",
+        "--clio-art-slider-track",
+        "--clio-art-slider-thumb",
+        "--clio-slider-tick-count"
+      ],
+      "accessibility": "Native range input: label it, and say the value with aria-valuetext when the number alone means little.",
+      "html": "<label for=\"clio-rate\">Key Repeat Rate</label>\n<input id=\"clio-rate\" type=\"range\" class=\"ticks\" min=\"0\" max=\"4\" value=\"2\" style=\"width: 120px; --clio-slider-tick-count: 5\">",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "A 7-row track (light, black, three grey, black, white), a 15x16 thumb pointing down, tick marks of white, black and #888",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame mouse (Mouse Tracking); tooling/hig-art.py",
+          "upstream": "track and thumb 100% identical; the held thumb was not captured"
+        },
+        {
+          "era": "platinum",
+          "claim": "The thumb stops 3px inside the track at both ends (Firefox's thumb is held there by padding)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), Mouse Tracking dragged to each end (frames slider-min, slider-max)",
+          "upstream": "specimens p9-slider-min and p9-slider-max 100% identical in Chromium, WebKit and Firefox"
+        },
+        {
+          "era": "both",
+          "claim": "Tick marks fall on whole pixels, (width - run) / (count - 1) rounded",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "each browser rounded a fractional spacing its own way; the Mac's tick placement was not measured"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The theme's 9x16 thumb (1106, through 16 bits) on a 1px pencil track (ppat 7024)",
+          "status": "measured",
+          "source": "the theme file's pxm# and ppat resources (tooling/db-art.py); clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame keyboard",
+          "upstream": "thumb and track pen found 1:1; ticks not reproduced"
+        },
+        {
+          "era": "system7",
+          "claim": "System 7 had no slider in the Toolbox (each control panel drew its own); it uses Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Macintosh Human Interface Guidelines (1992), ch. 7: Controls Not Supported by the Toolbox"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had none; it uses Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        },
+        {
+          "era": "both",
+          "claim": "A dial is a slider: the 1992 guidelines' \"slider (sometimes called a dial)\", HIG87's indicator that shows and sets a value",
+          "status": "inferred",
+          "source": "Macintosh Human Interface Guidelines (1992), ch. 7: Sliders",
+          "upstream": "no other dial control was found in any era"
+        }
+      ]
+    },
+    {
+      "id": "little-arrows",
+      "name": "Little arrows",
+      "summary": "The up and down pair beside a number or a clock field.",
+      "selectors": [
+        ".little-arrows",
+        ".little-arrows > .up",
+        ".little-arrows > .down",
+        ".little-arrows[aria-disabled=true]"
+      ],
+      "tokens": [
+        "--clio-little-arrows-width",
+        "--clio-little-arrows-height",
+        "--clio-art-little-arrows"
+      ],
+      "accessibility": "Two real buttons with labels; keep the field itself editable and announce the new value.",
+      "html": "<input type=\"text\" value=\"32K\" style=\"width: 60px\" aria-label=\"Cache size\">\n<span class=\"little-arrows\" role=\"group\" aria-label=\"Cache size\">\n  <button class=\"up\" aria-label=\"Increase\"></button><button class=\"down\" aria-label=\"Decrease\"></button>\n</span>",
+      "evidence": [
+        {
+          "era": "system7",
+          "claim": "15x25, an outlined rounded box with two outlined arrows",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frame memory (Cache Size)",
+          "upstream": "held and dimmed states not on screen; they keep the normal picture"
+        },
+        {
+          "era": "platinum",
+          "claim": "13x23, normal while its field is edited and dimmed otherwise",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frames date-time-edit and date-time",
+          "upstream": "both 100% identical; held states were under the pointer"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The theme's 13x21 pictures (350): normal, up held, down held, dimmed, through 16 bits",
+          "status": "measured",
+          "source": "the theme file's pxm# and ppat resources (tooling/db-art.py)",
+          "upstream": "dimmed found 1:1 in Date & Time"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had none; it uses System 7's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "bevel-button",
+      "name": "Bevel button",
+      "summary": "A square bevelled button for an icon or a short label: push button, toggle (aria-pressed) or menu (class menu).",
+      "selectors": [
+        ".bevel",
+        ".bevel.menu",
+        ".bevel[aria-pressed=true]",
+        ".bevel:active"
+      ],
+      "tokens": [
+        "--clio-art-bevel",
+        "--clio-art-bevel-held",
+        "--clio-bevel-slice"
+      ],
+      "accessibility": "A real button: label icon-only ones; a menu bevel needs aria-haspopup and aria-expanded.",
+      "html": "<button class=\"bevel menu\" style=\"width: 36px; height: 27px\" aria-label=\"Shortcuts\" aria-haspopup=\"menu\">☞</button>\n<button class=\"bevel\" aria-pressed=\"true\" style=\"width: 36px; height: 27px\">B</button>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "#666/#333 outline, white light, #ccc face, #999/#777 shade, 3px corners; held dark; a 3x2 menu arrow 5px from the right and 4px up",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frames nav and nav-bevel-held (Navigation Services)",
+          "upstream": "normal with its menu arrow 100% identical; the held frame's bottom row was under the opened menu and is the right edge's #444 (inferred)"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Drawn as the theme's push button (pens, corner pixels, hatch)",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "the Navigation Services bevel buttons were not matched pen for pen"
+        },
+        {
+          "era": "system7",
+          "claim": "Earlier eras had none; they use Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Mac OS 8 Human Interface Guidelines (1997), ch. 2 (Bevel Buttons)"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had none; it uses Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "chasing-arrows",
+      "name": "Chasing arrows",
+      "summary": "The asynchronous progress indicator: two arrows chasing round a circle.",
+      "selectors": [
+        ".chasing-arrows"
+      ],
+      "tokens": [
+        "--clio-art-chasing-arrows",
+        "--clio-chasing-arrows-frames"
+      ],
+      "accessibility": "Give it role=status and a label saying what is going on; it stands still under prefers-reduced-motion.",
+      "html": "<span class=\"chasing-arrows\" role=\"status\" aria-label=\"Looking for servers\"></span> Looking for servers…",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "16x16, three frames read 0.7s apart (their order is not known); turned by a transform, not repainted",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frames netb-0..2 (Network Browser)",
+          "upstream": "first frame 100% identical"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The theme's six frames (390)",
+          "status": "measured",
+          "source": "the theme file's pxm# and ppat resources (tooling/db-art.py)",
+          "upstream": "not on screen in the capture"
+        },
+        {
+          "era": "system7",
+          "claim": "Earlier eras showed a spinning watch cursor instead; they use Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had none; it uses Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "help-button",
+      "name": "Help button",
+      "summary": "The square button with the help icon in a dialog's lower left.",
+      "selectors": [
+        ".help-button"
+      ],
+      "tokens": [
+        "--clio-art-help-button"
+      ],
+      "accessibility": "aria-label=\"Help\"; it should open help about the dialog.",
+      "html": "<button class=\"help-button\" aria-label=\"Help\"></button>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "21x20, a small bevel button with the help icon",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame keyboard",
+          "upstream": "100% identical"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "As the Keyboard control panel draws it",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame keyboard",
+          "upstream": "the held state was not captured"
+        },
+        {
+          "era": "system7",
+          "claim": "Earlier eras used a Help push button; they use Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Mac OS 8 Human Interface Guidelines (1997), ch. 2 (Help Button Layout)"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had none; it uses Platinum's",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "image-well",
+      "name": "Image well",
+      "summary": "A sunken well holding a picture or an icon.",
+      "selectors": [
+        ".image-well"
+      ],
+      "tokens": [
+        "--clio-image-well-bg",
+        "--clio-field-border",
+        "--clio-field-shadow"
+      ],
+      "accessibility": "Describe the picture with alt text; a well that accepts drops needs a keyboard alternative.",
+      "html": "<div class=\"image-well\" style=\"width: 48px; height: 48px\">◆</div>",
+      "evidence": [
+        {
+          "era": "both",
+          "claim": "Drawn like the era's text field frame round a white face",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "no image well was on the captured screens (the Appearance desktop preview is a picture, not a well)"
+        }
+      ]
+    },
+    {
+      "id": "balloon",
+      "name": "Help balloon",
+      "summary": "Balloon Help: a white balloon with a tail pointing at what it describes.",
+      "selectors": [
+        ".balloon"
+      ],
+      "tokens": [
+        "--clio-art-balloon",
+        "--clio-art-balloon-tail"
+      ],
+      "accessibility": "role=tooltip, referenced by aria-describedby from the thing it explains; show it on focus as well as hover.",
+      "html": "<div class=\"balloon\" role=\"tooltip\" style=\"margin-top: 24px\">Hard disk<br><br>A hard disk is a device that stores large numbers of files and folders.</div>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "A rounded outline with a 2px drop on the right and below (10px corners), a tail rising from the top edge near the right",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame balloon (Infinite HD)",
+          "upstream": "top and bottom corners 100% identical; the tail's tip was under the pointer (inferred)"
+        },
+        {
+          "era": "system7",
+          "claim": "The same balloon in System 7 and Drawing Board",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frame balloon (Trash); clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame balloon",
+          "upstream": "compared by eye, not pixel by pixel"
+        },
+        {
+          "era": "system6",
+          "claim": "System 6 had no Balloon Help; it uses the later balloon",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Macintosh Human Interface Guidelines (1992), ch. 11"
+        }
+      ]
+    },
+    {
+      "id": "rounded-window",
+      "name": "Rounded-corner window",
+      "summary": "The desk accessory's window (rDocProc): rounded corners and a black title bar, as the Calculator draws it in every Classic era.",
+      "selectors": [
+        ".rounded-window",
+        ".rounded-window.inactive",
+        ".rounded-title",
+        ".rounded-title > .close",
+        ".rounded-title > h2"
+      ],
+      "tokens": [
+        "--clio-rounded-bg",
+        "--clio-art-rdoc-mask-tl",
+        "--clio-art-rdoc-frame-tl"
+      ],
+      "accessibility": "Label the close box (aria-label=\"Close\") and keep the title a real heading. The corners are a mask: keep content 6px clear of them.",
+      "html": "<div class=\"rounded-window\" style=\"width: 160px; height: 90px\">\n  <div class=\"rounded-title\">\n    <button class=\"close\" aria-label=\"Close\"></button>\n    <h3>Calculator</h3>\n  </div>\n</div>",
+      "evidence": [
+        {
+          "era": "system6",
+          "claim": "A 1px black frame whose corners step in 5, 3, 2, 1, 1 pixels (the frame follows the same curve one pixel in); a 17-row black title bar ruled below; an 11px white close box at (9,4); the title in white, centred right of the close box. In the background: a white bar, a black title, no close box",
+          "status": "measured",
+          "source": "clio.css capture, System 6.0.8 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Calculator (Apple menu), frames rdoc-calc and rdoc-calc-inactive; tooling/rare-art.py",
+          "upstream": "specimens s6-rdoc-title, -title-inactive, -left, -bottom-left 100% identical"
+        },
+        {
+          "era": "system7",
+          "claim": "The same window in System 7.5.3",
+          "status": "measured",
+          "source": "clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Calculator, frame rdoc-calc",
+          "upstream": "specimens s7-rdoc-title and s7-rdoc-left 100% identical"
+        },
+        {
+          "era": "platinum",
+          "claim": "Mac OS 9.0 draws the old window unchanged, its title in the system font antialiased (white on black; black on white in the background)",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Calculator, frames rdoc-calc and rdoc-calc-inactive; levels in tooling/aa-palettes.py",
+          "upstream": "specimens p9-rdoc-title and -title-inactive 100% identical but for ten faint title pixels the font lacks (masked); the title's place fitted to this capture"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "Drawing Board leaves it as Platinum does",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Calculator, frame rdoc-calc",
+          "upstream": "specimen db-rdoc-title 100% identical (the same ten pixels masked)"
+        },
+        {
+          "era": "both",
+          "claim": "The Calculator's heavy right and bottom edge (3px) is its own drawing, not the window's",
+          "status": "inferred",
+          "source": "Inside Macintosh: Macintosh Toolbox Essentials (1992), ch. 4 (rDocProc drawn with a plain frame)",
+          "upstream": "the left edge is 1px in the same frames; no other rDocProc window was found"
+        }
+      ]
+    },
+    {
+      "id": "side-utility-window",
+      "name": "Side-title utility window",
+      "summary": "A floating window whose title bar runs down its left side (kWindowFloatSide*): close box at the top, collapse box at the foot.",
+      "selectors": [
+        ".window.utility.side",
+        ".window.utility.side.inactive"
+      ],
+      "tokens": [],
+      "accessibility": "The title is not drawn but stays in the markup for assistive technology; label both boxes.",
+      "html": "<div class=\"window utility side\" style=\"width: 200px; height: 80px\">\n  <div class=\"title-bar\">\n    <button class=\"close\" aria-label=\"Close\"></button>\n    <h3 class=\"title\">Tools</h3>\n    <button class=\"collapse\" aria-label=\"Collapse\"></button>\n  </div>\n  <div class=\"window-pane\"></div>\n</div>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "The utility window's frame (1px black, white light top and left, #999 shade right and bottom, the drop from the second row and column); a 10px #ccc bar down the left with the 10x10 close box at its top, the dot pattern from 12px below it to 12px above the foot, and the collapse box turned on its diagonal at the foot; no title. In the background: #555 frame and drop on flat #ddd",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Appearance SDK's sample (Developer > Appearance SDK > Appearance Sample, Examples > Side Utility Window), frame side-utility; tooling/rare-art.py",
+          "upstream": "specimens p9-side-bar, -top, -right, -bottom, -inactive 100% identical"
+        },
+        {
+          "era": "both",
+          "claim": "Without a collapse box the dot pattern keeps the same 12px from the foot",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "the sample's window has both boxes"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "As the top-title utility window: Platinum's bar and boxes inside the Drawing Board document window's paper and frame pieces; the theme's own side-window pieces (Util LSide pictures 6205-6214) are not reproduced",
+          "status": "adapted",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the same sample, frame side3 in the rc8 run",
+          "upstream": "captured, not drawn"
+        },
+        {
+          "era": "system7",
+          "claim": "System 7 had no side-title window in the Toolbox; the class keeps System 7's top-title utility window",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Mac OS 8 Toolbox Reference: kWindowFloatSideProc came with the Appearance Manager"
+        },
+        {
+          "era": "system6",
+          "claim": "Likewise System 6",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "placard",
+      "name": "Placard",
+      "summary": "A framed strip for status or a small control at the foot of a window, beside the horizontal scroll bar.",
+      "selectors": [
+        ".placard",
+        ".placard[aria-disabled=true]"
+      ],
+      "tokens": [],
+      "accessibility": "A status placard that changes is a live region (role=status); a placard that acts is a <button class=\"placard\">.",
+      "html": "<span class=\"placard\" role=\"status\" style=\"width: 64px\">Page 1</span>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "1px black, white light on the top and left, #aaa shade on the right and the bottom (the corners they would share left #ddd), a #ddd face. Disabled: a #555 frame on #eee",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Appearance SDK's CDEF Tester (CDEF Tester > Placard, 100x50, and Disable), frames placard and placard-disabled",
+          "upstream": "specimens p9-placard and p9-placard-disabled 100% identical; held not shown by the tester"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "A #cebdb5 face in the pencil line (its commonest shade, #555; it drifts from #333 to #888); disabled, #cdc6bd with a faint #b6ada5 line along the top only",
+          "status": "adapted",
+          "source": "clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the CDEF Tester, frames placard and placard-disabled",
+          "upstream": "faces 100% identical (db-placard-face, -disabled-face); the drifting pencil drawn flat"
+        },
+        {
+          "era": "both",
+          "claim": "The text in the era's small font, 4px in",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "the tester's placard is empty"
+        },
+        {
+          "era": "system7",
+          "claim": "Before the Appearance Manager there was no placard control (applications drew their own); a 1px frame on the paper",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "Mac OS 8 Human Interface Guidelines (1997), ch. 2 (placards)"
+        },
+        {
+          "era": "system6",
+          "claim": "Likewise System 6",
+          "status": "adapted",
+          "source": "clio.css",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "split-bar",
+      "name": "Split bar",
+      "summary": "The bar above a vertical scroll bar that splits a window into panes, and the split line between two panes.",
+      "selectors": [
+        ".split-view",
+        ".split-bar",
+        ".split-line"
+      ],
+      "tokens": [
+        "--clio-split-bar-height",
+        "--clio-split-line-1",
+        "--clio-split-bg",
+        "--clio-split-ink"
+      ],
+      "accessibility": "role=separator. If your script lets people move it, make it focusable with aria-valuenow and arrow keys; clio.css only draws it.",
+      "html": "<div class=\"split-view\" style=\"width: 220px; height: 120px\">\n  <div class=\"split-bar\" role=\"separator\" aria-label=\"Split\"></div>\n  <div style=\"flex: 1; padding: 0 8px\">Opening paragraphs…</div>\n  <div class=\"split-line\" role=\"separator\"></div>\n  <div style=\"flex: 1; padding: 4px 8px\">…and the conclusion.</div>\n</div>",
+      "evidence": [
+        {
+          "era": "platinum",
+          "claim": "7 rows of black across the scroll bar's width, at its top; split, the bar tops the lower pane's scroll bar and the split line runs across the content as two black lines on its fourth and sixth rows",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): BBEdit 5.1 (Developer folder), frames split-bar and split-line",
+          "upstream": "specimens p9-split-bar and p9-split-line 100% identical; the dragged 3-row grey outline is not drawn"
+        },
+        {
+          "era": "drawingboard",
+          "claim": "The same (the bar is the application's drawing, not the theme's)",
+          "status": "inferred",
+          "source": "clio.css",
+          "upstream": "BBEdit 5.1 not opened in Drawing Board"
+        },
+        {
+          "era": "system7",
+          "claim": "A control 5 pixels high by the width of the scroll bar at its top; the split line two lines with a one-pixel space",
+          "status": "inferred",
+          "source": "Macintosh Human Interface Guidelines (1992), ch. 5: Splitting a Window",
+          "upstream": "BBEdit 2.1.3 in System 7.5.3 has no split bar; no other application with one was found"
+        },
+        {
+          "era": "system6",
+          "claim": "The same as System 7",
+          "status": "inferred",
+          "source": "Macintosh Human Interface Guidelines (1992), ch. 5",
+          "upstream": "—"
+        }
+      ]
+    },
+    {
+      "id": "typography",
+      "name": "Type and tokens",
+      "summary": "The fonts, the palette and every --clio-* custom property you can override.",
+      "selectors": [
+        ".clio",
+        ".text",
+        ".heading",
+        ".display",
+        "[data-era=system6]",
+        "[data-era=platinum]"
+      ],
+      "tokens": [
+        "--clio-ink",
+        "--clio-paper",
         "--clio-font-chrome",
         "--clio-font-text",
         "--clio-font-display",
+        "--clio-font-cjk",
         "--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\">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>",
+      "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  <p class=\"text\" lang=\"zh-Hant\">繁體中文、<span lang=\"ja\">日本語</span>、<span lang=\"ko\">한국어</span>：lang 屬性換上像素字型</p>\n</div>",
       "evidence": [
         {
           "era": "system7",
@@ -1450,6 +2482,55 @@
           "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": "system7",
+          "claim": "Japanese (KanjiTalk 7.5.3) draws at the Roman geometry: menu bar 20px, menu rows 16px with the text at 15px from the menu's edge, alert text 16px apart, the baseline where Chicago's is; Osaka 12's kanji run from 10px above the baseline to 1px below, as the stand-in's do (pixel specimens s7-ja-menu-items, s7-ja-alert-text compare the ink rows, glyphs masked)",
+          "status": "measured",
+          "source": "clio.css capture, KanjiTalk 7.5.3 in Infinite Mac (tooling/emulator/measure-cjk.sh), frames kt-file-menu, kt-page-setup",
+          "upstream": "Apple KanjiTalk 7.5.3"
+        },
+        {
+          "era": "system7",
+          "claim": "A localized system's system font is the script's: KanjiTalk draws Latin in the chrome (the window title Infinite HD, OK, the clock) in Osaka, so under :lang(ja|zh|ko) the CJK fonts lead every font stack",
+          "status": "measured",
+          "source": "clio.css capture, KanjiTalk 7.5.3 in Infinite Mac, frames kt-hd-active, kt-page-setup",
+          "upstream": "Apple KanjiTalk 7.5.3"
+        },
+        {
+          "era": "platinum",
+          "claim": "Chinese in Mac OS 9 menus: 16px pop-up rows, ink 2px below the row's top to 12px, 1-bit, 12px ideographs (pixel specimen p9-zh-popup-open compares the ink rows, glyphs masked); a Roman system with the Language Kits keeps Charcoal for Latin",
+          "status": "measured",
+          "source": "clio.css capture, Mac OS 9.0 with the Traditional and Simplified Chinese Language Kits from the Mac OS 9.0 CD in Infinite Mac (tooling/emulator/measure-cjk.sh), Text control panel, Script pop-up held open (frame p9-script-popup-open)",
+          "upstream": "Apple Mac OS 9.0 Language Kits"
+        },
+        {
+          "era": "both",
+          "claim": "CJK stand-in: Fusion Pixel 12px proportional per language (Clio Pixel TC, SC, JA, KO), cut to the bitmap interface font's character set (Big5 93.7%, GB 2312 99.1%, JIS X 0208 99.5%, KS X 1001 97.4% covered) with Clio's vertical metrics (ascent 11, descent 3); after the period names Taipei, Beijing, Osaka, Seoul, before the outline families (Apple LiGothic, Hei, AppleGothic), and fetched only for text in that language",
+          "status": "third-party",
+          "source": "fonts/FusionPixel12-*.woff2, tooling/cjk-fonts.py, src/96-cjk.css",
+          "upstream": "Fusion Pixel Font 2026.11.10 (TakWolf, OFL-1.1, no Reserved Font Name)"
+        },
+        {
+          "era": "both",
+          "claim": "System 6, Drawing Board, and Chinese and Korean on System 7 take the same CJK stacks without a measurement: Infinite Mac has no KanjiTalk 6 and no Chinese or Korean system, and the Korean Language Kit did not fit the Mac OS 9.0 disk beside the Chinese ones",
+          "status": "inferred",
+          "source": "src/96-cjk.css, 97-cjk-platinum.css, 98-cjk-drawingboard.css",
+          "upstream": "the measured KanjiTalk 7.5.3 and Mac OS 9.0 rows above"
+        },
+        {
+          "era": "both",
+          "claim": "Small text (9px) keeps the 9px Latin face and draws CJK in the 12px stand-in scaled down: KanjiTalk's Finder drew 8px kanji there from a 9-point Osaka clio.css does not have",
+          "status": "adapted",
+          "source": "src/96-cjk.css (--clio-font-small)",
+          "upstream": "frame kt-hd-active (the window's information line)"
+        },
+        {
+          "era": "both",
+          "claim": "clio.js gives each row of a pop-up it draws its option's language, so :lang() reaches the menu, which hangs off the era's root",
+          "status": "adapted",
+          "source": "js/clio.js openPopup; tooling/behaviour.mjs cjk checks",
+          "upstream": "web-only"
+        },
         {
           "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",