clio.css 0.9.2 → 0.12.0

package/AGENTS.md

@@ -29,13 +29,17 @@ For AI coding agents using or changing this repository.
   `tooling/s6-art.py`, `tooling/tab-art.py`, `tooling/db-art.py`). Name the capture or
   resource it was measured from in its evidence row. Large textures and illustrations
   (Drawing Board's paper and sketch lines) are not reproduced: use the dominant measured
-  colour and label it `adapted`.
+  colour and label it `adapted`. For the Mac OS X eras the owner chose otherwise (D4 in
+  ROADMAP-MACOSX.md): every part, large textures included, is redrawn pixel by pixel.
   Third-party art needs a licence entry in `THIRD-PARTY.md`.
-- Scope (owner decision, 2026-11-13): eras that can be measured in an emulator —
-  System 6, System 7, Drawing Board (Mac OS 8.5b6, as "System 8"), Platinum (as
-  "System 9"), Mac OS X 10.0–10.4 (Aqua to Tiger), NeXTSTEP. Order: Aqua next. clio.css
-  feeds back into AI System 6, so AI System 6's own chrome (Control Strip, …) is in scope
-  with its markup (owner, 2026-11-14). Launch posts (awesome lists, Show HN) wait for Aqua.
+- Scope (owner decisions, 2026-11-13 and 2026-11-14): eras that can be measured in an
+  emulator — System 6, System 7, Drawing Board (Mac OS 8.5b6, as "System 8"), Platinum
+  (as "System 9"), and for the Mac OS X phase Aqua (10.2), Tiger (10.4), NeXTSTEP 3.3,
+  Snow Leopard (10.6), Lion (10.7), Yosemite (10.10) and Big Sur (11), plus the laptops
+  behind AI System 6's Pocket Desk (`clio.machines.css`). Never Dewfall, AI System 6's
+  own glass skin. clio.css feeds back into AI System 6, so AI System 6's own chrome
+  (Control Strip, Dock, …) is in scope with its markup. Launch posts (awesome lists,
+  Show HN) wait for Aqua. The plan and the decisions behind it: ROADMAP-MACOSX.md.
 - Tokens live on `:root, [data-era="system6"]` (01-tokens.css),
   `[data-era="system7"]` (80-system7.css), `:is([data-era="platinum"],
   [data-era="drawingboard"])` (90-platinum.css, shared: both are Appearance Manager

package/EVIDENCE.md

@@ -2,22 +2,38 @@
 
 Generated from `components/index.mjs` by `npm run build`; edit there.
 
-Every value in clio.css 0.9.2 has a row here. Sources are paths in the AI System 6 development tree at commit `b75cd4ed` (public mirror: https://github.com/surfine/AI-System-6; some evidence folders such as `internal/` are private). The images measurements were taken from are evidence only; clio.css never ships them.
+Every value in clio.css 0.12.0 has a row here. Sources are paths in the AI System 6 development tree at commit `b75cd4ed` (public mirror: https://github.com/surfine/AI-System-6; some evidence folders such as `internal/` are private). The images measurements were taken from are evidence only; clio.css never ships them.
 
 | Status | Meaning | Rows |
 | --- | --- | ---: |
-| Measured | read from real pixels of the era | 118 |
-| Inferred | reasoned from documentation or behaviour, not measured | 8 |
-| Adapted | a deliberate departure for the web (touch, focus, contrast) | 9 |
-| Third-party | art or font from a named, licensed project | 2 |
+| Measured | read from real pixels of the era | 195 |
+| Inferred | reasoned from documentation or behaviour, not measured | 26 |
+| Adapted | a deliberate departure for the web (touch, focus, contrast) | 34 |
+| Third-party | art or font from a named, licensed project | 3 |
 
 Pixel check: `npm run fidelity` renders the Platinum specimens and compares them with AI System 6's GUIdebook Mac OS 9.0 reference crops (it needs a local AI System 6 checkout; see the script).
 
 | Component | Era | Value | Status | Source — upstream evidence |
 | --- | --- | --- | --- | --- |
+| Window | System 7 | 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 | Measured | `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` — QuickDraw DragGrayRgn of the window's structure region |
+| Window | System 6 | clio.js: as System 7: a 1px grey outline around the window and its shadow, the gray on the odd pixels | Measured | `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` — QuickDraw DragGrayRgn |
+| Window | Platinum | 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 | Measured | `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` — Drawing Board assumed the same (inferred) |
+| Window | Drawing Board | 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) | Measured | `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` — 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 |
+| Window | System 7 | clio.zoomRects(): 8 outlines, one per tick, each edge eased by 1.6^k, the last four on screen at once | Measured | `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)` — opacity only; none under prefers-reduced-motion |
+| Window | Platinum | 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 | Measured | `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)` — each edge within a pixel of the fit (the Finder's rounding is not known); opacity only, none under prefers-reduced-motion |
+| Window | Drawing Board | clio.zoomRects(): as Mac OS 9: 6 outlines in the 2px band, one per tick, at about 1.4^(k-7) of the way | Measured | `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)` — the Finder of 8.5 and 9.0 agree |
+| Window | All eras | 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 | Adapted | `iOS Simulator (iPhone 18 Pro, Safari), driven by touch events` — not checked on a physical iPhone |
+| Window | All eras | 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 | Adapted | `modern-web-guidance drag guide; WCAG 2.5.7 Dragging Movements` — the Mac moved windows only by dragging |
+| Window | Platinum | 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" | Measured | `Mac OS 9.0 in Infinite Mac, Appearance > Options: "Double-click title bar to collapse windows" off` — 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) |
+| Window | System 7 | 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 | Measured | `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` — 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 |
+| Window | Drawing Board | 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 | Measured | `clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Infinite HD's collapse box clicked (frame collapsed)` — specimens db-collapsed-left and db-collapsed-right 100% identical in all three engines (the box and its shadow; a window behind is masked) |
+| Window | All eras | 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) | Measured | `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` — System 6 and Drawing Board assumed the same (inferred); the watch was not captured |
+| Window | All eras | 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 | Measured | `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` — the animation is not drawn; System 6's watch not captured |
 | Window | System 7 | 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) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame hd-window` — 99.1% identical; agrees with AI System 6 internal/evidence/drafts/system-7-reference |
 | Window | System 7 | 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 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames hd-window, held-close, held-zoom` — System 7.5.3 Finder window Infinite HD |
 | Window | System 7 | Background window: #555 frame, plain white title bar, #888 title, black drop shadow | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame folder-window` — 99.98% identical |
+| Window | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames appearance, collapsed; GUIdebook Appearance and Web Sharing)` — 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 |
+| Window | System 7 | Shaded (WindowShade) window: 19px, the title bar's bottom line serving as the frame's foot, the shadow 1px in under it | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frame shaded)` — specimen s7-collapsed 100% identical |
 | Window | System 6 | 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 | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window rows 27–45` — agrees with AI System 6 apps/desktop/styles/00-foundation.css:906 (emulator, 2x) |
 | Window | System 6 | Close and zoom boxes: 11px squares on the stripe band, 8px in from each inner edge, with 1px of paper between box and stripes (AI System 6 uses 3px) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window Macintosh HD |
 | Window | System 6 | Title cut-out: about 6px of paper either side of the name (7px left, 5px right including the glyph's side bearing) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window` — System 6.0.8 Finder window |
@@ -36,6 +52,18 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Window | Drawing Board | 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 | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance` — close box 1:1 at (166,73), collapse box 1:1 at (621,73) |
 | Window | Drawing Board | Close, zoom and collapse box art, normal and held | Measured | `the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — WindowLargeCloseBox, WindowLargeZoom, WindowLargeCollapse; each found 1:1 in the capture |
 | Window | Drawing Board | 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 | Adapted | `clio.css` — the rule behind the shift was not found from these captures |
+| Window | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame switcher (Application Switcher)` — both ends of the title bar 100% identical |
+| Window | Drawing Board | 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 | Inferred | `clio.css` — Application Switcher, Mac OS 8.5 |
+| Window | System 7 | Utility windows are the document window's parts at a 13px title bar | Inferred | `clio.css` — Macintosh Human Interface Guidelines (1992), ch. 5: floating windows; none on the captured screens |
+| Window | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame nav (Navigation Services Open)` — left end 100% identical; the right end not compared |
+| Menu bar and menus | Platinum | clio.js: a chosen item blinks 3 times, 3 ticks dark and 3 lit, before the menu closes and the command runs | Measured | `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)` — General Controls' default Menu Blinking |
+| Menu bar and menus | Drawing Board | clio.js: as Mac OS 9: 3 blinks of about 3 ticks; a menu opened with a click stays open | Measured | `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)` — Appearance > Options in 8.5: Smart Scrolling and double-click collapse both off |
+| Menu bar and menus | System 6 | clio.js: as Mac OS 9: the chosen item blinks 3 times, about 3 ticks dark and 3 lit | Measured | `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)` — MenuFlash 3 |
+| Menu bar and menus | System 7 | clio.js: as Mac OS 9: 3 blinks of about 3 ticks | Measured | `clio.css capture, System 7.5.3 in Infinite Mac, Edit > Show Clipboard released (dark at 63, 147, 246 ms; gone at 346 ms)` — MenuFlash 3 |
+| Menu bar and menus | All eras | clio.js: a submenu opens 9 ticks after its item lights (MenuDelay 8 ticks, polled) | Measured | `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)` — the same code in System 6, System 7 and Mac OS 9 |
+| Menu bar and menus | All eras | 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 | Measured | `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)` — replaces the cone from the previous pointer position, re-armed on every move (0.11.0) |
+| Menu bar and menus | Platinum | 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 | Measured | `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` — --clio-menu-sticky |
+| Menu bar and menus | All eras | 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 | Adapted | `WAI-ARIA Authoring Practices, menubar pattern (via modern-web-guidance app-menus and menu)` — 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 |
 | Menu bar and menus | System 7 | Menus keep System 6's rows and black highlight; disabled items and the separator are solid #888 instead of a dither | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame file-menu` — separator row 100% identical |
 | Menu bar and menus | System 6 | Menu bar: 20 rows with the rule on the last; an open title inverts rows 1–18, about 9px either side of the word | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
 | Menu bar and menus | System 6 | 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 | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — System 6.0.8 Finder File menu |
@@ -45,10 +73,15 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Menu bar and menus | Platinum | Menu bar: #ddd, white top line, #999 bottom line, 1px black rule, 20px; open title #333399 with #6666cc/#000088 lines | Measured | `apps/desktop/styles/65-appearance-themes.css:298, :45` — Mac OS 9 native menu bar captures 02/04 |
 | Menu bar and menus | Platinum | Menu: no top rule, white/#999 inner bevel, #222 1px drop; 16px rows at weight 600; highlight #333399 with #6666cc/#000088 side columns | Measured | `apps/desktop/styles/65-appearance-themes.css:912 (P21), :917 (P24)` — GUIdebook Mac OS 9.0 Apple menu (Theme Lab specimen apple-menu) |
 | Menu bar and menus | Platinum | Separator: a 6px row with #888 on its third line and white on its fourth, the full width of the menu | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame file-menu` — between Close Window and Get Info |
-| Menu bar and menus | Platinum | Menu check mark (9x8, antialiased, recovered from the white-on-#339 chosen item) and the 6x11 submenu arrow, redrawn from Mac OS 9.0 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames popup-open and file-menu; tooling/p9-art.py` — replaces the classic-stylesheets art used before 0.8.0 |
+| Menu bar and menus | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames popup-open and file-menu; tooling/p9-art.py` — replaces the classic-stylesheets art used before 0.8.0 |
 | Menu bar and menus | Drawing Board | 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 | Measured | `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` — File, Edit, Apple and Control Panels menus agree |
 | Menu bar and menus | Drawing Board | The chosen menu title and item are underlined in pencil instead of inverted | Measured | `the theme file's pxm# pixmaps, decoded by tooling/theme-resources.py and redrawn by tooling/db-art.py` — Menu_Title_Underline_Center, Menu_Item_underline_center; the title underline is visible under File in the capture |
 | Menu bar and menus | Drawing Board | Menu item underline: left 16px in, right 15px in, its middle piece tiled (the Appearance pop-up's ends 16px from both sides) | Measured | `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` — Energy Saver in the Control Panels menu |
+| Menu bar and menus | System 7 | 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 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac, frame hig/system7/cp` — Control Panels submenu; the up arrow inferred |
+| Menu bar and menus | Drawing Board | Menu scroll arrows are the theme's 364 (down) and 389 (up) | Measured | `the theme file's pxm#` — the down arrow found in the Control Panels submenu |
+| Menu bar and menus | All eras | 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 | Measured | `clio.css captures, frames hig/*/app-menu, help-menu, apple-menu, cp` — positions not compared pixel by pixel |
+| Push button | All eras | clio.js: a held button draws pressed only while the pointer is on it; released elsewhere it does nothing | Inferred | `Inside Macintosh: Macintosh Toolbox Essentials (1992), TrackControl` — data-clio-off turns the held look off; browsers already click only on release over the button |
+| Push button | All eras | clio.js: Return or Enter presses the default button, Esc or Cmd-. the Cancel button, after showing it pressed for 8 ticks | Measured | `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)` — Esc and Cmd-. from the Macintosh Human Interface Guidelines (1992), ch. 6 |
 | Push button | System 7 | Push buttons and the default ring stay black and white, as in System 6 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup (OK)` — 93.8% identical; a few ring corner pixels differ |
 | Push button | System 6 | Push button: 20px tall, 1px ink round rectangle with corners of about 4px, paper face, Chicago 12 (AI System 6 uses 7px corners) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert, OK button 60×20` — System 6.0.8 stop alert |
 | Push button | System 6 | Pressed: the whole button inverts to ink with paper text | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame button-pressed (Cancel held in a TeachText alert)` — System 6.0.8 |
@@ -79,16 +112,26 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Radio button | Drawing Board | Radio button: the theme's 16x12 pictures; image 0 off, 1 on, 2 pressed, 3/4 disabled | Measured | `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` — off and on found 1:1 (Documents, Menu Bar Clock) |
 | Text field | System 7 | As System 6: a 1px black frame with the text 3px in | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Currency Symbol)` — System 7.5.3 |
 | Text field | System 6 | 1px ink frame, white, text inset 3px | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame control-panel (RAM Cache field), get-info (comments)` — System 6.0.8 |
+| Text field | System 7 | 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 | Measured | `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)` — specimen s7-js-caret 100% identical in all three engines; npm run behaviour checks the blink, the hand-over and the opt-out |
+| Text field | All eras | clio.js: the same insertion point shape in every era (System 6, Mac OS 8 and 9 use TextEdit's) | Inferred | `the System 7 measurement` — the shape not measured outside System 7.5.3; the blink is (row below) |
 | Text field | Platinum | White field, 1px black frame, #888 shadow above-left and white etch below-right | Measured | `apps/desktop/styles/65-appearance-themes.css:935 (P30)` — Infinite Mac Mac OS 9.0 capture |
 | Text field | Platinum | Focus: a 2px #6666cc ring | Measured | `apps/desktop/styles/65-platinum-utility.css:38` — Mac OS 9 capture platinum-native/10b-fonts-tab |
 | Text field | Drawing Board | 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 | Measured | `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` — both Date & Time fields agree |
+| Text field | Platinum | Keyboard focus: a 2px ring of #6666cc (Purple highlight) round the field, its outer corners left out; list boxes take it too | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame date-time-edit` — 100% identical |
+| Text field | All eras | 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 | Measured | `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` — 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) |
+| Pop-up menu | All eras | Open pop-up menu: the era's menu laid over the button, the current item on the button's row, checked | Inferred | `clio.css capture, Mac OS 9.0 in Infinite Mac, SimpleText Text Style (frame platinum9/cl-size-popup)` — 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 |
+| Pop-up menu | Platinum | 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 | Measured | `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)` — specimens p9-js-popup-open (clio.js, all three engines) and p9-popup-open (base-select, Chromium and WebKit) 100% identical |
+| Pop-up menu | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frame fonts-popup-open); tooling/p9-art.py and frame-art.py` — specimens p9-js-popup-open-arrows and p9-popup-open-arrows (select:open) 100% identical |
 | Pop-up menu | System 7 | 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 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame numbers (Number Format)` — 100% identical; the triangle is System 7's addition |
 | Pop-up menu | System 6 | 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 | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and popup-held (Standard File folder menu)` — the down triangle arrived with System 7 |
+| Pop-up menu | System 7 | 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) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac, Memory control panel with virtual memory off (Select Hard Disk; frame memory)` — specimen s7-popup-disabled 100% identical in Chromium and Firefox; WebKit ignores mask-clip: no-clip, so the dimmed shadow is not drawn there |
+| Pop-up menu | System 6 | Dimmed: as System 7, the control through the 50% gray | Inferred | `the System 7 measurement; no dimmed pop-up menu found in System 6.0.8's control panels and Finder` — dimmed buttons and items use the same pattern there (measured) |
 | Pop-up menu | Platinum | #ddd, 3px corners, white/#aaa bevel, bold label, a separate bevelled arrow part with the 7x10 arrow | Measured | `apps/desktop/styles/65-appearance-themes.css:1916 (P31)` — GUIdebook Mac OS 9.0 (popup-normal specimen), native 09b |
 | Pop-up menu | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frame appearance-tab` — "Apple platinum" pop-up, 96.7% identical (p9-popup-end) |
 | Pop-up menu | Platinum | Arrow art (7x10), black, and #888 when disabled | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (npm run capture:platinum), frames appearance-tab and appearance; tooling/p9-art.py` — replaces classic-stylesheets dropdown.svg |
 | Pop-up menu | Drawing Board | 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 | Measured | `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` — Appearance, Highlight Color and Variation pop-ups |
