/* ========================================================================================== MATERIAL 3 DESIGN TOKENS ========================================================================================== The preview server's chrome is a Material 3 (Material You) surface. This block is the design system's *token* layer — colour roles, shape scale, elevation, state layers, motion and the type scale — expressed as the same `--md-sys-*` custom properties Material Web (`@material/md`) emits, so a reader who knows M3 already knows what every value here means. Nothing is imported: the server is self-contained (a strict CSP, no CDN, no web font fetch), so the baseline scheme below is inlined rather than pulled from a package. Two families, one source of truth: - `--md-sys-color-*` are the **roles** — the full M3 scheme (primary/secondary/tertiary/error families, the surface-container ladder, outline pair, inverse trio). - `--cp-*` are the **chrome aliases** this sheet was already written against. They are now defined *in terms of* the roles, so a component can be written either way and both stay in step. That indirection is what keeps the catalog palette sync working. A served design system publishes its resolved `MaterialTheme.colorScheme` as `tokens.dtcg.json`, and `ServeThemeCss` emits an inline `:root` override — of BOTH families — after this sheet, so browsing `/wear-m3/` paints the page in Wear M3's own M3 roles. Semantic colours (trusted/unverified badges, good/warn/bad scores, the code/design parity lanes) stay literal: they mean the same thing in every system and must not drift with a catalog's palette. LIGHT AND DARK ARE ONE DECLARATION, not two blocks. Every mode-dependent value is written as `light-dark(, )`, which resolves against the element's used `color-scheme` — so the whole sheet (and the catalog palette `ServeThemeCss` emits over it) has exactly one place per colour, and switching modes is one property rather than a duplicated stylesheet. That is what makes the page-theme setting possible: `.cp-scheme-light` / `.cp-scheme-dark` on pin `color-scheme`, so the chrome can be made to follow the *selected preview theme* instead of the visitor's OS (see `page-theme.js`). With no class the declared `light dark` pair defers to `prefers-color-scheme`, which is the default and the no-JS behaviour. */ :root { color-scheme: light dark; --site-header-height: 56px; /* --- M3 baseline scheme. The reference palette Material ships when a product has not supplied a source colour, so an unthemed preview server looks like Material rather than like an arbitrary indigo — light half first, dark half second. */ --md-sys-color-primary: light-dark(#6750a4, #d0bcff); --md-sys-color-on-primary: light-dark(#ffffff, #381e72); --md-sys-color-primary-container: light-dark(#eaddff, #4f378b); --md-sys-color-on-primary-container: light-dark(#4f378a, #eaddff); --md-sys-color-secondary: light-dark(#625b71, #ccc2dc); --md-sys-color-on-secondary: light-dark(#ffffff, #332d41); --md-sys-color-secondary-container: light-dark(#e8def8, #4a4458); --md-sys-color-on-secondary-container: light-dark(#4a4458, #e8def8); --md-sys-color-tertiary: light-dark(#7d5260, #efb8c8); --md-sys-color-on-tertiary: light-dark(#ffffff, #492532); --md-sys-color-tertiary-container: light-dark(#ffd8e4, #633b48); --md-sys-color-on-tertiary-container: light-dark(#633b48, #ffd8e4); --md-sys-color-error: light-dark(#b3261e, #f2b8b5); --md-sys-color-on-error: light-dark(#ffffff, #601410); --md-sys-color-error-container: light-dark(#f9dedc, #8c1d18); --md-sys-color-on-error-container: light-dark(#8c1d18, #f9dedc); --md-sys-color-surface: light-dark(#fef7ff, #141218); --md-sys-color-on-surface: light-dark(#1d1b20, #e6e0e9); --md-sys-color-surface-variant: light-dark(#e7e0ec, #49454f); --md-sys-color-on-surface-variant: light-dark(#49454f, #cac4d0); --md-sys-color-surface-dim: light-dark(#ded8e1, #141218); --md-sys-color-surface-bright: light-dark(#fef7ff, #3b383e); --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0d13); --md-sys-color-surface-container-low: light-dark(#f7f2fa, #1d1b20); --md-sys-color-surface-container: light-dark(#f3edf7, #211f26); --md-sys-color-surface-container-high: light-dark(#ece6f0, #2b2930); --md-sys-color-surface-container-highest: light-dark(#e6e0e9, #36343b); --md-sys-color-outline: light-dark(#79747e, #938f99); --md-sys-color-outline-variant: light-dark(#cac4d0, #49454f); --md-sys-color-inverse-surface: light-dark(#322f35, #e6e0e9); --md-sys-color-inverse-on-surface: light-dark(#f5eff7, #322f35); --md-sys-color-inverse-primary: light-dark(#d0bcff, #6750a4); /* `scrim` and `shadow` are deliberately absent. Every role declared here must also be emitted by `ServeThemeCss` (its test asserts exactly that), or a catalog would re-theme the page while one role quietly stayed on the baseline scheme. Those two are pure black in every M3 scheme and nothing on this page paints from them, so they are left out rather than themed to no effect — the scrim below uses its own literal black, as M3 specifies. */ /* --- Shape scale. M3 names five steps plus `full`; components pick a step rather than a pixel value, which is why a shape change (say, a more expressive corner) is one edit here. */ --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 999px; /* --- Elevation. M3's six levels are a *pair* of shadows (a tight key light and a soft ambient one); the umbra/penumbra ratios below are the spec's, with the two shadow colours carried in `--md-sys-elevation-key` / `--md-sys-elevation-ambient` so the dark scheme deepens every level at once — M3's alphas are tuned for a light surface and all but vanish on a dark one. */ --md-sys-elevation-key: light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); --md-sys-elevation-ambient: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45)); --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px 0 var(--md-sys-elevation-key), 0 1px 3px 1px var(--md-sys-elevation-ambient); --md-sys-elevation-level2: 0 1px 2px 0 var(--md-sys-elevation-key), 0 2px 6px 2px var(--md-sys-elevation-ambient); --md-sys-elevation-level3: 0 1px 3px 0 var(--md-sys-elevation-key), 0 4px 8px 3px var(--md-sys-elevation-ambient); --md-sys-elevation-level4: 0 2px 3px 0 var(--md-sys-elevation-key), 0 6px 10px 4px var(--md-sys-elevation-ambient); --md-sys-elevation-level5: 0 4px 4px 0 var(--md-sys-elevation-key), 0 8px 12px 6px var(--md-sys-elevation-ambient); /* --- State layers. In M3 an interactive surface signals hover/focus/press by compositing its *content* colour over itself at a fixed opacity, rather than by swapping to a different fill. That is why these are opacities, not colours: the same three numbers apply to a filled button, a tonal chip, and a list row. */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.1; --md-sys-state-pressed-opacity: 0.1; /* --- Motion. M3 separates *standard* movement (things entering/leaving their own lane) from *emphasized* movement (a surface the eye should follow). */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium2: 300ms; /* --- Type scale. Roboto is Material's typeface; it is *not* fetched (no web font on a self-contained server), so the stack degrades to the platform UI face where Roboto is absent. Only the roles this chrome actually uses are declared — display/headline for page titles, title for section and card headings, body for prose, label for controls and metadata. */ --md-sys-typescale-font: Roboto, "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif; --md-sys-typescale-mono-font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --md-sys-typescale-headline-small-size: 1.5rem; --md-sys-typescale-headline-small-line: 2rem; --md-sys-typescale-title-large-size: 1.375rem; --md-sys-typescale-title-large-line: 1.75rem; --md-sys-typescale-title-medium-size: 1rem; --md-sys-typescale-title-medium-line: 1.5rem; --md-sys-typescale-title-medium-tracking: 0.009375em; --md-sys-typescale-title-small-size: 0.875rem; --md-sys-typescale-title-small-line: 1.25rem; --md-sys-typescale-title-small-tracking: 0.00714em; --md-sys-typescale-body-medium-size: 0.875rem; --md-sys-typescale-body-medium-line: 1.25rem; --md-sys-typescale-body-medium-tracking: 0.01786em; --md-sys-typescale-body-small-size: 0.75rem; --md-sys-typescale-body-small-line: 1rem; --md-sys-typescale-body-small-tracking: 0.03333em; --md-sys-typescale-label-large-size: 0.875rem; --md-sys-typescale-label-large-line: 1.25rem; --md-sys-typescale-label-large-tracking: 0.00714em; --md-sys-typescale-label-medium-size: 0.75rem; --md-sys-typescale-label-medium-line: 1rem; --md-sys-typescale-label-medium-tracking: 0.04167em; --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-line: 1rem; --md-sys-typescale-label-small-tracking: 0.04545em; /* --- Chrome aliases. Every rule in this sheet that predates the token layer reads these; they are now a *view* of the M3 roles above rather than a second palette, so there is exactly one place a colour is decided. The three-step text ramp maps onto M3's own hierarchy (on-surface → on-surface-variant → outline) rather than being mixed by hand. */ --cp-bg: var(--md-sys-color-surface); --cp-surface: var(--md-sys-color-surface-container-low); --cp-surface-2: var(--md-sys-color-surface-container-high); --cp-fg: var(--md-sys-color-on-surface); --cp-fg-soft: var(--md-sys-color-on-surface); --cp-fg-muted: var(--md-sys-color-on-surface-variant); --cp-fg-faint: var(--md-sys-color-outline); --cp-border: var(--md-sys-color-outline-variant); --cp-border-strong: var(--md-sys-color-outline); --cp-accent: var(--md-sys-color-primary); --cp-accent-strong: var(--md-sys-color-on-primary-container); --cp-accent-soft: var(--md-sys-color-secondary-container); --cp-accent-ring: var(--md-sys-color-primary); --cp-on-accent: var(--md-sys-color-on-primary); --cp-on-accent-soft: var(--md-sys-color-on-secondary-container); } /* The page-theme setting ("Page theme" in the header's Settings menu, wired by `page-theme.js`): when the chrome is set to follow the SELECTED PREVIEW THEME, the resolved mode is pinned here instead of being left to `prefers-color-scheme`. Every mode-dependent value in this sheet — and in the catalog palette `ServeThemeCss` inlines after it — is a `light-dark()` pair resolved against `color-scheme`, so these two declarations re-paint the whole page. Absent both classes the `light dark` pair above defers to the OS, which is what a visitor who turned the setting off (and every no-JS client that wasn't served an explicit `?theme=`) gets. */ :root.cp-scheme-light { color-scheme: light; } :root.cp-scheme-dark { color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; padding: 28px; font-family: var(--md-sys-typescale-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); color: var(--cp-fg); background: var(--cp-bg); -webkit-font-smoothing: antialiased; } a { color: var(--cp-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* M3 focus indicator: a 3dp ring in `secondary`, offset clear of the component's own outline, on every focusable thing. Declared once so no control has to remember to grow its own. */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: inherit; } /* Selection controls (checkbox, radio, range) are painted by the UA; `accent-color` is the one hook it gives us, and pointing it at `primary` is what makes them read as Material. */ input, select, textarea, progress { accent-color: var(--md-sys-color-primary); } .cp-main, .cp-site-header, .cp-site-footer { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; } /* The page's top app bar. M3's small top app bar is a plain surface with a title on the left and trailing actions on the right — no rule beneath it; separation comes from the surface, not from a line, so the keyline is gone and the bar simply sits on the page's own colour. */ /* Three fixed slots — brand | live status | nav — rather than a flex row that redistributes. Both the render-server badge and the GitHub session control are conditional, and under `space-between` their absence slid the nav between centred and hard-right from page to page. A `1fr auto 1fr` grid pins the brand left and the nav right whatever the middle holds. */ .cp-site-header { min-height: 56px; margin-bottom: 14px; padding: 4px 0 8px; position: sticky; top: 0; z-index: 80; background: var(--cp-bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; } /* The lead slot: the brand, then this page's breadcrumb / back link. Navigation belongs in the navigation bar — as the body's first line it spent a whole row (plus its margin) restating where you are, and on the viewer that row is the difference between the render being on screen and being cut off by the fold. min-width:0 so a long catalog name ellipsises here instead of shoving the centred status badge off its column. */ .cp-site-lead { justify-self: start; min-width: 0; display: flex; align-items: center; gap: 12px; } .cp-site-nav { justify-self: end; } .cp-interface-mode { justify-self: end; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-low); white-space: nowrap; } .cp-interface-mode-label { margin: 0 7px 0 8px; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-small-size); } .cp-interface-mode button { min-height: 30px; padding: 4px 11px; border: 0; border-radius: var(--md-sys-shape-corner-full); background: transparent; color: var(--md-sys-color-on-surface-variant); box-shadow: none; } .cp-interface-mode button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } /* In the header the trail is a quiet continuation of the brand, separated by a hairline rather than by another chip: the brand IS the first crumb, so a keyline reads as the first `/`. */ .cp-site-lead .cp-breadcrumb { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--cp-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-site-lead .cp-breadcrumb > a { color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; } /* The catalog this page belongs to, named in the bar. Styled like the breadcrumb it sits beside — a hairline continuation of the brand rather than a second chip — because it answers the same "where am I" question and must not compete with the brand for weight. It carries the catalog's own primary colour, so on a themed system the bar picks up the palette the page already wears. */ .cp-site-catalog { min-width: 0; padding-left: 12px; border-left: 1px solid var(--cp-border); color: var(--md-sys-color-primary); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Beside a breadcrumb the name is the parent, so the trail drops its own keyline (one separator between any two items, never two). */ .cp-site-catalog + .cp-breadcrumb { padding-left: 0; border-left: 0; } .cp-crumb-sep { color: var(--cp-fg-faint); } .cp-crumb-current { overflow: hidden; text-overflow: ellipsis; } /* A catalog landing's back button keeps its outlined-button shape but drops to the bar's own height and loses the body margin it needed when it was the page's first element. */ .cp-site-lead .cp-back { margin: 0; min-height: 32px; padding: 5px 14px 5px 12px; font-size: var(--md-sys-typescale-label-medium-size); white-space: nowrap; } .cp-site-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--cp-fg); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 500; } .cp-site-brand:hover { text-decoration: none; color: var(--md-sys-color-primary); } /* The product mark is an M3 avatar/monogram: a full-round tonal container, not a rounded square. */ .cp-site-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); font-size: 0.9rem; } /* Trailing actions read as M3 text buttons: full-round, a state layer on hover, no underline. */ .cp-site-nav { display: flex; align-items: center; gap: 4px; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; } /* The nav is a `
` holding nothing but its button, and the panel of links BESIDE it — the phone bar below opens the one with the other (`[open] + panel`). Here there is nothing to open: the disclosure is removed and the panel is the row of actions it has always been. One copy of each link, two shapes, and no script in either — which is the whole reason the panel is the disclosure's sibling rather than its child. A `
` hides its own content when closed, so a panel inside it would have to be served `open`, closed again before first paint on a phone, and re-resolved on every breakpoint crossing: three moving parts, each able to strand the navigation behind a button, to arrive at what one selector says for free. */ .cp-site-menu { display: none; } .cp-site-menu-panel { display: flex; align-items: center; gap: 4px; } .cp-site-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-site-nav a:hover { text-decoration: none; color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .cp-site-nav .cp-gh-auth { color: var(--cp-fg-soft); } /* The Settings menu (ServeWeb.settingsMenuHtml): standing per-visitor preferences, as opposed to the controls that describe what is on screen. A `
` so it works with no JavaScript; its summary is styled as one more nav action, and the panel is an M3 menu surface anchored under it. `list-style: none` + the `::-webkit-details-marker` reset drop the disclosure triangle — the gear is the affordance. */ .cp-settings { position: relative; } .cp-settings-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); cursor: pointer; list-style: none; user-select: none; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-settings-btn::-webkit-details-marker { display: none; } .cp-settings-btn:hover, .cp-settings[open] > .cp-settings-btn { color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .cp-settings-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 8px 4px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-level2); } .cp-settings-group { margin: 0; padding: 0; border: 0; } .cp-settings-legend { padding: 4px 12px; color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); text-transform: uppercase; } /* Menu items at M3's 48dp list-item rhythm, with the radio as the leading control. */ .cp-settings-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--md-sys-shape-corner-small); cursor: pointer; font-weight: 400; color: var(--cp-fg); } .cp-settings-option:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-settings-option input { margin: 0; } .cp-settings-hint { margin: 4px 12px 6px; max-width: 280px; color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); letter-spacing: var(--md-sys-typescale-body-small-tracking); font-weight: 400; } .cp-settings-keyboard { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--md-sys-color-outline-variant); } .cp-settings-tour { margin: 0 12px 8px; padding: 4px 0; border: 0; background: none; color: var(--md-sys-color-primary); font: inherit; font-size: var(--md-sys-typescale-label-medium-size); cursor: pointer; } .cp-settings-tour:hover { text-decoration: underline; } /* Opt-in keyboard layer: a quiet persistent hint rail, command palette and first-run tour. */ .cp-keyboard-modal-open { overflow: hidden; } .cp-keyboard-hints { position: fixed; left: 50%; bottom: 14px; z-index: 44; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 5px; max-width: calc(100vw - 24px); overflow-x: auto; border-radius: var(--md-sys-shape-corner-full); background: color-mix(in srgb, var(--md-sys-color-inverse-surface) 94%, transparent); color: var(--md-sys-color-inverse-on-surface); box-shadow: var(--md-sys-elevation-level3); backdrop-filter: blur(12px); } .cp-keyboard-hints button { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 9px; border: 0; border-radius: var(--md-sys-shape-corner-full); background: none; color: inherit; font: inherit; font-size: var(--md-sys-typescale-label-small-size); cursor: pointer; } .cp-keyboard-hints button:hover, .cp-keyboard-hints button:focus-visible { background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 14%, transparent); } .cp-keyboard-hints kbd, .cp-keyboard-dialog kbd { min-width: 20px; padding: 2px 5px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 5px; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; font: 600 0.72rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; } .cp-keyboard-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: min(14vh, 112px) 16px 24px; background: color-mix(in srgb, #000 42%, transparent); } .cp-keyboard-dialog { width: min(640px, 100%); max-height: min(72vh, 700px); overflow: hidden; border-radius: var(--md-sys-shape-corner-extra-large); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-level5); } .cp-keyboard-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 12px; } .cp-keyboard-dialog h2 { margin: 2px 0 0; font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); font-weight: 500; } .cp-keyboard-eyebrow { color: var(--md-sys-color-primary); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); text-transform: uppercase; font-weight: 600; } .cp-keyboard-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; font: 1.5rem/1 inherit; cursor: pointer; } .cp-keyboard-close:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-command-search { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 0 14px; min-height: 48px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); } .cp-command-search > span { color: var(--md-sys-color-primary); font-size: 1.3rem; } .cp-command-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; } .cp-command-list { max-height: min(48vh, 430px); overflow-y: auto; padding: 4px 8px 12px; } .cp-command-section { padding: 12px 14px 4px; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-small-size); text-transform: uppercase; letter-spacing: .08em; } .cp-command-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 10px 14px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .cp-command-item[aria-selected="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .cp-command-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .cp-command-item small { color: var(--md-sys-color-on-surface-variant); } .cp-command-empty { padding: 32px 16px; color: var(--md-sys-color-on-surface-variant); text-align: center; } .cp-command-palette > footer { display: flex; gap: 18px; padding: 10px 22px 14px; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-small-size); } .cp-command-palette > footer span { display: inline-flex; align-items: center; gap: 4px; } .cp-shortcut-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 14px 12px; align-items: center; padding: 12px 22px 20px; } .cp-keyboard-note { margin: 0; padding: 14px 22px 20px; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } .cp-keyboard-onboarding { padding: 28px; } .cp-keyboard-onboarding h2 { max-width: 480px; margin: 8px 0 12px; } .cp-keyboard-onboarding p { color: var(--md-sys-color-on-surface-variant); line-height: 1.55; } .cp-onboarding-demo { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; } .cp-onboarding-demo span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest); } .cp-keyboard-onboarding > footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .cp-keyboard-onboarding > footer button { padding: 9px 16px; border-radius: var(--md-sys-shape-corner-full); border: 0; color: var(--md-sys-color-primary); background: transparent; font: inherit; font-weight: 600; cursor: pointer; } .cp-keyboard-onboarding > footer .cp-onboarding-start { color: var(--md-sys-color-on-primary); background: var(--md-sys-color-primary); } @media (max-width: 640px) { .cp-keyboard-hints { left: 12px; right: 12px; transform: none; } .cp-keyboard-hints button span { display: none; } .cp-keyboard-overlay { padding-top: 7vh; } .cp-shortcut-grid { grid-template-columns: auto 1fr; } .cp-command-palette > footer { display: none; } } @media (prefers-reduced-motion: reduce) { .cp-keyboard-overlay *, .cp-keyboard-hints * { scroll-behavior: auto !important; } } .cp-site-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--cp-border); color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); letter-spacing: var(--md-sys-typescale-body-small-tracking); display: flex; flex-direction: column; align-items: stretch; gap: 14px; } /* The links row keeps the footer's original single-line shape; the footer itself is now a column so a page can put its own block (the catalog-provenance disclosure) above it. */ .cp-site-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cp-site-footer a { display: inline-flex; align-items: center; gap: 4px; } /* "report a bug" sits in the footer's links row and must read as one of them, but it is a GET form (see ServeWeb.reportBugFormHtml for why it cannot be an anchor) — so the form is unwrapped to a plain inline box and its submit button is stripped of button chrome, the same treatment the per-preview .cp-report-link gets. */ .cp-report-bug { display: inline-flex; margin: 0; } .cp-report-bug-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: var(--cp-accent); cursor: pointer; } .cp-report-bug-link:hover { text-decoration: underline; } /* Page + section headings ride the M3 type scale rather than ad-hoc rem sizes. */ .cp-head { margin: 0 0 4px; font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: 400; } .cp-sub { margin: 0 0 20px; font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); letter-spacing: var(--md-sys-typescale-body-medium-tracking); color: var(--cp-fg-muted); } .cp-breadcrumb { margin: 0 0 8px; color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); } /* Front-door section rhythm. The page is a run of (title, grid) pairs with no wrapper element, so the gap BETWEEN sections is expressed on the title that follows a grid — one section reads as one band instead of the whole page reading as an undifferentiated column of cards. */ .cp-section-title { margin: 0 0 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; } .cp-section-title .cp-head { margin: 0; font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); letter-spacing: 0; font-weight: 400; } .cp-grid + .cp-section-title { margin-top: 44px; } .cp-section-count, .cp-catalog-id { color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); } /* The count reads as a quiet tally beside its heading, not as a second title — an M3 suggestion chip's shape in the neutral container role. */ .cp-section-count { padding: 4px 10px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font-weight: 500; } /* The landing's identity line, built like the viewer's `.cp-preview-head`: the catalog's name and trust verdict, its id, and the preview/view tally on ONE baseline. They answer the same question ("what am I looking at"), and as a title block with a summary paragraph under it they answered it twice over a row the fold could be spending on previews. `.cp-catalog-title` stays its own box inside the row because the phone rule below hides IT — the bar already names the catalog there — while the tally moves below the grid instead. */ .cp-catalog-head-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 10px; } .cp-catalog-head-row .cp-sub { margin: 0; } .cp-catalog-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0; } .cp-catalog-title .cp-head, .cp-catalog-title .cp-catalog-id { margin: 0; } .cp-catalog-id { font-family: var(--md-sys-typescale-mono-font); } .cp-catalog-head { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); } /* Per-preview GitHub links under the viewer title: source file, and "report an issue". One flex row so they read as a single line whether one or both are present. */ .cp-preview-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 8px; } .cp-source, .cp-report, .cp-figma { margin: 0; font-size: 0.8rem; } /* The report affordance is a GET form (its action is the GitHub issue form, its title/body are hidden inputs) so no page state ever reaches a navigation sink — but it reads as a link, so the submit button is stripped of its button chrome and styled as one. */ .cp-source-link, .cp-report-link, .cp-figma-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cp-fg-muted); text-decoration: none; } .cp-report-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .cp-source-link:hover, .cp-report-link:hover, .cp-figma-link:hover { text-decoration: underline; } /* The Figma mark is 2:3, not square like the GitHub one — size it by height so it isn't squashed. */ .cp-figma-mark { width: auto; height: 14px; } /* M3 *filled* card: a container-role fill with no outline and no shadow. The border this used to carry is what made every panel on the page read as a box; M3 separates panels from the page by tone instead, which is why the surface-container ladder exists. */ /* The about disclosure closes the page: it sits under the content it explains and above the site footer, so its separation is above it, not below. */ .cp-about { margin: 34px 0 0; padding: 16px 20px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); max-width: 720px; } .cp-about-title { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: 500; } .cp-about-body { margin: 0 0 8px; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.5; letter-spacing: var(--md-sys-typescale-body-medium-tracking); color: var(--md-sys-color-on-surface-variant); } .cp-about-body code { font-family: var(--md-sys-typescale-mono-font); font-size: 0.8rem; padding: 1px 5px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-high); } .cp-about-links { margin: 0; font-size: 0.8rem; color: var(--cp-fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cp-about-links a, .cp-gh-auth { display: inline-flex; align-items: center; gap: 4px; } .cp-gh { width: 15px; height: 15px; vertical-align: text-bottom; } /* An M3 assist chip carrying the build id. */ .cp-about-ver { font-family: var(--md-sys-typescale-mono-font); font-size: var(--md-sys-typescale-label-small-size); letter-spacing: var(--md-sys-typescale-label-small-tracking); padding: 3px 10px; border-radius: var(--md-sys-shape-corner-full); border: 1px solid var(--md-sys-color-outline-variant); background: transparent; color: var(--md-sys-color-on-surface-variant); } .cp-gh-auth--signed { color: var(--cp-fg-soft); } .cp-disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cp-disclosure > summary::-webkit-details-marker { display: none; } /* The Show/Hide affordance is an M3 text button: label-large in `primary`, pill state layer. */ .cp-disclosure > summary::after { content: "Show"; color: var(--md-sys-color-primary); font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; padding: 6px 12px; border-radius: var(--md-sys-shape-corner-full); transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-disclosure[open] > summary::after { content: "Hide"; } .cp-disclosure > summary:hover::after { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); } .cp-disclosure-hint { flex: 1; color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-body-small-size); letter-spacing: var(--md-sys-typescale-body-small-tracking); font-weight: 400; } .cp-disclosure-body { margin-top: 12px; } /* Catalog "back to home" — an M3 outlined button: 40dp tall, fully rounded, an `outline` keyline, and a `primary` state layer under the pointer rather than a surface swap. */ .cp-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; min-height: 40px; font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; padding: 8px 20px 8px 16px; border-radius: var(--md-sys-shape-corner-full); border: 1px solid var(--md-sys-color-outline); background: transparent; color: var(--md-sys-color-primary); } .cp-back { transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-back:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); border-color: var(--md-sys-color-outline); color: var(--md-sys-color-primary); text-decoration: none; } /* Provenance strip: how/when/from-what this catalog was generated (branch, date, versions, a link to re-run the generating workflow). It rides in the site footer, expanded, beside the build and source links. */ .cp-prov { margin: 18px 0 0; padding: 14px 18px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); letter-spacing: var(--md-sys-typescale-body-small-tracking); color: var(--cp-fg-muted); max-width: 720px; } .cp-prov-title { color: var(--cp-fg-soft); font-weight: 500; font-size: var(--md-sys-typescale-title-small-size); letter-spacing: var(--md-sys-typescale-title-small-tracking); } .cp-prov-body { display: flex; flex-wrap: wrap; gap: 8px 16px; } .cp-prov-item { display: inline-flex; align-items: center; gap: 5px; } .cp-prov-item .cp-prov-key { color: var(--cp-fg-faint); } .cp-prov-item code { font-family: var(--md-sys-typescale-mono-font); font-size: 0.74rem; padding: 1px 5px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-high); } .cp-prov-refresh { appearance: none; border: 0; padding: 0; background: none; color: var(--cp-accent); font: inherit; cursor: pointer; } .cp-prov-refresh:hover { text-decoration: underline; } .cp-prov-refresh:disabled { color: var(--cp-fg-faint); cursor: wait; text-decoration: none; } .cp-prov-refresh-status { color: var(--cp-fg-faint); } /* In the footer the strip is the first block, so it drops the leading margin it needed when it trailed the catalog grid. */ .cp-site-footer .cp-prov { margin: 0; } .cp-systems { margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.85rem; } .cp-systems-label { font-weight: 600; color: var(--cp-fg-muted); } /* M3 filter chips: 32dp, fully rounded, outlined when unselected and a `secondary-container` tonal fill when selected — the same selected treatment every chip row on this page now uses. */ .cp-systems a, .cp-systems-cur { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 16px; border-radius: var(--md-sys-shape-corner-small); border: 1px solid var(--md-sys-color-outline-variant); font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; } .cp-systems a { background: transparent; color: var(--md-sys-color-on-surface-variant); } .cp-systems a:hover { text-decoration: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-systems-cur { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); font-weight: 500; } .cp-toolbar { margin: 0; } .cp-searchbar { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 440px; } .cp-catalog-tools { position: sticky; top: var(--site-header-height); z-index: 18; margin: 0 0 20px; padding: 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: var(--cp-bg); } /* The catalog's own actions — the comparison views, the parity view, the playground, Transparent. M3 *assist chips*: outlined, 32dp, label-large, one per destination — inside a MENU, at every width, the way the Theme chips beside them now are. They spent years as a row of their own above the toolbar, which put two chip rows and a tally between a catalog's heading and its first card; they are destinations a visitor goes looking for, not text read on the way past, so they live behind the `⋯` pill and the fold they were costing goes back to the previews. `position: relative` is load-bearing in both shapes this row takes — nested in the sticky toolbar beside the Theme pill, and standing alone when a catalog publishes no Theme control at all — because it is what the `⋯` panel measures from. */ .cp-catalog-actions { position: relative; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .cp-actions-menu > summary { display: inline-flex; list-style: none; } .cp-actions-menu > summary::-webkit-details-marker { display: none; } .cp-actions-menu[open] > summary { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); } /* The `⋯` is the trailing control on its row, so its panel hangs off the right edge — the same M3 menu surface, offset and elevation `.cp-theme-menu-panel` uses for the Theme pill next to it. A menu is a column of full-width rows, not a wrapping chip row: each destination gets its own line and its own hit target. */ .cp-actions-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 28px)); padding: 8px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-level2); } .cp-actions-menu[open] + .cp-actions-panel { display: flex; flex-direction: column; align-items: stretch; gap: 2px; } .cp-actions-panel .cp-action-chip, .cp-actions-panel .cp-bg-btn { width: 100%; min-height: 40px; justify-content: flex-start; text-align: left; } .cp-catalog-download { margin: 30px 0 0; } .cp-action-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); background: transparent; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-action-chip:hover, .cp-action-chip:focus-visible { text-decoration: none; color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } /* M3 search bar: a filled `surface-container-high` pill with NO outline — the fill is the affordance. Focus is the shared 3dp `secondary` ring rather than a border colour change. */ .cp-search { flex: 1 1 260px; max-width: 420px; min-height: 44px; padding: 10px 18px; font: inherit; font-size: var(--md-sys-typescale-body-medium-size); letter-spacing: var(--md-sys-typescale-body-medium-tracking); border: 0; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); } .cp-search::placeholder { color: var(--md-sys-color-on-surface-variant); } .cp-search:focus { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } .cp-count { font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); color: var(--cp-fg-muted); } .cp-empty { margin: 12px 0 0; font-size: var(--md-sys-typescale-body-medium-size); color: var(--cp-fg-muted); } .cp-empty[hidden] { display: none; } /* Sectioned catalog: a navigation TREE beside the grid (ServeWeb.catalogTreeHtml) rather than a row of tabs above it — sections as rows, each opening onto its named sub-groups, so both levels of a catalog's structure are visible at once instead of only its top one. Progressive enhancement — with no JS every section shows under its own

, nothing collapses, and every row is a working in-page anchor; the filter script turns the rows into real section switching and adds `cp-js` to , which collapses the unselected branches and hides the then-redundant per-section

(the tree already names the section). */ .cp-catalog-body { display: block; } /* The sidebar only appears where there is room for one beside a grid of 200px cards. Below that the tree stays a full-width block above the panels — the same reading order, stacked. `--cp-sticky-tools` is how much sticky chrome sits above everything: `.cp-catalog-tools` pins itself at `top: 0` with a higher z-index, so a second sticky element parked at 16px would spend its life underneath the search field, and a `scrollIntoView` that lands an element at viewport zero puts it under there too. Both clear it by that height instead. It is set by the tree script from the toolbar's measured box — it wraps on a narrow viewport and grows a row with the declared-theme chips — and, like every other script-supplied property in this sheet, it is read ONLY with a literal fallback, so the no-JS page still clears an unwrapped toolbar. */ @media (min-width: 960px) { .cp-catalog-body { display: grid; grid-template-columns: minmax(168px, 216px) minmax(0, 1fr); gap: 32px; align-items: start; } .cp-catalog-menu { position: sticky; top: calc(var(--site-header-height) + var(--cp-sticky-tools, 0px) + 12px); max-height: calc(100vh - var(--site-header-height) - var(--cp-sticky-tools, 0px) - 28px); overflow-y: auto; overscroll-behavior: contain; } } .cp-catalog-menu { margin: 0 0 22px; } /* Room for a FOCUS RING to be drawn — after the margin shorthand above, which would otherwise reset the inline margins this needs. Every focusable thing in this column is ringed 5px outside its own box (`outline: 3px` + `outline-offset: 2px`), and the column scrolls at this width — which clips on BOTH axes, not just the one named, because a scroll container's other axis computes to `auto` rather than staying `visible`. The filter field is the first row AND full-width, so it lost the top and both sides of its ring: three of its four edges, on the one control a keyboard visitor lands in first. The padding is the ring's reach; the negative inline margin gives the column back the width it just spent, so the ring gains somewhere to land and nothing moves. */ @media (min-width: 960px) { .cp-catalog-menu { padding: 6px; margin-inline: -6px; } } /* The Components / Pages switch at the head of the sidebar (ServeWeb.paneTabsHtml). Two peers, so an M3 segmented button rather than a nav row: one shape, split in two, with the selected half filled. The strip leads the column and the filter sits under it, which is what makes the filter read as belonging to whichever list is showing. */ .cp-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); overflow: hidden; } .cp-pane-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; color: var(--md-sys-color-on-surface-variant); border: 0; background: transparent; cursor: pointer; text-align: center; transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-pane-tab + .cp-pane-tab { border-left: 1px solid var(--md-sys-color-outline-variant); } .cp-pane-tab:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-pane-tab[aria-selected="true"] { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); } /* The count rides the tab the way it rides a tree row. The column is 168–216px whatever the viewport, so this is not a viewport question and there is no breakpoint to hang it on: the label holds its size and the count is what shrinks, down to nothing, when the two will not fit. */ .cp-pane-tab .cp-tree-count { flex: 0 1 auto; min-width: 0; overflow: hidden; } .cp-pane[hidden] { display: none; } .cp-page-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* A page WITH sections is a branch. It reuses the component tree's twisty and child indent rather than inventing a second visual language for the same idea one pane over — the only difference is that this row is a real link to the whole sheet as well as a fold, so the arrow is the part that folds and the label is the part that navigates. */ .cp-page-branch > .cp-tree-page { justify-content: flex-start; } .cp-page-branch > .cp-tree-page .cp-tree-count { margin-left: auto; } .cp-page-sections { margin: 2px 0 6px 12px; border-left: 1px solid var(--md-sys-color-outline-variant); padding-left: 8px; } html.cp-js .cp-page-branch > .cp-tree-page[aria-expanded="false"] + .cp-page-sections { display: none; } .cp-page-sections li[hidden] { display: none; } .cp-page-list li[hidden] { display: none; } .cp-pane-empty { margin: 10px 2px; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); } /* The way out to the pages index, kept after the list rather than as a row inside it: it is not one of the pages, and a filter that empties the list must not take the escape hatch with it. */ .cp-pane-all { display: inline-block; margin: 12px 2px 0; font-size: var(--md-sys-typescale-label-medium-size); color: var(--md-sys-color-primary); } .cp-catalog-menu .cp-searchbar { display: block; margin: 0 0 18px; } .cp-catalog-menu .cp-search { width: 100%; min-width: 0; padding-inline: 14px; } .cp-catalog-menu .cp-tree { margin: 0; } .cp-tree { margin: 0 0 22px; } .cp-tree-list, .cp-tree-children { list-style: none; margin: 0; padding: 0; } .cp-tree-node[hidden], .cp-tree-children li[hidden] { display: none; } /* A section row. Still `.cp-tab` — the section-switching script and the e2e harness both key off that class and its `data-tab` — but drawn as an M3 navigation item: a full-width 40dp row whose selected state is a `secondary-container` pill rather than an underline. */ .cp-tab { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 14px; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; color: var(--md-sys-color-on-surface-variant); border: 0; border-radius: var(--md-sys-shape-corner-full); background: transparent; cursor: pointer; text-align: left; transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-tab:hover { color: var(--md-sys-color-on-surface); text-decoration: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-tab[aria-selected="true"] { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); } /* The expand/collapse twisty, drawn only for a section that HAS sub-groups (the markup omits `aria-expanded` on a leaf), so a leaf row's label lines up with the others' labels. */ .cp-tab[aria-expanded]::before { content: ""; flex: none; width: 0; height: 0; margin-left: -4px; border: 5px solid transparent; border-left-color: currentColor; border-right-width: 0; transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); } .cp-tab[aria-expanded="true"]::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .cp-tab[aria-expanded]::before { transition-duration: 0.01ms; } } /* Collapse is a JS-only state: a no-JS client shows every panel, so it must show every branch — which is also the only way its rows stay reachable, since the arrow keys never bind there. One rule for all four levels: a collapsed row hides the list it owns. */ html.cp-js .cp-tab[aria-expanded="false"] + .cp-tree-children, html.cp-js .cp-tree-link[aria-expanded="false"] + .cp-tree-children { display: none; } /* The twisty, drawn for any row that can expand — group and component alike. */ .cp-tree-link[aria-expanded]::before { content: ""; flex: none; width: 0; height: 0; margin-left: -6px; border: 4px solid transparent; border-left-color: currentColor; border-right-width: 0; transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized); } .cp-tree-link[aria-expanded="true"]::before { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .cp-tree-link[aria-expanded]::before { transition-duration: 0.01ms; } } /* Level three and four. Each nests one step further in and loses a little weight, so depth reads at a glance rather than having to be counted: group → component → variant. */ /* A component row jumps to a card, so a card needs the same clearance under the sticky toolbar that sections and sub-groups already get — without it every component jump parks the preview's top edge behind the toolbar. */ .cp-card { scroll-margin-top: calc(var(--cp-sticky-tools, 64px) + 12px); } .cp-tree-components { margin: 2px 0 4px 12px; border-left: 1px solid var(--md-sys-color-outline-variant); } .cp-tree-component, .cp-tree-page { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; font-size: var(--md-sys-typescale-label-medium-size); color: var(--cp-fg-muted); text-decoration: none; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-tree-component:hover, .cp-tree-page:hover { color: var(--md-sys-color-on-surface); text-decoration: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-tree-component[aria-expanded="true"] { color: var(--md-sys-color-on-surface); font-weight: 500; } .cp-tree-variants { margin: 0 0 4px 12px; border-left: 1px dashed var(--md-sys-color-outline-variant); } /* A variant row leaves the page — it is the one row that navigates to the viewer, because the grid folds these renders out and there is nothing here to jump to. */ .cp-tree-variant { display: block; min-height: 26px; padding: 3px 10px; font-size: var(--md-sys-typescale-label-small-size); color: var(--cp-fg-faint); text-decoration: none; } .cp-tree-variant:hover { color: var(--md-sys-color-primary); text-decoration: underline; } .cp-tree-component:focus-visible, .cp-tree-variant:focus-visible, .cp-tree-page:focus-visible, .cp-tree-pages-row:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -2px; } /* The design file's own PAGES, at the foot of the tree. A page is a view of the specification rather than a part of this catalog's inventory, and its rows leave the page instead of jumping within it — so the branch sits below the components behind a hairline, wearing the group row's shape so it still reads as one of the tree's top-level destinations. */ .cp-tree-node.cp-tree-pages { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--md-sys-color-outline-variant); } /* A section's sub-groups, indented under one guide line. */ .cp-tree-children { margin: 2px 0 8px 22px; border-left: 1px solid var(--md-sys-color-outline-variant); } .cp-tree-group, .cp-tree-pages-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); color: var(--cp-fg-muted); text-decoration: none; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-tree-group:hover, .cp-tree-pages-row:hover { color: var(--md-sys-color-on-surface); text-decoration: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } /* Where you ARE — set by the scroll-spy as the grid moves under you, and on click. */ .cp-tree-group[aria-current="true"] { color: var(--md-sys-color-primary); font-weight: 500; box-shadow: inset 2px 0 0 var(--md-sys-color-primary); } .cp-tab:focus-visible, .cp-tree-group:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: -2px; } /* A section row's count is an M3 badge — a small tonal pill riding at the end of the row. */ .cp-tab-count { margin-left: auto; font-size: var(--md-sys-typescale-label-small-size); letter-spacing: var(--md-sys-typescale-label-small-tracking); font-weight: 500; padding: 2px 8px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .cp-tab[aria-selected="true"] .cp-tab-count { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } /* A group row's count is plain text: two badge styles down one column would compete. */ .cp-tree-count { margin-left: auto; font-size: var(--md-sys-typescale-label-small-size); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--cp-fg-faint); } .cp-section { margin: 0; scroll-margin-top: calc(var(--cp-sticky-tools, 64px) + 16px); } .cp-section[hidden] { display: none; } .cp-section-head { margin: 0 0 16px; font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 500; } html.cp-js .cp-section-head { display: none; } /* `scroll-margin-top` because both are jump targets — a tree row scrolls to a `.cp-subgroup`, and a no-JS client follows `#cp-panel-` to a `.cp-section`. Without it the heading they were asked for lands at viewport zero, under the sticky toolbar. */ .cp-subgroup { margin: 0 0 30px; scroll-margin-top: calc(var(--cp-sticky-tools, 64px) + 16px); } .cp-subgroup[hidden] { display: none; } .cp-group-head { margin: 26px 0 12px; font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-fg-faint); } .cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; } /* The Theme picker carries one chip per configured theme (the baked light/dark pair plus any app-declared @ThemeCatalog theme), so it wraps rather than overflowing a narrow viewport. That is exactly why it is NOT an M3 segmented button: a segmented track is specified for a small, fixed set of connected options, and a connected track that wraps draws one keyline around two or three ragged rows. A catalog with a handful of declared themes lands there immediately, so the picker is a flow row of M3 *filter chips* instead — the component M3 specifies for a wrapping, variable-length set — sharing .cp-state-btn's shape and the same `secondary-container` selected fill the segmented track used. */ .cp-theme { display: inline-flex; flex-wrap: wrap; gap: 8px; max-width: 100%; } .cp-states { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } .cp-axis-label { align-self: center; margin-right: 2px; color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-small-size); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } /* M3 filter chip. */ .cp-state-btn { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); background: transparent; color: var(--md-sys-color-on-surface-variant); font: inherit; font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; padding: 6px 16px; cursor: pointer; text-decoration: none; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-state-btn:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-state-btn[aria-current="page"] { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); font-weight: 500; } /* `` (serve-components.js) renders the Transparent button into its own light DOM. `display: contents` drops the wrapper out of layout entirely, so the .cp-bg-btn inside stays the toolbar's own flex item and the upgraded control lays out exactly as the bare button did. */ cp-bg-toggle { display: contents; } /* The controller elements (serve-components.js): each only wires behaviour onto markup the server already rendered — remembered fold state, the phone's toolbar reflow, the viewer's drawers — and none of them has anything to draw. An autonomous custom element defaults to `display: inline`, so without this each would sit in its page's flow as an empty inline box. */ cp-group-memory, cp-catalog-toolbar, cp-viewer-drawers, cp-parity-lanes, cp-rc-lanes, cp-spec-compare, cp-inspect-layers, cp-catalog-live, cp-design-page, cp-compare-wall, cp-reference-compare { display: none; } /* `` DOES render — the whole "Visual differences" band — so it drops out of layout rather than out of sight, leaving the `
` it renders as the flow's own child exactly as the server-emitted one was. */ cp-parity-scores { display: contents; } /* …and the same filter chip for the theme chips and for the two standalone toggles that used to be segmented pairs — Transparent () and the viewer's Fit width (.cp-zoom-toggle). One rule so everything on the viewer bar cannot drift apart. `aria-pressed` is a toggle chip's selected state, exactly as `aria-current` is a navigation chip's. A disabled chip keeps M3's 38% on-surface treatment rather than vanishing — a theme this lane cannot render is information. */ .cp-theme-btn, .cp-bg-btn { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); background: transparent; color: var(--md-sys-color-on-surface-variant); font: inherit; font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: 500; padding: 6px 16px; cursor: pointer; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-theme-btn:hover:not(:disabled), .cp-bg-btn:hover:not(:disabled) { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-theme-btn:disabled, .cp-bg-btn:disabled { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); cursor: default; } .cp-theme-btn[aria-pressed="true"], .cp-bg-btn[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); font-weight: 500; } /* --- A Light / Dark chip is a TASTER of the theme it selects. The chips used to be identical outlined pills that differed only in the word on them, so the answer to "what does Dark actually look like here?" was a click and a wait. Each of these now pins its own `color-scheme`, which re-resolves every `light-dark()` pair in the token layer — including a served catalog's own palette — in THAT chip's mode. So on `/wear-m3/` the Dark chip is painted in wear-m3's own near-black-and-cyan and the Light chip in its light projection, whichever way round the page itself is; the pair reads as two swatches of one system rather than two labels. Costs nothing: no extra data, no render, one property per chip. The baked axis and any declared theme with an unambiguous light/dark mode are tasted. `Default` and an unqualified `theme:` keep the plain outlined pill: the page cannot resolve a mode for those without guessing. */ .cp-theme-btn:is([data-theme-choice="light"], [data-theme-mode="light"], [data-compare-theme="light"]) { color-scheme: light; } .cp-theme-btn:is([data-theme-choice="dark"], [data-theme-mode="dark"], [data-compare-theme="dark"]) { color-scheme: dark; } .cp-theme-btn:is([data-theme-choice="light"], [data-theme-choice="dark"], [data-theme-mode], [data-compare-theme="light"], [data-compare-theme="dark"]) { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-outline-variant); } .cp-theme-btn:is([data-theme-choice="light"], [data-theme-choice="dark"], [data-theme-mode], [data-compare-theme="light"], [data-compare-theme="dark"]):hover:not(:disabled) { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-low)); } /* A DISABLED chip — the viewer greys the Day/Night pair on a fixed lane (the spec view, an `.rc` canvas) — keeps its swatch and dims its LABEL, rather than falling back to the shared transparent treatment. Both halves of that matter. The shared treatment fades the label to 38% of `on-surface`, and on a chip pinned to the opposite scheme that is near-white text on a light page (or near-black on a dark one): an unavailable option that has vanished rather than one that reads as unavailable. Dimming *within the chip's own scheme* keeps the same 38% relationship against the surface it is actually painted on. Everything here therefore stays inside one `color-scheme`, which is also why the pin above is unconditional: a rule that dropped the pin on a state change would leave the chip's colours resolved in one mode and its label in another. */ .cp-theme-btn:is([data-theme-choice="light"], [data-theme-choice="dark"], [data-theme-mode], [data-compare-theme="light"], [data-compare-theme="dark"]):disabled { background: var(--md-sys-color-surface-container-low); color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); opacity: 0.7; } /* Selection is a RING, not a fill swap: the fill is the swatch — the whole point of the chip — so replacing it to say "selected" would hide the theme at exactly the moment you picked it. The ring is drawn in the chip's own accent, as a `box-shadow` rather than an `outline` so it doesn't collide with the focus ring every control in this sheet shares, and **inset** so it stays inside the button's own box. That last part is not a style choice: the viewer's `.cp-theme-bar` is a horizontal scroller (`overflow-x: auto; overflow-y: hidden`) with padding on the bottom edge only, so an outward ring is clipped flat along the top — and along the outer edge of the first and last chip — leaving a "selected" marker with two sides missing. An inset ring is clip-proof in any container, and on a filled swatch it reads as the chip's own keyline anyway. */ .cp-theme-btn:is([data-theme-choice="light"], [data-theme-choice="dark"], [data-theme-mode], [data-compare-theme="light"], [data-compare-theme="dark"])[aria-pressed="true"] { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); border-color: transparent; font-weight: 600; box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); } .cp-theme-btn:is([data-theme-choice="light"], [data-theme-choice="dark"], [data-theme-mode], [data-compare-theme="light"], [data-compare-theme="dark"])[aria-pressed="true"]:disabled { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 38%, transparent); } /* Trust badges. Their COLOURS stay literal (a verdict must read the same in every design system), but the shape is M3's: a fully-rounded tonal container, no keyline. */ .cp-badge { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: var(--md-sys-shape-corner-full); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-weight: 500; vertical-align: middle; white-space: nowrap; } .cp-badge--trusted { background: light-dark(#d7f0dd, #0d3a1c); color: light-dark(#10521f, #86dc9d); border: 0; } .cp-badge--unverified { background: light-dark(#ffdfb0, #4a3000); color: light-dark(#573100, #ffd8a3); border: 0; } /* The degradation banner takes M3's *error/warning container* shape: a tonal fill at the large corner with no outline, so it reads as a surface rather than as a boxed alert. */ .cp-degrade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium); font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.4; background: light-dark(#ffdfb0, #4a3000); color: light-dark(#573100, #ffd8a3); border: 0; } .cp-degrade-icon { font-weight: 700; } .cp-degrade-item { display: inline; } /* Historical permalinks. The pin banner takes the same tonal-container shape as the degradation banner above — it is the same kind of statement, "what you are looking at is not the default" — but in the primary family rather than the warning one: a pinned page is a deliberate choice, not a degraded state. */ .cp-pinned { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; padding: 12px 16px; border-radius: var(--md-sys-shape-corner-medium); font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.4; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .cp-pinned code { font-size: 0.86em; } .cp-pinned-current { font-weight: 650; } /* The revision control is a menu, not a wall: an outlined trigger that names the revision the page is on, and a floating list of the others — the same `
`-as-menu shape as the settings button above. A dozen publishes as chips took four lines of page before the preview and made the reader hunt for the highlighted one; closed, this is a single control that already says which version you are looking at. */ .cp-revisions { position: relative; display: inline-block; margin: 0 0 12px; font-size: 0.82rem; color: var(--cp-fg-muted); } .cp-revisions-btn { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); color: var(--md-sys-color-on-surface-variant); cursor: pointer; list-style: none; user-select: none; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .cp-revisions-btn::-webkit-details-marker { display: none; } .cp-revisions-btn:hover, .cp-revisions[open] > .cp-revisions-btn { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-revisions-key { font-weight: 650; } .cp-revisions-caret { font-size: 0.9em; opacity: 0.7; } .cp-revisions[open] .cp-revisions-caret { transform: rotate(180deg); } /* Menu surface: M3 elevated container, capped so a long branch history scrolls inside the popup instead of pushing the page around. */ .cp-revisions-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: max-content; max-width: min(420px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto; padding: 8px 4px; border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-level2); } .cp-revision-list { display: flex; flex-direction: column; gap: 2px; margin: 0; } .cp-revision { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border: 0; border-radius: var(--md-sys-shape-corner-small); color: var(--cp-fg); text-decoration: none; white-space: nowrap; } .cp-revision:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } .cp-revision[aria-current="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .cp-revision-date { font-variant-numeric: tabular-nums; } .cp-revision-sha { font-size: 0.92em; opacity: 0.85; margin-left: auto; } .cp-revision-tag { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; } .cp-revision-tag--pinned { color: var(--md-sys-color-primary); opacity: 1; } .cp-revision-note { margin: 8px 12px 4px; max-width: 44ch; color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line); } /* Status page (GET /status): stat tiles, config grid, and the catalog/daemon/failure tables. */ .cp-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 22px; max-width: 860px; } /* Stat tiles are M3 filled cards at the medium corner: tonal fill, no keyline. */ .cp-stat { border: 0; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); padding: 14px 16px; } .cp-stat-key { font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; color: var(--cp-fg-faint); } .cp-stat-val { margin-top: 4px; font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line); font-weight: 400; color: var(--cp-fg); } .cp-status-sec { margin: 26px 0 12px; font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 500; } .cp-status-scroll { overflow-x: auto; max-width: 100%; margin: 0 0 8px; } .cp-table { border-collapse: collapse; font-size: var(--md-sys-typescale-body-medium-size); letter-spacing: var(--md-sys-typescale-body-medium-tracking); max-width: 860px; min-width: 100%; } .cp-table th { text-align: left; font-weight: 500; color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-label-medium-size); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); white-space: nowrap; } .cp-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: top; } .cp-table tr:last-child td { border-bottom: none; } .cp-table code { font-family: var(--md-sys-typescale-mono-font); font-size: 0.76rem; padding: 1px 5px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-high); } .cp-ok { color: #1e7a34; font-weight: 600; } .cp-muted { color: var(--cp-fg-faint); font-size: 0.76rem; } /* Design parity page (GET //parity): the coverage meter, the merged two-lane activity feed, and the mapping-gap tables. The lane colours are SEMANTIC (code vs. design), so — like the trusted/unverified badges — they stay literal rather than following a catalog's palette: a row must mean the same thing on /wear-m3 as on /m3-catalog. Everything else here is drawn from the chrome tokens and needs no dark counterpart. */ /* M3 linear progress indicator: a 4dp full-round track in `secondary-container` with a `primary` active bar — the shape Material uses for a determinate meter. */ .cp-parity-meter { max-width: 860px; height: 4px; border-radius: var(--md-sys-shape-corner-full); overflow: hidden; background: var(--md-sys-color-secondary-container); margin: 0 0 8px; } .cp-parity-meter-fill { height: 100%; background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); } .cp-parity-sub { margin: 18px 0 6px; font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 500; color: var(--cp-fg-soft); } .cp-parity-lane { display: inline-block; padding: 3px 10px; border-radius: var(--md-sys-shape-corner-full); font-size: var(--md-sys-typescale-label-small-size); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .cp-parity-lane--code { background: light-dark(#d7f0dd, #0d3a1c); color: light-dark(#10521f, #86dc9d); border: 0; } .cp-parity-lane--figma { background: light-dark(#e5deff, #372b70); color: light-dark(#3c2b80, #c9c0ff); border: 0; } .cp-parity-feed { list-style: none; margin: 0; padding: 0; max-width: 860px; } .cp-parity-entry { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cp-surface-2); } .cp-parity-entry:last-child { border-bottom: none; } .cp-parity-entry[hidden] { display: none; } .cp-parity-entry--resolved { opacity: 0.55; } .cp-parity-when { flex: 0 0 128px; font-size: 0.74rem; color: var(--cp-fg-faint); font-variant-numeric: tabular-nums; padding-top: 2px; } .cp-parity-body { flex: 1 1 auto; min-width: 0; } .cp-parity-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .cp-parity-title { font-size: 0.86rem; color: var(--cp-fg); overflow-wrap: anywhere; } .cp-parity-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.74rem; color: var(--cp-fg-faint); } .cp-parity-who { color: var(--cp-fg-muted); } .cp-parity-targets { margin-top: 5px; font-size: 0.76rem; } .cp-parity-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cp-parity-comparisons { max-width: 860px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant); } .cp-parity-comparisons-title { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); font-weight: 500; color: var(--cp-fg); } .cp-parity-comparisons .cp-table { min-width: 620px; } .cp-parity-missing { color: var(--md-sys-color-error); font-weight: 500; } @media (max-width: 640px) { .cp-parity-entry { flex-direction: column; gap: 4px; } .cp-parity-when { flex: none; } } .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; } .cp-syslist { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } /* 220px hero + a meta row that takes the rest, so the meta block can bottom-align its count line (`margin-top: auto`) and a row of cards agrees on where that line sits. Selected on BOTH classes deliberately: `.cp-card { display: block }` is declared later in this sheet and at equal specificity it won, which silently made the row template inert. */ .cp-card.cp-sys { display: grid; grid-template-rows: 220px 1fr; } .cp-syslist .cp-imgwrap { min-height: 0; height: 220px; overflow: hidden; } .cp-syslist .cp-imgwrap > img { width: 100%; height: 100%; max-height: none; object-fit: contain; } /* A front-door card is a poster, not a table row: the meta block gets its own padding, the title and the library coordinate sit on separate rhythms, and the count line is divided off so a three-line coordinate can't run straight into it. */ /* The meta block fills the card's second row so the count line can be pushed to the bottom: a one-line coordinate and a three-line one then still land their footers on the same baseline across a row, which is what makes the grid read as a grid rather than as ragged tiles. */ .cp-sys .cp-meta { display: flex; flex-direction: column; padding: 14px 16px 15px; } .cp-sys-title { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: 500; } .cp-sys .cp-id { margin-top: 5px; font-size: var(--md-sys-typescale-body-small-size); letter-spacing: var(--md-sys-typescale-body-small-tracking); } .cp-sys-desc { margin-top: 7px; font-size: var(--md-sys-typescale-body-small-size); letter-spacing: var(--md-sys-typescale-body-small-tracking); color: var(--cp-fg-muted); line-height: 1.5; } /* `auto` collapses to zero once the metadata fills the card, so the padding — not the margin — is what guarantees the count never crowds the line above it. */ .cp-sys-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); font-size: var(--md-sys-typescale-label-medium-size); letter-spacing: var(--md-sys-typescale-label-medium-tracking); color: var(--cp-fg-muted); } .cp-sys-noimg { font-size: var(--md-sys-typescale-body-small-size); color: var(--cp-fg-faint); } /* M3 *elevated card*: `surface-container-low` at the medium corner, resting at elevation level 1, with no outline — a card is separated from the page by tone and shadow, not by a keyline. */ .cp-card { position: relative; isolation: isolate; border: 0; border-radius: var(--md-sys-shape-corner-medium); overflow: hidden; background: var(--md-sys-color-surface-container-low); display: block; color: inherit; box-shadow: var(--md-sys-elevation-level1); transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized), box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .cp-card[hidden] { display: none; } /* Card hover — the whole tile is the affordance, so it must NOT read as a hyperlink. The sheet's global `a:hover { text-decoration: underline }` otherwise underlined every line of a card's meta at once (title, id, coordinate, count), which looked like four separate links rather than one target; the card answers the pointer as an object instead: it lifts off the page, casts a shadow, takes an accent rim, and wipes an accent bar along its top edge while its artwork eases in a little. Focus-visible gets the identical treatment so keyboard navigation is not a second-class path. Everything here is transform/opacity-only, so it costs no layout. */ /* Hover/focus is M3's card interaction: rise to elevation level 3 and take a `primary` STATE LAYER over the whole tile (the ::after below), rather than swapping to another fill or growing an accent rim. The small lift is kept — it is what tells a pointer the tile itself is the target — but it is now the shadow, not a border colour, that carries the change. */ .cp-card:hover, .cp-card:focus-visible { transform: translateY(-2px); text-decoration: none; box-shadow: var(--md-sys-elevation-level3); } .cp-card:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; } .cp-card::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--md-sys-color-primary); opacity: 0; transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); pointer-events: none; } .cp-card:hover::after { opacity: var(--md-sys-state-hover-opacity); } .cp-card:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); } .cp-card:hover .cp-sys-title, .cp-card:focus-visible .cp-sys-title, .cp-card:hover .cp-label, .cp-card:focus-visible .cp-label { color: var(--md-sys-color-primary); } .cp-card .cp-imgwrap img { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); } .cp-card:hover .cp-imgwrap img, .cp-card:focus-visible .cp-imgwrap img { transform: scale(1.035); } /* A card mid-render is already animating (fade + spinner); leave its artwork alone so the two effects don't fight, and never zoom for a visitor who asked for less motion. */ .cp-card.cp-reloading:hover .cp-imgwrap img { transform: none; } @media (prefers-reduced-motion: reduce) { .cp-card, .cp-card::after, .cp-card .cp-imgwrap img { transition-duration: 0.01ms; } .cp-card:hover, .cp-card:focus-visible { transform: none; } .cp-card:hover .cp-imgwrap img, .cp-card:focus-visible .cp-imgwrap img { transform: none; } } .cp-card--render-failed { border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 55%, transparent); } .cp-card--render-failed > summary { list-style: none; cursor: pointer; } .cp-card--render-failed > summary::-webkit-details-marker { display: none; } .cp-render-failure { flex-direction: column; gap: 7px; padding: 18px; text-align: center; color: var(--md-sys-color-error); background: color-mix(in srgb, var(--md-sys-color-error-container) 55%, var(--md-sys-color-surface)); } .cp-render-failure > span:last-child { color: var(--md-sys-color-on-error-container); font-size: 12px; max-width: 34ch; } .cp-render-failure-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid currentColor; font-size: 19px; font-weight: 700; } .cp-render-failure-detail { position: relative; z-index: 4; padding: 12px 14px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; } .cp-render-failure-detail p, .cp-render-failure-frame { color: var(--md-sys-color-on-surface-variant); font-size: 12px; } .cp-render-stack pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--md-sys-color-surface-container-lowest); font-size: 11px; } .cp-render-failure-summary { margin: 12px 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 45%, transparent); border-radius: 12px; color: var(--md-sys-color-on-error-container); background: color-mix(in srgb, var(--md-sys-color-error-container) 45%, var(--md-sys-color-surface)); } .cp-render-failure-summary > strong { color: var(--md-sys-color-error); } .cp-render-failure-summary ul { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; } .cp-render-failure-summary li { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; } .cp-render-failure-summary li span { overflow-wrap: anywhere; } .cp-imgwrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88px; background: var(--cp-surface); padding: 12px; } /* `width`/`height` stay auto so the max-* pair alone decides the used size and the image can never be stretched. The front door's prebaked heroes DO carry width/height attributes — they give the browser the aspect ratio up front (no layout shift) — but those must not become a definite width, or a max-height clamp (the narrow-viewport rule below drops it to 200px) would squash the height without narrowing the width. The heroes are rasterised at 2x this box, so clamping here is what makes them crisp rather than merely small. */ .cp-imgwrap img { max-width: 100%; max-height: 240px; width: auto; height: auto; display: block; } /* A framed thumbnail: a clip window whose aspect-ratio is the component box, that crops away a sticker's empty watch canvas. The window's natural width is the box (so it never upscales past 1x), but `max-width: 100%` lets it shrink to a narrow grid card instead of overflowing it — the render inside is absolutely positioned and sized + offset in PERCENTAGES of the box, so the whole frame scales as one when the card is narrower than the box. Overrides fit-to-box. */ .cp-crop { position: relative; overflow: hidden; display: block; max-width: 100%; } .cp-imgwrap .cp-crop img { position: absolute; max-width: none; max-height: none; margin: 0; } /* Sticker backing: the preview server shows components on a solid surface by DEFAULT, so a transparent sticker reads like a real component instead of washing out. The header's Transparent toggle flips the whole page to a checkerboard (html.cp-bg-transparent) to inspect the raw transparent PNG; the choice persists per-visitor in localStorage['cp-bg']. */ html.cp-bg-transparent .cp-imgwrap, html.cp-bg-transparent .cp-stage { background: repeating-conic-gradient(var(--cp-surface-2) 0% 25%, var(--cp-surface) 0% 50%) 50% / 16px 16px; } /* Back each card by its OWN render theme: a light-rendered sticker always sits on a light surface and a dark-rendered one on a dark surface, independent of the browser's color scheme or the explicitly-selected catalog theme. Without this a transparent light sticker (dark strokes) shown on the dark browser backing — or dark on light — washes to near-invisible. Solid mode only; the Transparent toggle's checkerboard still wins via cp-bg-transparent. These two backdrops are deliberately LITERAL, not chrome custom properties: they are pinned to the render's own theme (that is the whole point), so neither the browser's colour scheme nor a catalog's palette may move them. The un-tagged `.cp-imgwrap`/`.cp-stage` default above does follow the palette — an unthemed sticker has no theme of its own to be backed by. */ html:not(.cp-bg-transparent) .cp-card[data-bg-theme="light"] .cp-imgwrap { background: #fff; } html:not(.cp-bg-transparent) .cp-card[data-bg-theme="dark"] .cp-imgwrap { background: #1d1d20; } /* The single-preview viewer's stage follows the preview's background theme the same way the grid thumbnails do (data-bg-theme on .cp-viewer, kept SEPARATE from the explicit-only data-card-theme filter axis): a dark variant — or any preview in a dark-first system like Wear — sits on a dark stage so a light-on-transparent render stays readable. The viewer JS keeps data-bg-theme in step with the chosen Theme (uiMode) so it doesn't clash after a re-render. Solid mode only; the Transparent checkerboard still wins via cp-bg-transparent. */ html:not(.cp-bg-transparent) .cp-viewer[data-bg-theme="dark"] .cp-stage { background: #1d1d20; } html:not(.cp-bg-transparent) .cp-viewer[data-bg-theme="light"] .cp-stage { background: #fff; } .cp-meta { padding: 12px 16px 14px; font-size: var(--md-sys-typescale-body-medium-size); } .cp-label { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-id { color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-body-small-size); letter-spacing: var(--md-sys-typescale-body-small-tracking); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-engage { margin-top: 3px; color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-medium-size); } .cp-viewer-engage { color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-body-small-size); } /* The viewer's identity line: name, trust verdict, id and view tally on ONE baseline. They answer the same question ("what am I looking at"), and as three stacked blocks they answered it three times over ~90px of the fold — on a laptop that was the difference between seeing the render and scrolling to it. They still wrap on a narrow viewport; they just don't insist on wrapping. */ .cp-preview-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 8px; } .cp-preview-title { margin: 0; font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line); } .cp-preview-id { font-family: var(--md-sys-typescale-mono-font); padding: 2px 6px; border-radius: var(--md-sys-shape-corner-extra-small); background: var(--md-sys-color-surface-container-high); color: var(--cp-fg-muted); font-size: var(--md-sys-typescale-body-small-size); letter-spacing: var(--md-sys-typescale-body-small-tracking); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The four disclosures — Components, State/Variant, Theme, Overrides — ride at the end of that same identity row, pushed to the trailing edge by the auto margin. They are the page's controls over what is *shown*, so grouping them buys one place to look; keeping them on the title row rather than a strip of their own is what makes the fold they buy back a net gain. `align-self` overrides the row's baseline alignment: a 34px pill sitting on a headline's baseline hangs below the row it belongs to. */ .cp-head-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; align-self: center; } .cp-head-toggles .cp-revisions { margin: 0; font-size: inherit; } .cp-head-toggles .cp-revisions-btn { min-height: 34px; padding: 6px 14px; } /* The history menu fills itself in from a manifest, so it takes the row's sizing the same way its neighbour does rather than carrying a second set of numbers. `` is the tag the server declares in this row; `display: contents` drops it out of layout so the `
` it renders is the flex item, exactly as the old script's free-standing `
` was — otherwise the row's `gap` would be spent on a wrapper that is empty whenever there is no timeline. */ cp-history-menu { display: contents; } .cp-head-toggles .cp-history-menu { font-size: inherit; } .cp-head-toggles .cp-history-btn { min-height: 34px; padding: 6px 14px; } .cp-theme-menu { position: relative; } .cp-theme-menu > summary { list-style: none; } .cp-theme-menu > summary::-webkit-details-marker { display: none; } .cp-theme-menu[open] > summary { background: var(--md-sys-color-secondary-container); border-color: transparent; color: var(--md-sys-color-on-secondary-container); } .cp-theme-caret { font-size: 0.85em; opacity: 0.7; } .cp-theme-menu[open] .cp-theme-caret { transform: rotate(180deg); } .cp-theme-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: max-content; max-width: min(360px, calc(100vw - 32px)); padding: 8px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-level2); } .cp-theme-menu-panel .cp-theme-bar { display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: visible; padding: 0; } .cp-theme-menu-panel .cp-theme-btn { min-width: 12em; width: 100%; text-align: left; } /* The axis toggles are the drawer toggle's compact sibling: same pill, same selected language, but two-part — the axis it folds, then the value that axis currently holds. Four full-size drawer pills on the title row of a 1100px laptop wrap; at this size they don't. */ /* Both classes on one button, and `.cp-drawer-toggle` is declared further down this sheet — at equal specificity the later rule wins, so a bare `.cp-axis-toggle` here set `gap`/`min-height`/ `padding` and then had all three taken straight back off it. Qualifying with both classes is what actually makes these compact, which is what keeps four controls beside the title instead of wrapping them onto a row of their own. */ .cp-drawer-toggle.cp-axis-toggle { gap: 6px; min-height: 34px; padding: 6px 14px; } .cp-toggle-label { color: var(--cp-fg-faint); font-size: var(--md-sys-typescale-label-small-size); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .cp-axis-toggle[aria-expanded="true"] .cp-toggle-label { color: var(--md-sys-color-on-secondary-container); } /* The value is the fact the folded row would otherwise have carried, so it is the emphasised half and it never ellipsises away to nothing. */ .cp-toggle-value { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The folded component subtree. A plain block wrapper so `hidden` is all the toggle has to set; the `