pub const MACOS: &str = "/*\n * lumen-skin-macos - macOS 14/15-era (pre-Tahoe) Aqua-flavoured skin.\n *\n * Activated via `<root skin=\"macos\">` (or `[skin] name = \"macos\"` /\n * `\"auto\"` on a Mac in lumen.toml). Light-first with a full dark\n * override; the runtime re-resolves the @media block live on OS theme\n * change. Values follow the native-skins spec (Apple HIG + WebKit\n * AppKit control metrics; entries marked approx there are honest\n * estimates).\n *\n * Signatures reproduced: 20px mini-bezel buttons with NO hover state\n * (macOS buttons give hover feedback only via tooltips), flat accent\n * default button, 38x22 pill switch with white knob (shared by both\n * `<toggle>` and the dedicated `<switch>` element), thin 5px slider\n * track, accent-filled menu selection, soft 4px accent-alpha focus halo\n * (keyboard-only on buttons via :focus-visible, always-on for fields),\n * ~10px window-tier dialog radius.\n *\n * Known approximations (engine gaps): the focus halo is hard-edged (no\n * feathered blur), menu/vibrancy blur is a solid fallback, the switch\n * knob inset (`--lumen-knob-inset` below) is the shared cross-platform\n * 4px value rather than an authentic ~1px AppKit inset, and the slider\n * thumb diameter (`--lumen-thumb-size`) is the shared 16px value rather\n * than the ~20px HIG spec.\n */\n\n:root {\n --lumen-accent: #007aff;\n --lumen-accent-hover: #007aff; /* macOS: no hover shift on accent */\n --lumen-accent-active: #0064d0;\n --lumen-on-accent: #ffffff;\n\n --lumen-window-bg: #ececec;\n --lumen-surface: #ffffff;\n --lumen-surface-hover: #ffffff; /* = resting: macOS has no button hover */\n --lumen-surface-active: #f0f0f0;\n --lumen-input-bg: #ffffff;\n\n --lumen-panel: #f5f5f5;\n --lumen-panel-hover: #e8e8e8;\n\n --lumen-border: #0000001a;\n --lumen-border-subtle: #00000026;\n --lumen-border-strong: #00000040;\n\n --lumen-text: #000000d9;\n --lumen-text-muted: #00000080;\n --lumen-text-disabled: #00000040;\n --lumen-disabled-bg: #f5f5f5;\n\n --lumen-track: #00000021;\n --lumen-track-hover: #00000021;\n --lumen-track-active: #0000002e;\n --lumen-knob: #ffffff;\n\n --lumen-focus-ring: #0067f480;\n --lumen-focus-ring-width: 4;\n\n --lumen-radius-sm: 5;\n --lumen-radius: 6;\n --lumen-radius-lg: 10;\n --lumen-shadow-raised: 0 1 2 #00000026;\n --lumen-shadow-panel: 0 6 18 #00000033;\n --lumen-shadow-dialog: 0 14 40 #00000040;\n --lumen-backdrop: #00000033;\n --lumen-scrollbar-thumb: #00000059;\n /* Tooltip dwell (ms) / cursor gap (px) - help tags appear slowly on macOS. */\n --lumen-tooltip-delay: 1000;\n --lumen-tooltip-offset: 12;\n\n /* Indeterminate <progress> sweep period (ms) and moving-chunk width\n as a fraction of the track. */\n --lumen-progress-period: 1200;\n --lumen-progress-chunk: 0.3;\n\n /* Toggle / switch knob inset (px) and the slider thumb diameter (px);\n see the \"known approximations\" note above. */\n --lumen-knob-inset: 4;\n --lumen-thumb-size: 16;\n\n /* Gap (px) between a dropdown/menu trigger and its floating panel. */\n --lumen-popup-gap: 4;\n\n /* Opacity for a disabled control with no `:disabled { bg }` of its\n own (menu items, popover rows, view-switcher tabs, form controls). */\n --lumen-disabled-opacity: 0.5;\n\n /* Text-input caret. */\n --lumen-caret-width: 2;\n --lumen-caret-blink: 530ms;\n\n /* Line-height multiplier. */\n --lumen-line-height: 1.2;\n\n /* Overlay scrollbar geometry / hover feedback / fade timing. */\n --lumen-scrollbar-thickness: 8;\n --lumen-scrollbar-thickness-thin: 4;\n --lumen-scrollbar-margin: 2;\n --lumen-scrollbar-min-thumb: 24;\n --lumen-scrollbar-track-hover: #80808029;\n --lumen-scrollbar-hover-boost: 1.6;\n --lumen-scrollbar-fade-delay: 1000ms;\n --lumen-scrollbar-fade-duration: 250ms;\n\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --lumen-accent: #0a84ff;\n --lumen-accent-hover: #0a84ff;\n --lumen-accent-active: #3395ff;\n --lumen-on-accent: #ffffff;\n\n --lumen-window-bg: #323232;\n --lumen-surface: #5f5f5f;\n --lumen-surface-hover: #5f5f5f;\n --lumen-surface-active: #6e6e6e;\n --lumen-input-bg: #1e1e1e;\n\n --lumen-panel: #2e2e2e;\n --lumen-panel-hover: #3a3a3a;\n\n --lumen-border: #ffffff1a;\n --lumen-border-subtle: #ffffff21;\n --lumen-border-strong: #ffffff40;\n\n --lumen-text: #ffffffd9;\n --lumen-text-muted: #ffffff8c;\n --lumen-text-disabled: #ffffff40;\n --lumen-disabled-bg: #ffffff14;\n\n --lumen-track: #ffffff24;\n --lumen-track-hover: #ffffff24;\n --lumen-track-active: #ffffff33;\n --lumen-knob: #ffffff;\n\n --lumen-focus-ring: #1aa9ff80;\n\n --lumen-shadow-raised: 0 1 2 #00000059;\n --lumen-shadow-panel: 0 6 18 #00000073;\n --lumen-shadow-dialog: 0 14 40 #00000080;\n --lumen-backdrop: #00000040;\n --lumen-scrollbar-thumb: #ffffff59;\n }\n}\n\n/* === Base ===\n * SF stack; 13px is the macOS body/control size. -apple-system resolves\n * on a Mac; elsewhere the chain falls through to the platform\n * sans-serif, so cross-platform preview still lays out sanely.\n */\nroot {\n bg: var(--lumen-window-bg);\n text-color: var(--lumen-text);\n font-family: -apple-system, \"SF Pro Text\", \"Helvetica Neue\", sans-serif;\n font-size: 13;\n line-height: var(--lumen-line-height);\n}\n\n/* === Buttons ===\n * 20px bezel (padding 2 12 around 13px text), raised via a 1px soft\n * shadow instead of a border ([WK ButtonMac]: no stroke). Explicit\n * no-hover; press darkens the bezel ~6%. Focus halo is keyboard-only\n * (full-keyboard-access semantics).\n */\nbutton {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius-sm);\n padding: 2 12;\n min-height: 20;\n text-color: var(--lumen-text);\n shadow: var(--lumen-shadow-raised);\n}\nbutton:hover { bg: var(--lumen-surface-hover); }\nbutton:active { bg: var(--lumen-surface-active); }\nbutton:focus-visible { outline: 4 var(--lumen-focus-ring); }\nbutton:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* Default / primary button: flat accent fill + white text (one per view). */\nbutton.primary { bg: var(--lumen-accent); text-color: var(--lumen-on-accent); }\nbutton.primary:hover { bg: var(--lumen-accent-hover); }\nbutton.primary:active { bg: var(--lumen-accent-active); }\nbutton.primary:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* === Text fields ===\n * 22px Ventura-style rounded fields, white well, 1px hairline stroke.\n * The halo is always-on for fields (macOS focuses text fields with a\n * ring regardless of input source).\n */\ninput,\ntextarea {\n bg: var(--lumen-input-bg);\n radius: var(--lumen-radius-sm);\n padding: 2 5;\n min-height: 22;\n text-color: var(--lumen-text);\n border: 1px solid var(--lumen-border-subtle);\n caret-width: var(--lumen-caret-width);\n caret-blink: var(--lumen-caret-blink);\n}\ninput:hover, textarea:hover { bg: var(--lumen-input-bg); }\ninput:focus, textarea:focus { outline: 4 var(--lumen-focus-ring); }\ninput:disabled, textarea:disabled { bg: var(--lumen-disabled-bg); text-color: var(--lumen-text-disabled); }\n\n/* === Switch (toggle) ===\n * 38x22 pill [WK SwitchMacUtilities], white knob, accent fill when on.\n */\ntoggle {\n width: 38;\n height: 22;\n min-width: 38;\n radius: 11;\n bg: var(--lumen-track);\n knob-color: var(--lumen-knob);\n knob-inset: var(--lumen-knob-inset);\n}\ntoggle:hover { bg: var(--lumen-track); }\ntoggle:active { bg: var(--lumen-track-active); }\ntoggle:checked { bg: var(--lumen-accent); }\ntoggle:focus-visible { outline: 4 var(--lumen-focus-ring); }\ntoggle:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Switch ===\n * `<switch>` is a distinct element from `<toggle>`, but AppKit has one\n * switch control, so it shares the same 38x22 pill and colors. No\n * hover shift, matching every other macOS control; `transition` here\n * only sets the duration/easing the thumb-slide animation reuses (same\n * TransitionSpecs lookup the tint tweens elsewhere read).\n */\nswitch {\n width: 38;\n height: 22;\n min-width: 38;\n radius: 11;\n bg: var(--lumen-track);\n knob-color: var(--lumen-knob);\n knob-inset: var(--lumen-knob-inset);\n transition: bg 140ms ease-out;\n}\nswitch:hover { bg: var(--lumen-track); }\nswitch:active { bg: var(--lumen-track-active); }\nswitch:checked { bg: var(--lumen-accent); }\nswitch:focus-visible { outline: 4 var(--lumen-focus-ring); }\nswitch:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Slider ===\n * Thin 5px track (radius 2), round white thumb.\n */\nslider {\n height: 5;\n min-width: 160;\n radius: 2;\n bg: var(--lumen-track);\n knob-color: var(--lumen-knob);\n thumb-size: var(--lumen-thumb-size);\n}\nslider:hover { bg: var(--lumen-track); }\nslider:focus-visible { outline: 4 var(--lumen-focus-ring); }\nslider:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Generic tiles === */\ntile:focus-visible { outline: 4 var(--lumen-focus-ring); }\ntile:disabled { bg: var(--lumen-disabled-bg); }\n\n/* === Pop-up button (dropdown header) === */\n.dropdown-button {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius-sm);\n padding: 2 10;\n min-height: 21;\n text-color: var(--lumen-text);\n shadow: var(--lumen-shadow-raised);\n text-overflow: ellipsis;\n}\n.dropdown-button:hover { bg: var(--lumen-surface); }\n.dropdown-button:active { bg: var(--lumen-surface-active); }\n.dropdown-button:focus-visible { outline: 4 var(--lumen-focus-ring); }\n\n.dropdown-panel {\n transition: opacity 120ms ease;\n bg: var(--lumen-panel);\n radius: var(--lumen-radius);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 5 0;\n popup-gap: var(--lumen-popup-gap);\n}\n/* Menu-style selection: accent bar + white text (HIG color roles). */\n.dropdown-option { bg: var(--lumen-panel); text-color: var(--lumen-text); text-align: start; radius: var(--lumen-radius-sm); text-overflow: ellipsis; disabled-opacity: var(--lumen-disabled-opacity); }\n.dropdown-option:hover { bg: var(--lumen-accent); text-color: var(--lumen-on-accent); }\n.dropdown-option:focus { outline: 2 var(--lumen-focus-ring); }\n\n/* === Menus === */\n.menu-panel {\n transition: opacity 120ms ease;\n bg: var(--lumen-panel);\n radius: var(--lumen-radius);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 5 0;\n popup-gap: var(--lumen-popup-gap);\n}\n.menu-item { bg: var(--lumen-panel); text-color: var(--lumen-text); text-align: start; radius: var(--lumen-radius-sm); min-height: 22; disabled-opacity: var(--lumen-disabled-opacity); }\n.menu-item:hover { bg: var(--lumen-accent); text-color: var(--lumen-on-accent); }\n.menu-item:focus { outline: 2 var(--lumen-focus-ring); }\n.menu-separator { bg: var(--lumen-border); height: 1; margin: 4 0; }\n\n/* === Dialogs ===\n * Light scrim; the surface is a ~10px card with a hairline and a deep\n * shadow (alert anatomy per HIG).\n */\ndialog { bg: var(--lumen-backdrop); transition: opacity 150ms ease; }\n.dialog-surface {\n bg: var(--lumen-panel);\n radius: var(--lumen-radius-lg);\n shadow: var(--lumen-shadow-dialog);\n border: 1px solid var(--lumen-border);\n padding: 20;\n}\n\n/* === Cards === */\n.card {\n bg: var(--lumen-surface);\n radius: var(--lumen-radius);\n border: 1px solid var(--lumen-border-subtle);\n padding: 16;\n}\n\n/* === Segmented control (tabs) ===\n * Recessed well; the selected segment is a raised surface pill (not\n * accent-filled) - the macOS segmented signature.\n */\n.tab-strip { bg: var(--lumen-track); radius: var(--lumen-radius); padding: 1; gap: 1; }\n.tab-btn {\n bg: #00000000;\n radius: var(--lumen-radius-sm);\n padding: 2 10;\n min-height: 20;\n text-color: var(--lumen-text);\n text-overflow: ellipsis;\n disabled-opacity: var(--lumen-disabled-opacity);\n}\n.tab-btn:hover { bg: #00000000; }\n.tab-btn:selected { bg: var(--lumen-surface); }\n.tab-btn:focus-visible { outline: 4 var(--lumen-focus-ring); }\n\n/* === Tooltip === */\n.tooltip {\n bg: var(--lumen-panel);\n text-color: var(--lumen-text);\n radius: var(--lumen-radius-sm);\n shadow: var(--lumen-shadow-panel);\n border: 1px solid var(--lumen-border);\n padding: 4 8;\n font-size: 11;\n}\n\n/* === Scroll regions === */\nscroll {\n scrollbar-color: var(--lumen-scrollbar-thumb);\n scrollbar-thickness: var(--lumen-scrollbar-thickness);\n scrollbar-thickness-thin: var(--lumen-scrollbar-thickness-thin);\n scrollbar-margin: var(--lumen-scrollbar-margin);\n scrollbar-min-thumb: var(--lumen-scrollbar-min-thumb);\n scrollbar-track-hover: var(--lumen-scrollbar-track-hover);\n scrollbar-hover-boost: var(--lumen-scrollbar-hover-boost);\n scrollbar-fade-delay: var(--lumen-scrollbar-fade-delay);\n scrollbar-fade-duration: var(--lumen-scrollbar-fade-duration);\n}\nscroll:focus { outline: 3 var(--lumen-focus-ring); }\n\n/* === Checkbox / Radio / Progress (W5 form controls) === */\ncheckbox { disabled-opacity: var(--lumen-disabled-opacity); }\ncheckbox:checked { bg: var(--lumen-accent); }\ncheckbox:focus-visible { outline: 2 var(--lumen-focus-ring); }\n.checkbox-box { width: 16; height: 16; radius: 4; bg: var(--lumen-surface); border: 1px solid var(--lumen-border); text-color: var(--lumen-on-accent); font-size: 12; text-align: center; }\n.checkbox-label { text-color: var(--lumen-text); }\nradio { disabled-opacity: var(--lumen-disabled-opacity); }\nradio:selected { bg: var(--lumen-accent); }\nradio:focus-visible { outline: 2 var(--lumen-focus-ring); }\n.radio-dot { width: 16; height: 16; radius: 8; bg: var(--lumen-surface); border: 1px solid var(--lumen-border); }\n.radio-label { text-color: var(--lumen-text); }\nprogress { bg: var(--lumen-surface); radius: 3; height: 6; progress-duration: var(--lumen-progress-period); progress-chunk: var(--lumen-progress-chunk); }\n.progress-fill { bg: var(--lumen-accent); radius: 3; }\n\n/* Dialog default button (Enter-anywhere target): accent ring. */\nbutton.default { border: 2px solid var(--lumen-accent); }\n";Expand description
macOS-flavoured skin (macOS 14/15-era Aqua): 20px buttons, no hover feedback, pill switch, soft accent focus halo.