-| List box | System 7 | As System 6: a selected row inverts across the list | Inferred | `seen in the Keyboard control panel during capture; not pixel-checked` — System 7.5.3 |
+| Pop-up menu | Drawing Board | 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 | Measured | `clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Appearance > Appearance held (frame popup-open)` — 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 |
+| List box | System 7 | As System 6: a selected row inverts across the list | Inferred | `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` — System 7.5.3 |
 | List box | System 6 | White list, 1px ink frame, 16px rows; a selected row inverts across the whole list width | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames save-dialog and list-selected (Standard File)` — System 6.0.8 TeachText Save As |
 | List box | Platinum | Selection is lavender #ccccff with black text | Measured | `apps/desktop/styles/65-appearance-themes.css:128` — GUIdebook Mac OS 9.0 Open dialog (open-list-scrollbar specimen) |
 | List box | Platinum | Rows carry no divider | Measured | `apps/desktop/styles/65-appearance-themes.css:860 (P10)` — Mac OS 9 native list capture 21 |
@@ -101,10 +144,22 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Scroll bar | System 6 | Up and down arrows: hollow, 13 wide and 11 tall in the 14px box, a 45° head and a 7px stem | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frames hd-window and system-folder` — redrawn as pixels in tooling/s6-art.py |
 | Scroll bar | System 6 | Left and right arrows: the up arrow turned, apex in the box's first column, tip in its last | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame hd-window (horizontal scroll bar)` — redrawn as pixels in tooling/s6-art.py |
 | Scroll bar | System 6 | Grow box: a 7×7 square over a 9×9 square in the 14px corner | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame system-folder` — redrawn as pixels in tooling/s6-art.py |
-| Scroll bar | All eras | The scroll box grows with the visible fraction instead of a fixed 16px square | Adapted | `clio.css` — browsers size ::-webkit-scrollbar-thumb themselves |
+| Scroll bar | All eras | Without clio.js the scroll box grows with the visible fraction instead of keeping its fixed length | Adapted | `clio.css` — browsers size ::-webkit-scrollbar-thumb themselves; load dist/clio.js for the fixed box |
+| Scroll bar | System 7 | 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 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frames hig/system7/finder-scroll and finder-thumb-drag)` — specimen s7-js-scroll-top 100% identical |
+| Scroll bar | System 6 | 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 | Measured | `clio.css capture, System 6.0.8 in Infinite Mac, System Folder list, the box pressed and held 56px lower (frame scroll-box-drag)` — specimen s6-js-scroll-drag 100% identical in Chromium, WebKit and Firefox (the pointer masked) |
+| Scroll bar | All eras | 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 | Measured | `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` — specimen s7-js-hscroll-lane 100% identical; without clio.js the dots may sit one step along (adapted) |
+| Scroll bar | System 7 | Horizontal bar: the vertical bar turned, its box the #555 line and 15 columns after the left arrow's black line | Measured | `clio.css capture, System 7.5.3 in Infinite Mac, Infinite HD narrowed until it scrolls sideways (frame hbar)` — specimens s7-scroll-left, s7-scroll-right, s7-hscroll-thumb 100% identical |
+| Scroll bar | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac with Smart Scrolling off (frames hig/platinum9/finder-scroll-fixed, finder-thumb-drag)` — specimen p9-js-scroll-fixed 100% identical; the 16px bar before 0.11 was a pixel too wide and tall |
+| Scroll bar | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac, Appearance > Options > Smart Scrolling on (frame hig/platinum9/finder-scroll-smart)` — specimen p9-js-scroll-smart 100% identical; off by default, as in Apple's own Mac OS 9.0 screenshots |
+| Scroll bar | Platinum | clio.js: with nothing to scroll the lane is flat #eee, the arrows dimmed, the lines beside them #555 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frame hig/platinum9/finder-scroll-fixed, horizontal bar)` — specimen p9-js-scroll-off-h 100% identical |
+| Scroll bar | All eras | 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) | Measured | `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)` — Drawing Board assumed as Mac OS 9 (inferred) |
+| Scroll bar | All eras | clio.js: an arrow step is 16px and a lane step the visible height less 16px; repeats every 50 ms | Adapted | `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` — applications chose their own step and page |
+| Scroll bar | Platinum | A held scroll arrow: #777 face, #555 along the top and left, #999 along the bottom and right, the other two corners #777 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac, Finder, the down arrow held at its corner (frame arrow-held)` — specimen p9-js-scroll-arrow-held 100% identical in all three engines (the pointer masked) |
 | Scroll bar | Platinum | Lane #aaa with a double bevel; lavender #9999ff scroll box with #ccf/#66c bevel and grip ridges; #ddd arrow boxes with stepped 2/4/6/8 arrows | Measured | `apps/desktop/styles/65-appearance-themes.css:336 (P16), :351 (P17), :364 (P27)` — Mac OS 9 native capture 16; GUIdebook Open dialog |
 | Scroll bar | Drawing Board | Scroll arrows: the theme's 16x16 boxes, normal, held and disabled, flush with the bar; the grow box is NoGrowBoxRight | Measured | `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` — left and right arrows found 1:1 at (192,297) and (570,297) |
-| Scroll bar | Drawing Board | 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) | Measured | `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` — the Themes list's horizontal bar and the pattern list's vertical bar |
+| Scroll bar | Drawing Board | 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 | Measured | `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` — the Themes list's horizontal bar and the pattern list's vertical bar |
+| Scroll bar | Drawing Board | clio.js: the scroll box keeps the theme's 15px whatever share of the content shows (Smart Scrolling off, the 8.5 default) | Measured | `clio.css capture, Mac OS 8.5 with the theme in Infinite Mac, Infinite HD at three sizes: the horizontal box 15px in each` — the browser's own bar sizes it by the share (adapted) |
+| Scroll bar | Drawing Board | 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 | Measured | `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#` — 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 |
 | Dialogs and alerts | System 7 | Alert frame: 1px black, a raised #ccf/#669 ring, #bbb, a sunken #669/#ccf ring, 1px black (5px, as in System 6) | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame page-setup` — 100% identical. An alert without a colour table keeps System 6's black frame (Monitors & Sound alert); clio.css draws the colour one |
 | Dialogs and alerts | System 6 | Modal frame: 1px ink, 2px paper, 2px ink, and no drop shadow | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame alert` — AI System 6 has two recipes, both off (84-clio-write.css:210 has a 1px gap) |
 | Dialogs and alerts | System 6 | Plain box: 1px ink frame and a 2px drop shadow | Inferred | `not measured` — altDBoxProc; none of the 6.0.8 Finder and TeachText dialogs opened for capture (alerts, Standard File, About the Finder) uses it |
@@ -113,10 +168,15 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Dialogs and alerts | Drawing Board | Alerts: the theme's eight Alert pictures (6127-6134) round the outline, edges tiled from their ends, on the window paper from 4px inside | Measured | `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` — every piece found 1:1 round Energy Saver's start-up notice |
 | Dialogs and alerts | Drawing Board | 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 | Measured | `clio.css capture, Mac OS 8.5 with Drawing Board (npm run capture:drawingboard), frame copy-progress-5` — Finder copy window; Movable_Modal pixmaps found 1:1 |
 | Dialogs and alerts | Drawing Board | Modal dialogs: the Modal pictures (6135-6142), which have the alert's sizes, placed the same way | Inferred | `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` — no modal dialog was on screen in the captures |
+| Dialogs and alerts | Platinum | Separator line (.separator, <hr class=separator>): etched, #888 then white one row lower and one column further right | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac, frame hig/platinum9/mouse` — 100% identical |
+| Dialogs and alerts | System 7 | Separator line: a 3px band of QuickDraw's 50% grey, aligned to the screen | Measured | `clio.css capture, System 7.5.3 in Infinite Mac, frame hig/system7/memory` — — |
+| Dialogs and alerts | System 6 | Separator line: 1px of ink | Inferred | `clio.css` — — |
 | Group box | System 7 | Native group box: a 1px grey line with the legend on it; the original alternates #777 and #888, drawn #777 here | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frames general-controls and numbers` — System 7.5.3 control panels |
 | Group box | System 6 | System 6 had no group box; clio.css draws a 1px ink frame with the legend on paper | Adapted | `clio.css` — 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) |
 | Group box | Platinum | Etched: #888 line with a white line inside and below | Measured | `apps/desktop/styles/65-appearance-themes.css:909 (P20)` — Mac OS 9 native group box |
 | Group box | Drawing Board | Group boxes: a 1px #777 line (#888 on the bottom and right edge), no bevel | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame general-controls` — Desktop group |
+| Group box | Platinum | Secondary group box (fieldset.secondary): one #888 line, no light | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/hig/platinum9), frame sound (Settings for selected device)` — — |
+| Group box | All eras | A check box or pop-up menu can title a group box from inside the legend | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (frames in .fidelity/platinum9), frame date-time (Use a Network Time Server)` — — |
 | Progress bar | System 7 | 11px, 1px black frame, #ccf track, #444 fill | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), frame copy-progress` — 100% identical |
 | Progress bar | System 6 | 12px tall, 1px ink frame, white track, fill in QuickDraw dkGray (one white dot in four) | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame copy-progress (Finder duplicating System Folder)` — redrawn as a pattern tile in tooling/s6-art.py |
 | Progress bar | Platinum | Barber-pole fill: ten 1px hard stops from #333399 through #eee to #000055 | Measured | `apps/desktop/styles/65-appearance-themes.css:937 (P32)` — Mac OS 9 native progress bar |
@@ -141,6 +201,60 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Desktop and icons | Platinum | 70% white tag with no edge; selected: black tag, white name, artwork darkened | Measured | `apps/desktop/styles/65-appearance-themes.css:882 (P12, P13)` — Mac OS 9 native capture 02 |
 | Desktop and icons | Platinum | Desktop colour #4a71ab | Inferred | `apps/desktop/styles/65-appearance-themes.css:85` — base colour of AI System 6's azul tile, generated from a 512 Pixels capture; the tile is not shipped |
 | Desktop and icons | Drawing Board | Desktop and icons are unchanged from Platinum; the theme's desktop pictures are not reproduced | Adapted | `clio.css` — scen 'Drawing Board on a Grid' / 'on Parchment' are Apple artwork |
+| Disclosure triangle | System 7 | 11px, a black outline with a blue and white checker inside, closed and open | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frames list and list-open (Finder, View by Name)` — Control Panels & Extensions |
+| Disclosure triangle | System 6 | System 6 had no disclosure triangle; it uses System 7's | Adapted | `clio.css` — Macintosh Human Interface Guidelines (1992), ch. 7 (outline triangles) |
+| Disclosure triangle | Platinum | 13px with its shadow, closed and open (the Finder list view) | Measured | `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` — 100% identical, both states |
+| Disclosure triangle | Drawing Board | The theme's 11px pictures, closed (340) and open (343, drawn through 16 bits) | Measured | `the theme file's pxm# and ppat resources (tooling/db-art.py)` — both found 1:1 in the Finder list view |
+| List view | System 7 | Headers in the small font on the window's white, the sorted one underlined, a double rule (black, white, black) below | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frame list` — Finder, View by Name |
+| List view | System 6 | System 6's list views have System 7's headers | Inferred | `clio.css` — not captured |
+| List view | Platinum | 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 | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame list` — 100% identical (labels left out: Geneva 10 is not among clio.css's fonts) |
+| List view | Drawing Board | #cdc6bd headers and a #9f9a94 sorted one, each line in its dominant colour; the theme draws these lines with pattern pens, not reproduced | Adapted | `clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame list-open` — Finder list view |
+| Slider | Platinum | A 7-row track (light, black, three grey, black, white), a 15x16 thumb pointing down, tick marks of white, black and #888 | Measured | `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` — track and thumb 100% identical; the held thumb was not captured |
+| Slider | Platinum | The thumb stops 3px inside the track at both ends (Firefox's thumb is held there by padding) | Measured | `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)` — specimens p9-slider-min and p9-slider-max 100% identical in Chromium, WebKit and Firefox |
+| Slider | All eras | Tick marks fall on whole pixels, (width - run) / (count - 1) rounded | Adapted | `clio.css` — each browser rounded a fractional spacing its own way; the Mac's tick placement was not measured |
+| Slider | Drawing Board | The theme's 9x16 thumb (1106, through 16 bits) on a 1px pencil track (ppat 7024) | Measured | `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` — thumb and track pen found 1:1; ticks not reproduced |
+| Slider | System 7 | System 7 had no slider in the Toolbox (each control panel drew its own); it uses Platinum's | Adapted | `clio.css` — Macintosh Human Interface Guidelines (1992), ch. 7: Controls Not Supported by the Toolbox |
+| Slider | System 6 | System 6 had none; it uses Platinum's | Adapted | `clio.css` — — |
+| Slider | All eras | A dial is a slider: the 1992 guidelines' "slider (sometimes called a dial)", HIG87's indicator that shows and sets a value | Inferred | `Macintosh Human Interface Guidelines (1992), ch. 7: Sliders` — no other dial control was found in any era |
+| Little arrows | System 7 | 15x25, an outlined rounded box with two outlined arrows | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity/hig/system7), frame memory (Cache Size)` — held and dimmed states not on screen; they keep the normal picture |
+| Little arrows | Platinum | 13x23, normal while its field is edited and dimmed otherwise | Measured | `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` — both 100% identical; held states were under the pointer |
+| Little arrows | Drawing Board | The theme's 13x21 pictures (350): normal, up held, down held, dimmed, through 16 bits | Measured | `the theme file's pxm# and ppat resources (tooling/db-art.py)` — dimmed found 1:1 in Date & Time |
+| Little arrows | System 6 | System 6 had none; it uses System 7's | Adapted | `clio.css` — — |
+| Bevel button | Platinum | #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 | Measured | `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)` — 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) |
+| Bevel button | Drawing Board | Drawn as the theme's push button (pens, corner pixels, hatch) | Inferred | `clio.css` — the Navigation Services bevel buttons were not matched pen for pen |
+| Bevel button | System 7 | Earlier eras had none; they use Platinum's | Adapted | `clio.css` — Mac OS 8 Human Interface Guidelines (1997), ch. 2 (Bevel Buttons) |
+| Bevel button | System 6 | System 6 had none; it uses Platinum's | Adapted | `clio.css` — — |
+| Chasing arrows | Platinum | 16x16, three frames read 0.7s apart (their order is not known); turned by a transform, not repainted | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frames netb-0..2 (Network Browser)` — first frame 100% identical |
+| Chasing arrows | Drawing Board | The theme's six frames (390) | Measured | `the theme file's pxm# and ppat resources (tooling/db-art.py)` — not on screen in the capture |
+| Chasing arrows | System 7 | Earlier eras showed a spinning watch cursor instead; they use Platinum's | Adapted | `clio.css` — — |
+| Chasing arrows | System 6 | System 6 had none; it uses Platinum's | Adapted | `clio.css` — — |
+| Help button | Platinum | 21x20, a small bevel button with the help icon | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame keyboard` — 100% identical |
+| Help button | Drawing Board | As the Keyboard control panel draws it | Measured | `clio.css capture, Mac OS 8.5 with Drawing Board in Infinite Mac (frames in .fidelity/hig/drawingboard), frame keyboard` — the held state was not captured |
+| Help button | System 7 | Earlier eras used a Help push button; they use Platinum's | Adapted | `clio.css` — Mac OS 8 Human Interface Guidelines (1997), ch. 2 (Help Button Layout) |
+| Help button | System 6 | System 6 had none; it uses Platinum's | Adapted | `clio.css` — — |
+| Image well | All eras | Drawn like the era's text field frame round a white face | Inferred | `clio.css` — no image well was on the captured screens (the Appearance desktop preview is a picture, not a well) |
+| Help balloon | Platinum | A rounded outline with a 2px drop on the right and below (10px corners), a tail rising from the top edge near the right | Measured | `clio.css capture, Mac OS 9.0 in Infinite Mac (driven by hand, frames in .fidelity/hig/platinum9), frame balloon (Infinite HD)` — top and bottom corners 100% identical; the tail's tip was under the pointer (inferred) |
+| Help balloon | System 7 | The same balloon in System 7 and Drawing Board | Measured | `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` — compared by eye, not pixel by pixel |
+| Help balloon | System 6 | System 6 had no Balloon Help; it uses the later balloon | Adapted | `clio.css` — Macintosh Human Interface Guidelines (1992), ch. 11 |
+| Rounded-corner window | System 6 | 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 | Measured | `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` — specimens s6-rdoc-title, -title-inactive, -left, -bottom-left 100% identical |
+| Rounded-corner window | System 7 | The same window in System 7.5.3 | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (frames in .fidelity, see tooling/fidelity.mjs): the Calculator, frame rdoc-calc` — specimens s7-rdoc-title and s7-rdoc-left 100% identical |
+| Rounded-corner window | Platinum | 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) | Measured | `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` — 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 |
+| Rounded-corner window | Drawing Board | Drawing Board leaves it as Platinum does | Measured | `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` — specimen db-rdoc-title 100% identical (the same ten pixels masked) |
+| Rounded-corner window | All eras | The Calculator's heavy right and bottom edge (3px) is its own drawing, not the window's | Inferred | `Inside Macintosh: Macintosh Toolbox Essentials (1992), ch. 4 (rDocProc drawn with a plain frame)` — the left edge is 1px in the same frames; no other rDocProc window was found |
+| Side-title utility window | Platinum | 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 | Measured | `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` — specimens p9-side-bar, -top, -right, -bottom, -inactive 100% identical |
+| Side-title utility window | All eras | Without a collapse box the dot pattern keeps the same 12px from the foot | Inferred | `clio.css` — the sample's window has both boxes |
+| Side-title utility window | Drawing Board | 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 | Adapted | `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` — captured, not drawn |
+| Side-title utility window | System 7 | System 7 had no side-title window in the Toolbox; the class keeps System 7's top-title utility window | Adapted | `clio.css` — Mac OS 8 Toolbox Reference: kWindowFloatSideProc came with the Appearance Manager |
+| Side-title utility window | System 6 | Likewise System 6 | Adapted | `clio.css` — — |
+| Placard | Platinum | 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 | Measured | `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` — specimens p9-placard and p9-placard-disabled 100% identical; held not shown by the tester |
+| Placard | Drawing Board | 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 | Adapted | `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` — faces 100% identical (db-placard-face, -disabled-face); the drifting pencil drawn flat |
+| Placard | All eras | The text in the era's small font, 4px in | Inferred | `clio.css` — the tester's placard is empty |
+| Placard | System 7 | Before the Appearance Manager there was no placard control (applications drew their own); a 1px frame on the paper | Adapted | `clio.css` — Mac OS 8 Human Interface Guidelines (1997), ch. 2 (placards) |
+| Placard | System 6 | Likewise System 6 | Adapted | `clio.css` — — |
+| Split bar | Platinum | 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 | Measured | `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` — specimens p9-split-bar and p9-split-line 100% identical; the dragged 3-row grey outline is not drawn |
+| Split bar | Drawing Board | The same (the bar is the application's drawing, not the theme's) | Inferred | `clio.css` — BBEdit 5.1 not opened in Drawing Board |
+| Split bar | System 7 | 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 | Inferred | `Macintosh Human Interface Guidelines (1992), ch. 5: Splitting a Window` — BBEdit 2.1.3 in System 7.5.3 has no split bar; no other application with one was found |
+| Split bar | System 6 | The same as System 7 | Inferred | `Macintosh Human Interface Guidelines (1992), ch. 5` — — |
 | Type and tokens | System 7 | System 7 keeps System 6's fonts: Clio Sans '84 for chrome, Clio Text '84 for text | Measured | `clio.css capture, System 7.5.3 in Infinite Mac (npm run capture:system7), title bar text` — the title Infinite HD matches pixel for pixel |
 | Type and tokens | System 6 | 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 | Measured | `clio.css capture, System 6.0.8 Key Caps (npm run capture:keycaps → tooling/extract-glyphs.py → fonts-src/clio-sans-84.txt)` — title bar 100% and default OK button 99.7% identical to the real screen |
 | Type and tokens | System 6 | 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 | Measured | `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` — TeachText's first line and the Finder info line are 100% identical to the real screen |
@@ -151,4 +265,11 @@ Pixel check: `npm run fidelity` renders the Platinum specimens and compares them
 | Type and tokens | Platinum | Palette #fff #ddd #ccc #999 #777 #000, accent #333399, lavender #ccccff | Measured | `tooling/classic-platinum-fidelity-contract.json (platinum.palette)` — Mac OS 9 captures |
 | Type and tokens | System 6 | Disabled text (menu items, button and control labels) through the screen-aligned 50% gray pattern | Measured | `clio.css capture, System 6.0.8 in Infinite Mac (npm run capture:system6), frame file-menu` — --clio-disabled-dither: none gives solid #696969 (5.6:1 on white) |
 | Type and tokens | Drawing Board | Chrome text is #313131; titles and labels are Charcoal, as in Platinum | Measured | `clio.css capture, Mac OS 8.5 with the 8.5b6 Drawing Board theme in Infinite Mac (npm run capture:drawingboard), frame appearance` — tab and title text ink |
+| Type and tokens | System 7 | 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) | Measured | `clio.css capture, KanjiTalk 7.5.3 in Infinite Mac (tooling/emulator/measure-cjk.sh), frames kt-file-menu, kt-page-setup` — Apple KanjiTalk 7.5.3 |
+| Type and tokens | System 7 | 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 | Measured | `clio.css capture, KanjiTalk 7.5.3 in Infinite Mac, frames kt-hd-active, kt-page-setup` — Apple KanjiTalk 7.5.3 |
+| Type and tokens | Platinum | 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 | Measured | `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)` — Apple Mac OS 9.0 Language Kits |
+| Type and tokens | All eras | 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 | Third-party | `fonts/FusionPixel12-*.woff2, tooling/cjk-fonts.py, src/96-cjk.css` — Fusion Pixel Font 2026.11.10 (TakWolf, OFL-1.1, no Reserved Font Name) |
+| Type and tokens | All eras | 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 | Inferred | `src/96-cjk.css, 97-cjk-platinum.css, 98-cjk-drawingboard.css` — the measured KanjiTalk 7.5.3 and Mac OS 9.0 rows above |
+| Type and tokens | All eras | 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 | Adapted | `src/96-cjk.css (--clio-font-small)` — frame kt-hd-active (the window's information line) |
+| Type and tokens | All eras | 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 | Adapted | `js/clio.js openPopup; tooling/behaviour.mjs cjk checks` — web-only |
 | Type and tokens | All eras | 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 | Measured | `clio.css captures of Mac OS 9.0 and Mac OS 8.5 in Infinite Mac; tooling/aa-palettes.py` — Appearance title bar, Set Desktop normal and held, Save Theme… |

package/README.md

@@ -25,7 +25,7 @@ npm install clio.css
 ```
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/clio.css@0.8.0/dist/clio.css">
+<link rel="stylesheet" href="https://unpkg.com/clio.css@0.12.0/dist/clio.css">
 ```
 
 | File | What it draws |
@@ -38,6 +38,12 @@ npm install clio.css
 | `*.min.css` | Minified builds |
 | `dist/components.json` | Machine-readable index: selectors, tokens, markup and evidence per component |
 
+How it was measured, and what to reuse for the next era: [LESSONS.md](LESSONS.md). What is
+still open: [ROADMAP.md](ROADMAP.md).
+
+[COVERAGE.md](COVERAGE.md) checks clio.css against every control and window the classic
+Apple guidelines define (1987, 1992, Inside Macintosh, Mac OS 8), era by era.
+
 The stylesheets load fonts from `dist/fonts/` and the Drawing Board theme's pictures and
 patterns from `dist/art/drawingboard/` with relative URLs, so serve the `dist` folder as a
 whole (the CDNs above do).
@@ -65,10 +71,65 @@ at the element, and `--clio-db-phase: 64px` on a window or control matches the o
 </div>
 ```
 
+The Mac's arrow and I-beam cursors are on by default (redrawn from System 7.5.3 and
+Mac OS 9.0, sharp at 2x and 3x); `class="clio-system-cursors"` on `<html>` brings the
+system's back.
+
 Form controls are styled on the native elements (`button`, `input`, `select`,
 `textarea`, `fieldset`, `progress`), so keyboard, form and screen-reader behaviour stay
 the browser's.
 
+### clio.js (optional)
+
+```html
+<script src="https://unpkg.com/clio.css/dist/clio.js" defer></script>
+```
+
+A small script (no dependencies) for what a stylesheet cannot do. clio.css works without
+it; with it:
+
+- A pressed button, check box, radio button or title-bar box lets go while the pointer is
+  off it, presses again on return, and does nothing if released outside, as the Mac's
+  control tracking does.
+- Return or Enter clicks a dialog's `.default` button and Esc or Cmd-. its cancel button
+  (`data-clio-cancel` or `value="cancel"`), each after showing it pressed for 8 ticks.
+- Menus track the pointer: press a title and drag, release on an item to choose it (it
+  blinks three times first, as Mac OS 9 does), drag across titles to switch menus;
+  submenus open after 9 ticks and stay while you head for them. Mac OS 8 and 9 keep a
+  clicked menu open. From the keyboard the bar works as the web's application menu bar
+  (one Tab stop, a title's menu previewed on focus, arrow keys, Home/End, Esc one level
+  at a time, Tab out closes all); Command-key equivalents
+  written as `<kbd>⌘N</kbd>` run their item on menu bars marked `data-clio-shortcuts`.
+- `<select>` opens as the era's pop-up menu over the button, the current item on the
+  button's row: drawn by the browser where `appearance: base-select` is supported (Chrome
+  135, Safari 27) and the pointer is a mouse or trackpad, by clio.js in other browsers.
+  Drawing Board's menus carry a pencil shade the browser's picker cannot, so clio.js draws
+  those in every browser. Touch screens keep the system picker.
+- Windows positioned `absolute` or `fixed` (or marked `data-clio-drag`) drag by the title
+  bar as the Mac did: a grey outline follows the pointer and the window moves on release.
+  Each movable window also gets a move button, out of sight until it has keyboard focus:
+  arrow keys move the window 16px (Shift: 1px), Return opens a menu of moves, which a
+  right click on the title bar opens too, and a polite live region says where it went.
+  The collapse box folds a window to its title bar (`data-clio-shade="dblclick"` adds the
+  double click). `clio.zoomRects(from, to)` draws the Finder's zoom rectangles.
+- Text fields inside a `.window` get TextEdit's insertion point: a 1px line that inverts
+  what is under it, a line tall, blinking at the era's rate (32 ticks in System 6 and 7, 48 in Mac OS 8 and 9; lit
+  and still under reduced motion). The browser's own caret comes back while text is
+  selected or an input method is composing; `data-clio-caret="off"` keeps it everywhere.
+- Centred labels (buttons, tabs, window titles) whose text would start on a half pixel get
+  one more pixel at their end, so every engine lands on the Mac's `floor(spare / 2)`;
+  measured when fonts load and on resize, never per frame (`data-clio-centre="off"`).
+- Sounds: none ship. Set `clio.sounds.alert` (and `menu`, `collapse`, `expand`) to URLs
+  and put `data-clio-sounds` on `<html>`; `clio.play(name)` plays one.
+- Scroll areas (`.window-pane`, list boxes, `.clio-scroll`) get scroll bars drawn as
+  elements with the same rules as the browser's: the scroll box keeps the era's fixed
+  length, arrows repeat while held, a click in the lane pages, and System 6 and 7 drag an
+  outline of the box while Mac OS 8 and 9 scroll live. `data-clio-scrolling="smart"`
+  turns on Mac OS 8/9's Smart Scrolling (both arrows at the end, a proportional box).
+  The scroller becomes `box-sizing: border-box` and gets a first child,
+  `.clio-sb-anchor`; flex and grid scrollers, `textarea` and `select` keep the browser's
+  bar. `data-clio-js="off"` on any element leaves it alone.
+
 ## Components
 
 | Component | Markup |
@@ -103,6 +164,20 @@ or a single class, so your own CSS always wins without `!important`.
 .my-app { --clio-selection-bg: #333399; --clio-button-radius: 4px; }
 ```
 
+### Chinese, Japanese and Korean
+
+Set `lang` (`zh-Hant`/`zh-TW`, `zh-Hans`/`zh`, `ja`, `ko`) on `<html>` or any element and the
+chrome and text take that language's fonts: the period bitmap interface font if it is
+installed (Taipei, Beijing, Osaka, Seoul), then a 12px pixel stand-in, Fusion Pixel Font
+(OFL-1.1, THIRD-PARTY.md), cut to the character set that font drew (Big5 93.7%, GB 2312
+99.1%, JIS X 0208 99.5%, KS X 1001 97.4% covered), then the period outline family. As on a
+localized Mac, Latin in that element is drawn by the CJK font too. Each language's file
+(170–320 KB) loads only for text in that language; pages without it load none. Rows, line
+heights and baselines do not change: KanjiTalk 7.5.3 and Mac OS 9.0 with the Chinese Language
+Kits draw CJK at the Roman geometry (EVIDENCE.md, specimens `s7-ja-*` and `p9-zh-popup-open`
+in FIDELITY.md, which compare the ink rows with the glyphs masked, since the stand-in's
+glyphs are not Apple's). Override the stack with `--clio-font-cjk`.
+
 ## How faithful is it?
 
 [EVIDENCE.md](EVIDENCE.md) lists every value with its status and source: 57 of the 78
@@ -130,13 +205,31 @@ same way from Mac OS 9.0 (3 KB), and at any other size in **Clio Sans '97 Displa
 fallback. Window titles and push button labels use **Exact** variants whose antialiasing
 levels take the very colours the real screen shows for clio.css's own title and button
 colours (`@font-palette-values`); recolour them and set `--clio-font-window-title` or
-`--clio-font-button` to a stack without "Exact". `npm run capture:system6` re-takes the
+`--clio-font-button` to a stack without "Exact".
+
+Two Charcoal look-alikes can take over Platinum and Drawing Board chrome, set with an
+attribute on `<html>` or any ancestor:
+`data-clio-font="virtue"` uses [Virtue](https://www.scootergraphics.com/virtue/) by Marty P.
+Pfeiffer, © [Scooter Graphics](https://www.scootergraphics.com/), a TrueType reworking of
+Charcoal from 1997–99, which clio.css ships unchanged with the author's permission
+(THIRD-PARTY.md); `data-clio-font="truth"` uses Truth FB (David Berlow's own expansion of
+Charcoal, 2005, sold by Font Bureau), which you install or load yourself. Clio Sans '97
+stays as the fallback. They are outline fonts drawn by the browser, not the measured pixels. `npm run capture:system6` re-takes the
 System 6.0.8 reference frames from Infinite Mac; the frames are never committed.
 
 What the era never had is adapted, not imitated: keyboard focus rings, touch-size
 controls on `pointer: coarse` (title-bar boxes get a 45px hit area while their art stays
 11px), solid grey instead of a dithered disabled state, and system controls in
-forced-colours mode. No animation anywhere.
+forced-colours mode. The chasing arrows are the only animation, and they stop under
+`prefers-reduced-motion`.
+
+On Retina and other whole-number pixel ratios (2x, 3x) the art is magnified by nearest
+neighbour, so every Mac pixel is a solid 2×2 or 3×3 block; at fractional ratios (1.25x,
+1.5x, browser zoom) the browser's smoothing stays. `FIDELITY_DPR=2 npm run fidelity`
+checks the specimens against the references magnified the same way: 103 of 110 are
+identical at 2x and 100 at 3x. The rest are parts the layout puts on a half pixel (centred
+text with an odd spare width, controls aligned to a line's middle), which the browser
+rounds away at 1x and draws one device pixel over at 2x and 3x.
 
 ## Browser support
 

package/THIRD-PARTY.md

@@ -59,9 +59,43 @@ Inc., which is why the fonts have other names.
 | `dist/fonts/ChicagoFLF.woff2`, `.woff` | ChicagoFLF | Robin Casady | Public domain: the author's own statement and Font Library's listing (https://fontlibrary.org/font/chicagoflf); some download sites say "personal use", which is not the author's term. File as distributed by system.css |
 | `dist/fonts/Asap-Variable.woff2` | Asap (variable, wdth + wght) | Omnibus-Type | SIL Open Font License 1.1, full text in `dist/fonts/OFL-Asap.txt`; upstream github.com/Omnibus-Type/Asap at commit 2de32f20, SHA-256 3f230328…498f |
 
-Asap is a fallback stand-in for Charcoal and is not presented as an Apple font. Virtue
-(Scooter Graphics, 1997), another Charcoal look-alike, is not included: its page offers it
-free with a copyright notice and states no redistribution terms.
+Asap is a fallback stand-in for Charcoal and is not presented as an Apple font.
+
+### Fusion Pixel Font (`dist/fonts/FusionPixel12-TC.woff2`, `-SC`, `-JA`, `-KO`)
+
+Fusion Pixel Font 12px proportional, release 2026.11.10, © 2022 TakWolf
+(https://github.com/TakWolf/fusion-pixel-font), SIL Open Font License 1.1 with no Reserved
+Font Name. It merges glyphs from Ark Pixel Font (© 2021 TakWolf, OFL-1.1), Cubic 11 (with
+JF Dot M+H 12 and the M+ bitmap fonts, free software) and Galmuri (© 2019–2025 Lee Minseo,
+OFL-1.1). The licences, as the release ships them, are in `dist/fonts/OFL-FusionPixel.txt`.
+The build code of the upstream project is MIT; clio.css uses only its released fonts.
+
+clio.css ships Modified Versions under the same licence: `tooling/cjk-fonts.py` takes the
+release's `otf.woff2` zip (SHA-256 4a0bab32…b075), keeps per language the characters of the
+period Mac's interface font (Big5 for `zh_tw`, GB 2312 for `zh_hans`, JIS X 0208 for `ja`,
+KS X 1001 for `ko`, plus ASCII) and sets the vertical metrics to Clio's own pixel fonts'
+(ascent 11px, descent 3px). Glyph outlines are unchanged; the names are the upstream ones.
+They stand in for Apple's Taipei, Beijing, Osaka and Seoul, which clio.css does not ship or
+extract, and are not presented as Apple fonts.
+
+### Virtue (`dist/fonts/Virtue.woff2`)
+
+Virtue 3.2.1, © 1997–1999 Marty P. Pfeiffer, [Scooter Graphics](https://www.scootergraphics.com/)
+(https://www.scootergraphics.com/virtue/). A TrueType reworking of Charcoal, used when a page
+sets `data-clio-font="virtue"`. The file is Virtue 3.2.1 for the Mac (the `sfnt` resource of
+`virtue321tt.sit`) wrapped as WOFF2 by `tooling/virtue-woff2.py`, which checks that
+every one of its 16 tables, copyright notice included, is byte for byte the original.
+
+Virtue's own licence (the `eul.htm` in its download) does not allow redistribution or
+embedding. clio.css ships it by the author's written permission, which reads in part:
+"I'm happy to grant you permission to convert Virtue 3.2.1 into WOFF2 format and distribute
+it as part of clio.css, including through GitHub, npm and the public CDNs you mentioned,
+provided that the font itself remains unchanged. Please retain the original copyright notice
+and include a credit to Scooter Graphics with a link to scootergraphics.com in your
+documentation and third-party notices. This permission applies to the use of Virtue in
+clio.css under the conditions described in your letter. All other rights remain reserved."
+The permission covers clio.css only: using Virtue outside clio.css, or changing the file,
+needs the author's own licence.
 
 ## Art from system.css (MIT)